/* =========================================================
   Car Dealer Post Generator – Dark Theme
   ========================================================= */

/* ---- Global keyboard focus ring (a11y) — a visible outline for keyboard users
   only; mouse/touch focus is unaffected. Element-specific `:focus{outline:none}`
   rules that already provide their own focus indicator still override this. ---- */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* ---- Body scroll lock when a modal/popover is open ---- */
body.modal-open {
  overflow: hidden;
  overscroll-behavior: contain;
}

/* ---- Unified modal backdrop look (excludes .auth-overlay,
   which is a full-screen login view with its own near-opaque bg) ---- */
.csp-backdrop,
.sp-backdrop,
.sched-modal-backdrop,
.inv-detail-overlay,
.review-modal-backdrop,
.v-modal-overlay {
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ---- AUTH OVERLAY ---- */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 11, 18, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(6px);
}
/* Auth warm-start (see inline head script): a persisted session pre-hides the
   login overlay before first paint. app.js re-shows it via inline style if the
   token is actually invalid — inline style wins over this rule, so it self-corrects. */
html.has-session .auth-overlay { display: none; }

.auth-box {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.auth-logo {
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.25rem;
}

.auth-tabs {
  display: flex;
  gap: 0.5rem;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  padding: 4px;
}

.auth-tab {
  flex: 1;
  padding: 0.5rem;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.auth-tab.active {
  background: var(--accent);
  color: #fff;
}

.auth-error {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger-text);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
}

.auth-switch {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.auth-switch a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.auth-switch a:hover { opacity: 0.8; }

.btn-sm { font-size: 0.85rem; padding: 0.4rem 0.9rem; }

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

:root {
  --bg-base:       #0f1117;
  --bg-panel:      #1a1d27;
  --bg-panel-alt:  #20243a;
  --bg-input:      #252840;
  --border:        #2e3350;
  --border-focus:  #5b6aff;
  --accent:        #5b6aff;
  --accent-hover:  #7280ff;
  --accent-glow:   rgba(91,106,255,0.35);
  --green:         #22c55e;
  --green-hover:   #16a34a;
  --red:           #ef4444;
  --orange:        #f97316;
  --text-primary:  #f0f2ff;
  --text-muted:    #8892b0;
  --text-dim:      #4a5270;
  --radius:        12px;
  --radius-sm:     8px;
  --shadow:        0 4px 24px rgba(0,0,0,0.5);
  --shadow-lg:     0 8px 40px rgba(0,0,0,0.6);
  --transition:    0.2s ease;

  /* Global warning / diagnosis callout scheme — single source of truth,
     derived from --orange so it auto-themes (gold in light, orange in dark).
     Used by Action Center (.ac-callout) and Inventory (.mp-alert.over).
     Any new warning element should reference these, not hard-coded hexes. */
  --warn-bg:      color-mix(in srgb, var(--orange) 12%, var(--bg-panel));
  --warn-border:  color-mix(in srgb, var(--orange) 35%, var(--bg-panel));
  --warn-icon:    var(--orange);
  --warn-text:    color-mix(in srgb, var(--orange) 65%, var(--text-primary));
  /* Translucent warning tints — for full-width banners that sit on the page bg
     (the panel-opaque --warn-* above are for cards/callouts). */
  --warn-bg-soft:     color-mix(in srgb, var(--orange) 11%, transparent);
  --warn-border-soft: color-mix(in srgb, var(--orange) 26%, transparent);
  --warn-bg-hov:      color-mix(in srgb, var(--orange) 17%, transparent);

  /* Global error / danger scheme — derived from --red so it auto-themes (warm
     red in light, brighter red in dark). Translucent so it reads on any bg.
     Any error banner/message should reference these, not hard-coded hexes. */
  --danger-bg:      color-mix(in srgb, var(--red) 12%, transparent);
  --danger-border:  color-mix(in srgb, var(--red) 30%, transparent);
  --danger-bg-hov:  color-mix(in srgb, var(--red) 18%, transparent);
  --danger-text:    var(--red);
}

html { font-size: 15px; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
}

/* ---- TYPOGRAPHY SCALE ----
   Reusable type tiers. Mirrors docs/typography.md — use these instead of
   re-declaring font-size/weight per component. Core rule: content titles are
   always weight 700; controls (buttons, nav) are 600. Sizes in rem. */
.t-title {            /* page / panel title */
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}
.t-section {          /* section heading inside a panel */
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
}
.t-item {             /* item / card / list-row title (e.g. a vehicle name) */
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}
.t-eyebrow {          /* eyebrow / mini-label: KPI labels, table headers */
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.t-value {            /* display value: KPI numbers, counts, prices */
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}
.t-body {             /* body copy */
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-primary);
}
.t-meta {             /* meta / sub-line, lower priority */
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}
/* Compact contexts (sidebars, dense lists) drop one size but keep the weight. */
.t-compact .t-title  { font-size: 0.95rem; }
.t-compact .t-item   { font-size: 0.75rem; }
.t-compact .t-value  { font-size: 0.95rem; }

/* ---- HEADER ---- */
header {
  background: linear-gradient(135deg, #141728 0%, #1e2140 50%, #141728 100%);
  border-bottom: 1px solid var(--border);
  /* Explicit pixel height so the sticky nav below can align exactly
     (was padding: 1.25rem 0, which rendered as ~71px — a 1px mismatch
     with the nav's `top` caused a visible scroll jump). */
  height: 90px;
  position: sticky;
  top: 0;
  z-index: 60;
  overflow: hidden;
}

header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(91,106,255,0.06), transparent);
  pointer-events: none;
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.logo-text  { color: var(--text-primary); }
.logo-accent { color: var(--accent); }

.header-tagline {
  color: var(--text-muted);
  font-size: 0.9rem;
  border-left: 2px solid var(--border);
  padding-left: 1.5rem;
}

/* ---- MAIN NAV TABS ---- */
.main-nav {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  /* Must exactly match header height — see header rule above. */
  top: 90px;
  z-index: 50;
}

.main-nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  gap: 0;
}

.main-nav-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.main-nav-tab:hover {
  color: var(--text-primary);
}

.main-nav-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.main-nav-tab--right {
  margin-left: auto;
}

.stale-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 0.4em;
  margin-left: 0.5rem;
  background: var(--red);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 999px;
  line-height: 1;
}

/* ---- MAIN ---- */
main {
  flex: 1;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: 1.5rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ---- TOP GRID ---- */
.top-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* ---- PANELS ---- */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  position: relative;
}

.panel-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.panel-icon { font-size: 1.1rem; }

/* ── Ready to Review (auto-drafted posts) ─────────────────────────
   Gold-accented "assistant" surface, pinned above Step 1. */
.review-panel {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow), var(--shadow);
  transition: opacity 0.8s ease;
}
.review-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--accent); color: #1a1a18;
  font-size: 0.78rem; font-weight: 700; border-radius: 10px;
}
/* Approve all: reuse the Generate-button shimmer, sized down for the header */
.review-approve-wrap {
  margin-left: auto;
  align-self: center;
  border-radius: 9px;
  /* gold spinning border in both themes (overrides the purple dark-mode default) */
  background: conic-gradient(from var(--shimmer-angle, 0deg),
    #d4af6a, #f3da92, #c9a96e, #e8c77e, #d4af6a);
}
.review-approve-wrap .btn-generate-shimmer {
  width: auto;
  font-size: 0.9rem; /* a touch smaller than the "Ready to Review" heading */
  color: var(--text-primary);
  background: var(--bg-panel); /* white fill, like the Generate button */
}
.review-sub {
  margin: -0.75rem 0 1rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ── Suggested Posts activation prompt (state B) ─────────────────────────── */
#review-activation-state { position: relative; }
.sp-activation-eyebrow {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent); margin-bottom: 0.5rem;
}
.sp-activation-headline { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.4rem; }
.sp-activation-sub {
  color: var(--text-muted); font-size: 0.85rem; line-height: 1.55; max-width: 60ch; margin-bottom: 1.1rem;
}
/* Preview reads like a mini Facebook post: photo strip on top, full caption below */
.sp-activation-preview {
  background: var(--bg-panel-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.8rem; margin-bottom: 1.2rem;
}
.sp-activation-preview-label {
  font-size: 0.72rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.55rem;
}
.sp-activation-strip { display: flex; gap: 0.4rem; margin-bottom: 0.8rem; }
.sp-activation-cell {
  position: relative; flex: 1 1 0; height: 104px; min-width: 0;
  border-radius: 6px; overflow: hidden; background: var(--bg-input);
}
.sp-activation-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-activation-more::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.sp-activation-more span {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 0.95rem;
}
.sp-activation-preview-copy {
  font-size: 0.85rem; line-height: 1.55; color: var(--text-primary); white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-activation-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.sp-activation-actions .btn-primary { width: auto; }
.sp-activation-reassure { margin-top: 0.8rem; font-size: 0.74rem; color: var(--text-muted); }

/* ── Auto-publish promo nudge (earned-trust banner in Ready to Review) ─────── */
.ap-nudge {
  position: relative; overflow: hidden;
  margin: 1.4rem 0 0.4rem;
  display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap;
  background: linear-gradient(120deg, #FBF3E3 0%, #F7EBD4 55%, #F4E7CC 100%);
  border: 1px solid #E4C98F; border-radius: 16px; padding: 22px 24px;
}
.ap-nudge-glow {
  position: absolute; top: -40px; right: 120px; width: 180px; height: 180px;
  border-radius: 50%; background: rgba(168,132,58,.08); pointer-events: none;
}
.ap-nudge-left { display: flex; align-items: center; gap: 16px; flex: 1 1 320px; min-width: 0; position: relative; }
.ap-nudge-icon {
  width: 46px; height: 46px; border-radius: 13px; background: #A8843A; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px -4px rgba(168,132,58,.6);
}
.ap-nudge-copy { min-width: 0; }
.ap-nudge-head { font: 800 17px system-ui; letter-spacing: -.2px; color: #6E5310; }
.ap-nudge-body { font: 500 13.5px system-ui; color: #7A6437; line-height: 1.5; margin-top: 5px; max-width: 560px; }
.ap-nudge-stats { display: flex; gap: 12px; flex-shrink: 0; position: relative; }
.ap-nudge-stat {
  background: rgba(255,255,255,.65); border: 1px solid #EAD9B4; border-radius: 12px;
  padding: 12px 16px; text-align: center; min-width: 92px;
}
.ap-nudge-stat-n { font: 800 22px system-ui; letter-spacing: -.5px; color: #6E5310; }
.ap-nudge-stat-l { font: 500 10.5px system-ui; color: #9a7f4a; margin-top: 2px; }
.ap-nudge-cta { display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex-shrink: 0; position: relative; }
.ap-nudge-on {
  background: #A8843A; border: none; border-radius: 11px; color: #fff;
  font: 700 14.5px system-ui; padding: 14px 26px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 8px 20px -6px rgba(168,132,58,.55);
}
.ap-nudge-on:hover { background: #997836; }
.ap-nudge-not { background: none; border: none; color: #9a7f4a; font: 600 12.5px system-ui; cursor: pointer; padding: 2px; }
.ap-nudge-not:hover { color: #7A6437; }

/* ── Auto-published Summary digest + shared row styles ────────────────────── */
.ap-summary { background: var(--bg-panel, #fff); border: 1px solid var(--border, #E6E0D4); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 3px rgba(26,26,24,.05); margin-bottom: 1.4rem; }
.ap-summary-head, .ap-archive-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--border, #EFEAE0); }
.ap-summary-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ap-summary-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(42,122,79,.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ap-title-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ap-summary-title, .ap-archive-title { font: 800 20px system-ui; letter-spacing: -.3px; color: var(--text-primary, #1A1A18); }
.ap-archive-title { font-size: 18px; }
.ap-on-pill { display: inline-flex; align-items: center; gap: 5px; font: 600 11px system-ui; color: #2A7A4F; background: rgba(42,122,79,.12); border-radius: 20px; padding: 3px 11px; }
.ap-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.ap-summary-sub { font: 500 12.5px system-ui; color: var(--text-muted, #888); margin-top: 3px; }
.ap-summary-head-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ap-archive-total { font: 500 12px system-ui; color: var(--text-muted, #9a937f); }
.ap-manage { font: 600 13px system-ui; color: var(--text-muted, #6B6B64); background: var(--bg-panel, #fff); border: 1px solid var(--border, #DDD8CE); border-radius: 9px; padding: 8px 15px; cursor: pointer; text-decoration: none; }
.ap-manage:hover { border-color: var(--accent, #A8843A); color: var(--accent, #A8843A); }
.ap-x { width: 38px; height: 38px; border-radius: 9px; background: var(--bg-panel, #fff); border: 1px solid var(--border, #DDD8CE); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.ap-x:hover { background: var(--bg-input, #F5F1E9); }

.ap-list { padding: 6px 0; }
.ap-day { display: flex; align-items: center; gap: 10px; padding: 14px 24px 8px; }
.ap-day-label { font: 700 11px system-ui; letter-spacing: .06em; text-transform: uppercase; color: #9a937f; }
.ap-day-count { font: 500 11px system-ui; color: #C2B79E; }
.ap-day-rule { flex: 1; height: 1px; background: #F0EBE0; }
.ap-row { display: grid; grid-template-columns: 44px minmax(0,1fr) auto auto auto auto; align-items: center; gap: 16px; padding: 11px 24px; border-top: 1px solid #F5F1E9; }
.ap-thumb { width: 44px; height: 34px; border-radius: 7px; background: #F1ECE1; display: flex; align-items: center; justify-content: center; }
.ap-row-main { min-width: 0; }
.ap-row-title { font: 700 13.5px system-ui; color: var(--text-primary, #1A1A18); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-row-sub { font: 500 11px system-ui; color: #9a937f; margin-top: 2px; }
.ap-row-chan { display: flex; align-items: center; gap: 7px; font: 500 12px system-ui; color: #6B6B64; }
.ap-row-time { font: 500 12px system-ui; color: #888; white-space: nowrap; }
.ap-live { display: inline-flex; align-items: center; gap: 5px; font: 600 11px system-ui; color: #2A7A4F; white-space: nowrap; }
.ap-view { font: 600 12px system-ui; color: var(--accent, #A8843A); text-decoration: none; justify-self: end; }
.ap-view[aria-disabled="true"] { color: #C2B79E; pointer-events: none; }
.ap-view:hover { text-decoration: underline; }
.ap-summary-foot { display: flex; justify-content: flex-end; padding: 15px 24px; border-top: 1px solid var(--border, #EFEAE0); background: var(--bg-panel-alt, #FAF8F3); }
.ap-seeall { font: 600 13px system-ui; color: var(--accent, #A8843A); text-decoration: none; }
.ap-seeall:hover { text-decoration: underline; }

/* ── Archive modal (centered dialog on desktop, bottom-sheet on mobile) ────── */
.ap-archive-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(26,23,18,.52); display: flex; align-items: center; justify-content: center; }
.ap-archive { width: 940px; max-width: 94vw; max-height: 86vh; background: #fff; border: 1px solid #E6E0D4; border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 40px 90px -20px rgba(26,23,18,.5); }
.ap-archive-grip { display: none; }
.ap-archive-search { padding: 14px 24px; border-bottom: 1px solid #F0EBE0; }
.ap-archive-search input { width: 100%; box-sizing: border-box; background: #F7F4EE; border: 1px solid #E4DDCF; border-radius: 10px; padding: 11px 14px; font: 500 13px system-ui; color: #1A1A18; }
.ap-archive-search input:focus { outline: none; border-color: #A8843A; }
.ap-archive-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 0; }
.ap-archive-loading, .ap-archive-empty { padding: 40px 24px; text-align: center; font: 500 13px system-ui; color: #9a937f; }
.ap-archive-foot { display: flex; align-items: center; justify-content: center; padding: 14px 24px; border-top: 1px solid #EFEAE0; background: #FAF8F3; }
.ap-loadmore { background: #fff; border: 1px solid #DDD8CE; border-radius: 10px; color: #6B6B64; font: 600 13px system-ui; padding: 11px 22px; cursor: pointer; }
.ap-loadmore:hover { border-color: #A8843A; color: #A8843A; }
.ap-archive-allshown { font: 500 12px system-ui; color: #9a937f; }

/* On phones the row drops the channel/time/status columns for a compact read. */
@media (max-width: 600px) {
  .ap-row { grid-template-columns: 44px minmax(0,1fr) auto; gap: 12px; padding: 11px 16px; }
  .ap-row-chan, .ap-row-time, .ap-row-status { display: none; }
  .ap-day { padding: 14px 16px 8px; }
  .ap-summary-head, .ap-archive-head, .ap-archive-search, .ap-summary-foot, .ap-archive-foot { padding-left: 16px; padding-right: 16px; }
  .ap-manage { display: none; }
  .ap-summary-title, .ap-archive-title { font-size: 17px; }

  /* Bottom sheet */
  .ap-archive-overlay { align-items: flex-end; background: rgba(26,23,18,.55); }
  .ap-archive { width: 100%; max-width: 100%; max-height: 88vh; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .ap-archive-grip { display: block; width: 40px; height: 4px; border-radius: 3px; background: #DDD6C8; margin: 10px auto 2px; }
}
.sp-activation-dismiss {
  position: absolute; top: 0; right: 0;
  width: 28px; height: 28px; border: 0; background: transparent;
  color: var(--text-muted); font-size: 1rem; cursor: pointer; border-radius: 6px; line-height: 1;
}
.sp-activation-dismiss:hover { background: var(--bg-input); color: var(--text-primary); }
@media (max-width: 560px) {
  .sp-activation-cell { height: 76px; }
}
/* Collection-view grid of post tiles — 4 across, fewer on narrow screens */
.review-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
}
@media (max-width: 1000px) { .review-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .review-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .review-list { grid-template-columns: 1fr; } }
.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-panel-alt);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.review-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.review-card-thumb {
  width: 100%; height: 128px;
  object-fit: cover; display: block;
  background: var(--bg-input);
}
.review-card-body { padding: 0.7rem 0.8rem 0.8rem; }
.review-card-title {
  font-size: 0.92rem; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
  /* wrap to 2 lines so longer vehicle names fit comfortably in the tile */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-card-meta {
  font-size: 0.78rem; color: var(--text-muted);
  margin-bottom: 0.4rem;
}
/* Holiday-post drafts get a small festive pill so they stand out in the list. */
.review-card-holiday {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  margin-bottom: 0.35rem;
}
.review-card-chans { display: flex; align-items: center; margin-bottom: 0.45rem; }
.review-card-chans .ph-shared { margin-left: 0; }
.review-card-copy {
  font-size: 0.83rem; color: var(--text-primary); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.7em; /* ~3 lines so tiles align even with short captions */
}
.review-card-actions {
  display: flex; gap: 0.4rem; align-items: center;
  margin-top: 0.7rem;
}
.review-card-actions .btn { font-size: 0.8rem; }
.review-card-actions .btn-primary { flex: 1; } /* Approve is the primary action */
.review-scheduled-note {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--green);
}
/* Dismiss: corner X over the photo, collection-view style */
.review-dismiss {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); color: #fff;
  border: none; border-radius: 50%;
  cursor: pointer; font-size: 0.85rem; line-height: 1;
  transition: background var(--transition);
}
.review-dismiss:hover { background: var(--red); }

/* Approve/dismiss exit (staged fade → height-collapse → FLIP slide-up) is driven
   entirely from JS in animateRemoveCard(); only the scheduled tint is CSS. */
.review-card--scheduled { border-color: var(--green); }

/* Cards open a full preview on click (everywhere except the action buttons /
   dismiss X, which stop propagation in JS). */
.review-card { cursor: pointer; }

/* ── Ready-to-Review preview modal ──────────────────────────────
   Click a draft card → full caption + photos + Approve/Edit. Built
   dynamically in app.js (openDraftModal). Mirrors the style-picker
   modal shell so it feels native. */
.review-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.review-modal {
  width: min(620px, 96vw);
  max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}
.review-modal-header {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.3rem 0.9rem;
  border-bottom: 1px solid var(--border);
}
.review-modal-title {
  font-size: 1.05rem; font-weight: 700; color: var(--text-primary);
  margin: 0; min-width: 0;
}
.review-modal-close {
  flex: none;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 1rem; line-height: 1; cursor: pointer;
  padding: 0.3rem 0.45rem; border-radius: 6px;
  transition: background var(--transition);
}
.review-modal-close:hover { background: var(--border); }
.review-modal-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 1.1rem 1.3rem;
}
.review-modal-hero {
  width: 100%; max-height: 320px; object-fit: cover;
  display: block; border-radius: 12px;
  background: var(--bg-input);
}
.review-modal-strip {
  display: flex; gap: 0.4rem; margin-top: 0.5rem;
  overflow-x: auto; padding-bottom: 0.2rem;
}
.review-modal-thumb {
  width: 56px; height: 42px; flex: none;
  object-fit: cover; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-input);
  transition: border-color var(--transition);
}
.review-modal-thumb:hover { border-color: var(--accent); }
.review-modal-meta {
  font-size: 0.82rem; color: var(--text-muted);
  margin-top: 0.9rem;
}
.review-modal-copy {
  font-size: 0.92rem; line-height: 1.55; color: var(--text-primary);
  white-space: pre-wrap; word-break: break-word;
  margin-top: 0.7rem;
}
.review-modal-actions {
  flex: none;
  display: flex; gap: 0.5rem;
  padding: 0.9rem 1.3rem;
  border-top: 1px solid var(--border);
}
.review-modal-actions .btn-primary { flex: 1; }

/* ---- FORM ---- */
.form-group {
  margin-bottom: 1.1rem;
}

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.45rem;
}

.form-group input[type="checkbox"] {
  width: auto;
  appearance: auto;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.form-group input:not([type="checkbox"]),
.form-group select {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 0.65rem 0.9rem;
  font-size: 0.95rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  appearance: none;
}

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238892b0' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.2rem;
}

.form-group input:not([type="checkbox"]):focus,
.form-group select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-group input:not([type="checkbox"])::placeholder {
  color: var(--text-dim);
}

.url-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.url-input-row input {
  flex: 1;
  min-width: 0;
}

.scrape-photos-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.45rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.scrape-photos-label input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}

.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: 0 0 18px var(--accent-glow);
}

.btn-secondary {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--bg-panel-alt);
  border-color: var(--accent);
}

.btn-accent {
  background: var(--accent);
  color: #fff;
}
.btn-accent:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: 0 0 18px var(--accent-glow);
}

.btn-success {
  background: var(--green);
  color: #fff;
}
.btn-success:hover:not(:disabled) {
  background: var(--green-hover);
}

.btn-facebook {
  background: #1877F2;
  color: #fff;
}
.btn-facebook:hover:not(:disabled) {
  background: #0e63d0;
  box-shadow: 0 0 14px rgba(24, 119, 242, 0.45);
}

/* Post to Marketplace — outlined Facebook blue; fills blue with white text on
   hover for legibility. Class-based so :hover works without inline overrides. */
.mp-mktpl-btn {
  background: #fff;
  color: #1877F2;
  border: 1px solid #1877F2;
  transition: background var(--transition), color var(--transition);
}
.mp-mktpl-btn:hover:not(:disabled) {
  background: #1877F2;
  color: #fff;
}

/* ── FB publish animation ──
   Click → shimmer sweep + "Publishing" with pulsing dots. Network call runs
   in parallel with a 900ms minimum so the animation never feels rushed. On
   success → green pulse, checkmark draws in, particle burst. Reverts after 2s. */
.btn-fb-publishing {
  position: relative;
  overflow: hidden;
  pointer-events: none;
  background: #1877F2;
}
.btn-fb-publishing::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -100%;
  width: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%);
  animation: fb-shimmer 1.1s linear infinite;
  pointer-events: none;
}
@keyframes fb-shimmer {
  0%   { left: -100%; }
  100% { left: 100%; }
}
.fb-publishing-text {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  position: relative;
  z-index: 1;
}
.fb-publishing-dots {
  display: inline-flex;
  gap: 3px;
  margin-left: 2px;
}
.fb-publishing-dots i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: fb-dot 0.9s ease-in-out infinite;
}
.fb-publishing-dots i:nth-child(2) { animation-delay: 0.15s; }
.fb-publishing-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes fb-dot {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40%            { opacity: 1;    transform: scale(1.3); }
}

.btn-fb-posted {
  background: #22c55e !important;
  color: #fff !important;
  position: relative;
  overflow: visible;
  animation: fb-success-pulse 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes fb-success-pulse {
  0%   { transform: scale(0.94); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  50%  { transform: scale(1.06); box-shadow: 0 0 0 18px rgba(34, 197, 94, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.fb-check-svg {
  width: 1.05em; height: 1.05em;
  vertical-align: -0.18em;
  margin-right: 0.25em;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: fb-check-draw 0.45s ease-out 0.05s forwards;
}
@keyframes fb-check-draw {
  to { stroke-dashoffset: 0; }
}

.fb-particle {
  position: absolute;
  top: 50%; left: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: fb-particle-fly 0.9s ease-out forwards;
}
@keyframes fb-particle-fly {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  85%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3); }
}

.btn-instagram {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  border: none;
}
.btn-instagram:hover:not(:disabled) {
  filter: brightness(1.1);
  box-shadow: 0 0 14px rgba(220, 39, 67, 0.45);
}

.share-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

.btn-icon-only {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 0.4rem 0.7rem;
  font-size: 1rem;
}
.btn-icon-only:hover:not(:disabled) {
  background: var(--bg-panel-alt);
  border-color: var(--accent);
}

.btn-large {
  width: 100%;
  justify-content: center;
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
  margin-top: 0.5rem;
  letter-spacing: 0.03em;
  box-shadow: 0 0 20px var(--accent-glow);
}

/* ---- ERROR ---- */
.error-msg {
  margin-top: 0.75rem;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-sm);
  color: var(--danger-text);
  padding: 0.6rem 0.9rem;
  font-size: 0.875rem;
}

/* ---- PHOTO EDITOR ---- */
.editor-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.top-toolbar {
  justify-content: space-between;
}

.img-text-style-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition);
  max-width: 160px;
}

.img-text-style-select:focus {
  border-color: var(--border-focus);
}

.photo-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.75rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

#photo-counter {
  min-width: 40px;
  text-align: center;
  font-weight: 600;
  color: var(--text-primary);
}

.canvas-wrapper {
  position: relative;
  background: #0a0c14;
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.canvas-wrapper.drag-over {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.canvas-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--text-dim);
  pointer-events: none;
  user-select: none;
}

.placeholder-icon {
  opacity: 0.4;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.canvas-placeholder p { font-size: 0.85rem; margin: 0; }
.placeholder-upload-btn {
  pointer-events: auto;
  position: relative;
  z-index: 10;
  margin-top: 0.25rem;
  cursor: pointer;
}

.photo-spinner {
  display: none;
  width: 1.4rem;
  height: 1.4rem;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  flex-shrink: 0;
}
.photo-spinner.active { display: inline-block; }

.thumb-strip {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 6px;
  background: var(--surface);
  border-radius: 8px;
  max-height: 160px;
  overflow-y: auto;
}
.thumb-strip img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0;
  transition: opacity 0.2s, border-color 0.15s;
  background: linear-gradient(90deg, var(--border) 25%, var(--bg-panel-alt, var(--bg-input)) 50%, var(--border) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.4s infinite linear;
}
.thumb-strip img.loaded        { opacity: 0.7; animation: none; background: none; }
.thumb-strip img.loaded:hover  { opacity: 1; }
.thumb-strip img.loaded.active { border-color: var(--accent); opacity: 1; }

.thumb-item {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  cursor: grab;
}
.thumb-item:active { cursor: grabbing; }
/* SortableJS drag states */
.thumb-item.sortable-chosen img { border-color: var(--accent); opacity: 1; }
.thumb-item.sortable-ghost       { opacity: 0.35; }
.thumb-item.sortable-drag        { cursor: grabbing; }
.thumb-delete-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}
.thumb-item:hover .thumb-delete-btn { display: flex; }
.thumb-delete-btn:hover { background: #c0392b; }

#photo-canvas {
  display: block;
  max-width: 100%;
}

.text-input-overlay {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 0.6rem 0.9rem;
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition);
  min-width: 0;
}
.text-input-overlay:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.text-input-overlay::placeholder { color: var(--text-dim); }

.style-toolbar {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.control-group select {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
  appearance: none;
  padding-right: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238892b0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
}

.color-picker {
  width: 36px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  cursor: pointer;
  background: var(--bg-panel);
}

/* ---- LANGUAGE TABS ---- */
.lang-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.lang-tab {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  padding: 0.45rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.lang-tab:hover:not(.active) {
  background: var(--bg-panel-alt);
  border-color: var(--accent);
  color: var(--text-primary);
}

.lang-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---- POST SECTION ---- */
.post-panel {
  width: 100%;
}

.post-placeholder {
  background: var(--bg-input);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.post-placeholder strong { color: var(--accent); }

#post-text,
#post-text-es {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 1rem;
  font-size: 0.95rem;
  line-height: 1.7;
  resize: vertical;
  outline: none;
  font-family: inherit;
  transition: border-color var(--transition);
}
#post-text:focus,
#post-text-es:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.post-actions {
  margin-top: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.copy-confirm {
  font-size: 0.875rem;
  color: var(--green);
  font-weight: 600;
  animation: fadeIn 0.2s ease;
}

.char-counter {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: right;
  margin-top: 0.25rem;
}
.char-counter--warn { color: var(--orange); }
.char-counter--over { color: var(--red); font-weight: 600; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- LOADING ---- */
.form-loading-overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: rgba(10, 12, 20, 0.75);
  backdrop-filter: blur(3px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--text-muted);
  z-index: 10;
  animation: fadeIn 0.15s ease;
}

.form-loading-overlay p {
  font-size: 0.9rem;
  font-weight: 500;
}

.post-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem;
  color: var(--text-muted);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.dots::after {
  content: '';
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
}

/* ---- TRIAL BANNER ---- */
.trial-banner {
  width: 100%;
  border-bottom: 1px solid transparent;
  font-size: 0.85rem;
  font-weight: 500;
}
.trial-banner--warning {
  background: var(--warn-bg-soft);
  border-bottom-color: var(--warn-border-soft);
  color: var(--orange);
}
.trial-banner--expired {
  background: var(--danger-bg);
  border-bottom-color: var(--danger-border);
  color: var(--red);
}
.trial-banner-inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: 0.6rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.trial-banner .trial-subscribe-btn {
  flex-shrink: 0;
  padding: 0.3rem 0.85rem;
  border-radius: 6px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.trial-banner--warning .trial-subscribe-btn:hover { background: var(--warn-bg-hov); }
.trial-banner--expired  .trial-subscribe-btn:hover { background: var(--danger-bg-hov); }

/* ---- DEPENDENCY-HEALTH BANNER ----
   Calm "we're on it" notice shown when an external service we depend on is
   degraded (see lib/depHealth.js + /api/health). Uses the global --warn-*
   scheme so it auto-themes gold (light) / orange (dark). */
.dep-banner {
  width: 100%;
  background: var(--warn-bg);
  border-bottom: 1px solid var(--warn-border);
  color: var(--warn-text);
  font-size: 0.85rem;
  font-weight: 500;
}
.dep-banner-inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: 0.6rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.dep-banner-icon { flex-shrink: 0; color: var(--warn-icon); }
.dep-banner-text { flex: 1; }
.dep-banner-dismiss {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  padding: 0 0.25rem;
}
.dep-banner-dismiss:hover { opacity: 1; }

/* ---- FOOTER ---- */
footer {
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.8rem;
}
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
footer .footer-links-inline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
}
footer .footer-links-inline a:not(.footer-support) {
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.15s;
}
footer .footer-links-inline a:not(.footer-support):hover {
  color: var(--text);
}
footer .footer-links-inline .footer-sep {
  color: var(--text-dim);
  opacity: 0.5;
}
footer a.footer-support {
  color: #fff;
  text-decoration: none;
  font-size: 0.8rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 6px;
  transition: border-color 0.15s, background 0.15s;
  margin-left: 0.5rem;
}
footer a.footer-support:hover {
  border-color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.07);
}
[data-theme="light"] footer a.footer-support {
  color: var(--text-muted);
  border-color: var(--border);
}
[data-theme="light"] footer a.footer-support:hover {
  border-color: var(--text-muted);
  background: transparent;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .top-grid {
    grid-template-columns: 1fr;
  }

  .header-tagline {
    display: none;
  }
}

@media (max-width: 600px) {
  main { padding: 1rem; }
  .style-toolbar { flex-wrap: wrap; gap: 0.5rem; }

  /* ---- Shared chrome on phones: compact header + swipeable nav ----
     The header shrinks 90px -> 64px to reclaim vertical space; the nav's
     sticky `top` MUST track it (see header/.main-nav comments above) or the
     scroll jump returns. */
  header { height: 64px; }
  .header-inner { padding: 0 1rem; gap: 1rem; }
  .header-logo { font-size: 1.3rem; }
  .header-actions { gap: 0.4rem !important; }

  .main-nav { top: 64px; }
  /* Tabs stay in one row and scroll sideways — no hamburger, no JS. */
  .main-nav-inner {
    padding: 0 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
  }
  .main-nav-inner::-webkit-scrollbar { display: none; }  /* WebKit */
  .main-nav-tab {
    padding: 0.7rem 0.85rem;
    font-size: 0.85rem;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  /* Right-aligned tab sits inline in the scroll row instead of pushing a gap. */
  .main-nav-tab--right { margin-left: 0; }
}

/* ---- CUSTOM STYLE SAVE UI ---- */
.form-group textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 0.65rem 0.9rem;
  font-size: 0.95rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}
.form-group textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-group textarea::placeholder { color: var(--text-dim); }

.style-save-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.style-save-row input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  outline: none;
  transition: border-color var(--transition);
}
.style-save-row input:focus { border-color: var(--border-focus); }
.style-save-row input::placeholder { color: var(--text-dim); }

.saved-styles-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  align-items: center;
}
.saved-styles-row select {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  outline: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238892b0' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

/* ---- POST HISTORY ---- */
.history-panel { width: 100%; }

.history-status-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.history-status-tab {
  padding: 0.4rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.history-status-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.history-status-tab:not(.active):hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

.btn-sold {
  background: rgba(34,197,94,0.12);
  color: #86efac;
  border: 1px solid rgba(34,197,94,0.3);
  margin-left: auto;
}

.btn-sold:hover:not(:disabled) {
  background: rgba(34,197,94,0.22);
  border-color: #22c55e;
}

.history-copy-link,
.history-sold-link,
.history-delete-link {
  background: none;
  border: none;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  transition: opacity 0.15s;
}
.history-copy-link:hover,
.history-sold-link:hover,
.history-delete-link:hover {
  opacity: 0.75;
}
.history-copy-link {
  color: var(--text-primary);
}
.history-sold-link {
  color: var(--green);
}
.history-delete-link {
  color: var(--red);
}
.history-delete-link svg {
  width: 18px;
  height: 18px;
  display: block;
}

.history-status-tabs {
  align-items: center;
}
.history-manage-btn {
  margin-left: auto;
}

.history-search-row {
  margin-bottom: 1rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.history-search-row input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 0.65rem 0.9rem;
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.history-search-row input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.history-search-row input::placeholder { color: var(--text-dim); }

.history-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.history-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 1.5rem 0;
}

.history-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Skeleton loading cards shown while history is fetching */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.history-skeleton {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.history-skeleton-line {
  height: 0.85rem;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--border) 25%, var(--bg-card, var(--bg-input)) 50%, var(--border) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}

.history-skeleton-line.short  { width: 40%; }
.history-skeleton-line.medium { width: 65%; }
.history-skeleton-line.tall   { height: 5rem; }

.history-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: opacity 0.2s, border-color 0.2s;
}

.history-card--sold {
  opacity: 0.55;
  border-color: var(--border);
}
.history-card--sold .history-card-price {
  text-decoration: line-through;
  color: var(--text-muted);
}

.history-card-body {
  display: flex;
  gap: 1rem;
  overflow: hidden;
}

.history-card-photo-col {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 0;
}

.history-hero-photo {
  width: 200px;
  height: 150px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s;
}
.history-hero-photo:hover {
  border-color: var(--accent);
}
.history-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.history-card-info-col {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.history-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.history-card-header-left {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.history-card-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  flex-shrink: 0;
}

.history-card-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-card-price {
  font-weight: 700;
  font-size: 0.95rem;
  color: #22c55e;
}

.history-card-age {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.history-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.history-card-style {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(91,106,255,0.12);
  border: 1px solid rgba(91,106,255,0.25);
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-card-age {
  color: var(--text-muted);
}

.history-stale-nudge {
  color: #fbbf24;
  font-weight: 600;
  font-size: 0.8rem;
  white-space: nowrap;
}

.history-card-preview {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-secondary, var(--text-muted));
  max-height: 160px;
  overflow-y: auto;
  white-space: pre-wrap;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.history-card-preview::-webkit-scrollbar {
  width: 5px;
}
.history-card-preview::-webkit-scrollbar-track {
  background: transparent;
}
.history-card-preview::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.history-card-preview::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.history-card-post {
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.65;
  resize: none;
  outline: none;
  font-family: inherit;
  max-height: 180px;
  overflow-y: auto;
}

.history-lang-tabs {
  display: flex;
  gap: 0.3rem;
}

.history-lang-btn {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.history-lang-btn:hover:not(.active) {
  border-color: var(--accent);
  color: var(--text-primary);
}

.history-lang-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.history-photo-strip {
  display: flex;
  gap: 0.3rem;
}

.history-photo-thumb {
  width: 62px;
  height: 46px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--border);
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.15s, border-color 0.15s;
}
.history-photo-thumb:hover {
  opacity: 0.85;
  border-color: var(--accent);
}

.history-photo-thumb-wrap {
  position: relative;
  width: 62px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s;
}
.history-photo-thumb-wrap:hover {
  border-color: var(--accent);
}
.history-photo-thumb-wrap .history-photo-thumb {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
}
.history-photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  pointer-events: none;
}

.btn-marketplace {
  background: rgba(59,130,246,0.12);
  color: #60a5fa;
  border: 1px solid rgba(59,130,246,0.3);
}
.btn-marketplace:hover:not(:disabled) {
  background: rgba(59,130,246,0.22);
  border-color: #3b82f6;
}

.history-download-btn {
  background: transparent;
  border: none;
  padding: 6px;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.history-download-btn svg {
  width: 18px;
  height: 18px;
}
.history-download-btn:hover:not(:disabled) {
  color: #e2e8f0;
  background: rgba(148,163,184,0.12);
}
.history-download-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

@media (max-width: 600px) {
  .history-card-body {
    flex-direction: column;
  }
  .history-card-photo-col {
    width: 100%;
  }
  .history-hero-photo {
    width: 100%;
    height: 180px;
  }
}

/* ---- PHOTO LIGHTBOX ---- */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease;
}

.lightbox-img-wrap {
  max-width: calc(100vw - 120px);
  max-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-img {
  max-width: 100%;
  max-height: calc(100vh - 80px);
  border-radius: 6px;
  object-fit: contain;
  box-shadow: 0 8px 48px rgba(0,0,0,0.7);
  display: block;
}

.lightbox-close {
  position: fixed;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  padding: 4px 8px;
  transition: opacity 0.15s;
  z-index: 1001;
}
.lightbox-close:hover { opacity: 1; }

.lightbox-prev,
.lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s, background 0.15s;
  z-index: 1001;
}
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-prev:hover,
.lightbox-next:hover { opacity: 1; background: rgba(255,255,255,0.2); }
.lightbox-prev:disabled,
.lightbox-next:disabled { opacity: 0.2; cursor: default; pointer-events: none; }

.lightbox-counter {
  position: fixed;
  bottom: 82px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
  font-weight: 500;
  background: rgba(0,0,0,0.5);
  padding: 4px 12px;
  border-radius: 20px;
}

.lightbox-thumb-strip {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  max-width: calc(100vw - 120px);
  overflow-x: auto;
  padding: 4px 2px;
  scrollbar-width: none;
}
.lightbox-thumb-strip::-webkit-scrollbar { display: none; }

.lightbox-thumb-strip img {
  width: 52px;
  height: 39px;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 0.55;
  flex-shrink: 0;
  transition: opacity 0.15s, border-color 0.15s;
}
.lightbox-thumb-strip img:hover  { opacity: 0.85; }
.lightbox-thumb-strip img.active { opacity: 1; border-color: #fff; }

.history-card-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 0.65rem;
}

.history-card-actions-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.history-copy-confirm {
  font-size: 0.8rem;
  color: var(--green);
  font-weight: 600;
  animation: fadeIn 0.2s ease;
}

/* Video history thumb */
.history-video-thumb {
  position: relative;
  width: 120px;
  min-width: 120px;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-input);
  cursor: pointer;
  flex-shrink: 0;
}
.history-video-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.history-video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #fff;
  background: rgba(0,0,0,0.35);
  pointer-events: none;
}
.btn-danger-text { color: var(--red, #ef4444) !important; }

.history-total-badge {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.15rem 0.65rem;
}

#history-page-size {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 0.65rem 0.75rem;
  font-size: 0.875rem;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition);
}
#history-page-size:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.history-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

#history-page-info {
  font-size: 0.875rem;
  color: var(--text-muted);
  min-width: 140px;
  text-align: center;
}

/* ---- PRICE STICKER TOOLBAR ---- */
.sticker-toolbar {
  flex-wrap: wrap;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
}

.sticker-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.sticker-colors {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.sticker-color-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s, border-color 0.15s;
  outline: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.sticker-color-btn:hover { transform: scale(1.15); }
.sticker-color-btn.active { border-color: var(--accent); transform: scale(1.15); }

#sticker-apply-one.active,
#sticker-apply-five.active,
#sticker-apply-all.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

#sticker-position {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
  outline: none;
  cursor: pointer;
}

.btn-danger {
  background: var(--danger-bg);
  color: var(--red);
  border: 1px solid var(--danger-border);
}
.btn-danger:hover:not(:disabled) {
  background: var(--danger-bg-hov);
  border-color: var(--red);
}

/* ---- FABRIC.JS CANVAS OVERRIDES ---- */
.canvas-container {
  margin: 0 auto;
  transition: opacity 0.25s ease;
  border: none !important;
  outline: none !important;
}

.canvas-container canvas,
.upper-canvas,
.lower-canvas {
  border: none !important;
  outline: none !important;
}

.upper-canvas {
  cursor: default !important;
}

/* ---- SETTINGS BUTTON IN HEADER ---- */
.btn-settings {
  background: var(--bg-input);
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 0.4rem 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn-settings:hover {
  background: var(--bg-panel-alt);
  border-color: var(--accent);
  color: var(--text-primary);
}

/* ---- STALE RECOMMENDATIONS PAGE ---- */
.stale-main {
  flex: 1;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: 2rem 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.stale-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.stale-page-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.4px;
}

.stale-page-title svg {
  stroke: var(--orange);
  flex-shrink: 0;
}

.stale-page-subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 0.3rem;
}

.stale-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.stale-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 4rem 2rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.stale-page-list {
  flex-direction: column;
  gap: 0.75rem;
}

.stale-page-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
}

.stale-card-thumb {
  width: 100px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.stale-card-thumb--empty {
  background: var(--bg-input);
}

.stale-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.stale-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stale-card-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.stale-card-date {
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* ---- STALE INVENTORY (old inline panel — kept for shared badge/days styles) ---- */
.stale-panel {
  padding: 0;
  overflow: hidden;
}

.stale-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  text-align: left;
}

.stale-toggle:hover {
  background: var(--bg-panel-alt);
}

.stale-toggle-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.stale-toggle-left svg {
  stroke: var(--orange);
  flex-shrink: 0;
}

.stale-count-badge {
  background: var(--orange);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 0.15rem 0.55rem;
  line-height: 1.4;
}

.stale-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--text-muted);
}

.stale-chevron.open {
  transform: rotate(180deg);
}

.stale-body {
  padding: 0 1.5rem 1.25rem;
  border-top: 1px solid var(--border);
}

.stale-description {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0.85rem 0 1rem;
}

.stale-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.stale-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
}

.stale-thumb {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.stale-thumb-empty {
  width: 72px;
  height: 54px;
  border-radius: 5px;
  flex-shrink: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
}

.stale-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.stale-card-title {
  font-size: 0.925rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stale-days-badge {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--orange);
  background: var(--warn-bg-soft);
  border: 1px solid var(--warn-border-soft);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  width: fit-content;
}

/* ---- VIDEO PAGE ---- */
.video-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
}

.video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 460px;
  text-align: center;
}

.video-placeholder-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  box-shadow: var(--shadow);
}

.video-placeholder h1 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.video-placeholder p {
  font-size: 0.975rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ---- LIGHT MODE ----
   Warm "paper" design system. Goal: an intentional, editorial light theme —
   paper-toned page (#F5F2EC), crisp white surfaces, a slim dark nav, and a gold
   accent (#C9A96E) — not the dark palette with the lights turned up. Everything
   keys off these tokens so panels/inputs/cards inherit the system for free; the
   Create Posts page gets component-level polish in the dedicated block further
   down. All scoped to [data-theme="light"] so dark-mode users are never
   affected. See docs/typography.md — content titles stay weight 600/700. */
[data-theme="light"] {
  --bg-base:       #efeae1;
  --bg-panel:      #FFFFFF;
  --bg-panel-alt:  #faf6ee;
  --bg-input:      #f4f0e8;
  --border:        #e6e0d5;
  --border-focus:  #b8924e;
  --accent:        #b8924e;
  --accent-hover:  #a8843f;
  --accent-glow:   rgba(184,146,78,0.16);
  --green:         #2A7A4F;
  --green-hover:   #236641;
  --red:           #cf4444;
  --orange:        #bf8a1f;
  --amber:         #bf8a1f;
  --text-primary:  #1c1a17;
  --text-muted:    #6b655c;  /* darkened for AA contrast (was #7d776d ~4.4:1 → ~5:1) */
  --text-dim:      #767066;  /* darkened for AA contrast (was #a39d92 ~2.7:1 → ~4.8:1); stays subtler than muted */
  --shadow:        0 1px 2px rgba(26,26,24,0.04), 0 4px 14px -6px rgba(26,26,24,0.08);
  --shadow-lg:     0 4px 12px -2px rgba(26,26,24,0.07), 0 18px 40px -12px rgba(26,26,24,0.14);
}

[data-theme="light"] .canvas-wrapper {
  background: #F5F2EC;
}

[data-theme="light"] .form-loading-overlay {
  background: rgba(240, 242, 248, 0.88);
}

[data-theme="light"] .btn-sold {
  background: rgba(22,163,74,0.08);
  color: #166534;
  border-color: rgba(22,163,74,0.25);
}

[data-theme="light"] .btn-danger {
  background: rgba(220,38,38,0.07);
  color: #b91c1c;
  border-color: rgba(220,38,38,0.22);
}

[data-theme="light"] .auth-overlay {
  background: rgba(235, 237, 248, 0.97);
}

/* =========================================================
   STEP LAYOUT (new unified workflow)
   ========================================================= */

.step-panel {
  position: relative;
  border: none;
}

.step-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.step-number {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}
.step-number.done { background: var(--green); }

.step-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}

/* Title sits next to an inline subtext sub-line; don't let it grow */
.step-title--tight { flex: 0 0 auto; }
.step-subtext { margin-right: auto; }

.step-header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

.step-header-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Vehicle fields — URL | Title | Price inline */
.vehicle-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 180px;
  gap: 0 1.25rem;
  align-items: start;
}

.vehicle-fields .form-group {
  margin-bottom: 0;
}

/* Editor workspace — single column, tools above canvas */
.editor-workspace {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Tab row + export actions */
.photo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}

.photo-tool-tabs {
  display: flex;
}

.photo-tool-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.65rem 1.1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
  margin-bottom: -1px;
}

.photo-tool-tab:hover { color: var(--text-primary); }

.photo-tool-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* AI tab — always stands out */
.photo-tool-tab--ai {
  color: var(--orange);
}
.photo-tool-tab--ai:hover { color: #fb923c; }
.photo-tool-tab--ai.active {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

.photo-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Ghost buttons — low-key, no fill */
.btn-ghost {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.btn-ghost:hover:not(:disabled) {
  color: var(--text-muted);
  background: var(--bg-input);
}
.btn-ghost:disabled { opacity: 0.35; cursor: not-allowed; }

/* Context panel shown below tabs */
.photo-tool-panel {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);
  min-height: 52px;
}

.photo-tool-panel .text-input-overlay {
  flex: 1;
  min-width: 160px;
}

.tool-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.tool-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  padding: 0.4rem 1.6rem 0.4rem 0.6rem;
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238892b0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  transition: border-color var(--transition);
}

.tool-select--inline {
  width: auto;
  flex-shrink: 0;
}

.tool-select:focus { border-color: var(--border-focus); }

/* ZIP row below thumbstrip */
.editor-zip-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.25rem;
}

/* AI panel */
.photo-tool-panel--ai {
  gap: 0.75rem;
}

.btn-ai {
  background: linear-gradient(135deg, var(--orange), #f43f5e);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.4rem;
  margin: 0.5rem 0 0.5rem 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 0 18px rgba(249,115,22,0.35);
  transition: opacity var(--transition), box-shadow var(--transition);
}
.btn-ai:hover:not(:disabled) {
  opacity: 0.9;
  box-shadow: 0 0 26px rgba(249,115,22,0.5);
}
.btn-ai:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

.ai-panel-hint {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-left: 0.25rem;
}

/* Narrow style select in the step header */
.style-select-inline {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  appearance: none;
  width: 140px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238892b0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  transition: border-color var(--transition);
}
.style-select-inline:focus { border-color: var(--border-focus); }

/* Generate button wrapper — clips the spinning border */
.generate-btn-wrap {
  position: relative;
  border-radius: 10px;
  padding: 2px;
  background: conic-gradient(from var(--shimmer-angle, 0deg), #a855f7, #5b6aff, #818cf8, #3b82f6, #a855f7);
  animation: shimmer-spin 3s linear infinite;
}

@property --shimmer-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes shimmer-spin {
  to { --shimmer-angle: 360deg; }
}

.btn-generate-shimmer {
  position: relative;
  background: var(--bg-panel);
  color: var(--text-primary);
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.3rem;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  transition: background var(--transition);
  width: 100%;
}
.btn-generate-shimmer:hover:not(:disabled) { background: var(--bg-panel-alt); }
.btn-generate-shimmer:disabled {
  cursor: not-allowed;
}
/* Muted state: when Generate is disabled (no car/title/photos yet), stop the
   spinning gradient border and flatten it so the button reads as inactive. */
.generate-btn-wrap:has(.btn-generate-shimmer:disabled) {
  animation-play-state: paused;
  background: #d9d3c6;
  opacity: 0.65;
}
.btn-generate-shimmer .btn-icon { font-size: 0.85rem; }

/* Light mode: golden shimmer to match the warm-paper accent.
   Only the conic-gradient colors change — the spin animation is retained. */
[data-theme="light"] .generate-btn-wrap {
  background: conic-gradient(from var(--shimmer-angle, 0deg),
    rgba(212, 175, 106, 0.82),
    rgba(243, 218, 146, 0.82),
    rgba(201, 169, 110, 0.82),
    rgba(232, 199, 126, 0.82),
    rgba(212, 175, 106, 0.82));
  box-shadow: 0 2px 12px -2px rgba(201, 169, 110, 0.4);
}

/* Responsive */
@media (max-width: 1024px) {
  .editor-workspace {
    grid-template-columns: 1fr 220px;
  }
}

@media (max-width: 860px) {
  .vehicle-fields {
    grid-template-columns: 1fr 1fr;
  }
  .vehicle-fields .form-group:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .generate-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-generate {
    justify-content: center;
  }
  .photo-tool-tab {
    padding: 0.65rem 0.7rem;
    font-size: 0.8rem;
  }
}

/* ── Custom Style Popover ───────────────────────────────── */
.style-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Backdrop */
.csp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 299;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: csp-fade 0.18s ease;
}

@keyframes csp-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.custom-style-popover {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 300;
  width: min(560px, 92vw);
  max-height: 90vh;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  animation: csp-appear 0.2s cubic-bezier(0.34,1.3,0.64,1);
}

@keyframes csp-appear {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.csp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem 0.9rem;
  border-bottom: 1px solid var(--border);
  border-radius: 18px 18px 0 0;
}

.csp-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.csp-close-btn {
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.2rem 0.45rem;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.csp-close-btn:hover { background: var(--border); }

.csp-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  overflow-y: auto;
}

.csp-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.csp-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.csp-input,
.csp-textarea {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 0.45rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  resize: vertical;
  transition: border-color var(--transition);
  width: 100%;
  box-sizing: border-box;
}
.csp-input:focus,
.csp-textarea:focus { border-color: var(--border-focus); }
.csp-input::placeholder,
.csp-textarea::placeholder { color: var(--text-dim); }

.csp-preview-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.csp-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.csp-preview {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: var(--text-primary);
  min-height: 140px;
  max-height: 260px;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.65;
}

.csp-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.25rem 1.1rem;
  border-top: 1px solid var(--border);
  border-radius: 0 0 18px 18px;
}

/* ── Style Picker Button ──────────────────────────────────── */
.btn-style-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  white-space: nowrap;
  max-width: 480px;
}
.btn-style-picker:hover { border-color: var(--border-focus); background: var(--bg-panel-alt); }
.style-picker-icon { font-size: 0.9rem; flex-shrink: 0; }
.style-picker-chevron { color: var(--text-muted); font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
#style-picker-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 400px;   /* fits full auto-titles; ellipsis only for extreme custom names */
}

/* ── Style Dropdown ──────────────────────────────────────── */
.sp-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 300;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  /* Grow to fit the longest preset name, capped so it stays on-screen; longer
     names wrap (see .sp-dropdown-item--preset) instead of being clipped. */
  min-width: 220px;
  width: max-content;
  max-width: min(360px, calc(100vw - 1.5rem));
  padding: 0.35rem 0;
  overflow: hidden;
}
.sp-dropdown-header {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  padding: 0.55rem 0.85rem 0.2rem;
}
.sp-dropdown-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  color: var(--text-primary);
  font-size: 0.85rem;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  transition: background var(--transition);
  white-space: nowrap;
}
.sp-dropdown-item:hover { background: var(--bg-panel-alt); }
.sp-dropdown-item--active { color: var(--accent); font-weight: 600; }
.sp-dropdown-item--create { color: var(--accent); font-weight: 600; }
.sp-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 0.3rem 0;
}
.sp-dropdown-preset-row {
  display: flex;
  align-items: center;
}
.sp-dropdown-item--preset {
  flex: 1;
  min-width: 0;
  white-space: normal;       /* allow long auto-named titles to wrap */
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.sp-dropdown-del {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.45rem 0.75rem 0.45rem 0;
  line-height: 1;
  flex-shrink: 0;
}
.sp-dropdown-del:hover { color: var(--text-muted); }

/* ── confirmDialog — app-wide alert/confirm modal ─────────────
   Reusable destructive-action dialog (see confirm-dialog.js). Sits above every
   other modal. Mirrors the .sp-modal shell so it feels native to the app. */
.cdlg-backdrop {
  position: fixed;
  inset: 0;
  display: none;            /* toggled to flex by JS */
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 3000;            /* above style picker (401) and scheduler (1000) */
  opacity: 0;
  transition: opacity 0.16s ease;
}
.cdlg-backdrop.cdlg-open { opacity: 1; }

.cdlg-card {
  width: min(420px, 100%);
  background: var(--bg-panel);
  background-clip: padding-box;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  transform: scale(0.96);
  transition: transform 0.16s ease;
}
.cdlg-backdrop.cdlg-open .cdlg-card { transform: scale(1); }

.cdlg-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;      /* .t-title tier */
  font-weight: 700;        /* titles are always 700 */
  color: var(--text-primary);
  line-height: 1.3;
}
.cdlg-message {
  margin: 0 0 1.35rem;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-muted);
  white-space: pre-line;   /* honor \n line breaks in the message */
}

.cdlg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}
.cdlg-btn {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;        /* controls are 600 */
  padding: 0.55rem 1.1rem;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cdlg-btn--secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}
.cdlg-btn--secondary:hover { border-color: var(--text-muted); color: var(--text-primary); }
.cdlg-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.cdlg-btn--primary:hover { filter: brightness(1.08); }
.cdlg-btn--danger {
  background: var(--red);   /* app-wide red */
  border-color: var(--red);
  color: #fff;
}
.cdlg-btn--danger:hover { filter: brightness(1.08); }

/* ── Style Picker Modal ───────────────────────────────────── */
.sp-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 400;
  backdrop-filter: blur(2px);
}

.sp-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 401;
  width: min(700px, 96vw);
  max-height: 88vh;
  /* Rounded shell clips its children. Chrome honors border-radius on an
     overflow:hidden (non-scrolling) box, but leaks white corners when the
     SAME element also scrolls — so scrolling lives on the inner .sp-scroll. */
  overflow: hidden;
  background: var(--bg-panel);
  background-clip: padding-box;
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
}
.sp-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.sp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem 0.9rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-panel);
  border-radius: 16px 16px 0 0;
  z-index: 1;
}
.sp-title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.sp-close-btn {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  line-height: 1;
  transition: background var(--transition), color var(--transition);
}
.sp-close-btn:hover { background: var(--border); }

.sp-section {
  padding: 1rem 1.4rem 0.25rem;
}
.sp-section-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sp-required {
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.sp-hint {
  color: var(--text-dim);
  font-weight: 400;
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0;
}

/* Tone cards grid */
.sp-tone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 0.6rem;
  padding-bottom: 0.75rem;
}

.sp-tone-card {
  background: var(--bg-input);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition), background var(--transition);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.sp-tone-card:hover { border-color: var(--accent); background: var(--bg-panel-alt); }
.sp-tone-card.sp-tone-active {
  border-color: var(--accent);
  background: var(--bg-panel-alt);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.sp-tone-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
}
.sp-tone-sample {
  font-size: 0.77rem;
  color: var(--text-muted);
  line-height: 1.45;
  font-style: italic;
}

/* Tag chips */
.sp-tags-panel {
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
}
.sp-tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-bottom: 0.75rem;
}
.sp-tag {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
  white-space: nowrap;
}
.sp-tag:hover { border-color: var(--accent); color: var(--text-primary); }
.sp-tag.sp-tag--active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

/* Vehicle Intelligence */
.sp-vi-section {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 0;
}
.sp-vi-toggle-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  user-select: none;
}
.sp-vi-left { flex: 1; }
.sp-vi-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}
.sp-vi-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.sp-vi-switch {
  flex-shrink: 0;
  width: 40px;
  height: 22px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 11px;
  position: relative;
  transition: background var(--transition), border-color var(--transition);
  cursor: pointer;
}
.sp-vi-switch.sp-vi-on {
  background: var(--accent);
  border-color: var(--accent);
}
.sp-vi-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform var(--transition), background var(--transition);
}
.sp-vi-switch.sp-vi-on .sp-vi-knob {
  transform: translateX(18px);
  background: #fff;
}

.sp-dealer-info-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
}
.sp-dealer-info-row {
  padding: 0.5rem 0;
}
.sp-dealer-info-row + .sp-dealer-info-row {
  border-top: 1px dashed var(--border);
}
.sp-dealer-info-value {
  margin-top: 0.15rem;
  font-weight: 500;
}
.sp-dealer-info-value.is-empty {
  color: var(--orange);
  font-style: italic;
  font-weight: 400;
}

.sp-hours-popover {
  margin-top: 0.75rem;
  padding: 0.9rem;
  background: var(--bg-input);
  border: 1px solid var(--accent);
  border-radius: 8px;
  animation: sp-hours-pop 0.15s ease-out;
}
@keyframes sp-hours-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sp-hours-popover-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}
.sp-hours-popover-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.sp-hours-input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.88rem;
  margin-bottom: 0.6rem;
}
.sp-hours-input:focus {
  outline: none;
  border-color: var(--accent);
}
.sp-hours-popover-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
.sp-hours-error {
  color: var(--red);
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

/* Footer */
.sp-footer {
  border-top: 1px solid var(--border);
  padding: 0.9rem 1.4rem 1.1rem;
  position: sticky;
  bottom: 0;
  background: var(--bg-panel);
  border-radius: 0 0 16px 16px;
}
.sp-preset-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.sp-preset-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.82rem;
  padding: 0.4rem 0.7rem;
  outline: none;
}
.sp-preset-input:focus { border-color: var(--border-focus); }
.sp-preset-input::placeholder { color: var(--text-dim); }
.sp-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.sp-footer-actions .sp-preset-row {
  flex: 1;
  margin-bottom: 0;
}

/* ── Photo Editor 2.0 ───────────────────────────────────────────────────── */

/* Floating toolbar shown when an overlay is selected */
.overlay-edit-bar {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(20, 22, 38, 0.92);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  backdrop-filter: blur(4px);
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.oeb-btn {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 0.82rem;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: background var(--transition);
  white-space: nowrap;
}
.oeb-btn:hover { background: var(--bg-hover); }
.oeb-danger { color: #ff6b6b; }
.oeb-danger:hover { background: rgba(255, 107, 107, 0.12); }
.oeb-sep {
  width: 1px;
  height: 1.5rem;
  background: var(--border);
  flex-shrink: 0;
}
.oeb-color-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.oeb-color-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.35);
  background: #ffffff;
  flex-shrink: 0;
  display: inline-block;
}
.oeb-color-popover {
  position: absolute;
  top: calc(0.75rem + 42px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 22, 38, 0.97);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  z-index: 12;
  box-shadow: 0 6px 24px rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  min-width: 190px;
}
.oeb-color-popover-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.oeb-color-popover-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.oeb-color-swatch-input {
  width: 38px;
  height: 38px;
  padding: 2px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  cursor: pointer;
  background: none;
  flex-shrink: 0;
}
.oeb-color-save-btn {
  background: var(--accent);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  transition: opacity var(--transition);
  width: 100%;
}
.oeb-color-save-btn:hover { opacity: 0.85; }

/* Reset overlays pill */
.canvas-reset-pill {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  background: rgba(20, 22, 38, 0.85);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
  z-index: 10;
  backdrop-filter: blur(4px);
}
.canvas-reset-pill:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

/* General row within Step 2 */
.pe-row {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
}

/* ───── Vehicle Intelligence panel ───── */
.vi-panel {
  background: #ffffff;
  border-bottom: 1px solid #f1ece2;
  /* Left padding 0 so the title lines up with the step-number on the left. */
  padding: 16px 1.25rem 16px 0;
  /* Sits directly under the step-header — cancel its bottom margin so the gap
     above the panel matches the spacing between the sections below it. */
  margin-top: -1.25rem;
}

.vi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 28px;
}

.vi-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.vi-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #111111;
}

.vi-verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #2e7d4f;
  background: #eaf3ec;
  border: 1px solid #cfe4d5;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
}

.vi-cat-counts {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.vi-cat-count {
  font-size: 12.5px;
  font-weight: 600;
  color: #5c574e;
}
.vi-cat-count b {
  color: #a39d92;
  font-weight: 700;
  margin-left: 3px;
}

/* Empty state — panel stays visible, data area shows a muted hint */
.vi-empty-hint {
  display: none;
  font-size: 12.5px;
  font-weight: 600;
  color: #a39d92;
}
.vi-empty .vi-empty-hint { display: inline; }
.vi-empty .vi-verified-pill,
.vi-empty .vi-cat-counts { display: none; }
.vi-empty .vi-chevron-btn { opacity: 0.4; cursor: default; }

.vi-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

/* iOS-style toggle */
.vi-switch {
  position: relative;
  width: 46px;
  height: 28px;
  border: none;
  padding: 0;
  border-radius: 20px;
  background: #d8d1c4;
  cursor: pointer;
  transition: background 0.2s ease;
  flex: none;
}
.vi-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: left 0.2s ease;
}
.vi-switch[aria-checked="true"] { background: #b8924e; }
.vi-switch[aria-checked="true"] .vi-switch-knob { left: 20px; }
/* While AI captions are generating, the switch is briefly disabled */
.vi-switch:disabled { opacity: 0.6; cursor: default; }
.vi-generating .vi-switch-knob { animation: vi-knob-pulse 0.8s ease-in-out infinite; }
@keyframes vi-knob-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(0.82); } }

/* Expand/collapse chevron */
.vi-chevron-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #faf7f0;
  border: 1px solid #ece6da;
  border-radius: 8px;
  color: #9a9489;
  cursor: pointer;
  flex: none;
}
.vi-chevron { transition: transform 0.18s ease; }
.vi-chevron-btn[aria-expanded="true"] .vi-chevron { transform: rotate(180deg); }

/* Expanded body */
.vi-body {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #efeae1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.vi-group-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #7d776d;
  margin-bottom: 9px;
}
.vi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vi-chip {
  font-size: 12.5px;
  font-weight: 600;
  color: #3a352d;
  background: #f6f3ec;
  border: 1px solid #ece6da;
  padding: 6px 12px;
  border-radius: 8px;
}

/* ───── Holiday section (reskinned, collapsible) ───── */
.hol-section {
  border-top: 1px solid #f1ece2;
  /* Left padding 0 so the title lines up with the step-number on the left. */
  padding: 16px 1.25rem 16px 0;
}
.hol-header {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 28px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.hol-title {
  font-size: 13px;
  font-weight: 700;
  color: #111111;
}
.hol-upcoming {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: #fff;
  background: var(--accent);
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 800;
}
.hol-upcoming .hol-up-when { font-weight: 600; opacity: 0.82; }
.hol-hint {
  font-size: 12px;
  font-weight: 600;
  color: #a39d92;
}
.hol-chevron {
  margin-left: auto;
  color: #a39d92;
  flex: none;
  transition: transform 0.18s ease;
}
.hol-header[aria-expanded="true"] .hol-chevron { transform: rotate(180deg); }
.hol-body { margin-top: 13px; }
.hol-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* ───── Overlays section (reskinned, collapsible) ───── */
.ov-section {
  border-top: 1px solid #f1ece2;
  /* Left padding 0 so the title lines up with the step-number, matching the
     Vehicle Intelligence and Holiday sections above. */
  padding: 16px 1.25rem 16px 0;
}
.ov-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ov-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.ov-title {
  font-size: 13px;
  font-weight: 800;
  color: #111111;
}
.ov-status {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.ov-status-pill {
  font-size: 12px;
  font-weight: 700;
  color: #9a7322;
  background: #faf3e6;
  border: 1px solid #ecdcae;
  padding: 2px 10px;
  border-radius: 20px;
}
.ov-status-muted {
  font-size: 12px;
  font-weight: 600;
  color: #b3ada1;
  background: transparent;
  border: 1px solid transparent;
  padding: 2px 2px;
}
.ov-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ov-add-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #faf7f0;
  border: 1.5px solid #ece6da;
  border-radius: 9px;
  color: #9a7322;
  cursor: pointer;
  flex: none;
}
.ov-chevron-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #faf7f0;
  border: 1px solid #ece6da;
  border-radius: 8px;
  color: #9a9489;
  cursor: pointer;
  flex: none;
}
.ov-chevron { transition: transform 0.18s ease; }
.ov-chevron-btn[aria-expanded="true"] .ov-chevron { transform: rotate(180deg); }
.ov-body { margin-top: 13px; }
.ov-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Size + weight match the holiday/tone chips; keeps the gold overlay colors. */
.ov-chip {
  font-size: 0.82rem;
  color: #5c574e;
  background: #fff;
  border: 1px solid #e6e0d5;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
}
.ov-chip.active {
  color: #9a7322;
  background: #faf3e6;
  border-color: #dcb86a;
}
/* Saved custom-overlay chips: a toggle label + a delete button, sharing the
   chip frame. Inherit the chip's text color so active/inactive carry through. */
.ov-chip--custom {
  display: inline-flex;
  align-items: center;
  padding: 0;
}
.ov-chip-label {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0.35rem 0.35rem 0.35rem 0.75rem;
  cursor: pointer;
}
.ov-chip-del {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.45;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.35rem 0.5rem 0.35rem 0.25rem;
  cursor: pointer;
}
.ov-chip-del:hover { opacity: 0.9; }

/* ═════ Social Post Preview (Facebook Feed + FB/IG Story) ═════ */
.sp-preview { background: #fff; }
.sp-head {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 1.25rem 0 0;
}
.sp-head-title { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: #3a352d; }
.sp-head-sum   { font-size: 12.5px; font-weight: 600; color: #a39d92; }

.sp-row {
  display: flex; gap: 38px; align-items: flex-start; justify-content: center;
  padding: 22px 22px 30px; background: #fff; flex-wrap: wrap;
}

/* ── Empty-state stage: blurred/dimmed preview behind a frosted prompt card.
   Only the static empty state (skeleton, not mid-load) shows the overlay; once
   photos load (sp-loading) or a post renders, the real preview takes over. ── */
.sp-stage { position: relative; }

/* Behind preview — blur/dim fade smoothly in/out with the overlay. */
.sp-row { transition: filter 0.65s ease, opacity 0.65s ease; }
.sp-skeleton:not(.sp-loading):not(.sp-generating) .sp-row {
  filter: blur(2.6px); opacity: 0.55; pointer-events: none;
}

/* Overlay: always laid out (for centering) but faded via opacity/visibility so
   it can animate out — display:none can't transition. */
.sp-empty-overlay {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;   /* clicks pass through except on the card */
  opacity: 0; visibility: hidden;
  transition: opacity 0.65s ease, visibility 0s linear 0.65s;
}
.sp-skeleton:not(.sp-loading):not(.sp-generating) .sp-empty-overlay {
  opacity: 1; visibility: visible;
  transition: opacity 0.65s ease, visibility 0s;
}
.sp-empty-card {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border: 1px solid #e6dec9; border-radius: 16px;
  box-shadow: 0 18px 50px rgba(60, 45, 15, 0.22);
  padding: 30px 34px; max-width: 430px; text-align: center;
  /* hidden resting state — the active selector below animates it in/out */
  opacity: 0; transform: translateY(10px) scale(0.97);
  transition: opacity 0.65s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.sp-skeleton:not(.sp-loading):not(.sp-generating) .sp-empty-card {
  opacity: 1; transform: none;
}
.sp-empty-icon {
  width: 52px; height: 52px; border-radius: 50%; background: #f4ecd6;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.sp-empty-title {
  font-size: 21px; font-weight: 800; letter-spacing: -0.3px;
  color: #2e2a22; margin: 0 0 8px;
}
.sp-empty-sub {
  font-size: 13.5px; color: #6a6456; line-height: 1.55; margin: 0 0 20px;
}
.sp-empty-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: #a9813f; color: #fff; font-weight: 800; font-size: 14px;
  padding: 12px 24px; border: 0; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(169, 129, 63, 0.35);
}
.sp-empty-btn:hover { background: #9a7437; }

/* Publish + the social-media toggles are disabled while there's nothing to
   publish yet (empty preview). */
.sp-skeleton .sp-foot-publish,
.sp-skeleton .sp-foot-toggles { opacity: 0.5; pointer-events: none; filter: saturate(0.6); }

/* Car-picker spotlight: gold ring pulse fired from the empty-state card. */
@keyframes sp-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(169, 129, 63, 0.5); }
  100% { box-shadow: 0 0 0 16px rgba(169, 129, 63, 0); }
}
.sp-pulse-target { animation: sp-pulse-ring 1.4s ease-out; border-radius: 10px; }
.sp-col { display: flex; flex-direction: column; align-items: center; gap: 10px; transition: opacity 0.2s; }
.sp-col.sp-disabled { opacity: 0.42; }
.sp-col-label {
  display: flex; align-items: center; gap: 6px;
  align-self: flex-start; /* sit at the card's left edge, not centered */
  font-size: 12px; font-weight: 800; letter-spacing: 0.03em; color: #7d776d;
}
.sp-notpub {
  display: none;
  font-size: 11px; font-weight: 700; color: #a39d92;
  background: #efe9dd; padding: 3px 9px; border-radius: 7px; letter-spacing: 0;
}
.sp-col.sp-disabled .sp-notpub { display: inline-block; }

/* ── Facebook Feed card ── */
.sp-fb-card {
  width: 430px; height: 558px; background: #fff;
  border: 1px solid #e3ddd0; border-radius: 12px;
  box-shadow: 0 6px 18px rgba(40,32,16,0.10);
  overflow: hidden; display: flex; flex-direction: column;
}
.sp-fb-header { display: flex; align-items: center; gap: 9px; padding: 11px 12px; }
.sp-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 800;
  background: linear-gradient(135deg, #c6a667, #b8924e);
}
.sp-fb-meta { flex: 1; min-width: 0; }
.sp-fb-name { font-size: 13.5px; font-weight: 800; color: #3a352d; }
.sp-fb-sub  { font-size: 11px; font-weight: 600; color: #9a9489; }
.sp-fb-kebab { color: #9a9489; font-size: 18px; font-weight: 700; }
.sp-fb-caption {
  padding: 0 13px 10px; font-size: 13.5px; line-height: 1.55; color: #3a352d;
  white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-fb-gallery { flex: 1; display: flex; flex-direction: column; gap: 3px; background: #0c0904; min-height: 0; }
.sp-hero { flex: 1.75; position: relative; background: #0c0904; overflow: hidden; }
.sp-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; min-height: 0; }
.sp-tile { position: relative; background: #0c0904; overflow: hidden; }
.sp-tile img, .sp-hero > img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Fade between photos while the preview auto-cycles (spStartCycle). */
.sp-hero > img { transition: opacity 0.4s ease; }
.sp-more {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(8,6,3,0.5); color: #fff; font-size: 19px; font-weight: 800;
}
/* hero overlays */
.sp-hero-grad { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8,6,2,0.28), rgba(8,6,2,0) 38%); pointer-events: none; }
.sp-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; }
.sp-badge {
  font-size: 11.5px; font-weight: 800; color: #fff;
  padding: 4px 10px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); align-self: flex-start;
}
.sp-holiday { position: absolute; top: 10px; right: 10px; }
.sp-price-tag {
  position: absolute; right: 11px; bottom: 40px;
  font-size: 17px; font-weight: 800; color: #fff;
  background: rgba(42,91,60,0.92); padding: 5px 13px; border-radius: 9px; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Distributed photo overlays. Each photo carries at most ONE: a corner price/
   mileage sticker, or a full-width feature banner. Both em-scaled — set
   font-size per context and the whole thing scales. */
.sp-vbadge-stack {
  position: absolute; right: 6%; bottom: 6%;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.4em;
  font-size: 15px; pointer-events: none;
}
.sp-vbadge {
  font-size: 1em; font-weight: 800; color: #fff; letter-spacing: -0.01em;
  line-height: 1.15; padding: 0.34em 0.86em; border-radius: 0.6em; white-space: nowrap;
  box-shadow: 0 0.13em 0.5em rgba(0,0,0,0.3);
}
.sp-vbadge--price { font-size: 1.13em; background: rgba(42,91,60,0.95); } /* green */
.sp-vbadge--miles { background: rgba(28,82,160,0.95); }                  /* blue */

/* Dealer logo watermark — top-right on every photo. */
.sp-vlogo { position: absolute; top: 4%; right: 4%; width: 20%; pointer-events: none; }
.sp-vlogo img { width: 100%; height: auto; display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45)); }

/* Full-width feature banner along the bottom. */
.sp-vbanner {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.7em 1.1em 0.85em; font-size: 15px; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0) 100%);
}
.sp-vbanner-kicker {
  font-size: 0.52em; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: #e7c66b; margin-bottom: 0.25em;
}
.sp-vbanner-feats {
  font-size: 1em; font-weight: 800; color: #fff; line-height: 1.15; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Per-context sizing + placement. Hero clears the bottom info bar. */
.sp-hero > .sp-vbadge-stack         { right: 11px; bottom: 44px; font-size: 15px; }
.sp-tile .sp-vbadge-stack           { right: 5%; bottom: 5%; font-size: 8px; }
.sp-cover-preview .sp-vbadge-stack  { right: 4%; bottom: 5%; font-size: 13px; }
.sp-rtile .sp-vbadge-stack          { right: 6%; bottom: 6%; font-size: 9px; }
/* When a sticker shares a photo with a banner (cover): move it to the TOP-LEFT so
   it clears both the bottom band and the top-right logo. */
.sp-vbadge-stack--top                   { align-items: flex-start; }
.sp-hero > .sp-vbadge-stack--top        { top: 12px; bottom: auto; left: 11px; right: auto; }
.sp-tile .sp-vbadge-stack--top          { top: 5%;   bottom: auto; left: 5%;   right: auto; }
.sp-cover-preview .sp-vbadge-stack--top { top: 5%;   bottom: auto; left: 4%;   right: auto; }
.sp-rtile .sp-vbadge-stack--top         { top: 6%;   bottom: auto; left: 6%;   right: auto; }
.sp-hero > .sp-vbanner              { font-size: 15px; }
.sp-tile .sp-vbanner                { font-size: 7px; padding: 1.3em 0.7em 0.6em; }
.sp-cover-preview .sp-vbanner       { font-size: 12px; }
.sp-rtile .sp-vbanner               { font-size: 7px; padding: 1.2em 0.6em 0.55em; }
.sp-infobar {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 11px 9px;
  background: linear-gradient(to top, rgba(12,9,4,0.85), rgba(12,9,4,0));
  display: flex; align-items: center; gap: 8px;
}
.sp-logo-chip { width: 26px; height: 26px; border-radius: 5px; background: #fff; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sp-logo-chip img { width: 100%; height: 100%; object-fit: contain; }
.sp-infobar-txt { min-width: 0; }
.sp-infobar-title { font-size: 12px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-infobar-line { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-fb-actions {
  display: flex; justify-content: space-around; border-top: 1px solid #f1ece2; padding: 8px 0;
  font-size: 12px; font-weight: 700; color: #7d776d;
}
.sp-fb-actions .sp-share { color: #2a6fdb; }

/* View full post button — full-width, below the feed card */
.sp-viewfull-cta {
  width: 100%;
  margin-top: 11px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: #fff; border: 1.5px solid #e6e0d5; border-radius: 10px;
  padding: 10px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #5c574e;
}
.sp-viewfull-cta:hover { border-color: #dcb86a; background: #faf7f0; }
.sp-skeleton .sp-viewfull-cta { display: none; }

/* ═════ Full Post modal (read caption + reorder photos) ═════ */
.sp-full-overlay { background: rgba(22,17,9,0.55); padding: 40px; }
.sp-full-card {
  width: 1000px; max-width: 96vw; max-height: 88vh; background: #fff;
  border-radius: 16px; box-shadow: 0 24px 70px rgba(20,14,4,0.4);
  display: flex; flex-direction: column; overflow: hidden;
}
.sp-full-header {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #f1ece2; padding: 17px 22px;
}
.sp-full-title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: #1c1a17; }
.sp-full-sub { font-size: 12.5px; font-weight: 600; color: #a39d92; }
.sp-full-close {
  width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center;
  background: #faf7f0; border: 1px solid #ece6da; border-radius: 9px; color: #7d776d; cursor: pointer; font-size: 14px;
}

.sp-full-body { display: flex; flex: 1; min-height: 0; }

/* LEFT pane */
.sp-full-left { width: 560px; flex: none; background: #faf9f5; border-right: 1px solid #f1ece2; overflow-y: auto; }
.sp-cover-section { padding: 22px 22px 0; }
.sp-cover-labelrow { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.sp-cover-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #9a7322; }
.sp-cover-help { font-size: 12px; font-weight: 600; color: #a39d92; }
.sp-cover-preview {
  position: relative; width: 100%; height: 248px; border-radius: 12px; overflow: hidden;
  background: #0c0904; box-shadow: 0 4px 14px rgba(20,14,4,0.18);
}
.sp-cover-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-cover-pill {
  position: absolute; top: 11px; left: 11px; z-index: 1;
  font-size: 11.5px; font-weight: 800; color: #1c1a17; background: #f0c060;
  padding: 4px 10px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.sp-reorder-section { padding: 20px 22px 24px; }
.sp-reorder-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.sp-reorder-count { font-size: 13px; font-weight: 800; color: #5c574e; }
.sp-reorder-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; color: #9a7322;
  background: #faf3e6; border: 1px solid #ecdcae; border-radius: 7px; padding: 3px 9px;
}
.sp-reorder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.sp-rtile {
  position: relative; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden;
  background: #0c0904; cursor: grab; outline: 1px solid #e3ddd0; outline-offset: -1px;
}
.sp-rtile--cover { outline: 2.5px solid #b8924e; outline-offset: -1px; }
.sp-rtile.sp-dragging { opacity: 0.45; }
.sp-rtile img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sp-rtile-num {
  position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,9,4,0.6); color: #fff; font-size: 11px; font-weight: 800;
}
.sp-rtile-cover-tag {
  position: absolute; top: 6px; right: 6px;
  font-size: 10px; font-weight: 800; color: #1c1a17; background: #f0c060;
  padding: 2px 7px; border-radius: 6px;
}
.sp-rtile-makecover {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: none; border-radius: 7px;
  background: rgba(12,9,4,0.55); color: #fff; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s;
}
.sp-rtile:hover .sp-rtile-makecover { opacity: 1; }
.sp-rtile-grip {
  position: absolute; left: 0; right: 0; bottom: 0; height: 18px; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.85); font-size: 11px; letter-spacing: 2px;
  background: linear-gradient(to top, rgba(12,9,4,0.5), rgba(12,9,4,0)); pointer-events: none;
}
.sp-rtile-del {
  position: absolute; bottom: 6px; right: 6px; width: 24px; height: 24px; border: none; border-radius: 7px;
  background: rgba(12,9,4,0.6); color: #fff; font-size: 12px; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s, background 0.15s;
}
.sp-rtile:hover .sp-rtile-del { opacity: 1; }
.sp-rtile-del:hover { background: #c0392b; }

/* RIGHT pane */
.sp-full-right { flex: 1; min-width: 0; overflow-y: auto; padding: 22px 24px; }
.sp-full-copy-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sp-full-vtitle { font-size: 18px; font-weight: 800; line-height: 1.25; color: #1c1a17; }
.sp-full-vprice {
  flex: none; font-size: 16px; font-weight: 800; color: #fff; background: #2a5b3c;
  padding: 5px 13px; border-radius: 9px; white-space: nowrap;
}
.sp-full-caption { margin-top: 16px; font-size: 13.5px; line-height: 1.62; color: #3a352d; white-space: pre-wrap; }

/* Footer */
.sp-full-footer {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid #f1ece2; padding: 14px 22px;
}
.sp-full-foot-note { font-size: 12.5px; font-weight: 600; color: #a39d92; }
.sp-full-done {
  font-size: 14px; font-weight: 800; color: #fff; background: #b8924e; border: none;
  padding: 10px 26px; border-radius: 11px; cursor: pointer; box-shadow: 0 4px 12px rgba(184,146,78,0.35);
}
.sp-full-done:hover { filter: brightness(1.04); }

/* ── FB / IG Story card ── */
.sp-story-card {
  width: 314px; height: 558px; border-radius: 22px; overflow: hidden; position: relative;
  background: #0c0904; box-shadow: 0 8px 22px rgba(40,32,16,0.16); border: 1px solid rgba(0,0,0,0.06);
}
.sp-story-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: opacity 0.4s ease; }
.sp-story-scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8,6,2,0.5) 0%, transparent 22%, transparent 55%, rgba(8,6,2,0.78) 100%); }
.sp-story-progress { position: absolute; top: 9px; left: 12px; right: 12px; display: flex; gap: 4px; }
.sp-story-progress i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,0.45); overflow: hidden; position: relative; }
.sp-story-progress i.sp-prog-fill::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff;
  animation: sp-prog var(--sp-prog-ms, 5s) linear forwards;
}
/* A story already shown this cycle stays solid; segments past the story count hide. */
.sp-story-progress i.sp-prog-done::after { content: ''; position: absolute; inset: 0; background: #fff; }
.sp-story-progress i.sp-hidden { display: none; }
@keyframes sp-prog { to { width: 100%; } }
.sp-story-author { position: absolute; top: 22px; left: 14px; right: 14px; display: flex; align-items: center; gap: 8px; }
.sp-story-avatar {
  width: 31px; height: 31px; border-radius: 50%; border: 2px solid #fff; flex: none;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 800;
  background: linear-gradient(135deg, #c6a667, #b8924e);
}
.sp-story-name { font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.55); }
.sp-story-time { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.85); text-shadow: 0 1px 1px rgba(0,0,0,0.55); }
.sp-story-x { margin-left: auto; color: #fff; font-size: 15px; font-weight: 700; text-shadow: 0 1px 1px rgba(0,0,0,0.55); }
.sp-story-overlays { position: absolute; top: 64px; left: 14px; right: 14px; display: flex; align-items: flex-start; justify-content: space-between; }
.sp-story-overlays .sp-badges { position: static; }
.sp-story-overlays .sp-holiday { position: static; }
.sp-story-overlays .sp-badge { font-size: 12.5px; padding: 5px 11px; }
.sp-story-content { position: absolute; left: 16px; right: 16px; bottom: 96px; }
.sp-story-title { font-size: 18px; font-weight: 800; line-height: 1.18; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.55); margin-bottom: 8px; }
.sp-story-price {
  display: inline-block; font-size: 21px; font-weight: 800; color: #fff;
  background: rgba(42,91,60,0.95); padding: 6px 14px; border-radius: 11px;
}
.sp-story-line { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.9); margin-top: 8px; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.sp-story-swipe { position: absolute; left: 0; right: 0; bottom: 52px; text-align: center; color: #fff; font-size: 12px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.sp-swipe-arrow { display: block; font-size: 15px; margin-bottom: 1px; animation: sp-bounce 1.4s ease-in-out infinite; }
@keyframes sp-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.sp-story-reply { position: absolute; left: 13px; right: 13px; bottom: 13px; display: flex; align-items: center; gap: 8px; }
.sp-reply-pill { flex: 1; border: 1.5px solid rgba(255,255,255,0.7); border-radius: 22px; padding: 8px 14px; color: rgba(255,255,255,0.85); font-size: 12px; font-weight: 600; }
.sp-reply-send { color: #fff; font-size: 16px; }

/* ── Footer action bar ── */
.sp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 11px;
  padding: 16px 26px 0; border-top: 1px solid #f1ece2; background: #fff;
}

/* Left — Regenerate */
.sp-foot-regen {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: #fff; border: 1.5px solid #e6e0d5; color: #5c574e;
  font-size: 14px; font-weight: 700; padding: 11px 19px; border-radius: 11px;
}
.sp-foot-regen:hover { border-color: #dcb86a; background: #faf7f0; }

/* Right — platform toggles + Publish */
.sp-foot-right { display: flex; align-items: center; gap: 11px; }
.sp-foot-toggles { display: flex; gap: 8px; }

/* ── Platform select-chips: [box] [glyph] [label] [· status] ──
   The chip's whole look is driven by a single mode class set in JS
   (sp-mode-sel | unsel | posting | locked | ok | fail). */
.sp-plat-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13px; font-weight: 700; padding: 10px 14px; border-radius: 11px;
  border: 1.5px solid transparent; background: #fff; color: #9a9489;
}
.sp-plat-box {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid transparent;
}
.sp-plat-box.sp-plat-box--spin { width: 15px; height: 15px; border: none; background: none; }
.sp-box-ico { width: 11px; height: 11px; }
.sp-plat-status { font-weight: 700; white-space: nowrap; }
.sp-plat-glyph { flex: none; }

/* Brand glyph colors (overridden to muted in unsel/locked below) */
#sp-toggle-fb .sp-plat-glyph { color: #1877F2; }
#sp-toggle-ig .sp-plat-glyph { color: #d6336c; }

/* sel — idle + selected */
.sp-mode-sel { background: #faf3e6; border-color: #dcb86a; color: #9a7322; }
.sp-mode-sel .sp-plat-box { background: #b8924e; border-color: #b8924e; }
/* unsel — idle + not selected */
.sp-mode-unsel { background: #fff; border-color: #e6e0d5; color: #9a9489; }
.sp-mode-unsel .sp-plat-box { background: #fff; border-color: #c9c0b0; }
#sp-toggle-fb.sp-mode-unsel .sp-plat-glyph,
#sp-toggle-ig.sp-mode-unsel .sp-plat-glyph { color: #bcb4a4; }
/* posting — publishing + selected */
.sp-mode-posting { background: #fff; border-color: #e6e0d5; color: #7d776d; cursor: default; }
/* locked — publishing/result + not selected */
.sp-mode-locked { background: #faf9f5; border-color: #efe9dd; color: #c4bdb0; cursor: default; }
.sp-mode-locked .sp-plat-box { background: #f3efe6; border-color: #efe9dd; }
#sp-toggle-fb.sp-mode-locked .sp-plat-glyph,
#sp-toggle-ig.sp-mode-locked .sp-plat-glyph { color: #d8d1c4; }
/* ok — result + succeeded */
.sp-mode-ok { background: #f1f8f3; border-color: #cfe6d5; color: #2e7d4f; cursor: default; }
.sp-mode-ok .sp-plat-box { background: #2e9a59; border-color: #2e9a59; }
/* fail — result + failed */
.sp-mode-fail { background: #fdf3f1; border-color: #f2d8d2; color: #b5503f; cursor: default; }
.sp-mode-fail .sp-plat-box { background: #cf4444; border-color: #cf4444; }

/* Spinner — 0.8s linear rotate on a partial ring (round caps) */
.sp-spin { animation: sp-pubspin 0.8s linear infinite; transform-origin: center; }
@keyframes sp-pubspin { to { transform: rotate(360deg); } }

/* ── Publish button ── */
.sp-foot-publish {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 14px; font-weight: 800; color: #fff; border: none;
  padding: 11px 26px; border-radius: 11px;
}
.sp-pub-icon:empty { display: none; }
.sp-pub-icon { display: flex; align-items: center; }
.sp-pub--gold  { background: #b8924e; box-shadow: 0 2px 8px rgba(184,146,78,0.24); }
.sp-pub--green { background: #2e9a59; box-shadow: 0 2px 8px rgba(46,154,89,0.22); }
.sp-foot-publish:hover:not(:disabled) { filter: brightness(1.04); }
.sp-foot-publish:disabled { cursor: default; }

/* Stow the legacy photo editor offscreen — still functional for photo-load + bake. */
.sp-stowed { position: absolute !important; left: -100000px !important; top: 0 !important; }

/* ── Skeleton (empty) state — static, no animation ── */
.sp-skeleton .sp-hero,
.sp-skeleton .sp-tile,
.sp-skeleton .sp-story-bg {
  background: #e2dac8;   /* empty photo box — slightly darker warm tone */
}
.sp-skeleton .sp-fb-name,
.sp-skeleton .sp-fb-caption,
.sp-skeleton .sp-story-name,
.sp-skeleton .sp-story-title,
.sp-skeleton .sp-story-price {
  background: #ece6da;
}
.sp-skeleton .sp-fb-name,
.sp-skeleton .sp-fb-caption,
.sp-skeleton .sp-story-name,
.sp-skeleton .sp-story-title,
.sp-skeleton .sp-story-price { color: transparent !important; border-radius: 6px; }
.sp-skeleton .sp-fb-name     { width: 110px; height: 13px; }
.sp-skeleton .sp-fb-caption  { height: 52px; }
.sp-skeleton .sp-story-name  { width: 90px; height: 12px; }
.sp-skeleton .sp-story-title { width: 78%; height: 20px; }
.sp-skeleton .sp-story-price { width: 92px; height: 30px; display: inline-block; }
.sp-skeleton .sp-fb-sub,
.sp-skeleton .sp-story-time,
.sp-skeleton .sp-story-scrim,
.sp-skeleton .sp-story-line { visibility: hidden; }

/* ── Story composing state — shown while photos are sent to Haiku for
   exterior/interior ID and the 3-up stories are composed, so the first images
   the dealer sees are the correct stacked ones (no raw-photo flash). ── */
.sp-story-card.sp-story-busy .sp-story-bg,
.sp-story-card.sp-story-busy .sp-story-scrim,
.sp-story-card.sp-story-busy .sp-story-author,
.sp-story-card.sp-story-busy .sp-story-overlays,
.sp-story-card.sp-story-busy .sp-story-content,
.sp-story-card.sp-story-busy .sp-story-reply,
.sp-story-card.sp-story-busy .sp-story-progress { visibility: hidden; }
.sp-story-card.sp-story-busy::after {
  content: ''; position: absolute; inset: 0; z-index: 4;
  /* beige shimmer skeleton — same loading treatment as the rest of the preview */
  background-image: linear-gradient(100deg, #e6dfd2 25%, #f6f2ea 50%, #e6dfd2 75%);
  background-size: 200% 100%;
  animation: sp-shimmer 1.3s linear infinite;
}
.sp-skeleton .sp-foot-publish { opacity: 0.5; pointer-events: none; }

/* ── Loading shimmer: while photos download (sp-loading) and while the post
   generates (sp-generating, caption only) ── */
@keyframes sp-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sp-loading .sp-hero,
.sp-loading .sp-tile,
.sp-loading .sp-story-bg,
.sp-loading .sp-fb-name,
.sp-loading .sp-fb-caption,
.sp-loading .sp-story-name,
.sp-loading .sp-story-title,
.sp-loading .sp-story-price,
.sp-generating .sp-fb-caption {
  background-image: linear-gradient(100deg, #e6dfd2 25%, #f6f2ea 50%, #e6dfd2 75%);
  background-size: 200% 100%;
  animation: sp-shimmer 1.3s linear infinite;
}
.sp-generating .sp-fb-caption {
  min-height: 52px;
  color: transparent !important;
  border-radius: 6px;
}

/* Match the tone chips' design language (.pe-badge-chip + --tone active). */
.hol-chip {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.82rem;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.hol-chip:hover { border-color: var(--accent); color: var(--text-primary); }
.hol-chip.active {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--accent);
}

/* Crop row */
.pe-crop-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.pe-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pe-pill {
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.32rem;
  min-width: 3.4rem;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.pe-pill:hover { border-color: var(--accent); color: var(--text-primary); }
.pe-pill.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

/* Aspect-ratio icons — proportionally exact rectangles drawn with currentColor */
.ratio-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
}
.ratio-ico i {
  display: block;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  box-sizing: border-box;
}
.ratio-ico--free i { width: 1.15rem; height: 1.15rem; border-style: dashed; }
.ratio-ico--1-1  i { width: 1.1rem;  height: 1.1rem; }
.ratio-ico--4-5  i { width: 1rem;    height: 1.25rem; }
.ratio-ico--16-9 i { width: 1.25rem; height: 0.7rem; }
.ratio-ico--9-16 i { width: 0.7rem;  height: 1.25rem; }
/* Active pill: fill the rectangle with a soft accent wash */
.pe-pill.active .ratio-ico i { background: var(--accent-glow); }
.ratio-lbl { line-height: 1; font-weight: 600; }

/* Overlays + Holiday rows — same column layout + padding */
.pe-overlays-row,
.pe-holiday-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
}
.pe-badges-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pe-hint {
  font-size: 0.72rem;
  color: var(--text-dim);
}
.pe-badge-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pe-badge-chip {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.82rem;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.pe-badge-chip:hover { border-color: var(--accent); color: var(--text-primary); }
.pe-badge-chip.active {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--accent);
}
/* Holiday overlays + tone sub-row */
.pe-badge-chip--holiday {
  border-color: var(--orange);
  color: var(--text-primary);
  font-weight: 600;
}
.pe-badge-chip--holiday.active {
  border-color: var(--orange);
  background: rgba(249,115,22,0.14);
  color: var(--orange);
}
.pe-holiday-tones {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}
.pe-tone-label { font-size: 0.78rem; }
.pe-badge-chip--tone.active {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--accent);
}
.pe-badge-chip--vi {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.pe-badge-chip--vi.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.pe-badge-chip--vi.loading {
  background: linear-gradient(90deg,
    var(--accent) 0%,
    rgba(255,255,255,0.35) 40%,
    var(--accent) 70%
  );
  background-size: 250% auto;
  color: #fff;
  border-color: transparent;
  cursor: default;
  animation: pe-vi-shimmer 1.4s linear infinite;
}
@keyframes pe-vi-shimmer {
  0%   { background-position: 100% center; }
  100% { background-position: -100% center; }
}

/* Scraped data chips (second row — shown only when listing data is available) */
.pe-scraped-chips {
  padding-top: 0.1rem;
}
.pe-badge-chip--scraped {
  border-color: var(--border);
  color: var(--text-dim);
  font-size: 0.78rem;
}
.pe-badge-chip--scraped:hover { border-color: #4ecca3; color: var(--text-primary); }
.pe-badge-chip--scraped.active {
  border-color: #4ecca3;
  background: rgba(78, 204, 163, 0.12);
  color: #4ecca3;
}

/* Footer */
.pe-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1.25rem 1.25rem 0;
  border-top: 1px solid var(--border);
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ── Post Style + Generate section ── */
.pe-gen-section {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 16px 1.25rem 16px 0;
}
.pe-gen-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pe-gen-title { font-size: 13px; font-weight: 800; color: #111111; }
.pe-gen-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pe-footer-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ───── Auto-Scheduler modal ───── */
.sched-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: none; align-items: center; justify-content: center;
  z-index: 1000; padding: 1rem;
}
.sched-modal-backdrop.open { display: flex; }
.sched-modal {
  background: var(--bg-panel);
  background-clip: padding-box;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: min(700px, 96vw); /* match .sp-modal width */
  max-height: 90vh;
  overflow: hidden; /* rounded shell clips; scrolling moves to .sched-modal-body (see .sp-modal) */
  display: flex;
  flex-direction: column;
}
.sched-modal-header {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.sched-modal-title { font-weight: 700; font-size: 1.05rem; }
.sched-modal-close {
  background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary);
  font-size: 1.4rem; cursor: pointer; line-height: 1;
  padding: 0.05rem 0.45rem; border-radius: 6px;
  transition: background var(--transition), color var(--transition);
}
.sched-modal-close:hover { background: var(--border); }
.sched-modal-body  { padding: 1rem 1.2rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sched-modal-footer {
  padding: 0.85rem 1.2rem;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 0.6rem;
}

.sched-status-inline {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 0.8rem;
}
.sched-status-inline.on {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.35);
  border-left: 3px solid #22c55e;
}
.sched-status-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.1rem; }
.sched-status-hint  { color: var(--text-dim); font-size: 0.8rem; }

.sched-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.sched-switch input { opacity: 0; width: 0; height: 0; }
.sched-switch .slider {
  position: absolute; inset: 0; background: #4b5563;
  border-radius: 999px; transition: background 0.18s; cursor: pointer;
}
.sched-switch .slider::before {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; background: #fff; border-radius: 50%;
  transition: transform 0.18s;
}
.sched-switch input:checked + .slider { background: #22c55e; }
.sched-switch input:checked + .slider::before { transform: translateX(20px); }

.sched-section {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
}
.sched-section:last-child { border-bottom: none; padding-bottom: 0; }
.sched-section-title { font-weight: 700; font-size: 0.92rem; margin-bottom: 0.6rem; }

.sched-radio-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.2rem 0; font-size: 0.88rem;
}
.sched-radio-row input[type="number"],
#sched-posts-per-day-input {
  width: 60px; padding: 0.25rem 0.4rem; font-size: 0.85rem;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-primary);
}

.sched-day-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.4rem; }
.sched-day-chip {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-panel-alt);
  color: var(--text-muted);
  font-size: 0.78rem; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sched-day-chip.on {
  background: rgba(34,197,94,0.18);
  border-color: #22c55e;
  color: #86efac;
}

.sched-times {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem;
}
.sched-time-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.25rem 0.5rem 0.25rem 0.6rem;
  font-size: 0.82rem;
}
.sched-time-chip input {
  background: transparent; border: none; color: var(--text-primary);
  font-size: 0.82rem; width: 86px;
}
.sched-time-chip button {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 0;
}
.sched-add-time {
  background: none; border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--text-muted); font-size: 0.8rem;
  padding: 0.25rem 0.6rem; cursor: pointer;
}
.sched-add-time:hover { color: var(--text-primary); border-color: var(--text-muted); }

.sched-checkbox-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0; font-size: 0.88rem;
}
.sched-checkbox-row input { accent-color: #22c55e; }
.sched-checkbox-row.disabled { opacity: 0.45; }

.sched-preview {
  margin-top: 0.8rem;
  padding: 0.65rem 0.85rem;
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.35);
  border-left: 3px solid #3b82f6;
  border-radius: 6px;
  font-size: 0.82rem;
  color: #bfdbfe;
}

.sched-phase1-note {
  background: rgba(234,179,8,0.1);
  border: 1px solid rgba(234,179,8,0.4);
  border-left: 3px solid #eab308;
  border-radius: 6px;
  padding: 0.55rem 0.8rem;
  font-size: 0.78rem;
  color: #fde68a;
  margin-bottom: 0.6rem;
}

/* Auto-scheduler: queue list inside the modal */
.sched-queue-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 2px;
}
.sched-queue-empty {
  padding: 0.8rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
}
.sched-queue-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
}
.sched-queue-thumb {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  flex: 0 0 56px;
}
.sched-queue-body {
  flex: 1;
  min-width: 0;
}
.sched-queue-title {
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sched-queue-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}
.sched-queue-status {
  flex: 0 0 auto;
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sched-queue-status--pending { background: rgba(59,130,246,0.15); color: #93c5fd; }
.sched-queue-status--firing  { background: rgba(234,179,8,0.15); color: #fde68a; }
.sched-queue-status--posted  { background: rgba(34,197,94,0.15); color: #86efac; }
.sched-queue-status--failed  { background: var(--danger-bg); color: var(--red); }
.sched-queue-status--skipped { background: rgba(148,163,184,0.15); color: #cbd5e1; }
.sched-queue-row--posted,
.sched-queue-row--failed,
.sched-queue-row--skipped {
  opacity: 0.75;
}
.sched-queue-meta {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sched-queue-cancel {
  flex: 0 0 auto;
  padding: 0.3rem 0.7rem !important;
  font-size: 0.78rem !important;
}

/* ── Auto-Scheduler modal — day-mode palette + legibility ──────────
   Base styles are dark-themed: pale text (#fde68a, #86efac, #93c5fd…)
   on dark/white-alpha tints, and bright #22c55e greens that clash with
   the warm paper palette. In light mode that text is illegible and the
   colors are off-brand, so remap to the day-mode tokens. */
[data-theme="light"] .sched-switch .slider { background: #d0c9bb; }
[data-theme="light"] .sched-switch input:checked + .slider { background: var(--green); }

[data-theme="light"] .sched-status-inline.on {
  background: rgba(42,122,79,0.08);
  border-color: rgba(42,122,79,0.30);
  border-left-color: var(--green);
}

[data-theme="light"] .sched-day-chip.on {
  background: rgba(42,122,79,0.12);
  border-color: var(--green);
  color: var(--green);
}
[data-theme="light"] .sched-checkbox-row input { accent-color: var(--green); }

[data-theme="light"] .sched-phase1-note {
  background: var(--accent-glow);
  border-color: rgba(201,169,110,0.45);
  border-left-color: var(--accent);
  color: var(--text-primary);
}
[data-theme="light"] .sched-preview {
  background: var(--bg-panel-alt);
  border-color: var(--border);
  border-left-color: var(--accent);
  color: var(--text-primary);
}

[data-theme="light"] .sched-queue-empty { background: var(--bg-panel-alt); }
[data-theme="light"] .sched-queue-row {
  background: var(--bg-panel-alt);
  border-color: var(--border);
}
[data-theme="light"] .sched-queue-thumb { background: var(--bg-input); }

/* Status badges: keep the tinted pill, darken the text for contrast on white */
[data-theme="light"] .sched-queue-status--pending { color: #1d4ed8; }
[data-theme="light"] .sched-queue-status--firing  { color: var(--orange); }
[data-theme="light"] .sched-queue-status--posted  { color: var(--green); }
[data-theme="light"] .sched-queue-status--failed  { color: var(--red); }
[data-theme="light"] .sched-queue-status--skipped { color: var(--text-muted); }

/* Count badge on the "Manage scheduled posts" button */
.sched-queue-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 0.35rem;
  background: #3b82f6;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 9px;
  line-height: 1;
}
/* Day mode: gold badge (blue stays for dark mode). Dark text for contrast —
   white on our gold (#C9A96E) is too low-contrast to read. */
[data-theme="light"] .sched-queue-count-badge {
  background: var(--accent);
  color: #1a1a18;
}


/* =========================================================
   CREATE POSTS — LIGHT MODE REDESIGN  (warm paper system)
   Component-level styling for the dashboard at "/". Everything here is scoped
   to [data-theme="light"] so dark mode is untouched. Color tokens are
   defined in the LIGHT MODE block above; this block handles layout/structure:
   the slim dark nav bar, the paper tab bar with pills, section cards, the
   inventory list, and the photos dropzone. New markup (filter pills, dropzone
   subtext) is hidden by default and revealed only under light, so the dark
   layout is byte-for-byte unchanged.
   ========================================================= */

/* ── Top bar: slim dark nav ──────────────────────────────── */
/* Same dimensions as dark mode (header height, logo size all inherited) — we
   only recolor the bar to the dark surface and recolor its contents. */
[data-theme="light"] header {
  background: #1A1A18;
  border-bottom: none;
  box-shadow: none;
}
[data-theme="light"] header::before { display: none; }
[data-theme="light"] .logo-text { color: #F5F2EC; }
[data-theme="light"] .logo-accent { color: var(--accent); }
[data-theme="light"] .header-tagline {
  color: #666666;
  border-left: 2px solid #333333;
}
[data-theme="light"] .btn-settings {
  background: transparent;
  border: 1px solid #333333;
  color: #AAAAAA;
}
[data-theme="light"] .btn-settings:hover {
  border-color: #555555;
  color: #E8E0D0;
}
[data-theme="light"] #logout-btn {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}
[data-theme="light"] #logout-btn:hover {
  background: var(--accent-glow);
}

/* ── Tab bar: warm paper strip ───────────────────────────── */
[data-theme="light"] .main-nav {
  background: #EEEAE2;
  border-bottom: 1px solid #DDD8CE;
  box-shadow: none;
}
[data-theme="light"] .main-nav-tab {
  color: #888888;
  background: transparent;
}
[data-theme="light"] .main-nav-tab:hover { color: #1A1A18; }
[data-theme="light"] .main-nav-tab.active {
  color: #1A1A18;
  background: transparent;
  border-bottom-color: var(--accent);
}

/* Smart Inbox and Insights stay plain text tabs exactly like dark mode — same
   layout, same standard count badges. No pills. */

/* ── Section cards + step badges ─────────────────────────── */
[data-theme="light"] .step-header {
  border-bottom-color: #F0ECE4;
}
[data-theme="light"] .step-number {
  background: #1A1A18;
  color: #E8E0D0;
}
[data-theme="light"] .step-number.done {
  background: var(--green);
  color: #fff;
}

/* ── Field labels (editorial caps) ───────────────────────── */
[data-theme="light"] .form-group label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #AAAAAA;
}

/* ── Inventory picker ────────────────────────────────────── */
/* Bordered list container with row dividers instead of floating rows. */
[data-theme="light"] .v-inv-list {
  border: 1px solid #EDE9E0;
  border-radius: 8px;
  overflow: hidden;
  gap: 0;
}
[data-theme="light"] .v-inv-row {
  border-radius: 0;
  padding: 10px 14px;
  border-bottom: 1px solid #F5F2EC;
}
[data-theme="light"] .v-inv-row:last-child { border-bottom: none; }
[data-theme="light"] .v-inv-row:hover { background: #F9F7F2; }
[data-theme="light"] .v-inv-row.selected {
  background: #F5F0E8;
  border-left: 3px solid var(--accent);
  padding-left: 11px;   /* 14 - 3 so content stays aligned */
}
[data-theme="light"] .v-inv-name {
  font-size: 13px;
  font-weight: 600;
  color: #1A1A18;
}
[data-theme="light"] .v-inv-meta { font-size: 11px; color: #AAAAAA; }
[data-theme="light"] .v-inv-price {
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
}
[data-theme="light"] .v-inv-age { font-size: 11px; color: #C8C4BA; }
[data-theme="light"] .v-btn-browse {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

/* Filter pills replace the single "5 most recent" badge in light mode. */
#inv-filter-pills { display: none; }
[data-theme="light"] #inv-filter-pills { display: flex; gap: 6px; }
[data-theme="light"] #inv-badge { display: none; }
.inv-filter-pill {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #DDD8CE;
  background: transparent;
  color: #888888;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.inv-filter-pill:hover { color: #1A1A18; }
.inv-filter-pill.active {
  background: #1A1A18;
  color: #E8E0D0;
  border-color: #1A1A18;
}

/* ── Photos dropzone ─────────────────────────────────────── */
[data-theme="light"] .canvas-placeholder {
  border: 1.5px dashed #DDD8CE;
  border-radius: 8px;
  background: #FAFAF7;
}
[data-theme="light"] .placeholder-upload-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  font-weight: 600;
  padding: 0;
}
[data-theme="light"] .placeholder-upload-btn:hover { text-decoration: underline; }
.lm-dropzone-sub { display: none; }
[data-theme="light"] .lm-dropzone-sub {
  display: block;
  font-size: 0.72rem;
  color: #AAAAAA;
}

/* ──────────────────────────────────────────────────────────────────────────
   PostDistributionCard — light/cream composer theme (NOT Action Center dark).
   ────────────────────────────────────────────────────────────────────────── */
.pdc-card {
  position: relative;
  /* Align the card's gutters with the .panel.step-panel content box (the panel
     already supplies 1.5rem side padding), and match its vertical rhythm. */
  margin: 1.5rem 0 0.5rem;
  background: #fff;
  border: 1px solid #E8D4AB;
  border-radius: 14px;
  box-shadow: 0 0 0 3px rgba(200,164,90,.09);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #2B2722;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.pdc-card.pdc-in  { opacity: 1; transform: translateY(0); }
.pdc-card.pdc-out { opacity: 0; transform: translateY(8px); }

.pdc-dismiss {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  background: transparent; border: none; border-radius: 7px; color: #9A9382;
}
.pdc-dismiss:hover { background: #F6F0E3; color: #7C7565; }

/* Header band */
.pdc-head {
  padding: 16px 44px 14px 20px;
  background: linear-gradient(180deg, #FFFCF5, #fff);
  border-bottom: 1px solid #EFE7D5;
}
.pdc-title   { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: #2B2722; }
.pdc-subline { margin-top: 3px; font-size: 0.82rem; font-weight: 500; color: #7C7565; }
.pdc-price   { color: #1B7A45; font-weight: 700; }

/* Channel rows */
.pdc-rows { padding: 0 20px; }
.pdc-row  { display: flex; align-items: center; gap: 13px; padding: 14px 0; border-bottom: 1px solid #F0EADD; }
.pdc-row:last-child { border-bottom: none; }

.pdc-tile {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 11px; color: #fff;
}
.pdc-tile--dim { opacity: .55; }
.pdc-tile--fb { background: #1877F2; }
.pdc-tile--mp { background: #1877F2; }
.pdc-tile--ig { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.pdc-tile-badge {
  position: absolute; right: -4px; bottom: -4px;
  display: flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: #A87E3C; border: 2.5px solid #fff;
}

.pdc-mid { flex: 1 1 auto; min-width: 0; }
.pdc-name    { font-size: 0.9rem; font-weight: 700; color: #2B2722; }
.pdc-row-sub { margin-top: 2px; font-size: 0.78rem; font-weight: 500; color: #9A9382; }
.pdc-sub--ok    { color: #1B7A45; }
.pdc-sub--fail  { color: #C0392B; }
.pdc-sub--muted { color: #9A9382; }

.pdc-right { flex: none; }

/* Done pill */
.pdc-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 999px;
  background: #E9F6EE; border: 1px solid #C8E8D4; color: #1B7A45;
  font-size: 0.8rem; font-weight: 700;
}

/* Buttons */
.pdc-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: inherit; font-size: 0.82rem; font-weight: 700;
  padding: 8px 14px; border-radius: 9px; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pdc-btn:disabled { cursor: default; }
.pdc-btn--primary { background: #1877F2; color: #fff; }
.pdc-btn--primary:hover:not(:disabled) { background: #0e63d0; }
.pdc-btn--outline { background: #fff; border-color: #D8CFBC; color: #2B2722; }
.pdc-btn--outline:hover:not(:disabled) { border-color: #bc1888; color: #bc1888; }
.pdc-btn--ghost   { background: transparent; color: #7C7565; }

.pdc-spin { animation: sp-pubspin .8s linear infinite; transform-origin: center; }

/* Footer */
.pdc-foot {
  padding: 11px 20px; background: #FBF8F1; border-top: 1px solid #EFE7D5;
}
.pdc-foot-text { font-size: 0.78rem; font-weight: 500; color: #9A9382; }

/* "Extension added ✓" transient confirmation */
.pdc-ext-added {
  position: absolute; right: 14px; bottom: 52px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  background: #E9F6EE; border: 1px solid #C8E8D4; color: #1B7A45;
  font-size: 0.78rem; font-weight: 700;
  opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.pdc-ext-added--in { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════════════════
   Post History redesign (.ph-*) — warm cream-and-gold. Overrides the .panel
   base for the history card; old .history-* card rules no longer match the
   new markup and are inert.
   ═══════════════════════════════════════════════════════════════════════════ */
.ph-card {
  width: 100%;
  padding: 0;
  background: #fff;
  border: 1px solid #e6e0d5;
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(40,32,16,0.05);
  overflow: visible;
}

/* ── Header ── */
.ph-head {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 26px 18px; border-bottom: 1px solid #f1ece2;
}
.ph-head-left { display: flex; align-items: center; gap: 12px; }
.ph-clock-chip {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 9px;
  background: #faf3e6; border: 1px solid #ecdcae;
}
.ph-head-text { display: flex; flex-direction: column; gap: 2px; }
.ph-title   { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: #1c1a17; line-height: 1.2; }
.ph-summary { font-size: 12.5px; font-weight: 500; color: #a39d92; }

.ph-search { position: relative; flex: none; width: 300px; max-width: 42vw; }
.ph-search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.ph-search input {
  width: 100%; box-sizing: border-box; padding: 9px 12px 9px 34px;
  background: #faf9f5; border: 1.5px solid #e6e0d5; border-radius: 10px;
  font-family: inherit; font-size: 13.5px; color: #3a352d;
}
.ph-search input::placeholder { color: #a39d92; }
.ph-search input:focus { outline: none; border-color: #dcb86a; background: #fff; }

/* ── Filter row ── */
.ph-filter {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 26px; background: #faf9f5; border-bottom: 1px solid #f1ece2;
}
.ph-tabs { display: flex; gap: 8px; }
.ph-tab {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 14px; border-radius: 9px; font-family: inherit;
  font-size: 13px; font-weight: 700; color: #5c574e;
  background: #fff; border: 1px solid #e6e0d5;
}
.ph-tab:hover:not(.active) { border-color: #dcc99a; }
.ph-tab.active { background: #1c1a17; border-color: #1c1a17; color: #fff; }
.ph-tab-count { font-size: 12px; font-weight: 700; color: #a39d92; }
.ph-tab.active .ph-tab-count { color: #c6a667; }

.ph-filter-right { display: flex; align-items: center; gap: 11px; }
.ph-manage-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 12px; border-radius: 9px; font-family: inherit;
  font-size: 12.5px; font-weight: 600; color: #5c574e;
  background: #fff; border: 1px solid #e6e0d5;
}
.ph-manage-btn:hover { border-color: #dcc99a; }
.sched-queue-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
  background: #b8924e; color: #fff; font-size: 11px; font-weight: 700;
}
.ph-sort-label { font-size: 12.5px; font-weight: 600; color: #a39d92; }
.ph-sort-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 13px; border-radius: 9px; font-family: inherit;
  font-size: 13px; font-weight: 700; color: #3a352d;
  background: #fff; border: 1px solid #e6e0d5;
}
.ph-sort-btn:hover { border-color: #dcc99a; }
.ph-sort-btn svg { color: #b8924e; }

/* ── List ── */
.ph-list { display: flex; flex-direction: column; gap: 14px; padding: 18px 26px 6px; }

/* ── Post card ── */
.ph-post {
  display: flex; gap: 18px; padding: 15px;
  border: 1.5px solid #ece6da; border-radius: 14px; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ph-post:hover { border-color: #dcc99a; box-shadow: 0 4px 16px -6px rgba(120,90,30,0.22); }
.ph-post--sold { background: #faf8f3; opacity: 0.72; }

/* Hero thumbnail */
.ph-thumb {
  position: relative; flex: none; width: 190px; height: 142px;
  border-radius: 11px; overflow: hidden; background: #ece6da; cursor: pointer;
}
.ph-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-thumb-count {
  position: absolute; right: 8px; bottom: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: 7px;
  background: rgba(12,9,4,0.6); color: #fff; font-size: 11px; font-weight: 700;
}
.ph-sold-stamp {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(18,14,8,0.42);
}
.ph-sold-stamp span {
  transform: rotate(-13deg);
  border: 3px solid rgba(255,255,255,0.92); border-radius: 7px;
  padding: 4px 14px; color: #fff; font-size: 22px; font-weight: 800; letter-spacing: 0.06em;
}

/* Info column */
.ph-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ph-row1 { display: flex; align-items: flex-start; gap: 10px; }
.ph-row1-text { flex: 1 1 auto; min-width: 0; }
.ph-name {
  font-size: 16.5px; font-weight: 800; color: #1c1a17; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ph-price-line { margin-top: 3px; display: flex; align-items: center; gap: 7px; font-size: 13px; }
.ph-price { font-size: 15px; font-weight: 800; color: #2a5b3c; }
.ph-post--sold .ph-price { color: #a39d92; text-decoration: line-through; }
.ph-dot { color: #cabfae; }
.ph-age { color: #7d776d; font-weight: 500; }

/* "Shared to" labelled pills — Post (FB feed) + Story. Two-signal design:
   shape (card vs ring) AND tone (ink vs gold). Off = not shared / not built. */
.ph-shared { display: inline-flex; align-items: center; gap: 6px; }
.ph-row1-meta { flex: none; display: flex; align-items: center; gap: 9px; margin-top: 4px; }
.ph-row1-meta .ph-age { font-size: 13px; white-space: nowrap; }
.ph-chan-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 700; line-height: 1;
  padding: 3px 9px 3px 7px; border-radius: 6px;
  border: 1px solid var(--border, #DDD8CE); white-space: nowrap;
}
.ph-chan-pill svg { flex: none; }
.ph-chan-pill--post  { background: #FAFAF7; color: #1A1A18; }
.ph-chan-pill--story { background: rgba(201,169,110,0.14); border-color: rgba(201,169,110,0.45); color: #8A6A2C; }
.ph-chan-pill--off   { opacity: 0.32; }

/* Overflow menu */
.ph-overflow { position: relative; flex: none; }
.ph-overflow-btn {
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  width: 34px; height: 34px; border-radius: 9px; color: #7d776d;
  background: transparent; border: 1px solid transparent;
}
.ph-overflow-btn:hover { background: #faf7f0; border-color: #ece6da; }
.ph-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  min-width: 178px; padding: 6px; background: #fff;
  border: 1px solid #e6e0d5; border-radius: 12px; box-shadow: 0 12px 30px -8px rgba(40,32,16,0.28);
}
.ph-menu[hidden] { display: none; }
.ph-menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer;
  padding: 9px 10px; border-radius: 8px; font-family: inherit;
  font-size: 13px; font-weight: 600; text-align: left;
  background: transparent; border: none; color: #3a352d;
}
.ph-menu-item:hover { background: #faf7f0; }
.ph-menu-item--sold { color: #2e7d4f; }
.ph-menu-item--del  { color: #cf4444; }
.ph-menu-sep { height: 1px; margin: 4px 6px; background: #f1ece2; }

/* Caption */
.ph-caption {
  margin-top: 8px; padding-right: 36px; max-width: 640px;
  font-size: 13px; line-height: 1.55; color: #7d776d;
  white-space: pre-line; /* honor the line breaks in the generated post */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.ph-caption.ph-caption--expanded {
  display: block; -webkit-line-clamp: unset; overflow: visible; max-height: none;
}
.ph-caption-toggle {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  margin-top: 7px; padding: 2px 0; background: none; border: none;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: #9a7322;
}
.ph-caption-toggle[hidden] { display: none; }
.ph-caption-toggle:hover { color: #b8924e; }
.ph-caption-toggle svg { transition: transform .2s ease; }
.ph-caption-toggle.is-open svg { transform: rotate(180deg); }

/* Action row */
.ph-actions { margin-top: auto; padding-top: 13px; display: flex; align-items: center; gap: 10px; }

/* Split repost button */
.ph-repost-split { position: relative; display: inline-flex; }
.ph-repost-main {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 9px 15px; border: none; border-radius: 10px 0 0 10px;
  background: #b8924e; color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 700;
}
.ph-repost-main:hover { background: #a9853f; }
.ph-repost-caret {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  width: 32px; border: none; border-left: 1px solid rgba(255,255,255,0.28); border-radius: 0 10px 10px 0;
  background: #a9853f; color: #fff;
}
.ph-repost-caret:hover { background: #9a7836; }
.ph-repost-pop {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30;
  min-width: 248px; padding: 8px; background: #fff;
  border: 1px solid #e6e0d5; border-radius: 13px; box-shadow: 0 -10px 30px -8px rgba(40,32,16,0.26);
}
.ph-repost-pop[hidden] { display: none; }
.ph-repost-pop-title { padding: 5px 8px 7px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #a39d92; }
.ph-repost-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; }
.ph-repost-row:hover { background: #faf7f0; }
.ph-chan-glyph { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; color: #fff; flex: none; }
.ph-chan-glyph--fb { background: #2a6fdb; }
.ph-chan-glyph--ig { background: #c0367a; }
.ph-chan-name { flex: 1 1 auto; font-size: 13px; font-weight: 700; color: #3a352d; }
.ph-chan-repost {
  cursor: pointer; padding: 5px 12px; border-radius: 8px;
  background: #faf3e6; border: 1px solid #ecdcae; color: #9a7322;
  font-family: inherit; font-size: 12px; font-weight: 700;
}
.ph-chan-repost:hover { background: #f5e9cf; }

/* Marketplace button */
.ph-mp-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 16px; border: none; border-radius: 10px;
  background: #2a6fdb; color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 700;
}
.ph-mp-btn:hover { background: #2461c2; }
.ph-mp-btn:disabled { opacity: 0.6; cursor: default; }

/* Inline success flash */
.ph-flash {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; color: #2e7d4f;
  opacity: 0; transition: opacity .2s ease;
}
.ph-flash.show { opacity: 1; }

/* EN/ES caption toggle (preserved bilingual support) */
.ph-lang { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: middle; }
.ph-lang-btn {
  cursor: pointer; padding: 2px 7px; border-radius: 6px; font-family: inherit;
  font-size: 10.5px; font-weight: 700; color: #9a9489; background: #f4efe6; border: 1px solid #e6e0d5;
}
.ph-lang-btn.active { background: #1c1a17; color: #fff; border-color: #1c1a17; }

/* ── Pagination ── */
.ph-pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 26px; border-top: 1px solid #f1ece2;
}
.ph-showing { font-size: 12.5px; font-weight: 500; color: #7d776d; }
.ph-page-nav { display: flex; align-items: center; gap: 6px; }
.ph-page {
  min-width: 32px; height: 32px; padding: 0 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: #fff; border: 1px solid #e6e0d5;
  font-family: inherit; font-size: 13px; font-weight: 700; color: #5c574e;
}
.ph-page:hover:not(:disabled):not(.active) { border-color: #dcc99a; }
.ph-page.active { background: #b8924e; border-color: #b8924e; color: #fff; }
.ph-page-arrow svg { display: block; }
.ph-page:disabled { color: #d8d1c4; cursor: default; }
.ph-page-ellipsis { padding: 0 4px; color: #a39d92; font-weight: 700; }

/* ── Empty state ── */
.ph-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 46px 20px 50px; gap: 12px; }
.ph-empty-circle {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; background: #faf3e6; border: 1px solid #ecdcae;
}
.ph-empty-title { font-size: 16px; font-weight: 800; color: #3a352d; }
.ph-empty-hint  { font-size: 13px; font-weight: 500; color: #a39d92; }

/* ── Video Post History — reuses the ph- card system, adds video-only bits ── */
.vh-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; background: #1c1a17; }
.vh-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(12,9,4,0.26); transition: background .15s ease; pointer-events: none;
}
.vh-play svg { filter: drop-shadow(0 2px 5px rgba(0,0,0,0.45)); opacity: 0.95; }
.ph-thumb:hover .vh-play { background: rgba(12,9,4,0.40); }
.vh-copy-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 9px 15px; border-radius: 10px; font-family: inherit;
  font-size: 13.5px; font-weight: 700; color: #3a352d;
  background: #fff; border: 1px solid #e6e0d5;
}
.vh-copy-btn:hover { border-color: #dcc99a; }
.vh-copy-btn svg { color: #b8924e; }

.sched-queue-row.sched-queue-flash { box-shadow: 0 0 0 2px #b8924e; border-radius: 10px; transition: box-shadow .25s ease; }

/* ═══════════════════════════════════════════════════════════════════════════
   Post History — Published/Scheduled segmented control + inline Scheduled view
   ═══════════════════════════════════════════════════════════════════════════ */
.ph-seg { display: inline-flex; gap: 4px; padding: 4px; background: #f4f1ea; border: 1px solid #e6e0d5; border-radius: 12px; }
.ph-seg-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 14px; border: none; border-radius: 9px; background: transparent;
  font-family: inherit; font-size: 13px; font-weight: 700; color: #8a847a;
}
.ph-seg-btn.active { background: #fff; color: #1c1a17; box-shadow: 0 1px 2px rgba(40,32,16,0.12); }
.ph-seg-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 700;
  background: #e3ddd0; color: #7d776d;
}
.ph-seg-btn.active .ph-seg-badge { background: #b8924e; color: #fff; }

/* ── Scheduled view ── */
.ph-search { position: relative; width: 270px; max-width: 38vw; }

.ps-banner {
  display: flex; align-items: center; gap: 14px; padding: 15px 26px;
  background: #faf9f5; border-bottom: 1px solid #f1ece2;
}
.ps-banner.on { background: #f1f8f3; }
.ps-banner-text { flex: 1; min-width: 0; }
.ps-banner-title { font-size: 0.95rem; font-weight: 700; color: #1c1a17; }
.ps-banner-sub { font-size: 0.8rem; font-weight: 500; color: #7d776d; margin-top: 1px; }

/* iOS toggle */
.ps-switch { position: relative; flex: none; cursor: pointer; }
.ps-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ps-switch-track { display: block; width: 44px; height: 26px; border-radius: 999px; background: #d8d1c4; transition: background .2s ease; }
.ps-switch-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform .2s ease; }
.ps-switch input:checked + .ps-switch-track { background: #2e9a59; }
.ps-switch input:checked + .ps-switch-track .ps-switch-knob { transform: translateX(18px); }

.ps-btn { cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 9px; border: 1px solid transparent; }
.ps-btn--outline { background: #fff; border-color: #e6e0d5; color: #5c574e; }
.ps-btn--outline:hover { border-color: #dcc99a; }
.ps-btn--ghost { background: transparent; color: #9a7322; }
.ps-btn--ghost:hover { color: #b8924e; }
.ps-btn--gold { background: #b8924e; color: #fff; }
.ps-btn--gold:hover { filter: brightness(1.05); }
.ps-btn--green { background: #2e9a59; color: #fff; }
.ps-btn:disabled { opacity: 0.55; cursor: default; }

.ps-cols { display: flex; align-items: stretch; }
.ps-rule { flex: 0 0 372px; max-width: 372px; border-right: 1px solid #f1ece2; padding: 18px 20px; box-sizing: border-box; }
.ps-queue { flex: 1; min-width: 0; padding: 18px 22px; }

/* Outcome card */
.ps-outcome { background: #faf7f0; border: 1px solid #ece6da; border-radius: 13px; padding: 15px 16px; margin-bottom: 14px; }
.ps-outcome-big { font-size: 1.7rem; font-weight: 800; color: #b8924e; letter-spacing: -0.02em; line-height: 1.1; }
.ps-outcome-big span { font-size: 0.95rem; font-weight: 700; color: #9a7322; }
.ps-outcome-line { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 0.82rem; font-weight: 600; color: #3a352d; }
.ps-outcome-line svg { color: #b8924e; flex: none; }
.ps-outcome-line.muted { color: #7d776d; }

/* Suggested-schedule (review) card */
.ps-suggest-card { border: 1px solid #e3cf9f; background: #faf3e6; border-radius: 13px; padding: 14px; }
.ps-suggest-head { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.ps-suggest-head svg { color: #b8924e; }
.ps-suggest-title { font-size: 0.92rem; font-weight: 800; color: #1c1a17; }
.ps-reco-tag { margin-left: auto; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; color: #9a7322; background: #fff; border: 1px solid #e3cf9f; padding: 3px 7px; border-radius: 6px; }
.ps-sum-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid #efe2c4; }
.ps-sum-row:first-of-type { border-top: none; }
.ps-sum-chip { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: #fff; border: 1px solid #e3cf9f; color: #9a7322; }
.ps-sum-text { font-size: 0.82rem; font-weight: 600; color: #3a352d; line-height: 1.35; }
.ps-sum-text b { font-weight: 800; color: #1c1a17; }
.ps-suggest-actions { display: flex; gap: 9px; margin-top: 13px; }
.ps-suggest-actions .ps-btn { flex: 1; }

/* Edit configurator */
.ps-edit-section { padding: 13px 0; border-top: 1px solid #f1ece2; }
.ps-edit-section:first-child { border-top: none; padding-top: 4px; }
.ps-edit-head { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #a39d92; margin-bottom: 10px; }
.ps-edit-head b { color: #9a7322; }
.ps-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.ps-field-label { font-size: 0.82rem; font-weight: 600; color: #3a352d; }
.ps-stepper { display: inline-flex; align-items: center; border: 1px solid #e6e0d5; border-radius: 9px; overflow: hidden; }
.ps-stepper button { width: 30px; height: 30px; cursor: pointer; border: none; background: #faf9f5; color: #5c574e; font-size: 16px; font-weight: 700; }
.ps-stepper button:hover { background: #f4efe6; }
.ps-stepper span { min-width: 38px; text-align: center; font-size: 0.85rem; font-weight: 700; color: #1c1a17; }
.ps-match { font-size: 0.78rem; font-weight: 700; color: #1b7a45; background: #eef5f0; border: 1px solid #cfe6d5; padding: 5px 9px; border-radius: 8px; display: inline-block; margin-top: 4px; }

.ps-presets { display: flex; gap: 6px; margin-bottom: 10px; }
.ps-preset { cursor: pointer; font-family: inherit; font-size: 0.74rem; font-weight: 700; padding: 5px 10px; border-radius: 8px; background: #fff; border: 1px solid #e6e0d5; color: #5c574e; }
.ps-preset.active { background: #faf3e6; border-color: #dcb86a; color: #9a7322; }
.ps-days { display: flex; gap: 5px; margin-bottom: 12px; }
.ps-day { width: 30px; height: 30px; cursor: pointer; border-radius: 50%; border: 1px solid #e6e0d5; background: #fff; font-family: inherit; font-size: 0.74rem; font-weight: 700; color: #7d776d; }
.ps-day.on { background: #b8924e; border-color: #b8924e; color: #fff; }
.ps-times { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ps-time { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; color: #9a7322; background: #faf3e6; border: 1px solid #e3cf9f; border-radius: 8px; padding: 5px 10px; }
.ps-time button { cursor: pointer; border: none; background: none; color: #b8924e; font-size: 14px; line-height: 1; padding: 0; }
.ps-suggest-times { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.ps-suggest-times .ps-st-label { font-size: 0.72rem; font-weight: 600; color: #a39d92; margin-right: 2px; }
.ps-st { cursor: pointer; font-family: inherit; font-size: 0.74rem; font-weight: 700; color: #5c574e; background: #fff; border: 1px dashed #d8cfbc; border-radius: 8px; padding: 4px 9px; }
.ps-st:hover { border-color: #dcb86a; color: #9a7322; }
.ps-chan-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 0.84rem; font-weight: 600; color: #3a352d; }
.ps-chan-row.disabled { color: #a39d92; }
.ps-chan-row .ps-soon { font-size: 0.68rem; font-weight: 700; color: #a39d92; background: #f1ece2; padding: 2px 6px; border-radius: 5px; }
.ps-edit-done { margin-top: 6px; }

/* Right column — live queue */
.ps-queue-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ps-queue-title { font-size: 0.95rem; font-weight: 700; color: #1c1a17; }
.ps-queue-title span { color: #a39d92; font-weight: 600; }
.ps-qgroup-head { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; }
.ps-qgroup-head:first-child { margin-top: 0; }
.ps-qgroup-day { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #7d776d; }
.ps-qgroup-n { font-size: 0.72rem; font-weight: 700; color: #a39d92; }
.ps-qgroup-rule { flex: 1; height: 1px; background: #f1ece2; }
.ps-qrow { display: flex; align-items: center; gap: 12px; padding: 9px; border: 1px solid #ece6da; border-radius: 11px; margin-bottom: 8px; background: #fff; }
.ps-qthumb { flex: none; width: 54px; height: 42px; border-radius: 8px; object-fit: cover; background: #ece6da; }
.ps-qbody { flex: 1; min-width: 0; }
.ps-qtitle { font-size: 0.85rem; font-weight: 700; color: #1c1a17; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-qmeta { font-size: 0.76rem; font-weight: 600; margin-top: 2px; }
.ps-qprice { color: #2a5b3c; font-weight: 800; }
.ps-qtime { color: #7d776d; }
.ps-qbadge { flex: none; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.04em; color: #2a6fdb; background: #eef3fb; border: 1px solid #d4e3f7; padding: 3px 7px; border-radius: 6px; }
.ps-qcancel { flex: none; cursor: pointer; font-family: inherit; font-size: 0.74rem; font-weight: 700; color: #b5503f; background: #fff; border: 1px solid #f0d8d2; border-radius: 7px; padding: 5px 10px; }
.ps-qcancel:hover { background: #fdf3f1; }
.ps-queue-empty { text-align: center; padding: 38px 16px; font-size: 0.85rem; font-weight: 500; color: #a39d92; }
.ps-qrow.ps-flash { box-shadow: 0 0 0 2px #b8924e; }

/* ══════════════ FEED-SETUP TRACKER (Inventory Setup Progress) ══════════════
   The always-present bar + status page shown while a requested feed is being
   connected. Design: design_handoff_inventory_setup_progress (2026-08-02),
   placement 1a (pinned bar) + 1b (status page). Every value references an
   existing token — no local hexes. Rendered by feed-setup-bar.js. */

@keyframes dppPulse { 0%,100% { box-shadow: 0 0 0 0 var(--accent-glow); }
                      50%     { box-shadow: 0 0 0 6px var(--accent-glow); } }
@keyframes dppTrack { 0% { background-position: 0 0; } 100% { background-position: 24px 0; } }

.fsb-wrap {
  position: relative;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}
/* Treatment A: quiet placeholder where the vehicle grid would be */
.fsb-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  background: var(--bg-panel-alt);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 1.4rem 1rem;
}
.fsb-placeholder .t-meta { max-width: 240px; color: var(--text-muted); }
.fsb-placeholder-btns { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.fsb-wrap.fsb-expanded { box-shadow: var(--shadow-lg); position: relative; z-index: 30; }
/* Full-bleed surface, but content aligned to the app's 1400px column */
.fsb-bar {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fsb-bar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.fsb-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.fsb-wrap[data-status="in_progress"] .fsb-dot { animation: dppPulse 2.4s ease-in-out infinite; }
.fsb-label { flex: none; }
.fsb-line {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fsb-bar .btn { flex: none; }
.fsb-chevron { flex: none; color: var(--text-dim); }
.fsb-expand {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.fsb-expand:focus-visible,
.fsb-mobile:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow);
  border-radius: var(--radius-sm);
}

/* Variant surfaces */
.fsb-wrap[data-status="needs_dealer"],
.fsb-wrap[data-status="delayed"] {
  background: var(--warn-bg);
  border-bottom-color: var(--warn-border);
}
.fsb-wrap[data-status="needs_dealer"] .fsb-dot,
.fsb-wrap[data-status="delayed"] .fsb-dot { background: var(--orange); }
.fsb-wrap[data-status="needs_dealer"] .fsb-label,
.fsb-wrap[data-status="delayed"] .fsb-label { color: var(--warn-text); }
.fsb-wrap[data-status="rejected"] {
  background: var(--danger-bg);
  border-bottom-color: var(--danger-border);
}
.fsb-wrap[data-status="rejected"] .fsb-dot { background: var(--red); }
.fsb-wrap[data-status="live"] {
  background: color-mix(in srgb, var(--green) 10%, var(--bg-panel));
  border-bottom-color: color-mix(in srgb, var(--green) 30%, transparent);
}
.fsb-wrap[data-status="live"] .fsb-dot { background: var(--green); }

/* Expanded drawer */
.fsb-drawer {
  border-top: 1px solid var(--border);
}
.fsb-drawer-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.1rem 1.5rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fsb-rail { display: flex; align-items: center; gap: 0.4rem; }
.fsb-rail-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.fsb-rail-dot.done    { background: var(--green); }
.fsb-rail-dot.active  { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.fsb-rail-dot.pending { background: var(--bg-input); border: 1.5px solid var(--border); }
.fsb-rail-conn { flex: 1; height: 3px; border-radius: 2px; }
.fsb-rail-conn.done { background: var(--green); }
.fsb-rail-conn.pending {
  background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 12px);
  animation: dppTrack 1.6s linear infinite;
}
.fsb-stages {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
}
.fsb-stage:nth-child(2) { text-align: center; }
.fsb-stage:nth-child(3) { text-align: right; }
.fsb-stage-name { font-weight: 700; color: var(--text-primary); }
.fsb-stage-sub.active { color: var(--accent); }
.fsb-divider { height: 1px; background: var(--border); }
.fsb-explain { display: flex; align-items: center; gap: 0.9rem; }
.fsb-explain p { flex: 1; line-height: 1.5; margin: 0; }
.fsb-explain p strong { font-weight: 600; color: var(--text-primary); }

/* Ask-for-an-update: receipt chip + cooldown + popover */
.fsb-receipt {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: color-mix(in srgb, var(--green) 10%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.7rem;
}
.fsb-receipt-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.fsb-receipt .t-meta { color: var(--green); font-weight: 600; }
.fsb-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  width: min(320px, calc(100vw - 2rem));
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.fsb-pop input {
  width: 100%;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
}
.fsb-pop input:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
.fsb-pop-btns { display: flex; gap: 0.5rem; justify-content: flex-end; }

/* Message bubble (rep replies) */
.fsb-bubble {
  display: flex;
  gap: 0.6rem;
  background: var(--bg-panel-alt);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.8rem;
}
.fsb-avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  font-size: 0.68rem;
  font-weight: 700;
}
.fsb-bubble-text { color: var(--text-primary); line-height: 1.5; }
.fsb-bubble-attr { color: var(--text-dim); margin-top: 0.2rem; }
.fsb-msg-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
}

/* Mobile strip (<640px): two-line sticky link to the status page */
.fsb-mobile { display: none; }
@media (max-width: 639px) {
  .fsb-bar, .fsb-drawer { display: none; }
  .fsb-mobile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
    text-decoration: none;
    color: inherit;
  }
  .fsb-wrap[data-status="needs_dealer"] .fsb-mobile,
  .fsb-wrap[data-status="delayed"] .fsb-mobile { background: var(--warn-bg); }
  .fsb-wrap[data-status="rejected"] .fsb-mobile { background: var(--danger-bg); }
  .fsb-wrap[data-status="live"] .fsb-mobile { background: color-mix(in srgb, var(--green) 10%, var(--bg-panel)); }
  .fsb-mobile-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .fsb-wrap[data-status="in_progress"] .fsb-mobile-dot { animation: dppPulse 2.4s ease-in-out infinite; }
  .fsb-mobile-lines { flex: 1; min-width: 0; }
  .fsb-mobile-l1 { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fsb-mobile-l2 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fsb-mobile-chev { flex: none; color: var(--text-dim); }
}
/* 900–1100px: keep it to label + day + provider (drop nothing structural —
   the status line just truncates); <900px: the Ask button moves into the drawer */
@media (max-width: 899px) {
  .fsb-bar .fsb-ask-slot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fsb-dot, .fsb-mobile-dot, .fsb-rail-conn.pending { animation: none !important; }
}

/* ── Status page (1b detail view) ── */
.fsp-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 640px;
  margin: 1.5rem auto;
}
.fsp-head { display: flex; align-items: flex-start; gap: 0.8rem; }
.fsp-head-main { flex: 1; min-width: 0; }
.fsb-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-panel));
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.fsb-chip[data-status="needs_dealer"], .fsb-chip[data-status="delayed"] {
  background: var(--warn-bg-soft); color: var(--warn-text); border-color: var(--warn-border-soft);
}
.fsb-chip[data-status="rejected"] {
  background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border);
}
.fsb-chip[data-status="live"] {
  background: color-mix(in srgb, var(--green) 10%, var(--bg-panel));
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
}
.fsp-timeline { list-style: none; margin: 0; padding: 0; }
.fsp-step { display: flex; gap: 0.8rem; }
.fsp-gutter { flex: none; width: 14px; display: flex; flex-direction: column; align-items: center; }
.fsp-tl-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; margin-top: 3px; }
.fsp-tl-dot.done    { background: var(--green); }
.fsp-tl-dot.active  { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.fsp-tl-dot.pending { background: var(--bg-input); border: 1.5px solid var(--border); }
.fsp-tl-conn { flex: 1; width: 2px; min-height: 18px; margin: 3px 0; background: var(--green); }
.fsp-tl-conn.pending {
  background: repeating-linear-gradient(180deg, var(--border) 0 5px, transparent 5px 10px);
}
.fsp-step-body { flex: 1; min-width: 0; padding-bottom: 1rem; }
.fsp-step:last-child .fsp-step-body { padding-bottom: 0; }
.fsp-step.pending .fsp-step-name { color: var(--text-muted); }
.fsp-rep {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--bg-panel-alt);
  border-radius: var(--radius-sm);
  padding: 0.9rem;
}
.fsp-rep .fsb-avatar { width: 34px; height: 34px; font-size: 0.82rem; }
.fsp-rep-main { flex: 1; min-width: 0; }
.fsp-rep { position: relative; }
.fsp-msgs { display: flex; flex-direction: column; gap: 0.6rem; }
@media (max-width: 639px) {
  .fsp-panel { margin: 0.75rem; padding: 1rem; }
  .fsp-ask-sticky { position: sticky; bottom: 0.75rem; }
  .fsp-rep { flex-wrap: wrap; }
  .fsp-rep-main { flex: 1 1 calc(100% - 42px); }
  .fsp-rep > span:last-child, .fsp-rep .btn { flex: 1 1 100%; }
  .fsp-rep .btn { width: 100%; justify-content: center; }
}