.od-login {
    min-height: 100vh;
    padding: 30px 24px 36px;
    background: #f5f7fb;
    color: #182239;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}
.od-login *, .od-login *::before, .od-login *::after { box-sizing: border-box; }
.od-login a { color: #4f46e5; text-decoration: none; }
.od-login a:hover { text-decoration: underline; }
.od-login button, .od-login input { font: inherit; }
.od-login button { cursor: pointer; }
.od-login :focus-visible { outline: 3px solid #818cf8; outline-offset: 3px; }
.od-login-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 900px; margin: 0 auto; }
.od-login .od-login-brand { display: flex; align-items: center; gap: 10px; color: #182239; font-size: 18px; font-weight: 600; letter-spacing: -.5px; }
.od-login-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #4f46e5; color: #fff; font-size: 16px; letter-spacing: -1px; }
.od-login .od-login-back { display: flex; align-items: center; gap: 7px; min-height: 44px; color: #667187; font-size: 13px; }
.od-login-card { width: 100%; max-width: 420px; margin: 42px auto 0; padding: 34px; border: 1px solid #dce2ed; border-radius: 18px; background: #fff; box-shadow: 0 8px 30px #24376608; }
.od-login-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 22px; border-radius: 12px; background: #eeedff; color: #4f46e5; font-size: 22px; }
.od-login h1 { margin: 0 0 10px; font-size: 27px; font-weight: 600; line-height: 1.2; letter-spacing: -.8px; }
.od-login-intro { margin: 0 0 28px; color: #667187; line-height: 1.6; }
.od-login-field { margin-bottom: 21px; }
.od-login-field > label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 500; }
.od-login-field input:not([type=checkbox]) { display: block; width: 100%; height: 46px; padding: 0 13px; border: 1px solid #dce2ed; border-radius: 8px; background: #fff; color: #182239; font-size: 16px; }
.od-login-field input::placeholder { color: #667187; font-size: 14px; }
.od-login-field input[aria-invalid=true] { border-color: #b42318; }
.od-login-password { position: relative; }
.od-login-password input { padding-right: 72px !important; }
.od-login-show { position: absolute; top: 1px; right: 3px; height: 44px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: #667187; font-size: 12px !important; font-weight: 500 !important; }
.od-login-options { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 22px; font-size: 12px; }
.od-login-options > a { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; }
.od-login-remember { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.od-login-remember input { width: 16px; height: 16px; margin: 0; accent-color: #4f46e5; }
.od-login-submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; padding: 10px 16px; border: 0; border-radius: 8px; background: #4f46e5; color: #fff; font-weight: 600 !important; }
.od-login-submit:hover { background: #4338ca; }
.od-login-signup { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid #dce2ed; text-align: center; font-size: 13px; color: #667187; }
.od-login-signup a { display: inline-block; padding: 7px 0; font-weight: 500; }
.od-login-footer { margin: 23px 0 0; text-align: center; font-size: 12px; color: #667187; }
.od-login-message, .od-login-errors { margin: 0 0 16px; padding: 12px; border-radius: 8px; background: #fff5e6; color: #854d0e; font-size: 13px; overflow-wrap: anywhere; }
.od-login-errors { background: #fff1f2; color: #b42318; }
.od-login-field .od-login-errors { margin: 8px 0 0; }
.od-login-errors ul { margin: 0; padding: 0; list-style: none; }
.od-login-alternatives { display: grid; gap: 12px; margin-top: 20px; text-align: center; }
@media (max-width: 460px) {
    .od-login { padding: 20px 14px 26px; }
    .od-login-card { margin-top: 26px; padding: 26px 22px; }
    .od-login h1 { font-size: 25px; }
    .od-login .od-login-back { font-size: 12px; }
}

/* Email-code entrance, shared by both steps. */
.od-login a, .od-login .od-login-link { color: #225d51; }
.od-login-mark, .od-login-submit { background: #183d37; }
.od-login-submit:hover { background: #24574e; }
.od-login :focus-visible { outline-color: #528f7d; }
.od-login-card { max-width: 440px; padding: 36px; border-radius: 20px; }
.od-login-card > .od-login-brand { margin-bottom: 38px; }
.od-login-intro { overflow-wrap: anywhere; }
.od-login-note { display: flex; align-items: center; justify-content: center; gap: 7px; color: #667187; font-size: 12px; margin: 24px 0 0; text-align: center; }
.od-login-link { border: 0; background: transparent; min-height: 44px; padding: 10px 0; font-size: 13px !important; }
.od-login-resend { text-align: center; margin-top: 12px; }
.od-login-code input { text-align: center; letter-spacing: 10px; font-size: 24px !important; }
.od-login-code input::placeholder { font-size: 24px; }
.od-login-remember { margin-bottom: 12px; font-size: 13px; }
.od-login-remember input { accent-color: #183d37; }
.od-login-footer { padding-top: 22px; border-top: 1px solid #edf0f4; }
@media (max-width: 460px) { .od-login-card { padding: 26px 22px; } }

/* A shared entrance for signup, recovery, invitations and account security. */
.od-login { background: radial-gradient(ellipse at 15% 0%, #e6eeea 0, transparent 55%), #f5f7f6; padding-top: clamp(20px, 5vh, 60px); }
.od-login-card { max-width: 500px; margin-top: 20px; padding: 40px; box-shadow: 0 16px 48px #183d3709; border-color: #dde5df; }
.od-login-card > .od-login-brand { margin-bottom: 32px; }
.od-login-eyebrow { margin: 0 0 12px; color: #597468; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.od-account-content { overflow-wrap: anywhere; }
.od-account-content h1 { margin-bottom: 16px; }
.od-account-content h2 { font-size: 18px; font-weight: 600; margin: 24px 0 12px; }
.od-account-content p { margin: 12px 0 20px; color: #596777; line-height: 1.7; }
.od-account-content form { margin-top: 22px; }
.od-account-content form > div, .od-account-content form > p { margin-bottom: 18px; }
.od-account-content label { display: block; margin-bottom: 8px; color: #263d35; font-size: 13px; font-weight: 600; }
.od-account-content input:not([type=hidden]):not([type=checkbox]):not([type=radio]), .od-account-content select, .od-account-content textarea { width: 100%; min-height: 46px; border: 1px solid #cfdad3; border-radius: 9px; padding: 10px 12px; background: #fff; color: #182239; font: inherit; font-size: 16px; }
.od-account-content input[type=checkbox], .od-account-content input[type=radio] { accent-color: #183d37; }
.od-account-content button, .od-account-content a[class*="bg-brand"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; max-width: 100%; border: 1px solid transparent; border-radius: 9px; padding: 11px 18px; background: #183d37; color: #fff; font: inherit; font-weight: 600; text-decoration: none; white-space: normal; }
.od-account-content button:hover, .od-account-content a[class*="bg-brand"]:hover { background: #24574e; }
.od-account-content button:disabled { opacity: .55; cursor: not-allowed; }
.od-account-content button.text-xs { background: transparent; color: #526259; font-weight: 400; }
.od-account-content button.text-xs:hover { background: #eef4f0; color: #183d37; }
.od-account-content ul { padding-left: 20px; margin: 12px 0; }
.od-account-content .helptext, .od-account-content [id$="_helptext"] { display: block; color: #667187; font-size: 12px; line-height: 1.6; margin-top: 8px; }
.od-account-content .errorlist { padding: 12px 12px 12px 28px; border-radius: 8px; background: #fff1f2; color: #b42318; font-size: 13px; }
.od-account-content img { max-width: 100%; height: auto; }
.od-account-content table { display: block; max-width: 100%; overflow-x: auto; }
.od-account-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 28px; padding-top: 20px; border-top: 1px solid #e5ebe7; font-size: 12px; }
.od-account-nav a { padding: 6px 0; }
@media (max-width: 540px) { .od-login-card { padding: 28px 22px; } .od-login h1 { font-size: 25px; } }
.od-delete-list { margin: 0 0 21px; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; color: #3b4459; list-style: disc; }
.od-delete-submit { background: #b42318; }
.od-delete-submit:hover { background: #912018; }
.od-login-errors ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; }