:root{--bg-canvas: #09090b;--bg-surface: #121216;--bg-subtle: #18181d;--bg-input: #0e0e12;--bg-input-focus: #14141a;--border-dim: #22222a;--border-subtle: #2d2d38;--border-focus: #38bdf8;--text-primary: #f4f4f6;--text-secondary: #a1a1aa;--text-dim: #71717a;--text-faint: #3f3f46;--accent-cyan: #38bdf8;--accent-emerald: #10b981;--accent-amber: #f59e0b;--accent-indigo: #818cf8;--accent-rose: #f43f5e;--font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--radius-xs: 3px;--radius-sm: 5px;--radius-md: 8px;--radius-lg: 12px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-canvas);color:var(--text-primary);font-family:var(--font-sans);line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased;background-image:radial-gradient(rgba(56,189,248,.03) 1px,transparent 1px),radial-gradient(rgba(255,255,255,.015) 1px,transparent 1px);background-size:24px 24px;background-position:0 0,12px 12px}.mono{font-family:var(--font-mono)}.app-wrapper{max-width:1200px;margin:0 auto;padding:1.75rem 1.5rem 4rem}.navbar{display:flex;justify-content:space-between;align-items:center;padding-bottom:1.5rem;border-bottom:1px solid var(--border-dim);margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.navbar-left{display:flex;align-items:center;gap:.75rem}.brand-logo{display:flex;align-items:center;gap:.5rem}.brand-dot{width:9px;height:9px;background:var(--accent-cyan);border-radius:50%;box-shadow:0 0 10px #38bdf8cc}.brand-name{font-size:1.1rem;font-weight:700;letter-spacing:-.02em;color:var(--text-primary)}.brand-divider{color:var(--text-faint);font-weight:300}.brand-tagline{font-size:.82rem;color:var(--text-secondary)}.navbar-right{display:flex;align-items:center;gap:1rem}.telemetry-badge{display:flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:.75rem;background:var(--bg-subtle);border:1px solid var(--border-dim);padding:.3rem .65rem;border-radius:9999px;color:var(--text-secondary)}.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-emerald);box-shadow:0 0 6px #10b981b3;animation:pulse 2s infinite ease-in-out}.telemetry-badge.offline .pulse-dot{background:var(--accent-rose);box-shadow:0 0 6px #f43f5eb3}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.6}}.nav-links{display:flex;gap:.5rem}.nav-btn{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:500;color:var(--text-secondary);text-decoration:none;padding:.3rem .6rem;border-radius:var(--radius-sm);border:1px solid var(--border-dim);background:var(--bg-surface);transition:all .15s ease}.nav-btn:hover{color:var(--text-primary);border-color:var(--border-subtle);background:var(--bg-subtle)}.layout-grid{display:grid;grid-template-columns:1fr;gap:1.75rem;align-items:start}@media (min-width: 980px){.layout-grid{grid-template-columns:380px 1fr}}.left-stack{display:flex;flex-direction:column;gap:1.25rem}.right-stack{display:flex;flex-direction:column}.surface-panel{background:var(--bg-surface);border:1px solid var(--border-dim);border-radius:var(--radius-lg);padding:1.35rem 1.4rem;box-shadow:0 4px 24px #0006}.panel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;flex-wrap:wrap;gap:.5rem}.panel-title-group{display:flex;align-items:center;gap:.45rem}.panel-heading{font-size:.95rem;font-weight:600;letter-spacing:-.01em;color:var(--text-primary)}.sample-presets{display:flex;align-items:center;gap:.35rem}.preset-label{font-size:.72rem;color:var(--text-dim)}.preset-chip{background:var(--bg-subtle);border:1px solid var(--border-dim);color:var(--text-secondary);font-family:var(--font-mono);font-size:.72rem;padding:.15rem .4rem;border-radius:var(--radius-xs);cursor:pointer;transition:all .15s ease}.preset-chip:hover{color:var(--accent-cyan);border-color:var(--accent-cyan)}.form-stack{display:flex;flex-direction:column;gap:1rem}.input-group{display:flex;flex-direction:column;gap:.35rem}.input-label{font-size:.78rem;font-weight:600;color:var(--text-secondary)}.text-input{width:100%;background:var(--bg-input);border:1px solid var(--border-dim);border-radius:var(--radius-md);padding:.65rem .85rem;color:var(--text-primary);font-family:var(--font-sans);font-size:.875rem;transition:all .15s ease}.text-input:focus{outline:none;background:var(--bg-input-focus);border-color:var(--border-focus);box-shadow:0 0 0 2px #38bdf826}.text-input::placeholder{color:var(--text-faint)}.slug-input-container{position:relative;display:flex;align-items:center}.slug-prefix{position:absolute;left:.85rem;font-family:var(--font-mono);font-size:.875rem;color:var(--text-dim);pointer-events:none}.slug-input{padding-left:1.8rem}.slug-preview-bar{display:flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--text-dim);margin-top:.2rem;padding-left:.25rem}.preview-url{color:var(--text-secondary)}.preview-url strong{color:var(--accent-cyan)}.validation-tag{font-size:.68rem;padding:.1rem .35rem;border-radius:var(--radius-xs)}.validation-tag.valid{background:#10b9811a;color:var(--accent-emerald)}.validation-tag.invalid{background:#f43f5e1a;color:var(--accent-rose)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-md);font-family:var(--font-sans);font-size:.85rem;cursor:pointer;transition:all .15s ease;border:1px solid transparent}.btn-action{background:var(--accent-cyan);color:#04101e;font-weight:600;padding:.65rem 1rem;width:100%}.btn-action:hover:not(:disabled){background:#7dd3fc;box-shadow:0 0 16px #38bdf859}.btn-action:disabled{opacity:.5;cursor:not-allowed}.kbd-shortcut{font-family:var(--font-mono);font-size:.75rem;background:#0003;padding:.1rem .35rem;border-radius:var(--radius-xs)}.error-callout{display:flex;align-items:flex-start;gap:.5rem;padding:.65rem .85rem;background:#f43f5e14;border:1px solid rgba(244,63,94,.25);border-radius:var(--radius-md);font-size:.8rem;color:#fca5a5;margin-top:.75rem}.result-dock{border-color:#38bdf859;background:#0d121c}.dock-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.dock-tag{display:flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-cyan)}.live-dot{width:6px;height:6px;background:var(--accent-cyan);border-radius:50%}.slug-tag{font-size:.78rem;color:var(--text-dim)}.dock-url-bar{display:flex;align-items:center;justify-content:space-between;background:var(--bg-input);border:1px solid var(--border-dim);border-radius:var(--radius-md);padding:.4rem .5rem .4rem .85rem;margin-bottom:.75rem;gap:.5rem}.dock-link{font-size:.875rem;color:var(--text-primary);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.dock-link:hover{color:var(--accent-cyan)}.link-hover-icon{color:var(--text-dim);flex-shrink:0}.btn-icon-label{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .65rem;background:var(--bg-subtle);border:1px solid var(--border-dim);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.75rem;font-family:var(--font-sans);cursor:pointer;transition:all .15s ease}.btn-icon-label:hover{color:var(--text-primary);border-color:var(--border-subtle)}.btn-icon-label.copied{background:#10b98126;border-color:#10b98166;color:#6ee7b7}.dock-target-row{display:flex;gap:.4rem;font-size:.75rem;margin-bottom:1rem;overflow:hidden}.target-title{color:var(--text-dim);flex-shrink:0}.target-url{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dock-button-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:.45rem;border-top:1px solid var(--border-dim);padding-top:.85rem}.btn-dock-utility{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;background:var(--bg-subtle);border:1px solid var(--border-dim);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.75rem;padding:.45rem .4rem;cursor:pointer;transition:all .15s ease}.btn-dock-utility:hover{color:var(--text-primary);border-color:var(--border-subtle)}.btn-dock-utility.active{background:#38bdf81a;border-color:var(--accent-cyan);color:var(--accent-cyan)}.btn-dock-utility.highlight{color:var(--accent-cyan)}.qr-container{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;margin-top:.85rem;background:var(--bg-input);border:1px solid var(--border-dim);border-radius:var(--radius-md)}.qr-box{padding:.5rem;background:#090d16;border-radius:var(--radius-sm)}.qr-caption{font-size:.72rem;color:var(--text-dim)}.workbench-panel{display:flex;flex-direction:column;gap:1.25rem}.workbench-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem}.workbench-title-group,.workbench-controls{display:flex;align-items:center;gap:.45rem}.btn-auto-refresh{display:inline-flex;align-items:center;gap:.35rem;background:var(--bg-subtle);border:1px solid var(--border-dim);padding:.25rem .55rem;border-radius:var(--radius-sm);font-size:.72rem;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.btn-auto-refresh.active{border-color:#10b98166;background:#10b98114;color:#a7f3d0}.btn-icon-refresh{display:inline-flex;align-items:center;justify-content:center;background:var(--bg-subtle);border:1px solid var(--border-dim);padding:.3rem .45rem;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer}.btn-icon-refresh:hover:not(:disabled){color:var(--text-primary);border-color:var(--border-subtle)}.search-toolbar{display:flex;flex-direction:column;gap:.6rem;background:var(--bg-input);border:1px solid var(--border-dim);border-radius:var(--radius-md);padding:.75rem .85rem}.search-bar{display:flex;align-items:center;gap:.45rem;position:relative}.search-prefix{position:absolute;left:.75rem;font-family:var(--font-mono);font-size:.85rem;color:var(--text-dim);pointer-events:none}.search-input{flex:1;background:var(--bg-subtle);border:1px solid var(--border-dim);border-radius:var(--radius-sm);padding:.45rem .65rem .45rem 1.65rem;color:var(--text-primary);font-size:.82rem}.search-input:focus{outline:none;border-color:var(--border-focus)}.btn-search{display:inline-flex;align-items:center;gap:.35rem;background:var(--accent-cyan);color:#04101e;font-weight:600;font-size:.78rem;padding:.45rem .75rem;border-radius:var(--radius-sm);border:none;cursor:pointer}.btn-search:hover:not(:disabled){background:#7dd3fc}.quick-chip-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.quick-label{font-size:.72rem;color:var(--text-dim)}.quick-chip{background:transparent;border:1px solid var(--border-dim);color:var(--text-secondary);font-size:.72rem;padding:.1rem .4rem;border-radius:var(--radius-xs);cursor:pointer;transition:all .15s ease}.quick-chip:hover,.quick-chip.active{color:var(--accent-cyan);border-color:var(--accent-cyan);background:#38bdf814}.workbench-content{display:flex;flex-direction:column;gap:1.25rem}.telemetry-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}@media (max-width: 640px){.telemetry-strip{grid-template-columns:1fr}}.stat-card{background:var(--bg-input);border:1px solid var(--border-dim);border-radius:var(--radius-md);padding:.75rem .85rem}.stat-label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);margin-bottom:.35rem}.stat-number-row{display:flex;align-items:baseline;gap:.4rem}.stat-hero{font-size:1.5rem;font-weight:700;color:var(--text-primary);line-height:1}.stat-subtag{font-size:.72rem;color:var(--text-dim)}.stat-badge{font-size:.8rem;font-weight:600}.target-banner{display:flex;align-items:center;gap:.5rem;background:var(--bg-input);border:1px solid var(--border-dim);border-radius:var(--radius-md);padding:.55rem .85rem;font-size:.78rem}.target-tag{color:var(--text-dim);flex-shrink:0}.target-link{color:var(--accent-cyan);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.target-link:hover{text-decoration:underline}.distribution-grid{display:grid;grid-template-columns:1fr;gap:1rem}@media (min-width: 700px){.distribution-grid{grid-template-columns:1fr 1fr}}.distribution-box{background:var(--bg-input);border:1px solid var(--border-dim);border-radius:var(--radius-md);padding:.85rem 1rem}.distribution-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.dist-title{font-size:.78rem;font-weight:600;color:var(--text-secondary)}.dist-meta{font-size:.7rem;color:var(--text-dim)}.dist-empty{font-size:.75rem;color:var(--text-dim);padding:.5rem 0}.progress-bars-stack{display:flex;flex-direction:column;gap:.6rem}.progress-row{display:flex;flex-direction:column;gap:.25rem}.progress-labels{display:flex;justify-content:space-between;font-size:.75rem}.progress-name{color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}.progress-val{color:var(--text-primary);font-size:.72rem}.progress-track{width:100%;height:4px;background:var(--bg-subtle);border-radius:9999px;overflow:hidden}.progress-fill{height:100%;border-radius:9999px;transition:width .3s ease}.fill-cyan{background:linear-gradient(90deg,#0284c7,#38bdf8)}.fill-indigo{background:linear-gradient(90deg,#4f46e5,#818cf8)}.event-log-box{background:var(--bg-input);border:1px solid var(--border-dim);border-radius:var(--radius-md);padding:.85rem 1rem}.event-log-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}.event-badge{font-size:.7rem;color:var(--text-dim)}.table-viewport{max-height:220px;overflow-y:auto;border:1px solid var(--border-dim);border-radius:var(--radius-sm)}.flat-table{width:100%;border-collapse:collapse;font-size:.78rem}.flat-table th{background:var(--bg-subtle);padding:.45rem .65rem;text-align:left;color:var(--text-dim);font-weight:600;font-size:.7rem;position:sticky;top:0;border-bottom:1px solid var(--border-dim)}.flat-table td{padding:.45rem .65rem;border-bottom:1px solid rgba(255,255,255,.03);color:var(--text-primary)}.flat-table tr:hover td{background:#ffffff05}.cell-truncate{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-nowrap{white-space:nowrap}.text-cyan{color:var(--accent-cyan)}.text-emerald{color:var(--accent-emerald)}.text-amber{color:var(--accent-amber)}.text-secondary{color:var(--text-secondary)}.text-dim{color:var(--text-dim)}.shrink-0{flex-shrink:0}.opacity-60{opacity:.6}.flex-between{display:flex;justify-content:space-between;align-items:center}.flex-align{display:flex;align-items:center;gap:.4rem}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.header-nav-tabs{display:flex;align-items:center;gap:.35rem;background:var(--bg-input);border:1px solid var(--border-dim);border-radius:var(--radius-md);padding:.2rem}.tab-btn{display:inline-flex;align-items:center;gap:.4rem;background:transparent;border:none;color:var(--text-secondary);font-size:.78rem;font-family:var(--font-sans);font-weight:500;padding:.35rem .65rem;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease}.tab-btn:hover{color:var(--text-primary)}.tab-btn.active{background:var(--bg-subtle);color:var(--text-primary);border:1px solid var(--border-subtle)}.live-pill{font-family:var(--font-mono);font-size:.62rem;background:#f59e0b26;color:var(--accent-amber);border:1px solid rgba(245,158,11,.3);padding:.05rem .35rem;border-radius:9999px;font-weight:600;text-transform:uppercase}.grafana-container{display:flex;flex-direction:column;gap:1.5rem}.grafana-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;border-bottom:1px solid var(--border-dim);padding-bottom:1.25rem}.grafana-title-group{display:flex;align-items:baseline;gap:.6rem}.grafana-brand-badge{display:flex;align-items:center;gap:.45rem}.grafana-title{font-size:1.05rem;font-weight:700;color:var(--text-primary)}.grafana-subtag{font-size:.75rem;color:var(--text-dim)}.grafana-grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.metric-card{background:var(--bg-input);border:1px solid var(--border-dim);border-radius:var(--radius-md);padding:1rem;display:flex;flex-direction:column;gap:.4rem}.metric-head{display:flex;justify-content:space-between;align-items:center}.metric-title{font-size:.75rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.03em}.metric-val-row{display:flex;align-items:baseline;gap:.35rem}.metric-hero{font-size:1.75rem;font-weight:700;color:var(--text-primary);line-height:1.1}.metric-unit{font-size:.8rem;color:var(--text-dim)}.metric-trend{font-size:.72rem}.grafana-charts-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}@media (min-width: 850px){.grafana-charts-grid{grid-template-columns:1.3fr 1fr}}.chart-panel{background:var(--bg-input);border:1px solid var(--border-dim);border-radius:var(--radius-md);padding:1.1rem;display:flex;flex-direction:column;gap:.85rem}.chart-header{display:flex;justify-content:space-between;align-items:center}.chart-title{font-size:.82rem;font-weight:600;color:var(--text-secondary)}.chart-badge{font-size:.68rem;color:var(--text-dim);background:var(--bg-subtle);border:1px solid var(--border-dim);padding:.1rem .4rem;border-radius:var(--radius-xs)}.svg-chart-wrapper{width:100%;height:140px}.chart-svg{width:100%;height:100%;overflow:visible}.percentile-stack{display:flex;flex-direction:column;gap:.75rem;justify-content:center;height:100%}.percentile-row{display:flex;align-items:center;gap:.6rem;font-size:.75rem}.percentile-label{width:90px;color:var(--text-dim)}.percentile-track{flex:1;height:6px;background:var(--bg-subtle);border-radius:9999px;overflow:hidden}.percentile-bar{height:100%;border-radius:9999px;transition:width .3s ease}.fill-amber{background:linear-gradient(90deg,#d97706,#f59e0b)}.percentile-val{width:45px;text-align:right;color:var(--text-primary)}.cluster-panel{background:var(--bg-input);border:1px solid var(--border-dim);border-radius:var(--radius-md);padding:1.1rem}.mb-2{margin-bottom:.85rem;display:block}.topology-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem}.node-box{display:flex;align-items:center;gap:.65rem;background:var(--bg-subtle);border:1px solid var(--border-dim);padding:.65rem .85rem;border-radius:var(--radius-sm)}.node-info{display:flex;flex-direction:column;flex:1}.node-name{font-size:.8rem;font-weight:600;color:var(--text-primary)}.node-desc{font-size:.68rem;color:var(--text-dim)}.node-status{font-size:.72rem;font-weight:600}.raw-metrics-panel{background:var(--bg-input);border:1px solid var(--border-dim);border-radius:var(--radius-md);overflow:hidden}.raw-metrics-btn{width:100%;display:flex;justify-content:space-between;align-items:center;background:transparent;border:none;padding:.75rem 1rem;color:var(--text-secondary);font-size:.78rem;font-family:var(--font-sans);cursor:pointer;transition:all .15s ease}.raw-metrics-btn:hover{background:var(--bg-subtle);color:var(--text-primary)}.raw-metrics-body{padding:.85rem 1rem;border-top:1px solid var(--border-dim);background:#070709;font-size:.72rem;max-height:200px;overflow-y:auto;color:#7dd3fc}.raw-metrics-body pre{white-space:pre-wrap;word-break:break-all}