.map-shell {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  background: #dce4eb;
}

.map-shell #map {
  height: 55vh;
  min-height: 430px;
}

.map-overlay {
  position: absolute;
  z-index: 5;
  top: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(213, 222, 232, .9);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 5px 18px rgba(17, 38, 62, .2);
  color: #26384e;
  font-size: 12px;
  line-height: 1.65;
  backdrop-filter: blur(7px);
}

.map-legend {
  left: 14px;
  width: 230px;
}

.map-probabilities {
  right: 14px;
  width: 285px;
}

.map-overlay-title {
  margin-bottom: 7px;
  color: #172b4d;
  font-size: 14px;
  font-weight: 700;
}

.map-overlay-subtitle {
  margin-bottom: 11px;
  color: #66768a;
  font-size: 10px;
  line-height: 1.45;
}

.legend-token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  margin-right: 7px;
  border-radius: 5px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.primary-zone { background: #b71c1c; }
.alternative-zone { background: #ef6c00; }
.poi-token { background: #008f72; }
.charger-token { background: #7c3aed; }
.current-token { background: #1769aa; }
.start-token { background: #64b5f6; }

.legend-ring {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0 9px 0 2px;
  border: 2px solid #008f72;
  border-radius: 50%;
  background: rgba(0, 143, 114, .10);
  vertical-align: middle;
}

.map-probability-row { margin: 10px 0; }
.map-probability-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
  font-weight: 700;
}
.map-probability-track {
  height: 8px;
  overflow: hidden;
  border-radius: 8px;
  background: #e7edf3;
}
.map-probability-fill {
  min-width: 3px;
  height: 100%;
  border-radius: 8px;
}

.prediction-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.destination-focus {
  animation: destination-pulse 1.05s ease-in-out 3;
  transform-origin: center bottom;
}

.map-marker-reveal {
  opacity: 0;
  animation: marker-arrive .55s cubic-bezier(.2,.9,.25,1.25) forwards;
  transform-origin: center bottom;
}

@keyframes destination-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(183,28,28,0)); }
  50% { transform: scale(1.22); filter: drop-shadow(0 0 13px rgba(183,28,28,.9)); }
}

@keyframes marker-arrive {
  from { opacity: 0; transform: translateY(-16px) scale(.65); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.prediction-badge {
  margin-bottom: 4px;
  padding: 5px 8px;
  border: 2px solid #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .32);
  color: #fff;
  font: 700 11px Inter, Arial, sans-serif;
  white-space: nowrap;
}

.map-status {
  position: absolute;
  z-index: 6;
  right: 14px;
  bottom: 25px;
  max-width: 330px;
  padding: 9px 12px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 3px 12px rgba(17, 38, 62, .2);
  color: #53657a;
  font-size: 11px;
}

.map-popup {
  min-width: 210px;
  color: #35465b;
  font: 12px Inter, Arial, sans-serif;
  line-height: 1.55;
}
.map-popup-title {
  margin-bottom: 5px;
  color: #172b4d;
  font-size: 13px;
  font-weight: 700;
}
.map-popup a {
  display: inline-block;
  margin-top: 6px;
  color: #1769aa;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 720px) {
  .map-overlay { top: 8px; padding: 9px 10px; }
  .map-legend { left: 8px; width: 205px; }
  .map-probabilities { top: auto; right: 8px; bottom: 32px; width: 245px; }
  .map-status { right: 8px; bottom: 8px; left: 8px; max-width: none; }
}