:root {
  --bg: #0b1016;
  --card: rgba(10, 15, 20, .93);
  --line: #2b3b4a;
  --text: #e8f1f8;
  --text-dim: #93a5b4;
  --accent: #35c07a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden;
  font: 13px/1.5 -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
[hidden] { display: none !important; }
#map { position: absolute; inset: 0; background: #060a0e; }

/* ---------------------------------------------------------------- docks */
.dock { position: absolute; z-index: 620; display: flex; flex-direction: column; gap: 8px; }
.dock-tl { top: 12px; left: 12px; }
.dock-left { top: 56px; left: 12px; max-height: calc(100% - 120px); overflow-y: auto;
  scrollbar-width: thin; padding-bottom: 4px; }
.dock-tr { top: 12px; right: 12px; align-items: flex-end; }
.dock-right { right: 12px; top: 50%; transform: translateY(-50%); }
.dock-label { color: var(--text-dim); font-size: 11px; letter-spacing: .5px; padding-left: 2px; }

/* ---------------------------------------------------------------- chips */
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start;
  list-style: none; margin: 0; padding: 0; }
.chips-col { flex-direction: column; align-items: stretch; }
.chip { display: flex; align-items: center; gap: 6px; padding: 5px 9px; font-size: 12px;
  font-weight: 600; line-height: 18px; color: var(--text); background: rgba(14, 21, 28, .95);
  border: 1px solid var(--line); border-radius: 6px; cursor: pointer; white-space: nowrap; }
.chip:hover { border-color: #3d5468; background: rgba(22, 32, 42, .97); }
.chip.active { color: #f2fff8; border-color: var(--accent); background: #17452f; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.chip .meta { color: #a8b8c6; font-size: 10px; font-weight: 400; font-variant-numeric: tabular-nums; }
.chip.active .meta { color: #c8e8d8; }
.chip.dim { opacity: .45; }
.chip[disabled] { opacity: .4; cursor: not-allowed; }
.chip-icon { padding: 5px 10px; }

/* ---------------------------------------------------------------- cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  backdrop-filter: blur(6px); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px; background: none; border: 0; cursor: pointer;
  color: var(--text-dim); font-size: 11px; letter-spacing: .4px; text-align: left; }
.card-head.static { cursor: default; }
.card-head .caret { transition: transform .15s ease; }
.legend-card { min-width: 132px; }
.legend-card .legend { padding: 0 10px 8px; }
.legend-card.collapsed .legend { display: none; }
.legend-card.collapsed .caret { transform: rotate(-90deg); }

.popover { width: 244px; padding: 0 10px 10px; }
.field { margin-bottom: 6px; }
.field:last-of-type { margin-bottom: 0; }
select, .wide { width: 100%; padding: 6px; background: #18232d; color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }
.wide { cursor: pointer; }
.wide:hover { border-color: var(--accent); color: var(--accent); }
.hint { color: var(--text-dim); font-size: 11px; margin: 6px 0 0; }
.accent { color: var(--accent); font-variant-numeric: tabular-nums; }

.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.legend li { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 12px; }
.legend .ring { width: 10px; height: 10px; border-radius: 50%; border: 2px solid; flex: 0 0 auto; }
.legend .swatch { width: 14px; height: 3px; border-radius: 2px; flex: 0 0 auto; }

.storm-list { list-style: none; margin: 0; padding: 0; font-size: 12px; max-height: 320px;
  overflow-y: auto; }
.storm-list li { padding: 5px 0; border-bottom: 1px dashed var(--line); color: var(--text-dim); }
.storm-list li:last-child { border-bottom: 0; }
.storm-list li b { color: var(--text); font-weight: 600; }
.storm-list .tag { float: right; font-variant-numeric: tabular-nums; }
.storm-list .hint { clear: both; margin: 2px 0 0; }

/* ------------------------------------------------------- time range dock */
.dock-bottom { left: 50%; transform: translateX(-50%); bottom: 12px; }
.time-card { width: min(460px, 46vw); padding: 0 12px 10px; }
.time-card .card-head { padding: 7px 0 6px; gap: 12px; }
.presets { display: flex; gap: 4px; }
.mini { padding: 2px 7px; font-size: 11px; color: var(--text-dim); background: #1b2733;
  border: 1px solid var(--line); border-radius: 5px; cursor: pointer; }
.mini:hover { color: var(--text); border-color: #3d5468; }
.time-row { display: flex; align-items: center; gap: 8px; }
.time-tag { color: var(--text-dim); font-size: 11px; width: 12px; flex: 0 0 auto; }
.time-val { color: var(--text); font-size: 11px; width: 44px; text-align: right; flex: 0 0 auto;
  font-variant-numeric: tabular-nums; }
.time-row input[type="range"] { flex: 1 1 auto; accent-color: var(--accent); height: 18px; }

/* ------------------------------------------------------------ map chrome */
.status { position: absolute; left: 12px; bottom: 12px; z-index: 610; padding: 6px 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text-dim); font-size: 11px; max-width: 60vw; }
.attribution { position: absolute; right: 12px; bottom: 12px; z-index: 610; color: #6b7c8c;
  font-size: 10px; text-align: right; max-width: 46vw; }
.attribution a { color: inherit; }

.leaflet-popup-content { margin: 10px 12px; font-size: 12px; line-height: 1.7; }
.leaflet-popup-content b { color: #0b1016; }
.cmp-label { background: none; border: none; }
.cmp-label span { font-size: 10px; font-weight: 600; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.obs-label { background: none; border: none; }
.obs-label span { font-size: 10px; font-weight: 600; color: #f8fafc; background: rgba(6, 10, 14, .78);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; white-space: nowrap; }

/* keep the scale bar clear of the status chip */
.leaflet-bottom.leaflet-left { margin-bottom: 44px; }