/* roulang page: index */
:root {
            --ink: #f4f0eb;
            --muted: #a9a29d;
            --soft: #d6cbc1;
            --bg: #111010;
            --panel: #1a1818;
            --panel-2: #211e1d;
            --line: rgba(255,255,255,.1);
            --accent: #e99a62;
            --accent-2: #bd6c55;
            --olive: #aab68d;
            --shadow: 0 20px 50px rgba(0,0,0,.25);
            --radius: 18px;
            --container: 1180px;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--bg);
            font-family: "PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;
            line-height: 1.7;
            letter-spacing: 0;
            -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; width: 100%; object-fit: cover; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        :focus-visible { outline: 3px solid rgba(233,154,98,.65); outline-offset: 3px; }
        .container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--accent);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }
        .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); }
        .section-head {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 28px;
            margin-bottom: 30px;
        }
        .section-head h2 {
            max-width: 610px;
            margin: 8px 0 0;
            font-size: clamp(26px, 4vw, 42px);
            line-height: 1.2;
            letter-spacing: 0;
        }
        .section-head p { max-width: 470px; margin: 0; color: var(--muted); font-size: 14px; }
        .section { padding: 92px 0; border-top: 1px solid var(--line); }
        .section.alt { background: #151313; }
        .topbar {
            position: sticky;
            top: 0;
            z-index: 20;
            border-bottom: 1px solid var(--line);
            background: rgba(17,16,16,.9);
            backdrop-filter: blur(18px);
        }
        .nav {
            min-height: 76px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }
        .brand { display: flex; align-items: center; gap: 12px; min-width: 250px; }
        .brand-mark {
            width: 38px; height: 38px;
            display: grid; place-items: center;
            color: #151313;
            background: var(--accent);
            border-radius: 10px;
            font-size: 18px;
            font-weight: 900;
        }
        .brand-name { font-size: 16px; font-weight: 800; white-space: nowrap; }
        .nav-links { display: flex; align-items: center; gap: 24px; margin-left: auto; }
        .nav-links a {
            color: var(--muted);
            font-size: 14px;
            transition: color .2s ease;
        }
        .nav-links a:hover, .nav-links a.active { color: var(--ink); }
        .nav-cta {
            padding: 10px 16px;
            border: 1px solid rgba(233,154,98,.6);
            border-radius: 8px;
            color: var(--accent) !important;
        }
        .menu-toggle { display: none; border: 0; background: transparent; color: var(--ink); font-size: 25px; }

        .hero {
            position: relative;
            min-height: 650px;
            display: flex;
            align-items: end;
            overflow: hidden;
            background:
                linear-gradient(90deg, rgba(14,13,13,.96) 0%, rgba(14,13,13,.72) 48%, rgba(14,13,13,.2) 100%),
                url("https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=2200&q=88") center/cover;
        }
        .hero::after {
            content: "";
            position: absolute;
            inset: auto 0 0;
            height: 180px;
            background: linear-gradient(transparent, var(--bg));
        }
        .hero-inner { position: relative; z-index: 1; width: 100%; padding: 100px 0 86px; }
        .hero-copy { max-width: 760px; }
        .hero h1 {
            margin: 18px 0 18px;
            max-width: 780px;
            font-size: clamp(34px, 6vw, 68px);
            line-height: 1.1;
            letter-spacing: 0;
        }
        .hero h1 em { color: var(--accent); font-style: normal; }
        .hero-lead { max-width: 680px; color: #d7d0ca; font-size: 17px; line-height: 1.9; }
        .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
        .btn {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            min-height: 46px;
            padding: 0 21px;
            border: 1px solid transparent;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 700;
            transition: transform .2s ease, background .2s ease, border-color .2s ease;
        }
        .btn:hover { transform: translateY(-2px); }
        .btn-primary { color: #171312; background: var(--accent); }
        .btn-primary:hover { background: #f1ad79; }
        .btn-ghost { border-color: rgba(255,255,255,.23); color: var(--ink); background: rgba(255,255,255,.04); }
        .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
        .hero-note { margin-top: 22px; color: var(--muted); font-size: 12px; }

        .search-band { padding: 26px 0; background: #191716; border-bottom: 1px solid var(--line); }
        .search-row { display: flex; align-items: center; gap: 16px; }
        .search-title { margin-right: auto; font-size: 15px; font-weight: 700; }
        .search-box { display: flex; width: min(470px, 100%); }
        .search-box input {
            min-width: 0; flex: 1; height: 44px;
            padding: 0 15px; color: var(--ink);
            border: 1px solid var(--line); border-right: 0;
            border-radius: 8px 0 0 8px; background: #111010;
        }
        .search-box button { width: 92px; border: 0; border-radius: 0 8px 8px 0; color: #171312; background: var(--accent); font-weight: 700; }

        .channel-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
        .channel {
            min-height: 138px; padding: 22px 18px;
            border: 1px solid var(--line); border-radius: var(--radius);
            background: var(--panel); transition: transform .2s, border-color .2s;
        }
        .channel:hover { transform: translateY(-4px); border-color: rgba(233,154,98,.55); }
        .channel strong { display: block; margin-bottom: 10px; font-size: 17px; }
        .channel p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

        .content-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .content-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); transition: transform .25s, box-shadow .25s, border-color .25s; }
        .content-card:hover { transform: translateY(-5px); border-color: rgba(233,154,98,.5); box-shadow: var(--shadow); }
        .poster { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
        .poster img { height: 100%; transition: transform .4s ease; }
        .content-card:hover .poster img { transform: scale(1.04); }
        .poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0,0,0,.55)); pointer-events: none; }
        .badge { position: absolute; z-index: 1; top: 12px; left: 12px; padding: 4px 8px; border-radius: 5px; color: #151313; background: var(--accent); font-size: 11px; font-weight: 800; }
        .badge.cool { color: #16201c; background: var(--olive); }
        .card-body { padding: 16px; }
        .card-body h3 { overflow: hidden; margin: 0 0 9px; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; }
        .meta { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; }
        .score { color: var(--accent); font-weight: 800; }

        .feature-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: stretch; }
        .feature-main {
            min-height: 420px; padding: 34px;
            display: flex; flex-direction: column; justify-content: end;
            border-radius: var(--radius); overflow: hidden;
            background: linear-gradient(0deg, rgba(10,9,9,.9), rgba(10,9,9,.05)), url("https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?auto=format&fit=crop&w=1200&q=85") center/cover;
        }
        .feature-main h3 { max-width: 480px; margin: 10px 0; font-size: 30px; line-height: 1.25; }
        .feature-main p { max-width: 500px; margin: 0; color: var(--soft); font-size: 14px; }
        .feature-list { display: grid; gap: 12px; }
        .feature-item { display: flex; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
        .feature-item img { width: 112px; height: 84px; border-radius: 9px; }
        .feature-item h3 { margin: 2px 0 5px; font-size: 15px; }
        .feature-item p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

        .rank-layout { display: grid; grid-template-columns: 1fr .8fr; gap: 26px; }
        .rank-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
        .rank-item { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 12px; min-height: 67px; border-bottom: 1px solid var(--line); }
        .rank-num { color: var(--accent); font-size: 20px; font-weight: 800; font-style: italic; }
        .rank-name strong { display: block; font-size: 14px; }
        .rank-name small { color: var(--muted); font-size: 11px; }
        .rank-hot { color: var(--soft); font-size: 12px; text-align: right; }
        .rank-hot b { display: block; color: var(--accent); font-size: 14px; }
        .quote-panel { padding: 34px; border-radius: var(--radius); background: var(--accent-2); color: #fff4ed; }
        .quote-panel h3 { margin: 0 0 16px; font-size: 26px; line-height: 1.3; }
        .quote-panel p { margin: 0; color: #f6d9cb; font-size: 14px; }

        .resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .resource { padding: 25px; border-left: 3px solid var(--accent); background: var(--panel-2); }
        .resource h3 { margin: 0 0 8px; font-size: 18px; }
        .resource p { margin: 0; color: var(--muted); font-size: 13px; }

        .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .news-card { display: flex; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); }
        .news-card img { width: 108px; height: 78px; border-radius: 8px; }
        .news-card h3 { margin: 3px 0 8px; font-size: 14px; line-height: 1.5; }
        .news-card time { color: var(--muted); font-size: 11px; }

        .trust { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
        .trust-item { padding: 25px; border-right: 1px solid var(--line); }
        .trust-item:last-child { border-right: 0; }
        .trust-item strong { display: block; margin-bottom: 6px; color: var(--accent); font-size: 22px; }
        .trust-item span { color: var(--muted); font-size: 13px; }

        .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 36px; }
        details { padding: 18px 0; border-bottom: 1px solid var(--line); }
        summary { cursor: pointer; list-style: none; font-size: 16px; font-weight: 700; }
        summary::-webkit-details-marker { display: none; }
        summary::after { content: "+"; float: right; color: var(--accent); font-size: 20px; }
        details[open] summary::after { content: "−"; }
        details p { margin: 12px 28px 0 0; color: var(--muted); font-size: 13px; }

        .closing { padding: 84px 0; background: #1b1716; }
        .closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
        .closing h2 { max-width: 620px; margin: 0; font-size: clamp(25px, 4vw, 42px); line-height: 1.25; }
        .closing p { max-width: 520px; margin: 12px 0 0; color: var(--muted); font-size: 14px; }

        footer { padding: 60px 0 24px; border-top: 1px solid var(--line); background: #0d0c0c; }
        .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px; }
        .footer-brand p { max-width: 290px; color: var(--muted); font-size: 13px; }
        footer h3 { margin: 0 0 15px; font-size: 14px; }
        footer ul { margin: 0; padding: 0; list-style: none; }
        footer li { margin: 8px 0; color: var(--muted); font-size: 13px; }
        footer li a:hover { color: var(--accent); }
        .copyright { display: flex; justify-content: space-between; gap: 20px; margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--line); color: #716a66; font-size: 11px; }

        .age-notice { margin-top: 14px; padding: 10px 12px; border: 1px solid rgba(233,154,98,.25); border-radius: 7px; color: #c6b9b1; font-size: 11px; }

        @media (max-width: 1024px) {
            .channel-grid { grid-template-columns: repeat(3, 1fr); }
            .content-grid { grid-template-columns: repeat(3, 1fr); }
            .news-grid { grid-template-columns: repeat(2, 1fr); }
            .feature-layout, .rank-layout { grid-template-columns: 1fr; }
        }
        @media (max-width: 768px) {
            .container { width: min(var(--container), calc(100% - 32px)); }
            .nav { min-height: 68px; }
            .brand { min-width: 0; }
            .brand-name { font-size: 14px; }
            .menu-toggle { display: block; }
            .nav-links {
                position: absolute; top: 68px; left: 16px; right: 16px;
                display: none; flex-direction: column; align-items: stretch; gap: 0;
                padding: 10px; border: 1px solid var(--line); border-radius: 12px;
                background: #181515; box-shadow: var(--shadow);
            }
            .nav-links.open { display: flex; }
            .nav-links a { padding: 11px 12px; }
            .hero { min-height: 620px; background-position: 63% center; }
            .hero-inner { padding: 76px 0 65px; }
            .hero-lead { font-size: 15px; }
            .section { padding: 68px 0; }
            .section-head { display: block; }
            .section-head p { margin-top: 14px; }
            .search-row { display: block; }
            .search-title { margin-bottom: 14px; }
            .channel-grid { grid-template-columns: repeat(2, 1fr); }
            .content-grid { grid-template-columns: repeat(2, 1fr); gap: 13px; }
            .rank-list { grid-template-columns: 1fr; }
            .resource-grid { grid-template-columns: 1fr; }
            .trust { grid-template-columns: repeat(2, 1fr); }
            .trust-item:nth-child(2) { border-right: 0; }
            .trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
            .faq-grid { grid-template-columns: 1fr; }
            .closing-inner { display: block; }
            .closing .btn { margin-top: 22px; }
            .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
            .footer-grid > :last-child { grid-column: 2 / 4; }
        }
        @media (max-width: 520px) {
            .hero h1 { font-size: 36px; }
            .hero-actions .btn { width: 100%; }
            .channel-grid, .content-grid, .news-grid { grid-template-columns: 1fr; }
            .feature-main { min-height: 340px; padding: 25px; }
            .feature-item img { width: 94px; height: 72px; }
            .trust { grid-template-columns: 1fr 1fr; }
            .trust-item { padding: 18px 14px; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 25px; }
            .footer-grid > :first-child { grid-column: 1 / 3; }
            .footer-grid > :last-child { grid-column: auto; }
            .copyright { display: block; }
            .copyright span { display: block; margin-top: 7px; }
        }

/* roulang page: category1 */
:root{
 --ink:#f4f0eb;
 --muted:#a9a29d;
 --soft:#d6cbc1;
 --bg:#111010;
 --panel:#1a1818;
 --panel-2:#211e1d;
 --line:rgba(255,255,255,.1);
 --accent:#e99a62;
 --accent-2:#bd6c55;
 --olive:#aab68d;
 --shadow:0 20px 50px rgba(0,0,0,.25);
 --radius:18px;
 --container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 color:var(--ink);
 background:var(--bg);
 font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;
 line-height:1.7;
 letter-spacing:0;
 -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;object-fit:cover}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
.topbar{
 position:sticky;top:0;z-index:20;
 border-bottom:1px solid var(--line);
 background:rgba(17,16,16,.92);
 backdrop-filter:blur(18px);
}
.nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;min-width:250px}
.brand-mark{
 width:38px;height:38px;display:grid;place-items:center;color:#151313;
 background:var(--accent);border-radius:10px;font-size:18px;font-weight:900;
}
.brand-name{font-size:16px;font-weight:800;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:24px;margin-left:auto}
.nav-links a{color:var(--muted);font-size:14px;transition:color .2s ease}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links .nav-cta{
 padding:10px 16px;border:1px solid rgba(233,154,98,.6);
 border-radius:8px;color:var(--accent)!important
}
.menu-toggle{display:none;border:0;background:transparent;color:var(--ink);font-size:25px}
.eyebrow{
 display:inline-flex;align-items:center;gap:8px;color:var(--accent);
 font-size:12px;font-weight:700;letter-spacing:1.5px
}
.eyebrow:before{content:"";width:22px;height:1px;background:var(--accent)}
.section{padding:88px 0;border-top:1px solid var(--line)}
.section.alt{background:#151313}
.section-head{
 display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:30px
}
.section-head h2{max-width:620px;margin:8px 0 0;font-size:clamp(26px,4vw,42px);line-height:1.2}
.section-head p{max-width:470px;margin:0;color:var(--muted);font-size:14px}
.btn{
 display:inline-flex;justify-content:center;align-items:center;min-height:46px;
 padding:0 21px;border:1px solid transparent;border-radius:8px;font-size:14px;
 font-weight:700;transition:transform .2s ease,background .2s ease,border-color .2s ease
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{color:#171312;background:var(--accent)}
.btn-primary:hover{background:#f1ad79}
.btn-ghost{border-color:rgba(255,255,255,.23);color:var(--ink);background:rgba(255,255,255,.04)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.category-hero{
 min-height:430px;display:flex;align-items:end;position:relative;overflow:hidden;
 background:
 linear-gradient(90deg,rgba(14,13,13,.96),rgba(14,13,13,.68) 54%,rgba(14,13,13,.28)),
 url("https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?auto=format&fit=crop&w=2200&q=88") center/cover
}
.category-hero:after{
 content:"";position:absolute;inset:auto 0 0;height:130px;
 background:linear-gradient(transparent,var(--bg))
}
.hero-inner{position:relative;z-index:1;width:100%;padding:88px 0 70px}
.hero-copy{max-width:780px}
.hero h1{margin:17px 0 15px;font-size:clamp(34px,6vw,64px);line-height:1.1}
.hero h1 em{color:var(--accent);font-style:normal}
.hero-lead{max-width:700px;color:#d7d0ca;font-size:17px;line-height:1.9}
.hero-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.meta-chip{
 padding:8px 13px;border:1px solid rgba(255,255,255,.18);
 border-radius:7px;background:rgba(0,0,0,.2);color:var(--soft);font-size:13px
}
.filter-band{padding:24px 0;background:#191716;border-bottom:1px solid var(--line)}
.filter-row{display:flex;align-items:center;gap:16px}
.filter-title{margin-right:auto;font-size:15px;font-weight:700}
.search-box{display:flex;width:min(440px,100%)}
.search-box input{
 min-width:0;flex:1;height:44px;padding:0 15px;color:var(--ink);
 border:1px solid var(--line);border-right:0;border-radius:8px 0 0 8px;background:#111010
}
.search-box button{
 width:92px;border:0;border-radius:0 8px 8px 0;color:#171312;background:var(--accent);font-weight:700
}
.channel-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.channel-card{
 min-height:150px;padding:22px;border:1px solid var(--line);border-radius:14px;
 background:var(--panel);transition:transform .25s,border-color .25s,background .25s
}
.channel-card:hover{transform:translateY(-4px);border-color:rgba(233,154,98,.55);background:var(--panel-2)}
.channel-card strong{display:block;margin-bottom:10px;font-size:18px}
.channel-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.75}
.channel-card .channel-arrow{display:block;margin-top:16px;color:var(--accent);font-size:13px}
.content-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.content-card{
 overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
 transition:transform .25s,box-shadow .25s,border-color .25s
}
.content-card:hover{transform:translateY(-5px);border-color:rgba(233,154,98,.5);box-shadow:var(--shadow)}
.poster{height:238px;position:relative;overflow:hidden;background:#272322}
.poster img{height:100%;transition:transform .4s ease}
.content-card:hover .poster img{transform:scale(1.05)}
.poster:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.badge{
 position:absolute;left:12px;top:12px;z-index:1;padding:4px 8px;border-radius:5px;
 color:#181311;background:var(--accent);font-size:11px;font-weight:800
}
.card-body{padding:17px}
.card-title{margin:0 0 9px;font-size:16px}
.card-meta{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px}
.rating{color:var(--accent)}
.featured-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch}
.featured-panel{
 min-height:340px;padding:34px;display:flex;flex-direction:column;justify-content:end;
 border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:relative;
 background:
 linear-gradient(0deg,rgba(17,16,16,.96),rgba(17,16,16,.08)),
 url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1400&q=85") center/cover
}
.featured-panel h3{max-width:530px;margin:12px 0 8px;font-size:30px;line-height:1.25}
.featured-panel p{max-width:520px;margin:0;color:var(--soft);font-size:14px}
.featured-side{display:grid;gap:12px}
.info-row{
 display:flex;align-items:center;gap:17px;padding:17px;border:1px solid var(--line);
 border-radius:13px;background:var(--panel)
}
.info-row img{width:82px;height:82px;border-radius:9px}
.info-row h3{margin:0 0 4px;font-size:15px}
.info-row p{margin:0;color:var(--muted);font-size:12px}
.rank-layout{display:grid;grid-template-columns:1fr .78fr;gap:30px}
.rank-list{border-top:1px solid var(--line)}
.rank-item{
 display:grid;grid-template-columns:44px 1fr auto auto;align-items:center;gap:15px;
 min-height:65px;border-bottom:1px solid var(--line)
}
.rank-number{color:var(--accent);font-size:20px;font-weight:800}
.rank-name{font-size:14px;font-weight:700}
.rank-tag{padding:3px 7px;border:1px solid rgba(170,182,141,.45);border-radius:5px;color:var(--olive);font-size:11px}
.rank-score{color:var(--soft);font-size:13px}
.note-panel{padding:30px;border-left:2px solid var(--accent);background:#1b1817}
.note-panel h3{margin:0 0 13px;font-size:23px}
.note-panel p{margin:0;color:var(--muted);font-size:14px}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.news-card{border-bottom:1px solid var(--line);padding-bottom:18px}
.news-card img{height:155px;border-radius:12px;margin-bottom:15px}
.news-card h3{margin:0 0 5px;font-size:16px;line-height:1.45}
.news-card time{color:var(--accent);font-size:12px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.faq-item{padding:22px 24px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.faq-item h3{margin:0 0 8px;font-size:16px}
.faq-item p{margin:0;color:var(--muted);font-size:13px}
.cta-strip{
 display:flex;align-items:center;justify-content:space-between;gap:25px;
 padding:34px 38px;border:1px solid rgba(233,154,98,.35);border-radius:var(--radius);
 background:#201a17
}
.cta-strip h2{margin:0 0 8px;font-size:27px}
.cta-strip p{margin:0;color:var(--muted);font-size:14px}
footer{padding:68px 0 25px;border-top:1px solid var(--line);background:#0d0c0c}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.footer-brand p{max-width:320px;color:var(--muted);font-size:13px}
.footer-brand .brand{min-width:0}
.age-notice{
 display:inline-block;margin-top:10px;padding:7px 10px;border:1px solid rgba(233,154,98,.3);
 border-radius:6px;color:var(--accent);font-size:12px
}
footer h3{margin:0 0 14px;color:var(--soft);font-size:14px}
footer ul{padding:0;margin:0;list-style:none}
footer li{margin:7px 0}
footer li a{color:var(--muted);font-size:13px;transition:color .2s}
footer li a:hover{color:var(--accent)}
.copyright{
 display:flex;justify-content:space-between;gap:20px;margin-top:55px;padding-top:18px;
 border-top:1px solid var(--line);color:#77716d;font-size:12px
}
@media(max-width:1024px){
 .nav-links{gap:14px}
 .nav-links a{font-size:13px}
 .brand{min-width:220px}
 .channel-grid{grid-template-columns:repeat(3,1fr)}
 .content-grid{grid-template-columns:repeat(3,1fr)}
 .featured-layout,.rank-layout{grid-template-columns:1fr}
}
@media(max-width:768px){
 .container{width:min(var(--container),calc(100% - 32px))}
 .nav{min-height:68px}
 .brand-name{font-size:14px}
 .brand{min-width:0}
 .menu-toggle{display:block}
 .nav-links{
  display:none;position:absolute;left:16px;right:16px;top:76px;
  flex-direction:column;align-items:stretch;gap:0;padding:10px;
  border:1px solid var(--line);border-radius:12px;background:#1a1818;box-shadow:var(--shadow)
 }
 .nav-links.open{display:flex}
 .nav-links a{padding:11px 12px}
 .nav-links .nav-cta{text-align:center;margin-top:5px}
 .category-hero{min-height:480px}
 .hero-inner{padding:72px 0 58px}
 .section{padding:66px 0}
 .section-head{display:block}
 .section-head p{margin-top:13px}
 .filter-row{display:block}
 .filter-title{margin-bottom:13px}
 .search-box{width:100%}
 .channel-grid,.content-grid{grid-template-columns:repeat(2,1fr)}
 .news-grid{grid-template-columns:1fr 1fr}
 .footer-grid{grid-template-columns:1fr 1fr}
 .cta-strip{display:block;padding:28px}
 .cta-strip .btn{margin-top:20px}
}
@media(max-width:520px){
 .hero h1{font-size:39px}
 .hero-lead{font-size:15px}
 .channel-grid,.content-grid,.news-grid,.faq-grid{grid-template-columns:1fr}
 .poster{height:280px}
 .rank-item{grid-template-columns:34px 1fr auto}
 .rank-tag{display:none}
 .rank-score{font-size:12px}
 .footer-grid{grid-template-columns:1fr}
 .copyright{display:block}
 .copyright span{display:block;margin-top:7px}
}