/* roulang page: index */
:root {
            --bg-primary: #0b0c10;
            --bg-card: #14161d;
            --brand-gradient: linear-gradient(135deg, #ff2a54 0%, #ff5e3a 100%);
            --brand-border: rgba(255, 255, 255, 0.08);
            --text-main: #ffffff;
            --text-muted: #9aa0a6;
            --gold: #f5c518;
        }

        body {
            background-color: var(--bg-primary);
            color: var(--text-main);
            font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
            overflow-x: hidden;
        }

        .gradient-text {
            background: var(--brand-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .btn-gradient {
            background: var(--brand-gradient);
            color: #ffffff;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .btn-gradient:hover {
            opacity: 0.95;
            box-shadow: 0 0 24px rgba(255, 42, 84, 0.45);
            transform: translateY(-1px);
        }

        .glass-card {
            background: rgba(20, 22, 29, 0.85);
            backdrop-filter: blur(12px);
            border: 1px solid var(--brand-border);
            border-radius: 1rem;
        }

        .img-zoom {
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .group:hover .img-zoom {
            transform: scale(1.05);
        }

        /* 隐藏原生滚动条并优化交互手感 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #0b0c10;
        }
        ::-webkit-scrollbar-thumb {
            background: #252833;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #ff2a54;
        }

/* roulang page: category2 */
:root {
      --bg-primary: #0b0c10;
      --bg-card: #14161d;
      --brand-gradient: linear-gradient(135deg, #ff2a54 0%, #ff5e3a 100%);
      --brand-border: rgba(255, 255, 255, 0.08);
      --text-main: #ffffff;
      --text-muted: #9aa0a6;
      --gold: #f5c518;
    }
    body {
      background-color: var(--bg-primary);
      color: var(--text-main);
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
      overflow-x: hidden;
    }
    .btn-gradient {
      background: var(--brand-gradient);
      color: #ffffff;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .btn-gradient:hover {
      opacity: 0.95;
      box-shadow: 0 0 24px rgba(255, 42, 84, 0.45);
      transform: translateY(-1px);
    }
    .glass-card {
      background: rgba(20, 22, 29, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid var(--brand-border);
      border-radius: 1rem;
    }
    .img-zoom {
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .group:hover .img-zoom {
      transform: scale(1.05);
    }
    .badge-gold {
      background: rgba(245, 197, 24, 0.15);
      color: #f5c518;
      border: 1px solid rgba(245, 197, 24, 0.3);
    }
    .badge-hd {
      background: rgba(255, 42, 84, 0.15);
      color: #ff2a54;
      border: 1px solid rgba(255, 42, 84, 0.3);
    }
    /* 手风琴平滑旋转动画 */
    details[open] summary svg {
      transform: rotate(180deg);
    }
    details summary::-webkit-details-marker {
      display: none;
    }

/* roulang page: category1 */
:root {
      --bg-primary: #0b0c10;
      --bg-card: #14161d;
      --brand-gradient: linear-gradient(135deg, #ff2a54 0%, #ff5e3a 100%);
      --brand-border: rgba(255, 255, 255, 0.08);
      --text-main: #ffffff;
      --text-muted: #9aa0a6;
      --gold: #f5c518;
    }
    body {
      background-color: var(--bg-primary);
      color: var(--text-main);
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
      overflow-x: hidden;
    }
    .btn-gradient {
      background: var(--brand-gradient);
      color: #ffffff;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .btn-gradient:hover {
      opacity: 0.95;
      box-shadow: 0 0 24px rgba(255, 42, 84, 0.45);
      transform: translateY(-1px);
    }
    .glass-card {
      background: rgba(20, 22, 29, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid var(--brand-border);
      border-radius: 1rem;
    }
    .img-zoom {
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .group:hover .img-zoom {
      transform: scale(1.05);
    }
    .filter-pill {
      transition: all 0.2s ease-in-out;
    }
    .filter-pill.active {
      background: var(--brand-gradient);
      color: #ffffff;
      font-weight: 600;
      box-shadow: 0 4px 12px rgba(255, 42, 84, 0.3);
    }
    .faq-toggle:checked ~ .faq-content {
      max-height: 240px;
      opacity: 1;
      padding-top: 1rem;
    }
    .faq-toggle:checked ~ label .faq-icon {
      transform: rotate(180deg);
    }

/* roulang page: category3 */
:root {
      --bg-primary: #0b0c10;
      --bg-card: #14161d;
      --brand-gradient: linear-gradient(135deg, #ff2a54 0%, #ff5e3a 100%);
      --brand-border: rgba(255, 255, 255, 0.08);
      --text-main: #ffffff;
      --text-muted: #9aa0a6;
      --gold: #f5c518;
    }
    body {
      background-color: var(--bg-primary);
      color: var(--text-main);
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
      overflow-x: hidden;
    }
    .btn-gradient {
      background: var(--brand-gradient);
      color: #ffffff;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .btn-gradient:hover {
      opacity: 0.95;
      box-shadow: 0 0 24px rgba(255, 42, 84, 0.45);
      transform: translateY(-1px);
    }
    .glass-card {
      background: rgba(20, 22, 29, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid var(--brand-border);
      border-radius: 1rem;
    }
    .img-zoom {
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .group:hover .img-zoom {
      transform: scale(1.05);
    }
    .poster-ratio {
      aspect-ratio: 2 / 3;
    }
    .cinema-banner {
      background: radial-gradient(circle at 50% 20%, rgba(255, 42, 84, 0.15) 0%, rgba(11, 12, 16, 0.95) 75%),
                  url('/assets/images/9993e9e0b2317fca.jpg') center/cover no-repeat;
    }

/* roulang page: category4 */
:root {
      --bg-primary: #0b0c10;
      --bg-card: #14161d;
      --brand-gradient: linear-gradient(135deg, #ff2a54 0%, #ff5e3a 100%);
      --brand-border: rgba(255, 255, 255, 0.08);
      --text-main: #ffffff;
      --text-muted: #9aa0a6;
      --gold: #f5c518;
    }
    body {
      background-color: var(--bg-primary);
      color: var(--text-main);
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
      overflow-x: hidden;
    }
    .btn-gradient {
      background: var(--brand-gradient);
      color: #ffffff;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .btn-gradient:hover {
      opacity: 0.95;
      box-shadow: 0 0 24px rgba(255, 42, 84, 0.45);
      transform: translateY(-1px);
    }
    .glass-card {
      background: rgba(20, 22, 29, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid var(--brand-border);
      border-radius: 1rem;
    }
    .img-zoom {
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .group:hover .img-zoom {
      transform: scale(1.05);
    }