:root{--bg:#0b0d10;--bg-2:#11141a;--bg-3:#1a1f27;--border:#232a35;--fg:#e6e9ef;--fg-dim:#8b94a3;--accent:#4cc2ff;--green:#4ade80;--yellow:#facc15;--red:#f87171;--orange:#fb923c;--purple:#c084fc;--cyan:#22d3ee;--pink:#f472b6}*{box-sizing:border-box}body,html{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px;line-height:1.45;height:100%}body{min-height:100vh}.app{flex-direction:column;height:100vh}.app,header{display:flex}header{align-items:center;flex-wrap:wrap;gap:14px;padding:10px 14px;background:var(--bg-2);border-bottom:1px solid var(--border);flex:0 0 auto}header .filter-group input[type=datetime-local],header .filter-group input[type=text],header .filter-group select{background:var(--bg-3);color:var(--fg);border:1px solid var(--border);border-radius:4px;padding:4px 8px;font:inherit;outline:none;color-scheme:dark}header .filter-group label{font-size:11px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.quick-ranges{display:inline-flex;align-items:center;gap:4px;padding-left:4px;border-left:1px solid var(--border);margin-left:2px}.tz-switch{display:inline-flex;border:1px solid var(--border);border-radius:4px;overflow:hidden}.tz-switch button{background:var(--bg-3);color:var(--fg-dim);border:none;padding:4px 10px;font:inherit;font-size:11px;letter-spacing:.4px;cursor:pointer}.tz-switch button:hover:not(.active){background:#1f2630;color:var(--fg)}.tz-switch button+button{border-left:1px solid var(--border)}.tz-switch button.active{background:rgba(76,194,255,.15);color:var(--accent);cursor:default}header h1{font-size:14px;margin:0;font-weight:600;letter-spacing:.3px}.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-dim)}.dot{width:8px;height:8px;border-radius:50%;background:var(--fg-dim)}.dot.live{background:var(--green);box-shadow:0 0 6px var(--green)}.dot.paused{background:var(--yellow)}.dot.error{background:var(--red)}.spacer{flex:1 1}.metric{font-size:12px;color:var(--fg-dim)}.metric strong{color:var(--fg)}.filters{display:flex;flex-direction:column;gap:16px;padding:14px 16px 16px;background:var(--bg-2);border-bottom:1px solid var(--border);flex:0 0 auto}.filter-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center}.filter-group{display:inline-flex;align-items:center;gap:8px}.filter-group.grow{flex:1 1 200px;min-width:180px}.filter-group.grow input[type=text]{flex:1 1}.filter-divider{width:1px;align-self:stretch;background:var(--border);margin:0 4px}.filters input[type=text],.filters select{background:var(--bg-3);color:var(--fg);border:1px solid var(--border);border-radius:4px;padding:5px 8px;font:inherit;outline:none;min-width:140px}.filters input[type=text]:focus,.filters select:focus{border-color:var(--accent)}.filters label{font-size:11px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.cat-toggles{display:flex;gap:4px;flex-wrap:wrap}.cat-toggle{background:var(--bg-3);color:var(--fg-dim);border:1px solid var(--border);border-radius:999px;padding:3px 10px;font:inherit;font-size:11px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cat-toggle.active{color:var(--fg);border-color:var(--accent);background:rgba(76,194,255,.08)}button.ghost,button.primary{background:var(--bg-3);color:var(--fg);border:1px solid var(--border);border-radius:4px;padding:5px 10px;font:inherit;cursor:pointer}button.primary{border-color:var(--accent);color:var(--accent)}button.ghost:hover,button.primary:hover{background:#1f2630}button.ghost:disabled,button.primary:disabled{opacity:.4;cursor:not-allowed;background:var(--bg-3)}input[type=datetime-local]{background:var(--bg-3);color:var(--fg);border:1px solid var(--border);border-radius:4px;padding:4px 8px;font:inherit;outline:none;color-scheme:dark}input[type=datetime-local]:focus{border-color:var(--accent)}.tabs{display:flex;gap:2px;background:var(--bg-2);border-bottom:1px solid var(--border);padding:0 14px;flex:0 0 auto}.tab{background:transparent;color:var(--fg-dim);border:none;border-bottom:2px solid transparent;padding:8px 14px;font:inherit;font-size:12px;cursor:pointer;letter-spacing:.3px;display:inline-flex;align-items:center;gap:6px}.tab:hover{color:var(--fg)}.tab.active{color:var(--accent);border-bottom-color:var(--accent)}.tab-count{display:inline-block;background:var(--bg-3);color:var(--fg-dim);font-size:10.5px;padding:1px 6px;border-radius:999px}.tab.active .tab-count{color:var(--accent)}.evse-view,.log{flex:1 1 auto;overflow-y:auto;background:var(--bg);font-size:12px}.evse-view{padding:12px}.evse-group{background:var(--bg-2);border:1px solid var(--border);border-radius:6px;margin-bottom:10px;overflow:hidden}.evse-group>summary{list-style:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;align-items:center;gap:14px;padding:10px 14px;background:var(--bg-2)}.evse-group>summary::-webkit-details-marker{display:none}.evse-group>summary:before{content:"▶";color:var(--fg-dim);font-size:9px;width:10px;display:inline-block;transition:transform .12s ease}.evse-group[open]>summary:before{transform:rotate(90deg)}.evse-group:hover>summary{background:#161b23}.evse-body{padding:8px 14px 12px 30px;background:var(--bg);border-top:1px solid var(--border)}.cat-group{margin:6px 0;border:1px solid var(--border);border-radius:4px;background:var(--bg-2)}.cat-group>summary{list-style:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;align-items:center;gap:10px;padding:6px 10px}.cat-group>summary::-webkit-details-marker{display:none}.cat-group>summary:before{content:"▶";color:var(--fg-dim);font-size:9px;width:10px;display:inline-block;transition:transform .12s ease}.cat-group[open]>summary:before{transform:rotate(90deg)}.cat-group:hover>summary{background:#161b23}.signals{background:var(--bg);border-top:1px solid var(--border)}.signal-row{display:grid;grid-template-columns:1.2fr 60px 215px 2fr;grid-gap:10px;gap:10px;padding:4px 12px 4px 24px;align-items:baseline;border-bottom:1px solid #15191f}.signal-row:last-child{border-bottom:none}.signal-row:hover:not(.signal-header){background:#0f131a}.signal-header{background:var(--bg-2);color:var(--fg-dim);font-size:10.5px;text-transform:uppercase;letter-spacing:.4px}.signal-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.signal-count,.signal-time{color:var(--fg-dim)}.signal-payload,.signal-time{white-space:nowrap}.signal-payload{color:var(--fg);overflow:hidden;text-overflow:ellipsis}.pager{display:flex;gap:10px;padding:8px 14px;background:var(--bg-2);border-top:1px solid var(--border);flex:0 0 auto;font-size:12px}.page-nav,.pager{align-items:center}.page-nav{display:inline-flex;gap:4px}.page-btn{background:var(--bg-3);color:var(--fg);border:1px solid var(--border);border-radius:4px;padding:3px 8px;font:inherit;font-size:12px;cursor:pointer;min-width:28px;text-align:center}.page-btn:hover:not(:disabled):not(.active){background:#1f2630}.page-btn.active{background:rgba(76,194,255,.15);border-color:var(--accent);color:var(--accent);cursor:default}.page-btn:disabled:not(.active){opacity:.4;cursor:not-allowed}.page-btn.nav{padding:3px 9px;font-weight:700}.page-ellipsis{color:var(--fg-dim);padding:0 4px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.mode-pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase}.mode-pill.live{background:rgba(74,222,128,.14);color:var(--green)}.mode-pill.browse{background:rgba(250,204,21,.14);color:var(--yellow)}.row{display:grid;grid-template-columns:90px 215px 80px 56px 1fr 1.4fr;grid-gap:10px;gap:10px;padding:4px 14px;border-bottom:1px solid #15191f;align-items:baseline}.row.header-row{position:-webkit-sticky;position:sticky;top:0;background:var(--bg-2);color:var(--fg-dim);font-size:11px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border);z-index:1}.row:hover:not(.header-row){background:#0f131a}.col-id,.col-time{color:var(--fg-dim)}.col-time{white-space:nowrap}.badge{display:inline-block;padding:1px 6px;border-radius:3px;font-size:10.5px;font-weight:600;letter-spacing:.3px;background:var(--bg-3);color:var(--fg-dim)}.badge.evse{background:rgba(76,194,255,.12);color:var(--accent)}.badge.dispenser{background:rgba(244,114,182,.14);color:var(--pink);font-size:11.5px;padding:2px 8px}.badge.cat-Session{background:rgba(74,222,128,.12);color:var(--green)}.badge.cat-Measurement{background:rgba(34,211,238,.12);color:var(--cyan)}.badge.cat-Thermal{background:rgba(251,146,60,.14);color:var(--orange)}.badge.cat-IMD{background:rgba(192,132,252,.14);color:var(--purple)}.badge.cat-Fault{background:rgba(248,113,113,.14);color:var(--red)}.badge.cat-Status{background:rgba(250,204,21,.12);color:var(--yellow)}.badge.cat-Command{background:rgba(244,114,182,.12);color:var(--pink)}.badge.cat-Comms{background:rgba(76,194,255,.1);color:var(--accent)}.badge.cat-Config{background:rgba(139,148,163,.18);color:var(--fg-dim)}.badge.cat-Dispenser{background:rgba(217,70,239,.14);color:#d946ef}.badge.cat-Rectifier{background:rgba(129,140,248,.16);color:#818cf8}.badge.cat-QCB{background:rgba(163,230,53,.14);color:#a3e635}.badge.cat-Infrastructure{background:rgba(45,212,191,.14);color:#2dd4bf}.badge.cat-Other{background:var(--bg-3);color:var(--fg-dim)}.col-payload,.col-topic{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.col-payload,.empty{color:var(--fg-dim)}.empty{padding:40px;text-align:center}.empty.small{padding:14px;text-align:left;font-size:11.5px}.volume-view{font-size:12px}.volume-summary{display:flex;gap:24px;margin-bottom:16px;padding:14px 16px;background:var(--bg-2);border:1px solid var(--border);border-radius:6px}.volume-stat-label{font-size:11px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.volume-stat-value{font-size:22px;font-weight:600;color:var(--fg)}.volume-table{background:var(--bg-2);border:1px solid var(--border);border-radius:6px;overflow:hidden}.volume-row{display:grid;grid-template-columns:60px 100px 60px 1fr;grid-gap:12px;gap:12px;padding:5px 14px;align-items:baseline;border-bottom:1px solid #15191f}.volume-row:last-child{border-bottom:none}.volume-row:hover:not(.volume-header-row){background:#161b23}.volume-header-row{background:var(--bg-3);font-size:11px;text-transform:uppercase;letter-spacing:.4px;position:-webkit-sticky;position:sticky;top:0;z-index:1}.volume-header-row,.volume-rank{color:var(--fg-dim)}.volume-count{color:var(--accent);font-weight:600}.volume-pct{color:var(--fg-dim)}.volume-topic{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dispenser-group>.evse-body{padding-left:22px}.dispenser-group .evse-group{background:var(--bg-3)}.error-banner{padding:8px 14px;background:rgba(248,113,113,.12);color:var(--red);border-bottom:1px solid var(--border);font-size:12px}