:root {
  color-scheme: dark;
  --bg: #13152c;
  --bg-soft: #1a1d3b;
  --panel: #0f1230;
  --panel-2: #0c102a;
  --panel-3: #14193d;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #fff;
  --muted: rgba(255, 255, 255, 0.62);
  --muted-2: rgba(255, 255, 255, 0.38);
  --primary: #ece9b7;
  --primary-strong: #f8f5d0;
  --primary-ink: #16182f;
  --success: #9ee8a0;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.34);
  --radius: 14px;
  --radius-lg: 18px;
  --left-sidebar-width: 238px;
  --right-rail-width: 74px;
  --resize-handle-width: 8px;
  --shell-min-width: 1200px;
  --stage-preview-scale: 1.15;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
}

body {
  margin: 0;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}

body.is-resizing-layout,
body.is-resizing-layout * {
  cursor: col-resize !important;
  user-select: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

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

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

.top-banner {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: #212443;
}

.top-banner__inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  min-height: 27px;
  padding: 4px 16px;
  font-size: 0.92rem;
  font-weight: 700;
}

.generate-btn,
.utility-btn,
.icon-btn,
.toolbar-icon-btn,
.count-btn,
.history-thumb {
  appearance: none;
  border: 0;
  color: inherit;
  background: none;
}

.app-shell {
  display: grid;
  grid-template-columns:
    minmax(220px, var(--left-sidebar-width))
    var(--resize-handle-width)
    minmax(0, 1fr)
    var(--resize-handle-width)
    minmax(64px, var(--right-rail-width));
  min-height: calc(100vh - 27px);
  height: calc(100vh - 27px);
  max-height: calc(100vh - 27px);
  min-width: var(--shell-min-width);
}

.control-sidebar,
.stage-shell,
.history-rail,
.resize-handle {
  min-width: 0;
}

.control-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 12px;
  padding: 12px 8px 12px 6px;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 100px),
    #101330;
  overflow: auto;
  overscroll-behavior: contain;
}

.sidebar-toolbar,
.history-rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
}

.token-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  min-height: 24px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.76rem;
}

.token-chip strong {
  font-size: 0.88rem;
}

.toolbar-icon-btn,
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.72);
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.toolbar-icon-btn:hover,
.icon-btn:hover,
.utility-btn:hover,
.count-btn:hover,
.generate-btn:hover {
  transform: translateY(-1px);
}

.sidebar-card {
  padding: 11px 10px 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.model-card {
  display: grid;
  gap: 10px;
}

.workflow-switcher {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(236, 233, 183, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  text-align: left;
}

.workflow-switcher__eyebrow {
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.workflow-switcher__label {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--primary);
}

.workflow-switcher__caret {
  justify-self: end;
  align-self: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.94rem;
}

.workflow-switcher-menu {
  display: grid;
  gap: 8px;
}

.workflow-switcher-option {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  text-align: left;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.workflow-switcher-option:hover {
  background: #0b0f29;
}

.workflow-switcher-option.is-active {
  border-color: rgba(236, 233, 183, 0.5);
  background: rgba(236, 233, 183, 0.08);
}

.workflow-switcher-option strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
}

.workflow-switcher-option p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

.config-actions {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0 10px;
}

.config-save-btn {
  min-height: 28px;
  padding: 0 12px;
}

.model-card__copy h2,
.section-label h3 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
}

.stream-card__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.stream-card__row h3 {
  margin: 0;
  font-size: 0.94rem;
}

.stream-card__row p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.preview-scale-card {
  display: grid;
  gap: 10px;
}

.video-settings-card {
  display: grid;
  gap: 10px;
}

.svi-settings-card {
  gap: 12px;
}

.svi-preset-list {
  display: grid;
  gap: 10px;
}

.svi-preset {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: flex-start;
  padding: 9px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
}

.svi-preset input {
  margin-top: 3px;
}

.svi-preset strong,
.svi-preset small {
  display: block;
}

.svi-preset strong {
  font-size: 0.78rem;
}

.svi-preset small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.69rem;
  line-height: 1.35;
}

.lora-card {
  display: grid;
  gap: 10px;
}

.lora-open-btn {
  width: 100%;
  justify-content: center;
}

.section-counter {
  color: var(--primary);
  font-size: 0.76rem;
  font-weight: 800;
}

.card-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.lora-list,
.lora-search-results {
  display: grid;
  gap: 8px;
}

.lora-empty {
  padding: 10px;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.lora-item {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
}

.lora-item.is-disabled {
  opacity: 0.74;
}

.lora-item__head,
.lora-item__actions,
.lora-item__links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lora-item__head {
  justify-content: space-between;
}

.lora-item__title {
  min-width: 0;
}

.lora-item__title strong,
.lora-item__title span {
  display: block;
}

.lora-item__title strong {
  font-size: 0.82rem;
}

.lora-item__title span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.25;
  word-break: break-all;
}

.lora-item__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lora-item__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.7rem;
}

.lora-item__toggle input {
  margin: 0;
}

.lora-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.68rem;
}

.lora-badge.is-ok {
  border-color: rgba(158, 232, 160, 0.35);
  color: var(--success);
}

.lora-badge.is-warn {
  border-color: rgba(236, 233, 183, 0.35);
  color: var(--primary);
}

.lora-meta-grid {
  display: grid;
  gap: 6px;
}

.lora-meta-row {
  display: grid;
  gap: 2px;
}

.lora-meta-row strong {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.lora-meta-row span {
  font-size: 0.72rem;
  line-height: 1.35;
  word-break: break-word;
}

.lora-item__links {
  flex-wrap: wrap;
}

.modal__dialog--wide {
  width: min(1240px, calc(100vw - 40px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
}

.lora-picker {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 320px;
  gap: 14px;
  height: min(66vh, calc(100vh - 180px));
  min-height: 0;
}

.lora-picker__filters,
.lora-picker__results,
.lora-picker__detail {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  overflow: auto;
}

.lora-picker__filters,
.lora-picker__detail {
  align-content: start;
  gap: 12px;
}

.lora-picker__results {
  grid-template-rows: auto 1fr;
  gap: 10px;
}

.lora-picker__group {
  display: grid;
  gap: 8px;
}

.lora-picker__group > strong {
  font-size: 0.74rem;
  color: var(--muted);
}

.lora-picker__search {
  margin-top: 0;
}

.lora-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lora-filter-chip,
.lora-folder-btn,
.lora-picker-result {
  appearance: none;
  border: 1px solid var(--line);
  color: inherit;
  background: rgba(255, 255, 255, 0.03);
}

.lora-filter-chip {
  padding: 5px 9px;
  font-size: 0.7rem;
  font-weight: 700;
}

.lora-folder-list,
.lora-picker-results {
  display: grid;
  gap: 8px;
  overflow: auto;
}

.lora-folder-list {
  max-height: none;
}

.lora-folder-btn {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 9px 10px;
  text-align: left;
}

.lora-folder-btn strong {
  font-size: 0.76rem;
}

.lora-folder-btn span {
  color: var(--muted);
  font-size: 0.68rem;
}

.lora-filter-chip.is-active,
.lora-folder-btn.is-active,
.lora-picker-result.is-active {
  border-color: rgba(236, 233, 183, 0.5);
  background: rgba(236, 233, 183, 0.08);
}

.lora-picker-results {
  align-content: start;
  min-height: 0;
  max-height: none;
}

.lora-picker-result {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 10px;
  text-align: left;
}

.lora-picker-result strong {
  font-size: 0.8rem;
}

.lora-picker-result span {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.3;
  word-break: break-word;
}

.lora-picker-detail {
  display: grid;
  align-content: start;
  gap: 10px;
}

.lora-picker-detail__head {
  display: grid;
  gap: 4px;
}

.lora-picker-detail__head strong {
  font-size: 0.92rem;
}

.lora-picker-detail__path {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
  word-break: break-word;
}

.lora-picker-detail__actions,
.lora-picker-detail__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.model-picker-current-config {
  display: grid;
  gap: 8px;
  padding-top: 2px;
  border-top: 1px solid var(--line);
}

.model-picker-current-config__title {
  font-size: 0.78rem;
  color: var(--primary);
  letter-spacing: 0.04em;
}

.preview-scale-card .section-label {
  align-items: center;
}

.preview-scale-card strong {
  color: var(--primary);
  font-size: 0.8rem;
}

.switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 52px;
  height: 28px;
}

.switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.switch__slider {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(236, 233, 183, 0.4);
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.16s ease, border-color 0.16s ease;
}

.switch__slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  transition: transform 0.16s ease;
}

.switch input:checked + .switch__slider {
  border-color: rgba(236, 233, 183, 0.85);
  background: rgba(236, 233, 183, 0.92);
}

.switch input:checked + .switch__slider::before {
  transform: translateX(24px);
  background: #13152c;
}

@media (max-width: 1120px) {
  .modal__dialog--wide {
    width: min(980px, calc(100vw - 24px));
  }

  .lora-picker {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .lora-picker__detail {
    grid-column: 1 / -1;
  }
}

.model-card__copy p,
.config-details summary,
.hero-panel__hint,
.history-empty,
.file-meta,
.history-time,
#previewMeta,
.stage-status-bar__label,
.micro-label {
  color: var(--muted);
}

.model-card__copy p {
  margin: 4px 0 0;
  font-size: 0.72rem;
  line-height: 1.2;
}

.select-shell,
.textarea-shell,
.field-shell,
.config-details {
  display: block;
}

.custom-select-shell {
  position: relative;
}

.native-select {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.custom-select {
  position: relative;
}

.custom-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  color: var(--text);
  background: #090c22;
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.compact .custom-select__trigger {
  min-height: 30px;
}

.custom-select__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select__caret {
  color: var(--muted);
  font-size: 0.86rem;
  transition: transform 0.16s ease;
}

.custom-select.is-open .custom-select__caret {
  transform: rotate(180deg);
}

.custom-select__trigger:hover,
.custom-select__option:hover {
  background: #050816;
}

.custom-select__trigger:focus-visible,
.custom-select.is-open .custom-select__trigger {
  border-color: rgba(236, 233, 183, 0.38);
  background: #0c1027;
  outline: none;
}

.custom-select__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  gap: 0;
  max-height: min(320px, 48vh);
  overflow: auto;
  border: 1px solid rgba(120, 133, 255, 0.28);
  background: #171b3c;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

.custom-select__group {
  padding: 10px 12px 6px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.custom-select__option {
  appearance: none;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
  transition: background 0.14s ease, color 0.14s ease;
}

.custom-select__option.is-active {
  background: #0d1130;
  color: var(--primary);
}

.custom-select.is-disabled {
  opacity: 0.52;
}

.select-shell select,
.textarea-shell textarea,
.field-shell input,
.field-shell select {
  width: 100%;
  border: 1px solid var(--line);
  color: var(--text);
  background: #090c22;
  outline: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.select-shell select,
.field-shell input,
.field-shell select {
  min-height: 32px;
  padding: 6px 9px;
}

.textarea-shell textarea {
  min-height: 134px;
  padding: 10px;
  resize: vertical;
}

.compact input,
.compact select {
  min-height: 30px;
}

.select-shell select:focus,
.textarea-shell textarea:focus,
.field-shell input:focus,
.field-shell select:focus {
  border-color: rgba(255, 255, 255, 0.28);
  background: #0c1027;
}

.section-label,
.response-panel__head,
.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.utility-btn,
.count-btn {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
}

.utility-btn {
  padding: 5px 9px;
  font-size: 0.74rem;
  font-weight: 700;
}

.utility-btn:disabled,
.icon-btn:disabled,
.toolbar-icon-btn:disabled,
.generate-btn:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none !important;
}

.config-details {
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
}

.config-details summary {
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 700;
}

.config-details[open] summary {
  margin-bottom: 10px;
}

.field-shell {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.field-shell span {
  font-size: 0.7rem;
  color: var(--muted);
}

.field-hint {
  display: block;
  font-size: 0.66rem;
  line-height: 1.35;
  color: var(--muted);
}

.rmbg-card {
  display: grid;
  gap: 10px;
}

.rmbg-card .section-label p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.25;
}

#rmbgCountBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 24px;
  border: 1px solid rgba(236, 233, 183, 0.22);
  color: var(--primary);
  background: rgba(236, 233, 183, 0.08);
  font-size: 0.72rem;
}

.rmbg-dropzone {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 74px;
  padding: 12px;
  border: 1px dashed rgba(236, 233, 183, 0.28);
  color: var(--text);
  background: rgba(255, 255, 255, 0.025);
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.rmbg-dropzone:hover {
  border-color: rgba(236, 233, 183, 0.5);
  background: rgba(236, 233, 183, 0.06);
}

.rmbg-dropzone:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.rmbg-dropzone strong {
  font-size: 0.9rem;
}

.rmbg-dropzone span {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.25;
}

.rmbg-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.rmbg-actions .utility-btn {
  min-height: 30px;
}

.rmbg-queue-list {
  display: grid;
  gap: 8px;
  max-height: min(48vh, 460px);
  overflow: auto;
}

.rmbg-queue-item {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}

.rmbg-queue-item__preview {
  width: 74px;
  height: 92px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.05) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.05) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.05) 75%),
    #080b1b;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.rmbg-queue-item__preview:disabled {
  cursor: default;
}

.rmbg-queue-item__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rmbg-queue-item__body {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.rmbg-queue-item__body strong,
.rmbg-queue-item__body span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rmbg-queue-item__body strong {
  font-size: 0.73rem;
}

.rmbg-queue-item__body span {
  color: var(--muted);
  font-size: 0.66rem;
}

.rmbg-queue-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rmbg-queue-item__actions .icon-btn {
  width: 28px;
  height: 28px;
  font-size: 0.86rem;
}

.rmbg-queue-item.is-processing {
  border-color: rgba(120, 133, 255, 0.45);
  background: rgba(120, 133, 255, 0.08);
}

.rmbg-queue-item.is-done {
  border-color: rgba(89, 204, 139, 0.38);
  background: rgba(89, 204, 139, 0.07);
}

.rmbg-queue-item.is-error {
  border-color: rgba(255, 112, 112, 0.38);
  background: rgba(255, 112, 112, 0.08);
}

.compare-view {
  --compare-position: 50%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(45deg, rgba(255,255,255,0.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.06) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.06) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.06) 75%),
    #23242b;
  background-position: 0 0, 0 14px, 14px -14px, -14px 0;
  background-size: 28px 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}

.compare-view--stage {
  width: min(100%, calc(860px * var(--stage-preview-scale)));
  height: min(78vh, calc(560px * var(--stage-preview-scale)));
  min-height: 320px;
}

.compare-view--modal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  box-shadow: none;
}

.compare-view__before,
.compare-view__after,
.compare-view__after-wrap {
  position: absolute;
  inset: 0;
}

.compare-view__before,
.compare-view__after {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.compare-view__after-wrap {
  clip-path: inset(0 calc(100% - var(--compare-position)) 0 0);
  background:
    linear-gradient(45deg, rgba(255,255,255,0.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.08) 75%),
    #20222a;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  background-size: 24px 24px;
}

.compare-view__slider {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
}

.compare-view__handle {
  position: absolute;
  top: 50%;
  left: var(--compare-position);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 30px;
  border-radius: 6px;
  color: #fff;
  background: #ff7a1a;
  font-size: 0.72rem;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.compare-view__handle::before {
  content: "";
  position: absolute;
  top: -2000px;
  bottom: -2000px;
  left: 50%;
  width: 2px;
  background: rgba(255, 122, 26, 0.9);
  transform: translateX(-50%);
  z-index: -1;
}

.meta-list {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.meta-pill {
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.7rem;
}

.preset-row {
  display: grid;
  gap: 10px;
}

.micro-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.7rem;
}

.dimensions-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: end;
}

.count-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.count-btn {
  min-height: 28px;
  min-width: 44px;
  padding: 0 10px;
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 0.76rem;
}

.count-btn.is-active {
  border-color: transparent;
  background: var(--primary);
  color: var(--primary-ink);
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.source-image-card {
  display: grid;
  gap: 10px;
}

.img2img-panel {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(9, 12, 30, 0.96));
}

.img2img-panel.is-empty {
  border-style: dashed;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(10, 12, 30, 0.92)),
    radial-gradient(circle at center, rgba(92, 96, 172, 0.12), transparent 54%);
}

.img2img-panel__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}

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

.img2img-panel__preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #060915;
}

.img2img-panel__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 10, 29, 0.18), rgba(8, 10, 29, 0.68)),
    linear-gradient(180deg, rgba(8, 10, 29, 0.02), rgba(8, 10, 29, 0.1));
  pointer-events: none;
}

.img2img-panel.is-empty .img2img-panel__overlay {
  background: rgba(10, 12, 30, 0.56);
}

.img2img-panel__empty,
.img2img-panel__head,
.img2img-panel__controls {
  position: relative;
  z-index: 1;
}

.img2img-panel__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 6px;
  text-align: center;
  padding: 28px;
}

.img2img-panel__empty strong,
.img2img-panel__head strong {
  display: block;
  font-size: 1rem;
  font-weight: 800;
}

.img2img-panel__empty p,
.img2img-panel__head p,
.source-image-meta {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.img2img-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 0;
}

.img2img-panel.is-empty .img2img-panel__head > div:first-child {
  opacity: 0;
  pointer-events: none;
}

.img2img-panel.is-empty .img2img-panel__head {
  justify-content: flex-end;
}

.img2img-panel.is-empty .img2img-panel__controls {
  display: none;
}

.img2img-panel__icon-actions {
  display: inline-flex;
  gap: 6px;
}

.img2img-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(13, 18, 48, 0.92);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.88rem;
}

.img2img-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.img2img-panel__controls {
  display: grid;
  gap: 14px;
  padding: 14px;
  padding-top: 118px;
}

.img2img-slider-row {
  display: grid;
  gap: 6px;
}

.img2img-slider-row__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.96rem;
  font-weight: 800;
}

.img2img-slider-row__label strong {
  font-size: 1rem;
}

.img2img-slider {
  width: 100%;
  height: 22px;
  margin: 0;
  appearance: none;
  background: transparent;
}

.img2img-slider::-webkit-slider-runnable-track {
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, rgba(10, 12, 42, 0.98), rgba(14, 20, 64, 0.98));
}

.img2img-slider::-webkit-slider-thumb {
  appearance: none;
  width: 10px;
  height: 22px;
  margin-top: -1px;
  border: 1px solid rgba(236, 233, 183, 0.55);
  background: var(--primary);
}

.img2img-slider::-moz-range-track {
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, rgba(10, 12, 42, 0.98), rgba(14, 20, 64, 0.98));
}

.img2img-slider::-moz-range-thumb {
  width: 10px;
  height: 22px;
  border: 1px solid rgba(236, 233, 183, 0.55);
  background: var(--primary);
}

.img2img-slider:disabled {
  opacity: 0.42;
}

.img2img-panel__footer {
  display: flex;
  justify-content: flex-start;
}

.img2img-panel__footer-btn {
  min-height: 34px;
  padding-inline: 12px;
  background: rgba(13, 18, 48, 0.94);
}

.source-image-meta {
  min-height: 18px;
  font-size: 0.72rem;
}

.generate-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 35px;
  padding: 0 8px;
  border: 1px solid rgba(236, 233, 183, 0.55);
  background: linear-gradient(180deg, var(--primary-strong), var(--primary));
  color: var(--primary-ink);
  font-size: 0.84rem;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.generate-btn strong {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  min-height: 22px;
  padding: 0 6px;
  background: rgba(18, 20, 42, 0.92);
  color: #fff;
  font-size: 0.76rem;
}

.resize-handle {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
}

.resize-handle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
}

.resize-handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 52px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  transform: translate(-50%, -50%);
  box-shadow:
    -3px 0 0 rgba(255, 255, 255, 0.08),
    3px 0 0 rgba(255, 255, 255, 0.08);
  transition: background 0.16s ease, height 0.16s ease;
}

.resize-handle:hover span,
.resize-handle:focus-visible span,
body.is-resizing-layout .resize-handle span {
  height: 84px;
  background: rgba(236, 233, 183, 0.72);
}

.stage-shell {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 10px 18px 14px;
  background:
    radial-gradient(circle at center, rgba(70, 74, 140, 0.18), transparent 48%),
    #10133a;
  overflow: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
}

.stage-shell::before,
.stage-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 50%;
  will-change: transform;
  contain: paint;
  backface-visibility: hidden;
}

.stage-shell::before {
  opacity: 0.2;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='620' viewBox='0 0 1400 620'%3E%3Cg fill='none' stroke='%2300b8ff' stroke-opacity='.28' stroke-width='1'%3E%3Cpath d='M-60 368 C70 288 160 426 286 342 S514 226 684 310 942 432 1124 318 1310 250 1460 316'/%3E%3Cpath d='M-40 446 C134 348 258 488 418 408 S688 266 880 360 1114 504 1464 342'/%3E%3Cpath d='M-80 264 C84 188 218 332 370 262 S622 142 796 226 1058 344 1216 246 1360 210 1480 252'/%3E%3Cpath d='M38 378 L132 340 L286 342 L430 294 L568 286 L684 310 L818 372 L964 370 L1124 318 L1240 296 L1364 318'/%3E%3Cpath d='M88 452 L214 410 L418 408 L540 350 L700 326 L880 360 L1012 442 L1168 414 L1328 356'/%3E%3Cpath d='M46 270 L190 256 L370 262 L512 210 L650 190 L796 226 L928 286 L1068 300 L1216 246 L1336 238'/%3E%3Cpath d='M132 340 L214 410 L286 342 L370 262 L430 294 L540 350 L568 286 L650 190 L684 310 L796 226 L818 372 L880 360 L964 370 L1068 300 L1124 318 L1168 414 L1216 246 L1240 296 L1328 356 L1364 318'/%3E%3Cpath d='M38 378 L88 452 L214 410 L286 342 L430 294 L540 350 L700 326 L818 372 L1012 442 L1124 318 L1328 356'/%3E%3Cpath d='M46 270 L132 340 L190 256 L286 342 L370 262 L512 210 L568 286 L684 310 L796 226 L928 286 L964 370 L1124 318 L1216 246 L1364 318'/%3E%3C/g%3E%3Cg fill='%2318eaff' fill-opacity='.78'%3E%3Ccircle cx='38' cy='378' r='2.7'/%3E%3Ccircle cx='88' cy='452' r='2.2'/%3E%3Ccircle cx='132' cy='340' r='2.8'/%3E%3Ccircle cx='190' cy='256' r='2.1'/%3E%3Ccircle cx='214' cy='410' r='3'/%3E%3Ccircle cx='286' cy='342' r='2.6'/%3E%3Ccircle cx='370' cy='262' r='2.4'/%3E%3Ccircle cx='418' cy='408' r='2.5'/%3E%3Ccircle cx='512' cy='210' r='2'/%3E%3Ccircle cx='540' cy='350' r='2.3'/%3E%3Ccircle cx='568' cy='286' r='2.8'/%3E%3Ccircle cx='650' cy='190' r='2.4'/%3E%3Ccircle cx='684' cy='310' r='2.2'/%3E%3Ccircle cx='700' cy='326' r='1.8'/%3E%3Ccircle cx='796' cy='226' r='2.8'/%3E%3Ccircle cx='818' cy='372' r='2.2'/%3E%3Ccircle cx='880' cy='360' r='2.9'/%3E%3Ccircle cx='928' cy='286' r='2'/%3E%3Ccircle cx='964' cy='370' r='2.6'/%3E%3Ccircle cx='1012' cy='442' r='2.1'/%3E%3Ccircle cx='1068' cy='300' r='2.4'/%3E%3Ccircle cx='1124' cy='318' r='3.1'/%3E%3Ccircle cx='1168' cy='414' r='2.3'/%3E%3Ccircle cx='1216' cy='246' r='2.6'/%3E%3Ccircle cx='1240' cy='296' r='1.9'/%3E%3Ccircle cx='1328' cy='356' r='2.7'/%3E%3Ccircle cx='1364' cy='318' r='2.4'/%3E%3C/g%3E%3Cg fill='%2300d7ff' fill-opacity='.34'%3E%3Ccircle cx='150' cy='480' r='1.2'/%3E%3Ccircle cx='248' cy='304' r='1.1'/%3E%3Ccircle cx='330' cy='448' r='1.3'/%3E%3Ccircle cx='476' cy='386' r='1'/%3E%3Ccircle cx='612' cy='430' r='1.2'/%3E%3Ccircle cx='746' cy='250' r='1.1'/%3E%3Ccircle cx='930' cy='468' r='1.2'/%3E%3Ccircle cx='1098' cy='226' r='1.1'/%3E%3Ccircle cx='1268' cy='438' r='1.2'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 54% 61%, rgba(0, 210, 255, 0.18) 0%, rgba(0, 94, 255, 0.08) 28%, transparent 62%),
    radial-gradient(ellipse at 42% 83%, rgba(0, 245, 255, 0.12) 0%, transparent 48%);
  background-size: 1400px 620px, 100% 100%, 100% 100%;
  background-position: 0 58%, center, center;
  background-repeat: repeat-x, no-repeat, no-repeat;
  animation: network-ocean-drift 7.2s linear infinite alternate;
}

.stage-shell::after {
  opacity: 0.34;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1500' height='620' viewBox='0 0 1500 620'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-100 398 C74 266 236 510 424 372 S730 96 958 256 1228 456 1600 276' stroke='%2300eaff' stroke-opacity='.32' stroke-width='30'/%3E%3Cpath d='M-100 398 C74 266 236 510 424 372 S730 96 958 256 1228 456 1600 276' stroke='%2369f7ff' stroke-opacity='.62' stroke-width='8'/%3E%3Cpath d='M-80 476 C134 342 278 566 486 448 S744 292 930 388 1210 528 1580 354' stroke='%23008bff' stroke-opacity='.28' stroke-width='22'/%3E%3Cpath d='M-80 476 C134 342 278 566 486 448 S744 292 930 388 1210 528 1580 354' stroke='%231ccfff' stroke-opacity='.54' stroke-width='5'/%3E%3Cpath d='M-120 288 C80 196 210 362 372 280 S662 160 828 238 1074 356 1256 252 1412 198 1600 248' stroke='%2300a7ff' stroke-opacity='.24' stroke-width='20'/%3E%3Cpath d='M-120 288 C80 196 210 362 372 280 S662 160 828 238 1074 356 1256 252 1412 198 1600 248' stroke='%2308e8ff' stroke-opacity='.5' stroke-width='4'/%3E%3C/g%3E%3Cg fill='%235ff7ff' fill-opacity='.78'%3E%3Ccircle cx='424' cy='372' r='4'/%3E%3Ccircle cx='730' cy='184' r='3.2'/%3E%3Ccircle cx='958' cy='256' r='3.5'/%3E%3Ccircle cx='1228' cy='392' r='3.8'/%3E%3Ccircle cx='486' cy='448' r='3.2'/%3E%3Ccircle cx='930' cy='388' r='3.4'/%3E%3Ccircle cx='372' cy='280' r='3'/%3E%3Ccircle cx='828' cy='238' r='3.2'/%3E%3Ccircle cx='1256' cy='252' r='3.6'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 28% 69%, rgba(0, 245, 255, 0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 48%, rgba(68, 210, 255, 0.16) 0 1px, transparent 2px);
  background-size: 1500px 620px, 160px 120px, 220px 160px;
  background-position: 0 58%, 0 0, 80px 28px;
  background-repeat: repeat-x, repeat, repeat;
  animation: network-ocean-swell 3.8s linear infinite alternate;
}

.stage-shell > * {
  position: relative;
  z-index: 1;
}

@keyframes network-ocean-drift {
  0% {
    transform: translate3d(-46px, 6px, 0) scale(1.08);
  }
  50% {
    transform: translate3d(8px, -10px, 0) scale(1.085);
  }
  100% {
    transform: translate3d(48px, 4px, 0) scale(1.08);
  }
}

@keyframes network-ocean-swell {
  0% {
    transform: translate3d(-58px, 14px, 0) scale(1.09);
  }
  100% {
    transform: translate3d(58px, -16px, 0) scale(1.105);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-shell::before,
  .stage-shell::after {
    animation: none;
  }
}

.stage-status-bar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content)) 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
  align-items: center;
  min-height: 42px;
  padding: 4px 0 10px;
  overflow: visible;
  isolation: isolate;
}

.stage-status-bar > :not(.stage-generate-fx) {
  position: relative;
  z-index: 2;
}

.stage-status-bar strong {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
}

.stage-status-bar__actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.generation-progress {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: -4px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.32s ease, transform 0.32s ease;
}

.generation-progress.is-hidden {
  display: none;
}

.generation-progress.is-dismissing {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.generation-progress[hidden] {
  display: none;
}

.generation-progress__track {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.generation-progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #fff 0%, #f7f4d0 56%, #9fc0ff 100%);
  box-shadow: 0 0 14px rgba(243, 239, 200, 0.22);
  transition: width 0.35s ease;
}

.generation-progress__text {
  min-width: 98px;
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.generation-progress.is-indeterminate .generation-progress__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 46%, transparent 100%);
  animation: progress-shine 1.3s linear infinite;
}

.generation-progress.is-error .generation-progress__fill {
  background: linear-gradient(90deg, #ffb19a 0%, #ff6e6e 100%);
}

.generation-progress.is-complete .generation-progress__fill {
  background: linear-gradient(90deg, #fff 0%, #9ee8a0 100%);
}

.cancel-job-btn {
  border-color: rgba(255, 122, 26, 0.5);
  color: #ffd7c0;
}

.cancel-job-btn:hover {
  border-color: rgba(255, 122, 26, 0.95);
  background: rgba(255, 122, 26, 0.12);
}

.stage-status-bar__label {
  font-size: 0.67rem;
  letter-spacing: 0.01em;
}

.layout-preset-btn {
  color: var(--muted);
}

.stage-preview-panel {
  position: relative;
  flex: 0 0 auto;
  min-height: 340px;
  padding: 18px 0 6px;
  overflow-anchor: none;
}

.stage-preview-panel.is-generating {
  padding-top: clamp(54px, 6vh, 76px);
}

.stage-generate-fx {
  position: absolute;
  inset: 0 0 2px;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.78;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.98) 8%, rgba(0, 0, 0, 0.98) 92%, transparent 100%);
}

.stage-generate-fx__line {
  position: absolute;
  top: 0;
  left: -18%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgba(243, 239, 200, 0.12) 10%, rgba(243, 239, 200, 0.92) 46%, rgba(143, 184, 255, 0.8) 66%, transparent 100%);
  box-shadow: 0 0 11px rgba(243, 239, 200, 0.28);
  animation: stage-flow 2.9s linear infinite;
}

.stage-generate-fx__line--a {
  width: 64%;
}

.stage-generate-fx__line--b {
  top: auto;
  bottom: 0;
  width: 38%;
  animation-duration: 2.2s;
  animation-delay: -0.6s;
  opacity: 0.82;
}

.stage-generate-fx__line--c {
  top: auto;
  bottom: 0;
  width: 52%;
  animation-duration: 3.4s;
  animation-delay: -1.4s;
  opacity: 0.56;
}

.stage-preview-panel.is-generating .stage-preview-button,
.stage-preview-panel.is-generating .stage-collection-view,
.stage-preview-panel.is-generating .stage-preview-empty {
  filter: saturate(1.04);
}

.stage-preview-panel.is-generating .stage-preview-button img,
.stage-preview-panel.is-generating .stage-preview-button video {
  max-height: min(78vh, calc(68vh * var(--stage-preview-scale)));
}

.stage-preview-empty {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 240px;
  text-align: center;
}

.stage-preview-content {
  display: grid;
  justify-items: center;
  gap: 14px;
}

.stage-collection-view {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.stage-collection-thumb {
  display: grid;
  gap: 8px;
  padding: 0;
  border: 1px solid var(--line);
  background: rgba(10, 12, 28, 0.8);
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.stage-collection-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1.2;
  object-fit: contain;
  background: #0b0f27;
  transition: transform 0.28s ease;
}

.stage-collection-thumb span {
  padding: 0 10px 10px;
  font-size: 0.74rem;
  color: var(--muted);
}

.stage-collection-thumb:hover {
  transform: translateY(-3px);
  border-color: rgba(243, 239, 200, 0.42);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}

.stage-collection-thumb:hover img {
  transform: scale(1.035);
}

.stage-preview-frame {
  display: grid;
  place-items: center;
  width: min(100%, calc(860px * var(--stage-preview-scale)));
  min-height: calc(460px * var(--stage-preview-scale));
}

.stage-preview-button {
  display: grid;
  place-items: center;
  width: auto;
  max-width: 100%;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(7, 10, 24, 0.88);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  transition: box-shadow 0.24s ease, border-color 0.24s ease;
}

.stage-preview-button img,
.stage-preview-button video {
  display: block;
  max-width: min(100%, calc(860px * var(--stage-preview-scale)));
  max-height: min(86vh, calc(76vh * var(--stage-preview-scale)));
  object-fit: contain;
  transition: transform 0.26s linear;
}

.stage-preview-button.is-streaming-preview img {
  filter: blur(var(--stream-preview-blur, 12px)) brightness(var(--stream-preview-brightness, 0.96));
  transition: filter 0.45s ease, transform 0.26s linear;
}

.stage-preview-button video {
  background: #050812;
}

.stage-preview-button:hover {
  transform: none;
  border-color: rgba(243, 239, 200, 0.2);
  box-shadow: 0 24px 68px rgba(0, 0, 0, 0.34);
}

.stage-preview-button:hover img,
.stage-preview-button:hover video {
  transform: scale(1.025);
}

.stage-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(100%, calc(860px * var(--stage-preview-scale)));
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(12, 16, 37, 0.9);
}

.stage-preview-toolbar__copy {
  min-width: 0;
}

.stage-preview-toolbar__copy strong {
  display: block;
  font-size: 0.86rem;
}

.stage-preview-toolbar__copy p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  word-break: break-word;
}

.stage-preview-toolbar__actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hero-panel__copy h1 {
  margin: 0 0 5px;
  font-size: clamp(1.45rem, 1.8vw, 2rem);
  font-weight: 800;
}

.hero-panel__copy p {
  margin: 0;
}

.hero-panel__hint {
  margin-top: 9px;
  font-size: 0.82rem;
}

.import-dropzone {
  width: min(100%, 620px);
  margin-top: 18px;
  padding: 16px;
  border: 1px dashed rgba(236, 233, 183, 0.38);
  background: rgba(8, 11, 28, 0.42);
  text-align: left;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.import-dropzone.is-dragover {
  border-color: rgba(236, 233, 183, 0.82);
  background: rgba(14, 18, 40, 0.78);
  transform: translateY(-1px);
}

.import-dropzone strong {
  display: block;
  font-size: 0.92rem;
}

.import-dropzone p {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.4;
}

.import-dropzone__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.import-dropzone__status {
  min-height: 20px;
  margin-bottom: 0;
  font-size: 0.74rem;
}

.hero-panel__spark {
  position: absolute;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at center, rgba(255, 248, 179, 0.98) 0 22%, rgba(255, 248, 179, 0.2) 23%, transparent 70%);
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  opacity: 0.9;
}

.spark-a {
  left: 24%;
  top: 44px;
  transform: scale(0.72);
}

.spark-b {
  top: 44px;
  right: 28%;
  transform: scale(0.62);
}

.spark-c {
  left: 34%;
  top: 75px;
  transform: scale(1.95);
  opacity: 0.09;
}

.gallery-panel {
  flex: 0 0 auto;
  display: block;
  min-height: auto;
  margin-top: 12px;
}

.gallery-empty {
  display: grid;
  place-items: center;
  min-height: 140px;
  color: var(--muted);
  border: 1px dashed var(--line);
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  margin: 0;
}

.result-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  background: #141833;
  border: 1px solid var(--line);
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.result-card__media {
  position: relative;
  min-width: 0;
  background: #0b0f27;
}

.result-card__preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.35s ease;
}

.result-card__preview video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050812;
  transition: transform 0.35s ease;
}

.result-card:hover {
  transform: translateY(-4px);
  border-color: rgba(243, 239, 200, 0.36);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

.result-card:hover .result-card__preview img,
.result-card:hover .result-card__preview video {
  transform: scale(1.045);
}

.result-card.is-selected {
  border-color: rgba(236, 233, 183, 0.55);
  box-shadow: inset 0 0 0 1px rgba(236, 233, 183, 0.25);
}

.result-card__preview {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.2;
  padding: 0;
  overflow: hidden;
  background: #0b0f27;
}

.result-card__hoverbar {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(11, 14, 35, 0.92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

.result-card:hover .result-card__hoverbar,
.result-card:focus-within .result-card__hoverbar {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.result-card__hover-btn {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.result-card__hover-btn:hover {
  border-color: rgba(243, 239, 200, 0.32);
  background: rgba(243, 239, 200, 0.08);
}

.result-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px 8px;
  border-top: 1px solid var(--line);
}

.file-name {
  display: block;
  margin-bottom: 2px;
  font-size: 0.74rem;
}

.file-meta,
.history-time {
  font-size: 0.66rem;
}

.response-panel {
  margin-top: 12px;
  padding: 10px;
  position: relative;
  z-index: 1;
  border: 1px solid var(--line);
  background: rgba(8, 10, 24, 0.85);
  overflow-anchor: none;
}

.response-panel h3,
#previewTitle {
  margin: 0;
}

.response-panel__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.response-panel__summary {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.response-panel pre {
  overflow: auto;
  margin: 8px 0 0;
  max-height: 240px;
  padding: 9px;
  border: 1px solid var(--line);
  background: #090b1e;
  color: #d7defe;
  white-space: pre-wrap;
  word-break: break-word;
}

.response-panel.is-collapsed pre {
  display: none;
}

.history-rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 8px;
  padding: 10px 6px;
  border-left: 1px solid var(--line);
  background: #111330;
  overflow: hidden;
  overscroll-behavior: contain;
}

.history-rail__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--text);
  font-size: 0.66rem;
}

.history-persist-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 0.62rem;
  cursor: pointer;
  user-select: none;
}

.history-persist-toggle input {
  width: 13px;
  height: 13px;
  accent-color: #f3efc8;
}

.history-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 6px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.history-list::-webkit-scrollbar {
  width: 7px;
}

.history-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

.history-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

.history-empty {
  flex: 0 0 auto;
  font-size: 0.66rem;
}

.history-thumb {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1 / 1.25;
  padding: 4px;
  border: 1px solid var(--line);
  text-align: left;
  background: rgba(255, 255, 255, 0.02);
  position: relative;
  overflow: hidden;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.history-thumb img,
.history-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-fit: contain;
  background: #050812;
  transition: transform 0.22s linear;
}

.history-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-fit: contain;
  background: #050812;
}

.history-thumb__meta {
  display: none;
}

#previewModal .modal__dialog {
  width: min(1380px, calc(100vw - 56px));
  height: calc(100vh - 40px);
  min-height: calc(100vh - 40px);
  max-height: calc(100vh - 40px);
  margin: 20px auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
}

#previewModal .modal__body {
  flex: 1 1 0;
  min-height: 0;
  margin-top: 14px;
  padding: 12px;
  display: flex;
}

#previewModal .modal__body img,
#previewModal .modal__body video {
  max-width: none;
  max-height: none;
}

.preview-viewport {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent),
    #070b1b;
}

.preview-viewport.is-draggable {
  cursor: grab;
}

.preview-viewport.is-dragging {
  cursor: grabbing;
}

.preview-media-stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  will-change: transform;
}

.preview-media-stage img,
.preview-media-stage video {
  display: block;
  width: 100%;
  height: 100%;
  background: #050812;
}

.preview-media-stage img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.preview-viewport__controls {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 13, 31, 0.92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(8px);
}

.preview-viewport__control-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.preview-viewport__control-btn--wide {
  min-width: 56px;
  font-size: 0.75rem;
}

.preview-viewport__control-btn:hover:not(:disabled) {
  border-color: rgba(243, 239, 200, 0.28);
  background: rgba(243, 239, 200, 0.08);
}

.preview-viewport__control-btn:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.preview-viewport__zoom-label {
  min-width: 52px;
  text-align: center;
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 800;
}

.history-thumb:hover:not(.is-pending) {
  transform: none;
}

.history-thumb:hover:not(.is-pending) img,
.history-thumb:hover:not(.is-pending) video {
  transform: scale(1.045);
}

.history-thumb.is-selected {
  border-color: rgba(243, 239, 200, 0.95);
  background: rgba(243, 239, 200, 0.05);
  box-shadow:
    0 0 0 1px rgba(243, 239, 200, 0.82),
    0 0 18px rgba(243, 239, 200, 0.18),
    inset 0 0 0 1px rgba(243, 239, 200, 0.32);
}

.history-thumb.is-pending {
  border-color: rgba(243, 239, 200, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(11, 15, 34, 0.96)),
    radial-gradient(circle at center, rgba(243, 239, 200, 0.08), transparent 62%);
}

.history-thumb__pending {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent 55%),
    linear-gradient(180deg, rgba(5, 8, 22, 0.3), rgba(5, 8, 22, 0.72));
}

.history-thumb__spinner {
  width: 26px;
  height: 26px;
  border: 3px solid rgba(243, 239, 200, 0.18);
  border-top-color: rgba(243, 239, 200, 0.95);
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(243, 239, 200, 0.16);
  animation: history-spin 0.9s linear infinite;
}

.stage-status-bar strong.is-generating {
  color: var(--primary);
  text-shadow: 0 0 14px rgba(243, 239, 200, 0.22);
}

@keyframes history-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes stage-flow {
  from {
    transform: translateX(0);
    opacity: 0;
  }
  10%,
  70% {
    opacity: 1;
  }
  to {
    transform: translateX(165%);
    opacity: 0;
  }
}

@keyframes progress-shine {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(110%);
  }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 40;
  padding: 10px 14px;
  border: 1px solid rgba(236, 233, 183, 0.4);
  background: rgba(9, 12, 28, 0.96);
  box-shadow: var(--shadow);
}

.toast--important {
  bottom: 64px;
  width: min(520px, calc(100vw - 36px));
  padding: 18px 22px;
  border: 2px solid rgba(246, 241, 181, 0.86);
  background: rgba(14, 16, 38, 0.98);
  color: #fff6b8;
  font-size: clamp(1.12rem, 2vw, 1.42rem);
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}

.secret-input {
  -webkit-text-security: disc;
  text-security: disc;
}

.layout-feedback {
  position: fixed;
  left: 50%;
  top: 42px;
  transform: translateX(-50%);
  z-index: 41;
  padding: 8px 12px;
  border: 1px solid rgba(236, 233, 183, 0.35);
  background: rgba(10, 12, 28, 0.96);
  box-shadow: var(--shadow);
  font-size: 0.78rem;
  white-space: nowrap;
}

.global-drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  background: rgba(5, 8, 22, 0.56);
}

.global-drop-overlay__panel {
  display: grid;
  place-items: center;
}

.global-drop-overlay__icon {
  position: relative;
  width: 80px;
  height: 80px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(18, 22, 50, 0.9);
  box-shadow: var(--shadow);
}

.global-drop-overlay__arrow {
  position: absolute;
  left: 50%;
  top: 18px;
  width: 0;
  height: 30px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 10px solid #fff;
  transform: translateX(-50%);
}

.global-drop-overlay__arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  width: 10px;
  height: 28px;
  background: #fff;
  transform: translateX(-50%);
}

.global-drop-overlay__arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 34px;
  width: 28px;
  height: 4px;
  background: #fff;
  transform: translateX(-50%);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 19, 0.78);
}

.modal__dialog {
  position: relative;
  z-index: 1;
  width: min(1000px, calc(100vw - 32px));
  margin: 32px auto;
  padding: 14px;
  border: 1px solid var(--line-strong);
  background: #11152f;
  box-shadow: var(--shadow);
}

.modal__dialog--import {
  width: min(900px, calc(100vw - 32px));
}

.modal__actions {
  display: inline-flex;
  gap: 8px;
}

.modal__body {
  margin-top: 12px;
  display: grid;
  place-items: center;
  min-height: 420px;
  border: 1px solid var(--line);
  background: #0a0d20;
}

.modal__body img {
  width: auto;
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
}

.modal__body video {
  width: auto;
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: #050812;
}

.import-action-layout {
  display: grid;
  grid-template-columns: minmax(240px, 380px) minmax(0, 1fr);
  gap: 18px;
  margin-top: 12px;
  align-items: start;
}

.import-action-preview-shell {
  min-height: 360px;
  padding: 12px;
  border: 1px solid var(--line);
  background: #090c24;
  display: grid;
  place-items: center;
}

.import-action-preview-shell img {
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
}

.import-action-body {
  display: grid;
  gap: 18px;
}

.import-action-mode-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.import-mode-btn {
  min-width: 148px;
  min-height: 36px;
  font-size: 0.88rem;
}

.import-metadata-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.import-metadata-panel strong {
  font-size: 1rem;
}

.import-metadata-panel p {
  margin: 0;
}

.import-metadata-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

.import-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  color: var(--text);
}

.import-option input {
  margin: 0;
}

.import-metadata-actions {
  display: flex;
  justify-content: flex-end;
}

.import-metadata-confirm {
  min-width: 220px;
  justify-content: center;
}

[hidden] {
  display: none !important;
}

.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.82;
}

.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(236, 233, 183, 0.7);
  animation: pulse 1.15s infinite;
}

@keyframes pulse {
  0% { opacity: 0.24; }
  50% { opacity: 0.88; }
  100% { opacity: 0.24; }
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 260px minmax(0, 1fr);
    min-width: 0;
  }

  .history-rail {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .resize-handle {
    display: none;
  }

  .history-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    max-height: 240px;
    overflow-y: auto;
  }
}

@media (max-width: 1100px) {
  .result-grid,
  .stage-collection-view {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .control-sidebar,
  .history-rail {
    border: 0;
  }

  .stage-status-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stage-status-bar__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .layout-preset-btn {
    display: none;
  }
}

@media (max-width: 760px) {
  .result-grid,
  .stage-collection-view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .top-banner__inner {
    flex-wrap: wrap;
  }

  .result-grid {
    width: 100%;
  }

  .settings-grid,
  .dimensions-row {
    grid-template-columns: 1fr;
  }

  .stage-preview-frame {
    min-height: 260px;
  }

  .stage-preview-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .modal__dialog {
    width: calc(100vw - 16px);
    margin: 8px auto;
  }

  .import-action-layout {
    grid-template-columns: 1fr;
  }

  .import-action-preview-shell {
    min-height: 220px;
  }
}

@media (max-width: 420px) {
  .result-grid,
  .stage-collection-view {
    grid-template-columns: 1fr;
  }
}