/* ==========================================================================
   BANANA STUDIO — design system

   The brief was "as if Apple designed an image generator". That has a specific
   consequence for glassmorphism, and it is the opposite of what most glass UIs
   do: Apple uses a material only where there is genuinely something behind it
   to sample. Blur over a flat fill is just a grey box with a cost.

   So the structure here is honest and solid — hairline separators, flat
   surfaces, one accent — and translucency is reserved for the three places
   content actually passes underneath: the prompt dock (over the image), the
   sheets (over the app), and the hover bar (over the picture). That is why the
   dock reads as glass and the panels do not.

   Everything else follows from restraint: no gradient borders, no glow, no
   uppercase mono micro-labels, no per-card accent colours, no three-up grid.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* surfaces — a single neutral ramp, very slightly cool, never blue */
  --surface-1: #101012; /* the window */
  --surface-2: #151517; /* rails */
  --surface-3: #1d1d20; /* raised controls */
  --surface-4: #26262a; /* hover / thumb */
  --stage: #0c0c0e; /* behind the picture */

  --hairline: rgba(255, 255, 255, 0.07);
  --hairline-2: rgba(255, 255, 255, 0.12);

  --ink: #f5f5f7;
  --ink-2: #9d9da5;
  --ink-3: #83838b;

  --accent: #0a84ff;
  --accent-soft: rgba(10, 132, 255, 0.14);
  --accent-line: rgba(10, 132, 255, 0.42);
  --accent-ink: #7ab6ff;
  /* Filled buttons only. #0a84ff with white text is 3.6:1 — fine for large
     text, below AA for a 12.5px label. This deeper tint clears 4.9:1 while
     reading as the same blue. `--accent` still owns borders, rings and glows,
     where contrast rules do not apply. */
  --accent-fill: #0a6fd8;
  --accent-fill-hover: #0964c4;
  --danger: #ff453a;
  --ok: #30d158;

  --r-window: 16px;
  --r-lg: 13px;
  --r-md: 9px;
  --r-sm: 7px;

  --shadow-window: 0 40px 110px -34px rgba(0, 0, 0, 0.9), 0 3px 10px rgba(0, 0, 0, 0.45);
  --shadow-float: 0 18px 44px -14px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.4);
  --specular: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Apple's spring-ish curve: settles fast, never overshoots */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);

  --rail: 216px;
  --insp: 300px;
  --toolbar-h: 54px;
  --gutter: 0px;
  --dock-reserve: 118px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text',
    'Segoe UI', system-ui, sans-serif;
}

/* --- 2. Reset ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The `hidden` attribute is a UA stylesheet rule: `[hidden] { display: none }`.
   An author rule beats a UA rule regardless of specificity, so ANY later
   `display:` declaration silently resurrects a hidden element. That is not
   theoretical — `.frame__busy { display: flex }` kept the generating overlay
   painted over the stage for ever, so every generated image was generated,
   saved, listed in History, and then hidden behind an opaque panel reading
   "Generating · 14.4s". The attribute said hidden; the box disagreed.

   This must be `!important`: the competing declarations are ordinary ones and
   the whole point is that no component may outrank the attribute. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  background: #08080a;
  color: var(--ink);
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.45;
  letter-spacing: -0.006em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* One soft neutral light from above. Not a colour wash — room lighting. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 78% at 50% -12%, rgba(255, 255, 255, 0.05), transparent 62%);
}

button,
input,
textarea,
output {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 9px 15px;
  border-radius: 0 0 10px 10px;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s var(--ease);
}
.skip:focus-visible {
  transform: translate(-50%, 0);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background: rgba(10, 132, 255, 0.35);
}

/* --- 3. App shell -------------------------------------------------------- */
.app {
  position: fixed;
  inset: var(--gutter);
  display: grid;
  grid-template-rows: var(--toolbar-h) minmax(0, 1fr);
  overflow: hidden;
  background: var(--surface-1);
}

@media (min-width: 1240px) {
  :root {
    --gutter: 14px;
  }
  .app {
    border: 1px solid var(--hairline);
    border-radius: var(--r-window);
    box-shadow: var(--shadow-window);
  }
}

.body {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--insp);
  min-height: 0;
}

/* --- 4. Toolbar ---------------------------------------------------------- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-2);
  min-width: 0;
}

.toolbar__lead {
  flex: none;
  display: flex;
  align-items: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.brand__mark {
  width: 19px;
  height: 19px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
}

.brand__name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.modes {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: var(--surface-3);
  margin-inline: auto;
  min-width: 0;
  /* Tabs never squash their labels: the strip scrolls instead of clipping
     text once four tools cannot fit. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.modes::-webkit-scrollbar {
  display: none;
}

.mode {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.mode:hover {
  color: var(--ink);
}

.mode[aria-selected='true'] {
  background: var(--surface-4);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), var(--specular);
}

.toolbar__trail {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.tb-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 10px;
  min-height: 30px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.tb-btn:hover {
  background: var(--surface-4);
  color: var(--ink);
}

.pill-count {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--surface-4);
  border-radius: 999px;
  padding: 1px 5px;
  min-width: 17px;
  text-align: center;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
  flex: none;
  transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.dot[data-state='set'] {
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.16);
}

.dot[data-state='err'] {
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(255, 69, 58, 0.16);
}

/* --- 5. Sidebar ---------------------------------------------------------- */
.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--hairline);
  background: var(--surface-2);
}

.sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 8px 14px;
  flex: none;
}

.history {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 8px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-4) transparent;
}

.history::-webkit-scrollbar {
  width: 8px;
}
.history::-webkit-scrollbar-thumb {
  background: var(--surface-4);
  border-radius: 4px;
  border: 2px solid var(--surface-2);
}

.history__empty {
  padding: 6px 6px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}

.thumb {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 6px;
  border: 1px solid var(--hairline);
  background: var(--stage);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: border-color 0.16s var(--ease), transform 0.16s var(--ease);
}

.thumb:hover {
  border-color: var(--hairline-2);
}

.thumb[aria-current='true'] {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line);
}

.thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.thumb__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 7px 5px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.78);
  text-align: left;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
}

/* --- 6. Stage ------------------------------------------------------------ */
.stage-col {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  background: var(--surface-1);
}

.stage {
  position: relative;
  margin: 10px 10px 0;
  border-radius: var(--r-lg);
  background: var(--stage);
  overflow: hidden;
  display: grid;
  place-items: center;
  container-type: size;
  box-shadow: inset 0 0 0 1px var(--hairline);
}

/* The frame is always the shape you asked for, before anything exists.
   cqw/cqh make it fit the stage exactly, minus room for the dock. */
.frame {
  --frame-w: max(
    110px,
    min(100cqw - 40px, (100cqh - var(--dock-reserve)) * var(--ratio, 1))
  );
  position: relative;
  width: var(--frame-w);
  height: calc(var(--frame-w) / var(--ratio, 1));
  border-radius: 6px;
  overflow: hidden;
  display: grid;
  place-items: center;
  transition: width 0.34s var(--ease), height 0.34s var(--ease);
}

.frame__ghost {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  text-align: center;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.012) 0 8px,
    transparent 8px 16px
  );
}

.frame__hint {
  font-size: 13px;
  color: var(--ink-3);
  max-width: 30ch;
  line-height: 1.5;
}

.suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  max-width: 52ch;
}

.suggest__chip {
  appearance: none;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 1.3;
  padding: 5px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease),
    background 0.16s var(--ease);
}

.suggest__chip:hover {
  color: var(--ink-2);
  border-color: var(--hairline-2);
  background: rgba(255, 255, 255, 0.045);
}

.frame__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 22px 60px -22px rgba(0, 0, 0, 0.9);
  animation: settle 0.45s var(--ease-out) both;
}

@keyframes settle {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.frame__busy {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 15px;
  border-radius: 999px;
  /* Deliberately not `inset: 0` with an opaque fill. While a second image
     renders, the previous result has to stay visible — a progress panel that
     erases your own artwork is not a loading state, it is data loss on screen.
     A compact capsule reads as "busy" and gives the picture back. */
  background: rgba(24, 24, 27, 0.82);
  box-shadow:
    0 14px 40px -16px rgba(0, 0, 0, 0.9),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  pointer-events: none;
  z-index: 3;
}

.progress {
  width: 84px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.progress__bar {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  animation: sweep 1.5s var(--ease-out) infinite;
}

@keyframes sweep {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(290%);
  }
}

.busy__label {
  font-size: 12.5px;
  /* --ink, not --ink-3: the capsule can float over a bright photograph, and a
     mid-grey label on a translucent pill is the one combination in this layout
     that can genuinely fail contrast. */
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* filmstrip — only when a run returns more than one image */
.filmstrip {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  z-index: 3;
}

.filmstrip__item {
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--hairline-2);
  background: var(--stage);
  cursor: pointer;
  opacity: 0.62;
  transition: opacity 0.16s var(--ease), border-color 0.16s var(--ease);
}

.filmstrip__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.filmstrip__item:hover {
  opacity: 1;
}

.filmstrip__item[aria-current='true'] {
  opacity: 1;
  border-color: var(--accent);
}

/* hover actions — glass over the picture */
.imgbar {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(24, 24, 28, 0.6);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-float), var(--specular);
  z-index: 4;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  pointer-events: none;
}

.stage:hover .imgbar[data-show='true'],
.imgbar:focus-within {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.imgbar__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 9px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}

.imgbar__btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
}

/* --- 7. The dock — the one place glass genuinely earns its keep ---------- */
.dock {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 7px 7px 7px 14px;
  border-radius: 14px;
  background: rgba(26, 26, 30, 0.58);
  -webkit-backdrop-filter: blur(36px) saturate(180%);
  backdrop-filter: blur(36px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 46px -16px rgba(0, 0, 0, 0.88), var(--specular);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.dock:focus-within {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(28, 28, 33, 0.68);
}

.dock__input {
  flex: 1;
  min-width: 0;
  max-height: 128px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.5;
  resize: none;
  outline: none;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-4) transparent;
}

.dock__input::placeholder {
  color: var(--ink-3);
}

.dock__side {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --- 8. Stage bar -------------------------------------------------------- */
.stage-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 8px;
  min-height: 30px;
  font-size: 11.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.stage-bar__gap {
  flex: 1;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status[data-kind='ok'] {
  color: var(--ink-2);
}

.status[data-kind='err'] {
  color: var(--danger);
}

.status[data-kind='busy'] {
  color: var(--ink-2);
}

.meta {
  color: var(--ink-3);
  white-space: nowrap;
}

/* --- 9. Inspector -------------------------------------------------------- */
.inspector {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--hairline);
  background: var(--surface-2);
}

.inspector__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 0 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-4) transparent;
}

.inspector__scroll::-webkit-scrollbar {
  width: 8px;
}
.inspector__scroll::-webkit-scrollbar-thumb {
  background: var(--surface-4);
  border-radius: 4px;
  border: 2px solid var(--surface-2);
}

.inspector__foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  border-top: 1px solid var(--hairline);
  font-size: 11.5px;
  color: var(--ink-3);
}

.foot__est {
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sect {
  padding: 12px 14px 13px;
  border-bottom: 1px solid var(--hairline);
}

.sect:last-child {
  border-bottom: 0;
}

/* Section labels: sentence case, semibold, dim. No mono, no wide tracking —
   that uppercase-letterspaced treatment is the single biggest "AI dashboard"
   tell and it is deliberately absent. */
.sect-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0;
  margin-bottom: 9px;
}

.sidebar__head .sect-label,
.inspector__head .sect-label {
  margin: 0;
}

.sect__note {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* model rows */
.model-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.model {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}

.model:hover {
  background: var(--surface-3);
}

.model[aria-checked='true'] {
  background: var(--surface-3);
  border-color: var(--hairline-2);
}

.model__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--ink-3);
  transition: background 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.model[aria-checked='true'] .model__dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.model__body {
  min-width: 0;
  flex: 1;
}

.model__name {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.model[aria-checked='true'] .model__name {
  color: var(--ink);
}

.model__sub {
  display: block;
  font-size: 10.5px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* aspect ratio glyphs */
.ratios {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin-bottom: 11px;
}

.ratio {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 7px 0 5px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  cursor: pointer;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}

.ratio:hover {
  background: var(--surface-3);
}

.ratio__box {
  border: 1.5px solid var(--ink-3);
  border-radius: 2px;
  transition: border-color 0.16s var(--ease);
}

.ratio__k {
  font-size: 9.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.ratio[aria-pressed='true'] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.ratio[aria-pressed='true'] .ratio__box {
  border-color: var(--accent);
}

.ratio[aria-pressed='true'] .ratio__k {
  color: var(--accent-ink);
}

/* segmented control */
.seg {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-md);
  background: var(--surface-3);
}

.seg__btn {
  appearance: none;
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 0;
  min-height: 26px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.seg__btn:hover {
  color: var(--ink);
}

.seg__btn[aria-pressed='true'] {
  background: var(--surface-4);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), var(--specular);
}

.seg--tight .seg__btn {
  font-size: 11.5px;
}

/* rows */
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
}

.row--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}

.row + .row {
  margin-top: 7px;
}

.row__label {
  font-size: 12px;
  color: var(--ink-2);
  flex: none;
}

.row__group {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.row .seg {
  flex: 1;
  max-width: 168px;
}

/* style chips */
.styles {
  /* A wrapping flex row of variable-width pills produced three ragged lines of
     three, four and three — the single most "assembled by machine" detail in
     the panel. Equal columns are calmer and make the selected state read as a
     position in a set rather than a highlighted word. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.style-chip {
  appearance: none;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-2);
  font-size: 12px;
  padding: 4px 9px;
  min-height: 26px;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.16s var(--ease), background 0.16s var(--ease),
    border-color 0.16s var(--ease);
}

.style-chip:hover {
  color: var(--ink);
  border-color: var(--hairline-2);
}

.style-chip[aria-pressed='true'] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-ink);
}

/* advanced disclosure */
.adv summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
}

.adv summary::-webkit-details-marker {
  display: none;
}

.adv summary::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-right: 3px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(-45deg);
  transition: transform 0.2s var(--ease);
}

.adv[open] summary::after {
  transform: rotate(45deg);
}

.sect-label--sum {
  margin-bottom: 0;
}

.adv__body {
  padding-top: 10px;
}

/* source drop zone */
.source {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-3);
  min-height: 74px;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}

.source[data-drag='true'] {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.source__thumb {
  width: 100%;
  max-height: 132px;
  object-fit: contain;
  background: var(--stage);
}

.source__empty {
  padding: 14px 10px;
  text-align: center;
}

.source__text {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-bottom: 5px;
}

.source__clear {
  position: absolute;
  right: 6px;
  bottom: 6px;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-sm);
  background: rgba(20, 20, 24, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--ink-2);
  font-size: 11px;
  padding: 3px 7px;
  cursor: pointer;
}

.source__clear:hover {
  color: var(--ink);
}

/* --- 10. Controls -------------------------------------------------------- */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 13px;
  min-height: 30px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s var(--ease), color 0.16s var(--ease),
    opacity 0.16s var(--ease), transform 0.12s var(--ease);
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  /* --accent (#0a84ff) with white text measures 3.67:1 — below AA. The
     purpose-built --accent-fill clears 4.5:1, so the fill (not the ring
     colour) is what the label sits on. */
  background: var(--accent-fill);
  color: #fff;
  font-weight: 600;
  padding-inline: 14px;
  min-height: 36px;
}

.btn--primary:hover {
  background: var(--accent-fill-hover);
}

.btn--primary:disabled {
  background: var(--surface-4);
  color: var(--ink-3);
  cursor: not-allowed;
  transform: none;
}

.btn--quiet {
  background: var(--surface-3);
  color: var(--ink-2);
  border-color: var(--hairline);
}

.btn--quiet:hover {
  background: var(--surface-4);
  color: var(--ink);
}

.btn__kbd {
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.66);
  letter-spacing: 0.02em;
  padding-left: 2px;
}

.btn--primary:disabled .btn__kbd {
  color: var(--ink-3);
}

.icon-btn {
  appearance: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.icon-btn:hover {
  background: var(--surface-4);
  color: var(--ink);
}

.link-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 500;
  padding: 2px 0;
  min-height: 22px;
  cursor: pointer;
  border-radius: 4px;
}

.link-btn:hover {
  color: #a3cbff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.input {
  appearance: none;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--ink);
  font-size: 12.5px;
  padding: 6px 9px;
  min-height: 30px;
  outline: none;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}

.input::placeholder {
  color: var(--ink-3);
}

.input:focus {
  border-color: var(--accent-line);
  background: var(--surface-4);
}

.input--num {
  width: 96px;
  font-variant-numeric: tabular-nums;
}

.input--key {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.01em;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 1px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  overflow: hidden;
}

.stepper .icon-btn {
  border: 0;
  border-radius: 0;
  background: transparent;
  width: 26px;
  height: 28px;
}

.stepper__v {
  min-width: 22px;
  text-align: center;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* --- 11. Sheets ---------------------------------------------------------- */
.sheet {
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-window);
  background: rgba(24, 24, 27, 0.86);
  -webkit-backdrop-filter: blur(44px) saturate(180%);
  backdrop-filter: blur(44px) saturate(180%);
  color: var(--ink);
  padding: 0;
  width: min(440px, calc(100vw - 28px));
  max-height: min(86dvh, 720px);
  box-shadow: var(--shadow-window), var(--specular);
  overflow: hidden;
}

.sheet--wide {
  width: min(860px, calc(100vw - 28px));
}

.sheet::backdrop {
  background: rgba(0, 0, 0, 0.58);
}

.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 96vw;
  max-height: 96dvh;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.9);
}

.lightbox img {
  max-width: 96vw;
  max-height: 94dvh;
  object-fit: contain;
  border-radius: 8px;
}

.sheet__form {
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: inherit;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-4) transparent;
}

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 3px;
}

.sheet__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.014em;
}

.sheet__sub {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 14px;
  max-width: 52ch;
}

.sheet__actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 14px;
}

.field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sheet__note {
  margin-top: 9px;
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

.sheet__note[data-kind='err'] {
  color: var(--danger);
}

.sheet__foot {
  margin-top: 9px;
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.5;
}

.check-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.check-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  overflow: hidden;
}

.check-list li span:first-child {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.check-list .ok {
  color: var(--ok);
  flex: none;
}

.check-list .no {
  color: var(--danger);
  flex: none;
}

/* library grid */
.grid-lib {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 6px;
}

.grid-lib__item {
  position: relative;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--stage);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
}

.grid-lib__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid-lib__item:hover {
  border-color: var(--accent-line);
}

.grid-lib__empty {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--ink-3);
  padding: 8px 0;
}

/* --- 12. Toast ----------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 14px);
  z-index: 300;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(30, 30, 34, 0.9);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--hairline-2);
  box-shadow: var(--shadow-float);
  font-size: 12.5px;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
  max-width: min(440px, calc(100vw - 32px));
  text-align: center;
}

.toast[data-show='true'] {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast[data-kind='err'] {
  border-color: rgba(255, 69, 58, 0.4);
}

/* --- 13. Mode visibility ------------------------------------------------- */
.only-create,
.only-restyle,
.only-edit,
.only-expand,
.only-source {
  display: none;
}

body[data-mode='create'] .only-create,
body[data-mode='restyle'] .only-restyle,
body[data-mode='edit'] .only-edit,
body[data-mode='expand'] .only-expand,
body[data-mode='restyle'] .only-source,
body[data-mode='edit'] .only-source,
body[data-mode='expand'] .only-source {
  display: block;
}

body[data-mode='restyle'] .suggest,
body[data-mode='edit'] .suggest,
body[data-mode='expand'] .suggest {
  display: none;
}

.only-narrow {
  display: none !important;
}

/* --- 14. Responsive ------------------------------------------------------ */
@media (max-width: 1239px) {
  :root {
    --rail: 190px;
    --insp: 284px;
  }
}

@media (max-width: 1079px) {
  :root {
    --insp: 268px;
    --rail: 0px;
  }
  .sidebar {
    display: none;
  }
  .body {
    grid-template-columns: minmax(0, 1fr) var(--insp);
  }
}

/* Below 900px it stops being a three-column window and becomes a single
   surface with a settings sheet — the same way a mobile pro app behaves. */
@media (max-width: 899px) {
  :root {
    --dock-reserve: 26px;
    --toolbar-h: 50px;
  }

  .body {
    grid-template-columns: minmax(0, 1fr);
  }

  .only-narrow {
    display: flex !important;
  }

  .toolbar {
    gap: 8px;
    padding: 0 8px 0 12px;
  }

  .modes {
    margin-inline: 0;
    flex: 1;
    min-width: 0;
  }

  .mode {
    flex: 0 0 auto;
    padding: 5px 9px;
  }

  .btn--primary {
    /* touch breakpoints get a taller primary target */
    min-height: 42px;
  }

  .brand__name {
    display: none;
  }

  .inspector {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    max-height: 82dvh;
    border-left: 0;
    border-top: 1px solid var(--hairline-2);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -22px 60px -18px rgba(0, 0, 0, 0.9);
    transform: translateY(101%);
    transition: transform 0.34s var(--ease);
    background: var(--surface-2);
  }

  .inspector[data-open='true'] {
    transform: none;
  }

  .inspector__grip {
    width: 34px;
    height: 4px;
    border-radius: 2px;
    background: var(--surface-4);
    margin: 8px auto 2px;
  }

  .inspector__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px 10px;
    border-bottom: 1px solid var(--hairline);
  }

  .dock {
    position: static;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-top: 1px solid var(--hairline);
    background: var(--surface-2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border-radius: 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) 12px;
    align-items: center;
  }

  .stage {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    grid-row: 1;
  }

  .stage-col {
    grid-template-rows: minmax(0, 1fr) auto auto;
  }

  .stage-bar {
    padding: 5px 14px 4px;
  }

  .frame {
    --frame-w: max(96px, min(100cqw - 24px, (100cqh - var(--dock-reserve)) * var(--ratio, 1)));
  }

  .imgbar {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    top: 8px;
    right: 8px;
  }

  .imgbar__btn {
    padding: 6px 8px;
  }

  .filmstrip {
    top: auto;
    bottom: 8px;
  }

  .grid-lib {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }
}

@media (max-width: 520px) {
  .mode {
    font-size: 12px;
    padding: 5px 8px;
  }
  .ratios {
    grid-template-columns: repeat(4, 1fr);
  }
  .suggest {
    display: none;
  }
  .frame__hint {
    font-size: 12px;
  }
}

/* --- 15. Motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .progress__bar {
    width: 100%;
    transform: none;
    opacity: 0.4;
  }
}