:root,[data-theme=dark]{--bg-primary: #0d0d14;--bg-secondary: rgba(22, 22, 36, .92);--bg-tertiary: rgba(28, 28, 44, .75);--glass-border: rgba(255, 255, 255, .08);--glass-blur: blur(16px);--text-primary: #e8e8ec;--text-secondary: #9ca3af;--text-muted: #6b7280;--green: #22c55e;--amber: #eab308;--red: #ef4444;--grey-unknown: #6b7280;--chart-blue: #3b82f6;--chart-purple: #8b5cf6;--chart-cyan: #06b6d4;--chart-orange: #f97316;--pipe-color: rgba(255, 255, 255, .15);--node-bg: rgba(15, 15, 25, .9)}[data-theme=light]{--bg-primary: #f8f9fb;--bg-secondary: rgba(255, 255, 255, .85);--bg-tertiary: rgba(240, 242, 245, .7);--glass-border: rgba(0, 0, 0, .08);--text-primary: #1a1a2e;--text-secondary: #4b5563;--text-muted: #9ca3af;--green: #16a34a;--amber: #ca8a04;--red: #dc2626;--grey-unknown: #9ca3af;--chart-blue: #2563eb;--chart-purple: #7c3aed;--chart-cyan: #0891b2;--chart-orange: #ea580c;--pipe-color: rgba(0, 0, 0, .12);--node-bg: rgba(255, 255, 255, .9)}*{margin:0;padding:0;box-sizing:border-box}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::-webkit-scrollbar-corner{background:var(--bg-primary)}html{scrollbar-color:var(--glass-border) var(--bg-primary);scrollbar-width:thin}body{background:var(--bg-primary);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:13px;-webkit-font-smoothing:antialiased}.dashboard{display:grid;grid-template-columns:220px 1fr;grid-template-rows:48px 1fr;height:100vh}.header{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--glass-border);background:var(--bg-secondary);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}.header-brand{font-size:14px;font-weight:600;letter-spacing:.5px}.header-brand span{color:var(--text-secondary);font-weight:400;margin-left:8px}.header-right{display:flex;align-items:center;gap:16px}.header-time{color:var(--text-secondary);font-size:11px;font-variant-numeric:tabular-nums}.mode-toggle{width:36px;height:18px;border-radius:9px;background:var(--glass-border);border:1px solid var(--glass-border);position:relative;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.mode-toggle:after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--text-secondary);transition:left .2s}[data-theme=light] .mode-toggle:after{left:20px}.left-nav{background:var(--bg-secondary);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-right:1px solid var(--glass-border);padding:12px 0;overflow-y:auto}.main-content{overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:20px}.panel{background:var(--bg-secondary);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:8px;overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--glass-border);font-size:12px;font-weight:600;color:var(--text-secondary);letter-spacing:.3px;text-transform:uppercase}.panel-body{padding:16px}.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 6px;border-radius:12px;border:1px solid var(--glass-border);background:var(--bg-tertiary);font-size:11px;cursor:pointer;transition:border-color .15s;color:var(--text-secondary)}.pill:hover{border-color:var(--text-muted)}.pill .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.dot-green{background:var(--green)}.dot-amber{background:var(--amber)}.dot-red{background:var(--red)}.dot-grey{background:var(--grey-unknown)}.nav-section{font-size:10px;letter-spacing:1px;color:var(--text-muted);padding:8px 16px 4px;text-transform:uppercase}.nav-item{display:flex;align-items:center;gap:10px;padding:8px 16px;cursor:pointer;transition:background .15s;border-left:3px solid transparent}.nav-item:hover{background:var(--bg-tertiary)}.nav-item.active{background:var(--bg-tertiary);border-left-color:var(--text-secondary)}.nav-label{font-size:12px}.nav-sublabel{font-size:10px;color:var(--text-secondary)}.nav-child{display:flex;align-items:center;gap:8px;padding:5px 16px 5px 36px;font-size:11px;color:var(--text-secondary);cursor:pointer}.nav-child:hover{color:var(--text-primary);background:var(--bg-tertiary)}
