html,body,#root{width:100%;min-height:100vh;margin:0;padding:0}body{background:#f8f7f4;display:block}#root{text-align:left;max-width:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:#171717;background:#f7f6f2;margin:0;font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}.app{min-height:100vh}.navbar{background:#f7f6f2;border-bottom:1px solid #deddd8;justify-content:space-between;align-items:center;height:76px;padding:0 6vw;display:flex}.logo{letter-spacing:5px;font-size:25px;font-weight:800}.navbar a{color:#171717;font-size:14px;text-decoration:none}.login-button{cursor:pointer;background:0 0;border:1px solid #171717;border-radius:999px;padding:11px 20px}.hero{grid-template-columns:1fr .8fr;align-items:center;gap:80px;max-width:1400px;min-height:650px;margin:0 auto;padding:80px 6vw;display:grid}.hero-content{max-width:620px}.eyebrow{letter-spacing:3px;margin-bottom:25px;font-size:12px;font-weight:700}h1{letter-spacing:-5px;margin:0 0 30px;font-size:clamp(58px,7vw,96px);font-weight:700;line-height:.94}h1 span{font-style:italic;font-weight:400}.hero-text{color:#66635e;max-width:500px;margin-bottom:35px;font-size:18px;line-height:1.6}.upload-button{color:#fff;cursor:pointer;background:#171717;border-radius:999px;padding:17px 30px;font-size:15px;font-weight:600;transition:transform .2s,background .2s;display:inline-block}.upload-button:hover{background:#333;transform:translateY(-2px)}.privacy-text{color:#88847d;margin-top:15px;font-size:12px}.hero-preview{aspect-ratio:4/5;background:#e8e6df;width:100%;max-height:600px;position:relative;overflow:hidden}.hero-preview img{object-fit:cover;width:100%;height:100%;display:block}.preview-placeholder{color:#77736c;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.placeholder-icon{margin-bottom:15px;font-size:50px;font-weight:200}.preview-placeholder p{font-size:14px}.steps{border-top:1px solid #deddd8;grid-template-columns:repeat(3,1fr);max-width:1400px;margin:0 auto;display:grid}.steps>div{border-right:1px solid #deddd8;padding:45px 6vw}.steps>div:last-child{border-right:none}.steps span{color:#8b877f;letter-spacing:2px;font-size:12px}.steps h3{margin:18px 0 10px;font-size:24px}.steps p{color:#77736c;margin:0;line-height:1.5}@media (width<=800px){.navbar{padding:0 25px}.navbar nav{gap:15px}.navbar nav a{display:none}.hero{grid-template-columns:1fr;gap:45px;padding:55px 25px}h1{letter-spacing:-3px;font-size:58px}.hero-preview{max-height:500px}.steps{grid-template-columns:1fr}.steps>div{border-bottom:1px solid #deddd8;border-right:none;padding:35px 25px}.steps>div:last-child{border-bottom:none}}.clothing-section{border-top:1px solid #deddd8;max-width:1400px;margin:0 auto;padding:100px 6vw}.section-heading{margin-bottom:45px}.section-heading h2{letter-spacing:-3px;margin:8px 0 15px;font-size:clamp(42px,5vw,64px)}.section-heading>p:last-child{color:#77736c;font-size:16px}.clothing-card{text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;padding:0;transition:transform .2s,border-color .2s}.clothing-card:hover{transform:translateY(-5px)}.clothing-card.selected{border-color:#171717}.clothing-image{aspect-ratio:3/4;background:#e8e6df;width:100%;overflow:hidden}.clothing-image img{object-fit:cover;width:100%;height:100%;display:block}.clothing-info{justify-content:space-between;align-items:center;padding:18px 5px;display:flex}.clothing-info h3{margin:0 0 6px;font-size:16px;font-weight:600}.selected-mark{color:#fff;background:#171717;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:14px;display:flex}.try-on-button{color:#fff;cursor:pointer;letter-spacing:.1px;background:linear-gradient(135deg,#7c3aed,#9333ea);border:none;border-radius:999px;margin:45px auto 0;padding:17px 38px;font-family:inherit;font-size:15px;font-weight:650;transition:transform .2s,box-shadow .2s,opacity .2s;display:block;box-shadow:0 10px 24px #7c3aed38}.try-on-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 30px #7c3aed4d}.try-on-button:active:not(:disabled){transform:translateY(0)}.try-on-button:disabled{color:#888;cursor:not-allowed;box-shadow:none;opacity:.75;opacity:.45;cursor:not-allowed;box-shadow:none;background:#d4d4d4;transform:none}.try-on-button:disabled:hover{opacity:.45;transform:none}.try-on-button:hover{transform:translateY(-2px)}@media (width<=800px){.clothing-section{padding:70px 25px}.clothing-grid{grid-template-columns:repeat(2,1fr);gap:14px}.section-heading h2{font-size:45px}}.auth-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#0f0f0f73;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.auth-modal{background:#fff;border-radius:24px;width:100%;max-width:430px;padding:42px;animation:.25s ease-out authAppear;position:relative;box-shadow:0 25px 80px #0000002e}@keyframes authAppear{0%{opacity:0;transform:translateY(12px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.auth-close{cursor:pointer;color:#555;background:#f5f5f5;border:none;border-radius:50%;width:36px;height:36px;font-size:24px;line-height:1;transition:all .2s;position:absolute;top:18px;right:20px}.auth-close:hover{background:#eaeaea;transform:rotate(90deg)}.auth-modal .eyebrow{margin-bottom:10px}.auth-modal h2{letter-spacing:-.8px;margin:0 0 28px;font-size:32px;line-height:1.1}.auth-modal form{flex-direction:column;gap:14px;display:flex}.auth-modal input{box-sizing:border-box;border:1px solid #dedede;border-radius:12px;outline:none;width:100%;padding:15px 16px;font-family:inherit;font-size:15px;transition:border-color .2s,box-shadow .2s}.auth-modal input:focus{border-color:#111;box-shadow:0 0 0 3px #0000000f}.auth-submit{color:#fff;cursor:pointer;background:#111;border:none;border-radius:12px;width:100%;margin-top:6px;padding:15px;font-family:inherit;font-size:15px;font-weight:600;transition:transform .2s,opacity .2s}.auth-submit:hover{opacity:.9;transform:translateY(-1px)}.auth-switch{text-align:center;color:#777;margin:22px 0 0;font-size:14px}.auth-switch button{color:#111;cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit;font-weight:600}.auth-switch button:hover{text-decoration:underline}@media (width<=500px){.auth-modal{border-radius:20px;padding:34px 24px}.auth-modal h2{font-size:28px}}.user-menu{align-items:center;gap:14px;display:flex}.credits{color:#333;z-index:20;background:#fff;border:1px solid #e8e8e8;border-radius:999px;padding:9px 15px;font-size:13px;font-weight:600;position:fixed;top:82px;right:28px;box-shadow:0 4px 14px #00000014}@media (width<=700px){.credits{top:145px;right:18px}}.navbar nav a{color:#555;font-size:14px;font-weight:500;text-decoration:none;transition:color .2s}.user-email{color:#333;font-size:14px;font-weight:500}.navbar{-webkit-backdrop-filter:blur(14px);z-index:100;background:#ffffffeb;border-bottom:1px solid #eee;justify-content:space-between;align-items:center;height:72px;padding:0 32px;display:flex;position:sticky;top:0}.navbar .logo{letter-spacing:-.8px;color:#111;font-size:22px;font-weight:800}.navbar nav{align-items:center;gap:32px;display:flex}.navbar nav a{color:#555;font-size:14px;font-weight:500;text-decoration:none;transition:color .2s;position:relative}.navbar nav a:hover{color:#7c3aed}.navbar nav a:after{content:"";background:#7c3aed;border-radius:2px;width:0;height:2px;transition:width .2s;position:absolute;bottom:-8px;left:0}.navbar nav a:hover:after{width:100%}.user-menu{align-items:center;gap:14px;margin-left:8px;display:flex}.user-email{color:#333;text-overflow:ellipsis;white-space:nowrap;max-width:180px;font-size:13px;font-weight:500;overflow:hidden}.logout-button{color:#fff;cursor:pointer;background:#7c3aed;border:none;border-radius:10px;padding:9px 16px;font-family:inherit;font-size:13px;font-weight:600;transition:all .2s;box-shadow:0 4px 12px #7c3aed2e}.logout-button:hover{background:#6d28d9;transform:translateY(-1px);box-shadow:0 6px 16px #7c3aed40}.logout-button:active{transform:translateY(0)}@media (width<=700px){.navbar{flex-wrap:wrap;gap:16px;height:auto;min-height:68px;padding:14px 18px}.navbar nav{order:3;justify-content:center;gap:24px;width:100%;padding-top:4px}.user-email{max-width:120px}.user-menu{margin-left:auto}}.clothing-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;display:grid}.clothing-card{cursor:pointer;text-align:left;background:#fff;border:1px solid #e8e8e8;border-radius:16px;padding:0;font-family:inherit;transition:transform .25s,box-shadow .25s,border-color .25s;position:relative;overflow:hidden}.clothing-card:hover{border-color:#d8c4ff;transform:translateY(-5px);box-shadow:0 14px 35px #0000001a}.clothing-card.selected{border:2px solid #7c3aed;box-shadow:0 12px 30px #7c3aed29}.clothing-image{background:#f7f7f7;width:100%;height:260px;overflow:hidden}.clothing-image img{object-fit:cover;width:100%;height:100%;transition:transform .4s;display:block}.clothing-card:hover .clothing-image img{transform:scale(1.04)}.clothing-info{justify-content:space-between;align-items:center;gap:10px;min-height:68px;padding:13px 14px;display:flex}.clothing-info h3{color:#171717;margin:0 0 5px;font-size:16px;font-weight:650}.clothing-info p{color:#888;margin:0;font-size:13px}.selected-mark{color:#fff;background:#7c3aed;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:16px;font-weight:700;display:flex;box-shadow:0 5px 12px #7c3aed40}@media (width<=900px){.clothing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=600px){.clothing-grid{grid-template-columns:1fr;gap:16px}.clothing-image{height:280px}}.try-on-button:disabled:not(:empty){cursor:wait}.result-section{text-align:center;background:#faf9ff;border-radius:32px;margin-top:90px;padding:70px 24px}.result-section .section-heading{margin-bottom:34px}.result-section .section-heading h2{letter-spacing:-1px;color:#171717;margin:8px 0 10px;font-size:38px}.result-section .section-heading>p:last-child{color:#777;margin:0;font-size:15px}.result-image-wrapper{background:#fff;border:1px solid #e8e3f5;border-radius:24px;width:min(620px,100%);margin:0 auto;padding:10px;box-shadow:0 20px 55px #0000001f}.result-image-wrapper img{object-fit:contain;border-radius:18px;width:100%;height:auto;max-height:720px;display:block}.try-another-button{color:#6d28d9;letter-spacing:.1px;cursor:pointer;background:linear-gradient(135deg,#fff,#faf7ff);border:1px solid #7c3aed33;border-radius:999px;margin:28px auto 0;padding:14px 26px;font-family:inherit;font-size:14px;font-weight:650;transition:transform .2s,box-shadow .2s,border-color .2s,background .2s;display:block;box-shadow:0 8px 22px #7c3aed1a}.try-another-button:hover{background:linear-gradient(135deg,#faf7ff,#f4edff);border-color:#7c3aed73;transform:translateY(-2px);box-shadow:0 12px 28px #7c3aed2e}.try-another-button:active{transform:translateY(0)}@media (width<=600px){.try-another-button{box-sizing:border-box;width:calc(100% - 32px);max-width:320px;margin:22px auto 0;padding:14px 20px;font-size:14px}}@media (width<=700px){.navbar{flex-wrap:nowrap;gap:12px;padding:14px 18px}.navbar nav{order:initial;gap:0;width:auto;padding-top:0}.user-email{max-width:100px;font-size:12px}.logout-button{padding:8px 12px;font-size:12px}.user-menu{gap:8px}}.mobile-user-icon{display:none}@media (width<=700px){.desktop-email{display:none}.mobile-user-icon{background:#f3efff;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:15px;display:flex}.user-menu .desktop-email{display:none!important}.user-menu{gap:8px}.mobile-user-icon{display:flex!important}.logout-button{padding:8px 12px;font-size:12px}}.category-tabs{scrollbar-width:none;gap:10px;margin:0 0 24px;padding:4px 2px 8px;display:flex;overflow-x:auto}.category-tabs::-webkit-scrollbar{display:none}.category-tab{color:#555;cursor:pointer;background:#fff;border:1px solid #e5e5e5;border-radius:999px;flex-shrink:0;padding:10px 18px;font-family:inherit;font-size:13px;font-weight:600;transition:all .2s}.category-tab:hover{color:#7c3aed;background:#faf7ff;border-color:#cdb5ff}.category-tab.active{color:#fff;background:#7c3aed;border-color:#7c3aed;box-shadow:0 6px 16px #7c3aed2e}.clothing-search{width:min(420px,100%);margin:0 auto 28px;position:relative}.clothing-search input{box-sizing:border-box;color:#222;background:#fff;border:1px solid #e5e5e5;border-radius:999px;outline:none;width:100%;padding:13px 44px 13px 17px;font-family:inherit;font-size:14px;transition:border-color .2s,box-shadow .2s}.clothing-search input::placeholder{color:#999}.clothing-search input:focus{border-color:#b794f6;box-shadow:0 0 0 4px #7c3aed14}.clear-search{color:#666;cursor:pointer;background:#f3f3f3;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;padding:0;font-family:inherit;font-size:18px;line-height:1;transition:background .2s,color .2s;display:flex;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.clear-search:hover{color:#7c3aed;background:#eee7ff}.no-results{color:#777;text-align:center;background:#fafafa;border:1px dashed #ddd;border-radius:18px;grid-column:1/-1;margin:20px 0;padding:40px 20px;font-size:14px}.favorite-button{z-index:5;color:#555;cursor:pointer;background:#ffffffeb;border:1px solid #fffc;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;padding:0;font-size:20px;line-height:1;transition:transform .2s,background .2s,color .2s;display:flex;position:absolute;top:12px;right:12px;box-shadow:0 4px 12px #0000001a}.favorite-button:hover{color:#7c3aed;background:#fff;transform:scale(1.08)}.favorite-button.active{color:#fff;background:#7c3aed;border-color:#7c3aed;box-shadow:0 6px 16px #7c3aed40}.favorite-button.active:hover{color:#fff;background:#6d28d9}.admin-section{background:#faf9ff;border-radius:32px;margin-top:90px;padding:70px 24px}.admin-section .section-heading{text-align:center;margin-bottom:34px}.admin-section .section-heading h2{letter-spacing:-1px;color:#171717;margin:8px 0 10px;font-size:38px}.admin-section .section-heading>p:last-child{color:#777;margin:0;font-size:15px}.admin-card{box-sizing:border-box;background:#fff;border:1px solid #e8e8e8;border-radius:22px;width:min(560px,100%);margin:0 auto;padding:28px;box-shadow:0 16px 40px #00000014}.admin-input{color:#222;box-sizing:border-box;background:#fff;border:1px solid #dedede;border-radius:12px;outline:none;width:100%;height:48px;margin-bottom:14px;padding:0 15px;font-family:inherit;font-size:14px;transition:border-color .2s,box-shadow .2s}.admin-input:focus{border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed1a}.admin-card .try-on-button{width:100%;margin:8px 0 0}