:root { --ok:#10b981; --stale:#f59e0b; --down:#ef4444; --bg:#0b1020; --card:#141a2a; --muted:#94a3b8; --fg:#e2e8f0; --chip:#1f2937; }
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter;background:var(--bg);color:var(--fg);}
header{padding:16px 20px;border-bottom:1px solid #1f2937;display:flex;align-items:center;gap:14px;}
header h1{margin:0;font-size:18px;font-weight:600}
header .meta{color:var(--muted);font-size:12px}
main{padding:16px 20px;display:grid;gap:16px;}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
.kpi{background:var(--card);border:1px solid #1f2937;border-radius:12px;padding:12px;}
.kpi .label{color:var(--muted);font-size:12px}
.kpi .value{font-weight:700;font-size:22px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
input,select{background:#0f1629;color:var(--fg);border:1px solid #1f2937;border-radius:8px;padding:6px 10px;font-size:13px;outline:none}
.right{margin-left:auto;color:var(--muted);font-size:12px}
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));}
.card{background:var(--card);border:1px solid #1f2937;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.row{display:flex;justify-content:space-between;gap:8px;align-items:center}
.id{font-weight:600;font-size:13px;word-break:break-all}
.addr,.muted{font-size:12px;color:var(--muted);word-break:break-all}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--chip);color:#cbd5e1;font-size:12px;padding:2px 8px;border-radius:999px}
.status{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12px}
.dot{width:9px;height:9px;border-radius:999px;display:inline-block}
.dot.ok{background:var(--ok)} .dot.stale{background:var(--stale)} .dot.down{background:var(--down)}
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid #1f2937;border-radius:12px;overflow:hidden}
table tr:last-child td{border-bottom:none}
th,td{padding:8px 10px;text-align:left;font-size:13px;border-bottom:1px solid #1f2937}
th{color:#cbd5e1;background:#0f1629;position:sticky;top:0}
.footer{color:var(--muted);font-size:12px;padding:6px 0}
.metrics{display:flex;flex-wrap:wrap;gap:6px}

/* vLLM metrics section */
.vllm-section{margin-top:8px;padding-top:8px;border-top:1px solid #1f2937}
.vllm-header{font-size:11px;font-weight:600;color:#60a5fa;margin-bottom:6px;text-transform:uppercase;letter-spacing:0.5px}
.vllm-metrics{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.vllm-metrics .chip{background:#1e3a5f;color:#93c5fd}
.vllm-instances{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.vllm-instance{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:4px 8px;background:#0f1629;border-radius:6px;font-size:11px}
.inst-name{font-weight:600;color:#93c5fd;min-width:80px}
.inst-metric{color:var(--muted)}

/* vLLM metrics table toggle & scroll */
.toggle-btn{font-size:12px;color:var(--muted);cursor:pointer;user-select:none}
.toggle-btn:hover{color:var(--fg)}
#vllm-table-wrap{overflow-x:auto}
#vllm-table-wrap.collapsed{display:none}
#vllm-table-wrap table{min-width:1200px}