:root {
  --bg: #0e0f11;
  --bar: #17191c;
  --line: #2a2d32;
  --fg: #d9dce1;
  --dim: #8b9099;
  --accent: #4c8dff;
  --ok: #3ccf7a;
  --warn: #f2b33d;
  --bad: #ef5a5a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden; }

#bar { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: var(--bar); border-bottom: 1px solid var(--line); white-space: nowrap; }
#bar .spacer { flex: 1; }
#bar button { background: transparent; color: var(--fg); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 9px; font: inherit; cursor: pointer; }
#bar button:hover { border-color: var(--dim); }
#bar button.on { border-color: var(--accent); color: var(--accent); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); }
.stats { color: var(--dim); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
body.fs #bar { display: none; }

#stage { position: absolute; inset: 36px 0 0 0; overflow: hidden; outline: none; background: #000; }
body.fs #stage { top: 0; }
#stage.one2one { overflow: auto; }
#video { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
#stage.one2one #video { object-fit: fill; }
/* Keyboard sink: focused, invisible, receives key and paste events. */
#kb { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0;
  resize: none; pointer-events: none; }

.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(14,15,17,.92); }
.overlay.hidden { display: none; }
#login { width: min(320px, calc(100vw - 32px)); display: grid; gap: 12px; }
#login h1 { font-size: 18px; margin: 0 0 4px; font-weight: 600; }
#login label { display: grid; gap: 4px; color: var(--dim); }
#login label.check { display: flex; gap: 8px; align-items: center; }
#login input:not([type=checkbox]) { background: var(--bar); color: var(--fg); border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 10px; font: inherit; }
#login input:focus { outline: 1px solid var(--accent); }
#login button { background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 9px; font: inherit;
  font-weight: 600; cursor: pointer; }
.msg { color: var(--warn); min-height: 1.4em; margin: 0; }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--bar);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; opacity: 0; transition: opacity .2s;
  pointer-events: none; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; }

@media (max-width: 700px) {
  #bar .stats { display: none; }
}