/* roulang page: index */
@layer base {
      :root {
        --color-bg-main: #0a0d14;
        --color-bg-card: #121723;
        --color-bg-card-alt: #1a2234;
        --color-primary: #f43f5e;
        --color-accent: #8b5cf6;
        --color-gold: #f59e0b;
        --color-cyan: #06b6d4;
      }
      body {
        background-color: var(--color-bg-main);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        color: #94a3b8;
        overflow-x: hidden;
      }
    }

/* Glow Animations & Specialty Borders */
    .glow-rose {
      box-shadow: 0 0 35px -5px rgba(244, 63, 94, 0.35);
    }
    .glow-gold {
      box-shadow: 0 0 30px -5px rgba(245, 158, 11, 0.3);
    }
    .glow-cyan {
      box-shadow: 0 0 25px -5px rgba(6, 182, 212, 0.35);
    }
    .text-glow {
      text-shadow: 0 0 15px rgba(244, 63, 94, 0.5);
    }
    .card-border-glow {
      position: relative;
    }
    .card-border-glow::before {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(244,63,94,0.4), rgba(139,92,246,0.1), rgba(6,182,212,0.3));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }
    .badge-ssr {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4);
    }
    .pulse-dot {
      animation: pulseGlow 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
    }
    @keyframes pulseGlow {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: .4; transform: scale(1.15); }
    }

/* roulang page: category1 */
:root {
      --color-bg-main: #0a0d14;
      --color-bg-card: #121723;
      --color-bg-card-alt: #1a2234;
      --color-primary: #f43f5e;
      --color-accent: #8b5cf6;
      --color-gold: #f59e0b;
      --color-cyan: #06b6d4;
    }
    body {
      background-color: var(--color-bg-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      color: #94a3b8;
      overflow-x: hidden;
    }
    .glow-rose {
      box-shadow: 0 0 35px -5px rgba(244, 63, 94, 0.35);
    }
    .text-glow {
      text-shadow: 0 0 15px rgba(244, 63, 94, 0.5);
    }
    .card-border-glow {
      position: relative;
    }
    .card-border-glow::before {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(244,63,94,0.4), rgba(139,92,246,0.1), rgba(6,182,212,0.3));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }
    .badge-ssr {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4);
    }
    .badge-ur {
      background: linear-gradient(135deg, #f43f5e 0%, #8b5cf6 100%);
      box-shadow: 0 2px 10px rgba(244, 63, 94, 0.4);
    }
    .badge-sr {
      background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
      box-shadow: 0 2px 10px rgba(6, 182, 212, 0.35);
    }

/* roulang page: category2 */
:root {
      --color-bg-main: #0a0d14;
      --color-bg-card: #121723;
      --color-bg-card-alt: #1a2234;
      --color-primary: #f43f5e;
      --color-accent: #8b5cf6;
      --color-gold: #f59e0b;
      --color-cyan: #06b6d4;
    }
    body {
      background-color: var(--color-bg-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      color: #94a3b8;
      overflow-x: hidden;
    }
    /* Glow Animations & Specialty Borders */
    .glow-rose {
      box-shadow: 0 0 35px -5px rgba(244, 63, 94, 0.35);
    }
    .glow-cyan {
      box-shadow: 0 0 30px -5px rgba(6, 182, 212, 0.4);
    }
    .text-glow {
      text-shadow: 0 0 15px rgba(244, 63, 94, 0.5);
    }
    .card-border-glow {
      position: relative;
    }
    .card-border-glow::before {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(244,63,94,0.4), rgba(139,92,246,0.1), rgba(6,182,212,0.3));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }
    .badge-ssr {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4);
    }
    .badge-cyan {
      background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%);
      box-shadow: 0 2px 10px rgba(6, 182, 212, 0.4);
    }
    /* Audio Spectrum Bars Animation */
    @keyframes barPulse {
      0%, 100% { height: 18%; }
      50% { height: 95%; }
    }
    .spectrum-bar {
      animation: barPulse 1.2s ease-in-out infinite;
    }
    .spectrum-bar:nth-child(2) { animation-delay: 0.15s; }
    .spectrum-bar:nth-child(3) { animation-delay: 0.3s; }
    .spectrum-bar:nth-child(4) { animation-delay: 0.45s; }
    .spectrum-bar:nth-child(5) { animation-delay: 0.2s; }
    .spectrum-bar:nth-child(6) { animation-delay: 0.55s; }
    .spectrum-bar:nth-child(7) { animation-delay: 0.35s; }
    .spectrum-bar:nth-child(8) { animation-delay: 0.1s; }