:root {
  color-scheme: dark;
  --bg: #061019;
  --panel: #0b1823;
  --panel-2: #0f2230;
  --line: #1c3a4d;
  --text: #e8f5fb;
  --muted: #7f9bab;
  --cyan: #62e6ff;
  --cyan-dim: #1c7184;
  --amber: #ffd66b;
  --red: #ff667f;
  --green: #7ce0a0;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at top, #0b2332 0, var(--bg) 45%); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height: 100vh; overflow-x: hidden; }
button, select, input { font: inherit; }
button, select { min-height: 40px; border: 1px solid #285064; background: #0f2634; color: var(--text); border-radius: 7px; }
button { padding: 0 14px; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .08s ease; }
button:hover { border-color: var(--cyan-dim); background: #143142; }
button:active { transform: translateY(1px); }
button:focus-visible, select:focus-visible, input:focus-visible, canvas:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
button.primary { background: #12394a; border-color: #26849a; color: #dffaff; }
button.wide { width: 100%; margin-top: 10px; }
select { width: 100%; padding: 0 10px; }
input[type="range"] { width: 100%; accent-color: var(--cyan); }
.app-shell { width: 100%; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { min-height: 78px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: rgba(6, 16, 25, .88); backdrop-filter: blur(10px); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { width: 42px; height: 42px; border: 1px solid #318aa2; color: var(--cyan); display: grid; place-items: center; border-radius: 8px; font-weight: 900; font-size: 21px; box-shadow: inset 0 0 18px rgba(98,230,255,.08); }
h1 { font-size: 20px; line-height: 1.1; margin: 0; letter-spacing: .03em; }
h1 span { font-size: 11px; color: var(--muted); font-weight: 600; margin-left: 7px; }
.brand p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.clock-panel { min-width: 150px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0 12px; text-align: right; }
.clock-panel .eyebrow { grid-column: 1; align-self: end; font-size: 9px; letter-spacing: .16em; color: var(--muted); }
.clock-panel strong { grid-column: 2; grid-row: 1 / span 2; font-size: 26px; color: var(--cyan); font-variant-numeric: tabular-nums; }
.clock-panel #simDay { grid-column: 1; font-size: 10px; color: #b9d2dd; letter-spacing: .1em; }
.workspace { flex: 1 1 auto; min-height: 600px; display: grid; grid-template-columns: 230px minmax(0, 1fr) 250px; }
.side-panel { background: rgba(7, 20, 29, .94); min-width: 0; }
.controls-panel { border-right: 1px solid var(--line); }
.stats-panel { border-left: 1px solid var(--line); }
.panel-section { padding: 16px; border-bottom: 1px solid var(--line); }
.panel-section h2 { margin: 0 0 13px; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; color: #99b9c7; }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.control-label { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); margin: 14px 0 7px; }
.control-label span { color: var(--text); font-variant-numeric: tabular-nums; }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 6px; font-size: 10px; color: #9fb8c3; }
.legend span { display: flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; width: 18px; height: 3px; border-radius: 2px; background: #315263; }
.swatch.arterial { height: 4px; background: #668b9c; }
.swatch.highway { height: 6px; background: #9cb6c1; }
.swatch.congested { background: var(--red); }
.hint, .mission p { font-size: 11px; line-height: 1.45; color: var(--muted); margin: 13px 0 0; }
.goal { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10px; color: var(--muted); padding: 9px 0; border-bottom: 1px dashed #193342; }
.goal:last-child { border: 0; }
.goal strong { color: #dceef5; font-size: 10px; }
.map-panel { min-width: 0; min-height: 520px; position: relative; overflow: hidden; background: #07121b; }
#simCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#simCanvas.dragging { cursor: grabbing; }
.map-overlay { position: absolute; z-index: 2; pointer-events: none; border: 1px solid rgba(62,112,135,.5); background: rgba(4,14,22,.76); color: #9cb9c7; font-size: 9px; letter-spacing: .08em; padding: 6px 8px; border-radius: 5px; backdrop-filter: blur(5px); }
.top-left { top: 10px; left: 10px; display: flex; align-items: center; gap: 7px; }
.bottom-left { left: 10px; bottom: 10px; }
.bottom-right { right: 10px; bottom: 10px; font-variant-numeric: tabular-nums; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(124,224,160,.5); }
.status-dot.paused { background: var(--amber); box-shadow: none; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat-grid div { background: #0b1e2a; border: 1px solid #183849; border-radius: 6px; padding: 9px; min-width: 0; }
.stat-grid span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.stat-grid strong { display: block; margin-top: 4px; color: #eefaff; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty-state { color: var(--muted); font-size: 11px; border: 1px dashed #234254; padding: 14px; border-radius: 6px; text-align: center; }
.hidden { display: none; }
.vehicle-id { color: var(--cyan); font-size: 12px; letter-spacing: .1em; margin-bottom: 8px; }
dl { margin: 0; }
dl div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #142f3d; font-size: 10px; }
dt { color: var(--muted); } dd { margin: 0; color: #deedf3; text-align: right; }
.feed-section { max-height: 270px; overflow: hidden; }
.event-feed { display: flex; flex-direction: column; gap: 7px; font-size: 10px; }
.feed-item { padding-left: 9px; border-left: 2px solid #29546a; color: #9db4bf; line-height: 1.35; }
.feed-item strong { color: #d9ebf2; font-weight: 600; }
.feed-time { color: #5f8293; margin-right: 5px; font-variant-numeric: tabular-nums; }
footer { min-height: 31px; border-top: 1px solid var(--line); background: #061019; padding: 8px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #557687; font-size: 9px; letter-spacing: .04em; }
@media (max-width: 900px) {
  .workspace { grid-template-columns: 190px minmax(0, 1fr); }
  .stats-panel { display: none; }
}
@media (max-width: 650px) {
  .topbar { padding: 10px 12px; }
  .brand p { display: none; }
  .clock-panel { min-width: 130px; }
  .workspace { display: flex; flex-direction: column; }
  .controls-panel { order: 2; border-right: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; }
  .controls-panel .panel-section { border-right: 1px solid var(--line); }
  .mission { display: none; }
  .map-panel { min-height: 62vh; order: 1; }
  footer { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* v0.2.0 signal controls */
.top-right { top: 10px; right: 10px; display: flex; align-items: center; gap: 6px; }
.signal-key { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(124,224,160,.45); }
.empty-state.compact { padding: 10px; }
.signal-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.signal-heading strong { font-size: 11px; color: #eefaff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phase-pill { flex: 0 0 auto; font-size: 8px; letter-spacing: .07em; border-radius: 99px; padding: 4px 6px; border: 1px solid #2b5c70; color: #bdeaf4; background: #102b38; }
.phase-pill.yellow { color: #ffe6a4; border-color: #715d2d; background: #2f2815; }
.signal-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.signal-mini-grid div { background: #0b1e2a; border: 1px solid #183849; border-radius: 6px; padding: 7px 8px; }
.signal-mini-grid span { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .07em; }
.signal-mini-grid strong { display: block; margin-top: 2px; font-size: 12px; color: #eefaff; font-variant-numeric: tabular-nums; }
.signal-actions { margin-top: 9px; }
.signal-actions button { min-height: 34px; padding: 0 8px; font-size: 9px; }
.signal-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.signal-dot.green { background: var(--green); }
.signal-dot.red { background: var(--red); }
.vehicle-detail dd.status-delay { color: var(--amber); }
@media (max-width: 650px) {
  .controls-panel { grid-template-columns: 1fr 1fr; }
  .controls-panel .panel-section:nth-child(2) { border-right: 0; }
  .controls-panel .panel-section:nth-child(3) { display: none; }
}

/* v0.3.0 resident + commute controls */
@media (min-width: 901px) {
  .workspace { grid-template-columns: 230px minmax(0, 1fr) 290px; }
}
.hint.tight { margin-top: 7px; font-size: 10px; }
.resident-dot { display: inline-block; width: 10px; height: 5px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 6px rgba(98,230,255,.28); }
.commute-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.commute-grid div { background: #0b1e2a; border: 1px solid #183849; border-radius: 6px; padding: 7px; min-width: 0; }
.commute-grid span { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.commute-grid strong { display: block; margin-top: 3px; color: #eefaff; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.district-pressure { margin-top: 12px; }
.pressure-title { display: flex; justify-content: space-between; gap: 8px; color: #6e8b9a; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 7px; }
.pressure-row { display: grid; grid-template-columns: 74px minmax(0,1fr) 48px; gap: 6px; align-items: center; margin: 5px 0; font-size: 9px; color: #a6c0cc; }
.pressure-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pressure-track { height: 5px; border-radius: 99px; background: #102a38; overflow: hidden; }
.pressure-fill { height: 100%; border-radius: inherit; background: #5aaec0; }
.pressure-row strong { text-align: right; color: #d9ebf2; font-size: 9px; font-variant-numeric: tabular-nums; }
.vehicle-detail dl { max-height: 315px; overflow: auto; padding-right: 3px; }
.vehicle-detail dl::-webkit-scrollbar { width: 5px; }
.vehicle-detail dl::-webkit-scrollbar-thumb { background: #214657; border-radius: 6px; }

/* v0.4.0 shared-road bus transit */
.bus-swatch { display:inline-block; width:18px; height:7px; border-radius:2px; background:#5fc8e8; border:1px solid #dff7ff; }
.stop-swatch { display:inline-block; width:9px; height:9px; border-radius:50%; background:#0a1720; border:2px solid #f1f7fa; }
.transit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.transit-grid div { background:#0b1e2a; border:1px solid #183849; border-radius:6px; padding:7px; min-width:0; }
.transit-grid span { display:block; color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.transit-grid strong { display:block; margin-top:3px; color:#eefaff; font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.route-status { margin-top:11px; display:flex; flex-direction:column; gap:7px; }
.route-row { display:grid; grid-template-columns:28px minmax(0,1fr) 42px; align-items:center; gap:7px; }
.route-badge { width:27px; height:22px; border:1px solid; border-radius:5px; display:grid; place-items:center; font-weight:800; font-size:9px; background:#0a1720; }
.route-main { min-width:0; }
.route-main strong { display:block; color:#bdd2db; font-size:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.route-track { height:4px; background:#102a38; border-radius:99px; overflow:hidden; margin-top:4px; }
.route-fill { height:100%; border-radius:inherit; }
.route-metric { color:#809daa; font-size:8px; text-align:right; white-space:nowrap; }
button:disabled { opacity:.45; cursor:not-allowed; }
@media (max-width:650px) {
  .transit-grid { grid-template-columns:repeat(2,1fr); }
}

/* v0.5.0 incident response + transit signal priority */
.incident-swatch { display:inline-block; width:10px; height:10px; transform:rotate(45deg); background:var(--amber); border:1px solid #fff1bf; }
.response-swatch { display:inline-block; width:16px; height:7px; border-radius:2px; background:#f2f7fa; border:2px solid var(--red); }
.incident-control-status { display:grid; grid-template-columns:1fr auto; gap:5px 10px; margin-top:10px; padding:8px; border:1px solid #183849; border-radius:6px; background:#0b1e2a; font-size:9px; }
.incident-control-status span { color:var(--muted); }
.incident-control-status strong { color:#eefaff; font-variant-numeric:tabular-nums; }
.incident-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:10px; }
.incident-grid div { background:#0b1e2a; border:1px solid #183849; border-radius:6px; padding:7px; min-width:0; }
.incident-grid span { display:block; color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.incident-grid strong { display:block; margin-top:3px; color:#eefaff; font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.incident-detail { margin-top:9px; }
.incident-detail .vehicle-id { color:var(--amber); }
#tspBtn:not(.primary) { color:#91aab5; }
@media (max-width:650px) {
  .incident-grid { grid-template-columns:repeat(2,1fr); }
}

/* v0.6.0 utility resilience + cascading grid failures */
.utility-swatch { display:inline-block; width:10px; height:10px; transform:rotate(45deg); background:#102936; border:2px solid var(--green); }
.utility-crew-swatch { display:inline-block; width:16px; height:7px; border-radius:2px; background:var(--amber); border:1px solid #fff1bf; }
.utility-control-status { border-color:#4b4124; }
.utility-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:10px; }
.utility-grid div { background:#0b1e2a; border:1px solid #183849; border-radius:6px; padding:7px; min-width:0; }
.utility-grid span { display:block; color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.utility-grid strong { display:block; margin-top:3px; color:#eefaff; font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.utility-detail .vehicle-id { color:var(--amber); }
.phase-pill.power-out { color:#ffe0a0; border-color:#755d27; background:#312817; }
@media (max-width:650px) {
  .utility-grid { grid-template-columns:repeat(2,1fr); }
}

/* v0.7.0 water resilience + pressure-zone dependencies */
.water-swatch { display:inline-block; width:10px; height:10px; border-radius:50%; background:#102936; border:2px solid #6ed8ff; }
.water-crew-swatch { display:inline-block; width:16px; height:7px; border-radius:2px; background:#6ed8ff; border:1px solid #dff8ff; }
.water-control-status { border-color:#24506a; }
.water-grid .vehicle-id, #waterDetail .vehicle-id { color:#79dfff; }
.water-grid strong { color:#e8fbff; }

/* v0.8.0 deterministic replay + causal analysis */
.replay-controls { border-bottom-color:#265166; }
.replay-range { display:flex; justify-content:space-between; gap:10px; margin-top:4px; color:#698b9c; font-size:8px; font-variant-numeric:tabular-nums; }
.replay-badge { top:10px; left:50%; transform:translateX(-50%); color:#dffaff; border-color:#28788d; background:rgba(9,37,49,.94); letter-spacing:.08em; font-weight:800; }
.replay-badge::before { content:'◀'; margin-right:5px; color:var(--cyan); }
.causal-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-bottom:9px; }
.causal-grid div { background:#0b1e2a; border:1px solid #183849; border-radius:6px; padding:7px; min-width:0; }
.causal-grid span { display:block; color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.causal-grid strong { display:block; margin-top:3px; color:#eefaff; font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.causal-actions { margin:7px 0 9px; }
.causal-actions button { min-height:34px; padding:0 8px; font-size:9px; }
.causal-detail { margin-top:9px; }
.causal-detail .vehicle-id { color:#aeefff; }
.analysis-summary { margin:0 0 9px; padding:8px; border:1px solid #1c4557; border-radius:6px; background:#0b1f2a; color:#bfd7e1; font-size:10px; line-height:1.45; }
.causal-chain { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.causal-chain li { position:relative; padding:7px 8px 7px 31px; border:1px solid #183849; border-radius:6px; background:#091b26; color:#9fb8c4; font-size:9px; line-height:1.35; }
.causal-chain li::before { content:attr(data-step); position:absolute; left:8px; top:8px; width:15px; height:15px; border-radius:50%; display:grid; place-items:center; background:#12394a; color:#bdf5ff; font-size:8px; font-weight:800; }
.causal-chain li:not(:last-child)::after { content:''; position:absolute; left:15px; top:25px; bottom:-8px; width:1px; background:#2a5568; }
.causal-chain time { color:#5f8798; font-variant-numeric:tabular-nums; margin-right:5px; }
.causal-chain strong { color:#e3f3f8; font-weight:700; }
.causal-chain .severity-high { color:#ffd2da; }
.causal-chain .severity-med { color:#ffe6a4; }
body.replay-active .map-panel { box-shadow:inset 0 0 0 2px rgba(98,230,255,.18); }
body.replay-active .topbar { border-bottom-color:#2e7086; }
body.replay-active .clock-panel strong { color:#bff6ff; }
body.replay-active #runDot { background:var(--cyan); box-shadow:0 0 10px rgba(98,230,255,.55); }
body.replay-active .controls-panel button:not(#replayToggleBtn):not(#replayPlayBtn),
body.replay-active .controls-panel select:not(#speedSelect),
body.replay-active .controls-panel input:not(#replaySlider) { filter:saturate(.55); }
@media (max-width:650px) {
  .replay-badge { left:auto; right:10px; transform:none; top:44px; }
}

/* v1.0 Scenario Lab + deterministic benchmarking */
.scenario-lab { border-bottom-color:#315a4b; }
.scenario-lab select { margin-bottom:2px; }
.scenario-lab .control-label { margin-top:10px; }
.scenario-actions { margin-top:12px; }
.scenario-actions button { min-height:36px; padding:0 8px; font-size:9px; line-height:1.2; }
.scenario-badge { top:44px; left:10px; color:#dfffe9; border-color:#2f6f58; background:rgba(10,39,30,.9); font-weight:800; }
.scenario-summary-grid { display:grid; grid-template-columns:minmax(0,1fr) 72px; gap:6px; margin-bottom:9px; }
.scenario-summary-grid div { background:#0b1e2a; border:1px solid #183849; border-radius:6px; padding:7px; min-width:0; }
.scenario-summary-grid span { display:block; color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.05em; }
.scenario-summary-grid strong { display:block; margin-top:3px; color:#eefaff; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scenario-results { display:flex; flex-direction:column; gap:6px; }
.scenario-empty { border:1px dashed #294b3d; border-radius:6px; padding:9px; color:#7fa292; font-size:9px; line-height:1.4; }
.scenario-result { display:grid; grid-template-columns:minmax(0,1fr) 34px 34px; gap:7px; align-items:center; padding:7px 8px; border:1px solid #1c3d33; border-radius:6px; background:#0a1d19; }
.scenario-result > div { min-width:0; }
.scenario-result strong { display:block; color:#dff5e9; font-size:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scenario-result span { display:block; color:#6f9283; font-size:8px; margin-top:2px; }
.scenario-result b { color:#e8fff0; text-align:right; font-size:15px; font-variant-numeric:tabular-nums; }
.scenario-result em { font-style:normal; text-align:right; color:#829b90; font-size:9px; font-weight:800; }
.scenario-result em.good { color:var(--green); }
.scenario-result em.bad { color:var(--red); }
body.replay-active .scenario-badge { opacity:.55; }
@media (max-width:650px) {
  .scenario-lab { grid-column:1 / -1; }
  .scenario-badge { top:44px; left:10px; right:auto; }
}

/* v1.0 City + Mod Lab */
.mod-lab { border-top: 1px solid var(--line); }
.city-mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 12px; }
.city-mini-grid div { background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:8px; padding:7px 8px; min-width:0; }
.city-mini-grid span { display:block; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.city-mini-grid strong { display:block; margin-top:2px; font-size:12px; overflow-wrap:anywhere; }
.file-input { width:100%; margin:5px 0 8px; font-size:12px; color:var(--muted); }
.file-input::file-selector-button { border:1px solid var(--line); background:var(--panel-2); color:var(--text); border-radius:7px; padding:7px 9px; margin-right:8px; cursor:pointer; }
.import-status.error { color:#f2a0a0; }
.import-status.success { color:#9bdcb0; }