/* roulang page: index */
:root {
      --bg-base: #0A0F1D;
      --bg-surface: rgba(16, 24, 43, 0.75);
      --border-cyan: rgba(0, 210, 255, 0.15);
      --glow-cyan: 0 0 25px rgba(0, 210, 255, 0.45);
      --glow-orange: 0 0 25px rgba(255, 107, 0, 0.4);
    }
    body {
      background-color: var(--bg-base);
      color: #F8FAFC;
      font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .glass-card {
      background: var(--bg-surface);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border-cyan);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .glass-card:hover {
      border-color: rgba(0, 210, 255, 0.5);
      box-shadow: var(--glow-cyan);
      transform: translateY(-3px);
    }
    .btn-glow-cyan {
      background: linear-gradient(135deg, #00D2FF 0%, #0066FF 100%);
      box-shadow: 0 4px 20px rgba(0, 210, 255, 0.35);
      transition: all 0.3s ease;
    }
    .btn-glow-cyan:hover {
      box-shadow: var(--glow-cyan);
      filter: brightness(1.1);
    }
    .btn-glow-orange {
      background: linear-gradient(135deg, #FF8C00 0%, #FF6B00 100%);
      box-shadow: 0 4px 20px rgba(255, 107, 0, 0.35);
      transition: all 0.3s ease;
    }
    .btn-glow-orange:hover {
      box-shadow: var(--glow-orange);
      filter: brightness(1.1);
    }
    .border-glow {
      border: 1px solid rgba(0, 210, 255, 0.25);
    }
    /* 进度条动画与指示 */
    .progress-fill {
      background: linear-gradient(90deg, #0066FF, #00D2FF, #FF6B00);
      background-size: 200% 100%;
      animation: gradientMove 3s linear infinite;
    }
    @keyframes gradientMove {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }