:root {
  --bg-primary: #0a0e17;
  --bg-secondary: #111827;
  --bg-card: #1a2233;
  --bg-card-hover: #1f2a3d;
  --border: #2a3548;
  --border-active: #3b82f6;
  --text-primary: #e8ecf4;
  --text-secondary: #8899b0;
  --text-muted: #5a6a80;
  --accent-blue: #3b82f6;
  --accent-cyan: #06b6d4;
  --accent-green: #10b981;
  --accent-amber: #f59e0b;
  --accent-red: #ef4444;
  --accent-purple: #8b5cf6;
  --glow-blue: rgba(59, 130, 246, 0.15);
  --glow-green: rgba(16, 185, 129, 0.15);
  --glow-amber: rgba(245, 158, 11, 0.15);
  --glow-red: rgba(239, 68, 68, 0.15);
  --glow-purple: rgba(171, 68, 239, 0.15);
  --radius: 12px;
  --radius-sm: 8px;
  --font-body: 'DM Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Ambient background glow */
body::before {
  content: '';
  position: fixed;
  top: -20%;
  left: -10%;
  width: 60%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(59,130,246,0.06) 0%, transparent 70%);
  pointer-events: none;
}

body::after {
  content: '';
  position: fixed;
  bottom: -20%;
  right: -10%;
  width: 50%;
  height: 50%;
  background: radial-gradient(ellipse, rgba(6,182,212,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.app-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  position: relative;
  z-index: 1;
}

/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.header-title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header-subtitle {
  color: var(--text-muted);
  font-size: 0.65rem;
  margin-top: 0.65rem;
  margin-bottom: 0.65rem;
  font-family: var(--font-mono);
}

/* 4.2531.21: the header's read-only Mode label (.mode-switch, .mode-label,
   .mode-value and its .mode-auto / .mode-manual colors) was removed from
   the dashboard. The automation mode is shown and changed in the Control
   Center (.automation-option below). */

/* 4.25111.62: the Automation card. Three states as a radio list;
   the selected row's dot and label take the state's color, the
   same two colors the header label uses (manual amber, the rest
   green). Members without change_mode see the list disabled. */
.automation-card { padding-bottom: 0.6rem; }
/* 4.2531.19: the four control cards use 0.5rem padding on every side, at
   every width. Two-class selectors so this wins over both .sidebar-panel's
   0.8rem 1rem and the Control Center's padding-bottom above. */
.sidebar-panel.automation-card, .sidebar-panel.compose-card,
.sidebar-panel.research-card, .sidebar-panel.topics-card { padding: 0.5rem 0.5rem; }
.automation-list { display: flex; flex-direction: column; gap: 0.35rem; }
.automation-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.25rem 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.automation-option:hover { background: var(--bg-card-hover); }
.automation-option input[type="radio"] {
  margin: 0.2rem 0 0 0;
  flex: 0 0 auto;
  accent-color: var(--text-muted);
  cursor: pointer;
}
.automation-option-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.automation-option-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.automation-option-desc { font-size: 0.70rem; color: var(--text-muted); line-height: 1.35; }
.automation-option.selected { border-color: var(--border-active); }
.automation-option.selected.automation-manual .automation-option-label { color: var(--accent-amber); }
.automation-option.selected.automation-manual input[type="radio"] { accent-color: var(--accent-amber); }
.automation-option.selected.automation-auto .automation-option-label { color: var(--accent-green); }
.automation-option.selected.automation-auto input[type="radio"] { accent-color: var(--accent-green); }
.automation-option.disabled { cursor: default; opacity: 0.6; }
.automation-option.disabled:hover { background: transparent; }
.automation-option.disabled input[type="radio"] { cursor: default; }
.automation-note { margin-top: 0.6rem; font-size: 0.75rem; color: var(--text-secondary); line-height: 1.35; }

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
/* 4.2531.16: the group of four post counts: Content Runs across the top,
   Published, Pending and Scheduled beneath it. 4.2531.17: the group sits
   at the top of the middle column, above the Control Center, spaced like
   the column's cards; the stats row now holds only the LinkedIn card,
   at full width. */
.stats-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stats-group > .stat-runs { grid-column: 1 / -1; }
.stats-group > .stat-card { min-width: 0; }

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s;
}

.stat-card:hover { border-color: var(--border-active); }
/* 4.2531.16: each stat card carries its own class, so its accent color
   follows the card wherever it sits (these rules used positions, which
   the new grouping would have shuffled). Scheduled uses the sky blue of
   the scheduled-post badge (.status-scheduled-sky). */
.stat-card.stat-published:hover { border-color: var(--accent-blue); box-shadow: 0 0 8px rgba(59,130,246,0.3); }
.stat-card.stat-runs:hover { border-color: var(--accent-green); box-shadow: 0 0 8px rgba(16,185,129,0.3); }
.stat-card.stat-pending:hover { border-color: var(--accent-amber); box-shadow: 0 0 8px rgba(245,158,11,0.3); }
.stat-card.stat-scheduled:hover { border-color: #38bdf8; box-shadow: 0 0 8px rgba(56,189,248,0.3); }
.stat-card.stat-linkedin:hover { border-color: var(--accent-cyan); box-shadow: 0 0 8px rgba(6,182,212,0.3); }

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.stat-card.stat-published::before { background: var(--accent-blue); }
.stat-card.stat-runs::before { background: var(--accent-green); }
.stat-card.stat-pending::before { background: var(--accent-amber); }
.stat-card.stat-scheduled::before { background: #38bdf8; }
.stat-card.stat-linkedin::before { background: var(--accent-cyan); }

.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--font-mono);
  margin-top: 0.25rem;
}

.stat-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  font-family: var(--font-mono);
}

/* Main content layout */
/* 4.25111.54: the flexible column is minmax(0, 1fr), not 1fr. A bare
   1fr track cannot shrink below the min-content of what it holds, and
   one unbreakable line inside a card (the single-line failure reason
   introduced in 4.25111.45, or any long nowrap text) held the column
   open while the two fixed columns kept their width: the grid then
   ran past the container and the Activity column was clipped behind
   body overflow-x hidden until the 1100px query dropped a column.
   With a zero minimum the track shrinks with the container, the card
   takes the column's width, and the reason line clips with its
   ellipsis inside the card as intended. Same rule in both queries. */
.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px 360px;
  gap: 1.5rem;
}
/* 4.2531.18: the LinkedIn card (the stats row, now holding only that
   card) is placed by layout. Three columns: at the top of the right
   column, above the Activity Log; the posts and the controls span both
   rows, and the second row is the flexible one, so the Activity Log
   sits directly under the card. Rows have no gap here; the cards' own
   1rem margins keep their usual spacing. */
/* 4.2531.23: the post-count group joins the right column, above the
   LinkedIn card: group, LinkedIn, Activity Log, with the third row the
   flexible one. */
.main-grid { grid-template-rows: auto auto 1fr; row-gap: 0; }
.main-grid > .col-posts { grid-column: 1; grid-row: 1 / 4; }
.main-grid > .col-controls { grid-column: 2; grid-row: 1 / 4; }
.main-grid > .stats-group { grid-column: 3; grid-row: 1; }
/* 4.2531.41: the left column opens with a title (Awaiting Approval or
   Recent Posts) and its first card sits one title below the top. The
   other columns start one title lower, so their first cards line up with
   it: three columns, the Control Center column and the right column; two
   columns, column 2's first item (the post-count group; the controls
   column has no box there). One column: the Control Center, first in the
   stack, starts one title lower too, so the space from the nav to it is
   the same as at two and three columns. */
.main-grid { --title-block: 1.5rem; }
.main-grid > .col-controls, .main-grid > .stats-group { margin-top: var(--title-block); }
.main-grid > .stats-grid { grid-column: 3; grid-row: 2; margin-bottom: 1rem; }
.main-grid > .col-activity { grid-column: 3; grid-row: 3; align-self: start; }

.section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-title .badge {
  background: var(--accent-blue);
  color: white;
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-family: var(--font-mono);
}

/* Post cards */
.post-list { display: flex; flex-direction: column; gap: 0.75rem; }

.post-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Compacted (1.8.19): padding reduced from 1.25rem. Preview clamp
     is unchanged — content is not hidden to gain the space. */
  padding: 0.8rem 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.post-card:hover {
  border-color: var(--border-active);
  background: var(--bg-card-hover);
}

.post-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.post-topic-badge {
  font-size: 0.7rem;
  padding: 0.2rem 0.3rem;
  border-radius: 6px;
  font-weight: 600;
  font-family: var(--font-mono);
}

.post-status {
  font-size: 0.7rem;
  padding: 0.2rem 0.3rem;
  border-radius: 6px;
  font-weight: 600;
  font-family: var(--font-mono);
}

.status-posted { background: var(--glow-green); color: var(--accent-green); }
.status-pending_approval { background: var(--glow-amber); color: var(--accent-amber); }
.status-scheduled { background: var(--glow-purple); color: var(--accent-purple); }
.status-draft { background: rgba(90,106,128,0.2); color: var(--text-secondary); }
.status-rejected { background: var(--glow-red); color: var(--accent-red); }
.status-failed { background: var(--glow-red); color: var(--accent-red); }

.post-title-text {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-preview {
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

/* Date stacked ABOVE the primary-source link (1.8.19). */
.post-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.post-date {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.03em;
}

/* 4.25111.157 (credential per membership, stage 3): who the post
   publishes as, beside the date. */
.post-author {
  font-size: 0.65rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-actions { display: flex; gap: 0.5rem; }
.post-actions .btn { white-space: nowrap; padding: 0.2rem 0.5rem; }

/* Buttons */
.btn {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
}

/* Tight variant: 25% of the base .btn padding (0.5rem 1rem). Used by the
   Quick Actions button row and the Refresh Feeds button so three buttons
   fit comfortably on one line. */
.btn.btn-tight { padding: 0.125rem 0.25rem; }

.btn-approve {
  background: var(--accent-green);
  color: white;
}
.btn-approve:hover { background: #0ea574; }

.btn-reject {
  background: transparent;
  border: 1px solid var(--accent-red);
  color: var(--accent-red);
}
.btn-reject:hover { background: var(--glow-red); }

.btn-edit {
  background: transparent;
  border: 1px solid var(--accent-amber);
  color: var(--accent-amber);
}
.btn-edit:hover { background: var(--glow-amber); }

.btn-primary {
  background: var(--accent-blue);
  color: white;
}
.btn-primary:hover { background: #2563eb; }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.btn-ghost:hover { border-color: var(--text-secondary); color: var(--text-primary); }

/* Sidebar panels */
.sidebar-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Card padding aligned to .post-card (0.8rem 1rem) for a consistent
     card frame across the dashboard. */
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}

/* Activity log */
/* 4.25111.166: the panel is an accordion. The title is a button that
   keeps the .section-title look (the button's own frame, background
   and font reset here), the chevron turns when the panel is open, and
   a closed panel drops the title's bottom margin so it is one tidy
   row. The list itself is not rendered while closed (dashboard.jsx),
   so no display rule is needed for it. */
.accordion-toggle {
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.accordion-toggle:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; border-radius: var(--radius-sm); }
.accordion-chevron {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.activity-panel.is-open .accordion-chevron { transform: rotate(90deg); }
.activity-panel:not(.is-open) .section-title { margin-bottom: 0; }

.log-entry {
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(42,53,72,0.5);
  font-size: 0.8rem;
}

.log-entry:last-child { border-bottom: none; }

.log-time {
  font-family: var(--font-mono);
  color: var(--text-muted);
  white-space: nowrap;
  font-size: 0.7rem;
}

.log-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.log-dot.info { background: var(--accent-blue); }
.log-dot.warn { background: var(--accent-amber); }
.log-dot.error { background: var(--accent-red); }

.log-text { color: var(--text-secondary); line-height: 1.4; }

.log-meta {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.15rem;
}
.log-id {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
}
.log-cycle {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  background: rgba(59, 130, 246, 0.1);
  color: var(--accent-blue);
}

/* Connection status */
.conn-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.conn-dot.connected { background: var(--accent-green); }
.conn-dot.disconnected { background: var(--accent-red); }

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

/* Cadence meter */
.cadence-bar {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.cadence-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* Expanded post modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}

/* Compact centered variant for short message dialogs. */
.modal-content-sm { max-width: 360px; text-align: center; }

.modal-close {
  float: right;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  cursor: pointer;
}

.modal-close-bottom {
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.6rem;
  text-align: center;
  background: transparent;
  border: 2px solid var(--border-active);
  border-radius: var(--radius-sm);
  color: var(--border-active);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.modal-close-bottom:hover {
  color: white;
  background: var(--border-active);
  border-color: var(--border-active);
}

.modal-body {
  white-space: pre-wrap;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 1.5rem 0;
  font-size: 0.9rem;
}

.modal-hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.hashtag {
  background: var(--bg-secondary);
  color: var(--accent-cyan);
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-family: var(--font-mono);
}

/* Loading state */
.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Extracted Inline Utilities ───────────────────── */

/* Flex/layout helpers */
.flex-1 { flex: 1; }
.fw-normal { font-weight: 400; }
.mb-075 { margin-bottom: 0.75rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.header-controls { display: flex; align-items: center; gap: 0.75rem; }
.header-controls-wide { display: flex; align-items: center; gap: 1.5rem; }
.vstack-sm { display: flex; flex-direction: column; gap: 0.25rem; }
/* 4.2541.9: every primary action bar carries a line separator above it, the
   top duplicate row AND the bottom bar, on both faces. The border on the base
   .modal-actions is the divider the removed .modal-move section used to give
   the action group. */
.modal-actions { display: flex; gap: 0.75rem; margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.08); }
.modal-actions .btn { padding: 0.3rem 0.6rem; }
.modal-actions-end .btn { padding: 0.3rem 0.6rem; }
.modal-actions-end { display: flex; gap: 0.75rem; justify-content: flex-end; }
.section-divider { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; }

/* Text */
.text-muted-sm { color: var(--text-muted); font-size: 0.85rem; }
.text-edit-sm { font-size: 0.82rem; }
.highlight-cyan { color: var(--accent-cyan); font-weight: 600; margin: 0 0.2rem; }
.mono-muted-sm { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.log-detail { color: var(--text-muted); font-size: 0.78rem; }

/* Buttons */
.btn-nav { font-size: 0.75rem; padding: 0.3rem 0.75rem; }
.btn-action-sm { font-size: 0.75rem; padding: 0.3rem 0.6rem; }
.btn-full { width: 100%; }
.btn-refresh-full { width: 100%; margin-top: 0.5rem; font-size: 0.75rem; }

/* State panels (error, loading, no-tenant) */
.state-panel { text-align: center; padding: 3rem; }
.state-panel-mt { text-align: center; padding: 3rem; margin-top: 2rem; }
.state-icon { font-size: 2rem; margin-bottom: 1rem; }
.state-warning { color: var(--accent-amber); margin-bottom: 0.5rem; font-weight: 600; }
.empty-state { text-align: center; padding: 2rem; color: var(--text-muted); }
.loading-spinner-lg { width: 32px; height: 32px; }

/* Forms */
.form-label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--text-muted); }
.form-input {
  width: 100%; padding: 0.4rem 0.6rem; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg-secondary);
  color: var(--text-primary); font-size: 0.9rem;
}
.form-textarea {
  width: 100%; padding: 0.5rem; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg-secondary);
  color: var(--text-primary); font-size: 0.85rem;
  font-family: inherit; resize: vertical;
}

/* Image selection */
.image-choice { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; }
.image-choice-inline { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.image-url-field {
  display: block; width: 100%; margin-top: 0.35rem; padding: 0.4rem;
  font-size: 0.82rem; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-primary); color: var(--text-primary);
}
.image-thumb {
  max-width: 130px; max-height: 80px; object-fit: cover;
  border-radius: 4px; margin-top: 0.25rem; border: 1px solid var(--border);
}
.image-thumb-lg {
  max-width: 160px; max-height: 100px; border-radius: 4px;
  margin-top: 0.25rem; border: 1px solid var(--border);
}

/* AI Model card */
/* 4.2531.13: the AI Model card was retired; its row sits in the Control
   Center card, under the title. */
.automation-card .ai-model-row { margin: 0.1rem 0 0.6rem; }
.ai-model-row { display: flex; align-items: center; justify-content: space-between; }
.ai-model-label { font-size: 0.75rem; color: var(--text-muted); }
.ai-model-value { font-size: 0.8rem; font-family: var(--font-mono, monospace); color: var(--accent-cyan); }
/* 4.25111.90: no model selected; the amber the header uses for manual. */
.ai-model-value.ai-model-missing { color: var(--accent-amber); }

/* Research Monitor */
.research-meta {
  font-size: 0.8rem; color: var(--text-secondary);
  margin-top: 0.15rem; margin-bottom: 0.5rem;
  display: flex; align-items: baseline;
}
.feed-list-scroll { max-height: 150px; overflow-y: auto; padding-right: 0.5rem; }
.feed-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.2rem 0; font-size: 0.75rem;
}
.feed-name {
  color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex: 1; min-width: 0; font-size: 0.75rem;
}
.feed-meta { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.feed-tier-sm { font-size: 0.55rem; padding: 0.05rem 0.3rem; }
.feed-count { font-family: var(--font-mono); color: var(--text-muted); font-size: 0.6rem; }
/* 4.2531.41: dashboard card titles sit 0.25rem above their content at
   every layout; scoped to the dashboard grid because the landing page
   loads this stylesheet and uses .section-title on its own headings. A
   closed Activity Log keeps its 0 (the accordion's rule is more specific).
   The left column's titles (Awaiting Approval, Recent Posts; one line
   each) are pinned at 1.25rem tall, their content centered as before, so
   with the margin a title takes exactly 1.5rem (--title-block on
   .main-grid) whatever font has loaded; the column alignment relies on
   that. */
.main-grid .section-title { margin-bottom: 0.25rem; }
.col-posts .section-title { height: 1.25rem; }
.section-title-flush { margin-bottom: 0; display: flex; align-items: baseline; gap: 0.35rem; }
.section-title-meta { font-size: 0.75rem; font-weight: 400; color: var(--text-secondary); }

/* Topic Coverage */
.topic-row { display: flex; justify-content: space-between; margin-bottom: 0.25rem; }

/* Activity Log */
.log-scroll { max-height: 600px; overflow-y: auto; padding-right: 0.5rem; }

/* Post card variants */
.pending-card { border-color: var(--accent-amber); border-width: 1px; }
.post-badges-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
.post-badges-row { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.badge-draft { background: #fff3e0; color: #e65100; }
.badge-draft-ml { background: #fff3e0; color: #e65100; margin-left: 0.3rem; }
.status-preview { background: var(--glow-blue); color: var(--accent-blue); }

/* Modal headings & sections */
.modal-heading { margin: 1rem 0 0.5rem; font-size: 1.1rem; }
.modal-heading-top { margin: 0 0 1rem; font-size: 1.1rem; }
.section-heading { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; }
.section-heading-cyan { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--accent-cyan); }
.section-heading-plain { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.5rem; }

/* Quality assessment */
.quality-panel { margin-top: 1.5rem; padding: 1rem; background: var(--bg-secondary); border-radius: var(--radius-sm); }
.quality-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.quality-label { font-size: 0.75rem; color: var(--text-muted); width: 140px; font-family: var(--font-mono); }
.quality-bar { flex: 1; height: 6px; background: var(--bg-primary); border-radius: 3px; }
.quality-score { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); }

/* Misc dashboard */
.stat-value-sm { font-size: 1rem; margin-top: 0.75rem; }
.conn-dot-inline { display: inline-block; margin-right: 0.5rem; vertical-align: middle; }
.dev-banner-detail { font-size: 0.7rem; opacity: 0.8; }
.text-link-blue { color: var(--accent-blue); }
.topic-badge-sm { font-size: 0.65rem; }
.loading-center { text-align: center; padding-top: 4rem; }

/* Responsive */
@media (max-width: 1100px) {
  .main-grid { grid-template-columns: minmax(0, 1fr) 260px; }
  /* 4.2531.18: two columns. The controls column gives up its box so the
     LinkedIn card can sit between the post-count group and the Control
     Center; each control card takes its own row in column 2, and the
     posts span them all. 4.2531.19: the Activity Log sits at the bottom of
     column 2, below Topic Coverage, in the last row, which is the
     flexible one, so spare height lands below the Activity Log. */
  .main-grid { grid-template-rows: repeat(6, auto) 1fr; }
  .main-grid > .col-controls { display: contents; }
  .main-grid > .col-posts { grid-column: 1; grid-row: 1 / 8; }
  .main-grid > .stats-group { grid-column: 2; grid-row: 1; }
  .main-grid > .stats-grid { grid-column: 2; grid-row: 2; }
  .col-controls > .automation-card { grid-column: 2; grid-row: 3; }
  .col-controls > .compose-card { grid-column: 2; grid-row: 4; }
  .col-controls > .research-card { grid-column: 2; grid-row: 5; }
  .col-controls > .topics-card { grid-column: 2; grid-row: 6; }
  .main-grid > .col-activity { grid-column: 2; grid-row: 7; margin-top: 0; align-self: start; }
  .main-grid > .stats-group, .col-controls > .sidebar-panel { min-width: 0; }
}
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: minmax(0, 1fr); }
  .main-grid { grid-template-columns: minmax(0, 1fr); }
  /* 4.2531.14: one single-column order at every phone width. The controls
     column gives up its box so its cards can each take a place, and the
     cards are named by class, never by position: Control Center, Post
     Composition, Research Monitor, the stats, Topic Coverage, the posts,
     then the Activity Log. (app-mobile.css used to reorder columns by
     position below 640px, a second rendering; that rule was removed.) */
  .main-grid > .col-controls { display: contents; }
  .col-controls > .automation-card { order: 1; }
  .col-controls > .compose-card { order: 2; }
  .col-controls > .research-card { order: 3; }
  /* 4.2531.18: the LinkedIn card directly below the Research Monitor,
     then the post-count group. Placements from the wider layouts are
     cleared, and rows take the grid's 1.5rem gap again. */
  .main-grid > .stats-grid { order: 4; margin-bottom: 0; }
  .main-grid > .stats-group { order: 5; }
  .main-grid { grid-template-rows: none; row-gap: 1.5rem; }
  .main-grid > .col-posts, .main-grid > .stats-grid, .main-grid > .col-activity,
  .main-grid > .stats-group, .col-controls > .sidebar-panel { grid-column: auto; grid-row: auto; }
  .main-grid > .col-activity { margin-top: 0; }
  .col-controls > .topics-card { order: 6; }
  .main-grid > .col-posts { order: 7; }
  .main-grid > .col-activity { order: 8; }
  .col-controls > .sidebar-panel, .main-grid > .stats-group { min-width: 0; margin-bottom: 0; }
  .main-grid > .stats-group { margin-top: 0; }
  .col-controls > .automation-card { margin-top: var(--title-block); }
}

/* Research & Sources */
.source-list {
  margin-top: 1rem; padding: 1rem;
  background: var(--bg-secondary); border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-cyan);
}
.source-item {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.35rem 0; border-bottom: 1px solid rgba(42,53,72,0.3); font-size: 0.8rem;
}
.source-item:last-child { border-bottom: none; }
.source-name { color: var(--text-primary); font-weight: 500; }
.source-tier {
  font-family: var(--font-mono); font-size: 0.65rem;
  padding: 0.1rem 0.4rem; border-radius: 4px;
}
.tier-authoritative { background: rgba(16,185,129,0.15); color: var(--accent-green); }
.tier-primary { background: rgba(59,130,246,0.15); color: var(--accent-blue); }
.tier-secondary { background: rgba(139,92,246,0.15); color: var(--accent-purple); }
.source-url { color: var(--accent-cyan); text-decoration: none; font-size: 0.7rem; word-break: break-all; }
.source-url:hover { text-decoration: underline; }
/* 4.25111.47/.50: the post's database id on every landing page card, a
   quiet handle in the footer. It is a direct child of .post-footer:
   margin-right auto hugs it to the element on its left (the .post-meta
   column on queue cards, the date on recent cards) instead of letting
   space-between center it, and flex-end alignment drops it to the
   bottom of the footer so on queue cards it sits level with the
   source link, in the whitespace to the link's right. */
.post-id { font-size: 0.68rem; opacity: 0.55; color: var(--text-secondary); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; user-select: all; white-space: nowrap; }
.post-footer > .post-id { align-self: flex-end; margin-right: auto; margin-left: 0.5rem; padding-bottom: 0.05rem; }
/* 4.25111.52: where a published post went. The link sits after the id
   on recent cards, same quiet weight as the source link; the missing
   variant (no LinkedIn URN on a 'posted' row) is amber so it reads as
   a question, not as a link. */
.post-linkedin-link { font-size: 0.7rem; color: var(--accent-cyan); text-decoration: none; white-space: nowrap; margin-left: 0.5rem; }
.post-linkedin-link:hover { text-decoration: underline; }
.post-linkedin-missing { color: var(--accent-amber); opacity: 0.85; cursor: default; user-select: all; }
.post-linkedin-missing:hover { text-decoration: none; }
/* 4.25111.52: the reason under a "Not Connected" LinkedIn tile. */
.conn-reason { margin-bottom: 0.2rem; overflow-wrap: anywhere; }
/* 4.2541.2: the review summary leads with the grounded state, and
   notes read as constructive suggestions rather than an alarm. Replaces
   the old red .factual-flags box; palette matches the corroboration
   badges below. */
.review-summary {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin-top: 1rem; padding: 0.7rem 0.85rem; border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.review-summary-ok { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.25); }
.review-summary-attention { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.25); }
.review-summary-badge {
  flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; margin-top: 0.05rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700;
}
.review-summary-ok .review-summary-badge { background: rgba(16,185,129,0.18); color: var(--accent-green); }
.review-summary-attention .review-summary-badge { background: rgba(245,158,11,0.18); color: var(--accent-amber); }
.review-summary-title { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.review-summary-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; font-family: var(--font-mono); }

/* Constructive review notes, shown only when the reviewer raised one. */
.review-notes {
  margin-top: 0.75rem; padding: 0.7rem 0.85rem;
  background: var(--bg-secondary); border-radius: var(--radius-sm);
  border-left: 3px solid rgba(245,158,11,0.55);
}
.review-notes-heading { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.4rem; }
.review-note { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.2rem 0; font-size: 0.8rem; color: var(--text-secondary); line-height: 1.45; }
.review-note-mark { flex: none; color: var(--accent-amber); opacity: 0.9; }
.corroboration-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--font-mono); font-size: 0.7rem;
  padding: 0.2rem 0.3rem; border-radius: 6px; margin-left: 0.5rem;
}
.corroboration-strong { background: rgba(16,185,129,0.15); color: var(--accent-green); }
.corroboration-weak { background: rgba(245,158,11,0.15); color: var(--accent-amber); }
.corroboration-none { background: rgba(239,68,68,0.15); color: var(--accent-red); }

/* Destination badge: publish_target intent frozen at generation.
   Grey palette, inverse fills between the two destinations. */
.dest-badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  padding: 0.1rem 0.5rem; border-radius: 10px; margin-left: 0.4rem;
}
.dest-badge-org { background: #616161; color: #f5f5f5; }
.dest-badge-per { background: #e0e0e0; color: #424242; }
.research-summary { display: flex; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; }
.research-stat { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); }
.research-stat strong { color: var(--text-primary); }

/* Topic selector */
.topic-selector {
  width: 100%;
  padding: 0.25rem 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.8rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238899b0' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6.5 6 6.5-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}
.topic-selector:focus {
  outline: none;
  border-color: var(--accent-blue);
}
.topic-selector option {
  background: var(--bg-card);
  color: var(--text-primary);
}

/* Toggle switch */
.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0.75rem;
  min-width: 0;
  box-sizing: border-box;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.toggle-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.toggle-label-active { color: var(--accent-green); }
.toggle-label-inactive { color: var(--text-muted); }
.toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-switch .toggle-track {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: background 0.2s, border-color 0.2s;
}
.toggle-switch .toggle-track::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  top: 2px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.toggle-switch input:checked + .toggle-track {
  background: var(--glow-green);
  border-color: var(--accent-green);
}
.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(16px);
  background: var(--accent-green);
}
.toggle-switch.toggle-busy .toggle-track {
  background: rgba(245, 158, 11, 0.15);
  border-color: var(--accent-amber);
}
.toggle-switch.toggle-busy .toggle-track::after {
  background: var(--accent-amber);
  animation: toggle-pulse 0.8s ease-in-out infinite;
}
.toggle-switch.toggle-busy input:checked + .toggle-track {
  background: rgba(245, 158, 11, 0.15);
  border-color: var(--accent-amber);
}
.toggle-switch.toggle-busy input:checked + .toggle-track::after {
  background: var(--accent-amber);
}
@keyframes toggle-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
/* ── Auth: Login Wall ────────────────────────── */
.login-wall {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  text-align: center;
  padding: 2rem;
}
.login-wall-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.login-wall-subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 2rem;
  font-family: var(--font-mono);
}
.login-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background: var(--accent-blue);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}
.login-btn:hover {
  background: #2563eb;
}
/* ── Auth: Dev Banner ─────────────────────────── */
.dev-banner {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--accent-amber);
  font-family: var(--font-mono);
}
.dev-banner-icon { font-size: 1rem; }
/* ── Auth: User Info + Logout ─────────────────── */
.user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
}
.user-name {
  font-family: var(--font-mono);
  /* color: var(--text-secondary);
}
.header-user-info .user-name {
  font-size: 0.8125rem; */
  color: var(--accent-green);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 999px;
  padding: 0.05rem 0.875rem;
}
.header-subtitle .user-name {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.logout-btn {
  padding: 0.3rem 0.75rem;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  font-family: var(--font-mono);
}
.logout-btn:hover {
  color: var(--accent-red);
  border-color: var(--accent-red);
}

/* ================================================================
   Dashboard: Composer modal + in-post Image Studio panel.
   Relocated VERBATIM from the public_templates/index.html style
   block (3.25111.2). Values unchanged; zero visual delta. These
   surfaces are light (white modal) inside the dark dashboard, so
   the literal palette here is intentional; tokenizing it is
   tracked as separate hardcoded-value debt.
   ================================================================ */
.composer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 10000; display: flex; justify-content: center; align-items: flex-start; padding: 2rem 1rem; overflow-y: auto; }
.composer-modal { background: #fff; border-radius: 8px; width: 100%; max-width: 640px; padding: 1.5rem; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
.composer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.composer-title { font-size: 1.2rem; font-weight: 700; color: #222; margin: 0; }
.composer-close { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #666; line-height: 1; }
.composer-label { display: block; font-size: 0.78rem; font-weight: 600; color: #555; margin: 0.8rem 0 0.3rem; }
.composer-note { font-size: 0.78rem; color: #666; background: #f5f7fa; border-radius: 4px; padding: 0.5rem 0.7rem; margin: 0.5rem 0; }
.composer-genres { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; }
.composer-genre { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0.7rem; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; }
.composer-genre.selected { border-color: #2563eb; background: #eff5ff; }
.composer-genre.disabled { opacity: 0.55; cursor: not-allowed; background: #fafafa; }
.composer-genre input { margin-top: 0.2rem; }
.composer-genre-main { display: flex; flex-direction: column; gap: 0.1rem; }
.composer-genre-name { font-size: 0.85rem; font-weight: 600; color: #333; }
.composer-genre-desc { font-size: 0.76rem; color: #777; }
.composer-genre-reason { font-size: 0.72rem; color: #b45309; font-style: italic; }
.composer-model-note { font-size: 0.72rem; letter-spacing: 0.3px; color: #64748b; text-align: center; margin-top: 0.4rem; }
.composer-error { font-size: 0.8rem; color: #c62828; background: #ffebee; border-radius: 4px; padding: 0.5rem 0.7rem; margin: 0.5rem 0; }
.composer-metrics { margin: 0.6rem 0; border: 1px solid #e2e8f0; border-radius: 6px; background: #fbfdff; padding: 0.7rem 0.8rem; }
.composer-metrics-head { font-size: 0.78rem; font-weight: 700; color: #166534; margin-bottom: 0.5rem; }
.composer-metrics-warn { font-size: 0.8rem; color: #b45309; background: #fffbeb; border-radius: 4px; padding: 0.4rem 0.6rem; }
.composer-metric-group { margin-bottom: 0.5rem; }
.composer-metric-group-label { font-size: 0.74rem; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.25rem; }
.composer-metric { padding: 0.35rem 0 0.35rem 0.6rem; border-left: 2px solid #cbd5e1; margin-bottom: 0.35rem; }
.composer-metric-value { font-size: 0.88rem; font-weight: 700; color: #1e293b; }
.composer-metric-key { font-size: 0.72rem; font-weight: 400; color: #94a3b8; }
.composer-metric-source { font-size: 0.76rem; color: #475569; margin-top: 0.1rem; }
.composer-metric-quote { font-size: 0.76rem; color: #64748b; font-style: italic; margin-top: 0.15rem; line-height: 1.4; }
.composer-actions { display: flex; flex-direction: column; gap: 0.4rem; }
.composer-cancel { align-self: center; }
.composer-block { margin-top: 0.8rem; border: 1px solid #fecaca; border-radius: 6px; background: #fef2f2; overflow: hidden; }
.composer-block-head { font-size: 0.82rem; font-weight: 700; color: #b91c1c; padding: 0.6rem 0.8rem; background: #fee2e2; }
.composer-block-body { padding: 0.7rem 0.8rem; }
.composer-block-line { font-size: 0.82rem; color: #7f1d1d; margin-bottom: 0.45rem; line-height: 1.5; }
.composer-block-note { font-size: 0.76rem; color: #9a3412; background: #fff7ed; border-radius: 4px; padding: 0.45rem 0.6rem; margin-top: 0.5rem; line-height: 1.45; }
.composer-fidelity-ok { font-size: 0.8rem; font-weight: 600; color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 4px; padding: 0.45rem 0.6rem; margin-bottom: 0.6rem; }
.composer-fidelity-keys { font-size: 0.72rem; font-weight: 400; color: #4d7c5a; margin-top: 0.2rem; word-break: break-word; }
.image-studio-panel { margin-top: 0.7rem; border: 1px solid #dbe4f0; border-radius: 6px; background: #f8fbff; padding: 0.7rem 0.8rem; }
.image-studio-head { font-size: 0.82rem; font-weight: 700; color: #1e40af; margin-bottom: 0.5rem; }
.image-studio-lens-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.image-studio-lens-label { font-size: 0.78rem; color: #475569; }
.image-studio-lens { font-size: 0.82rem; border: 1px solid #cbd5e1; border-radius: 4px; padding: 0.3rem 0.4rem; background: #fff; }
.image-studio-prompt { width: 100%; box-sizing: border-box; font-size: 0.82rem; border: 1px solid #cbd5e1; border-radius: 4px; padding: 0.4rem 0.5rem; resize: vertical; }
.image-studio-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.image-studio-ok { font-size: 0.8rem; font-weight: 600; color: #15803d; }
.image-studio-error { font-size: 0.8rem; color: #c62828; background: #ffebee; border-radius: 4px; padding: 0.4rem 0.6rem; margin-top: 0.5rem; }
.image-studio-preview { display: block; max-width: 100%; margin-top: 0.6rem; border-radius: 6px; border: 1px solid #e2e8f0; }
.image-studio-lib { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.image-studio-lib-item { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 2px solid #e2e8f0; cursor: pointer; }
.image-studio-lib-item.selected { border-color: #1e40af; }
.image-studio-lib-note { font-size: 0.78rem; color: #64748b; }

/* ================================================================
   Dashboard: classes replacing inline style attributes and static
   JSX style props (relocated from index.html markup, 3.25111.2).
   Values unchanged; zero visual delta. Data-driven styles (cadence
   fill, topic badge colors, quality bars, quality pass color)
   REMAIN inline in the template by design: they are computed from
   runtime data and cannot be static CSS.
   ================================================================ */

/* Blocking overlays (generate-overlay, keygate-overlay). JS shows
   and hides these by writing element.style.display; the class only
   carries the resting state and the shared look. */
.overlay-backdrop { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 9999; justify-content: center; align-items: center; }
.overlay-card { background: #fff; border-radius: 8px; padding: 2rem 3rem; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.3); max-width: 400px; }
.overlay-spinner-row { margin-bottom: 1rem; }
.overlay-spinner { width: 40px; height: 40px; border: 3px solid #e0e0e0; border-top-color: #0073b1; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto; }
.overlay-title { font-size: 1.1rem; font-weight: 600; color: #333; margin-bottom: 0.5rem; }
.overlay-sub { font-size: 0.85rem; color: #888; }
.overlay-fine { font-size: 0.75rem; color: #aaa; margin-top: 1rem; }

/* Subscription banners (card modifiers) */
.banner-past-due { background: #fffbe8; border: 2px solid #8a6d00; color: #8a6d00; font-weight: 700; padding: 0.75rem; margin-bottom: 1rem; }
.banner-read-only { background: #fff8f2; border: 2px solid #e65100; color: #e65100; font-weight: 700; padding: 0.75rem; margin-bottom: 1rem; }

/* Paywall and no-tenant panels */
.card-center-narrow { max-width: 640px; margin: 2rem auto; text-align: center; }
.card-center-narrow h2 { margin-bottom: 0.5rem; }
.no-tenant-copy { max-width: 32rem; margin: 0 auto; }
.no-tenant-actions { margin-top: 1rem; }
.self-serve-msg { max-width: 32rem; margin: 0.75rem auto 0; color: #e65100; }

/* Quick Actions */
.hstack-sm { display: flex; gap: 0.5rem; }
.btn-grow { flex: 1; }
.btn-force-cycle { width: 100%; padding: 0.25rem; margin-top: 0.25rem; border: 1px solid var(--border); }
.btn-force-cycle:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* LinkedIn stat card publish-target switch */
.btn-link { margin-left: 0.4rem; background: none; border: none; padding: 0; cursor: pointer; font: inherit; }

/* Post detail modal */
.status-scheduled-sky { background: rgba(56,189,248,0.18); color: #38bdf8; }
.schedule-banner { margin: 0.5rem 0; padding: 0.55rem 0.75rem; border-radius: 6px; background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.35); font-size: 0.88rem; }
/* 4.25111.45: failed post surfaces. The banner sits in the detail modal
   beside the schedule banner; the reason line sits on the queue card.
   Both carry the stored publish failure text, which the dashboard never
   showed before. */
.fail-banner { margin: 0.5rem 0; padding: 0.55rem 0.75rem; border-radius: 6px; background: var(--glow-red); border: 1px solid var(--accent-red); color: var(--text-primary); font-size: 0.88rem; overflow-wrap: anywhere; }
.post-fail-reason { margin: 0.35rem 0 0.1rem; font-size: 0.78rem; color: var(--accent-red); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-rewrite { margin: 0.75rem 0; }
/* 4.2541.9: .modal-move and .modal-move-label removed as dead rules. The move
   section's actions were combined into .modal-rewrite and its "Move this post
   to" label was dropped, so nothing referenced either class. .modal-move-row
   stays, it is the flex row still used by the rewrite action row. */
.modal-move-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.schedule-picker { margin-top: 0.6rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.schedule-picker input[type="datetime-local"] { padding: 0.35rem 0.5rem; }
.schedule-picker-note { font-size: 0.78rem; opacity: 0.7; width: 100%; }
.modal-content.modal-narrow { max-width: 600px; }

/* In-post Image Studio panel detach spacing */
.image-studio-ok .btn { margin-left: 8px; }

/* ErrorBoundary fallback */
.error-boundary-fallback { padding: 2rem; text-align: center; }