@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap");

/* ============ Design tokens — Studio (Anthropic-warm, light-first) ============ */
:root {
  --paper: #F0EDE4; --surface: #FBF8F0; --surface-2: #E8DFC9;
  --ink: #1F1B17; --ink-soft: #6B5F50; --hair: #E0D8C4;
  --accent: #C15F3C; --accent-ink: #7E3A1E; --ok: #6F8B3C;
  --accent-soft: #F2E3D5; --line-2: #CFC4A9;
  --shadow: 0 1px 2px rgba(42,38,35,.05), 0 12px 28px -12px rgba(42,38,35,.14);
  --shadow-card: 0 1px 1px rgba(42,38,35,.05), 0 18px 40px -22px rgba(42,38,35,.20);
  --font-display: "Geist", system-ui, sans-serif;
  --font-body: "Geist", system-ui, -apple-system, sans-serif;
  --font-data: "Geist Mono", ui-monospace, monospace;
  --font-serif: "Instrument Serif", Georgia, serif;
  --maxw: 1180px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px;
}
/* LIGHT (Studio) is the authoritative, only theme. */
[data-theme="light"] {
  --paper: #F0EDE4; --surface: #FBF8F0; --surface-2: #E8DFC9;
  --ink: #1F1B17; --ink-soft: #6B5F50; --hair: #E0D8C4;
  --accent: #C15F3C; --accent-ink: #7E3A1E; --ok: #6F8B3C;
  --accent-soft: #F2E3D5; --line-2: #CFC4A9;
  --shadow: 0 1px 2px rgba(42,38,35,.05), 0 12px 28px -12px rgba(42,38,35,.14);
  --shadow-card: 0 1px 1px rgba(42,38,35,.05), 0 18px 40px -22px rgba(42,38,35,.20);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background .4s ease, color .4s ease;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
h1,h2,h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.04; letter-spacing: -.022em; margin: 0; }
.em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--accent); }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
img { display: block; max-width: 100%; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:16px; top:16px; background:var(--ink); color:var(--paper); padding:8px 14px; border-radius:8px; z-index:99; }

/* App-wide keyboard focus ring (coral, offset). Covers wizard step buttons,
   chips, links, inputs, and interactive controls. Mouse users see no ring. */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.btn { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:600; font-size:16px; padding:14px 24px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease; white-space:nowrap; }
/* white-on-coral label: bold so 4.2:1 passes WCAG large-text AA (3:1) */
.btn-primary { background:var(--accent); color:#fff; font-weight:700; box-shadow:0 10px 26px -8px rgba(200,107,58,.55); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 16px 32px -10px rgba(200,107,58,.68); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--hair); }
.btn-ghost:hover { background:var(--surface-2); }
.btn-lg { padding:18px 34px; font-size:18px; }
.micro { font-size:13.5px; color:var(--ink-soft); }
.eyebrow { font-family:var(--font-data); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
.check { color:var(--ok); font-weight:700; }

/* header */
header { position:sticky; top:0; z-index:40; backdrop-filter:saturate(1.4) blur(12px); background:color-mix(in srgb, var(--paper) 84%, transparent); border-bottom:1px solid var(--hair); }
.nav { display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:21px; letter-spacing:-.02em; }
.brand .dot { width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px var(--accent); }
/* Spark-deck brand mark + Geist "Product AdKit" wordmark (Product AdKit identity). */
.brand-mark { width:30px; height:31px; flex:0 0 auto; transition:transform .3s cubic-bezier(.2,.8,.2,1);
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='41' fill='%23C15F3C'/><polygon points='68,46 55,32 36,39 32,55 45,68 64,61' fill='%23FBF8F0'/><g transform='translate(50 50) scale(0.3) translate(-50 -50)'><path d='M50 8 C51.5 39 61 49 92 50 C61 51 51.5 61 50 92 C48.5 61 39 51 8 50 C39 49 49 39 50 8 Z' fill='%23C9912F'/></g></svg>") center/contain no-repeat; }
.brand:hover .brand-mark { transform:rotate(-6deg) scale(1.06); }
.brand-word { font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; }
.brand-word i { font-style:normal; color:var(--accent); }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a { font-size:15px; color:var(--ink-soft); }
.nav-links a:hover { color:var(--ink); }
.nav-tools { display:flex; align-items:center; gap:12px; }
.nav-signin { font-size:15px; color:var(--ink-soft); padding:0 6px; }
.nav-signin:hover { color:var(--ink); }
.icon-btn { width:40px; height:40px; border-radius:999px; border:1px solid var(--hair); background:transparent; cursor:pointer; font-size:16px; color:var(--ink); display:grid; place-items:center; }
.icon-btn:hover { background:var(--surface-2); }

/* hero — Layout B (centered, demo below) */
.hero { padding:84px 0 48px; text-align:center; }
.hero .copy { display:flex; flex-direction:column; align-items:center; }
.hero h1 { font-size:clamp(46px, 7.5vw, 88px); max-width:14ch; }
.hero h1 .em { font-style:italic; color:var(--accent); }
.hero .sub { font-size:clamp(18px,2.2vw,22px); color:var(--ink-soft); margin-top:24px; max-width:50ch; }
.hero .cta-row { display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; justify-content:center; }
.hero .reassure { display:flex; gap:20px; margin-top:22px; flex-wrap:wrap; justify-content:center; }
.hero .reassure span { display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--ink-soft); }

/* demo card under hero — real posters bloom in */
.demo { margin-top:56px; }
.demo-card { background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:20px; }
.demo-top { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.photo-chip { display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--hair); border-radius:999px; padding:6px 14px 6px 6px; font-size:13px; color:var(--ink-soft); font-family:var(--font-data); }
.photo-thumb { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#FFD8B0,#FF6A33); }
.arrow { color:var(--accent); font-weight:700; }
.count-pill { margin-left:auto; font-family:var(--font-data); font-size:12px; font-weight:600; color:var(--accent-ink); background:color-mix(in srgb, var(--accent) 16%, transparent); padding:5px 12px; border-radius:999px; }
.poster-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.poster { aspect-ratio:3/4; border-radius:12px; overflow:hidden; background:var(--surface-2); box-shadow:0 10px 24px -14px rgba(0,0,0,.8); opacity:0; transform:translateY(10px) scale(.96); animation:bloom .5s ease forwards; }
.poster img { width:100%; height:100%; object-fit:cover; }
@keyframes bloom { to { opacity:1; transform:none; } }
.poster:nth-child(1){animation-delay:.05s}.poster:nth-child(2){animation-delay:.12s}.poster:nth-child(3){animation-delay:.19s}
.poster:nth-child(4){animation-delay:.26s}.poster:nth-child(5){animation-delay:.33s}.poster:nth-child(6){animation-delay:.40s}

section { padding:92px 0; }
.section-head { max-width:60ch; margin:0 auto 52px; text-align:center; }
.section-head.left { margin-left:0; text-align:left; }
.section-head h2 { font-size:clamp(32px,4.4vw,50px); }
.section-head p { color:var(--ink-soft); margin-top:16px; font-size:19px; }

.logos { padding:36px 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.logos .lead { text-align:center; font-size:13px; color:var(--ink-soft); margin-bottom:22px; font-family:var(--font-data); letter-spacing:.06em; text-transform:uppercase; }
.logos .row { display:flex; gap:14px 44px; flex-wrap:wrap; justify-content:center; }
.logos .row span { font-family:var(--font-data); font-weight:600; color:var(--ink-soft); opacity:.65; font-size:16px; }

.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.step .n { font-family:var(--font-display); font-size:15px; color:var(--accent); border:1px solid var(--hair); width:40px; height:40px; border-radius:50%; display:grid; place-items:center; margin:0 auto 18px; }
.step { text-align:center; }
.step h3 { font-size:22px; margin-bottom:10px; }
.step p { color:var(--ink-soft); }

/* 3D Pro showcase */
.threeD { background:var(--surface); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.threeD-hero { position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); margin-bottom:24px; }
.threeD-hero img { width:100%; height:clamp(280px,42vw,520px); object-fit:cover; }
.threeD-hero .cap { position:absolute; left:0; bottom:0; padding:40px; z-index:2; }
.threeD-hero .cap h2 { font-size:clamp(30px,4.4vw,52px); color:#fff; max-width:16ch; }
.threeD-hero .cap p { color:rgba(255,255,255,.82); margin-top:12px; max-width:44ch; }
.threeD-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.25) 45%, transparent 70%); }
.render-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.render { aspect-ratio:3/4; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); position:relative; }
.render img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.render:hover img { transform:scale(1.05); }
.render .badge { position:absolute; top:14px; left:14px; z-index:2; font-family:var(--font-data); font-size:11px; font-weight:600; background:var(--accent); color:#fff; padding:4px 10px; border-radius:999px; }

/* formats */
.formats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.fmt { background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-md); padding:24px; box-shadow:var(--shadow); position:relative; }
.fmt .ico { font-size:24px; }
.fmt h3 { font-size:19px; margin:16px 0 6px; }
.fmt p { color:var(--ink-soft); font-size:14.5px; }
.status { position:absolute; top:18px; right:18px; font-family:var(--font-data); font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px; letter-spacing:.03em; }
.status.live { background:color-mix(in srgb, var(--ok) 18%, transparent); color:var(--ok); }
.status.soon { background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--hair); }
.fmt.is-soon { opacity:.78; }

/* app */
.app-shell { background:var(--surface-2); border:1px solid var(--hair); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow); }
.dropzone { border:2px dashed var(--hair); border-radius:var(--radius-md); background:var(--surface); padding:44px; text-align:center; }
.dropzone .big { font-family:var(--font-display); font-size:24px; margin-bottom:8px; }
.dropzone .or { color:var(--ink-soft); font-size:14px; margin:14px 0; }
.progress { height:8px; border-radius:999px; background:var(--surface); overflow:hidden; margin:28px 0 8px; }
.progress i { display:block; height:100%; width:72%; background:var(--accent); border-radius:999px; }

.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.plan { background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-md); padding:28px; box-shadow:var(--shadow); }
.plan.featured { border-color:var(--accent); box-shadow:0 20px 50px -24px rgba(200,107,58,.55); position:relative; }
.plan.featured::after { content:"Most popular"; position:absolute; top:-11px; left:24px; background:var(--accent); color:#fff; font-family:var(--font-data); font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px; }
.plan .name { font-family:var(--font-data); font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:12.5px; color:var(--ink-soft); }
.plan .amt { font-family:var(--font-display); font-size:42px; margin:10px 0 4px; }
.plan .amt small { font-family:var(--font-body); font-size:15px; color:var(--ink-soft); font-weight:400; }
.plan ul { list-style:none; padding:0; margin:20px 0 24px; display:grid; gap:10px; }
.plan li { font-size:15px; color:var(--ink-soft); display:flex; gap:9px; }

.faq details { border-top:1px solid var(--hair); padding:22px 0; }
.faq details summary { font-family:var(--font-display); font-size:21px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq details summary::-webkit-details-marker { display:none; }
.faq details summary::after { content:"+"; color:var(--accent); font-size:26px; }
.faq details[open] summary::after { content:"\2013"; }
.faq details p { color:var(--ink-soft); margin-top:14px; max-width:64ch; }

.final { text-align:center; border-radius:var(--radius-lg); padding:80px 24px; position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--hair); }
.final::before { content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
.final > * { position:relative; z-index:1; }
.final h2 { font-size:clamp(34px,5vw,56px); }
.final p { color:var(--ink-soft); margin:16px auto 30px; max-width:44ch; font-size:19px; }

/* waitlist form */
.waitlist-form { display:flex; gap:10px; max-width:500px; margin:0 auto; }
.waitlist-form input { flex:1; padding:16px 20px; border-radius:999px; border:1px solid var(--hair); background:var(--surface); color:var(--ink); font-family:var(--font-body); font-size:16px; }
.waitlist-form input::placeholder { color:var(--ink-soft); }
.waitlist-form input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.waitlist-note { margin-top:16px; font-size:13.5px; color:var(--ink-soft); }
.waitlist-success { display:none; align-items:center; justify-content:center; gap:10px; font-family:var(--font-display); font-size:22px; max-width:500px; margin:0 auto; padding:18px; border-radius:var(--radius-md); background:color-mix(in srgb, var(--ok) 14%, transparent); border:1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.waitlist-success.show { display:flex; }
.waitlist-form.hide { display:none; }
@media (max-width:560px){
  .waitlist-form { flex-direction:column; }
  .waitlist-form .btn { justify-content:center; }
  /* Keep the marketing header from overflowing: drop the theme toggle, keep
     the logo + Sign in + Join waitlist, and tighten the CTA. */
  .nav { height:60px; }
  .wrap.nav { padding:0 16px; }
  .nav-tools { gap:0; flex:0 0 auto; }
  .nav .icon-btn { display:none; }
  .nav-signin { display:none; }
  .nav .btn-primary { padding:9px 14px; font-size:14px; }
}
@media (max-width:360px){
  .wrap.nav { padding:0 14px; }
  header .brand-word { font-size:18px; }
  .nav .btn-primary { font-size:0; padding:9px 14px; }
  .nav .btn-primary::after { content:"Preview"; font-size:14px; }
}

/* spoke-page utilities */
.cols2 { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.cols2 .media { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); aspect-ratio:4/5; }
.cols2 .media img { width:100%; height:100%; object-fit:cover; }
.cols2 h2 { font-size:clamp(28px,3.6vw,42px); }
.cols2 p { color:var(--ink-soft); font-size:18px; margin-top:16px; }
.crosslinks { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:28px; }
.crosslinks a { font-family:var(--font-data); font-size:13.5px; padding:9px 16px; border:1px solid var(--hair); border-radius:999px; color:var(--ink-soft); }
.crosslinks a:hover { color:var(--ink); border-color:var(--accent); }

/* ============ /app — calm waiting room ============ */
.app-hero { padding:80px 0 28px; text-align:center; }
.app-hero .eyebrow { display:block; margin-bottom:18px; }
.app-hero h1 { font-size:clamp(36px, 5vw, 56px); font-weight:500; letter-spacing:-.02em; }
.app-hero h1 .em { font-style:italic; color:var(--accent-ink); font-weight:500; }
.app-hero .sub { max-width:480px; margin:20px auto 0; color:var(--ink-soft); font-size:17px; line-height:1.55; }

.app-col { max-width:560px; margin:0 auto; padding:0 24px; }

.drop {
  display:flex; flex-direction:column; align-items:center; gap:14px;
  position:relative; margin-top:40px;
  border:1.5px dashed var(--hair); border-radius:var(--radius-lg);
  background:color-mix(in srgb, var(--surface) 45%, transparent);
  padding:56px 36px; text-align:center;
  cursor:pointer;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.drop:hover { border-color:color-mix(in srgb, var(--accent-ink) 55%, var(--hair)); background:var(--surface); }
.drop:hover .icon { transform:translateY(-2px); background:color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.drop:hover .browse { border-bottom-color:var(--accent-ink); }
.drop.is-dragover {
  border-color:var(--accent); border-style:solid;
  background:color-mix(in srgb, var(--accent) 7%, var(--surface));
  transform:translateY(-2px);
}
.drop.is-busy { cursor:wait; opacity:.7; }
.drop .icon {
  width:48px; height:48px; border-radius:50%;
  background:var(--surface-2); display:grid; place-items:center;
  color:var(--accent-ink); margin-bottom:6px;
  transition:transform .25s ease, background .25s ease;
}
.drop h3 { font-family:var(--font-display); font-size:24px; font-weight:500; line-height:1.15; margin:0; }
.drop p { color:var(--ink-soft); font-size:15px; line-height:1.5; margin:0; max-width:340px; }
.drop .browse {
  margin-top:2px; color:var(--accent-ink); font-weight:600; font-size:15px;
  border-bottom:1px solid color-mix(in srgb, var(--accent-ink) 40%, transparent);
  padding-bottom:2px; transition:border-color .15s ease;
}
.drop .meta {
  margin-top:6px; font-family:var(--font-data); font-size:11px;
  color:var(--ink-soft); letter-spacing:.14em; text-transform:uppercase;
}
.drop input[type=file] { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

.queue { margin:26px 0 0; text-align:center; font-family:var(--font-data); font-size:12.5px; color:var(--ink-soft); letter-spacing:.04em; }
.queue strong { color:var(--ink); font-variant-numeric:tabular-nums; font-weight:600; }

.uploads { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; justify-content:center; min-height:0; }
.uploads .tile {
  width:64px; height:64px; border-radius:var(--radius-sm);
  background:var(--surface-2); position:relative; overflow:hidden;
  border:1px solid var(--hair); transition:transform .15s ease, opacity .2s ease;
}
.uploads .tile img { width:100%; height:100%; object-fit:cover; }
.uploads .tile.is-removing { opacity:0; transform:scale(.85); pointer-events:none; }
.uploads .tile .dot {
  position:absolute; right:4px; bottom:4px; width:14px; height:14px; border-radius:50%;
  background:var(--ok); border:2px solid var(--surface); pointer-events:none;
}
.uploads .tile.is-pending .dot { background:var(--accent); animation:pulse 1.2s ease-in-out infinite; }
.uploads .tile.is-error .dot { background:#C8412B; }
.uploads .tile .x {
  position:absolute; top:4px; right:4px; width:18px; height:18px; border-radius:50%;
  background:color-mix(in srgb, var(--ink) 70%, transparent); color:var(--paper);
  display:grid; place-items:center; font-size:11px; line-height:1;
  cursor:pointer; opacity:0; transition:opacity .12s ease, transform .12s ease;
  border:0; padding:0; font-family:var(--font-body); font-weight:600;
}
.uploads .tile:hover .x,
.uploads .tile:focus-within .x { opacity:1; }
.uploads .tile .x:hover { transform:scale(1.12); }
.uploads .tile.is-pending .x { display:none; }
@media (hover: none) { .uploads .tile .x { opacity:.85; } }
@keyframes pulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(.7); opacity:.6; } }

.app-empty { text-align:center; color:var(--ink-soft); font-size:14px; margin-top:22px; opacity:.7; font-style:italic; }
.app-error {
  text-align:center; color:#D85A3D; font-size:13.5px; margin-top:16px; min-height:18px;
  font-family:var(--font-body); opacity:0; transition:opacity .2s ease;
}
.app-error.is-visible { opacity:1; }

/* ---- generation ---- */
.gen { max-width:1000px; margin:48px auto 0; padding:0 24px; text-align:center; }
.gen-divider { height:1px; background:var(--hair); max-width:560px; margin:0 auto 40px; }
.gen-start {
  font-family:var(--font-body); font-weight:700; font-size:16px;
  color:#fff; background:linear-gradient(180deg, var(--accent), var(--accent-ink)); border:0; border-radius:999px;
  padding:15px 32px; cursor:pointer;
  box-shadow:0 10px 26px -8px rgba(200,107,58,.55);
  transition:transform .15s ease, box-shadow .2s ease;
}
.gen-start:hover { transform:translateY(-2px); box-shadow:0 16px 34px -10px rgba(200,107,58,.7); }
.gen-status {
  margin:24px auto 0; max-width:520px; color:var(--ink-soft); font-size:15px; line-height:1.5;
}
.gen-status.is-busy { color:var(--ink); }
.gen-status.is-busy::before {
  content:""; display:inline-block; width:13px; height:13px; margin-right:9px; vertical-align:-1px;
  border:2px solid var(--hair); border-top-color:var(--accent); border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.gen-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:18px; margin-top:36px;
}
.gen-card {
  border:1px solid var(--hair); border-radius:var(--radius-md);
  overflow:hidden; background:var(--surface-2); text-align:left;
}
.gen-frame { position:relative; width:100%; overflow:hidden; background:#000; }
.gen-frame iframe { position:absolute; top:0; left:0; border:0; transform-origin:top left; pointer-events:none; }
.gen-card-bar {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 14px; font-family:var(--font-data); font-size:12px;
  color:var(--ink-soft); letter-spacing:.02em;
}
.gen-dl { color:var(--accent-ink); font-weight:600; }
.gen-dl:hover { text-decoration:underline; }
.gen-dl.is-disabled { color:var(--ink-soft); opacity:.55; pointer-events:none; }
.gen-action {
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  min-height:34px; padding:0 13px; border:1px solid var(--hair); border-radius:999px;
  background:var(--surface); color:var(--accent-ink); font-family:var(--font-body);
  font-size:12.5px; font-weight:700; cursor:pointer;
}
.gen-action:hover { border-color:var(--accent-ink); background:color-mix(in srgb,var(--accent) 8%,var(--surface)); }

.gen-controls { margin-top:32px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.gen-controls[hidden] { display:none; }
.gen-full {
  font-family:var(--font-body); font-weight:700; font-size:16px; color:#fff;
  background:var(--accent); border:0; border-radius:999px; padding:15px 32px; cursor:pointer;
  box-shadow:0 10px 26px -8px rgba(200,107,58,.55); transition:transform .15s ease;
}
.gen-full:hover { transform:translateY(-2px); }
.gen-refine-row { display:flex; gap:10px; width:100%; max-width:520px; }
.gen-refine-row input {
  flex:1; font-family:var(--font-body); font-size:16px; color:var(--ink);
  background:var(--surface); border:1px solid var(--hair); border-radius:999px; padding:13px 20px;
}
.gen-refine-row input:focus { outline:none; border-color:var(--accent-ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.gen-refine-row button {
  font-family:var(--font-body); font-weight:600; font-size:15px; color:var(--ink);
  background:transparent; border:1px solid var(--hair); border-radius:999px; padding:13px 22px; cursor:pointer;
}
.gen-refine-row button:hover { border-color:var(--accent-ink); color:var(--accent-ink); }

.app-foot {
  max-width:560px; margin:96px auto 0; padding:22px 24px 44px;
  border-top:1px solid var(--hair); text-align:center;
}
.app-foot small { font-family:var(--font-data); font-size:11px; color:var(--ink-soft); letter-spacing:.14em; text-transform:uppercase; }
.app-foot strong { color:var(--ink); font-weight:600; }
.app-foot .dot-sep { padding:0 12px; opacity:.45; }

@media (max-width:560px) {
  .drop { padding:44px 24px; gap:12px; }
  .app-hero { padding:56px 0 20px; }
  .app-hero h1 { font-size:36px; }
  .app-hero .sub { font-size:16px; }
}

/* ============ App shell (dark + tangerine workspace) ============ */
.app-body { display:flex; min-height:100vh; min-height:100dvh; }
.sidebar {
  position:sticky; top:0; height:100vh; width:248px; flex:0 0 248px;
  display:flex; flex-direction:column; gap:8px; padding:22px 16px;
  background:var(--surface); border-right:1px solid var(--hair);
}
.sidebar .brand { padding:6px 10px 18px; font-size:19px; }
.sidenav { display:flex; flex-direction:column; gap:2px; flex:1; }
/* Primary sidebar action — solid black "Create Ads" button. */
.nav-create {
  display:flex; align-items:center; gap:10px; justify-content:center;
  margin:0 4px 12px; padding:12px 14px; border-radius:12px;
  background:#2A2623; color:#FBF7EF; font-size:14.5px; font-weight:600;
  box-shadow:0 8px 20px -8px rgba(42,38,35,.45); transition:transform .15s ease, box-shadow .2s ease;
}
.nav-create:hover { transform:translateY(-1px); box-shadow:0 12px 26px -8px rgba(42,38,35,.55); color:#fff; }
.nav-create svg { width:18px; height:18px; flex:0 0 18px; }
.nav-item {
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-sm);
  color:var(--ink-soft); font-size:14.5px; font-weight:500; cursor:pointer; user-select:none;
  transition:background .15s ease, color .15s ease;
}
.nav-item svg { width:18px; height:18px; flex:0 0 18px; opacity:.85; }
.nav-item:hover { background:var(--surface-2); color:var(--ink); }
.nav-item.is-active { background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--ink); }
.nav-item.is-active svg { color:var(--accent-ink); opacity:1; }
.nav-item.is-soon { cursor:default; opacity:.5; }
.nav-item.is-soon:hover { background:transparent; color:var(--ink-soft); }
.nav-item.is-dim { opacity:.55; }
.nav-item .soon {
  margin-left:auto; font-family:var(--font-data); font-style:normal; font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  border:1px solid var(--hair); border-radius:999px; padding:2px 7px;
}
.side-foot { border-top:1px solid var(--hair); padding-top:14px; display:flex; flex-direction:column; gap:10px; }
.side-user { display:flex; align-items:center; gap:10px; min-width:0; }
.side-user .avatar {
  width:30px; height:30px; flex:0 0 30px; border-radius:50%;
  background:var(--accent); color:#fff; display:grid; place-items:center;
  font-family:var(--font-data); font-weight:600; font-size:13px;
}
.side-email { font-size:12.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-signout { font-size:13px; color:var(--ink-soft); padding-left:2px; min-height:44px; display:flex; align-items:center; }
.side-signout:hover { color:var(--ink); }
.side-manage {
  font-family:inherit; font-size:13px; color:var(--ink-soft); padding-left:2px;
  background:none; border:0; text-align:left; cursor:pointer;
  min-height:44px; display:flex; align-items:center;
}
.side-manage:hover { color:var(--ink); }
.side-manage[disabled] { opacity:.6; cursor:default; }

.app-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.app-topbar {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; border-bottom:1px solid var(--hair);
  background:color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter:saturate(1.4) blur(12px);
}
.topbar-title { font-family:var(--font-display); font-weight:500; font-size:22px; letter-spacing:-.01em; min-width:0; }
.topbar-tools { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.plan-pill {
  font-family:var(--font-data); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-ink); border:1px solid color-mix(in srgb, var(--accent-ink) 40%, var(--hair));
  border-radius:999px; padding:5px 12px;
}
.btn-upgrade {
  font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:-.01em;
  color:#fff; background:linear-gradient(180deg, var(--accent), var(--accent-ink)); border:none; border-radius:999px; padding:8px 16px;
  cursor:pointer; box-shadow:0 8px 20px -10px rgba(200,107,58,.7); transition:transform .15s, filter .15s;
}
.btn-upgrade:hover { transform:translateY(-1px); filter:brightness(1.05); }
.btn-upgrade:disabled { opacity:.6; cursor:default; transform:none; }
.credits-pill {
  font-family:var(--font-data); font-size:11px; letter-spacing:.06em; font-weight:600;
  color:var(--accent-ink); background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent-ink) 28%, var(--hair)); border-radius:999px; padding:5px 12px; white-space:nowrap;
}
/* All-tiers upgrade picker (opened from the topbar Upgrade button) */
.upgrade-modal { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; }
.upgrade-modal[hidden] { display:none; }
.upgrade-scrim { position:absolute; inset:0; background:rgba(20,18,16,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.upgrade-sheet { position:relative; z-index:1; width:100%; max-width:920px; max-height:90vh; overflow:auto; background:var(--paper); border:1px solid var(--hair); border-radius:20px; box-shadow:0 40px 90px -30px rgba(20,18,16,.6); padding:32px; }
.upgrade-x { position:absolute; top:14px; right:18px; border:none; background:transparent; font-size:26px; line-height:1; color:color-mix(in srgb, var(--ink) 55%, transparent); cursor:pointer; }
.upgrade-x:hover { color:var(--ink); }
.upgrade-h { font-family:var(--font-display); font-weight:600; font-size:26px; letter-spacing:-.01em; }
.upgrade-sub { color:color-mix(in srgb, var(--ink) 58%, transparent); margin:6px 0 22px; }
.upgrade-tiers { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.utier { position:relative; border:1px solid var(--hair); border-radius:14px; padding:18px 14px; display:flex; flex-direction:column; gap:6px; background:var(--surface); }
.utier.is-featured { border-color:var(--accent); box-shadow:0 16px 40px -20px rgba(200,107,58,.5); }
.utier-badge { position:absolute; top:-10px; left:14px; background:var(--accent); color:#fff; font-family:var(--font-data); font-size:10px; font-weight:600; letter-spacing:.06em; padding:3px 9px; border-radius:999px; }
.utier-name { font-family:var(--font-display); font-weight:600; font-size:15px; }
.utier-price { font-family:var(--font-display); font-weight:700; font-size:28px; letter-spacing:-.02em; }
.utier-price span { font-size:13px; font-weight:500; color:color-mix(in srgb, var(--ink) 55%, transparent); }
.utier-line { font-size:12.5px; color:color-mix(in srgb, var(--ink) 58%, transparent); flex:1; }
.utier-btn { margin-top:8px; border:1px solid var(--accent-ink); background:transparent; color:var(--accent-ink); font-family:var(--font-display); font-weight:700; font-size:14px; border-radius:999px; padding:9px 10px; cursor:pointer; }
.utier-btn:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.utier.is-featured .utier-btn { background:var(--accent); border-color:var(--accent); color:#fff; }
.upgrade-earned { margin-top:18px; padding-top:18px; border-top:1px dashed var(--hair); }
.utier.is-earned { border-style:dashed; }
.proj-newpack { align-self:flex-start; white-space:nowrap; }
.pack-credited-note { margin:0 0 16px; padding:12px 16px; border:1px solid var(--accent); border-radius:12px; background:color-mix(in srgb, var(--accent) 8%, var(--surface)); font-size:14px; }
.upgrade-topups { margin-top:18px; padding-top:18px; border-top:1px solid var(--hair); display:grid; grid-template-columns:minmax(180px, .8fr) minmax(0, 1.6fr); gap:14px; align-items:start; }
.topup-kicker { font-family:var(--font-data); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); margin:0 0 5px; }
.topup-copy { margin:0; color:color-mix(in srgb, var(--ink) 58%, transparent); font-size:13px; line-height:1.45; }
.topup-options { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.topup-btn { text-align:left; border:1px solid var(--hair); background:color-mix(in srgb, var(--surface) 82%, #fff); color:var(--ink); border-radius:12px; padding:12px; cursor:pointer; min-height:72px; }
.topup-btn strong { display:block; font-family:var(--font-display); font-size:14px; margin-bottom:4px; }
.topup-btn span { display:block; color:color-mix(in srgb, var(--ink) 58%, transparent); font-size:12.5px; line-height:1.3; }
.topup-btn:hover { border-color:var(--accent); box-shadow:0 10px 26px -20px rgba(200,107,58,.55); }
.topup-btn:disabled { opacity:.62; cursor:default; }
.upgrade-foot { margin-top:14px; font-size:13px; color:var(--accent-ink); min-height:18px; }
@media (max-width: 760px) { .upgrade-tiers { grid-template-columns:repeat(2, 1fr); } .upgrade-topups { grid-template-columns:1fr; } .topup-options { grid-template-columns:1fr; } .upgrade-sheet { padding:24px 18px; } }
.app-content { padding:32px; }

/* ===== Shared in-app utilities (CSS contract) =====
   tap-min: 44px touch-target utility, attachable to any control.
   is-busy: generic async-busy spinner (JS toggles .is-busy + aria-busy).
   tilt:    device-orientation parallax (JS feeds --tilt-x/--tilt-y).
   live-count: Geist-Mono tabular topbar counter (JS animates 0->target). */
.tap-min { min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; }

/* Generic coral spinner for any element that goes busy. The legacy
   .gen-status.is-busy::before below shares this exact treatment. */
.is-busy { position:relative; }
.is-busy::before {
  content:""; display:inline-block; width:13px; height:13px; margin-right:9px; vertical-align:-1px;
  border:2px solid var(--hair); border-top-color:var(--accent); border-radius:50%;
  animation:spin .7s linear infinite;
}

.tilt {
  transform:perspective(700px) rotateY(var(--tilt-x,0deg)) rotateX(var(--tilt-y,0deg));
  transition:transform .12s ease; will-change:transform;
}
.live-count { font-family:var(--font-data); font-variant-numeric:tabular-nums; letter-spacing:.04em; }

/* Mobile nav: hamburger + scrim are hidden on desktop, shown in the ≤860 query. */
.nav-toggle, .nav-scrim { display:none; }
.nav-toggle {
  align-items:center; justify-content:center; width:40px; height:40px; flex:0 0 auto;
  border:1px solid var(--hair); border-radius:var(--radius-sm); background:transparent;
  color:var(--ink); cursor:pointer;
}
.nav-toggle svg { width:20px; height:20px; }
.nav-toggle:hover { border-color:var(--accent-ink); color:var(--accent-ink); }

/* ---- create workspace ---- */
.create-wrap { max-width:920px; margin:0 auto; }
.create-hero { text-align:center; padding:16px 0 36px; }
.create-hero h1 { font-size:clamp(34px,4.6vw,48px); font-weight:500; letter-spacing:-.02em; }
.create-hero h1 .em { font-style:italic; color:var(--accent-ink); }
.create-hero p { max-width:540px; margin:18px auto 0; color:var(--ink-soft); font-size:17px; line-height:1.55; }

.wizard { background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-card); }
.stepper { display:flex; gap:8px; list-style:none; padding:0; margin:0 0 28px; flex-wrap:wrap; }
.step {
  display:flex; align-items:center; gap:9px; font-size:14px; font-weight:500; color:var(--ink-soft);
  padding:8px 14px; border-radius:999px; cursor:default;
}
.step .step-n {
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-data); font-size:12px; font-weight:600;
  background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--hair);
}
.step.is-active { color:var(--ink); }
.step.is-active .step-n { background:var(--accent); color:#fff; border-color:var(--accent); }
.step.is-done { cursor:pointer; }
.step.is-done .step-n { background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent-ink); border-color:transparent; }

.wiz-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.wiz-fields { display:flex; flex-direction:column; gap:16px; }
.brand-using {
  margin:0; color:var(--ink-soft); font-size:13.5px; line-height:1.45;
  background:color-mix(in srgb, var(--paper) 70%, transparent);
  border:1px solid var(--hair); border-radius:var(--radius-sm); padding:11px 13px;
}
.brand-using strong { color:var(--ink); font-weight:700; }
.brand-using a { color:var(--accent-ink); font-weight:700; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.field-coach {
  display:flex; flex-direction:column; gap:3px; padding:12px 14px;
  border-left:3px solid var(--accent); background:var(--accent-soft);
  border-radius:var(--radius-sm); color:var(--ink-soft); font-size:13.5px; line-height:1.45;
}
.field-coach strong { color:var(--ink); font-size:14px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field > span { font-size:13.5px; font-weight:600; color:var(--ink); }
.field > span em { font-style:normal; font-weight:400; color:var(--ink-soft); margin-left:6px; font-size:12px; }
.field input, .field textarea {
  font-family:var(--font-body); font-size:16px; color:var(--ink);
  background:var(--paper); border:1px solid var(--hair); border-radius:var(--radius-sm); padding:12px 14px; resize:vertical;
}
.field input:focus, .field textarea:focus { outline:none; border-color:var(--accent-ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.field-label { font-size:13.5px; font-weight:600; color:var(--ink); margin:20px 0 12px; }
.field-hint { font-size:12.5px; line-height:1.5; color:var(--ink-soft); margin:10px 2px 0; }
.photo-guide {
  display:grid; grid-template-columns:1fr; gap:7px; margin-top:12px; padding:12px 14px;
  background:color-mix(in srgb, var(--surface) 55%, var(--paper));
  border:1px solid var(--hair); border-radius:var(--radius-sm);
}
.photo-guide strong {
  color:var(--ink); font-size:13.5px; font-weight:700; line-height:1.25;
}
.photo-guide span {
  position:relative; padding-left:18px; color:var(--ink-soft); font-size:12.5px; line-height:1.35;
}
.photo-guide span::before {
  content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%;
  background:var(--accent);
}
.onboarding-note { margin-bottom:18px; max-width:620px; }
.onboarding-kicker {
  font-family:var(--font-data); font-size:11px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent-ink); margin:0 0 8px;
}
.onboarding-note h2 {
  font-family:var(--font-display); font-size:clamp(23px,3vw,30px); font-weight:700;
  letter-spacing:-.015em; margin:0;
}
.onboarding-note p:not(.onboarding-kicker) {
  margin:9px 0 0; color:var(--ink-soft); font-size:15px; line-height:1.5;
}
.recipe-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:12px; }
.recipe-card {
  appearance:none; border:1px solid var(--hair); background:var(--paper); color:var(--ink);
  border-radius:var(--radius-sm); padding:13px 13px 12px; min-height:118px;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left;
  cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.recipe-card:hover { border-color:var(--accent-ink); transform:translateY(-1px); }
.recipe-card.is-on {
  background:color-mix(in srgb, var(--accent) 10%, var(--paper));
  border-color:var(--accent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.recipe-card span {
  font-family:var(--font-data); font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-ink);
}
.recipe-card strong { font-size:15px; line-height:1.15; font-weight:700; }
.recipe-card em {
  margin-top:auto; font-style:normal; color:var(--ink-soft); font-size:12.5px; line-height:1.25;
}
.recipe-selected { color:var(--accent-ink); font-size:13px; font-weight:600; margin:0 0 18px; }
.count-card {
  display:grid;
  grid-template-columns:minmax(180px, 260px) 1fr;
  gap:10px 16px;
  align-items:end;
  background:var(--surface);
  border:1px solid color-mix(in srgb, var(--accent) 20%, var(--hair));
  border-radius:var(--radius-md);
  padding:16px;
  margin:18px 0;
}
.count-card .field { max-width:260px; }
/* Prominent "Image style" choice (Premium AI vs Fast editable) — surfaced on Step 2,
   not buried in More control, with a coral-tinted card so it reads as a key decision. */
.visual-card {
  background:color-mix(in srgb, var(--accent) 5%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 28%, var(--hair));
  border-radius:var(--radius-md);
  padding:16px;
  margin:18px 0;
}
.visual-card .field-label { margin-top:0; }
.visual-card #style-chips .chip.is-on { background:var(--accent); color:var(--surface); border-color:var(--accent); }
.visual-card .field-hint { margin-bottom:0; }
.count-card input { font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; }
.count-card .field-hint { margin:0; align-self:center; }
.count-card .count-error { grid-column:1 / -1; margin:0; }
.chips { display:flex; flex-wrap:wrap; gap:9px; }
.chip {
  font-family:var(--font-body); font-size:14px; font-weight:500; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--hair); border-radius:999px; padding:9px 18px; cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.chip:hover { color:var(--ink); border-color:var(--accent-ink); }
.chip.is-on { background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--ink); border-color:var(--accent); }

.wiz-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:28px; }
.btn-next, .gen-start, .gen-full {
  font-family:var(--font-body); font-weight:700; font-size:15px; color:#fff; background:linear-gradient(180deg, var(--accent), var(--accent-ink));
  border:0; border-radius:999px; padding:13px 26px; cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(200,107,58,.6); transition:transform .15s ease, box-shadow .2s ease;
}
.btn-next:hover, .gen-start:hover, .gen-full:hover { transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(200,107,58,.7); }
.btn-back {
  font-family:var(--font-body); font-weight:500; font-size:15px; color:var(--ink-soft);
  background:transparent; border:1px solid var(--hair); border-radius:999px; padding:13px 22px; cursor:pointer;
}
.btn-back:hover { color:var(--ink); border-color:var(--accent-ink); }

.review-title { font-family:var(--font-display); font-weight:500; font-size:22px; margin-bottom:18px; }
.review-row { display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--hair); font-size:15px; }
.review-row span { color:var(--ink-soft); }
.review-row strong { color:var(--ink); font-weight:600; text-align:right; }
.review-receipt {
  margin:16px 0 0; padding-top:14px; border-top:1px solid var(--hair);
  color:var(--ink-soft); font-size:13.5px; line-height:1.5;
}
.review-receipt strong { color:var(--ink); font-weight:600; }

.concept-preview { margin-top:26px; border-top:1px solid var(--hair); padding-top:24px; }
.concept-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:14px; }
.concept-kicker {
  font-family:var(--font-data); font-size:10.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-ink); margin:0 0 7px;
}
.concept-head h3 { font-family:var(--font-display); font-size:24px; font-weight:700; letter-spacing:-.015em; margin:0; }
.concept-head p:not(.concept-kicker) { margin:8px 0 0; max-width:58ch; color:var(--ink-soft); font-size:14.5px; line-height:1.5; }
.concept-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.concept-actions .btn-back { padding:10px 15px; font-size:13.5px; min-height:40px; }
.concept-status {
  display:inline-flex; align-items:center; min-height:34px; margin:0 0 14px; padding:7px 12px;
  border:1px solid color-mix(in srgb,var(--accent) 26%,var(--hair)); border-radius:999px;
  background:color-mix(in srgb,var(--accent) 8%,var(--surface)); color:var(--accent-ink);
  font-size:13px; line-height:1.35; font-weight:700;
}
.concept-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.concept-card {
  appearance:none; border:1px solid var(--hair); border-radius:var(--radius-md); background:var(--paper);
  color:var(--ink); padding:10px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:9px;
  transition:border-color .15s ease, transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.concept-card:hover { transform:translateY(-1px); border-color:var(--accent-ink); }
.concept-card.is-on { border-color:var(--accent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent); }
.concept-card:not(.is-on) { opacity:.66; }
.concept-check {
  align-self:flex-start; font-family:var(--font-data); font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft); border-radius:999px; padding:4px 8px;
}
.concept-card:not(.is-on) .concept-check { color:var(--ink-soft); background:var(--surface-2); }
.concept-art {
  min-height:190px; border-radius:var(--radius-sm); overflow:hidden; position:relative; display:flex; flex-direction:column;
  justify-content:space-between; padding:12px; background:var(--plan-bg); color:var(--plan-ink);
}
.concept-art::after {
  content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.26)); pointer-events:none;
}
.concept-art img {
  position:absolute; left:64%; top:55%; width:54%; height:58%; object-fit:contain; transform:translate(-50%,-50%);
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.24)); z-index:1;
}
.concept-art strong,
.concept-art em { position:relative; z-index:2; max-width:12ch; text-shadow:0 1px 10px rgba(0,0,0,.18); }
.concept-art strong { font-family:var(--font-display); font-size:21px; line-height:1.03; letter-spacing:0; }
.concept-art em {
  align-self:flex-start; font-style:normal; font-family:var(--font-data); font-size:10.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--plan-ink); background:var(--plan-accent); border-radius:999px; padding:6px 9px;
}
.concept-meta {
  font-family:var(--font-data); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink);
}
.concept-copy { color:var(--ink); font-size:13.5px; line-height:1.35; font-weight:600; }
.concept-scene { color:var(--ink-soft); font-size:12.5px; line-height:1.35; }

/* ---- uploads (reused inside wizard step 1) ---- */
.drop {
  display:flex; flex-direction:column; align-items:center; gap:12px; position:relative;
  border:1.5px dashed var(--hair); border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--paper) 60%, transparent); padding:34px 24px; text-align:center; cursor:pointer;
  transition:border-color .25s ease, background .25s ease, transform .2s ease;
}
.drop:hover { border-color:color-mix(in srgb,var(--accent-ink) 55%,var(--hair)); background:var(--paper); }
.drop:hover .icon { transform:translateY(-2px); }
.drop.is-dragover { border-color:var(--accent); border-style:solid; background:color-mix(in srgb,var(--accent) 8%,var(--surface)); transform:translateY(-2px); }
.drop .icon { width:44px; height:44px; border-radius:50%; background:var(--surface-2); display:grid; place-items:center; color:var(--accent-ink); transition:transform .2s ease; }
.drop h3 { font-family:var(--font-display); font-size:20px; font-weight:500; margin:0; }
.drop p { color:var(--ink-soft); font-size:14px; line-height:1.45; margin:0; max-width:280px; }
.drop .browse { color:var(--accent-ink); font-weight:600; font-size:14.5px; border-bottom:1px solid color-mix(in srgb,var(--accent-ink) 40%,transparent); padding-bottom:2px; }
.drop .meta { font-family:var(--font-data); font-size:10.5px; color:var(--ink-soft); letter-spacing:.12em; text-transform:uppercase; }
.drop input[type=file] { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.uploads { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.uploads .tile { width:60px; height:60px; border-radius:var(--radius-sm); background:var(--surface-2); position:relative; overflow:hidden; border:1px solid var(--hair); transition:transform .15s ease, opacity .2s ease; }
.uploads .tile img { width:100%; height:100%; object-fit:cover; }
.uploads .tile.is-removing { opacity:0; transform:scale(.85); pointer-events:none; }
.uploads .tile .dot { position:absolute; right:4px; bottom:4px; width:13px; height:13px; border-radius:50%; background:var(--ok); border:2px solid var(--surface); }
.uploads .tile.is-pending .dot { background:var(--accent); animation:pulse 1.2s ease-in-out infinite; }
.uploads .tile.is-error .dot { background:#C8412B; }
.uploads .tile .x { position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; background:color-mix(in srgb,var(--ink) 72%,transparent); color:var(--paper); display:grid; place-items:center; font-size:11px; cursor:pointer; opacity:0; border:0; transition:opacity .12s ease; }
.uploads .tile:hover .x { opacity:1; }
.uploads .tile.is-pending .x { display:none; }
@media (hover:none){
  .uploads .tile .x { opacity:.85; }
  /* Touch: extend the tap area to ~44px without enlarging the visible glyph
     (clicks on the transparent overlay still hit the button). */
  .uploads .tile .x::after { content:""; position:absolute; inset:-7px; }
}
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(.7);opacity:.6;} }
.app-error { color:#D85A3D; font-size:13px; margin-top:12px; min-height:16px; opacity:0; transition:opacity .2s ease; }
.app-error.is-visible { opacity:1; }

/* ---- generation results ---- */
.gen { margin-top:40px; scroll-margin-top:84px; }
.gen-status { text-align:center; max-width:560px; margin:0 auto 8px; color:var(--ink-soft); font-size:15px; line-height:1.5; }
.gen-status.is-busy { color:var(--ink); }
.gen-status.is-busy::before { content:""; display:inline-block; width:13px; height:13px; margin-right:9px; vertical-align:-1px; border:2px solid var(--hair); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
.gen-wait-note { max-width:620px; margin:0 auto 18px; color:var(--ink-soft); font-size:13.5px; line-height:1.45; }
.gen-wait-steps { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; max-width:760px; margin:0 auto 24px; }
.gen-wait-steps span {
  display:flex; align-items:center; gap:7px; min-height:34px;
  background:var(--surface); border:1px solid var(--hair); border-radius:999px; padding:7px 11px;
  box-shadow:0 10px 24px -20px rgba(31,27,23,.35);
}
.gen-wait-steps strong {
  font-family:var(--font-data); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink);
}
.gen-wait-steps em { font-style:normal; font-size:12.5px; color:var(--ink-soft); }
@keyframes spin { to { transform:rotate(360deg); } }
.pack-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:24px 0; }
.stat { background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-md); padding:18px; text-align:center; }
.stat-n { display:block; font-family:var(--font-data); font-weight:600; font-size:26px; color:var(--accent-ink); font-variant-numeric:tabular-nums; }
.stat-l { display:block; font-size:12.5px; color:var(--ink-soft); margin-top:4px; }
.pack-filters { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 24px; }
.ftab { font-family:var(--font-body); font-size:13.5px; font-weight:500; color:var(--ink-soft); background:var(--surface); border:1px solid var(--hair); border-radius:999px; padding:8px 16px; cursor:pointer; }
.ftab em { font-style:normal; color:var(--ink-soft); margin-left:5px; font-variant-numeric:tabular-nums; }
.ftab:hover { color:var(--ink); border-color:var(--accent-ink); }
.ftab.is-on { background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--ink); border-color:var(--accent); }
.gen-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px; }
.gen-card { border:1px solid var(--hair); border-radius:var(--radius-md); overflow:hidden; background:var(--surface-2); animation:cardBloom .52s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--card-i, 0) * 55ms); }
/* The pack "blooms" in: lift up + scale from .97, stronger stagger off --card-i. */
@keyframes cardBloom { from { opacity:0; transform:translateY(10px) scale(.97); } to { opacity:1; transform:none; } }
.gen-frame { position:relative; width:100%; overflow:hidden; background:#000; }
.gen-frame iframe { position:absolute; top:0; left:0; border:0; transform-origin:top left; pointer-events:none; }
.gen-card-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 13px; }
.angle-tag { font-family:var(--font-data); font-size:11px; letter-spacing:.04em; color:var(--ink-soft); }
.gen-dl { font-size:12.5px; font-weight:600; color:var(--accent-ink); }
.gen-dl:hover { text-decoration:underline; }
.gen-dl.is-disabled { color:var(--ink-soft); opacity:.55; pointer-events:none; }
.gen-controls { margin-top:32px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.gen-controls[hidden] { display:none; }
.gen-refine-row { display:flex; gap:10px; width:100%; max-width:520px; }
.gen-refine-row input { flex:1; font-family:var(--font-body); font-size:16px; color:var(--ink); background:var(--surface); border:1px solid var(--hair); border-radius:999px; padding:12px 20px; }
.gen-refine-row input:focus { outline:none; border-color:var(--accent-ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.gen-refine-row button { font-family:var(--font-body); font-weight:600; font-size:15px; color:var(--ink); background:transparent; border:1px solid var(--hair); border-radius:999px; padding:12px 22px; cursor:pointer; }
.gen-refine-row button:hover { border-color:var(--accent-ink); color:var(--accent-ink); }

.pack-actions { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.pack-actions[hidden] { display:none; }
.gen-frame { cursor:pointer; }
.winner-badge {
  position:absolute; top:8px; left:8px; z-index:3;
  font-family:var(--font-data); font-size:11px; font-weight:600; letter-spacing:.03em;
  color:#fff; background:var(--accent); border-radius:999px; padding:4px 10px;
  box-shadow:0 4px 12px -4px rgba(200,107,58,.7);
}
/* One-shot coral ring-pulse a card gets when marked a winner (JS adds .win-pulse,
   removes it on animationend; pairs with navigator.vibrate?.(10)). */
.win-pulse { animation:winPulse .6s cubic-bezier(.2,.8,.2,1) 1; }
@keyframes winPulse {
  0%   { box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%  { box-shadow:0 0 0 12px rgba(193,95,60,0); }
  100% { box-shadow:0 0 0 0 rgba(193,95,60,0); }
}
/* Poster-engine ads are a finished PNG shown directly (no scaled iframe). */
.gen-img { display:block; width:100%; height:auto; }
/* Engine tag (Poster / Studio) lives in the card bar so it never covers art;
   only rendered when a pack mixes engines (A/B comparison). */
.bar-tags { display:flex; align-items:center; gap:7px; min-width:0; flex-wrap:wrap; }
.engine-tag {
  font-family:var(--font-data); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); border:1px solid var(--hair); border-radius:999px; padding:2px 8px;
}
.engine-tag.engine-poster { color:var(--accent-ink); border-color:color-mix(in srgb,var(--accent-ink) 45%,var(--hair)); }

/* ---- ad detail drawer ---- */
.ad-drawer { position:fixed; inset:0; z-index:60; }
.ad-drawer[hidden] { display:none; }
.ad-scrim { position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); }
.ad-panel {
  position:absolute; top:0; right:0; height:100%; width:min(440px,92vw);
  background:var(--surface); border-left:1px solid var(--hair);
  padding:24px; overflow-y:auto; display:flex; flex-direction:column; gap:20px;
  box-shadow:-20px 0 60px -20px rgba(0,0,0,.6); animation:slidein .2s ease;
}
@keyframes slidein { from { transform:translateX(20px); opacity:.6; } to { transform:none; opacity:1; } }
.ad-close { align-self:flex-end; width:34px; height:34px; border-radius:50%; border:1px solid var(--hair); background:transparent; color:var(--ink); font-size:18px; cursor:pointer; }
.ad-close:hover { background:var(--surface-2); }
.ad-preview { position:relative; width:100%; flex:0 0 auto; overflow:hidden; border-radius:var(--radius-md); background:#000; border:1px solid var(--hair); }
.ad-preview iframe { position:absolute; top:0; left:0; border:0; transform-origin:top left; pointer-events:none; }
/* In-feed mockup control (PLATFORM_CHROME). flex:0 0 auto so the preview keeps its
   full height in the scrolling drawer instead of being shrunk + cropped. */
.ad-mockup { display:flex; flex-direction:column; gap:12px; }
.ad-mockup-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ad-mockup-toggle { font-weight:600; font-size:13px; color:var(--ink-soft); background:var(--paper); border:1px solid var(--hair); border-radius:999px; padding:9px 16px; min-height:40px; cursor:pointer; }
.ad-mockup-toggle[aria-pressed="true"] { background:color-mix(in srgb, var(--accent) 12%, transparent); border-color:var(--accent); color:var(--accent-ink); }
.ad-mockup-platforms { display:flex; flex-wrap:wrap; gap:6px; }
.ad-mockup-pf { font-weight:500; font-size:12px; color:var(--ink-soft); background:var(--paper); border:1px solid var(--hair); border-radius:999px; padding:7px 13px; min-height:36px; cursor:pointer; }
.ad-mockup-pf.is-on { background:var(--accent); border-color:var(--accent); color:#fff; }
.ad-mockup-preview { position:relative; width:100%; flex:0 0 auto; overflow:hidden; border-radius:var(--radius-md); background:#000; border:1px solid var(--hair); }
.ad-mockup-preview iframe { position:absolute; top:0; left:0; border:0; transform-origin:top left; pointer-events:none; }
.ad-mockup-dl { align-self:flex-start; }
.ad-mockup-status { font-size:13px; color:var(--ink-soft); }
.ad-meta { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ad-meta-row { display:flex; flex-direction:column; gap:2px; background:var(--paper); border:1px solid var(--hair); border-radius:var(--radius-sm); padding:10px 12px; }
.ad-meta-row span { font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-data); }
.ad-meta-row strong { font-size:14px; color:var(--ink); font-weight:600; }
.ad-fields { display:flex; flex-direction:column; gap:14px; }
/* "Tweak this ad" natural-language restyle row (render-lane ads only). */
.ad-tweak { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.ad-tweak .field { margin:0; }
.ad-tweak-row { display:flex; gap:8px; align-items:stretch; }
.ad-tweak-row input {
  flex:1 1 auto; min-width:0; min-height:44px; padding:11px 14px; font-size:16px;
  border:1px solid var(--line-2); border-radius:var(--radius-sm, 10px);
  background:var(--surface); color:var(--ink); font-family:var(--font-body);
}
.ad-tweak-row input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.ad-tweak-row #ad-tweak-go { flex:0 0 auto; min-height:44px; padding:11px 18px; font-size:14px; white-space:nowrap; }
.ad-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.ad-actions .btn-next, .ad-actions .btn-back { padding:11px 18px; font-size:14px; min-height:44px; }
.ad-actions .gen-dl { margin-left:auto; font-size:14px; min-height:44px; display:inline-flex; align-items:center; }
/* Promote the 4K-final button to a coral CTA so the drawer's hero action lifts. */
.ad-actions #ad-finalize {
  margin-left:0; color:#fff; border-color:transparent;
  background:linear-gradient(180deg, var(--accent), var(--accent-ink));
  box-shadow:0 10px 26px -8px rgba(193,95,60,.5);
  transition:transform .15s ease, box-shadow .2s ease;
}
.ad-actions #ad-finalize:hover { transform:translateY(-2px); box-shadow:0 16px 32px -10px rgba(193,95,60,.6); color:#fff; }
.ad-actions .gen-dl.is-disabled { color:var(--ink-soft); opacity:.55; pointer-events:none; }

/* ---- brand memory ---- */
.brand-wrap { max-width:680px; margin:0 auto; }
.page-lead { color:var(--ink-soft); font-size:16px; line-height:1.55; max-width:560px; margin-bottom:28px; }
.brand-card { background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-lg); padding:28px; }
.swatches { display:flex; flex-wrap:wrap; gap:12px; }
.swatch { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; }
.swatch input[type=color] { width:56px; height:56px; border:1px solid var(--hair); border-radius:var(--radius-sm); background:none; cursor:pointer; padding:0; }
.swatch input[type=color]::-webkit-color-swatch-wrapper { padding:3px; }
.swatch input[type=color]::-webkit-color-swatch { border:0; border-radius:6px; }
.swatch-hex { font-family:var(--font-data); font-size:11px; color:var(--ink-soft); text-transform:uppercase; }
/* Tap box grown to 32px for thumbs; the visible glyph stays ~18px via the inner
   ring sizing of border + font. -8px offset keeps it clear of the next swatch
   (56px swatch + 12px gap > 8px overhang). */
.swatch-x { position:absolute; top:-8px; right:-8px; width:32px; height:32px; border-radius:50%; border:1px solid var(--hair); background:var(--surface); color:var(--ink-soft); font-size:18px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.swatch-x:hover { color:var(--ink); border-color:var(--accent-ink); }
/* Touch devices: expand the TAP area to the 44px WCAG minimum without enlarging the
   visible 32px glyph (a centered transparent overlay; clicks on it still hit the
   button). Mouse/precise-pointer keeps the tight 32px target — no layout change. */
@media (hover: none) {
  .swatch-x::after { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; }
}
.swatch-add { width:56px; height:56px; border:1.5px dashed var(--hair); border-radius:var(--radius-sm); background:transparent; color:var(--ink-soft); font-size:22px; cursor:pointer; }
.swatch-add:hover { border-color:var(--accent-ink); color:var(--accent-ink); }
.brand-actions { display:flex; align-items:center; gap:16px; margin-top:28px; }
.brand-saved { color:var(--ok); font-size:14px; font-weight:600; }

@media (max-width:860px) {
  /* Sidebar becomes a slide-in drawer toggled by the topbar hamburger. */
  .sidebar {
    position:fixed; left:0; top:0; bottom:0; height:100dvh; width:min(280px,82vw);
    transform:translateX(-100%); transition:transform .25s ease; z-index:60;
    box-shadow:24px 0 60px -28px rgba(0,0,0,.7);
  }
  body.nav-open .sidebar { transform:translateX(0); }
  .nav-scrim {
    display:block; position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.5);
    opacity:0; pointer-events:none; transition:opacity .2s ease; backdrop-filter:blur(2px);
  }
  body.nav-open .nav-scrim { opacity:1; pointer-events:auto; }
  body.nav-open { overflow:hidden; }

  .nav-toggle { display:inline-flex; margin-right:2px; width:44px; height:44px; }
  /* 44px hamburger fits a slightly tighter bar so the topbar height holds. */
  .app-topbar { padding:10px 12px; gap:6px; justify-content:flex-start; }
  .topbar-title { flex:1 1 auto; font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar-tools { margin-left:auto; }

  .app-content { padding:18px 16px; }
  .create-hero { padding:8px 0 22px; }
  .create-hero p { font-size:15px; margin-top:14px; }
  .wizard { padding:20px 16px; }
  .wiz-grid { grid-template-columns:1fr; gap:22px; }
  .recipe-grid { grid-template-columns:repeat(2, 1fr); }
  .count-card { grid-template-columns:1fr; align-items:start; }
  .count-card .field { max-width:none; }
  .concept-head { flex-direction:column; }
  .concept-actions { justify-content:flex-start; }
  .pack-stats { grid-template-columns:repeat(2,1fr); gap:10px; }
  .ad-meta { grid-template-columns:1fr 1fr; }
  .gen-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }

  /* 44px touch targets — sidebar nav, mobile filter tabs, card actions */
  .nav-item { min-height:44px; padding-top:11px; padding-bottom:11px; }
  .nav-create { min-height:44px; }
  .ftab { min-height:44px; display:inline-flex; align-items:center; }
  .gen-dl { display:inline-flex; align-items:center; min-height:44px; }
  .gen-action { min-height:44px; padding:0 15px; }

  /* Drawer actions become a sticky bottom bar so Download / 4K / Regenerate stay
     thumb-reachable in the scrolling drawer. JS keeps .ad-actions last in flow. */
  .ad-actions {
    position:sticky; bottom:0; z-index:5;
    margin:0 -24px -24px; padding:12px 24px;
    padding-bottom:max(12px, env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--accent) 6%, var(--surface));
    border-top:1px solid var(--hair);
  }
}

@media (max-width:420px) {
  .topbar-tools .plan-pill { display:none; }

  /* "Needs result" rows: drop the 3rd column under the thumb+text so the CTA
     wraps to a full row and stays tappable instead of being squeezed. */
  .need-row { grid-template-columns:auto 1fr; }
  .need-cta { grid-column:1 / -1; text-align:right; white-space:normal; }
}

@media (max-width:380px) {
  .prod-sheet { max-height:calc(100vh - 44px); padding:16px 14px; }
}

@media (max-width:340px) {
  .app-topbar { gap:8px; }
  .credits-pill { padding:5px 8px; font-size:10px; letter-spacing:.04em; }
}

@media (max-width:480px) {
  .app-content { padding:16px 12px; }
  .stepper { gap:5px; margin-bottom:22px; }
  .step { padding:7px 11px; font-size:13px; gap:7px; min-height:44px; }
  .recipe-grid { grid-template-columns:1fr; }
  .recipe-card { min-height:auto; }
  .concept-grid { grid-template-columns:1fr; }
  .concept-art { min-height:210px; }
  .wiz-nav { gap:10px; }
  .btn-next, .btn-back, .gen-start, .gen-full { padding:12px 18px; font-size:14px; min-height:44px; }
  .pack-stats { grid-template-columns:repeat(2,1fr); }
  /* One-column result cards on phones — bigger preview per card */
  .gen-grid { grid-template-columns:1fr; }
  /* Preview-first detail drawer goes full-width on phones */
  .ad-panel { width:100vw; }

  /* 44px touch targets — chips, filter tabs, upload remove (x) hit area */
  .chip { min-height:44px; display:inline-flex; align-items:center; }
  .ftab { min-height:44px; }
  .uploads .tile .x { width:30px; height:30px; top:2px; right:2px; font-size:13px; }

  /* Exports: stack the row + go full-width so the download is thumb-wide. */
  .exp-row { flex-direction:column; align-items:stretch; gap:8px; }
  .exp-actions { justify-content:stretch; }
  .exp-dl { width:100%; }
  .exp-locked { justify-content:center; }

  /* Larger field labels are easier to scan on small screens. */
  .field-label, .field > span { font-size:14px; }

  /* Template actions stack into full-width 44px buttons. */
  .tpl-actions { flex-direction:column; gap:10px; align-items:stretch; }
  .tpl-actions > .btn, .tpl-actions > button, .tpl-actions > a { width:100%; min-height:44px; justify-content:center; }

  /* Sticky wizard stepper on phones so step context stays in view while scrolling.
     Offset below the sticky topbar (~64px at this width) so it never hides a field. */
  .stepper { position:sticky; top:60px; z-index:30; background:var(--surface); padding:12px 0; border-bottom:1px solid var(--hair); }
}

@media (max-width:640px) {
  .set-row { flex-direction:column; align-items:flex-start; }
  .prod-sheet { padding:18px 16px; }
}

footer { padding:56px 0; border-top:1px solid var(--hair); color:var(--ink-soft); font-size:14px; }
.foot { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.foot a:hover { color:var(--ink); }

@media (max-width:880px) {
  .nav-links { display:none; }
  .steps, .price-grid, .render-grid, .cols2 { grid-template-columns:1fr; }
  .formats-grid { grid-template-columns:repeat(2,1fr); }
  .poster-grid { grid-template-columns:repeat(3,1fr); }
  .threeD-hero .cap { padding:24px; }
}
@media (prefers-reduced-motion: reduce) {
  .poster { animation:none !important; opacity:1; transform:none; }
  html { scroll-behavior:auto; }

  /* In-app motion: kill spinners, pulses, the drawer slide, and hover lifts. */
  .gen-status.is-busy::before,
  .uploads .tile.is-pending .dot { animation:none !important; }
  .ad-panel { animation:none !important; }
  .gen-status.is-busy::before { border-top-color:var(--accent); }
  .wcard, .pcard, .gen-card, .pack-row, .need-row, .prod-card,
  .btn, .btn-primary, .btn-next, .gen-start, .gen-full, .gen-full:hover,
  .btn-upgrade, .nav-create, .page-cta, .exp-dl, .wcard-more {
    transition:none !important;
  }
  .wcard:hover, .pcard:hover, .btn-primary:hover, .btn-next:hover,
  .gen-start:hover, .gen-full:hover, .btn-upgrade:hover, .nav-create:hover,
  .page-cta:hover, .pcard:hover { transform:none !important; }
  .gen-skeleton { animation:none !important; }
  .gen-card { animation:none !important; }
  .sidebar { transition:none !important; }

  /* New "alive" motion neutralized: bloom, studioShimmer, winPulse, tilt. */
  .win-pulse { animation:none !important; }
  .is-busy::before { animation:none !important; }
  .tilt { transform:none !important; transition:none !important; }
}

/* ---- Verify-pass fixes (skeleton wait-state, More-control, a11y) ---- */
.gen-skeleton {
  aspect-ratio: 1 / var(--skel-aspect, 1.25);
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:7px;
  min-height:190px;
  padding:14px;
  overflow:hidden;
  /* Studio cream/coral shimmer sweep (not generic grey). */
  background:
    linear-gradient(100deg,
      var(--surface-2) 0%,
      var(--surface-2) 30%,
      color-mix(in srgb, var(--accent-soft) 80%, var(--surface)) 50%,
      var(--surface-2) 70%,
      var(--surface-2) 100%);
  background-size: 220% 100%;
  border: 1px solid var(--hair);
  border-radius: var(--radius-md);
  animation: studioShimmer 1.5s ease-in-out infinite;
}
.gen-skeleton::before {
  content:"";
  position:absolute;
  inset:12px;
  border-radius:calc(var(--radius-md) - 4px);
  border:1px dashed color-mix(in srgb, var(--accent) 32%, var(--hair));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 70%, transparent), transparent 55%),
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(31,27,23,.035) 13px 14px);
}
.gen-skeleton-label,
.gen-skeleton-copy {
  position:relative;
  z-index:1;
}
.gen-skeleton-label {
  align-self:flex-start;
  font-family:var(--font-data);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-ink);
  background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 32%, var(--hair));
  border-radius:999px;
  padding:5px 9px;
}
.gen-skeleton-copy {
  color:var(--ink-soft);
  font-size:13px;
  line-height:1.35;
}
.gen-start:disabled,
.gen-full:disabled,
.gen-refine-row button:disabled {
  opacity:.68;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none;
}
.gen-skeleton.is-filled { animation:none; opacity:.35; }
@keyframes studioShimmer { 0% { background-position:120% 0; } 100% { background-position:-120% 0; } }

.more-control { border-top:1px solid var(--hair); margin-top:16px; padding-top:4px; }
.more-control > summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:14px; color:var(--ink-soft);
  padding:10px 0; min-height:44px;
}
.more-control > summary::-webkit-details-marker { display:none; }
.more-control > summary::after { content:"+"; color:var(--accent); font-size:20px; margin-left:auto; }
.more-control[open] > summary::after { content:"\2013"; }

#ad-tpl-name, .ad-tpl-row input { font-size:16px; }
.upgrade-x { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.ad-close { width:44px; height:44px; }

/* ============================================================================
   Dashboard — the Creative Outcomes Flywheel (Slice 1). On the studio tokens:
   warm cream surfaces, coral accent, Geist + Geist Mono labels.
   ========================================================================== */
.dash { display:flex; flex-direction:column; gap:40px; max-width:1100px; }
.dash-zone { display:flex; flex-direction:column; gap:18px; }
.zone-head { display:flex; flex-direction:column; gap:4px; }
.zone-title { font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:-.02em; }
.zone-sub { color:var(--ink-soft); font-size:14.5px; }

/* What's working — winner cards */
.wgrid {
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}
.wcard {
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-card); display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.wcard:hover { transform:translateY(-2px); box-shadow:var(--shadow-card); }
.wcard-art { position:relative; aspect-ratio:4/5; background:var(--surface-2); }
.wcard-img { width:100%; height:100%; object-fit:cover; display:block; }
.wcard-img--ph {
  display:flex; align-items:center; justify-content:center; text-align:center; padding:18px;
  font-family:var(--font-serif); font-style:italic; font-size:18px; color:var(--ink-soft);
}
.wcard-star {
  position:absolute; top:10px; left:10px; width:26px; height:26px; border-radius:50%;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:14px; box-shadow:0 2px 8px rgba(193,95,60,.4);
}
.wcard-body { padding:14px 14px 16px; display:flex; flex-direction:column; gap:8px; }
.wcard-product {
  font-family:var(--font-data); font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-soft);
}
.wcard-recipe { font-size:14px; line-height:1.4; color:var(--ink); }
.wcard-more {
  margin-top:4px; appearance:none; border:1px solid var(--accent); background:var(--accent); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:14px; padding:11px 16px;
  min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); cursor:pointer;
  box-shadow:0 10px 26px -8px rgba(193,95,60,.5);
  transition:filter .15s ease, opacity .15s ease, transform .15s ease, box-shadow .2s ease;
}
.wcard-more:hover { filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 16px 32px -10px rgba(193,95,60,.6); }
.wcard-more:disabled { opacity:.65; cursor:default; transform:none; box-shadow:none; }

/* Your library — pack rows */
.pack-list { display:flex; flex-direction:column; gap:8px; }
.pack-row {
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:14px;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-sm);
  padding:14px 16px; transition:border-color .15s ease, background .15s ease;
}
.pack-row:hover { border-color:var(--accent); }
.pack-name { font-weight:600; font-size:15px; }
.pack-meta {
  font-family:var(--font-data); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-soft); display:flex; align-items:center; gap:10px; white-space:nowrap;
}
.pack-win { color:var(--accent-ink); }
.pack-tag {
  background:var(--accent-soft, #F2E3D5); color:var(--accent-ink); border-radius:999px;
  padding:2px 8px; font-size:10.5px;
}
.pack-open { font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--accent-ink); white-space:nowrap; }
.pack-row--new { border-style:dashed; background:transparent; }
.pack-row--new .pack-name { color:var(--ink-soft); }

/* Empty states */
.zone-empty {
  background:var(--surface); border:1px dashed var(--line-2, var(--hair)); border-radius:var(--radius-md);
  padding:28px; display:flex; flex-direction:column; gap:8px; align-items:flex-start;
}
.zone-empty-h { font-family:var(--font-display); font-weight:700; font-size:17px; }
.zone-empty-p { color:var(--ink-soft); font-size:14.5px; max-width:52ch; }
.zone-empty-cta, .dash-cta {
  margin-top:6px; display:inline-block; background:var(--ink); color:var(--paper);
  font-family:var(--font-display); font-weight:600; font-size:14.5px; padding:11px 18px;
  border-radius:var(--radius-sm);
}
.zone-empty-cta:hover, .dash-cta:hover { filter:brightness(1.1); }

/* Brand-new user (no packs at all) */
.dash-empty { max-width:560px; display:flex; flex-direction:column; gap:14px; padding:24px 0; }
.dash-empty h1 { font-family:var(--font-display); font-size:34px; font-weight:800; letter-spacing:-.025em; }
.dash-empty p { color:var(--ink-soft); font-size:16px; line-height:1.55; }

@media (max-width:560px) {
  .pack-row { grid-template-columns:1fr auto; }
  .pack-row .pack-open { display:none; }
}

/* ============================================================================
   Creative Outcomes Flywheel — Slice 2 (result logging). Studio tokens.
   ========================================================================== */

/* Lifecycle state pill on pack cards */
.state-pill {
  font-family:var(--font-data); font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  padding:2px 7px; border-radius:999px; border:1px solid var(--hair); color:var(--ink-soft);
}
.state-pill.state-testing { background:#EAF1DC; border-color:#cdd9b3; color:#4d5e2a; }
.state-pill.state-winner  { background:var(--accent); border-color:var(--accent); color:#fff; }
.state-pill.state-loser   { background:var(--surface-2); color:var(--ink-soft); }

/* Drawer result control */
.ad-result {
  margin-top:14px; padding-top:14px; border-top:1px solid var(--hair);
  display:flex; flex-direction:column; gap:10px;
}
.ad-result-q { font-family:var(--font-display); font-weight:600; font-size:15px; }
.ad-running {
  align-self:flex-start; appearance:none; background:transparent; border:1px solid var(--hair);
  color:var(--ink-soft); font-family:var(--font-display); font-size:13px; padding:6px 12px;
  border-radius:999px; cursor:pointer;
}
.ad-running.is-on { border-color:#cdd9b3; background:#EAF1DC; color:#4d5e2a; }
.ad-result-btns { display:flex; gap:10px; }
.ad-result-btns[hidden] { display:none; }
.rbtn {
  flex:1; appearance:none; border:1px solid var(--hair); background:var(--surface);
  font-family:var(--font-display); font-weight:700; font-size:15px; padding:11px 12px;
  border-radius:var(--radius-sm); cursor:pointer; transition:border-color .15s, background .15s;
}
.rbtn-up.is-on    { border-color:var(--accent); background:var(--accent); color:#fff; }
.rbtn-down.is-on  { border-color:var(--ink-soft); background:var(--surface-2); color:var(--ink); }
.rbtn:hover { border-color:var(--ink-soft); }
#ad-roas {
  width:100%; font-family:var(--font-body); font-size:16px; padding:10px 12px;
  border:1px solid var(--hair); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink);
}
.ad-result-status { font-size:13px; color:var(--accent-ink); min-height:1em; }

/* "Run these 5 first" strip on the pack view */
.test-plan {
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-md);
  padding:14px 18px; margin-bottom:16px;
}
.tp-head { display:flex; flex-direction:column; gap:2px; }
.tp-head strong { font-family:var(--font-display); font-size:15px; }
.tp-head span { color:var(--ink-soft); font-size:13px; }
.tp-btn {
  appearance:none; border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  font-family:var(--font-display); font-weight:600; font-size:14px; padding:9px 16px;
  border-radius:var(--radius-sm); cursor:pointer; white-space:nowrap;
}
.tp-btn:disabled { opacity:.6; cursor:default; }

/* Dashboard: ROAS badge on winner cards */
.wcard-roas {
  font-family:var(--font-data); font-size:12px; font-weight:600; color:var(--accent-ink);
  letter-spacing:.02em;
}

/* Dashboard: "Needs result" queue */
.need-list { display:flex; flex-direction:column; gap:8px; }
.need-row {
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-sm);
  padding:10px 14px; transition:border-color .15s;
}
.need-row:hover { border-color:var(--accent); }
.need-thumb { width:40px; height:50px; object-fit:cover; border-radius:6px; background:var(--surface-2); display:block; }
.need-thumb--ph { display:inline-block; }
.need-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.need-product { font-family:var(--font-data); font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); }
.need-head { font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.need-cta { font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--accent-ink); white-space:nowrap; }

/* ============================================================
   Shared in-app page chrome (Products, Ad Packs, Exports, Settings)
   ============================================================ */
.page-wrap { max-width:var(--maxw); margin:0 auto; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.page-head-text { min-width:0; }
.page-title { font-family:var(--font-display); font-weight:800; font-size:26px; letter-spacing:-.01em; color:var(--ink); margin:0 0 6px; }
.page-head .page-lead { margin-bottom:0; }
.page-cta {
  font-family:var(--font-display); font-weight:600; font-size:14px; color:#fff;
  background:var(--ink); border:0; border-radius:999px; padding:11px 20px; cursor:pointer;
  white-space:nowrap; transition:transform .15s, box-shadow .15s; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
}
.page-cta:hover { transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(20,18,16,.55); }

/* Settings */
.set-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px; }
.set-card { background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-lg); padding:24px; }
.set-card-h { font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink); margin:0 0 16px; }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--hair); }
.set-row:first-of-type { border-top:0; }
.set-k { font-size:13.5px; color:var(--ink-soft); }
.set-v { font-size:14px; color:var(--ink); font-weight:500; text-align:right; }
.set-actions { margin-top:18px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.set-link { font-size:13.5px; font-weight:600; color:var(--accent-ink); min-height:44px; display:inline-flex; align-items:center; }
.set-link:hover { color:var(--ink); }
.set-hint { font-size:12.5px; color:var(--ink-soft); line-height:1.5; }

/* Ad Packs archive */
.pack-filters-bar { display:flex; gap:8px; margin-bottom:18px; }
.pcard-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:18px; }
.pcard { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; box-shadow:var(--shadow-card); transition:transform .15s, border-color .15s, box-shadow .15s; }
.pcard:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:0 18px 36px -20px rgba(20,18,16,.45); }
.pcard-art { position:relative; aspect-ratio:1/1; background:var(--surface-2); }
.pcard-img { width:100%; height:100%; object-fit:cover; display:block; }
.pcard-img--ph { display:grid; place-items:center; padding:16px; text-align:center; color:var(--ink-soft); font-family:var(--font-serif); font-size:18px; font-style:italic; }
.pcard-win { position:absolute; top:8px; right:8px; font-family:var(--font-data); font-size:11px; background:var(--ink); color:#fff; padding:3px 8px; border-radius:999px; }
.pcard-body { padding:13px 14px 15px; }
.pcard-name { font-weight:600; font-size:14.5px; color:var(--ink); margin:0 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcard-meta { font-size:12.5px; color:var(--ink-soft); }
.pcard-tag { font-family:var(--font-data); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-ink); margin-left:4px; }

/* Exports */
.exp-list { display:flex; flex-direction:column; gap:10px; }
.exp-row { display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-md); padding:12px 16px; }
.exp-thumb { width:48px; height:48px; object-fit:cover; border-radius:8px; background:var(--surface-2); flex:0 0 48px; }
.exp-thumb--ph { display:inline-block; }
.exp-text { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.exp-name { font-weight:600; font-size:14.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.exp-meta { font-size:12.5px; color:var(--ink-soft); }
.exp-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.exp-dl { font-family:var(--font-display); font-weight:700; font-size:14px; color:#fff; background:var(--accent); border:0; border-radius:999px; padding:10px 16px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; white-space:nowrap; }
.exp-dl[data-quality="final"] { color:var(--accent-ink); background:transparent; border:1px solid var(--hair); }
.exp-dl:hover { filter:brightness(1.08); }
.exp-dl[disabled] { opacity:.6; cursor:default; }
.exp-locked { font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--accent-ink); white-space:nowrap; min-height:44px; padding:10px 16px; display:inline-flex; align-items:center; }

/* Products */
.prod-top { margin-bottom:18px; }
.prod-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px; }
.prod-card { display:flex; flex-direction:column; justify-content:space-between; background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-md); padding:18px; }
.prod-name { font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink); margin:0 0 5px; }
.prod-meta { font-family:var(--font-data); font-size:12px; color:var(--ink-soft); margin:0 0 8px; }
.prod-desc { font-size:13.5px; color:var(--ink-soft); line-height:1.5; margin:0 0 10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.prod-packs { font-size:12.5px; color:var(--ink-soft); margin:0; }
.prod-actions { display:flex; align-items:center; gap:14px; margin-top:16px; padding-top:14px; border-top:1px solid var(--hair); }
.prod-cta { font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--accent-ink); margin-right:auto; min-height:44px; display:inline-flex; align-items:center; }
.prod-cta:hover { color:var(--ink); }
.prod-edit, .prod-del { font-family:var(--font-body); font-size:13px; color:var(--ink-soft); background:none; border:0; cursor:pointer; padding:8px 12px; min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; }
.prod-edit:hover { color:var(--ink); }
.prod-del:hover { color:var(--accent-ink); }
.p-select { font-family:var(--font-body); font-size:16px; color:var(--ink); background:var(--surface); border:1px solid var(--hair); border-radius:10px; padding:11px 12px; }
.p-select:focus { outline:none; border-color:var(--accent-ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }

/* Product modal (mirrors the upgrade modal) */
.prod-modal { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; }
.prod-modal[hidden] { display:none; }
.prod-scrim { position:absolute; inset:0; background:rgba(20,18,16,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.prod-sheet { position:relative; z-index:1; width:100%; max-width:480px; max-height:90vh; overflow:auto; background:var(--paper); border:1px solid var(--hair); border-radius:var(--radius-lg); box-shadow:0 40px 90px -30px rgba(20,18,16,.6); padding:28px; display:flex; flex-direction:column; gap:14px; }
.prod-x { position:absolute; top:8px; right:8px; padding:8px; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; font-size:22px; line-height:1; color:var(--ink-soft); background:none; border:0; cursor:pointer; }
.prod-x:hover { color:var(--ink); }
.prod-sheet-h { font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--ink); margin:0 0 4px; }
.prod-sheet-actions { display:flex; align-items:center; gap:14px; margin-top:6px; }
.prod-err { font-size:13px; color:var(--accent-ink); }

/* Brand logo */
.logo-row { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.logo-preview { width:96px; height:96px; flex:0 0 96px; border-radius:var(--radius-md); border:1px solid var(--hair); background:var(--surface-2); display:grid; place-items:center; overflow:hidden; }
.logo-preview img { max-width:100%; max-height:100%; object-fit:contain; }
.logo-preview--ph span { font-size:12px; color:var(--ink-soft); }
.logo-actions { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.logo-remove { font-size:13px; color:var(--ink-soft); background:none; border:0; cursor:pointer; padding:8px 12px; min-height:44px; display:inline-flex; align-items:center; }
.logo-remove:hover { color:var(--accent-ink); }
.logo-err { font-size:12.5px; color:var(--accent-ink); }

/* Templates */
.tpl-section { margin-bottom:34px; }
.tpl-section-h { font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink); margin:0 0 4px; }
.tpl-section-p { font-size:13.5px; color:var(--ink-soft); margin:0 0 16px; }
.tpl-actions { display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap; }
.pcard--tpl { cursor:default; }
.pcard-art--starter { display:grid; place-items:center; background:linear-gradient(135deg, var(--surface-2), color-mix(in srgb,var(--accent) 20%, var(--surface-2))); }
.starter-mark { font-family:var(--font-serif); font-style:italic; font-size:22px; color:var(--ink); text-align:center; padding:16px; }
.tpl-banner {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid var(--accent);
  color:var(--ink); border-radius:var(--radius-md); padding:11px 16px; font-size:14px; margin-bottom:18px;
}
.tpl-banner a { color:var(--accent-ink); font-weight:600; margin-left:auto; }

@media (max-width: 640px) {
  .page-title { font-size:22px; }
  .pcard-grid { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
}

/* ============================================================================
   Onboarding Wave 2 — brand-aware polish. Studio tokens, kept calm + subtle.
   ========================================================================== */

/* Read-only "using brand X" line in the wizard — quiet hint, mirrors .field-hint. */
.brand-using {
  font-size:12.5px; line-height:1.5; color:var(--ink-soft);
  margin:10px 2px 0;
}
.brand-using strong { color:var(--ink); font-weight:600; }
.brand-control { display:flex; flex-direction:column; gap:10px; }
.brand-control-head { display:flex; align-items:baseline; gap:8px; }
.brand-control-head em { font-style:normal; color:var(--ink-soft); font-size:12px; }
.brand-select-row { display:flex; flex-direction:column; gap:6px; }
.brand-select-row span { font-size:12px; font-weight:600; color:var(--ink); }
.brand-select-row .p-select:disabled { opacity:.55; cursor:not-allowed; }
.brand-control-copy { display:block; color:var(--ink-soft); }

/* Dashboard saved-product quick links — pill chips, reuse .chip styling. */
.dash-chips { display:flex; flex-wrap:wrap; gap:9px; }
.dash-chip {
  font-family:var(--font-body); font-size:13.5px; font-weight:500; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--hair); border-radius:var(--radius-pill, 999px);
  padding:8px 16px; cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.dash-chip:hover { color:var(--ink); border-color:var(--accent-ink); }

/* ============================================================================
   After-login redesign — per-product Projects IA (DESIGN.md cream/coral).
   Home = your products · project page = one guideline-aware generate + a slate
   with per-card "make more, but…". Calm chrome, loud output.
   ========================================================================== */

/* Nav active = accent-soft wash + a left coral bar. */
.nav-item { position:relative; }
.nav-item.is-active { background:var(--accent-soft); color:var(--accent-ink); font-weight:600; }
.nav-item.is-active::before { content:""; position:absolute; left:-12px; top:9px; bottom:9px; width:3px; border-radius:3px; background:var(--accent); }
.nav-item.is-active svg { color:var(--accent-ink); opacity:1; }

/* ---- Products home --------------------------------------------------------- */
.proj-home { max-width:var(--maxw); margin:0 auto; }
.ph-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:26px; }
.ph-head h1 { font-family:var(--font-display); font-weight:600; font-size:30px; letter-spacing:-.02em; }
.ph-head h1 .em { font-size:33px; }
.ph-head p { color:var(--ink-soft); font-size:14.5px; margin-top:4px; }
.ph-head-cta { white-space:nowrap; }
.ph-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:18px; }
.ph-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .2s ease; }
.ph-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-card); }
.ph-thumb { aspect-ratio:4/3; background:linear-gradient(135deg,#efe7d6,#e3d8c0); position:relative; overflow:hidden; }
.ph-thumb img { width:100%; height:100%; object-fit:cover; }
.ph-thumb-ph { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-serif); font-style:italic; font-size:40px; color:color-mix(in srgb, var(--ink) 30%, transparent); }
.ph-body { padding:13px 15px 15px; }
.ph-body h3 { font-family:var(--font-display); font-weight:600; font-size:15.5px; letter-spacing:-.01em; }
.ph-meta { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:8px; }
.ph-tag { font-family:var(--font-data); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); background:var(--surface-2); border-radius:999px; padding:3px 9px; }
.ph-tag--win { color:var(--accent-ink); background:var(--accent-soft); }
.ph-tag--empty { background:transparent; border:1px dashed var(--line-2); }
.ph-price { margin-left:auto; font-size:13px; color:var(--ink); font-weight:600; }
.ph-new { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:200px; border:1.5px dashed var(--line-2); border-radius:var(--radius-md); background:transparent; cursor:pointer; color:var(--ink-soft); transition:border-color .15s ease, background .15s ease; font:inherit; }
.ph-new:hover { border-color:var(--accent); background:var(--accent-soft); }
.ph-plus { width:38px; height:38px; border-radius:11px; background:var(--surface); border:1px solid var(--hair); display:grid; place-items:center; font-size:22px; color:var(--accent); }
.ph-new-h { font-size:13.5px; font-weight:600; color:var(--ink); }
.ph-new-p { font-size:11.5px; }
.ph-empty { text-align:center; max-width:560px; margin:7vh auto 0; }
.ph-empty-h { font-family:var(--font-display); font-weight:600; font-size:24px; letter-spacing:-.02em; }
.ph-empty-p { color:var(--ink-soft); font-size:14.5px; margin:8px 0 24px; }
.ph-empty .ph-grid { grid-template-columns:1fr; max-width:320px; margin:0 auto; }

/* ---- New product modal ----------------------------------------------------- */
.np-modal { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; }
.np-modal[hidden] { display:none; }
.np-scrim { position:absolute; inset:0; background:rgba(20,18,16,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.np-sheet { position:relative; z-index:1; width:100%; max-width:480px; max-height:92vh; overflow:auto; background:var(--paper); border:1px solid var(--hair); border-radius:20px; box-shadow:0 40px 90px -30px rgba(20,18,16,.6); padding:30px; }
.np-x { position:absolute; top:14px; right:18px; border:none; background:transparent; font-size:26px; line-height:1; color:color-mix(in srgb, var(--ink) 55%, transparent); cursor:pointer; }
.np-x:hover { color:var(--ink); }
.np-h { font-family:var(--font-display); font-weight:600; font-size:24px; letter-spacing:-.02em; }
.np-sub { color:var(--ink-soft); font-size:13.5px; margin:5px 0 18px; }
.np-drop { margin-bottom:14px; }
.np-uploads { margin-bottom:8px; }
.np-uploads:empty { display:none; margin:0; }
.np-actions { margin-top:18px; }

/* ---- Project page: generate panel + slate ---------------------------------- */
.proj { max-width:var(--maxw); margin:0 auto; }
.proj-head { margin-bottom:22px; }
.proj-back { display:inline-block; font-family:var(--font-data); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
.proj-back:hover { color:var(--accent-ink); }
.proj-head h1 { font-family:var(--font-display); font-weight:600; font-size:28px; letter-spacing:-.02em; }
.proj-head h1 .em { font-size:31px; }
.proj-head p { color:var(--ink-soft); font-size:14px; margin-top:3px; }
.proj-gen { display:grid; grid-template-columns:1fr 300px; gap:26px; align-items:start; margin-bottom:30px; }
.proj-gen-main { display:flex; flex-direction:column; }
.proj-drop { margin-bottom:12px; }
.proj-field { margin:8px 0; }
.proj-field > label { display:block; margin-bottom:7px; }
.proj-dir, .proj-ref { width:100%; border:1px solid var(--line-2); border-radius:var(--radius-sm); background:var(--surface); padding:11px 13px; font:inherit; font-size:14px; color:var(--ink); }
.proj-dir::placeholder, .proj-ref::placeholder { color:color-mix(in srgb, var(--ink) 38%, transparent); }
.proj-chips { margin-top:10px; }
.proj-note { font-size:12.5px; color:var(--ink-soft); background:var(--surface); border:1px solid var(--hair); border-left:3px solid var(--accent); border-radius:var(--radius-sm); padding:11px 13px; margin:10px 0 16px; line-height:1.5; }
.proj-note b { color:var(--ink); }
.proj-cta { display:flex; align-items:center; gap:14px; margin-top:6px; }
.proj-cta .gen-start { margin:0; }
.proj-eta { font-size:12px; color:var(--ink-soft); }
.proj-side { display:flex; flex-direction:column; gap:14px; position:sticky; top:90px; }
.proj-prod, .proj-kit { background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-md); padding:15px 16px; box-shadow:var(--shadow); }
.proj-prod h5 { font-family:var(--font-display); font-weight:600; font-size:15px; }
.proj-prod-sub { font-size:12.5px; color:var(--ink-soft); margin-top:3px; }
.proj-prod-edit { display:inline-block; margin-top:10px; font-size:12.5px; color:var(--accent-ink); font-weight:600; }
.proj-kit-h { font-family:var(--font-data); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:9px; }
.proj-kit-row { display:flex; flex-wrap:wrap; gap:7px; }
.proj-kit-row .chip { font-size:12px; }
.proj-kit #b-brand { margin-top:10px; width:100%; }
.proj-kit-empty { font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
.proj-kit-empty a { color:var(--accent-ink); font-weight:600; }

/* ---- The slate (the product's concepts) ------------------------------------ */
.proj-slate { border-top:1px solid var(--hair); padding-top:24px; }
.proj-slate-head { margin-bottom:16px; }
.proj-slate-head h2 { font-family:var(--font-display); font-weight:600; font-size:21px; letter-spacing:-.01em; }
.proj-slate-head h2 .em { font-size:23px; }
.proj-slate-head p { color:var(--ink-soft); font-size:13.5px; margin-top:3px; }
.slate-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:16px; }

/* slate card hover overlay (per-card "make more, but…") */
.slate-card .gen-frame { position:relative; aspect-ratio:4/5; cursor:pointer; overflow:hidden; }
.slate-card .gen-img { width:100%; height:100%; object-fit:cover; display:block; }
.slate-hov { position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:12px; opacity:0; transition:opacity .16s ease; background:linear-gradient(to top, rgba(15,12,10,.9), rgba(15,12,10,0) 62%); }
.slate-card:hover .slate-hov, .slate-hov:focus-within { opacity:1; }
.slate-more { display:flex; gap:6px; }
.slate-more-in { flex:1; min-width:0; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.14); border-radius:999px; padding:7px 12px; color:#fff; font:inherit; font-size:11.5px; }
.slate-more-in::placeholder { color:rgba(255,255,255,.72); }
.slate-more-go { flex:0 0 auto; border:none; background:#fff; color:#1a1a1a; border-radius:999px; width:32px; font-size:14px; cursor:pointer; }
.slate-row { display:flex; gap:7px; }
.slate-mini { flex:1; text-align:center; font-size:11px; font-weight:600; border-radius:999px; padding:6px 8px; border:1px solid rgba(255,255,255,.45); color:#fff; background:rgba(255,255,255,.1); cursor:pointer; text-decoration:none; }
.slate-mini:hover { background:rgba(255,255,255,.22); }
.slate-win.is-on { background:var(--ok); border-color:var(--ok); color:#fff; }

@media (max-width: 900px) {
  .proj-gen { grid-template-columns:1fr; }
  .proj-side { position:static; flex-direction:row; flex-wrap:wrap; }
  .proj-prod, .proj-kit { flex:1 1 220px; }
}
@media (max-width: 560px) {
  .ph-head { flex-direction:column; align-items:flex-start; }
  .ph-head-cta { display:none; }
  .proj-side { flex-direction:column; }
}