:root { --bg:#f5f7fa; --card:#fff; --ink:#1f2933; --muted:#616e7c; --line:#d9e2ec;
        --ok:#2b8a3e; --bad:#c92a2a; --warn:#e67700; --accent:#1864ab; }
* { box-sizing: border-box; }
body { margin:0; font-family:"Microsoft JhengHei","Noto Sans TC",sans-serif; background:var(--bg); color:var(--ink); }
header.top { padding:12px 20px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
header.top h1 { font-size:20px; margin:0; }
header.top nav { display:flex; gap:4px; }
header.top nav a { color:var(--muted); text-decoration:none; padding:6px 12px; border-radius:6px; }
header.top nav a.on { background:#e7f5ff; color:var(--accent); font-weight:700; }
.pill { font-size:13px; padding:3px 10px; border-radius:999px; background:#e9ecef; color:var(--muted); }
.pill:empty { display:none; }
.pill.ok { background:#d3f9d8; color:var(--ok); } .pill.bad { background:#ffe3e3; color:var(--bad); }
main { padding:16px 20px; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(400px,1fr)); gap:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.card h2 { font-size:17px; margin:0 0 2px; display:flex; justify-content:space-between; align-items:center; }
.sub { font-size:12px; color:var(--muted); margin-bottom:10px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.m { background:var(--bg); border-radius:8px; padding:6px 8px; }
.m .k { font-size:12px; color:var(--muted); }
.m .v { font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.m .u { font-size:12px; color:var(--muted); margin-left:2px; font-weight:400; }
canvas.spark { width:100%; height:90px; margin-top:10px; }
.stale { color:var(--warn); font-weight:700; }
.empty { color:var(--muted); padding:30px 0; }
form.query { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:end; background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 16px; }
form.query label { display:flex; flex-direction:column; font-size:13px; color:var(--muted); gap:4px; }
form.query select, form.query input { font:inherit; padding:5px 8px; border:1px solid var(--line); border-radius:6px; }
form.query button { font:inherit; padding:6px 16px; border:0; border-radius:6px; background:var(--accent); color:#fff; cursor:pointer; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:14px 0; }
.stats .m { background:#fff; border:1px solid var(--line); }
#chart { width:100%; height:380px; background:#fff; border:1px solid var(--line); border-radius:10px; }
table.data { width:100%; border-collapse:collapse; background:#fff; margin-top:14px; font-size:13px; }
table.data th, table.data td { border-bottom:1px solid var(--line); padding:5px 8px; text-align:right; font-variant-numeric:tabular-nums; }
table.data th:first-child, table.data td:first-child { text-align:left; }
#log { font:12px Consolas,monospace; color:var(--muted); padding:12px 0; white-space:pre-wrap; }