:root {
  --bg: #02060b;
  --bg2: #050d16;
  --panel: rgba(5, 16, 27, .82);
  --line: rgba(0, 229, 255, .22);
  --line-hi: rgba(0, 229, 255, .6);
  --cyan: #00e5ff;
  --cyan-dim: #4fb8c9;
  --text: #cfeaf2;
  --muted: #5f8696;
  --police: #2f8cff;
  --fire: #ff3b3b;
  --ems: #1fe57a;
  --other: #93a4b3;
  --amber: #ffb300;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --disp: "Orbitron", var(--mono);
}
/* Command screens are dark by design; same palette in both schemes. */
:root[data-theme="light"], :root:not([data-theme="light"]) { color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13px/1.4 var(--mono); }
button { font: inherit; }

#app {
  height: 100vh; height: 100dvh;
  display: grid;
  grid-template-rows: 60px 1fr 118px;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(0,229,255,.07), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(47,140,255,.06), transparent 50%),
    var(--bg);
}

/* ---------------------------------------------------------------- header */
#hud-top {
  display: flex; align-items: center; gap: 24px; padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(0,229,255,.06), transparent);
  position: relative;
}
#hud-top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: .6; animation: sweep 6s linear infinite;
  background-size: 40% 100%; background-repeat: no-repeat;
}
@keyframes sweep { from { background-position: -40% 0; } to { background-position: 140% 0; } }

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  width: 30px; height: 30px; border: 1.5px solid var(--cyan); transform: rotate(45deg);
  display: grid; place-items: center; box-shadow: 0 0 14px rgba(0,229,255,.5), inset 0 0 8px rgba(0,229,255,.4);
}
.brand-mark span { width: 8px; height: 8px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: blink 2s infinite; }
.brand-title { font-family: var(--disp); font-weight: 900; letter-spacing: .18em; font-size: 17px; color: #e8fbff; text-shadow: 0 0 12px rgba(0,229,255,.55); white-space: nowrap; }
.brand-title b { color: var(--cyan); }
.brand-sub { font-size: 9px; letter-spacing: .32em; color: var(--muted); white-space: nowrap; }

.top-stats { display: flex; gap: 10px; flex: 1; justify-content: center; align-items: center; min-width: 0; }
.stat {
  display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 9px; min-width: 96px;
  border: 1px solid var(--line); background: rgba(0,20,30,.5);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.stat i { width: 4px; height: 26px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.stat b { display: block; font-family: var(--disp); font-size: 17px; line-height: 1.05; color: #fff; }
.stat span { font-size: 9px; letter-spacing: .2em; color: var(--muted); }
.s-police { color: var(--police); } .s-fire { color: var(--fire); } .s-ems { color: var(--ems); }
.s-loc { color: var(--amber); } .s-node { color: var(--cyan); }
.stat-note { font-size: 9px; color: var(--muted); letter-spacing: .2em; writing-mode: vertical-rl; transform: rotate(180deg); }

.clock { display: flex; align-items: center; gap: 14px; }
.times { text-align: right; font-family: var(--disp); }
#clk-local { font-size: 16px; color: #fff; letter-spacing: .08em; }
#clk-utc { font-size: 10px; color: var(--muted); letter-spacing: .15em; }
.mode { display: flex; align-items: center; gap: 7px; padding: 4px 10px; border: 1px solid; font-family: var(--disp); font-size: 11px; letter-spacing: .2em; }
.mode.live { color: var(--ems); border-color: rgba(31,229,122,.5); }
.mode.history { color: var(--amber); border-color: rgba(255,179,0,.5); }
.mode.offline { color: var(--fire); border-color: rgba(255,59,59,.5); }
.blip { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ---------------------------------------------------------------- stage */
#stage { display: grid; grid-template-columns: 1fr 400px; min-height: 0; }
#map-wrap { position: relative; min-height: 0; overflow: hidden; border-right: 1px solid var(--line); }
#map { position: absolute; inset: 0; background: var(--bg); }
.leaflet-container { background: var(--bg); font: inherit; }
.leaflet-tile-pane { filter: brightness(.95) contrast(1.3) sepia(.5) hue-rotate(150deg) saturate(2.2); }
.map-labels { filter: sepia(.6) hue-rotate(150deg) saturate(2) brightness(1.3); opacity: .8; }
.leaflet-control-attribution { background: rgba(2,6,11,.7) !important; color: var(--muted) !important; font-size: 9px; }
.leaflet-control-attribution a { color: var(--cyan-dim) !important; }
.leaflet-bar a { background: rgba(5,16,27,.9); color: var(--cyan); border-color: var(--line) !important; }
.leaflet-bar a:hover { background: rgba(0,229,255,.15); color: #fff; }

.fx-grid, .fx-scan, .fx-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 400; }
.fx-grid {
  background-image:
    linear-gradient(rgba(0,229,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.055) 1px, transparent 1px);
  background-size: 64px 64px;
}
.fx-scan {
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.fx-scan::after {
  content: ""; position: absolute; left: 0; right: 0; height: 140px;
  background: linear-gradient(180deg, transparent, rgba(0,229,255,.06), transparent);
  animation: scan 7s linear infinite;
}
@keyframes scan { from { top: -140px; } to { top: 100%; } }
.fx-vignette { background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.65) 100%); }
.corner { position: absolute; width: 26px; height: 26px; border: 2px solid var(--cyan); z-index: 401; pointer-events: none; opacity: .7; }
.corner.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.corner.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.corner.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.corner.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

#legend {
  position: absolute; left: 18px; bottom: 18px; z-index: 450; padding: 9px 12px;
  background: var(--panel); border: 1px solid var(--line); font-size: 10px; letter-spacing: .14em;
  backdrop-filter: blur(4px);
}
#legend div { display: flex; align-items: center; gap: 8px; line-height: 1.9; }
#legend i { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 8px currentColor; background: currentColor; }
.lg-police { color: var(--police); } .lg-fire { color: var(--fire); } .lg-ems { color: var(--ems); } .lg-other { color: var(--other); }
#legend .lg-note { color: var(--muted); font-size: 9px; letter-spacing: .08em; margin-top: 3px; }

#window-label {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 450;
  font-family: var(--disp); font-size: 11px; letter-spacing: .2em; color: var(--cyan);
  padding: 5px 14px; background: var(--panel); border: 1px solid var(--line); white-space: nowrap;
}
#window-label.history { color: var(--amber); border-color: rgba(255,179,0,.4); }

#toast {
  position: absolute; top: 56px; left: 50%; transform: translate(-50%, -10px); z-index: 460; opacity: 0;
  transition: .35s; padding: 8px 16px; font-family: var(--disp); font-size: 12px; letter-spacing: .14em;
  background: rgba(40,0,0,.85); border: 1px solid var(--fire); color: #fff; box-shadow: 0 0 24px rgba(255,59,59,.4);
  pointer-events: none; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* dots */
.dot { transition: fill-opacity .6s, stroke-opacity .6s; cursor: pointer; }
.dot-police { filter: drop-shadow(0 0 6px var(--police)); }
.dot-fire   { filter: drop-shadow(0 0 6px var(--fire)); }
.dot-ems    { filter: drop-shadow(0 0 6px var(--ems)); }
.dot-other  { filter: drop-shadow(0 0 4px var(--other)); }
.dot.hi { stroke-width: 3; }
.pulse { pointer-events: none; }
.pulse i {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid currentColor; box-shadow: 0 0 12px currentColor;
  animation: ping 1.6s ease-out 4 forwards;
}
.pulse i + i { animation-delay: .5s; }
@keyframes ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(5); opacity: 0; } }
.station-icon div {
  width: 14px; height: 14px; transform: rotate(45deg); border: 2px solid var(--cyan);
  background: rgba(0,229,255,.2); box-shadow: 0 0 12px var(--cyan);
}

/* hover card */
.hud-tip {
  position: fixed; z-index: 2000; width: 360px; max-width: calc(100vw - 24px); pointer-events: none;
  background: rgba(3, 12, 20, .94); border: 1px solid var(--line-hi);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 10px 40px rgba(0,0,0,.6), 0 0 24px rgba(0,229,255,.18);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  padding: 12px 14px 10px; font-size: 12px;
}
.hud-tip .t-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.chip { font-family: var(--disp); font-size: 10px; letter-spacing: .14em; padding: 2px 7px; border: 1px solid currentColor; white-space: nowrap; }
.chip.solid { color: #000 !important; border: 0; font-weight: 700; }
.c-police { color: var(--police); } .c-fire { color: var(--fire); } .c-ems { color: var(--ems); } .c-other { color: var(--other); }
.chip.solid.c-police { background: var(--police); } .chip.solid.c-fire { background: var(--fire); }
.chip.solid.c-ems { background: var(--ems); } .chip.solid.c-other { background: var(--other); }
.t-type { font-family: var(--disp); font-size: 14px; color: #fff; letter-spacing: .05em; }
.t-addr { font-size: 15px; color: var(--cyan); margin: 2px 0 1px; font-weight: 600; }
.t-matched { color: var(--muted); font-size: 10px; margin-bottom: 8px; }
.t-grid { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 11px; margin-bottom: 8px; }
.t-grid dt { color: var(--muted); letter-spacing: .12em; font-size: 9.5px; padding-top: 2px; }
.t-grid dd { margin: 0; color: var(--text); }
.t-codes span { display: inline-block; margin: 0 4px 3px 0; padding: 1px 5px; background: rgba(0,229,255,.08); border: 1px solid var(--line); font-size: 10px; }
.t-recent { border-top: 1px dashed var(--line); padding-top: 6px; }
.t-recent div { margin-bottom: 5px; color: #b6d3dc; }
.t-recent time { color: var(--muted); margin-right: 6px; font-size: 10px; }
.prio { color: var(--amber); letter-spacing: .1em; }

/* ---------------------------------------------------------------- side */
#side { display: flex; flex-direction: column; min-height: 0; background: linear-gradient(180deg, rgba(0,20,30,.35), transparent); }
.panel-head {
  display: flex; align-items: baseline; gap: 10px; padding: 12px 16px 9px;
  border-bottom: 1px solid var(--line); font-family: var(--disp);
}
.panel-head.small { padding-top: 9px; }
.ph-title { font-size: 12px; letter-spacing: .24em; color: var(--cyan); font-weight: 700; }
.ph-sub { font-size: 9px; letter-spacing: .2em; color: var(--muted); }
.ph-toggle { margin-left: auto; font-size: 9px; letter-spacing: .2em; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 5px; }
.ph-toggle input { accent-color: var(--cyan); margin: 0; }
#feed { flex: 1; overflow-y: auto; padding: 10px 12px; min-height: 0; }
#feed::-webkit-scrollbar, #nodes::-webkit-scrollbar { width: 6px; }
#feed::-webkit-scrollbar-thumb, #nodes::-webkit-scrollbar-thumb { background: var(--line); }
.call {
  position: relative; margin-bottom: 9px; padding: 9px 11px 9px 14px; cursor: default;
  background: rgba(5, 18, 28, .78); border: 1px solid rgba(0,229,255,.12);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  animation: slidein .45s ease-out;
}
.call.has-loc { cursor: pointer; }
.call.has-loc:hover { border-color: var(--line-hi); background: rgba(0,40,55,.7); }
.call::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.call.new { box-shadow: inset 0 0 30px rgba(0,229,255,.12); }
@keyframes slidein { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
.call-top { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-size: 10.5px; }
.call-top time { color: var(--muted); }
.call-top .tg { color: var(--cyan-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.call-top .rx { color: var(--muted); font-size: 9.5px; }
.call-type { font-family: var(--disp); font-size: 11.5px; color: #fff; letter-spacing: .06em; margin-bottom: 3px; }
.call-text { color: #a9c7d1; font-size: 12px; word-wrap: break-word; }
.call-text .caret { display: inline-block; width: 7px; height: 12px; background: var(--cyan); vertical-align: -1px; animation: blink .8s infinite; }
.call-addr { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px; }
.call-addr span { font-size: 10.5px; color: var(--amber); padding: 1px 6px; border: 1px solid rgba(255,179,0,.35); }
.call-addr span.unloc { color: var(--muted); border-color: var(--line); }
.call-meta { margin-top: 4px; font-size: 10px; color: var(--muted); }
.empty { color: var(--muted); padding: 26px 10px; text-align: center; font-size: 11px; letter-spacing: .1em; line-height: 1.8; }

#nodes { max-height: 132px; overflow-y: auto; padding: 8px 12px 10px; }
.node { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 11px; }
.node i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.node.on i { background: var(--ems); box-shadow: 0 0 8px var(--ems); animation: blink 2s infinite; }
.node b { color: var(--text); font-weight: 600; }
.node span { color: var(--muted); margin-left: auto; font-size: 10px; white-space: nowrap; }

/* ---------------------------------------------------------------- timeline */
#timeline { display: grid; grid-template-columns: 200px 1fr; border-top: 1px solid var(--line); background: rgba(2,10,16,.9); min-width: 0; }
.tl-controls { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-right: 1px solid var(--line); }
.tl-controls button {
  background: transparent; color: var(--cyan-dim); border: 1px solid var(--line); padding: 4px 8px; cursor: pointer;
  font-family: var(--disp); font-size: 10px; letter-spacing: .14em;
}
.tl-controls button:hover { color: #fff; border-color: var(--line-hi); }
.tl-controls button.on { color: #000; background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px rgba(0,229,255,.4); }
.tl-controls > button { width: 100%; }
#btn-play { font-size: 12px; }
.tl-range { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.tl-range button { padding: 3px 0; font-family: var(--mono); font-weight: 600; }
#tl-canvas-wrap { position: relative; min-width: 0; cursor: crosshair; }
#tl { position: absolute; inset: 0; width: 100%; height: 100%; }
#tl-brush {
  position: absolute; top: 6px; bottom: 18px; border: 1px solid var(--cyan); cursor: grab;
  background: linear-gradient(180deg, rgba(0,229,255,.16), rgba(0,229,255,.04));
  box-shadow: 0 0 18px rgba(0,229,255,.25), inset 0 0 12px rgba(0,229,255,.15);
}
#tl-brush.drag { cursor: grabbing; }
#tl-brush.history { border-color: var(--amber); background: linear-gradient(180deg, rgba(255,179,0,.18), rgba(255,179,0,.04)); box-shadow: 0 0 18px rgba(255,179,0,.25); }
#tl-brush span { position: absolute; top: -1px; right: -1px; width: 3px; bottom: -1px; background: currentColor; color: var(--cyan); box-shadow: 0 0 10px currentColor; }
#tl-brush.history span { color: var(--amber); }
#tl-hover { position: absolute; top: 4px; pointer-events: none; font-size: 10px; color: #fff; background: rgba(0,0,0,.75); padding: 2px 6px; border: 1px solid var(--line); white-space: nowrap; display: none; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 900px) {
  #app { grid-template-rows: auto 1fr 110px; height: auto; min-height: 100dvh; }
  #hud-top { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .top-stats { order: 3; flex-basis: 100%; justify-content: flex-start; overflow-x: auto; }
  .stat { min-width: 84px; }
  .stat-note { display: none; }
  .clock { margin-left: auto; }
  #stage { grid-template-columns: 1fr; grid-template-rows: 60vh auto; }
  #map-wrap { border-right: 0; border-bottom: 1px solid var(--line); }
  #side { max-height: none; }
  #feed { max-height: 60vh; }
  #timeline { grid-template-columns: 1fr; grid-template-rows: auto 80px; }
  .tl-controls { flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 16px; }
  .tl-controls > button { width: auto; }
  .tl-range { flex: 1; }
  #legend { display: none; }
}