:root { --ok: #34d399; --warn: #fbbf24; --bad: #f87171; --maint: #60a5fa; }
.s-ok { color: #34d399; background: rgb(52 211 153 / 0.1); }
.tone-ok { color: #34d399; background: radial-gradient(60% 320% at 0% 50%, rgb(52 211 153 / 0.14), transparent 70%), var(--surface); }
.tone-ok .banner-icon { background: rgb(52 211 153 / 0.16); }
.mk.s-ok { background: #34d399; box-shadow: 0 0 0 4px rgb(52 211 153 / 0.2); }
.tl-ok::after { background: #34d399; }
.s-warn { color: #fbbf24; background: rgb(251 191 36 / 0.12); }
.tone-warn { color: #fbbf24; background: radial-gradient(60% 320% at 0% 50%, rgb(251 191 36 / 0.14), transparent 70%), var(--surface); }
.tone-warn .banner-icon { background: rgb(251 191 36 / 0.16); }
.mk.s-warn { background: #fbbf24; box-shadow: 0 0 0 4px rgb(251 191 36 / 0.25); }
.tl-warn::after { background: #fbbf24; }
.s-bad { color: #f87171; background: rgb(248 113 113 / 0.14); }
.tone-bad { color: #f87171; background: radial-gradient(60% 320% at 0% 50%, rgb(248 113 113 / 0.16), transparent 70%), var(--surface); }
.tone-bad .banner-icon { background: rgb(248 113 113 / 0.18); }
.mk.s-bad { background: #f87171; box-shadow: 0 0 0 4px rgb(248 113 113 / 0.3); }
.tl-bad::after { background: #f87171; }
.s-maint { color: #60a5fa; background: rgb(96 165 250 / 0.12); }
.tone-maint { color: #60a5fa; background: radial-gradient(60% 320% at 0% 50%, rgb(96 165 250 / 0.14), transparent 70%), var(--surface); }
.tone-maint .banner-icon { background: rgb(96 165 250 / 0.16); }
.mk.s-maint { background: #60a5fa; box-shadow: 0 0 0 4px rgb(96 165 250 / 0.2); }
.tl-maint::after { background: #60a5fa; }
.c-day .pill.s-ok { color: var(--zinc-400); background: rgb(255 255 255 / 0.04); }
.pill.st-investigating { color: #38bdf8; background: rgb(56 189 248 / 0.13); }
.tl-st-investigating::after { background: #38bdf8; }
.tl-st-investigating::before { background: rgb(56 189 248 / 0.55); }
.chip.st-investigating { color: #38bdf8; }
.pill.st-slow { color: #fbbf24; background: rgb(251 191 36 / 0.13); }
.tl-st-slow::after { background: #fbbf24; }
.tl-st-slow::before { background: rgb(251 191 36 / 0.55); }
.chip.st-slow { color: #fbbf24; }
.pill.st-down { color: #f87171; background: rgb(248 113 113 / 0.13); }
.tl-st-down::after { background: #f87171; }
.tl-st-down::before { background: rgb(248 113 113 / 0.55); }
.chip.st-down { color: #f87171; }
.pill.st-maintenance { color: #60a5fa; background: rgb(96 165 250 / 0.13); }
.tl-st-maintenance::after { background: #60a5fa; }
.tl-st-maintenance::before { background: rgb(96 165 250 / 0.55); }
.chip.st-maintenance { color: #60a5fa; }
.pill.st-info { color: #38bdf8; background: rgb(56 189 248 / 0.13); }
.tl-st-info::after { background: #38bdf8; }
.tl-st-info::before { background: rgb(56 189 248 / 0.55); }
.chip.st-info { color: #38bdf8; }
.pill.st-resolved { color: #34d399; background: rgb(52 211 153 / 0.13); }
.tl-st-resolved::after { background: #34d399; }
.tl-st-resolved::before { background: rgb(52 211 153 / 0.55); }
.chip.st-resolved { color: #34d399; }