@import url('/brand.css');

:root { --canvas:var(--donde-canvas); --canvas-deep:var(--donde-canvas-deep); --ink:var(--donde-ink); --muted:var(--donde-ink-muted); --faint:var(--donde-ink-faint); --line:var(--donde-border); --cobalt:var(--donde-cobalt); --cobalt-dark:var(--donde-cobalt-dark); --soft:var(--donde-cobalt-soft); --danger:var(--donde-rust); --danger-soft:var(--donde-rust-soft); --green-dark:var(--donde-green-dark); --green-soft:var(--donde-green-soft); --brand-lavender-soft:var(--donde-brand-lavender-soft); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body.auth-page { margin:0; min-width:320px; min-height:100vh; color:var(--ink); background:var(--brand-lavender-soft) ; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; }
body.auth-modal-open { overflow:hidden; }
body.auth-transition-open { background:var(--donde-hero); }
.auth-overlay { position:fixed; inset:0; z-index:10000; overflow-y:auto; display:grid; place-items:center; padding:24px 14px; background:color-mix(in srgb, var(--donde-inverse) 48%, transparent); backdrop-filter:blur(10px); }
body.auth-transition-open .auth-overlay { background:var(--donde-hero); backdrop-filter:none; }
a { color:inherit; }
button,input { color:inherit; font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.6; }
:focus-visible { outline:3px solid var(--donde-cobalt); outline-offset:3px; }
.auth-shell { width:min(520px,calc(100vw - 28px)); margin:0 auto; }
.auth-modal-close { position:absolute; top:22px; right:22px; z-index:2; width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--muted); background:var(--donde-card); font-size:25px; line-height:1; text-decoration:none; }
.auth-brand { width:fit-content; margin:0 auto 24px; display:flex; align-items:center; gap:8px; color:var(--ink); font-size:20px; font-weight:850; letter-spacing:-.8px; text-decoration:none; }
.auth-brand img { width:51px; height:34px; object-fit:contain; }
.auth-card { position:relative; padding:30px 38px 26px; border:1px solid color-mix(in srgb, var(--donde-border-strong) 90%, transparent); border-radius:30px; background:color-mix(in srgb, var(--donde-card) 97%, transparent); box-shadow:0 28px 86px color-mix(in srgb, var(--donde-inverse) 15%, transparent); backdrop-filter:blur(18px); }
.auth-heading { text-align:center; }
.auth-heading > p { margin:0; color:var(--cobalt); font-size:10px; font-weight:850; letter-spacing:1.35px; text-transform:uppercase; }
.auth-heading h1 { margin:8px 0 0; font-size:38px; line-height:1.02; letter-spacing:-.045em; }
.auth-heading > span { margin-top:13px; display:block; color:var(--muted); font-size:14px; }
.auth-notice { margin:21px 0 0; padding:13px 14px; border-radius:13px; color:var(--green-dark); background:var(--green-soft); font-size:12px; }
.auth-notice.error { color:var(--danger); background:var(--danger-soft); }
.auth-tabs { margin-top:26px; padding:4px; display:grid; grid-template-columns:1fr 1fr; border-radius:14px; background:var(--canvas-deep); }
.auth-tabs button { min-height:42px; border:0; border-radius:11px; color:var(--muted); background:transparent; font-size:12px; font-weight:800; }
.auth-tabs button[aria-selected="true"] { color:var(--ink); background:var(--donde-card); box-shadow:0 5px 15px color-mix(in srgb, var(--donde-inverse) 8%, transparent); }
.provider-actions { margin-top:17px; display:grid; gap:9px; }
.provider-button { min-height:49px; padding:11px 16px; display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid var(--line); border-radius:14px; background:var(--donde-card); font-size:13px; font-weight:800; }
.provider-button svg { width:18px; height:18px; flex:0 0 18px; }
.provider-button span { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; }
.provider-button.apple { color:var(--donde-on-action); background:#111111; }
.auth-divider { margin:19px 0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; color:var(--faint); font-size:9px; font-weight:750; letter-spacing:.8px; text-transform:uppercase; }
.auth-divider::before,.auth-divider::after { content:''; height:1px; background:var(--line); }
.auth-form { display:grid; gap:14px; }
.auth-form label { display:grid; gap:6px; }
.auth-form label > span { color:var(--muted); font-size:11px; font-weight:800; }
.auth-form input { width:100%; height:50px; padding:0 14px; border:1px solid var(--donde-border-strong); border-radius:13px; background:var(--donde-canvas-deep); font-size:14px; }
.auth-form input:focus { border-color:var(--cobalt); outline:3px solid color-mix(in srgb, var(--donde-brand-cobalt) 12%, transparent); }
.auth-primary,.auth-secondary { width:100%; min-height:50px; padding:12px 17px; border-radius:999px; font-size:13px; font-weight:850; }
.auth-primary { margin-top:4px; border:0; color:var(--donde-on-action); background:var(--donde-action); box-shadow:0 12px 28px color-mix(in srgb, var(--donde-brand-cobalt) 22%, transparent); }
.auth-primary:hover { background:var(--donde-action-hover); }
.auth-secondary { margin-top:9px; border:1px solid var(--line); background:var(--donde-card); }
.forgot-link { margin-top:14px; display:block; color:var(--cobalt); font-size:12px; font-weight:800; text-align:center; }
.auth-terms { margin-top:16px; display:grid; grid-template-columns:20px 1fr; align-items:start; gap:9px; color:var(--muted); font-size:11px; text-align:left; }
.auth-terms input { width:18px; height:18px; margin:0; accent-color:var(--donde-action); }
.auth-terms span { line-height:1.5; }
.auth-terms a { color:var(--cobalt); font-weight:800; }
.panel-copy { color:var(--muted); font-size:11px; text-align:center; }
.consent-panel { margin-top:29px; text-align:center; }
.consent-icon { width:68px; height:68px; margin:auto; display:grid; place-items:center; border-radius:22px; color:var(--cobalt); background:var(--soft); font-size:28px; transform:rotate(-6deg); }
.consent-panel > p { margin:20px 0 0; color:var(--faint); font-size:10px; font-weight:850; letter-spacing:1px; text-transform:uppercase; }
.consent-panel h2 { margin:2px 0 19px; font-size:29px; letter-spacing:-.03em; }
.consent-panel > div { margin-bottom:18px; padding:14px; border-radius:14px; background:var(--canvas-deep); }
.consent-panel small { color:var(--faint); font-size:9px; font-weight:850; letter-spacing:.8px; text-transform:uppercase; }
.consent-panel div p { margin:4px 0 0; color:var(--muted); font-size:12px; }
[data-reset-request-panel],[data-reset-update-panel] { margin-top:26px; }
.panel-copy { margin:0 0 20px; font-size:13px; }
.auth-waiting { min-height:150px; display:grid; place-items:center; align-content:center; gap:12px; color:var(--muted); font-size:12px; }
.auth-waiting span { width:30px; height:30px; border:3px solid var(--donde-border); border-top-color:var(--cobalt); border-radius:50%; animation:spin .8s linear infinite; }
.auth-waiting p { margin:0; }
.auth-footnote { max-width:410px; margin:22px auto 0; padding-top:18px; border-top:1px solid var(--line); color:var(--faint); font-size:10px; text-align:center; }
.auth-unavailable { text-align:center; }
.auth-start-over { margin-top:26px; display:flex; align-items:center; justify-content:center; color:var(--donde-on-action); text-decoration:none; }
.auth-transition:not(.auth-account-ready) { width:min(360px,calc(100vw - 36px)); }
.auth-transition:not(.auth-account-ready) .auth-card { min-height:190px; padding:30px; display:grid; place-items:center; align-content:center; gap:16px; border-color:var(--line); border-radius:24px; background:var(--donde-card); box-shadow:0 20px 56px color-mix(in srgb, var(--donde-inverse) 20%, transparent); backdrop-filter:none; }
.auth-transition:not(.auth-account-ready) .auth-brand { margin:0; gap:12px; font-size:18px; font-weight:800; }
.auth-transition:not(.auth-account-ready) .auth-brand img { width:50px; height:32px; }
.auth-transition:not(.auth-account-ready) .auth-heading,
.auth-transition:not(.auth-account-ready) .auth-notice,
.auth-transition:not(.auth-account-ready) .auth-modal-close,
.auth-transition:not(.auth-account-ready) .auth-footnote,
.auth-transition:not(.auth-account-ready) [data-auth-account-panel],
.auth-transition:not(.auth-account-ready) [data-reset-request-panel],
.auth-transition:not(.auth-account-ready) [data-reset-update-panel] { display:none !important; }
.auth-transition:not(.auth-account-ready) .auth-waiting { min-height:0; display:grid !important; gap:16px; font-size:14px; }
.auth-transition:not(.auth-account-ready) .auth-waiting span { width:28px; height:28px; }
.auth-transition:not(.auth-account-ready) .auth-waiting p { font-size:0; }
.auth-transition:not(.auth-account-ready) .auth-waiting p::after { content:'Signing you in\2026'; color:var(--muted); font-size:14px; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:560px) { .auth-card { padding:26px 20px 22px; border-radius:24px; } .auth-modal-close { top:17px; right:17px; } .auth-heading h1 { font-size:33px; } }
@media (prefers-reduced-motion:reduce) { .auth-waiting span { animation-duration:1.8s; } }

/* Keep the provider callback identical to the app's first-paint and React loader. */
body.auth-transition-open { color:var(--donde-ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.auth-transition:not(.auth-account-ready) .auth-card { color:var(--donde-ink); border-color:var(--donde-border); }
.auth-transition:not(.auth-account-ready) .auth-brand { color:var(--donde-ink); line-height:normal; }
.auth-transition:not(.auth-account-ready) .auth-waiting { line-height:normal; }
.auth-transition:not(.auth-account-ready) .auth-waiting span { border-color:var(--donde-border); border-top-color:var(--donde-cobalt); }
.auth-transition:not(.auth-account-ready) .auth-waiting p::after { color:var(--donde-ink-muted); }

body.auth-page.auth-transition-open { min-height:100dvh; display:grid; place-items:center; padding:24px; }

.auth-monster{display:block;width:240px;max-width:100%;height:150px;object-fit:contain;margin:0 auto 18px}

/* The shared loader owns transitions; keep the login form available for recovery. */
body.auth-transition-open [data-auth-root] { visibility:hidden; }