.kvk-live-stat {
    position: relative;
}

.kvk-live-stat.is-loading::after {
    position: absolute;
    right: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff5c5c;
    box-shadow: 0 0 0 0 rgba(255, 92, 92, 0.55);
    animation: kvk-loading-pulse 1.25s ease-out infinite;
    content: "";
}

.kvk-live-stat strong.just-updated {
    animation: kvk-tg-arrived 3.2s ease-out;
}

@keyframes kvk-loading-pulse {
    70% { box-shadow: 0 0 0 8px rgba(255, 92, 92, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 92, 92, 0); }
}

@keyframes kvk-tg-arrived {
    0%, 28% {
        color: #ffd6d6;
        background: rgba(255, 77, 77, 0.28);
        box-shadow: inset 0 0 0 1px rgba(255, 113, 113, 0.48);
    }
    100% {
        background: transparent;
        box-shadow: inset 0 0 0 1px transparent;
    }
}

.kvk-tg-stage-row strong {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: center;
  gap: 0.45rem;
}

.kvk-tg-stage-row strong small {
  color: var(--muted);
  font-size: 0.72em;
}
