@import "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap";:root{--c3-black:#000;--c3-white:#fff;--c3-gray-50:#f9fafb;--c3-gray-100:#f3f4f6;--c3-gray-200:#e5e7eb;--c3-gray-300:#d1d5db;--c3-gray-400:#9ca3af;--c3-gray-500:#6b7280;--c3-gray-600:#4b5563;--c3-gray-700:#374151;--c3-gray-800:#1f2937;--c3-gray-900:#111827;--c3-blue:#2563eb;--c3-green:#10b981;--c3-red:#ef4444;--font-sans:"Roboto", sans-serif;--shadow-sm:0 1px 3px #0000001a;--shadow-md:0 4px 6px #0000001a;--shadow-lg:0 10px 30px #00000026;--transition:all .2s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-sans);color:var(--c3-gray-900);background:var(--c3-white);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;line-height:1.5}.app-container{background:var(--c3-white);max-width:480px;min-height:100vh;margin:0 auto;position:relative;overflow:hidden}.splash-screen{background:var(--c3-white);flex-direction:column;justify-content:center;align-items:center;height:100vh;animation:.5s fadeIn;display:flex}.splash-logo-img{object-fit:contain;width:120px;max-width:50vw;animation:2s ease-in-out infinite pulse}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes slideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.login-screen{background:var(--c3-white);flex-direction:column;align-items:center;min-height:100vh;padding:24px;animation:.3s fadeIn;display:flex}.login-header{justify-content:space-between;align-items:center;width:100%;max-width:320px;margin-bottom:24px;display:flex}.login-back{cursor:pointer;transition:var(--transition);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;display:flex}.login-back:hover{background:var(--c3-gray-100)}.back-icon{width:20px;height:20px;color:var(--c3-gray-700)}.login-logo-wrap{align-items:center;display:flex}.login-logo{object-fit:contain;width:32px;height:32px;margin-right:8px}.login-body{background:var(--c3-white);width:100%;max-width:320px}.login-title{text-align:center;color:var(--c3-gray-900);margin-bottom:24px;font-size:24px;font-weight:600}.login-label{color:var(--c3-gray-500);margin-bottom:8px;font-size:12px;display:block}.phone-input-row{border-bottom:1px solid var(--c3-gray-200);align-items:center;margin-bottom:24px;padding-bottom:16px;display:flex}.country-code-box{background:var(--c3-gray-50);border-radius:6px;align-items:center;gap:8px;margin-right:12px;padding:8px 12px;display:flex}.uae-flag{object-fit:cover;width:20px;height:14px}.country-code{color:var(--c3-gray-500);font-size:14px}.phone-input{color:var(--c3-gray-800);background:0 0;border:none;outline:none;flex:1;font-size:16px}.phone-input::placeholder{color:var(--c3-gray-300)}.password-input-row{border-bottom:1px solid var(--c3-gray-200);margin-bottom:24px;padding-bottom:16px;position:relative}.password-input{width:100%;color:var(--c3-gray-800);background:0 0;border:none;outline:none;font-size:16px}.password-input::placeholder{color:var(--c3-gray-300)}.show-btn{color:var(--c3-gray-500);cursor:pointer;background:0 0;border:none;padding:0;font-size:14px;position:absolute;top:2px;right:0}.login-btn{cursor:pointer;width:100%;transition:var(--transition);background:var(--c3-gray-200);color:var(--c3-black);box-shadow:var(--shadow-sm);border:none;border-radius:12px;justify-content:center;align-items:center;margin-bottom:16px;padding:12px;font-size:16px;font-weight:500;display:flex}.login-btn:hover{background:var(--c3-gray-700);color:var(--c3-white)}.login-btn:disabled{cursor:wait}.login-btn.loading{opacity:.7;cursor:wait}.login-spinner{border:2px solid #ffffff4d;border-top-color:var(--c3-white);border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}.forgot-password{text-align:center;color:var(--c3-gray-600);cursor:pointer;width:100%;transition:var(--transition);border-radius:6px;padding:8px 16px;font-size:14px;display:inline-block}.forgot-password:hover{background:var(--c3-gray-50)}.pin-screen{background:var(--c3-white);flex-direction:column;height:100vh;animation:.3s slideInRight;display:flex;position:relative}.pin-back{background:var(--c3-gray-100);width:40px;height:40px;color:var(--c3-gray-700);cursor:pointer;z-index:10;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;display:flex;position:absolute;top:16px;left:16px}.pin-back svg{width:20px;height:20px}.pin-header{flex-direction:column;align-items:center;padding:48px 0 24px;display:flex}.pin-lock-icon{background:var(--c3-gray-100);width:56px;height:56px;color:var(--c3-gray-700);border-radius:16px;justify-content:center;align-items:center;display:flex}.pin-lock-icon svg{width:28px;height:28px}.pin-title{color:var(--c3-gray-900);letter-spacing:-.3px;margin-top:16px;font-size:22px;font-weight:600}.pin-card{background:var(--c3-white);border-top:1px solid var(--c3-gray-200);border-radius:28px 28px 0 0;flex-direction:column;flex:1;padding:16px 24px 24px;animation:.4s slideUp;display:flex}.pin-handle{background:var(--c3-gray-200);border-radius:2px;width:40px;height:4px;margin:0 auto 24px}.pin-instruction{text-align:center;color:var(--c3-gray-600);padding:0 8px;font-size:15px;line-height:1.6}.pin-phone-display{color:var(--c3-gray-600)}.pin-epin-label{color:var(--c3-gray-900);margin-top:16px;font-size:16px;font-weight:600}.pin-digits{justify-content:center;gap:8px;margin-top:32px;padding:0 4px;display:flex}.pin-digit-box{aspect-ratio:1;border:1.5px solid var(--c3-gray-300);text-align:center;min-width:42px;max-width:56px;color:var(--c3-gray-900);background:var(--c3-white);border-radius:12px;outline:none;flex:1;padding:0;font-size:22px;font-weight:600;transition:border-color .2s,box-shadow .2s}.pin-digit-box:focus{border-color:var(--c3-gray-900);box-shadow:0 0 0 1.5px var(--c3-gray-900)}.pin-digit-box.filled{border-color:var(--c3-blue)}.pin-digit-box.filled:focus{border-color:var(--c3-gray-900);box-shadow:0 0 0 1.5px var(--c3-gray-900)}.pin-paste{text-align:right;color:var(--c3-gray-700);cursor:pointer;margin-top:18px;padding-right:4px;font-size:14px;font-weight:500}.btn-verify{cursor:pointer;width:100%;height:52px;transition:var(--transition);border:none;border-radius:12px;margin-top:32px;font-size:16px;font-weight:500}.btn-verify.enabled{background:var(--c3-gray-700);color:var(--c3-white)}.btn-verify.enabled:hover{background:var(--c3-gray-800)}.btn-verify.disabled{background:var(--c3-gray-200);color:var(--c3-gray-400);cursor:not-allowed}.otp-screen{background:var(--c3-white);flex-direction:column;height:100vh;animation:.3s slideInRight;display:flex}.otp-header-image{background:var(--c3-gray-100);justify-content:center;align-items:center;width:100%;height:220px;display:flex;overflow:hidden}.otp-header-img{object-fit:contain;width:100%;height:100%;padding:20px}.otp-body{flex-direction:column;flex:1;padding:24px;display:flex}.otp-title{color:var(--c3-gray-900);font-size:28px;font-weight:700}.otp-subtitle{color:var(--c3-gray-900);margin-top:8px;font-size:16px}.otp-digits{justify-content:center;gap:8px;margin-top:32px;padding:0 4px;display:flex}.otp-digit-box{aspect-ratio:1;border:1.5px solid var(--c3-gray-300);text-align:center;min-width:42px;max-width:56px;color:var(--c3-gray-900);background:var(--c3-white);border-radius:12px;outline:none;flex:1;padding:0;font-size:22px;font-weight:600;transition:border-color .2s,box-shadow .2s,background .2s}.otp-digit-box:focus{border-color:var(--c3-gray-900);box-shadow:0 0 0 1.5px var(--c3-gray-900)}.otp-digit-box.filled{border-color:var(--c3-blue)}.otp-digit-box.filled:focus{border-color:var(--c3-gray-900);box-shadow:0 0 0 1.5px var(--c3-gray-900)}.otp-digit-box.error{border-color:var(--c3-red);background:#fee2e2}.otp-digit-box.error:focus{border-color:var(--c3-red);box-shadow:0 0 0 1.5px var(--c3-red)}.otp-digit-box:disabled{opacity:.6;cursor:not-allowed}.otp-paste-row{justify-content:flex-end;margin-top:18px;padding-right:4px;display:flex}.otp-paste{color:var(--c3-gray-700);cursor:pointer;font-size:14px;font-weight:500}.otp-error{text-align:center;color:var(--c3-red);margin-top:16px;font-size:15px;font-weight:500}.otp-timer{text-align:center;color:var(--c3-gray-400);margin-top:20px;font-size:15px}.otp-timer.clickable{color:var(--c3-blue);cursor:pointer;font-weight:500}.btn-submit{background:var(--c3-gray-700);width:calc(100% - 24px);height:52px;color:var(--c3-white);cursor:pointer;transition:var(--transition);border:none;border-radius:12px;margin:0 12px 16px;font-size:16px;font-weight:500}.btn-submit:hover{background:var(--c3-gray-800)}.btn-submit:disabled{background:var(--c3-gray-200);color:var(--c3-gray-400);cursor:not-allowed}.success-screen{background:var(--c3-white);flex-direction:column;height:100vh;animation:.5s fadeIn;display:flex}.success-body{flex-direction:column;flex:1;align-items:center;padding:80px 24px 24px;display:flex;overflow-y:auto}.success-icon{background:var(--c3-green);width:100px;height:100px;color:var(--c3-white);box-shadow:var(--shadow-lg);border-radius:50%;justify-content:center;align-items:center;font-size:50px;animation:.5s scaleIn;display:flex}.success-title{color:var(--c3-gray-900);text-align:center;margin-top:40px;font-size:28px;font-weight:600}.success-desc{color:var(--c3-gray-600);text-align:center;max-width:320px;margin-top:20px;font-size:16px;line-height:1.6}.success-spinner{border:3px solid var(--c3-gray-200);border-top-color:var(--c3-gray-700);border-radius:50%;width:40px;height:40px;margin-top:40px;animation:.8s linear infinite spin}.btn-finish{background:var(--c3-gray-700);width:calc(100% - 24px);height:52px;color:var(--c3-white);cursor:pointer;transition:var(--transition);border:none;border-radius:12px;margin:0 12px 16px;font-size:16px;font-weight:500}.btn-finish:hover{background:var(--c3-gray-800)}@media (width<=480px){.app-container{box-shadow:none}.pin-digit-box{width:44px}}@media (width<=360px){.pin-digit-box{width:38px;height:48px;font-size:20px}.pin-digits{gap:4px}}.screen-wrapper{background:var(--c3-white);justify-content:center;align-items:flex-start;min-height:100vh;padding:24px;animation:.3s fadeIn;display:flex}.screen-card{width:100%;max-width:320px}.screen-header{align-items:center;margin-bottom:24px;display:flex}.screen-back{cursor:pointer;transition:var(--transition);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;display:flex}.screen-back:hover{background:var(--c3-gray-100)}.screen-back svg{width:20px;height:20px;color:var(--c3-gray-700)}.screen-title{text-align:center;color:var(--c3-gray-900);margin-bottom:24px;font-size:20px;font-weight:600}.screen-image-wrap{justify-content:center;margin-bottom:24px;display:flex}.screen-image{object-fit:contain;width:224px;height:144px}.screen-input-border{border-bottom:1px solid var(--c3-gray-200);margin-bottom:24px;padding-bottom:12px}.screen-input-centered{text-align:center;letter-spacing:.3em;width:100%;color:var(--c3-gray-800);background:0 0;border:none;outline:none;font-size:18px}.screen-input-centered::placeholder{color:var(--c3-gray-400)}.screen-input-dots{text-align:center;border-bottom:1px solid var(--c3-gray-200);width:100%;color:var(--c3-gray-800);-webkit-text-security:disc;background:0 0;outline:none;margin-bottom:24px;padding-bottom:12px;font-size:20px}.screen-input-dots::placeholder{color:var(--c3-gray-400);letter-spacing:.2em}.screen-input-card{text-align:center;border-bottom:1px solid var(--c3-gray-200);letter-spacing:.15em;width:100%;color:var(--c3-gray-800);background:0 0;outline:none;margin-bottom:24px;padding-bottom:12px;font-size:20px}.screen-input-card::placeholder{color:var(--c3-gray-400)}.screen-divider{border-bottom:1px solid var(--c3-gray-200);margin-bottom:24px}.screen-btn{cursor:pointer;width:100%;transition:var(--transition);background:var(--c3-gray-200);color:var(--c3-gray-400);box-shadow:var(--shadow-sm);border:none;border-radius:12px;justify-content:center;align-items:center;margin-bottom:16px;padding:12px;font-size:16px;font-weight:500;display:flex}.screen-btn.active{background:var(--c3-gray-700);color:var(--c3-white)}.screen-btn.active:hover{background:var(--c3-gray-800)}.screen-btn:disabled{cursor:not-allowed}.screen-btn.loading{opacity:.7;cursor:wait}.otp-dots-row{cursor:text;justify-content:center;margin-bottom:24px;display:flex;position:relative}.otp-hidden-input{opacity:0;width:1px;height:1px;position:absolute}.otp-dots{gap:8px;display:flex}.otp-dot{background:var(--c3-gray-300);border-radius:50%;width:12px;height:12px;transition:background .2s}.otp-dot.filled{background:var(--c3-gray-700)}.screen-error{text-align:center;color:var(--c3-red);margin-bottom:16px;font-size:14px}