.live-bar {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 14px 2px 4px;
}

.live-button {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  min-height: 34px;
  padding: .35rem .72rem;
  border: 1px solid #b9cff3;
  border-radius: 999px;
  background: #fff;
  color: #08245a;
  font: inherit;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .06em;
  box-shadow: 0 2px 8px rgba(7, 27, 73, .1);
  cursor: pointer;
}

.live-button:hover,
.live-button:focus-visible {
  border-color: #ed1c24;
  outline: none;
  box-shadow: 0 0 0 3px rgba(237, 28, 36, .13);
}

.live-button:disabled { cursor: wait; opacity: .72; }

.live-icon {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: #16a465;
  box-shadow: 0 0 0 3px rgba(22, 164, 101, .13);
}

.live-button.refreshing .live-icon { animation: live-pulse .8s ease-in-out infinite alternate; }
.live-bar .status { margin: 0; color: #526079; font-size: .78rem; font-weight: 700; }
.live-bar .status::before { display: none; }

@keyframes live-pulse { to { opacity: .3; transform: scale(.72); } }

@media (max-width: 720px) {
  .live-bar { margin: 10px 2px 5px; gap: .5rem; }
  .live-button { min-height: 32px; padding: .3rem .65rem; font-size: .72rem; }
  .live-bar .status { font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .live-button.refreshing .live-icon { animation: none; }
}