@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#111311;--panel:#1c1f1c;--border:#343831;--muted:#a4aba0;--ink:#f3f5ee;--lime:#d7fa52}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:16px}button,input{font:inherit}button,a,label.upload{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,.portrait:focus-visible{outline:2px solid var(--lime);outline-offset:5px}button{color:inherit}a{color:inherit;text-decoration:none}header{height:98px;border-bottom:1px solid var(--border);padding:0 5%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:13px;font-size:36px;font-weight:800}.brand>span{font-size:20px;letter-spacing:-.7px}.brand small{display:block;font-size:10px;letter-spacing:2px;margin-top:2px;color:var(--muted)}.demo-label{font-size:12px;letter-spacing:1.6px;color:var(--muted)}.demo-label span{margin-left:10px;background:var(--panel);padding:6px 9px;border-radius:5px}.saved-toggle{border:1px solid var(--border);border-radius:30px;background:none;padding:11px 16px;font-size:14px}.saved-toggle span{margin-left:14px;color:var(--lime)}main{max-width:1560px;margin:auto;padding:36px 5% 0}.intro{display:flex;align-items:end;justify-content:space-between;margin-bottom:30px}.eyebrow{font-size:12px;letter-spacing:1.8px;font-weight:700;margin:0 0 9px;color:var(--lime)}h1{font-family:Manrope,sans-serif;font-weight:500;font-size:42px;letter-spacing:-1.7px;margin:0}h2{margin:0;font-size:18px;font-weight:500}.intro>p{color:var(--muted);font-size:15px;line-height:1.7;margin:0}.workspace{display:grid;grid-template-columns:240px minmax(300px,1fr) 290px;gap:28px;align-items:start}.section-title{display:flex;gap:9px;align-items:center;margin-bottom:24px}.section-title h2{font-size:16px}.step{font-size:12px;color:var(--muted);border:1px solid var(--border);padding:5px;border-radius:50%}.count{font-size:12px;color:var(--muted);margin-left:auto}.setup{padding-top:8px}.profile-preview{width:100px;height:118px;margin:24px auto 15px;border:1px dashed #687451;border-radius:50%;background:radial-gradient(ellipse at bottom,#343e22,transparent);display:grid;place-items:center;overflow:hidden}.profile-initial{font-size:14px;letter-spacing:3px;color:var(--muted)}.profile-preview img{width:100%;height:100%;object-fit:cover}.profile-label{text-align:center;margin:0 0 7px;font-weight:500}.muted{color:var(--muted);font-size:14px;line-height:1.6}.center{text-align:center;margin:0 0 20px}.button{display:flex;justify-content:center;align-items:center;padding:13px 18px;min-height:46px;border:0;border-radius:7px;font-size:14px;font-weight:700;text-align:center}.primary{background:var(--lime);color:#1b2112}.upload{cursor:pointer}.text-button{background:none;border:0;font-size:14px;color:var(--muted);width:100%;padding:14px 0}.text-button:hover{color:var(--ink)}.how-note{border-top:1px solid var(--border);margin-top:20px;padding-top:22px}.how-note>span,.mini-label{font-size:11px;letter-spacing:1.4px;color:var(--muted)}.how-note p{font-size:14px;line-height:1.6}.how-note small,.closet-note small{color:var(--muted);font-size:12px;line-height:1.7;display:block}.slider{display:flex;align-items:center;justify-content:space-between;font-size:13px;padding:7px 0;gap:8px}.slider input{width:115px;accent-color:var(--lime)}.fitting-room{background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden}.room-header{display:flex;justify-content:space-between;padding:15px 20px;color:#bdc5b6;letter-spacing:1.3px;font-size:10px}.portrait{position:relative;margin:0 12px;background:#e3e3e1;aspect-ratio:2/3;max-height:510px;overflow:hidden;touch-action:pan-y;border-radius:7px}.look-image{position:absolute;inset:0;background-image:url('assets/real-clothing-tryon.png');background-repeat:no-repeat;background-size:300% 100%;background-position:0% center}.look-number{position:absolute;left:17px;top:16px;color:#333831;font-size:12px;letter-spacing:1px}.image-credit{position:absolute;right:12px;bottom:14px;font-size:9px;letter-spacing:1.4px;color:#4c5148;writing-mode:vertical-rl}.look-info{display:flex;justify-content:space-between;align-items:center;padding:19px 24px 12px}.look-info .eyebrow{font-size:10px;letter-spacing:1.5px;margin-bottom:7px}.look-info h2{font-size:23px;letter-spacing:-.7px}.heart{background:none;border:1px solid #4f5548;border-radius:50%;width:43px;height:43px;font-size:26px}.heart[aria-pressed=true]{background:var(--lime);color:#1b2112;border-color:var(--lime)}.swipe-controls{display:flex;justify-content:space-between;align-items:center;padding:5px 24px 17px;color:var(--muted);font-size:12px}.circle{border:1px solid var(--border);background:none;width:36px;height:36px;border-radius:50%;font-size:21px}.circle:hover{background:#343d28}.closet{padding-top:8px}.filters{display:flex;gap:8px;margin-bottom:18px}.filters button{background:none;border:1px solid var(--border);border-radius:25px;padding:8px 16px;font-size:13px;color:var(--muted)}.filters .active{background:var(--ink);color:#20251b;border-color:var(--ink)}.outfits{display:grid;gap:12px}.outfit{display:flex;gap:15px;align-items:center;padding:9px;background:var(--panel);border:1px solid transparent;border-radius:9px;min-height:119px;text-align:left;width:100%}.outfit.active{border-color:var(--lime)}.thumb{background-image:url('assets/real-clothing-tryon.png');background-size:300% 100%;width:67px;height:101px;flex-shrink:0;border-radius:5px;background-color:#ddd}.outfit strong{display:block;font-size:15px;font-weight:500}.outfit small{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin:6px 0}.outfit em{font-style:normal;color:var(--lime);font-size:11px}.closet-note{margin-top:28px;padding:22px 0;border-top:1px solid var(--border)}.closet-note p{font-size:14px;margin:10px 0}.empty{color:var(--muted);font-size:14px;line-height:1.8;min-height:145px}footer{display:flex;justify-content:space-between;padding:23px 0;color:var(--muted);font-size:12px}footer button{background:none;border:0;color:var(--muted);font-size:12px}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);border:1px solid var(--border);border-radius:30px;background:var(--ink);color:var(--bg);padding:13px 22px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:10}.toast.show{opacity:1}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.upload:has(+input:focus-visible){outline:2px solid white;outline-offset:3px}dialog{background:var(--panel);color:var(--ink);border:1px solid var(--border);border-radius:14px;max-width:490px;width:calc(100% - 32px);padding:35px}dialog::backdrop{background:#000b}dialog h2{font-size:27px;margin:15px 0}dialog p:not(.eyebrow){color:var(--muted);font-size:15px;line-height:1.7}.close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:25px}.error{font-size:13px;color:#ffb4a1;line-height:1.5}.error:empty{display:none}[hidden]{display:none!important}@media(min-width:1350px){.workspace{grid-template-columns:250px minmax(300px,1fr) 330px;gap:42px}.portrait{max-height:570px}.setup{padding:8px 12px}}@media(max-width:1050px){main{padding:28px 3% 0}header{padding:0 3%}.workspace{grid-template-columns:190px minmax(260px,1fr) 230px;gap:16px}.outfit{gap:10px}.outfit strong{font-size:14px}.intro>p{font-size:14px}.profile-preview{margin-top:18px}.room-header{font-size:9px;padding:14px}.look-info{padding:17px}.look-info h2{font-size:20px}.swipe-controls{padding:5px 17px 15px}.how-note{margin-top:12px}.slider input{width:95px}}@media(max-width:790px){header{height:76px;padding:0 20px}.brand{font-size:29px}.brand>span{font-size:17px}.brand small{font-size:8px}.demo-label{display:none}.saved-toggle{font-size:12px;padding:9px 12px}main{padding:25px 18px 0}.intro{margin-bottom:23px}.intro>p{display:none}h1{font-size:31px}.eyebrow{font-size:10px}.workspace{display:flex;flex-direction:column;gap:20px}.setup{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:0 12px;width:100%;padding:0}.setup .section-title,.setup .center,.setup .how-note,.setup .text-button,.setup .profile-label{display:none}.profile-preview{width:54px;height:62px;margin:0;grid-column:1;grid-row:1}.profile-initial{font-size:10px}.upload{grid-column:2;grid-row:1;max-width:220px;justify-self:start}.setup .error{grid-column:1/-1}.setup #adjustments{grid-column:1/-1;width:100%;margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.setup #adjustments .eyebrow{grid-column:1/-1}.slider{display:block}.slider input{width:95%;margin-top:6px}.setup #adjustments .text-button{display:block;grid-column:1/-1;text-align:left;padding:4px 0}.fitting-room{width:100%;max-width:490px;margin:auto}.portrait{max-height:none;aspect-ratio:2/3}.closet{width:100%}.closet .section-title{margin-bottom:12px}.outfits{grid-template-columns:repeat(3,1fr);gap:8px}.outfit{display:block;padding:7px;min-width:0}.thumb{width:100%;height:auto;aspect-ratio:2/3;margin-bottom:11px}.outfit strong{font-size:13px}.outfit small{font-size:11px}.outfit em{font-size:10px}.closet-note{margin-top:18px;padding-bottom:5px}.closet-note small{max-width:430px}footer{font-size:10px;gap:8px}footer button{font-size:11px}dialog{padding:26px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Preserve the catalog portraits' natural proportions. */
.portrait{aspect-ratio:1/2;width:calc(100% - 24px);max-width:270px;max-height:none;margin:0 auto}.thumb{height:112px;width:56px}@media(min-width:1350px){.portrait{max-width:285px}}@media(max-width:790px){.portrait{max-width:270px}.thumb{width:100%;height:auto;aspect-ratio:1/2}}
.view-switch{display:flex;gap:5px;margin:0 18px 14px;padding:4px;background:#111311;border-radius:8px}.view-switch button{flex:1;background:none;border:0;color:var(--muted);padding:9px 7px;border-radius:5px;font-size:14px}.view-switch button.active{background:var(--lime);color:#20251b}.original-photo{width:100%;height:100%;object-fit:contain;position:absolute;inset:0;background:#e7e7e5}.portrait.original-view{max-width:calc(100% - 24px);aspect-ratio:1/1;min-height:350px;max-height:570px}.source-row{padding:0 24px 14px;font-size:12px;color:var(--muted)}.source-row a{text-decoration:underline;text-underline-offset:3px}.thumb{object-fit:contain;background:#e7e7e5;width:78px;height:104px}.image-credit{background:#ffffffb0;padding:5px;border-radius:3px}.look-number{background:#ffffffb0;padding:5px;border-radius:3px}.outfit strong{line-height:1.4}.look-info h2{font-size:21px}@media(max-width:790px){.portrait.original-view{min-height:0;aspect-ratio:1/1}.thumb{width:100%;height:auto;aspect-ratio:1/1}.look-info h2{font-size:20px}}

/* Minimal, avatar-first fitting room. */
header{height:76px}.header-actions{display:flex;align-items:center;gap:16px}.info-button{border:0;background:none;color:var(--muted);font-size:23px;padding:8px}.saved-toggle{font-size:20px;padding:7px 14px}.saved-toggle span{font-size:13px;margin-left:8px}main{padding-top:28px;padding-bottom:28px}.workspace{grid-template-columns:160px minmax(300px,1fr) 260px;max-width:1080px;margin:auto;gap:32px}.setup{padding-top:16px}.profile-preview{margin:0 auto 20px}.profile-initial{font-size:30px;letter-spacing:0}.view-switch{margin-top:14px}.look-info{padding:16px 22px 8px}.look-info h2{font-size:20px}.swipe-controls{padding-top:0}.swipe-controls a{color:var(--muted);padding:12px}.outfit{min-height:108px;gap:13px}.outfit strong{font-size:14px}.filters{margin-bottom:14px}.image-credit{writing-mode:horizontal-tb;bottom:10px;right:10px;font-size:8px;letter-spacing:1px}.look-number{font-size:10px;left:10px;top:10px}.setup #adjustments{margin-top:16px}
@media(max-width:1050px) and (min-width:791px){.workspace{grid-template-columns:130px minmax(260px,1fr) 210px;gap:20px}.thumb{width:60px}.slider{flex-wrap:wrap}.slider input{width:100%}}
@media(max-width:790px){header{height:64px}.workspace{display:flex;gap:18px}.setup{padding:0;grid-template-columns:44px 1fr}.profile-preview{width:42px;height:48px;margin:0}.profile-initial{font-size:22px}.upload{min-height:40px;padding:10px 20px}.header-actions{gap:8px}.view-switch{margin-top:12px}.outfit{min-height:0}.outfit strong{font-size:12px}.outfit .thumb{margin-bottom:6px}.look-info h2{font-size:19px}main{padding-top:16px}.filters{margin-bottom:10px}}

.generated-avatar{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#e3e3e1}.portrait:has(.generated-avatar:not([hidden])),.portrait:has(.avatar-placeholder:not([hidden])){aspect-ratio:2/3;max-width:360px}.avatar-placeholder{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;background:#252a22;color:var(--muted);font-size:16px}#avatarControls .button{width:100%;margin-top:12px}button:disabled{opacity:.6;cursor:wait}#generationStatus{font-size:14px;line-height:1.5}@media(max-width:790px){#avatarControls,#generationStatus{grid-column:1/-1}.setup #avatarControls .text-button{display:block}}

.catalog-tools{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;color:var(--muted);font-size:14px}.catalog-tools select{background:var(--panel);border:1px solid var(--border);color:var(--ink);border-radius:6px;font:inherit;padding:8px;min-width:120px}.closet .outfits{max-height:650px;overflow-y:auto;padding-right:5px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.photo-strip{display:flex;gap:6px;overflow-x:auto;padding:12px 18px 0;scrollbar-width:thin}.photo-angle{flex:0 0 48px;width:48px;height:58px;background:var(--panel);border:1px solid transparent;border-radius:5px;padding:2px}.photo-angle.active{border-color:var(--lime)}.photo-angle img{width:100%;height:100%;object-fit:contain}.filters{display:flex;gap:8px}.outfit strong{font-size:14px}@media(max-width:790px){.closet .outfits{max-height:520px;grid-template-columns:repeat(3,minmax(0,1fr))}.catalog-tools{margin-top:5px}.outfit strong{font-size:14px}.fitting-room{position:relative}.closet{padding-bottom:20px}}
.archive-open{border:0;background:none;color:var(--muted);font-size:14px;padding:8px}.archive-toolbar{display:flex;align-items:center;gap:16px;margin:20px 0;color:var(--muted);font-size:14px}.archive-toolbar select{background:var(--bg);color:var(--ink);border:1px solid var(--border);border-radius:6px;padding:9px;font:inherit}#archiveDialog{max-width:1100px;max-height:90vh;overflow:auto}.archive-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:20px}.archive-grid a{display:grid;place-items:center;aspect-ratio:3/4;background:var(--bg);border-radius:6px;overflow:hidden;font-size:12px;padding:4px;overflow-wrap:anywhere}.archive-grid img{width:100%;height:100%;object-fit:contain}.button:disabled{opacity:.45;cursor:not-allowed}#generationStatus{font-size:13px;line-height:1.5}@media(max-width:790px){.archive-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.header-actions{gap:3px}.archive-open{padding:5px}.brand>span{font-size:16px}#avatarControls{grid-column:1/-1}#generationStatus{grid-column:1/-1}.setup #avatarControls .text-button{display:block}}

.view-switch button:disabled{opacity:.4;cursor:not-allowed}

.generation-progress{height:8px;width:100%;margin:18px 0 12px;overflow:hidden;border-radius:8px;background:#343b2a}.generation-progress span{display:block;width:35%;height:100%;border-radius:inherit;background:var(--lime);animation:avatar-loading 1.5s ease-in-out infinite}@keyframes avatar-loading{0%,100%{transform:translateX(0)}50%{transform:translateX(185%)}}@media(prefers-reduced-motion:reduce){.generation-progress span{animation:none;width:100%;opacity:.65}}@media(max-width:790px){.generation-progress{grid-column:1/-1}}

/* Isolated garments, with no campaign-photo fallback. */
.original-photo{padding:24px;background:#e7e7e5}.thumb{padding:6px;background:#e7e7e5;background-image:none}.portrait.original-view{aspect-ratio:2/3;max-width:360px;min-height:0;max-height:none}.image-credit,.look-number{font-size:12px}.swipe-controls{gap:16px}.view-switch button:disabled{cursor:not-allowed}

/* Full-frame portraits: the clothing and dressed image share the same large stage. */
.workspace{max-width:1280px;grid-template-columns:160px minmax(360px,1fr) 280px}
.portrait,.portrait.original-view,.portrait:has(.generated-avatar:not([hidden])),.portrait:has(.avatar-placeholder:not([hidden])){width:calc(100% - 32px);max-width:none;aspect-ratio:2/3;min-height:0;max-height:none;margin:0 16px}
.original-photo{padding:0;object-fit:contain}
@media(max-width:1050px) and (min-width:791px){.workspace{grid-template-columns:130px minmax(280px,1fr) 210px;gap:16px}}
@media(max-width:790px){.workspace{display:flex}.fitting-room{max-width:560px}.setup #retryAvatar{display:block;grid-column:1/-1;text-align:left}}

/* Original references stay beside their clothing cutout. */
.fitting-room{min-width:0}
.source-gallery{border-top:1px solid var(--border);padding:16px 18px 18px}
.source-gallery h3{margin:0 0 12px;font-size:14px;font-weight:500;color:var(--muted)}
.source-photos{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--muted) var(--bg)}
.source-photos:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.source-photo{display:block;padding:0;cursor:pointer;flex:0 0 100px;height:132px;overflow:hidden;border:1px solid var(--border);border-radius:6px;background:var(--bg);scroll-snap-align:start}
.source-photo:hover,.source-photo[aria-pressed="true"]{border-color:var(--lime)}
.source-photo:focus-visible{outline-offset:-3px}
.source-photo img{display:block;width:100%;height:100%;object-fit:contain}

.generate-avatar{width:100%;margin-top:18px;white-space:normal;line-height:1.4}.generate-avatar:disabled{opacity:.65;cursor:wait}.generation-elapsed{font-size:14px;line-height:1.5}@media(max-width:790px){.generate-avatar,.generation-elapsed,#generationStatus{grid-column:1/-1}}

/* Personal clothing uploads and the saved closet. */
.closet-open{width:100%;margin-top:12px;background:var(--panel);border:1px solid var(--lime);color:var(--lime)}
#personalClosetDialog{max-width:760px;max-height:90dvh;overflow:auto}
#personalClosetDialog h2{margin-top:0}
#personalClosetDialog .upload{width:100%;max-width:none}
#personalClosetDialog .upload:has(+input:disabled){opacity:.5;cursor:wait}
#closetImportProgress{width:100%;height:12px;accent-color:var(--lime)}
#closetImportStatus{font-size:14px;overflow-wrap:anywhere}
#closetImportStatus:empty{display:none}
.personal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.personal-card{display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:9px;min-width:0}
.personal-card>img,.pending-cutout{width:100%;aspect-ratio:1;object-fit:contain;background:#e7e7e5;border-radius:5px}
.pending-cutout{display:grid;place-items:center;color:#333831;font-size:14px}
.personal-card input,.personal-card select{width:100%;min-width:0;background:var(--panel);color:var(--ink);border:1px solid var(--border);border-radius:5px;padding:9px;font:inherit;font-size:14px}
.personal-card .text-button{margin-top:auto;padding:6px 0}
@media(max-width:790px){.setup .closet-open{grid-column:1/-1;margin-top:12px;justify-self:stretch}.personal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:380px){.personal-grid{grid-template-columns:1fr}}

/* Keep avatar creation beside its result, above the full-size photo. */
.avatar-action-panel{margin:16px;padding:18px 20px;background:#293021;border:1px solid #697d35;border-radius:12px;display:grid;gap:10px}
.avatar-action-panel:not(:has(#generateAvatar:not([hidden]),#generationStatus:not([hidden]),#uploadError:not(:empty))){display:none}
.avatar-action-panel .generate-avatar{margin:0;min-height:52px;font-size:17px}
.avatar-action-panel .generation-progress{margin:2px 0;height:10px}
.avatar-action-panel p{margin:0;font-size:14px;line-height:1.5}
.avatar-action-panel .text-button{justify-self:start;padding:4px 0}
@media(max-width:790px){.avatar-action-panel{margin:12px;padding:14px}.avatar-action-panel .generate-avatar{font-size:16px}}

.outfit-details{flex:1;min-width:0}.outfit-generating{display:block;margin-top:10px;color:var(--lime);font-size:14px}.outfit .outfit-progress{display:block;width:100%;height:6px;margin:8px 0 0}.outfit[aria-busy="true"]{border-color:var(--lime);background:#293021}
/* One quiet processing state, with actual completed-piece counts. */
#personalClosetDialog.import-busy{max-width:440px}
#personalClosetDialog.import-busy .closet-upload-copy,#personalClosetDialog.import-busy .upload{display:none}
#closetImportProgress{height:8px;margin:28px 0 18px}
#personalClosetDialog #closetImportStatus{font-size:16px;line-height:1.5}
#personalClosetDialog #closetImportDetail{font-size:14px;line-height:1.6;margin-bottom:4px}

.personal-sidebar{width:100%;margin-top:24px}.personal-sidebar-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.personal-sidebar h2{font-size:22px;margin:0}.personal-sidebar-heading span{color:var(--muted);font-size:14px}.personal-sidebar .closet-open{width:100%;margin:0 0 16px}.personal-sidebar .outfits{max-height:70vh;overflow-y:auto}.personal-item-status{display:block;margin-top:7px;color:var(--muted);font-size:13px;line-height:1.4}.personal-pending{display:grid;place-items:center;background-image:none;color:#454a40;font-size:12px}.personal-sidebar .outfit{min-height:112px}.personal-sidebar>p{font-size:14px;line-height:1.5}
@media(min-width:1051px){.workspace{max-width:1440px;grid-template-columns:260px minmax(360px,1fr) 280px}}
@media(max-width:790px){.personal-sidebar{grid-column:1/-1}.personal-sidebar .outfits{display:flex;overflow-x:auto;max-height:none;padding-bottom:8px}.personal-sidebar .outfit{flex:0 0 155px}.personal-sidebar .closet-open{display:block}.personal-sidebar .personal-sidebar-heading{margin-top:8px}}

.mix-selection{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:15px;line-height:1.5}.mix-selection .text-button{flex-shrink:0;color:var(--lime)}.avatar-action-panel:has(#mixSelection:not([hidden])){display:grid}

/* Fit each sprite cell uniformly inside the stage without stretching the model. */
.portrait{container-type:size}
.look-image{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100cqw,calc(100cqh * var(--sample-ratio, .5)));height:min(100cqh,calc(100cqw / var(--sample-ratio, .5)))}
/* One compact action row, with garment names inside the button. */
.avatar-action-panel{padding:12px;gap:8px;grid-template-columns:minmax(0,1fr) auto}
.avatar-action-panel .generate-avatar{grid-column:1;grid-row:1;min-width:0;min-height:48px;padding:10px 16px;font-size:16px;line-height:1.35;white-space:normal;overflow-wrap:break-word}
.avatar-action-panel .mix-selection{grid-column:2;grid-row:1;align-self:center;display:block;font-size:14px}
#mixSelectionText{display:none}.mix-selection #clearMix{width:auto;margin:0;padding:8px;font-size:14px;white-space:nowrap}
.avatar-action-panel:has(#mixSelection[hidden]){grid-template-columns:minmax(0,1fr)}
.avatar-action-panel>#generationProgress,.avatar-action-panel>p,.avatar-action-panel>#retryAvatar{grid-column:1/-1}
.avatar-action-panel:has(#generateAvatar:not([hidden])) #generationStatus{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.avatar-action-panel .generation-progress{height:6px;margin:0}.avatar-action-panel .generation-elapsed{font-size:13px}
@media(max-width:540px){.avatar-action-panel{margin:10px;padding:10px;column-gap:4px}.avatar-action-panel .generate-avatar{font-size:14px;padding:9px}.mix-selection #clearMix{font-size:12px;padding:5px}}

#closetUploadPreview{display:block;max-width:100%;width:180px;max-height:180px;object-fit:contain;margin:18px auto;border-radius:12px}
#closetUploadPreview[hidden],#retryClosetImport[hidden]{display:none}
/* Match the sample studio's cool gray instead of pale side gutters. */
.portrait:has(.look-image:not([hidden])){background:#c6c7c9}

.closet-background-note{display:none;font-size:14px;line-height:1.5;color:var(--ink)}#personalClosetDialog.import-busy .closet-background-note{display:block}