:root { --bg:#0b1620; --panel:#11202d; --line:#22384a; --ink:#e8eef3; --muted:#8aa2b3; --accent:#1168bd; }
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin:0; background:var(--bg); color:var(--ink); }
.muted { color:var(--muted); } .err { color:#ff6b6b; min-height:1em; } .ok { color:#5ad17a; }
.center { min-height:100vh; display:grid; place-items:center; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:28px; width:340px; display:flex; flex-direction:column; gap:6px; }
.card h2 { margin:0 0 2px; }
label { font-size:12px; color:var(--muted); margin-top:8px; }
input, select { background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:9px 10px; font-size:14px; }
button { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:10px 12px; font-size:14px; cursor:pointer; margin-top:14px; }
button:disabled { opacity:.6; cursor:default; }
button.ghost { background:#21384a; }
header { padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--line); display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
header input { padding:6px 8px; }
.who { margin-left:auto; font-size:13px; color:var(--muted); }
.wrap { display:grid; grid-template-columns:1fr 320px; gap:12px; padding:12px; }
@media (max-width:860px){ .wrap{ grid-template-columns:1fr; } }
.stage { position:relative; background:#000; border-radius:8px; overflow:hidden; aspect-ratio:16/9; }
video, canvas#ov { position:absolute; inset:0; width:100%; height:100%; display:block; }
canvas#ov { pointer-events:none; }
.panel { background:var(--panel); border-radius:8px; padding:12px; font-size:13px; }
.panel h3 { margin:0 0 8px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.item { border-bottom:1px solid var(--line); padding:6px 0; }
.sev { display:inline-block; padding:1px 6px; border-radius:4px; background:#c62828; color:#fff; font-size:11px; }
small { color:var(--muted); }