/* QuizioMatch Redesign 2026 — auth layer. See qm/qm-base.css for tokens.
   ==========================================================================
   Covers (design frame → real DOM):
     SAuth        → #authScreen            (login / signup, consents)
     SVerify      → #verificationScreen
     SReset       → #passwordResetScreen
     SResetNew    → #passwordResetNewScreen
     SSetup       → #profileSetupScreen
     SLandingAI   → #profileLandingScreen  (?p= AI invite)
     SLandingUser → #userLandingScreen     (?p= user invite)
     SAuthSheet   → #authModal (.aum-overlay / .aum-sheet)
   Overrides auth-redesign.css + style.css. Never touches display /
   visibility of the screens themselves — JS owns that.
   ========================================================================== */

/* ── Shared canvas ─────────────────────────────────────────────────────── */
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen, #profileSetupScreen) {
    background: var(--qm-bg);
    color: var(--qm-fg);
    font-family: var(--qm-sans);
}
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen)::before,
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen)::after {
    content: none;
}

.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .auth-container {
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 20px calc(28px + env(safe-area-inset-bottom, 0px));
    background: transparent;
    border: 0;
    box-shadow: none;
    text-align: start;
    animation: qmAuthIn .42s var(--qm-ease-out) both;
}
/* Layout guard. Legacy layers (critical-ui-fix, vivid-redesign, auth-redesign)
   still turn the screen into a centred flex column and give the container a
   card background + min-height:100dvh. Together that let the container SHRINK
   to the viewport while its form kept going: the lower fields and buttons sat
   outside the card, and the card colour equalled the field colour, so inputs
   had no visible box. Here the container never shrinks, the screen scrolls
   from the top, and the page canvas shows through so fields read as fields. */
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) {
    justify-content: flex-start;
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    background: var(--qm-bg) !important;
}
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .auth-container {
    flex: 0 0 auto;
    height: auto;
    min-height: 100%;
    margin: 0 auto;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
}
@keyframes qmAuthIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ── Wordmark (QuizioMatch) ────────────────────────────────────────────── */
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .auth-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
}
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .auth-brand-dot,
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .auth-brand-dot[data-viv] {
    width: 26px;
    height: 26px;
    border-radius: 30%;
    background: var(--qm-pink);
    box-shadow: none;
    filter: none;
    overflow: hidden;
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
}
/* the animated mascot is decorative (aria-hidden) — the redesign uses a "Q" tile */
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .auth-brand-dot > * {
    opacity: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .auth-brand-dot::after {
    content: "Q";
    font: italic 800 19px/1 Georgia, "Times New Roman", serif;
    color: #fff;
}
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .auth-brand-name {
    font: 800 18px/1 var(--qm-sans);
    letter-spacing: -.03em;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--qm-fg);
}
.qm-wm-accent { color: var(--qm-pink-soft); }

/* ── Headline + copy ───────────────────────────────────────────────────── */
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .auth-container h2 {
    font: 800 clamp(38px, 11vw, 46px)/1 var(--qm-disp);
    letter-spacing: -.035em;
    margin: 0 0 12px;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--qm-fg);
    text-wrap: balance;
}
.screen:is(#verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .auth-container h2 {
    font-size: clamp(30px, 8.4vw, 34px);
}
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .auth-subtitle {
    font: 400 15px/1.45 var(--qm-sans);
    color: var(--qm-fg2);
    margin: 0 0 24px;
    max-width: 360px;
    text-wrap: pretty;
}

/* ── SAuth: sticker trio ───────────────────────────────────────────────── */
#authScreen .qm-auth-stickers {
    position: relative;
    height: 150px;
    flex: none;
    margin: 0 0 8px;
    pointer-events: none;
}
#authScreen .qm-auth-stk {
    position: absolute;
    border-radius: 30%;
    display: grid;
    place-items: center;
    line-height: 1;
    animation: qmStkIn .6s var(--qm-ease-spring) both;
}
#authScreen .qm-auth-stk--a { left: 2%;  top: 30px; width: 84px; height: 84px; font-size: 44px; background: var(--qm-pink-pale); --r: -10deg; transform: rotate(-10deg); }
#authScreen .qm-auth-stk--b { left: 36%; top: 0;    width: 72px; height: 72px; font-size: 37px; background: var(--qm-violet);    --r: 9deg;   transform: rotate(9deg);   animation-delay: .06s; }
#authScreen .qm-auth-stk--c { right: 3%; top: 50px; width: 80px; height: 80px; font-size: 42px; background: var(--qm-pink);      --r: -4deg;  transform: rotate(-4deg);  animation-delay: .12s; }
@keyframes qmStkIn {
    from { opacity: 0; transform: translateY(14px) rotate(0deg) scale(.86); }
    to   { opacity: 1; transform: rotate(var(--r)); }
}
@media (max-height: 700px) {
    #authScreen .qm-auth-stickers { height: 96px; }
    #authScreen .qm-auth-stk { transform-origin: center; }
    #authScreen .qm-auth-stk--a { width: 60px; height: 60px; font-size: 31px; top: 22px; }
    #authScreen .qm-auth-stk--b { width: 52px; height: 52px; font-size: 27px; }
    #authScreen .qm-auth-stk--c { width: 58px; height: 58px; font-size: 30px; top: 32px; }
}

/* ── SAuth: segmented control ──────────────────────────────────────────── */
#authScreen .auth-toggle {
    display: flex;
    gap: 4px;
    padding: 5px;
    margin: 0 0 18px;
    background: var(--qm-s1);
    border: 0;
    border-radius: var(--qm-r-pill);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
#authScreen .auth-toggle .toggle-btn {
    flex: 1;
    height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: transparent;
    color: var(--qm-fg2);
    font: 600 14px/1 var(--qm-sans);
    letter-spacing: 0;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .18s var(--qm-ease-out), color .18s var(--qm-ease-out), transform .14s var(--qm-ease-spring);
}
#authScreen .auth-toggle .toggle-btn:hover { color: var(--qm-fg); }
#authScreen .auth-toggle .toggle-btn:active { transform: scale(.97); }
#authScreen .auth-toggle .toggle-btn:focus-visible { outline: 2px solid var(--qm-pink-soft); outline-offset: 2px; }
#authScreen .auth-toggle .toggle-btn.active {
    background: var(--qm-cream);
    color: var(--qm-ink);
    box-shadow: none;
}

/* ── Forms + fields (all auth screens) ─────────────────────────────────── */
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .auth-form {
    gap: 14px;
}
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .input-group {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .input-group label {
    font: 600 13px/1.2 var(--qm-sans);
    color: var(--qm-fg2);
    text-transform: none;
    letter-spacing: 0;
    margin: 0 0 0 4px;
    padding: 0;
}
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .input-group input {
    height: 58px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 18px;
    border: 0;
    border-radius: var(--qm-r-field);
    background-color: var(--qm-s2);
    color: var(--qm-fg);
    font: 400 16px/1 var(--qm-sans);
    box-shadow: none;
    outline: none;
    transition: box-shadow .16s var(--qm-ease-out);
}
/* leading mail / lock icon like the redesign field */
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .input-group input:is([type="email"], [type="password"]) {
    padding-inline-start: 50px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 18px center;
}
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .input-group input[type="email"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM22 6l-10 7L2 6'/%3E%3C/svg%3E");
}
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .input-group input[type="password"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11h14v10H5zM8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}
body.rtl .screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .input-group input:is([type="email"], [type="password"]) {
    background-position: calc(100% - 18px) center;
}
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .input-group input::placeholder {
    color: var(--qm-fg3);
    opacity: 1;
}
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .input-group input:hover {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1);
}
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .input-group input:focus,
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .input-group input:focus-visible {
    box-shadow: 0 0 0 2px var(--qm-pink);
    outline: none;
    border: 0;
}
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .input-group input:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px var(--qm-s2) inset;
    caret-color: #fff;
}

/* Forgot password link */
#authScreen .forgot-password-row {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 4px;
    text-align: end;
}
#authScreen .btn-forgot-password {
    background: none;
    border: 0;
    padding: 6px 4px;
    color: var(--qm-pink-soft);
    font: 600 13px/1.2 var(--qm-sans);
    cursor: pointer;
    border-radius: 8px;
    transition: opacity .14s, transform .14s var(--qm-ease-spring);
}
#authScreen .btn-forgot-password:hover { text-decoration: none; opacity: .82; }
#authScreen .btn-forgot-password:active { transform: scale(.96); }
#authScreen .btn-forgot-password:focus-visible { outline: 2px solid var(--qm-pink-soft); outline-offset: 2px; }

/* ── Buttons: pink 3D primary + cream Google pill ──────────────────────── */
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .btn-primary {
    height: 56px;
    width: 100%;
    padding: 0 24px;
    margin: 4px 0 0;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: var(--qm-pink);
    color: #fff;
    font: 700 16px/1 var(--qm-sans);
    letter-spacing: -.01em;
    text-transform: none;
    box-shadow: var(--qm-shadow-pink-btn);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s var(--qm-ease-out), opacity .14s !important;
}
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--qm-shadow-pink-btn);
    filter: none;
}
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .btn-primary:active {
    transform: translateY(3px);
    box-shadow: var(--qm-shadow-pink-btn-press);
}
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .btn-primary:focus-visible {
    outline: none;
    box-shadow: var(--qm-shadow-pink-btn), var(--qm-focus-ring);
}
.screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .btn-primary:disabled {
    opacity: .6;
    cursor: default;
}

#authScreen .divider {
    margin: 4px 0;
    color: var(--qm-fg3);
}
#authScreen .divider::before,
#authScreen .divider::after { background: var(--qm-line); }
#authScreen .divider span {
    background: var(--qm-bg);
    color: var(--qm-fg3);
    font: 600 12px/1 var(--qm-sans);
    letter-spacing: .04em;
}

#authScreen .btn-google {
    height: 56px;
    width: 100%;
    padding: 0 24px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: var(--qm-cream);
    color: var(--qm-ink);
    font: 700 16px/1 var(--qm-sans);
    letter-spacing: -.01em;
    box-shadow: var(--qm-shadow-cream-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s var(--qm-ease-out), opacity .14s !important;
}
#authScreen .btn-google:hover { transform: translateY(-1px); background: var(--qm-cream); box-shadow: var(--qm-shadow-cream-btn); }
#authScreen .btn-google:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--qm-cream-edge); }
#authScreen .btn-google:focus-visible { outline: none; box-shadow: var(--qm-shadow-cream-btn), var(--qm-focus-ring); }
#authScreen .btn-google svg { width: 20px; height: 20px; flex: none; }
#authScreen .btn-google.is-loading::after { border-color: rgba(26, 14, 20, .2); border-top-color: var(--qm-ink); }

/* ── Consent checkbox + legal ──────────────────────────────────────────── */
:is(#authScreen, #authModal) .auth-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 2px 0;
    padding: 14px 16px;
    border-radius: 20px;
    background: var(--qm-s1);
    color: var(--qm-fg2);
    font: 400 13px/1.45 var(--qm-sans);
    cursor: pointer;
    text-align: start;
}
:is(#authScreen, #authModal) .auth-consent input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex: none;
    margin: 0;
    accent-color: var(--qm-pink);
    border-radius: 6px;
    cursor: pointer;
}
:is(#authScreen, #authModal) .auth-consent input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--qm-pink-soft);
    outline-offset: 2px;
}
:is(#authScreen, #authModal) .auth-consent-text a,
#authScreen .auth-legal-footer a {
    color: var(--qm-pink-soft);
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
}
:is(#authScreen, #authModal) .auth-consent-text a:hover,
#authScreen .auth-legal-footer a:hover { text-decoration: underline; color: var(--qm-pink-pale); }
:is(#authScreen, #authModal) .auth-consent-text a:active,
#authScreen .auth-legal-footer a:active { opacity: .7; }
#authScreen .auth-legal-footer {
    margin-top: auto;
    padding-top: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--qm-fg3);
}

/* ── Back button (verify / reset) ──────────────────────────────────────── */
.screen:is(#verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .back-btn {
    position: static;
    width: 44px;
    height: 44px;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--qm-s2);
    color: var(--qm-fg);
    display: grid;
    place-items: center;
    flex: none;
    cursor: pointer;
    transition: transform .14s var(--qm-ease-spring), background-color .14s;
}
.screen:is(#verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .back-btn:hover { background: var(--qm-s3); border: 0; }
.screen:is(#verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .back-btn:active { transform: scale(.92); }
body.rtl .screen:is(#verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .back-btn:active { transform: scaleX(-1) scale(.92); }
.screen:is(#verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .back-btn:focus-visible { outline: 2px solid var(--qm-pink-soft); outline-offset: 2px; }
.screen:is(#verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .back-btn svg { width: 22px; height: 22px; }

/* card wrapper → flat (the redesign has no panel behind these screens) */
.screen:is(#verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .auth-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: none;
    text-align: start;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}
.screen:is(#verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .auth-container {
    min-height: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* Emoji sticker instead of the line icon (decorative; alt text empty) */
.screen:is(#verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .verification-icon {
    width: 76px;
    height: 76px;
    margin: 4px 0 24px;
    border-radius: 30%;
    background: var(--qm-s2);
    display: grid;
    place-items: center;
    position: relative;
    transform: rotate(-8deg);
    flex: none;
    text-align: center;
}
.screen:is(#verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .verification-icon::before {
    content: "🔑" / "";
    position: static;
    width: auto;
    height: auto;
    transform: none;
    background: none;
    filter: none;
    font-size: 40px;
    line-height: 1;
    animation: none;
    border: 0;
    inset: auto;
}
.screen:is(#verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .verification-icon::after { content: none; }
.screen:is(#verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .verification-icon svg {
    display: none;
}
#passwordResetNewScreen .verification-icon { transform: rotate(6deg); }
#passwordResetNewScreen .verification-icon::before { content: "🔒" / ""; }

/* SVerify: centred, big pale-pink envelope sticker */
#verificationScreen .auth-card { text-align: center; align-items: center; justify-content: center; }
#verificationScreen .verification-icon {
    width: 128px;
    height: 128px;
    margin: 0 auto 28px;
    background: var(--qm-pink-pale);
    transform: rotate(-6deg);
}
#verificationScreen .verification-icon::before { content: "💌" / ""; font-size: 66px; }
#verificationScreen .auth-subtitle { margin: 0 auto 12px; max-width: 320px; }
#verificationScreen .auth-subtitle-small { font-size: 14px; color: var(--qm-fg3); margin: 14px auto 24px; }
#verificationScreen .auth-card .btn-primary { margin-top: auto; }

.auth-email-chip,
.screen .auth-email-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--qm-r-pill);
    background: var(--qm-s2);
    border: 0;
    color: var(--qm-fg);
    font: 700 14px/1 var(--qm-sans);
    box-shadow: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.auth-email-chip::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--qm-green);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .18);
    animation: none;
}
#passwordResetNewScreen .auth-email-chip { margin: 0 0 18px; align-self: flex-start; }

#verificationScreen .verification-error,
#passwordResetNewScreen .verification-error {
    background: rgba(255, 59, 48, .12);
    color: var(--qm-red-soft);
    border: 0;
    border-radius: 16px;
    padding: 12px 14px;
    font: 500 14px/1.4 var(--qm-sans);
    text-align: start;
}

#verificationScreen .resend-section {
    margin-top: 10px !important;
    padding: 0;
    border: 0;
    text-align: center;
}
#verificationScreen .resend-section::before { content: none; }
#verificationScreen .resend-section p {
    font: 400 13px/1.4 var(--qm-sans);
    color: var(--qm-fg3);
    margin: 8px 0 0;
}
#verificationScreen .btn-resend {
    height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: transparent;
    color: var(--qm-fg);
    font: 600 16px/1 var(--qm-sans);
    cursor: pointer;
    transition: transform .14s var(--qm-ease-spring), background-color .14s;
}
#verificationScreen .btn-resend:hover { background: var(--qm-s2); }
#verificationScreen .btn-resend:active { transform: scale(.96); }
#verificationScreen .btn-resend:focus-visible { outline: 2px solid var(--qm-pink-soft); outline-offset: 2px; }
#verificationScreen .btn-resend:disabled { opacity: .45; background: transparent; cursor: default; }
#verificationScreen .resend-timer,
#verificationScreen .resend-timer span { color: var(--qm-fg3) !important; font-weight: 600 !important; }

/* SReset / SResetNew: left aligned, CTA pinned to the bottom */
/* JS toggles these forms with inline display:block/none — only re-flow the
   visible state (inline "none" keeps hiding them). */
.screen:is(#passwordResetScreen, #passwordResetNewScreen) .auth-form:not([style*="none"]) {
    display: flex !important;
}
.screen:is(#passwordResetScreen, #passwordResetNewScreen) .auth-form {
    flex-direction: column;
    flex: 1 0 auto;
    gap: 16px;
    margin-top: 6px;
    animation: none;
}
.screen:is(#passwordResetScreen, #passwordResetNewScreen) .auth-form .btn-primary { margin-top: auto; }

/* Success states */
#passwordResetScreen #resetEmailSent,
#passwordResetNewScreen #passwordResetNewSuccess {
    background: transparent;
    border: 0;
    padding: 0;
    text-align: start;
    box-shadow: none;
}
.screen:is(#passwordResetScreen, #passwordResetNewScreen) .reset-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 0 18px;
    border-radius: 30%;
    background: rgba(74, 222, 128, .16);
    color: var(--qm-green);
    border: 0;
    box-shadow: none;
    display: grid;
    place-items: center;
    animation: none;
}
.screen:is(#passwordResetScreen, #passwordResetNewScreen) .reset-success-icon svg { width: 30px; height: 30px; stroke: currentColor; }
.screen:is(#passwordResetScreen, #passwordResetNewScreen) :is(#resetEmailSent, #passwordResetNewSuccess) h3 {
    font: 800 26px/1.05 var(--qm-disp);
    letter-spacing: -.035em;
    color: var(--qm-fg);
    margin: 0 0 10px;
}
.screen:is(#passwordResetScreen, #passwordResetNewScreen) :is(#resetEmailSent, #passwordResetNewSuccess) p.sub {
    font: 400 15px/1.45 var(--qm-sans);
    color: var(--qm-fg2);
    margin: 0 0 18px;
}
#passwordResetScreen #resetEmailSent .steps {
    list-style: none;
    margin: 0 0 22px;
    padding: 4px 18px;
    background: var(--qm-s1);
    border-radius: var(--qm-r-card);
    display: block;
}
#passwordResetScreen #resetEmailSent .steps li {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 10px 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font: 600 14px/1.4 var(--qm-sans);
    color: var(--qm-fg);
}
#passwordResetScreen #resetEmailSent .steps li + li { border-top: 1px solid var(--qm-line); }
#passwordResetScreen #resetEmailSent .steps .step-num {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 30%;
    background: var(--qm-pink-pale);
    color: var(--qm-ink-pale);
    font: 800 17px/1 var(--qm-sans);
    display: grid;
    place-items: center;
    box-shadow: none;
}

.screen:is(#verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .auth-support-line {
    margin: 18px 0 0;
    text-align: center;
    font: 400 13px/1.4 var(--qm-sans);
    color: var(--qm-fg3);
}
.screen:is(#verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .auth-support-line a {
    color: var(--qm-pink-soft);
    font-weight: 600;
    text-decoration: none;
}
.screen:is(#verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .auth-support-line a:hover { text-decoration: underline; }
.screen:is(#verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .auth-support-line a:focus-visible { outline: 2px solid var(--qm-pink-soft); outline-offset: 2px; border-radius: 4px; }

/* ==========================================================================
   SSetup — #profileSetupScreen
   ========================================================================== */
#profileSetupScreen .profile-setup-container {
    max-width: 440px;
    align-items: stretch;
    gap: 18px;
    padding: calc(24px + env(safe-area-inset-top, 0px)) 20px calc(30px + env(safe-area-inset-bottom, 0px));
    animation: qmAuthIn .42s var(--qm-ease-out) both;
}
#profileSetupScreen .setup-header { text-align: start; }
#profileSetupScreen .setup-sparkle[data-viv] {
    margin: 0 0 14px;
    filter: none;
    width: 56px;
    height: 56px;
}
#profileSetupScreen .setup-title {
    font: 800 clamp(30px, 8.4vw, 34px)/1 var(--qm-disp);
    letter-spacing: -.035em;
    color: var(--qm-fg);
    margin: 0 0 10px;
    text-wrap: balance;
}
#profileSetupScreen .setup-subtitle {
    font: 400 15px/1.45 var(--qm-sans);
    color: var(--qm-fg2);
    padding: 0;
}

/* photo tile: dashed pink */
#profileSetupScreen .setup-photos-wrap { align-items: stretch; }
#profileSetupScreen .setup-cover-area {
    height: 148px;
    border-radius: 30px;
    border: 2px dashed rgba(255, 128, 171, .5);
    background: rgba(233, 30, 99, .08);
    transition: transform .14s var(--qm-ease-spring), opacity .14s;
}
#profileSetupScreen .setup-cover-area:hover { background: rgba(233, 30, 99, .12); }
#profileSetupScreen .setup-cover-area:active { transform: scale(.985); }
#profileSetupScreen .setup-cover-area.has-cover { border: 0; background: var(--qm-s2); }
#profileSetupScreen .setup-cover-overlay {
    flex-direction: column;
    gap: 8px;
    color: var(--qm-pink-soft);
    font: 700 13px/1.2 var(--qm-sans);
    text-align: center;
}
#profileSetupScreen .setup-cover-overlay svg { width: 28px; height: 28px; }
#profileSetupScreen .setup-cover-overlay [data-i18n="profileSetup.required"] {
    color: var(--qm-fg3) !important;
    font-weight: 600 !important;
}

#profileSetupScreen .setup-label {
    font: 600 13px/1.2 var(--qm-sans);
    color: var(--qm-fg2);
    text-transform: none;
    letter-spacing: 0;
    margin: 0 0 8px 4px;
}
#profileSetupScreen .setup-req { color: var(--qm-pink-soft); }
#profileSetupScreen .setup-optional { color: var(--qm-fg3); font-weight: 500; }

#profileSetupScreen .setup-input {
    min-height: 58px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--qm-r-field);
    background-color: var(--qm-s2);
    color: var(--qm-fg);
    font: 400 16px/1.3 var(--qm-sans);
    box-shadow: none;
    transition: box-shadow .16s var(--qm-ease-out);
}
#profileSetupScreen .setup-input::placeholder { color: var(--qm-fg3); }
#profileSetupScreen .setup-input:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
#profileSetupScreen .setup-input:focus,
#profileSetupScreen .setup-input:focus-visible { border: 0; box-shadow: 0 0 0 2px var(--qm-pink); outline: none; }
#profileSetupScreen .setup-textarea {
    padding: 18px 64px 18px 18px !important;
    min-height: 58px;
}
body.rtl #profileSetupScreen .setup-textarea { padding: 18px 18px 18px 64px !important; }
#profileSetupScreen .setup-char-count { bottom: auto; top: 39px; font-size: 13px; color: var(--qm-fg3); inset-inline-end: 16px; }
body.rtl #profileSetupScreen .setup-char-count { right: auto; }
#profileSetupScreen .setup-hint { color: var(--qm-fg3) !important; font-size: 12px !important; margin: 6px 0 0 4px !important; }
#profileSetupScreen select.setup-input {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: calc(100% - 18px) center;
    cursor: pointer;
}
body.rtl #profileSetupScreen select.setup-input { background-position: 18px center; }
#profileSetupScreen select.setup-input option { background: var(--qm-s1); color: var(--qm-fg); }

/* gender cards */
#profileSetupScreen .setup-gender-row { gap: 10px; }
#profileSetupScreen .setup-gender-btn {
    min-height: 58px;
    padding: 0 14px;
    border: 0;
    border-radius: 22px;
    background: var(--qm-s2);
    color: var(--qm-fg);
    font: 700 15px/1 var(--qm-sans);
    justify-content: flex-start;
    gap: 10px;
    box-shadow: none;
    transition: transform .14s var(--qm-ease-spring), background-color .16s, color .16s, box-shadow .16s !important;
}
#profileSetupScreen .setup-gender-btn svg { stroke: var(--qm-pink-soft); flex: none; }
#profileSetupScreen .setup-gender-btn:hover { background: var(--qm-s3); }
#profileSetupScreen .setup-gender-btn:active { transform: scale(.97); }
#profileSetupScreen .setup-gender-btn:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#profileSetupScreen .setup-gender-btn.selected {
    background: var(--qm-cream);
    color: var(--qm-ink);
    box-shadow: 0 0 0 3px var(--qm-pink);
}
#profileSetupScreen .setup-gender-btn.selected svg { stroke: var(--qm-pink); }

/* country dropdown (country-select.js) */
#profileSetupScreen .cs-list {
    background: var(--qm-s1);
    border: 0;
    border-radius: 20px;
    box-shadow: var(--qm-shadow-float);
}
#profileSetupScreen .cs-item:hover { background: var(--qm-s2); }

#profileSetupScreen .setup-actions { margin-top: 6px; }
#profileSetupScreen .setup-btn-primary {
    height: 56px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: var(--qm-pink);
    color: #fff;
    font: 700 16px/1 var(--qm-sans);
    letter-spacing: -.01em;
    box-shadow: var(--qm-shadow-pink-btn);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s var(--qm-ease-out), opacity .14s;
}
#profileSetupScreen .setup-btn-primary:hover { transform: translateY(-1px); }
#profileSetupScreen .setup-btn-primary:active { transform: translateY(3px); box-shadow: var(--qm-shadow-pink-btn-press); }
#profileSetupScreen .setup-btn-primary:focus-visible { outline: none; box-shadow: var(--qm-shadow-pink-btn), var(--qm-focus-ring); }
body.rtl #profileSetupScreen .setup-btn-primary svg { transform: scaleX(-1); }

/* ==========================================================================
   SLandingAI / SLandingUser — share-link landings
   (base styles: inline <style> block in index.html, .shrl-*)
   ========================================================================== */
.screen:is(#profileLandingScreen, #userLandingScreen) {
    padding: 0;
    align-items: flex-start;
    justify-content: center;
    background: var(--qm-bg);
    font-family: var(--qm-sans);
}
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-card {
    width: 100%;
    max-width: 480px;
    min-height: 100%;
    margin: 0 auto;
    padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px));
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    text-align: start;
    display: flex;
    flex-direction: column;
}
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-card::before { content: none; }
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-aurora,
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-hero-halo {
    display: none;
}

/* steps → grouped list rows in an s1 card */
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-steps {
    margin: 20px 0 24px;
    padding: 4px 18px;
    gap: 0;
    background: var(--qm-s1);
    border: 0;
    border-radius: var(--qm-r-card);
    text-align: start;
}
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-step {
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 10px 0;
}
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-step + .shrl-step { border-top: 1px solid var(--qm-line); }
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-step-icon {
    width: 40px;
    height: 40px;
    border-radius: 30%;
    background: var(--qm-pink-pale);
    border: 0;
    font-size: 20px;
}
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-step-text strong {
    font: 600 15px/1.3 var(--qm-sans);
    color: var(--qm-fg);
}
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-step-text span {
    font: 400 13px/1.4 var(--qm-sans);
    color: var(--qm-fg3);
}

/* CTA: solid pink 3D pill (no pulsing glow) */
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-cta {
    height: 56px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: var(--qm-pink);
    color: #fff;
    font: 700 16px/1.1 var(--qm-sans);
    letter-spacing: -.01em;
    box-shadow: var(--qm-shadow-pink-btn);
    animation: none;
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s var(--qm-ease-out), opacity .14s;
}
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-cta:hover { transform: translateY(-1px); box-shadow: var(--qm-shadow-pink-btn); }
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-cta:active { transform: translateY(3px); box-shadow: var(--qm-shadow-pink-btn-press); }
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-cta:focus-visible { outline: none; box-shadow: var(--qm-shadow-pink-btn), var(--qm-focus-ring); }
body.rtl .screen:is(#profileLandingScreen, #userLandingScreen) .shrl-cta svg { transform: scaleX(-1); }
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-cta--ghost {
    background: var(--qm-s3);
    box-shadow: var(--qm-shadow-dark-btn);
    margin-top: 0;
}
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-cta--ghost:hover { background: var(--qm-s3); box-shadow: var(--qm-shadow-dark-btn); }
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-cta--ghost:active { box-shadow: 0 1px 0 var(--qm-dark-edge); }

.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-footer-note {
    margin: 14px 0 0;
    font: 400 13px/1.4 var(--qm-sans);
    color: var(--qm-fg3);
    text-align: center;
}
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-link {
    color: var(--qm-pink-soft);
    font: 600 13px/1.4 var(--qm-sans);
    text-decoration: none;
    border-radius: 4px;
    transition: opacity .14s;
}
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-link:hover { color: var(--qm-pink-pale); text-decoration: underline; }
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-link:active { opacity: .7; }
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-link:focus-visible { outline: 2px solid var(--qm-pink-soft); outline-offset: 2px; }
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-loggedin-row { color: var(--qm-fg2); }
.screen:is(#profileLandingScreen, #userLandingScreen) .shrl-loggedin-dot { background: var(--qm-green); box-shadow: 0 0 0 3px rgba(74, 222, 128, .18); }

/* ── SLandingAI: full-bleed photo hero ─────────────────────────────────── */
#profileLandingScreen .shrl-hero {
    order: -1;
    width: auto;
    height: min(470px, 56vh);
    margin: 0 -20px;
    position: relative;
}
#profileLandingScreen .shrl-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 50%;
    background: linear-gradient(rgba(13, 10, 15, 0), var(--qm-bg));
    pointer-events: none;
    z-index: 2;
}
#profileLandingScreen .shrl-hero-avatar {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    font: 800 140px/1 var(--qm-disp);
    color: rgba(255, 255, 255, .12);
    background: radial-gradient(120% 90% at 28% 18%, #C2185B 0%, #3A1424 75%);
    overflow: hidden;
}
#profileLandingScreen .shrl-hero-avatar img { object-position: center 20%; border-radius: 0 !important; }
#profileLandingScreen .shrl-invite-chip {
    order: 0;
    position: relative;
    z-index: 3;
    align-self: flex-start;
    margin: -58px 0 14px;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: rgba(13, 10, 15, .6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font: 600 13px/1 var(--qm-sans);
    color: var(--qm-fg);
}
#profileLandingScreen .shrl-hero-name {
    font: 800 clamp(38px, 11vw, 46px)/1 var(--qm-disp);
    letter-spacing: -.035em;
    margin: 0 0 8px;
    position: relative;
    z-index: 3;
}
#profileLandingScreen .shrl-hero-age,
#profileLandingScreen .shrl-hero-age-dot {
    color: var(--qm-pink-soft);
    font-weight: 800;
    margin-inline-start: 0;
}
#profileLandingScreen .shrl-hero-age-dot { margin-inline: .12em .18em; }
#profileLandingScreen .shrl-hero-tagline {
    font: 600 13px/1.3 var(--qm-sans);
    color: var(--qm-fg2);
    margin: 0 0 6px;
}
#profileLandingScreen .shrl-hero-bio {
    font: italic 400 15px/1.45 var(--qm-sans);
    color: var(--qm-fg2);
    margin: 0;
    padding: 0;
}
#profileLandingScreen .shrl-cta--landing { margin-top: auto; }

/* ── SLandingUser: wordmark + pale-pink invite card ────────────────────── */
.qm-wordmark {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 800 16px/1 var(--qm-sans);
    letter-spacing: -.03em;
    color: var(--qm-fg);
}
.qm-wordmark-q {
    width: 23px;
    height: 23px;
    border-radius: 30%;
    background: var(--qm-pink);
    color: #fff;
    display: grid;
    place-items: center;
    font: italic 800 17px/1 Georgia, "Times New Roman", serif;
}
#userLandingScreen .qm-wordmark {
    height: 56px;
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: content-box;
    flex: none;
}
#userLandingScreen .qm-ul-hero {
    position: relative;
    margin-top: 14px;
    padding: 22px;
    border-radius: var(--qm-r-card-lg);
    background: var(--qm-pink-pale);
    color: var(--qm-ink-pale);
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    text-align: start;
}
#userLandingScreen .qm-ul-hero::after {
    content: "👋" / "";
    position: absolute;
    top: -14px;
    inset-inline-end: 18px;
    width: 54px;
    height: 54px;
    border-radius: 30%;
    background: #fff;
    display: grid;
    place-items: center;
    font-size: 28px;
    line-height: 1;
    transform: rotate(12deg);
    pointer-events: none;
}
#userLandingScreen .qm-ul-hero > * { grid-column: 1 / -1; }
#userLandingScreen .qm-ul-hero .shrl-hero {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 72px;
    height: 72px;
    margin: 0;
}
#userLandingScreen .shrl-hero-avatar {
    width: 72px;
    height: 72px;
    border-radius: 36%;
    border: 0;
    box-shadow: none;
    font: 700 34px/1 var(--qm-disp);
    background: radial-gradient(120% 90% at 28% 18%, #C2185B 0%, #3A1424 75%);
    overflow: hidden;
}
#userLandingScreen .shrl-hero-name {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font: 800 20px/1.15 var(--qm-sans);
    letter-spacing: -.02em;
    color: var(--qm-ink-pale);
    margin: 0;
    padding-inline-end: 52px;
    overflow-wrap: anywhere;
}
#userLandingScreen .shrl-hero-tagline {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 4px 0 0;
    font: 400 13px/1.35 var(--qm-sans);
    color: rgba(42, 13, 25, .7);
}
#userLandingScreen .shrl-hero-bio {
    margin: 20px 0 0;
    padding: 0;
    font: 800 clamp(24px, 7.4vw, 30px)/1.1 var(--qm-disp);
    letter-spacing: -.035em;
    color: var(--qm-ink-pale);
    overflow-wrap: anywhere;
}
#userLandingScreen .qm-ul-hero .shrl-invite-chip {
    order: 9;
    margin: 14px 0 0;
    padding: 0;
    height: auto;
    border: 0;
    background: none;
    border-radius: 0;
    justify-content: flex-start;
    font: 400 15px/1.45 var(--qm-sans);
    color: rgba(42, 13, 25, .7);
}
#userLandingScreen .qm-ul-hero .shrl-invite-chip::before { content: none; }
#userLandingScreen #ulActions { margin-top: auto; }
#userLandingScreen .shrl-failed {
    margin: 20px 0 0;
    padding: 22px;
    border-radius: var(--qm-r-card);
    background: var(--qm-s1);
    text-align: start;
}
#userLandingScreen .shrl-failed-icon { font-size: 40px; }
#userLandingScreen .shrl-failed-title {
    font: 800 26px/1.05 var(--qm-disp);
    letter-spacing: -.035em;
    color: var(--qm-fg);
    margin: 0 0 10px;
}
#userLandingScreen .shrl-failed-text { font: 400 15px/1.45 var(--qm-sans); color: var(--qm-fg2); }
#userLandingScreen .shrl-failed-actions { gap: 14px; }

/* ==========================================================================
   SAuthSheet — #authModal
   ========================================================================== */
#authModal.aum-overlay {
    background: var(--qm-scrim);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
#authModal .aum-sheet {
    max-width: 480px;
    background: var(--qm-s1);
    border-radius: var(--qm-r-sheet) var(--qm-r-sheet) 0 0;
    padding: 12px 22px calc(30px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -20px 50px rgba(0, 0, 0, .5);
    color: var(--qm-fg);
    font-family: var(--qm-sans);
}
#authModal .aum-drag-handle {
    width: 40px;
    height: 5px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .18);
    margin: 0 auto 18px;
}
#authModal .aum-brand { justify-content: flex-start; gap: 8px; margin: 0 0 18px; }
#authModal .aum-brand-dot {
    width: 26px;
    height: 26px;
    border-radius: 30%;
    background: var(--qm-pink);
    box-shadow: none;
    display: grid;
    place-items: center;
}
#authModal .aum-brand-dot::after { content: "Q"; font: italic 800 19px/1 Georgia, "Times New Roman", serif; color: #fff; }
#authModal .aum-brand-name { font: 800 18px/1 var(--qm-sans); letter-spacing: -.03em; color: var(--qm-fg); }

#authModal .aum-tabs {
    padding: 5px;
    border-radius: var(--qm-r-pill);
    background: var(--qm-bg);
    margin: 0 0 18px;
    gap: 4px;
}
#authModal .aum-tab {
    height: 44px;
    padding: 0 10px;
    border-radius: var(--qm-r-pill);
    color: var(--qm-fg2);
    font: 600 14px/1 var(--qm-sans);
    transition: color .2s var(--qm-ease-out), transform .14s var(--qm-ease-spring);
}
#authModal .aum-tab:hover { color: var(--qm-fg); }
#authModal .aum-tab:active { transform: scale(.97); }
#authModal .aum-tab:focus-visible { outline: 2px solid var(--qm-pink-soft); outline-offset: 2px; }
#authModal .aum-tab.active { color: var(--qm-ink); }
#authModal .aum-tab-indicator {
    top: 5px;
    left: 5px;
    width: calc(50% - 7px);
    height: calc(100% - 10px);
    border-radius: var(--qm-r-pill);
    background: var(--qm-cream);
    transition: transform .3s var(--qm-ease-spring);
}
#authModal .aum-tab-indicator.right { transform: translateX(calc(100% + 4px)); }
body.rtl #authModal .aum-tab-indicator { left: auto; right: 5px; }
body.rtl #authModal .aum-tab-indicator.right { transform: translateX(calc(-100% - 4px)); }

#authModal .aum-form { gap: 14px; }
#authModal .aum-input {
    height: 58px;
    padding: 22px 18px 6px;
    border: 0;
    border-radius: var(--qm-r-field);
    background: var(--qm-s2);
    color: var(--qm-fg);
    font: 400 16px/1.2 var(--qm-sans);
    box-shadow: none;
    transition: box-shadow .16s var(--qm-ease-out);
}
#authModal .aum-input:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
#authModal .aum-input:focus { box-shadow: 0 0 0 2px var(--qm-pink); border: 0; }
#authModal .aum-label {
    left: 18px;
    top: 20px;
    font: 500 15px/1.2 var(--qm-sans);
    color: var(--qm-fg3);
    transform-origin: left top;
    transition: transform .16s var(--qm-ease-out), color .16s;
}
body.rtl #authModal .aum-label { left: auto; right: 18px; transform-origin: right top; }
#authModal .aum-input:focus ~ .aum-label,
#authModal .aum-input:not(:placeholder-shown) ~ .aum-label {
    top: 20px;
    font-size: 15px;
    letter-spacing: 0;
    color: var(--qm-fg2);
    transform: translateY(-11px) scale(.76);
}
#authModal .aum-btn-forgot {
    color: var(--qm-pink-soft);
    font: 600 13px/1.2 var(--qm-sans);
    border-radius: 6px;
    transition: opacity .14s, transform .14s var(--qm-ease-spring);
}
#authModal .aum-btn-forgot:hover,
#authModal .aum-btn-forgot:focus { color: var(--qm-pink-soft); text-decoration: none; opacity: .82; }
#authModal .aum-btn-forgot:active { transform: scale(.96); }
#authModal .aum-btn-forgot:focus-visible { outline: 2px solid var(--qm-pink-soft); outline-offset: 2px; }
#authModal :is(.aum-btn-primary, .aum-btn-google) {
    height: 56px;
    padding: 0 24px;
    margin: 0;
    border: 0;
    border-radius: var(--qm-r-pill);
    font: 700 16px/1 var(--qm-sans);
    letter-spacing: -.01em;
    gap: 10px;
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s var(--qm-ease-out), opacity .14s;
}
#authModal .aum-btn-primary { background: var(--qm-pink); color: #fff; box-shadow: var(--qm-shadow-pink-btn); margin-top: 4px; }
#authModal .aum-btn-google { background: var(--qm-cream); color: var(--qm-ink); box-shadow: var(--qm-shadow-cream-btn); }
#authModal :is(.aum-btn-primary, .aum-btn-google):hover { transform: translateY(-1px); }
#authModal .aum-btn-primary:active { transform: translateY(3px); box-shadow: var(--qm-shadow-pink-btn-press); }
#authModal .aum-btn-google:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--qm-cream-edge); background: var(--qm-cream); }
#authModal .aum-btn-primary:focus-visible { outline: none; box-shadow: var(--qm-shadow-pink-btn), var(--qm-focus-ring); }
#authModal .aum-btn-google:focus-visible { outline: none; box-shadow: var(--qm-shadow-cream-btn), var(--qm-focus-ring); }
#authModal .aum-btn-google.is-loading::after { border-color: rgba(26, 14, 20, .2); border-top-color: var(--qm-ink); }
#authModal .aum-consent { background: var(--qm-bg); }

/* Laptop / tablet: centred card instead of a full-width bottom sheet */
@media (min-width: 768px) and (min-height: 700px) {
    #authModal.aum-overlay { align-items: center; padding: 24px 16px; }
    #authModal .aum-sheet {
        border-radius: var(--qm-r-sheet);
        padding: 26px 26px 28px;
        max-height: calc(100% - 48px);
        box-shadow: var(--qm-shadow-card-lift);
    }
    #authModal .aum-drag-handle { display: none; }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .screen:is(#authScreen, #verificationScreen, #passwordResetScreen, #passwordResetNewScreen) .auth-container,
    #profileSetupScreen .profile-setup-container,
    #authScreen .qm-auth-stk { animation: none; }
}

/* == A: onboarding flow == */
/* Setup content starts at the top and scrolls. justify-content:center from
   style.css acts on the COLUMN axis forced by critical-ui-fix.css and pushed
   the title ~114px above the viewport, out of scroll reach. */
html:root body #profileSetupScreen {
    justify-content: flex-start;
}
html:root body #profileSetupScreen .profile-setup-container {
    margin-inline: auto;
}

/* Google consent step ("Fast geschafft"), mounted by _requestGoogleConsent.
   Opaque full-screen step: nothing of the sign-up form or the app behind it. */
#googleConsentDialog.qm-consent-step {
    background: var(--qm-bg);
    color: var(--qm-fg);
    font-family: var(--qm-sans);
    padding: calc(24px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px));
}
#googleConsentDialog .qm-consent-card {
    background: var(--qm-s1);
    border-radius: var(--qm-r-sheet, 24px);
    box-shadow: var(--qm-shadow-card-lift, none);
}
#googleConsentDialog #googleConsentTitle {
    font: 800 clamp(28px, 7.6vw, 32px)/1.05 var(--qm-disp);
    letter-spacing: -.03em;
    margin: 0 0 12px;
}
#googleConsentDialog p {
    color: var(--qm-fg2, rgba(255, 255, 255, .78));
    font-size: 15px;
    margin: 0 0 10px;
}
#googleConsentDialog .qm-consent-link:focus-visible,
#googleConsentDialog .qm-consent-cancel:focus-visible {
    outline: 2px solid var(--qm-pink-soft);
    outline-offset: 2px;
}
#googleConsentDialog .qm-consent-cancel {
    background: transparent;
    color: var(--qm-fg3, rgba(255, 255, 255, .6));
}
/* == /A: onboarding flow == */
/* == B: setup form == */
/* Entrance animation: hold only the from-keyframe (backwards), never the
   end state. With `both` the container kept a filled transform for its
   whole life — inputs inside a transformed ancestor make iOS misplace the
   caret and scroll the page around while the keyboard is up. */
#profileSetupScreen .profile-setup-container { animation-fill-mode: backwards; }
/* Keyboard open (setup-keyboard.js sets .kb-open + --setup-kb): room below
   the last field so every field can be scrolled above the keyboard. */
#profileSetupScreen.kb-open .profile-setup-container {
    padding-bottom: calc(30px + var(--setup-kb, 0px));
}

/* Country picker: own wrapper .ctry-wrap — the old .cs-wrap was the credits
   store layout (min-height 100%, padding-bottom 100px), which pushed the
   list ~126px below the input and under the keyboard. */
#profileSetupScreen .ctry-wrap { position: relative; display: block; min-height: 0; padding: 0; }
#profileSetupScreen .cs-list { overscroll-behavior: contain; }
#profileSetupScreen .cs-item {
    min-height: 44px;
    padding: 12px 18px;
    font: 400 16px/20px var(--qm-sans);
    color: var(--qm-fg);
}
#profileSetupScreen .cs-item:active { background: var(--qm-s2); }

/* Motto: two visible lines, grows to three (setup-keyboard.js) and never
   scrolls inside itself — the one-row field jumped with every wrap. */
#profileSetupScreen .setup-textarea {
    display: block;
    width: 100%;
    min-height: 80px; /* 2 × 22px + 2 × 18px padding */
    line-height: 22px;
    resize: none;
    overflow-y: hidden;
}

/* Photo tile: own upload progress + visible error (tap tile = try again) */
#profileSetupScreen .setup-cover-progress {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    z-index: 2;
    height: 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .45);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s var(--qm-ease-out);
}
#profileSetupScreen .setup-cover-area.is-uploading .setup-cover-progress { opacity: 1; }
#profileSetupScreen .setup-cover-progress-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--qm-pink);
    transition: width .25s var(--qm-ease-out);
}
#profileSetupScreen .setup-cover-area.upload-error { border: 2px solid var(--qm-red-soft); }
#profileSetupScreen .setup-cover-error {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(20, 6, 10, .86);
    color: var(--qm-red-soft);
    font: 700 13px/1.3 var(--qm-sans);
    text-align: center;
    pointer-events: none;
}
#profileSetupScreen .setup-cover-error[hidden] { display: none; }
/* == /B: setup form == */