#outfit-dialog { width:min(540px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); box-sizing:border-box; overflow:auto; padding:20px; border:3px solid var(--ink); border-radius:12px; background:var(--parchment); color:var(--ink); box-shadow:var(--bevel),var(--ledge); font:14px/1.45 var(--read); text-shadow:none; }
#outfit-dialog::backdrop { background:rgb(20 35 28 / 65%); }
#outfit-dialog h2 { margin:0 0 8px; color:var(--leaf-deep); font:20px/1.4 var(--blocks); }
#outfit-dialog p { margin:8px 0; }
.outfit-layout { display:grid; grid-template-columns:180px 1fr; gap:18px; align-items:center; }
.outfit-stage { text-align:center; border-radius:10px; background:rgb(184 157 90 / 12%); }
.outfit-stage canvas { width:180px; height:240px; max-width:100%; display:block; margin:auto; }
.outfit-stage canvas[hidden] { display:none; }
.outfit-preview-note,.outfit-hint { font-size:12px; }
.outfit-choices label { display:block; font-weight:700; margin:9px 0; }
.outfit-choice { display:flex; align-items:center; gap:8px; margin-top:3px; }
.outfit-swatch { flex:0 0 22px; height:22px; border:2px solid var(--ink); border-radius:5px; }
#outfit-dialog select { min-width:0; width:100%; min-height:40px; padding:6px; border:1px solid var(--ink); border-radius:5px; background:var(--paper); color:var(--ink); font:14px var(--read); }
.outfit-actions { display:flex; gap:10px; margin-top:12px; }
#outfit-dialog button { min-height:44px; padding:8px 15px; font:700 14px var(--read); border:2px solid var(--ink); border-radius:6px; cursor:pointer; }
#outfit-dialog .outfit-save { background:var(--evergreen); color:var(--paper); }
.outfit-status { min-height:20px; }
#outfit-dialog :focus-visible { outline:3px solid var(--leaf-deep); outline-offset:2px; }
@media(max-width:420px) { #outfit-dialog { padding:12px; } .outfit-layout { grid-template-columns:100px 1fr; gap:10px; } .outfit-stage canvas { width:100px; height:134px; } }