*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #09090b;--surface: #18181b;--surface-2: #27272a;--border: #3f3f46;--text: #fafafa;--text-muted: #a1a1aa;--accent: #14b8a6;--accent-dim: #0f766e;--accent-glow: rgba(20, 184, 166, .15);--font-body: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace;--topbar-h: 52px;--sidebar-w: 200px;--statusbar-h: 26px}html,body{height:100%;font-family:var(--font-body);background:var(--bg);color:var(--text);overflow:hidden}#app{display:flex;flex-direction:column;height:100vh}.topbar{height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#18181bd9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);gap:12px;flex-shrink:0;z-index:10}.topbar-brand{display:flex;align-items:center;gap:8px;flex-shrink:0}.brand-name{font-weight:700;font-size:15px;color:var(--accent);letter-spacing:-.3px}.brand-tagline{font-size:11px;color:var(--text-muted);display:none}@media(min-width:900px){.brand-tagline{display:inline}}.topbar-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text);font-family:var(--font-body);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}.btn:hover{background:var(--surface-2);border-color:var(--accent);color:var(--accent)}.btn-ghost{border-color:var(--border)}.btn-run{background:var(--accent);border-color:var(--accent);color:#000;font-weight:600;padding:5px 16px}.btn-run:hover{background:#2dd4bf;border-color:#2dd4bf;color:#000}.sample-select{padding:5px 8px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:12px;cursor:pointer;max-width:200px}.sample-select:focus{outline:none;border-color:var(--accent)}.workspace{display:flex;flex:1;overflow:hidden}.sidebar{width:var(--sidebar-w);flex-shrink:0;border-right:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;overflow:hidden}.sidebar-header{padding:10px 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);border-bottom:1px solid var(--border);flex-shrink:0}.table-list{flex:1;overflow-y:auto;padding:8px 0}.sidebar-empty{padding:12px;font-size:12px;color:var(--text-muted)}.table-item{cursor:pointer;padding:6px 12px}.table-item:hover .table-item-name{color:var(--accent)}.table-item-name{font-size:12px;font-family:var(--font-mono);color:var(--text);display:flex;align-items:center;gap:6px}.table-item-rows{font-size:10px;color:var(--text-muted);margin-top:1px}.table-schema{padding:0 12px 6px;display:none}.table-schema.open{display:block}.schema-col{display:flex;justify-content:space-between;font-size:10px;padding:1px 0}.schema-col-name{font-family:var(--font-mono);color:var(--text-muted)}.schema-col-type{color:var(--accent-dim);font-family:var(--font-mono)}.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden}.editor-pane{display:flex;flex-direction:column;height:200px;flex-shrink:0;border-bottom:1px solid var(--border)}.editor-label{padding:6px 12px;font-size:11px;font-weight:500;color:var(--text-muted);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-shrink:0}kbd{display:inline-block;padding:1px 5px;border:1px solid var(--border);border-radius:3px;font-family:var(--font-mono);font-size:10px;color:var(--text-muted);background:var(--bg)}.editor-wrapper{display:flex;flex:1;overflow:hidden;background:#18181b}.line-numbers{padding:12px 8px;font-family:var(--font-mono);font-size:13px;line-height:1.6;color:#52525b;text-align:right;user-select:none;border-right:1px solid var(--border);min-width:40px;white-space:pre;overflow:hidden}.sql-editor{flex:1;padding:12px 14px;background:#18181b;color:#e4e4e7;font-family:var(--font-mono);font-size:13px;line-height:1.6;border:none;outline:none;resize:none;caret-color:var(--accent);overflow-y:auto}.sql-editor:focus{box-shadow:inset 0 0 0 1px var(--accent)}.results-pane{flex:1;display:flex;flex-direction:column;overflow:hidden}.results-header{display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;height:36px}.results-tabs{display:flex;gap:0}.tab{padding:6px 14px;font-size:12px;font-weight:500;background:transparent;border:none;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}.tab:hover{color:var(--text)}.tab.active{color:var(--accent);border-bottom-color:var(--accent)}.results-meta{font-size:11px;font-family:var(--font-mono);color:var(--text-muted)}.results-meta .timing{color:var(--accent);font-weight:500}.tab-content{flex:1;overflow:auto}.tab-content.hidden{display:none}.results-placeholder,.plan-placeholder{display:flex;align-items:center;justify-content:center;height:100%;padding:40px}.placeholder-text{font-size:13px;color:var(--text-muted)}.results-table-wrap{overflow:auto;height:100%}table.data-table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:12px}table.data-table thead{position:sticky;top:0;z-index:2;background:var(--surface-2)}table.data-table th{padding:8px 14px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);border-bottom:1px solid var(--border);white-space:nowrap}table.data-table td{padding:5px 14px;border-bottom:1px solid rgba(63,63,70,.5);color:var(--text);white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}table.data-table tbody tr:nth-child(odd) td{background:var(--surface)}table.data-table tbody tr:nth-child(2n) td{background:#1c1c1f}table.data-table tbody tr:hover td{background:var(--accent-glow)}table.data-table td.num{text-align:right;color:#7dd3fc}.table-footer{padding:8px 14px;font-size:11px;font-family:var(--font-mono);color:var(--text-muted);border-top:1px solid var(--border);background:var(--surface);flex-shrink:0;display:flex;justify-content:space-between}.table-footer .timing-badge{color:var(--accent);font-weight:600}.plan-view{padding:16px;font-family:var(--font-mono);font-size:13px;line-height:1.8}.plan-line{color:#e4e4e7}.plan-line .plan-node-type{color:var(--accent);font-weight:500}.plan-line .plan-detail{color:var(--text-muted)}.statusbar{height:var(--statusbar-h);display:flex;align-items:center;padding:0 12px;background:var(--accent-dim);font-size:11px;font-family:var(--font-mono);color:#ffffffe6;flex-shrink:0;gap:8px}.statusbar .error{color:#fca5a5}.spin{display:inline-block;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#52525b}