.auth-body { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--app-bg); color: var(--app-ink); }
.auth-card { width: 100%; max-width: 460px; padding: 30px; border: 1px solid var(--app-border); border-radius: 16px; background: var(--app-surface); box-shadow: 0 12px 48px rgb(0 0 0 / 5%); }
.auth-brand { display: block; width: fit-content; margin-bottom: 30px; }
.auth-card h1 { margin: 0 0 16px; font-size: 1.6rem; font-weight: 700; overflow-wrap: anywhere; }
.auth-card p { color: var(--app-muted); line-height: 1.6; }
.auth-card .form-label { font-weight: 600; }
.auth-card .btn-primary { --bs-btn-bg: #177b64; --bs-btn-border-color: #177b64; --bs-btn-hover-bg: #12634f; --bs-btn-hover-border-color: #12634f; }
.auth-qr { max-width: 280px; margin: 20px auto; background: #fff; color: #000; }
.auth-qr svg { display: block; width: 100%; height: auto; }
.auth-manual { margin: 16px 0 24px; }
.auth-manual summary { cursor: pointer; color: var(--app-green); }
.auth-manual p { margin-top: 12px; margin-bottom: 8px; }
.auth-secret { overflow-wrap: anywhere; user-select: all; }
.auth-back { display: block; margin-top: 20px; text-align: center; color: var(--app-green); }
.auth-code { font-size: 1.15rem; }
.auth-recovery { padding: 0; list-style: none; margin: 20px 0; }
.auth-recovery li { padding: 6px 0; }
.auth-recovery code { font-size: .85rem; overflow-wrap: anywhere; user-select: all; }
.logout-form { margin: 0; }
.logout-button { white-space: nowrap; }
@media (max-width: 480px) { .auth-card { padding: 22px 18px; } .auth-body { padding: 16px 10px; } .logout-button span { display: none; } }