/* roulang page: index */
:root {
      --bg-main: #0B0F19;
      --bg-card: #151D2A;
      --text-main: #F1F5F9;
      --text-muted: #94A3B8;
      --brand-orange: #FF7D00;
      --brand-cyan: #00D2FF;
      --border-color: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-main);
      color: var(--text-main);
      font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.75;
      overflow-x: hidden;
    }
    /* Dropdown CSS Navigation */
    .nav-dropdown-menu {
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav-dropdown-item:hover .nav-dropdown-menu,
    .nav-dropdown-item:focus-within .nav-dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #0B0F19;
    }
    ::-webkit-scrollbar-thumb {
      background: #232E42;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #FF7D00;
    }
    /* Glow & Card effects */
    .card-glow:hover {
      box-shadow: 0 12px 36px -8px rgba(255, 125, 0, 0.15), 0 0 1px 1px rgba(255, 125, 0, 0.3);
    }
    .poster-img {
      transition: transform 0.4s ease, filter 0.4s ease;
    }
    .poster-box:hover .poster-img {
      transform: scale(1.05);
    }

/* roulang page: category1 */
:root {
      --bg-main: #0B0F19;
      --bg-card: #151D2A;
      --text-main: #F1F5F9;
      --text-muted: #94A3B8;
      --brand-orange: #FF7D00;
      --brand-cyan: #00D2FF;
      --border-color: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-main);
      color: var(--text-main);
      font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.75;
      overflow-x: hidden;
    }
    .dropdown-menu {
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .dropdown-parent:hover .dropdown-menu,
    .dropdown-parent:focus-within .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .card-glow:hover {
      box-shadow: 0 12px 36px -8px rgba(255, 125, 0, 0.15), 0 0 1px 1px rgba(255, 125, 0, 0.3);
    }
    .poster-img {
      transition: transform 0.4s ease, filter 0.4s ease;
    }
    .poster-box:hover .poster-img {
      transform: scale(1.05);
    }
    .custom-scrollbar::-webkit-scrollbar {
      height: 6px;
      width: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 9999px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: var(--brand-orange);
    }

/* roulang page: category2 */
:root {
      --bg-main: #0B0F19;
      --bg-card: #151D2A;
      --text-main: #F1F5F9;
      --text-muted: #94A3B8;
      --brand-orange: #FF7D00;
      --brand-cyan: #00D2FF;
      --border-color: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-main);
      color: var(--text-main);
      font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.75;
      overflow-x: hidden;
    }
    .dropdown-menu {
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .dropdown-trigger:hover .dropdown-menu,
    .dropdown-trigger:focus-within .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .card-glow:hover {
      box-shadow: 0 12px 36px -8px rgba(255, 125, 0, 0.15), 0 0 1px 1px rgba(255, 125, 0, 0.3);
    }
    .poster-img {
      transition: transform 0.4s ease, filter 0.4s ease;
    }
    .poster-box:hover .poster-img {
      transform: scale(1.05);
    }

/* roulang page: category4 */
:root {
      --bg-main: #0B0F19;
      --bg-card: #151D2A;
      --text-main: #F1F5F9;
      --text-muted: #94A3B8;
      --brand-orange: #FF7D00;
      --brand-cyan: #00D2FF;
      --border-color: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-main);
      color: var(--text-main);
      font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.75;
      overflow-x: hidden;
    }
    .dropdown-panel {
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .has-dropdown:hover .dropdown-panel,
    .has-dropdown:focus-within .dropdown-panel {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .card-glow:hover {
      box-shadow: 0 12px 36px -8px rgba(255, 125, 0, 0.15), 0 0 1px 1px rgba(255, 125, 0, 0.3);
    }
    .poster-img {
      transition: transform 0.4s ease, filter 0.4s ease;
    }
    .poster-box:hover .poster-img {
      transform: scale(1.05);
    }
    .line-clamp-2 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .badge-filter-active {
      background-color: #FF7D00;
      color: #FFFFFF;
      font-weight: 600;
      box-shadow: 0 0 12px rgba(255, 125, 0, 0.35);
    }

/* roulang page: category3 */
:root {
            --bg-main: #0B0F19;
            --bg-card: #151D2A;
            --text-main: #F1F5F9;
            --text-muted: #94A3B8;
            --brand-orange: #FF7D00;
            --brand-cyan: #00D2FF;
            --border-color: rgba(255, 255, 255, 0.08);
        }
        body {
            background-color: var(--bg-main);
            color: var(--text-main);
            font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            line-height: 1.75;
            overflow-x: hidden;
        }
        .nav-dropdown {
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px);
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .group:hover .nav-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .card-glow:hover {
            box-shadow: 0 12px 36px -8px rgba(255, 125, 0, 0.18), 0 0 1px 1px rgba(255, 125, 0, 0.35);
        }
        .poster-img {
            transition: transform 0.4s ease, filter 0.4s ease;
        }
        .poster-box:hover .poster-img {
            transform: scale(1.06);
        }

/* roulang page: category5 */
:root {
      --bg-main: #0B0F19;
      --bg-card: #151D2A;
      --text-main: #F1F5F9;
      --text-muted: #94A3B8;
      --brand-orange: #FF7D00;
      --brand-cyan: #00D2FF;
      --border-color: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-main);
      color: var(--text-main);
      font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.75;
      overflow-x: hidden;
    }
    .dropdown-menu {
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .dropdown-group:hover .dropdown-menu,
    .dropdown-group:focus-within .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .card-glow:hover {
      box-shadow: 0 12px 36px -8px rgba(255, 125, 0, 0.18), 0 0 1px 1px rgba(255, 125, 0, 0.35);
    }
    .poster-img {
      transition: transform 0.4s ease, filter 0.4s ease;
    }
    .poster-box:hover .poster-img {
      transform: scale(1.05);
    }