:root{--bg:#0b0d10;--panel:#14181d;--line:#262c34;--text:#e6e9ee;--dim:#9aa4b2;--accent:#3b82f6;--warn:#f59e0b}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,Segoe UI,Roboto,sans-serif}
.player{position:relative;width:100%;height:100vh;overflow:hidden;background:#000}
.layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
#thumb{filter:blur(0);transition:opacity .35s ease}
#video{opacity:0;transition:opacity .35s ease}
#video.show{opacity:1}
#thumb.hide{opacity:0}
.badge{position:absolute;top:10px;left:10px;padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.6);
  border:1px solid var(--line);color:var(--text);font-size:12px;letter-spacing:.02em}
.badge.live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#22c55e;margin-right:6px;vertical-align:1px}
.badge.warn{border-color:var(--warn);color:#fde68a}
.offline{position:absolute;top:10px;right:10px;padding:4px 9px;border-radius:6px;background:rgba(0,0,0,.65);
  border:1px solid var(--warn);color:#fde68a;font-size:12px}
.controls{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;align-items:center;padding:8px;
  background:linear-gradient(transparent,rgba(0,0,0,.75));flex-wrap:wrap;
  transition:opacity .25s ease,transform .25s ease}
.controls.off{opacity:0;transform:translateY(8px);pointer-events:none}
.showbtn{position:absolute;left:10px;bottom:10px;width:34px;height:34px;border-radius:8px;cursor:pointer;
  background:rgba(20,24,29,.8);border:1px solid var(--line);color:var(--text);font-size:15px;line-height:1;
  display:grid;place-items:center}
.showbtn:hover{border-color:#39414c}
.btn.icon{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px}
.btn.icon svg,.showbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.group{display:flex;gap:4px;align-items:center}
.group.right{margin-left:auto}
.btn,.sel{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:7px;
  padding:6px 10px;font-size:13px;cursor:pointer}
.btn:hover{border-color:#39414c}
.btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
.meter{color:var(--dim);font-size:11px;line-height:1.25;min-width:110px;text-align:right}
.meter b{color:var(--text);font-size:13px;font-weight:600}
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55)}
.overlay.hidden,.hidden{display:none}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 22px;text-align:center}
.card p{margin:0 0 12px}
.primary{background:var(--accent);border:0;color:#fff;border-radius:8px;padding:8px 16px;font-size:14px;cursor:pointer}
.play{width:68px;height:68px;border-radius:50%;border:1px solid var(--line);background:rgba(20,24,29,.85);
  color:#fff;font-size:26px;cursor:pointer}