:root{--canvas: #f5f4f0;--surface: #faf9f7;--surface-raised: #ffffff;--ink: #1a1a17;--ink-secondary: #6b6a63;--ink-tertiary: #9c9b94;--ink-muted: #c4c3bc;--accent: #5b5fc7;--accent-hover: #4a4eb5;--accent-subtle: rgba(91, 95, 199, .08);--connected: #3d8b40;--error: #c53030;--error-subtle: rgba(197, 48, 48, .06);--warning: #b7791f;--border: rgba(26, 26, 23, .08);--border-emphasis: rgba(26, 26, 23, .14);--border-strong: rgba(26, 26, 23, .22);--control-bg: rgba(26, 26, 23, .035);--control-bg-hover: rgba(26, 26, 23, .06);--control-focus-ring: rgba(91, 95, 199, .3);--row-hover: rgba(26, 26, 23, .025);--row-alt: rgba(26, 26, 23, .015);--font-ui: "Inter", -apple-system, system-ui, sans-serif;--font-data: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-8: 32px;--sp-10: 40px;--sp-12: 48px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--ease: .15s ease}[data-theme=dark]{--canvas: #141413;--surface: #1c1c1a;--surface-raised: #232320;--ink: #e8e7e3;--ink-secondary: #8a8983;--ink-tertiary: #6b6a63;--ink-muted: #4a4946;--accent: #7b7fdf;--accent-hover: #9194e8;--accent-subtle: rgba(123, 127, 223, .1);--connected: #5cb85f;--error: #e06060;--error-subtle: rgba(224, 96, 96, .08);--border: rgba(232, 231, 227, .07);--border-emphasis: rgba(232, 231, 227, .12);--border-strong: rgba(232, 231, 227, .2);--control-bg: rgba(232, 231, 227, .04);--control-bg-hover: rgba(232, 231, 227, .07);--control-focus-ring: rgba(123, 127, 223, .35);--row-hover: rgba(232, 231, 227, .03);--row-alt: rgba(232, 231, 227, .015)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font-ui);font-size:13px;line-height:1.5;color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::selection{background:var(--accent-subtle)}input,textarea,button{font:inherit;color:inherit}button{cursor:pointer;border:none;background:none}*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}*::-webkit-scrollbar{width:6px;height:6px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:var(--border-emphasis);border-radius:3px}*::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}*::-webkit-scrollbar-corner{background:transparent}.app{display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-2) var(--sp-4);border-bottom:1px solid var(--border);background:var(--canvas);flex-shrink:0;height:40px}.header-left{display:flex;align-items:center;gap:2px}.logo-emoji{font-size:16px;line-height:1;margin-right:6px;flex-shrink:0}.app-name{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}.breadcrumb-sep{color:var(--ink-muted);font-size:13px;font-weight:400;margin:0 4px}.breadcrumb-segment{font-size:13px;color:var(--ink-tertiary)}.header-right{display:flex;align-items:center;gap:var(--sp-2)}.table-selector{position:relative}.table-selector-trigger{display:flex;align-items:center;gap:var(--sp-1);padding:2px var(--sp-2);border-radius:var(--radius-sm);font-size:13px;font-weight:500;color:var(--ink);transition:background var(--ease)}.table-selector-trigger:hover{background:var(--control-bg-hover)}.table-selector-trigger .chevron{color:var(--ink-tertiary);font-size:10px;transition:transform var(--ease)}.table-selector-trigger .chevron.open{transform:rotate(180deg)}.table-dropdown{position:absolute;top:calc(100% + var(--sp-1));left:0;min-width:180px;max-height:320px;overflow-y:auto;background:var(--surface-raised);border:1px solid var(--border-emphasis);border-radius:var(--radius-md);padding:var(--sp-1);z-index:50}.table-dropdown-item{display:block;width:100%;text-align:left;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);font-size:13px;font-family:var(--font-data);color:var(--ink-secondary);transition:background var(--ease),color var(--ease)}.table-dropdown-item:hover{background:var(--control-bg-hover);color:var(--ink)}.table-dropdown-item.active{color:var(--accent)}.settings-trigger{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-sm);color:var(--ink-tertiary);transition:background var(--ease),color var(--ease)}.settings-trigger:hover{background:var(--control-bg-hover);color:var(--ink-secondary)}.settings-modal{width:360px;max-height:80vh;background:var(--surface-raised);border:1px solid var(--border-emphasis);border-radius:var(--radius-lg);box-shadow:0 16px 48px #00000026;overflow-y:auto;animation:popover-in .15s ease-out}[data-theme=dark] .settings-modal{box-shadow:0 16px 48px #0006}.settings-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)}.settings-modal-title{font-size:13px;font-weight:600;color:var(--ink)}.settings-modal-body{padding:var(--sp-4) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}.settings-section{display:flex;flex-direction:column;gap:var(--sp-2)}.settings-label{font-size:11px;font-weight:500;color:var(--ink-tertiary);text-transform:uppercase;letter-spacing:.04em}.settings-row{display:flex;gap:var(--sp-1)}.theme-switcher{display:flex;background:var(--control-bg);border-radius:var(--radius-md);padding:3px;gap:2px}.theme-option{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px var(--sp-2);border-radius:calc(var(--radius-md) - 2px);background:transparent;color:var(--ink-tertiary);font-size:12px;cursor:pointer;transition:all var(--ease);border:none}.theme-option:hover{color:var(--ink-secondary)}.theme-option.active{background:var(--surface-raised);color:var(--ink);box-shadow:0 1px 3px #00000014,0 0 0 1px var(--border)}.settings-option{flex:1;padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-sm);font-size:12px;color:var(--ink-secondary);background:var(--control-bg);border:1px solid transparent;transition:all var(--ease);text-align:center}.settings-option:hover{background:var(--control-bg-hover)}.settings-option.active{background:var(--accent-subtle);color:var(--accent);border-color:var(--accent)}.settings-divider{height:1px;background:var(--border);margin:0 calc(-1 * var(--sp-3))}.settings-help-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--sp-2) 0;font-size:12px;color:var(--ink-secondary);transition:color var(--ease)}.settings-help-btn:hover{color:var(--ink)}.settings-help-btn kbd{font-size:11px;font-family:var(--font-data);color:var(--ink-muted);background:var(--control-bg);border:1px solid var(--border);border-radius:4px;padding:1px 6px}.settings-license-pitch{display:flex;flex-direction:column;gap:2px}.settings-license-headline{font-size:12px;font-weight:500;color:var(--ink)}.settings-license-terms{font-size:11px;color:var(--ink-tertiary);line-height:1.4}.settings-license-status{font-size:12px;color:var(--ink-secondary)}.settings-license-actions{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-1)}.settings-upgrade-btn{font-size:12px;font-weight:500;color:var(--surface-raised);background:var(--accent);padding:5px var(--sp-3);border-radius:var(--radius-sm);transition:background var(--ease)}.settings-upgrade-btn:hover{background:var(--accent-hover)}.settings-license-activate{display:flex;gap:var(--sp-1);margin-top:var(--sp-1)}.settings-license-input{flex:1;font-size:12px;font-family:var(--font-data);padding:5px var(--sp-2);background:var(--control-bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--ink);outline:none;transition:border-color var(--ease)}.settings-license-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--control-focus-ring)}.settings-license-input::placeholder{color:var(--ink-muted)}.settings-activate-btn{font-size:12px;font-weight:500;color:var(--ink-secondary);background:var(--control-bg);border:1px solid var(--border);padding:5px var(--sp-3);border-radius:var(--radius-sm);transition:all var(--ease)}.settings-activate-btn:hover:not(:disabled){background:var(--control-bg-hover);color:var(--ink)}.settings-activate-btn:disabled{opacity:.4;cursor:default}.settings-license-error{font-size:11px;color:var(--error)}.settings-link-btn{font-size:11px;color:var(--ink-tertiary);transition:color var(--ease)}.settings-link-btn:hover{color:var(--ink-secondary)}.settings-toggle-row{display:flex;align-items:center;justify-content:space-between;cursor:pointer;gap:var(--sp-3)}.settings-toggle-label{font-size:12px;color:var(--ink-secondary)}.settings-toggle{width:32px;height:18px;appearance:none;-webkit-appearance:none;background:var(--control-bg);border:1px solid var(--border);border-radius:9px;position:relative;cursor:pointer;transition:background var(--ease),border-color var(--ease);flex-shrink:0}.settings-toggle:after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--ink-muted);transition:transform var(--ease),background var(--ease)}.settings-toggle:checked{background:var(--accent);border-color:var(--accent)}.settings-toggle:checked:after{transform:translate(14px);background:#fff}.help-overlay{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:100}[data-theme=dark] .help-overlay{background:#0009}.help-modal{background:var(--surface-raised);border:1px solid var(--border-emphasis);border-radius:var(--radius-lg);width:400px;max-height:80vh;overflow-y:auto}.help-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)}.help-title{font-size:14px;font-weight:600;color:var(--ink)}.help-close{color:var(--ink-tertiary)}.help-close kbd{font-size:11px;font-family:var(--font-data);color:var(--ink-tertiary);background:var(--control-bg);border:1px solid var(--border);border-radius:4px;padding:2px 8px}.help-body{padding:var(--sp-3) var(--sp-5) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}.help-category{display:flex;flex-direction:column;gap:var(--sp-1)}.help-category-label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-tertiary);padding-bottom:var(--sp-1)}.help-binding{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-1) 0}.help-binding-label{font-size:13px;color:var(--ink-secondary)}.help-key{font-size:12px;font-family:var(--font-data);color:var(--ink-tertiary);background:var(--control-bg);border:1px solid var(--border);border-radius:4px;padding:2px 8px;min-width:28px;text-align:center}.main{flex:1;overflow:auto;background:var(--canvas);padding-bottom:120px}.data-table-wrapper{min-width:100%}.data-table{width:100%;border-collapse:collapse;table-layout:auto}.data-table th{position:sticky;top:0;background:var(--surface);padding:var(--sp-2) var(--sp-4);text-align:left;font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-tertiary);border-bottom:1px solid var(--border-emphasis);box-shadow:0 2px 4px -1px #0000000f;white-space:nowrap;z-index:10}.sortable-th{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--ease)}.sortable-th:hover{color:var(--ink-secondary)}.sort-indicator{margin-left:var(--sp-1);font-size:10px;color:var(--accent)}.data-table td{padding:var(--sp-2) var(--sp-4);font-family:var(--font-data);font-size:12.5px;color:var(--ink);border-bottom:1px solid var(--border);white-space:nowrap;max-width:360px;overflow:hidden;text-overflow:ellipsis}.data-table tr:hover td{background:var(--row-hover)}.data-table tr.selected-row td,.data-table tr.selected-row:hover td{background:var(--accent-subtle)}.data-table td.null-value{color:var(--ink-muted);font-style:italic}.query-bar{position:absolute;bottom:calc(28px + var(--sp-4));left:50%;transform:translate(-50%);width:100%;display:flex;justify-content:center;padding:0 var(--sp-6);pointer-events:none;z-index:30}.query-bar-inner{width:100%;max-width:680px;display:flex;flex-direction:column;gap:var(--sp-1);pointer-events:auto}.query-input{width:100%;padding:var(--sp-3) var(--sp-4);padding-right:80px;background:var(--surface-raised);border:1px solid var(--border-emphasis);border-radius:var(--radius-lg);font-family:var(--font-data);font-size:13px;line-height:1.5;color:var(--ink);resize:none;outline:none;transition:border-color var(--ease),box-shadow var(--ease);min-height:44px;max-height:160px;overflow-y:auto;scrollbar-width:none}.query-input::-webkit-scrollbar{display:none}.query-input::placeholder{color:var(--ink-muted)}.query-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--control-focus-ring)}.query-input-row{position:relative;display:flex;align-items:center}.query-shortcut-hint{position:absolute;right:var(--sp-4);font-size:11px;font-family:var(--font-data);color:var(--ink-muted);pointer-events:none;display:flex;align-items:center;gap:2px}.query-input-row .query-input:focus~.query-shortcut-hint{opacity:.5}.query-shortcut-hint kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:1px var(--sp-1) 0;background:var(--control-bg);border:1px solid var(--border);border-radius:4px;font-size:11px;line-height:1;font-family:system-ui,-apple-system,sans-serif;color:var(--ink-tertiary)}.query-meta{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);font-size:11px;color:var(--ink-tertiary);min-height:18px}.query-meta .duration{font-family:var(--font-data)}.query-meta .error{color:var(--error)}.color-picker-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-2)}.color-swatch{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:border-color var(--ease),transform var(--ease);padding:0}.color-swatch:hover{transform:scale(1.15)}.color-swatch.active{border-color:var(--ink)}.color-picker-custom{display:flex;align-items:center;gap:var(--sp-2)}.color-picker-native{width:28px;height:28px;border:none;border-radius:50%;cursor:pointer;padding:0;background:none}.color-picker-native::-webkit-color-swatch-wrapper{padding:0}.color-picker-native::-webkit-color-swatch{border:2px solid var(--border-emphasis);border-radius:50%}.color-picker-hex{font-family:var(--font-data);font-size:12px;color:var(--ink-secondary)}.palette-overlay{position:fixed;inset:0;z-index:90;background:#00000040;display:flex;justify-content:center;padding-top:min(20vh,140px);animation:palette-fade-in .12s ease-out}[data-theme=dark] .palette-overlay{background:#0000008c}@keyframes palette-fade-in{0%{opacity:0}to{opacity:1}}.palette{width:440px;max-height:min(60vh,420px);background:var(--surface-raised);border:1px solid var(--border-emphasis);border-radius:var(--radius-lg);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px #0000001f,0 2px 8px #0000000f;animation:palette-slide-in .15s cubic-bezier(.16,1,.3,1);align-self:flex-start}[data-theme=dark] .palette{box-shadow:0 8px 32px #0006,0 2px 8px #0003}@keyframes palette-slide-in{0%{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.palette-input-row{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border)}.palette-search-icon{flex-shrink:0;color:var(--ink-muted)}.palette-input{flex:1;border:none;background:transparent;font-size:14px;color:var(--ink);outline:none;font-family:var(--font-body)}.palette-input::placeholder{color:var(--ink-muted)}.palette-list{flex:1;overflow-y:auto;padding:var(--sp-1)}.palette-item{display:flex;align-items:center;gap:var(--sp-3);width:100%;text-align:left;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);font-size:13px;font-family:var(--font-data);color:var(--ink-secondary);transition:background 80ms ease,color 80ms ease}.palette-item.focused{background:var(--control-bg-hover);color:var(--ink)}.palette-item.active .palette-item-icon{color:var(--accent)}.palette-item-icon{font-size:12px;color:var(--ink-muted);flex-shrink:0}.palette-item-name{flex:1}.palette-item-badge{font-size:10px;font-family:var(--font-data);color:var(--accent);background:var(--accent-subtle);padding:1px 6px;border-radius:3px;letter-spacing:.02em}.palette-item-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.palette-item-dot.connected{background:var(--connected)}.palette-item-dot.disconnected{background:var(--ink-muted)}.palette-item-meta{font-size:11px;color:var(--ink-muted)}.palette-divider{height:1px;background:var(--border);margin:var(--sp-1) var(--sp-2)}.palette-item-action .palette-item-icon{font-size:14px;font-weight:300}.palette-empty{padding:var(--sp-4);text-align:center;font-size:12px;color:var(--ink-muted)}.palette-footer{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-2) var(--sp-4);border-top:1px solid var(--border)}.palette-hint{font-size:11px;color:var(--ink-muted);display:flex;align-items:center;gap:var(--sp-1)}.palette-hint kbd{font-size:10px;font-family:var(--font-data);color:var(--ink-tertiary);background:var(--control-bg);border:1px solid var(--border);border-radius:3px;padding:1px 5px}.connect-palette{max-height:none}.connect-body{padding:var(--sp-4) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}.connect-field{display:flex;flex-direction:column;gap:var(--sp-1)}.connect-label{font-size:11px;font-weight:500;color:var(--ink-tertiary);text-transform:uppercase;letter-spacing:.04em}.connect-input{padding:var(--sp-2) var(--sp-3);background:var(--control-bg);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;color:var(--ink);outline:none;transition:border-color var(--ease),box-shadow var(--ease)}.connect-input.mono{font-family:var(--font-data);font-size:12px}.connect-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--control-focus-ring)}.connect-input::placeholder{color:var(--ink-muted)}.connect-fields-grid{display:grid;grid-template-columns:1fr 100px;gap:var(--sp-3)}.connect-fields-grid .full-width{grid-column:1 / -1}.connect-toggle-mode{font-size:12px;color:var(--accent);text-align:left;transition:color var(--ease);margin-top:calc(-1 * var(--sp-2))}.connect-toggle-mode:hover{color:var(--accent-hover)}.connect-test-slot{min-height:32px;display:flex;align-items:center}.connect-test-result{font-size:12px;font-family:var(--font-data);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);transition:opacity .15s ease}.connect-test-result.success{color:var(--connected);background:#3d8b400f}.connect-test-result.error{color:var(--error);background:var(--error-subtle)}.connect-upgrade-callout{font-size:12px;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);color:var(--text-secondary);background:var(--surface-hover);border:1px solid var(--border)}.connect-upgrade-callout a{color:var(--accent);text-decoration:none;font-weight:500}.connect-upgrade-callout a:hover{text-decoration:underline}.connect-footer{justify-content:flex-end}.connect-actions{display:flex;justify-content:flex-end;gap:var(--sp-3)}.connect-btn-secondary,.connect-btn-primary{display:inline-flex;align-items:center;gap:var(--sp-2);padding:7px var(--sp-4);border-radius:var(--radius-sm);font-size:13px;font-family:var(--font-data);letter-spacing:-.01em;transition:all var(--ease)}.connect-btn-secondary{color:var(--ink-tertiary);background:transparent;border:1px solid var(--border)}.connect-btn-secondary:hover:not(:disabled){color:var(--ink-secondary);border-color:var(--border-emphasis);background:var(--control-bg)}.connect-btn-secondary:disabled{opacity:.4}.connect-btn-primary{color:var(--accent);background:var(--accent-subtle);border:1px solid var(--accent);font-weight:500}.connect-btn-primary:hover{background:var(--accent);color:#fff}.connect-btn-primary:hover .cta-kbd{background:#ffffff26;border-color:#fff3;color:#ffffffb3}.empty-state{position:relative;height:100%;overflow:hidden}.empty-state-stripes{position:absolute;inset:0;background-image:repeating-linear-gradient(-45deg,transparent,transparent 11px,var(--border) 11px,var(--border) 12px);opacity:.5;mask-image:radial-gradient(ellipse 60% 50% at 50% 50%,black,transparent);-webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 50%,black,transparent)}.empty-state-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:var(--sp-4)}.empty-state-emoji{font-size:48px;line-height:1}.empty-state-text{font-size:14px;color:var(--ink-tertiary);letter-spacing:-.01em}.connect-cta{display:inline-flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-2);padding:var(--sp-3) var(--sp-5);border-radius:var(--radius-md);font-size:13px;font-weight:500;color:var(--ink);background:var(--surface-raised);border:1px solid var(--border-emphasis);transition:all var(--ease);box-shadow:0 1px 3px #0000000a}.connect-cta:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 1px 6px #0000000f}.cta-kbd{font-size:11px;font-family:var(--font-data);color:var(--ink-muted);background:var(--control-bg);border:1px solid var(--border);border-radius:4px;padding:2px 8px;transition:border-color .1s ease,background .1s ease}.kbd-char-active{color:var(--accent);transition:color 50ms ease}.state-message{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:var(--sp-3);color:var(--ink-tertiary);font-size:14px;overflow:hidden}.state-message:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(-45deg,transparent,transparent 11px,var(--border) 11px,var(--border) 12px);opacity:.5;mask-image:radial-gradient(ellipse 60% 50% at 50% 50%,black,transparent);-webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 50%,black,transparent);pointer-events:none}.state-message>*{position:relative;z-index:1}.state-message .hint{font-size:12px;color:var(--ink-muted)}.status-bar{display:flex;align-items:center;justify-content:space-between;height:28px;padding:0 var(--sp-4);background:var(--surface);border-top:1px solid var(--border);font-size:11px;font-family:var(--font-data);color:var(--ink-tertiary);flex-shrink:0;z-index:31}.status-bar-left{display:flex;align-items:center;gap:var(--sp-3)}.status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;transition:background .3s ease}.status-dot.connected{background:var(--connected)}.status-dot.disconnected{background:var(--ink-muted)}.status-dot.pulse{animation:dot-pulse .6s ease-out}@keyframes dot-pulse{0%{box-shadow:0 0 0 0 var(--connected)}50%{box-shadow:0 0 0 4px transparent}to{box-shadow:0 0 0 0 transparent}}.status-dot.jiggle{animation:dot-jiggle .3s ease}@keyframes dot-jiggle{0%{transform:scale(1)}30%{transform:scale(1.4)}60%{transform:scale(.85)}to{transform:scale(1)}}.status-dot-wrapper{position:relative;display:flex;align-items:center;-webkit-user-select:none;user-select:none}.status-dot{cursor:pointer}.status-popover{position:absolute;bottom:calc(100% + 8px);left:0;background:var(--surface-raised);border:1px solid var(--border-emphasis);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-4);white-space:nowrap;display:flex;flex-direction:column;gap:var(--sp-2);font-family:var(--font-data);box-shadow:0 4px 16px #0000001f;animation:popover-in .15s ease-out;z-index:40}[data-theme=dark] .status-popover{box-shadow:0 4px 16px #00000059}@keyframes popover-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.status-popover-quip{font-size:12px;color:var(--ink)}.status-popover-stats{display:flex;align-items:center;gap:var(--sp-2);font-size:10px;color:var(--ink-muted)}.status-popover-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}.status-popover-dot.connected{background:var(--connected)}.status-popover-dot.disconnected{background:var(--ink-muted)}.status-bar-right{display:flex;align-items:center;gap:var(--sp-1)}.status-duration{font-family:var(--font-data)}.page-btn{padding:2px var(--sp-2);border-radius:var(--radius-sm);font-size:11px;color:var(--ink-secondary);transition:background var(--ease)}.page-btn:hover:not(:disabled){background:var(--control-bg-hover)}.page-btn:disabled{color:var(--ink-muted);cursor:not-allowed}.whats-new-btn{position:relative;display:flex;align-items:center;padding:2px 4px;border-radius:var(--radius-sm);color:var(--ink-muted);transition:color var(--ease),background var(--ease);margin-left:var(--sp-1)}.whats-new-btn:hover{color:var(--ink-secondary);background:var(--control-bg-hover)}.update-dot{position:absolute;top:1px;right:1px;width:6px;height:6px;border-radius:50%;background:var(--red)}.whats-new-modal{background:var(--surface-raised);border:1px solid var(--border-emphasis);border-radius:var(--radius-lg);width:480px;max-height:70vh;display:flex;flex-direction:column;box-shadow:0 16px 48px #00000026}.whats-new-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border)}.whats-new-header h2{font-size:14px;font-weight:600;margin:0}.whats-new-banner{padding:var(--sp-2) var(--sp-4);background:var(--accent-surface);color:var(--accent);font-size:12px;border-bottom:1px solid var(--border)}.whats-new-banner code{background:var(--control-bg);padding:1px 4px;border-radius:var(--radius-sm);font-size:11px}.whats-new-feed{overflow-y:auto;padding:var(--sp-3) var(--sp-4)}.whats-new-release{margin-bottom:var(--sp-4)}.whats-new-release:last-child{margin-bottom:0}.whats-new-release.newer{border-left:2px solid var(--accent);padding-left:var(--sp-3)}.whats-new-release.current{border-left:2px solid var(--ink-muted);padding-left:var(--sp-3)}.whats-new-release.older{opacity:.5;padding-left:calc(var(--sp-3) + 2px)}.whats-new-release-header{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-1)}.whats-new-version{font-weight:600;font-size:13px}.whats-new-date{color:var(--ink-muted);font-size:12px}.whats-new-installed{color:var(--ink-muted);font-size:11px;font-style:italic}.whats-new-entries{margin:0;padding-left:var(--sp-4);font-size:12px;color:var(--ink-secondary);line-height:1.6}.whats-new-empty{text-align:center;color:var(--ink-muted);padding:var(--sp-4);font-size:12px}.consent-banner{position:fixed;bottom:80px;left:50%;transform:translate(-50%);z-index:200;animation:consent-in .3s ease-out}@keyframes consent-in{0%{opacity:0;transform:translate(-50%) translateY(8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.consent-banner-inner{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5);background:var(--surface-raised);border:1px solid var(--border-emphasis);border-radius:var(--radius-lg);box-shadow:0 8px 32px #0000001a,0 2px 8px #0000000f}[data-theme=dark] .consent-banner-inner{box-shadow:0 8px 32px #00000059,0 2px 8px #0003}.consent-banner-text{display:flex;flex-direction:column;gap:2px}.consent-banner-title{font-size:13px;font-weight:600;color:var(--ink)}.consent-banner-desc{font-size:11px;color:var(--ink-tertiary)}.consent-banner-actions{display:flex;gap:var(--sp-2);flex-shrink:0}.consent-btn-dismiss{padding:6px 12px;border-radius:var(--radius-sm);font-size:12px;color:var(--ink-tertiary);background:transparent;transition:color var(--ease)}.consent-btn-dismiss:hover{color:var(--ink-secondary)}.consent-btn-enable{padding:6px 14px;border-radius:var(--radius-sm);font-size:12px;font-weight:500;color:#fff;background:var(--accent);transition:background var(--ease)}.consent-btn-enable:hover{background:var(--accent-hover)}.welcome-page{height:100%;display:flex;align-items:center;justify-content:center;background:var(--canvas);padding:var(--sp-6)}.welcome-card{max-width:420px;width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--sp-6)}.welcome-logo{font-size:48px;line-height:1}.welcome-title{font-size:28px;font-weight:700;color:var(--ink);letter-spacing:-.02em}.welcome-subtitle{font-size:14px;color:var(--ink-tertiary);margin-top:calc(-1 * var(--sp-4))}.welcome-steps{width:100%;display:flex;flex-direction:column;gap:var(--sp-3)}.welcome-step{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)}.welcome-step-num{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent-subtle);color:var(--accent);font-size:11px;font-weight:600;flex-shrink:0;margin-top:1px}.welcome-step-content{display:flex;flex-direction:column;gap:4px}.welcome-step-label{font-size:13px;font-weight:500;color:var(--ink)}.welcome-code{font-family:var(--font-data);font-size:12px;color:var(--ink-secondary);background:var(--control-bg);padding:2px 8px;border-radius:var(--radius-sm);display:inline-block}.welcome-actions{display:flex;gap:var(--sp-3);width:100%}.welcome-btn-primary{flex:1;padding:10px var(--sp-4);border-radius:var(--radius-md);background:var(--accent);color:#fff;font-size:13px;font-weight:500;text-align:center;text-decoration:none;transition:background var(--ease)}.welcome-btn-primary:hover{background:var(--accent-hover)}.welcome-btn-secondary{flex:1;padding:10px var(--sp-4);border-radius:var(--radius-md);background:var(--control-bg);color:var(--ink-secondary);font-size:13px;font-weight:500;text-align:center;text-decoration:none;border:1px solid var(--border);transition:all var(--ease)}.welcome-btn-secondary:hover{background:var(--control-bg-hover);color:var(--ink)}.demo-page{height:100%;display:flex;flex-direction:column;background:var(--canvas)}.demo-badge{font-size:11px;font-weight:500;color:var(--accent);background:var(--accent-subtle);padding:3px 10px;border-radius:999px;letter-spacing:.02em}.demo-open-btn{font-size:12px;color:var(--ink-secondary);text-decoration:none;padding:4px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);transition:all var(--ease)}.demo-open-btn:hover{background:var(--control-bg-hover);color:var(--ink)}
