.auth-shell { max-width: 80ch; margin: auto; padding: var(--space-6) var(--space-5); color: var(--text); display: flex; flex-direction: column; align-items: center; }
.auth-brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text); text-decoration: none; font-size: var(--text-title); }
.auth-brand img { width: var(--space-7); height: var(--space-7); }
.auth-loading { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; box-sizing: border-box; padding: 24px; }
.auth-loading .auth-loading-mark { width: min(144px, calc(100vw - 48px), calc(100dvh - 48px)); height: auto; animation: auth-loading-turn 8s linear infinite; }
.auth-loading .auth-loading-mark--white { display: none; }
:root[data-mode-now="dark"] .auth-loading .auth-loading-mark--dark { display: none; }
:root[data-mode-now="dark"] .auth-loading .auth-loading-mark--white { display: block; }
@keyframes auth-loading-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .auth-loading .auth-loading-mark { animation: none; }
}
.auth-intro { max-width: 60ch; margin-block: var(--space-5); text-align: center; }
.auth-intro h1 { font-size: var(--text-display); font-weight: var(--weight-reading); line-height: var(--lh-display); letter-spacing: var(--track-display); }
.auth-intro p { font-size: var(--text-reading); line-height: var(--lh-reading); margin-block: var(--space-3) 0; }
.auth-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-4); margin-block: var(--space-5) 0; }
.auth-actions:empty, .auth-widget:empty { display: none; }
.auth-intro .auth-introduction { margin: var(--space-4) 0 0; }
.auth-introduction figcaption { color: var(--text-secondary); font-size: var(--text-label); margin-block: 0 var(--space-2); }
.auth-introduction-video { display: block; width: 100%; max-height: 43vh; max-height: 43dvh; aspect-ratio: 16 / 9; object-fit: contain; margin-inline: auto; border: var(--line-object) solid var(--border); border-radius: var(--r-card); background: var(--bg-raised); box-sizing: border-box; }
.auth-introduction--mobile .auth-introduction-video { width: auto; max-width: 100%; aspect-ratio: 9 / 16; height: 43vh; height: 43dvh; }
.auth-intro .auth-introduction-error { color: var(--text-secondary); font-size: var(--text-label); line-height: var(--lh-reading); padding: var(--space-3); border: var(--line-object) solid var(--border); border-radius: var(--r-card); background: var(--bg-raised); }
.auth-introduction [hidden] { display: none; }
.auth-widget { width: min(100%, 48ch); display: flex; justify-content: center; }
.auth-widget .cl-rootBox { width: 100%; }
.auth-widget .cl-cardBox { width: min(100%, 48ch); background: var(--bg-raised); }
.auth-shell--form .auth-intro h1 { font-size: var(--text-title); line-height: var(--lh-heading); margin-block: var(--space-2) 0; }
.auth-shell--form .auth-brand img { width: var(--space-6); height: var(--space-6); }
.auth-shell--form .auth-widget .cl-logoBox { display: none; }
.cl-formFieldInput::placeholder { color: var(--text-secondary); opacity: 1; }
#household-save-status, .auth-status, [data-tq-save] { display: none !important; }
.auth-save-toast {
  position: fixed; inset: auto var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)) auto;
  z-index: 2147483647; margin: 0; width: min(48ch, calc(100% - var(--space-4) - var(--space-4)));
  box-sizing: border-box; max-height: calc(100dvh - var(--space-4) - var(--space-4)); overflow: auto;
  padding: var(--space-4); border: var(--line-object) solid var(--text-error); border-radius: var(--r-card);
  background: var(--bg-raised); color: var(--text); font-family: var(--font); font-size: var(--text-label); line-height: var(--lh-reading);
}
.auth-save-toast[hidden] { display: none !important; }
.auth-save-toast::backdrop { background: transparent; pointer-events: none; }
.auth-save-toast-message { margin: 0; overflow-wrap: anywhere; }
.auth-save-toast-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-3); }
.auth-save-toast-actions [hidden] { display: none !important; }
.auth-account { border: var(--line-object) solid var(--border); border-radius: var(--r-card); background: var(--bg-raised); color: var(--text); padding: var(--space-6); max-width: min(90vw, 60ch); }
.auth-account::backdrop { background: color-mix(in srgb, var(--black) 50%, transparent); }
.auth-account p { overflow-wrap: anywhere; margin-block: var(--space-4); }