:root{color-scheme:light;--bg:#f4f4f2;--surface:#fcfcfb;--border:#e2e1dc;--text:#0b0b0b;
--text2:#52514e;--muted:#6b6a66;--series:#2a78d6;--track:#e8e7e2;--good:#0ca30c;
--good-text:#006300;--warn:#fab219;--warn-text:#7a5200;--crit:#d03b3b;--crit-text:#a8201f;
--link:#1c5cab}
@media (prefers-color-scheme:dark){:root{color-scheme:dark;--bg:#121211;--surface:#1a1a19;
--border:#2f2f2c;--text:#f0efec;--text2:#c3c2b7;--muted:#9c9b94;--series:#3987e5;
--track:#2f2f2c;--good-text:#4cc94c;--warn-text:#fab219;--crit-text:#ef7b7b;--link:#86b6ef}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 system-ui,-apple-system,
"Segoe UI",Roboto,sans-serif}
main{max-width:1180px;margin:0 auto;padding:16px}
main.narrow{max-width:420px;padding-top:12vh}
h1{font-size:1.35rem;margin:0 0 4px}h2{font-size:1.05rem;margin:0 0 10px}
h2.inline{display:inline;margin:0}
a{color:var(--link)}
.muted{color:var(--muted);font-weight:normal}.small{font-size:.82rem}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
margin-bottom:12px}
section{background:var(--surface);border:1px solid var(--border);border-radius:10px;
padding:14px 16px;margin:0 0 14px}
.overall{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:1.05rem;
border-left-width:6px}
.overall-good{border-left-color:var(--good)}.overall-warning{border-left-color:var(--warn)}
.overall-critical{border-left-color:var(--crit)}.overall-detail{color:var(--text2)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;
background:none;border:0;padding:0}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:10px;
padding:12px 14px}
.tile-label{color:var(--text2);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.tile-value{font-size:1.45rem;font-weight:650;margin:4px 0;font-variant-numeric:tabular-nums}
.tile-sub{color:var(--muted);font-size:.8rem}
.meter{height:8px;background:var(--track);border-radius:4px;overflow:hidden;margin:6px 0}
.meter-fill{height:100%;background:var(--series);border-radius:4px}
.w0{width:0%}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}
.status{display:inline-flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap}
.status-icon{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
font-size:.75rem;font-weight:800;color:#fff}
.status-good{color:var(--good-text)}.status-good .status-icon{background:var(--good)}
.status-warning{color:var(--warn-text)}.status-warning .status-icon{background:var(--warn);
color:#111}
.status-critical{color:var(--crit-text)}.status-critical .status-icon{background:var(--crit)}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.checks li{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
.deal{font-size:.75rem;font-weight:700;padding:1px 6px;border-radius:4px;
border:1px solid var(--series);color:var(--text)}
.code{font:600 .78rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text2);
background:var(--track);padding:1px 5px;border-radius:4px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;color:var(--text2);font-weight:600;font-size:.78rem;text-transform:uppercase;
letter-spacing:.03em;border-bottom:1px solid var(--border);padding:6px 8px;white-space:nowrap}
td{border-bottom:1px solid var(--border);padding:7px 8px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
details{border-top:1px solid var(--border);padding:8px 0}
section>details:first-child{border-top:0;padding-top:0}
summary{cursor:pointer;padding:4px 0}
.spark{display:block;overflow:visible}
.spark-line{fill:none;stroke:var(--series);stroke-width:2;stroke-linejoin:round;
stroke-linecap:round}
.spark-end{fill:var(--series);stroke:var(--surface);stroke-width:2}
.spark-hit{fill:transparent}.spark-hit:hover{fill:var(--series);fill-opacity:.25}
.settings{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0}
.settings dt{color:var(--text2);font-weight:600}.settings dd{margin:0}
form{margin:0}
.login label{display:block;font-weight:600;margin:18px 0 6px}
.login input{width:100%;font-size:1rem;padding:10px 12px;border:1px solid var(--border);
border-radius:8px;background:var(--surface);color:var(--text)}
.login button{margin-top:14px;width:100%;padding:10px;font-size:1rem;font-weight:600;
border:0;border-radius:8px;background:var(--series);color:#fff;cursor:pointer}
button.link{background:none;border:0;color:var(--link);cursor:pointer;font:inherit;padding:4px}
.form-error{color:var(--crit-text);font-weight:600}
a.go{white-space:nowrap;font-weight:600;text-decoration:none;border:1px solid var(--border);
border-radius:6px;padding:3px 8px;display:inline-block}
a.go:hover{border-color:var(--series)}
.cheaper{color:var(--good-text);font-weight:700}.dearer{color:var(--text2);font-weight:600}
@media (max-width:640px){.settings{grid-template-columns:1fr}.settings dd{margin-bottom:6px}
.tile-value{font-size:1.25rem}}