/* The interface fonts, served by the app (static/fonts/ui, OFL). font-display: block, so every page always draws in
   Geist: with Google's display=optional a page that missed the font's first ~100 ms stayed in the fallback, and the
   sidebar changed look from page to page. Latin + Latin-extended (₹, accents); each page preloads the Latin files. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 600; font-display: block; src: url("/fonts/ui/geist-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 600; font-display: block; src: url("/fonts/ui/geist-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: block; src: url("/fonts/ui/geist-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: block; src: url("/fonts/ui/geist-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* ==========================================================================
   Advanced Nature Studio: design system
   Layers, in order: tokens, base, shell, components, pages. Every colour, size, space, radius and duration
   comes from a token; nothing below the tokens uses a literal colour.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Type: Geist for the interface, Geist Mono for model names, sizes, ratios, costs and timers. */
  --font-sans: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", "Cascadia Mono", ui-monospace, Consolas, monospace;
  --t-11: 11px;  --lh-11: 14px;   /* badges and tags on images */
  --t-12: 12px;  --lh-12: 16px;   /* hints, captions, meta */
  --t-13: 13px;  --lh-13: 20px;   /* labels, buttons, secondary text */
  --t-14: 14px;  --lh-14: 20px;   /* body, inputs */
  --t-16: 16px;  --lh-16: 24px;   /* prose, dialog titles */
  --t-20: 20px;  --lh-20: 28px;   /* section titles */
  --t-24: 24px;  --lh-24: 32px;   /* page titles */
  --t-numeral: 48px;              /* the loading countdown, nowhere else */
  --w-regular: 400; --w-medium: 500; --w-semibold: 600;

  /* Space: 4px base */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* Sizes */
  --control-sm: 28px; --control: 32px; --control-lg: 40px;
  --sidebar: 232px; --rail: 56px; --topbar: 48px; --toolbar: 48px;
  --icon: 16px; --icon-sm: 14px;

  /* Shape: 4px small things, 6px controls, 8px panels and popups */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px;

  /* Motion: brief and purposeful. 1 = hover/press feedback, 2 = small things appearing, 3 = things that move
     (sliding toggles, the nav marker, popups), 4 = pages and images arriving. Spring only for movement. */
  --dur-1: 150ms; --dur-2: 200ms; --dur-3: 280ms; --dur-4: 420ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-spring: cubic-bezier(.3, 1.3, .5, 1);
  --rise: 6px;    /* how far things travel when they arrive */
  --stagger: 40ms;

  /* Colour (dark only; the app has no light theme): neutral greys with a faint green bias, one fern accent,
     three semantic colours */
  --bg: #101211;
  --surface: #161917;
  --subtle: #1d211f;
  --stage: #0b0c0b;
  --border: #272c29;
  --border-strong: #38403b;
  --text: #eceeed;
  --text-2: #b7beb9;
  --text-3: #8e9791;
  --ink: #eceeed;
  --on-ink: #101211;
  --accent: #79c39b;
  --accent-hover: #93d1af;
  --accent-soft: #1c2e24;
  --on-accent: #0d1a12;
  --success: #7cc690;
  --success-soft: #19291e;
  --warning: #e3b45c;
  --warning-soft: #2e2413;
  --error: #f08a7e;
  --error-soft: #331a17;
  --info: #8fb2ff;
  --focus: #79c39b;
  /* Over images: fixed, so it reads on any picture */
  --overlay: rgb(16 18 17 / .72);
  --sheen: rgb(121 195 155 / .35);   /* the light that crosses Generate on hover */
  --overlay-strong: rgb(16 18 17 / .6);
  --on-overlay: #ffffff;
  --on-overlay-dim: rgb(255 255 255 / .35);
  --scrim: rgb(0 0 0 / .6);
  --shadow-pop: 0 4px 12px rgb(0 0 0 / .4), 0 1px 2px rgb(0 0 0 / .3);
  --shadow-modal: 0 16px 40px rgb(0 0 0 / .55);
  /* Placeholders while something loads: a soft sweep from --skeleton to --skeleton-hi */
  --skeleton: #1b1f1d;
  --skeleton-hi: #242926;
  color-scheme: dark;
  interpolate-size: allow-keywords; /* lets disclosures animate to their natural height */
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--border-strong) transparent; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: var(--w-regular) var(--t-14)/var(--lh-14) var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Moving between pages cross-fades instead of flashing white; the sidebar stays still (see 6. Motion). */
@view-transition { navigation: auto; }
::selection { background: var(--accent-soft); color: var(--text); }

.mono { font-family: var(--font-mono); font-size: .93em; font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); }
.spacer { flex: 1; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.icon { width: var(--icon); height: var(--icon); flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: var(--icon-sm); height: var(--icon-sm); }
/* Section heading inside panels and steps */
.label { font-size: var(--t-13); line-height: var(--lh-13); font-weight: var(--w-semibold); color: var(--text); }

/* ---------- 3. Shell: sidebar, page header ---------- */
.shell {
  display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh;
  transition: grid-template-columns var(--dur-3) var(--ease-out);
}
.sidebar {
  position: sticky; top: 0; height: 100vh; height: 100dvh; z-index: 20;
  display: flex; flex-direction: column; gap: var(--s-6);
  padding: var(--s-4) var(--s-3); border-right: 1px solid var(--border); background: var(--bg);
  view-transition-name: sidebar;
}
.sidebar-top { display: flex; align-items: center; gap: var(--s-2); }
.brand { display: flex; align-items: center; gap: var(--s-2); min-width: 0; padding: var(--s-1); border-radius: var(--r-md); text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; width: var(--control-sm); height: var(--control-sm); flex: none;
  border-radius: var(--r-md); background: var(--ink); color: var(--on-ink);
  font: var(--w-semibold) 11px/1 var(--font-mono); letter-spacing: .02em;
}
.brand-name { font-size: var(--t-13); line-height: var(--lh-13); font-weight: var(--w-semibold); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .menu-btn { display: none; margin-left: auto; }
.sidebar-menu { flex: 1; display: flex; flex-direction: column; gap: var(--s-6); min-height: 0; }
.nav { display: grid; gap: 2px; }
.nav-link {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: var(--s-2); height: var(--control); padding: 0 var(--s-2);
  border-radius: var(--r-md); color: var(--text-2); text-decoration: none;
  font-size: var(--t-13); font-weight: var(--w-medium);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.nav-link:hover { background: var(--subtle); color: var(--text); }
.nav-link[aria-current="page"] { color: var(--text); }
.nav-link[aria-current="page"] .icon { color: var(--accent); }
/* The marker behind the current page's link; it travels to the new link when you change page. */
.nav-pill { position: absolute; inset: 0; z-index: -1; border-radius: var(--r-md); background: var(--subtle); view-transition-name: nav-pill; }
.nav-link .icon { transition: color var(--dur-2) var(--ease-out), scale var(--dur-2) var(--ease-spring); }
.nav-link:active .icon { scale: .88; }
.nav-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-badge { padding: 0 var(--s-2); border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); font-size: var(--t-12); line-height: var(--lh-12); }
.nav-sep { height: 1px; margin: var(--s-2); background: var(--border); }
/* Prompt Control: its link, a caret that opens its sub menu, and the sub menu (its pages, indented on a line). */
.nav-row { position: relative; }
.nav-row .nav-link { padding-right: var(--control); }
.nav-caret {
  position: absolute; top: 50%; right: var(--s-1); translate: 0 -50%; display: grid; place-items: center;
  width: var(--control-sm); height: var(--control-sm); padding: 0; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-3); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.nav-caret:hover { background: var(--border); color: var(--text); }
.nav-caret .icon { transition: rotate var(--dur-2) var(--ease-out); }
.nav-group:not(.is-open) .nav-caret .icon { rotate: -90deg; }
.nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-out); }
.nav-group.is-open .nav-sub { grid-template-rows: 1fr; }
.nav-sub-inner { display: grid; gap: 2px; min-height: 0; overflow: hidden; margin-left: calc(var(--s-2) + var(--icon) / 2); padding-left: var(--s-2); border-left: 1px solid var(--border); }
.nav-group.is-open .nav-sub-inner { padding-block: 2px; }
.nav-sublink { height: var(--control-sm); font-size: var(--t-13); }
.sidebar-foot { margin-top: auto; display: grid; gap: var(--s-4); }
.nav-collapse, .nav-account { width: 100%; border: 0; background: transparent; font-family: inherit; cursor: pointer; text-align: left; }
.nav-collapse .icon { transition: rotate var(--dur-3) var(--ease-out); }
.nav-account-name { color: var(--text); }
.nav-rail .nav-collapse .icon { rotate: 180deg; }

/* The icon rail: on tablets, and on desktops with the sidebar collapsed (UI sets .nav-rail on <html>). */
.nav-rail .shell { grid-template-columns: var(--rail) minmax(0, 1fr); }
.nav-rail .sidebar { padding: var(--s-3) var(--s-2); align-items: center; }
.nav-rail .brand-name, .nav-rail .nav-text, .nav-rail .nav-sep, .nav-rail .nav-caret { display: none; }
.nav-rail .nav-link { justify-content: center; width: 40px; padding: 0; }
.nav-rail .nav-sub-inner { margin-left: 0; padding-left: 0; border-left: 0; border-block: 1px solid var(--border); }
.nav-rail .nav-badge { position: absolute; top: 2px; right: -6px; padding: 0 3px; font-size: var(--t-11); line-height: var(--lh-11); }

.main { min-width: 0; padding: var(--s-6) var(--s-8) var(--s-8); }
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4);
  padding-bottom: var(--s-4); margin-bottom: var(--s-6); border-bottom: 1px solid var(--border);
}
.page-title { font-size: var(--t-24); line-height: var(--lh-24); font-weight: var(--w-semibold); letter-spacing: -.01em; text-wrap: balance; }
.page-lede { margin-top: var(--s-1); max-width: 68ch; color: var(--text-2); }

/* Tablet: the sidebar is always the icon rail (above), so there's nothing to collapse */
@media (max-width: 1279px) {
  .nav-collapse { display: none; }
  .main { padding: var(--s-6); }
}
/* Phone: a top bar with a menu that opens as a sheet */
@media (max-width: 767px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    height: auto; flex-direction: column; align-items: stretch; gap: 0;
    padding: 0 var(--s-4); border-right: 0; border-bottom: 1px solid var(--border);
  }
  .sidebar-top { height: var(--topbar); }
  .brand { padding: var(--s-1) 0; }
  .sidebar .menu-btn { display: inline-flex; }
  .sidebar-menu { display: none; padding: var(--s-2) 0 var(--s-4); gap: var(--s-4); border-top: 1px solid var(--border); }
  .sidebar.is-open .sidebar-menu { display: flex; animation: drop var(--dur-3) var(--ease-out); }
  .nav-link { justify-content: flex-start; width: auto; padding: 0 var(--s-2); height: var(--control-lg); }
  .nav-badge { position: static; padding: 0 var(--s-2); font-size: var(--t-12); line-height: var(--lh-12); }
  .sidebar-foot { display: none; }
  .main { padding: var(--s-4); }
  .page-head { margin-bottom: var(--s-4); }
}

/* ---------- 4. Components ---------- */
/* Buttons: primary (ink), secondary (bordered), ghost; one primary per view */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--control); padding: 0 var(--s-3); border: 1px solid transparent; border-radius: var(--r-md);
  font-size: var(--t-13); line-height: 1; font-weight: var(--w-medium); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), scale var(--dur-1) var(--ease-out);
}
/* Everything you can press gives a little under the click */
.btn:active:not(:disabled), .rail-btn:active:not(:disabled), .chip:active:not(:disabled), .choice-btn:active:not(:disabled), .photo-add:active, .recent-item:active { scale: .97; }
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 86%, var(--bg)); }
.btn-primary:active:not(:disabled) { background: color-mix(in srgb, var(--ink) 78%, var(--bg)); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--subtle); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--subtle); color: var(--text); }
.btn-secondary:active:not(:disabled), .btn-ghost:active:not(:disabled) { background: var(--border); }
.btn:disabled { background: var(--subtle); color: var(--text-3); border-color: transparent; cursor: not-allowed; }
.btn-ghost:disabled { background: transparent; }
.btn-danger { background: var(--error); color: var(--on-ink); }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--error) 86%, var(--text)); }
a.btn.is-disabled { background: var(--subtle); color: var(--text-3); border-color: transparent; cursor: not-allowed; pointer-events: none; }
.btn-sm { height: var(--control-sm); padding: 0 var(--s-2); font-size: var(--t-12); }
.btn-lg { height: var(--control-lg); padding: 0 var(--s-4); font-size: var(--t-14); }
.btn-block { width: 100%; }
.btn-icon { width: var(--control); padding: 0; }
.btn-sm.btn-icon { width: var(--control-sm); }
.is-spinning .icon { animation: spin 800ms linear infinite; }

.link { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--text-2); font-size: var(--t-13); font-weight: var(--w-medium); text-decoration: none; }
.link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.link-btn { padding: 0; border: 0; background: none; color: var(--accent); font-weight: var(--w-medium); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--accent-hover); }
.help-link { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--text-3); font-size: var(--t-12); line-height: var(--lh-12); font-weight: var(--w-regular); text-decoration: none; }
.help-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Fields and controls */
.field { display: grid; gap: var(--s-2); min-width: 0; }
.field-label { font-size: var(--t-13); line-height: var(--lh-13); font-weight: var(--w-medium); color: var(--text-2); }
.field-hint { font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.field-row { display: flex; gap: var(--s-2); }
.field-row > .select { flex: 1; }
.mini-field { display: grid; gap: var(--s-1); min-width: 0; }
.mini-field .field-label { font-size: var(--t-12); line-height: var(--lh-12); }
.control {
  width: 100%; height: var(--control); padding: 0 var(--s-3);
  border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text);
  font-size: var(--t-14); line-height: var(--lh-14);
  transition: border-color var(--dur-1) var(--ease-out);
}
.control:hover:not(:disabled) { border-color: var(--text-3); }
.control:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.control::placeholder { color: var(--text-3); }
.control:disabled { background: var(--subtle); color: var(--text-3); cursor: not-allowed; }
.control[aria-invalid="true"] { border-color: var(--error); }
textarea.control { height: auto; min-height: 64px; padding: var(--s-2) var(--s-3); resize: vertical; }
.select { position: relative; min-width: 0; }
.select select { appearance: none; padding-right: var(--s-8); cursor: pointer; }
.select > .icon { position: absolute; right: var(--s-2); top: 50%; translate: 0 -50%; color: var(--text-3); pointer-events: none; }
.check { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--control); font-size: var(--t-13); color: var(--text-2); cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
input[type="range"] { accent-color: var(--accent); }
.color-pick { width: 32px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }

/* Segmented control (toggles, tabs, quality) */
.seg { --n: 2; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 2px; border-radius: var(--r-md); background: var(--subtle); }
.seg:has(> label:nth-child(3)) { --n: 3; }
.seg::before {
  content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px - (var(--n) - 1) * 2px) / var(--n));
  border-radius: var(--r-sm); background: var(--surface); box-shadow: 0 0 0 1px var(--border); transition: translate var(--dur-4) var(--ease-spring); /* same move as the sidebar marker */
}
.seg:has(> label:nth-child(2) > input:checked)::before { translate: calc(100% + 2px) 0; }
.seg:has(> label:nth-child(3) > input:checked)::before { translate: calc(200% + 4px) 0; }
.seg:not(:has(input:checked))::before { opacity: 0; }
.seg-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.seg label { position: relative; display: block; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span {
  display: flex; align-items: center; justify-content: center; gap: var(--s-1); height: var(--control-sm); padding: 0 var(--s-3);
  border-radius: var(--r-sm); font-size: var(--t-13); font-weight: var(--w-medium); color: var(--text-2); white-space: nowrap;
  transition: color var(--dur-2) var(--ease-out);
}
.seg input:hover + span { color: var(--text); }
.seg input:checked + span { color: var(--text); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.seg-compact { display: inline-grid; }
.seg-compact span { height: 24px; padding: 0 var(--s-3); font-size: var(--t-12); }

/* Stepper (variants, slides) */
.stepper { display: flex; align-items: center; gap: var(--s-2); }
.stepper input { width: 56px; text-align: center; -moz-appearance: textfield; appearance: textfield; font-family: var(--font-mono); }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-max { font-size: var(--t-12); color: var(--text-3); }

/* Chips (ratio presets) */
.chip {
  height: var(--control-sm); padding: 0 var(--s-2); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-2); font-size: var(--t-12); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.chip:hover:not(:disabled) { border-color: var(--text-3); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.chip:disabled { background: var(--subtle); border-color: transparent; color: var(--text-3); cursor: not-allowed; }

/* Feedback */
.alert {
  display: grid; grid-template-columns: var(--icon) minmax(0, 1fr); gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-size: var(--t-13); line-height: var(--lh-13);
  animation: rise var(--dur-3) var(--ease-out);
}
.alert > .icon { margin-top: 2px; }
.alert strong { display: block; font-weight: var(--w-semibold); }
.alert-warn { background: var(--warning-soft); color: var(--warning); }
.alert-danger { background: var(--error-soft); color: var(--error); }
.alert-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.progress { position: relative; width: 100%; height: 2px; overflow: hidden; border-radius: 2px; background: var(--border); }
.progress::after { content: ""; position: absolute; inset: 0; width: 35%; background: var(--accent); animation: indeterminate 1.2s var(--ease-out) infinite; }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--on-overlay-dim); border-top-color: var(--on-overlay); animation: spin 800ms linear infinite; }
.count { font-size: var(--t-13); color: var(--text-3); font-variant-numeric: tabular-nums; }
.spend { padding-left: var(--s-4); border-left: 1px solid var(--border); font: var(--t-13)/var(--lh-13) var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.empty { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-16) var(--s-4); text-align: center; color: var(--text-3); }
.empty > .icon { width: 24px; height: 24px; margin-bottom: var(--s-2); }
.empty.is-error > .icon { color: var(--error); }
.empty-title { font-size: var(--t-16); line-height: var(--lh-16); font-weight: var(--w-semibold); color: var(--text); }
.empty-text { max-width: 48ch; margin-bottom: var(--s-3); }

/* Toasts */
.toasts { position: fixed; right: var(--s-6); bottom: var(--s-6); z-index: 50; display: grid; gap: var(--s-2); width: min(400px, calc(100vw - 2 * var(--s-4))); }
.toast {
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-pop);
  font-size: var(--t-13); line-height: var(--lh-13); animation: slide-in var(--dur-3) var(--ease-spring);
}
.toast.is-leaving { animation: slide-out var(--dur-2) var(--ease-in) forwards; }
.toast > span { flex: 1; }
.toast.is-error { border-color: color-mix(in srgb, var(--error) 40%, var(--border)); }
.toast.is-error > span { color: var(--error); }
@media (max-width: 767px) { .toasts { right: var(--s-4); bottom: var(--s-4); } }

/* Popups */
.dialog {
  width: min(560px, calc(100vw - 2 * var(--s-4))); max-height: calc(100dvh - 2 * var(--s-4)); padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-modal);
}
.dialog::backdrop { background: var(--scrim); }
.dialog[open] { animation: pop-in var(--dur-3) var(--ease-spring); }
.dialog[open]::backdrop { animation: fade-in var(--dur-3) var(--ease-out); }
.dialog.is-closing { animation: pop-out var(--dur-2) var(--ease-in) forwards; }
.dialog.is-closing::backdrop { animation: fade-out var(--dur-2) var(--ease-in) forwards; }
.dialog-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5); border-bottom: 1px solid var(--border); background: var(--surface); }
.dialog-title { font-size: var(--t-16); line-height: var(--lh-16); font-weight: var(--w-semibold); }
.modal-body { display: grid; gap: var(--s-4); padding: var(--s-5); }
.modal-note { font-size: var(--t-13); line-height: var(--lh-13); color: var(--text-2); }
.modal-status { font-size: var(--t-13); line-height: var(--lh-13); color: var(--text-2); }
.modal-status:empty { display: none; }
.modal-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-2); }
.modal-foot { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: end; gap: var(--s-3) var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.modal-foot > .btn { grid-column: 1 / -1; justify-self: end; }
.modal-prompt { max-height: 60vh; }
.modal-form { display: grid; gap: var(--s-4); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--s-2); }
.dialog-wide { width: min(880px, calc(100vw - 2 * var(--s-4))); }
.choice-btn {
  display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4); text-align: left; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text);
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.choice-btn strong { font-size: var(--t-14); line-height: var(--lh-14); font-weight: var(--w-semibold); transition: color var(--dur-1) var(--ease-out); }
.choice-btn span { font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.choice-btn:hover:not(:disabled) { background: var(--subtle); border-color: var(--text-3); }
.choice-btn:disabled { background: var(--subtle); border-color: transparent; color: var(--text-3); cursor: not-allowed; }
@media (max-width: 560px) { .modal-foot { grid-template-columns: minmax(0, 1fr); } }

/* Details blocks: metadata, notes, prompt, versions */
.meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
.meta-grid dt { font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); font-weight: var(--w-regular); }
.meta-grid dd { margin-top: 2px; font-size: var(--t-13); line-height: var(--lh-13); color: var(--text); overflow-wrap: anywhere; }
.cost-note { font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.notes-block { display: grid; gap: var(--s-2); }
.notes-block p { font-size: var(--t-13); line-height: var(--lh-13); color: var(--text-2); white-space: pre-wrap; }
.instruction { font-size: var(--t-13); line-height: var(--lh-13); color: var(--text); }
.slide-directions { padding-left: 1.4em; display: grid; gap: var(--s-1); font-size: var(--t-13); color: var(--text-2); }
.slide-directions .is-failed { color: var(--text-3); }
.slide-error { color: var(--error); }
.photo-strip { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.photo-strip img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); background: var(--skeleton); }
.disclosure { border-top: 1px solid var(--border); }
.disclosure > summary {
  display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) 0; list-style: none; cursor: pointer;
  font-size: var(--t-13); font-weight: var(--w-medium); color: var(--text-2);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary:hover { color: var(--text); }
.disclosure::details-content { block-size: 0; overflow: hidden; transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete; }
.disclosure[open]::details-content { block-size: auto; }
.disclosure .chev { margin-left: auto; transition: transform var(--dur-3) var(--ease-spring); }
.disclosure[open] .chev { transform: rotate(180deg); }
.prompt-text {
  max-height: 320px; overflow: auto; margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md); background: var(--subtle); color: var(--text-2);
  font: var(--t-12)/var(--lh-12) var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
.versions { display: grid; gap: var(--s-2); }
.version-strip { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.version { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--r-sm); }
.version img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--skeleton); transition: border-color var(--dur-1) var(--ease-out), translate var(--dur-2) var(--ease-out); }
.version:hover img { border-color: var(--text-3); translate: 0 -2px; }
.version[aria-current="true"] img { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.version-label { position: absolute; left: var(--s-1); bottom: var(--s-1); padding: 0 var(--s-1); border-radius: var(--r-sm); background: var(--overlay); color: var(--on-overlay); font-size: var(--t-11); line-height: var(--lh-12); }

/* Images: a frame sized to the picture's real shape */
.frame {
  --ratio: 1; --max-h: min(68vh, 760px);
  position: relative; overflow: hidden; width: min(100%, calc(var(--max-h) * var(--ratio))); aspect-ratio: var(--ratio);
  margin-inline: auto; border-radius: var(--r-sm); background: var(--skeleton);
}
.frame > img, .frame > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity var(--dur-4) var(--ease-out), scale var(--dur-4) var(--ease-out); }
.frame.is-loading > img { opacity: 0; }
.skeleton, .frame.is-loading {
  background: linear-gradient(100deg, var(--skeleton) 35%, var(--skeleton-hi) 50%, var(--skeleton) 65%) 100% 0 / 300% 100% var(--skeleton);
  animation: shimmer 1.6s linear infinite;
}
.skeleton { display: block; border-radius: var(--r-sm); }
.skeleton-text { height: 10px; margin-block: 3px; }
.frame-tag { position: absolute; top: var(--s-2); left: var(--s-2); padding: 2px var(--s-2); border-radius: var(--r-sm); background: var(--overlay); color: var(--on-overlay); font-size: var(--t-12); line-height: var(--lh-12); font-weight: var(--w-medium); pointer-events: none; }
.frame-tag.right { left: auto; right: var(--s-2); }
.viewport { display: grid; align-items: start; min-height: 320px; padding: var(--s-4); border-radius: var(--r-lg); background: var(--stage); }
.viewfinder { position: relative; }

/* Preview grid: every image of an output; captions underneath */
.preview-grid { width: 100%; display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.preview-grid.n-1 { grid-template-columns: minmax(0, 1fr); }
.preview-grid.n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.preview-grid.n-4.is-tall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.preview-grid.n-many { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.preview-grid.n-many.is-tall { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.grid-cell { min-width: 0; }
.preview-grid.is-entering .grid-cell { animation: rise var(--dur-4) var(--ease-out) backwards; } /* delays set per image by previewGrid() */
.grid-cell > .frame { border-radius: var(--r-sm); outline: 2px solid transparent; outline-offset: 6px; transition: outline-color var(--dur-2) var(--ease-out), outline-offset var(--dur-3) var(--ease-spring); }
.frame.is-pickable:hover > img { scale: 1.015; }
.preview-grid:not(.n-1) .grid-cell:hover > .is-pickable { outline-color: var(--border-strong); }
.preview-grid:not(.n-1) .grid-cell.is-selected > .is-pickable { outline-color: var(--accent); outline-offset: 3px; }
.is-pickable { cursor: pointer; }
.grid-caption { margin-top: var(--s-2); font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); transition: color var(--dur-2) var(--ease-out); }
.grid-cell.is-selected .grid-caption { color: var(--text); font-weight: var(--w-medium); }
.tile-busy {
  position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: var(--s-2);
  background: var(--overlay-strong); color: var(--on-overlay); font-size: var(--t-13); font-weight: var(--w-medium); text-align: center;
  backdrop-filter: blur(2px); animation: fade-in var(--dur-3) var(--ease-out);
}
.tile-timer { font-size: var(--t-12); color: var(--on-overlay); opacity: .8; }
@media (max-width: 760px) {
  .preview-grid.n-3, .preview-grid.n-4.is-tall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Product photos under an output */

/* Action rail beside an output's images */
.action-rail { display: grid; gap: var(--s-2); align-content: start; }
.rail-head { font-size: var(--t-13); line-height: var(--lh-13); font-weight: var(--w-semibold); color: var(--text); }
.rail-hint { font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.rail-btn {
  display: flex; align-items: center; gap: var(--s-2); width: 100%; height: var(--control); padding: 0 var(--s-3);
  border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text);
  font-size: var(--t-13); font-weight: var(--w-medium); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.rail-btn:hover:not(:disabled) { background: var(--subtle); }
.rail-btn .icon { transition: rotate var(--dur-3) var(--ease-spring); }
.rail-btn:hover:not(:disabled) .icon-refresh { rotate: 90deg; }
.rail-btn.is-primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.rail-btn.is-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 86%, var(--bg)); }
.rail-btn:disabled { background: var(--subtle); border-color: transparent; color: var(--text-3); cursor: not-allowed; }
.action-rail .help-link { margin-top: var(--s-1); }
/* The output's own facts in the rail: its words, how it was made, its product photos */
.rail-block { display: grid; gap: var(--s-1); margin-top: var(--s-1); padding-top: var(--s-3); border-top: 1px solid var(--border); }
.rail-label { font-size: var(--t-12); line-height: var(--lh-12); font-weight: var(--w-medium); color: var(--text-3); }
.rail-headline { font-size: var(--t-14); line-height: var(--lh-14); font-weight: var(--w-medium); color: var(--text); }
.rail-subline { font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-2); }
.rail-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px var(--s-3); margin: 0; font-size: var(--t-12); line-height: var(--lh-12); }
.rail-facts dt { color: var(--text-3); }
.rail-facts dd { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.rail-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-1); }
.rail-photos a { display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--skeleton); transition: border-color var(--dur-1) var(--ease-out); }
.rail-photos a:hover { border-color: var(--text-3); }
.rail-photos img { width: 100%; height: 100%; object-fit: cover; }

/* Tables (History) */
.table-wrap { container: runs / inline-size; }
.runs { width: 100%; border-collapse: collapse; font-size: var(--t-13); line-height: var(--lh-13); }
.runs th { padding: 0 var(--s-3) var(--s-2); text-align: left; font-size: var(--t-12); line-height: var(--lh-12); font-weight: var(--w-medium); color: var(--text-3); white-space: nowrap; border-bottom: 1px solid var(--border); }
.runs td { padding: var(--s-3); vertical-align: middle; border-bottom: 1px solid var(--border); color: var(--text-2); }
.runs th:first-child, .runs td:first-child { padding-left: 0; }
.runs th:last-child, .runs td:last-child { padding-right: 0; }
.runs .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.runs tr.is-link { cursor: pointer; transition: background var(--dur-1) var(--ease-out); }
.runs tr.is-entering { animation: rise var(--dur-3) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 18ms); }
.runs .is-skeleton td { cursor: default; }
.runs tr.is-link:hover td, .runs tr.is-link:focus-within td { background: var(--subtle); }
.c-run { white-space: nowrap; }
.c-day, .c-prompt { display: block; font-weight: var(--w-medium); color: var(--text); }
.c-prompt::first-letter { text-transform: uppercase; }
.c-sub { display: block; margin-top: 2px; font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.c-kind { display: block; font-weight: var(--w-medium); color: var(--text); }
.c-what { min-width: 220px; max-width: 420px; }
.notes-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.c-cost .usd { display: block; color: var(--text); font-family: var(--font-mono); }
.c-cost.is-estimate .usd { color: var(--text-2); }
.c-cost .inr { display: block; font: var(--t-12)/var(--lh-12) var(--font-mono); color: var(--text-3); }
.thumb-btn { display: block; border-radius: var(--r-sm); }
.thumb-stack { position: relative; display: inline-block; }
.thumb-btn img { width: 56px; height: 56px; max-width: none; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--skeleton); transition: scale var(--dur-3) var(--ease-out); }
.runs tr.is-link:hover .thumb-btn img { scale: 1.06; }
.count-badge { position: absolute; right: var(--s-1); bottom: var(--s-1); padding: 0 var(--s-1); border-radius: var(--r-sm); background: var(--overlay); color: var(--on-overlay); font-size: var(--t-11); line-height: var(--lh-12); pointer-events: none; }
@container runs (max-width: 720px) {
  .runs thead { display: none; }
  .runs, .runs tbody { display: block; }
  .runs tr { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
  .runs td { display: block; padding: 0; border: 0; }
  .runs td:first-child { padding: 0; }
  .runs .c-out { grid-row: 1 / span 3; grid-column: 1; }
  .runs .c-run, .runs .c-what, .runs .c-setup { grid-column: 2; min-width: 0; }
  .runs .c-cost { grid-column: 3; grid-row: 1; }
}

/* ---------- 5. Pages ---------- */

/* Generate (rebuilt 2026-10-14): one screen, no page scroll on a desktop. A bar on top, three panels read left to
   right (01 Products, 02 Look, 03 Format, then Generate), the recent outputs along the bottom. A panel scrolls
   inside only when a window is too short for it. */
.gen-page { height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: var(--s-3); overflow: hidden; padding-top: var(--s-4); padding-bottom: var(--s-4); }
.gen {
  flex: 1 1 auto; min-height: 0; display: grid; gap: var(--s-3);
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.12fr) minmax(0, 1.04fr); grid-template-rows: auto minmax(0, 1fr);
}
.gen-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-3) var(--s-5); min-width: 0; padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); }
.gen-bar .page-title { font-size: var(--t-20); line-height: var(--lh-20); }
.gen-type { flex: none; width: 200px; }
.post-count { display: flex; flex: none; align-items: center; gap: var(--s-2); }
.post-count .stepper { gap: var(--s-1); }
.post-count .stepper input { width: 44px; height: var(--control-sm); }
.gen-bar-hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-12); color: var(--text-3); }
.gen-bar .step-help { flex: none; margin-left: 0; }

.gen-panel {
  display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  padding: var(--s-3) var(--s-4) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  animation: rise var(--dur-4) var(--ease-out) backwards; animation-delay: calc((sibling-index() - 1) * 60ms);
}
.panel-head { display: flex; flex: none; align-items: center; gap: var(--s-2); min-height: var(--control-sm); }
.panel-num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); font-size: var(--t-11); }
.panel-head .step-opt, .panel-head .step-help { margin-left: auto; }
.panel-head .step-opt { flex: none; white-space: nowrap; }
.panel-head .step-opt:empty { display: none; }
.panel-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-12); color: var(--text-3); }
.panel-head .slides-same { margin-left: auto; }
.look-target { margin-left: auto; padding: 0 var(--s-2); border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); font-size: var(--t-12); line-height: 20px; animation: pop-in var(--dur-2) var(--ease-spring); }
.look-target:empty { display: none; }
.look-target:not(:empty) + .step-help { margin-left: var(--s-2); }

/* 01 Products: up to four slots (a product large, or a dashed slot that opens the picker), then the recently used */
.slot-grid { flex: 1 1 auto; min-height: 120px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: var(--s-2); }
.slot-grid[data-slots="1"] { grid-template-columns: minmax(0, 1fr); }
.slot { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border-radius: var(--r-md); }
.slot.is-filled { border: 1px solid var(--border); background: var(--bg); }
.slot.is-new { animation: pop-in var(--dur-3) var(--ease-spring); }
.slot.is-flagged { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }
.slot-img { flex: 1 1 auto; min-height: 0; display: grid; overflow: hidden; background: var(--skeleton); }
.slot-img img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-4) var(--ease-out); }
.slot.is-filled:hover .slot-img img { scale: 1.04; }
.slot-text { display: grid; min-width: 0; padding: var(--s-1) var(--s-2) var(--s-2); }
.slot-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-13); line-height: var(--lh-13); font-weight: var(--w-medium); }
.slot-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.slot .slot-info { top: var(--s-2); right: auto; left: var(--s-2); }
.slot .slot-x { top: var(--s-2); right: var(--s-2); }
.slot .slot-info, .slot .slot-x { transition: opacity var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); }
@media (hover: hover) {
  .slot:not(:hover, :focus-within) .slot-info, .slot:not(:hover, :focus-within) .slot-x { opacity: 0; }
}
.slot.is-empty {
  display: grid; place-content: center; justify-items: center; gap: var(--s-1); padding: var(--s-3);
  border: 1px dashed var(--border-strong); background: transparent; color: var(--text-2); font: inherit; text-align: center; cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.slot.is-empty:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
div.slot.is-note { grid-area: 1 / 1 / -1 / -1; cursor: default; font-size: var(--t-13); color: var(--text-3); }
.slot.is-error { color: var(--error); }

.quick { flex: none; display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--border); }
.quick-head { display: flex; align-items: center; gap: var(--s-2); min-height: var(--control-sm); }
.quick-where { font-size: var(--t-12); color: var(--accent); }
.quick-head .btn { margin-left: auto; }
.quick-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); }
.quick-item { display: grid; gap: 2px; min-width: 0; padding: 0; border: 0; background: none; color: var(--text-3); font: inherit; text-align: left; cursor: pointer; }
.quick-img {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--skeleton);
  transition: border-color var(--dur-1) var(--ease-out), translate var(--dur-2) var(--ease-out);
}
.quick-img img { width: 100%; height: 100%; object-fit: cover; }
.quick-item:hover:not(:disabled) .quick-img { border-color: var(--text-3); translate: 0 -2px; }
.quick-item[aria-pressed="true"] .quick-img { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.quick-check {
  position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--overlay); color: var(--on-overlay); opacity: 0; scale: .6;
  transition: opacity var(--dur-1) var(--ease-out), scale var(--dur-2) var(--ease-spring), background var(--dur-1) var(--ease-out);
}
.quick-check .icon { width: 12px; height: 12px; }
.quick-item:hover:not(:disabled) .quick-check, .quick-item[aria-pressed="true"] .quick-check { opacity: 1; scale: 1; }
.quick-item[aria-pressed="true"] .quick-check { background: var(--accent); color: var(--on-accent); }
.quick-item[aria-pressed="true"] .quick-name { color: var(--text); }
.quick-item:disabled { opacity: .45; cursor: not-allowed; }
.quick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-11); line-height: var(--lh-11); }
/* A carousel needs the height for its slides: the names are in the tooltips */
.is-carousel .quick-name { display: none; }
.quick-empty { grid-column: 1 / -1; font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }

.drop {
  display: grid; place-content: center; justify-items: center; gap: var(--s-1); width: 100%; min-height: 148px;
  padding: var(--s-6) var(--s-4); border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); text-align: center; cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.drop:hover, .drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.drop-icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: var(--s-1); border-radius: var(--r-md); background: var(--subtle); color: var(--text-2); transition: translate var(--dur-3) var(--ease-spring), background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.drop:hover .drop-icon, .drop.is-over .drop-icon, .slot.is-empty:hover .drop-icon { translate: 0 -3px; background: var(--surface); color: var(--accent); }
.drop-title { font-weight: var(--w-medium); }
.drop-title u { text-decoration-color: var(--accent); text-underline-offset: 3px; }
.drop-hint { max-width: 36ch; font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.photo-tag { position: absolute; left: var(--s-1); bottom: var(--s-1); padding: 0 var(--s-2); border: 0; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-size: var(--t-11); line-height: 18px; font-weight: var(--w-medium); }
.photo-x { position: absolute; top: var(--s-1); right: var(--s-1); display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-sm); background: var(--overlay); color: var(--on-overlay); cursor: pointer; }
.photo-x:hover { background: var(--error); }
.photo-meta { font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); overflow-wrap: anywhere; }
.photo-meta.is-warn { color: var(--warning); }
.product-flag { color: var(--warning); }

/* Catalogue picker: choose one or more; the number is the order they're sent in */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--s-3); max-height: min(60vh, 560px); overflow-y: auto; padding: 2px; }
.cat-card {
  position: relative; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text);
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out);
}
.cat-card.skeleton { min-height: 210px; }
.cat-card:hover:not(.is-disabled, .is-full) { border-color: var(--accent); background: var(--accent-soft); }
.cat-card.is-current { outline: 2px solid var(--accent); outline-offset: -2px; }
.cat-card.is-full { opacity: .55; }
.cat-pick { display: grid; align-content: start; gap: 2px; width: 100%; padding: var(--s-2); border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cat-pick:disabled { cursor: not-allowed; color: var(--text-3); }
.is-full .cat-pick { cursor: not-allowed; }
.cat-info {
  position: absolute; top: var(--s-3); right: var(--s-3); display: grid; place-items: center; width: var(--control-sm); height: var(--control-sm);
  border-radius: 50%; background: var(--overlay); color: var(--on-overlay); transition: background var(--dur-1) var(--ease-out);
}
.cat-info:hover { background: var(--accent); color: var(--on-accent); }
.pick-badge {
  position: absolute; top: var(--s-3); left: var(--s-3); display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 var(--s-1);
  border-radius: 12px; background: var(--accent); color: var(--on-accent); font-size: var(--t-12); font-weight: var(--w-semibold); pointer-events: none;
}
.pick-badge:empty { display: none; }
.cat-img { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: var(--s-1); overflow: hidden; border-radius: var(--r-sm); background: var(--subtle); }
.cat-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-none { font-size: var(--t-12); color: var(--text-3); }
.cat-name { font-weight: var(--w-medium); }
.cat-sub { font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.cat-tags { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.cat-status { padding: 0 var(--s-1); border-radius: var(--r-sm); background: var(--warning-soft); color: var(--warning); }
.cat-status.is-incomplete { background: var(--subtle); color: var(--text-2); }
.cat-status.is-complete { background: var(--success-soft); color: var(--success); }
.pick-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--border); }
.pick-count { min-width: 0; }
.cat-foot { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--border); }
.cat-issues summary { cursor: pointer; font-size: var(--t-13); color: var(--warning); }
.cat-issues ul { margin: var(--s-2) 0 0; padding-left: var(--s-5); font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-2); }

.dims-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.dims-field legend { display: flex; width: 100%; padding: 0; margin-bottom: var(--s-2); }
.dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.dim { position: relative; display: grid; gap: var(--s-1); font-size: var(--t-12); color: var(--text-3); }
.dim .control { padding-right: var(--s-6); font-family: var(--font-mono); -moz-appearance: textfield; }
.dim .control::-webkit-inner-spin-button { display: none; }
.dim .control:read-only { background: var(--subtle); color: var(--text-2); }
.dim-unit { position: absolute; right: var(--s-3); bottom: 0; line-height: var(--control); pointer-events: none; }

/* Aspect ratio: a logarithmic slider with the Instagram feed range marked */
.aspect { gap: var(--s-3); }
.aspect-head { display: flex; align-items: center; gap: var(--s-3); }
.aspect-head .field-label { margin-right: auto; }
.aspect-shape { display: grid; place-items: center; width: 24px; height: 24px; }
.aspect-shape::before { content: ""; width: var(--w, 20px); height: var(--h, 20px); border: 1.5px solid var(--text-2); border-radius: 2px; background: var(--subtle); transition: width var(--dur-2) var(--ease-out), height var(--dur-2) var(--ease-out); }
.ratio-input { width: 88px; text-align: center; font-family: var(--font-mono); }
.ratio-slider { position: relative; padding: var(--s-2) 0 22px; }
.ratio-track { position: relative; height: 4px; margin: 0 9px; border-radius: 2px; background: var(--border); }
.ig-band { position: absolute; top: -2px; bottom: -2px; border-radius: 2px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
.tick { position: absolute; top: -4px; width: 1px; height: 12px; translate: -50% 0; background: var(--text-3); }
.tick.minor { top: -1px; height: 6px; opacity: .5; }
.tick-label { position: absolute; top: 16px; left: 50%; translate: -50% 0; font: var(--t-11)/1 var(--font-mono); color: var(--text-3); white-space: nowrap; }
#ratio-range { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 20px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
#ratio-range::-webkit-slider-runnable-track { height: 20px; background: transparent; }
#ratio-range::-moz-range-track { height: 20px; background: transparent; }
#ratio-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); }
#ratio-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); }
#ratio-range:focus-visible { outline: none; }
#ratio-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus); }
#ratio-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus); }
.ratio-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.ratio-status, .ratio-plan { font-size: var(--t-12); line-height: var(--lh-12); }
/* The Instagram check: an icon beside the ratio box, its words in the tooltip */
.ratio-status { display: inline-grid; place-items: center; width: var(--control-sm); height: var(--control-sm); }
.ratio-plan { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ratio-status:empty, .ratio-plan:empty { display: none; }
.ratio-status.is-ok { color: var(--success); }
.ratio-status.is-warn { color: var(--warning); }
.ratio-status.is-error { color: var(--error); }
.ratio-plan { color: var(--text-3); }
.ratio-plan.is-crop { color: var(--warning); }
.ratio-plan.is-error { color: var(--error); }

/* Carousel: a row per slide; the active one opens to its direction and products (Look works on it too) */
.slide-rows { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--s-1); margin: 0; padding: 0; list-style: none; overflow-y: auto; scrollbar-width: thin; }
.slide-row { flex: none; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); transition: border-color var(--dur-1) var(--ease-out); }
.slide-row:hover { border-color: var(--border-strong); }
.slide-row.is-active { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.slide-head { display: flex; align-items: center; gap: var(--s-2); height: 26px; padding-right: var(--s-2); }
.slide-open {
  display: flex; flex: 1; align-items: center; gap: var(--s-2); min-width: 0; height: 100%; padding: 0 0 0 var(--s-2);
  border: 0; background: none; color: var(--text-2); font: inherit; font-size: var(--t-12); text-align: left; cursor: pointer;
}
.slide-num { display: grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: var(--r-sm); background: var(--subtle); color: var(--text-2); font: var(--t-11)/1 var(--font-mono); transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.slide-row.is-active .slide-num { background: var(--accent); color: var(--on-accent); }
.slide-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slide-preview.is-empty { color: var(--text-3); }
.slide-row.is-active .slide-preview { color: var(--text); font-weight: var(--w-medium); }
.slide-tag { flex: none; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 var(--s-1); border-radius: var(--r-sm); background: var(--subtle); color: var(--text-2); font-size: var(--t-11); line-height: 18px; }
.slide-thumbs { display: flex; flex: none; gap: 2px; cursor: pointer; }
.slide-thumbs > img { width: 22px; height: 22px; margin-left: -8px; object-fit: cover; border: 1px solid var(--bg); border-radius: var(--r-sm); background: var(--skeleton); }
.slide-thumbs > img:first-child { margin-left: 0; }
/* The open slide's products: each a small photo that takes it out on click, then Add a product */
.slide-products { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); min-width: 0; }
.slide-thumb { position: relative; display: grid; width: 28px; height: 28px; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--skeleton); cursor: pointer; }
.slide-thumb.is-over { border-color: var(--warning); }
.slide-thumb img { width: 100%; height: 100%; object-fit: cover; }
.slide-thumb .icon { position: absolute; inset: 0; width: 100%; height: 100%; padding: 6px; background: var(--error); color: var(--on-overlay); opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
.slide-thumb:hover .icon, .slide-thumb:focus-visible .icon { opacity: 1; }
.slide-add {
  display: inline-flex; align-items: center; gap: var(--s-1); height: 28px; padding: 0 var(--s-3) 0 var(--s-2);
  border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: none; color: var(--text-2); font: inherit; font-size: var(--t-12); font-weight: var(--w-medium); cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.slide-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.slide-add.is-empty { border-color: var(--accent); color: var(--accent); }
.slide-none { font-size: var(--t-11); color: var(--text-3); }
.slide-row.is-missing .slide-none { color: var(--warning); }
.slide-detail { display: grid; gap: var(--s-2); padding: 0 var(--s-2) var(--s-2); animation: rise var(--dur-3) var(--ease-out); }
.slide-input.control { height: 48px; padding: 6px var(--s-2); resize: none; font-size: var(--t-13); line-height: var(--lh-13); }
.product-chip {
  display: inline-flex; align-items: center; gap: var(--s-1); max-width: 100%; height: var(--control-sm); padding: 0 0 0 2px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); font-size: var(--t-12);
}
.product-chip img { flex: none; width: 22px; height: 22px; object-fit: cover; border-radius: var(--r-sm); background: var(--skeleton); }
.product-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--w-medium); }
.product-chip .product-flag { font-weight: var(--w-semibold); }
.product-chip.is-over { border-color: var(--warning); }
.product-chip-x { flex: none; display: grid; place-items: center; width: 24px; height: 100%; padding: 0; border: 0; border-radius: 0 var(--r-md) var(--r-md) 0; background: none; color: var(--text-3); cursor: pointer; }
.product-chip-x:hover { background: var(--error-soft); color: var(--error); }
.chip-add {
  display: inline-flex; align-items: center; gap: var(--s-1); height: var(--control-sm); padding: 0 var(--s-2);
  border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: transparent; color: var(--text-2); font-size: var(--t-12); cursor: pointer;
}
.chip-add.is-empty { border-color: var(--accent); color: var(--accent); }
.chip-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.chip-note { font-size: var(--t-12); line-height: var(--control-sm); color: var(--text-3); }
/* 02 Look: the brief, style chips, directions by group (one click each), notes filling what's left */
.look-field { display: grid; flex: none; gap: 6px; min-width: 0; }
#panel-look { gap: 10px; }
.look-label { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
.look-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-12); color: var(--text-3); }
.look-edit { display: inline-grid; place-items: center; margin-left: auto; color: var(--text-3); transition: color var(--dur-1) var(--ease-out); }
.look-edit:hover { color: var(--accent); }
.chip-grid { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.style-chip, .dir-pick { height: 22px; padding: 0 6px; }
.chip[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
/* A line per group (Angle, Framing, Light, Mood…): its name in a narrow column, so the chips line up */
.dir-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px var(--s-2); align-items: start; }
.dir-row { display: contents; }
.dir-row-name { white-space: nowrap; font-size: var(--t-11); line-height: 22px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.dir-row-chips { display: flex; flex-wrap: wrap; gap: 3px var(--s-1); }
.look-notes { flex: 1 1 0; min-height: 56px; grid-template-rows: auto minmax(36px, 1fr); }
.look-notes #notes { height: 100%; min-height: 36px; resize: none; }
.note-picks:not([hidden]) { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.note-picks .product-chip, .note-picks .chip-add { height: 24px; }

/* 03 Format: model and quality, shape, room for the text, then what it costs and Generate */
.quality-field { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-1); }
.space { gap: var(--s-2); }
.space-head { display: flex; align-items: center; gap: var(--s-2); }
.space-toggle { margin-left: auto; }
.space-pick { display: flex; align-items: center; gap: var(--s-3); }
.space-pad {
  --ratio: 1; position: relative; flex: none; display: grid; grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr));
  width: calc(56px * var(--ratio)); height: 56px; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg);
  transition: width var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out);
}
.space-pad.is-auto { background: repeating-linear-gradient(135deg, var(--bg) 0 3px, var(--accent-soft) 3px 6px); }
.space-pad.is-off { opacity: .4; }
.space-zone { position: absolute; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); pointer-events: none; transition: left var(--dur-2) var(--ease-out), top var(--dur-2) var(--ease-out), width var(--dur-2) var(--ease-out), height var(--dur-2) var(--ease-out); }
.space-cell { position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.space-cell:disabled { cursor: not-allowed; }
.space-cell::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; translate: -50% -50%; border-radius: 50%;
  background: var(--border-strong); transition: background var(--dur-1) var(--ease-out), scale var(--dur-2) var(--ease-spring);
}
.space-cell:hover:not(:disabled)::after { background: var(--text-2); scale: 1.5; }
.space-cell[aria-checked="true"]::after { background: var(--accent); scale: 1.6; }
.space-edges { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.space-edge { height: 26px; }
.space-edge[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.action-bar { display: grid; flex: none; gap: var(--s-2); margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--border); }
.action-facts { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.action-facts .mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.action-estimate { flex: none; color: var(--text-2); }
.action-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; }
.action-row .btn-lg { padding: 0 var(--s-3); font-size: var(--t-13); }
.action-row .btn-go { gap: 6px; padding: 0 var(--s-2); }
.action-hint { text-align: center; font-size: var(--t-12); line-height: var(--lh-12); color: var(--warning); }
.action-hint.is-ready { color: var(--text-3); }
.action-hint kbd { padding: 0 var(--s-1); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--r-sm); font: var(--t-11)/14px var(--font-mono); color: var(--text-2); }
/* Generate: a sheen crosses it on hover, and it pulses once when it becomes ready */
.btn-go { position: relative; overflow: hidden; isolation: isolate; }
.btn-go::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, var(--sheen) 50%, transparent 70%); translate: -110% 0; }
.btn-go:hover:not(:disabled)::after { translate: 110% 0; transition: translate 700ms var(--ease-out); }
.btn-go.is-ready { animation: ready var(--dur-4) var(--ease-spring); }

/* The recent outputs: the last 10, each opens; Reuse loads its settings */
.gen-recent { flex: none; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); }
.gen-recent-head { display: grid; align-content: space-between; gap: var(--s-1); }
.gen-recent-strip { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--s-2); min-width: 0; }
.gen-recent-item { position: relative; min-width: 0; animation: rise var(--dur-3) var(--ease-out) backwards; animation-delay: calc(240ms + var(--i, 0) * 30ms); }
.gen-recent-open {
  position: relative; display: block; width: 100%; height: clamp(72px, 9vh, 120px); padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--skeleton);
  transition: border-color var(--dur-1) var(--ease-out), translate var(--dur-2) var(--ease-out);
}
.gen-recent-open img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-4) var(--ease-out); }
.gen-recent-open:hover { border-color: var(--text-3); translate: 0 -2px; }
.gen-recent-open:hover img { scale: 1.06; }
.gen-recent-item.is-current .gen-recent-open { border-color: var(--accent); }
.gen-recent-meta {
  position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; gap: var(--s-1);
  padding: 14px var(--s-1) 3px; background: linear-gradient(transparent, var(--overlay)); color: var(--on-overlay);
  font-size: var(--t-11); line-height: var(--lh-11); text-align: left;
}
.gen-recent-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The name shows on hover (the tile is small); the time always */
.gen-recent-item:not(:hover, :focus-within) .gen-recent-name { display: none; }
.gen-recent-when { flex: none; margin-left: auto; opacity: .85; }
.gen-recent-badge { position: absolute; top: 3px; left: 3px; padding: 0 4px; border-radius: var(--r-sm); background: var(--overlay); color: var(--on-overlay); font-size: var(--t-11); line-height: 16px; }
.gen-recent-reuse {
  position: absolute; top: 3px; right: 3px; display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px;
  border: 0; border-radius: var(--r-sm); background: var(--ink); color: var(--on-ink); font: inherit; font-size: var(--t-11); cursor: pointer;
  transition: opacity var(--dur-1) var(--ease-out), translate var(--dur-2) var(--ease-out);
}
.gen-recent-reuse .icon { width: 11px; height: 11px; }
@media (hover: hover) {
  .gen-recent-item:not(:hover, :focus-within) .gen-recent-reuse { opacity: 0; translate: 0 -3px; }
}

/* Short desktop windows (768px laptops): a little tighter, so ten slides still fit without scrolling */
@media (min-width: 1100px) and (max-height: 799px) {
  .slide-head { height: 24px; }
  .slide-rows { gap: 2px; }
  .quick-name { display: none; }
  .gen-recent-open { height: 64px; }
  #panel-format { gap: var(--s-2); }
}

/* Smaller windows: the panels stack and the page scrolls */
@media (max-width: 1099px) {
  .gen-page { height: auto; overflow: visible; }
  .gen { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  #panel-format { grid-column: 1 / -1; }
  .gen-panel { overflow: visible; }
  .slot-grid { min-height: 0; grid-auto-rows: auto; }
  .slot-img { flex: none; aspect-ratio: 1; }
  .slide-rows { overflow: visible; }
}
@media (max-width: 767px) {
  .gen { grid-template-columns: minmax(0, 1fr); }
  .gen-bar { flex-wrap: wrap; }
  .gen-bar-hint { flex-basis: 100%; white-space: normal; }
  .gen-recent { grid-template-columns: minmax(0, 1fr); }
  .gen-recent-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gen-recent-open { height: auto; aspect-ratio: 1; }
  .format-row { grid-template-columns: minmax(0, 1fr); }
  #panel-format .action-bar { position: sticky; bottom: 0; padding-bottom: var(--s-3); background: var(--surface); }
}

/* Loading: photos, the countdown (amber once past the expected time) and a bar that fills to it */
.load-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }
.load-card { width: min(480px, 100%); display: grid; justify-items: center; gap: var(--s-3); text-align: center; }
.load-card > * { animation: rise var(--dur-4) var(--ease-out) backwards; animation-delay: calc((sibling-index() - 1) * 50ms); }
.load-photos { display: flex; gap: var(--s-2); margin-bottom: var(--s-2); }
.load-photos img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--skeleton); animation: pop-in var(--dur-4) var(--ease-spring) backwards; animation-delay: calc((sibling-index() - 1) * 60ms); }
/* The main photo breathes gently while the images are being made. */
.load-photos img:first-child { width: 120px; height: 120px; animation: pop-in var(--dur-4) var(--ease-spring) backwards, breathe 3.2s ease-in-out var(--dur-4) infinite; }
.load-card .label { color: var(--text-2); font-weight: var(--w-medium); }
.load-timer { font: var(--w-medium) var(--t-numeral)/1 var(--font-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.load-timer.is-over { color: var(--warning); }
.load-timer, .load-expect { transition: color var(--dur-4) var(--ease-out); }
.load-bar { width: 100%; height: 2px; overflow: hidden; border-radius: 2px; background: var(--border); }
.load-bar span {
  display: block; width: 0; height: 100%; transition: width 1s linear;
  background: linear-gradient(90deg, var(--accent) 30%, color-mix(in srgb, var(--accent) 45%, var(--surface)) 50%, var(--accent) 70%) 100% 0 / 300% 100%;
  animation: shimmer 1.8s linear infinite;
}
.load-expect { min-height: var(--lh-13); font-size: var(--t-13); line-height: var(--lh-13); color: var(--text-2); }
.load-settings { font: var(--t-12)/var(--lh-12) var(--font-mono); color: var(--text-3); }
.load-card .alert { width: 100%; text-align: left; }

/* Output: header, images with the actions beside them, product photos and notes underneath */
.out-page { height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: var(--s-4); overflow: hidden; padding-bottom: var(--s-4); }
.out-head { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); }
.out-title { display: flex; align-items: baseline; gap: var(--s-3); min-width: 0; }
.out-title .muted { font-size: var(--t-13); }
.version-step { display: inline-flex; align-items: center; gap: 2px; font-size: var(--t-13); font-weight: var(--w-medium); color: var(--text-2); white-space: nowrap; }
.version-step:empty { display: none; }
.stage-main { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: var(--s-4); align-items: start; }
.stage-main:has(> .action-rail[hidden]) { grid-template-columns: minmax(0, 1fr); }
.out-main { flex: 1 1 auto; min-height: 0; }
.out-main > .action-rail { max-height: 100%; overflow-y: auto; scrollbar-width: thin; }
.out-main .viewport { height: 100%; overflow: auto; align-content: safe center; }
.out-main .viewport .frame { --max-h: calc(100dvh - 150px); }
.out-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6); }
.run-summary { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; font-size: var(--t-13); line-height: var(--lh-13); color: var(--text-2); }
.run-summary-change { color: var(--text-3); }
.run-summary-change.is-warn { color: var(--warning); }
@media (max-width: 1099px) {
  .out-page { height: auto; overflow: visible; }
  .stage-main { grid-template-columns: minmax(0, 1fr); }
  .out-main .viewport { height: auto; min-height: 0; }
  .action-rail { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .action-rail .rail-head, .action-rail .rail-hint, .action-rail .help-link, .action-rail .rail-block { grid-column: 1 / -1; }
}

/* Run details: the images on a stage, the key figures, then cards in two columns (cost and versions on the right) */
.rd-page { display: grid; align-content: start; }
.rd-head { align-items: flex-end; }
.rd-heading { display: grid; gap: var(--s-1); min-width: 0; }
.rd-back { width: max-content; margin-bottom: var(--s-3); }
.rd-kicker { font-size: var(--t-12); line-height: var(--lh-12); font-weight: var(--w-medium); color: var(--accent); letter-spacing: .06em; text-transform: uppercase; }
.rd-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); animation: fade-in var(--dur-3) var(--ease-out); }
.skeleton-title { width: 240px; height: 28px; margin-block: 2px; }
.rd-content { display: grid; gap: var(--s-6); }

.rd-stage { display: grid; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-lg); background: var(--stage); }
.rd-stage-bar { display: flex; justify-content: center; }
.rd-stage-bar:empty { display: none; }
.rd-stage .frame { --max-h: min(58vh, 640px); }
.rd-stage-skeleton { height: min(58vh, 640px); border-radius: var(--r-md); }

/* Key figures: one strip; the cells share hairline borders however they wrap */
.rd-stats { display: flex; flex-wrap: wrap; gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--border); }
.rd-stat {
  flex: 1 1 160px; display: grid; gap: 2px; align-content: start; min-width: 0; padding: var(--s-4) var(--s-5); background: var(--surface);
  animation: rise var(--dur-4) var(--ease-out) backwards; animation-delay: calc((sibling-index() - 1) * 40ms);
}
.rd-stat-label, .rd-stat-sub { font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.rd-stat-value { font-size: var(--t-20); line-height: var(--lh-20); font-weight: var(--w-semibold); color: var(--text); overflow-wrap: anywhere; }

.rd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-6); align-items: start; }
.rd-col { display: grid; gap: var(--s-6); min-width: 0; }
.rd-card {
  display: grid; gap: var(--s-4); min-width: 0; padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  animation: rise var(--dur-4) var(--ease-out) backwards; animation-delay: calc(120ms + (sibling-index() - 1) * 50ms);
}
.rd-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--control-sm); }
.rd-card-tools { display: flex; align-items: center; gap: var(--s-2); }
.rd-note, .rd-size { font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.rd-warn { font-size: var(--t-12); line-height: var(--lh-12); color: var(--warning); }

/* On the images: what each one says, in reading order */
.rd-words { display: grid; }
.rd-word { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; padding: var(--s-3); margin-inline: calc(-1 * var(--s-3)); border-radius: var(--r-md); transition: background var(--dur-2) var(--ease-out); }
.rd-word + .rd-word { margin-top: var(--s-1); }
.rd-word.is-selected { background: var(--accent-soft); }
.rd-word img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--skeleton); }
.rd-word-text { display: grid; gap: 2px; min-width: 0; }
.rd-word-label { font-size: var(--t-12); line-height: var(--lh-12); font-weight: var(--w-medium); color: var(--text-3); }
.rd-headline { font-size: var(--t-16); line-height: var(--lh-16); font-weight: var(--w-semibold); color: var(--text); text-wrap: balance; }
.rd-headline.is-empty { font-weight: var(--w-regular); color: var(--text-3); }
.rd-subline { font-size: var(--t-13); line-height: var(--lh-13); color: var(--text-2); }
.rd-brand { margin-top: 2px; font-size: var(--t-12); line-height: var(--lh-12); letter-spacing: .06em; color: var(--text-3); }

/* The product: big photos, the main one marked */
.rd-photos { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--s-3); max-width: calc(var(--cols, 4) * 240px); } /* --cols: one row when they fit */
.rd-photo { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--skeleton); transition: translate var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.rd-photo:hover { translate: 0 -2px; border-color: var(--text-3); }
.rd-photo img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-4) var(--ease-out); }
.rd-photo:hover img { scale: 1.04; }

/* Direction: what was asked for */
.rd-dirs { display: grid; gap: var(--s-4); }
.rd-dir { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--s-4); font-size: var(--t-13); line-height: var(--lh-13); }
.rd-dir dt { color: var(--text-3); }
.rd-dir dd { display: grid; gap: var(--s-2); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.rd-chip { display: inline-block; width: max-content; padding: 0 var(--s-2); border-radius: var(--r-sm); background: var(--subtle); font-weight: var(--w-medium); }
.rd-chip::first-letter { text-transform: uppercase; }
.rd-list { display: grid; gap: var(--s-1); padding-left: 1.2em; white-space: normal; }
.rd-slides .is-failed { color: var(--text-3); }
.rd-slide-meta { display: block; font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.rd-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.rd-slide-picks { margin-top: var(--s-1); }
.rd-notes { white-space: pre-line; }
/* Several products' photos, one group each. min-width 0 so a group shrinks with the card (its photos wrap on phones). */
.rd-groups { display: grid; gap: var(--s-4); min-width: 0; }
.rd-group { display: grid; gap: var(--s-2); min-width: 0; }
.rd-group > .rd-chip { justify-self: start; }
.rd-group > .rd-photos { min-width: 0; }

/* The prompt: a preview that opens to the whole text */
.rd-prompt-wrap { position: relative; max-height: 220px; overflow: hidden; border-radius: var(--r-md); transition: max-height var(--dur-4) var(--ease-out); }
.rd-prompt-wrap.is-open { max-height: max-content; }
.rd-prompt-wrap::after { content: ""; position: absolute; inset: auto 0 0; height: 64px; background: linear-gradient(transparent, var(--subtle)); pointer-events: none; transition: opacity var(--dur-3) var(--ease-out); }
.rd-prompt-wrap.is-open::after { opacity: 0; }
.prompt-text.rd-prompt { max-height: none; margin: 0; overflow: visible; }
.rd-more { justify-self: start; font-size: var(--t-13); }

/* Cost: the total, what each part cost, and every version together */
.rd-cost { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--t-24); line-height: var(--lh-24); font-weight: var(--w-semibold); color: var(--text); }
.rd-cost span { font-size: var(--t-14); font-weight: var(--w-regular); color: var(--text-3); }
.rd-bar { display: flex; gap: 2px; height: 8px; overflow: hidden; border-radius: var(--r-sm); }
.rd-bar span, .rd-cost-parts i { --shade: calc(100% - var(--k) * 24%); background: color-mix(in srgb, var(--accent) var(--shade), var(--subtle)); }
.rd-bar span { width: var(--w); min-width: 3px; transform-origin: left; animation: grow var(--dur-4) var(--ease-out) backwards; animation-delay: calc(200ms + var(--k) * 60ms); }
.rd-cost-parts { display: grid; gap: var(--s-2); font-size: var(--t-13); line-height: var(--lh-13); }
.rd-cost-parts div { display: flex; justify-content: space-between; gap: var(--s-3); }
.rd-cost-parts dt { display: flex; align-items: center; gap: var(--s-2); color: var(--text-2); }
.rd-cost-parts i { width: 8px; height: 8px; border-radius: 2px; }
.rd-cost-parts dd { color: var(--text); text-align: right; }
.rd-total { padding-top: var(--s-3); border-top: 1px solid var(--border); font-size: var(--t-13); line-height: var(--lh-13); color: var(--text-2); }
.rd-total strong { color: var(--text); font-weight: var(--w-medium); }

/* Versions: a timeline, oldest first, the one on show marked */
.rd-timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.rd-timeline li { position: relative; padding-left: var(--s-5); }
.rd-timeline li::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: var(--border); }
.rd-timeline li:first-child::before { top: 50%; }
.rd-timeline li:last-child::before { bottom: 50%; }
.rd-timeline li::after { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; translate: 0 -50%; border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--surface); transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.rd-timeline li.is-current::after { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rd-version { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-3); align-items: center; width: 100%; padding: var(--s-2); border: 0; border-radius: var(--r-md); background: none; color: inherit; text-align: left; cursor: pointer; transition: background var(--dur-1) var(--ease-out); }
.rd-version:hover:not(:disabled) { background: var(--subtle); }
.rd-version:disabled { cursor: default; }
.rd-version img { width: 48px; height: 48px; object-fit: cover; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--skeleton); }
.rd-version-text { display: grid; min-width: 0; font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.rd-version-text > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rd-version-text strong { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-13); line-height: var(--lh-13); font-weight: var(--w-semibold); color: var(--text); }
.rd-badge { padding: 0 var(--s-1); border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); font-size: var(--t-11); line-height: 16px; font-weight: var(--w-medium); }

@media (max-width: 1099px) { .rd-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .rd-content { gap: var(--s-4); }
  .rd-stage { padding: var(--s-3); }
  .rd-stage .frame { --max-h: 60dvh; }
  .rd-grid, .rd-col { gap: var(--s-4); }
  .rd-card { padding: var(--s-4); }
  .rd-dir { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .rd-word { grid-template-columns: 56px minmax(0, 1fr); }
  .rd-word img { width: 56px; height: 56px; }
  .rd-word-edit { grid-column: 2; justify-self: start; }
  .rd-photos { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* History */
.history-totals { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.history-totals .spend { white-space: nowrap; }
.page-lede .help-link { margin-left: var(--s-2); }

/* Tutorials: contents on the left (follows the reading), text on the right */
html:has(.tut) { scroll-behavior: smooth; }
.tut { display: grid; grid-template-columns: 200px minmax(0, 68ch); gap: var(--s-12); align-items: start; }
.tut-toc { position: sticky; top: var(--s-6); display: grid; gap: 2px; }
.tut-toc .label { margin-bottom: var(--s-2); font-size: var(--t-12); line-height: var(--lh-12); font-weight: var(--w-medium); color: var(--text-3); }
.tut-toc a { padding: var(--s-1) var(--s-3); border-left: 1px solid var(--border); color: var(--text-3); text-decoration: none; font-size: var(--t-13); line-height: var(--lh-13); transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.tut-toc a:hover { color: var(--text); }
.tut-toc a.is-current { border-left-color: var(--accent); box-shadow: inset 1px 0 0 var(--accent); color: var(--text); font-weight: var(--w-medium); }
.tut-body { display: grid; gap: var(--s-10); padding-bottom: 40vh; color: var(--text-2); font-size: var(--t-16); line-height: var(--lh-16); }
.tut-body section { scroll-margin-top: var(--s-6); display: grid; gap: var(--s-3); padding: var(--s-4); margin: calc(-1 * var(--s-4)); border-radius: var(--r-lg); transition: background 1s var(--ease-out); }
.tut-body section.is-target { background: var(--accent-soft); }
.tut-body h2 { font-size: var(--t-20); line-height: var(--lh-20); font-weight: var(--w-semibold); color: var(--text); text-wrap: balance; }
.tut-body h3 { margin-top: var(--s-2); font-size: var(--t-16); line-height: var(--lh-16); font-weight: var(--w-semibold); color: var(--text); }
.tut-body ul, .tut-body ol { padding-left: 1.3em; display: grid; gap: var(--s-2); }
.tut-body strong { color: var(--text); font-weight: var(--w-semibold); }
.tut-body a { color: var(--text); text-underline-offset: 3px; }
.tut-tip { padding: var(--s-3) var(--s-4); border-left: 2px solid var(--accent); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--surface); font-size: var(--t-14); line-height: var(--lh-14); }
.tut-faq { display: grid; gap: var(--s-1); }
.tut-faq dt { margin-top: var(--s-3); color: var(--text); font-weight: var(--w-semibold); }
@media (max-width: 1023px) {
  .tut { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .tut-toc { position: static; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .tut-toc .label { grid-column: 1 / -1; }
}

/* Full-screen pages (Regenerate all, Run details, Edit image): a tool bar, settings left, the image right */
.at-body { overflow: hidden; }
.at-shell { display: grid; grid-template-columns: 360px minmax(0, 1fr); grid-template-rows: var(--toolbar) minmax(0, 1fr); height: 100vh; height: 100dvh; }
.at-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-2); min-width: 0; padding: 0 var(--s-4); border-bottom: 1px solid var(--border); background: var(--bg); }
.at-title { font-size: var(--t-16); line-height: var(--lh-16); font-weight: var(--w-semibold); white-space: nowrap; }
.at-run { min-width: 0; font-size: var(--t-13); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-status { max-width: 420px; font-size: var(--t-13); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-settings { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: var(--s-5); padding: var(--s-4) var(--s-4) var(--s-6); border-right: 1px solid var(--border); background: var(--bg); }
.at-section { display: grid; gap: var(--s-3); padding-bottom: var(--s-5); border-bottom: 1px solid var(--border); }
.at-section:last-child { border-bottom: 0; padding-bottom: 0; }
.at-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.at-note { font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.at-settings .run-title { font-size: var(--t-20); line-height: var(--lh-20); font-weight: var(--w-semibold); }
.at-stage { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: var(--s-3); padding: var(--s-4); background: var(--stage); }
.at-empty { grid-column: 1 / -1; display: grid; place-content: center; justify-items: center; gap: var(--s-2); text-align: center; color: var(--text-3); }
.at-shell.is-empty .at-settings, .at-shell.is-empty .at-stage { display: none; }
.at-hint { max-width: 90ch; text-align: center; font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.refine-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.image-switch { display: inline-flex; align-items: center; gap: 2px; margin-left: var(--s-2); font-size: var(--t-13); font-weight: var(--w-medium); color: var(--text-2); white-space: nowrap; }
.tool-stage { grid-template-rows: auto minmax(0, 1fr); justify-items: stretch; align-items: stretch; }
.tool-stage:has(> .tool-foot) { grid-template-rows: auto minmax(0, 1fr) auto; }
.tool-toolbar { display: flex; justify-content: center; }
.tool-preview { min-height: 0; overflow: auto; display: grid; place-items: start center; align-content: safe center; }
.tool-preview .frame { --max-h: calc(100dvh - var(--toolbar) - 112px); }
.tool-stage:has(> .tool-foot) .tool-preview .frame { --max-h: calc(100dvh - var(--toolbar) - 236px); }
.tool-preview .stage-loading, .tool-preview .preview-grid { width: 100%; }
.tool-foot { display: flex; justify-content: center; padding-top: var(--s-3); border-top: 1px solid var(--border); }
.stage-loading { position: relative; display: grid; place-items: center; min-height: 300px; }
.stage-loading .frame { opacity: .3; }
.loading-card { position: absolute; display: grid; justify-items: center; gap: var(--s-2); width: min(360px, 90%); padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); text-align: center; }
.loading-card .label { color: var(--text-2); }
.timer { font: var(--w-medium) var(--t-24)/var(--lh-24) var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.regen-rows { display: grid; gap: var(--s-3); }
.regen-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.regen-row img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); }
.regen-one { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.regen-one img { width: 112px; border-radius: var(--r-sm); border: 1px solid var(--border); }
.regen-one-fields { display: grid; gap: var(--s-3); }
@media (max-width: 560px) { .regen-one { grid-template-columns: minmax(0, 1fr); } .regen-one img { width: 96px; } }
@media (max-width: 899px) {
  .at-body { overflow: auto; }
  .at-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; height: auto; }
  .at-bar { flex-wrap: wrap; min-height: var(--toolbar); padding: var(--s-2) var(--s-4); }
  .at-stage { grid-row: 2; padding: var(--s-3); }
  .at-settings { grid-row: 3; overflow: visible; border-right: 0; border-top: 1px solid var(--border); }
  .tool-preview .frame, .tool-stage:has(> .tool-foot) .tool-preview .frame { --max-h: 60dvh; }
}

/* Edit image (v4, 2026-10-14): the text's settings on the left, the picture in the middle as large as the window
   allows, the picture's settings on the right. Settings are cards (like Generate's panels) at the normal size; each
   side scrolls on its own if its cards are taller than the window, and a card folds away from its title. */
.ei-shell { --left: clamp(296px, 21vw, 352px); --right: clamp(272px, 19vw, 328px); grid-template-columns: var(--left) minmax(0, 1fr) var(--right); }
.ei-stage { grid-row: 2; grid-column: 2; grid-template-rows: minmax(0, 1fr) auto; gap: var(--s-2); padding: var(--s-3) var(--s-4) var(--s-2); border-inline: 1px solid var(--border); }
.ei-panel {
  grid-row: 2; display: flex; flex-direction: column; gap: var(--s-2); min-height: 0; overflow-y: auto; overflow-anchor: none; scrollbar-width: thin; scrollbar-gutter: stable;
  padding: var(--s-3) var(--s-2) var(--s-3) var(--s-3); background: var(--bg); animation: fade-in var(--dur-4) var(--ease-out);
}
.ei-left { grid-column: 1; }
.ei-right { grid-column: 3; }
.ei-side-title { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-1); font-size: var(--t-12); line-height: var(--lh-12); font-weight: var(--w-medium); color: var(--text-3); }
.ei-side-title .icon { width: 14px; height: 14px; }
/* A card: its title (click folds it), then its controls */
.ei-card { flex: none; padding: var(--s-2) var(--s-3) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.ei-card[hidden] { display: none; }
.ei-card > * + * { margin-top: var(--s-2); }
.ei-card.is-folded { padding-bottom: var(--s-2); }
.ei-card.is-folded > :not(.ei-head) { display: none; }
.ei-fold { display: inline-flex; align-items: center; gap: var(--s-1); min-width: 0; margin-left: -4px; padding: 2px 4px; border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; cursor: pointer; }
.ei-fold:hover { background: var(--subtle); }
.ei-fold .icon { flex: none; color: var(--text-3); transition: rotate var(--dur-2) var(--ease-out); }
.ei-card.is-folded .ei-fold .icon { rotate: -90deg; }
.ei-fold-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A small heading inside a card (Layout, Backdrop…) */
.ei-subhead { display: flex; align-items: center; gap: var(--s-2); padding-top: var(--s-1); font-size: var(--t-12); line-height: var(--lh-12); font-weight: var(--w-medium); color: var(--text-3); }
.ei-subhead::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.ei-head { display: flex; align-items: center; gap: 2px; min-height: var(--control-sm); }
.ei-head .label { min-width: 0; }
.at-shell.is-empty .ei-panel { display: none; }
.ei-head .btn-sm { height: 24px; padding: 0 6px; }
.ei-target { margin-left: var(--s-1); padding: 0 6px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); font-size: var(--t-12); font-weight: var(--w-medium); }
.ei-options { display: grid; gap: 2px; }
/* The words of each text box: a click selects it for the style controls */
.ei-words { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: var(--s-1) 6px 6px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); cursor: pointer; transition: border-color var(--dur-1) var(--ease-out); }
.ei-words:hover { border-color: var(--border-strong); }
/* In a narrow card "Write new" is just its icon (the tooltip says it), so the box's name and readability have room */
.ei-words { container-type: inline-size; }
@container (max-width: 290px) { .ei-mini-label { display: none; } }
.ei-words.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ei-words-head { display: flex; align-items: center; gap: 2px; min-height: 20px; }
.ei-words-name { min-width: 0; margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-12); font-weight: var(--w-medium); color: var(--text-2); }
.ei-words.is-selected .ei-words-name { color: var(--accent); }
.ei-words.is-row { padding-block: var(--s-1); }
.ei-words.is-row .ei-words-head { align-items: flex-start; }
.ei-words.is-row .ei-words-name { flex: none; max-width: 44px; margin-right: 0; line-height: 26px; }
.ei-words.is-row textarea.control { flex: 1; min-height: 26px; padding-block: 2px; }
.ei-words.is-row .ei-mini { margin-top: 3px; }
.ei-words.is-row textarea.control { font-size: var(--t-12); }
/* One-row cards show their buttons on hover or when selected, so the words get the width */
@media (hover: hover) {
  .ei-words.is-row:not(:hover, :focus-within, .is-selected) .ei-mini { display: none; }
}
.ei-mini { display: inline-flex; flex: none; align-items: center; gap: var(--s-1); height: 20px; padding: 0 6px; white-space: nowrap; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-3); font: inherit; font-size: var(--t-11); cursor: pointer; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.ei-mini:hover { background: var(--subtle); color: var(--text); }
.ei-mini-icon { justify-content: center; width: 20px; padding: 0; }
/* Each box grows with its words (up to four lines), so nothing scrolls inside it */
.ei-words textarea.control { width: 100%; min-width: 0; min-height: 30px; max-height: 74px; field-sizing: content; padding: var(--s-1) var(--s-2); resize: none; font-size: var(--t-13); line-height: var(--lh-13); }
/* Style of the selected box: font and weight, italic / capitals / alignment, then a slider row each */
.ei-line { display: flex; align-items: center; gap: var(--s-1); }
.ei-weight { flex: 1; }
.ei-toggle[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.ei-glyph { font: var(--w-semibold) var(--t-12)/1 var(--font-sans); letter-spacing: .02em; }
.ei-glyph.is-italic { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: var(--t-14); }
.ei-align span { display: grid; place-items: center; padding: 0 6px; }
.srow { display: grid; grid-template-columns: 52px minmax(0, 1fr) 40px; align-items: center; gap: 6px; min-height: 22px; }
.srow-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-12); color: var(--text-3); }
.srow input[type="range"] { width: 100%; min-width: 0; margin: 0; }
.srow output { text-align: right; font-size: var(--t-11); color: var(--text-2); }
.ei-num.control { height: 24px; padding: 0 var(--s-1); text-align: right; font-size: var(--t-12); -moz-appearance: textfield; appearance: textfield; }
.ei-num::-webkit-inner-spin-button { display: none; }
.ei-place { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-2); }
.ei-place-left { display: grid; justify-items: center; gap: var(--s-1); }
.ei-place-rows { display: grid; gap: 2px; min-width: 0; }
.ei-place .srow { grid-template-columns: 40px minmax(0, 1fr) 34px; }
.place-grid { display: grid; grid-template-columns: repeat(3, 22px); gap: 3px; }
.place-btn { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; transition: border-color var(--dur-1) var(--ease-out); }
.place-btn:hover { border-color: var(--accent); }
.place-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); transition: background var(--dur-1) var(--ease-out), scale var(--dur-2) var(--ease-spring); }
.place-btn:hover .place-dot { background: var(--accent); scale: 1.4; }
/* Type pairs: a font for the headline and one for the supporting line, set together */
.ei-head-note { font-size: var(--t-11); font-weight: var(--w-regular); color: var(--text-3); }
.ei-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
.ei-pair {
  display: flex; align-items: center; gap: 6px; min-width: 0; height: 28px; padding: 0 var(--s-2); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-2); cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), translate var(--dur-2) var(--ease-out);
}
.ei-pair:hover { border-color: var(--text-3); translate: 0 -1px; }
.ei-pair[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.ei-pair-a { flex: none; font-size: var(--t-16); line-height: 1; }
.ei-pair-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-12); }
/* Picture looks: this picture with each look, one click sets the four adjustments */
.ei-looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2) var(--s-1); }
.ei-look { display: grid; gap: 2px; padding: 0; border: 0; background: none; color: var(--text-3); cursor: pointer; }
.ei-look-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--skeleton); transition: border-color var(--dur-1) var(--ease-out), translate var(--dur-2) var(--ease-out); }
.ei-look-img img { width: 100%; height: 100%; object-fit: cover; }
.ei-look-wash { position: absolute; inset: 0; mix-blend-mode: soft-light; }
.ei-look-fade { position: absolute; inset: 0; mix-blend-mode: lighten; }
.ei-look-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, color-mix(in srgb, var(--stage) calc(var(--v) * 100%), transparent) 100%); }
.ei-look:hover .ei-look-img { border-color: var(--text-3); translate: 0 -1px; }
.ei-look[aria-pressed="true"] .ei-look-img { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ei-look[aria-pressed="true"] { color: var(--text); }
.ei-look-name { font-size: var(--t-11); line-height: var(--lh-11); text-align: center; }
/* Colour: Auto, any colour, then the named colours, a line per group */
.ei-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.ei-swatch-hint { margin-left: auto; font-size: var(--t-11); color: var(--text-3); }
/* All the colours in one even flow, group after group (the group is in each dot's name) */
.ei-swatch-groups { display: grid; grid-template-columns: repeat(auto-fill, 18px); justify-content: space-between; gap: 6px 4px; }
.ei-swatch-group, .ei-swatch-dots { display: contents; }
.ei-swatch-name { display: none; }
.ei-swatch-dots .swatch { width: 18px; height: 18px; }
.ei-auto, .ei-swatches .swatch-custom { height: 22px; }
.swatch-custom { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0 var(--s-2) 0 2px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); font-size: var(--t-12); font-weight: var(--w-medium); color: var(--text-2); cursor: pointer; }
.swatch-custom[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.swatch { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--swatch); cursor: pointer; transition: scale var(--dur-2) var(--ease-spring), outline-offset var(--dur-2) var(--ease-spring); }
.swatch:hover { border-color: var(--text-2); scale: 1.15; }
.swatch[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 2px; scale: 1.1; }
/* The bar: a thumbnail per image of the output (one click opens it), undo and redo, and a dot on Save while
   there are unsaved changes */
.ei-images { display: flex; align-items: center; gap: var(--s-1); margin-left: var(--s-2); }
.ei-thumb { position: relative; width: 32px; height: 32px; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--skeleton); cursor: pointer; opacity: .55; transition: opacity var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.ei-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ei-thumb:hover { opacity: 1; }
.ei-thumb[aria-current="true"] { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ei-thumb-num { position: absolute; left: 1px; bottom: 1px; padding: 0 3px; border-radius: 2px; background: var(--overlay); color: var(--on-overlay); font-size: var(--t-11); line-height: 12px; }
.ei-history { display: flex; align-items: center; gap: 2px; }
.ei-steps { min-width: 14px; font-size: var(--t-11); color: var(--text-3); }
.ei-save { position: relative; }
.ei-save.is-dirty::after { content: ""; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border: 2px solid var(--bg); border-radius: 50%; background: var(--warning); animation: pop-in var(--dur-2) var(--ease-spring); }
/* Small one-click choices: layouts, tones, backdrops */
.ei-chip { height: 24px; padding: 0 var(--s-2); }
/* Layout: the 3 × 3 frame (Generate's Room for text picker) and the four edges beside it */
.ei-layout { align-items: flex-start; }
.ei-layout-pad { height: 64px; width: calc(64px * var(--ratio)); }
.ei-layout-side { display: grid; gap: var(--s-2); min-width: 0; }
.ei-layout .space-edge { height: 24px; }
.ei-layout-now { font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.ei-choices { display: flex; gap: 3px; }
.ei-choices .ei-chip { flex: 1; min-width: 0; padding: 0 var(--s-1); }
.ei-tone { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 6px; }
.ei-sub { display: block; font-size: var(--t-12); color: var(--text-3); }
.ei-mini-icon.is-danger:hover { background: var(--error-soft); color: var(--error); }
/* Readability: how well each text stands out from the picture behind it (contrast ratio, as for web text) */
.ei-read { display: inline-flex; flex: none; align-items: center; gap: 4px; height: 18px; padding: 0 5px; border-radius: var(--r-sm); background: var(--subtle); font-size: var(--t-11); color: var(--text-2); }
.ei-read::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.ei-read[data-rating="clear"]::before { background: var(--success); }
.ei-read[data-rating="ok"]::before { background: var(--warning); }
.ei-read[data-rating="weak"]::before { background: var(--error); }
.ei-read[data-rating="weak"] { color: var(--error); }
.ei-read:empty { display: none; }
.ei-readline { display: flex; align-items: center; gap: var(--s-2); min-height: var(--control-sm); padding: 0 var(--s-1) 0 var(--s-2); border-radius: var(--r-md); background: var(--bg); font-size: var(--t-12); color: var(--text-2); }
.ei-readline-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ei-readline .btn-sm { height: 22px; padding: 0 var(--s-2); }
/* On Instagram: the post as the feed shows it and as the profile grid crops it */
.ei-ig { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); align-items: start; gap: var(--s-2); }
.ei-ig-shot { display: grid; gap: var(--s-1); min-width: 0; }
.ei-ig-shot canvas { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--skeleton); }
.ei-ig-name { font-size: var(--t-11); line-height: var(--lh-11); color: var(--text-3); }
.ei-ig-note { display: flex; align-items: flex-start; gap: var(--s-1); font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.ei-ig-note .icon { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.ei-ig-note[data-kind="ok"] .icon { color: var(--success); }
.ei-ig-note[data-kind="warn"] { color: var(--warning); }
/* Keys */
.ei-keys { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 6px var(--s-3); margin: 0; font-size: var(--t-12); line-height: var(--lh-12); }
.ei-keys dt { white-space: nowrap; }
.ei-keys dd { margin: 0; color: var(--text-3); }
.ei-keys kbd { display: inline-block; min-width: 18px; padding: 1px 4px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--r-sm); background: var(--bg); font: var(--t-11)/1.2 var(--font-mono); color: var(--text-2); text-align: center; }
/* View tools under the picture (not saved): hold for the original, thirds, margins */
.ei-view { display: flex; flex: none; gap: 2px; }
.ei-view-btn {
  display: inline-flex; align-items: center; gap: var(--s-1); height: 22px; padding: 0 var(--s-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-3); font: inherit; font-size: var(--t-11); cursor: pointer; user-select: none;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.ei-view-btn:hover { color: var(--text); border-color: var(--border-strong); }
.ei-view-btn[aria-pressed="true"], .ei-view-btn:active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.ei-guides { position: absolute; inset: 0; pointer-events: none; }
.ei-guides > span { position: absolute; display: none; }
.ei-guides.show-thirds .ei-thirds {
  display: block; inset: 0;
  background: linear-gradient(to right, transparent calc(100% / 3 - .5px), var(--on-overlay-dim) calc(100% / 3 - .5px), var(--on-overlay-dim) calc(100% / 3 + .5px), transparent calc(100% / 3 + .5px), transparent calc(200% / 3 - .5px), var(--on-overlay-dim) calc(200% / 3 - .5px), var(--on-overlay-dim) calc(200% / 3 + .5px), transparent calc(200% / 3 + .5px)),
              linear-gradient(to bottom, transparent calc(100% / 3 - .5px), var(--on-overlay-dim) calc(100% / 3 - .5px), var(--on-overlay-dim) calc(100% / 3 + .5px), transparent calc(100% / 3 + .5px), transparent calc(200% / 3 - .5px), var(--on-overlay-dim) calc(200% / 3 - .5px), var(--on-overlay-dim) calc(200% / 3 + .5px), transparent calc(200% / 3 + .5px));
}
/* The 7% margin TextLayer snaps to: 7% of the width on every side */
.ei-guides.show-margins .ei-margins { display: block; inset: calc(7% * var(--ratio)) 7%; outline: 1px dashed var(--on-overlay-dim); }
/* Grid crop: what Instagram's profile grid (3:4) shows; the rest is dimmed */
.ei-guides { overflow: hidden; }
.ei-guides.show-crop .ei-crop { display: block; box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--stage) 62%, transparent); outline: 1px dashed var(--on-overlay-dim); }
.at-canvas-wrap.is-original .at-overlay, .at-canvas-wrap.is-original .ei-guides { visibility: hidden; }
/* Under the picture: what just happened (left), how to drag (right) */
.ei-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-width: 0; font-size: var(--t-12); line-height: var(--lh-12); }
.ei-status { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.ei-status[data-kind="dirty"] { color: var(--warning); }
.ei-status[data-kind="error"] { color: var(--error); }
.at-canvas-wrap { --ratio: 1; position: relative; aspect-ratio: var(--ratio); width: min(100%, calc((100dvh - var(--toolbar) - 54px) * var(--ratio))); border: 1px solid var(--border); }
.at-canvas-wrap.is-loading canvas { opacity: 0; }
.at-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity var(--dur-4) var(--ease-out); }
.at-overlay { position: absolute; inset: 0; touch-action: none; cursor: grab; user-select: none; }
.at-overlay:active { cursor: grabbing; }
.at-box { position: absolute; cursor: move; outline: 1px dashed transparent; outline-offset: 2px; }
.at-box:hover { outline-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.at-box.is-empty { outline-color: var(--border-strong); }
.at-box.is-selected { outline: 1.5px solid var(--accent); }
.at-box-label { position: absolute; left: -2px; bottom: calc(100% + 6px); display: none; padding: 0 var(--s-2); border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-size: var(--t-11); line-height: 18px; font-weight: var(--w-semibold); white-space: nowrap; }
.at-box.is-selected .at-box-label { display: block; }
.at-handle { position: absolute; display: none; width: 10px; height: 10px; border-radius: 2px; background: var(--surface); border: 1.5px solid var(--accent); }
.at-box.is-selected .at-handle { display: block; }
.at-nw { left: -7px; top: -7px; cursor: nwse-resize; }
.at-ne { right: -7px; top: -7px; cursor: nesw-resize; }
.at-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.at-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.at-w { left: -7px; top: 50%; translate: 0 -50%; width: 8px; height: 16px; cursor: ew-resize; }
.at-e { right: -7px; top: 50%; translate: 0 -50%; width: 8px; height: 16px; cursor: ew-resize; }
.at-guide { position: absolute; pointer-events: none; background: var(--accent); }
.at-guide-v { top: 0; bottom: 0; width: 1px; }
.at-guide-h { left: 0; right: 0; height: 1px; }
.at-guide.is-center { background: var(--error); }
.at-guide.is-box { background: var(--info); }
/* Narrower windows: the picture first, then the text and picture settings side by side under it; the page scrolls */
@media (max-width: 1099px) {
  .at-body:has(.ei-shell) { overflow: auto; }
  .ei-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; height: auto; }
  .ei-stage { grid-row: 2; grid-column: 1 / -1; border-inline: 0; }
  .ei-panel { grid-row: 3; overflow: visible; padding: var(--s-3); border-top: 1px solid var(--border); }
  .ei-left { grid-column: 1; }
  .ei-right { grid-column: 2; }
  .at-canvas-wrap { width: min(100%, calc(70dvh * var(--ratio))); }
}
@media (max-width: 699px) {
  .ei-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
  .ei-right { grid-column: 1; grid-row: 4; border-top: 0; padding-top: 0; }
}
@media (max-width: 599px) {
  .ei-images { order: 9; flex-basis: 100%; margin-left: 0; }
  .ei-view-btn { padding: 0 6px; }
}

/* Sign in (login.html): one small card in the middle of the screen */
.login-body { display: grid; place-items: center; min-height: 100dvh; padding: var(--s-4); }
.login-card { display: grid; gap: var(--s-4); width: min(360px, 100%); padding: var(--s-6); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); animation: rise var(--dur-4) var(--ease-out); }
.login-brand { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-13); font-weight: var(--w-semibold); }
.login-title { font-size: var(--t-20); line-height: var(--lh-20); font-weight: var(--w-semibold); }
.login-form { display: grid; gap: var(--s-3); }
.login-error { font-size: var(--t-13); line-height: var(--lh-13); color: var(--error); }
.login-note { font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }

/* Product catalogue page */
.cat-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.cat-search { width: min(320px, 100%); }
.cat-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip-count { color: inherit; opacity: .7; }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s-4); }
.pc-card {
  display: grid; align-content: start; gap: 2px; padding: var(--s-2) var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out), translate var(--dur-2) var(--ease-out);
  animation: rise var(--dur-4) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * var(--stagger));
}
.pc-card:hover { border-color: var(--accent); translate: 0 -2px; }
.pc-card.is-skeleton { animation: none; }
.pc-img { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: var(--s-2); overflow: hidden; border-radius: var(--r-md); background: var(--subtle); }
.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-4) var(--ease-out); }
.pc-card:hover .pc-img img { scale: 1.03; }
.pc-none { display: grid; justify-items: center; gap: var(--s-1); font-size: var(--t-12); color: var(--text-3); }
.pc-name { padding-inline: var(--s-1); font-weight: var(--w-semibold); }
.pc-sub, .pc-card .cat-tags { padding-inline: var(--s-1); font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.pc-foot { margin: var(--s-6) 0 var(--s-2); font-size: var(--t-12); color: var(--text-3); }

/* A product's page: photos on the left, details on the right */
.crumb { display: inline-flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-2); font-size: var(--t-13); color: var(--text-2); text-decoration: none; }
.crumb:hover { color: var(--accent); }
.pp-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pp-status { margin-left: var(--s-2); font-size: var(--t-12); }
.pp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); gap: var(--s-6); align-items: start; }
.pp-photos.is-over { border-color: var(--accent); background: var(--accent-soft); }
.pp-stage { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-md); background: var(--stage); }
/* Pinned to the frame: a percentage height alone doesn't resolve here, so tall photos overflowed and lost their bottom. */
.pp-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pp-drop { width: 100%; height: 100%; border-radius: var(--r-md); }
.pp-strip { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pp-thumb { position: relative; width: 72px; height: 72px; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--skeleton); cursor: pointer; }
.pp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pp-thumb.is-selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.pp-thumb .photo-tag { left: 2px; bottom: 2px; padding: 0 var(--s-1); font-size: var(--t-11); line-height: var(--lh-11); }
.pp-photo-controls { display: grid; gap: var(--s-3); }
.pp-photo-meta { font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); overflow-wrap: anywhere; }
.pp-photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.pp-view { width: 160px; }
.pp-quality { width: 120px; }
.pp-check { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-13); color: var(--text-2); cursor: pointer; }
.pp-check input:not(.switch) { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.pp-danger:hover:not(:disabled) { background: var(--error-soft); color: var(--error); }
.pp-confirm { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-4); align-items: center; }
.pp-confirm img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-sm); }
.pp-upload-previews { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pp-upload-previews img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); background: var(--skeleton); }
.pp-upload-fields { display: grid; gap: var(--s-3); }
.pp-made { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.pp-made-item { display: grid; gap: var(--s-1); justify-items: center; text-decoration: none; }
.pp-made-item img { width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--skeleton); transition: border-color var(--dur-1) var(--ease-out); }
.pp-made-item:hover img { border-color: var(--accent); }
.pp-form { gap: var(--s-5); padding-top: 0; }
.pp-group { display: grid; gap: var(--s-3); }
.pp-group + .pp-group { padding-top: var(--s-5); border-top: 1px solid var(--border); }
.pp-field { display: grid; gap: var(--s-1); min-width: 0; }
.pp-field textarea.control { min-height: 0; line-height: var(--lh-14); }
.pp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.pp-weight { width: calc((100% - 2 * var(--s-2)) / 3); margin-top: var(--s-2); }
.pp-preview { justify-self: start; }
.pp-savebar {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--s-2);
  margin: 0 calc(-1 * var(--s-5)); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface);
}
.pp-savebar-text { flex: 1; display: grid; min-width: 0; }
.pp-missing { padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--warning-soft); color: var(--warning); font-size: var(--t-13); line-height: var(--lh-13); }
.pp-dirty { font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.pp-dirty.is-dirty { color: var(--warning); font-weight: var(--w-medium); }
.page-skeleton { min-height: 320px; }
.page-skeleton.is-tall { min-height: 560px; }
.rd-chip-link { color: var(--text); text-decoration: none; }
.rd-chip-link:hover { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 1100px) {
  .pp-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .pp-savebar { margin: 0 calc(-1 * var(--s-4)); padding: var(--s-3) var(--s-4); }
}

/* System prompts and Styles: the lists (cards like the catalogue's, without photos) */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); }
.lib-card {
  display: grid; align-content: start; gap: var(--s-1); min-height: 168px; padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out), translate var(--dur-2) var(--ease-out);
  animation: rise var(--dur-4) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * var(--stagger));
}
.lib-card:hover { border-color: var(--accent); translate: 0 -2px; }
.lib-card.is-skeleton { animation: none; }
.lib-icon { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: var(--s-2); border-radius: var(--r-md); background: var(--subtle); color: var(--text-2); }
.lib-name { font-weight: var(--w-semibold); }
.lib-sub { font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); overflow-wrap: anywhere; }
.lib-stats { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); margin-top: auto; padding-top: var(--s-2); font-size: var(--t-13); line-height: var(--lh-13); color: var(--text-2); }
.lib-card .cat-tags { margin-top: var(--s-1); }

/* A system prompt's page: its sections, each switched on or off, in the order they're sent */
.ps-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.ps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.ps-sec { display: grid; gap: var(--s-2); padding: var(--s-2) var(--s-3) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); transition: border-color var(--dur-1) var(--ease-out); }
.ps-sec.is-open { border-color: var(--border-strong); }
.ps-sec.is-off { background: var(--subtle); }
.ps-sec.is-off .ps-title, .ps-sec.is-off .ps-label, .ps-sec.is-off .ps-preview { color: var(--text-3); }
.ps-head { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.ps-level { flex: none; font-size: var(--t-12); color: var(--text-3); }
.ps-title.control { flex: 1; min-width: 0; height: var(--control-sm); padding: 0 var(--s-2); border-color: transparent; background: transparent; font-weight: var(--w-medium); }
.ps-title.control:hover:not(:disabled) { border-color: var(--border-strong); }
.ps-label { flex: 1; min-width: 0; padding-left: var(--s-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; color: var(--text-2); }
.ps-off { flex: none; padding: 0 var(--s-1); border-radius: var(--r-sm); background: var(--surface); font-size: var(--t-12); color: var(--text-3); }
.ps-tools { flex: none; display: flex; align-items: center; gap: 2px; }
.ps-count { margin-right: var(--s-2); font-size: var(--t-12); color: var(--text-3); white-space: nowrap; }
.ps-open { min-width: 48px; }
.ps-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-left: calc(32px + var(--s-2)); font-size: var(--t-13); line-height: var(--lh-13); color: var(--text-2); white-space: pre-line; }
.ps-body.control { min-height: 96px; padding: var(--s-2) var(--s-3); resize: vertical; font: var(--t-13)/var(--lh-13) var(--font-mono); }
.ps-add { justify-self: start; }
.ps-side { position: sticky; top: var(--s-4); }
.ps-stats { display: grid; gap: var(--s-3); }
.ps-stat { display: grid; gap: 2px; }
.ps-stat-value { font-weight: var(--w-semibold); }
.ps-stat.is-warn .ps-stat-value { color: var(--warning); }
.ps-stat-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-top: var(--s-1); }

/* On/off switch (a checkbox) */
.switch {
  flex: none; position: relative; width: 32px; height: 18px; margin: 0; border-radius: 9px; background: var(--border-strong);
  appearance: none; cursor: pointer; transition: background var(--dur-2) var(--ease-out);
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface);
  transition: translate var(--dur-2) var(--ease-spring);
}
.switch:checked { background: var(--accent); }
.switch:checked::after { translate: 14px 0; }
.switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* A style's page: key colours, what it replaces, and the text the model gets */
.st-strip { display: flex; height: 32px; margin-bottom: var(--s-2); overflow: hidden; border-radius: var(--r-md); }
.st-strip span { flex: 1; }
.st-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.st-swatch { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--control-sm); padding-left: var(--s-1); border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--t-12); }
.st-dot { width: 18px; height: 18px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--border); }
.st-new { display: inline-flex; align-items: center; gap: var(--s-1); }
.st-picker { width: var(--control-sm); height: var(--control-sm); padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
.st-add { display: inline-flex; align-items: center; gap: var(--s-1); }
.st-replaces { display: grid; gap: var(--s-2); }
.st-replace { align-items: flex-start; }
.st-replace input { margin-top: 2px; }
.st-replace strong { color: var(--text); font-weight: var(--w-medium); }
.prompt-text.st-block { max-height: none; margin: 0; }
.st-preview { display: grid; gap: var(--s-2); }
@media (max-width: 1100px) {
  .ps-side { position: static; }
}
@media (max-width: 599px) {
  .ps-head { flex-wrap: wrap; }
  .ps-title.control, .ps-label { flex-basis: calc(100% - 72px); }
  .ps-tools { margin-left: auto; }
  .ps-count { display: none; }
  .ps-preview { padding-left: 0; }
}

/* A system prompt built from settings: section cards of controls on the left, the text they make on the right */
.lib-card.is-built .lib-icon { background: var(--accent-soft); color: var(--accent); }
.bf-form { display: grid; gap: var(--s-4); }
.bf-top { position: sticky; top: 0; z-index: 2; gap: var(--s-3); padding-bottom: var(--s-3); }
.bf-jump { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.bf-jump .chip { display: inline-flex; align-items: center; text-decoration: none; }
.bf-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-3); }
.bf-sections { display: grid; gap: var(--s-4); }
.bf-sec { gap: var(--s-3); scroll-margin-top: 150px; transition: border-color var(--dur-1) var(--ease-out); }
.bf-sec:hover, .bf-sec:focus-within { border-color: var(--border-strong); }
.bf-sec.is-off { background: var(--subtle); }
.bf-head { display: flex; align-items: center; gap: var(--s-2); min-height: var(--control-sm); }
.bf-head > .switch { margin-left: auto; }
.bf-badge { padding: 0 var(--s-1); border-radius: var(--r-sm); background: var(--subtle); font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); white-space: nowrap; }
.bf-badge.is-fixed { margin-left: auto; }
.bf-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.bf-field { display: grid; align-content: start; gap: var(--s-2); min-width: 0; }
.bf-field.is-wide { grid-column: 1 / -1; }
.bf-effect { min-height: var(--lh-12); font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.bf-area.control { min-height: 72px; resize: vertical; }
.bf-slider-head { display: flex; align-items: baseline; gap: var(--s-2); }
.bf-now { font-size: var(--t-13); line-height: var(--lh-13); font-weight: var(--w-medium); color: var(--text); }
.bf-auto { margin-left: auto; font-size: var(--t-12); }
.bf-range { width: 100%; margin: 0; cursor: pointer; }
.bf-range:disabled { opacity: .35; cursor: not-allowed; }
.bf-ticks { position: relative; height: var(--lh-12); }
.bf-tick { position: absolute; top: 0; padding: 0; border: 0; background: none; color: var(--text-3); font-size: var(--t-12); line-height: var(--lh-12); white-space: nowrap; cursor: pointer; }
.bf-tick:hover { color: var(--text-2); }
.bf-tick[aria-pressed="true"] { color: var(--text); font-weight: var(--w-medium); }
.bf-switch { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; }
.bf-switch > .switch { margin-top: 1px; }
.bf-switch strong { display: block; font-size: var(--t-13); line-height: var(--lh-13); font-weight: var(--w-medium); color: var(--text); }
.bf-say { display: block; font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.bf-rules { display: grid; gap: var(--s-3); }
.bf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.bf-chip { display: inline-flex; align-items: center; gap: var(--s-1); }
.bf-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border-strong); }
.bf-chip-input.control { width: 168px; height: var(--control-sm); font-size: var(--t-12); }
.bf-text { display: grid; gap: var(--s-2); max-height: 54vh; overflow: auto; }
.bf-chunk {
  margin: 0; padding: var(--s-2) var(--s-3); border: 1px solid transparent; border-radius: var(--r-md); background: var(--subtle);
  color: var(--text-2); font: var(--t-12)/var(--lh-12) var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.bf-chunk.is-hot { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
@media (max-width: 700px) {
  .bf-body, .bf-about { grid-template-columns: minmax(0, 1fr); }
  .bf-top { position: static; }
}

/* Directions: the list (grouped), a direction's page, the chips and chooser on Generate */
.dir-groups { display: grid; gap: var(--s-6); }
.dir-group { display: grid; gap: var(--s-3); }
.dir-card { min-height: 148px; }
.dir-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--t-13); line-height: var(--lh-13); color: var(--text-2); }
.dir-input.control { min-height: 112px; padding: var(--s-2) var(--s-3); resize: vertical; line-height: var(--lh-14); }
.dir-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); min-width: 0; }
.dir-chip { padding-left: var(--s-2); border-color: var(--border-strong); }
.dir-chooser { gap: var(--s-5); }
.dir-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-2); }
.dir-option {
  display: grid; align-content: start; gap: 2px; padding: var(--s-2) var(--s-3); text-align: left; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text);
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.dir-option strong { font-size: var(--t-13); line-height: var(--lh-13); font-weight: var(--w-semibold); }
.dir-option span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
.dir-option:hover:not(:disabled) { border-color: var(--text-3); background: var(--subtle); }
.dir-option[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.dir-option[aria-pressed="true"] strong { color: var(--accent); }
.dir-option:disabled { opacity: .5; cursor: not-allowed; }

/* Generate: text space (where the model leaves room for the text) and the final prompt */
.fp { display: grid; gap: var(--s-4); }
.fp-wait { height: 360px; border-radius: var(--r-md); }
.fp-lede { font-size: var(--t-13); line-height: var(--lh-13); color: var(--text-2); }
.fp-tabs { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.fp-sent { display: grid; gap: var(--s-2); }
.fp-photos { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.fp-photo { display: grid; align-content: start; gap: var(--s-1); width: 88px; margin: 0; }
.fp-photo img, .fp-lead { width: 88px; height: 88px; object-fit: cover; border-radius: var(--r-sm); background: var(--skeleton); }
.fp-lead { display: grid; place-items: center; border: 1px dashed var(--border-strong); background: var(--subtle); color: var(--text-3); }
.fp-photo figcaption { font-size: var(--t-11); line-height: var(--lh-11); color: var(--text-3); overflow-wrap: anywhere; }
.field-hint.is-warn { color: var(--warning); }
.fp-blocks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.fp-block { --kind: var(--border-strong); display: grid; gap: var(--s-2); padding: var(--s-2) var(--s-3) var(--s-3); border: 1px solid var(--border); border-left: 3px solid var(--kind); border-radius: var(--r-md); background: var(--surface); }
.fp-block[data-kind="system"] { --kind: var(--text-3); }
.fp-block[data-kind="style"] { --kind: var(--accent); }
.fp-block[data-kind="products"] { --kind: var(--info); }
.fp-block[data-kind="notes"], .fp-block[data-kind="slide"] { --kind: var(--warning); }
.fp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); font-size: var(--t-13); line-height: var(--lh-13); }
.fp-num { font-size: var(--t-12); color: var(--text-3); }
.fp-source { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); font-size: var(--t-12); color: var(--text-3); }
.fp-source .link { font-size: var(--t-12); }
.fp-chars { margin-left: auto; font-size: var(--t-12); color: var(--text-3); }
.prompt-text.fp-text { max-height: 180px; margin: 0; }
.fp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); font-size: var(--t-12); color: var(--text-3); }
.fp-total.is-warn { color: var(--warning); }

/* Prompt Control: how a prompt is built (the flow, its blocks in order) and the four pages that control it.
   One screen: on wider windows the page fits the window and only the blocks card scrolls, if it must. */
.ctl-flow { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); }
.ctl-flow li {
  position: relative; display: grid; align-content: start; gap: 2px; padding: var(--s-2) var(--s-3) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3);
  animation: rise var(--dur-4) var(--ease-out) backwards; animation-delay: calc((sibling-index() - 1) * var(--stagger));
}
.ctl-flow strong { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-13); line-height: var(--lh-13); font-weight: var(--w-semibold); color: var(--text); }
.ctl-step { display: grid; place-items: center; width: 18px; height: 18px; border-radius: var(--r-sm); background: var(--subtle); color: var(--text-2); font-size: var(--t-11); }
.ctl-flow li:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: calc(-1 * var(--s-2) / 2 - 3px); width: 6px; height: 6px;
  border-top: 1px solid var(--border-strong); border-right: 1px solid var(--border-strong); rotate: 45deg; translate: 0 -50%;
}
.ctl-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.ctl-card { gap: var(--s-2); padding: var(--s-3) var(--s-4) var(--s-4); }
.ctl-blocks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ctl-block {
  --kind: var(--border-strong); display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s-2);
  padding: 6px var(--s-3); border: 1px solid var(--border); border-left: 3px solid var(--kind); border-radius: var(--r-md); background: var(--bg);
}
.ctl-block[data-kind="system"] { --kind: var(--text-3); }
.ctl-block[data-kind="style"] { --kind: var(--accent); }
.ctl-block[data-kind="products"] { --kind: var(--info); }
.ctl-block[data-kind="notes"], .ctl-block[data-kind="slide"] { --kind: var(--warning); }
.ctl-block .fp-num { line-height: var(--lh-13); }
.ctl-block-body { display: grid; gap: 2px; min-width: 0; }
.ctl-block-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); font-size: var(--t-13); line-height: var(--lh-13); }
.ctl-block-head .link { font-size: var(--t-12); color: var(--accent); }
.ctl-when { margin-left: auto; font-size: var(--t-12); color: var(--text-3); }
.ctl-block-text { font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-2); }
.ctl-sent { padding-top: var(--s-1); }
.ctl-side { display: grid; gap: var(--s-3); }
.ctl-page { padding: var(--s-3); gap: 2px; }
.ctl-page .lib-icon { margin-bottom: var(--s-1); }
.ctl-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.ctl-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.ctl-blocks-tag { font-size: var(--t-11); line-height: var(--lh-11); color: var(--text-3); }
.ctl-count { color: var(--text-2); }
.ctl-open { display: inline-flex; align-items: center; gap: var(--s-1); margin-left: auto; color: var(--text-3); transition: color var(--dur-1) var(--ease-out); }
.ctl-page:hover .ctl-open { color: var(--accent); }
.ctl-tip { padding: var(--s-2) var(--s-3); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); font-size: var(--t-12); line-height: var(--lh-12); color: var(--text-3); }
@media (min-width: 1024px) and (min-height: 640px) {
  .ctl-main { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
  .ctl-main .page-head { margin-bottom: var(--s-4); }
  .ctl-grid { flex: 1; min-height: 0; align-items: stretch; }
  .ctl-card { align-content: start; overflow: auto; }
  .ctl-side { align-content: start; }
}
@media (max-width: 1023px) {
  .ctl-flow { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  .ctl-flow li::after { display: none; }
  .ctl-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .ctl-pages { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 6. Motion ---------- */
/* Changing page: the old page fades away, the new one rises into place; the sidebar holds still and the
   marker slides to the new link. The same applies when the Generate page switches screens. */
::view-transition-group(*) { animation-duration: var(--dur-3); animation-timing-function: var(--ease-out); }
::view-transition-old(root) { animation: fade-out var(--dur-2) var(--ease-in) both; }
::view-transition-new(root) { animation: rise var(--dur-4) var(--ease-out) both; }
::view-transition-group(nav-pill) { animation-duration: var(--dur-4); animation-timing-function: var(--ease-spring); }
/* Browsers without page transitions still get a soft arrival. */
@supports not (view-transition-name: none) {
  .main, .at-shell { animation: fade-in var(--dur-3) var(--ease-out); }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; translate: 0 var(--rise); } }
@keyframes drop { from { opacity: 0; translate: 0 calc(-1 * var(--rise)); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; scale: .96; } }
@keyframes pop-out { to { opacity: 0; scale: .97; } }
@keyframes slide-in { from { opacity: 0; translate: 24px 0; } }
@keyframes slide-out { to { opacity: 0; translate: 24px 0; } }
@keyframes shimmer { to { background-position: 0 0; } }
@keyframes breathe { 50% { scale: 1.035; } }
@keyframes grow { from { scale: 0 1; } }
@keyframes ready { 40% { scale: 1.03; } }
@keyframes indeterminate { from { translate: -100% 0; } to { translate: 290% 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    /* !important (the one allowed besides [hidden]): every class rule that animates is more specific than * and would win. */
    animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
}