/* Frontend auth controls share the supplied prototype's monochrome design.
 * Admin auth and the desktop two-column layout keep their existing rules. */
html body .auth-prototype {
    --auth-ink: #171821;
    --auth-muted: #676976;
    --auth-line: #dddfe6;
    --auth-button: #202027;
    --blue: var(--auth-ink);
    --ink: var(--auth-ink);
    --muted: var(--auth-muted);
}
html body .auth-prototype :is(.submit-btn, .outline-link) {
    background: var(--auth-button) !important;
    border-color: var(--auth-button) !important;
    color: #fff !important;
}
html body .auth-prototype :is(.social-btn, .google-icon, .password-toggle, .legal-link, .auth-links, .auth-forgot-link, .auth-return-link) { color: var(--auth-ink) !important; }
html body .auth-prototype .social-btn { border-color: var(--auth-line) !important; }
html body .auth-prototype .auth-main.has-showcase .auth-card :is(.auth-title, label, .password-toggle) { color: var(--auth-ink) !important; }
html body .auth-prototype :is(.auth-language-switch > a.active, .auth-mode-tab.active) { color: var(--auth-ink) !important; background: #eeeef1 !important; border-color: var(--auth-line) !important; box-shadow: none !important; }
html body .auth-prototype :is(input:focus, button:focus-visible, a:focus-visible) { outline: 2px solid #757580; outline-offset: 3px; box-shadow: none !important; }
.auth-forgot-link { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0 10px; font-size: 13px; }
.auth-return-link { display: flex; justify-content: center; align-items: center; min-height: 44px; margin-top: 18px; font-size: 13px; }
.auth-reset-action { display: flex; align-items: center; justify-content: center; text-align: center; }
.auth-reset-hint, .auth-reset-notice { margin: 18px 0; color: var(--auth-muted); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.auth-reset-notice { padding: 16px; background: #f6f6f8; border: 1px solid var(--auth-line); border-radius: 12px; }
.auth-prototype:is([data-auth-mode="forgot"], [data-auth-mode="reset"]) :is(.auth-mode-tabs, .switch-link, .illustration, .auth-showcase) { display: none !important; }
.auth-prototype:is([data-auth-mode="forgot"], [data-auth-mode="reset"]) .auth-main { display: flex; justify-content: center; }

/* Existing phone rules use an important layer; keep auth in that same layer. */
@layer fuuvo-mobile-design {
@media (max-width: 920px) {
    html body .auth-page.auth-prototype {
        --auth-ink: #171821 !important;
        --auth-muted: #676976 !important;
        --auth-line: #dddfe6 !important;
        --auth-surface: #fff !important;
        background: radial-gradient(ellipse 100% 180px at 50% -50px, #ffdaeb99, transparent), var(--auth-surface) !important;
        color: var(--auth-ink) !important;
        color-scheme: light !important;
    }
    html:is([data-theme="dark"], [data-ui-theme="dark"]) body .auth-page.auth-prototype,
    html body:is([data-theme="dark"], [data-ui-theme="dark"]) .auth-page.auth-prototype {
        --auth-ink: #f2f1f6 !important;
        --auth-muted: #b3b0c0 !important;
        --auth-line: #393545 !important;
        --auth-surface: #1a1820 !important;
        background: radial-gradient(ellipse 100% 180px at 50% -50px, #35222f, transparent), var(--auth-surface) !important;
        color-scheme: dark !important;
    }
    html body .auth-page.auth-prototype .auth-header { position: relative !important; padding: 6px 12px !important; gap: 0 !important; }
    html body .auth-page.auth-prototype .auth-mobile-back[hidden] { color: var(--auth-ink) !important; z-index: 1; }
    .auth-mobile-back svg { width: 24px; height: 24px; }
    html body .auth-page.auth-prototype .auth-mobile-page-title[hidden] {
        display: flex !important;
        position: absolute;
        inset: 0 70px;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 16px;
        line-height: 1.2;
        font-weight: 600;
        color: var(--auth-ink);
        pointer-events: none;
    }
    html body .auth-page.auth-prototype .auth-header-actions { gap: 0 !important; z-index: 1; }
    html body .auth-page.auth-prototype .auth-language-switch { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
    html body .auth-page.auth-prototype .auth-language-switch > a { width: 29px !important; min-width: 29px !important; min-height: 44px !important; padding: 0 3px !important; color: var(--auth-muted) !important; background: transparent !important; border: 0 !important; font-size: 11px !important; box-shadow: none !important; }
    html body .auth-page.auth-prototype .auth-language-switch > a.active { color: var(--auth-ink) !important; background: transparent !important; border: 0 !important; }
    html body .auth-page.auth-prototype .auth-mobile-logo[hidden] { width: 210px !important; height: 47px !important; margin: 16px 0 26px !important; }
    html body .auth-page.auth-prototype .auth-mobile-logo img { object-position: left center !important; filter: grayscale(1) brightness(0); }
    html:is([data-theme="dark"], [data-ui-theme="dark"]) body .auth-page.auth-prototype .auth-mobile-logo img,
    html body:is([data-theme="dark"], [data-ui-theme="dark"]) .auth-page.auth-prototype .auth-mobile-logo img { filter: grayscale(1) brightness(0) invert(1); }
    html body .auth-page.auth-prototype :is(.auth-title, .field label, .password-toggle, .social-btn, .google-icon, .legal-link, .auth-forgot-link, .auth-return-link) { color: var(--auth-ink) !important; -webkit-text-fill-color: currentColor !important; }
    html body .auth-page.auth-prototype :is(.auth-subtitle, .helper, .legal-check, .age-note, .divider, .auth-mobile-footer, .auth-reset-hint, .auth-reset-notice) { color: var(--auth-muted) !important; -webkit-text-fill-color: currentColor !important; }
    html body .auth-page.auth-prototype .auth-title { line-height: 1.13 !important; letter-spacing: -1px !important; }
    html body .auth-page.auth-prototype .field input { color: var(--auth-ink) !important; background: var(--auth-surface) !important; border-color: var(--auth-line) !important; -webkit-text-fill-color: currentColor !important; }
    html body .auth-page.auth-prototype .field input::placeholder { color: var(--auth-muted) !important; -webkit-text-fill-color: currentColor !important; opacity: 1; }
    html body .auth-page.auth-prototype .field input:-webkit-autofill { -webkit-text-fill-color: var(--auth-ink) !important; box-shadow: 0 0 0 1000px var(--auth-surface) inset !important; caret-color: var(--auth-ink) !important; }
    html body .auth-page.auth-prototype :is(.submit-btn, .auth-reset-action) { background: #202027 !important; color: #fff !important; border: 1px solid #202027 !important; -webkit-text-fill-color: currentColor !important; }
    html:is([data-theme="dark"], [data-ui-theme="dark"]) body .auth-page.auth-prototype .submit-btn,
    html body:is([data-theme="dark"], [data-ui-theme="dark"]) .auth-page.auth-prototype .submit-btn { border-color: #65616e !important; }
    html body .auth-page.auth-prototype .social-btn { background: var(--auth-surface) !important; border-color: var(--auth-line) !important; }
    html body .auth-page.auth-prototype .divider { margin: 18px 0 !important; font-size: 11px !important; gap: 12px !important; }
    html body .auth-page.auth-prototype .divider::before, html body .auth-page.auth-prototype .divider::after { background: var(--auth-line) !important; }
    html body .auth-page.auth-prototype .auth-mobile-footer { margin-top: 14px !important; }
    html body .auth-page.auth-prototype .auth-mobile-footer p { margin-bottom: 0 !important; }
    html body .auth-page.auth-prototype .auth-mobile-footer a { color: var(--auth-ink) !important; }
    html body .auth-page.auth-prototype .auth-reset-notice { background: var(--auth-surface) !important; border-color: var(--auth-line) !important; }
    html body .auth-page.auth-prototype .message { color: var(--mobile-account-danger) !important; overflow-wrap: anywhere !important; }
    html body .auth-page.auth-prototype .message.success { color: var(--mobile-account-success) !important; }
    html body:has(.auth-page.auth-prototype) .legal-overlay { z-index: 10050 !important; background: #17182170 !important; }
    html body:has(.auth-page.auth-prototype) .legal-dialog { max-height: calc(var(--mobile-viewport-height, 100dvh) - 24px) !important; padding-bottom: env(safe-area-inset-bottom) !important; }
    html body:has(.auth-page.auth-prototype) .legal-head { flex: 0 0 auto !important; gap: 12px !important; padding: 12px 16px 8px 20px !important; border-color: var(--mobile-account-line) !important; }
    html body:has(.auth-page.auth-prototype) .legal-head h3 { color: var(--mobile-account-ink) !important; font-size: 18px !important; line-height: 1.4 !important; }
    html body:has(.auth-page.auth-prototype) .legal-close { width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 12px !important; background: transparent !important; color: var(--mobile-account-ink) !important; }
    html body:has(.auth-page.auth-prototype) .legal-content { min-height: 0 !important; padding: 16px 20px 24px !important; color: var(--mobile-account-ink) !important; font-size: 14px !important; line-height: 1.75 !important; overflow-wrap: anywhere !important; overscroll-behavior: contain !important; }
    html body:has(.auth-page.auth-prototype) .legal-close:focus-visible { outline: 2px solid var(--mobile-account-ink) !important; outline-offset: 2px !important; }
    html body .auth-page.auth-prototype[data-auth-mode="login"] .consent-note,
    html body .auth-page.auth-prototype .auth-footer { display: none !important; }
}
}