/* Clean workspace redesign: larger unified panels, proportional controls, no overlap. */
@font-face {
  font-family: "Source Han Sans SC Web";
  src:
    local("Source Han Sans SC"),
    local("Source Han Sans CN"),
    url("./fonts/SourceHanSansSC-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.primary-button.generation-submit.is-busy {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  cursor: progress !important;
  filter: saturate(1.06) brightness(1.02) !important;
}

.primary-button.generation-submit.is-busy::after {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  background: linear-gradient(
    112deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.12) 36%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0) 68%
  ) !important;
  transform: translateX(-120%) !important;
  animation: generationSubmitSweep 1.45s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.primary-button.generation-submit.is-busy .primary-button__label,
.primary-button.generation-submit.is-busy .primary-button__count {
  position: relative !important;
  z-index: 2 !important;
}

@keyframes generationSubmitSweep {
  0% {
    transform: translateX(-120%);
  }

  58%,
  100% {
    transform: translateX(120%);
  }
}

@font-face {
  font-family: "Source Han Sans SC Web";
  src:
    local("Source Han Sans SC Medium"),
    local("Source Han Sans SC"),
    url("./fonts/SourceHanSansSC-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Han Sans SC Web";
  src:
    local("Source Han Sans SC Bold"),
    local("Source Han Sans SC"),
    url("./fonts/SourceHanSansSC-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ui-bg: #ffffff;
  --ui-sidebar: #f7f7f8;
  --ui-panel: #ffffff;
  --ui-surface: #ffffff;
  --ui-surface-soft: #ffffff;
  --ui-surface-muted: #ffffff;
  --ui-hover: #eceff3;
  --ui-line: #ebebed;
  --ui-line-strong: #d1d6de;
  --ui-text: #111111;
  --ui-text-soft: #1f2329;
  --ui-text-muted: #4f5662;
  --ui-selected: #e2e6ec;
  --ui-shadow: 0 1px 2px rgba(23, 23, 23, 0.02);
  --ui-radius-lg: 26px;
  --ui-radius-md: 18px;
  --ui-radius-sm: 12px;
  --ui-btn-h: 34px;
  --ui-btn-h-sm: 30px;
}

[hidden] {
  display: none !important;
}

html,
body {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
textarea {
  font-family:
    "Microsoft YaHei UI",
    "Segoe UI Variable",
    "Segoe UI",
    "PingFang SC",
    Arial,
    sans-serif !important;
  font-kerning: normal !important;
  font-synthesis: none !important;
}

body::before {
  display: none !important;
}

.studio-layout {
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  height: 100svh !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.nav-rail {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100svh !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 12px 12px 12px 8px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-right: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  background: var(--ui-sidebar) !important;
  box-shadow: none !important;
}

.nav-brand {
  display: grid !important;
  gap: 2px !important;
  padding: 4px 6px 10px !important;
  margin-bottom: 6px !important;
  border-bottom: 1px solid var(--ui-line) !important;
}

.nav-brand .eyebrow {
  margin: 0 !important;
  color: var(--ui-text-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 12px !important;
  letter-spacing: 0.08em !important;
}

.nav-brand h1 {
  margin: 0 !important;
  color: var(--ui-text) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 23px !important;
}

.nav-rail__head {
  display: none !important;
}

.nav-rail__group {
  display: grid !important;
  gap: 6px !important;
}

.nav-rail__label,
.api-settings__summary .nav-rail__label {
  color: var(--ui-text-soft) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding-left: 6px !important;
}

.nav-rail__item,
.nav-rail__login {
  min-height: var(--ui-btn-h) !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  border-radius: var(--ui-radius-sm) !important;
  background: transparent !important;
  color: var(--ui-text-soft) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: calc(var(--ui-btn-h) - 2px) !important;
  text-align: left !important;
  box-shadow: none !important;
}

.nav-rail__item:hover,
.nav-rail__login:hover {
  background: var(--ui-hover) !important;
  color: var(--ui-text) !important;
  transform: none !important;
}

.nav-rail__item.is-active {
  position: relative !important;
  background: var(--ui-selected) !important;
  color: var(--ui-text) !important;
}

.nav-rail__item.is-active::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 10px !important;
  bottom: 10px !important;
  width: 2px !important;
  border-radius: 999px !important;
  background: #c9c9cc !important;
}

.nav-rail__spacer {
  flex: 1 1 auto !important;
  min-height: 12px !important;
}

.nav-rail__footer {
  display: grid !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  margin-top: auto !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--ui-line) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.nav-rail__points,
.api-settings {
  border: 1px solid var(--ui-line) !important;
  border-radius: 16px !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
}

.nav-rail__points {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 2px 8px !important;
  align-items: start !important;
  padding: 10px 12px !important;
}

.nav-rail__points span,
.nav-rail__points small,
.api-settings__hint {
  color: var(--ui-text-muted) !important;
  font-size: 11px !important;
  line-height: 15px !important;
}

.nav-rail__points span {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.nav-rail__points strong {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  color: var(--ui-text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.nav-rail__points small {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.api-settings {
  padding: 10px 10px !important;
}

.api-settings__summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 28px !important;
  padding: 0 !important;
  color: var(--ui-text-soft) !important;
}

.api-settings__summary strong {
  color: var(--ui-text-soft) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

.api-settings__summary::after {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-muted) !important;
}

.nav-rail__footer .api-settings__body,
.api-settings__body {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: grid !important;
  gap: 6px !important;
  padding: 8px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.api-field span {
  color: var(--ui-text-muted) !important;
  font-size: 10px !important;
}

.api-field input,
.api-field select {
  width: 100% !important;
  min-width: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 10px !important;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text) !important;
  box-sizing: border-box !important;
}

.nav-rail__save {
  min-height: var(--ui-btn-h) !important;
  padding: 0 14px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 999px !important;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.app-shell {
  width: min(calc(100% - 84px), 1360px) !important;
  height: 100svh !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 8px 0 12px !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
}

.topbar {
  display: none !important;
}

.topbar__brand {
  display: none !important;
}

.topbar__brand .eyebrow {
  display: none !important;
}

.topbar__brand h1 {
  margin: 0 !important;
  color: var(--ui-text) !important;
  font-size: 17px !important;
  line-height: 22px !important;
  font-weight: 760 !important;
}

.topbar__brand p:not(.eyebrow) {
  max-width: 680px !important;
  margin: 0 !important;
  color: var(--ui-text-soft) !important;
  font-size: 11px !important;
  line-height: 14px !important;
  white-space: normal !important;
}

.topbar__stats {
  display: inline-flex !important;
  align-items: stretch !important;
  justify-self: end !important;
  min-height: 36px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 16px !important;
  background: var(--ui-surface) !important;
}

.stat-card {
  min-height: 0 !important;
  padding: 7px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.stat-card + .stat-card {
  border-left: 1px solid var(--ui-line) !important;
}

.stat-card span {
  color: var(--ui-text-muted) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  line-height: 12px !important;
}

.stat-card strong {
  margin-top: 3px !important;
  color: var(--ui-text) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 15px !important;
}

.workspace {
  display: grid !important;
  grid-template-columns: 304px minmax(0, 1fr) !important;
  gap: 14px !important;
  min-height: 0 !important;
  height: 100% !important;
  padding-top: 0 !important;
  align-items: stretch !important;
}

.control-panel,
.results-board {
  min-width: 0 !important;
  min-height: 0 !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: #ffffff !important;
  box-shadow: var(--ui-shadow) !important;
  overflow: hidden !important;
}

.control-panel {
  display: grid !important;
  grid-template-rows: auto auto minmax(168px, 1fr) !important;
  gap: 8px !important;
  padding: 8px 12px 12px !important;
  align-content: start !important;
  background: #fbfbfc !important;
  overflow-y: auto !important;
}

.upload-card,
.control-card {
  min-height: 0 !important;
  padding: 10px 14px 12px !important;
  border: 1px solid #eef1f4 !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.control-panel > :last-child {
  border-bottom: 0 !important;
}

.upload-card {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 2px !important;
}

.control-card--stacked {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 2px !important;
}

.upload-stack {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 4px !important;
  min-height: 0 !important;
}

.card-head,
.generation-mode-head {
  gap: 6px !important;
  align-items: center !important;
}

.control-panel .card-head {
  padding: 0 12px 0 !important;
}

.card-head h2,
.generation-mode-head h2,
.results-head h2 {
  color: var(--ui-text) !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  line-height: 18px !important;
}

.control-panel .helper-text,
.control-panel .card-head p,
.control-panel .generation-mode-head p {
  display: none !important;
}

.status-badge,
.status-badge--accent,
#generationBadge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 999px !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text-soft) !important;
  box-shadow: none !important;
}

.status-badge[hidden],
.status-badge--accent[hidden] {
  display: none !important;
}

#sceneTemplateStatus,
#productSubjectStatus {
  min-width: 60px !important;
}

.upload-dropzone,
.asset-preview__empty,
.selected-main-placeholder,
.empty-state,
.prompt-modal textarea,
.edit-modal textarea {
  border-color: var(--ui-line) !important;
  background: #ffffff !important;
  color: var(--ui-text) !important;
}

.upload-dropzone {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 5px !important;
  min-height: 0 !important;
  padding: 10px !important;
  border: 1px solid #edf0f4 !important;
  border-radius: var(--ui-radius-md) !important;
  background: #ffffff !important;
}

.upload-card .upload-dropzone {
  aspect-ratio: 1 / 1 !important;
  width: min(100%, 264px) !important;
  justify-self: center !important;
  height: auto !important;
  min-height: 0 !important;
  margin-top: -6px !important;
}

.upload-dropzone--compact {
  aspect-ratio: 1 / 1 !important;
  width: min(100%, 264px) !important;
  justify-self: center !important;
  height: auto !important;
  min-height: 0 !important;
  margin-top: -6px !important;
}

.upload-dropzone.has-image img,
.upload-dropzone img.is-visible {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

.upload-dropzone__meta {
  gap: 3px !important;
}

.upload-dropzone__meta strong {
  font-size: 12px !important;
  line-height: 17px !important;
}

.upload-dropzone__meta span {
  font-size: 11px !important;
  line-height: 15px !important;
  color: var(--ui-text-muted) !important;
}

.generation-options {
  display: grid !important;
  justify-items: center !important;
  gap: 10px !important;
  padding: 4px 8px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.option-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.option-row + .option-row {
  padding-top: 0 !important;
  border-top: 0 !important;
}

.option-row span {
  display: none !important;
}

.option-row strong {
  font-size: 12px !important;
  line-height: 16px !important;
  text-align: center !important;
}

.choice-group,
.tab-group,
.batch-download-controls {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.choice-group--setting {
  flex-wrap: nowrap !important;
  justify-content: center !important;
}

#aspectRatioGroup {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  justify-content: center !important;
}

#resolutionChoiceGroup {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  justify-content: center !important;
}

#aspectRatioGroup .choice-pill,
#resolutionChoiceGroup .choice-pill {
  width: auto !important;
  min-width: 46px !important;
}

.choice-pill,
.tab-pill,
.generation-mode-menu--inline button,
.prompt-button,
.batch-button,
.result-page-button,
.result-page-list button,
.upload-asset-actions button,
.result-card__preview-open,
.result-card__edit,
.result-card__download,
.hover-counts button,
.ghost-button,
.secondary-button,
.preview-modal__actions button,
.nav-rail__save {
  min-height: var(--ui-btn-h) !important;
  padding: 0 14px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 999px !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text-soft) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: calc(var(--ui-btn-h) - 2px) !important;
  box-shadow: none !important;
}

.choice-pill:hover:not(:disabled),
.tab-pill:hover,
.generation-mode-menu--inline button:hover,
.prompt-button:hover,
.batch-button:hover:not(:disabled),
.result-page-button:hover:not(:disabled),
.result-page-list button:hover,
.upload-asset-actions button:hover,
.result-card__preview-open:hover,
.result-card__edit:hover,
.result-card__download:hover,
.hover-counts button:hover:not(:disabled),
.ghost-button:hover,
.secondary-button:hover:not(:disabled),
.nav-rail__save:hover {
  border-color: var(--ui-line-strong) !important;
  background: var(--ui-hover) !important;
  color: var(--ui-text) !important;
  transform: none !important;
}

.choice-pill.is-selected,
.tab-pill.is-active,
.generation-mode-menu--inline button.is-active,
.result-page-list button.is-active,
.batch-button--primary,
.result-card__batch-select[aria-pressed="true"] {
  border-color: var(--ui-line-strong) !important;
  background: var(--ui-selected) !important;
  color: var(--ui-text) !important;
}

.nav-rail__item:active,
.nav-rail__login:active,
.choice-pill:active:not(:disabled),
.tab-pill:active,
.generation-mode-menu--inline button:active,
.prompt-button:active,
.batch-button:active:not(:disabled),
.result-page-button:active:not(:disabled),
.result-page-list button:active,
.upload-asset-actions button:active,
.secondary-button:active:not(:disabled),
.ghost-button:active,
.nav-rail__save:active {
  border-color: var(--ui-line-strong) !important;
  background: #dbe0e7 !important;
  color: var(--ui-text) !important;
  transform: none !important;
}

.control-panel .choice-pill,
.control-panel .generation-mode-menu--inline button,
.control-panel .tab-pill {
  min-height: var(--ui-btn-h-sm) !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  line-height: calc(var(--ui-btn-h-sm) - 2px) !important;
}

.control-panel .choice-pill {
  width: 100% !important;
  justify-content: center !important;
}

.generation-mode-menu--inline {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 122px !important;
  gap: 6px !important;
  margin-left: 0 !important;
}

.generation-mode-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  text-align: center !important;
}

#mainCountGroup {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-top: 2px !important;
  width: 100% !important;
}

#mainCountGroup .choice-pill {
  min-width: 0 !important;
}

.primary-button.generation-submit {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 999px !important;
  background: #f1f1f2 !important;
  color: var(--ui-text) !important;
  font-size: 11px !important;
  font-weight: 720 !important;
  box-shadow: none !important;
}

.primary-button__label,
.primary-button__count {
  position: static !important;
  grid-column: auto !important;
  justify-self: auto !important;
  line-height: 1 !important;
}

.primary-button__count {
  flex: 0 0 auto !important;
  min-width: 56px !important;
  padding: 4px 8px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  color: var(--ui-text-soft) !important;
  font-size: 10px !important;
}

.control-panel > .control-card:last-child {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-content: space-between !important;
  justify-items: center !important;
  gap: 14px !important;
  min-height: 100% !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.control-panel > .control-card:last-child .card-head,
.control-panel > .control-card:last-child .generation-mode-head,
.control-panel > .control-card:last-child h2 {
  width: 100% !important;
  text-align: center !important;
}

.upload-card .card-head,
.control-card--stacked .card-head {
  position: relative !important;
  padding-right: 78px !important;
}

#sceneTemplateStatus,
#productSubjectStatus {
  position: absolute !important;
  right: 12px !important;
  z-index: 3 !important;
}

#sceneTemplateStatus {
  top: 0 !important;
}

#productSubjectStatus {
  top: -34px !important;
  right: 12px !important;
}

.primary-button.generation-submit:disabled,
.primary-button:disabled,
.secondary-button:disabled,
.ghost-button:disabled,
.batch-button:disabled,
.result-page-button:disabled,
.choice-pill:disabled,
#editSubmitBtn:disabled {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface-soft) !important;
  color: #b5b5bb !important;
  opacity: 1 !important;
}

.primary-button:disabled .primary-button__count {
  border-color: var(--ui-line) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: #b5b5bb !important;
}

.primary-button.is-disabled {
  cursor: pointer !important;
}

.primary-button.is-disabled .primary-button__count {
  border-color: var(--ui-line) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: #b5b5bb !important;
}

.results-board {
  display: grid !important;
  grid-template-rows: auto 36px minmax(0, 1fr) auto !important;
  height: 100% !important;
  background: #ffffff !important;
}

.results-head {
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 10px 14px !important;
  min-height: 54px !important;
  padding: 10px 14px 8px !important;
  border-bottom: 1px solid var(--ui-line) !important;
  background: #ffffff !important;
}

.results-head > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.results-head p {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.results-head p strong {
  display: none !important;
  color: var(--ui-text) !important;
  font-size: 12px !important;
}

.results-head p span {
  display: block !important;
  color: var(--ui-text-soft) !important;
  font-size: 11px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.generation-task-queue {
  grid-row: 2 !important;
  display: block !important;
  min-height: 36px !important;
  padding: 0 14px 6px !important;
  background: #ffffff !important;
  opacity: 1 !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
}

.generation-task-queue[hidden] {
  display: block !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.generation-task-queue__bar {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px 10px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
}

.generation-task-queue__summary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(236, 240, 245, 0.96)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.generation-task-queue__summary strong {
  color: var(--ui-text) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.generation-task-queue__summary span {
  color: var(--ui-text-soft) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.generation-task-queue__chips {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}

.generation-task-queue__chips::-webkit-scrollbar {
  display: none !important;
}

.generation-task-chip {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(249, 250, 252, 0.98), rgba(236, 240, 245, 0.96)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  animation: generationChipPulse 1.6s ease-in-out infinite !important;
}

.generation-task-chip::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(112deg, rgba(226, 230, 236, 0) 0%, rgba(210, 218, 229, 0.22) 36%, rgba(255, 255, 255, 0.65) 50%, rgba(226, 230, 236, 0) 72%) !important;
  transform: translateX(-140%) !important;
  animation: generationChipSweep 2s ease-in-out infinite !important;
  pointer-events: none !important;
}

.generation-task-chip > * {
  position: relative !important;
  z-index: 1 !important;
}

.generation-task-chip strong {
  color: var(--ui-text) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.generation-task-chip em {
  color: var(--ui-text-soft) !important;
  font-size: 11px !important;
  font-style: normal !important;
  line-height: 1.2 !important;
}

.skeleton-block {
  display: block !important;
  width: 100% !important;
  aspect-ratio: var(--result-aspect, 1 / 1) !important;
  border-radius: calc(var(--ui-radius-md) - 2px) !important;
  background:
    linear-gradient(112deg, rgba(226, 230, 236, 0) 0%, rgba(209, 217, 228, 0.92) 28%, rgba(255, 255, 255, 0.96) 46%, rgba(226, 230, 236, 0) 66%),
    linear-gradient(180deg, rgba(249, 250, 252, 0.98), rgba(236, 240, 245, 0.96)) !important;
  background-size: 240% 100%, 100% 100% !important;
  animation: resultSkeletonSweep 1.28s ease-in-out infinite, resultLoadingPulse 2.2s ease-in-out infinite !important;
}

.result-card__loading-meta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 2px 8px !important;
  align-items: center !important;
  padding: 10px 12px 12px !important;
  border-top: 1px solid var(--ui-line) !important;
  background: #ffffff !important;
}

.result-card__loading-meta strong {
  color: var(--ui-text) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

.result-card__loading-meta em {
  color: var(--ui-text) !important;
  font-size: 12px !important;
  font-style: normal !important;
  line-height: 1.3 !important;
}

.result-card__loading-meta span {
  grid-column: 1 / -1 !important;
  color: var(--ui-text-soft) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

@keyframes generationChipPulse {
  0%,
  100% {
    opacity: 0.92;
    border-color: var(--ui-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  50% {
    opacity: 1;
    border-color: var(--ui-line-strong);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 0 0 1px rgba(226, 230, 236, 0.35);
  }
}

@keyframes generationChipSweep {
  0% {
    transform: translateX(-140%);
  }
  100% {
    transform: translateX(140%);
  }
}

@keyframes resultSkeletonSweep {
  0% {
    background-position: 180% 0, 0 0;
  }
  100% {
    background-position: -80% 0, 0 0;
  }
}

@keyframes resultLoadingPulse {
  0%,
  100% {
    opacity: 0.76;
  }
  50% {
    opacity: 1;
  }
}

.results-mode-switch {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(72px, 1fr)) !important;
  gap: 6px !important;
}

.results-mode-switch .tab-pill {
  justify-content: center !important;
}

.results-controls {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.results-controls .prompt-button,
.results-controls .status-badge,
.results-controls .batch-button {
  min-width: 78px !important;
  justify-content: center !important;
}

.batch-download-controls {
  flex-wrap: nowrap !important;
}

.batch-download-controls:not(.is-active) #batchSelectAllBtn,
.batch-download-controls:not(.is-active) #batchDownloadBtn,
.batch-download-controls:not(.is-active) #batchExitBtn,
.batch-download-controls.is-active #batchToggleBtn {
  display: none !important;
}

.batch-download-controls.is-active #batchSelectAllBtn,
.batch-download-controls.is-active #batchDownloadBtn,
.batch-download-controls.is-active #batchExitBtn,
.batch-download-controls:not(.is-active) #batchToggleBtn {
  display: inline-flex !important;
}

#generationBadge {
  max-width: 120px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.result-canvas {
  grid-row: 3 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  height: 100% !important;
  min-height: 0 !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.results-pane {
  display: none !important;
  min-height: 0 !important;
}

.results-pane.is-active {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
}

.result-grid {
  --result-columns: 4 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  align-items: flex-start !important;
  gap: 14px !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 18px 18px 66px !important;
  overflow-y: auto !important;
  background: transparent !important;
}

.result-grid[hidden] {
  display: none !important;
}

.result-pagination {
  position: relative !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 12px 18px 18px !important;
  background: transparent !important;
  pointer-events: auto !important;
}

.result-pagination[hidden] {
  display: none !important;
}

.result-page-total {
  margin-right: auto !important;
  color: var(--ui-text-soft) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

.result-page-list {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.result-page-ellipsis {
  color: var(--ui-text-soft) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.result-card,
.result-card--loading {
  flex: 0 0 calc((100% - 42px) / 4) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius-md) !important;
  background: var(--ui-surface-soft) !important;
  box-shadow: none !important;
}

.result-summary {
  grid-row: 4 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 72px !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease, background-color 0.18s ease !important;
}

.summary-rail {
  display: none !important;
}

.summary-body {
  display: grid !important;
  align-items: center !important;
  padding: 0 12px !important;
}

.empty-state {
  min-height: 0 !important;
  place-content: center !important;
  padding: 24px 18px !important;
}

.slider-panel--split {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.slider-panel--split > .slider-box + .slider-box {
  border-left: 1px solid var(--ui-line) !important;
  padding-left: 14px !important;
}

.slider-box {
  display: grid !important;
  gap: 4px !important;
  align-content: center !important;
}

.slider-control {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
}

.slider-value-wrap {
  width: 58px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 999px !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
}

.slider-value-wrap span {
  color: var(--ui-text-soft) !important;
  font-size: 10px !important;
}

.slider-number {
  width: 28px !important;
  height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ui-text) !important;
  font-size: 10px !important;
}

.slider-number:focus {
  box-shadow: none !important;
}

.slider-control input[type="range"] {
  width: 100% !important;
  accent-color: #b8b8bc !important;
}

.slider-copy strong,
.summary-stats strong {
  color: var(--ui-text) !important;
  font-size: 11px !important;
  line-height: 14px !important;
}

.slider-copy span,
.summary-stats span {
  color: var(--ui-text-soft) !important;
  font-size: 9px !important;
  line-height: 12px !important;
}

::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(141, 141, 148, 0.28) !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

@media (max-width: 1500px) {
  .workspace {
    grid-template-columns: 292px minmax(0, 1fr) !important;
  }

  .results-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .results-controls {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
  }
}

body.is-footer-modal-open {
  overflow: hidden !important;
}

.nav-rail__footer {
  overflow: visible !important;
}

.nav-rail__footer-stack {
  display: grid !important;
  gap: 10px !important;
}

.nav-rail__footer-card,
.nav-rail__points {
  width: 100% !important;
  appearance: none !important;
  cursor: pointer !important;
  text-align: left !important;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease !important;
}

.nav-rail__footer-card {
  display: grid !important;
  gap: 4px !important;
  padding: 12px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
}

.nav-rail__footer-card:hover,
.nav-rail__points:hover,
.nav-rail__login:hover {
  border-color: #dcdce1 !important;
  background: #ffffff !important;
}

.nav-rail__footer-card-title {
  color: var(--ui-text-muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 14px !important;
}

.nav-rail__footer-card strong {
  color: var(--ui-text) !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  line-height: 18px !important;
}

.nav-rail__footer-card small {
  color: var(--ui-text-muted) !important;
  font-size: 11px !important;
  line-height: 16px !important;
}

.footer-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120 !important;
  display: grid !important;
  place-items: center !important;
  padding: 28px !important;
}

.footer-modal[hidden] {
  display: none !important;
}

.footer-modal__backdrop {
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  background: rgba(248, 248, 250, 0.72) !important;
  backdrop-filter: blur(14px) saturate(1.05) !important;
}

.footer-modal__panel {
  position: relative !important;
  z-index: 1 !important;
  width: min(960px, calc(100vw - 56px)) !important;
  min-height: min(640px, calc(100svh - 64px)) !important;
  max-height: calc(100svh - 64px) !important;
  border: 1px solid rgba(226, 227, 231, 0.92) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow:
    0 20px 60px rgba(15, 23, 42, 0.08),
    0 2px 10px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden !important;
}

.footer-modal__shell {
  display: grid !important;
  grid-template-columns: 214px minmax(0, 1fr) !important;
  min-height: inherit !important;
  max-height: inherit !important;
}

.footer-modal__nav {
  display: grid !important;
  align-content: start !important;
  gap: 20px !important;
  padding: 24px 18px !important;
  border-right: 1px solid var(--ui-line) !important;
  background: #fbfbfc !important;
}

.footer-modal__nav-top {
  display: grid !important;
  gap: 4px !important;
}

.footer-modal__eyebrow {
  margin: 0 !important;
  color: var(--ui-text-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.footer-modal__nav-top strong {
  color: var(--ui-text) !important;
  font-size: 18px !important;
  font-weight: 760 !important;
  line-height: 24px !important;
}

.footer-modal__nav-list {
  display: grid !important;
  gap: 6px !important;
}

.footer-modal__nav-item {
  min-height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: var(--ui-text-soft) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  text-align: left !important;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease !important;
}

.footer-modal__nav-item:hover {
  background: #f1f1f3 !important;
  color: var(--ui-text) !important;
}

.footer-modal__nav-item.is-active {
  border-color: #e8e8ec !important;
  background: #f3f3f5 !important;
  color: var(--ui-text) !important;
}

.footer-modal__main {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 0 !important;
  background: #ffffff !important;
}

.footer-modal__head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 24px 28px 18px !important;
  border-bottom: 1px solid var(--ui-line) !important;
}

.footer-modal__head strong {
  display: block !important;
  color: var(--ui-text) !important;
  font-size: 24px !important;
  font-weight: 760 !important;
  line-height: 30px !important;
}

.footer-modal__head span {
  display: block !important;
  margin-top: 6px !important;
  color: var(--ui-text-soft) !important;
  font-size: 13px !important;
  line-height: 19px !important;
}

.footer-modal__close {
  min-height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: var(--ui-text-soft) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

.footer-modal__section {
  display: grid !important;
  align-content: start !important;
  gap: 18px !important;
  min-height: 0 !important;
  padding: 24px 28px 28px !important;
  overflow-y: auto !important;
}

.footer-modal__hero {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 20px 22px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fafafb 100%) !important;
}

.footer-modal__hero-label {
  display: inline-flex !important;
  margin-bottom: 8px !important;
  color: var(--ui-text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

.footer-modal__hero strong {
  display: block !important;
  color: var(--ui-text) !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
}

.footer-modal__hero p {
  max-width: 560px !important;
  margin: 10px 0 0 !important;
  color: var(--ui-text-soft) !important;
  font-size: 13px !important;
  line-height: 20px !important;
}

.footer-modal__hero-badge,
.footer-modal__tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: var(--ui-text-soft) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

.footer-modal__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.footer-modal__card,
.footer-modal__list-row,
.footer-modal__info-row,
.footer-modal__action-row {
  border: 1px solid var(--ui-line) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
}

.footer-modal__card {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  padding: 18px 18px 16px !important;
}

.footer-modal__card strong,
.footer-modal__info-row strong,
.footer-modal__list-row strong {
  color: var(--ui-text) !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  line-height: 20px !important;
}

.footer-modal__card p,
.footer-modal__info-row p,
.footer-modal__list-row p {
  margin: 0 !important;
  color: var(--ui-text-soft) !important;
  font-size: 12px !important;
  line-height: 18px !important;
}

.footer-modal__stack {
  display: grid !important;
  gap: 14px !important;
}

.footer-modal__info-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 18px 20px !important;
}

.footer-modal__api-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.footer-modal__api-grid .api-field:last-child {
  grid-column: 1 / -1 !important;
}

.api-field--modal {
  display: grid !important;
  gap: 8px !important;
  padding: 16px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
}

.api-field--modal span {
  color: var(--ui-text-muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 14px !important;
}

.api-field--modal input,
.api-field--modal select {
  min-height: 44px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 14px !important;
  background: #fbfbfc !important;
  color: var(--ui-text) !important;
  font-size: 13px !important;
}

.footer-modal__action-row {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
}

.footer-modal__action-row .api-settings__hint {
  margin: 0 !important;
}

.footer-modal__list {
  display: grid !important;
  gap: 12px !important;
}

.footer-modal__list-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px 18px !important;
}

.footer-modal__list-row > span {
  color: var(--ui-text-muted) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

@media (max-width: 1180px) {
  .footer-modal__panel {
    width: min(920px, calc(100vw - 32px)) !important;
  }

  .footer-modal__shell {
    grid-template-columns: 188px minmax(0, 1fr) !important;
  }

  .footer-modal__grid,
  .footer-modal__api-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 860px) {
  .footer-modal {
    padding: 12px !important;
  }

  .footer-modal__panel {
    width: calc(100vw - 24px) !important;
    min-height: calc(100svh - 24px) !important;
    max-height: calc(100svh - 24px) !important;
    border-radius: 24px !important;
  }

  .footer-modal__shell {
    grid-template-columns: 1fr !important;
  }

  .footer-modal__nav {
    gap: 12px !important;
    padding: 18px 18px 14px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ui-line) !important;
  }

  .footer-modal__nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .footer-modal__head,
  .footer-modal__section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .footer-modal__hero,
  .footer-modal__info-row,
  .footer-modal__list-row,
  .footer-modal__action-row {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .footer-modal__action-row {
    gap: 10px !important;
  }
}

/* v18 corrections: simplify footer modal and restore left panel proportions */
.nav-rail__points {
  cursor: default !important;
  padding: 12px !important;
}

.nav-rail__points small,
.nav-rail__footer-card small {
  display: none !important;
}

.nav-rail__footer-card {
  gap: 2px !important;
  padding: 12px !important;
}

.nav-rail__footer-card strong,
.nav-rail__points strong {
  font-size: 15px !important;
  line-height: 19px !important;
}

.nav-rail__login,
.nav-rail__footer-card {
  pointer-events: auto !important;
}

.control-panel {
  grid-template-rows: auto auto auto !important;
  gap: 10px !important;
  padding: 10px 12px 14px !important;
}

.upload-card .card-head,
.control-card--stacked .card-head,
.control-panel > .control-card:last-child .card-head,
.control-panel > .control-card:last-child .generation-mode-head {
  width: 100% !important;
  padding: 0 14px !important;
  text-align: left !important;
  justify-items: stretch !important;
}

.card-head h2,
.generation-mode-head h2,
.results-head h2 {
  font-size: 15px !important;
  line-height: 20px !important;
}

.upload-card .upload-dropzone,
.upload-dropzone--compact {
  width: min(100%, 272px) !important;
  margin-top: 2px !important;
}

.control-card--stacked .upload-stack {
  gap: 10px !important;
}

.generation-options {
  justify-items: stretch !important;
  gap: 12px !important;
  padding: 6px 12px 0 !important;
}

.option-row {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  justify-items: stretch !important;
  align-items: center !important;
  gap: 12px !important;
}

.option-row strong {
  display: flex !important;
  align-items: center !important;
  min-height: var(--ui-btn-h-sm) !important;
  font-size: 13px !important;
  line-height: 16px !important;
  text-align: left !important;
}

.choice-group--setting,
#aspectRatioGroup,
#resolutionChoiceGroup {
  justify-content: flex-start !important;
}

.control-panel .choice-pill {
  width: auto !important;
  min-width: 42px !important;
}

.generation-mode-row {
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  text-align: left !important;
}

.generation-mode-menu--inline {
  width: auto !important;
  grid-template-columns: repeat(2, minmax(56px, auto)) !important;
}

.control-panel > .control-card:last-child {
  align-content: start !important;
  justify-items: stretch !important;
  gap: 12px !important;
}

.control-panel > .control-card:last-child h2,
.control-panel > .control-card:last-child .generation-mode-head,
.control-panel > .control-card:last-child .card-head {
  text-align: left !important;
}

#mainCountGroup {
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
}

.generation-submit {
  width: 100% !important;
}

.workspace {
  grid-template-columns: clamp(320px, 23vw, 360px) minmax(0, 1fr) !important;
  gap: clamp(12px, 1vw, 18px) !important;
}

.control-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  padding: 12px 14px 16px !important;
}

.control-panel > .upload-card,
.control-panel > .control-card {
  flex: 0 0 auto !important;
  min-height: auto !important;
}

.upload-card,
.control-card {
  padding: 12px 14px 14px !important;
  overflow: visible !important;
}

.upload-card .upload-dropzone,
.upload-dropzone--compact {
  width: 100% !important;
  max-width: none !important;
  height: clamp(188px, 25vh, 272px) !important;
  aspect-ratio: auto !important;
  margin-top: 8px !important;
}

.control-card--stacked .upload-stack {
  gap: 12px !important;
}

.control-panel > .control-card:last-child {
  margin-top: 0 !important;
  min-height: auto !important;
  align-content: start !important;
}

.generation-options {
  justify-items: stretch !important;
  gap: 10px !important;
  padding: 0 !important;
}

.option-row {
  grid-template-columns: clamp(64px, 28%, 84px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(8px, 0.8vw, 12px) !important;
}

.option-row strong {
  display: flex !important;
  align-items: center !important;
  min-height: var(--ui-btn-h-sm) !important;
  text-align: left !important;
}

.choice-group--setting,
#aspectRatioGroup,
#resolutionChoiceGroup {
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.control-panel .choice-pill {
  width: auto !important;
  min-width: clamp(40px, 3vw, 48px) !important;
  padding: 0 10px !important;
}

.generation-mode-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

.generation-mode-menu--inline {
  width: auto !important;
  grid-template-columns: repeat(2, minmax(52px, auto)) !important;
}

#mainCountGroup {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(34px, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}

@media (max-width: 1220px) {
  body {
    overflow: auto !important;
  }

  .studio-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
  }

  .nav-rail {
    display: none !important;
  }

  .app-shell {
    width: 100% !important;
    height: auto !important;
    min-height: 100svh !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  .workspace {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  .control-panel {
    overflow: visible !important;
  }

  .results-board {
    min-height: 520px !important;
    overflow: visible !important;
  }
}

@media (max-height: 820px) {
  .control-panel {
    gap: 10px !important;
    padding: 10px 12px 12px !important;
  }

  .upload-card,
  .control-card {
    padding: 10px 12px 12px !important;
  }

  .upload-card .upload-dropzone,
  .upload-dropzone--compact {
    height: clamp(156px, 19vh, 212px) !important;
  }

  .generation-options {
    gap: 8px !important;
  }

  .option-row {
    gap: 8px !important;
  }

  #mainCountGroup {
    gap: 6px !important;
  }
}

.footer-modal__panel {
  width: min(560px, calc(100vw - 32px)) !important;
  min-height: auto !important;
  max-height: calc(100svh - 56px) !important;
}

.footer-modal__main--simple {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.footer-modal__head--simple {
  padding: 24px 24px 16px !important;
}

.footer-modal__section--simple {
  padding: 0 24px 24px !important;
}

.footer-modal__api-grid {
  grid-template-columns: 1fr !important;
}

.footer-modal__action-row {
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
  gap: 10px !important;
}

@media (max-width: 860px) {
  .studio-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
  }

  .nav-rail {
    display: none !important;
  }

  .app-shell {
    width: 100% !important;
    height: auto !important;
    min-height: 100svh !important;
    padding: 0 !important;
  }

  .workspace {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    height: auto !important;
    min-height: auto !important;
    padding: 0 !important;
  }

  .control-panel,
  .results-board {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }

  .control-panel {
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    gap: 0 !important;
    padding: 0 12px 16px !important;
    background: #ffffff !important;
    overflow: visible !important;
  }

  .upload-card,
  .control-card {
    padding: 18px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ui-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .control-panel > :last-child {
    border-bottom: 0 !important;
  }

  .upload-card .card-head,
  .control-card--stacked .card-head,
  .control-panel > .control-card:last-child .card-head,
  .control-panel > .control-card:last-child .generation-mode-head {
    width: 100% !important;
    padding: 0 2px !important;
  }

  .card-head h2,
  .generation-mode-head h2 {
    font-size: 15px !important;
    line-height: 20px !important;
  }

  .upload-card .upload-dropzone,
  .upload-dropzone--compact {
    width: 100% !important;
    max-width: none !important;
    margin-top: 10px !important;
  }

  .generation-options {
    padding: 10px 2px 0 !important;
  }

  .control-panel > .control-card:last-child {
    min-height: 0 !important;
    padding-bottom: 12px !important;
  }

  .generation-submit {
    width: 100% !important;
  }
}

@media (max-width: 420px) {
  .workspace {
    gap: 0 !important;
  }

  .control-panel,
  .results-board {
    background: #ffffff !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
  }

  .control-panel {
    padding: 0 14px 16px 12px !important;
  }

  .results-board {
    margin-top: 6px !important;
  }

  .upload-card,
  .control-card {
    padding: 18px 0 18px !important;
  }

  .upload-card {
    gap: 0 !important;
  }

  .control-card--stacked .upload-stack {
    gap: 14px !important;
  }

  .upload-card .card-head,
  .control-card--stacked .card-head {
    position: relative !important;
    padding-right: 86px !important;
  }

  .status-badge,
  .status-badge--accent,
  #generationBadge {
    min-height: 28px !important;
    padding: 0 10px !important;
    border-color: #e3e3e6 !important;
    font-size: 12px !important;
    line-height: 26px !important;
  }

  #sceneTemplateStatus,
  #productSubjectStatus {
    top: 0 !important;
    right: 0 !important;
    min-width: 0 !important;
    color: var(--ui-text-soft) !important;
    background: #ffffff !important;
  }

  .upload-dropzone {
    gap: 8px !important;
    padding: 12px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
  }

  .upload-card .upload-dropzone,
  .upload-dropzone--compact {
    height: 222px !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    margin-top: 12px !important;
  }

  .upload-dropzone__meta {
    gap: 2px !important;
  }

  .upload-dropzone__meta strong {
    font-size: 13px !important;
    line-height: 18px !important;
  }

  .upload-dropzone__meta span {
    font-size: 11px !important;
    line-height: 15px !important;
  }

  .asset-preview__empty {
    inset: 52px 12px 12px !important;
    border-radius: 14px !important;
  }

  .generation-options {
    justify-items: stretch !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  .option-row {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
  }

  .option-row strong {
    min-height: 30px !important;
    font-size: 12px !important;
    line-height: 16px !important;
    text-align: left !important;
  }

  .option-row > div:first-child {
    display: grid !important;
    align-content: center !important;
    gap: 0 !important;
  }

  .option-row span {
    display: none !important;
  }

  .choice-group--setting,
  #aspectRatioGroup,
  #resolutionChoiceGroup {
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  .control-panel .choice-pill {
    min-width: 46px !important;
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  .control-panel > .control-card:last-child {
    gap: 12px !important;
    padding-top: 16px !important;
  }

  .generation-mode-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }

  .generation-mode-row h2 {
    min-width: 0 !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }

  .generation-mode-menu--inline {
    display: inline-grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: auto !important;
    gap: 4px !important;
    padding: 2px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    justify-self: end !important;
  }

  .generation-mode-menu--inline button {
    min-width: 48px !important;
    min-height: 30px !important;
    padding: 0 8px !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 10px !important;
    line-height: 28px !important;
    white-space: nowrap !important;
  }

  .generation-mode-menu--inline button.is-active {
    border: 1px solid #dbe3ef !important;
    background: #edf3fb !important;
    color: #2f5e9a !important;
  }

  #mainCountGroup {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 0 !important;
  }

  #mainCountGroup .choice-pill {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .primary-button.generation-submit {
    min-height: 38px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  .primary-button__count {
    min-width: 78px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
  }

  .upload-asset-actions {
    top: 10px !important;
    right: 68px !important;
    gap: 6px !important;
  }

  .upload-asset-actions button {
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }
}

/* Final control rail sizing: compact 1:1 previews, shared left edge, and stable bottom controls. */
.workspace {
  grid-template-columns: clamp(278px, 18vw, 312px) minmax(0, 1fr) !important;
  gap: clamp(10px, 0.9vw, 16px) !important;
}

.control-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.control-panel > .upload-card,
.control-panel > .control-card {
  flex: 0 0 auto !important;
  min-height: auto !important;
  padding: 10px !important;
  overflow: hidden !important;
}

.control-panel .card-head,
.control-panel .generation-mode-head,
.control-panel > .control-card:last-child .card-head,
.control-panel > .control-card:last-child .generation-mode-head {
  width: 100% !important;
  padding: 0 !important;
  text-align: left !important;
  justify-items: stretch !important;
}

.upload-card .card-head,
.control-card--stacked .card-head {
  position: relative !important;
  padding-right: 72px !important;
}

.card-head h2,
.generation-mode-head h2 {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  text-align: left !important;
}

.upload-card .upload-dropzone,
.upload-dropzone--compact {
  width: min(100%, clamp(168px, 12vw, 200px)) !important;
  max-width: min(100%, clamp(168px, 12vw, 200px)) !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  margin-top: 6px !important;
  justify-self: start !important;
}

.upload-dropzone {
  gap: 6px !important;
  padding: 8px !important;
}

.upload-dropzone__meta {
  justify-items: start !important;
  text-align: left !important;
}

.upload-dropzone__meta strong,
.upload-dropzone__meta span {
  text-align: left !important;
}

.asset-preview__empty {
  inset: 40px 8px 8px !important;
}

.control-card--stacked .upload-stack {
  gap: 6px !important;
}

.generation-options {
  display: grid !important;
  justify-items: stretch !important;
  gap: 6px !important;
  padding: 0 !important;
}

.option-row {
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.option-row strong {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 24px !important;
  font-size: 11px !important;
  line-height: 15px !important;
  text-align: left !important;
}

.option-row > div:first-child {
  display: grid !important;
  justify-items: start !important;
  align-content: center !important;
  gap: 0 !important;
}

.choice-group--setting,
#aspectRatioGroup,
#resolutionChoiceGroup {
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
}

.control-panel .choice-pill,
.control-panel .generation-mode-menu--inline button {
  min-width: 34px !important;
  min-height: 26px !important;
  padding: 0 7px !important;
  font-size: 10px !important;
  line-height: 24px !important;
}

.generation-mode-head {
  display: grid !important;
  gap: 6px !important;
}

.generation-mode-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: start !important;
  justify-items: start !important;
  gap: 6px !important;
}

.generation-mode-menu--inline {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: min(204px, 100%) !important;
  gap: 5px !important;
  margin-left: 0 !important;
}

#mainCountGroup {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  justify-content: stretch !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: 0 !important;
}

#mainCountGroup .choice-pill {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.control-panel > .control-card:last-child {
  margin-top: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  gap: 6px !important;
}

.primary-button.generation-submit {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  font-size: 10px !important;
}

.primary-button__label {
  justify-self: start !important;
  text-align: left !important;
}

.primary-button__count {
  min-width: 62px !important;
  padding: 3px 7px !important;
  font-size: 9px !important;
}

@media (max-width: 1460px) {
  .workspace {
    grid-template-columns: clamp(268px, 22vw, 296px) minmax(0, 1fr) !important;
  }

  .control-panel {
    gap: 7px !important;
    padding: 9px !important;
  }

  .control-panel > .upload-card,
  .control-panel > .control-card {
    padding: 9px !important;
  }

  .option-row {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }

  .control-panel .choice-pill,
  .control-panel .generation-mode-menu--inline button {
    min-width: 32px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }

  .generation-mode-menu--inline {
    width: min(188px, 100%) !important;
  }
}

@media (max-height: 860px) {
  .upload-card .upload-dropzone,
  .upload-dropzone--compact {
    max-width: 184px !important;
    justify-self: start !important;
  }

  .control-panel {
    gap: 8px !important;
  }

  .control-panel > .upload-card,
  .control-panel > .control-card {
    padding: 10px !important;
  }
}

@media (max-width: 1220px) {
  body {
    overflow: auto !important;
  }

  .studio-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
  }

  .nav-rail {
    display: none !important;
  }

  .app-shell {
    width: 100% !important;
    height: auto !important;
    min-height: 100svh !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  .workspace {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  .control-panel {
    overflow: visible !important;
  }

  .results-board {
    min-height: 520px !important;
    overflow: visible !important;
  }
}

@media (max-width: 860px) {
  .control-panel,
  .results-board {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }

  .control-panel {
    padding: 0 12px 16px !important;
    background: #ffffff !important;
    gap: 0 !important;
  }

  .control-panel > .upload-card,
  .control-panel > .control-card {
    padding: 18px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ui-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .upload-card .card-head,
  .control-card--stacked .card-head,
  .control-panel > .control-card:last-child .card-head,
  .control-panel > .control-card:last-child .generation-mode-head {
    padding: 0 2px !important;
  }

  .upload-card .upload-dropzone,
  .upload-dropzone--compact {
    max-width: 256px !important;
    margin-top: 10px !important;
  }

  .generation-options {
    padding: 10px 2px 0 !important;
  }
}

@media (min-width: 1221px) {
  :root {
    --desktop-control-col: clamp(272px, 17.8vw, 288px);
    --desktop-control-gap: 8px;
    --desktop-panel-pad: 10px;
    --desktop-section-pad: 10px;
    --desktop-square-size: clamp(224px, calc((100svh - 288px) / 2), 244px);
  }

  .app-shell,
  .workspace {
    background: #ffffff !important;
  }

  .workspace {
    grid-template-columns: var(--desktop-control-col) minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .control-panel {
    gap: var(--desktop-control-gap) !important;
    padding: var(--desktop-panel-pad) !important;
    background: var(--ui-sidebar) !important;
  }

  .results-board {
    background: #ffffff !important;
  }

  .control-panel > .upload-card,
  .control-panel > .control-card {
    padding: var(--desktop-section-pad) !important;
    background: transparent !important;
  }

  .results-head,
  .generation-task-queue,
  .result-summary {
    background: #ffffff !important;
  }

  .result-canvas,
  .results-pane,
  .empty-state {
    background: #ffffff !important;
  }

  .upload-card .card-head,
  .control-card--stacked .card-head {
    padding-right: 72px !important;
  }

  .upload-card .upload-dropzone,
  .upload-dropzone--compact {
    width: min(100%, var(--desktop-square-size)) !important;
    max-width: min(100%, var(--desktop-square-size)) !important;
    aspect-ratio: 1 / 1 !important;
    justify-self: center !important;
    margin-top: 8px !important;
  }

  .upload-dropzone {
    padding: 9px !important;
  }

  .asset-preview__empty {
    inset: 42px 9px 9px !important;
  }

  .upload-asset-actions {
    top: 8px !important;
    right: 8px !important;
    gap: 4px !important;
  }

  .upload-dropzone--compact .upload-asset-actions {
    right: 8px !important;
  }

  .upload-asset-actions button {
    min-width: 0 !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    line-height: 24px !important;
  }

  .control-card--stacked .upload-stack {
    gap: 10px !important;
  }

  .generation-options {
    gap: 12px !important;
    padding-top: 4px !important;
  }

  .option-row {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .option-row strong {
    min-height: 26px !important;
  }

  .choice-group--setting,
  #aspectRatioGroup,
  #resolutionChoiceGroup {
    gap: 6px !important;
  }

  .control-panel .choice-pill,
  .control-panel .generation-mode-menu--inline button {
    min-width: 36px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
  }

  .generation-mode-head {
    gap: 6px !important;
  }

  .generation-mode-row {
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: 8px !important;
  }

  .generation-mode-menu--inline {
    width: 134px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .control-panel > .control-card:last-child {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    gap: 12px !important;
  }

  #mainCountGroup {
    gap: 10px !important;
  }

  .primary-button.generation-submit {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    gap: 10px !important;
    min-height: 44px !important;
    margin-top: 8px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(25, 35, 56, 0.96) !important;
    background:
      linear-gradient(135deg, rgba(72, 102, 255, 0.9) 0%, rgba(72, 102, 255, 0.34) 18%, rgba(72, 102, 255, 0) 36%),
      linear-gradient(180deg, #161d2a 0%, #0b1018 100%) !important;
    color: #f8fafc !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transition:
      transform 180ms ease,
      box-shadow 180ms ease,
      filter 180ms ease !important;
  }

  .primary-button.generation-submit::before {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    border-radius: inherit !important;
    background:
      radial-gradient(circle at 14% 48%, rgba(73, 123, 255, 0.58), transparent 34%),
      radial-gradient(circle at 84% 20%, rgba(90, 214, 255, 0.16), transparent 22%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)) !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  .primary-button__label {
    position: relative !important;
    z-index: 1 !important;
    font-size: 11px !important;
    font-weight: 760 !important;
    line-height: 16px !important;
    letter-spacing: 0.01em !important;
  }

  .primary-button__count {
    position: relative !important;
    z-index: 1 !important;
    min-width: 58px !important;
    padding: 4px 9px !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(248, 250, 252, 0.92) !important;
    font-size: 9px !important;
    line-height: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }

  .primary-button.generation-submit:hover:not(:disabled) {
    transform: none !important;
    box-shadow:
      0 0 0 1px rgba(88, 114, 255, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    filter: saturate(1.08) !important;
  }

  .primary-button.generation-submit:active:not(:disabled) {
    transform: none !important;
    filter: saturate(1) brightness(0.98) !important;
    box-shadow:
      0 0 0 1px rgba(88, 114, 255, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }

  .primary-button.generation-submit:disabled,
  .primary-button.generation-submit.is-disabled {
    border-color: rgba(44, 58, 87, 0.92) !important;
    background:
      linear-gradient(135deg, rgba(70, 95, 206, 0.64) 0%, rgba(70, 95, 206, 0.2) 18%, rgba(70, 95, 206, 0) 36%),
      linear-gradient(180deg, #263041 0%, #151d2b 100%) !important;
    color: rgba(248, 250, 252, 0.92) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    opacity: 0.88 !important;
    filter: saturate(0.88) brightness(0.96) !important;
  }

  .primary-button.generation-submit:disabled .primary-button__count,
  .primary-button.generation-submit.is-disabled .primary-button__count {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(248, 250, 252, 0.88) !important;
  }
}

@media (min-width: 1221px) and (max-height: 860px) {
  :root {
    --desktop-square-size: clamp(204px, calc((100svh - 284px) / 2), 226px);
  }

  .control-panel {
    gap: 7px !important;
    padding: 9px !important;
  }

  .control-panel > .upload-card,
  .control-panel > .control-card {
    padding: 9px !important;
  }

  .control-card--stacked .upload-stack,
  .generation-options,
  .control-panel > .control-card:last-child {
    gap: 9px !important;
  }
}

/* Final typography pass: standard weights and higher-contrast copy for crisper rendering. */
.card-head h2,
.generation-mode-head h2,
.results-head h2,
.upload-dropzone__meta strong,
.nav-rail__points strong,
.api-settings__summary strong,
.empty-state strong,
#sessionTitle,
.primary-button__label,
.status-badge,
.status-badge--accent,
#generationBadge,
.choice-pill,
.tab-pill,
.generation-mode-menu--inline button,
.prompt-button,
.batch-button,
.result-page-button,
.result-page-list button {
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.nav-rail__item,
.nav-rail__login,
.nav-rail__label,
.helper-text,
.card-head p,
.generation-mode-head p,
.results-head p,
.results-head p strong,
.results-head p span,
#sessionText,
.upload-dropzone__meta span,
.nav-rail__points span,
.nav-rail__points small,
.api-field span,
.primary-button__count {
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.results-head p strong,
#sessionTitle {
  color: var(--ui-text) !important;
}

.helper-text,
.card-head p,
.generation-mode-head p,
.results-head p span,
#sessionText,
.upload-dropzone__meta span,
.nav-rail__points span,
.nav-rail__points small,
.api-field span,
.primary-button__count {
  color: var(--ui-text-soft) !important;
}

.nav-brand .eyebrow,
.nav-rail__label,
.nav-rail__item,
.nav-rail__login,
.results-head p strong,
.results-head p span,
#sessionText,
.nav-rail__points span,
.nav-rail__points small,
.api-field span,
.primary-button__count {
  font-size: max(12px, 0.75rem) !important;
  line-height: 1.45 !important;
}

/* Final desktop lock: keep the white system unchanged, center the whole workspace,
   and widen the preview board so a 4-up large card layout fits again. */
@media (min-width: 1221px) {
  :root {
    --desktop-control-col: 264px;
    --desktop-square-size: clamp(212px, calc((100svh - 298px) / 2), 224px);
  }

  .app-shell {
    width: min(calc(100% - 28px), 1608px) !important;
    margin: 0 auto !important;
    padding: 6px 0 10px !important;
  }

  .workspace {
    grid-template-columns: var(--desktop-control-col) minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .control-panel {
    gap: 8px !important;
    padding: 9px !important;
  }

  .control-panel > .upload-card,
  .control-panel > .control-card {
    padding: 9px !important;
  }

  .upload-card .upload-dropzone,
  .upload-dropzone--compact {
    width: min(100%, var(--desktop-square-size)) !important;
    max-width: min(100%, var(--desktop-square-size)) !important;
    justify-self: center !important;
    margin-top: 8px !important;
  }

  .results-board {
    --ui-line: #ebebed !important;
    --ui-line-strong: #d1d6de !important;
    --ui-text: #111111 !important;
    --ui-text-soft: #1f2329 !important;
    --ui-text-muted: #4f5662 !important;
    --ui-surface: #ffffff !important;
    --ui-surface-soft: #ffffff !important;
    --ui-surface-muted: #ffffff !important;
    --ui-hover: #eceff3 !important;
    --ui-selected: #e2e6ec !important;
    background: #ffffff !important;
    border-color: var(--ui-line) !important;
    box-shadow: var(--ui-shadow) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  .results-head {
    min-height: 56px !important;
    padding: 10px 14px 8px !important;
    border-bottom-color: var(--ui-line) !important;
    background: var(--ui-sidebar) !important;
  }

  .results-head > div:first-child,
  .results-head > div:first-child.has-generation-task-queue {
    display: grid !important;
    align-content: center !important;
    justify-items: start !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  .results-head p span,
  #sessionText {
    color: var(--ui-text-soft) !important;
  }

  .generation-task-queue {
    grid-row: auto !important;
    display: block !important;
    width: auto !important;
    max-width: min(560px, calc(100vw - 980px)) !important;
    min-height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .generation-task-queue[hidden] {
    display: none !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .generation-task-queue,
  .generation-task-queue__bar,
  .result-canvas,
  .results-pane,
  .empty-state,
  .result-summary {
    background: #ffffff !important;
  }

  .generation-task-queue__bar {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 24px !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
  }

  .generation-task-queue__summary {
    flex: 0 0 auto !important;
    min-height: 24px !important;
    padding: 0 8px !important;
    background: #ffffff !important;
  }

  .generation-task-queue__summary strong {
    font-size: 11px !important;
  }

  .generation-task-queue__summary span {
    font-size: 10px !important;
  }

  .generation-task-queue__chips {
    justify-content: flex-start !important;
    gap: 6px !important;
    max-width: 280px !important;
  }

  .generation-task-chip {
    max-width: 116px !important;
    min-height: 24px !important;
    padding: 0 7px !important;
  }

  .generation-task-chip strong,
  .generation-task-chip em {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .result-canvas {
    grid-row: 2 !important;
    margin-top: 0 !important;
  }

  .generation-task-queue__summary,
  .generation-task-chip {
    border-color: var(--ui-line) !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  .generation-task-chip::after {
    background: linear-gradient(112deg, rgba(90, 122, 255, 0) 0%, rgba(90, 122, 255, 0.08) 34%, rgba(255, 255, 255, 0.92) 50%, rgba(90, 122, 255, 0) 72%) !important;
  }

  .skeleton-block {
    background:
      linear-gradient(115deg, transparent 0%, rgba(90, 122, 255, 0.06) 28%, rgba(160, 174, 196, 0.12) 44%, transparent 64%),
      linear-gradient(180deg, rgba(247, 249, 252, 1), rgba(255, 255, 255, 1)) !important;
  }

  .result-grid {
    --result-columns: 4 !important;
    gap: 10px !important;
    padding: 8px 10px 56px !important;
    justify-content: flex-start !important;
  }

  .result-card,
  .result-card--loading {
    flex: 0 0 calc((100% - (var(--result-columns) - 1) * 10px) / var(--result-columns)) !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .result-card__top-actions {
    top: 8px !important;
    right: 8px !important;
    gap: 6px !important;
  }

  .result-card__download-action {
    right: 8px !important;
    bottom: 8px !important;
  }

  .result-card__hover {
    left: 8px !important;
    bottom: 8px !important;
    width: min(240px, calc(100% - 72px)) !important;
    max-width: min(240px, calc(100% - 72px)) !important;
    min-height: 28px !important;
    padding: 4px 6px 4px 9px !important;
    gap: 6px !important;
  }

  .hover-counts {
    gap: 2px !important;
    width: 126px !important;
    min-width: 126px !important;
  }

  .hover-counts button {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 18px !important;
  }

  .result-card__preview-open,
  .result-card__edit,
  .result-card__download {
    min-width: 38px !important;
    height: 28px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .result-card__meta,
  .result-card__hover,
  .result-card__loading-meta {
    border: 1px solid rgba(17, 17, 17, 0.08) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: var(--ui-text-soft) !important;
    box-shadow: 0 10px 24px rgba(17, 17, 17, 0.1) !important;
    backdrop-filter: blur(12px) !important;
  }

  .result-card__meta strong,
  .result-card__loading-meta strong {
    color: var(--ui-text) !important;
  }

  .result-card__meta span,
  .result-card__loading-meta span,
  .result-card__loading-meta em,
  .hover-title {
    color: var(--ui-text-muted) !important;
  }

  .result-card.is-selected {
    box-shadow:
      0 0 0 1px rgba(203, 210, 219, 0.96),
      0 8px 18px rgba(31, 35, 40, 0.06) !important;
  }

  .result-card.is-batch-selected::after {
    border-color: rgba(203, 210, 219, 0.96) !important;
    box-shadow: 0 0 0 2px rgba(244, 246, 248, 0.92) !important;
  }

  .result-pagination {
    border: 1px solid var(--ui-line) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    align-self: end !important;
    padding: 8px 16px 10px !important;
    gap: 6px !important;
  }

  .result-page-total {
    line-height: 1.1 !important;
  }

  .result-summary {
    min-height: 68px !important;
    border-top: 0 !important;
    grid-row: 3 !important;
  }

  .summary-body {
    padding: 2px 12px 0 !important;
  }

  .slider-panel--split {
    gap: 30px !important;
  }

  .slider-panel--split > .slider-box + .slider-box {
    padding-left: 14px !important;
  }

  .results-head.is-tasking {
    min-height: 56px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: var(--ui-sidebar) !important;
  }

  .results-head.is-tasking > div:first-child.has-generation-task-queue {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .results-head.is-tasking > div:first-child.has-generation-task-queue > p {
    display: none !important;
  }

  .results-head.is-tasking > div:first-child.has-generation-task-queue > h2 {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .results-head.is-tasking .generation-task-queue {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: min(560px, calc(100vw - 980px)) !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
  }

  .results-head.is-tasking .generation-task-queue__summary strong,
  .results-head.is-tasking .generation-task-chip strong {
    color: var(--ui-text) !important;
  }

  .results-head.is-tasking .generation-task-queue__summary span,
  .results-head.is-tasking .generation-task-chip em {
    color: var(--ui-text-soft) !important;
  }
}

/* Result action polish: keep image controls quiet, aligned, and readable. */
.result-card {
  overflow: hidden !important;
}

.result-card__top-actions,
.result-card__download-action,
.result-card__hover {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(4px) !important;
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease !important;
}

.result-card:hover .result-card__top-actions,
.result-card:focus-within .result-card__top-actions,
.result-card:hover .result-card__download-action,
.result-card:focus-within .result-card__download-action,
.result-card:hover .result-card__hover,
.result-card:focus-within .result-card__hover {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.result-card__top-actions {
  top: 10px !important;
  right: 10px !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(16, 24, 40, 0.1) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.12) !important;
  backdrop-filter: blur(12px) !important;
}

.result-card__top-actions .result-card__preview-open,
.result-card__top-actions .result-card__edit {
  min-width: 42px !important;
  width: auto !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ui-text-soft, #3f4652) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 30px !important;
}

.result-card__top-actions .result-card__preview-open {
  border-right: 1px solid rgba(16, 24, 40, 0.08) !important;
}

.result-card__top-actions .result-card__preview-open:hover,
.result-card__top-actions .result-card__edit:hover {
  background: rgba(17, 24, 39, 0.06) !important;
  color: var(--ui-text, #111827) !important;
  transform: none !important;
}

.result-card__download-action {
  right: 10px !important;
  bottom: 10px !important;
}

.result-card__download {
  min-width: 46px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(16, 24, 40, 0.1) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--ui-text, #111827) !important;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.12) !important;
  backdrop-filter: blur(12px) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 30px !important;
}

.result-card__download:hover {
  border-color: rgba(37, 99, 235, 0.22) !important;
  background: rgba(239, 246, 255, 0.95) !important;
  color: #1d4ed8 !important;
  transform: none !important;
}

.result-card__hover {
  left: 10px !important;
  right: 66px !important;
  bottom: 10px !important;
  width: auto !important;
  max-width: none !important;
  min-height: 30px !important;
  height: 30px !important;
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 7px 4px 10px !important;
  border: 1px solid rgba(16, 24, 40, 0.1) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.12) !important;
  backdrop-filter: blur(12px) !important;
}

.hover-title {
  min-width: 48px !important;
  overflow: visible !important;
  color: var(--ui-text, #111827) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

.hover-counts {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(18px, 1fr)) !important;
  gap: 3px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

.hover-counts button {
  width: auto !important;
  min-width: 18px !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(248, 250, 252, 0.96) !important;
  color: var(--ui-text-soft, #3f4652) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
}

.hover-counts button:hover:not(:disabled) {
  border-color: rgba(37, 99, 235, 0.24) !important;
  background: rgba(239, 246, 255, 0.98) !important;
  color: #1d4ed8 !important;
  transform: none !important;
}

@media (max-width: 760px) {
  .result-card__hover {
    right: 10px !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 54px !important;
    border-radius: 16px !important;
  }

  .hover-title {
    min-width: 0 !important;
  }
}

/* Generation preview animation: make the pending image tile visibly alive. */
.result-card--loading {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: #f7f9fc !important;
}

.result-card--loading::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(90deg, rgba(72, 102, 255, 0.18), rgba(76, 166, 255, 0.08), rgba(72, 102, 255, 0.18)),
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0)) !important;
  background-size: 180% 100%, 100% 220% !important;
  opacity: 0.32 !important;
  animation: resultGeneratingAura 3.2s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.result-card--loading .skeleton-block {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  border: 1px solid rgba(213, 220, 234, 0.9) !important;
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(78, 112, 255, 0.08) 34%, rgba(255, 255, 255, 0.72) 48%, rgba(78, 112, 255, 0.1) 60%, rgba(255, 255, 255, 0) 78%),
    linear-gradient(135deg, #f9fbff 0%, #eef3fb 42%, #fafcff 100%) !important;
  background-size: 24px 24px, 24px 24px, 260% 100%, 100% 100% !important;
  background-position: 0 0, 0 0, 180% 0, 0 0 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.78),
    inset 0 34px 72px rgba(255, 255, 255, 0.58),
    inset 0 -40px 84px rgba(80, 112, 255, 0.08) !important;
  animation:
    resultGeneratingSweep 1.55s cubic-bezier(0.46, 0, 0.24, 1) infinite,
    resultGeneratingBreath 2.8s ease-in-out infinite !important;
}

.result-card--loading .skeleton-block::before {
  content: "" !important;
  position: absolute !important;
  left: -8% !important;
  right: -8% !important;
  top: -18% !important;
  height: 32% !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(82, 121, 255, 0), rgba(82, 121, 255, 0.18) 45%, rgba(255, 255, 255, 0.86) 50%, rgba(82, 121, 255, 0.16) 56%, rgba(82, 121, 255, 0)) !important;
  filter: blur(0.3px) !important;
  transform: translateY(-10%) rotate(-8deg) !important;
  animation: resultGeneratingScan 2.15s ease-in-out infinite !important;
  pointer-events: none !important;
}

.result-card--loading .skeleton-block::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(92, 126, 255, 0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 32%, rgba(42, 151, 255, 0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 68%, rgba(92, 126, 255, 0.14) 0 1px, transparent 2px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)) !important;
  background-size: 98px 98px, 118px 118px, 88px 88px, 100% 100% !important;
  opacity: 0.72 !important;
  animation: resultGeneratingDrift 4.8s linear infinite !important;
  pointer-events: none !important;
}

.result-card--loading .result-card__loading-meta {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  z-index: 2 !important;
  border: 1px solid rgba(217, 224, 236, 0.86) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 14px 34px rgba(31, 45, 71, 0.12) !important;
  backdrop-filter: blur(14px) !important;
}

@keyframes resultGeneratingSweep {
  0% {
    background-position: 0 0, 0 0, 170% 0, 0 0;
  }

  100% {
    background-position: 0 0, 0 0, -90% 0, 0 0;
  }
}

@keyframes resultGeneratingScan {
  0% {
    opacity: 0;
    transform: translateY(-35%) rotate(-8deg);
  }

  12% {
    opacity: 0.92;
  }

  68% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
    transform: translateY(410%) rotate(-8deg);
  }
}

@keyframes resultGeneratingBreath {
  0%,
  100% {
    filter: saturate(0.96) brightness(1);
  }

  50% {
    filter: saturate(1.1) brightness(1.025);
  }
}

@keyframes resultGeneratingAura {
  0%,
  100% {
    background-position: 0% 0%, 0 0%;
    opacity: 0.22;
  }

  50% {
    background-position: 100% 0%, 0 100%;
    opacity: 0.42;
  }
}

@keyframes resultGeneratingDrift {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0;
  }

  100% {
    background-position: 98px 36px, -118px 48px, 88px -42px, 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .result-card--loading::before,
  .result-card--loading .skeleton-block,
  .result-card--loading .skeleton-block::before,
  .result-card--loading .skeleton-block::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

.generation-submit.is-busy {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #315ee8 0%, #14243e 100%) !important;
}

.generation-submit.is-busy::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.2) 38%, transparent 68%) !important;
  transform: translateX(-100%) !important;
  animation: generationButtonSweep 1.35s ease-in-out infinite !important;
  pointer-events: none !important;
}

.generation-submit.is-busy .primary-button__label,
.generation-submit.is-busy .primary-button__count {
  position: relative !important;
  z-index: 1 !important;
  color: #ffffff !important;
}

.generation-submit.is-busy .primary-button__count {
  opacity: 0.86 !important;
}

@keyframes generationButtonSweep {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* Left panel proportion pass: larger upload targets with lower controls. */
@media (min-width: 1221px) {
  :root {
    --desktop-control-col: 280px !important;
    --desktop-square-size: clamp(236px, calc((100svh - 312px) / 2), 248px) !important;
  }

  .workspace {
    grid-template-columns: var(--desktop-control-col) minmax(0, 1fr) !important;
  }

  .control-panel {
    padding: 10px !important;
  }

  .upload-card .upload-dropzone,
  .upload-dropzone--compact {
    width: min(100%, var(--desktop-square-size)) !important;
    max-width: min(100%, var(--desktop-square-size)) !important;
    margin-top: 10px !important;
  }

  .control-card--stacked .upload-stack {
    gap: 20px !important;
  }

  .generation-options {
    margin-top: 8px !important;
    padding-top: 8px !important;
  }

  .control-panel > .control-card:last-child {
    margin-top: 12px !important;
    padding-top: 14px !important;
  }
}

@media (min-width: 1221px) and (max-height: 860px) {
  :root {
    --desktop-control-col: 276px !important;
    --desktop-square-size: clamp(220px, calc((100svh - 306px) / 2), 236px) !important;
  }

  .control-card--stacked .upload-stack {
    gap: 14px !important;
  }

  .generation-options {
    margin-top: 4px !important;
    padding-top: 4px !important;
  }

  .control-panel > .control-card:last-child {
    margin-top: 8px !important;
    padding-top: 10px !important;
  }
}

/* Upload target refinement: bigger boxes without pushing the lower controls down. */
@media (min-width: 1221px) {
  :root {
    --desktop-control-col: 300px !important;
    --desktop-square-size: clamp(258px, calc((100svh - 298px) / 2), 272px) !important;
  }

  .control-panel {
    padding: 10px 12px !important;
  }

  .upload-card .upload-dropzone,
  .upload-dropzone--compact {
    width: min(100%, var(--desktop-square-size)) !important;
    max-width: min(100%, var(--desktop-square-size)) !important;
    margin-top: 8px !important;
  }

  .control-card--stacked .upload-stack {
    gap: 6px !important;
  }

  .generation-options {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .control-panel > .control-card:last-child {
    margin-top: 0 !important;
    padding-top: 8px !important;
  }
}

@media (min-width: 1221px) and (max-height: 860px) {
  :root {
    --desktop-control-col: 292px !important;
    --desktop-square-size: clamp(240px, calc((100svh - 292px) / 2), 256px) !important;
  }

  .control-card--stacked .upload-stack {
    gap: 4px !important;
  }
}

/* Upload placement polish: lift only the upload area and hide the redundant status word. */
@media (min-width: 1221px) {
  .upload-card,
  .control-card--stacked {
    transform: translateY(-8px) !important;
  }

  #sceneTemplateStatus,
  #productSubjectStatus {
    display: none !important;
  }
}

@media (min-width: 1221px) and (max-height: 860px) {
  .upload-card,
  .control-card--stacked {
    transform: translateY(-6px) !important;
  }
}

/* Minimal loading tile: quiet white-system feedback instead of a techy panel. */
.result-card--loading {
  background: #f6f7f9 !important;
  border: 1px solid #e4e8ef !important;
  box-shadow: none !important;
}

.result-card--loading::before {
  opacity: 0 !important;
  animation: none !important;
}

.result-card--loading .skeleton-block {
  border: 0 !important;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.82) 45%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(135deg, #f8f9fb 0%, #eef2f7 48%, #fafbfc 100%) !important;
  background-size: 230% 100%, 100% 100% !important;
  background-position: 150% 0, 0 0 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    inset 0 -28px 68px rgba(17, 24, 39, 0.035) !important;
  animation: resultMinimalLoadingSweep 1.75s ease-in-out infinite !important;
}

.result-card--loading .skeleton-block::before {
  content: "" !important;
  position: absolute !important;
  inset: auto 18px 54px 18px !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.14), transparent) !important;
  opacity: 0.45 !important;
  transform: none !important;
  filter: none !important;
  animation: resultMinimalLinePulse 1.8s ease-in-out infinite !important;
}

.result-card--loading .skeleton-block::after {
  content: none !important;
}

.result-card--loading .result-card__loading-meta {
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.result-card--loading .result-card__loading-meta strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #1f2937 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 18px !important;
}

.result-card--loading .result-card__loading-meta strong::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: #94a3b8 !important;
  animation: resultMinimalDotPulse 1.25s ease-in-out infinite !important;
}

.result-card--loading .result-card__loading-meta em {
  color: #64748b !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 18px !important;
}

.result-card--loading .result-card__loading-meta span {
  display: none !important;
}

@keyframes resultMinimalLoadingSweep {
  0% {
    background-position: 150% 0, 0 0;
  }

  100% {
    background-position: -90% 0, 0 0;
  }
}

@keyframes resultMinimalLinePulse {
  0%,
  100% {
    opacity: 0.22;
    transform: scaleX(0.82);
  }

  50% {
    opacity: 0.52;
    transform: scaleX(1);
  }
}

@keyframes resultMinimalDotPulse {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Premium live generation tile: calm GPT/Gemini-style motion without overpowering finished images. */
.result-card--loading {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(207, 216, 229, 0.92) !important;
  background:
    linear-gradient(135deg, rgba(250, 252, 255, 0.98) 0%, rgba(238, 244, 251, 0.96) 46%, rgba(251, 252, 250, 0.98) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 12px 30px rgba(30, 41, 59, 0.08) !important;
}

.result-card--loading::before {
  content: "" !important;
  position: absolute !important;
  inset: -22% !important;
  z-index: 0 !important;
  opacity: 0.9 !important;
  background:
    conic-gradient(
      from 215deg at 50% 50%,
      rgba(92, 124, 255, 0) 0deg,
      rgba(88, 143, 255, 0.22) 54deg,
      rgba(66, 183, 174, 0.18) 118deg,
      rgba(244, 188, 96, 0.16) 178deg,
      rgba(88, 143, 255, 0.2) 238deg,
      rgba(92, 124, 255, 0) 330deg
    ) !important;
  filter: blur(18px) saturate(1.1) !important;
  animation: resultPremiumFieldTurn 5.8s linear infinite !important;
  pointer-events: none !important;
}

.result-card--loading::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  opacity: 0.72 !important;
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.38) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.44) 1px, transparent 1px),
    linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.1) 34%, rgba(255, 255, 255, 0.82) 48%, rgba(255, 255, 255, 0.12) 62%, transparent 76%) !important;
  background-size: 28px 28px, 28px 28px, 240% 100% !important;
  background-position: 0 0, 0 0, 150% 0 !important;
  animation: resultPremiumSweep 1.9s cubic-bezier(0.46, 0, 0.24, 1) infinite !important;
  pointer-events: none !important;
}

.result-card--loading .skeleton-block {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.18) 44%, rgba(255, 255, 255, 0.62)),
    repeating-linear-gradient(155deg, rgba(65, 96, 140, 0.05) 0 1px, transparent 1px 13px) !important;
  background-size: 100% 100%, 180% 180% !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    inset 0 -44px 92px rgba(15, 23, 42, 0.045) !important;
  animation: resultPremiumTextureDrift 6.2s linear infinite !important;
}

.result-card--loading .skeleton-block::before {
  content: "" !important;
  position: absolute !important;
  left: -12% !important;
  right: -12% !important;
  top: -18% !important;
  height: 26% !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.92) 50%, transparent) !important;
  opacity: 0.78 !important;
  filter: blur(0.4px) !important;
  transform: rotate(-7deg) translateY(-120%) !important;
  animation: resultPremiumScan 2.35s ease-in-out infinite !important;
}

.result-card--loading .skeleton-block::after {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 56px !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), rgba(45, 212, 191, 0.22), transparent) !important;
  opacity: 0.72 !important;
  transform-origin: center !important;
  animation: resultPremiumLineBreath 1.75s ease-in-out infinite !important;
}

.result-card--loading .result-card__loading-meta {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(222, 229, 239, 0.88) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: #1f2937 !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
}

.result-card--loading .result-card__loading-meta strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  color: #172033 !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 18px !important;
}

.result-card--loading .result-card__loading-meta strong::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #4f7cff, #30b8aa) !important;
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.12) !important;
  animation: resultPremiumDot 1.2s ease-in-out infinite !important;
}

.result-card--loading .result-card__loading-meta em {
  color: #46566d !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 760 !important;
  line-height: 18px !important;
}

.result-card--loading .result-card__loading-meta span {
  display: none !important;
}

@keyframes resultPremiumFieldTurn {
  0% {
    transform: rotate(0deg) scale(1.02);
  }

  100% {
    transform: rotate(360deg) scale(1.02);
  }
}

@keyframes resultPremiumSweep {
  0% {
    background-position: 0 0, 0 0, 145% 0;
  }

  100% {
    background-position: 0 0, 0 0, -95% 0;
  }
}

@keyframes resultPremiumTextureDrift {
  0% {
    background-position: 0 0, 0% 0%;
  }

  100% {
    background-position: 0 0, 180% 180%;
  }
}

@keyframes resultPremiumScan {
  0% {
    opacity: 0;
    transform: rotate(-7deg) translateY(-120%);
  }

  18% {
    opacity: 0.72;
  }

  72% {
    opacity: 0.56;
  }

  100% {
    opacity: 0;
    transform: rotate(-7deg) translateY(460%);
  }
}

@keyframes resultPremiumLineBreath {
  0%,
  100% {
    opacity: 0.28;
    transform: scaleX(0.76);
  }

  50% {
    opacity: 0.82;
    transform: scaleX(1);
  }
}

@keyframes resultPremiumDot {
  0%,
  100% {
    transform: scale(0.88);
    opacity: 0.62;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Preview/edit modal polish: keep the large-image workflow quiet and aligned with the warm minimal UI. */
.preview-modal,
.edit-modal {
  display: grid !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  place-items: center !important;
  padding: 28px !important;
}

.preview-modal[hidden],
.edit-modal[hidden] {
  display: none !important;
}

.preview-modal__backdrop,
.edit-modal__backdrop {
  position: fixed !important;
  inset: 0 !important;
  border: 0 !important;
  background: rgba(37, 39, 43, 0.24) !important;
  backdrop-filter: blur(5px) saturate(0.94) !important;
}

.preview-modal__panel,
.edit-modal__panel {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  width: min(88vw, 1080px) !important;
  max-width: calc(100vw - 56px) !important;
  max-height: calc(100svh - 56px) !important;
  padding: 18px !important;
  border: 1px solid var(--ow-line, var(--ui-line, #e8e6e1)) !important;
  border-radius: 18px !important;
  background: var(--ow-main, #fcfbf8) !important;
  color: var(--ow-text, var(--ui-text, #25272b)) !important;
  box-shadow: 0 22px 56px rgba(31, 35, 40, 0.18) !important;
  overflow: hidden !important;
}

.preview-modal__panel {
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 16px !important;
  height: auto !important;
}

.edit-modal__panel {
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 14px !important;
  width: min(90vw, 1100px) !important;
  height: min(90svh, 850px) !important;
}

.preview-modal__head,
.edit-modal__head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  min-height: 34px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid rgba(232, 230, 225, 0.82) !important;
}

.preview-modal__head > div:first-child,
.edit-modal__head > div:first-child {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

#previewModalTitle,
#editModalTitle,
.preview-modal__head strong,
.edit-modal__head strong {
  color: var(--ow-text, var(--ui-text, #25272b)) !important;
  font-size: 14px !important;
  font-weight: 740 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
}

#previewModalText,
.preview-modal__head span,
.edit-modal__head span,
.edit-modal__status {
  color: var(--ow-text-muted, var(--ui-text-muted, #8a8f98)) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
}

.preview-modal__actions,
.edit-modal__actions {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.preview-modal__actions button,
.edit-modal__actions button,
#editClearMask,
#editModalClose {
  min-height: 32px !important;
  padding: 0 13px !important;
  border: 1px solid var(--ow-line, var(--ui-line, #e8e6e1)) !important;
  border-radius: 999px !important;
  background: var(--ow-control, #fbfaf7) !important;
  color: var(--ow-text-soft, var(--ui-text-soft, #5d626b)) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 30px !important;
  box-shadow: none !important;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease !important;
}

.preview-modal__actions button:hover,
.edit-modal__actions button:hover,
#editClearMask:hover,
#editModalClose:hover {
  border-color: var(--ow-line-strong, var(--ui-line-strong, #dcd9d2)) !important;
  background: var(--ow-hover, var(--ui-hover, #f1f1ee)) !important;
  color: var(--ow-text, var(--ui-text, #25272b)) !important;
  transform: none !important;
}

#previewModalEdit,
#editSubmitBtn {
  border-color: rgba(111, 135, 167, 0.28) !important;
  background: var(--ow-blue-soft, #eef3f9) !important;
  color: var(--ow-blue-strong, #587291) !important;
}

#previewModalEdit:hover,
#editSubmitBtn:hover:not(:disabled) {
  border-color: rgba(111, 135, 167, 0.38) !important;
  background: #e7eef6 !important;
  color: var(--ow-blue-strong, #587291) !important;
}

.preview-modal__image-wrap,
.edit-modal__stage {
  display: grid !important;
  place-items: center !important;
  justify-self: center !important;
  align-self: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(232, 230, 225, 0.88) !important;
  border-radius: 16px !important;
  background: var(--ow-panel-soft, #f8f7f4) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.preview-modal__image-wrap {
  width: min(100%, calc(100svh - 168px), 760px) !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: var(--modal-image-ratio, 1 / 1) !important;
}

.preview-modal__image-wrap img,
.edit-modal__stage img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

.edit-modal__body {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  gap: 12px !important;
  min-height: 0 !important;
}

.edit-modal__stage {
  position: relative !important;
  width: min(100%, calc(100svh - 252px), 680px) !important;
  height: auto !important;
  max-height: 100% !important;
  aspect-ratio: var(--modal-image-ratio, 1 / 1) !important;
}

#editMaskCanvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 14px !important;
}

.edit-modal__footer {
  display: grid !important;
  grid-template-columns: 128px minmax(0, 1fr) 132px !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 10px !important;
  border: 1px solid var(--ow-line, var(--ui-line, #e8e6e1)) !important;
  border-radius: 16px !important;
  background: var(--ow-panel, #fbfaf7) !important;
  box-shadow: none !important;
}

.edit-brush {
  display: grid !important;
  align-content: center !important;
  gap: 7px !important;
  padding: 0 2px !important;
  color: var(--ow-text-soft, var(--ui-text-soft, #5d626b)) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.edit-brush input[type="range"] {
  accent-color: var(--ow-blue, #6f87a7) !important;
}

#editPromptInput,
.edit-modal textarea {
  min-height: 74px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--ow-line, var(--ui-line, #e8e6e1)) !important;
  border-radius: 12px !important;
  background: var(--ow-panel-soft, #f8f7f4) !important;
  color: var(--ow-text, var(--ui-text, #25272b)) !important;
  font-size: 13px !important;
  line-height: 20px !important;
  resize: none !important;
  box-shadow: none !important;
}

#editPromptInput:focus,
.edit-modal textarea:focus {
  border-color: rgba(111, 135, 167, 0.42) !important;
  background: #fffefa !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(111, 135, 167, 0.12) !important;
}

#editSubmitBtn {
  min-height: 74px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  line-height: 18px !important;
  white-space: normal !important;
}

.edit-modal__status {
  margin: 0 !important;
  padding: 0 2px !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  .preview-modal,
  .edit-modal {
    padding: 14px !important;
  }

  .preview-modal__panel,
  .edit-modal__panel {
    width: 100% !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100svh - 28px) !important;
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .preview-modal__head,
  .edit-modal__head {
    display: grid !important;
    gap: 10px !important;
  }

  .preview-modal__actions,
  .edit-modal__actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  .preview-modal__image-wrap {
    width: min(100%, calc(100svh - 184px)) !important;
  }

  .edit-modal__footer {
    grid-template-columns: 1fr !important;
  }

  #editSubmitBtn {
    min-height: 40px !important;
  }
}

/* Premium blue primary action: tuned for this calm white workspace, not a generic payment-site button. */
.primary-button.generation-submit {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 14px 0 17px !important;
  overflow: hidden !important;
  border: 1px solid rgba(36, 82, 184, 0.58) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(126, 168, 255, 0.72), transparent 32%),
    linear-gradient(135deg, #356af2 0%, #1e56d8 44%, #153a8b 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 12px 26px rgba(26, 78, 194, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(8, 24, 69, 0.26) !important;
  text-shadow: none !important;
  transform: translateZ(0) !important;
}

.primary-button.generation-submit::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 44%, rgba(255, 255, 255, 0)),
    linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.08) 36%, rgba(255, 255, 255, 0.24) 48%, rgba(255, 255, 255, 0.04) 62%, transparent 80%) !important;
  background-size: 100% 100%, 240% 100% !important;
  background-position: 0 0, 135% 0 !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
}

.primary-button.generation-submit::after {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 5px !important;
  z-index: 0 !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(181, 207, 255, 0.72), transparent) !important;
  opacity: 0.48 !important;
  pointer-events: none !important;
}

.primary-button.generation-submit:hover:not(:disabled) {
  border-color: rgba(70, 119, 236, 0.72) !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(146, 184, 255, 0.78), transparent 34%),
    linear-gradient(135deg, #3f7cff 0%, #245ee6 44%, #173f9c 100%) !important;
  box-shadow:
    0 14px 30px rgba(26, 78, 194, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(8, 24, 69, 0.28) !important;
  filter: saturate(1.04) brightness(1.02) !important;
  transform: translateY(-1px) !important;
}

.primary-button.generation-submit:active:not(:disabled) {
  filter: saturate(1) brightness(0.97) !important;
  transform: translateY(0) !important;
  box-shadow:
    0 8px 18px rgba(26, 78, 194, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 2px 8px rgba(8, 24, 69, 0.22) !important;
}

.primary-button.generation-submit.is-busy::before {
  animation: generationPrimaryBlueSweep 1.35s ease-in-out infinite !important;
}

.primary-button.generation-submit .primary-button__label,
.primary-button.generation-submit .primary-button__count {
  position: relative !important;
  z-index: 1 !important;
}

.primary-button.generation-submit .primary-button__label {
  justify-self: start !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
}

.primary-button.generation-submit .primary-button__count {
  justify-self: end !important;
  min-width: 68px !important;
  padding: 5px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 6px 16px rgba(8, 24, 69, 0.1) !important;
  backdrop-filter: blur(10px) saturate(1.05) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 16px !important;
  text-align: center !important;
}

.primary-button.generation-submit:disabled,
.primary-button.generation-submit.is-disabled {
  border-color: rgba(54, 93, 168, 0.36) !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(126, 168, 255, 0.34), transparent 32%),
    linear-gradient(135deg, #5f82c4 0%, #466ba8 46%, #334765 100%) !important;
  color: rgba(255, 255, 255, 0.86) !important;
  box-shadow:
    0 8px 18px rgba(37, 54, 87, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  opacity: 1 !important;
  filter: saturate(0.82) brightness(0.98) !important;
}

.primary-button.generation-submit:disabled .primary-button__label,
.primary-button.generation-submit.is-disabled .primary-button__label {
  color: rgba(255, 255, 255, 0.86) !important;
}

.primary-button.generation-submit:disabled .primary-button__count,
.primary-button.generation-submit.is-disabled .primary-button__count {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.11) !important;
  color: rgba(255, 255, 255, 0.76) !important;
}

@keyframes generationPrimaryBlueSweep {
  0% {
    background-position: 0 0, 140% 0;
  }

  100% {
    background-position: 0 0, -90% 0;
  }
}

/* Primary action proportion pass: cleaner blue body, larger action label, smaller count capsule. */
.primary-button.generation-submit {
  min-height: 42px !important;
  padding: 0 12px 0 18px !important;
  border: 0 !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(125, 166, 255, 0.52), transparent 30%),
    linear-gradient(135deg, #3b73f4 0%, #225ee0 48%, #173f9a 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(8, 24, 69, 0.22),
    0 6px 14px rgba(24, 72, 174, 0.16) !important;
}

.primary-button.generation-submit::after {
  content: none !important;
}

.primary-button.generation-submit::before {
  inset: 1px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.02) 48%, transparent),
    linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.06) 36%, rgba(255, 255, 255, 0.2) 48%, rgba(255, 255, 255, 0.04) 62%, transparent 80%) !important;
  background-size: 100% 100%, 240% 100% !important;
}

.primary-button.generation-submit:hover:not(:disabled) {
  background:
    radial-gradient(circle at 18% 12%, rgba(145, 181, 255, 0.56), transparent 32%),
    linear-gradient(135deg, #467fff 0%, #2866ea 48%, #1846a7 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(8, 24, 69, 0.24),
    0 8px 18px rgba(24, 72, 174, 0.18) !important;
}

.primary-button.generation-submit .primary-button__label {
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 20px !important;
}

.primary-button.generation-submit .primary-button__count {
  min-width: auto !important;
  padding: 3px 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  background: rgba(255, 255, 255, 0.13) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  line-height: 14px !important;
  white-space: nowrap !important;
}

.primary-button.generation-submit:disabled,
.primary-button.generation-submit.is-disabled {
  border: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 4px 10px rgba(37, 54, 87, 0.08) !important;
}

/* Left rail: three collapsible menu bars. */
.nav-rail__menus {
  display: grid !important;
  gap: 8px !important;
  margin-top: 18px !important;
}

.nav-rail__group {
  display: grid !important;
  gap: 5px !important;
  margin: 0 !important;
}

.nav-rail__section-toggle {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 16px !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 34px !important;
  padding: 0 10px 0 12px !important;
  border: 1px solid rgba(213, 219, 229, 0.78) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 252, 0.86)) !important;
  color: #1f2937 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 5px 14px rgba(31, 41, 55, 0.05) !important;
  cursor: pointer !important;
  font: inherit !important;
  text-align: left !important;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease !important;
}

.nav-rail__section-toggle:hover {
  border-color: rgba(143, 162, 190, 0.9) !important;
  background:
    linear-gradient(180deg, #ffffff, #f2f6fb) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 7px 18px rgba(31, 41, 55, 0.08) !important;
}

.nav-rail__section-toggle:focus-visible {
  outline: 2px solid rgba(50, 105, 240, 0.35) !important;
  outline-offset: 2px !important;
}

.nav-rail__section-toggle > span:first-child {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 18px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.nav-rail__chevron {
  position: relative !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: rgba(230, 235, 243, 0.9) !important;
}

.nav-rail__chevron::before {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 4px !important;
  width: 5px !important;
  height: 5px !important;
  border-right: 1.5px solid #526174 !important;
  border-bottom: 1.5px solid #526174 !important;
  transform: rotate(45deg) !important;
  transition: transform 160ms ease, top 160ms ease !important;
}

.nav-rail__section-toggle[aria-expanded="false"] .nav-rail__chevron::before {
  top: 5px !important;
  transform: rotate(-45deg) !important;
}

.nav-rail__items {
  display: grid !important;
  gap: 4px !important;
  overflow: hidden !important;
  padding: 1px 0 2px !important;
}

.nav-rail__items[hidden] {
  display: none !important;
}

.nav-rail__group.is-collapsed {
  gap: 0 !important;
}

/* Left rail refinement: quiet text headers with a tiny direction arrow only. */
.nav-rail__menus {
  gap: 18px !important;
  margin-top: 24px !important;
}

.nav-rail__group {
  gap: 7px !important;
}

.nav-rail__section-toggle {
  min-height: 24px !important;
  padding: 0 8px 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #0f172a !important;
}

.nav-rail__section-toggle:hover {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nav-rail__section-toggle > span:first-child {
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 18px !important;
}

.nav-rail__chevron {
  justify-self: end !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.nav-rail__chevron::before {
  left: 1px !important;
  top: 1px !important;
  width: 6px !important;
  height: 6px !important;
  border-right: 1.5px solid #2f76ff !important;
  border-bottom: 1.5px solid #2f76ff !important;
  transform: rotate(45deg) !important;
}

.nav-rail__section-toggle[aria-expanded="false"] .nav-rail__chevron::before {
  top: 4px !important;
  transform: rotate(225deg) !important;
}

.nav-rail__items {
  gap: 4px !important;
  padding: 0 !important;
}

/* Left rail divider and click feedback pass. */
.nav-rail__menus {
  gap: 0 !important;
  margin-top: 22px !important;
}

.nav-rail__group {
  position: relative !important;
  gap: 7px !important;
  padding: 0 0 18px !important;
  margin: 0 0 17px !important;
  border-bottom: 1px solid rgba(223, 227, 234, 0.86) !important;
}

.nav-rail__group:last-child {
  margin-bottom: 0 !important;
}

.nav-rail__section-toggle {
  min-height: 28px !important;
  padding: 0 8px 0 10px !important;
  border-radius: 7px !important;
  transition:
    color 140ms ease,
    background-color 140ms ease,
    transform 110ms ease !important;
}

.nav-rail__section-toggle:hover {
  background: rgba(237, 242, 249, 0.76) !important;
}

.nav-rail__section-toggle:active {
  background: rgba(225, 234, 248, 0.95) !important;
  transform: translateY(1px) !important;
}

.nav-rail__section-toggle[aria-expanded="true"] > span:first-child {
  color: #0f172a !important;
}

.nav-rail__section-toggle[aria-expanded="false"] > span:first-child {
  color: #344052 !important;
}

.nav-rail__chevron::before {
  transition:
    transform 140ms ease,
    top 140ms ease,
    border-color 140ms ease !important;
}

.nav-rail__section-toggle:hover .nav-rail__chevron::before {
  border-color: #1d64f2 !important;
}

.nav-rail__items {
  gap: 5px !important;
}

.nav-rail__item {
  transition:
    background-color 140ms ease,
    color 140ms ease,
    transform 110ms ease,
    box-shadow 140ms ease !important;
}

.nav-rail__item:hover {
  background: rgba(237, 242, 249, 0.8) !important;
}

.nav-rail__item:active {
  transform: translateY(1px) !important;
}

.nav-rail__item.is-active {
  background: #e3e9f1 !important;
  box-shadow: inset 2px 0 0 rgba(47, 118, 255, 0.28) !important;
}

.nav-rail__group.is-collapsed {
  padding-bottom: 13px !important;
  margin-bottom: 14px !important;
}

/* Left rail final alignment: tighter top, equal gutters, neutral selected state. */
.nav-rail__menus {
  width: 100% !important;
  margin-top: 8px !important;
  padding: 0 6px !important;
  box-sizing: border-box !important;
}

.nav-rail__group {
  width: 100% !important;
  padding: 0 0 16px !important;
  margin: 0 0 15px !important;
  box-sizing: border-box !important;
  border-bottom-color: rgba(226, 229, 235, 0.9) !important;
}

.nav-rail__group.is-collapsed {
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
}

.nav-rail__section-toggle,
.nav-rail__item {
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.nav-rail__section-toggle {
  min-height: 27px !important;
  padding: 0 6px !important;
  grid-template-columns: minmax(0, 1fr) 10px !important;
}

.nav-rail__section-toggle:hover {
  background: rgba(240, 242, 246, 0.72) !important;
}

.nav-rail__section-toggle:active {
  background: rgba(232, 235, 241, 0.9) !important;
}

.nav-rail__section-toggle > span:first-child,
.nav-rail__item {
  color: #182230 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
}

.nav-rail__items {
  gap: 4px !important;
}

.nav-rail__item {
  min-height: 32px !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 32px !important;
}

.nav-rail__item::before,
.nav-rail__item.is-active::before {
  content: none !important;
}

.nav-rail__item:hover {
  background: rgba(240, 242, 246, 0.72) !important;
  color: #111827 !important;
  box-shadow: none !important;
}

.nav-rail__item.is-active {
  border: 0 !important;
  background: rgba(229, 233, 240, 0.78) !important;
  color: #111827 !important;
  box-shadow: none !important;
}

.nav-rail__item.is-active:hover {
  background: rgba(224, 229, 237, 0.82) !important;
}

/* Left rail arrow color follows the neutral system instead of brand blue. */
.nav-rail__chevron::before {
  border-right-color: #8b95a5 !important;
  border-bottom-color: #8b95a5 !important;
}

.nav-rail__section-toggle:hover .nav-rail__chevron::before {
  border-right-color: #5f6b7a !important;
  border-bottom-color: #5f6b7a !important;
}

/* Stronger neutral click/selection feedback for the left rail. */
.nav-rail__section-toggle:hover,
.nav-rail__item:hover {
  background: rgba(229, 233, 240, 0.78) !important;
}

.nav-rail__section-toggle:active,
.nav-rail__item:active {
  background: rgba(213, 219, 229, 0.92) !important;
}

.nav-rail__item.is-active {
  background: rgba(214, 220, 230, 0.94) !important;
}

.nav-rail__item.is-active:hover {
  background: rgba(207, 214, 225, 0.98) !important;
}

/* Result head template actions: centered mode switch, quiet save/favorite controls. */
.results-head {
  position: relative !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.results-mode-switch {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 2 !important;
  transform: translate(-50%, -50%) !important;
}

.results-controls {
  grid-column: 2 !important;
  justify-self: end !important;
}

.save-template-button {
  min-width: 82px !important;
}

.template-favorite-button {
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #6b7280 !important;
  box-shadow: 0 4px 10px rgba(31, 41, 55, 0.04) !important;
  cursor: pointer !important;
  font: inherit !important;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease,
    transform 120ms ease !important;
}

.template-favorite-button span[aria-hidden="true"] {
  display: block !important;
  margin-top: -1px !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.template-favorite-button:hover:not(:disabled) {
  border-color: rgba(180, 187, 199, 0.95) !important;
  background: rgba(244, 246, 249, 0.96) !important;
  color: #374151 !important;
  box-shadow: 0 7px 16px rgba(31, 41, 55, 0.08) !important;
  transform: translateY(-1px) !important;
}

.template-favorite-button:active:not(:disabled) {
  transform: translateY(0) !important;
  background: rgba(229, 233, 240, 0.98) !important;
  box-shadow: 0 3px 8px rgba(31, 41, 55, 0.06) !important;
}

.template-favorite-button.is-favorite {
  border-color: rgba(180, 187, 199, 0.9) !important;
  background: rgba(235, 238, 244, 0.96) !important;
  color: #111827 !important;
}

.template-favorite-button:disabled,
.save-template-button:disabled {
  opacity: 0.48 !important;
  cursor: not-allowed !important;
}

.nav-rail__item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}

.nav-rail__item-count {
  min-width: 16px !important;
  padding: 1px 5px !important;
  border-radius: 999px !important;
  background: rgba(214, 220, 230, 0.9) !important;
  color: #344052 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 14px !important;
  text-align: center !important;
}

.nav-rail__item-count:empty,
.nav-rail__item-count[hidden] {
  display: none !important;
}

#generationBadge[hidden] {
  display: none !important;
}

/* Template workflow library: local prompt/image presets without touching the generation surface. */
.template-library-modal[hidden],
.template-create-modal[hidden] {
  display: none !important;
}

.template-library-modal,
.template-create-modal {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(16px, 2.5vw, 30px) !important;
}

.template-library-modal {
  z-index: 1001 !important;
}

.template-create-modal {
  z-index: 1002 !important;
}

.template-library-modal__backdrop,
.template-create-modal__backdrop {
  position: fixed !important;
  inset: 0 !important;
  border: 0 !important;
  background: rgba(37, 39, 43, 0.24) !important;
  backdrop-filter: blur(4px) saturate(0.92) !important;
}

.template-library-modal__panel,
.template-create-modal__panel {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  gap: 14px !important;
  padding: 18px !important;
  border: 1px solid var(--ow-line, var(--ui-line, #e8e6e1)) !important;
  border-radius: 18px !important;
  background: rgba(255, 254, 250, 0.98) !important;
  box-shadow: 0 24px 70px rgba(31, 41, 55, 0.18) !important;
}

.template-library-modal__panel {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  width: min(760px, calc(100vw - 32px)) !important;
  max-height: min(82svh, 720px) !important;
}

.template-create-modal__panel {
  width: min(420px, calc(100vw - 32px)) !important;
}

.template-library-modal__head,
.template-create-modal__head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

.template-library-modal__head strong,
.template-create-modal__head strong,
.template-library-row__body strong {
  color: var(--ow-text, var(--ui-text, #25272b)) !important;
  font-size: 14px !important;
  font-weight: 740 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
}

.template-library-modal__head span,
.template-create-modal__head span,
.template-library-row__body span,
.template-library-row__body small,
.template-library-modal__empty {
  color: var(--ow-text-muted, var(--ui-text-muted, #8a8f98)) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
}

.template-library-modal__actions,
.template-library-modal__tabs,
.template-create-modal__actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.template-library-modal__actions {
  justify-content: flex-end !important;
}

.template-library-modal__tabs {
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--ow-line, var(--ui-line, #e8e6e1)) !important;
}

.template-library-modal button,
.template-create-modal button,
.template-library-row button {
  min-height: 32px !important;
  padding: 0 13px !important;
  border: 1px solid var(--ow-line, var(--ui-line, #e8e6e1)) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--ow-text, var(--ui-text, #25272b)) !important;
  font-size: 12px !important;
  font-weight: 720 !important;
  line-height: 18px !important;
  cursor: pointer !important;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease !important;
}

.template-library-modal button:hover,
.template-create-modal button:hover,
.template-library-row button:hover {
  border-color: var(--ow-line-strong, var(--ui-line-strong, #dcd9d2)) !important;
  background: var(--ow-hover, var(--ui-hover, #f1f1ee)) !important;
}

.template-library-modal__tabs button.is-active {
  border-color: rgba(111, 135, 167, 0.32) !important;
  background: var(--ow-blue-soft, #eef3f9) !important;
  color: var(--ow-blue-strong, #587291) !important;
}

.template-library-modal__list {
  display: grid !important;
  gap: 8px !important;
  min-height: 0 !important;
  overflow: auto !important;
}

.template-library-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  border: 1px solid rgba(232, 230, 225, 0.9) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.72) !important;
}

.template-library-row__body {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.template-library-row__body strong,
.template-library-row__body span,
.template-library-row__body small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.template-library-modal__empty {
  padding: 24px 4px !important;
  text-align: center !important;
}

.template-create-modal__body {
  display: grid !important;
  gap: 14px !important;
}

.template-create-field {
  display: grid !important;
  gap: 7px !important;
}

.template-create-field span {
  color: var(--ow-text-muted, var(--ui-text-muted, #8a8f98)) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 18px !important;
}

.template-create-field input {
  width: 100% !important;
  height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid var(--ow-line, var(--ui-line, #e8e6e1)) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--ow-text, var(--ui-text, #25272b)) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  outline: none !important;
}

.template-create-field input:focus {
  border-color: rgba(111, 135, 167, 0.42) !important;
  box-shadow: 0 0 0 3px rgba(111, 135, 167, 0.12) !important;
}

.template-create-modal__actions {
  justify-content: flex-end !important;
}

#templateCreateSubmit,
#templateLibraryCreateBtn {
  border-color: rgba(111, 135, 167, 0.32) !important;
  background: var(--ow-blue-soft, #eef3f9) !important;
  color: var(--ow-blue-strong, #587291) !important;
}

@media (max-width: 1120px) {
  .results-mode-switch {
    position: static !important;
    transform: none !important;
  }

  .results-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
}