/* roulang page: index */
:root {
            --bg-base: #070B19;
            --bg-deep: #0B112C;
            --bg-card: rgba(15, 23, 42, 0.65);
            --border-glow: rgba(0, 229, 255, 0.25);
            --border-line: rgba(255, 255, 255, 0.08);
            --brand-cyan: #00E5FF;
            --brand-blue: #2979FF;
            --accent-purple: #A855F7;
            --accent-gold: #F59E0B;
            --text-primary: #FFFFFF;
            --text-secondary: #94A3B8;
        }
        body {
            background-color: var(--bg-base);
            color: var(--text-primary);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }
        .glass-panel {
            background: var(--bg-card);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid var(--border-line);
            border-radius: 16px;
        }
        .glass-panel-glow:hover {
            border-color: var(--border-glow);
            box-shadow: 0 0 25px rgba(0, 229, 255, 0.18);
        }
        .btn-glow {
            background: linear-gradient(135deg, #00E5FF 0%, #2979FF 100%);
            color: #070B19;
            font-weight: 700;
            box-shadow: 0 0 20px rgba(0, 229, 255, 0.35);
            transition: all 0.3s ease;
        }
        .btn-glow:hover {
            box-shadow: 0 0 30px rgba(0, 229, 255, 0.6);
            transform: translateY(-2px);
        }
        .text-glow {
            text-shadow: 0 0 16px rgba(0, 229, 255, 0.5);
        }
        .gradient-text {
            background: linear-gradient(135deg, #FFFFFF 30%, #00E5FF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .dropdown-menu {
            opacity: 0;
            visibility: hidden;
            transform: translateY(12px);
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .dropdown-parent:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .aspect-poster {
            aspect-ratio: 2 / 3;
        }
        .custom-scrollbar::-webkit-scrollbar {
            height: 6px;
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: rgba(0, 229, 255, 0.3);
            border-radius: 9999px;
        }

/* roulang page: category2 */
:root {
      --bg-base: #070B19;
      --bg-deep: #0B112C;
      --bg-card: rgba(15, 23, 42, 0.65);
      --border-glow: rgba(0, 229, 255, 0.25);
      --border-line: rgba(255, 255, 255, 0.08);
      --brand-cyan: #00E5FF;
      --brand-blue: #2979FF;
      --accent-purple: #A855F7;
      --accent-gold: #F59E0B;
      --text-primary: #FFFFFF;
      --text-secondary: #94A3B8;
    }
    body {
      background-color: var(--bg-base);
      color: var(--text-primary);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
      scroll-behavior: smooth;
    }
    .btn-glow {
      background: linear-gradient(135deg, #00E5FF 0%, #2979FF 100%);
      color: #070B19;
      font-weight: 700;
      box-shadow: 0 0 20px rgba(0, 229, 255, 0.35);
      transition: all 0.3s ease;
    }
    .btn-glow:hover {
      box-shadow: 0 0 30px rgba(0, 229, 255, 0.6);
      transform: translateY(-2px);
    }
    .text-glow {
      text-shadow: 0 0 16px rgba(0, 229, 255, 0.5);
    }
    .glass-card {
      background: var(--bg-card);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid var(--border-line);
      transition: all 0.3s ease;
    }
    .glass-card:hover {
      border-color: var(--border-glow);
      box-shadow: 0 10px 30px -10px rgba(0, 229, 255, 0.2);
    }
    .movie-poster-wrap {
      position: relative;
      aspect-ratio: 2/3;
      overflow: hidden;
      border-radius: 12px;
    }
    .movie-poster-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    .movie-card:hover .movie-poster-wrap img {
      transform: scale(1.06);
    }
    .nav-dropdown-menu {
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav-dropdown-group:hover .nav-dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

/* roulang page: category1 */
:root {
      --bg-base: #070B19;
      --bg-deep: #0B112C;
      --bg-card: rgba(15, 23, 42, 0.65);
      --border-glow: rgba(0, 229, 255, 0.25);
      --border-line: rgba(255, 255, 255, 0.08);
      --brand-cyan: #00E5FF;
      --brand-blue: #2979FF;
      --accent-purple: #A855F7;
      --accent-gold: #F59E0B;
      --text-primary: #FFFFFF;
      --text-secondary: #94A3B8;
    }
    body {
      background-color: var(--bg-base);
      color: var(--text-primary);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
      scroll-behavior: smooth;
    }
    .btn-glow {
      background: linear-gradient(135deg, #00E5FF 0%, #2979FF 100%);
      color: #070B19;
      font-weight: 700;
      box-shadow: 0 0 20px rgba(0, 229, 255, 0.35);
      transition: all 0.3s ease;
    }
    .btn-glow:hover {
      box-shadow: 0 0 30px rgba(0, 229, 255, 0.6);
      transform: translateY(-2px);
    }
    .text-glow {
      text-shadow: 0 0 16px rgba(0, 229, 255, 0.5);
    }
    .glass-panel {
      background: var(--bg-card);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border-line);
    }
    .glass-panel-hover:hover {
      border-color: var(--border-glow);
      box-shadow: 0 0 25px rgba(0, 229, 255, 0.18);
    }
    .dropdown-panel {
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .group:hover .dropdown-panel {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .poster-box {
      aspect-ratio: 2 / 3;
    }

/* roulang page: category3 */
:root {
      --bg-base: #070B19;
      --bg-deep: #0B112C;
      --bg-card: rgba(15, 23, 42, 0.65);
      --border-glow: rgba(0, 229, 255, 0.25);
      --border-line: rgba(255, 255, 255, 0.08);
      --brand-cyan: #00E5FF;
      --brand-blue: #2979FF;
      --accent-purple: #A855F7;
      --accent-gold: #F59E0B;
      --text-primary: #FFFFFF;
      --text-secondary: #94A3B8;
    }
    body {
      background-color: var(--bg-base);
      color: var(--text-primary);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
      scroll-behavior: smooth;
    }
    .btn-glow {
      background: linear-gradient(135deg, #00E5FF 0%, #2979FF 100%);
      color: #070B19;
      font-weight: 700;
      box-shadow: 0 0 20px rgba(0, 229, 255, 0.35);
      transition: all 0.3s ease;
    }
    .btn-glow:hover {
      box-shadow: 0 0 30px rgba(0, 229, 255, 0.6);
      transform: translateY(-2px);
    }
    .text-glow {
      text-shadow: 0 0 16px rgba(0, 229, 255, 0.5);
    }
    .glass-card {
      background: var(--bg-card);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid var(--border-line);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .glass-card:hover {
      border-color: var(--border-glow);
      box-shadow: 0 8px 30px rgba(0, 229, 255, 0.15);
      transform: translateY(-3px);
    }
    .nav-dropdown-menu {
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav-dropdown-wrap:hover .nav-dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .filter-chip {
      transition: all 0.2s ease;
    }
    .filter-chip.active {
      background: rgba(0, 229, 255, 0.15);
      color: #00E5FF;
      border-color: rgba(0, 229, 255, 0.6);
      box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
    }
    .poster-zoom {
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .poster-box:hover .poster-zoom {
      transform: scale(1.06);
    }

/* roulang page: category4 */
:root {
      --bg-base: #070B19;
      --bg-deep: #0B112C;
      --bg-card: rgba(15, 23, 42, 0.65);
      --border-glow: rgba(0, 229, 255, 0.25);
      --border-line: rgba(255, 255, 255, 0.08);
      --brand-cyan: #00E5FF;
      --brand-blue: #2979FF;
      --accent-purple: #A855F7;
      --accent-gold: #F59E0B;
      --text-primary: #FFFFFF;
      --text-secondary: #94A3B8;
    }
    body {
      background-color: var(--bg-base);
      color: var(--text-primary);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
      scroll-behavior: smooth;
    }
    .btn-glow {
      background: linear-gradient(135deg, #00E5FF 0%, #2979FF 100%);
      color: #070B19;
      font-weight: 700;
      box-shadow: 0 0 20px rgba(0, 229, 255, 0.35);
      transition: all 0.3s ease;
    }
    .btn-glow:hover {
      box-shadow: 0 0 30px rgba(0, 229, 255, 0.6);
      transform: translateY(-2px);
    }
    .text-glow {
      text-shadow: 0 0 16px rgba(0, 229, 255, 0.5);
    }
    .glass-panel {
      background: var(--bg-card);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid var(--border-line);
    }
    .glass-panel:hover {
      border-color: var(--border-glow);
    }
    .nav-dropdown-menu {
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav-dropdown-group:hover .nav-dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .filter-chip-active {
      background: linear-gradient(135deg, rgba(0,229,255,0.2) 0%, rgba(41,121,255,0.2) 100%);
      border-color: #00E5FF;
      color: #00E5FF;
      box-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
    }

/* roulang page: category5 */
:root {
      --bg-base: #070B19;
      --bg-deep: #0B112C;
      --bg-card: rgba(15, 23, 42, 0.65);
      --border-glow: rgba(0, 229, 255, 0.25);
      --border-line: rgba(255, 255, 255, 0.08);
      --brand-cyan: #00E5FF;
      --brand-blue: #2979FF;
      --accent-purple: #A855F7;
      --accent-gold: #F59E0B;
      --text-primary: #FFFFFF;
      --text-secondary: #94A3B8;
    }
    body {
      background-color: var(--bg-base);
      color: var(--text-primary);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
      scroll-behavior: smooth;
    }
    .glass-card {
      background: var(--bg-card);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid var(--border-line);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .glass-card:hover {
      border-color: var(--border-glow);
      box-shadow: 0 10px 30px -10px rgba(0, 229, 255, 0.25);
    }
    .btn-glow {
      background: linear-gradient(135deg, #00E5FF 0%, #2979FF 100%);
      color: #070B19;
      font-weight: 700;
      box-shadow: 0 0 20px rgba(0, 229, 255, 0.35);
      transition: all 0.3s ease;
    }
    .btn-glow:hover {
      box-shadow: 0 0 30px rgba(0, 229, 255, 0.65);
      transform: translateY(-2px);
    }
    .text-glow {
      text-shadow: 0 0 16px rgba(0, 229, 255, 0.5);
    }
    .nav-dropdown {
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .group:hover .nav-dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .filter-chip.active {
      background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(41, 121, 255, 0.2));
      border-color: #00E5FF;
      color: #00E5FF;
      box-shadow: 0 0 12px rgba(0, 229, 255, 0.25);
    }