*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,Segoe UI,Roboto,sans-serif}:root{--primary-color: #646060;--secondary-color: #2f3542;--bg-light: #f8f9fa;--text-main: #2d3436;--text-muted: #636e72;--shadow-sm: 0 2px 8px rgba(0,0,0,.05);--shadow-md: 0 10px 25px rgba(0,0,0,.08);--transition: all .3s cubic-bezier(.25, .8, .25, 1)}html{scroll-behavior:smooth}body{background-color:var(--bg-light);color:var(--text-main);line-height:1.6;overflow-x:hidden;padding-top:70px}@media(max-width:768px){body{padding-top:20px;padding-bottom:80px}}h1,h2,h3,h4{font-weight:800;color:var(--secondary-color);letter-spacing:-.5px}a{text-decoration:none;color:inherit;transition:var(--transition)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#ccc;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--primary-color)}.container{max-width:1200px;margin:0 auto;padding:0 20px}.text-center{text-align:center}.loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100vh;display:flex;justify-content:center;align-items:center;background:#fff;z-index:9999}.swal2-popup{border-radius:25px!important;padding:2rem!important;font-family:Inter,sans-serif!important}.swal2-title{font-weight:800!important;color:#2d3436!important}.swal2-confirm{background-color:#4c4848!important;border-radius:12px!important;padding:12px 30px!important;font-weight:600!important}.swal2-cancel{border-radius:12px!important;padding:12px 30px!important}:root{--bg-white: #ffffff;--bg-dark: #0a0a0a;--border-light: #eeeeee;--text-gray: #888888;--text-dark: #4d4949;--accent-pink: #4e4a4b;--logo-gradient: linear-gradient(45deg, #ff4757, #ff6b81);--shadow-light: 0 2px 10px rgba(0, 0, 0, .1);--shadow-mobile: 0 -2px 10px rgba(0, 0, 0, .05)}.main-navbar,.bottom-nav{position:fixed;left:0;width:100%;z-index:1000;background-color:var(--bg-white);display:flex;align-items:center;transition:all .3s ease}.main-navbar{top:0;height:70px;box-shadow:var(--shadow-light)}.nav-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 20px}.nav-menu{display:flex;gap:50px}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:var(--text-gray);font-size:12px;font-weight:500;transition:color .3s ease,transform .2s ease;cursor:pointer;flex:1}.nav-item i{font-size:24px;margin-bottom:2px}.nav-avatar{width:24px;height:24px;margin-bottom:7px;margin-left:2px;border-radius:50%;object-fit:cover;border:1.5px solid var(--accent-pink)}.nav-item.active{color:var(--text-dark)}.nav-logo{font-size:18px;font-weight:700;color:#2d2c2c;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;text-decoration:none}.nav-logo span{color:#2d2c2c;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;text-decoration:none}@media(max-width:768px){.main-navbar{top:auto;bottom:0;height:65px;border-top:1px solid var(--border-light);box-shadow:var(--shadow-mobile)}.nav-container{padding:0;justify-content:center}.nav-menu{width:100%;justify-content:space-around;gap:0}.nav-item{font-size:11px;gap:4px;padding:10px 0}.nav-item i{font-size:20px}.desktop-only,.nav-logo{display:none!important}}:root{--bg-dark: #0a0a0a;--text-white: #ffffff;--gray-dark: #1a1a1a;--gray-mid: #444444;--gray-light: #888888}.loader-container{position:fixed;inset:0;background-color:var(--bg-dark);display:flex;justify-content:center;align-items:center;z-index:9999;padding:20px}.loader-content{width:100%;max-width:400px;display:flex;flex-direction:column}.text-wrapper{margin-bottom:30px}.loader-title{font-family:Montserrat,sans-serif;font-weight:800;font-size:clamp(1.5rem,8vw,2.5rem);letter-spacing:2px;color:var(--gray-mid);text-transform:uppercase;position:relative;margin:0}.loader-title:after{content:"HAIRSTYLEHUB";position:absolute;left:0;top:0;color:var(--text-white);width:100%;overflow:hidden;animation:shimmer 2.5s infinite ease-in-out;white-space:nowrap}.loader-subtitle{font-size:.7rem;letter-spacing:5px;color:var(--gray-light);margin-top:5px}.progress-container{width:100%;height:4px;background:var(--gray-dark);border-radius:2px;overflow:hidden}.progress-bar{height:100%;background:var(--text-white);box-shadow:0 0 15px #ffffff4d;transition:width .2s ease-out}.status-row{display:flex;justify-content:space-between;margin-top:10px;font-family:Inter,sans-serif;font-size:.65rem;font-weight:600;letter-spacing:1px}.status-text{color:var(--gray-mid)}.progress-number{color:var(--text-white)}@keyframes shimmer{0%{width:0%}50%{width:100%}to{width:0%}}@media(max-width:480px){.loader-content{max-width:85%}.loader-subtitle{letter-spacing:3px}}.onboarding-overlay{position:fixed;inset:0;z-index:1000;background:#fff;display:flex;flex-direction:column}.onboarding-modal{display:flex;flex-direction:column;height:100%;max-width:480px;margin:0 auto;width:100%;padding:24px 20px calc(20px + env(safe-area-inset-bottom));box-sizing:border-box}.onboarding-progress{margin-bottom:32px}.onboarding-progress__label{display:block;font-size:13px;color:#6b6b6b;margin-bottom:10px}.onboarding-progress__track{height:3px;background:#ececec;border-radius:2px;overflow:hidden}.onboarding-progress__fill{height:100%;background:#000;transition:width .32s ease}.onboarding-step{display:flex;flex-direction:column;flex:1;gap:14px}.onboarding-step__eyebrow{font-size:13px;color:#6b6b6b}.onboarding-step__title{font-size:24px;line-height:1.25;font-weight:600;color:#0a0a0a;margin:0;letter-spacing:-.01em}.onboarding-step__subtitle{font-size:15px;line-height:1.5;color:#6b6b6b;margin:0 0 8px;max-width:34ch}.onboarding-btn{border:none;border-radius:10px;font-size:16px;font-weight:600;padding:15px 20px;cursor:pointer;transition:background .15s ease,color .15s ease,opacity .15s ease}.onboarding-btn--primary{background:#000;color:#fff;margin-top:auto}.onboarding-btn--primary:disabled{background:#d9d9d9;color:#8a8a8a;cursor:not-allowed}.onboarding-btn--ghost{background:transparent;color:#6b6b6b;padding:10px 4px 10px 0;align-self:flex-start}.onboarding-btn--ghost:hover{color:#0a0a0a}.onboarding-phone-input{display:flex;align-items:center;border:1px solid #d9d9d9;border-radius:10px;padding:4px 16px}.onboarding-phone-input:focus-within{border-color:#000}.onboarding-phone-input__prefix{font-size:17px;color:#0a0a0a;padding-right:10px;border-right:1px solid #e2e2e2;margin-right:10px}.onboarding-phone-input input{border:none;outline:none;font-size:17px;padding:14px 0;width:100%;letter-spacing:.02em}.onboarding-chip-grid{display:flex;flex-direction:column;gap:10px;margin-top:8px}.onboarding-chip{text-align:left;border:1px solid #d9d9d9;border-radius:10px;background:#fff;color:#0a0a0a;font-size:16px;padding:16px 18px;cursor:pointer;transition:background .12s ease,color .12s ease,border-color .12s ease}.onboarding-chip:active{transform:scale(.99)}.onboarding-chip.is-selected{background:#000;border-color:#000;color:#fff}.onboarding-step--scan{align-items:center;text-align:center}.onboarding-step--scan .onboarding-step__title,.onboarding-step--scan .onboarding-step__subtitle{text-align:center}.face-scan-frame{position:relative;width:100%;max-width:320px;aspect-ratio:3 / 4;border-radius:16px;overflow:hidden;background:#0a0a0a;margin:8px auto 0}.face-scan-frame__video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.face-scan-frame__oval{position:absolute;inset:12% 20%;border:2px solid rgba(255,255,255,.85);border-radius:50%/40%;pointer-events:none}.face-scan-frame__error{color:#fff;font-size:14px;padding:24px}.onboarding-toggle-camera{background:none;border:none;color:#6b6b6b;font-size:14px;display:flex;align-items:center;gap:6px;justify-content:center;cursor:pointer;padding:4px}@media(prefers-reduced-motion:reduce){.onboarding-progress__fill,.onboarding-btn,.onboarding-chip{transition:none}}