:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
body { margin:0; background:#0b0f16; color:#e8eefc; }
a { color:#9bc2ff; text-decoration:none; }
a:hover { text-decoration:underline; }

.topbar { display:flex; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #1e2a3f; }
.brand { font-weight:700; letter-spacing:.2px; }
.crumbs { opacity:.75; }

.layout { display:grid; grid-template-columns: 1fr 360px; gap:14px; padding:14px; }
.panel { background:#0f1623; border:1px solid #1e2a3f; border-radius:14px; padding:14px; }
.card { background:#0f1623; border:1px solid #1e2a3f; border-radius:14px; padding:14px; }

.title { font-size:18px; font-weight:700; }
.subtitle { opacity:.8; margin-top:4px; font-size:13px; }

.mapwrap { position:relative; margin-top:12px; }
#usmap { width:100%; height:auto; display:block; border-radius:12px; }
.overlay { position:absolute; left:0; top:0; pointer-events:auto; }

.dot { fill:#59a7ff; stroke:#0b0f16; stroke-width:2; cursor:pointer; }
.dot:hover { fill:#ffcf5a; }

.tooltip {
  position:fixed;
  background:#0f1623;
  border:1px solid #2a3a57;
  border-radius:12px;
  padding:10px 12px;
  width:220px;
  z-index:50;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.tooltip.hidden { display:none; }
.tt-title { font-weight:700; margin-bottom:6px; }
.tt-row { font-size:13px; opacity:.9; margin:2px 0; }

.list { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.listitem { padding:10px 10px; border-radius:12px; border:1px solid #1e2a3f; cursor:pointer; }
.listitem:hover { border-color:#3b5380; }
.li-title { font-weight:650; }
.li-sub { opacity:.75; font-size:12px; margin-top:2px; }

.pre { margin-top:12px; background:#0b0f16; padding:12px; border-radius:12px; border:1px solid #1e2a3f; overflow:auto; max-height:70vh; }


.cityChart { width: 100%; height: auto; display: block; }

.plotBg { fill: #0b0f16; stroke: #1e2a3f; stroke-width: 1; }

.band0 { fill: rgba(0, 0, 0, 1.00); }          /* blank band */
.band1 { fill: rgba(10, 160, 255, 0.10); }     /* blank band */
.band2 { fill: rgba(10, 160, 255, 0.20); }     /* subtle band */
.band3 { fill: rgba(10, 160, 255, 0.30); }     /* subtle band */
.band4 { fill: rgba(10, 160, 255, 0.40); }     /* subtle band */
.band5 { fill: rgba(10, 160, 255, 0.50); }     /* subtle band */
.band6 { fill: rgba(10, 160, 255, 0.60); }     /* subtle band */
.band7 { fill: rgba(10, 160, 255, 0.70); }     /* subtle band */
.band8 { fill: rgba(10, 160, 255, 0.80); }     /* subtle band */
.band9 { fill: rgba(10, 160, 255, 0.90); }     /* subtle band */
.band10 { fill: rgb(176, 9, 218); }     /* subtle band */
.bandLabel { fill: rgba(232, 238, 252, 0.70); font-size: 12px; }

.gridLine { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
.gridLineY { stroke: rgba(255,255,255,0.06); stroke-width: 1; }

.axisLabel { fill: rgba(232, 238, 252, 0.70); font-size: 12px; }
.axisTitle { fill: rgba(232, 238, 252, 0.85); font-size: 13px; font-weight: 650; }

.actualDot { fill: #00cf5a; stroke: #0b0f16; stroke-width: 0.8; }
.nbmDot { fill: #ffcf5a; stroke: #0b0f16; stroke-width: 1.2; }
.nwsDot { fill: #ff8c42; stroke: #0b0f16; stroke-width: 1.2; }