/* ============================================================
   云幕剧场 · 样式表
   深色影院风 + B 站式信息密度
   ============================================================ */

:root{
  --bg:#0d0f13;
  --bg-soft:#12151b;
  --surface:#171b22;
  --surface-2:#1e232c;
  --line:#262c37;
  --text:#eef1f6;
  --muted:#98a1b0;
  --dim:#6c7686;
  --accent:#00aeec;
  --accent-2:#fb7299;
  --accent-grad:linear-gradient(135deg,#00aeec 0%,#4f8cff 45%,#fb7299 100%);
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 8px 28px rgba(0,0,0,.45);
  --topbar-h:58px;
  --maxw:1560px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  min-height:100vh;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(0,174,236,.13), transparent 62%),
    radial-gradient(900px 460px at 92% 0%, rgba(251,114,153,.10), transparent 60%);
  pointer-events:none;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
img{display:block;max-width:100%}
::selection{background:rgba(0,174,236,.35)}

/* ---------------- 顶栏 ---------------- */
.topbar{
  position:sticky;top:0;z-index:80;
  height:var(--topbar-h);
  background:rgba(13,15,19,.82);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:var(--maxw);margin:0 auto;height:100%;
  display:flex;align-items:center;gap:18px;
  padding:0 20px;
}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.brand-mark{
  width:26px;height:26px;border-radius:9px;
  background:var(--accent-grad);
  box-shadow:0 0 18px rgba(0,174,236,.5);
  position:relative;
}
.brand-mark::after{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='%230b0d11'/%3E%3C/svg%3E") center/16px no-repeat;
}
.brand-name{font-weight:700;font-size:17px;letter-spacing:.4px}
.nav{display:flex;gap:4px;flex:0 1 auto;overflow:hidden}
.nav-item{
  padding:7px 12px;border-radius:8px;color:var(--muted);
  font-size:14.5px;white-space:nowrap;transition:.18s;
}
.nav-item:hover{color:var(--text);background:var(--surface)}
.nav-item.on{color:#fff;background:var(--surface-2);font-weight:600}

.searchbox{
  position:relative;flex:1 1 340px;max-width:440px;margin-left:auto;
  display:flex;align-items:center;
  background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:0 14px;height:38px;
  transition:.2s;
}
.searchbox:focus-within{border-color:rgba(0,174,236,.6);box-shadow:0 0 0 3px rgba(0,174,236,.12)}
.searchbox .ico{width:17px;height:17px;fill:var(--dim);flex:0 0 auto}
.searchbox input{
  flex:1;background:none;border:0;outline:none;color:var(--text);
  padding:0 9px;font-size:14px;
}
.searchbox input::-webkit-search-cancel-button{display:none}
.suggest{
  position:absolute;top:46px;left:0;right:0;
  background:var(--surface);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);
  overflow:hidden;display:none;
}
.suggest.show{display:block}
.suggest a,.suggest div{
  display:flex;align-items:center;gap:10px;
  padding:9px 13px;font-size:14px;color:var(--muted);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.suggest a:last-child{border-bottom:0}
.suggest a:hover,.suggest div:hover{background:var(--surface-2);color:var(--text)}
.suggest img{width:30px;height:40px;object-fit:cover;border-radius:5px;flex:0 0 auto;background:var(--surface-2)}
.suggest .tag{margin-left:auto;font-size:11.5px;color:var(--dim);border:1px solid var(--line);border-radius:5px;padding:1px 6px}

.topbar-right{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.iconbtn{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  color:var(--muted);transition:.18s;
}
.iconbtn:hover{background:var(--surface);color:var(--text)}
.iconbtn .ico{width:19px;height:19px;fill:currentColor}
.menu{position:relative}
.avatar{
  width:34px;height:34px;border-radius:50%;
  background:var(--accent-grad);color:#0b0d11;font-weight:700;font-size:13px;
  display:grid;place-items:center;
}
.dropdown{
  position:absolute;right:0;top:44px;min-width:150px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:6px;
  display:none;
}
.dropdown.show{display:block}
.dropdown a,.dropdown button{
  display:block;width:100%;text-align:left;padding:9px 11px;border-radius:8px;
  font-size:14px;color:var(--muted);
}
.dropdown a:hover,.dropdown button:hover{background:var(--surface-2);color:var(--text)}

/* ---------------- 页面骨架 ---------------- */
.page{max-width:var(--maxw);margin:0 auto;padding:26px 20px 70px}
.foot{
  max-width:var(--maxw);margin:0 auto;padding:26px 20px 40px;
  color:var(--dim);font-size:12.5px;display:flex;gap:8px;flex-wrap:wrap;
}
.foot .dot{opacity:.5}

/* ---------------- 继续观看 ---------------- */
.section{margin-bottom:38px}
.section-head{display:flex;align-items:baseline;gap:12px;margin-bottom:15px}
.section-title{font-size:19px;font-weight:700;letter-spacing:.3px;margin:0}
.section-title .bar{
  display:inline-block;width:4px;height:17px;border-radius:2px;
  background:var(--accent-grad);margin-right:9px;vertical-align:-2px;
}
.section-more{margin-left:auto;color:var(--muted);font-size:13.5px;transition:.18s}
.section-more:hover{color:var(--accent)}

.rail{position:relative}
.rail-track{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(150px,1fr);
  gap:15px;overflow-x:auto;scroll-behavior:smooth;
  padding-bottom:6px;scrollbar-width:thin;
}
.rail-track::-webkit-scrollbar{height:6px}
.rail-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.rail-nav{
  position:absolute;top:38%;width:34px;height:52px;border-radius:9px;
  background:rgba(20,24,31,.9);border:1px solid var(--line);
  display:grid;place-items:center;color:#fff;opacity:0;transition:.2s;z-index:5;
}
.rail:hover .rail-nav{opacity:1}
.rail-nav.prev{left:-14px}
.rail-nav.next{right:-14px}
.rail-nav:hover{background:var(--surface-2)}

/* ---------------- 卡片 ---------------- */
.grid{
  display:grid;gap:16px 15px;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
}
.card{position:relative;display:block}
.card-cover{
  position:relative;width:100%;aspect-ratio:3/4;
  border-radius:var(--radius);overflow:hidden;background:var(--surface-2);
  box-shadow:0 3px 14px rgba(0,0,0,.35);
}
.card-cover img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .38s cubic-bezier(.2,.7,.3,1), filter .3s;
}
.card:hover .card-cover img{transform:scale(1.06)}
.card-cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.12) 34%,transparent 62%);
  opacity:.92;
}
.card-play{
  position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;transition:.22s;z-index:3;
}
.card:hover .card-play{opacity:1}
.card-play span{
  width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.5);backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.7);
  display:grid;place-items:center;
}
.card-play svg{width:18px;height:18px;fill:#fff;margin-left:2px}
.card-badges{
  position:absolute;left:9px;right:9px;bottom:9px;z-index:2;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.badge{
  font-size:11.5px;line-height:1;padding:4px 6px;border-radius:5px;
  background:rgba(0,0,0,.62);color:#e9edf3;backdrop-filter:blur(4px);
  white-space:nowrap;
}
.badge.src{background:rgba(0,174,236,.9);color:#04222e;font-weight:700}
.badge.done{background:rgba(76,217,100,.85);color:#04220a;font-weight:600}
.badge.vip{background:rgba(251,114,153,.9);color:#2b0713;font-weight:600}
.card-title{
  margin-top:9px;font-size:13.8px;line-height:1.42;font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;color:#e7ebf2;
}
.card-meta{
  margin-top:5px;font-size:12px;color:var(--dim);
  display:flex;gap:7px;align-items:center;flex-wrap:wrap;
}
.card-meta .up{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%}
.card-progress{
  position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.16);z-index:4;
}
.card-progress i{display:block;height:100%;background:var(--accent);border-radius:0 2px 2px 0}

/* ---------------- 大图 banner ---------------- */
.hero{
  position:relative;border-radius:18px;overflow:hidden;margin-bottom:34px;
  min-height:270px;display:flex;align-items:flex-end;
  border:1px solid var(--line);
  background:var(--surface);
}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:blur(22px) saturate(140%);transform:scale(1.15);opacity:.55}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,11,15,.94) 0%,rgba(9,11,15,.72) 46%,rgba(9,11,15,.32) 100%)}
.hero-inner{position:relative;display:flex;gap:22px;padding:26px 28px;align-items:flex-end;width:100%}
.hero-poster{
  width:126px;flex:0 0 auto;aspect-ratio:3/4;border-radius:12px;overflow:hidden;
  box-shadow:0 12px 34px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.1);
}
.hero-poster img{width:100%;height:100%;object-fit:cover}
.hero-body{flex:1;min-width:0;padding-bottom:4px}
.hero-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;padding:3px 9px;border-radius:999px;
  background:rgba(0,174,236,.16);color:#7fd8f7;border:1px solid rgba(0,174,236,.3);
  margin-bottom:9px;
}
.hero-title{font-size:27px;font-weight:800;margin:0 0 8px;line-height:1.22;letter-spacing:.2px}
.hero-desc{
  color:var(--muted);font-size:13.6px;max-width:720px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hero-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:999px;font-size:14px;font-weight:600;
  background:var(--surface-2);color:var(--text);border:1px solid var(--line);
  transition:.18s;
}
.btn:hover{background:#252b36;transform:translateY(-1px)}
.btn.primary{background:var(--accent);color:#04222e;border-color:transparent;box-shadow:0 6px 20px rgba(0,174,236,.35)}
.btn.primary:hover{background:#28bdf0}
.btn svg{width:16px;height:16px;fill:currentColor}

/* ---------------- 详情页 ---------------- */
.detail-top{
  position:relative;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);margin-bottom:26px;
}
.detail-top .bg{position:absolute;inset:0}
.detail-top .bg img{width:100%;height:100%;object-fit:cover;filter:blur(30px) saturate(130%);transform:scale(1.2);opacity:.4}
.detail-top .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,16,.6),rgba(10,12,16,.95))}
.detail-inner{position:relative;display:flex;gap:26px;padding:26px 28px}
.detail-poster{
  width:190px;flex:0 0 auto;aspect-ratio:3/4;border-radius:14px;overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08);
}
.detail-poster img{width:100%;height:100%;object-fit:cover}
.detail-info{flex:1;min-width:0}
.detail-title{font-size:26px;font-weight:800;margin:0 0 12px;line-height:1.25}
.detail-meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:13.5px;margin-bottom:12px}
.detail-meta b{color:var(--text);font-weight:600}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tag{
  font-size:12.5px;padding:4px 10px;border-radius:999px;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--line);
}
.detail-desc{
  color:var(--muted);font-size:14px;line-height:1.72;white-space:pre-wrap;
  max-height:4.9em;overflow:hidden;transition:max-height .3s;position:relative;
}
.detail-desc.open{max-height:1200px}
.desc-toggle{color:var(--accent);font-size:13px;margin-top:6px;display:inline-block}

.eps-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.eps-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.eps-head h3{margin:0;font-size:16px}
.eps-head .count{color:var(--dim);font-size:13px}
.eps-grid{
  display:grid;gap:9px;
  grid-template-columns:repeat(auto-fill,minmax(64px,1fr));
}
.ep{
  position:relative;display:grid;place-items:center;
  height:40px;border-radius:8px;background:var(--surface-2);
  border:1px solid transparent;font-size:13.5px;color:#cfd6e2;
  transition:.16s;
}
.ep:hover{background:#2a313d;color:#fff;transform:translateY(-1px)}
.ep.on{background:rgba(0,174,236,.16);border-color:rgba(0,174,236,.65);color:#7fd8f7;font-weight:700}
.ep.locked{color:var(--dim)}
.ep.locked::after{
  content:"VIP";position:absolute;top:2px;right:3px;
  font-size:8.5px;color:var(--accent-2);font-weight:700;
}
.ep-num{font-variant-numeric:tabular-nums}

/* ---------------- 播放页 ---------------- */
.watch-wrap{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:20px;align-items:start}
@media (max-width:1080px){.watch-wrap{grid-template-columns:minmax(0,1fr)}}

.player{
  position:relative;background:#000;border-radius:14px;overflow:hidden;
  aspect-ratio:16/9;box-shadow:0 14px 44px rgba(0,0,0,.55);
}
.player.vertical{aspect-ratio:9/16;max-height:calc(100vh - 150px);margin:0 auto}
.player video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.player:fullscreen{border-radius:0;aspect-ratio:auto;height:100vh}
.player:fullscreen video{height:100vh}

.pl-center{
  position:absolute;inset:0;display:grid;place-items:center;
  pointer-events:none;z-index:3;
}
.pl-big{
  width:74px;height:74px;border-radius:50%;
  background:rgba(0,0,0,.5);backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.55);
  display:grid;place-items:center;pointer-events:auto;
  transition:.2s;opacity:0;
}
.pl-big svg{width:28px;height:28px;fill:#fff}
.player.paused .pl-big{opacity:1}
.pl-big:hover{transform:scale(1.06);background:rgba(0,174,236,.35)}

.pl-spinner{
  position:absolute;inset:0;display:none;place-items:center;z-index:4;
  background:rgba(0,0,0,.25);
}
.pl-spinner.show{display:grid}
.spin{
  width:44px;height:44px;border-radius:50%;
  border:3px solid rgba(255,255,255,.2);border-top-color:var(--accent);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.pl-err{
  position:absolute;inset:0;display:none;z-index:6;
  background:rgba(8,10,14,.86);backdrop-filter:blur(4px);
  padding:24px;text-align:center;
}
.pl-err.show{display:grid;place-items:center}
.pl-err-inner{max-width:520px}
.pl-err h4{margin:0 0 8px;font-size:17px}
.pl-err p{margin:0 0 16px;color:var(--muted);font-size:13.5px;word-break:break-all}

.controls{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding:34px 14px 10px;
  background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.55) 45%,transparent);
  opacity:0;transition:opacity .22s;
}
.player.show-ctrl .controls,.player:hover .controls{opacity:1}
.player.hide-cursor{cursor:none}

.bar{
  position:relative;height:16px;display:flex;align-items:center;cursor:pointer;
  margin-bottom:4px;
}
.bar-bg{
  position:relative;width:100%;height:4px;border-radius:2px;
  background:rgba(255,255,255,.22);overflow:visible;transition:height .15s;
}
.bar:hover .bar-bg{height:6px}
.bar-buf{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.34);border-radius:2px}
.bar-play{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:2px}
.bar-dot{
  position:absolute;top:50%;width:13px;height:13px;border-radius:50%;
  background:#fff;transform:translate(-50%,-50%) scale(0);
  transition:transform .15s;box-shadow:0 0 8px rgba(0,0,0,.6);
}
.bar:hover .bar-dot,.bar.dragging .bar-dot{transform:translate(-50%,-50%) scale(1)}
.bar-tip{
  position:absolute;bottom:22px;transform:translateX(-50%);
  background:rgba(0,0,0,.85);color:#fff;font-size:11.5px;
  padding:2px 7px;border-radius:4px;pointer-events:none;display:none;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.bar:hover .bar-tip{display:block}

.ctrl-row{display:flex;align-items:center;gap:8px;color:#fff}
.ctrl-row .grow{flex:1}
.cbtn{
  width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  color:#e8ecf2;transition:.16s;
}
.cbtn:hover{background:rgba(255,255,255,.14)}
.cbtn svg{width:19px;height:19px;fill:currentColor}
.time{font-size:12.5px;color:#cfd6e2;font-variant-numeric:tabular-nums;padding:0 4px;white-space:nowrap}
.vol{display:flex;align-items:center;gap:2px}
.vol-slider{
  width:0;overflow:hidden;transition:width .2s;
  display:flex;align-items:center;
}
.vol:hover .vol-slider,.vol:focus-within .vol-slider{width:76px}
input[type=range].rng{
  -webkit-appearance:none;appearance:none;width:76px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.34);outline:none;
}
input[type=range].rng::-webkit-slider-thumb{
  -webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:#fff;
}
input[type=range].rng::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:#fff}

.sel{position:relative}
.sel-btn{
  padding:5px 9px;border-radius:6px;font-size:12.5px;color:#e8ecf2;
  background:rgba(255,255,255,.1);white-space:nowrap;
}
.sel-btn:hover{background:rgba(255,255,255,.2)}
.sel-menu{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  background:rgba(16,19,25,.97);border:1px solid var(--line);
  border-radius:10px;padding:5px;min-width:96px;display:none;
  box-shadow:var(--shadow);
}
.sel.open .sel-menu{display:block}
.sel-menu button{
  display:block;width:100%;text-align:center;padding:7px 10px;border-radius:6px;
  font-size:12.5px;color:#cfd6e2;white-space:nowrap;
}
.sel-menu button:hover{background:rgba(255,255,255,.1);color:#fff}
.sel-menu button.on{color:var(--accent);font-weight:700}

.watch-info{margin-top:16px}
.watch-title{font-size:19px;font-weight:700;margin:0 0 8px;line-height:1.35}
.watch-sub{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13px;align-items:center}
.watch-actions{margin-left:auto;display:flex;gap:8px}
.chip{
  padding:7px 14px;border-radius:999px;background:var(--surface);
  border:1px solid var(--line);font-size:13px;color:var(--muted);transition:.16s;
}
.chip:hover{color:var(--text);border-color:#39414f}
.chip.on{background:rgba(251,114,153,.14);border-color:rgba(251,114,153,.5);color:#ff9ab8}

.ep-side{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.ep-side-head{
  padding:13px 16px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;
}
.ep-side-head .count{color:var(--dim);font-weight:400;font-size:12.5px;margin-left:auto}
.ep-list{max-height:560px;overflow-y:auto;padding:8px;scrollbar-width:thin}
.ep-list::-webkit-scrollbar{width:6px}
.ep-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.ep-item{
  display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;
  font-size:13.5px;color:var(--muted);transition:.14s;
}
.ep-item:hover{background:var(--surface-2);color:var(--text)}
.ep-item.on{background:rgba(0,174,236,.14);color:#7fd8f7;font-weight:600}
.ep-item .n{
  width:26px;height:26px;border-radius:6px;background:var(--surface-2);
  display:grid;place-items:center;font-size:12px;flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.ep-item.on .n{background:rgba(0,174,236,.24);color:#7fd8f7}
.ep-item .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-item .lk{margin-left:auto;font-size:10px;color:var(--accent-2);border:1px solid rgba(251,114,153,.4);border-radius:4px;padding:1px 4px}

/* 自动下一集浮层 */
.next-toast{
  position:absolute;right:16px;bottom:86px;z-index:7;
  background:rgba(16,19,25,.95);border:1px solid var(--line);
  border-radius:12px;padding:13px 15px;display:none;min-width:210px;
  box-shadow:var(--shadow);
}
.next-toast.show{display:block}
.next-toast p{margin:0 0 10px;font-size:13px;color:var(--muted)}
.next-toast p b{color:var(--text)}
.next-toast .row{display:flex;gap:8px}
.next-toast button{
  padding:7px 13px;border-radius:8px;font-size:13px;
}
.next-toast .go{background:var(--accent);color:#04222e;font-weight:600}
.next-toast .no{background:var(--surface-2);color:var(--muted)}

/* 快捷键提示 */
.kbd-hint{
  position:absolute;left:16px;bottom:86px;z-index:7;
  background:rgba(16,19,25,.92);border:1px solid var(--line);
  border-radius:10px;padding:10px 13px;font-size:12px;color:var(--muted);
  display:none;line-height:1.85;
}
.kbd-hint.show{display:block}
.kbd-hint kbd{
  background:var(--surface-2);border:1px solid var(--line);border-radius:4px;
  padding:1px 5px;font-size:11px;color:#cfd6e2;font-family:inherit;
}

/* ---------------- 表单 / 后台 ---------------- */
.panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 24px;margin-bottom:18px;
}
.panel h2{margin:0 0 16px;font-size:17px;display:flex;align-items:center;gap:9px}
.panel h2 .bar{width:3px;height:15px;background:var(--accent-grad);border-radius:2px;display:inline-block}
.field{margin-bottom:15px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field input:not([type=checkbox]):not([type=hidden]):not([type=range]),.field select{
  width:100%;max-width:420px;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:9px;padding:10px 13px;color:var(--text);outline:none;font-size:14px;
}
.field input:focus,.field select:focus{border-color:rgba(0,174,236,.6)}
.field .hint{font-size:12px;color:var(--dim);margin-top:5px}
.switch-row{display:flex;align-items:center;gap:11px;padding:9px 0}
.switch{
  width:40px;height:22px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--line);position:relative;transition:.2s;flex:0 0 auto;
}
.switch::after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:var(--dim);transition:.2s;
}
.switch.on{background:rgba(0,174,236,.28);border-color:rgba(0,174,236,.6)}
.switch.on::after{left:20px;background:var(--accent)}
.switch input{display:none}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.stat{display:flex;gap:20px;flex-wrap:wrap}
.stat div{background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:13px 17px;min-width:120px}
.stat b{display:block;font-size:20px;font-weight:700;margin-bottom:2px}
.stat span{font-size:12px;color:var(--dim)}
.msg{padding:11px 15px;border-radius:9px;font-size:13.5px;margin-bottom:16px}
.msg.ok{background:rgba(76,217,100,.12);border:1px solid rgba(76,217,100,.35);color:#8ce9a3}
.msg.err{background:rgba(251,114,153,.12);border:1px solid rgba(251,114,153,.35);color:#ff9ab8}

/* ---------------- 登录 ---------------- */
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{
  width:100%;max-width:392px;background:var(--surface);
  border:1px solid var(--line);border-radius:20px;padding:34px 30px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.login-card .brand{justify-content:center;margin-bottom:8px}
.login-card h1{font-size:19px;text-align:center;margin:0 0 5px}
.login-card .sub{text-align:center;color:var(--dim);font-size:13px;margin:0 0 24px}
.login-card input{
  width:100%;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:11px;padding:13px 15px;color:var(--text);outline:none;
  font-size:15px;margin-bottom:13px;transition:.18s;
}
.login-card input:focus{border-color:rgba(0,174,236,.7);box-shadow:0 0 0 3px rgba(0,174,236,.12)}
.login-card .btn{width:100%;justify-content:center;padding:12px}
.login-foot{text-align:center;color:var(--dim);font-size:12px;margin-top:18px}

/* ---------------- 空态 ---------------- */
.empty{
  text-align:center;padding:70px 20px;color:var(--dim);
}
.empty svg{width:52px;height:52px;fill:var(--line);margin-bottom:14px}
.empty p{margin:0;font-size:14px}

/* ---------------- 响应式 ---------------- */
@media (max-width:1180px){
  .nav{display:none}
}
@media (max-width:860px){
  .page{padding:18px 13px 60px}
  .topbar-inner{padding:0 13px;gap:10px}
  .brand-name{display:none}
  .searchbox{max-width:none;flex:1 1 auto}
  .grid{grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:13px 11px}
  .rail-track{grid-auto-columns:minmax(126px,1fr)}
  .hero-inner{padding:18px;gap:15px}
  .hero-poster{width:96px}
  .hero-title{font-size:20px}
  .hero-desc{-webkit-line-clamp:2}
  .detail-inner{flex-direction:column;padding:18px}
  .detail-poster{width:132px}
  .detail-title{font-size:20px}
  .watch-title{font-size:16px}
  .ep-list{max-height:320px}
  .pl-big{width:60px;height:60px}
  .pl-big svg{width:22px;height:22px}
  .foot{padding:20px 13px 34px}
}
@media (max-width:520px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .rail-track{grid-auto-columns:44%}
  .hero{min-height:0}
  .hero-poster{display:none}
  .card-title{font-size:13px}
}