#map-canvas { width: 100%; height: 100%; background: var(--bg-primary); }

/* Leaflet dark adjustments */
.leaflet-container { background: var(--bg-primary); outline: none; }
.leaflet-control-attribution {
  background: rgba(15,22,41,0.7); color: var(--text-muted);
  font-size: 9px; padding: 2px 6px;
}

/* Custom pins */
.cp-pin {
  position: relative;
  width: 0; height: 0;
}
.cp-pin__dot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0,0,0,0.6);
}
.cp-pin__pulse {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0.5;
  animation-name: pin-pulse;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}
.cp-pin__label {
  position: absolute;
  top: 100%; left: 50%;
  transform: translate(-50%, 4px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-secondary);
  white-space: nowrap;
  background: rgba(10,14,26,0.7);
  padding: 1px 4px;
  border-radius: 2px;
  pointer-events: none;
}

@keyframes pin-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0.65; }
  100% { transform: translate(-50%, -50%) scale(1.0); opacity: 0; }
}

/* Severity colors */
.cp-pin--critical .cp-pin__dot   { width: 14px; height: 14px; background: var(--severity-critical); }
.cp-pin--critical .cp-pin__pulse { width: 40px; height: 40px; background: var(--map-pin-pulse-critical); animation-duration: 1.2s; }

.cp-pin--high     .cp-pin__dot   { width: 12px; height: 12px; background: var(--severity-high); }
.cp-pin--high     .cp-pin__pulse { width: 34px; height: 34px; background: var(--map-pin-pulse-high); animation-duration: 1.6s; }

.cp-pin--medium   .cp-pin__dot   { width: 10px; height: 10px; background: var(--severity-medium); }
.cp-pin--medium   .cp-pin__pulse { width: 28px; height: 28px; background: var(--map-pin-pulse-medium); animation-duration: 2.0s; }

.cp-pin--low      .cp-pin__dot   { width: 8px; height: 8px; background: var(--severity-low); }
.cp-pin--low      .cp-pin__pulse { width: 22px; height: 22px; background: var(--map-pin-pulse-low); animation-duration: 2.5s; }

/* Popup */
.leaflet-popup-content-wrapper {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: none;
}
.leaflet-popup-tip { background: var(--bg-elevated); }
.leaflet-popup-content { margin: 12px 14px; min-width: 280px; }
.cp-popup__row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.cp-popup__badge {
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.cp-popup__badge--critical { background: rgba(239,68,68,0.15); color: var(--severity-critical); }
.cp-popup__badge--high     { background: rgba(249,115,22,0.15); color: var(--severity-high); }
.cp-popup__badge--medium   { background: rgba(234,179,8,0.15); color: var(--severity-medium); }
.cp-popup__badge--low      { background: rgba(34,197,94,0.15); color: var(--severity-low); }

.cp-popup__title { font-weight: 600; font-size: 13px; }
.cp-popup__sub   { font-size: 11px; color: var(--text-secondary); }
.cp-popup__hr    { border: none; border-top: 1px solid var(--border-subtle); margin: 8px 0; }
.cp-popup__delay { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--accent-cyan); margin: 4px 0; }
.cp-popup__metric{ font-size: 11px; color: var(--text-secondary); margin-bottom: 3px; }
.cp-popup__btn {
  display: block; text-align: center; text-decoration: none;
  background: var(--bg-tertiary); color: var(--text-primary);
  border: 1px solid var(--border-default); border-radius: 6px;
  padding: 7px 10px; font-size: 12px; margin-top: 6px;
}
.cp-popup__btn:hover { border-color: var(--border-active); }