/* ===== VARIABLES ===== */
:root {
  --sidebar-bg: #1e1b4b;
  --sidebar-width: 220px;
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --primary-light: #eef2ff;
  --success: #10b981;
  --success-hover: #059669;
  --warning: #f59e0b;
  --warning-hover: #d97706;
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --publish-color: #7c3aed;
  --bg: #f1f5f9;
  --bg-card: #ffffff;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1);
  --status-draft: #94a3b8;
  --status-generating: #3b82f6;
  --status-review: #f59e0b;
  --status-approved: #10b981;
  --status-published: #8b5cf6;

  /* === ÓRFÃS RESOLVIDAS (alias semânticos + novos) === */
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --bg-secondary: #f8fafc;
  --bg-hover: #f1f5f9;
  --surface: var(--bg-card);
  --primary-dark: #3730a3;

  /* === ACCENT LARANJA (Vibe B) === */
  --accent: #FF6B45;
  --accent-hover: #e65b3a;
  --accent-light: #FFF1EC;

  /* === TINTS DE STATUS (extraídos dos hardcodes) === */
  --status-draft-bg: #f1f5f9;
  --status-generating-bg: #eff6ff;
  --status-review-bg: #fffbeb;
  --status-approved-bg: #f0fdf4;
  --status-published-bg: #faf5ff;

  /* === SCALE DE SPACING (4-point) === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* === SCALE DE TIPOGRAFIA (base 16px) === */
  --text-xs: 0.6875rem;   /* 11px — micro labels, badges */
  --text-sm: 0.8125rem;   /* 13px — hints, fine print */
  --text-base: 0.875rem;  /* 14px — body padrão, table cells */
  --text-md: 0.9375rem;   /* 15px — sidebar nav, sub-headings */
  --text-lg: 1rem;        /* 16px — card headers, section titles */
  --text-xl: 1.25rem;     /* 20px — tela headings */
  --text-2xl: 1.5rem;     /* 24px — títulos grandes */

  /* === FOCUS RING === */
  --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.12);

  /* === EDITOR === */
  --editor-code-bg: #1e1e2e;
  --editor-code-text: #cdd6f4;
  --editor-page-max-width: 720px;

  /* === SHADOWS EXTRA === */
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.2);

  /* === OVERLAY === */
  --overlay: rgba(15, 23, 42, 0.5);

  /* === CALENDAR === */
  --calendar-today-bg: var(--accent-light);
  --calendar-today-border: var(--accent);

  /* === PUBLISH HOVER === */
  --publish-color-hover: #6d28d9;

  /* === TOASTS (dark backgrounds, intencional) === */
  --toast-bg: #1e293b;
  --toast-success-bg: #064e3b;
  --toast-error-bg: #7f1d1d;
  --toast-warning-bg: #78350f;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }

/* ===== FOCUS VISIBLE (a11y) ===== */
/* Remove outline padrão do browser que conflita com o design */
*:focus { outline: none; }
/* Mostra anel de foco apenas em navegação por teclado */
*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius);
}
/* Botões: box-shadow respeita o border-radius arredondado */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-publish:focus-visible,
.btn-success:focus-visible,
.btn-danger:focus-visible,
.btn-warning:focus-visible,
.btn-outline-success:focus-visible,
.btn-outline-warning:focus-visible,
.btn-ghost:focus-visible,
.btn-ai:focus-visible,
.btn-secondary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
/* Nav items: outline interno com accent laranja */
.nav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* Tabs settings e editor */
.settings-tab-btn:focus-visible,
.editor-view-tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--text-base);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
}

/* ===== LAYOUT ===== */
#app { display: flex; min-height: 100vh; }

/* ===== SIDEBAR ===== */
#sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  padding: 1.25rem 0;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: 0 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: .75rem;
}
.brand-logo {
  width: 32px; height: 32px;
  background: var(--primary);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .75rem;
  color: #fff;
  flex-shrink: 0;
}
.brand-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.3px;
}
.nav-menu { list-style: none; padding: 0 .75rem; flex: 1; }
.nav-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  cursor: pointer;
  color: rgba(255,255,255,.65);
  font-size: var(--text-md);
  font-weight: 500;
  transition: all .15s;
  margin-bottom: .25rem;
  user-select: none;
  border-left: 3px solid transparent;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: rgba(255,255,255,.15); color: #fff; border-left-color: var(--accent); }
.nav-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.nav-label { flex: 1; }
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--space-2);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  margin-left: auto;
}
.nav-badge--accent { background: var(--accent); color: #fff; }
.nav-badge[hidden] { display: none; }

/* ===== SIDEBAR USER BLOCK ===== */
.sidebar-user {
  margin-top: auto;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.sidebar-user-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.sidebar-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 600;
  flex-shrink: 0;
}
.sidebar-user-name {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-logout {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: var(--text-lg);
  padding: var(--space-1);
  border-radius: var(--radius);
  flex-shrink: 0;
  line-height: 1;
}
.sidebar-user-logout:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* ===== MAIN CONTENT ===== */
#main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-height: 100vh;
  overflow: hidden;
}

/* ===== PAGES ===== */
.page { display: none; padding: 2rem; min-height: 100vh; }
.page.active { display: block; }

/* ===== PAGE HEADER ===== */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}
.page-title { font-size: var(--text-2xl); font-weight: 700; color: var(--text); }
.page-subtitle { font-size: var(--text-sm); color: var(--text-muted); margin-top: .2rem; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary, .btn-publish, .btn-success, .btn-danger, .btn-warning {
  transition: background .15s, box-shadow .15s, transform .1s;
}
.btn-primary:hover:not(:disabled),
.btn-publish:hover:not(:disabled),
.btn-success:hover:not(:disabled),
.btn-danger:hover:not(:disabled),
.btn-warning:hover:not(:disabled) { box-shadow: var(--shadow-md); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover:not(:disabled) { background: #e8ecf0; }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover:not(:disabled) { background: var(--success-hover); }
.btn-warning { background: var(--warning); color: #fff; }
.btn-warning:hover:not(:disabled) { background: var(--warning-hover); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: var(--danger-hover); }
.btn-outline-success { background: transparent; color: var(--success); border: 1px solid var(--success); }
.btn-outline-success:hover:not(:disabled) { background: rgba(16,185,129,.08); }
.btn-outline-warning { background: transparent; color: var(--warning); border: 1px solid var(--warning); }
.btn-outline-warning:hover:not(:disabled) { background: rgba(245,158,11,.08); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--bg); color: var(--text); }
.btn-publish { background: var(--publish-color); color: #fff; }
.btn-publish:hover:not(:disabled) { background: var(--publish-color-hover); }
.btn-ai { background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%); color: #fff; }
.btn-ai:hover:not(:disabled) { background: linear-gradient(135deg, #0284c7 0%, #7c3aed 100%); }
.btn-ai:disabled { opacity: .6; cursor: not-allowed; }
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn-icon { padding: .375rem .625rem; font-size: 1.125rem; font-weight: 400; }
.btn-full { width: 100%; justify-content: center; }

/* ===== UTILITY — COR DE TEXTO ===== */
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-muted   { color: var(--text-muted); }
.text-default { color: var(--text); }

/* ===== UTILITY — COR DE FUNDO (progress bars) ===== */
.bg-success { background: var(--success); }
.bg-warning { background: var(--warning); }
.bg-danger  { background: var(--danger); }

/* ===== UTILITY — LABEL OPCIONAL ===== */
.label-optional { font-weight: 400; color: var(--text-muted); }

/* ===== INPUTS ===== */
.input {
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--text);
  background: var(--bg-card);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.input:focus,
.input:focus-visible { border-color: var(--primary); box-shadow: var(--focus-ring); outline: none; }
.input.input-sm { padding: .375rem .625rem; font-size: .8125rem; }
.textarea { resize: vertical; min-height: 80px; }
.textarea-sm { min-height: 60px; }
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: .375rem; color: var(--text); }
.form-label-sm { display: block; font-size: var(--text-xs); font-weight: 600; margin-bottom: .25rem; color: var(--text-muted); }
.form-hint { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: .25rem; }
.form-hint-inline { font-size: var(--text-xs); color: var(--text-muted); font-weight: 400; }
.required { color: var(--danger); }
.char-counter { font-weight: 400; color: var(--text-muted); float: right; }
.char-counter.over { color: var(--danger); }
.form-actions-row {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/* ===== STATUS BADGES ===== */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-draft { background: var(--status-draft-bg); color: var(--status-draft); }
.status-generating { background: var(--status-generating-bg); color: var(--status-generating); animation: pulse 1.5s infinite; }
.status-review { background: var(--status-review-bg); color: var(--status-review); }
.status-approved { background: var(--status-approved-bg); color: var(--status-approved); }
.status-published { background: var(--status-published-bg); color: var(--status-published); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }

/* ===== CALENDAR ===== */
.calendar-container {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.calendar-month-label { font-size: var(--text-lg); font-weight: 700; }
.calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}
.calendar-grid-header > div {
  text-align: center;
  padding: .625rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
}
.calendar-day {
  min-height: 110px;
  padding: .5rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  background: var(--bg-card);
  position: relative;
}
.calendar-day:nth-child(7n) { border-right: none; }
.calendar-day.other-month { background: var(--bg-secondary); }
.calendar-day.today { background: var(--calendar-today-bg); border: 1px solid var(--calendar-today-border); }
.day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: .375rem;
}
.calendar-day.today .day-number {
  background: var(--primary);
  color: #fff;
}
.day-articles { display: flex; flex-direction: column; gap: .25rem; }
.article-card {
  background: var(--primary-light);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  padding: var(--space-2);
  cursor: pointer;
  transition: opacity .15s;
  flex-shrink: 0;
}
.article-card:hover { opacity: .85; }
.article-card.status-draft { background: var(--bg-secondary); border-color: var(--status-draft); }
.article-card.status-generating { background: var(--status-generating-bg); border-color: var(--status-generating); }
.article-card.status-review { background: var(--status-review-bg); border-color: var(--status-review); }
.article-card.status-approved { background: var(--status-approved-bg); border-color: var(--status-approved); }
.article-card.status-published { background: var(--status-published-bg); border-color: var(--status-published); }
.article-card-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  margin-bottom: 3px;
}
.article-card-keyword {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== IMAGE TEMPLATES ===== */
.it-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .875rem 1rem;
  margin-bottom: .625rem;
  transition: box-shadow .15s;
}
.it-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.it-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .35rem;
}
.it-card-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.it-card-name { font-weight: 600; font-size: .9rem; color: var(--text); }
.it-card-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.it-card-desc { font-size: .8rem; color: var(--text-muted); margin: 0 0 .3rem; }
.it-card-prompt {
  font-size: .78rem;
  color: var(--text-muted);
  margin: 0;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.it-badge-default {
  background: #fef3c7;
  color: #92400e;
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.it-badge-ratio {
  background: var(--primary-light);
  color: var(--primary);
  font-size: .7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
}
.btn-link-danger { color: #ef4444 !important; }
.btn-link-danger:hover { color: #dc2626 !important; }
.form-hint-inline { font-size: .78rem; color: var(--text-muted); font-weight: 400; margin-left: .25rem; }

/* ===== HISTORY TABLE ===== */
.filters-bar {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.filters-bar .input { max-width: 320px; }
.filters-bar select.input { max-width: 180px; }
.table-wrapper {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead { background: var(--bg-secondary); }
.data-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-base);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg-secondary); }
.data-table td.title-cell { font-weight: 500; cursor: pointer; color: var(--text-primary); }
.data-table td.title-cell:hover { color: var(--primary); text-decoration: underline; }
.table-actions { display: flex; gap: .5rem; }
.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 3rem !important;
  font-size: .875rem;
}

/* ===== SETTINGS ===== */
.settings-layout { display: flex; gap: 1.5rem; align-items: flex-start; }
.settings-tabs-nav {
  width: 200px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: .5rem;
  display: flex;
  flex-direction: column;
  gap: .125rem;
  position: sticky;
  top: 1.5rem;
}
.settings-tab-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: .625rem .875rem;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.settings-tab-btn:hover { background: var(--bg); color: var(--text); }
.settings-tab-btn.active { background: var(--primary-light); color: var(--primary); font-weight: 700; }
.settings-tabs-content { flex: 1; min-width: 0; }
.settings-panel { display: none; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.75rem; }
.settings-panel.active { display: block; }
.settings-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.settings-card > h3:first-child,
.settings-card > h4:first-child {
  margin-top: 0;
  margin-bottom: var(--space-4);
  font-size: var(--text-md);
  font-weight: 700;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.settings-section-title { font-size: var(--text-md); font-weight: 700; margin-bottom: 1rem; padding-bottom: .625rem; border-bottom: 1px solid var(--border); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; }
.toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: #cbd5e1; border-radius: 999px;
  cursor: pointer; transition: .2s;
}
.toggle-slider::before {
  content: ''; position: absolute;
  width: 18px; height: 18px;
  background: #fff; border-radius: 50%;
  left: 3px; bottom: 3px;
  transition: .2s; box-shadow: var(--shadow-sm);
}
.toggle input:checked + .toggle-slider { background: var(--primary); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }
.list-input-row { display: flex; gap: .5rem; margin-bottom: .875rem; align-items: center; }
.list-input-row .input { flex: 1; }
.tag-list, .url-list { display: flex; flex-direction: column; gap: .375rem; }
.tag-item, .url-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .8125rem;
  gap: .75rem;
}
.tag-item span, .url-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remove-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: .875rem;
  padding: .2rem .4rem; border-radius: 4px;
  transition: all .15s; flex-shrink: 0;
}
.remove-btn:hover { background: #fee2e2; color: var(--danger); }
.services-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 1rem; }
.test-result {
  margin-top: 1rem;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  font-size: .8125rem;
  font-weight: 500;
}
.test-result.success { background: #f0fdf4; color: var(--success); border: 1px solid #bbf7d0; }
.test-result.error { background: #fef2f2; color: var(--danger); border: 1px solid #fecaca; }

/* ── Plugin Status Card ──────────────────────────────────────────────────── */
.plugin-status-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-top: 1.25rem;
  overflow: hidden;
}
.plugin-status-header {
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem 1rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: .875rem;
}
.plugin-status-badge { font-size: 1rem; margin-left: auto; }
.plugin-status-body  { padding: .875rem 1rem; font-size: .8125rem; }
.plugin-status-hint  { color: var(--text-muted); margin: 0; }
.plugin-status-footer {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.plugin-check-ts { font-size: .725rem; color: var(--text-muted); }

/* version rows */
.ps-versions { margin-bottom: .625rem; }
.ps-version-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.ps-vl { color: var(--text-muted); min-width: 185px; font-size: .8rem; }

/* capabilities grid */
.ps-caps-title { font-size: .75rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin: .625rem 0 .375rem; }
.ps-caps { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .75rem; }
.ps-cap-row { font-size: .8rem; }
.ps-cap-ok  { color: var(--success); }
.ps-cap-err { color: var(--danger); }

/* status messages */
.ps-msg { margin: .375rem 0 .5rem; font-size: .8rem; font-weight: 500; }
.ps-meta { margin-top: .625rem; font-size: .725rem; color: var(--text-muted); }

/* colored states */
.ps-ok   { color: var(--success); }
.ps-warn { color: #d97706; }
.ps-err  { color: var(--danger); }
code.ps-ok   { background: #f0fdf4; border: 1px solid #bbf7d0; padding: 1px 6px; border-radius: 4px; }
code.ps-warn { background: #fffbeb; border: 1px solid #fcd34d; padding: 1px 6px; border-radius: 4px; }
code.ps-err  { background: #fef2f2; border: 1px solid #fecaca; padding: 1px 6px; border-radius: 4px; }
#author-fields .input,
#author-fields textarea.input {
  color: #1a1a1a !important;
  background-color: #ffffff !important;
  -webkit-text-fill-color: #1a1a1a !important;
}
.author-photo-row { display: flex; align-items: center; gap: .75rem; margin-top: .375rem; }
.author-photo-preview {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.author-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.file-input { display: none; }

/* Multi-field input rows (brand + geo tabs) */
.dual-field-input-row,
.triple-field-input-row {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.dual-field-input-row .input,
.triple-field-input-row .input { flex: 1; min-width: 140px; }

/* Multi-field list */
.multi-field-list { margin-top: .5rem; display: flex; flex-direction: column; gap: .35rem; }
.multi-field-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .8125rem;
}
.mfi-content { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.mfi-content strong { color: var(--text); font-size: .8125rem; font-weight: 600; }
.mfi-content span { color: var(--text-muted); font-size: .75rem; }
.mfi-url { font-family: monospace; font-size: .72rem; color: var(--text-muted); }
.mfi-badge {
  display: inline-block; font-size: .68rem; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border);
  padding: 0 5px; border-radius: 4px; margin-left: 4px;
}
.list-empty-hint { color: #94a3b8; font-size: .75rem; padding: .5rem 0; }

/* Social media fields in Author settings */
.social-fields-grid { display: flex; flex-direction: column; gap: .5rem; margin-top: .375rem; }
.social-field-row { display: flex; align-items: center; gap: .5rem; }
.social-field-icon {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; color: var(--text-muted);
  flex-shrink: 0; text-transform: uppercase; letter-spacing: .5px;
}
.social-field-row .input { flex: 1; }

/* ===== EDITOR ===== */
#page-editor { padding: 0; flex-direction: column; }
#page-editor.active { display: flex; }
.editor-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: var(--space-3) var(--space-6);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.editor-topbar-center { flex: 1; display: flex; align-items: center; gap: .75rem; min-width: 0; }
.editor-title-display {
  font-size: var(--text-md);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editor-topbar-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.editor-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.editor-main {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.editor-view-tabs {
  display: flex;
  gap: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: .5rem 1rem 0;
  flex-shrink: 0;
}
.editor-view-tab {
  padding: .5rem 1rem;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius) var(--radius) 0 0;
  font-family: inherit;
  transition: all .15s;
}
.editor-view-tab.active {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
}
.editor-pane { flex: 1; overflow-y: auto; background: var(--bg); }
.article-preview { padding: 2rem; background: var(--bg-card); }
.preview-content { max-width: 760px; margin: 0 auto; }
/* ── "Folha" flutuante no painel de preview ──────────────────────────────── */
.editor-content-page {
  background: var(--bg-card);
  max-width: var(--editor-page-max-width);
  margin: var(--space-6) auto var(--space-12);
  padding: var(--space-8) var(--space-10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.html-textarea {
  width: 100%; height: 100%;
  border: none;
  padding: var(--space-6);
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: var(--text-sm);
  line-height: 1.6;
  resize: none;
  outline: none;
  background: var(--editor-code-bg);
  color: var(--editor-code-text);
}
.editor-sidebar { overflow-y: auto; background: var(--bg); padding: var(--space-5); display: flex; flex-direction: column; gap: .875rem; }
.sidebar-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.sidebar-card-title { font-size: var(--text-sm); font-weight: 700; margin-bottom: .75rem; color: var(--text); }
.stat-row { display: flex; justify-content: space-between; align-items: center; padding: .3rem 0; }
.stat-label { font-size: .75rem; color: var(--text-muted); }
.stat-value { font-size: .875rem; font-weight: 700; color: var(--text); }
.cover-preview-box {
  width: 100%; height: 120px;
  background: var(--bg);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .625rem;
  overflow: hidden;
  color: var(--text-muted);
  font-size: .75rem;
}
.cover-preview-box img { width: 100%; height: 100%; object-fit: cover; }
.wp-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .75rem;
  color: var(--primary);
  text-decoration: none;
  margin-top: .375rem;
}
.wp-link:hover { text-decoration: underline; }

/* ── WP link/unlink block ──────────────────────────────────────────────────── */
.wp-link-block { font-size: .75rem; }
.wp-link-row {
  display: flex;
  align-items: center;
  gap: .375rem;
}
.wp-link-row .wp-link { margin-top: 0; flex: 1; }
.btn-unlink-wp {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--danger, #dc2626);
  font-size: .7rem;
  padding: .125rem .3rem;
  border-radius: 4px;
  line-height: 1;
  opacity: .7;
  transition: opacity .15s;
}
.btn-unlink-wp:hover { opacity: 1; background: var(--danger-bg, #fee2e2); }
.btn-link-wp-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted, #6b7280);
  font-size: .75rem;
  padding: 0;
  text-decoration: none;
}
.btn-link-wp-toggle:hover { color: var(--primary); text-decoration: underline; }
.wp-link-btn-row {
  display: flex;
  gap: .375rem;
  margin-top: .25rem;
}
.input-sm {
  font-size: .75rem;
  padding: .25rem .5rem;
  height: auto;
  width: 100%;
}
.generating-indicator {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--status-generating);
  font-weight: 600;
}
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(59,130,246,.3);
  border-top-color: var(--status-generating);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== ARTICLE PREVIEW STYLES ===== */
.preview-content h1 { font-size: 1.75rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.3; }
.preview-content h2 { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 .875rem; }
.preview-content h3 { font-size: 1.0625rem; font-weight: 700; margin: 1.5rem 0 .625rem; }
.preview-content p { margin-bottom: 1rem; line-height: 1.75; }
.preview-content ul, .preview-content ol { margin: .875rem 0 .875rem 1.5rem; }
.preview-content li { margin-bottom: .375rem; line-height: 1.6; }
.preview-content a { color: var(--primary); }
.preview-content strong { font-weight: 700; }
.preview-content em { font-style: italic; }
.preview-content details { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: .625rem; }
.preview-content summary { padding: .75rem 1rem; font-weight: 600; cursor: pointer; }
.preview-content details[open] summary { border-bottom: 1px solid var(--border); }
.preview-content details p { padding: .75rem 1rem; margin: 0; }
.preview-content .faq-section {
  border-top: 2px solid var(--border);
  margin-top: 2.5rem;
  padding-top: 1.25rem;
}
.preview-content .faq-item { margin-bottom: 1.25rem; }
.preview-content .faq-section h3,
.preview-content .faq-item h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .375rem;
  color: var(--text);
}
.preview-content .faq-section > p,
.preview-content .faq-item > p {
  margin: 0;
  color: #444;
  line-height: 1.7;
}
.preview-content .author-box {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem; background: #f8fafc;
  border-radius: var(--radius-lg); margin: 1.5rem 0;
  border: 1px solid var(--border);
}
.preview-content .author-box img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.preview-content .disclaimer-box {
  padding: 1rem 1.25rem;
  background: #fffbeb;
  border-left: 4px solid var(--warning);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.5rem 0;
  font-size: .875rem;
}

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed; inset: 0;
  background: var(--overlay);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}
.modal {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 480px;
  max-width: 95vw;
  animation: modalIn .2s ease;
}
@keyframes modalIn { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
}
.modal-title { font-size: var(--text-lg); font-weight: 700; }
.modal-body { padding: var(--space-6); font-size: var(--text-base); }
.modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
  background: var(--bg);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ===== TOAST ===== */
#toast-container {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.toast {
  display: flex; align-items: center; gap: .625rem;
  padding: .75rem 1rem;
  background: var(--toast-bg);
  color: #fff;
  border-radius: var(--radius);
  font-size: .8125rem;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  animation: toastIn .25s ease;
  max-width: 360px;
  min-width: 240px;
}
.toast.toast-success { background: var(--toast-success-bg); border-left: 3px solid var(--success); }
.toast.toast-error   { background: var(--toast-error-bg);   border-left: 3px solid var(--danger); }
.toast.toast-warning { background: var(--toast-warning-bg); border-left: 3px solid var(--warning); }
.toast-removing { animation: toastOut .25s ease forwards; }
@keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { to { transform: translateX(120%); opacity: 0; } }

/* ===== PASSWORD TOGGLE ===== */
.input-with-toggle {
  position: relative;
  display: flex;
  align-items: center;
}
.input-with-toggle .input {
  padding-right: 2.5rem;
}
.toggle-password-btn {
  position: absolute;
  right: .5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: .2rem;
  line-height: 1;
  opacity: .6;
  transition: opacity .15s;
}
.toggle-password-btn:hover { opacity: 1; }

/* ── API key test row ─────────────────────────────────────────────────────── */
.api-key-actions {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .35rem;
}
.btn-api-test {
  font-size: .72rem;
  padding: .18rem .55rem;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background .15s, color .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-api-test:hover:not(:disabled) { background: var(--bg); color: var(--text); }
.btn-api-test:disabled { opacity: .5; cursor: default; }
.api-test-inline {
  font-size: .72rem;
  font-weight: 600;
  min-width: 0;
}
.api-test-inline.success { color: #10b981; }
.api-test-inline.error   { color: #ef4444; }
.api-test-inline.warning { color: #f59e0b; }
.api-console-link {
  margin-left: auto;
  font-size: .72rem;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.api-console-link:hover { color: var(--primary); text-decoration: underline; }

/* ===== WP AUTH METHOD ===== */
.wp-auth-method {
  background: linear-gradient(135deg, #eef2ff 0%, #f0fdf4 100%);
  border: 1px solid #c7d2fe;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: .75rem;
}
.method-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .25rem;
}
.method-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}
.wp-auth-legacy {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin-bottom: .75rem;
}
.wp-auth-legacy summary {
  cursor: pointer;
  font-size: .85rem;
  color: var(--text-muted);
  user-select: none;
}
.wp-auth-legacy summary:hover { color: var(--text); }

/* ===== MISC ===== */
.no-articles-cal {
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; color: var(--text-muted);
  font-style: italic;
}

/* ===== IMAGE PROMPT PREVIEW ===== */
.settings-preview-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-top: .5rem;
  margin-bottom: 1rem;
}
.settings-preview-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 .5rem;
}
.settings-preview-text {
  font-size: .825rem;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
  word-break: break-word;
}

/* ===== SEO ANALYSIS PANEL ===== */
.seo-score-bar-wrap {
  background: var(--border);
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
  margin-bottom: .35rem;
}
.seo-score-bar {
  height: 100%;
  border-radius: 99px;
  width: 0%;
  transition: width .4s ease, background .4s ease;
}
.seo-score-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: .75rem;
}
.seo-indicators { display: flex; flex-direction: column; gap: .3rem; }
.seo-indicator {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  color: var(--text);
  line-height: 1.3;
}
.seo-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.seo-dot.green  { background: #10b981; }
.seo-dot.yellow { background: #f59e0b; }
.seo-dot.red    { background: #ef4444; }
.seo-dot.info   { background: #94a3b8; }

/* ===== WP CATEGORIES CHECKBOXES ===== */
.wp-cats-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem;
  max-height: 140px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.wp-cat-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  cursor: pointer;
  padding: .15rem .25rem;
  border-radius: 4px;
}
.wp-cat-item:hover { background: var(--bg-hover); }
.wp-cat-item input[type=checkbox] { cursor: pointer; }

.btn-link-sm {
  background: none;
  border: none;
  color: var(--primary);
  font-size: .7rem;
  cursor: pointer;
  padding: 0 .25rem;
  margin-left: .25rem;
}
.btn-link-sm:hover { text-decoration: underline; }
.form-hint-sm { font-size: .7rem; color: var(--text-muted); }

/* ===== CHECKBOX LABEL ===== */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .85rem;
  color: var(--text);
  cursor: pointer;
  line-height: 1.4;
}
.checkbox-label input[type=checkbox] { margin-top: 2px; flex-shrink: 0; }

/* ===== MODAL SM ===== */
.modal-sm { max-width: 420px; }

/* ===== SEO AI ANALYSIS ===== */
.seo-ai-section { margin-bottom: .6rem; }
.seo-ai-section-title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 .3rem;
}
.seo-ai-item {
  display: flex;
  gap: .4rem;
  font-size: .75rem;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: .2rem;
  align-items: flex-start;
}
.seo-ai-resumo {
  font-size: .75rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
}


/* ===== DELETE ARTICLE ===== */
.article-card { position: relative; }
.card-delete-btn {
  position: absolute;
  top: 2px;
  right: 3px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: .65rem;
  line-height: 1;
  opacity: 0;
  transition: opacity .15s;
  color: var(--text-muted);
  z-index: 1;
}
.article-card:hover .card-delete-btn { opacity: 1; }
.card-delete-btn:hover { color: var(--danger); }

.btn-delete-article {
  margin-top: .5rem;
  color: var(--text-muted);
  font-size: .8rem;
  border: 1px solid transparent;
}
.btn-delete-article:hover { color: var(--danger); border-color: var(--danger); }

.delete-wp-warning {
  background: #fffbeb;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  padding: .6rem .75rem;
  font-size: .8rem;
  color: #92400e;
}

/* ===== EDITOR.JS ===== */
#editor-visual-pane { padding: 0; display: block; overflow-y: auto; }
#editorjs-holder { min-height: 400px; padding: 1rem 0; }
.codex-editor { font-family: 'Inter', sans-serif; }
.codex-editor__redactor { padding-bottom: 100px !important; }
.ce-block__content, .ce-toolbar__content { max-width: none !important; margin: 0 1.5rem; }
.ce-paragraph { font-size: .9375rem; line-height: 1.75; color: var(--text); }
.ce-header { color: var(--text); }
.cdx-block { padding: .4rem 0; }

/* ===== TAGS CHIPS ===== */
.tags-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  min-height: 28px;
  padding: .3rem 0;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: var(--primary-light);
  color: var(--primary-dark);
  border: 1px solid #bfdbfe;
  border-radius: 99px;
  padding: .15rem .5rem;
  font-size: .7rem;
  font-weight: 500;
}
.tag-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: .6;
  font-size: .7rem;
  padding: 0;
  line-height: 1;
}
.tag-chip button:hover { opacity: 1; }
.tags-empty-hint {
  font-size: .7rem;
  color: var(--text-muted);
  font-style: italic;
}
.tag-add-row {
  display: flex;
  gap: .3rem;
  margin-top: .35rem;
  transition: opacity .2s;
}
.tag-add-row .input { flex: 1; }

/* ===== AUTOSAVE INDICATOR ===== */
.autosave-indicator {
  display: block;
  font-size: .7rem;
  color: var(--text-muted);
  text-align: center;
  min-height: 1rem;
  margin-bottom: .25rem;
}

/* ===== FACT-CHECK PANEL ===== */
.fc-approved {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #166534;
  font-size: .8125rem;
  font-weight: 600;
  padding: .5rem 0;
}
.fc-badge {
  background: #dcfce7;
  color: #166534;
  border-radius: 99px;
  padding: .15rem .55rem;
  font-size: .6875rem;
  font-weight: 600;
  border: 1px solid #bbf7d0;
}
.fc-section-header {
  font-size: .8rem;
  font-weight: 700;
  padding: .4rem 0 .25rem;
  margin-top: .25rem;
}
.fc-errors-header { color: #92400e; }
.fc-alerts-header { color: #1e40af; }
.fc-details {
  font-size: .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: .5rem;
  overflow: hidden;
}
.fc-details summary {
  padding: .375rem .625rem;
  cursor: pointer;
  background: #f8fafc;
  color: var(--text-muted);
  font-weight: 600;
  user-select: none;
}
.fc-details summary:hover { background: #f1f5f9; }
.fc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fc-item {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .5rem .625rem;
  border-top: 1px solid var(--border);
}
.fc-original {
  text-decoration: line-through;
  color: #dc2626;
  font-size: .7rem;
  line-height: 1.4;
}
.fc-arrow { color: var(--text-muted); font-size: .7rem; }
.fc-fix {
  color: #166534;
  font-size: .7rem;
  line-height: 1.4;
}
.fc-source {
  font-size: .65rem;
  color: var(--primary);
  text-decoration: none;
  margin-top: .1rem;
}
.fc-source:hover { text-decoration: underline; }
.fc-obs {
  color: #1e40af;
  font-size: .7rem;
  line-height: 1.4;
}
.fc-alert-item .fc-original { text-decoration: none; color: #92400e; }
.fc-warning {
  font-size: .8rem;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  padding: .5rem .75rem;
  margin: 0;
}
.fc-skip {
  font-size: .8rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}
.fc-skip a { color: var(--primary); }
.fc-pending {
  font-size: .8rem;
  color: var(--text-muted);
  margin: 0;
  font-style: italic;
}

/* ── Workflow bar ─────────────────────────────────────────────────────────── */
.wf-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg, #f8f9fa);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
  flex-shrink: 0;
}
.wf-btn:hover:not(:disabled) { background: var(--border); }
.wf-btn:disabled { opacity: .42; cursor: not-allowed; }
.wf-btn--running { border-color: var(--primary); color: var(--primary); background: rgba(99,102,241,.07); }
.wf-btn--done    { border-color: var(--success); color: var(--success); background: rgba(16,185,129,.07); }
.wf-btn--error   { border-color: var(--danger); color: var(--danger); background: rgba(239,68,68,.07); }
.wf-done-time  { font-size: .64rem; opacity: .6; margin-left: .15rem; }
.wf-error-txt  { font-size: .64rem; max-width: 88px; overflow: hidden; text-overflow: ellipsis; margin-left: .1rem; }
.wf-timer      { font-size: .68rem; font-variant-numeric: tabular-nums; opacity: .75; margin-left: .1rem; }

/* ── Topbar generate button ──────────────────────────────────────────────── */
.editor-topbar-actions .wf-btn {
  background: var(--primary, #6366f1);
  color: #fff;
  border-color: var(--primary, #6366f1);
  padding: .45rem .9rem;
  font-size: .82rem;
}
.editor-topbar-actions .wf-btn:hover:not(:disabled) {
  background: #4f46e5;
  border-color: #4f46e5;
}
.editor-topbar-actions .wf-btn.wf-btn--running {
  background: rgba(99,102,241,.12);
  color: var(--primary);
  border-color: var(--primary);
}
.editor-topbar-actions .wf-btn.wf-btn--done {
  background: rgba(16,185,129,.1);
  color: var(--success);
  border-color: var(--success);
}
.editor-topbar-actions .wf-btn.wf-btn--error {
  background: rgba(239,68,68,.1);
  color: var(--danger);
  border-color: var(--danger);
}

/* ── Sidebar wf-btn (Fact-Check) ─────────────────────────────────────────── */
.wf-btn-sidebar {
  width: 100%;
  justify-content: center;
}

/* ── Result containers: breathing room below action buttons ─────────────── */
#factcheck-result,
#readability-result {
  margin-top: .875rem;
}

/* ── Sidebar card header (SEO Analysis ↻ button) ─────────────────────────── */
.sidebar-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
}
.sidebar-card-header .sidebar-card-title {
  margin-bottom: 0;
}
.card-header-action {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: .85rem;
  line-height: 1;
  padding: .2rem .35rem;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.card-header-action:hover:not(:disabled) {
  background: var(--border);
  color: var(--text);
}
.card-header-action:disabled { opacity: .4; cursor: not-allowed; }
.card-header-action.sb-btn-loading { color: var(--primary); border-color: var(--primary); }
.card-header-action.sb-btn-success { color: #10b981; border-color: #10b981; }
.card-header-action.sb-btn-error   { color: #ef4444; border-color: #ef4444; }

.spinner-sm {
  width: 10px; height: 10px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}

/* ── Sidebar action button states ──────────────────────────────────────────── */
.sidebar-action-stack {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .75rem;
}

/* Success state — green tint */
.sb-btn-success {
  border-color: #10b981 !important;
  color: #10b981 !important;
  background: rgba(16,185,129,.06) !important;
}
.sb-btn-success .btn-ts {
  font-size: .62rem;
  opacity: .65;
  margin-left: .25rem;
  font-weight: 400;
}

/* Error state — red tint */
.sb-btn-error {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
  background: rgba(239,68,68,.06) !important;
}
.btn-retry-tip {
  font-size: .62rem;
  margin-left: .25rem;
  opacity: .8;
  cursor: pointer;
}

/* Loading state */
.sb-btn-loading {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: rgba(99,102,241,.05) !important;
  cursor: wait !important;
}
.btn-timer {
  font-size: .65rem;
  font-variant-numeric: tabular-nums;
  opacity: .7;
  margin-left: .15rem;
}

/* Tags hint inline */
.form-hint-sm-inline {
  font-size: .68rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 400;
  margin-left: .35rem;
}

/* ── Readability panel (Bug 2) ─────────────────────────────────────────────── */
.rd-stats {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  font-size: .78rem;
  margin-bottom: .6rem;
  padding: .5rem .6rem;
  background: rgba(16,185,129,.07);
  border-radius: 6px;
  border: 1px solid rgba(16,185,129,.2);
}
.rd-stat  { color: var(--text-secondary); }
.rd-stat strong { color: var(--text-primary); }
.rd-arrow { opacity: .5; }
.rd-delta { font-weight: 600; font-size: .75rem; }
.rd-changes {
  margin: .4rem 0 0 0;
  padding-left: 1.1rem;
  font-size: .76rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.rd-changes li { margin-bottom: .2rem; }
.rd-revert-btn {
  margin-top: .6rem;
  font-size: .73rem;
  color: var(--text-secondary);
  border-color: var(--border);
}

/* ── TOC (Tabela de Conteúdos) — injetada server-side em artigos gerados ── */
.cf-toc {
  background: #f7f7f7;
  border-left: 4px solid #d4af37;
  padding: 16px 20px;
  margin: 24px 0;
  border-radius: 4px;
}
.cf-toc-title {
  font-size: 1rem;
  margin: 0 0 8px;
  font-weight: 600;
  border: none;
  padding: 0;
}
.cf-toc-list {
  margin: 0;
  padding-left: 20px;
}
.cf-toc-list li {
  margin: 4px 0;
}
.cf-toc-list a {
  color: inherit;
  text-decoration: none;
}
.cf-toc-list a:hover {
  text-decoration: underline;
}
.cf-toc-sub {
  padding-left: 16px;
  font-size: 0.95em;
  opacity: 0.85;
}