/* Authentication styling does not change the editor or recipient experience. */
.auth-view[hidden], .auth-view [hidden], .homepage-header [hidden] { display: none !important; }
.auth-view { min-height: calc(100svh - 78px); display: grid; place-items: center; padding: 56px 20px; color: #f7f4ff; background: radial-gradient(ellipse at 42% 48%, #7133a344, transparent 60%), radial-gradient(ellipse at 100% 80%, color-mix(in srgb, var(--mw-pink) 9%, transparent), transparent 55%), var(--mw-night); }
.auth-card { width: min(100%, 450px); padding: 36px; border: 1px solid #7963a34d; border-radius: 20px; background: #211b38ee; box-shadow: 0 24px 80px #05081555; }
.auth-card h1 { margin: 0 0 10px; text-align: center; font: 750 clamp(27px, 4vw, 32px)/1.25 var(--sans); letter-spacing: -.03em; }
.auth-card .auth-intro { text-align: center; color: #c8c1db; margin: 0 0 28px; font-size: 14px; }
.auth-card p { line-height: 1.6; color: #cbc3da; }
.auth-card a { color: #d4b4ff; text-underline-offset: 4px; }
.auth-card a:hover { text-decoration: underline; color: #eedbff; }
.auth-card :focus-visible { outline: 3px solid #dbb8ff; outline-offset: 4px; }
.auth-card .auth-google, .auth-card .auth-submit { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 10px; font: 650 14px var(--sans); }
.auth-card .auth-google { color: #f6f3ff; background: #29223f; border: 1px solid #746585; }
.auth-card .auth-google:not(:disabled):hover { background: #362b50; }
.auth-card .google-mark { font-size: 20px; color: #f6f3ff; font-weight: 800; }
.auth-card .auth-submit { border: 0; color: var(--mw-pearl); background: var(--mw-gradient-primary) 0 0 / 200% 100%; border-color: transparent; box-shadow: var(--mw-shadow-primary); }
.auth-card .auth-submit:not(:disabled):hover { background-position: 100% 0; filter: brightness(1.06); }
.auth-card button:disabled { cursor: not-allowed; opacity: .65; }
.auth-card .auth-divider { display: flex; align-items: center; gap: 12px; color: #b8aecb; font-size: 12px; margin: 24px 0; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; background: #74658566; flex: 1; }
.auth-field { margin-bottom: 20px; }
.auth-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.auth-field input { display: block; width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; border: 1px solid #756487; border-radius: 9px; background: #17152a; color: #fff; font: 16px var(--sans); }
.auth-field input::placeholder { color: #aaa1bd; }
.auth-field input:focus { border-color: #c192fc; }
.auth-field input[aria-invalid="true"] { border-color: #ffacbd; }
.password-field { position: relative; }
.password-field input { padding-right: 52px; }
.password-field button { position: absolute; right: 2px; top: 2px; height: calc(100% - 4px); width: 44px; min-height: 44px; border: 0; background: transparent; color: #d4c7e8; border-radius: 7px; font-size: 0; }
.password-field button::before { content: ''; display: block; width: 22px; height: 22px; margin: auto; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4c7e8' stroke-width='1.7'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.auth-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 16px; font-size: 12px; }
.auth-options a { display: flex; align-items: center; min-height: 44px; }
.auth-remember { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.auth-remember input { width: 17px; height: 17px; accent-color: #a34bf2; }
.auth-card .auth-hint, .auth-card .auth-note { color: #bdb4d0; font-size: 11px; margin: 8px 0 0; }
.auth-card .auth-note { text-align: center; }
.auth-card .auth-status { color: #efdbff; font-size: 13px; overflow-wrap: anywhere; margin: 12px 0; }
.auth-card .auth-status:empty { display: none; }
.auth-card .auth-status[data-error="true"] { color: #ffc4d0; }
.auth-card .auth-crosslink { text-align: center; font-size: 13px; margin: 24px 0 0; }
.auth-card .auth-crosslink a { font-weight: 650; }
.auth-card .auth-otp-link { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; text-align: center; font-size: 12px; margin-top: 10px; border: 0; background: transparent; color: #d4b4ff; }
#signup-code-form .auth-google { margin-top: 12px; }
body:is([data-route="login"], [data-route="register"], [data-route="forgot-password"], [data-route="reset-password"], [data-route="auth-callback"]) .homepage-footer { display: none; }
/* Dedicated entry presentation leaves session and recovery logic untouched. */
.auth-entry { padding-block: 40px; }
.auth-entry .auth-card { width: min(100%, 480px); padding: 32px 36px; border-color: #b394e459; border-radius: 24px; background: linear-gradient(155deg, #2a2143, #1b1830 65%); box-shadow: 0 24px 80px #05081566, inset 0 1px 0 #e7c6ff18; }
.auth-entry .auth-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -8px 0 14px; color: #cfc3e5; font-size: 12px; }
.auth-entry .auth-entry-brand { margin: 0 0 12px; color: #f3ddff; font-size: 23px; font-weight: 800; letter-spacing: -.04em; text-align: center; }
.auth-entry .auth-entry-brand::before { content: '✳'; display: block; width: 44px; height: 44px; margin: 0 auto 12px; border: 1px solid #d5a2f34d; border-radius: 14px; color: #efb9fa; background: #b464df1a; font-size: 30px; line-height: 42px; }
.auth-entry .auth-welcome { margin: 0 0 24px; color: #cfc3e5; font-size: 12px; text-align: center; }
.auth-entry .auth-intro { max-width: 340px; margin: 0 auto 26px; line-height: 1.7; }
.auth-entry [data-google] { background: #fff; color: #252332; border-color: #dadce0; box-shadow: 0 2px 8px #05081520; }
.auth-entry [data-google]:not(:disabled):hover { background: #f1edf8; }
.auth-entry [data-google]:disabled { opacity: 1; color: #625b70; background: #e9e5f0; border-color: #c9c0d7; box-shadow: none; }
.auth-entry [data-google] .google-mark { display: block; flex-shrink: 0; }
.auth-entry [data-google-note] { margin-top: 10px; line-height: 1.7; }
.auth-entry .auth-crosslink { padding-top: 22px; border-top: 1px solid #b394e426; }
@media (max-width: 540px) { .auth-entry .auth-card { padding: 24px 22px; } }
@media (max-width: 540px) { .auth-view { padding: 28px 16px 40px; place-items: start center; } .auth-card { padding: 28px 22px; border-radius: 16px; } }
@media (max-width: 360px) { .auth-view { padding-inline: 12px; } .auth-card { padding-inline: 18px; } .auth-options { gap: 6px; font-size: 11px; } }

/* Account ("Mis regalos") uses the same dark identity as access screens. */
body[data-route="account"] { background: var(--mw-night); }
#account-view { position: relative; isolation: isolate; color: var(--mw-lavender-text); color-scheme: dark; }
#account-view::before { content: ''; position: absolute; inset: 32px 0; z-index: -1; border: 1px solid var(--mw-glass-border); border-radius: 24px; background: var(--mw-violet); box-shadow: 0 24px 80px #05081555, var(--mw-glass-highlight); pointer-events: none; }
#account-view h1 { color: var(--mw-pearl); }
#account-view :is(p, label) { color: var(--mw-lavender-text); }
#account-view .text-link { color: var(--mw-pink); }
#account-view .text-link:hover { color: var(--mw-pearl); }
#account-view .cloud-form input { color: var(--mw-pearl); background: var(--mw-field); border-color: color-mix(in srgb, var(--mw-lavender-text) 50%, transparent); }
#account-view .button.primary { color: var(--mw-pearl); background: var(--mw-gradient-primary) 0 0 / 200% 100%; box-shadow: var(--mw-shadow-primary); }
#account-view .button.primary:hover { background-position: 100% 0; filter: brightness(1.06); }
#account-view .button:is(.secondary, .plain) { color: var(--mw-pearl); border-color: color-mix(in srgb, var(--mw-lavender-text) 35%, transparent); }
#account-view .button:is(.secondary, .plain):hover { background: color-mix(in srgb, var(--mw-violet-action-bright) 22%, transparent); }