#deltaForceMap {
  width: 100%;
  height: 100%;
  min-height: 500px;
  background: #0a1220;
  border-radius: 12px;
}

.leaflet-container {
  background: #0a1220 !important;
  font-family: 'Inter', sans-serif;
}

.leaflet-popup-content-wrapper {
  background: rgba(15, 25, 40, 0.95) !important;
  color: #f0f4f8 !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.leaflet-popup-tip {
  background: rgba(15, 25, 40, 0.95) !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
}

.leaflet-popup-content {
  margin: 12px 14px !important;
  font-size: 13px;
  line-height: 1.5;
}

.leaflet-popup-content strong {
  color: #00d4ff;
}

.leaflet-tooltip {
  background: rgba(15, 25, 40, 0.9) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(0, 212, 255, 0.15) !important;
  border-radius: 6px !important;
  font-size: 12px;
  padding: 4px 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.leaflet-tooltip-top::before {
  border-top-color: rgba(15, 25, 40, 0.9) !important;
}

.leaflet-control-zoom a {
  background: rgba(15, 25, 40, 0.9) !important;
  color: #e2e8f0 !important;
  border-color: rgba(0, 212, 255, 0.15) !important;
}

.leaflet-control-zoom a:hover {
  background: rgba(0, 212, 255, 0.15) !important;
  color: #00d4ff !important;
}

@media (max-width: 768px) {
  #deltaForceMap { min-height: 400px; }
}