.portrait-source-wrap{margin:-4px 0 22px;min-width:0}
.portrait-source{display:flex;width:min(100%,360px);padding:4px;border:1px solid var(--line);border-radius:30px;background:#fffaf6}
.portrait-source button{flex:1;min-height:40px;padding:8px 16px;border-radius:24px;font-size:13px;color:var(--muted)}
.portrait-source button.active{background:var(--rose);color:#fff}
.portrait-demo-note{margin-top:10px;color:var(--muted);font-size:12px;line-height:1.7}
.portrait-demo-note>span,.portrait-confirm-note>span{display:inline-block;padding:1px 8px;margin-right:6px;background:#f1e6dd;border-radius:6px;color:#947565;font-size:11px}
.image-fitting-layout.portrait-fitting-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);grid-template-areas:'stage library' 'stage picker' 'details details';gap:22px;align-items:start}
.portrait-fitting-layout>.portrait-stage{grid-area:stage;width:100%;height:560px}
.portrait-fitting-layout>.portrait-library{grid-area:library;min-width:0}
.portrait-fitting-layout>.fitting-picker{grid-area:picker}
.portrait-fitting-layout>.image-fit-details{grid-area:details;display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,250px);column-gap:24px;row-gap:12px;border-top:1px solid var(--line);padding-top:18px}
.portrait-fitting-layout .image-source-note{grid-column:1}
.portrait-fitting-layout .fitting-selected{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;align-items:start;gap:9px}
.portrait-fitting-layout .fitting-selected>.selected-item{width:104px}
.portrait-fitting-layout .image-fit-actions{grid-column:2;grid-row:1 / span 2;align-self:center}
.portrait-fitting-layout .image-fit-links{grid-column:2}
.portrait-fitting-layout .image-fit-details>.preview-boundary,.portrait-fitting-layout .image-job-error{grid-column:1 / -1}
.portrait-stage{isolation:isolate}
.portrait-stage>canvas{display:block;width:100%;height:100%;object-fit:contain;padding:36px 0 54px}
.portrait-stage .image-reference-note{z-index:2;background:#fffaf4eb;padding:8px 12px;border-radius:10px;font-size:11px;line-height:1.6;bottom:12px;left:12px;right:12px}
.portrait-stage-badge{position:absolute;top:14px;left:14px;padding:4px 10px;background:#fffaf4e8;color:var(--rose-dark);font-size:11px;border-radius:20px;z-index:2}
.portrait-stage .view-image-btn{top:12px;bottom:auto;right:12px;left:auto;font-size:11px}
.portrait-canvas-error{position:absolute;inset:40% 12px auto;text-align:center;color:var(--rose-dark);background:var(--paper);padding:12px;font-size:12px}
.portrait-empty{display:flex;align-items:center;justify-content:center;text-align:center;padding:28px}
.portrait-empty>div{display:flex;align-items:center;flex-direction:column;max-width:300px;gap:14px}
.portrait-empty>div>.icon{width:44px;height:44px;color:#ac9788;margin-bottom:6px}
.portrait-empty h2{font:22px var(--serif)}
.portrait-empty p{color:var(--muted);font-size:13px;line-height:1.7}
.portrait-empty .primary{min-width:190px}
.portrait-empty .text-btn{min-height:38px}
.portrait-library-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.portrait-library h2{font:19px var(--serif)}
.portrait-library-heading small,.portrait-library-hint{color:var(--muted);font-size:11px}
.portrait-library-hint{margin:5px 0 12px}
.portrait-photos{display:flex;gap:10px;overflow-x:auto;padding:3px 2px 8px;scrollbar-width:thin}
.portrait-photo{position:relative;flex:0 0 91px;min-width:0;border:1px solid var(--line);border-radius:10px;background:#fffdfb}
.portrait-photo.selected{border-color:var(--rose);box-shadow:0 0 0 1px var(--rose)}
.portrait-photo>button:first-child{display:block;width:100%;text-align:left;overflow:hidden;border-radius:9px}
.portrait-photo canvas{display:block;width:100%;height:108px;background:#f4eee6;object-fit:contain}
.portrait-name{display:block;padding:6px 7px;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.portrait-check{position:absolute;left:5px;top:5px;display:flex;align-items:center;justify-content:center;background:var(--rose);color:#fff;border-radius:50%;width:21px;height:21px;pointer-events:none}
.portrait-check .icon{width:14px;height:14px;stroke-width:2}
.portrait-delete{position:absolute;right:1px;top:1px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fffaf4d9;color:#80695a}
.portrait-delete .icon{width:15px;height:15px}
.portrait-add{flex:0 0 76px;min-height:142px;border:1px dashed #d9c5b8;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:var(--muted);font-size:11px;background:#fffaf6}
.portrait-add .icon{width:24px;height:24px}
.modal.portrait-upload-modal{max-width:510px}
.portrait-upload-description{font-size:13px;line-height:1.8;color:var(--ink)}
.portrait-upload-privacy{font-size:12px;line-height:1.8;color:var(--muted);margin:8px 0 16px}
.portrait-file-input{position:absolute;width:1px;height:1px;padding:0;border:0;clip-path:inset(50%);overflow:hidden}
.portrait-file-pick{display:flex;gap:8px;align-items:center;justify-content:center;min-height:48px;border:1px dashed #d8b7ab;background:#fffaf6;border-radius:12px;color:var(--rose-dark);font-size:13px;cursor:pointer}
.portrait-file-input:focus-visible+label{outline:2px solid var(--rose);outline-offset:3px}
.portrait-file-pick .icon{width:18px;height:18px}
.portrait-upload-rows{display:grid;gap:10px;margin-top:16px;max-height:330px;overflow:auto}
.portrait-upload-row{display:flex;gap:12px;align-items:center;min-height:80px;border:1px solid var(--line);padding:10px;border-radius:12px}
.portrait-upload-thumb{display:flex;align-items:center;justify-content:center;width:45px;height:57px;flex:0 0 45px;background:#f3ebe2;border-radius:6px;overflow:hidden;color:#b19d8e}
.portrait-upload-thumb canvas{display:block;width:100%;height:100%;object-fit:contain}
.portrait-upload-info{min-width:0;flex:1}
.portrait-upload-info strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;font-size:12px}
.portrait-upload-info p{font-size:11px;color:var(--muted);line-height:1.5;margin-top:5px;overflow-wrap:anywhere}
.portrait-upload-info .portrait-upload-error{color:#ad5b51}
.portrait-upload-row-actions{display:flex;flex-direction:column;gap:5px;flex:0 0 auto}
.portrait-upload-row-actions .text-btn{font-size:12px;min-height:28px;padding:0 4px}
.portrait-upload-row-actions>.icon{width:18px;height:18px;color:#738c63}
.portrait-progress{height:4px;border-radius:4px;overflow:hidden;background:#efe5dd;margin-top:7px}
.portrait-progress>span{height:100%;display:block;background:var(--rose);transition:width .15s}
.portrait-upload-footer{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.portrait-upload-footer>.text-btn{align-self:center;font-size:11px;min-height:30px}
.portrait-upload-footer>.primary{width:100%;min-height:46px}
.portrait-confirm-note{font-size:12px;line-height:1.8;color:var(--muted);margin-bottom:20px}
.portrait-confirm-summary{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--rose)}
.portrait-confirm-summary>div:first-child{flex:0 0 105px;min-width:0}
.portrait-confirm-summary canvas{width:105px;height:136px;display:block;object-fit:contain;border:1px solid var(--line);border-radius:10px;background:#f4eee6}
.portrait-confirm-summary small{font-size:11px;line-height:1.5;display:block;color:var(--muted);margin-top:6px;overflow-wrap:anywhere;text-align:center}
.portrait-confirm-clothes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:200px}
.portrait-confirm-clothes>div{border:1px solid var(--line);border-radius:9px;background:#fffaf6;padding:8px;min-width:0}
.portrait-confirm-clothes>div>span{display:block;text-align:center;color:#b39d8d}
.portrait-confirm-clothes .garment{height:64px;width:100%;border-radius:6px}
.portrait-confirm-copy{margin:20px 0;font-size:12px;line-height:1.8;color:var(--muted);overflow-wrap:anywhere}
.portrait-confirm-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.portrait-confirm-actions>*{min-width:0;padding:11px 12px;min-height:46px;font-size:12px}
.portrait-failure-choice{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:11px;margin-top:16px;min-height:32px}
.portrait-failure-choice>input{width:15px;height:15px;accent-color:var(--rose)}
.modal.portrait-photo-modal{max-width:650px}
.portrait-large-canvas{display:block;width:100%;height:min(68dvh,720px);object-fit:contain;background:#f4eee6;border-radius:12px}
@media(min-width:551px){.portrait-fitting-layout:not(:has(>.portrait-library)){grid-template-areas:'stage picker' 'details details'}.portrait-fitting-layout .fitting-catalog{flex-wrap:wrap;max-height:290px;overflow:auto}.portrait-fitting-layout .fit-option{width:calc(33.333% - 8px);min-width:80px}.portrait-fitting-layout .fit-option .garment{height:100px}}
@media(max-width:550px){
  .portrait-source-wrap{margin:-2px 0 16px}.portrait-source{width:100%}.portrait-source button{min-height:40px;font-size:13px}
  .portrait-demo-note{font-size:11px;line-height:1.8}
  .image-fitting-layout.portrait-fitting-layout{display:flex;flex-direction:column;gap:20px}
  .portrait-fitting-layout>.portrait-stage{height:260px;min-height:240px;width:100%}
  .portrait-fitting-layout>.portrait-library{width:100%}
  .portrait-library h2{font-size:18px}.portrait-library-heading small{font-size:11px}
  .portrait-library-hint{font-size:11px;margin-bottom:9px}.portrait-photo{flex-basis:78px}.portrait-photo canvas{height:94px}.portrait-name{font-size:10px}.portrait-add{min-height:128px;flex-basis:72px}
  .portrait-fitting-layout>.image-fit-details{display:flex;flex-direction:column;width:100%;gap:12px;border-top:0;padding-top:0}
  .portrait-fitting-layout .fitting-selected{display:flex;gap:8px}.portrait-fitting-layout .fitting-selected>.selected-item{width:calc(25% - 6px)}
  .portrait-fitting-layout .image-fit-actions{display:flex;position:fixed;left:19px;right:19px;bottom:calc(74px + env(safe-area-inset-bottom));width:auto;z-index:11;align-self:auto;gap:9px;padding:10px;background:#fbf8f5f5;border:1px solid var(--line);border-radius:18px;box-shadow:0 -5px 24px #6841320b}.portrait-fitting-layout .image-fit-links{align-self:center}
  body:has(.portrait-fitting-layout) .main-wrap{padding-bottom:calc(190px + env(safe-area-inset-bottom))}
  .portrait-stage .image-reference-note{font-size:11px;bottom:10px;left:10px;right:10px}
  .portrait-empty{padding:24px}.portrait-empty h2{font-size:22px}.portrait-empty p{font-size:12px}
  .modal.portrait-upload-modal{padding:24px 20px}.portrait-upload-modal .modal-head{top:-24px}
  .modal-backdrop:has(>.portrait-upload-modal){align-items:flex-end;padding:0}
  .modal.portrait-upload-modal{max-width:550px;max-height:90dvh;border-radius:24px 24px 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .portrait-upload-modal:before{content:'';display:block;width:34px;height:4px;border-radius:4px;background:#dfd5cd;margin:-12px auto 16px}
  .portrait-upload-rows{max-height:300px}.portrait-upload-row{padding:9px;gap:9px}.portrait-upload-row-actions .text-btn{min-height:32px}
  .portrait-confirm-summary{gap:12px}.portrait-confirm-summary>div:first-child{flex-basis:92px}.portrait-confirm-summary canvas{width:92px;height:120px}
}
@media(min-width:551px){
  .portrait-fitting-layout>.portrait-stage{height:clamp(400px,calc(100dvh - 440px),560px)}
  .portrait-fitting-layout .image-fit-actions{flex-direction:row;gap:10px}
  .portrait-fitting-layout .image-fit-actions .secondary{width:auto;flex:0 0 82px;padding:11px 8px}
  .portrait-fitting-layout .image-fit-actions .primary{width:auto;flex:1;padding:11px 12px}
  .portrait-fitting-layout .fitting-selected>.selected-item{width:180px;display:grid;grid-template-columns:50px minmax(0,1fr);align-items:center}
  .portrait-fitting-layout .fitting-selected .garment{height:56px}
  .portrait-fitting-layout .fitting-selected .selected-item p{font-size:11px;padding:6px 24px 6px 8px}
}