:root { --bg:#f4f4f2; --card:#fff; --line:#e6e6e2; --text:#151515; --muted:#77776f; --bar:#ebebe7; color-scheme:light;
        --c1:#b79f6a; --c2:#7fa391; --c3:#7b8fb0; --c4:#a58bad; }
:root[data-theme="dark"] { --bg:#0c0c0c; --card:#151515; --line:#262626; --text:#ececea; --muted:#8d8d86; --bar:#242424; color-scheme:dark;
        --c1:#c9b27c; --c2:#8fb3a0; --c3:#8da0c2; --c4:#b79fbf; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0c0c0c; --card:#151515; --line:#262626; --text:#ececea; --muted:#8d8d86; --bar:#242424; color-scheme:dark;
        --c1:#c9b27c; --c2:#8fb3a0; --c3:#8da0c2; --c4:#b79fbf; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:13px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans Thai",Roboto,sans-serif;
       font-variant-numeric:tabular-nums; padding-block:clamp(16px,4vw,44px); padding-inline:16px; }
main { max-width:900px; margin:0 auto; }
a { color:inherit; }
.bar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:clamp(18px,4vw,34px); }
.brand { font-weight:600; font-size:14px; } .brand span { color:var(--muted); font-weight:400; }
.btns { display:flex; gap:8px; }
.btn { background:transparent; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:5px 12px; font:inherit; font-size:12px; cursor:pointer; text-decoration:none; }
.btn:hover { border-color:var(--muted); }
.hero { display:flex; gap:12px; align-items:center; margin-bottom:22px; padding:14px 18px; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--text); border-radius:10px; }
.hero.partial, .hero.major, .hero.stale { border-left-color:var(--muted); }
.pulse { width:12px; height:12px; border-radius:50%; background:var(--text); flex:none; animation:pulse 2.4s infinite; }
.hero.partial .pulse, .hero.major .pulse, .hero.stale .pulse, a.go.bad .pulse { background:transparent; border:2px solid var(--text); animation:none; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb,var(--text) 40%,transparent); } 70%,100% { box-shadow:0 0 0 9px transparent; } }
@media (prefers-reduced-motion: reduce) { .pulse { animation:none; } }
h1 { margin:0; font-size:clamp(17px,3vw,20px); font-weight:600; letter-spacing:-.01em; line-height:1.25; }
.sub, .muted { color:var(--muted); font-size:12px; }
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:12px; }
.p { grid-column:1/-1; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; min-width:0; }
@media (min-width:780px) { .p.cpu { grid-column:span 7; } .p.mem { grid-column:span 5; } .p.sto { grid-column:span 5; } .stack { grid-column:span 7; } }
.stack { grid-column:1/-1; display:grid; gap:12px; }
.stack .p { grid-column:auto; }
.ph { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:12px; }
.lbl { color:var(--muted); font-size:11px; letter-spacing:.09em; text-transform:uppercase; font-weight:600; }
.chip { font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:0 9px; white-space:nowrap; }
.big { font-size:clamp(20px,3vw,24px); font-weight:600; letter-spacing:-.02em; line-height:1.2; } .big small { font-size:12px; font-weight:400; color:var(--muted); letter-spacing:0; margin-left:4px; }
.row { display:flex; gap:20px; align-items:flex-end; flex-wrap:wrap; }
.cores { display:flex; gap:3px; height:52px; margin-top:14px; }
.core { flex:1; min-width:0; background:var(--bar); border-radius:3px; display:flex; align-items:flex-end; overflow:hidden; }
.core i { display:block; width:100%; background:var(--text); opacity:.8; min-height:2px; }
.vms .cores { height:32px; margin-top:6px; }
.meter { height:5px; background:var(--bar); border-radius:3px; margin-top:8px; overflow:hidden; } .meter i { display:block; height:100%; background:var(--text); opacity:.8; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px 20px; }
.stat .v { font-size:15px; font-weight:600; } .stat .v small { font-size:11px; color:var(--muted); font-weight:400; margin-left:3px; }
svg.line { width:100%; height:34px; display:block; margin-top:12px; } svg.line path { fill:none; stroke:var(--muted); stroke-width:1.3; vector-effect:non-scaling-stroke; }
/* storage: vertical tank, the only coloured element on the page */
.vwrap { display:flex; gap:18px; margin-top:14px; }
.vbar { width:38px; height:236px; display:flex; flex-direction:column-reverse; gap:2px; background:var(--bar); border-radius:8px; overflow:hidden; flex:none; }
.vbar i { display:block; width:100%; min-height:2px; }
.vlist { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; }
.vrow { display:grid; grid-template-columns:10px 1fr auto; gap:10px; align-items:center; }
.vrow b { width:10px; height:10px; border-radius:3px; display:block; } .vrow em { color:var(--muted); font-style:normal; font-size:12px; white-space:nowrap; }
.c0 { background:var(--muted); } .c1 { background:var(--c1); } .c2 { background:var(--c2); } .c3 { background:var(--c3); } .c4 { background:var(--c4); } .cf { background:transparent; border:1px solid var(--muted); }
.vms { grid-column:1/-1; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:12px; }
.vms .p { grid-column:auto; }
.vh { display:flex; justify-content:space-between; gap:10px; margin-bottom:12px; } .vh b { font-size:14px; display:block; }
.vh .chip { align-self:flex-start; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--text); margin-right:7px; } .dot.down { background:transparent; border:1.5px solid var(--text); }
.vms .stats { grid-template-columns:1.5fr 1fr 1fr; gap:12px 14px; margin-bottom:4px; }
.vms .p > .lbl { display:block; margin-top:14px; }
.sec { margin:26px 0 10px; }
.inc { padding:0; overflow:hidden; } .inc > div, .inc details { padding:11px 18px; border-top:1px solid var(--line); } .inc > :first-child { border-top:0; }
.inc summary { display:flex; justify-content:space-between; gap:12px; cursor:pointer; } .inc ul { margin:8px 0 0; padding-left:18px; color:var(--muted); font-size:12px; }
.tag { border:1px solid var(--text); border-radius:5px; font-size:10px; padding:0 6px; margin-left:8px; letter-spacing:.08em; }
footer { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:24px; color:var(--muted); font-size:11px; }
.links { display:flex; flex-wrap:wrap; gap:8px; } .links a { padding:5px 12px; border:1px solid var(--line); border-radius:999px; text-decoration:none; font-size:13px; } .links a:hover { border-color:var(--text); }
a.go { display:flex; align-items:center; gap:12px; text-decoration:none; } a.go:hover { border-color:var(--muted); } a.go .arrow { margin-left:auto; color:var(--muted); }
.hint { margin:0; color:var(--muted); }
.narrow { max-width:640px; } .lede { margin:6px 0 22px; }
[hidden] { display:none !important; }
@media (min-width:780px) { .p.cpu { grid-column:span 7; } .p.mem { grid-column:span 5; } .p.sto { grid-column:span 5; } .stack { grid-column:span 7; } }
@media (min-width:780px) { .stack { grid-auto-rows:1fr; } }
.chart { margin-top:14px; } .chart svg { width:100%; height:96px; display:block; }
.chart .grid { stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; }
.chart .area { fill:var(--text); opacity:.07; stroke:none; }
.chart .l1 { fill:none; stroke:var(--text); stroke-width:1.6; vector-effect:non-scaling-stroke; }
.chart .l2 { fill:none; stroke:var(--muted); stroke-width:1.2; stroke-dasharray:3 3; vector-effect:non-scaling-stroke; }
.ax { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:11px; margin-top:6px; }
.key span::before { content:""; display:inline-block; width:16px; margin-right:6px; vertical-align:middle; border-top:1.6px solid var(--text); }
.key span + span { margin-left:16px; } .key span + span::before { border-top:1.2px dashed var(--muted); }
.pstats { margin-top:16px; }
.note { margin:12px 0 0; color:var(--muted); font-size:11px; }