/* Dusk SQL Studio. Every colour is a token; light-dark() picks the side from color-scheme, which View > Theme sets. */
:root { color-scheme:light dark;
  --bg:light-dark(#f1f0ed,#111214); --panel:light-dark(#fff,#191b1e); --raise:light-dark(#fff,#22252a); --soft:light-dark(#f7f6f3,#1e2024); --hdr:light-dark(#f7f6f3,#1e2024);
  --line:light-dark(#e2e0db,#2a2d33); --grid-line:light-dark(#eeece8,#23262b); --text:light-dark(#1d1e20,#e6e5e2); --muted:light-dark(#6e7178,#8a8d95);
  --accent:light-dark(#b9772a,#e3a75a); --accent2:light-dark(#c98a35,#e3a75a); --on-accent:light-dark(#fff,#1b1300); --tint:light-dark(rgba(201,138,53,.13),rgba(227,167,90,.14));
  --sel:light-dark(rgba(201,138,53,.18),rgba(227,167,90,.17)); --hover:light-dark(rgba(0,0,0,.05),rgba(255,255,255,.055)); --focus:light-dark(#c98a35,#e3a75a);
  --err:light-dark(#b52f3a,#ee7a81); --ok:light-dark(#217a51,#7cc9a0); --err-bg:light-dark(#fbe9ea,#33191c);
  --editor:light-dark(#fff,#191b1e); --gutter:transparent; --caret:light-dark(#1d1e20,#f3f1ec); --selection:light-dark(rgba(201,138,53,.28),rgba(227,167,90,.3));
  --kw:light-dark(#6d3fc4,#c4a7ff); --str:light-dark(#2a7a4b,#a3d6a0); --cmt:light-dark(#8e9097,#6b6f78); --num:light-dark(#b25e09,#f0b377); --fn:light-dark(#0b7285,#7cc9e8); --op:light-dark(#6e7178,#8a8d95);
  --input:light-dark(#fff,#141517); --input-line:light-dark(#d5d3cd,#33373e); --mod:light-dark(#fdf1cf,#4a3d17); --new:light-dark(#e3f6ea,#1b3526); --el:var(--err-bg); --kbd:light-dark(#efeeea,#26292e);
  --shadow:light-dark(rgba(30,25,15,.14),rgba(0,0,0,.55)); --login:var(--bg); --status-text:var(--muted);
  --ic-db:light-dark(#b9772a,#e3a75a); --ic-tbl:light-dark(#2f6fb0,#7fb2ee); --ic-vw:light-dark(#6d3fc4,#b79cf2); --ic-fn:light-dark(#0b7285,#7cc9e8); --ic-key:light-dark(#a8780f,#e6c15a); --ic-srv:light-dark(#217a51,#7cc9a0); --ic-usr:light-dark(#a8457f,#e59ac6);
  --r:8px; --mono:ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; }
:root[data-theme="light"] { color-scheme:light; }
:root[data-theme="dark"] { color-scheme:dark; }
* { box-sizing:border-box; scrollbar-width:thin; scrollbar-color:var(--input-line) transparent; }
html, body { height:100%; margin:0; }
body { font:13px/1.4 Inter, -apple-system, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; color:var(--text); background:var(--bg); overflow:hidden; -webkit-font-smoothing:antialiased; }
[hidden] { display:none !important; }
button, input, select, textarea { font:inherit; color:inherit; }
button { background:transparent; border:1px solid transparent; padding:4px 9px; border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:background .12s, border-color .12s, color .12s; }
button:hover { background:var(--hover); }
button:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }
button:disabled { opacity:.4; cursor:default; pointer-events:none; }
button.primary { background:var(--accent2); color:var(--on-accent); font-weight:600; padding:6px 14px; }
button.primary:hover { background:var(--accent2); filter:brightness(1.08); }
button.danger { color:var(--err); }
button.icon { padding:4px; }
svg.i { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
input, select, textarea { background:var(--input); border:1px solid var(--input-line); border-radius:6px; padding:5px 8px; transition:border-color .12s, box-shadow .12s; }
input:focus, select:focus, textarea:focus { outline:0; border-color:var(--focus); box-shadow:0 0 0 3px var(--tint); }
input::placeholder { color:var(--muted); }
input[type=checkbox], input[type=radio] { accent-color:var(--accent2); }
.grow { flex:1; }
.muted { color:var(--muted); }
.err { color:var(--err); }
.ok { color:var(--ok); }
.mono { font-family:var(--mono); }
.row { display:flex; align-items:center; gap:6px; }
.wrap { white-space:pre-wrap; }

#login { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(60% 50% at 50% 38%, var(--tint), transparent 70%), var(--login); }
#login .card { width:340px; display:flex; flex-direction:column; gap:12px; padding:28px; }
#login h1 { margin:0; font-size:19px; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; }
#login h1 svg, #menubar .brand svg { width:26px; height:26px; padding:5px; border-radius:7px; background:var(--accent2); color:var(--on-accent); stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#login p { margin:0; }
#login input { padding:8px 10px; }
#login button { justify-content:center; padding:8px 14px; }
#login .sso { display:flex; flex-direction:column; gap:10px; text-align:center; }
#login .sso button { border-color:var(--line); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; box-shadow:0 18px 50px var(--shadow); }

#app { height:100%; display:flex; flex-direction:column; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#menubar { display:flex; align-items:center; gap:1px; padding:6px 10px 2px; user-select:none; }
#menubar .brand { display:flex; align-items:center; gap:9px; white-space:nowrap; font-weight:650; letter-spacing:-.01em; margin-right:14px; }
#menubar .brand svg { width:22px; height:22px; padding:4px; border-radius:6px; }
/* desktop app on macOS: the menu bar is the title bar, with room for the window buttons */
.desktop.darwin #menubar { padding-left:86px; -webkit-app-region:drag; }
.desktop.darwin #menubar > .menu { -webkit-app-region:no-drag; }
#menubar > .menu { position:relative; padding:4px 9px; border-radius:6px; cursor:default; color:var(--muted); transition:background .12s, color .12s; }
#menubar > .menu:hover, #menubar > .menu.open { background:var(--hover); color:var(--text); }
#menubar > .menu.open > .dropdown { color:var(--text); }
.dropdown, #ctxmenu, .ac { background:var(--raise); border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 34px var(--shadow); padding:5px; }
.dropdown { position:absolute; top:calc(100% + 4px); left:0; min-width:240px; z-index:50; }
.dropdown .item, #ctxmenu .item { display:flex; align-items:center; gap:9px; padding:5px 10px; border-radius:6px; white-space:nowrap; cursor:default; }
.dropdown .item > svg, #ctxmenu .item > svg { color:var(--muted); }
.dropdown .item:hover, #ctxmenu .item:hover { background:var(--sel); }
.dropdown .item.disabled, #ctxmenu .item.disabled { opacity:.4; pointer-events:none; }
.dropdown .item .key { margin-left:auto; color:var(--muted); font-size:11px; padding-left:24px; }
.dropdown .sep, #ctxmenu .sep { border-top:1px solid var(--line); margin:5px 4px; }
.dropdown .item.sub, #ctxmenu .item.sub { position:relative; }
.item.sub::after { content:""; margin-left:auto; width:6px; height:6px; border:solid var(--muted); border-width:1.5px 1.5px 0 0; transform:rotate(45deg); }
.item.sub > .dropdown { display:none; top:-6px; left:100%; }
.item.sub:hover > .dropdown { display:block; }
#toolbar { display:flex; align-items:center; gap:3px; padding:6px 10px 8px; flex-wrap:wrap; }
#toolbar button { height:28px; color:var(--muted); }
#toolbar button:hover, #toolbar button:has(span) { color:var(--text); }
#toolbar .sep { width:1px; height:18px; background:var(--line); margin:0 6px; }
#toolbar select { height:28px; padding:0 26px 0 10px; max-width:220px; appearance:none; background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8d95' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 7px center/13px no-repeat; border-color:var(--line); cursor:pointer; }
#toolbar .run { background:var(--accent2); color:var(--on-accent); font-weight:600; padding:0 13px 0 10px; }
#toolbar .run:hover { background:var(--accent2); color:var(--on-accent); filter:brightness(1.08); }
#toolbar .run svg { fill:currentColor; width:12px; height:12px; }
#toolbar .stop:hover { color:var(--err); }
#toolbar button.on { background:var(--tint); color:var(--accent); }

#main { flex:1; display:flex; min-height:0; padding-right:8px; }
#explorer { width:290px; min-width:160px; display:flex; flex-direction:column; }
#explorer.collapsed { display:none; }
#explorer.collapsed + #splitV { width:8px; pointer-events:none; }
.pane-title { display:flex; align-items:center; gap:2px; padding:2px 6px 2px 14px; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.pane-filter { padding:6px 8px 6px 10px; }
.pane-filter input { width:100%; background:var(--hover); border-color:transparent; }
#tree { flex:1; overflow:auto; padding:2px 4px 8px 6px; user-select:none; }
.node > .lbl { display:flex; align-items:center; gap:6px; height:26px; padding:0 8px 0 4px; border-radius:6px; white-space:nowrap; cursor:default; }
.node > .lbl:hover { background:var(--hover); }
.node > .lbl.sel { background:var(--sel); }
.node > .lbl .tw { width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); flex:none; }
.node > .lbl .tw svg { width:12px; height:12px; }
.node > .lbl .ic { color:var(--muted); }
.node > .lbl .ic.db { color:var(--ic-db); } .node > .lbl .ic.tbl { color:var(--ic-tbl); } .node > .lbl .ic.vw { color:var(--ic-vw); } .node > .lbl .ic.fn { color:var(--ic-fn); } .node > .lbl .ic.key { color:var(--ic-key); } .node > .lbl .ic.srv { color:var(--ic-srv); } .node > .lbl .ic.usr { color:var(--ic-usr); }
.node > .lbl .meta { color:var(--muted); font-size:11px; margin-left:2px; }
.node > .kids { margin-left:11px; padding-left:5px; border-left:1px solid var(--grid-line); }
.node.hide { display:none; }
#splitV { width:6px; cursor:col-resize; position:relative; }
#splitV::after, .splitH::after { content:""; position:absolute; inset:0; margin:auto; border-radius:2px; background:var(--focus); opacity:0; transition:opacity .12s; }
#splitV::after { width:2px; height:100%; } .splitH::after { height:2px; width:100%; }
#splitV:hover::after, .splitH:hover::after { opacity:1; }

/* the workspace is one floating rounded sheet */
#work { flex:1; display:flex; flex-direction:column; min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 1px 2px var(--shadow); }
#tabstrip { display:flex; gap:2px; padding:5px 6px; background:var(--soft); border-bottom:1px solid var(--line); overflow-x:auto; min-height:38px; scrollbar-width:none; }
#tabstrip .tab { display:flex; align-items:center; gap:7px; padding:0 6px 0 10px; height:27px; border:1px solid transparent; border-radius:7px; white-space:nowrap; cursor:default; max-width:260px; color:var(--muted); transition:background .12s, color .12s; }
#tabstrip .tab:hover { background:var(--hover); color:var(--text); }
#tabstrip .tab.active { background:var(--raise); border-color:var(--line); color:var(--text); box-shadow:0 1px 2px var(--shadow); }
#tabstrip .tab.active > svg:first-child { color:var(--accent); }
#tabstrip .tab .t { overflow:hidden; text-overflow:ellipsis; }
#tabstrip .tab .x { display:inline-flex; padding:2px; border-radius:5px; opacity:0; }
#tabstrip .tab .x svg { width:13px; height:13px; }
#tabstrip .tab:hover .x, #tabstrip .tab.active .x { opacity:.6; }
#tabstrip .tab .x:hover { background:var(--hover); opacity:1; }
#tabstrip .tab.dirty .t::after { content:""; display:inline-block; width:6px; height:6px; margin-left:7px; border-radius:50%; background:var(--accent2); vertical-align:middle; }
#tabbody { flex:1; min-height:0; display:flex; flex-direction:column; }
.tabview { flex:1; display:flex; flex-direction:column; min-height:0; }
.empty { flex:1; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:var(--muted); }
.empty > svg { width:44px; height:44px; padding:11px; margin-bottom:6px; border-radius:13px; background:var(--tint); color:var(--accent); stroke-width:1.5; }
.empty > div:first-of-type { color:var(--text); font-size:15px; font-weight:600; }

/* editor */
.editor { flex:1; display:flex; min-height:80px; position:relative; background:var(--editor); overflow:hidden; }
.editor .gutter { width:48px; background:var(--gutter); color:var(--muted); opacity:.75; text-align:right; padding:10px 10px 10px 0; overflow:hidden; user-select:none; font-family:var(--mono); }
.editor .wrapx { flex:1; position:relative; overflow:hidden; }
.editor pre, .editor textarea { margin:0; padding:10px 12px 10px 6px; font:13px/1.55 var(--mono); tab-size:4; white-space:pre; word-wrap:normal; overflow-wrap:normal; border-radius:0; }
.editor pre { position:absolute; inset:0; pointer-events:none; overflow:hidden; color:var(--text); }
.editor textarea { position:absolute; inset:0; width:100%; height:100%; background:transparent; color:transparent; caret-color:var(--caret); border:0; resize:none; outline:none; overflow:auto; box-shadow:none; }
.editor textarea::selection { background:var(--selection); }
.editor .gutter, .editor pre { font-size:13px; line-height:1.55; }
.editor .gutter div.el { background:var(--el); color:var(--err); border-radius:0 4px 4px 0; }
.editor .gutter div.hint { box-shadow:inset -3px 0 var(--accent2); color:var(--text); }
.sqlhelp { position:relative; flex:none; max-height:130px; overflow:auto; margin:0 8px 8px; padding:4px 30px 4px 0; background:var(--tint); border-radius:var(--r); }
.sqlhelp .h { display:flex; align-items:center; gap:8px; padding:3px 10px; }
.sqlhelp .h > svg { color:var(--accent); } .sqlhelp .h.err > svg { color:var(--err); }
.sqlhelp .tx { flex:1; cursor:pointer; } .sqlhelp .tx:hover { text-decoration:underline; }
.sqlhelp .h button { flex:none; border-color:var(--line); background:var(--raise); white-space:nowrap; }
.sqlhelp .close { position:absolute; top:4px; right:6px; }
.k { color:var(--kw); font-weight:500; } .s { color:var(--str); } .c { color:var(--cmt); font-style:italic; } .n { color:var(--num); } .f { color:var(--fn); } .o { color:var(--op); }
.ac { position:absolute; z-index:40; max-height:220px; overflow:auto; min-width:220px; padding:4px; font-family:var(--mono); font-size:12.5px; }
.ac div { padding:3px 8px; display:flex; gap:8px; border-radius:5px; }
.ac div.sel { background:var(--sel); }
.ac div .k2 { color:var(--muted); margin-left:auto; font-size:11px; }
.findbar { display:flex; gap:4px; padding:6px 8px; background:var(--soft); border-bottom:1px solid var(--line); align-items:center; }
.findbar input { width:180px; }
.splitH { height:7px; margin:-3px 0; z-index:3; cursor:row-resize; position:relative; flex:none; }

/* results */
.results { height:45%; min-height:60px; display:flex; flex-direction:column; border-top:1px solid var(--line); }
.results.hidden { display:none; }
.rtabs { display:flex; gap:2px; padding:0 8px; background:var(--soft); border-bottom:1px solid var(--line); }
.rtabs button { border-radius:0; padding:7px 10px 6px; border:0; border-bottom:2px solid transparent; color:var(--muted); font-weight:500; }
.rtabs button:hover { background:transparent; color:var(--text); }
.rtabs button.active { color:var(--text); border-bottom-color:var(--accent2); }
.rbody { flex:1; overflow:auto; position:relative; }
.rbody .rset { margin-bottom:8px; }
.rbody .rset .rname { padding:4px 10px; background:var(--soft); border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; }
.msgs { padding:10px 14px; font-family:var(--mono); font-size:12.5px; line-height:1.55; white-space:pre-wrap; }
.msgs .e { color:var(--err); cursor:pointer; }
.msgs .e:hover { text-decoration:underline; }
.txtres { padding:10px 14px; font-family:var(--mono); font-size:12px; white-space:pre; }
table.grid { border-collapse:separate; border-spacing:0; font-size:12.5px; user-select:none; table-layout:fixed; }
table.grid th { position:sticky; top:0; background:var(--panel); border-bottom:1px solid var(--line); padding:6px 12px; text-align:left; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
table.grid th:hover { color:var(--accent); }
table.grid th .rz { position:absolute; right:0; top:25%; width:5px; height:50%; cursor:col-resize; border-right:1px solid var(--line); }
table.grid th .ty { color:var(--muted); font-weight:400; font-size:10.5px; margin-left:6px; font-family:var(--mono); text-transform:lowercase; }
table.grid td { border-bottom:1px solid var(--grid-line); padding:4px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:400px; font-family:var(--mono); font-size:12px; }
table.grid tbody tr:hover td { background:var(--hover); }
table.grid td.n { color:var(--muted); opacity:.7; font-size:10.5px; letter-spacing:.04em; }
table.grid td.num { text-align:right; font-variant-numeric:tabular-nums; }
table.grid td.sel, table.grid tbody tr:hover td.sel { background:var(--sel); }
table.grid tr.selrow td, table.grid tbody tr.selrow:hover td { background:var(--sel); }
table.grid td.rn, table.grid th.rn { background:var(--panel); color:var(--muted); opacity:1; font-size:11px; text-align:right; width:44px; min-width:44px; position:sticky; left:0; z-index:1; }
table.grid th.rn { z-index:2; }
table.grid td.mod { background:var(--mod); }
table.grid tr.del td { text-decoration:line-through; color:var(--err); }
table.grid tr.new td { background:var(--new); }
table.grid td[contenteditable] { outline:2px solid var(--accent2); outline-offset:-2px; background:var(--input); white-space:pre; }
.more { padding:8px 12px; color:var(--muted); }

/* generic tab pages (activity, dashboard, history, designer) */
.page { flex:1; overflow:auto; padding:20px 24px; }
.page h2 { margin:0 0 14px; font-size:17px; letter-spacing:-.01em; }
.page h3 { margin:22px 0 8px; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.page .bar { margin-bottom:12px; }
.bar button:not(.primary), #modal .actions button:not(.primary), .findbar button { border-color:var(--line); }
.kv { display:grid; grid-template-columns:160px 1fr; gap:6px 12px; max-width:800px; }
.kv div:nth-child(odd) { color:var(--muted); }
.bars div { display:flex; align-items:center; gap:8px; margin:4px 0; }
.bars .b { height:8px; background:var(--accent2); border-radius:4px; }
table.plain { border-collapse:separate; border-spacing:0; width:100%; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
table.plain th, table.plain td { border-bottom:1px solid var(--grid-line); padding:6px 10px; text-align:left; vertical-align:top; }
table.plain tr:last-child td { border-bottom:0; }
table.plain th { background:var(--soft); border-bottom-color:var(--line); font-size:11.5px; color:var(--muted); font-weight:600; }
table.plain input[type=text], table.plain select { width:100%; }
table.plain tr.hl { background:var(--mod); }
.designer .cols td { padding:3px 5px; }
.designer textarea { width:100%; min-height:160px; font-family:var(--mono); }

#statusbar { display:flex; align-items:center; gap:18px; padding:5px 14px 6px; color:var(--status-text); font-size:11.5px; font-variant-numeric:tabular-nums; }
#stStatus { display:flex; align-items:center; gap:7px; }
#stStatus::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--ok); }
#statusbar.err { color:var(--err); }
#statusbar.err #stStatus::before { background:var(--err); }
#ctxmenu { position:fixed; z-index:100; min-width:200px; }
#modal { position:fixed; inset:0; background:light-dark(rgba(40,35,25,.3),rgba(0,0,0,.55)); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:90; }
#modal .card { min-width:420px; max-width:min(900px, 92vw); max-height:90vh; overflow:auto; display:flex; flex-direction:column; gap:12px; }
#modal h2 { margin:0; font-size:16px; letter-spacing:-.01em; }
#modal .form { display:grid; grid-template-columns:110px 1fr; gap:9px 10px; align-items:center; }
#modal .form input[type=checkbox] { justify-self:start; }
#modal .actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
#modal .actions button { padding:6px 14px; }
#modal pre { background:var(--soft); border:1px solid var(--line); border-radius:var(--r); padding:10px; max-height:50vh; overflow:auto; font:12px/1.5 var(--mono); }
#modal textarea.big { width:100%; min-height:300px; font-family:var(--mono); }
#toast { position:fixed; bottom:40px; right:18px; background:var(--raise); color:var(--text); border:1px solid var(--line); border-left:3px solid var(--ok); padding:9px 14px; border-radius:var(--r); z-index:120; box-shadow:0 12px 34px var(--shadow); max-width:420px; }
#toast.bad { border-left-color:var(--err); }
kbd { background:var(--kbd); border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:0 5px; font-size:11px; font-family:inherit; }
.shortcuts { columns:2; gap:24px; }
.shortcuts div { display:flex; justify-content:space-between; padding:3px 0; break-inside:avoid; }

/* execution plan tree */
.planview { display:flex; flex-direction:column; }
.plantrees { padding:12px 16px; }
.plantree { margin-bottom:12px; }
.pwrap { position:relative; }
.pkids { margin-left:22px; padding-left:12px; border-left:1px solid var(--line); }
.pnode { display:inline-block; min-width:260px; max-width:520px; margin:3px 0; padding:7px 10px; border:1px solid var(--line); border-radius:var(--r); background:var(--soft); cursor:default; }
.pnode.warn { border-color:var(--accent2); background:var(--tint); }
.pnode.collapsed::after { content:' [+]'; color:var(--muted); }
.pname { font-weight:600; display:flex; gap:8px; }
.pname .ppct { margin-left:auto; color:var(--muted); font-weight:400; }
.pbar { height:4px; background:var(--grid-line); border-radius:2px; margin:5px 0; }
.pfill { height:100%; background:var(--accent2); border-radius:2px; }
.pmeta, .pdetail { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* fingers: bigger targets, no text-selection callout on the things a long press opens a menu for */
@media (pointer:coarse) {
  #tree, table.grid, #tabstrip, #menubar, #toolbar { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
  button, #menubar > .menu, table.grid th { touch-action:manipulation; }
  .node > .lbl { height:36px; }
  .node > .lbl .tw { width:30px; height:36px; margin:0 -4px 0 -6px; }
  .node > .lbl .tw svg { width:15px; height:15px; }
  .node > .kids { margin-left:14px; }
  #menubar > .menu { padding:8px 11px; }
  .dropdown .item, #ctxmenu .item { padding:10px 12px; }
  #toolbar button, #toolbar select { height:36px; min-width:36px; justify-content:center; }
  #tabstrip { min-height:46px; } #tabstrip .tab { height:35px; } #tabstrip .tab .x { opacity:.6; padding:6px; }
  .rtabs button { padding:11px 12px 10px; }
  table.grid td { padding:8px 12px; } table.grid th { padding:10px 12px; }
  #splitV { width:14px; } .splitH { height:15px; margin:-7px 0; }
}

/* ---- tools.js: script dialogs, results extras, chart, monitor tabs, diagram, compare ---- */
:root { --series-1:light-dark(#2a78d6,#3987e5); --series-2:light-dark(#eb6834,#d95926); --series-3:light-dark(#1baf7a,#199e70); --series-4:light-dark(#eda100,#c98500); --series-5:light-dark(#e87ba4,#d55181); --series-6:light-dark(#008300,#008300); }
.checks { display:flex; flex-direction:column; gap:4px; max-height:190px; overflow:auto; padding:2px; }
.checks .row { gap:8px; } .checks select { min-width:150px; }
#modal h3, .page h3 { margin:6px 0 0; font-size:13px; }
.rtabs .agg { align-self:center; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46%; }
.rtabs .rfilter { align-self:center; width:170px; padding:3px 8px; margin:0 4px; font-size:12px; }
.rtabs.mtabs { border:1px solid var(--line); border-radius:var(--r) var(--r) 0 0; border-bottom:0; margin-top:4px; }
.rtabs.mtabs + div { border:1px solid var(--line); border-radius:0 0 var(--r) var(--r); overflow:auto; max-height:calc(100vh - 290px); }
.rtabs.mtabs + div > table.plain { border:0; border-radius:0; }
.rtabs.mtabs[hidden] + div { border:0; max-height:none; overflow:visible; }
.chartview { position:relative; padding:12px 16px; }
.chartview .bar { margin-bottom:8px; } .chartview .bar button { border:1px solid var(--input-line); padding:3px 9px; } .chartview .bar button.on { background:var(--tint); border-color:var(--accent2); }
.chartview .legend { display:flex; gap:16px; flex-wrap:wrap; margin:0 0 6px 60px; font-size:12px; } .chartview .legend span { display:inline-flex; align-items:center; gap:6px; }
.chartview .legend i, .charttip i { width:10px; height:10px; border-radius:2px; display:inline-block; flex:none; }
.chartview .note { font-size:12px; margin-top:4px; }
svg.chart { display:block; } svg.chart text.axis { font-size:11px; fill:var(--muted); }
svg.chart .gridl { stroke:var(--grid-line); stroke-width:1; } svg.chart .base { stroke:var(--input-line); stroke-width:1; }
svg.chart .linemark { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
svg.chart .band { fill:var(--hover); } svg.chart .cross { stroke:var(--input-line); stroke-width:1; } svg.chart .dot { stroke:var(--panel); stroke-width:2; }
.charttip { position:absolute; pointer-events:none; background:var(--raise); border:1px solid var(--line); border-radius:var(--r); box-shadow:0 6px 20px var(--shadow); padding:8px 10px; font-size:12px; min-width:140px; z-index:5; }
.charttip .th { color:var(--muted); margin-bottom:4px; } .charttip .tr { display:flex; align-items:center; gap:8px; } .charttip .tr b { margin-left:auto; padding-left:14px; font-variant-numeric:tabular-nums; }
.bar.dbar { padding:8px 12px; border-bottom:1px solid var(--line); margin:0; }
.diagram { flex:1; overflow:auto; background:var(--bg); }
svg.dgm { display:block; } svg.dgm text { font:12px Inter, -apple-system, "Segoe UI", system-ui, sans-serif; fill:var(--text); user-select:none; -webkit-user-select:none; }
svg.dgm .tbox { cursor:grab; } svg.dgm .tbox:active { cursor:grabbing; }
svg.dgm .body { fill:var(--panel); stroke:var(--line); } svg.dgm .head { fill:var(--hdr); stroke:var(--line); } svg.dgm .tbox:hover .body { stroke:var(--accent2); }
svg.dgm .title { font-weight:600; } svg.dgm .typ, svg.dgm .tag { fill:var(--muted); font-size:11px; } svg.dgm .tag.pk { fill:var(--ic-key); font-weight:600; } svg.dgm .col.pk { font-weight:600; }
svg.dgm .edge { fill:none; stroke:var(--muted); stroke-width:1.4; } svg.dgm .edge:hover { stroke:var(--accent); stroke-width:2.4; } svg.dgm marker path { fill:var(--muted); }
pre.difft div { white-space:pre; } pre.difft .add { background:var(--new); } pre.difft .del { background:var(--err-bg); }