:root {
  color-scheme: light;
  --ink: #1c1917;
  --muted: #78716c;
  --line: #e7e5e4;
  --paper: #fafaf9;
  --panel: #fff;
  --accent: #9a3412;
  font: 14px/1.4 "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); }
header { padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
header p { margin: 4px 0 0; }
.muted { color: var(--muted); }
main {
  display: grid;
  grid-template-columns: 240px minmax(0, 1.4fr) minmax(280px, 0.8fr);
  height: calc(100vh - 74px);
}
aside, section { border-right: 1px solid var(--line); background: var(--panel); min-width: 0; }
aside { overflow: auto; }
.card { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.card h2 { margin: 0 0 4px; font-size: 14px; }
.card p { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.card a { color: var(--accent); }
button, .card button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
}
button:disabled { opacity: 0.45; cursor: default; }
.bar { display: flex; gap: 8px; align-items: center; padding: 8px; border-bottom: 1px solid var(--line); }
.editor { display: flex; flex-direction: column; min-height: 0; }
.brief { max-height: 34%; overflow: auto; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.brief h2, .brief h3 { margin: 10px 0 4px; font-size: 14px; }
.brief p, .brief li { margin: 0 0 6px; }
.brief pre, .brief code { font: 12px/1.4 Consolas, ui-monospace, monospace; }
.brief pre { padding: 8px; background: #f5f5f4; overflow: auto; }
.notes { display: grid; gap: 6px; padding: 8px; border-bottom: 1px solid var(--line); }
.notes[hidden] { display: none; }
.notes input, .notes textarea { width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: 6px; font: inherit; }
.notes textarea { min-height: 48px; resize: vertical; }
.card pre.logs { max-height: 120px; overflow: auto; margin: 8px 0 0; padding: 6px; background: #1c1917; color: #f5f5f4; font: 11px/1.35 Consolas, monospace; white-space: pre-wrap; }
.split { display: grid; grid-template-columns: 220px minmax(0, 1fr); flex: 1; min-height: 0; }
#tree { margin: 0; padding: 8px; overflow: auto; list-style: none; border-right: 1px solid var(--line); }
#tree button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 3px 4px; }
#tree button.active { background: #ffedd5; }
#code, #sql {
  width: 100%;
  border: 0;
  resize: none;
  font: 13px/1.45 Consolas, ui-monospace, monospace;
  padding: 10px;
}
#code { height: 100%; }
.db { display: flex; flex-direction: column; border-right: 0; }
#sql { height: 120px; border-bottom: 1px solid var(--line); }
.tables { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; max-height: 90px; overflow: auto; }
.tables button { font: 12px Consolas, monospace; }
#sqlOut { flex: 1; margin: 0; padding: 10px; overflow: auto; background: #1c1917; color: #f5f5f4; font: 12px/1.4 Consolas, monospace; white-space: pre-wrap; }
body.work { height: 100vh; display: flex; flex-direction: column; }
.work-bar { display: flex; gap: 10px; align-items: center; }
.work-bar a { color: var(--accent); }
.grow { flex: 1; }
.work-split { display: grid; grid-template-columns: 260px minmax(0, 1fr); flex: 1; min-height: 0; }
body.work #sql { height: 140px; }
body.work #sqlOut { flex: 1; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #a8a29e; margin-right: 6px; }
.dot.on { background: #15803d; }
.dot.busy { background: #ca8a04; }