/* ── BrandEngine Dashboard ───────────────────────────────────────── */

/* ── Variables ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* ── PRODUCTION DESIGN SYSTEM — DO NOT CHANGE WITHOUT EXPLICIT APPROVAL ──
     These values are canonical. They match the live staging environment.
     Feature work must not alter them. Branding changes require a dedicated
     tracking task and explicit sign-off.
     Last verified against staging: 2026-03-26
  ── ────────────────────────────────────────────────────────────────────── */
  --bg:         #0d1117;
  --surface:    #161b22;
  --surface-2:  #1c2128;
  --surface-3:  #22272e;
  --border:     #21262d;
  --border-2:   #30363d;
  --text:       #e6edf3;
  --text-muted: #8b949e;
  --text-dim:   #484f58;
  --blue:       #4f8ef7;  /* primary interactive accent */
  --blue-dim:   #0d2045;  /* active/highlighted backgrounds */
  --green:      #3fb950;
  --green-dim:  #0f2419;
  --red:        #f85149;
  --red-dim:    #2d0f0e;
  --amber:      #d29922;
  --amber-dim:  #2d2208;
  --purple:     #a371f7;
  --purple-dim: #1e1232;
  /* ── END PROTECTED BLOCK ─────────────────────────────────────────────── */
  --sidebar-w:  200px;
  --radius:     8px;
  --radius-lg:  12px;
  --shadow:     0 4px 24px rgba(0,0,0,.5);
}
html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 14px; line-height: 1.5; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, textarea, select { font-family: inherit; }

/* ── Root layout ─────────────────────────────────────────────────── */
.layout { display: flex; height: 100vh; overflow: hidden; }
.main   { flex: 1; display: flex; flex-direction: column; overflow-y: auto; min-width: 0; }

/* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow-y: auto;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; font-weight: 700; font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.sidebar-brand-link {
  display: flex; align-items: center; gap: 8px;
  flex: 1; text-decoration: none; color: inherit;
}
.sidebar-brand-link:hover { opacity: .8; }
.brand-icon { font-size: 16px; }
.sidebar-brand-name { flex: 1; }
.switch-client-btn {
  flex-shrink: 0;
  font-size: 15px; line-height: 1;
  padding: 3px 6px; border-radius: 6px;
  color: var(--text-dim); text-decoration: none;
  transition: color .15s, background .15s;
}
.switch-client-btn:hover {
  color: var(--text); background: var(--surface-3);
  text-decoration: none;
}
.sidebar-section-label {
  padding: 12px 12px 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim);
}
.client-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 6px; }
.client-item {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 8px; border-radius: var(--radius);
  color: var(--text-muted); transition: all .15s; text-decoration: none;
}
.client-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.client-item.active { background: var(--blue-dim); color: var(--text); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot-green { background: var(--green); } .dot-amber { background: var(--amber); }
.client-meta { flex: 1; min-width: 0; }
.client-name { display: block; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-industry { display: block; font-size: 10px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel-pills { display: flex; gap: 3px; flex-shrink: 0; }
.ch-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; }
.ch-icon svg { width: 10px; height: 10px; }
.ch-icon-facebook  { background: #1877F2; }
.ch-icon-instagram { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.sidebar-bottom { margin-top: auto; border-top: 1px solid var(--border); padding: 8px 6px; display: flex; flex-direction: column; gap: 2px; }
.sidebar-link {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: var(--radius);
  color: var(--text-muted); font-size: 12px; font-weight: 500; text-decoration: none;
  transition: all .15s; cursor: pointer; background: none; border: none; width: 100%; text-align: left;
}
.sidebar-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.sidebar-link-icon { font-size: 14px; flex-shrink: 0; }

/* ── Top bar ─────────────────────────────────────────────────────── */
.page-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 20px; border-bottom: 1px solid var(--border);
  flex-shrink: 0; background: var(--surface);
}
.header-left { display: flex; align-items: center; gap: 10px; }
.page-title  { font-size: 15px; font-weight: 700; letter-spacing: -.3px; }
.page-subtitle { font-size: 11px; color: var(--text-muted); }
.header-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }

/* ── Stats row ───────────────────────────────────────────────────── */
.stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.stat-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-right: 1px solid var(--border);
}
.stat-card:last-child { border-right: none; }
.stat-icon-wrap {
  width: 40px; height: 40px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 18px;
}
.stat-icon-blue   { background: rgba(79,142,247,.15); }
.stat-icon-green  { background: rgba(63,185,80,.15); }
.stat-icon-red    { background: rgba(248,81,73,.15); }
.stat-icon-purple { background: rgba(163,113,247,.15); }
.stat-body { min-width: 0; }
.stat-value { font-size: 22px; font-weight: 700; letter-spacing: -.5px; line-height: 1; }
.stat-label { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.stat-value.loading { color: var(--text-dim); }

/* ── Workspace ───────────────────────────────────────────────────── */
.workspace {
  flex: 1; display: grid;
  grid-template-columns: minmax(240px, 26%) 1fr;
  overflow: hidden;
}

/* ── Left: Workflow panel ────────────────────────────────────────── */
.workflow-panel {
  overflow-y: auto; border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.panel-header-title { font-size: 13px; font-weight: 700; letter-spacing: -.1px; }
.panel-steps-badge {
  font-size: 10px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border-2);
  padding: 2px 7px; border-radius: 20px;
}

/* ── Workflow horizontal tab stepper ─────────────────────────────── */
.wf-tab-bar {
  display: flex; border-bottom: 1px solid var(--border);
  flex-shrink: 0; padding: 0 2px; gap: 0;
  overflow-x: auto; scrollbar-width: none;
}
.wf-tab-bar::-webkit-scrollbar { display: none; }
.wf-tab {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  flex: 1; padding: 8px 4px; background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--text-muted); font-size: 11px; font-weight: 500;
  cursor: pointer; transition: all .15s; white-space: nowrap;
  flex-shrink: 0;
}
.wf-tab:hover { color: var(--text); }
.wf-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.wf-tab-ready  { color: var(--green); }
.wf-tab-ready.active { color: var(--green); border-bottom-color: var(--green); }

.wf-tab-num {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; transition: all .2s;
  background: var(--surface-3); border: 1px solid var(--border-2); color: var(--text-dim);
}
.wf-tab.active  .wf-tab-num { background: var(--blue);  border-color: var(--blue);  color: #fff; }
.wf-tab-ready   .wf-tab-num { background: var(--green); border-color: var(--green); color: #fff; }
.wf-tab-num.active            { background: var(--blue);  border-color: var(--blue);  color: #fff; }
.wf-tab-num.done              { background: var(--green); border-color: var(--green); color: #fff; }

.wf-tab-label { font-size: 11px; }
.wf-tab-badge {
  font-size: 10px; font-weight: 600; color: var(--text-dim);
  background: var(--surface-3); border: 1px solid var(--border);
  padding: 1px 4px; border-radius: 10px;
}
.wf-tab.active .wf-tab-badge  { color: var(--blue);  border-color: var(--blue-dim);  }
.wf-tab-ready  .wf-tab-badge  { color: var(--green); border-color: var(--green-dim); }

/* Workflow panels — only active shown */
.wf-panels { flex: 1; overflow-y: auto; }
.wf-panel  { display: none; padding: 12px; }
.wf-panel.active { display: block; }

/* Panel helper counts */
.wf-panel-hint   { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.wf-count-text   { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.wf-count-text .n      { font-weight: 700; color: var(--text-dim); }
.wf-count-text .n.hi   { color: var(--blue); }

/* Full-width action buttons inside step */
.btn-step {
  width: 100%; padding: 9px; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: none; transition: all .15s; display: flex;
  align-items: center; justify-content: center; gap: 6px;
}
.btn-step-primary { background: var(--blue);   color: #fff; }
.btn-step-primary:hover:not(:disabled) { filter: brightness(1.1); }
.btn-step-green   { background: var(--green);  color: #fff; }
.btn-step-green:hover:not(:disabled) { filter: brightness(1.1); }
.btn-step:disabled { opacity: .45; cursor: not-allowed; }
.btn-step-outline {
  background: none; border: 1px solid var(--border-2); color: var(--text-muted);
}
.btn-step-outline:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }

/* Tabs inside step */
.step-tab-bar { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.step-tab-btn {
  padding: 5px 12px; background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--text-muted); font-size: 12px; font-weight: 500; cursor: pointer;
  transition: all .15s;
}
.step-tab-btn:hover  { color: var(--text); }
.step-tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); }
.step-tab-panel { display: none; }
.step-tab-panel.active { display: block; }

.textarea {
  width: 100%; padding: 9px 11px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-size: 13px;
  resize: vertical; min-height: 90px; outline: none; transition: border-color .15s; line-height: 1.6;
}
.textarea:focus { border-color: var(--blue); }
.textarea::placeholder { color: var(--text-dim); }
.input {
  width: 100%; padding: 7px 10px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-size: 13px;
  outline: none; transition: border-color .15s;
}
.input:focus { border-color: var(--blue); }
.input::placeholder { color: var(--text-dim); }
.input:disabled { opacity: .4; cursor: not-allowed; }

.dropzone {
  border: 2px dashed var(--border-2); border-radius: var(--radius);
  padding: 20px 14px; text-align: center; cursor: pointer; transition: all .2s;
}
.dropzone:hover, .dropzone.drag-over { border-color: var(--blue); background: var(--blue-dim); }
.dropzone-icon  { font-size: 20px; margin-bottom: 6px; }
.dropzone-label { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.dropzone-sub   { font-size: 11px; color: var(--text-muted); }
.upload-status { padding: 7px 10px; border-radius: var(--radius); font-size: 12px; margin-top: 8px; }
.upload-status.hidden  { display: none; }
.upload-status.success { background: var(--green-dim); color: var(--green); }
.upload-status.error   { background: var(--red-dim);   color: var(--red); }
.file-list { margin-top: 10px; }
.file-list-header { font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }
.file-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 3px; font-size: 11px; }
.file-icon { font-size: 11px; flex-shrink: 0; }
.file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { font-size: 10px; color: var(--text-dim); flex-shrink: 0; }
.url-row { display: flex; gap: 6px; }
.coming-soon-note { font-size: 11px; color: var(--text-dim); margin-top: 5px; }

/* Step action row */
.wf-action-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.wf-count-text { font-size: 12px; color: var(--text-muted); }
.wf-count-text .n    { font-weight: 700; color: var(--text); }
.wf-count-text .n.hi { color: var(--blue); }

/* Publish step — channel selector block */
.pub-channel-block {
  padding: 14px 16px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border-2);
  margin-bottom: 14px;
}
.pub-channel-block-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); margin-bottom: 10px;
}
.pub-channels { display: flex; gap: 16px; flex-wrap: wrap; }
.channel-check { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; cursor: pointer; user-select: none; }
.channel-check input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--blue); cursor: pointer; }
.ch-badge { width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ch-badge svg { width: 12px; height: 12px; }
.ch-fb-bg { background: #1877F2; }
.ch-ig-bg { background: linear-gradient(135deg,#f09433,#dc2743,#bc1888); }

/* Per-draft channel pills on draft cards */
.dc-ch-pills {
  display: flex; gap: 6px; padding: 8px 14px 4px;
  border-top: 1px solid var(--border);
}
.dc-ch-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 20px; border: 1.5px solid var(--border-2);
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background .12s, border-color .12s, opacity .12s;
  background: var(--surface-3); color: var(--text-muted);
}
.dc-ch-pill svg { width: 10px; height: 10px; }
.dc-ch-pill.dc-ch-on  { background: var(--blue-dim); border-color: var(--blue); color: var(--text); }
.dc-ch-pill[data-ch="linkedin"].dc-ch-on { background: rgba(10,102,194,.15); border-color: rgba(10,102,194,.5); color: #0a66c2; }
.dc-ch-pill.dc-ch-off { opacity: .45; }
.dc-ch-mark { font-size: 9px; }
.pub-ready { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.pub-ready .n    { font-weight: 700; color: var(--text); font-size: 14px; }
.pub-ready .n.hi { color: var(--green); }

/* ── Right column ────────────────────────────────────────────────── */
.right-col { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 12px; }

/* ── Shared tile card ────────────────────────────────────────────── */
.tile {
  border: 1px solid var(--border-2); border-radius: var(--radius-lg);
  background: var(--surface); display: flex; flex-direction: column; flex-shrink: 0;
}
.tile-heading {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 700; gap: 10px; flex-shrink: 0;
}

/* ── #drafts-tile ────────────────────────────────────────────────── */
#drafts-tile.hidden { display: none !important; }

/* ── #history-tile: scrollable table area ────────────────────────── */
#history-tile .history-section { max-height: 400px; overflow-y: auto; }

/* ── Legacy .drafts-panel class (kept for sub-elements) ─────────── */
.drafts-panel { display: flex; flex-direction: column; }
.drafts-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 10px;
}
.drafts-panel-title { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.drafts-count-badge {
  font-size: 11px; font-weight: 600; padding: 1px 7px;
  background: var(--blue-dim); color: var(--blue);
  border: 1px solid rgba(79,142,247,.3); border-radius: 20px;
}

/* Platform filter tabs */
.platform-tabs {
  display: flex; gap: 0;
  padding: 0 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.platform-tab {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 12px; background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-size: 12px; font-weight: 500; color: var(--text-muted);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.platform-tab svg { width: 11px; height: 11px; flex-shrink: 0; }
.platform-tab .ptab-count {
  font-size: 10px; font-weight: 700; padding: 0px 5px;
  border-radius: 10px; background: var(--surface-2); color: var(--text-dim);
}
.platform-tab:hover { color: var(--text); }
.platform-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.platform-tab.active .ptab-count { background: var(--blue-dim); color: var(--blue); }

/* Draft cards list */
.drafts-list { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }

/* Draft card */
.draft-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: opacity .25s, transform .25s, border-color .15s;
}
.draft-card:hover { border-color: var(--border-2); }
.dc-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 8px; gap: 8px;
}
.dc-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; }
.platform-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600; line-height: 1.5;
}
.platform-badge svg { width: 9px; height: 9px; flex-shrink: 0; }
.pb-facebook  { background: rgba(24,119,242,.18); color: #4f8ef7; }
.pb-instagram { background: rgba(220,39,67,.15);  color: #e1306c; }
.pb-both      { background: rgba(163,113,247,.15); color: var(--purple); }
.type-badge {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  font-size: 10px; font-weight: 600; background: var(--surface-3);
  color: var(--text-muted); border: 1px solid var(--border-2);
}
.dc-meta-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.dc-time { font-size: 10px; color: var(--text-dim); }
.dc-num  { font-size: 10px; font-weight: 600; color: var(--text-dim); }
.tag-deadline { color: var(--amber); background: var(--amber-dim); border-color: var(--amber-dim); }
.tag-lang { color: #7c3aed; background: rgba(124,58,237,.12); border-color: rgba(124,58,237,.25); }

/* Language mode selector in Generate panel */
.lang-plan-bar {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.lang-plan-label { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.lang-mode-btn {
  font-size: 11px; padding: 3px 9px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface2);
  color: var(--text-dim); cursor: pointer; transition: all .15s;
}
.lang-mode-btn:hover { border-color: var(--blue); color: var(--blue); }
.lang-mode-btn.active {
  background: var(--blue); border-color: var(--blue);
  color: #fff; font-weight: 600;
}

/* Post type selector */
.post-type-row {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 0 0;
}
.post-type-label { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.post-type-btn {
  font-size: 11px; padding: 3px 10px; border-radius: 12px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); cursor: pointer; transition: all .15s;
}
.post-type-btn:hover { border-color: var(--blue); color: var(--blue); }
.post-type-btn.active {
  background: var(--blue); border-color: var(--blue);
  color: #fff; font-weight: 600;
}

/* Carousel slide thumbnails strip */
.dc-carousel-strip {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 8px 12px; scrollbar-width: thin;
  border-top: 1px solid var(--border);
}
.dc-carousel-thumb-link {
  position: relative; flex-shrink: 0; display: block;
  border-radius: 6px; overflow: hidden;
  border: 2px solid transparent;
  transition: border-color .15s;
}
.dc-carousel-thumb-link:hover { border-color: var(--blue); }
.dc-carousel-thumb {
  width: 80px; height: 80px; object-fit: cover;
  display: block;
}
.dc-carousel-num {
  position: absolute; bottom: 3px; right: 5px;
  font-size: 10px; font-weight: 700;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* Carousel info block in Draft tab */
.dc-carousel-info { padding: 10px 2px; }
.dc-carousel-info-row {
  font-size: 12px; color: var(--text-muted);
  padding: 3px 0; line-height: 1.4;
}
.dc-carousel-info-row strong { color: var(--text); }
.dc-carousel-divider {
  border: none; border-top: 1px solid var(--border);
  margin: 10px 0;
}

/* Draft/Preview/Edit content tabs */
.dc-content-tabs {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border); padding: 0 12px;
}
.dc-tab-bar { display: flex; }
.dc-tab {
  padding: 6px 10px; background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-size: 11px; font-weight: 500; color: var(--text-muted);
  cursor: pointer; transition: all .15s;
}
.dc-tab:hover  { color: var(--text); }
.dc-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.dc-tab-icons  { display: flex; gap: 2px; }
.dc-tab-icon   { background: none; border: none; padding: 4px; cursor: pointer; color: var(--text-dim); border-radius: 4px; font-size: 12px; line-height: 1; }
.dc-tab-icon:hover { color: var(--text); background: var(--surface-3); }

/* Variation pills */
.var-pills { display: flex; gap: 3px; margin-bottom: 8px; }
.var-pill {
  padding: 2px 9px; border-radius: 4px;
  background: var(--surface-3); border: 1px solid var(--border-2);
  font-size: 11px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all .15s;
}
.var-pill.active  { background: var(--blue-dim); border-color: var(--blue); color: var(--blue); }
.var-pill.var-fail { color: var(--red); border-color: var(--red-dim); }
.best-marker { color: var(--amber); }
.fail-marker { color: var(--red); }

/* Tab panels */
.dc-content-panel { display: none; padding: 10px 12px; }
.dc-content-panel.active { display: block; }
.dc-draft-text {
  font-size: 13px; line-height: 1.7; color: var(--text);
  white-space: pre-wrap;
}
.compliance-alert {
  margin-top: 8px; padding: 6px 10px;
  background: var(--amber-dim); border: 1px solid var(--amber);
  border-radius: 6px; font-size: 11px; color: var(--amber);
}

/* ── Script / Hashtag validation alerts ── */
.script-alert {
  margin-top: 7px; padding: 7px 10px;
  border-radius: 6px; font-size: 11px; line-height: 1.5;
}
.script-alert-error {
  background: var(--red-dim, rgba(248,81,73,.1));
  border: 1px solid var(--red);
  color: var(--red);
}
.script-alert-warning {
  background: var(--amber-dim);
  border: 1px solid var(--amber);
  color: var(--amber);
}
.script-alert-hashtag {
  background: var(--blue-dim);
  border: 1px solid var(--blue);
  color: var(--blue);
}
.script-alert-date {
  background: rgba(234,179,8,.12);
  border: 1px solid #ca8a04;
  color: #ca8a04;
}
.script-alert-list {
  margin: 4px 0 0 16px; padding: 0;
}
.script-alert-list li { margin-bottom: 2px; }
.script-alert code {
  font-family: monospace; font-size: 10px;
  background: rgba(255,255,255,.08); padding: 1px 4px; border-radius: 3px;
}
.dc-preview-frame {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; font-size: 13px; color: var(--text);
  line-height: 1.7; white-space: pre-wrap;
}
.preview-platform-label { font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.dc-edit-area {
  width: 100%; padding: 9px 11px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-size: 13px; resize: vertical; min-height: 100px;
  outline: none; transition: border-color .15s; line-height: 1.6;
}
.dc-edit-area:focus { border-color: var(--blue); }

/* Approve / Reject buttons */
.dc-action-row {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border);
}
.btn-approve-full, .btn-reject-full {
  padding: 10px; border: none; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center; gap: 5px;
}
.btn-approve-full { background: var(--green-dim); color: var(--green); }
.btn-approve-full:hover:not(:disabled) { background: var(--green); color: #fff; }
.btn-reject-full  { background: var(--red-dim);   color: var(--red); }
.btn-reject-full:hover:not(:disabled)  { background: var(--red);   color: #fff; }
.btn-approve-full:disabled, .btn-reject-full:disabled { opacity: .45; cursor: not-allowed; }
.dc-start-over { text-align: center; padding: 6px 10px 8px; }

/* Escape hatch links (start over / change my mind) */
.escape-link {
  font-size: 12px; color: var(--text-muted, #888); text-decoration: none;
  opacity: .75; transition: opacity .15s;
}
.escape-link:hover { opacity: 1; color: var(--text, #555); text-decoration: underline; }
.escape-row { text-align: center; margin-top: 10px; }

/* ── Review Drafts V2 — two-column layout ───────────────────────── */
.draft-card-v2 { overflow: visible; }

/* ── Best-pick UI ────────────────────────────────────────────────────────── */
.rdv-best-pick {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  background: color-mix(in srgb, #c9a84c 8%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, #c9a84c 20%, var(--border));
  flex-wrap: wrap; gap: 6px;
}
.rdv-best-pick-label {
  font-size: 13px; font-weight: 600;
  color: #c9a84c; letter-spacing: 0.01em;
}
.rdv-other-toggle {
  background: none; border: none; padding: 4px 8px;
  font-size: 12px; color: var(--text-muted); cursor: pointer;
  border-radius: 4px; transition: color .15s, background .15s;
}
.rdv-other-toggle:hover { color: var(--blue); background: var(--blue-dim); }
.rdv-other-options {
  max-height: 0; overflow: hidden;
  transition: max-height 0.25s ease;
  border-bottom: 1px solid transparent;
}
.rdv-other-options.open {
  max-height: 400px;
  border-bottom-color: var(--border);
}
.rdv-other-option-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; gap: 10px;
  border-top: 1px solid var(--border);
}
.rdv-other-label {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  white-space: nowrap;
}
.rdv-other-fail { color: var(--red); }
.rdv-use-this-btn {
  padding: 5px 12px; font-size: 12px; font-weight: 600;
  background: var(--blue-dim); color: var(--blue);
  border: 1px solid var(--blue); border-radius: 5px;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.rdv-use-this-btn:hover { background: var(--blue); color: #fff; }
.ai-rec-badge {
  background: var(--amber-dim); color: var(--amber);
  border: 1px solid var(--amber); border-radius: 10px;
  font-size: 10px; font-weight: 600;
  padding: 1px 7px; margin-left: 6px; white-space: nowrap;
}
.rdv-back-to-best {
  background: var(--amber-dim); border: 1px solid var(--amber);
  color: var(--amber); border-radius: 5px;
  padding: 5px 10px; font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.rdv-back-to-best:hover { background: var(--amber); color: #fff; }
/* ─────────────────────────────────────────────────────────────────────────── */

/* Two-column body */
.rdv-body { display: flex; min-height: 360px; }

/* Left column */
.rdv-left {
  width: 290px; flex-shrink: 0;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 12px; gap: 10px;
}
.rdv-image-wrap {
  width: 100%; flex-shrink: 0;
  background: var(--surface-3); border-radius: 8px; overflow: hidden;
}
.rdv-image {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: 8px;
}
.rdv-fullsize {
  display: block; font-size: 11px; color: var(--text-muted);
  text-align: center; margin-top: 6px; text-decoration: none;
}
.rdv-fullsize:hover { color: var(--blue); text-decoration: underline; }
.rdv-ch-pills {
  display: flex; flex-wrap: wrap; gap: 5px;
  border-top: none; padding: 0;
}
.rdv-schedule-wrap {
  font-size: 12px; color: var(--text-muted); padding-top: 8px;
  border-top: 1px solid var(--border);
}
.rdv-sched-text { cursor: pointer; }
.rdv-sched-text:hover { color: var(--text); }

/* Right column */
.rdv-right {
  flex: 1; display: flex; flex-direction: column;
  padding: 14px; gap: 10px; min-width: 0;
}
.rdv-caption-text { line-height: 1.8; font-size: 13px; }

/* Action bar — sits at bottom of right column */
.rdv-action-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  margin-top: auto; flex-wrap: wrap;
}
.rdv-action-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rdv-action-centre { flex: 1; text-align: center; min-width: 80px; }
.rdv-action-right { white-space: nowrap; }
.rdv-action-right .escape-link { font-size: 11px; color: var(--text-dim); }
.rdv-viewing { font-size: 11px; color: var(--text-dim); }
.rdv-approve-btn { border-radius: 6px !important; padding: 10px 24px !important; width: auto !important; font-size: 14px !important; }

/* Approved card */
.draft-card.approved-card { border-left: 3px solid var(--green); }
.approved-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 600;
  background: var(--green-dim); color: var(--green);
}
.approved-time { font-size: 11px; color: var(--text-muted); }
.btn-unapprove-full {
  flex: 1; padding: 10px; border: none; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s;
  background: var(--amber-dim); color: var(--amber);
}
.btn-unapprove-full:hover { background: var(--amber); color: #fff; }

/* Approved tab count pill */
.ptab-count-green { background: var(--green-dim) !important; color: var(--green) !important; }
.platform-tab[data-filter="approved"].active { color: var(--green); border-bottom-color: var(--green); }
.platform-tab[data-filter="approved"].active .ptab-count { background: var(--green-dim); color: var(--green); }

/* Schedule row */
.dc-schedule-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 12px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-dim);
}
.var-select {
  padding: 3px 7px; background: var(--surface-3);
  border: 1px solid var(--border-2); border-radius: 5px;
  color: var(--text); font-size: 11px; cursor: pointer; outline: none;
}

/* Drafts empty */
.drafts-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 60px 0; text-align: center; color: var(--text-muted);
}
.drafts-empty-icon { font-size: 28px; margin-bottom: 10px; }
.drafts-empty p    { font-size: 13px; }
.drafts-empty .sub { font-size: 12px; margin-top: 3px; color: var(--text-dim); }

/* ── Post History (in drafts panel, below cards) ─────────────────── */
.history-section {
  padding: 16px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.history-heading {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; gap: 8px;
}
.history-title {
  font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px;
}
.history-count {
  font-size: 10px; font-weight: 600; padding: 1px 7px;
  background: var(--surface-3); border: 1px solid var(--border-2);
  color: var(--text-muted); border-radius: 20px;
}
.history-actions { display: flex; align-items: center; gap: 8px; }
.history-table-wrap { overflow-x: auto; }
.history-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.history-table th {
  text-align: left; padding: 5px 10px;
  font-size: 10px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--border);
}
.history-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.history-table tr:last-child td { border-bottom: none; }
.history-table tr:hover td { background: rgba(255,255,255,.02); }
.h-preview { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); font-size: 12px; }
.h-channel { display: flex; flex-wrap: wrap; gap: 3px; }
.h-reach, .h-likes { font-weight: 600; font-size: 12px; }
.h-reach.loading, .h-likes.loading { color: var(--text-dim); }
.ins-spin {
  color: var(--text-dim);
  font-size: 13px;
  display: inline-block;
  animation: ins-pulse 1.4s ease-in-out infinite;
}
@keyframes ins-pulse {
  0%, 100% { opacity: 0.2; }
  50%       { opacity: 0.8; }
}
.post-id-mono { font-family: 'SF Mono','Fira Code',ui-monospace,monospace; font-size: 11px; color: var(--text-muted); }
.h-time  { font-size: 11px; color: var(--text-dim); white-space: nowrap; }

/* ── Badges (shared) ─────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 20px; font-size: 11px; font-weight: 600; line-height: 1.5;
}
.badge svg       { width: 9px; height: 9px; flex-shrink: 0; }
.badge-facebook  { background: rgba(24,119,242,.15); color: #4f8ef7; border: 1px solid rgba(79,142,247,.25); }
.badge-instagram { background: rgba(225,48,108,.12); color: #e1306c; border: 1px solid rgba(225,48,108,.25); }
.badge-linkedin  { background: rgba(10,102,194,.12);  color: #0a66c2; border: 1px solid rgba(10,102,194,.25); }
.badge-status-active   { background: var(--green-dim); color: var(--green); }
.badge-status-inactive { background: var(--amber-dim); color: var(--amber); }
.badge-test  { background: rgba(255,165,0,.15); color: #d97706; border: 1px solid rgba(217,119,6,.3); letter-spacing: .04em; }
.row-test td { opacity: .8; }
.row-test    { border-left: 3px solid #d97706; }

/* ── Channel status chips ─────────────────────────────────────────── */
.chstat-row {
  display: flex;
  align-items: center;
  gap: 3px;
}
.chstat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s, background .15s, opacity .15s;
}
.chstat:hover { border-color: var(--border-2); opacity: .85; }
.chstat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px; height: 13px;
  flex-shrink: 0;
}
.chstat-icon svg { width: 13px; height: 13px; }
.chstat-name { font-size: 11px; line-height: 1; }
.chstat-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chstat-label { font-size: 10px; font-weight: 700; }
.chstat-divider {
  width: 1px; height: 16px;
  background: var(--border-2);
  margin: 0 4px;
  flex-shrink: 0;
}

/* connected — highlighted with green tint, platform-coloured icon */
.chstat-connected {
  background: rgba(63,185,80,.10);
  border-color: rgba(63,185,80,.35);
  color: var(--text);
}
.chstat-connected .chstat-dot { background: var(--green); box-shadow: 0 0 0 2px rgba(63,185,80,.2); }
.chstat-connected .chstat-icon-facebook svg  { fill: #4f8ef7; }
.chstat-connected .chstat-icon-instagram svg { fill: #e1306c; }
.chstat-connected .chstat-icon-linkedin  svg { fill: #0a66c2; }
.chstat-connected .chstat-icon-youtube   svg { fill: #ff0000; }
/* Google has multicolour paths — leave as-is */

/* pending — amber tint, amber dot */
.chstat-pending {
  background: var(--amber-dim);
  border-color: rgba(210,153,34,.25);
  color: var(--amber);
}
.chstat-pending .chstat-dot  { background: var(--amber); }
.chstat-pending .chstat-label { color: var(--amber); }
.chstat-pending .chstat-icon  { filter: sepia(1) saturate(3) hue-rotate(10deg) opacity(.8); }

/* disconnected — muted, grey dot */
.chstat-disconnected {
  background: transparent;
  border-color: var(--border);
  color: var(--text-dim);
  opacity: .45;
}
.chstat-disconnected .chstat-dot  { background: var(--text-dim); }
.chstat-disconnected .chstat-icon { filter: grayscale(1) opacity(.5); }

/* ── Buttons (general) ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 14px; border-radius: var(--radius);
  font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: all .15s;
  text-decoration: none; white-space: nowrap; line-height: 1;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--blue);  color: #fff; border-color: var(--blue); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.btn-outline { background: transparent; color: var(--text-muted); border-color: var(--border-2); }
.btn-outline:hover:not(:disabled) { color: var(--text); border-color: var(--text-muted); }
.btn-green  { background: var(--green); color: #fff; border-color: var(--green); }
.btn-green:hover:not(:disabled) { filter: brightness(1.1); }
.btn-sm  { padding: 5px 10px; font-size: 11px; }
.btn-xs  { padding: 3px 7px;  font-size: 10px; }
.btn-link {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 7px; border-radius: 5px;
  font-size: 11px; font-weight: 500; color: var(--text-muted);
  border: 1px solid var(--border); transition: all .15s; text-decoration: none;
}
.btn-link:hover { text-decoration: none; }
.btn-link-fb:hover { border-color: #4f8ef7; color: #4f8ef7; }
.btn-link-ig:hover { border-color: #e1306c; color: #e1306c; }

/* ── Rejected section ────────────────────────────────────────────── */
.rejected-section { padding: 0 16px 16px; }
.rejected-heading { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--red); margin-bottom: 8px; }
.rejected-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; }
.rejected-info  { flex: 1; }
.rejected-label { font-size: 12px; font-weight: 500; }
.rejected-error { font-size: 11px; color: var(--red); margin-top: 2px; }
.rejected-actions { display: flex; gap: 6px; align-items: center; }
.btn-outline-danger { color: var(--red); border-color: var(--red); background: transparent; }
.btn-outline-danger:hover { background: rgba(239,68,68,.08); }
.btn-icon { padding: 3px 7px; line-height: 1; }

/* ── Utils ───────────────────────────────────────────────────────── */
.text-muted { color: var(--text-muted); }
.mt-8 { margin-top: 8px; } .mt-6 { margin-top: 6px; }
.hidden { display: none !important; }
.empty-block { padding: 32px 0; text-align: center; }
.empty-block p { font-size: 12px; color: var(--text-muted); }

/* ── Toast ───────────────────────────────────────────────────────── */
#toast-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; }
.toast { padding: 10px 14px; border-radius: var(--radius); font-size: 13px; font-weight: 500; max-width: 340px; box-shadow: var(--shadow); animation: slide-in .2s ease; display: flex; align-items: flex-start; gap: 8px; }
.toast-success { background: var(--green-dim); color: var(--green); border: 1px solid var(--green); }
.toast-error   { background: var(--red-dim);   color: var(--red);   border: 1px solid var(--red); }
.toast-info    { background: var(--surface);   color: var(--text);  border: 1px solid var(--border-2); }
@keyframes slide-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── Channel status — token health alert badge ───────────────────── */
.chstat-health-alert {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  background: var(--red-dim);
  color: var(--red);
  border: 1px solid rgba(248,81,73,.3);
  white-space: nowrap;
  transition: opacity .15s;
}
.chstat-health-alert:hover { opacity: .8; }
.chstat-health-alert.hidden { display: none; }

/* ── Token Health Drawer ─────────────────────────────────────────── */
.token-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 910;
  opacity: 0; pointer-events: none;
  transition: opacity .22s;
}
.token-drawer-backdrop.open { opacity: 1; pointer-events: all; }

.token-drawer {
  position: fixed;
  bottom: 0; right: 0;
  width: 460px;
  max-width: 100vw;
  max-height: 60vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  z-index: 920;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 -4px 24px rgba(0,0,0,.22);
}
.token-drawer.open { transform: translateY(0); }

.token-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}
.token-drawer-close {
  background: none; border: none;
  color: var(--text-muted); cursor: pointer;
  font-size: 16px; padding: 2px 6px;
  border-radius: var(--radius);
  transition: background .15s, color .15s;
  line-height: 1;
}
.token-drawer-close:hover { background: var(--surface-3); color: var(--text); }

.token-health-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: none; border: none;
  cursor: pointer; padding: 0;
  text-align: left;
}
.token-health-title:hover { opacity: .75; }
.token-health-actions { display: flex; gap: 8px; align-items: center; }
.token-health-body { padding: 12px 16px; overflow-y: auto; }
.token-loading { color: var(--text-muted); font-size: 13px; padding: 8px 0; }
.token-client-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.token-client-row:last-child { border-bottom: none; }
.token-status-icon { font-size: 16px; flex-shrink: 0; }
.token-client-name { font-size: 13px; font-weight: 600; color: var(--text); min-width: 160px; }
.token-expiry { font-size: 12px; color: var(--text-muted); }
.token-expiry.expiry-warn { color: var(--amber); }
.token-expiry.expiry-ok   { color: var(--green); }
.token-checks { display: flex; gap: 6px; flex-wrap: wrap; }
.token-check-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-muted);
}
.token-check-pill.ok  { background: var(--green-dim); color: var(--green); }
.token-check-pill.fail { background: var(--red-dim);  color: var(--red); }
.token-check-pill.warn { background: var(--amber-dim); color: var(--amber); }
.token-errors { font-size: 11px; color: var(--red); margin-top: 4px; width: 100%; }
.token-row-actions { margin-left: auto; display: flex; gap: 6px; }
.token-last-checked { font-size: 11px; color: var(--text-dim); }
.token-alert-badge {
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
}
.token-alert-badge.hidden { display: none; }

/* ── Google channel badge ────────────────────────────────────────── */
.ch-google-bg { background: #fff; border: 1px solid var(--border-2); }
.badge-google  { background: rgba(66,133,244,.15); color: #4285f4; border: 1px solid rgba(66,133,244,.3); }
.insights-pending { color: var(--amber); font-size: 10px; font-weight: 600; }
.btn-link-google { color: #34a853; border-color: rgba(52,168,83,.3); }
.btn-link-google:hover { background: rgba(52,168,83,.1); }
.ch-setup-hint { font-size: 9px; color: var(--amber); vertical-align: middle; }
.badge-link { text-decoration: none; cursor: pointer; transition: opacity .15s, transform .1s; display: inline-flex; }
.badge-link:hover { opacity: .8; transform: translateY(-1px); }
.badge-muted { opacity: 0.55; }
.channel-disabled { opacity: 0.5; cursor: default; }

/* ── Quality Gate ──────────────────────────────────────────────────── */
.quality-gate {
  background: var(--surface-2, #f9f9fb);
  border: 1px solid var(--border-2, #e0e0e8);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.qg-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #111);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.qg-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted, #666);
  margin-bottom: 6px;
  cursor: pointer;
  line-height: 1.4;
}
.qg-item:last-child { margin-bottom: 0; }
.qg-item input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; cursor: pointer; }

/* ── Publish — scheduling UI ─────────────────────────────────────── */
.pub-actions { display: flex; gap: 8px; margin-top: 10px; }
.pub-quick-times { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pub-quick-label { font-size: 11px; color: var(--text-muted); }
.pub-time-btn {
  font-size: 11px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border-2); background: var(--surface-3);
  color: var(--text-muted); cursor: pointer; transition: all .15s;
}
.pub-time-btn:hover { background: var(--blue-dim); color: var(--blue); border-color: var(--blue); }
.pub-best-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 0 4px;
}
.pub-best-time-label { font-weight: 600; }
.scheduler-panel {
  margin-top: 12px; padding: 12px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface-2);
}
.scheduler-panel.hidden { display: none; }
.scheduler-panel-title { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.schedule-dt-input { width: 100%; }
.scheduler-panel-actions { display: flex; gap: 8px; margin-top: 8px; }

/* ── Scheduled posts section ─────────────────────────────────────── */
.scheduled-section { padding: 16px 20px; border-top: 1px solid var(--border); }
.scheduled-heading {
  font-size: 12px; font-weight: 600; color: var(--amber);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.scheduled-hint { font-size: 11px; color: var(--text-dim); font-weight: 400; text-transform: none; letter-spacing: 0; }
.scheduled-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.scheduled-item:last-child { border-bottom: none; }
.scheduled-info { flex: 1; min-width: 0; }
.scheduled-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.scheduled-type { font-size: 12px; font-weight: 600; color: var(--text); }
.scheduled-channels { display: flex; gap: 4px; }
.badge-xs { font-size: 10px; padding: 1px 6px; }
.scheduled-time-display { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.scheduled-countdown { margin-left: 6px; font-size: 11px; }
.scheduled-preview { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-cancel-scheduled { flex-shrink: 0; color: var(--red); border-color: rgba(248,81,73,.3); font-size: 11px; }

/* ── Draft card image thumbnail ──────────────────────────────────── */
.dc-thumbnail-row { display: flex; align-items: center; gap: 10px; padding: 8px 0 4px; }
.dc-thumbnail { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border-2); }
.dc-thumbnail-label { font-size: 11px; color: var(--text-muted); }
.dc-thumbnail-label a { color: var(--blue); text-decoration: none; }

/* ── Add Client Wizard Modal ─────────────────────────────────────── */
.wizard-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
}
.wizard-overlay.hidden { display: none; }
.wizard-modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); width: 100%; max-width: 580px;
  max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.wizard-close {
  position: absolute; top: 12px; right: 16px; background: none;
  border: none; color: var(--text-muted); font-size: 18px; cursor: pointer;
  z-index: 2;
}
.wizard-close:hover { color: var(--text); }
.wizard-stepper {
  display: flex; align-items: center; padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border); background: var(--surface-2);
  flex-shrink: 0;
}
.wizard-step-dot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wdot-circle {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-3); border: 2px solid var(--border-2);
  color: var(--text-muted); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.wdot-label { font-size: 10px; color: var(--text-dim); white-space: nowrap; }
.wdot-line { flex: 1; height: 2px; background: var(--border); margin: 0 4px; margin-bottom: 14px; }
.wizard-step-dot.wdot-active .wdot-circle { background: var(--blue); border-color: var(--blue); color: #fff; }
.wizard-step-dot.wdot-active .wdot-label { color: var(--blue); }
.wizard-step-dot.wdot-done .wdot-circle { background: var(--green); border-color: var(--green); color: #fff; }
.wizard-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.wizard-pane { display: none; }
.wizard-pane.active { display: block; }
.wizard-pane-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 16px; }
.wiz-field { margin-bottom: 14px; }
.wiz-field label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 5px; }
.wiz-field-hint { font-size: 11px; color: var(--text-dim); margin-top: 3px; display: block; }
.wiz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wiz-hint-block {
  font-size: 12px; color: var(--text-muted); background: var(--surface-2);
  border-radius: var(--radius); padding: 10px 12px; margin-bottom: 14px;
  border-left: 3px solid var(--blue);
}
.color-input-wrap { display: flex; align-items: center; gap: 8px; }
.color-input-wrap input[type="color"] { width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--border-2); cursor: pointer; background: none; }
.input-sm { flex: 1; }
.wiz-validate-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.wiz-validate-result { font-size: 12px; color: var(--text-muted); }
.wiz-validate-result.validate-ok { color: var(--green); }
.wiz-validate-result.validate-fail { color: var(--red); }
.wiz-channels { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.wiz-summary { background: var(--surface-2); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px; }
.wiz-summary-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.wiz-summary-row:last-child { border-bottom: none; }
.wiz-summary-row span:first-child { color: var(--text-muted); }
.wiz-color-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; margin-left: 4px; vertical-align: middle; }
.wizard-footer {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-top: 1px solid var(--border);
  background: var(--surface-2); flex-shrink: 0;
}

/* ── Client Settings Drawer ─────────────────────────────────────── */
.settings-backdrop {
  position: fixed; inset: 0; z-index: 98;
  background: rgba(0,0,0,.4);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.settings-backdrop.open { opacity: 1; pointer-events: auto; }

.settings-drawer {
  position: fixed; right: 0; top: 0; bottom: 0; z-index: 99;
  width: 340px; background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s;
  box-shadow: -4px 0 24px rgba(0,0,0,.4);
}
.settings-drawer.open { transform: translateX(0); }
.settings-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.settings-drawer-title { font-size: 13px; font-weight: 700; }
.settings-drawer-close {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text-muted);
  font-size: 16px; cursor: pointer; transition: all .15s;
}
.settings-drawer-close:hover { background: var(--surface-3); color: var(--text); }
.settings-drawer-body {
  flex: 1; overflow-y: auto; padding: 18px;
  display: flex; flex-direction: column; gap: 18px;
}
.setting-field { display: flex; flex-direction: column; gap: 5px; }
.setting-label { font-size: 12px; font-weight: 600; color: var(--text); }
.setting-hint  { font-size: 11px; color: var(--text-muted); line-height: 1.5; }
.setting-textarea {
  width: 100%; padding: 9px 11px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-size: 13px; resize: vertical; min-height: 80px;
  outline: none; transition: border-color .15s; line-height: 1.5;
  font-family: inherit;
}
.setting-textarea:focus { border-color: var(--blue); }

/* ── Draft Refinement ────────────────────────────────────────────── */
.dc-refine-row {
  padding: 6px 12px 0; border-top: 1px solid var(--border);
}
.dc-refine-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 4px 0;
  color: var(--text-muted); font-size: 12px; cursor: pointer;
  transition: color .15s;
}
.dc-refine-toggle:hover { color: var(--blue); }
.dc-refine-count {
  font-size: 10px; font-weight: 700; color: var(--blue);
  background: var(--blue-dim); border: 1px solid var(--blue);
  padding: 1px 5px; border-radius: 10px;
  display: none;
}
.dc-refine-count.visible { display: inline; }
.dc-refine-body {
  display: none; flex-direction: column; gap: 6px;
  padding: 8px 0 4px;
}
.dc-refine-body.open { display: flex; }
.dc-refine-input {
  width: 100%; padding: 7px 10px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-size: 12px; resize: none;
  outline: none; transition: border-color .15s; line-height: 1.5;
  font-family: inherit;
}
.dc-refine-input:focus { border-color: var(--blue); }
.dc-refine-submit { font-size: 12px; padding: 7px; }

/* F7 — Overlay edit section */
.overlay-edit-section {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 12px 14px; margin-bottom: 12px;
}
.overlay-edit-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.overlay-edit-title {
  margin: 0; font-size: 13px; font-weight: 700; color: var(--text);
}
.overlay-field { margin-bottom: 8px; }
.overlay-label {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--text-muted); margin-bottom: 3px; text-transform: uppercase;
  letter-spacing: 0.4px;
}
.overlay-input {
  width: 100%; padding: 6px 10px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-size: 13px; font-weight: 600;
  outline: none; transition: border-color .15s; font-family: inherit;
  box-sizing: border-box;
}
.overlay-input:focus { border-color: var(--blue); }
.btn-overlay-reset {
  margin-top: 4px; padding: 5px 12px; font-size: 11px; font-weight: 600;
  background: var(--surface-3); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: background .15s, color .15s;
}
.btn-overlay-reset:hover { background: var(--border); color: var(--text); }

/* F7 — Live overlay preview layer on image */
.overlay-preview-layer {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 12px;
  background: rgba(0,0,0,0.52); pointer-events: none;
  border-radius: 8px;
}
.overlay-preview-line1 {
  font-size: 16px; font-weight: 900; color: #fff; text-align: center;
  text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.overlay-preview-line2 {
  font-size: 12px; font-weight: 700; color: #fff; text-align: center;
  line-height: 1.2; text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.overlay-preview-line3 {
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.9); text-align: center;
  line-height: 1.2; text-shadow: 0 1px 4px rgba(0,0,0,.8);
}

/* Quick feedback chips */
.dc-refine-chips {
  display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 2px;
}
.dc-refine-chip {
  background: var(--surface-3); border: 1px solid var(--border-2);
  border-radius: 12px; color: var(--text-muted);
  cursor: pointer; font-size: 11px; padding: 3px 9px;
  transition: background .12s, color .12s, border-color .12s;
  font-family: inherit;
}
.dc-refine-chip:hover {
  background: var(--blue-dim); border-color: var(--blue); color: var(--blue);
}

/* Refine actions row (Refine button + back link side by side) */
.dc-refine-actions {
  display: flex; align-items: center; gap: 10px;
}

/* Back to original link */
.dc-back-original {
  color: var(--text-muted); font-size: 11px;
  text-decoration: none; white-space: nowrap;
}
.dc-back-original:hover { color: var(--text); text-decoration: underline; }

/* ── Draft expand button ─────────────────────────────────────────── */
.dc-expand-btn {
  display: flex; align-items: center; justify-content: center;
  opacity: .5; transition: opacity .15s;
}
.dc-expand-btn:hover { opacity: 1; }

/* ── Draft full-screen overlay ───────────────────────────────────── */
.draft-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.75); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.draft-overlay.open { opacity: 1; pointer-events: auto; }
.draft-overlay-card {
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  width: 100%; max-width: 760px; max-height: 90vh;
  display: flex; flex-direction: column;
  transform: translateY(16px); transition: transform .25s;
}
.draft-overlay.open .draft-overlay-card { transform: translateY(0); }

.dov-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.dov-header-badges { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dov-close {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text-muted);
  font-size: 16px; cursor: pointer; transition: all .15s; flex-shrink: 0;
}
.dov-close:hover { background: var(--surface-3); color: var(--text); }

.dov-body {
  flex: 1; overflow-y: auto; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.dov-var-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.dov-text {
  font-size: 15px; line-height: 1.8; color: var(--text);
  white-space: pre-wrap;
}
.dov-footer {
  display: flex; gap: 10px; padding: 14px 18px;
  border-top: 1px solid var(--border); flex-shrink: 0;
}
.dov-btn-approve {
  flex: 1; padding: 12px; border-radius: var(--radius);
  background: var(--green); color: #fff;
  font-size: 15px; font-weight: 700; border: none; cursor: pointer;
  transition: filter .15s;
}
.dov-btn-approve:hover { filter: brightness(1.1); }
.dov-btn-reject {
  flex: 1; padding: 12px; border-radius: var(--radius);
  background: var(--red-dim); border: 1px solid var(--red);
  color: var(--red); font-size: 15px; font-weight: 700; cursor: pointer;
  transition: all .15s;
}
.dov-btn-reject:hover { background: var(--red); color: #fff; }

/* ── Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1100px) { .workspace { grid-template-columns: 280px 1fr; } }
@media (max-width: 860px)  {
  .stats-row { grid-template-columns: repeat(2,1fr); }
  .workspace { grid-template-columns: 1fr; overflow: visible; }
  .main      { overflow-y: auto; }
  .workflow-panel, .right-col { overflow: visible; }
  .workflow-panel { border-right: none; border-bottom: 1px solid var(--border); }
}
@media (max-width: 600px) {
  .layout { flex-direction: column; height: auto; }
  .sidebar { width: 100%; }
  .stats-row { grid-template-columns: 1fr 1fr; }
}

/* ── Quick Post: hidden by default on desktop ── */
.quick-post-btn { display: none; }

@media (max-width: 480px) {
  /* ── Workspace: collapse grid column to full viewport width ── */
  .workspace        { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .workflow-panel   { min-width: 0; overflow: hidden; }
  .wf-panels        { min-width: 0; }

  /* ── Sidebar: collapse to compact horizontal strip (~44px) ── */
  .sidebar {
    flex-direction: row; flex-wrap: wrap;
    height: auto; min-height: 44px;
    padding: 0; overflow: visible;
    align-items: center;
  }
  .sidebar-brand { border-bottom: none; padding: 6px 10px; flex: 1; }
  .client-nav { display: none; }
  .sidebar-section-label { display: none; }
  .sidebar-bottom { display: none; }

  /* ── Page header ── */
  .page-header { padding: 8px 12px; flex-wrap: wrap; gap: 6px; }

  /* ── Stats row: keep 2×2, tighten padding, drop icon ── */
  .stat-card { padding: 10px 12px; }
  .stat-icon-wrap { display: none; }

  /* ── Draft card: stack left/right columns vertically ── */
  .rdv-body { flex-direction: column; min-height: 0; }
  .rdv-left {
    width: 100%; flex-shrink: 1;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  /* ── General panel padding ── */
  .wf-panel { padding: 8px; overflow: hidden; }

  /* ── TASK-8.1: Hide Quick Post button — textarea → Generate is the only mobile CTA ── */
  #quick-post-btn { display: none; }

  /* ── TASK-8.3: Hide file upload ── */
  .write-file-row { display: none; }

  /* ── TASK-8.4: Hide stats row ── */
  #stats-row { display: none; }

  /* ── TASK-8.5: Hide pipeline stepper ── */
  #pipeline-bar { display: none; }
  #pipe-subtitle { display: none; }

  /* ── TASK-8.6: Hide carousel option ── */
  #pt-carousel { display: none; }
  .post-type-label { display: none; }
  .post-type-row { display: none; }

  /* ── TASK-8.7: Simplify Write screen ── */
  .lang-plan-bar { display: none; }
  #text-content { min-height: 120px; font-size: 16px; }
  #btn-generate-drafts { width: 100%; padding: 14px; font-size: 16px; }

  /* ── TASK-8.8: Review screen — stack vertically, approve button prominent ── */
  .rdv-right { width: 100%; }
  .rdv-image { width: 100%; max-height: 280px; object-fit: cover; }
  .rdv-other-options { display: none; }
  .rdv-best-pick .rdv-other-toggle { display: none; }
  .dc-refine-body { display: none; }
  .dc-refine-toggle { display: none; }
  .rdv-action-bar { flex-direction: column; }
  .rdv-action-left { order: 1; width: 100%; }
  .rdv-action-right { order: 2; width: 100%; text-align: center; }
  /* rdv-approve-btn base rule uses !important — match it here */
  .rdv-approve-btn { width: 100% !important; padding: 14px !important; font-size: 16px !important; }
}

/* ── Analytics page ──────────────────────────────────────────────── */
.an-wrap { padding: 0 0 40px; }

.an-section-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  margin-bottom: 12px;
}
.an-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim);
}
.an-section-badge {
  background: var(--amber-dim);
  color: var(--amber);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
}

/* ── Client cards grid ── */
.an-client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  padding: 0 24px;
}
.an-client-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.an-client-card:hover {
  border-color: var(--border-2);
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}

.an-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.an-card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.an-client-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.an-client-name:hover { color: var(--blue); }
.an-client-ind { font-size: 11px; color: var(--text-muted); }

/* ── Metrics row ── */
.an-card-metrics {
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.an-metric { flex: 1; text-align: center; padding: 10px 6px; }
.an-metric-divider { width: 1px; height: 32px; background: var(--border); flex-shrink: 0; }
.an-metric-val {
  font-size: 20px; font-weight: 700; color: var(--text-muted); line-height: 1;
}
.an-metric-val.an-val-active { color: var(--green); }
.an-metric-val.an-val-amber  { color: var(--amber); }
.an-metric-lbl { font-size: 10px; color: var(--text-dim); margin-top: 3px; }

/* ── Sparkline ── */
.an-sparkline-wrap { display: flex; flex-direction: column; gap: 4px; }
.an-sparkline { width: 100%; height: 32px; display: block; }
.an-sparkline-legend {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text-dim);
}

/* ── Channel pills ── */
.an-card-channels { display: flex; gap: 6px; flex-wrap: wrap; }
.an-ch-pill {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  font-weight: 600;
}
.an-ch-facebook  { background: rgba(24,119,242,.15); color: #4f95f7; }
.an-ch-instagram { background: rgba(225,48,108,.15);  color: #f06292; }
.an-ch-google    { background: rgba(52,168,83,.15);  color: #5db37e; }

/* ── Mini pipeline ── */
.an-mini-pipeline {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; color: var(--text-dim);
}
.an-pipe-stage { padding: 1px 6px; border-radius: 4px; background: var(--surface-3); }
.an-pipe-stage.active { background: var(--blue-dim); color: var(--blue); }
.an-pipe-stage.active-amber { background: var(--amber-dim); color: var(--amber); }
.an-pipe-arrow { color: var(--text-dim); }

.an-last-post { font-size: 11px; color: var(--text-dim); }
.an-no-post   { color: var(--text-dim); font-style: italic; }

/* ── Card actions ── */
.an-card-actions { display: flex; gap: 8px; margin-top: auto; }

/* ── Channel dot ── */
.an-ch-dot {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 4px; vertical-align: middle;
}
.an-ch-dot.an-ch-facebook  { background: #1877F2; }
.an-ch-dot.an-ch-instagram { background: #E1306C; }
.an-ch-dot.an-ch-google    { background: #34A853; }

/* ── Analytics table ── */
.an-table-wrap {
  padding: 0 24px;
  overflow-x: auto;
}
.an-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.an-table th {
  padding: 9px 12px;
  background: var(--surface-2);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.an-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  vertical-align: middle;
}
.an-table tr:last-child td { border-bottom: none; }
.an-table tr:hover td { background: var(--surface-2); }
.an-tc { text-align: center; }
.an-num { font-variant-numeric: tabular-nums; }
.an-bold { color: var(--text); font-weight: 600; }
.an-highlight { color: var(--green); font-weight: 600; }
.an-tr-name { font-size: 12px; font-weight: 600; color: var(--text); }
.an-tr-ind  { font-size: 10px; color: var(--text-dim); }
.an-link { color: var(--blue); font-weight: 500; text-decoration: none; }
.an-link:hover { text-decoration: underline; }
.an-report-link { color: var(--blue); font-size: 11px; text-decoration: none; white-space: nowrap; }
.an-report-link:hover { text-decoration: underline; }
.an-content-cell { color: var(--text-muted); max-width: 260px; font-size: 12px; }
.an-datetime { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.an-empty {
  padding: 20px 24px;
  font-size: 12px; color: var(--text-dim); font-style: italic;
}
.badge-xs { font-size: 9px; padding: 1px 5px; }

/* ── Analytics chart ── */
.an-chart-wrap {
  padding: 16px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin: 0 24px;
}

/* ── Pipeline grid ── */
.an-pipeline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 0 24px;
}
.an-pipeline-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
}
.an-pipeline-name {
  font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 10px;
}
.an-pipeline-stages {
  display: flex; align-items: center; gap: 6px;
}
.an-stage {
  flex: 1; text-align: center;
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 6px 4px;
}
.an-stage-blue   { background: var(--blue-dim); }
.an-stage-green  { background: var(--green-dim); }
.an-stage-amber  { background: var(--amber-dim); }
.an-stage-count  { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1; }
.an-stage-blue  .an-stage-count { color: var(--blue); }
.an-stage-green .an-stage-count { color: var(--green); }
.an-stage-amber .an-stage-count { color: var(--amber); }
.an-stage-label  { font-size: 9px; color: var(--text-dim); margin-top: 3px; }
.an-stage-arrow  { color: var(--text-dim); font-size: 12px; flex-shrink: 0; }

/* sidebar active state for analytics page */
.sidebar-link.analytics-active {
  background: var(--blue-dim);
  color: var(--text);
}
.stat-icon-purple { background: var(--purple-dim); color: var(--purple); }
.stat-icon-amber  { background: var(--amber-dim);  color: var(--amber); }

/* ── Google Setup Modal ── */
.gsetup-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 800;
  backdrop-filter: blur(2px);
}
.gsetup-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 801;
  width: min(520px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
}
.gsetup-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.gsetup-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.gsetup-close {
  background: none; border: none;
  color: var(--text-dim); cursor: pointer; font-size: 16px;
  padding: 2px 6px; border-radius: var(--radius);
  transition: color .15s;
}
.gsetup-close:hover { color: var(--text); }
.gsetup-body {
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.gsetup-loading, .gsetup-error {
  text-align: center; padding: 24px 0;
  color: var(--text-dim); font-size: 13px;
}
.gsetup-error { color: var(--red); }
.gsetup-status-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--surface-2); border-radius: var(--radius);
}
.gsetup-status-label { font-size: 12px; color: var(--text-dim); flex: 1; }
.gsetup-description {
  font-size: 12px; color: var(--text-dim); margin: 0; line-height: 1.5;
}
.gcred-list { display: flex; flex-direction: column; gap: 8px; }
.gcred-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  gap: 12px;
}
.gcred-meta {
  display: flex; align-items: flex-start; gap: 8px; flex: 1; min-width: 0;
}
.gcred-dot { font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.gcred-dot-ok     { color: var(--green); }
.gcred-dot-missing { color: var(--red); }
.gcred-label { font-size: 12px; font-weight: 500; color: var(--text); }
.gcred-hint  { font-size: 10px; color: var(--text-dim); margin-top: 1px; }
.gcred-input { width: 160px; flex-shrink: 0; font-size: 11px; }
.gsetup-actions {
  display: flex; gap: 8px; padding-top: 4px;
}
.gsetup-guide {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.gsetup-guide-title {
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}
.gsetup-guide-steps {
  margin: 0; padding-left: 18px;
  display: flex; flex-direction: column; gap: 5px;
}
.gsetup-guide-steps li {
  font-size: 11px; color: var(--text-dim); line-height: 1.4;
}

/* ── Pipeline progress bar ───────────────────────────────────────── */
.pipeline-bar {
  display: flex; align-items: center; gap: 0;
  padding: 10px 20px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.pipe-step {
  display: flex; align-items: center; gap: 6px;
  cursor: default; user-select: none; flex-shrink: 0;
}
.pipe-step.done { cursor: pointer; }
.pipe-step.done:hover .pipe-circle { filter: brightness(1.15); }

.pipe-circle {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: var(--surface-3); color: var(--text-muted);
  border: 2px solid var(--text-dim); flex-shrink: 0;
  transition: background .2s, border-color .2s, color .2s;
}
.pipe-label {
  font-size: 12px; font-weight: 500; color: var(--text-dim);
  white-space: nowrap; transition: color .2s;
}
.pipe-connector {
  flex: 1; min-width: 12px; max-width: 48px;
  height: 2px; background: var(--border-2); margin: 0 6px;
  transition: background .2s; flex-shrink: 1;
}
/* done step */
.pipe-step.done .pipe-circle {
  background: var(--green-dim); color: var(--green);
  border-color: var(--green);
}
.pipe-step.done .pipe-label { color: var(--green); }
.pipe-connector.done { background: var(--green); }
/* active step — uses --brand-color injected per-client */
.pipe-step.active .pipe-circle {
  background: rgba(0,0,0,.0); color: var(--brand-color, var(--amber));
  border-color: var(--brand-color, var(--amber));
  box-shadow: 0 0 0 3px rgba(201,151,58,.18);
}
.pipe-step.active .pipe-label {
  color: var(--brand-color, var(--amber)); font-weight: 600;
}

/* done step: ← prefix signals the step is clickable (go back) */
.pipe-step.done .pipe-label::before {
  content: "← ";
  font-size: 10px;
}

/* error-active circle: red border + text when an inline panel error fires */
.pipe-circle.pipe-error-active {
  background: var(--red-dim);
  border-color: var(--red);
  color: var(--red);
}

/* mobile: show abbreviated labels instead of hiding them entirely */
@media (max-width: 560px) {
  .pipe-label { font-size: 0; }
  .pipe-label::after { content: attr(data-short); font-size: 10px; font-weight: 500; color: inherit; }
  .pipe-connector { min-width: 8px; max-width: 20px; margin: 0 3px; }
  .pipeline-bar { padding: 8px 12px; }
  .pipe-circle { width: 20px; height: 20px; font-size: 10px; }
}

/* step subtitle — one line of plain English below the pipeline bar */
.pipe-subtitle {
  padding: 5px 20px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* ── Pipeline back button ────────────────────────────────────────── */
.pipe-back-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin-bottom: 12px;
  padding: 6px 14px; border-radius: var(--radius);
  font-size: 12px; font-weight: 600;
  color: var(--brand-color, var(--amber));
  background: transparent;
  border: 1.5px solid var(--brand-color, var(--amber));
  cursor: pointer; transition: background .15s, opacity .15s;
}
.pipe-back-btn:hover { background: rgba(201,151,58,.10); opacity: .9; }

/* ── Pipeline inline error ───────────────────────────────────────── */
.pipe-error {
  padding: 8px 12px; margin-bottom: 10px;
  border-radius: var(--radius);
  background: var(--red-dim); color: var(--red);
  border: 1px solid rgba(248,81,73,.3);
  font-size: 12px; font-weight: 500;
}
.pipe-error.hidden { display: none !important; }

/* ── Pipeline next-step hints ────────────────────────────────────── */
.pipeline-hint {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border-left: 3px solid var(--brand-color, var(--amber));
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.pipeline-hint.hidden { display: none !important; }
.pipeline-hint-msg { font-size: 12px; color: var(--text-muted); flex: 1; }
.pipeline-hint-cta {
  font-size: 11px; font-weight: 600; padding: 4px 10px;
  border-radius: 5px; border: none; cursor: pointer;
  background: var(--brand-color, var(--amber)); color: #fff;
  white-space: nowrap; flex-shrink: 0; transition: opacity .15s;
}
.pipeline-hint-cta:hover { opacity: .88; }
.gsetup-guide-steps strong { color: var(--text); }

/* ── Write step: file upload row ────────────────────────────────── */
.write-file-row {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
}
.write-file-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: var(--radius);
  font-size: 12px; font-weight: 500;
  color: var(--text-muted); background: var(--surface-3);
  border: 1px solid var(--border-2); cursor: pointer;
  transition: background .15s, color .15s;
}
.write-file-btn:hover { background: var(--surface-2); color: var(--text); }

/* ── Write step: default disclaimer ─────────────────────────────── */
.write-disclaimer {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 8px; padding: 8px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); opacity: .75;
}
.write-disclaimer-label {
  font-size: 10px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .04em;
}
.write-disclaimer-text {
  font-size: 12px; color: var(--text-muted); font-style: italic;
}

/* ── Generate status spinner ─────────────────────────────────────── */
.generate-status {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border-2);
  font-size: 12px; color: var(--text-muted);
}
.generate-status.hidden { display: none !important; }
.generate-status-spinner {
  display: inline-block; font-size: 14px;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Workflow step guide (instruction block in left panel) ────────── */
.wf-step-guide {
  padding: 16px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border-2);
  margin-bottom: 12px; text-align: center;
}
.wf-step-guide-icon { font-size: 28px; margin-bottom: 8px; }
.wf-step-guide p { font-size: 13px; color: var(--text-muted); }
.wf-step-guide p strong { color: var(--text); }
.wf-step-guide-sub { font-size: 12px; margin-top: 4px; color: var(--text-dim); }

/* ── Full-width step button variant ──────────────────────────────── */
.btn-step-wide { width: 100%; justify-content: center; }

/* ── All-drafts-rejected message (wfp-3) ────────────────────────── */
.all-rejected-msg {
  padding: 18px 16px; border-radius: var(--radius);
  background: var(--red-dim); border: 1px solid var(--red);
  text-align: center;
}
.all-rejected-msg.hidden { display: none !important; }
.arj-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.arj-sub   { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
.arj-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ── Publish summary panel (Step 4 right panel) ──────────────────── */
.pub-summary { display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
.pub-summary.hidden { display: none !important; }
.pub-summary-inner {
  margin: 20px 16px; padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface-2); border: 1px solid var(--border-2);
  display: flex; flex-direction: column; gap: 20px;
}
.pub-sum-row {
  display: flex; gap: 14px; align-items: flex-start;
}
.pub-sum-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.pub-sum-label {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 5px;
}
.pub-sum-text {
  font-size: 13px; line-height: 1.55; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
}
.pub-sum-thumb {
  width: 100%; max-height: 180px; object-fit: cover;
  border-radius: var(--radius); margin-top: 2px;
  border: 1px solid var(--border-2);
}
.pub-sum-ch {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text); padding: 3px 0;
}
.pub-sum-ch-check {
  font-size: 11px; color: var(--green);
  background: var(--green-dim); border-radius: 50%;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}


/* ── review-content hidden when on Publish step ──────────────────── */
#review-content.hidden { display: none !important; }

/* ── Approved draft label (injected card) ────────────────────────── */
.approved-draft-label {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--green);
  margin-bottom: 6px;
}

/* ── Inline schedule editing ─────────────────────────────────────── */
.sched-wrapper {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.sched-display {
  cursor: pointer; font-size: 12px; color: var(--text-muted);
  border-bottom: 1px dashed transparent; transition: border-color .15s;
}
.sched-display:hover { border-bottom-color: var(--text-muted); }
.sched-empty { font-style: normal; color: var(--text-dim); font-size: 11px; }
.sched-input {
  font-size: 11px; padding: 2px 6px;
  border: 1px solid var(--border-2); border-radius: 4px;
  background: var(--surface-3); color: var(--text);
  outline: none;
}
.sched-input:focus { border-color: var(--blue); }
.sched-postnow {
  font-size: 11px; color: var(--text-dim); cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.sched-postnow:hover { color: var(--amber); text-decoration: underline; }

/* ── Content Schedule tile ──────────────────────────────────────── */
.cs-upload-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; flex-wrap: wrap;
}
.cs-upload-label {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; white-space: nowrap;
}
.cs-upload-result { font-size: 13px; }
.cs-upload-ok  { color: var(--green); }
.cs-upload-err { color: var(--red, #e53935); }
.cs-spinner    { font-size: 13px; color: var(--text-muted); }

.cs-table-wrap { padding: 0 0 12px; overflow-x: auto; }
.cs-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.cs-table th {
  text-align: left; padding: 6px 12px;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.cs-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cs-table tr:last-child td { border-bottom: none; }
.cs-dt    { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cs-tz    { font-size: 10px; color: var(--text-muted); margin-left: 4px; }
.cs-topic { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-empty { padding: 12px 16px; color: var(--text-muted); font-size: 13px; margin: 0; }
.cs-more  { padding: 6px 16px; color: var(--text-muted); font-size: 12px; margin: 0; }

.cs-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.cs-pill-green { background: var(--green-dim); color: var(--green); }
.cs-pill-amber { background: var(--amber-dim); color: var(--amber); }
.cs-pill-red   { background: rgba(229,57,53,.12); color: #e53935; cursor: help; }
.cs-pill-grey  { background: var(--surface-3); color: var(--text-muted); }

.cs-skip-btn {
  font-size: 11px; padding: 2px 8px; border-radius: 4px;
  border: 1px solid var(--border-2); background: none;
  color: var(--text-muted); cursor: pointer; transition: all .15s;
}
.cs-skip-btn:hover { border-color: #e53935; color: #e53935; }

/* ── Late mobile overrides — must follow base rules defined after the main 480px block ── */
@media (max-width: 480px) {
  /* .write-file-row base is display:flex (defined late in file) — override here */
  .write-file-row { display: none; }
  /* B18: hide hint-approve bar — redundant on mobile and causes mis-taps */
  #hint-approve { display: none !important; }
  /* B20: publish screen simplification */
  .pub-quick-times { display: none; }
  .pub-best-time { display: none; }
  #btn-schedule { display: none; }
  #wfp-5 .escape-row { display: none; }
  #btn-post { width: 100%; padding: 16px; font-size: 18px; }
}

/* B20: "Ready to post" message — hidden on desktop, shown on mobile */
.mob-ready-msg { display: none; }
@media (max-width: 480px) {
  .mob-ready-msg {
    display: block;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding: 12px 0 4px;
    color: var(--text-primary);
  }
}