@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,300;1,9..40,400&family=DM+Mono:wght@400;500&family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&display=swap');

/* Visible keyboard focus indicator on every interactive element.
   :focus-visible only fires when the user navigates via keyboard,
   so it stays invisible during normal pointer use. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.button:focus-visible,
button:focus-visible,
a.button:focus-visible {
  outline-offset: 3px;
}

:root {
  /* ── Magazine Cream theme ──────────────────────────────
     Light, warm, editorial. Cream paper + deep navy ink +
     coral CTAs + warm-gold highlights. Tuned to feel like
     the back-cover of a print fashion magazine rather than
     a security console. */
  --bg: #FAF6F0;
  --bg-glow: radial-gradient(1400px 700px at 18% -10%, rgba(255,123,92,0.07), transparent 60%),
             radial-gradient(1000px 600px at 110% 8%, rgba(232,165,71,0.05), transparent 60%);
  --surface: #FFFFFF;
  --surface2: #F4EFE7;
  --surface3: #EBE4D8;
  --surface-hover: #FDFAF4;

  --border: #E5DDD0;
  --border-hover: #D6CCB8;
  --border-strong: #C9BFAE;

  --ink: #1A1F2E;
  --ink2: #4A5468;
  --ink3: #8B92A8;
  --ink4: #C5CBD8;

  --accent: #FF7B5C;
  --accent-2: #E8A547;
  --accent-dim: rgba(255,123,92,0.10);
  --accent-glow: rgba(255,123,92,0.22);
  --accent-grad: linear-gradient(135deg, #FF7B5C 0%, #E8A547 100%);

  --green: #2DA876;
  --green-dim: rgba(45,168,118,0.10);
  --red: #DC5F5F;
  --red-dim: rgba(220,95,95,0.10);
  --amber: #E8A547;
  --amber-dim: rgba(232,165,71,0.12);
  --blue: #4A90E2;
  --blue-dim: rgba(74,144,226,0.10);

  --serif: 'Fraunces', 'Iowan Old Style', Charter, Georgia, 'Times New Roman', serif;

  /* Spacing — 4pt scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Type */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: clamp(28px, 4vw, 42px);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --transition: 0.18s ease;
  --transition-slow: 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  --font: 'DM Sans', system-ui, -apple-system, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --shadow-sm: 0 1px 2px rgba(26,31,46,0.05);
  --shadow: 0 2px 6px rgba(26,31,46,0.06), 0 8px 24px rgba(26,31,46,0.08);
  --shadow-lg: 0 4px 12px rgba(26,31,46,0.08), 0 24px 64px rgba(26,31,46,0.14);
}

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

body {
  font-family: var(--font);
  background: var(--bg);
  background-image: var(--bg-glow);
  background-attachment: fixed;
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── SCROLLBAR ─────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 3px; }


/* ── TOPBAR ─────────────────────────────────────── */
.topbar {
  height: 60px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-5);
  padding: 0 var(--sp-5);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.brand-icon {
  width: 32px;
  height: 32px;
  background: var(--accent-grad);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-family: var(--serif);
  font-weight: 700;
  color: #FFFFFF;
  font-style: italic;
  letter-spacing: -0.02em;
  box-shadow: 0 4px 14px rgba(255,123,92,0.35);
}
.brand-word {
  font-family: var(--serif);
  font-weight: 600;
  font-style: italic;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-self: center;
}

.topbar-nav a {
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink2);
  font-size: var(--fs-md);
  font-weight: 500;
  transition: color var(--transition), background var(--transition);
}

.topbar-nav a:hover {
  color: var(--ink);
  background: var(--surface2);
}

.topbar-nav a.active {
  color: var(--ink);
  background: var(--surface2);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  justify-self: end;
}

/* Live processor status pill in topbar — always visible. */
.processor-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 11px;
  height: 32px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink2);
  white-space: nowrap;
  transition: all var(--transition);
  cursor: default;
}

.processor-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink3);
  transition: background var(--transition);
}

.processor-pill.running {
  border-color: rgba(52,211,153,0.3);
  background: rgba(52,211,153,0.08);
  color: var(--green);
}

.processor-pill.running .dot {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(52,211,153,0.2);
  animation: processor-pulse 1.4s ease-in-out infinite;
}

@keyframes processor-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(52,211,153,0.18); }
  50%      { box-shadow: 0 0 0 7px rgba(52,211,153,0.04); }
}

.processor-pill .pct {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Icon-only buttons in the topbar (settings, sign out). */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--ink2);
  background: transparent;
  border: 1px solid transparent;
  transition: all var(--transition);
  cursor: pointer;
}

.icon-btn:hover {
  color: var(--ink);
  background: var(--surface2);
  border-color: var(--border);
}

.nav-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}

/* Hamburger button — hidden on desktop, shown on mobile to open the nav drawer. */
.nav-toggle {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--surface-hover); }
.nav-toggle svg { display: block; }

@media (max-width: 900px) {
  .topbar { grid-template-columns: auto 1fr auto; }
  .nav-toggle { display: inline-flex; }
  /* On mobile the nav collapses to a slide-down drawer toggled by .nav-toggle. */
  .topbar-nav {
    position: absolute;
    top: 60px;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: var(--sp-2) 0;
    display: none;
  }
  .topbar-nav.open { display: flex; }
  .topbar-nav a {
    padding: 12px var(--sp-5);
    border-radius: 0;
    font-size: var(--fs-base);
  }
  .topbar-nav a:hover, .topbar-nav a.active {
    background: var(--surface2);
  }
  .topbar-actions { justify-self: end; }
}


/* ── SHELL ───────────────────────────────────────── */
.shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-8);
}

@media (max-width: 600px) {
  .shell { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
}


/* ── PAGE HEAD ─────────────────────────────────── */
.page-head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-5);
  align-items: flex-end;
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}

h1 {
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
}

h2 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 14px;
}

h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2);
  margin-bottom: 10px;
}

p { color: var(--ink2); }

.page-sub {
  color: var(--ink2);
  font-size: 14px;
  margin-top: 6px;
}

.page-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  flex-shrink: 0;
}


/* ── BUTTONS ─────────────────────────────────────── */
.button {
  border: none;
  background: var(--accent);
  color: #0f0f10;
  padding: 10px 16px;
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
  letter-spacing: -0.01em;
  height: 36px;
  line-height: 1;
}

.button:hover {
  background: #d8b4fe;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--accent-glow);
}

.button:active { transform: translateY(0); box-shadow: none; }
.button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; }

/* Primary CTA — used for the headline upload button in the topbar.
   Wears the brand gradient so it reads as the verb of the whole app. */
.button.primary {
  background: var(--accent-grad);
  color: #0f0f10;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(192,132,252,0.32);
  height: 36px;
  padding: 0 16px;
}

.button.primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(192,132,252,0.42);
}

.button.secondary {
  background: var(--surface2);
  color: var(--ink);
  border: 1px solid var(--border-hover);
}

.button.secondary:hover {
  background: var(--surface3);
  border-color: var(--border-hover);
  box-shadow: none;
}

.button.success {
  background: var(--green);
  color: #07110d;
}

.button.success:hover {
  background: #6ee7b7;
  box-shadow: 0 4px 18px rgba(52,211,153,0.28);
}

.button.ghost {
  background: transparent;
  color: var(--ink2);
  border: 1px solid var(--border);
}

.button.ghost:hover {
  background: var(--surface2);
  color: var(--ink);
  border-color: var(--border-hover);
  box-shadow: none;
}

.button.danger {
  background: var(--red-dim);
  color: var(--red);
  border: 1px solid rgba(248,113,113,0.2);
}

.button.danger:hover {
  background: var(--red);
  color: #0f0f10;
  box-shadow: 0 4px 16px rgba(248,113,113,0.3);
}

.button.sm {
  padding: 0 12px;
  height: 30px;
  font-size: var(--fs-sm);
}

.button svg, .button .icon { width: 14px; height: 14px; flex-shrink: 0; }


/* ── STATS GRID — big tiles you can read across the room. ─────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.stat {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  transition: border-color var(--transition), transform var(--transition), background var(--transition);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.stat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, currentColor 200%);
  opacity: 0.06;
  pointer-events: none;
  transition: opacity var(--transition);
}

.stat:hover {
  border-color: var(--border-hover);
  background: var(--surface-hover);
}

.stat:hover::after { opacity: 0.12; }

.stat span {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink3);
}

.stat strong {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat .stat-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--ink3);
  font-style: normal;
  font-weight: 500;
  margin-top: auto;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition), transform var(--transition);
}

.stat:hover .stat-hint {
  opacity: 1;
  transform: translateX(0);
}

.stat.accent { color: var(--accent); }
.stat.accent strong { color: var(--accent); }
.stat.green  { color: var(--green); }
.stat.green strong { color: var(--green); }
.stat.red    { color: var(--red); }
.stat.red strong { color: var(--red); }
.stat.amber  { color: var(--amber); }
.stat.amber strong { color: var(--amber); }

/* ── SECTION HEAD — used above every grid/list on dashboard. ──────── */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.section-head .section-title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.section-head h2 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.section-head .section-meta {
  font-size: var(--fs-sm);
  color: var(--ink3);
  font-weight: 400;
}

.section-head .section-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.section-link {
  font-size: var(--fs-sm);
  color: var(--accent);
  font-weight: 600;
  transition: color var(--transition);
}

.section-link:hover { color: #d8b4fe; }

/* Standard vertical rhythm between top-level sections. */
.section { margin-bottom: var(--sp-7); }
.section:last-child { margin-bottom: 0; }


/* ── GRID ─────────────────────────────────────────── */
.grid.two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}

@media (max-width: 760px) {
  .grid.two { grid-template-columns: 1fr; }
}


/* ── PANEL / CARD ─────────────────────────────────── */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

/* ── STEP CARD — used on Upload to walk the user through the flow. ── */
.step-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.step-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.step-card-head .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.step-card-head .step-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.step-card-head h3 {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

.step-card-head .step-sub {
  font-size: var(--fs-md);
  color: var(--ink2);
  line-height: 1.5;
  margin: 0;
}

.step-card-head .step-aside {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.step-card-title-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  flex: 1;
  min-width: 0;
}

/* ── UNIFIED CHIP — base for scenario / variant / macro pickers. ──── */
.chip,
.scenario-chip,
.variant-chip,
.macro-chip-body {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink2);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition);
  text-align: left;
  font-family: var(--font);
  width: 100%;
}

.chip:hover,
.scenario-chip:hover,
.variant-chip:hover,
.macro-chip:hover .macro-chip-body {
  border-color: var(--border-hover);
  color: var(--ink);
  background: var(--surface-hover);
}

.chip.active,
.scenario-chip.active,
.variant-chip.active,
.macro-chip input:checked + .macro-chip-body {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--accent-dim);
}

.chip strong,
.scenario-chip strong,
.variant-chip strong,
.macro-chip-body strong {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.chip small,
.scenario-chip small,
.variant-chip small,
.macro-chip-body small {
  font-size: var(--fs-sm);
  color: var(--ink3);
  line-height: 1.4;
}

.chip.active strong,
.scenario-chip.active strong,
.variant-chip.active strong,
.macro-chip input:checked + .macro-chip-body strong {
  color: var(--ink);
}


/* ── LIST / ROWS ──────────────────────────────────── */
.list { display: grid; gap: 8px; }

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.row:hover {
  border-color: var(--border-hover);
  background: var(--surface2);
}

a.row { cursor: pointer; }

.row strong { font-size: 13px; font-weight: 500; color: var(--ink); }
.row em { color: var(--ink3); font-style: normal; font-size: 12px; }
.row span { color: var(--ink2); font-size: 13px; }


/* ── STATUS BADGES ────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.badge.uploaded  { background: var(--surface3); color: var(--ink2); }
.badge.queued    { background: var(--amber-dim); color: var(--amber); }
.badge.processing { background: rgba(96,165,250,0.12); color: #60a5fa; }
.badge.done      { background: var(--green-dim); color: var(--green); }
.badge.error     { background: var(--red-dim); color: var(--red); }


/* ── THUMB GRID ───────────────────────────────────── */
.thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--sp-3);
}

.thumb-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}

.thumb-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.thumb-card--scheduled-away {
  opacity: 0;
  transform: translateX(34px) scale(0.97) !important;
  max-height: 0;
  margin: 0;
  border-width: 0;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    max-height 0.28s ease,
    margin 0.28s ease,
    border-width 0.28s ease;
}

.thumb-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--surface2);
}

.thumb-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  background: #05070a;
  transition: transform 0.3s ease;
}

.thumb-card:hover .thumb-img-wrap img { transform: scale(1.01); }

.inline-action-form {
  margin: 0;
}

.library-notice {
  margin: 0 0 var(--sp-4);
}

.notice {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 12px 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.notice.good {
  background: rgba(52,211,153,0.10);
  border-color: rgba(52,211,153,0.28);
  color: #167d55;
}

.notice.bad {
  background: rgba(248,113,113,0.10);
  border-color: rgba(248,113,113,0.28);
  color: var(--red);
}

.thumb-approve-form {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5,7,10,0.10), rgba(5,7,10,0.62));
  transition: opacity 0.18s ease;
}

.thumb-card:hover .thumb-approve-form,
.thumb-approve-form:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.thumb-approve-btn {
  border: 0;
  border-radius: 999px;
  min-height: 40px;
  padding: 0 18px;
  background: var(--green);
  color: #07110d;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transform: translateY(8px);
  transition: transform 0.18s ease, filter 0.18s ease;
}

.thumb-card:hover .thumb-approve-btn,
.thumb-approve-form:focus-within .thumb-approve-btn {
  transform: translateY(0);
}

.thumb-approve-btn:hover {
  filter: brightness(1.08);
}

.thumb-info {
  padding: 12px 14px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.thumb-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thumb-card em { color: var(--ink3); font-style: normal; font-size: 11px; }

.thumb-image-button, .image-button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: block;
  width: 100%;
}


/* ── EMPTY STATE ──────────────────────────────────── */
.empty {
  padding: 40px 24px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
  color: var(--ink3);
  font-size: 13px;
}

.empty-recent {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-5);
}

.empty-recent strong {
  font-size: var(--fs-lg);
  color: var(--ink);
  font-weight: 600;
}

.empty-recent p {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink3);
}

.empty-recent .button { margin-top: var(--sp-2); }


/* ── PROCESSOR CONTROL ────────────────────────────── */
.processor-control {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: min(340px, 100%);
}

.processor-control form { display: flex; justify-content: flex-end; }

.processor-button { width: 100%; justify-content: center; }

.processor-button.processor-running {
  background: var(--green-dim);
  color: var(--green);
  border: 1px solid rgba(52,211,153,0.2);
}

.processor-button.processor-running:hover {
  background: var(--green);
  color: #0f0f10;
  box-shadow: 0 4px 16px rgba(52,211,153,0.3);
}

.processor-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition);
}

.processor-status.active {
  border-color: rgba(52,211,153,0.25);
  background: rgba(52,211,153,0.05);
}

.processor-status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.processor-status-line span { font-size: 12px; color: var(--ink2); }
.processor-status-line strong { font-size: 12px; color: var(--green); font-weight: 700; white-space: nowrap; }

.processor-meter {
  height: 3px;
  background: var(--surface3);
  border-radius: 2px;
  overflow: hidden;
}

.processor-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--green);
  border-radius: 2px;
  transition: width 0.35s ease;
}

.processor-status p {
  margin: 0;
  color: var(--ink3);
  font-size: 11px;
}


/* ── UPLOAD ───────────────────────────────────────── */
.upload-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field span, label.field > span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink3);
}

.field input[type="text"],
.field textarea,
textarea {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  padding: 10px 13px;
  width: 100%;
  resize: vertical;
  transition: border-color var(--transition);
  outline: none;
}

.field input[type="text"]:focus,
.field textarea:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.field input[type="text"]::placeholder,
.field textarea::placeholder,
textarea::placeholder { color: var(--ink3); }

.drop-zone {
  border: 1.5px dashed var(--border-hover);
  border-radius: var(--radius);
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  text-align: center;
}

.drop-zone:hover,
.drop-zone.dragover {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.drop-zone .drop-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  font-size: 18px;
}

.drop-zone strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.drop-zone span { font-size: 12px; color: var(--ink3); }

.drop-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}


/* ── COMPARE LAYOUT ───────────────────────────────── */
.compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}

.compare > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.compare img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.placeholder {
  aspect-ratio: 4/5;
  background: var(--surface2);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink3);
  font-size: 13px;
}

@media (max-width: 640px) {
  .compare { grid-template-columns: 1fr; }
}


/* ── IMAGE DETAIL ─────────────────────────────────── */
.download-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--accent-dim);
  transition: all var(--transition);
  margin: 12px 14px 14px;
}

.download-link:hover { background: rgba(192,132,252,0.2); }

.prompt-display {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}


/* ── DANGER FORM ──────────────────────────────────── */
.danger-form { margin-top: 12px; }


/* ── ACTIONS PANEL ────────────────────────────────── */
.actions-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.actions-stack .button { width: 100%; justify-content: center; }


/* ── ERROR SECTION ────────────────────────────────── */
.error-section { margin-top: 28px; }

.error-list { display: grid; gap: 10px; }

.error-card {
  background: var(--surface);
  border: 1px solid rgba(248,113,113,0.15);
  border-left: 3px solid var(--red);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.error-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.error-meta span { font-size: 11px; color: var(--ink3); font-family: var(--mono); }
.error-meta strong { font-size: 12px; font-weight: 700; color: var(--red); }
.error-meta em { font-size: 11px; color: var(--ink3); font-style: normal; }

.error-message {
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.5;
  word-break: break-word;
}

.status-notice {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-notice.bad {
  background: var(--red-dim);
  border-color: rgba(248,113,113,0.22);
}

.status-notice.good {
  background: var(--green-dim);
  border-color: rgba(52,211,153,0.22);
}

.status-notice-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.status-notice-head strong {
  font-size: 14px;
  color: var(--ink);
}

.status-notice p {
  margin: 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.5;
}

.error-details { margin-top: 10px; }
.error-details summary { font-size: 12px; color: var(--ink3); cursor: pointer; user-select: none; }
.error-details pre {
  margin-top: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink2);
  overflow-x: auto;
  white-space: pre-wrap;
}


/* ── SETTINGS ─────────────────────────────────────── */
.settings-list { display: grid; gap: 14px; }

.secret-panel { margin-bottom: 14px; }

.inline-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: var(--red-dim);
  color: var(--red);
  letter-spacing: 0.04em;
}

.status-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-pill.ok { background: var(--green-dim); color: var(--green); }

.scenario-editor-list {
  display: grid;
  gap: 14px;
}

.scenario-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scenario-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.scenario-card-head strong {
  font-size: 14px;
  color: var(--ink);
}

.scenario-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.settings-action-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.scenario-restore-all {
  border-color: rgba(255, 123, 92, 0.45);
}

.scenario-enable {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink2);
}

.scenario-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
}

.empty-mini {
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius);
  padding: 18px;
  color: var(--ink3);
  font-size: 13px;
  text-align: center;
}

.inline-status {
  min-height: 20px;
  font-size: 12px;
  color: var(--ink3);
}

.inline-status.ok {
  color: var(--green);
}

.inline-status.bad {
  color: var(--red);
}

@media (max-width: 760px) {
  .scenario-grid {
    grid-template-columns: 1fr;
  }
}


/* ── EXPORT ───────────────────────────────────────── */
.export-state {
  padding: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

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

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


/* ── LIGHTBOX ─────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  backdrop-filter: blur(4px);
}

.lightbox[aria-hidden="true"] { display: none; }

.lightbox figure {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.lightbox img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.lightbox figcaption { color: var(--ink2); font-size: 13px; }

.lightbox-close {
  position: fixed;
  top: calc(20px + env(safe-area-inset-top));
  right: calc(20px + env(safe-area-inset-right));
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-hover);
  background: var(--surface);
  color: var(--ink);
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.lightbox-close:hover { background: var(--surface3); }


/* ── DIVIDER ──────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--border);
  margin: 24px 0;
}


/* ── RESPONSIVE ───────────────────────────────────── */
@media (max-width: 600px) {
  .shell { padding: 20px 16px 60px; }
  .topbar { padding: 0 16px; }
  .page-head { flex-direction: column; align-items: flex-start; }
  h1 { font-size: 28px; }
  .thumb-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* (topbar-logout removed — replaced by .icon-btn in the new topbar) */

/* ── THUMB DELETE OVERLAY ─────────────────────────── */
.thumb-delete-btn {
  position:absolute; top:7px; right:7px;
  width:28px; height:28px; border-radius:50%;
  border:none; background:rgba(15,15,16,0.75);
  color:#f87171; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(0.8);
  transition:opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
  z-index:10; backdrop-filter:blur(4px); flex-shrink:0;
}
.thumb-card:hover .thumb-delete-btn { opacity:1; transform:scale(1); }
.thumb-delete-btn:hover { background:var(--red); color:#0f0f10; }
.thumb-delete-btn svg { pointer-events:none; }
.thumb-card.deleting { opacity:0.4; pointer-events:none; transition:all 0.25s ease; }

/* ── BUTTON DISABLED ──────────────────────────────── */
.button:disabled { opacity:0.4; cursor:not-allowed; transform:none !important; box-shadow:none !important; pointer-events:none; }

/* Clickable dashboard status cards */
a.stat-link {
  text-decoration: none;
  cursor: pointer;
  position: relative;
}

a.stat-link:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.stat-hint {
  display: none;
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-size: 11px;
  font-style: normal;
  color: var(--ink3);
  font-weight: 600;
}

a.stat-link:hover .stat-hint {
  display: block;
}

.status-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.status-pill-link {
  padding: 6px 14px;
  font-size: 12px;
  text-decoration: none;
  opacity: 0.55;
}

.status-pill-link.active {
  opacity: 1;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


/* ── MULTI-SELECT MODE ────────────────────────────────── */
.thumb-card.selectable {
  cursor: pointer;
}
.thumb-card.selectable .thumb-img-wrap a {
  pointer-events: none;
}
.thumb-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.select-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 20;
  cursor: pointer;
}
.select-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.select-checkmark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(15,15,16,0.75);
  border: 1.5px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(4px);
  transition: all 0.15s ease;
}
.select-checkmark::after {
  content: '';
  display: none;
  width: 6px;
  height: 10px;
  border: 2px solid #0f0f10;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}
.thumb-card.selected .select-checkmark {
  background: var(--accent);
  border-color: var(--accent);
}
.thumb-card.selected .select-checkmark::after {
  display: block;
}


/* ── BULK ACTION BAR ──────────────────────────────────── */
#bulk-action-bar {
  position: fixed;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--surface);
  border: 1px solid var(--border-hover);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  backdrop-filter: blur(12px);
  transition: bottom 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}
#bulk-action-bar.visible {
  bottom: 28px;
}
#selected-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2);
  min-width: 80px;
}


/* ── SELECT TOOLBAR ───────────────────────────────────── */
.select-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

#select-mode-btn.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}


/* ── BATCH NAV ARROWS ─────────────────────────────────── */
.image-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.image-nav-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-hover);
  background: var(--surface2);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  text-decoration: none;
  flex-shrink: 0;
}
.image-nav-btn:hover {
  background: var(--surface3);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}
.image-nav-btn:disabled,
.image-nav-btn[data-disabled] {
  opacity: 0.25;
  pointer-events: none;
  cursor: default;
  transform: none;
}
.image-nav-counter {
  font-size: 12px;
  color: var(--ink3);
  font-weight: 500;
  min-width: 48px;
  text-align: center;
}

.image-detail-head {
  margin-bottom: 12px;
  align-items: center;
}

.prompt-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
}

.prompt-topbar label {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

.prompt-topbar textarea {
  min-height: 74px;
  resize: vertical;
  border-radius: var(--radius-sm);
}

.approve-button {
  min-height: 42px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
}

.detail-meta-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.detail-meta-strip span {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.025);
  border-radius: 999px;
  color: var(--ink2);
  font-size: 12px;
  padding: 5px 9px;
}

.detail-meta-strip strong {
  color: var(--ink3);
  font-weight: 700;
  margin-right: 4px;
}

.detail-viewer {
  display: grid;
  grid-template-columns: minmax(0, 318px);
  gap: 12px;
  align-items: start;
  justify-content: start;
  margin-bottom: 14px;
}

.detail-viewer.paired {
  grid-template-columns: repeat(2, minmax(0, 318px));
}

.detail-viewer.single {
  grid-template-columns: minmax(0, 318px);
}

.ig-viewer-pane {
  min-width: 0;
}

.image-review-card {
  display: grid;
  gap: 10px;
}

.ig-preview {
  background: #05070a;
  padding: 12px;
  border-radius: 14px;
}

.ig-shell {
  background: #000;
  border: 1px solid #202633;
  border-radius: 12px;
  overflow: hidden;
  max-width: 360px;
  margin: 0 auto;
}

.ig-head {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg,#feda75,#d62976,#4f5bd5);
  flex: 0 0 auto;
}

canvas.ig-canvas {
  width: 100%;
  display: block;
  background: #fff;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

canvas.ig-canvas.dragging {
  cursor: grabbing;
}

.item-body {
  display: grid;
  gap: 12px;
  padding: 14px 8px 0;
}

.quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--ink2);
  border-radius: 999px;
  min-height: 36px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.chip:hover,
.chip.active {
  border-color: rgba(166,112,255,0.45);
  background: rgba(166,112,255,0.14);
  color: #f7efff;
}

.controls {
  display: grid;
  gap: 10px;
}

.control-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px;
  align-items: center;
}

.hint {
  color: var(--ink3);
  font-size: 12px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button-row .ghost {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--ink2);
  border-radius: 12px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.button-row .ghost:hover {
  border-color: rgba(166,112,255,0.45);
  background: rgba(166,112,255,0.08);
}

.ig-media-shell {
  display: block;
  width: min(100%, 318px);
  margin: 0 auto;
  background: #000;
  border: 1px solid #202633;
  border-radius: 10px;
  overflow: hidden;
}

.ig-media-head {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.ig-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg,#feda75,#d62976,#4f5bd5);
  flex: 0 0 auto;
}

.ig-media-shell img {
  width: 100%;
  max-height: 396px;
  object-fit: contain;
  background: #000;
  border-radius: 0;
  border: 0;
}

.review-shell {
  position: relative;
}

.image-review-canvas {
  display: block;
  width: 100%;
  max-height: 396px;
  background: #000;
  cursor: default;
}

.review-help {
  padding: 8px 10px 10px;
  color: var(--ink3);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.review-item-body {
  padding-top: 2px;
}

.review-actions {
  margin-top: 4px;
}

.error-only-media {
  margin: -2px 0 14px;
}

.compact-placeholder {
  min-height: 320px;
}

.output-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 18px;
}

.output-chip {
  width: 116px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink2);
  padding: 6px;
  cursor: pointer;
  text-align: left;
}

.output-chip img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 6px;
}

.output-chip span {
  display: block;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fact-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
  font-size: 12px;
}

.fact-row span {
  color: var(--ink3);
}

.fact-row strong {
  color: var(--ink2);
  font-weight: 600;
  text-align: right;
}

.icon-trash {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(248,113,113,0.22);
  background: var(--red-dim);
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-trash:hover {
  background: var(--red);
  color: #0f0f10;
}

.image-detail-head--compact {
  margin-bottom: 18px;
}

.detail-review-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 16px 0 18px;
  flex-wrap: wrap;
}

.detail-review-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.schedule-approval-form {
  display: flex;
  align-items: center;
}

.approve-button--lower {
  min-height: 42px;
  padding: 0 18px;
  font-size: 13px;
  border-radius: 12px;
}

.prompt-topbar--below {
  margin-bottom: 16px;
}

@media (max-width: 860px) {
  .detail-viewer,
  .prompt-topbar {
    grid-template-columns: 1fr;
  }
  .detail-viewer.paired {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .detail-viewer.paired {
    grid-template-columns: 1fr;
  }

  .detail-review-toolbar {
    align-items: stretch;
  }
}


/* ── DANGER ZONE (batch delete) ───────────────────────── */
.danger-zone {
  margin-top: 28px;
  padding: 20px;
  background: var(--red-dim);
  border: 1px solid rgba(248,113,113,0.2);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.danger-zone-info strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--red);
  margin-bottom: 2px;
}
.danger-zone-info p {
  font-size: 12px;
  color: var(--ink3);
  margin: 0;
}


/* ── STATUS FILTER PAGE ACTIONS ───────────────────────── */
.status-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}


/* ── THUMB CARD PULSE (live status) ───────────────────── */
@keyframes pulse-border {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 2px var(--accent-glow); }
}
.thumb-card[data-live-polling] {
  animation: pulse-border 2s ease infinite;
}


/* ── STICKY SUBMIT BAR ────────────────────────────────── */
.sticky-submit {
  position: sticky;
  bottom: 0;
  z-index: 50;
  margin: var(--sp-5) calc(var(--sp-5) * -1) calc(var(--sp-7) * -1);
  padding: var(--sp-4) var(--sp-5);
  background: rgba(24,24,27,0.85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.sticky-submit .queue-count {
  font-size: var(--fs-md);
  color: var(--ink2);
  font-weight: 500;
}

.sticky-submit .button {
  height: 42px;
  padding: 0 var(--sp-5);
  font-size: var(--fs-base);
}

/* ── HERO STAT ROW — dashboard top-of-page health snapshot. ───────── */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

/* ── BATCH ROW — recent batches list. ────────────────────────────── */
.batch-list { display: grid; gap: var(--sp-2); }

.batch-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition);
}

.batch-row:hover {
  border-color: var(--border-hover);
  background: var(--surface-hover);
  transform: translateX(2px);
}

.batch-row .batch-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.batch-row .batch-when {
  font-size: var(--fs-sm);
  color: var(--ink3);
}

.batch-row .batch-id {
  font-size: var(--fs-md);
  color: var(--ink);
  font-weight: 500;
}

.batch-row .batch-progress {
  font-size: var(--fs-md);
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
}

/* ── INLINE FORM ROW — used in upload page for compact field rows. ─ */
.inline-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4);
}

@media (max-width: 720px) {
  .inline-row { grid-template-columns: 1fr; }
}

/* ── PROVIDER SWITCH (upload page) ─────────────────────────────────── */
.provider-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.provider-switch-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.provider-switch-text strong {
  font-size: var(--fs-md);
  color: var(--ink);
  font-weight: 600;
}

.provider-switch-text span {
  font-size: var(--fs-sm);
  color: var(--ink2);
}

/* ── PILL TOGGLE (Random vs Chosen) — refined ──────────────────────── */
.pill-toggle {
  display: inline-flex;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  height: 38px;
  width: fit-content;
}

.pill-toggle button {
  border: 0;
  background: transparent;
  color: var(--ink2);
  border-radius: 999px;
  padding: 0 var(--sp-4);
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  height: 100%;
  line-height: 1;
}

.pill-toggle button:hover { color: var(--ink); }

.pill-toggle button.active {
  background: var(--ink);
  color: var(--bg);
}

/* ── COUNT BADGE — small numeric indicator next to a heading. ──────── */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  border: 1px solid rgba(192,132,252,0.25);
}

.count-badge.muted {
  background: var(--surface2);
  color: var(--ink3);
  border-color: var(--border);
}

/* Reduce motion respect. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ── UPLOAD PAGE STYLES (moved from inline <style> block) ─────────── */
.upload-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.provider-toggle {
  position: relative;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}
.provider-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.provider-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background: var(--surface3);
  cursor: pointer;
  transition: background var(--transition);
}
.provider-toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink2);
  transition: transform var(--transition), background var(--transition);
}
.provider-toggle input:checked + .provider-toggle-track {
  background: var(--accent);
}
.provider-toggle input:checked + .provider-toggle-track::after {
  transform: translateX(20px);
  background: #0f0f10;
}
.provider-toggle input:disabled + .provider-toggle-track {
  cursor: not-allowed;
  opacity: 0.6;
}

.upload-select {
  appearance: none;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  padding: 11px 42px 11px 14px;
  width: 100%;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink3) 50%),
    linear-gradient(135deg, var(--ink3) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.upload-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.scenario-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
}
.scenario-picker.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.variant-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
}

.variant-chip {
  align-items: flex-start;
  padding: 14px;
}

.variant-shape {
  display: inline-flex;
  border: 1px solid currentColor;
  border-radius: 4px;
  opacity: 0.9;
  flex-shrink: 0;
  margin-bottom: 2px;
}
.variant-shape::before { content: ""; display: block; }
.ratio-source::before { width: 38px; height: 28px; }
.ratio-1-1::before { width: 30px; height: 30px; }
.ratio-4-5::before { width: 24px; height: 30px; }
.ratio-9-16::before { width: 18px; height: 32px; }
.ratio-16-9::before { width: 38px; height: 22px; }

.macro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
}

.macro-chip {
  display: flex;
  align-items: stretch;
  cursor: pointer;
  position: relative;
}
.macro-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.scenario-preview {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink2);
  font-size: var(--fs-md);
  line-height: 1.6;
}

.scenario-preview p { margin: 0; }

.mode-toggle-help {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-md);
  color: var(--ink2);
}

.upload-scenario-editor {
  margin-top: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

@media (max-width: 480px) {
  .macro-grid,
  .scenario-picker,
  .variant-picker {
    grid-template-columns: 1fr;
  }
}

/* ── URL importer (Step 1 on /upload) ─────────────────────────────── */
.url-importer {
  margin-top: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.url-importer textarea {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  line-height: 1.5;
  resize: vertical;
}
/* Auto-fetch status row + failed-URL list under the URL textarea. */
.url-importer-status:empty { display: none; }
.url-importer-status {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.url-importer-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.url-importer .status-pip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.url-importer .status-pip--fetching {
  background: var(--accent-dim);
  color: var(--accent);
}
.url-importer .status-pip--ok {
  background: var(--green-dim);
  color: var(--green);
}
.url-importer .status-pip--bad {
  background: var(--red-dim);
  color: var(--red);
}
.url-importer-failed {
  margin: 0;
  padding-left: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink2);
  list-style: disc;
}
.url-importer-failed code {
  background: var(--surface2);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: var(--fs-xs);
}

/* Per-URL progress rows — show each pasted URL with its current state and
   a live elapsed-time counter so the user can SEE work happening. */
.url-importer-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.url-importer-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: 6px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--ink2);
}
.url-importer-row code {
  background: transparent;
  color: var(--ink2);
  font-size: var(--fs-xs);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.url-importer-row .row-detail {
  flex-basis: 100%;
  font-size: var(--fs-xs);
  color: var(--red);
  margin-top: 2px;
}
.url-cookie-fix {
  flex-basis: 100%;
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid rgba(255, 123, 92, 0.35);
  border-radius: var(--radius-sm);
}
.url-cookie-fix-head {
  display: grid;
  gap: 2px;
}
.url-cookie-fix-head strong {
  color: var(--ink);
  font-size: var(--fs-sm);
}
.url-cookie-fix-head span {
  color: var(--ink3);
  font-size: var(--fs-xs);
}
.url-cookie-paste {
  min-height: 92px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.url-cookie-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.url-cookie-status {
  color: var(--ink3);
  font-size: var(--fs-xs);
}
.row-pip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.row-pip--pending {
  background: var(--surface3);
  color: var(--ink3);
}
.row-pip--fetching {
  background: var(--accent-dim);
  color: var(--accent);
  animation: row-pip-pulse 1.2s ease-in-out infinite;
}
.row-pip--ok {
  background: var(--green-dim);
  color: var(--green);
}
.row-pip--bad {
  background: var(--red-dim);
  color: var(--red);
}
@keyframes row-pip-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Cookie modal — used by upload.js when an import fails with auth error */
dialog.upload-cookies-modal {
  max-width: 560px;
  width: calc(100% - 32px);
  padding: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
dialog.upload-cookies-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
}
dialog.upload-cookies-modal form {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
dialog.upload-cookies-modal h2 {
  margin: 0;
  font-size: var(--fs-lg);
}
dialog.upload-cookies-modal ol {
  margin: 0;
  padding-left: var(--sp-5);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink2);
}
dialog.upload-cookies-modal ol a {
  color: var(--accent);
  text-decoration: underline;
}
dialog.upload-cookies-modal textarea {
  width: 100%;
  min-height: 180px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  background: var(--surface2);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
}
dialog.upload-cookies-modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}
dialog.upload-cookies-modal .modal-status {
  font-size: var(--fs-sm);
  min-height: 18px;
}
dialog.upload-cookies-modal .modal-status.ok { color: var(--green); }
dialog.upload-cookies-modal .modal-status.bad { color: var(--red); }

/* ── AI prompt-assistant modal — shared between image detail + upload ── */
dialog.prompt-assistant-modal {
  max-width: 820px;
  width: calc(100% - 32px);
  padding: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
dialog.prompt-assistant-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
}
dialog.prompt-assistant-modal .pa-form {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
dialog.prompt-assistant-modal .pa-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}
dialog.prompt-assistant-modal .pa-head h2 {
  margin: 0 0 4px;
  font-size: var(--fs-lg);
  font-weight: 600;
}
dialog.prompt-assistant-modal .pa-sub {
  margin: 0;
  color: var(--ink2);
  font-size: var(--fs-md);
  line-height: 1.5;
}
dialog.prompt-assistant-modal .pa-section-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink3);
}
dialog.prompt-assistant-modal .pa-model {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink3);
  font-size: var(--fs-sm);
  margin-left: 6px;
}
dialog.prompt-assistant-modal textarea {
  width: 100%;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  line-height: 1.5;
  background: var(--surface2);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  resize: vertical;
}
dialog.prompt-assistant-modal .pa-original textarea {
  background: var(--bg);
  color: var(--ink2);
}
dialog.prompt-assistant-modal .pa-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
dialog.prompt-assistant-modal .pa-status {
  font-size: var(--fs-sm);
  color: var(--ink3);
  flex: 1;
  min-width: 0;
}
dialog.prompt-assistant-modal .pa-status.ok { color: var(--green); }
dialog.prompt-assistant-modal .pa-status.bad { color: var(--red); }
dialog.prompt-assistant-modal .pa-variants {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-height: 56vh;
  overflow-y: auto;
}
dialog.prompt-assistant-modal .pa-variant {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--surface2);
}
dialog.prompt-assistant-modal .pa-variant:hover {
  border-color: var(--border-hover);
}
dialog.prompt-assistant-modal .pa-variant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
dialog.prompt-assistant-modal .pa-variant-head strong {
  font-size: var(--fs-md);
  color: var(--ink);
}
dialog.prompt-assistant-modal .pa-variant-changes {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink2);
  line-height: 1.5;
  font-style: italic;
}
dialog.prompt-assistant-modal .pa-variant-prompt {
  min-height: 100px;
}

/* ── Voice-input mic button — sits in a row UNDER the textarea, never
   overlapping content. The cluster pattern keeps it visible and clickable
   regardless of textarea height, parent flex layout, or stacking context. */
.voice-input-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 6px;
  margin-bottom: 4px;
}
.voice-input-mic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink2);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font);
}
.voice-input-mic:hover {
  color: var(--ink);
  background: var(--surface3);
  border-color: var(--border-hover);
}
.voice-input-mic:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.voice-input-mic svg { flex-shrink: 0; }
.voice-input-mic .voice-input-label {
  font-size: var(--fs-sm);
}
.voice-input-mic.listening {
  background: var(--red-dim);
  color: var(--red);
  border-color: rgba(248,113,113,0.4);
  animation: voice-input-pulse 1.2s ease-in-out infinite;
}
.voice-input-mic.error {
  background: var(--amber-dim);
  color: var(--amber);
  border-color: rgba(251,191,36,0.4);
}
.voice-input-mic--unsupported {
  opacity: 0.4;
  cursor: not-allowed;
}
.voice-input-hint {
  font-size: var(--fs-sm);
  color: var(--ink3);
  font-weight: 400;
}
.voice-input-hint.error { color: var(--red); }
.voice-input-hint a {
  color: var(--red);
  text-decoration: underline;
  font-weight: 600;
  margin-left: 4px;
}
.voice-input-hint a:hover { color: #fca5a5; }
@keyframes voice-input-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(248,113,113,0); }
}

/* ── Full image editor (ported from posting app — zoom + drag-to-pan) ──── */
.image-editor-controls {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.image-editor-control-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.image-editor-control-row .label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink3);
  min-width: 50px;
}
.image-editor-control-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
  height: 4px;
}
.image-review-canvas {
  cursor: grab;
  touch-action: none;
  user-select: none;
  width: 100%;
  display: block;
  border-radius: var(--radius);
  background: #0a0c10;
}
.image-review-canvas.dragging {
  cursor: grabbing;
}

/* ─────────────────────────────────────────────────────────────────────────
   IMAGE DETAIL PAGE — master makeover (commit a91e61a → next)
   Layout regions:
     1. .detail-header              breadcrumb + status + pager + delete
     2. .detail-status-notice       only when actionable (errors, billing)
     3. .image-detail-viewer        two-column compare (original | processed)
     4. .editor-toolbar             chips + zoom + revert + full-size, one row
     5. .decision-bar               hero CTA ("Approve for scheduling")
     6. .prompt-workshop            prompt editor + actions
     7. .detail-meta-footer         subtle dates + position
   ───────────────────────────────────────────────────────────────────────── */

/* 1. Header — breadcrumb left, status badge under it; pager + delete right. */
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.detail-header-left { display: flex; flex-direction: column; gap: var(--sp-2); }
.detail-back {
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.detail-back:hover { color: #d8b4fe; text-decoration: underline; }
.detail-header-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.detail-header-date {
  color: var(--ink3);
  font-size: var(--fs-sm);
}
.detail-header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.detail-nav-pager {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 4px;
}
.detail-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--ink2);
  text-decoration: none;
  transition: all var(--transition);
}
.detail-nav-btn:hover {
  background: var(--surface2);
  color: var(--ink);
}
.detail-nav-btn[data-disabled] {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
.detail-nav-counter {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink2);
  padding: 0 var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.detail-delete-btn:hover {
  color: var(--red);
  border-color: rgba(248,113,113,0.3);
  background: var(--red-dim);
}

/* 2. Status notices — only render when there's something actionable. Slim. */
.detail-status-notice { margin-bottom: var(--sp-5); }

/* 3. Image viewer — two columns, equal-ish widths, clean column labels. */
.image-detail-viewer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
  align-items: start;
}
@media (max-width: 760px) {
  .image-detail-viewer { grid-template-columns: 1fr; }
}
.viewer-column { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.viewer-column-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink3);
  margin-bottom: 2px;
}
.viewer-image {
  display: block;
  width: 100%;
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.viewer-image img,
.viewer-image canvas {
  display: block;
  /* Aspect-lock: let intrinsic w/h attrs control the ratio. max-width + max-height
     clamp the size; width/height auto preserves the canvas's 4:5 (or whatever it is)
     so the parent's background never leaks as letterbox "wings" on either side. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 320px);
  min-height: 240px;
  margin: 0 auto;
  /* no object-fit on canvas — intrinsic sizing already correct */
}
@media (max-width: 760px) {
  .viewer-image img,
  .viewer-image canvas {
    max-height: 70vh;
  }
}
.viewer-column--original .viewer-image:hover {
  border-color: var(--border-hover);
}

/* 4. Editor toolbar — single horizontal row, well-spaced cells. */
.editor-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: var(--sp-2);
  flex-wrap: wrap;
}
.editor-toolbar-chips,
.editor-toolbar-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.editor-toolbar-zoom {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
  min-width: 140px;
}
.editor-zoom-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink3);
}
.editor-toolbar-zoom input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
  height: 4px;
  cursor: pointer;
}
.editor-toolbar-hint {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  color: var(--ink3);
  text-align: center;
}

/* 5. Decision bar — the hero CTA when image is publishable. */
.decision-bar {
  margin: var(--sp-5) 0;
}
.decision-bar-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(135deg, rgba(52,211,153,0.10), rgba(52,211,153,0.04));
  border: 1px solid rgba(52,211,153,0.25);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}
.decision-bar-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 220px;
}
.decision-bar-text strong {
  font-size: var(--fs-lg);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.decision-bar-text span {
  font-size: var(--fs-md);
  color: var(--ink2);
}
.button.decision-bar-cta {
  background: var(--green);
  color: #07110d;
  font-size: var(--fs-base);
  font-weight: 700;
  height: 44px;
  padding: 0 var(--sp-5);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(52,211,153,0.30);
}
.button.decision-bar-cta:hover {
  background: #6ee7b7;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(52,211,153,0.40);
}

/* 5b. Hidden schedule form — its submit button lives in the sticky action bar. */
.schedule-approval-form--hidden { display: none; }

/* 5c. Sticky bottom action bar — pager + Save & Approve always in reach. */
.detail-action-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  margin: var(--sp-5) calc(-1 * var(--sp-5)) 0;
  padding: var(--sp-3) var(--sp-5);
  background: rgba(15, 18, 24, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.35);
}
.detail-action-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  max-width: 1240px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.detail-action-bar-pager {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.detail-action-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.detail-action-pager-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}
.detail-action-pager-btn[data-disabled] {
  opacity: 0.35;
  pointer-events: none;
}
.detail-action-pager-counter {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink2);
  min-width: 56px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.detail-action-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
}
.detail-action-hint {
  font-size: var(--fs-sm);
  color: var(--ink3);
  font-style: italic;
}
.button.detail-action-approve {
  background: var(--green);
  color: #07110d;
  font-weight: 700;
  height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(52,211,153,0.28);
}
.button.detail-action-approve:hover {
  background: #6ee7b7;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(52,211,153,0.40);
}
@media (max-width: 600px) {
  .detail-action-bar {
    margin: var(--sp-4) calc(-1 * var(--sp-3)) 0;
    padding: var(--sp-3);
  }
  .detail-action-bar-inner {
    gap: var(--sp-2);
  }
  .detail-action-bar-actions .button { font-size: var(--fs-sm); padding: 0 var(--sp-3); }
}

/* 6. Prompt workshop — clean card. */
.prompt-workshop {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.prompt-workshop-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.prompt-workshop-head h2 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink);
}
.prompt-workshop-hint {
  color: var(--ink3);
  font-size: var(--fs-sm);
}
.prompt-workshop-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
}
.prompt-workshop-form textarea {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  padding: var(--sp-3) var(--sp-4);
  width: 100%;
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
  transition: border-color var(--transition);
}
.prompt-workshop-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.prompt-workshop-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.prompt-workshop-actions-spacer { flex: 1; }

/* 7. Metadata footer — quiet info strip. */
.detail-meta-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  margin-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--ink3);
}
.detail-meta-footer strong {
  color: var(--ink2);
  font-weight: 600;
  margin-right: 4px;
}
.detail-meta-pill {
  background: var(--accent-dim);
  color: var(--accent);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
}


/* Custom prompt override box (top of upload page) — bright warning band */
.prompt-override-box {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(236,72,153,0.10) 0%, rgba(139,92,246,0.10) 100%);
  border: 1px solid rgba(236,72,153,0.35);
  border-radius: 10px;
}
.prompt-override-warn {
  font-size: 12px;
  color: #d9c2ff;
  line-height: 1.45;
  margin-bottom: 8px;
}
.prompt-override-warn strong {
  color: #f59e0b;
}
.prompt-override-box .opt-textarea {
  width: 100%;
  box-sizing: border-box;
}


/* ── UPLOAD QUEUE THUMBNAIL CARDS ─────────────────── */
.queue-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.queue-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition), background var(--transition);
}
.queue-card:hover {
  border-color: var(--border-hover);
  background: var(--surface2);
}
.queue-card-thumb {
  width: 100%;
  height: 130px;
  object-fit: cover;
  background: var(--bg);
  display: block;
}
.queue-card-thumb-empty {
  display: grid;
  place-items: center;
  color: var(--ink3);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.queue-card-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.65);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 120ms ease, transform 120ms ease;
  backdrop-filter: blur(4px);
  z-index: 2;
  opacity: 0;
}
.queue-card:hover .queue-card-remove,
.queue-card-remove:focus-visible {
  opacity: 1;
}
.queue-card-remove:hover {
  background: rgba(220, 38, 38, 0.9);
  transform: scale(1.08);
}
.queue-card-meta {
  padding: 6px 8px 8px;
  display: grid;
  gap: 1px;
}
.queue-card-name {
  font-size: 11px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.queue-card-size {
  font-size: 10px;
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
}

/* Instant-click feedback. Applied immediately on pointerdown/submit so the
   user sees their click register before any handler/fetch fires. Cleared
   either by page navigation or by a 800ms self-clear in instant-click.js. */
button.is-click-busy,
.button.is-click-busy,
[role="button"].is-click-busy {
  transform: scale(0.96);
  opacity: 0.78;
  filter: brightness(0.92);
  transition: transform 70ms ease-out, opacity 70ms ease-out, filter 70ms ease-out;
}
button.is-click-busy::after,
.button.is-click-busy::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  vertical-align: middle;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  animation: instant-click-pulse 0.6s ease-in-out infinite;
}
@keyframes instant-click-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50%      { opacity: 0.9;  transform: scale(1.15); }
}

/* ──────────────────────────────────────────────────────────────────
   Magazine Cream additions (2026-05-25): editorial typography for
   headings, settings-dropdown menu styling, and the
   [hidden]-overridden-by-display fix on the status-live-indicator.
   ────────────────────────────────────────────────────────────────── */

h1, h2 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h1 { font-size: clamp(28px, 4vw, 36px); line-height: 1.15; }
h2 { font-size: 22px; line-height: 1.25; }
h3 { font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}

/* Same class of bug as .rephotoshoot-modal[hidden] (CSS display: rule
   overriding the HTML hidden attribute). Force hidden to win. */
.status-live-indicator[hidden] { display: none !important; }

/* Settings nav dropdown — opens from the cog button in the topbar.
   Holds the consolidated admin links (Errors, Log, system settings). */
.settings-menu {
  position: relative;
}
.settings-menu-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 150;
}
.settings-menu-pop[hidden] { display: none !important; }
.settings-menu-pop a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--ink);
  font-size: var(--fs-md);
}
.settings-menu-pop a:hover { background: var(--surface2); }
.settings-menu-pop .sm-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 6px;
}
.settings-menu-pop .sm-hint {
  font-size: 11px;
  color: var(--ink3);
  padding: 4px 12px 8px;
}

/* Top-right nav badge for the external Posting handoff. */
.nav-ext {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav-ext::after {
  content: '↗';
  font-size: 10px;
  color: var(--ink3);
  margin-left: 2px;
}

/* scout-approve-and-schedule-v1 — two-button hover overlay */
.thumb-approve-actions {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5,7,10,0.10), rgba(5,7,10,0.72));
  transition: opacity 0.18s ease;
  padding: 14px;
}
.thumb-card:hover .thumb-approve-actions,
.thumb-approve-actions:focus-within {
  opacity: 1;
  pointer-events: auto;
}
.thumb-approve-actions .thumb-approve-form {
  position: static;
  inset: auto;
  opacity: 1;
  pointer-events: auto;
  background: none;
  width: 100%;
  display: flex;
  justify-content: center;
}
.thumb-approve-actions .thumb-approve-btn {
  transform: translateY(0);
  width: 100%;
  max-width: 220px;
}
.thumb-approve-btn--primary {
  background: var(--cyan, #FF7B5C) !important;
  color: #fff !important;
}

/* ── LIBRARY CARD CONSISTENCY + SCOUT ACTIONS (2026-06-02) ──────────────
   Goal: uniform tiles + a card that "behaves like a regular thing"
   (click to open/edit, trash to delete, Adjust before the HQ render). */

/* 1) Uniform tiles. The grid frame is already a fixed 4:5, but the image
   used object-fit:contain → landscape scouts letterboxed with dark bars
   while portraits filled, so the grid looked ragged. Fill the frame
   instead; keep the head-safe top anchor. */
.thumb-grid .thumb-img-wrap img {
  object-fit: cover;
  object-position: center top;
  background: var(--surface2);
}

/* 2) Click-through. The scout hover overlay used to cover the whole image
   and eat clicks, so you couldn't click the picture to open the editor.
   Make the OVERLAY transparent to clicks and only let the actual
   buttons/links (when visible on hover/focus) be interactive — clicking
   anywhere else on the image now falls through to the detail/edit link. */
.thumb-approve-actions { pointer-events: none !important; }
.thumb-approve-actions .thumb-approve-form { pointer-events: none; }
.thumb-card:hover .thumb-approve-actions .thumb-approve-form,
.thumb-approve-actions:focus-within .thumb-approve-form,
.thumb-card:hover .thumb-approve-actions > a.thumb-approve-btn,
.thumb-approve-actions:focus-within > a.thumb-approve-btn {
  pointer-events: auto;
}

/* 3) "Adjust" = neutral glass button (links to the editor). Render the <a>
   exactly like the sibling pill buttons. */
a.thumb-approve-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}
.thumb-approve-btn--ghost {
  background: rgba(18,20,24,0.82) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.38) !important;
  backdrop-filter: blur(4px);
}
.thumb-approve-btn--ghost:hover { background: rgba(40,44,52,0.94) !important; }

/* 4) Trash stays above the overlay and always clickable. */
.thumb-delete-btn { z-index: 14; }

/* PROMPT_SCENARIO_DISPLAY_2026_06_02 */
/* Scenario name header above prompt box */
.prompt-scenario-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 4px;
}
.prompt-scenario-name {
  font-size: 13px; font-weight: 700; color: var(--ink);
  letter-spacing: 0.01em;
}
.prompt-scenario-save-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--accent);
  background: var(--accent-dim, rgba(255,123,92,.08));
  border: 1px solid rgba(255,123,92,.3);
  border-radius: 6px; padding: 4px 10px;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.prompt-scenario-save-btn:hover {
  background: rgba(255,123,92,.16); border-color: rgba(255,123,92,.5);
}
.prompt-scenario-save-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.prompt-scenario-label {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent, #FF7B5C);
  background: rgba(255,123,92,.12); border: 1px solid rgba(255,123,92,.3);
  border-radius: 999px; padding: 2px 10px; margin-left: 8px;
  vertical-align: middle; white-space: nowrap;
}