@import"https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap";:root{--bg: #f6f9fc;--bg-soft: #eef4fb;--surface: #ffffff;--ink: #0a2540;--muted: #4f5f7a;--muted-soft: #7a889f;--line: #dfe7f3;--brand: #2f6dfd;--brand-strong: #1f4ed8;--brand-soft: rgba(47, 109, 253, .12);--danger: #c52b2b;--success: #0a8f64}*{margin:0;padding:0;box-sizing:border-box;font-family:Manrope,sans-serif}body{margin:0;min-height:100vh;background:radial-gradient(circle at top right,rgba(47,109,253,.08),transparent 48%),radial-gradient(circle at bottom left,rgba(111,77,245,.08),transparent 42%),var(--bg);color:var(--ink)}#root{min-height:100vh}.top-header{position:sticky;top:0;left:0;right:0;height:80px;display:flex;align-items:center;padding:0 50px;background:var(--bg);z-index:10}.header-brand{display:flex;align-items:center;text-decoration:none}.header-logo{height:50px;width:auto;object-fit:contain;display:block}.page-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 80px);padding:40px 20px 48px;background:transparent}.login-container{width:100%;max-width:430px;padding:2.5rem 2rem;border-radius:.85rem;background:var(--surface);border:1px solid var(--line);box-shadow:0 20px 48px #17305217}.form-title{text-align:center;font-size:1.75rem;font-weight:600;margin-bottom:1.75rem}.social-login{display:flex;flex-direction:column;gap:.85rem}.social-button{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;font-size:1rem;font-weight:500;cursor:pointer;padding:.75rem 0;border-radius:.4rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);transition:transform .2s ease,box-shadow .2s ease}.social-button:hover,.social-button:focus-visible{transform:translateY(-1px);box-shadow:0 12px 24px #1730521f}.social-button:disabled{cursor:not-allowed;opacity:.68;transform:none;box-shadow:none}.social-icon{width:22px;height:22px;object-fit:contain}.separator{position:relative;margin:2rem 0;text-align:center}.separator span{position:relative;z-index:1;font-weight:500;color:var(--muted);background:var(--surface);padding:0 1rem}.separator:after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--line)}.login-form{display:flex;flex-direction:column}.input-wrapper{position:relative;margin-bottom:1.5rem}.input-wrapper.has-trailing .input-field{padding-right:8rem}.input-trailing{position:absolute;top:50%;right:.75rem;transform:translateY(-50%);display:flex;align-items:center;gap:.5rem;pointer-events:auto}.input-field{width:100%;height:54px;border-radius:.5rem;border:1px solid var(--line);padding:0 1.2rem 0 3.2rem;font-size:1.05rem;color:var(--ink);background:var(--surface);transition:border-color .2s ease,box-shadow .2s ease}.input-field:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}.input-field::placeholder{color:var(--muted-soft)}.input-wrapper i{position:absolute;top:50%;transform:translateY(-50%);left:.9rem;color:var(--muted-soft);pointer-events:none}.input-wrapper .eye-icon{right:.9rem;left:auto;pointer-events:auto;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center}.input-wrapper.has-error .input-field{border-color:var(--danger);box-shadow:0 0 0 3px #c52b2b1a}.input-error{margin-top:.5rem;font-size:.85rem;color:var(--danger)}.otp-field-wrapper{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border:1px solid var(--line);border-radius:.75rem;background:var(--surface);margin-bottom:1.5rem;box-shadow:0 10px 24px #17305214}.otp-field-wrapper .material-symbols-rounded{color:var(--ink);font-size:1.5rem}.otp-input-group{flex:1;display:flex;flex-direction:column;gap:.5rem}.otp-input-row{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(.35rem,2vw,.6rem)}.otp-input{flex:0 1 auto;width:clamp(2.5rem,10vw,3.1rem);aspect-ratio:1 / 1;border-radius:.65rem;border:1px solid var(--line);background:var(--bg-soft);text-align:center;font-size:1.4rem;font-weight:600;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}.otp-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);background:var(--surface)}.otp-input-group.has-error .otp-input{border-color:var(--danger);box-shadow:0 0 0 3px #c52b2b1f}.otp-input-group .input-error{align-self:flex-start;margin:0}.forgot-password-link{align-self:flex-end;font-size:.95rem;color:var(--brand);text-decoration:none;background:none;border:none;padding:0;cursor:pointer;font:inherit}.forgot-password-link:hover,.forgot-password-link:focus{text-decoration:underline;outline:none}.login-button,.register-button{border:none;outline:none;width:100%;height:54px;margin-top:1rem;border-radius:.5rem;background:linear-gradient(135deg,var(--brand),var(--brand-strong));color:var(--surface);font-size:1.1rem;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.login-button:hover,.register-button:hover{transform:translateY(-2px);box-shadow:0 18px 34px #2f6dfd47}.signup-prompt,.login-prompt{text-align:center;font-size:1rem;margin-top:1.75rem;color:var(--muted)}.link-button{border:none;background:none;color:var(--brand);font-weight:600;cursor:pointer;text-decoration:underline}.form-feedback{margin-top:1.5rem;font-size:.95rem;color:var(--danger);text-align:center}.form-feedback.success{color:var(--success)}.form-intro{font-size:.98rem;line-height:1.55;color:var(--muted);margin-bottom:1.5rem;text-align:center}.form-intro strong{color:var(--ink)}.disclaimer-wrapper{margin-top:2rem;max-width:520px;text-align:center}.disclaimer{font-size:.9rem;color:var(--muted);line-height:1.5}.disclaimer-link{color:var(--brand);text-decoration:none;font-weight:500}.disclaimer-company{display:block;margin-top:.3rem}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a254080;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:var(--surface);z-index:999;text-align:center;padding:24px}.loading-overlay p{margin-top:0;font-size:1.05rem;max-width:320px}.loading-spinner{width:64px;height:64px;border-radius:50%;border:5px solid rgba(255,255,255,.26);border-top-color:var(--surface);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 640px){.top-header{padding:0 20px;height:68px}.page-wrapper{padding:24px 16px 40px}.login-container{padding:2rem 1.5rem}}
