.login-page{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#1c2632;position:relative;overflow:hidden}.login-page:before,.login-page:after{content:"";position:absolute;border-radius:50%;filter:blur(60px);z-index:0}.login-page:before{width:300px;height:300px;background:#34495e99;top:-50px;left:-50px}.login-page:after{width:250px;height:250px;background:#5d6d7e66;bottom:-50px;right:-50px}.login-page .login-card{position:relative;z-index:1;background:linear-gradient(#34495e33,#34495e0d);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-top:1px solid rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px #ffffff0d,0 10px 40px #00000080;padding:2.5rem 2rem 2rem;border-radius:12px;width:100%;max-width:360px}.login-page .login-card .login-logo{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem;width:fit-content;margin:0 auto .75rem}.login-page .login-card .login-logo__mark{width:190px;max-width:70vw;height:auto;filter:brightness(0) invert(1)}.login-page .login-card .login-logo__app{font-size:.85rem;font-weight:700;letter-spacing:1px;color:#fff}.login-page .login-card h2{font-size:1.4rem;font-weight:300;margin:1rem 0;text-align:center;color:#d6dbdf}.login-page .login-card p{text-align:center;color:#abb2b9;font-size:.9rem;margin-bottom:1rem}.login-page .login-card form{display:flex;flex-direction:column;gap:1.2rem}.login-page .login-card form input[type=email],.login-page .login-card form input[type=password],.login-page .login-card form input[type=text]{width:100%;padding:.65rem;border:1px solid #ABB2B9;border-radius:6px;font-size:1rem}.login-page .login-card form .login-field{position:relative;display:flex;align-items:center}.login-page .login-card form .login-field__icon{position:absolute;left:.7rem;width:18px;height:18px;color:#5d6d7e;pointer-events:none}.login-page .login-card form .login-field input{padding-left:2.4rem}.login-page .login-card form .login-field:has(.login-field__toggle) input{padding-right:2.6rem}.login-page .login-card form .login-field__toggle{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;padding:.3rem;margin:0;width:auto;background:none;border:none;border-radius:6px;cursor:pointer;color:#5d6d7e}.login-page .login-card form .login-field__toggle .icon{width:19px;height:19px}.login-page .login-card form .login-field__toggle:hover{background:none;color:#d6dbdf}.login-page .login-card form button svg.icon{width:18px;height:18px;vertical-align:-3px;margin-right:.4rem}.login-page .login-card form .remember-me{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:#abb2b9}.login-page .login-card form .remember-me .icon{width:16px;height:16px;color:#abb2b9}.login-page .login-card form .otp-boxes{display:flex;gap:.4rem}.login-page .login-card form .otp-boxes .otp-box{flex:1 1 0;min-width:0;height:54px;padding:0;text-align:center;font-size:1.5rem;font-weight:600;color:#2e4053;border:1px solid #ABB2B9;border-radius:8px;transition:border-color .15s,box-shadow .15s}.login-page .login-card form .otp-boxes .otp-box:focus{outline:none;border-color:#5d6d7e;box-shadow:0 0 0 3px #5d6d7e59}.login-page .login-card form button{padding:.8rem;background:#34495e;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:.2s}.login-page .login-card form button:hover{background:#2a3a4b}.login-page .login-card form button:disabled{opacity:.6;cursor:not-allowed}.login-page .login-card form .btn-back{background:none;color:#abb2b9;text-decoration:underline;font-size:.8rem}.login-page .login-card form .forgot-paswd{font-size:.75rem;text-align:right;color:#d6dbdf;text-decoration:none;transition:color .15s}.login-page .login-card form .forgot-paswd:hover{color:#fff;text-decoration:underline}.login-page .login-card form .back-link{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;margin:.2rem auto 0;padding:0;background:none;font-size:.85rem;color:#d6dbdf;text-decoration:none;transition:color .15s}.login-page .login-card form .back-link .icon{width:15px;height:15px}.login-page .login-card form .back-link:hover{color:#fff;text-decoration:underline;background:none}.login-page .login-card form .btn-spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:login-spin .6s linear infinite;vertical-align:-3px;margin-right:.4rem}.login-page .login-card form .error-msg{color:#f5a3a3;font-size:.8rem;margin-top:-.8rem}.login-page .login-card form .login-status{margin:0;padding:.6rem .8rem;border-radius:6px;font-size:.85rem;color:#b6f0cf;background:#138d752e;border:1px solid rgba(19,141,117,.4)}@keyframes login-spin{to{transform:rotate(360deg)}}