/* Tone Works Release Kit Generator — on-brand UI.
   Brand: near-black canvas, warm off-white type, neutral WHITE accent
   (was burnt orange — now neutral so it never fights the user's chosen
   sales-page colour), analog/studio-gear character. Understated, premium. */

:root {
  --bg: #121212;
  --panel: #191917;
  --panel-2: #1f1f1d;
  --line: #2b2a27;
  --text: #f5f3ee;
  --muted: #98928a;
  --accent: #ffffff;
  --accent-dim: #8f8f8f;
  /* selected/active-state treatment for chips + toggles (seg.on, tone-chip.on,
     pv-dev.on, pm-btn.on, fp-opt.sel). White to match the rest of the controls. */
  --accent-sel: #ffffff;
  --mono: "SF Mono", ui-monospace, "Menlo", monospace;
  --display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --input: "Montserrat", "Avenir Next", "Avenir", "Segoe UI", sans-serif;
  /* motion tokens — the app's shared easing language. NOTE: --ease was referenced
     throughout the drop-box CSS but never defined, which silently disabled every
     transition using it (invalid at computed-value time). Keep these defined. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);        /* standard settle (ease-out) */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* travel — accel then settle */
  --ease-in: cubic-bezier(0.5, 0, 0.85, 0.3);    /* leaving / falling — accelerates */
}

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

html { color-scheme: dark; }

body {
  /* dark canvas + a subtle white grid (blueprint/graph-paper undertone); the film
     grain lives on body::before, the vignette on body::after fades the grid at edges */
  background-color: #0f0f11;
  background-image:
    /* dark pool in the centre — the grid dissolves under it and emerges toward the
       edges. Pure long-falloff gradient: no visible edge anywhere. Fixed so it acts
       like stage lighting, not wallpaper. */
    radial-gradient(ellipse 62% 52% at 50% 44%, #0f0f11 0%, #0f0f11 22%, rgba(15, 15, 17, 0) 74%),
    linear-gradient(rgba(255, 255, 255, 0.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.042) 1px, transparent 1px);
  background-size: 100% 100%, 64px 64px, 64px 64px;
  background-attachment: fixed, fixed, fixed;
  color: var(--text);
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* film grain over everything (vignette on ::after) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse 120% 90% at 50% 0%, transparent 62%, rgba(0, 0, 0, 0.28) 100%);
}

main { position: relative; z-index: 2; }

/* Sound Shipper brand — fixed top-left on EVERY step. Pure branding: pointer-events
   none so it can never block a click. Cube mark matches the marketing page. */
#app-brand {
  position: fixed; top: 16px; left: 20px; z-index: 60;
  display: flex; align-items: center; gap: 0.6rem;
  pointer-events: none; user-select: none; opacity: 0.92;
}
#app-brand .ab-mark { width: 24px; height: 27px; display: block; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)); }
#app-brand .ab-name {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* Small-screen gate — under 768px the app is REPLACED by a branded "desktop studio"
   panel (folder drop / canvas editing / client-side zip are impossible on mobile;
   a clean gate beats a mangled layout). */
#mobile-gate { display: none; }
@media (max-width: 767px) {
  main, #wizard-bar, #page-drawer, #drawer-tab, #app-brand { display: none !important; }
  #mobile-gate {
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.9rem; padding: 2rem 1.6rem; text-align: center;
  }
  #mobile-gate .mg-mark { width: 58px; height: 65px; margin-bottom: 0.4rem; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55)); }
  #mobile-gate .mg-name {
    font-family: var(--mono); font-size: 0.9rem; font-weight: 700;
    letter-spacing: 0.3em; text-transform: uppercase; color: #fff;
  }
  #mobile-gate .mg-chip {
    font-family: var(--mono); font-size: 0.58rem; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px;
    padding: 0.32rem 0.85rem;
  }
  #mobile-gate .mg-note {
    max-width: 34ch; margin: 0; font-size: 0.88rem; line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
  }
  #mobile-gate .mg-note.mg-strong { color: rgba(255, 255, 255, 0.92); font-weight: 600; }
}

/* ------------------------------------------------------------ step rail */
main {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 6rem;
}

.step {
  position: relative;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem 1.75rem 1.6rem;
  margin: 1.25rem 0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.step::before {
  /* channel-strip index */
  content: attr(data-step);
  position: absolute;
  top: 1.4rem;
  right: 1.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  opacity: 0.7;
}
.step h2 {
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  padding-right: 4rem;
}
.step h2::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.7em;
  background: var(--accent);
  transform: rotate(45deg) translateY(-0.05em);
}
.note {
  color: var(--muted);
  font-size: 0.83rem;
}
.step > .note { margin-bottom: 1.1rem; }

/* ------------------------------------------------------------- controls */
button {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #121212;
  background: var(--accent);
  border: none;
  border-radius: 5px;
  padding: 0.7rem 1.6rem;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.1s ease;
}
button:hover:not(:disabled) { filter: brightness(1.12); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.4; cursor: default; }

input[type="text"], textarea {
  font-family: var(--input);
  font-size: 0.85rem;
  color: var(--text);
  background: #141412;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.6rem 0.8rem;
  outline: none;
  transition: border-color 0.2s ease;
}
input[type="text"]:focus, textarea:focus { border-color: var(--accent); }
textarea { width: 100%; resize: vertical; line-height: 1.55; }
label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 1rem 0.9rem 0;
}

.field-row { margin-bottom: 0.4rem; }

/* ------------------------------------------------------- step specifics */
input[type="file"] { color: var(--muted); font-family: var(--mono); font-size: 0.75rem; }

/* ============================================================
   CH01 INTERACTIVE 3D DROP BOX — an open box (dark faces, glowing white edges,
   matching the box-loader language) that reacts to drag, seals on drop, and hands
   off to the kit summary. Pure CSS 3D (no runtimes). States are driven by classes
   on #drop-box: is-idle · is-dragging · is-dropping · is-sealed · is-invalid · is-handoff.
   ============================================================ */
/* CH01 phases (folder-input.js toggles .landed on the section):
   DROP phase = bare (box floats on the page bg). LANDED phase = the ENTIRE section
   becomes the manifest document / terminal readout (#mf-sheet) — no card-in-card. */
.step.mf-c::before { content: none; }  /* the CH marker lives in the letterhead */
#step-kit:not(.landed) { background: none; border: none; box-shadow: none; padding: 1rem 0 0; }
#step-kit:not(.landed) > h2 { display: block; text-align: center; padding-right: 0; font-size: 1.05rem; letter-spacing: 0.26em; margin-bottom: 1.4rem; }
#step-kit:not(.landed) .mf-sheet { display: none; }
#step-kit.landed { background: none; border: none; box-shadow: none; padding: 0; }
#step-kit.landed > h2 { display: none; }  /* the letterhead IS the heading */
#drop-zone { text-align: center; padding: 0.5rem 0 0.5rem; }
/* registered so the interior glow interpolates smoothly (unregistered custom props jump) */
@property --lit { syntax: "<number>"; inherits: true; initial-value: 0.5; }
.drop-box {
  --bw: 272px; --bd: 212px; --bh: 140px;   /* box width · depth · wall height */
  --lid: 167deg;                            /* flap angle: 167 idle (95% closed, a crack of light) · 30 wide open (drag) · 176 sealed · 0 flat-outward */
  --lit: 0.5;                               /* interior glow strength */
  --edge: rgba(255, 255, 255, 0.5);
  --face: #1c1d23;
  width: 100%; margin: 0.4rem auto 0; cursor: pointer;
  outline: none; -webkit-tap-highlight-color: transparent;
  transition: --lit 0.35s var(--ease);
}
.drop-box:focus-visible .db-box { filter: drop-shadow(0 0 0 2px var(--accent)); }
.db-scene {
  /* wider than the box: the spin sweep needs sqrt(bw²+bd²) ≈ 345px of room */
  width: 380px; height: 430px; margin: 0 auto;
  perspective: 1050px; perspective-origin: 50% 28%;
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
}
.db-box {
  position: relative; width: var(--bw); height: var(--bh); margin: 196px auto 0;
  transform-style: preserve-3d;
  /* elevated three-quarter camera: rotateX(-32deg) looks DOWN into the top opening;
     rotateY = turntable spin about the box's own vertical axis (opening stays UP) */
  transform: rotateX(-32deg) rotateY(0deg);
  animation: db-turntable 36s linear infinite;  /* slow full-circle rotation, all states */
}
@keyframes db-turntable {
  from { transform: rotateX(-32deg) rotateY(0deg); }
  to   { transform: rotateX(-32deg) rotateY(360deg); }
}
.db-face, .db-lid {
  position: absolute; inset: 0; margin: auto; box-sizing: border-box;
  background: var(--face);
  box-shadow: inset 0 0 0 1.4px var(--edge);
  transition: filter 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
/* light catching the walls — brightest low (near the source), fading up */
.db-wall { background-image: linear-gradient(to top,
  rgba(255, 255, 255, calc(0.05 + var(--lit) * 0.14)) 0%, rgba(255, 255, 255, 0) 62%); }
/* flap undersides catch the light near the hinge (the opening edge) */
.db-lid { background-image: linear-gradient(to bottom,
  rgba(255, 255, 255, calc(0.06 + var(--lit) * 0.16)) 0%, rgba(255, 255, 255, 0) 58%); }

/* the 5 static faces of an open box (floor + 4 walls), centred on the box origin */
.db-floor {
  width: var(--bw); height: var(--bd);
  transform: translateY(calc(var(--bh) / 2)) rotateX(90deg);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, calc(0.12 + var(--lit) * 0.36)) 0%,
      rgba(255, 255, 255, calc(0.03 + var(--lit) * 0.10)) 36%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #212228, #15161b);
}
.db-wall-back  { width: var(--bw); height: var(--bh); transform: translateZ(calc(var(--bd) / -2)); filter: brightness(1.18); }
.db-wall-front { width: var(--bw); height: var(--bh); transform: translateZ(calc(var(--bd) / 2)) rotateY(180deg); filter: brightness(0.82); }
.db-wall-left  { width: var(--bd); height: var(--bh); transform: translateX(calc(var(--bw) / -2)) rotateY(-90deg); filter: brightness(1.05); }
.db-wall-right { width: var(--bd); height: var(--bh); transform: translateX(calc(var(--bw) / 2)) rotateY(90deg); filter: brightness(0.92); }
/* interior luminance — a soft white pool on the floor that brightens on drag */
.db-glow {
  position: absolute; inset: 0; margin: auto; width: calc(var(--bw) - 24px); height: calc(var(--bd) - 24px);
  transform: translateY(calc(var(--bh) / 2 - 1px)) rotateX(90deg);
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, calc(0.20 + var(--lit) * 0.42)) 0%, rgba(255, 255, 255, 0) 66%);
  box-shadow: none; border-radius: 40%; pointer-events: none;
  transition: background 0.35s var(--ease); z-index: 1;
}
/* bloom above the opening — light spilling up and out of the box. Layered radial
   gradients (no shapes, no hard cutoffs), screen-blended; a 2D overlay in the scene
   so it rises straight up whatever angle the box has spun to. */
.db-beam {
  position: absolute; left: 50%; bottom: 44%; transform: translateX(-50%);
  width: 320px; height: 250px; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.db-beam::before, .db-beam::after { content: ""; position: absolute; inset: 0; mix-blend-mode: screen; }
.db-beam::before { /* wide, faint halo drifting upward */
  background: radial-gradient(ellipse 52% 58% at 50% 96%, rgba(255, 255, 255, 0.34) 0%,
    rgba(255, 255, 255, 0.10) 42%, rgba(255, 255, 255, 0) 74%);
  filter: blur(14px);
}
.db-beam::after { /* tighter, brighter core hugging the mouth of the box */
  background: radial-gradient(ellipse 30% 34% at 50% 100%, rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.14) 48%, rgba(255, 255, 255, 0) 78%);
  filter: blur(8px);
}
/* two lid flaps, hinged on the back-top and front-top edges. Explicit positioning
   (not inset:0/margin:auto) so the pivot sits exactly on the hinge edge:
   --lid = 0 → flap lies flat closed; larger --lid rotates it up/out open. */
.db-lid {
  inset: auto; margin: 0; left: 50%; top: 50%; margin-left: calc(var(--bw) / -2);
  transform-origin: 50% 0%;   /* pivot = the flap's top edge (the hinge) */
  width: var(--bw); height: calc(var(--bd) / 2 + 2px);
  background: linear-gradient(180deg, #26272e, #191a1f);
  transition: transform 0.45s var(--ease), box-shadow 0.35s var(--ease), filter 0.35s var(--ease);
}
.db-lid-back  { transform: translateY(calc(var(--bh) / -2)) translateZ(calc(var(--bd) / -2)) rotateX(calc(-90deg - var(--lid))); }
.db-lid-front { transform: translateY(calc(var(--bh) / -2)) translateZ(calc(var(--bd) / 2)) rotateX(calc(90deg + var(--lid))); }
/* seal flash — a bright pulse across the closed lid on drop */
.db-seal {
  position: absolute; inset: 0; margin: auto; width: var(--bw); height: var(--bd);
  transform: translateY(calc(var(--bh) / -2 - 1px)) rotateX(90deg);
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%);
  opacity: 0; pointer-events: none; z-index: 3;
}

/* ---- state: IDLE — glow pulse + a faint leak of the beam; the turntable spin
   (on .db-box, all states) is the idle life ---- */
.drop-box.is-idle { animation: db-breathe 3.6s ease-in-out infinite; }  /* --lit inherits to floor + glow */
.drop-box.is-idle .db-beam { opacity: 0.14; }
@keyframes db-breathe {
  0%, 100% { --lit: 0.44; }
  50% { --lit: 0.74; }
}

/* ---- state: DRAGGING — flaps swing open + a white beam shines up from inside.
   The box KEEPS its idle shape/orientation (no tilt/scale shift — that read as awkward);
   only the lids open, the interior brightens, and the beam appears. ---- */
.drop-box.is-dragging { --lid: 30deg; --lit: 1; }
.drop-box.is-dragging .db-beam { opacity: 1; animation: db-beam-breathe 2.4s ease-in-out infinite; }
@keyframes db-beam-breathe {
  0%, 100% { transform: translateX(-50%) scale(1, 1); }
  50% { transform: translateX(-50%) scale(1.07, 1.03); }
}
.drop-box.is-dragging .db-face, .drop-box.is-dragging .db-lid {
  box-shadow: inset 0 0 0 1.6px rgba(255, 255, 255, 0.85), 0 0 26px rgba(255, 255, 255, 0.12);
}

/* ---- state: DROPPING / SEALED — lids close and seal shut ---- */
.drop-box.is-dropping, .drop-box.is-sealed { --lid: 176deg; --lit: 0.16; }
/* the catch — a tiny dip-and-settle (on the SCENE, so it never fights the spin).
   NO fill mode: the keyframes start/end at identity so fill adds nothing visually,
   and a fill-holding animation on `transform` BLOCKS the is-handoff transition from
   starting (the box would teleport off-screen instead of sliding — real bug). */
.drop-box.is-sealed .db-scene { animation: db-catch 0.26s var(--ease); }
.drop-box.is-sealed .db-seal { animation: db-seal-flash 0.5s ease-out; }
@keyframes db-catch {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(5px) scale(0.985); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes db-seal-flash { 0% { opacity: 0; } 30% { opacity: 0.85; } 100% { opacity: 0; } }

/* ---- state: INVALID — a gentle shake, box stays open ---- */
.drop-box.is-invalid .db-scene { animation: db-shake 0.5s ease-in-out; }
@keyframes db-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}

/* ---- state: HANDOFF — the sealed box SHIPS OFF to the left of the screen;
   the kit summary then slides in from the right (see kit-card-in). Exit only —
   every other box state/animation is untouched. ---- */
.drop-box.is-handoff .db-scene {
  transition: transform 0.55s var(--ease-in), opacity 0.55s var(--ease-in);
  transform: translateX(calc(-50vw - 280px)) rotate(-2deg);
  opacity: 0.95;
}

/* sealed box doubles as the loading state: status text under it while scanning */
.db-status {
  min-height: 1.2em; margin-top: 0.4rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); text-shadow: 0 0 18px rgba(255, 255, 255, 0.14);
}

.db-hint {
  margin-top: 0.2rem; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.08em;
  color: var(--muted); text-transform: uppercase;
}
.db-or { opacity: 0.85; }
.db-browse-link {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: var(--text);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.4);
}
.db-browse-link:hover { text-decoration-color: var(--text); }
.db-error { margin-top: 0.5rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: #e06a5e; }

/* the in-page folder ghost that tracks the cursor during a drag (the OS drag ghost
   can't be styled). Lives on <body> so position:fixed maps to the viewport. */
.db-folder-ghost {
  position: fixed; left: 0; top: 0; z-index: 9999; width: 56px; height: 56px;
  margin: -28px 0 0 -28px; pointer-events: none; opacity: 0;
  transition: opacity 0.18s ease;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.25));
}
.db-folder-ghost.show { opacity: 1; }
/* the fall accelerates (gravity) and is quick — the box catches it right after */
.db-folder-ghost.drop-in { transition: transform 0.3s var(--ease-in), opacity 0.3s ease-in; }

@media (prefers-reduced-motion: reduce) {
  .db-box { animation: none; transform: rotateX(-32deg) rotateY(35deg); }
  .drop-box.is-idle { animation: none; }
  .db-scene, .db-lid, .db-folder-ghost { transition: none; }
  .drop-box.is-dragging .db-beam { animation: none; }
  .drop-box.is-invalid .db-scene, .drop-box.is-sealed .db-seal,
  .drop-box.is-sealed .db-scene { animation: none; }
}

#kit-files {
  list-style: none;
  max-height: 230px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.7rem 1rem;
  background: #141412;
}
#kit-files li { padding: 0.12rem 0; border-bottom: 1px solid #1d1c1a; }
#kit-files li:last-child { border-bottom: none; }

#art-image {
  max-width: 100%;
  border-radius: 8px;
  margin-top: 1.1rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}
#art-prompt-used {
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 0.72rem;
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  background: #141412;
  border: 1px solid var(--line);
  border-radius: 6px;
  max-height: 180px;
  overflow-y: auto;
}
.prompt-freshness {
  margin-top: 0.9rem; padding: 0.5rem 0.7rem; border-radius: 6px;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.02em;
  border: 1px solid var(--line); color: var(--muted);
}
.prompt-freshness.stale {
  color: var(--accent); border-color: var(--accent-dim);
  background: rgba(255, 255, 255, 0.05);
}

.out-block { margin-bottom: 1rem; }
.out-actions { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.out-actions button { padding: 0.45rem 0.9rem; font-size: 0.68rem; }

/* ---- CH04 Store Copy: three output cards (description / email / captions) ---- */
.copy-empty {
  max-width: 780px; margin: 1rem 0 0; padding: 1.1rem 1.2rem;
  border: 1px dashed var(--line); border-radius: 10px; color: var(--muted);
}
/* while the box loader occupies it: a solid dark bay (mask colour must match) */
.copy-empty.loading {
  max-width: none; display: flex; align-items: center; justify-content: center;
  min-height: 420px; padding: 2.5rem 1rem;
  background: #0b0b0d; border-style: solid;
}
/* CH04 breaks out of the 760px column so the wider cards wrap in fewer lines
   (less scroll). Product Description and Launch Email stack full width. */
#step-copy {
  width: min(1120px, calc(100vw - 3rem));
  margin-left: calc((100% - min(1120px, 100vw - 3rem)) / 2);
}
.copy-cards { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.1rem; }
.copy-card .card-head { align-items: center; }
.copy-card .card-head .card-hint { margin-right: 0.2rem; }
.cc-actions { display: inline-flex; gap: 0.45rem; margin-left: auto; }

/* buttons: labelled + icon-only, consistent with the app's ghost controls */
.cc-btn, .cc-btn-sm {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); color: var(--muted);
  background: #1a1a18; border: 1px solid var(--line); border-radius: 6px;
  cursor: pointer; transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.cc-btn { gap: 0.4rem; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.42rem 0.7rem; }
.cc-btn-sm { width: 30px; height: 28px; padding: 0; }
.cc-btn:hover, .cc-btn-sm:hover { color: var(--text); border-color: var(--muted); }
.cc-btn:disabled { opacity: 0.5; cursor: default; }
.cc-btn.ok, .cc-btn-sm.ok { color: var(--accent); border-color: var(--accent); }
.cc-ico { width: 13px; height: 13px; flex: none; }
.cc-btn-sm .cc-ico { width: 14px; height: 14px; }

/* editable text surfaces (auto-grown by JS) */
.copy-edit {
  width: 100%; font-family: var(--input); font-size: 0.9rem; line-height: 1.65;
  color: var(--text); background: #141412; border: 1px solid var(--line);
  border-radius: 7px; padding: 0.75rem 0.9rem; resize: none; overflow: hidden;
  transition: border-color 0.18s ease;
}
.copy-edit:focus { border-color: var(--accent); outline: none; }
.copy-desc-edit { min-height: 120px; }
.cc-foot { margin-top: 0.5rem; text-align: right; }
.cc-meta { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.06em; color: var(--muted); }

/* email — distinct subject line above a longer body */
.email-subject-row { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.85rem; }
.email-subject { font-weight: 600; letter-spacing: 0.01em; }
.email-body-lbl { display: block; margin-bottom: 0.35rem; }

/* email tone presets (register) */
.email-tone { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.tone-chips { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }
.tone-chip {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); background: #1a1a18; border: 1px solid var(--line); border-radius: 5px;
  padding: 0.4rem 0.7rem; cursor: pointer; transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.tone-chip:hover:not(.on) { color: var(--text); border-color: var(--muted); }
.tone-chip.on { background: var(--accent-sel); color: #121212; border-color: var(--accent-sel); font-weight: 700; }
.tone-followup {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; cursor: pointer;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.tone-followup input { accent-color: var(--accent); }
.email-tone.busy { opacity: 0.55; pointer-events: none; }

/* captions — several short items, each clearly separated */
.captions-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
@media (max-width: 860px) { .captions-list { grid-template-columns: 1fr; } }
.caption-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem; align-items: start;
  background: #141412; border: 1px solid var(--line); border-radius: 8px; padding: 0.55rem 0.65rem;
}
.caption-num {
  font-family: var(--mono); font-size: 0.62rem; color: var(--accent);
  padding-top: 0.6rem; letter-spacing: 0.04em;
}
.caption-text { border: 0; background: transparent; padding: 0.5rem 0.2rem; border-radius: 0; }
.caption-text:focus { border: 0; }
.caption-actions { display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.15rem; }

/* CH06 launch recap — read-only view of the same copy */
.recap-subject {
  font-family: var(--input); font-weight: 600; font-size: 0.95rem; color: var(--text);
  padding: 0.5rem 0.7rem; background: #141412; border: 1px solid var(--line);
  border-radius: 7px; margin-bottom: 0.7rem;
}
.recap-body { white-space: pre-wrap; color: var(--text); font-size: 0.88rem; line-height: 1.7; }
.recap-captions { display: flex; flex-direction: column; gap: 0.6rem; }
.recap-caption {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.7rem; align-items: start;
  background: #141412; border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem 0.7rem;
}
.recap-caption-text { margin: 0; white-space: pre-wrap; line-height: 1.6; font-size: 0.86rem; color: var(--text); }

#page-result { margin-top: 1.1rem; }
#page-url { color: var(--accent); font-family: var(--mono); font-size: 0.85rem; }

.testimonial-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.testimonial-row .t-quote { flex: 3; }
.testimonial-row .t-name { flex: 1; }

/* collapsible info + advanced panels */
details.info, details.advanced {
  margin: 0.9rem 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #141412;
}
details.info summary, details.advanced summary {
  cursor: pointer;
  list-style: none;
  padding: 0.5rem 0.9rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  user-select: none;
}
details.info summary::before { content: "ⓘ "; }
details.advanced summary::before { content: "⌥ "; }
details.info summary::-webkit-details-marker,
details.advanced summary::-webkit-details-marker { display: none; }
details[open].info summary, details[open].advanced summary {
  color: var(--accent);
  border-bottom: 1px solid var(--line);
}
.details-body { padding: 0.9rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   CH05 SALES-PAGE LAYOUT FRAME — LOCKED INFRASTRUCTURE · DO NOT REGENERATE
   ─────────────────────────────────────────────────────────────────────────────
   The Step-5 FRAME = { preview container width, the pull-out editor drawer, the
   preview area }. It is FIXED layout and is intentionally SEPARATE from the page
   CONTENT. The content (section variants, motion, per-section theming, etc.) lives
   in templates/sales-page.html + backend/salespage.py and is rendered INSIDE the
   #page-frame iframe. Editing content must NEVER touch the rules below.
   These two things keep regressing across edits — they are permanent BY DESIGN:
     • container width = 1300px max  (do NOT reset to 1500px / full-screen)
     • the pull-out drawer           (do NOT remove / detach from the layout)
   ═══════════════════════════════════════════════════════════════════════════ */

/* LOCKED — preview container max-width. Named token so it's defined once and stable.
   1300px cap; only shrinks on narrow screens so the drawer tab keeps its side gap.
   ⚠ Never change this to 1500px or full-width when editing section content. */
:root { --pv-w: min(1300px, calc(100vw - 8rem)); }
#step-page {
  width: var(--pv-w);
  margin-left: calc((100% - var(--pv-w)) / 2);
}
.page-stagewrap { margin-top: 1.2rem; }
.page-preview-col { width: 100%; }

/* LOCKED — pull-out editor drawer (right edge). Permanent structural part of CH05:
   the collapsible controls panel + its pull-tab must ALWAYS be present, independent
   of whatever section content is rendered in the preview iframe. */
.page-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(400px, 94vw);
  display: flex; flex-direction: column; z-index: 60;
  background: #161615; border-left: 1px solid var(--line);
  box-shadow: -34px 0 90px rgba(0, 0, 0, 0.55);
  transform: translateX(100%); transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.05rem; border-bottom: 1px solid var(--line); flex: none;
}
.drawer-title { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.drawer-close {
  background: none; border: 1px solid var(--line); color: var(--muted);
  width: 30px; height: 30px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; line-height: 1;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.drawer-close:hover { color: var(--text); border-color: var(--accent); }
.drawer-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.9rem; }

/* right-edge pull tab — sits in the gap beside the preview, flush to the
   container's right edge, so it's an obvious handle to pull the editor out */
/* the drawer + tab are viewport-fixed and only shown on CH05 */
body:not(.on-page-step) .page-drawer,
body:not(.on-page-step) .drawer-tab { display: none; }
.drawer-tab {
  position: fixed; top: 50%; left: auto;
  right: max(8px, calc((100vw - var(--pv-w)) / 2 - 42px)); /* sits in the gap beside the preview */
  transform: translateY(-50%);
  z-index: 55; display: inline-flex; flex-direction: column; align-items: center; gap: 0.55rem;
  background: var(--accent); color: #121212; border: 0; border-radius: 10px 0 0 10px;
  padding: 1.1rem 0.6rem; cursor: pointer; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.4);
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700;
  transition: filter 0.15s ease, opacity 0.25s ease, transform 0.25s ease, box-shadow 0.15s ease;
}
.drawer-tab span { writing-mode: vertical-rl; }
.drawer-tab .tab-chev { width: 16px; height: 16px; }
.drawer-tab .tab-ico { width: 15px; height: 15px; }
.drawer-tab:hover { filter: brightness(1.08); transform: translate(-3px, -50%); box-shadow: -12px 0 30px rgba(0, 0, 0, 0.45); }
.page-drawer.open ~ .drawer-tab { opacity: 0; pointer-events: none; transform: translate(24px, -50%); }

/* toolbar Edit button */
.pv-edit {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  color: #121212; background: var(--accent); border: 1px solid var(--accent); border-radius: 5px;
  padding: 0.35rem 0.7rem; cursor: pointer; transition: filter 0.14s ease;
}
.pv-edit:hover { filter: brightness(1.08); }
.pv-edit svg { width: 13px; height: 13px; }

/* preview toolbar + stage */
.pv-toolbar { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.7rem; }
.pv-label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.pv-devices { display: inline-flex; gap: 0.3rem; margin-left: auto; }
#pv-devices { margin-left: 0.4rem; }
.pv-dev {
  font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); background: #1a1a18; border: 1px solid var(--line); border-radius: 5px;
  padding: 0.35rem 0.6rem; cursor: pointer; transition: color 0.14s ease, background 0.14s ease;
}
.pv-dev:hover:not(.on) { color: var(--text); }
.pv-dev.on { background: var(--accent-sel); color: #121212; border-color: var(--accent-sel); font-weight: 700; }
.pv-open { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.06em; color: var(--muted); text-decoration: none; }
.pv-open:hover { color: var(--accent); }
.pv-stage {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #0c0c0b; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); transition: max-width 0.2s ease;
  /* the rebuilt preview loads in a buffer iframe stacked here (see sales-page.js build) */
  position: relative;
}
/* The incoming preview while it loads + scrolls itself into position. It must be LAID OUT
   (an iframe with display:none has no viewport and cannot be scrolled), so it's stacked
   under the live one and made invisible rather than hidden. */
.pv-stage iframe.pv-buffer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; z-index: 0;
}
.pv-stage.mobile { max-width: 412px; margin: 0 auto; }
/* editing MOBILE — a clear accent ring + corner tag so changes aren't mis-applied */
.pv-stage.editing-mobile { box-shadow: 0 0 0 2px var(--accent), 0 30px 70px rgba(0, 0, 0, 0.5); position: relative; }

/* "Editing Desktop / Mobile" indicator — which view your variant + theme edits hit */
.pv-editing {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); background: #1a1a18; border: 1px solid var(--line);
  border-radius: 5px; padding: 0.32rem 0.6rem; white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.pv-editing b { color: var(--text); font-weight: 700; letter-spacing: 0.1em; }
.pv-editing svg { width: 13px; height: 13px; }
.pv-editing .pe-mb { display: none; }
.pv-editing[data-view="mobile"] {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, #1a1a18);
}
.pv-editing[data-view="mobile"] b { color: var(--accent); }
.pv-editing[data-view="mobile"] .pe-dt { display: none; }
.pv-editing[data-view="mobile"] .pe-mb { display: inline; }

/* mobile-override marker in the section manager rows */
.smr-ovr {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 3px;
  font-family: var(--mono); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.02em;
  color: #121212; background: var(--accent);
}

/* editor cards (now inside the pull-out drawer) */
.pe-card { padding: 0.9rem 1rem 1rem; }
.pe-note { margin: 0 0 0.7rem; }
.pe-status { display: block; margin-top: 0.6rem; color: var(--accent); }
.drawer-body .copy-edit { width: 100%; }
.pe-restyle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  color: #121212; background: var(--accent); border: 1px solid var(--accent); border-radius: 7px;
  padding: 0.6rem 1rem; cursor: pointer; transition: filter 0.15s ease;
}
.pe-restyle:hover { filter: brightness(1.08); }
.pe-restyle:disabled { opacity: 0.55; cursor: default; }
.pe-restyle svg { width: 15px; height: 15px; }
.pe-arrow { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border: 1px solid var(--accent); border-radius: 4px; color: var(--accent); font-weight: 700; line-height: 1; vertical-align: middle; }
.pe-toggles { display: flex; flex-direction: column; gap: 0.55rem; }
.pe-toggle { display: flex; align-items: center; gap: 0.55rem; font-family: var(--input); font-size: 0.85rem; color: var(--text); cursor: pointer; }
.pe-toggle input { accent-color: var(--accent); width: 16px; height: 16px; }
.pe-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.pe-two .fld-lbl { display: flex; flex-direction: column; gap: 0.3rem; }
@media (max-width: 520px) { .pe-two { grid-template-columns: 1fr; } }

/* ============================================================
   SECTION MANAGER — the CH05 page composer (drawer). Drag to reorder,
   hide/show, delete; "+ Add section" opens a library of section types.
   ============================================================ */
.sec-mgr { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; }
.smr {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.55rem; border: 1px solid var(--line); border-radius: 8px;
  background: #1a1a18; cursor: grab; user-select: none;
  transition: border-color 0.14s ease, background 0.14s ease, opacity 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
.smr:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: #1e1e1b; cursor: pointer; }
/* the row whose section the preview was just scrolled to */
.smr.is-active { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: #211f1a; }
.smr:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.smr.dragging { opacity: 0.5; cursor: grabbing; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); border-color: var(--accent); }
.smr.is-hidden { opacity: 0.5; }
.smr.is-hidden .smr-name { text-decoration: line-through; text-decoration-color: var(--muted); }
@keyframes smr-flash { 0% { background: color-mix(in srgb, var(--accent) 40%, #1a1a18); } 100% { background: #1a1a18; } }
.smr.just-added { animation: smr-flash 0.9s ease; border-color: var(--accent); }
.smr-grip { display: inline-flex; flex: none; color: var(--muted); width: 16px; height: 16px; cursor: grab; }
.smr-grip svg { width: 16px; height: 16px; }
.smr-ico { display: inline-flex; flex: none; width: 18px; height: 18px; color: var(--accent); }
.smr-ico svg { width: 18px; height: 18px; }
.smr-name { flex: 1 1 auto; min-width: 0; font-family: var(--input); font-size: 0.82rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 0.4rem; }
.smr-empty { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 1px 4px; flex: none; }
.smr-meta { flex: none; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.smr-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border-radius: 6px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--muted);
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.smr-btn svg { width: 15px; height: 15px; }
.smr-eye:hover { color: var(--text); border-color: var(--line); }
.smr-del:hover { color: #ff5a4d; border-color: color-mix(in srgb, #ff5a4d 45%, transparent); background: color-mix(in srgb, #ff5a4d 12%, transparent); }

/* "+ Add section" button */
.sec-add-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.7rem;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  color: var(--accent); background: none; border: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--line));
  border-radius: 7px; padding: 0.55rem 0.9rem; cursor: pointer; width: 100%; justify-content: center;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.sec-add-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); }
.sec-add-btn.is-open { color: var(--text); border-style: solid; }
.sec-add-btn .sa-plus { font-size: 0.9rem; line-height: 0; }

/* section library — a list of addable section types */
.sec-lib { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
.sec-tile {
  display: flex; align-items: center; gap: 0.65rem; text-align: left;
  padding: 0.55rem 0.6rem; border: 1px solid var(--line); border-radius: 8px;
  background: #191917; cursor: pointer; width: 100%;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.1s ease;
}
.sec-tile:hover { border-color: var(--accent); background: #1e1e1b; }
.sec-tile:active { transform: scale(0.99); }
.sec-tile.is-suggested { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, #191917); }
.sec-tile .st-ico { display: inline-flex; flex: none; width: 20px; height: 20px; color: var(--accent); }
.sec-tile .st-ico svg { width: 20px; height: 20px; }
.sec-tile .st-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.sec-tile .st-name { font-family: var(--input); font-size: 0.82rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 0.45rem; }
.sec-tile .st-badge { font-family: var(--mono); font-size: 0.48rem; letter-spacing: 0.08em; text-transform: uppercase; color: #121212; background: var(--accent); border-radius: 3px; padding: 1px 5px; }
.sec-tile .st-desc { font-family: var(--input); font-size: 0.7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-tile .st-add { flex: none; font-size: 1.1rem; line-height: 0; color: var(--accent); font-weight: 400; }

/* collection editor rows (drawer) */
.col-editor { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.7rem; }
.col-erow { display: grid; grid-template-columns: 44px 1fr auto; gap: 0.55rem; align-items: center; }
.col-ethumb { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; border: 1px solid var(--line); }
.col-efields { display: grid; grid-template-columns: 1fr 4.5rem; gap: 0.4rem; min-width: 0; }
.col-efields .copy-edit { width: 100%; padding: 0.4rem 0.5rem; font-size: 0.78rem; }
.col-edel { flex: none; }

/* template-path design-QA (palette contrast + stock CTA) surfacing */
#page-status.has-issues, #page-theme-status.has-issues { color: #e6b34d; }

/* CH06 tutorial video — real embed once TUTORIAL_VIDEO_URL is set, placeholder card until */
.instr-video { margin-bottom: 1.2rem; }
.instr-video .iv-lbl {
  display: block; font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.6rem;
}
.instr-video .iv-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16); background: #0b0b0d;
}
.instr-video .iv-frame iframe, .instr-video .iv-frame video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
/* (.iv-ph — the "video walkthrough coming with launch" placeholder card — deleted with the
   placeholder itself. The slot is now opt-in: set TUTORIAL_VIDEO_URL in instructions.js
   and .iv-frame above renders the embed. Nothing shows without it.) */

.instr-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.instr-tab {
  background: none;
  color: var(--muted);
  border: 1px solid var(--line);
}
.instr-tab.active { background: var(--accent); color: #121212; border-color: var(--accent); }
.instr-panel ol { padding-left: 1.4rem; }
.instr-panel li { margin-bottom: 0.7rem; font-size: 0.9rem; }
.instr-panel li::marker { color: var(--accent); font-family: var(--mono); font-size: 0.8rem; }
.instr-copy { margin-top: 0.5rem; }

#page-frame {
  width: 100%;
  height: 74vh;
  min-height: 560px;
  border: 0;
  display: block;
  background: #0d0e11;
}

#license-key { min-width: 260px; }

.status { margin-top: 0.8rem; }

h3.sub {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 1.6rem 0 0.6rem;
}
h3.sub:first-of-type { margin-top: 1.2rem; }

.chip-list { list-style: none; margin-top: 0.7rem; }
.asset-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text);
  background: #141412;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.5rem 0.3rem 0.9rem;
  margin: 0 0.5rem 0.5rem 0;
}
.chip-x {
  background: none;
  color: var(--muted);
  border: none;
  padding: 0 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0;
}
.chip-x:hover:not(:disabled) { color: var(--accent); filter: none; }

/* CH02 — wider, calmer brand setup */
#step-brand {
  width: min(1080px, calc(100vw - 3rem));
  margin-left: calc((100% - min(1080px, 100vw - 3rem)) / 2);
}

.acc-group { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 0.7rem; }
details.acc {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #161614;
}
details.acc summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1rem 1.3rem;
}
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::before {
  content: "▸";
  color: var(--accent);
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}
details[open].acc summary::before { transform: rotate(90deg); }
.acc-title {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.acc-sum {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-sum.filled { color: var(--accent); }
details[open].acc { border-color: #3a3833; }
.acc-body { padding: 0.4rem 1.3rem 1.2rem; }
textarea.acc-extra {
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 0.3rem;
}
textarea.acc-extra:focus { color: var(--text); }

.brand-saverow {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  margin-top: 1.6rem;
}
.brand-saverow .pf-field { margin: 0; }
.brand-saverow input { width: 100%; }
.brand-saverow button { flex: none; }

.brand-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid #201f1c;
}
@media (max-width: 820px) { .brand-secondary { grid-template-columns: 1fr; } }
h3.sub.minor { color: var(--muted); margin-top: 0.2rem; }
.brand-secondary .note { font-size: 0.76rem; }

/* quick-add chips (CH02 brand sections) */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.qchip {
  background: #141412;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  transition: all 0.15s ease;
}
.qchip:hover:not(:disabled) { border-color: var(--muted); color: var(--text); filter: none; }
.qchip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #121212;
  font-weight: 700;
}

/* dashed upload zones (CH02) — same interaction as step 1's kit drop */
.upload-zone {
  border: 1.5px dashed #3a3833;
  border-radius: 8px;
  background: #151513;
  padding: 1.4rem 1rem;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.upload-zone.dragover { border-color: var(--accent); background: #1c1a17; }
.upload-zone p {
  margin-bottom: 0.7rem;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}
.upload-zone input[type="file"] {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  max-width: 100%;
}

/* logo preview inside the drop zone (CH02) */
.upload-zone {
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#logo-loaded { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
#logo-loaded[hidden] { display: none; }
#logo-img {
  height: 48px;
  max-width: 160px;
  object-fit: contain;
  border-radius: 4px;
  background: #1d1d1b;
}
#logo-loaded p { margin: 0; text-transform: none; letter-spacing: 0.03em; font-size: 0.72rem; }

button.ghost {
  background: none;
  color: var(--muted);
  border: 1px solid var(--line);
}
button.ghost:hover:not(:disabled) { color: var(--text); border-color: var(--muted); filter: none; }

@font-face {
  font-family: "Coolvetica";
  src: url("/fonts/coolvetica.otf") format("opentype");
  font-display: swap;
}

/* CH03 wider layout + text/overlay tool */
#step-art {
  width: min(1480px, calc(100vw - 3rem));
  margin-left: calc((100% - min(1480px, 100vw - 3rem)) / 2);
}
/* CH03 intro cluster (+ the edit-art-direction bar) — a CENTRED vertical stack in the
   wide CH03 container. Centring is pure CSS (margin:auto); positionIntro() no longer
   translates it, so there are no leftover empty zones on either side. */
.art-intro, #step-art > .advanced { max-width: 620px; margin: 0 auto; }
.art-intro {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 1.15rem;
}
/* the display:flex above beats the UA [hidden]{display:none}, so restore it explicitly —
   otherwise collapsing the intro after a round is generated has no visual effect */
.art-intro[hidden] { display: none; }
.art-intro > h2 { margin: 0; }
.art-intro > .note { margin: -0.55rem 0 0; max-width: 46ch; } /* tuck the subtitle under the header */
.art-intro > #art-status { margin: 0; }
/* Reference card — sized to its content (no dead area). Big thumbnails on the
   left, the vibe/close toggle beside them; shown only when a reference exists
   AND we're on the selection phase (updateRefVisibility). The old "N references
   loaded ✓" status line was dropped — the visible thumbnail IS the status. */
.art-refstrength {
  margin: 0 auto;
  padding: 0.9rem;
  width: fit-content;
  max-width: 100%;
  background: linear-gradient(180deg, #181816, #151513);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.9);
}
.art-refstrength[hidden] { display: none; }
.ref-grid { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.ref-thumbs { display: flex; gap: 0.55rem; }
.ref-thumbs:empty { display: none; }
.ref-thumb { position: relative; }
.ref-thumb img {
  display: block; width: 116px; height: 116px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line); background: #0c0c0b;
  box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.85);
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.ref-thumb:hover img { transform: translateY(-2px); border-color: var(--muted); }
.ref-remove {
  position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #201f1d; color: var(--text); border: 1px solid var(--line);
  font-size: 0.82rem; line-height: 1; cursor: pointer; padding: 0;
  opacity: 0; transform: scale(0.85);
  transition: opacity 0.14s ease, transform 0.14s ease, background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.ref-thumb:hover .ref-remove, .ref-remove:focus-visible { opacity: 1; transform: scale(1); }
.ref-remove:hover { background: #2a1512; border-color: #7a3327; color: #ffb4a3; }
/* Restored-session notice on the CH01 manifest — the work survived a reload but the
   File handles couldn't, so the folder needs re-dropping before the zip can build. */
.kit-restored-note {
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* + tile — add a reference without going back to CH02. Sized to match .ref-thumb img.
   Per the glow rule it reads as FILLABLE-and-unfilled (dashed + lit), and it is the
   empty state too: with no references at all it's the only thing in the strip, so the
   panel invites an upload instead of vanishing. */
.ref-add {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.3rem; width: 116px; height: 116px; padding: 0;
  border-radius: 10px; border: 1px dashed var(--line); background: #0c0c0b;
  color: var(--muted); cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.ref-add:hover, .ref-add:focus-visible {
  transform: translateY(-2px); border-color: var(--text); color: var(--text);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 26px -18px rgba(0, 0, 0, 0.9);
}
.ref-add-plus { font-size: 1.5rem; line-height: 1; font-weight: 300; }
.ref-add-lbl { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ref-add.empty { border-color: var(--muted); color: var(--text); }

.ref-steer { display: flex; flex-direction: column; gap: 0.5rem; }
.ref-steer .ctl-label { line-height: 1.35; max-width: 19ch; }

/* CH03 primary action — the large, centred Generate button sits directly under the
   reference box, with the compact credit note beneath it. */
.art-gen-action { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }
.art-gen-action #art-generate {
  white-space: nowrap;
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  padding: 1.05rem 3.2rem;
  border-radius: 7px;
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.8);
}
.art-gen-action #art-generate:hover { transform: translateY(-1px); }
.art-credit-note {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); cursor: default;
}
.art-credit-note svg { width: 13px; height: 13px; flex: none; opacity: 0.8; }

/* "I have my own image" bypass — a quiet secondary action under Generate */
.art-own {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  margin-top: 1.15rem;
}
.art-own-or {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent-dim, #8f8f8f); position: relative;
}
.art-own #art-own-btn {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em;
  padding: 0.55rem 1.3rem;
}
.art-own-hint { margin: 0; font-size: 0.66rem; opacity: 0.7; }

/* Blank canvas = a drop target for the user's own cover image ("I have my own image") */
.art-canvas.big.art-canvas-blank {
  aspect-ratio: 1;  /* the base image normally sizes the canvas; keep it square while empty */
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 60%),
    #101010;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.art-blank-drop {
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  text-align: center; color: rgba(255, 255, 255, 0.55); cursor: pointer; padding: 2rem;
}
.art-blank-drop svg { width: 46px; height: 46px; opacity: 0.7; }
.art-blank-drop b { font-size: 1rem; color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.art-blank-drop span { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; }
/* dragging an image file over the canvas (blank OR loaded) */
.art-canvas.big.drop-hot {
  border: 2px solid color-mix(in srgb, var(--accent) 70%, #fff) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 34px -6px color-mix(in srgb, var(--accent) 55%, transparent);
}
.art-canvas.big.drop-hot .art-blank-drop { color: #fff; }
.art-tool {
  margin: 1.1rem 0 0.2rem;
  padding: 1rem 1.2rem 1.2rem;
  background: #161614;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.art-tool .sub:first-child { margin-top: 0; }
.tool-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.3rem;
  margin-bottom: 0.9rem;
}
.tool-field { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; width: auto; }
.tool-field.grow { flex: 1; min-width: 200px; }
.tool-field.grow input { width: 100%; }
.px-wrap { display: inline-flex; align-items: center; gap: 0.6rem; }
.px-wrap input[type="range"] { width: 140px; accent-color: var(--accent); }
.px-wrap input[type="number"] {
  width: 62px; font-family: var(--input); font-size: 0.85rem; color: var(--text);
  background: #141412; border: 1px solid var(--line); border-radius: 5px; padding: 0.5rem 0.5rem;
}
.px-unit { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }
.ov-blend {
  font-family: var(--input); font-size: 0.82rem; color: var(--text);
  background: #141412; border: 1px solid var(--line); border-radius: 5px; padding: 0.55rem 0.7rem;
}

/* overlay library + applied — one tile per type, multi-variant types cycle */
.overlay-lib { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.7rem; }
.overlay-chip {
  display: flex; flex-direction: column; align-items: center; gap: 0.28rem;
  background: #141412; border: 1px solid var(--line); border-radius: 7px;
  padding: 0.4rem; width: 76px;
}
.overlay-chip .ov-thumb {
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  line-height: 0; border-radius: 4px;
}
.overlay-chip .ov-thumb img {
  width: 60px; height: 60px; object-fit: cover; border-radius: 4px;
  background: #0c0c0b; display: block;
}
.overlay-chip .ov-label { font-size: 0.58rem; letter-spacing: 0.04em; color: var(--muted); text-align: center; }
.overlay-chip.on { border-color: var(--accent); }
.overlay-chip.on .ov-label { color: var(--accent); }
.overlay-chip.on .ov-thumb img { outline: 2px solid var(--accent); outline-offset: -2px; }
.ov-cycler { display: flex; align-items: center; gap: 0.15rem; }
.ov-arrow {
  border: 0; background: #1f1f1d; color: var(--muted); cursor: pointer;
  width: 17px; height: 16px; border-radius: 3px; font-size: 0.8rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: color 0.12s ease, background 0.12s ease;
}
.ov-arrow:hover { color: var(--accent); background: #262523; }
.ov-count { font-family: var(--mono); font-size: 0.54rem; color: var(--muted); min-width: 22px; text-align: center; }
.overlay-row .ov-name em { font-style: normal; color: var(--muted); }

/* generation history strip */
details#art-history { margin: 0 0 1rem; }
.hist-count { color: var(--muted); font-family: var(--mono); font-size: 0.62rem; }
.history-strip { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.2rem 0.1rem 0.4rem; }
.hist-item {
  flex: 0 0 auto; width: 64px; height: 64px; padding: 0; border-radius: 6px;
  border: 1px solid var(--line); background: #0c0c0b; cursor: pointer; overflow: hidden;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.hist-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hist-item:hover { border-color: var(--muted); transform: translateY(-1px); }
.hist-item.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* adjustments card */
.adj-grid { display: flex; flex-direction: column; gap: 0.7rem; }
.adj-row { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 0.8rem; }
.adj-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.adj-reset {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); background: #1a1a18; border: 1px solid var(--line); border-radius: 5px;
  padding: 0.3rem 0.6rem; cursor: pointer; margin-left: auto;
}
.adj-reset:hover { color: var(--accent); border-color: var(--accent-dim); }

/* title layer-order row */
.text-order-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; flex-wrap: wrap; }

/* title behind the texture overlays (drag still works — overlays are pointer-events:none) */
.art-canvas.big.text-behind .art-overlays { z-index: 4; }
/* stickers/graphics sent BEHIND the texture overlays so the textures blend over them.
   default placed-asset z-index is 5 (on top); drop it below the overlays here. */
.asset-behind-switch { margin-top: 0.8rem; }
.art-canvas.big.assets-behind .placed-asset { z-index: 1; }
.art-canvas.big.assets-behind .art-overlays { z-index: 2; }
/* both toggled: overlays sit above the title AND the stickers */
.art-canvas.big.text-behind.assets-behind .art-overlays { z-index: 4; }

/* image-asset library (under the preview) */
.asset-card { margin-top: 1rem; }
.asset-lib { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.asset-lib .note { padding: 0.3rem 0; }
.asset-tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  width: 74px; padding: 0.4rem; cursor: grab;
  background: #141412; border: 1px solid var(--line); border-radius: 7px;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.asset-tile:hover { border-color: var(--muted); transform: translateY(-1px); }
.asset-tile:active { cursor: grabbing; }
.asset-tile img { width: 56px; height: 56px; object-fit: contain; background: #0c0c0b; border-radius: 4px; }
.asset-tile span {
  font-size: 0.56rem; letter-spacing: 0.03em; color: var(--muted); text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* assets placed on the canvas — movable / resizable / removable */
.placed-asset {
  position: absolute; transform: translate(-50%, -50%); z-index: 5;
  cursor: grab; touch-action: none; line-height: 0;
}
.placed-asset img { width: 100%; height: auto; display: block; pointer-events: none; }
.placed-asset.selected { outline: 1px dashed var(--accent); outline-offset: 2px; cursor: grabbing; }
.placed-asset .asset-handle, .placed-asset .asset-del { display: none; }
.placed-asset.selected .asset-handle {
  display: block; position: absolute; right: -6px; bottom: -6px;
  width: 13px; height: 13px; background: var(--accent); border: 1px solid #fff;
  border-radius: 2px; cursor: nwse-resize;
}
.placed-asset.selected .asset-del {
  display: flex; align-items: center; justify-content: center;
  position: absolute; right: -9px; top: -9px; width: 18px; height: 18px;
  background: #1a1a18; color: var(--text); border: 1px solid var(--accent);
  border-radius: 50%; cursor: pointer; font-size: 0.58rem; line-height: 1; padding: 0;
}
.placed-asset.selected .asset-del:hover { background: var(--accent); color: #121212; }
.overlay-row {
  display: flex; align-items: center; gap: 0.7rem; margin-top: 0.4rem;
  font-family: var(--mono); font-size: 0.68rem;
}
.overlay-row .ov-name { min-width: 90px; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; }
.overlay-row .ov-op { flex: 1; max-width: 160px; accent-color: var(--accent); }
.overlay-row .ov-blend { padding: 0.3rem 0.5rem; font-size: 0.7rem; }

.ctl { display: flex; flex-direction: column; gap: 0.4rem; }
.ctl-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.seg-group { display: inline-flex; gap: 0.3rem; }
.seg {
  background: #1a1a18;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.4rem 0.75rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  transition: all 0.15s ease;
}
.seg:hover:not(.on) { color: var(--text); border-color: var(--muted); filter: none; }
.seg.on { background: var(--accent-sel); color: #121212; border-color: var(--accent-sel); font-weight: 700; }

.art-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
  margin-top: 1.1rem;
}
@media (max-width: 780px) { .art-grid { grid-template-columns: repeat(2, 1fr); } }

/* Compact header above the results — status line + "New batch" (the bulky intro collapses) */
.art-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 1.4rem;
}
.art-results-head #art-status { margin: 0; flex: 1; }
.art-results-head #art-newbatch {
  flex: none;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

/* Second-pass refine box — plain-language notes → Claude rewrites the prompts + regenerates */
.art-refine {
  margin-top: 1.15rem;
  padding: 1.1rem 1.2rem 0.9rem;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.art-refine-lbl {
  display: block;
  font-family: var(--mono, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dim, #8f8f8f);
  margin-bottom: 0.6rem;
}
.art-refine-row { display: flex; gap: 0.7rem; align-items: stretch; }
.art-refine-row textarea {
  flex: 1;
  min-height: 3.1rem;
  padding: 0.7rem 0.85rem;
  font-size: 0.85rem;
  color: var(--text);
  background: #0f0f0e;
  border: 1px solid var(--line-2);
  border-radius: 6px;
}
.art-refine-row textarea:focus { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2)); outline: none; }
.art-refine-row #art-refine-btn {
  flex: none;
  align-self: flex-end;
  white-space: nowrap;
  padding: 0.85rem 1.6rem;
  border-radius: 6px;
}
.art-refine-row #art-refine-btn:hover { transform: translateY(-1px); }
.art-refine-row #art-refine-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.art-refine-hint { margin: 0.6rem 0 0; font-size: 0.72rem; opacity: 0.72; }
@media (max-width: 600px) {
  .art-refine-row { flex-direction: column; }
  .art-refine-row #art-refine-btn { align-self: stretch; }
}

/* Phase B — enlarged preview with controls arranged around it */
.edit-top { display: flex; justify-content: space-between; gap: 1rem; margin: 1.1rem 0 0.8rem; }
.edit-top button { padding: 0.5rem 1.1rem; }
.edit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(330px, 0.85fr);
  gap: 1.7rem;
  align-items: start;
}
@media (max-width: 860px) { .edit-layout { grid-template-columns: 1fr; } }
.art-canvas.big {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.55);
}
/* square-crop the BASE artwork only (direct child) — placed stickers/graphics keep
   their own natural aspect ratio (.placed-asset img), never forced to a square. */
.art-canvas.big > img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; }

/* --- segmented control panel: each group is its own bordered card --- */
.edit-controls { margin: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.tw-card {
  background: #161614;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 0.95rem 1.05rem 1.05rem;
}
.card-head {
  display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap;
  margin-bottom: 0.9rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line);
}
.card-title {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text);
}
.card-hint { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.03em; color: var(--muted); }
.card-hint code { color: var(--muted); }
.card-divider { height: 1px; background: var(--line); margin: 0.95rem 0 0.9rem; }
.fld-lbl {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--muted);
}
.fld-opt { color: color-mix(in srgb, var(--muted) 70%, transparent); text-transform: none; letter-spacing: 0.02em; }
.edit-controls .tool-field.grow input,
.edit-controls .tool-field.grow select { width: 100%; }
.edit-controls .tool-field { margin: 0; }
/* Title card — text + font on one row to keep the card short */
/* text-layer tabs (up to 4 layers, each with its own type controls) */
.layer-tabs { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.layer-tab {
  position: relative; display: inline-flex; align-items: center; gap: 0.5rem;
  min-width: 62px; height: 30px; padding: 0 0.35rem 0 0.7rem; border-radius: 7px;
  background: #1a1a18; border: 1px solid var(--line); color: var(--muted);
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0; text-transform: none;
  cursor: pointer; transition: all 0.14s ease;
}
.layer-tab > .layer-label { margin-right: auto; }
.layer-tab:hover { color: var(--text); border-color: var(--muted); }
.layer-tab.on { background: var(--accent); color: #121212; border-color: var(--accent); }
/* delete = its own separated hit target so switching layers never triggers it */
.layer-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 5px; margin-left: 0.1rem;
  font-size: 0.62rem; line-height: 1; opacity: 0.5; transition: all 0.12s ease;
}
.layer-del:hover { opacity: 1; color: #e05e55; background: rgba(224, 94, 85, 0.14); }
.layer-tab.on .layer-del:hover { color: #a02015; background: rgba(0, 0, 0, 0.14); }
.layer-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px; padding: 0;
  background: none; border: 1px dashed var(--line); color: var(--muted);
  font-size: 0.95rem; line-height: 0; cursor: pointer; transition: all 0.14s ease;
}
.layer-add:hover { color: var(--text); border-color: var(--muted); background: #1a1a18; }
/* dim non-current layers on the canvas so the active one is clear while editing */
.art-title { transition: opacity 0.15s ease; }
.art-canvas.big .art-title:not(.current) { opacity: 0.78; }

.title-row { display: flex; gap: 0.9rem; align-items: flex-end; }
.title-row .tool-field.grow { flex: 1 1 0; min-width: 0; }
.title-row .tool-field input { width: 100%; min-width: 0; }

/* ---- font picker: a custom popover that previews each font in its OWN face,
   grouped by category (bundled library first, installed fonts after) ---- */
.font-picker { position: relative; width: 100%; }
.font-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  background: #1a1a18; border: 1px solid var(--line); border-radius: 6px; padding: 0.5rem 0.7rem;
  color: var(--text); font-family: var(--input); font-size: 0.95rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; cursor: pointer; transition: border-color 0.15s ease;
}
.font-trigger:hover { border-color: var(--muted); }
.font-trigger[aria-expanded="true"] { border-color: var(--accent); }
.font-trigger-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.font-caret { width: 15px; height: 15px; flex: none; color: var(--muted); }
.font-panel {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  width: min(340px, 82vw); max-width: 340px;
  background: #161614; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 26px 64px -22px rgba(0, 0, 0, 0.9); overflow: hidden;
  display: flex; flex-direction: column; max-height: 360px;
}
.font-panel[hidden] { display: none; }
.font-search-wrap { padding: 0.55rem; border-bottom: 1px solid var(--line); flex: none; }
.font-search {
  width: 100%; background: #0f0f0d; border: 1px solid var(--line); border-radius: 6px;
  padding: 0.45rem 0.6rem; color: var(--text); font-family: var(--input); font-size: 0.82rem;
}
.font-search:focus { outline: none; border-color: var(--accent); }
.font-list { overflow-y: auto; padding: 0.3rem; }
.fp-cat {
  font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); padding: 0.7rem 0.6rem 0.35rem; position: sticky; top: 0; background: #161614; z-index: 1;
}
.fp-cat:first-child { padding-top: 0.35rem; }
.fp-opt {
  display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px;
  padding: 0.45rem 0.65rem; margin: 0; color: var(--text); font-size: 1.2rem; line-height: 1.25;
  font-weight: 400; letter-spacing: 0; text-transform: none; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.12s ease;
}
.fp-opt:hover { background: #201f1d; }
.fp-opt.sel { background: color-mix(in srgb, var(--accent-sel) 16%, #201f1d); box-shadow: inset 2px 0 0 var(--accent-sel); }
.fp-opt[hidden] { display: none; }
.fp-empty { padding: 1rem 0.7rem; color: var(--muted); font-size: 0.8rem; }
.title-size { margin-top: 0.9rem; }
.title-spacing { margin-top: 0.7rem; }
.title-size .px-wrap, .title-spacing .px-wrap { display: flex; align-items: center; gap: 0.6rem; }
.title-size .px-wrap input[type="range"], .title-spacing .px-wrap input[type="range"] { flex: 1; width: auto; min-width: 60px; }

/* font-picker footer — "Add custom font" upload button */
.font-foot { flex: none; border-top: 1px solid var(--line); padding: 0.5rem; background: #161614; }
.font-add-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  background: none; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--text); border-radius: 6px; padding: 0.5rem; cursor: pointer;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.font-add-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: var(--accent); }
.font-add-btn:disabled { opacity: 0.6; cursor: default; }
.title-hint { margin-top: 0.7rem; }

/* Layout card — size + position side by side */
.layout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.2rem 1.5rem;
  align-items: start;
}
.layout-grid .px-wrap { display: flex; align-items: center; gap: 0.6rem; }
.layout-grid .px-wrap input[type="range"] { flex: 1; width: auto; min-width: 60px; }

/* Colour picker (HSV square + hue slider + hex + swatches) */
.cp { display: flex; gap: 0.7rem; height: 148px; }
.cp-sv {
  position: relative; flex: 1; border-radius: 8px; cursor: crosshair;
  border: 1px solid var(--line); touch-action: none;
}
.cp-sv-cursor {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%); pointer-events: none;
}
.cp-hue {
  position: relative; width: 22px; border-radius: 8px; cursor: ns-resize;
  border: 1px solid var(--line); touch-action: none;
  background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.cp-hue-thumb {
  position: absolute; left: -3px; right: -3px; height: 6px; border-radius: 3px;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
  transform: translateY(-50%); pointer-events: none;
}
.cp-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.8rem; }
.cp-preview { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--line); flex: none; }
.cp-hash { font-family: var(--mono); color: var(--muted); margin-right: -0.28rem; }
.cp-hex {
  width: 88px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.8rem; color: var(--text); background: #141412;
  border: 1px solid var(--line); border-radius: 5px; padding: 0.5rem 0.55rem;
}
.cp-swatches { display: flex; gap: 0.4rem; margin-left: auto; }
.cp-swatches button {
  width: 25px; height: 25px; border-radius: 6px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16); cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease;
}
.cp-swatches button:hover { transform: scale(1.1); border-color: var(--muted); }
.cp-hint { margin-top: 0.55rem; }

/* legibility shadow row + toggle switch */
.shadow-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.glow-row { margin-bottom: 0.75rem; } /* space between the stacked glow + shadow rows */
.switch { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  position: relative; width: 38px; height: 22px; border-radius: 11px; flex: none;
  background: #2a2926; border: 1px solid var(--line); transition: background 0.18s ease, border-color 0.18s ease;
}
.switch-thumb {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--muted); transition: transform 0.18s ease, background 0.18s ease;
}
.switch input:checked + .switch-track { background: var(--accent-dim); border-color: var(--accent); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(16px); background: #fff; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-lbl {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--text);
}
.seg-group.disabled { opacity: 0.4; pointer-events: none; }
.art-cell {
  border: 2px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #141412;
  transition: border-color 0.2s ease;
}
.art-cell.selected { border-color: var(--accent); }
.art-cell.busy { opacity: 0.5; }

/* ---- loading animations (CH03 grid skeletons, CH04/CH05 spinners) ---- */
@keyframes tw-shimmer { 0% { background-position: -140% 0; } 100% { background-position: 140% 0; } }
@keyframes tw-spin { to { transform: rotate(360deg); } }
@keyframes tw-pulse-dot { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
/* a skeleton cover cell while the 4 options render */
.art-cell.skeleton { position: relative; aspect-ratio: 1 / 1; border-style: dashed; }
.art-cell.skeleton::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, #16150f 30%, #232019 50%, #16150f 70%);
  background-size: 220% 100%; animation: tw-shimmer 1.25s ease-in-out infinite;
}
.art-cell.skeleton .sk-lens {
  position: absolute; top: 0.7rem; left: 0.7rem; z-index: 1;
  font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.art-cell.skeleton .sk-spin { position: absolute; inset: 0; margin: auto; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .art-cell.skeleton::before { animation: none; } }
/* a small ring spinner (buttons + overlays) */
.tw-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent); animation: tw-spin 0.8s linear infinite;
}
.tw-spinner.sm { width: 15px; height: 15px; border-width: 2px; display: inline-block; vertical-align: -0.2em; }
@media (prefers-reduced-motion: reduce) { .tw-spinner { animation-duration: 2s; } }
/* centered loading overlay (CH05 AI-page preview while generating) */
.tw-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  min-height: 320px; text-align: center; padding: 2rem;
}
.tw-loading .tw-load-msg { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tw-loading .tw-load-sub { color: var(--muted); font-size: 0.82rem; max-width: 40ch; }
/* dots for inline "working…" text */
.tw-dots span { animation: tw-pulse-dot 1.2s ease-in-out infinite; }
.tw-dots span:nth-child(2) { animation-delay: 0.2s; }
.tw-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ============================================================
   BOX LOADER — the app's UNIVERSAL loading language. A stack of cubes assembles
   itself and ships ("packs your release"). CSS-only 3D (no deps), re-themed to the
   app's dark + glowing-white look: near-black stage, dark-neutral cubes with glowing
   white edges + soft luminance + a light "tape" seam. lg (full-panel) + sm (inline)
   sizes, each paired with understated monospace status text (.box-loader-status).
   Built by public/js/modules/box-loader.js.
   ============================================================ */
.box-loader-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.box-loader-wrap .box-loader { margin-bottom: 128px; }  /* the ground plane + drop path extend below the element */
.box-loader-wrap.sm { gap: 1.1rem; }
.box-loader-status {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); text-align: center; max-width: 42ch; line-height: 1.6;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.14);
}
.box-loader-wrap.sm .box-loader-status { font-size: 0.64rem; }
/* full-cover overlay — solid dark so the loader's occlusion mask blends invisibly */
.box-loader-overlay {
  position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: #0b0b0d;
}

.box-loader {
  --duration: 3s;
  --loader-bg: #0b0b0d;        /* MUST equal the surface directly behind the loader (mask colour) */
  --primary: #1c1d23;          /* dark-neutral cube face */
  --primary-light: #35373f;    /* the lit half of the ground plane */
  --primary-rgba: rgba(28, 29, 35, 0);
  --edge: rgba(255, 255, 255, 0.52);  /* glowing white cube edge */
  width: 200px; height: 320px; position: relative; transform-style: preserve-3d;
}
.box-loader-wrap.sm .box-loader { zoom: 0.4; }
@media (max-width: 480px) { .box-loader { zoom: 0.5; } }

/* occlusion masks REMOVED — the drop now fades out (see bl-move* opacity stops), so
   the loader sits on any background with no matching backdrop needed */

.box-loader .ground {
  position: absolute; left: -50px; bottom: -120px; transform-style: preserve-3d;
  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
}
.box-loader .ground div {
  transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  width: 200px; height: 200px;
  background: linear-gradient(45deg, var(--primary) 0%, var(--primary) 50%, var(--primary-light) 50%, var(--primary-light) 100%);
  transform-style: preserve-3d; animation: bl-ground var(--duration) linear forwards infinite;
}
.box-loader .ground div:before, .box-loader .ground div:after {
  --rx: 90deg; --ry: 0deg; --x: 44px; --y: 162px; --z: -50px; content: "";
  width: 156px; height: 300px; opacity: 0;
  background: linear-gradient(var(--primary), var(--primary-rgba));
  position: absolute; transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
  animation: bl-gshine var(--duration) linear forwards infinite;
}
.box-loader .ground div:after { --rx: 90deg; --ry: 90deg; --x: 0; --y: 177px; --z: 150px; }

.box-loader .box { --x: 0; --y: 0; position: absolute; animation: var(--duration) linear forwards infinite; transform: translate(var(--x), var(--y)); }
.box-loader .box div {
  background-color: var(--primary); width: 48px; height: 48px; position: relative;
  transform-style: preserve-3d; animation: var(--duration) ease forwards infinite;
  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  box-shadow: inset 0 0 0 1.4px var(--edge), 0 0 22px rgba(255, 255, 255, 0.10);
}
.box-loader .box div:before, .box-loader .box div:after {
  --rx: 90deg; --ry: 0deg; --z: 24px; --y: -24px; --x: 0; content: "";
  position: absolute; background-color: inherit; width: inherit; height: inherit;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
  filter: brightness(var(--b, 1.55));
  box-shadow: inset 0 0 0 1.4px var(--edge);
}
.box-loader .box div:after { --rx: 0deg; --ry: 90deg; --x: 24px; --y: 0; --b: 2.2; }
/* a soft white "tape" seam down the top face */
.box-loader .box div:before {
  background-image: linear-gradient(90deg, transparent 43%, rgba(255, 255, 255, 0.28) 50%, transparent 57%);
}

.box-loader .box.box0 { --x: -220px; --y: -120px; left: 58px; top: 108px; animation-name: bl-move0; }
.box-loader .box.box0 div { animation-name: bl-scale0; }
.box-loader .box.box1 { --x: -260px; --y: 120px; left: 25px; top: 120px; animation-name: bl-move1; }
.box-loader .box.box1 div { animation-name: bl-scale1; }
.box-loader .box.box2 { --x: 120px; --y: -190px; left: 58px; top: 64px; animation-name: bl-move2; }
.box-loader .box.box2 div { animation-name: bl-scale2; }
.box-loader .box.box3 { --x: 280px; --y: -40px; left: 91px; top: 120px; animation-name: bl-move3; }
.box-loader .box.box3 div { animation-name: bl-scale3; }
.box-loader .box.box4 { --x: 60px; --y: 200px; left: 58px; top: 132px; animation-name: bl-move4; }
.box-loader .box.box4 div { animation-name: bl-scale4; }
.box-loader .box.box5 { --x: -220px; --y: -120px; left: 25px; top: 76px; animation-name: bl-move5; }
.box-loader .box.box5 div { animation-name: bl-scale5; }
.box-loader .box.box6 { --x: -260px; --y: 120px; left: 91px; top: 76px; animation-name: bl-move6; }
.box-loader .box.box6 div { animation-name: bl-scale6; }
.box-loader .box.box7 { --x: -240px; --y: 200px; left: 58px; top: 87px; animation-name: bl-move7; }
.box-loader .box.box7 div { animation-name: bl-scale7; }

@keyframes bl-move0 { 12% { transform: translate(var(--x), var(--y)); } 25%, 52% { transform: translate(0, 0); } 80% { transform: translate(0, -32px); opacity: 1; } 84% { opacity: 0; } 90%, 100% { transform: translate(0, 188px); opacity: 0; } }
@keyframes bl-scale0 { 6% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); } 14%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); } }
@keyframes bl-move1 { 16% { transform: translate(var(--x), var(--y)); } 29%, 52% { transform: translate(0, 0); } 80% { transform: translate(0, -32px); opacity: 1; } 84% { opacity: 0; } 90%, 100% { transform: translate(0, 188px); opacity: 0; } }
@keyframes bl-scale1 { 10% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); } 18%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); } }
@keyframes bl-move2 { 20% { transform: translate(var(--x), var(--y)); } 33%, 52% { transform: translate(0, 0); } 80% { transform: translate(0, -32px); opacity: 1; } 84% { opacity: 0; } 90%, 100% { transform: translate(0, 188px); opacity: 0; } }
@keyframes bl-scale2 { 14% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); } 22%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); } }
@keyframes bl-move3 { 24% { transform: translate(var(--x), var(--y)); } 37%, 52% { transform: translate(0, 0); } 80% { transform: translate(0, -32px); opacity: 1; } 84% { opacity: 0; } 90%, 100% { transform: translate(0, 188px); opacity: 0; } }
@keyframes bl-scale3 { 18% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); } 26%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); } }
@keyframes bl-move4 { 28% { transform: translate(var(--x), var(--y)); } 41%, 52% { transform: translate(0, 0); } 80% { transform: translate(0, -32px); opacity: 1; } 84% { opacity: 0; } 90%, 100% { transform: translate(0, 188px); opacity: 0; } }
@keyframes bl-scale4 { 22% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); } 30%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); } }
@keyframes bl-move5 { 32% { transform: translate(var(--x), var(--y)); } 45%, 52% { transform: translate(0, 0); } 80% { transform: translate(0, -32px); opacity: 1; } 84% { opacity: 0; } 90%, 100% { transform: translate(0, 188px); opacity: 0; } }
@keyframes bl-scale5 { 26% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); } 34%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); } }
@keyframes bl-move6 { 36% { transform: translate(var(--x), var(--y)); } 49%, 52% { transform: translate(0, 0); } 80% { transform: translate(0, -32px); opacity: 1; } 84% { opacity: 0; } 90%, 100% { transform: translate(0, 188px); opacity: 0; } }
@keyframes bl-scale6 { 30% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); } 38%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); } }
@keyframes bl-move7 { 40% { transform: translate(var(--x), var(--y)); } 53% { transform: translate(0, 0); } 80% { transform: translate(0, -32px); opacity: 1; } 84% { opacity: 0; } 90%, 100% { transform: translate(0, 188px); opacity: 0; } }
@keyframes bl-scale7 { 34% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); } 42%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); } }
@keyframes bl-ground { 0%, 65% { transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0); } 75%, 90% { transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1); } 100% { transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0); } }
@keyframes bl-gshine { 0%, 70% { opacity: 0; } 75%, 87% { opacity: 0.2; } 100% { opacity: 0; } }
@keyframes bl-mask { 0%, 65% { opacity: 0; } 66%, 100% { opacity: 1; } }
/* reduced motion: freeze into a static assembled stack, no looping animation */
@media (prefers-reduced-motion: reduce) {
  .box-loader .box { animation: none; transform: translate(0, 0); }
  .box-loader .box div { animation: none; transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); }
  .box-loader:before, .box-loader:after, .box-loader .ground div { animation: none; }
  .box-loader .ground div { transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1); }
}
/* CH03 cover-art "render bay" — the box loader on its own dark stage (mask matches) */
.art-grid-loading {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center;
  min-height: 440px; padding: 2.5rem 1rem;
  background: #0b0b0d; border: 1px solid var(--line); border-radius: 14px;
}
/* CH07 ZIP packing — the hero moment: the large box loader front and centre */
.dl-loader-host {
  display: flex; align-items: center; justify-content: center;
  min-height: 460px; margin-top: 1.6rem; padding: 2.5rem 1rem;
  background: #0b0b0d; border: 1px solid var(--line); border-radius: 16px;
}

/* ============================================================
   SHIP FINALE — the signature send-off. When the ZIP is ready the view pulls back
   to the whole sealed box (reusing the CH01 drop-box geometry + seal language),
   the seal flashes, and the box ships off-screen as the download begins. "Shipped."
   ============================================================ */
.ship-finale {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.6rem;
  background: rgba(11, 11, 13, 0.97);
  opacity: 0; transition: opacity 0.32s var(--ease);
}
.ship-finale.on { opacity: 1; }
.ship-finale .sf-stage { width: 380px; transform: scale(1.3); transition: transform 0.55s var(--ease); }
.ship-finale.on .sf-stage { transform: scale(1); }  /* pull back to reveal the whole box */
.ship-finale .sf-stage .drop-box { cursor: default; }
.ship-finale.away .sf-stage {
  transition: transform 0.62s var(--ease-in), opacity 0.62s var(--ease-in);
  transform: translateX(120vw) rotate(5deg) scale(0.92); opacity: 0.85;
}
.ship-finale .sf-status {
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); transition: color 0.4s var(--ease) 0.22s, letter-spacing 0.4s var(--ease) 0.22s,
    font-size 0.4s var(--ease) 0.22s, text-shadow 0.4s var(--ease) 0.22s;
}
.ship-finale.away .sf-status {
  color: var(--text); font-size: 1.05rem; letter-spacing: 0.4em;
  text-shadow: 0 0 34px rgba(255, 255, 255, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .ship-finale, .ship-finale .sf-stage, .ship-finale .sf-status { transition: opacity 0.3s ease; }
  .ship-finale .sf-stage, .ship-finale.on .sf-stage { transform: none; }
  .ship-finale.away .sf-stage { transform: none; opacity: 0; }
}
.art-canvas {
  position: relative;
  container-type: inline-size;
  line-height: 0;
}
.art-cell img {
  width: 100%;
  display: block;
  cursor: pointer;
  aspect-ratio: 1;
  object-fit: cover;
}
/* texture / overlay layer — sits between the artwork and the title */
.art-overlays { position: absolute; inset: 0; pointer-events: none; }
.art-overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* live preview of the real title layer — mirrors the Pillow composite.
   font-size + font-family are set inline (exact px / chosen font). */
.art-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 86%;
  text-align: center;
  line-height: 1.0;
  letter-spacing: 0.005em;
  word-break: break-word;
  z-index: 3;
  cursor: grab;
  pointer-events: auto; /* draggable — overlays sit below with pointer-events:none */
  text-shadow: 0 0.4cqw 1.3cqw rgba(0, 0, 0, 0.6);
}
.art-canvas.big .art-title:hover { outline: 1px dashed rgba(255, 255, 255, 0.35); outline-offset: 0.5cqw; }
.art-canvas.big .art-title.dragging { cursor: grabbing; outline: 1px dashed rgba(255, 255, 255, 0.65); outline-offset: 0.5cqw; }
/* small preview cells never show the drag affordance */
.art-cell .art-title { cursor: default; pointer-events: none; }
/* gentle alignment guides — shown only while snapping during a drag */
.drag-guide {
  position: absolute; z-index: 2; pointer-events: none; opacity: 0;
  background: rgba(255, 255, 255, 0.7); transition: opacity 0.1s ease;
}
.drag-guide-v { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
.drag-guide-h { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.art-cell-empty {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
}
.art-cell-bar {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem;
}
.art-cell-bar button { flex: 1; padding: 0.5rem 0.4rem; font-size: 0.68rem; }
.art-cell.selected .art-cell-bar button:first-child { background: var(--accent); }
/* lens / axis label — tells the user what each generated option represents */
.art-cell-lens {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--accent); padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 9%, #141412);
}
/* -------------------------------------------------------------- locking */

/* --------------------------------------------------------------- wizard */
main { padding-bottom: 9rem; } /* room for the fixed bar */

.step { display: none; }
.step.active { display: block; animation: step-in 340ms cubic-bezier(0.22, 1, 0.36, 1); }
/* Vertically CENTRE a short step in the viewport (no scroll needed). The tall/wide steps
   (art · copy · page) instead top-align with a little breathing room so they aren't jammed
   against the top of the page. */
main { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; }
main:has(#step-art.active), main:has(#step-copy.active), main:has(#step-page.active) {
  justify-content: flex-start; padding-top: 3.5rem;
}
@keyframes step-in {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .step.active { animation: none; }
}

#wizard-bar {
  position: fixed;
  z-index: 50; /* above in-flight cube faces (30), below the CH05 drawer (55+) */
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.9rem 1.5rem calc(0.9rem + env(safe-area-inset-bottom));
  background: rgba(18, 18, 18, 0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
#wizard-bar .wiz-mid { flex: 1; min-width: 0; }
.wiz-progress {
  height: 7px;
  background: #1a1a18;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
#wiz-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #5f5e5a 0%, #b7b5af 46%, var(--accent) 78%, #ffffff 100%);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  #wiz-fill { transition: none; }
}
.wiz-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.45rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
#wiz-pct { color: var(--accent-dim); }
#wiz-hint { color: var(--accent); }
#wiz-hint.nudge { animation: hint-nudge 320ms ease; }
@keyframes hint-nudge {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
#wiz-back:disabled { visibility: hidden; }

/* ============================================================
   CH01 LANDED DOCUMENT — the whole section as the box metaphor's paperwork.
   Variants (classes on #step-kit, toggled from the letterhead, persisted):
     .mf-a — paper shipping manifest (dark thermal-print document)
     .mf-b — the same sheet on a clipboard
     .mf-c — freight-terminal readout (glowing white data on dark panels;
             NO cyan, NO scanlines, NO holograms — premium industrial, not sci-fi)
   The letterhead, kit summary, product-details form and totals bar all live ON the
   document — one continuous treatment from the section's outer edge down.
   ============================================================ */
@keyframes kit-card-in { from { opacity: 0; transform: translateX(min(46vw, 380px)); } to { opacity: 1; transform: none; } }
#step-kit.landed .mf-sheet { animation: kit-card-in 0.55s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { #step-kit.landed .mf-sheet { animation: none; } }

.step.mf-c {
  --mf-line: rgba(255, 255, 255, 0.14);   /* rule lines */
  --mf-cell: #15161a;                     /* field cell fill */
  --mf-ink: var(--text);
  --mf-value-glow: none;
  background: none; border: none; box-shadow: none; padding: 0;
}
.step.mf-c > h2, .step.mf-c .mf-sheet > h2 { display: none; }  /* headings live on the letterheads */
/* CH03's heading/note are nested in the centred intro cluster */
#step-art .art-intro > h2, #step-art .art-intro > h2 + .note { display: none; }
/* info/advanced disclosure boxes: quiet document furniture on every terminal step */
.step.mf-c .mf-sheet :is(details.info, details.advanced) {
  border: 1px dashed rgba(255, 255, 255, 0.16); border-radius: 4px; background: none;
}
/* shared tool cards (CH03/04/05 editors) pick up the quiet panel skin */
.step.mf-c .tw-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.008));
  border-color: rgba(255, 255, 255, 0.16);
}
#mf-sheet { position: relative; }




/* ---- letterhead ---- */
.mf-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding-bottom: 0.75rem; border-bottom: 1px dashed rgba(255, 255, 255, 0.24);
}
.step.mf-c .mf-head { border-bottom-style: solid; border-bottom-color: var(--mf-line); }
.mf-title {
  display: block; font-family: var(--mono); font-weight: 700; font-size: 0.88rem;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--mf-ink);
  text-shadow: 1px 0 rgba(255, 255, 255, 0.16);  /* print misregistration ghost */
}
.step.mf-c .mf-title { text-shadow: 0 0 16px rgba(255, 255, 255, 0.35); }
.mf-no { display: block; margin-top: 0.35rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.mf-head-r { display: flex; align-items: center; gap: 0.55rem; flex: none; }
.mf-ch {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.22em; color: var(--muted);
  border: 1px solid var(--mf-line); padding: 0.3rem 0.5rem; border-radius: 3px;
}

.mf-replace { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; padding: 0.4rem 0.7rem; }

/* ---- kit summary block ---- */
.mf-body { position: relative; display: grid; grid-template-columns: 138px 1fr; gap: 0.9rem; padding: 0.95rem 0 0.85rem; }
@media (max-width: 620px) { .mf-body { grid-template-columns: 1fr; } }
.mf-pkg {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.7rem 0.5rem 0.55rem; border: 1px solid var(--mf-line);
}
.step.mf-c .mf-pkg { background: var(--mf-cell); }
.step.mf-c .mf-pkg::before {
  content: "Container 01"; position: absolute; top: 0.4rem; left: 0.5rem;
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted);
}
.mf-pkg-icon { width: 82px; flex: none; filter: drop-shadow(0 4px 20px rgba(255, 255, 255, 0.18)); }
.step.mf-c .mf-pkg-icon { margin-top: 0.55rem; }
.mf-barcode {
  width: 86%; height: 26px; color: #ddd9d1; opacity: 0.8;
  background:
    repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 13px);
}
.step.mf-c .mf-barcode { opacity: 0.45; height: 18px; }
.mf-barcode-num { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.34em; color: var(--muted); white-space: nowrap; }

.mf-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0;
  background: var(--mf-line); border: 1px solid var(--mf-line);
}
.mf-cell { background: var(--mf-cell); padding: 0.5rem 0.65rem 0.45rem; min-width: 0; }
.mf-span2 { grid-column: 1 / -1; }
.mf-cell dt { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem; }
.mf-cell dd {
  margin: 0; font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--mf-ink); overflow-wrap: anywhere;
}
.mf-cell dd.placeholder { color: var(--muted); opacity: 0.6; text-shadow: none; }
.mf-cell #sum-name { font-size: 1rem; font-weight: 700; letter-spacing: 0.09em; }
.mf-cell #kit-stats { margin: 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--mf-ink); }
/* the STATUS row belongs to the terminal readout only */
.mf-status-cell { display: none; }
.step.mf-c .mf-status-cell { display: block; grid-column: 1 / -1; }
.step.mf-c .mf-status-cell dd { color: #fff; }



/* itemised contents (View files) — perforated footer row of the summary block */
.mf-files { margin: 0.35rem 0 0.9rem; border-top: 1px dashed rgba(255, 255, 255, 0.24); padding-top: 0.6rem; }
.step.mf-c .mf-files { border-top-style: solid; border-top-color: var(--mf-line); }
.mf-files summary { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; }

/* ---- the PRODUCT DETAILS form belongs to the document ---- */
.mf-form-head {
  margin: 0 0 0.7rem; padding-top: 0.85rem; border-top: 1px dashed rgba(255, 255, 255, 0.24);
  font-family: var(--mono); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--mf-ink);
}
.step.mf-c .mf-form-head { border-top-style: solid; border-top-color: var(--mf-line); }
.step.mf-c .pf-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0;
  background: var(--mf-line); border: 1px solid var(--mf-line);
}
.step.mf-c .pf-field {
  display: block; margin: 0; width: auto; background: var(--mf-cell);
  padding: 0.55rem 0.65rem 0.55rem;
  font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--muted);
}
.step.mf-c .pf-field .note { font-size: 0.5rem; letter-spacing: 0.14em; }
.step.mf-c .pf-wide { grid-column: 1 / -1; }
.step.mf-c .pf-field :is(input[type="text"], select, textarea) {
  display: block; width: 100%; margin-top: 0.4rem; padding: 0.2rem 0 0.25rem;
  background: transparent; border: none; border-bottom: 1px solid transparent; border-radius: 0;
  font-family: var(--mono); font-size: 0.88rem; letter-spacing: 0.05em;
  color: var(--mf-ink); text-shadow: var(--mf-value-glow);
}
.step.mf-c .pf-field :is(input[type="text"], select, textarea):focus {
  outline: none; border-bottom-color: var(--accent);
}
.step.mf-c .pf-field ::placeholder { color: #55524c; text-shadow: none; }
.step.mf-c .pf-field input[type="range"] { width: 100%; margin-top: 0.55rem; }
.step.mf-c .pf-val {
  float: right; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--mf-ink); text-shadow: var(--mf-value-glow);
}
#step-kit.landed #price-hint {
  margin: 0; background: var(--mf-cell); padding: 0.5rem 0.65rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.04em; color: var(--muted);
}

/* ---- totals bar — terminal summary line (variant C only) ---- */
.mf-totals { display: none; }
.step.mf-c .mf-totals {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 0.9rem; padding: 0.65rem 0.2rem 0.1rem; border-top: 1px solid var(--mf-line);
}
.mft { display: flex; align-items: baseline; gap: 0.55rem; }
.mft-l { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.mft b { font-family: var(--mono); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.05em; color: var(--mf-ink); text-shadow: var(--mf-value-glow); }
.mft b.placeholder { color: var(--muted); text-shadow: none; }



/* ============================================================
   VARIANT C v2 — ILLUMINATED FREIGHT TERMINAL. Monochrome white on near-black:
   edge-lit translucent panels, a luminous wireframe container as the centrepiece,
   values rendered as light, and slow powered-equipment motion (a barely-there
   sheen sweep, a breathing status). Everything scoped to .step.mf-c.
   ============================================================ */
/* ---- chassis: the whole terminal is powered on ---- */
.step.mf-c .mf-sheet {
  position: relative; overflow: hidden;
  background: radial-gradient(130% 100% at 50% 0%, #101116 0%, #0a0b0d 70%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 10px;
  padding: 1.05rem 1.2rem 0.85rem;
  box-shadow:
    0 0 30px -8px rgba(255, 255, 255, 0.16),      /* edge light emission */
    inset 0 0 70px rgba(255, 255, 255, 0.035),    /* faint internal volume */
    0 30px 70px rgba(0, 0, 0, 0.6);
}
/* corner brackets — precision-instrument furniture */
.step.mf-c .mf-sheet::before {
  content: ""; position: absolute; inset: 6px; pointer-events: none; z-index: 3;
  background:
    linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)) left 0 top 0 / 16px 1.5px,
    linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)) left 0 top 0 / 1.5px 16px,
    linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)) right 0 top 0 / 16px 1.5px,
    linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)) right 0 top 0 / 1.5px 16px,
    linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)) left 0 bottom 0 / 16px 1.5px,
    linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)) left 0 bottom 0 / 1.5px 16px,
    linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)) right 0 bottom 0 / 16px 1.5px,
    linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)) right 0 bottom 0 / 1.5px 16px;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}
/* the sheen — a slow, faint band that sweeps the terminal every ~9s */
.step.mf-c .mf-sheet::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.06) 50%, transparent 58%);
  transform: translateX(-130%);
  animation: mfc-sweep 9s linear infinite;
  mix-blend-mode: screen;
}
@keyframes mfc-sweep {
  0% { transform: translateX(-130%); }
  16% { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

/* ---- letterhead: lit title + hairline that emits ---- */
.step.mf-c .mf-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 10px 18px -14px rgba(255, 255, 255, 0.35);
}
.step.mf-c .mf-title { color: #fff; text-shadow: 0 0 8px rgba(255, 255, 255, 0.7), 0 0 28px rgba(255, 255, 255, 0.3); }
.step.mf-c .mf-ch { border-color: rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.8); box-shadow: 0 0 10px -2px rgba(255, 255, 255, 0.3), inset 0 0 8px rgba(255, 255, 255, 0.06); }

/* ---- edge-lit translucent panels (summary grid + form + package) ---- */
.step.mf-c :is(.mf-grid, .pf-grid) {
  gap: 4px; background: none; border: none; counter-reset: mfcell;
}
/* READ-ONLY data cells: quiet, unlit panels — clearly not fillable */
.step.mf-c .mf-cell {
  position: relative; border-radius: 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.006));
  border: 1px solid rgba(255, 255, 255, 0.13);
}
/* FILLABLE form cells: the lit-glass panels — glow marks what the user completes */
.step.mf-c .pf-field {
  position: relative; border-radius: 4px;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 55%, transparent 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 0 14px -4px rgba(255, 255, 255, 0.18),      /* outward light falloff */
    inset 0 0 18px rgba(255, 255, 255, 0.05),     /* inner luminance */
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
/* hover / focus: a fillable panel's backlight comes up */
.step.mf-c :is(.pf-field:hover, .pf-field:focus-within) {
  border-color: rgba(255, 255, 255, 0.5);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 55%, transparent 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  box-shadow: 0 0 22px -4px rgba(255, 255, 255, 0.3), inset 0 0 24px rgba(255, 255, 255, 0.08);
}
/* small glowing index numbers, top-right of every panel */
.step.mf-c :is(.mf-cell, .pf-field)::after {
  counter-increment: mfcell;
  content: counter(mfcell, decimal-leading-zero);
  position: absolute; top: 0.35rem; right: 0.45rem;
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.32);
  pointer-events: none;
}
.step.mf-c #price-hint {
  background: none; border: 1px dashed rgba(255, 255, 255, 0.16); border-radius: 4px;
  box-shadow: none; color: var(--muted);
}

/* ---- light as data: values are LIT, labels stay dim ---- */
.step.mf-c .pf-field :is(input[type="text"], select, textarea),
.step.mf-c .pf-val {
  color: #fff;
  text-shadow: 0 0 7px rgba(255, 255, 255, 0.75), 0 0 24px rgba(255, 255, 255, 0.28);
}
/* read-only values: plain white, no bloom — they're records, not fields */
.step.mf-c .mf-cell dd { color: #fff; }
.step.mf-c .mf-cell dd.placeholder { color: var(--muted); }
/* STATUS: READY — breathing indicator lamp */
.step.mf-c .mf-status-cell dd { display: flex; align-items: center; gap: 0.55rem; animation: mfc-status 3.4s ease-in-out infinite; }
.step.mf-c .mf-status-cell dd::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.95), 0 0 22px rgba(255, 255, 255, 0.5);
}
@keyframes mfc-status {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.62; }
}

/* ---- the wireframe container — centrepiece ---- */
.step.mf-c .mf-pkg {
  background:
    radial-gradient(100% 80% at 50% 100%, rgba(255, 255, 255, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008));
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  box-shadow: 0 0 18px -4px rgba(255, 255, 255, 0.2), inset 0 0 22px rgba(255, 255, 255, 0.05);
}
.step.mf-c .mf-pkg::before { color: rgba(255, 255, 255, 0.55); text-shadow: 0 0 8px rgba(255, 255, 255, 0.45); }
.step.mf-c .mf-pkg-icon { display: none; }
.mfw-scene { display: none; }
.step.mf-c .mfw-scene {
  display: block; position: relative; width: 96px; height: 92px; margin-top: 0.6rem;
  perspective: 460px; perspective-origin: 50% 30%;
}
/* breathing pool of light beneath the container */
.step.mf-c .mfw-scene::after {
  content: ""; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%);
  width: 82px; height: 20px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.35), transparent 70%);
  filter: blur(4px);
  animation: mfw-breathe 4.6s ease-in-out infinite;
}
@keyframes mfw-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.mfw-cube {
  position: relative; width: 54px; height: 54px; margin: 14px auto 0;
  transform-style: preserve-3d;
  animation: mfw-turn 16s linear infinite;
}
@keyframes mfw-turn {
  from { transform: rotateX(-24deg) rotateY(0deg); }
  to { transform: rotateX(-24deg) rotateY(360deg); }
}
.mfw-f {
  position: absolute; inset: 0; display: block;
  background: rgba(255, 255, 255, 0.025);
  box-shadow:
    inset 0 0 0 1.4px rgba(255, 255, 255, 0.7),   /* glowing wire edges */
    inset 0 0 16px rgba(255, 255, 255, 0.09),     /* faint inner volume */
    0 0 8px rgba(255, 255, 255, 0.18);
}
.mfw-fr { transform: translateZ(27px); }
.mfw-bk { transform: translateZ(-27px); }
.mfw-lf { transform: rotateY(90deg) translateZ(27px); }
.mfw-rt { transform: rotateY(-90deg) translateZ(27px); }
.mfw-tp { transform: rotateX(90deg) translateZ(27px); }
.mfw-bt { transform: rotateX(-90deg) translateZ(27px); }
/* barcode on a scanner bed */
.step.mf-c .mf-barcode {
  opacity: 0.95; color: #fff; height: 20px;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.45));
}
.step.mf-c .mf-barcode-num { color: rgba(255, 255, 255, 0.6); text-shadow: 0 0 8px rgba(255, 255, 255, 0.4); }

/* ---- form furniture: glowing slider tracks + handles ---- */
.step.mf-c .pf-field input[type="range"] {
  -webkit-appearance: none; appearance: none; height: 16px; background: transparent;
}
.step.mf-c .pf-field input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.15));
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}
.step.mf-c .pf-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; margin-top: -5px; border-radius: 50%;
  background: #fff; border: none;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 24px rgba(255, 255, 255, 0.4);
}

/* ---- files row + totals: lit summary line ---- */
.step.mf-c .mf-files { border-top: 1px solid rgba(255, 255, 255, 0.22); }
.step.mf-c .mf-files summary { color: rgba(255, 255, 255, 0.75); text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); }
.step.mf-c .mf-totals {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 -8px 18px -12px rgba(255, 255, 255, 0.35);  /* light spilling up off the rule */
}
.step.mf-c .mft b { color: #fff; }  /* read-only summary — no fillable glow */

/* powered equipment, not a rave — all motion off under reduced motion */
@media (prefers-reduced-motion: reduce) {
  .step.mf-c .mf-sheet::after { animation: none; opacity: 0; }
  .step.mf-c .mf-status-cell dd { animation: none; }
  .step.mf-c .mfw-scene::after { animation: none; }
  .mfw-cube { animation: none; transform: rotateX(-24deg) rotateY(32deg); }
}

/* ============================================================
   CH02 — BRAND PROFILE on the same illuminated terminal. The section is the
   readout; the glow rule carries over: accordions, chips, textareas and the
   two upload zones are FILLABLE → lit glass; the info box + status stay quiet.
   ============================================================ */
/* accordions = fillable panels (lit glass, backlight on hover/open) */
#step-brand .acc-group { display: grid; gap: 0.9rem; margin-top: 1.1rem; }
#step-brand .acc {
  margin: 0; border-radius: 4px;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 55%, transparent 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 0 14px -4px rgba(255, 255, 255, 0.18),
    inset 0 0 18px rgba(255, 255, 255, 0.05),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
#step-brand .acc:hover, #step-brand .acc[open] {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 22px -4px rgba(255, 255, 255, 0.3), inset 0 0 24px rgba(255, 255, 255, 0.08);
}
#step-brand .acc summary { border: none; }
#step-brand .acc .acc-title {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85); text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
#step-brand .acc .acc-sum { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; }
#step-brand .acc textarea {
  background: transparent; border: none; border-bottom: 1px solid transparent; border-radius: 0;
  font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.04em;
  color: #fff; text-shadow: 0 0 7px rgba(255, 255, 255, 0.75), 0 0 24px rgba(255, 255, 255, 0.28);
}
#step-brand .acc textarea:focus { outline: none; border-bottom-color: var(--accent); }
#step-brand .acc ::placeholder { color: #55524c; text-shadow: none; }
/* the nested product-info pf-grid inherits the shared lit form cells; give the
   accordion interior a hairline to sit them on */
#step-brand .acc-body { border-top: 1px solid rgba(255, 255, 255, 0.12); }

/* upload zones = fillable → lit glass with backlight on hover/drag */
#step-brand .sub.minor {
  font-family: var(--mono); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--mf-ink);
}
#step-brand .sub.minor .note { font-size: 0.52rem; letter-spacing: 0.12em; }
#step-brand .upload-zone {
  border-radius: 4px; border: 1px dashed rgba(255, 255, 255, 0.34);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.015) 55%, transparent 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  box-shadow: 0 0 14px -4px rgba(255, 255, 255, 0.16), inset 0 0 18px rgba(255, 255, 255, 0.045);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
#step-brand .upload-zone:hover, #step-brand .upload-zone.dragover {
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 24px -4px rgba(255, 255, 255, 0.32), inset 0 0 26px rgba(255, 255, 255, 0.08);
}
#step-brand .upload-zone strong {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
  color: #fff; text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}
/* native file inputs: quiet mono, terminal-styled select button */
#step-brand input[type="file"] { font-size: 0.6rem; letter-spacing: 0.08em; }
#step-brand input[type="file"]::file-selector-button {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
  background: none; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 3px;
  color: rgba(255, 255, 255, 0.8); padding: 0.32rem 0.6rem; margin-right: 0.6rem; cursor: pointer;
}
#step-brand input[type="file"]::file-selector-button:hover { border-color: rgba(255, 255, 255, 0.6); color: #fff; }

/* completed = quiet: a filled panel drops its glow (brand-editor marks .acc-sum
   with .filled; the upload zones expose their state in the DOM — pure :has()) */
#step-brand .acc:has(.acc-sum.filled),
#step-brand #logo-zone:has(#logo-loaded:not([hidden])),
#step-brand #asset-zone:has(+ #asset-list li) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.006));
  border-color: rgba(255, 255, 255, 0.15);
  border-style: solid;
  box-shadow: none;
}
/* still editable — a modest lift on hover, but no resting glow */
#step-brand .acc:has(.acc-sum.filled):hover,
#step-brand .acc:has(.acc-sum.filled)[open],
#step-brand #logo-zone:has(#logo-loaded:not([hidden])):hover,
#step-brand #asset-zone:has(+ #asset-list li):hover {
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: none;
}
/* their contents read as records now, not fields */
#step-brand .acc:has(.acc-sum.filled) textarea { text-shadow: none; }
#step-brand .acc:has(.acc-sum.filled) .acc-title { text-shadow: none; color: rgba(255, 255, 255, 0.7); }
#step-brand #logo-zone:has(#logo-loaded:not([hidden])) strong,
#step-brand #asset-zone:has(+ #asset-list li) strong { text-shadow: none; color: rgba(255, 255, 255, 0.75); }

/* CH00 — welcome page: intro, mini tutorial, AI keys + licence.
   All content is CENTRED, and the WHOLE sheet must fit one viewport with no scrolling
   (user requirement) — hence the tightened wrapper clearance + wide paragraph measures. */
#step-licence .mf-sheet { text-align: center; }
/* CH00-only: trim the generic wrapper spacing (24px top pad + 144px bar clearance +
   20px step margins is what pushed the sheet past one screen; the bar is 68px). */
main:has(#step-licence.active) { padding-top: 12px; padding-bottom: 80px; }
#step-licence.step { margin-top: 6px; margin-bottom: 6px; }
/* CH00 breaks out of the 760px column (same pattern as CH03/04/05): a wider sheet lets
   the paragraphs wrap in ~2 lines and the 7 tour tiles sit in ONE row → the whole
   welcome page fits a laptop viewport with no scrolling. */
#step-licence {
  width: min(1100px, calc(100vw - 3rem));
  margin-left: calc((100% - min(1100px, 100vw - 3rem)) / 2);
}
.wl-intro {
  font-size: 0.92rem; line-height: 1.55; color: rgba(255, 255, 255, 0.78);
  /* wide measure on purpose — fewer wrapped lines = less vertical space */
  max-width: 100ch; margin: 1.3rem auto 1.2rem;
}
.wl-intro strong { color: #fff; font-weight: 600; }

.wl-tour-lbl, .wl-keys-lbl {
  display: block; font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.7rem;
}
.wl-tour { margin-bottom: 0; }
.wl-steps {
  list-style: none; margin: 0; padding: 0;
  /* flex (not grid) so the wrapped last row centres like the rest of the page */
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
}
.wl-steps li {
  flex: 1 1 128px; min-width: 122px; max-width: 190px;
  display: flex; flex-direction: column; gap: 0.16rem;
  padding: 0.5rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 4px; background: rgba(255, 255, 255, 0.015);
}
.wl-steps b {
  font-family: var(--mono); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.38);
}
.wl-steps .wl-name { font-size: 0.86rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.wl-steps .wl-what { font-size: 0.7rem; line-height: 1.35; color: rgba(255, 255, 255, 0.45); }

/* extra vertical air around the keys section + its Save button (user request) —
   paid for by the wider paragraphs + tighter wrapper elsewhere */
.wl-keys { margin-top: 1.6rem; margin-bottom: 1.8rem; }
.wl-keys-note { max-width: 62rem; margin: 0.1rem auto 1rem; }
.wl-key-row {
  display: flex; align-items: center; gap: 0.9rem; text-align: left;
  max-width: 640px; margin-inline: auto;
  border-radius: 4px; padding: 0.55rem 0.9rem; margin-bottom: 0.5rem;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 55%, transparent 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 14px -4px rgba(255, 255, 255, 0.18), inset 0 0 18px rgba(255, 255, 255, 0.05);
  transition: box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.wl-key-id { flex: none; width: 6.4rem; display: flex; flex-direction: column; gap: 0.22rem; }
.wl-key-row .wl-key-lbl {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6);
}
/* quick jump to the provider's key page — saves hunting for where keys come from */
.wl-key-get {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.42); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-color: rgba(255, 255, 255, 0.25);
  width: fit-content; transition: color 0.15s ease;
}
.wl-key-get:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.6); }
.wl-key-row input {
  flex: 1; background: transparent; border: none; font-family: var(--mono);
  color: #fff; text-shadow: 0 0 7px rgba(255, 255, 255, 0.6); letter-spacing: 0.08em;
}
.wl-key-row input:focus { outline: none; }
.wl-key-state { flex: none; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
/* configured = completed = quiet (glow rule) */
.wl-key-row.set {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.006));
  border-color: rgba(255, 255, 255, 0.15); box-shadow: none;
}
.wl-key-row.set input { text-shadow: none; }
.wl-key-row.set .wl-key-state { color: rgba(255, 255, 255, 0.72); }
.wl-keys-foot { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.3rem; }
.wl-keys-foot #keys-status { margin: 0; }

/* licence row joins the centred column (same width as the key rows) */
#step-licence .wl-licence .field-row { margin-top: 0; max-width: 640px; margin-inline: auto; }

/* CH00 — the licence key is THE fillable field; it goes quiet once unlocked */
#step-licence .field-row {
  border-radius: 4px; padding: 0.6rem 1rem; margin-top: 1rem;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 55%, transparent 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 14px -4px rgba(255, 255, 255, 0.18), inset 0 0 18px rgba(255, 255, 255, 0.05);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
#step-licence .field-row input {
  background: transparent; border: none; font-family: var(--mono);
  color: #fff; text-shadow: 0 0 7px rgba(255, 255, 255, 0.6);
  letter-spacing: 0.14em;
}
#step-licence .field-row input:focus { outline: none; }
body:not(.locked) #step-licence .field-row {  /* unlocked = completed = quiet */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.006));
  border-color: rgba(255, 255, 255, 0.15); box-shadow: none;
}
body:not(.locked) #step-licence .field-row input { text-shadow: none; }

/* CH05 — the sheet must NEVER narrow the locked 1300px preview: no inline padding */
#step-page .mf-sheet { padding-left: 0; padding-right: 0; }
#step-page .mf-head { margin-left: 1.1rem; margin-right: 1.1rem; }

/* CH06 — instruction panels are read-only guidance: quiet */
#step-integrate .instr-panel { border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 4px; }

/* GENERATING STAGE — the step's document slides off LEFT and the box loader takes
   centre stage on the bare background (same presence as the CH01 drop box). */
.step.mf-c .mf-sheet { transition: transform 0.55s var(--ease), opacity 0.5s var(--ease); }
.step.mf-c.mf-generating .mf-sheet {
  transition: transform 0.55s var(--ease-in), opacity 0.5s var(--ease-in);
  transform: translateX(calc(-50vw - 55%));
  opacity: 0.92;
  pointer-events: none;
}
.mf-loading-stage {
  /* FIXED so the bay centres in the VIEWPORT, not the section's content box */
  position: fixed; inset: 0; z-index: 45;  /* under the wizard bar (50) */
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0; transition: opacity 0.4s var(--ease) 0.2s;
}
.mf-loading-stage.on { opacity: 1; }
/* NO container on the generating stage — the loader floats free on the page
   background (maskless now), centred in the viewport */
.mfs-bay { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mfs-bay .box-loader-wrap { transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) {
  .step.mf-c .mf-sheet { transition: none; }
  .step.mf-c.mf-generating .mf-sheet { transform: none; opacity: 0; }
  .mf-loading-stage { transition: none; }
}

/* CH03 — the reference block sits directly ON the sheet: no inner card, just
   vertical breathing room (the nested container read as a visual bug) */
.art-refstrength {
  background: none; border: none; box-shadow: none; border-radius: 0;
  padding: 2.6rem 0 1.6rem;
}
/* the edit phase has its own toolset — the intro cluster (incl. the generate
   button) belongs to the options phase only */
#step-art:has(#art-edit:not([hidden])) #art-intro { display: none; }

/* CH05 — breathing room for the editor chrome (the LOCKED 1300px preview itself
   stays full-bleed; only text/buttons get inset from the container edges) */
#step-page .pv-toolbar { padding-left: 1.1rem; padding-right: 1.1rem; }
#step-page #page-status { margin: 0.75rem 1.2rem 0.5rem; }
#step-page .mf-sheet { padding-bottom: 0.9rem; }
#step-page .mf-head { margin-bottom: 0.85rem; }

/* read-only lines stay quiet */
#step-brand .note, #step-brand .status { text-shadow: none; }


/* product form (step 1) */
.pf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1.25rem;
  margin-top: 0.5rem;
}
.pf-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  margin: 0;
  width: auto;
}
.pf-wide { grid-column: 1 / -1; }
.pf-val { color: var(--accent); font-weight: 700; margin-left: 0.3rem; }
.pf-grid select {
  font-family: var(--input);
  font-size: 0.85rem;
  color: var(--text);
  background: #141412;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.6rem 0.8rem;
}
.pf-grid input[type="range"] {
  accent-color: var(--accent);
  width: 100%;
  margin: 0.35rem 0 0;
}
#price-hint { margin: -0.3rem 0 0; }
@media (max-width: 700px) { .pf-grid { grid-template-columns: 1fr; } }

/* download progress */
.dl-bar {
  height: 6px;
  margin-top: 1rem;
  background: #1a1a18;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.dl-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.15s linear;
}