:root{
  --bg:#070b14; --panel:#101a2e; --line:rgba(120,160,220,.16);
  --ink:#eaf1ff; --dim:#9fb1d0; --faint:#5e6f8f;
  --cyan:#2fd9ff; --amber:#ffb13c; --red:#ff4d5e; --green:#37e0a6;
  --on-red:#fff; --on-amber:#1a1204; --on-green:#04120c;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
.app{height:100%;display:grid;grid-template-rows:auto auto 1fr auto auto;min-height:0}

.status{display:flex;align-items:center;gap:14px;padding:10px 16px;
  min-height:48px;background:var(--green);color:var(--on-green)}
.status[data-tone="amber"]{background:var(--amber);color:var(--on-amber)}
.status[data-tone="red"]{background:var(--red);color:var(--on-red)}
.brand{font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.brand b{font-weight:800}
.brand span{opacity:.7;font-weight:700;font-size:11px;letter-spacing:.18em;margin-left:6px;text-transform:uppercase}
.status-line{flex:1;min-width:0;font-size:15px;font-weight:650;line-height:1.25}
.pills{display:flex;gap:6px}
.pill{border-radius:99px;padding:3px 9px;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;background:rgba(0,0,0,.22)}
.stale{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid currentColor;border-radius:6px;padding:2px 7px}
.zip{display:flex;align-items:center;gap:6px}
.zip[hidden]{display:none}
.zip label{font-size:12px;font-weight:700}
.zip input{width:72px;border:1px solid rgba(0,0,0,.25);border-radius:7px;padding:4px 8px;background:rgba(255,255,255,.85);color:#04121c}
.zip button{border:0;border-radius:7px;padding:5px 10px;background:#04121c;color:#eaf1ff;cursor:pointer}

.map-tools{display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:8px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.views,.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.views button,.chips button{border:1px solid var(--line);background:transparent;color:var(--dim);
  border-radius:99px;padding:5px 11px;font-size:12px;cursor:pointer}
.views button.on,.chips button.on{background:#13203a;color:var(--ink);border-color:rgba(47,217,255,.4)}
.views button:disabled{opacity:.35;cursor:default}
.views .ghost{border:0;color:var(--faint);padding-inline:6px}

.stage{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr);min-height:0}
.map{position:relative;min-height:0;background:#05080f;overflow:hidden}
.map-radar{position:absolute;object-fit:fill;pointer-events:none;max-width:none}
#map{position:absolute;inset:0;width:100%;height:100%;display:block}
.stamp{position:absolute;left:10px;bottom:10px;font-size:11px;letter-spacing:.04em;
  background:rgba(7,11,20,.78);border:1px solid var(--line);color:var(--cyan);
  border-radius:6px;padding:3px 8px}

.side{display:flex;flex-direction:column;border-left:1px solid var(--line);min-height:0;overflow:hidden}
.row{flex:1;display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;
  padding:0 16px;border-bottom:1px solid var(--line);min-height:0}
.row:last-child{border-bottom:0}
.row svg{width:22px;height:22px;stroke:var(--cyan);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.row .num{font-size:clamp(22px,3.2vh,34px);font-weight:800;letter-spacing:-.03em;line-height:1}
.row .cap{font-size:12px;color:var(--dim);margin-top:2px}
.row a{color:var(--cyan)}

.actions{display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--line);background:var(--panel)}
.actions a,.actions button{flex:1;text-align:center;border:1px solid var(--line);background:#13203a;
  color:var(--ink);border-radius:10px;padding:11px 8px;font-size:13px;font-weight:650;cursor:pointer}
.actions a:hover,.actions button:hover{border-color:var(--cyan)}

footer{padding:8px 16px 10px;font-size:11px;line-height:1.45;color:var(--faint);border-top:1px solid var(--line)}
footer b{color:var(--dim);font-weight:650}
footer .copy{display:block;margin-top:2px}

dialog{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:14px;
  padding:18px;width:min(92vw,360px)}
dialog h2{font-size:18px;margin-bottom:8px}
dialog p{font-size:13px;color:var(--dim);margin-bottom:12px}
dialog label{display:block;font-size:12px;color:var(--dim);margin-bottom:10px}
dialog input{width:100%;margin-top:4px;border:1px solid var(--line);border-radius:8px;padding:8px;background:#0c1322}
dialog menu{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
dialog button{border:1px solid var(--line);background:#13203a;border-radius:8px;padding:8px 12px;cursor:pointer}

@media (max-width:760px){
  html,body{height:auto;overflow:auto}
  .app{height:auto;min-height:100dvh}
  .status{flex-wrap:wrap;gap:8px}
  .status-line{flex-basis:100%}
  .stage{grid-template-columns:1fr}
  .map{height:46vh}
  .side{border-left:0;border-top:1px solid var(--line)}
  .row{padding:12px 16px}
}
@media (max-width:380px){
  .brand span{display:none}
  .views button,.chips button{padding:5px 8px;font-size:11px}
  .row .num{font-size:22px}
}