/* Resilia Dashboard UI Kit styles */
@import url('../../colors_and_type.css?v=8486c210db6e');
/* Creative Strategist tab only: Lexend, a typeface designed for easy reading. A face file is
   fetched only when text on screen uses it, so no other tab downloads it. */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600&display=swap');

/* =====================================================   Craft redesign — nav shell / step rail / directions-sources card
   (2026 IA redesign: Create/Library/Settings). Uses the --rd-* tokens
   from colors_and_type.css. Appended here rather than interleaved so
   the diff against pre-redesign styles.css stays reviewable.
   ============================================================ */

/* Editorial Minimal: airy whitespace, confident type, hairlines instead of
   boxes, one teal accent used only for the active step + primary intent —
   never a filled badge/pill everywhere. */

.rd-workflow-header {
  padding: 24px 16px 21px;
  background: var(--rd-surface);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-md);
  font-family: var(--rd-font-sans);
  border-radius:var( --text-2xs );
}
.rd-workflow-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}
.rd-workflow-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.rd-breadcrumb {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rd-ink-4);
  min-width: 0;
}
/* The minted ad id must stay as stored. The parent uppercases "CREATE / …",
   which would otherwise turn anim_… into ANIM_…. */
.rd-breadcrumb-id {
  text-transform: none;
  letter-spacing: 0.02em;
}
.rd-spend-pill {
  font-family: var(--rd-font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-ink-3);
  background: var(--rd-surface);
  border: 1px solid var(--rd-line-3);
  border-radius: var(--rd-radius-pill);
  padding: 4px 12px;
}
.rd-id-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rd-font-mono);
  font-size: 12px;
  color: var(--rd-ink-3);
  background: var(--rd-panel, var(--bg-sunken));
  border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: var(--rd-radius-pill);
  padding: 5px 12px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 120ms var(--ease-standard, ease), color 120ms var(--ease-standard, ease);
}
.rd-id-pill:hover { border-color: var(--rd-teal-border); color: var(--rd-teal-ink); }
.rd-id-pill svg { flex: none; }
.rd-time-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--rd-font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-ink-3);
  background: var(--rd-surface);
  border: 1px solid var(--rd-line-3);
  border-radius: var(--rd-radius-pill);
  padding: 4px 12px;
  white-space: nowrap;
}
.rd-workflow-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.rd-workflow-heading-copy { min-width: 0; }
.rd-workflow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: var(--rd-radius-ctrl, 10px);
  background: var(--rd-teal-tint);
  color: var(--rd-teal-ink);
}
.rd-workflow-icon svg{
  width: 35px;
  height: 35px;
}
.rd-workflow-title {
  margin: 0 0 5px;
}
.rd-workflow-title:has(+ .rd-workflow-subtitle) { margin-bottom: 2px; }
.rd-workflow-subtitle {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--rd-ink-4);
  margin: 0;
}
.rd-step-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 12px;
  column-gap: 4px;
  margin: 2px 0 6px;
}
.rd-step-connector {
  width: 18px;
  height: 0;
  border-top: 1px dashed var(--rd-line-3);
  margin: 0;
  flex: 0 0 auto;
  align-self: center;
  transition: border-color var(--dur-fast, 120ms) var(--ease-standard, ease);
}
/* Progress-aware: the connector behind a completed step goes solid teal, so
   the rail reads as a filled track up to wherever the user has got to. */
.rd-step-connector.done { border-top-style: solid; border-top-width: 2px; border-top-color: var(--rd-teal); }
.rd-step-pill {
  /* the tooltip inside the pill anchors to this */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 8px;
  border-radius: var(--rd-radius-pill);
  border: 1px solid transparent;
  background: var(--rd-panel);
  color: var(--rd-ink-4);
  font-family: var(--rd-font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background var(--dur-fast, 120ms) var(--ease-standard, ease), color var(--dur-fast, 120ms) var(--ease-standard, ease);
}
.rd-step-pill.rd-step-done { background: var(--rd-surface); border-color: var(--rd-line-3); color: var(--rd-ink-2); }
.rd-step-pill.rd-step-current {
  background: var(--rd-teal);
  border-color: var(--rd-teal);
  color: #fff;
  font-weight: 700;
}
.rd-step-pill.rd-step-upcoming {
  background: var(--rd-panel);
  border-color: var(--rd-line-2);
  color: var(--rd-ink-5);
}
.rd-step-pill.rd-step-upcoming:hover { background: var(--rd-line-2); color: var(--rd-ink-3); }
.rd-step-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rd-line-2);
  color: var(--rd-ink-4);
  flex: 0 0 auto;
}
.rd-step-pill.rd-step-done .rd-step-marker { background: var(--rd-teal-tint); color: var(--rd-teal-ink); }
.rd-step-pill.rd-step-current .rd-step-marker { background: rgba(255,255,255,0.28); color: #fff; }
.rd-step-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* The numbered marker and the hover tooltip StepRail renders inside every pill. Both
   arrived in the markup without styles, so `.rd-step-tooltip` laid out as ordinary
   inline text and every pill read "Setup Step 1 of 7Setup" — in every flow that uses
   the rail, not just Animation Ads. */
.rd-step-num {
  font-family: var(--rd-font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rd-step-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  z-index: 30;
  display: grid;
  gap: 2px;
  padding: 7px 10px;
  border-radius: var(--rd-radius-ctrl, 8px);
  background: var(--rd-ink-1, #14181B);
  color: #fff;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
}
.rd-step-tooltip strong { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .72; }
.rd-step-tooltip > span { font-size: 12.5px; font-weight: 600; }
.rd-step-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -4px;
  border: 4px solid transparent;
  border-top-color: var(--rd-ink-1, #14181B);
}
.rd-step-pill:hover .rd-step-tooltip,
.rd-step-pill:focus-visible .rd-step-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .rd-step-tooltip { transition: none; }
}
.rd-step-spend-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border-radius: var(--rd-radius-pill);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 160ms var(--ease-standard, ease), transform 160ms var(--ease-standard, ease);
}
/* Lifts a touch further on hover — the "air" feel: it already floats at
   rest, and rises slightly under the cursor rather than snapping flat/raised. */
.rd-step-spend-wrap:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.rd-step-spend-badge {
  font-family: var(--rd-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--rd-teal-ink, var(--rd-ink-3));
  background: var(--rd-teal-tint, var(--rd-line-2));
  border: 1px solid var(--rd-line-3);
  border-radius: var(--rd-radius-pill);
  padding: 2px 8px;
  margin-left: -6px;
  cursor: pointer;
  white-space: nowrap;
}
.rd-step-spend-badge:hover { filter: brightness(0.96); }
.rd-step-spend-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: 180px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-line-3);
  border-radius: 10px;
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.12));
  padding: 10px 12px;
  font-family: var(--rd-font-sans);
}
.rd-step-spend-popover-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rd-ink-4);
  margin-bottom: 6px;
}
.rd-step-spend-popover-row, .rd-step-spend-popover-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--rd-ink-2);
  padding: 3px 0;
}
.rd-step-spend-popover-row span { text-transform: capitalize; color: var(--rd-ink-3); }
.rd-step-spend-popover-total {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--rd-line-2);
  font-weight: 700;
}
/* One clear action per wizard step, bottom-right — matches the reference's
   single "Continue to X ›" placement instead of a page full of buttons. */
.rd-step-continue {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rd-line-2, var(--border-subtle));
}
/* Journey progress under the step pills — opt-in via StepRail's `progressPct`.
   Animation Ads turns it on because that rail is seven steps (eight for a song ad),
   and past about five pills a rail reads as a menu rather than a sequence. */
.rd-rail-progress { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.rd-rail-progress-track {
  flex: 1; height: 4px; border-radius: 999px; overflow: hidden;
  background: var(--rd-line-2, var(--border-subtle));
}
.rd-rail-progress-track > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--rd-teal); transition: width .3s ease;
}
.rd-rail-progress-lbl {
  flex: none; font-size: 11px; font-weight: 600; color: var(--rd-ink-4, var(--fg-3));
  font-variant-numeric: tabular-nums;
}

.rd-next-hint {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--rd-radius-ctrl, 10px);
  background: var(--rd-panel, var(--bg-sunken));
  font-size: 13px;
  color: var(--rd-ink-2, var(--fg-2));
}
.rd-next-hint-kicker {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--rd-teal);
  color: #fff;
}

.rd-directions-card {
  font-family: var(--rd-font-sans);
  background: var(--rd-surface);
  border: 1px solid var(--rd-line-1);
  border-radius: var(--rd-radius-card);
  padding: var(--space-4);
}
.rd-sources-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: var(--space-3);
}
.rd-sources-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rd-sources-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--rd-ink-4);
}
.rd-sources-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
}
.rd-source-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--rd-radius-pill);
  border: 1px solid var(--rd-line-3);
  background: var(--rd-panel);
  color: var(--rd-ink-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.rd-source-pill:disabled { opacity: .5; cursor: not-allowed; }
.rd-source-pill.key-missing { border-color: var(--rd-warning-bd); }
/* Checkbox-style state indicator — the pill's on/off state used to be
   conveyed only by the whole button's background color, which reads badly
   at a glance ("is this checked or not?"). A checkbox square with a
   checkmark makes the on/off state unambiguous even before noticing color,
   while still filling with the platform's own brand color when on. */
.rd-source-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; flex-shrink: 0;
  border: 1.5px solid var(--rd-ink-4, #b2b8c2);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  transition: background 120ms var(--ease-standard, ease), border-color 120ms var(--ease-standard, ease);
}
.rd-source-check.on { border-color: transparent; }
.rd-source-pill.all { font-weight: var(--weight-semibold); }

.rd-key-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: var(--space-3);
  border-radius: var(--rd-radius-ctrl);
  background: var(--rd-warning-bg);
  border: 1px solid var(--rd-warning-bd);
  color: var(--rd-warning-fg);
  font-size: var(--text-sm);
}

.rd-dirs { position: relative; }
.rd-dirs-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--rd-radius-ctrl);
  border: 1px solid var(--rd-line-3);
  background: var(--rd-panel);
  color: var(--rd-ink-2);
  font-size: var(--text-sm);
  cursor: pointer;
}
.rd-dirs-trigger.active { border-color: var(--rd-teal-border); background: var(--rd-teal-tint); color: var(--rd-teal-ink); }
.rd-dirs-trigger-label { font-weight: var(--weight-semibold); }
.rd-dirs-chevron { display: inline-flex; transition: transform var(--dur-fast) var(--ease-standard); }
.rd-dirs-chevron.up { transform: rotate(180deg); }
.rd-modal-md {
  width: min(720px, 94vw);
  height: min(600px, 82vh);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  /* The scrolling belongs to .rd-dirs-grid inside, so the shell itself must
     not scroll too — .rd-modal's base `overflow: auto` would otherwise add a
     second scrollbar alongside the list's own. */
  overflow: hidden;
}
.rd-dirs-modal-title {
  margin: 0 44px var(--space-3) 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--rd-ink-1);
  flex-shrink: 0;
}
.rd-dirs-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin: 0 0 var(--space-3) 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rd-line-2);
}
.rd-dirs-popover-hint {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--rd-ink-2);
}
.rd-dirs-actions { display: flex; gap: 8px; flex-shrink: 0; }
.rd-dirs-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--rd-radius-pill, 999px);
  border: 1px solid var(--rd-teal-border);
  background: var(--rd-teal-tint);
  color: var(--rd-teal-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.rd-dirs-action:hover { background: var(--rd-teal); border-color: var(--rd-teal); color: #fff; }
.rd-dirs-action.danger {
  border-color: var(--rd-line-3);
  background: var(--rd-surface);
  color: var(--rd-ink-3);
}
.rd-dirs-action.danger:hover {
  border-color: var(--danger-500, #dc2626);
  background: var(--danger-bg, #fde8e8);
  color: var(--danger-500, #dc2626);
}
.rd-dirs-grid {
  flex: 1;
  /* A flex item defaults to min-height:auto, so this grid refuses to shrink
     below its content and pushes the modal taller instead of scrolling —
     the actual cause of the doubled scrollbar. */
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  align-content: start;
  gap: 8px;
  padding: 2px;
  /* Always-visible thumb (not hover-gated) — same reasoning as
     .adspy-dd-scroll: with 146+ picks this list is clearly scrollable, and
     it should look that way at rest, not just while being dragged. */
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.rd-dirs-grid::-webkit-scrollbar { width: 8px; }
.rd-dirs-grid::-webkit-scrollbar-track { background: transparent; }
.rd-dirs-grid::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.rd-dirs-grid::-webkit-scrollbar-thumb:hover { background: var(--fg-3); background-clip: content-box; }
.rd-dir-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--rd-radius-ctrl, 8px);
  border: 1px solid var(--rd-line-2);
  background: var(--rd-surface);
  color: var(--rd-ink-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.rd-dir-pill:hover { background: var(--rd-panel); border-color: var(--rd-line-3); }
.rd-dir-pill.on { background: var(--rd-teal-tint); border-color: var(--rd-teal-border);   }
.rd-dir-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.rd-dir-cbx {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1.5px solid var(--rd-line-3);
  background: var(--rd-surface);
  color: #fff;
}
.rd-dir-pill.on .rd-dir-cbx { background: var(--rd-teal); border-color: var(--rd-teal); }
.rd-dir-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.rd-filters { margin-top: var(--space-2); }

/* DirectionsSourcesCard always renders nested inside .ar-card (AutoresearchPanel,
   StaticAdsPanel) — its own border/background/padding stacked a second card
   chrome directly inside the outer one, producing a double border line and
   pushing its content ~17px further right than the sibling controls above it
   (Directions-to-crawl / Total ads) that sit directly in .ar-card's padding.
   Strip the inner chrome so everything shares one left edge and one border. */
.ar-card .rd-directions-card {
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin-top: 14px;
}

/* Fixed full-height rail (not a flex sibling of .content) so it spans the
   whole viewport instead of starting below .topbar. .app reserves the
   matching width via padding-left below, so it never overlaps .content. */
.rd-nav-shell {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w, 264px);
  z-index: 40;
  background: var(--bg-surface);
  border-right: 1px solid var(--rd-line-1);
  padding: var(--space-4) var(--space-3);
  font-family: var(--rd-font-sans);

   transition: width 0.25s ease;
}

.rd-nav-shell.collapsed { width: 64px; padding: var(--space-4) var(--space-2); }
.rd-nav-shell.collapsed .rd-nav-item{
  justify-content: center;
}
.rd-nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--space-2);
  margin-bottom: var(--space-5);
}
.rd-nav-shell.collapsed .rd-nav-brand { justify-content: center; padding: 0; }
.rd-nav-brand-mark { height: 30px; width: 30px; flex-shrink: 0; }
.rd-nav-brand-text { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.rd-nav-group { margin-bottom: var(--space-5); }
.rd-nav-group-title {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps, 0.08em);
  text-transform: uppercase;
  color: var(--rd-ink-5);
  padding: 0 var(--space-2);
  margin-bottom: var(--space-2);
  margin-top: 40px;
}
.rd-nav-list { display: flex; flex-direction: column; gap: 2px; }
.rd-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--rd-radius-ctrl);
  background: transparent;
  color: var(--rd-ink-2);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  position: relative;
}
.rd-nav-item:hover { background: var(--rd-line-2); }
.rd-nav-item.active { background: var(--rd-teal-tint); color: var(--rd-teal-ink); font-weight: var(--weight-semibold); }
.rd-nav-item.locked { color: var(--rd-ink-5); cursor: not-allowed; }
.rd-nav-item.locked:hover { background: transparent; }
.rd-nav-item-copy { display: flex; flex-direction: column; line-height: 1.25; }
.rd-nav-item-copy small { font-size: var(--text-2xs); color: var(--rd-ink-4); font-weight: var(--weight-regular); }
.rd-nav-item.active .rd-nav-item-copy small { color: var(--rd-teal-ink); opacity: .8; }
.rd-nav-count {
  margin-left: auto;
  background: var(--rd-teal);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  border-radius: var(--rd-radius-pill);
  padding: 1px 7px;
}
.rd-nav-shell.collapsed .rd-nav-count{
  position: absolute;
  right: -5px;
  top: -5px;
}
.rd-nav-shell.collapsed  .rd-nav-group{
  margin-bottom: 0;
}
.rd-nav-badge {
  margin-left: auto;
  background: var(--rd-teal);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: var(--rd-radius-pill);
  padding: 2px 6px;
}
.rd-nav-item.child { padding-left: 28px; }
.rd-nav-item.disclosure .rd-nav-chevron { margin-left: auto; transition: transform 120ms var(--ease-standard, ease); }
.rd-nav-item.disclosure .rd-nav-chevron.open { transform: rotate(180deg); }

/* Collapsed rail: a disclosure item's children have no inline room, so they
   surface in a card flyout anchored to the icon instead. */
.rd-nav-flyout-wrap { position: relative; }
.rd-nav-flyout {
  position: absolute;
  left: calc(100% + 8px);
  top: 0;
  z-index: 50;
  min-width: 190px;
  padding: 6px;
  border-radius: var(--rd-radius-card, 12px);
  border: 1px solid var(--rd-line-1);
  background: var(--rd-surface);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.16));
}

.rd-nav-flyout-title {
  padding: 6px 10px 4px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps, 0.08em);
  text-transform: uppercase;
  color: var(--rd-ink-5);
}
.rd-nav-flyout-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--rd-radius-ctrl);
  background: transparent;
  color: var(--rd-ink-2);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.rd-nav-flyout-item:hover { background: var(--rd-line-2); }
.rd-nav-flyout-item.active { background: var(--rd-teal-tint); color: var(--rd-teal-ink); font-weight: var(--weight-semibold); }
.rd-nav-flyout-item.locked { color: var(--rd-ink-5); cursor: not-allowed; }
.rd-nav-flyout-item.locked:hover { background: transparent; }

html, body, #root { height: 100%; }
body { background: var(--bg-app); color: var(--fg-1); font-size: 14px; overflow: hidden; min-width: 320px; }

/* -200, -400, -800, -900 were missing here, so anything keyed to them (the
   :active state on .btn-primary, focus-ring borders on inputs, the AdSpy
   filter-chip border/remove-button background) stayed teal no matter which
   accent was picked. */
[data-accent="amber"] { --primary-50:#fef6e7;--primary-100:#fde6b8;--primary-200:#f9d389;--primary-300:#f5c05a;--primary-400:#eead33;--primary-500:#e69a0c;--primary-600:#c07d00;--primary-700:#a56c00;--primary-800:#8a5b00;--primary-900:#6f4a00; }
[data-accent="indigo"] { --primary-50:#eef0ff;--primary-100:#dde1fc;--primary-200:#c1c7f9;--primary-300:#a5adf5;--primary-400:#7a7aed;--primary-500:#4f46e5;--primary-600:#3f38c4;--primary-700:#312aa0;--primary-800:#231c7c;--primary-900:#150e58; }

/* Dark theme reverses the ramp (see [data-theme="dark"] in colors_and_type.css:
   its -800 is a LIGHT shade for contrast against dark surfaces, not a dark
   one) so the light-mode accent shades above can't be reused as-is here. */
[data-theme="dark"][data-accent="amber"] { --primary-50:rgba(230,154,12,0.16);--primary-100:rgba(230,154,12,0.26);--primary-200:#5c4315;--primary-300:#f5c05a;--primary-400:#eead33;--primary-500:#f0ac1f;--primary-600:#f5c05a;--primary-700:#f8d488;--primary-800:#fde6b8;--primary-900:#fef6e7; }
[data-theme="dark"][data-accent="indigo"] { --primary-50:rgba(79,70,229,0.16);--primary-100:rgba(79,70,229,0.26);--primary-200:#2f2b6b;--primary-300:#a5adf5;--primary-400:#7a7aed;--primary-500:#6c63f0;--primary-600:#a5adf5;--primary-700:#c2c8f8;--primary-800:#dde1fc;--primary-900:#eef0ff; }

/* ===================== APP SHELL ===================== */
/* padding-left reserves the width of the fixed-position .rd-nav-shell
   (which is no longer a flex sibling of .content — see its rule above)
   so .topbar and .content sit to its right instead of underneath it. */
.app { display: flex; flex-direction: column; height: 100vh; padding-left: var(--sidebar-w, 264px); transition: padding-left 0.25s ease; }
.app.nav-collapsed { padding-left: 64px; }

/* The impersonation bar. Loud on purpose, and the one element on the page with no dismiss
   control: everything below it presents another person's account as if it were yours, and
   forgetting that is the whole risk. A bar that can be closed is the same as no bar, because it
   gets closed in the first minute and the next hour looks exactly like an ordinary session.

   Sits inside .app above the top bar rather than position:fixed, so it PUSHES the interface
   down instead of covering the first 44px of it -- an overlay would hide the top bar's own
   controls, and "the warning broke the nav" is how a safety feature gets removed. */
.an-impersonation-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: #7f1d1d;
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
}
.an-impersonation-text { flex: 1 1 auto; min-width: 0; }
.an-impersonation-text strong { font-weight: 650; }
.an-impersonation-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fca5a5;
  animation: an-impersonation-pulse 2s ease-in-out infinite;
}
/* Respected rather than assumed: a blinking dot is a real problem for some people, and the bar
   still reads perfectly well without the motion. */
@media (prefers-reduced-motion: reduce) {
  .an-impersonation-dot { animation: none; }
}
@keyframes an-impersonation-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.an-impersonation-stop {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #fff;
  border-radius: 6px;
  padding: 4px 12px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.an-impersonation-stop:hover:not(:disabled) { background: rgba(255, 255, 255, 0.15); }
.an-impersonation-stop:disabled { opacity: 0.6; cursor: default; }
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-app);
  padding: 24px;
}
.auth-panel {
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 28px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}
.auth-mark { width: 34px; height: 34px; }
.auth-brand { font-weight: 700; font-size: 18px; }
.auth-button { width: 100%; justify-content: center; }

/* ===================== TOPBAR ===================== */
.topbar {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  height: 56px; padding: 0 24px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar-divider { width: 1px; height: 18px; background: var(--border-default); margin: 0 4px; }
.topbar-workspace {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; padding: 4px 10px;
  border-radius: 6px; font: inherit; color: var(--fg-1); cursor: pointer;
  font-weight: 500;
}
.topbar-workspace:hover { background: var(--bg-hover); }
.topbar-center { flex: 1; display: flex; justify-content: center; }
.topbar-search {
  display: flex; align-items: center; gap: 8px;
  width: min(520px, 60%);
  height: 34px; padding: 0 12px;
  background: var(--bg-sunken); border: 1px solid var(--border-default);
  border-radius: 8px; color: var(--fg-3);
}
.topbar-search input { flex: 1; border: 0; background: transparent; font: inherit; color: var(--fg-1); outline: none; font-size: 13px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.admin-pending-badge {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 10px;
  border: 1px solid #fecaca; border-radius: 999px;
  background: #fff1f2; color: #b42318;
  font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.admin-pending-badge:hover { background: #ffe4e6; }
.admin-pending-dot { width: 7px; height: 7px; border-radius: 999px; background: #d92d20; }
.topbar-credits { display: inline-flex; gap: 6px; align-items: center; }
.credit-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; border: 1px solid transparent;
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.credit-chip-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.credit-chip-value { font-variant-numeric: tabular-nums; opacity: 0.9; }
.topbar-credit-alerts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.credit-alert-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.credit-alert-value { font-variant-numeric: tabular-nums; opacity: 0.85; }
.icon-btn {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 8px; color: var(--fg-2); cursor: pointer;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--fg-1); }
.icon-btn.active { background: var(--primary-50); color: var(--fg-brand); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.topbar-settings-wrap { position: relative; }
.topbar-settings-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  min-width: 300px;
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
}
.topbar-settings-menu-head {
  padding: 8px 10px 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.topbar-settings-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--fg-1);
  cursor: pointer;
  text-align: left;
}
.topbar-settings-item:hover { background: var(--bg-hover); }
.topbar-settings-item.active {
  background: var(--primary-50);
  border-color: var(--primary-300);
  color: var(--fg-brand);
}
.topbar-settings-item-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.topbar-settings-item-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}
.topbar-settings-item-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-3);
  font-size: 11px;
}
.topbar-settings-count {
  flex: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger-500, #ef4444);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.topbar-user { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-user-label { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); font-size: 12px; }
.avatar {
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--primary-500); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
}

/* ===================== TABBAR ===================== */
.tabbar {
  display: flex; gap: 2px;
  padding: 0 24px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
  /* Tabs are flex-shrink:0, so when they exceed the width they'd overflow and
     get clipped (the last tab — Upload Leg — was unreachable). Scroll instead. */
  overflow-x: auto;
  scrollbar-width: thin;            /* Firefox: slim, unobtrusive scrollbar */
  overscroll-behavior-x: contain;   /* horizontal swipe doesn't bounce the page */
}
/* WebKit (Chrome/Safari): a slim, low-profile horizontal scrollbar for the bar. */
.tabbar::-webkit-scrollbar { height: 6px; }
.tabbar::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 999px; }
.tabbar::-webkit-scrollbar-track { background: transparent; }
.tab {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 14px;
  white-space: nowrap;
  flex-shrink: 0;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--fg-2);
  cursor: pointer; position: relative; top: 1px;
  transition: color 120ms var(--ease-standard);
}
.tab:hover:not(.active) { color: var(--fg-1); }
.tab.active { color: var(--fg-brand); border-bottom-color: var(--primary-500); font-weight: 600; }
.tab.locked {
  color: var(--fg-4);
  cursor: not-allowed;
  height: auto;
  min-height: 44px;
  padding-top: 4px;
  padding-bottom: 4px;
  align-items: center;
}
.tab.locked:hover {
  color: var(--fg-3);
}
.tab-label-stack {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
}
.tab-label-stack.with-lock {
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
}
.tab-label-line { white-space: nowrap; }
.tab-lock-text {
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--bg-sunken);
  color: var(--fg-3);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 1px 5px;
  margin-top: 1px;
  white-space: nowrap;
}
.tab-count {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--bg-sunken); padding: 1px 7px; border-radius: 999px; color: var(--fg-3);
}
.tab.active .tab-count { background: var(--primary-50); color: var(--primary-700); }

/* ===================== CONTENT SHELL ===================== */
.workspace-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  background: var(--bg-app);
}
.content {
  flex: 1; overflow-y: auto;
  min-width: 0;
  padding: 24px 32px 120px;
  background: var(--rd-teal-tint);
  box-shadow: inset 0 0 2rem 0 color-mix(in srgb, var(--primary-500) 12%, transparent);
}
.content-hdr { display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
    padding: 8px 12px;
    background: var(--primary-50);
    border: 1px solid var(--primary-100, var(--border-default));
    font-family: var(--rd-font-sans);
    border-radius: var(--rd-radius-card, 12px);
}
.content-title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.content-sub { font-size: 12px; color: var(--fg-3); }
.content-hdr .spacer { flex: 1; }

/* ===================== SEARCH ROW ===================== */
.search-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px; align-items: center;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 10px; padding: 10px 12px;
}
.sr-main-controls,
.sr-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
}
.sr-main-controls { flex-wrap: wrap; }
.sr-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.sr-filter-section {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  margin-bottom: 20px;
}
.sr-filter-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--fg-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sr-filter-section-head span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.sr-filter-section-head i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--primary-500);
}
.sr-filter-section-foreplay .sr-filter-section-head i { background: #8b5cf6; }
.sr-filter-section-adspy .sr-filter-section-head i { background: #f97316; }
.sr-filter-section-brandsearch .sr-filter-section-head i { background: #0ea5e9; }

/* Active-filter summary chips shown above a filter section — "what have I
   selected" at a glance, without opening every dropdown. Each chip carries
   its own × to clear just that one filter. */
.sr-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 -2px;
}
.sr-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--primary-200, var(--primary-300));
  background: var(--primary-50, #e7f5f3);
  color: var(--fg-brand);
  font-size: 12px;
  line-height: 1;
}
.sr-filter-chip-label { font-weight: 600; }
.sr-filter-chip-value {
  padding-left: 5px;
  border-left: 1px solid var(--primary-200, var(--primary-300));
  color: var(--fg-2);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
  line-height: 16px;
}
.sr-filter-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  /* A teal-on-pale-teal icon (matching the rest of the chip) all but
     disappeared — a filled circle behind it gives the × a real background to
     read against instead of relying on stroke color alone. */
  background: var(--primary-200, rgba(15, 160, 139, 0.22));
  color: var(--fg-brand);
  cursor: pointer;
  transition: background 120ms var(--ease-standard, ease), color 120ms var(--ease-standard, ease), transform 120ms var(--ease-standard, ease);
}
.sr-filter-chip-remove svg { stroke-width: 6.5; }
.sr-filter-chip-remove:hover {
  background: var(--danger-500, #dc2626);
  color: #fff;
  transform: scale(1.08);
}
.sr-main-controls > .sr-select { flex: 0 1 190px; }
.sr-main-controls > .sr-input:not(.sr-select):not(.sr-num) {
  flex: 1 1 220px;
  min-width: 180px;
}
.sr-main-controls > .sr-num { flex: 0 0 80px; }
.sr-select {
  height: 32px; padding: 0 28px 0 10px;
  font: inherit; font-size: 13px; color: var(--fg-1);
  background: var(--bg-sunken); border: 1px solid var(--border-default);
  border-radius: 6px; outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 120ms var(--ease-standard, ease), border-color 120ms var(--ease-standard, ease), background-color 120ms var(--ease-standard, ease);
}
.sr-select:hover { border-color: var(--border-strong); }
.sr-select:focus { border-color: var(--primary-500); box-shadow: var(--shadow-focus); background-color: var(--bg-surface); }
.sr-input {
  height: 40px; padding: 0 10px;
  font: inherit; font-size: 13px; color: var(--fg-1);
  background: var(--bg-sunken); border: 1px solid var(--border-default);
  border-radius: 6px; outline: none;
  transition: box-shadow 120ms var(--ease-standard, ease), border-color 120ms var(--ease-standard, ease), background-color 120ms var(--ease-standard, ease);
}
.sr-input:hover { border-color: var(--border-strong); }
.sr-input:focus { border-color: var(--primary-500); box-shadow: var(--shadow-focus); background: var(--bg-surface); }
.sr-num { text-align: center; font-family: var(--font-mono); }
.sr-num::-webkit-inner-spin-button, .sr-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.sr-toggles { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.sr-row-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: 7px;
  background: var(--bg-sunken);
  color: var(--fg-1);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.sr-row-search:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--border-strong); }
.sr-row-search:disabled { opacity: 0.65; cursor: default; }
.sr-foreplay-filters,
.sr-adspy-filters,
.sr-brandsearch-filters {
  grid-column: 1 / -1;
  max-width: 100%;
  min-width: 0;
  gap: 10px;
}
.sr-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding: 0 7px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-sunken);
  color: var(--fg-3);
  font-size: 11px;
}
.sr-mini input {
  width: 56px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fg-1);
  font: inherit;
  font-family: var(--font-mono);
}
.sr-mini.wide input { width: 92px; }
.sr-mini.date input { width: 96px; }
.sr-mini.ar-stepper { border: none; background: transparent; padding: 0; height: auto; }
.sr-slider {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-sunken);
  color: var(--fg-3);
  font-size: 11px;
}
.sr-main-controls > .sr-slider { flex: 0 1 170px; }
.sr-main-controls > .sr-slider-wide { flex-basis: 220px; }
.sr-slider input[type="range"] {
  width: 90px;
  min-width: 0;
  accent-color: var(--primary-500);
}
.sr-slider-wide input[type="range"] { width: 130px; }
.sr-slider strong {
  min-width: 34px;
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-align: right;
}
.sr-slider-wide strong { min-width: 46px; }
.sr-mini-select { width: 86px; }
.sr-mini-select.wide { width: 116px; }
.sr-bs-platform { width: 100%; }
.sr-foreplay-filters,
.sr-brandsearch-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
 .sr-foreplay-filters-list{
   flex: 1 1 150px;
    min-width: 150px;
 }
 .sr-foreplay-filters-list .filters-input{
  width: 100%;
  background-color: transparent;
  justify-content: space-between;
 }
 .sr-foreplay-filters-list .filters-input input{
  width: 80px;
 }
 .sr-foreplay-filters-list .filters-input .ar-stepper-control{
  width: 142px;
  background: transparent;
 }
 .sr-foreplay-filters-list .filters-input span{
  color: var(--fg-1);
 }

 .sr-foreplay-filters-list .adspy-dd-trigger{
    font-size: 13px;
    border: 1px solid var(--border-default);
    padding-left: 10px;
    padding-right: 1px;
    border-radius: 6px;
    background-color: transparent;
 }
 .sr-foreplay-filters-list .adspy-dd-trigger svg{
  stroke-width:4px;
 }
.sr-foreplay-filters-list  .adspy-dd-trigger-text{
    display: flex;
    gap: 10px;
    align-items: center;
 }

 .sr-foreplay-filters-list  .adspy-dd.active .adspy-dd-trigger , .sr-foreplay-filters-list  .adspy-dd.open .adspy-dd-trigger{
   border: 1px solid var(--border-default);
 }
.sr-adspy-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
  gap:15px 10px;
  padding: 12px 0 4px;
}
.sr-brandsearch-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
  gap: 12px 10px;
  padding-top: 12px;
}
.adspy-dd { position: relative; min-width: 0; }
.adspy-dd-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 1px 10px 10px;
  border: 0;
  min-height: 43px;
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--fg-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: background var(--dur-fast, 120ms) var(--ease-standard, ease),
    border-color var(--dur-fast, 120ms) var(--ease-standard, ease),
    box-shadow var(--dur-fast, 120ms) var(--ease-standard, ease);
}
.adspy-dd-trigger:hover { background: var(--bg-hover); border-color: var(--border-strong);  }
.adspy-dd-trigger svg { color: var(--fg-4); flex-shrink: 0; transition: transform var(--dur-fast, 120ms) var(--ease-standard, ease); }
.adspy-dd-trigger-text {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: center;
  text-align: left;
}
.adspy-dd-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-1);
  font-weight: 600;
}
.adspy-dd-preview-wrap {
  position: relative;
  display: inline-flex;
  min-width: 0;
  outline: none;
}
/* .adspy-dd-preview clips its own text with overflow:hidden for the
   ellipsis, so the tooltip bubble (.ar-tooltip) has to live in this
   sibling wrapper instead of inside it — otherwise the wrapper's own
   clipping would cut the popover off too. */
.adspy-dd-preview-wrap:hover .ar-tooltip,
.adspy-dd-preview-wrap:focus-visible .ar-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.adspy-dd-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 250px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-50, #e7f5f3);
  color: var(--fg-brand);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
}
/* A filter with a value picked stands out — teal border + tinted background
   — instead of looking identical to an untouched filter. */
.adspy-dd.active .adspy-dd-trigger {
  border-color: var(--primary-300, var(--primary-500));
  background: var(--primary-50, #e7f5f3);

}
.adspy-dd.active .adspy-dd-trigger:hover { box-shadow: var(--shadow-md), 0 0 0 1px var(--primary-100, rgba(15,160,139,0.14)); }
.adspy-dd.active .adspy-dd-trigger .adspy-dd-label { color: var(--fg-brand); }
.adspy-dd.active .adspy-dd-trigger .adspy-dd-preview { background: var(--bg-surface); }
.adspy-dd.open .adspy-dd-trigger {
  border-color: var(--primary-500);
  box-shadow: var(--shadow-focus);
}
.adspy-dd.open .adspy-dd-trigger svg { transform: rotate(180deg); color: var(--primary-500); }
.adspy-dd-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  min-width: 100%;
  max-width: min(300px, calc(100vw - 48px));
  padding: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-surface);
  color: var(--fg-1);
  box-shadow: var(--shadow-lg);
  animation: dd-menu-in 120ms var(--ease-standard, ease);
}
@keyframes dd-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.adspy-dd-body { display: grid; gap: 12px; }
.adspy-dd-options { display: grid; gap: 2px; }
.adspy-dd-scroll {
  max-height: 220px;
  overflow: auto;
  padding-right: 4px;
  /* Always-visible thumb (not hover-gated) so it's obvious at a glance that
     the list scrolls, rather than relying on the native scrollbar only
     showing up while actively dragging it. */
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.adspy-dd-scroll::-webkit-scrollbar { width: 8px; }
.adspy-dd-scroll::-webkit-scrollbar-track { background: transparent; }
.adspy-dd-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.adspy-dd-scroll::-webkit-scrollbar-thumb:hover { background: var(--fg-3); background-clip: content-box; }
.adspy-dd-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--fg-2);
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms var(--ease-standard, ease), color 120ms var(--ease-standard, ease);
}
.adspy-dd-option:hover { background: var(--bg-hover); color: var(--fg-1); }
.adspy-dd-option:has(input:checked) { color: var(--fg-brand); font-weight: 600; }
.adspy-dd-option input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--primary-500); }
.adspy-dd-help { color: var(--fg-3); font-size: 12px; }
.adspy-dd-range,
.adspy-dd-field {
  display: grid;
  gap: 8px;
  color: var(--fg-2);
  font-size: 12px;
}
.adspy-dd-range input[type="range"] {
  width: 100%;
  accent-color: var(--primary-500);
}
.adspy-dd-field input {
  width: 100%;
  height: 32px;
  border: 0;
  border-bottom: 1px solid var(--border-default);
  outline: 0;
  background: transparent;
  color: var(--fg-1);
  font: inherit;
}
.adspy-dd-field input:focus { border-bottom-color: var(--primary-500); }
.adspy-dd-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
  margin-top: 12px;
  padding: 8px 12px;
  border: 0;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
  color: var(--fg-3);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 120ms var(--ease-standard, ease), background 120ms var(--ease-standard, ease);
}
.adspy-dd-reset:hover { color: var(--danger-500, #dc2626); background: var(--danger-bg, #fde8e8); }
.adspy-dd-reset svg{
  margin-left: -15px;
}
@media (max-width: 760px) {
  .sr-main-controls > .sr-select,
  .sr-main-controls > .sr-input:not(.sr-select):not(.sr-num),
  .sr-main-controls > .sr-slider,
  .sr-main-controls > .sr-slider-wide {
    flex-basis: 100%;
  }
  .sr-main-controls > .sr-num { flex: 1 1 80px; }
  .sr-actions { justify-content: flex-start; }
  .sr-adspy-filters,
  .sr-brandsearch-filters { grid-template-columns: 1fr 1fr; }
}
.sr-url-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}
.sr-url-input { width: 100%; }
.plat-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px;
  background: var(--bg-sunken); color: var(--fg-3);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font: inherit; font-size: 11px; font-weight: 500;
  cursor: pointer;
  transition: all 120ms var(--ease-standard);
}
.plat-toggle:hover { color: var(--fg-1); }
.plat-dot { width: 6px; height: 6px; border-radius: 999px; }

.sr-add {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px dashed var(--border-strong);
  border-radius: 8px; padding: 8px 12px;
  color: var(--fg-2); font: inherit; font-size: 13px;
  cursor: pointer; align-self: flex-start;
}
.sr-add:hover { background: var(--bg-hover); color: var(--fg-1); border-style: solid; border-color: var(--border-default); }

/* ===================== PRIMARY BUTTONS ===================== */
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 16px;
  background: var(--primary-600); color: #fff;
  border: 0; border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background 120ms var(--ease-standard);
}
.btn-primary:hover { background: var(--primary-700); }
.btn-primary:active { background: var(--primary-800); }
.btn-primary:disabled { background: var(--neutral-200); color: var(--fg-4); cursor: not-allowed; }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  background: var(--bg-surface); color: var(--fg-1);
  border: 1px solid var(--border-default);
  border-radius: 8px; font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.btn-secondary:hover { background: var(--bg-hover); }
.btn-secondary.compact { height: 28px; padding: 0 9px; font-size: 12px; }
.btn-secondary.danger { color: #b42318; border-color: #fecaca; }
.btn-secondary.danger:hover { background: #fff1f2; }
.ghost-btn {
  background: transparent; border: 0; padding: 4px 8px;
  color: var(--fg-3); font: inherit; font-size: 12px; cursor: pointer;
  border-radius: 6px;
}
.ghost-btn:hover { background: var(--bg-hover); color: var(--fg-1); }

/* Shared text input / select control used across admin screens (filters,
   Add User form, API Key Manager, etc.) — was previously an unstyled class
   name with no matching rule, so these fields rendered as bare browser
   defaults (no border-radius, padding, or consistent font-size). */
.input {
  display: inline-flex; align-items: center;
  height: 36px; min-width: 200px;
  padding: 0 12px;
  background: var(--bg-surface); color: var(--fg-1);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  font: inherit; font-size: 13px;
  outline: none;
  transition: border-color 120ms var(--ease-standard), box-shadow 120ms var(--ease-standard);
}
.input::placeholder { color: var(--fg-4); }
.input:focus { border-color: var(--primary-400); box-shadow: 0 0 0 3px var(--primary-100); }
.input:disabled { background: var(--bg-sunken); color: var(--fg-4); cursor: not-allowed; }
select.input { cursor: pointer; }

/* Custom checkbox — one look for every native checkbox in the dashboard.
   Previously these were styled three different ways: a few tinted with
   `accent-color` (still the OS control, so Windows and Mac disagreed), two
   hand-rolled (.rd-dir-cbx, .creative-cbx), and most of the admin screens
   left as raw browser defaults.

   Wrapped in :where() so the whole block carries ZERO specificity: any
   existing rule still wins on the properties it sets — .admin-platform-toggle
   input keeps its 14px, .rd-dir-pill input stays visually hidden
   (opacity:0/width:0), and the two bespoke tick boxes are untouched — while
   `appearance:none` and the checked/indeterminate painting (which nothing
   else sets) apply everywhere. That makes this additive, not a rewrite.

   Only native inputs are affected. The .vlds design system's Checkbox is a
   role="checkbox" widget, not an <input>, so it keeps its own look. */
:where(input[type="checkbox"]) {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg-surface);
  cursor: pointer;
  transition: background 120ms var(--ease-standard, ease),
    border-color 120ms var(--ease-standard, ease),
    box-shadow 120ms var(--ease-standard, ease);
}
:where(input[type="checkbox"]:hover:not(:disabled)) { border-color: var(--primary-400); }
:where(input[type="checkbox"]:focus-visible) {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}
:where(input[type="checkbox"]:checked),
:where(input[type="checkbox"]:indeterminate) {
  background: var(--primary-500);
  border-color: var(--primary-500);
}
/* Tick drawn with a rotated border rather than an SVG/mask, so it needs no
   extra asset and scales with the box via em units. */
:where(input[type="checkbox"])::after {
  content: '';
  width: 0.3em;
  height: 0.55em;
  margin-top: -0.12em;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 120ms var(--ease-standard, ease);
}
:where(input[type="checkbox"]:checked)::after { transform: rotate(45deg) scale(1); }
/* Indeterminate ("some selected") — a dash, not a tick. */
:where(input[type="checkbox"]:indeterminate)::after {
  width: 0.55em;
  height: 0;
  margin-top: 0;
  border-width: 0 0 2px 0;
  transform: rotate(0deg) scale(1);
}
:where(input[type="checkbox"]:disabled) {
  background: var(--bg-sunken);
  border-color: var(--border-default);
  cursor: not-allowed;
  opacity: 0.6;
}
:where(input[type="checkbox"]:disabled:checked) { background: var(--fg-4); border-color: var(--fg-4); }

/* Custom radio — same treatment as the checkbox above, circular with a dot.
   Only one radio group exists in the whole dashboard (AdSpy's "Site type"
   filter, SearchRow.jsx), so this is effectively scoped already, but it's
   still wrapped in :where() for the same reason: additive, never fighting a
   more specific rule that might target it later. */
:where(input[type="radio"]) {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg-surface);
  cursor: pointer;
  transition: border-color 120ms var(--ease-standard, ease), box-shadow 120ms var(--ease-standard, ease);
}
:where(input[type="radio"])::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-500);
  transform: scale(0);
  transition: transform 120ms var(--ease-standard, ease);
}
:where(input[type="radio"]:checked) { border-color: var(--primary-500); }
:where(input[type="radio"]:checked)::after { transform: scale(1); }
:where(input[type="radio"]:hover:not(:disabled)) { border-color: var(--primary-400); }
:where(input[type="radio"]:focus-visible) {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-100);
}
:where(input[type="radio"]:disabled) {
  background: var(--bg-sunken);
  border-color: var(--border-default);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Native date inputs (Cost Dashboard date range, Static Ads gallery filter,
   Video Editor daily-cost picker, …) — a bare `type="date"` gets no border
   radius/padding/focus ring by default, and Chrome's calendar-picker icon is
   solid black, so it disappears against a dark-theme background.
   The box-model defaults are wrapped in :where() (zero specificity) so any
   date input already styled via its own class (.cost-user-filter-select,
   .sa-gallery-filter input[type="date"], …) keeps its existing look; only a
   genuinely unstyled date input falls back to this. The calendar-icon fix
   (hover + dark-mode visibility) applies everywhere unconditionally, since
   no date input in the app styles that pseudo-element today. */
:where(input[type="date"]) {
  height: 36px; padding: 0 10px;
  border: 1px solid var(--border-default); border-radius: 8px;
  background: var(--bg-surface); color: var(--fg-1);
  font: inherit; font-size: 13px; outline: none;
}
:where(input[type="date"]):focus { border-color: var(--primary-400); box-shadow: 0 0 0 3px var(--primary-100); }
:where(input[type="date"]):disabled { background: var(--bg-sunken); color: var(--fg-4); cursor: not-allowed; }
input[type="date"] { color-scheme: light; }
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer; border-radius: 4px; padding: 3px;
  transition: background 120ms var(--ease-standard);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { background: var(--bg-hover); }
[data-theme="dark"] input[type="date"] { color-scheme: dark; }
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }

/* ===================== PLATFORM PANEL ===================== */
.platform-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--shadow-md);
}
.pp-hdr {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  position: sticky; top: 0; z-index: 2;
}
.pp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.pp-dot { width: 6px; height: 6px; border-radius: 999px; }
.pp-count { font-size: 12px; color: var(--fg-2); font-weight: 500; }
.pp-dedupe { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--fg-3); font-family: var(--font-mono); }
.pp-spacer { flex: 1; }
.pp-selected { font-size: 12px; color: var(--primary-600); font-family: var(--font-mono); font-weight: 600; }

.pp-grid {
  display: grid;
  gap: 12px;
  padding: 14px;
}
.pp-grid.density-comfortable { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; padding: 18px; }
.pp-grid.density-compact { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; padding: 12px; }

/* ===================== AD CARD ===================== */
.creative {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 120ms var(--ease-standard);
  display: flex; flex-direction: column;
}
.creative:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.creative.sel { border-color: var(--primary-500); box-shadow: var(--shadow-focus); }
.creative.current-run {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 1px rgba(15, 181, 168, 0.24), var(--shadow-md);
}
.creative.truncation-warning {
  background: #fefce8;
  border-color: #facc15;
}
.creative.truncation-warning:hover {
  border-color: #eab308;
  box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.18), var(--shadow-md);
}
.creative.truncation-warning.sel {
  border-color: var(--primary-500);
  box-shadow: var(--shadow-focus);
}
[data-theme="dark"] .creative.truncation-warning {
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(250, 204, 21, 0.45);
}
.creative-thumb {
  aspect-ratio: 4/5; position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.creative-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  z-index: 1;
}
.creative-thumb-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  background: #111827;
  z-index: 0;
}
.creative-cbx {
  position: absolute; top: 8px; left: 8px;
  width: 20px; height: 20px;
  background: rgba(255,255,255,0.92); border: 1px solid rgba(0,0,0,0.08);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  box-shadow: var(--shadow-md);
  transition: all 120ms var(--ease-standard);
  z-index: 2;
}
.creative-cbx.on { background: var(--primary-500); border-color: var(--primary-500); color: #fff; }
.creative-plat {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 600;
  z-index: 2;
}
.creative-plat-dot { width: 5px; height: 5px; border-radius: 999px; }
.creative-current-run {
  position: absolute;
  top: 34px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--primary-500);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  box-shadow: var(--shadow-md);
}
.creative-dislike {
  position: absolute; top: 34px; left: 8px;
  z-index: 2;
  width: 26px; height: 26px;
  border: 0; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); color: #fff;
  opacity: 0;
  transition: opacity 120ms var(--ease-standard), background 120ms var(--ease-standard);
}
.creative:hover .creative-dislike { opacity: 1; }
.creative-dislike:hover { background: rgba(185,28,28,0.9); }
.creative-play {
  position: relative;
  z-index: 2;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(0,0,0,0.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: all 150ms var(--ease-standard);
}
.creative:hover .creative-play { background: rgba(0,0,0,0.75); transform: scale(1.05); }
.creative-duration {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,0.7); color: #fff;
  padding: 1px 6px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  z-index: 2;
}
.creative-truncation-badge {
  position: absolute;
  left: 42px;
  bottom: 8px;
  max-width: calc(100% - 96px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #facc15;
  color: #713f12;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  z-index: 2;
  box-shadow: var(--shadow-md);
}
.creative-expand {
  position: absolute; bottom: 8px; left: 8px;
  width: 26px; height: 26px;
  background: rgba(0,0,0,0.55); color: #fff;
  border: 0; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 120ms var(--ease-standard), background 120ms var(--ease-standard);
  z-index: 2;
}
.creative:hover .creative-expand { opacity: 1; }
.creative-expand:hover { background: rgba(0,0,0,0.8); }
.creative-brand-row { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.creative-has-transcript {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px;
  background: var(--primary-50); color: var(--primary-600);
}
[data-theme="dark"] .creative-has-transcript { background: rgba(47,179,156,0.15); color: var(--primary-300); }

/* ===================== LARGE MODAL (centered dialog) ===================== */
.rd-modal-scrim {
  position: fixed; inset: 0; background: var(--bg-overlay);
  z-index: 300;
  /* column, not row: centering along the CROSS axis (row's align-items) has no
     reliable way to reach content that overflows once the scrim scrolls -- a
     modal taller than the viewport just clipped top and bottom with nothing
     to scroll to. Centering along the MAIN axis (column's justify-content)
     is the one flexbox handles correctly when its content overflows. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-6);
  overflow-y: auto;
  animation: scrim-in 180ms var(--ease-standard);
}
/* Exit transition — the scrim/modal stay mounted for a beat after close
   (window.useModalMounted in shared.jsx adds this class and unmounts once
   the animation duration elapses) so closing fades out instead of the
   modal just vanishing. pointer-events:none so a stray click during the
   fade can't hit anything underneath the still-visible overlay. */
.rd-modal-scrim.closing { animation: scrim-out 160ms var(--ease-standard) forwards; pointer-events: none; }
@keyframes scrim-out { from { opacity: 1; } to { opacity: 0; } }
.rd-modal {
  position: relative;
  background: var(--rd-surface, var(--bg-surface));
  border-radius: var(--rd-radius-card, 12px);
  box-shadow: var(--shadow-xl);
  z-index: 301;
  animation: modal-in 200ms var(--ease-standard);
}
/* Dark mode: --rd-surface (#13161b) sits right next to the black scrim
   (--bg-overlay) behind it, so the modal edge all but disappears. One step
   lighter than the surface color, plus a hairline border, gives it a real
   boundary instead of reading as a hole in the page. */
[data-theme="dark"] .rd-modal {
  background: #1c212a;
  border: 1px solid var(--rd-line-1, #262b33);
}
.rd-modal.closing { animation: modal-out 160ms var(--ease-standard) forwards; }
.rd-modal-lg {
  width: min(1180px, 96vw);
  height: min(880px, 92vh);
  padding: var(--space-6);
}
@keyframes modal-in { from { transform: translateY(12px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes modal-out { from { transform: translateY(0) scale(1); opacity: 1; } to { transform: translateY(8px) scale(0.98); opacity: 0; } }

/* Admin modal — full page, not a centered floating dialog. Same scrim
   component as the other rd-modal-* dialogs, but sized to fill the viewport
   edge-to-edge (no backdrop padding, no rounded corners) since every admin
   screen is a dense data view that wants the space, not a compact card. */
.admin-modal-scrim { padding: 14px; align-items: stretch; }
.admin-modal-shell {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--rd-radius-card, 12px);
  padding: var(--space-6);
  animation: admin-modal-in 160ms var(--ease-standard);
  /* Column layout so the tab bar stays pinned and only the body scrolls —
     .rd-modal's base `overflow: auto` would otherwise scroll the whole shell,
     carrying the tabs off-screen with the content. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.admin-modal-shell > .admin-modal-tabs { flex-shrink: 0; }
.admin-modal-body {
  flex: 1;
  /* Flex items default to min-height:auto and refuse to shrink below their
     content, which would push the shell taller instead of scrolling here. */
  min-height: 0;
  overflow-y: auto;
  /* Room so content never sits under the scrollbar. */
  padding-right: 4px;
  /* Same thin, self-effacing scrollbar the tab bar uses: neutral at rest,
     teal once the user is actually interacting with this region. */
  scrollbar-width: thin;
  scrollbar-color: var(--rd-line-3, var(--border-strong)) transparent;
}
.admin-modal-body:hover { scrollbar-color: var(--rd-teal, var(--primary-500)) transparent; }
.admin-modal-body::-webkit-scrollbar { width: 8px; }
.admin-modal-body::-webkit-scrollbar-track { background: transparent; }
.admin-modal-body::-webkit-scrollbar-thumb {
  background: var(--rd-line-3, var(--border-strong));
  border-radius: 999px;
  /* Inset the thumb so it reads as a slim pill rather than a full-width bar. */
  border: 2px solid transparent;
  background-clip: content-box;
}
.admin-modal-body:hover::-webkit-scrollbar-thumb { background: var(--rd-teal, var(--primary-500)); background-clip: content-box; }
.admin-modal-body::-webkit-scrollbar-thumb:hover { background: var(--rd-teal-ink, var(--primary-600)); background-clip: content-box; }
.admin-modal-shell.closing { animation: admin-modal-out 140ms var(--ease-standard) forwards; }
@keyframes admin-modal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes admin-modal-out { from { opacity: 1; } to { opacity: 0; } }
.rd-modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--rd-line-1, var(--border-default));
  border-radius: 999px;
  background: var(--rd-panel, var(--bg-sunken));
  color: var(--rd-ink-3, var(--fg-2));
  cursor: pointer;
}
.rd-modal-close:hover { background: var(--rd-line-2, var(--bg-hover)); color: var(--rd-ink-1, var(--fg-1)); }
.admin-modal-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  min-height: 60px;
  margin: -4px 44px 16px -4px;
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--rd-line-1, var(--border-default));
  scrollbar-width: thin;
  scrollbar-color: var(--rd-line-3, var(--border-strong)) transparent;
}
.admin-modal-tabs:hover { scrollbar-color: var(--rd-teal, var(--primary-500)) transparent; }
.admin-modal-tabs::-webkit-scrollbar { height: 6px; }
.admin-modal-tabs::-webkit-scrollbar-track { background: transparent; }
.admin-modal-tabs::-webkit-scrollbar-thumb {
  background: var(--rd-line-3, var(--border-strong));
  border-radius: 999px;
}
.admin-modal-tabs:hover::-webkit-scrollbar-thumb { background: var(--rd-teal, var(--primary-500)); }
.admin-modal-tabs::-webkit-scrollbar-thumb:hover { background: var(--rd-teal-ink, var(--primary-600)); }
.admin-modal-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 7px 12px;
  border: none;
  border-radius: var(--rd-radius-ctrl, 8px);
  background: transparent;
  color: var(--rd-ink-3, var(--fg-2));
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.admin-modal-tab:hover { background: var(--rd-panel, var(--bg-hover)); color: var(--rd-ink-1, var(--fg-1)); }
.admin-modal-tab.active { background: var(--rd-teal-tint); color: var(--rd-teal-ink); }
.admin-modal-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  background: var(--danger-500, #dc2626); color: #fff;
  font-size: 10px; font-weight: 700;
}
.admin-modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 64px 16px;
  color: var(--rd-ink-3, var(--fg-2));
  font-size: 13px;
}
.admin-modal-spinner {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2.5px solid var(--rd-line-2, var(--border-subtle));
  border-top-color: var(--rd-teal, var(--primary-500));
  animation: admin-modal-spin 0.7s linear infinite;
}
@keyframes admin-modal-spin { to { transform: rotate(360deg); } }

/* ===================== DRAWER ===================== */
.drawer-scrim {
  position: fixed; inset: 0; background: var(--bg-overlay);
  z-index: 300;
  animation: scrim-in 180ms var(--ease-standard);
}
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(520px, 92vw);
  background: var(--bg-surface);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-xl);
  z-index: 301;
  display: flex; flex-direction: column;
  animation: drawer-in 220ms var(--ease-standard);
}
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.drawer-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.drawer-id { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.drawer-body {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column;
}
.drawer-media {
  aspect-ratio: 4/5;
  max-height: 400px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.drawer-section {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 10px;
}
.drawer-section:last-child { border-bottom: 0; }
.drawer-brand { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.drawer-copy { font-size: 14px; color: var(--fg-2); line-height: 1.55; margin: 0; }
.drawer-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; margin-top: 4px;
}
.stat {
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.stat-label {
  font-size: 10px; color: var(--fg-3);
  letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500;
}
.stat-value { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.stat-score {
  display: inline-flex; align-items: center; gap: 4px;
  color: #a56c00; font-family: var(--font-mono);
}
[data-theme="dark"] .stat-score { color: #f5c05a; }
.drawer-section-hdr {
  display: flex; align-items: center; gap: 8px;
}
.drawer-section-title {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-2);
}
.drawer-section-meta { font-size: 11px; color: var(--fg-3); font-family: var(--font-mono); }
.transcript-body {
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: 360px; overflow-y: auto;
}
.transcript-line {
  display: grid; grid-template-columns: 52px 1fr;
  gap: 12px; align-items: baseline;
  font-size: 13px; line-height: 1.5;
}
.transcript-t {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--primary-600); font-weight: 600;
}
[data-theme="dark"] .transcript-t { color: var(--primary-300); }
.transcript-body-text { color: var(--fg-1); }
.creative-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.creative-body-min { flex-direction: row; align-items: center; justify-content: space-between; padding: 8px 10px; }
.creative-brand { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.creative-copy { font-size: 12px; color: var(--fg-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.creative-direction {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%;
  padding: 2px 7px; border-radius: 999px;
  background: var(--primary-50, #e7f5f3); color: var(--primary-500, #0fb5a8);
  border: 1px solid var(--primary-500, #0fb5a8);
  font-size: 11px; font-weight: 500;
  margin-top: 2px;
}
.creative-arrived-at {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 999px;
  background: var(--bg-sunken); color: var(--fg-3);
  border: 1px solid var(--border-subtle);
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
.creative-arrived-at svg { opacity: 0.75; }
[data-theme="dark"] .creative-arrived-at { background: rgba(255, 255, 255, 0.04); }
.creative-direction span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 220px;
}
.creative-search-return {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-sunken);
  color: var(--fg-2);
  border: 1px solid var(--border-subtle);
  font-size: 11px;
  font-weight: 500;
}
.creative-search-return span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
/* Static-ads platform pill (filled): which platform the ad runs on (Facebook / Instagram),
   derived from the post URL. Shown under the brand chip on static-ads image cards only. */
.creative-publisher {
  display: inline-flex; align-items: center; gap: 4px;
  width: fit-content; max-width: 100%;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; color: #fff;
  margin-top: 2px;
}
.creative-publisher-facebook { background: #1877f2; }
.creative-publisher-instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.search-run-summary {
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.search-run-summary.current {
  border-color: var(--primary-500);
  margin: 10px 0;
  background: var(--primary-50, #e7f5f3);
}
.search-run-summary.previous {
  background: var(--bg-sunken);
}
.search-run-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.search-run-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-1);
  font-size: 12px;
  font-weight: 700;
}
.search-run-count {
  color: var(--fg-2);
  font-size: 12px;
  font-family: var(--font-mono);
}
.search-run-muted,
.search-run-labels {
  color: var(--fg-3);
  font-size: 11px;
}
.search-run-labels {
  max-width: min(520px, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-run-progress {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.search-run-progress-bar {
  flex-basis: 100%;
}
.search-run-shared-pool {
  flex-basis: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--primary-50, #eef4ff);
  color: var(--primary-700, #1d4ed8);
  font-size: 12px;
  font-weight: 600;
}
.search-run-progress-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.search-run-progress-status {
  color: var(--fg-1);
  font-size: 12px;
  font-weight: 600;
}
.search-run-progress-bar .ar-progress-bar {
  margin-top: 0;
}
.search-run-empty {
  margin: 0 14px 16px;
  padding: 12px 14px;
  border: 1px dashed var(--border-default);
  border-radius: 8px;
  color: var(--fg-3);
  background: var(--bg-surface);
  font-size: 13px;
}
.creative-meta {
  display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap;
  font-size: 11px; color: var(--fg-3); font-family: var(--font-mono);
  margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--border-subtle);
}
.creative-score {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px; border-radius: 4px;
  background: #fef6e7; color: #a56c00;
  font-weight: 600; font-family: var(--font-mono);
}
[data-theme="dark"] .creative-score { background: #3a2a0a; color: #f5c05a; }
.creative-metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #ffede2;
  color: #9a3412;
  font-weight: 600;
  font-family: var(--font-mono);
}
.creative-metric-label {
  font-family: inherit;
  font-size: 9px;
  text-transform: uppercase;
  opacity: 0.72;
}
[data-theme="dark"] .creative-metric-chip { background: rgba(234,88,12,0.18); color: #fdba74; }
.creative-metric-chip.bs { background: #e0f2fe; color: #0369a1; }
[data-theme="dark"] .creative-metric-chip.bs { background: rgba(2,132,199,0.2); color: #7dd3fc; }

/* ===================== SELECTION BAR ===================== */
.selbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 24px;
  display: flex; align-items: center; gap: 12px;
  background: var(--neutral-900); color: #fff;
  border-radius: 12px;
  padding: 10px 12px 10px 18px;
  box-shadow: var(--shadow-xl);
  z-index: 100;
  min-width: 520px;
  max-width: calc(100vw - 32px);
  overflow-x: auto;
  animation: selbar-in 180ms var(--ease-standard);
}
@keyframes selbar-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.selbar-count { font-size: 13px; font-weight: 500; }
.selbar-n { font-family: var(--font-mono); color: var(--primary-300); font-weight: 700; font-size: 14px; }
.selbar-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px;
  background: transparent; border: 1px solid rgba(255,255,255,0.12);
  color: #eef0f3; padding: 0 12px; border-radius: 8px;
  font: inherit; font-size: 12.5px; font-weight: 500;
  white-space: nowrap; flex-shrink: 0;
  cursor: pointer;
}
.selbar-ghost:hover { background: rgba(255,255,255,0.08); }
.selbar-spacer { flex: 1; }
.selbar-primary {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  background: var(--primary-500); color: #fff;
  border: 0; border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
.selbar-primary:hover { background: var(--primary-400); }
.selbar-kbd {
  font-family: var(--font-mono); font-size: 10px;
  padding: 1px 6px; background: rgba(0,0,0,0.25); border-radius: 3px;
  color: rgba(255,255,255,0.8); margin-left: 2px;
}

/* ===================== TRANSCRIPT ===================== */
.transcript {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 120ms var(--ease-standard);
}
.transcript:hover { border-color: var(--border-strong); }
.transcript.sel { border-color: var(--primary-500); box-shadow: var(--shadow-focus); }
.transcript.current-run {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 1px rgba(15, 181, 168, 0.24), var(--shadow-md);
}
.t-hdr { display: flex; align-items: center; gap: 10px; }
.t-cbx {
  width: 16px; height: 16px;
  border: 1.5px solid var(--border-strong); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: all 120ms var(--ease-standard);
}
.t-cbx.on { background: var(--primary-500); border-color: var(--primary-500); color: #fff; }
.t-brand { font-size: 13px; font-weight: 600; }
.t-meta { font-size: 11px; color: var(--fg-3); font-family: var(--font-mono); margin-left: auto; }
.t-script {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  color: var(--fg-2);
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 460px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.t-line { display: flex; gap: 8px; align-items: baseline; }
.t-line span:last-child { min-width: 0; overflow-wrap: anywhere; }
.t-tag { color: var(--primary-600); font-weight: 700; font-size: 10px; letter-spacing: 0.04em; min-width: 70px; }
.t-hdr-spacer { flex: 1; }
.t-edit-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--border-default); background: transparent;
  color: var(--fg-2); font: inherit; font-size: 12px; cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.t-edit-btn:hover:not(:disabled) { color: var(--fg-1); border-color: var(--primary-500); }
.t-edit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.t-edit-btn.primary {
  background: var(--primary-500); color: #fff; border-color: var(--primary-500);
}
.t-edit-btn.primary:hover:not(:disabled) { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }
.t-edit-btn.ghost { color: var(--fg-3); }
.t-edit-btn.danger:hover:not(:disabled) { color: #b42318; border-color: #fecaca; background: #fff1f2; }
[data-theme="dark"] .t-edit-btn.danger:hover:not(:disabled) { color: #ffb4aa; border-color: rgba(255,180,170,0.28); background: rgba(180,35,24,0.16); }
.t-edit-area {
  width: 100%; min-height: 220px; resize: vertical;
  padding: 12px; margin-top: 4px;
  font-family: inherit; font-size: 13px; line-height: 1.5;
  color: var(--fg-1); background: var(--bg-sunken);
  border: 1px solid var(--border-default); border-radius: 8px; outline: none;
}
.t-edit-area:focus { border-color: var(--primary-500); box-shadow: var(--shadow-focus); }
.manual-entry-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-surface);
  overflow: hidden;
  box-shadow: var(--shadow-md, 0 1px 2px rgba(0, 0, 0, 0.04));
}
.manual-entry-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-sunken) 70%, var(--bg-surface));
}
.manual-entry-head-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.manual-entry-head strong { color: var(--fg-1); font-size: 14px; font-weight: 600; }
.manual-entry-head span { color: var(--fg-3); font-size: 13px; line-height: 1.45; max-width: 52rem; }
.manual-entry-badge {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--fg-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.manual-entry-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}
.manual-entry-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.manual-entry-field-grow { flex: 1; }
.manual-entry-field-label {
  color: var(--fg-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.manual-entry-field input,
.manual-entry-textarea {
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-sunken);
  color: var(--fg-1);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.manual-entry-field input {
  height: 42px;
  padding: 0 12px;
}
.manual-entry-textarea {
  min-height: 148px;
  padding: 12px 14px;
  resize: vertical;
}
.manual-entry-field input:focus,
.manual-entry-textarea:focus {
  border-color: var(--primary-500);
  box-shadow: var(--shadow-focus);
}
.manual-entry-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-sunken) 70%, var(--bg-surface));
}
.manual-entry-actions-note {
  color: var(--fg-3);
  font-size: 12px;
  line-height: 1.4;
}
/* Legacy selectors — kept for any older markup still using the grid classes */
.manual-entry-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.manual-entry-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--fg-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.manual-entry-label input {
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-sunken);
  color: var(--fg-1);
  font: inherit;
  font-size: 14px;
  outline: none;
  text-transform: none;
}
.manual-entry-label input:focus { border-color: var(--primary-500); box-shadow: var(--shadow-focus); }
.manual-entry-text { text-transform: none; }
.ar-script-readonly {
  margin: 0;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.65;
  color: var(--fg-1);
  background: var(--bg-sunken);
  border: 0;
  border-top: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: 0;
  overflow: auto;
  max-height: 420px;
}
.ar-script-line {
  margin: 0 0 12px;
  white-space: pre-wrap;
}
.ar-script-line:last-child { margin-bottom: 0; }

.ar-result-hdr {
  min-height: 30px;
  padding: 14px 16px 10px;
  flex-wrap: wrap;
  row-gap: 8px;
  gap: 8px;
}
.transcript.ar-result-card,
.transcript.compliance-card {
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.rd-source-strip {
  margin: 0 16px;
  padding: 0;
}
.rd-remodel-variants {
  padding: 12px 16px 14px;
  display: grid;
  gap: 10px;
}
.rd-variant-card + .rd-variant-card { margin-top: 0; }
.ar-result-card.current-run {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 1px rgba(15, 181, 168, 0.24), var(--shadow-md);
}
.ar-script-toggle {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-sunken);
  color: var(--fg-2);
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.12s, color 0.12s;
  flex-shrink: 0;
}
.ar-script-toggle:hover {
  color: var(--fg-1);
  border-color: var(--primary-500);
}
.ar-script-toggle svg { transition: transform 0.14s ease; }
.ar-script-toggle.open svg { transform: rotate(180deg); }
.ar-result-status {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--bg-sunken);
  color: var(--fg-3);
  border: 1px solid var(--border-subtle);
}
.ar-result-status.ready {
  background: var(--primary-50);
  color: var(--primary-700);
  border-color: var(--primary-500);
}
.ar-result-status.error {
  background: #fff1f1;
  color: #b42318;
  border-color: #f3b3ad;
}
[data-theme="dark"] .ar-result-status.error {
  background: rgba(180,35,24,0.16);
  color: #ffb4aa;
  border-color: rgba(255,180,170,0.28);
}
.ar-result-meta {
  padding: 8px 14px 0;
  color: var(--fg-3);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ar-result-meta .creative-direction {
  margin-top: 0;
}

/* Remodel/Rewrite-script card — redesign pass: distinct panels instead of
   flat inline-note boxes, clearer section titles, teal accents matching the
   rest of the redesigned nav/step-rail chrome. */
   .inline-note{
      margin-bottom: 15px;
   }
.rd-remodel-hdr {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--rd-line-2, var(--border-subtle));
  margin-bottom: 0;
}
.rd-remodel-brand {
  font-family: var(--rd-font-sans, inherit);
  font-size: 15px;
  font-weight: 700;
  color: var(--rd-ink-1, var(--fg-1));
}
.rd-remodel-id {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--rd-ink-4, var(--fg-4));
}
.rd-panel {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px;
  background: var(--rd-panel, var(--bg-surface));
  border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: var(--rd-radius-card, 10px);
}
.rd-panel-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rd-panel-title {
  font-family: var(--rd-font-sans, inherit);
  font-size: 13px;
  font-weight: 700;
  color: var(--rd-ink-1, var(--fg-1));
}
.rd-panel-sub {
  font-size: 12px;
  color: var(--rd-ink-4, var(--fg-3));
}
.rd-variant-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--rd-teal-tint, var(--bg-sunken));
  border-bottom: 1px solid var(--rd-teal-border, var(--border-subtle));
  padding: 10px 12px;
  flex-wrap: wrap;
  row-gap: 6px;
}
.rd-variant-hdr strong {
  color: var(--rd-ink-1, var(--fg-1));
  font-family: var(--rd-font-sans, inherit);
}
.rd-variant-hdr .t-edit-btn { height: 28px; }

/* Remodel card — one visual language for every secondary/collapsed section
   (batch instructions, per-ad advanced settings, original transcript,
   visual breakdown) instead of four slightly-different bordered boxes
   stacked on top of each other. Closed state reads as a plain muted row;
   opening it reveals the content under a thin divider. */
.rd-collapsible {
  margin: 0 16px 10px;
}
.rd-collapsible > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--rd-ink-3, var(--fg-3));
  padding: 7px 8px;
  border-radius: var(--rd-radius-ctrl, 6px);
  transition: background 0.12s var(--ease-standard), color 0.12s var(--ease-standard);
}
.rd-collapsible > summary::-webkit-details-marker { display: none; }
.rd-collapsible > summary::before {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.14s ease;
  flex-shrink: 0;
  opacity: 0.7;
}
.rd-collapsible[open] > summary::before { transform: rotate(45deg); }
.rd-collapsible > summary:hover { background: var(--rd-panel, var(--bg-sunken)); color: var(--rd-ink-1, var(--fg-1)); }
.rd-collapsible-body {
  padding: 5px 0 12px;
  border-top: 1px solid var(--rd-line-2, var(--border-subtle));
  margin-top: 2px;
}

.ar-result-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Single card frame for a remodeled-script variant — replaces the ad-hoc
   inline-styled <section> so every variant on the page shares one radius,
   border and background language. */
.rd-variant-card {
  border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: var(--rd-radius-card, 10px);
  overflow: hidden;
  background: var(--bg-surface);
}
.rd-variant-card + .rd-variant-card { margin-top: 10px; }

.rd-remodel-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rd-remodel-page-hdr { margin-bottom: 0; }
.rd-remodel-manual-title {
  margin: 0;
  font-size: 18px;
}
.rd-remodel-tools { margin: 0; }
.rd-remodel-tools-body {
  display: grid;
  gap: 12px;
}
.rd-remodel-status { margin: 0; }
.rd-remodel-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rd-remodel-load-more { align-self: center; }
.rd-remodel-meta-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 16px 12px;
}
.rd-remodel-meta-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  color: var(--fg-3);
  font-size: 11px;
  font-weight: 600;
}
.rd-source-collapsible {
  margin: 0 16px 4px;
}
.rd-source-collapsible-body {
  padding: 4px 0 0;
  border-top: none;
  margin-top: 0;
}
.rd-source-collapsible-body .ar-source-preview {
  margin: 0;
  padding: 0;
}
.rd-remodel-variants-label {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.rd-variant-head {
  display: flex;
  flex-direction: column;
  background: var(--rd-teal-tint, var(--bg-sunken));
  border-bottom: 1px solid var(--rd-teal-border, var(--border-subtle));
}
.rd-variant-head-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px 8px;
}
.rd-variant-title-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rd-variant-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rd-variant-title-row strong {
  font-size: 13px;
  color: var(--rd-ink-1, var(--fg-1));
}
.rd-variant-status {
  font-size: 11px;
  font-weight: 600;
}
.rd-variant-status.pending { color: var(--fg-3); }
.rd-variant-status.error { color: var(--danger); }
.rd-variant-status.muted { color: var(--fg-3); }
.rd-variant-preview {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rd-variant-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 14px 12px;
}
.rd-variant-actions .t-hdr-spacer { flex: 1; min-width: 8px; }
.rd-variant-actions .t-edit-btn { height: 28px; }
.rd-variant-card .ar-script-readonly,
.rd-variant-card .t-edit-area {
  padding: 14px 16px;
}
.rd-variant-card .t-edit-area {
  border: 0;
  border-radius: 0;
  min-height: 180px;
}

.compliance-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.compliance-select {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--fg-1);
  font: inherit;
  font-size: 12px;
}
.compliance-running-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.compliance-card {
  cursor: default;
}
.compliance-card .t-meta {
  margin-left: 0;
}

/* Compliance page layout */
.rd-compliance-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rd-compliance-page-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 0;
  padding: 16px 20px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-md, 0 1px 2px rgba(0, 0, 0, 0.04));
}
.rd-compliance-page-hdr-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 280px;
}
.rd-compliance-page-hdr-main .content-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.rd-compliance-page-stats {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-3);
  max-width: 42rem;
}
.rd-compliance-page-hdr-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.rd-compliance-manual-title {
  margin: 0;
  font-size: 18px;
}
.rd-compliance-manual-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.rd-compliance-hint {
  margin: 0;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-3);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-sunken) 65%, var(--bg-surface));
}
.rd-compliance-tools { margin: 0; }
.rd-compliance-tools-body { display: grid; gap: 12px; }
.rd-compliance-status { margin: 0; }
.rd-compliance-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rd-compliance-load-more { align-self: center; }

/* Compliance job card */
.rd-compliance-hdr { padding-bottom: 10px; }
.rd-compliance-verdict-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.rd-compliance-variant-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.rd-compliance-meta-chips {
  padding-top: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.rd-remodel-meta-chip.pending {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.compliance-variant-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 600;
}
.compliance-variant-select-wrap .compliance-select {
  flex: 1;
  min-width: 180px;
  max-width: 360px;
}
.compliance-score-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #e6f6ec;
  color: #137333;
  font-size: 11px;
  font-weight: 700;
}
.compliance-score-badge.bad {
  background: #fde8e8;
  color: #b3261e;
}
.compliance-verdict-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.compliance-verdict-badge.pass {
  background: #e6f6ec;
  color: #137333;
}
.compliance-verdict-badge.fail,
.compliance-verdict-badge.error {
  background: #fde8e8;
  color: #b3261e;
}
.compliance-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(340px, 1.15fr);
  gap: 20px;
  align-items: start;
  padding: 16px;
}
.compliance-script-stack {
  display: grid;
  gap: 14px;
}
.compliance-left-stack {
  display: grid;
  gap: 10px;
}
.compliance-left-stack .rd-collapsible { margin: 0; }
.compliance-left-stack .rd-source-collapsible-body .ar-source-preview {
  margin: 0;
  padding: 0;
}
.rd-compliance-tech-body {
  display: grid;
  gap: 10px;
}
.rd-compliance-tech-panel .rd-panel-sub {
  margin-top: -4px;
}
.rd-compliance-pre {
  margin: 0;
  max-height: 280px;
  overflow: auto;
  white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--fg-2);
}
.rd-compliance-reason-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
.rd-compliance-reason-list li {
  color: var(--fg-2);
  font-size: 13px;
  line-height: 1.5;
}
.rd-compliance-workspace .rd-collapsible { margin: 0; }
.rd-compliance-job-details-body {
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-3);
}
.rd-compliance-panel {
  border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: var(--rd-radius-card, 10px);
  overflow: hidden;
  background: var(--bg-surface);
}
.rd-compliance-panel.compliance-chat {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
}
.rd-compliance-panel-hint {
  margin: -4px 0 0;
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.45;
}
.rd-compliance-final {
  display: grid;
  gap: 0;
}
.rd-compliance-final .rd-variant-head {
  border-bottom: none;
}
.rd-compliance-final-body,
.rd-compliance-final-edit,
.rd-compliance-final-error,
.rd-compliance-final-empty {
  padding: 0 16px 16px;
  margin: 0;
}
.rd-compliance-final-edit {
  min-height: 180px;
  width: calc(100% - 32px);
  margin: 0 16px 16px;
  border-radius: 8px;
}
.rd-compliance-final-body {
  max-height: 420px;
  overflow: auto;
}
.rd-compliance-final-error,
.rd-compliance-final-empty {
  font-size: 13px;
  color: var(--fg-3);
}
.rd-compliance-final-error { color: var(--danger); }

.compliance-full-output {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-sunken);
  padding: 10px 12px;
}
.compliance-full-output-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  cursor: pointer;
}
.compliance-full-output-head span {
  color: var(--fg-3);
  font-size: 12px;
}
.compliance-full-output pre {
  margin: 0;
  max-height: 720px;
  overflow: auto;
  white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--fg-2);
}
.compliance-details {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-sunken);
  padding: 8px 10px;
}
.compliance-details summary {
  cursor: pointer;
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 600;
}
.compliance-details pre {
  margin: 8px 0 0;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-2);
}
.compliance-decision {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-sunken);
}
.compliance-decision ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}
.compliance-decision li {
  color: var(--fg-2);
  font-size: 12px;
  line-height: 1.45;
}
.compliance-chat {
  display: grid;
  gap: 10px;
}
.compliance-chat-head,
.compliance-chat-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.compliance-chat-head {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-1);
}
.compliance-chat-input {
  min-height: 72px;
  resize: vertical;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--fg-1);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
}
.compliance-chat-input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.compliance-chat-actions span {
  color: var(--fg-3);
  font-size: 11px;
}
.compliance-chat-thread {
  display: grid;
  gap: 7px;
  max-height: 180px;
  overflow: auto;
}
.compliance-chat-turn {
  display: grid;
  gap: 4px;
  padding-top: 7px;
  border-top: 1px solid var(--border-subtle);
}
.compliance-chat-user,
.compliance-chat-assistant {
  font-size: 11px;
  line-height: 1.4;
}
.compliance-chat-user {
  color: var(--fg-1);
  font-weight: 600;
}
.compliance-chat-assistant {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--fg-3);
}
.compliance-chat-assistant span {
  color: var(--primary-700);
  font-weight: 700;
}
.compliance-final {
  display: grid;
  gap: 8px;
}
.compliance-final-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ar-source-preview {
  display: grid;
  grid-template-columns: minmax(132px, 180px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  margin: 10px 0 2px;
  padding: 0 14px;
}
.ar-source-media {
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover !important;
  background-position: center !important;
}
.ar-source-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.ar-source-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.ar-source-video-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  background: #111827;
  z-index: 1;
}
.ar-source-manual-label {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, rgba(17,24,39,0.1), rgba(17,24,39,0.45));
  text-shadow: 0 1px 2px rgba(0,0,0,0.28);
}
.ar-source-manual-label strong {
  font-size: 14px;
  line-height: 1.2;
}
.ar-source-manual-label span {
  font-size: 11px;
  opacity: 0.85;
}
.ar-source-media > .creative-plat,
.ar-source-media > .creative-play,
.ar-source-media > .creative-duration,
.ar-source-media > .ar-source-score {
  z-index: 2;
}
.ar-source-play { border: 0; cursor: pointer; }
.ar-source-play:disabled { opacity: 0.65; cursor: default; }
.ar-source-score {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,0.68);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.ar-source-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  padding: 4px 0;
}
.ar-source-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ar-source-title { font-size: 12px; font-weight: 700; color: var(--fg-1); }
.ar-source-pill {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--primary-50);
  color: var(--primary-700);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
[data-theme="dark"] .ar-source-pill { background: rgba(47,179,156,0.16); color: var(--primary-300); }
.ar-source-pill.muted { background: var(--bg-sunken); color: var(--fg-3); }
.ar-source-copy {
  margin: 0;
  color: var(--fg-2);
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ar-source-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--fg-3);
  font-size: 11px;
}
.ar-source-meta span { display: inline-flex; align-items: center; gap: 3px; }

@media (max-width: 760px) {
  .content { padding: 16px 14px 100px; }
  .manual-entry-actions { align-items: stretch; flex-direction: column; }
  .manual-entry-actions .btn-primary { width: 100%; justify-content: center; }
  .ar-source-preview { grid-template-columns: 1fr; }
  .compliance-grid { grid-template-columns: 1fr; }
  .ar-source-media { max-width: 220px; }
}

/* ===================== EMPTY ===================== */
.empty {
  border: 1px dashed var(--border-default);
  border-radius: 14px; padding: 56px 24px;
  text-align: center;
  background: var(--bg-surface);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  max-width: 560px; margin: 0 auto;
}
.empty-display {
  font-family: var(--font-display); font-size: 28px; font-style: italic;
  color: var(--fg-1); letter-spacing: -0.01em;
  white-space: nowrap;
  margin-bottom: 2px;
}
.empty-body { font-size: 13px; color: var(--fg-3); max-width: 420px; margin: 0; line-height: 1.5; }
.section-loading {
  margin: 14px auto;
  max-width: 640px;
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px 30px;
  border: 1px dashed var(--border-default);
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 25%, color-mix(in srgb, var(--primary-500) 10%, transparent), transparent 34%),
    var(--bg-surface);
  text-align: left;
}
.section-loading-spinner {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 7px solid color-mix(in srgb, var(--primary-500) 18%, transparent);
  border-top-color: var(--primary-500);
  border-right-color: var(--primary-300);
  animation: ar-spin 0.9s linear infinite;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary-500) 6%, transparent);
}
.section-loading-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.section-loading-title {
  color: var(--fg-1);
  font-family: var(--font-display);
  font-size: 26px;
  font-style: italic;
  letter-spacing: -0.02em;
}
.section-loading-body {
  color: var(--fg-3);
  font-size: 13px;
  line-height: 1.5;
  max-width: 420px;
}

/* ===================== TOAST ===================== */
.toast {
  position: fixed; top: 72px; right: 24px; z-index: 2000;
  background: var(--neutral-900); color: #fff;
  border-radius: 10px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; box-shadow: var(--shadow-lg);
  animation: toast-in 180ms var(--ease-standard);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.toast-badge {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--primary-500); color: #fff;
  padding: 2px 8px; border-radius: 4px; font-weight: 600;
}

/* ===================== TWEAKS PANEL ===================== */
.tweaks {
  position: fixed; right: 20px; bottom: 20px;
  width: 260px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  box-shadow: var(--shadow-xl);
  z-index: 200;
  overflow: hidden;
}
.tweaks-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-2);
}
.tweaks-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.tweak-row { display: flex; flex-direction: column; gap: 6px; }
.tweak-label { font-size: 11px; color: var(--fg-3); font-weight: 500; }
.seg {
  display: flex; background: var(--bg-sunken);
  border: 1px solid var(--border-subtle); border-radius: 8px;
  padding: 3px; gap: 2px;
}
.seg button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: transparent; border: 0;
  padding: 5px 8px;
  font: inherit; font-size: 11px; color: var(--fg-2);
  border-radius: 6px; cursor: pointer; text-transform: capitalize;
}
.seg button:hover { color: var(--fg-1); }
.seg button.on {
  background: var(--bg-surface); color: var(--fg-1);
  box-shadow: var(--shadow-md);
  font-weight: 500;
}
.seg .swatch { width: 10px; height: 10px; border-radius: 999px; }

.tweaks-fab {
  position: fixed; right: 20px; bottom: 20px;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--neutral-900); color: #fff;
  border: 0; cursor: pointer;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
}

/* ===================== KBD ===================== */
kbd {
  font-family: var(--font-mono); font-size: 10px;
  padding: 1px 6px; background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: 4px; color: var(--fg-3);
}

/* ===================== RESEARCH HEADER / SEARCH CARD ===================== */
.search-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  padding: 16px;
  margin-bottom: 20px;
  border-radius: var( --text-2xs);
  box-shadow: var(--shadow-md);
}
.sc-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 15px;
    background: var(--rd-surface);
    border: 1px solid var(--border-default);
    font-family: var(--rd-font-sans);
    border-radius: var(--text-2xs);
}
.sc-title { font-size: 14px; font-weight: 600; }
.sc-sub { font-size: 12px; color: var(--fg-3); }
.sc-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.sc-pass-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--fg-2);
  user-select: none; cursor: pointer;
  padding: 4px 10px; border: 1px solid var(--border-default);
  border-radius: 999px; background: var(--bg-1);
}
.sc-pass-toggle input { margin: 0; cursor: pointer; }
.sc-pass-toggle:hover { background: var(--bg-hover); color: var(--fg-1); }
.sc-filter-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 0 14px 10px; padding: 8px 12px;
  background: var(--bg-hover);
  border: 1px solid var(--border-default);
  border-radius: 8px; font-size: 12px; color: var(--fg-2);
}
.link-btn {
  background: none; border: 0; padding: 0;
  color: var(--accent, #129683); cursor: pointer;
  font-size: 12px; text-decoration: underline;
}
.link-btn:hover { color: var(--accent-strong, #0f7a6a); }

/* ===================== ADMIN CATALOG ===================== */
.admin-grid-view { display: flex; flex-direction: column; gap: 14px; }
.admin-crawler-live.ar-progress {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
/* Segmented-control look (one rounded track, the active segment raised as
   a white pill with a shadow) — same visual language as .seg elsewhere in
   this dashboard, rather than three separate outlined pill buttons with
   gaps between them. fit-content + margin:auto centers the whole track as
   one block inside .admin-grid-view's flex column, instead of the old
   approach of centering three loose items across the full row width. */
.admin-pool-type-tabs {
  display: inline-flex;
  width: fit-content;
  gap: 2px;
  padding: 3px;
  margin: 0 auto 12px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
}
.admin-pool-type-tab {
  border: 0;
  background: transparent;
  color: var(--fg-3);
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms var(--ease-standard, ease), color 120ms var(--ease-standard, ease), box-shadow 120ms var(--ease-standard, ease);
}
.admin-pool-type-tab:hover { color: var(--fg-1); }
/* Was var(--accent, #2563eb) — --accent only exists inside .vlds, so this
   silently fell back to a hardcoded generic blue with zero connection to
   the app's actual [data-accent] switcher, unlike every other "active"
   state in the dashboard. */
.admin-pool-type-tab.active {
  color: var(--primary-700);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
/* Image / Video Editor get their own fixed hues (rather than all three
   tabs sharing the single switchable accent) so the three read as visually
   distinct at a glance — same "colorful, not just one color" treatment as
   the KPI strip below. Research Leg (tab 1) keeps following the accent
   switcher like everywhere else, since it's this app's primary pool. */
.admin-pool-type-tab:nth-child(2).active { color: #7c3aed; }
.admin-pool-type-tab:nth-child(3).active { color: #2563eb; }
.admin-crawler-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 0 4px;
}
.admin-crawler-platforms {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-crawler-platforms-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
}
.admin-crawler-settings-note {
  flex: 1 1 100%;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}
.admin-crawler-state-note {
  flex: 1 1 100%;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  border: 1px solid var(--border-default, #e5e7eb);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--bg-surface, #fff);
}
.admin-crawler-state-note.paused {
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.12);
}
.admin-crawler-scheduler {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding-top: 8px;
  border-top: 1px solid var(--border-default, #e5e7eb);
}
/* This screen mixed 32px buttons, 34px platform toggles, 40px ar-target
   inputs, and a couple of fully-unstyled native inputs/selects in the same
   rows — every control on it is unified to one 36px height here so rows
   read as one control group instead of a staircase. Scoped to
   .admin-crawler-view (the root <section>) so it can't drift other pages
   that reuse .ar-target/.btn-secondary/.admin-platform-toggle. */
.admin-crawler-view .btn-primary,
.admin-crawler-view .btn-secondary,
.admin-crawler-view .ar-target input,
.admin-crawler-view .ar-target select,
.admin-crawler-view .admin-crawler-force-refetch,
.admin-crawler-view .admin-crawler-scheduler > .admin-platform-toggle {
  height: 36px; min-height: 36px; max-height: 36px; box-sizing: border-box;
}
/* .ar-target's own "align-items: center" (its 2-row label/input grid) plus
   .admin-crawler-settings' "align-items: flex-end" (the row) both need
   every .ar-target block bottom-anchored, or its 36px input can still ride
   a few px higher/lower than the plain 36px buttons beside it depending on
   how much space the label line above it claims. */
.admin-crawler-view .ar-target { align-self: flex-end; }
/* New-version-name / notes / inline-rename inputs had no styling at all —
   pure browser-default appearance next to their btn-primary/btn-secondary
   neighbors. */
.admin-pool-version-create input,
.inline-edit-row input {
  width: 100%; height: 36px; padding: 0 10px;
  border: 1px solid var(--border-default); border-radius: 6px;
  background: var(--bg-sunken); color: var(--fg-1);
  font: inherit; font-size: 13px; outline: none;
}
.admin-pool-version-create input:focus,
.inline-edit-row input:focus {
  border-color: var(--primary-500); box-shadow: var(--shadow-focus); background: var(--bg-surface);
}
.admin-pool-ads-filter select {
  min-width: 140px; height: 36px; padding: 0 8px;
  border: 1px solid var(--border-default); border-radius: 6px;
  background: var(--bg-surface); color: var(--fg-1);
  font: inherit; font-size: 13px; outline: none;
}
.admin-pool-ads-filter select:focus { border-color: var(--primary-500); box-shadow: var(--shadow-focus); }
.admin-pool-ads-filter input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--primary-500); }

/* Crawl progress and the persisted winners table both used to render
   permanently inline; each is now a compact trigger card that opens the
   full view in a modal (rd-modal-scrim/.rd-modal, same pattern as every
   other modal in this dashboard) instead of always taking up page space. */
.admin-crawler-progress-trigger,
.admin-crawler-winners-trigger {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-surface);
  color: var(--fg-1);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color 120ms var(--ease-standard, ease), box-shadow 120ms var(--ease-standard, ease);
}
.admin-crawler-progress-trigger:hover,
.admin-crawler-winners-trigger:hover {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px var(--primary-100);
}
.admin-crawler-progress-trigger-body,
.admin-crawler-winners-trigger .admin-crawler-progress-trigger-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.admin-crawler-progress-trigger-body strong { font-size: 13.5px; }
.admin-crawler-progress-trigger-body span { font-size: 12px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-crawler-progress-dot {
  flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--fg-4);
}
.admin-crawler-progress-dot.live {
  background: var(--primary-500);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-500) 60%, transparent);
  animation: admin-crawler-live-pulse 1.6s ease-in-out infinite;
}
@keyframes admin-crawler-live-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-500) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--primary-500) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-500) 0%, transparent); }
}
.admin-crawler-winners-trigger-icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--primary-50); color: var(--primary-600);
}
/* .rd-modal-lg (unlike .rd-modal-md) never sets display:flex/overflow:hidden
   on itself — without that, .admin-crawler-modal-body's flex:1/min-height:0
   below does nothing (flex properties are no-ops on a non-flex parent), so
   the fixed-height modal just clipped the table instead of scrolling it. */
.admin-crawler-progress-modal,
.admin-crawler-winners-modal,
.cost-config-modal {
  display: flex; flex-direction: column; overflow: hidden;
}
.admin-crawler-winners-modal,
.cost-config-modal { width: min(1320px, 96vw); }
.admin-crawler-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; }
/* The per-platform header cells get that platform's brand color (see
   Direction Manager / Winning Ads Criteria for the same pattern) instead of
   every column reading identically regardless of which platform it is. */
.admin-crawler-winners-table th { border-bottom-width: 2px; }
.pool-direction-below-floor td:first-child {
  background: rgba(245, 158, 11, 0.08);
}
.pool-floor-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #b45309;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 999px;
  padding: 1px 7px;
  vertical-align: middle;
}
.admin-pool-version-create {
  align-items: end;
  display: grid;
  gap: 10px 12px;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--primary-100, var(--border-default));
  border-radius: 10px;
  background: var(--primary-50);
}
.admin-pool-version-create label {
  display: grid;
  gap: 4px;
}
.admin-pool-version-create label span {
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 600;
}
.admin-pool-ads-filter {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  font-size: 13px;
}
.admin-pool-ads-filter select {
  min-width: 140px;
}
.pool-version-active td {
  background: color-mix(in srgb, var(--primary-500) 8%, transparent);
}
/* No base rule existed at all — both usages (the version ID cell and its
   "rename" action) rendered as plain unstyled <button>s, native browser
   chrome and all, instead of reading as an inline text action. */
.linkish {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0; border: 0; background: transparent;
  color: var(--fg-brand, var(--primary-600));
  font: inherit; font-size: inherit; font-weight: 600;
  cursor: pointer;
}
.linkish:hover { text-decoration: underline; color: var(--primary-700); }
.linkish.admin-inline-action {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-3);
}
.linkish.admin-inline-action:hover { color: var(--fg-brand); }
.inline-edit-row {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}
.admin-import-input { display: none; }
.admin-import-status {
  padding: 9px 11px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--fg-2);
  font-size: 12px;
}
.admin-grid {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(420px, 1fr) minmax(220px, 280px);
  gap: 14px;
  align-items: start;
}
.admin-grid.directions { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); }
.admin-grid.workspaces { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
.admin-list,
.admin-editor,
.admin-pool-panel,
.admin-workspace-detail {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
}
.admin-list { display: flex; flex-direction: column; gap: 5px; padding: 8px; max-height: calc(100vh - 190px); overflow-y: auto; }
.admin-list-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  width: 100%; padding: 10px 12px;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--fg-1);
  font: inherit; text-align: left; cursor: pointer;
}
.admin-list-row:hover { background: var(--bg-hover); }
.admin-list-row.active { border-color: var(--primary-300); background: var(--primary-50); color: var(--fg-brand); }
.admin-list-row.muted { opacity: 0.58; }
.admin-list-row span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; }
.admin-list-row small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-3); font-size: 12px; }
.admin-editor { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.admin-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.admin-form-grid.simple { grid-template-columns: minmax(0, 1fr) minmax(180px, 240px); }
.admin-form-grid label,
.admin-field-full,
.admin-platform-box { display: flex; flex-direction: column; gap: 6px; color: var(--fg-3); font-size: 12px; font-weight: 500; }
.admin-form-grid input,
.admin-form-grid select,
.admin-field-full textarea,
.admin-keyword-add input,
.admin-keyword-add select,
.admin-filter-field input,
.admin-filter-field select,
.admin-platform-box textarea,
.admin-pool-panel textarea {
  width: 100%; border: 1px solid var(--border-default); border-radius: 6px;
  background: var(--bg-sunken); color: var(--fg-1);
  font: inherit; font-size: 13px; outline: none;
  font-weight: 400;
}
.admin-form-grid input,
.admin-form-grid select,
.admin-keyword-add input,
.admin-keyword-add select,
.admin-filter-field input,
.admin-filter-field select { height: 34px; padding: 0 10px; }
.admin-field-full textarea { min-height: 72px; resize: vertical; padding: 10px; font-family: var(--font-mono); }
.admin-form-grid input:focus,
.admin-form-grid select:focus,
.admin-field-full textarea:focus,
.admin-keyword-add input:focus,
.admin-keyword-add select:focus,
.admin-filter-field input:focus,
.admin-filter-field select:focus,
.admin-platform-box textarea:focus,
.admin-pool-panel textarea:focus { border-color: var(--primary-500); box-shadow: var(--shadow-focus); background: var(--bg-surface); }
.admin-section-title { margin: 0; color: var(--fg-2); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
/* A small colored icon chip in front of a field-group label (Pools, Keywords,
   Sources, Filters) — was a bare text string, indistinguishable at a glance
   from the plain-text labels on Name/Method above it, even though it's
   introducing a whole section rather than one input. */
.admin-field-icon-label { display: inline-flex; align-items: center; gap: 7px; color: var(--fg-2); font-size: 12px; font-weight: 700; }
.admin-field-icon-label svg {
  flex-shrink: 0; color: var(--primary-600);
  padding: 4px; box-sizing: content-box;
  border-radius: 6px; background: var(--primary-50);
}
.direction-keywords textarea { min-height: 150px; font-family: inherit; line-height: 1.45; }
.admin-platform-select-row { display: flex; flex-wrap: wrap; gap: 10px; }
/* Sources + Filters share one outer card so it reads as one related
   configuration block instead of two disconnected floating boxes — the
   inner rows just get a flat tinted background, the border lives on the
   outer wrapper only. */
.admin-platform-config-section {
  display: flex; flex-direction: column; gap: 16px;
  padding: 16px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-surface);
}
.admin-platform-config-section > .admin-field-full + .admin-field-full {
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}
.admin-platform-select-row-boxed {
  padding: 12px;
  border-radius: 8px;
  background: var(--bg-app);
}
.admin-platform-toggle {
  display: inline-flex; align-items: flex-start; gap: 8px;
  min-height: 34px; padding: 9px 12px;
  border: 1px solid var(--border-default); border-radius: 8px;
  background: var(--bg-surface); color: var(--fg-2);
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.admin-platform-toggle.active { border-color: var(--primary-300); background: var(--primary-50); color: var(--fg-brand); }
.admin-platform-toggle input { width: 14px; height: 14px; margin-top: 2px; accent-color: var(--primary-500); flex-shrink: 0; }
.admin-platform-toggle-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.admin-platform-toggle-stats {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.admin-platform-toggle.active .admin-platform-toggle-stats { color: var(--fg-2); }
.admin-platform-pool-summary {
  flex: 1 1 100%;
  font-size: 12px;
  color: var(--fg-2);
  font-weight: 600;
}
.pool-direction-totals-row td {
  border-top: 2px solid var(--border-default);
  background: var(--bg-sunken);
}
.pool-platform-subtotal {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-3);
}
.admin-pool-ads-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}
.admin-pool-ads-page-label {
  font-size: 12px;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.admin-pool-ad-link { margin-left: 0; white-space: nowrap; }
.admin-pool-ad-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-pool-ad-reason {
  max-width: 280px;
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.35;
  white-space: normal;
}

/* Pool ads browser — card grid (reuses AdCard + AdDrawer like Static Ads) */
.admin-pool-ads-grid-scroll { min-width: 0; }
.admin-pool-ads-grid-scroll .pp-grid { padding: 4px 0; }
.admin-pool-ads-empty { padding: 24px 8px; color: var(--fg-3); font-size: 13px; }
.admin-keyword-add { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.admin-chip-row { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.admin-chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; padding: 4px 7px;
  border: 1px solid var(--border-subtle); border-radius: 999px;
  background: var(--bg-sunken); color: var(--fg-2);
  font-size: 11px; overflow-wrap: anywhere;
}
.admin-chip button { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--fg-3); cursor: pointer; padding: 0; }
/* Per-platform filter fields moved out of the inline 3-column grid into their
   own detail modal (Direction Manager) — these are the trigger buttons that
   open it. */
.admin-platform-filter-triggers {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 12px;
  border-radius: 8px;
  background: var(--bg-app);
}
.admin-platform-filter-trigger {
  display: inline-flex; align-items: center; gap: 12px;
  flex: 1 1 220px; min-width: 220px; height: 56px; padding: 0 16px;
  border: 1px solid var(--border-subtle); border-radius: 8px;
  background: var(--bg-surface); color: var(--fg-1);
  font: inherit; cursor: pointer;
  transition: border-color 120ms var(--ease-standard), box-shadow 120ms var(--ease-standard), background 120ms var(--ease-standard);
}
.admin-platform-filter-trigger:hover {
  background: var(--bg-hover); border-color: var(--primary-400);
  box-shadow: 0 0 0 3px var(--primary-100);
}
.admin-platform-filter-trigger.disabled { opacity: 0.5; cursor: not-allowed; }
.admin-platform-filter-trigger.disabled:hover { background: var(--bg-surface); border-color: var(--border-default); box-shadow: none; }
.admin-platform-filter-trigger-lead-icon {
  flex-shrink: 0; color: var(--primary-600);
  width: 30px; height: 30px; padding: 6px;
  border-radius: 8px; background: var(--primary-50);
}
.admin-platform-filter-trigger.disabled .admin-platform-filter-trigger-lead-icon { color: var(--fg-4); background: var(--bg-sunken); }
.admin-platform-filter-trigger-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
.admin-platform-filter-trigger-label { font-size: 14px; font-weight: 700; color: var(--fg-1); }
.admin-platform-filter-trigger-meta { font-size: 11.5px; font-weight: 500; color: var(--fg-3); white-space: nowrap; }
.admin-platform-filter-trigger-cta {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto; padding-left: 8px; flex-shrink: 0;
  color: var(--fg-brand); font-size: 12.5px; font-weight: 700;
}
.admin-platform-filter-trigger.disabled .admin-platform-filter-trigger-cta { color: var(--fg-4); }
.admin-platform-filter-trigger-icon { transform: rotate(-90deg); flex-shrink: 0; }

/* The platform filter detail modal itself. */
.rd-modal-platform-filters {
  width: min(880px, 94vw);
  max-height: min(760px, 88vh);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}
.admin-platform-filter-modal-hdr {
  display: flex; align-items: center; gap: 12px;
  margin: 0 44px 16px 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}
.admin-platform-filter-modal-title { flex: 1; text-transform: none; font-size: 15px; letter-spacing: 0; }
.admin-platform-filter-modal-fields { overflow-y: auto; padding-right: 2px; }
.admin-filter-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
.admin-filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.admin-filter-field.wide,
.admin-filter-field.range { grid-column: span 2; }
.admin-filter-field > span { color: var(--fg-3); font-size: 12px; font-weight: 600; }
.admin-filter-field input:disabled,
.admin-filter-field select:disabled { cursor: not-allowed; opacity: 0.7; }
.admin-filter-range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.admin-danger-row { display: flex; justify-content: flex-end; }

/* AutoSearch's live scrape progress, shown as a modal instead of inline in
   the setup card — CrawlProgressView's per-platform stats + the direction
   detail list can run long, so the body scrolls independently of the fixed
   header/actions row. */
.rd-modal-scrape-progress {
  width: min(640px, 92vw);
  max-height: min(640px, 84vh);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rd-modal-scrape-progress .sc-hdr { flex-shrink: 0; margin-right: 36px; }
.rd-modal-scrape-progress-body { min-height: 0; overflow-y: auto; padding-right: 2px; }
.admin-grid.criteria { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); }
.criteria-platform-name { display: inline-flex; align-items: center; gap: 7px; }
.criteria-platform-name i { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; }
.criteria-editor textarea,
.criteria-threshold input {
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-sunken);
  color: var(--fg-1);
  font: inherit;
  font-size: 12px;
  outline: none;
  font-weight: 400;
  padding: 12px;
}
.criteria-editor textarea:focus,
.criteria-threshold input:focus { border-color: var(--primary-500); box-shadow: var(--shadow-focus); background: var(--bg-surface); }
.criteria-top-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
/* One row, one height: the "Criteria Version" label sits beside its select
   (not stacked above it) so the label, select, Refresh, and Save can all
   share the same 34px height and a single vertical center — see
   .criteria-header-actions below, which is the one place that height is
   set, so the select/buttons here can't drift out of sync with each other. */
.criteria-header-actions { display: flex; align-items: center; gap: 10px; }
.criteria-header-actions .btn-secondary,
.criteria-header-actions .btn-primary { height: 34px; }
.criteria-version-select {
  display: flex; align-items: center; gap: 8px;
  color: var(--fg-3); font-size: 11px; font-weight: 700;
}
.criteria-version-select span { width: 46px; flex-shrink: 0; line-height: 1.25; }
.criteria-version-select select {
  min-width: 160px;
  height: 34px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--fg-1);
  padding: 0 9px;
  outline: none;
}
.criteria-version-select select:focus { border-color: var(--primary-500); box-shadow: var(--shadow-focus); background: var(--bg-surface); }
.criteria-threshold { width: 150px; display: flex; flex-direction: column; gap: 5px; color: var(--fg-3); font-size: 11px; font-weight: 700; }
.criteria-threshold input { height: 32px; padding: 0 9px; font-family: var(--font-mono); }
.criteria-score textarea { min-height: 210px; resize: vertical; padding: 9px; line-height: 1.5; font-weight: 400; }
.criteria-rubric textarea { min-height: 150px; resize: vertical; padding: 9px; line-height: 1.5; }
.criteria-signals textarea { min-height: 130px; resize: vertical; padding: 9px; line-height: 1.45; }
.criteria-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.criteria-meta-grid div { border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-sunken); padding: 10px; min-width: 0; }
.criteria-meta-grid span { display: block; color: var(--fg-3); font-size: 11px; margin-bottom: 4px; }
.criteria-meta-grid strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; color: var(--fg-1); }
.cost-dashboard { gap: 16px; }
/* The three cost views (Research Leg/Image/Video Editor) used to be three
   separate top-level admin tabs; they're one "Cost Dashboard" tab now, with
   this pill switcher choosing which view renders below it. */
/* Same segmented-control look as .admin-pool-type-tabs (Global Crawler /
   Winning Ads Criteria's Video/Image switcher) — one rounded track, the
   active view raised as a white pill, instead of three separate outlined
   buttons with gaps between them. */
.cost-view-switch {
  /* .admin-modal-body (this element's parent) is a plain block, not a flex
     container like .admin-grid-view is for .admin-pool-type-tabs — margin:
     auto only centers a block-level box here, so this needs `display: flex`
     (block-level), not `inline-flex` (inline-level, follows text flow and
     ignores margin:auto). */
  display: flex;
  width: fit-content;
  gap: 2px;
  padding: 3px;
  margin: 0 auto 20px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
}
.cost-view-tab {
  display: inline-flex; align-items: center;
  border: 0;
  padding: 7px 18px;
  border-radius: 999px;
  background: transparent;
  color: var(--fg-3);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background 120ms var(--ease-standard, ease), color 120ms var(--ease-standard, ease), box-shadow 120ms var(--ease-standard, ease);
}
.cost-view-tab:hover { color: var(--fg-1); }
.cost-view-tab.on { background: var(--bg-surface); box-shadow: var(--shadow-sm); color: var(--primary-700); }
/* Image / Video Editor get their own fixed hues, matching the same
   treatment on .admin-pool-type-tab — Research Leg keeps following the
   accent switcher since it's this app's primary pool. */
.cost-view-tab:nth-child(2).on { color: #7c3aed; }
.cost-view-tab:nth-child(3).on { color: #2563eb; }
.cost-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cost-kpi, .cost-panel, .cost-platform-card { border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-surface); box-shadow: var(--shadow-sm); }
.cost-kpi { display: grid; gap: 6px; padding: 14px; min-width: 0; }
.cost-kpi span, .cost-kpi small, .cost-panel-head span, .cost-user-id span, .cost-user-total span, .cost-platform-metrics span, .cost-flow-cell span { color: var(--fg-3); font-size: 12px; }
.cost-kpi strong { color: var(--fg-1); font-size: 26px; letter-spacing: 0; overflow-wrap: anywhere; }
.cost-kpi.primary strong { color: var(--primary-700); }
.cost-kpi.danger strong { color: #b42318; }
/* Distinct hues per KPI (not tied to the single switchable --primary-*
   accent) so the four cards read as different things at a glance instead
   of four identical white boxes — color-mix keeps each one theme-aware
   (light/dark) despite starting from a fixed hue, unlike a flat hardcoded
   background would. */
.cost-kpi.gold { border-color: color-mix(in srgb, #d97706 35%, var(--border-subtle)); background: color-mix(in srgb, #d97706 7%, var(--bg-surface)); }
.cost-kpi.gold strong { color: #b45309; }
.cost-kpi.info { border-color: color-mix(in srgb, #2563eb 35%, var(--border-subtle)); background: color-mix(in srgb, #2563eb 7%, var(--bg-surface)); }
.cost-kpi.info strong { color: #2563eb; }
.cost-kpi.violet { border-color: color-mix(in srgb, #7c3aed 35%, var(--border-subtle)); background: color-mix(in srgb, #7c3aed 7%, var(--bg-surface)); }
.cost-kpi.violet strong { color: #7c3aed; }
/* Matches Per-Stage Breakdown's own segment colors (Whisper/ASR's dot is
   the same #0891b2, Remodel's is the same #16a34a) so a tile and its
   corresponding legend entry read as the same thing at a glance. */
.cost-kpi.cyan { border-color: color-mix(in srgb, #0891b2 35%, var(--border-subtle)); background: color-mix(in srgb, #0891b2 7%, var(--bg-surface)); }
.cost-kpi.cyan strong { color: #0891b2; }
.cost-kpi.green { border-color: color-mix(in srgb, #16a34a 35%, var(--border-subtle)); background: color-mix(in srgb, #16a34a 7%, var(--bg-surface)); }
.cost-kpi.green strong { color: #16a34a; }
/* This screen's KPI strip is always exactly 4 tiles — repeat(3) (the
   shared default, sized for other cost-dashboard screens with 3) wrapped
   the 4th tile onto its own half-empty row. Scoped so other screens using
   .cost-kpi-grid at their own tile counts are untouched. */
.admin-crawler-view .cost-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cost-main-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(340px, 1.15fr); gap: 14px; }
.cost-main-grid .cost-daily-panel { order: 1; }
.cost-main-grid .cost-user-panel { order: 2; }
.cost-panel { min-width: 0; padding: 14px; }
.cost-panel-head { align-items: center; display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cost-panel-head > div:first-child { display: grid; gap: 3px; }
.cost-panel-head strong, .cost-user-id strong, .cost-user-total strong, .cost-platform-title strong, .cost-platform-title span { color: var(--fg-1); font-size: 14px; }
.cost-legend { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.cost-legend span { align-items: center; display: inline-flex; gap: 5px; }
.cost-legend i, .cost-stack-segment { display: block; }
.cost-legend i { border-radius: 99px; height: 8px; width: 8px; }
.cost-legend i.search, .cost-stack-segment.search { background: #2563eb; }
.cost-legend i.autoresearch, .cost-stack-segment.autoresearch { background: #14b8a6; }
.cost-legend i.auto_remodel, .cost-stack-segment.auto_remodel { background: #f97316; }
.cost-legend i.visual_breakdown, .cost-stack-segment.visual_breakdown { background: #db2777; }
.cost-user-list, .cost-daily-bars { display: grid; gap: 10px; }
.cost-user-filter-control { align-items: center; display: flex; gap: 8px; max-width: 760px; }
.cost-user-filter-select { background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: 8px; color: var(--fg-1); flex: 1; font: inherit; height: 38px; min-width: 260px; padding: 0 10px; }
.cost-user-filter-select:focus { border-color: var(--primary-400); box-shadow: 0 0 0 3px var(--primary-100); outline: none; }
.cost-user-row { align-items: center; display: grid; grid-template-columns: minmax(180px, 0.9fr) minmax(180px, 1.3fr) minmax(110px, auto); gap: 12px; padding: 9px 0; }
.cost-user-row + .cost-user-row, .cost-daily-row + .cost-daily-row { border-top: 1px solid var(--border-subtle); }
.cost-user-id, .cost-user-total { display: grid; gap: 3px; min-width: 0; }
.cost-user-id strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cost-user-total { justify-items: end; text-align: right; }
.cost-user-bar-wrap, .cost-daily-track { min-width: 0; }
.cost-stacked-bar { align-items: stretch; background: var(--bg-sunken); border-radius: 999px; display: flex; height: 12px; overflow: hidden; width: 100%; }
.cost-stack-segment:first-child { border-bottom-left-radius: 999px; border-top-left-radius: 999px; }
.cost-stack-segment:last-child { border-bottom-right-radius: 999px; border-top-right-radius: 999px; }
.cost-daily-row { align-items: center; display: grid; grid-template-columns: 92px minmax(120px, 1fr) 86px; gap: 10px; padding: 9px 0; }
.cost-daily-row > span { color: var(--fg-3); font-size: 12px; }
.cost-daily-row strong { color: var(--fg-1); font-size: 12px; text-align: right; }

/* Daily Cost vertical bar chart — same percentage-of-max math as
   .cost-stacked-bar (height instead of width), no charting library: this
   dashboard ships as one precompiled bundle with a pinned Babel version and a
   CI check that blocks any in-browser Babel/CDN script.
   Bars and labels are separate normal-flow elements stacked inside each
   column (not absolutely positioned) so a short bar can never visually
   overlap or hide its own date label. */
.cost-daily-chart { margin-top: 8px; }
.cost-daily-chart-plot { position: relative; padding-left: 48px; }
.cost-daily-chart-gridlines { position: absolute; left: 48px; right: 0; top: 0; height: 200px; pointer-events: none; }
.cost-daily-chart-gridline { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border-subtle); }
.cost-daily-chart-gridline span { position: absolute; left: 0; top: -8px; font-size: 10px; color: var(--fg-3); background: var(--bg-surface); padding-right: 4px; }
.cost-daily-chart-bars { display: flex; gap: 4px; height: 200px; overflow-x: auto; overflow-y: hidden; }
.cost-daily-chart-col { display: flex; flex-direction: column; flex: 1 0 18px; min-width: 18px; }
.cost-daily-chart-bar-track { flex: 1; min-height: 0; display: flex; align-items: flex-end; }
.cost-daily-chart-bar { width: 100%; max-width: 26px; margin: 0 auto; display: flex; flex-direction: column-reverse; border-radius: 3px 3px 0 0; overflow: hidden; background: var(--bg-sunken); min-height: 1px; }
.cost-daily-chart-bar .cost-stack-segment { width: 100%; }
.cost-daily-chart-label { margin-top: 4px; height: 20px; font-size: 10px; color: var(--fg-3); white-space: nowrap; text-align: center; overflow: hidden; }
.cost-platform-split { display: grid; grid-template-columns: minmax(340px, 1.15fr) minmax(0, 0.85fr); gap: 14px; }
.cost-platform-split .cost-platform-flow-panel { order: 1; }
.cost-platform-split .cost-platform-grid { order: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); height: 100%; }
.cost-platform-split .cost-platform-card { height: 100%; }
.cost-platform-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cost-platform-card { display: grid; gap: 10px; padding: 13px; }
.cost-platform-title { align-items: center; display: flex; justify-content: space-between; gap: 10px; }
.cost-platform-title span, .cost-platform-title strong { overflow-wrap: anywhere; }
.cost-platform-metrics { display: grid; gap: 5px; }
.cost-kpi.savings { border-color: #bbf7d0; background: linear-gradient(180deg, #f0fdf4 0%, var(--bg-surface) 100%); }
/* KPI tiles on the left, Per-Stage Breakdown + Sprint vs Fallback stacked
   on the right — was two full-width sections stacked top-to-bottom
   (6-tile KPI strip, then the stage/sprint pair below it). Stacking the
   stage/sprint pair vertically here (rather than also splitting them
   side-by-side, which .cost-stage-grid already does on its own) avoids a
   three-way squeeze inside the narrower right column. */
/* No align-items: start here (on purpose) — the KPI tiles (6, in a 2-col
   grid) run taller than Per-Stage Breakdown's own content, so default grid
   "stretch" plus height:100% on the panel grows it to match instead of
   leaving empty space below it while the KPI column runs on past it. */
.cost-overview-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(340px, 1.15fr); gap: 14px; }
.cost-overview-split .cost-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cost-overview-split .cost-stage-panel { height: 100%; }
/* Sprint vs Fallback + Recent Sprints, side by side below the row above.
   No align-items override — grid's default "stretch" makes both cells
   fill the row's full height (the taller one, Recent Sprints' table, sets
   it), instead of each panel only being as tall as its own content. */
/* Swapped via `order` (not JSX reordering) — Recent Sprints moves to the
   left, Sprint vs Fallback to the right, and the column widths swap with
   them so Recent Sprints keeps the wider of the two slots it already had,
   instead of the position keeping its old width and the content just
   trading places into whichever slot happens to sit there. */
.cost-secondary-split { display: grid; grid-template-columns: minmax(340px, 1.15fr) minmax(0, 0.85fr); gap: 14px; }
.cost-secondary-split .cost-panel { height: 100%; }
.cost-secondary-split .cost-sprint-history-panel { order: 1; }
.cost-secondary-split .cost-sprint-panel { order: 2; }
.cost-stage-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 14px; }
.cost-stage-rows { display: grid; gap: 8px; margin-top: 12px; }
.cost-stage-row { align-items: center; display: grid; grid-template-columns: minmax(120px, 1fr) 52px 92px; gap: 10px; }
.cost-stage-label { align-items: center; color: var(--fg-2); display: inline-flex; font-size: 12px; gap: 8px; }
.cost-stage-label i { border-radius: 999px; display: inline-block; flex: 0 0 auto; height: 10px; width: 10px; }
.cost-stage-pct { color: var(--fg-3); font-size: 12px; text-align: right; }
.cost-stage-row strong { color: var(--fg-1); font-size: 12px; text-align: right; }
.cost-sprint-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cost-sprint-metric { background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: 8px; display: grid; gap: 4px; padding: 10px; }
.cost-sprint-metric span { color: var(--fg-3); font-size: 11px; }
.cost-sprint-metric strong { color: var(--fg-1); font-family: var(--font-mono); font-size: 18px; }
.cost-sprint-metric small { color: var(--fg-3); font-size: 11px; }
.cost-sprint-metric.savings { border-color: #bbf7d0; background: #f0fdf4; }
.cost-pool-dedup-banner { align-items: center; background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: 8px; display: flex; gap: 12px; justify-content: space-between; margin-top: 12px; padding: 12px; }
.cost-pool-dedup-banner strong { display: block; font-size: 13px; }
.cost-pool-dedup-banner span { color: var(--fg-3); display: block; font-size: 11px; margin-top: 2px; }
.cost-pool-dedup-value { color: #166534; font-family: var(--font-mono); font-size: 16px; white-space: nowrap; }
.cost-sprint-table { min-width: 980px; }
.cost-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; overflow-x: auto; }
.cost-config-grid.single { grid-template-columns: 1fr; }
.cost-config-grid.single .cost-config-table { width: 100%; }
.cost-table-scroll { overflow-x: auto; }
/* Tall scrolling tables (per-ad / per-user cost tables cap their height):
   keep the header row pinned while the body scrolls. No-op for tables
   that never scroll vertically. */
.cost-table-scroll table thead th { position: sticky; top: 0; background: var(--bg-surface); z-index: 1; }
.cost-config-table, .cost-platform-flow-table { border-collapse: collapse; min-width: 460px; width: 100%; }
.cost-config-table th, .cost-config-table td, .cost-platform-flow-table th, .cost-platform-flow-table td { border-bottom: 1px solid var(--border-subtle); color: var(--fg-2); font-size: 12px; padding: 9px 8px; text-align: left; vertical-align: top; }
.cost-config-table th, .cost-platform-flow-table th { color: var(--fg-3); font-weight: 700; }
.cost-platform-flow-table td strong { color: var(--fg-1); }
.cost-table-totals-row td { border-top: 2px solid var(--border-default, var(--border-subtle)); border-bottom: none; background: var(--bg-sunken); }
.cost-flow-cell { display: grid; gap: 3px; min-width: 92px; }
.cost-top-ad { align-items: center; display: flex; gap: 10px; }
.cost-top-ad-thumb { background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: 6px; flex: 0 0 auto; height: 40px; object-fit: cover; width: 40px; }
.cost-top-ad a { color: var(--accent, #2563eb); text-decoration: none; }
.cost-top-ad a:hover { text-decoration: underline; }
/* Cost-panel semantic variant hooks (shared by the video + Image cost dashboards).
   Pre-existing class names that had no explicit rule. Defined here as grid/flex card
   children with min-width:0 so their inner cost-table-scroll tables scroll instead of
   forcing horizontal overflow — non-visual when content already fits. */
.cost-user-filter-panel,
.cost-stage-panel,
.cost-sprint-panel,
.cost-sprint-history-panel,
.cost-user-panel,
.cost-daily-panel,
.cost-platform-flow-panel,
.cost-config-panel { min-width: 0; }
.cost-config-table code { background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: 6px; color: var(--fg-1); display: inline-block; font-size: 11px; padding: 2px 5px; }
.cost-key-state { border-radius: 999px; display: inline-block; font-size: 11px; font-weight: 700; margin-left: 6px; padding: 2px 7px; }
.cost-key-state.ok { background: #dcfce7; color: #166534; }
.cost-key-state.missing { background: #fee2e2; color: #991b1b; }
.admin-pool-panel { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.admin-pool-active { font-size: 13px; color: var(--fg-2); }
.admin-pool-panel textarea { min-height: 84px; resize: vertical; padding: 9px; }
.admin-version-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.admin-version { display: flex; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--bg-sunken); font-size: 12px; }
.admin-version.active { border-color: var(--primary-300); background: var(--primary-50); }
.admin-version small { color: var(--fg-3); font-family: var(--font-mono); }
.admin-workspace-detail { min-height: 420px; padding: 14px; }
.admin-work-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.admin-work-summary div { border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-sunken); padding: 10px; }
.admin-work-summary span { display: block; color: var(--fg-3); font-size: 11px; margin-bottom: 4px; }
.admin-work-summary strong { font-family: var(--font-mono); font-size: 18px; }
.admin-work-sections { display: flex; flex-direction: column; gap: 10px; }
.admin-work-card { border: 1px solid var(--border-subtle); border-radius: 8px; overflow: hidden; background: var(--bg-surface); }
.admin-work-card header { display: flex; justify-content: space-between; padding: 10px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.admin-work-card header span { font-family: var(--font-mono); color: var(--fg-3); }
.admin-work-empty { padding: 14px; color: var(--fg-3); font-size: 12px; }
.admin-work-empty-line {
  padding: 10px 12px;
  border: 1px dashed var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-sunken);
  color: var(--fg-3);
  font-size: 12px;
}
.admin-work-ads { display: flex; flex-direction: row; gap: 0; overflow-x: auto; }
.admin-work-ad {
  display: flex; flex-direction: column; gap: 3px;
  flex: 0 0 220px; max-width: 220px; padding: 8px 10px;
  border-right: 1px solid var(--border-subtle);
}
.admin-work-ad:last-child { border-right: 0; }
.admin-work-ad span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 12px; }
.admin-work-ad small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-3); font-size: 11px; }
.admin-generated { margin-top: 12px; }
.admin-generated-meta {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border-bottom: 1px solid var(--border-subtle);
  font-size: 12px; color: var(--fg-2);
}
/* align-items:center — the default `stretch` made each chip as tall as the
   two-line credits block beside it, so they rendered as grey slabs. */
.admin-generated-counts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin-generated-credits {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start;
}
.admin-generated-credits > div { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.admin-generated-credits small {
  width: 100%; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-3);
}
.admin-generated-live {
  padding: 10px 12px; background: #ecfeff; border-bottom: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 2px; font-size: 12px;
}
.admin-generated-live.idle { background: var(--bg-sunken); color: var(--fg-3); }
.admin-generated-ad { border-bottom: 1px solid var(--border-subtle); }
.admin-generated-ad.failed { background: #fef2f2; }
.admin-generated-ad.running { background: #ecfeff; }
.admin-generated-ad-head {
  width: 100%; text-align: left; background: transparent; border: 0;
  display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; cursor: pointer;
}
.admin-generated-ad-head span { font-weight: 700; font-size: 13px; }
.admin-generated-ad-head small { color: var(--fg-3); font-size: 11px; }
.admin-generated-pipeline { padding: 0 12px 14px; }
.admin-generated-rail-meta {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 2px 0 4px; font-size: 11px; color: var(--fg-3);
}
.admin-generated-rail {
  list-style: none; margin: 0; padding: 8px 0 12px;
  display: flex; align-items: flex-start; gap: 0; overflow-x: auto;
}
.admin-generated-node {
  display: flex; align-items: flex-start; flex: 0 0 auto;
}
.admin-generated-connector {
  width: 22px; height: 2px; margin: 15px 2px 0; background: var(--border-default);
}
.admin-generated-connector.success, .admin-generated-connector.skipped { background: #86efac; }
.admin-generated-connector.failed { background: #fca5a5; }
.admin-generated-connector.running { background: #67e8f9; }
.admin-generated-node-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 64px; padding: 0; border: 0; background: transparent; cursor: pointer; color: inherit;
}
.admin-generated-node-mark {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; border: 2px solid var(--border-default);
  background: var(--bg-surface); color: var(--fg-3);
}
.admin-generated-node.success .admin-generated-node-mark { border-color: #16a34a; background: #dcfce7; color: #166534; }
.admin-generated-node.failed .admin-generated-node-mark { border-color: #dc2626; background: #fee2e2; color: #991b1b; }
.admin-generated-node.running .admin-generated-node-mark { border-color: #0891b2; background: #cffafe; color: #155e75; }
.admin-generated-node.skipped .admin-generated-node-mark { border-color: #94a3b8; background: var(--bg-sunken); color: var(--fg-3); }
.admin-generated-node.active .admin-generated-node-mark { box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.25); }
.admin-generated-node-label {
  max-width: 72px; text-align: center; font-size: 10px; font-weight: 700; line-height: 1.2;
  color: var(--fg-2);
}
.admin-generated-output {
  border: 1px solid var(--border-subtle); border-radius: 8px;
  background: var(--bg-sunken); padding: 10px 12px;
}
.admin-generated-output.failed { border-color: #fecaca; background: #fef2f2; }
.admin-generated-output.success { border-color: #bbf7d0; }
.admin-generated-output.running { border-color: #a5f3fc; }
.admin-generated-output-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.admin-generated-output-head em { font-style: normal; font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--fg-3); }
.admin-generated-output.success .admin-generated-output-head em { color: #15803d; }
.admin-generated-output.failed .admin-generated-output-head em { color: #b91c1c; }
.admin-generated-output.running .admin-generated-output-head em { color: #0e7490; }
.admin-generated-output.skipped .admin-generated-output-head em { color: #64748b; }
.admin-generated-output p { margin: 6px 0 0; font-size: 12px; color: var(--fg-2); white-space: pre-wrap; word-break: break-word; }
.admin-generated-step-credits { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.admin-credit-pill {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; background: var(--bg-surface); border: 1px solid var(--border-subtle);
}
.admin-credit-pill.kie { background: #ecfeff; color: #155e75; border-color: #a5f3fc; }
.admin-credit-pill.fal { background: #f5f3ff; color: #5b21b6; border-color: #ddd6fe; }
.admin-credit-pill.foreplay { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.admin-generated-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 12px; margin: 10px 0 0;
}
.admin-generated-facts > div { min-width: 0; }
.admin-generated-facts dt { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-3); }
.admin-generated-facts dd { margin: 2px 0 0; font-size: 12px; color: var(--fg-1); word-break: break-word; }
.admin-generated-artifacts {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none;
}
.admin-generated-artifacts li {
  padding: 2px 8px; border-radius: 6px; background: var(--bg-surface);
  border: 1px solid var(--border-subtle); font-size: 11px; font-family: var(--font-mono);
}
.admin-generated-error {
  margin: 8px 0 0; padding: 8px; border-radius: 6px;
  background: #fff; color: #7f1d1d; font-size: 11px; white-space: pre-wrap; word-break: break-word;
  max-height: 180px; overflow: auto;
}
[data-theme="dark"] .admin-generated-live { background: rgba(14, 116, 144, 0.18); }
[data-theme="dark"] .admin-generated-ad.failed { background: rgba(185, 28, 28, 0.16); }
[data-theme="dark"] .admin-generated-ad.running { background: rgba(14, 116, 144, 0.16); }
[data-theme="dark"] .admin-generated-output.success { border-color: rgba(74, 222, 128, 0.35); }
[data-theme="dark"] .admin-generated-output.running { border-color: rgba(34, 211, 238, 0.4); }
[data-theme="dark"] .admin-generated-output.failed { background: rgba(185, 28, 28, 0.16); border-color: rgba(248, 113, 113, 0.4); }
[data-theme="dark"] .admin-generated-error { background: rgba(0, 0, 0, 0.25); color: #fecaca; }
[data-theme="dark"] .admin-generated-node.success .admin-generated-node-mark { background: rgba(22, 163, 74, 0.22); }
[data-theme="dark"] .admin-generated-node.failed .admin-generated-node-mark { background: rgba(220, 38, 38, 0.22); }
[data-theme="dark"] .admin-generated-node.running .admin-generated-node-mark { background: rgba(8, 145, 178, 0.22); }
[data-theme="dark"] .admin-credit-pill.kie { background: rgba(8, 145, 178, 0.18); color: #a5f3fc; }
[data-theme="dark"] .admin-credit-pill.fal { background: rgba(91, 33, 182, 0.22); color: #ddd6fe; }
[data-theme="dark"] .admin-credit-pill.foreplay { background: rgba(154, 52, 18, 0.22); color: #fed7aa; }
@media (max-width: 1120px) {
  .admin-grid,
  .admin-grid.workspaces { grid-template-columns: 1fr; }
  .admin-list { max-height: none; }
  .admin-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cost-main-grid,
  .cost-config-grid,
  .cost-overview-split,
  .cost-secondary-split,
  .cost-stage-grid { grid-template-columns: 1fr; }
  .cost-kpi-grid,
  .admin-crawler-view .cost-kpi-grid,
  .cost-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .criteria-meta-grid { grid-template-columns: 1fr; }
  .criteria-top-row { flex-direction: column; }
  .criteria-threshold { width: 100%; }
  .admin-work-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .cost-kpi-grid,
  .admin-crawler-view .cost-kpi-grid,
  .cost-overview-split .cost-kpi-grid,
  .cost-platform-grid { grid-template-columns: 1fr; }
  .cost-user-row { grid-template-columns: 1fr; }
  .cost-user-total { justify-items: start; text-align: left; }
  .cost-daily-row { grid-template-columns: 1fr; }
  .cost-daily-row strong { text-align: left; }
}

/* ===================== ACCESS REQUESTS ===================== */
.access-admin { display: flex; flex-direction: column; gap: 14px; }

.quota-guardrails-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.quota-guardrails-defaults,
.quota-guardrails-totals,
.quota-guardrails-reset {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-surface);
  font-size: 13px;
  color: var(--fg-2);
}
.quota-guardrails-toolbar { display: flex; gap: 8px; }
.quota-guardrails-table-wrap {
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-surface);
}
.quota-guardrails-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.quota-guardrails-table th,
.quota-guardrails-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-default);
  vertical-align: top;
  text-align: left;
}
.quota-guardrails-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-3);
}
.quota-user-cell { display: flex; flex-direction: column; gap: 2px; }
.quota-user-cell small { color: var(--fg-3); }
.quota-cap-inputs {
  display: grid;
  gap: 8px;
}
.quota-cap-inputs label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: var(--fg-3);
}
.daily-quota-bar { display: grid; gap: 6px; min-width: 180px; }
.daily-quota-bar-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-2);
}
.daily-quota-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-muted, #eef2f7);
  overflow: hidden;
}
.daily-quota-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--primary-500, #2563eb);
}
.daily-quota-bar.warn .daily-quota-bar-fill { background: #d97706; }
.daily-quota-bar.danger .daily-quota-bar-fill { background: #dc2626; }

.access-filters {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.access-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--fg-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  cursor: pointer;
}
.access-filter.active { color: var(--fg-brand); border-color: var(--primary-300); background: var(--primary-50); }
.access-filter span { font-family: var(--font-mono); font-size: 11px; }
.access-error,
.access-loading,
.access-notice {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-surface);
  padding: 12px 14px;
  color: var(--fg-2);
  font-size: 13px;
}
.access-error { color: #b42318; border-color: #fecaca; background: #fff1f2; }
.access-notice { color: #027a48; border-color: #abefc6; background: #ecfdf3; }
.rd-flow-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 4px;
  border-color: var(--rd-teal-border, var(--border-default));
  background: var(--rd-teal-tint, var(--bg-surface));
  color: var(--rd-ink-2, var(--fg-2));
  border-radius: var(--rd-radius-card, 8px);
}
.rd-flow-banner-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rd-flow-banner .btn-primary,
.rd-flow-banner .btn-secondary { height: 32px; padding: 0 12px; font-size: 12px; }
.access-table { display: flex; flex-direction: column; gap: 10px; }
.access-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-surface);
}
.access-main { min-width: 0; }
.access-name-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.access-name-line strong { font-size: 14px; }
.access-role-badge { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.access-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  color: var(--fg-3);
  font-size: 12px;
}
.access-meta span { overflow-wrap: anywhere; }
.access-reason,
.access-notes {
  margin: 10px 0 0;
  line-height: 1.5;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}
.access-notes { font-size: 12px; color: var(--fg-3); }

/* Add User form (AdminUsersView) — was relying only on the bare .grid inline
   style, so labels and inputs had no spacing between them and the input
   didn't fill its grid cell. */
.access-add-user {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 14px;
  background: var(--bg-surface);
}
.access-add-user label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
}
.access-add-user .input,
.access-add-user select.input {
  width: 100%;
  font-weight: 400;
  color: var(--fg-1);
}
.access-actions { display: flex; flex-direction: column; gap: 10px; }
.access-actions textarea {
  width: 100%;
  min-height: 86px;
  resize: vertical;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-sunken);
  color: var(--fg-1);
  padding: 9px 10px;
  font: inherit;
  font-size: 13px;
  outline: none;
}
.access-actions textarea:focus { border-color: var(--primary-500); box-shadow: var(--shadow-focus); background: var(--bg-surface); }
.access-action-buttons { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.feature-access-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.feature-access-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.feature-access-toggle input { margin: 0; }
.feature-access-toggle.disabled {
  color: var(--fg-4);
  cursor: not-allowed;
  opacity: 0.72;
}
.feature-access-applied {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #067647;
  font-size: 12px;
  font-weight: 700;
}
.feature-access-note {
  color: var(--fg-3);
  font-size: 12px;
  text-align: right;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
}
.status-pill.pending { background: #fff1f2; color: #b42318; }
.status-pill.approved { background: #ecfdf3; color: #067647; }
.status-pill.rejected { background: #f2f4f7; color: #475467; }
@media (max-width: 860px) {
  .access-row { grid-template-columns: 1fr; }
  .access-action-buttons { justify-content: flex-start; }
  .feature-access-controls { justify-content: flex-start; }
  .feature-access-note { text-align: left; }
}

/* badges for the 'Filter' / 'Remodel' pipeline icons within the tab */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
  background: var(--bg-sunken); color: var(--fg-2);
}

/* ===================== SELECTION BAR — SECONDARY CTA ===================== */
.selbar-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  background: transparent; color: #eef0f3;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  margin-right: 8px;
}
.selbar-secondary:hover { background: rgba(255,255,255,0.06); }

/* ===================== AUTORESEARCH PANEL ===================== */
.ar-card { margin-top: 16px; }
.ar-sources {
  display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
  margin-top: 10px;
}
.ar-sources-spacer { flex: 1; }
.ar-progress {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.ar-progress-head {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.ar-running-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(15, 181, 168, 0.35);
  background: rgba(15, 181, 168, 0.12);
  color: var(--primary-700, #0a7c72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ar-running-chip .ar-spinner {
  width: 10px;
  height: 10px;
  border-width: 2px;
}
.ar-scheduler-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary-700, #0a7c72);
  background: rgba(15, 181, 168, 0.12);
  border: 1px solid rgba(15, 181, 168, 0.35);
  border-radius: 999px;
  padding: 2px 8px;
}
.ar-progress-status {
  font-size: 13px; font-weight: 600; color: var(--fg-1);
}
.ar-progress-meta {
  /* Always its own full-width row below the status line, rather than
     squeezing into whatever space is left beside it — that made the chips
     wrap unpredictably (sometimes mid-group) depending on how long the
     status text happened to be. One deterministic layout reads cleaner at
     every width and every chip count. */
  flex: 1 1 100%;
  margin-left: 0; /* lines up with .ar-progress-status, past the 12px spinner + 10px gap */
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
}
.ar-meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  /* A calm teal tint (same family as the app's other info/status chips —
     .adspy-dd-preview, .rd-step-spend-badge) instead of flat white-on-gray,
     which barely stood out against the card's own sunken background. */
  background: var(--primary-50, #e7f5f3);
  border: 1px solid var(--primary-200, var(--primary-100));
  color: var(--fg-brand);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono, inherit);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}
.ar-progress-warning {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: #7a3b00;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.ar-progress-bar {
  margin-top: 8px;
  height: 8px; border-radius: 999px;
  background: rgba(0,0,0,0.08);
  overflow: hidden;
}
.ar-progress-fill {
  height: 100%;
  background: var(--primary-500, #0fb5a8);
  transition: width 0.4s ease;
}
.ar-platform-progress {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ar-platform-progress-row {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--fg-2);
  font-size: 11px;
  font-family: var(--font-mono, inherit);
}
.ar-platform-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 7px;
  flex-shrink: 0;
  vertical-align: middle;
}
.ar-card .ar-platform-progress {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.ar-card .ar-platform-progress-row {
  justify-content: flex-start;
}
.ar-direction-details {
  margin-top: 10px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 10px;
}
.ar-direction-details summary {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -4px -6px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--fg-2);
  font-size: 11.5px;
  font-weight: 600;
  list-style: none;
  transition: background 120ms var(--ease-standard, ease), color 120ms var(--ease-standard, ease);
}
.ar-direction-details summary::-webkit-details-marker { display: none; }
.ar-direction-details summary::before {
  content: '';
  width: 0;
  height: 0;
  flex-shrink: 0;
  border-style: solid;
  border-width: 4px 0 4px 5px;
  border-color: transparent transparent transparent var(--fg-3);
  transition: transform 120ms var(--ease-standard, ease);
}
.ar-direction-details[open] summary::before { transform: rotate(90deg); }
.ar-direction-details summary:hover { background: var(--bg-hover); color: var(--fg-1); }
.ar-direction-detail-list {
  margin-top: 8px;
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
}
.ar-direction-detail-group {
  display: grid;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 6px;
}
/* Zebra striping — this list can run into the hundreds of rows (one per
   competitor direction), so a plain flat list of near-identical mono text
   is hard to track by eye while scrolling. */
.ar-direction-detail-group:nth-child(odd) { background: var(--bg-surface); }
.ar-direction-detail-name {
  color: var(--fg-1);
  font-size: 12px;
  font-weight: 600;
}
.ar-direction-detail-platforms {
  display: grid;
  gap: 3px;
}
.ar-direction-detail-row {
  color: var(--fg-2);
  font-size: 11px;
  font-family: var(--font-mono, inherit);
}
.ar-spinner {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.12);
  border-top-color: var(--primary-500, #0fb5a8);
}
.ar-spinner.spin { animation: ar-spin 0.9s linear infinite; }
.ar-complete-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--primary-500, #0fb5a8);
  flex: 0 0 auto;
}
@keyframes ar-spin { to { transform: rotate(360deg); } }
/* Loader icons animate only when callers opt in with icon-spin or .spin. */
.icon-spin { animation: ar-spin 0.9s linear infinite; transform-origin: center; }
.ar-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 12px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--bg-sunken); color: var(--fg-2);
  border: 1px solid var(--border-default);
  font: inherit; font-size: 12px; cursor: pointer;
}
.chip.on {
  background: var(--primary-50, #e7f5f3); color: var(--primary-500);
  border-color: var(--primary-500);
}
.chip-count {
  font-family: var(--font-mono); font-size: 10px;
  background: rgba(0,0,0,0.08); padding: 1px 6px; border-radius: 999px;
}
.ar-target {
  display: grid; align-items: center; gap: 10px;
  font-size: 12px; color: var(--fg-3);
}
.ar-target input {
  width: auto; height: 40px; padding: 0 8px;
  text-align: center; font-family: var(--font-mono);
  background: transparent; border: 1px solid var(--border-default);
  border-radius: 6px; font-size: 12px; color: var(--fg-1); outline: none;
}
.sr-input{
  background: transparent;
}

.ar-target input:focus { border-color: var(--primary-500); box-shadow: var(--shadow-focus); }
/* No .ar-target select rule existed — every .ar-target field used a plain
   input except the Global Crawler scheduler's Timezone picker, which fell
   through to the browser's native, unstyled <select> chrome sitting right
   next to its 40px-tall sibling inputs. */
.ar-target select {
  width: auto; height: 40px; padding: 0 8px;
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-1);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: 6px; outline: none;
}
.ar-target select:focus { border-color: var(--primary-500); box-shadow: var(--shadow-focus); }
.ar-stepper-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-2);
}
.ar-info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--fg-4);
  cursor: help;
  outline: none;
}
.ar-info-tip:hover, .ar-info-tip:focus-visible { color: var(--fg-2); }
/* Custom themed tooltip — replaces the native title attribute (slow to
   appear, unstyled). --fg-1/--bg-surface both self-invert per theme (dark
   ink in light mode <-> light ink in dark mode), so this reads with strong
   contrast against either background without any [data-theme] overrides. */
.ar-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  z-index: 60;
  width: max-content;
  max-width: 220px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--fg-1);
  color: var(--bg-surface);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.16));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}
.ar-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--fg-1);
}
.ar-info-tip:hover .ar-tooltip,
.ar-info-tip:focus-visible .ar-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.ar-stepper-control {
  display: inline-flex;
  align-items: stretch;
  height: 40px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: transparent;
  overflow: hidden;
  width: 112px;
  transition: box-shadow 120ms var(--ease-standard, ease), border-color 120ms var(--ease-standard, ease);
}
/* The inner input suppresses its own focus ring (it's clipped by
   overflow:hidden above), so the control itself owns the glow instead —
   same teal focus treatment as .input elsewhere in the app. */
.ar-stepper-control:focus-within {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px var(--primary-100);
}
.ar-stepper-control input {
  width: 50px; height: auto;
  border: none; border-left: 1px solid var(--border-default); border-right: 1px solid var(--border-default);
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
/* Chrome, Safari, Edge */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.ar-stepper-control input:focus { box-shadow: none; }
.ar-stepper-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px;
  border: none;
  background: var(--bg-hover);
  color: var(--fg-2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.ar-stepper-btn:hover:not(:disabled) { background: var(--bg-active); color: var(--fg-1); }
.ar-stepper-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ar-target.ar-keyword {
  flex: 1 1 320px; max-width: 460px;
}
.ar-target.ar-keyword input {
  width: 100%; min-width: 280px; text-align: left; font-family: var(--font-sans);
}
.ar-target.ar-keyword span { white-space: nowrap; }

.ar-dirs { position: relative; border-top: 1px solid var(--border-subtle); padding-top: 12px; margin-top: 12px; }
.ar-dirs-inline {
  border-top: 0; padding-top: 0; margin-top: 0;
  flex: 1 0 100%; order: 10;
}
.ar-dirs-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border-default); background: var(--bg-sunken);
  color: var(--fg-2); font: inherit; font-size: 12px; cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.ar-dirs-trigger:hover { color: var(--fg-1); border-color: var(--primary-500); }
.ar-dirs-trigger.active {
  color: var(--primary-700, #4338ca);
  background: var(--primary-100, #eef2ff);
  border-color: var(--primary-500);
}
.ar-dirs-trigger-label { font-weight: 600; }
.ar-dirs-trigger-value { opacity: 0.85; font-variant-numeric: tabular-nums; }
.ar-dirs-chevron { display: inline-flex; transition: transform 0.15s ease; }
.ar-dirs-chevron.up { transform: rotate(180deg); }
.ar-dirs-popover {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--bg-default, #fff);
  border: 1px solid var(--border-default);
  border-radius: 10px; padding: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  z-index: 20;
  max-height: 340px; overflow-y: auto;
}
.ar-dirs-inline .ar-dirs-popover {
  top: calc(100% + 4px); bottom: auto; right: auto;
  width: min(620px, 100%);
}
.ar-dirs-popover-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; gap: 12px; }
.ar-dirs-popover-hint { font-size: 11px; color: var(--fg-3); }
.ar-dirs-actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ar-dirs-clear {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; color: var(--fg-3); cursor: pointer;
  font: inherit; font-size: 11px; padding: 2px 8px; border-radius: 6px; white-space: nowrap;
}
.ar-dirs-clear:hover { background: var(--bg-sunken); color: var(--fg-1); }
.ar-dirs-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-dir-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border-default); background: var(--bg-sunken);
  color: var(--fg-2); font-size: 12px; cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ar-dir-pill:hover { color: var(--fg-1); }
.ar-dir-pill input { margin: 0; accent-color: var(--primary-500); }
.ar-dir-pill.on {
  background: var(--primary-100, #eef2ff);
  color: var(--primary-700, #4338ca);
  border-color: var(--primary-500);
}
.ar-dir-label { white-space: nowrap; text-transform: lowercase; }
.ar-dirs-preview { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; max-width: 100%; }
.ar-dir-preview-pill,
.ar-dir-preview-more {
  display: inline-flex; align-items: center; min-width: 0; max-width: 160px;
  padding: 3px 7px; border-radius: 999px;
  background: var(--bg-sunken); border: 1px solid var(--border-subtle);
  color: var(--fg-2); font-size: 11px; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ar-dir-preview-more { color: var(--fg-3); font-variant-numeric: tabular-nums; }

.ar-dims {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
}
.ar-dim {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px; border-radius: 10px; text-align: left;
  background: var(--bg-surface); border: 1px solid var(--border-default);
  font: inherit; cursor: pointer;
  transition: background 120ms var(--ease-standard), border-color 120ms var(--ease-standard);
}
.ar-dim:hover { background: var(--bg-hover); }
.ar-dim.on { border-color: var(--primary-500); background: var(--primary-50, #e7f5f3); }
.ar-dim-cbx {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 1.5px solid var(--border-strong, #cbd2dc); border-radius: 4px;
  background: var(--bg-surface);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.ar-dim-cbx.on { background: var(--primary-500); border-color: var(--primary-500); }
.ar-dim-body { flex: 1; min-width: 0; }
.ar-dim-name {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--fg-1);
  margin-bottom: 4px;
}
.ar-dim-type {
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: 4px;
  background: var(--bg-sunken); color: var(--fg-3);
}
.ar-dim-desc {
  font-size: 12px; color: var(--fg-2); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}
.ar-dim-meta {
  display: flex; gap: 6px; font-size: 11px; color: var(--fg-3);
  font-family: var(--font-mono);
}

/* count pill on the Run Autoresearch button */
.count-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px;
  border-radius: 999px; background: rgba(255,255,255,0.2); color: #fff;
  font-size: 11px; font-family: var(--font-mono); margin-left: 4px;
}

/* disabled platform toggles (backend not wired) — muted */
.plat-toggle:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.plat-toggle.all {
  font-weight: 600;
  border-style: dashed;
}

/* ----------------------------------------------------------------------
   Static Ads — image-ad generation surface (first tab).
   Reuses .search-card / .ar-progress / .btn-* and adds .sa-* selectors.
   ---------------------------------------------------------------------- */
.static-ads-panel { display: flex; flex-direction: column; gap: 16px; }
/* Generic version of the above for wizard panels that don't have their own
   top-level panel div (e.g. AutoresearchPanel is rendered directly inside a
   parent fragment) — keeps the StepRail card and the step-content card
   stacked with a gap instead of sharing one border. */
.rd-wizard-panel { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.rd-wizard-panel > .rd-page-head { margin-bottom: 0; }
.rd-wizard-panel > .rd-workflow-header { margin-bottom: 0; }
/* StepRail uses dashboard rd-* tokens — keep vlds typography from overriding the card title. */
.vlds .rd-workflow-header .rd-workflow-title {
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--rd-ink-1);
}
/* UGC "Ads you made earlier" / "Start a new one" bar — the Manual Generation
   counterpart of the Animation panel's ad bar (.an-adbar). Its own rd-* classes
   rather than reusing the an-* ones: those are sized for the Animation wizard's
   own type scale, and this bar sits inside the vlds screens. Positioned relative
   so the dropdown can anchor to it. */
.rd-ugc-adbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.rd-ugc-adbar-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 46%;
}
/* Pushed right so the two buttons keep a fixed home regardless of how long the
   open ad's name is. */
.rd-ugc-adbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Right-aligned to the actions, and above everything below it — the panel overlaps
   the picker/locked card rather than pushing them down. */
.rd-ugc-adbar-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: min(560px, 100%);
  max-height: 340px;
  overflow-y: auto;
  padding: 8px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.18));
}
.rd-ugc-adbar-empty,
.rd-ugc-adbar-error {
  margin: 6px 8px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.rd-ugc-adbar-error { color: var(--danger-fg); }
.rd-ugc-ad-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rd-ugc-ad-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}
.rd-ugc-ad-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rd-ugc-ad-row-id {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-ugc-ad-row-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.rd-ugc-ad-row-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.rd-ugc-ad-row-brief { font-size: var(--text-xs); color: var(--text-secondary); }

/* Narrow: the title stops competing with the buttons for the row. */
@media (max-width: 720px) {
  .rd-ugc-adbar-title { max-width: 100%; }
  .rd-ugc-adbar-actions { margin-left: 0; }
  .rd-ugc-adbar-panel { width: 100%; }
}

.rd-script-id-hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.45;
}
.rd-script-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  align-items: stretch;
}
.rd-script-panel-section-label {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rd-script-panel-dropzone-wrap {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}
.rd-script-panel-paste {
  grid-column: 1;
  grid-row: 3;
  min-width: 0;
}
.rd-script-panel-pick-heading {
  margin: 0;
  padding: 12px 14px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.rd-script-panel-grid-cards {
  grid-column: 2;
  grid-row: 2 / 4;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  height: var(--rd-script-panel-h, auto);
}
.rd-script-panel-grid-cards-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}
.rd-script-panel-grid-cards-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  box-sizing: border-box;
}
.rd-script-candidate-card {
  cursor: pointer;
  width: 100%;
  flex: 0 0 auto;
  flex-shrink: 0;
  height: var(--rd-script-card-h, 160px);
  min-height: var(--rd-script-card-h, 160px);
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.rd-script-candidate-card:hover {
  border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
  box-shadow: var(--shadow-sm);
}
.rd-script-candidate-card.selected {
  background: var(--brand-soft);
  border-color: var(--brand);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent);
}
.rd-script-candidate-card-thumb {
  position: relative;
  flex: 0 0 32%;
  min-width: 88px;
  max-width: 128px;
  height: auto;
  align-self: stretch;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #0b0b0c;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rd-script-candidate-card-body {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 2px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: flex-start;
}
.rd-script-candidate-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.rd-script-candidate-card-id {
  font-family: var(--font-mono);
  font-size: var(--text-2xs, 11px);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
  color: var(--text-primary);
}
.rd-script-candidate-card-text {
  flex: 1;
  min-height: 0;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  overflow-y: auto;
  overflow-x: hidden;
}
.rd-script-panel-lock-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: end;
}
.rd-script-panel-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 10px;
}
.rd-script-panel-divider-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}
.rd-script-panel-divider-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.rd-cast-panel-section-title {
  margin: 0 0 14px !important;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.sa-card { margin-top: 0; }

.sa-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
  padding: 4px 0 2px;
}
.sa-field { display: grid; gap: 6px; font-size: 12px; color: var(--fg-2); min-width: 160px; }
.sa-field-grow { flex: 1 1 240px; }
.sa-field > span { font-weight: 600; }
.sa-field input[type="text"],
.sa-field select {
  height: 34px; padding: 0 10px;
  border: 1px solid var(--border-default); border-radius: 8px;
  background: var(--bg-surface); color: var(--fg-1);
  font: inherit; font-size: 13px; outline: none;
}
.sa-field input[type="text"]:focus,
.sa-field select:focus { border-color: var(--primary-500); box-shadow: var(--shadow-focus); }
.sa-field input[type="range"] { width: 100%; accent-color: var(--primary-500); }
.sa-field input:disabled, .sa-field select:disabled { opacity: 0.6; cursor: not-allowed; }

/* History (Previously Generated Ads) date filter — themed, pinned far-right of the bar. */
.sa-gallery-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-3);
  font-size: 11px;
  margin-left: auto;
}
.sa-gallery-filter input[type="date"] {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--fg-1);
  font: inherit;
  font-size: 12px;
  outline: none;
}
.sa-gallery-filter input[type="date"]:focus {
  border-color: var(--primary-500);
  box-shadow: var(--shadow-focus);
}
.sa-gallery-filter .btn-secondary { height: 30px; padding: 0 10px; }

/* History rows — each row reuses .sa-gallery (same 240px cards + horizontal scroll as
   the studio); stack them inside the vertical scroller with light separators. */
.sa-gallery-rows .sa-gallery { margin-top: 0; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
.sa-gallery-rows .sa-gallery:last-child { border-bottom: none; }
.sa-history-pass { margin-left: 4px; }

.sa-field-disabled { opacity: 0.75; }
.sa-field-disabled em { font-style: normal; color: var(--fg-4); font-weight: 500; }
.sa-strictness { display: inline-flex; border: 1px solid var(--border-default); border-radius: 8px; overflow: hidden; }
.sa-strictness-opt {
  padding: 7px 12px; border: 0; background: var(--bg-sunken); color: var(--fg-3);
  font: inherit; font-size: 12px; text-transform: capitalize; cursor: pointer;
}
.sa-strictness-opt + .sa-strictness-opt { border-left: 1px solid var(--border-default); }
.sa-strictness-opt:hover:not(:disabled):not(.on) { background: var(--bg-hover); color: var(--fg-1); }
.sa-strictness-opt:disabled { cursor: not-allowed; opacity: 0.6; }
.sa-strictness-opt.on { background: var(--primary-50); color: var(--primary-700); }

.sa-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sa-cancel-btn { margin-left: auto; flex-shrink: 0; }
.sa-error { margin-top: 8px; color: #e5484d; font-size: 12px; }

/* Per-step progress stepper (#221) */
.sa-stepper { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sa-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg-3); }
.sa-step-dot {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-default); background: var(--bg-sunken);
  font-size: 11px; color: var(--fg-4);
}
.sa-step.done { color: var(--fg-2); }
.sa-step.done .sa-step-dot { background: var(--primary-600, #2563eb); border-color: var(--primary-600, #2563eb); color: #fff; }
.sa-step.active { color: var(--fg-1); font-weight: 600; }
.sa-step.active .sa-step-dot { border-color: var(--primary-500, #3b82f6); }
.sa-step.failed { color: #e5484d; font-weight: 600; }
.sa-step.failed .sa-step-dot { background: #e5484d; border-color: #e5484d; color: #fff; }
.sa-step-spin {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--primary-200, #bfdbfe); border-top-color: var(--primary-600, #2563eb);
  animation: ar-spin 0.8s linear infinite;
}
.sa-error-tech { margin-top: 6px; }
.sa-error-tech summary { cursor: pointer; color: var(--fg-4); font-size: 11px; }
.sa-error-tech p {
  margin: 4px 0 0; color: var(--fg-3); font-size: 11px; white-space: pre-wrap; word-break: break-word;
  font-family: var(--font-mono, monospace);
}

/* indeterminate bar while a run is "running" (backend holds progress at 0.05) */
.ar-progress-fill.sa-indeterminate {
  width: 35% !important;
  background: linear-gradient(90deg, transparent, var(--primary-500), transparent);
  animation: sa-slide 1.2s ease-in-out infinite;
}
@keyframes sa-slide {
  0% { margin-left: -35%; }
  100% { margin-left: 100%; }
}

/* variants gallery — responsive tiles */
/* Variants render as a single-row horizontal carousel — Original + Variant 1..N
   stay on one line and scroll sideways instead of wrapping to new rows. */
.sa-gallery {
  margin-top: 14px;
  display: flex; gap: 14px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.sa-variant-card {
  border: 1px solid var(--border-subtle); border-radius: 10px;
  background: var(--bg-surface); overflow: hidden;
  display: flex; flex-direction: column;
  flex: 0 0 240px; scroll-snap-align: start;
}
.sa-variant-img { aspect-ratio: 1 / 1; background: var(--bg-sunken); }
.sa-variant-img img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; display: block; }
.sa-variant-missing {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  color: var(--fg-4); font-size: 12px;
}
.sa-variant-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; font-size: 12px; color: var(--fg-2);
}
.sa-variant-idx { font-weight: 600; color: var(--fg-1); }
.sa-variant-date { margin-left: auto; color: var(--fg-4); font-size: 11px; white-space: nowrap; }
.sa-variant-cost { font-family: var(--font-mono, inherit); }
.sa-variant-compliance { margin-left: auto; color: var(--fg-3); }
.sa-variant-prompt { padding: 0 10px 8px; font-size: 12px; }
.sa-variant-prompt summary { cursor: pointer; color: var(--fg-3); }
.sa-variant-prompt p { margin: 6px 0 0; color: var(--fg-2); white-space: pre-wrap; }
.sa-variant-actions { display: flex; gap: 6px; padding: 0 10px 10px; }
.sa-variant-actions .btn-secondary { height: 28px; padding: 0 10px; font-size: 12px; }
.sa-disabled { opacity: 0.5; cursor: not-allowed; }

/* Per-variant actions (#221) */
.sa-variant-img { position: relative; height: 250px; }
/* Per-image spinner shown over the exact variant(s) being regenerated. */
.sa-variant-regen {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 11px; font-weight: 600;
  backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px);
  pointer-events: none;
}
.sa-variant-card.regenerating { border-color: var(--primary-400, var(--primary-700)); }

/* Facebook full-image fetch (Apify) + clean-original status on the Original card. */
/* In-progress: spinner overlay over the cropped image (same pattern as sa-variant-regen). */
.sa-fetch-overlay {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 8px; text-align: center;
  background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 11px; font-weight: 600;
  backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
  pointer-events: none;
}
.sa-variant-card.fetching { border-color: var(--primary-400, var(--primary-700)); }
/* Done: small green pill, top-left, over the (now full) image. */
.sa-variant-keeper {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.2px; line-height: 1.6;
  background: var(--success-bg, #e7f7ee); color: var(--success-fg, #157347);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
/* Fallback: small amber chip in the meta row when the full image couldn't be fetched. */
.sa-variant-cropped {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px; border-radius: 999px; cursor: help;
  font-size: 10px; font-weight: 600;
  background: var(--warning-bg, #fff4e5); color: var(--warning-fg, #b45309);
}
.sa-variant-actions .btn-secondary.on { background: var(--primary-50); color: var(--primary-700); border-color: var(--primary-400, var(--primary-700)); }

/* ── D2 revert: 🕘 version-history button + popover + size-mismatch badge ─────── */
.sa-size-mismatch { cursor: help; }
.sa-variant-history-wrap { position: relative; display: inline-flex; }
.sa-variant-history {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 8px; font-variant-numeric: tabular-nums;
}
.sa-variant-history[disabled] { opacity: .6; cursor: default; }
.sa-hist-count { font-size: 11px; font-weight: 700; color: var(--fg-3); }
/* position:fixed (set inline from the button's rect) so the overflow:hidden card/gallery
   never clips it; these are the look, not the placement. */
.sa-versions-pop {
  z-index: var(--z-dropdown, 100);
  width: 246px; max-width: calc(100vw - 16px);
  background: var(--bg-surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-lg);
  padding: 8px;
}
.sa-versions-hd {
  margin: 2px 4px 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3);
}
.sa-versions-empty { display: flex; align-items: center; gap: 6px; padding: 8px 4px; font-size: 12px; color: var(--fg-3); }
.sa-ver-row { display: flex; align-items: center; gap: 9px; padding: 6px; border-radius: 9px; }
.sa-ver-row + .sa-ver-row { margin-top: 2px; }
.sa-ver-row.cur { background: var(--bg-sunken); }
.sa-ver-thumb {
  width: 34px; height: 34px; border-radius: 6px; flex: none; object-fit: cover;
  border: 1px solid var(--border-default); background: var(--bg-sunken); display: block;
}
.sa-ver-meta { min-width: 0; flex: 1; }
.sa-ver-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--fg-1); }
.sa-ver-curtag {
  font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--primary-700); background: var(--primary-50); border-radius: 999px; padding: 1px 7px;
}
.sa-ver-sub {
  font-size: 10.5px; color: var(--fg-3); font-family: var(--font-mono, monospace);
  margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sa-ver-revert {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none; height: 26px; padding: 0 10px; font: inherit; font-size: 11.5px; font-weight: 700;
  border: 1px solid var(--border-default); border-radius: 7px;
  background: var(--bg-surface); color: var(--fg-1); cursor: pointer;
}
.sa-ver-revert:hover { border-color: var(--primary-500); color: var(--primary-700); background: var(--primary-50); }
.sa-versions-foot { margin: 8px 4px 2px; font-size: 10.5px; color: var(--fg-4); }
.sa-variant-actions .btn-secondary.danger:hover:not(:disabled) { color: var(--danger-600, #dc2626); border-color: var(--danger-400, #dc2626); }
/* Per-variant Delete button: spinner overlay while the delete + refresh is in flight.
   The label stays in place (visibility:hidden) so the button keeps its size. */
.sa-variant-delete { position: relative; }
.sa-variant-delete.deleting { cursor: default; }
.sa-variant-delete.deleting .sa-variant-delete-label { visibility: hidden; }
.sa-variant-delete-spinner {
  position: absolute; inset: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.sa-regen-box { padding: 0 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.sa-regen-prompt {
  width: 100%; resize: vertical; font: inherit; font-size: 12px; padding: 6px 8px;
  border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-surface); color: var(--fg-1);
}
.sa-regen-actions { display: flex; gap: 6px; }
.sa-regen-actions .btn-primary, .sa-regen-actions .btn-secondary { height: 28px; padding: 0 10px; font-size: 12px; }

/* Per-ad studio card (two-stage selection -> generate) */
.sa-studio-card {
  border: 1px solid var(--border-subtle); border-radius: 10px;
  background: var(--bg-surface); padding: 12px 14px; margin-bottom: 10px;
}
.sa-studio-head { display: flex; align-items: center; gap: 10px; }
.sa-studio-brand { font-weight: 600; font-size: 13px; color: var(--fg-1); }
.sa-studio-score { font-size: 11px; color: var(--fg-3); }
.sa-studio-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--fg-3); }
.sa-studio-status.failed { color: #e5484d; }
.sa-studio-spacer { flex: 1; }
.sa-studio-controls { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; flex-wrap: wrap; }
.sa-studio-variants { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: var(--fg-2); }
.sa-studio-variants input[type="range"] { width: 160px; accent-color: var(--primary-500); }
.sa-studio-variants-n { min-width: 20px; text-align: center; font-family: var(--font-mono, inherit); font-weight: 700; color: var(--fg-1); }
.sa-size-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 0; padding-top: 14px;
  border-top: 1px solid var(--border-subtle, rgba(127,127,127,.16));
}
.sa-size-seg { display: inline-flex; flex: none; border: 1px solid var(--border-default); border-radius: 8px; overflow: hidden; }
.sa-size-seg-btn { background: var(--bg-surface); border: none; border-right: 1px solid var(--border-subtle); padding: 6px 11px; font-size: 12px; font-weight: 600; color: var(--fg-2); cursor: pointer; font-variant-numeric: tabular-nums; }
.sa-size-seg-btn:last-child { border-right: none; }
.sa-size-seg-btn.active { background: var(--primary-500); color: #fff; }
.sa-size-seg-btn:disabled { opacity: .55; cursor: default; }
.sa-studio-error {
  margin: 8px 0; padding: 6px 8px; font-size: 12px;
  color: #b42318; background: #fef3f2; border: 1px solid #fecdca; border-radius: 6px;
}
/* ~2-line "chat" instructions box that sits next to the variants slider. */
.sa-studio-instr { flex: 1 1 240px; width: auto; resize: vertical; min-height: 40px; max-height: 96px; }
.sa-meta-upload { margin-left: auto; width: 26px; height: 26px; }
/* M-of-N variant pick tick (overlay, top-right so it clears the keeper badge). */
.sa-variant-pick {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.92); border-radius: 6px; padding: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); cursor: pointer;
}
.sa-variant-pick input { margin: 0; cursor: pointer; width: 15px; height: 15px; }
/* History creative-select tick sits top-LEFT, matching the researched-ad checkbox (.creative-cbx). */
.sa-variant-pick.sa-pick-left { left: 8px; right: auto; }
.sa-variant-card.picked {
  border-color: var(--primary-500, #3b82f6);
  box-shadow: 0 0 0 2px var(--primary-500, #3b82f6) inset;
}

.sa-empty { padding: 18px 4px; color: var(--fg-3); font-size: 13px; }

/* run history */
.sa-history { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sa-history-row { border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden; }
.sa-history-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  cursor: pointer; font-size: 13px;
}
.sa-history-head:hover { background: var(--bg-hover); }
.sa-history-keyword { font-weight: 600; color: var(--fg-1); }
.sa-history-brand { color: var(--primary-700); font-size: 12px; }
.sa-history-dim { color: var(--fg-3); font-size: 12px; font-family: var(--font-mono, inherit); }
.sa-history-spacer { flex: 1; }
.sa-history-chevron { display: inline-flex; color: var(--fg-3); transition: transform 0.2s ease; }
.sa-history-chevron.up { transform: rotate(180deg); }
/* Collapsible section headers (Selected for Remodelling + History).
   Two toggle affordances share one handler: a leading disclosure caret on the
   title, and a right-aligned "Show N / Hide" pill that names the hidden count. */
.sa-sec-toggle {
  cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.sa-sec-toggle:hover .sa-sec-caret { color: var(--primary-600); }
.sa-sec-toggle:focus-visible,
.sa-sec-pill:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; border-radius: 6px; }
.sa-sec-caret {
  display: inline-flex; color: var(--primary-600);
  transition: transform 0.2s ease; flex-shrink: 0;
}
.sa-sec-caret.open { transform: rotate(180deg); }
.sa-sec-pill {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  background: var(--bg-surface); color: var(--primary-700);
  border: 1px solid var(--primary-500); border-radius: 999px;
  padding: 3px 11px; font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  line-height: 1.5; cursor: pointer; transition: background 0.15s ease;
}
.sa-sec-pill:hover { background: var(--primary-50); }
.sa-sec-pill-caret { display: inline-flex; transition: transform 0.2s ease; }
.sa-sec-pill-caret.open { transform: rotate(180deg); }
/* History date filter, relocated from the header into the expanded body. */
.sa-gallery-filter-body { margin: 2px 14px 12px; }
.sa-history-body { padding: 0 12px 12px; }
.icon-btn.danger:hover { color: #e5484d; }

.sa-badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-sunken); color: var(--fg-3); text-transform: capitalize;
}
.sa-badge.ok { background: #e6f6ec; color: #137333; }
.sa-badge.err { background: #fde8e8; color: #b3261e; }
.sa-badge.warn { background: #fff4e5; color: #9a6700; }
.sa-badge.run { background: var(--primary-50); color: var(--primary-700); }

/* full-size lightbox */
.sa-lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.82);
  display: flex; align-items: center; justify-content: center; padding: 32px;
}
.sa-lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 8px; cursor: default; }
.sa-lightbox-error {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: #fff; font-size: 14px; padding: 40px; text-align: center;
}
.sa-lightbox-close {
  position: absolute; top: 18px; right: 18px;
  background: rgba(255,255,255,0.12); color: #fff; border: 0; border-radius: 8px;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sa-lightbox-close:hover { background: rgba(255,255,255,0.24); }

.sa-candidates { margin-top: 14px; }
.sa-candidates-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sa-candidates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  max-height: 320px;
  overflow: auto;
}
.sa-candidate-card {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-1, #fff);
}
.sa-candidate-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--bg-2); }
.sa-candidate-thumb-empty {
  width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--fg-4); background: var(--bg-2);
}
.sa-candidate-meta { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px 0; font-size: 10px; }
.sa-candidate-platform { text-transform: uppercase; font-weight: 600; color: var(--fg-3); }
.sa-candidate-source.pool { color: var(--primary-600, #2563eb); }
.sa-candidate-source.live { color: var(--fg-4); }
.sa-candidate-score { margin-left: auto; font-weight: 600; }
.sa-candidate-pass { color: #16a34a; font-weight: 600; }
.sa-candidate-copy { padding: 4px 8px 8px; font-size: 11px; color: var(--fg-2); line-height: 1.3; }

@media (max-width: 768px) {
  .sa-gallery { grid-template-columns: 1fr; }
  .sa-form { flex-direction: column; align-items: stretch; }
  .sa-actions { margin-left: 0; }
}

/* ============================== Video Leg =======================   Read-only Leg 4 gallery (Phase A). Mirrors the .sa-* conventions:
   panel cards reuse .search-card, badges echo .sa-badge colors. */
.video-leg-panel { display: flex; flex-direction: column; gap: 14px; }
.vl-card { margin-top: 0; }
.vl-totals { font-size: 12px; color: var(--fg-3); margin-right: 8px; white-space: nowrap; }
.vl-error {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13px;
  background: #fde8e8; color: #b3261e;
}
.vl-empty { padding: 18px 4px; text-align: center; }

/* two-column layout: transcript list | detail */
.vl-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; align-items: start; }
.vl-detail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.vl-list-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.vl-list-row {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 9px 11px; border: 1px solid var(--border-subtle); border-radius: 10px;
  background: transparent; cursor: pointer; text-align: left; width: 100%;
}
.vl-list-row:hover { background: var(--bg-hover); }
.vl-list-row.active { border-color: var(--primary-400, var(--primary-700)); box-shadow: 0 0 0 1px var(--primary-400, var(--primary-700)) inset; }
.vl-list-id {
  font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 600; color: var(--fg-1);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vl-list-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11px; }
.vl-dim { color: var(--fg-3); font-size: 12px; }
.vl-mono { font-family: var(--font-mono, monospace); font-size: 12px; }

.vl-badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-sunken); color: var(--fg-3); text-transform: none;
}
.vl-badge.ok { background: #e6f6ec; color: #137333; }
.vl-badge.err { background: #fde8e8; color: #b3261e; }
.vl-badge.warn { background: #fff4e5; color: #9a6700; }
.vl-badge.run { background: var(--primary-50); color: var(--primary-700); }

/* asset sub-tabs */
.vl-subtabs { display: flex; gap: 6px; margin: 10px 0 12px; flex-wrap: wrap; }
.vl-subtab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-subtle);
  background: transparent; color: var(--fg-2); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.vl-subtab:hover { background: var(--bg-hover); }
.vl-subtab.on { background: var(--primary-50); border-color: var(--primary-400, var(--primary-700)); color: var(--primary-700); }
.vl-subtab-count { font-size: 11px; font-weight: 600; color: var(--fg-3); }
.vl-subtab.on .vl-subtab-count { color: var(--primary-700); }

/* asset + output grids */
.vl-asset-grid, .vl-output-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px;
}
.vl-output-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.vl-asset-card, .vl-output-card {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--border-subtle); border-radius: 10px; padding: 10px;
  background: var(--bg-raised, transparent); min-width: 0;
}
.vl-preview {
  position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden;
  background: var(--bg-sunken); cursor: pointer;
}
.vl-preview img, .vl-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vl-preview-video { cursor: default; }
.vl-preview-missing {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--fg-3); font-size: 11.5px; text-align: center; padding: 8px; cursor: default;
}
.vl-expand {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 26px; height: 26px; border: 0; border-radius: 6px; cursor: pointer;
  background: rgba(0,0,0,0.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.vl-expand:hover { background: rgba(0,0,0,0.75); }
.vl-asset-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vl-chip {
  font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px;
  background: var(--bg-sunken); color: var(--fg-2); font-family: var(--font-mono, monospace);
}
.vl-chip.on { background: var(--primary-50); color: var(--primary-700); font-family: inherit; font-size: 11px; }
.vl-asset-desc summary { font-size: 11.5px; color: var(--fg-3); cursor: pointer; }
.vl-asset-desc p { font-size: 12px; color: var(--fg-2); margin: 6px 0 0; white-space: pre-wrap; }
.vl-asset-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.vl-filename {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mono, monospace); font-size: 10.5px; color: var(--fg-3);
}
a.vl-download { text-decoration: none; font-size: 11.5px; padding: 4px 10px; flex-shrink: 0; }
.vl-show-all { margin-top: 12px; }

/* collapsible sections (step history, costs) */
.vl-section summary { cursor: pointer; }
.vl-section summary .vl-dim { font-weight: 400; }
.vl-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12.5px; }
.vl-table th {
  text-align: left; padding: 6px 8px; color: var(--fg-3); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-subtle);
}
.vl-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); color: var(--fg-2); }
.vl-table tr:last-child td { border-bottom: 0; }

.vl-lightbox-video { max-width: 92vw; max-height: 88vh; border-radius: 8px; }

@media (max-width: 900px) {
  .vl-layout { grid-template-columns: 1fr; }
}

/* ========================= Asset Generation (Phase C) ==================   Builds on the .vl-* primitives; .ag-* covers the selection model + beat
   sections + job strip. */
.ag-preview-text {
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 11.5px;
}
.ag-manual-open { display: flex; gap: 8px; margin-top: 14px; }
.ag-manual-open input {
  flex: 1; padding: 8px 11px; border: 1px solid var(--border-subtle); border-radius: 8px;
  font-family: var(--font-mono, monospace); font-size: 12px;
  background: transparent; color: var(--fg-1);
}

.ag-dryrun {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--fg-3); margin-right: 8px; cursor: pointer; white-space: nowrap;
}

.ag-jobstrip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 9px 12px;
  background: var(--bg-sunken); border-radius: 8px; font-size: 12.5px;
}
.ag-job-error { color: #b3261e; font-size: 12px; }

/* selection model */
.ag-selectable { position: relative; }
.ag-select-toggle {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  width: 24px; height: 24px; border-radius: 7px; cursor: pointer;
  border: 2px solid rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.35); color: transparent;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.ag-select-toggle.on { background: var(--primary-700); color: #fff; }
.ag-select-toggle:disabled { opacity: 0.45; cursor: not-allowed; }
.ag-deselected .vl-preview { opacity: 0.38; filter: grayscale(0.7); }
.ag-deselected .vl-asset-meta, .ag-deselected .vl-asset-desc { opacity: 0.55; }

.vl-subtab-spacer { flex: 1; }
.ag-subtab-off { text-decoration: line-through; opacity: 0.6; }
.ag-group-toggle.off { color: #9a6700; border-color: #f2c76a; }
.ag-group-off-note {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 8px; font-size: 12.5px;
  background: #fff4e5; color: #9a6700;
}

/* beat sections */
.ag-beat { margin-bottom: 22px; }
.ag-beat-header {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px; margin-bottom: 10px;
  background: var(--bg-sunken); border-radius: 10px;
}
.ag-beat-thumb {
  width: 54px; aspect-ratio: 9 / 16; border-radius: 7px; overflow: hidden;
  flex-shrink: 0; cursor: pointer; background: var(--bg-raised, #000);
}
.ag-beat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-beat-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ag-beat-title { font-size: 13px; font-weight: 700; color: var(--fg-1); }
.ag-beat-line { font-size: 12px; color: var(--fg-2); }
.ag-beat-hint { font-size: 11px; }

.ag-chunk { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ag-chunk-text {
  margin: 0; font-size: 11.5px; color: var(--fg-3); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ag-chunk-pending .vl-preview { aspect-ratio: 9 / 16; }

/* ================== Asset Generation — design handoff (.agx-*) ===========   Tokens from docs/design_handoff_video_leg/README.md §7, scoped to the screen
   so the rest of the dashboard is untouched. Fonts map to the app's stacks. */
.agx-screen {
  --agx-brand: #10947F; --agx-brand-hover: #0C7E6C; --agx-brand-soft: #E7F4F1;
  --agx-teal: #10947F; --agx-teal-soft: #E7F4F1;
  --agx-blue: #0060D0; --agx-blue-soft: #E7F0FC;
  --agx-gold: #E69B0D; --agx-gold-soft: #FDF5E4; --agx-gold-deep: #C7820A;
  --agx-ink: #121418; --agx-ink-2: #6D737E; --agx-ink-3: #9AA0AB;
  --agx-border: #E4E6EC; --agx-hover: #EFF0F4; --agx-subtle: #F6F7F9; --agx-card: #FFFFFF;
  --agx-success-fg: #0C7E6C; --agx-success-bg: #E7F4F1;
  --agx-warn-fg: #B3760A; --agx-warn-bg: #FDF5E4;
  --agx-danger-fg: #C0392F; --agx-danger-bg: #FBEAE8;
  --agx-info-fg: #0051B0; --agx-info-bg: #E7F0FC;
  color: var(--agx-ink);
}
.agx-pagehead { margin-bottom: 18px; }
.agx-pagehead h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.agx-pagehead p { font-size: 13px; color: var(--agx-ink-2); margin: 0; max-width: 640px; }
.agx-row { display: flex; align-items: center; }
.agx-col { display: flex; flex-direction: column; }
.agx-sub { font-size: 12px; color: var(--agx-ink-2); }
.agx-mono { font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 600; }
.agx-mono-sub { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--agx-ink-3); }
.agx-money { font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 700; color: var(--agx-gold-deep); }

.agx-btn {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent;
  border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 150ms ease;
  text-decoration: none; font-size: 13px; height: 36px; padding: 0 14px; background: transparent;
}
.agx-btn.sm { height: 30px; padding: 0 11px; font-size: 12.5px; }
.agx-btn.primary { background: var(--agx-brand); color: #fff; }
.agx-btn.primary:hover:not(:disabled) { background: var(--agx-brand-hover); }
.agx-btn.secondary { background: var(--agx-card); color: var(--agx-ink); border-color: var(--agx-border); }
.agx-btn.secondary:hover:not(:disabled) { background: var(--agx-hover); }
.agx-btn.ghost { color: var(--agx-ink-2); }
.agx-btn.ghost:hover:not(:disabled) { background: var(--agx-hover); }
.agx-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.agx-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.agx-badge .agx-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.agx-badge.neutral { background: var(--agx-subtle); color: var(--agx-ink-2); }
.agx-badge.brand { background: var(--agx-brand-soft); color: var(--agx-brand); }
.agx-badge.brand.solid { background: var(--agx-brand); color: #fff; }
.agx-badge.success { background: var(--agx-success-bg); color: var(--agx-success-fg); }
.agx-badge.warning { background: var(--agx-warn-bg); color: var(--agx-warn-fg); }
.agx-badge.danger { background: var(--agx-danger-bg); color: var(--agx-danger-fg); }
.agx-badge.info { background: var(--agx-info-bg); color: var(--agx-info-fg); }

.agx-tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; cursor: pointer; transition: all 150ms ease;
  border: 1px solid var(--agx-border); background: var(--agx-card); color: var(--agx-ink-2);
}
.agx-tag:hover { background: var(--agx-hover); }
.agx-tag.on { background: var(--agx-brand-soft); border-color: var(--agx-brand); color: var(--agx-brand); }

.agx-card { background: var(--agx-card); border: 1px solid var(--agx-border); border-radius: 12px; }
.agx-card-sel { border-color: color-mix(in srgb, var(--agx-brand) 38%, var(--agx-border)); }

.agx-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 600; }
.agx-check input { accent-color: var(--agx-brand); width: 15px; height: 15px; cursor: pointer; }
.agx-check.disabled { opacity: 0.5; cursor: not-allowed; }
.agx-check.disabled input { cursor: not-allowed; }

.agx-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--agx-subtle); border: 1px solid var(--agx-border); border-radius: 10px; }
.agx-seg-opt {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border: 0;
  cursor: pointer; border-radius: 7px; font-size: 12.5px; font-weight: 600;
  background: transparent; color: var(--agx-ink-2); transition: all 150ms ease;
}
.agx-seg-opt.on { background: var(--agx-card); color: var(--agx-ink); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.agx-seg-lock { color: var(--agx-brand); }

.agx-thumb {
  position: relative; width: 100%; border-radius: 12px; overflow: hidden; flex: none;
  background: linear-gradient(160deg, #2A2E37, #14161B); border: 1px solid var(--agx-border);
  display: flex; align-items: center; justify-content: center;
}
.agx-thumb img, .agx-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.agx-thumb-glyph { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; }
.agx-thumb-label { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; color: rgba(255,255,255,.9); font-size: 11px; font-weight: 600; cursor: pointer; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.agx-thumb-dur { position: absolute; right: 10px; bottom: 10px; font-family: var(--font-mono, monospace); font-size: 10px; color: #fff; background: rgba(0,0,0,.45); padding: 2px 6px; border-radius: 999px; }
.agx-thumb-badge { position: absolute; right: 10px; top: 10px; }

.agx-lockicon { width: 40px; height: 40px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--agx-success-bg); color: var(--agx-success-fg); }
.agx-script-text { font-size: 14px; font-weight: 500; margin: 0; }
.agx-pick { text-align: left; cursor: pointer; padding: 14px; border-radius: 12px; background: var(--agx-card); border: 1.5px solid var(--agx-border); transition: all 150ms ease; width: 100%; }
.agx-pick:hover { background: var(--agx-hover); }
.agx-pick.on { background: var(--agx-brand-soft); border-color: var(--agx-brand); }
.agx-pick-text { font-size: 13px; color: var(--agx-ink-2); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agx-manual { display: flex; gap: 8px; margin-top: 4px; }
.agx-manual input { flex: 1; padding: 9px 12px; border: 1px solid var(--agx-border); border-radius: 10px; font-family: var(--font-mono, monospace); font-size: 12px; background: var(--agx-subtle); }
.agx-paste { width: 100%; padding: 10px 12px; border: 1px solid var(--agx-border); border-radius: 10px; font-size: 13px; background: var(--agx-card); resize: vertical; box-sizing: border-box; }
.agx-dropzone-wrap { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.agx-dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 34px 24px;
  border: 1.5px dashed var(--agx-ink-3); border-radius: 16px; background: var(--agx-subtle);
}
.agx-drop-icon { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--agx-card); border: 1px solid var(--agx-border); color: var(--agx-ink-2); }

.agx-avatar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.agx-avatar-pick { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 18px 10px; }
.agx-avatar-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.agx-avatar-img.lg { width: 64px; height: 64px; }
.agx-avatar-fallback { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--agx-brand-soft); color: var(--agx-brand); font-weight: 700; text-transform: uppercase; }
.agx-avatar-fallback.lg { width: 64px; height: 64px; }

.agx-subtabs { display: flex; gap: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--agx-border); }
.agx-subtab {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 6px; margin-bottom: -1px; border: 0;
  background: transparent; cursor: pointer; border-bottom: 2px solid transparent;
  color: var(--agx-ink-2); font-weight: 600; font-size: 14px; transition: color 150ms ease;
}
.agx-subtab.on { border-bottom-color: var(--agx-brand); color: var(--agx-brand); }

.agx-asset-grid { display: grid; grid-template-columns: 320px 1fr; }
.agx-asset-left { padding: 16px; border-right: 1px solid var(--agx-hover); }
.agx-asset-right { padding: 16px; display: flex; flex-direction: column; background: var(--agx-subtle); border-radius: 0 12px 12px 0; }
.agx-kind-ic { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }

.agx-jobstrip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding: 9px 12px; background: var(--agx-subtle); border: 1px solid var(--agx-border); border-radius: 10px; font-size: 12.5px; }
.agx-note { padding: 10px 12px; border-radius: 10px; font-size: 12.5px; background: var(--agx-subtle); color: var(--agx-ink-2); border: 1px solid var(--agx-border); }
.agx-note.warn { background: var(--agx-warn-bg); color: var(--agx-warn-fg); border-color: transparent; }
.agx-note.danger { background: var(--agx-danger-bg); color: var(--agx-danger-fg); border-color: transparent; }
.agx-note-inline { color: var(--agx-danger-fg); font-size: 12px; }

@media (max-width: 980px) {
  .agx-asset-grid { grid-template-columns: 1fr; }
  .agx-asset-left { border-right: 0; border-bottom: 1px solid var(--agx-hover); }
  .agx-avatar-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Swipe File (user-facing) — per-acquisition-platform list of saved ads. */
.swipe-file-panel { display: flex; flex-direction: column; gap: 4px; }
.swipe-file-platform-group { margin-top: 8px; }
.swipe-file-view-more .btn-secondary {
  font-size: 12px; padding: 6px 16px; border-radius: 999px;
}
/* Legacy date-group rules retained for backward compatibility. */
.swipe-file-day-group { margin-top: 8px; }
.swipe-file-day-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 6px;
  position: sticky; top: 0; z-index: 2;
  background: var(--bg, #fff);
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}
.swipe-file-day-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--fg-2, #555);
}
.swipe-file-day-count {
  font-size: 11px; font-weight: 600; color: var(--fg-3, #888);
  background: rgba(0,0,0,0.05); padding: 1px 8px; border-radius: 999px;
}

/* ── Multi-product selector — standalone top-of-page card ────────────────── */
.sa-product-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
}
/* ── BYO Ad: upload a competitor ad the crawl never found ──────────────────────
   Trails the product/size controls in the global bar (it is run-scoped like they are)
   and pushes right, so it reads as an action rather than another setting. */
.sa-byo-btn {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 15px;
  background: var(--bg-surface); color: var(--primary-700);
  border: 1.5px solid var(--primary-500); border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background 120ms var(--ease-standard);
}
.sa-byo-btn:hover { background: var(--primary-50); }
.sa-byo-btn input[type="file"] { display: none; }
/* Disabled while a crawl is live: candidates are rebuilt wholesale during research, so an
   upload made now would be dropped within seconds. The server returns 409 on the same rule. */
.sa-byo-btn.disabled {
  opacity: .45; cursor: not-allowed;
  border-color: var(--border-strong); color: var(--fg-3);
}
.sa-byo-btn.disabled:hover { background: var(--bg-surface); }

/* Origin tag for an uploaded ad — centred on and straddling the studio card's top edge so
   it labels the whole card rather than the Original tile alone. The card itself carries the
   same amber so the whole rectangle reads as "not from the pool" at a glance, not just the
   pill. box-shadow rather than a thicker border, so it gains weight without a 1px reflow. */
.sa-studio-card.byo {
  position: relative;
  margin-top: 26px;
  border-color: var(--accent-500, #e69a0c);
  box-shadow: 0 0 0 1px var(--accent-500, #e69a0c);
  background: color-mix(in srgb, var(--accent-500, #e69a0c) 4%, var(--bg-surface));
}
.sa-byo-tag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  display: inline-flex; align-items: center;
  padding: 7px 20px; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  background: var(--accent-500, #e69a0c); color: #1f1503;
  border: 2px solid var(--bg-surface);
  box-shadow: 0 3px 12px rgba(10, 14, 20, .28);
}

.sa-product-card-info { min-width: 150px; flex: none; }
.sa-product-card-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
}
.sa-product-dot { width: 8px; height: 8px; border-radius: 999px; background: #7A3FB0; flex: none; }
.sa-product-card-sub { font-size: 11.5px; color: var(--fg-3, #98A1AD); margin-top: 2px; }
.sa-product-tiles { display: flex; flex-wrap: wrap; gap: 14px; }
.sa-product-tile {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  flex: 1 1 160px;
  max-width: 260px;
  padding: 16px 12px;
  border-radius: 14px;
  border: 1.5px solid var(--border-default);
  background: transparent;
  color: var(--fg-2, inherit);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.sa-product-tile:hover { border-color: var(--border-strong, var(--border-default)); color: var(--fg, inherit); }
.sa-product-tile.active {
  border-color: var(--accent, #0FB5A8);
  background: color-mix(in srgb, var(--accent, #0FB5A8) 8%, transparent);
  color: var(--fg, inherit);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #0FB5A8) 18%, transparent);
}
.sa-product-tile:disabled { opacity: .45; cursor: not-allowed; }
.sa-product-tile-frame {
  width: 100%; height: 160px; border-radius: 10px; overflow: hidden; flex: none;
  border: 1px solid rgba(0,0,0,.15);
  display: inline-flex; align-items: center; justify-content: center;
}
.sa-product-thumb { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; padding: 5px; }
.sa-product-tile-name { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.3; }
.sa-product-tile-default {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--fg-3, #98A1AD);
}
.sa-product-tile-check {
  position: absolute; top: -7px; right: -7px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent, #0FB5A8); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.sa-studio-product { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.sa-studio-product > span:first-child { font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.sa-studio-product select { font: inherit; font-size: 12.5px; padding: 4px 6px; border-radius: 7px; border: 1px solid var(--border-default, rgba(127,127,127,.3)); background: transparent; color: inherit; }
.sa-studio-product-thumb {
  width: 20px; height: 24px; object-fit: contain; border-radius: 3px; flex: none;
  background: #fff; border: 1px solid var(--border-default, rgba(127,127,127,.25));
}
.sa-product-batch { font-size: 10.5px; opacity: .65; white-space: nowrap; }

/* ── "Product and their gifts" — per-ad references tray (option D) ───────── */
.sa-refs-handle {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px;
  border: 1px solid var(--border-default, rgba(127,127,127,.25));
  background: var(--bg-inset, rgba(127,127,127,.06));
  border-radius: 9px; padding: 8px 12px;
  font: inherit; font-size: 12px; font-weight: 650; color: var(--fg-2, inherit);
  cursor: pointer;
}
.sa-refs-handle:hover { color: var(--fg, inherit); border-color: var(--border-strong, rgba(127,127,127,.4)); }
.sa-refs-car { display: inline-flex; transition: transform .18s; }
.sa-refs-car.open { transform: rotate(180deg); }
.sa-refs-hint { margin-left: auto; font-weight: 400; color: var(--fg-3, #98A1AD); font-size: 11.5px; }
.sa-refs-tray {
  margin-top: 10px; border: 1.5px dashed var(--accent, #0FB5A8); border-radius: 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--accent, #0FB5A8) 4%, transparent);
}
.sa-refs-hd { display: flex; align-items: baseline; gap: 9px; font-size: 12.5px; font-weight: 700; color: var(--accent, #0FB5A8); }
.sa-refs-cap { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--fg-3, #98A1AD); }
.sa-refs-sub { font-size: 12px; color: var(--fg-2, inherit); margin: 4px 0 11px; max-width: 560px; }
.sa-refs-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: stretch; }
.sa-ref-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--bg-surface, transparent); border: 1px solid var(--border-default, rgba(127,127,127,.25));
  border-radius: 10px; padding: 7px 9px;
}
.sa-ref-thumb { width: 34px; height: 40px; object-fit: cover; border-radius: 6px; background: #fff; flex: none; }
.sa-ref-meta { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sa-ref-name { font-size: 11.5px; font-weight: 600; font-family: var(--font-mono, ui-monospace, monospace); max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-ref-meta select { font: inherit; font-size: 10.5px; color: var(--fg-2, inherit); background: transparent; border: 1px solid var(--border-default, rgba(127,127,127,.3)); border-radius: 5px; padding: 1px 4px; }
.sa-ref-x { border: 0; background: transparent; color: var(--fg-3, #98A1AD); font-size: 15px; cursor: pointer; padding: 2px 4px; }
.sa-ref-x:hover { color: #C24A16; }
.sa-ref-add {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 120px; border: 1.5px dashed var(--border-strong, rgba(127,127,127,.4));
  border-radius: 10px; padding: 10px 12px;
  font-size: 11.5px; font-weight: 600; color: var(--fg-3, #98A1AD); cursor: pointer;
}
.sa-ref-add:hover { color: var(--accent, #0FB5A8); border-color: var(--accent, #0FB5A8); }
.sa-ref-add.busy { opacity: .6; cursor: progress; }
.sa-ref-add-plus { font-size: 17px; line-height: 1; }
.sa-refs-capmsg { align-self: center; font-size: 11px; color: #C24A16; }

/* ── tray v2: Products / Their gifts sections ────────────────────────────── */
.sa-refs-sec-hd {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--fg-2, inherit); margin: 12px 0 7px;
}
.sa-refs-sec-hd.gifts { color: var(--fg-3, #98A1AD); }
.sa-refs-cat-tile {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px; border-radius: 10px;
  border: 1.5px solid var(--border-default, rgba(127,127,127,.25));
  background: var(--bg-surface, transparent); color: var(--fg-2, inherit);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.sa-refs-cat-tile:hover { border-color: var(--border-strong, rgba(127,127,127,.4)); color: var(--fg, inherit); }
.sa-refs-cat-tile.active {
  border-color: var(--accent, #0FB5A8);
  background: color-mix(in srgb, var(--accent, #0FB5A8) 8%, transparent);
  color: var(--fg, inherit);
}
.sa-refs-cat-tile:disabled { opacity: .45; cursor: not-allowed; }
.sa-refs-cat-thumb { width: 26px; height: 32px; object-fit: cover; border-radius: 5px; background: #fff; border: 1px solid rgba(0,0,0,.12); }
.sa-refs-cat-check {
  position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent, #0FB5A8); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.sa-ref-chip.hero { border-color: var(--accent, #0FB5A8); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #0FB5A8) 18%, transparent); }
.sa-ref-hero-toggle {
  border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer;
  font: inherit; font-size: 10.5px; font-weight: 650; color: var(--fg-3, #98A1AD);
}
.sa-ref-hero-toggle:hover { color: var(--accent, #0FB5A8); }
.sa-ref-hero-toggle.on { color: var(--accent, #0FB5A8); }
.sa-ref-hero-toggle:disabled { cursor: not-allowed; opacity: .6; }
.sa-ref-gift-tag { font-size: 10.5px; color: var(--fg-3, #98A1AD); }
.sa-ref-add.disabled { opacity: .5; cursor: not-allowed; }
.sa-ref-add.disabled:hover { color: var(--fg-3, #98A1AD); border-color: var(--border-strong, rgba(127,127,127,.4)); }
.sa-ref-add-soon { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3, #98A1AD); }

.sa-ref-dormant { font-size: 9.5px; color: var(--fg-3, #98A1AD); font-style: italic; }

.sa-refs-status {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px; padding: 2px 9px 2px 3px;
  border: 1px solid var(--border-default, rgba(127,127,127,.25));
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: var(--fg, inherit);
  background: var(--bg-surface, transparent);
}
.sa-refs-status-thumb { width: 16px; height: 20px; object-fit: cover; border-radius: 3px; background: #fff; }
.sa-refs-status.gifts { padding: 2px 9px; color: var(--fg-2, inherit); }
.sa-refs-status.gifts.none { color: var(--fg-3, #98A1AD); font-weight: 500; border-style: dashed; }

/* =====================================================   Animation Ads (design concept, frontend only) — AnimationAdsPanel.jsx.
   New `.an-*` prefix to avoid colliding with any other flow's classes.
   Uses the same --rd-* tokens as the rest of the redesign.
   ============================================================ */
.an-card {
  background: var(--rd-surface, var(--bg-surface));
  border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: var(--rd-radius-card, 14px);
  padding: 20px 22px;
  margin-bottom: 16px;
}
/* Two soft pulses of the accent color around a card that just became the
   thing to look at (e.g. the ad-name bar + script card right after "Start a
   new one") — a nudge, not a persistent state, so it's driven by a
   self-clearing flag rather than a CSS class the component controls long-term. */
.an-attention-pulse { animation: an-attention-pulse 1.1s ease-in-out 2; }
@keyframes an-attention-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-500) 0%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary-500) 30%, transparent); }
}
.an-card-title { font-size: 15px; font-weight: 700; margin: 0 0 10px; color: var(--rd-ink-1, var(--fg-1)); }
.an-card-sub { font-size: 13px; color: var(--rd-ink-3, var(--fg-2)); margin: 0 0 16px; }
.an-card-hdr-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.an-field-label { display: block; font-size: 12px; font-weight: 600; color: var(--rd-ink-3, var(--fg-2)); margin-bottom: 6px; }
.an-hint { font-size: 12px; color: var(--rd-ink-4, var(--fg-3)); }

.an-example-trigger {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: var(--rd-radius-pill, 999px);
  color: var(--rd-teal-ink, var(--fg-brand));
  font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 120ms var(--ease-standard, ease), border-color 120ms var(--ease-standard, ease);
}
.an-example-trigger:hover { background: var(--rd-teal-tint); border-color: var(--rd-teal-border, var(--rd-line-2)); }
.an-script-example-modal { overflow: hidden; }
.an-script-guide-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--rd-line-2, var(--border-subtle)); flex-shrink: 0; }
.an-script-guide-tab {
  padding: 8px 4px 10px;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--rd-ink-3, var(--fg-2));
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.an-script-guide-tab.on { color: var(--rd-teal-ink); border-bottom-color: var(--rd-teal); }
/* Scroll region shared by both tabs — the modal shell itself doesn't scroll
   (an-script-example-modal is overflow:hidden), so this is the one place
   that does, keeping the header/tabs/footer fixed while the content scrolls. */
.an-script-example-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}
.an-pattern-arc { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--rd-ink-2, var(--fg-2)); }
.an-pattern-arc li { margin-bottom: 2px; }
.an-pattern-formula {
  margin: 14px 0;
  padding: 10px 12px;
  background: var(--rd-panel, var(--bg-sunken));
  border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: var(--rd-radius-ctrl, 8px);
  font-family: var(--rd-font-mono, monospace);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--rd-ink-3, var(--fg-2));
  line-height: 1.6;
}
.an-pattern-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.an-pattern-step { display: flex; gap: 12px; align-items: flex-start; }
.an-pattern-step-n {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
  font-size: 11px; font-weight: 700;
}
.an-pattern-step-title { font-size: 13.5px; font-weight: 700; color: var(--rd-ink-1, var(--fg-1)); margin-bottom: 2px; }
.an-pattern-step-body { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--rd-ink-3, var(--fg-2)); }
.an-pattern-step-example { margin: 4px 0 0; font-size: 12px; font-style: italic; color: var(--rd-ink-4, var(--fg-3)); }
.an-script-template-textarea { min-height: 320px; line-height: 1.6; }
.an-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.an-col { flex: 1; min-width: 220px; }

.an-regen-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 16px;
}
.an-regen-panel .an-card-sub { margin-bottom: 12px; }
.an-regen-panel .an-field-label { display: block; margin-bottom: 6px; }
.an-regen-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 96px;
  margin-bottom: 12px;
}
.an-regen-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.an-textarea, .an-input, .an-select {
  width: 100%; font-family: inherit; font-size: 13px; color: var(--rd-ink-1, var(--fg-1));
  border: 1px solid var(--rd-line-3, var(--border-default)); border-radius: var(--rd-radius-ctrl, 8px);
  padding: 9px 12px; background: var(--rd-surface, var(--bg-surface));
}
.an-textarea { resize: vertical; min-height: 60px; }
/* TinyMCE (window.RichTextArea in shared.jsx) renders its own chrome —
   toolbar, iframe, statusbar — so this wrapper only needs to round off the
   whole thing to match the app's other fields; the editor's own border
   would otherwise be a sharp rectangle sitting inside a rounded card. */
.an-script-richtext { border-radius: var(--rd-radius-ctrl, 8px); overflow: hidden; border: 1px solid var(--rd-line-3, var(--border-default)); }
.an-script-richtext .tox-tinymce { border: 0; border-radius: 0; }
/* Pushes the last toolbar group (fullscreen/code/help — utility controls,
   not text formatting) to the right edge, separating it from the
   formatting buttons instead of it just trailing after them. */
.an-script-richtext .tox-toolbar__group:last-child { margin-left: auto; }
.an-script-textarea-meta {
  margin-top: 6px;
  text-align: right;
  font-size: 11.5px;
  color: var(--rd-ink-4, var(--fg-3));
  font-variant-numeric: tabular-nums;
}
.an-select { height: 40px; appearance: none; }

.an-field-label-icon { vertical-align: -2px; margin-right: 5px; color: var(--rd-ink-3, var(--fg-2)); }

.an-input-icon-wrap { position: relative; }
.an-input-icon-wrap .an-input-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--rd-ink-4, var(--fg-3)); pointer-events: none;
}
.an-input-has-icon { padding-left: 36px; }

.an-multiselect { position: relative; }
.an-multiselect-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left; cursor: pointer;
}
.an-multiselect-caret { color: var(--rd-ink-4, var(--fg-3)); font-size: 11px; }
.an-multiselect-panel {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 260px; overflow-y: auto;
  background: var(--rd-surface, var(--bg-surface));
  border: 1px solid var(--rd-line-3, var(--border-default)); border-radius: var(--rd-radius-ctrl, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 6px;
}
.an-multiselect-option {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px;
  font-size: 13px; color: var(--rd-ink-1, var(--fg-1)); cursor: pointer;
}
.an-multiselect-option:hover { background: var(--rd-line-1, var(--bg-hover)); }
.an-multiselect-option input { margin: 0; }
.an-multiselect-divider { height: 1px; background: var(--rd-line-2, var(--border-subtle)); margin: 4px 2px; }

.an-panel-footer { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 24px; }
/* Opt-in white panel card for a footer that sits directly on the page
   background (not nested in an .an-card), instead of floating transparent. */
.an-panel-footer-panel {
  padding: 12px 14px; background: var(--rd-panel, #fff); border-radius: var(--rd-radius-card, 14px);
}
.an-panel-footer-btn { height: 42px; padding: 0 18px; font-size: 14px; }

.an-choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.an-choice-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  border: 1.5px solid var(--rd-line-3, var(--border-default)); border-radius: var(--rd-radius-ctrl, 8px);
  padding: 14px; background: var(--rd-surface, var(--bg-surface)); text-align: left; cursor: pointer;
  transition: border-color 120ms var(--ease-standard, ease), background 120ms var(--ease-standard, ease);
}
/* Every one of these option grids (Visual style, Product, Pacing, Video
   quality, Orientation…) is a plain <button> with no hover feedback at
   all — this is the same generic teal-border-plus-tint hover the rest of
   the app already uses for clickable card blocks (see .an-asset:hover),
   applied here once so it's consistent everywhere .an-choice-card is used
   instead of each screen needing its own hover rule. */
.an-choice-card:hover:not(.selected) {
  border-color: var(--rd-teal);
  background: color-mix(in srgb, var(--rd-teal-tint) 55%, var(--rd-surface, var(--bg-surface)));
}
.an-choice-card.selected {
  border-color: var(--rd-teal); background: var(--rd-teal-tint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-teal) 15%, transparent);
}
.an-choice-icon { color: var(--rd-teal-ink); }
/* Product thumbnail, in the slot the glyph would occupy. `contain` because a pack shot must not
   be cropped -- the label is what identifies it -- and the tinted pad keeps a transparent cutout
   visible in both themes instead of vanishing against the card. */
.an-choice-thumb {
  width: 100%; height: 92px; object-fit: contain;
  border-radius: var(--rd-radius-ctrl, 8px);
  background: var(--rd-surface-2, var(--bg-subtle)); padding: 6px;
}
.an-product-cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.an-product-card { padding: 0; gap: 0; cursor: default; }
.an-product-card-pick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  width: 100%; padding: 14px; border: 0; background: transparent;
  text-align: left; cursor: pointer; color: inherit;
}
.an-product-card .an-choice-thumb { height: 140px; }
.an-product-card .an-choice-desc {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.an-product-card-actions {
  display: flex; gap: 8px; padding: 0 12px 12px;
}
.an-product-card-action {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: transparent; padding: 0;
  font-size: 12px; font-weight: 600; color: var(--rd-teal-ink, var(--rd-teal));
  cursor: pointer;
}
.an-product-card-action-danger { color: var(--rd-danger-fg, #B3261E); }
.an-product-upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.an-product-upload-btn { cursor: pointer; }
/* Full-size reference image viewer — sized to the image itself (capped to the
   viewport) rather than a fixed dialog width, since a still can be any aspect ratio. */
.an-image-modal {
  width: auto; max-width: 92vw; max-height: 92vh; padding: 8px;
  display: flex; align-items: center; justify-content: center;
}
.an-image-modal-img { display: block; max-width: 100%; max-height: calc(92vh - 16px); border-radius: 6px; }

.an-product-modal { width: min(460px, 94vw); max-height: 88vh; overflow-y: auto; padding: 28px; }
.an-spend-modal-actions {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rd-line-2, var(--border-subtle));
}
.an-spend-modal-actions .btn-primary,
.an-spend-modal-actions .btn-secondary { height: 42px; padding: 0 20px; font-size: 14px; }
.an-product-modal-lead {
  margin: 0 0 14px; font-size: 13px; line-height: 1.45;
  color: var(--rd-ink-3, var(--fg-2));
}
.an-product-modal-file {
  display: block; margin: 0 0 14px; cursor: pointer;
  border: 1.5px dashed var(--rd-teal-border, var(--rd-line-3, var(--border-default)));
  border-radius: var(--rd-radius-ctrl, 8px);
  background: var(--rd-teal-tint);
  overflow: hidden;
  transition: border-color 120ms var(--ease-standard, ease), background 120ms var(--ease-standard, ease);
}
.an-product-modal-file:hover { background: color-mix(in srgb, var(--rd-teal-tint) 70%, var(--rd-surface, #fff)); }
.an-product-modal-file input { display: none; }
.an-product-modal-preview {
  display: block; width: 100%; height: 140px; object-fit: contain;
  padding: 10px; background: var(--rd-surface-2, var(--bg-subtle));
}
.an-product-modal-file-empty {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 88px; font-size: 13px; font-weight: 700;
  color: var(--rd-teal-ink);
}
.an-product-modal-field { display: grid; gap: 6px; margin: 0 0 12px; }
.an-product-modal-field span {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--rd-ink-4, var(--fg-3));
}
.an-product-modal-field input,
.an-product-modal-field textarea {
  width: 100%; border: 1px solid var(--rd-line-3, var(--border-default));
  border-radius: var(--rd-radius-ctrl, 8px); padding: 9px 11px;
  font: inherit; color: var(--rd-ink-1, var(--fg-1));
  background: var(--rd-surface, var(--bg-surface));
}
.an-product-modal-check {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 2px 0 12px; font-size: 13px; color: var(--rd-ink-2, var(--fg-1));
  cursor: pointer;
}
.an-product-modal-check input { margin-top: 2px; }
.an-choice-title { font-weight: 700; font-size: 13px; color: var(--rd-ink-1, var(--fg-1)); }
.an-choice-desc { font-size: 12px; color: var(--rd-ink-3, var(--fg-2)); }

.an-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rd-line-2, var(--border-subtle)); cursor: pointer; }
.an-toggle-row:last-child { border-bottom: none; }
.an-toggle-copy { display: grid; gap: 2px; }
.an-toggle-title { font-size: 13px; font-weight: 600; color: var(--rd-ink-1, var(--fg-1)); }
.an-toggle-desc { font-size: 12px; color: var(--rd-ink-4, var(--fg-3)); }
.an-toggle { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; }
.an-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.an-toggle-track { position: absolute; inset: 0; background: var(--rd-line-3, var(--border-default)); border-radius: 999px; transition: .15s; }
.an-toggle-track::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.an-toggle.on .an-toggle-track { background: var(--rd-teal); }
.an-toggle.on .an-toggle-track::before { transform: translateX(16px); }

.an-brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.an-brief-field { border: 1px solid var(--rd-line-2, var(--border-subtle)); border-radius: var(--rd-radius-ctrl, 8px); padding: 12px 14px; }
/* The pre-save summary specifically -- four narrower columns instead of two
   wide ones, since these values are short labels, not full sentences. */
.an-brief-grid-compact { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .an-brief-grid-compact { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .an-brief-grid-compact { grid-template-columns: 1fr; } }
.an-brief-k { font-size: 11px; color: var(--rd-ink-4, var(--fg-3)); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.an-brief-v { font-size: 13px; color: var(--rd-ink-1, var(--fg-1)); }

.an-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 10px; font-size: 11.5px; font-weight: 600; }
.an-pill-teal { background: var(--rd-teal-tint); color: var(--rd-teal-ink); }
/* The two rules a token fix cannot reach, because they name colours directly rather than through the
   --rd-* family. Both were invisible in dark mode: a pale pink pill, and a white caption strip. */
.an-pill-red { background: #FEF2F2; color: #B42318; border: 1px solid #FECACA; }
[data-theme="dark"] .an-pill-red {
  background: rgba(180, 35, 24, 0.18); color: #ffb4aa; border-color: rgba(255, 180, 170, 0.3);
}
.an-pill-amber { background: var(--rd-warning-bg, #F9F3E7); color: var(--rd-warning-fg, #B8802A); border: 1px solid var(--rd-warning-bd, #EAD9B6); }
.an-pill-gray { background: var(--rd-panel, var(--bg-sunken)); color: var(--rd-ink-3, var(--fg-2)); border: 1px solid var(--rd-line-3, var(--border-default)); }

/* Selectable pills for the strategist's product slice. These replaced four free-text
   boxes: three could not match anything, and the fourth needed the SKU spelled exactly,
   so a typo read as "this product has no briefs" rather than as a typo. */
.an-choice-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.an-pill-choice {
  cursor: pointer; padding: 7px 12px; font-size: 12.5px;
  background: var(--rd-surface, var(--bg-surface)); color: var(--rd-ink-2, var(--fg-1));
  border: 1px solid var(--rd-line-3, var(--border-default));
  transition: border-color .12s ease, background .12s ease;
}
.an-pill-choice:hover { border-color: var(--rd-teal-ink, var(--accent)); }
.an-pill-choice.selected {
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
  border-color: var(--rd-teal-ink); font-weight: 700;
}
.an-pill-count {
  font-variant-numeric: tabular-nums; font-weight: 600; opacity: .62; font-size: 11px;
  padding-left: 2px;
}

.an-upload-well {
  display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 16px;
  border: 1.5px dashed var(--rd-line-3, var(--border-default)); border-radius: var(--rd-radius-ctrl, 8px);
  color: var(--rd-ink-3, var(--fg-2)); font-size: 13px;
}

.an-shot-row { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--rd-line-2, var(--border-subtle)); border-radius: var(--rd-radius-ctrl, 8px); padding: 12px; background: var(--rd-surface, var(--bg-surface)); }
/* Clip review card: an `.an-shot-row` with the two-column media/content split — kept as a
   modifier rather than redefining `.an-shot-row` itself, since the storyboard card
   (AnShotCard) uses the same base class with a different, single-thumb shape and must not
   pick up a grid meant for this card. Media (video/thumb + reference still) on the left,
   everything you'd read or type on the right, so the prompt field gets its own width
   instead of squeezing in under a full-bleed video. Falls back to a stacked column below
   the width where two columns would just be narrow (see the max-width query further down). */
.an-shot-row.an-clip-card {
  display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 14px;
  align-items: stretch; border-radius: var(--rd-radius-card, 14px); padding: 12px;
}
.an-shot-media { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.an-shot-thumb {
  flex: none; width: 96px; height: 64px; border-radius: 6px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; position: relative;
  background: repeating-linear-gradient(135deg, var(--rd-line-2, #EEF0F2), var(--rd-line-2, #EEF0F2) 10px, var(--rd-panel, #E7E9EC) 10px, var(--rd-panel, #E7E9EC) 20px);
  color: var(--rd-ink-4, var(--fg-3));
}
/* The review card's own thumb/video column is full-width in its ~260px rail, not the
   148x100 fixed size `.an-shot-list .an-shot-thumb` sets for the (unrelated) storyboard
   list it also styles — scoped past it with an extra class so the two never fight. */
.an-shot-row .an-shot-media .an-shot-thumb { width: 100%; height: 260px; border-radius: 8px; }
/* AnShotCard's (Storyboard) text column, in the plain flex .an-shot-row it uses — takes
   the remaining row width next to the fixed-size thumbnail. Unrelated to the clip-review
   card's own .an-shot-content, which replaces this role under the .an-clip-card grid. */
.an-shot-meta { flex: 1; min-width: 0; }
.an-shot-time { position: absolute; bottom: 4px; left: 4px; right: 4px; font-size: 10px; background: rgba(255,255,255,.85); border-radius: 4px; padding: 1px 4px; text-align: center; color: var(--rd-ink-3, var(--fg-2)); }
/* A duration caption sits ON the thumbnail, so it needs a scrim that contrasts with the PICTURE, not
   with the page — which is why it cannot come from the surface tokens in either theme. */
[data-theme="dark"] .an-shot-time { background: rgba(0, 0, 0, .66); color: #eef0f3; }
/* Video / First frame — two tabs over ONE media frame, replacing the 22px reference chip
   that used to sit in the tag row. The chip was too small to actually inspect, which is
   the whole reason someone opens the still: to check the clip against the frame it was
   animated from. A modifier on the existing .an-subtabs/.an-subtab pair rather than a
   second segmented control, so it inherits the panel's pill styling for free. */
.an-shot-viewtabs { margin: 0 0 6px; padding-bottom: 0; border-bottom: none; gap: 4px; }
.an-shot-viewtabs .an-subtab { padding: 4px 10px; font-size: 11.5px; gap: 5px; }
/* The still overlays the frame the <video> already sized — which is what makes flipping
   between the two tabs cost ZERO layout shift, rather than depending on two boxes being
   given matching heights by hand. .an-shot-video-wrap is already position:relative.
   object-fit:contain, not cover: a reviewer comparing a frame to a clip must see the
   whole frame, uncropped, even where its aspect differs from the video's. */
.an-shot-frame-still {
  position: absolute; inset: 0; padding: 0; border: 0; background: #000;
  border-radius: var(--rd-radius-ctrl, 8px); cursor: zoom-in; overflow: hidden;
}
.an-shot-frame-still img { width: 100%; height: 100%; object-fit: contain; display: block; }
.an-shot-content { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* The content column (tags/description/prompt) stretches to the media column's height
   (align-items: stretch above), so the prompt box GROWS to fill whatever the capped
   video leaves rather than sitting in a fixed box with a dead gap above it. flex:1 +
   min-height:0 is what makes a flex child fill leftover space in a column layout
   instead of only taking its content's natural size. Also inherited by AnShotCard
   (Storyboard), where it is inert — .an-shot-meta is not a flex container. */
.an-shot-prompt {
  font-size: 13px; color: var(--rd-ink-1, var(--fg-1)); margin: 0; line-height: 1.6;
  flex: 1; min-height: 0; overflow-y: auto;
}
.an-shot-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* The prompt + Regenerate button read as one action area, not a squeezed textarea
   with a button tacked underneath — the label names the field, the textarea grows to
   fill whatever height the video leaves it, and the button sits directly under it. */
.an-shot-promptbox { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; }
/* Scoped inside .an-shot-promptbox on purpose — the bare .an-regen-actions is shared with
   the avatar regen panel, which wants its buttons flush right. Here the left slot carries
   the state of the box (edited / what a re-run costs) and the right carries the actions,
   so the two never fight for the same edge. Wraps rather than squashes on a narrow card. */
.an-shot-promptbox .an-regen-actions { justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.an-regen-note { min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.an-regen-note .an-hint { white-space: nowrap; }
.an-shot-textarea { flex: 1; min-height: 96px; line-height: 1.6; font-size: 13.5px; resize: vertical; }
.an-icon-btn {
  flex: none; width: 30px; height: 30px; border-radius: var(--rd-radius-ctrl, 8px); border: 1px solid transparent;
  background: transparent; color: var(--rd-ink-3, var(--fg-2)); cursor: pointer;
  /* inline-flex, not flex: this button is sometimes placed inline after text (e.g.
     the info toggle inside .an-hero-title) -- a block-level flex box there forces
     a line break before it, dropping the icon onto its own line below the title. */
  display: inline-flex; align-items: center; justify-content: center;
}
.an-icon-btn:hover { background: var(--rd-panel, var(--bg-sunken)); border-color: var(--rd-line-2, var(--border-subtle)); }

.an-tip-card { display: flex; gap: 10px; align-items: flex-start; background: var(--rd-teal-tint); border-color: var(--rd-teal); }
.an-tip-title { font-weight: 700; font-size: 13px; color: var(--rd-ink-1, var(--fg-1)); }
.an-avatar-ph {
  width: 180px; height: 180px; border-radius: var(--rd-radius-card, 14px); flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: repeating-linear-gradient(135deg, var(--rd-line-2, #EEF0F2), var(--rd-line-2, #EEF0F2) 10px, var(--rd-panel, #E7E9EC) 10px, var(--rd-panel, #E7E9EC) 20px);
  color: var(--rd-ink-4, var(--fg-3)); font-size: 12px;
}
.an-avatar-ph-busy {
  background: var(--rd-teal-tint, #E8F5F3);
  border: 1px dashed var(--rd-teal, #0D9488);
  color: var(--rd-teal-ink, #0F766E);
  text-align: center;
  padding: 12px;
}

.an-stage-list { display: flex; flex-direction: column; }
.an-stage-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rd-line-2, var(--border-subtle)); }
.an-stage-item:last-child { border-bottom: none; }
.an-stage-ic {
  width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: var(--rd-panel, var(--bg-sunken)); color: var(--rd-ink-4, var(--fg-3));
  border: 1px solid var(--rd-line-3, var(--border-default));
}
.an-stage-item.done .an-stage-ic { background: var(--rd-teal-ink); color: #fff; border-color: var(--rd-teal-ink); }
.an-stage-item.active .an-stage-ic { background: var(--rd-teal); color: #fff; border-color: var(--rd-teal); }
.an-stage-title { font-weight: 600; font-size: 13px; color: var(--rd-ink-1, var(--fg-1)); }
.an-stage-desc { font-size: 12px; color: var(--rd-ink-4, var(--fg-3)); }
.an-stage-cost { margin-left: auto; font-size: 12.5px; color: var(--rd-ink-3, var(--fg-2)); font-weight: 600; white-space: nowrap; }


.an-score-badge {
  display: inline-flex; align-items: center; gap: 8px; background: var(--rd-teal-tint); color: var(--rd-teal-ink);
  border-radius: var(--rd-radius-ctrl, 8px); padding: 10px 16px; font-weight: 700; font-size: 18px;
}
.an-score-lbl { font-size: 11px; font-weight: 600; color: var(--rd-ink-4, var(--fg-3)); display: block; }

.an-cost-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.an-cost-table td { padding: 7px 0; border-bottom: 1px solid var(--rd-line-2, var(--border-subtle)); color: var(--rd-ink-1, var(--fg-1)); }
.an-cost-table tr:last-child td { border-bottom: none; font-weight: 700; }
.an-cost-table td:last-child { text-align: right; }

.an-video-ph {
  width: 100%; height: 320px; border-radius: var(--rd-radius-ctrl, 8px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: repeating-linear-gradient(135deg, var(--rd-line-2, #EEF0F2), var(--rd-line-2, #EEF0F2) 10px, var(--rd-panel, #E7E9EC) 10px, var(--rd-panel, #E7E9EC) 20px);
  color: var(--rd-ink-4, var(--fg-3)); font-size: 12px;
}

/* --- Animation Ads: real backend states ---------------------------------- */

/* Live stage states. `.active` above is the legacy name kept for compatibility;
   `.running` is what the backend-driven stage list emits. */
.an-stage-item.running .an-stage-ic { background: var(--rd-teal); color: #fff; border-color: var(--rd-teal); }
.an-stage-item.failed .an-stage-ic {
  background: var(--rd-danger-bg, #FBEAEA); color: var(--rd-danger-fg, #B3261E);
  border-color: var(--rd-danger-bd, #F0C9C6);
}
.an-stage-item.disabled { opacity: .55; }

/* The generated character and the finished cut, once they actually exist. */
.an-avatar-img {
  width: 100%; border-radius: var(--rd-radius-ctrl, 8px); display: block;
  border: 1px solid var(--rd-line-3, var(--border-default));
}
.an-video { width: 100%; border-radius: var(--rd-radius-ctrl, 8px); display: block; background: #000; }
.an-audio { width: 100%; margin-top: 12px; }

/* One playable cut: what pass produced it, the player, then what you can do with it. Several of these
   can stack in a card when scenes have been cut on their own, so each is boxed. */
.an-cut + .an-cut { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rd-line-3, var(--border-default)); }
.an-cut-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.an-cut-label { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.an-cut-head .an-hint { margin: 0; }
.an-cut-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.an-cut-foot a.btn-secondary { text-decoration: none; }

/* Save/start feedback and the render-gate explanation. */
.an-banner {
  margin-top: 15px;
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 14px;
  border-radius: var(--rd-radius-ctrl, 8px); font-size: 13px;
  border: 1px solid var(--rd-teal); background: var(--rd-teal-tint); color: var(--rd-teal-ink);
}
.an-banner.error {
  border-color: var(--rd-danger-bd, #F0C9C6); background: var(--rd-danger-bg, #FBEAEA);
  color: var(--rd-danger-fg, #B3261E);
}
.an-banner .an-icon-btn { margin-left: auto; }
.an-tip-card.an-tip-warn {
  margin-top: 15px;
  background: var(--rd-warning-bg, #F9F3E7); border-color: var(--rd-warning-bd, #EAD9B6);
  color: var(--rd-warning-fg, #B8802A);
}
.an-hint-warn { color: var(--rd-warning-fg, #B8802A); margin-top: 10px; }
/* A value the pipeline derives rather than the operator types — reads as a field, not an input. */
.an-derived {
  font-size: 14px; font-weight: 600; color: var(--rd-ink-1, var(--fg-1));
  padding: 9px 0 7px; margin-bottom: 4px;
}
.an-song-preview {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--rd-line-2, #f3f4f6);
  border: 1px solid var(--rd-line-2, var(--border-subtle));
}
.an-song-preview-k {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rd-ink-4, #6b7280);
  margin-bottom: 4px;
}
.an-song-preview-v {
  font-size: 15px;
  font-weight: 650;
  color: var(--rd-ink-1, var(--fg-1));
}
/* The other two states the JSX has always emitted. Without them a failed save rendered in the same
   ordinary grey as a successful one, which is the one case that has to stand out. */
.an-hint-bad { color: var(--rd-danger-fg, #B4332B); margin-top: 10px; }
.an-hint-meta { color: var(--rd-muted, #6B7280); margin-top: 10px; }
/* Findings lists: the script reader's warnings, and anywhere else a card carries several notes. */
.an-list { margin: 8px 0 0; padding-left: 18px; }
.an-list > li { margin-top: 6px; }

/* Reference imagery — location plates and locked character faces. Judged by eye and side by side, so
   they wrap into a grid rather than stacking one per row down a page of eleven. */
.an-thumb-grid {
  display: grid; gap: 12px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
/* An asset the running step is about to replace. Holds the slot so the layout does not jump as each
   new picture lands, and says what is happening rather than showing the previous attempt. */
.an-thumb-pending {
  display: flex; align-items: center; justify-content: center;
  min-height: 120px; border-radius: 6px;
  border: 1px dashed var(--rd-border, #D7DBE0);
  background: var(--rd-surface-2, #F6F7F9);
}
.an-thumb { margin: 0; }
.an-thumb > img { width: 100%; height: auto; display: block; border-radius: 6px; }
.an-thumb > figcaption { margin-top: 4px; }
.an-hint-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* Song QC: four measured numbers, each against the threshold it must clear. */
.an-metric-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 12px;
}
.an-metric {
  border: 1px solid var(--rd-line-3, var(--border-default)); border-radius: var(--rd-radius-ctrl, 8px);
  padding: 12px 14px; background: var(--rd-panel, var(--bg-sunken));
}
.an-metric-k { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rd-ink-4, var(--fg-3)); }
.an-metric-v { font-size: 22px; font-weight: 700; color: var(--rd-ink-1, var(--fg-1)); margin: 4px 0 2px; }
.an-metric-note { font-size: 11.5px; color: var(--rd-ink-4, var(--fg-3)); line-height: 1.35; }
.an-reason-list { margin: 12px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--rd-warning-fg, #B8802A); }

/* Lyrics, grouped by section so instrumental stretches are visible — those are
   where B-roll is forced instead of the character singing at silence. */
.an-lyrics { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.an-lyric-section { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.an-lyric-lines { font-size: 13.5px; line-height: 1.7; color: var(--rd-ink-1, var(--fg-1)); }

/* Claim map — the reviewable link between each sung line and the script claim
   it carries. Scrolls inside itself so a long lyric never widens the page. */
.an-claim-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px; }
.an-claim-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--rd-ink-4, var(--fg-3)); padding: 0 12px 6px 0; font-weight: 700;
}
.an-claim-table td {
  padding: 8px 12px 8px 0; border-top: 1px solid var(--rd-line-2, var(--border-subtle));
  color: var(--rd-ink-1, var(--fg-1)); vertical-align: top; width: 50%;
}
.an-claim-table td:last-child { color: var(--rd-ink-3, var(--fg-2)); padding-right: 0; }

.an-choice-card.disabled { opacity: .5; cursor: not-allowed; }

/* =====================================================   Animation Ads — Generate tab: live run reporting
   ------------------------------------------------------------
   The Generate tab is the one screen a user sits in front of for ~50 minutes
   waiting on a ~$20 render, so it gets a richer vocabulary than the rest of the
   flow: a weighted stacked meter, stat tiles that carry their own footnote, and
   render steps that expand to explain themselves.
   ============================================================ */

/* --- stacked meter -------------------------------------------------------- */
.an-meter {
  position: relative; height: 10px; margin: 14px 0 8px; overflow: hidden;
  background: var(--rd-line-2, var(--bg-sunken)); border-radius: 999px;
}
.an-meter.sm { height: 6px; margin: 8px 0 0; }
.an-meter > span { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
.an-meter-fill { left: 0; background: var(--rd-teal-ink); transition: width .4s ease; }
.an-meter-fail { background: var(--rd-danger-fg, #B3261E); opacity: .85; }
/* The step running NOW: a crawl, because there is no honest sub-stage percentage
   to report — the pipeline records a step only once it FINISHES. Sized by that
   step's share of the run, so the stripe shows how much rides on it. */
.an-meter-live {
  background-image: linear-gradient(
    115deg,
    var(--rd-teal) 0 42%,
    color-mix(in srgb, var(--rd-teal) 55%, #fff) 42% 58%,
    var(--rd-teal) 58% 100%
  );
  background-size: 22px 100%;
  animation: an-crawl 1.1s linear infinite;
  transition: left .4s ease, width .4s ease;
}
@keyframes an-crawl { to { background-position: 22px 0; } }

.an-meter-legend {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--rd-ink-4, var(--fg-3));
}
.an-meter-legend span { display: inline-flex; align-items: center; gap: 5px; }
.an-meter-legend .an-key { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.an-meter-legend .an-key.done { background: var(--rd-teal-ink); }
.an-meter-legend .an-key.live { background: var(--rd-teal); }
.an-meter-legend .an-key.rest { background: var(--rd-line-3, var(--border-default)); }
.an-legend-note { margin-left: auto; }

/* --- stat tiles ----------------------------------------------------------- */
.an-stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  gap: 10px; margin: 16px 0 0;
}
.an-stat {
  border: 1px solid var(--rd-line-2, var(--border-subtle)); border-radius: var(--rd-radius-ctrl, 8px);
  padding: 11px 13px; background: var(--rd-panel, var(--bg-sunken)); min-width: 0;
}
.an-stat.ok { border-color: color-mix(in srgb, var(--success-500, #17a34a) 35%, var(--rd-line-2, var(--border-subtle))); background: color-mix(in srgb, var(--success-500, #17a34a) 7%, var(--rd-panel, var(--bg-sunken))); }
.an-stat.ok .an-stat-v { color: var(--success-500, #17a34a); }
.an-stat.warn { border-color: var(--rd-warning-bd, #EAD9B6); background: var(--rd-warning-bg, #F9F3E7); }
/* Same tinted-tile treatment as the Cost Dashboard's KPI strip (.cost-kpi.*)
   — each of the four "elapsed/time left/spend/worker" stats gets its own
   color instead of every tile reading identically gray. */
.an-stat.info { border-color: color-mix(in srgb, #2563eb 35%, var(--rd-line-2, var(--border-subtle))); background: color-mix(in srgb, #2563eb 7%, var(--rd-panel, var(--bg-sunken))); }
.an-stat.info .an-stat-v { color: #2563eb; }
.an-stat.gold { border-color: color-mix(in srgb, #d97706 35%, var(--rd-line-2, var(--border-subtle))); background: color-mix(in srgb, #d97706 7%, var(--rd-panel, var(--bg-sunken))); }
.an-stat.gold .an-stat-v { color: #b45309; }
.an-stat.violet { border-color: color-mix(in srgb, #7c3aed 35%, var(--rd-line-2, var(--border-subtle))); background: color-mix(in srgb, #7c3aed 7%, var(--rd-panel, var(--bg-sunken))); }
.an-stat.violet .an-stat-v { color: #7c3aed; }
.an-stat-k {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rd-ink-4, var(--fg-3));
}
.an-stat-v {
  font-size: 19px; font-weight: 700; color: var(--rd-ink-1, var(--fg-1));
  margin: 3px 0 1px; line-height: 1.15; overflow-wrap: anywhere;
}
.an-stat.sm .an-stat-v { font-size: 13px; font-weight: 600; line-height: 1.35; }
.an-stat-note { font-size: 11px; color: var(--rd-ink-4, var(--fg-3)); line-height: 1.35; }
.an-stat.warn .an-stat-v, .an-stat.warn .an-stat-note { color: var(--rd-warning-fg, #B8802A); }

/* Compact stat tiles — the technical debug numbers (elapsed/spend/worker health) nobody
   stares at, so every datapoint stays but the tile shrinks to a fraction of its footprint:
   tighter grid, half the padding, no oversized headline number. */
.an-stat-grid-compact { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 6px; margin-top: 10px; }
.an-stat.compact { padding: 6px 9px; }
.an-stat.compact .an-stat-k { font-size: 9.5px; gap: 4px; }
.an-stat.compact .an-stat-v { font-size: 13px; font-weight: 700; margin: 2px 0 0; line-height: 1.25; }
.an-stat.compact .an-stat-note { font-size: 9.5px; margin-top: 1px; }

/* --- the live run card ---------------------------------------------------- */
.an-run-card { border-color: var(--rd-teal-border, #BFE6DD); }
.an-run-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.an-run-lede { min-width: 0; }
.an-run-kicker {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rd-teal-ink);
}
.an-live-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--rd-teal);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--rd-teal) 60%, transparent);
  animation: an-pulse 1.8s ease-out infinite;
}
@keyframes an-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rd-teal) 60%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--rd-teal) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rd-teal) 0%, transparent); }
}
.an-run-title { font-size: 20px; font-weight: 700; margin: 6px 0 0; color: var(--rd-ink-1, var(--fg-1)); }
.an-run-what { font-size: 13px; color: var(--rd-ink-3, var(--fg-2)); margin: 6px 0 0; max-width: 62ch; line-height: 1.5; }
.an-run-dial { flex: none; text-align: right; }
.an-run-pct {
  font-size: 38px; font-weight: 700; line-height: 1; color: var(--rd-teal-ink);
  font-variant-numeric: tabular-nums;
}
.an-run-pct span { font-size: 20px; margin-left: 1px; }
.an-run-pct-lbl { font-size: 11px; color: var(--rd-ink-4, var(--fg-3)); margin-top: 4px; }
.an-run-note {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; padding: 11px 13px;
  border-radius: var(--rd-radius-ctrl, 8px); background: var(--rd-teal-tint);
  color: var(--rd-teal-ink); font-size: 12.5px; line-height: 1.5;
}
.an-run-note strong { font-weight: 700; }
.an-run-note svg { flex: none; margin-top: 1px; }

/* --- render steps: grouped, expandable ------------------------------------ */
.an-step-toggle { flex: none; white-space: nowrap; align-self: flex-start; }
.an-step-group + .an-step-group { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rd-line-2, var(--border-subtle)); }
.an-step-group:first-of-type { margin-top: 22px; }
.an-step-group-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.an-step-group-title { font-size: 13px; font-weight: 700; color: var(--rd-ink-1, var(--fg-1)); }
.an-step-group-desc { font-size: 12px; color: var(--rd-ink-4, var(--fg-3)); margin-top: 2px; max-width: 70ch; line-height: 1.45; }
.an-step-group-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.an-step-rows { margin-top: 10px; }

.an-step {
  border-bottom: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: 8px;
  border-left: 3px solid transparent;
  transition: background 150ms var(--ease-standard, ease), border-left-color 150ms var(--ease-standard, ease);
}
.an-step:last-child { border-bottom: none; }
/* A quick "which of these am I still waiting on" scan across a dozen rows —
   done and running each get their own background tint (running the
   stronger one, plus a solid left accent) instead of every row looking the
   same regardless of state, with only the small circular node icon
   (an-step-node) telling them apart. */
.an-step.done {
  background: color-mix(in srgb, var(--rd-teal, var(--primary-500)) 9%, transparent);
  border-left-color: color-mix(in srgb, var(--rd-teal, var(--primary-500)) 55%, transparent);
}
.an-step.running {
  background: color-mix(in srgb, var(--rd-teal, var(--primary-500)) 14%, transparent);
  border-left-color: var(--rd-teal, var(--primary-500));
}
.an-step.failed {
  background: color-mix(in srgb, var(--danger-500, #dc2626) 8%, transparent);
  border-left-color: var(--danger-500, #dc2626);
}
/* Waiting previously looked identical to a plain, unstyled row — same as
   done and running, it now gets its own (neutral, since there's nothing to
   report yet) tint and accent so all three states read apart at a glance,
   not just done/running against a sea of look-alike waiting rows. */
.an-step.pending {
  background: color-mix(in srgb, var(--rd-ink-4, var(--fg-3)) 6%, transparent);
  border-left-color: color-mix(in srgb, var(--rd-ink-4, var(--fg-3)) 30%, transparent);
}
.an-step-head {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0 10px 9px;
  background: none; border: none; text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.an-step-head:hover .an-step-name { color: var(--rd-teal-ink); }
.an-step-node {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--rd-panel, var(--bg-sunken)); color: var(--rd-ink-4, var(--fg-3));
  border: 1px solid var(--rd-line-3, var(--border-default));
}
.an-step-n { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.an-step.done .an-step-node { background: var(--rd-teal-ink); color: #fff; border-color: var(--rd-teal-ink); }
.an-step.running .an-step-node { background: var(--rd-teal); color: #fff; border-color: var(--rd-teal); }
.an-step.running .an-step-node svg { animation: ar-spin 1.1s linear infinite; }
.an-step.failed .an-step-node {
  background: var(--rd-danger-bg, #FBEAEA); color: var(--rd-danger-fg, #B3261E);
  border-color: var(--rd-danger-bd, #F0C9C6);
}
.an-step.disabled { opacity: .55; }
.an-step-name { font-size: 13px; font-weight: 600; color: var(--rd-ink-1, var(--fg-1)); min-width: 0; }
.an-step.running .an-step-name { color: var(--rd-teal-ink); }
.an-step-status { flex: none; margin-left: auto; }
.an-step-mins {
  flex: none; font-size: 11.5px; color: var(--rd-ink-4, var(--fg-3));
  font-variant-numeric: tabular-nums; min-width: 68px; text-align: right;
}
.an-step-caret { flex: none; color: var(--rd-ink-4, var(--fg-3)); display: flex; transition: transform .15s ease; }
.an-step.open .an-step-caret { transform: rotate(180deg); }

/* Crawl under the step on now — the same "working, no honest percentage" signal
   as the overall meter's live segment. */
.an-step-crawl { height: 3px; border-radius: 999px; overflow: hidden; background: var(--rd-line-2, var(--bg-sunken)); }
.an-step-crawl span {
  display: block; height: 100%; width: 34%; border-radius: 999px; background: var(--rd-teal);
  animation: an-slide 1.6s ease-in-out infinite;
}
@keyframes an-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}

.an-step-body { padding: 2px 0 14px 43px; }
.an-step-what { font-size: 12.5px; color: var(--rd-ink-3, var(--fg-2)); margin: 4px 0 10px; max-width: 76ch; line-height: 1.55; }
.an-step-facts { display: flex; gap: 8px; flex-wrap: wrap; }
.an-fact {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 9px;
  font-size: 11px; font-weight: 600; background: var(--rd-panel, var(--bg-sunken));
  color: var(--rd-ink-3, var(--fg-2)); border: 1px solid var(--rd-line-2, var(--border-subtle));
}
.an-fact.paid { background: var(--rd-warning-bg, #F9F3E7); color: var(--rd-warning-fg, #B8802A); border-color: var(--rd-warning-bd, #EAD9B6); }
.an-fact.free { background: var(--rd-teal-tint); color: var(--rd-teal-ink); border-color: var(--rd-teal-border, #BFE6DD); }
.an-step-note {
  font-size: 12px; color: var(--rd-ink-3, var(--fg-2)); margin: 10px 0 0; padding: 9px 11px;
  border-left: 2px solid var(--rd-teal); background: var(--rd-teal-tint);
  border-radius: 0 var(--rd-radius-ctrl, 8px) var(--rd-radius-ctrl, 8px) 0; line-height: 1.5;
}
.an-step-note.warn {
  border-left-color: var(--rd-warning-fg, #B8802A); background: var(--rd-warning-bg, #F9F3E7);
  color: var(--rd-warning-fg, #B8802A);
}
.an-stage-meta { font-size: 11px; color: var(--rd-ink-4, var(--fg-3)); margin-top: 3px; }

/* Compact render-steps timeline — every stage name/status/timing stays, the prose
   explaining what the section is (card sub, per-group description) is dropped rather
   than shrunk (it's read once, not scanned), and everything else tightens: less gap
   between groups, shorter rows, smaller icons/type. */
.an-stage-timeline-compact.an-card { padding: 14px 16px; }
.an-stage-timeline-compact .an-card-title { font-size: 13px; margin-bottom: 0; }
.an-stage-timeline-compact .an-step-group,
.an-stage-timeline-compact .an-step-group:first-of-type { margin-top: 12px; padding-top: 10px; }
.an-stage-timeline-compact .an-step-group-title { font-size: 12px; }
/* A one-step-per-line list is mostly empty horizontal space at this row height — laid
   out as a wrapping multi-column grid instead, so a 13-step group takes 3-4 short rows
   instead of 13 tall ones. An opened step (the details someone actually asked to see)
   spans the full grid width so its facts/description aren't squeezed into one column. */
.an-stage-timeline-compact .an-step-rows {
  margin-top: 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 10px;
}
.an-stage-timeline-compact .an-step { border-bottom: none; }
.an-stage-timeline-compact .an-step.open { grid-column: 1 / -1; border-bottom: 1px solid var(--rd-line-2, var(--border-subtle)); }
.an-stage-timeline-compact .an-step-head { padding: 5px 5px 5px 7px; gap:10px; }
.an-stage-timeline-compact .an-step-node { width: 16px; height: 16px; }
.an-stage-timeline-compact .an-step-name { font-size: 11.5px; }
.an-stage-timeline-compact .an-step-mins { font-size: 10px; min-width: 46px; }
.an-stage-timeline-compact .an-step-body { padding: 2px 10px 12px 24px; }
.an-stage-timeline-compact .an-step-what { font-size: 11px; margin: 2px 0 6px; color: var(--rd-ink-4, var(--fg-3)); }
.an-stage-timeline-compact .an-fact { padding: 2px 7px; font-size: 10px; }

/* --- pre-flight checklist ------------------------------------------------- */
.an-check-list { margin-top: 16px; border-top: 1px solid var(--rd-line-2, var(--border-subtle)); }
.an-check { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--rd-line-2, var(--border-subtle)); }
.an-check:last-child { border-bottom: none; }
.an-check-ic {
  width: 19px; height: 19px; border-radius: 50%; flex: none; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
}
.an-check.ok .an-check-ic { background: var(--rd-teal-ink); color: #fff; }
.an-check.warn .an-check-ic { background: var(--rd-warning-fg, #B8802A); color: #fff; }
.an-check.todo .an-check-ic { background: var(--rd-danger-bg, #FBEAEA); color: var(--rd-danger-fg, #B3261E); border: 1px solid var(--rd-danger-bd, #F0C9C6); }
.an-check-copy { display: grid; gap: 2px; min-width: 0; }
.an-check-title { font-size: 13px; font-weight: 600; color: var(--rd-ink-1, var(--fg-1)); }
.an-check-detail { font-size: 12px; color: var(--rd-ink-4, var(--fg-3)); line-height: 1.45; max-width: 78ch; }

/* --- "watch it build" asset grid ----------------------------------------- */
.an-asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 10px; margin-top: 16px; }
.an-asset {
  display: flex; gap: 11px; align-items: flex-start; padding: 11px; text-decoration: none;
  border: 1px solid var(--rd-line-2, var(--border-subtle)); border-radius: var(--rd-radius-ctrl, 8px);
  background: var(--rd-surface, var(--bg-surface)); min-width: 0;
}
.an-asset:hover { border-color: var(--rd-teal); background: var(--rd-teal-tint); }
/* The card itself used to stay plain white regardless of file type — only
   the small 44px thumb swatch carried any color. Tinting the whole card by
   kind (matching the thumb's existing teal for video/audio) makes the grid
   scannable by type at a glance instead of by reading every label. */
.an-asset.video, .an-asset.audio { border-color: var(--rd-teal-border, #BFE6DD); background: var(--rd-teal-tint); }
.an-asset.data { border-color: color-mix(in srgb, #7c3aed 30%, var(--rd-line-2, var(--border-subtle))); background: color-mix(in srgb, #7c3aed 6%, var(--rd-surface, var(--bg-surface))); }
.an-asset.image { border-color: color-mix(in srgb, #d97706 30%, var(--rd-line-2, var(--border-subtle))); background: color-mix(in srgb, #d97706 6%, var(--rd-surface, var(--bg-surface))); }
.an-asset-thumb {
  width: 44px; height: 44px; flex: none; border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--rd-panel, var(--bg-sunken)); color: var(--rd-ink-4, var(--fg-3));
  border: 1px solid var(--rd-line-2, var(--border-subtle));
}
.an-asset-thumb img { width: 100%; height: 100%; object-fit: cover; }
.an-asset-thumb.video, .an-asset-thumb.audio { background: var(--rd-teal-tint); color: var(--rd-teal-ink); border-color: var(--rd-teal-border, #BFE6DD); }
.an-asset-thumb.data { background: color-mix(in srgb, #7c3aed 12%, var(--rd-surface, var(--bg-surface))); color: #7c3aed; border-color: color-mix(in srgb, #7c3aed 30%, var(--rd-line-2, var(--border-subtle))); }
.an-asset-body { display: grid; gap: 2px; min-width: 0; }
.an-asset-label { font-size: 12.5px; font-weight: 700; color: var(--rd-ink-1, var(--fg-1)); }
.an-asset-what { font-size: 11.5px; color: var(--rd-ink-3, var(--fg-2)); line-height: 1.4; }
.an-asset-meta { font-size: 10.5px; color: var(--rd-ink-4, var(--fg-3)); overflow-wrap: anywhere; }

/* --- finished state ------------------------------------------------------- */
.an-done-card { border-color: var(--rd-teal); background: linear-gradient(180deg, var(--rd-teal-tint) 0, var(--rd-surface, #fff) 120px); }
.an-done-row { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.an-done-video {
  width: 190px; flex: none; border-radius: var(--rd-radius-ctrl, 8px); background: #000; display: block;
  border: 1px solid var(--rd-line-3, var(--border-default));
}
.an-done-copy { flex: 1; min-width: 260px; }
.an-done-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; align-items: center; }

/* --- footer -------------------------------------------------------------- */
/* Back goes on the left, everything else (Continue, Regenerate, etc.) on the
   right — the standard wizard-footer convention. Was flex-end, which
   clustered Back flush against Continue on the right with the whole row's
   width sitting empty on the left; a footer with only one button (a lone
   Back, or a lone Continue on the very first step) still ends up on the
   correct side under space-between too, since there's nothing to space it
   against. */
.an-footer-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.an-btn-danger {
  border-color: var(--rd-danger-bd, #F0C9C6) !important;
  background: var(--rd-danger-bg, #FBEAEA) !important;
  color: var(--rd-danger-fg, #B3261E) !important;
}

/* --- the saved-ads list on Creative direction ---------------------------- */
.an-ad-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.an-ad-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--rd-line-3, var(--border-default)); border-radius: var(--rd-radius-ctrl, 8px);
  padding: 8px 10px 8px 12px; background: var(--rd-surface, var(--bg-surface));
}
.an-ad-row.is-current { border-color: var(--rd-teal); background: var(--rd-teal-tint); }
.an-ad-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.an-ad-row-id {
  font-size: 13px; font-weight: 600; color: var(--rd-ink-1, var(--fg-1));
  overflow-wrap: anywhere;
}
.an-ad-row-meta { font-size: 12px; color: var(--rd-ink-4, var(--fg-3)); }
.an-ad-row-actions { display: flex; align-items: center; gap: 8px; }
.an-ad-row-btn { padding: 5px 12px; font-size: 12px; }
.an-ad-row-current { font-size: 12px; font-weight: 600; color: var(--rd-teal-ink); }

@media (max-width: 720px) {
  .an-run-top { flex-direction: column; }
  .an-run-dial { text-align: left; }
  .an-step-mins { display: none; }
}

/* Everything above uses motion only to say "this is alive". None of it carries
   information the static state does not, so it all goes away on request. */
@media (prefers-reduced-motion: reduce) {
  .an-meter-live, .an-live-dot, .an-step-crawl span, .an-step.running .an-step-node svg { animation: none; }
  .an-step-crawl span { width: 100%; opacity: .5; }
}

/* ============================================================
   Animation Ads — Generate: the plain-language view
   ------------------------------------------------------------
   One focal point (the ring), four phases in words, and a single toggle for the
   engineering detail. Bigger type and more air than the rest of the flow, because
   this is the screen people watch rather than fill in.
   ============================================================ */
.an-hero {
  padding: 26px 28px;
  margin-top: 15px;
  border-color: var(--rd-line-1, var(--border-subtle));
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(20, 24, 27, .04), 0 8px 24px -18px rgba(20, 24, 27, .18);
}
/* Lives in the TopBar (window.setMiniProgress / window.useMiniProgress, see
   shared.jsx) — a "still working" indicator that stays visible regardless
   of which tab is open or how far the page has scrolled, since the TopBar
   itself never scrolls away. Sits between the nav-collapse toggle and the
   search box, inside .topbar-left (which is already a flex row). */
.topbar-mini-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  /* A tinted wash, not plain white — the topbar itself is near-white, so a
     white badge barely registered against it even with a border. */
  background: color-mix(in srgb, var(--rd-teal, var(--primary-500)) 10%, var(--rd-surface, var(--bg-surface)));
  border: 3px solid var(--rd-teal, var(--primary-500));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--rd-teal, var(--primary-500)) 25%, transparent), var(--shadow-lg);
  animation: topbar-mini-progress-in 180ms var(--ease-standard, ease), topbar-mini-progress-pulse 1.8s ease-in-out infinite 180ms;
}
/* The ring's own number is a fixed 30px (.an-ring-num) sized for the full
   112px hero ring — at this badge's much smaller scale that overflowed the
   circle. Scoped down here rather than touching .an-ring-num itself, which
   every other (full-size) use of the ring still relies on. */
.topbar-mini-progress .an-ring-num { font-size: 10px; font-weight: 500; color: var(--rd-teal-ink, var(--fg-1)); }
@keyframes topbar-mini-progress-in {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes topbar-mini-progress-pulse {
  0%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--rd-teal, var(--primary-500)) 25%, transparent), var(--shadow-lg); }
  50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--rd-teal, var(--primary-500)) 9%, transparent), var(--shadow-lg); }
}
.an-hero-main { display: flex; gap: 26px;   }
.an-hero-copy { min-width: 0; flex: 1; }
.an-hero-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--rd-teal-ink);
}
.an-hero-kicker.done { color: var(--rd-teal-ink); }
.an-hero-title {
  font-size: 25px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2;
  margin: 8px 0 0; color: var(--rd-ink-1, var(--fg-1));
}
.an-hero-what {
  font-size: 14.5px; line-height: 1.55; color: var(--rd-ink-3, var(--fg-2));
  margin: 8px 0 0; max-width: 60ch;
}
.an-hero-facts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.an-hero-fact {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--rd-teal-ink); background: var(--rd-teal-tint);
}
.an-hero-fact.subtle {
  background: var(--rd-panel, var(--bg-sunken)); color: var(--rd-ink-3, var(--fg-2));
  font-weight: 500; font-size: 12.5px;
}
.an-hero-icon {
  width: 62px; height: 62px; border-radius: 18px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
}
.an-hero-note {
  display: flex; align-items: center; gap: 9px; margin-top: 20px; padding: 12px 15px;
  border-radius: 12px; background: var(--rd-teal-tint); color: var(--rd-teal-ink);
  font-size: 13px; line-height: 1.45;
}
.an-hero-note svg { flex: none; }
.an-hero-checks { margin-top: 20px; border-top: none; }
.an-hero-ready .an-hero-title { font-size: 26px; }
.an-hero-done { background: linear-gradient(180deg, var(--rd-teal-tint) 0, var(--rd-surface, #fff) 150px); }

/* --- the ring ------------------------------------------------------------- */
.an-ring { position: relative; flex: none; display: grid; place-items: center; }
.an-ring svg { position: absolute; inset: 0; }
.an-ring-track { stroke: var(--rd-line-2, var(--border-subtle)); }
.an-ring-fill { stroke: var(--rd-teal); transition: stroke-dashoffset .5s ease; }
.an-ring-live {
  stroke: var(--rd-teal);
  stroke-dasharray: 5 7;
  opacity: .75;
  animation: an-ring-crawl 1s linear infinite;
}
@keyframes an-ring-crawl { to { stroke-dashoffset: -24; } }
.an-ring-mid { text-align: center; line-height: 1; }
.an-ring-num {
  display: block; font-size: 30px; font-weight: 700; letter-spacing: -.02em;
  color: var(--rd-ink-1, var(--fg-1)); font-variant-numeric: tabular-nums;
}
.an-ring-lbl {
  display: block; margin-top: 5px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--rd-ink-4, var(--fg-3));
}

/* --- four phases ---------------------------------------------------------- */
.an-phase-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.an-phase { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; }
.an-phase + .an-phase { border-top: 1px solid var(--rd-line-2, var(--border-subtle)); }
.an-phase-mark {
  width: 30px; height: 30px; border-radius: 50%; flex: none; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rd-panel, var(--bg-sunken)); color: var(--rd-ink-4, var(--fg-3));
}
.an-phase.done .an-phase-mark { background: var(--rd-teal-ink); color: #fff; }
.an-phase.running .an-phase-mark { background: var(--rd-teal-tint); color: var(--rd-teal-ink); }
.an-phase.failed .an-phase-mark {
  background: var(--rd-danger-bg, #FBEAEA); color: var(--rd-danger-fg, #B3261E);
}
.an-phase.skipped { opacity: .5; }
.an-phase-spin {
  width: 13px; height: 13px; border-radius: 50%; display: block;
  border: 2px solid color-mix(in srgb, var(--rd-teal) 30%, transparent);
  border-top-color: var(--rd-teal); animation: ar-spin .9s linear infinite;
}
.an-phase-body { flex: 1; min-width: 0; }
.an-phase-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.an-phase-label { font-size: 14.5px; font-weight: 600; color: var(--rd-ink-1, var(--fg-1)); }
.an-phase.pending .an-phase-label, .an-phase.skipped .an-phase-label { color: var(--rd-ink-3, var(--fg-2)); font-weight: 500; }
.an-phase-state {
  flex: none; font-size: 12px; font-weight: 600; color: var(--rd-ink-4, var(--fg-3));
}
.an-phase.done .an-phase-state { color: var(--rd-teal-ink); }
.an-phase.running .an-phase-state { color: var(--rd-teal-ink); }
.an-phase.failed .an-phase-state { color: var(--rd-danger-fg, #B3261E); }
.an-phase-what {
  font-size: 13px; line-height: 1.5; color: var(--rd-ink-3, var(--fg-2));
  margin: 5px 0 0; max-width: 68ch;
}
.an-phase-bar {
  height: 4px; border-radius: 999px; margin-top: 11px; overflow: hidden;
  background: var(--rd-line-2, var(--bg-sunken));
}
.an-phase-bar > span {
  display: block; height: 100%; border-radius: 999px; background: var(--rd-teal);
  transition: width .4s ease;
}

/* --- the details escape hatch -------------------------------------------- */
.an-details-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px;
  margin-bottom: 10px;
    background: var(--rd-surface);
    border: 1px solid var(--border-default);
    font-family: var(--rd-font-sans);
    border-radius: var(--text-2xs);

}
.an-details-toggle {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; color: var(--rd-ink-3, var(--fg-2));
  background: none; border: none; padding: 6px 0;
}
.an-details-toggle:hover { color: var(--rd-teal-ink); }
.an-details-toggle svg { transition: transform .15s ease; }
.an-details-toggle .an-caret-open { transform: rotate(180deg); }
.an-details-stats { margin-bottom: 16px; }

/* --- Video Clips tab: the render-run strip -------------------------------- */
/* Thirteen expandable stage rows, three chapter meters and roughly forty icons is the
   right amount of detail for the Generate tab, where watching the run IS the task. On
   the Clips tab the clips are the task and the run is context, so the same information
   collapses to one line — chapter pips, what is happening, how much is left — and the
   full AnStageTimeline is one click underneath. Built on .an-details-bar/.an-details-toggle
   rather than new chrome, so it matches every other "more, if you want it" row in the panel.
   The whole row is the button (not a small text link beside it): a non-technical reviewer
   should not have to find a 60px target to open it. */
.an-run-strip { padding: 0 12px; }
.an-run-strip .an-details-toggle { width: 100%; gap: 12px; padding: 11px 0; text-align: left; }
.an-run-strip-head { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
/* Pushed to the far edge so the headline and the numbers never jostle as the run advances. */
.an-run-strip-meta { margin-left: auto; font-weight: 500; }
.an-run-segs { display: flex; gap: 3px; flex: none; }
/* One pip per chapter, in run order — the shape of the whole job at a glance, which is the
   one thing the collapsed strip must not lose. Deliberately not a percentage bar: the
   chapters are wildly uneven in length and a proportional bar implies they are not. */
.an-run-seg {
  width: 26px; height: 4px; border-radius: 999px; flex: none;
  background: var(--rd-line-2, var(--bg-sunken));
}
.an-run-seg.done { background: var(--rd-teal-ink); }
.an-run-seg.running { background: var(--rd-teal); }
.an-run-seg.failed { background: var(--rd-danger-fg, #B3261E); }
/* A chapter this ad format skips is still drawn — present, visibly not counted — rather
   than removed, so the strip has the same number of pips on every ad. */
.an-run-seg.skipped { height: 2px; align-self: center; opacity: .5; }

@media (max-width: 720px) {
  .an-run-strip .an-details-toggle { flex-wrap: wrap; gap: 8px; }
  .an-run-strip-meta { margin-left: 0; flex-basis: 100%; }
}

/* A primary action worth the size of the commitment behind it. */
.btn-primary.btn-lg { padding: 11px 22px; font-size: 14px; border-radius: 10px; }
.btn-secondary.btn-lg { padding: 11px 22px; font-size: 14px; font-weight: 600; border-radius: 10px; }

/* A hero whose header row carries its own primary actions (Generate/Approve all,
   etc.) instead of a full-width footer button below — title and copy stay left,
   the action buttons sit together on the right, vertically centered with them. */
.an-hero-with-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.an-hero-with-actions .an-hero-main { flex: 1 1 320px; min-width: 0; }
.an-hero-with-actions .an-footer-actions { flex: none; }
.sd-hero-step-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--rd-teal); color: #fff; font-size: 11.5px; font-weight: 700;
}
.sd-clip-hero-actions { display: flex; flex-direction: column; gap: 10px; flex: none; }
/* Equal-width pair, rather than each button sizing to its own text — the mismatched
   widths (Generate vs. Approve) read as unbalanced sitting right above the stat box. */
.sd-clip-hero-actions .an-footer-actions .btn-primary,
.sd-clip-hero-actions .an-footer-actions .btn-secondary {
  /* nowrap: at the old 150px min-width "Generate all clips" wrapped to two lines while
     "Approve all clips" stayed on one, so the equal-width pair ended up unequal height. */
  flex: 1 1 0; min-width: 172px; height: 50px; justify-content: center; white-space: nowrap;
}
.sd-clip-stats {
  display: flex; border: 1px solid var(--rd-teal-border);
  border-radius: var(--rd-radius-ctrl, 8px); overflow: hidden; background: var(--rd-teal-tint);
}
.sd-clip-stat { flex: 1; padding: 8px 16px; }
.sd-clip-stat + .sd-clip-stat { border-left: 1px solid var(--rd-teal-border); }
.sd-clip-stat-label {
  font-family: var(--rd-font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--rd-teal-ink);
}
.sd-clip-stat-value { margin-top: 2px; font-size: 17px; font-weight: 700; color: var(--rd-ink-1, var(--fg-1)); }

/* Shown only while Generate-all is running — the request chain can run several
   minutes per scene with no other feedback on screen otherwise. */
.sd-clip-progress {
  margin: 14px 0; padding: 16px 18px;
  border: 1px solid var(--rd-teal-border); border-radius: var(--rd-radius-card, 14px);
  background: var(--rd-teal-tint);
}
.sd-clip-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sd-clip-progress-title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--rd-teal-ink); }
.sd-clip-progress-elapsed { font-family: var(--rd-font-mono); font-size: 12.5px; color: var(--rd-ink-3, var(--fg-2)); }
.sd-clip-progress-bar {
  margin-top: 12px; height: 8px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--rd-teal) 18%, var(--rd-surface, #fff));
}
.sd-clip-progress-bar > span {
  display: block; height: 100%; border-radius: inherit; background: var(--rd-teal);
  transition: width .5s ease;
}
.sd-clip-progress-note {
  margin: 12px 0 0; display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--rd-teal-ink);
}
.sd-clip-progress-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--rd-teal); }
@media (max-width: 720px) {
  .sd-clip-hero-actions { width: 100%; }
  .an-hero-with-actions .an-footer-actions { width: 100%; }
  .an-hero-with-actions .an-footer-actions .btn-primary,
  .an-hero-with-actions .an-footer-actions .btn-secondary { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 720px) {
  .an-hero { padding: 20px; }
  .an-hero-main { flex-direction: column; align-items: flex-start; gap: 18px; }
  .an-hero-title { font-size: 22px; }
  .an-phase-head { flex-direction: column; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .an-phase-spin { animation: none; }
  .an-ring-fill { transition: none; }
  .an-ring-live { animation: none; }
}

/* --- Review: the watch-your-ad card -------------------------------------- */
.an-watch { padding: 24px 26px; border-radius: 18px; border-color: var(--rd-line-1, var(--border-subtle)); }
.an-watch-row { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.an-watch-video {
  width: 230px; flex: none; border-radius: 14px; background: #000; display: block;
  border: 1px solid var(--rd-line-3, var(--border-default));
}
.an-watch-copy { flex: 1; min-width: 260px; }

/* --- Spend: the read-only bar list (the openable one lives under details) - */
.an-spend-simple {
  display: flex; align-items: center; gap: 12px; padding: 13px 0;
  border-bottom: 1px solid var(--rd-line-2, var(--border-subtle));
}
.an-spend-simple:last-child { border-bottom: none; }
.an-spend-simple .an-spend-label { font-size: 14px; }
.an-spend-simple .an-spend-bar { height: 10px; }

/* A hero's action row sits under the copy, so it should not inherit the top margin the
   finished-ad card gives it. */
.an-hero .an-done-actions { margin-top: 18px; }

/* =====================================================   Animation Ads — Storyboard / Quality / Spend
   ------------------------------------------------------------
   The three review surfaces added on top of the linear flow. `.an-shot-*` above
   was written for a shot list that had never been built; it is now in use, with
   the additions below for the pieces it did not cover.
   ============================================================ */

/* --- sub-tabs (within one rail step) -------------------------------------- */
.an-subtabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px;
  border-bottom: 1px solid var(--rd-line-2, var(--border-subtle)); padding-bottom: 10px;
}
.an-subtab {
  font: 600 12.5px/1 inherit; color: var(--rd-ink-3, var(--fg-2)); cursor: pointer;
  background: var(--rd-panel, var(--bg-sunken)); border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: 999px; padding: 8px 14px;
}
.an-subtab:hover { color: var(--rd-teal-ink); border-color: var(--rd-teal-border, #BFE6DD); }
.an-subtab.on { background: var(--rd-teal-ink); border-color: var(--rd-teal-ink); color: #fff; }

/* --- storyboard: the cutaway list ---------------------------------------- */
.an-shot-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
/* Wider than the original 96px design: a storyboard whose thumbnails are too small
   to judge the shot by is just a list with decoration. */
.an-shot-list .an-shot-thumb { width: 148px; height: 100px; overflow: hidden; }
.an-shot-list .an-shot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-shot-empty { font-size: 10.5px; }
.an-shot-desc {
  font-size: 11.5px; color: var(--rd-ink-4, var(--fg-3)); line-height: 1.45; margin: 0 0 8px;
  max-width: 90ch;
}
.an-shot-noline { color: var(--rd-ink-4, var(--fg-3)); font-style: italic; }
/* The character shown above a sketched board — the only frame that exists before the render. */
.an-sketch-cast { display: flex; align-items: center; gap: 16px; }
.an-sketch-cast img {
  flex: none; width: 96px; height: 96px; object-fit: cover; display: block;
  border-radius: var(--rd-radius-ctrl, 8px); border: 1px solid var(--rd-line-2, var(--border-subtle));
}
.an-shot-play { border: 1px solid var(--rd-line-3, var(--border-default)); cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600; }
.an-shot-play:hover { border-color: var(--rd-teal); color: var(--rd-teal-ink); }
.an-shot-video {
  width: 100%; max-width: 300px; margin-top: 10px; border-radius: var(--rd-radius-ctrl, 8px);
  background: #000; display: block;
}
/* The clip-review card's OWN cap, and no top margin — shared class with AnShotCard's
   (Storyboard) inline clip preview above, whose 300px/margin-top:10px must stay
   untouched, so this is scoped to the review card's wrapper rather than changed on the
   bare .an-shot-video rule. Uncapped, a 9:16 clip at this column's width renders ~550px
   tall and forces the content column beside it to match, which made a ten-scene ad an
   enormous scroll. 260px is the height at which a reviewer can still judge the shot but
   two or three cards fit on screen at once; .an-shot-media .an-shot-thumb (the pending
   placeholder) is pinned to the SAME number so a clip landing mid-poll does not shove
   the page. Width recomputes from this per the replaced-element sizing rules, so it
   still scales down cleanly rather than cropping or distorting. */
.an-shot-video-wrap .an-shot-video {
  max-width: none; max-height: 260px; margin: 0 auto;
}
/* Regenerating an already-done clip: the OLD clip keeps playing underneath (there is
   nothing better to show yet) with a blurred, dimmed overlay on top — same "actively
   working" language as the first-generation pending state, just layered over real
   content instead of a placeholder box. */
.an-shot-video-wrap { position: relative; display: flex; justify-content: center; }
.an-shot-video-wrap.an-shot-regenerating .an-shot-video { filter: blur(4px) brightness(.6); }
.an-shot-regen-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; color: #fff; font-size: 12.5px; font-weight: 600;
}

/* Pending-clip placeholders — reads as "actively working," not "empty/broken." A b_roll
   shot with a still gets that still blurred as a backdrop; anything else gets a shimmer. */
.an-shot-thumb-still { padding: 0; overflow: hidden; background: #000; }
.an-shot-still-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Scaled up slightly so the blurred edge never shows the box's own background through it. */
  filter: blur(9px); transform: scale(1.12);
}
.an-shot-still-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.an-shot-still-spinner {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #fff;
}
.an-shot-still-spinner .an-shot-empty { color: #fff; }
@keyframes an-shot-shimmer {
  0% { background-position: -120px 0; }
  100% { background-position: 120px 0; }
}
.an-shot-thumb-shimmer {
  background-image: linear-gradient(
    90deg,
    var(--rd-panel, #E7E9EC) 0%,
    var(--rd-line-2, #EEF0F2) 50%,
    var(--rd-panel, #E7E9EC) 100%
  );
  background-size: 240px 100%;
  animation: an-shot-shimmer 1.4s ease-in-out infinite;
}

/* The style boilerplate, stripped from every shot description and shown once. */
.an-style-block { margin-top: 16px; border-top: 1px solid var(--rd-line-2, var(--border-subtle)); padding-top: 12px; }
.an-style-block > summary {
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--rd-ink-4, var(--fg-3)); list-style: none;
}
.an-style-block > summary::-webkit-details-marker { display: none; }
.an-style-block > summary::before { content: '▸ '; }
.an-style-block[open] > summary::before { content: '▾ '; }
.an-style-block > summary:hover { color: var(--rd-teal-ink); }
.an-style-block p {
  font-size: 11.5px; color: var(--rd-ink-4, var(--fg-3)); line-height: 1.55; margin: 8px 0 0; max-width: 90ch;
}

/* --- storyboard: beat lists ---------------------------------------------- */
.an-beat-list { display: flex; flex-direction: column; margin-top: 14px; }
.an-beat {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 0;
  border-bottom: 1px solid var(--rd-line-2, var(--border-subtle));
}
.an-beat:last-child { border-bottom: none; }
.an-beat-n {
  width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--rd-panel, var(--bg-sunken)); color: var(--rd-ink-3, var(--fg-2));
  border: 1px solid var(--rd-line-3, var(--border-default)); margin-top: 1px;
}
.an-beat-body { min-width: 0; display: grid; gap: 5px; }
.an-beat-line { font-size: 13.5px; font-weight: 600; color: var(--rd-ink-1, var(--fg-1)); }
.an-beat-scene { font-size: 13px; font-weight: 600; color: var(--rd-ink-1, var(--fg-1)); }
.an-beat-action { font-size: 12.5px; color: var(--rd-ink-3, var(--fg-2)); line-height: 1.5; max-width: 88ch; }
.an-beat-teaches { font-size: 12px; color: var(--rd-ink-4, var(--fg-3)); }
.an-beat-teaches strong { color: var(--rd-ink-3, var(--fg-2)); }

/* --- storyboard: world + locked designs ---------------------------------- */
.an-world-grid { margin-top: 14px; }
.an-world-grid .an-brief-v { line-height: 1.5; }
.an-cast-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
/* "Everyone in your ad" specifically -- these cards are portrait character
   plates, not the "other people" text rows above, so two side by side fits
   comfortably instead of stacking full-width. */
.an-cast-grid-2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .an-cast-grid-2col { grid-template-columns: 1fr; } }
.an-cast-card {
  border: 1px solid var(--rd-line-2, var(--border-subtle)); border-radius: var(--rd-radius-card, 14px);
  padding: 16px; background: var(--rd-surface, #fff); display: grid; gap: 16px; align-content: start;
}
.an-cast-hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: nowrap; }
.an-cast-hdr .an-subtabs, .an-cast-hdr > .an-pill { flex: none; }
/* Title + subtitle on one line instead of stacked, for a section whose subtitle
   is one short clause rather than a full sentence that needs its own row. */
.an-inline-hdr { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.an-inline-hdr .an-card-title { margin: 0; }
.an-inline-hdr .an-card-sub { margin: 0; }
.an-cast-name {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--rd-ink-1, var(--fg-1));
  text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.an-cast-form { font-size: 12.5px; color: var(--rd-ink-2, var(--fg-1)); }
.an-cast-design { font-size: 11.5px; color: var(--rd-ink-4, var(--fg-3)); line-height: 1.5; margin: 0; }
.an-cast-match { display: grid; gap: 5px; margin-top: 2px; }

/* --- quality: one row per check ------------------------------------------ */
.an-qc {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 0;
  border-bottom: 1px solid var(--rd-line-2, var(--border-subtle));
}
.an-qc:last-child { border-bottom: none; }
.an-qc-ic {
  width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
}
.an-qc.ok .an-qc-ic { background: var(--rd-teal-ink); color: #fff; }
.an-qc.bad .an-qc-ic { background: var(--rd-danger-fg, #B3261E); color: #fff; }
.an-qc.warn .an-qc-ic { background: var(--rd-warning-fg, #B8802A); color: #fff; }
.an-qc.skip .an-qc-ic {
  background: var(--rd-panel, var(--bg-sunken)); color: var(--rd-ink-4, var(--fg-3));
  border: 1px solid var(--rd-line-3, var(--border-default));
}
.an-qc-body { flex: 1; min-width: 0; }
.an-qc-hdr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* No capitalize: these were machine names ("master technicals") that needed prettifying;
   they are now written sentences, and Title Casing A Sentence Reads Like This. */
.an-qc-name { font-size: 13px; font-weight: 600; color: var(--rd-ink-1, var(--fg-1)); }
.an-qc-what { font-size: 12px; color: var(--rd-ink-3, var(--fg-2)); margin: 5px 0 0; line-height: 1.5; max-width: 84ch; }
.an-qc-detail {
  font: 500 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--rd-ink-4, var(--fg-3)); margin-top: 6px; padding: 6px 9px;
  background: var(--rd-panel, var(--bg-sunken)); border-radius: 6px;
  border: 1px solid var(--rd-line-2, var(--border-subtle)); overflow-wrap: anywhere;
}
.an-qc.skip { opacity: .68; }
.an-qc-score {
  flex: none; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--rd-ink-3, var(--fg-2)); margin-top: 1px;
}

/* --- spend: grouped cost bars ------------------------------------------- */
.an-spend-list { display: flex; flex-direction: column; margin-top: 16px; }
.an-spend-group { border-bottom: 1px solid var(--rd-line-2, var(--border-subtle)); }
.an-spend-group:last-child { border-bottom: none; }
.an-spend-group > summary {
  display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; list-style: none;
}
.an-spend-group > summary::-webkit-details-marker { display: none; }
.an-spend-group > summary::before {
  content: '▸'; flex: none; font-size: 10px; color: var(--rd-ink-4, var(--fg-3)); transition: transform .15s ease;
}
.an-spend-group[open] > summary::before { transform: rotate(90deg); }
.an-spend-label { font-size: 13px; font-weight: 600; color: var(--rd-ink-1, var(--fg-1)); flex: none; min-width: 150px; }
.an-spend-bar {
  flex: 1; height: 8px; min-width: 60px; border-radius: 999px; overflow: hidden;
  background: var(--rd-line-2, var(--bg-sunken));
}
.an-spend-bar > span { display: block; height: 100%; background: var(--rd-teal); border-radius: 999px; }
.an-spend-pct {
  flex: none; width: 40px; text-align: right; font-size: 11.5px; font-variant-numeric: tabular-nums;
  color: var(--rd-ink-4, var(--fg-3));
}
.an-spend-total {
  flex: none; width: 74px; text-align: right; font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--rd-ink-1, var(--fg-1));
}
.an-spend-group .an-cost-table { margin: 0 0 12px; padding-left: 22px; }

/* --- spend: run history -------------------------------------------------- */
.an-run-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 16px; }
.an-run-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--rd-ink-4, var(--fg-3)); font-weight: 700; padding: 0 12px 8px 0;
}
.an-run-table td {
  padding: 9px 12px 9px 0; border-top: 1px solid var(--rd-line-2, var(--border-subtle));
  color: var(--rd-ink-1, var(--fg-1)); vertical-align: middle; white-space: nowrap;
}
.an-run-table td:last-child, .an-run-table th:last-child {
  text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; font-weight: 600;
}
.an-run-table tr.bad td:first-child { color: var(--rd-danger-fg, #B3261E); }

@media (max-width: 720px) {
  .an-shot-row { flex-direction: column; }
  .an-shot-row.an-clip-card { grid-template-columns: 1fr; }
  .an-shot-list .an-shot-thumb { width: 100%; height: 150px; }
  /* Same pairing as the two-column layout: placeholder height must equal the video cap. */
  .an-shot-row .an-shot-media .an-shot-thumb { height: 220px; }
  .an-shot-video-wrap .an-shot-video { max-height: 220px; }
  .an-spend-label { min-width: 0; }
  .an-spend-group > summary { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   Asset Generation — minimal studio layout (Manual + Competitor Remix)
   -------------------------------------------------------------------------- */
.rd-assetgen-setup {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rd-assetgen-setup-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.rd-assetgen-setup-checklist {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.rd-assetgen-setup-checklist-title {
  margin: 0 0 10px;
  font-size: var(--text-sm);
  font-weight: 600;
}
.rd-assetgen-setup-checklist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}
.rd-assetgen-setup-checklist-row + .rd-assetgen-setup-checklist-row {
  border-top: 1px solid var(--border);
}
.rd-assetgen-setup-gate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.rd-assetgen-setup-gate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--primary-50, #e7f5f3);
  color: var(--primary-700, var(--brand));
}
.rd-assetgen-setup-gate-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
}
.rd-assetgen-setup-gate-desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 480px;
}
.rd-assetgen-setup-inprogress {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--border));
  border-radius: var(--radius-lg);
  background: var(--primary-50, #e7f5f3);
  color: var(--primary-700, var(--brand));
}
.rd-assetgen-setup-inprogress-title {
  margin: 0 0 4px;
  font-size: var(--text-sm);
  font-weight: 700;
}
.rd-assetgen-setup-inprogress-desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.45;
}
.rd-assetgen-setup-inprogress.at-cap {
  border-color: color-mix(in srgb, var(--warning-500, #f59e0b) 35%, var(--border));
  background: var(--warning-50, #fffbeb);
  color: var(--warning-700, #b45309);
}

.rd-assetgen-rail {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle, #f8fafc);
}
.rd-assetgen-rail.compact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  min-height: 32px;
}
.rd-assetgen-rail-compact-label {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.rd-assetgen-rail-compact-loading {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
}
.rd-assetgen-rail.compact .rd-assetgen-rail-scroll {
  padding-bottom: 0;
  min-width: 0;
}
.rd-assetgen-rail-chip.compact {
  padding: 3px 8px;
  max-width: 220px;
  border-radius: 999px;
}
.rd-assetgen-rail-chip-text.compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  line-height: 1.2;
}
.rd-assetgen-rail-chip-id {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.rd-assetgen-rail-chip-text:not(.compact) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: 1.25;
}
.rd-assetgen-rail-chip-text:not(.compact) .rd-assetgen-rail-chip-id {
  max-width: 180px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
}
.rd-assetgen-rail-chip.compact .rd-assetgen-rail-chip-btn {
  font-size: 11px;
  gap: 5px;
}
.rd-assetgen-rail-chip-status {
  flex: none;
  font-size: 10px;
  font-weight: 600;
  color: var(--brand);
  text-transform: lowercase;
  font-family: var(--font-mono);
}
.rd-assetgen-rail-chip.on .rd-assetgen-rail-chip-status {
  color: var(--primary-700, var(--brand));
}
.rd-assetgen-rail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rd-assetgen-rail-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--primary-50, #e7f5f3);
  color: var(--primary-700, var(--brand));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.rd-assetgen-rail-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px 2px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.45;
}
.rd-assetgen-rail-empty-error {
  color: var(--danger-fg, #b42318);
}
.rd-assetgen-rail-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.rd-assetgen-rail-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  max-width: 260px;
  padding: 5px 8px 5px 10px;
  border-radius: 8px;
  background: var(--rd-surface, var(--bg-surface));
  border: 1px solid var(--border);
}
.rd-assetgen-rail-chip.on {
  background: color-mix(in srgb, var(--brand) 8%, #fff);
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
}
.rd-assetgen-rail-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-weight: 500;
  font-size: 12px;
}
.rd-assetgen-rail-chip.on .rd-assetgen-rail-chip-btn { font-weight: 700; }
.rd-assetgen-rail-chip-meta {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.rd-assetgen-rail-chip-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--danger-fg, #b42318);
  cursor: pointer;
}
.rd-assetgen-rail-chip-del.compact {
  width: 20px;
  height: 20px;
  margin-left: 2px;
  border-radius: 999px;
}
.rd-assetgen-rail-chip-del:hover { background: #fef2f2; }

.rd-assetgen-studio {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rd-assetgen-sticky-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* position: sticky; */
  /* `.content` (the scrolling ancestor) has padding-top: 24px, and `top`
     here is measured from its PADDING edge, not its scrollport edge — so
     `top: 0` leaves that 24px band uncovered once stuck, letting whatever
     has scrolled underneath show through above this header. Offsetting by
     the negative of that padding pulls the stuck position up to the real
     scrollport edge, with no effect before it's stuck (sticky offsets only
     apply once the constraint engages). */
  /* top: -24px; */
  z-index: 20;

  border-bottom: 1px solid var(--border);
}
.rd-media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.rd-media-lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}
.rd-assetgen-sticky-head .rd-assetgen-job-compact {
  margin: 0;
  position: relative;
  z-index: 1;
}
.rd-assetgen-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 200px;
  position: relative;
  z-index: 0;
  isolation: isolate;
}
.rd-assetgen-asset-list,
.rd-assetgen-beat-card {
  position: relative;
  z-index: 0;
}
.rd-assetgen-vidthumb {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  contain: paint;
}
.rd-assetgen-vidthumb video,
.rd-assetgen-vidthumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.rd-assetgen-job-compact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}
.rd-assetgen-job-compact-step {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}
.rd-assetgen-job-compact-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  flex: 1;
  max-width: 220px;
}
.rd-assetgen-job-compact-progress .rd-assetgen-job-progress-bar {
  flex: 1;
  height: 4px;
}
.rd-assetgen-footer {
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-margin-bottom: 80px;


    padding: 24px 16px 21px;
    background: var(--rd-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
    font-family: var(--rd-font-sans);
    border-radius: var(--text-2xs);
}
.rd-assetgen-footer-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.rd-assetgen-footer-bar .rd-assetgen-rail.compact {
  flex: 1;
  min-width: 180px;
}
.rd-assetgen-footer-cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.rd-assetgen-footer-job-done {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rd-assetgen-footer-details {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.rd-assetgen-footer-details > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-muted);
  padding: 8px 0;
  list-style: none;
}
.rd-assetgen-footer-details > summary::-webkit-details-marker { display: none; }
.rd-assetgen-footer-details-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0 4px;
}
.rd-assetgen-footer-details .rd-assetgen-rail {
  border: none;
  background: transparent;
  padding: 0;
}
.rd-assetgen-footer-details .rd-assetgen-rail-head {
  display: none;
}
.rd-assetgen-subtabs {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 10px 14px;
  background: var(--surface-card, var(--bg-surface, #ffffff));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
  z-index: 1;
}
.rd-assetgen-subtabs-list {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.rd-assetgen-subtabs-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 8px;
}
.rd-assetgen-subtab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 0;
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: 999px;
  background: var(--surface-card, var(--bg-surface, #ffffff));
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  flex: 0 0 auto;
  justify-content: flex-start;
  min-width: 0;
  white-space: nowrap;
}
.rd-assetgen-subtab:hover:not(:disabled) {
  background: var(--bg-hover, #f4f4f5);
}
.rd-assetgen-subtab.on {
  color: var(--primary-700, var(--brand));
  background: var(--primary-50, #e7f5f3);
  border-color: var(--primary-400, var(--brand));
  box-shadow: none;
}
.rd-assetgen-subtab:disabled {
  opacity: 1;
  color: var(--text-muted);
  background: #f4f4f5;
  border-color: var(--border-subtle, var(--border));
  cursor: not-allowed;
}
.rd-assetgen-subtab-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 2px;
  padding-left: 8px;
  border-left: 1px solid var(--border-subtle, var(--border));
}
.rd-assetgen-subtab.on .rd-assetgen-subtab-count {
  color: var(--primary-700, var(--brand));
  border-left-color: color-mix(in srgb, var(--primary-400, var(--brand)) 35%, transparent);
}
.rd-assetgen-subtab-time {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  padding-left: 8px;
  border-left: 1px solid var(--border-subtle, var(--border));
}
.rd-assetgen-time-spent {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 14px 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.rd-assetgen-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.rd-assetgen-toolbar-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.rd-assetgen-toolbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.rd-assetgen-version-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--success-soft, #ecfdf5);
  color: var(--success-fg, #047857);
  border: 1px solid color-mix(in srgb, var(--success, #22c55e) 40%, var(--border));
  font-size: 11px;
  font-weight: 600;
}

.rd-assetgen-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.45;
}
.rd-assetgen-notice.warn {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #92400e;
}
.rd-assetgen-notice.error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b42318;
}

.rd-assetgen-job {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.rd-assetgen-job-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.rd-assetgen-job-progress {
  margin-top: 10px;
}
.rd-assetgen-job-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: var(--text-sm);
}
.rd-assetgen-job-progress-bar {
  height: 5px;
  border-radius: 999px;
  background: var(--surface-subtle, var(--ink-100));
  overflow: hidden;
}
.rd-assetgen-job-progress-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.rd-assetgen-job-stitch {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.rd-assetgen-job-stitch.active {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fcd34d;
}
.rd-assetgen-job-stitch.done {
  background: var(--success-soft, #ecfdf5);
  color: var(--success-fg, #047857);
  border: 1px solid var(--success, #22c55e);
}

.rd-assetgen-stage {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle, var(--ink-50));
}
.rd-assetgen-stage-top {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.rd-assetgen-stage-steps {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
}
.rd-assetgen-stage-step {
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  border: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--text-secondary);
}
.rd-assetgen-stage-step.done,
.rd-assetgen-stage-step.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.rd-assetgen-stage-step.pending { opacity: 0.45; }
.rd-assetgen-stage-connector {
  width: 12px;
  height: 2px;
  background: var(--border);
  flex: none;
}
.rd-assetgen-stage-connector.done { background: var(--brand); }
.rd-assetgen-stage-body { flex: 1; min-width: 200px; }
.rd-assetgen-stage-title {
  margin: 0 0 4px;
  font-size: var(--text-sm);
  font-weight: 700;
}
.rd-assetgen-stage-hint {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.45;
}
.rd-assetgen-stage-hint-details {
  margin-top: 6px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.rd-assetgen-stage-hint-details > summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 500;
  list-style: none;
}
.rd-assetgen-stage-hint-details > summary::-webkit-details-marker { display: none; }
.rd-assetgen-stage-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.rd-assetgen-time-total {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -4px 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.rd-assetgen-group-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.rd-assetgen-beat-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  overflow: hidden;
}
.rd-assetgen-beat-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.rd-assetgen-beat-hdr-title {
  font-weight: 600;
  font-size: var(--text-sm);
}
.rd-assetgen-beat-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rd-assetgen-beat-row {
  display: grid;
  grid-template-columns: minmax(160px, 188px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-subtle, #fafafa);
}
.rd-assetgen-beat-row.selected {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
  background: color-mix(in srgb, var(--brand) 4%, var(--surface-card));
}
.rd-assetgen-beat-field-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rd-assetgen-beat-field-hint {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.rd-assetgen-beat-actions {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rd-assetgen-beat-actions-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.rd-assetgen-beat-apply {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
  background: color-mix(in srgb, var(--brand) 6%, var(--surface-card));
}

.rd-assetgen-collapsible-panel {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  overflow: hidden;
}
.rd-assetgen-collapsible-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
}
.rd-assetgen-collapsible-body {
  padding: 0 14px 14px;
  border-top: 1px solid var(--border);
}
.rd-assetgen-asset-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rd-assetgen-chunk-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  overflow: hidden;
}
.rd-assetgen-chunk-card.selected {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
  background: color-mix(in srgb, var(--brand) 4%, var(--surface-card));
}
.rd-assetgen-chunk-main {
  display: grid;
  grid-template-columns: auto 88px minmax(0, 1fr);
  gap: 12px 14px;
  align-items: start;
  padding: 12px 14px;
}
.rd-assetgen-chunk-check {
  display: flex;
  padding-top: 4px;
  cursor: pointer;
}
.rd-assetgen-chunk-media {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.rd-assetgen-chunk-dl {
  font-size: var(--text-xs);
  color: var(--text-link, var(--brand));
  text-decoration: none;
}
.rd-assetgen-chunk-variants {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rd-assetgen-chunk-variant {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: 11px;
  color: var(--text-muted);
}
.rd-assetgen-chunk-variant.on { color: var(--brand); font-weight: 600; }
.rd-assetgen-chunk-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rd-assetgen-chunk-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.rd-assetgen-chunk-title {
  font-weight: 600;
  font-size: var(--text-sm);
}
.rd-assetgen-chunk-dur {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-left: auto;
}
.rd-assetgen-chunk-line {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rd-assetgen-chunk-card.editing .rd-assetgen-chunk-line { display: none; }
.rd-assetgen-chunk-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rd-assetgen-chunk-dur-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: 600;
}
.rd-assetgen-chunk-dur-row input[type="range"] { flex: 1; }
.rd-assetgen-chunk-dur-row strong {
  min-width: 28px;
  text-align: right;
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.rd-assetgen-chunk-hint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.rd-assetgen-chunk-hint.warn { color: var(--warning, #b45309); }
.rd-assetgen-chunk-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.rd-assetgen-chunk-confirm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
  background: color-mix(in srgb, var(--brand) 6%, var(--surface-card));
  font-size: var(--text-sm);
  font-weight: 600;
}
.rd-assetgen-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: -4px;
}
.rd-assetgen-page-head .rd-page-head { flex: 1; min-width: 0; margin: 0; padding: 15px 20px 0; }
.rd-page-head{
   padding: 15px 20px 0;
}
@media (max-width: 768px) {
  /* .rd-nav-shell is already position:fixed/full-height at every width (see
     its base rule above); on narrow screens it just goes to a narrower
     reserved width than the desktop 264px, matching its icon-only look. */
  .app { padding-left: 70px; }
  .rd-assetgen-beat-row {
    grid-template-columns: 1fr;
  }
  .rd-assetgen-chunk-main {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .rd-assetgen-chunk-media { grid-column: 2; }
  .rd-assetgen-toolbar-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }
}
/* New Css */

@media (max-width: 1100px) {
 .topbar-user-label{
  display: none;
 }
}
@media (max-width: 900px) {
.topbar-search{
  width: min(520px, 100%);
  z-index: 999;
}
}
.topbar-search-toggle { display: none; }
@media (max-width: 700px) {
  .topbar-center { justify-content: flex-end; }
  .topbar-search-toggle { display: inline-flex; }
  .topbar-search { display: none; }
  .topbar-center.search-open {
    position: absolute;
    top: 0; left: 0; right: 0; height: 56px;
    display: flex; align-items: center;
    padding: 0 24px;
    background: var(--bg-surface);
  }
  .topbar-center.search-open .topbar-search-toggle { display: none; }
  .topbar-center.search-open .topbar-search {
    display: flex;
    width: 100%;
  }
}

/* A vendor error, shown verbatim. Wraps rather than scrolls sideways: these messages are one long
   line of JSON and the useful half is at the end. */
.an-error-body {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: var(--surface-sunken, #f6f7f9);
  border-left: 3px solid var(--danger, #c0392b);
  border-radius: 0 6px 6px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
}

/* ============================================================================
   Animation Ads — Setup redesign (AnimationAdsPanel.jsx)

   Three additions, all in the existing .an-* namespace and all built on the
   --rd-* tokens so light and dark come for free:

     .an-adbar     the ad's identity as a header bar, not a form field
     .an-drawer    optional settings folded away (extends .rd-collapsible)
     .an-model-*   the video-model cards' badge, price line and caution
   ========================================================================== */

/* --- the ad identity bar -------------------------------------------------- */
.an-adbar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 10px 0;

  padding: 24px 16px 21px;
    background: var(--rd-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
    font-family: var(--rd-font-sans);
    border-radius: var(--rd-radius-card, 12px);
}
/* A visible well (background + border) so it reads as an editable field
   at rest, not just on hover/focus — the bold 19px weight still keeps it
   feeling like the ad's heading rather than a generic form input. */
.an-titlefield {
  flex: 1 1 260px; min-width: 0;
  font: 600 19px/1.3 var(--rd-font-sans, inherit);
  color: var(--rd-ink-1, var(--fg-1));
  background: var(--bg-hover, var(--rd-panel));
  border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: var(--rd-radius-ctrl, 8px);
  padding: 6px 8px; margin-left: -8px;
  transition: border-color 120ms var(--ease-standard, ease), background 120ms var(--ease-standard, ease);
}
.an-titlefield::placeholder { color: var(--rd-ink-4, var(--fg-3)); font-weight: 600; }
.an-titlefield:hover:not(:disabled) { border-color: var(--rd-line-3, var(--border-default)); }
.an-titlefield:focus {
  outline: none;
  background: var(--rd-surface, var(--bg-surface));
  border-color: var(--rd-teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-teal) 15%, transparent);
}
.an-adbar-actions { position: relative; display: flex; align-items: center; gap: 8px; }
.an-adbar-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
}
.an-adbar-chevron { margin-left: 2px; transition: transform 120ms var(--ease-standard, ease); color: var(--rd-ink-4, var(--fg-3)); }
.an-adbar-chevron.open { transform: rotate(180deg); }
/* Anchored to the right so a long ad list opens inward rather than off-screen. */
.an-adbar-panel { left: auto; right: 0; min-width: 340px; max-width: 460px; }
.an-adbar-panel .an-ad-list { margin: 0; }

/* --- the fine-tune drawer ------------------------------------------------- */
.an-drawer { margin: 18px 0 0; border-top: 1px solid var(--rd-line-2, var(--border-subtle)); }
.an-drawer > summary { padding-left: 0; padding-top: 12px; font-size: 13.5px; font-weight: 700; }
.an-drawer > summary:hover { background: transparent; }
/* This drawer has its own chevron icon box (below), so the generic
   .rd-collapsible corner-arrow marker would double up with it. */
.an-drawer > summary::before { display: none; }
.an-drawer-chevron {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 7px;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
  transition: transform 160ms var(--ease-standard, ease);
}
.an-drawer[open] .an-drawer-chevron { transform: rotate(90deg); }
.an-drawer-optional { margin-left: auto; color: var(--rd-ink-4, var(--fg-3)); font-weight: 500; font-size: 12.5px; }
.an-drawer .rd-collapsible-body { padding-left: 0; padding-right: 0; border-top: none; }
/* A closed drawer must never hide a decision somebody made, so anything changed
   from its default is announced on the row you would otherwise skip past. */
.an-drawer-count {
  margin-left: auto;
  border-radius: 999px; padding: 2px 8px;
  font-size: 11px; font-weight: 700;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
}

/* Checkmark-circle radio icon for AnChoiceCards(radio) -- opt-in via the
   `radio` prop, so every other choice-card grid keeps its glyph/thumbnail. */
.an-choice-radio-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--rd-line-3, var(--border-default)); color: transparent;
  transition: background 120ms var(--ease-standard, ease), border-color 120ms var(--ease-standard, ease);
}
.an-choice-radio-icon.selected { background: var(--rd-teal); border-color: var(--rd-teal); color: #fff; }
.an-choice-title-badge {
  margin-left: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--rd-teal-ink); background: var(--rd-teal-tint); border-radius: 999px; padding: 2px 8px;
  vertical-align: middle;
}

/* Look-and-feel: the variant card grid plus an optional explanatory note
   (e.g. "only look available for a Song Ad") sitting beside it. */
.an-look-row { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.an-look-cards { flex: 1 1 0; min-width: 260px; }
.an-look-note {
  flex: 1 1 0; min-width: 260px; display: flex; align-items: flex-start; gap: 8px;
  border: 1.5px dashed var(--rd-line-3, var(--border-default)); border-radius: var(--rd-radius-ctrl, 8px);
  padding: 14px 16px; font-size: 13px; line-height: 1.5; color: var(--rd-ink-3, var(--fg-2));
}
.an-look-note svg { flex: none; margin-top: 2px; color: var(--rd-ink-4, var(--fg-3)); }

/* Icon/radio glyph inline with the title instead of stacked above it, with the
   description dropping to its own full-width line below both. Opt-in via
   className so every other AnChoiceCards grid keeps its default column card. */
.an-choice-cards-row .an-choice-card {
  display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; row-gap: 4px; align-items: start;
}
.an-choice-cards-row .an-choice-icon {
  grid-column: 1; grid-row: 1;
  margin: 0; width: 36px; height: 36px; padding: 9px; box-sizing: border-box;
  border-radius: 10px; background: var(--rd-teal); color: #fff;
}
.an-choice-cards-row .an-choice-radio-icon { grid-column: 1; grid-row: 1; }
.an-choice-cards-row .an-choice-title { grid-column: 2; grid-row: 1; align-self: center; min-width: 0; }
.an-choice-cards-row .an-choice-desc { grid-column: 2; grid-row: 2; }
/* Video-model cards keep a white bordered icon box instead of the solid teal
   fill the Song Ad / product-picker row cards use -- the price stat box that
   sits beside these cards already carries the accent for the row. */
.an-model-cards.an-choice-cards-row .an-choice-icon {
  background: var(--rd-surface, #fff); border: 1px solid var(--rd-line-2, var(--border-subtle));
  color: var(--rd-teal-ink);
}
.an-choice-cards-row .an-choice-stat {
  grid-column: 3; grid-row: 1 / span 2; align-self: center; margin-left: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-width: 110px; padding: 10px 14px; border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: var(--rd-radius-ctrl, 8px); background: var(--rd-surface, #fff);
}
.an-choice-stat-value { font-size: 17px; font-weight: 700; color: var(--rd-ink-1, var(--fg-1)); }
.an-choice-stat-caption {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--rd-ink-4, var(--fg-3)); margin-top: 2px;
}
@media (max-width: 560px) {
  .an-choice-cards-row .an-choice-stat { grid-column: 2; grid-row: 3; margin-left: 0; margin-top: 8px; align-self: start; }
}

/* --- the video-model cards ------------------------------------------------ */
.an-model-cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.an-choice-card { position: relative; }
.an-choice-badge {
  position: absolute; top: 10px; right: 10px;
  border-radius: 999px; padding: 2px 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  background: var(--rd-teal-ink); color: #fff;
}
.an-choice-meta {
  margin-top: auto; padding-top: 6px;
  font-size: 11.5px; font-weight: 600;
  color: var(--rd-ink-4, var(--fg-3));
  font-variant-numeric: tabular-nums;
}
/* Amber, not a disabled state: the reason a model might refuse is usually about
   the CONTENT of this particular ad, so the person writing the script is the one
   who can judge it. Hiding the option would recreate the failure this warns about. */
.an-choice-flag {
  display: flex; align-items: flex-start; gap: 5px;
  margin-top: 8px; padding: 7px 8px;
  border-radius: var(--rd-radius-ctrl, 6px);
  font-size: 11.5px; line-height: 1.4; text-align: left;
  background: var(--rd-warning-bg, #FEF6E7);
  color: var(--rd-warning-fg, #8A5A00);
  border: 1px solid var(--rd-warning-bd, #F2DCA8);
}
.an-choice-flag svg { flex: none; margin-top: 1px; }

@media (max-width: 720px) {
  .an-adbar { flex-direction: column; align-items: stretch; }
  .an-adbar-actions { justify-content: space-between; }
  .an-adbar-panel { left: 0; right: 0; min-width: 0; }
  .an-brief-grid { grid-template-columns: 1fr; }
}

/* =====================================================   Animation Ads — the Cast step
   ------------------------------------------------------------
   Two questions, asked in order: who is in this ad, and who plays whom. The
   audience is a marketer, not an operator, so the vocabulary on screen is
   photos and names — never ids, never mappings.

   PHOTOS ARE NEVER CROPPED. A reference photo is a person's FACE, and a square
   `cover` box eats the top and bottom of every portrait — heads, hair, chins.
   The pack picker already settled this for product shots (.an-choice-thumb):
   `contain` on a tinted pad shows the whole image and lets any shape sit in a
   uniform grid. Faces get the same treatment; the small round chips keep
   `cover` (a face crop is what a chip is for) biased high so the head, not the
   chest, survives.
   ============================================================ */
.an-cast { display: grid; gap: 26px; margin-top: 16px; }

.an-cast-step-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.an-cast-step-num {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
  font-size: 12px; font-weight: 700; align-self: center;
}
.an-cast-step-title { font-size: 14px; font-weight: 700; color: var(--rd-ink-1, var(--fg-1)); }
.an-cast-step-sub { font-size: 12.5px; color: var(--rd-ink-3, var(--fg-2)); margin: 0 0 12px 32px; }

/* --- the people themselves ------------------------------------------------ */
.an-cast-grid { display: grid;  gap: 14px; }
.an-cast-tile {
  position: relative; display: flex; flex-direction: column;
  border: 1.5px solid var(--rd-line-2, var(--border-subtle));
  border-radius: var(--rd-radius-card, 14px);
  background: var(--rd-surface, var(--bg-surface)); overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.an-cast-tile:hover { border-color: var(--rd-line-3, var(--border-default)); box-shadow: 0 2px 10px rgba(17, 24, 39, .06); }
.an-cast-tile.is-empty { border-style: dashed; }
.an-cast-photo {
  width: 100%; aspect-ratio: 4 / 5; object-fit: contain; display: block;
  background: var(--rd-surface-2, var(--bg-sunken)); padding: 8px; box-sizing: border-box;
}
.an-cast-photo-blank {
  width: 100%; aspect-ratio: 4 / 5; box-sizing: border-box;
  background: var(--rd-surface-2, var(--bg-sunken));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--rd-ink-4, var(--fg-3)); font-size: 12px; text-align: center; padding: 8px;
}





.an-cast-name {
  width: 100%; box-sizing: border-box; border: 0; background: transparent;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--rd-ink-1, var(--fg-1));
  padding: 10px 0;
}
.an-cast-name:hover { background: var(--rd-surface-2, var(--bg-sunken)); }
.an-cast-name:focus { outline: none; background: var(--rd-surface-2, var(--bg-sunken)); }
.an-cast-tile-x {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
  border: 0; cursor: pointer; background: rgba(17, 24, 39, .55); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1;
  opacity: 0; transition: opacity .15s ease;
}
.an-cast-tile:hover .an-cast-tile-x, .an-cast-tile-x:focus-visible { opacity: 1; }
.an-cast-more {
  width: 100%; border: 0; border-top: 1px solid var(--rd-line-2, var(--border-subtle));
  background: transparent; cursor: pointer; padding: 8px 12px; text-align: left;
  font-family: inherit; font-size: 12px; color: var(--rd-ink-4, var(--fg-3));
}
.an-cast-more:hover { background: var(--rd-surface-2, var(--bg-sunken)); color: var(--rd-ink-2, var(--fg-1)); }
.an-cast-details { display: grid; gap: 8px; padding: 10px 12px 12px; }

.an-cast-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 150px; cursor: pointer; text-align: center; padding: 16px;
  border: 1.5px dashed var(--rd-line-3, var(--border-default));
  border-radius: var(--rd-radius-card, 14px);
  background: var(--rd-surface-2, var(--bg-sunken));
  color: var(--rd-ink-3, var(--fg-2)); font-size: 12.5px; font-weight: 600;
  transition: border-color .15s ease, color .15s ease;
}
.an-cast-add:hover { border-color: var(--rd-teal); color: var(--rd-teal-ink); }
.an-cast-add.is-dropping { border-color: var(--rd-teal); background: var(--rd-teal-tint); }

/* --- who plays whom ------------------------------------------------------- */
.an-cast-roles { display: grid; gap: 10px; }
.an-cast-role {
  border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: var(--rd-radius-card, 14px);
  background: var(--rd-surface, var(--bg-surface)); padding: 12px 14px;
}
.an-cast-role.is-unset { border-color: var(--rd-warning-fg, #B8802A); }
.an-cast-role-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.an-cast-role-name { font-size: 13px; font-weight: 700; color: var(--rd-ink-1, var(--fg-1)); }
.an-cast-role-lead { font-size: 11px; font-weight: 600; color: var(--rd-teal-ink); background: var(--rd-teal-tint); border-radius: 999px; padding: 2px 8px; }
.an-cast-role-x {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  color: var(--rd-ink-4, var(--fg-3)); font-size: 16px; line-height: 1; padding: 2px 4px;
}
.an-cast-role-x:hover { color: var(--rd-danger-fg, #B4332B); }

/* Pick a FACE, not a dropdown: the whole cast is on screen, one tap assigns. */
.an-cast-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.an-cast-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1.5px solid var(--rd-line-2, var(--border-subtle));
  border-radius: 999px; padding: 5px 12px 5px 5px;
  background: var(--rd-surface, var(--bg-surface));
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--rd-ink-2, var(--fg-1));
  transition: border-color .15s ease, background .15s ease;
}
.an-cast-chip:hover { border-color: var(--rd-line-3, var(--border-default)); }
.an-cast-chip.selected {
  border-color: var(--rd-teal); background: var(--rd-teal-tint); color: var(--rd-teal-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-teal) 15%, transparent);
}
.an-cast-chip-face {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: 50% 25%;
  background: var(--rd-surface-2, var(--bg-sunken)); flex: none;
}
.an-cast-chip-face.is-blank {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--rd-ink-4, var(--fg-3)); font-size: 13px; font-weight: 700;
}
.an-cast-chip.is-plain { padding-left: 12px; }

/* --- adding someone the script mentions ----------------------------------- */
.an-cast-addrole { display: flex; gap: 8px; align-items: stretch; margin-top: 12px; }
.an-cast-addrole .an-input { flex: 1; }
.an-cast-empty {
  border: 1px dashed var(--rd-line-3, var(--border-default));
  border-radius: var(--rd-radius-card, 14px);
  padding: 18px; text-align: center; color: var(--rd-ink-4, var(--fg-3)); font-size: 12.5px;
  background: var(--rd-surface-2, var(--bg-sunken));
}
@media (max-width: 720px) {
  .an-cast-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
}

/* --- Animation Ads hub + Seedance wizard ---------------------------------- */
/* .an-hub {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 8px 56px;
  min-height: calc(100vh - 96px);
  overflow: hidden;
} */
.an-hub-glow {
  pointer-events: none;
  position: absolute;
  top: -80px;
  left: -140px;
  right: -140px;
  display: none !important;
  /* Fixed height, anchored to the top — NOT `inset` with both top+bottom, which stretches
     this to .an-hub's full auto height (hero + cards + recent + steps, easily 2x a viewport).
     The gradient stops below are percentages of this box, so stretching it made them bunch
     up in the first ~15% of a much taller box, leaving everything past the hero on flat
     white with a hard seam. A fixed height keeps the wash's own proportions stable and lets
     it fade to transparent (via the `transparent 70-74%` stops) well inside the visible page,
     regardless of how much content renders below it.
     Kept short (behind the hero text only, fading out before the cards) and faint — .content
     (the scroll container this sits in) already paints its own page-wide --rd-teal-tint wash,
     so this used to double up into one flat, fairly opaque teal panel spanning the hero, the
     cards and "Recent projects" instead of reading as a soft accent glow. */
  height: 320px;
  background:
    radial-gradient(ellipse 80% 50% at 18% 8%, color-mix(in srgb, var(--rd-teal) 13%, transparent), transparent 72%),
    radial-gradient(ellipse 70% 45% at 86% 12%, color-mix(in srgb, var(--primary-300, #7eb8a2) 10%, transparent), transparent 70%),
    radial-gradient(ellipse 90% 55% at 40% 58%, color-mix(in srgb, var(--rd-teal) 8%, transparent), transparent 74%),
    radial-gradient(ellipse 70% 40% at 78% 88%, color-mix(in srgb, var(--primary-300, #7eb8a2) 7%, transparent), transparent 72%);
  animation: an-hub-glow-drift 8s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes an-hub-glow-drift {
  from { transform: translateX(-12px) scale(1); opacity: .85; }
  to { transform: translateX(18px) scale(1.05); opacity: 1; }
}
.an-hub-hero, .an-hub-cards, .an-hub-recent, .an-hub-steps { position: relative; z-index: 1; }
.an-hub-hero { margin-bottom: 28px; }
.an-hub-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rd-teal-ink); margin: 0 0 8px;
}
.an-hub-title {
  /* font-size: clamp(28px, 4vw, 36px); font-weight: 750; letter-spacing: -.025em; line-height: 1.15; */
  margin: 0; color: var(--rd-ink-1, var(--fg-1));
}
.an-hub-sub {
  font-size: 15.5px; line-height: 1.55; color: var(--rd-ink-3, var(--fg-2));
  margin: 12px 0 0; max-width: 68ch;
}
.an-hub-cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  margin-bottom: 8px;
}
.an-hub-card {
  position: relative; text-align: left; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column;
  border: 1.5px solid var(--rd-line-2, var(--border-subtle));
  border-radius: 18px; padding: 28px 26px 24px;
  min-height: 280px;
  /* Was color-mix(..., #fff) — mixing toward literal white instead of the
     theme's own surface color. --rd-teal-tint is semi-transparent in dark
     mode (a wash meant to sit over a real surface, not a solid color), so
     mixing it against opaque white collapsed straight to a washed-out
     near-white regardless of theme — this card stayed light (illegible
     against dark-mode text colors) even in dark mode. Mixing toward
     var(--rd-surface) instead keeps the wash properly tinting whatever the
     theme's actual card background is. */
  background:
    linear-gradient(165deg, var(--rd-surface, #fff) 0%, color-mix(in srgb, var(--rd-teal-tint) 35%, var(--rd-surface, #fff)) 100%);
  font-family: inherit; color: inherit;
  box-shadow: 0 1px 2px rgba(20,24,27,.04), 0 14px 36px -24px rgba(20,24,27,.28);
  transition: border-color .2s ease, box-shadow .25s ease, transform .25s cubic-bezier(.2,.8,.2,1);
  animation: an-hub-card-in .55s cubic-bezier(.2,.8,.2,1) both;
}
.an-hub-card-classic {
  background:
    linear-gradient(165deg, var(--rd-surface, #fff) 0%, color-mix(in srgb, var(--rd-panel, #f3f5f4) 80%, #fff) 100%);
  animation-delay: .08s;
}
/* The featured lane keeps its teal border always, not just on hover, so it
   reads as the recommended option rather than a card someone happens to be
   pointing at. */
.an-hub-card-seedance { border-color: var(--rd-teal); }
@keyframes an-hub-card-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.an-hub-card:hover {
  border-color: var(--rd-teal);
  box-shadow: 0 12px 40px -18px rgba(20, 24, 27, .38);
  transform: translateY(-4px) scale(1.01);
}
.an-hub-card-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.45) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .7s ease;
}
.an-hub-card:hover .an-hub-card-shine { transform: translateX(120%); }
.an-hub-card-badge {
  position: absolute; top: 16px; right: 16px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--rd-teal); color: #fff;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--rd-teal) 70%, transparent);
}
.an-hub-card-icon-wrap {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
  transition: transform .25s ease;
}
.an-hub-card-icon-wrap-classic {
  background: var(--rd-panel, var(--bg-sunken)); color: var(--rd-ink-2, var(--fg-1));
}
.an-hub-card:hover .an-hub-card-icon-wrap { transform: scale(1.08) rotate(-3deg); }
.an-hub-card-icon { color: inherit; }
/* Icon + title on one row (Remix hub) instead of the icon stacked above the title —
   scoped to this wrapper only so the vertical layout other .an-hub-card consumers
   (AnimationHubScreen, SeedanceAdsPanel) already ship stays untouched. */
.an-hub-card-hdr { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.an-hub-card-hdr .an-hub-card-icon-wrap { margin-bottom: 0; }
.an-hub-card-hdr .an-hub-card-title { margin-bottom: 0; }
.an-hub-card-title {
  display: block; font-size: 20px; font-weight: 500; letter-spacing: -.02em; margin-bottom: 10px;
}
.an-hub-card-desc {
  display: block; font-size: 14.5px; line-height: 1.55; color: var(--rd-ink-3, var(--fg-2));
}
.an-hub-card-meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;
}
.an-hub-card-meta > span {
  /* Same fix as .an-hub-card's own background above — mixing the
     semi-transparent (in dark mode) --rd-teal-tint against opaque white
     always produced a near-white pill, unreadable behind dark-mode's light
     --rd-teal-ink text. */
  font-size: 11.5px; font-weight: 600; color: var(--rd-teal-ink);
  background: color-mix(in srgb, var(--rd-teal-tint) 70%, var(--rd-surface, #fff));
  padding: 5px 10px; border-radius: 999px;
}
.an-hub-card-classic .an-hub-card-meta > span {
  color: var(--rd-ink-2, var(--fg-1));
  background: var(--rd-panel, var(--bg-sunken));
}
/* Remix hub keeps both lanes' tag pills neutral gray — even the featured
   (-seedance) card — instead of the teal-tinted pill that class gets
   elsewhere, since here only the border/CTA should signal "primary lane". */
.an-hub-remix .an-hub-card-seedance .an-hub-card-meta > span {
  color: var(--rd-ink-2, var(--fg-1));
  background: var(--rd-panel, var(--bg-sunken));
}
.an-hub-card-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 22px; width: 100%; height: 46px; border-radius: 10px;
  font-size: 14px; font-weight: 700;
  transition: gap .2s ease, background .15s ease, border-color .15s ease;
}
.an-hub-card:hover .an-hub-card-cta { gap: 12px; }
.an-hub-card-seedance .an-hub-card-cta { background: var(--rd-teal); color: #fff; }
.an-hub-card-seedance:hover .an-hub-card-cta { background: var(--rd-teal-ink); }
.an-hub-card-classic .an-hub-card-cta {
  background: var(--rd-surface, #fff); color: var(--rd-ink-1, var(--fg-1));
  border: 1.5px solid var(--rd-line-3, var(--border-default));
}
.an-hub-card-classic:hover .an-hub-card-cta { border-color: var(--rd-teal); }

.an-hub-recent { margin-top: 40px; }
.an-hub-recent-hdr {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.sd-recent-hdr-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.an-hub-recent-title {
  font-size: 15px; font-weight: 600; margin: 0; color: var(--rd-ink-2, var(--fg-1));
}
.an-hub-recent-loading { font-size: 12.5px; color: var(--rd-ink-4, var(--fg-3)); font-weight: 600; }
.an-hub-recent-count {
  font-size: 12px; font-weight: 700; color: var(--rd-ink-3, var(--fg-2));
  background: var(--rd-panel, var(--bg-sunken)); border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: 999px; padding: 4px 10px;
}
.sd-recent-tabs {
  display: flex; align-items: center; gap: 2px;
  background: var(--rd-panel, var(--bg-sunken)); border-radius: 999px; padding: 3px;
}
.sd-recent-tab {
  border: 0; background: transparent; border-radius: 999px; padding: 6px 12px;
  font-size: 12.5px; font-weight: 700; color: var(--rd-ink-3, var(--fg-2)); cursor: pointer;
}
.sd-recent-tab.active { background: var(--rd-teal); color: #fff; }
.sd-recent-search {
  display: flex; align-items: center; gap: 8px; flex: none; min-width: 220px;
  border: 1px solid var(--rd-line-2, var(--border-subtle)); border-radius: 8px;
  padding: 7px 10px; background: var(--rd-surface, #fff); color: var(--rd-ink-3, var(--fg-2));
}
.sd-recent-search input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 13px; color: var(--rd-ink-1, var(--fg-1));
}
.sd-recent-list {
  border: 1px solid var(--rd-line-2, var(--border-subtle)); border-radius: 14px;
  overflow: hidden; background: var(--rd-surface, #fff);
}
.sd-recent-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border-bottom: 1px solid var(--rd-line-2, var(--border-subtle));
  animation: an-hub-card-in .35s cubic-bezier(.2,.8,.2,1) both;
  transition: background 120ms var(--ease-standard, ease);
}
.sd-recent-row:last-child { border-bottom: 0; }
.sd-recent-row:hover { background: var(--rd-panel, var(--bg-sunken)); }
.sd-recent-row.an-hub-project-skel { min-height: 58px; }
.sd-recent-row-main {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
  padding: 0; border: 0; background: transparent; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
}
.sd-recent-row-main:disabled { opacity: .6; cursor: wait; }
.sd-recent-row-pill { flex: none; }
.sd-recent-row-format { flex: none; width: 70px; font-size: 12.5px; color: var(--rd-ink-3, var(--fg-2)); }
.sd-recent-row-status {
  flex: 1 1 160px; min-width: 0; display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--rd-ink-3, var(--fg-2));
}
.sd-recent-row-status > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-hub-status-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--rd-ink-4, var(--fg-3)); }
.an-hub-status-dot-waiting { background: var(--warning-500, #f59e0b); }
.an-hub-status-dot-running { background: var(--rd-ink-4, var(--fg-3)); }
.an-hub-status-dot-done { background: var(--rd-teal); }
.an-hub-status-dot-failed { background: var(--danger-500); }
.an-hub-status-dot-cancelled { background: var(--rd-ink-4, var(--fg-3)); }
.sd-recent-row-date { flex: none; width: 80px; font-size: 12.5px; color: var(--rd-ink-4, var(--fg-3)); }
.sd-recent-row-open { flex: none; height: 34px; padding: 0 18px; }
.sd-recent-row-delete {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--rd-line-2, var(--border-subtle));
  background: var(--rd-surface, #fff); color: var(--rd-ink-3, var(--fg-2)); cursor: pointer;
}
.sd-recent-row-delete:hover { border-color: #fecaca; background: #fff1f2; color: #b42318; }
.sd-recent-row-delete:disabled { opacity: .6; cursor: wait; }
.sd-recent-more {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  margin-top: 12px; height: 40px; border: 1px solid var(--rd-line-2, var(--border-subtle)); border-radius: 10px;
  background: var(--rd-surface, #fff); color: var(--rd-teal-ink); font-size: 13px; font-weight: 700; cursor: pointer;
}
.sd-recent-more:hover { background: var(--rd-teal-tint); }
.sd-recent-more-icon { transition: transform 160ms var(--ease-standard, ease); }
.sd-recent-more-icon.open { transform: rotate(180deg); }
@media (max-width: 720px) {
  .sd-recent-row { flex-wrap: wrap; }
  .sd-recent-row-format, .sd-recent-row-date { width: auto; }
  .sd-recent-row-status { flex-basis: 100%; order: 3; }
  .sd-recent-row-open, .sd-recent-row-delete { margin-left: auto; }
}
.an-hub-recent-empty {
  margin: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border: 1px dashed var(--rd-line-3, var(--border-default));
  border-radius: 14px;
  background: var(--rd-surface, #fff);
  color: var(--rd-ink-3, var(--fg-2));
  font-size: 13.5px;
}
.an-hub-recent-empty-icon {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
}
.an-hub-project-card {
  flex: 0 0 min(300px, 82vw);
  scroll-snap-align: start;
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  text-align: left; font-family: inherit;
  border: 1.5px solid var(--rd-line-2, var(--border-subtle));
  border-radius: 18px; padding: 16px 14px;
  background: var(--rd-surface, #fff);
  box-shadow: 0 8px 24px -20px rgba(20,24,27,.35);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  animation: an-hub-card-in .45s cubic-bezier(.2,.8,.2,1) both;
}
.an-hub-project-card:hover {
  transform: translateY(-3px);
  border-color: var(--rd-teal);
  box-shadow: 0 14px 32px -18px rgba(20,24,27,.4);
}
.an-hub-project-skel {
  min-height: 88px; pointer-events: none;
  background: linear-gradient(90deg, var(--rd-panel,#f0f2f1) 25%, #fff 50%, var(--rd-panel,#f0f2f1) 75%);
  background-size: 200% 100%;
  animation: an-hub-skel 1.2s ease-in-out infinite;
}
@keyframes an-hub-skel {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
.an-hub-project-art {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
}
.an-hub-project-classic .an-hub-project-art {
  background: var(--rd-panel, var(--bg-sunken)); color: var(--rd-ink-2);
}
.an-hub-project-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.an-hub-project-name {
  font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The ad id, under the typed name. Monospaced and dimmed so it reads as a key rather than
   as a second title, and truncated rather than wrapped -- these cards sit in a horizontal
   scroller and a wrapped id would change their height. */
.an-hub-project-id {
  font-family: var(--rd-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10.5px; letter-spacing: .01em;
  color: var(--rd-ink-4, var(--fg-3)); opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.an-hub-project-meta {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 11.5px; color: var(--rd-ink-4, var(--fg-3));
}
.an-hub-project-main {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
  min-width: 0; padding: 0; border: 0; background: transparent;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.an-hub-project-main:disabled { opacity: .6; cursor: wait; }
.an-hub-project-actions { display: flex; flex-direction: column; gap: 6px; flex: none; }
.an-hub-project-open {
  height: 28px; padding: 0 10px;
  border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: 8px; background: var(--rd-surface, #fff);
  font-size: 12px; font-weight: 700; color: var(--rd-teal-ink);
  cursor: pointer; font-family: inherit;
}
.an-hub-project-open:hover { border-color: var(--rd-teal); }
.an-hub-project-delete {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 28px; padding: 0 10px;
  border: 1px solid #fecaca; border-radius: 8px;
  background: #fff; color: #b42318;
  font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.an-hub-project-delete:hover { background: #fff1f2; }
.an-hub-project-delete:disabled { opacity: .6; cursor: wait; }
.an-hub-pill {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: var(--rd-panel, var(--bg-sunken));
}
.an-hub-pill-seedance { background: var(--rd-teal-tint); color: var(--rd-teal-ink); }
.an-hub-pill-classic { color: var(--rd-ink-3, var(--fg-2)); }

.an-hub-steps { margin-top: 36px; }
.an-hub-steps-row {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 12px;
}
.an-hub-step {
  border: 1.5px solid var(--rd-line-2, var(--border-subtle));
  border-radius: 16px; padding: 14px 16px;
  background: color-mix(in srgb, var(--rd-surface, #fff) 88%, var(--rd-teal-tint));
  display: flex; flex-direction: column; gap: 6px;
  animation: an-hub-card-in .5s cubic-bezier(.2,.8,.2,1) both;
}
.an-hub-step-hdr { display: flex; align-items: center; gap: 8px; }
.an-hub-step:nth-child(1) { animation-delay: .05s; }
.an-hub-step:nth-child(2) { animation-delay: .1s; }
.an-hub-step:nth-child(3) { animation-delay: .15s; }
.an-hub-step:nth-child(4) { animation-delay: .2s; }
.an-hub-step:nth-child(5) { animation-delay: .25s; }
.an-hub-step-n {
  flex: none; width: 22px; height: 22px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 750;
  background: var(--rd-teal); color: #fff;
}
.an-hub-step strong { font-size: 13px; }
.an-hub-step span { font-size: 12px; line-height: 1.4;  }

.sd-card-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 14px;
}
.sd-edit-card {
  /* The name input, look-notes textarea, "N photo(s) mapped" hint and the
     Add/Remove row had no spacing between them at all — a plain block
     stack with zero margin on any of them — so they read as one cramped
     block instead of separate fields. A flex column with a real gap fixes
     every one of those seams at once instead of hand-tuning margin on each
     child individually. */
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--rd-line-2, var(--border-subtle)); border-radius: 14px;
  padding: 18px; background: var(--rd-surface, var(--bg-surface));
}
.sd-edit-card-hdr {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px;
}
.sd-variant-block { margin-top: 10px; }

/* Character cards on the Scene plan step (SeedancePlanScreen) — an avatar-initial +
   name/role header and a few trait pills extracted from the free-text appearance
   paragraph, then the same Edit-to-reveal lock field the Environments step uses. */
.sd-char-section-hdr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sd-char-card-hdr { display: flex; align-items: center; gap: 10px; }
.sd-char-avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 6px; font-size: 15px; font-weight: 700;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
}
.sd-char-card-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sd-char-card-id strong { font-size: 15px; font-weight: 700; color: var(--rd-ink-1, var(--fg-1)); }
.sd-char-traits { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-char-trait-pill {
  font-size: 11.5px; font-weight: 500; color: var(--rd-ink-2, var(--fg-2));
  background: var(--rd-teal-tint); border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: 10px; padding: 3px 10px;
}

/* Character preview cards (Seedance Characters step, generation) — status pill
   + tag in the card header, a large placeholder/preview box, then the same
   Edit-to-reveal "character lock" field used elsewhere. */
.sd-char-preview-tags { display: flex; align-items: center; gap: 8px; flex: none; }
.sd-char-preview-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--rd-ink-3, var(--fg-2));
  background: var(--rd-panel, var(--bg-sunken)); border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: 20px; padding: 3px 10px 3px 8px;
}
.sd-char-preview-status-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--rd-ink-4, var(--fg-4, #9aa4a1));
}
.sd-char-preview-frame {
  height: 400px;
  border: 1px solid var(--rd-line-2, var(--border-subtle)); border-radius: 12px;
  overflow: hidden; background: var(--rd-panel, var(--bg-sunken));
}
.sd-character-preview { display: block; width: 100%; height: 100%; object-fit: cover; }
.sd-char-preview-imgbtn {
  position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer;
}
.sd-char-preview-expand {
  position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #fff; background: rgba(20, 28, 26, 0.72);
  border-radius: 20px; padding: 6px 12px; opacity: 0; transition: opacity 120ms var(--ease-standard, ease);
}
.sd-char-preview-imgbtn:hover .sd-char-preview-expand,
.sd-char-preview-imgbtn:focus-visible .sd-char-preview-expand { opacity: 1; }
.sd-char-preview-empty {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px;
  padding: 32px 24px;
}
.sd-char-preview-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
}
.sd-char-preview-empty p {
  margin: 0; max-width: 320px; font-size: 13px; line-height: 1.5; color: var(--rd-ink-3, var(--fg-2));
}
.sd-char-preview-cta { margin-top: 4px; height: 38px; padding: 0 18px; }

/* Empty state for the "Character photos" mapping card -- centered icon/copy/CTA
   instead of a left-aligned hint line, matching the character-preview empty state. */
.sd-cast-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 28px 24px;
}
.sd-cast-empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
}
.sd-cast-empty p {
  margin: 0; max-width: 360px; font-size: 13.5px; line-height: 1.5; color: var(--rd-ink-3, var(--fg-2));
}
.sd-cast-empty .btn-primary { height: 38px; padding: 0 18px; }

/* One character-photo mapping card -- numbered badge + inline name field + delete
   icon in the header, then an Angles dropzone and a Look notes rich text field
   below, each under its own Environments-style section label. */
.sd-cast-card-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sd-cast-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; font-size: 12.5px; font-weight: 700;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
}
.sd-cast-name-input {
  flex: 1; min-width: 0; border: 0; border-bottom: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: 0; padding: 4px 2px; font-size: 14.5px; font-weight: 700;
  color: var(--rd-ink-1, var(--fg-1)); background: transparent;
}
.sd-cast-name-input:focus { outline: none; border-bottom-color: var(--rd-teal); }
.sd-cast-remove-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--rd-line-2, var(--border-subtle));
  background: var(--rd-surface, #fff); color: var(--rd-ink-3, var(--fg-2)); cursor: pointer;
}
.sd-cast-remove-btn:hover {
  border-color: var(--rd-danger-bd, #F0C9C6); background: var(--rd-danger-bg, #FBEAEA); color: var(--rd-danger-fg, #B3261E);
}
/* Mapped photos + the "Add photos" tile sit in one wrapping row of equal-size
   squares, matching a standard photo-picker grid instead of a single full-width
   button that only ever shows the dropzone. */
.sd-cast-photos { display: flex; flex-wrap: wrap; gap: 12px; }
.sd-cast-photo-tile {
  position: relative; flex: none; width: 100px; height: 100px;
  border-radius: 10px; overflow: hidden; background: var(--rd-panel, var(--bg-sunken));
}
.sd-cast-photo-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sd-cast-photo-remove {
  position: absolute; top: 5px; right: 5px; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(20, 28, 26, 0.72); color: #fff;
}
.sd-cast-photo-remove:hover { background: rgba(20, 28, 26, 0.9); }
.sd-cast-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  flex: none; width: 100px; height: 100px; border: 1.5px dashed var(--rd-line-2, var(--border-subtle));
  border-radius: 10px; background: var(--rd-panel, var(--bg-sunken)); color: var(--rd-teal-ink);
  font-size: 12px; font-weight: 700; text-align: center; padding: 8px; cursor: pointer;
}
.sd-cast-dropzone:hover { border-color: var(--rd-teal-border); background: var(--rd-teal-tint); }
.sd-cast-footer {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rd-line-2, var(--border-subtle));
}
.sd-cast-footer-btn { display: inline-flex; align-items: center; gap: 6px; }
.sd-cast-footer .an-hint { margin: 0; }

/* Header bar for the "Generated character cards" section -- bleeds to the
   parent .an-card's edges (negative-margined by its padding) so the mint tint
   reads as its own banner instead of a strip floating inside the white card. */
.sd-char-cards-hdr {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 16px 22px;
  background: var(--rd-teal-tint); border-radius: 14px;
}
.sd-char-cards-hdr-title { display: flex; align-items: center; gap: 10px; flex: none; }
.sd-char-cards-hdr-title .an-card-title { margin: 0; white-space: nowrap; }
.sd-char-cards-hdr .an-hint { flex: 1; min-width: 240px; margin: 0; color: var(--rd-ink-2, var(--fg-2)); }

/* Song step (SeedanceSongScreen) -- radio-style source cards, a segmented toggle
   in place of the old two big description cards, boxed genre icons, uppercase
   field labels, an Auto shortcut + collapsible length note, and a bled footer
   bar matching the "Generated character cards" header treatment upside down. */
/* "Where the song comes from" now lives inside the same card as Sound/Your song,
   so this stands in for the gap + border that used to separate the two cards. */
.sd-song-divider { margin: 18px -22px; border-top: 1px solid var(--rd-line-2, var(--border-subtle)); }
.sd-sound-hdr .an-card-title { margin: 0; }
.sd-sound-toggle {
  display: flex; align-items: center; gap: 4px; margin-left: auto;
  background: var(--rd-surface, #fff); border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: 999px; padding: 3px;
}
.sd-sound-toggle button {
  border: 0; background: transparent; border-radius: 999px; padding: 7px 14px;
  font-size: 12.5px; font-weight: 700; color: var(--rd-ink-3, var(--fg-2)); cursor: pointer;
}
.sd-sound-toggle button.active { background: var(--rd-teal); color: #fff; }

.sd-song-radio-card { flex-direction: row; align-items: flex-start; gap: 10px; }
.sd-song-radio-dot {
  flex: none; margin-top: 2px; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--rd-line-3, var(--border-default)); background: var(--rd-surface, #fff);
  position: relative;
}
.sd-song-radio-card.selected .sd-song-radio-dot,
.sd-song-voice-pill.selected .sd-song-radio-dot,
.sd-quality-row.selected .sd-song-radio-dot { border-color: var(--rd-teal); }
.sd-song-radio-card.selected .sd-song-radio-dot::after,
.sd-song-voice-pill.selected .sd-song-radio-dot::after,
.sd-quality-row.selected .sd-song-radio-dot::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--rd-teal);
}
.sd-song-radio-copy { display: flex; flex-direction: column; gap: 4px; }

.sd-song-voice-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-song-voice-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--rd-line-3, var(--border-default)); border-radius: 999px;
  padding: 8px 14px; background: var(--rd-surface, var(--bg-surface));
  font-size: 13px; font-weight: 700; color: var(--rd-ink-1, var(--fg-1)); cursor: pointer;
  transition: border-color 120ms var(--ease-standard, ease), background 120ms var(--ease-standard, ease);
}
.sd-song-voice-pill.selected {
  border-color: var(--rd-teal); background: var(--rd-teal-tint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-teal) 15%, transparent);
}
.sd-song-voice-pill .sd-song-radio-dot { margin-top: 0; }

.sd-song-type-cards { margin-top: 0; }
.sd-song-type-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; margin-bottom: 2px;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
}

/* Scoped, not global -- .an-field-label is reused across the whole dashboard, so
   the uppercase/tracked treatment only applies inside this song card. */
.sd-song-card .an-field-label {
  text-transform: uppercase; letter-spacing: .05em; font-size: 11px; font-weight: 700;
}

.sd-song-length-row { display: flex; gap: 8px; align-items: center; }
.sd-song-length-row .an-input { flex: 1; }
.sd-song-auto-btn { flex: none; height: 38px; padding: 0 16px; }
.sd-song-disclosure { margin-top: 16px; }
.sd-song-disclosure summary {
  display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--rd-teal-ink);
  border: 1px solid var(--rd-line-2, var(--border-subtle)); border-radius: 999px; padding: 6px 14px;
}
.sd-song-disclosure summary::-webkit-details-marker { display: none; }
.sd-song-disclosure-icon { flex: none; transition: transform 160ms var(--ease-standard, ease); }
.sd-song-disclosure[open] .sd-song-disclosure-icon { transform: rotate(180deg); }
.sd-song-disclosure p { margin-top: 8px; }

.sd-song-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin: 18px -18px -20px; padding: 14px 22px;
  background: var(--rd-panel, var(--bg-sunken)); border-radius: 0 0 var(--rd-radius-card, 14px) var(--rd-radius-card, 14px);
}
.sd-song-footer .an-hint { margin: 0; flex: 1; min-width: 220px; }
.sd-song-footer-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; }

.sd-song-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  margin-top: 12px; padding: 28px; border: 1.5px dashed var(--rd-line-2, var(--border-subtle));
  border-radius: 10px; background: var(--rd-panel, var(--bg-sunken)); cursor: pointer; text-align: center;
}
.sd-song-dropzone:hover { border-color: var(--rd-teal-border); background: var(--rd-teal-tint); }
.sd-song-dropzone-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; margin-bottom: 4px;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
}
.sd-song-dropzone strong { font-size: 13px; font-weight: 700; color: var(--rd-teal-ink); }
.sd-song-dropzone span:last-child { font-size: 12px; color: var(--rd-ink-3, var(--fg-2)); }

/* Rendered/uploaded song result card -- a custom transport bar (native <audio
   controls> can't be restyled across browsers), stat pills in place of one run-on
   sentence, and a two-column Lyrics list in place of a pill-per-section stack. */
.sd-song-result-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sd-song-result-title .an-card-title { margin: 0; }
.sd-song-result-actions { display: flex; align-items: center; gap: 8px; }
.sd-song-result-actions .an-pill { height: 32px; padding: 0 12px; border-radius: 8px; box-sizing: border-box; }
.sd-song-result-actions-stack { flex-direction: column; align-items: flex-end; gap: 8px; }
.sd-song-status-pill { background: var(--rd-teal-tint); color: var(--rd-teal-ink); border-color: var(--rd-teal-border); }
.sd-song-status-dot { background: var(--rd-teal); }
.sd-song-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rd-ink-3, var(--fg-2)); margin-bottom: 4px;
}

.sd-audio-player {
  display: flex; align-items: center; gap: 12px; margin: 14px 0;
  padding: 10px 16px; border: 1px solid var(--rd-line-2, var(--border-subtle)); border-radius: 999px;
  background: var(--rd-panel, var(--bg-sunken));
}
.sd-audio-player audio { display: none; }
.sd-audio-play-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--rd-teal); color: #fff;
}
.sd-audio-time { flex: none; font-family: var(--rd-font-mono); font-size: 12px; color: var(--rd-ink-3, var(--fg-2)); }
.sd-audio-bar {
  flex: 1; height: 6px; border-radius: 999px; background: var(--rd-line-2, var(--border-subtle));
  cursor: pointer; position: relative;
}
.sd-audio-bar-fill { position: absolute; inset: 0; width: 0; border-radius: inherit; background: var(--rd-teal); }
.sd-audio-mute-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px; border: 0; background: transparent;
  color: var(--rd-ink-3, var(--fg-2)); cursor: pointer;
}
.sd-audio-mute-btn:hover { background: var(--rd-line-2, var(--border-subtle)); }
.sd-audio-menu-wrap { position: relative; flex: none; }
.sd-audio-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 180px;
  padding: 6px; background: var(--rd-surface, #fff); border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.sd-audio-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent;
  padding: 8px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; text-align: left;
  color: var(--rd-ink-1, var(--fg-1)); text-decoration: none; cursor: pointer;
}
.sd-audio-menu-item:hover { background: var(--rd-panel, var(--bg-sunken)); }

.sd-song-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }

.sd-song-lyrics { margin-top: 16px; }
.sd-song-lyrics-hdr {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rd-ink-3, var(--fg-2)); padding-bottom: 8px; border-bottom: 1px solid var(--rd-line-2, var(--border-subtle));
}
.sd-song-lyric-row {
  display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 12px 0;
  border-bottom: 1px solid var(--rd-line-2, var(--border-subtle));
}
.sd-song-lyric-row:last-child { border-bottom: 0; }
.sd-song-lyric-kind {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rd-teal-ink);
}
.sd-song-lyric-lines { font-size: 13.5px; line-height: 1.7; color: var(--rd-ink-1, var(--fg-1)); }

/* Inspo audio + Styles side by side on the "Describe the style" path -- two related
   inputs that used to stack full-width one above the other. */
.sd-song-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.sd-song-styles-textarea { min-height: 140px; }
@media (max-width: 760px) {
  .sd-song-two-col { grid-template-columns: 1fr; gap: 16px; }
}

/* Scene cards on the Scene plan step -- a numbered badge in place of "N.", the
   env/lighting/continuity/brand line as pills instead of a run-on hint sentence,
   and the same Edit-to-reveal prompt field as Characters/Environments. */
.sd-scenes-hdr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 24px 0 12px; }
.sd-scenes-hdr .an-card-title { margin: 0; }
.sd-scenes-hdr > .btn-secondary { margin-left: auto; }
.sd-scene-card-hdr { display: flex; align-items: center; gap: 8px; }
.sd-scene-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px; font-size: 12px; font-weight: 700;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
}
.sd-scene-card-hdr strong { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; color: var(--rd-ink-1, var(--fg-1)); }
.sd-scene-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-scene-tag {
  font-family: var(--rd-font-mono); font-size: 11px; font-weight: 500; color: var(--rd-ink-3, var(--fg-2));
  background: var(--rd-teal-tint); border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: 6px; padding: 2px 7px;
}
.sd-scene-tag-continuity {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--rd-warning-bg, #F9F3E7); color: var(--rd-warning-fg, #B8802A);
  border-color: var(--rd-warning-bd, #EAD9B6);
}

.sd-clip-video {
  width: 100%; border-radius: 12px; background: #0b0d0c; margin: 8px 0 12px; max-height: 280px;
}
/* Regenerate-in-place: blur the clip that's about to be replaced rather than hiding it, with a
   moving ring + pulsing label over it, so a Regenerate click reads as "this is being remade,"
   not "this clip just broke." Only shown for a scene that already has a clip (see the wrap's
   caller) -- a first-time generate has no prior video to blur. */
.sd-clip-video-wrap { position: relative; }
.sd-clip-video-wrap .sd-clip-video-blurred {
  filter: blur(6px) brightness(0.55); transition: filter .3s ease;
}

/* ============================================================================
   Seedance Clips step — flip cards (SdClipCard, SeedanceAdsPanel.jsx). One
   card per scene: front face is the clip + its status/actions, back face is
   the editable prompt. Height is fixed so a card with no video yet never
   shrinks the row it sits in.
   ============================================================================ */
.sd-clip-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px;
}
/* 560px left a wide empty gap between the prompt button and the action row on every
   state that has no alert to fill it (i.e. most cards, most of the time) — sized down
   to what the content actually needs; still one fixed height so no card shrinks. */
/* Sized to fit a card WITH one alert line (failed/blocked) without scrolling -- 440px only
   fit the alert-free case and left the scrollbar you now see whenever one is shown. */
.sd-clipcard { height: 500px; perspective: 1400px; }
.sd-clipcard-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.4,.1,.2,1);
}
.sd-clipcard-inner.flipped { transform: rotateY(180deg); }
.sd-clipcard-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; overflow-y: auto; overflow-x: hidden;
  background: var(--rd-surface, #fff);
  border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: gap 320ms ease;
}
.sd-clipcard-face-expanded { gap: 0; }
.sd-clipcard-back { transform: rotateY(180deg); }

/* Collapse away on expand (see .sd-clipcard-face-expanded below) -- kept in the DOM and
   animated to zero rather than display:none, so the video's growth into the freed space
   is driven purely by the flex container reflowing every frame as these shrink, with no
   JS measurement or FLIP-style transform trickery needed. */
.sd-clipcard-hdr,
.sd-clipcard-status,
.sd-clipcard-prompt-btn,
.sd-clipcard-alert,
.sd-clipcard-actions {
  flex: none; overflow: hidden;
  transition: max-height 320ms ease, opacity 200ms ease, margin 320ms ease;
}
.sd-clipcard-hdr { max-height: 40px; }
.sd-clipcard-status { max-height: 30px; }
.sd-clipcard-prompt-btn { max-height: 60px; }
.sd-clipcard-alert { max-height: 100px; }
.sd-clipcard-actions { max-height: 50px; }
.sd-clipcard-face-expanded .sd-clipcard-hdr,
.sd-clipcard-face-expanded .sd-clipcard-status,
.sd-clipcard-face-expanded .sd-clipcard-prompt-btn,
.sd-clipcard-face-expanded .sd-clipcard-alert,
.sd-clipcard-face-expanded .sd-clipcard-actions {
  max-height: 0; opacity: 0; margin: 0; pointer-events: none;
}
.sd-clipcard-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sd-clipcard-hdr strong { font-size: 15.5px; font-weight: 700; color: var(--rd-ink-1, var(--fg-1)); line-height: 1.3; }
.sd-clipcard-duration {
  flex: none; font-family: var(--rd-font-mono); font-size: 11px; font-weight: 600;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
  border-radius: 999px; padding: 3px 9px;
}

.sd-clipcard-status { flex: none; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.sd-clipcard-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.sd-clipcard-status-generated { color: var(--rd-teal-ink); }
.sd-clipcard-status-generated .sd-clipcard-dot { background: var(--rd-teal); }
.sd-clipcard-status-generating { color: var(--rd-warning-fg, #B8802A); }
.sd-clipcard-status-generating .sd-clipcard-dot {
  background: var(--rd-warning-fg, #B8802A); animation: sd-clipcard-pulse 1.1s ease-in-out infinite;
}
.sd-clipcard-status-queued, .sd-clipcard-status-blocked { color: var(--rd-ink-3, var(--fg-2)); }
.sd-clipcard-status-queued .sd-clipcard-dot, .sd-clipcard-status-blocked .sd-clipcard-dot { background: var(--rd-ink-4, var(--fg-3)); }
.sd-clipcard-status-failed { color: var(--rd-danger-fg, #B3261E); }
.sd-clipcard-status-failed .sd-clipcard-dot { background: var(--rd-danger-fg, #B3261E); }
@keyframes sd-clipcard-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

/* Shot Director state per card, and the rendered clip's measured motion. The direction row is
   part of the collapse-on-play group above (same max-height transition), so a video expanding
   to full-bleed is never overlapped by it. */
.sd-clipcard-direction {
  flex: none; overflow: hidden; max-height: 34px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px; font-weight: 600;
  transition: max-height 320ms ease, opacity 200ms ease, margin 320ms ease;
}
.sd-clipcard-direction > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.sd-clipcard-direction .btn-sm { flex: none; }
.sd-clipcard-face-expanded .sd-clipcard-direction { max-height: 0; opacity: 0; margin: 0; pointer-events: none; }
.sd-clipcard-direction-directed { color: var(--rd-teal-ink); }
.sd-clipcard-direction-directing { color: var(--rd-warning-fg, #B8802A); }
.sd-clipcard-direction-standard { color: var(--rd-danger-fg, #B3261E); }
.sd-clipcard-motion { font-weight: 500; color: var(--rd-ink-3, var(--fg-2)); }
.sd-clipcard-motion-low { color: var(--rd-danger-fg, #B3261E); font-weight: 700; }

.sd-coverage-banner { margin: 16px 0; display: flex; flex-direction: column; gap: 8px; }
.sd-coverage-line {
  margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--rd-ink-2, var(--fg-1));
}
.sd-coverage-warn { color: var(--rd-ink-1, var(--fg-1)); font-weight: 600; }

.sd-clipcard-media {
  position: relative; flex: none; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 10px; overflow: hidden; background: #0b0f0e;
  transition: border-radius 320ms ease;
}
.sd-clipcard-media .sd-clip-video { width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; max-height: none; }
/* Pressing play (SdClipCard's onPlay) grows this SAME video node to fill the card face.
   No absolute positioning or JS-measured transform: every sibling above/below collapses
   to zero height in step (see .sd-clipcard-face-expanded rules), and this stays a plain
   flex:1 child with no fixed aspect-ratio -- the flex container simply redistributes the
   space it frees on every frame of THEIR transition, which is what actually animates. */
.sd-clipcard-media-expanded { flex: 1 1 auto; aspect-ratio: unset; border-radius: 4px; }
.sd-clipcard-video-close {
  position: absolute; top: 10px; right: 10px; z-index: 6;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(10, 14, 13, .55); color: #fff; backdrop-filter: blur(2px);
  transition: background 120ms var(--ease-standard, ease);
}
.sd-clipcard-video-close:hover { background: rgba(10, 14, 13, .8); }
.sd-clipcard-media-state {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; color: #8a9995;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.sd-clipcard-media-generating .sd-clipcard-media-state,
.sd-clipcard-media-queued .sd-clipcard-media-state {
  background: linear-gradient(115deg, #14201d 0%, #1a2622 45%, #14201d 90%);
  background-size: 200% 100%;
}
.sd-clipcard-media-generating .sd-clipcard-media-state { animation: sd-clipcard-shimmer 1.6s linear infinite; }
@keyframes sd-clipcard-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sd-clipcard-media-failed .sd-clipcard-media-state,
.sd-clipcard-media-blocked .sd-clipcard-media-state { color: var(--rd-warning-fg, #B8802A); }
.sd-clipcard-media-bang {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid currentColor;
  font-size: 15px; font-weight: 700; text-transform: none;
}

.sd-clipcard-prompt-btn {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 8px 10px; text-align: left; font: inherit;
  background: var(--rd-teal-tint); border: 1px solid var(--rd-teal-border, var(--rd-line-2));
  border-radius: 9px; cursor: pointer; color: var(--rd-teal-ink);
  transition: border-color 120ms var(--ease-standard, ease), background 120ms var(--ease-standard, ease);
}
.sd-clipcard-prompt-btn:hover {
  border-color: var(--rd-teal);
  background: color-mix(in srgb, var(--rd-teal-tint) 70%, var(--rd-surface, #fff));
}
.sd-clipcard-prompt-btn svg { flex: none; }
.sd-clipcard-prompt-btn-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.sd-clipcard-prompt-btn-text strong { font-size: 12px; font-weight: 700; }
.sd-clipcard-prompt-preview {
  display: block; font-size: 11.5px; color: var(--rd-ink-3, var(--fg-2)); font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sd-clipcard-alert {
  flex: none; display: flex; align-items: flex-start; gap: 6px;
  padding: 7px 9px; border-radius: 9px; font-size: 11.5px; line-height: 1.4;
}
.sd-clipcard-alert svg { flex: none; margin-top: 1px; }
.sd-clipcard-alert.error {
  background: var(--rd-danger-bg, #FBEAEA); border: 1px solid var(--rd-danger-bd, #F0C9C6);
  color: var(--rd-danger-fg, #B3261E);
}
.sd-clipcard-alert.warn {
  background: var(--rd-warning-bg, #F9F3E7); border: 1px solid var(--rd-warning-bd, #EAD9B6);
  color: var(--rd-warning-fg, #B8802A);
}

.sd-clipcard-actions { flex: none; margin-top: auto; display: flex; gap: 8px; }
.sd-clipcard-btn { flex: 1; justify-content: center; height: 36px; white-space: nowrap; }
/* "Back" only needs to fit its own label, not share the row 50/50 with "Regenerate with my
   changes" -- that starved the longer label of room and wrapped it to two lines. */
/* Icon-only -- the label was still competing with "Regenerate with my changes" for
   room even at content width, and the arrow alone already reads as "go back". */
.sd-clipcard-back-btn { flex: none; width: 36px; padding: 0; }
.sd-clipcard-back .sd-clipcard-btn:not(.sd-clipcard-back-btn) { font-size: 12.5px; }
/* An enabled Approve reading as plain white/outline sat there looking the same as its own
   disabled state — give the clickable state a filled tint so "you can press this" is visible
   without matching Regenerate's stronger solid teal. */
.sd-clipcard-btn.btn-secondary:not(:disabled) {
  background: var(--rd-teal-tint); border-color: var(--rd-teal-border); color: var(--rd-teal-ink);
}
.sd-clipcard-btn.btn-secondary:not(:disabled):hover {
  background: color-mix(in srgb, var(--rd-teal-tint) 70%, var(--rd-surface, #fff));
}
/* .btn-secondary has no :disabled style anywhere in the app, so a disabled Approve was
   visually identical to a clickable one -- on a still-blocked card that read as "you can
   approve this" when there was nothing to approve yet. */
.sd-clipcard-btn.btn-secondary:disabled {
  background: var(--neutral-200, #eef3f2); color: var(--fg-4, #8a9995);
  border-color: var(--rd-line-2, var(--border-subtle)); cursor: not-allowed;
}
/* Approved is now a real button (click to unapprove), so it needs the affordances
   .an-hint-only static chips don't -- a border, a cursor, a hover state -- while
   staying visually distinct from the plain "Approve" secondary button beside it. */
.sd-clipcard-approved {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 14px; height: 36px; border-radius: 8px; font-size: 13px; font-weight: 600;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink); border: 1px solid var(--rd-teal-border);
  cursor: pointer; transition: background 120ms var(--ease-standard, ease), border-color 120ms var(--ease-standard, ease);
}
.sd-clipcard-approved:hover:not(:disabled) {
  background: color-mix(in srgb, var(--rd-teal-tint) 60%, var(--rd-surface, #fff));
  border-color: var(--rd-teal);
}
.sd-clipcard-approved:disabled { cursor: not-allowed; opacity: .7; }

.sd-clipcard-back-hdr {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rd-teal-ink);
}
.sd-clipcard-textarea {
  flex: 1; min-height: 0; resize: none; width: 100%;
  padding: 10px; font-size: 13px; line-height: 1.55; font-family: inherit;
  background: var(--rd-surface-2, #fbfdfc); color: var(--rd-ink-1, var(--fg-1));
  border: 1px solid var(--rd-line-3, var(--border-default)); border-radius: 10px;
}
.sd-clipcard-textarea:focus { outline: none; border-color: var(--rd-teal); box-shadow: var(--shadow-focus); }
/* Belt-and-suspenders, matching colors_and_type.css's own documented fix for this exact bug
   class ("the mini movies are not compatible with dark mode"): an explicit override on the
   base --bg-*/--fg-* tokens, not just the --rd-* family, since --rd-surface-2 was still
   painting this textarea white in dark mode despite everything around it (header, hint text)
   correctly going dark. */
[data-theme="dark"] .sd-clipcard-textarea {
  background: var(--bg-sunken, #0f1216);
  color: var(--fg-1, #EEF0F3);
  border-color: var(--border-default, #2a2f36);
}

/* The read-only record of what this clip was actually rendered from. Collapsed by default so it
   never pushes the editable prompt out of the card, and it is long -- a compiled prompt carries
   the timing, locks and constraints, not just the scene's own paragraph. */
.sd-clipcard-compiled { flex: none; margin-top: 2px; }
.sd-clipcard-compiled > summary {
  cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--rd-teal-ink); padding: 4px 0;
}
.sd-clipcard-compiled-body {
  max-height: 220px; overflow: auto; margin: 6px 0 0;
  padding: 10px; border-radius: 10px;
  font-size: 11.5px; line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap; word-break: break-word;
  background: var(--rd-surface-2, #fbfdfc); color: var(--rd-ink-1, var(--fg-1));
  border: 1px solid var(--rd-line-3, var(--border-default));
}
[data-theme="dark"] .sd-clipcard-compiled-body {
  background: var(--bg-sunken, #0f1216);
  color: var(--fg-1, #EEF0F3);
  border-color: var(--border-default, #2a2f36);
}

@media (max-width: 480px) {
  .sd-clip-grid { grid-template-columns: 1fr; }
}
.sd-clip-regen-overlay {
  position: absolute; inset: 8px 0 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border-radius: 12px; background: rgba(10, 14, 13, 0.3); pointer-events: none;
}
.sd-clip-regen-ring {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: var(--rd-teal, #0fb5a8);
  animation: sd-clip-regen-spin 0.9s linear infinite;
}
@keyframes sd-clip-regen-spin { to { transform: rotate(360deg); } }
.sd-clip-regen-label {
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  animation: sd-pulse 1.6s ease-in-out infinite;
}
@media (max-width: 640px) {
  .sd-clip-regen-ring { width: 32px; height: 32px; border-width: 2.5px; }
  .sd-clip-regen-label { font-size: 11.5px; }
}

/* First-ever stitch: no previous final video exists to blur, so a shimmer skeleton (the
   same "actively working" treatment as a pending scene shot) stands in for it, sized like
   the real .sd-clip-video it will be replaced by once the stitch lands. */
.sd-final-video-skeleton {
  height: 220px; border-radius: 12px; margin: 8px 0 12px; overflow: hidden;
}

.sd-continuity-banner { margin: 16px 0; }
/* Header stat card on the plan step (see the sd-plan-stat block below for its own
   styling) -- a single "N notes to review" figure, not the two-tile layout the Clips
   and Environments steps use, since there's only ever the one number here. */
.sd-plan-stat {
  flex: none; min-width: 180px; padding: 12px 16px; text-align: left;
  background: var(--rd-teal-tint); border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: var(--rd-radius-card, 14px);
}
.sd-plan-stat-label {
  font-family: var(--rd-font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rd-ink-3, var(--fg-2));
}
.sd-plan-stat-value { margin-top: 4px; font-size: 22px; font-weight: 700; color: var(--rd-ink-1, var(--fg-1)); }
.sd-plan-stat-caption { margin-top: 2px; font-size: 12px; color: var(--rd-ink-3, var(--fg-2)); }

.sd-continuity-section-hdr {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 10px; padding: 8px 12px;
  border-radius: 8px; background: var(--rd-panel, var(--bg-sunken));
  font-size: 12.5px; font-weight: 700; color: var(--rd-ink-1, var(--fg-1));
}
.sd-continuity-section-hdr .an-hint { margin-left: auto; }
.sd-continuity-section-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--rd-warning-fg, #B8802A); }

.sd-continuity-list {
  list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px;
}
.sd-continuity-item {
  font-size: 13px; line-height: 1.5; padding: 10px 12px; border-radius: 10px;
  border-left: 3px solid var(--rd-line-2, var(--border-subtle));
  background: var(--rd-surface, var(--bg-surface));
}
.sd-continuity-item p { margin: 6px 0 0; color: var(--rd-ink-2, var(--fg-2)); }
.sd-continuity-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sd-continuity-scene-pill {
  font-family: var(--rd-font-mono); font-size: 11px; font-weight: 600;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
  border: 1px solid var(--rd-teal-border); border-radius: 6px; padding: 2px 7px;
}
.sd-continuity-category-pill {
  font-size: 11px; font-weight: 600;
  background: var(--rd-warning-bg, #F9F3E7); color: var(--rd-warning-fg, #B8802A);
  border: 1px solid var(--rd-warning-bd, #EAD9B6); border-radius: 6px; padding: 2px 7px;
}
.sd-continuity-warning, .sd-continuity-medium { border-left-color: var(--rd-warning-fg, #B8802A); }
.sd-continuity-high { border-left-color: var(--rd-danger-fg, #B3261E); }
.sd-continuity-low { border-left-color: var(--rd-line-2, var(--border-subtle)); }
.sd-continuity-more {
  display: flex; margin: 10px auto 0; width: fit-content; height: 36px; justify-content: center;
  background: var(--rd-teal-tint); border-color: var(--rd-teal-border); color: var(--rd-teal-ink);
}
.sd-continuity-more:hover {
  background: color-mix(in srgb, var(--rd-teal-tint) 70%, var(--rd-surface, #fff));
  border-color: var(--rd-teal);
}
.sd-continuity-more-icon { transition: transform 160ms var(--ease-standard, ease); }
.sd-continuity-more-icon.open { transform: rotate(180deg); }

/* Toolbar row above the pills (Select all/Clear + count) and, reused below the pills,
   the lone Stitch button -- one row each, instead of the old vertical stack of a
   .an-footer-actions block plus a separately bordered footer bar underneath it. */
.sd-stitch-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0; }
.sd-stitch-toolbar-group { display: flex; align-items: center; gap: 8px; }

/* Compact, inline pills instead of full-width grid cards -- a scene here is a single
   pick, not something that needs a card's worth of room. */
.sd-stitch-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0; }
.sd-scene-select {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap;
  border: 1px solid var(--rd-line-2, var(--border-subtle)); border-radius: 999px;
  padding: 7px 14px; background: var(--rd-surface, var(--bg-surface)); cursor: pointer;
  transition: border-color 120ms var(--ease-standard, ease), background 120ms var(--ease-standard, ease);
}
.sd-scene-select:hover:not(:has(input:disabled)) { border-color: var(--rd-teal-border); background: var(--rd-teal-tint); }
.sd-scene-select:has(input:disabled) { opacity: .55; cursor: not-allowed; }

.sd-character-preview {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px;
  background: var(--rd-panel, var(--bg-sunken)); margin-bottom: 10px;
}

/* The stages of one character's body arc, stacked inside that character's card so the
   "before" and "after" read as versions of the same person rather than separate cast. */
.sd-body-stages { margin-top: 14px; border-top: 1px solid var(--rd-line-2, var(--border-subtle)); padding-top: 12px; }
.sd-body-stage {
  border: 1px solid var(--rd-line-2, var(--border-subtle)); border-radius: 12px;
  padding: 12px; margin-top: 10px; background: var(--rd-panel, var(--bg-sunken));
}
.sd-body-stage .sd-character-preview { aspect-ratio: 3 / 4; }
.sd-body-stage-empty { margin: 8px 0 10px; }

@media (max-width: 960px) {
  .an-hub { max-width: 100%; padding: 8px 4px 40px; }
  .an-hub-title { font-size: 30px; }
  .an-hub-card { min-height: 240px; padding: 24px 22px 20px; }
  .an-hub-card-title { font-size: 18px; }
  .an-hub-project-card { flex: 0 0 min(240px, 72vw); }
}
@media (max-width: 860px) {
  .an-hub-cards { grid-template-columns: 1fr; gap: 14px; }
  .an-hub-card { min-height: 0; }
  .an-hub-steps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-hub-recent-scroller { gap: 12px; padding-bottom: 14px; }
  .sd-card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .an-hub-hero { margin-bottom: 20px; }
  .an-hub-title { font-size: 26px; }
  .an-hub-sub { font-size: 14.5px; }
  .an-hub-card-meta { gap: 6px; }
  .an-hub-card-meta > span { font-size: 11px; padding: 4px 8px; }
  .an-hub-card-icon-wrap { width: 48px; height: 48px; border-radius: 14px; }
  .an-hub-project-card {
    flex: 0 0 min(260px, 88vw);
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .an-hub-project-actions { flex-direction: row; }
  .an-hub-steps-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .an-hub-glow { top: -40px; left: -60px; right: -60px; height: 260px; }
}
@media (max-width: 420px) {
  .an-hub-steps-row { grid-template-columns: 1fr; }
  .an-hub-card-cta { margin-top: 16px; }
  .an-hub-recent-hdr { flex-direction: column; align-items: flex-start; gap: 4px; }
}


/* Seedance script + plan progress */
.sd-flow .rd-workflow-header {
  padding: 16px 18px 14px;
  border: 1px solid var(--rd-line-2, var(--border-default));
}
.sd-flow .rd-workflow-top { margin-bottom: 10px; }
.sd-flow .rd-workflow-heading { margin-bottom: 12px; }
.sd-flow .rd-step-rail { width: 100%; }
/* .sd-flow .rd-step-connector { flex: 1 1 16px; min-width: 12px; max-width: 56px; } */
.sd-flow .an-hero {
  padding: 16px 18px;
  margin-top: 12px;
  margin-bottom: 12px;
  background: var(--rd-surface, var(--bg-surface));
  border: 1px solid var(--rd-line-2, var(--border-default));
}
.sd-flow .an-card {
  border: 1px solid var(--rd-line-2, var(--border-default));
  padding: 16px 18px;
  margin-bottom: 12px;
}
.sd-script-card .an-textarea { min-height: 160px; }
.an-adbar:has(> .sd-adbar-main) {
  /* .sd-adbar-main stacks title + ID pill (taller than the actions button) -- centering would
     float the button at the block's vertical midpoint, lined up with neither row. Top-aligning
     keeps it level with the title instead. justify-content is deliberately NOT overridden here
     — it inherits .an-adbar's own `space-between`, which is what pushes "Hub"/"Start a new
     one" flush to the right edge (matching Classic's ad bar) instead of clumping them right
     after the narrow input with the row's remaining width left empty. */
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 12px 14px;
  border: 1px solid var(--rd-line-2, var(--border-default));
}
.sd-adbar-main {
  /* Was flex: 0 1 420px (a fixed cap, not a basis it could grow past), so the
     placeholder — "Name this Seedance ad — e.g. "Restaurant song v1"" —
     truncated well before the row's actual available width, unlike
     Classic's ad bar, whose title input grows to fill the row. .sd-ad-id
     (the ID pill) is align-self: flex-start and sizes to its own content
     regardless of this container's width, so growing this doesn't stretch
     it too. */
  flex: 1 1 420px;
  min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.sd-adbar-main .an-titlefield {
  flex: none;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  margin-left: 0;
}
.an-adbar:has(> .sd-adbar-main) .an-adbar-actions {
  flex: none;
  flex-wrap: nowrap;
  padding-top: 0;
  /* Half the title input/button height difference (40px vs 32px), so the button centers on the
     title row specifically rather than sitting flush with the top of the title+ID-pill stack. */
  margin-top: 33px;
}
/* "Start a new one" is a filled .btn-primary (36px) next to a plain .btn-secondary
   "Hub" (32px) — same row, so the mismatch is obvious. Match Hub up to it. */
.an-adbar:has(> .sd-adbar-main) .an-adbar-actions .btn-secondary { height: 36px; }
.sd-ad-id {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  max-width: 100%;
  padding: 5px 8px 5px 6px;
  border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: 8px;
  background: var(--rd-panel, var(--bg-sunken));
  color: var(--rd-ink-2, var(--fg-2));
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 120ms ease, background 120ms ease;
}
.sd-ad-id:hover {
  border-color: var(--rd-teal);
  background: color-mix(in srgb, var(--rd-teal-tint) 55%, var(--rd-surface, #fff));
}
.sd-ad-id-label {
  flex: none;
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rd-teal-ink);
  background: var(--rd-teal-tint);
  border-radius: 5px;
  padding: 2px 6px;
}
.sd-ad-id-value {
  font-family: var(--rd-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px; font-weight: 600;
  color: var(--rd-ink-1, var(--fg-1));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-transform: none;
}
.sd-ad-id-action {
  flex: none; margin-left: 2px;
  font-size: 11px; font-weight: 700;
  color: var(--rd-teal-ink);
}

/* --- Ad bar v2: eyebrow + status pill above an underlined title field,
   plain ID row with a bordered Copy pill, filled "Start a new one". --- */
.sd-adbar-eyebrow-row { display: flex; align-items: center; gap: 10px; }
.sd-adbar-eyebrow {
  font-family: var(--rd-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--rd-ink-3, var(--fg-2));
}
.sd-adbar-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
}
.sd-adbar-status-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.sd-adbar-status.unnamed { background: var(--rd-warning-bg, #F9F3E7); color: var(--rd-warning-fg, #B8802A); }
.sd-adbar-status.unnamed .sd-adbar-status-dot { background: var(--rd-warning-fg, #B8802A); }
.sd-adbar-status.named { background: var(--rd-teal-tint); color: var(--rd-teal-ink); }
.sd-adbar-status.named .sd-adbar-status-dot { background: var(--rd-teal); }
.sd-adbar-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* .sd-adbar-main marks the redesigned ad bar regardless of which panel renders
   it (Seedance or Animation Ads share this shape) — no per-panel qualifier needed. */
.sd-adbar-main .an-titlefield {
  height: auto; padding: 4px 0 8px; margin: 2px 0 0;
  font-size: 20px; font-weight: 600;
  background: transparent;
  border: none; border-bottom: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: 0;
}
.sd-adbar-main .an-titlefield:hover { border-bottom-color: var(--rd-line-3, var(--border-default)); }
.sd-adbar-main .an-titlefield:focus {
  box-shadow: none; background: transparent; border-bottom-color: var(--rd-teal);
}
.sd-adbar-main .an-titlefield::placeholder { font-weight: 500; color: var(--rd-ink-4, var(--fg-3)); }
.sd-adbar-v2 .sd-ad-id {
  background: transparent; border: none; padding: 0; gap: 8px;
}
.sd-adbar-v2 .sd-ad-id-label {
  background: transparent; color: var(--rd-ink-4, var(--fg-3)); padding: 0;
}
.sd-adbar-v2 .sd-ad-id-action {
  padding: 3px 10px; margin-left: 0;
  border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: 999px;
  transition: border-color 120ms var(--ease-standard, ease), background 120ms var(--ease-standard, ease);
}
.sd-adbar-v2 .sd-ad-id:hover .sd-ad-id-action { border-color: var(--rd-teal-border); background: var(--rd-teal-tint); }

.sd-style-cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.sd-product-cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.sd-product-card {
  padding: 16px !important;
  gap: 8px !important;
  cursor: pointer !important;
}
.sd-product-thumb-wrap { position: relative; display: block; width: 100%; margin-bottom: 4px; }
.sd-product-thumb-wrap .an-choice-thumb { margin-bottom: 0; }
.sd-product-check {
  position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--rd-teal); color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.sd-product-card .an-choice-thumb { height: 140px; margin-bottom: 4px; }
.sd-product-card .an-choice-title { padding-right: 2px; }
.sd-product-card .an-choice-desc {
  padding-bottom: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sd-product-hdr-sub { font-size: 12px; font-weight: 500; color: var(--rd-ink-3, var(--fg-2)); margin-left: 6px; }
.sd-product-none-card { width: 100%; }

/* Pacing / Video quality / Orientation -- three columns of compact single-line
   radio rows instead of a stacked grid of icon cards per section. */
.sd-quality-cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  padding-top: 16px; margin-bottom: 22px; border-top: 1px solid var(--rd-line-2, var(--border-subtle));
}
.sd-quality-label {
  text-transform: uppercase; letter-spacing: .05em; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.sd-quality-label::after {
  content: ''; flex: 1; height: 1px; background: var(--rd-line-2, var(--border-subtle));
}
.sd-quality-rows { display: flex; flex-direction: column; gap: 10px; }
.sd-quality-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 1.5px solid var(--rd-line-3, var(--border-default)); border-radius: var(--rd-radius-ctrl, 8px);
  padding: 12px 14px; background: var(--rd-surface, var(--bg-surface)); cursor: pointer;
  transition: border-color 120ms var(--ease-standard, ease), background 120ms var(--ease-standard, ease);
}
.sd-quality-row .sd-song-radio-dot { margin-top: 0; }
.sd-quality-row .an-choice-title { font-size: 13px; }
.sd-quality-row .an-choice-desc { font-size: 12px; }
.sd-quality-row.selected {
  border-color: var(--rd-teal); background: var(--rd-teal-tint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-teal) 15%, transparent);
}
@media (max-width: 860px) {
  .sd-quality-cols { grid-template-columns: 1fr; }
}

/* ============================================================================
   Environments & variants (SeedanceEnvironmentsScreen) — a places sidebar plus
   a detail panel for whichever one is selected, replacing a flat grid of one
   always-editable card per place. Fields are read-only text until Edit is
   clicked, so the panel reads as a reference sheet first, a form second.
   ============================================================================ */
.sd-env-layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
@media (max-width: 720px) { .sd-env-layout { grid-template-columns: 1fr; } }

.sd-env-sidebar {
  display: flex; flex-direction: column; gap: 4px; padding: 14px;
  background: var(--rd-surface, #fff); border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: var(--rd-radius-card, 14px);
}
.sd-env-sidebar-hdr {
  font-family: var(--rd-font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rd-ink-3, var(--fg-2)); padding: 0 8px 6px;
}
.sd-env-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 10px 10px 10px 12px; text-align: left; font: inherit;
  background: transparent; border: none; border-left: 3px solid transparent; border-radius: 8px;
  cursor: pointer; transition: background 120ms var(--ease-standard, ease), border-color 120ms var(--ease-standard, ease);
}
.sd-env-row:hover { background: var(--rd-panel, var(--bg-sunken)); }
.sd-env-row.active { background: var(--rd-teal-tint); border-left-color: var(--rd-teal); }
.sd-env-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sd-env-row-main strong { font-size: 13.5px; font-weight: 700; color: var(--rd-ink-1, var(--fg-1)); }
.sd-env-row-tag { font-family: var(--rd-font-mono); font-size: 11px; color: var(--rd-ink-3, var(--fg-2)); }
.sd-env-row-swatches { display: flex; gap: 4px; flex: none; }
.sd-env-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.sd-env-detail {
  padding: 18px 20px; background: var(--rd-surface, #fff);
  border: 1px solid var(--rd-line-2, var(--border-subtle)); border-radius: var(--rd-radius-card, 14px);
}
.sd-env-detail-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sd-env-detail-hdr h2 { margin: 0; font-size: 21px; font-weight: 700; color: var(--rd-ink-1, var(--fg-1)); }
.sd-env-detail-meta { display: flex; align-items: center; gap: 10px; flex: none; }
.sd-env-tag-pill {
  font-family: var(--rd-font-mono); font-size: 11px; font-weight: 600;
  background: var(--rd-panel, var(--bg-sunken)); color: var(--rd-ink-2, var(--fg-2));
  border: 1px solid var(--rd-line-2, var(--border-subtle)); border-radius: 6px; padding: 3px 8px;
}

.sd-env-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rd-line-2, var(--border-subtle)); }
.sd-env-detail-hdr + .sd-env-section { margin-top: 18px; }
.sd-env-section-hdr {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px;
  padding: 8px 12px; border-radius: 8px; background: var(--rd-panel, var(--bg-sunken));
  font-family: var(--rd-font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rd-ink-3, var(--fg-2));
}
.sd-env-readonly {
  margin: 0; padding: 12px 14px; font-size: 13.5px; line-height: 1.55; color: var(--rd-ink-1, var(--fg-1));
  background: var(--rd-panel, var(--bg-sunken)); border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: 10px; white-space: pre-wrap;
}
.sd-env-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.sd-env-edit-actions .btn-secondary, .sd-env-edit-actions .btn-primary { height: 36px; }

.sd-env-variant-row + .sd-env-variant-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rd-line-2, var(--border-subtle)); }
.sd-env-variant-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sd-env-variant-hdr strong { font-size: 13.5px; font-weight: 700; color: var(--rd-ink-1, var(--fg-1)); }
.sd-env-variant-slug { font-family: var(--rd-font-mono); font-size: 11px; color: var(--rd-ink-3, var(--fg-2)); margin-right: auto; }
.sd-env-variant-row .sd-env-readonly { background: transparent; border-color: var(--rd-line-2, var(--border-subtle)); }

/* Back + Regenerate plan grouped on the left, Continue on the right, on a subtle
   panel tint (not stark white, not fully transparent) matching the section-header
   treatment elsewhere on this page. */
.sd-env-footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; margin-top: 18px; padding: 12px 14px;
  background: var(--rd-panel, var(--bg-sunken)); border-radius: var(--rd-radius-card, 14px);
}
.sd-env-footer-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sd-env-footer-btn { height: 42px; padding: 0 18px; font-size: 14px; }
/* A footer with only a Continue button (no Back) -- space-between has nothing to push
   away from, so it lands flush left instead of right without this. */
.sd-env-footer-end { justify-content: flex-end; }
@media (max-width: 640px) {
  .sd-env-footer { flex-direction: column; align-items: stretch; }
  .sd-env-footer-group { flex-direction: column; align-items: stretch; }
  .sd-env-footer-btn { width: 100%; justify-content: center; }
}

.sd-progress {
  margin: 8px 0 20px;
  padding: 18px 18px 16px;
  border: 1.5px solid var(--rd-line-2, var(--border-subtle));
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rd-teal-tint) 55%, var(--rd-surface, #fff)), var(--rd-surface, #fff));
  box-shadow: 0 8px 24px -20px rgba(20,24,27,.3);
}
.sd-progress-hdr {
  display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
  margin-bottom: 14px;
}
.sd-progress-hdr-main { display: flex; gap: 12px; align-items: flex-start; }
.sd-progress-hdr-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
}
.sd-progress-hdr strong { display: block; font-size: 15px; margin-bottom: 4px; }
.sd-progress-hdr p {
  margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--rd-ink-3, var(--fg-2)); max-width: 62ch;
}
.sd-progress-elapsed { flex: none; text-align: right; }
.sd-progress-elapsed-value { display: block; font-size: 20px; font-weight: 700; color: var(--rd-ink-1, var(--fg-1)); }
.sd-progress-elapsed-label {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rd-ink-3, var(--fg-2));
}
.sd-progress-steps { list-style: none; margin: 0 0 14px; padding: 0; }
.sd-progress-step {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--rd-ink-3, var(--fg-2));
  padding: 10px 0; border-bottom: 1px solid var(--rd-line-2, var(--border-subtle));
}
.sd-progress-step:last-child { border-bottom: 0; }
.sd-progress-step.active { color: var(--rd-ink-1, var(--fg-1)); font-weight: 600; }
.sd-progress-step.done { color: var(--rd-ink-1, var(--fg-1)); }
.sd-progress-step-label { flex: 1; min-width: 0; }
.sd-progress-step-status {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--rd-ink-3, var(--fg-2));
}
.sd-progress-step.active .sd-progress-step-status { color: var(--rd-teal-ink); }
.sd-progress-dot {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 750;
  background: var(--rd-panel, var(--bg-sunken)); color: var(--rd-ink-3);
}
.sd-progress-step.active .sd-progress-dot,
.sd-progress-step.done .sd-progress-dot {
  background: var(--rd-teal); color: #fff;
}
.sd-progress-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rd-teal);
  animation: sd-pulse 1.1s ease-in-out infinite;
}
@keyframes sd-pulse {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.15); }
}
.sd-progress-bar-row {
  display: flex; align-items: center; gap: 14px;
  padding-top: 14px; border-top: 1px solid var(--rd-line-2, var(--border-subtle));
}
.sd-progress-bar-label {
  flex: none; font-size: 11px; font-weight: 700; color: var(--rd-ink-3, var(--fg-2)); white-space: nowrap;
}
.sd-progress-bar {
  flex: 1; height: 8px; border-radius: 999px; background: var(--rd-panel, var(--bg-sunken)); overflow: hidden;
}
.sd-progress-bar > span {
  display: block; height: 100%; width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rd-teal), color-mix(in srgb, var(--rd-teal) 60%, var(--primary-300, #7eb8a2)));
  transition: width .6s ease;
}
.sd-progress-bar > span.running {
  background-size: 200% 100%;
  animation: sd-bar-shine 1.4s linear infinite;
}
@keyframes sd-bar-shine {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
.an-rail-step.done .an-rail-num {
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
}
@media (max-width: 720px) {
  .an-adbar:has(> .sd-adbar-main) { flex-wrap: wrap; }
  .sd-ad-id { width: 100%; }
  .sd-ad-id-value { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .sd-progress-hdr { flex-direction: column; }
  .sd-style-cards { grid-template-columns: 1fr 1fr; }
  .sd-product-cards { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .sd-style-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   Editor queue (EditorQueuePanel) — an editor's ClickUp tasks.
   Density over decoration: this is a worklist a power user scans
   many times a day, so rows stay compact and only the two states
   that cost the editor time (brief missing, brief truncated) get
   colour. Everything else is neutral.
   ============================================================ */
.eq-panel { display: flex; flex-direction: column; gap: var(--space-4); }
/* Was bare text floating directly on the page's own teal-tinted background —
   every other screen's header sits inside a card (.an-card); this one alone
   had no surface of its own, so "My tasks" read as unfinished next to the
   properly-carded rows below it once tasks actually load. */
.eq-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--rd-surface, var(--bg-surface));
  border: 1px solid var(--rd-line-2, var(--border-subtle));
  border-radius: var(--rd-radius-card, 14px);
  box-shadow: var(--shadow-sm);
}
.eq-head-title-row { display: flex; align-items: flex-start; gap: 12px; }
.eq-head-icon { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; margin-top: 2px; border-radius: var(--rd-radius-ctrl);
  background: var(--rd-teal-tint); color: var(--rd-teal-ink); }
.eq-title { font-family: var(--rd-font-sans); font-size: var(--text-xl); font-weight: 700; margin: 0; color: var(--rd-ink-1, var(--fg-1)); }
.eq-sub { margin: 4px 0 0; font-size: var(--text-sm); color: var(--rd-ink-3); max-width: 68ch; }
.eq-btn { display: inline-flex; align-items: center; gap: 6px; }

.eq-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  font-family: var(--rd-font-mono); font-size: var(--text-xs); color: var(--rd-ink-3); }
.eq-summary-board { padding: 2px 8px; border: 1px solid var(--rd-line-2); border-radius: var(--rd-radius-pill); }
.eq-summary-warn { padding: 2px 8px; border-radius: var(--rd-radius-pill);
  background: var(--rd-warning-bg); color: var(--rd-warning-fg); border: 1px solid var(--rd-warning-bd); }

.eq-banner { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border: 1px solid var(--rd-line-2); border-radius: var(--rd-radius-ctrl);
  background: var(--rd-surface-2); font-size: var(--text-sm); color: var(--rd-ink-4); }
.eq-banner.warn { background: var(--rd-warning-bg); border-color: var(--rd-warning-bd); color: var(--rd-warning-fg); }
.eq-banner.bad { background: var(--rd-danger-bg); border-color: var(--rd-danger-bd); color: var(--rd-danger-fg); }

/* Start failures render ON the row that failed, not in a banner at the top of the
   panel — on a full queue that meant scrolling back up to find out why the button
   you just pressed did nothing. Same tones as .eq-banner so the two read alike. */
.eq-row-error { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px;
  padding: 8px 10px; border: 1px solid var(--rd-line-2);
  border-radius: var(--rd-radius-ctrl); font-size: var(--text-sm);
  background: var(--rd-surface-2, var(--bg-sunken)); color: var(--rd-ink-4); }
/* Hex fallbacks because the --rd-danger-*/--rd-warning-* tokens are NOT defined
   anywhere in this stylesheet — every other call site passes the same fallbacks,
   and the tone would otherwise resolve to nothing and render untinted. */
.eq-row-error.warn { background: var(--rd-warning-bg, #F9F3E7);
  border-color: var(--rd-warning-bd, #EAD9B6); color: var(--rd-warning-fg, #B8802A); }
.eq-row-error.bad { background: var(--rd-danger-bg, #FBEAEA);
  border-color: var(--rd-danger-bd, #F0C9C6); color: var(--rd-danger-fg, #B3261E); }
/* The icon must not shrink as the message wraps to a second line. */
.eq-row-error svg { flex: none; margin-top: 2px; }

.eq-empty { padding: var(--space-8); border: 1px solid var(--rd-line-2);
  border-radius: var(--rd-radius-card); background: var(--rd-surface, var(--bg-surface)); text-align: left; }
.eq-empty p { margin: 0; font-size: var(--text-md); color: var(--rd-ink-4); }
.eq-empty-note { margin-top: 8px !important; font-size: var(--text-sm) !important; color: var(--rd-ink-3) !important; max-width: 70ch; }

.eq-board { display: flex; flex-direction: column; gap: 8px; }
.eq-board-title { margin: var(--space-2) 0 0; font-family: var(--rd-font-mono);
  font-size: var(--text-2xs); letter-spacing: .09em; text-transform: uppercase; color: var(--rd-ink-3); font-weight: 600; }

/* One row = one task. Grid keeps the action column aligned across rows
   regardless of how long a task name or brief message runs. */
.eq-row { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-4);
  padding: 14px 16px; background: var(--rd-surface); border: 1px solid var(--rd-line-2);
  border-radius: var(--rd-radius-card); transition: border-color 120ms cubic-bezier(0.2,0.8,0.2,1); }
.eq-row:hover { border-color: var(--rd-line-3); }
.eq-row-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.eq-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eq-id { font-family: var(--rd-font-mono); font-size: var(--text-xs); color: var(--rd-ink-3); }
.eq-name { font-size: var(--text-md); font-weight: 600; color: var(--rd-ink-1, var(--fg-1)); overflow-wrap: anywhere; }

.eq-status { font-family: var(--rd-font-mono); font-size: var(--text-2xs); padding: 2px 7px;
  border-radius: var(--rd-radius-pill); border: 1px solid var(--rd-line-2); color: var(--rd-ink-3); }
.eq-status.active { background: var(--rd-teal-tint); border-color: var(--rd-teal-border); color: var(--rd-teal-ink); }
.eq-status.warn { background: var(--rd-warning-bg); border-color: var(--rd-warning-bd); color: var(--rd-warning-fg); }
.eq-status.new { background: var(--rd-surface-2); }

.eq-asset { font-family: var(--rd-font-mono); font-size: var(--text-2xs);
  padding: 2px 7px; border-radius: var(--rd-radius-pill); background: var(--rd-surface-2);
  border: 1px solid var(--rd-line-2); color: var(--rd-ink-4); }
.eq-asset.none { color: var(--rd-ink-3); font-style: normal; }

.eq-brief { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--text-xs);
  color: var(--rd-ink-3); padding: 6px 8px; border-radius: var(--rd-radius-ctrl); background: var(--rd-surface-2); }
.eq-brief.ok { color: var(--rd-ink-4); }
.eq-brief.warn { background: var(--rd-warning-bg); color: var(--rd-warning-fg); }
.eq-brief.bad { background: var(--rd-danger-bg); color: var(--rd-danger-fg); }
/* "Open document" reads as a plain inline link next to the brief message — easy
   to miss in a wall of text. A small pill button makes it a clear, tappable
   affordance instead of a piece of text that happens to be clickable. */
.eq-brief-link { margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  flex: none; font-size: var(--text-xs); font-weight: 600; color: var(--rd-ink-2, var(--fg-2));
  text-decoration: none; white-space: nowrap; padding: 3px 9px;
  border: 1px solid var(--rd-line-2); border-radius: var(--rd-radius-pill);
  background: var(--rd-surface); transition: border-color 120ms, color 120ms, background 120ms; }
.eq-brief-link:hover { border-color: var(--rd-teal-border); color: var(--rd-teal-ink);
  background: var(--rd-teal-tint); text-decoration: none; }

/* Its own boxed surface, distinct from the row's background, so the action
   column reads as one clear "do something with this task" unit rather than
   controls floating loose next to the task details. */
.eq-row-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  padding: 12px; background: var(--rd-surface-2); border: 1px solid var(--rd-line-2);
  border-radius: var(--rd-radius-ctrl); }
.eq-pick { display: flex; flex-direction: column; gap: 4px; }
.eq-pick-label { display: inline-flex; align-items: center; gap: 4px; font-family: var(--rd-font-mono);
  font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--rd-ink-3); }
.eq-select { width: 100%; height: 32px; padding: 0 8px; font-family: var(--rd-font-sans);
  font-size: var(--text-sm); color: var(--rd-ink-1, var(--fg-1)); background: var(--rd-surface);
  border: 1px solid var(--rd-line-2); border-radius: var(--rd-radius-ctrl); cursor: pointer; }
.eq-select:hover { border-color: var(--rd-line-3); }
.eq-select:focus-visible { outline: none; border-color: var(--rd-teal); box-shadow: var(--shadow-focus); }
.eq-row-btns { display: flex; gap: 6px; }
.eq-row-btns .eq-btn { flex: 1 1 auto; justify-content: center; }
.eq-cu-link { display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: var(--text-xs); font-weight: 600; color: var(--rd-ink-3); text-decoration: none;
  text-align: center; padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--rd-line-2); }
.eq-cu-link:hover { color: var(--rd-teal-ink); text-decoration: none; }

/* Static-ad rows used to be fenced off in their own dashed group here (~20% of the
   Oregano editor queue). They are now filtered out server-side instead, since Craft
   cannot seed a static workspace, so the group and its row variant are gone. */

@media (max-width: 860px) {
  .eq-row { grid-template-columns: minmax(0, 1fr); }
  .eq-row-actions { border-top: 1px solid var(--rd-line-2); padding-top: 10px; }
}

/* The workspace id a task maps to (clickup_<task_id>) — the handle an editor
   uses to find their task again in "Ads you made earlier". Mono and quiet: it
   is a lookup key, not a headline. */
.eq-adid { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  font-family: var(--rd-font-mono); font-size: var(--text-2xs); color: var(--rd-ink-3);
  background: var(--rd-surface-2); border: 1px solid var(--rd-line-2);
  border-radius: var(--rd-radius-pill); padding: 1px 7px; }

/* ============================================================================
   Reframe to 16:9 (ReframePanel.jsx + ui/reframe.html)

   Namespaced `rf-` and built on the shared tokens in colors_and_type.css, so the
   tab inherits the app's palette in both themes instead of hardcoding greys. The
   panel previously used `an-*` class names that mostly do not exist in this
   sheet, so it rendered essentially unstyled.

   The timeline is the point of the screen. A reframe job is a row of independent
   generations, each of which can come back with its own defect, so the reviewer
   needs to see the spans as regions they can click -- not type timestamps into a
   form and hope they land in the right one.
   ========================================================================== */

.rf { display: flex; flex-direction: column; gap: var(--space-5, 20px); padding-bottom: var(--space-10, 40px); }


.rf-card { background: var(--rd-surface); border: 1px solid var(--rd-line-2); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.rf-card-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rf-card-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--rd-ink-1); }
.rf-card-meta { font-size: 12px; color: var(--rd-ink-4); font-family: var(--font-mono); }

.rf-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.rf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rf-label { font-size: 12px; font-weight: 600; color: var(--rd-ink-2); }
.rf-input, .rf-select {
  width: 100%; background: var(--rd-panel); color: var(--rd-ink-1);
  border: 1px solid var(--rd-line-3); border-radius: 8px;
  padding: 9px 11px; font: inherit; font-size: 13px;
  transition: border-color var(--dur-fast, .12s) var(--ease-standard), box-shadow var(--dur-fast, .12s) var(--ease-standard);
}
.rf-input:focus, .rf-select:focus { outline: none; border-color: var(--rd-teal); box-shadow: var(--shadow-focus); }
.rf-input:disabled, .rf-select:disabled { opacity: .5; cursor: not-allowed; }
.rf-input--mono { font-family: var(--font-mono); font-size: 12px; }
.rf-hint { margin: 0; font-size: 12px; color: var(--rd-ink-4); line-height: 1.5; }

/* Which model fills in the sides. Cards rather than a <select> because the point of the
   question is that neither route is simply better, and a dropdown shows the caveat of the
   option already taken while hiding the one being decided against. Both sentences stay up. */
.rf-models { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rf-model {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  padding: 11px 12px; border-radius: 10px;
  background: var(--rd-panel); border: 1px solid var(--rd-line-2);
  transition: border-color var(--dur-fast, .12s) var(--ease-standard),
              background var(--dur-fast, .12s) var(--ease-standard);
}
.rf-model:hover { border-color: var(--rd-line-3); }
.rf-model.is-on { border-color: var(--rd-teal); background: var(--rd-teal-tint); }
.rf-model input { margin-top: 3px; accent-color: var(--rd-teal); flex: 0 0 auto; }
.rf-model input:disabled { cursor: not-allowed; }
.rf-model-body { display: block; min-width: 0; }
.rf-model-name { display: block; font-size: 13px; font-weight: 600; color: var(--rd-ink-1); }
.rf-model-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.02em;
  vertical-align: middle;
  color: var(--rd-ink-2);
  background: var(--rd-panel);
  border: 1px solid var(--rd-line-3);
}
.rf-model-why {
  display: block; margin-top: 3px;
  font-size: 12px; line-height: 1.45; color: var(--rd-ink-4);
}

.rf-check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.rf-check input { margin-top: 2px; accent-color: var(--rd-teal); }
.rf-check span { font-size: 13px; color: var(--rd-ink-2); }

.rf-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rf-btn {
  appearance: none; border: 1px solid transparent; border-radius: 8px;
  padding: 9px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; background: var(--rd-teal); color: #fff;
  transition: filter var(--dur-fast, .12s) var(--ease-standard), opacity var(--dur-fast, .12s);
}
.rf-btn:hover:not(:disabled) { filter: brightness(1.08); }
.rf-btn:disabled { opacity: .45; cursor: not-allowed; }
.rf-btn--ghost { background: transparent; color: var(--rd-ink-1); border-color: var(--rd-line-3); }
.rf-btn--ghost:hover:not(:disabled) { background: var(--rd-panel); filter: none; }
a.rf-btn { text-decoration: none; display: inline-flex; align-items: center; }

.rf-stat { display: flex; align-items: baseline; gap: 8px; }
.rf-stat-value { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--rd-ink-1); line-height: 1.1; }
.rf-stat-value--warn { color: var(--rd-ink-2); }
.rf-stat-label { font-size: 12px; color: var(--rd-ink-4); }
/* The figures are the previous answer while the new one is being worked out. Faded rather than
   hidden: the shot strip beside them is what the footage question is answered by looking at, so
   taking the panel away would remove the thing being decided about. */
.rf-stat.is-stale { opacity: 0.45; transition: opacity 120ms ease; }

.rf-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; }
.rf-table th { text-align: left; font-weight: 500; color: var(--rd-ink-4); padding: 6px 8px; border-bottom: 1px solid var(--rd-line-2); white-space: nowrap; }
.rf-table td { padding: 6px 8px; border-bottom: 1px solid var(--rd-line-2); color: var(--rd-ink-2); }
.rf-plan-split {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; margin-top: 12px;
}
.rf-plan-player { width: 240px; flex: 0 0 240px; }
.rf-plan-player .rf-player { width: 100%; max-height: 426px; object-fit: contain; }
.rf-plan-spans { flex: 1 1 280px; min-width: 220px; }
.rf-ref-note { margin: 0 0 8px; }
.rf-span-list { display: flex; flex-direction: column; gap: 6px; }
.rf-span-row {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--rd-line-2); background: var(--rd-panel, transparent);
  color: var(--rd-ink-2);
}
.rf-span-playhead {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 0; border: 0; background: transparent;
  text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.rf-span-row b { font-size: 13px; font-weight: 600; color: var(--rd-ink-1); }
.rf-span-playhead > span { font-family: var(--font-mono); font-size: 11.5px; color: var(--rd-ink-4); }
.rf-span-ref {
  display: flex; align-items: flex-start; gap: 8px; margin: 0; cursor: pointer;
  font-size: 12px; line-height: 1.35; color: var(--rd-ink-2);
}
.rf-span-ref input { margin-top: 2px; flex: 0 0 auto; }
.rf-span-row.is-on {
  border-color: var(--rd-teal, #129683);
  background: var(--rd-teal-tint, rgba(18, 150, 131, 0.12));
}
.rf-span-row:hover { border-color: var(--rd-ink-4); }
.rf-span-play {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--primary-500, #129683);
}
.rf-span-play.is-on { font-weight: 600; }
.rf-span-plays {
  display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px;
}
.rf-span-play-at {
  margin-left: 6px; font-family: var(--font-mono); color: var(--rd-ink-4); font-weight: 400;
}
.rf-table-wrap { overflow-x: auto; }

.rf-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.rf-pill--run { background: var(--info-bg); color: var(--info-500); }
.rf-pill--done { background: var(--rd-teal-tint); color: var(--rd-teal); }
.rf-pill--err { background: var(--danger-bg); color: var(--danger-500); }
.rf-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rf-pill--run .rf-pill-dot { animation: rf-pulse 1.4s var(--ease-standard) infinite; }
@keyframes rf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.rf-player { width: 100%; border-radius: 8px; background: #000; display: block; }
/* The run header: the name on the left as the title, the money and the stop on the right. */
.rf-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.rf-head-main { min-width: 0; flex: 1 1 320px; display: flex; flex-direction: column; gap: 8px; }
.rf-head-side { display: flex; align-items: center; gap: 14px; flex: none; }

/* The title is the name, and renaming is done by typing in it. It carries no chrome until it is
   hovered or focused, so the screen reads as a heading rather than as a form -- a box with a
   "Name" label above it drew the eye to the least urgent thing on a page about a running job. */
.rf-title-input {
  width: 100%; min-width: 0;
  font-size: 19px; font-weight: 650; letter-spacing: -0.01em;
  color: var(--rd-ink-1);
  background: transparent;
  border: 1px solid transparent; border-radius: 7px;
  padding: 3px 7px; margin: -3px -7px;
  font-family: inherit;
  text-overflow: ellipsis;
  transition: background var(--dur-fast, .12s), border-color var(--dur-fast, .12s);
}
.rf-title-input:hover { background: var(--rd-panel); border-color: var(--rd-line-2); }
.rf-title-input:focus {
  outline: none; background: var(--rd-surface);
  border-color: var(--rd-teal); box-shadow: var(--shadow-focus);
  text-overflow: clip;
}
.rf-title-input::placeholder { color: var(--rd-ink-5); font-weight: 500; }

/* The running total. Large enough to be read at a glance, labelled so it cannot be mistaken for
   what one attempt cost -- it is every attempt on this video added up. */
.rf-spend {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15;
  font-size: 17px; font-weight: 650; color: var(--rd-ink-1);
  font-variant-numeric: tabular-nums;
}
.rf-spend small { font-size: 11px; font-weight: 500; color: var(--rd-ink-4); letter-spacing: 0; }

@media (max-width: 560px) {
  .rf-head-side { width: 100%; justify-content: space-between; }
}

/* Said before the money is spent, not discovered afterwards. */
.rf-selbar-note {
  display: block; margin-top: 6px; font-style: normal;
  font-size: 12px; line-height: 1.45; color: var(--rd-ink-4);
}

.rf-fixref {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px;
  margin-top: 12px; cursor: pointer;
  font-size: 12.5px; line-height: 1.35; color: var(--rd-ink-2);
}
.rf-fixref input { margin-top: 3px; flex: 0 0 auto; }
.rf-fixref > span { flex: 1 1 200px; font-weight: 600; }
.rf-fixref > em {
  flex: 1 1 100%; margin: 0 0 0 22px;
  font-style: normal; font-size: 11.5px; line-height: 1.45; color: var(--rd-ink-4);
}

/* The one field that turns a redo from a re-roll into an instruction. Sits above the buttons
   rather than beside them, because it is a sentence and a 200px box invites three words. */
.rf-fixnote {
  display: block; margin-top: 12px;
}
.rf-fixnote > span {
  display: block; margin-bottom: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--rd-ink-2);
}
.rf-fixnote > input { width: 100%; }
.rf-fixnote > em {
  display: block; margin-top: 5px; font-style: normal;
  font-size: 11.5px; line-height: 1.45; color: var(--rd-ink-4);
}

/* The last step: offered after the player, because the point is to watch it first. */
.rf-sharpen {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  flex-wrap: wrap;
  padding: 14px 16px; border-radius: 10px;
  background: var(--rd-teal-tint); border: 1px solid var(--rd-teal-border);
}
.rf-sharpen > div { flex: 1 1 320px; min-width: 0; }
.rf-sharpen .an-card-title { margin-bottom: 4px; }
.rf-sharpen .an-hint { margin: 0; }
.rf-sharpened { color: var(--rd-ink-4); }

/* The way back, above every step that is not the start. */
.rf-crumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--rd-ink-4);
  margin-bottom: 2px;
  animation: rf-step-in .18s var(--ease-standard, ease-out) both;
}
.rf-crumb-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  padding: 5px 9px; margin-left: -9px;
  font: inherit; font-weight: 550; color: var(--rd-teal-ink); cursor: pointer;
  transition: background var(--dur-fast, .12s), border-color var(--dur-fast, .12s);
}
.rf-crumb-back:hover { background: var(--rd-teal-tint); border-color: var(--rd-teal-border); }
.rf-crumb-back:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.rf-crumb-sep { color: var(--rd-ink-5); }
.rf-crumb-here { color: var(--rd-ink-2); font-weight: 550; }

/* Steps arrive rather than appear, so a change of screen reads as advancing and not as the page
   breaking. Short and travelling barely any distance: a long transition is worse than none when
   the reader is waiting on a video. */
@keyframes rf-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.rf-step { animation: rf-step-in .28s var(--ease-standard, ease-out) both; }

/* Room between ideas. These blocks were butted together, so a warning, a price and an
   instruction all read as a single paragraph. */
.rf .an-card { display: flex; flex-direction: column; gap: 14px; }
.rf .an-card > .an-hint { margin: 0; }
.rf-step-intro {
  margin: 0; font-size: 13px; line-height: 1.55; color: var(--rd-ink-4); max-width: 68ch;
}

@media (prefers-reduced-motion: reduce) {
  .rf-step, .rf-crumbs { animation: none; }
}

/* The cut as it stands, kept on screen while the next one is being made. */
.rf-preview { display: flex; flex-direction: column; gap: 8px; }
.rf-preview .rf-player { opacity: .92; }
.rf-preview .an-hint { margin: 0; }

/* A stopped run is not a dead end: every span it finished is in the bucket, so the panel
   offers to carry on rather than leaving Start over as the only way forward. */
.rf-stopped { display: flex; flex-direction: column; gap: 10px; }
.rf-stopped .an-panel-footer { margin-top: 2px; }
.rf-err { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--danger-500); white-space: pre-wrap; word-break: break-word; }
.rf-empty { font-size: 13px; color: var(--rd-ink-4); }

/* ---- degraded windows ----------------------------------------------------
   A notice, not an error: the job succeeded and the video is usable. Amber
   rather than red for exactly that reason -- a red panel under a finished
   video sends people back round the retry loop this change exists to stop. */
.rf-degraded {
  display: flex; flex-direction: column; gap: 6px;
  margin: 10px 0 0; padding: 10px 12px;
  border: 1px solid #f0c66b; border-left-width: 3px; border-radius: 8px;
  background: #fffaf0;
}
.rf-degraded-hd { font-size: 13px; }
/* A COLUMN of rows, not a wrapping row of chips. Each window now carries its reason and its
   own download beside the timestamps, and three things per window wrapping as one flat list
   makes it impossible to tell which reason belongs to which range. */
.rf-degraded-list { display: flex; flex-direction: column; gap: 6px; }
.rf-degraded-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rf-degraded-why {
  font-size: 12px; line-height: 1.4; color: var(--rd-ink-4);
}

/* Seedance remake: live/finished per-scene Claude→Seedance prompts. */
.rf-prompts {
  display: flex; flex-direction: column; gap: 8px;
  margin: 12px 0 0; padding: 12px;
  border: 1px solid var(--rd-line-2); border-radius: 8px;
  background: var(--rd-panel);
}
.rf-prompts-hd { font-size: 13px; color: var(--rd-ink-1); }
.rf-captions { margin-top: 12px; display: grid; gap: 8px; }
.rf-caption-cues {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 12px;
  color: var(--rd-ink-2);
  line-height: 1.45;
}
.rf-caption-cues code {
  font-size: 11px;
  color: var(--rd-ink-3);
}
.rf-caption-row {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin: 4px 0;
}
.rf-caption-text {
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--rd-line-2);
  background: var(--rd-surface);
  color: var(--rd-ink-1);
  font-size: 13px;
}
.rf-caption-text:focus {
  outline: none;
  border-color: var(--rd-teal);
}
.rf-scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  align-items: start;
}
.rf-scene-tile {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  border: 1px solid var(--rd-line-2); border-radius: 8px;
  padding: 8px; background: var(--rd-surface);
}
.rf-scene-tile-hd {
  font-size: 12.5px; font-weight: 600; color: var(--rd-ink-2);
}
.rf-scene-tile .rf-prompt-player {
  aspect-ratio: 16 / 9; max-height: none; margin: 0;
  object-fit: contain;
}
.rf-scene-tile .rf-prompt-textarea { min-height: 96px; }
.rf-prompt-row {
  border: 1px solid var(--rd-line-2); border-radius: 6px;
  padding: 6px 10px; background: var(--rd-surface);
}
.rf-prompt-row > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--rd-ink-2);
}
.rf-scene-status--done { color: var(--success-500, #17a34a); }
.rf-scene-status--failed { color: var(--rd-danger-fg, #B3261E); }
.rf-scene-status--amber { color: var(--rd-warning-fg, #B8802A); }
.rf-prompt-brief { margin: 6px 0; }
.rf-prompt-brief > summary {
  cursor: pointer; font-size: 12px; color: var(--rd-ink-4);
}
.rf-prompt-body {
  margin: 8px 0 2px; padding: 8px 10px;
  white-space: pre-wrap; word-break: break-word;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.45;
  color: var(--rd-ink-2); background: var(--rd-panel);
  border-radius: 4px; max-height: 280px; overflow: auto;
}
.rf-prompt-player {
  display: block; width: 100%; max-height: 280px;
  margin: 8px 0; border-radius: 6px; background: #000;
}
.rf-prompt-wait { margin: 8px 0; }
.rf-prompt-edit {
  display: flex; flex-direction: column; gap: 4px; margin-top: 8px;
}
.rf-prompt-edit > span {
  font-size: 12px; font-weight: 600; color: var(--rd-ink-2);
}
.rf-prompt-textarea {
  width: 100%; min-height: 140px; resize: vertical;
  padding: 8px 10px; border-radius: 6px;
  border: 1px solid var(--rd-line-2); background: var(--rd-surface);
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.45;
  color: var(--rd-ink-1);
}
.rf-prompt-textarea:focus {
  outline: none; border-color: var(--rd-teal); box-shadow: var(--shadow-focus);
}
.rf-prompt-textarea:disabled { opacity: .6; cursor: not-allowed; }
.rf-prompt-acts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px;
}
.rf-kie-note {
  flex: 1 1 100%;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--rd-ink-4);
}

/* Replacing a flashing edge frame. Sits with the redo controls but is not one: it costs
   nothing and re-generates nothing, so it is laid out as its own small block rather than as
   another tick in the list of things this redo will buy. */
.rf-fixflash { display: block; margin-top: 12px; }
.rf-fixflash > span {
  display: block; margin-bottom: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--rd-ink-2);
}
.rf-fixflash-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rf-fixflash > em {
  display: block; margin-top: 5px; font-style: normal;
  font-size: 11.5px; line-height: 1.45; color: var(--rd-ink-4);
}

/* ---- timeline: spans as clickable regions -------------------------------- */
.rf-tl { display: flex; flex-direction: column; gap: 8px; }
.rf-tl-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* One horizontally scrolling viewport for both rows and the axis, so they stay aligned with
   each other and with the playhead at any scroll position. */
.rf-tl-scroll {
  overflow-x: auto; overflow-y: hidden;
  display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px;
  scrollbar-width: thin;
}
/* No flex and no gap: every chip is placed at its own time. */
.rf-tl-track { position: relative; height: 46px; user-select: none; flex: none; }
.rf-tl-span {
  position: absolute; top: 0; bottom: 0; box-sizing: border-box; overflow: hidden;
  background: var(--rd-panel); border: 1px solid var(--rd-line-2);
  border-radius: 6px; cursor: pointer; padding: 5px 6px;
  display: flex; flex-direction: column; justify-content: space-between; text-align: left;
  transition: background var(--dur-fast, .12s) var(--ease-standard), border-color var(--dur-fast, .12s) var(--ease-standard);
}
.rf-tl-span:hover { background: var(--rd-panel); border-color: var(--rd-line-3); }
.rf-tl-span:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.rf-tl-span.is-sel { background: var(--rd-teal-tint); border-color: var(--rd-teal); }
.rf-tl-span.is-playing { box-shadow: inset 0 -3px 0 0 var(--rd-teal); }
.rf-tl-span.is-redone::after { content: ''; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--rd-ink-2); }
.rf-tl-idx { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--rd-ink-2); line-height: 1; }
.rf-tl-span.is-sel .rf-tl-idx { color: var(--rd-teal-ink); }
.rf-tl-dur { font-family: var(--font-mono); font-size: 11px; color: var(--rd-ink-4); line-height: 1; white-space: nowrap; }
.rf-tl-cuts { position: relative; height: 6px; }
.rf-tl-cut { position: absolute; top: 0; width: 1px; height: 5px; background: var(--rd-line-3); }
.rf-tl-head { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--danger-500); border-radius: 1px; pointer-events: none; transition: left .1s linear; }
.rf-tl-axis { display: flex; justify-content: space-between; flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--rd-ink-4); }

.rf-selbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px; border: 1px solid var(--rd-line-2); border-left: 3px solid var(--rd-ink-2); border-radius: 8px; background: var(--rd-panel); }
.rf-selbar-text { font-size: 13px; color: var(--rd-ink-2); }
.rf-selbar-text b { color: var(--rd-ink-1); font-family: var(--font-mono); }

/* ---- shot filmstrip: the span-length choice, made by looking ------------- */
.rf-shots { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.rf-shot { position: relative; flex: 0 0 auto; border-radius: 6px; overflow: hidden; border: 1px solid var(--rd-line-2); background: #000; }
.rf-shot img { display: block; height: 76px; width: auto; }
.rf-shot b { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.62); color: #fff; font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-align: center; padding: 1px 0; }
.rf-ask { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.rf-ask .rf-field { min-width: 260px; }

/* Scene row sits above the span row: shorter, since it is the finer-grained choice. */
.rf-tl-track--scenes { height: 26px; }
.rf-tl-scene { justify-content: flex-end; padding: 3px 4px; }

/* Previous runs: finished work recovered from disk, so a restart does not hide it. */
.rf-runs { display: flex; flex-direction: column; gap: 6px; }
.rf-run { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; text-align: left; cursor: pointer; padding: 9px 12px;
  background: var(--rd-panel); border: 1px solid var(--rd-line-2);
  border-radius: 8px; transition: background var(--dur-fast, .12s), border-color var(--dur-fast, .12s); }
.rf-run:hover { background: var(--rd-panel); border-color: var(--rd-line-3); }
.rf-run.is-sel { border-color: var(--rd-teal); background: var(--rd-teal-tint); }
.rf-run-name { font-size: 13px; color: var(--rd-ink-1); font-weight: 500; word-break: break-all; }
.rf-run-meta { font-family: var(--font-mono); font-size: 12px; color: var(--rd-ink-4); }

/* Reframe reuses the shared an-stage-* rows; these two are the only gaps in that set. */
.rf .an-stage-meta { font-size: 11px; color: var(--rd-ink-4); margin-top: 2px; }
.rf .an-stage-item.pending { opacity: .6; }
.rf .an-stage-item.failed .an-stage-ic { background: var(--danger-bg); color: var(--danger-500); border-color: var(--danger-500); }

/* Reframe upload dropzone. Its own block rather than a reused field, because the target has to
   be big enough to drop a file onto without aiming, and has to show three different things in
   the same footprint: empty, uploading, loaded. */
.rf-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 132px; padding: 20px;
  border: 1.5px dashed var(--rd-line-3); border-radius: 12px;
  background: var(--rd-panel); cursor: pointer; text-align: center;
  transition: border-color .12s ease, background .12s ease;
}
.rf-drop:hover { border-color: var(--rd-teal); }
.rf-drop.is-over { border-color: var(--rd-teal); background: var(--rd-teal-tint); }
.rf-drop.is-loaded { border-style: solid; border-color: var(--rd-line-3); }
.rf-drop-title {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--rd-ink-1);
}
.rf-drop-meta { font-size: 12px; color: var(--rd-ink-4); }
.rf-drop-bar {
  width: min(320px, 100%); height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--rd-line-2);
}
.rf-drop-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--rd-teal); transition: width .15s ease;
}

/* The "or use a file already here" row under the drop target. Deliberately quieter than the
   dropzone: uploading is the path that works everywhere, this one is the local shortcut. */
.rf-localsrc {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; flex-wrap: wrap;
}
.rf-localsrc-or {
  font-size: 12px; color: var(--rd-ink-4); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600;
}
.rf-localsrc .rf-input { flex: 1 1 260px; min-width: 0; }

/* Shown when the run card's poll cannot reach the server. The numbers beside it are frozen,
   and saying so is the difference between "this job is stuck" and "this page is stuck". */
.rf-stale {
  margin-left: 10px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  color: var(--rd-ink-2); background: var(--rd-panel);
}


/* The run's own progress: ring on the left, what it means on the right. */
.rf-live {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 0; flex-wrap: wrap;
}
.rf-live-copy { min-width: 0; flex: 1 1 220px; }
.rf-live-head {
  font-size: 17px; font-weight: 600; color: var(--rd-ink-1);
}
.rf-live-sub {
  margin-top: 5px; font-size: 13px; color: var(--rd-ink-4);
}
.rf-ring { flex: none; }

/* The button that actually spends money reads as the primary action. */
.rf-btn--go { font-weight: 600; }

/* ── Reframe: past videos as a grid ──────────────────────────────────────────────────────
   Below the upload, not above it. Starting a new ad is the reason to open this tab; the
   archive is what you come back for, and it should not push the primary action off-screen. */
/* rf-TILES, not rf-grid: that name already lays out the settings row, and redefining it
   silently re-flowed a part of the page this work never meant to touch. */
.rf-tiles {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
}
.rf-tile {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 12px; border-radius: 12px;
  border: 1px solid var(--rd-line-2); background: var(--rd-surface);
  font: inherit; text-align: left; cursor: pointer; position: relative; overflow: hidden;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease,
              border-color .18s ease;
  animation: rf-tile-in .32s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes rf-tile-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.rf-tile:hover {
  transform: translateY(-3px);
  border-color: var(--rd-teal);
  box-shadow: 0 10px 24px -14px rgba(20, 24, 27, .35);
}
.rf-tile:active { transform: translateY(-1px); }
.rf-tile.is-sel { border-color: var(--rd-teal); background: var(--rd-teal-tint); }
.rf-tile-top { display: flex; align-items: center; gap: 8px; width: 100%; }
/* A 16:9 glyph, so the grid reads as widescreen output at a glance. */
.rf-tile-ratio {
  width: 34px; height: 20px; border-radius: 4px; flex: none;
  background: var(--rd-panel); border: 1px solid var(--rd-line-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.rf-tile-ratio i {
  width: 22px; height: 12px; border-radius: 2px; display: block;
  background: linear-gradient(120deg, var(--rd-teal), var(--rd-teal-border));
}
.rf-tile-name {
  font-size: 13px; font-weight: 600; color: var(--rd-ink-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.35;
}
.rf-tile-meta { font-size: 12px; color: var(--rd-ink-4); }
.rf-tile-cost {
  font-size: 12px; font-weight: 600;
  color: var(--rd-ink-2); font-variant-numeric: tabular-nums;
}
/* Slides up on hover rather than sitting there: the whole tile is the target, so the label is
   an affordance, not a second button. */
.rf-tile-go {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 2px;
  font-size: 12px; font-weight: 600;
  color: var(--rd-teal-ink);
  opacity: 0; transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.rf-tile:hover .rf-tile-go, .rf-tile:focus-visible .rf-tile-go { opacity: 1; transform: none; }
.rf-actions--mid { justify-content: center; margin-top: 12px; }

/* Each step fades in rather than snapping, so moving between the three pages reads as one
   surface changing rather than three that replace each other. */
.rf > section, .rf > .an-card { animation: rf-page-in .26s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rf-page-in { from { opacity: 0; transform: translateY(6px); } }

/* The ring's fill eases to its new value; without this a jump from 30% to 40% is a flicker. */
.rf-ring .an-ring-fill { transition: stroke-dashoffset .6s cubic-bezier(.3, .8, .3, 1); }

@media (prefers-reduced-motion: reduce) {
  .rf-tile, .rf > section, .rf > .an-card { animation: none; }
  .rf-tile, .rf-tile-go, .rf-ring .an-ring-fill { transition: none; }
  .rf-tile:hover { transform: none; }
  .rf-tile-go { opacity: 1; transform: none; }
}

/* Which run this is. The id is here because it is what an operator quotes when something goes
   wrong, and hunting for it in a URL is not a thing to ask of an editor. */
.rf-identity {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 8px;
}
.rf-identity-name {
  font-size: 15px; font-weight: 600; color: var(--rd-ink-1);
}
.rf-identity-id {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--rd-line-2);
  background: var(--rd-panel); color: var(--rd-ink-4); cursor: pointer;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; transition: color .15s ease, border-color .15s ease;
}
.rf-identity-id:hover { color: var(--rd-ink-1); border-color: var(--rd-teal); }
.rf-identity-root {
  font-size: 12px; color: var(--rd-ink-4);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.rf-tile-id {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10.5px; color: var(--rd-ink-5); opacity: .75;
}
@media (prefers-reduced-motion: reduce) { .rf-identity-id { transition: none; } }


/* ============================================================================
   Competitor Remix (CompetitorRemixPanel.jsx)

   Built entirely on --rd-* tokens, so the panel follows the dashboard's light
   and dark themes without a second set of rules. The one place a raw colour
   appears is the claim-map disposition chip, whose background is set inline
   from CRX_DISPOSITION -- the legend and the rows must be tinted from one
   source, and that source is the JS object the rows are rendered from.

   Two blocks carry real weight rather than being layout:

   .crx-beat   the review strip at gate 1. A frame cut from the source at the
               timestamp the row claims, sitting directly beside the row's own
               words, because "does 0:12 really say that" is the only question
               that screen exists to answer.
   .crx-claimmap  the compliance-critical table at gate 2. Dropped rows are
               styled to stay readable rather than receding, since a claim that
               was dropped is exactly what a reviewer must not skim past.
   ============================================================================ */

.crx { display: flex; flex-direction: column; gap: 18px; }

.crx-head { display: flex; align-items: center; gap: 18px; }
.crx-head-icon {
  flex: none; width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rd-surface, #fff); color: var(--rd-teal-ink);
  box-shadow: 0 1px 2px rgba(20,24,27,.04), 0 8px 20px -14px rgba(20,24,27,.28);
}
.crx-head-body { min-width: 0; }
.crx-head h2 { margin: 0 0 4px; font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--rd-ink-1); }
.crx-head p { margin: 0; max-width: 62ch; font-size: 14px; line-height: 1.5; color: var(--rd-ink-3); }

.crx-error {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--danger-bg); color: var(--danger-500);
  border: 1px solid color-mix(in srgb, var(--danger-500) 35%, transparent);
  font-size: 13px;
}
.crx-error > button { margin-left: auto; }
.crx-note {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  background: var(--rd-panel); border: 1px solid var(--rd-line-3);
  font-size: 13px; color: var(--rd-ink-2);
}

.crx-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px; border: 0; border-radius: 9px;
  background: var(--rd-teal); color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.crx-primary:disabled { opacity: .45; cursor: not-allowed; }
.crx-ghost {
  padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--rd-line-3); background: transparent;
  color: var(--rd-ink-2); font-size: 12px; cursor: pointer;
}
.crx-ghost:hover { border-color: var(--rd-teal); color: var(--rd-teal-ink); }
.crx-ghost:disabled {
  background: var(--rd-panel, var(--bg-sunken)); border-color: transparent;
  color: var(--rd-ink-4); cursor: not-allowed;
}

/* ---- Source + form ---- */

.crx-new, .crx-job, .crx-list {
  padding: 18px; border-radius: 14px;
  background: var(--rd-surface); border: 1px solid var(--rd-line-1);
}
.crx-new h3, .crx-list h3 { margin: 0 0 14px; font-size: 15px; color: var(--rd-ink-1); }

/* Big enough to drop a file onto without aiming, and it has to show three states in one
   footprint: empty, uploading, loaded. Same reasoning as .rf-drop. */
.crx-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 150px; padding: 22px;
  border: 1.5px dashed var(--rd-line-3); border-radius: 12px;
  background: var(--rd-panel); text-align: center;
  transition: border-color .12s ease, background .12s ease;
}
.crx-drop.crx-dragging { border-color: var(--rd-teal); background: var(--rd-teal-tint); }
.crx-drop p { margin: 0; font-size: 13px; color: var(--rd-ink-2); }
.crx-drop-icon {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
}
.crx-filebtn {
  display: inline-block; padding: 8px 14px; border-radius: 9px;
  border: 1px solid var(--rd-line-3); background: var(--rd-surface);
  font-size: 13px; font-weight: 600; color: var(--rd-ink-1); cursor: pointer;
}
.crx-filebtn input { display: none; }
.crx-or { font-size: 12px; color: var(--rd-ink-4); }
/* Winner Ads Remix's "paste a link" step lives OUTSIDE the dashed drop box (a sibling section
   on the plain column background, see wr-source-link below) rather than inside it -- this
   divider is what separates it visually from "Choose a file" now that there's no shared
   dashed border doing that job for both. */
.crx-or-divider {
  position: relative; width: 100%; text-align: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rd-ink-4);
}
.crx-or-divider::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px;
  background: var(--rd-line-2, var(--border-subtle));
}
.crx-or-divider span { position: relative; background: var(--rd-surface, #fff); padding: 0 10px; }
.wr-source-link { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
/* Full width, no 460px cap, and taller -- this row sits on its own below the dashed drop box now
   (see wr-source-link above) rather than centered inside it, so it should use the column's full
   width like the "Name this remix" input right below it, not stay sized for the old cramped
   in-box layout. */
.wr-source-link .crx-urlrow { max-width: none; }
.wr-source-link .crx-urlrow input { padding: 13px 14px; font-size: 13.5px; }
.wr-source-link .crx-urlrow .crx-ghost { padding: 0 20px; font-size: 13px; }
.crx-urlrow { display: flex; gap: 8px; width: 100%; max-width: 460px; }
.crx-urlrow input {
  flex: 1; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--rd-line-3); background: var(--rd-surface);
  color: var(--rd-ink-1); font-size: 13px;
}
.crx-hint { font-size: 11.5px; color: var(--rd-ink-4); max-width: 58ch; }
.crx-source { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.crx-source strong { font-size: 13px; color: var(--rd-ink-1); }
.crx-source span { font-family: var(--font-mono); font-size: 11.5px; color: var(--rd-ink-4); }

.crx-progress {
  position: relative; width: 100%; max-width: 380px; height: 8px;
  border-radius: 999px; background: var(--rd-line-2); overflow: hidden;
}
.crx-progress > div { height: 100%; background: var(--rd-teal); transition: width .2s ease; }
.crx-progress > span {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 11px; color: var(--rd-ink-4);
}

.crx-form { display: flex; flex-direction: column; gap: 14px;  max-width: 560px; }
.crx-form > label { display: flex; flex-direction: column; gap: 5px; }
.crx-form > label > span { font-size: 12.5px; font-weight: 600; color: var(--rd-ink-2); }
.crx-form select, .crx-form input[type="text"], .crx-form textarea {
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--rd-line-3); background: var(--rd-surface);
  color: var(--rd-ink-1); font-size: 13px; font-family: inherit;
}
.crx-check { flex-direction: row !important; align-items: flex-start; gap: 9px !important; }
.crx-check input { margin-top: 3px; }
.crx-check span { font-size: 12.5px; font-weight: 600; color: var(--rd-ink-2); }
.crx-check em {
  display: block; margin-top: 3px; max-width: 56ch;
  font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--rd-ink-4);
}

/* The stage rail that used to live here is gone: Remix Studio now uses the shared StepRail,
   like every other guided flow. A dashboard whose flows each invent their own progress
   indicator teaches the reader a new vocabulary per screen. */

/* ---- Job view ---- */

.crx-gate { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.crx-gate-head h3 { margin: 0 0 4px; font-size: 16px; color: var(--rd-ink-1); }
.crx-gate-head p { margin: 0; max-width: 68ch; font-size: 12.5px; color: var(--rd-ink-3); }
.crx-gate-foot { display: flex; gap: 10px; align-items: center; }
/* A past, already-approved step viewed read-only via the rail -- same gate markup, dimmed
   just enough to read as "not the thing you can act on right now". */
.crx-gate-readonly { opacity: 0.86; }
.crx-gate-readonly textarea { background: var(--rd-panel); cursor: default; }
.crx-viewing-note {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  background: var(--rd-panel); border: 1px solid var(--rd-line-3);
  font-size: 12.5px; color: var(--rd-ink-3);
}

/* Read-only look-back at the Analyze/Plan stages (WrAnalyzeReview, WrPlanReview) --
   reachable by clicking an earlier, already-completed pill in the Winner Ads Remix rail. */
.wr-review-warnings {
  margin: 0; padding: 10px 14px; border-radius: 10px; list-style: none;
  background: var(--rd-warning-bg, #F9F3E7); border: 1px solid var(--rd-warning-bd, #EAD9B6);
  color: var(--rd-warning-fg, #B8802A); font-size: 12.5px; line-height: 1.6;
}
.wr-review-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.wr-review-col h4, .wr-review-scenes-hdr, .wr-review-variant h4 {
  margin: 0 0 8px; font-size: 13px; color: var(--rd-ink-1);
}
.wr-review-item {
  padding: 8px 10px; border-radius: 8px; background: var(--rd-panel);
  border: 1px solid var(--rd-line-3); margin-bottom: 6px;
}
.wr-review-item strong { font-size: 12.5px; color: var(--rd-ink-1); }
.wr-review-item p { margin: 3px 0 0; font-size: 12px; color: var(--rd-ink-3); line-height: 1.45; }
.wr-review-scenes-hdr { margin-top: 4px; }
.wr-review-scenes { display: flex; flex-direction: column; gap: 8px; }
.wr-review-scene {
  padding: 9px 12px; border-radius: 10px; background: var(--rd-panel);
  border: 1px solid var(--rd-line-3);
}
.wr-review-scene-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 11px; color: var(--rd-ink-4); margin-bottom: 4px;
}
.wr-review-scene-time { font-family: var(--rd-font-mono, monospace); }
.wr-review-scene-env, .wr-review-scene-cast {
  padding: 1px 7px; border-radius: 999px; background: var(--rd-teal-tint); color: var(--rd-teal-ink);
}
.wr-review-scene-action { margin: 0; font-size: 12.5px; color: var(--rd-ink-2); line-height: 1.5; }
.wr-review-scene-vo {
  margin: 4px 0 0; font-size: 12.5px; font-style: italic; color: var(--rd-ink-3); line-height: 1.5;
}
.wr-review-variant { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--rd-line-3); }
.wr-review-variant:first-of-type { border-top: none; padding-top: 0; }
.wr-review-cast-spec { margin: 0 0 10px; font-size: 12px; color: var(--rd-ink-3); font-style: italic; }
.wr-review-empty { margin: 0; font-size: 12.5px; color: var(--rd-ink-4); }

.crx-facts { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; }
.crx-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--rd-ink-4); }
.crx-facts dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--rd-ink-1); }
.crx-summary {
  margin: 0; padding: 12px 14px; border-radius: 10px;
  background: var(--rd-panel); border: 1px solid var(--rd-line-2);
  font-size: 13px; line-height: 1.55; color: var(--rd-ink-2);
}
.crx-why summary { font-size: 12.5px; font-weight: 600; color: var(--rd-ink-2); cursor: pointer; }
.crx-why ul { margin: 8px 0 0; padding-left: 20px; }
.crx-why li { font-size: 12.5px; line-height: 1.6; color: var(--rd-ink-3); }

/* ---- Gate 1: the beat strip ---- */

.crx-beats { display: flex; flex-direction: column; gap: 10px; }
.crx-beat {
  display: grid; grid-template-columns: 172px 1fr; gap: 14px;
  padding: 12px; border-radius: 12px;
  background: var(--rd-panel); border: 1px solid var(--rd-line-2);
}
.crx-beat-frame { position: relative; }
.crx-beat-frame img {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: 8px; background: var(--rd-line-2); display: block;
}
.crx-beat-noframe {
  width: 100%; aspect-ratio: 9 / 16; border-radius: 8px;
  background: var(--rd-line-2); display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--rd-ink-4);
}
.crx-beat-time {
  position: absolute; left: 6px; bottom: 6px;
  padding: 2px 6px; border-radius: 5px;
  background: rgba(0, 0, 0, .66); color: #fff;
  font-family: var(--font-mono); font-size: 10.5px;
}
.crx-beat-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.crx-beat-body label { display: flex; flex-direction: column; gap: 3px; }
.crx-beat-body label > span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--rd-ink-4); }
.crx-beat-body textarea {
  padding: 7px 9px; border-radius: 7px;
  border: 1px solid var(--rd-line-3); background: var(--rd-surface);
  color: var(--rd-ink-1); font-size: 12.5px; font-family: inherit; line-height: 1.5;
  resize: vertical;
}
.crx-chip {
  align-self: flex-start; padding: 2px 9px; border-radius: 999px;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
  font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
}
.crx-purpose { margin: 0; font-size: 11.5px; font-style: italic; color: var(--rd-ink-4); }

/* ---- Gate 2: compliance + the claim map ---- */

.crx-compliance {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--rd-line-3); background: var(--rd-panel);
}
.crx-compliance strong { font-size: 13px; color: var(--rd-ink-1); }
.crx-compliance span { font-size: 12px; color: var(--rd-ink-3); }
.crx-compliance-reason { margin: 6px 0 0; font-size: 12px; color: var(--rd-ink-2); }
.crx-compliance-pass { border-color: color-mix(in srgb, var(--rd-teal) 45%, transparent); }
/* AMBER, not red. This block is advisory -- the reviewer decides, and the pipeline is working
   exactly as designed when it appears. Styled as danger it read as a system error, and was
   reported as one: "just got this error". A caution that looks like a crash spends the reader's
   alarm on the wrong thing, and the next real failure has less of it left. */
.crx-compliance-fail {
  border-color: #d9822b;
  background: color-mix(in srgb, #d9822b 10%, transparent);
}
.crx-compliance-fail strong { color: #a8621b; }

.crx-claimmap h4 {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 8px; font-size: 13.5px; color: var(--rd-ink-1);
}
.crx-claimcounts { display: flex; gap: 12px; font-size: 11.5px; font-weight: 600; }
.crx-claimmap table, .crx-list table { width: 100%; border-collapse: collapse; }
.crx-claimmap th, .crx-list th {
  text-align: left; padding: 7px 10px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--rd-ink-4);
  border-bottom: 1px solid var(--rd-line-2);
}
.crx-claimmap td, .crx-list td {
  padding: 10px; vertical-align: top;
  font-size: 12.5px; color: var(--rd-ink-2);
  border-bottom: 1px solid var(--rd-line-2);
}
/* Deliberately NOT dimmed. A dropped claim is the row a reviewer most needs to read, and
   greying it out is how it gets skimmed past. */
.crx-claim-source { color: var(--rd-ink-3); font-style: italic; max-width: 32ch; }
.crx-claim-ours { margin-top: 5px; color: var(--rd-ink-1); font-weight: 600; }
.crx-claim-why { color: var(--rd-ink-4); font-size: 11.5px; max-width: 34ch; }
.crx-disposition {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  color: #fff; font-size: 10.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em;
}

.crx-song-reference {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--rd-panel); border: 1px solid var(--rd-line-3);
}
.crx-song-reference-label { font-size: 12px; color: var(--rd-ink-3); }
.crx-song-reference audio { width: 100%; height: 32px; }

.crx-scriptbox { display: flex; flex-direction: column; gap: 5px; }
.crx-scriptbox > span { font-size: 12.5px; font-weight: 600; color: var(--rd-ink-2); }
.crx-scriptbox textarea {
  padding: 12px; border-radius: 10px;
  border: 1px solid var(--rd-line-3); background: var(--rd-surface);
  color: var(--rd-ink-1); font-size: 13px; line-height: 1.65;
  font-family: var(--font-mono); resize: vertical;
}

.crx-done { align-items: flex-start; }
.crx-done h3 { margin: 0; font-size: 16px; color: var(--rd-ink-1); }
.crx-done p { margin: 0; max-width: 62ch; font-size: 13px; color: var(--rd-ink-3); }

/* ---- Run list ---- */


@media (max-width: 720px) {
  .crx-beat { grid-template-columns: 1fr; }
  .crx-beat-frame img, .crx-beat-noframe { aspect-ratio: 16 / 9; }
}

/* ---- Product carousel -----------------------------------------------------
   Replaces a <select>, which was the wrong control for this question twice
   over: the SKUs are told apart by their pack shot far faster than by a long
   label, and three of the oregano entries have near-identical titles that
   differ only in a blurb a dropdown cannot show at all.

   Horizontal rather than the Animation Ads grid because this screen asks three
   questions and the product is the first -- a ten-card grid pushes the name,
   the direction box and the start button below the fold, so the form reads as
   though it ends at the pictures.
   --------------------------------------------------------------------------- */

.crx-prodwrap { margin-top: 20px; }
.crx-prod-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
}
.crx-prod-q { font-size: 12.5px; font-weight: 600; color: var(--rd-ink-2); }
.crx-prod-count { font-size: 11.5px; color: var(--rd-ink-4); }

.crx-prod-rail-wrap { position: relative; }

.crx-prod-rail {
  display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth;
  padding: 4px 2px 10px;
  /* Snap so a paged scroll always lands on a card edge rather than mid-pack. */
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.crx-prod-rail::-webkit-scrollbar { height: 7px; }
.crx-prod-rail::-webkit-scrollbar-thumb {
  background: var(--rd-line-3); border-radius: 999px;
}
.crx-prod-rail::-webkit-scrollbar-track { background: transparent; }

.crx-prod {
  position: relative; flex: 0 0 186px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 7px;
  padding: 10px; border-radius: 12px; text-align: left;
  border: 1.5px solid var(--rd-line-2); background: var(--rd-surface);
  cursor: pointer; font: inherit; color: inherit;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.crx-prod:hover { border-color: var(--rd-teal-border); transform: translateY(-1px); }
.crx-prod:focus-visible { outline: 2px solid var(--rd-teal); outline-offset: 2px; }
.crx-prod.is-picked { border-color: var(--rd-teal); background: var(--rd-teal-tint); }

.crx-prod-img {
  display: flex; align-items: center; justify-content: center;
  height: 104px; border-radius: 8px; background: var(--rd-panel); overflow: hidden;
}
.crx-prod-img img { max-height: 96px; max-width: 100%; object-fit: contain; }
.crx-prod-noimg { font-size: 11px; color: var(--rd-ink-4); }

.crx-prod-title {
  font-size: 12px; font-weight: 650; line-height: 1.35; color: var(--rd-ink-1);
}
/* Clamped, not truncated to one line: the distinguishing phrase on the
   near-identical oregano SKUs sits at the END of the blurb, so a single line
   would cut off exactly the words that tell them apart. */
.crx-prod-desc {
  font-size: 11px; line-height: 1.45; color: var(--rd-ink-4);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.crx-prod-tick {
  position: absolute; top: 8px; right: 8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--rd-teal); color: #fff;
  font-size: 12px; line-height: 20px; text-align: center; font-weight: 700;
}

.crx-prod-arrow {
  position: absolute; top: 50%; transform: translateY(-60%); z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--rd-line-3); background: var(--rd-surface);
  color: var(--rd-ink-2); font-size: 19px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.crx-prod-arrow:hover:not(:disabled) { border-color: var(--rd-teal); color: var(--rd-teal-ink); }
/* Hidden rather than dimmed at the ends: a permanently visible dead control on
   a short list reads as broken. */
.crx-prod-arrow:disabled { opacity: 0; pointer-events: none; }
.crx-prod-prev { left: -13px; }
.crx-prod-next { right: -13px; }

.crx-prod-empty {
  padding: 22px; border-radius: 12px; text-align: center;
  border: 1px dashed var(--rd-line-3); background: var(--rd-panel);
  font-size: 12.5px; color: var(--rd-ink-4);
}

/* ---- Start row ---- */

.crx-startrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.crx-startwhy { font-size: 12px; color: var(--rd-ink-4); }

@media (max-width: 720px) {
  .crx-prod { flex-basis: 150px; }
  .crx-prod-prev { left: -6px; }
  .crx-prod-next { right: -6px; }
}

/* Remix Studio: the id beside each run in the list. Monospaced and dimmed — it is there to be
   read off and quoted in a bug report, not to compete with the name for attention. */
/* Proof of life on a long stage. The stage label cannot show progress -- a stage is one long
   provider call sitting on one label -- so this dot pulses and the heartbeat age ticks beside
   it. Both are driven by the row actually being written to, not by a timer that would keep
   animating just as happily over a dead worker. */
.crx-alive {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--rd-teal); animation: crx-pulse 1.4s ease-in-out infinite;
}
.crx-beat { font-style: normal; color: var(--rd-ink-4); font-size: 11.5px; }
@keyframes crx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Remix Studio's stage progress bar. The bar itself is .sd-progress-bar, reused verbatim from
   Seedance's own single-long-call progress indicator -- same honest shape (rises, flattens,
   never self-completes), same shine animation, one visual language for the dashboard rather
   than a second bar style invented for this lane. Only the small header wrapping it is new. */
.crx-stageprogress { margin-top: 10px; }
.crx-stageprogress-hdr {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 5px; font-size: 12px; color: var(--rd-ink-3);
}
.crx-stageprogress-timer { font-family: var(--font-mono); color: var(--rd-ink-4); }

/* Remix Studio's recent-projects hub. The card, scroller and meta styles are the Animation Ads
   hub's OWN classes (an-hub-project-*, an-hub-recent-*), reused verbatim -- "a saved thing you
   can go back to" should look like one thing across the dashboard, not a second design per tab.
   Only what is genuinely remix-specific is new: the status-tone pill and the product-thumb art. */
.crx-recent { margin-top: 22px; }

/* ---- Winner Ads Remix: "Recent winner remixes" cards ---- */
/* Its own two-tier card (header row + thin stage-progress bar + a divided footer row with the
   stage pill, spend and an edit/open shortcut) rather than the shared an-hub-project-card --
   this list needs to show WHERE a job is in its 5-stage pipeline at a glance, which a single
   name+pill+cost row can't carry. */
.wr-recent-hdr { justify-content: flex-start; }
.wr-recent-count {
  font-size: 12px; font-weight: 700; color: #fff;
  background: var(--rd-ink-1, #14181b); border-radius: 999px; padding: 4px 12px;
}
.wr-recentcard-list { display: flex; flex-direction: column; gap: 14px; }
.wr-recentcard {
  border: 1px solid var(--rd-line-2, var(--border-subtle)); border-radius: 16px;
  background: var(--rd-surface, #fff); overflow: hidden;
  animation: an-hub-card-in .35s cubic-bezier(.2,.8,.2,1) both;
}
.wr-recentcard-top { display: flex; align-items: center; gap: 14px; padding: 16px 18px 14px; }
.wr-recentcard-main {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 14px;
  padding: 0; border: 0; background: transparent; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
}
.wr-recentcard-art {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink);
}
.wr-recentcard-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wr-recentcard-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--rd-ink-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wr-recentcard-live {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 11.5px; font-weight: 700; color: var(--rd-teal-ink);
}
.wr-recentcard-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rd-teal); }
.wr-recentcard-sub {
  font-family: var(--rd-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11.5px; color: var(--rd-ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wr-recentcard-open {
  flex: none; height: 36px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--rd-line-2, var(--border-subtle)); background: var(--rd-surface, #fff);
  font-size: 13px; font-weight: 700; color: var(--rd-ink-1); cursor: pointer; font-family: inherit;
}
.wr-recentcard-open:hover { border-color: var(--rd-teal); color: var(--rd-teal-ink); }
.wr-recentcard-progress { height: 3px; background: var(--rd-line-2, var(--border-subtle)); }
.wr-recentcard-progress > span { display: block; height: 100%; background: var(--rd-teal); transition: width .3s ease; }
.wr-recentcard-bottom {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  border-top: 1px solid var(--rd-line-2, var(--border-subtle));
}
.wr-recentcard-stage { flex: none; font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.wr-recentcard-stage-waiting, .wr-recentcard-stage-running {
  background: color-mix(in srgb, var(--warning-500, #f59e0b) 18%, var(--rd-surface, #fff));
  color: color-mix(in srgb, var(--warning-500, #f59e0b) 65%, black);
}
.wr-recentcard-stage-done { background: var(--rd-teal-tint); color: var(--rd-teal-ink); }
.wr-recentcard-stage-failed { background: #fde8e8; color: var(--danger-500, #b3261e); }
.wr-recentcard-stage-cancelled { background: var(--rd-panel, var(--bg-sunken)); color: var(--rd-ink-4); }
.wr-recentcard-meta { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--rd-ink-3); }
.wr-recentcard-edit {
  flex: none; width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rd-line-2, var(--border-subtle)); background: var(--rd-surface, #fff);
  color: var(--rd-ink-3); cursor: pointer;
}
.wr-recentcard-edit:hover { border-color: var(--rd-teal); color: var(--rd-teal-ink); }

.crx-project-art { background: var(--rd-panel); }
.crx-project-art img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.crx-project-cost {
  align-self: center; font-family: var(--font-mono); font-size: 11px; color: var(--rd-ink-4);
}
/* A ring rather than the pill's usual solid teal fill: the pill fill is reserved for
   an-hub-pill's own "needs you" badge on the same card, and two solid-fill pills side by side
   read as one long badge rather than two distinct pieces of information. */
.crx-pill {
  padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600;
  border: 1px solid var(--rd-line-3); color: var(--rd-ink-3);
}
.crx-pill-waiting { border-color: var(--rd-teal); color: var(--rd-teal-ink); background: var(--rd-teal-tint); }
.crx-pill-running { border-color: var(--rd-line-3); color: var(--rd-ink-3); }
.crx-pill-done { border-color: color-mix(in srgb, var(--rd-teal) 45%, transparent); color: var(--rd-teal-ink); }
.crx-pill-failed { border-color: var(--danger-500); color: var(--danger-500); }
.crx-pill-cancelled { border-color: var(--rd-line-3); color: var(--rd-ink-4); }
.crx-needsyou-card { box-shadow: 0 0 0 1.5px var(--rd-teal) inset; }

/* Remix Studio Phase 2: continue clip generation without leaving the tab. Deliberately plain --
   this is a presentational layer over the SAME seedanceStudio state Animation Ads renders, so it
   borrows tokens rather than the classic screen's own (considerably larger) layout system. */
.crx-gen { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.crx-gen-loading { flex-direction: row; align-items: center; gap: 8px; color: var(--rd-ink-3); font-size: 13px; }
.crx-gen-summary {
  display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 14px;
  border-radius: 10px; background: var(--rd-panel); border: 1px solid var(--rd-line-2);
  font-size: 12.5px; color: var(--rd-ink-3);
}
.crx-gen-summary strong { color: var(--rd-ink-1); font-size: 14px; }
.crx-gen-cost { margin-left: auto; font-family: var(--font-mono); color: var(--rd-ink-4); }
.crx-gen-song-preview {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-radius: 10px; background: var(--rd-panel); border: 1px solid var(--rd-line-2);
}
.crx-gen-song-preview-label { font-size: 12.5px; color: var(--rd-ink-3); white-space: nowrap; }
.crx-gen-song-preview audio { flex: 1; height: 32px; }
.crx-gen-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.crx-gen-final { display: flex; flex-direction: column; gap: 6px; }
.crx-gen-final video { width: 100%; max-width: 360px; border-radius: 10px; background: #000; }
.crx-gen-final-note { font-size: 11.5px; color: var(--rd-ink-4); }

.crx-gen-scenes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
}
.crx-scene-card {
  display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px;
  background: var(--rd-surface); border: 1px solid var(--rd-line-2);
}
.crx-scene-hdr { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--rd-ink-2); }
.crx-scene-video { width: 100%; aspect-ratio: 9 / 16; border-radius: 8px; background: #000; object-fit: cover; }
.crx-scene-novideo {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 9 / 16; border-radius: 8px;
  background: var(--rd-panel); color: var(--rd-ink-4); font-size: 11.5px;
}
.crx-scene-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.crx-scene-actions .crx-ghost { flex: 1; }
.crx-scene-actions .crx-primary { flex: 1 1 100%; }

/* Winner Ads Remix's own scene cards carry an editable prompt, so they need more room than the
   video-only cards this grid was originally sized for -- widened only inside this screen. */
.wr-variant-generate .crx-gen-scenes { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.wr-scene-prompt-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--rd-ink-4); }
.wr-scene-prompt {
  width: 100%; font-size: 11.5px; line-height: 1.4; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--rd-line-2, var(--border-subtle)); background: var(--rd-surface, var(--bg-surface));
  color: var(--rd-ink-2); resize: vertical;
}
.wr-scene-prompt:disabled { color: var(--rd-ink-4); }
.wr-scene-prompt:not(:disabled):focus { outline: 1px solid var(--rd-teal); }
.wr-scene-video-wrap { position: relative; }
.wr-scene-video-blurred { filter: blur(2px); opacity: 0.6; }
.wr-scene-regen-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

@media (max-width: 720px) {
  .crx-gen-scenes { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ---- Remix hub: the picker between Competitor Remix and Winner Ads Remix ----
   Reuses .an-hub-card/.an-hub-cards/.an-hub-hero etc. verbatim (see AnimationHubScreen in
   SeedanceAdsPanel.jsx for the original) -- one "pick a lane" visual language across the
   dashboard rather than a second one invented for this screen.
   The picker is the REMIX HOME page only: once a lane is picked, RemixHubPanel swaps the whole
   hero+cards block for a compact back link + that lane's own screen, rather than leaving the
   picker pinned above every job/step inside the lane. */
.wr-hub-back {
  margin-bottom: 16px; display: inline-flex; align-items: center; gap: 6px;
  /* Overrides the shared .crx-ghost look (thin border, flat) -- this back link sits next to
     the new white-shadow crx-head-icon pill and looked like a leftover from the older, plainer
     button style otherwise. */
  padding: 8px 14px; border-radius: 999px; border: none;
  background: var(--rd-surface, #fff); color: var(--rd-ink-2, var(--fg-1));
  font-size: 13px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(20,24,27,.04), 0 8px 20px -14px rgba(20,24,27,.28);
}
.wr-hub-back:hover { color: var(--rd-teal-ink); border-color: transparent; }

/* ---- Winner Ads Remix: the "Start a remix" two-column layout ---- */
/* "Your winning ad" (source + name + quality) and "Variants" side by side rather than one
   long stacked form -- the two are independent decisions (what you're remixing vs. how many
   recasts you want) and reviewing/editing several variant cards no longer pushes the source
   picker and quality tiers out of view above the fold. */

.wr-start-grid {
  /* No align-items: start -- grid's default (stretch) makes both columns match the taller
     one's height, and wr-startrow-stacked's margin-top: auto (below) uses that extra space
     to pin "Read this ad" to the bottom of the Variants column instead of leaving a gap
     under it while "Your winning ad" runs taller. */
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.wr-start-col {
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px; border-radius: 14px;
  background: var(--rd-surface); border: 1px solid var(--rd-line-1);
}
.wr-start-col-hdr { display: flex; align-items: center; gap: 10px; }
.wr-start-col-hdr h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--rd-ink-1); }
.wr-start-step-num {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--rd-teal-tint); color: var(--rd-teal-ink); font-size: 11.5px; font-weight: 700;
}
.wr-start-col-count {
  margin-left: auto; font-size: 12px; font-weight: 700; color: var(--rd-ink-3);
  background: var(--rd-panel, var(--bg-sunken)); border-radius: 999px; padding: 3px 10px;
}
@media (max-width: 900px) {
  .wr-start-grid { grid-template-columns: 1fr; }
} 

/* ---- Winner Ads Remix: the Render quality tier cards ---- */
/* Replaces a plain <select> -- the tier is a real budget decision (see the crx-hint below), so
   it earns the same "pick a card" weight as everything else on this screen rather than hiding
   behind a dropdown's collapsed default. */

.wr-quality-field { display: flex; flex-direction: column; gap: 8px; }
.wr-quality-field > span:first-child { font-size: 12.5px; font-weight: 600; color: var(--rd-ink-2); }
.wr-quality-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wr-quality-card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 3px; padding: 16px 10px 12px; border-radius: 12px; cursor: pointer; font-family: inherit;
  border: 1.5px solid var(--rd-line-2, var(--border-subtle)); background: var(--rd-surface, #fff);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wr-quality-card:hover { border-color: var(--rd-teal); }
.wr-quality-card-selected {
  border-color: var(--rd-teal);
  box-shadow: 0 0 0 1px var(--rd-teal), 0 1px 2px rgba(20,24,27,.04), 0 10px 24px -14px rgba(20,24,27,.32);
}
.wr-quality-badge {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: var(--rd-ink-1, #14181b); color: #fff;
  white-space: nowrap;
}
.wr-quality-thumb {
  width: 36%; aspect-ratio: 3 / 4; border-radius: 6px; margin-bottom: 4px;
  border: 1px solid var(--rd-line-2, var(--border-subtle));
  background-color: var(--rd-panel, var(--bg-sunken));
  background-image:
    linear-gradient(var(--rd-line-2, var(--border-subtle)) 1px, transparent 1px),
    linear-gradient(90deg, var(--rd-line-2, var(--border-subtle)) 1px, transparent 1px);
}
.wr-quality-card-selected .wr-quality-thumb {
  border-color: var(--rd-teal); background-color: var(--rd-teal-tint);
}
.wr-quality-thumb-480p { background-size: 14px 14px; }
.wr-quality-thumb-720p { background-size: 9px 9px; }
.wr-quality-thumb-1080p, .wr-quality-thumb-4k { background-size: 5px 5px; }
.wr-quality-label { font-size: 16px; font-weight: 700; color: var(--rd-ink-1); }
.wr-quality-desc { font-size: 11px; color: var(--rd-ink-3); }
.wr-quality-cost {
  display: flex; align-items: center; gap: 5px; margin-top: 2px;
  font-size: 10.5px; color: var(--rd-ink-4);
}
.wr-quality-dots { display: flex; gap: 3px; }
.wr-quality-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--rd-line-3); }
.wr-quality-dots span.on { background: var(--rd-teal); }

/* ---- Winner Ads Remix: the variant-spec form ---- */
/* One bordered card per variant (label + two labeled textareas) instead of a single dense row
   of three inline text inputs -- cast_spec/environment_spec go straight into the render prompt
   verbatim (see WR_MAX_SPEC_CHARS above), so a real textarea that can hold and show a full
   sentence fits the field better than a single-line input truncating it. */

.wr-variants-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
/* Adding variants scrolls within this list instead of growing the Variants column past "Your
   winning ad". flex: 1 with min-height: 0 alone does NOT do this: wr-start-grid's row is
   height: auto, so it's sized FROM both columns' natural content height in the first place --
   a flex child can't shrink against a container whose own height is still being derived from
   that same child's content (circular). max-height is a real, definite cap independent of that
   computation, so it actually stops contributing past this point and the row settles at
   whatever "Your winning ad" needs. */
.wr-variants-form-cards { gap: 14px; max-height: 480px; overflow-y: auto; padding-right: 4px; }
.wr-variant-card {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--rd-line-2, var(--border-subtle)); border-radius: 12px;
  padding: 14px; background: var(--rd-surface, #fff);
}
.wr-variant-card-top { display: flex; align-items: center; gap: 10px; }
.wr-variant-num {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--rd-teal); color: #fff; font-size: 11px; font-weight: 700;
}
.wr-variant-label-field {
  flex: 1 1 auto; border: none; background: transparent; font: inherit;
  font-size: 13px; font-weight: 600; color: var(--rd-ink-1); padding: 2px 0;
}
.wr-variant-label-field:focus { outline: none; }
.wr-variant-remove { flex: 0 0 auto; padding: 6px; }
.wr-variant-field { display: flex; flex-direction: column; gap: 5px; }
.wr-variant-field-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rd-teal-ink);
}
.wr-variant-field textarea {
  width: 100%; min-height: 120px; resize: vertical; padding: 10px 12px; font-size: 12.5px;
  font-family: inherit; border: 1px solid var(--rd-line-2, var(--border-subtle)); border-radius: 8px;
  background: var(--rd-panel, var(--bg-sunken)); color: var(--rd-ink-1);
}
.wr-variant-field textarea:focus { outline: 1px solid var(--rd-teal); background: var(--rd-surface, #fff); }
.wr-variant-card-note {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--rd-ink-4, var(--fg-3));
}
.wr-variant-card-note::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--warning-500, #f59e0b);
}
.wr-add-variant {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px; border-radius: 10px; border: 1.5px dashed var(--rd-line-3);
  background: transparent; color: var(--rd-teal-ink); font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.wr-add-variant:hover { border-color: var(--rd-teal); background: var(--rd-teal-tint); }
.wr-add-variant:disabled { opacity: .5; cursor: not-allowed; }
.wr-startrow-stacked { flex-direction: column; align-items: stretch; gap: 8px; margin-top: auto; }
.wr-startrow-stacked .crx-primary { width: 100%; padding: 14px 16px; }
.wr-startrow-stacked .crx-startwhy { text-align: center; }
/* "Choose a file" and the Fetch/URL row sit in the taller "Your winning ad" column now that
   both columns stretch to match heights -- bumping them too keeps every control on this screen
   at a consistent, larger touch target instead of just the Variants side growing. */
.wr-start-col .crx-filebtn { padding: 11px 18px; }

/* ---- Winner Ads Remix: the Variants review gate ---- */

.wr-variant-grid { margin-top: 4px; }
.wr-variant-card-hdr { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wr-variant-label-input {
  flex: 1 1 auto; font-size: 13.5px; font-weight: 700; color: var(--rd-ink-1);
  border: none; background: transparent; padding: 2px 0;
}
.wr-variant-label-input:disabled { color: var(--rd-ink-2); }
.wr-variant-label-input:not(:disabled):focus { outline: 1px solid var(--rd-teal); border-radius: 4px; }
.wr-variant-refs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wr-variant-ref { display: flex; flex-direction: column; gap: 4px; }
.wr-variant-ref-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--rd-ink-4); }
.wr-variant-ref img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px;
  background: var(--rd-panel, var(--bg-sunken));
}
.wr-ref-img-wrap { position: relative; }
.wr-ref-img-blurred { filter: blur(2px); opacity: 0.6; }
.wr-ref-regen-overlay {
  position: absolute; inset: 0; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 12px; font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.wr-ref-placeholder {
  width: 100%; aspect-ratio: 3 / 4; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--rd-panel, var(--bg-sunken)); color: var(--rd-ink-4); font-size: 11px;
  border: 1px dashed var(--rd-line-3);
}
.wr-ref-prompt {
  width: 100%; font-size: 11.5px; line-height: 1.4; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--rd-line-2, var(--border-subtle)); background: var(--rd-surface, var(--bg-surface));
  color: var(--rd-ink-2); resize: vertical;
}
.wr-ref-prompt:disabled { color: var(--rd-ink-4); }
.wr-ref-prompt:not(:disabled):focus { outline: 1px solid var(--rd-teal); }
.wr-ref-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.wr-ref-actions .crx-ghost { font-size: 11px; padding: 4px 8px; }
.wr-ref-upload-btn { position: relative; cursor: pointer; }
.wr-ref-upload-btn input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.wr-ref-upload-btn:has(input:disabled) { cursor: not-allowed; opacity: .6; }
.wr-ref-source-note { font-size: 10.5px; color: var(--rd-ink-4); }

/* ---- Winner Ads Remix: the Phase 4 generate screen's variant tabs ---- */

.wr-variant-generate { margin-top: 0; }
.wr-variant-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.wr-variant-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px;
  border: 1px solid var(--rd-line-2, var(--border-subtle)); background: var(--rd-surface, var(--bg-surface));
  color: var(--rd-ink-3); cursor: pointer;
}
.wr-variant-tab-selected {
  border-color: var(--rd-teal); color: var(--rd-ink-1); background: var(--rd-panel, var(--bg-sunken));
  font-weight: 600;
}

/* ---- Winner Ads Remix: the Clips / Generate sub-steps within one variant ---- */

.wr-subview-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rd-line-2, var(--border-subtle)); }
.wr-subview-tab {
  padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--rd-ink-3);
  background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer;
  margin-bottom: -1px;
}
.wr-subview-tab-selected { color: var(--rd-teal); border-bottom-color: var(--rd-teal); }
.wr-generate-step { display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 720px) {
  .wr-variant-fields { grid-template-columns: 1fr; }
  .wr-variant-refs { grid-template-columns: 1fr; }
}

/* Winner Ads Remix's own new-remix form: full width of its card, unlike Competitor Remix's
   narrower .crx-form (560px) -- the variant rows need the room, and the name field looks like
   an accident stopping halfway across an otherwise full-width card. Scoped to this one screen
   so Competitor Remix's existing layout is untouched. */
.wr-form-wide { max-width: none; }
/* ============================================================
   Settings → API Usage
   Built around one fact: most providers have no key on a given
   deployment, so the page opens on the ones that do and keeps a
   quiet, dense row per provider rather than a card each.
   ============================================================ */
.api-usage-view .content-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.api-usage-scope {
  color: var(--fg-3); font-size: 11px; border-left: 2px solid var(--border-subtle);
  padding-left: 8px; cursor: help;
}
.api-usage-scope strong { color: var(--fg-2); font-weight: 600; }

.api-usage-toolbar { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; }

/* One bordered stack, not twelve floating cards — dividers between rows read as
   a list, which is what this is, and removes 11 shadows from the page. */
.api-usage-providers {
  border: 1px solid var(--border-subtle); border-radius: 8px;
  background: var(--bg-surface); overflow: hidden;
}
.api-usage-provider + .api-usage-provider { border-top: 1px solid var(--border-subtle); }
.api-usage-provider.open { background: color-mix(in srgb, var(--fg-1) 2%, var(--bg-surface)); }

/* Grid, not flex: the balance and spend figures must form true columns down the
   list so the eye can run straight down them. Under flex they drifted with each
   provider name's length, which is what made the list feel unaligned. */
.api-usage-provider-head {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) 150px 104px;
  align-items: center; gap: 10px; width: 100%;
  padding: 11px 14px; background: none; border: 0; cursor: pointer;
  text-align: left; font: inherit; color: var(--fg-1);
}
.api-usage-provider-label { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.api-usage-provider-label .api-usage-provider-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-usage-provider-head:hover { background: color-mix(in srgb, var(--fg-1) 4%, transparent); }
.api-usage-provider-head:focus-visible { outline: 2px solid var(--primary-700); outline-offset: -2px; }
.api-usage-caret { color: var(--fg-2); font-size: 11px; }
.api-usage-provider-name { font-weight: 600; font-size: 13px; }
.api-usage-keycount { color: var(--fg-3); font-size: 11px; }

/* Right-aligned, tabular, fixed columns so the numbers form a scannable edge
   down the list instead of jittering with each provider's name length. */
.api-usage-balance, .api-usage-spend {
  font-variant-numeric: tabular-nums; font-size: 12px; text-align: right;
}
.api-usage-balance { font-weight: 600; }
.api-usage-balance.low { color: #b42318; }
.api-usage-spend { color: var(--fg-2); }

.api-usage-provider-body { padding: 0 14px 12px; }
.api-usage-note { color: var(--fg-3); font-size: 11px; margin: 0 0 8px; max-width: 70ch; line-height: 1.5; }

.api-usage-table { width: 100%; }
.api-usage-table th, .api-usage-table td { padding: 7px 10px; }
.api-usage-table th.num, .api-usage-table td.num { text-align: right; }
.api-usage-table td.num { font-variant-numeric: tabular-nums; }
/* Column scope rides under its own heading rather than repeating in every cell. */
.api-usage-table th em {
  display: block; font-style: normal; font-weight: 400;
  font-size: 10px; color: var(--fg-3); letter-spacing: 0;
}
.api-usage-keyname { font-family: var(--font-mono); font-size: 11px; }
.api-usage-muted { color: var(--fg-3); font-size: 11px; }
.api-usage-low { color: #b42318; }
.api-usage-acct {
  font-style: normal; font-size: 9px; color: var(--fg-3);
  margin-left: 4px; vertical-align: super; cursor: help;
}
.api-usage-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: 9px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  background: color-mix(in srgb, var(--primary-700) 12%, transparent); color: var(--primary-700);
}
.api-usage-tag.warn { background: color-mix(in srgb, #d97706 15%, transparent); color: #b45309; }
.api-usage-footnote {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-subtle);
  color: var(--fg-3); font-size: 11px;
}

@media (max-width: 900px) {
  .api-usage-provider-head { grid-template-columns: 14px minmax(0, 1fr) auto; }
  .api-usage-spend { grid-column: 3; }
}

/* ---- User Work Viewer: quieter summaries -------------------------------- */
/* Stages with no work are stated once, in passing, instead of as tiles that
   look identical to the ones carrying real numbers. */
.admin-work-summary-empty {
  color: var(--fg-3); font-size: 11px; padding: 8px 12px;
  border: 1px dashed var(--border-subtle); border-radius: 8px; margin-bottom: 10px;
}
.admin-generated-count {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--fg-1) 5%, transparent);
  color: var(--fg-2); font-size: 11px;
}
.admin-generated-count strong { color: var(--fg-1); font-size: 12px; font-variant-numeric: tabular-nums; }
.admin-generated-count.empty { background: none; color: var(--fg-3); padding-left: 0; }
.admin-generated .admin-generated-livetag {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 10px;
  padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 600;
  letter-spacing: .02em; background: #ecfeff; color: #0e7490; cursor: help;
}
[data-theme="dark"] .admin-generated .admin-generated-livetag { background: rgba(14,116,144,.22); color: #67e8f9; }

/* --- Many videos at once -------------------------------------------------------------------
   A hundred uploads is a list to scan, not a wizard to walk. Every row carries its own bar and
   its own retry, because every file here succeeds or fails on its own -- which is the property
   the whole batch path exists to give. */
.rf-batch-link {
  margin-top: 10px; padding: 0; border: 0; background: none;
  font-size: 12px; color: var(--rd-teal); cursor: pointer; text-decoration: underline;
}
.rf-batch-link:hover { color: var(--rd-ink-1); }
.rf-batch-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 14px 0 10px; font-size: 12px; color: var(--rd-ink-4);
}
.rf-batch-head strong { font-size: 13px; color: var(--rd-ink-1); }
.rf-batch-head .is-warn { color: var(--rd-warning-fg, #B8802A); }
.rf-batch-head .is-bad { color: var(--rd-danger-fg, #B3261E); }
.rf-batch-actions { margin-left: auto; display: flex; gap: 8px; }
.rf-batch-repick {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 10px; border-radius: 10px;
  background: var(--rd-teal-tint); font-size: 12px; color: var(--rd-ink-2);
}
.rf-batch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rf-batch-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 72px 120px minmax(120px, 170px) auto;
  align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px; background: var(--rd-panel); font-size: 12px;
}
.rf-batch-row.is-failed { background: var(--rd-danger-bg, #FBEAEA); }
.rf-batch-row.is-done { opacity: .72; }
.rf-batch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rd-ink-1); }
.rf-batch-size, .rf-batch-note {
  color: var(--rd-ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rf-batch-bar { height: 5px; border-radius: 999px; overflow: hidden; background: var(--rd-line-2); }
.rf-batch-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--rd-teal); transition: width .15s ease;
}
.rf-batch-row.is-done .rf-batch-bar i { background: var(--rd-teal-ink); }
/* A row is dense and repeats up to 150 times, so the panel's own button at full size would
   turn the list into a wall of chrome. This is a SIZE on that button, not a second button --
   .rf-btn and .rf-btn--ghost already exist and own how a reframe button looks. */
.rf-btn--sm { padding: 4px 11px; font-size: 11.5px; font-weight: 500; border-radius: 7px; }
/* Quiet sits on every working row, so it must not compete with the failure that needs
   somebody's attention two rows down. */
.rf-btn--quiet { background: none; border-color: transparent; color: var(--rd-ink-4); }
.rf-btn--quiet:hover:not(:disabled) {
  background: none; border-color: var(--rd-line-3); color: var(--rd-ink-1); filter: none;
}

.rf-batch-acts { display: flex; gap: 6px; justify-content: flex-end; }
.rf-batch-settings { color: var(--rd-ink-4); }

/* The bar carries the phase, so the list can be read without reading it: uploading is neutral,
   a waiting file is flat grey, a running job is the brand colour, a failure is unmistakable. */
.rf-batch-row.is-finished .rf-batch-bar i { background: var(--rd-teal-ink); }
.rf-batch-row.is-queued .rf-batch-bar i { background: var(--rd-line-3); }
.rf-batch-row.is-failed .rf-batch-bar i { background: var(--rd-danger-fg, #B3261E); }
.rf-batch-row.is-job-failed { background: var(--rd-danger-bg, #FBEAEA); }
.rf-batch-row.is-job-failed .rf-batch-bar i { background: var(--rd-danger-fg, #B3261E); }
.rf-batch-row.is-finished { opacity: .85; }
.rf-batch-head .is-good { color: var(--rd-teal-ink); }

@media (max-width: 720px) {
  .rf-batch-row { grid-template-columns: minmax(0, 1fr) 90px; row-gap: 6px; }
  .rf-batch-bar, .rf-batch-note, .rf-batch-acts { grid-column: 1 / -1; }
  .rf-batch-acts { justify-content: flex-start; }
}

/* Two tabs over the run list. One-off runs and batch runs are different work, and an
   afternoon's hundred-file batch would otherwise bury the single video made this morning. */
.rf-list-tabs { display: flex; gap: 4px; margin-left: 14px; }
.rf-list-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border: 1px solid transparent; border-radius: 999px;
  background: none; font-size: 12px; color: var(--rd-ink-4); cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.rf-list-tab:hover { color: var(--rd-ink-1); }
.rf-list-tab.is-on {
  background: var(--rd-teal-tint); border-color: var(--rd-teal-border); color: var(--rd-teal-ink);
}
.rf-list-tab-n {
  min-width: 17px; padding: 0 4px; border-radius: 999px; text-align: center;
  background: var(--rd-line-2); font-size: 10.5px; line-height: 16px; color: var(--rd-ink-4);
}
.rf-list-tab.is-on .rf-list-tab-n { background: var(--rd-teal); color: #fff; }

/* A collection's name, edited where it is read. Looks like the heading it replaces until
   somebody clicks it, because a text box sitting permanently in a header reads as a form. */
.rf-batch-title {
  flex: 0 1 auto; min-width: 140px; max-width: 320px;
  padding: 3px 7px; border: 1px solid transparent; border-radius: 7px;
  background: none; font-size: 13px; font-weight: 600; color: var(--rd-ink-1);
  font-family: inherit;
}
.rf-batch-title::placeholder { color: var(--rd-ink-4); font-weight: 600; }
.rf-batch-title:hover { border-color: var(--rd-line-3); }
.rf-batch-title:focus {
  outline: none; border-color: var(--rd-teal); background: var(--rd-panel);
}
.rf-tile-batch .rf-tile-name { font-size: 13.5px; }

/* Song Generation — the landing screen's list of previous songs.
   A row is the track plus what identifies it, laid out so the player and the Open button stay
   together on the right and wrap under the text on a narrow window rather than squeezing it. */
.sd-song-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.sd-song-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 0;
}
.sd-song-row-main { flex: 1 1 320px; min-width: 0; }
/* min-width: 0 so a long name ellipsises instead of pushing the player off the card. */
.sd-song-row-main .an-card-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-song-row-main code { font-size: 11px; opacity: 0.7; }
.sd-song-row-actions { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; }
.sd-song-player { height: 34px; max-width: 260px; }

/* The download sits with the player, not with the sharpening step below it. The video is
   finished the moment it plays, and putting the control next to the thing it downloads is what
   stops "sharpening is optional" reading as a step still owed. */
.rf-player-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 10px 0 4px;
}
.rf-player-actions .rf-btn {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
}
.rf-player-actions-note { margin: 0; }

/* Earlier batches, under the chooser. Quieter than the collection cards in the run list on
   purpose: this is a way back to an unfinished upload, not the place you browse finished work. */
.rf-batch-history { margin-top: 18px; }
.rf-batch-history h4 { margin: 0 0 8px; }
.rf-batch-history ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rf-batch-history button {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 72px;
  align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 1px solid var(--rd-line-3); border-radius: 8px;
  background: var(--rd-panel); font-size: 12px; text-align: left; cursor: pointer;
  font-family: inherit; color: var(--rd-ink-2);
}
.rf-batch-history button:hover { border-color: var(--rd-teal); }
.rf-batch-history-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--rd-ink-1); font-weight: 500;
}
.rf-batch-history-meta { color: var(--rd-ink-4); }
.rf-batch-history-go { color: var(--rd-teal-ink); text-align: right; }
@media (max-width: 720px) {
  .rf-batch-history button { grid-template-columns: minmax(0, 1fr) auto; }
  .rf-batch-history-meta { grid-column: 1 / -1; }
}
/* Was inside the media query above, which was never closed: the stylesheet ended one brace
   short, so this rule only applied below 720px and every later rule would have been
   swallowed by it too. The attempts label is a desktop affordance. */
.admin-generated-count .admin-generated-attempts {
  font-style: normal; font-size: 10px; color: var(--fg-3); margin-left: 2px;
}

/* ---- Admin: live user activity -------------------------------------------------- */
.admin-activity {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 14px 16px; margin-bottom: 14px;
}
.admin-activity-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  justify-content: space-between;
}
.admin-activity-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-activity-title h4 { margin: 0; font-size: 13px; }
.admin-activity-presence {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--fg-2);
}
.admin-activity-presence em { font-style: normal; color: var(--fg-3); }
.admin-activity-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--fg-4);
  display: inline-block; flex: none;
}
.admin-activity-presence.tone-ok .admin-activity-dot { background: var(--success-fg, #2e9e6b); }
.admin-activity-presence.tone-warn .admin-activity-dot { background: var(--warn-fg, #c08a2e); }
.admin-activity-controls { display: flex; align-items: center; gap: 8px; }
.admin-activity-controls small { color: var(--fg-3); font-size: 11px; }
.admin-activity-live, .admin-activity-refresh {
  font-size: 11px; padding: 3px 9px; border-radius: 4px;
  border: 1px solid var(--border-default); background: var(--bg-1); color: var(--fg-2);
  cursor: pointer;
}
.admin-activity-live.on { color: var(--success-fg, #2e9e6b); border-color: currentColor; }
.admin-activity-error, .admin-activity-empty {
  margin: 0; font-size: 12px; color: var(--fg-3);
}
.admin-activity-failure {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  background: var(--danger-bg); color: var(--danger-fg);
  border-radius: 6px; padding: 8px 10px; font-size: 12px;
}
.admin-activity-feed {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  max-height: 340px; overflow-y: auto;
}
.admin-activity-row {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto auto;
  gap: 10px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
}
.admin-activity-row:last-child { border-bottom: none; }
.admin-activity-row time { color: var(--fg-3); font-variant-numeric: tabular-nums; }
.admin-activity-action { color: var(--fg-1); min-width: 0; }
.admin-activity-lane { color: var(--fg-3); font-size: 11px; text-transform: uppercase; }
.admin-activity-row.failed .admin-activity-action { color: var(--danger-fg); }
.admin-activity-code {
  color: var(--danger-fg); font-variant-numeric: tabular-nums; font-size: 11px;
}
.admin-activity-foot { font-size: 11px; color: var(--fg-3); }
@media (max-width: 720px) {
  .admin-activity-row { grid-template-columns: 64px minmax(0, 1fr); }
  .admin-activity-lane, .admin-activity-code { grid-column: 2; }
}

/* Page-scan results: the ads found on a share page, for the user to pick between. A grid rather
   than a list because the thumbnail is what actually tells two cuts of the same ad apart --
   frame.io shares routinely hold a 9x16 and a 16x9 of one spot with near-identical titles. */
.wr-found { margin-top: 14px; }
.wr-found-hdr {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--rd-teal-ink); margin-bottom: 8px;
}
.wr-found-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.wr-found-card {
  display: flex; flex-direction: column; gap: 6px; padding: 8px; text-align: left; cursor: pointer;
  background: var(--rd-surface-2, #fbfdfc); color: var(--rd-ink-1, var(--fg-1));
  border: 1px solid var(--rd-line-3, var(--border-default)); border-radius: 10px;
  transition: border-color .12s ease, transform .12s ease;
}
.wr-found-card:hover:not(:disabled) { border-color: var(--rd-teal); transform: translateY(-1px); }
.wr-found-card:disabled { opacity: .55; cursor: default; }
.wr-found-card img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; display: block;
  background: var(--bg-sunken, #0f1216);
}
.wr-found-noposter {
  width: 100%; aspect-ratio: 16 / 9; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-sunken, #eef1f4); color: var(--rd-ink-3, var(--fg-3));
}
.wr-found-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wr-found-title {
  font-size: 12px; font-weight: 600; line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.wr-found-sub { font-size: 11px; color: var(--rd-ink-3, var(--fg-3)); }
[data-theme="dark"] .wr-found-card {
  background: var(--bg-sunken, #0f1216);
  color: var(--fg-1, #EEF0F3);
  border-color: var(--border-default, #2a2f36);
}

/* The pack this remix sells, confirmed at the Variants gate. Sat above the cast/environment
   cards deliberately: it is the one thing in frame whose artwork is not a creative variable, so
   it is the first thing the reviewer should see, not a detail below the fold. */
.wr-product-gate {
  margin-bottom: 16px; padding: 14px;
  background: var(--rd-surface-2, #fbfdfc);
  border: 1px solid var(--rd-line-3, var(--border-default)); border-radius: 12px;
}
.wr-product-hdr {
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rd-teal-ink); margin-bottom: 10px;
}
.wr-product-body { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.wr-product-preview {
  flex: none; width: 128px; height: 128px; border-radius: 10px; overflow: hidden;
  background: var(--bg-sunken, #eef1f4);
  border: 1px solid var(--rd-line-3, var(--border-default));
  display: flex; align-items: center; justify-content: center;
}
.wr-product-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wr-product-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11px; color: var(--rd-ink-3, var(--fg-3));
}
.wr-product-controls {
  flex: 1 1 280px; min-width: 240px; display: flex; flex-direction: column; gap: 8px;
}
.wr-product-controls select { width: 100%; }
[data-theme="dark"] .wr-product-gate {
  background: var(--bg-sunken, #0f1216);
  border-color: var(--border-default, #2a2f36);
}
[data-theme="dark"] .wr-product-preview {
  background: #0b0e12; border-color: var(--border-default, #2a2f36);
}

/* =====================================================================================
   Creative Strategist tab (sx-*). A guided, five-step journey to a brief for people who are
   not strategists: one question per screen, a roadmap across the top, big Back / Next
   buttons, plain English throughout. Beside every step, the idea map (a three.js
   constellation of the brand's own vocabulary) sits in a green window with the strategist
   speaking above it. One typeface, Lexend, built for easy reading. Pink is kept for ideas
   never tried, blue for the strategist's new ideas. Every rule is scoped under .sx, so no
   other tab changes. Direction contract: .impeccable/surfaces/.
   ===================================================================================== */
.sx {
  --sx-font: 'Lexend', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sx-text: #10261B;
  --sx-text-2: #496356;
  --sx-page: #F3F8F5;
  --sx-card: #FFFFFF;
  --sx-line: #D8E7DE;
  --sx-line-strong: #A8C8B5;
  --sx-brand: #0E7A48;
  --sx-brand-hover: #0B6A3E;
  --sx-brand-ink: #FFFFFF;
  --sx-brand-soft: #E2F4E9;
  --sx-signal: #E0467F;
  --sx-signal-ink: #B4134F;
  --sx-signal-soft: #FCE8F0;
  --sx-twin: #1596B8;
  --sx-twin-soft: #E1F5FA;
  --sx-twin-ink: #0B6680;
  --sx-on-accent: #FFFFFF;
  --sx-pass: #0E7A48;
  --sx-warn: #9A6400;
  --sx-fail: #C0263A;
  --sx-glyph-edge: #0B3322;
  --sx-shadow: 0 1px 2px rgba(16, 38, 27, 0.06), 0 10px 30px -14px rgba(16, 38, 27, 0.22);
  --sx-radius: 18px;
  --sx-radius-sm: 12px;
  position: relative;
  margin: 0 0 24px;
  padding: 28px 28px 36px;
  border-radius: 20px;
  background: var(--sx-page);
  color: var(--sx-text);
  font-family: var(--sx-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--sx-brand);
}
[data-theme="dark"] .sx {
  --sx-text: #E7F5EC;
  --sx-text-2: #A6C7B5;
  --sx-page: #07130D;
  --sx-card: #0E1F16;
  --sx-line: #1F3A2B;
  --sx-line-strong: #2F5A43;
  --sx-brand: #3FD989;
  --sx-brand-hover: #62E3A1;
  --sx-brand-ink: #04170D;
  --sx-brand-soft: rgba(63, 217, 137, 0.13);
  --sx-signal: #FF7BAD;
  --sx-signal-ink: #FF9BC1;
  --sx-signal-soft: rgba(255, 123, 173, 0.13);
  --sx-twin: #5AD5F2;
  --sx-twin-soft: rgba(90, 213, 242, 0.13);
  --sx-twin-ink: #8BE8FF;
  --sx-on-accent: #04170D;
  --sx-pass: #5EE39A;
  --sx-warn: #F1C35A;
  --sx-fail: #FF7384;
  --sx-glyph-edge: #D9FBE6;
  --sx-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -16px rgba(0, 0, 0, 0.7);
}
.sx ::selection { background: var(--sx-brand-soft); color: var(--sx-text); }
.sx :focus-visible { outline: 3px solid var(--sx-brand); outline-offset: 2px; }
/* The dashboard styles bare h1-h4 and p globally (colors_and_type.css). Inside this room they
   inherit instead; this sits before every sx-* rule so each component still sets its own. */
.sx :where(h1, h2, h3, p, dt, dd, li, label, legend) { color: inherit; letter-spacing: normal; font-family: inherit; }
.sx :where(button, input, select, textarea) { font-family: inherit; }
.sx-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sx-glyph { flex: none; overflow: visible; }
.sx-term { margin-left: 6px; color: var(--sx-text-2); font-size: 12px; font-weight: 400; }

/* ---- Astus, at the top of the page: the header is his welcome banner ---------------------- */
.sx-hero {
  display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; align-items: center; gap: 0 20px;
  margin-bottom: 20px; padding: 4px 24px 4px 8px; overflow: hidden; border-radius: 24px; color: #E6F8EE;
  background:
    radial-gradient(40% 130% at 7% 55%, rgba(63, 217, 137, 0.3) 0%, rgba(63, 217, 137, 0) 70%),
    linear-gradient(115deg, #0F4D30 0%, #0A3421 50%, #05190F 100%);
  box-shadow: 0 24px 50px -30px rgba(4, 19, 11, 0.7), 0 2px 6px -2px rgba(4, 19, 11, 0.25);
}
.sx-hero :focus-visible, .sx-map :focus-visible { outline-color: #7CF0B0; }
.sx-astus-figure { position: relative; height: 176px; }
.sx-astus-host { position: absolute; inset: 0; }
.sx-astus-gl { display: block; width: 100%; height: 100%; }
.sx-astus-figure.is-flat .sx-astus-host {
  inset: auto; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #EAFFF2, #3FD989 45%, #0E7A48 100%);
}
.sx-hero.is-thinking .sx-astus-figure.is-flat .sx-astus-host { animation: sx-breathe 1.6s ease-in-out infinite; }
.sx-hero-text { min-width: 0; padding: 18px 0; }
.sx-hero-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.sx-title { margin: 0; color: #FFFFFF; font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.sx-badge { padding: 4px 11px; border-radius: 999px; background: rgba(207, 249, 224, 0.12); color: #C9F9DC; font-size: 13px; font-weight: 600; }
.sx-agent-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  background: rgba(63, 217, 137, 0.16); color: #7CF0B0; font-size: 12.5px; font-weight: 600;
}
.sx-agent-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sx-hero.is-thinking .sx-agent-tag::before { animation: sx-breathe 1.2s ease-in-out infinite; }
.sx-hello { margin: 0; color: #FFFFFF; font-size: 17px; font-weight: 600; }
.sx-say { max-width: 68ch; margin: 2px 0 0; color: #E6F8EE; font-size: 16px; line-height: 1.5; animation: sx-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.sx-say-next { max-width: 68ch; margin: 4px 0 0; color: #A9D7BF; font-size: 15px; line-height: 1.5; }
.sx-how {
  align-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 9px 14px;
  border: 1px solid rgba(207, 249, 224, 0.24); border-radius: 999px;
  background: rgba(4, 19, 11, 0.3); color: #E6F8EE; font-size: 14px; text-decoration: none; white-space: nowrap;
}
.sx-how:hover { border-color: rgba(207, 249, 224, 0.42); background: rgba(4, 19, 11, 0.55); }

.sx-road { margin-bottom: 22px; }
.sx-road ol {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0; padding: 14px; list-style: none;
  border: 1px solid var(--sx-line); border-radius: var(--sx-radius);
  background: var(--sx-card); box-shadow: var(--sx-shadow);
}
.sx-road li { position: relative; min-width: 0; }
.sx-road li + li::before {
  content: ''; position: absolute; top: 30px; left: -18px; width: 28px; height: 2px;
  border-radius: 2px; background: var(--sx-line);
}
.sx-road li.is-done + li::before, .sx-road li.is-now::before { background: var(--sx-brand); }
.sx-road button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px;
  border: none; border-radius: var(--sx-radius-sm); background: transparent;
  color: var(--sx-text); text-align: left; cursor: pointer;
  transition: background 0.2s;
}
.sx-road button:hover:not(:disabled) { background: var(--sx-brand-soft); }
.sx-road button:disabled { cursor: default; }
.sx-road-dot {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px;
  border: 2px solid var(--sx-line-strong); border-radius: 50%;
  color: var(--sx-text-2); font-size: 16px; font-weight: 600;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.sx-road .is-now .sx-road-dot { border-color: var(--sx-brand); background: var(--sx-brand); color: var(--sx-brand-ink); box-shadow: 0 0 0 5px var(--sx-brand-soft); }
.sx-road .is-done .sx-road-dot { border-color: var(--sx-brand); background: var(--sx-brand-soft); color: var(--sx-brand); }
.sx-road .is-locked { opacity: 0.55; }
.sx-road-text { display: flex; flex-direction: column; min-width: 0; }
.sx-road-title { font-size: 15px; font-weight: 600; }
.sx-road-value { overflow: hidden; color: var(--sx-text-2); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; min-height: 19px; }
.sx-road-mobile { display: none; }

/* ---- body: the step, and the map beside it ------------------------------------------- */
.sx-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); align-items: start; gap: 24px; }
.sx-body.is-wide { grid-template-columns: minmax(0, 1fr); }
/* The brief takes the full width; the map steps aside and Astus, above, celebrates it. */
.sx-body.is-wide .sx-map { display: none; }
.sx-panel {
  min-width: 0; padding: 32px 34px 28px;
  border: 1px solid var(--sx-line); border-radius: 22px;
  background: var(--sx-card); box-shadow: var(--sx-shadow);
  scroll-margin-top: 16px;
}
.sx-step { animation: sx-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes sx-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sx-q { margin: 0 0 8px; font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.sx-optional {
  display: inline-block; margin-left: 10px; padding: 3px 10px; vertical-align: middle;
  border-radius: 999px; background: var(--sx-brand-soft); color: var(--sx-brand);
  font-size: 13px; font-weight: 500; letter-spacing: 0;
}
.sx-help { max-width: 62ch; margin: 0 0 22px; color: var(--sx-text-2); font-size: 17px; line-height: 1.55; }
.sx-help-small { margin: 12px 0 0; font-size: 14.5px; }
.sx-alert {
  margin: 0 0 20px; padding: 14px 16px; border-radius: var(--sx-radius-sm);
  background: color-mix(in srgb, var(--sx-fail) 10%, transparent); color: var(--sx-fail); font-size: 15px;
}
.sx-note-box { margin: 18px 0 0; padding: 14px 16px; border-radius: var(--sx-radius-sm); background: var(--sx-brand-soft); color: var(--sx-text); font-size: 15px; }
.sx-unknown {
  padding: 16px; border: 1px dashed var(--sx-line-strong); border-radius: var(--sx-radius-sm);
  color: var(--sx-text-2); font-size: 15px;
}
.sx-unknown-small { padding: 10px 12px; font-size: 13.5px; }

/* choices: products, ideas */
.sx-choices { display: grid; gap: 12px; }
.sx-choices-products { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sx-choices-ideas { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.sx-choice {
  position: relative; display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 72px; padding: 14px 16px;
  border: 1.5px solid var(--sx-line); border-radius: 16px;
  background: var(--sx-card); color: var(--sx-text); text-align: left; cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.sx-choice:hover { border-color: var(--sx-line-strong); transform: translateY(-1px); box-shadow: var(--sx-shadow); }
.sx-choice.is-on { border-color: var(--sx-brand); background: var(--sx-brand-soft); }
.sx-choice-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sx-choice-title { font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.sx-choice-sub { color: var(--sx-text-2); font-size: 14px; }
.sx-tick {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px;
  border: 1.5px solid var(--sx-line-strong); border-radius: 50%; color: transparent;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.is-on > .sx-tick, .is-on .sx-concept-head .sx-tick { border-color: var(--sx-brand); background: var(--sx-brand); color: var(--sx-brand-ink); }
.sx-product-mark {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  border-radius: 12px; background: var(--sx-brand-soft); color: var(--sx-brand);
  font-size: 15px; font-weight: 600;
}
.sx-idea-ring { flex: none; width: 14px; height: 14px; border: 2.5px solid var(--sx-signal); border-radius: 50%; }
.sx-idea.is-on { border-color: var(--sx-signal); background: var(--sx-signal-soft); }
.sx-idea.is-on > .sx-tick { border-color: var(--sx-signal); background: var(--sx-signal); color: var(--sx-on-accent); }
.sx-list-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 14px; color: var(--sx-text-2); font-size: 14px; }

/* the facts after a product is read */
.sx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; }
.sx-facts > div { padding: 16px 18px; border-radius: 16px; background: var(--sx-page); }
.sx-facts dt { color: var(--sx-text-2); font-size: 14px; }
.sx-facts dd { margin: 4px 0 0; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sx-facts-signal dd { color: var(--sx-signal-ink); }

/* the goal */
.sx-goal {
  box-sizing: border-box; width: 100%; min-height: 130px; padding: 16px 18px;
  border: 1.5px solid var(--sx-line); border-radius: 16px;
  background: var(--sx-card); color: var(--sx-text); font-size: 17px; line-height: 1.55;
  resize: vertical; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.sx-goal::placeholder { color: var(--sx-text-2); opacity: 0.8; }
.sx-goal:focus { border-color: var(--sx-brand); box-shadow: 0 0 0 4px var(--sx-brand-soft); }
.sx-starters, .sx-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.sx-starters-k { color: var(--sx-text-2); font-size: 14px; margin-right: 2px; }
.sx-starter, .sx-picked-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px;
  border: 1px solid var(--sx-line); border-radius: 999px;
  background: var(--sx-card); color: var(--sx-text); font-size: 14px; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.sx-starter:hover { border-color: var(--sx-brand); background: var(--sx-brand-soft); }
.sx-picked-chip { border-color: color-mix(in srgb, var(--sx-signal) 45%, transparent); background: var(--sx-signal-soft); }
.sx-picked-chip .sx-idea-ring { width: 10px; height: 10px; border-width: 2px; }
.sx-count { margin: 22px 0 0; padding: 0; border: none; }
.sx-count legend { margin-bottom: 8px; padding: 0; font-size: 15px; font-weight: 600; }
.sx-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--sx-page); border: 1px solid var(--sx-line); }
.sx-seg button {
  min-width: 64px; padding: 10px 18px; border: none; border-radius: 999px;
  background: transparent; color: var(--sx-text); font-size: 16px; font-weight: 600; cursor: pointer;
}
.sx-seg button.is-on { background: var(--sx-brand); color: var(--sx-brand-ink); }

/* more options */
.sx-more { margin-top: 22px; border: 1px solid var(--sx-line); border-radius: 16px; background: var(--sx-card); }
.sx-more > summary {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  font-size: 15.5px; font-weight: 500; list-style: none; cursor: pointer;
}
.sx-more > summary::-webkit-details-marker { display: none; }
.sx-more > summary svg { margin-left: auto; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.sx-more[open] > summary svg { transform: rotate(180deg); }
.sx-more > :not(summary) { margin-left: 16px; margin-right: 16px; }
.sx-more > :last-child { margin-bottom: 16px; }
.sx-more-small > summary { font-size: 14px; padding: 12px 14px; }
.sx-more-count { padding: 2px 9px; border-radius: 999px; background: var(--sx-brand-soft); color: var(--sx-brand); font-size: 13px; }
.sx-holds { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; margin-bottom: 12px; }
.sx-hold { display: flex; flex-direction: column; gap: 6px; }
.sx-hold-k { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; }
.sx-hold select, .sx-input {
  width: 100%; padding: 11px 12px; border: 1.5px solid var(--sx-line); border-radius: 12px;
  background: var(--sx-card); color: var(--sx-text); font-size: 15px;
}
.sx-hold select:focus, .sx-input:focus { border-color: var(--sx-brand); outline: none; box-shadow: 0 0 0 4px var(--sx-brand-soft); }

/* concepts */
.sx-concepts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.sx-concept {
  display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px;
  border: 1.5px solid var(--sx-line); border-radius: 18px;
  background: var(--sx-card); color: var(--sx-text); text-align: left; cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s;
  animation: sx-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--sx-i, 0) * 70ms);
}
.sx-concept:hover { border-color: var(--sx-line-strong); transform: translateY(-2px); box-shadow: var(--sx-shadow); }
.sx-concept.is-on { border-color: var(--sx-twin); background: var(--sx-twin-soft); }
.sx-concept.is-on .sx-concept-head .sx-tick { border-color: var(--sx-twin); background: var(--sx-twin); color: var(--sx-on-accent); }
.sx-concept-head { display: flex; justify-content: space-between; align-items: center; }
.sx-concept-n { padding: 4px 10px; border-radius: 999px; background: var(--sx-twin-soft); color: var(--sx-twin-ink); font-size: 13px; font-weight: 600; }
.sx-concept-name { font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.sx-concept-hook { font-size: 16px; line-height: 1.5; }
.sx-concept-rows { display: grid; gap: 6px; }
.sx-concept-rows > span, .sx-concept-new { display: flex; flex-direction: column; gap: 1px; color: var(--sx-text); font-size: 14.5px; line-height: 1.45; }
.sx-concept-rows b, .sx-concept-new b { color: var(--sx-text-2); font-size: 12.5px; font-weight: 500; }
.sx-concept-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-concept-tags span { padding: 4px 10px; border-radius: 999px; background: var(--sx-page); color: var(--sx-text-2); font-size: 13px; }
.sx-concept-new { padding-top: 10px; border-top: 1px solid var(--sx-line); }
.sx-concept-new b { color: var(--sx-signal-ink); }

/* loading */
.sx-loading { display: flex; align-items: center; gap: 18px; margin: 18px 0 4px; padding: 22px; border-radius: 18px; background: var(--sx-brand-soft); }
.sx-loading-orb {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #C9F9DC, #3FD989 45%, #0E7A48 100%);
  box-shadow: 0 0 0 0 rgba(63, 217, 137, 0.5);
  animation: sx-breathe 1.6s ease-in-out infinite;
}
@keyframes sx-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(63, 217, 137, 0.45); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(63, 217, 137, 0); }
}
.sx-loading-title { margin: 0; font-size: 17px; font-weight: 600; }
.sx-loading-text { margin: 2px 0 10px; color: var(--sx-text-2); font-size: 15px; }
.sx-loading-bar { position: relative; display: block; width: 220px; max-width: 100%; height: 6px; overflow: hidden; border-radius: 6px; background: color-mix(in srgb, var(--sx-brand) 18%, transparent); }
.sx-loading-bar > span { position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 6px; background: var(--sx-brand); animation: sx-slide 1.4s ease-in-out infinite; }
@keyframes sx-slide { from { left: -40%; } to { left: 100%; } }

/* footer */
.sx-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--sx-line); }
.sx-foot-right { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; }
.sx-back, .sx-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 18px; border: 1.5px solid var(--sx-line); border-radius: 999px;
  background: var(--sx-card); color: var(--sx-text); font-size: 16px; font-weight: 500; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.sx-back { border-color: transparent; background: transparent; }
.sx-back:hover, .sx-ghost:hover:not(:disabled) { border-color: var(--sx-line-strong); background: var(--sx-page); }
.sx-ghost:disabled { opacity: 0.5; cursor: not-allowed; }
.sx-next-btn, .sx-approve {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px; border: none; border-radius: 999px;
  background: var(--sx-brand); color: var(--sx-brand-ink); font-size: 17px; font-weight: 600; cursor: pointer;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--sx-brand) 80%, transparent);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.sx-next-btn:hover:not(:disabled), .sx-approve:hover:not(:disabled) { background: var(--sx-brand-hover); transform: translateY(-1px); }
.sx-next-btn svg { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.sx-next-btn:hover:not(:disabled) svg { transform: translateX(3px); }
.sx-next-btn:disabled, .sx-approve:disabled { background: var(--sx-line); color: var(--sx-text-2); box-shadow: none; cursor: not-allowed; }
.sx-next-btn.is-busy { cursor: progress; }
.sx-approve { min-height: 48px; padding: 12px 20px; font-size: 16px; }
.sx-wide { width: 100%; }
.sx-link {
  padding: 0; border: none; background: none; color: var(--sx-brand); font-size: 14.5px; font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* the brief */
.sx-brief-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.sx-brief-head .sx-q { margin: 0; animation: sx-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.sx-brief-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sx-id { padding: 8px 12px; border-radius: 999px; background: var(--sx-page); color: var(--sx-text-2); font-size: 13.5px; user-select: all; }
.sx-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 16px; }
.sx-checks > div { padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--sx-tone, var(--sx-text-2)) 9%, transparent); }
.sx-checks dt { color: var(--sx-text-2); font-size: 13.5px; }
.sx-checks dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; color: var(--sx-tone, var(--sx-text)); font-size: 16px; font-weight: 600; }
.sx-checks dd::before, .sx-status::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--sx-tone, var(--sx-line-strong)); }
.sx-tone-pass { --sx-tone: var(--sx-pass); }
.sx-tone-warn { --sx-tone: var(--sx-warn); }
.sx-tone-fail { --sx-tone: var(--sx-fail); }
.sx-tone-none { --sx-tone: var(--sx-text-2); }
.sx-found { margin: 12px 16px 0 34px; padding: 0; color: var(--sx-text); font-size: 15px; }
.sx-found li { margin-bottom: 6px; }
.sx-brief-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 36px; margin-top: 20px; }
.sx-doc { max-width: 68ch; color: var(--sx-text); font-size: 16.5px; line-height: 1.7; }
.sx-doc-head {
  display: flex; align-items: baseline; gap: 10px;
  margin: 30px 0 12px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
}
.sx-doc-head:first-child { margin-top: 4px; }
.sx-doc-note { color: var(--sx-text-2); font-size: 14px; font-weight: 400; }
.sx-doc-p { margin: 0 0 12px; white-space: pre-line; }
.sx-doc-field { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--sx-line); }
.sx-doc-field span { color: var(--sx-text-2); font-size: 14.5px; }
.sx-doc-field p { margin: 0; font-size: 16px; line-height: 1.6; }
.sx-doc-visual { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; margin: 0 0 12px; padding: 14px 16px; border-radius: 14px; background: var(--sx-twin-soft); }
.sx-doc-visual span { color: var(--sx-text-2); font-size: 14.5px; }
.sx-doc-visual p { margin: 0; font-size: 16px; }
.sx-doc-beat { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--sx-line); }
.sx-doc-n {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--sx-brand-soft); color: var(--sx-brand); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.sx-doc-spoken { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.55; }
.sx-doc-shot { margin: 6px 0 0; color: var(--sx-text-2); font-size: 15px; }
.sx-doc-shot strong { color: var(--sx-text); font-weight: 600; }
.sx-doc-list { margin: 0 0 12px; padding-left: 22px; }
.sx-doc-list li { margin: 0 0 6px; }
.sx-doc-list li::marker { color: var(--sx-brand); }
.sx-next-steps {
  position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px;
  padding: 18px; border-radius: 18px; background: var(--sx-page); border: 1px solid var(--sx-line);
}
.sx-next-h { margin: 0; font-size: 18px; font-weight: 600; }
.sx-next-block { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--sx-line); }
.sx-next-k { margin: 0; font-size: 15px; font-weight: 600; }
.sx-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sx-status {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; padding: 8px 12px;
  border-radius: 999px; background: color-mix(in srgb, var(--sx-tone, var(--sx-text-2)) 10%, transparent);
  color: var(--sx-tone, var(--sx-text)); font-size: 14.5px; font-weight: 500;
}
.sx-cut { margin: 10px 0 0; color: var(--sx-text); font-size: 15px; line-height: 1.6; white-space: pre-line; }

/* ---- the idea map: its own dark card beside the step, the map filling it ------------------- */
.sx-map {
  position: sticky; top: 16px; overflow: hidden; border-radius: 24px; color: #E6F8EE;
  background: radial-gradient(90% 75% at 50% 55%, #125C39 0%, #0A3421 55%, #05190F 100%);
  box-shadow: 0 24px 50px -30px rgba(4, 19, 11, 0.7), 0 2px 6px -2px rgba(4, 19, 11, 0.25);
}
.sx-map-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between;
  align-items: flex-start; gap: 12px; padding: 16px 16px 0 20px; pointer-events: none;
}
.sx-map-head > * { pointer-events: auto; }
.sx-map-title { margin: 4px 0 0; color: #DDFBE8; font-size: 14px; font-weight: 600; }
.sx-map-caption { margin: 2px 0 0; color: #A9D7BF; font-size: 12.5px; animation: sx-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.sx-map-key { position: relative; }
.sx-map-key summary {
  display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px; cursor: pointer; list-style: none; white-space: nowrap;
  border: 1px solid rgba(207, 249, 224, 0.24); background: rgba(4, 19, 11, 0.45); color: #DDFBE8;
  font-size: 13px; font-weight: 500; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sx-map-key summary::-webkit-details-marker { display: none; }
.sx-map-key summary:hover { background: rgba(4, 19, 11, 0.75); }
.sx-map-key[open] summary { border-color: transparent; background: #C9F9DC; color: #04130B; }
.sx-stage { position: relative; isolation: isolate; height: 460px; overflow: hidden; }
.sx-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.08; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.sx-stage-empty { position: absolute; inset: auto 24px 24px; z-index: 3; margin: 0; color: #DDFBE8; font-size: 15px; text-align: center; }
.sx-scene { position: absolute; inset: 0; z-index: 2; }
.sx-scene-host { position: absolute; inset: 0; }
.sx-scene-gl { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.sx-scene-overlay { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sx-scene-note { position: absolute; left: 24px; right: 24px; top: 44%; margin: 0; color: #DDFBE8; font-size: 15px; text-align: center; }
.sx-scene.is-loading .sx-scene-note::after {
  content: ''; display: block; width: 120px; height: 4px; margin: 12px auto 0; border-radius: 4px;
  background: linear-gradient(90deg, transparent, #3FD989, transparent); background-size: 200% 100%;
  animation: sx-shimmer 1.2s linear infinite;
}
@keyframes sx-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sx-scene-tools { position: absolute; right: 14px; bottom: 14px; z-index: 4; display: flex; gap: 6px; opacity: 0.7; transition: opacity 0.2s; }
.sx-map:hover .sx-scene-tools, .sx-scene-tools:focus-within { opacity: 1; }
.sx-tool {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid rgba(207, 249, 224, 0.24); border-radius: 10px;
  background: rgba(4, 19, 11, 0.55); color: #DDFBE8; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sx-tool:hover { background: rgba(4, 19, 11, 0.85); }
.sx-tool[aria-pressed="true"] { background: #C9F9DC; color: #04130B; }
.sx-lbl {
  position: absolute; left: 0; top: 0; translate: 14px -50%;
  display: flex; align-items: center; gap: 6px; max-width: 200px; padding: 4px 9px 4px 7px;
  border-radius: 999px; background: rgba(4, 19, 11, 0.8); color: #EAFFF2;
  font-family: var(--sx-font); font-size: 12px; font-weight: 500; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; will-change: transform, opacity;
}
.sx-lbl.is-left { translate: calc(-100% - 14px) -50%; }
/* display:flex above beats the UA's [hidden] rule, so a dropped label would otherwise stay painted. */
.sx-lbl[hidden], .sx-tip[hidden] { display: none; }
.sx-lbl::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sx-lbl-c, #EAFFF2); }
.sx-lbl[data-axis="angle"] { --sx-lbl-c: #7CF0B0; }
.sx-lbl[data-axis="mechanism"] { --sx-lbl-c: #4FDCCB; }
.sx-lbl[data-axis="audience"] { --sx-lbl-c: #C9F46C; }
.sx-lbl[data-axis="awareness"] { --sx-lbl-c: #9FD6FF; }
.sx-lbl[data-axis="ad_format"] { --sx-lbl-c: #F1E0A6; }
.sx-lbl.is-lit { background: #04130B; }
.sx-lbl.is-held { background: #C9F9DC; color: #04130B; }
.sx-lbl.is-held::after { content: 'kept'; margin-left: 2px; padding: 1px 6px; border-radius: 999px; background: #04130B; color: #C9F9DC; font-size: 10.5px; }
/* The mind map's pills: the centre, the five branch names, and a new idea's number on its card. */
.sx-lbl-center, .sx-lbl-branch, .sx-lbl-num { translate: -50% -50%; }
.sx-lbl-center {
  max-width: 240px; padding: 8px 14px 8px 12px; background: #04130B; color: #FFFFFF; font-size: 14px; font-weight: 600;
  box-shadow: inset 0 0 0 1.5px rgba(124, 240, 176, 0.55), 0 10px 24px -10px rgba(0, 0, 0, 0.7);
}
.sx-lbl-center::before { width: 8px; height: 8px; background: #7CF0B0; }
.sx-lbl-center.is-concept { color: #DDF7FF; box-shadow: inset 0 0 0 1.5px rgba(69, 227, 255, 0.7), 0 10px 24px -10px rgba(0, 0, 0, 0.7); }
.sx-lbl-center.is-concept::before { border-radius: 2px; background: #45E3FF; }
.sx-lbl-branch {
  padding: 5px 11px 5px 9px; background: rgba(4, 19, 11, 0.9); color: var(--sx-lbl-c, #EAFFF2); font-size: 12.5px; font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sx-lbl-c, #EAFFF2) 45%, transparent);
}
.sx-lbl-num { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; background: none; color: #04130B; font-size: 11px; font-weight: 700; }
.sx-lbl-num::before { display: none; }
.sx-tip {
  position: absolute; left: 0; top: 0; z-index: 5; max-width: 280px; padding: 12px 14px;
  border-radius: 14px; background: #04130B; color: #EAFFF2;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.6);
  font-family: var(--sx-font); font-size: 13.5px; line-height: 1.45;
}
.sx-tip-title { margin-bottom: 4px; color: #FFFFFF; font-size: 14px; font-weight: 600; }
.sx-tip-action { margin-top: 8px; color: #8BE8FF; font-size: 13px; font-weight: 500; }
/* How to read the map: a small card that opens under its button, over the map. */
.sx-legend {
  position: absolute; right: 0; top: calc(100% + 8px); display: grid; gap: 10px;
  width: 280px; max-width: calc(100vw - 72px); margin: 0; padding: 14px 16px; list-style: none;
  border-radius: 14px; background: rgba(4, 19, 11, 0.94); color: #CDE9DA; font-size: 13.5px; line-height: 1.4;
  box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.6);
}
.sx-legend li { display: flex; align-items: center; gap: 10px; }
.sx-legend-hint { padding-top: 10px; border-top: 1px solid rgba(207, 249, 224, 0.12); color: #A9D7BF; font-size: 13px; }
/* Legend keys wear the map's own colours on a chip of the map's own ground, so they match the
   canvas exactly. */
.sx-key { position: relative; display: inline-block; flex: none; width: 22px; height: 22px; border-radius: 7px; background: rgba(4, 19, 11, 0.45); }
.sx-key::after { content: ''; position: absolute; inset: 0; margin: auto; }
.sx-key-shape::after { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #7CF0B0, #4FDCCB); }
.sx-key-gap::after { width: 8px; height: 8px; border: 2px solid #FF5CA8; border-radius: 50%; }
.sx-key-concept::after { width: 10px; height: 10px; border-radius: 3px; background: #45E3FF; }
.sx-key-new::after { width: 8px; height: 8px; border: 2px solid #CDE9DA; border-radius: 50%; }

@media (max-width: 1100px) {
  .sx-body { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the map follows the step. */
  .sx-map { position: relative; top: auto; }
  .sx-stage { height: 340px; }
  .sx-road-value { display: none; }
}
@media (max-width: 820px) {
  .sx { padding: 18px 14px 28px; }
  .sx-road ol { display: none; }
  .sx-road-mobile {
    display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
    border: 1px solid var(--sx-line); border-radius: 16px; background: var(--sx-card);
    font-size: 16px; font-weight: 600;
  }
  .sx-road-bar { display: block; height: 8px; overflow: hidden; border-radius: 8px; background: var(--sx-line); }
  .sx-road-bar > span { display: block; width: 100%; height: 100%; border-radius: 8px; background: var(--sx-brand); transform-origin: left center; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
  .sx-panel { padding: 22px 18px 20px; }
  .sx-q { font-size: 24px; }
  .sx-facts { grid-template-columns: minmax(0, 1fr); }
  .sx-brief-body { grid-template-columns: minmax(0, 1fr); }
  .sx-next-steps { position: static; }
  .sx-doc-field, .sx-doc-visual { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sx-foot { flex-direction: column-reverse; align-items: stretch; }
  .sx-foot-right { flex-direction: column-reverse; align-items: stretch; }
  .sx-next-btn, .sx-back, .sx-ghost { width: 100%; }
  .sx-hero { grid-template-columns: 92px minmax(0, 1fr); gap: 0 10px; padding: 4px 16px 4px 2px; border-radius: 22px; }
  .sx-astus-figure { height: 150px; }
  .sx-hero-text { padding: 14px 0; }
  .sx-title { font-size: 24px; }
  .sx-hero-head { gap: 6px 8px; }
  .sx-badge { padding: 3px 9px; font-size: 12px; }
  .sx-agent-tag { padding: 2px 8px; font-size: 12px; }
  .sx-hello { font-size: 16px; }
  .sx-say { font-size: 15px; }
  .sx-say-next { font-size: 14px; }
  .sx-how { grid-column: 1 / -1; justify-self: start; margin: 0 0 14px 14px; }
  .sx-stage { height: 300px; }
  .sx-map-caption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sx *, .sx *::before, .sx *::after { animation: none !important; transition: none !important; }
}