/* roulang page: index */
:root {
            --bg-base: #0b0d13;
            --bg-surface: #131722;
            --bg-card: #1c2130;
            --border-line: #2a324b;
            --cyan-glow: #00f0ff;
            --pink-glow: #ff2a6d;
            --text-high: #f1f5f9;
            --text-muted: #94a3b8;
            --text-darker: #64748b;
        }
        body {
            background-color: var(--bg-base);
            color: var(--text-high);
            font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
            overflow-x: hidden;
        }
        .neon-border-cyan:hover {
            box-shadow: 0 0 20px -2px rgba(0, 240, 255, 0.35);
            border-color: #00f0ff;
        }
        .neon-border-pink:hover {
            box-shadow: 0 0 20px -2px rgba(255, 42, 109, 0.35);
            border-color: #ff2a6d;
        }
        .glow-text-cyan {
            text-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
        }
        .custom-scrollbar::-webkit-scrollbar {
            height: 6px;
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #131722;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #2a324b;
            border-radius: 9999px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #00f0ff;
        }

/* roulang page: category2 */
:root {
            --bg-base: #0b0d13;
            --bg-surface: #131722;
            --bg-card: #1c2130;
            --border-line: #2a324b;
            --cyan-glow: #00f0ff;
            --pink-glow: #ff2a6d;
            --text-high: #f1f5f9;
            --text-muted: #94a3b8;
            --text-darker: #64748b;
        }
        body {
            background-color: var(--bg-base);
            color: var(--text-high);
            font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
            overflow-x: hidden;
        }
        .neon-border-cyan:hover {
            box-shadow: 0 0 20px -2px rgba(0, 240, 255, 0.35);
            border-color: #00f0ff;
        }
        .neon-border-pink:hover {
            box-shadow: 0 0 20px -2px rgba(255, 42, 109, 0.35);
            border-color: #ff2a6d;
        }
        .glow-text-cyan {
            text-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
        }

/* roulang page: category1 */
:root {
      --bg-base: #0b0d13;
      --bg-surface: #131722;
      --bg-card: #1c2130;
      --border-line: #2a324b;
      --cyan-glow: #00f0ff;
      --pink-glow: #ff2a6d;
      --text-high: #f1f5f9;
      --text-muted: #94a3b8;
      --text-darker: #64748b;
    }
    body {
      background-color: var(--bg-base);
      color: var(--text-high);
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .neon-border-cyan:hover {
      box-shadow: 0 0 20px -2px rgba(0, 240, 255, 0.35);
      border-color: #00f0ff;
    }
    .neon-border-pink:hover {
      box-shadow: 0 0 20px -2px rgba(255, 42, 109, 0.35);
      border-color: #ff2a6d;
    }
    .glow-text-cyan {
      text-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
    }
    .custom-scrollbar::-webkit-scrollbar {
      height: 4px;
      width: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: #131722;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #2a324b;
      border-radius: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: #00f0ff;
    }

/* roulang page: category3 */
:root {
      --bg-base: #0b0d13;
      --bg-surface: #131722;
      --bg-card: #1c2130;
      --border-line: #2a324b;
      --cyan-glow: #00f0ff;
      --pink-glow: #ff2a6d;
      --text-high: #f1f5f9;
      --text-muted: #94a3b8;
      --text-darker: #64748b;
    }
    body {
      background-color: var(--bg-base);
      color: var(--text-high);
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .neon-border-cyan:hover {
      box-shadow: 0 0 20px -2px rgba(0, 240, 255, 0.35);
      border-color: #00f0ff;
    }
    .neon-border-pink:hover {
      box-shadow: 0 0 20px -2px rgba(255, 42, 109, 0.35);
      border-color: #ff2a6d;
    }
    .glow-text-cyan {
      text-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
    }
    .glow-text-pink {
      text-shadow: 0 0 12px rgba(255, 42, 109, 0.4);
    }
    .filter-chip.active {
      background-color: #00f0ff;
      color: #0b0d13;
      font-weight: 600;
      box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
    }

/* roulang page: category4 */
:root {
      --bg-base: #0b0d13;
      --bg-surface: #131722;
      --bg-card: #1c2130;
      --border-line: #2a324b;
      --cyan-glow: #00f0ff;
      --pink-glow: #ff2a6d;
      --text-high: #f1f5f9;
      --text-muted: #94a3b8;
      --text-darker: #64748b;
    }
    body {
      background-color: var(--bg-base);
      color: var(--text-high);
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .neon-border-cyan:hover {
      box-shadow: 0 0 20px -2px rgba(0, 240, 255, 0.35);
      border-color: #00f0ff;
    }
    .neon-border-pink:hover {
      box-shadow: 0 0 20px -2px rgba(255, 42, 109, 0.35);
      border-color: #ff2a6d;
    }
    .glow-text-cyan {
      text-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
    }
    .glow-text-pink {
      text-shadow: 0 0 12px rgba(255, 42, 109, 0.4);
    }
    .poster-mask {
      background: linear-gradient(180deg, rgba(11, 13, 19, 0) 40%, rgba(11, 13, 19, 0.95) 100%);
    }