/* Editor UI Styles */
:root {
  --editor-bg: #f9fafb;
  --editor-card: #ffffff;
  --editor-border: #e5e7eb;
  --editor-text: #111827;
  --editor-muted: #6b7280;
  --brand-1: #2563eb;
  --brand-2: #10b981;
  --accent: #f59e0b;
}

/* Dark theme toggled via .editor-dark on body */
body.editor-dark {
  --editor-bg: #0b0f14;
  --editor-card: #121820;
  --editor-border: #1f2937;
  --editor-text: #e5e7eb;
  --editor-muted: #94a3b8;
}

.editor-page {
  background: var(--editor-bg);
}

.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 8px;
}
.editor-header h2 { margin: 0; }
.editor-header .editor-actions button {
  border: 1px solid var(--editor-border);
  background: var(--editor-card);
  color: var(--editor-text);
  border-radius: 999px;
  padding: 6px 10px;
}

.editor-wrap {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 16px;
}

.editor-panel {
  background: var(--editor-card);
  border: 1px solid var(--editor-border);
  border-radius: 12px;
  padding: 12px;
}

.editor-toolbar {
  position: sticky;
  top: 8px;
  z-index: 2;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px;
  border: 1px solid var(--editor-border);
  background: linear-gradient(90deg, rgba(37,99,235,0.12), rgba(16,185,129,0.12));
  border-radius: 10px;
  backdrop-filter: saturate(1.2);
}
.editor-toolbar .sep {
  width: 1px; height: 22px; background: var(--editor-border);
}
.editor-toolbar button {
  border: none;
  background: var(--editor-card);
  color: var(--editor-text);
  border: 1px solid var(--editor-border);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
}
.editor-toolbar button:hover { border-color: var(--brand-1); }

.editor-fields label { display: block; }
.editor-fields input, .editor-panel textarea {
  width: 100%;
  border: 1px solid var(--editor-border);
  background: var(--editor-card);
  color: var(--editor-text);
  border-radius: 8px;
  padding: 8px;
}
.editor-panel textarea { min-height: 280px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.editor-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.editor-counters { color: var(--editor-muted); }
.editor-submit button { margin-right: 6px; }

.editor-preview {
  border: 1px solid var(--editor-border);
  border-radius: 12px;
  background: var(--editor-card);
  padding: 12px;
}
.preview-header { display:flex; align-items:center; justify-content:space-between; }
.preview-header .hint { color: var(--editor-muted); }
.preview-body { max-height: 70vh; overflow: auto; }
.preview-body .article { border: none; }

.cat-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-pill { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--editor-border); background: var(--editor-card); color: var(--editor-text); border-radius: 999px; padding: 4px 10px; }
.cat-pill input { accent-color: var(--brand-1); }

@media (max-width: 900px) {
  .editor-wrap { grid-template-columns: 1fr; }
  .editor-panel textarea { min-height: 220px; }
}