/* Local faces only. No CDN, no system-ui fallback chain doing the design's job.
   Weights: 400, 500 and 600 ship as real faces. Nothing asks the body family for 700 — a weight
   with no file is drawn by the browser as SYNTHETIC bold (measured: 500/600/700/800 all produced
   an identical advance width, i.e. one face smeared), which looks exactly as cheap as it sounds.

   The body family is declared as "UGCBody", not "Plex": IBM Plex reserves that name, these files
   are subsets (a Modified Version under the OFL), and clause 3 forbids presenting a modified
   version under the reserved name. The files themselves are unmodified copies and keep their own
   internal names.

   Display: Unbounded — a grotesque with real character (wide apertures, flat terminals) that
   reads as a voice rather than as a default. Body: IBM Plex Sans — humanist, generous x-height,
   distinguishable letterforms at 14px, and it does NOT look like Inter next to it.
   Cyrillic and latin are separate files with unicode-range, so a Ukrainian page never downloads
   the latin subset it will not paint. */
@font-face { font-family: "Unbounded"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/fonts/Unbounded-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Unbounded"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/fonts/Unbounded-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2212; }
@font-face { font-family: "UGCBody"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/IBMPlexSans-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "UGCBody"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/IBMPlexSans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2212; }
@font-face { font-family: "UGCBody"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/static/fonts/IBMPlexSans-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "UGCBody"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/static/fonts/IBMPlexSans-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2212; }

/* ==========================================================================
   UGC Video Studio — design system
   Refined dark UI. One flat vermilion accent (#ff5c35), no gradients. Two local faces.
   ========================================================================== */
:root {
  /* surfaces */
  /* Warm near-black, not the blue-grey every dark SaaS ships. The whole surface ramp keeps the
     same warm hue so cards read as paper under a lamp, not as slabs of glass. */
  --bg:          #0c0b0a;
  --bg-glow:     transparent;          /* no glow: the page is lit by contrast, not by a gradient */
  --surface:     #161413;
  --surface-2:   #1c1918;   /* inputs, nested cards */
  --surface-3:   #241f1d;   /* hover */

  /* ink */
  --ink:    #f2ede9;
  --muted:  #b0a69f;
  --faint:  #92867e;   /* AA on --surface at 14px */

  /* lines */
  --line:        rgba(255, 255, 255, .07);
  --line-strong: rgba(255, 255, 255, .13);

  /* accent */
  /* One flat accent, no gradient anywhere. Vermilion because this product sells ad creative:
     it is the colour of a shutter button, and it is not the indigo every AI tool defaults to.
     Dark ink ON the accent (6.4:1) rather than white (3.1:1, which fails at button sizes). */
  --accent:       #ff5c35;
  --accent-2:     #ff8a5c;   /* the same hue lighter — a tint, not a second colour */
  --accent-ink:   #170b06;
  --accent-soft:  rgba(255, 92, 53, .13);
  /* The brand mark stays ONE colour, but a fill and a glyph are not the same job: #ff5c35 as
     TEXT measures 2.8:1 on paper and fails, while as a FILL with dark ink it is 6.3:1 in both
     themes. So the fill keeps the brand value and the text role gets its own token. */
  --accent-text:  #ff5c35;
  --accent-line:  rgba(255, 92, 53, .42);
  --grad:         #ff5c35;   /* kept as a token so nothing breaks; deliberately NOT a gradient */

  /* status */
  --ok:        #34d399;
  --ok-soft:   rgba(52, 211, 153, .14);
  --warn:      #fbbf24;
  --warn-soft: rgba(251, 191, 36, .14);
  --danger:    #e11d48;   /* moved off the accent hue: they read as one family at dE 12 */
  --danger-soft: rgba(248, 113, 113, .12);

  /* shape */
  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-xl: 26px;

  /* spacing scale (use instead of magic px gaps/margins) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 28px; --space-7: 40px;

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --clip-bg:   #0d0b0a;   /* letterbox behind a 9:16 clip, in the warm ramp */
  --shadow:    0 4px 16px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
  --shadow-accent: none;   /* a coloured bloom under the CTA is the same bloom, tinted */

  /* Two families with two jobs. The fallbacks are last-resort only — both faces ship locally, so
     the design never depends on whatever the OS calls "system-ui". */
  /* Two families with two jobs. The fallbacks are metric-MATCHED (see the two @font-face blocks
     below): a plain Helvetica in the chain re-laid the page the moment the real face arrived —
     measured on a throttled phone, the hero CTA row went from two wrapped lines to one and pushed
     everything under it by 57px, which was 0.09 of the landing's CLS on its own. */
  --font:         "UGCBody", "UGCBody Fallback", Helvetica, Arial, sans-serif;
  --font-display: "Unbounded", "Unbounded Fallback", "UGCBody", Helvetica, sans-serif;

  /* Optical tracking, by SIZE — which is what "optical" means. The first version had three tokens
     by ROLE, so 52px and 36px both got -.035em and a 17px sub-head got negative tracking it has no
     business having. Tracking has to loosen as type shrinks: the same em value is a wider optical
     gap at 52px than at 17px, and below ~20px it starts closing counters instead of tightening
     rhythm. Four steps, each tied to a size band. */
  --track-6xl: -.042em;   /* 44px and up  — the headline */
  --track-4xl: -.032em;   /* 28-43px      — section heads */
  --track-2xl: -.018em;   /* 20-27px      — large sub-heads */
  --track-md:    0;       /* under 20px   — none: it would eat the counters */
  --track-eyebrow: .12em; /* the one place letters get spaced OUT: small caps */

  /* kept as aliases so nothing downstream breaks; both now mean "by size" */
  --track-display: var(--track-4xl);
  --track-lead:    var(--track-2xl);

  --topbar-bg: rgba(12, 11, 10, .74);
  /* Focus is NOT the accent. A vermilion ring on a vermilion button is invisible exactly where a
     keyboard user needs it most; this cyan reads on both the page and the fill. */
  --focus:        #4dd0e1;
  --accent-hover: #ff7550;
  --accent-active:#e84a25;
  /* Deliberately theme-INDEPENDENT: this chip is burned over user video, where the page's theme
     says nothing about what is behind it. Yellow on near-black holds on any footage. */
  --caption-chip: #FFD400;
  /* Outline for MEDIA only. Every other edge on the site is the warm --line-strong, which is
     right on a surface and wrong on a photograph: over real footage a tinted hairline picks up
     the colour underneath and reads as a dirty edge. Pure white at 12% here, pure black in the
     light theme — neutral against any frame. */
  --media-edge: rgba(255, 255, 255, .12);
}

@font-face { font-family: "UGCBody"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/static/fonts/IBMPlexSans-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "UGCBody"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/static/fonts/IBMPlexSans-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2212; }

/* ── metric-matched fallbacks ────────────────────────────────────────────────
   These describe a LOCAL face (nothing is downloaded) re-shaped to occupy the same space as the
   web font it stands in for, so the swap changes the glyphs and nothing else. Without them the
   swap re-flows the page: IBM Plex asks for a 1.30em line box against Helvetica's 1.00em, and its
   glyphs are a shade narrower — enough to decide whether the hero's two buttons fit on one line.

   The numbers are not guessed. Widths were measured in a headless Chromium (a paragraph of the
   real Ukrainian copy at 100px: Plex/Helvetica 0.9988, Unbounded/Helvetica-bold 1.2955, then
   re-measured against the shaped fallback and trimmed so the stand-in is never the WIDER of the
   two — a fallback that overshoots wraps a line the real face does not) and the
   vertical overrides come from the hhea table of the shipped woff2 files, divided by size-adjust:
     ascent-override = ascender / unitsPerEm / size-adjust
   Plex: 1025/-275/0 per 1000upm. Unbounded: 995/-245/0 per 1000upm. */
@font-face { font-family: "UGCBody Fallback"; font-style: normal;
  src: local("Helvetica Neue"), local("Helvetica"), local("Arial"), local("Liberation Sans");
  size-adjust: 100.8%; ascent-override: 101.7%; descent-override: 27.3%; line-gap-override: 0%; }
@font-face { font-family: "Unbounded Fallback"; font-weight: 700; font-style: normal;
  src: local("Helvetica Neue Bold"), local("Helvetica Bold"), local("Arial Bold"), local("Arial");
  size-adjust: 128.6%; ascent-override: 77.4%; descent-override: 19.1%; line-gap-override: 0%; }

/* ─────────────────────────────────────────────────────────────────────────────
   LIGHT THEME — a second reading of the same design, not an inversion.
   Paper is warm (#f7f2ec), not white: on a near-black-and-vermilion brand a pure
   #fff reads clinical and makes the accent scream. Shadows get shallower and
   warmer, because a deep black shadow on paper looks like dirt. Every value below
   was measured, not guessed:
     ink   16.6:1 · muted 6.8:1 · faint 5.4:1 · accent-as-text 5.0:1 · button 6.3:1
   The switch lives on the landing only; the studio stays dark, and the first
   visit is dark too so brand and app agree until someone chooses otherwise.
   ───────────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  --media-edge: rgba(0, 0, 0, .10);   /* pure black, not the warm line: see --media-edge above */
  --bg:          #f7f2ec;
  --bg-glow:     transparent;
  --surface:     #ffffff;
  --surface-2:   #f2ece5;
  --surface-3:   #e9e1d8;

  --ink:    #17130f;
  --muted:  #5c534c;
  --faint:  #6b615a;

  --line:        rgba(23, 19, 15, .10);
  --line-strong: rgba(23, 19, 15, .18);

  --accent:       #ff5c35;   /* the fill keeps the brand value in both themes */
  --accent-2:     #e8461c;
  --accent-ink:   #170b06;
  --accent-soft:  rgba(255, 92, 53, .12);
  --accent-line:  rgba(255, 92, 53, .50);
  --accent-text:  #c2340f;   /* 5.0:1 on paper — the fill colour would be 2.8:1 */
  --grad:         #ff5c35;

  --shadow:        0 1px 2px rgba(23, 19, 15, .06), 0 6px 16px -8px rgba(23, 19, 15, .16);
  --shadow-lg:     0 18px 40px -24px rgba(23, 19, 15, .35);
  --shadow-accent: none;
  --topbar-bg:     rgba(247, 242, 236, .82);
  --focus:         #0a7ea4;
  --shadow-sm:     0 1px 2px rgba(23, 19, 15, .12);
  --clip-bg:       #efe8e0;
  /* semantic states need light values too, or any shared component drags 1.8:1 text onto paper */
  --ok:            #05603a;
  --warn:          #8a5300;
  --err:           #b42318;
  --danger:        #b42318;
  --accent-hover:  #e84a25;
  --accent-active: #c2340f;
}
/* the base rule already uses --accent-ink (6.3:1); the light override made it 3.07:1 */

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

body {
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: var(--bg);
  /* No atmospheric gradient. Depth here comes from the surface ramp and from hairlines, which
     survive a screenshot, a re-encode and a light-mode screenshot tool — a violet bloom does not,
     and it is the single most recognisable "AI product template" tell there is. */
  min-height: 100vh;
}

button { font: inherit; cursor: pointer; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
/* readable wrapping: balance heading lines, avoid body orphans */
/* DISPLAY vs BODY. Headings take the grotesque with negative tracking (at 32px+ the default
   spacing reads loose); everything else stays humanist at normal tracking. The two never mix. */
/* Display face on the LARGE headings only. h3 is a 17px sub-head in this product, and a display
   grotesque at 17px is a costume, not a voice: measured, 9 of 23 headings were being set in it at
   half the size the face is drawn for. Those go back to the body family at 500. */
h1 { text-wrap: balance; font-family: var(--font-display); letter-spacing: var(--track-6xl); }
h2 { text-wrap: balance; font-family: var(--font-display); letter-spacing: var(--track-4xl); }
/* The display face runs ~24% wider than the one it replaced (measured across 23 real headings in
   three locales), so studio headings that used to hold one line broke into two on a phone — and
   Ukrainian and Russian broke first. Inside the app, panel headings take the body family: they are
   labels for controls, not a voice. */
.screen-title, .tool-panel h2, .panel-pop h2, .drawer-head h2, .admin-card h2 {
  font-family: var(--font); font-weight: 600; letter-spacing: var(--track-md);
}
@media (max-width: 480px) { .screen-title { font-size: clamp(20px, 6vw, 26px); } }
/* h3 is a 17px sub-head here: body family, and NO negative tracking at that size */
h3 { text-wrap: balance; font-family: var(--font); font-weight: 500;
     letter-spacing: var(--track-md); }
.eyebrow { letter-spacing: var(--track-eyebrow); }
p, .sub, .hint { text-wrap: pretty; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* thin custom scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }

.hidden { display: none !important; }
.spacer { flex: 1; }

/* ----- eyebrow / section labels -------------------------------------------- */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  font-weight: 600;
  color: var(--faint);
}

/* ==========================================================================
   Top bar
   ========================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 14px clamp(14px, 4vw, 30px);
  /* Per-theme, not a hardcoded dark wash: on paper the old value painted a near-black bar with
     unreadable navigation over a light page. Seen on the deployed light theme, not guessed. */
  background: var(--topbar-bg);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.brand .dot {
  width: 26px; height: 26px; border-radius: 8px; background: var(--grad);
  box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255, 255, 255, .35);
  position: relative;
}
.brand .dot::after {
  content: "▶"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 10px; color: var(--accent-ink); padding-left: 2px;
}
.brand b { font-weight: 600; }
.brand .sub { color: var(--faint); font-weight: 500; font-size: 13px; letter-spacing: 0; }

.icon-btn {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius-sm); padding: 9px 13px; color: var(--ink);
  display: inline-flex; align-items: center; gap: 7px; font-weight: 500; font-size: 14px;
  transition: border-color .15s, background .15s, transform .1s, color .15s;
}
.icon-btn:hover { border-color: var(--accent-line); background: var(--surface-3); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.icon-btn:active { transform: translateY(0) scale(.96); box-shadow: none; }

.topbar .icon-btn { border-color: transparent; background: transparent; color: var(--muted); padding: 8px 12px; }
.topbar .icon-btn:hover { background: var(--surface-2); color: var(--ink); box-shadow: none; transform: none; }
.topbar .icon-btn[data-icon] .ic-host { color: var(--muted); transition: color .15s; }
.topbar .icon-btn[data-icon]:hover .ic-host { color: var(--ink); }

.group-title { font-size: 12px; font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px 0; opacity: 0.8; }

/* ==========================================================================
   Layout
   ========================================================================== */
main { max-width: 1120px; margin: 0 auto; padding: clamp(18px, 4vw, 40px) clamp(14px, 4vw, 32px); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.pad { padding: clamp(18px, 3.2vw, 30px); }
.stack > * + * { margin-top: 22px; }

.screen-title { font-size: 30px; line-height: 1.15; font-weight: 600; margin: 6px 0 4px; letter-spacing: -.03em; }
.screen-sub { color: var(--muted); margin: 0 0 4px; font-size: 14px; }

label.field, .field {
  display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500;
  color: var(--muted); letter-spacing: .01em;
}
.hint { color: var(--faint); font-size: 13.5px; margin: 8px 0 0; line-height: 1.5; }
.hint code, code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: .9em; }

.row { display: flex; gap: 20px; flex-wrap: wrap; }
.row > .col { flex: 1 1 180px; min-width: 0; }
.form-divider { height: 1px; background: var(--line); margin: 24px 0; border: none; }

/* ==========================================================================
   Form controls (themed globally so JS-built nodes inherit)
   ========================================================================== */
textarea, select, input.text,
input[type="text"], input[type="number"], input[type="password"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  background: var(--surface-2);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
  appearance: none;
}
textarea { resize: vertical; line-height: 1.55; }
textarea::placeholder, input::placeholder { color: var(--faint); }

select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px; cursor: pointer;
}
select option { background: var(--surface); color: var(--ink); }

textarea:focus, select:focus, input:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--surface-2);
}
:focus-visible { outline: none; }
.icon-btn:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible,
.tool-btn:focus-visible, .segmented button:focus-visible, .seg2 button:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent-line);
}

#script {
  min-height: 172px; font-size: 16px; padding: 15px 17px; border-radius: var(--radius);
}

/* color input (overlay editor) */
input[type="color"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 40px; padding: 4px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
input[type="range"] { accent-color: var(--accent); width: 100%; }

/* segmented controls */
.segmented, .seg2 {
  display: inline-flex; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 4px; gap: 4px;
}
.seg2 { display: flex; width: 100%; }
.segmented button, .seg2 button {
  border: 0; background: transparent; color: var(--muted);
  padding: 9px 18px; border-radius: 8px; /* concentric: 12px group − 4px pad */ font-weight: 600; font-size: 14px;
  transition: color .15s, background .15s, box-shadow .15s; white-space: nowrap;
}
.seg2 button { flex: 1; }
.segmented button:hover, .seg2 button:hover { color: var(--ink); }
.segmented button[aria-pressed="true"], .seg2 button[aria-pressed="true"] {
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-strong);
}

/* toggle */
.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 14px; font-weight: 600; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .track { width: 44px; height: 26px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-strong); position: relative; transition: background .18s, border-color .18s; flex: 0 0 auto; }
.toggle .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.toggle input:checked + .track { background: var(--accent); border-color: transparent; }
.toggle input:checked + .track::after { transform: translateX(18px); }
.toggle input:focus-visible + .track { box-shadow: 0 0 0 3px var(--accent-soft); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-primary {
  width: 100%; border: 0; border-radius: var(--radius); padding: 15px 20px;
  background: var(--grad); color: var(--accent-ink); font-weight: 600; font-size: 15.5px;
  letter-spacing: .01em; box-shadow: var(--shadow-accent);
  transition: transform .12s, box-shadow .15s, filter .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
/* Hover and active are the accent's OWN tints, not a coloured bloom and not a leftover from the
   previous palette — these two carried rgba(109,94,252) (indigo) under an orange button. */
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
/* .btn-ghost, .icon-btn and .tool-btn all scale on press; the PRIMARY button — the one every
   visitor actually taps — was the only one that just sat there. 0.96, same as the rest. */
.btn-primary:active { background: var(--accent-active); transform: translateY(0) scale(.96); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; filter: saturate(.6); }

.btn-ghost {
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink);
  border-radius: var(--radius-sm); padding: 11px 16px; font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px; transition: border-color .15s, background .15s, transform .1s;
}
.btn-ghost:hover { border-color: var(--accent-line); background: var(--surface-3); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.btn-ghost:active { transform: translateY(0) scale(.96); box-shadow: none; }
/* post-save confirmation: green check + label, button held disabled for ~10s */
.btn-ghost.saved-ok, .btn-ghost.saved-ok:hover {
  color: var(--ok); border-color: rgba(52, 211, 153, .35); background: var(--ok-soft);
  cursor: default; opacity: 1; transform: none;
}

.disclosure-btn {
  background: none; border: 0; color: var(--accent); font-weight: 600; font-size: 14px;
  padding: 6px 0; display: inline-flex; gap: 7px; align-items: center; position: relative;
}
/* ~40px tap height for the text-only disclosure toggle */
.disclosure-btn::before { content: ""; position: absolute; inset: -4px 0; }
.disclosure-btn:hover { color: var(--accent-2); }
.disclosure-btn .caret { transition: transform .18s; display: inline-block; }
.disclosure-btn[aria-expanded="true"] .caret { transform: rotate(90deg); }

/* ==========================================================================
   AI scriptwriter block
   ========================================================================== */
.sw-block {
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 2.6vw, 22px);
  background: var(--surface-2);
  border-left: 3px solid var(--accent);   /* a spine, not a bloom: it survives a screenshot */
  position: relative; overflow: hidden;
}
.sw-head { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.sw-badge {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--grad); color: var(--accent-ink); font-size: 15px; box-shadow: var(--shadow-accent); flex: 0 0 auto;
}
.sw-title { font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.sw-block .seg2 { margin: 14px 0 14px; }
#sw-text { min-height: 96px; font-size: 15px; }
.sw-extra { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.sw-extra .col { flex: 1 1 150px; min-width: 0; }
#sw-status { display: flex; align-items: center; gap: 8px; margin-top: 12px; min-height: 18px; font-size: 13px; color: var(--muted); }
#sw-status.err { color: var(--danger); }
#sw-status.ok { color: var(--ok); }
.sw-actions { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.sw-actions .btn-primary { width: auto; padding: 12px 20px; }

/* ==========================================================================
   Advanced scenes
   ========================================================================== */
#advanced { margin-top: 14px; }
.scene-card {
  border: 1px solid transparent; border-radius: var(--radius-lg);
  padding: 18px; background: var(--surface-2); transition: border-color .15s, box-shadow .2s, transform .15s, background-color .2s;
  border-left: 3px solid var(--accent);
}
.scene-card:nth-child(even) {
  background: var(--surface);
  border-left-color: var(--accent-2);
}
.scene-card + .scene-card { margin-top: 18px; }
.scene-card:hover { border-color: var(--accent-line); background: var(--surface-3); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.scene-card.dragging { opacity: .4; box-shadow: var(--shadow-lg); }
.scene-card .scene-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.drag-handle { cursor: grab; color: var(--faint); font-size: 17px; padding: 0 4px; line-height: 1; }
.drag-handle:active { cursor: grabbing; }
.scene-num { font-weight: 600; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.scene-head select { max-width: 190px; }
.remove-x { margin-left: auto; border: 1px solid var(--line); background: var(--surface); color: var(--danger); font-weight: 600; font-size: 14px; width: 30px; height: 30px; border-radius: 8px; line-height: 1; transition: background .15s, border-color .15s; }
.remove-x:hover { background: var(--danger-soft); border-color: var(--danger); }
/* 40x40 hit area for the standalone scene-delete button (visual size stays 30px);
   NOT applied to the corner remove-x in .actor-cell/.lib-cell — it would overlap the cell's own click surface */
.scene-head .remove-x { position: relative; }
.scene-head .remove-x::before { content: ""; position: absolute; inset: -5px; }
/* uploaded-image previews: large enough to actually see the product/reference.
   Subtle white outline (dark UI) + concentric radius per the interface guidelines. */
.thumb { width: 124px; height: 124px; object-fit: cover; border-radius: 12px;
  outline: 1px solid rgba(255,255,255,.10); outline-offset: -1px;
  border: 1px solid var(--line-strong); margin-top: 10px; display: block; }
/* the generated/uploaded actor still — a 9:16 portrait card, clearly visible */
#actor-thumb img.thumb { width: 184px; height: 327px; max-width: none; max-height: none; }
input[type="file"] { font-size: 13px; color: var(--muted); }
input[type="file"]::file-selector-button { font: inherit; font-weight: 600; margin-right: 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; }
input[type="file"]::file-selector-button:hover { border-color: var(--accent-line); background: var(--surface-3); }

/* ==========================================================================
   Progress
   ========================================================================== */
.stages { display: flex; gap: 10px; margin: 20px 0; }
.stage {
  flex: 1; text-align: center; padding: 13px 6px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--faint); font-weight: 600; font-size: 13px;
  border: 1px solid var(--line); position: relative;
  transition: background .25s, color .25s, border-color .25s;
}
.stage::before { content: "●"; display: block; font-size: 9px; margin-bottom: 5px; opacity: .5; }
.stage.active { background: var(--accent-soft); color: var(--accent-2); border-color: var(--accent-line); }
.stage.active::before { content: "◌"; opacity: 1; animation: pulse 1.2s ease-in-out infinite; }
.stage.done { background: var(--ok-soft); color: var(--ok); border-color: rgba(52,211,153,.35); }
.stage.done::before { content: "✓"; opacity: 1; }
@keyframes pulse { 50% { opacity: .35; } }

.bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
.bar > i { display: block; height: 100%; width: 0%; background: var(--grad); border-radius: 999px; transition: width .5s ease; }
.progress-text { margin-top: 14px; color: var(--muted); display: flex; align-items: center; gap: 9px; font-size: 14px; font-variant-numeric: tabular-nums; }

.error-box { background: var(--danger-soft); border: 1px solid rgba(248,113,113,.35); color: #fecaca; border-radius: var(--radius); padding: 16px; }
.error-box .err-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* skeleton shimmer */
.skeleton { background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: 8px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ==========================================================================
   Result / editor
   ========================================================================== */
.result-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.editor { display: flex; gap: 30px; align-items: flex-start; }
.editor .preview-col { flex: 0 0 auto; }
.editor .tools-col { flex: 1; min-width: 0; }

/* phone / reel device frame */
.device {
  position: relative; width: 300px; padding: 11px; border-radius: var(--radius-xl);
  background: var(--surface-3);      /* flat, warm ramp — the gradient was the last one left */
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
}
.device::before { /* speaker / notch */
  content: ""; position: absolute; top: 19px; left: 50%; transform: translateX(-50%);
  width: 52px; height: 5px; border-radius: 99px; background: var(--line-strong); z-index: 3;
}
.stage-wrap {
  position: relative; width: 100%; aspect-ratio: 9 / 16; background: #000;
  border-radius: 15px; /* concentric: 26px device − 11px pad */ overflow: hidden; border: 1px solid #000;
}
.stage-wrap video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.overlay-layer { position: absolute; inset: 0; pointer-events: none; }
.ov-box {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
  background: var(--caption-chip); color: #111; font-weight: 600; font-size: 13px;
  padding: 6px 10px; border-radius: 8px; cursor: grab; max-width: 84%;
  box-shadow: 0 2px 10px rgba(0,0,0,.4); white-space: pre-wrap; text-align: center; line-height: 1.25;
}
.ov-box:active { cursor: grabbing; }
.ov-box.sel { outline: 2px solid #fff; box-shadow: 0 0 0 4px var(--accent-soft), 0 2px 10px rgba(0,0,0,.4); }
.ov-box .ov-del { position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--surface); background: var(--danger); color: #fff; font-size: 11px; line-height: 16px; padding: 0; }

.device-caption { text-align: center; color: var(--faint); font-size: 12px; margin-top: 14px; letter-spacing: .02em; }

/* toolbar */
.toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.tool-btn {
  border: 1px solid transparent; background: var(--surface-2); border-radius: var(--radius);
  padding: 14px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  min-width: 104px; transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
}
.tool-btn:hover { border-color: var(--accent-line); background: var(--surface); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
.tool-btn:active { transform: translateY(0) scale(.96); box-shadow: none; }
.tool-btn[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); }
.tool-btn .ti-ic { color: var(--muted); }
.tool-btn[aria-pressed="true"] .ti-ic { color: var(--accent); }
.tool-btn.download .ti-ic { color: var(--accent-ink); }
.tool-btn .t-name { font-weight: 600; font-size: 14px; }
.tool-btn .t-cost { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-variant-numeric: tabular-nums; }
.tool-btn .t-cost.free { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.tool-btn .t-cost.slow { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.tool-btn.download { background: var(--grad); color: var(--accent-ink); border-color: transparent; box-shadow: var(--shadow-accent); }
.tool-btn.download .t-cost { color: var(--accent-ink); background: rgba(255,255,255,.18); border-color: transparent; }
.tool-btn.download:hover { filter: brightness(1.05); }

.tool-panel { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--surface-2); }
.tool-panel h3 { margin: 0 0 14px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.field-row { margin-bottom: 14px; }
.field-row:last-of-type { margin-bottom: 0; }

/* ==========================================================================
   Toast + spinner
   ========================================================================== */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(8px);
  background: var(--surface); color: var(--ink); padding: 12px 18px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); z-index: 60; font-size: 14px;
  max-width: 90vw; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
}
.toast:not(.hidden) { opacity: 1; transform: translateX(-50%) translateY(0); }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: spin .8s linear infinite; vertical-align: -3px; flex: 0 0 auto; }
.spinner.dark { border-color: var(--line-strong); border-top-color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Settings popover + drawer + backdrop
   ========================================================================== */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(12,11,10,.72); z-index: 40; }
.panel-pop { position: fixed; top: 70px; right: clamp(8px, 4vw, 24px); width: min(380px, 92vw); z-index: 50; padding: 22px; }
.panel-pop h3 { margin: 0 0 14px; font-size: 16px; font-weight: 600; }

.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(400px, 94vw);
  background: var(--surface); z-index: 50; box-shadow: var(--shadow-lg);
  padding: 22px; overflow-y: auto; border-left: 1px solid var(--line-strong);
}
.drawer-head { display: flex; align-items: center; margin-bottom: 18px; }
.drawer-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.vid-item { display: flex; align-items: center; gap: 11px; padding: 14px; border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--surface-2); transition: border-color .2s, background .2s, transform .15s; }
.vid-item:hover { border-color: var(--accent-line); background: var(--surface); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.vid-item + .vid-item { margin-top: 11px; }
.vid-item .vi-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; }
.vid-item .vi-meta { font-size: 12px; color: var(--faint); margin-top: 2px; }
.empty-state { text-align: center; padding: 36px 16px; color: var(--faint); }
.empty-state .ico { font-size: 30px; opacity: .6; display: block; margin-bottom: 10px; }

/* entrance animation for screens */
.screen-enter { animation: rise .35s cubic-bezier(.16,.84,.44,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 760px) {
  .editor { flex-direction: column; align-items: stretch; }
  .editor .preview-col { align-self: center; }
  .device { width: min(300px, 86vw); }
  .stages { gap: 6px; }
  .stage { font-size: 11px; padding: 11px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   Cost pill ("собівартість") — derived current production cost
   ========================================================================== */
.cost-box { position: relative; }
.cost-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.cost-pill:hover { background: var(--surface-3); }
.cost-pill .cost-label { color: var(--muted); font-weight: 600; }
.cost-pill .cost-amount { color: var(--ink); font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.cost-pill .cost-caret { color: var(--faint); font-size: 11px; }
.cost-detail {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  width: 280px; max-width: 78vw; padding: 12px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.cost-detail .cost-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cost-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.cost-row span:first-child { color: var(--muted); }
.cost-row span:last-child { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cost-note { color: var(--faint); font-size: 11px; line-height: 1.45; margin: 0; }
/* spend journal (cost-modal): one record per line, no wrap, aligned numbers */
.cj-row { display: flex; align-items: baseline; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--line); white-space: nowrap; font-size: 13px; }
.cj-row:last-child { border-bottom: 0; }
.cj-left { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.cj-left b { flex: 0 0 auto; color: var(--ink); font-weight: 600; }
.cj-model { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.cj-right { flex: 0 0 auto; color: var(--faint); font-variant-numeric: tabular-nums; }
.cj-right .cj-cost { color: var(--ink); font-weight: 600; }
/* beta tools gate: BETA_FEATURES=0 -> the server reports beta off -> body.beta-off hides them */
.beta-off .beta-only { display: none !important; }

/* ── redesign: language switch, stepper, source cards, brief bar ─────────── */
.lang-switch { display: inline-flex; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 2px; margin-right: 6px; }
.lang-switch button { border: 0; background: transparent; color: var(--muted); font: 600 11.5px/1 var(--font); padding: 6px 9px; border-radius: 999px; cursor: pointer; position: relative; }
/* ~40px tap height; vertical-only so adjacent language pills don't overlap */
.lang-switch button::before { content: ""; position: absolute; inset: -9px 0; }
.lang-switch button[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); }

.step-label { font: 700 13px/1.2 var(--font); letter-spacing: .02em; color: var(--accent); text-transform: uppercase; margin: 0 0 4px; }

.source-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 14px; }
@media (max-width: 720px) { .source-cards { grid-template-columns: 1fr; } }
.source-card { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 20px; cursor: pointer;
  background: var(--surface-2); border: 1px solid transparent; border-radius: var(--radius-lg); transition: border-color .2s, transform .15s, box-shadow .2s; }
.source-card:hover { background: var(--surface); border-color: var(--accent-line); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.source-card:active { transform: translateY(0) scale(.98); }
.sc-title { font: 600 16px/1.2 var(--font); color: var(--ink); letter-spacing: -0.01em; }
.sc-desc { font-size: 13.5px; line-height: 1.5; color: var(--faint); margin-top: 4px; }

.src-panel { margin-top: 4px; }
.brief-bar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; margin-top: 14px; margin-bottom: 18px; }
.io-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.io-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }
.log-summary { font-size: 12.5px; color: var(--muted); padding: 8px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 10px; font-variant-numeric: tabular-nums; }

/* projects home + studio header */
.proj-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 14px; }
.proj-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; align-items: start; }
.proj-card { border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--surface-2); transition: border-color .2s, transform .15s, box-shadow .2s; }
.proj-card:hover { border-color: var(--accent-line); background: var(--surface); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
/* staggered entrance */
.proj-list .proj-card { animation: rise .32s cubic-bezier(.16,.84,.44,1) both; }
.proj-list .proj-card:nth-child(1) { animation-delay: 0ms; }
.proj-list .proj-card:nth-child(2) { animation-delay: 40ms; }
.proj-list .proj-card:nth-child(3) { animation-delay: 80ms; }
.proj-list .proj-card:nth-child(4) { animation-delay: 120ms; }
.proj-list .proj-card:nth-child(5) { animation-delay: 160ms; }
.proj-list .proj-card:nth-child(6) { animation-delay: 200ms; }
.proj-list .proj-card:nth-child(n+7) { animation-delay: 240ms; }
/* skeleton placeholder card (shown while the list loads) */
.proj-card.is-skeleton { pointer-events: none; animation: none; }
.proj-card.is-skeleton .proj-cover { background: var(--surface-2); }
.sk-line { height: 11px; border-radius: 6px; margin-top: 9px; }
.sk-line.w60 { width: 60%; } .sk-line.w40 { width: 40%; }
/* richer empty state */
.empty-state .ico .ic { width: 30px; height: 30px; }
.empty-state .es-sub { font-size: 13px; color: var(--faint); margin: 6px 0 16px; max-width: 360px; margin-inline: auto; }
.proj-cover { position: relative; aspect-ratio: 9 / 16; background: var(--surface); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.proj-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proj-cover-ph { font-size: 30px; opacity: .4; }
.proj-card-body { padding: 10px 11px 11px; }
.proj-card-body .vi-title { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-card-body .vi-meta { font-size: 11px; color: var(--faint); margin-top: 3px; }
.proj-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 12px; }
.btn-ghost.sm, .icon-btn.sm { width: auto; padding: 6px 11px; font-size: 12.5px; }
.proj-menu-wrap { position: relative; }
.proj-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20;
  min-width: 168px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-3); border: 1px solid var(--line-strong);
  border-radius: var(--radius); /* concentric: 8px items + 6px pad */ box-shadow: var(--shadow-lg); }
.proj-menu-item { text-align: left; width: 100%; padding: 9px 11px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); font-size: 13px; font-weight: 500; }
.proj-menu-item:hover { background: var(--surface); }
.proj-menu-item:last-child { color: var(--danger); }

/* generation splash overlay */
.gen-overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: var(--space-4); background: rgba(8,9,12,.82);
  animation: gen-fade .2s ease both; }
@keyframes gen-fade { from { opacity: 0; } to { opacity: 1; } }
.gen-splash { position: relative; width: 100%; max-width: 640px; text-align: center; box-shadow: var(--shadow-lg); }
.gen-splash h2 { font-size: 20px; font-weight: 700; margin: var(--space-4) 0 0; letter-spacing: -.02em; }
.gen-splash .hint { margin-top: var(--space-2); }
.gen-spinner { width: 54px; height: 54px; margin: 0 auto; border-radius: 50%;
  border: 3px solid var(--line-strong); border-top-color: var(--accent); animation: gen-spin .8s linear infinite; }
@keyframes gen-spin { to { transform: rotate(360deg); } }
.gen-actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; margin-top: var(--space-4); }
@media (prefers-reduced-motion: reduce) { .gen-spinner { animation-duration: .001ms; } }

/* admin: reassign-owner picker (reuses the .gen-overlay backdrop) */
.reassign-card { max-width: 460px; text-align: left; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: var(--space-4); }
.reassign-card h2 { margin: 0; text-align: left; }
.reassign-card .hint { margin: var(--space-1) 0 var(--space-3); word-break: break-all; }
.reassign-search { width: 100%; box-sizing: border-box; margin-bottom: var(--space-2);
  padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink); }
.reassign-search:focus { outline: none; border-color: var(--accent-line, var(--accent)); }
.reassign-list { max-height: 46vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.reassign-item { display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3);
  border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent;
  color: inherit; font: inherit; cursor: pointer; }
.reassign-item:hover:not(:disabled) { background: var(--surface-3); border-color: var(--line-strong); }
.reassign-item:disabled { opacity: .5; cursor: default; }

/* a render that is being replaced: visibly not-current, but still there as a reference
   (tearing the player down made fast re-fetches flash an empty box) */
#result-video.stale { opacity: .35; filter: grayscale(.4); pointer-events: none; transition: opacity .15s; }

/* waiting state for the rendered clip: shown INSTEAD of the previous render while the new
   blob downloads, so a stale video is never mistaken for the fresh one */
.result-loading { display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4); }
.result-loading .gen-spinner { width: 34px; height: 34px; border-width: 3px; }
.result-loading .hint { margin: 0; }

/* sub-tabs inside a tab: lighter than the main tab bar, so the hierarchy reads correctly */
.subtabs { margin-bottom: var(--space-3); }
.subtabs .tab { font-size: 13px; padding: 7px 14px; }

/* ad copy: budget inputs + measured variants */
.adcopy-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3); }
.adcopy-controls .field { margin: 0; }
.adcopy-controls input { width: 84px; }
.adcopy-row { display: flex; align-items: flex-start; gap: var(--space-2); padding: 7px 0;
  border-bottom: 1px solid var(--line); }
.adcopy-row:last-child { border-bottom: 0; }
.adcopy-count { flex: 0 0 auto; min-width: 40px; font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--faint); padding-top: 2px; }
.adcopy-count.over { color: var(--warn); font-weight: 600; }
.adcopy-text { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.45;
  word-break: break-word; }

/* creative bookkeeping chips on a render row: clickable state, not decoration */
.ver-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip-btn { cursor: pointer; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--muted); font: 600 11px/1 var(--font); padding: 5px 9px; border-radius: 999px;
  transition: border-color .15s, color .15s, background .15s; }
.chip-btn:hover { border-color: var(--accent-line); color: var(--ink); }
.chip-btn.chip-on { color: #4ade80; border-color: rgba(74, 222, 128, .45); background: rgba(74, 222, 128, .10); }
/* a verdict is set but its spend is missing — the data is not usable until this is filled */
.chip-btn.chip-need { color: var(--warn); border-color: rgba(251, 191, 36, .5);
  background: var(--warn-soft); border-style: dashed; }
.chip-btn.chip-off { color: var(--danger); border-color: rgba(248, 113, 113, .45); background: var(--danger-soft); }

/* admin: credit ledger modal (reuses .gen-overlay + .reassign-card/.reassign-list) */
.led-sums { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-3);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.led-sum { display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; color: var(--muted); }
.led-sum b { font-size: 14.5px; font-variant-numeric: tabular-nums; color: var(--ink); }
.led-row { padding: 9px 2px; border-bottom: 1px solid var(--line); }
.led-row:last-child { border-bottom: 0; }
.led-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.led-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.led-plus { color: var(--ok); }
.led-minus { color: var(--muted); }
.led-meta { font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.led-note { font-size: 12px; color: var(--ink); margin-top: 3px; word-break: break-word; }
.led-foot { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-top: var(--space-3); }

/* voice preview player (native audio, dark via color-scheme) */
.voice-audio { width: 100%; height: 34px; margin-top: var(--space-2); color-scheme: dark; }

/* voice browser (modal results list) */
.vb-results { margin-top: var(--space-3); max-height: 50vh; overflow: auto; }
.vb-row { display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3); padding: var(--space-2) var(--space-1);
  border-bottom: 1px solid rgba(255, 255, 255, .08); }
.vb-info { display: flex; flex-direction: column; min-width: 0; }
.vb-info b { font-weight: 600; }
.vb-info .hint { text-transform: capitalize; }
.vb-actions { display: flex; gap: var(--space-2); align-items: center; flex: none; }

/* inline (Lucide) icons */
/* The UA rule for [hidden] is display:none at the LOWEST specificity, so any component that sets
   its own display wins and the element stays on screen. That is not academic: the waitlist's
   "open the brief template" button is a .btn-primary (display:flex) marked hidden until an address
   is submitted — it was visible from the moment the dialog opened, handing over the asset the page
   asks for an email in exchange for. One rule, applied once, for every hidden element on the site. */
[hidden] { display: none !important; }

.ic { display: block; }
.ic-host { display: inline-flex; align-items: center; }
/* Hold the icon's space BEFORE icons.js runs. Without this every [data-icon] button is exactly one
   icon narrower at first paint, which is enough to decide whether the topbar wraps to two rows —
   measured 0.28 of CLS at 320px, the single largest shift on the landing. The placeholder is
   removed by the class icons.js sets once the real <svg> is in, so nothing is double-spaced.
   18px is the default size; the handful of call sites that pass data-icon-size are off by a few
   pixels for one frame, which is not enough to re-wrap anything. */
[data-icon]:not(.ic-ready)::before {
  content: ""; display: inline-block; inline-size: 18px; block-size: 18px; flex: none;
}
button[data-icon], a[data-icon] { display: inline-flex; align-items: center; gap: var(--space-2); }
.icon-btn[data-icon] .ic-host { color: var(--muted); }
.icon-btn[data-icon]:hover .ic-host { color: var(--ink); }
.source-card .sc-ic { color: var(--accent); margin-bottom: var(--space-2); }
.tool-main .sc-ic { color: var(--accent); }
.proj-cover-ph .ic { width: 30px; height: 30px; }

/* ==========================================================================
   Studio page (/studio) — uses the shared design system
   ========================================================================== */
.studio-wrap { max-width: 1160px; margin: 0 auto; padding: clamp(18px,4vw,40px) clamp(14px,4vw,32px) 96px; }
.studio-wrap > .card { margin-bottom: var(--space-4); }
.tab-panel > .card { margin-bottom: var(--space-4); }
/* Setup tab: two-column canvas — core inputs (left) stay the primary path,
   enhancements (right) remain in view via sticky, so no context is lost */
.setup-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-4); align-items: start; }
.setup-col > .card { margin-bottom: var(--space-4); }
.setup-col-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 var(--space-2); }
.setup-col-extras { position: sticky; top: 76px; } /* 76 = sticky topbar (~56) + breathing room */
@media (max-width: 1023px) {
  .setup-grid { grid-template-columns: 1fr; }
  .setup-col-extras { position: static; }
}
/* stage tabs (Setup / Scenes / Generate & versions) */
.tabbar { display: flex; gap: var(--space-1); margin-bottom: var(--space-4);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 4px; }
.tabbar .tab { flex: 1; padding: 10px 12px; border: 0; border-radius: 6px; /* concentric: 10px bar − 4px pad */
  background: transparent; color: var(--muted); font-weight: 600; font-size: 14px;
  white-space: nowrap; transition: color .15s, background .15s; }
.tabbar .tab:hover { color: var(--ink); }
.tabbar .tab.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.studio-wrap h2 { font-size: 18px; font-weight: 700; margin: 0 0 var(--space-1); letter-spacing: -.01em; }
.studio-wrap .sub { color: var(--muted); font-size: 13px; margin: 0 0 var(--space-4); }
.modelrow { gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
/* the three translate controls (scope + language + button) stay together as one right-aligned group
   on one line, wrapping as a unit — instead of the language/button dropping to a separate line */
.translate-group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.translate-group select.text { width: auto; }
.thumbrow { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.thumbcell { position: relative; }
.actor-gallery { align-items: center; }
/* selectable actor thumbnail (gallery + per-scene picker) */
.actor-cell { position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden;
  border: 2px solid var(--line); cursor: pointer; display: flex; align-items: center;
  justify-content: center; background: var(--surface); flex: none;
  transition: border-color .15s, transform .12s cubic-bezier(0.2, 0, 0, 1); }
.actor-cell.on { border-color: var(--accent, #ff5c35); }
.actor-cell:active { transform: scale(0.96); }   /* tactile feedback on tap (never below 0.95) */
.actor-cell img.thumb { width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover; margin: 0; border: 0; border-radius: 0; }
.actor-cell .actor-ph { color: var(--faint, #7a8092); font-weight: 600; }
.actor-cell .remove-x { position: absolute; top: 0; right: 0; width: 18px; height: 18px;
  font-size: 11px; border-radius: 0 0 0 8px; margin: 0; }
/* the actor PALETTE shows real people — give those cells a readable 9:16 portrait size
   (the compact per-scene pickers keep the small default above). */
.actor-gallery .actor-cell { width: 76px; height: 116px; border-radius: 12px; }
.actor-gallery .actor-cell .actor-ph { font-size: 18px; }
.actor-gallery .actor-cell .remove-x { width: 22px; height: 22px; font-size: 13px; }

/* named-location palette cell: a thumbnail + an @name input + remove */
.loc-cell { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); }
.loc-cell img.thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.loc-cell .loc-name { width: 110px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg, #fff); font-size: 13px; }
.loc-cell .remove-x { width: 24px; height: 24px; font-size: 12px; margin: 0; }
/* per-scene location PICKER: a thumbnail tile with the @name as a readable caption UNDERNEATH
   (never overlaid on the image — that clipped the name over the photo). */
.loc-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.loc-pick-name { max-width: 72px; font-size: 10px; line-height: 1.2; text-align: center;
  color: var(--faint, #7a8092); word-break: break-word; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* "regenerate but keep the next continued scene" modifier next to the scene's regen button */
.keepnext { display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
  color: var(--faint, #7a8092); cursor: pointer; user-select: none; white-space: nowrap; }
.keepnext input { margin: 0; cursor: pointer; }
/* @mention autocomplete popover */
.mention-pop { background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px; max-height: 240px; overflow: auto; }
.mention-it { padding: 6px 10px; border-radius: 6px; /* concentric: 10px pop − 4px pad */ font-size: 13px; cursor: pointer; white-space: nowrap; }
.mention-it:hover { background: var(--accent-soft, #eef0ff); }

/* media library picker modal */
.lib-btns { display: inline-flex; gap: 6px; margin-left: 6px; }
.lib-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 100;
  display: flex; align-items: center; justify-content: center; }
.lib-panel { background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 14px;
  width: min(680px, 92vw); max-height: 82vh; overflow: auto; padding: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.lib-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.lib-cell { position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  cursor: pointer; background: var(--bg, #fff); display: flex; flex-direction: column; }
.lib-cell img.thumb { width: 100%; height: 110px; object-fit: cover; }
.lib-cell:hover { border-color: var(--accent, #ff5c35); }
.lib-cell .lib-name { font-size: 12px; padding: 5px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-cell .remove-x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; font-size: 12px; margin: 0; }
.lib-cell .lib-name-input { width: 100%; border: none; border-top: 1px solid var(--line); padding: 5px 7px;
  font-size: 12px; background: transparent; color: inherit; }
.lib-manager { width: min(900px, 94vw); }
/* yes/no confirm dialog */
.confirm-panel { background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 14px;
  width: min(420px, 92vw); padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.confirm-danger { color: var(--danger, #d64545); border-color: var(--danger, #d64545); }
/* 4-keyframe variant picker: large 9:16 previews — click the photo to zoom, button to pick */
.variant-cell { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.variant-cell img { width: 150px; height: 267px; object-fit: cover; border-radius: 12px;
  border: 1px solid var(--line-strong); outline: 1px solid rgba(255,255,255,.10); outline-offset: -1px;
  cursor: zoom-in; display: block; }
.variant-cell .btn-primary { width: auto; }
/* version history rows */
.ver-row { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-1); border-bottom: 1px solid var(--line); }
.ver-row.on { background: var(--accent-soft); border-radius: var(--radius-sm); border-bottom-color: transparent; }
.ver-cover { width: 54px; height: 96px; flex: none; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface-2) center/cover no-repeat; }
.ver-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ver-info b { font-weight: 600; font-size: 14px; }
.ver-actions { display: flex; gap: var(--space-1); flex: none; }
/* "add scene here" bar rendered above the first scene and after every scene, so a new scene is
   inserted right where you click. The inter-scene bars are compact + muted so many of them don't
   overwhelm the list; they lift on hover to signal the insertion point. */
.scene-insert { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-2) 0; }
.scene-insert.compact { gap: 6px; margin: 6px 0; opacity: .45; transition: opacity .12s; }
.scene-insert.compact:hover { opacity: 1; }
.scene-insert.compact .btn-ghost.sm { padding: 4px 8px; font-size: 12px; }
/* actor-from-URL picker: selectable image cell (ring when chosen) */
/* Projects panel: budget strip + per-card spend/budget (real spend from cost ledgers) */
.spend-summary { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.spend-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; color: var(--muted); }
.spend-chip b { color: var(--ink); font-variant-numeric: tabular-nums; }
.proj-spend { display: flex; align-items: center; gap: var(--space-2); margin-top: 6px; }
.proj-spend-num { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.proj-budget-bar { flex: 1; height: 4px; min-width: 40px; border-radius: 2px;
  background: var(--surface-2); overflow: hidden; }
.proj-budget-bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent);
  transition: width .3s ease; }
.proj-budget-bar.over i { background: var(--warn); }
.user-row { margin: 4px 0; }
.user-balance { font-variant-numeric: tabular-nums; color: var(--ink); font-size: 14px; }

/* Admin panel */
.tnum { font-variant-numeric: tabular-nums; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 18px 20px; }
.stat-label { margin: 0 0 6px; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); }
.stat-value { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.02em;
  color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-hint { margin: 6px 0 0; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.admin-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.chip-on { color: #4ade80; border-color: rgba(74, 222, 128, .35); }
.chip-off { color: var(--warn); border-color: rgba(251, 191, 36, .35); }
.provider-list { display: flex; flex-direction: column; }
.provider-row { display: flex; justify-content: space-between; gap: var(--space-3);
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.provider-row:last-child { border-bottom: 0; }
.provider-row span { color: var(--muted); font-variant-numeric: tabular-nums; }
.price-input { width: 110px; text-align: right; padding: 8px 10px; }
.key-test { margin-left: 8px; }

.lib-cell.url-pick { cursor: pointer; border: 2px solid transparent; border-radius: 10px; position: relative; }
.lib-cell.url-pick.on { border-color: var(--accent, #6c5ce7); }
.url-pick-badge { position: absolute; top: 4px; left: 4px; font-size: 11px; padding: 2px 6px;
  border-radius: 6px; background: rgba(0,0,0,.7); color: #fff; pointer-events: none; }
/* segmented toggle (refined inset look, matches .segmented in the main app) */
.seg { display: inline-flex; gap: var(--space-1); flex-wrap: wrap; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px; margin-bottom: var(--space-3); }
.seg button { padding: 7px 14px; border-radius: 7px; /* concentric: 10px group − 3px pad */ border: 1px solid transparent; background: transparent;
  color: var(--muted); font-weight: 600; font-size: 13px; transition: background .15s, color .15s; }
.seg button.on { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
/* Solid, not glass. The site has ONE blurred surface — the topbar you scroll into; a second and a
   third turn a material decision into a default. Text ran under this bar and read through it. */
.gen-bar { position: sticky; bottom: 0; z-index: 5; background: var(--bg);
  border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0,0,0,.3);
  padding: var(--space-3) 0 calc(var(--space-3) + env(safe-area-inset-bottom)); margin-top: var(--space-2); }
@media (max-width: 520px) { .proj-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.studio-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.studio-name { flex: 1; min-width: 160px; max-width: 360px; }
.tool-tabs { display: flex; gap: 6px; }
.tool-tab { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); position: relative; }
/* ~40px tap height; vertical-only so neighbouring tabs (6px gap) don't overlap */
.tool-tab::before { content: ""; position: absolute; inset: -5px 0; }
.tool-tab.active { background: var(--surface-2); color: inherit; border-color: var(--line-strong); }
.studio-proj-name { font-weight: 600; font-size: 14px; color: var(--muted); }
#tool-cards .source-card { position: relative; }
#tool-cards .source-card.tool-main { border-color: var(--accent-line); background: var(--accent-soft); }
.sc-badge { position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 7px; }

.beats-block {
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  padding: 20px;
  background: 
 
    var(--surface-2);
  margin-top: 14px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s, filter 0.2s;
}
.beats-block:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-accent);
  filter: brightness(1.03);
}

.translate-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  margin-top: var(--space-4);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.translate-block .tb-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}
.translate-block .translate-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}




/* library scope badges (personal vs global items) */
.lib-scope-chip { position: absolute; top: 6px; left: 6px; font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.72); color: var(--accent-2);
  border: 1px solid var(--accent-line); pointer-events: none; }
.lib-cell { position: relative; }
.lib-scope-btn { margin-top: 4px; font-size: 11px; padding: 4px 8px; }

/* Creatives feed: one flat row per finished take. Deliberately dense — a buyer scans a batch of
   a dozen takes across projects, so the cover, the facts and the verdict chips must all be
   readable without opening anything. */
.cr-list { display: flex; flex-direction: column; gap: var(--space-2); }
.cr-card { display: flex; align-items: flex-start; gap: var(--space-3);
           padding: var(--space-2); border: 1px solid var(--line); border-radius: 10px;
           background: var(--surface-2); }
.cr-thumb { flex: 0 0 64px; width: 64px; height: 114px; border-radius: 6px; overflow: hidden;
            background: var(--surface); border: 1px solid var(--line); }
.cr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-body { flex: 1; min-width: 0; }
.cr-title { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis;
            white-space: nowrap; }
.cr-meta { color: var(--ink-dim); font-size: 12px; margin-top: 2px; }
@media (max-width: 640px) {
  .cr-card { flex-wrap: wrap; }
  .cr-thumb { flex-basis: 48px; width: 48px; height: 85px; }
}
/* the cover doubles as a play target: the creative is the VIDEO, the frame is just how you
   recognise it in a list */
.cr-thumb-play { cursor: pointer; position: relative; }
.cr-thumb-play:hover { border-color: var(--accent-line); }
.cr-thumb-play video { width: 100%; height: 100%; object-fit: cover; display: block; }