:root {
  --bg:#0d1117; --panel:#0f141c; --panel2:#11161f; --border:#222b38;
  --ink:#e6edf3; --muted:#8b949e; --faint:#6e7681;
  --accent:#6e8bff; --accent-weak:rgba(110,139,255,.14);
  --read:#3fb950; --write:#d29922; --ddl:#f85149; --txn:#58a6ff; --util:#8b949e;
  --k-kind:#d2a8ff; --k-field:#79c0ff; --k-str:#7ee787; --k-num:#ffa657; --k-bool:#ffa657;
  --radius:10px; --mono:ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
[data-theme="light"] {
  --bg:#fbfcfd; --panel:#ffffff; --panel2:#f6f8fa; --border:#d8dee4;
  --ink:#1f2328; --muted:#59636e; --faint:#818b96;
  --accent:#4f6bed; --accent-weak:rgba(79,107,237,.10);
  --read:#1a7f37; --write:#9a6700; --ddl:#cf222e; --txn:#0969da; --util:#59636e;
  --k-kind:#8250df; --k-field:#0550ae; --k-str:#0a7d33; --k-num:#953800; --k-bool:#953800;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; min-height:100vh; color:var(--ink); background:var(--bg);
  font:14px/1.55 var(--sans); -webkit-font-smoothing:antialiased;
  transition:background .25s,color .25s;
}

/* top bar */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 18px; border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:10px; min-width:0; }
.logo { width:28px; height:28px; border-radius:7px; display:block; object-fit:contain; }
.name { font-weight:700; font-size:16px; letter-spacing:-.2px; }
.sub { color:var(--muted); font-size:13px; white-space:nowrap; }
@media (max-width:680px){ .sub{ display:none; } }
.controls { display:flex; align-items:center; gap:8px; }
.chip { font-size:12px; color:var(--muted); padding:5px 10px; border:1px solid var(--border);
  border-radius:999px; white-space:nowrap; }
.chip.client::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--read); margin-right:6px; vertical-align:middle; }
@media (max-width:560px){ .client{ display:none; } }
.iconbtn { display:grid; place-items:center; width:32px; height:32px; border-radius:8px;
  border:1px solid var(--border); background:var(--panel2); color:var(--ink); cursor:pointer;
  text-decoration:none; transition:background .15s,border-color .15s,transform .1s; }
.iconbtn:hover { background:var(--accent-weak); border-color:var(--accent); }
.iconbtn:active { transform:translateY(1px); }

/* layout — natural document scroll (mobile-safe) */
main { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:14px 18px; align-items:start; }
@media (max-width:860px){ main{ grid-template-columns:1fr; } }
/* Desktop: stretch the panels to fill the viewport instead of sitting at the top.
   The min-height:0 chain lets the flex children actually size to the panel, and
   the editor textarea's 300px floor is lifted so it grows to fill. */
@media (min-width:861px){
  html, body { height:100%; }
  body { display:flex; flex-direction:column; overflow:hidden; }
  main { flex:1 1 auto; min-height:0; align-items:stretch; grid-template-rows:1fr; }
  .panel { min-height:0; height:100%; }
  #sql { flex:1 1 0%; min-height:0; }
  .tabbody { flex:1 1 0%; min-height:0; max-height:none; }
}
.panel { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  display:flex; flex-direction:column; overflow:hidden; }

/* editor */
.toolbar { display:flex; align-items:center; gap:8px; padding:10px; border-bottom:1px solid var(--border); }
.examples { display:flex; gap:6px; flex-wrap:wrap; min-width:0; }
.toolbar button { font:500 12.5px var(--sans); color:var(--muted); background:transparent;
  border:1px solid var(--border); border-radius:7px; padding:5px 10px; cursor:pointer;
  transition:color .15s,border-color .15s,background .15s; white-space:nowrap; }
.toolbar button:hover { color:var(--ink); border-color:var(--accent); background:var(--accent-weak); }
.randombtn { margin-left:auto; color:var(--accent)!important; }
#sql { width:100%; min-height:300px; resize:vertical; border:0; outline:0; padding:16px 18px;
  color:var(--ink); background:var(--panel); font:13.5px/1.7 var(--mono); tab-size:2; }
@media (max-width:860px){ #sql{ min-height:200px; } }
#sql::placeholder { color:var(--faint); }
.err { border-top:1px solid var(--ddl); background:color-mix(in srgb,var(--ddl) 9%,transparent);
  color:var(--ddl); padding:10px 14px; font:12.5px/1.5 var(--mono); white-space:pre-wrap; }

/* result bar */
.resbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border-bottom:1px solid var(--border); }
.pill { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  padding:5px 11px; border-radius:999px; border:1px solid var(--border); }
.pill .dot { width:8px; height:8px; border-radius:50%; background:var(--muted); }
.pill.read  { color:var(--read); border-color:color-mix(in srgb,var(--read) 45%,var(--border)); }
.pill.read .dot{ background:var(--read); box-shadow:0 0 0 0 var(--read); animation:beat 2.2s infinite; }
.pill.write { color:var(--write); border-color:color-mix(in srgb,var(--write) 45%,var(--border)); }
.pill.write .dot{ background:var(--write); }
.pill.ddl   { color:var(--ddl); border-color:color-mix(in srgb,var(--ddl) 45%,var(--border)); }
.pill.ddl .dot{ background:var(--ddl); }
.pill.txn   { color:var(--txn); border-color:color-mix(in srgb,var(--txn) 45%,var(--border)); }
.pill.txn .dot{ background:var(--txn); }
.pill.util  { color:var(--util); }
.pill.util .dot{ background:var(--util); }
.pill.bad   { color:var(--ddl); border-color:color-mix(in srgb,var(--ddl) 45%,var(--border)); }
.pill.bad .dot{ background:var(--ddl); }
@keyframes beat { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--read) 55%,transparent)} 70%{box-shadow:0 0 0 6px transparent} 100%{box-shadow:0 0 0 0 transparent} }
.meta { color:var(--muted); font-size:12.5px; }
.speed { margin-left:auto; font:12.5px var(--mono); color:var(--accent);
  padding:5px 10px; border:1px solid var(--border); border-radius:7px; transition:transform .12s; }
.speed.flash { transform:scale(1.07); }

/* tabs */
.tabs { display:flex; align-items:center; gap:4px; padding:8px 10px 0; }
.treebtn { margin-left:auto; font:600 11.5px var(--sans); color:var(--accent);
  background:transparent; border:1px solid var(--border); border-radius:7px;
  padding:4px 10px; cursor:pointer; transition:background .15s,border-color .15s; }
.treebtn:hover { background:var(--accent-weak); border-color:var(--accent); }
.treebtn.hidden { display:none; }
.tab { font:600 12.5px var(--sans); color:var(--muted); background:transparent; border:0;
  border-bottom:2px solid transparent; padding:6px 10px; cursor:pointer; }
.tab:hover { color:var(--ink); }
.tab.active { color:var(--ink); border-bottom-color:var(--accent); }
.tabbody { flex:1; overflow:auto; max-height:58vh; -webkit-overflow-scrolling:touch; }
.tabpane { display:none; padding:12px 14px; margin:0; }
.tabpane.active { display:block; }
#tab-sql { color:var(--ink); font:13px/1.65 var(--mono); white-space:pre; }
#tab-tree { min-width:max-content; }

/* AST tree */
.node { margin:0; }
.node .row { display:flex; gap:7px; align-items:baseline; padding:2px 6px; border-radius:6px; }
.node.collapsible > .row { cursor:pointer; }
.node.collapsible > .row:hover { background:var(--accent-weak); }
.twist { width:10px; color:var(--faint); font-size:10px; transition:transform .12s; flex:none; }
.node.closed > .children { display:none; }
.node.closed .twist { transform:rotate(-90deg); }
.kind { color:var(--k-kind); font:600 12px var(--mono); }
.fname { color:var(--k-field); font:12px var(--mono); }
.val { color:var(--k-num); font:12px var(--mono); }
.val.str { color:var(--k-str); }
.val.bool { color:var(--k-bool); }
.count { color:var(--faint); font:12px var(--mono); }
.children { margin-left:9px; border-left:1px solid var(--border); padding-left:11px; }
.stmt-sep { color:var(--muted); font:600 11px var(--sans); letter-spacing:.04em; text-transform:uppercase;
  margin:12px 0 6px; padding-left:6px; }
.stmt-sep:first-child { margin-top:0; }

/* footer */
footer { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;
  padding:13px 18px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; }
footer .ftxt { display:flex; flex-direction:column; gap:3px; max-width:760px; }
footer .ftxt b { color:var(--ink); font-weight:600; }
footer .fmeta { color:var(--faint); }
footer a { color:var(--accent); text-decoration:none; white-space:nowrap; }
footer a:hover { text-decoration:underline; }

/* loader */
.loader { position:fixed; inset:0; display:flex; gap:12px; align-items:center; justify-content:center;
  background:var(--bg); z-index:60; color:var(--muted); font-size:13px; }
.loader.gone { opacity:0; pointer-events:none; transition:opacity .35s; }
.spin { width:18px; height:18px; border:2px solid var(--border); border-top-color:var(--accent);
  border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to{ transform:rotate(360deg); } }