/*
 * Canonical Image Studio control layer.
 *
 * The base workflow comes from image-studio.css. Retained .image-beta-2
 * selectors are compatibility hooks for the production document and scripts.
 */

/* CraftyAI logo palette: warm orange flowing into vivid pink. */
html[data-theme="light"] .image-beta-2 {
  --accent-yellow:#ff9a32;
  --accent-apricot:#ff721f;
  --accent-peach:#fa6042;
  --accent-warm:#f24d55;
  --accent-pink:#eb3278;
  --accent-gold:#ff9a32;
  --accent-teal:#f24d55;
  --action:#ed4a46;
  --focus:#ef4767;
  --brand-gradient:linear-gradient(125deg,#ff861f 0%,#ff641f 36%,#f34c50 68%,#e92f7a 100%);
  --ambient-a:rgba(243,76,80,.13);
  --ambient-b:rgba(255,112,31,.11);
  --ambient-pink:rgba(233,47,122,.11);
  --ambient-apricot:rgba(255,104,31,.13);
  --ambient-yellow:rgba(255,145,42,.11);
  --surface-pink:rgba(233,47,122,.06);
}

html[data-theme="dark"] .image-beta-2 {
  --accent-yellow:#ffad50;
  --accent-apricot:#ff843d;
  --accent-peach:#ff7765;
  --accent-warm:#ff6471;
  --accent-pink:#f45391;
  --accent-gold:#ffad50;
  --accent-teal:#ff6471;
  --action:#ff6757;
  --focus:#ff647d;
  --brand-gradient:linear-gradient(125deg,#ff963d 0%,#ff7138 36%,#fa5967 68%,#f0448a 100%);
  --ambient-a:rgba(218,61,78,.28);
  --ambient-b:rgba(231,91,34,.22);
  --ambient-pink:rgba(240,68,138,.17);
  --surface-pink:rgba(240,68,138,.075);
}

.image-beta-2 .btn.btn-primary,
.image-beta-2 .beta-quickstart-generate,
.image-beta-2 .sidebar-balance-cta,
.image-beta-2 .beta-reference-library-upload,
.image-beta-2 .beta-reference-tile.has-reference .beta-reference-plus {
  border-color:transparent!important;
  background:var(--brand-gradient)!important;
}

/* Replace the large top bar with a quiet, integrated tool rail. */
.image-beta-2 #header.studio-toolbar {
  grid-template-columns:minmax(44px,1fr) auto minmax(44px,1fr);
  height:60px!important;
  min-height:60px!important;
  padding:0 clamp(18px,2.4vw,38px)!important;
  border:0!important;
  background:transparent!important;
}

html[data-theme="light"] .image-beta-2 #header.studio-toolbar {
  background:transparent!important;
}

html[data-theme="light"] .image-beta-2 .app-workspace {
  background:
    radial-gradient(920px 640px at 102% -8%,rgba(235,47,120,.17),transparent 68%),
    radial-gradient(940px 680px at 48% -12%,rgba(255,100,31,.24),transparent 70%),
    radial-gradient(760px 560px at -5% 106%,rgba(255,143,38,.16),transparent 72%),
    linear-gradient(138deg,#f3e6d8 0%,#ecd4c2 48%,#f0d9d2 100%)!important;
}

.image-beta-2 .beta-side {
  background:
    radial-gradient(300px 420px at -8% 8%,color-mix(in srgb,var(--accent-apricot) 12%,transparent),transparent 72%),
    radial-gradient(320px 480px at 108% 92%,color-mix(in srgb,var(--accent-pink) 9%,transparent),transparent 74%),
    var(--layer-1);
}

html[data-theme="dark"] .image-beta-2 .beta-side {
  background:
    radial-gradient(300px 420px at -8% 8%,color-mix(in srgb,var(--accent-apricot) 10%,transparent),transparent 72%),
    radial-gradient(320px 480px at 108% 92%,color-mix(in srgb,var(--accent-pink) 8%,transparent),transparent 74%),
    var(--layer-1);
}

/* A few key surfaces behave like quiet translucent panes, not solid cards. */
.image-beta-2 .beta-quickstart-composer,
.image-beta-2 #gen-controls .beta-brief-workspace {
  background:
    radial-gradient(110% 140% at 0% 0%,color-mix(in srgb,var(--accent-apricot) 10%,transparent),transparent 58%),
    radial-gradient(120% 150% at 100% 100%,color-mix(in srgb,var(--accent-pink) 9%,transparent),transparent 62%),
    linear-gradient(135deg,color-mix(in srgb,var(--layer-3) 78%,transparent),color-mix(in srgb,var(--layer-2) 62%,transparent))!important;
  background-size:170% 170%!important;
  backdrop-filter:blur(14px) saturate(1.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  animation:beta-2-ambient-tile 22s ease-in-out infinite alternate;
}

.image-beta-2 .beta-settings-stack .beta-control-row,
.image-beta-2 #gen-controls .beta-board-assets > .beta-control-row,
.image-beta-2 .beta-2-mode-menu {
  background:color-mix(in srgb,var(--layer-3) 72%,transparent)!important;
  backdrop-filter:blur(12px) saturate(1.06);
  -webkit-backdrop-filter:blur(12px) saturate(1.06);
}

@keyframes beta-2-ambient-tile {
  0% { background-position:0% 18%; }
  50% { background-position:72% 48%; }
  100% { background-position:100% 82%; }
}

@media (prefers-reduced-motion:reduce) {
  .image-beta-2 .beta-quickstart-composer,
  .image-beta-2 #gen-controls .beta-brief-workspace {
    animation:none;
    background-position:50% 50%!important;
  }
}

.image-beta-2 .beta-side-language {
  max-height:44px;
  opacity:1;
  transform:translateY(0) scale(1);
  transform-origin:top center;
  visibility:visible;
  transition:
    width .56s cubic-bezier(.22,1,.36,1),
    height .56s cubic-bezier(.22,1,.36,1),
    min-height .56s cubic-bezier(.22,1,.36,1),
    max-height .56s cubic-bezier(.22,1,.36,1),
    margin .56s cubic-bezier(.22,1,.36,1),
    padding .56s cubic-bezier(.22,1,.36,1),
    border-width .3s ease,
    opacity .26s ease .16s,
    transform .56s cubic-bezier(.22,1,.36,1),
    visibility 0s linear 0s!important;
}

.image-beta-2 .beta-side-nav {
  transition:margin-top .56s cubic-bezier(.22,1,.36,1);
}

.image-beta-2.beta-sidebar-collapsed .beta-side-language {
  display:grid!important;
  width:48px!important;
  height:0!important;
  min-height:0!important;
  max-height:0;
  margin:0 2px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  border-width:0!important;
  opacity:0;
  overflow:hidden;
  transform:translateY(-8px) scale(.9);
  visibility:hidden;
  pointer-events:none;
  transition:
    width .56s cubic-bezier(.22,1,.36,1),
    height .56s cubic-bezier(.22,1,.36,1),
    min-height .56s cubic-bezier(.22,1,.36,1),
    max-height .56s cubic-bezier(.22,1,.36,1),
    margin .56s cubic-bezier(.22,1,.36,1),
    padding .56s cubic-bezier(.22,1,.36,1),
    border-width .3s ease,
    opacity .18s ease,
    transform .48s cubic-bezier(.22,1,.36,1),
    visibility 0s linear .56s!important;
}

.image-beta-2.beta-sidebar-collapsed .beta-side-nav {
  margin-top:4px!important;
}

.image-beta-2 .beta-topbar-heading {
  gap:0;
  padding:0;
  transform:none;
}

.image-beta-2 .beta-topbar-product,
.image-beta-2 .beta-topbar-dot,
.image-beta-2 .beta-topbar-heading {
  display:none!important;
}

.image-beta-2 .beta-topbar-context {
  min-width:0;
  background:none;
  color:var(--text);
  font-size:24px;
  font-weight:600;
  letter-spacing:-.03em;
}

.image-beta-2 #nav {
  align-self:center;
  width:auto;
  height:38px;
  padding:3px 0;
  gap:5px;
  border:0;
  border-radius:0;
  background:transparent;
}

.image-beta-2 #nav .nav-btn,
.image-beta-2 #nav .nav-btn.active {
  position:relative;
  z-index:2;
  flex:0 0 auto;
  width:38px;
  height:30px;
  min-height:30px;
  padding:0!important;
  gap:0;
  border-radius:9px!important;
}

.image-beta-2 #nav .nav-btn {
  color:var(--text-faint);
  background:transparent!important;
}

.image-beta-2 #nav .nav-btn:hover {
  background:transparent!important;
  color:var(--text);
}

.image-beta-2 #nav .nav-btn.active {
  width:auto;
  padding:0 12px!important;
  gap:7px;
  border:0!important;
  background:transparent!important;
  color:var(--text);
  box-shadow:none!important;
}

.image-beta-2 #nav .nav-btn > span {
  display:none;
}

.image-beta-2 #nav .nav-btn.active > span {
  display:block;
  max-width:82px;
  opacity:1;
  color:inherit;
  font-size:11px;
  font-weight:750;
  transform:none;
}

.image-beta-2 #nav .nav-btn svg {
  width:17px;
  height:17px;
}

.image-beta-2 .beta-nav-indicator {
  position:absolute;
  z-index:1;
  top:3px;
  bottom:auto;
  display:block;
  height:30px;
  border:1px solid color-mix(in srgb,var(--line-strong) 82%,transparent);
  border-radius:9px;
  background:var(--layer-3);
  box-shadow:0 7px 18px -15px var(--shadow);
  transition:
    transform .5s cubic-bezier(.22,1,.36,1),
    width .5s cubic-bezier(.22,1,.36,1),
    background-color .22s ease,
    border-color .22s ease;
}

/* At body level --layer-3/--line-strong still resolve to the legacy tan palette in
   light mode, which left this pill beige on an otherwise white tool rail. */
html:not([data-theme="dark"]) .image-beta-2 .beta-nav-indicator {
  border-color:#dad6ce;
  background:#fff;
}

@media (prefers-reduced-motion:reduce) {
  .image-beta-2 .beta-nav-indicator {
    transition-duration:.01ms;
  }
}

.image-beta-2 .beta-theme-toggle {
  width:38px;
  height:38px;
  justify-content:center;
  padding:0;
}

.image-beta-2 .beta-theme-label {
  display:none;
}

.image-beta-2 #main {
  padding-top:0;
}

/* The generation environment stays compact until the user asks to switch. */
.image-beta-2 .gen-mode-row {
  position:relative;
  z-index:12;
  margin:0 0 14px!important;
}

.image-beta-2 .gen-mode-strip.beta-2-mode-selector {
  position:relative;
  display:block;
  width:max-content;
  height:34px;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  box-shadow:none;
  transition:background-color .2s ease;
}

.image-beta-2 .gen-mode-strip.beta-2-mode-selector:hover,
.image-beta-2 .gen-mode-strip.beta-2-mode-selector.is-open {
  background:color-mix(in srgb,var(--layer-3) 55%,transparent);
  box-shadow:none;
}

.image-beta-2 .beta-2-mode-trigger {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:auto;
  height:34px;
  padding:0 9px 0 10px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.image-beta-2 .beta-2-mode-trigger-copy {
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  min-width:0;
  gap:7px;
}

.image-beta-2 .beta-2-mode-trigger-copy small {
  color:var(--text-faint);
  font-size:8px;
  font-weight:750;
  line-height:1;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.image-beta-2 .beta-2-mode-trigger-copy strong {
  overflow:hidden;
  color:var(--text);
  font-size:10.5px;
  font-weight:750;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.image-beta-2 .beta-2-mode-chevron {
  width:6px;
  height:6px;
  margin-left:14px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  opacity:.55;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .18s ease;
}

.image-beta-2 .beta-2-mode-selector.is-open .beta-2-mode-chevron {
  transform:translateY(2px) rotate(225deg);
}

.image-beta-2 .beta-2-mode-menu {
  position:absolute;
  top:41px;
  left:0;
  z-index:4;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  width:min(600px,calc(100vw - 48px));
  padding:6px;
  border:1px solid var(--line-strong);
  border-radius:15px;
  background:var(--layer-3);
  box-shadow:0 22px 46px -24px var(--shadow);
  opacity:0;
  visibility:hidden;
  transform:translateY(-7px) scale(.98);
  transform-origin:top left;
  pointer-events:none;
  transition:opacity .16s ease,transform .2s cubic-bezier(.22,1,.36,1),visibility 0s linear .2s;
}

.image-beta-2 .beta-2-mode-selector.is-open .beta-2-mode-menu {
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto;
  transition-delay:0s;
}

.image-beta-2 .beta-2-mode-menu > .gen-mode-btn {
  position:relative;
  display:flex;
  width:100%;
  min-height:72px;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
  padding:10px 12px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  text-align:left;
  text-transform:none;
  letter-spacing:0;
}

.image-beta-2 .beta-2-mode-menu > .gen-mode-btn:hover,
.image-beta-2 .beta-2-mode-menu > .gen-mode-btn.active {
  margin:0;
  background:var(--layer-2)!important;
  color:var(--text)!important;
}

.image-beta-2 .beta-2-mode-menu > .gen-mode-btn strong {
  color:var(--text);
  font-size:11px;
  font-weight:750;
}

.image-beta-2 .beta-2-mode-menu > .gen-mode-btn small {
  color:var(--text-faint);
  font-size:9px;
  font-weight:500;
  line-height:1.3;
  white-space:normal;
}

.image-beta-2 .beta-2-mode-menu > .gen-mode-btn.active::after {
  content:"";
  position:absolute;
  top:50%;
  right:12px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent-warm);
  transform:translateY(-50%);
}

.image-beta-2 .beta-2-mode-selector > .beta-mode-highlight {
  display:none!important;
}

@media (max-width:620px) {
  .image-beta-2 .beta-2-mode-menu {
    width:calc(100vw - 40px);
    overflow-x:auto;
    grid-template-columns:repeat(3,minmax(150px,1fr));
  }
}

/* Rebuilt toolbar chooser. The native row remains only as the workflow source. */
.image-beta-2 #gen-controls > .gen-mode-row { display:none!important; }
.image-beta-2 .beta-2-toolbar-mode { position:relative;z-index:70;grid-column:1;grid-row:1;align-self:center;justify-self:start;margin-left:0;opacity:1;transform:translateY(0);transition:opacity .18s ease,transform .32s cubic-bezier(.22,1,.36,1),visibility 0s; }
.image-beta-2 .beta-2-toolbar-mode.is-hidden { opacity:0;visibility:hidden;transform:translateY(-5px);pointer-events:none;transition:opacity .15s ease,transform .25s ease,visibility 0s linear .25s; }
.image-beta-2 .beta-2-toolbar-mode-trigger { display:grid;grid-template-columns:minmax(0,1fr) 8px;align-items:center;gap:12px;width:190px;height:42px;padding:0 14px;border:1px solid color-mix(in srgb,var(--line-strong) 78%,transparent);border-radius:12px;background:color-mix(in srgb,var(--layer-3) 78%,transparent);color:var(--text);font:inherit;cursor:pointer;box-shadow:0 8px 22px -20px var(--shadow);backdrop-filter:blur(10px);transition:background-color .2s ease,border-color .2s ease; }
.image-beta-2 .beta-2-toolbar-mode-trigger:hover,.image-beta-2 .beta-2-toolbar-mode.is-open .beta-2-toolbar-mode-trigger { border-color:var(--text-faint);background:color-mix(in srgb,var(--layer-3) 94%,transparent); }
.image-beta-2 .beta-2-toolbar-mode-current { overflow:hidden;font-size:14px;font-weight:750;text-align:left;letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap; }
.image-beta-2 .beta-2-toolbar-mode-chevron { width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;opacity:.5;transform:translateY(-2px) rotate(45deg);transition:transform .24s ease; }
.image-beta-2 .beta-2-toolbar-mode.is-open .beta-2-toolbar-mode-chevron { transform:translateY(2px) rotate(225deg); }
.image-beta-2 .beta-2-toolbar-mode-panel { position:absolute;top:50px;left:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:570px;padding:7px;border:1px solid var(--line-strong);border-radius:17px;background:color-mix(in srgb,var(--layer-3) 94%,transparent);box-shadow:0 26px 58px -28px var(--shadow);backdrop-filter:blur(18px) saturate(1.08);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px) scale(.975);transform-origin:top left;transition:opacity .16s ease,transform .24s cubic-bezier(.22,1,.36,1),visibility 0s linear .24s; }
.image-beta-2 .beta-2-toolbar-mode.is-open .beta-2-toolbar-mode-panel { opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s; }
.image-beta-2 .beta-2-toolbar-mode-option { position:relative;display:flex;align-items:center;min-width:0;height:76px;padding:0 16px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,transform .2s ease; }
.image-beta-2 .beta-2-toolbar-mode-option:hover { background:var(--layer-2);transform:translateY(-1px); }
.image-beta-2 .beta-2-toolbar-mode-option[aria-selected="true"] { border-color:color-mix(in srgb,var(--accent-warm) 34%,var(--line));background:color-mix(in srgb,var(--accent-warm) 8%,var(--layer-2)); }
.image-beta-2 .beta-2-toolbar-mode-option strong,.image-beta-2 .beta-2-toolbar-mode-option small { display:block; }
.image-beta-2 .beta-2-toolbar-mode-option strong { margin-bottom:5px;font-size:14px;font-weight:780;letter-spacing:-.01em; }
.image-beta-2 .beta-2-toolbar-mode-option small { color:var(--text-faint);font-size:10px;line-height:1.35;white-space:normal; }

/* Roomier top composition, aligned to the content planes below. */
.image-beta-2 #header.studio-toolbar {
  height:84px!important;
  min-height:84px!important;
  padding-top:10px!important;
  padding-bottom:10px!important;
}
.image-beta-2 .beta-2-toolbar-mode { margin-left:22px; }
.image-beta-2 .beta-2-toolbar-mode-trigger {
  width:202px;
  height:46px;
  padding:0 16px;
  border-radius:14px;
}
.image-beta-2 .beta-2-toolbar-mode-current { font-size:15px; }
.image-beta-2 .beta-2-toolbar-mode-panel { top:54px; }
.image-beta-2 #nav {
  height:48px;
  padding:4px 0;
  gap:8px;
}
.image-beta-2 #nav .nav-btn,
.image-beta-2 #nav .nav-btn.active {
  width:44px;
  height:40px;
  min-height:40px;
  border-radius:12px!important;
}
.image-beta-2 #nav .nav-btn.active {
  width:auto;
  padding:0 16px!important;
  gap:9px;
}
.image-beta-2 #nav .nav-btn svg { width:20px;height:20px; }
.image-beta-2 #nav .nav-btn.active > span {
  max-width:92px;
  font-size:12.5px;
}
.image-beta-2 .beta-nav-indicator {
  top:4px;
  height:40px;
  border-radius:12px;
}
.image-beta-2 .beta-theme-toggle {
  width:44px;
  height:44px;
}
.image-beta-2 .beta-theme-icon {
  width:25px;
  height:25px;
  flex-basis:25px;
}

/* Advanced mode: Style takes the former large Model plane; Model takes Style's compact slot. */
.image-beta-2 .beta-settings-board[data-board-model="gen-model"].beta-2-settings-swapped {
  grid-template-columns:minmax(0,1fr) minmax(220px,1fr);
  grid-template-rows:310px 146px;
  align-items:stretch;
  column-gap:12px;
  row-gap:0;
}
.image-beta-2 .beta-settings-board[data-board-model="gen-model"].beta-2-settings-swapped > .beta-2-expanded-style {
  position:relative!important;
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr)!important;
  grid-template-rows:auto auto minmax(118px,1fr)!important;
  column-gap:12px;
  row-gap:8px;
  grid-column:1;
  grid-row:1;
  height:310px!important;
  min-height:310px!important;
  margin:0!important;
  padding:22px 18px 16px!important;
  border:1px solid var(--line)!important;
  border-radius:18px 18px 0 0!important;
  background:color-mix(in srgb,var(--layer-2) 68%,transparent)!important;
  overflow:hidden!important;
  box-sizing:border-box;
  cursor:default!important;
}
.image-beta-2 .beta-2-expanded-style > .beta-control-icon {
  position:static!important;
  grid-column:1;
  grid-row:1/3;
  width:38px!important;
  height:38px!important;
  transform:none!important;
}
.image-beta-2 .beta-2-expanded-style > .beta-setting-heading-copy {
  position:static!important;
  grid-column:2;
  grid-row:1;
  margin:0!important;
}
.image-beta-2 .beta-2-expanded-style > .beta-setting-heading-copy .compose-label { font-size:20px!important; }
.image-beta-2 .beta-2-expanded-style > .beta-style-toggle {
  position:static!important;
  grid-column:2;
  grid-row:2;
  min-height:30px!important;
  height:30px!important;
  font-size:14px!important;
  pointer-events:none;
}
.image-beta-2 .beta-2-expanded-style > .beta-style-toggle svg { display:none; }
.image-beta-2 .beta-2-expanded-style > .beta-style-menu {
  position:relative!important;
  inset:auto!important;
  grid-column:1/-1;
  grid-row:3;
  align-self:stretch;
  min-height:0;
  margin-top:6px;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
}
.image-beta-2 .beta-2-expanded-style .beta-option-menu-head { display:none; }
.image-beta-2 .beta-2-expanded-style .beta-option-menu-scroll {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
  max-height:118px;
  padding:10px 0 0;
  overflow-y:auto;
}
.image-beta-2 .beta-style-preview-extension {
  grid-column:1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;
  width:100%;height:146px;min-height:146px;margin:-1px 0 0;padding:14px 18px 16px;border:1px solid var(--line);border-top-color:color-mix(in srgb,var(--line-strong) 70%,var(--line));border-radius:0 0 18px 18px;
  background:color-mix(in srgb,var(--layer-3) 64%,transparent);box-sizing:border-box;overflow:visible;pointer-events:none;
}
.image-beta-2 .beta-style-preview-visual {
  position:relative;align-self:stretch;min-height:100px;overflow:hidden;border:1px dashed color-mix(in srgb,var(--line-strong) 76%,transparent);border-radius:13px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--layer-4) 52%,transparent),color-mix(in srgb,var(--layer-2) 62%,transparent));
}
.image-beta-2 .beta-style-preview-visual img { display:none;width:100%;height:100%;object-fit:cover; }
.image-beta-2 .beta-style-preview-extension.has-image .beta-style-preview-visual { border-style:solid; }
.image-beta-2 .beta-style-preview-extension.has-image .beta-style-preview-visual img { display:block; }
.image-beta-2 .beta-style-preview-placeholder { position:absolute;inset:0;display:grid;place-content:center;gap:5px;color:var(--text-faint);text-align:center; }
.image-beta-2 .beta-style-preview-placeholder b { color:var(--accent-warm);font-family:var(--font-display);font-size:22px;font-weight:500; }
.image-beta-2 .beta-style-preview-placeholder small { font-size:9px;font-weight:650;letter-spacing:.06em;text-transform:uppercase; }
.image-beta-2 .beta-style-preview-extension.has-image .beta-style-preview-placeholder { display:none; }
.image-beta-2 .beta-style-preview-copy { min-width:112px;padding-bottom:2px;text-align:right; }
.image-beta-2 .beta-style-preview-copy small,.image-beta-2 .beta-style-preview-copy strong { display:block; }
.image-beta-2 .beta-style-preview-copy small { margin-bottom:5px;color:var(--text-faint);font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; }
.image-beta-2 .beta-style-preview-copy strong { max-width:150px;color:var(--text);font-size:11px;font-weight:760;line-height:1.25; }
.image-beta-2 .beta-settings-board[data-board-model="gen-model"].beta-2-settings-swapped .beta-settings-stack > .size-style-row {
  grid-template-rows:96px auto!important;
}
.image-beta-2 .beta-settings-board[data-board-model="gen-model"].beta-2-settings-swapped > .beta-settings-stack {
  grid-column:2;grid-row:1/3;height:100%;min-height:0;align-self:stretch;
}

/* Standalone Style Studio. The legacy style control is retained only as a hidden data source. */
.image-beta-2 .beta-2-style-studio {
  position:relative;grid-column:1;grid-row:1/3;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:0;height:456px;min-height:456px;
  border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--layer-2) 68%,transparent);overflow:hidden;box-sizing:border-box;
}
.image-beta-2 #gen-controls .beta-settings-board[data-board-model="gen-model"] .beta-2-style-studio > .beta-2-style-source { display:none!important; }
.image-beta-2 .beta-2-style-studio-head { display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:18px 20px 15px;border-bottom:1px solid var(--line); }
.image-beta-2 .beta-2-style-studio-head span small,.image-beta-2 .beta-2-style-studio-head span strong { display:block; }
.image-beta-2 .beta-2-style-studio-head span small { margin-bottom:4px;color:var(--accent-warm);font-size:8px;font-weight:760;letter-spacing:.1em;text-transform:uppercase; }
.image-beta-2 .beta-2-style-studio-head span strong { color:var(--text);font-family:var(--font-display);font-size:25px;font-weight:580;line-height:1;letter-spacing:-.03em; }
.image-beta-2 .beta-2-style-studio-head p { max-width:210px;margin:0;color:var(--text-faint);font-size:9px;line-height:1.4;text-align:right; }
.image-beta-2 .beta-2-style-trigger { display:flex;align-items:center;justify-content:space-between;gap:14px;margin:12px 14px;padding:10px 13px;border:1px solid var(--line-strong);border-radius:12px;background:color-mix(in srgb,var(--layer-3) 76%,transparent);color:var(--text);font:inherit;text-align:left;cursor:pointer; }
.image-beta-2 .beta-2-style-trigger span small,.image-beta-2 .beta-2-style-trigger span strong { display:block; }
.image-beta-2 .beta-2-style-trigger span small { margin-bottom:3px;color:var(--text-faint);font-size:7.5px;font-weight:720;letter-spacing:.07em;text-transform:uppercase; }
.image-beta-2 .beta-2-style-trigger span strong { font-size:12px;font-weight:720; }
.image-beta-2 .beta-2-style-trigger i { width:7px;height:7px;margin-right:3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;opacity:.52;transform:translateY(-2px) rotate(45deg);transition:transform .22s ease; }
.image-beta-2 .beta-2-style-studio.is-open .beta-2-style-trigger i { transform:translateY(2px) rotate(225deg); }
.image-beta-2 .beta-2-style-list { position:absolute;z-index:90;top:132px;left:14px;right:14px;display:grid;align-content:start;gap:3px;max-height:232px;padding:8px;overflow-y:auto;border:1px solid var(--line-strong);border-radius:14px;background:color-mix(in srgb,var(--layer-3) 97%,transparent);box-shadow:0 22px 46px -26px var(--shadow);scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-7px) scale(.985);transform-origin:top;transition:opacity .15s ease,transform .22s cubic-bezier(.22,1,.36,1),visibility 0s linear .22s; }
.image-beta-2 .beta-2-style-studio.is-open .beta-2-style-list { opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s; }
.image-beta-2 .beta-2-style-list button { min-height:38px;padding:8px 10px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--text-soft);font:inherit;text-align:left;cursor:pointer; }
.image-beta-2 .beta-2-style-list button:hover { background:color-mix(in srgb,var(--layer-3) 70%,transparent);color:var(--text); }
.image-beta-2 .beta-2-style-list button[aria-selected="true"] { border-color:color-mix(in srgb,var(--accent-warm) 32%,var(--line));background:color-mix(in srgb,var(--accent-warm) 7%,var(--layer-3));color:var(--text); }
.image-beta-2 .beta-2-style-list button strong { display:block;overflow:hidden;font-size:10.5px;font-weight:680;text-overflow:ellipsis;white-space:nowrap; }
.image-beta-2 .beta-2-style-canvas { display:grid;grid-template-rows:minmax(0,1fr);min-width:0;min-height:0;margin:0 14px 14px;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--layer-3) 42%,transparent); }
.image-beta-2 .beta-2-style-canvas-media { position:relative;min-height:0;margin:10px;overflow:hidden;border:1px dashed var(--line-strong);border-radius:11px;background:linear-gradient(145deg,color-mix(in srgb,var(--layer-4) 54%,transparent),color-mix(in srgb,var(--layer-2) 72%,transparent)); }
.image-beta-2 .beta-2-style-canvas-media img { display:none;width:100%;height:100%;object-fit:contain;background:color-mix(in srgb,var(--layer-4) 36%,transparent); }
.image-beta-2 .beta-2-style-canvas.has-image .beta-2-style-canvas-media { border-style:solid; }
.image-beta-2 .beta-2-style-canvas.has-image .beta-2-style-canvas-media img { display:block; }
.image-beta-2 .beta-2-style-canvas-media > span { position:absolute;inset:0;display:grid;place-content:center;gap:6px;padding:18px;color:var(--text-faint);text-align:center; }
.image-beta-2 .beta-2-style-canvas.has-image .beta-2-style-canvas-media > span { display:none; }
.image-beta-2 .beta-2-style-canvas-media b { color:var(--accent-warm);font-family:var(--font-display);font-size:28px;font-weight:500; }
.image-beta-2 .beta-2-style-canvas-media small { font-size:9px;font-weight:620; }

/* The detailed copy belongs to the large page preview, over the artwork. */
.image-beta-2 #panel-generate .split-right > .style-showcase:not(.compact) { position:relative; }
.image-beta-2 #panel-generate .split-right > .style-showcase:not(.compact) > img { width:100%;height:100%;max-height:none;object-fit:contain; }
.image-beta-2 #panel-generate .split-right > .style-showcase:not(.compact) > .ss-meta {
  position:absolute;z-index:3;top:18px;left:18px;right:18px;padding:13px 15px;border:1px solid color-mix(in srgb,var(--line-strong) 72%,transparent);border-radius:14px;
  background:color-mix(in srgb,var(--layer-3) 82%,transparent);box-shadow:0 16px 34px -26px var(--shadow);backdrop-filter:blur(14px) saturate(1.06);-webkit-backdrop-filter:blur(14px) saturate(1.06);
}
.image-beta-2 #panel-generate .split-right > .style-showcase:not(.compact) > .ss-meta .ss-desc { max-width:720px; }
.image-beta-2 .beta-2-style-meta-toggle {
  position:absolute;top:9px;right:9px;display:grid;width:28px;height:28px;place-items:center;padding:0;border:1px solid color-mix(in srgb,var(--line-strong) 72%,transparent);border-radius:50%;
  background:color-mix(in srgb,var(--layer-4) 82%,transparent);color:var(--text-soft);font:inherit;font-size:15px;line-height:1;cursor:pointer;transition:background-color .18s ease,color .18s ease,transform .22s ease;
}
.image-beta-2 .beta-2-style-meta-toggle:hover { background:var(--layer-4);color:var(--text);transform:scale(1.04); }
.image-beta-2 #panel-generate .split-right > .style-showcase:not(.compact) > .ss-meta {
  left:auto;width:calc(100% - 36px);max-height:240px;padding-right:52px;overflow:hidden;transform-origin:right top;
  transition:width .52s cubic-bezier(.22,1,.36,1),max-height .46s cubic-bezier(.22,1,.36,1),padding .46s cubic-bezier(.22,1,.36,1),border-radius .42s ease,box-shadow .42s ease;
}
.image-beta-2 #panel-generate .split-right > .style-showcase:not(.compact) > .ss-meta > :not(.beta-2-style-meta-toggle) {
  opacity:1;transform:translateX(0);visibility:visible;transition:opacity .22s ease .2s,transform .42s cubic-bezier(.22,1,.36,1) .1s,visibility 0s linear 0s;
}
.image-beta-2 #panel-generate .split-right > .style-showcase.is-meta-collapsed:not(.compact) > .ss-meta {
  width:44px;max-height:44px;padding:0;border-radius:50%;box-shadow:0 10px 24px -18px var(--shadow);
}
.image-beta-2 #panel-generate .split-right > .style-showcase.is-meta-collapsed:not(.compact) > .ss-meta > :not(.beta-2-style-meta-toggle) {
  opacity:0;transform:translateX(18px);visibility:hidden;pointer-events:none;transition:opacity .12s ease,transform .24s ease,visibility 0s linear .24s;
}
.image-beta-2 #panel-generate .split-right > .style-showcase.is-meta-collapsed:not(.compact) .beta-2-style-meta-toggle { top:0;right:0;width:42px;height:42px;border:0;background:transparent;color:var(--text);font-family:var(--font-display);font-size:15px;font-weight:650; }
@media (prefers-reduced-motion:reduce) {
  .image-beta-2 #panel-generate .split-right > .style-showcase:not(.compact) > .ss-meta,
  .image-beta-2 #panel-generate .split-right > .style-showcase:not(.compact) > .ss-meta > :not(.beta-2-style-meta-toggle) { transition-duration:.01ms!important;transition-delay:0s!important; }
}

@media (max-width:760px) {
  .image-beta-2 .beta-settings-board[data-board-model="gen-model"].beta-2-settings-swapped {
    grid-template-columns:1fr;grid-template-rows:310px 146px auto;row-gap:0;
  }
  .image-beta-2 .beta-settings-board[data-board-model="gen-model"].beta-2-settings-swapped > .beta-2-expanded-style { grid-column:1;grid-row:1; }
  .image-beta-2 .beta-settings-board[data-board-model="gen-model"].beta-2-settings-swapped > .beta-style-preview-extension { grid-column:1;grid-row:2; }
  .image-beta-2 .beta-settings-board[data-board-model="gen-model"].beta-2-settings-swapped > .beta-settings-stack { grid-column:1;grid-row:3;height:auto;margin-top:12px; }
  .image-beta-2 .beta-settings-board[data-board-model="gen-model"].beta-2-settings-swapped > .beta-2-style-studio { grid-column:1;grid-row:1/3; }
}
.image-beta-2 .beta-2-compact-model {
  position:relative;
  z-index:45;
  width:100%;
  height:96px!important;
  min-height:96px!important;
  margin:0!important;
  overflow:visible!important;
}
.image-beta-2 .beta-2-compact-model > .beta-model-picker-toggle {
  min-height:94px;
  height:94px;
  padding:12px 14px;
  cursor:pointer;
}
.image-beta-2 .beta-2-compact-model > .beta-model-picker-toggle > .beta-model-heading-icon,
.image-beta-2 .beta-2-compact-model > .beta-model-picker-toggle > .beta-setting-heading-copy { display:none; }
.image-beta-2 .beta-2-compact-model .beta-model-current {
  display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:11px;min-width:0;flex:1;margin:0;text-align:left;
}
.image-beta-2 .beta-model-current-logo { display:grid;width:36px;height:36px;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--layer-4);color:var(--text);font-size:8px;font-weight:800; }
.image-beta-2 .beta-model-current-logo img { width:19px;height:19px;object-fit:contain; }
html[data-theme="dark"] .image-beta-2 .beta-model-current-logo img[data-provider="openai"],
html[data-theme="dark"] .image-beta-2 .beta-model-current-logo img[data-provider="xai"] { filter:invert(1); }
.image-beta-2 .beta-model-current-copy { display:grid;min-width:0;gap:2px; }
.image-beta-2 .beta-2-compact-model .beta-model-current small { color:var(--text-faint);font-size:8px;font-weight:720;letter-spacing:.07em;text-transform:uppercase; }
.image-beta-2 .beta-2-compact-model .beta-model-current strong { overflow:hidden;color:var(--text);font-size:14px;font-weight:740;letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap; }
.image-beta-2 .beta-2-compact-model .beta-model-current em { overflow:hidden;color:var(--text-faint);font-size:9px;font-style:normal;font-weight:520;text-overflow:ellipsis;white-space:nowrap; }
.image-beta-2 .beta-2-compact-model > .beta-model-picker-toggle::after {
  content:"";
  width:7px;
  height:7px;
  margin-left:auto;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  opacity:.5;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .22s ease;
}
.image-beta-2 .beta-2-compact-model.is-open > .beta-model-picker-toggle::after { transform:translateY(2px) rotate(225deg); }
.image-beta-2 .beta-2-compact-model > .beta-model-menu {
  position:absolute;
  z-index:80;
  top:calc(100% + 8px);
  left:0;
  right:0;
  display:grid;
  max-height:290px;
  gap:3px;padding:8px;
  border:1px solid var(--line-strong);
  border-radius:16px;
  background:color-mix(in srgb,var(--layer-3) 96%,transparent);
  box-shadow:0 24px 48px -26px var(--shadow);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-8px) scale(.985);
  transform-origin:top;
  transition:opacity .16s ease,transform .25s cubic-bezier(.22,1,.36,1),visibility 0s linear .25s;
}
.image-beta-2 .beta-2-compact-model .beta-model-highlight { display:none; }
.image-beta-2 .beta-2-compact-model .beta-model-option { min-height:50px;padding:7px 10px;border:1px solid transparent;border-radius:10px; }
.image-beta-2 .beta-2-compact-model .beta-model-option:hover { border-color:var(--line);background:var(--layer-3); }
.image-beta-2 .beta-2-compact-model .beta-model-option[aria-selected="true"] { border-color:color-mix(in srgb,var(--accent-warm) 32%,var(--line));background:color-mix(in srgb,var(--accent-warm) 7%,var(--layer-3)); }
.image-beta-2 .beta-2-compact-model .beta-model-option-copy strong::after { display:none; }
.image-beta-2 .beta-2-compact-model.is-open > .beta-model-menu {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
  transition-delay:0s;
}

/* AI Quickstart rebuilt as a progressive, conversational workflow. */
.image-beta-2 .beta-2-quickstart { padding:10px 2px 28px; }
.image-beta-2 .beta-2-quickstart-head { max-width:620px;padding:8px 8px 22px; }
.image-beta-2 .beta-2-quickstart-head > span { display:block;margin-bottom:9px;color:var(--accent-warm);font-size:9px;font-weight:820;letter-spacing:.13em;text-transform:uppercase; }
.image-beta-2 .beta-2-quickstart-head h2 { margin:0;color:var(--text);font-family:var(--font-display);font-size:clamp(30px,3vw,44px);font-weight:540;line-height:.98;letter-spacing:-.04em; }
.image-beta-2 .beta-2-quickstart-head p { margin:11px 0 0;color:var(--text-soft);font-size:11px;line-height:1.5; }
.image-beta-2 .beta-2-quickstart-flow { display:grid;gap:12px; }
.image-beta-2 .beta-2-quickstart-step { border:1px solid color-mix(in srgb,var(--line) 78%,transparent);border-radius:22px;background:color-mix(in srgb,var(--layer-3) 72%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--layer-4) 68%,transparent);backdrop-filter:blur(14px) saturate(1.06); }
.image-beta-2 .beta-2-quickstart-step[hidden] { display:none; }
.image-beta-2 .beta-2-step-label { display:flex;align-items:center;gap:11px;padding:16px 18px 12px; }
.image-beta-2 .beta-2-step-label > b { display:grid;width:25px;height:25px;flex:0 0 25px;place-items:center;border:1px solid color-mix(in srgb,var(--accent-warm) 35%,var(--line));border-radius:50%;color:var(--accent-warm);font-size:9px; }
.image-beta-2 .beta-2-step-label span strong,.image-beta-2 .beta-2-step-label span small { display:block; }
.image-beta-2 .beta-2-step-label strong { color:var(--text);font-family:var(--font-display);font-size:17px;font-weight:620; }
.image-beta-2 .beta-2-step-label small { margin-top:2px;color:var(--text-faint);font-size:9px; }
.image-beta-2 #beta-2-quickstart-prompt { display:block;width:calc(100% - 36px);min-height:132px;margin:0 18px;padding:16px;border:1px solid var(--line);border-radius:15px;background:color-mix(in srgb,var(--layer-4) 58%,transparent);color:var(--text);font:inherit;font-size:15px;line-height:1.55;resize:vertical;box-shadow:none; }
.image-beta-2 #beta-2-quickstart-prompt:focus { border-color:var(--focus)!important;box-shadow:0 0 0 1px var(--focus)!important; }
.image-beta-2 .beta-2-brief-footer { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px 16px; }
.image-beta-2 .beta-2-brief-footer > span { color:var(--text-faint);font-size:8px;font-weight:680;letter-spacing:.07em;text-transform:uppercase; }
.image-beta-2 #beta-2-recommend { min-width:148px;height:40px;padding:0 14px;border:0;border-radius:12px;background:var(--brand-gradient);color:#fff;font:inherit;font-size:10px;font-weight:760;cursor:pointer;box-shadow:0 13px 24px -20px var(--shadow);transition:transform .2s ease,opacity .2s ease; }
.image-beta-2 #beta-2-recommend:hover:not(:disabled) { transform:translateY(-1px); }
.image-beta-2 #beta-2-recommend:disabled { opacity:.38;cursor:not-allowed; }
.image-beta-2 .beta-2-style-reply { padding:0 0 17px; }
.image-beta-2 .beta-2-assistant-line { display:flex;align-items:center;gap:11px;margin-bottom:14px; }
.image-beta-2 .beta-2-assistant-line > span { display:grid;width:29px;height:29px;flex:0 0 29px;place-items:center;border-radius:10px;background:var(--brand-gradient);color:#fff;font-size:10px; }
.image-beta-2 .beta-2-assistant-line strong,.image-beta-2 .beta-2-assistant-line small { display:block; }
.image-beta-2 .beta-2-assistant-line strong { color:var(--text);font-size:11px;font-weight:760; }
.image-beta-2 .beta-2-assistant-line small { margin-top:3px;color:var(--text-faint);font-size:9px; }
.image-beta-2 .beta-2-style-recommendations { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 17px; }
.image-beta-2 .beta-2-style-recommendations button { position:relative;display:flex;min-width:0;min-height:105px;flex-direction:column;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:15px;background:color-mix(in srgb,var(--layer-2) 58%,transparent);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,transform .24s cubic-bezier(.22,1,.36,1); }
.image-beta-2 .beta-2-style-recommendations button:hover { border-color:color-mix(in srgb,var(--accent-warm) 50%,var(--line));transform:translateY(-2px); }
.image-beta-2 .beta-2-style-recommendations button[aria-selected="true"] { border-color:var(--accent-warm);background:color-mix(in srgb,var(--accent-warm) 9%,var(--layer-3));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-warm) 18%,transparent); }
.image-beta-2 .beta-2-style-recommendations button > span { margin-bottom:auto;color:var(--accent-warm);font-size:8px;font-weight:800;letter-spacing:.08em; }
.image-beta-2 .beta-2-style-recommendations button strong { margin:13px 0 5px;font-family:var(--font-display);font-size:16px;font-weight:620; }
.image-beta-2 .beta-2-style-recommendations button small { color:var(--text-faint);font-size:8.5px;line-height:1.35; }
.image-beta-2 .beta-2-finish-step { padding-bottom:17px; }
.image-beta-2 .beta-2-finish-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 17px 14px; }
.image-beta-2 .beta-2-asset-choice,.image-beta-2 .beta-2-size-choice { position:relative;display:flex;min-width:0;min-height:76px;flex-direction:column;justify-content:center;padding:12px 42px 12px 13px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--layer-2) 58%,transparent);color:var(--text);font:inherit;text-align:left;transition:border-color .2s ease,background-color .2s ease,transform .24s cubic-bezier(.22,1,.36,1); }
.image-beta-2 .beta-2-asset-choice:hover,.image-beta-2 .beta-2-asset-choice.is-library-open,.image-beta-2 .beta-2-size-choice:hover,.image-beta-2 .beta-2-size-choice.is-open { border-color:color-mix(in srgb,var(--accent-warm) 50%,var(--line));background:color-mix(in srgb,var(--accent-warm) 5%,var(--layer-2));transform:translateY(-2px); }
.image-beta-2 button.beta-2-asset-choice { cursor:pointer; }
.image-beta-2 .beta-2-asset-choice strong,.image-beta-2 .beta-2-size-choice strong { font-size:10px;font-weight:760; }
.image-beta-2 .beta-2-asset-choice small,.image-beta-2 .beta-2-size-choice small { margin-top:4px;color:var(--text-faint);font-size:8px;line-height:1.3; }
.image-beta-2 .beta-2-asset-choice em { position:absolute;top:50%;right:13px;display:grid;width:24px;height:24px;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--text-soft);font-size:12px;font-style:normal;transform:translateY(-50%); }
.image-beta-2 .beta-2-asset-choice.has-value { border-color:color-mix(in srgb,var(--accent-warm) 48%,var(--line));background:color-mix(in srgb,var(--accent-warm) 7%,var(--layer-3)); }
.image-beta-2 .beta-2-asset-choice.has-value em { border-color:var(--accent-warm);background:var(--accent-warm);color:#fff; }
.image-beta-2 .beta-2-size-choice { min-height:76px;padding:9px 11px;overflow:visible;cursor:pointer; }
.image-beta-2 .beta-2-ratio-trigger { display:flex;width:100%;min-width:0;height:36px;align-items:center;gap:8px;margin-top:4px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--layer-3) 56%,transparent);color:var(--text);font:inherit;cursor:pointer;transition:border-color .18s ease,background-color .18s ease; }
.image-beta-2 .beta-2-ratio-trigger:hover,.image-beta-2 .beta-2-size-choice.is-open .beta-2-ratio-trigger { border-color:var(--accent-warm); }
.image-beta-2 .beta-2-ratio-trigger span { min-width:0;flex:1;overflow:hidden;font-size:9px;font-weight:720;text-align:left;text-overflow:ellipsis;white-space:nowrap; }
.image-beta-2 .beta-2-ratio-trigger b { width:6px;height:6px;margin-right:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;opacity:.5;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease; }
.image-beta-2 .beta-2-size-choice.is-open .beta-2-ratio-trigger b { transform:translateY(2px) rotate(225deg); }
.image-beta-2 .beta-2-ratio-menu { position:absolute;z-index:90;top:50%;right:calc(100% + 9px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;width:400px;padding:5px;border:1px solid var(--line-strong);border-radius:10px;background:var(--layer-3);box-shadow:0 12px 28px -20px var(--shadow);overflow:visible;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-50%);transform-origin:right center;transition:opacity .08s ease,visibility 0s linear .08s; }
.image-beta-2 .beta-2-size-choice.is-open .beta-2-ratio-menu { opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%);transition-delay:0s; }
.image-beta-2 .beta-2-ratio-menu button { display:flex;width:100%;min-width:0;height:40px;align-items:center;gap:7px;padding:0 10px;border:0;border-radius:5px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background-color .08s ease; }
.image-beta-2 .beta-2-ratio-menu button:hover,.image-beta-2 .beta-2-ratio-menu button:focus-visible { outline:0;background:var(--layer-2); }
.image-beta-2 .beta-2-ratio-menu button[aria-selected="true"] { background:color-mix(in srgb,var(--accent-warm) 10%,var(--layer-2)); }
.image-beta-2 .beta-2-ratio-menu button > span { min-width:0;flex:1; }
.image-beta-2 .beta-2-ratio-menu strong,.image-beta-2 .beta-2-ratio-menu small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.image-beta-2 .beta-2-ratio-menu strong { font-size:8.5px;font-weight:680; }
.image-beta-2 .beta-2-ratio-menu small { display:none; }
.image-beta-2 .beta-2-ratio-menu button > b { flex:0 0 auto;color:var(--text-faint);font-size:8px;font-weight:700; }
.image-beta-2 .beta-2-generate { display:flex;width:calc(100% - 34px);height:52px;align-items:center;justify-content:space-between;margin:0 17px;padding:0 9px 0 18px;border:0;border-radius:15px;background:var(--brand-gradient);color:#fff;font:inherit;font-size:11px;font-weight:780;cursor:pointer;box-shadow:0 16px 30px -22px var(--shadow);transition:transform .22s ease,filter .2s ease; }
.image-beta-2 .beta-2-generate:hover:not(:disabled) { filter:brightness(1.04);transform:translateY(-1px); }
.image-beta-2 .beta-2-generate b { display:grid;min-width:54px;height:36px;padding:0 10px;place-items:center;border-radius:11px;background:rgba(255,255,255,.14);font-size:12px; }
.image-beta-2 .beta-2-generate:disabled { opacity:.56;cursor:wait; }
.image-beta-2 .beta-2-style-reply.is-entering,.image-beta-2 .beta-2-finish-step.is-entering { animation:beta-2-step-in .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes beta-2-step-in { from { opacity:0;transform:translateY(12px); } to { opacity:1;transform:none; } }

@media (max-width:700px) {
  .image-beta-2 .beta-2-style-recommendations,.image-beta-2 .beta-2-finish-grid { grid-template-columns:1fr; }
  .image-beta-2 .beta-2-ratio-menu { top:auto;right:0;bottom:calc(100% + 7px);left:auto;display:block;width:min(310px,calc(100vw - 64px));max-height:min(292px,55vh);overflow-y:auto;transform:none;transform-origin:bottom right; }
  .image-beta-2 .beta-2-size-choice.is-open .beta-2-ratio-menu { transform:none; }
  .image-beta-2 .beta-2-brief-footer { align-items:stretch;flex-direction:column; }
}

@media (max-width:980px) {
  .image-beta-2 .beta-2-toolbar-mode { position:absolute;top:90px;left:14px;justify-self:auto;margin:0; }
  .image-beta-2 .beta-2-toolbar-mode-panel { right:auto;left:0;width:min(570px,calc(100vw - 28px)); }
  .image-beta-2 #main { padding-top:54px; }
}

/* Keep the secondary prompt-building stage out of the canonical control rail. */
.image-beta-2 .beta-preview-command {
  display:none!important;
}

@media (max-width:760px) {
  .image-beta-2 #header.studio-toolbar {
    grid-template-columns:40px minmax(0,1fr) 40px!important;
    height:58px!important;
    min-height:58px!important;
    padding:0 12px!important;
  }

  .image-beta-2 .beta-topbar-heading {
    display:none;
  }

  .image-beta-2 .beta-2-toolbar-mode { top:64px; }
  .image-beta-2 #main { padding-top:50px; }

  .image-beta-2 #nav {
    grid-column:2;
    grid-row:1;
    justify-self:center;
  }

  .image-beta-2 .beta-theme-toggle {
    grid-column:3;
    grid-row:1;
  }
}