/* roulang page: index */
:root {
      --bg-gradient: radial-gradient(circle at 50% 0%, #101c3d 0%, #070B19 80%);
      --glass-border: rgba(6, 182, 212, 0.2);
      --glass-glow: 0 8px 32px 0 rgba(0, 180, 216, 0.12);
      --btn-glow: 0 0 20px rgba(6, 182, 212, 0.5);
    }
    body {
      background-color: #070B19;
      background-image: var(--bg-gradient);
      color: #e2e8f0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
    }
    .glass-card {
      background: var(--cardBg);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid var(--glass-border);
      box-shadow: var(--glass-glow);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .glass-card:hover {
      border-color: rgba(6, 182, 212, 0.45);
      box-shadow: 0 12px 40px 0 rgba(6, 182, 212, 0.22);
      transform: translateY(-2px);
    }
    .btn-glow {
      background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);
      box-shadow: var(--btn-glow);
      transition: all 0.3s ease;
    }
    .btn-glow:hover {
      box-shadow: 0 0 30px rgba(6, 182, 212, 0.85);
      transform: scale(1.02);
    }
    .btn-glow:active {
      transform: scale(0.98);
    }
    .text-glow {
      text-shadow: 0 0 12px rgba(6, 182, 212, 0.6);
    }
    .hero-mask {
      background: linear-gradient(180deg, rgba(7,11,25,0.2) 0%, rgba(7,11,25,0.85) 75%, #070B19 100%);
    }
    details summary::-webkit-details-marker {
      display: none;
    }

/* roulang page: category2 */
:root {
      --bg-gradient: radial-gradient(circle at 50% 0%, #101c3d 0%, #070B19 80%);
      --glass-border: rgba(6, 182, 212, 0.2);
      --glass-glow: 0 8px 32px 0 rgba(0, 180, 216, 0.12);
      --btn-glow: 0 0 20px rgba(6, 182, 212, 0.5);
      --cardBg: rgba(15, 23, 42, 0.65);
    }
    body {
      background-color: #070B19;
      background-image: var(--bg-gradient);
      color: #e2e8f0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
    }
    .glass-card {
      background: var(--cardBg);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid var(--glass-border);
      box-shadow: var(--glass-glow);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .glass-card:hover {
      border-color: rgba(6, 182, 212, 0.45);
      box-shadow: 0 12px 40px 0 rgba(6, 182, 212, 0.22);
      transform: translateY(-2px);
    }
    .btn-glow {
      background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);
      box-shadow: var(--btn-glow);
      transition: all 0.3s ease;
    }
    .btn-glow:hover {
      box-shadow: 0 0 30px rgba(6, 182, 212, 0.85);
      transform: scale(1.02);
    }
    .btn-glow:active {
      transform: scale(0.98);
    }
    .text-glow {
      text-shadow: 0 0 12px rgba(6, 182, 212, 0.6);
    }
    .hero-mask {
      background: linear-gradient(180deg, rgba(7,11,25,0.2) 0%, rgba(7,11,25,0.85) 75%, #070B19 100%);
    }
    .aspect-poster {
      aspect-ratio: 3 / 4;
    }
    .line-clamp-2 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

/* roulang page: category1 */
:root {
      --bg-gradient: radial-gradient(circle at 50% 0%, #101c3d 0%, #070B19 80%);
      --glass-border: rgba(6, 182, 212, 0.2);
      --glass-glow: 0 8px 32px 0 rgba(0, 180, 216, 0.12);
      --btn-glow: 0 0 20px rgba(6, 182, 212, 0.5);
      --cardBg: rgba(15, 23, 42, 0.65);
    }
    body {
      background-color: #070B19;
      background-image: var(--bg-gradient);
      color: #e2e8f0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
    }
    .glass-card {
      background: var(--cardBg);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid var(--glass-border);
      box-shadow: var(--glass-glow);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .glass-card:hover {
      border-color: rgba(6, 182, 212, 0.45);
      box-shadow: 0 12px 40px 0 rgba(6, 182, 212, 0.22);
      transform: translateY(-2px);
    }
    .btn-glow {
      background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);
      box-shadow: var(--btn-glow);
      transition: all 0.3s ease;
    }
    .btn-glow:hover {
      box-shadow: 0 0 30px rgba(6, 182, 212, 0.85);
      transform: scale(1.02);
    }
    .btn-glow:active {
      transform: scale(0.98);
    }
    .text-glow {
      text-shadow: 0 0 12px rgba(6, 182, 212, 0.6);
    }
    .hero-mask {
      background: linear-gradient(180deg, rgba(7,11,25,0.3) 0%, rgba(7,11,25,0.85) 75%, #070B19 100%);
    }
    .filter-pill {
      transition: all 0.2s ease;
    }
    .filter-pill.active {
      background: linear-gradient(135deg, rgba(6,182,212,0.3), rgba(59,130,246,0.3));
      border-color: #06b6d4;
      color: #38bdf8;
      box-shadow: 0 0 12px rgba(6,182,212,0.4);
    }
    .line-clamp-2 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

/* roulang page: category4 */
:root {
      --bg-gradient: radial-gradient(circle at 50% 0%, #101c3d 0%, #070B19 80%);
      --glass-border: rgba(6, 182, 212, 0.2);
      --glass-glow: 0 8px 32px 0 rgba(0, 180, 216, 0.12);
      --btn-glow: 0 0 20px rgba(6, 182, 212, 0.5);
      --cardBg: rgba(15, 23, 42, 0.65);
    }
    body {
      background-color: #070B19;
      background-image: var(--bg-gradient);
      color: #e2e8f0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
    }
    .glass-card {
      background: var(--cardBg);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid var(--glass-border);
      box-shadow: var(--glass-glow);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .glass-card:hover {
      border-color: rgba(6, 182, 212, 0.45);
      box-shadow: 0 12px 40px 0 rgba(6, 182, 212, 0.22);
      transform: translateY(-2px);
    }
    .btn-glow {
      background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);
      box-shadow: var(--btn-glow);
      transition: all 0.3s ease;
    }
    .btn-glow:hover {
      box-shadow: 0 0 30px rgba(6, 182, 212, 0.85);
      transform: scale(1.02);
    }
    .btn-glow:active {
      transform: scale(0.98);
    }
    .text-glow {
      text-shadow: 0 0 12px rgba(6, 182, 212, 0.6);
    }
    .hero-mask {
      background: linear-gradient(180deg, rgba(7,11,25,0.2) 0%, rgba(7,11,25,0.85) 75%, #070B19 100%);
    }
    .scrollbar-none::-webkit-scrollbar {
      display: none;
    }
    .scrollbar-none {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

/* roulang page: category3 */
:root {
      --bg-gradient: radial-gradient(circle at 50% 0%, #101c3d 0%, #070B19 80%);
      --glass-border: rgba(6, 182, 212, 0.2);
      --glass-glow: 0 8px 32px 0 rgba(0, 180, 216, 0.12);
      --btn-glow: 0 0 20px rgba(6, 182, 212, 0.5);
      --cardBg: rgba(15, 23, 42, 0.65);
    }
    body {
      background-color: #070B19;
      background-image: var(--bg-gradient);
      color: #e2e8f0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
    }
    .glass-card {
      background: var(--cardBg);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid var(--glass-border);
      box-shadow: var(--glass-glow);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .glass-card:hover {
      border-color: rgba(6, 182, 212, 0.45);
      box-shadow: 0 12px 40px 0 rgba(6, 182, 212, 0.22);
      transform: translateY(-2px);
    }
    .btn-glow {
      background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);
      box-shadow: var(--btn-glow);
      transition: all 0.3s ease;
    }
    .btn-glow:hover {
      box-shadow: 0 0 30px rgba(6, 182, 212, 0.85);
      transform: scale(1.02);
    }
    .btn-glow:active {
      transform: scale(0.98);
    }
    .text-glow {
      text-shadow: 0 0 12px rgba(6, 182, 212, 0.6);
    }