:root {
  --bg: #050505;
  --panel: #101010;
  --panel-2: #171717;
  --fg: #ececec;
  --muted: #8d8d8d;
  --border: #303030;
  --accent: #ff5b4d;
  --accent-2: #ffd166;
  --success: #38c172;
  --danger: #ff6b6b;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --keyboard-offset: 0px;
}

html.theme-light {
  --bg: #f4f1e9;
  --panel: #fffdf8;
  --panel-2: #ebe6db;
  --fg: #191919;
  --muted: #666;
  --border: #c9c1b2;
  --accent: #b83224;
  --accent-2: #8a6500;
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  width: 100%; height: 100%; margin: 0; overflow: hidden;
  color: var(--fg); background: var(--bg); font-family: var(--font-ui);
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; color: inherit; }
button, select, input {
  min-height: 38px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--panel); padding: .4rem .65rem;
}
button { cursor: pointer; touch-action: manipulation; }
button:hover { border-color: var(--muted); }
button.primary { color: #111; background: var(--accent-2); border-color: var(--accent-2); font-weight: 700; }

#statusBar {
  height: 48px; display: flex; align-items: center; gap: .65rem;
  padding: max(.35rem, env(safe-area-inset-top)) .65rem .35rem;
  border-bottom: 1px solid var(--border); background: var(--panel);
  font-size: .78rem; color: var(--muted);
}
#dirtyDot { width: 9px; height: 9px; border: 1px solid var(--muted); border-radius: 50%; flex: 0 0 auto; }
#statusBar.dirty #dirtyDot { background: var(--accent); border-color: var(--accent); }
#cwd { color: var(--success); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#connectionState { margin-left: auto; }
#serverSwitch { display: flex; gap: .25rem; margin-left: auto; }
#serverSwitch a {
  min-height: 30px; display: inline-flex; align-items: center; padding: .2rem .5rem;
  border: 1px solid var(--border); border-radius: 999px; color: var(--muted); text-decoration: none;
}
#serverSwitch a.active { color: var(--bg); background: var(--fg); }
#serverSwitch + #connectionState { margin-left: 0; }
#connectionState.online { color: var(--success); }
#saveState { white-space: nowrap; }

#workspace { height: calc(100dvh - 48px); display: flex; min-height: 0; }
#fileDrawer {
  width: 280px; flex: 0 0 280px; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); background: var(--panel); overflow: hidden;
}
.drawer-head { display: grid; grid-template-columns: auto 1fr auto; gap: .4rem; align-items: center; padding: .5rem; border-bottom: 1px solid var(--border); }
.drawer-head strong { text-align: center; font-size: .82rem; }
.drawer-actions { display: inline-flex; gap: .35rem; }
.drawer-actions button { min-height: 30px; font-size: .72rem; }
#roots { display: flex; gap: .35rem; padding: .45rem; overflow-x: auto; border-bottom: 1px solid var(--border); }
#roots button { min-height: 30px; white-space: nowrap; font: .72rem var(--font-mono); padding: .25rem .45rem; }
#fileList { flex: 1; overflow: auto; padding: .35rem; }
.file-row {
  width: 100%; min-height: 34px; display: grid; grid-template-columns: 22px minmax(0,1fr) auto;
  gap: .4rem; align-items: center; border: 0; background: transparent; text-align: left;
  font: .78rem var(--font-mono); padding: .35rem .45rem;
}
.file-row:hover { background: var(--panel-2); }
.file-row small { color: var(--muted); font-size: .65rem; }
#drawerScrim { display: none; }

#editorArea { flex: 1; min-width: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
#panes, #dbBrowser { grid-row: 2; }
#quickActions { grid-row: 3; }
#editorToolbar {
  display: grid; grid-template-columns: 130px minmax(160px,1fr) minmax(120px,.45fr) auto auto;
  gap: .4rem; padding: .45rem; border-bottom: 1px solid var(--border); background: var(--panel);
}
#editorToolbar input, #editorToolbar select { width: 100%; font-size: 16px; }
#database, #schemaButton, #browseButton { display: none; }
#editorToolbar.sql #database, #editorToolbar.sql #schemaButton, #editorToolbar.sql #browseButton { display: block; }
body[data-focus="files"] #fileDrawer { width: 100%; flex-basis: 100%; border-right: 0; }
body[data-focus="files"] #editorArea { display: none; }
body[data-focus="editor"] #fileDrawer { display: none; }
body[data-focus="preview"] #fileDrawer { display: none; }
body[data-focus="preview"] #inputPane { display: none; }
body[data-focus="preview"] #outputPane { display: grid !important; border-left: 0; }

#panes { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
#panes.split { grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); }
#panes.output-maximized { grid-template-columns: 1fr; }
#panes.output-maximized #inputPane { display: none; }
#panes.output-maximized #outputPane { display: grid; border-left: 0; }
#inputPane { min-width: 0; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); overflow: hidden; }
#lineNumbers, #code {
  margin: 0; border: 0; border-radius: 0; font-family: var(--font-mono);
  font-size: 16px; line-height: 1.5; padding: .7rem .45rem; tab-size: 4;
}
#lineNumbers {
  color: var(--accent-2); text-align: right; user-select: none; overflow: hidden;
  border-right: 1px solid var(--border); background: var(--panel);
}
#code {
  width: 100%; height: 100%; resize: none; outline: 0; overflow: auto;
  background: var(--bg); color: var(--fg); white-space: pre; touch-action: pan-x pan-y;
}

#outputPane {
  min-width: 0; display: none; grid-template-rows: auto minmax(0,1fr) auto;
  border-left: 1px solid var(--border); background: var(--panel);
}
#panes.output-visible #outputPane { display: grid; }
#outputHeader { display: flex; align-items: center; gap: .5rem; min-height: 42px; padding: .35rem .55rem; border-bottom: 1px solid var(--border); font-size: .78rem; }
#processState { color: var(--muted); }
#outputHeader button { margin-left: auto; min-height: 30px; }
#output, #preview { grid-row: 2; overflow: auto; margin: 0; padding: .7rem; font: 13px/1.45 var(--font-mono); white-space: pre-wrap; word-break: break-word; }
#preview:empty { display: none; }
#preview:not(:empty) + #output { display: none; }
#output.stderr { color: #ff9b8f; }
#stdinForm { display: flex; align-items: center; gap: .35rem; padding: .4rem .55rem; border-top: 1px solid var(--border); }
#stdinForm span { color: var(--accent-2); font-family: var(--font-mono); }
#stdinInput { flex: 1; min-width: 0; font: 16px var(--font-mono); background: var(--bg); }

#quickActions {
  display: flex; gap: .4rem; overflow-x: auto; padding: .45rem;
  padding-bottom: calc(.45rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border); background: var(--panel);
  transform: translateY(calc(-1 * var(--keyboard-offset)));
}
#quickActions button { flex: 0 0 auto; min-width: 68px; font-size: .82rem; }

.data-table { width: max-content; min-width: 100%; border-collapse: collapse; font: 12px var(--font-mono); }
.data-table th, .data-table td { padding: .4rem .5rem; border: 1px solid var(--border); text-align: left; max-width: 320px; overflow-wrap: anywhere; }
.data-table th { position: sticky; top: 0; background: var(--panel-2); }
.json-tree details { margin-left: 1rem; }
.json-tree summary { cursor: pointer; color: var(--accent-2); }
.media-preview, .pdf-preview { width: 100%; height: 100%; min-height: 420px; border: 0; object-fit: contain; background: #000; }
.chart { width: 100%; height: 280px; border: 1px solid var(--border); }
.schema-table { margin-bottom: 1rem; }
.schema-table h3 { color: var(--accent-2); }
#dbBrowser { min-height: 0; overflow: hidden; background: var(--bg); }
#dbBrowser > header { display: flex; gap: .4rem; align-items: center; padding: .5rem; border-bottom: 1px solid var(--border); }
#dbBrowser > header select { min-width: 180px; }
#dbCount { color: var(--muted); font-size: .78rem; margin-left: auto; }
#dbGrid { height: calc(100% - 52px); overflow: auto; padding: .5rem; }
#dbGrid td[contenteditable="true"] { background: var(--panel); outline: none; min-width: 110px; }
#dbGrid tr.changed td { box-shadow: inset 0 -2px var(--accent-2); }
.db-actions { position: sticky; right: 0; background: var(--panel); white-space: nowrap; }

#shortcutHelp { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; background: rgba(0,0,0,.65); }
#shortcutHelp[hidden] { display: none; }
.help-card { width: min(520px,100%); max-height: 90dvh; overflow: auto; padding: 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.help-card h2 { margin-top: 0; }
.help-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.help-card dt { font-family: var(--font-mono); color: var(--accent-2); }
.help-card dd { margin: 0; }

@media (max-width: 760px) {
  #statusBar { gap: .4rem; }
  #connectionState { display: none; }
  #fileDrawer {
    position: fixed; left: 0; top: 48px; bottom: 0; z-index: 60;
    transform: translateX(-102%); transition: transform .18s ease;
  }
  #fileDrawer.open { transform: translateX(0); }
  #drawerScrim { position: fixed; inset: 48px 0 0; z-index: 55; background: rgba(0,0,0,.5); }
  #drawerScrim.show { display: block; }
  #editorToolbar { grid-template-columns: 105px minmax(0,1fr); }
  #editorToolbar.sql { grid-template-columns: 100px minmax(0,1fr); }
  #editorToolbar.sql #database, #editorToolbar.sql #schemaButton, #editorToolbar.sql #browseButton { display: block; }
  #panes.split { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) minmax(180px,.65fr); }
  #panes.output-maximized { grid-template-rows: 1fr; }
  #outputPane { border-left: 0; border-top: 1px solid var(--border); }
  #lineNumbers, #code { font-size: 16px; }
  #quickActions { position: relative; z-index: 20; }
}