:root{
  --bg:#0d0d10; --bg2:#141419; --card:#17171e; --line:#26262f;
  --fg:#eceef2; --fg2:#a7abb6; --brand:#ff4b4b; --brand2:#ff7a45;
  --ok:#31c48d; --radius:14px;
}
[data-theme="light"]{
  --bg:#f5f6f8; --bg2:#fff; --card:#fff; --line:#e4e6ec;
  --fg:#16181d; --fg2:#666c78;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
a{color:inherit;text-decoration:none;cursor:pointer}
button{font:inherit;cursor:pointer}
.hidden{display:none !important}

/* ---------- 顶栏 ---------- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;
  padding:10px 18px;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;cursor:pointer;flex:0 0 auto}
.logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;
  font-weight:800;background:linear-gradient(135deg,var(--brand),var(--brand2))}
.bname{font-weight:700;letter-spacing:.5px}
.searchbox{flex:1 1 auto;max-width:520px;display:flex;gap:8px}
.searchbox input{flex:1;padding:9px 13px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg2);color:var(--fg);outline:none}
.searchbox input:focus{border-color:var(--brand)}
.sbtn{padding:9px 16px;border-radius:10px;border:0;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand2))}
.nav{display:flex;gap:4px;margin-left:auto}
.navi{padding:7px 12px;border-radius:9px;color:var(--fg2);font-size:14px;white-space:nowrap}
.navi:hover{background:var(--card);color:var(--fg)}
.navi.active{color:var(--fg);background:var(--card)}
.userbox{position:relative;display:flex;gap:6px}
.icon{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:var(--bg2);color:var(--fg);display:grid;place-items:center}
.dropdown{position:absolute;right:0;top:42px;min-width:180px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 12px 30px #0008;z-index:60}
.dropdown button{display:block;width:100%;text-align:left;padding:9px 11px;border:0;
  background:transparent;color:var(--fg);border-radius:8px}
.dropdown button:hover{background:var(--bg2)}
.dm-head{padding:8px 11px;font-size:13px;color:var(--fg2);border-bottom:1px solid var(--line);margin-bottom:4px}

/* ---------- 布局 ---------- */
main{max-width:1320px;margin:0 auto;padding:20px 18px 90px}
.sec{margin:0 0 28px}
.sec-head{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.sec-head h2{margin:0;font-size:19px}
.sec-head .sub{color:var(--fg2);font-size:13px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.tab{padding:6px 13px;border-radius:20px;border:1px solid var(--line);background:var(--bg2);
  color:var(--fg2);font-size:13px}
.tab.active{background:var(--brand);border-color:var(--brand);color:#fff}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;transition:transform .16s ease,border-color .16s}
.card:hover{transform:translateY(-3px);border-color:#3a3a46}
.poster{position:relative;aspect-ratio:3/4;background:linear-gradient(135deg,#26263a,#3a2b2b);overflow:hidden}
.poster img{width:100%;height:100%;object-fit:cover;display:block}
.poster .badge{position:absolute;left:7px;top:7px;background:#000a;color:#fff;font-size:11px;
  padding:2px 7px;border-radius:7px;backdrop-filter:blur(4px)}
.poster .eps{position:absolute;right:7px;bottom:7px;background:#000a;color:#fff;font-size:11px;
  padding:2px 7px;border-radius:7px}
.card .meta{padding:9px 10px}
.card .t{font-size:13.5px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.card .s{font-size:12px;color:var(--fg2);margin-top:4px;display:flex;gap:8px;flex-wrap:wrap}
.score{color:#ffb020}

.loading{padding:40px;text-align:center;color:var(--fg2)}
.empty{padding:40px;text-align:center;color:var(--fg2)}
.err{padding:14px;border:1px solid #6b2b2b;background:#2a1414;border-radius:12px;color:#ffb4b4;
  margin:0 0 16px;font-size:14px}
.more{display:block;margin:18px auto 0;padding:9px 22px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg2);color:var(--fg)}

/* ---------- 筛选 ---------- */
.fblock{margin:0 0 14px}
.fblock .flabel{font-size:12px;color:var(--fg2);margin:0 0 7px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{padding:5px 12px;border-radius:16px;border:1px solid var(--line);background:var(--bg2);
  color:var(--fg2);font-size:12.5px}
.chip.active{background:#2b2b38;color:var(--fg);border-color:#4a4a5a}
.chip.primary.active{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------- 详情 ---------- */
.detail{display:grid;grid-template-columns:230px 1fr;gap:26px}
.detail .dcover{border-radius:var(--radius);overflow:hidden;background:#22222e;aspect-ratio:3/4}
.detail .dcover img{width:100%;height:100%;object-fit:cover}
.detail h1{margin:0 0 8px;font-size:24px}
.dtags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;color:var(--fg2);font-size:13px}
.dtags span{padding:3px 9px;border-radius:8px;background:var(--card);border:1px solid var(--line)}
.dintro{color:var(--fg2);line-height:1.7;font-size:14px;margin:0 0 14px;max-width:760px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.btn{padding:10px 20px;border-radius:11px;border:1px solid var(--line);background:var(--bg2);color:var(--fg)}
.btn.primary{border:0;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand2))}
.btn.on{border-color:var(--brand);color:var(--brand)}
.cast{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.cast .c{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:7px 11px;font-size:12.5px}
.epgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:9px;max-width:820px}
.ep{padding:9px 0;text-align:center;border-radius:10px;border:1px solid var(--line);
  background:var(--bg2);font-size:13px;color:var(--fg2)}
.ep:hover{border-color:var(--brand);color:var(--fg)}
.ep.cur{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------- 播放 ---------- */
.watch{display:grid;grid-template-columns:1fr 300px;gap:20px}
.player-wrap{background:#000;border-radius:var(--radius);overflow:hidden;position:relative}
.player-wrap video{width:100%;max-height:78vh;display:block;background:#000;aspect-ratio:9/16;object-fit:contain}
.pstat{padding:26px;color:var(--fg2);text-align:center}
.pstat .big{font-size:15px;color:var(--fg);margin-bottom:8px}
.pbar{height:5px;background:#26262f;border-radius:3px;overflow:hidden;max-width:320px;margin:14px auto 0}
.pbar i{display:block;height:100%;width:34%;background:linear-gradient(90deg,var(--brand),var(--brand2));
  animation:sweep 1.2s ease-in-out infinite}
@keyframes sweep{0%{margin-left:-34%}100%{margin-left:100%}}
.ctrl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 14px;background:var(--bg2);
  border-top:1px solid var(--line)}
.ctrl .sp{color:var(--fg2);font-size:13px;margin-left:auto}
select{background:var(--bg2);color:var(--fg);border:1px solid var(--line);border-radius:9px;padding:7px 10px}
.side{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px;
  max-height:78vh;overflow:auto}
.side h3{margin:0 0 10px;font-size:14px;color:var(--fg2)}
.side .eps{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px}
.side .ep{padding:8px 0}
.wtitle{font-size:16px;font-weight:600;margin:14px 0 6px}
.wmeta{color:var(--fg2);font-size:13px;margin:0 0 12px}

/* ---------- 弹窗/提示 ---------- */
.modal{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:100}
.mbox{width:min(92vw,380px);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.mbox h3{margin:0 0 16px}
.mbox label{display:block;font-size:13px;color:var(--fg2);margin:0 0 12px}
.mbox input{width:100%;margin-top:6px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg2);color:var(--fg);outline:none}
.mbox input:focus{border-color:var(--brand)}
.m-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}
.m-actions .primary{border:0;color:#fff;padding:9px 18px;border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand2))}
.ghost{background:transparent;border:1px solid var(--line);color:var(--fg2);padding:9px 16px;border-radius:10px}
.m-hint{color:var(--fg2);font-size:12px;margin:14px 0 0;line-height:1.6}
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);background:#22222c;color:#fff;
  padding:11px 20px;border-radius:12px;z-index:200;font-size:14px;box-shadow:0 10px 30px #0009}
.boss{position:fixed;inset:0;background:#0d0d10;z-index:300;display:grid;place-items:center}
.boss-title{font-size:26px;font-weight:700;color:#6b7280}
.boss-sub{margin-top:10px;color:#3f3f46;font-size:13px}

@media(max-width:980px){
  .detail{grid-template-columns:130px 1fr;gap:16px}
  .watch{grid-template-columns:1fr}
  .nav{display:none}
}
@media(max-width:620px){
  .topbar{flex-wrap:wrap;gap:10px}
  .searchbox{order:3;max-width:none;width:100%}
  .grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
  main{padding:14px 12px 80px}
}