:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#141414;--panel:#1c1c1c;--line:#2e2e2e;--text:#e8e8e6;--muted:#9a9a96;--ok:#5dcaa5;--warn:#ef9f27;--bad:#e24b4a;--up:#888780;--focus:#85b7eb}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font:13px/1.4 -apple-system,Helvetica Neue,sans-serif}.app{flex-direction:column;height:100vh;display:flex}header{border-bottom:1px solid var(--line);align-items:center;gap:16px;padding:12px 20px;display:flex}header h1{margin:0;font-size:15px;font-weight:500}.filter,.timeline{color:var(--muted);align-items:center;gap:6px;display:flex}.filter select,.filter input{color:var(--text);font:inherit;background:#2a2a2a;border:1px solid #3a3a3a;border-radius:6px;padding:3px 8px}.filter input{width:150px}.filter input.active{border-color:var(--focus)}.filter button{color:var(--muted);cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:15px}.timeline input{width:180px;accent-color:var(--focus)}.live{color:var(--ok);font:inherit;cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;min-width:118px;padding:0;display:flex}.live i{background:var(--ok);border-radius:50%;width:8px;height:8px;animation:1.2s infinite pulse}.live.past{color:var(--warn)}.live.past i{background:var(--warn);animation:none}@keyframes pulse{50%{opacity:.3}}.stats{color:var(--muted);gap:20px;margin-left:auto;display:flex}.stats b{color:var(--text);font-weight:500}.banner{color:#f7c1c1;background:#3a1d1d;padding:6px 20px}main{flex:1;min-height:0;position:relative}.topology,.graph{width:100%;height:100%}.graph{cursor:grab;touch-action:none;background-image:radial-gradient(#262626 1px,#0000 1px);background-size:18px 18px;display:block}.graph text{fill:var(--text);font-size:11px}.graph text.muted{fill:var(--muted);font-size:10px}.environment{fill:#1f1f1f;stroke:#333}.pill{fill:#3a3a3a}.environment.sel{stroke:var(--focus);stroke-width:2px}.mesh-label{cursor:pointer}.mesh-label:hover .pill{fill:#4a4a4a}.mesh-label.sel .pill{stroke:var(--focus);stroke-width:2px}.node{cursor:pointer;transition:opacity .2s}.node .box{fill:#252525;stroke:#4a4a4a}.node.sel .box{stroke:var(--focus);stroke-width:2px}.node.dim{opacity:.3}.relay .box{fill:#2b2b2b;stroke:#555}.relay .unit{fill:#1e1e1e;stroke:#4a4a4a}.relay .vent{stroke:#444}.relay .led{animation:1.6s infinite blink}.relay .led-0{fill:var(--ok)}.relay .led-1{fill:var(--focus);animation-delay:.5s}.relay .led-off{fill:#555}.relay.draining .box{stroke:var(--warn);stroke-dasharray:4 3}.relay.draining .led-0{fill:var(--warn)}.graph text.draining-label{fill:var(--warn);font-size:11px;font-weight:600}@keyframes blink{50%{opacity:.35}}.badge{fill:var(--text)}.graph text.badge-text{fill:var(--bg);font-weight:500}.flow{fill:none;stroke-width:1.6px;stroke-dasharray:5 5;pointer-events:none;transition:opacity .2s;animation:linear infinite flow}.flow.up{stroke:var(--up)}.flow.ok{stroke:var(--ok)}.flow.warn{stroke:var(--warn)}.flow.bad{stroke:var(--bad)}.flow.focus{stroke:var(--focus);stroke-width:2.4px}.flow.sel{stroke-width:3.2px}.flow.dim{opacity:.1}@keyframes flow{to{stroke-dashoffset:-20px}}.arrow-focus{fill:var(--focus)}.arrow-up{fill:var(--up)}.arrow-ok{fill:var(--ok)}.arrow-warn{fill:var(--warn)}.arrow-bad{fill:var(--bad)}.hit{fill:none;stroke:#0000;stroke-width:14px;cursor:pointer}.zoom{background:var(--panel);border:1px solid #3a3a3a;border-radius:6px;flex-direction:column;display:flex;position:absolute;top:12px;right:16px;overflow:hidden}.zoom button{width:30px;height:28px;color:var(--text);cursor:pointer;background:0 0;border:none;font-size:15px}.zoom button+button{border-top:1px solid #3a3a3a}.zoom button:hover{background:#2a2a2a}.legend{color:var(--muted);pointer-events:none;flex-direction:column;gap:4px;font-size:11px;display:flex;position:absolute;left:16px}.legend span:before{content:"";vertical-align:middle;border-top:2px dashed;width:18px;height:0;margin-right:6px;display:inline-block}.legend .focus{color:var(--focus)}.legend .up{color:var(--up)}.legend .ok{color:var(--ok)}.legend .warn{color:var(--warn)}.legend .bad{color:var(--bad)}.drawer{background:#141414f7;border-top:1px solid #3a3a3a;flex-direction:column;display:flex;position:absolute;bottom:0;left:0;right:0}.drawer-grip{cursor:ns-resize;flex:none;justify-content:center;align-items:center;height:8px;display:flex}.drawer-grip:before{content:"";background:#4a4a4a;border-radius:2px;width:40px;height:3px}.drawer-grip:hover:before{background:var(--focus)}.drawer-head{border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:8px 16px;display:flex}.drawer-head small{color:var(--muted)}.drawer-head .error{color:var(--bad)}.ranges{gap:2px;margin-left:auto;display:flex}.ranges button,.drawer-head .close{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;padding:2px 8px}.ranges button.on{color:var(--text);background:#2a2a2a;border-color:#3a3a3a}.drawer-head .close{font-size:16px}.drawer-body{flex:1;min-height:0;display:flex}.details{border-right:1px solid var(--line);flex:none;width:140px;padding:10px 16px;overflow-y:auto}.tabs{flex-direction:column;gap:2px;display:flex}.tabs button{color:var(--muted);font:inherit;text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;padding:5px 10px}.tabs button:hover{color:var(--text)}.tabs button.on{color:var(--text);background:#2a2a2a;border-color:#3a3a3a}.note{color:var(--muted);margin-bottom:4px;font-size:11px}.charts{scrollbar-gutter:stable;flex:1;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));align-content:start;gap:10px;padding:10px 16px 14px;display:grid;overflow-y:auto}.chart{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px 6px}.chart-head{justify-content:space-between;margin-bottom:2px;font-weight:500;display:flex}.chart-head small{color:var(--muted);font-weight:400}.plot{width:100%;height:auto;display:block}.plot .grid{stroke:var(--line)}.plot .axis{fill:var(--muted);font-size:9px}.plot .cross{stroke:var(--muted);stroke-dasharray:2 2}.plot .hover{fill:#0000;cursor:pointer}.plot .mark{stroke:var(--warn);stroke-width:1.5px}.timeline .ranges{margin-left:0}.timeline .step{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;padding:2px 6px}.timeline .step:hover{color:var(--text);border-color:#3a3a3a}.chart-legend{color:var(--muted);flex-wrap:wrap;gap:4px 12px;font-size:11px;display:flex}.chart-legend i{border-radius:2px;width:8px;height:8px;margin-right:5px;display:inline-block}.chart-legend b{color:var(--text);margin-left:6px;font-weight:500}.panel-toggle{color:var(--text);font:inherit;cursor:pointer;background:#2a2a2a;border:1px solid #3a3a3a;border-radius:6px;padding:3px 10px}.panel-toggle.on{border-color:var(--focus)}.namespace-panel{z-index:2;background:#141414f7;border-right:1px solid #3a3a3a;flex-direction:column;display:flex;position:absolute;top:0;bottom:0;left:0}.panel-head{justify-content:space-between;align-items:center;padding:10px 16px 4px;display:flex}.panel-head .close{color:var(--muted);cursor:pointer;background:0 0;border:none;font-size:16px}.panel-counts{color:var(--muted);padding:0 16px 8px}.panel-counts .error{color:var(--bad)}.panel-search{color:var(--text);font:inherit;background:#2a2a2a;border:1px solid #3a3a3a;border-radius:6px;margin:0 16px 8px;padding:4px 8px}.panel-rows{flex:1;padding:0 8px 12px;overflow-y:auto}.panel-rows .note{padding:8px}.namespace-row{text-align:left;width:100%;color:var(--text);font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;grid-template-columns:1fr auto;gap:2px 8px;padding:8px;display:grid}.namespace-row:hover{background:#232323;border-color:#3a3a3a}.namespace-name{overflow-wrap:anywhere;font-weight:500}.namespace-app,.namespace-tracks,.namespace-meta,.namespace-time{color:var(--muted);font-size:11px}.namespace-app,.namespace-time{text-align:right}.namespace-time.live-now{color:var(--ok)}