html:has(.auth-dialog[open]) { overflow: hidden; }
.auth-dialog { position: fixed; inset: 0; margin: auto; width: min(460px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--border); border-radius: 1.25rem; background: var(--surface); color: var(--text); box-shadow: 0 24px 80px var(--shadow); overflow-y: auto; }
.auth-dialog::backdrop { background: color-mix(in srgb, var(--text) 30%, transparent); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
:root[data-theme="dark"] .auth-dialog::backdrop { background: color-mix(in srgb, var(--background) 45%, transparent); }
.auth-body { position: relative; padding: 2.25rem; }
.auth-close { position: absolute; top: .75rem; right: .75rem; border: 0; background: transparent; color: var(--text-muted); }
.auth-body .eyebrow { padding-right: 2rem; }
.auth-body h2 { font-size: 1.75rem; margin: 1rem 0 .5rem; }
.auth-description { margin: 0 0 1.5rem; font-size: .875rem; }
.auth-form { display: grid; gap: 1rem; }
.auth-field { display: grid; gap: .4rem; font-size: .875rem; font-weight: 600; }
.auth-optional { margin-left: .25rem; color: var(--text-muted); font-size: .75rem; font-weight: 400; }
.auth-field input { width: 100%; min-width: 0; min-height: 48px; padding: .75rem .9rem; font: inherit; font-size: 1rem; font-weight: 400; color: var(--text); background: var(--surface-hover); border: 1px solid var(--border); border-radius: .65rem; }
.auth-field input::placeholder { color: var(--text-muted); }
.auth-field input:focus { border-color: var(--accent); }
.auth-field-error { color: var(--danger, #d94b4b); font-size: .8125rem; font-weight: 500; }
.auth-hint { margin: -.5rem 0 0; font-size: .875rem; }
.auth-submit { width: 100%; min-height: 48px; }
.auth-switch { margin: 1.25rem 0; text-align: center; font-size: .875rem; color: var(--text-muted); }
.auth-text-button { padding: .4rem .2rem; border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 650; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.auth-capper { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.auth-capper-button { width: 100%; min-height: 56px; padding: .85rem 1.1rem; justify-content: center; background: linear-gradient(115deg, var(--accent), var(--accent-hover)); color: var(--on-accent); border: 1px solid var(--accent); font-size: 1rem; font-weight: 750; box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 26px color-mix(in srgb, var(--accent) 22%, transparent); transition: transform .18s ease, box-shadow .18s ease; }
.auth-capper-button:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 34px color-mix(in srgb, var(--accent) 32%, transparent); }
.auth-capper-button:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .auth-capper-button:hover { transform: none; } }
.auth-feedback { margin: 0; padding: .75rem; border-radius: .5rem; background: var(--accent-soft); color: var(--text); font-size: .875rem; }
@media (max-width: 480px) { .auth-body { padding: 2rem 1.25rem 1.25rem; } }

.account-name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.capper-onboarding { padding: 1.25rem; font-size: .9rem; line-height: 1.5; }
.capper-onboarding h1 { font-size: 1.25rem; margin: .5rem 0 .75rem; }
.capper-onboarding h2 { font-size: 1rem; margin: 1rem 0 .5rem; }
.capper-onboarding .auth-submit { font-size: .9rem; }
.capper-onboarding .auth-switch { margin: .75rem 0 0; font-size: .8125rem; }