.status-group{
    display:flex;
    align-items:center;
    gap:10px;
}

.status-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.status-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    display:inline-block;
    flex:0 0 auto;

    background:#94a3b8;
    box-shadow:
            0 0 0 3px rgba(148,163,184,0.18),
            inset 0 0 0 1px rgba(255,255,255,0.7);
}

.status-pill.neutral .status-dot{
    display:none;
}

.status-pill.live .status-dot,
.status-pill.healthy .status-dot{
    background:#22c55e;
    box-shadow:
            0 0 0 3px rgba(34,197,94,0.18),
            inset 0 0 0 1px rgba(255,255,255,0.7);
}


.status-pill.healthy .status-dot{
    background: #517adc;
    box-shadow:
            0 0 0 3px rgba(43, 153, 201, 0.18),
            inset 0 0 0 1px rgba(255,255,255,0.7);
}

@keyframes pulse-green {
    0%{
        box-shadow:
                0 0 0 0 rgba(34,197,94,0.55),
                inset 0 0 0 1px rgba(255,255,255,0.7);
    }
    70%{
        box-shadow:
                0 0 0 12px rgba(34,197,94,0),
                inset 0 0 0 1px rgba(255,255,255,0.7);
    }
    100%{
        box-shadow:
                0 0 0 0 rgba(34,197,94,0),
                inset 0 0 0 1px rgba(255,255,255,0.7);
        opacity:1;
    }
}

@keyframes pulse-blue {
    0%{
        box-shadow:
                0 0 0 0 rgba(146, 175, 241, 0.55),
                inset 0 0 0 1px rgba(255,255,255,0.7);
    }
    70%{
        box-shadow:
                0 0 0 12px rgba(34,197,94,0),
                inset 0 0 0 1px rgba(255,255,255,0.7);
    }
    100%{
        box-shadow:
                0 0 0 0 rgba(34,197,94,0),
                inset 0 0 0 1px rgba(255,255,255,0.7);
        opacity:1;
    }
}

.status-pill.live .status-dot{
    animation:pulse-green 0.7s ease-out infinite;
}

.status-pill.healthy .status-dot{
    animation:pulse-blue 1.3s ease-out infinite;
}