.st-body { margin: 22px 0 60px; display: flex; flex-direction: column; gap: 14px; }
.st-banner { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.st-banner b { display: block; font-size: 18px; }
.st-banner span { color: var(--dim); font-size: 13px; }
.st-banner.ok { border-color: var(--ice-deep); }
.st-banner.warn { border-color: var(--gold); }
.st-banner.bad { border-color: var(--bad); }
.st-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--ok); box-shadow: 0 0 0 5px rgba(74, 222, 128, .15); }
.st-banner.warn .st-dot { background: var(--gold); box-shadow: 0 0 0 5px rgba(242, 163, 58, .15); }
.st-banner.bad .st-dot { background: var(--bad); box-shadow: 0 0 0 5px rgba(248, 113, 113, .15); }
.st-note { font-size: 13px; color: var(--dim); padding: 0 4px; }
.st-note b { color: var(--gold); }
.st-row { padding: 16px 20px; border-top: 1px solid var(--line); }
.st-row:first-child { border-top: 0; }
.st-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.st-state { font-size: 13px; font-weight: 600; }
.st-state.ok { color: var(--ok); }
.st-state.bad { color: var(--bad); }
.st-bars { display: flex; gap: 3px; margin-top: 10px; }
.st-bars i { flex: 1; height: 28px; border-radius: 3px; background: var(--line); }
.st-bars i.ok { background: var(--ice-deep); }
.st-bars i.warn { background: var(--gold); }
.st-bars i.bad { background: var(--bad); }
.st-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--faint); margin-top: 6px; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .st-bars { gap: 2px; } .st-bars i { height: 22px; } }