:root {
  --bg: #0f0e0c; --surface: #1a1815; --surface2: #221f1b;
  --border: #2e2a24; --accent: #c8783a; --text: #e8e2d9;
  --text-dim: #8a8278; --text-faint: #4a453e;
  --success: #6baa6b; --danger: #c85a5a;
  --radius: 6px;
  --mono: 'DM Mono', monospace;
  --header-h: 50px;
  --panel-w: 240px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--mono); overflow: hidden; }

/* ── Header ── */
.editor-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 1rem; gap: 0.75rem;
  z-index: 100;
}

.header-back {
  font-size: 0.72rem; color: var(--text-dim); text-decoration: none;
  display: flex; align-items: center; gap: 0.35rem;
  flex-shrink: 0; transition: color 0.12s; white-space: nowrap;
}
.header-back:hover { color: var(--text); }

.header-chapter {
  flex: 1; font-size: 0.72rem; color: var(--text-faint);
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.save-status {
  font-size: 0.65rem; color: var(--text-faint);
  min-width: 5rem; text-align: right;
}
.save-status.dirty  { color: var(--accent); }
.save-status.saving { color: var(--text-faint); }
.save-status.saved  { color: var(--success); }
.save-status.error  { color: var(--danger); }

.btn-save {
  padding: 0.3rem 0.9rem;
  background: var(--accent); border: none; border-radius: var(--radius);
  font-family: var(--mono); font-size: 0.72rem; color: #fff;
  cursor: pointer; transition: opacity 0.12s;
}
.btn-save:disabled { opacity: 0.3; cursor: not-allowed; }
.btn-save:not(:disabled):hover { opacity: 0.85; }

.btn-save-all {
  display: flex; align-items: center;
  padding: 0.3rem 0.9rem;
  background: none; border: 1px solid var(--accent); border-radius: var(--radius);
  font-family: var(--mono); font-size: 0.72rem; color: var(--accent);
  cursor: pointer; transition: background 0.12s;
}
.btn-save-all:hover { background: rgba(200,120,58,0.12); }

.btn-break {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  background: none; border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--mono); font-size: 0.68rem;
  color: var(--text-dim); cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.btn-break:disabled { opacity: 0.3; cursor: not-allowed; }
.btn-break:not(:disabled):hover { color: var(--text); border-color: var(--text-faint); }

.btn-replace {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  background: none; border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--mono); font-size: 0.68rem;
  color: var(--text-dim); cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.btn-replace:hover { color: var(--text); border-color: var(--text-faint); }


.btn-add-page,
.btn-del-page {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  background: none; border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--mono); font-size: 0.68rem;
  color: var(--text-dim); cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.btn-add-page:hover { color: var(--text); border-color: var(--text-faint); }
.btn-del-page { color: var(--danger); border-color: rgba(200,90,90,0.35); }
.btn-del-page:disabled,
.btn-add-page:disabled { opacity: 0.3; cursor: not-allowed; }
.btn-del-page:not(:disabled):hover { background: rgba(200,90,90,0.1); border-color: var(--danger); }

/* ── Find & Replace modal ── */
.modal-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 200;
  align-items: center; justify-content: center;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  width: 420px; max-width: 90vw;
  display: flex; flex-direction: column; gap: 1rem;
}
.modal-title {
  font-size: 0.78rem; font-weight: 500; color: var(--text);
  letter-spacing: 0.04em;
}
.modal-field { display: flex; flex-direction: column; gap: 0.35rem; }
.modal-label { font-size: 0.68rem; color: var(--text-dim); }
.modal-input {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.4rem 0.6rem;
  font-family: var(--mono); font-size: 0.78rem; color: var(--text);
  outline: none; width: 100%;
}
.modal-input:focus { border-color: var(--accent); }
.modal-options { display: flex; gap: 1.5rem; }
.modal-opt {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; color: var(--text-dim); cursor: pointer;
}
.modal-opt input { accent-color: var(--accent); cursor: pointer; }
.modal-progress {
  font-size: 0.72rem; color: var(--text-faint);
  min-height: 1.2rem;
}
.modal-progress.ok    { color: var(--success); }
.modal-progress.error { color: var(--danger); }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }

.btn-primary {
  padding: 0.35rem 1rem;
  background: var(--accent); border: none; border-radius: var(--radius);
  font-family: var(--mono); font-size: 0.72rem; color: #fff;
  cursor: pointer; transition: opacity 0.12s;
}
.btn-primary:disabled { opacity: 0.3; cursor: not-allowed; }
.btn-primary:not(:disabled):hover { opacity: 0.85; }
.btn-secondary {
  padding: 0.35rem 0.9rem;
  background: none; border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim);
  cursor: pointer; transition: color 0.12s, border-color 0.12s;
}
.btn-secondary:hover { color: var(--text); border-color: var(--text-faint); }

/* ── Two-panel layout ── */
.editor-body {
  position: fixed;
  top: var(--header-h); left: 0; right: 0; bottom: 0;
  display: flex;
}

/* ── Chapter panel ── */
.chapter-panel {
  width: var(--panel-w); flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.chapter-panel-title {
  padding: 0.75rem 1rem 0.55rem;
  font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.chapter-list { flex: 1; overflow-y: auto; }

.chapter-item {
  padding: 0.55rem 0.75rem 0.55rem 1rem;
  font-size: 0.72rem; color: var(--text-dim);
  cursor: pointer; border-bottom: 1px solid var(--border);
  transition: background 0.1s, color 0.1s;
  display: flex; align-items: center; gap: 0.4rem;
  overflow: hidden;
}
.chapter-item:hover { background: var(--surface2); color: var(--text); }
.chapter-item.active { background: var(--surface2); color: var(--text); }
.chapter-item .dirty-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}
.chapter-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Monaco container ── */
.editor-pane { flex: 1; overflow: hidden; }