:root{font-family:Plus Jakarta Sans,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}a{font-weight:500;color:#7317cf;text-decoration:inherit}body{margin:0;min-width:320px;min-height:100vh}@media(prefers-color-scheme:light){:root{color:#333;background-color:#f7f6f8}}.landing{max-width:480px;margin:0 auto;min-height:100vh;background:#fff;position:relative;overflow:hidden;padding-bottom:5rem}.landing-nav{position:absolute;top:0;left:0;right:0;z-index:50;padding:1.5rem;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(to bottom,rgba(255,255,255,.9),transparent)}.nav-menu{background:none;border:none;padding:.5rem;margin-left:-.5rem;cursor:pointer;border-radius:50%;color:#333;display:flex}.nav-menu:hover{background:#0000000d}.nav-logo{font-weight:700;font-size:1.25rem;letter-spacing:-.02em;color:#333}.nav-logo span{color:#7317cf}.nav-login{font-size:.875rem;font-weight:600;color:#333;text-decoration:none;background:none;border:none;cursor:pointer;font-family:inherit;padding:0}.nav-login:hover{color:#7317cf}.hero{position:relative;width:100%;height:640px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border-radius:0 0 2.5rem 2.5rem}.hero-bg{position:absolute;inset:0}.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:top}.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,#fff)}.hero-content{position:relative;z-index:10;padding:0 1.5rem 3rem;text-align:center}.hero-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .75rem;border-radius:9999px;background:#7317cf1a;border:1px solid rgba(115,23,207,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);margin-bottom:1rem}.badge-dot{width:.5rem;height:.5rem;border-radius:50%;background:#7317cf}.hero-badge span:last-child{font-size:.7rem;font-weight:700;color:#7317cf;letter-spacing:.08em;text-transform:uppercase}.hero-content h1{font-size:2.5rem;font-weight:800;line-height:1.1;margin:0 0 1rem;color:#1a1a1a}.hero-content h1 span{background:linear-gradient(to right,#7317cf,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-content p{color:#666;font-size:1rem;line-height:1.6;margin:0 auto 2rem;max-width:280px}.hero-cta{width:100%;background:#7317cf;color:#fff;font-weight:700;font-size:1rem;padding:1rem 2rem;border:none;border-radius:9999px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 8px 24px #7317cf4d;transition:transform .2s,opacity .2s}.hero-cta:hover{opacity:.9;transform:scale(1.02)}.hero-cta:active{transform:scale(.98)}.hero-cta:disabled{opacity:.6;cursor:not-allowed;transform:none}.bottom-cta-btn:disabled{opacity:.6;cursor:not-allowed}.how-it-works{padding:3rem 1.5rem}.how-it-works>h2{text-align:center;font-size:.8rem;font-weight:700;color:#999;letter-spacing:.15em;text-transform:uppercase;margin:0 0 2.5rem}.steps{display:flex;flex-direction:column;gap:2rem;position:relative}.step-line{position:absolute;left:27px;top:1rem;bottom:1rem;width:0;border-left:1px dashed #ddd;z-index:0}.step{display:flex;align-items:flex-start;gap:1.25rem}.step-icon{flex-shrink:0;width:3.5rem;height:3.5rem;border-radius:50%;background:#fff;border:1px solid #eee;box-shadow:0 1px 4px #0000000f;display:flex;align-items:center;justify-content:center;z-index:1}.step-icon .material-icons-round{font-size:1.5rem;color:#7317cf}.step-text{padding-top:.25rem}.step-text h3{font-size:1.1rem;font-weight:700;color:#1a1a1a;margin:0 0 .25rem}.step-text p{font-size:.875rem;color:#888;margin:0;line-height:1.5}.trending{padding:1rem 0 2rem;overflow:hidden}.trending-header{display:flex;justify-content:space-between;align-items:flex-end;padding:0 1.5rem;margin-bottom:1.5rem}.trending-header h2{font-size:1.5rem;font-weight:700;color:#1a1a1a;margin:0}.trending-header>div>p{font-size:.875rem;color:#888;margin:.25rem 0 0}.trending-header a{font-size:.875rem;font-weight:600;color:#7317cf;text-decoration:none}.trending-cards{display:flex;gap:1rem;overflow-x:auto;padding:0 1.5rem 1rem;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none}.trending-cards::-webkit-scrollbar{display:none}.outfit-card{min-width:200px;scroll-snap-align:center;flex-shrink:0}.outfit-img{position:relative;height:280px;border-radius:1rem;overflow:hidden;margin-bottom:.75rem}.outfit-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.outfit-card:hover .outfit-img img{transform:scale(1.1)}.outfit-fav{position:absolute;top:.75rem;right:.75rem;background:#ffffffe6;border:none;padding:.375rem;border-radius:50%;cursor:pointer;display:flex;box-shadow:0 1px 4px #0000001a}.outfit-fav .material-icons-round{font-size:1rem;color:#666}.outfit-card h3{font-weight:700;font-size:1rem;color:#1a1a1a;margin:0}.outfit-card>p{font-size:.75rem;color:#888;margin:.125rem 0 0}.ai-tech{background:#f5f5f5;padding:2.5rem 1.5rem;margin:0 1rem 2rem;border-radius:1.5rem;text-align:center}.ai-tech-icon{width:3.5rem;height:3.5rem;margin:0 auto 1rem;border-radius:50%;background:#7317cf1a;display:flex;align-items:center;justify-content:center}.ai-tech-icon .material-icons-round{font-size:1.75rem;color:#7317cf}.ai-tech h2{font-size:1.3rem;font-weight:700;color:#1a1a1a;margin:0 0 .75rem}.ai-tech p{font-size:.875rem;color:#666;line-height:1.7;margin:0}.stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:0 1.5rem;margin-bottom:3rem}.stat-card{padding:1.5rem;border-radius:1rem;text-align:center;background:#faf5ff}.stat-card.stat-primary{background:#7317cf0f}.stat-icon{font-size:1.5rem;color:#7317cf;margin-bottom:.5rem}.stat-number{font-size:1.1rem;font-weight:800;color:#7317cf;margin-bottom:.25rem}.stat-card:not(.stat-primary) .stat-number{color:#1a1a1a}.stat-label{font-size:.7rem;font-weight:600;color:#666;letter-spacing:.08em;text-transform:uppercase}.bottom-cta{position:fixed;bottom:1.5rem;left:0;right:0;z-index:40;padding:0 1.5rem;max-width:480px;margin:0 auto;pointer-events:none}.bottom-cta-inner{background:#ffffffd9;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:.5rem;border-radius:9999px;box-shadow:0 8px 32px #0000001f;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:space-between;pointer-events:auto}.bottom-cta-label{padding-left:1.25rem;font-size:.7rem;font-weight:700;color:#888;letter-spacing:.06em;text-transform:uppercase}.bottom-cta-btn{background:#1a1a1a;color:#fff;font-weight:700;padding:.75rem 2rem;border:none;border-radius:9999px;cursor:pointer;font-size:.9rem;transition:transform .2s;box-shadow:0 4px 12px #00000026}.bottom-cta-btn:hover{background:#333}.bottom-cta-btn:active{transform:scale(.95)}.landing-footer{padding:2rem 1.5rem 1rem;text-align:center}.footer-disclaimer{font-size:.75rem;color:#999;line-height:1.6;margin:0 0 1.25rem}.footer-links{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:1rem}.footer-links a{font-size:.8rem;font-weight:600;color:#666;text-decoration:none}.footer-links a:hover{color:#7317cf}.footer-divider{width:1px;height:.875rem;background:#ddd}.footer-copy{font-size:.7rem;color:#bbb;margin:0}.bottom-spacer{height:5rem}@media(prefers-color-scheme:dark){.landing{background:#1f1629}.landing-nav{background:linear-gradient(to bottom,rgba(25,17,33,.9),transparent)}.nav-menu,.nav-logo{color:#fff}.nav-login{color:#ddd}.hero-overlay{background:linear-gradient(to bottom,transparent 40%,#1f1629)}.hero-content h1{color:#fff}.hero-content p{color:#bbb}.how-it-works>h2{color:#666}.step-line{border-color:#ffffff1a}.step-icon{background:#ffffff0d;border-color:#ffffff1a}.step-text h3{color:#fff}.step-text p{color:#999}.trending-header h2,.outfit-card h3{color:#fff}.outfit-fav{background:#0009}.outfit-fav .material-icons-round{color:#ccc}.ai-tech{background:#ffffff0d}.ai-tech h2{color:#fff}.ai-tech p{color:#999}.stat-card{background:#ffffff0d}.stat-card.stat-primary{background:#7317cf1a}.stat-card:not(.stat-primary) .stat-number{color:#fff}.stat-label{color:#bbb}.footer-links a{color:#888}.footer-divider{background:#ffffff26}.bottom-cta-inner{background:#1f1629d9;border-color:#ffffff0d}.bottom-cta-btn{background:#fff;color:#1f1629}.bottom-cta-btn:hover{background:#eee}}.auth{min-height:100vh;background:#111;color:#fff;display:flex;flex-direction:column}.auth-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 20px}.auth-back{background:none;border:none;color:#fff;cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s}.auth-back:hover{background:#ffffff1a}.auth-container{flex:1;display:flex;flex-direction:column;align-items:center;padding:40px 20px;max-width:400px;margin:0 auto;width:100%}.auth-header{text-align:center;margin-bottom:32px}.auth-header h1{font-size:28px;font-weight:700;margin:0 0 8px}.auth-header p{font-size:14px;color:#fff9;margin:0}.auth-tabs{display:flex;width:100%;background:#ffffff0f;border-radius:12px;padding:4px;margin-bottom:28px}.auth-tab{flex:1;padding:12px;border:none;background:none;color:#ffffff80;font-size:14px;font-weight:600;cursor:pointer;border-radius:10px;transition:all .2s;font-family:inherit}.auth-tab.active{background:#ffffff1f;color:#fff}.auth-form{width:100%;display:flex;flex-direction:column;gap:20px}.auth-input-group{display:flex;flex-direction:column;gap:8px}.auth-input-group label{font-size:13px;font-weight:600;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.auth-input-wrapper{display:flex;align-items:center;gap:12px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:0 16px;transition:border-color .2s}.auth-input-wrapper:focus-within{border-color:#ffffff4d}.auth-input-icon{font-size:20px;color:#fff6}.auth-input-wrapper input{flex:1;background:none;border:none;color:#fff;font-size:15px;padding:14px 0;outline:none;font-family:inherit}.auth-input-wrapper input::placeholder{color:#ffffff4d}.auth-error{background:#ef444426;border:1px solid rgba(239,68,68,.3);color:#f87171;padding:12px 16px;border-radius:10px;font-size:13px;text-align:center}.auth-message{background:#22c55e26;border:1px solid rgba(34,197,94,.3);color:#4ade80;padding:12px 16px;border-radius:10px;font-size:13px;text-align:center}.auth-submit{width:100%;padding:14px;border:none;border-radius:12px;background:#fff;color:#111;font-size:15px;font-weight:700;cursor:pointer;transition:opacity .2s;font-family:inherit;margin-top:4px}.auth-submit:hover{opacity:.9}.auth-submit:disabled{opacity:.5;cursor:not-allowed}.auth-switch{margin-top:24px;font-size:13px;color:#ffffff80}.auth-switch button{background:none;border:none;color:#fff;font-weight:600;cursor:pointer;text-decoration:underline;font-size:13px;font-family:inherit;padding:0}.app{max-width:480px;margin:0 auto;padding:2rem 1.5rem;min-height:100vh}.header{text-align:center;margin-bottom:2.5rem;position:relative}.btn-back{position:absolute;left:0;top:0;background:none;border:none;padding:.5rem;cursor:pointer;color:#ccc;border-radius:50%;display:flex}.btn-back:hover{background:#ffffff1a;color:#fff}.btn-logout{position:absolute;right:0;top:0;background:none;border:none;padding:.5rem;cursor:pointer;color:#ccc;border-radius:50%;display:flex}.btn-logout:hover{background:#ffffff1a;color:#fff}.header h1{font-size:1.8rem;margin:0;background:linear-gradient(135deg,#7317cf,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:#888;margin-top:.5rem;font-size:.95rem}.profile-form{display:flex;flex-direction:column;gap:2rem}.photo-section{display:flex;flex-direction:column;align-items:center;gap:.75rem}.photo-upload{width:220px;height:280px;border-radius:16px;border:2px dashed #555;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:border-color .3s,box-shadow .3s}.photo-upload:hover{border-color:#7317cf;box-shadow:0 0 20px #7317cf26}.photo-upload.dragging{border-color:#7317cf;background:#7317cf14;box-shadow:0 0 30px #7317cf40}.preview-photo{width:100%;height:100%;object-fit:cover}.photo-placeholder{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:#888;font-size:.9rem}.camera-icon{font-size:2.5rem}.photo-hint{font-size:.75rem;color:#666}.btn-change-photo{background:transparent;border:1px solid #555;color:#aaa;padding:.4rem 1rem;border-radius:8px;font-size:.8rem;cursor:pointer;transition:all .2s}.btn-change-photo:hover{border-color:#7317cf;color:#7317cf}.gender-select{display:flex;gap:.75rem}.gender-btn{flex:1;padding:.8rem;border-radius:12px;border:1px solid #444;background:#2a2a2a;color:#888;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.gender-btn:hover{border-color:#7317cf;color:#ccc}.gender-btn.active{border-color:#7317cf;background:linear-gradient(135deg,#7317cf,#a855f7);color:#fff}.input-section{display:flex;flex-direction:column;gap:1.25rem}.input-group{display:flex;flex-direction:column;gap:.4rem}.input-group label{font-size:.9rem;font-weight:600;color:#ccc}.input-wrapper{display:flex;align-items:center;background:#2a2a2a;border:1px solid #444;border-radius:12px;padding:0 1rem;transition:border-color .3s}.input-wrapper:focus-within{border-color:#7317cf}.input-wrapper input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-size:1.1rem;padding:.85rem 0;font-family:inherit}.input-wrapper input::placeholder{color:#555}.input-wrapper input[type=number]::-webkit-outer-spin-button,.input-wrapper input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-wrapper input[type=number]{-moz-appearance:textfield}.unit{color:#888;font-size:.9rem;font-weight:500;margin-left:.5rem}.btn-submit{width:100%;padding:1rem;border:none;border-radius:12px;font-size:1.05rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#7317cf,#a855f7);cursor:pointer;transition:opacity .2s,transform .2s;margin-top:.5rem}.btn-submit:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.btn-submit:active:not(:disabled){transform:translateY(0)}.btn-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}.loading-section{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:2rem;padding:2rem}.loading-section p{color:#aaa;font-size:.95rem}.spinner{width:40px;height:40px;border:3px solid #333;border-top-color:#7317cf;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-section{margin-top:1.5rem;padding:1rem 1.25rem;background:#ff4d4d1a;border:1px solid rgba(255,77,77,.3);border-radius:12px}.error-section p{color:#ff6b6b;margin:0;font-size:.9rem}.report-section{margin-top:2rem;padding:1.5rem;background:#1e1e1e;border:1px solid #333;border-radius:16px}.report-section h2{font-size:1.3rem;margin:0 0 1rem;background:linear-gradient(135deg,#7317cf,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.report-content{color:#ddd;font-size:.95rem;line-height:1.7;white-space:pre-wrap}.hairstyle-section{margin-top:2rem;padding:1.5rem;background:#1e1e1e;border:1px solid #333;border-radius:16px}.hairstyle-section h2{font-size:1.3rem;margin:0 0 1rem;background:linear-gradient(135deg,#7317cf,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hairstyle-image{width:100%;border-radius:12px}@media(prefers-color-scheme:light){.btn-back{color:#666}.btn-back:hover{background:#0000000d;color:#333}.input-group label{color:#333}.input-wrapper{background:#f5f5f5;border-color:#ddd}.input-wrapper input{color:#333}.input-wrapper input::placeholder{color:#bbb}.photo-upload{border-color:#ccc}.photo-placeholder{color:#999}.btn-change-photo{border-color:#ccc;color:#666}.btn-change-photo:hover{border-color:#7317cf;color:#7317cf}.gender-btn{background:#f5f5f5;border-color:#ddd;color:#999}.gender-btn:hover{color:#555}.gender-btn.active{background:linear-gradient(135deg,#7317cf,#a855f7);border-color:#7317cf;color:#fff}.loading-section p{color:#666}.spinner{border-color:#ddd;border-top-color:#7317cf}.report-section{background:#f9f9f9;border-color:#e0e0e0}.report-content{color:#333}.hairstyle-section{background:#f9f9f9;border-color:#e0e0e0}}