.server {
    padding: 20px;
    border-radius: 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
}

.server.online {
    border-color: rgba(113,239,159,0.5);
}

.server.offline {
    border-color: rgba(255,80,80,0.5);
}

.server-status {
    margin-top: 10px;
    color: var(--muted);
    font-weight: 700;
}

.server.checking {
    border-color: rgba(255,255,255,0.16);
}

.status-checking {
    background: #ffd166;
    box-shadow: 0 0 10px #ffd166;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.status-online {
    background: #71ef9f;
    box-shadow: 0 0 10px #71ef9f;
}

.status-offline {
    background: #ff5c5c;
    box-shadow: 0 0 10px #ff5c5c;
}

.checking-text {
    animation: checkingBlink 1s ease-in-out infinite;
    letter-spacing: 0.5px;
}

@keyframes checkingBlink {
    0%   { opacity: 1; transform: translateY(0px); }
    50%  { opacity: 0.4; transform: translateY(-1px); }
    100% { opacity: 1; transform: translateY(0px); }
}