/* roulang page: index */
:root {
      --bg-primary: #0a0b10;
      --bg-secondary: #12141e;
      --bg-card: #1a1d2e;
      --brand-purple: #8b5cf6;
      --brand-pink: #ec4899;
      --accent-cyan: #06b6d4;
      --accent-amber: #f59e0b;
      --text-main: #f8fafc;
      --text-sub: #cbd5e1;
      --text-muted: #64748b;
    }
    body {
      background-color: var(--bg-primary);
      color: var(--text-sub);
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.8;
      overflow-x: hidden;
    }
    .text-gradient {
      background: linear-gradient(135deg, #a78bfa 0%, #ec4899 50%, #06b6d4 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .btn-gradient {
      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    }
    .btn-gradient:hover {
      background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
      box-shadow: 0 0 25px rgba(236, 72, 153, 0.4);
    }
    .card-glass {
      background: rgba(26, 29, 46, 0.7);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .card-glass:hover {
      border-color: rgba(139, 92, 246, 0.4);
    }
    .pulse-dot {
      animation: pulseGlow 2s infinite;
    }
    @keyframes pulseGlow {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(1.2); }
    }
    details > summary {
      list-style: none;
    }
    details > summary::-webkit-details-marker {
      display: none;
    }

/* roulang page: category2 */
:root {
            --bg-primary: #0a0b10;
            --bg-secondary: #12141e;
            --bg-card: #1a1d2e;
            --brand-purple: #8b5cf6;
            --brand-pink: #ec4899;
            --accent-cyan: #06b6d4;
            --accent-amber: #f59e0b;
            --text-main: #f8fafc;
            --text-sub: #cbd5e1;
            --text-muted: #64748b;
        }
        body {
            background-color: var(--bg-primary);
            color: var(--text-sub);
            font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
            line-height: 1.8;
            overflow-x: hidden;
        }
        .text-gradient {
            background: linear-gradient(135deg, #a78bfa 0%, #ec4899 50%, #06b6d4 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .btn-gradient {
            background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
        }
        .btn-gradient:hover {
            background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
            box-shadow: 0 0 25px rgba(236, 72, 153, 0.4);
        }
        .card-glass {
            background: rgba(26, 29, 46, 0.7);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        .card-glass:hover {
            border-color: rgba(139, 92, 246, 0.4);
        }
        .poster-card {
            aspect-ratio: 2/3;
        }

/* roulang page: category1 */
:root {
      --bg-primary: #0a0b10;
      --bg-secondary: #12141e;
      --bg-card: #1a1d2e;
      --brand-purple: #8b5cf6;
      --brand-pink: #ec4899;
      --accent-cyan: #06b6d4;
      --accent-amber: #f59e0b;
      --text-main: #f8fafc;
      --text-sub: #cbd5e1;
      --text-muted: #64748b;
    }
    body {
      background-color: var(--bg-primary);
      color: var(--text-sub);
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.8;
      overflow-x: hidden;
    }
    .text-gradient {
      background: linear-gradient(135deg, #a78bfa 0%, #ec4899 50%, #06b6d4 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .btn-gradient {
      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    }
    .btn-gradient:hover {
      background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
      box-shadow: 0 0 25px rgba(236, 72, 153, 0.4);
    }
    .card-glass {
      background: rgba(26, 29, 46, 0.7);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .card-glass:hover {
      border-color: rgba(139, 92, 246, 0.4);
    }

/* roulang page: category3 */
:root {
  --bg-primary: #0a0b10;
  --bg-secondary: #12141e;
  --bg-card: #1a1d2e;
  --brand-purple: #8b5cf6;
  --brand-pink: #ec4899;
  --accent-cyan: #06b6d4;
  --accent-amber: #f59e0b;
  --text-main: #f8fafc;
  --text-sub: #cbd5e1;
  --text-muted: #64748b;
}
body {
  background-color: var(--bg-primary);
  color: var(--text-sub);
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.8;
  overflow-x: hidden;
}
.text-gradient {
  background: linear-gradient(135deg, #a78bfa 0%, #ec4899 50%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btn-gradient {
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
}
.btn-gradient:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
  box-shadow: 0 0 25px rgba(236, 72, 153, 0.4);
}
.card-glass {
  background: rgba(26, 29, 46, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.card-glass:hover {
  border-color: rgba(139, 92, 246, 0.4);
}
.sound-wave-bar {
  animation: wavePulse 1.2s ease-in-out infinite alternate;
}
@keyframes wavePulse {
  0% { height: 20%; }
  100% { height: 100%; }
}

/* roulang page: category4 */
:root {
      --bg-primary: #0a0b10;
      --bg-secondary: #12141e;
      --bg-card: #1a1d2e;
      --brand-purple: #8b5cf6;
      --brand-pink: #ec4899;
      --accent-cyan: #06b6d4;
      --accent-amber: #f59e0b;
      --text-main: #f8fafc;
      --text-sub: #cbd5e1;
      --text-muted: #64748b;
    }
    body {
      background-color: var(--bg-primary);
      color: var(--text-sub);
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.8;
      overflow-x: hidden;
    }
    .text-gradient {
      background: linear-gradient(135deg, #a78bfa 0%, #ec4899 50%, #06b6d4 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .btn-gradient {
      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    }
    .btn-gradient:hover {
      background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
      box-shadow: 0 0 25px rgba(236, 72, 153, 0.4);
    }
    .card-glass {
      background: rgba(26, 29, 46, 0.7);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .card-glass:hover {
      border-color: rgba(139, 92, 246, 0.4);
    }
    .custom-scrollbar::-webkit-scrollbar {
      height: 6px;
      width: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: rgba(139, 92, 246, 0.3);
      border-radius: 9999px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: rgba(10, 11, 16, 0.5);
    }

/* roulang page: category5 */
:root {
      --bg-primary: #0a0b10;
      --bg-secondary: #12141e;
      --bg-card: #1a1d2e;
      --brand-purple: #8b5cf6;
      --brand-pink: #ec4899;
      --accent-cyan: #06b6d4;
      --accent-amber: #f59e0b;
      --text-main: #f8fafc;
      --text-sub: #cbd5e1;
      --text-muted: #64748b;
    }
    body {
      background-color: var(--bg-primary);
      color: var(--text-sub);
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.8;
      overflow-x: hidden;
    }
    .text-gradient {
      background: linear-gradient(135deg, #a78bfa 0%, #ec4899 50%, #06b6d4 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .btn-gradient {
      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    }
    .btn-gradient:hover {
      background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
      box-shadow: 0 0 25px rgba(236, 72, 153, 0.4);
    }
    .card-glass {
      background: rgba(26, 29, 46, 0.75);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .card-glass:hover {
      border-color: rgba(139, 92, 246, 0.45);
    }
    .ticket-sawtooth {
      background-image: radial-gradient(circle at 0 50%, transparent 10px, #1a1d2e 11px), radial-gradient(circle at 100% 50%, transparent 10px, #1a1d2e 11px);
    }