.login-card .forgot-password { text-align: right; margin: 4px 0 18px; }
.forgot-password a { text-decoration: none; }
.login-card .password-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.login-card .password-toggle i { position: static; transform: none; color: #525c80; }
.login-card input[type=password], .login-card input[name=password] { padding-right: 52px; }
.password-toggle:focus-visible { outline: 2px solid #007f9d; outline-offset: 2px; }

@media (max-width: 768px) {
    body.auth-mobile { padding: 0; display: block; background: #fafcfc; }
    .auth-mobile .login-page, .auth-mobile .signup-page {
        display: flex; flex-direction: column; min-height: 100svh; width: 100%;
        border-radius: 0; box-shadow: none; overflow: hidden; background: #fafcfc;
    }
    .auth-mobile .auth-hero.login-hero, .auth-mobile .auth-hero.signup-hero {
        display: block; position: relative; min-height: 0; padding: 0;
        aspect-ratio: 850 / 790;
        background: url('images/mobile-auth-reference.png') left top / 100% auto no-repeat;
        /* Hide the mock phone status bar while retaining the original illustration. */
        background-position-y: -8.470588vw;
    }
    .auth-mobile .auth-hero .auth-art, .auth-mobile .auth-hero .auth-hero-copy { display: none; }
    .auth-mobile .login-card-wrap, .auth-mobile .signup-card-wrap {
        position: relative; isolation: isolate; display: block; flex: 1;
        padding: 8px 8.35% 100px; background: #fafcfc;
    }
    .auth-mobile .login-card-wrap::before, .auth-mobile .signup-card-wrap::before {
        content: ''; position: absolute; z-index: -1; pointer-events: none;
        left: 0; right: 0; top: -30px; height: 42px;
        background: #fafcfc; border-radius: 55% 40% 0 0 / 70% 40% 0 0;
    }
    .auth-mobile .login-card-wrap::after, .auth-mobile .signup-card-wrap::after {
        content: ''; position: absolute; z-index: -1; pointer-events: none;
        left: -15%; right: -15%; bottom: -100px; height: 160px;
        border-top: 2px solid #e4bc68; border-radius: 48% 80% 0 0;
        background: linear-gradient(120deg, #00476a, #0787a2 55%, #dff2f3 55%);
        transform: rotate(12deg);
    }
    .auth-mobile .login-card h2, .auth-mobile .signup-card h2 {
        color: #080f3b; font-size: clamp(28px, 7.3vw, 42px); letter-spacing: -1px;
        margin: 0 0 8px; line-height: 1.15; font-weight: 750;
    }
    .auth-mobile .subtitle { color: #777e9a !important; font-size: 16px; font-weight: 400; line-height: 1.5; margin-bottom: 22px; }
    .auth-mobile .form-group { margin-bottom: 14px; }
    .auth-mobile .login-card .form-group label {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .auth-mobile .login-page input, .auth-mobile .signup-page input {
        min-height: 50px; border: 1px solid #d7dbE8; border-radius: 12px;
        background: #ffffffb3; font-size: 16px; color: #121c44;
    }
    .auth-mobile input::placeholder { color: #939ab5; opacity: 1; }
    .auth-mobile .input-wrap > i { color: #555f81; font-size: 19px; left: 16px; }
    .auth-mobile .input-wrap input { padding-left: 48px; }
    .auth-mobile .forgot-password { margin: -4px 0 16px; font-size: 14px; }
    .auth-mobile .login-card a, .auth-mobile .signup-card a { color: #007b9a; }
    .auth-mobile .login-btn, .auth-mobile .signup-card .btn {
        display: flex; justify-content: center; align-items: center; gap: 12px;
        min-height: 50px; padding: 12px; margin-top: 0; border-radius: 12px;
        background: #007994 !important; color: #fff; font-size: 18px; font-weight: 650;
    }
    .auth-mobile .login-btn span, .auth-mobile .btn span { font-size: 25px; line-height: 1; }
    .auth-mobile .signup-link, .auth-mobile .login-link { margin-top: 28px; color: #787e99; font-size: 14px; font-weight: 400; line-height: 1.6; }
    .auth-mobile .signup-link a, .auth-mobile .login-link a { margin-left: 5px; font-weight: 700; }
    .auth-mobile .back-login { font-size: 13px; margin: 0 0 14px; }
    .auth-mobile .field { margin-bottom: 15px; }
    .auth-mobile .field label { color: #525d7a; font-size: 13px; font-weight: 600; }
    .auth-mobile .help { color: #69738a; line-height: 1.5; }
    .auth-mobile .help ul { padding-left: 18px; }
}