*{box-sizing:border-box}
:root{--bg:#0a1424;--panel:#111f36;--panel2:#16294a;--line:#22385e;--ink:#e8eef8;--mute:#8ea3c3;--red:#ff3b42;
  --available:#22c55e;--en_route:#3b82f6;--on_scene:#ef4444;--at_hospital:#a78bfa;--no_signal:#f59e0b;--off_duty:#64748b}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{display:flex;flex-direction:column;min-height:100vh}
.top{display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 18px 10px;background:#08111f;border-bottom:1px solid var(--line)}
.top img{width:36px;height:36px;border-radius:10px}
.wm{font-weight:800;font-size:19px;letter-spacing:-.3px}.wm b{color:var(--red)}
.tag{font-size:12.5px;color:var(--mute);font-weight:600}
.live{display:inline-flex;align-items:center;gap:7px;margin-left:10px;padding:5px 11px;border-radius:999px;background:#0f2a1c;color:#86efac;font:700 12px system-ui,sans-serif;letter-spacing:.04em;white-space:nowrap}
.live i{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 #22c55e99;animation:pulse 1.6s infinite}
.live.stale{background:#2b2210;color:#fcd34d}.live.stale i{background:#f59e0b;animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 #22c55e99}70%{box-shadow:0 0 0 8px #22c55e00}100%{box-shadow:0 0 0 0 #22c55e00}}
.demo-badge{padding:5px 10px;border-radius:999px;background:#1d2b4d;color:#a5b4fc;font:700 11.5px system-ui,sans-serif;letter-spacing:.03em;white-space:nowrap}
.sp{flex:1}
.top select{min-height:36px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:600 14px system-ui,sans-serif;padding:0 8px;max-width:40vw}
.clock{font:700 15px ui-monospace,"SF Mono",Menlo,monospace;color:var(--mute);white-space:nowrap}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,2fr);gap:12px;padding:14px 18px 0}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-width:0}
.kpi .l{font:700 11px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.07em;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .v{font:800 28px/1.1 system-ui,sans-serif;margin-top:6px;letter-spacing:-.5px;white-space:nowrap}
.kpi .v small{font-size:14px;color:var(--mute);font-weight:700;margin-left:3px}
.kpi .s{font-size:12px;color:var(--mute);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .s b{color:#86efac}
.kpi.good .v{color:#4ade80}
.kpi.chart{padding:10px 14px 6px}
.kpi.chart .row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kpi.chart .keys{display:flex;gap:10px;font-size:11.5px;color:var(--mute);white-space:nowrap}
.kpi.chart .keys i{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:5px}
.trend{width:100%;height:92px;display:block}
.trend text{fill:var(--mute);font:600 10px system-ui,sans-serif}
.body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:12px;padding:12px 18px;min-height:520px}
.mapwrap{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0d1a2e;min-height:420px}
#map{position:absolute;inset:0}
.legend{position:absolute;left:12px;bottom:12px;display:flex;gap:12px;flex-wrap:wrap;padding:7px 12px;border-radius:12px;background:#08111fd9;font:600 12px system-ui,sans-serif;color:#cbd5e1}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.c-available{background:var(--available)}.c-en_route{background:var(--en_route)}.c-on_scene{background:var(--on_scene)}.c-at_hospital{background:var(--at_hospital)}.c-no_signal{background:var(--no_signal)}.c-off_duty{background:var(--off_duty)}
.msg{position:absolute;left:50%;top:18px;transform:translateX(-50%);max-width:min(560px,90%);padding:12px 16px;border-radius:12px;background:#2b2210;color:#fde68a;font-weight:600;box-shadow:0 6px 20px #0008;z-index:3}
.side{display:flex;flex-direction:column;min-height:0;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.side-head{padding:12px 14px 8px;border-bottom:1px solid var(--line)}
.side-head h2{margin:0;font:800 13px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.side-head h2 span{color:var(--ink);margin-left:4px}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.filters button{border:1px solid var(--line);background:transparent;color:var(--mute);border-radius:999px;padding:4px 10px;font:700 12px system-ui,sans-serif;cursor:pointer}
.filters button.on{background:var(--panel2);color:var(--ink);border-color:#3a5687}
.units{flex:1;overflow:auto;padding:6px 8px;min-height:160px}
.unit{display:flex;gap:10px;align-items:flex-start;padding:9px 8px;border-radius:12px;cursor:pointer;border:1px solid transparent}
.unit:hover{background:#15264399}.unit.sel{background:var(--panel2);border-color:#3a5687}
.unit .dot{flex:none;width:12px;height:12px;border-radius:50%;margin-top:4px;background:var(--off_duty)}
.unit .main{flex:1;min-width:0}
.unit .nm{display:flex;align-items:baseline;gap:8px;font-weight:800;font-size:15px}
.unit .nm .st{margin-left:auto;font:800 10.5px system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:6px;background:#1e2f4f;color:#cbd5e1;white-space:nowrap}
.unit .ln{font-size:13px;color:#c5d2e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unit .mt{font-size:12px;color:var(--mute)}
.unit .eta{font:800 13px system-ui,sans-serif;color:#93c5fd}
.s-available .dot,.s-available .st{background:var(--available)!important}.s-available .st{color:#052e16!important}
.s-en_route .dot,.s-en_route .st{background:var(--en_route)!important}.s-en_route .st{color:#fff!important}
.s-on_scene .dot,.s-on_scene .st{background:var(--on_scene)!important}.s-on_scene .st{color:#fff!important}
.s-at_hospital .dot,.s-at_hospital .st{background:var(--at_hospital)!important}.s-at_hospital .st{color:#1e1b4b!important}
.s-no_signal .dot,.s-no_signal .st{background:var(--no_signal)!important}.s-no_signal .st{color:#2b1800!important}
.s-off_duty{opacity:.6}
.log-head{border-top:1px solid var(--line)}
.log{height:150px;overflow:auto;padding:4px 14px 10px}
.ev{padding:6px 0;border-top:1px solid #1b2e4f;font-size:12.5px;color:#c5d2e6}.ev:first-child{border-top:0}
.ev b{color:var(--ink);font-variant-numeric:tabular-nums}.ev .g{color:#86efac;font-weight:700}
.muted{color:var(--mute)}
.foot{padding:0 18px calc(12px + env(safe-area-inset-bottom));font-size:12px;color:#5f7698;text-align:center}
/* map markers */
.mk{display:flex;flex-direction:column;align-items:center;cursor:pointer;transform-origin:50% 0}
.mk .b{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2.5px solid #fff;box-shadow:0 2px 8px #000a;background:var(--available)}
.mk .b svg{width:17px;height:17px;fill:#fff}
.mk .t{margin-top:3px;padding:1px 6px;border-radius:6px;background:#08111fe6;color:#fff;font:800 11px system-ui,sans-serif;white-space:nowrap}
.mk .t em{font-style:normal;color:#93c5fd;margin-left:4px}
.mk.en_route .b{background:var(--en_route)}.mk.on_scene .b{background:var(--on_scene)}.mk.at_hospital .b{background:var(--at_hospital)}.mk.no_signal .b{background:var(--no_signal)}
.mk.sel .b{box-shadow:0 0 0 4px #ffffff66,0 2px 8px #000a}
.hosp{width:20px;height:20px;border-radius:5px;background:#e2e8f0;color:#b91c1c;font:900 13px/20px system-ui,sans-serif;text-align:center;box-shadow:0 1px 4px #0008;border:1.5px solid #fff}
.maplibregl-popup-content{background:#0f1d33;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:13px/1.4 system-ui,sans-serif;box-shadow:0 8px 24px #000b}
.maplibregl-popup-tip{border-top-color:#0f1d33!important;border-bottom-color:#0f1d33!important}
.maplibregl-popup-close-button{color:#8ea3c3;font-size:18px}
.pp b{font-size:14px}.pp .r{color:var(--mute)}
@media (max-width:1180px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.kpi.chart{grid-column:span 3}}
@media (max-width:900px){
  .body{grid-template-columns:1fr;padding:10px}
  .mapwrap{min-height:52vh}
  .units{max-height:none}
  .kpis{display:flex;align-items:flex-start;overflow-x:auto;padding:10px 10px 2px;gap:8px;scroll-snap-type:x mandatory;scrollbar-width:none}.kpis::-webkit-scrollbar{display:none}
  .kpi{flex:none;min-width:148px;scroll-snap-align:start}.kpi.chart{min-width:330px}
  .kpi .v{font-size:23px}
  .clock,.demo-badge{display:none}
  .top{padding-left:12px;padding-right:12px;gap:8px}.live{margin-left:auto}
}