/* ============================================================
   Rich Text Editor CSS
   ============================================================ */

.editor-toolbar {
  display: flex; flex-wrap: wrap; gap: 2px; align-items: center;
  padding: 8px; border: 1.5px solid var(--border-strong);
  border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--surface-2);
  position: sticky; top: var(--nav-height); z-index: 80;
}
.editor-toolbar button {
  min-width: 34px; height: 34px; padding: 0 8px;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--text-soft); cursor: pointer;
  font-family: var(--font-main); font-size: .92rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.editor-toolbar button:hover { background: var(--border); color: var(--text); }
.editor-toolbar .toolbar-select {
  height: 32px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
  font-family: var(--font-main); font-size: .86rem; padding: 0 6px;
}
.toolbar-sep { width: 1px; height: 22px; background: var(--border-strong); margin: 0 6px; }

.editor-area {
  min-height: 420px; max-height: 70vh; overflow-y: auto;
  border: 1.5px solid var(--border-strong);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 22px 24px; background: var(--surface);
  font-family: var(--font-main); font-size: 1.08rem; line-height: 1.8;
  color: var(--text); outline: none;
}
.editor-area:focus { border-color: var(--accent); }
.editor-area:empty::before {
  content: attr(data-placeholder); color: var(--muted); pointer-events: none;
}
.editor-area blockquote {
  margin: 1.2em 0; padding: 12px 18px; border-left: 4px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic; color: var(--text-soft);
}
.editor-area pre {
  background: #0d1321; color: #dbe2ef; padding: 14px 16px;
  border-radius: var(--radius-sm); overflow-x: auto; font-size: .9rem;
}
[data-theme="dark"] .editor-area pre { background: #0a0f1a; }
.editor-area img { max-width: 100%; border-radius: var(--radius-sm); }
.editor-area ul, .editor-area ol { padding-left: 1.6em; }
.editor-area a { color: var(--accent); text-decoration: underline; }

.preview-body { font-size: 1.1rem; line-height: 1.85; }
.preview-body img { max-width: 100%; border-radius: var(--radius); margin: 1em auto; display: block; }

@media (max-width: 768px) {
  .editor-toolbar { position: static; }
}