.auth-dialog {
    width: min(94vw, 35rem);
    max-height: min(88dvh, 48rem);
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 1.1rem;
    background: #fff;
    color: var(--color-ink);
    box-shadow: 0 2rem 6rem rgb(7 27 22 / .42);
}

.auth-dialog:not([open]) { display: none; }
.auth-dialog::backdrop { background: rgb(7 27 22 / .58); backdrop-filter: blur(4px); }
.auth-dialog__content { max-height: min(88dvh, 48rem); padding: clamp(1.5rem, 5vw, 2.8rem); overflow: auto; overscroll-behavior: contain; }
.auth-dialog__content .auth-card { width: 100%; }
.auth-dialog__content .auth-card h2 { padding-right: 2.5rem; font-size: clamp(1.8rem, 5vw, 2.5rem); }
.auth-dialog__content .auth-form { margin-top: 1.35rem; }
.auth-dialog__content .auth-security { margin-bottom: 0; }
.auth-dialog__close { width: 2.5rem; height: 2.5rem; padding: 0; position: absolute; z-index: 2; top: .9rem; right: .9rem; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--color-soft); color: var(--color-forest); font-size: 1.35rem; cursor: pointer; transition: background .2s, transform .2s; }
.auth-dialog__close:hover, .auth-dialog__close:focus-visible { background: var(--color-sage-soft); transform: rotate(4deg); }
.auth-dialog__loading, .auth-dialog__error { min-height: 14rem; margin: 0; display: grid; place-items: center; color: var(--color-muted); text-align: center; }
.auth-dialog__error { color: #8d372e; }
.auth-dialog.is-loading .auth-dialog__content { opacity: .62; pointer-events: none; }
.auth-dialog .button[disabled] { cursor: wait; opacity: .7; }

@media (max-width: 600px) {
    .auth-dialog { width: 100vw; max-width: none; max-height: 94dvh; margin: auto 0 0; border-radius: 1rem 1rem 0 0; }
    .auth-dialog__content { max-height: 94dvh; padding: 1.65rem 1.15rem max(1.75rem, env(safe-area-inset-bottom)); }
    .auth-dialog__close { top: .7rem; right: .7rem; }
    .auth-dialog__content .auth-form__row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
    .auth-dialog[open] { animation: auth-dialog-enter .22s ease-out; }
    @keyframes auth-dialog-enter { from { opacity: 0; transform: translateY(.75rem) scale(.985); } }
}