.live-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #72d8cf;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.live-status i {
  width: 6px;
  height: 6px;
  background: #31d4b9;
  animation: live-pulse 1.8s ease-out infinite;
}

.bars i {
  transition: height 1.15s cubic-bezier(.22, 1, .36, 1);
  will-change: height;
}

.map-shape span {
  animation: signal-pulse 2.4s ease-in-out infinite;
  transition: left 1.4s ease, top 1.4s ease, right 1.4s ease;
}

.map-shape span:nth-child(2) { animation-delay: .4s; }
.map-shape span:nth-child(3) { animation-delay: .8s; }
.map-shape span:nth-child(4) { animation-delay: 1.2s; }

.metric strong {
  transition: opacity .2s ease, transform .2s ease;
}

.metric strong.updating {
  opacity: .5;
  transform: translateY(-3px);
}

@keyframes signal-pulse {
  0%, 100% { transform: scale(.88); opacity: .7; box-shadow: 0 0 0 4px rgba(22,184,170,.1); }
  50% { transform: scale(1.12); opacity: 1; box-shadow: 0 0 0 12px rgba(22,184,170,.04); }
}

@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(49,212,185,.35); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(49,212,185,0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .live-status i, .map-shape span { animation: none; }
  .bars i, .map-shape span, .metric strong { transition: none; }
}