:root {
  --bg-deep: #0b1a2e;
  --bg-mid: #0f2440;
  --panel: rgba(5, 0, 20, 0.82);
  --panel-border: rgba(0, 255, 255, 0.12);
  --cyan: #00ffff;
  --magenta: #ff00ff;
  --hot-pink: #ff0066;
  --yellow: #ffdd00;
  --orange: #ff8800;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Press Start 2P', monospace;
  background: var(--bg-deep);
  color: #e0e0e0;
}
#map { width: 100%; height: 100vh; }

/* ═══ DARK LEAFLET OVERRIDES ═══ */
.leaflet-container {
  background: var(--bg-deep);
}

/* Tiles are pre-processed via canvas — no runtime CSS filters needed */

/* Attribution */
.leaflet-control-attribution {
  background: var(--panel) !important;
  color: rgba(0, 255, 255, 0.4) !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.35rem !important;
  border: 1px solid var(--panel-border) !important;
}
.leaflet-control-attribution a {
  color: var(--cyan) !important;
}

/* Zoom controls */
.leaflet-control-zoom a {
  background: var(--panel) !important;
  color: var(--cyan) !important;
  border-color: var(--panel-border) !important;
  font-family: 'Press Start 2P', monospace !important;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
  transition: background 0.15s, text-shadow 0.15s;
}
.leaflet-control-zoom a:hover {
  background: rgba(0, 255, 255, 0.1) !important;
  text-shadow: 0 0 14px rgba(0, 255, 255, 0.8);
}

/* ═══ CLUSTER MARKERS ═══ */
.marker-cluster {
  background: none !important;
}
.marker-cluster div {
  background: var(--panel) !important;
  border: 2px solid var(--cyan) !important;
  color: var(--cyan) !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.5rem !important;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.3), inset 0 0 8px rgba(0, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 40px !important;
  height: 40px !important;
  margin-left: -20px !important;
  margin-top: -20px !important;
}
.marker-cluster-small div { border-color: var(--cyan) !important; color: var(--cyan) !important; }
.marker-cluster-medium div { border-color: var(--yellow) !important; color: var(--yellow) !important; text-shadow: 0 0 8px rgba(255, 220, 0, 0.6); box-shadow: 0 0 12px rgba(255, 220, 0, 0.3), inset 0 0 8px rgba(255, 220, 0, 0.05); }
.marker-cluster-large div { border-color: var(--magenta) !important; color: var(--magenta) !important; text-shadow: 0 0 8px rgba(255, 0, 255, 0.6); box-shadow: 0 0 12px rgba(255, 0, 255, 0.3), inset 0 0 8px rgba(255, 0, 255, 0.05); }

/* ═══ LEGEND ═══ */
.legend {
  background: var(--panel);
  border: 2px solid var(--panel-border);
  padding: 10px 14px;
  border-radius: 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 255, 255, 0.02);
  font-size: 0.45rem;
  line-height: 2;
  color: #e0e0e0;
  text-shadow: 0 0 6px currentColor;
}
.legend h4 {
  margin: 0 0 6px;
  font-size: 0.5rem;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  letter-spacing: 0.08em;
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.legend-swatch {
  width: 14px; height: 14px;
  border: 1px solid rgba(0,255,255,0.3);
  flex-shrink: 0;
}
.legend-line {
  width: 20px; height: 4px;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
  border-radius: 2px;
}

/* ═══ VIEW TOGGLE ═══ */
.view-toggle {
  background: var(--panel);
  border: 2px solid var(--panel-border);
  padding: 8px 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 255, 255, 0.02);
}
.view-toggle button {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: #e0e0e0;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.4rem;
  padding: 6px 10px;
  cursor: pointer;
  text-shadow: 0 0 4px currentColor;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.view-toggle button.active {
  background: rgba(0, 255, 255, 0.12);
  border-color: var(--cyan);
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}
.view-toggle button:hover:not(.active) {
  background: rgba(0, 255, 255, 0.05);
  border-color: rgba(0, 255, 255, 0.3);
}
.view-toggle button.street-mode {
  display: block;
  margin-top: 6px;
  width: 100%;
  font-size: 0.35rem;
  color: var(--yellow);
  border-color: rgba(255, 221, 0, 0.3);
  text-shadow: 0 0 6px rgba(255, 221, 0, 0.5);
}
.view-toggle button.street-mode:hover {
  background: rgba(255, 221, 0, 0.08);
  border-color: var(--yellow);
}

/* ═══ POPUPS ═══ */
.leaflet-popup-content-wrapper {
  background: var(--panel) !important;
  border: 2px solid var(--panel-border) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 255, 255, 0.1) !important;
  color: #e0e0e0;
}
.leaflet-popup-tip {
  background: var(--panel) !important;
  border: 1px solid var(--panel-border) !important;
}
.leaflet-popup-close-button {
  color: var(--cyan) !important;
  font-family: 'Press Start 2P', monospace !important;
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.5);
}

.survey-popup h3 {
  margin: 0 0 8px;
  font-size: 0.55rem;
  font-family: 'Press Start 2P', monospace;
  color: var(--magenta);
  text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
  line-height: 1.5;
}
.survey-popup .field {
  margin: 3px 0;
  font-size: 0.4rem;
  font-family: 'Press Start 2P', monospace;
  line-height: 1.8;
}
.survey-popup .label {
  font-weight: 600;
  color: var(--cyan);
}
.survey-popup hr {
  border: none;
  border-top: 1px solid var(--panel-border);
  margin: 8px 0;
}

/* ═══ TOOLTIPS ═══ */
.leaflet-tooltip.neon-tooltip {
  background: var(--panel);
  border: 1px solid var(--cyan);
  border-radius: 0;
  color: #e0e0e0;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.4rem;
  line-height: 1.8;
  padding: 6px 10px;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.25);
}
.leaflet-tooltip.neon-tooltip::before {
  border-top-color: var(--cyan);
}
.neon-tooltip .tt-street {
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}
.neon-tooltip .tt-detail {
  color: #aaa;
}

/* ═══ TARGET PROGRESS BADGE ═══ */
.progress-badge {
  background: var(--panel);
  border: 2px solid var(--magenta);
  padding: 10px 14px;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.28), inset 0 0 15px rgba(255, 0, 255, 0.04);
  font-family: 'Press Start 2P', monospace;
  color: #e0e0e0;
  min-width: 170px;
  margin-top: 10px !important;
}
.progress-badge .pb-title {
  font-size: 0.35rem;
  color: rgba(0, 255, 255, 0.65);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.progress-badge .pb-label {
  font-size: 0.5rem;
  color: var(--magenta);
  text-shadow: 0 0 10px rgba(255, 0, 255, 0.6);
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.progress-badge .pb-sub-goal {
  font-size: 0.35rem;
  color: rgba(0, 255, 255, 0.65);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.progress-badge .pb-counts {
  font-size: 0.7rem;
  margin-bottom: 8px;
  line-height: 1;
}
.progress-badge .pb-current {
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
}
.progress-badge .pb-slash {
  color: rgba(255, 255, 255, 0.35);
}
.progress-badge .pb-goal {
  color: #e0e0e0;
  text-shadow: 0 0 6px rgba(255, 0, 255, 0.4);
}
.progress-badge .pb-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 0, 255, 0.08);
  border: 1px solid rgba(255, 0, 255, 0.35);
  margin-bottom: 6px;
  overflow: hidden;
}
.progress-badge .pb-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  box-shadow: 0 0 10px var(--magenta);
  min-width: 2px;
}
.progress-badge .pb-sub {
  font-size: 0.35rem;
  color: rgba(0, 255, 255, 0.55);
  letter-spacing: 0.05em;
}

/* ═══ DATA UPDATED BADGE ═══ */
.last-updated {
  background: var(--panel);
  border: 1px solid rgba(0, 255, 255, 0.35);
  padding: 5px 9px;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.18);
  font-family: 'Press Start 2P', monospace;
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
}
.last-updated .lu-label {
  font-size: 0.35rem;
  color: rgba(0, 255, 255, 0.6);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.last-updated .lu-date {
  font-size: 0.4rem;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
  letter-spacing: 0.04em;
}

/* ═══ TARGET NEIGHBORHOOD GLOW ═══ */
.target-neighborhood {
  filter: drop-shadow(0 0 6px rgba(255, 0, 255, 0.6)) drop-shadow(0 0 14px rgba(255, 0, 255, 0.3));
}

/* ═══ NEON MARKER GLOW ═══ */
.neon-marker {
  /* glow removed for performance — color + opacity carry the neon look */
}

/* ═══ CHOROPLETH HOVER ═══ */
.choropleth-hover {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: var(--panel);
  border: 2px solid var(--cyan);
  padding: 8px 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  color: #e0e0e0;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
  line-height: 1.8;
  display: none;
}
.choropleth-hover .hood-name {
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}
.choropleth-hover .hood-count {
  color: #00ff66;
  text-shadow: 0 0 8px rgba(0, 255, 102, 0.5);
}