.server-ping {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid #384555;
    color: #8290a2;
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .45px;
}

.server-ping i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #718095;
}

.server-ping:not(.unknown) i {
    animation: server-ping-live 1.8s ease-in-out infinite;
}

.server-ping.updated {
    animation: server-ping-update .45s ease-out;
}

.server-ping.excellent,
.server-ping.good {
    border-color: #4b602b;
    color: #b8d36d;
}

.server-ping.excellent i,
.server-ping.good i {
    background: var(--accent);
    box-shadow: 0 0 8px rgba(199, 255, 50, .7);
}

.server-ping.medium {
    border-color: #775328;
    color: #ffb360;
}

.server-ping.medium i {
    background: #ffad4d;
}

.server-ping.high {
    border-color: #62333c;
    color: #ff8994;
}

.server-ping.high i {
    background: var(--red);
}

.server-control-live .server-control-live-meta {
    flex: 0 0 auto;
    align-items: flex-end;
    gap: 2px;
}

.server-control-live-meta b {
    color: var(--accent);
    font: 700 10px Consolas, monospace;
}

.server-control-live.offline .server-control-live-meta b {
    color: #ff8994;
}

@keyframes server-ping-live {
    50% {
        opacity: .4;
        transform: scale(.75);
    }
}

@keyframes server-ping-update {
    50% {
        border-color: var(--accent);
        background: rgba(199, 255, 50, .08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .server-ping:not(.unknown) i,
    .server-ping.updated {
        animation: none;
    }
}