:root{
--ink:#1C1C1C;
--silver:#C0C0C0;
--paper:#F0F0F0;
--crimson:#8B0000;
--radius:2px;
--shadow:0 1px 0 rgba(28,28,28,.08),0 6px 18px -12px rgba(28,28,28,.18);
--maxw:1240px;
--pad-m:20px;
--pad-t:32px;
--pad-d:40px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
background:var(--paper);color:var(--ink);font-size:15.5px;line-height:1.75;
-webkit-font-smoothing:antialiased;
}
img{width:100%;height:100%;object-fit:cover;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3{line-height:1.3;font-weight:800;letter-spacing:-.01em}
h2{font-size:24px;margin-bottom:8px}
h3{font-size:17px;line-height:1.4}
p{margin-bottom:12px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-m)}
@media(min-width:720px){.wrap{padding:0 var(--pad-t)}body{font-size:16px}h2{font-size:28px}h3{font-size:18px}}
@media(min-width:1100px){.wrap{padding:0 var(--pad-d)}h2{font-size:30px}}

/* geometric 装饰 */
.geo{position:absolute;pointer-events:none}
.geo-sq{width:180px;height:180px;border:1.5px solid var(--silver);transform:rotate(12deg);opacity:.5}
.geo-dot{width:10px;height:10px;background:var(--crimson);border-radius:50%}

/* 顶部导航 compact */
.top{position:sticky;top:0;z-index:50;background:rgba(240,240,240,.94);backdrop-filter:blur(10px);border-bottom:1.5px solid var(--silver)}
.nav{display:flex;align-items:center;gap:18px;height:60px}
.brand{font-size:18px;font-weight:900;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;white-space:nowrap}
.brand i{width:14px;height:14px;background:var(--crimson);display:inline-block;transform:rotate(45deg)}
.navlinks{display:none;gap:22px;font-size:14px;font-weight:600}
.navlinks a{padding:6px 0;border-bottom:2px solid transparent;transition:.2s}
.navlinks a:hover,.navlinks a:focus-visible{border-color:var(--crimson);color:var(--crimson)}
.navright{margin-left:auto;display:flex;align-items:center;gap:10px}
.search{display:flex;align-items:center;border:1.5px solid var(--ink);border-radius:var(--radius);background:#fff;height:38px;overflow:hidden}
.search input{border:0;outline:0;padding:0 12px;height:100%;width:120px;font-size:14px;background:transparent}
.search button{border:0;background:var(--ink);color:#fff;height:100%;padding:0 14px;font-size:13px;font-weight:700}
.search button:hover{background:var(--crimson)}
.burger{display:inline-flex;width:40px;height:38px;border:1.5px solid var(--ink);border-radius:var(--radius);background:#fff;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.burger span{width:16px;height:1.6px;background:var(--ink);display:block}
.mobilemenu{display:none;border-top:1.5px solid var(--silver);padding:12px 0 16px}
.mobilemenu.open{display:block}
.mobilemenu a{display:block;padding:10px 4px;font-size:15px;font-weight:600;border-bottom:1px solid rgba(192,192,192,.5)}
@media(min-width:860px){.navlinks{display:flex}.burger{display:none}.search input{width:160px}.mobilemenu{display:none!important}}

/* 面包屑 */
.crumb{font-size:13.5px;color:#555;padding:16px 0 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumb a{color:#555;border-bottom:1px solid transparent}
.crumb a:hover{color:var(--crimson);border-color:var(--crimson)}
.crumb [aria-current]{color:var(--ink);font-weight:700}

/* Hero split-overlap */
.hero{position:relative;margin-top:22px;padding:8px 0 4px}
.hero-inner{position:relative;display:grid;grid-template-columns:1fr;gap:0;align-items:center}
.hero-poster{position:relative;width:100%;max-width:300px;aspect-ratio:3/4;border:1.5px solid var(--ink);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#fff;margin:0 auto 20px}
.hero-poster .tag{position:absolute;top:10px;left:10px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;padding:4px 9px;border-radius:var(--radius);z-index:2}
.hero-copy{position:relative;z-index:2;background:var(--paper);padding:4px}
.hero-copy .kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--crimson);margin-bottom:14px}
.hero-copy .kicker::before{content:"";width:26px;height:2px;background:var(--crimson);display:inline-block}
h1{font-size:38px;line-height:1.2;font-weight:900;letter-spacing:-.02em;margin-bottom:16px}
.hero-hook{font-size:15.5px;color:#3a3a3a;margin-bottom:18px;max-width:560px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.chip{font-size:13px;font-weight:700;padding:5px 11px;border:1.5px solid var(--silver);border-radius:var(--radius);background:#fff;color:#333}
.chip.kw{border-color:var(--crimson);color:var(--crimson)}
.chip.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btnrow{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 22px;font-size:14px;font-weight:800;border-radius:var(--radius);border:1.5px solid var(--ink);transition:.18s;text-align:center}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--crimson);border-color:var(--crimson)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--ink);color:#fff}
@media(min-width:760px){
h1{font-size:48px}
.hero-inner{grid-template-columns:340px 1fr;gap:0}
.hero-poster{margin:0 0 0 0;transform:translateY(18px)}
.hero-copy{background:transparent;padding:0 0 0 0;margin-left:-40px;padding-left:56px;padding-top:22px;padding-bottom:22px;background:linear-gradient(90deg,transparent 0,#fff 90px,#fff 100%);border:1.5px solid var(--silver);border-left:0;border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-copy-inner{max-width:560px}
}
@media(min-width:1100px){h1{font-size:56px}.hero-inner{grid-template-columns:400px 1fr}}

/* section */
section{margin-top:44px}
@media(min-width:760px){section{margin-top:64px}}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:20px}
.sec-head p{font-size:14.5px;color:#555;max-width:640px;margin:0}
.sec-head .more{font-size:13.5px;font-weight:800;color:var(--crimson);border:1.5px solid var(--crimson);padding:7px 14px;border-radius:var(--radius);white-space:nowrap}
.sec-head .more:hover{background:var(--crimson);color:#fff}

/* 分类导航 */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:720px){.cats{grid-template-columns:repeat(3,1fr);gap:18px}}
@media(min-width:1000px){.cats{grid-template-columns:repeat(6,1fr)}}
.cat{border:1.5px solid var(--ink);border-radius:var(--radius);background:#fff;padding:16px 14px;transition:.18s;box-shadow:var(--shadow);display:block}
.cat:hover,.cat:focus-visible{background:var(--ink);color:#fff}
.cat:hover p,.cat:focus-visible p{color:var(--silver)}
.cat h3{font-size:16.5px;margin-bottom:6px}
.cat p{font-size:13.5px;line-height:1.6;color:#555;margin:0}

/* 剧集卡片 outlined */
.grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:560px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:860px){.grid{grid-template-columns:repeat(3,1fr);gap:18px}}
@media(min-width:1100px){.grid.g4{grid-template-columns:repeat(4,1fr)}}
.card{border:1.5px solid var(--silver);outline:1px solid transparent;border-radius:var(--radius);background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:.18s;box-shadow:var(--shadow)}
.card:hover{border-color:var(--ink);outline-color:var(--ink);transform:translateY(-2px)}
.card .cover{position:relative;aspect-ratio:3/4;overflow:hidden;background:#e4e4e4}
.card .cover .badge{position:absolute;left:8px;top:8px;background:var(--crimson);color:#fff;font-size:12.5px;font-weight:800;padding:3px 8px;border-radius:var(--radius);z-index:2}
.card .body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .body h3{font-size:17px}
.card .body .desc{font-size:13.5px;line-height:1.65;color:#555;margin:0;flex:1}
.card .body .meta{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:#666}
.card .body .meta .k{background:var(--paper);border:1px solid var(--silver);padding:2px 7px;border-radius:var(--radius);color:#333;font-weight:700}
.card .go{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800;color:var(--crimson);margin-top:2px}
.card .go::after{content:"→";transition:.18s}
.card:hover .go::after{transform:translateX(3px)}

/* 榜单式栏目 */
.ranklist{display:flex;flex-direction:column;gap:0;border:1.5px solid var(--ink);border-radius:var(--radius);overflow:hidden;background:#fff}
.rankitem{display:flex;gap:14px;padding:16px;border-bottom:1px solid var(--silver);align-items:center}
.rankitem:last-child{border-bottom:0}
.rankitem:hover{background:#fafafa}
.rankitem .num{font-size:22px;font-weight:900;color:var(--crimson);min-width:34px;font-variant-numeric:tabular-nums}
.rankitem .thumb{width:56px;height:74px;flex:0 0 56px;border:1px solid var(--silver);border-radius:var(--radius);overflow:hidden}
.rankitem .txt h3{font-size:16.5px;margin-bottom:4px}
.rankitem .txt p{font-size:13.5px;color:#555;margin:0;line-height:1.6}
@media(min-width:860px){.rankgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.ranklist{height:100%}}

/* 剧情简介 */
.story{display:grid;grid-template-columns:1fr;gap:20px;border:1.5px solid var(--ink);border-radius:var(--radius);background:#fff;padding:20px;position:relative;overflow:hidden}
.story .txt{font-size:15.5px;line-height:1.8;color:#2c2c2c}
.story .txt p:last-child{margin-bottom:0}
.story .side{display:flex;flex-direction:column;gap:10px}
.story .side .kv{border:1.5px solid var(--silver);border-radius:var(--radius);padding:12px 14px}
.story .side .kv strong{display:block;font-size:12.5px;letter-spacing:.1em;color:var(--crimson);font-weight:800;margin-bottom:4px}
.story .side .kv span{font-size:13.5px;color:#333}
@media(min-width:860px){.story{grid-template-columns:1.7fr 1fr;padding:26px}}

/* 看点 */
.points{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:720px){.points{grid-template-columns:1fr 1fr;gap:18px}}
.point{border-left:3px solid var(--crimson);background:#fff;border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);border-top:1px solid var(--silver);border-right:1px solid var(--silver);border-bottom:1px solid var(--silver)}
.point h3{font-size:16.5px;margin-bottom:6px}
.point p{font-size:14px;color:#444;margin:0;line-height:1.7}

/* 人物 */
.people{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:560px){.people{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(min-width:1000px){.people{grid-template-columns:repeat(4,1fr)}}
.person{border:1.5px solid var(--ink);border-radius:var(--radius);background:#fff;overflow:hidden;box-shadow:var(--shadow)}
.person .ava{aspect-ratio:1/1;overflow:hidden;border-bottom:1.5px solid var(--ink)}
.person .pb{padding:14px 16px}
.person h3{font-size:16.5px;margin-bottom:4px}
.person .role{font-size:12.5px;font-weight:800;color:var(--crimson);letter-spacing:.08em;margin-bottom:6px}
.person p{font-size:13.5px;color:#555;margin:0;line-height:1.65}

/* 追剧队列 */
.queue{border:1.5px solid var(--ink);border-radius:var(--radius);background:#fff;overflow:hidden}
.queue-top{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1.5px solid var(--ink);background:var(--ink);color:#fff}
.queue-top .qcount{font-size:14px;font-weight:800}
.queue-top .qcount b{font-size:20px;color:#fff;background:var(--crimson);padding:1px 9px;border-radius:var(--radius);margin:0 4px}
.ep{display:grid;grid-template-columns:auto 1fr auto;gap:12px;padding:14px 16px;border-bottom:1px solid var(--silver);align-items:center}
.ep:last-child{border-bottom:0}
.ep .no{font-size:14px;font-weight:900;color:var(--crimson);min-width:46px}
.ep .info h3{font-size:16px;margin-bottom:3px}
.ep .info p{font-size:13.5px;color:#555;margin:0;line-height:1.6}
.ep .info .em{font-size:12.5px;color:#777;margin-top:3px}
.qbtn{min-height:42px;padding:9px 16px;font-size:13px;font-weight:800;border:1.5px solid var(--ink);background:#fff;color:var(--ink);border-radius:var(--radius);white-space:nowrap;transition:.18s}
.qbtn:hover{background:var(--ink);color:#fff}
.qbtn.on{background:var(--crimson);border-color:var(--crimson);color:#fff}
.ep.hide{display:none}
.queue-foot{padding:14px 16px;border-top:1.5px solid var(--silver)}
.queue-foot button{width:100%;min-height:44px;border:1.5px dashed var(--ink);background:transparent;font-size:13.5px;font-weight:800;border-radius:var(--radius)}
.queue-foot button:hover{background:var(--paper)}

/* 相关推荐 */
.rel{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:560px){.rel{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(min-width:1000px){.rel{grid-template-columns:repeat(3,1fr)}}
.relcard{display:flex;gap:14px;border:1.5px solid var(--silver);border-radius:var(--radius);background:#fff;padding:14px;transition:.18s;box-shadow:var(--shadow)}
.relcard:hover{border-color:var(--ink);transform:translateY(-2px)}
.relcard .rv{width:84px;flex:0 0 84px;aspect-ratio:3/4;border:1px solid var(--silver);border-radius:var(--radius);overflow:hidden}
.relcard .rb h3{font-size:16.5px;margin-bottom:4px}
.relcard .rb p{font-size:13.5px;color:#555;margin:0 0 6px;line-height:1.6}
.relcard .rb .tags{display:flex;flex-wrap:wrap;gap:5px}
.relcard .rb .tags span{font-size:12px;font-weight:700;padding:2px 7px;border:1px solid var(--silver);border-radius:var(--radius);color:#444}

/* FAQ */
.faq{border:1.5px solid var(--ink);border-radius:var(--radius);background:#fff;overflow:hidden}
.faq details{border-bottom:1px solid var(--silver)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:16px 18px;font-size:15.5px;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;font-weight:800;color:var(--crimson);line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{background:#fafafa}
.faq .ans{padding:0 18px 16px;font-size:14px;color:#444;line-height:1.75}

/* 友情链接 */
.links{display:flex;flex-wrap:wrap;gap:10px}
.links a{font-size:13.5px;font-weight:700;border:1.5px solid var(--silver);border-radius:var(--radius);padding:7px 13px;background:#fff;color:#333;transition:.18s}
.links a:hover,.links a:focus-visible{border-color:var(--ink);background:var(--ink);color:#fff}

/* 页脚 */
footer{margin-top:56px;border-top:1.5px solid var(--ink);background:#fff;padding-top:48px}
.fgrid{display:grid;grid-template-columns:1fr;gap:26px;padding-bottom:32px}
@media(min-width:720px){.fgrid{grid-template-columns:1.5fr 1fr 1fr;gap:32px}}
.fgrid h3{font-size:15.5px;margin-bottom:12px}
.fgrid p{font-size:13.5px;color:#555;line-height:1.7}
.fgrid ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.fgrid ul a{font-size:13.5px;color:#444}
.fgrid ul a:hover{color:var(--crimson)}
.fbottom{border-top:1px solid var(--silver);padding:20px 0 28px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
.fbottom .copy{font-size:13px;color:#666;line-height:1.7}
.fbottom .copy a{color:#444;border-bottom:1px solid var(--silver)}
.fbottom .copy a:hover{color:var(--crimson);border-color:var(--crimson)}
.topbtn{min-height:42px;padding:9px 18px;font-size:13px;font-weight:800;border:1.5px solid var(--ink);background:#fff;border-radius:var(--radius)}
.topbtn:hover{background:var(--ink);color:#fff}
.empty{font-size:14px;color:#666;padding:18px;border:1.5px dashed var(--silver);border-radius:var(--radius);display:none}
.empty.show{display:block}
:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}