:root { --bg:#0b0f14; --fg:#e8eef5; --muted:#8fa0b3; --accent:#19d3da; --ok:#3ddc84; --warn:#ffb020; --bad:#ff5d5d; --panel:#121a23ee; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg); font:15px/1.35 -apple-system, system-ui, Segoe UI, Roboto, sans-serif; overscroll-behavior:none; }
#app { display:flex; flex-direction:column; height:100%; height:100dvh; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#topbar { display:flex; gap:10px; align-items:center; padding:6px 10px; background:#0006; }
#stepLabel { color:var(--muted); flex:1; }
.pill { padding:2px 10px; border-radius:99px; background:#243241; font-size:12px; }
.pill.ok { background:#1f6b45; } .pill.warn { background:#7a5a10; } .pill.bad { background:#7a2222; }
#stage { position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#000; }
#viewport { position:relative; }
#viewport video, #viewport canvas { position:absolute; left:0; top:0; width:100%; height:100%; }
#video { object-fit:fill; background:#000; }
#overlay { pointer-events:auto; touch-action:none; }
#diagnostics { position:absolute; left:6px; top:6px; margin:0; padding:6px 8px; background:#000a; color:#9ef; font:11px/1.3 ui-monospace, Menlo, monospace; border-radius:6px; pointer-events:none; max-width:70%; white-space:pre-wrap; }
#banner { position:absolute; left:8px; right:8px; bottom:8px; padding:8px 10px; border-radius:8px; background:#7a2222ee; }
.panel { background:var(--panel); padding:8px 10px; max-height:38vh; overflow:auto; }
.screen[hidden] { display:none; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:6px 0; }
button { font:inherit; color:var(--fg); background:#243241; border:1px solid #34475c; border-radius:8px; padding:9px 14px; min-height:40px; }
button.primary { background:var(--accent); color:#032; border-color:var(--accent); font-weight:600; }
button:disabled { opacity:.45; }
label { display:inline-flex; gap:6px; align-items:center; }
input[type=number], input[type=text], select { font:inherit; background:#0d141b; color:var(--fg); border:1px solid #34475c; border-radius:6px; padding:6px; width:5.5em; }
input[type=range] { width:120px; }
.muted { color:var(--muted); margin:4px 0; }

#tabs { display:flex; gap:4px; padding:4px 6px 0; background:var(--panel); overflow-x:auto; }
.tab { flex:1; min-width:max-content; padding:6px 10px; min-height:34px; border-radius:8px 8px 0 0; }
.tab.active { background:var(--accent); color:#032; border-color:var(--accent); }
.tab:disabled { opacity:.35; }
.meter { position:relative; height:14px; background:#0d141b; border:1px solid #34475c; border-radius:7px; overflow:hidden; margin:6px 0; }
.meter > div { height:100%; width:0; background:var(--accent); transition:width .08s; }
.meter > i { position:absolute; top:0; bottom:0; width:2px; background:#fff; opacity:.8; }
.badge { position:absolute; right:8px; top:8px; padding:4px 10px; border-radius:99px; background:#243241dd; font-weight:600; pointer-events:none; }
.badge.ok { background:#1f6b45dd; } .badge.warn { background:#7a5a10dd; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:6px; }
.grid label { justify-content:space-between; }
h4 { margin:8px 0 2px; }

#btnShowPanel { position:absolute; left:8px; bottom:8px; background:#243241dd; }
#app.focus #panel, #app.focus #tabs { display:none; }
.checklist { list-style:none; margin:4px 0; padding:0; }
.checklist li::before { content:'○ '; color:var(--muted); }
.checklist li.ok::before { content:'✓ '; color:var(--ok); }
.checklist li.ok { color:var(--ok); }