:root{color-scheme:dark;--bg:#09111f;--panel:#111d30;--panel2:#0c1728;--line:#263a55;--text:#e7eef9;--muted:#9bb0ca;--cyan:#31d3d1;--amber:#f9bd57;--green:#69df9c;--red:#ff727c}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 75% -10%,#18355b 0,transparent 34rem),var(--bg);color:var(--text);font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.topbar{min-height:88px;border-bottom:1px solid var(--line);padding:17px clamp(20px,4vw,56px);display:flex;justify-content:space-between;align-items:center;gap:16px;background:#09111fb8;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}h1,h2,h3,p{margin:0}h1{font-size:23px;letter-spacing:-.03em}h2{font-size:16px;letter-spacing:-.015em}h3{font-size:13px}.eyebrow{color:var(--cyan);font:700 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;margin-bottom:4px}.status-wrap{display:flex;align-items:center;gap:8px;color:var(--muted)}.dot{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px currentColor}.dot.ready{background:var(--green);color:var(--green)}.dot.error{background:var(--red);color:var(--red)}main{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;max-width:1680px;margin:0 auto;padding:20px clamp(16px,3vw,42px) 30px}.panel{border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,#121f33f5,#0c1728f5);box-shadow:0 14px 35px #00000029}.controls{padding:18px;align-self:start;position:sticky;top:16px}.controls section+section{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}.controls h2{margin-bottom:12px}label{display:block;color:#c7d6e9;font-size:12px;margin-top:13px}select,input[type=range]{width:100%;margin-top:6px}select{background:#0b1729;color:var(--text);border:1px solid #314863;border-radius:6px;padding:8px}input[type=range]{accent-color:var(--cyan)}output{float:right;color:var(--cyan);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}button,.file-button{display:inline-flex;justify-content:center;align-items:center;min-height:35px;border-radius:6px;padding:8px 10px;cursor:pointer;border:1px solid #3c5574;background:#172943;color:var(--text);font:600 12px inherit}button:hover,.file-button:hover{background:#203957}button.primary{color:#062021;background:var(--cyan);border-color:var(--cyan)}button.primary:hover{background:#67e4df}.button-row{display:flex;gap:8px}.button-row>*{flex:1}.file-button,.wide{width:100%;margin-top:9px}.file-button input{display:none}.muted{color:var(--muted);font-size:12px;margin-top:9px}.workspace{min-width:0}.hero-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,.8fr);gap:18px}.live-panel,.health-panel{padding:16px}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:13px}.chip{flex:none;background:#1d314b;border:1px solid #35506f;color:#c8d6e8;border-radius:99px;padding:4px 8px;font:11px ui-monospace,SFMono-Regular,Menlo,monospace}.canvas-shell{position:relative;overflow:hidden;border-radius:7px;background:#02070e;aspect-ratio:16/9;display:grid;place-items:center}video,.canvas-shell canvas{position:absolute;width:100%;height:100%;object-fit:contain}#video{display:none}#scanCanvas{image-rendering:auto}#overlayCanvas{pointer-events:none}.legend{display:flex;flex-wrap:wrap;gap:17px;color:var(--muted);font-size:11px;margin-top:10px}.legend-line{display:inline-block;width:18px;border-top:3px solid;vertical-align:middle;margin-right:5px}.detected{border-color:var(--green)}.candidate{border-color:var(--amber);border-top-style:dashed}.score{display:grid;place-items:center;min-width:46px;height:46px;border-radius:50%;border:2px solid var(--line);font:700 16px ui-monospace,SFMono-Regular,Menlo,monospace}.score.good{color:var(--green);border-color:var(--green)}.score.warn{color:var(--amber);border-color:var(--amber)}.score.bad{color:var(--red);border-color:var(--red)}.score.neutral{color:var(--muted)}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.metric{min-height:68px;padding:9px;border:1px solid #263d5b;background:#060e1b61;border-radius:7px}.metric .name{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}.metric .value{font-size:18px;font-weight:650;letter-spacing:-.03em;margin-top:4px}.metric .state{font-size:10px;margin-top:2px}.state.good{color:var(--green)}.state.warn{color:var(--amber)}.state.bad{color:var(--red)}.advice{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}.advice ul{padding-left:18px;margin:7px 0 0;color:#c5d3e4;font-size:12px}.advice li+li{margin-top:6px}.debug-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}.preview-panel,.results-panel{padding:16px}.preview-panel canvas{display:block;width:100%;aspect-ratio:16/9;background:#050a12;border-radius:6px;image-rendering:pixelated}.preview-panel p,.results-panel>p{color:var(--muted);font-size:11px;margin-top:9px}.results-panel{grid-column:span 2}.table-wrap{overflow:auto;max-height:210px;border:1px solid #263d5b;border-radius:6px}table{width:100%;border-collapse:collapse;font-size:12px}th{position:sticky;top:0;text-align:left;color:#9db2cb;font:700 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em;background:#14243a}th,td{padding:9px 11px;border-bottom:1px solid #263d5b}tr:last-child td{border:0}.empty{color:var(--muted);text-align:center}footer{border-top:1px solid var(--line);padding:17px max(20px,calc((100vw - 1596px)/2));color:var(--muted);font-size:11px;background:#080f1c}@media(max-width:1000px){main{grid-template-columns:1fr}.controls{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.controls section+section{margin:0;padding:0;border:0}.hero-grid{grid-template-columns:1fr}}@media(max-width:680px){.topbar{min-height:76px}.topbar .status-wrap{font-size:11px}main{padding:12px}.controls{display:block}.controls section+section{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}.debug-grid{grid-template-columns:1fr}.results-panel{grid-column:auto}.metric-grid{grid-template-columns:repeat(4,1fr)}.metric{padding:7px}.metric .value{font-size:15px}.metric .state{display:none}}