/* roulang page: index */
:root{
 --ink:#f5f7fb;--muted:#a8b1c5;--dim:#748098;--bg:#0b0e18;--panel:#131827;
 --panel2:#171d2e;--line:rgba(255,255,255,.1);--lime:#d6ff4b;--cyan:#55e6dc;
 --pink:#ff6fae;--orange:#ffad5b;--radius:22px;--shadow:0 20px 60px rgba(0,0,0,.28);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.75;font-size:15px}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer;border:0}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.site-header{height:76px;display:flex;align-items:center;border-bottom:1px solid var(--line);background:rgba(11,14,24,.85);backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:30px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.5px;font-size:18px;white-space:nowrap}
.logo-mark{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--lime),var(--cyan));position:relative;box-shadow:0 0 24px rgba(214,255,75,.25)}
.logo-mark:after{content:"";position:absolute;width:12px;height:12px;border:3px solid #111827;border-left:0;border-bottom:0;transform:rotate(45deg);left:9px;top:9px}
.nav{display:flex;align-items:center;gap:8px}
.nav a{color:var(--muted);padding:9px 14px;border-radius:12px;transition:.25s}
.nav a:hover,.nav a.active{background:rgba(255,255,255,.08);color:var(--ink)}
.nav a.active{color:var(--lime)}
.nav-cta{padding:10px 17px!important;color:#101512!important;background:var(--lime)!important;font-weight:700!important}
.menu-btn{display:none;background:none;color:var(--ink);font-size:25px}
.hero{padding:68px 0 56px;background:radial-gradient(circle at 84% 18%,rgba(85,230,220,.17),transparent 28%),radial-gradient(circle at 8% 10%,rgba(255,111,174,.1),transparent 25%)}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:54px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--lime);font-size:13px;font-weight:700;letter-spacing:1px;margin-bottom:20px}
.eyebrow:before{content:"";width:28px;height:2px;background:var(--lime)}
h1{font-size:clamp(42px,6vw,76px);line-height:1.08;letter-spacing:-3px;max-width:720px}
.hero-copy{font-size:17px;color:#c5ccda;max-width:650px;margin:25px 0 29px;line-height:1.9}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:9px;border-radius:13px;padding:12px 20px;font-weight:700;transition:.25s;border:1px solid transparent}
.btn-primary{background:var(--lime);color:#101510;box-shadow:0 10px 25px rgba(214,255,75,.16)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(214,255,75,.28)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.04)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.hero-panel{background:linear-gradient(145deg,#1b2536,#101522);border:1px solid var(--line);border-radius:28px;padding:25px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero-panel:before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;background:rgba(85,230,220,.16);filter:blur(10px);right:-70px;top:-75px}
.flash{display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--orange);font-size:13px;font-weight:700;position:relative}
.timer{display:flex;gap:6px;color:var(--ink)}
.timer b{background:#293248;padding:4px 7px;border-radius:6px;font-size:13px}
.feature{margin-top:26px;border-radius:19px;padding:22px;background:linear-gradient(135deg,rgba(255,111,174,.85),rgba(75,62,155,.9));min-height:205px;display:flex;flex-direction:column;justify-content:end;position:relative;overflow:hidden}
.feature:after{content:"剧";font-size:180px;font-weight:900;position:absolute;right:16px;top:-36px;color:rgba(255,255,255,.13)}
.feature small,.feature h3,.feature p{position:relative;z-index:1}
.feature small{color:#ffe9f2}.feature h3{font-size:27px;margin:5px 0}.feature p{font-size:13px;color:#f5dce8}
.panel-foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px;color:var(--muted);font-size:13px}
.panel-foot strong{color:var(--lime);font-size:19px}
section{padding:76px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:28px}
.section-head h2{font-size:30px;line-height:1.25;letter-spacing:-1px}
.section-head p{color:var(--muted);max-width:590px;margin-top:9px}
.section-link{color:var(--lime);white-space:nowrap;font-weight:700}
.dark-section{background:#0e1320;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}
.channel-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}
.channel{min-height:142px;border:1px solid var(--line);border-radius:18px;padding:19px;background:linear-gradient(145deg,#151c2b,#10141f);transition:.25s}
.channel:hover{transform:translateY(-5px);border-color:rgba(214,255,75,.45)}
.channel i{font-style:normal;font-size:25px}.channel h3{font-size:17px;margin:10px 0 3px}.channel p{font-size:12px;color:var(--muted)}
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.drama-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.25s}
.drama-card:hover{transform:translateY(-5px);box-shadow:0 14px 35px rgba(0,0,0,.25);border-color:rgba(85,230,220,.45)}
.poster{height:170px;padding:15px;display:flex;align-items:end;position:relative;overflow:hidden}
.poster:before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(8,10,18,.8))}
.poster span,.poster em{position:relative;z-index:1}
.poster span{font-weight:800;font-size:19px}.poster em{position:absolute;top:12px;right:12px;font-style:normal;font-size:11px;background:var(--lime);color:#111;padding:3px 7px;border-radius:5px}
.p1{background:linear-gradient(135deg,#3d4a85,#d15e91)}.p2{background:linear-gradient(135deg,#294d5e,#df924f)}.p3{background:linear-gradient(135deg,#602d52,#271d54)}.p4{background:linear-gradient(135deg,#23665e,#1b294d)}.p5{background:linear-gradient(135deg,#776329,#b4384f)}.p6{background:linear-gradient(135deg,#34365c,#6c99b5)}
.card-body{padding:14px 15px}.card-body h3{font-size:16px}.card-body p{font-size:12px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{display:flex;justify-content:space-between;color:var(--dim);font-size:12px;margin-top:12px}.hot{color:var(--orange)}
.recommend{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
.spotlight{border-radius:22px;padding:30px;background:linear-gradient(120deg,#25345e,#192033);min-height:260px;position:relative;overflow:hidden}
.spotlight:after{content:"精选";position:absolute;right:-15px;bottom:-38px;font-size:130px;font-weight:900;color:rgba(255,255,255,.06)}
.spotlight h3{font-size:28px;max-width:360px;line-height:1.3}.spotlight p{color:#c4ccdc;max-width:390px;margin:12px 0 23px}
.mini-list{display:grid;gap:10px}.mini-item{display:flex;align-items:center;gap:14px;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:15px}.mini-num{font-size:23px;color:var(--lime);font-weight:800;width:30px}.mini-item h4{font-size:15px}.mini-item p{font-size:12px;color:var(--muted)}
.rank-layout{display:grid;grid-template-columns:1fr 1fr;gap:22px}.rank-list{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:8px 20px}.rank-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}.rank-row:last-child{border:0}.rank-no{font-size:18px;font-weight:800;color:var(--dim)}.rank-row:first-child .rank-no,.rank-row:nth-child(2) .rank-no,.rank-row:nth-child(3) .rank-no{color:var(--orange)}.rank-row strong{font-size:14px}.rank-row small{display:block;color:var(--muted);font-size:11px}.score{color:var(--lime);font-weight:700}
.promise{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.promise-item{padding:23px;border-radius:18px;background:#151b2a;border:1px solid var(--line)}.promise-item b{display:block;color:var(--cyan);font-size:25px;margin-bottom:7px}.promise-item h3{font-size:16px}.promise-item p{color:var(--muted);font-size:13px;margin-top:5px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}.steps:before{content:"";position:absolute;top:25px;left:9%;right:9%;height:1px;background:var(--line)}.step{position:relative;text-align:center;padding:0 15px}.step-num{display:grid;place-items:center;margin:0 auto 18px;width:50px;height:50px;border-radius:50%;background:var(--lime);color:#101510;font-weight:800;position:relative;z-index:1}.step h3{font-size:16px}.step p{font-size:13px;color:var(--muted);margin-top:5px}
.news-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px}.news-feature{padding:28px;border-radius:20px;background:linear-gradient(135deg,#332a52,#171d30);min-height:245px}.news-feature label{color:var(--pink);font-size:12px}.news-feature h3{font-size:27px;line-height:1.35;margin:22px 0 10px;max-width:430px}.news-feature p{color:var(--muted)}.news-list{display:grid;gap:0}.news-item{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line)}.news-item h3{font-size:14px;font-weight:600}.news-item span{font-size:12px;color:var(--dim);white-space:nowrap}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}.stat{background:var(--panel);padding:25px}.stat b{font-size:34px;color:var(--lime);letter-spacing:-1px}.stat span{display:block;color:var(--muted);font-size:13px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.faq{border:1px solid var(--line);border-radius:16px;padding:21px;background:var(--panel)}.faq h3{font-size:16px}.faq p{color:var(--muted);font-size:13px;margin-top:8px}
.cta{padding:60px 0}.cta-box{border-radius:25px;padding:42px 48px;background:linear-gradient(100deg,#d6ff4b,#8ddfbc);color:#101510;display:flex;align-items:center;justify-content:space-between;gap:25px}.cta-box h2{font-size:31px;line-height:1.25}.cta-box p{margin-top:8px;max-width:620px}.cta-box .btn{background:#101827;color:#fff}
footer{border-top:1px solid var(--line);padding:42px 0 24px;color:var(--muted)}.footer-top{display:flex;justify-content:space-between;gap:30px}.footer-brand p{max-width:370px;font-size:13px;margin-top:12px}.footer-links{display:flex;gap:45px}.footer-links h4{color:var(--ink);margin-bottom:10px}.footer-links a{display:block;font-size:13px;margin:6px 0;transition:.2s}.footer-links a:hover{color:var(--lime)}.copyright{border-top:1px solid var(--line);margin-top:30px;padding-top:20px;font-size:12px;display:flex;justify-content:space-between;gap:15px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
@media(max-width:1024px){.hero-grid{gap:30px}.channel-grid{grid-template-columns:repeat(3,1fr)}.card-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.container{width:min(100% - 28px,620px)}.site-header{height:68px}.menu-btn{display:block}.nav{display:none;position:absolute;top:68px;left:14px;right:14px;background:#171d2d;border:1px solid var(--line);padding:12px;border-radius:16px;flex-direction:column;align-items:stretch}.nav.open{display:flex}.nav a{padding:12px}.hero{padding:48px 0}.hero-grid,.recommend,.rank-layout,.news-grid{grid-template-columns:1fr}.hero-panel{margin-top:12px}.card-grid{grid-template-columns:repeat(2,1fr)}.promise,.stats{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr);gap:28px}.steps:before{display:none}.footer-top{flex-direction:column}.section-head{align-items:start;flex-direction:column;gap:10px}}
@media(max-width:520px){h1{font-size:42px;letter-spacing:-2px}.hero-copy{font-size:15px}.channel-grid{grid-template-columns:repeat(2,1fr)}.channel{min-height:125px;padding:15px}.card-grid{gap:10px}.poster{height:145px}.card-body{padding:11px}.promise,.stats,.faq-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.cta-box{padding:30px 23px;display:block}.cta-box h2{font-size:25px}.cta-box .btn{margin-top:20px}.footer-links{gap:25px;flex-wrap:wrap}.copyright{display:block}.copyright span{display:block;margin-top:6px}}

/* roulang page: category1 */
:root{
 --ink:#f5f7fb;--muted:#a8b1c5;--dim:#748098;--bg:#0b0e18;--panel:#131827;
 --panel2:#171d2e;--line:rgba(255,255,255,.1);--lime:#d6ff4b;--cyan:#55e6dc;
 --pink:#ff6fae;--orange:#ffad5b;--radius:22px;--shadow:0 20px 60px rgba(0,0,0,.28)
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.75;font-size:15px}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer;border:0}
img{display:block;width:100%;object-fit:cover}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.site-header{height:76px;display:flex;align-items:center;border-bottom:1px solid var(--line);background:rgba(11,14,24,.85);backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:30px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.5px;font-size:18px;white-space:nowrap}
.logo-mark{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--lime),var(--cyan));position:relative;box-shadow:0 0 24px rgba(214,255,75,.25)}
.logo-mark:after{content:"";position:absolute;width:12px;height:12px;border:3px solid #111827;border-left:0;border-bottom:0;transform:rotate(45deg);left:9px;top:9px}
.nav{display:flex;align-items:center;gap:8px}
.nav a{color:var(--muted);padding:9px 14px;border-radius:12px;transition:.25s}
.nav a:hover,.nav a.active{background:rgba(255,255,255,.08);color:var(--ink)}
.nav a.active{color:var(--lime)}
.nav-cta{padding:10px 17px!important;color:#101512!important;background:var(--lime)!important;font-weight:700!important}
.menu-btn{display:none;background:none;color:var(--ink);font-size:25px}
.hero{padding:72px 0 64px;background:radial-gradient(circle at 82% 12%,rgba(255,111,174,.18),transparent 28%),radial-gradient(circle at 10% 30%,rgba(85,230,220,.12),transparent 25%)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:55px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--lime);font-size:13px;font-weight:700;letter-spacing:1px;margin-bottom:20px}
.eyebrow:before{content:"";width:28px;height:2px;background:var(--lime)}
h1{font-size:clamp(38px,5vw,66px);line-height:1.12;letter-spacing:-2px}
.hero-copy{font-size:17px;color:#c5ccda;max-width:630px;margin:24px 0 29px;line-height:1.9}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:9px;border-radius:13px;padding:12px 20px;font-weight:700;transition:.25s;border:1px solid transparent}
.btn-primary{background:var(--lime);color:#101510;box-shadow:0 10px 25px rgba(214,255,75,.16)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(214,255,75,.28)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.04)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.hero-poster{height:430px;border-radius:28px;overflow:hidden;position:relative;border:1px solid var(--line);box-shadow:var(--shadow);background:#202337}
.hero-poster img{height:100%;filter:saturate(.85)}
.hero-poster:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,10,19,.9),transparent 65%)}
.poster-copy{position:absolute;z-index:1;bottom:25px;left:26px;right:26px}
.poster-copy span{color:var(--lime);font-size:12px;font-weight:700}
.poster-copy h2{font-size:30px;line-height:1.3;margin:6px 0}
.poster-copy p{color:#d4d9e3;font-size:13px}
.hot-badge{position:absolute;z-index:2;right:20px;top:20px;background:var(--pink);color:#fff;border-radius:99px;padding:7px 13px;font-weight:700;font-size:12px}
section{padding:76px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:28px}
.section-head h2{font-size:30px;line-height:1.25;letter-spacing:-1px}
.section-head p{color:var(--muted);max-width:610px;margin-top:9px}
.section-link{color:var(--lime);white-space:nowrap;font-weight:700}
.dark-section{background:#0e1320;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}
.intro-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}
.intro-box{padding:30px;border-radius:22px;background:linear-gradient(135deg,#171d2e,#111622);border:1px solid var(--line)}
.intro-box h3{font-size:23px;margin-bottom:12px}
.intro-box p{color:var(--muted)}
.stat-box{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{padding:24px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}
.stat strong{font-size:30px;color:var(--cyan);display:block}
.stat span{font-size:13px;color:var(--muted)}
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.drama-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.25s}
.drama-card:hover{transform:translateY(-5px);box-shadow:0 14px 35px rgba(0,0,0,.25);border-color:rgba(85,230,220,.45)}
.poster{height:230px;position:relative;overflow:hidden}
.poster img{height:100%;transition:.35s}
.drama-card:hover .poster img{transform:scale(1.05)}
.poster-tag{position:absolute;left:12px;top:12px;padding:5px 9px;border-radius:8px;background:rgba(11,14,24,.76);color:var(--lime);font-size:11px}
.card-body{padding:14px 15px}
.card-body h3{font-size:16px}
.card-body p{font-size:12px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{display:flex;justify-content:space-between;color:var(--dim);font-size:12px;margin-top:12px}
.channel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.channel{padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--panel);transition:.25s}
.channel:hover{background:var(--panel2);border-color:rgba(214,255,75,.5);transform:translateY(-3px)}
.channel b{display:block;color:var(--lime);font-size:23px;margin-bottom:8px}
.channel h3{font-size:16px}
.channel p{font-size:13px;color:var(--muted);margin-top:5px}
.feature-row{display:grid;grid-template-columns:.9fr 1.1fr;gap:26px;align-items:stretch}
.feature-image{min-height:350px;border-radius:22px;overflow:hidden;position:relative}
.feature-image img{height:100%}
.feature-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,9,17,.7),transparent 60%)}
.feature-label{position:absolute;z-index:1;left:22px;bottom:20px;color:#fff;font-size:13px}
.feature-content{padding:30px;border:1px solid var(--line);border-radius:22px;background:var(--panel)}
.feature-content h3{font-size:29px;line-height:1.35;margin:12px 0}
.feature-content p{color:var(--muted);line-height:1.9}
.quote{margin-top:24px;padding:16px 18px;border-left:3px solid var(--pink);background:rgba(255,111,174,.07);color:#e7c9d7}
.mini-list{display:grid;gap:10px}
.mini-item{display:flex;align-items:center;gap:14px;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:15px;transition:.2s}
.mini-item:hover{border-color:var(--cyan)}
.mini-no{width:30px;color:var(--orange);font-size:20px;font-weight:800}
.mini-item h4{font-size:15px}
.mini-item p{font-size:12px;color:var(--muted)}
.news-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px}
.news-feature{padding:28px;border-radius:20px;background:linear-gradient(135deg,#332a52,#171d30);min-height:245px}
.news-feature label{color:var(--pink);font-size:12px}
.news-feature h3{font-size:27px;line-height:1.35;margin:22px 0 10px;max-width:430px}
.news-feature p{color:var(--muted)}
.news-list{display:grid;gap:0}
.news-item{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line)}
.news-item h3{font-size:14px;font-weight:600}
.news-item span{font-size:12px;color:var(--dim);white-space:nowrap}
.cta{padding:60px 0}
.cta-box{border-radius:25px;padding:42px 48px;background:linear-gradient(100deg,#273546,#18232c);border:1px solid rgba(85,230,220,.25);display:flex;justify-content:space-between;align-items:center;gap:25px}
.cta-box h2{font-size:29px}
.cta-box p{color:var(--muted);margin-top:7px}
footer{padding:48px 0 24px;border-top:1px solid var(--line);background:#090c14}
.footer-top{display:flex;justify-content:space-between;gap:40px}
.footer-brand{max-width:390px}
.footer-brand p{color:var(--muted);font-size:13px;margin-top:16px}
.footer-links{display:flex;gap:80px}
.footer-links div{display:flex;flex-direction:column;gap:8px}
.footer-links h4{font-size:14px;color:var(--ink);margin-bottom:6px}
.footer-links a{color:var(--muted);font-size:13px;transition:.2s}
.footer-links a:hover{color:var(--lime)}
.copyright{display:flex;justify-content:space-between;gap:20px;margin-top:42px;padding-top:18px;border-top:1px solid var(--line);color:var(--dim);font-size:12px}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
@media(max-width:1024px){
 .hero-grid,.feature-row{gap:28px}.card-grid{grid-template-columns:repeat(3,1fr)}
 .hero-poster{height:390px}
}
@media(max-width:768px){
 .container{width:min(100% - 30px,620px)}
 .site-header{height:68px}.menu-btn{display:block}
 .nav{display:none;position:absolute;top:68px;left:15px;right:15px;padding:12px;flex-direction:column;align-items:stretch;background:#121827;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
 .nav.open{display:flex}.nav a{padding:12px 14px}
 .hero{padding:52px 0 45px}.hero-grid,.intro-grid,.feature-row,.news-grid{grid-template-columns:1fr}
 h1{font-size:43px}.hero-poster{height:360px}
 section{padding:57px 0}.section-head{display:block}.section-link{display:inline-block;margin-top:15px}
 .card-grid{grid-template-columns:repeat(2,1fr)}.channel-grid{grid-template-columns:repeat(2,1fr)}
 .footer-top{display:block}.footer-links{margin-top:30px;gap:55px}.copyright{display:block}.copyright span{display:block;margin-top:5px}
 .cta-box{display:block;padding:32px 25px}.cta-box .btn{margin-top:22px}
}
@media(max-width:520px){
 .logo{font-size:15px}.logo-mark{width:30px;height:30px}
 .hero-poster{height:310px}.poster-copy h2{font-size:24px}
 .card-grid{gap:11px}.poster{height:190px}.card-body{padding:11px}
 .channel-grid{grid-template-columns:1fr 1fr;gap:10px}.channel{padding:17px 14px}
 .stat-box{gap:9px}.stat{padding:17px 13px}.stat strong{font-size:24px}
 .section-head h2{font-size:25px}.intro-box{padding:22px}
 .footer-links{gap:30px}.footer-links div{min-width:105px}
}

/* roulang page: category2 */
:root{
      --ink:#f5f7fb;--muted:#a8b1c5;--dim:#748098;--bg:#0b0e18;--panel:#131827;
      --panel2:#171d2e;--line:rgba(255,255,255,.1);--lime:#d6ff4b;--cyan:#55e6dc;
      --pink:#ff6fae;--orange:#ffad5b;--radius:22px;--shadow:0 20px 60px rgba(0,0,0,.28);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:90px}
    body{margin:0;font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.75;font-size:15px}
    a{color:inherit;text-decoration:none}
    button,input{font:inherit}
    button{cursor:pointer;border:0}
    img{display:block;max-width:100%}
    h1,h2,h3,h4,p{margin:0}
    :focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
    .container{width:min(1180px,calc(100% - 40px));margin:0 auto}
    .site-header{height:76px;display:flex;align-items:center;border-bottom:1px solid var(--line);background:rgba(11,14,24,.9);backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}
    .nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:30px}
    .logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px;white-space:nowrap}
    .logo-mark{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--lime),var(--cyan));position:relative;box-shadow:0 0 24px rgba(214,255,75,.25);flex:none}
    .logo-mark:after{content:"";position:absolute;width:12px;height:12px;border:3px solid #111827;border-left:0;border-bottom:0;transform:rotate(45deg);left:9px;top:9px}
    .nav{display:flex;align-items:center;gap:8px}
    .nav a{color:var(--muted);padding:9px 14px;border-radius:12px;transition:background .2s,color .2s}
    .nav a:hover,.nav a.active{background:rgba(255,255,255,.08);color:var(--ink)}
    .nav a.active{color:var(--lime)}
    .nav .nav-cta{padding:10px 17px;color:#101512;background:var(--lime);font-weight:700}
    .nav .nav-cta:hover{background:#e3ff82;color:#101512}
    .menu-btn{display:none;background:none;color:var(--ink);font-size:25px;padding:6px}
    .hero{padding:58px 0 54px;background:radial-gradient(circle at 87% 12%,rgba(85,230,220,.13),transparent 28%),radial-gradient(circle at 9% 20%,rgba(255,111,174,.1),transparent 25%)}
    .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--lime);font-size:13px;font-weight:700;margin-bottom:15px}
    .eyebrow:before{content:"";width:28px;height:2px;background:var(--lime)}
    .hero h1{font-size:clamp(34px,4.2vw,54px);line-height:1.2;max-width:650px}
    .hero-copy{font-size:16px;color:#c5ccda;max-width:630px;margin:19px 0 24px;line-height:1.9}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .btn{display:inline-flex;justify-content:center;align-items:center;gap:9px;border-radius:13px;padding:12px 20px;font-weight:700;transition:transform .2s,background .2s,box-shadow .2s;border:1px solid transparent}
    .btn-primary{background:var(--lime);color:#101510;box-shadow:0 10px 25px rgba(214,255,75,.16)}
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(214,255,75,.28)}
    .btn-ghost{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.04)}
    .btn-ghost:hover{background:rgba(255,255,255,.1)}
    .hero-panel{background:linear-gradient(145deg,#1b2536,#101522);border:1px solid var(--line);border-radius:24px;padding:23px;box-shadow:var(--shadow)}
    .panel-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:15px;border-bottom:1px solid var(--line)}
    .panel-top strong{font-size:15px}
    .live-tag{font-size:11px;color:var(--lime);border:1px solid rgba(214,255,75,.32);border-radius:30px;padding:4px 9px}
    .rank-list{display:grid;gap:0;padding-top:7px}
    .rank-row{display:grid;grid-template-columns:35px 1fr auto;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
    .rank-row:last-child{border:0}
    .rank-no{color:var(--dim);font-size:14px;font-weight:800}
    .rank-row:nth-child(-n+3) .rank-no{color:var(--orange)}
    .rank-row strong{font-size:14px;display:block}
    .rank-row small{display:block;color:var(--muted);font-size:12px}
    .rank-score{font-size:12px;color:var(--cyan);white-space:nowrap}
    section{padding:62px 0;border-top:1px solid rgba(255,255,255,.045)}
    .dark-section{background:#0e1320}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:27px}
    .section-head h2{font-size:29px;line-height:1.3}
    .section-head p{color:var(--muted);max-width:590px;margin-top:8px}
    .section-link{color:var(--lime);font-weight:700;white-space:nowrap}
    .section-link:hover{color:var(--cyan)}
    .split-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:42px;align-items:center}
    .story-image{position:relative;min-height:340px;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#202638}
    .story-image img{width:100%;height:100%;min-height:340px;object-fit:cover;filter:saturate(.82)}
    .story-image:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(7,10,18,.8))}
    .image-caption{position:absolute;z-index:1;left:22px;bottom:19px;color:white}
    .image-caption small{color:#d7dce7}
    .image-caption strong{display:block;font-size:21px}
    .story-copy h3{font-size:24px;line-height:1.45;margin-bottom:12px}
    .story-copy p{color:var(--muted);line-height:1.9}
    .story-points{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:22px}
    .story-point{padding:15px;background:var(--panel);border-left:2px solid var(--cyan);border-radius:0 12px 12px 0}
    .story-point strong{display:block;font-size:14px}
    .story-point span{display:block;color:var(--muted);font-size:12px;margin-top:3px}
    .genre-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .genre-item{min-height:165px;padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;justify-content:space-between;transition:.2s}
    .genre-item:hover{transform:translateY(-3px);border-color:rgba(85,230,220,.45)}
    .genre-no{font-size:12px;color:var(--pink);font-weight:700}
    .genre-item h3{font-size:18px;margin-top:17px}
    .genre-item p{font-size:13px;color:var(--muted);margin-top:4px}
    .genre-arrow{align-self:flex-end;color:var(--lime);font-size:19px}
    .update-strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel)}
    .update-cell{padding:22px 24px;border-right:1px solid var(--line)}
    .update-cell:last-child{border:0}
    .update-cell span{color:var(--cyan);font-size:12px;font-weight:700}
    .update-cell h3{font-size:17px;margin:7px 0 5px}
    .update-cell p{color:var(--muted);font-size:13px}
    .drama-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .drama-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.25s}
    .drama-card:hover{transform:translateY(-4px);box-shadow:0 14px 35px rgba(0,0,0,.25);border-color:rgba(85,230,220,.45)}
    .poster{height:170px;position:relative;overflow:hidden;background:#202638}
    .poster img{height:100%;width:100%;object-fit:cover;transition:transform .35s}
    .drama-card:hover .poster img{transform:scale(1.04)}
    .poster-tag{position:absolute;left:12px;top:12px;padding:4px 9px;border-radius:8px;background:rgba(11,14,24,.78);color:var(--lime);font-size:11px}
    .card-body{padding:15px}
    .card-body h3{font-size:16px}
    .card-body p{font-size:13px;color:var(--muted);margin-top:5px}
    .meta{display:flex;justify-content:space-between;color:var(--dim);font-size:12px;margin-top:13px}
    .news-list{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
    .news-item{display:flex;justify-content:space-between;gap:18px;padding:17px 0;border-bottom:1px solid var(--line)}
    .news-item h3{font-size:15px;font-weight:600}
    .news-item p{font-size:12px;color:var(--muted);margin-top:4px}
    .news-item time{font-size:12px;color:var(--dim);white-space:nowrap;padding-top:3px}
    .quote-band{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:32px;background:linear-gradient(120deg,#172334,#171827);border:1px solid var(--line);border-radius:20px}
    .quote-band blockquote{font-size:20px;line-height:1.65;margin:0}
    .quote-band cite{display:block;color:var(--muted);font-size:13px;font-style:normal;margin-top:10px}
    .quote-mark{font-size:64px;line-height:1;color:var(--pink);font-weight:800}
    .cta{padding:62px 0}
    .cta-box{padding:34px 38px;border-radius:21px;background:#d6ff4b;color:#101510;display:flex;justify-content:space-between;align-items:center;gap:24px}
    .cta-box h2{font-size:25px}
    .cta-box p{margin-top:6px;color:#343d28}
    .cta-box .btn{background:#101510;color:var(--ink);white-space:nowrap}
    footer{border-top:1px solid var(--line);background:#090c14;padding:48px 0 20px}
    .footer-top{display:flex;justify-content:space-between;gap:50px;padding-bottom:34px}
    .footer-brand{max-width:390px}
    .footer-brand p{color:var(--muted);margin-top:15px;line-height:1.8}
    .footer-links{display:flex;gap:70px}
    .footer-links h4{font-size:14px;margin-bottom:12px}
    .footer-links a{display:block;color:var(--muted);font-size:13px;margin:8px 0;transition:color .2s}
    .footer-links a:hover{color:var(--lime)}
    .copyright{border-top:1px solid var(--line);padding-top:17px;display:flex;justify-content:space-between;gap:15px;color:var(--dim);font-size:12px}
    @media(max-width:1024px){
      .hero-grid{gap:30px}
      .genre-grid{grid-template-columns:repeat(2,1fr)}
      .drama-grid{grid-template-columns:repeat(2,1fr)}
      .split-layout{gap:28px}
    }
    @media(max-width:768px){
      .site-header{height:68px}
      .menu-btn{display:block}
      .nav{display:none;position:absolute;top:67px;left:0;right:0;padding:12px 20px 18px;background:#0d111d;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:4px}
      .nav.open{display:flex}
      .nav a{padding:11px 13px}
      .hero{padding:42px 0}
      .hero-grid,.split-layout{grid-template-columns:1fr}
      .hero-panel{max-width:600px}
      section{padding:48px 0}
      .story-image,.story-image img{min-height:280px}
      .quote-band{grid-template-columns:1fr}
      .quote-mark{display:none}
      .footer-top{flex-direction:column;gap:30px}
      .footer-links{gap:50px}
    }
    @media(max-width:520px){
      .container{width:min(100% - 30px,1180px)}
      .logo{font-size:16px;gap:8px}
      .logo-mark{width:31px;height:31px}
      .hero h1{font-size:34px}
      .hero-copy{font-size:14px}
      .hero-actions .btn{width:100%}
      .section-head{align-items:flex-start;flex-direction:column;gap:9px}
      .section-head h2{font-size:25px}
      .genre-grid,.drama-grid,.news-list{grid-template-columns:1fr}
      .genre-item{min-height:138px}
      .story-points{grid-template-columns:1fr}
      .update-strip{grid-template-columns:1fr}
      .update-cell{border-right:0;border-bottom:1px solid var(--line)}
      .update-cell:last-child{border-bottom:0}
      .poster{height:195px}
      .quote-band{padding:23px}
      .quote-band blockquote{font-size:17px}
      .cta-box{padding:25px 22px;align-items:flex-start;flex-direction:column}
      .footer-links{gap:30px}
      .copyright{flex-direction:column}
    }

/* roulang page: category3 */
:root{
 --ink:#f5f7fb;--muted:#a8b1c5;--dim:#748098;--bg:#0b0e18;--panel:#131827;
 --panel2:#171d2e;--line:rgba(255,255,255,.1);--lime:#d6ff4b;--cyan:#55e6dc;
 --pink:#ff6fae;--orange:#ffad5b;--violet:#9d83ff;--radius:22px;
 --shadow:0 20px 60px rgba(0,0,0,.28)
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.75;font-size:15px}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer;border:0}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.site-header{height:76px;display:flex;align-items:center;border-bottom:1px solid var(--line);background:rgba(11,14,24,.86);backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:30px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.5px;font-size:18px;white-space:nowrap}
.logo-mark{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--lime),var(--cyan));position:relative;box-shadow:0 0 24px rgba(214,255,75,.25)}
.logo-mark:after{content:"";position:absolute;width:12px;height:12px;border:3px solid #111827;border-left:0;border-bottom:0;transform:rotate(45deg);left:9px;top:9px}
.nav{display:flex;align-items:center;gap:8px}
.nav a{color:var(--muted);padding:9px 14px;border-radius:12px;transition:.25s}
.nav a:hover,.nav a.active{background:rgba(255,255,255,.08);color:var(--ink)}
.nav a.active{color:var(--lime)}
.nav-cta{padding:10px 17px!important;color:#101512!important;background:var(--lime)!important;font-weight:700!important}
.menu-btn{display:none;background:none;color:var(--ink);font-size:25px}
.hero{padding:72px 0 58px;background:radial-gradient(circle at 80% 10%,rgba(157,131,255,.2),transparent 27%),radial-gradient(circle at 8% 20%,rgba(255,111,174,.1),transparent 25%);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:55px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--lime);font-size:13px;font-weight:700;letter-spacing:1px;margin-bottom:18px}
.eyebrow:before{content:"";width:28px;height:2px;background:var(--lime)}
h1{font-size:clamp(38px,5vw,68px);line-height:1.14;letter-spacing:-3px;max-width:700px}
.hero-copy{font-size:17px;color:#c5ccda;max-width:650px;margin:23px 0 28px;line-height:1.9}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:9px;border-radius:13px;padding:12px 20px;font-weight:700;transition:.25s;border:1px solid transparent}
.btn-primary{background:var(--lime);color:#101510;box-shadow:0 10px 25px rgba(214,255,75,.16)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(214,255,75,.28)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.04)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.hero-panel{background:linear-gradient(145deg,#24213d,#101522);border:1px solid var(--line);border-radius:28px;padding:24px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero-panel:before{content:"悬";position:absolute;right:-5px;top:-38px;color:rgba(255,255,255,.07);font-size:210px;font-weight:900;line-height:1}
.panel-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px}
.live-dot{display:inline-flex;align-items:center;gap:7px;color:var(--lime)}
.live-dot:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}
.feature{margin-top:25px;border-radius:19px;padding:23px;background:linear-gradient(135deg,rgba(79,57,126,.95),rgba(184,71,125,.88));min-height:215px;display:flex;flex-direction:column;justify-content:end;position:relative;overflow:hidden}
.feature:after{content:"谜";font-size:180px;font-weight:900;position:absolute;right:18px;top:-33px;color:rgba(255,255,255,.13)}
.feature small,.feature h3,.feature p{position:relative;z-index:1}
.feature small{color:#efe7ff}
.feature h3{font-size:28px;margin:5px 0}
.feature p{font-size:13px;color:#eadff3;max-width:320px}
.countdown{display:flex;gap:9px;margin-top:18px}
.time-box{min-width:58px;padding:8px 6px;text-align:center;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.2)}
.time-box b{display:block;font-size:19px;color:var(--cyan);line-height:1.2}
.time-box span{font-size:10px;color:var(--muted)}
section{padding:76px 0}
.dark-section{background:#0e1320;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:28px}
.section-head h2{font-size:30px;line-height:1.25;letter-spacing:-1px}
.section-head p{color:var(--muted);max-width:600px;margin-top:9px}
.section-link{color:var(--lime);white-space:nowrap;font-weight:700}
.story-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}
.story-main{min-height:290px;border:1px solid var(--line);border-radius:22px;padding:29px;background:linear-gradient(135deg,#29213f,#171b2c);position:relative;overflow:hidden}
.story-main:after{content:"探";position:absolute;right:30px;top:10px;font-size:210px;color:rgba(255,255,255,.06);font-weight:900}
.story-main>*{position:relative;z-index:1}
.tag{display:inline-flex;padding:5px 10px;border-radius:99px;color:var(--lime);background:rgba(214,255,75,.1);font-size:12px;font-weight:700}
.story-main h3{font-size:30px;max-width:440px;line-height:1.35;margin:30px 0 10px}
.story-main p{color:var(--muted);max-width:470px}
.story-side{display:grid;gap:13px}
.info-card{padding:21px;background:var(--panel);border:1px solid var(--line);border-radius:17px}
.info-card strong{display:block;color:var(--cyan);font-size:25px;line-height:1.3}
.info-card h3{font-size:16px;margin:4px 0}
.info-card p{font-size:13px;color:var(--muted)}
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.drama-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.25s}
.drama-card:hover{transform:translateY(-5px);box-shadow:0 14px 35px rgba(0,0,0,.25);border-color:rgba(85,230,220,.45)}
.poster{height:165px;display:flex;align-items:flex-end;padding:15px;position:relative;overflow:hidden}
.poster:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,8,17,.75),transparent 65%)}
.poster span{position:relative;z-index:1;font-size:12px;color:#fff;background:rgba(0,0,0,.25);padding:4px 8px;border-radius:8px}
.poster-a{background:linear-gradient(135deg,#40346e,#b66589)}
.poster-b{background:linear-gradient(135deg,#1b6872,#2e344f)}
.poster-c{background:linear-gradient(135deg,#8d513b,#28223d)}
.poster-d{background:linear-gradient(135deg,#304d68,#774f8c)}
.card-body{padding:14px 15px}
.card-body h3{font-size:16px}
.card-body p{font-size:12px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{display:flex;justify-content:space-between;color:var(--dim);font-size:12px;margin-top:12px}
.channel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.channel{min-height:135px;border-radius:18px;padding:20px;background:var(--panel2);border:1px solid var(--line);transition:.25s}
.channel:hover{border-color:var(--cyan);transform:translateY(-3px)}
.channel b{font-size:23px;color:var(--cyan)}
.channel h3{font-size:17px;margin:6px 0}
.channel p{color:var(--muted);font-size:13px}
.rank-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:start}
.rank-intro{padding:28px;border-radius:20px;background:linear-gradient(145deg,#192d38,#17182b);border:1px solid var(--line)}
.rank-intro h3{font-size:25px;line-height:1.4;margin:18px 0 9px}
.rank-intro p{color:var(--muted)}
.rank-list{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:8px 20px}
.rank-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.rank-row:last-child{border:0}
.rank-no{font-size:18px;font-weight:800;color:var(--dim)}
.rank-row:first-child .rank-no,.rank-row:nth-child(2) .rank-no,.rank-row:nth-child(3) .rank-no{color:var(--orange)}
.rank-row strong{font-size:14px}.rank-row small{display:block;color:var(--muted);font-size:11px}
.rank-score{font-size:13px;color:var(--lime)}
.news-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px}
.news-feature{padding:28px;border-radius:20px;background:linear-gradient(135deg,#332a52,#171d30);min-height:245px}
.news-feature label{color:var(--pink);font-size:12px}
.news-feature h3{font-size:27px;line-height:1.35;margin:22px 0 10px;max-width:430px}
.news-feature p{color:var(--muted)}
.news-list{display:grid;gap:0}
.news-item{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line)}
.news-item h3{font-size:14px;font-weight:600}
.news-item span{font-size:12px;color:var(--dim);white-space:nowrap}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.faq{border:1px solid var(--line);border-radius:16px;padding:21px;background:var(--panel)}
.faq h3{font-size:16px}.faq p{color:var(--muted);font-size:13px;margin-top:8px}
.cta{padding:60px 0}
.cta-box{border-radius:25px;padding:42px 48px;background:linear-gradient(110deg,rgba(214,255,75,.15),rgba(85,230,220,.1));border:1px solid rgba(214,255,75,.28);display:flex;align-items:center;justify-content:space-between;gap:25px}
.cta-box h2{font-size:30px;line-height:1.3}.cta-box p{color:var(--muted);margin-top:8px}
footer{padding:48px 0 24px;background:#080b13;border-top:1px solid var(--line)}
.footer-top{display:flex;justify-content:space-between;gap:50px;padding-bottom:38px}
.footer-brand{max-width:390px}.footer-brand p{color:var(--muted);margin-top:17px}
.footer-links{display:flex;gap:80px}.footer-links div{display:flex;flex-direction:column;gap:9px}
.footer-links h4{font-size:14px;margin-bottom:5px}.footer-links a{color:var(--muted);font-size:13px}.footer-links a:hover{color:var(--lime)}
.copyright{display:flex;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid var(--line);color:var(--dim);font-size:12px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media(max-width:1024px){.hero-grid,.story-layout,.rank-layout,.news-grid{grid-template-columns:1fr}.card-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){
 .container{width:min(100% - 30px,620px)}.site-header{height:68px}.menu-btn{display:block}
 .nav{display:none;position:absolute;left:15px;right:15px;top:68px;padding:12px;background:#121827;border:1px solid var(--line);border-radius:16px;flex-direction:column;align-items:stretch;box-shadow:var(--shadow)}
 .nav.open{display:flex}.nav a{padding:12px 14px}.nav-cta{text-align:center}
 .hero{padding:50px 0 42px}h1{letter-spacing:-1.5px}.hero-copy{font-size:15px}
 section{padding:55px 0}.section-head{display:block}.section-link{display:inline-block;margin-top:14px}
 .card-grid{grid-template-columns:repeat(2,1fr)}.channel-grid{grid-template-columns:repeat(2,1fr)}
 .footer-top{display:block}.footer-links{margin-top:30px;gap:45px}.cta-box{display:block;padding:30px 25px}.cta-box .btn{margin-top:22px}
}
@media(max-width:520px){
 .card-grid{grid-template-columns:1fr 1fr;gap:11px}.poster{height:135px}.card-body{padding:11px}.card-body h3{font-size:14px}
 .channel-grid,.faq-grid{grid-template-columns:1fr}.story-main h3{font-size:24px}.rank-list{padding:5px 14px}
 .footer-links{gap:25px}.copyright{display:block}.copyright span{display:block;margin-top:5px}
 .countdown{gap:5px}.time-box{min-width:51px}
}