/* Biến màu, reset và kiểu nền chung. */
:root {
  --bg: #0e1015;
  --panel: #161922;
  --panel-2: #1d212c;
  --line: #2a2f3d;
  --text: #e8eaf1;
  --muted: #8d94a8;
  --brand: #6d5bff;
  --brand-2: #8878ff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#appbar { flex: none; height: 56px; }
.editorbar { flex: none; height: 52px; background: var(--bg); }
.editor { flex: 1; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.page { flex: 1; min-height: 0; overflow-y: auto; }

.nav { display: flex; gap: 4px; margin-left: 12px; }
.nav button { background: transparent; border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer; color: var(--muted); font-weight: 600; }
.nav button:hover { color: var(--text); }
.nav button.on { background: var(--panel-2); color: var(--text); }

button, select, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }