:root {
  color-scheme: dark;
  --bg: #080b0d;
  --panel: #101518;
  --line: #253035;
  --muted: #7d8b91;
  --text: #f3f6f7;
  --green: #2dff78;
  --amber: #ffbd3e;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { min-height: 100vh; }
.shell { min-height: 100vh; padding: 18px; }
.topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-bottom: 0; padding: 0 20px; background: #0c1012; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 720; letter-spacing: .02em; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid var(--green); color: var(--green); font-size: 12px; }
.brand small { color: var(--green); font-size: 10px; border: 1px solid #247a45; padding: 3px 6px; }
.connection { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #536066; box-shadow: 0 0 0 4px #22292c; }
.dot.online { background: var(--green); box-shadow: 0 0 0 4px #153322, 0 0 18px #2dff7880; }
.workspace { min-height: calc(100vh - 100px); display: grid; grid-template-columns: minmax(0, 1fr) 330px; border: 1px solid var(--line); }
.map-panel { position: relative; min-height: 640px; background: #151b1d; overflow: hidden; }
#map { position: absolute; inset: 0; filter: saturate(.72) contrast(1.04) brightness(.82); }
.map-message { position: absolute; left: 24px; top: 24px; padding: 12px 15px; background: #0b0f11e8; border: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.map-caption { position: absolute; left: 20px; bottom: 20px; display: flex; gap: 16px; align-items: center; background: #090d0fe8; border: 1px solid var(--line); padding: 11px 14px; font-size: 12px; }
.map-caption span { color: var(--muted); letter-spacing: .14em; }
.map-caption strong { color: var(--green); }
.telemetry-panel { border-left: 1px solid var(--line); background: var(--panel); padding: 25px; }
.eyebrow, .speed-card > span, .metric span { color: var(--muted); font-size: 10px; letter-spacing: .15em; }
.device-title { padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.device-title h1 { margin: 8px 0 7px; font-size: 22px; line-height: 1.2; }
.device-title p { margin: 0; color: var(--muted); font-size: 12px; }
.speed-card { margin: 22px 0; padding: 18px; border: 1px solid var(--line); background: #0a0e10; }
.speed-card div { display: flex; align-items: baseline; gap: 9px; margin-top: 4px; }
.speed-card strong { font: 700 58px/1 "Arial Narrow", "Segoe UI", sans-serif; letter-spacing: -.04em; }
.speed-card small { color: var(--muted); }
.metrics { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.metric { min-height: 65px; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 11px 14px; background: #0d1214; }
.metric strong { font-size: 14px; font-weight: 580; overflow-wrap: anywhere; }
.good { color: var(--green); }
.warn { color: var(--amber); }
.vehicle-marker { width: 22px; height: 22px; border-radius: 50%; border: 4px solid #07100a; background: var(--green); box-shadow: 0 0 0 2px white, 0 0 22px #2dff78; transform: translate(-50%, -50%); }
@media (max-width: 820px) {
  .shell { padding: 0; }
  .workspace { grid-template-columns: 1fr; }
  .map-panel { min-height: 55vh; }
  .telemetry-panel { border-left: 0; border-top: 1px solid var(--line); }
}