/* roulang page: index */
:root{
            --berry:#b52d62;
            --berry-dark:#641b45;
            --coral:#f47772;
            --orange:#ffad73;
            --cream:#fffaf6;
            --paper:#ffffff;
            --mist:#f5eef0;
            --ink:#2d2029;
            --muted:#806d78;
            --line:#eadde2;
            --green:#217c65;
            --shadow:0 18px 45px rgba(91,42,65,.11);
            --soft-shadow:0 8px 24px rgba(91,42,65,.08);
            --radius-xl:28px;
            --radius-lg:20px;
            --radius-md:15px;
        }
        *{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;background:var(--cream);color:var(--ink);line-height:1.7;overflow-x:hidden}
        a{color:inherit;text-decoration:none}
        img{display:block;width:100%;object-fit:cover}
        button,input{font:inherit}
        button{border:0;cursor:pointer}
        :focus-visible{outline:3px solid rgba(244,119,114,.55);outline-offset:3px}
        .container{width:min(1180px,calc(100% - 40px));margin:0 auto}
        .topbar{height:76px;display:flex;align-items:center;border-bottom:1px solid rgba(181,45,98,.12);background:rgba(255,250,246,.94);position:sticky;top:0;z-index:20}
        .nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:28px}
        .brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:800;letter-spacing:.02em}
        .brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--berry),var(--coral));display:grid;place-items:center;color:#fff;box-shadow:0 7px 16px rgba(181,45,98,.25)}
        .brand-mark:after{content:"";width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid #fff;margin-left:3px}
        .nav-links{display:flex;align-items:center;gap:8px}
        .nav-links a{padding:9px 16px;border-radius:999px;color:var(--muted);font-size:14px;font-weight:700;transition:.25s}
        .nav-links a:hover,.nav-links a.active{color:var(--berry);background:#f8e8ed}
        .nav-note{font-size:13px;color:var(--muted);border-left:1px solid var(--line);padding-left:20px}
        .menu-toggle{display:none;background:none;color:var(--berry);font-size:25px}
        main{overflow:hidden}
        .hero{padding:54px 0 70px;position:relative}
        .hero:before{content:"";position:absolute;width:420px;height:420px;right:-130px;top:-140px;border-radius:50%;background:rgba(255,173,115,.22);filter:blur(4px);z-index:-1}
        .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
        .eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--berry);font-size:13px;font-weight:800;letter-spacing:.08em}
        .eyebrow:before{content:"";width:24px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--berry),var(--orange))}
        h1{font-size:clamp(38px,5vw,68px);line-height:1.12;letter-spacing:-.055em;margin:18px 0 20px;font-weight:900}
        h1 em{font-style:normal;color:var(--berry);position:relative}
        h1 em:after{content:"";position:absolute;height:9px;left:3px;right:3px;bottom:-5px;background:rgba(255,173,115,.45);z-index:-1;border-radius:10px}
        .hero-copy{font-size:16px;color:var(--muted);max-width:600px}
        .hero-actions{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap}
        .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 21px;border-radius:999px;font-weight:800;font-size:14px;transition:.25s;border:1px solid transparent}
        .btn-primary{color:#fff;background:linear-gradient(110deg,var(--berry),var(--coral));box-shadow:0 10px 22px rgba(181,45,98,.2)}
        .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(181,45,98,.28);filter:saturate(1.08)}
        .btn-ghost{color:var(--berry);border-color:#e5bdcb;background:#fff8f8}
        .btn-ghost:hover{transform:translateY(-2px);background:#fbecef}
        .hero-stage{min-height:390px;border-radius:var(--radius-xl);padding:22px;position:relative;background:linear-gradient(145deg,#702048,#c65370 58%,#ffae78);box-shadow:var(--shadow);overflow:hidden}
        .hero-stage:before,.hero-stage:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.22)}
        .hero-stage:before{width:280px;height:280px;right:-70px;top:-80px}
        .hero-stage:after{width:190px;height:190px;left:-90px;bottom:-75px}
        .stage-image{height:300px;border-radius:18px;overflow:hidden;position:relative;background:#572040}
        .stage-image img{height:100%;opacity:.82}
        .stage-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(40,12,29,.7),transparent 60%)}
        .stage-caption{position:absolute;z-index:1;bottom:20px;left:20px;color:#fff}
        .stage-caption strong{display:block;font-size:25px;line-height:1.25}
        .stage-caption span{font-size:13px;color:#ffe1dd}
        .float-badge{position:absolute;background:#fff;color:var(--ink);padding:10px 13px;border-radius:14px;box-shadow:0 10px 25px rgba(54,12,35,.18);font-size:12px;font-weight:800;z-index:2}
        .float-badge b{display:block;font-size:18px;color:var(--berry);line-height:1.2}
        .badge-one{top:40px;right:10px}.badge-two{bottom:28px;right:18px}
        .section{padding:82px 0}
        .section.soft{background:#fff5f3}
        .section.dark{background:#321d2b;color:#fff}
        .section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px}
        .section-head h2{font-size:clamp(25px,3vw,38px);line-height:1.2;letter-spacing:-.035em;margin-top:8px}
        .section-head p{max-width:500px;color:var(--muted);font-size:14px}
        .dark .section-head p{color:#d7bbc7}
        .entry-grid{display:grid;grid-template-columns:1.3fr .9fr .9fr;gap:16px}
        .entry-card{min-height:170px;border-radius:var(--radius-lg);padding:24px;background:var(--paper);border:1px solid var(--line);position:relative;overflow:hidden;transition:.25s}
        .entry-card:first-child{background:linear-gradient(135deg,#fff1e9,#f8dce5)}
        .entry-card:hover,.movie-card:hover,.feature:hover{transform:translateY(-4px);box-shadow:var(--soft-shadow)}
        .entry-card h3{font-size:21px;margin:11px 0 8px}.entry-card p{font-size:13px;color:var(--muted);max-width:300px}
        .entry-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:13px;background:#f8dce5;color:var(--berry);font-weight:900}
        .entry-card small{position:absolute;right:20px;bottom:19px;color:var(--green);font-weight:800}
        .stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(255,255,255,.15);border-radius:20px;overflow:hidden;background:rgba(255,255,255,.07)}
        .stat{padding:26px 24px;border-right:1px solid rgba(255,255,255,.15)}.stat:last-child{border:0}
        .stat strong{display:block;font-size:36px;color:#fff0cf;line-height:1.1}.stat span{font-size:13px;color:#d9bdca}
        .movie-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
        .movie-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.25s}
        .poster{height:245px;background:linear-gradient(145deg,#e9a1a8,#702048);position:relative;overflow:hidden}
        .poster img{height:100%;transition:.35s}.movie-card:hover .poster img{transform:scale(1.04)}
        .poster:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(40,13,28,.45))}
        .status{position:absolute;z-index:1;top:12px;left:12px;padding:4px 8px;border-radius:7px;background:#fff0d7;color:#7e4c18;font-size:11px;font-weight:900}
        .rate{position:absolute;z-index:1;right:12px;bottom:12px;padding:4px 8px;border-radius:8px;background:rgba(46,22,38,.8);color:#ffe5a8;font-size:12px;font-weight:800}
        .movie-info{padding:14px 15px 16px}.movie-info h3{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.movie-info p{font-size:12px;color:var(--muted);margin-top:4px}
        .feature-grid{display:grid;grid-template-columns:1.25fr .75fr .75fr;gap:18px}
        .feature{min-height:280px;border-radius:22px;position:relative;overflow:hidden;background:#6e2548;transition:.25s}
        .feature:first-child{grid-row:span 2;min-height:578px}.feature img{height:100%;opacity:.8}.feature:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(42,11,29,.9))}
        .feature-text{position:absolute;z-index:1;left:22px;right:20px;bottom:20px;color:#fff}.feature-text h3{font-size:24px}.feature-text p{font-size:13px;color:#f3dbe0;margin-top:4px}
        .channel-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.channel{padding:20px 16px;border-radius:16px;border:1px solid var(--line);background:#fff;transition:.25s}.channel:hover{border-color:#dc91a6;background:#fff5f5}.channel b{display:block;color:var(--berry);font-size:18px;margin-bottom:7px}.channel p{font-size:12px;color:var(--muted)}
        .channel-arrow{display:inline-block;margin-top:12px;color:var(--berry);font-weight:800;font-size:12px}
        .rank-layout{display:grid;grid-template-columns:1fr .75fr;gap:34px;align-items:start}.rank-list{display:grid;gap:8px}.rank-item{display:grid;grid-template-columns:42px 1fr auto auto;align-items:center;gap:15px;padding:13px 15px;background:#fff;border-radius:14px;color:var(--ink)}.rank-item:first-child,.rank-item:nth-child(2),.rank-item:nth-child(3){background:linear-gradient(100deg,#fff1e2,#fff)}.rank-no{font-size:20px;font-weight:900;color:#c76a78}.rank-title{font-weight:800}.rank-tag{font-size:11px;color:var(--muted);padding:3px 8px;background:#f8eef0;border-radius:6px}.rank-score{font-size:13px;color:var(--berry);font-weight:900}
        .rank-aside{padding:28px;border-radius:24px;background:linear-gradient(145deg,#f6d5d4,#fff1d9);min-height:260px}.rank-aside h3{font-size:23px;margin:12px 0}.rank-aside p{font-size:13px;color:var(--muted)}
        .topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.topic{border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line)}.topic img{height:140px}.topic div{padding:15px}.topic h3{font-size:16px}.topic p{font-size:12px;color:var(--muted);margin-top:4px}
        .news-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}.news-main{border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--line)}.news-main img{height:250px}.news-main div{padding:20px}.news-main h3{font-size:22px}.news-main p,.news-item p{color:var(--muted);font-size:13px;margin-top:5px}.news-list{display:grid;gap:10px}.news-item{display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:center;background:#fff;padding:10px;border-radius:14px;border:1px solid var(--line)}.news-item img{height:78px;border-radius:10px}.news-item h3{font-size:15px;line-height:1.4}.news-meta{font-size:11px;color:var(--berry);font-weight:800}
        .guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.guide{padding:24px 20px;border-left:3px solid var(--coral);background:#fff;border-radius:0 17px 17px 0}.guide b{font-size:28px;color:var(--berry)}.guide h3{font-size:17px;margin:8px 0}.guide p{font-size:13px;color:var(--muted)}
        .assure{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.assure-item{display:flex;gap:15px;align-items:center;padding:20px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.06)}.assure-icon{font-size:24px;color:#ffc47f}.assure-item b{display:block}.assure-item span{font-size:12px;color:#d7bbc7}
        .faq{max-width:850px;margin:auto}.faq details{border-bottom:1px solid var(--line);padding:19px 0}.faq summary{cursor:pointer;list-style:none;font-weight:800;display:flex;justify-content:space-between;gap:15px}.faq summary:after{content:"＋";color:var(--berry);font-size:20px}.faq details[open] summary:after{content:"－"}.faq details p{font-size:14px;color:var(--muted);padding:12px 30px 0 0}
        .cta{margin:82px 0;background:linear-gradient(115deg,#641b45,#c65370 65%,#f59b79);border-radius:28px;padding:55px 62px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:30px;position:relative;overflow:hidden}.cta:after{content:"";position:absolute;width:300px;height:300px;border:1px solid rgba(255,255,255,.2);border-radius:50%;right:-60px;top:-80px}.cta h2{font-size:clamp(27px,3vw,42px);line-height:1.2;position:relative;z-index:1}.cta p{color:#f9dce0;margin-top:9px;font-size:14px;position:relative;z-index:1}.cta .btn{position:relative;z-index:1;background:#fff;color:var(--berry)}
        footer{background:#241923;color:#e9d5dc;padding:54px 0 22px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:35px}.footer-brand p{color:#bda8b2;font-size:13px;max-width:280px;margin-top:12px}.footer h3{font-size:14px;color:#fff;margin-bottom:13px}.footer a,.footer li{display:block;color:#bda8b2;font-size:13px;margin:7px 0;transition:.2s}.footer a:hover{color:#fff0cf}.footer ul{list-style:none}.copyright{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:18px;color:#9e8994;font-size:12px;display:flex;justify-content:space-between;gap:15px}
        @media(max-width:1024px){.hero-grid{gap:30px}.movie-grid{grid-template-columns:repeat(3,1fr)}.channel-grid{grid-template-columns:repeat(3,1fr)}.topic-grid{grid-template-columns:repeat(2,1fr)}}
        @media(max-width:768px){.container{width:min(100% - 28px,600px)}.topbar{height:68px}.nav-note{display:none}.menu-toggle{display:block}.nav-links{display:none;position:absolute;top:68px;left:14px;right:14px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.nav-links a{text-align:center}.hero{padding:38px 0 48px}.hero-grid{grid-template-columns:1fr}.hero-stage{min-height:330px}.stage-image{height:245px}.section{padding:60px 0}.section-head{display:block}.section-head p{margin-top:12px}.entry-grid,.rank-layout,.news-layout{grid-template-columns:1fr}.entry-card{min-height:145px}.stats{grid-template-columns:repeat(2,1fr)}.stat{border-bottom:1px solid rgba(255,255,255,.15)}.movie-grid{grid-template-columns:repeat(2,1fr);gap:12px}.poster{height:220px}.feature-grid{grid-template-columns:1fr 1fr}.feature:first-child{grid-column:span 2;grid-row:auto;min-height:340px}.channel-grid{grid-template-columns:repeat(2,1fr)}.guide-grid{grid-template-columns:repeat(2,1fr)}.assure{grid-template-columns:1fr}.cta{margin:60px 0;padding:38px 25px;display:block}.cta .btn{margin-top:22px}.footer-grid{grid-template-columns:1fr 1fr}.copyright{display:block}.copyright span{display:block;margin-top:7px}}
        @media(max-width:520px){h1{font-size:42px}.hero-copy{font-size:15px}.hero-actions .btn{width:100%}.hero-stage{padding:14px}.float-badge{transform:scale(.9)}.movie-info h3{font-size:14px}.poster{height:190px}.feature-grid,.topic-grid{grid-template-columns:1fr}.feature:first-child{grid-column:auto}.channel-grid,.guide-grid{grid-template-columns:1fr 1fr}.rank-item{grid-template-columns:30px 1fr auto;gap:9px}.rank-tag{display:none}.news-item{grid-template-columns:100px 1fr}.news-item img{height:68px}.footer-grid{grid-template-columns:1fr}.copyright{line-height:1.8}}

/* roulang page: category1 */
:root {
      --berry: #b52d62;
      --berry-dark: #641b45;
      --coral: #f47772;
      --orange: #ffad73;
      --cream: #fffaf6;
      --paper: #ffffff;
      --mist: #f5eef0;
      --ink: #2d2029;
      --muted: #806d78;
      --line: #eadde2;
      --green: #217c65;
      --gold: #b97735;
      --shadow: 0 18px 45px rgba(91, 42, 65, .11);
      --soft-shadow: 0 8px 24px rgba(91, 42, 65, .08);
      --radius-xl: 28px;
      --radius-lg: 20px;
      --radius-md: 15px;
      --container: 1180px;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 92px;
    }

    body {
      margin: 0;
      min-width: 320px;
      overflow-x: hidden;
      background: var(--cream);
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
      font-size: 15px;
      line-height: 1.7;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input,
    select {
      color: inherit;
      font: inherit;
    }

    button {
      border: 0;
      cursor: pointer;
    }

    img {
      display: block;
      width: 100%;
      max-width: 100%;
      object-fit: cover;
    }

    :focus-visible {
      outline: 3px solid rgba(244, 119, 114, .66);
      outline-offset: 3px;
    }

    .container {
      width: min(var(--container), calc(100% - 48px));
      margin-inline: auto;
    }

    .topbar {
      position: sticky;
      z-index: 30;
      top: 0;
      min-height: 76px;
      border-bottom: 1px solid rgba(181, 45, 98, .12);
      background: rgba(255, 250, 246, .96);
      backdrop-filter: blur(12px);
      transition: box-shadow .2s ease, background .2s ease;
    }

    .nav-wrap {
      display: flex;
      min-height: 76px;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .brand {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 12px;
      font-size: 20px;
      font-weight: 800;
    }

    .brand-mark {
      position: relative;
      display: grid;
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      place-items: center;
      overflow: hidden;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--berry), var(--coral));
      box-shadow: 0 7px 16px rgba(181, 45, 98, .25);
    }

    .brand-mark::after {
      width: 0;
      height: 0;
      margin-left: 3px;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 12px solid #fff;
      content: "";
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .nav-links a {
      display: inline-flex;
      min-height: 42px;
      align-items: center;
      justify-content: center;
      padding: 8px 14px;
      border-radius: 999px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
      transition: color .2s ease, background .2s ease, transform .2s ease;
    }

    .nav-links a:hover,
    .nav-links a.active {
      background: #f8e8ed;
      color: var(--berry);
    }

    .nav-links a:active {
      transform: translateY(1px);
    }

    .nav-note {
      flex: 0 0 auto;
      padding-left: 18px;
      border-left: 1px solid var(--line);
      color: var(--muted);
      font-size: 13px;
    }

    .menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--paper);
      color: var(--berry);
    }

    .menu-lines,
    .menu-lines::before,
    .menu-lines::after {
      display: block;
      width: 19px;
      height: 2px;
      border-radius: 2px;
      background: currentColor;
      transition: transform .2s ease;
    }

    .menu-lines {
      position: relative;
    }

    .menu-lines::before,
    .menu-lines::after {
      position: absolute;
      left: 0;
      content: "";
    }

    .menu-lines::before {
      top: -6px;
    }

    .menu-lines::after {
      top: 6px;
    }

    main {
      overflow: hidden;
    }

    .section {
      padding: 72px 0;
    }

    .section-soft {
      background: #fff5f3;
    }

    .section-line {
      border-top: 1px solid rgba(181, 45, 98, .1);
    }

    .category-intro {
      padding: 38px 0 42px;
    }

    .category-head {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr);
      align-items: center;
      gap: 42px;
      padding: 30px;
      border: 1px solid rgba(181, 45, 98, .12);
      border-radius: var(--radius-xl);
      background: linear-gradient(115deg, #fff 0%, #fff8f5 58%, #fce8e9 100%);
      box-shadow: var(--soft-shadow);
    }

    .eyebrow,
    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--berry);
      font-size: 13px;
      font-weight: 800;
    }

    .eyebrow::before,
    .section-kicker::before {
      width: 23px;
      height: 3px;
      border-radius: 3px;
      background: linear-gradient(90deg, var(--berry), var(--orange));
      content: "";
    }

    .category-head h1 {
      max-width: 650px;
      margin: 12px 0 12px;
      font-size: clamp(32px, 4vw, 46px);
      font-weight: 850;
      line-height: 1.2;
    }

    .category-lead {
      max-width: 610px;
      margin: 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.85;
    }

    .category-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 22px;
    }

    .meta-pill {
      display: inline-flex;
      min-height: 32px;
      align-items: center;
      gap: 7px;
      padding: 4px 11px;
      border: 1px solid rgba(181, 45, 98, .12);
      border-radius: 999px;
      background: rgba(255, 255, 255, .78);
      color: var(--berry-dark);
      font-size: 12px;
      font-weight: 750;
    }

    .meta-pill strong {
      color: var(--berry);
    }

    .category-art {
      position: relative;
      min-height: 255px;
      overflow: hidden;
      border-radius: 22px;
      background: linear-gradient(145deg, #762849, #d35d74 62%, #ffb27d);
      box-shadow: 0 15px 32px rgba(91, 42, 65, .16);
    }

    .category-art img {
      position: absolute;
      inset: 0;
      height: 100%;
      opacity: .82;
    }

    .category-art::after {
      position: absolute;
      inset: 32% 0 0;
      background: linear-gradient(0deg, rgba(46, 15, 32, .83), transparent);
      content: "";
      pointer-events: none;
    }

    .art-caption {
      position: absolute;
      z-index: 1;
      right: 20px;
      bottom: 18px;
      left: 20px;
      color: white;
    }

    .art-caption span {
      display: block;
      color: #ffe8df;
      font-size: 12px;
      font-weight: 700;
    }

    .art-caption strong {
      display: block;
      margin-top: 2px;
      font-size: 22px;
      line-height: 1.35;
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 28px;
    }

    .section-head h2 {
      margin: 8px 0 0;
      font-size: 31px;
      font-weight: 820;
      line-height: 1.25;
    }

    .section-head p {
      max-width: 510px;
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .filter-section {
      padding: 32px 0 18px;
    }

    .filter-panel {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 18px;
      padding: 18px 20px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--paper);
      box-shadow: 0 5px 16px rgba(91, 42, 65, .04);
    }

    .filter-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .filter-tab {
      min-height: 38px;
      padding: 7px 15px;
      border: 1px solid transparent;
      border-radius: 999px;
      background: #f8f2f3;
      color: var(--muted);
      font-size: 13px;
      font-weight: 750;
      transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
    }

    .filter-tab:hover {
      border-color: #e9cad4;
      color: var(--berry);
    }

    .filter-tab:active {
      transform: translateY(1px);
    }

    .filter-tab[aria-pressed="true"] {
      background: var(--berry);
      color: white;
      box-shadow: 0 5px 13px rgba(181, 45, 98, .18);
    }

    .filter-controls {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .search-wrap {
      position: relative;
      width: 226px;
    }

    .search-wrap::before {
      position: absolute;
      top: 50%;
      left: 13px;
      color: #a28d97;
      content: "⌕";
      font-size: 22px;
      line-height: 1;
      transform: translateY(-54%);
      pointer-events: none;
    }

    .search-input,
    .sort-select {
      width: 100%;
      min-height: 42px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fffdfc;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .search-input {
      padding: 8px 12px 8px 37px;
      font-size: 13px;
    }

    .sort-select {
      min-width: 126px;
      padding: 8px 30px 8px 12px;
      color: var(--muted);
      font-size: 13px;
    }

    .search-input::placeholder {
      color: #aa9aa1;
    }

    .search-input:focus,
    .sort-select:focus {
      border-color: #cf7896;
      outline: 0;
      background: #fff;
      box-shadow: 0 0 0 4px rgba(181, 45, 98, .1);
    }

    .catalog-section {
      padding: 24px 0 76px;
    }

    .catalog-head {
      align-items: end;
      margin-bottom: 22px;
    }

    .catalog-count {
      flex: 0 0 auto;
      color: var(--muted);
      font-size: 13px;
    }

    .catalog-count strong {
      color: var(--berry);
      font-size: 17px;
    }

    .movie-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 20px;
    }

    .movie-card {
      min-width: 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--paper);
      transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
    }

    .movie-card:hover {
      transform: translateY(-4px);
      border-color: #e5bdcb;
      box-shadow: var(--soft-shadow);
    }

    .poster {
      position: relative;
      aspect-ratio: 3 / 4;
      overflow: hidden;
      background: linear-gradient(145deg, #782c50, #d96e79 63%, #ffbd8c);
    }

    .poster img {
      height: 100%;
      transition: transform .35s ease;
    }

    .movie-card:hover .poster img {
      transform: scale(1.035);
    }

    .poster::after {
      position: absolute;
      inset: 48% 0 0;
      background: linear-gradient(0deg, rgba(43, 17, 32, .45), transparent);
      content: "";
      pointer-events: none;
    }

    .quality-tag {
      position: absolute;
      z-index: 1;
      top: 12px;
      left: 12px;
      display: inline-flex;
      min-height: 26px;
      align-items: center;
      padding: 3px 9px;
      border: 1px solid rgba(255, 255, 255, .36);
      border-radius: 999px;
      background: rgba(53, 25, 40, .72);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      backdrop-filter: blur(6px);
    }

    .poster-index {
      position: absolute;
      z-index: 1;
      right: 12px;
      bottom: 10px;
      color: rgba(255, 255, 255, .8);
      font-size: 11px;
      font-weight: 750;
    }

    .movie-info {
      padding: 14px 14px 15px;
    }

    .movie-title-row {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 8px;
    }

    .movie-title {
      min-width: 0;
      margin: 0;
      overflow: hidden;
      font-size: 16px;
      font-weight: 800;
      line-height: 1.45;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .rating {
      flex: 0 0 auto;
      color: var(--gold);
      font-size: 12px;
      font-weight: 850;
    }

    .movie-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 5px 8px;
      margin-top: 8px;
      color: var(--muted);
      font-size: 11px;
    }

    .genre-label {
      display: inline-flex;
      min-height: 23px;
      align-items: center;
      padding: 2px 8px;
      border-radius: 7px;
      background: #f8edf0;
      color: var(--berry-dark);
      font-weight: 750;
    }

    .view-more-row {
      display: flex;
      justify-content: center;
      margin-top: 30px;
    }

    .btn {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 21px;
      border: 1px solid transparent;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 800;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
    }

    .btn-primary {
      background: linear-gradient(110deg, var(--berry), var(--coral));
      box-shadow: 0 9px 20px rgba(181, 45, 98, .2);
      color: #fff;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 13px 25px rgba(181, 45, 98, .28);
      filter: saturate(1.08);
    }

    .btn-ghost {
      border-color: #e5bdcb;
      background: #fff8f8;
      color: var(--berry);
    }

    .btn-ghost:hover {
      transform: translateY(-2px);
      background: #fbecef;
    }

    .btn:active {
      transform: translateY(1px);
    }

    .btn[hidden] {
      display: none;
    }

    .empty-state {
      display: none;
      padding: 40px 20px;
      border: 1px dashed #dfc6cf;
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, .7);
      color: var(--muted);
      text-align: center;
    }

    .empty-state.is-visible {
      display: block;
    }

    .ranking-section {
      padding: 76px 0;
      background: #fff5f3;
    }

    .rank-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
      align-items: start;
      gap: 38px;
    }

    .rank-list {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--paper);
    }

    .rank-row {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 13px;
      min-height: 67px;
      padding: 11px 18px;
      border-bottom: 1px solid #f1e8eb;
      transition: background .2s ease;
    }

    .rank-row:last-child {
      border-bottom: 0;
    }

    .rank-row:hover {
      background: #fff9f7;
    }

    .rank-number {
      display: grid;
      width: 32px;
      height: 32px;
      place-items: center;
      border-radius: 10px;
      background: #f5eef0;
      color: var(--muted);
      font-size: 14px;
      font-weight: 850;
    }

    .rank-row:nth-child(-n+3) .rank-number {
      background: linear-gradient(135deg, var(--berry), var(--coral));
      color: white;
    }

    .rank-name {
      overflow: hidden;
      font-size: 14px;
      font-weight: 800;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .rank-genre {
      color: var(--muted);
      font-size: 11px;
    }

    .rank-score {
      color: var(--gold);
      font-size: 12px;
      font-weight: 850;
      white-space: nowrap;
    }

    .rank-aside {
      position: relative;
      min-height: 100%;
      overflow: hidden;
      padding: 28px;
      border-radius: var(--radius-xl);
      background: linear-gradient(145deg, #702048, #a83e68 62%, #e77f79);
      color: white;
    }

    .rank-aside::before,
    .rank-aside::after {
      position: absolute;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 50%;
      content: "";
      pointer-events: none;
    }

    .rank-aside::before {
      top: -80px;
      right: -70px;
      width: 250px;
      height: 250px;
    }

    .rank-aside::after {
      right: -22px;
      bottom: -115px;
      width: 220px;
      height: 220px;
    }

    .rank-aside > * {
      position: relative;
      z-index: 1;
    }

    .rank-aside .section-kicker {
      color: #ffe0de;
    }

    .rank-aside h3 {
      max-width: 320px;
      margin: 14px 0 10px;
      font-size: 27px;
      line-height: 1.3;
    }

    .rank-aside p {
      max-width: 350px;
      margin: 0;
      color: rgba(255, 255, 255, .82);
      font-size: 14px;
    }

    .rank-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }

    .rank-stat {
      min-width: 116px;
      padding: 11px 13px;
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: 13px;
      background: rgba(255, 255, 255, .1);
    }

    .rank-stat strong {
      display: block;
      font-size: 20px;
      line-height: 1.25;
    }

    .rank-stat span {
      display: block;
      margin-top: 3px;
      color: rgba(255, 255, 255, .78);
      font-size: 11px;
    }

    .updates-section {
      padding: 76px 0;
    }

    .updates-grid {
      display: grid;
      grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
      gap: 34px;
    }

    .update-list,
    .news-list {
      border-top: 1px solid var(--line);
    }

    .update-row,
    .news-row {
      display: grid;
      align-items: center;
      gap: 14px;
      min-height: 66px;
      padding: 12px 4px;
      border-bottom: 1px solid var(--line);
    }

    .update-row {
      grid-template-columns: 60px minmax(0, 1fr) auto;
    }

    .news-row {
      grid-template-columns: 70px minmax(0, 1fr);
    }

    .update-date,
    .news-date {
      color: var(--berry);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .update-name,
    .news-title {
      min-width: 0;
      overflow: hidden;
      font-size: 14px;
      font-weight: 750;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .update-status {
      padding: 4px 8px;
      border-radius: 8px;
      background: #edf7f1;
      color: var(--green);
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
    }

    .news-title:hover {
      color: var(--berry);
    }

    .topics-section {
      padding: 74px 0;
      background: #fff5f3;
    }

    .topic-grid {
      display: grid;
      grid-template-columns: 1.15fr .92fr .92fr;
      gap: 16px;
    }

    .topic-card {
      position: relative;
      display: flex;
      min-height: 218px;
      flex-direction: column;
      justify-content: end;
      overflow: hidden;
      padding: 23px;
      border-radius: 22px;
      background: #72254b;
      color: #fff;
      isolation: isolate;
      transition: transform .22s ease, box-shadow .22s ease;
    }

    .topic-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow);
    }

    .topic-card img {
      position: absolute;
      z-index: -2;
      inset: 0;
      height: 100%;
      opacity: .76;
      transition: transform .35s ease;
    }

    .topic-card:hover img {
      transform: scale(1.035);
    }

    .topic-card::after {
      position: absolute;
      z-index: -1;
      inset: 18% 0 0;
      background: linear-gradient(0deg, rgba(38, 15, 28, .88), rgba(38, 15, 28, .02));
      content: "";
    }

    .topic-label {
      align-self: flex-start;
      margin-bottom: 9px;
      padding: 4px 9px;
      border: 1px solid rgba(255, 255, 255, .35);
      border-radius: 999px;
      background: rgba(60, 24, 43, .38);
      color: #fff3ed;
      font-size: 11px;
      font-weight: 800;
    }

    .topic-card h3 {
      margin: 0;
      font-size: 21px;
      line-height: 1.35;
    }

    .topic-card p {
      margin: 6px 0 0;
      color: rgba(255, 255, 255, .82);
      font-size: 12px;
    }

    .faq-section {
      padding: 76px 0;
    }

    .faq-layout {
      display: grid;
      grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
      gap: 56px;
    }

    .faq-intro h2 {
      margin: 9px 0 12px;
      font-size: 31px;
      line-height: 1.25;
    }

    .faq-intro p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .faq-list {
      border-top: 1px solid var(--line);
    }

    .faq-item {
      border-bottom: 1px solid var(--line);
    }

    .faq-item summary {
      position: relative;
      display: flex;
      min-height: 62px;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 14px 2px;
      color: var(--ink);
      font-size: 15px;
      font-weight: 800;
      list-style: none;
      cursor: pointer;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary::after {
      display: grid;
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      place-items: center;
      border-radius: 50%;
      background: #f8e8ed;
      color: var(--berry);
      content: "+";
      font-size: 18px;
      transition: transform .2s ease, background .2s ease;
    }

    .faq-item[open] summary::after {
      background: var(--berry);
      color: #fff;
      content: "−";
    }

    .faq-answer {
      max-width: 700px;
      padding: 0 42px 17px 2px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.85;
    }

    .closing-section {
      padding: 0 0 76px;
    }

    .closing-panel {
      position: relative;
      display: flex;
      min-height: 224px;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      overflow: hidden;
      padding: 38px 46px;
      border-radius: var(--radius-xl);
      background: linear-gradient(110deg, #4b1b38, #80284f 58%, #c65370);
      box-shadow: var(--shadow);
      color: #fff;
    }

    .closing-panel::after {
      position: absolute;
      top: -105px;
      right: 17%;
      width: 290px;
      height: 290px;
      border: 1px solid rgba(255, 255, 255, .17);
      border-radius: 50%;
      content: "";
      pointer-events: none;
    }

    .closing-copy,
    .closing-actions {
      position: relative;
      z-index: 1;
    }

    .closing-copy {
      max-width: 650px;
    }

    .closing-copy .section-kicker {
      color: #ffdcd7;
    }

    .closing-copy h2 {
      margin: 10px 0 8px;
      font-size: 31px;
      line-height: 1.25;
    }

    .closing-copy p {
      max-width: 590px;
      margin: 0;
      color: rgba(255, 255, 255, .8);
      font-size: 14px;
    }

    .closing-actions .btn {
      min-width: 164px;
      background: #fff;
      color: var(--berry-dark);
      box-shadow: 0 8px 18px rgba(46, 15, 32, .18);
    }

    .closing-actions .btn:hover {
      transform: translateY(-2px);
      background: #fff4f0;
    }

    footer {
      padding: 54px 0 20px;
      background: #321d2b;
      color: white;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.3fr 1fr 1fr 1fr;
      gap: 38px;
      padding-bottom: 38px;
    }

    .footer-brand p {
      max-width: 280px;
      margin: 15px 0 0;
      color: #d7bbc7;
      font-size: 13px;
    }

    footer h3 {
      margin: 2px 0 13px;
      color: #fff;
      font-size: 14px;
      font-weight: 800;
    }

    footer ul {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    footer li a {
      color: #d7bbc7;
      font-size: 13px;
      transition: color .2s ease;
    }

    footer li a:hover {
      color: #fff;
    }

    .copyright {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding-top: 18px;
      border-top: 1px solid rgba(255, 255, 255, .12);
      color: #c9aeba;
      font-size: 12px;
    }

    [hidden] {
      display: none !important;
    }

    @media (max-width: 1024px) {
      .container {
        width: min(var(--container), calc(100% - 40px));
      }

      .nav-wrap {
        gap: 12px;
      }

      .nav-links a {
        padding-inline: 10px;
        font-size: 13px;
      }

      .nav-note {
        display: none;
      }

      .movie-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .category-head {
        gap: 28px;
      }

      .rank-layout {
        gap: 24px;
      }

      .footer-grid {
        gap: 24px;
      }
    }

    @media (max-width: 768px) {
      html {
        scroll-padding-top: 76px;
      }

      .topbar,
      .nav-wrap {
        min-height: 68px;
      }

      .menu-toggle {
        display: inline-flex;
      }

      .nav-links {
        position: absolute;
        top: calc(100% + 1px);
        right: 20px;
        left: 20px;
        display: none;
        align-items: stretch;
        gap: 4px;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--cream);
        box-shadow: var(--shadow);
      }

      .nav-links.is-open {
        display: flex;
        flex-direction: column;
      }

      .nav-links a {
        min-height: 44px;
        justify-content: flex-start;
        padding-inline: 14px;
      }

      .category-intro {
        padding: 24px 0 28px;
      }

      .category-head {
        grid-template-columns: minmax(0, 1.1fr) minmax(220px, .9fr);
        gap: 20px;
        padding: 23px;
      }

      .category-head h1 {
        font-size: 36px;
      }

      .category-lead {
        font-size: 14px;
      }

      .category-art {
        min-height: 220px;
      }

      .section {
        padding: 58px 0;
      }

      .filter-section {
        padding: 28px 0 14px;
      }

      .filter-panel {
        grid-template-columns: 1fr;
      }

      .filter-controls {
        width: 100%;
      }

      .search-wrap {
        width: 100%;
        flex: 1 1 auto;
      }

      .rank-layout,
      .updates-grid,
      .faq-layout {
        grid-template-columns: 1fr;
        gap: 26px;
      }

      .rank-aside {
        min-height: 240px;
      }

      .topic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .topic-card:first-child {
        grid-column: span 2;
        min-height: 240px;
      }

      .faq-intro {
        max-width: 540px;
      }

      .closing-panel {
        min-height: 0;
        padding: 32px;
      }

      .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 520px) {
      .container {
        width: calc(100% - 32px);
      }

      .brand {
        gap: 9px;
        font-size: 18px;
      }

      .brand-mark {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
        border-radius: 11px;
      }

      .nav-links {
        right: 16px;
        left: 16px;
      }

      .category-head {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 20px;
        border-radius: 22px;
      }

      .category-head h1 {
        margin-top: 9px;
        font-size: 32px;
      }

      .category-lead {
        line-height: 1.75;
      }

      .category-art {
        min-height: 190px;
        border-radius: 17px;
      }

      .section-head {
        align-items: start;
        flex-direction: column;
        gap: 9px;
        margin-bottom: 21px;
      }

      .section-head h2,
      .faq-intro h2 {
        font-size: 26px;
      }

      .filter-section {
        padding-top: 20px;
      }

      .filter-panel {
        gap: 13px;
        padding: 14px;
      }

      .filter-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 2px 1px 5px;
        scrollbar-width: thin;
      }

      .filter-tab {
        flex: 0 0 auto;
      }

      .filter-controls {
        align-items: stretch;
      }

      .sort-select {
        min-width: 110px;
        width: 110px;
      }

      .catalog-section {
        padding: 22px 0 56px;
      }

      .catalog-head {
        flex-direction: row;
        align-items: end;
      }

      .catalog-count {
        max-width: 116px;
        text-align: right;
      }

      .movie-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      .movie-card {
        border-radius: 15px;
      }

      .movie-info {
        padding: 11px 10px 12px;
      }

      .movie-title {
        font-size: 14px;
      }

      .rating {
        font-size: 11px;
      }

      .movie-meta {
        font-size: 10px;
      }

      .quality-tag {
        top: 9px;
        left: 9px;
        min-height: 24px;
        padding-inline: 7px;
        font-size: 10px;
      }

      .rank-row {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: 8px;
        min-height: 62px;
        padding-inline: 12px;
      }

      .rank-genre {
        display: none;
      }

      .rank-aside {
        padding: 23px;
      }

      .rank-aside h3 {
        font-size: 24px;
      }

      .update-row {
        grid-template-columns: 54px minmax(0, 1fr) auto;
        gap: 8px;
      }

      .news-row {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 9px;
      }

      .update-name,
      .news-title {
        font-size: 12px;
      }

      .update-status {
        padding-inline: 6px;
        font-size: 10px;
      }

      .topic-grid {
        grid-template-columns: 1fr;
      }

      .topic-card,
      .topic-card:first-child {
        grid-column: auto;
        min-height: 205px;
      }

      .faq-item summary {
        min-height: 58px;
        font-size: 14px;
      }

      .faq-answer {
        padding-right: 14px;
      }

      .closing-section {
        padding-bottom: 56px;
      }

      .closing-panel {
        align-items: flex-start;
        flex-direction: column;
        padding: 27px 23px;
        border-radius: 22px;
      }

      .closing-copy h2 {
        font-size: 26px;
      }

      .footer-grid {
        gap: 26px 18px;
      }

      .copyright {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
      }
    }

    @media (max-width: 360px) {
      .container {
        width: calc(100% - 28px);
      }

      .category-head h1 {
        font-size: 29px;
      }

      .filter-controls {
        flex-direction: column;
      }

      .sort-select {
        width: 100%;
      }

      .movie-grid {
        gap: 9px;
      }

      .movie-title-row {
        flex-direction: column;
        gap: 2px;
      }

      .rank-row {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        padding-inline: 9px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }