:root{color-scheme:dark;--bg:#090b0e;--panel:#12161b;--line:#27313a;--text:#e8edf1;--muted:#8e9aa5;--accent:#f28c28;--good:#69d391;--warn:#f0c674;--bad:#ef6b73}
*{box-sizing:border-box}html,body{margin:0;min-width:0;background:var(--bg);color:var(--text);font:13px/1.35 system-ui,-apple-system,Segoe UI,sans-serif}body{overflow-x:hidden}header,nav,main,footer{width:min(1400px,100%);margin:auto}header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:12px 16px 8px;border-bottom:1px solid var(--line)}h1{font-size:21px;margin:2px 0}h2{font-size:16px;margin:0 0 7px}small{color:var(--muted)}header p{margin:3px 0;color:var(--muted)}header>b,header div:last-child{white-space:nowrap}nav{display:flex;gap:4px;padding:6px 16px 4px;border-bottom:1px solid var(--line)}button{border:1px solid transparent;background:transparent;color:var(--muted);padding:6px 12px;cursor:pointer}button.active,button:hover{border-color:var(--accent);color:var(--text)}main{padding:8px 16px 12px}.tab{display:none}.tab.active{display:block}.panel{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:9px;margin:0 0 8px;min-width:0}.panel>b{display:block;color:var(--accent);font-size:11px;letter-spacing:.08em;margin-bottom:6px}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.grid2 .panel{margin:0}.full{grid-column:1/-1}.host-grid,.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.host-grid>div,.metric{border-left:2px solid var(--line);padding:3px 8px;min-width:0}.host-grid strong,.metric strong{display:block;text-align:right;font-size:15px;overflow-wrap:anywhere}.metric-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.metric span{color:var(--muted);font-size:11px}.row,.list,.event{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0;border-bottom:1px solid #202830;min-width:0}.row:last-child,.list:last-child,.event:last-child{border-bottom:0}.row>span:last-child,.list>span:last-child{margin-left:auto;text-align:right;overflow-wrap:anywhere}.list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.list small{display:block}.healthy{color:var(--good)}.warning{color:var(--warn)}.critical{color:var(--bad)}.unknown{color:var(--muted)}.hist{display:grid;grid-template-columns:115px minmax(90px,1fr) minmax(230px,auto);align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid #202830}.hist:last-child{border-bottom:0}.spark{color:var(--accent);letter-spacing:1px;white-space:nowrap;overflow:hidden}.stats{color:var(--muted);text-align:right}.event time{color:var(--muted);white-space:nowrap;font-size:11px}.event span{overflow-wrap:anywhere}footer{padding:4px 16px 12px;color:var(--muted);font-size:11px}#error{color:var(--bad);padding:8px 0}
@media(max-width:900px){.metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hist{grid-template-columns:100px 1fr}.stats{grid-column:1/-1;text-align:left}}
@media(max-width:620px){header{padding:9px 10px 6px}main,nav,footer{padding-left:10px;padding-right:10px}.grid2{grid-template-columns:1fr}.full{grid-column:auto}.host-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{padding:8px;margin-bottom:6px}.hist{grid-template-columns:1fr}.spark{display:none}}
@media(max-width:380px){body{font-size:12px}h1{font-size:18px}.host-grid,.metric-grid{gap:4px}.host-grid>div,.metric{padding-left:5px;padding-right:5px}button{padding:5px 8px}}