* { box-sizing: border-box; }
body {
  margin: 0;
  background: #111;
  font-family: system-ui, "Segoe UI", sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dark-map-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #333;
}

#map-dark {
  height: 450px;
  width: 100%;
  background: #242424;
}

.leaflet-layer, 
.leaflet-control-zoom-in, 
.leaflet-control-zoom-out,
.leaflet-control-attribution {
  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

.overlay-text {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.85rem;
  z-index: 500;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.1);
}

const map = L.map("map-dark").setView([40.7128, -74.0060], 13);

L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 19,
  attribution: "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>"
}).addTo(map);

L.marker([40.7128, -74.0060]).addTo(map)
  .bindPopup("<b>Dark Mode</b><br>CSS Filters make this easy.")
  .openPopup();