/* roulang page: index */
:root {
      --bg-base: #0B0B0E;
      --bg-surface: #14141A;
      --bg-elevated: #1E1E28;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --color-primary: #E0245E;
      --color-secondary: #8B5CF6;
      --color-accent: #F39C12;
      --text-primary: #F8FAFC;
      --text-secondary: #94A3B8;
      --text-muted: #64748B;
    }
    
    body {
      background-color: var(--bg-base);
      color: var(--text-primary);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }

    .glass-nav {
      background: rgba(11, 11, 14, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border-subtle);
    }

    .glass-card {
      background: rgba(20, 20, 26, 0.7);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--border-subtle);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .glass-card:hover {
      border-color: rgba(224, 36, 94, 0.35);
      transform: translateY(-4px);
      box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.6), 0 0 20px 0 rgba(224, 36, 94, 0.15);
    }

    .poster-glow {
      transition: transform 0.4s ease, box-shadow 0.4s ease;
    }

    .poster-glow:hover {
      transform: scale(1.03);
      box-shadow: 0 14px 34px -10px rgba(224, 36, 94, 0.4);
    }

    .text-gradient {
      background: linear-gradient(135deg, #FFF 20%, #CBD5E1 50%, #94A3B8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .text-brand-gradient {
      background: linear-gradient(135deg, #E0245E 0%, #C026D3 50%, #8B5CF6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    details > summary {
      list-style: none;
    }
    details > summary::-webkit-details-marker {
      display: none;
    }
    details[open] summary svg {
      transform: rotate(180deg);
    }

/* roulang page: category1 */
:root {
      --bg-base: #0B0B0E;
      --bg-surface: #14141A;
      --bg-elevated: #1E1E28;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --color-primary: #E0245E;
      --color-secondary: #8B5CF6;
      --color-accent: #F39C12;
      --text-primary: #F8FAFC;
      --text-secondary: #94A3B8;
      --text-muted: #64748B;
    }
    body {
      background-color: var(--bg-base);
      color: var(--text-primary);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .glass-nav {
      background: rgba(11, 11, 14, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border-subtle);
    }
    .glass-card {
      background: rgba(20, 20, 26, 0.7);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--border-subtle);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .glass-card:hover {
      border-color: rgba(224, 36, 94, 0.35);
      transform: translateY(-4px);
      box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.6), 0 0 20px 0 rgba(224, 36, 94, 0.15);
    }
    .text-gradient {
      background: linear-gradient(135deg, #FFF 20%, #CBD5E1 50%, #94A3B8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .text-brand-gradient {
      background: linear-gradient(135deg, #E0245E 0%, #C026D3 50%, #8B5CF6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

/* roulang page: category2 */
:root {
      --bg-base: #0B0B0E;
      --bg-surface: #14141A;
      --bg-elevated: #1E1E28;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --color-primary: #E0245E;
      --color-secondary: #8B5CF6;
      --color-accent: #F39C12;
      --text-primary: #F8FAFC;
      --text-secondary: #94A3B8;
      --text-muted: #64748B;
    }
    body {
      background-color: var(--bg-base);
      color: var(--text-primary);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .glass-nav {
      background: rgba(11, 11, 14, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border-subtle);
    }
    .glass-card {
      background: rgba(20, 20, 26, 0.7);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--border-subtle);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .glass-card:hover {
      border-color: rgba(224, 36, 94, 0.35);
      transform: translateY(-4px);
      box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.6), 0 0 20px 0 rgba(224, 36, 94, 0.15);
    }
    .text-gradient {
      background: linear-gradient(135deg, #FFF 20%, #CBD5E1 50%, #94A3B8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .text-brand-gradient {
      background: linear-gradient(135deg, #E0245E 0%, #C026D3 50%, #8B5CF6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .poster-card {
      position: relative;
      border-radius: 0.75rem;
      overflow: hidden;
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .poster-card:hover {
      transform: translateY(-6px) scale(1.02);
      border-color: rgba(224, 36, 94, 0.4);
      box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.8), 0 0 24px 0 rgba(224, 36, 94, 0.25);
    }
    .poster-card:hover img {
      transform: scale(1.08);
      filter: brightness(1.05);
    }
    .badge-pill {
      background: rgba(224, 36, 94, 0.15);
      color: #F43F5E;
      border: 1px solid rgba(224, 36, 94, 0.3);
    }
    .badge-gold {
      background: rgba(243, 156, 18, 0.15);
      color: #F59E0B;
      border: 1px solid rgba(243, 156, 18, 0.3);
    }
    .badge-cyan {
      background: rgba(14, 165, 233, 0.15);
      color: #38BDF8;
      border: 1px solid rgba(14, 165, 233, 0.3);
    }
    .custom-scroll::-webkit-scrollbar {
      height: 6px;
    }
    .custom-scroll::-webkit-scrollbar-track {
      background: #14141A;
      border-radius: 9999px;
    }
    .custom-scroll::-webkit-scrollbar-thumb {
      background: #2D2D3A;
      border-radius: 9999px;
    }
    .custom-scroll::-webkit-scrollbar-thumb:hover {
      background: #E0245E;
    }