/* roulang page: index */
:root {
      --primary-gradient: linear-gradient(135deg, #f43f5e 0%, #ec4899 50%, #8b5cf6 100%);
      --surface-gradient: linear-gradient(180deg, #fff1f2 0%, #ffffff 100%);
      --card-bg: #ffffff;
      --text-main: #0f172a;
      --text-muted: #64748b;
      --border-color: #f1f5f9;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      color: var(--text-main);
      background-color: #fafaf9;
      -webkit-font-smoothing: antialiased;
    }
    .brand-gradient-text {
      background: var(--primary-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .brand-gradient-bg {
      background: var(--primary-gradient);
    }
    .ticket-cutout-left, .ticket-cutout-right {
      position: relative;
    }
    .ticket-cutout-left::before {
      content: '';
      position: absolute;
      left: -12px;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      background-color: #fafaf9;
      border-radius: 50%;
    }
    .ticket-cutout-right::after {
      content: '';
      position: absolute;
      right: -12px;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      background-color: #fafaf9;
      border-radius: 50%;
    }
    .progress-circle {
      background: conic-gradient(#f43f5e 0% 78%, #fecdd3 78% 100%);
    }