/* roulang page: index */
:root {
      --color-primary: #E11D48;
      --color-primary-hover: #F43F5E;
      --color-accent: #9333EA;
      --color-accent-light: #A855F7;
      --color-bg: #0A0915;
      --color-bg-sub: #121124;
      --color-card: #1C1936;
      --color-card-hover: #26224A;
      --color-text-main: #F8FAFC;
      --color-text-muted: #CBD5E1;
      --color-text-dim: #94A3B8;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --border-glow: rgba(225, 29, 72, 0.35);
      --shadow-cinema: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
    }
    body {
      background-color: var(--color-bg);
      color: var(--color-text-muted);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .neon-border {
      border: 1px solid var(--border-subtle);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .neon-border:hover {
      border-color: var(--border-glow);
      box-shadow: 0 0 25px rgba(225, 29, 72, 0.25);
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 30%, rgba(225, 29, 72, 0.18) 0%, rgba(147, 51, 234, 0.12) 40%, rgba(10, 9, 21, 0) 70%);
    }
    .glass-pill {
      background: rgba(18, 17, 36, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .cover-zoom {
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .group:hover .cover-zoom {
      transform: scale(1.06);
    }
    .brand-gradient-text {
      background: linear-gradient(135deg, #FFF 20%, #F43F5E 70%, #C084FC 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .brand-btn-primary {
      background: linear-gradient(135deg, #E11D48 0%, #9333EA 100%);
      transition: all 0.25s ease;
    }
    .brand-btn-primary:hover {
      box-shadow: 0 0 20px rgba(225, 29, 72, 0.5);
      transform: translateY(-2px);
    }
    .brand-btn-primary:active {
      transform: translateY(0) scale(0.98);
    }

/* roulang page: category1 */
:root {
      --color-primary: #E11D48;
      --color-primary-hover: #F43F5E;
      --color-accent: #9333EA;
      --color-accent-light: #A855F7;
      --color-bg: #0A0915;
      --color-bg-sub: #121124;
      --color-card: #1C1936;
      --color-card-hover: #26224A;
      --color-text-main: #F8FAFC;
      --color-text-muted: #CBD5E1;
      --color-text-dim: #94A3B8;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --border-glow: rgba(225, 29, 72, 0.35);
      --shadow-cinema: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
    }
    body {
      background-color: var(--color-bg);
      color: var(--color-text-muted);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .neon-border {
      border: 1px solid var(--border-subtle);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .neon-border:hover {
      border-color: var(--border-glow);
      box-shadow: 0 0 25px rgba(225, 29, 72, 0.25);
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 30%, rgba(225, 29, 72, 0.18) 0%, rgba(147, 51, 234, 0.12) 40%, rgba(10, 9, 21, 0) 70%);
    }
    .glass-pill {
      background: rgba(18, 17, 36, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .brand-gradient-text {
      background: linear-gradient(135deg, #FFF 20%, #F43F5E 70%, #C084FC 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .brand-btn-primary {
      background: linear-gradient(135deg, #E11D48 0%, #9333EA 100%);
      transition: all 0.25s ease;
    }
    .brand-btn-primary:hover {
      box-shadow: 0 0 20px rgba(225, 29, 72, 0.5);
      transform: translateY(-2px);
    }
    .brand-btn-primary:active {
      transform: translateY(0) scale(0.98);
    }
    /* 路线图预告节点条特有样式 */
    .timeline-node {
      position: relative;
    }
    .timeline-node::after {
      content: '';
      position: absolute;
      top: 50%;
      right: -1rem;
      width: 2rem;
      height: 2px;
      background: linear-gradient(90deg, #e11d48, transparent);
      z-index: 1;
    }
    @media (max-width: 768px) {
      .timeline-node::after {
        display: none;
      }
    }

/* roulang page: category2 */
:root {
      --color-primary: #E11D48;
      --color-primary-hover: #F43F5E;
      --color-accent: #9333EA;
      --color-accent-light: #A855F7;
      --color-bg: #0A0915;
      --color-bg-sub: #121124;
      --color-card: #1C1936;
      --color-card-hover: #26224A;
      --color-text-main: #F8FAFC;
      --color-text-muted: #CBD5E1;
      --color-text-dim: #94A3B8;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --border-glow: rgba(225, 29, 72, 0.35);
      --shadow-cinema: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
    }
    body {
      background-color: var(--color-bg);
      color: var(--color-text-muted);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .neon-border {
      border: 1px solid var(--border-subtle);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .neon-border:hover {
      border-color: var(--border-glow);
      box-shadow: 0 0 25px rgba(225, 29, 72, 0.25);
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 30%, rgba(225, 29, 72, 0.18) 0%, rgba(147, 51, 234, 0.12) 40%, rgba(10, 9, 21, 0) 70%);
    }
    .glass-pill {
      background: rgba(18, 17, 36, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .brand-gradient-text {
      background: linear-gradient(135deg, #FFF 20%, #F43F5E 70%, #C084FC 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .brand-btn-primary {
      background: linear-gradient(135deg, #E11D48 0%, #9333EA 100%);
      transition: all 0.25s ease;
    }
    .brand-btn-primary:hover {
      box-shadow: 0 0 20px rgba(225, 29, 72, 0.5);
      transform: translateY(-2px);
    }
    .brand-btn-primary:active {
      transform: translateY(0) scale(0.98);
    }
    .cinema-poster {
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    }
    .cinema-card:hover .cinema-poster {
      transform: scale(1.05);
    }
    .cinema-card:hover {
      border-color: rgba(225, 29, 72, 0.4);
      box-shadow: 0 16px 36px -10px rgba(225, 29, 72, 0.25);
    }
    .custom-scrollbar::-webkit-scrollbar {
      height: 6px;
      width: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: rgba(225, 29, 72, 0.4);
      border-radius: 9999px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.04);
    }

/* roulang page: category3 */
:root {
      --color-primary: #E11D48;
      --color-primary-hover: #F43F5E;
      --color-accent: #9333EA;
      --color-accent-light: #A855F7;
      --color-bg: #0A0915;
      --color-bg-sub: #121124;
      --color-card: #1C1936;
      --color-card-hover: #26224A;
      --color-text-main: #F8FAFC;
      --color-text-muted: #CBD5E1;
      --color-text-dim: #94A3B8;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --border-glow: rgba(225, 29, 72, 0.35);
      --shadow-cinema: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
    }
    body {
      background-color: var(--color-bg);
      color: var(--color-text-muted);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .neon-border {
      border: 1px solid var(--border-subtle);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .neon-border:hover {
      border-color: var(--border-glow);
      box-shadow: 0 0 25px rgba(225, 29, 72, 0.25);
    }
    .glass-pill {
      background: rgba(18, 17, 36, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .brand-gradient {
      background: linear-gradient(135deg, #E11D48 0%, #9333EA 100%);
    }
    .brand-gradient-text {
      background: linear-gradient(135deg, #FFF 20%, #F43F5E 70%, #C084FC 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .brand-btn-primary {
      background: linear-gradient(135deg, #E11D48 0%, #9333EA 100%);
      transition: all 0.25s ease;
    }
    .brand-btn-primary:hover {
      box-shadow: 0 0 20px rgba(225, 29, 72, 0.5);
      transform: translateY(-2px);
    }
    .brand-btn-primary:active {
      transform: translateY(0) scale(0.98);
    }
    .cinema-banner {
      background: linear-gradient(180deg, rgba(18, 17, 36, 0.4) 0%, rgba(10, 9, 21, 0.95) 100%),
                  radial-gradient(ellipse at 80% 20%, rgba(147, 51, 234, 0.25) 0%, transparent 60%);
    }
    .filter-chip-active {
      background: linear-gradient(135deg, #E11D48 0%, #9333EA 100%);
      color: #FFFFFF;
      box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35);
      border-color: transparent;
    }
    .poster-zoom {
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .poster-zoom:hover {
      transform: scale(1.05);
    }
    .danmaku-rail {
      animation: floatDanmaku 20s linear infinite;
    }
    @keyframes floatDanmaku {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

/* roulang page: category4 */
:root {
      --color-primary: #E11D48;
      --color-primary-hover: #F43F5E;
      --color-accent: #9333EA;
      --color-accent-light: #A855F7;
      --color-bg: #0A0915;
      --color-bg-sub: #121124;
      --color-card: #1C1936;
      --color-card-hover: #26224A;
      --color-text-main: #F8FAFC;
      --color-text-muted: #CBD5E1;
      --color-text-dim: #94A3B8;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --border-glow: rgba(225, 29, 72, 0.35);
      --shadow-cinema: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
    }
    body {
      background-color: var(--color-bg);
      color: var(--color-text-muted);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .neon-border {
      border: 1px solid var(--border-subtle);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .neon-border:hover {
      border-color: var(--border-glow);
      box-shadow: 0 0 25px rgba(225, 29, 72, 0.25);
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 30%, rgba(225, 29, 72, 0.18) 0%, rgba(147, 51, 234, 0.12) 40%, rgba(10, 9, 21, 0) 70%);
    }
    .glass-pill {
      background: rgba(18, 17, 36, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .brand-gradient-text {
      background: linear-gradient(135deg, #FFF 20%, #F43F5E 70%, #C084FC 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .brand-btn-primary {
      background: linear-gradient(135deg, #E11D48 0%, #9333EA 100%);
      transition: all 0.25s ease;
    }
    .brand-btn-primary:hover {
      box-shadow: 0 0 20px rgba(225, 29, 72, 0.5);
      transform: translateY(-2px);
    }
    .brand-btn-primary:active {
      transform: translateY(0) scale(0.98);
    }
    .badge-blur {
      background: rgba(225, 29, 72, 0.15);
      border: 1px solid rgba(244, 63, 94, 0.3);
      backdrop-filter: blur(8px);
    }
    .badge-accent {
      background: rgba(147, 51, 234, 0.15);
      border: 1px solid rgba(168, 85, 247, 0.3);
      backdrop-filter: blur(8px);
    }
    .danmu-track {
      mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }

/* roulang page: category5 */
:root {
      --color-primary: #E11D48;
      --color-primary-hover: #F43F5E;
      --color-accent: #9333EA;
      --color-accent-light: #A855F7;
      --color-bg: #0A0915;
      --color-bg-sub: #121124;
      --color-card: #1C1936;
      --color-card-hover: #26224A;
      --color-text-main: #F8FAFC;
      --color-text-muted: #CBD5E1;
      --color-text-dim: #94A3B8;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --border-glow: rgba(225, 29, 72, 0.35);
      --shadow-cinema: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
    }
    body {
      background-color: var(--color-bg);
      color: var(--color-text-muted);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .neon-border {
      border: 1px solid var(--border-subtle);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .neon-border:hover {
      border-color: var(--border-glow);
      box-shadow: 0 0 25px rgba(225, 29, 72, 0.25);
    }
    .glass-pill {
      background: rgba(18, 17, 36, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .brand-gradient-text {
      background: linear-gradient(135deg, #FFF 20%, #F43F5E 70%, #C084FC 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .brand-btn-primary {
      background: linear-gradient(135deg, #E11D48 0%, #9333EA 100%);
      transition: all 0.25s ease;
    }
    .brand-btn-primary:hover {
      box-shadow: 0 0 20px rgba(225, 29, 72, 0.5);
      transform: translateY(-2px);
    }
    .brand-btn-primary:active {
      transform: translateY(0) scale(0.98);
    }
    .topic-rank-number {
      font-family: Impact, "Arial Black", sans-serif;
      letter-spacing: -2px;
    }