/* roulang page: index */
:root{
      --bg: #f4f8ff;
      --bg-soft: #eef5ff;
      --panel: rgba(255,255,255,.92);
      --panel-strong: rgba(255,255,255,.98);
      --nav: #0b1020;
      --nav-2: #101a33;
      --line: #d9e5f7;
      --line-strong: #b8cdf3;
      --text: #0f172a;
      --muted: #5f6f88;
      --primary: #2d6cf5;
      --primary-2: #6c5cff;
      --accent: #19d3ff;
      --success: #0ea5a3;
      --radius: 20px;
      --shadow: 0 18px 45px rgba(37, 63, 120, .12);
      --shadow-hover: 0 24px 60px rgba(37, 63, 120, .18);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at 20% 10%, rgba(45,108,245,.08), transparent 22%),
        radial-gradient(circle at 80% 0%, rgba(108,92,255,.08), transparent 20%),
        linear-gradient(180deg, #f8fbff 0%, var(--bg) 55%, #f8fbff 100%);
      font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
      line-height: 1.7;
    }

    a { text-decoration: none; }
    img { max-width: 100%; display: block; }
    ::selection { background: rgba(45,108,245,.18); color: #0b1020; }

    .site-header{
      background: linear-gradient(180deg, rgba(11,16,32,.96) 0%, rgba(13,18,34,.91) 100%);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(148,163,184,.16);
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 50;
      box-shadow: 0 8px 28px rgba(2,6,23,.22);
    }
    .site-header::after{
      content:"";
      position:absolute;
      left:0; right:0; bottom:-1px;
      height:2px;
      background: linear-gradient(90deg, transparent 0%, rgba(25,211,255,.95) 20%, rgba(108,92,255,.95) 50%, rgba(45,108,245,.95) 80%, transparent 100%);
      box-shadow: 0 0 18px rgba(25,211,255,.35);
    }

    .nav-link{
      position: relative;
      color: rgba(226,232,240,.82);
      transition: color .25s ease, transform .25s ease, text-shadow .25s ease;
    }
    .nav-link:hover{
      color: #fff;
      transform: translateY(-1px);
      text-shadow: 0 0 16px rgba(25,211,255,.28);
    }
    .nav-link::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-10px;
      height:2px;
      border-radius:999px;
      background: linear-gradient(90deg, rgba(25,211,255,1), rgba(108,92,255,1));
      transform: scaleX(0);
      transform-origin: center;
      transition: transform .25s ease;
      box-shadow: 0 0 12px rgba(25,211,255,.5);
    }
    .nav-link:hover::after,
    .nav-link.active::after{
      transform: scaleX(1);
    }
    .nav-link.active{
      color: #fff;
      text-shadow: 0 0 14px rgba(25,211,255,.42);
    }

    .nav-shell{
      border: 1px solid rgba(148,163,184,.12);
      background: rgba(255,255,255,.03);
      border-radius: 999px;
      padding: 0.35rem;
    }

    .glow-btn{
      background: linear-gradient(135deg, #3b82f6 0%, #5b8cff 45%, #7c5cff 100%);
      color: #fff;
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 12px 28px rgba(45,108,245,.28), inset 0 1px 0 rgba(255,255,255,.18);
      transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
    }
    .glow-btn:hover{
      transform: translateY(-1px);
      filter: brightness(1.03);
      box-shadow: 0 18px 36px rgba(45,108,245,.34), 0 0 0 4px rgba(25,211,255,.08);
    }
    .glow-btn:active{ transform: translateY(0); }

    .soft-btn{
      background: rgba(255,255,255,.88);
      border: 1px solid var(--line);
      color: #0f172a;
      box-shadow: 0 8px 20px rgba(15,23,42,.06);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
    }
    .soft-btn:hover{
      transform: translateY(-1px);
      border-color: var(--line-strong);
      box-shadow: 0 14px 30px rgba(15,23,42,.1);
      background: #fff;
    }

    .badge-chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.5rem .82rem;
      border-radius:999px;
      font-size:.88rem;
      border: 1px solid rgba(45,108,245,.14);
      background: rgba(45,108,245,.08);
      color: #204bb4;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .badge-chip:hover{
      transform: translateY(-1px);
      border-color: rgba(45,108,245,.24);
      background: rgba(45,108,245,.12);
    }

    .soft-card{
      background: var(--panel);
      border: 1px solid rgba(184,205,243,.78);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
    }
    .soft-card:hover{
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(94,137,255,.35);
      background: var(--panel-strong);
    }

    .panel-dark{
      background: linear-gradient(180deg, #121a30 0%, #0b1020 100%);
      border: 1px solid rgba(148,163,184,.16);
      border-radius: var(--radius);
      box-shadow: 0 18px 45px rgba(2,6,23,.16);
    }

    .section-title{
      letter-spacing: -0.03em;
      color: #0f172a;
      font-weight: 800;
    }
    .section-lead{
      color: var(--muted);
      max-width: 72ch;
    }

    .metric-card{
      background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(247,251,255,.96) 100%);
      border: 1px solid rgba(184,205,243,.82);
      border-radius: 18px;
      box-shadow: 0 10px 26px rgba(15,23,42,.06);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .metric-card:hover{
      transform: translateY(-2px);
      border-color: rgba(94,137,255,.34);
      box-shadow: 0 18px 30px rgba(15,23,42,.10);
    }

    .timeline-badge{
      width: 2.75rem;
      height: 2.75rem;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(45,108,245,.14), rgba(124,92,255,.16));
      color: #2554d8;
      border: 1px solid rgba(45,108,245,.18);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
      font-weight: 800;
    }

    .progress-track{
      height: 10px;
      border-radius: 999px;
      background: #e8f0ff;
      overflow: hidden;
      border: 1px solid rgba(184,205,243,.75);
    }
    .progress-fill{
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #2d6cf5 0%, #5c86ff 45%, #7c5cff 100%);
      box-shadow: 0 0 18px rgba(45,108,245,.34);
    }

    .table-shell{
      border: 1px solid rgba(184,205,243,.82);
      border-radius: 24px;
      overflow: hidden;
      background: rgba(255,255,255,.95);
      box-shadow: var(--shadow);
    }
    .table-shell table{
      width: 100%;
      border-collapse: collapse;
    }
    .table-shell th,
    .table-shell td{
      padding: 1rem 1rem;
      text-align: left;
      border-bottom: 1px solid rgba(224,233,247,.92);
      vertical-align: top;
    }
    .table-shell thead th{
      background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
      color: #0f172a;
      font-weight: 700;
    }
    .table-shell tbody tr:hover td{
      background: #fbfdff;
    }

    details.soft-card{
      padding: 0;
      overflow: hidden;
    }
    details.soft-card summary{
      list-style: none;
      cursor: pointer;
      padding: 1.1rem 1.2rem;
      font-weight: 700;
      color: #0f172a;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    details.soft-card summary::-webkit-details-marker{ display:none; }
    details.soft-card summary span{
      color: #2d6cf5;
      flex: 0 0 auto;
      transition: transform .2s ease;
    }
    details[open].soft-card summary span{ transform: rotate(45deg); }
    details.soft-card .faq-body{
      padding: 0 1.2rem 1.1rem;
      color: var(--muted);
    }

    .form-field{
      width: 100%;
      border-radius: 16px;
      border: 1px solid rgba(184,205,243,.95);
      background: rgba(255,255,255,.96);
      color: #0f172a;
      padding: .92rem 1rem;
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
      box-shadow: 0 6px 18px rgba(15,23,42,.04);
    }
    .form-field:focus{
      border-color: rgba(45,108,245,.55);
      box-shadow: 0 0 0 4px rgba(45,108,245,.12);
    }

    .mini-pill{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.4rem .72rem;
      border-radius:999px;
      font-size:.78rem;
      background: rgba(15,23,42,.05);
      color: #42526b;
      border: 1px solid rgba(148,163,184,.22);
    }

    .mobile-menu{
      background: rgba(8,13,25,.98);
      border-top: 1px solid rgba(148,163,184,.16);
      box-shadow: 0 18px 30px rgba(2,6,23,.22);
    }

    .focus-ring:focus-visible{
      outline: none;
      box-shadow: 0 0 0 4px rgba(25,211,255,.18), 0 0 0 1px rgba(25,211,255,.28);
    }

    .floating-orb{
      position:absolute;
      border-radius:999px;
      filter: blur(8px);
      pointer-events:none;
      opacity:.75;
    }

    @media (max-width: 1024px){
      .section-lead{ max-width: 100%; }
    }

    @media (max-width: 768px){
      .site-header .desktop-only{ display:none !important; }
      .hero-grid{ grid-template-columns: 1fr !important; }
    }

    @media (max-width: 520px){
      .badge-chip{ width: auto; }
      .soft-card, .metric-card, .table-shell{ border-radius: 18px; }
      .section-title{ line-height: 1.2; }
    }

/* roulang page: category1 */
:root{
      --bg:#f4f8ff;
      --bg-soft:#eef6ff;
      --panel:#ffffff;
      --nav:#0b1020;
      --nav-2:#111936;
      --text:#102033;
      --muted:#64748b;
      --weak:#94a3b8;
      --primary:#2563eb;
      --primary-2:#06b6d4;
      --violet:#8b5cf6;
      --cyan:#22d3ee;
      --line:#dbeafe;
      --line-2:#c7ddff;
      --success:#10b981;
      --warning:#f59e0b;
      --danger:#ef4444;
      --radius:22px;
      --radius-lg:30px;
      --shadow:0 20px 60px rgba(30,64,175,.10);
      --shadow-sm:0 10px 30px rgba(15,23,42,.08);
      --shadow-glow:0 0 28px rgba(34,211,238,.36),0 0 42px rgba(139,92,246,.18);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 8% 8%, rgba(34,211,238,.16), transparent 28%),
        radial-gradient(circle at 88% 2%, rgba(139,92,246,.13), transparent 30%),
        linear-gradient(180deg,#f8fbff 0%,var(--bg) 44%,#ffffff 100%);
      line-height:1.75;
      min-height:100vh;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    ::selection{background:rgba(34,211,238,.26)}
    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      background:linear-gradient(90deg,var(--nav) 0%,#10172f 54%,#0d1329 100%);
      border-bottom:1px solid rgba(34,211,238,.18);
      box-shadow:0 18px 45px rgba(2,6,23,.24);
    }
    .site-header:after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:1px;
      background:linear-gradient(90deg,transparent,rgba(34,211,238,.8),rgba(139,92,246,.7),transparent);
      opacity:.8;
      pointer-events:none;
    }
    .shadow-glow{box-shadow:var(--shadow-glow)}
    .nav-shell{
      border:1px solid rgba(255,255,255,.08);
      border-radius:999px;
      background:rgba(255,255,255,.045);
      box-shadow:inset 0 0 0 1px rgba(34,211,238,.06);
    }
    .nav-link{
      position:relative;
      color:rgba(226,232,240,.82);
      transition:color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
    }
    .nav-link:hover{
      color:#fff;
      background:rgba(34,211,238,.08);
      box-shadow:0 0 20px rgba(34,211,238,.12);
      transform:translateY(-1px);
    }
    .nav-link.active{
      color:#fff;
      background:linear-gradient(135deg,rgba(34,211,238,.20),rgba(139,92,246,.18));
      box-shadow:0 0 0 1px rgba(34,211,238,.24),0 0 24px rgba(34,211,238,.22);
    }
    .nav-link.active:after{
      content:"";
      position:absolute;
      left:22%;
      right:22%;
      bottom:5px;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg,var(--cyan),var(--violet));
      box-shadow:0 0 14px rgba(34,211,238,.85);
    }
    .glow-btn{
      color:#06111f;
      background:linear-gradient(135deg,#67e8f9 0%,#60a5fa 52%,#c4b5fd 100%);
      box-shadow:0 0 0 1px rgba(255,255,255,.25),0 12px 32px rgba(34,211,238,.24);
      transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
    }
    .glow-btn:hover{
      transform:translateY(-2px);
      filter:saturate(1.08);
      box-shadow:0 0 0 1px rgba(255,255,255,.36),0 18px 46px rgba(34,211,238,.34),0 0 30px rgba(139,92,246,.22);
    }
    .focus-ring:focus-visible{
      outline:3px solid rgba(34,211,238,.58);
      outline-offset:3px;
    }
    .mobile-menu{
      border-top:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg,#0b1020,#111936);
      box-shadow:0 22px 44px rgba(2,6,23,.32);
    }
    .page-shell{overflow:hidden}
    .container-x{width:min(100% - 32px,1280px);margin-inline:auto}
    .section-pad{padding:80px 0}
    .section-pad-sm{padding:54px 0}
    .section-title{
      letter-spacing:-.03em;
      line-height:1.14;
      color:#0f172a;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      border:1px solid rgba(37,99,235,.14);
      background:rgba(239,246,255,.78);
      color:#1d4ed8;
      border-radius:999px;
      padding:.5rem .85rem;
      font-weight:800;
      font-size:.86rem;
    }
    .section-kicker:before{
      content:"";
      width:.48rem;
      height:.48rem;
      border-radius:999px;
      background:var(--cyan);
      box-shadow:0 0 14px rgba(34,211,238,.8);
    }
    .hero-category{
      position:relative;
      padding:72px 0 44px;
      color:white;
      background:
        linear-gradient(105deg,rgba(7,12,31,.98) 0%,rgba(12,22,48,.94) 46%,rgba(19,29,66,.82) 100%),
        radial-gradient(circle at 82% 22%,rgba(34,211,238,.35),transparent 38%),
        radial-gradient(circle at 62% 78%,rgba(139,92,246,.28),transparent 36%);
      border-bottom:1px solid rgba(34,211,238,.18);
    }
    .hero-category:before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
        linear-gradient(180deg,rgba(255,255,255,.035) 1px,transparent 1px);
      background-size:48px 48px;
      mask-image:linear-gradient(180deg,rgba(0,0,0,.72),transparent 78%);
      pointer-events:none;
    }
    .hero-poster{
      position:relative;
      border-radius:34px;
      padding:24px;
      border:1px solid rgba(148,163,184,.22);
      background:
        linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.045)),
        radial-gradient(circle at 18% 15%,rgba(34,211,238,.2),transparent 30%),
        radial-gradient(circle at 80% 20%,rgba(139,92,246,.2),transparent 28%);
      box-shadow:0 28px 80px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06);
      overflow:hidden;
    }
    .hero-poster:after{
      content:"";
      position:absolute;
      inset:auto -18% -36% 12%;
      height:220px;
      background:radial-gradient(circle,rgba(34,211,238,.22),transparent 70%);
      transform:rotate(-8deg);
      pointer-events:none;
    }
    .poster-main{
      position:relative;
      min-height:380px;
      border-radius:26px;
      background:
        linear-gradient(145deg,rgba(34,211,238,.18),rgba(37,99,235,.08) 42%,rgba(139,92,246,.16)),
        linear-gradient(180deg,#172554,#020617);
      border:1px solid rgba(255,255,255,.14);
      padding:24px;
      overflow:hidden;
    }
    .poster-main:before{
      content:"";
      position:absolute;
      inset:18px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:22px;
      pointer-events:none;
    }
    .heat-badge{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border-radius:999px;
      border:1px solid rgba(34,211,238,.32);
      background:rgba(2,6,23,.45);
      color:#cffafe;
      padding:.45rem .75rem;
      font-size:.8rem;
      font-weight:800;
      box-shadow:0 0 22px rgba(34,211,238,.16);
      backdrop-filter:blur(12px);
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      white-space:nowrap;
      border-radius:999px;
      border:1px solid rgba(37,99,235,.14);
      background:#fff;
      color:#1e3a8a;
      padding:.58rem .86rem;
      font-size:.88rem;
      font-weight:800;
      box-shadow:0 8px 24px rgba(30,64,175,.06);
      transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;
    }
    .chip:hover,.chip.active{
      transform:translateY(-1px);
      border-color:rgba(34,211,238,.55);
      background:linear-gradient(135deg,#ffffff,#eff6ff);
      box-shadow:0 12px 28px rgba(34,211,238,.13);
    }
    .chip.active{
      color:#0f172a;
      box-shadow:0 0 0 1px rgba(34,211,238,.28),0 12px 30px rgba(37,99,235,.12);
    }
    .filter-bar{
      position:sticky;
      top:78px;
      z-index:30;
      border:1px solid rgba(219,234,254,.92);
      background:rgba(255,255,255,.88);
      backdrop-filter:blur(18px);
      border-radius:24px;
      box-shadow:var(--shadow-sm);
    }
    .card{
      border:1px solid var(--line);
      background:rgba(255,255,255,.94);
      border-radius:var(--radius);
      box-shadow:var(--shadow-sm);
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
    }
    .card:hover{
      transform:translateY(-5px);
      border-color:rgba(34,211,238,.55);
      box-shadow:0 24px 58px rgba(30,64,175,.14);
      background:#fff;
    }
    .topic-card{
      min-height:100%;
      position:relative;
      overflow:hidden;
    }
    .topic-card:before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      right:0;
      height:4px;
      background:linear-gradient(90deg,var(--cyan),var(--primary),var(--violet));
      opacity:.88;
    }
    .topic-card.large{grid-row:span 2}
    .status-dot{
      display:inline-flex;
      align-items:center;
      gap:.42rem;
      font-size:.82rem;
      font-weight:800;
      color:#0369a1;
    }
    .status-dot:before{
      content:"";
      width:.55rem;
      height:.55rem;
      border-radius:999px;
      background:var(--success);
      box-shadow:0 0 14px rgba(16,185,129,.55);
    }
    .metric-box{
      border-radius:20px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(2,6,23,.36);
      padding:16px;
      backdrop-filter:blur(14px);
    }
    .metric-box strong{
      display:block;
      font-size:1.55rem;
      line-height:1;
      letter-spacing:-.04em;
      color:white;
    }
    .soft-panel{
      border:1px solid var(--line);
      background:linear-gradient(180deg,#ffffff,#f8fbff);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow);
    }
    .side-panel{
      position:sticky;
      top:158px;
    }
    .notice-line{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:14px;
      border-radius:18px;
      background:#f8fbff;
      border:1px solid #dbeafe;
    }
    .notice-line .mark{
      flex:0 0 auto;
      width:32px;
      height:32px;
      border-radius:12px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg,#dffbff,#dbeafe);
      color:#0369a1;
      font-weight:900;
    }
    .faq-item{
      border:1px solid var(--line);
      border-radius:20px;
      background:#fff;
      overflow:hidden;
      box-shadow:0 8px 24px rgba(15,23,42,.04);
    }
    .faq-q{
      width:100%;
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:center;
      padding:18px 20px;
      text-align:left;
      font-weight:900;
      color:#0f172a;
      background:linear-gradient(180deg,#fff,#f8fbff);
    }
    .faq-q span:last-child{
      width:28px;
      height:28px;
      display:grid;
      place-items:center;
      border-radius:999px;
      color:#0369a1;
      background:#e0f2fe;
      flex:0 0 auto;
      transition:transform .2s ease;
    }
    .faq-a{
      display:none;
      padding:0 20px 18px;
      color:#64748b;
      font-size:.95rem;
    }
    .faq-item.open .faq-a{display:block}
    .faq-item.open .faq-q span:last-child{transform:rotate(45deg)}
    .primary-btn,.secondary-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border-radius:999px;
      padding:.9rem 1.2rem;
      font-weight:900;
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
    }
    .primary-btn{
      color:#06111f;
      background:linear-gradient(135deg,#67e8f9,#60a5fa 48%,#c4b5fd);
      box-shadow:0 18px 42px rgba(37,99,235,.2);
    }
    .primary-btn:hover{transform:translateY(-2px);box-shadow:0 24px 58px rgba(37,99,235,.28)}
    .secondary-btn{
      color:#1e3a8a;
      background:#fff;
      border:1px solid rgba(37,99,235,.16);
      box-shadow:0 10px 26px rgba(30,64,175,.07);
    }
    .secondary-btn:hover{transform:translateY(-2px);border-color:rgba(34,211,238,.48);box-shadow:0 16px 34px rgba(34,211,238,.14)}
    .cta-panel{
      position:relative;
      overflow:hidden;
      border-radius:34px;
      color:white;
      background:
        radial-gradient(circle at 15% 15%,rgba(34,211,238,.3),transparent 32%),
        radial-gradient(circle at 85% 20%,rgba(139,92,246,.28),transparent 30%),
        linear-gradient(135deg,#0b1020,#111936 58%,#172554);
      box-shadow:0 28px 80px rgba(15,23,42,.24);
    }
    .cta-panel:before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(180deg,rgba(255,255,255,.045) 1px,transparent 1px);
      background-size:42px 42px;
      opacity:.35;
      pointer-events:none;
    }
    .input-shell{
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.08);
      border-radius:22px;
      padding:10px;
      box-shadow:inset 0 0 0 1px rgba(34,211,238,.05);
    }
    .input-shell input,.input-shell select{
      width:100%;
      border:0;
      outline:0;
      color:white;
      background:transparent;
      padding:12px 14px;
    }
    .input-shell input::placeholder{color:rgba(226,232,240,.72)}
    .input-shell select option{color:#0f172a}
    .pager a,.pager button{
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      color:#1e3a8a;
      min-width:44px;
      height:44px;
      padding:0 15px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-weight:900;
      box-shadow:0 8px 20px rgba(30,64,175,.06);
      transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
    }
    .pager a:hover,.pager button:hover,.pager .current{
      transform:translateY(-1px);
      border-color:rgba(34,211,238,.5);
      box-shadow:0 12px 28px rgba(34,211,238,.13);
      background:#eff6ff;
    }
    .footer a:hover{color:#cffafe}
    @media (max-width:1024px){
      .section-pad{padding:64px 0}
      .filter-bar{top:74px}
      .side-panel{position:static}
      .topic-card.large{grid-row:auto}
    }
    @media (max-width:768px){
      .container-x{width:min(100% - 24px,1280px)}
      .hero-category{padding:46px 0 28px}
      .poster-main{min-height:300px}
      .section-pad{padding:52px 0}
      .section-pad-sm{padding:38px 0}
      .filter-bar{position:relative;top:auto;border-radius:20px}
      .scroll-tags{overflow-x:auto;scrollbar-width:none}
      .scroll-tags::-webkit-scrollbar{display:none}
    }
    @media (max-width:520px){
      body{line-height:1.68}
      .hero-poster{padding:14px;border-radius:26px}
      .poster-main{padding:18px;border-radius:20px}
      .primary-btn,.secondary-btn{width:100%;padding:.86rem 1rem}
      .section-title{font-size:2rem!important}
      .chip{font-size:.82rem;padding:.52rem .75rem}
      .card,.soft-panel{border-radius:20px}
    }