:root{ --bg:#0b0d10; --panel:#14181d; --ink:#e8eaed; --dim:#9aa0a6; --line:#2a2f37; --accent:#22d3ee; }
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.boot{ padding:40px; color:var(--dim); }
.wrap{ max-width:760px; margin:0 auto; padding:20px 16px 48px; }
header h1{ margin:0; font-size:24px; letter-spacing:.5px; }
.sub{ margin:.25rem 0 1rem; color:var(--dim); }
.stage{ position:relative; width:100%; background:#000; border:1px solid var(--line);
  border-radius:10px; overflow:hidden; min-height:240px; }
#cam{ display:block; width:100%; height:auto; }
#overlay{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hint{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:24px; color:var(--dim); }
.bar{ display:flex; align-items:center; gap:10px; margin:14px 0; }
.spacer{ flex:1; }
.btn{ background:var(--accent); color:#06181c; border:0; border-radius:8px;
  padding:9px 16px; font:inherit; font-weight:600; cursor:pointer; }
.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn:disabled{ opacity:.45; cursor:default; }
.lat{ color:var(--accent); font-variant-numeric:tabular-nums; }
.note{ color:var(--dim); font-size:12.5px; margin-top:16px; }
code{ background:#0f1318; border:1px solid var(--line); border-radius:4px; padding:1px 5px; }
#blazor-error-ui{ position:fixed; bottom:0; left:0; right:0; background:#7f1d1d; color:#fff;
  padding:10px 16px; z-index:1000; }
#blazor-error-ui .reload{ color:#fff; text-decoration:underline; }
#blazor-error-ui .dismiss{ cursor:pointer; float:right; }