.dot {
    box-shadow: 0 0 8px #24d26b, 0 0 18px rgba(36, 210, 107, 0.65);
    animation: status-pulse 1.45s ease-out infinite, status-blink 1.45s ease-in-out infinite;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.badge::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
}

.badge.online {
    border: 1px solid rgba(36, 210, 107, 0.18);
    animation: online-glow 1.8s ease-in-out infinite;
}

.badge.online::before {
    background: #24d26b;
    box-shadow: 0 0 8px #24d26b, 0 0 15px rgba(36, 210, 107, 0.8);
    animation: status-blink 1.2s ease-in-out infinite;
}

.badge.offline::before {
    background: #fb7185;
    box-shadow: 0 0 8px rgba(251, 113, 133, 0.65);
}

.progress span {
    box-shadow: 0 0 10px rgba(36, 210, 107, 0.8);
}

.refresh-countdown {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid #334155;
    color: #7dd3fc;
    font-size: 0.82em;
    white-space: nowrap;
}

.refresh-countdown i {
    animation: countdown-spin 2s linear infinite;
}

.status-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
}

.status-pagination button {
    width: 38px;
    height: 38px;
    border: 1px solid #334155;
    border-radius: 7px;
    background: #101a2b;
    color: #cbd5e1;
    cursor: pointer;
}

.status-pagination button.active,
.status-pagination button:hover {
    border-color: #24d26b;
    background: rgba(36, 210, 107, 0.14);
    color: #24d26b;
}

.availability-details {
    display: contents;
}

.availability-details .online-duration {
    color: #24d26b;
}

.availability-details .offline-duration {
    color: #fb7185;
}

@keyframes status-pulse {
    0% { box-shadow: 0 0 0 0 rgba(36, 210, 107, 0.65), 0 0 9px #24d26b; }
    70% { box-shadow: 0 0 0 11px rgba(36, 210, 107, 0), 0 0 18px rgba(36, 210, 107, 0.8); }
    100% { box-shadow: 0 0 0 0 rgba(36, 210, 107, 0), 0 0 9px #24d26b; }
}

@keyframes status-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.48; }
}

@keyframes online-glow {
    0%, 100% { box-shadow: 0 0 0 rgba(36, 210, 107, 0); }
    50% { box-shadow: 0 0 18px rgba(36, 210, 107, 0.18); }
}

@keyframes countdown-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
    .refresh-countdown {
        display: flex;
        width: max-content;
        margin: 6px 0 0 auto;
        padding-left: 0;
        border-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dot, .badge.online, .badge.online::before, .refresh-countdown i { animation: none; }
}