/* roulang page: index */
:root {
            --ink: #24222a;
            --muted: #716d75;
            --paper: #f5f3f0;
            --surface: #ffffff;
            --surface-soft: #ece9e5;
            --navy: #292630;
            --coral: #d65f4a;
            --coral-dark: #b84937;
            --sage: #5d7c7a;
            --gold: #c69a4b;
            --line: #ded9d3;
            --shadow: 0 12px 28px rgba(36, 34, 42, .08);
            --radius: 8px;
            --container: 1240px;
        }
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--paper);
            font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.8;
        }
        body.menu-open { overflow: hidden; }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        button, input, select { font: inherit; }
        button { cursor: pointer; }
        :focus-visible { outline: 3px solid rgba(214,95,74,.38); outline-offset: 3px; }
        .container { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
        .skip-link {
            position: fixed; left: 16px; top: -60px; z-index: 100;
            padding: 8px 14px; background: var(--coral); color: #fff;
        }
        .skip-link:focus { top: 16px; }
        .site-header {
            position: sticky; top: 0; z-index: 50;
            background: rgba(41,38,48,.98);
            border-bottom: 1px solid rgba(255,255,255,.12);
        }
        .nav-shell {
            min-height: 74px; display: flex; align-items: center; justify-content: space-between;
            gap: 28px;
        }
        .brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; min-width: 260px; }
        .brand-mark {
            display: grid; place-items: center; width: 38px; height: 38px;
            border-radius: 7px; background: var(--coral); color: #fff; font-weight: 800; font-size: 15px;
        }
        .brand-name { font-weight: 800; letter-spacing: 0; font-size: 15px; white-space: nowrap; }
        .main-nav { display: flex; align-items: center; gap: 5px; }
        .main-nav a {
            color: #d9d4d8; padding: 9px 12px; border-radius: 6px; font-size: 14px;
            transition: .2s ease;
        }
        .main-nav a:hover, .main-nav a.active { color: #fff; background: rgba(255,255,255,.12); }
        .menu-toggle {
            display: none; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.25);
            border-radius: 6px; background: transparent; color: #fff; font-size: 20px;
        }
        .hero {
            min-height: 610px; display: flex; align-items: flex-end; position: relative;
            background-color: #38313b;
            background-image: url("https://yzvrhvjpwmzq1.cn/assets/hero-cinema.jpg");
            background-position: center; background-size: cover;
            color: #fff;
        }
        .hero::before { content: ""; position: absolute; inset: 0; background: rgba(26,23,30,.68); }
        .hero-inner { position: relative; width: 100%; padding: 120px 0 70px; }
        .hero-copy { max-width: 760px; }
        .eyebrow, .section-kicker {
            color: var(--coral); font-size: 13px; font-weight: 800; letter-spacing: 1px;
        }
        .hero h1 {
            margin: 12px 0 14px; font-size: clamp(38px, 5vw, 70px); line-height: 1.15;
            letter-spacing: 0; font-weight: 900;
        }
        .hero h1 em { color: #f2b16a; font-style: normal; }
        .hero-subtitle { margin: 0 0 18px; color: #f3e9e7; font-size: 21px; font-weight: 700; }
        .hero-desc { max-width: 690px; margin: 0 0 28px; color: #ddd6d7; font-size: 17px; }
        .button-row { display: flex; flex-wrap: wrap; gap: 12px; }
        .btn {
            display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
            padding: 9px 18px; border: 1px solid transparent; border-radius: 7px; font-weight: 800;
            transition: transform .2s, background .2s, border-color .2s;
        }
        .btn:hover { transform: translateY(-2px); }
        .btn-primary { background: var(--coral); color: #fff; }
        .btn-primary:hover { background: var(--coral-dark); }
        .btn-secondary { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
        .btn-secondary:hover { background: rgba(255,255,255,.12); }
        .hero-meta {
            display: flex; flex-wrap: wrap; gap: 18px; margin-top: 52px; padding-top: 17px;
            border-top: 1px solid rgba(255,255,255,.2); color: #ddd6d7; font-size: 13px;
        }
        .section { padding: 82px 0; }
        .section-alt { background: var(--surface-soft); }
        .section-dark { background: var(--navy); color: #fff; }
        .section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
        .section-head h2 { margin: 5px 0 0; font-size: clamp(25px, 3vw, 38px); line-height: 1.3; }
        .section-head p { max-width: 640px; margin: 0; color: var(--muted); }
        .section-dark .section-head p { color: #c8c1c5; }
        .feature-strip {
            display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }
        .feature-item { padding: 26px 25px; border-right: 1px solid var(--line); }
        .feature-item:last-child { border-right: 0; }
        .feature-icon { color: var(--coral); font-size: 24px; font-weight: 900; }
        .feature-item h3 { margin: 8px 0 4px; font-size: 19px; }
        .feature-item p { margin: 0; color: var(--muted); font-size: 14px; }
        .browse-bar {
            display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px;
            margin-bottom: 24px; border: 1px solid var(--line); background: var(--surface);
        }
        .browse-label { color: var(--muted); font-size: 13px; font-weight: 800; }
        .filter-chip {
            border: 1px solid var(--line); border-radius: 5px; padding: 6px 11px; background: #fff;
            color: var(--ink); font-size: 13px;
        }
        .filter-chip:hover, .filter-chip.selected { border-color: var(--coral); color: var(--coral); }
        .poster-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
        .poster-card {
            min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line);
            border-radius: var(--radius); transition: transform .2s, box-shadow .2s;
        }
        .poster-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
        .poster-media { position: relative; aspect-ratio: 4 / 5.25; overflow: hidden; background: #d8d2cc; }
        .poster-media img { width: 100%; height: 100%; object-fit: cover; }
        .badge {
            display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 4px;
            font-size: 11px; line-height: 1.5; font-weight: 800;
        }
        .poster-media .badge { position: absolute; top: 10px; left: 10px; }
        .badge-hd { background: #dbe9e5; color: #35615d; }
        .badge-new { background: #f5ddd5; color: #a43e2e; }
        .badge-blue { background: #e7e1ef; color: #624b75; }
        .badge-update { background: #f3e5c8; color: #876629; }
        .poster-info { padding: 13px 14px 15px; }
        .poster-title { display: block; overflow: hidden; margin-bottom: 7px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
        .poster-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
        .rating { color: var(--gold); font-weight: 800; white-space: nowrap; }
        .wide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .feature-poster { position: relative; min-height: 280px; overflow: hidden; border-radius: var(--radius); background: #302b33; }
        .feature-poster img { width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: transform .3s; }
        .feature-poster:hover img { transform: scale(1.04); }
        .feature-poster::after { content: ""; position: absolute; inset: 45% 0 0; background: rgba(20,18,23,.7); }
        .feature-poster-content { position: absolute; z-index: 1; right: 20px; bottom: 18px; left: 20px; color: #fff; }
        .feature-poster h3 { margin: 7px 0 3px; font-size: 22px; }
        .feature-poster p { margin: 0; color: #e2dadd; font-size: 13px; }
        .channel-index { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--line); background: var(--surface); }
        .channel { padding: 22px 20px; border-right: 1px solid var(--line); }
        .channel:last-child { border-right: 0; }
        .channel strong { display: block; margin-bottom: 7px; color: var(--coral); font-size: 18px; }
        .channel span { display: block; color: var(--muted); font-size: 13px; line-height: 1.65; }
        .demo-panel { display: grid; grid-template-columns: 1fr 1.2fr; gap: 26px; align-items: stretch; }
        .demo-copy { padding: 30px; background: #332e38; color: #fff; }
        .demo-copy h3 { margin: 0 0 12px; font-size: 25px; }
        .demo-copy p { margin: 0; color: #d4cbd1; }
        .demo-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
        .mini-result { display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 10px; background: #fff; border: 1px solid var(--line); }
        .mini-result img { width: 88px; height: 112px; object-fit: cover; }
        .mini-result strong { display: block; margin: 5px 0; font-size: 14px; }
        .mini-result small { color: var(--muted); font-size: 12px; }
        .feedback-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .feedback { padding: 23px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
        .feedback p { margin: 0 0 17px; color: #4a464c; }
        .feedback footer { color: var(--muted); font-size: 13px; }
        .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
        .compare-col { background: #fff; padding: 26px; }
        .compare-col.highlight { background: #f8e9e4; }
        .compare-col h3 { margin: 0 0 16px; font-size: 20px; }
        .compare-col ul { padding: 0; margin: 0; list-style: none; }
        .compare-col li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
        .compare-col li:last-child { border: 0; }
        .compare-col li::before { content: "•"; display: inline-block; margin-right: 9px; color: var(--coral); font-weight: 900; }
        .rank-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
        .rank-list { margin: 0; padding: 0; list-style: none; }
        .rank-list li { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
        .rank-no { color: #c8c1c5; font-size: 20px; font-weight: 900; }
        .rank-list li:nth-child(1) .rank-no, .rank-list li:nth-child(2) .rank-no, .rank-list li:nth-child(3) .rank-no { color: #f0bd6a; }
        .rank-name strong { display: block; color: #fff; }
        .rank-name small { color: #bdb4ba; }
        .rank-score { color: #f0bd6a; font-size: 13px; white-space: nowrap; }
        .news-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 28px; }
        .news-item { display: grid; grid-template-columns: 118px 1fr; gap: 17px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
        .news-item img { width: 118px; height: 84px; object-fit: cover; border-radius: 5px; }
        .news-item h3 { margin: 5px 0 3px; font-size: 16px; line-height: 1.45; }
        .news-item time { color: var(--muted); font-size: 12px; }
        .timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
        .timeline-item { padding: 0 20px; border-left: 2px solid var(--coral); }
        .timeline-item:first-child { border-left: 0; padding-left: 0; }
        .timeline-item time { color: var(--coral); font-size: 12px; font-weight: 800; }
        .timeline-item h3 { margin: 7px 0; font-size: 17px; }
        .timeline-item p { margin: 0; color: var(--muted); font-size: 13px; }
        .faq-list { max-width: 920px; margin: 0 auto; }
        .faq-item { border-bottom: 1px solid var(--line); }
        .faq-question {
            display: flex; justify-content: space-between; gap: 18px; width: 100%; padding: 20px 0;
            border: 0; background: transparent; color: var(--ink); text-align: left; font-weight: 800;
        }
        .faq-question span:last-child { color: var(--coral); font-size: 22px; line-height: 1; }
        .faq-answer { display: none; padding: 0 38px 20px 0; color: var(--muted); }
        .faq-item.open .faq-answer { display: block; }
        .faq-item.open .faq-question span:last-child { transform: rotate(45deg); }
        .guard-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .guard { display: flex; gap: 12px; align-items: flex-start; }
        .guard-icon { color: var(--coral); font-size: 22px; font-weight: 900; }
        .guard strong { display: block; margin-bottom: 2px; }
        .guard span { color: var(--muted); font-size: 13px; }
        .site-footer { padding: 58px 0 92px; background: var(--navy); color: #fff; }
        .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
        .footer-brand { margin-bottom: 12px; font-weight: 800; }
        .footer-copy { color: #bdb5bb; font-size: 13px; }
        .footer-col h3 { margin: 0 0 13px; color: #fff; font-size: 15px; }
        .footer-col a { display: block; margin: 7px 0; color: #bdb5bb; font-size: 13px; }
        .footer-col a:hover { color: #fff; }
        .copyright { margin-top: 42px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); color: #9e969d; font-size: 12px; }
        .fixed-cta {
            position: fixed; right: 20px; bottom: 18px; left: 20px; z-index: 40;
            display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 1060px;
            margin: auto; padding: 12px 16px 12px 20px; background: #fff; border: 1px solid var(--line);
            box-shadow: 0 10px 30px rgba(36,34,42,.18); border-radius: 8px;
        }
        .fixed-cta strong { font-size: 14px; }
        .fixed-cta small { display: block; color: var(--muted); }
        .close-cta { border: 0; background: transparent; color: var(--muted); font-size: 20px; }
        .age-modal {
            position: fixed; inset: 0; z-index: 80; display: none; place-items: center; padding: 20px;
            background: rgba(26,23,30,.72);
        }
        .age-modal.show { display: grid; }
        .age-box { width: min(480px, 100%); padding: 30px; background: #fff; border-radius: 8px; box-shadow: var(--shadow); }
        .age-box h2 { margin: 0 0 10px; font-size: 25px; }
        .age-box p { margin: 0 0 22px; color: var(--muted); }
        @media (max-width: 1100px) {
            .poster-grid { grid-template-columns: repeat(3, 1fr); }
            .channel-index { grid-template-columns: repeat(3, 1fr); }
            .channel:nth-child(3) { border-right: 0; }
            .channel:nth-child(n+4) { border-top: 1px solid var(--line); }
        }
        @media (max-width: 820px) {
            .main-nav {
                position: absolute; top: 74px; right: 20px; left: 20px; display: none;
                padding: 10px; background: var(--navy); border: 1px solid rgba(255,255,255,.2);
            }
            .main-nav.open { display: block; }
            .main-nav a { display: block; }
            .menu-toggle { display: block; }
            .brand { min-width: 0; }
            .feature-strip, .feedback-grid, .guard-strip { grid-template-columns: 1fr 1fr; }
            .feature-item:nth-child(2) { border-right: 0; }
            .feature-item:nth-child(3) { grid-column: span 2; border-top: 1px solid var(--line); }
            .demo-panel, .rank-layout { grid-template-columns: 1fr; }
            .timeline { grid-template-columns: 1fr 1fr; gap: 25px; }
            .timeline-item:nth-child(3) { border-left: 0; padding-left: 0; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 560px) {
            .container { width: min(100% - 32px, var(--container)); }
            .section { padding: 58px 0; }
            .hero { min-height: 620px; }
            .hero-inner { padding: 100px 0 42px; }
            .hero h1 { font-size: 40px; }
            .hero-subtitle { font-size: 17px; }
            .hero-desc { font-size: 15px; }
            .section-head { display: block; }
            .section-head p { margin-top: 12px; }
            .feature-strip, .poster-grid, .wide-grid, .channel-index, .feedback-grid, .guard-strip, .news-list, .footer-grid { grid-template-columns: 1fr 1fr; }
            .poster-grid { gap: 10px; }
            .poster-info { padding: 10px; }
            .poster-title { font-size: 13px; }
            .poster-meta { display: block; }
            .poster-meta .rating { display: block; margin-top: 3px; }
            .wide-grid, .news-list, .footer-grid { grid-template-columns: 1fr; }
            .channel-index { grid-template-columns: 1fr 1fr; }
            .channel { border-right: 1px solid var(--line) !important; border-top: 1px solid var(--line); }
            .channel:nth-child(-n+2) { border-top: 0; }
            .demo-results { grid-template-columns: 1fr; }
            .timeline { grid-template-columns: 1fr; }
            .timeline-item, .timeline-item:nth-child(3) { border-left: 2px solid var(--coral); padding-left: 18px; }
            .timeline-item:first-child { border-left: 0; padding-left: 0; }
            .fixed-cta { right: 10px; bottom: 10px; left: 10px; padding-left: 13px; }
            .fixed-cta .btn { min-height: 38px; padding: 7px 10px; font-size: 13px; }
        }

/* roulang page: category1 */
:root{
 --ink:#24222a;
 --muted:#716d75;
 --paper:#f5f3f0;
 --surface:#fff;
 --surface-soft:#ece9e5;
 --navy:#292630;
 --coral:#d65f4a;
 --coral-dark:#b84937;
 --sage:#5d7c7a;
 --gold:#c69a4b;
 --line:#ded9d3;
 --shadow:0 12px 28px rgba(36,34,42,.08);
 --radius:8px;
 --container:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;color:var(--ink);background:var(--paper);
 font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC",Arial,sans-serif;
 font-size:16px;line-height:1.8;
}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select{font:inherit}
button{cursor:pointer}
.container{width:min(var(--container),calc(100% - 40px));margin:0 auto}
.site-header{
 position:sticky;top:0;z-index:50;background:rgba(41,38,48,.98);
 border-bottom:1px solid rgba(255,255,255,.12)
}
.nav-shell{
 min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:28px
}
.brand{display:inline-flex;align-items:center;gap:12px;color:#fff;min-width:260px}
.brand-mark{
 display:grid;place-items:center;width:38px;height:38px;border-radius:7px;
 background:var(--coral);color:#fff;font-weight:800;font-size:15px
}
.brand-name{font-weight:800;font-size:15px;white-space:nowrap}
.main-nav{display:flex;align-items:center;gap:5px}
.main-nav a{
 color:#d9d4d8;padding:9px 12px;border-radius:6px;font-size:14px;
 transition:.2s ease
}
.main-nav a:hover,.main-nav a.active{color:#fff;background:rgba(255,255,255,.12)}
.menu-toggle{
 display:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.25);
 border-radius:6px;background:transparent;color:#fff;font-size:20px
}
.page-heading{
 padding:68px 0 56px;background:var(--navy);color:#fff;
 border-bottom:4px solid var(--coral)
}
.heading-layout{display:grid;grid-template-columns:1fr 350px;gap:44px;align-items:end}
.eyebrow,.section-kicker{
 color:var(--coral);font-size:13px;font-weight:800;letter-spacing:1px
}
.page-heading h1{
 margin:12px 0 12px;font-size:clamp(34px,5vw,62px);line-height:1.18;
 font-weight:900
}
.page-heading h1 em{color:#f2b16a;font-style:normal}
.page-heading p{max-width:760px;margin:0;color:#ddd6d7;font-size:17px}
.heading-note{
 padding:19px 20px;border:1px solid rgba(255,255,255,.2);
 background:rgba(255,255,255,.06);border-radius:var(--radius)
}
.heading-note strong{display:block;color:#fff;font-size:22px;margin-bottom:3px}
.heading-note span{color:#c8c1c5;font-size:13px}
.section{padding:78px 0}
.section-alt{background:var(--surface-soft)}
.section-dark{background:var(--navy);color:#fff}
.section-head{
 display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px
}
.section-head h2{margin:5px 0 0;font-size:clamp(25px,3vw,38px);line-height:1.3}
.section-head p{max-width:650px;margin:0;color:var(--muted)}
.section-dark .section-head p{color:#c8c1c5}
.filter-panel{
 background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
 box-shadow:var(--shadow);padding:20px
}
.filter-row{
 display:grid;grid-template-columns:repeat(6,1fr);gap:12px;align-items:end
}
.filter-group label{
 display:block;margin-bottom:5px;color:var(--muted);font-size:12px;font-weight:800
}
.filter-group select{
 width:100%;height:42px;padding:0 10px;border:1px solid var(--line);
 border-radius:6px;background:#fff;color:var(--ink);outline:none
}
.filter-group select:hover,.filter-group select:focus{
 border-color:var(--coral);box-shadow:0 0 0 3px rgba(214,95,74,.14)
}
.filter-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.btn{
 display:inline-flex;align-items:center;justify-content:center;min-height:44px;
 padding:9px 18px;border:1px solid transparent;border-radius:7px;font-weight:800;
 transition:transform .2s,background .2s,border-color .2s
}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,.filter-chip:focus-visible,.faq-question:focus-visible{
 outline:3px solid rgba(214,95,74,.35);outline-offset:2px
}
.btn-primary{background:var(--coral);color:#fff}
.btn-primary:hover{background:var(--coral-dark)}
.btn-outline{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-outline:hover{border-color:var(--coral);color:var(--coral)}
.btn-dark{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-dark:hover{background:#403b49}
.catalog-grid{
 display:grid;grid-template-columns:repeat(4,1fr);gap:18px
}
.poster-card{
 min-width:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);
 border-radius:var(--radius);transition:transform .2s,box-shadow .2s
}
.poster-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.poster-media{position:relative;aspect-ratio:4/5.25;overflow:hidden;background:#d8d2cc}
.poster-media img{width:100%;height:100%;object-fit:cover}
.poster-media:after{
 content:"";position:absolute;inset:auto 0 0;height:35%;
 background:linear-gradient(transparent,rgba(24,21,27,.55))
}
.badge{
 display:inline-flex;align-items:center;padding:2px 7px;border-radius:4px;
 font-size:11px;line-height:1.5;font-weight:800
}
.poster-media .badge{position:absolute;top:10px;left:10px;z-index:2}
.badge-hd{background:#dbe9e5;color:#35615d}
.badge-blue{background:#eee1ce;color:#8b672b}
.badge-new{background:#f6d5ce;color:#9b392b}
.badge-update{background:#e8e2ef;color:#645172}
.poster-body{padding:14px 15px 16px}
.poster-title{
 margin:0 0 7px;font-size:16px;font-weight:800;line-height:1.45;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.poster-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px}
.rating{color:var(--gold);font-weight:800;white-space:nowrap}
.index-band{
 display:flex;flex-wrap:wrap;gap:10px;padding:15px 0;border-top:1px solid var(--line);
 border-bottom:1px solid var(--line)
}
.index-label{font-weight:800;color:var(--ink);padding:6px 10px 6px 0}
.index-tag{
 padding:6px 12px;border:1px solid var(--line);border-radius:5px;background:#fff;
 color:var(--muted);font-size:13px;transition:.2s
}
.index-tag:hover,.index-tag.active{border-color:var(--coral);color:var(--coral);background:#fff9f7}
.hot-list{display:grid;grid-template-columns:1fr 1fr;gap:0 42px}
.hot-item{
 display:grid;grid-template-columns:48px 76px 1fr auto;gap:14px;align-items:center;
 padding:15px 0;border-bottom:1px solid var(--line)
}
.hot-number{font-size:23px;font-weight:900;color:#aaa2a4}
.hot-item:nth-child(-n+3) .hot-number{color:var(--coral)}
.hot-thumb{width:76px;aspect-ratio:1/1.15;overflow:hidden;border-radius:5px;background:#d8d2cc}
.hot-thumb img{width:100%;height:100%;object-fit:cover}
.hot-title{font-weight:800;line-height:1.4}
.hot-sub{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.hot-score{color:var(--gold);font-size:13px;font-weight:800;white-space:nowrap}
.update-list{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.update-item{
 padding:18px;background:var(--surface);border:1px solid var(--line);
 border-left:3px solid var(--coral);border-radius:var(--radius)
}
.update-date{color:var(--coral);font-size:12px;font-weight:800}
.update-item h3{margin:6px 0 5px;font-size:16px;line-height:1.45}
.update-item p{margin:0;color:var(--muted);font-size:13px}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-question{
 width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
 padding:18px 0;border:0;background:transparent;color:var(--ink);text-align:left;
 font-weight:800
}
.faq-question span:last-child{color:var(--coral);font-size:22px;line-height:1}
.faq-answer{display:none;max-width:850px;padding:0 40px 18px 0;color:var(--muted);font-size:14px}
.faq-item.open .faq-answer{display:block}
.faq-item.open .faq-question span:last-child{transform:rotate(45deg)}
.bottom-cta{
 padding:27px 0;background:var(--coral);color:#fff
}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.cta-inner h2{margin:0;font-size:24px;line-height:1.35}
.cta-inner p{margin:3px 0 0;color:#ffe8e3;font-size:14px}
.cta-inner .btn{background:#fff;color:var(--coral-dark);white-space:nowrap}
.site-footer{padding:55px 0 24px;background:var(--navy);color:#fff}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px}
.footer-brand{font-size:18px;font-weight:900}
.footer-copy{max-width:260px;margin-top:10px;color:#c8c1c5;font-size:13px}
.footer-col{display:flex;flex-direction:column;gap:8px}
.footer-col h3{margin:0 0 5px;color:#fff;font-size:15px}
.footer-col a{color:#c8c1c5;font-size:13px;transition:.2s}
.footer-col a:hover{color:#fff}
.copyright{
 margin-top:42px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);
 color:#aaa2a4;font-size:12px
}
@media(max-width:1100px){
 .filter-row{grid-template-columns:repeat(3,1fr)}
 .catalog-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
 .container{width:min(var(--container),calc(100% - 32px))}
 .nav-shell{min-height:68px}
 .brand{min-width:0}
 .brand-name{font-size:14px}
 .menu-toggle{display:block}
 .main-nav{
  display:none;position:absolute;top:68px;left:0;right:0;padding:10px 16px 16px;
  background:var(--navy);border-bottom:1px solid rgba(255,255,255,.12);
  flex-direction:column;align-items:stretch
 }
 .main-nav.open{display:flex}
 .main-nav a{padding:12px 14px}
 .heading-layout{grid-template-columns:1fr;gap:24px}
 .page-heading{padding:48px 0 40px}
 .section{padding:58px 0}
 .section-head{display:block}
 .section-head p{margin-top:10px}
 .catalog-grid{grid-template-columns:repeat(2,1fr);gap:12px}
 .hot-list{grid-template-columns:1fr}
 .update-list{grid-template-columns:repeat(2,1fr)}
 .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
 .page-heading h1{font-size:34px}
 .filter-row{grid-template-columns:1fr 1fr}
 .filter-panel{padding:14px}
 .poster-body{padding:11px}
 .poster-title{font-size:14px}
 .poster-meta{display:block}
 .rating{display:block;margin-top:3px}
 .hot-item{grid-template-columns:34px 62px 1fr}
 .hot-thumb{width:62px}
 .hot-score{display:none}
 .update-list{grid-template-columns:1fr}
 .cta-inner{display:block}
 .cta-inner .btn{margin-top:14px}
 .footer-grid{grid-template-columns:1fr 1fr;gap:26px 18px}
 .footer-brand{font-size:16px}
 .copyright{margin-top:30px}
}