.swap-clothes-action[data-status=uploading] .action-content .upload-container,.swap-clothes-action[data-status=swapping] .action-content .upload-container,.swap-clothes-action[data-status=segmenting] .action-content .upload-container{pointer-events:none}.swap-clothes-action[data-status=uploading] .action-content .clothes-container .clothes-tabs .item,.swap-clothes-action[data-status=swapping] .action-content .clothes-container .clothes-tabs .item,.swap-clothes-action[data-status=segmenting] .action-content .clothes-container .clothes-tabs .item{pointer-events:none}.swap-clothes-action[data-status=uploading] .action-content .clothes-container .clothes-template .template-item,.swap-clothes-action[data-status=swapping] .action-content .clothes-container .clothes-template .template-item,.swap-clothes-action[data-status=segmenting] .action-content .clothes-container .clothes-template .template-item{pointer-events:none}.swap-clothes-action[data-status=uploading] .mobile-upload #upload-action-2,.swap-clothes-action[data-status=swapping] .mobile-upload #upload-action-2,.swap-clothes-action[data-status=segmenting] .mobile-upload #upload-action-2{pointer-events:none !important;background-color:var(--primary-button-disabled-bgcolor) !important}.swap-clothes-action[data-status=done] .action-content .upload-container .toolbar{display:flex}.action-content{display:flex;flex-direction:row;justify-content:center;margin-top:var(--spacing-regular);gap:1rem;width:100%;height:600px}.action-content .box{padding:var(--spacing-xxsmall);height:100%;border:2px solid rgba(168,85,247,.2);background-color:var(--background-color-regular);border-radius:var(--border-radius-small);backdrop-filter:blur(1rem)}.button-container{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;pointer-events:all}.button-container.mobile{display:none;margin:10px}.button-container .button{display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-small);text-decoration:none}.button-container .button svg{width:1rem;height:1rem}.button-container .cost{display:flex;justify-content:center;visibility:hidden;color:rgba(248,250,252,.7);text-align:center;font-size:var(--font-size-xsmall)}.swap-btn{position:relative;background-image:linear-gradient(to right, #9333ea, #4f46e5);box-shadow:0 0 rgba(0,0,0,0),0 0 rgba(0,0,0,0),0 10px 15px -3px rgba(168,85,247,.2),0 4px 6px -4px rgba(168,85,247,.2);height:50px;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;cursor:pointer}.swap-btn[s-disabled]{pointer-events:none;background-image:none}.swap-btn[s-disabled] .btn-mask{display:none}.swap-btn .btn-mask{position:absolute;inset:0;background-image:linear-gradient(to right, rgba(168, 85, 247, 0.2), rgba(99, 102, 241, 0.2));transform:translateX(-100%)}.swap-btn:hover{box-shadow:0 0 rgba(0,0,0,0),0 0 rgba(0,0,0,0),0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}.swap-btn:hover .btn-mask{animation:btn-mask-hover 1s cubic-bezier(0.4, 0, 0.2, 1);animation-fill-mode:forwards}@keyframes btn-mask-hover{0%{transform:translateX(0%)}50%{transform:translateX(100%)}100%{transform:translateX(0%)}}.upload-container{position:relative;width:500px;cursor:pointer}.upload-container[s-disabled]{pointer-events:none}.upload-container .toolbar{width:90%;position:absolute;top:25px;transform:translateX(-50%);left:50%;z-index:9;display:none;flex-direction:row;align-items:center;gap:10px;color:#fff;pointer-events:all}.upload-container .toolbar .icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background-color:rgba(150,150,150,.3);backdrop-filter:blur(1rem);border-radius:999px;transition:all .2s ease;color:#fff !important}.upload-container .toolbar .icon svg{width:20px;height:20px}.upload-container .toolbar .icon:active{scale:.95}.upload-container .toolbar .icon.delete{margin-right:auto}.upload-container .image{position:relative;width:100%;height:100%;min-height:500px;background-image:linear-gradient(to bottom right, #312e81, #581c87);border:2px dashed rgba(104,18,243,.5);border-radius:var(--spacing-xsmall)}.upload-container .image img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}.upload-container .image img:not([src]),.upload-container .image img[src=""]{opacity:0;z-index:-1}.upload-container .image img:not([src]).origin~.icon,.upload-container .image img[src=""].origin~.icon{opacity:1}.upload-container .image .icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-xsmall);color:#fff;width:max-content;opacity:0}.upload-container .image .icon svg{width:2rem;height:2rem;color:var(--site-theme-color)}.upload-container .image .icon p{margin:0;text-align:center}.upload-container .image .icon p.title-1{font-weight:bold;font-size:var(--font-size-regular)}.upload-container .image .icon p.title-2{font-size:var(--font-size-xsmall);color:rgba(248,250,252,.7)}.clothes-container{display:flex;flex-direction:column;justify-content:space-between;gap:1rem;width:400px;background-image:linear-gradient(to bottom right, rgba(88, 28, 135, 0.8), rgba(49, 46, 129, 0.8))}.clothes-tabs{display:flex;flex-direction:row;gap:5px;padding:5px;color:#fff;background-color:rgba(0,0,0,.3);border-radius:14px}.clothes-tabs .item{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;flex:1;gap:5px;padding:8px 5px;font-size:14px;cursor:pointer;border-radius:var(--border-radius-small);transition:all .2s ease}.clothes-tabs .item[s-active]{scale:.98;background-image:linear-gradient(to right, #a855f7, #6366f1)}.clothes-tabs .item[s-disabled]{pointer-events:none}.clothes-tabs .item.super-swap[s-active]{background-image:linear-gradient(to right, #ec4899, #3b82f6)}.clothes-tabs .item:hover:not([s-active]){background-color:rgba(251,207,232,.1)}.clothes-tabs .item .icon{display:flex;align-items:center;justify-content:center}.clothes-tabs .item .icon svg{width:20px;height:20px}.clothes-tabs .item .tag{position:absolute;top:-15px;right:-5px;padding:2px 8px;color:#fff;background-image:linear-gradient(to right, #3b82f6, #9333ea);font-size:var(--font-size-small);border-radius:999px;transition:all .2s ease}.clothes-tabs-tab{display:none}.clothes-tabs-tab[s-active]{display:flex}.clothes-template{flex-wrap:wrap;justify-content:center;gap:.5rem;overflow-y:auto}.clothes-template .template-item{width:calc(33% - .5rem);border:5px solid rgba(0,0,0,0);border-radius:var(--border-radius-small);overflow:hidden;aspect-ratio:1/1;transition:all .2s ease;cursor:pointer}.clothes-template .template-item:hover{border-color:#c146ca;border-style:solid !important}.clothes-template .template-item:hover img{scale:1.05}.clothes-template .template-item[s-active]{border-style:solid !important;border-color:#c146ca}.clothes-template .template-item.upload{position:relative;border-style:dashed;border-color:#c146ca;color:var(--site-theme-color);overflow:visible}.clothes-template .template-item.upload .icon{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);display:flex;align-items:center;justify-content:center;padding:10px;background-color:rgba(104,18,243,.4);border-radius:999px}.clothes-template .template-item.upload .clear{position:absolute;bottom:-10px;right:-10px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;background-color:#f2f4f5;border-radius:999px;box-shadow:0 0 5px #c5c5c5;color:#000}.clothes-template .template-item.upload .image{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--border-radius-small)}.clothes-template .template-item.upload .image:not([src]),.clothes-template .template-item.upload .image[src=""]{opacity:0}.clothes-template .template-item.upload .image:not([data-url])~.clear,.clothes-template .template-item.upload .image[data-url=""]~.clear{display:none}.clothes-template .template-item img{width:100%;height:100%;transition:scale .2s ease}.clothes-template .template-item.hide{border:none;height:0}@media screen and (max-width: 600px){.swap-clothes-action .action-content{flex-direction:column-reverse;height:auto}.swap-clothes-action .action-content .clothes-container{width:100%}.upload-container{width:100%}.upload-container .toolbar{top:auto;right:5px}.clothes-template{padding-bottom:1rem;flex-wrap:nowrap;justify-content:flex-start;overflow-y:visible;overflow-x:auto;scrollbar-width:none}.clothes-template .template-item{width:80px;height:80px;flex-shrink:0}.clothes-template .template-item.hide{display:none}}