* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; background: #f4f7fd; }
body { color: #253957; font-family: "Manrope", sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { cursor: pointer; }
.login-page { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding: 32px 24px; overflow: hidden; background: #f4f7fd; }
.login-grid-pattern { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .42; background-image: linear-gradient(rgba(75,105,178,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(75,105,178,.06) 1px,transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom,#000,transparent 85%); }
.login-orb { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.login-orb-one { width: 560px; height: 560px; top: -320px; right: -160px; background: rgba(79,112,224,.12); }
.login-orb-two { width: 380px; height: 380px; bottom: -220px; left: -120px; background: rgba(121,92,208,.09); }
.login-card { width: min(100%,440px); padding: 48px 45px 35px; border: 1px solid #dee6f3; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 24px 70px rgba(43,67,115,.16); }
.login-form-top { margin-bottom: 32px; }
.login-form-eyebrow { color: #6862ed; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
h1 { margin: 10px 0 7px; font-size: 29px; font-weight: 800; line-height: 1.2; letter-spacing: -.045em; }
.login-form-top p { margin: 0; color: #93a0b2; font-size: 10px; line-height: 1.6; }
.login-form { display: flex; flex-direction: column; gap: 20px; }
.login-field { display: flex; flex-direction: column; gap: 8px; }
.login-field label { color: #67788f; font-size: 9px; font-weight: 800; }
.login-input { height: 46px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid #dfe6f0; border-radius: 9px; color: #9ba8b8; background: #fcfdff; }
.login-input:focus-within { border-color: #9fb2ed; background: #fff; box-shadow: 0 0 0 4px rgba(72,103,219,.09); }
.login-input input { width: 100%; min-width: 0; flex: 1; border: 0; outline: 0; color: #50647f; background: transparent; font-size: 10px; }
.login-input input::placeholder { color: #b4becb; opacity: 1; }
svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.login-input button { display: grid; place-items: center; padding: 6px; margin-right: -6px; border: 0; color: #9ba8b8; background: transparent; border-radius: 5px; }
.eye-hide, [aria-pressed="true"] .eye-show { display: none; }
[aria-pressed="true"] .eye-hide { display: block; }
.remember-option { display: flex; align-items: center; align-self: flex-start; gap: 7px; margin-top: -3px; color: #8f9bab; font-size: 9px; cursor: pointer; }
.remember-option input { appearance: none; width: 14px; height: 14px; margin: 0; border: 1px solid #d5deea; border-radius: 4px; background: #fff; cursor: pointer; display: grid; place-content: center; }
.remember-option input:checked { background: #605bea; border-color: #605bea; }
.remember-option input:checked::after { content: ""; width: 6px; height: 3px; border-left: 1.5px solid white; border-bottom: 1.5px solid white; transform: translateY(-1px) rotate(-45deg); }
button:focus-visible, .remember-option input:focus-visible { outline: 2px solid #625deb; outline-offset: 3px; }
.login-submit { height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 5px; border: 0; border-radius: 9px; color: #fff; background: linear-gradient(135deg,#605cde,#4b46c6); box-shadow: 0 9px 18px rgba(83,77,202,.22); font-size: 10px; font-weight: 800; }
.login-submit:hover { background: linear-gradient(135deg,#5551d5,#413cba); }
.login-assurance { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; padding-top: 16px; border-top: 1px solid #edf1f6; }
.login-assurance div { display: flex; align-items: center; gap: 5px; color: #91a0b0; font-size: 8px; }
.login-assurance svg { width: 14px; height: 14px; color: #24b68c; }
.login-legal { display: block; margin-top: 28px; text-align: center; color: #b3bdc9; font-size: 7px; line-height: 1.5; }
.login-error { margin-bottom: 18px; padding: 10px 12px; border: 1px solid #f0d2d6; border-radius: 8px; color: #ab3648; background: #fff3f4; font-size: 11px; line-height: 1.5; }
@media (max-width: 600px) { .login-page { padding: 20px 18px; } .login-card { padding: 32px 22px 26px; border-radius: 16px; } h1 { font-size: 25px; } }

.login-sso{display:flex;justify-content:center;text-decoration:none;margin-bottom:12px}
.login-sso-ou{text-align:center;font-size:.85rem;opacity:.7;margin:0 0 12px}