:root{
  --bg:#0b0f16; --panel:#121a25; --panel2:#0f1620; --line:#1e2b3c; --tx:#e6edf5; --mut:#8ba1b8;
  --acc:#22d3ee; --ok:#34d399; --warn:#fbbf24; --err:#f87171; --pur:#a78bfa; --blue:#60a5fa;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);
  font:13px/1.5 -apple-system,"SF Pro Text","PingFang SC","Helvetica Neue",Arial,sans-serif}
h1{margin:0;font-size:16px;font-weight:600;letter-spacing:.2px}
h2{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--tx);display:flex;align-items:center;gap:8px}
.hint{color:var(--mut);font-weight:400;font-size:11.5px}
.top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:12px 16px;background:linear-gradient(180deg,#131c28,#0e151f);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:10px;min-width:250px}
.sub{color:var(--mut);font-size:11.5px;margin-top:2px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--mut);box-shadow:0 0 0 4px #ffffff0d}
.dot.on{background:var(--ok);box-shadow:0 0 0 4px #34d39922}
.dot.off{background:var(--err);box-shadow:0 0 0 4px #f8717122}
.headline{display:flex;gap:16px;flex-wrap:wrap;flex:1}
.hl{background:#0d141d;border:1px solid var(--line);border-radius:8px;padding:6px 10px;min-width:104px}
.hl b{display:block;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.hl span{color:var(--mut);font-size:10.5px}
.ctrl{display:flex;align-items:center;gap:8px}
.ctrl button{background:#17222f;color:var(--tx);border:1px solid var(--line);border-radius:7px;padding:6px 10px;font-size:12px;cursor:pointer}
.ctrl button:hover{border-color:var(--acc)}
.ts{color:var(--mut);font-size:11.5px;font-variant-numeric:tabular-nums}
.panel{margin:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.gauges{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.gaug{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 8px 8px;text-align:center}
/* 横向柱状条（替代大圆环）：标签 + 数值在上，条在中间，说明在下 */
.hbar{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.hbar-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.hbar-name{font-size:12px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar-val{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.hbar-val i{font-style:normal;color:var(--mut);font-size:10.5px;font-weight:500;margin-left:2px}
.hbar-track{height:10px;border-radius:5px;background:#1b2836;overflow:hidden}
.hbar-fill{height:100%;border-radius:5px;transition:width .35s ease}
.hbar-sub{color:var(--mut);font-size:10.5px;min-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gwrap{position:relative;width:112px;height:112px;margin:0 auto}
.gwrap svg{transform:rotate(-90deg)}
.gval{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gval b{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.gval i{font-style:normal;color:var(--mut);font-size:10.5px;margin-top:2px}
.gname{margin-top:6px;font-size:12px;font-weight:600}
.gsub{color:var(--mut);font-size:10.5px;min-height:14px}
/* GPU 表盘：上排 GPU0 / 下排 GPU1，每排三只并排；左侧竖条为卡名 */
.gpu-rows{display:flex;flex-direction:column;gap:12px}
.gpu-row{display:flex;align-items:center;gap:14px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.rowtag{flex:0 0 170px;font-size:12.5px;font-weight:700;line-height:1.4;border-right:1px solid var(--line);padding-right:12px}
.rowtag .gdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.rowtag small{display:block;color:var(--mut);font-weight:400;font-size:10.5px;margin-top:2px}
.gpu-gauges{flex:1;grid-template-columns:repeat(3,minmax(0,1fr))}
/* 模型推理区：每行可能 3~4 个条，按宽度自适应列数（2026-11-07 修复堆叠） */
#gauges-model .gpu-gauges{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.host-gauges{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){
  .gpu-row{flex-direction:column;align-items:stretch}
  .rowtag{flex:none;border-right:0;border-bottom:1px solid var(--line);padding:0 0 8px}
  .gpu-gauges,.host-gauges{grid-template-columns:1fr}
}
.charts{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:12px}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 10px 4px}
.ct{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:600;gap:8px;flex-wrap:wrap}
.ct em{font-style:normal;color:var(--mut);font-weight:400;font-size:11px;font-variant-numeric:tabular-nums}
.chart{position:relative}
.chart svg{display:block;width:100%;height:132px}
.tip{position:absolute;pointer-events:none;background:#0b1119f2;border:1px solid var(--acc);border-radius:6px;
  padding:4px 7px;font-size:11px;white-space:nowrap;display:none;z-index:3;font-variant-numeric:tabular-nums}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px}
.tbl{width:100%;border-collapse:collapse;font-size:12px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tbl th{text-align:left;color:var(--mut);font-weight:600;font-size:11px;padding:6px 9px;background:#0d141d;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:5px 9px;border-bottom:1px solid #172231;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr:last-child td{border-bottom:none}
.tbl td.k{color:var(--mut)}
.tbl td.v{font-weight:600}
.scroll{max-height:340px;overflow:auto}
.badge{display:inline-block;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:600;border:1px solid}
.b-ok{color:var(--ok);border-color:#34d39955;background:#34d39912}
.b-warn{color:var(--warn);border-color:#fbbf2455;background:#fbbf2412}
.b-err{color:var(--err);border-color:#f8717155;background:#f8717112}
.b-mut{color:var(--mut);border-color:#8ba1b855;background:#8ba1b80f}
footer{color:var(--mut);font-size:11px;text-align:center;padding:8px 0 22px}
.bar{height:6px;border-radius:4px;background:#1b2836;overflow:hidden;min-width:60px}
.bar>i{display:block;height:100%;border-radius:4px}
@media(max-width:700px){.charts{grid-template-columns:1fr}.headline{gap:8px}.hl{min-width:88px;padding:5px 8px}.hl b{font-size:15px}}