.connection{align-items:center;gap:var(--space-2) var(--space-3);flex-wrap:wrap;display:flex}.connection__head{align-items:center;gap:var(--space-2);display:flex}.connection__status{align-items:center;gap:var(--space-2);min-height:32px;padding:var(--space-1) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--dot-soft,var(--surface));color:var(--text);font-size:var(--text-sm);font-weight:600;line-height:1.35;display:inline-flex}.connection__dot{background:var(--dot-color,var(--status-connecting));border-radius:50%;flex:none;width:8px;height:8px;position:relative}.connection--live{--dot-color:var(--status-live);--dot-soft:#22d38a1a}.connection--paused{--dot-color:var(--status-paused)}.connection--reconnecting{--dot-color:var(--status-reconnecting);--dot-soft:var(--warning-soft)}.connection--error{--dot-color:var(--status-error);--dot-soft:var(--critical-soft)}.connection--live .connection__dot:after{content:"";background:var(--dot-color);animation:ping 1.8s var(--ease) infinite;border-radius:50%;position:absolute;inset:0}.connection__paused{padding:2px var(--space-2);background:var(--accent-soft);color:var(--accent);font-size:var(--text-xs);font-variant-numeric:tabular-nums;border-radius:4px;font-weight:600}.connection__counters{gap:var(--space-1);color:var(--text-faint);font-size:var(--text-xs);grid-template-columns:repeat(3,auto);margin:0;padding:0;list-style:none;display:grid}.connection__counters li{padding:6px var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);white-space:nowrap;align-items:baseline;gap:5px;display:flex}.connection__counters strong{color:var(--text);font-size:var(--text-sm);font-variant-numeric:tabular-nums;order:-1;font-weight:700}@keyframes ping{0%{opacity:.6;transform:scale(1)}80%,to{opacity:0;transform:scale(2.6)}}.controls{align-items:center;gap:var(--space-2) var(--space-4);flex-wrap:wrap;flex:1;min-width:0;display:flex}.controls__group{align-items:center;gap:var(--space-2);border:0;min-width:0;margin:0;padding:0;display:flex}.controls__group>.micro-label{float:left;white-space:nowrap;padding:0}.controls__group:last-child{flex:200px}.controls__group:last-child .input-wrap{flex:1}.controls__toggles{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);grid-template-columns:repeat(3,auto);gap:2px;padding:3px;display:grid}.toggle{min-height:28px;padding:0 var(--space-3);color:var(--text-faint);font-size:var(--text-xs);cursor:pointer;background:0 0;border:0;border-radius:4px;justify-content:center;align-items:center;gap:6px;font-weight:600;display:inline-flex}.toggle:hover{color:var(--text-muted)}.toggle__dot{opacity:.5;background:currentColor;border-radius:50%;width:6px;height:6px}.toggle--info{--sev:var(--info);--sev-soft:var(--info-soft)}.toggle--warning{--sev:var(--warning);--sev-soft:var(--warning-soft)}.toggle--critical{--sev:var(--critical);--sev-soft:var(--critical-soft)}.toggle[aria-pressed=true]{background:var(--sev-soft);color:var(--text)}.toggle[aria-pressed=true] .toggle__dot{background:var(--sev);opacity:1}.input,.select{width:100%;min-height:36px;padding:0 var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);font-size:var(--text-sm)}.input:hover,.select:hover{border-color:var(--border-strong)}.input-wrap{display:block;position:relative}.input-wrap__icon{top:50%;left:var(--space-3);color:var(--text-faint);pointer-events:none;position:absolute;transform:translateY(-50%)}.input-wrap .input{padding-left:36px}.settings{flex:none;position:relative}.settings__summary{min-height:36px;padding:0 var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-muted);font-size:var(--text-sm);cursor:pointer;align-items:center;font-weight:600;display:flex}.settings__body{top:calc(100% + var(--space-2));z-index:10;gap:var(--space-4);width:300px;padding:var(--space-4);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);flex-direction:column;display:flex;position:absolute;right:0}.settings__field{gap:var(--space-2);font-size:var(--text-xs);color:var(--text-muted);flex-direction:column;display:flex}.settings__row{justify-content:space-between;gap:var(--space-2);display:flex}.settings__value{color:var(--text);font-variant-numeric:tabular-nums;font-weight:600}.settings__field input[type=range]{width:100%;accent-color:var(--accent)}.events__table{flex-direction:column;min-height:0;display:flex}.events__header,.event-row{align-items:center;gap:var(--space-3);padding:0 var(--space-3);grid-template-columns:92px 80px minmax(80px,128px) minmax(0,1fr);display:grid}.events__header{border-bottom:1px solid var(--border);height:32px;color:var(--text-muted);font-size:var(--text-xs);font-weight:500}.events__viewport{contain:strict;height:420px;position:relative;overflow-y:auto}.events__inner{width:100%;position:relative}.event-row{border-bottom:1px solid var(--border);width:100%;font-size:var(--text-sm);position:absolute;top:0;left:0}.event-row:hover{background:var(--surface-hover)}.event-row--critical:before{content:"";background:var(--critical);border-radius:2px;width:2px;position:absolute;top:6px;bottom:6px;left:0}.event-row__time{color:var(--text-faint);font-family:var(--font-mono);font-size:var(--text-xs);font-variant-numeric:tabular-nums}.event-row__source{color:var(--text);font-weight:600}.event-row__message{color:var(--text-muted)}.event-row__source,.event-row__message{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sev{color:var(--text-muted);font-size:var(--text-xs);text-transform:capitalize;align-items:center;gap:6px;font-weight:600;display:inline-flex}.sev__dot{background:var(--sev);border-radius:50%;width:7px;height:7px}.sev--info{--sev:var(--info)}.sev--warning{--sev:var(--warning);color:var(--warning)}.sev--critical{--sev:var(--critical);color:var(--critical)}@media (min-width:1100px){.events__table{flex:1}.events__viewport{flex:1;height:auto;min-height:0}}@media (max-width:640px){.events__header,.event-row{grid-template-columns:88px 80px minmax(0,1fr)}.events__header>:nth-child(3),.event-row__source{display:none}}.kpis{gap:var(--space-3);grid-template-columns:repeat(6,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.kpi{min-width:0;padding:var(--space-3) 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);flex-direction:column;gap:2px;display:flex;position:relative}.kpi__top{align-items:center;gap:var(--space-2);min-width:0;display:flex}.kpi__label{color:var(--text-muted);font-size:var(--text-xs);white-space:nowrap;font-weight:500}.kpi__value{letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:2px;font-size:1.75rem;font-weight:700;line-height:1.1}.kpi__hint{color:var(--text-faint);font-size:var(--text-xs);white-space:nowrap}.kpi--critical .kpi__value{color:var(--critical)}.kpi--warning .kpi__value{color:var(--warning)}.kpi__live{background:var(--status-live);border-radius:50%;width:7px;height:7px;position:absolute;top:12px;right:14px}.kpi__live:after{content:"";background:var(--status-live);animation:ping 1.8s var(--ease) infinite;border-radius:50%;position:absolute;inset:0}@media (max-width:1099px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:640px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:400px){.kpis{grid-template-columns:minmax(0,1fr)}}.uplot,.uplot *,.uplot :before,.uplot :after{box-sizing:border-box}.uplot{width:min-content;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}.u-title{text-align:center;font-size:18px;font-weight:700}.u-wrap{-webkit-user-select:none;user-select:none;position:relative}.u-over,.u-under{position:absolute}.u-under{overflow:hidden}.uplot canvas{width:100%;height:100%;display:block;position:relative}.u-axis{position:absolute}.u-legend{text-align:center;margin:auto;font-size:14px}.u-inline{display:block}.u-inline *{display:inline-block}.u-inline tr{margin-right:16px}.u-legend th{font-weight:600}.u-legend th>*{vertical-align:middle;display:inline-block}.u-legend .u-marker{width:1em;height:1em;margin-right:4px;background-clip:padding-box!important}.u-inline.u-live th:after{content:":";vertical-align:middle}.u-inline:not(.u-live) .u-value{display:none}.u-series>*{padding:4px}.u-series th{cursor:pointer}.u-legend .u-off>*{opacity:.3}.u-select{pointer-events:none;background:#00000012;position:absolute}.u-cursor-x,.u-cursor-y{pointer-events:none;will-change:transform;position:absolute;top:0;left:0}.u-hz .u-cursor-x,.u-vt .u-cursor-y{border-right:1px dashed #607d8b;height:100%}.u-hz .u-cursor-y,.u-vt .u-cursor-x{border-bottom:1px dashed #607d8b;width:100%}.u-cursor-pt{pointer-events:none;will-change:transform;border:0 solid;border-radius:50%;position:absolute;top:0;left:0;background-clip:padding-box!important}.u-axis.u-off,.u-select.u-off,.u-cursor-x.u-off,.u-cursor-y.u-off,.u-cursor-pt.u-off{display:none}.chart{height:280px;position:relative}.chart__canvas{position:absolute;inset:0}.chart__overlay{border-radius:var(--radius-md);background:var(--surface);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.chart .u-legend{display:none}@media (min-width:1100px){.chart{flex:1;height:auto;min-height:0}}.mix{align-items:center;gap:var(--space-2) var(--space-4);min-height:40px;padding:var(--space-2) var(--space-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);flex-wrap:wrap;display:flex}.mix__head{align-items:baseline;gap:var(--space-2);white-space:nowrap;display:flex}.mix__total{color:var(--text-faint);font-size:var(--text-xs);font-variant-numeric:tabular-nums}.mix__bar{border-radius:var(--radius-pill);background:var(--surface-2);flex:200px;gap:2px;height:6px;display:flex;overflow:hidden}.mix__seg{border-radius:var(--radius-pill);background:var(--sev);flex-basis:0;min-width:3px}.mix__seg--info,.mix__item--info{--sev:var(--info)}.mix__seg--warning,.mix__item--warning{--sev:var(--warning)}.mix__seg--critical,.mix__item--critical{--sev:var(--critical)}.mix__legend{gap:var(--space-4);color:var(--text-muted);font-size:var(--text-xs);white-space:nowrap;margin:0;padding:0;list-style:none;display:flex}.mix__item{align-items:center;gap:6px;display:inline-flex}.mix__item strong{color:var(--text);font-variant-numeric:tabular-nums;font-weight:600}.mix__dot{background:var(--sev);border-radius:2px;width:8px;height:8px}.app{gap:var(--space-3);max-width:1920px;padding:var(--space-5);flex-direction:column;margin:0 auto;display:flex}.topbar{justify-content:space-between;align-items:center;gap:var(--space-2) var(--space-4);flex-wrap:wrap;display:flex}.topbar__brand{align-items:center;gap:var(--space-3);display:flex}.brand{align-items:center;gap:var(--space-2);display:flex}.brand__mark{background:var(--accent);color:#fff;border-radius:5px;place-items:center;width:22px;height:22px;display:grid}.brand__mark svg{width:14px;height:14px}.brand__name{color:var(--text);font-size:var(--text-md);font-weight:600}.source-tag{padding:1px var(--space-2);border:1px solid var(--border);color:var(--text-faint);font-size:var(--text-xs);border-radius:4px}.micro-label{color:var(--text-muted);font-size:var(--text-xs);font-weight:500}.toolbar{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);flex-wrap:wrap;display:flex}.main{gap:var(--space-3);flex-direction:column;min-width:0;display:flex}.panels{gap:var(--space-3);grid-template-columns:minmax(0,1fr);display:grid}.panel{min-width:0;min-height:0;padding:var(--space-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);flex-direction:column;display:flex}.panel__header{justify-content:space-between;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-3);display:flex}.panel__title{font-size:var(--text-md);letter-spacing:-.01em;margin:0;font-weight:600}.panel__meta{color:var(--text-faint);font-size:var(--text-xs);font-variant-numeric:tabular-nums}@media (min-width:1100px){.app{height:100vh;padding:var(--space-4) var(--space-5);overflow:hidden}.main{flex:1;min-height:0}.panels{flex:1;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0}}@media (max-width:640px){.app{padding:var(--space-4) var(--space-3) var(--space-5)}}.state{justify-content:center;align-items:center;gap:var(--space-2);min-height:160px;padding:var(--space-5);color:var(--text-muted);font-size:var(--text-sm);text-align:center;flex-direction:column;flex:1;display:flex}.state__icon{width:40px;height:40px;margin-bottom:var(--space-1);border-radius:var(--radius-md);background:var(--surface-2);border:1px solid var(--border);color:var(--text-faint);place-items:center;display:grid}.state__title{color:var(--text);margin:0;font-weight:600}.state__hint{color:var(--text-faint);margin:0}.state--error .state__icon{color:var(--critical);background:var(--critical-soft)}.spinner{border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;width:22px;height:22px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:40px;--space-8:48px;--radius-sm:6px;--radius-md:6px;--radius-lg:8px;--radius-pill:999px;--font-sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;--text-2xs:.6875rem;--text-xs:.75rem;--text-sm:.8125rem;--text-md:.9375rem;--text-lg:1.125rem;--text-xl:1.75rem;--text-2xl:2.5rem;--bg:#f5f7fb;--surface:#fff;--surface-2:#f3f5f9;--surface-hover:#f0f3f8;--border:#0f172a14;--border-strong:#0f172a24;--text:#0b1220;--text-muted:#5b6475;--text-faint:#8a93a3;--accent:#2f5bff;--accent-soft:#2f5bff1a;--accent-contrast:#fff;--focus:#2f5bff;--info:#2563eb;--info-soft:#2563eb1a;--warning:#c26a00;--warning-soft:#c26a001f;--critical:#dc2636;--critical-soft:#dc26361a;--status-live:#16a34a;--status-paused:#64748b;--status-connecting:#2f5bff;--status-reconnecting:#d97706;--status-error:#dc2636;--chart-line:#2f5bff;--chart-fill-top:#2f5bff47;--chart-fill-bottom:#2f5bff00;--chart-grid:#0f172a0f;--ease:cubic-bezier(.2, .8, .2, 1)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#07090d;--surface:#0d1117;--surface-2:#121822;--surface-hover:#111722;--border:#ffffff0f;--border-strong:#ffffff1a;--text:#e8ecf3;--text-muted:#8b95a7;--text-faint:#5d6778;--accent:#3b6cff;--accent-soft:#3b6cff24;--accent-contrast:#fff;--focus:#6b8fff;--info:#4d8bff;--info-soft:#4d8bff24;--warning:#f5a524;--warning-soft:#f5a52424;--critical:#ff4d5e;--critical-soft:#ff4d5e24;--status-live:#22d38a;--status-paused:#8b95a7;--status-connecting:#6b8fff;--status-reconnecting:#f5a524;--status-error:#ff4d5e;--chart-line:#5b86ff;--chart-fill-top:#3b6cff59;--chart-fill-bottom:#3b6cff00;--chart-grid:#ffffff0d}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}*,:before,:after{box-sizing:border-box}html,body{min-height:100%;color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-size:16px;line-height:1.5}body{background:var(--bg)}button,input,select{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.button{justify-content:center;align-items:center;gap:var(--space-2);min-height:40px;padding:0 var(--space-4);border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface-2);font-size:var(--text-sm);cursor:pointer;font-weight:600;display:inline-flex}.button:hover{background:var(--surface-hover)}.button:active{transform:translateY(1px)}.button--primary{background:var(--accent);color:var(--accent-contrast);border-color:#0000}.button--primary:hover{background:var(--accent);opacity:.92}.button--small{min-height:30px;padding:0 var(--space-3);font-size:var(--text-xs)}.icon{flex:none;width:16px;height:16px}