/* Factory · playful · colorful brand · Unbounded display + Plus Jakarta body */
:root {
  --bg: #FFF6EF; --surface: #fff; --ink: #1E1330; --ink-soft: #4a3f5a;
  --muted: #8a7c98; --line: rgba(30,19,48,.10); --line-strong: rgba(30,19,48,.18);
  --fg: #1E1330; --border: rgba(30,19,48,.14); --surface2: #FBEFE6; --surface-2: #FBEFE6;
  --accent: #FF2E7E; --accent-soft: #FFE0EC; --accent-deep: #c41f5f;
  /* Fun brand palette (from the website) */
  --pink: #FF2E7E; --violet: #7B3FF2; --sky: #2FA8FF; --tang: #FF7A1A; --teal: #12C2A0; --yellow: #FFC93C;
  --green: #12C2A0; --green-soft: #D6F7EF;
  --amber: #FF7A1A; --amber-soft: #FFE9D6;
  --purple: #7B3FF2; --purple-soft: #EDE5FF;
  --warn-bg: #FFF4DC; --warn-line: #FFC93C; --err-bg: #fff0f4; --err-line: #ffc6d8; --err-ink: #e5396b; --ph-bg: #FBEFE6;
  --serif: 'Unbounded', 'Plus Jakarta Sans', sans-serif;
  --sans: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --radius: 10px; --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(30,19,48,.05);
  --shadow-md: 0 6px 18px rgba(30,19,48,.08);
  --shadow-lg: 0 18px 44px -16px rgba(30,19,48,.18);
  --shadow-pop: 0 6px 0 -1px var(--accent-deep);
  --pop: cubic-bezier(.34,1.45,.64,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
a:focus-visible, button:focus-visible, select:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px;
}
html, body {
  font-family: var(--sans); font-size: 14px; line-height: 1.55;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  height: 100vh; overflow: hidden;
}
body {
  display: block;
  background:
    radial-gradient(900px 600px at 8% -5%, rgba(255,46,126,.10), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(123,63,242,.12), transparent 58%),
    radial-gradient(800px 600px at 50% 110%, rgba(47,168,255,.10), transparent 60%),
    linear-gradient(150deg, #FFE9F1 0%, #FFF6EF 44%, #EDE7FF 100%);
  background-attachment: fixed;
}

/* ── Floating brand (top-left) ─────────────────────────────────────────── */
.float-brand {
  position: fixed; top: 20px; left: 28px; z-index: 200;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.72); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 14px; padding: 8px 14px 8px 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
}
.float-brand .logo {
  width: 32px; height: 32px; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 400 18px/1 var(--serif); border-radius: 7px; flex-shrink: 0;
}
.float-brand .brand-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.float-brand .brand-sub { font: 500 9px/1.2 var(--mono); letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; margin-top: 2px; }

/* ── Floating topbar (top-right) ───────────────────────────────────────── */
.float-topbar {
  position: fixed; top: 20px; right: 28px; z-index: 200;
  display: flex; align-items: center; gap: 8px;
}
.float-topbar .status-pill {
  display: flex; align-items: center; gap: 7px;
  font: 600 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
  background: rgba(255,255,255,.72); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.9); border-radius: 100px;
  padding: 7px 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
}
.float-topbar .status-dot { width: 7px; height: 7px; background: var(--amber); border-radius: 50%; box-shadow: 0 0 0 2px rgba(168,107,0,.2); }
.float-topbar .status-pill.live .status-dot { background: var(--green); box-shadow: 0 0 0 2px rgba(45,106,79,.2); }
.float-topbar .status-pill.partial .status-dot { background: var(--purple); box-shadow: 0 0 0 2px rgba(124,58,237,.2); }
.float-topbar .btn-ghost {
  padding: 7px 10px; background: rgba(255,255,255,.72); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.9); color: var(--ink-soft);
  font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 10px; cursor: pointer; transition: 0.15s;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
}
.float-topbar .btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.float-topbar .mode-badge { margin: 0; }

/* ── Bottom dock nav ────────────────────────────────────────────────────── */
.sidebar {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 200; width: auto; max-width: 92vw;
  display: flex; flex-direction: row; align-items: center; gap: 4px;
  background: rgba(20,16,12,.88); backdrop-filter: blur(28px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px; padding: 8px 10px;
  box-shadow: 0 24px 60px -8px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04);
  color: #e8e4dc;
}
.nav { display: flex; flex-direction: row; align-items: center; gap: 2px; padding: 0; flex: 1; }
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 14px; border-radius: 14px;
  color: rgba(255,255,255,.5); text-decoration: none;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  transition: all 0.18s cubic-bezier(0.34,1.56,0.64,1);
  white-space: nowrap; flex-shrink: 0;
}
.nav-item:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); transform: translateY(-2px) scale(1.04); }
.nav-item.active { background: var(--accent); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(255,46,126,.45); }
.nav-item.mode02:hover { background: rgba(124,58,237,.15); color: rgba(200,180,255,.9); }
.nav-item.mode02.active { background: var(--violet); box-shadow: 0 4px 14px rgba(123,63,242,.45); }
.nav-icon { font-size: 20px; line-height: 1; }
.nav-label { font-size: 9px; font-weight: 600; letter-spacing: 0.05em; line-height: 1; }
.nav-divider { width: 1px; height: 32px; background: rgba(255,255,255,.1); margin: 0 6px; flex-shrink: 0; }

/* Dock tail (help + logout) */
.dock-tail {
  display: flex; align-items: center; gap: 4px;
  border-left: 1px solid rgba(255,255,255,.1); padding-left: 10px; margin-left: 4px;
}
.dock-help {
  width: 34px; height: 34px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font: 700 14px/1 var(--sans); color: rgba(255,255,255,.4);
  text-decoration: none; transition: 0.15s;
}
.dock-help:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); }

/* Mode badge */
.mode-badge { font: 600 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; display: inline-flex; align-items: center; }
.mode-badge.demo { background: var(--amber-soft); color: var(--amber); }
.mode-badge.live { background: var(--green-soft); color: var(--green); }
.mode-badge.partial { background: var(--purple-soft); color: var(--purple); }

/* Feature badges (captions / music status on finalize result card) */
.feature-badge { display: inline-flex; align-items: center; gap: 4px; font: 600 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 8px; border-radius: 5px; }
.feature-badge.ok   { background: var(--green-soft); color: var(--green); border: 1px solid rgba(45,154,95,.25); }
.feature-badge.warn { background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(168,107,0,.25); }
.feature-badge.skip { background: var(--surface-2,#1a1a2e); color: var(--muted,#888); border: 1px solid var(--border); }
.feature-badges-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ── Main canvas ────────────────────────────────────────────────────────── */
.main { position: fixed; inset: 0; overflow-y: auto; background: transparent; padding-bottom: 110px; }

/* Screens */
.screen { display: none; padding: 88px 48px 40px; max-width: 1340px; margin: 0 auto; }
.screen.active { display: block; animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Ghost button base */
.btn-ghost { padding: 7px 11px; background: transparent; border: 1px solid var(--line); color: var(--ink-soft); font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; border-radius: 4px; cursor: pointer; transition: 0.15s; }
.btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Status pill (standalone base) */
.status-pill { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.status-dot { width: 8px; height: 8px; background: var(--amber); border-radius: 50%; box-shadow: 0 0 0 3px rgba(168,107,0,.18); }
.status-pill.live .status-dot { background: var(--green); box-shadow: 0 0 0 3px rgba(45,106,79,.18); }
.status-pill.partial .status-dot { background: var(--purple); box-shadow: 0 0 0 3px rgba(124,58,237,.18); }

/* Mobile */
@media (max-width: 700px) {
  .float-brand .brand-text { display: none; }
  .nav-label { display: none; }
  .nav-item { padding: 8px 10px; }
  .float-topbar .mode-badge { display: none; }
  /* The dock is a horizontal bar; on narrow screens let it wrap onto multiple
     rows (centered) instead of overflowing 92vw and clipping nav items. */
  .sidebar { flex-wrap: wrap; justify-content: center; max-width: 96vw; gap: 3px; padding: 7px 8px; }
  .nav { flex-wrap: wrap; justify-content: center; flex: 1 1 100%; }
  #globalCreateBtn { font-size: 10px; padding: 7px 10px; }
  #pipelineStrip { font-size: 9px; padding: 5px 7px; }
  #globalRenderPill, #globalCreditsPill { font-size: 9px; }
  /* Room for a taller (wrapped) dock so it never covers page content. */
  .main { padding-bottom: 168px; }
  /* 48px side padding is too tight at phone widths — give content more room. */
  .screen { padding: 72px 16px 32px; }
}

/* Typography */
.eyebrow { font: 600 10px/1 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
h1 { font-family: var(--serif); font-weight: 300; font-size: 42px; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 14px; color: var(--ink); }
h1 em { font-style: italic; color: var(--accent); }
.lede { font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 720px; margin-bottom: 32px; }
h2 { font: 500 24px/1.2 var(--serif); letter-spacing: -0.01em; margin-bottom: 14px; }
h3 { font: 500 18px/1.2 var(--sans); margin-bottom: 10px; }
h4 { font: 600 14px/1.3 var(--sans); margin-bottom: 6px; }
p { margin-bottom: 14px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 100px; font: 700 13px/1 var(--sans); cursor: pointer; border: 1px solid transparent; transition: transform .16s var(--pop), background .16s, box-shadow .16s; text-decoration: none; white-space: nowrap; }
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover { background: var(--violet); border-color: var(--violet); transform: translateY(-2px); }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--shadow-pop); }
.btn-accent:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 9px 0 -1px var(--accent-deep); }
.btn-accent:active { transform: translateY(3px); box-shadow: 0 3px 0 -1px var(--accent-deep); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }
.btn-purple { background: var(--violet); color: #fff; border-color: var(--violet); }
.btn-purple:hover { background: #6a2fe0; border-color: #6a2fe0; transform: translateY(-2px); }
.btn-sm { padding: 7px 14px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.card-row { display: grid; gap: 16px; margin-bottom: 24px; }
.card-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .card-row.cols-3, .card-row.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .card-row.cols-2, .card-row.cols-3, .card-row.cols-4 { grid-template-columns: 1fr; } }

.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px; position: relative; overflow: hidden; }
.stat-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s; }
.stat-card:hover::before { transform: scaleX(1); }
.stat-label { font: 600 10px/1 var(--mono); letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase; margin-bottom: 12px; }
.stat-value { font-family: var(--serif); font-weight: 300; font-size: 38px; letter-spacing: -0.02em; line-height: 1; color: var(--ink); font-feature-settings: "tnum"; }
.stat-delta { font: 500 12px/1.4 var(--mono); color: var(--green); margin-top: 6px; letter-spacing: 0.05em; }
.stat-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Persona cards */
.persona-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); border-left: 4px solid; padding: 24px 28px; margin-bottom: 18px; transition: 0.2s; }
.persona-card:hover { box-shadow: var(--shadow-md); }
.persona-card[data-persona="keiko"] { border-left-color: var(--tang); }
.persona-head { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.persona-avatar { width: 56px; height: 56px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font: 300 24px/1 var(--serif); flex-shrink: 0; }
.persona-card[data-persona="keiko"] .persona-avatar { background: linear-gradient(135deg, var(--tang), var(--yellow)); }
.persona-info { flex: 1; }
.persona-name { font: 500 22px/1.1 var(--serif); letter-spacing: -0.01em; }
.persona-handle { font: 600 12px/1 var(--mono); letter-spacing: 0.12em; color: var(--accent); margin-top: 4px; }
.persona-followers { font-size: 13px; color: var(--muted); margin-top: 6px; }
.persona-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field.full { grid-column: 1 / -1; }
.field label { font: 600 10px/1 var(--mono); letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; }
.field input, .field textarea, .field select { border: 1px solid var(--line-strong); background: var(--bg); padding: 10px 12px; font: 400 14px/1.45 var(--sans); color: var(--ink); border-radius: 5px; transition: 0.18s; font-family: inherit; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.field textarea { resize: vertical; min-height: 60px; }
.field .hint { font-size: 11px; color: var(--muted); font-style: italic; }
.advanced-toggle { font: 600 11px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); background: none; border: 0; cursor: pointer; padding: 12px 0 0; }

/* Trend grid */
.trend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1100px) { .trend-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .trend-grid { grid-template-columns: 1fr; } }
.trend-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: 0.2s; }
.trend-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.trend-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.trend-thumb { aspect-ratio: 9/16; position: relative; overflow: hidden; }
.trend-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, transparent 30%, transparent 60%, rgba(0,0,0,.5) 100%); }
.trend-source { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,.65); color: #fff; font: 600 9px/1 var(--mono); letter-spacing: 0.15em; padding: 5px 8px; text-transform: uppercase; z-index: 2; border-radius: 3px; }
.trend-views { position: absolute; bottom: 12px; left: 12px; color: #fff; font: 600 14px/1 var(--mono); text-shadow: 0 1px 4px rgba(0,0,0,.6); z-index: 2; }
.trend-info { padding: 14px 16px; }
.trend-info h4 { font-size: 14px; line-height: 1.35; margin-bottom: 6px; font-weight: 500; }
.trend-meta { font: 500 11px/1.4 var(--mono); color: var(--muted); }

/* Pipeline rows */
.agent-row { display: grid; grid-template-columns: 70px 32px 1fr 100px; gap: 18px; align-items: flex-start; padding: 18px 20px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-lg); margin-bottom: 10px; cursor: pointer; transition: 0.18s; }
.agent-row:hover { box-shadow: var(--shadow-sm); border-color: var(--line-strong); }
.agent-row.expanded { box-shadow: var(--shadow-md); }
.agent-stage { font: 600 11px/1.4 var(--mono); letter-spacing: 0.15em; color: var(--accent); text-transform: uppercase; }
.agent-check { width: 28px; height: 28px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: var(--muted); font-weight: 600; font-size: 14px; transition: 0.2s; }
.agent-row.success .agent-check { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.agent-row.running .agent-check { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes renderPulse { 0%,100% { opacity:1; } 50% { opacity:.55; } }
.agent-name { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.agent-purpose { font-size: 13px; color: var(--muted); line-height: 1.5; }
.agent-mode { font: 600 9px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; padding: 5px 9px; border-radius: 3px; text-align: center; white-space: nowrap; }
.agent-mode.simulated { background: var(--amber-soft); color: var(--amber); }
.agent-mode.live { background: var(--green-soft); color: var(--green); }
.agent-output { grid-column: 1 / -1; background: var(--ink); color: #dcd2c0; padding: 18px 20px; font: 500 12px/1.6 var(--mono); border-radius: 6px; margin-top: 12px; display: none; white-space: pre-wrap; word-break: break-word; max-height: 380px; overflow-y: auto; border-left: 3px solid var(--accent); }
.agent-row.expanded .agent-output { display: block; }

/* Catalog grid */
.catalog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1100px) { .catalog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .catalog-grid { grid-template-columns: repeat(2, 1fr); } }
.catalog-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: 0.18s; position: relative; }
.catalog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.catalog-thumb { aspect-ratio: 3/4; position: relative; }
.catalog-info { padding: 12px 14px; }
.catalog-info h5 { font-size: 13px; font-weight: 500; margin-bottom: 4px; line-height: 1.3; }
.catalog-info .price { font: 500 12px/1 var(--mono); color: var(--muted); }
.catalog-info .growth { font: 600 11px/1 var(--mono); color: var(--green); margin-top: 4px; }

/* Phone preview */
.phone { width: 320px; background: #000; border-radius: 36px; padding: 10px; position: relative; box-shadow: var(--shadow-lg); flex-shrink: 0; }
.phone::before { content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 86px; height: 22px; background: #000; border-radius: 18px; z-index: 5; }
.phone-screen { background: #1a1815; border-radius: 26px; overflow: hidden; aspect-ratio: 9/19; position: relative; }
.phone-status { display: flex; justify-content: space-between; padding: 14px 22px 6px; color: #fff; font: 600 13px/1 var(--sans); }
.phone-tabs { display: flex; justify-content: center; gap: 24px; padding: 8px 0 14px; color: rgba(255,255,255,.55); font: 600 13px/1 var(--sans); }
.phone-tab-active { color: #fff; border-bottom: 2px solid #fff; padding-bottom: 4px; }
.phone-vid { position: absolute; inset: 80px 0 70px 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.phone-vid-bg { position: absolute; inset: 0; }
.phone-vid-bg.keiko { background: linear-gradient(160deg, #e8c8a8, #9a6840 60%, #3a2418); }
.phone-vid-bg.fashion { background: linear-gradient(160deg, #f0d8b8, #a07840 60%, #3a2010); }
.phone-vid-caption { position: relative; z-index: 1; font: 300 22px/1.2 var(--serif); text-align: center; padding: 0 28px; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.phone-disclosure { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.7); color: #fff; font: 600 9px/1 var(--mono); letter-spacing: 0.18em; padding: 6px 10px; border-radius: 4px; z-index: 2; }
.phone-rail { position: absolute; right: 8px; bottom: 100px; display: flex; flex-direction: column; align-items: center; gap: 16px; color: #fff; z-index: 2; }
.phone-rail-action { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.phone-rail-icon { font-size: 24px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.phone-rail-num { font: 600 11px/1 var(--sans); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.phone-bottom { position: absolute; bottom: 14px; left: 14px; right: 70px; z-index: 2; color: #fff; }
.phone-handle { font: 700 14px/1.2 var(--sans); margin-bottom: 4px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.phone-cap { font: 400 11px/1.3 var(--sans); text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.phone-nav { display: flex; justify-content: space-around; padding: 12px 8px 14px; background: #000; color: #fff; font: 600 9px/1 var(--sans); text-transform: uppercase; }

/* Upload zone */
.upload-zone { border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); padding: 36px 24px; text-align: center; background: var(--surface); transition: 0.2s; cursor: pointer; }
.upload-zone:hover, .upload-zone.dragover { border-color: var(--accent); background: var(--accent-soft); }
.upload-zone .icon { font-size: 36px; color: var(--accent); margin-bottom: 12px; }
.upload-zone .label { font-size: 16px; font-weight: 500; margin-bottom: 6px; }
.upload-zone .sub { font-size: 13px; color: var(--muted); }
.upload-zone input[type="file"] { display: none; }
.m3-grwm-upload-zone input[type="file"] {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Mode 03 steps 1+2 split: compact garment column, roomy model grid; collapses to one column on narrow/mobile. */
.m3-split { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; margin-bottom: 24px; }
@media (min-width: 820px) { .m3-split { grid-template-columns: minmax(300px, 360px) 1fr; } }

/* Failed garment cards expose the complete server rejection reason without
   making the compact filename/reason labels wider. The data attribute is
   toggled by script so the same tooltip works for touch taps as for hover. */
.m3-lib-error { position: relative; }
.m3-lib-error-tooltip {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  padding: 8px 10px;
  border: 1px solid rgba(30, 19, 48, .18);
  border-radius: 8px;
  background: var(--ink, #1e1330);
  color: #fff;
  box-shadow: 0 8px 22px rgba(30, 19, 48, .22);
  font: 500 11px/1.35 var(--sans);
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.m3-lib-error[data-tooltip-visible="true"] .m3-lib-error-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
@media (hover: hover) and (pointer: fine) {
  .m3-lib-error:hover .m3-lib-error-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
}
.m3-lib-error-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--ink, #1e1330);
  border-right: 1px solid rgba(30, 19, 48, .18);
  border-bottom: 1px solid rgba(30, 19, 48, .18);
  transform: translate(-50%, -4px) rotate(45deg);
}

/* Tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font: 600 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:hover td { background: var(--bg); }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; }
.modal.open { display: flex; animation: fadeIn 0.25s ease-out; }
.modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); }
.modal-frame { position: relative; z-index: 1; background: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 720px; max-height: 86vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 22px; }
.modal-close { background: none; border: none; font-size: 28px; color: var(--muted); cursor: pointer; line-height: 1; }
.modal-body { padding: 24px 28px; overflow-y: auto; }

/* Toasts */
.toasts { position: fixed; top: 90px; right: 24px; z-index: 300; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 5px; font-size: 13px; box-shadow: var(--shadow-lg); animation: slideIn 0.3s ease-out; max-width: 360px; }
.toast.success { background: var(--green); }
.toast.error { background: #842029; }
.toast.warn { background: #7a5c00; }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* Utilities */
.row { display: flex; gap: 12px; align-items: center; }
.row-spaced { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.row-end { display: flex; gap: 12px; justify-content: flex-end; align-items: center; }
.section { margin-bottom: 32px; }
.divider { height: 1px; background: var(--line); margin: 24px 0; }

.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.tag-pill { display: inline-block; font: 500 10px/1 var(--mono); letter-spacing: 0.06em; background: var(--accent-soft); color: var(--accent-deep); padding: 5px 9px; border-radius: 3px; margin-right: 4px; margin-bottom: 4px; }
.tag-pill.purple { background: var(--purple-soft); color: var(--purple); }
.tag-pill.green { background: var(--green-soft); color: var(--green); }
.tag-pill.amber { background: var(--amber-soft); color: var(--amber); }
.tag-pill.red { background: #fef2f2; color: #b91c1c; }
.empty-state { text-align: center; padding: 60px 24px; color: var(--muted); }
.empty-state .icon { font-size: 48px; margin-bottom: 16px; }
.empty-state h3 { color: var(--ink); margin-bottom: 8px; }
/* E6 · first-run "Start here" guided card (LIGHT theme tokens) */
.empty-state.m3-firstrun { background: var(--surface2); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); padding: 40px 24px; }
.m3-firstrun-steps { list-style: none; counter-reset: m3step; max-width: 440px; margin: 0 auto 22px; padding: 0; text-align: left; }
.m3-firstrun-steps li { counter-increment: m3step; position: relative; padding: 10px 0 10px 44px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; border-bottom: 1px solid var(--line); }
.m3-firstrun-steps li:last-child { border-bottom: none; }
.m3-firstrun-steps li::before { content: counter(m3step); position: absolute; left: 0; top: 8px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.m3-firstrun-steps li strong { color: var(--ink); }
.code-block { background: var(--ink); color: #dcd2c0; padding: 16px 18px; border-radius: 6px; font: 500 12px/1.55 var(--mono); white-space: pre-wrap; border-left: 3px solid var(--accent); overflow-x: auto; }
.hidden { display: none !important; }

/* ── Login Screen ──────────────────────────────────────────────────────────── */
.login-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; grid-template-columns: 1fr 420px;
  background: #0d1117;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.login-screen.hidden {
  opacity: 0; visibility: hidden; pointer-events: none;
}

/* Demo player (left panel) */
.login-demo {
  position: relative; overflow: hidden; background: #0d1117;
  border-right: 1px solid rgba(255,255,255,.06);
}
.demo-player {
  position: relative; width: 100%; height: 100%;
}
.demo-scene {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.8s ease;
  pointer-events: none;
}
.demo-scene.active { opacity: 1; pointer-events: auto; }
.demo-scene.exit { opacity: 0; }

.scene-bg {
  position: absolute; inset: 0; z-index: 0;
}
.scene-dark { background: linear-gradient(135deg, #0d1117 0%, #1a1b2e 100%); }
.scene-deep { background: linear-gradient(135deg, #111827 0%, #1e1b4b 100%); }
.scene-purple { background: linear-gradient(135deg, #1e1b4b 0%, #2e1065 100%); }
.scene-accent { background: linear-gradient(135deg, #1a0f0a 0%, #2d1509 100%); }

.scene-content {
  position: relative; z-index: 1;
  padding: 48px 56px; width: 100%;
  animation: sceneSlideIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sceneSlideIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.scene-eyebrow {
  font: 600 10px/1 var(--mono); letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
}
.scene-headline {
  font: 300 48px/1.05 var(--serif); color: #f5f3ef; letter-spacing: -0.02em;
  margin-bottom: 32px;
}

/* ── Funky Scene 1 ──────────────────────────────────────────────────────── */
.scene-funky {
  background: linear-gradient(-45deg, #FF416C, #FF4B2B, #FFD200, #FF6B6B, #C850C0, #4158D0);
  background-size: 400% 400%;
  animation: funkyGradientShift 6s ease infinite;
}
@keyframes funkyGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Organic moving blobs */
.funky-blob {
  position: absolute; border-radius: 50%; filter: blur(60px);
  opacity: 0.35; pointer-events: none; z-index: 0;
}
.funky-blob-1 {
  width: 420px; height: 420px; background: #fff; top: -100px; left: -80px;
  animation: blobFloat1 8s ease-in-out infinite;
}
.funky-blob-2 {
  width: 300px; height: 300px; background: #FFD200; bottom: -60px; right: -40px;
  animation: blobFloat2 6s ease-in-out infinite 1s;
}
.funky-blob-3 {
  width: 200px; height: 200px; background: #C850C0; bottom: 30%; left: 30%;
  animation: blobFloat1 10s ease-in-out infinite 2s;
}
@keyframes blobFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(30px, 20px) scale(1.1); }
}
@keyframes blobFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(-20px, -30px) scale(1.08); }
}

/* Floating emoji */
.funky-emoji {
  position: absolute; z-index: 1; pointer-events: none; line-height: 1;
  animation: emojiFloat 3s ease-in-out var(--fd, 0s) infinite;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.2));
}
@keyframes emojiFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%       { transform: translateY(-12px) rotate(4deg); }
}

/* Content */
.scene-funky-open {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 18px;
  padding: 56px 56px;
}
.funky-badge {
  display: inline-block;
  font: 700 11px/1 var(--mono); letter-spacing: 0.25em; text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,.25); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.3);
  padding: 8px 16px; border-radius: 100px;
  width: fit-content;
  animation: funkyPop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.1s both;
}
.funky-headline {
  font: 900 62px/1.0 var(--sans); color: #fff;
  letter-spacing: -0.03em;
  text-shadow: 0 4px 20px rgba(0,0,0,.25);
  line-height: 1.05;
}
.funky-word { display: inline-block; }
.funky-highlight {
  color: #FFD200;
  text-shadow: 0 0 40px rgba(255,210,0,.6), 0 4px 20px rgba(0,0,0,.3);
  position: relative; display: inline-block;
}
.funky-highlight-2 {
  color: #fff; -webkit-text-stroke: 3px #000;
  text-shadow: 4px 4px 0 #FF416C, 8px 8px 0 rgba(0,0,0,.2);
}
/* Staggered word pop-in */
.funky-w1 { animation: wordBounce 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.2s both; }
.funky-w2 { animation: wordBounce 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.35s both; }
.funky-w3 { animation: wordBounce 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.5s both; }
.funky-w4 { animation: wordBounce 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.65s both; }
.funky-w5 { animation: wordBounce 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.8s both; }
.funky-w6 { animation: wordBounce 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.95s both; }
@keyframes wordBounce {
  from { opacity: 0; transform: translateY(30px) scale(0.7) rotate(-3deg); }
  to   { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes funkyPop {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

.funky-sub {
  font: 600 16px/1 var(--sans); color: rgba(255,255,255,.9);
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
  animation: funkyPop 0.5s cubic-bezier(0.34,1.56,0.64,1) 1.1s both;
}
.funky-pills {
  display: flex; flex-wrap: wrap; gap: 10px;
  animation: funkyPop 0.5s cubic-bezier(0.34,1.56,0.64,1) 1.3s both;
}
.funky-pill {
  font: 700 11px/1 var(--mono); color: #000; letter-spacing: 0.04em;
  padding: 9px 16px; border-radius: 100px; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.fp-1 { background: #FFD200; }
.fp-2 { background: #fff; }
.fp-3 { background: #39FF14; }

/* Persona grid (scene 2) */
.demo-persona-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px;
}
.demo-persona {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px; padding: 20px 16px; text-align: center;
  animation: personaIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s) both;
}
@keyframes personaIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.dp-avatar {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px;
  font: 400 28px/64px var(--serif); color: #fff; text-align: center;
  overflow: hidden; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}
.dp-keiko { background: linear-gradient(135deg, #c0392b, #922b21); box-shadow: 0 0 0 3px #c0392b55; }
.dp-name { font: 600 14px/1 var(--sans); color: #fff; margin-bottom: 5px; }
.dp-tag { font: 500 10px/1.3 var(--mono); color: rgba(255,255,255,.4); letter-spacing: 0.04em; margin-bottom: 12px; }
.dp-stat { font: 700 22px/1 var(--sans); color: var(--accent); }

/* Fashion grid (scene 3) */
.demo-fashion-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px;
}
.demo-fashion-card {
  animation: personaIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s) both;
}
.dfc-video {
  aspect-ratio: 9/16; border-radius: 8px; position: relative; overflow: hidden;
}
.dfc-media {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 1; opacity: .92; filter: saturate(1.08) contrast(1.04);
}
.dfc-content-overlay {
  position: absolute; inset: 0; z-index: 4; display: flex; align-items: center;
  justify-content: center; flex-direction: column; gap: 6px; color: #fff;
  pointer-events: none; text-align: center;
}
/* Per-influencer backgrounds */
.dfc-aria { background: linear-gradient(170deg, #1a0a2e 0%, #3b1060 60%, #200840 100%); }
.dfc-luna { background: linear-gradient(170deg, #0a1628 0%, #0f3460 60%, #0a1e40 100%); }
.dfc-jade { background: linear-gradient(170deg, #0a1f10 0%, #1a4a24 60%, #0e2a14 100%); }

/* Subtle film grain overlay */
.dfc-grain {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.35;
  animation: grainFlicker 0.15s steps(1) infinite;
}
@keyframes grainFlicker {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-2px,1px); }
  50%  { transform: translate(1px,-2px); }
  75%  { transform: translate(-1px,2px); }
  100% { transform: translate(2px,0); }
}

/* Video chrome — top bar */
.dfc-chrome {
  position: absolute; top: 6px; left: 6px; right: 6px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 5;
}
.dfc-rec {
  display: flex; align-items: center; gap: 4px;
  font: 700 8px/1 var(--mono); letter-spacing: 0.1em;
  color: rgba(255,255,255,.7);
  background: rgba(0,0,0,.35); padding: 3px 6px; border-radius: 3px;
}
.dfc-dot {
  width: 5px; height: 5px; border-radius: 50%; background: #f87171;
  animation: recBlink 1.2s ease-in-out infinite;
}
@keyframes recBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }
.dfc-time {
  font: 600 8px/1 var(--mono); color: rgba(255,255,255,.6);
  background: rgba(0,0,0,.35); padding: 3px 5px; border-radius: 3px;
}

/* Bottom label */
.dfc-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 18px 8px 7px;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 100%);
  text-align: center; z-index: 5;
  font: 600 10px/1 var(--mono); color: rgba(255,255,255,.85); letter-spacing: 0.14em; text-transform: uppercase;
}

/* Cost pills */
.demo-cost-row { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-cost-pill {
  font: 600 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 4px;
  background: rgba(255,46,126,.16); color: var(--accent); border: 1px solid rgba(255,46,126,.28);
}
.demo-cost-pill-purple {
  background: rgba(124,58,237,.18); color: #a78bfa; border: 1px solid rgba(124,58,237,.25);
}

/* ── Script rows (scene 4) ──────────────────────────────────────────────── */

/* Animated scan lines over the dark background */
#demoScene4 .scene-bg::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,.018) 3px,
    rgba(255,255,255,.018) 4px
  );
  animation: scanSlide 8s linear infinite;
}
@keyframes scanSlide {
  from { background-position: 0 0; }
  to   { background-position: 0 200px; }
}

/* Evaluating badge */
.demo-scripts-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.ds-live-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 9px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: #34d399; background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.3);
  padding: 5px 10px; border-radius: 100px;
}
.ds-live-dot {
  width: 5px; height: 5px; border-radius: 50%; background: #34d399;
  animation: recBlink 1s ease-in-out infinite;
}

.demo-scripts { margin-bottom: 24px; display: flex; flex-direction: column; gap: 8px; }
.demo-script-row {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; padding: 13px 16px;
  animation: scriptSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s) both;
  position: relative; overflow: hidden;
}
/* Shimmer sweep on entry */
.demo-script-row::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: rowShimmer 0.7s ease var(--delay, 0s) both;
}
@keyframes rowShimmer {
  from { left: -60%; }
  to   { left: 120%; }
}
@keyframes scriptSlideIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.ds-top {
  border-color: rgba(52,211,153,.3);
  background: rgba(52,211,153,.07);
  box-shadow: 0 0 0 1px rgba(52,211,153,.15), inset 0 0 20px rgba(52,211,153,.04);
}
.ds-top.glow-pulse { animation: scriptSlideIn 0.5s cubic-bezier(0.16,1,0.3,1) var(--delay,0s) both, rowGlowPulse 2.5s ease 1.2s infinite; }
@keyframes rowGlowPulse {
  0%,100% { box-shadow: 0 0 0 1px rgba(52,211,153,.15), inset 0 0 20px rgba(52,211,153,.04); }
  50%      { box-shadow: 0 0 12px rgba(52,211,153,.25), inset 0 0 20px rgba(52,211,153,.08); }
}
.ds-reject { opacity: 0.4; text-decoration-color: rgba(248,113,113,.4); }
.ds-score {
  font: 800 18px/1 var(--mono); min-width: 32px; text-align: center;
  transition: transform 0.15s;
}
.ds-score.ds-scanning {
  color: rgba(255,255,255,.3) !important;
  animation: scorePulse 0.25s ease infinite alternate;
}
@keyframes scorePulse {
  from { opacity: 0.3; } to { opacity: 0.8; }
}
.ds-score-green { color: #34d399; text-shadow: 0 0 12px rgba(52,211,153,.5); }
.ds-score-amber { color: #fbbf24; text-shadow: 0 0 12px rgba(251,191,36,.4); }
.ds-score-red   { color: #f87171; text-shadow: 0 0 12px rgba(248,113,113,.4); }
.ds-text { font: 400 13px/1.4 var(--sans); color: rgba(255,255,255,.78); }

/* ── End card (scene 5) ─────────────────────────────────────────────────── */
.scene-end-card { text-align: center; display: flex; flex-direction: column; align-items: center; }

/* Animated warm glow behind the end card */
#demoScene5 .scene-bg {
  background: linear-gradient(135deg, #1a0f0a 0%, #2d1509 50%, #1a0a05 100%);
}
#demoScene5 .scene-bg::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 60%, rgba(255,46,126,.22) 0%, transparent 70%);
  animation: endGlow 3s ease-in-out infinite alternate;
}
@keyframes endGlow {
  from { opacity: 0.6; transform: scale(0.95); }
  to   { opacity: 1;   transform: scale(1.05); }
}

.end-logo {
  width: 64px; height: 64px; background: var(--accent);
  color: #fff; font: 300 38px/64px var(--serif); border-radius: 10px;
  margin: 0 auto 16px; text-align: center;
  animation: endLogoBounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
  box-shadow: 0 8px 32px rgba(255,46,126,.45);
}
@keyframes endLogoBounce {
  from { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.end-title {
  font: 300 60px/1 var(--serif); color: #fff; letter-spacing: -0.02em;
  margin-bottom: 10px;
  animation: coldFadeUp 0.55s ease 0.4s both;
}
.end-tagline {
  font: 300 17px/1.5 var(--serif); color: rgba(255,255,255,.6);
  margin-bottom: 36px;
  animation: coldFadeUp 0.55s ease 0.6s both;
}
.end-stats {
  display: flex; gap: 40px;
  animation: coldFadeUp 0.55s ease 0.75s both;
}
.end-stat { text-align: center; }
.end-stat-num {
  display: block; font: 800 32px/1 var(--sans); color: var(--accent);
  margin-bottom: 6px;
  text-shadow: 0 0 20px rgba(255,46,126,.5);
}
.end-stat-lbl { font: 600 9px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,.38); }

/* Demo progress bar */
.demo-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: rgba(255,255,255,.08); z-index: 10;
}
.demo-progress-bar {
  height: 100%; background: var(--accent);
  transition: width 0.1s linear; width: 0%;
}
/* Demo dots */
.demo-dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 11;
}
.demo-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.25); cursor: pointer; transition: 0.2s;
}
.demo-dot.active { background: var(--accent); width: 18px; border-radius: 3px; }

/* Login panel (right) */
.login-panel {
  display: flex; align-items: center; justify-content: center;
  padding: 48px 40px; background: #0f1015;
  border-left: 1px solid rgba(255,255,255,.06);
}
.login-card { width: 100%; max-width: 340px; }
.login-logo {
  display: flex; align-items: center; gap: 12px; margin-bottom: 40px;
}
.login-logo-mark {
  width: 42px; height: 42px; background: var(--accent);
  color: #fff; font: 300 26px/42px var(--serif); border-radius: 5px;
  text-align: center;
}
.login-brand-name { font: 500 20px/1 var(--sans); color: #fff; }
.login-brand-sub { font: 600 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-top: 4px; }

.login-heading {
  font: 300 32px/1.1 var(--serif); color: #f5f3ef; letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.login-lede { font-size: 14px; color: rgba(255,255,255,.45); margin-bottom: 36px; }

.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-field { display: flex; flex-direction: column; gap: 8px; }
.login-label { font: 600 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.login-input {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px; padding: 13px 16px; font: 400 15px/1 var(--sans);
  color: #fff; outline: none; transition: 0.2s;
}
.login-input::placeholder { color: rgba(255,255,255,.25); }
.login-input:focus { border-color: var(--accent); background: rgba(255,255,255,.08); }

.login-error {
  font: 500 12px/1.4 var(--sans); color: #f87171;
  min-height: 0; transition: 0.2s;
}
.login-btn {
  width: 100%; padding: 15px 24px; background: var(--accent);
  color: #fff; border: none; border-radius: 100px;
  font: 800 15px/1 var(--sans); cursor: pointer;
  transition: transform .16s var(--pop), box-shadow .16s;
  letter-spacing: 0.01em; box-shadow: 0 8px 0 -1px var(--accent-deep);
}
.login-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 11px 0 -1px var(--accent-deep); }
.login-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 4px 0 -1px var(--accent-deep); }
.login-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

/* Logout button in dock */
.btn-logout {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.4); font-size: 14px;
  border-radius: 12px; cursor: pointer; transition: 0.15s;
}
.btn-logout:hover { background: rgba(220,60,60,.15); color: #ff6b6b; border-color: rgba(220,60,60,.3); }

/* Responsive: stack on narrow screens */
@media (max-width: 800px) {
  .login-screen { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .login-demo { min-height: 260px; }
  .login-panel { padding: 32px 24px; }
  .scene-headline { font-size: 32px; }
  .demo-persona-grid, .demo-fashion-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Chat with Canvas (Task #53) ──────────────────────────────────────────── */
#screen-chat { padding: 0; height: 100%; }
.chat-wrap { display: flex; flex-direction: column; height: calc(100vh - 0px); }
.chat-auth { max-width: 420px; margin: 8vh auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 32px; box-shadow: 0 8px 40px rgba(0,0,0,.06); }
.chat-auth h2 { font: 600 24px/1.2 var(--serif); margin: 0 0 6px; color: var(--ink); }
.chat-auth p.lede { color: var(--muted); font-size: 13px; margin: 0 0 22px; }
.chat-auth .tabs { display: flex; gap: 4px; margin-bottom: 20px; background: var(--bg); border-radius: 8px; padding: 4px; }
.chat-auth .tabs button { flex: 1; padding: 9px; border: none; background: transparent; border-radius: 6px; font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); cursor: pointer; transition: .15s; }
.chat-auth .tabs button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.chat-auth label { display: block; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; }
.chat-auth input { width: 100%; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 7px; font: 400 14px var(--sans); margin-bottom: 16px; background: var(--bg); color: var(--ink); box-sizing: border-box; }
.chat-auth input:focus { outline: none; border-color: var(--accent); }
.chat-auth .err { color: var(--accent-deep); font-size: 12px; margin: -8px 0 14px; min-height: 14px; }
.chat-auth .btn { width: 100%; justify-content: center; }

.chat-split { display: grid; grid-template-columns: 1.05fr 0.95fr; flex: 1; min-height: 0; }
.chat-canvas { border-right: 1px solid var(--line); background: var(--surface); overflow-y: auto; padding: 28px 30px; }
.chat-canvas .canvas-empty { color: var(--muted); font-size: 13px; text-align: center; margin-top: 22vh; }
.chat-canvas .canvas-empty .big { font-size: 40px; margin-bottom: 12px; }
.canvas-card { border: 1px solid var(--line); border-radius: 10px; padding: 22px; background: var(--bg); }
.canvas-card .canvas-kicker { font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.canvas-card h3 { font: 600 19px/1.3 var(--serif); margin: 0 0 14px; color: var(--ink); }
.canvas-card .script-body { white-space: pre-wrap; font: 400 15px/1.7 var(--serif); color: var(--ink-soft); }
.canvas-card .canvas-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.canvas-card .canvas-meta span { font: 500 11px/1 var(--mono); color: var(--muted); }
.canvas-card .canvas-meta strong { color: var(--ink); }

.chat-side { display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.chat-head .ch-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-head select { max-width: 200px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: 500 12px var(--sans); background: var(--bg); color: var(--ink); }
.chat-head .balance-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-deep); font: 600 11px/1 var(--mono); letter-spacing: .04em; white-space: nowrap; }
.chat-head .balance-pill.low { background: #fde8e8; color: #b42318; }
.chat-head .ch-actions { display: flex; gap: 6px; align-items: center; }
.chat-head #chatTopUp.pulse { border-color: var(--accent-deep); color: var(--accent-deep); animation: topupPulse 1.6s ease-in-out infinite; }
@keyframes topupPulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); } 50% { box-shadow: 0 0 0 4px var(--accent-soft); } }

.topup-overlay { position: fixed; inset: 0; background: rgba(20, 20, 24, 0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 18px; }
.topup-modal { position: relative; width: 100%; max-width: 420px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: 0 24px 60px rgba(0,0,0,0.25); }
.topup-modal h3 { margin: 0 0 6px; font: 700 18px var(--sans); color: var(--ink); }
.topup-modal .muted { margin: 0 0 16px; font: 400 13px/1.5 var(--sans); color: var(--ink-soft); }
.topup-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border: none; background: transparent; font-size: 22px; line-height: 1; color: var(--ink-soft); cursor: pointer; border-radius: 6px; }
.topup-close:hover { background: var(--accent-soft); color: var(--ink); }
.topup-list { display: flex; flex-direction: column; gap: 10px; }
.topup-pack { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); cursor: pointer; transition: 0.15s; text-align: left; }
.topup-pack:hover:not(:disabled) { border-color: var(--accent-deep); background: var(--accent-soft); }
.topup-pack:disabled { opacity: 0.55; cursor: default; }
.topup-pack .tp-name { font: 600 14px var(--sans); color: var(--ink); }
.topup-pack .tp-credits { font: 500 12px var(--mono); color: var(--ink-soft); margin-top: 3px; }
.topup-pack .tp-price { font: 700 16px var(--sans); color: var(--accent-deep); white-space: nowrap; }

.chat-thread { flex: 1; overflow-y: auto; padding: 22px 18px; display: flex; flex-direction: column; gap: 16px; }
.chat-msg { display: flex; flex-direction: column; max-width: 88%; }
.chat-msg.user { align-self: flex-end; align-items: flex-end; }
.chat-msg.assistant { align-self: flex-start; }
.chat-msg .bubble { padding: 11px 15px; border-radius: 14px; font: 400 14px/1.6 var(--sans); white-space: pre-wrap; word-wrap: break-word; }
.chat-msg.user .bubble { background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.assistant .bubble { background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 4px; }
.chat-msg .tool-chip { font: 500 10px/1 var(--mono); letter-spacing: .06em; color: var(--muted); margin-top: 6px; display: inline-flex; align-items: center; gap: 5px; }
.chat-msg .meta { font: 500 10px/1 var(--mono); color: var(--muted); margin-top: 5px; }

.chat-compose { border-top: 1px solid var(--line); padding: 14px 16px; background: var(--surface); }
.chat-compose .row { display: flex; gap: 10px; align-items: flex-end; }
.chat-compose textarea { flex: 1; resize: none; border: 1px solid var(--line-strong); border-radius: 10px; padding: 11px 13px; font: 400 14px/1.5 var(--sans); max-height: 140px; background: var(--bg); color: var(--ink); }
.chat-compose textarea:focus { outline: none; border-color: var(--accent); }
.chat-compose .send-btn { flex: 0 0 auto; height: 42px; }
.chat-compose .hint { font: 500 10px/1 var(--mono); color: var(--muted); margin-top: 7px; }
.typing-dots::after { content: '▋'; animation: blink 1s step-start infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 900px) { .chat-split { grid-template-columns: 1fr; } .chat-canvas { display: none; } }

/* ── Model creator / studio treatment ───────────────────────────────────────
   The creator is a calmer, more editorial surface than the operational UGC
   controls around it. Keep the same markup contracts and inline handlers, but
   give every wizard step one consistent visual language. */
.mct-page {
  --mct-ink: #211a2d;
  --mct-soft-ink: #5e566b;
  --mct-muted: #82798f;
  --mct-line: rgba(33, 26, 45, .12);
  --mct-line-strong: rgba(33, 26, 45, .20);
  --mct-panel: rgba(255, 253, 251, .92);
  position: relative;
  max-width: 1120px;
  margin: -10px auto 0;
  padding: 20px 0 36px;
  color: var(--mct-ink);
  font-family: var(--sans);
}
.mct-page::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 390px;
  height: 240px;
  right: -130px;
  top: -75px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 46, 126, .13), rgba(255, 46, 126, 0) 70%);
  pointer-events: none;
}
.mct-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 20px;
}
.mct-kicker {
  color: var(--accent-deep);
  font: 700 10px/1.2 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.mct-studio-note {
  margin-top: 6px;
  color: var(--mct-muted);
  font-size: 12px;
  letter-spacing: .01em;
}
.mct-lane-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid var(--mct-line);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: var(--mct-soft-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(33,26,45,.04);
}
.mct-lane-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.mct-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 13px;
  border: 1px solid rgba(33,26,45,.10);
  border-radius: 15px;
  background: rgba(255,255,255,.60);
  box-shadow: 0 8px 28px rgba(33,26,45,.045);
}
.mct-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px 10px;
  color: var(--mct-muted);
}
.mct-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;
  width: 9px;
  height: 1px;
  background: var(--mct-line);
}
.mct-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid var(--mct-line-strong);
  border-radius: 50%;
  color: var(--mct-soft-ink);
  font: 700 10px/1 var(--mono);
}
.mct-step-label {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.mct-step.is-current {
  border-radius: 9px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 5px 14px rgba(33,26,45,.15);
}
.mct-step.is-current .mct-step-number {
  border-color: rgba(255,255,255,.55);
  color: #fff;
}
.mct-step.is-done { color: var(--accent-deep); }
.mct-step.is-done .mct-step-number {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.mct-page > .eyebrow {
  margin: 30px 0 8px !important;
  color: var(--accent-deep);
  font-size: 10px !important;
  letter-spacing: .18em;
}
.mct-page > h1 {
  max-width: 760px;
  margin-bottom: 10px;
  color: var(--mct-ink);
  font-family: var(--sans);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.055em;
}
.mct-page > h1 .m3hero-accent {
  color: var(--accent-deep);
}
.mct-page > p.muted {
  max-width: 650px !important;
  margin: 0 0 24px !important;
  color: var(--mct-soft-ink) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}
.mct-page .m3-split {
  grid-template-columns: minmax(0, 1.05fr) minmax(290px, .82fr);
  gap: 22px;
  margin-bottom: 0;
}
.mct-page .card {
  border-color: var(--mct-line);
  border-radius: 16px;
  background: var(--mct-panel);
  box-shadow: 0 10px 30px rgba(33,26,45,.055);
}
.mct-page .card:hover {
  border-color: rgba(255,46,126,.22);
}
.mct-page .btn {
  min-height: 38px;
  font-size: 12px;
  letter-spacing: -.01em;
  box-shadow: none;
}
.mct-page .btn-accent {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 5px 0 rgba(255,46,126,.72);
}
.mct-page .btn-accent:hover {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 7px 0 rgba(196,31,95,.74);
}
.mct-page .btn-accent:active {
  box-shadow: 0 2px 0 rgba(196,31,95,.74);
}
.mct-page .btn-secondary {
  background: rgba(255,255,255,.84);
  border-color: var(--mct-line-strong);
  color: var(--mct-ink);
}
.mct-page .btn-secondary:hover {
  background: var(--mct-ink);
  border-color: var(--mct-ink);
}
.mct-page input,
.mct-page textarea {
  border-color: var(--mct-line-strong) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.78) !important;
  color: var(--mct-ink) !important;
  font-family: var(--sans) !important;
  line-height: 1.5;
}
.mct-page input:focus,
.mct-page textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-soft) !important;
  outline: none;
}
.mct-page textarea::placeholder,
.mct-page input::placeholder { color: #9a91a3; }
.mct-page .m3-split > .card:first-child {
  border-top: 3px solid var(--accent);
}
.mct-page .m3-split > div > .card:first-child,
.mct-page .m3-split > .card {
  overflow: hidden;
}
.mct-page .m3-split > div > .card img,
.mct-page .m3-split > .card img {
  background: var(--surface2);
}
.mct-page .m3-split > div > .card[style*="padding:0"] {
  border-radius: 16px;
}
.mct-page .m3-split > div > .card[style*="padding:0"] img {
  border-radius: 13px 13px 0 0;
}
.mct-page .m3-split > div > .card[style*="padding:0"] video {
  border-radius: 13px 13px 0 0 !important;
}
.mct-page .m3-split > div > .card[style*="padding:0"] + div {
  padding-top: 2px;
}
.mct-page .m3-split > div > .card[style*="padding:0"] + div .btn {
  margin-top: 2px;
}
.mct-page .m3-split > div:not(:first-child) > .card {
  background: rgba(255,255,255,.66);
}
.mct-page .m3-split > div:not(:first-child) > .card + .card {
  background: rgba(255,255,255,.82);
}
.mct-page .m3-split > div > .card > div[style*="font-weight:700"],
.mct-page .m3-split > .card > div[style*="font-weight:700"] {
  color: var(--mct-ink);
  letter-spacing: -.01em;
}
.mct-page .m3-split > div > .card > div[style*="color:var(--muted"],
.mct-page .m3-split > .card > div[style*="color:var(--muted"] {
  color: var(--mct-soft-ink) !important;
}
.mct-page .m3-split > div > .card > div[style*="border-top"],
.mct-page .m3-split > div > .card > div[style*="border-bottom"] {
  border-color: var(--mct-line) !important;
}
/* Step 1 controls: convert the old compact button rows into confident choices. */
.mct-page .m3-split > .card:first-child {
  gap: 22px !important;
  padding: 26px !important;
}
.mct-page .m3-split > .card:first-child > div > div:first-child {
  margin-bottom: 10px !important;
  color: var(--mct-ink);
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.mct-page .m3-split > .card:first-child .btn-sm {
  min-height: 34px;
  padding: 8px 13px;
  border-radius: 9px;
  font-size: 11px;
}
.mct-page .m3-split > .card:first-child > div:nth-last-of-type(2) {
  padding-top: 3px;
}
.mct-page .m3-split > .card:first-child > div:nth-last-of-type(2) textarea {
  min-height: 78px;
  padding: 12px 13px !important;
}
.mct-page .m3-split > .card:first-child > div:last-of-type {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mct-page .m3-split > .card:first-child > div:last-of-type .btn {
  flex: 1 1 240px;
  justify-content: center;
}
.mct-page .m3-split > .card:first-child > div:last-of-type > div {
  flex: 1 1 100%;
}

/* Step 1 is intentionally a small prompt builder: choices first, upload
   shortcuts second, with no duplicate wizard explanation or prompt preview. */
.mct-simple-creator {
  max-width: 900px;
  margin: 0 auto;
}
#screen-mode03 .mct-simple-title {
  margin: 18px 0;
  color: var(--mct-ink);
  font-family: var(--sans);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.04em;
}
.mct-simple-form {
  padding: 22px !important;
  border-top: 3px solid var(--accent);
}
.mct-simple-fields {
  display: grid;
  gap: 20px;
}
.mct-simple-label {
  margin-bottom: 9px;
  color: var(--mct-ink);
  font-size: 13px;
  font-weight: 600;
}
.mct-simple-label span {
  color: var(--mct-muted);
  font-weight: 400;
}
.mct-choice-row {
  display: flex;
  gap: 7px;
  align-items: center;
}
.mct-choice-wrap {
  flex-wrap: wrap;
}
.mct-skin-row button {
  min-width: 39px;
  min-height: 38px;
}
.mct-hair-style-row {
  margin-top: 7px;
}
.mct-simple-form textarea {
  min-height: 74px;
}
.mct-simple-submit {
  width: 100%;
  margin-top: 22px;
  justify-content: center;
}
.mct-simple-uploads {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  margin-top: 20px;
}
.mct-simple-uploads > .mct-upload-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  min-height: 188px;
  padding: 20px;
  margin: 0 !important;
}
.mct-simple-uploads .mct-upload-title {
  display: block;
  font-weight: 600;
  line-height: 1.35;
}
.mct-simple-uploads .mct-upload-content {
  min-width: 0;
}
.mct-simple-uploads .mct-url-option,
.mct-simple-uploads .mct-url-controls {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.mct-simple-uploads .mct-url-option .mct-upload-content,
.mct-simple-uploads .mct-url-option .mct-upload-title {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mct-simple-uploads .mct-upload-copy {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
}
.mct-simple-uploads .mct-upload-button,
.mct-simple-uploads > .mct-upload-card > .btn {
  width: 100%;
  box-sizing: border-box;
  flex: 0 0 auto;
  text-align: center;
}
.mct-simple-uploads .mct-file-input {
  display: none !important;
}
.mct-url-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mct-url-controls input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border, #ddd);
  border-radius: 8px;
  background: var(--bg, #fff);
  color: inherit;
  font: inherit;
  font-size: 14px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mct-simple-back {
  margin-top: 12px;
}

/* Candidate gallery. */
.mct-page [style*="grid-template-columns:repeat(auto-fill"] {
  gap: 16px !important;
}
.mct-page [style*="grid-template-columns:repeat(auto-fill"] .card {
  border-radius: 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mct-page [style*="grid-template-columns:repeat(auto-fill"] .card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 14px 30px rgba(33,26,45,.12) !important;
}
.mct-page [style*="grid-template-columns:repeat(auto-fill"] .card > div {
  letter-spacing: .01em;
}
/* Completion and save states. */
.mct-page .card[style*="max-width:440px"] {
  max-width: 620px !important;
}
.mct-page .card[style*="max-width:440px"] img {
  border-color: var(--accent) !important;
  border-radius: 12px !important;
}
.mct-page .card[style*="max-width:440px"] > div:last-child {
  padding-top: 4px;
}
@media (max-width: 820px) {
  .mct-page { padding-top: 12px; }
  .mct-page .m3-split { grid-template-columns: 1fr; }
  .mct-page .m3-split > div > .card[style*="padding:0"] {
    max-width: 360px;
  }
}
@media (max-width: 560px) {
  .mct-page { margin-top: -4px; padding-bottom: 24px; }
  .mct-topline { padding-bottom: 15px; }
  .mct-studio-note { font-size: 11px; }
  .mct-lane-chip { padding: 7px 9px; font-size: 10px; }
  .mct-stepper { gap: 3px; padding: 7px; }
  .mct-step { justify-content: center; padding: 7px 3px; }
  .mct-step:not(:last-child)::after { display: none; }
  .mct-step-label { display: none; }
  .mct-page > h1 { font-size: 32px; }
  .mct-page .m3-split > .card:first-child { padding: 20px !important; }
  .mct-simple-form { padding: 18px !important; }
  .mct-simple-uploads { grid-template-columns: 1fr; }
  .mct-simple-uploads > .mct-upload-card { min-height: 0; }
}

/* ── Per-video chat (UGC) — Claude-style spacious layout ───────────────── */
.m3chat { margin-top: 14px; border: 1px solid var(--border, #e5e5e5); border-radius: 16px; background: var(--surface, #fff); overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.m3chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border, #e5e5e5); background: rgba(122,92,142,0.06); }
.m3chat-title { font-size: 13px; font-weight: 600; color: var(--fg, #1a1a1a); }
.m3chat-credits { font: 600 11px/1 var(--mono, monospace); color: #6D28D9; background: rgba(124,58,237,0.10); border: 1px solid rgba(124,58,237,0.22); border-radius: 20px; padding: 4px 10px; white-space: nowrap; }
.m3chat-thread { display: flex; flex-direction: column; gap: 16px; padding: 20px 18px; max-height: 440px; overflow-y: auto; }
.m3chat-empty { font-size: 13px; line-height: 1.6; color: var(--muted, #888); padding: 4px 0; }
/* Message row wrappers — avatar dot + bubble */
.m3msg-row-ai { display: flex; align-items: flex-end; gap: 10px; }
.m3msg-row-user { display: flex; align-items: flex-end; justify-content: flex-end; gap: 10px; }
.m3msg-avatar { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.m3msg-avatar-ai { background: rgba(122,92,142,0.12); color: var(--accent, #7A5C8E); border: 1px solid rgba(122,92,142,0.2); }
.m3msg-avatar-user { background: var(--accent, #7A5C8E); color: #fff; }
.m3msg { max-width: 78%; padding: 11px 15px; font-size: 14px; line-height: 1.55; word-break: break-word; white-space: normal; border-radius: 18px; }
.m3msg-user { background: var(--accent, #7A5C8E); color: #fff; border-bottom-right-radius: 4px; }
.m3msg-ai { background: var(--surface2, #f4f5f9); color: var(--fg, #1a1a1a); border: 1px solid var(--border, #e8e8e8); border-bottom-left-radius: 4px; }
.m3chat-switch { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 18px 0; }
.m3chat-switch-btn { flex: 0 0 auto; cursor: pointer; }
.m3chat-switch .muted { font-size: 12px; }
.m3chat-compose { display: flex; gap: 10px; align-items: flex-end; padding: 14px 18px; border-top: 1px solid var(--border, #e5e5e5); background: var(--surface, #fff); }
.m3chat-compose textarea { flex: 1; resize: none; font-family: inherit; font-size: 14px; line-height: 1.5; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--border, #e5e5e5); background: var(--bg, #fafafa); color: var(--fg, #1a1a1a); max-height: 140px; transition: border-color 0.15s; }
.m3chat-compose textarea:focus { outline: none; border-color: var(--accent, #7A5C8E); background: #fff; }
.m3chat-compose button { flex: 0 0 auto; align-self: stretch; min-width: 44px; border-radius: 14px; }

/* ── Edit-this-video clickable bar (toggles the INLINE editor below it) ──── */
.m3edit-bar { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--border, #2a2a35); border-radius: 12px; background: rgba(124,58,237,0.08); cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; }
.m3edit-bar:hover, .m3edit-bar:focus-visible { background: rgba(124,58,237,0.16); border-color: var(--accent, #7A5C8E); outline: none; }
.m3edit-bar-open { background: rgba(124,58,237,0.16); border-color: var(--accent, #7A5C8E); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.m3edit-bar-title { font-size: 13px; font-weight: 700; color: var(--fg, #e8e8ef); }
.m3edit-bar-hint { font-size: 11.5px; color: var(--muted, #888); }

/* ── Inline "Edit video" editor: plan summary + chat, rendered in the card ── */
.m3editor-inline { border: 1px solid var(--accent, #7A5C8E); border-top: none; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; padding: 14px; background: var(--surface, #14141b); animation: m3fade-in 0.16s ease-out; }
.m3editor-inline .m3chat { margin-top: 12px; }
@keyframes m3fade-in { from { opacity: 0.3; } to { opacity: 1; } }

/* ── Plan & prompts summary (collapsible) ──────────────────────────────── */
.m3plan { border: 1px solid var(--border, #2a2a35); border-radius: 10px; background: var(--bg, #0e0e14); overflow: hidden; }
.m3plan > summary { cursor: pointer; padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--fg, #e8e8ef); background: rgba(124,58,237,0.08); list-style: none; }
.m3plan > summary::-webkit-details-marker { display: none; }
.m3plan-meta { padding: 10px 14px; font-size: 12px; line-height: 1.6; color: var(--muted, #888); border-top: 1px solid var(--border, #2a2a35); }
.m3ai-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; color: #7c3aed; background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.3); vertical-align: middle; white-space: nowrap; }
.m3plan-scenes { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 12px; }
.m3plan-scene { display: flex; gap: 10px; padding: 8px 10px; border: 1px solid var(--border, #2a2a35); border-radius: 8px; background: var(--surface2, #20202b); }
.m3plan-scene-n { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--accent, #c4b5fd); white-space: nowrap; }
.m3plan-scene-body { flex: 1; min-width: 0; font-size: 12px; line-height: 1.5; color: var(--fg, #e8e8ef); display: flex; flex-direction: column; gap: 3px; }
.m3plan-k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #888); margin-right: 5px; }
.m3plan-scene--clickable { cursor: pointer; align-items: center; transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease; }
.m3plan-scene--clickable:hover, .m3plan-scene--clickable:focus-visible { border-color: var(--accent, #7A5C8E); background: rgba(124,58,237,0.10); transform: translateY(-1px); outline: none; }
.m3plan-edit { flex: 0 0 auto; margin-left: auto; align-self: center; font-size: 10.5px; font-weight: 700; color: var(--accent, #c4b5fd); white-space: nowrap; opacity: 0.85; }
.m3plan-scene--clickable:hover .m3plan-edit, .m3plan-scene--clickable:focus-visible .m3plan-edit { opacity: 1; }

/* ── Action receipt chips (discrete labeled card per agent step) ────────── */
.m3receipt { align-self: flex-start; max-width: 92%; display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 10px; font-size: 12px; font-weight: 600; border: 1px solid var(--border, #2a2a35); background: var(--surface2, #20202b); color: var(--fg, #e8e8ef); }
.m3receipt-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; font-weight: 700; flex: 0 0 auto; color: #fff; }
.m3receipt-ok { border-color: rgba(52,168,83,0.45); background: rgba(52,168,83,0.12); }
.m3receipt-ok .m3receipt-icon { background: #34a853; }
.m3receipt-err { border-color: rgba(220,53,69,0.45); background: rgba(220,53,69,0.12); }
.m3receipt-err .m3receipt-icon { background: #dc3545; }
.m3receipt-label { line-height: 1.35; }
.m3receipt-pending { border-color: rgba(120,120,160,0.45); background: var(--surface2, #20202b); }
.m3receipt-pending .m3receipt-icon { background: transparent; }
.m3receipt-spin { display: inline-block; animation: spin 1.1s linear infinite; }

/* ── Scene strip (click a scene thumbnail to target it) ────────────────── */
.m3scene-strip { display: flex; gap: 8px; padding: 10px 12px; overflow-x: auto; border-bottom: 1px solid var(--border, #2a2a35); scrollbar-width: thin; }
.m3scene-cell { flex: 0 0 auto; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; border: 1px solid var(--border, #2a2a35); border-radius: 8px; background: transparent; cursor: pointer; overflow: hidden; transition: border-color 0.12s ease, transform 0.12s ease; }
.m3scene-cell:hover, .m3scene-cell:focus-visible { border-color: var(--accent, #7A5C8E); transform: translateY(-1px); outline: none; }
.m3scene-cell img { width: 52px; height: 78px; object-fit: cover; display: block; background: #000; }
.m3scene-ph { width: 52px; height: 78px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--surface2, #20202b); }
.m3scene-num { font-size: 9px; font-weight: 600; color: var(--muted, #888); padding-bottom: 3px; }

@media (max-width: 860px) {
  .m3plan-scene { flex-direction: column; gap: 4px; }
}

/* ── Mode 03 · Focus editor (Claude-style split: video left, chat right) ──── */
/* The focus overlay is mounted on document.body (NOT inside #screen-mode03). The
   app is light, so re-declare the light token set here — including the overlay's
   extra aliases (--fg/--border/--card/--surface2 etc.) so the .m3focus* rules
   below resolve to light values instead of their dark inline fallbacks. */
.m3focus-overlay {
  --bg: #fff; --bg-soft: #FFF6EF; --surface: #fff; --surface2: #FBEFE6; --surface-2: #FBEFE6;
  --card: #fff; --card-bg: #fff; --paper: #fff; --paper-2: #FBEFE6;
  --ink: #1E1330; --ink-soft: #4a3f5a; --ink-2: #4a3f5a; --fg: #1E1330; --text: #1E1330; --text-secondary: #4a3f5a;
  --muted: #8a7c98; --muted-text: #8a7c98; --text-muted: #8a7c98;
  --line: rgba(30,19,48,.10); --line-strong: rgba(30,19,48,.18); --border: rgba(30,19,48,.14);
  --accent: #FF2E7E; --accent-soft: #FFE0EC; --accent-deep: #c41f5f;
  --pink: #FF2E7E; --violet: #7B3FF2; --sky: #2FA8FF; --tang: #FF7A1A; --teal: #12C2A0; --yellow: #FFC93C;
  --green: #12C2A0; --green-soft: #D6F7EF;
  --amber: #FF7A1A; --amber-soft: #FFE9D6;
  --purple: #7B3FF2; --purple-soft: #EDE5FF;
  --red: #e5396b; --success: #12C2A0; --success-bg: #D6F7EF; --success-line: rgba(18,194,160,.3);
  --warn-bg: #FFF4DC; --warn-line: #FFC93C; --err-bg: #fff0f4; --err-line: #ffc6d8; --err-ink: #e5396b; --ph-bg: #FBEFE6;
  --shadow-sm: 0 1px 3px rgba(30,19,48,.05); --shadow-md: 0 6px 18px rgba(30,19,48,.08); --shadow-lg: 0 18px 44px -16px rgba(30,19,48,.18);
  color: var(--ink);
  position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: m3focusFade 0.16s ease;
}
@keyframes m3focusFade { from { opacity: 0; } to { opacity: 1; } }
.m3focus { width: min(1180px, 100%); height: min(880px, 92vh); background: var(--bg, #0e0e14); border: 1px solid var(--border, #2a2a35); border-radius: 16px; box-shadow: 0 30px 90px rgba(0,0,0,0.55); display: flex; flex-direction: column; overflow: hidden; }
.m3focus-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--border, #2a2a35); background: rgba(124,58,237,0.08); }
.m3focus-title { font: 700 14px/1.2 var(--serif, inherit); color: var(--fg, #e8e8ef); }
.m3focus-close { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted, #888); padding: 2px 9px; border-radius: 8px; transition: background 0.12s ease, color 0.12s ease; }
.m3focus-close:hover { background: rgba(0,0,0,0.05); color: var(--fg, #1a1815); }
.m3focus-body { flex: 1; min-height: 0; display: flex; }
.m3focus-video { flex: 1 1 54%; min-width: 0; padding: 18px; overflow-y: auto; border-right: 1px solid var(--border, #2a2a35); display: flex; flex-direction: column; gap: 12px; background: var(--surface, #14141b); }
.m3focus-chat { flex: 1 1 46%; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.m3focus-chat .m3chat { margin: 0; border: none; border-radius: 0; height: 100%; display: flex; flex-direction: column; min-height: 0; }
.m3focus-chat .m3chat-thread { max-height: none; flex: 1 1 auto; }
.m3focus-videoEl { width: 100%; max-width: 340px; aspect-ratio: 9/16; max-height: 56vh; border-radius: 12px; background: #000; display: block; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.m3focus-videoWrap { position: relative; display: flex; justify-content: center; }
.m3focus-updating { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(0,0,0,0.55); border-radius: 12px; color: #fff; font-size: 12.5px; font-weight: 600; text-align: center; padding: 0 24px; }
.m3focus-spinner { width: 26px; height: 26px; border: 3px solid rgba(255,255,255,0.25); border-top-color: #fff; border-radius: 50%; animation: m3spin 0.8s linear infinite; }
.m3focus-progress { width: 78%; max-width: 240px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.22); overflow: hidden; margin-top: 4px; }
.m3focus-progress-bar { height: 100%; width: 8%; border-radius: 999px; background: linear-gradient(90deg, #a78bca, #fff); transition: width 0.6s ease; }
@keyframes m3spin { to { transform: rotate(360deg); } }
.m3focus-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.m3focus-hint { font-size: 11.5px; line-height: 1.5; color: var(--muted, #888); text-align: center; }
@media (max-width: 860px) {
  .m3focus-overlay { padding: 0; }
  .m3focus { width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; border: none; }
  .m3focus-body { flex-direction: column; }
  .m3focus-video { flex: 0 0 auto; max-height: 46vh; border-right: none; border-bottom: 1px solid var(--border, #2a2a35); }
  .m3focus-chat { flex: 1 1 auto; }
  .m3focus-videoEl { max-height: 34vh; }
}

/* ── Mode 03 · Studio (live chat-driven builder) ─────────────────────────── */
.m3lane-switch { display: inline-flex; gap: 6px; padding: 4px; margin-bottom: 18px; border: 1px solid var(--border, #2a2a35); border-radius: 14px; background: var(--surface2, #20202b); }
.m3lane-tab { display: flex; align-items: center; gap: 9px; padding: 8px 16px; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; transition: background 0.12s ease, border-color 0.12s ease; }
.m3lane-tab:hover { background: rgba(124,58,237,0.08); }
.m3lane-tab.active { background: rgba(124,58,237,0.16); border-color: var(--accent, #7A5C8E); }
.m3lane-ico { display: flex; align-items: center; color: var(--muted, #888); transition: color 0.12s ease; }
.m3lane-ico .m3ico-svg { width: 17px; height: 17px; display: block; }
.m3lane-tab.active .m3lane-ico { color: var(--accent, #7A5C8E); }
.m3lane-txt { display: flex; flex-direction: column; }
.m3lane-txt strong { font-size: 13px; color: var(--fg, #e8e8ef); }
.m3lane-hint { font-size: 10.5px; color: var(--muted, #888); }
/* Secondary (video-style) switcher: a lighter weight than the primary lane
   switch so the two controls read as a hierarchy, not as competing twins. */
.m3lane-switch--sub { background: transparent; border: none; padding: 0; gap: 4px; margin: 12px 0 0; }
.m3lane-switch--sub .m3lane-tab { padding: 7px 13px; border-radius: 9px; }
.m3lane-switch--sub .m3lane-ico .m3ico-svg { width: 15px; height: 15px; }
.m3lane-switch--sub .m3lane-txt strong { font-size: 12.5px; }
.m3hero-accent { color: var(--accent, #7A5C8E); }

.m3s-model-row { display: flex; gap: 14px; flex-wrap: wrap; }
.m3s-model { width: 384px; max-width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 0; border: 2px solid var(--border, #2a2a35); border-radius: 12px; background: transparent; cursor: pointer; overflow: hidden; transition: border-color 0.12s ease, transform 0.12s ease; }
.m3s-model:hover { transform: translateY(-1px); }
.m3s-model.sel { border-color: var(--accent, #7A5C8E); }
.m3s-model img { width: 384px; max-width: 100%; height: 480px; object-fit: cover; object-position: top center; display: block; background: #000; }
.m3s-model-ph { width: 384px; max-width: 100%; height: 480px; display: flex; align-items: center; justify-content: center; font-size: 64px; background: var(--surface2, #20202b); }
.m3s-model-name { font-size: 16px; font-weight: 600; color: var(--fg, #e8e8ef); padding: 0 6px 10px; text-align: center; }

/* Mode 04 iterative creator — version-tree node tiles */
.m3mc-tile { position: relative; width: 96px; height: 128px; padding: 0; border: 2px solid var(--border, #ddd); border-radius: 9px; background: var(--surface2, #f2f2f5); cursor: pointer; overflow: hidden; transition: border-color 0.12s ease, transform 0.12s ease; }
.m3mc-tile:hover:not(:disabled) { transform: translateY(-1px); }
.m3mc-tile.sel { border-color: var(--accent, #7A5C8E); box-shadow: 0 0 0 2px var(--accent, #7A5C8E); }
.m3mc-tile:disabled { cursor: default; }
.m3mc-tile img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.m3mc-badge { position: absolute; top: 4px; left: 4px; font-size: 11px; line-height: 1; padding: 2px 4px; border-radius: 5px; background: rgba(0,0,0,0.55); color: #fff; }

.m3s-garment-preview img { width: 120px; height: 150px; object-fit: cover; border-radius: 10px; background: #000; }
.m3s-garment-ph { width: 120px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px dashed var(--border, #2a2a35); border-radius: 10px; font-size: 26px; color: var(--muted, #888); }
.m3s-garment-ph span { font-size: 11px; }

.m3s-editor { display: grid; grid-template-columns: 1fr 420px; gap: 18px; align-items: start; }
.m3s-stage { display: flex; flex-direction: column; gap: 12px; }
.m3s-stage-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--muted, #888); text-transform: uppercase; letter-spacing: 0.04em; }
.m3s-preview { display: flex; align-items: center; justify-content: center; aspect-ratio: 9 / 16; max-height: 60vh; border: 1px solid var(--border, #2a2a35); border-radius: 14px; background: #000; overflow: hidden; }
.m3s-preview video, .m3s-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.m3s-preview-ph { padding: 24px; text-align: center; font-size: 14px; color: #fff; }
.m3s-preview-ph span { display: block; margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.7); }
.m3s-strip-wrap .m3scene-strip { border: 1px solid var(--border, #2a2a35); border-radius: 12px; border-bottom: 1px solid var(--border, #2a2a35); }

.m3s-meter { padding: 12px 14px; border: 1px solid var(--border, #2a2a35); border-radius: 12px; background: var(--surface2, #20202b); }
.m3s-meter-top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted, #888); }
.m3s-meter-top strong { color: var(--fg, #e8e8ef); }
.m3s-meter-bar { height: 7px; margin-top: 8px; border-radius: 4px; background: var(--border, #2a2a35); overflow: hidden; }
.m3s-meter-fill { height: 100%; border-radius: 4px; background: var(--accent, #7A5C8E); transition: width 0.25s ease; }
.m3s-meter-fill.near { background: #d9822b; }

.m3s-rail { position: sticky; top: 16px; }
.m3s-rail .m3chat { border: 1px solid var(--border, #2a2a35); border-radius: 14px; background: var(--surface, #16161d); overflow: hidden; }
.m3s-rail .m3chat-thread { max-height: 52vh; }

@media (max-width: 900px) {
  .m3s-editor { grid-template-columns: 1fr; }
  .m3s-rail { position: static; }
}

/* ── "Studio" dashboard · light (scoped to #screen-dashboard) ─────────────── */
.main:has(#screen-dashboard.active) {
  background: transparent;
}
#screen-dashboard.dark-home { color: var(--ink); max-width: 1240px; }

.fh-hero { padding-top: 6px; margin-bottom: 40px; }
.fh-engine-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--line); border-radius: 100px; padding: 7px 13px;
  margin-bottom: 22px;
}
.fh-spark { font-size: 12px; }
.fh-h1 { font: 600 56px/1.05 var(--serif); letter-spacing: -0.02em; color: var(--ink); max-width: 760px; margin-bottom: 18px; }
.fh-grad { background: linear-gradient(100deg, var(--accent-deep), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fh-lede { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 640px; margin-bottom: 26px; }
.fh-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.fh-btn-primary {
  background: linear-gradient(100deg, var(--accent-deep), var(--accent)); color: #fff; border: none;
  border-radius: 100px; padding: 13px 26px; font: 600 14px/1 var(--sans); cursor: pointer;
  box-shadow: 0 8px 24px -8px rgba(255,46,126,.5); transition: transform .15s;
}
.fh-btn-primary:hover { transform: translateY(-2px); }
.fh-btn-ghost {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 100px;
  padding: 13px 22px; font: 600 14px/1 var(--sans); cursor: pointer; transition: .15s;
}
.fh-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.fh-dashboard-head {
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
  margin-bottom: 46px;
}
.fh-dashboard-head .fh-h1 { margin: 14px 0 10px; }
.fh-dashboard-head .fh-lede { margin: 0; }
.fh-dashboard-section { margin-bottom: 46px; }
.fh-dashboard-section .fh-section-head { margin-bottom: 18px; }
.fh-dashboard-video-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.fh-dashboard-model-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px;
}
.fh-used-model-card {
  display: block; width: 100%; padding: 0; overflow: hidden; text-align: left;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform .2s var(--pop), border-color .2s;
}
.fh-used-model-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.fh-used-model-media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg); }
.fh-used-model-info {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 12px 13px 13px;
}
.fh-used-model-info strong { font: 600 16px/1.2 var(--serif); }
.fh-used-model-info span { color: var(--muted); font: 500 11px/1.3 var(--sans); white-space: nowrap; }
@media (max-width: 900px) {
  .fh-dashboard-video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .fh-dashboard-head { align-items: flex-start; flex-direction: column; margin-bottom: 34px; }
  .fh-dashboard-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .fh-dashboard-model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .fh-used-model-info { align-items: flex-start; flex-direction: column; gap: 3px; }
}

.fh-strip {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px 22px;
  margin-bottom: 44px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  position: relative; overflow: hidden; box-shadow: var(--shadow-sm);
}
.fh-strip::after { content: ""; position: absolute; inset: 0 0 auto auto; width: 240px; height: 100%; background: linear-gradient(270deg, var(--accent-soft), transparent); pointer-events: none; }
.fh-strip-label { font: 600 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; }
.fh-strip-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.fh-chip { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 var(--sans); color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; }
.fh-chip-n { font-weight: 700; color: var(--ink); }
.fh-chip-accent { background: var(--accent-soft); border-color: var(--line); color: var(--accent-deep); }
.fh-chip-accent .fh-chip-n { color: var(--accent-deep); }
.fh-chip-emerald { background: var(--green-soft); border-color: var(--line); color: var(--green); }
.fh-chip-emerald .fh-chip-n { color: var(--green); }
.fh-chip-blue { background: #E6EEFB; border-color: var(--line); color: #2563EB; }
.fh-chip-blue .fh-chip-n { color: #2563EB; }
.fh-chip-amber { background: var(--amber-soft); border-color: var(--line); color: var(--amber); }
.fh-chip-amber .fh-chip-n { color: var(--amber); }

.fh-section { margin-bottom: 44px; }
.fh-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.fh-h2 { font: 600 24px/1.1 var(--serif); color: var(--ink); }
.fh-sub { color: var(--muted); font-weight: 400; font-size: 16px; font-family: var(--sans); }
.fh-link { background: none; border: none; color: var(--ink-soft); font: 600 13px/1 var(--sans); cursor: pointer; transition: .15s; white-space: nowrap; }
.fh-link:hover { color: var(--accent); }

.fh-lane-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fh-lane-card {
  min-height: 142px; padding: 20px 16px; text-align: left; color: var(--ink);
  background: var(--surface); border: 2px solid var(--ink); border-radius: 16px;
  box-shadow: 5px 5px 0 var(--ink); cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.fh-lane-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.fh-lane-icon { display: block; font-size: 25px; line-height: 1; margin-bottom: 12px; }
.fh-lane-card strong { display: block; font: 700 14px/1.2 var(--sans); }
.fh-lane-card > span:last-child { display: block; margin-top: 6px; color: var(--muted); font: 400 11px/1.45 var(--sans); }
@media (max-width: 900px) { .fh-lane-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .fh-lane-grid { grid-template-columns: 1fr; }
  .fh-lane-card { min-height: 0; }
}

.fh-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1100px) { .fh-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .fh-grid { grid-template-columns: repeat(2, 1fr); } }

.fh-gallery-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin: -6px 0 18px; }
.fh-gallery-toolbar label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 600; }
.fh-gallery-toolbar input { min-height: 32px; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: 8px; padding: 5px 8px; background: var(--surface); color: var(--ink); font: 500 12px/1 var(--sans); }
.fh-gallery-toolbar input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.fh-gallery-search { flex: 1; min-width: min(100%, 220px); }
.fh-gallery-search input { width: 100%; }
.fh-gallery-count { color: var(--muted); font-size: 12px; margin-left: auto; padding-bottom: 7px; }
@media (max-width: 680px) {
  .fh-gallery-toolbar { align-items: stretch; }
  .fh-gallery-toolbar label { flex: 1 1 130px; }
  .fh-gallery-toolbar .btn { align-self: end; }
  .fh-gallery-count { width: 100%; margin-left: 0; padding-bottom: 0; }
}

.fh-card { position: relative; display: block; aspect-ratio: 9/16; border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: transform .25s; cursor: pointer; box-shadow: var(--shadow-sm); }
.fh-card:hover { transform: translateY(-4px); }
.fh-card-media { width: 100%; height: 100%; object-fit: cover; opacity: .95; transition: opacity .25s; background: #000; }
.fh-card:hover .fh-card-media { opacity: 1; }
.fh-card-overlay { position: absolute; inset: 0; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.05) 45%, transparent); }
.fh-card-top { display: flex; }
.fh-badge { font: 700 9px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; padding: 5px 8px; border-radius: 100px; backdrop-filter: blur(8px); }
.fh-badge-emerald { background: rgba(16,185,129,.2); color: #6EE7B7; border: 1px solid rgba(16,185,129,.3); }
.fh-badge-accent { background: rgba(224,101,63,.2); color: #F2784B; border: 1px solid rgba(224,101,63,.3); }
.fh-badge-neutral { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.fh-card-bottom { color: #fff; }
.fh-card-persona { font: 600 11px/1 var(--sans); color: #C8C8CC; margin-bottom: 5px; }
.fh-card-title { font: 600 13px/1.3 var(--sans); color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.fh-grid-fleet { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .fh-grid-fleet { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .fh-grid-fleet { grid-template-columns: repeat(2, 1fr); } }
.fh-model-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; cursor: pointer; transition: transform .2s var(--pop), border-color .2s; box-shadow: var(--shadow-sm); }
.fh-model-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.fh-model-media { position: relative; aspect-ratio: 3/4; border-radius: 11px; overflow: hidden; margin-bottom: 11px; background: var(--bg); }
.fh-model-video { width: 100%; height: 100%; display: block; object-fit: cover; }
.fh-model-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.fh-model-fallback { width: 100%; height: 100%; align-items: center; justify-content: center; display: flex; font: 400 40px/1 var(--serif); color: #fff; }
.fh-model-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), transparent 50%); }
.fh-model-name { position: absolute; bottom: 9px; left: 10px; z-index: 1; font: 600 16px/1 var(--serif); color: #fff; }
.fh-model-footage { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 4px 7px; border-radius: 999px; background: rgba(10,8,16,.72); color: #fff; font: 700 8px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.fh-model-quirk { font-size: 12px; color: var(--muted); line-height: 1.4; margin-bottom: 8px; min-height: 32px; }
.fh-model-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.fh-tag { font: 600 10px/1 var(--sans); padding: 4px 8px; border-radius: 100px; background: var(--bg); color: var(--ink-soft); }
.fh-tag-accent { background: var(--accent-soft); color: var(--accent-deep); }
.fh-tag-amber { background: var(--amber-soft); color: var(--amber); }

.fh-loading, .fh-empty { grid-column: 1 / -1; color: var(--muted); font-size: 14px; padding: 28px 0; text-align: center; }
.fh-empty { border: 1px dashed var(--line-strong); border-radius: 14px; }

/* ── fun-pass additions: hero glow, credits strip, Factory Talent teaser ── */
.fh-hero-fun .fh-h1 { position: relative; }
.fh-strip-fun { display: flex; }
.fh-talent-teaser {
  background: linear-gradient(135deg, #FFE9A8, var(--yellow));
  border: 2.5px solid var(--ink); border-radius: 24px; padding: 26px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  cursor: pointer; box-shadow: 7px 7px 0 var(--ink); transition: transform .2s var(--pop);
}
.fh-talent-teaser:hover { transform: translateY(-3px); }
.fh-talent-copy h3 { font: 600 22px/1.1 var(--serif); color: var(--ink); margin: 0 0 6px; }
.fh-talent-copy p { font-size: 13.5px; color: var(--ink-soft); max-width: 420px; margin: 0; }
.fh-talent-cta { font: 700 14px/1 var(--sans); color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 100px; padding: 11px 20px; white-space: nowrap; }

/* ── individual model profile ── */
.fh-profile-hero { display: flex; gap: 32px; align-items: center; margin-bottom: 36px; flex-wrap: wrap; }
.fh-profile-portrait { width: 160px; height: 160px; border-radius: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font: 400 64px/1 var(--serif); color: #fff; box-shadow: 8px 8px 0 var(--ink); }
.fh-scene-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.fh-scene-chip { background: var(--surface); border: 2px solid var(--ink); border-radius: 100px; padding: 9px 18px; font: 600 13px/1 var(--sans); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
/* Scene capture cards make a model's rotation feel concrete instead of
   leaving the hire profile as a list of room names. */
.fh-scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.fh-scene-card { border: 2px solid var(--ink); border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: 4px 4px 0 var(--ink); }
.fh-scene-thumb { aspect-ratio: 4/3; position: relative; display: flex; align-items: center; justify-content: center; }
.fh-scene-glyph { font-size: 34px; color: rgba(255,255,255,.85); }
.fh-scene-label { padding: 9px 11px 2px; font: 700 12.5px/1.2 var(--sans); color: var(--ink); }
.fh-scene-light { padding: 0 11px 10px; font: 500 11px/1.2 var(--sans); color: var(--muted); }
@media (max-width: 640px) { .fh-profile-hero { flex-direction: column; align-items: flex-start; } }

/* ── workspace readability pass ────────────────────────────────────────────
   Factory screens are working canvases, not dense dashboards. Keep the playful
   visual language, but give body copy, controls, and section rhythm enough
   scale that the model builder and Advanced lane are comfortable to operate.
*/
html, body { font-size: 16px; }
body { line-height: 1.6; }

.screen {
  padding: 96px 64px 64px;
  max-width: 1480px;
}
.screen h1 { font-size: 48px; line-height: 1.08; }
.screen h2 { font-size: 30px; line-height: 1.15; }
.screen h3 { font-size: 22px; line-height: 1.25; }
.screen h4 { font-size: 16px; line-height: 1.35; }
.screen p { line-height: 1.65; }
.screen .muted,
.screen .lede { font-size: 14px !important; line-height: 1.65; }
.screen .eyebrow { font-size: 12px !important; letter-spacing: .2em; }
.screen label { font-size: 13px !important; line-height: 1.4; }
.screen input,
.screen select,
.screen textarea { font-size: 14px !important; line-height: 1.45; }
.screen .btn { font-size: 14px; padding: 12px 18px; min-height: 42px; }
.screen .btn-sm { font-size: 13px; padding: 9px 14px; min-height: 36px; }
.screen .card {
  border-radius: 18px;
  padding: 28px;
}
.screen .section { margin-bottom: 40px; }

.m3lane-switch {
  gap: 8px;
  padding: 6px;
  margin-bottom: 26px;
  border-radius: 16px;
  flex-wrap: wrap;
  max-width: 100%;
}
.m3lane-tab { padding: 11px 16px; flex: 1 1 180px; }
.m3lane-txt strong { font-size: 15px; }
.m3lane-hint { font-size: 12px; line-height: 1.35; }
.m3lane-switch--sub .m3lane-txt strong { font-size: 14px; }

.fh-h1 { font-size: 52px; }
.fh-lede { font-size: 18px; line-height: 1.65; }
.fh-h2 { font-size: 28px; }
.fh-sub { font-size: 18px; }
.fh-link { font-size: 15px; }
.fh-lane-card strong { font-size: 16px; }
.fh-lane-card > span:last-child { font-size: 13px; line-height: 1.55; }
.fh-model-quirk { font-size: 14px; line-height: 1.55; }
.fh-tag { font-size: 11px; }

@media (max-width: 900px) {
  .screen { padding: 84px 28px 48px; }
  .screen h1, .fh-h1 { font-size: 40px; }
}
@media (max-width: 560px) {
  .screen { padding: 76px 16px 36px; }
  .screen h1, .fh-h1 { font-size: 34px; }
  .screen h2 { font-size: 26px; }
  .screen .card { padding: 20px; }
  .m3lane-tab { padding: 10px 11px; flex-basis: 100%; }
  .m3lane-hint { display: none; }
}

/* ── Global readability / type refinement ───────────────────────────────────
   Keep the existing Factory palette, but stop treating the workspace like a
   compact admin console. The app is used while composing creative work, so
   body copy and controls need a confident reading size and clean rasterization. */
html, body {
  font-size: 17px;
  font-synthesis: none;
  text-rendering: geometricPrecision;
}
body { line-height: 1.65; }
.screen h1 { font-size: 50px; font-weight: 700; letter-spacing: -.045em; }
.screen h2 { font-size: 32px; font-weight: 700; letter-spacing: -.035em; }
.screen h3 { font-size: 23px; font-weight: 700; letter-spacing: -.02em; }
.screen h4 { font-size: 17px; font-weight: 700; }
.screen p { font-size: 15px; line-height: 1.7; }
.screen .muted,
.screen .lede { font-size: 15px !important; line-height: 1.7; }
.screen .eyebrow { font-size: 13px !important; letter-spacing: .17em; }
.screen label { font-size: 14px !important; line-height: 1.45; }
.screen input,
.screen select,
.screen textarea { font-size: 15px !important; line-height: 1.5; }
.screen .btn { font-size: 15px; padding: 13px 20px; min-height: 46px; }
.screen .btn-sm { font-size: 14px; padding: 10px 15px; min-height: 40px; }
.screen .section { margin-bottom: 44px; }
.screen .m3lane-txt strong { font-size: 16px; }
.screen .m3lane-hint { font-size: 13px; }

/* The upload route is intentionally prominent in the creator, not buried
   under the generated-avatar controls. */
.mct-upload-card {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 18px;
  padding: 17px 18px;
  border: 1px solid rgba(255, 46, 126, .22);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(255, 224, 236, .72), rgba(237, 229, 255, .62)),
    rgba(255,255,255,.74);
  box-shadow: 0 8px 24px rgba(33,26,45,.05);
}
.mct-upload-card > div:first-child { min-width: 0; flex: 1; }
.mct-upload-kicker {
  color: var(--accent-deep);
  font: 700 10px/1.2 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mct-upload-title {
  margin-top: 4px;
  color: var(--mct-ink, #211a2d);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.mct-upload-copy {
  max-width: 560px;
  margin-top: 4px;
  color: var(--mct-soft-ink, #5e566b);
  font-size: 13px;
  line-height: 1.55;
}
.mct-upload-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  flex: 0 0 auto;
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff !important;
  cursor: pointer;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
  line-height: 1.2 !important;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.mct-upload-button:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(196,31,95,.72);
}
.mct-upload-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.mct-upload-note {
  display: none;
  color: var(--mct-muted, #82798f);
  font-size: 11px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .screen h1 { font-size: 44px; }
}
@media (max-width: 560px) {
  .screen h1, .fh-h1 { font-size: 37px; }
  .screen h2 { font-size: 28px; }
  .mct-upload-card {
    display: block;
    padding: 16px;
  }
  .mct-upload-button {
    width: 100%;
    margin-top: 14px;
  }
  .mct-upload-note { display: block; margin-top: 10px; }
}

/* ── roster model showcase ─────────────────────────────────────────────────
   The profile is a viewing surface first: the reel earns the click, then the
   personality explains why this model is the right creative choice. */
.fh-profile-back {
  display: inline-flex;
  margin-bottom: 24px;
  padding: 0;
  font-size: 15px;
}
.fh-profile-showcase {
  display: grid;
  grid-template-columns: minmax(210px, 300px) minmax(360px, 1fr);
  gap: 34px;
  align-items: center;
  margin-bottom: 58px;
}
.fh-profile-showcase-media {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: #111;
  box-shadow: 6px 6px 0 var(--ink);
}
.fh-profile-showcase-video,
.fh-profile-video-empty {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  background: #111;
}
.fh-profile-video-empty {
  display: grid;
  place-items: center;
  padding: 30px;
  color: #fff;
  text-align: center;
  font-size: 15px;
}
.fh-profile-showcase-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(12,9,20,.74);
  color: #fff;
  font: 700 10px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.fh-profile-showcase-caption {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 1;
  color: rgba(255,255,255,.9);
  font-size: 12px;
  line-height: 1.45;
  text-shadow: 0 1px 3px #000;
}
.fh-profile-copy .fh-engine-badge { margin-bottom: 18px; }
.fh-profile-copy .fh-h1 {
  margin-bottom: 12px;
  font-size: clamp(48px, 6vw, 78px);
  line-height: .98;
}
.fh-profile-bio {
  margin: 0 0 12px;
  color: var(--ink);
  font: 700 21px/1.25 var(--serif);
  letter-spacing: -.025em;
}
.fh-profile-signature {
  max-width: 560px;
  margin: 0 0 16px;
  color: var(--accent-deep);
  font-size: 17px;
  font-weight: 750;
  line-height: 1.45;
}
.fh-profile-look {
  max-width: 600px;
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.fh-profile-detail {
  display: grid;
  gap: 4px;
  max-width: 600px;
  margin: 20px 0 24px;
  padding: 15px 17px;
  border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: var(--accent-soft);
}
.fh-profile-detail-label,
.fh-personality-label {
  color: var(--accent-deep);
  font: 700 10px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.fh-profile-detail strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}
.fh-profile-cta-note { margin-top: 12px; font-size: 13px !important; }
.fh-personality-section { margin-bottom: 58px; }
.fh-personality-section .fh-section-head {
  align-items: baseline;
  flex-wrap: wrap;
}
.fh-personality-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.fh-personality-card {
  min-height: 132px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.fh-personality-card-featured {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft), #fff);
}
.fh-personality-card strong {
  display: block;
  margin-top: 13px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
}
.fh-profile-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}
.fh-profile-pills span {
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.2;
}
.fh-profile-section-note,
.fh-profile-performance-note {
  max-width: 780px;
  margin: -5px 0 20px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.fh-profile-performance-note { margin: 8px 0 0; }
.fh-scene-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 860px;
  gap: 16px;
}
.fh-scene-card {
  border-width: 1px;
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}
.fh-scene-thumb {
  aspect-ratio: 4 / 5;
  background: #111;
  overflow: hidden;
}
.fh-scene-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
}
.fh-scene-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
}
.fh-scene-setting {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.fh-scene-setting::after {
  content: '';
  position: absolute;
  inset: 14% 12%;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 45% 55% 38% 62%;
  transform: rotate(-12deg);
}
.fh-scene-setting[data-variant="mirror"]::after {
  inset: 12% 26%;
  border-radius: 4px;
  transform: none;
  box-shadow: 0 0 0 9px rgba(255,255,255,.12);
}
.fh-scene-setting[data-variant="transit"]::after {
  inset: auto 9% 16%;
  height: 23%;
  border-radius: 9px 28px 9px 9px;
  transform: skewX(-12deg);
}
.fh-scene-setting[data-variant="window"]::after {
  inset: 10% 17%;
  border-radius: 3px;
  transform: none;
  background: linear-gradient(90deg, transparent 48%, rgba(255,255,255,.28) 48% 52%, transparent 52%);
}
.fh-scene-setting[data-variant="table"]::after {
  inset: auto 10% 18%;
  height: 20%;
  border-radius: 50% 50% 8px 8px;
  transform: none;
}
.fh-scene-setting[data-variant="studio"]::after {
  inset: 12% 18%;
  border-radius: 3px;
  transform: rotate(4deg);
}
.fh-scene-setting[data-variant="outdoor"]::after {
  inset: 14% 11%;
  border-radius: 50% 50% 38% 62%;
  transform: rotate(18deg);
}
.fh-scene-setting-note {
  position: absolute;
  top: 10px;
  left: 12px;
  color: rgba(255,255,255,.82);
  font: 600 10px/1 var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.fh-scene-footage {
  position: absolute;
  right: 9px;
  bottom: 9px;
  left: 9px;
  padding: 6px 8px;
  border-radius: 7px;
  background: rgba(10,8,16,.72);
  color: #fff;
  font: 600 10px/1.25 var(--sans);
  backdrop-filter: blur(8px);
}
.fh-scene-label { padding-top: 13px; font-size: 15px; }
.fh-scene-light { padding-bottom: 14px; font-size: 12px; }

@media (max-width: 980px) {
  .fh-profile-showcase { grid-template-columns: minmax(220px, .7fr) minmax(300px, 1.3fr); gap: 28px; }
  .fh-profile-showcase-media,
  .fh-profile-showcase-video,
  .fh-profile-video-empty { min-height: 300px; }
  .fh-personality-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .fh-profile-showcase { display: block; }
  .fh-profile-showcase-media,
  .fh-profile-showcase-video,
  .fh-profile-video-empty { min-height: 300px; }
  .fh-profile-copy { margin-top: 38px; }
  .fh-profile-copy .fh-h1 { font-size: 50px; }
  .fh-scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .fh-personality-grid,
  .fh-scene-grid { grid-template-columns: 1fr; }
  .fh-profile-showcase-media,
  .fh-profile-showcase-video,
  .fh-profile-video-empty { min-height: 260px; }
}

/* ── Remix Stepper ───────────────────────────────────────────────────────── */
.remix-header { margin-bottom: 32px; }
.remix-header-toolbar { display: flex; align-items: center; margin-bottom: 18px; }
.remix-split { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .remix-split { grid-template-columns: 1fr 1fr; } }

.remix-stepper { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.remix-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.remix-step.active { border-color: var(--violet); box-shadow: 0 8px 32px rgba(123, 63, 242, 0.12), 0 0 0 1px var(--violet); }
.remix-step.completed { background: var(--surface2); border-color: transparent; }
.remix-step.future { opacity: 0.5; }

.remix-step-header { padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; cursor: default; }
.remix-step.completed .remix-step-header { padding: 16px 24px; }
.remix-step-title { font: 500 18px/1.2 var(--sans); display: flex; align-items: center; gap: 12px; color: var(--ink); }

.step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--line-strong); color: var(--ink); font: 700 13px/26px var(--mono); text-align: center; flex-shrink: 0; }
.remix-step.active .step-num { background: var(--violet); color: #fff; }
.remix-step.completed .step-num { background: var(--green); color: #fff; font-size: 0; }
.remix-step.completed .step-num::after { content: ""; display: block; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); margin: 6px auto 0; }

.remix-step-content { padding: 0 24px 24px 62px; }
.remix-step.completed .remix-step-content { display: none; }
.remix-step-lock { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.remix-step-summary { display: none; font-size: 13px; color: var(--ink-soft); padding: 0 24px 16px 62px; }
.remix-step.completed .remix-step-summary { display: block; }

/* Expert Controls */
.remix-expert-details { max-width: 860px; margin-top: 24px; background: transparent; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }
.remix-expert-details summary { padding: 16px 24px; font: 600 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.remix-expert-details summary::-webkit-details-marker { display: none; }
.remix-expert-details[open] summary { border-bottom: 1px solid var(--line); color: var(--ink); }
.remix-expert-content { padding: 24px; }

/* ── Builder accessibility pass ─────────────────────────────────────────────
   Creation surfaces contain legacy inline 10–13px labels. Keep the compact
   navigation and status chrome, but make working copy and controls readable
   without requiring browser zoom. */
#screen-mode03,
#screen-remix {
  font-size: 18px;
}

#screen-mode03 p,
#screen-remix p,
#screen-mode03 .muted,
#screen-remix .muted {
  font-size: 16px !important;
  line-height: 1.7 !important;
}

#screen-mode03 label,
#screen-remix label {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

#screen-mode03 input,
#screen-mode03 select,
#screen-mode03 textarea,
#screen-remix input,
#screen-remix select,
#screen-remix textarea {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

#screen-mode03 .btn,
#screen-remix .btn {
  font-size: 16px;
  min-height: 48px;
  padding: 13px 20px;
}

#screen-mode03 .btn-sm,
#screen-remix .btn-sm {
  font-size: 15px;
  min-height: 42px;
  padding: 10px 16px;
}

#screen-mode03 [style*="font-size:10px"],
#screen-mode03 [style*="font-size:11px"],
#screen-mode03 [style*="font-size:12px"],
#screen-mode03 [style*="font-size:13px"],
#screen-remix [style*="font-size:10px"],
#screen-remix [style*="font-size:11px"],
#screen-remix [style*="font-size:12px"],
#screen-remix [style*="font-size:13px"] {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

#screen-mode03 .mct-kicker,
#screen-remix .mct-kicker {
  font-size: 13px !important;
}

#screen-mode03 .mct-studio-note,
#screen-mode03 .mct-lane-chip,
#screen-mode03 .mct-step-label,
#screen-mode03 .m3lane-hint {
  font-size: 14px !important;
}

#screen-mode03 .mct-step-number {
  font-size: 13px;
}

#screen-mode03 .mct-upload-title {
  font-size: 18px;
}

#screen-mode03 .mct-upload-copy {
  font-size: 16px;
  line-height: 1.7;
}

#screen-mode03 .mct-upload-button {
  min-height: 48px;
  font-size: 16px !important;
}

#screen-mode03 .mct-upload-note {
  font-size: 14px;
}

#screen-mode03 input,
#screen-mode03 select,
#screen-mode03 textarea,
#screen-remix input,
#screen-remix select,
#screen-remix textarea {
  font-size: 16px !important;
}

#screen-mode03 input[style*="font-size"],
#screen-mode03 select[style*="font-size"],
#screen-mode03 textarea[style*="font-size"],
#screen-remix input[style*="font-size"],
#screen-remix select[style*="font-size"],
#screen-remix textarea[style*="font-size"] {
  font-size: 16px !important;
}

#screen-remix .remix-step-lock,
#screen-remix .remix-step-summary {
  font-size: 16px;
  line-height: 1.7;
}

#screen-remix .remix-expert-details summary {
  font-size: 14px;
}

#screen-mode03 .mct-page > h1,
#screen-remix h1 {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.1;
}

/* Library heading: keep the destination clear without another oversized,
   bold sentence competing with the video grid. */
#screen-library .lib-page-title {
  margin: 0 0 16px;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -.02em;
  line-height: 1.25;
}

/* The GRWM hero should guide the eye, not overpower the host and look
   selectors below it. */
#screen-mode03 .m3hero-title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.18;
}

#screen-mode03 .m3hero-title .m3hero-accent {
  font-weight: 400;
}

/* ── Make Screen (Simplified UI) ─────────────────────────────────────────── */
.make-model-card {
  flex: 0 0 140px; 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  gap:8px; 
  padding:12px; 
  border-radius:16px; 
  border: 1.5px solid var(--border); 
  background: transparent; 
  cursor:pointer; 
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.make-model-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(255, 46, 126, 0.12);
}
.make-model-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent);
  transform: translateY(-2px);
}
.make-photo-dropzone {
  border-style: dashed;
  background: var(--surface2);
}
.make-photo-dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(255, 46, 126, 0.12);
  transform: translateY(-2px);
}
.make-photo-dropzone:focus-visible {
  outline: 3px solid rgba(255, 46, 126, 0.25);
  outline-offset: 2px;
}
.make-upload-zone {
  padding: 40px 24px; 
  border-width: 2px; 
  border-style: dashed;
  border-radius: 16px;
  text-align: center;
  transition: all 0.2s ease-out;
  cursor: pointer;
}
.make-upload-zone:hover, .make-upload-zone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.make-upload-zone.has-file {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-soft);
}