#wardrobe-dialog{width:min(800px,calc(100% - 32px));max-height:min(780px,calc(100dvh - 32px));padding:0;overflow:hidden}
#wardrobe-dialog[open]{display:flex;flex-direction:column}
#wardrobe-dialog .dialog-heading{padding:24px;margin:0;flex-shrink:0}
.wardrobe-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start;padding:0 24px 24px;overflow:auto;min-height:0;overscroll-behavior:contain;scroll-padding:16px}
.avatar-stage{position:sticky;top:0;background:#e7edf7;border-radius:16px;overflow:hidden}
#avatar-preview{display:block;width:100%;height:280px;touch-action:none}
.avatar-stage p{text-align:center;font-size:12px;line-height:1.4;padding:0 12px 16px;margin:0;color:#58677e}
#appearance-options{display:grid;gap:20px}
#appearance-options fieldset{border:0;padding:0;margin:0;min-width:0}
#appearance-options legend{font-size:13px;font-weight:800;margin-bottom:10px;color:#263a58}
.swatches{display:flex;flex-wrap:wrap;gap:10px;padding:3px}
.swatch{width:44px;height:44px;border:3px solid #fff;border-radius:11px;cursor:pointer;box-shadow:0 0 0 1px #b9c4d7;flex-shrink:0}
.swatch[aria-pressed=true]{outline:3px solid #345cda;outline-offset:2px}
.hair-options{display:flex;gap:8px;flex-wrap:wrap}
.hair-options button{border:1px solid #bbc8db;background:#edf2f8;color:#263a58;padding:10px 13px;border-radius:10px;min-height:44px;font-size:13px;font-weight:700;cursor:pointer}
.hair-options button[aria-pressed=true]{background:#345cda;color:#fff;border-color:#345cda}
.hair-hint{font-size:12px;line-height:1.5;color:#58677e;margin:10px 0 0}
.wardrobe-footer{position:relative;flex-shrink:0;background:#f8fbff;border-top:1px solid #dce3ee;padding:16px 24px;margin:0;display:grid;gap:10px}
.wardrobe-footer-actions{display:flex;justify-content:flex-end;gap:10px}
.wardrobe-footer .button{padding:0 20px;min-height:48px}
#wardrobe-feedback{font-size:13px;line-height:1.5;color:#a13030;margin:0}
#wardrobe-feedback:empty{display:none}
.swatch:active,.hair-options button:active{transform:scale(.97)}
@media(max-width:560px) and (orientation:portrait){
 #wardrobe-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}
 #wardrobe-dialog .dialog-heading{padding:20px}
 #wardrobe-dialog .dialog-heading h2{font-size:25px}
 .wardrobe-layout{grid-template-columns:1fr;gap:20px;padding:0 20px 24px}
 .avatar-stage{position:relative;top:auto;display:grid;grid-template-columns:116px 1fr;align-items:center;min-height:136px}
 #avatar-preview{height:136px}
 .avatar-stage p{text-align:left;font-size:12px;max-width:18ch;padding:12px 16px 12px 0}
 #appearance-options{gap:18px}
 .swatches{gap:9px}
 .wardrobe-footer{padding:14px 20px}
 .wardrobe-footer-actions{display:grid;grid-template-columns:auto 1fr}
 .wardrobe-footer .button{padding:0 14px;font-size:14px}
}
@media(orientation:landscape) and (max-height:520px){
 #wardrobe-dialog{max-height:calc(100dvh - 20px)}
 #wardrobe-dialog .dialog-heading{padding:12px 18px}
 #wardrobe-dialog .dialog-heading h2{font-size:22px}
 #wardrobe-dialog .dialog-heading .eyebrow{display:none}
 .wardrobe-layout{grid-template-columns:150px minmax(0,1fr);gap:18px;padding:0 18px 18px}
 #avatar-preview{height:170px}
 .avatar-stage p{font-size:11px;padding:0 8px 12px}
 .wardrobe-footer{padding:10px 18px}
 .wardrobe-footer .button{min-height:44px}
}