/* Account controls share FreeStory's existing typography, surfaces, and focus treatment. */
.auth-dialog { width: 440px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 40px); margin: auto; padding: 36px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 16%) transparent; border: 1px solid rgb(255 255 255 / 10%); border-radius: 20px; background: #1c1a20; color: var(--text); box-shadow: 0 32px 100px rgb(0 0 0 / 35%); }
.auth-dialog::backdrop { background: rgb(6 5 9 / 78%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.auth-close { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; opacity: .65; }
.auth-close:hover { opacity: 1; background: rgb(255 255 255 / 6%); }
.auth-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 29px; font-size: 15px; font-weight: 650; letter-spacing: -.3px; }
.auth-dialog h2 { margin: 0; color: #fff; font-size: 27px; font-weight: 650; letter-spacing: -.8px; line-height: 1.3; }
#auth-description { margin: 10px 0 25px; color: var(--text-secondary); font-size: 13px; line-height: 1.7; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; margin-bottom: 25px; border-radius: 999px; background: rgb(255 255 255 / 4%); }
.auth-tabs button { min-height: 36px; border: 0; border-radius: 999px; background: transparent; color: var(--text-secondary); font: 600 13px var(--font-ui); }
.auth-tabs [aria-selected="true"] { background: #fff; color: #17151b; }
.auth-form { display: grid; gap: 17px; }
.auth-form label { display: grid; gap: 9px; color: #e9e6ec; font-size: 12px; font-weight: 550; }
.auth-form input, .invitation-form input, .invitation-form select, .account-row select { width: 100%; min-width: 0; min-height: 44px; padding: 11px 13px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 9px; outline: none; background: rgb(255 255 255 / 4%); color: var(--text); font: 13px/1.5 var(--font-ui); }
.auth-form input::placeholder { color: #77717f; font-size: 12px; }
.auth-form input:focus, .invitation-form input:focus, .invitation-form select:focus, .account-row select:focus { border-color: rgb(255 255 255 / 40%); background: rgb(255 255 255 / 6%); }
.auth-password-wrap { position: relative; display: block; }
.auth-password-wrap input { padding-right: 62px; }
#auth-password-toggle { position: absolute; right: 8px; top: 7px; height: 30px; padding: 0 7px; border: 0; border-radius: 5px; background: transparent; color: var(--text-secondary); font: 11px var(--font-ui); }
.auth-submit { min-height: 45px; margin-top: 5px; border: 0; border-radius: 999px; background: #fff; color: #17151b; font: 700 13px var(--font-ui); }
.auth-submit:hover:not(:disabled) { background: #e5e1e9; }
.auth-submit:active:not(:disabled) { transform: scale(.985); }
.auth-submit:disabled { opacity: .5; cursor: wait; }
.auth-hint, .auth-footer { margin: 0; color: var(--text-muted); font-size: 11px; line-height: 1.7; }
.auth-footer { margin-top: 23px; text-align: center; }
.auth-error { margin: 0; color: #f1b4bd; font-size: 12px; line-height: 1.6; }
.auth-close:focus-visible, .auth-tabs button:focus-visible, #auth-password-toggle:focus-visible, .auth-submit:focus-visible, .account-text-button:focus-visible, .account-secondary-button:focus-visible { outline: 2px solid #c5becf; outline-offset: 3px; }
.account-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.account-heading-row h2 { margin-bottom: 0; }
.account-muted { color: var(--text-muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.account-text-button { padding: 4px 0; border: 0; background: transparent; color: var(--text-secondary); font: 12px var(--font-ui); }
.account-text-button:hover { color: #fff; }
.account-secondary-button { flex: 0 0 auto; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: rgb(255 255 255 / 7%); color: var(--text); font: 600 12px var(--font-ui); }
.account-secondary-button:disabled { opacity: .4; cursor: default; }
.account-list { display: grid; }
.account-row { display: flex; align-items: center; gap: 14px; padding: 18px 0; border-bottom: 1px solid rgb(255 255 255 / 7%); }
.account-row:last-child { border: 0; padding-bottom: 0; }
.account-row-copy { flex: 1; min-width: 140px; }
.account-row-copy strong { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.account-row-copy small { display: block; color: var(--text-muted); font-size: 11px; overflow-wrap: anywhere; }
.account-row select { width: auto; min-height: 36px; padding: 7px 10px; font-size: 11px; }
.account-row select option, .invitation-form select option { background: #26232a; }
.account-status { margin: 0 0 18px; color: var(--text-secondary); font-size: 12px; line-height: 1.7; }
.account-status.is-error { color: #f1b4bd; }
.invitation-form { display: flex; align-items: end; gap: 16px; margin: 22px 0 10px; }
.invitation-form label { display: grid; flex: 1; gap: 8px; color: var(--text-secondary); font-size: 12px; }
.invitation-created { padding: 16px; margin-top: 20px; border-radius: 10px; background: rgb(255 255 255 / 5%); }
.invitation-created p { margin: 0 0 12px; color: var(--text-secondary); font-size: 12px; }
.invitation-created div { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.invitation-created code { flex: 1; overflow-wrap: anywhere; font-size: 12px; }
@media (prefers-reduced-motion: no-preference) { .auth-submit, .auth-close, .auth-tabs button, .account-secondary-button { transition: background 180ms ease, transform 180ms ease, opacity 180ms ease; } }
@media (max-width: 640px) { .auth-dialog { padding: 30px 24px; } .account-row { flex-wrap: wrap; } .account-row-copy { flex-basis: 100%; } .invitation-form { flex-wrap: wrap; } .invitation-form .prompt-save { width: 100%; } }

.auth-dialog.is-register { padding-top: 28px; padding-bottom: 28px; }
.auth-dialog.is-register .auth-brand { margin-bottom: 18px; }
.auth-dialog.is-register #auth-description { margin-bottom: 20px; }
.auth-dialog.is-register .auth-form { gap: 14px; }
.auth-dialog.is-register .auth-footer { display: none; }