.tryon-page{min-height:100vh;background:linear-gradient(180deg,#f5f3ff,#fff 50%,#f5f3ff);padding:var(--spacing-2xl) 0}.tryon-container{max-width:1440px;margin:0 auto;padding:0 var(--spacing-2xl)}.tryon-page-header{text-align:center;margin-bottom:var(--spacing-lg)}.tryon-page-title{font-size:var(--text-lg);font-weight:700;line-height:1.5;color:var(--color-text-primary);margin:0;padding-top:var(--spacing-xl)}.tryon-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:var(--spacing-md);gap:var(--spacing-md);justify-content:center;align-items:start;max-width:800px;margin:0 auto}.column-left,.column-right{display:flex;flex-direction:column;gap:var(--spacing-md)}.tryon-block{background:#fff;border-radius:var(--radius-lg);border:1px solid var(--color-panel);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);padding:var(--spacing-lg);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}.tryon-block:hover{box-shadow:0 25px 50px -12px rgba(168,85,247,.6),0 8px 16px -8px rgba(168,85,247,.6);transform:translateY(-2px)}.block-header{margin-bottom:var(--spacing-md)}.block-title{font-size:var(--text-base);font-weight:600;color:var(--color-text-primary);margin:0}.upload-zone{position:relative;width:100%;height:200px;border:2px dashed var(--color-panel);border-radius:var(--radius-md);background-color:var(--color-subtle);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;display:flex;align-items:center;justify-content:center}.upload-zone:hover{border-color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 5%,transparent)}.upload-zone.dragover{border-color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 10%,transparent)}.upload-content{flex-direction:column;text-align:center;padding:var(--spacing-lg);color:var(--color-text-secondary)}.upload-content,.upload-icon-wrapper{display:flex;align-items:center;justify-content:center}.upload-icon-wrapper{width:48px;height:48px;background-color:var(--color-primary);border-radius:50%;margin-bottom:var(--spacing-md);color:#fff}.upload-icon-wrapper svg{width:24px;height:24px}.upload-text{font-size:var(--text-base);font-weight:500;color:var(--color-text-primary);margin:0 0 var(--spacing-xs) 0}.upload-hint{font-size:var(--text-sm);line-height:1.4;color:var(--color-text-secondary);margin:0}.file-input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:1}.uploaded-image{width:100%;height:100%;object-fit:cover}.remove-button{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);width:24px;height:24px;background:var(--color-error);border:none;border-radius:50%;cursor:pointer;color:#fff;font-size:var(--text-sm);font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:2}.remove-button:hover{background:color-mix(in srgb,var(--color-error) 80%,#000);transform:scale(1.1)}.upload-zone.has-image{border-color:var(--color-primary)}.garment-chips{display:flex;gap:var(--spacing-sm)}.chip{flex:1 1;height:70px;border:1px solid var(--color-panel);border-radius:var(--radius-md);background:var(--color-base);cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-sm)}.chip:hover{transform:translateY(-2px)}.chip.active,.chip:hover{border-color:var(--color-primary)}.chip.active{background:var(--color-primary);color:#fff}.chip-emoji{font-size:var(--text-xl)}.chip-label{font-size:var(--text-sm);font-weight:500}.chip.active .chip-label{color:#fff}.block-action{flex-direction:column;min-height:164px}.block-action,.cta-button{display:flex;align-items:center;justify-content:center}.cta-button{width:100%;height:50px;border:none;border-radius:var(--radius-md);background:var(--color-primary);color:#fff;cursor:pointer;transition:all .2s;gap:var(--spacing-sm);box-shadow:var(--shadow-sm)}.cta-button:disabled{opacity:.5;cursor:not-allowed}.cta-button:not(:disabled):hover{background:var(--color-secondary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.button-content{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--text-base);font-weight:500}.result-view{max-width:900px;margin:0 auto;max-height:calc(100vh - 100px);overflow-y:auto}.result-block{background:hsla(0,0%,100%,.7);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-radius:var(--radius-xl);border:1px solid hsla(0,0%,100%,.5);box-shadow:var(--shadow-lg);padding:var(--spacing-xl);max-height:calc(100vh - 120px);overflow-y:auto}.result-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-lg)}.result-header h2{font-size:var(--text-2xl);color:var(--color-text-primary)}.result-actions{display:flex;flex-wrap:wrap;gap:var(--spacing-md);margin-top:var(--spacing-lg)}.result-button{padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);font-size:var(--text-base);font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:var(--spacing-sm);border:1px solid transparent}.result-button-primary{background:var(--color-primary);color:#fff}.result-button-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);background:var(--color-secondary)}.result-button-secondary{background:transparent;border-color:var(--color-primary);color:var(--color-primary)}.result-button-secondary:hover{background:color-mix(in srgb,var(--color-primary) 10%,transparent)}.result-info{margin-top:var(--spacing-lg);background:color-mix(in srgb,var(--color-info) 10%,transparent);border:1px solid color-mix(in srgb,var(--color-info) 20%,transparent);border-radius:var(--radius-md);color:var(--color-text-secondary)}.error-message,.result-info{padding:var(--spacing-md);font-size:var(--text-sm)}.error-message{margin-bottom:var(--spacing-md);background:color-mix(in srgb,var(--color-error) 10%,transparent);border:1px solid color-mix(in srgb,var(--color-error) 20%,transparent);border-radius:var(--radius-md);color:var(--color-error);display:flex;align-items:start;gap:var(--spacing-sm)}@media (max-width:768px){.tryon-grid{grid-template-columns:1fr}.result-view{max-height:calc(100vh - 80px)}.result-block{max-height:calc(100vh - 100px);padding:var(--spacing-lg)}.result-block .mb-6{margin-bottom:var(--spacing-md)!important}}.result-image-container{position:relative;cursor:pointer;transition:transform .2s ease}.result-image-container:hover{transform:scale(1.01)}.bg-black\/80{background-color:rgba(0,0,0,.8)}.bg-black\/40{background-color:rgba(0,0,0,.4)}.hover\:bg-black\/60:hover{background-color:rgba(0,0,0,.6)}.bg-purple-600\/90{background-color:rgba(147,51,234,.9)}.hover\:bg-purple-600:hover{background-color:#9333ea}.backdrop-blur-sm{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}.w-10{width:2.5rem}.h-10{height:2.5rem}.w-4{width:1rem}.h-4{height:1rem}.w-6{width:1.5rem}.h-6{height:1.5rem}.top-4{top:1rem}.right-4{right:1rem}.left-4{left:1rem}.bottom-6{bottom:1.5rem}.right-6{right:1.5rem}.z-20{z-index:20}.gap-3{gap:.75rem}.hover\:scale-110:hover{transform:scale(1.1)}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.overflow-auto{overflow:auto}.w-auto{width:auto}.h-full{height:100%}.w-full{width:100%}@media (max-width:768px){.w-10{width:2rem}.h-10{height:2rem}.gap-3{gap:.5rem}}