/* ============================================
   WEATHERRADAR.AI — DESIGN TOKENS
   Define all design variables here.
   Use these tokens everywhere, not raw values.
   ============================================ */
:root {
  /* === Colors === */
  --color-bg-base:      #0a0a0f;   /* Page background */
  --color-bg-surface-0: #0f0f1a;   /* Deepest panel surface */
  --color-bg-surface-1: #111120;   /* Panel background */
  --color-bg-surface-2: #1a1a2e;   /* Card / elevated surface */
  --color-bg-surface-3: #222240;   /* Hover / active state */

  --color-border:       #333;      /* Default border */
  --color-border-muted: #222;      /* Subtle dividers */
  --color-border-accent:#00e5ff44; /* Accent border (glow) */

  --color-text-primary: #e0e0e0;   /* Body text */
  --color-text-muted:   #888;      /* Secondary text */
  --color-text-dim:     #555;      /* Tertiary / placeholder */
  --color-text-accent:  #00e5ff;   /* Cyan accent */

  --color-accent:       #00e5ff;   /* Primary brand accent */
  --color-accent-dim:   #0099aa;   /* Dimmed accent */
  --color-success:      #00e676;   /* Green — positive/up */
  --color-warning:      #ffc107;   /* Amber — neutral/watch */
  --color-danger:       #ff5252;   /* Red — negative/alert */
  --color-info:         #64b5f6;   /* Blue — info */

  --color-temp-hot:     #ff7043;   /* Temperature high */
  --color-temp-cold:    #64b5f6;   /* Temperature low */
  --color-snow:         #b0bec5;   /* Snow/ice */
  --color-rain:         #4fc3f7;   /* Rain/precip */

  /* === Trading colors === */
  --color-edge-high:    #00e676;   /* Edge > 8¢ */
  --color-edge-mid:     #ffc107;   /* Edge 3–8¢ */
  --color-edge-low:     #ff5252;   /* Edge < -8¢ */

  /* === Typography === */
  --font-body:   -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --font-size-xs: 9px;
  --font-size-sm: 11px;
  --font-size-md: 13px;
  --font-size-lg: 15px;
  --font-size-xl: 18px;

  /* === Spacing === */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;

  /* === Border radius === */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;

  /* === Shadows === */
  --shadow-panel: 0 4px 20px rgba(0,0,0,0.5);
  --shadow-glow:  0 0 20px rgba(0,229,255,0.1);
  --shadow-glow-strong: 0 0 40px rgba(0,229,255,0.2);

  /* === Transitions === */
  --transition-fast: 0.1s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* === Z-index layers === */
  --z-map:        100;
  --z-panels:     200;
  --z-overlay:    500;
  --z-modal:     1000;
  --z-toast:     2000;
  --z-onboarding:9999;
}

/* ============================================================
   WEATHERRADAR.AI — All-Source Weather Intelligence v13.8.16
   Dark Industrial / Mission Control Theme
   UPGRADED RADAR RENDERING ENGINE + HOTKEYS + CUSTOM VIEWS + SFC OBS + LSR + HYDROLOGY + TRACKING
   + LIGHTNING (Blitzortung WS) + OWM TILES + FORECAST PANEL (WeatherAPI + Tomorrow.io)
   ============================================================ */

/* === RESET & BASE === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-deep: #0a0a0f;
  --bg-panel: #111118;
  --bg-card: #161620;
  --bg-elevated: #1c1c2a;
  --border-dim: rgba(255,255,255,0.06);
  --border-active: rgba(0,229,255,0.25);
  --border-glow: rgba(0,229,255,0.5);

  --cyan: #00e5ff;
  --cyan-dim: rgba(0,229,255,0.15);
  --cyan-glow: 0 0 12px rgba(0,229,255,0.3);
  --amber: #ff9100;
  --amber-dim: rgba(255,145,0,0.15);
  --amber-glow: 0 0 12px rgba(255,145,0,0.3);
  --red: #ff3d3d;
  --green: #00e676;
  /* Radar Archive badge */
  --archive: #7c4dff;
  /* RIDGE (single-site radar) badge + site label */
  --ridge: #00bcd4;
  /* Spotter Network badge */
  --spotter: #00e5ff;
  /* Earthquakes badge */
  --quake: #00e5ff;
  --text-primary: #e8e8f0;
  --text-secondary: #8888a0;
  --text-dim: #6a6a80;

  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-sans: 'DM Sans', system-ui, sans-serif;

  --platform-nav-h: 56px;
  --top-bar-h: 60px;
  --timeline-h: 110px;
  --transition: 0.2s ease;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  background: var(--bg-deep);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* Prevent double-tap zoom on interactive elements */
button, .icon-btn, .hamburger-btn, .ctrl-btn, .layer-toggle, .layer-item, a {
  touch-action: manipulation;
}

/* === SCANLINE OVERLAY === */
.scanline-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
}

/* === MAP === */
#map {
  flex: 1;
  position: relative;
  z-index: 1;
  background: var(--bg-deep);
  min-width: 0;
}

/* v7.0: Smooth opacity crossfade for radar animation
   SAFE: only transition opacity on the layer container
   DO NOT use will-change or contain on Leaflet layers */
.leaflet-tile-pane .leaflet-layer {
  transition: opacity 0.08s linear;
}

/* Ensure radar tile images render crisply */
.leaflet-tile {
  image-rendering: auto;
}

/* Override Leaflet controls */
.leaflet-control-zoom a {
  background: var(--bg-panel) !important;
  color: var(--cyan) !important;
  border: 1px solid var(--border-active) !important;
  font-family: var(--font-mono) !important;
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  font-size: 16px !important;
}
.leaflet-control-zoom a:hover {
  background: var(--bg-elevated) !important;
  box-shadow: var(--cyan-glow);
}
.leaflet-control-zoom {
  border: none !important;
  box-shadow: none !important;
}
.leaflet-control-attribution {
  background: rgba(10,10,15,0.7) !important;
  color: var(--text-dim) !important;
  font-size: 10px !important;
  font-family: var(--font-mono) !important;
}
.leaflet-control-attribution a {
  color: var(--text-secondary) !important;
}

/* === TOP BAR === */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top-bar-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: 
    linear-gradient(180deg, var(--bg-panel) 0%, rgba(17,17,24,0.97) 100%),
    repeating-linear-gradient(90deg, rgba(0,229,255,0.02) 0px, rgba(0,229,255,0.02) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(0deg, rgba(0,229,255,0.02) 0px, rgba(0,229,255,0.02) 1px, transparent 1px, transparent 40px);
  border-bottom: 1px solid var(--border-active);
  backdrop-filter: blur(10px);
}

.top-bar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand-icon {
  animation: radar-sweep 4s linear infinite;
}
@keyframes radar-sweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.brand-text {
  display: flex;
  flex-direction: column;
}
.brand-name {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 2.5px;
  color: var(--text-primary);
}
.brand-accent {
  color: var(--cyan);
}
.brand-domain {
  color: var(--amber);
  font-weight: 600;
  letter-spacing: 1px;
}
.brand-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2.5px;
  color: var(--text-secondary);
  margin-top: 2px;
  opacity: 0.85;
}

/* Search */
.top-bar__search {
  flex: 1;
  max-width: 560px;
  margin: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.search-container {
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  padding: 0 12px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-container:focus-within {
  border-color: var(--cyan);
  box-shadow: var(--cyan-glow), inset 0 0 20px rgba(0,229,255,0.03);
}

.search-icon {
  color: var(--text-dim);
  flex-shrink: 0;
}

#searchInput {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 10px 12px;
  letter-spacing: 0.5px;
}
#searchInput::placeholder {
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

.geo-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  flex-shrink: 0;
}
.geo-btn:hover {
  color: var(--cyan);
  background: var(--cyan-dim);
}
.geo-btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  color: var(--cyan);
}

.search-btn {
  background: var(--cyan);
  color: var(--bg-deep);
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.search-btn:hover {
  background: #33ecff;
  box-shadow: var(--cyan-glow);
}
.search-btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.location-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--amber);
  letter-spacing: 1px;
  margin-top: 3px;
  height: 14px;
  text-transform: uppercase;
}
.location-label--searching {
  animation: searchPulse 1s ease-in-out infinite;
}
@keyframes searchPulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Search autocomplete dropdown */
.search-autocomplete {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  border-top: none;
  border-radius: 0 0 6px 6px;
  z-index: 2000;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.search-autocomplete.visible {
  display: block;
}
.search-ac-item {
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
  line-height: 1.4;
}
.search-ac-item:last-child { border-bottom: none; }
.search-ac-item:hover,
.search-ac-item.active {
  background: rgba(0,229,255,0.08);
}
.search-ac-item .ac-name {
  font-weight: 600;
  color: var(--text-primary);
}
.search-ac-item .ac-detail {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
}
.search-ac-item:hover .ac-name,
.search-ac-item.active .ac-name {
  color: var(--cyan);
}
.search-ac-loading {
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  letter-spacing: 0.5px;
}

/* Search btn loading state */
.search-btn--loading {
  pointer-events: none;
  opacity: 0.6;
}
.search-btn--loading::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid var(--bg-deep);
  border-top-color: transparent;
  border-radius: 50%;
  animation: layer-spin 0.6s linear infinite;
  margin-left: 4px;
  vertical-align: middle;
}

/* Controls */
.top-bar__controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
/* Visual separators between icon groups in top bar */
.top-bar__controls .ctrl-separator {
  width: 1px;
  height: 22px;
  background: var(--border-dim);
  margin: 0 2px;
  flex-shrink: 0;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(0,230,118,0.08);
  border: 1px solid rgba(0,230,118,0.2);
  border-radius: 20px;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.status-text {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--green);
}

.icon-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  color: var(--text-secondary);
  width: 38px;
  height: 38px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
}
.icon-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: var(--cyan-glow);
}
.icon-btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-color: var(--cyan);
  color: var(--cyan);
}
.icon-btn.active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: var(--cyan-dim);
}

/* === LOADING OVERLAY === */
.loading-overlay {
  position: fixed;
  top: var(--top-bar-h);
  left: 0;
  right: 0;
  bottom: var(--timeline-h);
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(10,10,15,0.85);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--cyan);
  transition: opacity 0.5s;
  pointer-events: none;
}
.loading-overlay.hidden {
  opacity: 0;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 2px solid var(--border-dim);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* === WEATHER INFO CARD === */
.weather-info {
  position: absolute;
  top: calc(var(--top-bar-h) + 16px);
  right: 16px;
  z-index: 800;
  background: rgba(17,17,24,0.92);
  border: 1px solid var(--border-active);
  border-radius: 8px;
  padding: 14px 18px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 160px;
}

.weather-info__icon {
  font-size: 28px;
  line-height: 1;
}

.weather-info__temp {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--cyan);
  line-height: 1.1;
}

.weather-info__desc {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.weather-info__details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border-dim);
  width: 100%;
}

.weather-info__details span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

/* === RADAR LEGEND === */
.radar-legend {
  position: absolute;
  bottom: calc(var(--timeline-h) + 20px);
  left: 16px;
  z-index: 800;
  background: rgba(17,17,24,0.92);
  border: 1px solid var(--border-active);
  border-radius: 6px;
  padding: 10px 8px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.legend-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 6px;
}

.legend-bar {
  display: flex;
  gap: 4px;
}

.legend-gradient {
  width: 14px;
  height: 160px;
  border-radius: 3px;
  background: linear-gradient(
    to bottom,
    #ff00ff,
    #ff0000,
    #ff6600,
    #ffaa00,
    #ffff00,
    #00cc00,
    #009900,
    #004400
  );
}

.legend-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
}

/* === INFO CARD === */
.info-card {
  position: absolute;
  top: calc(var(--top-bar-h) + 16px);
  left: 16px;
  z-index: 800;
  background: rgba(17,17,24,0.92);
  border: 1px solid var(--border-active);
  border-radius: 6px;
  padding: 12px 16px;
  min-width: 220px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.info-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}
.info-card__row + .info-card__row {
  border-top: 1px solid var(--border-dim);
}

.info-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-secondary);
}
.info-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--cyan);
}

/* === LAYER PANEL === */
.layer-panel {
  position: fixed;
  top: var(--top-bar-h);
  right: -380px;
  width: 360px;
  bottom: var(--timeline-h);
  z-index: 900;
  background: rgba(17,17,24,0.95);
  border-left: 1px solid var(--border-dim);
  backdrop-filter: blur(12px);
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.layer-panel.open {
  right: 0;
  box-shadow: -6px 0 24px rgba(0,0,0,0.5), 0 0 40px rgba(0,229,255,0.04);
}

.layer-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.layer-panel__header h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--text-secondary);
}
.layer-panel__close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  transition: color var(--transition);
}
.layer-panel__close:hover {
  color: var(--cyan);
}

.layer-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

/* Panel sections */
.layer-panel__section {
  margin-bottom: 16px;
  position: relative;
}

.section-title {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--text-secondary);
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: 10px;
}

.section-refresh {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--text-dim);
  position: absolute;
  top: 0;
  right: 4px;
  opacity: 0.6;
}

/* Option rows */
.option-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 4px;
}

.option-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

.option-select {
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition);
}
.option-select:focus {
  border-color: var(--cyan);
}
.option-select option {
  background: var(--bg-panel);
  color: var(--text-primary);
}

/* Scheme preview bar */
.scheme-preview {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  margin-top: 4px;
  background: linear-gradient(to right, #ff00ff, #ff0000, #ff6600, #ffaa00, #ffff00, #00cc00, #009900, #004400);
  box-shadow: 0 0 6px rgba(0,229,255,0.15);
}

/* Blur intensity slider */
.option-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 4px;
  background: var(--border-dim);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.option-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cyan);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0,229,255,0.4);
}
.option-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cyan);
  border: none;
  cursor: pointer;
}
.option-value {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--cyan);
  min-width: 32px;
  text-align: right;
}

/* Legend scheme name */
.legend-scheme-name {
  color: var(--cyan);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 1px;
  margin-left: 4px;
}

/* Layer items */
.layer-item {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.layer-item.active {
  border-color: var(--border-active);
  box-shadow: inset 0 0 20px rgba(0,229,255,0.03);
}

/* === LAYER LOADING & ERROR INDICATORS (v13.8.2) === */
/* Pulsing cyan dot shown on a layer-item while tiles/data are loading */
@keyframes layer-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}
@keyframes layer-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.layer-loading-dot {
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  flex-shrink: 0;
  animation: layer-pulse 1.1s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(0,229,255,0.7);
}
.layer-error-dot {
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(255,145,0,0.6);
}

/* Active states — toggled by JS */
.layer-item--loading .layer-loading-dot  { display: block; }
.layer-item--error   .layer-error-dot    { display: block; }

/* Hide error dot while loading (loading takes priority) */
.layer-item--loading.layer-item--error .layer-error-dot { display: none; }

/* Subtle border tint while loading */
.layer-item--loading {
  border-color: rgba(0,229,255,0.2);
}
.layer-item--error:not(.layer-item--loading) {
  border-color: rgba(255,145,0,0.25);
}

.layer-item__header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.layer-name {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.layer-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 2px 8px;
  border-radius: 3px;
  flex-shrink: 0;
}
.badge-live {
  background: rgba(0,230,118,0.15);
  color: var(--green);
  border: 1px solid rgba(0,230,118,0.3);
}
.badge-sat {
  background: rgba(156,39,176,0.15);
  color: #ce93d8;
  border: 1px solid rgba(156,39,176,0.3);
}
.badge-mrms {
  background: rgba(33,150,243,0.15);
  color: #64b5f6;
  border: 1px solid rgba(33,150,243,0.3);
}
.badge-nexrad {
  background: var(--amber-dim);
  color: var(--amber);
  border: 1px solid rgba(255,145,0,0.3);
}
.badge-hrrr {
  background: rgba(76,175,80,0.15);
  color: #81c784;
  border: 1px solid rgba(76,175,80,0.3);
}
.badge-precip {
  background: rgba(0,188,212,0.15);
  color: #4dd0e1;
  border: 1px solid rgba(0,188,212,0.3);
}
.badge-goes {
  background: rgba(121,85,72,0.2);
  color: #bcaaa4;
  border: 1px solid rgba(121,85,72,0.4);
}
.badge-ridge2 {
  background: rgba(0,200,83,0.15);
  color: #69f0ae;
  border: 1px solid rgba(0,200,83,0.3);
}
.badge-nowcoast {
  background: rgba(0,176,255,0.15);
  color: #40c4ff;
  border: 1px solid rgba(0,176,255,0.3);
}
.badge-warn {
  background: rgba(255,61,61,0.15);
  color: var(--red);
  border: 1px solid rgba(255,61,61,0.3);
}
.badge-ndfd {
  background: rgba(255,235,59,0.12);
  color: #fff176;
  border: 1px solid rgba(255,235,59,0.25);
}
.badge-nhc {
  background: rgba(255,87,34,0.15);
  color: #ff8a65;
  border: 1px solid rgba(255,87,34,0.3);
}
.badge-spc {
  background: rgba(255,152,0,0.15);
  color: #ffb74d;
  border: 1px solid rgba(255,152,0,0.3);
}
.badge-spc-tor {
  background: rgba(244,67,54,0.18);
  color: #ef5350;
  border: 1px solid rgba(244,67,54,0.35);
}
.badge-spc-hail {
  background: rgba(0,230,118,0.15);
  color: #69f0ae;
  border: 1px solid rgba(0,230,118,0.3);
}
.badge-spc-wind {
  background: rgba(33,150,243,0.18);
  color: #42a5f5;
  border: 1px solid rgba(33,150,243,0.35);
}
.badge-md {
  background: rgba(255,215,0,0.15);
  color: #ffd740;
  border: 1px solid rgba(255,215,0,0.35);
}
.badge-obs {
  background: rgba(0,229,255,0.12);
  color: #80deea;
  border: 1px solid rgba(0,229,255,0.3);
}
.badge-lsr {
  background: rgba(255,82,82,0.18);
  color: #ff8a80;
  border: 1px solid rgba(255,82,82,0.4);
}
.badge-enviro {
  background: rgba(76,175,80,0.18);
  color: #81c784;
  border: 1px solid rgba(76,175,80,0.4);
}
.badge-ffg {
  background: rgba(255,152,0,0.18);
  color: #ffb74d;
  border: 1px solid rgba(255,152,0,0.4);
}
.badge-hydro {
  background: rgba(33,150,243,0.18);
  color: #64b5f6;
  border: 1px solid rgba(33,150,243,0.4);
}
.badge-hydro-qpe {
  background: rgba(0,188,212,0.18);
  color: #4dd0e1;
  border: 1px solid rgba(0,188,212,0.4);
}
.badge-aircraft {
  background: rgba(0,229,255,0.18);
  color: #00e5ff;
  border: 1px solid rgba(0,229,255,0.4);
}
.badge-ships {
  background: rgba(76,175,80,0.18);
  color: #69f0ae;
  border: 1px solid rgba(76,175,80,0.4);
}

.badge-polymarket {
  background: rgba(179,157,219,0.15);
  color: #b39ddb;
  border: 1px solid rgba(179,157,219,0.35);
}
.badge-spotter {
  background: rgba(0,229,255,0.12);
  color: var(--spotter);
  border: 1px solid rgba(0,229,255,0.28);
}

.badge-marine {
  background: rgba(0,229,255,0.12);
  color: #00e5ff;
  border: 1px solid rgba(0,229,255,0.28);
}

.marine-tooltip {
  background: rgba(10,10,15,0.92) !important;
  border: 1px solid rgba(0,229,255,0.25) !important;
  color: #e8e8f0 !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  padding: 6px 8px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
}

.marine-tooltip:before { border-top-color: rgba(0,229,255,0.25) !important; }

.marine-popup-wrap .leaflet-popup-content-wrapper {
  background: rgba(10,10,15,0.95);
  border: 1px solid rgba(0,229,255,0.20);
  color: var(--text-primary);
}

.marine-popup-wrap .leaflet-popup-content {
  margin: 10px 12px;
  font-family: var(--font-sans);
}

.marine-popup {
  min-width: 220px;
}

.marine-popup__title {
  font-family: var(--font-mono);
  font-weight: 800;
  letter-spacing: 1px;
  color: #00e5ff;
  font-size: 11px;
  margin-bottom: 8px;
}

.marine-popup__id {
  color: #ff9100;
  font-weight: 800;
  margin-left: 6px;
}

.marine-popup__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.marine-popup__grid .k {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-right: 6px;
}

.marine-popup__meta {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-dim);
}

.marine-popup__links {
  margin-top: 10px;
  font-size: 12px;
}

.marine-popup__links a {
  color: #00e5ff;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,229,255,0.25);
}

.marine-popup__links a:hover {
  border-bottom-color: rgba(0,229,255,0.6);
}

.tide-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin: 4px 0 6px;
}

.tide-rows {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 8px;
}

.tide-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 0;
}

.tide-val { color: #ff9100; }

.tide-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(0,229,255,0.22);
  color: #00e5ff;
  background: rgba(0,229,255,0.10);
}

.badge-archive {
  background: rgba(124,77,255,0.18);
  color: #b39ddb;
  border: 1px solid rgba(124,77,255,0.35);
}

/* === RADAR ARCHIVE PANEL (v13.0) === */
.archive-panel {
  position: absolute;
  top: calc(var(--top-bar-h) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 850;
  width: min(520px, calc(100vw - 32px));
  background: rgba(17,17,24,0.92);
  border: 1px solid rgba(124,77,255,0.35);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
}

.archive-panel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-dim);
}

.archive-panel__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: var(--text-primary);
}

.archive-site {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid rgba(124,77,255,0.35);
  background: rgba(124,77,255,0.12);
  color: #c6b6ff;
}

.archive-panel__time {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #c6b6ff;
}

.archive-panel__controls {
  padding: 12px 14px 14px;
  display: grid;
  gap: 10px;
}

.archive-time-input {
  width: 100%;
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  outline: none;
}
.archive-time-input:focus {
  border-color: rgba(124,77,255,0.7);
  box-shadow: 0 0 0 3px rgba(124,77,255,0.15);
}

.archive-btn-row {
  display: flex;
  gap: 8px;
}

.archive-btn {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  color: var(--text-secondary);
  padding: 10px 10px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all var(--transition);
}
.archive-btn:hover {
  border-color: rgba(124,77,255,0.7);
  color: #c6b6ff;
}

.archive-btn--play {
  background: rgba(124,77,255,0.18);
  border-color: rgba(124,77,255,0.35);
  color: #c6b6ff;
}

.archive-btn--play.active {
  border-color: rgba(124,77,255,0.9);
  box-shadow: 0 0 14px rgba(124,77,255,0.25);
}

.archive-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-dim);
  opacity: 0.9;
}

.archive-open-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-dim);
}

.archive-open-btn {
  width: 100%;
  background: rgba(124,77,255,0.16);
  border: 1px solid rgba(124,77,255,0.35);
  color: #c6b6ff;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all var(--transition);
}

.archive-open-btn:hover {
  border-color: rgba(124,77,255,0.75);
  box-shadow: 0 0 14px rgba(124,77,255,0.2);
}

.ridge-site {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0,188,212,0.10);
  border: 1px solid rgba(0,188,212,0.25);
  color: #4dd0e1;
  font-weight: 700;
}

/* === LIGHTNING BOLTS === */
.ltg-bolt {
  color: var(--amber);
  filter: drop-shadow(0 0 8px rgba(255,145,0,0.25));
  opacity: 0.9;
}
.ltg-age-0 { opacity: 1; filter: drop-shadow(0 0 10px rgba(255,145,0,0.45)); }
.ltg-age-1 { opacity: 0.75; }
.ltg-age-2 { opacity: 0.5; }
.ltg-age-3 { opacity: 0.25; }

/* HRRR Hour Selector */
.hrrr-hour-selector {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 0;
}

.hrrr-btn {
  flex: 1;
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 5px 0;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}
.hrrr-btn:hover {
  border-color: var(--text-secondary);
  color: var(--text-secondary);
}
.hrrr-btn.active {
  border-color: #81c784;
  color: #81c784;
  background: rgba(76,175,80,0.12);
  box-shadow: 0 0 8px rgba(76,175,80,0.2);
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  width: 38px;
  height: 20px;
  flex-shrink: 0;
  display: inline-block;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--transition);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--text-dim);
  border-radius: 50%;
  transition: all var(--transition);
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--cyan-dim);
  border-color: var(--cyan);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
  background: var(--cyan);
  box-shadow: var(--cyan-glow);
}

.toggle-sm {
  width: 32px;
  height: 18px;
}
.toggle-sm .toggle-slider::before {
  width: 12px;
  height: 12px;
}
.toggle-sm input:checked + .toggle-slider::before {
  transform: translateX(14px);
}

/* Layer opacity controls */
.layer-item__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-dim);
}

.opacity-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.opacity-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--bg-deep);
  border-radius: 2px;
  outline: none;
}
.opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--cyan);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--cyan-glow);
}
.opacity-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--cyan);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.opacity-value {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  min-width: 30px;
  text-align: right;
}

/* === TIMELINE BAR === */
.timeline-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--timeline-h);
  z-index: 1000;
  background: 
    linear-gradient(0deg, rgba(10,10,15,0.99) 0%, rgba(17,17,24,0.98) 100%),
    repeating-linear-gradient(90deg, rgba(0,229,255,0.025) 0px, rgba(0,229,255,0.025) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(0deg, rgba(0,229,255,0.025) 0px, rgba(0,229,255,0.025) 1px, transparent 1px, transparent 40px);
  border-top: 1px solid rgba(0,229,255,0.25);
  box-shadow: 0 -2px 16px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}

.timeline-bar__top {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 0;
}

/* PAST / FORECAST section labels flanking the track */
.timeline-zone-label {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  opacity: 0.75;
}
.timeline-zone-label--past {
  color: var(--cyan);
}
.timeline-zone-label--forecast {
  color: var(--amber);
}

.timeline-track {
  position: relative;
  flex: 1;
  height: 34px;
  background: rgba(0,0,0,0.45);
  border-radius: 6px;
  border: 1px solid rgba(0,229,255,0.18);
  cursor: pointer;
  overflow: visible;
  touch-action: none;
  user-select: none;
  /* Slightly taller + min-height for easier mobile grabbing */
  min-height: 34px;
}

.timeline-past {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(0,229,255,0.06) 0%, rgba(0,229,255,0.12) 100%);
  border-radius: 6px 0 0 6px;
  pointer-events: none;
}

.timeline-nowcast {
  position: absolute;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,145,0,0.08) 0%, rgba(255,145,0,0.14) 100%);
  border-radius: 0 6px 6px 0;
  pointer-events: none;
  /* Subtle dashed top border to signal forecast zone */
  border-top: 1px dashed rgba(255,145,0,0.25);
  border-bottom: 1px dashed rgba(255,145,0,0.25);
}

.timeline-markers {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
  overflow: hidden;
  border-radius: 5px;
}

.timeline-marker {
  flex: 1;
  border-right: 1px solid rgba(255,255,255,0.05);
  position: relative;
  transition: background 0.08s;
  /* contain removed (constraint: no contain:strict; avoid containment on animated DOM) */
}
.timeline-marker.active {
  background: rgba(0,229,255,0.18);
}
.timeline-marker.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cyan);
  box-shadow: 0 0 4px rgba(0,229,255,0.5);
}
.timeline-marker.nowcast {
  border-right-color: rgba(255,145,0,0.12);
}
.timeline-marker.nowcast.active {
  background: rgba(255,145,0,0.18);
}
.timeline-marker.nowcast.active::after {
  background: var(--amber);
  box-shadow: 0 0 4px rgba(255,145,0,0.5);
}

.timeline-playhead {
  position: absolute;
  top: -4px;
  width: 4px;
  height: calc(100% + 8px);
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(0,229,255,0.8), 0 0 12px rgba(0,229,255,0.4);
  border-radius: 3px;
  transition: left 0.07s linear;
  z-index: 10;
  pointer-events: none;
  /* will-change removed (constraint: no will-change on Leaflet/timeline elements) */
  /* contain removed (constraint: no contain:strict; avoid containment on animated DOM) */
}
/* Thumb knob on the playhead for easier grabbing */
.timeline-playhead::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0,229,255,0.9);
}

.timeline-bar__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0 4px;
  gap: 8px;
}

.timeline-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.tl-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-secondary);
  width: 34px;
  height: 34px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.tl-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(0,229,255,0.08);
  box-shadow: 0 0 8px rgba(0,229,255,0.15);
}
.tl-btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-color: var(--cyan);
  color: var(--cyan);
}
.tl-btn:active {
  transform: scale(0.92);
  background: rgba(0,229,255,0.15);
}
.tl-btn--play {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--cyan);
  border-color: var(--cyan);
  color: #0a0a0f;
  box-shadow: 0 0 10px rgba(0,229,255,0.3);
}
.tl-btn--play:hover {
  background: #33ecff;
  border-color: #33ecff;
  color: #0a0a0f;
  box-shadow: 0 0 16px rgba(0,229,255,0.6);
}
.tl-btn--play:active {
  transform: scale(0.90);
  box-shadow: 0 0 8px rgba(0,229,255,0.5);
}

.timeline-timestamp {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
  min-width: 0;
}
#frameTimestamp {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.frame-type {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 3px 9px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.frame-type.past {
  background: rgba(0,229,255,0.12);
  color: var(--cyan);
  border: 1px solid rgba(0,229,255,0.25);
}
.frame-type.nowcast {
  background: rgba(255,145,0,0.14);
  color: var(--amber);
  border: 1px solid rgba(255,145,0,0.3);
  box-shadow: 0 0 6px rgba(255,145,0,0.15);
}

.timeline-speed {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.speed-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--text-dim);
  margin-right: 2px;
  opacity: 0.85;
}
.speed-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-width: 36px;
  text-align: center;
}
.speed-btn:hover {
  border-color: rgba(255,255,255,0.3);
  color: var(--text-secondary);
  background: rgba(255,255,255,0.07);
}
.speed-btn:active {
  transform: scale(0.94);
}
.speed-btn.active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(0,229,255,0.12);
  box-shadow: 0 0 8px rgba(0,229,255,0.2), inset 0 0 6px rgba(0,229,255,0.05);
  font-weight: 700;
}

/* Divider line at the past/nowcast boundary */
.timeline-nowcast-divider {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(255,145,0,0.55);
  box-shadow: 0 0 6px rgba(255,145,0,0.4);
  pointer-events: none;
  z-index: 3;
  /* left % set dynamically by buildTimeline() */
}

.tl-btn--play svg {
  transition: transform 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.tl-btn--play:active svg {
  transform: scale(0.85);
}

/* Data Status Bar */
.timeline-bar__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-dim);
  border-top: 1px solid var(--border-dim);
  padding-top: 4px;
}
.timeline-bar__status span {
  opacity: 0.7;
}

/* === KEYBOARD HINTS === */
.keyboard-hints {
  position: fixed;
  bottom: calc(var(--timeline-h) + 8px);
  right: 16px;
  z-index: 800;
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  opacity: 0.5;
  transition: opacity var(--transition);
}
.keyboard-hints:hover {
  opacity: 1;
}
kbd {
  display: inline-block;
  padding: 1px 5px;
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  margin-right: 2px;
}

/* === HOTKEY SETTINGS MODAL === */

/* Tab Switcher */
.hotkey-tabs {
  display: flex;
  gap: 0;
  padding: 0 24px;
  border-bottom: 1px solid var(--border-dim);
}
.hotkey-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 12px 0;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}
.hotkey-tab:hover {
  color: var(--text-secondary);
}
.hotkey-tab.active {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

.hotkey-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0);
  pointer-events: none;
  transition: background 0.25s;
}
.hotkey-modal.open {
  background: rgba(0,0,0,0.6);
  pointer-events: all;
}

.hotkey-modal__panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-active);
  border-radius: 12px;
  width: 480px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), var(--cyan-glow);
  transform: scale(0.95) translateY(10px);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s;
}
.hotkey-modal.open .hotkey-modal__panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.hotkey-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-dim);
}
.hotkey-modal__header h3 {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--text-primary);
}
.hotkey-modal__close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  transition: color var(--transition);
}
.hotkey-modal__close:hover {
  color: var(--cyan);
}

.hotkey-modal__hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  padding: 10px 24px 6px;
}

.hotkey-modal__list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px 16px;
}

.hk-category {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-dim);
  padding: 12px 0 6px;
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: 4px;
}
.hk-category:first-child {
  padding-top: 0;
}

.hk-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
  border-radius: 6px;
  transition: background var(--transition);
}
.hk-row:hover {
  background: rgba(255,255,255,0.02);
}
.hk-row.rebinding {
  background: var(--cyan-dim);
}

.hk-label {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-primary);
}

.hk-key-btn {
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
  transition: all var(--transition);
  min-width: 60px;
  text-align: center;
}
.hk-key-btn:hover {
  border-color: var(--cyan);
  box-shadow: var(--cyan-glow);
}
.hk-key-btn kbd {
  margin: 0;
  background: none;
  border: none;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 600;
}

.hk-listening {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--amber);
  letter-spacing: 0.5px;
  animation: listening-pulse 1s ease-in-out infinite;
}
@keyframes listening-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.hotkey-modal__footer {
  padding: 12px 24px 20px;
  border-top: 1px solid var(--border-dim);
  text-align: center;
}

.hotkey-reset-btn {
  background: none;
  border: 1px solid var(--border-dim);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  padding: 8px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition);
}
.hotkey-reset-btn:hover {
  border-color: var(--amber);
  color: var(--amber);
  box-shadow: var(--amber-glow);
}


/* ─────────────────────────────────────────────────────────────
   EMBED MODE (v13.8.12)
   When URL params (lat/layers) are present, we treat the app as an embedded widget.
   Hide non-essential chrome so the iframe looks clean on third-party sites.
   ───────────────────────────────────────────────────────────── */
body.embed-mode .top-bar {
  padding: 10px 12px;
}
body.embed-mode .layer-toggle-btn,
body.embed-mode .hamburger-btn,
body.embed-mode #hotkeyBtn,
body.embed-mode #embedOpenBtn {
  display: none !important;
}
body.embed-mode #infoCard,
body.embed-mode #keyboardHints {
  display: none !important;
}
body.embed-mode #mapPaneLabel1,
body.embed-mode #mapPaneLabel2,
body.embed-mode #splitProductBar {
  display: none !important;
}
body.embed-mode #mapContainer {
  height: calc(100vh - 52px);
}
@media (max-width: 520px) {
  body.embed-mode .top-bar {
    padding: 8px 10px;
  }
  body.embed-mode #mapContainer {
    height: calc(100vh - 48px);
  }
}

/* Generic dark popup class for Leaflet popups (consistency pass v13.8.4)
   Some layers bind popups with className: 'dark-popup' but no CSS existed.
   This provides a safe, consistent baseline and allows per-layer wrappers
   (e.g. .marine-popup-wrap, .gauge-popup-wrap) to override as needed. */
.dark-popup .leaflet-popup-content-wrapper {
  background: rgba(10,10,15,0.95);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-primary);
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
}
.dark-popup .leaflet-popup-tip {
  background: rgba(10,10,15,0.95);
  border: 1px solid rgba(255,255,255,0.12);
}
.dark-popup .leaflet-popup-content {
  margin: 10px 12px;
}
.dark-popup a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,229,255,0.25);
}
.dark-popup a:hover {
  border-bottom-color: rgba(0,229,255,0.55);
}

/* Smooth out popup close button appearance when enabled */
.dark-popup .leaflet-popup-close-button {
  color: var(--text-dim) !important;
}
.dark-popup .leaflet-popup-close-button:hover {
  color: var(--cyan) !important;
}
.hotkey-toast {
  position: fixed;
  bottom: calc(var(--timeline-h) + 50px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 1500;
  background: var(--bg-panel);
  border: 1px solid var(--border-active);
  border-radius: 8px;
  padding: 8px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--cyan);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), var(--cyan-glow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.hotkey-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.hotkey-toast.toast--error {
  border-color: var(--amber);
  color: var(--amber);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), var(--amber-glow);
}
.hotkey-toast.toast--warn {
  border-color: #ffcc00;
  color: #ffcc00;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.hotkey-toast.toast--info {
  border-color: rgba(0,229,255,0.5);
  color: #b0ecf5;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* === PULSE MARKER === */
.pulse-marker {
  width: 20px;
  height: 20px;
  position: relative;
}
.pulse-marker::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: rgba(0,229,255,0.15);
  animation: pulse-ring 2s ease-out infinite;
}
.pulse-marker-dot {
  width: 12px;
  height: 12px;
  background: var(--cyan);
  border: 2px solid #fff;
  border-radius: 50%;
  margin: 4px;
  box-shadow: var(--cyan-glow);
}
@keyframes pulse-ring {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* === MOBILE HAMBURGER MENU BUTTON (hidden on desktop) === */
.hamburger-btn {
  display: none;
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  color: var(--text-secondary);
  width: 44px;
  height: 44px;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
  position: relative;
}
.hamburger-btn:hover, .hamburger-btn.active {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: var(--cyan-glow);
}
.hamburger-btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-color: var(--cyan);
  color: var(--cyan);
}
.hamburger-btn .menu-icon,
.hamburger-btn .close-icon {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.hamburger-btn .menu-icon {
  opacity: 1;
  transform: scale(1);
}
.hamburger-btn .close-icon {
  opacity: 0;
  transform: scale(0.6);
  position: absolute;
}
.hamburger-btn.active .menu-icon {
  opacity: 0;
  transform: scale(0.6);
}
.hamburger-btn.active .close-icon {
  opacity: 1;
  transform: scale(1);
}

/* === LAYER PANEL BACKDROP (mobile overlay) === */
.layer-panel-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 899;
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.layer-panel-backdrop.visible {
  display: block;
  opacity: 1;
}

/* === RESPONSIVE — TABLET (768px) === */

/* Quake HUD responsive */
@media (max-width: 768px) {
  .quake-hud {
    top: calc(var(--top-bar-h) + 8px);
    right: 8px;
    padding: 8px 10px;
  }
  .quake-hud__count { font-size: 16px; }
}

@media (max-width: 768px) {
  :root {
    --top-bar-h: 50px;
    --timeline-h: 90px;
  }
  .brand-text {
    display: none;
  }
  .top-bar__search {
    margin: 0 6px;
    flex: 1;
    min-width: 0;
  }
  #searchInput {
    font-size: 13px;
    padding: 8px 12px;
  }
  .search-btn {
    padding: 6px 12px;
    font-size: 11px;
  }
  .search-autocomplete {
    font-size: 11px;
  }
  .search-ac-item {
    padding: 8px 12px;
  }
  .status-indicator {
    display: none;
  }
  .info-card {
    display: none;
  }
  .weather-info {
    top: calc(var(--top-bar-h) + 8px);
    right: 8px;
    padding: 8px 10px;
    min-width: 120px;
  }
  .weather-info__temp {
    font-size: 20px;
  }
  .keyboard-hints {
    display: none;
  }
  .radar-legend {
    bottom: calc(var(--timeline-h) + 8px);
    padding: 6px 5px;
  }
  .tracking-hud {
    bottom: calc(var(--timeline-h) + 8px);
    left: 8px;
  }
  .legend-gradient {
    height: 90px;
  }
  .timeline-speed .speed-label {
    display: none;
  }
  .timeline-bar__bottom {
    gap: 6px;
  }
  #frameTimestamp {
    font-size: 11px;
  }
  /* Layer panel: full-width slide-over on mobile */
  .layer-panel {
    width: 85vw;
    max-width: 380px;
    right: -90vw;
  }
  .layer-panel.open {
    right: 0;
    box-shadow: -4px 0 24px rgba(0,0,0,0.6);
  }
  .hotkey-modal__panel {
    width: 95vw;
    max-height: 85vh;
  }
  .save-view-modal__panel {
    width: 92vw;
  }
  /* Touch-friendly icon buttons: 44px minimum */
  .icon-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
  }
  .top-bar__controls {
    gap: 6px;
  }
  /* Hamburger visible on tablet */
  .hamburger-btn {
    display: flex;
  }
  /* Hide layer toggle button (hamburger replaces it) */
  #layerToggleBtn {
    display: none;
  }
  /* Compact timeline for tablet */
  .timeline-bar {
    height: var(--timeline-h);
    padding: 6px 12px 8px;
  }
  .timeline-bar__top {
    gap: 8px;
  }
  .timeline-controls .tl-btn {
    width: 40px;
    height: 40px;
  }
  .timeline-controls .tl-btn--play {
    width: 44px;
    height: 44px;
  }
  /* Hide icon group separators on tablet */
  .ctrl-separator {
    display: none;
  }
}

/* === RESPONSIVE — PHONE (480px) === */
@media (max-width: 480px) {
  :root {
    --top-bar-h: 46px;
    --timeline-h: 80px;
  }
  .top-bar {
    height: 46px;
    padding: 0 6px;
    gap: 4px;
  }
  .brand-icon {
    display: none;
  }
  .timeline-speed {
    display: none;
  }
  .weather-info {
    display: none !important;
  }
  /* Only show essential buttons: hamburger + layer toggle + search */
  #globeToggleBtn, #hotkeyBtn, #splitViewBtn, #measureBtn, #routeWeatherBtn, #soundingsToggleBtn, #embedBtn, #settingsBtn {
    display: none;
  }
  .top-bar__search {
    margin: 0 4px;
  }
  #searchInput {
    font-size: 12px;
    padding: 7px 10px;
  }
  .search-btn {
    padding: 5px 8px;
    font-size: 10px;
  }
  /* Layer panel: full-width on phone */
  .layer-panel {
    width: 100vw;
    max-width: 100vw;
    right: -105vw;
    border-left: none;
  }
  .layer-panel.open {
    right: 0;
  }
  /* Touch-friendly controls */
  .icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .hamburger-btn {
    width: 44px;
    height: 44px;
  }
  /* Compact timeline playback */
  .timeline-bar {
    padding: 4px 8px 6px;
  }
  .timeline-zone-label {
    display: none;
  }
  .timeline-controls .tl-btn {
    width: 38px;
    height: 38px;
  }
  .timeline-controls .tl-btn--play {
    width: 44px;
    height: 44px;
  }
  .ctrl-btn svg {
    width: 14px;
    height: 14px;
  }
  /* Hide icon group separators on phone */
  .ctrl-separator {
    display: none;
  }
  /* Compact tracking HUD */
  .tracking-hud {
    font-size: 10px;
    padding: 4px 8px;
    bottom: calc(var(--timeline-h) + 4px);
    left: 4px;
    max-width: 160px;
  }
  .radar-legend {
    bottom: calc(var(--timeline-h) + 4px);
    left: auto;
    right: 4px;
  }
  .legend-gradient {
    height: 70px;
  }
  /* Popups and modals: fill screen */
  .forecast-panel {
    width: 95vw !important;
    max-width: 95vw !important;
    right: 2.5vw !important;
  }
  .skewt-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    right: 0 !important;
  }
  /* Opacity sliders: bigger touch target */
  .opacity-slider {
    height: 6px;
  }
  .opacity-slider::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
  }
  .opacity-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }
  /* Layer items: more padding for touch */
  .layer-item {
    padding: 10px 12px;
  }
  .layer-toggle {
    width: 44px;
    height: 24px;
  }
  .layer-toggle::after {
    width: 18px;
    height: 18px;
  }
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-deep);
}
::-webkit-scrollbar-thumb {
  background: rgba(0,229,255,0.12);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,229,255,0.28);
}

/* ─── Radar Source Label ─── */
.radar-source-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
  display: inline-block;
  line-height: 1;
}
.radar-source-label.rv {
  background: rgba(0, 229, 255, 0.15);
  color: var(--cyan);
  border: 1px solid rgba(0, 229, 255, 0.3);
}

/* === CUSTOM VIEWS LIST === */
.views-list {
  padding: 8px 24px 16px;
  overflow-y: auto;
  flex: 1;
  max-height: 50vh;
}

.cv-empty {
  text-align: center;
  padding: 32px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.8;
  letter-spacing: 0.5px;
}
.cv-empty kbd {
  display: inline-block;
  padding: 1px 5px;
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  margin: 0 2px;
}

.cv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px;
  border-radius: 8px;
  margin-bottom: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.cv-row:hover {
  border-color: var(--border-active);
  box-shadow: inset 0 0 12px rgba(0,229,255,0.03);
}

.cv-row__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.cv-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cv-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

.cv-row__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 10px;
}

.cv-key {
  display: inline-block;
  padding: 2px 8px;
  background: var(--cyan-dim);
  border: 1px solid var(--border-active);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--cyan);
  margin: 0;
}
.cv-nokey {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  opacity: 0.5;
}

.cv-btn {
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  color: var(--text-dim);
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
}
.cv-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: var(--cyan-glow);
}
.cv-btn--delete:hover {
  border-color: var(--red);
  color: var(--red);
  box-shadow: 0 0 12px rgba(255,61,61,0.3);
}
.cv-btn--load:hover {
  border-color: var(--green);
  color: var(--green);
  box-shadow: 0 0 12px rgba(0,230,118,0.3);
}

/* === SAVE VIEW MODAL === */
.save-view-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0);
  pointer-events: none;
  transition: background 0.25s;
}
.save-view-modal.open {
  background: rgba(0,0,0,0.65);
  pointer-events: all;
}

.save-view-modal__panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-active);
  border-radius: 12px;
  width: 380px;
  padding: 28px 28px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), var(--cyan-glow);
  transform: scale(0.95) translateY(10px);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s;
}
.save-view-modal.open .save-view-modal__panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.save-view-modal__title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.save-view-modal__hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}

.save-view-modal__field {
  margin-bottom: 16px;
}
.save-view-modal__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-dim);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.save-view-modal__input {
  width: 100%;
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.save-view-modal__input:focus {
  border-color: var(--cyan);
  box-shadow: var(--cyan-glow), inset 0 0 20px rgba(0,229,255,0.03);
}
.save-view-modal__input::placeholder {
  color: var(--text-dim);
}

.sv-key-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: 0.5px;
}
.sv-key-btn:hover {
  border-color: var(--cyan);
  color: var(--text-secondary);
  box-shadow: var(--cyan-glow);
}
.sv-key-btn.listening {
  border-color: var(--amber);
  color: var(--amber);
  animation: listening-pulse 1s ease-in-out infinite;
}
.sv-key-btn.has-key {
  border-color: var(--cyan);
  color: var(--cyan);
  background: var(--cyan-dim);
}

.save-view-modal__actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.save-view-modal__btn {
  flex: 1;
  padding: 10px 0;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}
.save-view-modal__btn--confirm {
  background: var(--cyan);
  color: var(--bg-deep);
  border: 1px solid var(--cyan);
}
.save-view-modal__btn--confirm:hover {
  background: #33ecff;
  box-shadow: var(--cyan-glow);
}
.save-view-modal__btn--cancel {
  background: none;
  border: 1px solid var(--border-dim);
  color: var(--text-secondary);
}
.save-view-modal__btn--cancel:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

/* === LAYER HINT TEXT === */
.layer-item__hint {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  padding: 4px 0 0 48px;
  opacity: 0.7;
}

/* === AIRCRAFT POPUP & TOOLTIP === */
.aircraft-icon {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.aircraft-popup-container .leaflet-popup-content-wrapper {
  background: rgba(17,17,24,0.95);
  border: 1px solid var(--border-active);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 12px rgba(0,229,255,0.2);
  color: var(--text-primary);
  padding: 0;
}
.aircraft-popup-container .leaflet-popup-tip {
  background: rgba(17,17,24,0.95);
  border: 1px solid var(--border-active);
}
.aircraft-popup {
  padding: 10px 14px;
  font-family: var(--font-mono);
  min-width: 140px;
}
.ap-callsign {
  font-size: 14px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 2px;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-dim);
}
.ap-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}
.ap-lbl {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-dim);
}
.ap-val {
  font-size: 11px;
  color: var(--text-primary);
}
.ap-ground {
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--amber);
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border-dim);
}
.aircraft-tooltip {
  background: rgba(17,17,24,0.9);
  border: 1px solid var(--border-active);
  border-radius: 4px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 2px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.aircraft-tooltip::before {
  border-top-color: rgba(17,17,24,0.9);
}

/* === TRACKING HUD === */
.tracking-hud {
  position: absolute;
  bottom: calc(var(--timeline-h) + 20px);
  left: 16px;
  z-index: 800;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}
.thud-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(17,17,24,0.88);
  border: 1px solid var(--border-active);
  border-radius: 6px;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.thud-aircraft {
  color: var(--cyan);
  border-color: rgba(0,229,255,0.3);
}
.thud-ships {
  color: #69f0ae;
  border-color: rgba(76,175,80,0.3);
}

.thud-archive {
  color: #c6b6ff;
  border-color: rgba(124,77,255,0.35);
}
.thud-archive-time {
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(124,77,255,0.28);
  background: rgba(124,77,255,0.10);
  color: #c6b6ff;
  font-weight: 700;
}
.thud-loading {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--border-dim);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* === ALTITUDE BAND POPUP STYLES === */
.ap-vrate-up { color: #00e676; }
.ap-vrate-down { color: #ff5252; }
.ap-vrate-level { color: var(--text-dim); }


/* Measurement tool (Leaflet.PolylineMeasure) */
.leaflet-control-polylinemeasure {
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.5));
}
.leaflet-control-polylinemeasure a {
  background: rgba(17,17,24,0.92) !important;
  border: 1px solid var(--border-active) !important;
  color: var(--cyan) !important;
}
.leaflet-control-polylinemeasure a:hover {
  box-shadow: var(--cyan-glow);
}


/* === LIGHTNING FLASH ANIMATION (Blitzortung strikes) === */
@keyframes lightning-flash {
  0%   { transform: scale(2.5); opacity: 1; }
  40%  { transform: scale(1.4); opacity: 0.9; }
  100% { transform: scale(1);   opacity: 0.6; }
}
@keyframes lightning-pulse {
  0%, 100% { box-shadow: 0 0 4px 2px rgba(255,235,59,0.8); }
  50%       { box-shadow: 0 0 12px 6px rgba(255,235,59,0.4); }
}

/* Fresh strike (<10s old) gets flash animation */
.ltg-flash {
  animation: lightning-flash 0.4s ease-out forwards, lightning-pulse 1.5s ease-in-out 0.4s 3;
}

/* === TRACKING HUD — Lightning item === */
.thud-lightning {
  color: #ffeb3b;
  border-color: rgba(255,235,59,0.35);
}
.thud-ltg-reconnect {
  color: var(--amber);
  font-size: 9px;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

/* === OWM / QPF BADGES === */
.badge-owm {
  background: linear-gradient(135deg, #1565c0, #1976d2);
  color: #e3f2fd;
}
.badge-qpf {
  background: rgba(139,195,74,0.16);
  color: var(--qpf);
  border: 1px solid rgba(139,195,74,0.38);
}
.badge-wind-flow {
  background: linear-gradient(135deg, #00897b, #26a69a);
  color: #e0f2f1;
}
.badge-sfc-analysis {
  background: rgba(255,152,0,0.18);
  color: #ffab40;
  border: 1px solid rgba(255,152,0,0.40);
}
.badge-aviation {
  background: rgba(0,188,212,0.16);
  color: #00e5ff;
  border: 1px solid rgba(0,229,255,0.35);
}

.badge-aviation--haz {
  background: rgba(255,145,0,0.12);
  color: var(--amber);
  border: 1px solid rgba(255,145,0,0.25);
}

.layer-item--subsection {
  border-top: 1px dashed rgba(255,255,255,0.06);
  margin-top: 10px;
  padding-top: 10px;
}

.avn-hz-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--amber);
  background: rgba(255,145,0,0.12);
  border: 1px solid rgba(255,145,0,0.25);
}

.badge-quake {
  background: rgba(0,229,255,0.12);
  color: #00e5ff;
  border: 1px solid rgba(0,229,255,0.28);
}

.quake-hud {
  position: absolute;
  top: calc(var(--top-bar-h) + 16px);
  right: 16px;
  z-index: 850;
  background: rgba(17,17,24,0.92);
  border: 1px solid rgba(0,229,255,0.22);
  border-radius: 10px;
  padding: 10px 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.55);
  font-family: var(--font-mono);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.quake-hud__title {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text-dim);
}
.quake-hud__count {
  font-size: 18px;
  font-weight: 800;
  color: #00e5ff;
}
.quake-hud__age {
  font-size: 10px;
  letter-spacing: 1px;
  color: #ff9100;
}

.quake-popup-wrap .leaflet-popup-content-wrapper {
  background: rgba(10,10,15,0.95);
  border: 1px solid rgba(0,229,255,0.20);
  color: var(--text-primary);
}

.quake-popup-wrap .leaflet-popup-content {
  margin: 10px 12px;
  font-family: var(--font-sans);
}

.quake-popup {
  min-width: 220px;
}

.quake-popup__title {
  font-family: var(--font-mono);
  font-weight: 800;
  letter-spacing: 1px;
  color: #00e5ff;
  font-size: 11px;
  margin-bottom: 8px;
}

.quake-popup__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  margin: 4px 0;
}

.quake-popup__meta b {
  color: var(--text-primary);
}

.quake-popup__link a {
  color: #00e5ff;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,229,255,0.25);
}

.quake-popup__link a:hover {
  border-bottom-color: rgba(0,229,255,0.6);
}

/* ── NIFC Wildfires (v11.8) ── */
.badge-fire {
  background: rgba(255,145,0,0.15);
  color: #ff9100;
  border: 1px solid rgba(255,145,0,0.3);
}

/* ── NASA GIBS Fire Hotspots (v12.3) ── */
.badge-nasa {
  background: rgba(255,60,60,0.15);
  color: #ff4444;
  border: 1px solid rgba(255,60,60,0.3);
}

/* ── HMS Smoke Detection (v13.1) ── */
.badge-smoke {
  background: rgba(180,160,140,0.15);
  color: #b0a090;
  border: 1px solid rgba(180,160,140,0.3);
}

.badge-gibs {
  background: rgba(66,165,245,0.15);
  color: #64b5f6;
  border: 1px solid rgba(66,165,245,0.3);
}

.hms-popup {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-primary);
}

.hms-popup__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.hms-popup__title {
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--amber);
}

.hms-popup__density {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hms-density--light {
  background: rgba(180,180,180,0.2);
  color: #ccc;
}

.hms-density--medium {
  background: rgba(220,170,70,0.2);
  color: #e0b050;
}

.hms-density--heavy {
  background: rgba(200,60,40,0.25);
  color: #ff5544;
}

.hms-popup__row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}

.hms-popup__lbl {
  color: rgba(255,255,255,0.5);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hms-popup__val {
  color: var(--text-primary);
  font-weight: 500;
}

.hms-popup-container .leaflet-popup-content-wrapper {
  background: rgba(17,17,24,0.95);
  border: 1px solid rgba(0,229,255,0.15);
  border-radius: 6px;
  padding: 6px 10px;
}

.hms-tooltip {
  background: rgba(17,17,24,0.88) !important;
  border: 1px solid rgba(180,160,140,0.3) !important;
  color: #b0a090 !important;
  font-family: var(--mono) !important;
  font-size: 0.65rem !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
}

/* ── Sea Surface Temperature badge (v12.9) ── */
.badge-sst {
  background: rgba(0,150,255,0.15);
  color: #42a5f5;
  border: 1px solid rgba(0,150,255,0.3);
}

/* ── WAVEWATCH III Wave Model (v13.3) ── */
.badge-wave {
  background: rgba(0,200,150,0.15);
  color: #4dd0a0;
  border: 1px solid rgba(0,200,150,0.3);
}

/* ── GFS Upper-Air / Synoptic layers (v14.2) ── */
.badge-gfs {
  background: rgba(76,175,80,0.15);
  color: #81c784;
  border: 1px solid rgba(76,175,80,0.3);
}

/* ── SWPC Space Weather (v12.4) ── */
.badge-swpc {
  background: rgba(130,80,255,0.15);
  color: #b388ff;
  border: 1px solid rgba(130,80,255,0.3);
}

.kp-hud {
  position: absolute;
  top: calc(var(--top-bar-h) + 16px);
  right: 16px;
  background: rgba(10,10,15,0.92);
  border: 1px solid rgba(130,80,255,0.25);
  border-radius: 8px;
  padding: 8px 14px;
  z-index: 1100;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.9rem;
}

/* ── Air Quality badge + HUD + popup (v12.5) ── */
.badge-aqi {
  background: rgba(0,200,0,0.15);
  color: #66ff66;
  border: 1px solid rgba(0,200,0,0.3);
}
.badge-uv {
  background: rgba(255,160,0,0.15);
  color: #ffcc00;
  border: 1px solid rgba(255,160,0,0.3);
}

.aqi-hud {
  position: absolute;
  top: calc(var(--top-bar-h) + 56px);
  right: 16px;
  background: rgba(10,10,15,0.92);
  border: 1px solid rgba(0,200,0,0.25);
  border-radius: 8px;
  padding: 8px 14px;
  z-index: 1100;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.85rem;
}
.aqi-hud__label {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text-dim, #888);
  text-transform: uppercase;
}
.aqi-hud__badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.8rem;
}
.aqi-hud__pts {
  font-size: 0.75rem;
  color: var(--text-dim, #888);
}

.aqi-label {
  background: transparent !important;
  border: none !important;
  pointer-events: none;
}

.aqi-popup-wrap .leaflet-popup-content-wrapper {
  background: #111118;
  border: 1px solid rgba(0,200,0,0.2);
  border-radius: 8px;
  color: #e0e0e0;
}
.aqi-popup-wrap .leaflet-popup-tip {
  background: #111118;
}
.aqi-popup {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.8rem;
}
.aqi-popup__header {
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 6px;
  text-align: center;
}
.aqi-popup__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.aqi-popup__table td {
  padding: 2px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.aqi-popup__table td:first-child {
  color: #aaa;
  font-weight: 600;
}
.aqi-popup__source {
  font-size: 0.65rem;
  color: #666;
  text-align: right;
  margin-top: 4px;
}

/* ── USGS River Gauges (v12.7) ── */
.badge-gauge {
  background: rgba(0,153,255,0.15);
  color: #0099ff;
  border: 1px solid rgba(0,153,255,0.3);
}

.gauge-marker {
  background: transparent !important;
  border: none !important;
  position: relative;
}
.gauge-marker__label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.7);
  pointer-events: none;
  margin-top: 1px;
}

.gauge-popup-wrap .leaflet-popup-content-wrapper {
  background: rgba(10,10,15,0.95);
  border: 1px solid rgba(0,153,255,0.3);
  border-radius: 8px;
}
.gauge-popup-wrap .leaflet-popup-tip {
  background: rgba(10,10,15,0.95);
}
.gauge-popup {
  padding: 4px 2px;
  min-width: 200px;
}
.gauge-popup__title {
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  margin-bottom: 2px;
}
.gauge-popup__id {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.7rem;
  color: #888;
  margin-bottom: 6px;
}
.gauge-popup__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 8px;
  font-size: 0.8rem;
  margin-bottom: 6px;
}
.gauge-popup__grid .k {
  font-size: 0.65rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}
.gauge-popup__meta {
  font-size: 0.7rem;
  color: #888;
  margin-top: 4px;
}
.gauge-popup__links {
  margin-top: 6px;
}
.gauge-popup__links a {
  color: #0099ff;
  font-size: 0.7rem;
  text-decoration: none;
}
.gauge-popup__links a:hover {
  text-decoration: underline;
}

/* ── US Drought Monitor (v12.8) ── */
.badge-drought {
  background: rgba(204,102,0,0.15);
  color: #ff9933;
  border: 1px solid rgba(204,102,0,0.3);
}

.usdm-popup-wrap .leaflet-popup-content-wrapper {
  background: rgba(10,10,15,0.95);
  border: 1px solid rgba(204,102,0,0.3);
  border-radius: 8px;
}
.usdm-popup-wrap .leaflet-popup-tip {
  background: rgba(10,10,15,0.95);
}
.usdm-popup {
  padding: 4px 2px;
  min-width: 180px;
}
.usdm-popup__title {
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  margin-bottom: 4px;
}
.usdm-popup__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  margin-bottom: 2px;
}
.usdm-popup__row .k {
  font-size: 0.7rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.usdm-popup__row .v {
  font-weight: 600;
}
.usdm-popup__date {
  color: #ffcc00;
}
.usdm-popup__meta {
  font-size: 0.65rem;
  color: #666;
  margin-top: 4px;
}

/* ── Avalanche Danger Ratings (v13.4) ── */
.badge-avy {
  background: rgba(150,30,30,0.15);
  color: #ef9a9a;
  border: 1px solid rgba(150,30,30,0.3);
}

.avy-hud {
  position: absolute;
  top: calc(var(--top-bar-h) + 96px);
  right: 16px;
  background: rgba(10,10,15,0.92);
  border: 1px solid rgba(150,30,30,0.25);
  border-radius: 8px;
  padding: 8px 14px;
  z-index: 1100;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.85rem;
}

.avy-popup-wrap .leaflet-popup-content-wrapper {
  background: rgba(10,10,15,0.95);
  border: 1px solid rgba(150,30,30,0.3);
  border-radius: 8px;
}
.avy-popup-wrap .leaflet-popup-tip {
  background: rgba(10,10,15,0.95);
}
.avy-popup {
  padding: 4px 2px;
  min-width: 200px;
}
.avy-popup__title {
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  margin-bottom: 6px;
}
.avy-popup__danger {
  display: inline-block;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.avy-popup__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  margin-bottom: 3px;
  gap: 8px;
}
.avy-popup__row .k {
  font-size: 0.7rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.avy-popup__row .v {
  font-weight: 600;
  text-align: right;
}
.avy-popup__link {
  margin-top: 6px;
}
.avy-popup__link a {
  color: #00e5ff;
  text-decoration: none;
  font-size: 0.8rem;
}
.avy-popup__link a:hover {
  text-decoration: underline;
}
.avy-popup__meta {
  font-size: 0.65rem;
  color: #666;
  margin-top: 4px;
}

/* ── Tsunami DART & Coastal Stations (v13.5) ── */
.badge-tsu {
  background: rgba(255,23,68,0.15);
  color: #ff5252;
  border: 1px solid rgba(255,23,68,0.3);
}

.tsu-hud {
  position: absolute;
  top: calc(var(--top-bar-h) + 112px);
  right: 16px;
  background: rgba(10,10,15,0.92);
  border: 1px solid rgba(255,23,68,0.25);
  border-radius: 8px;
  padding: 8px 14px;
  z-index: 1100;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.85rem;
}

.tsu-popup-wrap .leaflet-popup-content-wrapper {
  background: rgba(10,10,15,0.95);
  border: 1px solid rgba(255,23,68,0.3);
  border-radius: 8px;
}
.tsu-popup-wrap .leaflet-popup-tip {
  background: rgba(10,10,15,0.95);
}
.tsu-popup {
  padding: 4px 2px;
  min-width: 220px;
}
.tsu-popup__title {
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  margin-bottom: 6px;
}
.tsu-popup__type {
  display: inline-block;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.tsu-popup__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  margin-bottom: 3px;
  gap: 8px;
}
.tsu-popup__row .k {
  font-size: 0.7rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.tsu-popup__row .v {
  font-weight: 600;
  text-align: right;
}
.tsu-popup__link {
  margin-top: 4px;
}
.tsu-popup__link a {
  color: #00e5ff;
  text-decoration: none;
  font-size: 0.8rem;
}
.tsu-popup__link a:hover {
  text-decoration: underline;
}
.tsu-popup__meta {
  font-size: 0.65rem;
  color: #666;
  margin-top: 4px;
}

.fire-hud {
  position: absolute;
  top: calc(var(--top-bar-h) + 16px);
  left: 16px;
  background: rgba(10,10,15,0.92);
  border: 1px solid rgba(255,145,0,0.25);
  border-radius: 8px;
  padding: 10px 14px;
  z-index: 1100;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  display: flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fire-hud__title {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text-dim);
}
.fire-hud__count {
  font-size: 16px;
  font-weight: 800;
  color: #ff9100;
}
.fire-hud__acres {
  font-size: 13px;
  font-weight: 600;
  color: #ff6d00;
}
.fire-hud__age {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-dim);
}

.fire-leaflet-popup .leaflet-popup-content-wrapper {
  background: rgba(10,10,15,0.95);
  border: 1px solid rgba(255,145,0,0.25);
  border-radius: 8px;
  color: #e0e0e8;
  box-shadow: 0 6px 24px rgba(0,0,0,0.7);
}
.fire-leaflet-popup .leaflet-popup-tip { background: rgba(10,10,15,0.95); }
.fire-leaflet-popup .leaflet-popup-content { margin: 10px 12px; font-family: var(--font-sans); }

.fire-popup { min-width: 220px; }
.fire-popup__name {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 13px;
  color: #ff9100;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,145,0,0.2);
}
.fire-popup__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  font-size: 11px;
}
.fire-popup__grid .k {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-dim);
}
.fire-popup__grid .v {
  font-weight: 600;
  color: #e0e0e8;
}

.fire-label-icon {
  background: none !important;
  border: none !important;
}
.fire-label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  color: #ff9100;
  text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.9);
  text-align: center;
  line-height: 1.3;
  pointer-events: none;
}

@media (max-width: 768px) {
  .fire-hud {
    top: calc(var(--top-bar-h) + 8px);
    left: 8px;
    padding: 8px 10px;
  }
  .fire-hud__count { font-size: 14px; }
  .fire-hud__acres { font-size: 11px; }
}

/* ── IEM MesoWest Current Conditions (v12.1) ── */
.badge-mesowest {
  background: rgba(76,175,80,0.15);
  color: #66bb6a;
  border: 1px solid rgba(76,175,80,0.3);
}

.meso-hud {
  position: absolute;
  top: calc(var(--top-bar-h) + 16px);
  left: 16px;
  background: rgba(10,10,15,0.92);
  border: 1px solid rgba(76,175,80,0.25);
  border-radius: 8px;
  padding: 10px 14px;
  z-index: 1100;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  display: flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.meso-hud__title {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text-dim);
}
.meso-hud__count {
  font-size: 16px;
  font-weight: 800;
  color: #66bb6a;
}
.meso-hud__age {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-dim);
}

.mesowest-marker {
  background: none !important;
  border: none !important;
}

@media (max-width: 768px) {
  .meso-hud {
    top: calc(var(--top-bar-h) + 8px);
    left: 8px;
    padding: 8px 10px;
  }
  .meso-hud__count { font-size: 14px; }
}

/* Aviation popup styles */
.avn-popup-container .leaflet-popup-content-wrapper {
  background: #131320;
  border: 1px solid rgba(0,229,255,0.25);
  border-radius: 8px;
  color: #e0e0e8;
  box-shadow: 0 6px 24px rgba(0,0,0,0.7);
}
.avn-popup-container .leaflet-popup-tip { background: #131320; }
.avn-popup { font-family: var(--font-mono, monospace); font-size: 11px; min-width: 180px; }
.avn-popup__header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.avn-popup__fc { font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.5px; }
.avn-fc-vfr   { background: rgba(0,204,68,0.25); color: #00ff66; border: 1px solid rgba(0,204,68,0.5); }
.avn-fc-mvfr  { background: rgba(0,85,204,0.25); color: #66aaff; border: 1px solid rgba(0,85,204,0.5); }
.avn-fc-ifr   { background: rgba(204,0,34,0.25); color: #ff6677; border: 1px solid rgba(204,0,34,0.5); }
.avn-fc-lifr  { background: rgba(136,0,85,0.25); color: #ee44cc; border: 1px solid rgba(136,0,85,0.5); }
.avn-popup__station { font-size: 14px; font-weight: 700; color: #00e5ff; letter-spacing: 1px; }
.avn-popup__row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.avn-popup__lbl { color: var(--text-dim, #666); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.avn-popup__val { color: #e0e0e8; font-size: 11px; font-weight: 600; }
.avn-popup__raw { margin-top: 6px; padding: 4px 6px; background: rgba(0,0,0,0.3); border-radius: 4px; font-size: 9.5px; color: #aaa; word-break: break-all; max-height: 60px; overflow-y: auto; }
.avn-tooltip { background: #1a1a2e !important; color: #00e5ff !important; border: 1px solid rgba(0,229,255,0.3) !important; border-radius: 4px !important; font-family: var(--font-mono, monospace) !important; font-size: 11px !important; }
.owm-key-hint {
  color: var(--text-dim);
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 4px 12px 2px;
  letter-spacing: 0.5px;
}

/* === FORECAST PANEL (WeatherAPI + Tomorrow.io) === */
.forecast-panel {
  position: absolute;
  bottom: calc(var(--timeline-h) + 12px);
  right: 16px;
  width: 360px;
  max-height: 480px;
  overflow-y: auto;
  z-index: 820;
  background: var(--bg-panel);
  border: 1px solid var(--border-active);
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,229,255,0.08);
  font-family: var(--font-sans);
  color: var(--text-primary);
  scroll-behavior: smooth;
}
.forecast-panel::-webkit-scrollbar { width: 4px; }
.forecast-panel::-webkit-scrollbar-thumb { background: var(--border-active); border-radius: 2px; }

.fp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border-dim);
  background: var(--bg-elevated);
  border-radius: 10px 10px 0 0;
  position: sticky;
  top: 0;
  z-index: 1;
}
.fp-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--cyan);
  text-transform: uppercase;
}
.fp-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color var(--transition);
}
.fp-close:hover { color: var(--red); }

.fp-current {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border-dim);
}
.fp-current__icon {
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--bg-card);
}
.fp-current__main { flex: 1; min-width: 0; }
.fp-temp {
  font-size: 36px;
  font-weight: 700;
  color: var(--cyan);
  line-height: 1;
  font-family: var(--font-mono);
}
.fp-unit { font-size: 18px; opacity: 0.7; }
.fp-feels { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.fp-cond  { font-size: 13px; font-weight: 500; margin-top: 4px; color: var(--text-primary); }
.fp-current__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  min-width: 120px;
}
.fp-stat { display: flex; flex-direction: column; gap: 1px; }
.fp-stat__lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-transform: uppercase;
}
.fp-stat__val { font-size: 12px; font-weight: 500; color: var(--text-primary); }

/* Badges */
.fp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-dim);
}
.fp-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--cyan-dim);
  color: var(--cyan);
  border: 1px solid rgba(0,229,255,0.2);
}
.fp-badge--dim {
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  border-color: var(--border-dim);
}
.fp-badge--amber {
  background: var(--amber-dim);
  color: var(--amber);
  border-color: rgba(255,145,0,0.25);
}

/* Section title */
.fp-section-title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
  padding: 8px 14px 4px;
  border-bottom: 1px solid var(--border-dim);
}

/* 3-day forecast */
.fp-days {
  display: flex;
  gap: 0;
  padding: 8px 6px 10px;
}
.fp-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 8px;
  transition: background var(--transition);
}
.fp-day:hover { background: var(--bg-elevated); }
.fp-day__date {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  text-align: center;
}
.fp-day__icon { border-radius: 4px; }
.fp-day__cond { font-size: 10px; color: var(--text-secondary); text-align: center; line-height: 1.3; }
.fp-day__temps { display: flex; gap: 6px; align-items: center; }
.fp-hi { font-size: 14px; font-weight: 700; color: var(--amber); font-family: var(--font-mono); }
.fp-lo { font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); }
.fp-day__rain { font-size: 10px; color: #64b5f6; font-family: var(--font-mono); }

/* Loading/error state */
.fp-loading {
  padding: 20px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  font-family: var(--font-mono);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.fp-error { color: var(--red); }
.fp-retry-btn {
  background: rgba(0,229,255,0.12);
  color: #00e5ff;
  border: 1px solid rgba(0,229,255,0.25);
  border-radius: 4px;
  padding: 6px 16px;
  font-size: 12px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background 0.18s;
}
.fp-retry-btn:hover { background: rgba(0,229,255,0.22); }
.fp-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0,229,255,0.3);
  border-top-color: #00e5ff;
  border-radius: 50%;
  animation: fp-spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes fp-spin { to { transform: rotate(360deg); } }

/* === CSS VERSION UPDATE COMMENT === */
/* style.css — WeatherRadar.AI v9.7 */

/* ── Storm Tracks (v9.5) ── */
.badge-storm-tracks {
  background: rgba(244,67,54,0.18);
  color: #ef5350;
}

/* Storm Track HUD */
.storm-track-hud {
  position: fixed;
  top: 70px;
  right: 16px;
  z-index: 1050;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(10,10,15,0.92);
  border: 1px solid rgba(244,67,54,0.35);
  border-radius: 10px;
  backdrop-filter: blur(12px);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  pointer-events: none;
}
.sthud-title {
  color: #ff5252;
  font-weight: 600;
  letter-spacing: 0.4px;
}
.sthud-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.sthud-tor  { background: rgba(255,0,0,0.25); color: #ff1744; }
.sthud-svr  { background: rgba(255,235,59,0.2); color: #ffeb3b; }
.sthud-ff   { background: rgba(76,175,80,0.2); color: #66bb6a; }
.sthud-other { background: rgba(0,229,255,0.15); color: #00e5ff; }

/* Storm Track Popup */
.storm-track-popup-container .leaflet-popup-content-wrapper {
  background: rgba(10,10,15,0.95);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.storm-track-popup-container .leaflet-popup-tip {
  background: rgba(10,10,15,0.95);
}
.storm-track-popup {
  padding: 4px 2px;
}
.stp-type {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.stp-headline {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.stp-expiry {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}
.stp-motion {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--cyan);
  margin-top: 2px;
}

/* Storm Track time labels on map */
.storm-track-time-label span {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.7);
}
.storm-track-time-label em {
  font-style: normal;
  font-size: 8px;
  opacity: 0.65;
  margin-left: 4px;
  letter-spacing: 0.5px;
}

/* ── Skew-T / Soundings Panel (v9.7) ── */
.skewt-panel {
  position: fixed;
  top: var(--top-bar-h, 56px);
  right: 0;
  width: 620px;
  max-width: 95vw;
  height: calc(100vh - var(--top-bar-h, 56px) - var(--timeline-h, 100px));
  background: rgba(10,10,15,0.96);
  border-left: 1px solid rgba(0,229,255,0.12);
  backdrop-filter: blur(16px);
  z-index: 900;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.skewt-panel.open {
  transform: translateX(0);
}
.skewt-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.skewt-panel__title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--cyan);
  margin: 0;
}
.skewt-panel__close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: color 180ms, background 180ms;
}
.skewt-panel__close:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}
.skewt-panel__controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
}
.skewt-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.skewt-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-transform: uppercase;
}
.skewt-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 5px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 6px 10px;
  outline: none;
  transition: border-color 180ms;
  width: 100px;
}
.skewt-input:focus {
  border-color: var(--cyan);
}
.skewt-input[type="datetime-local"] {
  width: 200px;
}
.skewt-load-btn {
  background: rgba(0,229,255,0.12);
  border: 1px solid rgba(0,229,255,0.25);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 7px 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 180ms, border-color 180ms;
}
.skewt-load-btn:hover {
  background: rgba(0,229,255,0.20);
  border-color: var(--cyan);
}
.skewt-status {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  padding: 6px 16px;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}
.skewt-canvas-wrap {
  flex: 1;
  padding: 8px 12px 12px;
  overflow: hidden;
  min-height: 0;
}
.skewt-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 6px;
}

/* ─── GLOBE 3D SATELLITE TRACKER ──────────────────────────────────────────── */

/* ─── SPLIT VIEW / DUAL-PANE (v10.3) ──────────────────────────────────────── */
.map-container {
  position: absolute;
  top: var(--top-bar-h);
  left: 0;
  right: 0;
  bottom: var(--timeline-h);
  z-index: 1;
  display: flex;
}
.map-pane {
  flex: 1;
  position: relative;
  background: var(--bg-deep);
  min-width: 0;
}
.map-pane--right {
  border-left: 2px solid var(--border-active);
}

/* Pane labels — hidden in single view, shown in split */
.pane-label {
  display: none;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 810;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--cyan);
  background: rgba(10,10,15,0.88);
  border: 1px solid var(--border-active);
  border-radius: 4px;
  padding: 3px 12px;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.pane-label--right {
  /* positioned inside right pane via JS */
}
.map-container.split-active .pane-label {
  display: block;
}

/* Product selector bar */
.split-product-bar {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 810;
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(17,17,24,0.94);
  border: 1px solid var(--border-active);
  border-radius: 8px;
  padding: 6px 12px;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.split-product-bar__pane {
  display: flex;
  align-items: center;
  gap: 8px;
}
.split-product-bar__label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-dim);
}
.split-product-bar__divider {
  width: 1px;
  height: 24px;
  background: var(--border-active);
  margin: 0 12px;
}
.split-product-select {
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition);
  max-width: 200px;
}
.split-product-select:focus {
  border-color: var(--cyan);
}
.split-product-select option {
  background: var(--bg-panel);
  color: var(--text-primary);
}

#globe-canvas-wrapper {
  z-index: 2; /* above leaflet tiles */
}
#globe-canvas-wrapper canvas {
  display: block;
  width: 100%;
  height: 100%;
}
#globe-filter-panel::-webkit-scrollbar {
  width: 4px;
}
#globe-filter-panel::-webkit-scrollbar-track {
  background: transparent;
}
#globe-filter-panel::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.2);
  border-radius: 2px;
}
#globe-search-results::-webkit-scrollbar {
  width: 3px;
}
#globe-search-results::-webkit-scrollbar-thumb {
  background: rgba(0,229,255,0.2);
}

/* ─── ROUTE WEATHER PANEL (v10.5) ─────────────────────────────────────────── */
.route-weather-panel {
  position: fixed;
  bottom: calc(var(--timeline-h) + 32px);
  right: 12px;
  z-index: 900;
  width: 380px;
  max-height: 420px;
  background: rgba(10,10,15,0.94);
  border: 1px solid var(--border-active);
  border-radius: 8px;
  backdrop-filter: blur(14px);
  font-family: var(--font-mono);
  color: var(--text-primary);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.route-weather-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-active);
}
.route-weather-panel__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--cyan);
  margin: 0;
}
.route-weather-panel__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.route-weather-panel__btn {
  background: rgba(0,229,255,0.12);
  color: var(--cyan);
  border: 1px solid rgba(0,229,255,0.25);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.route-weather-panel__btn:hover {
  background: rgba(0,229,255,0.25);
}
.route-weather-panel__close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
}
.route-weather-panel__close:hover {
  color: var(--cyan);
}
.route-weather-panel__hint {
  padding: 10px 14px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.route-weather-panel__stats {
  padding: 4px 14px 8px;
  font-size: 11px;
  color: var(--amber);
  display: flex;
  gap: 16px;
  font-weight: 600;
}
.route-weather-panel__forecast {
  overflow-y: auto;
  flex: 1;
  padding: 0 8px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,229,255,0.2) transparent;
}
.route-weather-panel__forecast::-webkit-scrollbar { width: 4px; }
.route-weather-panel__forecast::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.2); border-radius: 2px; }

/* Individual waypoint forecast card */
.route-wx-card {
  background: rgba(0,229,255,0.04);
  border: 1px solid rgba(0,229,255,0.1);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 6px;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 4px 10px;
  font-size: 11px;
}
.route-wx-card__dist {
  font-weight: 700;
  color: var(--cyan);
  font-size: 12px;
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.route-wx-card__row {
  display: flex;
  gap: 12px;
  color: var(--text-primary);
}
.route-wx-card__label {
  color: var(--text-secondary);
  min-width: 42px;
}
.route-wx-card__val {
  font-weight: 600;
}
.route-wx-card__val--warm { color: #ff6b35; }
.route-wx-card__val--cool { color: #4fc3f7; }
.route-wx-card__val--rain { color: #66bb6a; }
.route-wx-card__val--wind { color: #ffd54f; }

/* ══════════════════════════════════════
   SPOTTER NETWORK — v10.7
   ══════════════════════════════════════ */

.spotter-hud {
  position: fixed;
  top: 156px;
  right: 16px;
  z-index: 1050;
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(10,10,15,0.92);
  border: 1px solid rgba(0,229,255,0.25);
  border-radius: 10px;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  pointer-events: none;
}

.spotter-hud__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.spotter-hud__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--spotter);
}

.spotter-hud__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--spotter);
  box-shadow: 0 0 12px rgba(0,229,255,0.35);
}

.spotter-hud__stat {
  font-weight: 700;
  color: var(--text-primary);
}

.spotter-hud__note {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.3px;
}

/* Spotter markers */
.spotter-tooltip {
  background: rgba(10,10,15,0.92) !important;
  border: 1px solid rgba(0,229,255,0.25) !important;
  color: #e8e8f0 !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
}
.spotter-tooltip:before { border-top-color: rgba(0,229,255,0.25) !important; }

.spotter-popup-container .leaflet-popup-content-wrapper {
  background: rgba(10,10,15,0.95);
  border: 1px solid rgba(0,229,255,0.25);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  color: var(--text-primary);
}
.spotter-popup-container .leaflet-popup-content {
  margin: 10px 12px;
  font-family: var(--font-sans);
}

.spotter-popup {
  min-width: 200px;
}
.spotter-popup__title {
  font-family: var(--font-mono);
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--spotter);
  font-size: 11px;
  margin-bottom: 6px;
}
.spotter-popup__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.spotter-popup__row:first-of-type { border-top: none; }
.spotter-popup__lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.8px;
  color: var(--text-dim);
}
.spotter-popup__val {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .spotter-hud { top: 58px; right: 8px; font-size: 10px; }
}
@media (max-width: 480px) {
  .spotter-hud { top: 52px; right: 4px; font-size: 9px; padding: 4px 8px; }
}


.badge-power {
  background: rgba(255,145,0,0.18);
  color: #ff9100;
}

/* Power Outage HUD */
.power-outage-hud {
  position: fixed;
  top: 108px;
  right: 16px;
  z-index: 1050;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(10,10,15,0.92);
  border: 1px solid rgba(255,145,0,0.35);
  border-radius: 10px;
  backdrop-filter: blur(12px);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  pointer-events: none;
}
.pwr-hud-icon {
  font-size: 14px;
}
.pwr-hud-stat {
  color: #ff9100;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Power outage county labels */
.power-outage-label {
  background: none !important;
  border: none !important;
}
.pwr-label {
  display: inline-block;
  padding: 1px 5px;
  background: rgba(10,10,15,0.85);
  border: 1px solid rgba(255,145,0,0.5);
  border-radius: 4px;
  color: #ff9100;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* ══════════════════════════════════════
   WPC SURFACE ANALYSIS — v11.0
   ══════════════════════════════════════ */

.badge-wpc {
  background: rgba(0,229,255,0.12);
  color: #00e5ff;
  border: 1px solid rgba(0,229,255,0.28);
}

/* WPC H/L marker icon */
.wpc-hl-icon {
  background: none !important;
  border: none !important;
}
.wpc-hl-label {
  display: block;
  text-align: center;
  line-height: 24px;
  font-family: var(--font-mono);
}

/* WPC Surface Analysis HUD */
.wpc-sfc-hud {
  position: fixed;
  top: 206px;
  right: 16px;
  z-index: 1050;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(10,10,15,0.92);
  border: 1px solid rgba(0,229,255,0.25);
  border-radius: 10px;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  pointer-events: none;
}
.wpc-hud-icon {
  font-size: 14px;
}
.wpc-hud-stat {
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .wpc-sfc-hud { top: 108px; right: 8px; font-size: 10px; }
}
@media (max-width: 480px) {
  .wpc-sfc-hud { top: 100px; right: 4px; font-size: 9px; padding: 4px 8px; }
}

/* ═══════════════════════════════════════
   EMBED WIDGET PANEL (v11.6)
   ═══════════════════════════════════════ */
.embed-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  width: 420px;
  max-width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-secondary, #111118);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(0, 229, 255, 0.08);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--text-primary, #e0e0e0);
}
.embed-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.embed-panel__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #00e5ff;
  margin: 0;
}
.embed-panel__close {
  background: none;
  border: none;
  color: var(--text-secondary, #888);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background 0.15s;
}
.embed-panel__close:hover { background: rgba(255,255,255,0.08); color: #fff; }
.embed-panel__hint {
  padding: 8px 16px;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 11px;
  color: var(--text-dim, #666);
  line-height: 1.5;
}
.embed-panel__controls {
  padding: 4px 16px 12px;
}
.embed-field {
  margin-bottom: 10px;
}
.embed-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-secondary, #888);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.embed-input {
  width: 100%;
  padding: 6px 10px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--text-primary, #e0e0e0);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.embed-input:focus { border-color: rgba(0, 229, 255, 0.4); }
.embed-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 11px;
  color: var(--text-primary, #e0e0e0);
  cursor: pointer;
  padding: 2px 0;
}
.embed-check input[type="checkbox"] {
  accent-color: #00e5ff;
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.embed-panel__preview {
  padding: 4px 16px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.embed-code {
  width: 100%;
  padding: 8px 10px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #00e5ff;
  resize: vertical;
  outline: none;
  line-height: 1.5;
  box-sizing: border-box;
}
.embed-btn-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.embed-copy-btn,
.embed-preview-btn {
  flex: 1;
  padding: 7px 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.embed-copy-btn {
  background: #00e5ff;
  color: #0a0a0f;
}
.embed-copy-btn:hover { background: #33ecff; }
.embed-copy-btn:active { transform: scale(0.97); }
.embed-preview-btn {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary, #e0e0e0);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.embed-preview-btn:hover { background: rgba(255, 255, 255, 0.14); }
.embed-panel__footer {
  padding: 8px 16px 12px;
  text-align: center;
}
.embed-footer-text {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 10px;
  color: var(--text-dim, #555);
}
.embed-footer-text a {
  color: #00e5ff;
  text-decoration: none;
}
.embed-footer-text a:hover { text-decoration: underline; }
.embed-open-btn {
  width: 100%;
  padding: 8px 12px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(0, 229, 255, 0.05));
  color: #00e5ff;
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.embed-open-btn:hover {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.25), rgba(0, 229, 255, 0.1));
  border-color: rgba(0, 229, 255, 0.5);
}
@media (max-width: 480px) {
  .embed-panel { width: 95vw; }
}

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR UX v13.8.3 — Search, Collapsible Sections, Active Badges
   ═══════════════════════════════════════════════════════════════════ */

/* ── Layer Search Bar ── */
.layer-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: 0 10px;
  gap: 8px;
  transition: border-color 0.18s;
}
.layer-search-wrap:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(0,229,255,0.12);
}
.layer-search-icon {
  color: var(--text-dim);
  flex-shrink: 0;
  pointer-events: none;
}
.layer-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.5px;
  padding: 9px 0;
  min-width: 0;
}
.layer-search-input::placeholder {
  color: var(--text-dim);
  opacity: 0.7;
}
.layer-search-clear {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0;
}
.layer-search-clear.visible {
  opacity: 0.7;
  pointer-events: auto;
}
.layer-search-clear:hover {
  color: var(--cyan);
  opacity: 1 !important;
}

/* ── Section Title — collapsible header ── */
.section-title {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 4px;
}
.section-title:hover {
  color: var(--text-secondary);
}
.section-chevron {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--text-dim);
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
}
/* Collapsed: chevron points right */
.layer-panel__section.collapsed .section-chevron {
  transform: rotate(-90deg);
}

/* ── Section Body — the collapsible content ── */
.section-body {
  overflow: hidden;
  max-height: 9999px;
  transition: max-height 0.28s cubic-bezier(0.4,0,0.2,1);
}
.layer-panel__section.collapsed .section-body {
  max-height: 0;
}

/* ── Active Layer Count Badge ── */
.section-active-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 14px;
  padding: 0 4px;
  background: rgba(0,229,255,0.15);
  border: 1px solid rgba(0,229,255,0.35);
  border-radius: 7px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 0.5px;
  line-height: 1;
  flex-shrink: 0;
  /* Hidden by default, shown when count > 0 */
  opacity: 0;
  transition: opacity 0.2s;
}
.section-active-badge.has-active {
  opacity: 1;
}

/* ── Search: hide sections with no matches ── */
.layer-panel__section.search-hidden {
  display: none;
}
/* Highlight matching layer name text */
.layer-search-match mark {
  background: rgba(0,229,255,0.2);
  color: var(--cyan);
  border-radius: 2px;
  padding: 0 1px;
}
/* Expanded for search: force-expand even if section was collapsed */
.layer-panel__section.search-expanded .section-body {
  max-height: 9999px !important;
}

/* No-results message */
.layer-search-noresults {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  padding: 20px 12px;
  letter-spacing: 1px;
  display: none;
}
.layer-search-noresults.visible {
  display: block;
}

/* Hide section-refresh timestamps when section is collapsed */
.layer-panel__section.collapsed .section-refresh {
  opacity: 0;
}


/* ═══════════════════════════════════════════════════
   UNIFIED HUD STACK SYSTEM (v13.8.5)
   All HUDs flow into #leftHudStack or #rightHudStack.
   No more manual top/right pixel offsets that overlap.
   Reference: Windy.com clean HUD layout
   ═══════════════════════════════════════════════════ */

/* Stack containers */
.hud-stack {
  position: fixed;
  top: calc(var(--top-bar-h) + 10px);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
  /* min-width prevents HUDs from collapsing when empty */
  min-width: 0;
}
.hud-stack--right {
  right: 12px;
  align-items: flex-end;
}
.hud-stack--left {
  left: 12px;
  align-items: flex-start;
}

/* ── Override individual HUD positions ──
   Each HUD inside a stack flows naturally as a flex child.
   Remove position:fixed/absolute, top, right, left, z-index.
   Keep their visual styling (background, border, border-radius, etc.) intact.
*/

/* Right stack HUDs */
#rightHudStack .storm-track-hud,
#rightHudStack .spotter-hud,
#rightHudStack .power-outage-hud,
#rightHudStack .wpc-sfc-hud,
#rightHudStack .quake-hud,
#rightHudStack .kp-hud,
#rightHudStack .aqi-hud,
#rightHudStack .avy-hud,
#rightHudStack .tsu-hud {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  /* Make each HUD compact single-line */
  padding: 5px 10px !important;
  font-size: 10px !important;
  border-radius: 6px !important;
  width: max-content;
  max-width: 260px;
}

/* Left stack HUDs */
#leftHudStack .fire-hud,
#leftHudStack .meso-hud {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  padding: 5px 10px !important;
  font-size: 10px !important;
  border-radius: 6px !important;
  width: max-content;
  max-width: 260px;
}

/* Compact type sizes within stacked HUDs */
#rightHudStack .quake-hud__count {
  font-size: 14px !important;
}
#rightHudStack .quake-hud__title,
#rightHudStack .quake-hud__age {
  font-size: 9px !important;
}
#leftHudStack .fire-hud__count,
#leftHudStack .meso-hud__count {
  font-size: 14px !important;
}
#leftHudStack .fire-hud__title,
#leftHudStack .fire-hud__age,
#leftHudStack .meso-hud__title,
#leftHudStack .meso-hud__age {
  font-size: 9px !important;
}
#rightHudStack .kp-hud {
  font-size: 0.82rem !important;
}
#rightHudStack .aqi-hud {
  font-size: 0.78rem !important;
}
#rightHudStack .spotter-hud {
  flex-direction: row !important;
  gap: 8px !important;
}

/* ── Hide HUD stacks entirely when empty (all children hidden) ──
   JS toggles display:none|flex on individual HUDs,
   the stack collapses naturally when all are hidden.
   We also let the stack collapse when empty via CSS. */
.hud-stack:empty,
.hud-stack > *:not([style*="display: none"]:only-child) {
  /* intentionally empty — handled by JS show/hide */
}

/* ── Mobile: smaller HUDs, tighter gaps ── */
@media (max-width: 768px) {
  .hud-stack {
    top: calc(var(--top-bar-h) + 8px);
    gap: 3px;
  }
  .hud-stack--right { right: 6px; }
  .hud-stack--left  { left: 6px; }

  #rightHudStack .storm-track-hud,
  #rightHudStack .spotter-hud,
  #rightHudStack .power-outage-hud,
  #rightHudStack .wpc-sfc-hud,
  #rightHudStack .quake-hud,
  #rightHudStack .kp-hud,
  #rightHudStack .aqi-hud,
  #rightHudStack .avy-hud,
  #rightHudStack .tsu-hud,
  #leftHudStack .fire-hud,
  #leftHudStack .meso-hud {
    padding: 4px 8px !important;
    font-size: 9px !important;
    max-width: 200px;
  }
  #rightHudStack .quake-hud__count,
  #leftHudStack .fire-hud__count,
  #leftHudStack .meso-hud__count {
    font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  .hud-stack--right { right: 4px; }
  .hud-stack--left  { left: 4px; }
  #rightHudStack .storm-track-hud,
  #rightHudStack .spotter-hud,
  #rightHudStack .power-outage-hud,
  #rightHudStack .wpc-sfc-hud,
  #rightHudStack .quake-hud,
  #rightHudStack .kp-hud,
  #rightHudStack .aqi-hud,
  #rightHudStack .avy-hud,
  #rightHudStack .tsu-hud,
  #leftHudStack .fire-hud,
  #leftHudStack .meso-hud {
    padding: 3px 6px !important;
    font-size: 8px !important;
    max-width: 170px;
  }
}

/* ── Panel-aware HUD stack: shift right stack when layer panel is open ── */
.layer-panel.open ~ #rightHudStack,
body.panel-open #rightHudStack {
  right: 376px; /* 360px panel + 16px gap */
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hud-stack {
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 768px) {
  /* On mobile, panel is full-width overlay — HUDs should not shift */
  .layer-panel.open ~ #rightHudStack,
  body.panel-open #rightHudStack {
    right: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SETTINGS PANEL (v13.8.15)
   ═══════════════════════════════════════════════════════════════════ */
.settings-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: 10500;
  width: 380px;
  max-width: 94vw;
  max-height: 85vh;
  overflow-y: auto;
  background: #111118;
  border: 1px solid rgba(0,229,255,0.18);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7), 0 0 60px rgba(0,229,255,0.06);
  font-family: 'DM Sans', sans-serif;
  color: #e0e0e6;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.4,0,0.2,1), transform 0.22s cubic-bezier(0.4,0,0.2,1);
}
.settings-panel.open {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}
.settings-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.settings-panel__title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #00e5ff;
  margin: 0;
}
.settings-panel__close {
  background: none;
  border: none;
  color: #8888a0;
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.18s;
}
.settings-panel__close:hover { color: #00e5ff; }
.settings-panel__body {
  padding: 14px 18px 8px;
}
.settings-group {
  margin-bottom: 16px;
}
.settings-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8888a0;
  margin-bottom: 8px;
}
.settings-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.settings-opt {
  flex: 1;
  min-width: 56px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: #8888a0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  text-align: center;
}
.settings-opt:hover {
  background: rgba(0,229,255,0.06);
  border-color: rgba(0,229,255,0.2);
  color: #c0c0d0;
}
.settings-opt.active {
  background: rgba(0,229,255,0.12);
  border-color: #00e5ff;
  color: #00e5ff;
  box-shadow: 0 0 8px rgba(0,229,255,0.15);
}
.settings-select {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: #e0e0e6;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  cursor: pointer;
  appearance: auto;
}
.settings-select:focus {
  border-color: rgba(0,229,255,0.4);
  outline: none;
}
.settings-panel__footer {
  padding: 10px 18px 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.settings-footer-text {
  font-size: 10px;
  color: #6a6a80;
  font-family: 'JetBrains Mono', monospace;
}
@media (max-width: 480px) {
  .settings-panel { width: 95vw; }
  .settings-opt { min-width: 44px; padding: 6px 6px; font-size: 11px; }
  #settingsBtn { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   ONBOARDING OVERLAY (v13.8.15)
   ═══════════════════════════════════════════════════════════════════ */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: obFadeIn 0.35s ease;
}
@keyframes obFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.onboarding-card {
  width: 400px;
  max-width: 92vw;
  background: #111118;
  border: 1px solid rgba(0,229,255,0.18);
  border-radius: 14px;
  box-shadow: 0 12px 60px rgba(0,0,0,0.7), 0 0 80px rgba(0,229,255,0.08);
  overflow: hidden;
  animation: obSlideUp 0.4s cubic-bezier(0.16,1,0.3,1);
}
@keyframes obSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.onboarding-step {
  padding: 28px 28px 22px;
  text-align: center;
}
.onboarding-icon {
  margin-bottom: 14px;
}
.onboarding-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  color: #00e5ff;
  margin: 0 0 10px;
  letter-spacing: 0.5px;
}
.onboarding-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #a0a0b8;
  line-height: 1.55;
  margin: 0 0 20px;
}
.onboarding-text kbd {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #00e5ff;
}
.onboarding-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 16px;
}
.onboarding-btn {
  padding: 9px 22px;
  border-radius: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.18s;
}
.onboarding-btn--next {
  background: rgba(0,229,255,0.15);
  border: 1px solid #00e5ff;
  color: #00e5ff;
}
.onboarding-btn--next:hover {
  background: rgba(0,229,255,0.25);
  box-shadow: 0 0 12px rgba(0,229,255,0.2);
}
.onboarding-btn--skip {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: #6a6a80;
}
.onboarding-btn--skip:hover {
  border-color: rgba(255,255,255,0.15);
  color: #a0a0b8;
}
.onboarding-progress {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.onboarding-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  transition: all 0.25s;
}
.onboarding-dot.active {
  background: #00e5ff;
  box-shadow: 0 0 6px rgba(0,229,255,0.4);
}
@media (max-width: 480px) {
  .onboarding-card { max-width: 96vw; }
  .onboarding-step { padding: 22px 18px 18px; }
  .onboarding-title { font-size: 14px; }
  .onboarding-text { font-size: 12px; }
  .onboarding-btn { padding: 8px 16px; font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   ONBOARDING FORM FIELDS (v14.0.0)
   ═══════════════════════════════════════════════════════════════════ */
.onboarding-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
  text-align: left;
}
.onboarding-email {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(0,229,255,0.2);
  border-radius: 7px;
  color: #e0e0f0;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  box-sizing: border-box;
}
.onboarding-email:focus {
  border-color: #00e5ff;
  box-shadow: 0 0 0 2px rgba(0,229,255,0.15);
}
.onboarding-email::placeholder {
  color: #555570;
}
.onboarding-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  color: #a0a0b8;
  line-height: 1.45;
  padding: 2px 0;
}
.onboarding-checkbox-label input[type="checkbox"] {
  display: none;
}
.onboarding-checkmark {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(0,229,255,0.3);
  border-radius: 3px;
  background: rgba(255,255,255,0.03);
  position: relative;
  transition: all 0.18s;
  margin-top: 1px;
}
.onboarding-checkbox-label input[type="checkbox"]:checked + .onboarding-checkmark {
  background: rgba(0,229,255,0.15);
  border-color: #00e5ff;
}
.onboarding-checkbox-label input[type="checkbox"]:checked + .onboarding-checkmark::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #00e5ff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.onboarding-tos-link {
  color: #00e5ff;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,229,255,0.3);
  transition: border-color 0.18s;
}
.onboarding-tos-link:hover {
  border-color: #00e5ff;
}
.onboarding-form-error {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: #ff5252;
  min-height: 0;
  overflow: hidden;
  transition: all 0.2s;
}
.onboarding-form-error:empty {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   TOS / PRIVACY POLICY MODAL (v14.0.0)
   ═══════════════════════════════════════════════════════════════════ */
.tos-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: obFadeIn 0.25s ease;
}
.tos-modal {
  width: 560px;
  max-width: 94vw;
  max-height: 80vh;
  background: #111118;
  border: 1px solid rgba(0,229,255,0.18);
  border-radius: 14px;
  box-shadow: 0 16px 80px rgba(0,0,0,0.8), 0 0 60px rgba(0,229,255,0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: obSlideUp 0.3s cubic-bezier(0.16,1,0.3,1);
}
.tos-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tos-modal__title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: #00e5ff;
  margin: 0;
  letter-spacing: 0.5px;
}
.tos-modal__close {
  background: none;
  border: none;
  color: #6a6a80;
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.18s;
}
.tos-modal__close:hover {
  color: #e0e0f0;
}
.tos-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: #a0a0b8;
  line-height: 1.65;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,229,255,0.2) transparent;
}
.tos-modal__body::-webkit-scrollbar { width: 6px; }
.tos-modal__body::-webkit-scrollbar-track { background: transparent; }
.tos-modal__body::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.2); border-radius: 3px; }
.tos-modal__body h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #e0e0f0;
  margin: 18px 0 8px;
  letter-spacing: 0.3px;
}
.tos-modal__body h3:first-child { margin-top: 0; }
.tos-modal__body p { margin: 0 0 10px; }
.tos-modal__body ul { margin: 0 0 10px; padding-left: 18px; }
.tos-modal__body li { margin-bottom: 4px; }
.tos-modal__body strong { color: #c0c0d4; }
.tos-modal__footer {
  padding: 14px 22px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
@media (max-width: 480px) {
  .tos-modal { max-height: 85vh; }
  .tos-modal__body { padding: 14px 16px; font-size: 11px; }
}

/* ============================================================
   LAYER LEGEND PANEL (v14.4 — Phase L1)
   ============================================================ */
.layer-legend-panel {
  position: fixed;
  bottom: 120px;
  right: 12px;
  z-index: 1040;
  max-width: 220px;
  background: rgba(17, 17, 24, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 229, 255, 0.15);
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  color: #c0c0d4;
  display: none;
  overflow: hidden;
  transition: opacity 0.22s ease;
}
.layer-legend-panel.visible { display: block; }
.layer-legend-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.layer-legend-panel__header:hover { background: rgba(0, 229, 255, 0.04); }
.layer-legend-panel__title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #00e5ff;
  text-transform: uppercase;
}
.layer-legend-panel__chevron {
  color: #6a6a80;
  transition: transform 0.2s ease;
}
.layer-legend-panel__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.layer-legend-panel__clear {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: #ff9100;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.layer-legend-panel__clear:hover {
  opacity: 1;
}
.layer-legend-panel.collapsed .layer-legend-panel__chevron { transform: rotate(-90deg); }
.layer-legend-panel.collapsed .layer-legend-panel__body { display: none; }
.layer-legend-panel__body {
  padding: 6px 0;
  max-height: 360px;
  overflow-y: auto;
}
.layer-legend-panel__body::-webkit-scrollbar { width: 4px; }
.layer-legend-panel__body::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.12); border-radius: 2px; }

/* Individual legend item */
.legend-entry {
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: opacity 0.3s ease;
}
.legend-entry:last-child { border-bottom: none; }
.legend-entry__label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #8888a0;
  margin-bottom: 4px;
  text-transform: uppercase;
}
/* WMS GetLegendGraphic image */
.legend-entry__img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 140px;
  image-rendering: auto;
  border-radius: 3px;
  background: rgba(0,0,0,0.2);
}
/* Gradient bar legends */
.legend-entry__gradient {
  height: 12px;
  border-radius: 3px;
  margin-bottom: 2px;
}
.legend-entry__stops {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #6a6a80;
}
/* Categorical legends */
.legend-entry__categories {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.legend-entry__cat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 8.5px;
  line-height: 1.3;
}
.legend-entry__swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1);
}

/* Text-label legends (satellite/descriptive) */
.legend-entry__text-desc {
  font-size: 8.5px;
  line-height: 1.45;
  color: #9898b0;
  font-style: italic;
  padding: 2px 0;
}

/* L4: Per-entry collapse/expand */
.legend-entry__label {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.legend-entry__mini-chevron {
  color: #6a6a80;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.legend-entry.entry-collapsed .legend-entry__mini-chevron {
  transform: rotate(-90deg);
}
.legend-entry.entry-collapsed .legend-entry__img,
.legend-entry.entry-collapsed .legend-entry__gradient,
.legend-entry.entry-collapsed .legend-entry__stops,
.legend-entry.entry-collapsed .legend-entry__categories {
  display: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .layer-legend-panel {
    bottom: 100px;
    right: 8px;
    max-width: 180px;
  }
}
@media (max-width: 480px) {
  .layer-legend-panel {
    bottom: 94px;
    right: 4px;
    left: auto;
    max-width: min(160px, calc(100vw - 60px));
    font-size: 8px;
    max-height: calc(100vh - 200px);
  }
  .layer-legend-panel__body { max-height: 200px; }
  .layer-legend-panel__header { padding: 5px 8px; }
  .legend-entry__img { max-height: 100px; }
}

/* ═══════════════════════════════════════
   TRAFFIC CAMERAS — v14.12
   ═══════════════════════════════════════ */

/* Camera marker icon */
.camera-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(17, 17, 24, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.camera-marker:hover {
  transform: scale(1.2);
  border-color: #00e5ff;
}
.camera-marker--stream {
  border-color: #ff4081;
  color: #ff4081;
}
.camera-marker--stream:hover {
  border-color: #ff80ab;
}
.camera-marker svg {
  display: block;
}

/* Camera tooltip */
.camera-tooltip {
  background: rgba(10, 10, 15, 0.92) !important;
  border: 1px solid rgba(0, 229, 255, 0.25) !important;
  color: #e0e0e0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  padding: 3px 7px !important;
  border-radius: 3px !important;
}
.camera-tooltip::before {
  border-top-color: rgba(10, 10, 15, 0.92) !important;
}

/* Camera badge in sidebar */
.badge-cameras {
  background: rgba(255, 64, 129, 0.18);
  color: #ff4081;
  border: 1px solid rgba(255, 64, 129, 0.35);
}

/* Camera popup styling */
.camera-popup-wrap .leaflet-popup-content-wrapper {
  max-width: 370px;
  min-width: 280px;
}
.camera-popup {
  font-family: 'DM Sans', 'JetBrains Mono', sans-serif;
}
.camera-popup__title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: #00e5ff;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
  word-break: break-word;
}
.camera-popup__meta {
  font-size: 9px;
  color: #9e9e9e;
  margin-bottom: 8px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.camera-popup__media {
  margin-bottom: 6px;
  border-radius: 4px;
  overflow: hidden;
  background: #0a0a0f;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.camera-popup__img {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  display: block;
  border-radius: 4px;
}
.camera-popup__video {
  width: 100%;
  max-height: 240px;
  display: block;
  border-radius: 4px;
  background: #000;
}
.camera-popup__noimg {
  font-size: 10px;
  color: #757575;
  text-align: center;
  padding: 30px 10px;
  font-family: 'JetBrains Mono', monospace;
}
.camera-popup__link {
  margin-top: 4px;
}
.camera-popup__link a {
  font-size: 10px;
  color: #00e5ff;
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.03em;
}
.camera-popup__link a:hover {
  text-decoration: underline;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .camera-popup-wrap .leaflet-popup-content-wrapper {
    max-width: calc(100vw - 40px);
    min-width: 240px;
  }
  .camera-popup__img,
  .camera-popup__video {
    max-height: 180px;
  }
  .camera-marker {
    width: 20px;
    height: 20px;
  }
  .camera-marker svg {
    width: 14px;
    height: 14px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   POLYMARKET LAYER — Ticker, Markers, Detail Panel
   ══════════════════════════════════════════════════════════════════ */

/* ── Ticker Bar ─────────────────────────────────────────────────── */
.poly-ticker {
  position: fixed;
  bottom: var(--timeline-h);
  left: 0;
  right: 0;
  z-index: 900;
  height: 34px;
  display: flex;
  align-items: center;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-active);
  overflow: hidden;
}

.poly-ticker__label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 0.08em;
  border-right: 1px solid var(--border-active);
  white-space: nowrap;
  background: var(--bg-panel);
}

.poly-ticker__track {
  flex: 1;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
}

.poly-ticker__scroll {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: poly-ticker-scroll 180s linear infinite;
}

.poly-ticker:hover .poly-ticker__scroll {
  animation-play-state: paused;
}

@keyframes poly-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.poly-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  cursor: pointer;
  height: 34px;
  transition: background 0.15s;
}

.poly-ticker__item:hover {
  background: var(--cyan-dim);
}

.poly-ticker__title {
  color: var(--text-primary);
  font-size: 11px;
  font-family: var(--font-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.poly-ticker__odds {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.poly-ticker__vol {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
}

.poly-ticker__sep {
  color: var(--text-dim);
  font-size: 10px;
  opacity: 0.4;
}

.poly-ticker__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 100%;
  background: none;
  border: none;
  border-left: 1px solid var(--border-dim);
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  padding: 0;
}

.poly-ticker__close:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}

/* ── Source Badges (Polymarket P / Kalshi K) ─────────────────────── */
.poly-ticker__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
  margin-right: 5px;
  letter-spacing: 0;
}
.poly-ticker__badge--poly  { background: #ff6b35; color: #fff; }
.poly-ticker__badge--kalshi { background: #00bcd4; color: #000; }

/* ── Map Markers ─────────────────────────────────────────────────── */
.poly-marker-wrap {
  background: none !important;
  border: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   PREMIUM PREDICTION MARKET CARD-PIN MARKERS (kpin)
   ══════════════════════════════════════════════════════════════════ */
.kpin-wrap {
  background: none !important;
  border: none !important;
  overflow: visible !important;
}

.kpin {
  --kpin-accent: #00bcd4;
  --kpin-glow: rgba(0,188,212,0.55);
  position: relative;
  width: 90px;
  background: rgba(6,8,14,0.92);
  border: 1.5px solid var(--kpin-accent);
  border-radius: 10px;
  padding: 6px 8px 5px;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 0 10px var(--kpin-glow),
    0 0 22px var(--kpin-glow),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(4px);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  font-family: var(--font-mono, monospace);
  user-select: none;
}

.kpin:hover {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 0 16px var(--kpin-glow),
    0 0 36px var(--kpin-glow),
    0 0 60px var(--kpin-glow),
    inset 0 1px 0 rgba(255,255,255,0.1);
  transform: translateY(-2px) scale(1.04);
}

/* Top line: source badge + city + time remaining */
.kpin__head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
}

.kpin__src {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  font-size: 8px;
  font-weight: 900;
  background: var(--kpin-accent);
  color: #000;
  flex-shrink: 0;
  letter-spacing: 0;
}

.kpin__src--poly {
  background: #ff6b35;
  color: #fff;
}

.kpin__city {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kpin__time {
  font-size: 8px;
  color: var(--kpin-accent);
  font-weight: 600;
  opacity: 0.9;
  flex-shrink: 0;
}

/* Main odds display */
.kpin__body {
  display: flex;
  align-items: baseline;
  justify-content: center;
  line-height: 1;
  padding: 1px 0 2px;
}

.kpin__pct {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  text-shadow: 0 0 12px var(--kpin-glow);
}

.kpin__pct small {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  margin-left: 1px;
}

/* Bracket or volume subtitle */
.kpin__sub {
  font-size: 8.5px;
  color: var(--kpin-accent);
  text-align: center;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
  margin-top: 1px;
}

/* The pin point at the bottom */
.kpin__pin {
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid var(--kpin-accent);
  filter: drop-shadow(0 2px 4px var(--kpin-glow));
}

/* Pin base dot */
.kpin__pin::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--kpin-accent);
  box-shadow: 0 0 6px var(--kpin-glow);
}

/* Urgent — closes within 6h → pulsing ring */
.kpin--urgent::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 13px;
  border: 1.5px solid var(--kpin-accent);
  animation: kpin-pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes kpin-pulse {
  0%   { opacity: 0.8; transform: scale(1); }
  50%  { opacity: 0.2; transform: scale(1.08); }
  100% { opacity: 0.8; transform: scale(1); }
}

/* Polymarket card variant — slightly different tint */
.kpin--poly {
  background: rgba(8,6,14,0.92);
}

/* Keep old poly/kalshi diamond styles for fallback */

.poly-marker {
  width: 28px;
  height: 28px;
  background: rgba(10,10,15,0.88);
  border: 2px solid currentColor;
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(0,229,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.poly-marker:hover {
  transform: rotate(45deg) scale(1.15);
  box-shadow: 0 0 14px rgba(0,229,255,0.5);
}

.poly-marker__count {
  transform: rotate(-45deg);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  user-select: none;
}

/* Kalshi marker — pill style, teal accent */
.poly-marker--kalshi {
  width: 52px;
  height: 26px;
  transform: none;
  border-radius: 6px;
  border-color: #00bcd4 !important;
  box-shadow: 0 0 10px rgba(0,188,212,0.35);
  flex-direction: column;
  gap: 0;
}
.poly-marker--kalshi:hover {
  transform: scale(1.1);
  box-shadow: 0 0 18px rgba(0,188,212,0.55);
}
.poly-marker__badge {
  transform: none;
  font-size: 8px;
  font-weight: 800;
  color: #00bcd4;
  letter-spacing: 0.5px;
  line-height: 1;
  user-select: none;
}
.poly-marker__pct {
  transform: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  user-select: none;
}

/* Kalshi tooltip accent */
.kalshi-tooltip.leaflet-tooltip {
  border-color: #00bcd4 !important;
}
.kalshi-tooltip.leaflet-tooltip::before {
  border-top-color: #00bcd4 !important;
}

.poly-tooltip.leaflet-tooltip {
  background: var(--bg-panel);
  border: 1px solid var(--border-active);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 6px 10px;
  box-shadow: var(--cyan-glow);
}

.poly-tooltip.leaflet-tooltip::before {
  border-top-color: var(--border-active);
}

/* ── Detail Panel ────────────────────────────────────────────────── */
.poly-detail {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
}

.poly-detail--open {
  pointer-events: auto;
}

.poly-detail__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 0.25s;
}

.poly-detail--open .poly-detail__backdrop {
  opacity: 1;
}

/* Mobile: bottom sheet */
.poly-detail__sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 85vh;
  background: var(--bg-panel);
  border-top: 2px solid var(--border-active);
  border-radius: 12px 12px 0 0;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
  display: flex;
  flex-direction: column;
}

.poly-detail__sheet::before {
  content: '';
  display: block;
  width: 32px;
  height: 4px;
  background: var(--text-dim);
  opacity: 0.4;
  border-radius: 2px;
  margin: 10px auto 4px;
  flex-shrink: 0;
}

.poly-detail--open .poly-detail__sheet {
  transform: translateY(0);
}

/* Desktop: right-side drawer */
@media (min-width: 769px) {
  .poly-detail__sheet {
    position: absolute;
    top: var(--top-bar-h);
    right: 0;
    bottom: 0;
    left: auto;
    width: 380px;
    max-height: 100%;
    border-top: none;
    border-left: 2px solid var(--border-active);
    border-radius: 0;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
  }

  .poly-detail__sheet::before {
    display: none;
  }

  .poly-detail--open .poly-detail__sheet {
    transform: translateX(0);
  }
}

/* Sheet contents */
.poly-detail__header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border-dim);
  position: sticky;
  top: 0;
  background: var(--bg-panel);
  z-index: 1;
  flex-shrink: 0;
}

.poly-detail__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text-primary);
  flex: 1;
  padding-right: 8px;
}

.poly-detail__close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.poly-detail__close:hover {
  background: var(--border-active);
  color: var(--text-primary);
}

.poly-detail__body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.poly-detail__meta {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-dim);
}

.poly-detail__vol,
.poly-detail__mcount {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}

.poly-detail__market {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.poly-detail__question {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 10px;
  line-height: 1.4;
}

.poly-detail__outcomes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.poly-detail__outcome {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.poly-detail__outcome-name {
  min-width: 40px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.poly-detail__bar-wrap {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}

.poly-detail__bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.poly-detail__outcome-pct {
  width: 42px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.poly-detail__market-foot {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-dim);
}

.poly-detail__market-vol {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}

/* Source badge inside detail panel */
.poly-detail__badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-right: 6px;
}
.poly-detail__badge--kalshi {
  background: #00bcd4;
  color: #000;
}

.poly-detail__trade-btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  text-align: center;
  background: linear-gradient(135deg, var(--cyan) 0%, #00b8d4 100%);
  color: #000;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: filter 0.15s;
  box-sizing: border-box;
}

.poly-detail__trade-btn--kalshi {
  background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
  color: #000;
}

.poly-detail__trade-btn:hover {
  filter: brightness(1.1);
}

/* Group view items */
.poly-detail__group-item {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.poly-detail__group-item:hover {
  background: var(--bg-elevated);
}

.poly-detail__group-title {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.3;
}

.poly-detail__group-stats {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.poly-detail__group-odds {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
}

.poly-detail__group-vol,
.poly-detail__group-mkts {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

/* ── Mobile overrides ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .poly-ticker {
    bottom: 0;
    height: 30px;
  }

  .poly-ticker__item {
    height: 30px;
  }

  .poly-ticker__label {
    font-size: 9px;
    padding: 0 8px;
  }

  .poly-ticker__title {
    font-size: 10px;
    max-width: 120px;
  }

  .poly-ticker__odds,
  .poly-ticker__vol {
    font-size: 9px;
  }
}

/* ── Globe (GlobeView) UI components ──────────────────────────────────────── */

/* Canvas block + mobile touch */
#globe-canvas-wrapper canvas {
  display: block;
  touch-action: none; /* critical for mobile OrbitControls */
}

/* Filter panel scrollbar */
#globe-filter-panel::-webkit-scrollbar { width: 4px; }
#globe-filter-panel::-webkit-scrollbar-track { background: transparent; }
#globe-filter-panel::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.2); border-radius: 2px; }
#globe-filter-panel::-webkit-scrollbar-thumb:hover { background: rgba(0,229,255,0.35); }

/* Info panel + filter panel mobile responsive */
@media (max-width: 600px) {
  #globe-info-panel {
    top: auto !important;
    bottom: 60px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
  }
  #globe-filter-panel {
    max-height: calc(100dvh - 120px) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   POLYMARKET INLINE TRADE WIDGET
   ════════════════════════════════════════════════════════════════ */
.poly-trade-widget-wrap {
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
}
.ptrade {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #e0e0e0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ptrade-hint {
  margin: 0;
  font-size: 11px;
  color: #8a8a9a;
  line-height: 1.4;
}
.ptrade-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ptrade-addr {
  font-size: 11px;
  color: #00e5ff;
  background: rgba(0,229,255,0.08);
  border: 1px solid rgba(0,229,255,0.2);
  padding: 2px 6px;
  border-radius: 3px;
}
.ptrade-bal {
  font-size: 11px;
  color: #69f0ae;
  margin-left: auto;
}
/* Buttons */
.ptrade-btn {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}
.ptrade-connect-btn  { background: #ff9100; color: #000; }
.ptrade-connect-btn:hover { background: #ffab40; }
.ptrade-auth-btn     { background: rgba(0,229,255,0.15); color: #00e5ff; border: 1px solid rgba(0,229,255,0.4); }
.ptrade-auth-btn:hover { background: rgba(0,229,255,0.25); }
.ptrade-approve-btn  { background: rgba(255,145,0,0.15); color: #ff9100; border: 1px solid rgba(255,145,0,0.4); }
.ptrade-approve-btn:hover { background: rgba(255,145,0,0.25); }
.ptrade-submit       { background: linear-gradient(135deg,#00e5ff,#00b8cc); color: #000; }
.ptrade-submit:hover { background: linear-gradient(135deg,#33ecff,#00d4e8); }
.ptrade-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.ptrade-ghost {
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  color: #8a8a9a;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  padding: 4px 8px;
}
.ptrade-ghost:hover { background: rgba(255,255,255,0.06); color: #e0e0e0; }
.ptrade-sm { padding: 2px 6px; font-size: 10px; margin-left: auto; }
/* YES / NO side buttons */
.ptrade-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.ptrade-side {
  padding: 8px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #8a8a9a;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all .15s;
}
.ptrade-yes.active  { background: rgba(105,240,174,0.12); border-color: #69f0ae; color: #69f0ae; }
.ptrade-no.active   { background: rgba(255,82,82,0.12);   border-color: #ff5252; color: #ff5252; }
.ptrade-yes:hover:not(.active) { border-color: rgba(105,240,174,0.4); color: #69f0ae; }
.ptrade-no:hover:not(.active)  { border-color: rgba(255,82,82,0.4);   color: #ff5252; }
/* USDC input row */
.ptrade-input-row {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  overflow: hidden;
}
.ptrade-dollar, .ptrade-usdc {
  padding: 0 8px;
  color: #8a8a9a;
  font-size: 11px;
  white-space: nowrap;
}
.ptrade-input {
  flex: 1;
  background: none;
  border: none;
  color: #e0e0e0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 4px;
  outline: none;
  min-width: 0;
}
.ptrade-input::-webkit-inner-spin-button { opacity: 0.3; }
/* Calculation display */
.ptrade-calc {
  font-size: 10px;
  color: #8a8a9a;
  padding: 2px 0;
}
.ptrade-calc b { color: #e0e0e0; }
/* Status messages */
.ptrade-status {
  font-size: 11px;
  min-height: 16px;
  border-radius: 3px;
  padding: 0;
  transition: all .2s;
}
.ptrade-status:not(:empty) { padding: 6px 8px; }
.ptrade-pending { background: rgba(255,145,0,0.1);  color: #ff9100; }
.ptrade-error   { background: rgba(255,82,82,0.1);  color: #ff5252; }
.ptrade-ok      { background: rgba(105,240,174,0.1); color: #69f0ae; }

/* Polymarket trade widget — setup guide */
.ptrade-setup-btn { background: rgba(0,229,255,0.12); color: #00e5ff; border: 1px solid rgba(0,229,255,0.3); }
.ptrade-setup-btn:hover { background: rgba(0,229,255,0.22); }
.ptrade-setup-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0 4px;
}
.ptrade-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 11px;
  line-height: 1.5;
}
.ptrade-step-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,229,255,0.15);
  border: 1px solid rgba(0,229,255,0.35);
  color: #00e5ff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.ptrade-step b { color: #e0e0e0; font-size: 11px; }
.ptrade-step-desc { color: #8a8a9a; }
.ptrade-link {
  color: #00e5ff;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,229,255,0.3);
}
.ptrade-link:hover { border-bottom-color: #00e5ff; }

/* ══════════════════════════════════════════════════════════════
   LIVE MARKETS PANEL — v15.0.8
   ══════════════════════════════════════════════════════════════ */

/* ── Panel container ── */
.pm-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  height: 100vh;
  background: rgba(10,10,15,0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-left: 1px solid rgba(0,229,255,0.12);
  z-index: 800;
  display: flex;
  flex-direction: column;
  font-family: 'JetBrains Mono', 'Fira Mono', monospace;
  box-shadow: -4px 0 32px rgba(0,0,0,0.6);
}

/* ── Header ── */
.pm-panel__header {
  position: sticky;
  top: 0;
  background: rgba(8,8,13,0.97);
  border-bottom: 1px solid rgba(0,229,255,0.10);
  padding: 10px 12px 0;
  z-index: 2;
  flex-shrink: 0;
}

.pm-panel__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.pm-panel__icon {
  font-size: 14px;
}

.pm-panel__title {
  font-size: 11px;
  font-weight: 700;
  color: #00e5ff;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex: 1;
}

.pm-panel__count {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  font-weight: 400;
}

.pm-panel__close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  position: absolute;
  top: 10px;
  right: 8px;
}
.pm-panel__close:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

/* ── Live dot ── */
.pm-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4caf50;
  box-shadow: 0 0 6px #4caf50;
  animation: pmPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pmPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

/* ── Provider filter ── */
.pm-panel__filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 2px;
}
.pm-src-filters { display: flex; gap: 5px; flex-shrink: 0; }
.pm-src-btn {
  width: 24px; height: 24px;
  border-radius: 5px;
  border: 1.5px solid transparent;
  font-size: 10px; font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.35;
  background: transparent; color: #fff;
  flex-shrink: 0;
}
.pm-src-btn--active { opacity: 1; }
.pm-src-btn--kalshi { border-color: #00bcd4; color: #00bcd4; }
.pm-src-btn--kalshi.pm-src-btn--active { background: #00bcd4; color: #000; }
.pm-src-btn--poly { border-color: #ff6b35; color: #ff6b35; }
.pm-src-btn--poly.pm-src-btn--active { background: #ff6b35; color: #fff; }
.pm-src-btn:hover { opacity: 1; filter: brightness(1.1); }

/* ── Tabs ── */
.pm-panel__tabs {
  display: flex;
  gap: 4px;
  padding-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pm-panel__tabs::-webkit-scrollbar { display: none; }

.pm-tab {
  flex-shrink: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.55);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: inherit;
}
.pm-tab:hover {
  background: rgba(0,229,255,0.10);
  border-color: rgba(0,229,255,0.25);
  color: #00e5ff;
}
.pm-tab--active {
  background: rgba(0,229,255,0.15);
  border-color: #00e5ff;
  color: #00e5ff;
}

/* ── Panel body (scrollable) ── */
.pm-panel__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,229,255,0.2) transparent;
}
.pm-panel__body::-webkit-scrollbar { width: 4px; }
.pm-panel__body::-webkit-scrollbar-track { background: transparent; }
.pm-panel__body::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.2); border-radius: 2px; }

/* ── Market rows ── */
.pm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: background 0.12s;
  min-height: 72px;
  position: relative;
}
.pm-row:hover {
  background: rgba(0,229,255,0.04);
}
.pm-row:last-child { border-bottom: none; }

/* Left section */
.pm-row__left {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  flex: 1;
  min-width: 0;
}

/* Badge */
.pm-row__badge {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  letter-spacing: 0;
}
.pm-row__badge--kalshi {
  background: rgba(0,188,212,0.20);
  border: 1px solid #00bcd4;
  color: #00bcd4;
}
.pm-row__badge--polymarket {
  background: rgba(255,107,53,0.20);
  border: 1px solid #ff6b35;
  color: #ff6b35;
}

/* Info */
.pm-row__info {
  flex: 1;
  min-width: 0;
}
.pm-row__title {
  font-size: 11px;
  font-weight: 600;
  color: #e0e0e0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.pm-row__sub {
  font-size: 9.5px;
  color: rgba(255,255,255,0.40);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
  line-height: 1.3;
}

/* Center: bar + pct */
.pm-row__center {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  width: 72px;
  flex-shrink: 0;
}
.pm-row__bar-track {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.pm-row__bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}
.pm-row__pct {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.pm-row__pct--green  { color: #4caf50; }
.pm-row__pct--orange { color: #ff9100; }
.pm-row__pct--red    { color: #ef5350; }

/* Right section */
.pm-row__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
  width: 62px;
}
.pm-row__time {
  font-size: 9px;
  color: rgba(255,255,255,0.35);
}
.pm-row__vol {
  font-size: 9px;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
}
.pm-row__btn {
  font-size: 9px;
  font-weight: 700;
  color: #00e5ff;
  border: 1px solid rgba(0,229,255,0.35);
  border-radius: 3px;
  padding: 2px 5px;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.pm-row__btn:hover {
  background: rgba(0,229,255,0.12);
  border-color: #00e5ff;
  color: #00e5ff;
}

/* ── Price flash animations ── */
@keyframes pmFlashUp {
  0%   { background: rgba(76,175,80,0.25); }
  100% { background: transparent; }
}
@keyframes pmFlashDown {
  0%   { background: rgba(239,83,80,0.25); }
  100% { background: transparent; }
}
.pm-row--up   { animation: pmFlashUp   2s ease forwards; }
.pm-row--down { animation: pmFlashDown 2s ease forwards; }

/* ── Floating open button ── */
.pm-open-btn {
  position: fixed;
  bottom: 24px;
  right: 16px;
  z-index: 799;
  display: none;
  background: linear-gradient(135deg, #00bcd4, #00e5ff);
  color: #000;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,229,255,0.40);
  letter-spacing: 0.06em;
  transition: transform 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.pm-open-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0,229,255,0.55);
}

/* ── Mobile: bottom sheet ── */
@media (max-width: 768px) {
  .pm-panel {
    width: 100%;
    height: 60vh;
    top: auto;
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: 1px solid rgba(0,229,255,0.15);
    border-radius: 16px 16px 0 0;
  }
  .pm-panel__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pm-open-btn {
    bottom: 16px;
    right: 12px;
  }
}

/* ══════════════════════════════════════════════════════════════
   KALSHI IN-PLATFORM TRADING WIDGET
   ══════════════════════════════════════════════════════════════ */

.ktrade-container {
  margin-top: 16px;
  border-top: 1px solid rgba(0,188,212,0.2);
  padding-top: 16px;
}

.ktrade {
  font-family: var(--font-sans);
  color: var(--text-primary, #fff);
}

.ktrade__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
}

.ktrade__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px;
  background: #00bcd4; color: #000;
  font-size: 9px; font-weight: 900;
  flex-shrink: 0;
}

.ktrade__balance {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #4caf50;
  font-weight: 700;
}

.ktrade__logout {
  background: none; border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5); cursor: pointer; border-radius: 4px;
  font-size: 9px; padding: 2px 6px;
}
.ktrade__logout:hover { color: #fff; border-color: rgba(255,255,255,0.4); }

.ktrade__desc { font-size: 12px; color: rgba(255,255,255,0.6); margin: 0 0 14px; }

.ktrade__field { margin-bottom: 12px; }
.ktrade__field label { display: block; font-size: 10px; color: rgba(255,255,255,0.5); margin-bottom: 5px; font-weight: 600; letter-spacing: 0.05em; }
.ktrade__hint { font-weight: 400; opacity: 0.7; }

.ktrade__input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(0,188,212,0.25);
  border-radius: 6px;
  padding: 8px 10px;
  color: #fff;
  font-size: 12px;
  font-family: var(--font-mono);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.ktrade__input:focus { border-color: #00bcd4; }
select.ktrade__input { cursor: pointer; }

.ktrade__or {
  text-align: center;
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  margin: 10px 0;
}

/* Bid/Ask display boxes */
.ktrade__odds-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.ktrade__odds-box {
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  border: 1px solid transparent;
}
.ktrade__odds-box--yes { border-color: rgba(76,175,80,0.3); }
.ktrade__odds-box--no  { border-color: rgba(239,83,80,0.3); }
.ktrade__odds-label { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 4px; opacity: 0.6; }
.ktrade__odds-val { font-family: var(--font-mono); font-size: 18px; font-weight: 800; }
.ktrade__odds-box--yes .ktrade__odds-val { color: #4caf50; }
.ktrade__odds-box--no  .ktrade__odds-val { color: #ef5350; }

/* Side buttons */
.ktrade__side-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ktrade__side-btn {
  padding: 10px;
  border-radius: 6px;
  border: 1.5px solid;
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  background: transparent;
  transition: all 0.15s;
}
.ktrade__side-btn--yes { border-color: #4caf50; color: #4caf50; }
.ktrade__side-btn--yes.ktrade__side-btn--active { background: #4caf50; color: #000; }
.ktrade__side-btn--no  { border-color: #ef5350; color: #ef5350; }
.ktrade__side-btn--no.ktrade__side-btn--active  { background: #ef5350; color: #fff; }

/* Cost row */
.ktrade__cost-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding: 10px 12px; background: rgba(255,255,255,0.04); border-radius: 6px; }
.ktrade__cost-label { font-size: 11px; color: rgba(255,255,255,0.5); }
.ktrade__cost-val { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: #fff; }

/* Buttons */
.ktrade__btn {
  width: 100%;
  padding: 13px;
  border-radius: 8px;
  border: none;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  cursor: pointer;
  transition: filter 0.15s;
}
.ktrade__btn--primary { background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%); color: #000; }
.ktrade__btn--primary:hover { filter: brightness(1.12); }
.ktrade__btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Messages */
.ktrade__err { font-size: 11px; color: #ef5350; margin: 10px 0 0; }
.ktrade__ok  { font-size: 11px; color: #4caf50; margin: 10px 0 0; }
.ktrade__footnote { font-size: 10px; color: rgba(255,255,255,0.25); margin: 8px 0 0; text-align: center; }

/* ── Trading Context Widget ────────────────────────────────────── */
.ktx-container {
  margin: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ktx-section {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(0,188,212,0.15);
  border-radius: 8px;
  padding: 10px 12px;
}

.ktx-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.ktx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
}

.ktx-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 6px 4px;
}

.ktx-val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.ktx-val.ktx-hi { color: #ef5350; }
.ktx-val.ktx-lo { color: #42a5f5; }

.ktx-label {
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.ktx-desc {
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  font-style: italic;
}

/* ── Sparklines ─────────────────────────────────────────────── */
.pm-sparkline {
  display: block;
  width: 80px;
  height: 24px;
  flex-shrink: 0;
}
.pm-row .pm-sparkline {
  margin-left: 4px;
}

/* ── Fair Value / Edge Analysis Panel ─────────────────────────── */
.ktx-fair-value { background: rgba(0,229,255,0.04); border: 1px solid rgba(0,229,255,0.15); border-radius: 6px; padding: 10px 12px; margin: 8px 0; }
.ktx-fv-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ktx-fv-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: #00e5ff; letter-spacing: 1px; font-weight: 600; }
.ktx-fv-confidence { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 3px; }
.ktx-fv-confidence.HIGH { background: rgba(0,230,118,0.2); color: #00e676; }
.ktx-fv-confidence.MEDIUM { background: rgba(255,193,7,0.2); color: #ffc107; }
.ktx-fv-confidence.LOW { background: rgba(255,82,82,0.2); color: #ff5252; }
.ktx-fv-row { display: flex; gap: 8px; align-items: center; padding: 2px 0; font-size: 11px; }
.ktx-fv-metric { color: #8a8a9a; flex: 1; }
.ktx-fv-value { color: #e0e0e0; font-weight: 600; }
.ktx-fv-members { color: #555; font-size: 9px; }
.ktx-fv-spread-label { font-size: 9px; color: #666; margin-top: 4px; display: block; }

.ktx-edge-table { margin: 8px 0; }
.ktx-edge-header { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px; padding: 4px 8px; font-size: 9px; color: #555; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.5px; }
.ktx-edge-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px; padding: 5px 8px; border-radius: 4px; margin: 2px 0; font-size: 11px; }
.ktx-edge-row.ktx-edge-buy { background: rgba(0,230,118,0.06); border-left: 2px solid #00e676; }
.ktx-edge-row.ktx-edge-sell { background: rgba(255,82,82,0.06); border-left: 2px solid #ff5252; }
.ktx-edge-row.ktx-edge-neutral { background: rgba(255,255,255,0.02); border-left: 2px solid #333; }
.ktx-edge-bracket { color: #e0e0e0; font-weight: 500; }
.ktx-edge-fair { color: #00e5ff; }
.ktx-edge-market { color: #8a8a9a; }
.ktx-edge-val { font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.ktx-edge-pos { color: #00e676; }
.ktx-edge-neg { color: #ff5252; }

.ktx-kelly { background: rgba(255,193,7,0.05); border: 1px solid rgba(255,193,7,0.2); border-radius: 6px; padding: 8px 12px; margin: 8px 0; display: flex; flex-direction: column; gap: 2px; }
.ktx-kelly-label { font-size: 9px; color: #ffc107; letter-spacing: 1px; font-weight: 600; }
.ktx-kelly-val { font-size: 15px; font-weight: 700; color: #ffc107; }
.ktx-kelly-note { font-size: 10px; color: #8a8a9a; }

.ktx-liquidity-row { display: flex; gap: 12px; padding: 4px 0; font-size: 10px; flex-wrap: wrap; }
.ktx-liq-label { color: #555; }
.ktx-liq-val { color: #e0e0e0; font-weight: 600; margin-right: 4px; }

.ktx-tele { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 11px; }
.ktx-tele-label { color: #8a8a9a; width: 40px; }
.ktx-tele-val { font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.ktx-tele-pos { color: #ff9100; }
.ktx-tele-neg { color: #00b0ff; }
.ktx-tele-note { color: #555; font-size: 9px; }

/* ── Forecast Panel: Climate Context + Model Comparison (v15.0.26) ── */
.fp-climate-ctx { padding: 8px 0; }
.fp-tele-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 11px; }
.fp-tele-label { color: #8a8a9a; width: 36px; font-weight: 600; font-size: 10px; }
.fp-tele-val { font-weight: 700; font-family: 'JetBrains Mono', monospace; min-width: 44px; }
.fp-tele-note { color: #666; font-size: 10px; }

.fp-model-cmp { margin: 4px 0 12px; }
.fp-model-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.fp-model-table th { color: #555; font-weight: 600; padding: 3px 6px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.06); }
.fp-model-table td { padding: 4px 6px; color: #e0e0e0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.fp-model-table tr:hover td { background: rgba(255,255,255,0.03); }

/* ── CPC Outlook tabs in Forecast Panel (v15.0.27) ── */
.fp-cpc-outlook { margin: 4px 0 12px; }
.fp-cpc-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.fp-cpc-tab { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #8a8a9a; font-size: 9px; padding: 3px 8px; border-radius: 3px; cursor: pointer; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.3px; }
.fp-cpc-tab.active { background: rgba(0,229,255,0.1); border-color: rgba(0,229,255,0.4); color: #00e5ff; }
.fp-cpc-img { display: block; border-radius: 4px; border: 1px solid rgba(255,255,255,0.08); }

/* ── NWS AFD + METAR widget in Kalshi trading panel (v15.0.28) ── */
.ktx-afd { background: rgba(255,235,59,0.03); border: 1px solid rgba(255,235,59,0.12); border-radius: 6px; padding: 10px 12px; margin: 8px 0; }
.ktx-afd-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ktx-afd-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: #ffeb3b; letter-spacing: 1px; font-weight: 600; }
.ktx-afd-wfo { font-size: 9px; color: #666; }
.ktx-afd-bullet { font-size: 10px; color: #e0e0e0; padding: 2px 0 2px 8px; border-left: 2px solid rgba(255,235,59,0.4); margin: 3px 0; line-height: 1.4; }
.ktx-afd-body { font-size: 9px; color: #666; font-family: 'JetBrains Mono', monospace; line-height: 1.5; margin-top: 6px; max-height: 80px; overflow: hidden; white-space: pre-wrap; }

/* ── IEM Historical Obs widget in Kalshi trading panel (v15.0.29) ── */
.ktx-hist { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; padding: 8px 12px; margin: 8px 0; }
.ktx-hist-header { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: #555; letter-spacing: 0.5px; margin-bottom: 6px; }
.ktx-hist-row { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
.ktx-hist-cell { display: flex; flex-direction: column; align-items: center; min-width: 30px; }
.ktx-hist-temp { font-size: 11px; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.ktx-hist-date { font-size: 8px; color: #444; }
.ktx-hist-stats { font-size: 9px; color: #555; margin-top: 6px; font-family: 'JetBrains Mono', monospace; }

/* ── NDFD Extended Parameters in Forecast Panel (v15.0.29) ── */
.fp-ndfd-cond { margin: 4px 0 12px; }
.fp-ndfd-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 11px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.fp-ndfd-icon { font-size: 14px; width: 20px; }
.fp-ndfd-label { color: #8a8a9a; flex: 1; }
.fp-ndfd-val { font-weight: 600; font-family: 'JetBrains Mono', monospace; }

/* ── Precipitation Type + Flood Forecast in Forecast Panel (v15.0.29) ── */
.fp-precip-type { margin: 4px 0 12px; }
.fp-precip-hours { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.fp-precip-hour { display: flex; flex-direction: column; align-items: center; min-width: 36px; gap: 1px; }
.fp-ph-time { font-size: 8px; color: #555; }
.fp-ph-amt { font-size: 10px; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.fp-ph-prob { font-size: 8px; color: #444; }
.fp-river-discharge { font-size: 10px; color: #555; margin-top: 6px; font-family: 'JetBrains Mono', monospace; }

/* ── Moon Phase widget in Space Command aurora section (v15.0.29) ── */
.sc-moon-widget { padding: 8px 12px; background: rgba(255,255,255,0.02); border-radius: 6px; margin: 4px 0; }
.sc-moon-row { display: flex; align-items: center; gap: 8px; }
.sc-moon-emoji { font-size: 24px; }
.sc-moon-info { display: flex; flex-direction: column; }
.sc-moon-name { color: #e0e0e0; font-size: 12px; font-weight: 600; }
.sc-moon-illum { color: #8a8a9a; font-size: 10px; }
.sc-moon-next { color: #555; font-size: 10px; margin-top: 4px; }
.sc-sun-times { color: #ff9800; font-size: 10px; margin-top: 4px; font-family: 'JetBrains Mono', monospace; }

/* ── AirNow AQI + Pirate Weather in Forecast Panel (v15.0.30) ── */
.fp-airnow { margin: 0 0 10px; }
.fp-aqi-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fp-aqi-badge { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 12px; font-family: 'JetBrains Mono', monospace; }
.fp-aqi-param { font-size: 10px; color: #666; }
.fp-pirate { margin: 4px 0 12px; }
.fp-storm-distance { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 11px; color: #8a8a9a; }
.fp-storm-icon { font-size: 14px; }
.fp-storm-text { }
.fp-precip-now { font-size: 11px; color: #64b5f6; padding: 3px 0; font-family: 'JetBrains Mono', monospace; }
.fp-hourly-precip-label { font-size: 9px; color: #555; margin: 6px 0 4px; }
.fp-hourly-precip-row { display: flex; align-items: flex-end; gap: 3px; height: 50px; }
.fp-hpc-col { display: flex; flex-direction: column; align-items: center; width: 28px; height: 100%; justify-content: flex-end; }
.fp-hpc-bar { width: 16px; border-radius: 2px 2px 0 0; min-height: 1px; }
.fp-hpc-prob { font-size: 7px; color: #444; margin-top: 2px; }
.fp-hpc-time { font-size: 7px; color: #333; }
.fp-pirate-summary { font-size: 10px; color: #666; margin-top: 6px; font-style: italic; }

/* ── Phase 8: Data freshness indicator ── */
.data-timestamp {
  font-size: 9px;
  color: #444;
  letter-spacing: 0.5px;
}
.data-timestamp.fresh { color: #00e676; }
.data-timestamp.aging { color: #ffc107; }
.data-timestamp.stale { color: #ff5252; }

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, #1a1a2e 25%, #222244 50%, #1a1a2e 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 3px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-line { height: 10px; margin: 4px 0; }
.skeleton-line.wide { width: 80%; }
.skeleton-line.medium { width: 55%; }
.skeleton-line.narrow { width: 35%; }
.skeleton-block { height: 60px; margin: 8px 0; }

/* Tooltip system */
[data-tooltip] { position: relative; cursor: help; }
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e;
  border: 1px solid #333;
  color: #e0e0e0;
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 4px;
  white-space: nowrap;
  max-width: 220px;
  white-space: normal;
  z-index: 9999;
  pointer-events: none;
  line-height: 1.4;
}
[data-tooltip]:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #333;
  z-index: 9999;
}

/* Error state */
.panel-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: rgba(255, 82, 82, 0.08);
  border: 1px solid rgba(255, 82, 82, 0.2);
  border-radius: 4px;
  color: #ff5252;
  font-size: 11px;
}
.panel-error::before { content: '⚠'; font-size: 14px; }

/* Keyboard shortcuts modal */
#shortcuts-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 9998;
  align-items: center;
  justify-content: center;
}
#shortcuts-modal.open { display: flex; }
.shortcuts-card {
  background: #0f0f1a;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 24px 28px;
  max-width: 520px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}
.shortcuts-card h3 { color: #00e5ff; margin: 0 0 16px; font-size: 15px; }
.shortcuts-section { margin-bottom: 16px; }
.shortcuts-section h4 { color: #888; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 8px; }
.shortcut-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid #111;
  font-size: 12px;
}
.shortcut-row .desc { color: #b0bec5; }
.shortcut-key {
  background: #1a1a2e;
  border: 1px solid #333;
  border-radius: 3px;
  padding: 2px 7px;
  color: #e0e0e0;
  font-family: monospace;
  font-size: 11px;
  white-space: nowrap;
}
.shortcuts-close {
  display: block;
  margin-top: 16px;
  text-align: center;
  color: #555;
  font-size: 11px;
  cursor: pointer;
}

/* ── Dark mode consistency fixes (v15.0.x) ── */
/* Global leaflet popup dark theme for uncategorized popups */
.leaflet-popup-content-wrapper {
  background: #1a1a2e !important;
  color: #e0e0e0 !important;
  border: 1px solid #2a2a4a !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}
.leaflet-popup-tip {
  background: #1a1a2e !important;
}
.leaflet-popup-close-button {
  color: #888 !important;
}
.leaflet-popup-close-button:hover {
  color: #ccc !important;
  background: transparent !important;
}
/* Ensure native inputs/selects without explicit styles stay dark */
.layer-panel input:not([type=range]):not([type=checkbox]),
.layer-panel select {
  background: #111 !important;
  color: #e0e0e0 !important;
  border-color: #333 !important;
}

/* === Extracted from app.js inline styles === */
.text-muted-sm { font-size: 10px; color: #888; }
.text-dim-xs { font-size: 9px; color: #555; }
.text-accent-sm { font-size: 10px; color: #00e5ff; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.panel-header { font-size: 11px; font-weight: 600; color: #e0e0e0; margin-bottom: 8px; }
.border-subtle { border-bottom: 1px solid #111; padding: 4px 0; }
.monospace { font-family: 'JetBrains Mono', 'Fira Code', monospace; }

/* ── Platform nav integration ── */
.top-bar { top: var(--platform-nav-h) !important; }
.map-container { top: calc(var(--platform-nav-h) + var(--top-bar-h)) !important; }

/* ── Trader button ── */
.top-bar-trader-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  background: #2563eb;
  color: #fff;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: background 150ms;
  font-family: var(--font-ui, 'Inter', sans-serif);
  flex-shrink: 0;
}
.top-bar-trader-btn:hover { background: #1d4ed8; }