:root{color-scheme:dark;--bg:#10161f;--panel:#18212d;--panel2:#1d2937;--text:#e2eaf3;--muted:#93a6bb;--line:#304054;--accent:#5bd5c6;--accent-ink:#102b29;--error:#ffb4a9;--head:#202e3e}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}body.light{color-scheme:light;--bg:#edf2f6;--panel:#fff;--panel2:#f2f6f8;--text:#172d41;--muted:#55697c;--line:#cedae3;--accent:#127c70;--accent-ink:#fff;--error:#a52219;--head:#e6eef3}main{padding:24px;max-width:2400px;margin:auto}header,.brand,.header-actions,.toolbar,.viewbar,.results,footer,.row,form,.search-bottom,.dialog-head{display:flex;align-items:center;gap:12px}header{justify-content:space-between;margin-bottom:24px}.logo{display:grid;place-items:center;width:48px;height:48px;background:var(--accent);color:var(--accent-ink);border-radius:12px;font:bold 22px monospace}h1{margin:0;font-size:23px;letter-spacing:-.7px}h1 span{font-size:12px;vertical-align:top;color:var(--accent)}.brand p{margin:0;color:var(--muted);font-size:12px;letter-spacing:1px}.local{color:var(--accent);font-size:12px}a{color:var(--accent)}button,.button,select,input,textarea,summary{font:inherit}button,.button,select,summary{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:6px;padding:7px 12px;cursor:pointer}button:hover,.button:hover,summary:hover{background:var(--panel2);border-color:var(--muted)}button:disabled{opacity:.4;cursor:default}.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:650}.primary:hover{background:var(--accent);filter:brightness(1.08)}input,textarea{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:8px 10px;min-width:0}input:focus,textarea:focus,button:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.toolbar{padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:9px 9px 0 0}.source{margin-left:auto;display:flex;align-items:center;gap:8px}.source select{max-width:420px}#filename{font-size:13px;color:var(--muted);overflow-wrap:anywhere}.search-panel{padding:16px;background:var(--panel);border:1px solid var(--line);border-top:0;border-radius:0 0 9px 9px}form #query{flex:1;font-family:ui-monospace,Consolas,monospace;font-size:14px}.search-bottom{justify-content:space-between;margin-top:8px;font-size:12px;color:var(--muted)}.search-bottom button{padding:2px 8px;font-size:12px;border:0;color:var(--accent)}.viewbar{margin-top:20px;flex-wrap:wrap}.viewbar label{font-size:12px;color:var(--muted)}.viewbar select{margin-left:5px}.tabs{display:flex;gap:3px;background:var(--panel);padding:3px;border:1px solid var(--line);border-radius:8px}.tabs button{border:0;background:transparent}.tabs .active{background:var(--accent);color:var(--accent-ink)}.spacer{flex:1}#columnDetails{position:relative}summary{list-style:none}.popover{position:absolute;z-index:5;top:42px;left:0;width:370px;max-width:80vw;background:var(--panel);padding:12px;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 40px #0006}.popover>input{width:100%;margin-bottom:8px}#columns{max-height:330px;overflow:auto;margin-top:8px}#columns label{display:flex;align-items:center;gap:8px;padding:4px;font-family:monospace;overflow-wrap:anywhere}#error{color:var(--error);background:var(--panel);border:1px solid var(--error);padding:12px;margin-top:16px;border-radius:6px}.results{padding:14px 0;font-size:12px;flex-wrap:wrap}#count{font-size:14px}#filterBadge{padding:2px 8px;border-radius:20px;background:var(--panel2);color:var(--muted)}#filterBadge.on{color:var(--accent);border:1px solid var(--accent)}#status{color:var(--muted);margin-left:auto}#workspace{background:var(--panel);border:1px solid var(--line);border-radius:8px;min-height:400px;overflow:hidden}#empty{padding:65px 20px;text-align:center;color:var(--muted)}#empty h2{color:var(--text);font-size:24px;font-weight:550}.empty-icon{font:40px monospace;color:var(--accent)}.muted{color:var(--muted);font-size:12px}#tableWrap{overflow:auto;max-height:65vh;min-height:400px}table{border-collapse:separate;border-spacing:0;font-size:12px;white-space:nowrap;width:100%}th{position:sticky;top:0;z-index:1;background:var(--head);text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);min-width:165px}th:first-child{min-width:65px}th button{font-size:12px;font-weight:600;background:transparent;border:0;padding:0;display:block;text-align:left}th input{width:100%;margin-top:8px;font-size:11px;padding:4px 7px}td{padding:8px 10px;border-bottom:1px solid var(--line);max-width:420px;overflow:hidden;text-overflow:ellipsis;font-family:ui-monospace,Consolas,monospace}td button{font-size:11px;padding:2px 7px}tbody tr:nth-child(even){background:var(--panel2)}tbody tr:hover{background:var(--head)}#trees{max-height:65vh;overflow:auto;padding:12px}.record{border-bottom:1px solid var(--line);padding:10px}.tree{font:13px/1.8 ui-monospace,Consolas,monospace;margin-left:18px;overflow-wrap:anywhere;white-space:pre-wrap}.tree summary{padding:1px 4px;display:list-item;list-style:disclosure-closed;border:0;border-radius:0;background:transparent}.tree[open]>summary{list-style:disclosure-open}.scalar{padding-left:4px}.key{color:var(--muted)}.string{color:var(--accent)}.number,.boolean{color:#dba5ff}body.light .number,body.light .boolean{color:#783da1}.null{color:var(--muted)}footer{justify-content:space-between;padding:14px 0;color:var(--muted);font-size:12px}footer>div{display:flex;align-items:center;gap:8px}#pageNumber{width:65px;padding:5px}dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:12px;max-width:900px;width:85vw;max-height:85vh;padding:24px}dialog::backdrop{background:#0009}.dialog-head{justify-content:space-between}.dialog-head h2{margin:0}dialog p{color:var(--muted)}dialog label{display:block;margin:12px 0}dialog label input,dialog label select,textarea{display:block;width:100%;margin-top:5px}textarea{font-family:monospace}#recordTree{overflow:auto}#presetMessage{color:var(--accent)}hr{border:0;border-top:1px solid var(--line);margin-top:24px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}.drag{outline:3px dashed var(--accent);outline-offset:-8px}body.busy #status{color:var(--accent)}@media(max-width:900px){main{padding:12px}header{align-items:flex-start}.header-actions{flex-wrap:wrap;justify-content:flex-end}.local{display:none}.toolbar{flex-wrap:wrap}.source{margin-left:0}.source select{max-width:55vw}form{flex-wrap:wrap}form #query{flex-basis:70%}.search-bottom{align-items:flex-start}footer{flex-wrap:wrap}.viewbar{gap:8px}.popover{left:auto;right:0}}

#filterChips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}#filterChips:empty{display:none}#filterChips button{font-size:11px;color:var(--accent);max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left}#cellMenu{position:fixed;z-index:20;padding:5px;border:1px solid var(--line);border-radius:7px;background:var(--panel);box-shadow:0 8px 30px #0008;min-width:180px}#cellMenu button{display:block;border:0;width:100%;text-align:left}

.draft-status{display:flex;gap:12px;align-items:center;margin-top:8px;min-height:28px;font-size:12px;color:var(--muted)}.draft-status button{padding:3px 8px;font-size:12px}#queryState.pending{color:var(--accent)}

/* Keep the setup shortcut at the table's top-left when scrolling horizontally. */
th.record-heading{left:0;z-index:3;min-width:90px}
th #columnSetup{display:inline-block;font-size:18px;line-height:1;padding:4px;margin-right:6px;color:var(--accent);vertical-align:middle}
th .column-sort{cursor:grab;user-select:none;min-height:24px}
th .column-sort:active{cursor:grabbing}
th.column-dragging{opacity:.5}
th.drop-before{box-shadow:inset 3px 0 var(--accent)}
th.drop-after{box-shadow:inset -3px 0 var(--accent)}

.column-title-row{display:flex;align-items:center;gap:10px;justify-content:space-between}
.column-title-row .column-sort{flex:1}
th .hide-column{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:4px;font-size:19px;font-weight:400;line-height:1;color:var(--muted);cursor:pointer}
th .hide-column:hover,th .hide-column:focus-visible{color:var(--text);background:var(--panel);border-color:transparent}

#querySuggestions{position:fixed;z-index:40;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 35px #0007;overflow:auto}
.suggestion-help{position:sticky;top:0;background:var(--panel2);padding:8px 12px;font-size:11px;color:var(--muted);z-index:1}
#queryOptions [role=option]{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:2px 9px;align-items:center;padding:9px 12px;cursor:pointer;border-top:1px solid var(--line)}
#queryOptions [role=option][aria-selected=true]{background:var(--head);box-shadow:inset 3px 0 var(--accent)}
#queryOptions strong{font:13px ui-monospace,Consolas,monospace;overflow-wrap:anywhere}
.suggestion-icon{grid-row:span 2;font-size:19px;color:var(--accent);text-align:center}.suggestion-icon.operator{color:#dba5ff}body.light .suggestion-icon.operator{color:#783da1}
.suggestion-kind{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.suggestion-detail{grid-column:2 / 4;font-size:11px;color:var(--muted);overflow-wrap:anywhere}

/* Virtual windows keep stable row heights/column widths while spacers represent
   records outside the viewport. No scroll anchoring to recycled DOM nodes. */
#tableWrap,#trees{overflow-anchor:none}
#grid.virtual-table{table-layout:fixed;min-width:100%}
.virtual-table th{min-width:0;overflow:hidden}
.virtual-table .column-sort{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.virtual-table tr.virtual-row{height:40px}
.virtual-table tr.virtual-row td{height:40px;padding:0 10px;line-height:39px;overflow:hidden;white-space:nowrap}
.virtual-table tr.virtual-row td button{line-height:18px;vertical-align:middle}
#grid .virtual-spacer,#grid .virtual-spacer td{padding:0;border:0;line-height:0;font-size:0;background:var(--panel)}
#trees .virtual-spacer{padding:0;border:0;margin:0}
#trees .record{min-height:52px}

#dataWarning{margin-top:12px;padding:10px 14px;border:1px solid var(--accent);border-radius:6px;color:var(--text);background:var(--panel)}

#layoutSelect{max-width:260px}#layoutDialog .row{flex-wrap:wrap}#layoutMessage{color:var(--accent)}#layoutMessage.layout-error{color:var(--error)}.layout-notice{margin-top:10px;font-size:12px;color:var(--muted)}

#savedFilterPanel{position:fixed;z-index:30;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;box-shadow:0 12px 40px #0006;overflow:auto}
#savedFilterPanel>p{font-size:12px;color:var(--muted);line-height:1.5}
.saved-filter-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.saved-filter-row strong{display:block;overflow-wrap:anywhere}
.saved-filter-row code{display:block;font-size:11px;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere;max-height:4.5em;overflow:auto;margin-top:6px}
.saved-filter-actions{display:flex;gap:8px}.saved-filter-actions button{white-space:nowrap;font-size:12px}
@media(max-width:520px){.saved-filter-row{grid-template-columns:1fr;gap:10px}.saved-filter-actions{justify-content:flex-end}}