/* roulang page: index */
:root {
      --cinema-bg-dark: #0b0f17;
      --cinema-panel: #121824;
      --cinema-panel-border: rgba(51, 65, 85, 0.7);
      --cinema-amber: #f59e0b;
      --cinema-amber-glow: rgba(245, 158, 11, 0.25);
      --cinema-violet: #8b5cf6;
      --cinema-cyan: #06b6d4;
    }
    body {
      background-color: var(--cinema-bg-dark);
      color: #cbd5e1;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .cinema-glass {
      background-color: rgba(18, 24, 36, 0.75);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--cinema-panel-border);
    }
    .cinema-glass:hover {
      border-color: rgba(245, 158, 11, 0.4);
      box-shadow: 0 10px 25px -5px var(--cinema-amber-glow);
    }
    .amber-gradient-btn {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .amber-gradient-btn:hover {
      box-shadow: 0 0 20px rgba(245, 158, 11, 0.45);
      transform: translateY(-2px);
    }
    .neon-badge {
      box-shadow: 0 0 10px rgba(139, 92, 246, 0.35);
    }
    .custom-scrollbar::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: #0b0f17;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #334155;
      border-radius: 9999px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: #f59e0b;
    }

/* roulang page: category1 */
:root {
      --cinema-bg-dark: #0b0f17;
      --cinema-panel: #121824;
      --cinema-panel-border: rgba(51, 65, 85, 0.7);
      --cinema-amber: #f59e0b;
      --cinema-amber-glow: rgba(245, 158, 11, 0.25);
      --cinema-violet: #8b5cf6;
      --cinema-cyan: #06b6d4;
    }
    body {
      background-color: var(--cinema-bg-dark);
      color: #cbd5e1;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .cinema-glass {
      background-color: rgba(18, 24, 36, 0.75);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--cinema-panel-border);
    }
    .cinema-glass:hover {
      border-color: rgba(245, 158, 11, 0.4);
      box-shadow: 0 10px 25px -5px var(--cinema-amber-glow);
    }
    .amber-gradient-btn {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .amber-gradient-btn:hover {
      box-shadow: 0 0 20px rgba(245, 158, 11, 0.45);
      transform: translateY(-2px);
    }
    .neon-badge {
      box-shadow: 0 0 10px rgba(139, 92, 246, 0.35);
    }
    .poster-hover-zoom img {
      transition: transform 0.5s ease;
    }
    .poster-hover-zoom:hover img {
      transform: scale(1.06);
    }
    .filter-item-active {
      background-color: #f59e0b;
      color: #0b0f17;
      font-weight: 700;
    }

/* roulang page: category2 */
:root {
      --cinema-bg-dark: #0b0f17;
      --cinema-panel: #121824;
      --cinema-panel-border: rgba(51, 65, 85, 0.7);
      --cinema-amber: #f59e0b;
      --cinema-amber-glow: rgba(245, 158, 11, 0.25);
      --cinema-violet: #8b5cf6;
      --cinema-cyan: #06b6d4;
    }
    body {
      background-color: var(--cinema-bg-dark);
      color: #cbd5e1;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .cinema-glass {
      background-color: rgba(18, 24, 36, 0.75);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--cinema-panel-border);
    }
    .cinema-glass:hover {
      border-color: rgba(245, 158, 11, 0.4);
      box-shadow: 0 10px 25px -5px var(--cinema-amber-glow);
    }
    .amber-gradient-btn {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .amber-gradient-btn:hover {
      box-shadow: 0 0 20px rgba(245, 158, 11, 0.45);
      transform: translateY(-2px);
    }
    .neon-badge {
      box-shadow: 0 0 10px rgba(139, 92, 246, 0.35);
    }
    .filter-chip.active {
      background-color: #f59e0b;
      color: #0f172a;
      font-weight: 600;
    }
    .filter-chip {
      transition: all 0.2s ease;
    }
    .filter-chip:hover:not(.active) {
      background-color: #1e293b;
      color: #f59e0b;
    }

/* roulang page: category3 */
:root {
      --cinema-bg-dark: #0b0f17;
      --cinema-panel: #121824;
      --cinema-panel-border: rgba(51, 65, 85, 0.7);
      --cinema-amber: #f59e0b;
      --cinema-amber-glow: rgba(245, 158, 11, 0.25);
      --cinema-violet: #8b5cf6;
      --cinema-cyan: #06b6d4;
    }
    body {
      background-color: var(--cinema-bg-dark);
      color: #cbd5e1;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .cinema-glass {
      background-color: rgba(18, 24, 36, 0.75);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--cinema-panel-border);
    }
    .cinema-glass:hover {
      border-color: rgba(245, 158, 11, 0.4);
      box-shadow: 0 10px 25px -5px var(--cinema-amber-glow);
    }
    .amber-gradient-btn {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .amber-gradient-btn:hover {
      box-shadow: 0 0 20px rgba(245, 158, 11, 0.45);
      transform: translateY(-2px);
    }
    .neon-badge {
      box-shadow: 0 0 10px rgba(139, 92, 246, 0.35);
    }
    .filter-tag-active {
      background-color: #f59e0b;
      color: #0b0f17;
      font-weight: 700;
    }
    .filter-tag {
      background-color: rgba(30, 41, 59, 0.7);
      color: #94a3b8;
      transition: all 0.2s ease;
    }
    .filter-tag:hover {
      background-color: rgba(245, 158, 11, 0.15);
      color: #f59e0b;
    }

/* roulang page: category4 */
:root {
      --cinema-bg-dark: #0b0f17;
      --cinema-panel: #121824;
      --cinema-panel-border: rgba(51, 65, 85, 0.7);
      --cinema-amber: #f59e0b;
      --cinema-amber-glow: rgba(245, 158, 11, 0.25);
      --cinema-violet: #8b5cf6;
      --cinema-cyan: #06b6d4;
    }
    body {
      background-color: var(--cinema-bg-dark);
      color: #cbd5e1;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .cinema-glass {
      background-color: rgba(18, 24, 36, 0.75);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--cinema-panel-border);
    }
    .cinema-glass:hover {
      border-color: rgba(245, 158, 11, 0.4);
      box-shadow: 0 10px 25px -5px var(--cinema-amber-glow);
    }
    .amber-gradient-btn {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .amber-gradient-btn:hover {
      box-shadow: 0 0 20px rgba(245, 158, 11, 0.45);
      transform: translateY(-2px);
    }
    .neon-badge {
      box-shadow: 0 0 10px rgba(139, 92, 246, 0.35);
    }
    .cinema-card-shadow {
      box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.75);
    }