/**
 * Scoped auth UX improvements — does not modify account.css profile/dashboard rules.
 * Loaded only on auth shells via _auth_mobile_shell.html.
 */

.auth-page {
    background:
        radial-gradient(circle at top right, rgba(52, 84, 209, 0.1), transparent 32%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.auth-mobile-main {
    min-height: 100dvh;
    align-items: center;
    padding: 24px 16px;
    background: transparent;
}

.auth-mobile-frame {
    width: min(440px, 100%);
}

.auth-mobile-screen {
    width: 100%;
    min-height: auto;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow:
        0 24px 64px rgba(15, 23, 42, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    padding: 28px 22px 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.42), transparent 42%),
        rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.auth-mobile-toolbar {
    display: flex;
    justify-content: flex-start;
}

.auth-mobile-status {
    display: none;
}

.auth-mobile-logo-wrap {
    padding-top: 8px;
}

.auth-mobile-logo {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    box-shadow: 0 16px 32px rgba(52, 84, 209, 0.16);
}

.auth-mobile-copy {
    text-align: center;
}

.auth-mobile-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(52, 84, 209, 0.08);
    color: #3454d1;
    font-size: 0.78rem;
    font-weight: 800;
}

.auth-mobile-title {
    font-size: clamp(1.35rem, 4vw, 1.65rem);
}

.auth-mobile-description {
    color: #64748b;
}

.auth-mobile-screen .field-group label {
    font-size: 0.82rem;
    font-weight: 800;
    color: #0f172a;
}

.auth-mobile-screen .form-input,
.auth-mobile-screen .enterprise-input,
.auth-mobile-screen .account-input,
.auth-mobile-screen .auth-input {
    min-height: 52px;
    border-radius: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-mobile-screen .form-input:focus-visible,
.auth-mobile-screen .enterprise-input:focus-visible,
.auth-mobile-screen .account-input:focus-visible,
.auth-mobile-screen .auth-input:focus-visible {
    outline: 3px solid rgba(52, 84, 209, 0.18);
    outline-offset: 2px;
}

.auth-mobile-primary {
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.auth-mobile-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 36px rgba(47, 78, 204, 0.26);
}

.auth-mobile-primary:focus-visible {
    outline: 3px solid rgba(52, 84, 209, 0.22);
    outline-offset: 3px;
}

.auth-mobile-primary.is-loading {
    position: relative;
    overflow: hidden;
    color: transparent;
    opacity: 0.9;
    pointer-events: none;
    cursor: wait;
}

.auth-mobile-primary.is-loading::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    animation: authButtonSpin 0.72s linear infinite;
}

@keyframes authButtonSpin {
    to {
        transform: rotate(360deg);
    }
}

.auth-mobile-links a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.auth-mobile-links a:hover {
    background: rgba(52, 84, 209, 0.06);
}

.auth-mobile-links a:focus-visible {
    outline: 3px solid rgba(52, 84, 209, 0.18);
    outline-offset: 2px;
}

.auth-mobile-screen .form-messages,
.auth-mobile-form .form-messages {
    display: grid;
    gap: 10px;
}

.auth-mobile-screen .form-message,
.auth-mobile-form .form-message {
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.6;
}

.auth-mobile-screen .form-message.is-error,
.auth-mobile-screen .form-message.is-danger,
.auth-mobile-form .form-message.is-error,
.auth-mobile-form .form-message.is-danger {
    background: rgba(254, 226, 226, 0.9);
    color: #991b1b;
    border: 1px solid rgba(248, 113, 113, 0.35);
}

.auth-mobile-screen .form-message.is-success,
.auth-mobile-form .form-message.is-success {
    background: rgba(220, 252, 231, 0.92);
    color: #166534;
    border: 1px solid rgba(74, 222, 128, 0.35);
}

.auth-mobile-screen .form-message.is-info,
.auth-mobile-form .form-message.is-info {
    background: rgba(219, 234, 254, 0.92);
    color: #1d4ed8;
    border: 1px solid rgba(96, 165, 250, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .auth-mobile-primary {
        transition: none;
    }

    .auth-mobile-primary:hover {
        transform: none;
    }
}

@media (min-width: 768px) {
    .auth-mobile-main {
        padding: 40px 24px;
    }

    .auth-mobile-screen {
        padding: 36px 32px 40px;
    }
}

/* Dark auth glass polish: explicit contrast for the isolated auth shell. */
.dark body.auth-page,
.dark .auth-page {
    background:
        radial-gradient(circle at 82% 8%, rgba(14, 165, 233, 0.18), transparent 30%),
        radial-gradient(circle at 14% 26%, rgba(45, 212, 191, 0.12), transparent 30%),
        linear-gradient(180deg, #020617 0%, #07111f 52%, #0f172a 100%);
    color: #f8fafc;
}

.dark .auth-page .site-shell,
.dark .auth-page .site-content,
.dark .auth-mobile-main {
    background: transparent;
    color: #f8fafc;
}

.dark .auth-mobile-screen {
    border-color: rgba(148, 163, 184, 0.3);
    background:
        linear-gradient(145deg, rgba(125, 211, 252, 0.14), transparent 38%),
        linear-gradient(315deg, rgba(99, 102, 241, 0.1), transparent 44%),
        rgba(15, 23, 42, 0.78);
    box-shadow:
        0 28px 78px rgba(0, 0, 0, 0.44),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(26px) saturate(155%);
    -webkit-backdrop-filter: blur(26px) saturate(155%);
}

.dark .auth-mobile-eyebrow {
    background: rgba(14, 165, 233, 0.24);
    color: #e0f2fe;
    border: 1px solid rgba(125, 211, 252, 0.36);
}

.dark .auth-mobile-title,
.dark .auth-mobile-screen .field-group label {
    color: #f8fafc;
}

.dark .auth-mobile-description {
    color: #cbd5e1;
}

.dark .auth-mobile-screen .form-input,
.dark .auth-mobile-screen .enterprise-input,
.dark .auth-mobile-screen .account-input,
.dark .auth-mobile-screen .auth-input {
    background: rgba(2, 6, 23, 0.58);
    border: 1px solid rgba(148, 163, 184, 0.32);
    color: #f8fafc;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dark .auth-mobile-screen .form-input::placeholder,
.dark .auth-mobile-screen .enterprise-input::placeholder,
.dark .auth-mobile-screen .account-input::placeholder,
.dark .auth-mobile-screen .auth-input::placeholder {
    color: rgba(203, 213, 225, 0.72);
}

.dark .auth-mobile-screen .form-input:focus-visible,
.dark .auth-mobile-screen .enterprise-input:focus-visible,
.dark .auth-mobile-screen .account-input:focus-visible,
.dark .auth-mobile-screen .auth-input:focus-visible {
    border-color: rgba(125, 211, 252, 0.58);
    outline: 3px solid rgba(14, 165, 233, 0.2);
}

.dark .auth-mobile-primary {
    color: #f8fafc;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 40%),
        linear-gradient(135deg, #2563eb 0%, #0ea5e9 56%, #14b8a6 100%);
    box-shadow: 0 18px 42px rgba(14, 165, 233, 0.28);
}

.dark .auth-mobile-links a {
    color: #7dd3fc;
}

.dark .auth-mobile-links a:hover {
    background: rgba(14, 165, 233, 0.14);
    color: #bae6fd;
}

.dark .auth-mobile-screen .form-message.is-error,
.dark .auth-mobile-screen .form-message.is-danger,
.dark .auth-mobile-form .form-message.is-error,
.dark .auth-mobile-form .form-message.is-danger {
    background: rgba(127, 29, 29, 0.52);
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.34);
}

.dark .auth-mobile-screen .form-message.is-success,
.dark .auth-mobile-form .form-message.is-success {
    background: rgba(20, 83, 45, 0.5);
    color: #bbf7d0;
    border-color: rgba(74, 222, 128, 0.3);
}

.auth-mobile-phone-row {
    display: grid;
    gap: 10px;
}

.auth-mobile-description--phone {
    margin: 0;
}

.auth-mobile-phone {
    display: inline-block;
    margin: 0 4px;
    color: inherit;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.auth-mobile-edit-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(52, 84, 209, 0.08);
    color: #3454d1;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    width: fit-content;
}

.auth-mobile-edit-phone:hover {
    background: rgba(52, 84, 209, 0.14);
}

.auth-otp-timers {
    display: grid;
    gap: 6px;
    margin-bottom: 4px;
}

.auth-otp-timer {
    margin: 0;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
}

.auth-otp-timer span {
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.auth-mobile-secondary.is-disabled {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

.dark .auth-mobile-edit-phone {
    background: rgba(14, 165, 233, 0.14);
    color: #7dd3fc;
}

.dark .auth-mobile-edit-phone:hover {
    background: rgba(14, 165, 233, 0.22);
}

.dark .auth-otp-timer {
    color: #cbd5e1;
}

.dark .auth-otp-timer span {
    color: #f8fafc;
}