/* Authentication stages stay hidden even when the existing form layout is flex. */
.auth-form[hidden] { display: none; }
.auth-card > * + * { margin-top: 1rem; }
.auth-card input:not([type="checkbox"]) { width: 100%; }
#security-settings .settings-card {
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
}
#security-settings .settings-card > * + * { margin-top: 1rem; }
#passkeyList { list-style: none; }
#passkeyList li { display: flex; gap: .5rem; flex-wrap: wrap; margin-block: .75rem; }
#passkeyList input { min-width: 0; flex: 1; }
#reauthDialog {
    margin: auto;
    max-width: min(30rem, 90vw);
    padding: 1.5rem;
    color: var(--color-text);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
#reauthDialog::backdrop { background: rgb(0 0 0 / 65%); }
#reauthDialog form { margin-block: 1rem; }
#reauthDialog input { display: block; max-width: 100%; margin-block: .5rem; }
#reauthDialog button, #security-settings button { padding: .5rem .75rem; cursor: pointer; }
#reauthDialog button:disabled, #security-settings button:disabled { cursor: wait; opacity: .65; }

#loginMethods { border: 0; padding: 0; min-width: 0; }
#loginMethods[hidden] { display: none; }
#loginMethods > * + * { margin-top: 1rem; }

/* Shared account screens: recovery stays self-contained and makes no external requests. */
.auth-standalone { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; box-sizing: border-box; background: #0b0d14; color: #f2f3fa; font: 16px/1.6 system-ui, sans-serif; color-scheme: dark; }
.auth-standalone *, .auth-card * { box-sizing: border-box; }
.auth-section { padding: 48px 20px 64px; }
.auth-container { width: 100%; max-width: 480px; margin: 0 auto; }
.auth-card { width: 100%; max-width: 480px; padding: 36px; border: 1px solid #303346; border-radius: 24px; background: #151824; box-shadow: 0 24px 64px #0004; color: #f2f3fa; text-align: left; }
.auth-card h1 { margin: 8px 0 12px; font-size: clamp(28px, 5vw, 36px); line-height: 1.15; letter-spacing: -1px; font-weight: 650; }
.auth-card p { line-height: 1.6; }
.auth-eyebrow { font-size: 11px; letter-spacing: .15em; color: #b4a9ff; font-weight: 700; }
.auth-description, .auth-hint { color: #abb1c8; }
.auth-hint { font-size: 12px; margin-top: 6px !important; }
.auth-brand { display: inline-flex; align-items: center; gap: .5rem; color: #c7bdff; font-weight: 700; letter-spacing: .05em; text-decoration: none; margin-bottom: 28px; }
.auth-brand img { display: block; width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.auth-form { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.auth-form .form-group { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.auth-card label, #security-settings label { color: #d9dced; font-size: 14px; font-weight: 550; }
.auth-card input:not([type="checkbox"]), #security-settings input { border: 1px solid #41465e; border-radius: 10px; background: #0e111b; color: #f2f3fa; min-height: 48px; padding: 12px 14px; font: inherit; }
.auth-card button, #security-settings button, #security-settings a.btn { min-height: 46px; border: 1px solid #444962; border-radius: 10px; padding: 11px 16px; background: #222739; color: #f2f3fa; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.auth-card button { width: 100%; }
.auth-card button[type="submit"] { background: #b4a4ff; color: #19122f; border-color: #b4a4ff; }
.auth-card button:hover, #security-settings button:hover { filter: brightness(1.13); }
.auth-card button:disabled, #security-settings button:disabled { opacity: .55; cursor: not-allowed; }
.auth-card :focus-visible, #security-settings :focus-visible { outline: 3px solid #c5b9ff; outline-offset: 3px; }
.auth-card a { color: #c5b9ff; text-underline-offset: 4px; }
.auth-card .auth-alternatives { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid #303346; margin-top: 24px !important; }
.auth-alternatives[hidden] { display: none; }
.auth-remember { display: flex; align-items: center; gap: 10px; margin-top: 24px !important; }
.auth-remember input { width: 18px; height: 18px; accent-color: #b4a4ff; }
.auth-footer { text-align: center; font-size: 14px; color: #abb1c8; }
.auth-card #stagingLogin { background: transparent; color: #c5b9ff; border-style: dashed; font-size: 12px; margin-top: 16px; }
.auth-card #errorMessage:empty, .auth-card #resumeStatus:empty, .auth-status:empty { display: none; }
.auth-card #errorMessage:not(:empty), .auth-status:not(:empty) { display: block; border: 1px solid #57506f; background: #292439; padding: 14px; border-radius: 10px; color: #f4dfe7; font-size: 14px; }
.auth-card > a:last-child { display: inline-block; margin-top: 20px; }
#security-settings .settings-grid { display: block; max-width: 820px; }
#security-settings .settings-card { padding: 32px; border-radius: 20px; }
#security-settings h2 { font-size: 28px; letter-spacing: -.6px; }
.security-section { padding: 24px 0; border-top: 1px solid #35394c; }
.security-section h3 { font-size: 18px; margin: 0 0 8px; }
.security-section p { color: #abb1c8; margin: 8px 0 16px; line-height: 1.6; }
.security-section label { display: block; margin-bottom: 8px; }
#passkeyName { width: min(100%, 320px); margin: 0 8px 12px 0; }
#passkeyList { padding: 0; }
#passkeyList li { padding: 14px; border: 1px solid #35394c; border-radius: 12px; align-items: center; }
#reauthDialog { width: min(440px, calc(100vw - 40px)); border-radius: 20px; padding: 28px; }
#reauthDialog button { margin: 6px 4px 0 0; }
#reauthDialog input { width: 100%; }
#reauthError:not(:empty) { color: #ffb9c3; margin: 12px 0; }
@media (max-width: 540px) { .auth-section { padding: 24px 16px; } .auth-card { padding: 28px 22px; border-radius: 18px; } #security-settings .settings-card { padding: 22px; } #passkeyList li { flex-direction: column; align-items: stretch; } }