/* Mobile editing uses document flow instead of squeezing two panels into one viewport. */
@media(max-width:780px){
 main{height:auto;min-height:0;grid-template-rows:auto auto auto;padding:8px;gap:10px}
 main .preview,main[data-step="0"] .preview{height:auto;min-height:0;overflow:visible;padding:10px;align-self:start}
 main .preview .stage,main[data-step="0"] .preview .stage{flex:none;width:100%;aspect-ratio:var(--studio-ratio);min-height:0;display:block}
 main .preview #view{width:100%!important;height:auto!important;max-height:none;display:block}
 main .preview>*{flex-shrink:0}
 #controls{height:auto;min-height:0;padding:12px}.step-body,#controls .step-body{overflow:visible;flex:none;max-height:none;padding:0 4px 12px}
 .studio-mobile-controls{flex-wrap:wrap;gap:6px;margin-bottom:8px}.studio-mobile-controls span{width:100%;line-height:1.4;font-size:11px}
 .paint-toolbar{margin-top:8px;padding-top:8px;display:flex;flex-direction:column;gap:6px}
 #paintTitle{display:block;font-size:13px;line-height:1.4;margin:0}
 .paint-toolbar p,.paint-toolbar label{line-height:1.4;margin:0}
 #avatarAutoControls{border:0;margin:0;padding:0}#avatarAutoControls{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:6px 10px;padding:0}
 #avatarAutoControls>.hint{display:none}#avatarAutoControls>label[for=avatarTolerance]{font-size:12px;display:flex;justify-content:space-between;gap:8px}
 #avatarTolerance{width:100%;margin:8px 0}#avatarAutoControls>label:last-child{grid-column:1/-1;font-size:11px}
 #avatarSelectionControls{padding:0;gap:8px;font-size:11px}.paint-actions{margin:0;gap:5px}.paint-actions .photo-paint-icon{width:36px;height:36px;min-height:36px;padding:6px}
 #avatarWholeControls{padding:0}#avatarWholeControls>span{margin-bottom:4px}
 .avatar-area-hint{height:auto;min-height:0;overflow:visible;font-size:12px;line-height:1.5;margin:6px 0 10px}
 #status{font-size:11px;line-height:1.4;margin:6px 0}
}
#studioWorkspaceOpen{font-size:11px;min-height:36px;padding:7px 10px}.studio-workspace-dialog{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0;padding:12px;border:0;background:#fff8fd;color:var(--text)}.studio-workspace-dialog[open]{display:flex;flex-direction:column;gap:8px}.studio-workspace-dialog::backdrop{background:#32113e99}.studio-workspace-bar{display:flex;align-items:center;justify-content:space-between;gap:8px}.studio-workspace-bar strong{font-size:14px}.studio-workspace-bar button{min-height:40px;font-size:12px}.studio-workspace-dialog .stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;background:#f5eaf7;border-radius:12px}.studio-workspace-dialog #view{object-fit:contain;max-width:100%;max-height:100%;touch-action:none}.studio-workspace-dialog .paint-toolbar{flex:none;min-height:0;margin:0;padding-top:6px}.studio-workspace-dialog #paintTitle,.studio-workspace-dialog #status{display:none}.studio-workspace-dialog #avatarAutoControls{margin:0;padding:0;border:0}.studio-workspace-dialog #avatarAutoControls{padding:0}.studio-workspace-dialog #avatarAutoControls>.hint{display:none}

.studio-mobile-controls{display:flex;justify-content:flex-end;gap:6px;margin-bottom:8px;flex-shrink:0}.studio-workspace-dialog .avatar-area-method{margin:0}@media(max-width:780px){#avatarWholeControls{margin:4px 0}#avatarSelectionControls{padding:0;gap:8px}#avatarSelectionControls label{font-size:11px}.avatar-paint-icon{width:36px;height:36px;min-height:36px;padding:6px}.avatar-area-hint{height:auto;overflow:visible}.studio-workspace-dialog .stage{aspect-ratio:auto}}