/* Creation workspace layout using the shared design tokens. */
.studio-heading {
  gap: var(--space-5);
  align-items: flex-start;
  margin-bottom: var(--space-6);
}

.studio-heading p {
  max-width: 620px;
}

.studio-progress {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
  font-size: var(--text-small);
  color: var(--muted);
}

.workspace.studio-workspace {
  --studio-preview-height: 430px;
  display: grid;
  grid-template-columns: minmax(0,.95fr) minmax(0,1.2fr);
  gap: var(--space-6);
  align-items: start;
}

.studio-workspace .studio-input-column,.studio-workspace .studio-preview-column {
  min-width: 0;
}

.studio-workspace .panel {
  padding: var(--space-8);
  margin-bottom: var(--space-5);
}

.studio-workspace .paneltitle {
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.studio-workspace .paneltitle h2 {
  font-size: var(--text-section);
}

.studio-workspace .paneltitle button {
  flex-shrink: 0;
}

.studio-workspace .note {
  font-size: var(--text-small);
  line-height: 1.7;
}

.studio-workspace .gown-upload-grid {
  display: grid;
  grid-template-columns: minmax(0,1.65fr) minmax(112px,1fr);
  gap: var(--space-3);
  align-items: stretch;
}

.studio-workspace .gown-main-slot,.studio-workspace .gown-detail-slot {
  min-width: 0;
}

.studio-workspace .gown-main-slot {
  display: flex;
  flex-direction: column;
}

.studio-workspace .gown-main-slot .upload {
  min-height: 266px;
  height: auto;
  flex: 1;
  padding: var(--space-4);
  text-align: center;
}

.studio-workspace .gown-main-slot .upload img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.studio-workspace .gown-main-slot .upload:has(img) {
  padding: var(--space-2);
}

.studio-workspace .gown-main-slot .upload:has(img)>img {
  position: absolute;
  inset: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
}

.studio-workspace .upload .muted {
  font-size: var(--text-small);
}

.studio-workspace .upload input,.studio-workspace .detail input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.studio-workspace .gown-detail-list {
  display: grid;
  gap: var(--space-2);
}

.studio-workspace .gown-detail-slot .detail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  padding: 0;
  background: var(--color-surface);
  cursor: pointer;
}

.studio-workspace .gown-detail-slot .detail img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.studio-workspace .image-slot-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-1);
  min-height: 24px;
  margin-top: var(--space-1);
  font-size: var(--text-small);
  color: var(--muted);
  flex-wrap: wrap;
}

.studio-workspace .image-slot-meta>span:first-child {
  white-space: nowrap;
}

.studio-workspace .image-slot-meta>div {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.studio-workspace .image-slot-meta button {
  padding: var(--space-2);
  font-size: var(--text-small);
  line-height: 1.5;
  min-height: 44px;
  background: transparent;
  border-color: transparent;
  color: var(--accent);
}

.studio-workspace .image-slot-meta button:hover {
  background: var(--color-primary-soft);
  border-color: var(--line);
}

.studio-workspace .studio-settings .subheading:first-child {
  margin-top: 0;
}

.studio-workspace .subheading {
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-3);
}

.studio-workspace .subheading h3 {
  font-size: var(--text-body);
}

.studio-workspace .subheading .muted {
  font-size: var(--text-small);
  text-align: right;
}

.studio-workspace .choices {
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--space-3);
}

.studio-workspace .choice {
  border: 0;
}

.studio-workspace .choice.selected {
  box-shadow: none;
  background: var(--color-primary-soft);
}

.studio-workspace .choice .caption {
  padding: var(--space-2) var(--space-2);
  font-size: var(--text-small);
  line-height: 1.45;
}

.studio-workspace .choice .caption small {
  margin-top: var(--space-1);
  font-size: var(--text-small);
  line-height: 1.5;
}

.studio-workspace .model-choices .choice img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  object-fit: contain;
  object-position: center;
  background: var(--color-surface);
}

.studio-workspace .scene-choices .choice img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center;
}

.studio-workspace .ratio-options {
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: var(--space-2);
}

.studio-workspace .ratio-option {
  padding: var(--space-2) var(--space-1);
  min-height: 44px;
  justify-content: center;
}

.studio-workspace .ratio-option strong {
  font-size: var(--text-small);
  font-weight: 500;
  white-space: nowrap;
}

.studio-workspace .ratio-option .ratio-icon-wrap,.studio-workspace .ratio-option small {
  display: none;
}

.studio-workspace .preview-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  flex-wrap: wrap;
}

.studio-workspace .preview-tools button {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small);
  line-height: 1.5;
  min-height: 44px;
  border: 0;
  color: var(--color-primary-hover);
}

.studio-workspace .preview-tools button.active {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: transparent;
}

.studio-workspace .preview-tools button:last-child {
  margin-left: auto;
}

.studio-workspace .studio-preview-panel {
  padding: var(--space-8);
}

.studio-workspace .studio-preview-panel .paneltitle {
  margin-bottom: var(--space-3);
}

.studio-workspace .studio-preview-panel .preview-tools {
  margin-bottom: var(--space-3);
}

.studio-workspace .image-stage {
  position: relative;
  width: 100%;
  min-height: 0;
  border: 0;
  background: var(--color-surface);
  overflow: hidden;
  margin: 0 auto;
  border-radius: var(--radius-control);
}

.studio-workspace .image-stage.full-view {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: auto;
  height: var(--studio-preview-height);
  max-height: none;
  padding: var(--space-3);
}

.studio-workspace .image-stage.full-view>img {
  position: static;
  inset: auto;
  display: block;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.studio-workspace .image-stage.output-view {
  width: min(100%,calc(var(--studio-preview-height) * var(--image-ratio)));
  aspect-ratio: var(--image-ratio);
  height: auto;
  max-height: var(--studio-preview-height);
  padding: 0;
  border: 0;
}

.studio-workspace .image-stage.output-view>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

.studio-workspace .image-stage .progress {
  padding: var(--space-5);
  text-align: center;
}

.studio-workspace .image-stage .progress h2 {
  font-size: 19px;
  margin: 0;
}

.studio-workspace .image-stage .progress span {
  font-size: var(--text-small);
}

.studio-workspace .preview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-3);
}

.studio-workspace .preview-meta h3 {
  font-size: 16px;
  margin: 0 0 var(--space-1);
}

.studio-workspace .preview-meta p {
  font-size: var(--text-small);
  color: var(--muted);
  margin: var(--space-1) 0;
}

.studio-workspace .preview-meta>.tag {
  flex-shrink: 0;
}

.studio-workspace .studio-preview-panel>.note {
  padding-top: var(--space-2);
  border-top: 0;
  margin-top: var(--space-2);
  font-size: var(--text-small);
  line-height: 1.6;
}

.studio-workspace .studio-generation {
  padding: var(--space-6);
}

.studio-workspace .studio-generation .selection-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-small);
  color: var(--muted);
  line-height: 1.7;
}

.studio-workspace .studio-generation .generate {
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  align-items: center;
  border-top: 0;
}

.studio-workspace .studio-generation .generate>div {
  min-width: 0;
}

.studio-workspace .studio-generation .generate strong {
  font-size: 23px;
}

.studio-workspace .studio-generation .generate button {
  min-width: 0;
  flex: 1;
  max-width: none;
  padding: var(--space-3) var(--space-6);
  white-space: nowrap;
  min-height: 48px;
}

.studio-workspace .studio-generation .note {
  margin-top: var(--space-2);
  font-size: var(--text-small);
}

.studio-workspace .studio-generation .demo-options {
  border-top: 1px solid var(--line);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--muted);
}

.studio-workspace .studio-generation .demo-options summary {
  cursor: pointer;
  width: fit-content;
}

.studio-workspace .studio-generation .demo-options label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-small);
}

.studio-workspace button:focus-visible,.studio-workspace summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.studio-workspace .upload:focus-within,.studio-workspace .detail:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media(min-width:1450px){
.workspace.studio-workspace {
  --studio-preview-height: 500px;
  gap: var(--space-8);
  grid-template-columns: minmax(0,1fr) minmax(0,1.22fr);
}

.studio-workspace .panel {
  padding: var(--space-6);
}

.studio-workspace .gown-main-slot .upload {
  min-height: 296px;
}

}
@media(min-width:1101px) and (min-height:1250px){
.studio-workspace .studio-preview-column {
  position: sticky;
  top: 24px;
}

}
@media(max-width:1150px) and (min-width:1024px){
.workspace.studio-workspace {
  gap: var(--space-4);
  grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
}

.studio-workspace .panel {
  padding: var(--space-6);
}

.studio-workspace .gown-upload-grid {
  grid-template-columns: minmax(0,1fr);
}

.studio-workspace .gown-main-slot .upload {
  height: 200px;
  min-height: 200px;
  flex: auto;
}

.studio-workspace .gown-detail-list {
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--space-2);
}

.studio-workspace .image-slot-meta {
  flex-wrap: wrap;
}

}
/* Enlarged studio images use the same restrained dialog treatment. */
dialog.image-dialog {
  width: min(980px,90vw);
  max-width: 90vw;
  max-height: 90vh;
  padding: var(--space-6);
  overflow: auto;
}

dialog.image-dialog .paneltitle {
  gap: var(--space-4);
  align-items: center;
  margin-bottom: var(--space-4);
}

dialog.image-dialog .paneltitle h2 {
  margin: 0;
  font-size: 20px;
}

dialog.image-dialog .image-lightbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: min(70vh,760px);
  min-height: 220px;
  background: var(--color-surface);
  border: 0;
  border-radius: var(--radius-control);
  overflow: hidden;
  padding: var(--space-3);
  margin: 0 auto;
}

dialog.image-dialog .image-lightbox img {
  display: block;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

dialog.image-dialog .image-lightbox.output-view {
  position: relative;
  width: min(100%,calc(70vh * var(--image-ratio)));
  height: auto;
  min-height: 0;
  max-height: 70vh;
  aspect-ratio: var(--image-ratio);
  padding: 0;
  border: 0;
}

dialog.image-dialog .image-lightbox.output-view img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

dialog.image-dialog .note {
  font-size: var(--text-small);
  line-height: 1.6;
}

dialog.image-dialog button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media(max-width:767px){
dialog.image-dialog {
  width: 94vw;
  max-width: 94vw;
  padding: var(--space-4);
}

dialog.image-dialog .image-lightbox {
  height: 65vh;
  padding: var(--space-2);
  border: 0;
}

dialog.image-dialog .image-lightbox.output-view {
  height: auto;
  max-height: 65vh;
  width: min(100%,calc(65vh * var(--image-ratio)));
}

}
@media(max-width:1023px){
.workspace.studio-workspace {
  --studio-preview-height: 560px;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 0;
}

.studio-workspace .studio-preview-column {
  position: static;
}

.studio-workspace .gown-upload-grid {
  grid-template-columns: minmax(0,2fr) minmax(120px,1fr);
}

.studio-workspace .choices {
  gap: var(--space-3);
}

.studio-workspace .model-choices .choice img {
  max-height: 230px;
}

.studio-workspace .scene-choices .choice img {
  max-height: 145px;
}

.studio-workspace .studio-generation .generate button {
  max-width: 320px;
}

}
@media(max-width:767px){
.workspace.studio-workspace {
  --studio-preview-height: 480px;
}

.studio-heading {
  margin-bottom: var(--space-5);
  gap: var(--space-3);
}

.studio-progress {
  gap: var(--space-3) var(--space-4);
  font-size: var(--text-small);
  margin-bottom: var(--space-4);
}

.studio-workspace .panel {
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}

.studio-workspace .gown-upload-grid {
  grid-template-columns: minmax(0,1fr);
}

.studio-workspace .gown-main-slot .upload {
  height: 240px;
  min-height: 240px;
  flex: auto;
}

.studio-workspace .gown-detail-list {
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--space-2);
}

.studio-workspace .image-slot-meta {
  gap: var(--space-1);
  flex-wrap: wrap;
  font-size: var(--text-small);
  align-content: start;
}

.studio-workspace .image-slot-meta>div {
  justify-content: flex-start;
}

.studio-workspace .choices {
  gap: var(--space-2);
}

.studio-workspace .choice .caption {
  padding: var(--space-2) var(--space-2);
  font-size: var(--text-small);
}

.studio-workspace .choice .caption small {
  font-size: var(--text-small);
}

.studio-workspace .choice.selected:after {
  top: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  line-height: 18px;
}

.studio-workspace .ratio-options {
  gap: var(--space-1);
}

.studio-workspace .image-stage.full-view {
  padding: var(--space-2);
}

.studio-workspace .preview-tools button {
  padding: var(--space-2) var(--space-2);
  border: 0;
  color: var(--color-primary-hover);
}

.studio-workspace .studio-generation .generate {
  flex-wrap: wrap;
  gap: var(--space-3);
  border-top: 0;
}

.studio-workspace .studio-generation .generate>div {
  flex: 1;
}

.studio-workspace .studio-generation .generate button {
  flex-basis: 100%;
  max-width: none;
  min-height: 48px;
}

}
@media(max-width:380px){
.workspace.studio-workspace {
  --studio-preview-height: 420px;
}

.studio-workspace .panel {
  padding: var(--space-6);
}

.studio-workspace .ratio-options {
  grid-template-columns: repeat(3,minmax(0,1fr));
}

.studio-workspace .preview-tools button {
  font-size: var(--text-small);
  padding: var(--space-2);
  border: 0;
  color: var(--color-primary-hover);
}

}

/* Existing generation controls become the mobile action bar; no duplicate submit action. */
.studio-workspace .selection-summary { line-height: 1.6; }
.studio-workspace .generation-status { margin: var(--space-1) 0 0; font-size: var(--text-small); color: var(--color-muted); }
.studio-workspace .generate > div { flex: 1; }
.studio-workspace .generate button { flex: 1; }
.studio-workspace .choice {
  border-radius: var(--radius-control);
  border: 0;
}
.studio-workspace .choice.selected .caption { color: var(--color-primary-hover); font-weight: 600; }
.studio-workspace .ratio-option.selected::after { content: '✓'; font-size: 12px; }
.studio-workspace .ratio-option { flex-direction: row; gap: var(--space-1); }
.studio-workspace .upload .ui-icon { width: 28px; height: 28px; margin-bottom: var(--space-3); color: var(--color-primary); }
.studio-workspace .gown-main-slot .upload { padding: var(--space-6); }
.studio-workspace .preview-tools { gap: var(--space-2); }
.studio-workspace .preview-tools button[aria-pressed=true] { font-weight: 600; }
.studio-workspace .image-stage {
  border-radius: var(--radius-control);
  border: 0;
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .studio-workspace .choices { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .studio-workspace .ratio-options { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .studio-workspace .generate { flex-wrap: wrap; }
  .studio-workspace .generate button { flex-basis: 100%; }
}
@media (max-width: 767px) {
  .main:has(.studio-workspace) { padding-bottom: calc(var(--mobile-action-height, 176px) + var(--space-6)); }
  .studio-workspace .panel { padding: var(--space-6); }
  .studio-workspace .paneltitle { gap: var(--space-2); }
  .studio-workspace .choices { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-3); }
  .studio-workspace .ratio-options { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-2); }
  .studio-workspace .gown-detail-list { gap: var(--space-2); }
  .studio-workspace .image-slot-meta > div { flex-direction: column; align-items: stretch; }
  .studio-workspace .image-slot-meta button { width: 100%; padding-inline: var(--space-1); }
  .studio-workspace .preview-tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .studio-workspace .preview-tools button:last-child { margin-left: 0; grid-column: 1 / -1; }
  .studio-workspace .studio-generation .generate {
    position: fixed; inset: auto 0 0; z-index: 5;
    display: grid; grid-template-columns: minmax(0,1fr) minmax(136px,1fr);
    align-items: center; gap: var(--space-3); margin: 0;
    padding: var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom));
    background: var(--color-bg); border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 20px #1D1D1F0A;
  }
  .studio-workspace .studio-generation .generate strong { font-size: 20px; }
  .studio-workspace .studio-generation .generate button { width: 100%; padding: var(--space-3); white-space: normal; }
  .studio-workspace .studio-generation .generate .muted { font-size: var(--text-small); }
  body:has(input:not([type=file]):focus, textarea:focus, select:focus) .studio-generation .generate { position: static; box-shadow: none; border: 0; padding: 0; }
}

.studio-workspace .gown-main-slot .image-slot-meta{justify-content:flex-end}