/* Shared palette and controls for every authentication step. */
.oim-login-speed-page {
    --auth-surface: #f5f8fd;
    --auth-input: #fff;
    --auth-ink: #162640;
    --auth-muted: #61728b;
    --auth-border: #cfdbea;
    --auth-blue: #2767b7;
    --auth-ring: rgb(74 144 226 / 16%);
    --auth-error: #b33242;
    --auth-error-bg: #fff2f3;
    height: auto; min-height: 100dvh; overflow: auto;
}
.dark .oim-login-speed-page {
    --auth-surface: #111d32; --auth-input: #17263e; --auth-ink: #e4edf9;
    --auth-muted: #a0b1ca; --auth-border: #344863; --auth-blue: #8abcf7;
    --auth-error: #ffabba; --auth-error-bg: #352330;
}
.oim-login-speed-page .oim-login-speed-shell { min-height: 100dvh; height: auto; }
.oim-login-speed-page .right-panel {
    position: relative; flex: 0 0 480px; width: 480px; box-sizing: border-box;
    min-height: 100dvh; padding: 72px 40px 90px;
    background: linear-gradient(90deg, var(--auth-ring), transparent 26px), var(--auth-surface);
    color: var(--auth-ink); border-left: 1px solid var(--auth-border); box-shadow: none;
}
.oim-login-speed-page .right-content { min-height: 0; width: 100%; max-width: 380px; }
.oim-login-speed-page .login-box { display: none; position: static; transform: none; opacity: 1; }
.oim-login-speed-page .login-box.is-active { display: block; transform: none; }
.oim-login-speed-page .login-header,
.oim-login-speed-page #forgotBox .login-header { text-align: left; margin-bottom: 30px; }
.oim-login-speed-page .login-header h2,
.oim-login-speed-page #forgotBox .login-header h2 { color: var(--auth-ink); font-size: 28px; line-height: 1.25; letter-spacing: -.8px; margin-bottom: 10px; }
.oim-login-speed-page .login-header p,
.oim-login-speed-page #forgotBox .login-header p { color: var(--auth-muted); font-size: 14px; line-height: 1.65; }
.oim-login-speed-page .form-group { margin-bottom: 20px; }
.oim-login-speed-page .form-group label,
.oim-login-speed-page .otp-fieldset legend { display: block; color: var(--auth-ink); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.oim-login-speed-page .form-group input,
.oim-login-speed-page .otp-inputs input {
    box-sizing: border-box; height: 52px; border: 1px solid var(--auth-border); border-radius: 10px;
    background: var(--auth-input); color: var(--auth-ink); padding: 12px 14px; font-size: 16px;
    transition: border-color .18s, box-shadow .18s; box-shadow: 0 1px 2px rgb(14 35 65 / 3%);
}
.oim-login-speed-page .form-group input::placeholder { color: var(--auth-muted); opacity: .75; }
.oim-login-speed-page .form-group input:focus,
.oim-login-speed-page .otp-inputs input:focus { outline: none; border-color: var(--auth-blue); box-shadow: 0 0 0 4px var(--auth-ring); }
.oim-login-speed-page .input-wrapper input { padding-right: 56px; }
.oim-login-speed-page .toggle-password { width: 44px; height: 44px; right: 4px; padding: 10px; border-radius: 8px; color: var(--auth-muted); }
.oim-login-speed-page :is(button,a):focus-visible { outline: 2px solid var(--auth-blue); outline-offset: 4px; }
.oim-login-speed-page .form-footer a { color: var(--auth-blue); font-weight: 600; }
.oim-login-speed-page .btn-login {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px;
    padding: 13px 16px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 10px;
    background: linear-gradient(110deg, #193b70, #286ec0); color: #fff;
    box-shadow: 0 5px 14px rgb(24 66 120 / 14%); transform: none;
}
.oim-login-speed-page .btn-login:hover { background: linear-gradient(110deg, #204a86, #307aca); transform: none; box-shadow: 0 6px 18px rgb(24 66 120 / 20%); }
.oim-login-speed-page .btn-login .btn-text,
.oim-login-speed-page .btn-login.loading .btn-text { opacity: 1; visibility: visible; }
.oim-login-speed-page .btn-login .btn-spinner { position: static; transform: none; margin: 0; flex-shrink: 0; width: 16px; height: 16px; }
.oim-login-speed-page .btn-login:disabled { cursor: wait; opacity: .85; }
.oim-login-speed-page .btn-back { display: block; width: 100%; text-align: center; color: var(--auth-blue); background: transparent; border: 0; box-shadow: none; border-radius: 8px; padding: 13px; margin-top: 12px; font-size: 14px; text-decoration: none; }
.oim-login-speed-page .btn-back:hover { background: var(--auth-ring); }
.oim-login-speed-page .login-hint,
.oim-login-speed-page .page-footer { color: var(--auth-muted); font-size: 11px; line-height: 1.6; }
.oim-login-speed-page .page-footer { position: absolute; bottom: 24px; left: 20px; right: 20px; text-align: center; }
.auth-field-error { color: var(--auth-error); font-size: 12px; line-height: 1.5; margin: 7px 0 0; }
.auth-form-error { color: var(--auth-error); background: var(--auth-error-bg); border: 1px solid color-mix(in srgb, var(--auth-error) 22%, transparent); border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.6; margin-bottom: 20px; overflow-wrap: anywhere; }
.oim-login-speed-page input[aria-invalid="true"] { border-color: var(--auth-error); }
.oim-login-speed-page [hidden] { display: none !important; }
.oim-login-speed-page .forgot-success { text-align: left; color: var(--auth-ink); }
.oim-login-speed-page .forgot-success .success-icon { margin: 0 0 24px; background: var(--auth-ring); color: var(--auth-blue); box-shadow: none; }
.oim-login-speed-page .forgot-success h3 { color: var(--auth-ink); }
.oim-login-speed-page .forgot-success p { color: var(--auth-muted); line-height: 1.7; }
.auth-step { display: block; margin-bottom: 12px; color: var(--auth-blue); font-size: 12px; font-weight: 600; letter-spacing: .4px; }
.otp-fieldset { min-width: 0; border: 0; padding: 0; margin: 0 0 26px; }
.otp-inputs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.oim-login-speed-page .otp-inputs input { width: 100%; padding: 8px 0; text-align: center; font-size: 23px; font-weight: 600; }
.auth-field-hint { font-size: 12px; line-height: 1.6; color: var(--auth-muted); margin-top: 12px; }
.oim-login-speed-page .password-change-modal { background: var(--auth-surface); color: var(--auth-ink); border: 1px solid var(--auth-border); border-radius: 20px; padding: 32px; }
.oim-login-speed-page .password-change-heading h2 { color: var(--auth-ink); }
.oim-login-speed-page :is(.password-change-heading p,.password-change-footnote) { color: var(--auth-muted); }
.oim-login-speed-page :is(.password-change-icon,.security-badge) { background: var(--auth-ring); color: var(--auth-blue); }
.oim-login-speed-page .password-rules span { background: var(--auth-input); color: var(--auth-muted); border-color: var(--auth-border); }
.oim-login-speed-page .password-rules span.is-valid { color: var(--auth-blue); background: var(--auth-ring); border-color: var(--auth-border); }
.oim-login-speed-page .strength-bars span.is-active { background: var(--auth-blue); }
@media (max-width: 1024px) {
    .oim-login-speed-page .right-panel { flex: 1 1 auto; width: 100%; border: 0; padding: 64px 28px 80px; }
}
@media (max-width: 380px) {
    .oim-login-speed-page .right-panel { padding-inline: 20px; }
    .otp-inputs { gap: 6px; }
    .oim-login-speed-page .password-change-modal { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .oim-login-speed-page :is(input,button,a) { transition: none; }
}
.oim-login-speed-page .password-rules span,
.oim-login-speed-page .password-rules span.is-valid { background: transparent; }
.oim-login-speed-page .password-rules span.is-valid::before { border-color: var(--auth-blue); background: var(--auth-ring); color: var(--auth-blue); }
.oim-login-speed-page .password-change-overlay { background: rgb(8 18 36 / 72%); }
.oim-login-speed-page .password-change-modal { margin-block: auto; }
@media (prefers-reduced-motion: reduce) {
    .oim-login-speed-page :is(.password-change-overlay,.password-change-modal,.forgot-success,.success-icon) { animation: none; }
}