:root[data-theme='dark']{
  --bg: #0f1115;           /* общий фон */
  --fg: #e0e6ef;           /* основной текст */
  --muted: #9aa5b1;        /* вторичный текст */
  --line: #1a1d24;         /* границы */
  --surface: #151922;      /* панели/хедер/кнопки */
  --surface-2: #181c23;    /* hover состояний */
  --accent: #7aa2f7;
  --btn-fg: #e0e6ef;
  --btn-bg: var(--surface);
  --btn-border: var(--line);
}

/* Палитра: светлая */
:root[data-theme='light']{
  --bg: #f7f8fb;
  --fg: #1b1f24;
  --muted: #5b6570;
  --line: #d9dde3;
  --surface: #ffffff;      /* светлая панель/кнопки */
  --surface-2: #f0f3f7;    /* hover */
  --accent: #0b69c7;
  --btn-fg: #1b1f24;
  --btn-bg: var(--surface);
  --btn-border: #cfd6dd;
}

* { box-sizing: border-box; }
html, body, #editor { height: 100%; margin:0; }
body { background: var(--bg); color: var(--fg); font: 14px/1.4 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid var(--line);
  background:var(--surface);         /* раньше было полупрозрачное тёмное */
  position:sticky; top:0; z-index:10;
}

.brand { font-weight:700; letter-spacing:.4px; }
.toolbar { display:flex; align-items:center; gap:8px; }
.sep{ background:var(--line); }
button, select, .chk{
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:1px solid var(--btn-border);
  border-radius:8px; padding:7px 10px;
}
button:hover{ background:var(--surface-2); border-color:var(--line); cursor:pointer; }
select { padding:7px 8px; }
.chk { padding:6px 10px; display:flex; align-items:center; gap:6px; }
#editor { height: calc(100% - 92px); } /* минус header+footer */
.footer{ border-top:1px solid var(--line); color:var(--muted); background:var(--surface); }
.hint { color:var(--muted); }

.flash {
  position: fixed; top: 56px; right: 16px; background: #1f6feb; color: white;
  padding: 8px 12px; border-radius: 8px; box-shadow: 0 6px 22px rgba(0,0,0,.35);
}