/* Keep the preview and all editing controls inside the dialog viewport. */
.art-editor{width:min(1000px,96vw);height:min(740px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);max-width:96vw;overflow:hidden;margin:auto;padding:0}
.art-editor[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.art-editor>header{padding:12px 18px;gap:12px;align-items:center;min-width:0}
.art-editor>header small{font-size:11px;letter-spacing:.08em}
.art-editor>header h2{font-size:22px;line-height:1.2;margin:2px 0}
.art-editor .editor-help{font-size:14px;margin:3px 0 0}
.art-editor [data-close]{width:36px;height:36px;flex-shrink:0;line-height:1;padding:0;cursor:pointer}
.art-editor .editor-body{min-height:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:16px;padding:16px;overflow:hidden}
.art-editor .mockup{min-height:0;min-width:0;height:100%;width:auto;max-width:100%;aspect-ratio:2/3;justify-self:center;align-self:center;overflow:hidden;border-radius:8px}
.art-editor .mockup>.shirt{display:block;width:100%;height:100%;object-fit:contain}
.art-editor .adjust{min-height:0;min-width:0;display:flex;flex-direction:column;gap:9px;padding:6px 0;overflow:hidden;align-self:start}
.art-editor .adjust label{font-size:15px;line-height:1.3;gap:12px}
.art-editor .adjust .zoom{width:100%;margin:3px 0 5px;min-height:22px}
.art-editor .adjust>p{font-size:14px;line-height:1.4;margin:0 0 3px}
.art-editor .position-controls{gap:6px;grid-template-columns:repeat(3,minmax(0,1fr));margin:2px 0}
.art-editor .position-controls button{min-height:36px;padding:7px 4px;font-size:15px;line-height:1.2;cursor:pointer}
.art-editor .adjust>button{min-height:38px;padding:8px 10px;font-size:14px;line-height:1.25;cursor:pointer}
.art-editor>footer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:12px 18px;align-items:center;margin:0;min-width:0}
.art-editor>footer p{font-size:14px;line-height:1.3;margin:0}
.art-editor>footer small{display:none}
.art-editor [data-confirm]{min-height:40px;padding:10px 16px;white-space:nowrap;font-size:14px;cursor:pointer}
@media(max-height:600px) and (min-width:641px){.art-editor>header{padding:8px 16px}.art-editor>header small{display:none}.art-editor>header h2{font-size:20px}.art-editor .editor-body{padding:10px;gap:12px}.art-editor .adjust{gap:5px;padding:0}.art-editor .position-controls button{min-height:30px;padding:5px}.art-editor .adjust>button{min-height:32px;padding:6px}.art-editor>footer{padding:8px 16px}}
@media(max-width:640px){
 .art-editor{width:calc(100vw - 16px);max-width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)}
 .art-editor>header{padding:8px 12px}.art-editor>header h2{font-size:19px}.art-editor>header small{display:none}.art-editor .editor-help{font-size:12px}
 .art-editor .editor-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:8px;padding:8px}
 .art-editor .mockup{height:100%;max-height:100%;max-width:100%}
 .art-editor .adjust{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px;padding:0;align-self:stretch}
 .art-editor .adjust label,.art-editor .adjust .zoom,.art-editor .adjust>p{grid-column:1/-1}
 .art-editor .adjust label{font-size:13px}.art-editor .adjust>p{font-size:12px;line-height:1.3;margin:0}.art-editor .adjust .zoom{margin:0;min-height:20px}
 .art-editor .position-controls{grid-column:1;grid-row:4/span 2;gap:4px;margin:0}.art-editor .position-controls button{min-height:28px;padding:4px 2px;font-size:12px}
 .art-editor .adjust>[data-background]{grid-column:2;grid-row:4}.art-editor .adjust>[data-reset]{grid-column:2;grid-row:5}
 .art-editor .adjust>button{font-size:12px;padding:5px 7px;min-height:36px}
 .art-editor>footer{padding:9px 12px;gap:8px}.art-editor>footer p{font-size:12px}.art-editor [data-confirm]{padding:9px 12px;font-size:12px;min-height:38px}
}

.art-editor>header{width:100%;max-width:none;margin:0;box-sizing:border-box}