:root, [data-theme="dark"] {
  --bg: #0f1419;
  --panel: #151b22;
  --panel-2: #1b232c;
  --line: #26313d;
  --text: #d7dee6;
  --muted: #7d8b99;
  --accent: #10b3a3;
  --accent-ink: #062b29;
  --warn: #e3b341;
  --err: #f47067;
  --ok: #57c785;
  --th-bg: #1f2933;
  --null: #5d6b78;
  --err-text: #ffb4ae;
  --err-bg: rgba(244,112,103,.08);
  --hover-line: #3a4756;
  --badge-iso: #5a4a1d;
  --badge-rb: #145a54;
  --row-hover: rgba(16,179,163,.06);
  --overlay: rgba(0,0,0,.55);
  color-scheme: dark;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, "SF Mono", monospace;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}
[data-theme="light"] {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --panel-2: #eef1f4;
  --line: #d6dce2;
  --text: #1f2328;
  --muted: #5f6b77;
  --accent: #0d8a7e;
  --accent-ink: #ffffff;
  --warn: #9a6700;
  --err: #cf222e;
  --ok: #1a7f37;
  --th-bg: #eef1f4;
  --null: #9aa5b1;
  --err-text: #a40e26;
  --err-bg: rgba(207,34,46,.06);
  --hover-line: #b6c0ca;
  --badge-iso: #e3c77a;
  --badge-rb: #8fd3cb;
  --row-hover: rgba(13,138,126,.07);
  --overlay: rgba(20,30,40,.35);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 13px/1.45 var(--sans); display: flex; flex-direction: column; }
button, input, select { font: inherit; color: inherit; }
code, kbd { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--muted); }
.pad { padding: 12px; }
.hidden { display: none !important; }
.spacer { flex: 1; }

/* top bar */
.topbar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 8px; margin-right: 6px; }
.logo { background: var(--accent); color: var(--accent-ink); font: 700 12px var(--mono); padding: 4px 6px; border-radius: 6px; }
.brand-text { font-size: 15px; letter-spacing: .2px; }
.field { display: flex; align-items: center; gap: 6px; color: var(--muted); }
select, input[type=search], .title-input, .share-row input {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; outline: none;
}
select:focus, input:focus { border-color: var(--accent); }
select { max-width: 260px; color: var(--text); }
#sampleSelect { width: 210px; }
.actions { display: flex; gap: 6px; }
.btn { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 11px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--hover-line); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .55; cursor: progress; }
.btn kbd { background: rgba(0,0,0,.18); border-radius: 4px; padding: 0 4px; margin-left: 4px; font-size: 10px; }
.options { display: flex; gap: 12px; margin-left: auto; color: var(--muted); }
.theme-btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; }
.theme-btn:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .theme-btn .ico-moon, [data-theme="light"] .theme-btn .ico-sun { display: none; }
.chk { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.chk input { accent-color: var(--accent); }

/* layout */
.layout { flex: 1; display: flex; min-height: 0; }
.sidebar { width: 290px; min-width: 200px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; resize: horizontal; overflow: hidden; }
.side-head { padding: 10px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.side-title { font-weight: 600; }
.side-head input { width: 100%; }
.tree { overflow: auto; flex: 1; padding: 4px 0 20px; font-size: 12.5px; }
.tree .grp { padding: 8px 12px 3px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.tree .tbl { display: flex; align-items: center; gap: 6px; padding: 3px 12px; cursor: pointer; user-select: none; }
.tree .tbl:hover { background: var(--panel-2); }
.tree .tbl .caret { width: 10px; color: var(--muted); font-size: 9px; }
.tree .tbl .ico { font-size: 10px; color: var(--accent); font-family: var(--mono); }
.tree .tbl.view .ico { color: var(--warn); }
.tree .tbl .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree .tbl .rc { color: var(--muted); font-size: 11px; }
.tree .tbl .q { opacity: 0; font-size: 11px; color: var(--accent); }
.tree .tbl:hover .q { opacity: 1; }
.tree .cols { padding: 0 0 4px 34px; }
.tree .col { display: flex; gap: 6px; padding: 1px 0; cursor: pointer; font-family: var(--mono); font-size: 11.5px; }
.tree .col:hover .cn { color: var(--accent); }
.tree .col .ct { color: var(--muted); }
.tree .col .pk { color: var(--warn); }

.workspace { flex: 1; overflow: auto; padding: 14px 18px 40px; }
.fiddle-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.title-input { flex: 1; font-size: 15px; background: transparent; border-color: transparent; }
.title-input:hover, .title-input:focus { border-color: var(--line); background: var(--panel-2); }
.badge { font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.badge.iso { color: var(--warn); border-color: var(--badge-iso); }
.badge.rb { color: var(--accent); border-color: var(--badge-rb); }

/* cells */
.cell { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 14px; overflow: hidden; }
.cell.running { border-color: var(--accent); }
.cell-bar { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.cell-no { font: 600 11px var(--mono); color: var(--accent); }
.cell-time { font-size: 11px; }
.icon-btn { background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 4px; font-size: 11px; }
.icon-btn:hover { background: var(--line); color: var(--text); }
.cell-editor { height: 120px; }
.add-cell { width: 100%; background: transparent; border: 1px dashed var(--line); color: var(--muted); padding: 8px; border-radius: 8px; cursor: pointer; }
.add-cell:hover { border-color: var(--accent); color: var(--accent); }
.hint { color: var(--muted); font-size: 12px; margin-top: 14px; max-width: 900px; }

/* output */
.output { border-top: 1px solid var(--line); }
.tabs { display: flex; gap: 2px; padding: 4px 6px 0; background: var(--panel-2); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 5px 10px; cursor: pointer; color: var(--muted); font-size: 12px; }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab .n { font-size: 10px; color: var(--muted); margin-left: 4px; }
.tab.err { color: var(--err); }
.pane { display: none; }
.pane.active { display: block; }
.rs-tools { display: flex; align-items: center; gap: 10px; padding: 5px 10px; font-size: 11.5px; color: var(--muted); }
.rs-tools button { background: none; border: 0; color: var(--accent); cursor: pointer; font-size: 11.5px; padding: 0; }
.grid-wrap { max-height: 420px; overflow: auto; }
table.grid { border-collapse: collapse; font-family: var(--mono); font-size: 12px; min-width: 100%; }
table.grid th, table.grid td { border: 1px solid var(--line); padding: 3px 8px; white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; text-align: left; }
table.grid th { position: sticky; top: 0; background: var(--th-bg); font-weight: 600; z-index: 1; }
table.grid th small { display: block; font-weight: 400; color: var(--muted); font-size: 10px; }
table.grid td.num { text-align: right; }
table.grid td.null { color: var(--null); font-style: italic; }
table.grid td.rn, table.grid th.rn { color: var(--muted); text-align: right; background: var(--panel-2); position: sticky; left: 0; }
table.grid tr:hover td { background: var(--row-hover); }
.warn-line { color: var(--warn); padding: 5px 10px; font-size: 12px; }
.msgs { font-family: var(--mono); font-size: 12px; padding: 8px 12px; white-space: pre-wrap; max-height: 300px; overflow: auto; }
.msgs .m { padding: 1px 0; }
.msgs .m.rows { color: var(--muted); }
.msgs .m.warn { color: var(--warn); }
.error-box { margin: 8px 10px; border-left: 3px solid var(--err); background: var(--err-bg); padding: 7px 10px; font-family: var(--mono); font-size: 12px; white-space: pre-wrap; color: var(--err-text); }
.error-box .meta { color: var(--muted); font-size: 11px; margin-bottom: 2px; }
.empty-out { padding: 10px 12px; color: var(--muted); font-size: 12px; }

/* plan */
.plan { padding: 8px 12px; font-size: 12px; overflow: auto; max-height: 460px; }
.plan .stmt { font-family: var(--mono); color: var(--muted); margin: 6px 0; white-space: pre-wrap; }
.plan ul { list-style: none; margin: 0; padding-left: 18px; border-left: 1px dashed var(--line); }
.plan > ul { border-left: 0; padding-left: 0; }
.plan li { margin: 3px 0; }
.op { display: inline-flex; gap: 8px; align-items: baseline; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; }
.op b { color: var(--text); }
.op .obj { color: var(--accent); font-family: var(--mono); font-size: 11px; }
.op .cost { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.op.hot { border-color: var(--warn); }
.op.hot .cost { color: var(--warn); }
.plan .warnp { color: var(--warn); font-size: 11px; margin-left: 6px; }

/* status + modal */
.statusbar { display: flex; gap: 12px; padding: 4px 12px; background: var(--panel); border-top: 1px solid var(--line); font-size: 12px; }
.statusbar .ok { color: var(--ok); }
.statusbar .bad { color: var(--err); }
.modal { position: fixed; inset: 0; background: var(--overlay); display: grid; place-items: center; z-index: 50; }
.modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; width: min(560px, 92vw); }
.modal-box h3 { margin: 0 0 6px; }
.share-row { display: flex; gap: 8px; margin-top: 10px; }
.share-row input { flex: 1; font-family: var(--mono); }
.modal-actions { display: flex; justify-content: flex-end; margin-top: 14px; }

@media (max-width: 1420px) {
  .field > span { display: none; }
  .btn kbd { display: none; }
}
@media (max-width: 860px) {
  .sidebar { display: none; }
  .options { margin-left: 0; }
}
.err-line { background: rgba(244,112,103,.16); }