:root { --bg:#0b0e12; --panel:#121820; --panel2:#18212b; --line:#273443; --text:#edf3f7; --muted:#8fa1b2; --blue:#54b9ff; --green:#4ed395; --red:#ff6b72; --amber:#f4bd62; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 65% -20%,#173048 0,transparent 38%),var(--bg); color:var(--text); font:14px/1.45 Inter,ui-sans-serif,system-ui,sans-serif; min-height:100vh; }
header { height:100px; display:flex; align-items:center; justify-content:space-between; padding:20px 28px; border-bottom:1px solid var(--line); }
h1 { margin:0; font-size:27px; letter-spacing:-.03em; } .eyebrow { margin:0 0 3px; color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.18em; }
.progress-wrap { width:260px; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }.progress { height:5px; background:#222d38; border-radius:9px; margin-top:9px; overflow:hidden; }.progress i { display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),#8f7dff);transition:.25s; }
main { display:grid; grid-template-columns:230px 1fr; min-height:calc(100vh - 100px); }
aside { padding:22px; border-right:1px solid var(--line); background:rgba(12,16,21,.76); }
label { display:block; color:var(--muted); font-size:11px; font-weight:750; letter-spacing:.04em; margin:0 0 16px; }
input,select,textarea { width:100%; margin-top:6px; background:#0c1117; color:var(--text); border:1px solid #304050; border-radius:8px; padding:9px 10px; font:inherit; outline:none; } input:focus,select:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 2px #54b9ff22; }
button { cursor:pointer; border:1px solid var(--line); background:#17202a; color:var(--text); border-radius:8px; padding:9px 11px; font-weight:700; } button:hover { border-color:#50667a; transform:translateY(-1px); }
.nav-buttons { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:22px 0 12px; }.export { display:block;text-align:center;color:var(--blue);text-decoration:none;border:1px solid #27557a;border-radius:8px;padding:9px; }
.shortcuts { margin-top:28px; border-top:1px solid var(--line); padding-top:14px; color:var(--muted); font-size:12px; }.shortcuts h3 { color:var(--text); font-size:12px;}.shortcuts p{margin:8px 0;}kbd { color:#d9e9f5;background:#293541;border:1px solid #445565;border-bottom-width:2px;border-radius:4px;padding:1px 5px;font:11px ui-monospace,monospace; }
.workspace { padding:22px; display:grid; grid-template-columns:minmax(480px,1.7fr) minmax(300px,.8fr); gap:18px; align-content:start; }
.video-card,.details-card { background:linear-gradient(145deg,var(--panel),#10161d); border:1px solid var(--line); border-radius:13px; box-shadow:0 14px 45px #0005; overflow:hidden; }.video-head { padding:13px 16px; display:flex;justify-content:space-between;align-items:center; }.video-head strong{font-size:18px;margin-left:10px}.pill { background:#20374b;color:#8dd2ff;border:1px solid #315b7c;border-radius:99px;padding:4px 8px;font:10px ui-monospace,monospace; }
.saved-state { color:var(--muted);text-transform:uppercase;font-size:11px;font-weight:800;}.saved-state.keep{color:var(--green)}.saved-state.reject{color:var(--red)}.saved-state.uncertain{color:var(--amber)}
.video-shell { position:relative;background:#050608;aspect-ratio:4/3; }video { width:100%;height:100%;display:block;background:#050608;}.loading { position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);background:#080b0ed9;}.loading.hidden{display:none}.context-legend{display:flex;gap:18px;padding:10px 16px;color:var(--muted);font-size:11px}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.dot.gray{background:#91969e}.dot.blue{background:var(--blue)}
.baseline-panel{padding:12px 16px 14px;border-top:1px solid var(--line);background:#0d141b}.baseline-panel.hidden{display:none}.baseline-summary{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted);margin-bottom:8px}.baseline-summary strong{color:var(--text)}.baseline-timeline,svg#baselineTimeline{display:block;width:100%;height:92px;border:1px solid #24313d;border-radius:6px}.baseline-legend{font-size:10px;color:var(--muted);margin-top:6px}
.metrics-panel{padding:14px 16px 16px;border-top:1px solid var(--line);background:#0d141b}.metrics-panel.hidden{display:none}.metrics-head,.trace-title{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--muted);font-size:11px;margin-bottom:9px}.metrics-head strong,.trace-title strong{color:var(--text)}.vad-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:8px}.feature-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.metric-tile{min-width:0;padding:8px 9px;background:#111b24;border:1px solid #253746;border-radius:7px}.metric-tile span,.metric-tile small{display:block;color:var(--muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metric-tile strong{display:block;margin:2px 0;font:700 15px ui-monospace,monospace;color:#eef7ff}.metric-tile small{color:#6fa5c9}.trace-title{margin-top:12px}.line-key{display:inline-block;width:18px;height:3px;vertical-align:middle;margin-right:4px}.line-key.root{background:#54b9ff}.line-key.pose{background:#a98bff}svg#displacementTimeline{display:block;width:100%;height:190px;border:1px solid #24313d;border-radius:6px}
.details-card { padding:18px; }.details-card h2{font-size:14px;margin:0 0 15px}dl{display:grid;grid-template-columns:80px 1fr;margin:0 0 17px;gap:7px 9px;font-size:12px}dt{color:var(--muted)}dd{margin:0;overflow-wrap:anywhere;font-family:ui-monospace,monospace}.boundary-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.prototype-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.prototype-row button.active{border-color:var(--amber);background:#3b301b;color:#ffd887}
.decision-bar { grid-column:1/-1; display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:#10161d;border:1px solid var(--line);border-radius:12px;padding:11px;position:sticky;bottom:10px;box-shadow:0 12px 40px #0009}.decision.keep:hover{border-color:var(--green)}.decision.reject:hover{border-color:var(--red)}.decision.uncertain:hover{border-color:var(--amber)}.decision kbd{margin-right:4px}
.toast { position:fixed;left:50%;bottom:32px;transform:translate(-50%,15px);opacity:0;background:#eef6fb;color:#10161d;padding:10px 17px;border-radius:8px;font-weight:700;box-shadow:0 8px 30px #0008;transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
.soft{margin:4px 0 0;color:var(--muted);font-size:12px}
body.tracker-mode .curation-only{display:none !important}
body.tracker-mode .tracker-only{display:revert}
/* Unconditional: .tracker-controls sets display:flex from the author stylesheet, which beats
   the UA [hidden]{display:none}. Scoping this rule to body.tracker-mode meant that in
   vadcompose mode applyModeUI() set hidden=true and the controls stayed on screen anyway —
   a checkpoint selector and a reference-ghost toggle visible over a pane that has no rollout
   in it. Needs !important to win against .tracker-controls / .dual-shell display rules. */
.tracker-only[hidden]{display:none !important}
.chk-disabled{opacity:.45;cursor:not-allowed}
body.tracker-mode .decision-bar{grid-template-columns:1fr 1fr}
body.tracker-mode header{height:auto;min-height:100px;align-items:flex-start;padding-top:18px;padding-bottom:18px}
.tracker-controls{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px}
.tracker-controls .chk{display:inline-flex;align-items:center;gap:7px;margin:0;font-weight:650;color:var(--text)}
.tracker-controls input{width:auto;margin:0}
.tracker-controls .left-policy-wrap select{min-width:180px;margin:0;padding:4px 8px;font-size:12px;font-weight:650}
.dual-shell{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#050608;padding:8px}
.dual-shell[hidden]{display:none !important}
.dual-shell .pane{position:relative;background:#050608;border:1px solid #24313d;border-radius:8px;overflow:hidden;aspect-ratio:4/3}
.dual-shell .pane-label{position:absolute;z-index:2;left:10px;top:10px;padding:3px 8px;border-radius:6px;background:#000a;color:#8dd2ff;font:11px ui-monospace,monospace}
.dual-shell video{width:100%;height:100%;display:block;background:#050608;object-fit:contain}
body.tracker-dual #singleShell{display:none}
body.tracker-dual #dualShell{display:grid}
@media(max-width:900px){.dual-shell{grid-template-columns:1fr}}
@media(max-width:900px){main{grid-template-columns:1fr}aside{display:none}.workspace{grid-template-columns:1fr}.decision-bar{grid-template-columns:repeat(3,1fr)}header{padding:16px}.progress-wrap{width:160px}.feature-metrics{grid-template-columns:repeat(2,1fr)}}