@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/geist-mono-light-D2GQ5ey7.otf') format('opentype');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('/assets/geist-variable-CrgPqtmy.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/geist-mono-bold-0A1Ec8rT.otf') format('opentype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Bembo Std';
  src: url('/assets/BemboStd-CsntJKz1.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Bembo Std';
  src: url('/assets/BemboStd-Italic-DAD4SEQX.woff2') format('woff2');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Bembo Std';
  src: url('/assets/BemboStd-Semibold-DaUb_cJY.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Bembo Std';
  src: url('/assets/BemboStd-Bold-RHmvn1yz.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Bembo Std';
  src: url('/assets/BemboStd-ExtraBold-rZ_Qlwvy.woff2') format('woff2');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/geist-mono-regular-xfjIt7sw.otf') format('opentype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #000;
  --panel: #121212;
  --text: #d8d2c7;
  --soft: #b7b2aa;
  --muted: #8e8a83;
  --gold: #d7c29a;
  --serif: 'Bembo Std', serif;
  --sans: 'Geist Mono', monospace;
  --mono: 'Geist Mono', monospace;

  color: var(--text);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

html {
  background: #000;
  scrollbar-color: rgba(215, 194, 154, 0.68) #050505;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-track {
  background: #050505;
  border-left: 1px solid rgba(215, 194, 154, 0.12);
}

*::-webkit-scrollbar-thumb {
  background: rgba(215, 194, 154, 0.68);
  border: 2px solid #050505;
  border-radius: 0;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

body {
  min-width: 320px;
  min-height: 100svh;
  margin: 0;
  background: #000;
}

#root {
  min-height: 100svh;
}

button,
a,
input,
select,
textarea {
  letter-spacing: 0;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.appShell {
  min-height: 100svh;
  color: var(--text);
  background: #000;
}

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

button {
  color: inherit;
  white-space: nowrap;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease,
    transform 0.18s ease;
}

button:active:not(:disabled) {
  transform: scale(0.97);
}

.topNav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr);
  align-items: center;
  min-height: 50px;
  gap: 14px;
  padding: 8px 18px;
  background: rgba(0, 0, 0, 0.92);
  border-bottom: 1px solid rgba(215, 194, 154, 0.55);
  backdrop-filter: blur(16px);
}

.topLogo {
  justify-self: start;
  padding: 0;
  color: var(--gold);
  background: transparent;
  border: 0;
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.topLogo img {
  display: block;
  width: clamp(132px, 13vw, 172px);
  height: auto;
}

.primaryNav {
  display: flex;
  gap: 7px;
  align-items: center;
}

.modeNav {
  justify-self: center;
}

.sectionNav {
  justify-self: end;
}

.navLink {
  min-height: 29px;
  padding: 5px 9px;
  color: var(--soft);
  background: transparent;
  border: 1px solid transparent;
  font-family: var(--serif);
  font-size: 14px;
  cursor: pointer;
}

.navLink.active {
  color: var(--gold);
  border-color: var(--gold);
}

.mainSurface {
  min-height: calc(100svh - 50px);
  padding: 12px 18px 118px;
}

.generateView {
  min-height: calc(100svh - 178px);
}

.emptyState {
  width: 1px;
  height: 1px;
}

.generationStage {
  display: grid;
  place-items: center;
  min-height: calc(100svh - 184px);
  padding: 10px 0 0;
}

.generateMode-import .generationStage,
.generateMode-enhance .generationStage {
  min-height: calc(100svh - 228px);
}

.modeInputStack {
  display: grid;
  gap: 12px;
  justify-items: center;
  width: min(72vw, 760px);
}

.modeToolStrip {
  position: sticky;
  top: 4px;
  z-index: 35;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin: -2px auto 6px;
  padding: 7px 10px;
  width: min(92vw, 1040px);
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(215, 194, 154, 0.18);
  border-radius: 999px;
  backdrop-filter: blur(16px);
}

.toolPill,
.compactRange {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 10px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.toolPill {
  cursor: pointer;
}

.toolPill.active {
  color: var(--gold);
  background: rgba(215, 194, 154, 0.09);
  border-color: rgba(215, 194, 154, 0.42);
}

.editToolCluster {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

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

.inpaintBrushControls {
  display: flex;
  gap: 7px;
  align-items: center;
}

.brushSizeRange {
  min-width: 0;
}

.brushSizeRange input {
  width: 86px;
}

.brushHistoryButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  cursor: pointer;
}

.brushHistoryButton:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.brushHistoryButton:not(:disabled):hover {
  color: var(--gold);
  border-color: rgba(215, 194, 154, 0.42);
}

.toolPill.enhanceStartButton {
  color: #050505;
  background: var(--gold);
  border-color: var(--gold);
}

.toolPill.enhanceStartButton:disabled {
  opacity: 0.55;
  cursor: wait;
}

.compactRange {
  min-width: 160px;
  color: var(--muted);
  font-size: 11px;
}

.compactRange input {
  width: 74px;
}

.compactRange output {
  min-width: 22px;
  color: var(--gold);
  text-align: right;
}

.importDropZone {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: min(54vh, 460px);
  padding: 28px;
  color: var(--muted);
  text-align: center;
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed rgba(215, 194, 154, 0.38);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.inlinePromptComposer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px 9px 9px 14px;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
}

.inlineWorkflowChoice {
  display: flex;
  grid-column: 1 / -1;
  gap: 7px;
  align-items: center;
  padding-bottom: 1px;
}

.inlineWorkflowChoice button {
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.inlineWorkflowChoice button.active {
  color: var(--gold);
  background: rgba(215, 194, 154, 0.1);
  border-color: rgba(215, 194, 154, 0.45);
}

.inlinePromptComposer textarea {
  width: 100%;
  min-height: 38px;
  max-height: 110px;
  padding: 9px 0;
  resize: vertical;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 13px;
}

.inlinePromptComposer textarea::placeholder {
  color: var(--muted);
}

.inlinePromptComposer .inlineStartButton {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  height: 38px;
  padding: 0 14px;
  color: #050505;
  background: #f2f0eb;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.inlinePromptComposer .inlineStartButton:disabled {
  opacity: 0.55;
  cursor: wait;
}

.importDropZone:hover {
  background: rgba(215, 194, 154, 0.035);
  border-color: rgba(215, 194, 154, 0.62);
}

.importDropZone div {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.importDropZone strong {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 22px;
}

.importDropZone input {
  display: none;
}

.importDropZone.hasImage {
  gap: 12px;
}

.importDropZone.hasImage img {
  display: block;
  max-width: 100%;
  max-height: 42vh;
  object-fit: contain;
  filter: grayscale(1) brightness(0.82);
}

.inpaintingStage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: min(54vh, 460px);
  padding: 28px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed rgba(215, 194, 154, 0.38);
  border-radius: 12px;
}

.inpaintingStage img {
  display: block;
  width: 100%;
  max-height: 42vh;
  object-fit: contain;
  filter: grayscale(1) brightness(0.82);
}

.brushPreviewOnImage {
  position: absolute;
  top: 40px;
  right: 40px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  pointer-events: none;
}

.brushPreviewOnImage span {
  display: block;
  max-width: 58px;
  max-height: 58px;
  background: rgba(255, 59, 48, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
}

.inpaintingStage canvas,
.inpaintingMaskPreview {
  position: absolute;
  inset: 28px;
  width: calc(100% - 56px);
  height: calc(100% - 56px);
}

.inpaintingStage canvas {
  z-index: 2;
  cursor: crosshair;
  touch-action: none;
}

.inpaintingMaskPreview {
  z-index: 1;
  pointer-events: none;
}

.inpaintingMaskPreview polyline {
  fill: none;
  stroke: rgba(255, 59, 48, 0.72);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drawCanvasStage {
  display: grid;
  place-items: center;
  width: 100%;
  height: calc(100svh - 292px);
  min-height: 320px;
}

.plainOutputGrid {
  display: grid;
  gap: 12px;
  align-items: center;
  justify-content: center;
  width: min(100%, 1200px);
}

.plainOutputGrid.outputs-1 {
  grid-template-columns: minmax(0, min(92vw, 1040px));
}

.plainOutputGrid.outputs-2 {
  grid-template-columns: repeat(2, minmax(0, min(44vw, 560px)));
}

.plainOutputGrid.outputs-3,
.plainOutputGrid.outputs-4 {
  grid-template-columns: repeat(2, minmax(0, min(42vw, 520px)));
}

.plainOutput {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
}

.plainOutputImageButton {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: calc(100svh - 218px);
  overflow: hidden;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.plainOutputImageButton img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(0.82);
}

.plainOutputGrid.outputs-2 .plainOutputImageButton,
.plainOutputGrid.outputs-3 .plainOutputImageButton,
.plainOutputGrid.outputs-4 .plainOutputImageButton {
  height: min(44vh, 430px);
}

.outputActions {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.outputFavorite,
.outputSave,
.outputDownload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.58);
  border: 1px solid rgba(215, 194, 154, 0.28);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  text-decoration: none;
}

.outputFavorite:hover,
.outputSave:hover,
.outputDownload:hover {
  border-color: rgba(232, 210, 168, 0.56);
  background: rgba(20, 20, 20, 0.74);
}

.saveToast {
  position: fixed;
  left: 50%;
  bottom: 132px;
  z-index: 58;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  color: var(--gold);
  transform: translateX(-50%);
  background: rgba(15, 15, 15, 0.94);
  border: 1px solid rgba(215, 194, 154, 0.34);
  border-radius: 999px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

.generatedOutputGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  width: min(1040px, 100%);
  max-height: calc(100svh - 190px);
  place-items: center;
}

.generatedOutputGrid.outputs-1 {
  grid-template-columns: minmax(260px, min(70vw, 900px));
  justify-content: center;
}

.generatedOutputGrid.outputs-2 {
  grid-template-columns: repeat(2, minmax(240px, min(42vw, 520px)));
  justify-content: center;
}

.generatedOutputGrid.outputs-3,
.generatedOutputGrid.outputs-4 {
  grid-template-columns: repeat(2, minmax(220px, min(34vw, 420px)));
  justify-content: center;
}

.generatedOutputGrid .generationCard {
  width: 100%;
  max-height: calc(100svh - 196px);
}

.generatedOutputGrid .imageButton img {
  width: 100%;
  height: auto;
  max-height: calc(100svh - 266px);
  object-fit: contain;
}

.generatedOutputGrid.outputs-2 .imageButton img {
  max-height: 48vh;
}

.generatedOutputGrid.outputs-3 .imageButton img,
.generatedOutputGrid.outputs-4 .imageButton img {
  max-height: 20vh;
}

.loadingCard {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 9px;
  align-items: center;
  min-height: 76px;
  padding: 18px 24px;
  color: var(--gold);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(215, 194, 154, 0.26);
}

.spin {
  animation: spin 0.9s linear infinite;
}

.generationCard {
  overflow: hidden;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.imageButton,
.galleryImageButton,
.projectCover {
  display: block;
  width: 100%;
  padding: 0;
  background: #111;
  border: 0;
  cursor: pointer;
}

.imageButton {
  position: relative;
}

.imageButton img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(1) brightness(0.72);
}

.imageCaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  text-align: left;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.cardMeta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px 0;
  color: var(--muted);
  font-size: 11px;
}

.cardMeta div {
  display: grid;
  min-width: 0;
}

.cardMeta strong,
.cardMeta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cardActions {
  display: flex;
  gap: 6px;
  padding: 9px 10px 10px;
}

.cardActions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  cursor: pointer;
}

.promptComposer {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 45;
  width: min(78vw, 900px);
  min-height: 82px;
  padding: 11px;
  transform: translateX(-50%);
  background: rgba(31, 31, 31, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  box-shadow: 0 18px 62px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
}

.composerInput {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.composerInput.hasThumbnail {
  grid-template-columns: 74px minmax(0, 1fr);
}

.composerThumbnail {
  position: relative;
  overflow: hidden;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(215, 194, 154, 0.25);
  border-radius: 13px;
}

.composerThumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.82);
}

.imageInputStack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 3px;
  padding: 3px;
}

.imageInputStack img {
  min-width: 0;
  min-height: 0;
  border-radius: 8px;
}

.imageInputStack span {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.58);
  border-radius: 8px;
  font-size: 12px;
}

.composerThumbnail button {
  position: absolute;
  top: 5px;
  right: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #070707;
  background: rgba(242, 240, 235, 0.96);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.promptComposer textarea {
  display: block;
  width: 100%;
  min-height: 28px;
  resize: none;
  color: #f3f3f3;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 14px;
}

.promptComposer textarea::placeholder {
  color: #9b9b9b;
}

.composerControls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding-top: 7px;
}

.composerPrimaryControls {
  flex-wrap: nowrap;
}

.composerIconButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  color: var(--soft);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.composerIconButton:hover,
.composerIconButton.active,
.composerChip.active {
  color: var(--gold);
  background: rgba(215, 194, 154, 0.1);
}

.composerSettings {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.composerSelect {
  position: relative;
}

.composerPrimaryControls .workflowSelect {
  flex: 0 0 auto;
  width: max-content;
  min-width: 0;
  max-width: min(360px, calc(100vw - 220px));
}

.workflowSelect .composerChip {
  width: auto;
  max-width: none;
  justify-content: space-between;
}

.workflowSelect .composerChip span {
  white-space: nowrap;
}

.composerSelectMenu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 75;
  display: grid;
  min-width: 190px;
  overflow: hidden;
  padding: 5px;
  background: #151515;
  border: 1px solid rgba(215, 194, 154, 0.35);
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.7);
}

.composerSelectMenu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  color: var(--soft);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

.composerSelectMenu button:hover {
  color: var(--gold);
  background: rgba(255, 255, 255, 0.06);
}

.uploadWorkflowPanel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  z-index: 72;
  width: min(760px, 100%);
  padding: 14px;
  color: var(--soft);
  background: rgba(15, 15, 15, 0.98);
  border: 1px solid rgba(215, 194, 154, 0.32);
  border-radius: 10px;
  box-shadow: 0 22px 72px rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(20px);
}

.uploadPanelHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.uploadPanelHeader div {
  display: grid;
  gap: 2px;
}

.uploadPanelHeader span {
  color: var(--gold);
  font-size: 10px;
}

.uploadPanelHeader strong {
  color: var(--text);
  font-family: var(--serif);
  font-size: 18px;
}

.uploadPanelHeader button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
}

.uploadWorkflowGrid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 8px;
}

.uploadSourceGrid {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.uploadWorkflowGrid > button {
  display: grid;
  gap: 5px;
  justify-items: start;
  min-height: 118px;
  padding: 16px;
  color: var(--soft);
  text-align: left;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  cursor: pointer;
}

.uploadSourceGrid > button {
  display: grid;
  gap: 5px;
  justify-items: start;
  min-height: 128px;
  padding: 16px;
  color: var(--soft);
  text-align: left;
  background: rgba(255, 255, 255, 0.035);
  border: 1px dashed rgba(215, 194, 154, 0.36);
  border-radius: 7px;
  cursor: pointer;
}

.uploadWorkflowGrid > button:hover {
  color: var(--gold);
  border-color: rgba(215, 194, 154, 0.48);
}

.uploadSourceGrid > button:hover,
.uploadedImageThumb:hover,
.uploadedImageThumb.active {
  color: var(--gold);
  border-color: rgba(215, 194, 154, 0.58);
}

.uploadWorkflowGrid .uploadDropCard {
  border-style: dashed;
}

.uploadWorkflowGrid strong {
  color: var(--text);
}

.uploadSourceGrid strong {
  color: var(--text);
}

.uploadWorkflowGrid span,
.uploadReady span {
  color: var(--muted);
  font-size: 11px;
}

.uploadSourceGrid span {
  color: var(--muted);
  font-size: 11px;
}

.uploadedImageGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.uploadedImageThumb {
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  cursor: pointer;
}

.uploadedImageThumb img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 60px;
  object-fit: cover;
  filter: grayscale(1) brightness(0.76);
}

.uploadReady {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.uploadReadyThumbs {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.uploadReady img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 4px;
}

.uploadReadyThumbs img + img {
  margin-left: -16px;
  border: 1px solid rgba(15, 15, 15, 0.95);
}

.uploadReady button {
  margin-left: auto;
  min-height: 28px;
  padding: 5px 9px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  cursor: pointer;
}

.uploadReady button:hover {
  color: var(--gold);
  border-color: rgba(215, 194, 154, 0.45);
}

.settingRange,
.toolStripLabel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--soft);
}

.settingRange input {
  width: 88px;
}

.settingRange output {
  width: 24px;
  color: var(--gold);
}

.composerChip,
.drawerActions button,
.drawerEditTools button,
.toggleFilter,
.drawSwitch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 10px;
  color: #f4f0e7;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  cursor: pointer;
}

.composerChip {
  max-width: 170px;
  font-size: 12px;
}

.modelModeToggle {
  max-width: none;
}

.styleStrengthControl {
  position: relative;
  display: inline-grid;
  grid-template-columns: minmax(126px, auto) minmax(136px, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 5px 9px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.styleStrengthHeader {
  position: relative;
}

.styleSelectButton {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 24px;
  padding: 0;
  color: #f4f0e7;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.styleStrengthRange {
  display: grid;
  grid-template-columns: auto 78px 24px;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
}

.styleStrengthRange input {
  width: 78px;
}

.styleStrengthRange output {
  color: var(--gold);
  text-align: right;
}

.composerChip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projectChip {
  max-width: 170px;
}

.generateButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  color: #050505;
  background: #f2f0eb;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.composerMiniRange {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 11px;
}

.composerMiniRange input {
  width: 70px;
}

.composerMiniRange output {
  min-width: 22px;
  color: var(--gold);
  text-align: right;
}

.generateButton:disabled {
  opacity: 0.55;
  cursor: wait;
}

.controlPanel {
  position: fixed;
  left: 50%;
  bottom: 186px;
  z-index: 70;
  width: min(76vw, 820px);
  max-height: min(48vh, 520px);
  overflow: auto;
  padding: 16px;
  color: var(--soft);
  transform: translateX(-50%);
  background: rgba(14, 14, 14, 0.96);
  border: 1px solid rgba(215, 194, 154, 0.24);
  border-radius: 18px;
  box-shadow: 0 18px 62px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(18px);
  animation: panelIn 0.18s ease both;
}

.panelHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.panelHeader span {
  color: var(--gold);
  font-size: 10px;
  text-transform: uppercase;
}

.panelHeader h2,
.builderGroup h3,
.settingBlock h3,
.aspectGroup h3 {
  margin: 0;
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 600;
}

.panelHeader h2 {
  margin-top: 3px;
  font-size: 21px;
}

.panelHeader button,
.seedRow button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  cursor: pointer;
}

.settingsPanel,
.imagePanel,
.projectPanelWrap,
.savePanel {
  display: grid;
  gap: 14px;
}

.aspectPanel {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.aspectPreview {
  display: grid;
  place-items: center;
  min-height: 190px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

.aspectPreview div {
  display: grid;
  place-items: center;
  width: min(142px, 100%);
  max-height: 150px;
  color: var(--gold);
  border: 2px solid rgba(215, 194, 154, 0.72);
  border-radius: 10px;
  font-family: var(--serif);
  font-size: 20px;
}

.aspectControls,
.aspectGroup {
  display: grid;
  gap: 9px;
  align-content: start;
}

.aspectGroup {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.saveActions {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

.saveActions button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 13px;
  color: #050505;
  background: var(--gold);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.composerRange,
.workspaceRange {
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr) 34px;
  gap: 9px;
  align-items: center;
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
}

.workspaceRange {
  margin-top: 0;
  padding: 13px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px;
}

input[type='range'] {
  height: 18px;
  background: transparent;
  accent-color: var(--gold);
  appearance: none;
}

input[type='range']::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

input[type='range']::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  margin-top: -5.5px;
  background: var(--gold);
  border: 0;
  border-radius: 50%;
  appearance: none;
}

input[type='range']::-moz-range-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

input[type='range']::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: var(--gold);
  border: 0;
  border-radius: 50%;
}

.modeWorkspace {
  display: grid;
  grid-template-columns: minmax(260px, 0.68fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.modeInputPanel,
.modeOutputPanel {
  display: grid;
  gap: 12px;
  min-height: calc(100svh - 184px);
}

.modeInputPanel {
  align-content: start;
}

.modeOutputPanel {
  place-items: center;
}

.inlineUpload {
  display: grid;
  gap: 10px;
  min-height: 330px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px dashed rgba(215, 194, 154, 0.38);
}

.inlineUpload img {
  width: 100%;
  max-height: 55vh;
  object-fit: contain;
  filter: grayscale(1) brightness(0.82);
}

.inlineUpload > div {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 260px;
  color: var(--muted);
}

.inlineUpload label,
.inlineImageTools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
  padding: 7px 11px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
}

.inlineUpload input {
  display: none;
}

.inlineImageTools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.inlineImageTools button.active {
  color: var(--gold);
  border-color: rgba(215, 194, 154, 0.45);
}

.drawWorkspace {
  min-width: 0;
}

.compactPanel {
  max-width: 520px;
}

.settingBlock {
  padding: 13px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px;
}

.settingBlock h3,
.builderGroup h3 {
  margin-bottom: 8px;
  font-size: 16px;
}

.builderPanel > p {
  margin: 0 0 12px;
  color: var(--muted);
}

.builderGroup {
  display: grid;
  grid-template-columns: minmax(130px, 0.25fr) minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.builderGroup span,
.editTool span {
  color: var(--muted);
  font-size: 12px;
}

.builderChips,
.segmentedControl,
.ratioGrid,
.rangeLabel,
.editToolGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.miniChip,
.segmentedControl button,
.ratioButton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 10px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  cursor: pointer;
}

.segmentedControl button.active,
.ratioButton.active,
.editTool.active,
.projectOption.active,
.toggleFilter.active {
  color: var(--gold);
  background: rgba(215, 194, 154, 0.1);
  border-color: rgba(215, 194, 154, 0.45);
}

.ratioFrame {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.ratio-4-5,
.ratio-3-4 {
  width: 15px;
  height: 20px;
}

.ratio-16-9 {
  width: 24px;
  height: 14px;
}

.ratio-21-9 {
  width: 27px;
  height: 12px;
}

.ratio-9-16 {
  width: 12px;
  height: 24px;
}

.importBox {
  display: grid;
  gap: 11px;
  align-items: center;
  min-height: 170px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px dashed rgba(215, 194, 154, 0.42);
  border-radius: 13px;
}

.importBox > div {
  display: grid;
  place-items: center;
  gap: 7px;
  min-height: 104px;
  color: var(--muted);
  text-align: center;
}

.importBox img {
  width: 100%;
  max-height: 210px;
  object-fit: cover;
  filter: grayscale(1);
}

.uploadButton {
  justify-self: center;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 7px 13px;
  color: var(--gold);
  background: rgba(215, 194, 154, 0.08);
  border: 1px solid rgba(215, 194, 154, 0.34);
  border-radius: 999px;
  cursor: pointer;
}

.uploadButton input {
  display: none;
}

.editTool {
  display: grid;
  gap: 4px;
  min-width: 145px;
  min-height: 70px;
  padding: 11px;
  color: var(--soft);
  text-align: left;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
}

.rangeLabel {
  color: var(--muted);
}

.rangeLabel input {
  flex: 1;
  min-width: 160px;
}

.drawSwitch {
  justify-self: start;
}

.sketchPad {
  width: min(92vw, calc((100svh - 292px) * 1.78));
  max-width: 100%;
  max-height: 100%;
}

.sketchPad canvas {
  width: 100%;
  height: 100%;
  display: block;
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    rgba(0, 0, 0, 0.28);
  background-size: 26px 26px;
  border: 1px solid rgba(215, 194, 154, 0.28);
  border-radius: 12px;
  touch-action: none;
}

.projectPanel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  max-height: 260px;
  overflow: auto;
}

.projectOption {
  display: grid;
  gap: 4px;
  min-height: 70px;
  padding: 11px;
  color: var(--soft);
  text-align: left;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
}

.projectOption span {
  color: var(--muted);
  font-size: 12px;
}

.createProjectForm {
  display: flex;
  gap: 8px;
}

.newProjectButton {
  justify-self: start;
  min-height: 34px;
  padding: 7px 12px;
  color: var(--gold);
  background: rgba(215, 194, 154, 0.08);
  border: 1px solid rgba(215, 194, 154, 0.3);
  border-radius: 8px;
  cursor: pointer;
}

.createProjectForm input {
  flex: 1;
  min-height: 34px;
  padding: 0 11px;
  color: var(--soft);
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.createProjectForm button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--gold);
  background: rgba(215, 194, 154, 0.08);
  border: 1px solid rgba(215, 194, 154, 0.3);
  border-radius: 8px;
  cursor: pointer;
}

.galleryView {
  max-width: 1800px;
  margin: 0 auto;
}

.galleryLayout {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.galleryFilterPanel {
  position: sticky;
  top: 66px;
  display: grid;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.galleryFilterPanel h1,
.pageIntro h1,
.projectCardBody h2 {
  margin: 0;
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 600;
}

.galleryFilterPanel h1 {
  font-size: 22px;
}

.customSelect {
  position: relative;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.customSelect > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  width: 100%;
  padding: 0 8px;
  color: var(--soft);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  cursor: pointer;
}

.customSelect > button::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.gallerySortDirection {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.gallerySortDirection > button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  width: 100%;
  min-height: 32px;
  padding: 0 8px;
  color: var(--soft);
  text-align: left;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.09);
  cursor: pointer;
}

.gallerySortDirection > button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.customSelectMenu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 90;
  display: grid;
  gap: 3px;
  padding: 6px;
  background: rgba(20, 20, 20, 0.98);
  border: 1px solid rgba(215, 194, 154, 0.28);
  border-radius: 10px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
}

.customSelectMenu button {
  min-height: 29px;
  padding: 5px 7px;
  color: var(--muted);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.customSelectMenu button.active,
.customSelectMenu button:hover {
  color: var(--gold);
  background: rgba(215, 194, 154, 0.08);
}

.toggleFilter {
  min-height: 34px;
  width: 100%;
}

.galleryProjectList {
  display: grid;
  gap: 5px;
  max-height: 320px;
  overflow: auto;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.galleryProjectList button {
  min-height: 30px;
  padding: 6px 8px;
  color: var(--muted);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
}

.galleryProjectList .projectOrderButton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.galleryProjectList button.active {
  color: var(--gold);
  border-color: rgba(215, 194, 154, 0.35);
}

.galleryGrid {
  position: relative;
  width: 100%;
  min-height: 1px;
  transition: height 0.2s ease;
}

.galleryMasonryItem {
  position: absolute;
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px);
  transition:
    left 0.2s ease,
    top 0.2s ease,
    width 0.2s ease,
    height 0.2s ease,
    opacity 0.52s cubic-bezier(0.22, 0.7, 0.28, 1) var(--reveal-delay, 0ms),
    transform 0.52s cubic-bezier(0.22, 0.7, 0.28, 1) var(--reveal-delay, 0ms);
}

.galleryMasonryItem.isVisible {
  opacity: 1;
  transform: translateY(0);
}

.gallerySections {
  display: grid;
  gap: 30px;
  min-width: 0;
}

.gallerySection {
  display: grid;
  gap: 10px;
}

.gallerySectionHeader {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gallerySectionHeader::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(215, 194, 154, 0.24);
}

.gallerySectionHeader h2 {
  margin: 0;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.04em;
}

.galleryImageCard {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  margin: 0;
  min-width: 0;
  background: #0d0d0d;
}

.galleryMasonryItem .galleryImageCard,
.galleryMasonryItem .galleryImageButton {
  height: 100%;
}

.galleryImageButton img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.76);
  transition: filter 0.22s ease, transform 0.22s ease;
}

.galleryImageButton {
  position: relative;
  overflow: hidden;
}

.galleryImageHover {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 4px;
  padding: 28px 10px 10px;
  color: var(--text);
  text-align: left;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.galleryImageHover strong {
  overflow: hidden;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.galleryImageHover span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--soft);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.galleryImageCard:hover .galleryImageHover,
.galleryImageButton:focus-visible .galleryImageHover {
  opacity: 1;
  transform: translateY(0);
}

.galleryImageCard:hover img {
  filter: grayscale(0.85) brightness(0.88);
  transform: scale(1.02);
}

.galleryZoomControls {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 52;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px;
  color: var(--gold);
  transform: translateX(-50%);
  background: rgba(16, 16, 16, 0.92);
  border: 1px solid rgba(215, 194, 154, 0.28);
  border-radius: 999px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(16px);
}

.galleryZoomControls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--gold);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  cursor: pointer;
}

.galleryZoomControls button:disabled {
  opacity: 0.36;
  cursor: not-allowed;
}

.galleryZoomControls span {
  min-width: 18px;
  text-align: center;
}

.detailModal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
}

.modalBackdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.62);
  border: 0;
  cursor: default;
}

.detailModalContent {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  width: min(94vw, 1420px);
  height: min(88vh, 900px);
  max-width: calc(100vw - 24px);
  max-height: calc(100svh - 24px);
  overflow: hidden;
  padding: 18px;
  background: #080808;
  border: 1px solid rgba(215, 194, 154, 0.25);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.72);
  animation: modalIn 0.2s ease both;
}

.modalClose {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  cursor: pointer;
}

.modalImageStage {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #050505;
}

.modalImageStage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.modalInfoPanel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 8px 0 0;
}

.modalInfoHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding-right: 44px;
}

.modalInfoHeader > div:not(.modalHeaderActions) {
  display: grid;
  gap: 2px;
}

.modalInfoHeader strong {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.08;
}

.modalInfoHeader span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
}

.modalHeaderActions {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 7px;
  align-items: center;
  justify-self: start;
}

.modalHeaderActions button {
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  cursor: pointer;
}

.modalHeaderActions button:hover {
  color: var(--gold);
  border-color: rgba(215, 194, 154, 0.38);
}

.modalPrompt {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

.modalTags,
.modalEditTools {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.modalTags span {
  padding: 5px 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  font-size: 12px;
}

.modalEditTools button,
.copyPromptButton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
}

.modalPromptComposer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: end;
  margin-top: auto;
  padding: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.modalPromptComposer textarea {
  width: 100%;
  min-height: 58px;
  resize: none;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: 0;
}

.modalPromptComposer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #050505;
  background: var(--gold);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.modalEditTools button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.copyPromptButton {
  justify-content: center;
  margin-top: auto;
  width: 100%;
}

.pageIntro {
  max-width: 560px;
  padding: 26px 0 20px;
}

.pageIntro span {
  color: var(--gold);
  font-size: 10px;
  text-transform: uppercase;
}

.pageIntro h1 {
  margin-top: 6px;
  font-size: 34px;
}

.pageIntro p {
  margin: 9px 0 0;
  color: var(--muted);
}

.projectGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
}

.projectCard {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.projectCover {
  display: grid;
  place-items: center;
  color: var(--gold);
}

.projectCover img,
.emptyCover {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: grayscale(1) brightness(0.68);
}

.emptyCover {
  display: grid;
  place-items: center;
  background: rgba(215, 194, 154, 0.08);
}

.projectCardBody {
  padding: 14px;
}

.projectCardBody > span {
  color: var(--gold);
  font-size: 10px;
  text-transform: uppercase;
}

.projectCardBody h2 {
  margin-top: 6px;
  font-size: 22px;
}

.projectCardBody p {
  min-height: 42px;
  margin: 8px 0 13px;
  color: var(--muted);
}

.projectCardBody dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.projectCardBody dt {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.projectCardBody dd {
  margin: 0;
  color: var(--soft);
}

.projectCardBody button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  color: var(--gold);
  background: rgba(215, 194, 154, 0.08);
  border: 1px solid rgba(215, 194, 154, 0.25);
  border-radius: 999px;
  cursor: pointer;
}

.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 960px) {
  .mainSurface {
    padding: 12px 12px 130px;
  }

  .galleryLayout {
    grid-template-columns: 1fr;
  }

  .galleryFilterPanel {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .galleryFilterPanel h1,
  .galleryProjectList {
    grid-column: 1 / -1;
  }

  .modeWorkspace {
    grid-template-columns: 1fr;
  }

  .modeInputPanel,
  .modeOutputPanel {
    min-height: auto;
  }

  .promptComposer,
  .controlPanel {
    width: calc(100vw - 28px);
  }

  .detailModalContent {
    grid-template-columns: 1fr;
    height: 88vh;
  }

  .modalImageStage {
    min-height: 0;
  }

  .modalInfoPanel {
    max-height: 36vh;
  }
}

@media (max-width: 640px) {
  .topNav {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 9px;
  }

  .topLogo,
  .modeNav,
  .sectionNav {
    justify-self: center;
  }

  .navLink {
    font-size: 14px;
  }

  .modeInputStack {
    width: 100%;
  }

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

  .inlinePromptComposer button {
    min-width: 72px;
    padding: 0 10px;
  }

  .composerPrimaryControls {
    flex-wrap: wrap;
  }

  .composerPrimaryControls .workflowSelect {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    max-width: none;
  }

  .editToolCluster {
    width: 100%;
  }

  .editToolModes {
    flex-wrap: wrap;
    justify-content: center;
  }

  .inpaintBrushControls {
    justify-content: center;
  }

  .galleryFilterPanel {
    grid-template-columns: 1fr;
  }

  .promptComposer {
    bottom: 14px;
    padding: 14px;
  }

  .uploadWorkflowPanel {
    width: 100%;
    max-height: 62vh;
    overflow: auto;
  }

  .uploadWorkflowGrid {
    grid-template-columns: 1fr;
  }

  .uploadSourceGrid {
    grid-template-columns: 1fr;
  }

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

  .uploadWorkflowGrid > button {
    min-height: 88px;
  }

  .uploadSourceGrid > button {
    min-height: 88px;
  }

  .composerSettings {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .styleStrengthControl {
    grid-template-columns: 1fr;
    min-width: 250px;
    border-radius: 14px;
  }

  .generateButton {
    margin-left: 0;
  }

  .controlPanel {
    bottom: 190px;
  }

  .aspectPanel {
    grid-template-columns: 1fr;
  }

  .plainOutputGrid.outputs-2,
  .plainOutputGrid.outputs-3,
  .plainOutputGrid.outputs-4 {
    grid-template-columns: 1fr;
  }
}

/* --- v5 gallery logic, fitted workspaces, and entrance motion --- */
.appShell {
  animation: surfaceFadeIn 0.48s ease-out both;
}

.appShell:has(.generateView) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100svh;
  min-height: 0;
  overflow: hidden;
}

.appShell:has(.generateView) .mainSurface {
  height: 100%;
  min-height: 0;
  padding-top: 4px;
  padding-bottom: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

.appShell:has(.generateView) .generateView {
  height: 100%;
  min-height: 0;
}

.generateMode-prompt .generationStage,
.generateMode-image .generationStage {
  height: 100%;
}

.generateMode-import,
.generateMode-enhance {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.generateMode-import .generationStage,
.generateMode-enhance .generationStage {
  height: auto;
  min-height: 0;
}

.galleryLayout {
  grid-template-columns: 214px minmax(0, 1fr);
  gap: 20px;
}

.galleryFilterPanel {
  gap: 0;
  max-height: calc(100svh - 84px);
  padding: 18px 16px 14px;
  overflow-y: auto;
  background: rgba(10, 10, 10, 0.92);
  border-color: rgba(215, 194, 154, 0.18);
}

.galleryFilterHeader {
  display: grid;
  gap: 5px;
  padding-bottom: 19px;
}

.galleryFilterHeader > span,
.galleryFilterLabel,
.galleryProjectListHeader > span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.galleryFilterPanel .galleryFilterHeader h1 {
  margin: 0;
  font-size: 31px;
  line-height: 1;
}

.galleryFilterSection {
  display: grid;
  gap: 9px;
  padding: 15px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.galleryFilterSectionHeader,
.galleryProjectListHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.galleryFilterSectionHeader > span:last-child {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 9px;
}

.galleryGroupTabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 3px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.galleryGroupTabs button {
  min-width: 0;
  min-height: 29px;
  padding: 4px 3px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 1px;
  font-family: var(--mono);
  font-size: 9px;
  cursor: pointer;
}

.galleryGroupTabs button.active {
  color: #090909;
  background: var(--gold);
}

.galleryOrderButton {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  color: var(--soft);
  text-align: left;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 10px;
  cursor: pointer;
}

.galleryOrderButton:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.galleryFilterFields {
  gap: 11px;
}

.galleryFilterFields .customSelect {
  gap: 6px;
}

.galleryFilterPanel > .toggleFilter {
  min-height: 36px;
  margin: 3px 0 15px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 10px;
}

.galleryProjectList {
  gap: 2px;
  max-height: none;
  padding-top: 15px;
}

.galleryProjectListHeader {
  min-height: 30px;
  margin-bottom: 4px;
}

.galleryProjectList .galleryProjectListHeader .projectOrderButton {
  width: auto;
  min-height: 25px;
  gap: 5px;
  padding: 3px 5px;
  color: var(--gold);
  background: transparent;
  border: 0;
  font-size: 9px;
}

.galleryProjectList > button:not(.projectOrderButton) {
  min-height: 27px;
  padding: 5px 6px;
  font-size: 10px;
}

.plainOutput,
.modalImageStage img {
  opacity: 0;
  animation: imageRiseIn 0.52s cubic-bezier(0.22, 0.7, 0.28, 1) both;
}

@keyframes surfaceFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes imageRiseIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 960px) {
  .galleryLayout {
    grid-template-columns: 1fr;
  }

  .galleryFilterPanel {
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 640px) {
  .galleryFilterPanel {
    grid-template-columns: 1fr;
  }

}

@media (prefers-reduced-motion: reduce) {
  .appShell,
  .plainOutput,
  .galleryMasonryItem,
  .modalImageStage img {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* --- v8.3 prompt thumbnail divider alignment --- */
.appShell:has(.generateView) .mainSurface,
.appShell:has(.generateView) .generateView {
  overflow-x: hidden;
}

.promptComposer .composerInput.hasThumbnail {
  column-gap: 18px;
}

.promptComposer--prompt .promptFields,
.promptComposer--image .promptFields,
.inlinePromptComposer.editPromptBar .promptFields,
.promptComposer .composerThumbColumn,
.promptComposer .composerInput.singleThumbnail .composerThumbColumn {
  grid-template-rows: minmax(0, 1fr) 12px minmax(0, 1fr);
}

.promptComposer--prompt .promptFieldDivider,
.promptComposer--image .promptFieldDivider,
.inlinePromptComposer.editPromptBar .promptFieldDivider {
  height: 12px;
}

.promptComposer .composerThumbColumn,
.promptComposer .composerInput.singleThumbnail .composerThumbColumn {
  position: relative;
  height: 100%;
}

.composerThumbDivider {
  grid-row: 2;
  align-self: center;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
}

.promptComposer .composerThumbColumn .slot-input,
.promptComposer .composerInput.singleThumbnail .composerThumbColumn .slot-input,
.promptComposer .composerInput.singleThumbnail .composerThumbColumn .slot-reference {
  grid-row: 1;
}

.promptComposer .composerThumbColumn .slot-reference {
  grid-row: 3;
}

.galleryFilterPanel .galleryFilterHeader h1,
.galleryFilterPanel.collapsed .galleryFilterHeader h1,
.galleryFilterPanel.expanded .galleryFilterHeader h1 {
  font-size: 18px;
  line-height: 1;
}

.galleryFilterPanel .galleryFilterHeader > div > span,
.galleryFilterPanel.collapsed .galleryFilterHeader > div > span,
.galleryFilterPanel.expanded .galleryFilterHeader > div > span {
  font-size: 8px;
  line-height: 1;
}

/* --- v5: Text/Image to Image + Edit Image UI --- */

/* Positive / Negative prompt fields */
.promptFields {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.promptFieldDivider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 1px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.promptFieldDivider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
}

.promptComposer textarea.negativePrompt {
  min-height: 24px;
  color: #d8d3c8;
  font-size: 13px;
}

/* Thumbnail column beside prompt (input + reference slots) */
.composerThumbColumn {
  display: grid;
  gap: 6px;
  align-content: start;
}

.slotThumbnail {
  position: relative;
}

.slotThumbnailTag {
  position: absolute;
  left: 4px;
  top: 4px;
  z-index: 2;
  padding: 1px 6px;
  color: #0b0b0b;
  background: var(--gold);
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.slotThumbnail.slot-input .slotThumbnailTag {
  background: #e9d9b4;
}

.slotThumbnail.slot-reference .slotThumbnailTag {
  color: #f4f0e7;
  background: rgba(30, 30, 30, 0.9);
  border: 1px solid rgba(215, 194, 154, 0.5);
}

/* Dual input/reference slot cards (Image to Image upload panel) */
.imageSlotRow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.imageSlotCard {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.imageSlotCard.active {
  border-color: rgba(215, 194, 154, 0.62);
  background: rgba(215, 194, 154, 0.07);
}

.imageSlotSelect {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  width: 100%;
  padding: 11px;
  color: var(--soft);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.imageSlotIcon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--gold);
  background: rgba(215, 194, 154, 0.1);
  border-radius: 7px;
}

.imageSlotSelect > img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 7px;
  filter: grayscale(1) brightness(0.82);
}

.imageSlotText {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.imageSlotText strong {
  color: var(--text);
  font-size: 13px;
}

.imageSlotText span {
  color: var(--muted);
  font-size: 11px;
}

.imageSlotClear {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #0b0b0b;
  background: rgba(242, 240, 235, 0.95);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

/* Multi-LoRA style control — compact chip + popover */
.styleControl {
  position: relative;
}

.stylePopover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 78;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 40px));
  padding: 13px;
  background: #151515;
  border: 1px solid rgba(215, 194, 154, 0.35);
  border-radius: 10px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.72);
}

.stylePopoverTitle {
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.styleOptionRow {
  display: grid;
  grid-template-columns: minmax(108px, auto) minmax(96px, 1fr) 34px;
  gap: 11px;
  align-items: center;
}

.styleToggle {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  min-height: 30px;
  padding: 3px 4px;
  color: var(--soft);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.styleToggle:hover:not(:disabled) {
  color: var(--gold);
}

.styleToggle:disabled {
  cursor: default;
}

.styleCheck {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 18px;
  height: 18px;
  color: #0b0b0b;
  background: transparent;
  border: 1px solid rgba(215, 194, 154, 0.5);
  border-radius: 5px;
}

.styleOptionRow.active .styleToggle {
  color: var(--text);
}

.styleOptionRow.active .styleCheck {
  background: var(--gold);
  border-color: var(--gold);
}

.styleOptionRow input[type='range'] {
  width: 100%;
  min-width: 0;
}

.styleOptionRow input[type='range']:disabled {
  opacity: 0.4;
}

.styleOptionRow output {
  color: var(--gold);
  text-align: right;
  font-size: 12px;
}

.styleOptionRow:not(.active) output {
  color: var(--muted);
}

/* Control Strength slider chip (Image to Image · Sketch to Render) */
.controlStrengthChip {
  gap: 8px;
  max-width: none;
  cursor: default;
}

.controlStrengthChip input {
  width: 96px;
}

.controlStrengthChip output {
  min-width: 34px;
  color: var(--gold);
  text-align: right;
}

/* Edit Image inline composer (positive/negative + style + enhance) */
.inlinePromptComposer.editComposer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  padding: 12px 14px;
}

.inlinePromptFields {
  display: grid;
  gap: 4px;
}

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

.inlineStartButton {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  min-height: 34px;
  margin-left: auto;
  padding: 0 14px;
  color: #050505;
  background: #f2f0eb;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.inlineStartButton:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* Edit Image — dual upload / library source */
.importSourceStack {
  display: grid;
  gap: 12px;
  width: 100%;
}

.importSourceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.importSourceCard {
  display: grid;
  gap: 8px;
  place-content: center;
  justify-items: center;
  min-height: min(38vh, 320px);
  padding: 28px;
  color: var(--muted);
  text-align: center;
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed rgba(215, 194, 154, 0.38);
  border-radius: 12px;
  cursor: pointer;
}

.importSourceCard:hover,
.importSourceCard.active {
  color: var(--gold);
  background: rgba(215, 194, 154, 0.04);
  border-color: rgba(215, 194, 154, 0.62);
}

.importSourceCard strong {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 18px;
}

.importSourceCard span {
  color: var(--muted);
  font-size: 12px;
}

.importSourceCard input {
  display: none;
}

.importLibraryPanel {
  padding: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(215, 194, 154, 0.25);
  border-radius: 12px;
}

.importLibraryEmpty {
  margin: 0;
  padding: 18px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.importLibraryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

.importLibraryThumb {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  padding: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
}

.importLibraryThumb:hover {
  border-color: rgba(215, 194, 154, 0.6);
}

.importLibraryThumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.8);
}

/* New aspect-ratio frames */
.ratio-3-2 {
  width: 24px;
  height: 16px;
}

.ratio-4-3 {
  width: 22px;
  height: 16px;
}

.ratio-2-3 {
  width: 14px;
  height: 21px;
}

@media (max-width: 720px) {
  .importSourceGrid,
  .imageSlotRow {
    grid-template-columns: 1fr;
  }

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

  .styleStrengthRange {
    grid-column: 1 / -1;
  }
}

/* Requested typography, gallery placement, and home-preview refinements. */
.gallerySections {
  padding-top: 62px;
}

.galleryCarouselHover {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: grid;
  gap: 4px;
  padding: 36px 12px 11px;
  color: #f4efe4;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.88));
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.galleryCarouselHover strong {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
}

.galleryCarouselHover span {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(244, 239, 228, 0.78);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.galleryCarouselItem:hover .galleryCarouselHover,
.galleryCarouselItem:focus-visible .galleryCarouselHover {
  opacity: 1;
  transform: translateY(0);
}

.typographyControls {
  position: fixed;
  top: 68px;
  right: 18px;
  z-index: 200;
  display: grid;
  gap: 16px;
  width: min(380px, calc(100vw - 36px));
  max-height: calc(100svh - 86px);
  overflow-y: auto;
  padding: 18px;
  color: var(--text);
  background: rgba(13, 13, 13, 0.97);
  border: 1px solid rgba(215, 194, 154, 0.38);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(18px);
}

.typographyControlsHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.typographyControlsHeader > div {
  display: grid;
  gap: 3px;
}

.typographyControlsHeader span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.typographyControlsHeader h2 {
  margin: 0;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
}

.typographyControlsHeader button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--soft);
  background: transparent;
  border: 1px solid rgba(215, 194, 154, 0.24);
  border-radius: 50%;
  cursor: pointer;
}

.typographyPresets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.typographyPresets button {
  min-height: 34px;
  padding: 6px 8px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(215, 194, 154, 0.18);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: capitalize;
  cursor: pointer;
}

.typographyPresets button.active {
  color: #080808;
  background: var(--gold);
  border-color: var(--gold);
}

.typographyFamilyChoice {
  display: grid;
  gap: 7px;
}

.typographyFamilyChoice > span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.typographyFamilyChoice > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.typographyFamilyChoice button {
  min-height: 34px;
  padding: 6px 8px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(215, 194, 154, 0.18);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
}

.typographyFamilyChoice button.active {
  color: #080808;
  background: var(--gold);
  border-color: var(--gold);
}

.typographyFontControls {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(215, 194, 154, 0.16);
}

.typographyFontControls h3 {
  margin: 0 0 2px;
  color: var(--gold);
  font-size: 16px;
  font-weight: 400;
}

.typographyFontControls.bembo h3 {
  font-family: var(--serif);
}

.typographyFontControls.geist h3 {
  font-family: var(--mono);
  font-size: 11px;
}

.elementDesignControls {
  display: grid;
  gap: 13px;
  padding-top: 16px;
  border-top: 1px solid rgba(215, 194, 154, 0.2);
}

.elementDesignControls > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.elementDesignControls > header > div {
  display: grid;
  gap: 3px;
}

.elementDesignControls > header span,
.elementTargetSelect > span,
.elementCaseControl > span,
.elementColorControl span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.elementDesignControls h3 {
  margin: 0;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
}

.elementDesignControls > header button,
.elementColorControl > button {
  min-height: 28px;
  padding: 5px 8px;
  color: var(--soft);
  background: transparent;
  border: 1px solid rgba(215, 194, 154, 0.2);
  font-family: var(--mono);
  font-size: 8px;
  cursor: pointer;
}

.elementDesignControls > header button:disabled {
  opacity: 0.38;
  cursor: default;
}

.elementTargetSelect,
.elementCaseControl {
  display: grid;
  gap: 6px;
}

.elementTargetSelect select,
.elementCaseControl select {
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  overflow: hidden;
  color: var(--text);
  background: #111;
  border: 1px solid rgba(215, 194, 154, 0.25);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 9px;
  text-overflow: ellipsis;
}

.elementColorControl {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.elementColorControl label {
  display: grid;
  gap: 6px;
}

.elementColorControl input[type='color'] {
  width: 58px;
  height: 34px;
  padding: 3px;
  background: #111;
  border: 1px solid rgba(215, 194, 154, 0.25);
  cursor: pointer;
}

.typographySlider {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 12px;
  align-items: center;
  color: var(--soft);
  font-family: var(--mono);
  font-size: 9px;
}

.typographySlider output {
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.typographySlider input {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  accent-color: var(--gold);
}

.typographySaveButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  color: #080808;
  background: var(--gold);
  border: 1px solid var(--gold);
  font-family: var(--mono);
  font-size: 10px;
  cursor: pointer;
}

.typographySaveButton.saved {
  color: var(--gold);
  background: rgba(215, 194, 154, 0.08);
}

@media (max-width: 720px) {
  .gallerySections {
    padding-top: 60px;
  }

  .typographyControls {
    top: 18px;
    right: 9px;
    width: calc(100vw - 18px);
    max-height: calc(100svh - 36px);
  }
}

/* Final v8.4 consistency pass. */
html {
  scrollbar-gutter: stable both-edges;
}

html:has(.generateMode-import),
body:has(.generateMode-import),
#root:has(.generateMode-import) {
  width: 100%;
  height: 100svh;
  min-height: 0;
  max-height: 100svh;
  overflow: hidden !important;
  overscroll-behavior: none;
}

.composerThumbDivider {
  display: none;
}

.appShell:has(.generateMode-import) .mainSurface {
  overflow-y: hidden;
}

/* In import mode the view is sized to fit; the earlier `overflow-x: hidden`
   forces overflow-y to compute as `auto`, which showed a stray gold scrollbar
   for a few px of overflow. Pin overflow-y to hidden to remove it. */
.appShell:has(.generateMode-import) .generateView {
  overflow-y: hidden;
}

.appShell .generateMode-import .modeToolStrip.modeToolStrip {
  border: 0;
  box-shadow: none;
}

.appShell {
  --prompt-frame-width: min(90vw, 1400px);
}

.appShell .promptComposer--prompt,
.appShell .promptComposer--image,
.appShell .inlinePromptComposer.editPromptBar {
  width: var(--prompt-frame-width);
  height: 30svh;
  min-height: 30svh;
  max-height: none;
  box-sizing: border-box;
}

.inlinePromptComposer.editPromptBar {
  width: min(78vw, 900px);
  height: 30svh;
  min-height: 30svh;
  max-height: none;
  padding: 11px;
  overflow: hidden;
  box-sizing: border-box;
}

.generateMode-import .brushSliderControl.brushSliderControl,
.generateMode-import .upscaleFactorChoice.upscaleFactorChoice {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  box-shadow: none;
}

.generateMode-import .brushSliderControl.brushSliderControl:focus-within,
.generateMode-import .upscaleFactorChoice.upscaleFactorChoice:focus-within,
.compactRange:focus-within {
  border-color: rgba(215, 194, 154, 0.42);
}

@media (max-width: 720px) {
  .appShell {
    --prompt-frame-width: min(94vw, 1400px);
  }

  .inlinePromptComposer.editPromptBar {
    width: var(--prompt-frame-width);
    height: 34svh;
    min-height: 34svh;
  }
}

/* --- v8.2 aligned prompt media, continuous brush, smooth filter reveal --- */
.promptComposer--prompt,
.promptComposer--image,
.inlinePromptComposer.editPromptBar {
  height: 30svh;
  min-height: 30svh;
}

.promptComposer--prompt .promptFields,
.promptComposer--image .promptFields,
.inlinePromptComposer.editPromptBar .promptFields {
  grid-template-rows: minmax(0, 1fr) 18px minmax(0, 1fr);
  height: 100%;
  gap: 0;
}

.promptComposer--prompt .promptFieldDivider,
.promptComposer--image .promptFieldDivider,
.inlinePromptComposer.editPromptBar .promptFieldDivider {
  height: 18px;
  margin: 0;
}

.promptComposer--prompt textarea,
.promptComposer--image textarea,
.inlinePromptComposer.editPromptBar textarea {
  min-height: 0;
}

.promptComposer .composerInput.hasThumbnail {
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: stretch;
}

.promptComposer .composerThumbColumn,
.promptComposer .composerInput.singleThumbnail .composerThumbColumn {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 18px minmax(0, 1fr);
  gap: 0;
  width: 74px;
  min-height: 0;
  align-content: stretch;
}

.promptComposer .composerThumbnail,
.promptComposer .composerInput.singleThumbnail .composerThumbnail {
  width: 74px;
  height: 100%;
  min-height: 0;
  border-radius: 3px;
}

.promptComposer .composerThumbColumn .slot-input {
  grid-row: 1;
}

.promptComposer .composerThumbColumn .slot-reference {
  grid-row: 3;
}

.promptComposer .composerInput.singleThumbnail .composerThumbColumn .slot-reference,
.promptComposer .composerInput.singleThumbnail .composerThumbColumn .slot-input {
  grid-row: 1;
}

.promptComposer .composerThumbnail img,
.promptComposer .composerInput.singleThumbnail .composerThumbnail img {
  object-fit: cover;
}

.brushSliderControl {
  display: grid;
  grid-template-columns: 34px auto minmax(190px, 300px) 48px;
  gap: 9px;
  align-items: center;
  min-height: 44px;
  padding: 5px 8px 5px 6px;
  color: var(--soft);
  background: rgba(215, 194, 154, 0.045);
  border: 1px solid rgba(215, 194, 154, 0.2);
  border-radius: 999px;
}

.brushSliderIndicator {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(215, 194, 154, 0.22);
  border-radius: 50%;
}

.brushSliderIndicator::after {
  content: '';
  /* Pseudo-elements aren't covered by the global `* { box-sizing }` reset, so
     without this the 1px border pushed the disc's box to 32px and it sat 1px
     off-centre inside the 32px ring. border-box keeps it a true 30px, centred. */
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  background: rgba(215, 194, 154, 0.78);
  border: 1px solid rgba(240, 226, 198, 0.72);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(215, 194, 154, 0.16);
  /* Scale a fixed-size disc instead of animating width/height: uniform scale can
     never distort the circle and renders sub-pixel-smooth on the compositor.
     No transition — a transition on a property whose value comes from a CSS var
     (here the scale) lags a full step behind the slider; without it the disc
     tracks the value exactly on every input, which is what reads as smooth. */
  transform: scale(var(--brush-indicator-scale, 0.2));
  transform-origin: center;
  will-change: transform;
}

.brushSliderCopy {
  display: grid;
  min-width: 68px;
  line-height: 1.15;
}

.brushSliderCopy strong {
  font-size: 10px;
  font-weight: 400;
}

.brushSliderCopy small,
.brushSliderTrack small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
}

.brushSliderTrack {
  display: grid;
  grid-template-columns: 18px minmax(120px, 1fr) 24px;
  gap: 6px;
  align-items: center;
}

.brushSliderTrack input {
  width: 100%;
  height: 18px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.brushSliderTrack input::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--gold) 0 var(--brush-progress),
    rgba(255, 255, 255, 0.13) var(--brush-progress) 100%
  );
  border-radius: 999px;
}

.brushSliderTrack input::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  margin-top: -6px;
  appearance: none;
  background: var(--gold);
  border: 3px solid #171717;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(215, 194, 154, 0.55), 0 3px 10px rgba(0, 0, 0, 0.5);
}

.brushSliderTrack input::-moz-range-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.13);
  border-radius: 999px;
}

.brushSliderTrack input::-moz-range-progress {
  height: 3px;
  background: var(--gold);
  border-radius: 999px;
}

.brushSliderTrack input::-moz-range-thumb {
  width: 11px;
  height: 11px;
  background: var(--gold);
  border: 3px solid #171717;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(215, 194, 154, 0.55);
}

.brushSliderControl output {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 11px;
  text-align: right;
}

.brushSliderControl output small {
  margin-left: 2px;
  color: var(--muted);
  font-size: 8px;
}

.galleryFilterPanel.collapsed,
.galleryFilterPanel.expanded {
  max-height: none;
  padding: 10px 12px;
  overflow: hidden;
  transition: box-shadow 0.28s ease, border-color 0.28s ease;
}

.galleryFilterPanel.collapsed > .galleryFilterBody,
.galleryFilterPanel.expanded > .galleryFilterBody {
  display: block;
}

.galleryFilterPanel .galleryFilterHeader,
.galleryFilterPanel.collapsed .galleryFilterHeader {
  align-items: center;
  min-height: 30px;
  padding: 0;
}

.galleryFilterPanel .galleryFilterHeader > div,
.galleryFilterPanel.collapsed .galleryFilterHeader > div {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 7px;
}

.galleryFilterPanel .galleryFilterHeader h1,
.galleryFilterPanel.collapsed .galleryFilterHeader h1 {
  font-size: 18px;
}

.galleryFilterBody {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  pointer-events: none;
  transition:
    max-height 0.38s cubic-bezier(0.22, 0.7, 0.28, 1),
    opacity 0.2s ease,
    transform 0.3s cubic-bezier(0.22, 0.7, 0.28, 1),
    visibility 0s linear 0.38s;
}

.galleryFilterPanel.expanded .galleryFilterBody {
  max-height: calc(100svh - 138px);
  overflow-y: auto;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    max-height 0.42s cubic-bezier(0.22, 0.7, 0.28, 1),
    opacity 0.24s ease 0.06s,
    transform 0.34s cubic-bezier(0.22, 0.7, 0.28, 1),
    visibility 0s;
}

/* Keep enlarged button labels intact and optically center the Gallery heading. */
.composerChip {
  min-width: max-content;
  max-width: none;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.galleryFilterPanel.collapsed .galleryFilterHeader h1 {
  transform: translateY(0.08em);
}

.appShell .editPromptBar .styleControl > .composerChip {
  width: max-content;
  max-width: none;
}

.appShell .editPromptBar .styleControl > .composerChip span {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.galleryFilterBody > .galleryFilterSection:first-child {
  margin-top: 12px;
}

.galleryFilterToggle svg {
  transition: transform 0.3s cubic-bezier(0.22, 0.7, 0.28, 1);
}

.galleryFilterToggle.expanded svg {
  transform: rotate(180deg);
}

.brushPreviewOnImage span {
  transition: width 0.06s linear, height 0.06s linear;
}

@media (max-width: 720px) {
  .promptComposer--prompt,
  .promptComposer--image,
  .inlinePromptComposer.editPromptBar {
    height: 34svh;
    min-height: 34svh;
  }

  .brushSliderControl {
    grid-template-columns: 32px auto minmax(145px, 1fr) 44px;
    max-width: 96vw;
  }

  .brushSliderCopy small,
  .brushSliderTrack > small {
    display: none;
  }

  .brushSliderTrack {
    grid-template-columns: minmax(120px, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .galleryFilterBody,
  .galleryFilterPanel.expanded .galleryFilterBody {
    transition: none;
  }
}

/* --- v5 refinement: restrained archival interface --- */
.modeToolStrip {
  width: fit-content;
  max-width: calc(100vw - 36px);
  border-radius: 4px;
}

.toolPill,
.compactRange,
.toggleFilter,
.composerChip,
.styleStrengthControl,
.inlineWorkflowChoice button {
  border-radius: 3px;
}

.toolPill,
.compactRange,
.toolStripLabel,
.customSelect,
.galleryProjectList,
.promptFieldDivider,
.composerChip,
.styleStrengthControl,
.importSourceCard span,
.cardMeta,
.galleryZoomControls {
  font-family: var(--mono);
}

.toolPill,
.toolStripLabel,
.galleryProjectList button {
  font-size: 11px;
}

.promptComposer {
  border-radius: 4px;
}

.galleryFilterPanel,
.customSelect > button,
.customSelectMenu,
.customSelectMenu button,
.galleryProjectList button,
.importDropZone,
.inpaintingStage,
.importSourceCard,
.importLibraryPanel,
.importLibraryThumb {
  border-radius: 3px;
}

.galleryFilterPanel {
  gap: 13px;
  padding: 15px 13px;
}

.galleryFilterPanel h1 {
  margin-bottom: 3px;
  font-size: 25px;
  font-weight: 400;
}

.customSelect {
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gallerySortDirection {
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gallerySortDirection > button {
  min-height: 34px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.customSelect > button {
  min-height: 34px;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.galleryProjectList {
  gap: 4px;
  padding-top: 10px;
}

.galleryProjectList button {
  padding-inline: 9px;
}

.galleryZoomControls {
  border-radius: 3px;
}

.galleryZoomControls button,
.modalClose {
  border-radius: 3px;
}

.topLogo,
.pageIntro h1,
.projectCardBody h2,
.imageCaption,
.importDropZone strong,
.importSourceCard strong {
  font-weight: 400;
}

.importSourceCard {
  min-height: min(36vh, 290px);
  padding: 34px;
}

.importSourceCard strong {
  font-size: 20px;
}

.importSourceCard span {
  font-size: 10px;
  letter-spacing: 0.01em;
}

@media (max-width: 640px) {
  .modeToolStrip {
    width: 100%;
  }
}

/* --- v5 workspace and surface consistency --- */
.generateMode-prompt .generationStage,
.generateMode-image .generationStage {
  height: calc(100svh - 74px);
  min-height: 0;
  padding: 10px 0 230px;
}

.plainOutputGrid {
  width: auto;
  height: calc(100svh - 330px);
  max-width: min(92vw, 1280px);
  max-height: calc(100svh - 330px);
  gap: 8px;
  aspect-ratio: var(--grid-aspect);
}

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

.plainOutputGrid.outputs-2,
.plainOutputGrid.outputs-3,
.plainOutputGrid.outputs-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.plainOutputGrid.outputs-3,
.plainOutputGrid.outputs-4 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.plainOutput {
  height: 100%;
  overflow: hidden;
  aspect-ratio: var(--output-aspect);
}

.plainOutputImageButton,
.plainOutputGrid.outputs-2 .plainOutputImageButton,
.plainOutputGrid.outputs-3 .plainOutputImageButton,
.plainOutputGrid.outputs-4 .plainOutputImageButton {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--output-aspect);
}

.plainOutputImageButton img {
  object-fit: cover;
  transition: filter 0.22s ease, transform 0.22s ease;
}

.plainOutput:hover .plainOutputImageButton img,
.plainOutput:focus-within .plainOutputImageButton img {
  filter: grayscale(0.85) brightness(0.88);
  transform: scale(1.02);
}

.outputActions {
  top: 9px;
  right: 9px;
  gap: 5px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.plainOutput:hover .outputActions,
.plainOutput:focus-within .outputActions {
  opacity: 1;
  transform: translateY(0);
}

.outputFavorite,
.outputSave,
.outputDownload {
  width: 31px;
  height: 31px;
  border-radius: 3px;
}

.loadingCard {
  display: grid;
  grid-auto-flow: row;
  place-content: center;
  justify-items: center;
  width: min(56vw, 520px);
  min-height: 0;
  max-height: calc(100svh - 340px);
  font-family: var(--mono);
  font-size: 10px;
}

.detailModalContent {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
  gap: 28px;
  width: min(98vw, 1700px);
  height: min(94svh, 1050px);
  max-width: calc(100vw - 16px);
  max-height: calc(100svh - 16px);
  padding: 20px;
}

.modalInfoPanel {
  gap: 24px;
  align-self: stretch;
  max-height: none;
  padding: 0;
}

.modalInfoHeader {
  gap: 14px;
}

.modalPrompt {
  max-width: 31ch;
  font-size: 14px;
  line-height: 1.65;
}

.modalTags {
  gap: 7px 12px;
}

.modalTags span {
  padding: 3px 0;
  color: var(--muted);
  background: transparent;
  border-bottom: 1px solid rgba(215, 194, 154, 0.2);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 9px;
}

.modalEditTools {
  gap: 7px;
  padding-top: 4px;
}

.modalEditTools button {
  min-height: 32px;
  padding: 6px 9px;
  background: transparent;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10px;
}

.controlPanel {
  padding: 20px;
  border-radius: 3px;
}

.controlPanel:has(.savePanel) {
  width: min(82vw, 980px);
  max-height: min(64vh, 620px);
  z-index: 95;
}

.panelHeader .panelEyebrow,
.uploadPanelHeader .panelEyebrow {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.panelHeader .panelTitle,
.uploadPanelHeader .panelTitle {
  margin: 4px 0 0;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.05;
}

.panelHeader {
  margin-bottom: 20px;
}

.panelHeader span,
.projectOption span {
  font-family: var(--mono);
}

.panelHeader h2 {
  font-size: 28px;
  font-weight: 400;
}

.projectPanel {
  gap: 10px;
}

.projectOptionWrap {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 84px;
}

.projectOption {
  width: 100%;
  height: auto;
  min-height: 84px;
  padding: 14px 46px 14px 14px;
  align-content: start;
  align-items: start;
  background: rgba(255, 255, 255, 0.025);
  border-radius: 3px;
  white-space: normal;
}

.projectOption strong {
  display: block;
  min-width: 0;
  max-width: 100%;
  color: var(--text);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.projectDeleteButton {
  position: absolute;
  top: 9px;
  right: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
}

.projectDeleteButton:hover {
  color: var(--gold);
  background: rgba(215, 194, 154, 0.08);
  border-color: rgba(215, 194, 154, 0.3);
}

.saveActions button {
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10px;
}

button,
input,
select,
textarea,
.controlPanel,
.uploadWorkflowPanel,
.stylePopover,
.inlinePromptComposer,
.composerThumbnail,
.styleStrengthControl,
.workspaceRange,
.settingBlock,
.aspectPreview,
.aspectPreview div,
.importBox,
.sketchPad canvas,
.projectOption,
.modalPromptComposer,
.imageSlotCard,
.imageSlotIcon,
.imageSlotSelect > img,
.importLibraryPanel,
.saveToast {
  border-radius: 3px;
}

@media (max-width: 720px) {
  .generateMode-prompt .generationStage,
  .generateMode-image .generationStage {
    padding-bottom: 220px;
  }

  .plainOutputGrid.outputs-2,
  .plainOutputGrid.outputs-3,
  .plainOutputGrid.outputs-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detailModalContent {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .modalInfoPanel {
    max-height: 36vh;
  }
}

/* --- v5 interaction pass: aligned inputs, edit composer, and enhance action --- */
.generateMode-import .generationStage {
  height: calc(100svh - 98px);
  min-height: 0;
  padding: 12px 0 190px;
}

.generateMode-enhance .generationStage {
  height: calc(100svh - 98px);
  min-height: 0;
  padding: 12px 0 28px;
}

.generateMode-import .modeInputStack,
.generateMode-enhance .modeInputStack {
  width: min(78vw, 900px);
}

.inlinePromptComposer.editPromptBar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 45;
  width: min(78vw, 900px);
  max-height: 170px;
  overflow: auto;
  transform: translateX(-50%);
  background: rgba(24, 24, 24, 0.97);
  border-color: rgba(215, 194, 154, 0.28);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(18px);
}

.generateButton,
.inlinePromptComposer .inlineStartButton,
.inlineStartButton {
  color: #050505;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 3px;
}

.generateButton:hover,
.inlineStartButton:hover {
  background: #e2c997;
}

.enhancePrimaryButton {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 10px 18px;
  color: #050505;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.enhancePrimaryButton:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.importSourceGrid {
  gap: 8px;
}

.importSourceCard {
  min-height: 148px;
  padding: 20px;
}

.importSourceCard strong {
  font-size: 17px;
}

.importLibraryPanel {
  overflow: hidden;
  padding: 8px;
}

.importLibraryGrid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.importLibraryThumb {
  flex: 0 0 96px;
}

.uploadWorkflowPanel {
  width: 100%;
}

.uploadSourceGrid {
  display: flex;
  gap: 8px;
  align-items: stretch;
  overflow-x: auto;
  padding-bottom: 5px;
}

.uploadSourceGrid > button {
  flex: 0 0 136px;
  min-height: 104px;
  padding: 12px;
}

.uploadedImageGrid {
  display: flex;
  gap: 8px;
  min-width: max-content;
}

.uploadedImageThumb {
  flex: 0 0 96px;
  aspect-ratio: 1 / 1;
}

.modalHeaderActions button.active {
  color: var(--gold);
  background: rgba(215, 194, 154, 0.1);
  border-color: rgba(215, 194, 154, 0.5);
}

@media (max-width: 720px) {
  .generateMode-import .modeInputStack,
  .generateMode-enhance .modeInputStack,
  .inlinePromptComposer.editPromptBar {
    width: calc(100vw - 28px);
  }

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

  .importSourceCard {
    min-height: 124px;
    padding: 14px;
  }
}

/* --- v5 login, library actions, and immersive enhance output --- */
.loginScreen {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(215, 194, 154, 0.065), transparent 34%),
    #000;
}

.loginCard {
  width: min(100%, 390px);
  padding: 42px 0 32px;
  border-top: 1px solid rgba(215, 194, 154, 0.65);
  border-bottom: 1px solid rgba(215, 194, 154, 0.2);
}

.loginBrand {
  color: var(--gold);
  font-family: var(--serif);
  font-size: clamp(42px, 7vw, 58px);
  font-weight: 400;
  line-height: 0.95;
}

.loginCard > p {
  margin: 13px 0 38px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.loginCard form,
.loginCard label {
  display: grid;
}

.loginCard form {
  gap: 20px;
}

.loginCard label {
  gap: 7px;
}

.loginCard label span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.loginCard input {
  width: 100%;
  height: 42px;
  padding: 0 11px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  font-family: var(--mono);
}

.loginCard input:focus {
  border-color: rgba(215, 194, 154, 0.68);
  outline: 0;
}

.loginActions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  min-height: 38px;
  margin-top: 7px;
}

.loginError {
  margin-right: auto;
  color: #b98e84;
  font-family: var(--mono);
  font-size: 9px;
}

.loginActions button {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  color: #050505;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10px;
  cursor: pointer;
}

.uploadedImageItem {
  position: relative;
  flex: 0 0 116px;
  width: 116px;
  height: 154px;
}

.uploadSourceGrid > .uploadDropCard {
  height: 154px;
  min-height: 154px;
}

.uploadedImageItem .uploadedImageThumb {
  width: 116px;
  height: 154px;
  aspect-ratio: auto;
}

.uploadedImageItem .uploadedImageThumb img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.uploadedImageMenuButton {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--soft);
  background: rgba(5, 5, 5, 0.88);
  border: 1px solid rgba(215, 194, 154, 0.28);
  border-radius: 3px;
  cursor: pointer;
}

.uploadedImageMenuButton:hover,
.uploadedImageMenuButton[aria-expanded='true'] {
  color: var(--gold);
  border-color: rgba(215, 194, 154, 0.65);
}

.uploadedImageMenu {
  position: absolute;
  right: 3px;
  bottom: 31px;
  z-index: 12;
  display: grid;
  width: 98px;
  padding: 4px;
  background: rgba(12, 12, 12, 0.98);
  border: 1px solid rgba(215, 194, 154, 0.35);
  border-radius: 3px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
}

.uploadedImageMenu button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 29px;
  padding: 5px 7px;
  color: var(--soft);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 9px;
  cursor: pointer;
}

.uploadedImageMenu button:hover {
  color: var(--gold);
  background: rgba(215, 194, 154, 0.08);
}

.generateMode-enhance .plainOutputGrid.outputs-1 {
  width: min(calc(100vw - 36px), 1600px);
  height: calc(100svh - 150px);
  max-width: none;
  max-height: calc(100svh - 150px);
  aspect-ratio: auto;
}

.generateMode-enhance .plainOutputGrid.outputs-1 .plainOutput,
.generateMode-enhance .plainOutputGrid.outputs-1 .plainOutputImageButton {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.generateMode-enhance .plainOutputGrid.outputs-1 .plainOutputImageButton img {
  object-fit: contain;
}

/* --- v5 compact aspect panel and responsive output packing --- */
.controlPanel:has(.aspectPanel) {
  width: min(720px, calc(100vw - 32px));
  max-height: none;
  overflow: visible;
}

.controlPanel:has(.aspectPanel) .panelHeader {
  margin-bottom: 14px;
}

.aspectPanel {
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.aspectCurrent {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  min-height: 116px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(215, 194, 154, 0.22);
  border-radius: 3px;
}

.aspectCurrent > .ratioFrame {
  flex: 0 0 auto;
  color: var(--gold);
}

.aspectCurrent > div {
  display: grid;
  gap: 2px;
}

.aspectCurrent strong {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
}

.aspectCurrent span:not(.ratioFrame) {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
}

.aspectRatioGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.aspectRatioGrid .ratioButton {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 54px;
  padding: 8px 10px;
  text-align: left;
  background: rgba(255, 255, 255, 0.025);
  border-radius: 3px;
}

.aspectRatioGrid .ratioButton > span:last-child {
  display: grid;
  gap: 1px;
}

.aspectRatioGrid .ratioButton strong {
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
}

.aspectRatioGrid .ratioButton small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
}

.composerInput.hasThumbnail.singleThumbnail {
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: stretch;
}

.composerInput.singleThumbnail .composerThumbColumn,
.composerInput.singleThumbnail .composerThumbnail {
  width: 58px;
}

.composerInput.singleThumbnail .composerThumbColumn {
  align-content: stretch;
  grid-template-rows: minmax(0, 1fr);
}

.composerInput.singleThumbnail .composerThumbnail {
  height: auto;
  min-height: 100%;
}

.composerInput.singleThumbnail .composerThumbnail img {
  object-fit: cover;
}

.plainOutputGrid.outputs-1,
.plainOutputGrid.outputs-2,
.plainOutputGrid.outputs-3,
.plainOutputGrid.outputs-4 {
  grid-template-columns: repeat(var(--output-columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--output-rows), minmax(0, 1fr));
}

.uploadedImageMenu {
  inset: 6px;
  width: auto;
  padding: 7px;
}

.uploadedImageMenu button {
  min-height: 52px;
  padding: 7px 8px;
  font-size: 11px;
}

@media (max-width: 640px) {
  .aspectPanel {
    grid-template-columns: 1fr;
  }

  .aspectCurrent {
    min-height: 64px;
  }

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

  .plainOutputGrid.outputs-3,
  .plainOutputGrid.outputs-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
}

/* Final cascade for fitted generation workspaces and gallery filters. */
.generateMode-prompt .generationStage,
.generateMode-image .generationStage {
  height: 100%;
  min-height: 0;
}

.generateMode-import,
.generateMode-enhance {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.generateMode-import .generationStage,
.generateMode-enhance .generationStage {
  height: auto;
  min-height: 0;
}

.galleryFilterPanel {
  gap: 0;
  padding: 18px 16px 14px;
}

.galleryFilterPanel .galleryFilterHeader h1 {
  margin: 0;
  font-size: 31px;
}

.galleryProjectList {
  gap: 2px;
  max-height: none;
  padding-top: 15px;
}

/* Generated-image groups use measured, uniform tracks. */
.generateMode-prompt .plainOutputGrid,
.generateMode-image .plainOutputGrid,
.generateMode-import .plainOutputGrid {
  gap: 12px;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  aspect-ratio: auto;
  place-content: center;
}

.generateMode-prompt .plainOutput,
.generateMode-image .plainOutput,
.generateMode-import .plainOutput,
.generateMode-prompt .plainOutputImageButton,
.generateMode-image .plainOutputImageButton,
.generateMode-import .plainOutputImageButton {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
}

/* --- v7 prompt, project, and generated-image interaction refinements --- */
.promptComposer textarea.positivePrompt,
.promptComposer textarea.negativePrompt {
  font-size: 14px;
}

.promptComposer textarea::placeholder {
  color: rgba(216, 210, 199, 0.3);
  opacity: 1;
}

.uploadedImageMenu {
  inset: auto 3px 36px auto;
  width: 104px;
  padding: 3px;
}

.uploadedImageMenu button {
  min-height: 30px;
  padding: 5px 7px;
  font-size: 9px;
}

.ratioFrame.ratio-3-2 {
  width: 24px;
  height: 16px;
}

.aspectCurrent {
  display: grid;
  grid-template-columns: 30px auto;
  justify-content: center;
}

.aspectCurrent > .ratioFrame {
  justify-self: center;
}

.outputDelete {
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  padding: 0;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.68);
  border: 1px solid rgba(215, 194, 154, 0.28);
  border-radius: 3px;
  opacity: 0;
  transform: translateY(4px);
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.plainOutput:hover .outputDelete,
.plainOutput:focus-within .outputDelete {
  opacity: 1;
  transform: translateY(0);
}

.outputDelete:hover {
  border-color: rgba(232, 210, 168, 0.62);
  background: rgba(20, 20, 20, 0.82);
}

.projectActions {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 8;
}

.projectMoreButton,
.galleryProjectList .projectMoreButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  color: var(--muted);
  background: rgba(8, 8, 8, 0.72);
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
}

.projectMoreButton:hover,
.projectMoreButton[aria-expanded='true'],
.galleryProjectList .projectMoreButton:hover,
.galleryProjectList .projectMoreButton[aria-expanded='true'] {
  color: var(--gold);
  background: rgba(215, 194, 154, 0.08);
  border-color: rgba(215, 194, 154, 0.3);
}

.projectActionsPopover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 12;
  width: 108px;
  padding: 3px;
  background: rgba(12, 12, 12, 0.99);
  border: 1px solid rgba(215, 194, 154, 0.35);
  border-radius: 3px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.72);
}

.projectActionsPopover button,
.galleryProjectList .projectActionsPopover button {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 30px;
  padding: 5px 7px;
  color: var(--soft);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 9px;
  cursor: pointer;
}

.projectActionsPopover button:hover,
.galleryProjectList .projectActionsPopover button:hover {
  color: var(--gold);
  background: rgba(215, 194, 154, 0.08);
}

.galleryProjectRow {
  position: relative;
  min-width: 0;
}

.galleryProjectRow:has(.projectMoreButton[aria-expanded='true']) {
  z-index: 40;
}

.galleryProjectRow > button {
  width: 100%;
  min-height: 27px;
  padding: 5px 34px 5px 6px;
  font-size: 10px;
}

.galleryProjectRow .projectActions {
  top: 0;
  right: 0;
}

.galleryProjectRow .projectActionsPopover {
  top: auto;
  right: 0;
  bottom: calc(100% + 4px);
  z-index: 50;
  background: #121212;
  opacity: 1;
  filter: none;
  isolation: isolate;
}

.galleryProjectRow .projectActionsPopover button {
  opacity: 1;
}

.galleryProjectRow .projectMoreButton {
  width: 27px;
  min-width: 27px;
  height: 27px;
  min-height: 27px;
  background: transparent;
}

/* --- v8 unified edit workspace, motion gallery, and compact archive --- */
.navLink.active {
  border-color: transparent;
}

.promptComposer--prompt {
  display: flex;
  flex-direction: column;
  min-height: 30svh;
}

.promptComposer--prompt .composerInput {
  flex: 1;
  min-height: 0;
}

.promptComposer--prompt .promptFields {
  grid-template-rows: minmax(72px, 1.7fr) auto minmax(44px, 1fr);
  height: 100%;
}

.promptComposer--prompt textarea {
  height: 100%;
}

.galleryCarousel {
  position: relative;
  width: min(84vw, 1160px);
  overflow: hidden;
  padding: 0 0 24px;
  cursor: grab;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  transform: translateY(-8svh);
}

.galleryCarousel:active {
  cursor: grabbing;
}

.galleryCarouselTrack {
  display: flex;
  gap: 8px;
  width: max-content;
  will-change: transform;
}

.galleryCarouselItem {
  position: relative;
  flex: 0 0 clamp(140px, 16vw, 240px);
  height: clamp(120px, 19svh, 210px);
  overflow: hidden;
  padding: 0;
  background: #111;
  border: 0;
  cursor: inherit;
}

.galleryCarouselItem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.78);
  pointer-events: none;
  transition: filter 0.25s ease, transform 0.25s ease;
}

.galleryCarouselItem:hover img,
.galleryCarouselItem:focus-visible img {
  filter: grayscale(0) brightness(1);
  transform: scale(1.025);
}

.galleryCarouselHint {
  position: absolute;
  right: 5%;
  bottom: 0;
  color: rgba(215, 194, 154, 0.62);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
}

.editToolCluster {
  width: 100%;
}

.brushSizeControl {
  display: grid;
  grid-template-columns: 32px auto minmax(100px, 180px);
  gap: 9px;
  align-items: center;
  min-height: 42px;
  padding: 5px 11px 5px 7px;
  background: rgba(215, 194, 154, 0.055);
  border: 1px solid rgba(215, 194, 154, 0.18);
  border-radius: 999px;
}

.brushSizeSwatch {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(215, 194, 154, 0.22);
  border-radius: 50%;
}

.brushSizeSwatch::after {
  content: '';
  width: var(--brush-control-size);
  height: var(--brush-control-size);
  max-width: 24px;
  max-height: 24px;
  background: rgba(215, 194, 154, 0.75);
  border: 1px solid rgba(240, 226, 198, 0.65);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(215, 194, 154, 0.16);
}

.brushSizeCopy {
  display: grid;
  min-width: 70px;
  line-height: 1.15;
}

.brushSizeCopy strong {
  color: var(--soft);
  font-size: 10px;
  font-weight: 400;
}

.brushSizeCopy small {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 9px;
}

.brushSizeControl input {
  width: 100%;
  accent-color: var(--gold);
}

.brushPreviewOnImage span {
  background: rgba(215, 194, 154, 0.72);
  border-color: rgba(240, 226, 198, 0.72);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.34), 0 0 18px rgba(215, 194, 154, 0.2);
}

.inpaintingMaskPreview polyline {
  stroke: rgba(215, 194, 154, 0.72);
}

.upscaleFactorChoice {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 4px 5px 4px 11px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  font-size: 10px;
}

.upscaleFactorChoice > span {
  margin-right: 3px;
}

.upscaleFactorChoice button {
  min-width: 45px;
  height: 28px;
  color: var(--soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}

.upscaleFactorChoice button.active {
  color: #070707;
  background: var(--gold);
  border-color: var(--gold);
}

.galleryLayout.filtersCollapsed {
  grid-template-columns: 54px minmax(0, 1fr);
}

.galleryLayout.filtersExpanded {
  grid-template-columns: 214px minmax(0, 1fr);
}

.galleryFilterPanel.collapsed {
  padding: 8px;
  overflow: hidden;
}

.galleryFilterPanel.collapsed > :not(.galleryFilterHeader) {
  display: none;
}

.galleryFilterHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.galleryFilterHeader > div {
  display: grid;
  gap: 5px;
}

.galleryFilterHeader > div > span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.galleryFilterPanel.collapsed .galleryFilterHeader > div {
  display: none;
}

.galleryFilterPanel.collapsed .galleryFilterHeader {
  justify-content: center;
  padding: 0;
}

.galleryFilterToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--gold);
  background: rgba(215, 194, 154, 0.06);
  border: 1px solid rgba(215, 194, 154, 0.2);
  border-radius: 50%;
  cursor: pointer;
}

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

.gallerySectionHeader::after {
  display: none;
}

.galleryImageButton img {
  filter: grayscale(1) brightness(0.72);
}

.galleryImageCard:hover img,
.galleryImageButton:focus-visible img {
  filter: grayscale(0) brightness(1);
}

.modalPromptBlock {
  display: grid;
  gap: 7px;
}

.modalPromptLabel {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.viewEnhancedPromptButton {
  justify-self: start;
  min-height: 28px;
  padding: 4px 0;
  color: var(--gold);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(215, 194, 154, 0.36);
  font-family: var(--mono);
  font-size: 9px;
  cursor: pointer;
}

@media (max-width: 960px) {
  .galleryLayout.filtersCollapsed,
  .galleryLayout.filtersExpanded {
    grid-template-columns: 1fr;
  }

  .galleryFilterPanel.collapsed {
    justify-self: start;
    width: 54px;
  }
}

@media (max-width: 640px) {
  .promptComposer--prompt {
    min-height: 34svh;
  }

  .galleryCarousel {
    width: 94vw;
  }

  .brushSizeControl {
    grid-template-columns: 32px minmax(62px, auto) minmax(82px, 1fr);
  }
}

.confirmDialogBackdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(3px);
}

.confirmDialog {
  width: min(330px, 100%);
  padding: 14px;
  color: var(--soft);
  background: #121212;
  border: 1px solid rgba(215, 194, 154, 0.38);
  border-radius: 3px;
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.78);
}

.confirmDialogHeader {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  color: var(--gold);
}

.confirmDialogHeader strong {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
}

.confirmDialogHeader button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  cursor: pointer;
}

.confirmDialog p {
  margin: 12px 0 16px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.55;
}

.confirmDialogActions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.confirmDialogActions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 31px;
  padding: 5px 10px;
  color: var(--soft);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 9px;
  cursor: pointer;
}

.confirmDialogActions .danger {
  color: #e5c4bd;
  background: rgba(142, 64, 52, 0.2);
  border-color: rgba(205, 129, 116, 0.42);
}

/* --- v8.1 carousel scale, stable edit geometry, and overlay gallery filter --- */
.promptComposer--image,
.inlinePromptComposer.editPromptBar {
  display: flex;
  flex-direction: column;
  min-height: 30svh;
  max-height: none;
}

.promptComposer--image .composerInput,
.inlinePromptComposer.editPromptBar .composerInput {
  flex: 1;
  min-height: 0;
}

.promptComposer--image .promptFields,
.inlinePromptComposer.editPromptBar .promptFields {
  grid-template-rows: minmax(72px, 1.7fr) auto minmax(44px, 1fr);
  height: 100%;
}

.promptComposer--image textarea,
.inlinePromptComposer.editPromptBar textarea {
  height: 100%;
}

.galleryCarousel {
  width: 100vw;
  padding: 0;
  transform: translateY(-7svh);
  -webkit-mask-image: none;
  mask-image: none;
}

.galleryCarouselItem {
  flex-basis: clamp(280px, 32vw, 480px);
  height: clamp(240px, 38svh, 420px);
}

.generateMode-import .modeToolStrip {
  width: min(96vw, 1180px);
  height: 104px;
  min-height: 104px;
  overflow: visible;
}

.generateMode-import .editToolCluster {
  min-height: 82px;
  justify-content: flex-start;
}

.generateMode-import .generationStage {
  height: calc(100svh - 158px);
  padding: 12px 0 calc(30svh + 30px);
}

.generateMode-import .modeInputStack {
  grid-template-rows: minmax(0, auto) 46px;
  align-content: center;
}

.editPrimaryActionSlot {
  display: grid;
  place-items: center;
  width: 100%;
  height: 46px;
}

.brushPresetControl {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 5px 7px 5px 11px;
  background: rgba(215, 194, 154, 0.055);
  border: 1px solid rgba(215, 194, 154, 0.18);
  border-radius: 999px;
}

.brushPresetLabel {
  display: grid;
  min-width: 62px;
  margin-right: 3px;
  line-height: 1.15;
}

.brushPresetLabel strong {
  color: var(--soft);
  font-size: 10px;
  font-weight: 400;
}

.brushPresetLabel small {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 9px;
}

.brushPresetControl button {
  display: grid;
  grid-template-rows: 26px auto;
  place-items: center;
  min-width: 38px;
  height: 36px;
  padding: 2px 4px 1px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

.brushPresetControl button.active {
  color: var(--gold);
  background: rgba(215, 194, 154, 0.1);
  border-color: rgba(215, 194, 154, 0.36);
}

.brushPresetControl button small {
  font-family: var(--mono);
  font-size: 7px;
  line-height: 1;
}

.brushPresetDot {
  display: block;
  background: rgba(215, 194, 154, 0.78);
  border: 1px solid rgba(240, 226, 198, 0.68);
  border-radius: 50%;
}

.brushPresetDot-1 { width: 6px; height: 6px; }
.brushPresetDot-2 { width: 9px; height: 9px; }
.brushPresetDot-3 { width: 13px; height: 13px; }
.brushPresetDot-4 { width: 18px; height: 18px; }
.brushPresetDot-5 { width: 24px; height: 24px; }

.brushPreviewOnImage {
  top: 28px;
  right: 28px;
  width: 280px;
  height: 280px;
}

.brushPreviewOnImage span {
  max-width: none;
  max-height: none;
}

.galleryView {
  position: relative;
}

.galleryLayout.filtersCollapsed,
.galleryLayout.filtersExpanded {
  display: block;
  grid-template-columns: none;
  position: relative;
}

.galleryFilterPanel.collapsed,
.galleryFilterPanel.expanded {
  position: fixed;
  top: 66px;
  left: 18px;
  z-index: 60;
  width: 214px;
  transition: max-height 0.26s ease, box-shadow 0.26s ease;
}

.galleryFilterPanel.collapsed {
  max-height: 48px;
  padding: 8px 10px;
}

.galleryFilterPanel.expanded {
  max-height: calc(100svh - 84px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.72);
}

.galleryFilterPanel.collapsed .galleryFilterHeader {
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  padding: 0;
}

.galleryFilterPanel.collapsed .galleryFilterHeader > div {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 7px;
}

.galleryFilterPanel.collapsed .galleryFilterHeader h1 {
  font-size: 18px;
}

.galleryFilterPanel.collapsed .galleryFilterHeader > div > span {
  font-size: 8px;
}

.gallerySections {
  width: 100%;
  gap: clamp(62px, 8vh, 96px);
}

.enhancedPromptComparison {
  display: grid;
  gap: 7px;
  margin-top: 2px;
  padding: 11px;
  background: rgba(215, 194, 154, 0.055);
  border-left: 1px solid rgba(215, 194, 154, 0.42);
}

@media (max-width: 720px) {
  .galleryCarouselItem {
    flex-basis: 64vw;
    height: 34svh;
  }

  .generateMode-import .modeToolStrip {
    height: auto;
    min-height: 138px;
  }

  .generateMode-import .editToolCluster {
    min-height: 118px;
  }

  .brushPresetControl {
    max-width: 94vw;
    overflow-x: auto;
  }

  .galleryFilterPanel.collapsed,
  .galleryFilterPanel.expanded {
    top: 154px;
    left: 9px;
  }
}

/* Final v8.3 cascade: keep prompt media and gallery header geometrically stable. */
.appShell:has(.generateView) .mainSurface,
.appShell:has(.generateView) .generateView {
  overflow-x: hidden;
}

.promptComposer--prompt,
.promptComposer--image,
.inlinePromptComposer.editPromptBar {
  display: flex;
  flex-direction: column;
  height: 30svh;
  min-height: 30svh;
  max-height: none;
}

.promptComposer--prompt .composerInput,
.promptComposer--image .composerInput,
.inlinePromptComposer.editPromptBar .composerInput {
  flex: 1;
  min-height: 0;
}

.promptComposer--prompt .promptFields,
.promptComposer--image .promptFields,
.inlinePromptComposer.editPromptBar .promptFields,
.promptComposer .composerThumbColumn,
.promptComposer .composerInput.singleThumbnail .composerThumbColumn {
  grid-template-rows: minmax(0, 1fr) 12px minmax(0, 1fr);
  height: 100%;
  gap: 0;
}

.promptComposer--prompt .promptFieldDivider,
.promptComposer--image .promptFieldDivider,
.inlinePromptComposer.editPromptBar .promptFieldDivider {
  height: 12px;
  margin: 0;
}

.promptComposer--prompt textarea,
.promptComposer--image textarea,
.inlinePromptComposer.editPromptBar textarea {
  height: 100%;
  min-height: 0;
}

.promptComposer .composerInput.hasThumbnail,
.promptComposer .composerInput.hasThumbnail.singleThumbnail {
  grid-template-columns: 74px minmax(0, 1fr);
  column-gap: 18px;
  align-items: stretch;
}

.promptComposer .composerThumbColumn,
.promptComposer .composerInput.singleThumbnail .composerThumbColumn {
  position: relative;
  display: grid;
  width: 74px;
  min-height: 0;
  align-content: stretch;
}

.promptComposer .composerThumbnail,
.promptComposer .composerInput.singleThumbnail .composerThumbnail {
  width: 74px;
  height: 100%;
  min-height: 0;
  border-radius: 3px;
}

.promptComposer .composerThumbColumn .slot-input,
.promptComposer .composerInput.singleThumbnail .composerThumbColumn .slot-input,
.promptComposer .composerInput.singleThumbnail .composerThumbColumn .slot-reference {
  grid-row: 1;
}

.promptComposer .composerThumbColumn .slot-reference {
  grid-row: 3;
}

.promptComposer .composerThumbnail img,
.promptComposer .composerInput.singleThumbnail .composerThumbnail img {
  object-fit: cover;
}

.composerThumbDivider {
  grid-row: 2;
  align-self: center;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
}

.galleryFilterPanel.collapsed,
.galleryFilterPanel.expanded {
  max-height: none;
  padding: 10px 12px;
  overflow: hidden;
  transition: box-shadow 0.28s ease, border-color 0.28s ease;
}

.galleryFilterPanel.collapsed > .galleryFilterBody,
.galleryFilterPanel.expanded > .galleryFilterBody {
  display: block;
}

.galleryFilterPanel .galleryFilterHeader,
.galleryFilterPanel.collapsed .galleryFilterHeader,
.galleryFilterPanel.expanded .galleryFilterHeader {
  align-items: center;
  min-height: 30px;
  padding: 0;
}

.galleryFilterPanel .galleryFilterHeader > div,
.galleryFilterPanel.collapsed .galleryFilterHeader > div,
.galleryFilterPanel.expanded .galleryFilterHeader > div {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 7px;
}

.galleryFilterPanel .galleryFilterHeader h1,
.galleryFilterPanel.collapsed .galleryFilterHeader h1,
.galleryFilterPanel.expanded .galleryFilterHeader h1 {
  margin: 0;
  font-size: 18px;
  line-height: 1;
}

.galleryFilterPanel .galleryFilterHeader > div > span,
.galleryFilterPanel.collapsed .galleryFilterHeader > div > span,
.galleryFilterPanel.expanded .galleryFilterHeader > div > span {
  font-size: 8px;
  line-height: 1;
}

.galleryFilterBody {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  pointer-events: none;
  transition:
    max-height 0.38s cubic-bezier(0.22, 0.7, 0.28, 1),
    opacity 0.2s ease,
    transform 0.3s cubic-bezier(0.22, 0.7, 0.28, 1),
    visibility 0s linear 0.38s;
}

.galleryFilterPanel.expanded .galleryFilterBody {
  max-height: calc(100svh - 138px);
  overflow-y: auto;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    max-height 0.42s cubic-bezier(0.22, 0.7, 0.28, 1),
    opacity 0.24s ease 0.06s,
    transform 0.34s cubic-bezier(0.22, 0.7, 0.28, 1),
    visibility 0s;
}

@media (max-width: 720px) {
  .promptComposer--prompt,
  .promptComposer--image,
  .inlinePromptComposer.editPromptBar {
    height: 34svh;
    min-height: 34svh;
  }
}

/* ============================================================
   v10 — gallery sidebar column, edit-mode fit, brush truth,
   prompt copy, and the advanced (technical) settings panel.
   ============================================================ */

/* --- 1. Copy prompt to clipboard, in the image popup --- */

.modalPromptLabelRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.promptCopyChip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.promptCopyChip:hover {
  color: var(--gold);
  background: rgba(215, 194, 154, 0.08);
  border-color: rgba(215, 194, 154, 0.4);
}

.promptCopyChip.copied {
  color: var(--gold);
  background: rgba(215, 194, 154, 0.12);
  border-color: rgba(215, 194, 154, 0.55);
}

.enhancedPromptComparison .promptCopyChip {
  background: rgba(0, 0, 0, 0.25);
}

/* --- 2. Gallery filters sit in their own column again --- */
/* Previously the panel was position:fixed over a display:block layout, so it
   covered the first images and swallowed their clicks. Back to a two-column
   grid; the column keeps one width in both states so toggling never reflows. */

.galleryLayout.filtersCollapsed,
.galleryLayout.filtersExpanded {
  position: relative;
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.galleryFilterPanel.collapsed,
.galleryFilterPanel.expanded {
  position: sticky;
  top: 66px;
  left: auto;
  z-index: 5;
  width: auto;
  max-height: calc(100svh - 84px);
  overflow: hidden;
}

.galleryFilterPanel.expanded {
  box-shadow: none;
}

.gallerySections {
  min-width: 0;
}

/* iPad portrait (768–834) is a primary target, so keep the side column down to
   700px rather than stacking at the old 960 breakpoint. */
@media (max-width: 960px) {
  .galleryFilterPanel.collapsed,
  .galleryFilterPanel.expanded {
    display: block;
    grid-template-columns: none;
  }
}

@media (max-width: 700px) {
  .galleryLayout.filtersCollapsed,
  .galleryLayout.filtersExpanded {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .galleryFilterPanel.collapsed,
  .galleryFilterPanel.expanded {
    position: static;
    width: auto;
    max-height: none;
  }
}

/* --- 3. Edit Image: the canvas never sits under the prompt bar --- */
/* The composer is position:fixed at the bottom, so the stage has to reserve
   its height rather than assume the page scrolls. */

.generateMode-import:has(.editPromptBar) .generationStage {
  align-content: center;
  box-sizing: border-box;
  padding-bottom: calc(30svh + 28px);
}

.generateMode-import:has(.editPromptBar) .modeInputStack {
  width: min(92vw, 1180px);
  height: 100%;
  min-height: 0;
}

.generateMode-import:has(.editPromptBar) .inpaintingStage,
.generateMode-import:has(.editPromptBar) .importDropZone {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  padding: 18px;
}

/* The mask canvas is pinned to the stage, so the stage has to hug the image —
   otherwise you can paint in the letterboxed margins where there is no pixel. */
.generateMode-import:has(.editPromptBar) .inpaintingStage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
}

.generateMode-import:has(.editPromptBar) .inpaintingStage img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.generateMode-import:has(.editPromptBar) .importDropZone.hasImage img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Mask overlays follow the reduced padding so brush strokes stay registered. */
.generateMode-import:has(.editPromptBar) .inpaintingStage canvas,
.generateMode-import:has(.editPromptBar) .inpaintingMaskPreview {
  inset: 18px;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
}

@media (max-width: 720px) {
  .generateMode-import:has(.editPromptBar) .generationStage {
    padding-bottom: calc(34svh + 24px);
  }

  .generateMode-import:has(.editPromptBar) .modeInputStack {
    width: 96vw;
  }
}

/* --- 4. Brush size that tells the truth --- */
/* The old left-hand disc was a scaled-down proxy that never matched the pixels
   actually painted. It is now an explicit percentage gauge with the value in
   the middle, and the real diameter is previewed 1:1 on the canvas itself. */

.brushSliderControl {
  grid-template-columns: 34px auto minmax(190px, 300px) 48px;
}

.brushGauge {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    conic-gradient(var(--gold) 0 var(--brush-gauge, 0%), rgba(255, 255, 255, 0.1) var(--brush-gauge, 0%) 100%);
}

.brushGauge::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: #131313;
  border-radius: 50%;
}

.brushGaugeValue {
  position: relative;
  z-index: 1;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.brushSliderCopy small {
  white-space: nowrap;
}

/* True-diameter ring, drawn in the same pixel space as the stroke width. */
.brushCursorRing {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: rgba(255, 59, 48, 0.16);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.brushCursorRing.drawing {
  background: rgba(255, 59, 48, 0.3);
}

/* --- 5. The sub-tab row never moves between Edit Image tools --- */
/* The aux slot is always in the DOM at a fixed height, so Prompt Edit,
   Inpainting, Enhance and Upscale all produce the same strip geometry. */

.editToolCluster {
  justify-content: flex-start;
  min-height: 0;
}

.editToolAux {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 46px;
}

.appShell .generateMode-import .modeToolStrip.modeToolStrip {
  min-height: 108px;
  align-content: center;
}

@media (max-width: 720px) {
  .generateMode-import .modeToolStrip {
    height: auto;
    min-height: 148px;
  }

  .generateMode-import .editToolCluster {
    min-height: 0;
  }

  .editToolAux {
    flex-wrap: wrap;
    min-height: 84px;
  }
}

/* --- 6. Image popup shows the file's own ratio, fitted to height --- */

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

/* Only cap the height once the modal actually stacks into one column — at
   tablet width it is still side-by-side and should fill the full stage. */
@media (max-width: 640px) {
  .modalImageStage img {
    width: 100%;
    height: auto;
    max-height: 46vh;
  }
}

/* --- 7. Advanced (technical) settings --- */
/* Deliberately understated: it reads as a footnote inside the settings popover
   so the default composer stays a prompt box for non-technical users. */

.advancedControl {
  position: relative;
}

.advancedTrigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 9px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.advancedTrigger:hover,
.advancedTrigger.active {
  color: var(--gold);
  background: rgba(215, 194, 154, 0.07);
  border-color: rgba(215, 194, 154, 0.32);
}

.advancedDot {
  width: 5px;
  height: 5px;
  background: var(--gold);
  border-radius: 50%;
}

.advancedPanel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 70;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(360px, calc(100vw - 32px));
  max-height: min(62svh, 560px);
  background: rgba(14, 14, 14, 0.98);
  border: 1px solid rgba(215, 194, 154, 0.24);
  border-radius: 4px;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(18px);
  animation: advancedPanelIn 0.2s cubic-bezier(0.22, 0.7, 0.28, 1) both;
}

@keyframes advancedPanelIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.advancedPanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 13px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.advancedPanelHeader > div {
  display: grid;
  gap: 3px;
}

.advancedEyebrow {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.advancedPanelHeader strong {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

.advancedPanelHeaderActions {
  display: flex;
  gap: 5px;
  align-items: center;
}

.advancedPanelHeaderActions > button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 3px 7px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 9px;
  cursor: pointer;
}

.advancedPanelHeaderActions > button:hover:not(:disabled) {
  color: var(--gold);
  border-color: rgba(215, 194, 154, 0.32);
}

.advancedPanelHeaderActions > button:disabled {
  opacity: 0.34;
  cursor: not-allowed;
}

.advancedPanelBody {
  display: grid;
  gap: 0;
  overflow-y: auto;
  padding: 0 13px 13px;
}

.advancedGroup {
  display: grid;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.advancedGroup:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}

.advancedGroupHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.advancedGroupHeader em {
  color: var(--muted);
  font-style: normal;
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: none;
}

.advancedField {
  display: grid;
  gap: 5px;
}

.advancedFieldHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--soft);
  font-size: 11px;
}

.advancedFieldHead label {
  cursor: pointer;
}

.advancedValue {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.advancedHint {
  margin: 0;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.45;
}

.advancedSlider {
  width: 100%;
  height: 16px;
  margin: 2px 0 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.advancedSlider::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--gold) 0 var(--advanced-progress),
    rgba(255, 255, 255, 0.13) var(--advanced-progress) 100%
  );
  border-radius: 999px;
}

.advancedSlider::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  margin-top: -5.5px;
  appearance: none;
  background: var(--gold);
  border: 3px solid #131313;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(215, 194, 154, 0.5);
}

.advancedSlider::-moz-range-track {
  height: 2px;
  background: rgba(255, 255, 255, 0.13);
  border-radius: 999px;
}

.advancedSlider::-moz-range-progress {
  height: 2px;
  background: var(--gold);
  border-radius: 999px;
}

.advancedSlider::-moz-range-thumb {
  width: 9px;
  height: 9px;
  background: var(--gold);
  border: 3px solid #131313;
  border-radius: 50%;
}

/* Two overlaid range inputs form one min/max pair. */
.advancedRangePair {
  position: relative;
  height: 20px;
  margin-top: 3px;
}

.advancedRangeRail {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  transform: translateY(-50%);
}

.advancedRangeFill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--range-start, 0%);
  right: calc(100% - var(--range-end, 100%));
  background: var(--gold);
  border-radius: 999px;
}

.advancedRangePair input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 20px;
  margin: 0;
  appearance: none;
  background: transparent;
  pointer-events: none;
}

.advancedRangePair input::-webkit-slider-runnable-track {
  height: 2px;
  background: transparent;
}

.advancedRangePair input::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  margin-top: -5.5px;
  appearance: none;
  background: var(--gold);
  border: 3px solid #131313;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(215, 194, 154, 0.5);
  cursor: ew-resize;
  pointer-events: auto;
}

.advancedRangePair input::-moz-range-track {
  height: 2px;
  background: transparent;
}

.advancedRangePair input::-moz-range-thumb {
  width: 9px;
  height: 9px;
  background: var(--gold);
  border: 3px solid #131313;
  border-radius: 50%;
  cursor: ew-resize;
  pointer-events: auto;
}

.advancedRangeLegend {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.advancedNumberInput {
  min-height: 30px;
  padding: 5px 8px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.advancedNumberInput.wide {
  width: 100%;
}

.advancedNumberInput:focus-visible {
  border-color: rgba(215, 194, 154, 0.5);
  outline: none;
}

.advancedNumberInput:disabled {
  opacity: 0.4;
}

.advancedSeedRow {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 30px;
  gap: 6px;
  align-items: center;
}

.advancedSeedIcon {
  display: grid;
  place-items: center;
  height: 30px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}

.advancedGhostButton {
  display: grid;
  place-items: center;
  height: 30px;
  color: var(--gold);
  background: rgba(215, 194, 154, 0.07);
  border: 1px solid rgba(215, 194, 154, 0.24);
  border-radius: 2px;
  cursor: pointer;
}

.advancedGhostButton:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.advancedSwitch {
  position: relative;
  width: 34px;
  height: 18px;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.advancedSwitch span {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--muted);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease, background 0.2s ease;
}

.advancedSwitch.on {
  background: rgba(215, 194, 154, 0.24);
  border-color: rgba(215, 194, 154, 0.6);
}

.advancedSwitch.on span {
  background: var(--gold);
  transform: translate(16px, -50%);
}

.advancedSegmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.advancedSegmented button {
  display: grid;
  gap: 2px;
  padding: 6px 8px;
  color: var(--muted);
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.advancedSegmented button strong {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
}

.advancedSegmented button em {
  font-style: normal;
  font-size: 8.5px;
}

.advancedSegmented button.active {
  color: var(--gold);
  background: rgba(215, 194, 154, 0.1);
  border-color: rgba(215, 194, 154, 0.45);
}

.advancedSelectField {
  position: relative;
}

.advancedSelectButton {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 32px;
  padding: 5px 9px;
  color: var(--soft);
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 2px;
  font-size: 11px;
  cursor: pointer;
}

.advancedSelectButton em,
.advancedSelectMenu button em {
  color: var(--muted);
  font-style: normal;
  font-family: var(--mono);
  font-size: 8.5px;
}

.advancedSelectButton.open {
  border-color: rgba(215, 194, 154, 0.45);
}

.advancedSelectMenu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  display: grid;
  padding: 4px;
  background: #131313;
  border: 1px solid rgba(215, 194, 154, 0.28);
  border-radius: 3px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
}

.advancedSelectMenu button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-height: 30px;
  padding: 5px 8px;
  color: var(--soft);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 2px;
  font-size: 11px;
  cursor: pointer;
}

.advancedSelectMenu button:hover {
  background: rgba(255, 255, 255, 0.05);
}

.advancedSelectMenu button.active {
  color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  .advancedPanel {
    animation: none;
  }
}

/* v10 fixes — label row keeps the copy button compact, and the popup stage
   centres with flex so the image can resolve `height: 100%` against it
   (grid + place-items: center leaves the item without a definite height). */

.modalPromptLabelRow .modalPromptLabel {
  white-space: nowrap;
}

.modalPromptLabelRow .promptCopyChip {
  flex: 0 0 auto;
}

.modalImageStage {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   v10.1 — Edit Image side panel, true-size brush cursor,
   natural colour for uploaded images.
   ============================================================ */

/* --- Edit Image workspace: canvas left, controls right --- */
/* The bottom prompt bar is gone for Prompt Edit and Inpainting. The empty
   state is just the two source cards; the panel mounts with the image. */

.generateMode-import .generationStage:has(.editWorkspace) {
  align-content: stretch;
  height: 100%;
  min-height: 0;
  padding: 10px 0 14px;
}

.editWorkspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  width: min(95vw, 1560px);
  height: 100%;
  min-height: 0;
}

.editWorkspace.withPanel {
  grid-template-columns: minmax(0, 1fr) 340px;
}

.editCanvasColumn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

/* Canvas fills the column and the frame hugs the image, so the mask overlay
   stays registered to actual pixels. */
.editWorkspace .inpaintingStage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  padding: 18px;
}

.editWorkspace .inpaintingStage img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.editWorkspace .inpaintingStage canvas,
.editWorkspace .inpaintingMaskPreview {
  inset: 18px;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
}

/* Prompt Edit shows the same image in the drop zone — fit it to the column. */
.editWorkspace .importDropZone {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  padding: 18px;
}

.editWorkspace .importDropZone.hasImage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  align-content: stretch;
  justify-items: center;
}

.editWorkspace .importDropZone.hasImage img {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Empty state keeps the source cards centred without a prompt bar below. */
.editWorkspace .importSourceStack {
  align-self: center;
  width: min(72vw, 760px);
  margin: 0 auto;
}

.editSidePanel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  padding: 16px;
  background: rgba(31, 31, 31, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
}

/* --- Minimal brush block --- */

.brushPanel {
  display: grid;
  gap: 11px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.brushPanelHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--soft);
  font-size: 13px;
}

.brushPanelHead output {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.brushPanelSlider {
  width: 100%;
  height: 18px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.brushPanelSlider::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--gold) 0 var(--brush-progress),
    rgba(255, 255, 255, 0.12) var(--brush-progress) 100%
  );
  border-radius: 999px;
}

.brushPanelSlider::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -6px;
  appearance: none;
  background: var(--gold);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.brushPanelSlider::-moz-range-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

.brushPanelSlider::-moz-range-progress {
  height: 4px;
  background: var(--gold);
  border-radius: 999px;
}

.brushPanelSlider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--gold);
  border: 0;
  border-radius: 50%;
}

.brushPanelHistory {
  display: flex;
  gap: 7px;
}

.brushPanelHistory button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 3px;
  cursor: pointer;
}

.brushPanelHistory button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

/* --- Prompt fields and controls in the side panel --- */

.editSidePromptFields {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 18px minmax(0, 1fr);
  min-height: 0;
}

.editSidePromptFields textarea {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  color: var(--soft);
  background: transparent;
  border: 0;
  resize: none;
}

.editSidePromptFields textarea:focus-visible {
  outline: none;
}

.editSideControls {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.editSideControls .generateButton {
  margin-left: auto;
}

/* The panel is narrow, so the advanced popover anchors to its right edge. */
.editSidePanel .advancedPanel {
  right: 0;
  width: min(340px, calc(100vw - 32px));
}

/* iPad portrait keeps the side panel, just narrower. Only phones stack. */
@media (max-width: 1100px) {
  .editWorkspace.withPanel {
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 14px;
  }
}

@media (max-width: 760px) {
  .editWorkspace.withPanel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .editSidePanel {
    max-height: 46svh;
    overflow-y: auto;
  }

  .editSidePromptFields {
    grid-template-rows: 70px 18px 56px;
  }
}

/* --- Brush cursor: the ring IS the cursor --- */

.editWorkspace .inpaintingStage canvas {
  cursor: none;
}

.brushCursorRing {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px dashed rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.brushCursorRing.drawing {
  background: rgba(255, 255, 255, 0.24);
}

/* --- Natural colour for everything the user uploads or previews --- */
/* Only the home carousel and the gallery cards stay desaturated until hover. */

.importDropZone.hasImage img,
.inpaintingStage img,
.composerThumbnail img,
.uploadedImageThumb img,
.imageSlotSelect > img,
.importLibraryThumb img,
.inlineUpload img,
.importBox img,
.plainOutputImageButton img,
.plainOutput:hover .plainOutputImageButton img,
.plainOutput:focus-within .plainOutputImageButton img {
  filter: none;
}

/* --- Copy chips are icon-only --- */

.promptCopyChip {
  gap: 0;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  justify-content: center;
}

.advancedSeedMode {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.advancedSeedRow {
  grid-template-columns: 24px minmax(0, 1fr) 30px 30px;
}

/* Flex rather than fixed grid rows: the brush block is only present for
   Inpainting, and with grid the prompt fields collapsed in Prompt Edit. */
.editSidePanel {
  display: flex;
  flex-direction: column;
  grid-template-rows: none;
}

.brushPanel,
.editSideControls {
  flex: 0 0 auto;
}

.editSidePromptFields {
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 760px) {
  .editSidePromptFields {
    flex: 0 0 auto;
  }
}

/* ============================================================
   v10.2 — edit workflow consistency, version history, logout.
   ============================================================ */

.logoutButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  padding: 0;
  color: var(--soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
}

.logoutButton:hover,
.logoutButton:focus-visible {
  color: var(--gold);
  background: rgba(215, 194, 154, 0.08);
  border-color: rgba(215, 194, 154, 0.42);
  outline: none;
}

/* Prompt Edit and Inpainting now share the same full-column frame and footer. */
.editPreviewFrame {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  justify-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed rgba(215, 194, 154, 0.38);
  border-radius: 12px;
}

.editPreviewMedia {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.editPreviewImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.editWorkspace .editPreviewFrame .inpaintingStage {
  align-self: stretch;
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.editWorkspace .editPreviewFrame .inpaintingStage img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.editWorkspace .editPreviewFrame .inpaintingStage canvas,
.editWorkspace .editPreviewFrame .inpaintingMaskPreview {
  inset: 0;
  width: 100%;
  height: 100%;
}

.loadedImageReplace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  transition: color 0.18s ease;
}

.loadedImageReplace:hover {
  color: var(--gold);
}

.loadedImageReplace input {
  display: none;
}

/* A compact hierarchy for the settings: style, edit helpers, then the action. */
.editSideControls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  padding-top: 14px;
}

.editSettingGroup {
  display: grid;
  gap: 6px;
}

.editSettingLabel {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.editSettingGroup .styleControl,
.editSettingGroup .styleControl > .composerChip {
  width: 100%;
}

.editSettingGroup .styleControl > .composerChip {
  justify-content: flex-start;
}

.editSettingGroup .styleControl > .composerChip svg:last-child {
  margin-left: auto;
}

.editSettingsRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.editSettingsRow > .composerChip {
  width: 100%;
  justify-content: flex-start;
}

.editSettingsRow .advancedTrigger {
  min-height: 34px;
  padding-inline: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 3px;
}

.editGenerateButton {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 42px;
  padding: 0 12px 0 14px;
  color: #050505;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
}

.editGenerateButton:hover:not(:disabled) {
  background: #e3cda4;
}

.editGenerateButton:disabled {
  opacity: 0.58;
  cursor: wait;
}

/* Edit Image results use one hero image plus selectable generated versions. */
.generateMode-import .generationStage:has(.editVersionOutput) {
  align-content: stretch;
  height: 100%;
  min-height: 0;
  padding: 10px 0 14px;
}

.editVersionOutput {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 88px;
  gap: 12px;
  width: min(95vw, 1560px);
  height: 100%;
  min-height: 0;
}

.editVersionHero,
.generateMode-import .editVersionHero,
.generateMode-import .editVersionHero .plainOutputImageButton {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
}

.editVersionHero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #090909;
}

.editVersionHero .plainOutputImageButton {
  display: flex;
  align-items: center;
  justify-content: center;
}

.editVersionHero .plainOutputImageButton img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.editVersionStrip {
  display: flex;
  gap: 8px;
  align-items: stretch;
  min-width: 0;
  overflow-x: auto;
  padding: 2px 2px 5px;
  scrollbar-color: rgba(215, 194, 154, 0.42) transparent;
  scrollbar-width: thin;
}

.editVersionThumb {
  position: relative;
  flex: 0 0 70px;
  min-width: 70px;
  padding: 3px;
  overflow: hidden;
  background: #090909;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  cursor: pointer;
}

.editVersionThumb:hover {
  border-color: rgba(215, 194, 154, 0.58);
}

.editVersionThumb.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(215, 194, 154, 0.28);
}

.editVersionThumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}

.editVersionThumb span {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: inline-flex;
  gap: 3px;
  align-items: center;
  padding: 2px 4px;
  color: #090909;
  background: var(--gold);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 7px;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .editVersionOutput {
    grid-template-rows: minmax(0, 1fr) 72px;
  }

  .editVersionThumb {
    flex-basis: 56px;
    min-width: 56px;
  }

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

/* v10.3 — reserve the composer footprint so generated images never sit below it. */
.generateMode-prompt .generationStage,
.generateMode-image .generationStage {
  height: 100%;
  min-height: 0;
  padding: 10px 0 calc(30svh + 32px);
}

@media (max-width: 720px) {
  .generateMode-prompt .generationStage,
  .generateMode-image .generationStage {
    padding-bottom: calc(34svh + 24px);
  }
}

/* Generated Prompt Edit/Inpainting versions stay beside their prompt panel. */
.editWorkspace.hasVersions .editVersionOutput {
  width: 100%;
  max-width: 100%;
}

.editWorkspace.hasVersions .editVersionHero {
  background: transparent;
}

/* Before/after comparison for Image to Image, Enhance and Upscale. */
.comparisonSlider {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #090909;
  isolation: isolate;
}

.editVersionHero .comparisonSlider {
  width: auto;
  max-width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
}

.comparisonSlider > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.comparisonBefore {
  z-index: 1;
  clip-path: inset(0 calc(100% - var(--comparison-position)) 0 0);
}

.comparisonDivider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--comparison-position);
  z-index: 3;
  width: 1px;
  background: var(--gold);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
  transform: translateX(-50%);
  pointer-events: none;
}

.comparisonDivider span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  background: var(--gold);
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.42);
  transform: translate(-50%, -50%);
}

.comparisonDivider span::before,
.comparisonDivider span::after {
  position: absolute;
  top: 50%;
  color: #080808;
  font-size: 10px;
  transform: translateY(-55%);
}

.comparisonDivider span::before {
  left: 6px;
  content: '‹';
}

.comparisonDivider span::after {
  right: 6px;
  content: '›';
}

.comparisonBadge {
  position: absolute;
  top: 10px;
  z-index: 4;
  padding: 4px 7px;
  color: var(--soft);
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(215, 194, 154, 0.28);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.comparisonBadgeBefore {
  left: 10px;
}

.comparisonBadgeAfter {
  right: 10px;
}

.comparisonSlider input[type='range'] {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

/* v10.4 — loaded Enhance/Upscale previews always leave room for their action. */
.generateMode-import .generationStage:has(> .modeInputStack) {
  align-content: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 10px 0 14px;
}

.generateMode-import .generationStage:has(> .modeInputStack) .modeInputStack {
  grid-template-rows: minmax(0, 1fr) 46px;
  align-content: stretch;
  width: min(100%, 960px);
  max-width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
}

.generateMode-import .modeInputStack > .editPreviewFrame {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
}

.generateMode-import .modeInputStack .editPreviewMedia,
.generateMode-import .modeInputStack .editPreviewImage {
  min-height: 0;
  max-height: 100%;
}

.generateMode-import .modeInputStack .editPrimaryActionSlot {
  min-height: 46px;
}

@media (max-width: 760px) {
  .generateMode-import .generationStage:has(> .modeInputStack) .modeInputStack {
    width: min(100%, 960px);
    max-width: 100%;
  }

  .generateMode-import .modeInputStack > .editPreviewFrame {
    padding: 10px;
  }

  .generateMode-import .modeInputStack .loadedImageReplace {
    font-size: 10px;
  }
}

/* Original is a first-class, selectable member of Prompt Edit/Inpainting history. */
.originalVersionHero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.originalVersionHero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.editVersionThumb.original span {
  color: var(--gold);
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(215, 194, 154, 0.42);
}

/* A generated Inpainting version is immediately a new brushable canvas. */
.editVersionHero .inpaintingStage {
  width: auto;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.editVersionHero .inpaintingStage img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.editWorkspace .editVersionHero .inpaintingStage canvas,
.editWorkspace .editVersionHero .inpaintingMaskPreview {
  inset: 0;
  width: 100%;
  height: 100%;
}

.inpaintingWorkingBadge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 5;
  padding: 4px 7px;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.68);
  border: 1px solid rgba(215, 194, 154, 0.32);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

/* v10.5 — every Edit Image tab uses the same compact image-source state. */
.generateMode-import .generationStage:has(> .modeInputStack) .modeInputStack:has(.importSourceStack) {
  grid-template-rows: auto 46px;
  align-content: center;
  width: min(72vw, 760px);
  max-width: 100%;
}

@media (max-width: 760px) {
  .generateMode-import .generationStage:has(> .modeInputStack) .modeInputStack:has(.importSourceStack) {
    width: 100%;
  }
}