/* ============ 主题变量 ============ */
:root{
  --bg:#0e1014;
  --chrome:#161a21;
  --chrome-2:#1d222b;
  --line:#2a303a;
  --txt:#e9ecf1;
  --dim:#98a2ae;
  --accent:#ff6b35;
  --accent-2:#ff9166;
  --ok:#4ec9a0;
  --warn:#e8b84b;
  --r:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(1100px 760px at 18% 0%,#1a2130 0%,transparent 62%),
    radial-gradient(900px 700px at 100% 100%,#25191a 0%,transparent 58%),
    var(--bg);
  color:var(--txt);
  font:13px/1.5 "PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
}
button,input,select{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}

/* ============ 播放器窗口 ============ */
#app{
  position:fixed;left:60px;top:60px;width:960px;height:640px;
  display:flex;flex-direction:column;
  background:var(--chrome);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.03) inset;
  overflow:hidden;
  min-width:300px;min-height:180px;
}

/* ---- 标题栏 ---- */
#bar{
  height:40px;flex:0 0 40px;
  display:flex;align-items:center;gap:9px;padding:0 6px 0 12px;
  background:linear-gradient(180deg,var(--chrome-2),var(--chrome));
  border-bottom:1px solid var(--line);
  cursor:grab;
}
#bar:active{cursor:grabbing}
.logo{width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px var(--accent);flex:0 0 auto}
#title{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#title b{color:var(--txt);font-weight:600}
#title .sep{opacity:.4;margin:0 6px}
#title .ep{color:var(--accent-2);font-weight:600}
.bar-actions{display:flex;gap:2px;flex:0 0 auto}
.bar-actions button{width:30px;height:28px;border-radius:7px;color:var(--dim);
  display:flex;align-items:center;justify-content:center;font-size:14px}
.bar-actions button:hover{background:rgba(255,255,255,.07);color:var(--txt)}
.bar-actions button.on{color:var(--accent);background:rgba(255,107,53,.14)}

/* ---- 画面区 ---- */
#stage{position:relative;flex:1 1 auto;overflow:hidden;background:#000;
  display:flex;align-items:center;justify-content:center;cursor:grab;min-height:80px}
#stage.panning{cursor:grabbing}
#v{width:100%;height:100%;object-fit:contain;transform-origin:center center;
  background:#000;display:block;will-change:transform}

#badge{position:absolute;top:10px;left:10px;padding:3px 8px;border-radius:6px;
  background:rgba(0,0,0,.62);color:var(--accent-2);font-size:11.5px;
  font-variant-numeric:tabular-nums;opacity:0;transition:opacity .2s;pointer-events:none}
#badge.show{opacity:1}

#toast{position:absolute;left:50%;bottom:16px;transform:translateX(-50%) translateY(8px);
  background:rgba(12,15,20,.94);border:1px solid var(--line);color:var(--txt);
  padding:8px 16px;border-radius:9px;font-size:12.5px;max-width:86%;
  opacity:0;transition:opacity .22s,transform .22s;pointer-events:none;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.warn{border-color:rgba(232,184,75,.5);color:var(--warn)}

/* ---- 载入浮层 ---- */
#loader{position:absolute;inset:0;z-index:25;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(8,10,14,.93);backdrop-filter:blur(4px);padding:22px;text-align:center}
#loader.show{display:flex}
#loader .big{font-size:15px;font-weight:600}
#loader .sub{font-size:12px;color:var(--dim);max-width:440px;line-height:1.75}
#loader .sub code{background:rgba(255,255,255,.08);padding:1px 5px;border-radius:4px;
  font-family:Consolas,Monaco,monospace;font-size:11.5px;color:var(--accent-2)}
.urlbox{display:flex;gap:8px;width:100%;max-width:520px}
.urlbox input{flex:1 1 auto;min-width:0;height:36px;padding:0 12px;border-radius:9px;
  background:var(--chrome-2);border:1px solid var(--line);color:var(--txt);
  font-size:12.5px;outline:none;-webkit-user-select:text;user-select:text}
.urlbox input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,107,53,.13)}
.btn{padding:0 16px;height:36px;border-radius:9px;font-size:12.5px;font-weight:600;
  background:var(--accent);color:#fff;display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;transition:background .15s}
.btn:hover{background:var(--accent-2)}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:rgba(255,255,255,.08);color:var(--txt);font-weight:500}
.btn.ghost:hover{background:rgba(255,255,255,.15)}
.spin{width:22px;height:22px;border:2px solid rgba(255,255,255,.15);
  border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

#recent{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:560px}
#recent .item{padding:5px 11px;border-radius:999px;font-size:11.5px;
  background:rgba(255,255,255,.07);color:var(--dim);max-width:230px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#recent .item:hover{background:rgba(255,107,53,.18);color:var(--accent-2)}

/* ============ 剧集面板 ============ */
#eps{
  flex:0 0 auto;max-height:0;overflow:hidden;
  background:var(--chrome-2);border-top:1px solid var(--line);
  transition:max-height .22s ease;
  display:flex;flex-direction:column;
}
#eps.show{max-height:190px}
#epHead{display:flex;align-items:center;gap:8px;padding:8px 12px 6px;flex:0 0 auto;overflow:hidden}
#epHead .stat{font-size:11.5px;color:var(--dim);white-space:nowrap;flex:0 0 auto}
#epHead .stat b{color:var(--ok);font-weight:600}
#epHead .stat i{color:var(--warn);font-style:normal}
/* 刷新状态是这条里唯一肯缩的：窗口窄了就先把它截短，集数统计一个字都不能少 */
#epHead .fresh{font-size:11px;color:var(--dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
#epHead .fresh.new{color:var(--accent)}          /* 有新集时挑出来 */
#epHead .navbtn{white-space:nowrap}
#epHead .sp{flex:1 1 auto}
.navbtn{height:26px;padding:0 10px;border-radius:7px;font-size:12px;color:var(--dim);
  background:rgba(255,255,255,.06);display:inline-flex;align-items:center;gap:5px}
.navbtn:hover:not(:disabled){background:rgba(255,255,255,.13);color:var(--txt)}
.navbtn:disabled{opacity:.35;cursor:default}

#segs{display:flex;gap:5px;overflow-x:auto;padding:0 12px 8px;flex:0 0 auto;
  scrollbar-width:thin;scrollbar-color:#3a424e transparent}
#segs::-webkit-scrollbar{height:5px}
#segs::-webkit-scrollbar-thumb{background:#3a424e;border-radius:3px}
.seg{padding:3px 9px;border-radius:999px;font-size:11px;color:var(--dim);
  background:rgba(255,255,255,.06);white-space:nowrap;flex:0 0 auto;
  font-variant-numeric:tabular-nums}
.seg:hover{background:rgba(255,255,255,.13);color:var(--txt)}
.seg.on{background:rgba(255,107,53,.2);color:var(--accent-2)}
.seg.has-now{box-shadow:0 0 0 1px rgba(255,107,53,.45) inset}

#epList{display:flex;flex-wrap:wrap;gap:5px;padding:0 12px 11px;
  overflow-y:auto;flex:1 1 auto;align-content:flex-start;
  scrollbar-width:thin;scrollbar-color:#3a424e transparent}
#epList::-webkit-scrollbar{width:6px}
#epList::-webkit-scrollbar-thumb{background:#3a424e;border-radius:3px}
.ep{width:36px;height:28px;border-radius:7px;font-size:12px;color:var(--dim);
  background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;position:relative;transition:background .12s}
.ep:hover:not(:disabled){background:rgba(255,255,255,.16);color:var(--txt)}
.ep.locked{color:#5a626d;background:rgba(255,255,255,.03);cursor:not-allowed}
.ep.locked::after{content:"🔒";position:absolute;right:1px;top:0;font-size:8px;opacity:.75}
.ep.now{background:var(--accent);color:#fff;font-weight:700}
.ep.now::after{display:none}
.ep.watched{color:var(--ok);background:rgba(78,201,160,.1)}
.ep.now.watched{color:#fff;background:var(--accent)}

/* ============ 缩放面板 ============ */
#panel{display:none;flex:0 0 auto;padding:10px 12px 12px;background:var(--chrome-2);
  border-top:1px solid var(--line);gap:9px;flex-direction:column}
#panel.show{display:flex}
.row{display:flex;align-items:center;gap:9px}
.row .lab{width:44px;flex:0 0 44px;font-size:11.5px;color:var(--dim)}
.row .val{width:52px;flex:0 0 52px;text-align:right;font-size:11.5px;
  font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1 1 auto;height:4px;
  border-radius:3px;background:#333a45;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;
  border-radius:50%;background:var(--accent);border:2px solid #161a21;cursor:pointer}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;
  background:var(--accent);border:2px solid #161a21;cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:4px 10px;border-radius:999px;font-size:11.5px;
  background:rgba(255,255,255,.07);color:var(--dim)}
.chip:hover{background:rgba(255,255,255,.13);color:var(--txt)}
.chip.on{background:rgba(255,107,53,.18);color:var(--accent-2)}

/* ============ 控制条 ============ */
#ctrls{flex:0 0 auto;padding:7px 10px 9px;
  background:linear-gradient(180deg,var(--chrome),#12151b);
  border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
#prog{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;
  background:#333a45;outline:none;cursor:pointer}
#prog::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;
  background:var(--accent);border:2px solid #12151b;cursor:pointer}
#prog::-moz-range-thumb{width:11px;height:11px;border-radius:50%;
  background:var(--accent);border:2px solid #12151b;cursor:pointer}
/* flex-wrap 很重要：窗口拖窄时控件换行，而不是把最右边的倍速框裁掉 */
.ctrl-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;row-gap:7px}
.ctrl-row button{min-width:30px;height:28px;padding:0 7px;border-radius:7px;
  color:var(--dim);font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.ctrl-row button:hover{background:rgba(255,255,255,.08);color:var(--txt)}
.ctrl-row button.on{color:var(--accent);background:rgba(255,107,53,.14)}
#play{color:var(--txt);min-width:34px}
#time{font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums;
  white-space:nowrap;padding:0 2px}
#time b{color:var(--txt);font-weight:500}
.sp{flex:1 1 auto}
select{background:var(--chrome-2);color:var(--dim);border:1px solid var(--line);
  border-radius:7px;height:28px;padding:0 6px;font-size:12px;cursor:pointer;outline:none}
select:hover{color:var(--txt)}

/* 倍速：非 1× 时高亮，一眼能看出当前在加速 */
#speed{flex:0 0 auto;min-width:62px;text-align:center;font-weight:600;
  font-variant-numeric:tabular-nums}
#speed.fast{color:#fff;background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,107,53,.16)}
#vol{-webkit-appearance:none;appearance:none;width:70px;height:4px;border-radius:3px;
  background:#333a45;outline:none;cursor:pointer}
#vol::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;
  background:#cbd3dd;border:2px solid #12151b;cursor:pointer}
#vol::-moz-range-thumb{width:11px;height:11px;border-radius:50%;
  background:#cbd3dd;border:2px solid #12151b;cursor:pointer}

/* ============ 其他 ============ */
#rz{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;z-index:20}
#rz::after{content:"";position:absolute;right:3px;bottom:3px;width:8px;height:8px;
  border-right:2px solid #4a5260;border-bottom:2px solid #4a5260;border-radius:0 0 3px 0}
#rz:hover::after{border-color:var(--accent)}

#app.folded #panel,#app.folded #ctrls,#app.folded #eps{display:none}
#app.folded{height:auto!important}
#app.folded #stage{height:170px}

#help{position:absolute;inset:0;z-index:30;display:none;align-items:center;
  justify-content:center;background:rgba(6,8,11,.9);backdrop-filter:blur(4px)}
#help.show{display:flex}
#help .card{background:var(--chrome-2);border:1px solid var(--line);border-radius:12px;
  padding:18px 22px;max-width:94%;max-height:92%;overflow:auto;
  box-shadow:0 18px 40px rgba(0,0,0,.5)}
#help h3{font-size:13.5px;margin-bottom:12px;color:var(--accent-2)}
#help dl{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:12px}
#help dt{color:var(--txt);font-family:Consolas,Monaco,monospace;white-space:nowrap}
#help dd{color:var(--dim)}
#help .close{margin-top:16px;width:100%;text-align:center;justify-content:center}
#help hr{border:none;border-top:1px solid var(--line);margin:14px 0}

body.fs #app{left:0!important;top:0!important;width:100%!important;height:100%!important;
  border-radius:0;border:none}

/* ============ 内嵌官网（挑剧用） ============ */
#site{position:absolute;inset:0;z-index:28;display:none;flex-direction:column;background:#0b0d11}
#site.show{display:flex}
#siteBar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:7px 10px;
  background:linear-gradient(180deg,var(--chrome-2),var(--chrome));border-bottom:1px solid var(--line)}
#siteBar .sp{flex:1 1 auto}
#siteBar .navbtn{height:26px;white-space:nowrap}
#siteBar select{max-width:126px}
#frame{flex:1 1 auto;width:100%;min-height:0;border:0;background:#fff}
#siteFoot{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:7px 10px;
  background:var(--chrome-2);border-top:1px solid var(--line)}
#siteFoot .lab{font-size:11.5px;color:var(--dim);flex:0 0 auto}
#siteFoot input{flex:1 1 auto;min-width:0;height:30px;padding:0 10px;border-radius:8px;
  background:var(--chrome);border:1px solid var(--line);color:var(--txt);font-size:12px;
  outline:none;-webkit-user-select:text;user-select:text}
#siteFoot input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,107,53,.13)}
#siteFoot .btn{height:30px;padding:0 12px;font-size:12px}

/* ============ 内容目录（原生选剧） ============ */
#pick{position:absolute;inset:0;z-index:27;display:none;flex-direction:column;background:#0b0d11}
#pick.show{display:flex}
#pickBar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:7px 10px;
  background:linear-gradient(180deg,var(--chrome-2),var(--chrome));border-bottom:1px solid var(--line)}
#pickBar .sp{flex:1 1 auto}
#pickBar .navbtn{height:26px;white-space:nowrap}
#pickBar select{max-width:126px}
#pickBar .stat{font-size:11.5px;color:var(--dim);white-space:nowrap}
#pickBar #pickSearch{flex:0 1 190px;min-width:92px;height:26px;padding:0 8px;
  border-radius:6px;border:1px solid var(--line);background:#0f131a;color:var(--txt);
  font-size:12px;font-family:inherit;outline:none}
#pickBar #pickSearch:focus{border-color:var(--accent)}
#pickBar #pickSearch::placeholder{color:#5b6472}
/* 站点凑数塞进来的推荐位（搜索结果里没带关键词高亮的那些），压暗一点 */
.pcard.dim{opacity:.42}
.pcard.dim:hover{opacity:.8}

#pickGrid{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px;
  display:grid;gap:11px;align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  scrollbar-width:thin;scrollbar-color:#3a424e transparent}
#pickGrid::-webkit-scrollbar{width:7px}
#pickGrid::-webkit-scrollbar-thumb{background:#3a424e;border-radius:4px}
#pickGrid .hint{grid-column:1/-1;color:var(--dim);font-size:12px;text-align:center;padding:26px 10px;line-height:1.9}
#pickGrid .hint.warn{color:var(--warn)}

.pcard{position:relative;display:flex;flex-direction:column;gap:5px;padding:0;
  border-radius:9px;overflow:hidden;background:var(--chrome-2);
  border:1px solid var(--line);transition:transform .12s,border-color .12s}
.pcard:hover{transform:translateY(-2px);border-color:var(--accent)}
.pcard img{width:100%;aspect-ratio:160/224;object-fit:cover;display:block;background:#1a1f28}
.pcard .rank{position:absolute;left:0;top:0;min-width:20px;height:17px;padding:0 5px;
  border-radius:0 0 7px 0;font-size:10.5px;font-weight:700;color:#1b1200;
  background:linear-gradient(180deg,#ffd25f,#f3970b);
  display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.pcard .cap{padding:0 6px 6px;font-size:11px;line-height:1.35;color:var(--dim);
  text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard:hover .cap{color:var(--txt)}
.pcard .heat{position:absolute;right:0;bottom:0;padding:1px 5px;border-radius:7px 0 0 0;
  font-size:10px;background:rgba(0,0,0,.66);color:#e6c98a;font-variant-numeric:tabular-nums}
/* 低调模式：卡片只剩封面和名次，剧名一律不写（那是屏幕上最扎眼的一行字） */
body.camo .pcard .cap{display:none}
body.camo #pickGrid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}

/* ============ 观看记录 ============ */
#hist{position:absolute;inset:0;z-index:27;display:none;flex-direction:column;background:#0b0d11}
#hist.show{display:flex}
#histBar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:7px 10px;
  background:linear-gradient(180deg,var(--chrome-2),var(--chrome));border-bottom:1px solid var(--line)}
#histBar .sp{flex:1 1 auto}
#histBar .navbtn{height:26px;white-space:nowrap}
#histBar .hname{font-size:12.5px;font-weight:600;white-space:nowrap}
#histBar .stat{font-size:11.5px;color:var(--dim);white-space:nowrap}
/* 「再点一下清空」的半途状态，得让人看出来按钮变了 */
#histBar .navbtn.warn{color:var(--warn);background:rgba(232,184,75,.16)}

#histList{flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px;
  display:flex;flex-direction:column;gap:6px;
  scrollbar-width:thin;scrollbar-color:#3a424e transparent}
#histList::-webkit-scrollbar{width:7px}
#histList::-webkit-scrollbar-thumb{background:#3a424e;border-radius:4px}
#histList .hint{color:var(--dim);font-size:12px;text-align:center;padding:30px 10px;
  line-height:1.9;white-space:pre-line}

.hrow{display:flex;align-items:stretch;border-radius:8px;overflow:hidden;
  background:var(--chrome-2);border:1px solid var(--line)}
.hrow:hover{border-color:var(--accent)}
.hmain{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px;
  padding:7px 9px;text-align:left;color:var(--txt)}
.hmain .htitle{font-size:12.5px;line-height:1.3;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.hmain .hmeta{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar{display:block;height:3px;border-radius:2px;background:#2a303a;overflow:hidden}
.hbar i{display:block;height:100%;background:var(--accent)}
.hdel{flex:0 0 auto;width:30px;border-left:1px solid var(--line);color:var(--dim);font-size:12px}
.hdel:hover{color:var(--warn);background:rgba(232,184,75,.12)}
/* 低调模式：剧名一律不写（那是屏幕上最扎眼的一行字） */
body.camo .hmain .htitle{display:none}

/* ============ 一键隐藏 ============ */
body.hiding #app{display:none!important}

#hot{
  position:fixed;left:60px;top:60px;width:260px;height:16px;z-index:70;display:none;
  align-items:center;justify-content:center;overflow:hidden;
  border-radius:999px;cursor:pointer;
  background:linear-gradient(90deg,rgba(255,107,53,.18),rgba(255,107,53,.30),rgba(255,107,53,.18));
  border:1px solid rgba(255,107,53,.30);
  color:var(--accent-2);font-size:10.5px;white-space:nowrap;
  opacity:.045;transition:opacity .18s,height .18s;
  -webkit-user-select:none;user-select:none;
}
#hot.show{display:flex}
#hot:hover{opacity:.95;height:22px}
#hot.dragging{cursor:grabbing;opacity:.95;height:22px}
#hot.pulse{animation:pulse 1.1s ease 2}
@keyframes pulse{0%,100%{opacity:.045}50%{opacity:.9}}

/* 帮助面板里的设置行 */
#help .opt{display:flex;align-items:center;gap:12px;margin:9px 0;font-size:12px}
#help .opt .lab{color:var(--dim);flex:0 0 108px}
#help .opt select{flex:0 1 auto;max-width:230px;height:30px}
#help .opt input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
#help .tip{font-size:11.5px;color:var(--dim);line-height:1.85;margin-top:9px}
#help .tip b{color:var(--accent-2)}
#help .tip.warn{color:#c9a94e;border-left:2px solid rgba(232,184,75,.45);padding-left:10px}
#help .tip.warn b{color:var(--warn)}
#help .opt input[type=text]{flex:1 1 auto;min-width:0;max-width:230px;height:30px;
  padding:0 10px;border-radius:8px;background:var(--chrome);border:1px solid var(--line);
  color:var(--txt);font-size:12px;outline:none;-webkit-user-select:text;user-select:text}
#help .opt input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,107,53,.13)}
#help .chips{margin:4px 0 2px}
/* 低调模式：连那个橙色小圆点都别闪 */
body.camo .logo{background:#4a5260;box-shadow:none}