:root{--page:#f0f4f8;--surface:#fff;--surface-2:#f8fafc;--surface-3:#e2e8f0;--border:#00000014;--border-2:#00000026;--ink:#0f172a;--ink-2:#334155;--ink-3:#64748b;--grid:#e2e8f0;--accent:#2563eb;--accent-dim:#2563eb14;--good:#0ca30c;--warn:#fab219;--serious:#ec835a;--crit:#d03b3b;--mono:ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", monospace}*{box-sizing:border-box}html,body,#root{height:100%}body{color:var(--ink);background:linear-gradient(135deg,#f0f4f8 0%,#e2e8f0 100%);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans CJK HK,Microsoft JhengHei,sans-serif;font-size:13px;line-height:1.45}.app{flex-direction:column;height:100%;display:flex;overflow:hidden}.appbar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:10;background:#ffffffd9;flex:none;align-items:center;gap:16px;height:60px;padding:0 20px;display:flex;box-shadow:0 1px 12px #00000008}.brand{align-items:center;gap:10px;min-width:0;display:flex}.brand .logo{background:var(--accent);color:#fff;border-radius:6px;flex:none;place-items:center;width:26px;height:26px;display:grid}.brand .name{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:650;overflow:hidden}.brand .name span{color:var(--ink-3);font-weight:450}.env-tag{letter-spacing:.8px;color:var(--accent);border:1px solid var(--accent-dim);background:var(--accent-dim);white-space:nowrap;border-radius:4px;padding:2px 6px;font-size:10px;font-weight:650}.appbar-right{align-items:center;gap:14px;margin-left:auto;display:flex}.sync{color:var(--ink-3);white-space:nowrap;align-items:center;gap:7px;font-size:12px;display:flex}.sync .dot{background:var(--ink-3);border-radius:50%;flex:none;width:8px;height:8px}.sync.live .dot{background:var(--good);box-shadow:0 0 0 3px #0ca30c26}.sync.reconnecting .dot{background:var(--warn);animation:1.2s ease-in-out infinite pulse;box-shadow:0 0 0 3px #fab2192e}.sync.offline .dot{background:var(--crit)}.sync .stale-note{font-variant-numeric:tabular-nums}.main{flex-direction:column;flex:1;gap:14px;padding:16px 20px 24px;display:flex;overflow-y:auto}.kpi-strip{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;display:grid}.kpi{background:var(--surface);border:1px solid var(--border);border-radius:10px;min-width:0;padding:12px 14px;box-shadow:0 1px 3px #00000008}.kpi .lbl{color:var(--ink-3);white-space:nowrap;text-overflow:ellipsis;margin-bottom:3px;font-size:11px;overflow:hidden}.kpi .val{letter-spacing:-.2px;font-variant-numeric:tabular-nums;font-size:21px;font-weight:650}.kpi .sub{color:var(--ink-3);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:11px;overflow:hidden}.kpi.skeleton .lbl,.kpi.skeleton .val{color:#0000;background:var(--surface-3);border-radius:4px;animation:1.4s ease-in-out infinite pulse}.grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;gap:14px;display:grid}@media (width<=900px){.grid{grid-template-columns:1fr}}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000008}.card+.card{margin-top:14px}.card-h{border-bottom:1px solid var(--border);justify-content:space-between;align-items:baseline;gap:10px;padding:12px 16px;display:flex}.card-h .t{font-size:13px;font-weight:650}.card-h .sub{color:var(--ink-3);font-size:11.5px}.card-b{padding:14px 16px}.donut-wrap{flex-wrap:wrap;align-items:center;gap:20px;display:flex}.donut{flex:none;width:180px;height:180px;position:relative}.donut svg{display:block;transform:rotate(-90deg)}.donut .centre{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.donut .centre .n{letter-spacing:-.5px;font-variant-numeric:tabular-nums;font-size:30px;font-weight:700}.donut .centre .l{color:var(--ink-3);font-size:11px}.legend{flex-direction:column;flex:1;gap:8px;min-width:160px;display:flex}.legend .row{align-items:center;gap:8px;font-size:12.5px;display:flex}.legend .swatch{border-radius:3px;flex:none;width:10px;height:10px}.legend .zn{color:var(--ink-2);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.legend .ct{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;margin-left:auto;font-size:12px}.zone-row{border-top:1px solid var(--border);align-items:center;gap:12px;padding:10px 16px;display:flex}.zone-row:first-child{border-top:0}.zone-row .zn{color:var(--ink);font-size:12.5px;font-weight:600}.zone-row .zs{color:var(--ink-3);margin-top:1px;font-size:11px}.zone-row .metrics{text-align:right;font-variant-numeric:tabular-nums;margin-left:auto}.zone-row .metrics .n{font-family:var(--mono);font-size:14px;font-weight:650}.zone-row .metrics .l{color:var(--ink-3);font-size:10.5px}.feed{flex-direction:column;display:flex}.feed-row{border-top:1px solid var(--border);grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 16px;display:grid}.feed-row:first-child{border-top:0}.feed-row.fresh{animation:2.5s ease-out flash}.feed-row .ts{font-family:var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:11px}.feed-row .epc{font-family:var(--mono);color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.feed-row .meta{color:var(--ink-3);align-items:center;gap:6px;font-size:11px;display:flex}.chip{color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border-2);white-space:nowrap;border-radius:999px;padding:1px 8px;font-size:10.5px;font-weight:600}.d-empty{text-align:center;color:var(--ink-3);padding:34px 16px;font-size:12.5px;line-height:1.7}.banner{background:var(--surface);border:1px solid var(--warn);color:var(--ink-2);border-radius:10px;padding:12px 16px;font-size:12.5px}.banner b{color:var(--ink)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes flash{0%{background:var(--accent-dim)}to{background:0 0}}