:root{
  --bg:#0b0f14;--panel:#121821;--text:#e6edf3;--muted:#9aa7b2;--brand:#69e2ff;--accent:#6ad59a;--red:#ff6b6b;--card:#0f141c;--line:#1e2632
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(11,15,20,.9);backdrop-filter:saturate(150%) blur(6px);z-index:2}
.brand{display:flex;gap:8px;align-items:center;font-weight:600}
.logo{font-size:20px}
.actions{display:flex;gap:10px;align-items:center}
select{background:#1c2735;border:1px solid var(--line);color:var(--text);padding:6px 8px;border-radius:8px}
.task{display:flex;gap:6px;align-items:center}
.task-label{color:var(--muted);font-size:12px}
button{background:#1c2735;border:1px solid var(--line);color:var(--text);padding:8px 12px;border-radius:10px;cursor:pointer}
button.primary{background:linear-gradient(135deg,var(--brand),#3bb8ff);color:#001018;border:0;font-weight:600}
button:disabled{opacity:.5;cursor:default}
.switch{position:relative;width:40px;height:22px;display:inline-block}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#364151;border-radius:9999px;transition:.2s}
.slider:before{content:"";position:absolute;height:16px;width:16px;left:3px;top:3px;background:white;border-radius:50%;transition:.2s}
input:checked + .slider{background:var(--accent)}
input:checked + .slider:before{transform:translateX(18px)}
.switch-label{color:var(--muted);font-size:12px}
.range input{vertical-align:middle}

.layout{display:grid;grid-template-columns:1fr 1fr 320px;gap:14px;padding:14px;grid-auto-rows:minmax(220px, 40vh)}
.pane{background:var(--panel);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;min-height:0}
.pane-title{margin:10px 12px;color:var(--muted);font-weight:600}
.stage{position:relative;margin:0 12px 12px;border-radius:12px;background:#0a0f15;border:1px solid var(--line);min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;height:100%}
video,canvas{width:100%;height:100%;object-fit:contain;display:block}
canvas.overlay{position:absolute;inset:0}
canvas.hidden{display:none}

.sidebar{display:flex;flex-direction:column;gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed #1b2430}
.kv:last-child{border-bottom:0}
.k{color:var(--muted)}
.v{color:var(--text)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.legend{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.legend-item{display:flex;gap:8px;align-items:center}
.swatch{width:14px;height:14px;border-radius:3px;border:1px solid var(--line)}
.probs{display:flex;flex-direction:column;gap:6px}
.bar-row{display:flex;align-items:center;gap:8px}
.bar-label{min-width:100px;color:var(--muted);font-size:12px}
.bar{flex:1;height:10px;background:#182230;border:1px solid var(--line);border-radius:999px;position:relative;overflow:hidden}
.bar-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--accent),#4db6ac);border-right:1px solid rgba(0,0,0,0.2)}
.bar-val{width:38px;text-align:right;color:var(--text);font-size:12px}

.foot{display:flex;gap:8px;align-items:center;justify-content:center;padding:10px 14px;border-top:1px solid var(--line);color:var(--muted)}
.foot a{color:var(--brand);text-decoration:none}

@media (max-width: 1100px){
  .layout{grid-template-columns:1fr;grid-auto-rows:minmax(200px, 35vh)}
  .sidebar{grid-row:auto}
}