:root{font-family:system-ui,sans-serif;color:#e5e7eb;background:#0b1220;color-scheme:dark}
*{box-sizing:border-box}body{margin:0}header{display:flex;justify-content:space-between;align-items:center;padding:1rem 5%;background:#111827;border-bottom:1px solid #263247}
main{max-width:1200px;margin:auto;padding:1.5rem}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.card,.login-card{background:#151f30;border:1px solid #334155;border-left:5px solid #64748b;border-radius:.65rem;padding:1rem;box-shadow:0 8px 30px #0004}
.card.ok{border-left-color:#22c55e}.card.warning{border-left-color:#eab308}.card.critical{border-left-color:#ef4444}.title{display:flex;justify-content:space-between;align-items:center}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.metrics div{background:#0f172a;padding:.6rem;border-radius:.4rem}.metrics span,.muted{color:#94a3b8;font-size:.85rem}.metrics strong{display:block;font-size:1.15rem}
.filesystems div{display:grid;grid-template-columns:1fr 2fr 3.5rem;gap:.5rem;align-items:center;margin:.4rem 0}progress{width:100%;accent-color:#22c55e}
.io-list{display:grid;gap:.45rem}.io-list div{display:grid;grid-template-columns:minmax(5rem,1fr) 1fr 1fr;gap:.5rem;background:#0f172a;border-radius:.35rem;padding:.55rem}.io-list span{color:#cbd5e1;text-align:right}
.status-list{display:grid;gap:.45rem}.status-list>div{display:grid;grid-template-columns:minmax(8rem,1fr) auto;gap:.4rem .7rem;align-items:center;background:#0f172a;border-radius:.35rem;padding:.55rem}.status-list small{grid-column:1/-1;color:#94a3b8;overflow-wrap:anywhere}.status-pill{border-radius:999px;padding:.2rem .55rem;font-size:.8rem;background:#334155;color:#cbd5e1}.status-pill.ok{background:#14532d;color:#bbf7d0}.status-pill.warning{background:#713f12;color:#fef08a}.status-pill.critical{background:#7f1d1d;color:#fecaca}.status-pill.unknown,.integration-unavailable{color:#94a3b8}
.alert-history{display:grid;gap:.4rem}.alert-history>div{display:grid;grid-template-columns:2fr .7fr 1fr 1fr;gap:.6rem;padding:.7rem;background:#151f30;border-radius:.4rem}.alert-history .critical{color:#fca5a5}.alert-history .warning{color:#fde047}
.chart-header{display:flex;align-items:center;justify-content:space-between;margin-top:1rem}.chart-header h4{margin:.5rem 0}.history-range{background:#0f172a;color:#e5e7eb;border:1px solid #475569;border-radius:.35rem;padding:.35rem}
.chart{position:relative;height:190px;background:#0f172a;border-radius:.4rem;padding:.5rem}.chart canvas{width:100%;height:145px}.chart-empty{position:absolute;inset:35% 0;text-align:center;color:#94a3b8}.legend{display:flex;gap:1rem;font-size:.8rem;color:#cbd5e1}.legend span:before{content:"";display:inline-block;width:.75rem;height:.2rem;margin-right:.35rem;vertical-align:middle}.legend .cpu:before{background:#38bdf8}.legend .ram:before{background:#a78bfa}
button{background:#2563eb;border:0;border-radius:.4rem;color:white;padding:.65rem 1rem;cursor:pointer}.login{min-height:100vh;display:grid;place-items:center}.login-card{width:min(92vw,380px)}
label,input{display:block;width:100%}input{margin:.5rem 0 1rem;padding:.7rem;border:1px solid #475569;border-radius:.4rem;background:#0f172a}.error{color:#fca5a5}.empty{color:#94a3b8}
@media(max-width:550px){header{padding:.75rem 1rem;gap:1rem}header h1{font-size:1.5rem}.chart-header{gap:.5rem}.chart-header h4{font-size:.95rem}main{padding:1rem}.metrics{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}.filesystems div{grid-template-columns:1fr}.filesystems strong{grid-column:1}.io-list div{grid-template-columns:1fr 1fr}.io-list strong{grid-column:1/-1}.io-list span{text-align:left}.status-list>div{grid-template-columns:1fr}.status-pill{justify-self:start}.alert-history>div{grid-template-columns:1fr}.alert-history>div span{display:block}}