/* ── TOKENS ── */
:root,[data-theme="light"]{
--bg:#f0f4f8;
--surface:#ffffff;
--surface2:#f8fafc;
--surface3:#f1f5f9;
--border:rgba(0,0,0,0.08);
--border2:rgba(14,165,233,0.3);
--accent:#0ea5e9;
--accent2:#7c3aed;
--accent3:#d97706;
--accent4:#059669;
--text:#0f172a;
--text2:#475569;
--text3:#94a3b8;
--shadow:0 1px 3px rgba(0,0,0,0.07),0 4px 20px rgba(0,0,0,0.05);
--shadow-lg:0 8px 40px rgba(0,0,0,0.1);
--nav-bg:rgba(248,250,252,0.96);
/* editor tokens (always dark) */
--ed-bg:#0d1117;
--ed-bg2:#161b22;
--ed-gutter:#3d444d;
--ed-line-hover:rgba(255,255,255,0.03);
--ed-select:rgba(14,165,233,0.2);
--t-kw:#ff7b72;
--t-fn:#d2a8ff;
--t-str:#a5d6ff;
--t-num:#ffa657;
--t-cm:#8b949e;
--t-op:#79c0ff;
--t-id:#e6edf3;
--t-type:#ffa657;
--t-alias:#f0883e;
/* result table */
--tbl-head:#f8fafc;
--tbl-row:#ffffff;
--tbl-row-alt:#f8fafc;
--tbl-border:rgba(0,0,0,0.06);
}
[data-theme="dark"]{
--bg:#0a0d12;
--surface:#141b24;
--surface2:#0f1319;
--surface3:#1a2333;
--border:rgba(255,255,255,0.07);
--border2:rgba(0,212,255,0.25);
--accent:#00d4ff;
--accent2:#7c3aed;
--accent3:#f59e0b;
--accent4:#10b981;
--text:#e8edf5;
--text2:#94a3b8;
--text3:#475569;
--shadow:0 1px 3px rgba(0,0,0,0.3),0 4px 20px rgba(0,0,0,0.4);
--shadow-lg:0 8px 40px rgba(0,0,0,0.5);
--nav-bg:rgba(10,13,18,0.96);
--ed-bg:#0d1117;
--ed-bg2:#161b22;
--ed-gutter:#3d444d;
--tbl-head:#141b24;
--tbl-row:#141b24;
--tbl-row-alt:#0f1319;
--tbl-border:rgba(255,255,255,0.06);
}
html,body{height:100%;overflow:hidden;font-family:'Outfit',sans-serif;font-size:14px;color:var(--text);background:var(--bg);transition:background .3s,color .3s}
/* ── NAV ── */
nav{
height:52px;flex-shrink:0;
background:var(--nav-bg);
border-bottom:1px solid var(--border);
backdrop-filter:blur(16px);
display:flex;align-items:center;
padding:0 1rem;gap:10px;
position:relative;z-index:50;
}
.logo{display:flex;align-items:center;gap:7px;font-family:'DM Serif Display',serif;font-size:17px;color:var(--text);text-decoration:none;flex-shrink:0}
.logo-icon{width:26px;height:26px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;font-family:'DM Mono',monospace}
.logo span{color:var(--accent)}
.nav-div{width:1px;height:16px;background:var(--border);flex-shrink:0}
.nav-title{font-size:13px;font-weight:600;color:var(--text2)}
.nav-spacer{flex:1}
.nav-right{display:flex;align-items:center;gap:8px}
/* theme toggle */
.tt{position:relative;width:44px;height:24px;cursor:pointer;flex-shrink:0}
.tt input{opacity:0;width:0;height:0;position:absolute}
.tt-track{width:44px;height:24px;border-radius:100px;background:var(--surface3);border:1px solid var(--border);display:flex;align-items:center;padding:2px;transition:background .3s}
.tt-knob{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
[data-theme="light"] .tt-knob{transform:translateX(20px)}
.tt-icons{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:4px 5px;pointer-events:none}
.tt-icons span{font-size:10px;opacity:.4}
.nb{background:none;border:1px solid var(--border);color:var(--text2);padding:5px 12px;border-radius:7px;font-family:'Outfit',sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s}
.nb:hover{border-color:var(--border2);color:var(--accent)}
.nb-run{background:linear-gradient(135deg,var(--accent4),#10b981);border:none;color:#fff;padding:6px 18px;border-radius:7px;font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s;box-shadow:0 0 16px rgba(5,150,105,.25)}
.nb-run:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 0 28px rgba(5,150,105,.4)}
.nb-run:active{transform:translateY(0)}
.run-kbd{font-size:10px;background:rgba(255,255,255,.15);border-radius:4px;padding:1px 5px;font-family:'DM Mono',monospace}
/* ── LAYOUT ── */
.app{display:flex;height:calc(100vh - 52px);overflow:hidden}
/* ── LEFT SIDEBAR ── */
.sidebar{
width:240px;flex-shrink:0;
background:var(--surface);
border-right:1px solid var(--border);
display:flex;flex-direction:column;
overflow:hidden;
transition:background .3s;
}
.sb-search{
padding:10px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.sb-search input{
width:100%;background:var(--surface2);border:1px solid var(--border);
border-radius:7px;padding:6px 10px 6px 30px;
font-family:'Outfit',sans-serif;font-size:12px;color:var(--text);outline:none;
transition:border-color .2s;
}
.sb-search input:focus{border-color:var(--border2)}
.sb-search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--text3);pointer-events:none}
.sb-search-wrap{position:relative}
.sb-body{flex:1;overflow-y:auto}
.sb-body::-webkit-scrollbar{width:3px}
.sb-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.sb-section{border-bottom:1px solid var(--border)}
.sb-section-head{
padding:8px 12px;font-size:11px;font-weight:700;text-transform:uppercase;
letter-spacing:.7px;color:var(--text3);display:flex;align-items:center;
justify-content:space-between;cursor:pointer;user-select:none;
transition:color .15s;position:sticky;top:0;background:var(--surface);z-index:1;
}
.sb-section-head:hover{color:var(--text2)}
.sb-chevron{font-size:9px;transition:transform .2s}
.collapsed .sb-chevron{transform:rotate(-90deg)}
.sb-table{padding:0 0 6px}
.sb-table-item{
display:flex;align-items:center;gap:8px;
padding:5px 12px;cursor:pointer;
font-size:12px;color:var(--text2);
transition:all .1s;border-radius:0;
}
.sb-table-item:hover{background:var(--surface2);color:var(--text)}
.sb-table-item.active{background:rgba(14,165,233,.08);color:var(--accent)}
.sb-table-icon{font-size:13px;flex-shrink:0;width:16px}
.sb-table-name{flex:1;font-family:'DM Mono',monospace;font-size:11px;font-weight:500}
.sb-table-rows{font-size:10px;color:var(--text3)}
.sb-col-item{
display:flex;align-items:center;gap:6px;
padding:3px 12px 3px 28px;
font-size:11px;color:var(--text3);cursor:pointer;transition:color .1s;
}
.sb-col-item:hover{color:var(--text2)}
.sb-col-name{font-family:'DM Mono',monospace;font-size:11px;flex:1}
.sb-col-type{font-size:10px;color:var(--text3);background:var(--surface3);border-radius:3px;padding:1px 5px;font-family:'DM Mono',monospace}
.sb-col-pk{color:var(--accent3);font-size:10px}
/* ── MAIN AREA ── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
/* query tabs */
.query-tabs{
height:36px;flex-shrink:0;
background:var(--surface2);
border-bottom:1px solid var(--border);
display:flex;align-items:flex-end;
padding:0 1rem 0;gap:2px;
}
.qtab{
padding:6px 16px;border-radius:6px 6px 0 0;
font-size:12px;font-weight:500;color:var(--text3);
cursor:pointer;transition:all .15s;
border:1px solid transparent;border-bottom:none;
display:flex;align-items:center;gap:6px;white-space:nowrap;
}
.qtab.active{background:var(--surface);color:var(--accent);border-color:var(--border)}
.qtab:not(.active):hover{color:var(--text2);background:rgba(0,0,0,.03)}
[data-theme="dark"] .qtab:not(.active):hover{background:rgba(255,255,255,.03)}
.qtab-dot{width:6px;height:6px;border-radius:50%;background:var(--accent3);flex-shrink:0}
.qtab-dot.ok{background:var(--accent4)}
.qtab-dot.err{background:#ef4444}
.qtab-close{font-size:11px;color:var(--text3);border-radius:3px;padding:1px 3px;transition:all .1s;opacity:0}
.qtab:hover .qtab-close{opacity:1}
.qtab-close:hover{background:rgba(239,68,68,.15);color:#ef4444}
.tab-add{background:none;border:none;color:var(--text3);font-size:16px;cursor:pointer;padding:0 8px;line-height:1;transition:color .15s;margin-bottom:2px}
.tab-add:hover{color:var(--accent)}
/* editor pane */
.editor-pane{
display:flex;flex-direction:column;
background:var(--ed-bg);
flex-shrink:0;
transition:height .3s;
position:relative;
}
.editor-header{
height:32px;background:var(--ed-bg2);border-bottom:1px solid rgba(255,255,255,.06);
display:flex;align-items:center;padding:0 12px;gap:10px;flex-shrink:0;
}
.ed-title{font-family:'DM Mono',monospace;font-size:11px;color:#8b949e}
.ed-spacer{flex:1}
.ed-actions{display:flex;gap:6px}
.ed-btn{
background:none;border:1px solid rgba(255,255,255,.1);
color:#8b949e;padding:3px 8px;border-radius:5px;
font-family:'DM Mono',monospace;font-size:10px;
cursor:pointer;transition:all .15s;
}
.ed-btn:hover{border-color:rgba(14,165,233,.4);color:#79c0ff}
/* editor body */
.editor-body{
flex:1;display:flex;overflow:hidden;
position:relative;min-height:180px;
}
.line-nums{
width:46px;flex-shrink:0;padding:14px 0;
background:var(--ed-bg);
border-right:1px solid rgba(255,255,255,.05);
font-family:'DM Mono',monospace;font-size:13px;
line-height:1.72;color:var(--ed-gutter);
text-align:right;user-select:none;overflow:hidden;
}
.line-nums div{padding-right:10px}
.sql-ta{
flex:1;padding:14px;
font-family:'DM Mono',monospace;font-size:13px;line-height:1.72;
color:#e6edf3;background:transparent;
border:none;outline:none;resize:none;
overflow:auto;tab-size:2;caret-color:#00d4ff;
white-space:pre;
}
.sql-ta::selection{background:var(--ed-select)}
.sql-ta::-webkit-scrollbar{width:4px;height:4px}
.sql-ta::-webkit-scrollbar-thumb{background:#21262d;border-radius:2px}
/* highlighted overlay */
.highlight-layer{
position:absolute;
top:0;left:46px;right:0;bottom:0;
padding:14px;
font-family:'DM Mono',monospace;font-size:13px;line-height:1.72;
pointer-events:none;overflow:hidden;white-space:pre;
color:transparent;
}
/* resize handle */
.resize-handle{
height:5px;background:rgba(255,255,255,.04);
cursor:row-resize;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
transition:background .15s;
}
.resize-handle:hover,.resize-handle.dragging{background:rgba(14,165,233,.2)}
.resize-dots{display:flex;gap:3px}
.resize-dot{width:3px;height:3px;border-radius:50%;background:#3d444d}
/* toolbar between editor and results */
.query-toolbar{
height:34px;flex-shrink:0;
background:var(--surface2);border-bottom:1px solid var(--border);
display:flex;align-items:center;padding:0 12px;gap:8px;
}
.qt-stat{font-size:11px;color:var(--text3);font-family:'DM Mono',monospace;display:flex;align-items:center;gap:5px}
.qt-stat b{color:var(--accent4)}
.qt-stat.err-stat b{color:#ef4444}
.qt-sep{width:1px;height:14px;background:var(--border)}
.qt-spacer{flex:1}
.qt-btn{
background:none;border:1px solid var(--border);
color:var(--text3);padding:3px 10px;border-radius:5px;
font-family:'DM Mono',monospace;font-size:11px;cursor:pointer;transition:all .15s;
}
.qt-btn:hover{border-color:var(--border2);color:var(--accent)}
.qt-export{background:rgba(14,165,233,.06);border:1px solid var(--border2);color:var(--accent)}
.qt-export:hover{background:rgba(14,165,233,.12)}
/* results pane */
.results-pane{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--surface)}
.results-tabs{
display:flex;border-bottom:1px solid var(--border);
background:var(--surface2);flex-shrink:0;
}
.rtab{
padding:7px 16px;font-size:12px;font-weight:500;color:var(--text3);
cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;
display:flex;align-items:center;gap:6px;
}
.rtab.active{color:var(--accent);border-bottom-color:var(--accent)}
.rtab:not(.active):hover{color:var(--text2)}
.rtab-count{background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:100px;min-width:18px;text-align:center}
/* result table */
.table-wrap{flex:1;overflow:auto}
.table-wrap::-webkit-scrollbar{width:6px;height:6px}
.table-wrap::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.result-table{
width:100%;border-collapse:collapse;
font-family:'DM Mono',monospace;font-size:12px;
}
.result-table th{
position:sticky;top:0;z-index:2;
background:var(--tbl-head);
border-bottom:2px solid var(--border);
padding:8px 14px;
text-align:left;font-size:11px;font-weight:600;
color:var(--text3);text-transform:uppercase;letter-spacing:.5px;
white-space:nowrap;cursor:pointer;user-select:none;
transition:background .15s;
}
.result-table th:hover{background:var(--surface3);color:var(--text2)}
.result-table th.sorted-asc::after{content:' ↑';color:var(--accent)}
.result-table th.sorted-desc::after{content:' ↓';color:var(--accent)}
.result-table td{
padding:7px 14px;border-bottom:1px solid var(--tbl-border);
color:var(--text);white-space:nowrap;max-width:280px;
overflow:hidden;text-overflow:ellipsis;
transition:background .1s;
}
.result-table tr:nth-child(even) td{background:var(--tbl-row-alt)}
.result-table tr:hover td{background:rgba(14,165,233,.05)}
.result-table td.null-val{color:var(--text3);font-style:italic}
.result-table td.num-val{color:var(--accent3);text-align:right}
.result-table td.bool-val{color:var(--accent)}
.result-table td.date-val{color:var(--t-str);filter:brightness(1.4)}
/* empty / loading states */
.result-empty{
flex:1;display:flex;align-items:center;justify-content:center;
flex-direction:column;gap:12px;padding:3rem;text-align:center;
}
.result-empty-icon{font-size:36px;opacity:.4}
.result-empty-title{font-size:15px;font-weight:500;color:var(--text2)}
.result-empty-sub{font-size:13px;color:var(--text3);max-width:340px;line-height:1.6}
.result-error{
padding:1.25rem;font-family:'DM Mono',monospace;font-size:12px;
background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.15);
border-radius:8px;margin:1rem;color:#ef4444;line-height:1.7;
}
.result-error strong{display:block;font-size:13px;margin-bottom:4px;color:#f87171}
/* loading animation */
.loading-bar{
height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));
animation:loadbar 1.2s ease-in-out infinite;
position:absolute;top:0;left:0;right:0;z-index:10;
}
@keyframes loadbar{0%{transform:scaleX(0) translateX(0);transform-origin:left}50%{transform:scaleX(.6) translateX(50px)}100%{transform:scaleX(0) translateX(400px);transform-origin:right}}
/* history panel */
.history-list{padding:8px}
.hist-item{
background:var(--surface2);border:1px solid var(--border);
border-radius:8px;padding:10px 12px;margin-bottom:6px;
cursor:pointer;transition:all .15s;
}
.hist-item:hover{border-color:var(--border2)}
.hist-preview{font-family:'DM Mono',monospace;font-size:11px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.hist-meta{display:flex;gap:10px;font-size:10px;color:var(--text3)}
.hist-rows{color:var(--accent4)}
.hist-time{color:var(--accent3)}
/* explain panel */
.explain-wrap{padding:1rem;font-size:13px;color:var(--text2);line-height:1.8}
.explain-step{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.explain-step:last-child{border-bottom:none}
.explain-num{width:22px;height:22px;border-radius:50%;background:rgba(14,165,233,.1);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--accent);flex-shrink:0}
.explain-op{font-family:'DM Mono',monospace;font-size:12px;color:var(--t-kw)}
.explain-detail{font-size:12px;color:var(--text2)}
.explain-cost{margin-left:auto;font-family:'DM Mono',monospace;font-size:11px;color:var(--accent3)}
/* toast */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(60px);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 18px;font-size:13px;box-shadow:var(--shadow-lg);z-index:1000;opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;gap:8px;white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
/* autocomplete */
.autocomplete{position:absolute;background:var(--ed-bg2);border:1px solid rgba(255,255,255,.12);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:200;min-width:200px;max-height:200px;overflow-y:auto;display:none}
.autocomplete.show{display:block}
.ac-item{padding:6px 12px;font-family:'DM Mono',monospace;font-size:12px;color:#e6edf3;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .1s}
.ac-item:hover,.ac-item.active{background:rgba(14,165,233,.15)}
.ac-type{font-size:10px;padding:1px 5px;border-radius:3px;flex-shrink:0}
.ac-kw{background:rgba(255,123,114,.15);color:#ff7b72}
.ac-fn{background:rgba(210,168,255,.15);color:#d2a8ff}
.ac-tbl{background:rgba(165,214,255,.15);color:#a5d6ff}
.ac-col{background:rgba(255,166,87,.15);color:#ffa657}
/* status bar */
.status-bar{
height:22px;flex-shrink:0;
background:var(--surface2);border-top:1px solid var(--border);
display:flex;align-items:center;padding:0 12px;gap:1.5rem;
font-family:'DM Mono',monospace;font-size:11px;color:var(--text3);
}
.sb-dot{width:6px;height:6px;border-radius:50%;background:var(--accent4);display:inline-block;margin-right:4px}
.sb-dot.idle{background:var(--text3)}
.sb-dot.err{background:#ef4444}
.sb-dot.run{background:var(--accent3);animation:pulse .8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.sb-spacer{flex:1}
.sb-kbd{background:var(--surface3);border:1px solid var(--border);border-radius:3px;padding:0 4px;font-size:10px}
/* snippets panel */
.snippets-panel{padding:8px}
.snip-cat{margin-bottom:1rem}
.snip-cat-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);margin-bottom:6px;padding-left:4px}
.snip-item{
background:var(--surface2);border:1px solid var(--border);
border-radius:7px;padding:8px 10px;margin-bottom:4px;
cursor:pointer;transition:all .15s;
}
.snip-item:hover{border-color:var(--border2);background:rgba(14,165,233,.04)}
.snip-name{font-size:12px;font-weight:500;color:var(--text);margin-bottom:2px}
.snip-preview{font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}