/* Three preview-only generation modes: Normal, Fine and Realistic beta.
 * Preserve existing studio typography, glass states and component sizing. */
#creationQuality .creation-quality-options{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
#creationQuality .creation-quality-btn{min-height:48px}
/* Generation internals are never part of customer-facing Create 3D World. */
#creationModal[data-kind="world"] #creationDialogDesc,
#creationModal[data-kind="world"] #creationMultiviewCaption,
#creationModal[data-kind="world"] #creationNote{display:none!important}
#creationQuality .creation-quality-btn small{font-size:10px;line-height:1.45}
#creationLanguageField[hidden],
#creationMultiviewCaption[hidden]{display:none!important}
.creation-options label.creation-language-field{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:10px;
  align-items:start;
  margin-top:14px;
}
.creation-language-field>span{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding-top:8px;
}
.creation-language-field>span small{
  color:#777e7c;
  font-weight:400;
  font-size:10px;
  line-height:1.5;
}
#creationLanguagePrompt{
  display:block;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:95px;
  resize:vertical;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:9px;
  background:#1a1c1d;
  color:#d6d7d2;
  font:inherit;
  font-size:12px;
  line-height:1.6;
}
#creationLanguagePrompt:focus{
  outline:none;
  border-color:rgba(238,201,127,.65);
}
body#daailokStudio[data-theme="light"] #creationLanguagePrompt,
body#daailokStudio.light-mode #creationLanguagePrompt{
  background:#f8f9fa;color:#202427;border-color:#c4c8ca;
}
@media(max-width:540px){
  .creation-options label.creation-language-field{
    grid-template-columns:1fr;gap:4px;
  }
  .creation-language-field>span{padding-top:0}
}

#creationModal .creation-actions:has(#creationInsertBtn[hidden]){
  grid-template-columns:1fr;
}


/* World creation: both actions are neutral at rest, liquid glass on hover,
   yellow light only during press/focus; non-world dialogs keep original UI. */
#creationModal[data-kind="world"] .creation-actions{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
#creationModal[data-kind="world"] .creation-actions button{
  color:var(--ds-studio-text-base,#e4e6e2)!important;
  background:linear-gradient(150deg,rgba(255,255,255,.095),
    rgba(255,255,255,.025))!important;
  border:1px solid rgba(217,224,220,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
    0 4px 16px rgba(0,0,0,.13)!important;
  backdrop-filter:blur(16px) saturate(135%);
  -webkit-backdrop-filter:blur(16px) saturate(135%);
  transition:background .22s ease,border-color .22s ease,box-shadow .22s ease!important;
}
#creationModal[data-kind="world"] .creation-actions button:hover:not(:disabled){
  color:#fff!important;
  background:linear-gradient(140deg,rgba(255,255,255,.18),
    rgba(255,255,255,.055) 55%,rgba(237,193,101,.052))!important;
  border-color:rgba(240,216,163,.45)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),
    0 0 13px rgba(239,198,111,.08)!important;
  filter:none!important;
}
#creationModal[data-kind="world"] .creation-actions button:active{
  color:#201808!important;
  background:linear-gradient(170deg,#ffe5a2,#eebf69)!important;
  box-shadow:0 0 14px rgba(238,197,100,.20)!important;
}
#creationModal[data-kind="world"] .creation-actions button:disabled{opacity:.46;cursor:wait}

/* Align all content inside the 3D-world dialog to the same optical axis.
   The prior single-sided stable scrollbar gutter made the right side wider. */
#creationModal[data-kind="world"] .creation-dialog{
  --world-create-inline-gutter:22px;
  box-sizing:border-box!important;
  scrollbar-gutter:stable both-edges!important;
}
#creationModal[data-kind="world"] :is(.creation-head,.creation-upload,.creation-options,.creation-actions){
  box-sizing:border-box!important;
  padding-left:var(--world-create-inline-gutter)!important;
  padding-right:var(--world-create-inline-gutter)!important;
}
#creationModal[data-kind="world"] .creation-reference-grid{
  margin-inline:auto!important;
}
@media(max-width:520px){
  #creationModal[data-kind="world"] .creation-dialog{
    --world-create-inline-gutter:14px;
  }
}