.auth-modal { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: var(--space-4); }
.auth-modal[hidden] { display: none; }
.auth-modal__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 66%); }
.auth-modal__panel { position: relative; width: min(100%, 30rem); max-height: calc(100vh - 2rem); overflow: auto; padding: var(--space-6); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-raised); }
.auth-modal__heading { padding-inline-end: var(--space-6); }
.auth-modal__heading h2 { margin: var(--space-1) 0 var(--space-5); font-size: var(--font-size-xl); }
.auth-modal__close { position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); width: var(--touch-target-min); height: var(--touch-target-min); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); cursor: pointer; font-size: 1.75rem; line-height: 1; }
.auth-modal__close:hover { background: var(--color-surface-raised); }
.auth-form, .auth-success { display: grid; gap: var(--space-4); }
.auth-form label:not(.auth-checkbox) { display: grid; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 650; }
.auth-form input:not([type="checkbox"]) { width: 100%; min-height: var(--touch-target-min); box-sizing: border-box; padding-inline: var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-canvas); color: var(--color-text); font: inherit; }
.auth-form input[aria-invalid="true"] { border-color: var(--color-decline); }
.auth-form__submit { width: 100%; min-height: var(--touch-target-min); background: transparent; color: var(--color-text); cursor: pointer; font: inherit; font-weight: 700; }
.auth-form__submit:disabled { cursor: not-allowed; border-color: var(--color-border); color: var(--color-text-muted); }
.auth-form__text-action, .auth-form__switch button { width: max-content; padding: 0; border: 0; background: transparent; color: var(--color-brand-strong); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.auth-form__switch { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.auth-google { display: grid; min-height: var(--touch-target-min); box-sizing: border-box; place-items: center; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-raised); color: var(--color-text); font: inherit; font-weight: 700; text-decoration: none; }
.auth-google span { margin-inline-start: var(--space-2); color: var(--color-accent); font-size: var(--font-size-xs); }
.auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.auth-divider::before, .auth-divider::after { height: 1px; background: var(--color-border); content: ""; }
.auth-turnstile { min-height: 65px; }
.password-strength, .auth-field-message { min-height: 1.3em; margin: calc(-1 * var(--space-2)) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.password-strength[data-strength="strong"] { color: var(--color-success); }
.password-requirements { display: grid; gap: var(--space-1); padding: 0; margin: calc(-1 * var(--space-2)) 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); list-style: none; }
.password-requirements li::before { display: inline-block; width: 1.25em; content: "○"; }
.password-requirements li[data-met="true"] { color: var(--color-success); }
.password-requirements li[data-met="true"]::before { content: "✓"; }
.auth-checkbox { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.auth-checkbox input { width: 1rem; height: 1rem; margin: 0.3rem 0 0; accent-color: var(--color-brand); }
.auth-form__message { min-height: 1.6em; margin: var(--space-4) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.auth-form__message[data-status="error"] { color: var(--color-decline); }
.auth-form__message[data-status="success"] { color: var(--color-success); }
.verification-page { display: grid; max-width: 38rem; min-height: 100vh; align-content: center; gap: var(--space-3); margin: 0 auto; padding: var(--space-6); }
@media (max-width: 479px) { .auth-modal { padding: 0; align-items: end; } .auth-modal__panel { width: 100%; max-height: min(90vh, 44rem); border-radius: var(--radius-md) var(--radius-md) 0 0; } }