:root{--mono:ui-monospace, Menlo, monospace;--sans:ui-sans-serif, system-ui, -apple-system, Helvetica, Arial, sans-serif}*{box-sizing:border-box}html,body{background:#081420;height:100%;margin:0;padding:0}button{-webkit-tap-highlight-color:transparent;font-family:inherit}::selection{color:#06121d;background:#4fd1a1}.app{color:#c8dcea;font-family:var(--sans);background:#081420;flex-direction:column;display:flex;position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}.topbar{background:#0a1c2c;border-bottom:1px solid #15324a;flex:none;align-items:center;gap:18px;padding:11px 18px;display:flex}.brand{flex-direction:column;line-height:1.15;display:flex}.brand-title{letter-spacing:.14em;color:#eaf3fa;font-size:13px;font-weight:700}.brand-spec{letter-spacing:.16em;color:#5d7e98;font-size:10px;font-family:var(--mono)}.spacer{flex:1}.scenario-tabs{flex-wrap:wrap;justify-content:flex-end;gap:6px;display:flex}.divider{background:#1d3d57;width:1px;height:26px;margin:0 2px}.btn-reset{letter-spacing:.04em;cursor:pointer;color:#9fc0d8;background:#0e2336;border:1px solid #2a5675;border-radius:5px;flex:none;padding:6px 14px;font-size:11px;font-weight:600}.tab{letter-spacing:.02em;cursor:pointer;color:#9fc0d8;background:#0e2336;border:1px solid #1d3d57;border-radius:5px;padding:6px 11px;font-size:11px;font-weight:600}.tab.active{color:#aef0d2;background:#4fd1a124;border-color:#4fd1a1}.main{flex:1;min-height:0;display:flex}.stage{background:#081420;flex:1;min-width:0;position:relative}#cv{touch-action:none;width:100%;height:100%;display:block;position:absolute;top:0;bottom:0;left:0;right:0}.grow{text-align:left;flex:1;min-width:0}.kicker{letter-spacing:.16em;color:#5d7e98;font-size:10px;font-family:var(--mono)}.overlay-tl{pointer-events:none;flex-direction:column;gap:8px;display:flex;position:absolute;top:14px;left:14px}.scn-card{-webkit-backdrop-filter:blur(2px);background:#0a1c2cd1;border:1px solid #1d3d57;border-radius:4px;padding:8px 12px}.scn-title{color:#eaf3fa;font-size:14px;font-weight:600}.scn-desc{color:#8aa6bd;max-width:230px;margin-top:2px;font-size:11px;line-height:1.35}.ghost-btn{cursor:pointer;pointer-events:auto;color:#9fc0d8;background:#0e2336e6;border:1px solid #1d3d57;border-radius:5px;align-items:center;gap:8px;width:100%;margin-top:10px;padding:7px 9px;font-size:12px;display:flex}.ghost-btn.on{color:#cdeede;background:#4fd1a11f;border-color:#2d6b54}.ghost-btn .swatch{background:#27475f;border-radius:2px;flex:none;width:10px;height:10px}.ghost-btn.on .swatch{background:#4fd1a1;box-shadow:0 0 6px #4fd1a1}.ghost-btn .state{font-size:10px;font-family:var(--mono);color:#5d7e98}.ghost-btn.on .state{color:#4fd1a1}.banner{pointer-events:none;z-index:5;white-space:nowrap;font-family:var(--mono);display:none;position:absolute;top:14px;left:50%;transform:translate(-50%);box-shadow:0 2px 14px #00000073}.banner.show{display:block}.banner.parked{letter-spacing:.04em;color:#aef0d2;background:#13503b;border:1.5px solid #4fd1a1;border-radius:6px;padding:8px 16px;font-size:12px;font-weight:700}.banner.collision{letter-spacing:.14em;color:#ffd9de;background:#7a1f2c;border:1.5px solid #ef5b6b;border-radius:6px;padding:10px 24px;font-size:16px;font-weight:700;box-shadow:0 2px 14px #00000073,0 0 20px #ef5b6b8c}.controls-hint{color:#5d7e98;font-size:10.5px;font-family:var(--mono);letter-spacing:.05em;pointer-events:none;line-height:1.5;position:absolute;bottom:12px;left:14px}.controls-hint .key{color:#7ea3c4}.sidebar{background:#0a1825;border-left:1px solid #15324a;flex-direction:column;flex:none;width:332px;display:flex;overflow-y:auto}.panel-section{border-bottom:1px solid #122c42;padding:14px 18px}.panel-section.steering{padding:16px 18px 18px}.panel-section.zoom{border-bottom:none}.panel-section>.kicker{margin-bottom:10px}.car-tabs{flex-direction:column;gap:6px;display:flex}.car-btn{cursor:pointer;text-align:left;color:#9fc0d8;background:#0e2336;border:1px solid #1d3d57;border-radius:6px;align-items:center;gap:10px;width:100%;padding:9px 11px;display:flex}.car-btn.active{color:#dceaf4;background:#4fd1a11f;border-color:#4fd1a1}.car-main{flex-direction:column;align-items:flex-start;gap:2px;min-width:0;display:flex}.car-name{font-size:12.5px;font-weight:600}.car-r{flex-direction:column;align-items:flex-end;gap:2px;display:flex}.car-rval{font-size:13px;font-weight:600;font-family:var(--mono)}.car-dims,.car-rlbl{font-family:var(--mono)}.car-dims{font-size:9.5px}.car-rlbl{font-size:9px}.car-btn .sub{color:#5d7e98}.car-btn.active .sub{color:#7fb59c}.wheel-row{align-items:flex-start;gap:18px;display:flex}.wheel-outer{cursor:grab;touch-action:none;background:radial-gradient(circle at 50% 38%,#16344c,#0c2235);border:2px solid #24506f;border-radius:50%;flex:none;width:118px;height:118px;position:relative;box-shadow:inset 0 2px 10px #00000080}.wheel-inner{will-change:transform;position:absolute;top:0;bottom:0;left:0;right:0}.wheel-dot{background:#4fd1a1;border-radius:50%;width:8px;height:8px;margin-left:-4px;position:absolute;top:7px;left:50%;box-shadow:0 0 7px #4fd1a1}.wheel-spoke-v{background:#3c6383;border-radius:2px;width:3px;height:36%;margin-left:-1.5px;position:absolute;top:14%;left:50%}.wheel-spoke-h{background:#3c6383;border-radius:2px;width:72%;height:3px;margin-top:-1.5px;position:absolute;top:50%;left:14%}.wheel-hub{background:#0e273b;border:2px solid #2a5675;border-radius:50%;width:30px;height:30px;margin:-15px 0 0 -15px;position:absolute;top:50%;left:50%}.wheel-readout{flex-direction:column;flex:1;gap:9px;padding-top:4px;display:flex}.kv{font-family:var(--mono);justify-content:space-between;display:flex}.kv-label{letter-spacing:.12em;color:#5d7e98;font-size:10px}.kv-val{color:#eaf3fa;font-size:13px;font-weight:600}.lock-track{background:#0e2336;border:1px solid #1d3d57;border-radius:3px;height:6px;position:relative}.lock-center{background:#2a5675;width:1px;position:absolute;top:-3px;bottom:-3px;left:50%}.lock-mark{background:#4fd1a1;border-radius:3px;width:6px;position:absolute;top:0;bottom:0;left:calc(50% - 3px);box-shadow:0 0 6px #4fd1a1}.lock-label{color:#5d7e98;font-size:9.5px;font-family:var(--mono);text-align:center}.readout-grid{font-family:var(--mono);grid-template-columns:1fr 1fr;gap:9px 14px;display:grid}.metric-label{letter-spacing:.12em;color:#5d7e98;font-size:9.5px}.metric-val{color:#eaf3fa;font-size:15px;font-weight:600}.bars{gap:10px;margin-top:13px;display:flex}.bar-col{flex:1}.bar-head{font-family:var(--mono);justify-content:space-between;margin-bottom:4px;display:flex}.bar-lbl{letter-spacing:.1em;color:#5d7e98;font-size:9.5px}.bar-val{color:#5d7e98;font-size:11px;font-weight:600}.bar-track{background:#0e2336;border-radius:3px;height:5px;overflow:hidden}.bar-fill{width:0%;height:100%}.toggle-list{flex-direction:column;gap:3px;display:flex}.toggle{cursor:pointer;color:#7e9bb3;background:0 0;border:1px solid #0000;border-radius:5px;align-items:center;gap:9px;width:100%;padding:7px 9px;font-size:12px;display:flex}.toggle.on{color:#dceaf4;background:#0e2336;border-color:#1d3d57}.toggle .swatch{background:#27475f;border-radius:2px;flex:none;width:9px;height:9px}.toggle.on .swatch{background:#4fd1a1;box-shadow:0 0 6px #4fd1a1}.toggle .state{font-size:10px;font-family:var(--mono);color:#5d7e98}.toggle.on .state{color:#4fd1a1}.gap-grid{font-family:var(--mono);text-align:center;grid-template-columns:1fr 1fr 1fr;gap:8px;display:grid}.gap-cell{background:#0e2336;border:1px solid #1d3d57;border-radius:4px;padding:8px 4px}.gap-cell-lbl{color:#5d7e98;font-size:9px}.gap-cell-val{color:#eaf3fa;font-size:14px;font-weight:600}.gap-verdict{text-align:center;letter-spacing:.04em;border-radius:5px;margin-top:10px;padding:8px 10px;font-size:11px;font-weight:600}.gap-verdict.green{color:#9febc6;background:#1f5a44}.gap-verdict.gold{color:#f0d49a;background:#5a4a1f}.gap-verdict.orange{color:#f0c79a;background:#5a3a1f}.gap-verdict.red{color:#f0b6bf;background:#5a3340}.gap-note{color:#5d7e98;font-size:10px;font-family:var(--mono);margin-top:8px;line-height:1.4}.gap-note .hl{color:#9fc0d8}.zoom-head{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.zoom-val{color:#9fc0d8;font-size:11px;font-family:var(--mono)}.zoom-range{accent-color:#4fd1a1;cursor:pointer;width:100%}
