/* The centered login and password recovery screens. */
.login-page { min-height: 100vh; min-height: 100dvh; background: radial-gradient(circle at 50% 2%, rgba(0,144,197,.12), transparent 39%), linear-gradient(125deg, #e7edf1, #f7f9fa 54%, #edf3f6); display: flex; align-items: center; justify-content: center; overflow-x: hidden; }
.login-page::before { content: ''; pointer-events: none; position: fixed; inset: 0; opacity: .23; background-image: radial-gradient(#7894a8 0.55px, transparent .55px); background-size: 6px 6px; }
.login-layout { position: relative; width: min(100%, 680px); padding: 30px 22px; }
.login-card { position: relative; background: rgba(255,255,255,.97); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 26px 80px rgba(30,56,75,.15), 0 2px 9px rgba(30,56,75,.05); border-radius: 23px; padding: 45px 53px 40px; }
.login-card::before { content: ''; position: absolute; height: 4px; top: 0; left: 60px; right: 60px; border-radius: 0 0 8px 8px; background: linear-gradient(90deg, transparent, #0090c5, #65c9dd, transparent); }
.login-brand { display: flex; align-items: center; gap: 24px; margin-bottom: 35px; }
.login-brand img { flex: none; object-fit: contain; }
.login-brand-divider { width: 1px; align-self: stretch; background: #e3e8ec; }
.eyebrow { font-size: 10px; letter-spacing: .16em; font-weight: 800; color: #0090c5; }
.login-brand h1 { font-size: 28px; font-weight: 730; letter-spacing: -.04em; margin: 10px 0 7px; color: #253443; }
.login-brand p { line-height: 1.55; color: #7c8a98; margin: 0; }
.login-form { display: flex; flex-direction: column; gap: 11px; }
.login-form label:not(.remember-row) { font-size: 13px; font-weight: 650; color: #455666; }
.login-form input[type=text], .login-form input[type=password], .login-form input[type=email] { height: 47px; width: 100%; border: 1px solid #dae3ea; border-radius: 10px; background: #fbfdfe; padding: 0 14px; color: #2a3745; transition: border-color .15s, box-shadow .15s; }
.login-form input::placeholder { color: #a4b0ba; }
.login-form input:focus { border-color: var(--ms-blue); outline: 0; box-shadow: 0 0 0 4px rgba(0,144,197,.11); }
.label-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 15px; }
.label-row a { font-size: 12px; font-weight: 650; }
.remember-row { display: flex; gap: 9px; align-items: center; padding: 13px 0 7px; color: #657482; font-size: 13px; cursor: pointer; }
.remember-row input { width: 16px; height: 16px; accent-color: var(--ms-blue); }
.login-form .button--ghost { margin-top: 0; }
.login-footer { color: #8393a0; text-align: center; font-size: 12px; margin: 24px 0 0; }
.form-message { border: 1px solid; border-radius: 11px; padding: 12px 15px; line-height: 1.5; margin-bottom: 20px; }
.form-message--error { color: #a23245; background: #fff1f3; border-color: #f5d4db; }
.form-message--success { color: #256c50; background: #eaf8f0; border-color: #cde7d9; }
.login-card--compact { max-width: 480px; margin: auto; }
.login-brand--stacked { flex-direction: column; text-align: center; gap: 2px; margin-bottom: 25px; }
.login-brand--stacked h1 { margin-top: 0; }
.back-link { display: block; text-align: center; margin-top: 23px; font-size: 13px; font-weight: 620; }
@media (max-width: 620px) { .login-layout { padding: 18px; } .login-card { padding: 30px 24px; } .login-brand { flex-direction: column; text-align: center; gap: 8px; } .login-brand img { width: 86px; height: 86px; } .login-brand-divider { display: none; } .login-brand h1 { font-size: 25px; } }