:root{
  --bg:#0b0d12; --bg2:#11151d; --card:#151a24; --line:#232a37;
  --txt:#eef1f6; --dim:#8b95a7; --accent:#e8b64c; --danger:#ff5b5b;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --nav-h:58px;
}
body.noir{ --bg:#000; --bg2:#080809; --card:#101013; --line:#1e1e22; }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--txt);
  font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overscroll-behavior:none; user-select:none;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
code{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--accent)}

/* views swap instantly, no slide/fade */
.view{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg)}
.view[hidden]{display:none}

/* ---------- top ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(12px + var(--sat)) 16px 10px;
}
.brand{display:flex;align-items:center;gap:9px}
.brand-mark{width:22px;height:22px;border-radius:7px;
  background:linear-gradient(140deg,var(--accent),#a06b12);
  box-shadow:0 0 14px rgba(232,182,76,.35)}
.brand-name{font-size:17px;font-weight:700;letter-spacing:.2px}

.net-dot{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.6px}
.net-dot i{width:7px;height:7px;border-radius:50%;background:#3ecf8e;
  box-shadow:0 0 8px rgba(62,207,142,.6)}
.net-dot.warn i{background:var(--accent);box-shadow:0 0 8px rgba(232,182,76,.6)}
.net-dot.bad i{background:var(--danger);box-shadow:0 0 8px rgba(255,91,91,.6)}

.search-well{position:relative;padding:0 16px 10px}
.search-well input{
  width:100%;height:44px;padding:0 40px 0 14px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);color:var(--txt);font-size:15px;outline:none;
}
.search-well input::placeholder{color:var(--dim)}
.search-well input:focus{border-color:#3a465c}
.ghost-btn{position:absolute;right:24px;top:11px;width:30px;height:30px;
  border-radius:9px;color:var(--dim);background:var(--line)}
.ghost-btn[hidden]{display:none}

.scroll-well{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:12px}
.block{margin:6px 0 16px}
.block-title{margin:0 16px 9px;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.1px;color:var(--dim)}

/* ---------- rails / grid ---------- */
.rail{display:flex;gap:11px;overflow-x:auto;padding:2px 16px 6px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.mini{flex:0 0 172px;border-radius:12px;overflow:hidden;background:var(--card);border:1px solid var(--line)}
.mini .mimg{height:96px;width:100%;aspect-ratio:auto}
.mini .mbar{height:3px;background:var(--line)}
.mini .mbar i{display:block;height:100%;background:var(--accent)}
.mini .mcap{padding:7px 9px 9px}
.mini .mcap b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .mcap span{font-size:11px;color:var(--dim)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px;padding:2px 16px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:13px;overflow:hidden}
.tile:active{transform:scale(.975)}
.poster{position:relative;aspect-ratio:2/3;background:
  linear-gradient(155deg,#1c2434,#0f131b 60%),
  radial-gradient(120% 60% at 20% 0%,rgba(232,182,76,.14),transparent);}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.poster .badge{position:absolute;left:7px;top:7px;padding:3px 7px;border-radius:6px;
  font-size:10px;font-weight:700;letter-spacing:.5px;background:rgba(0,0,0,.6);color:var(--accent)}
.poster .live{position:absolute;right:7px;top:7px;width:8px;height:8px;border-radius:50%;
  background:#3ecf8e;box-shadow:0 0 9px rgba(62,207,142,.8)}
.poster .noimg{position:absolute;inset:auto 0 40% 0;text-align:center;font-size:26px;color:#2c3648}
.tcap{padding:8px 9px 10px}
.tcap b{display:block;font-size:13px;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcap span{font-size:11px;color:var(--dim)}
.empty{margin:26px 16px;text-align:center;color:var(--dim);font-size:13.5px}

/* ---------- bottom nav (fixed, outside scroll) ---------- */
.bottom-nav{
  display:flex;height:calc(var(--nav-h) + var(--sab));padding-bottom:var(--sab);
  background:var(--bg2);border-top:1px solid var(--line);
}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;font-size:10.5px;letter-spacing:.4px;color:var(--dim)}
.nav-item .ni{font-size:16px;line-height:1}
.nav-item.is-on{color:var(--txt)}
.nav-item.is-on .ni{color:var(--accent)}

/* ---------- player ---------- */
.player{background:#000}
.stage{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;flex:0 0 auto}
.stage video{width:100%;height:100%;object-fit:contain;background:#000}
.stage:fullscreen{aspect-ratio:auto;height:100%;width:100%}

.stage-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;
  padding:10px 12px;background:linear-gradient(180deg,rgba(0,0,0,.72),transparent);
  transition:opacity .16s}
.stage-title{flex:1;min-width:0}
.stage-title b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-title span{font-size:11px;color:#9aa4b4}
.round-btn{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.13);
  display:grid;place-items:center;font-size:14px}

.big-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.25);font-size:24px;display:grid;place-items:center}
.big-play[hidden]{display:none}

.stage-msg{position:absolute;inset:auto 14px 14px;background:rgba(0,0,0,.78);
  border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:12.5px;color:#d8dfe9}

.controls{position:absolute;left:0;right:0;bottom:0;padding:10px 12px 12px;
  background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);transition:opacity .16s}
.controls.hide{opacity:0;pointer-events:none}
.scrub{position:relative;height:22px;display:flex;align-items:center}
.scrub::before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:3px;background:rgba(255,255,255,.2)}
.buffered{position:absolute;left:0;height:4px;border-radius:3px;background:rgba(255,255,255,.34);width:0}
.played{position:absolute;left:0;height:4px;border-radius:3px;background:var(--accent);width:0}
.knob{position:absolute;width:13px;height:13px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px rgba(232,182,76,.35);transform:translateX(-50%);left:0}

.ctl-row{display:flex;align-items:center;gap:8px;margin-top:2px}
.ctl{height:34px;min-width:34px;padding:0 8px;border-radius:9px;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;font-size:14px}
.ctl em{font-size:9px;font-style:normal;margin-left:2px;opacity:.8}
.ctl.main{background:var(--accent);color:#121212;font-weight:700;padding:0 14px}
.ctl.small{font-size:13px}
.pill{height:28px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.28);
  font-size:11.5px;font-weight:600;letter-spacing:.3px;color:#e9edf4}
.pill:active{background:rgba(255,255,255,.16)}
.time{font-size:11.5px;color:#c3cbd8;font-variant-numeric:tabular-nums}
.spacer{flex:1}

.lock-veil{position:absolute;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center}
.lock-veil button{padding:11px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.3);font-size:13px}
.lock-veil[hidden]{display:none}

/* ---------- sheet under player ---------- */
.sheet{flex:1;overflow-y:auto;background:var(--bg);border-radius:18px 18px 0 0;
  margin-top:-14px;padding:18px 16px calc(16px + var(--sab))}
.sheet h3{margin:0 0 8px;font-size:14px;font-weight:600;line-height:1.5;color:#d7deea}
.meta-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.chip{padding:4px 10px;border-radius:999px;background:var(--card);border:1px solid var(--line);
  font-size:11px;color:var(--dim);letter-spacing:.4px}
.chip.on{color:var(--accent);border-color:#3b3a2c}

.action-bar{position:sticky;bottom:0;display:flex;gap:9px;padding-top:12px;
  background:linear-gradient(180deg,transparent,var(--bg) 40%)}
.ab{flex:1;height:42px;border-radius:12px;background:var(--card);border:1px solid var(--line);
  font-size:12.5px;font-weight:600;letter-spacing:.4px}
.ab:active{border-color:var(--accent);color:var(--accent)}
.ab.highlight{background:linear-gradient(135deg,var(--accent),#f39c12);color:#0b0d12;font-weight:700;border-color:transparent;box-shadow:0 2px 12px rgba(232,182,76,.35)}
.ab.highlight:active{opacity:.9;transform:scale(.98)}

/* ---------- sheets / panels ---------- */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:40}
.sheet-panel{position:fixed;left:0;right:0;bottom:0;z-index:41;
  max-height:66vh;overflow-y:auto;background:var(--bg2);
  border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;
  padding:16px 14px calc(16px + var(--sab))}
.sheet-panel h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;
  letter-spacing:1.1px;color:var(--dim)}
.opt{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:13px 12px;border-radius:12px;background:var(--card);
  border:1px solid transparent;margin-bottom:8px;font-size:14px;text-align:left}
.opt:active{border-color:var(--line)}
.opt.is-on{border-color:var(--accent);color:var(--accent)}
.opt small{color:var(--dim);font-size:11px}
.opt.is-on small{color:var(--accent)}

.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 2px;border-bottom:1px solid var(--line);font-size:14px;color:#c9d2e0}
.seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{padding:7px 13px;font-size:12px;color:var(--dim)}
.seg button.is-on{background:var(--accent);color:#141414;font-weight:700}
.set-note{margin:14px 2px 0;font-size:11.5px;color:#5f6a7c}

.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 18px);transform:translateX(-50%);
  z-index:60;padding:10px 16px;border-radius:999px;background:#1b2130;
  border:1px solid var(--line);font-size:12.5px;white-space:nowrap;
  box-shadow:0 10px 26px rgba(0,0,0,.5)}

@media (min-width:760px){
  .view,.player{max-width:520px;margin:0 auto;box-shadow:0 0 80px rgba(0,0,0,.7)}
  .sheet-panel,.backdrop,.toast{max-width:520px;margin:0 auto;left:0;right:0}
  .toast{left:50%}
}