.observability{--font-sans:var(--font-plex),"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;--font-mono:var(--font-jetbrains),"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;--font-display:var(--font-plex),"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;--row-h:32px;--pad-x:16px;--pad-y:14px;--gap:12px;--r-1:4px;--r-2:6px;--r-3:8px;--r-4:12px;--accent-h:220;--accent-s:95%;--accent-l:60%;--accent:hsl(var(--accent-h) var(--accent-s) var(--accent-l));--accent-soft:hsl(var(--accent-h) var(--accent-s) var(--accent-l)/0.12);--accent-line:hsl(var(--accent-h) var(--accent-s) var(--accent-l)/0.32);--accent-fg:#fff;--s-1:#4a8cff;--s-2:#14b8a6;--s-3:#f59e0b;--s-4:#f43f5e;--s-5:#a855f7;--s-6:#84cc16;--s-7:#06b6d4;--s-8:#ec4899;--ok:#10b981;--warn:#f59e0b;--err:#ef4444;--info:#3b82f6}.observability,.observability.theme-dark{--bg-0:#07090d;--bg-1:#0c1014;--bg-2:#11161c;--bg-3:#161c24;--bg-hover:#1a212a;--bg-active:#1f2731;--fg-1:#e6edf3;--fg-2:#b1bac4;--fg-3:#7d8590;--fg-4:#4f5560;--border-1:#1d242d;--border-2:#262e38;--border-3:#313a45;--grid:hsla(0,0%,100%,.04);--shadow-sm:0 1px 0 rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);--shadow-md:0 8px 24px rgba(0,0,0,.4);--overlay:rgba(0,0,0,.6);--ok-bg:rgba(16,185,129,.1);--warn-bg:rgba(245,158,11,.12);--err-bg:rgba(239,68,68,.12);--info-bg:rgba(59,130,246,.12);--ok-border:rgba(16,185,129,.35);--warn-border:rgba(245,158,11,.35);--err-border:rgba(239,68,68,.35);--info-border:rgba(59,130,246,.35)}.observability.theme-dark{--background:222 47% 4%;--foreground:213 27% 93%;--card:220 27% 8%;--card-foreground:213 27% 93%;--popover:220 27% 8%;--popover-foreground:213 27% 93%;--primary:263 70% 60%;--primary-foreground:0 0% 100%;--secondary:217 27% 14%;--secondary-foreground:213 27% 93%;--muted:217 27% 14%;--muted-foreground:216 12% 56%;--accent:217 27% 14%;--accent-foreground:213 27% 93%;--destructive:0 70% 55%;--destructive-foreground:0 0% 100%;--border:216 18% 18%;--input:216 18% 18%;--ring:263 70% 60%}.observability.theme-dark .bg-white,.observability.theme-dark .bg-zinc-100,.observability.theme-dark .bg-zinc-50{background-color:#0f131b}.observability.theme-dark .text-zinc-800,.observability.theme-dark .text-zinc-900{color:#e6edf3}.observability.theme-dark .text-zinc-600,.observability.theme-dark .text-zinc-700{color:#b1bac4}.observability.theme-dark .border-zinc-100,.observability.theme-dark .border-zinc-200{border-color:#262e38}.observability.theme-light{--bg-0:#f6f7f9;--bg-1:#fff;--bg-2:#fff;--bg-3:#fafbfc;--bg-hover:#f1f3f5;--bg-active:#e9ecef;--fg-1:#0b1220;--fg-2:#2b3441;--fg-3:#5b6573;--fg-4:#8b95a3;--border-1:#e5e8ec;--border-2:#d8dde3;--border-3:#c7ced6;--grid:rgba(11,18,32,.04);--shadow-sm:0 1px 0 rgba(11,18,32,.04),0 1px 2px rgba(11,18,32,.06);--shadow-md:0 8px 24px rgba(11,18,32,.08);--overlay:rgba(11,18,32,.4);--ok-bg:rgba(16,185,129,.1);--warn-bg:rgba(245,158,11,.14);--err-bg:rgba(239,68,68,.1);--info-bg:rgba(59,130,246,.1);--ok-border:rgba(16,185,129,.3);--warn-border:rgba(245,158,11,.4);--err-border:rgba(239,68,68,.3);--info-border:rgba(59,130,246,.3)}.observability.density-compact{--row-h:26px;--pad-x:12px;--pad-y:8px;--gap:8px}.observability.density-comfortable{--row-h:38px;--pad-x:20px;--pad-y:18px;--gap:16px}.observability.panels-flat .panel{box-shadow:none}.observability.panels-floating .panel{box-shadow:var(--shadow-md);border-color:transparent}.observability *{box-sizing:border-box}.observability{font-family:var(--font-sans);font-size:13px;line-height:1.5;background:var(--bg-0);color:var(--fg-2);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"ss01","cv11";height:100vh;width:100vw;overflow:hidden}.observability button{background:none;border:0;cursor:pointer;padding:0}.observability button,.observability input,.observability select,.observability textarea{font:inherit;color:inherit}.observability a{color:inherit;text-decoration:none}.observability .mono{font-family:var(--font-mono);font-feature-settings:"zero","ss01"}.observability .tnum{font-variant-numeric:tabular-nums}.observability ::-moz-selection{background:var(--accent-soft);color:var(--fg-1)}.observability ::selection{background:var(--accent-soft);color:var(--fg-1)}.observability ::-webkit-scrollbar{width:10px;height:10px}.observability ::-webkit-scrollbar-track{background:transparent}.observability ::-webkit-scrollbar-thumb{background:var(--border-2);border:2px solid var(--bg-0);border-radius:8px}.observability ::-webkit-scrollbar-thumb:hover{background:var(--border-3)}.observability .app{display:grid;grid-template-columns:56px 1fr;grid-template-rows:48px 36px 1fr;grid-template-areas:"rail topbar" "rail subbar" "rail main";height:100vh;width:100vw;overflow:hidden;background:var(--bg-0);color:var(--fg-1)}.observability .rail{grid-area:rail;background:var(--bg-1);border-right:1px solid var(--border-1);display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:4px}.observability .rail-logo{width:36px;height:36px;border-radius:var(--r-2);display:grid;place-items:center;background:var(--accent);color:var(--accent-fg);font-weight:700;font-size:14px;letter-spacing:.5px;margin-bottom:8px;box-shadow:inset 0 0 0 1px hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 12%))}.observability .rail-divider{width:24px;height:1px;background:var(--border-2);margin:6px 0}.observability .rail-btn{width:40px;height:40px;border-radius:var(--r-2);display:grid;place-items:center;color:var(--fg-3);position:relative;transition:background .12s,color .12s}.observability .rail-btn:hover{background:var(--bg-hover);color:var(--fg-1)}.observability .rail-btn.active{background:var(--bg-active);color:var(--fg-1)}.observability .rail-btn.active:before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:2px;background:var(--accent);border-radius:0 2px 2px 0}.observability .rail-btn .badge-dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg-1)}.observability .rail-spacer{flex:1}.observability .rail-tooltip{position:absolute;left:100%;margin-left:12px;background:var(--bg-3);border:1px solid var(--border-2);color:var(--fg-1);padding:4px 8px;border-radius:var(--r-2);font-size:12px;white-space:nowrap;pointer-events:none;opacity:0;transform:translateX(-4px);transition:opacity .12s,transform .12s;z-index:20;box-shadow:var(--shadow-md)}.observability .rail-btn:hover .rail-tooltip{opacity:1;transform:translateX(0)}.observability .topbar{grid-area:topbar;display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--bg-1);border-bottom:1px solid var(--border-1)}.observability .topbar-title{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.observability .topbar-title .crumb-sep{color:var(--fg-4)}.observability .topbar-title .crumb-current{color:var(--fg-1);font-weight:600}.observability .topbar-spacer{flex:1}.observability .topbar-search{display:flex;align-items:center;gap:8px;width:320px;height:28px;padding:0 10px;background:var(--bg-2);border:1px solid var(--border-1);border-radius:var(--r-2);color:var(--fg-3);font-size:12px;transition:border-color .12s,background .12s}.observability .topbar-search:hover{border-color:var(--border-2)}.observability .topbar-search:focus-within{border-color:var(--accent-line);background:var(--bg-1);box-shadow:0 0 0 3px var(--accent-soft)}.observability .topbar-search input{flex:1;border:0;outline:0;background:transparent;color:var(--fg-1);font-size:12px}.observability .topbar-search kbd{font-family:var(--font-mono);font-size:10px;padding:1px 5px;background:var(--bg-3);border:1px solid var(--border-2);border-radius:3px;color:var(--fg-3)}.observability .topbar-icon-btn{width:28px;height:28px;display:grid;place-items:center;border-radius:var(--r-2);color:var(--fg-3);position:relative}.observability .topbar-icon-btn:hover{background:var(--bg-hover);color:var(--fg-1)}.observability .topbar-icon-btn .pulse{position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px var(--bg-1)}.observability .topbar-icon-btn .pulse:after{content:"";position:absolute;inset:-3px;border-radius:50%;background:var(--ok);opacity:.4;animation:obs-ping 1.6s cubic-bezier(0,0,.2,1) infinite}@keyframes obs-ping{75%,to{transform:scale(2);opacity:0}}.observability .avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,hsl(var(--accent-h) 70% 55%),hsl(calc(var(--accent-h) + 40) 70% 55%));color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center}.observability .subbar{grid-area:subbar;display:flex;align-items:center;gap:6px;padding:0 16px;background:var(--bg-1);border-bottom:1px solid var(--border-1);font-size:12px}.observability .subbar .selector{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;background:var(--bg-2);border:1px solid var(--border-1);border-radius:var(--r-2);color:var(--fg-2);font-size:12px;white-space:nowrap;transition:border-color .12s,color .12s}.observability .subbar .selector:hover{border-color:var(--border-2);color:var(--fg-1)}.observability .subbar .selector .label{color:var(--fg-4)}.observability .subbar .selector .value{color:var(--fg-1);font-weight:500}.observability .subbar .selector .chev{color:var(--fg-4)}.observability .subbar .sep{width:1px;height:14px;background:var(--border-2);margin:0 4px}.observability .subbar-spacer{flex:1}.observability .live-indicator{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;background:var(--ok-bg);border:1px solid var(--ok-border);border-radius:var(--r-2);color:var(--ok);font-size:11px;font-weight:500}.observability .live-indicator .dot{width:6px;height:6px;background:var(--ok);border-radius:50%;position:relative}.observability .live-indicator .dot:after{content:"";position:absolute;inset:-2px;border-radius:50%;background:var(--ok);opacity:.5;animation:obs-ping 2s ease-out infinite}.observability .main{grid-area:main;overflow:auto;background:var(--bg-0);position:relative}.observability .main.grid-bg{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:32px 32px;background-position:-1px -1px}.observability .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-2);font-size:12px;font-weight:500;color:var(--fg-2);background:var(--bg-2);border:1px solid var(--border-1);transition:background .12s,border-color .12s,color .12s;white-space:nowrap}.observability .btn:hover{background:var(--bg-hover);border-color:var(--border-2);color:var(--fg-1)}.observability .btn.btn-primary{background:var(--accent);color:var(--accent-fg);border-color:hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 8%))}.observability .btn.btn-primary:hover{background:hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 4%))}.observability .btn.btn-ghost{background:transparent;border-color:transparent}.observability .btn.btn-ghost:hover{background:var(--bg-hover)}.observability .btn.btn-sm{height:24px;padding:0 8px;font-size:11px}.observability .btn.btn-icon{width:28px;padding:0}.observability .tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:10px;font-size:11px;font-weight:500;background:var(--bg-3);color:var(--fg-2);border:1px solid var(--border-1)}.observability .tag-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-border)}.observability .tag-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-border)}.observability .tag-err{background:var(--err-bg);color:var(--err);border-color:var(--err-border)}.observability .tag-info{background:var(--info-bg);color:var(--info);border-color:var(--info-border)}.observability .tag-accent{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}.observability .section-header{display:flex;align-items:center;gap:10px;padding:16px 20px 10px}.observability .section-header .title{font-size:14px;font-weight:600;color:var(--fg-1);letter-spacing:-.005em}.observability .section-header .meta{font-size:11px;color:var(--fg-4);font-family:var(--font-mono)}.observability .section-header .spacer{flex:1}.observability .popover{position:absolute;background:var(--bg-2);border:1px solid var(--border-2);border-radius:var(--r-3);box-shadow:var(--shadow-md);z-index:50;min-width:280px;animation:obs-popIn .14s ease-out}@keyframes obs-popIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.observability .popover-head{padding:10px 12px;border-bottom:1px solid var(--border-1);font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--fg-3);font-family:var(--font-mono)}.observability .popover-list{padding:4px}.observability .popover-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--r-1);font-size:12px;color:var(--fg-2);cursor:pointer}.observability .popover-item:hover{background:var(--bg-hover);color:var(--fg-1)}.observability .popover-item.active{background:var(--accent-soft);color:var(--fg-1)}.observability .panel{background:var(--bg-1);border:1px solid var(--border-1);border-radius:var(--r-3);display:flex;flex-direction:column;overflow:hidden;position:relative;transition:border-color .12s,box-shadow .12s}.observability .panel:hover{border-color:var(--border-2)}.observability .panel-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border-1);min-height:36px}.observability .panel-head .title{font-size:12px;font-weight:600;color:var(--fg-1);letter-spacing:-.005em;display:flex;align-items:center;gap:6px}.observability .panel-head .sub{font-size:11px;color:var(--fg-4);font-family:var(--font-mono)}.observability .panel-head .spacer{flex:1}.observability .panel-head .icon-btn{width:22px;height:22px;display:grid;place-items:center;border-radius:var(--r-1);color:var(--fg-4)}.observability .panel-head .icon-btn:hover{background:var(--bg-hover);color:var(--fg-1)}.observability .panel-body{flex:1;padding:12px;min-height:0}.observability .panel-body.flush{padding:0}.observability .panel-foot{padding:8px 12px;border-top:1px solid var(--border-1);font-size:11px;color:var(--fg-4);font-family:var(--font-mono);display:flex;align-items:center;gap:8px}.observability .stat{display:flex;flex-direction:column;gap:6px;padding:14px 14px 12px}.observability .stat-row{display:flex;align-items:center;gap:8px}.observability .stat .label{font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.5px;font-weight:500;font-family:var(--font-mono)}.observability .stat .value{font-size:28px;font-weight:600;color:var(--fg-1);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.05}.observability .stat .unit{font-size:13px;color:var(--fg-3);margin-left:4px;font-weight:500}.observability .stat .delta{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-family:var(--font-mono);font-weight:500;padding:2px 5px;border-radius:3px}.observability .delta-up{color:var(--ok);background:var(--ok-bg)}.observability .delta-down{color:var(--err);background:var(--err-bg)}.observability .delta-flat{color:var(--fg-3);background:var(--bg-3)}.observability .spark{width:100%;height:36px;display:block}.observability .chart-wrap{width:100%;height:100%;min-height:0;position:relative}.observability .chart-axis-x,.observability .chart-axis-y{font-family:var(--font-mono);font-size:10px;fill:var(--fg-4)}.observability .chart-grid line{stroke:var(--grid)}.observability .legend{display:flex;flex-wrap:wrap;gap:4px 12px;padding:6px 12px 8px;font-size:11px;color:var(--fg-3)}.observability .legend .item{display:inline-flex;align-items:center;gap:6px;cursor:pointer}.observability .legend .item:hover{color:var(--fg-1)}.observability .legend .swatch{width:10px;height:2px;border-radius:1px}.observability .chart-tooltip{position:absolute;background:var(--bg-3);border:1px solid var(--border-2);border-radius:var(--r-2);padding:6px 8px;font-size:11px;color:var(--fg-1);pointer-events:none;box-shadow:var(--shadow-md);z-index:5;font-family:var(--font-mono);min-width:120px}.observability .chart-tooltip .t-time{color:var(--fg-4);margin-bottom:4px;font-size:10px}.observability .chart-tooltip .t-row{display:flex;align-items:center;gap:6px}.observability .chart-tooltip .t-row .t-name{flex:1;color:var(--fg-2)}.observability .chart-tooltip .t-row .t-val{font-weight:600;color:var(--fg-1)}.observability .chart-tooltip .swatch{width:8px;height:8px;border-radius:2px}.observability .chart-crosshair{stroke:var(--fg-3);stroke-dasharray:2 3;opacity:.5}.observability .tbl{width:100%;border-collapse:collapse;font-size:12px}.observability .tbl thead th{position:sticky;top:0;background:var(--bg-1);text-align:left;font-weight:500;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--fg-4);padding:8px 12px;border-bottom:1px solid var(--border-1);font-family:var(--font-mono)}.observability .tbl tbody td{padding:8px 12px;border-bottom:1px solid var(--border-1);color:var(--fg-2);vertical-align:middle}.observability .tbl tbody tr:hover{background:var(--bg-hover)}.observability .tbl tbody tr:last-child td{border-bottom:0}.observability .tbl td.num,.observability .tbl th.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono)}.observability .tbl td.muted{color:var(--fg-3)}.observability .health-strip{display:flex;gap:1px;height:24px;align-items:stretch}.observability .health-strip .seg{flex:1;border-radius:1px;transition:opacity .12s,transform .12s}.observability .health-strip .seg:hover{transform:scaleY(1.15);opacity:.85}.observability .seg-ok{background:var(--ok)}.observability .seg-warn{background:var(--warn)}.observability .seg-err{background:var(--err)}.observability .seg-none{background:var(--bg-3)}.observability .heat{display:grid;grid-template-columns:repeat(24,1fr);gap:2px}.observability .heat .cell{aspect-ratio:1/1;border-radius:2px;background:var(--bg-3);transition:transform .12s}.observability .heat .cell:hover{transform:scale(1.4);z-index:2;position:relative}.observability .severity-high{background:var(--err)}.observability .severity-med{background:var(--warn)}.observability .severity-low{background:var(--info)}.observability .tabs{display:flex;gap:2px;border-bottom:1px solid var(--border-1);padding:0;margin-bottom:0}.observability .tab{padding:8px 12px;font-size:12px;color:var(--fg-3);margin-bottom:-1px;cursor:pointer;transition:color .12s,border-color .12s;display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;border-bottom:2px solid transparent}.observability .tab:hover{color:var(--fg-1)}.observability .tab.active{color:var(--fg-1);border-bottom-color:var(--accent);font-weight:600}@keyframes obs-panelIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes obs-bounce{0%,80%,to{transform:translateY(0);opacity:.5}40%{transform:translateY(-6px);opacity:1}}.observability .fade-in{animation:obs-panelIn .24s ease-out}