:root{--primary-teal: #1a5a5a;--primary-teal-light: #2a7a7a;--primary-teal-dark: #0d4a4a;--accent-teal: #5fb3a9;--white: #ffffff;--gray-50: #f8f9fa;--gray-100: #f1f3f5;--gray-200: #e9ecef;--gray-300: #dee2e6;--gray-400: #ced4da;--gray-500: #adb5bd;--gray-600: #868e96;--gray-700: #495057;--gray-800: #343a40;--gray-900: #212529;--success: #28a745;--success-light: #d4edda;--font-primary: "Inter", sans-serif;--font-arabic: "Noto Sans Arabic", "Inter", sans-serif;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-xl: 28px;--radius-full: 50%;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .05);--shadow-md: 0 4px 12px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .15);--shadow-xl: 0 12px 48px rgba(0, 0, 0, .2)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow-x:hidden}body{font-family:var(--font-primary);background:linear-gradient(180deg,var(--primary-teal) 0%,var(--primary-teal-dark) 100%);min-height:100vh;color:var(--gray-800);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh;display:flex;flex-direction:column}.app-container{min-height:100vh;display:flex;flex-direction:column;position:relative;max-width:480px;margin:0 auto;width:100%}@media(min-width:768px){.app-container{max-width:420px}}.header{background:linear-gradient(180deg,var(--primary-teal) 0%,var(--primary-teal-dark) 100%);padding:var(--spacing-xl) var(--spacing-md);padding-top:40px;text-align:center;position:relative;flex-shrink:0}.header-logo{width:70px;height:70px;background:var(--white);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;margin:0 auto var(--spacing-md);box-shadow:var(--shadow-md);position:relative}.header-logo:after{content:"";position:absolute;top:8px;right:8px;width:10px;height:10px;background:#d4a853;border-radius:var(--radius-full)}.header-logo-text{font-size:24px;font-weight:700;color:var(--primary-teal)}.header-arabic{font-family:var(--font-arabic);font-size:28px;font-weight:600;color:var(--white);margin-bottom:var(--spacing-xs);direction:rtl}.header-english{font-size:14px;font-weight:500;color:var(--accent-teal);letter-spacing:3px;text-transform:uppercase}.card-container{background:var(--white);border-radius:var(--radius-xl) var(--radius-xl) 0 0;flex:1;padding:var(--spacing-xl) var(--spacing-lg);margin-top:-10px;position:relative;z-index:1}.card-title{font-size:22px;font-weight:700;color:var(--gray-900);text-align:center;margin-bottom:var(--spacing-sm)}.card-subtitle{font-size:14px;color:var(--gray-600);text-align:center;margin-bottom:var(--spacing-xl)}.form-group{margin-bottom:var(--spacing-md)}.input-wrapper{display:flex;align-items:center;background:var(--gray-100);border-radius:var(--radius-md);padding:var(--spacing-md);border:2px solid transparent;transition:all .2s ease}.input-wrapper:focus-within{border-color:var(--primary-teal);background:var(--white)}.input-icon{color:var(--primary-teal);margin-right:var(--spacing-sm);flex-shrink:0;width:20px;height:20px}.input-field{flex:1;border:none;background:transparent;font-size:16px;font-family:var(--font-primary);color:var(--gray-800);outline:none}.input-field::placeholder{color:var(--gray-500)}.input-row{display:flex;gap:var(--spacing-md);width:100%}.input-row .form-group{flex:1;min-width:0}.input-row .input-wrapper{min-width:0}.input-row .input-field{min-width:0;width:100%}.btn{width:100%;padding:var(--spacing-md) var(--spacing-lg);border:none;border-radius:var(--radius-md);font-size:16px;font-weight:600;font-family:var(--font-primary);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.btn-primary{background:linear-gradient(135deg,var(--accent-teal) 0%,var(--primary-teal-light) 100%);color:var(--white);box-shadow:0 4px 15px #5fb3a966}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #5fb3a980}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-secondary{background:transparent;color:var(--primary-teal);border:2px solid var(--gray-200)}.btn-secondary:hover{background:var(--gray-100)}.link{color:var(--primary-teal);text-decoration:none;font-weight:500;font-size:14px;transition:color .2s ease}.link:hover{color:var(--primary-teal-light)}.text-center{text-align:center}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mt-xl{margin-top:var(--spacing-xl)}.login-links{display:flex;justify-content:space-between;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xl)}.login-divider{display:flex;align-items:center;margin:var(--spacing-xl) 0}.login-divider:before,.login-divider:after{content:"";flex:1;height:1px;background:var(--gray-200)}.login-divider span{padding:0 var(--spacing-md);color:var(--gray-500);font-size:14px}.fingerprint-btn{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-lg);cursor:pointer;outline:none;border:none;background:transparent;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.fingerprint-btn:focus{outline:none}.fingerprint-icon{width:48px;height:48px;color:var(--primary-teal);opacity:.7}.fingerprint-text{font-size:14px;color:var(--gray-600)}.footer{padding:var(--spacing-md);display:flex;justify-content:space-between;align-items:center;background:var(--primary-teal-dark)}.footer-version{font-size:12px;color:var(--gray-400)}.footer-contact{display:flex;align-items:center;gap:var(--spacing-xs);color:var(--white);font-size:12px;text-decoration:none}.footer-contact svg{width:16px;height:16px;color:#25d366}.modal-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:flex-end;justify-content:center;z-index:100;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--white);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:var(--spacing-xl) var(--spacing-lg);padding-bottom:var(--spacing-2xl);width:100%;max-width:480px;position:relative;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-close{position:absolute;top:var(--spacing-md);right:var(--spacing-md);width:32px;height:32px;border:none;background:transparent;cursor:pointer;color:var(--gray-500);font-size:24px;display:flex;align-items:center;justify-content:center}.modal-title{font-size:22px;font-weight:700;color:var(--primary-teal);text-align:center;margin-bottom:var(--spacing-sm)}.modal-subtitle{font-size:14px;color:var(--gray-600);text-align:center;margin-bottom:var(--spacing-xl)}.otp-container{display:flex;justify-content:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.otp-input{width:48px;height:56px;border:2px solid var(--gray-200);border-radius:var(--radius-md);font-size:24px;font-weight:600;text-align:center;font-family:var(--font-primary);color:var(--gray-800);outline:none;transition:all .2s ease}.otp-input:focus{border-color:var(--primary-teal);box-shadow:0 0 0 3px #1a5a5a1a}.otp-hint{text-align:center;color:var(--primary-teal);font-size:14px;margin-bottom:var(--spacing-xl)}.success-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl)}.success-icon{width:80px;height:80px;border:4px solid var(--success);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;margin-bottom:var(--spacing-lg);animation:scaleIn .5s ease}@keyframes scaleIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.success-icon svg{width:40px;height:40px;color:var(--success)}.success-title{font-size:24px;font-weight:700;color:var(--gray-900);margin-bottom:var(--spacing-sm)}.success-message{font-size:14px;color:var(--gray-600)}.loading-overlay{position:fixed;inset:0;background:#fffffff2;display:flex;align-items:center;justify-content:center;z-index:300;animation:fadeIn .2s ease}.loading-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg)}.loading-spinner{width:50px;height:50px;border:4px solid var(--gray-200);border-top-color:var(--primary-teal);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:16px;font-weight:500;color:var(--primary-teal)}.toast{position:fixed;top:0;left:0;right:0;background:var(--white);padding:var(--spacing-md) var(--spacing-lg);box-shadow:var(--shadow-lg);z-index:200;animation:slideDown .3s ease}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.toast-title{font-size:16px;font-weight:600;color:var(--gray-900);margin-bottom:var(--spacing-xs)}.toast-message{font-size:14px;color:var(--gray-600)}@media(max-width:360px){.header{padding:var(--spacing-lg) var(--spacing-md);padding-top:30px}.header-logo{width:60px;height:60px}.header-arabic{font-size:24px}.card-container{padding:var(--spacing-lg) var(--spacing-md)}.otp-input{width:42px;height:50px;font-size:20px}}@media(min-width:768px){body{background:var(--gray-100)}.app-container{margin-top:40px;margin-bottom:40px;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-xl);min-height:calc(100vh - 80px)}.card-container{border-radius:0}}