:root{
  color-scheme:dark;
  --bg:#080b12;--panel:#0e1420;--panel2:#111a28;--line:#223046;
  --text:#e8eef7;--muted:#8ea0b8;--cyan:#22d3ee;--green:#4ade80;
  --amber:#f59e0b;--red:#fb7185;--purple:#c084fc;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 20% 0,#101d31 0,#080b12 44%);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}
body{padding:28px}
.shell{max-width:1320px;margin:auto}
.header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:22px}
.eyebrow{font:700 11px ui-monospace,monospace;letter-spacing:.22em;color:var(--cyan);margin-bottom:8px}
h1{margin:0;font-size:31px;letter-spacing:-.03em} h1 span{font-size:14px;color:var(--muted);font-weight:500}
.header p,.panel-head p{color:var(--muted);margin:7px 0 0;font-size:13px}
.badge,.mini-badge{border:1px solid var(--line);background:#0a101a;color:var(--muted);border-radius:999px;padding:8px 12px;font:700 11px ui-monospace,monospace;letter-spacing:.08em}
.badge.live{border-color:#165b4b;color:#86efac;background:#0b201b}.badge.error{border-color:#713342;color:#fda4af;background:#251117}
.grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(400px,.9fr);gap:18px}
.panel{background:linear-gradient(180deg,rgba(17,26,40,.97),rgba(11,17,28,.97));border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 20px 70px rgba(0,0,0,.25)}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:14px}
.panel-head h2{font-size:16px;margin:0}
.camera-wrap{position:relative;overflow:hidden;background:#030507;border:1px solid #263448;border-radius:14px;aspect-ratio:4/3;max-height:540px}
#video,#overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#video{transform:scaleX(-1)}
#overlay{pointer-events:none}
.scan{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.35;animation:scan 3s linear infinite;pointer-events:none}
@keyframes scan{from{top:0}to{top:100%}}
.controls{display:flex;gap:10px;margin-top:14px}
.btn{appearance:none;border:1px solid #34445d;background:#121b29;color:#dce7f5;border-radius:10px;padding:10px 14px;font-weight:650;cursor:pointer}
.btn:hover:not(:disabled){border-color:#526987}.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:#0b3440;border-color:#147b8d;color:#9ff4ff}.btn.small{padding:7px 10px;font-size:12px}
.diagnostic-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.diagnostic-strip>div,.roi-quality>div{background:#0a1019;border:1px solid #1e2a3c;border-radius:10px;padding:10px}
.diagnostic-strip span,.roi-quality span,.metric span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.09em}
.diagnostic-strip strong{font:700 17px ui-monospace,monospace;margin-right:3px}.diagnostic-strip small{color:#66778f;font-size:9px}
.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.metric{background:#0a1019;border:1px solid #1f2d41;border-radius:13px;padding:14px;min-height:106px}
.metric strong{display:block;font:700 34px ui-monospace,monospace;margin:8px 0 2px;color:#f4f8fc}
.metric:nth-child(1) strong{color:#fb7185}.metric:nth-child(2) strong{color:var(--purple)}.metric:nth-child(3) strong{color:var(--cyan)}.metric:nth-child(4) strong{color:var(--green)}
.metric small{color:#687990;font-size:10px;text-transform:uppercase}
.signal-box{margin-top:10px;background:#070c13;border:1px solid #1d293b;border-radius:13px;padding:11px}
.signal-head{display:flex;justify-content:space-between;color:#7f90a7;font-size:10px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:8px}
#signalCanvas{display:block;width:100%;height:150px}
.roi-quality{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.roi-quality b{display:block;margin-top:5px;font:700 14px ui-monospace,monospace}
.note{margin-top:12px;color:#728399;font-size:11px;line-height:1.55;border-left:2px solid #2c405b;padding-left:10px}
.log-panel{margin-top:18px}
#telemetry{margin:0;background:#070b11;border:1px solid #1b2638;border-radius:12px;padding:13px;min-height:90px;max-height:220px;overflow:auto;color:#9cc7d6;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}
@media(max-width:900px){body{padding:15px}.grid{grid-template-columns:1fr}.header{align-items:center}.diagnostic-strip{grid-template-columns:repeat(2,1fr)}}

.metrics.four{grid-template-columns:repeat(4,1fr)}
.quality-block{margin-top:12px}
.quality-head{display:flex;justify-content:space-between;align-items:center;color:#9aa7b7;font-size:11px;letter-spacing:.12em}
.quality-head strong{color:#22d3ee;font:700 13px ui-monospace,monospace}
.quality-track,.kinetic-track{height:8px;background:#1a202c;border-radius:999px;overflow:hidden;margin-top:8px}
.quality-bar{height:100%;width:0;background:linear-gradient(90deg,#f59e0b,#22d3ee);transition:width .35s ease}
.protocol-card{margin-top:14px;border:1px solid rgba(34,211,238,.28);border-radius:14px;padding:14px;background:rgba(6,14,24,.7)}
.protocol-top{display:flex;justify-content:space-between;gap:16px;color:#8d98a8;font-size:11px}
.protocol-name{color:#22d3ee;font-weight:800;letter-spacing:.2em}
.protocol-main{font-size:16px;margin-top:10px;color:#dce5ef}
.protocol-sub{font-size:12px;color:#22d3ee;margin-top:10px}
.kinetic-panel{margin-top:18px}
.kinetic-value{font:800 34px ui-monospace,monospace;color:#22d3ee}
.kinetic-track{height:7px}
.kinetic-bar{height:100%;width:0;background:linear-gradient(90deg,#06b6d4,#8b5cf6);transition:width .35s ease}
.kinetic-foot{display:flex;justify-content:space-between;color:#75849a;font-size:11px;margin-top:8px}
@media(max-width:900px){.metrics.four{grid-template-columns:repeat(2,1fr)}}

.calibration-panel{margin-top:18px}
.cal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cal-card{background:#0a1019;border:1px solid #1f2d41;border-radius:12px;padding:12px}
.cal-card span{display:block;color:#8ea0b8;font-size:10px;text-transform:uppercase;letter-spacing:.09em}
.cal-card strong{display:block;margin-top:6px;font:750 24px ui-monospace,monospace;color:#e8eef7}
.cal-card small{color:#6f8198;font-size:10px}
.roi-cal{margin-top:10px}
.reference-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;margin-top:14px;align-items:end}
.reference-row label{display:flex;flex-direction:column;gap:6px;color:#8ea0b8;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.reference-row input{width:100%;background:#080d15;color:#e8eef7;border:1px solid #26364d;border-radius:9px;padding:10px;font:700 14px ui-monospace,monospace;outline:none}
.reference-row input:focus{border-color:#22d3ee}
.cal-result{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr;gap:8px 12px;align-items:center;margin-top:12px;padding:10px 12px;background:#080d15;border:1px solid #1d293b;border-radius:10px;font-size:11px;color:#8ea0b8}
.cal-result strong{font:700 13px ui-monospace,monospace;color:#dce7f5}
#comparisonLog{margin:10px 0 0;background:#070b11;border:1px solid #1b2638;border-radius:10px;padding:11px;min-height:52px;max-height:180px;overflow:auto;color:#9cc7d6;font:11px/1.5 ui-monospace,monospace;white-space:pre-wrap}
@media(max-width:900px){.cal-grid{grid-template-columns:repeat(2,1fr)}.reference-row{grid-template-columns:1fr 1fr}.cal-result{grid-template-columns:auto 1fr}}

.cal-grid.five{grid-template-columns:repeat(6,1fr)}
.harmonic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.harmonic-card{background:#090f18;border:1px solid #243149;border-radius:12px;padding:12px}
.harmonic-card span{display:block;color:#8ea0b8;font-size:10px;text-transform:uppercase;letter-spacing:.09em}
.harmonic-card strong{display:block;margin-top:6px;font:750 22px ui-monospace,monospace;color:#e8eef7}
.harmonic-card small{color:#6f8198;font-size:10px}
@media(max-width:1100px){.cal-grid.five{grid-template-columns:repeat(3,1fr)}.harmonic-grid{grid-template-columns:repeat(2,1fr)}}