#usa-weather-map-wrapper {
  font-family: system-ui, "Segoe UI", Roboto, Arial;
}

/* Buttons */
.map-btn {
  background:#F43676;
  color:#fff;
  border:none;
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  box-shadow:0 4px 10px rgba(244,54,118,0.12);
}

/* State label */
.leaflet-overlay-pane svg .state-label-text {
  font-family: system-ui, "Segoe UI", Roboto, Arial;
  font-size: 10px;
  font-weight: 600;
  fill: #fff;
  stroke: rgba(0,0,0,0.45);
  stroke-width: 2;
  paint-order: stroke;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

/* Mobile */
@media (max-width:768px){
  .leaflet-overlay-pane svg .state-label-text { font-size:8px; }
}

/* Dark mode */
#usa-weather-map.dark-mode {
  filter: brightness(0.78) contrast(1.05);
}

/* Legend */
#weather-legend-box .legend-card {
  background:#fff;
  border:2px solid #F43676;
  border-radius:12px;
  padding:10px 14px;
  max-width:220px;
  font-size:14px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.legend-row {
  display:flex;
  align-items:center;
  margin:6px 0;
  gap:8px;
}

.legend-swatch {
  width:18px;
  height:14px;
  border-radius:3px;
  display:inline-block;
}

.legend-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.legend-toggle {
  background:#F43676;
  color:#fff;
  padding:4px 8px;
  border-radius:8px;
  font-size:12px;
  cursor:pointer;
}

/* Dark legend */
#weather-legend-box.dark .legend-card {
  background:#111;
  color:#fff;
  border-color:#F43676;
}