/* Account pages (_AuthLayout): password rules, 2FA enrolment, status pages. */
.pw-rules { list-style: none; margin: 0 0 16px; padding: 12px 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px;
    border: 1px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--text-3); }
.pw-rules li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pw-rules li .i { opacity: .35; flex: none; }
.pw-rules li.ok { color: var(--success-ink); }
.pw-rules li.ok .i { opacity: 1; color: var(--success); }
:root[data-theme="dark"] .pw-rules li.ok { color: var(--success); }

.auth-card.wide { max-width: 480px; }
.auth-icon { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 16px; }
.auth-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 20px; font-size: 13.5px; }

.otp-steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 14px; counter-reset: otp; }
.otp-steps > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; counter-increment: otp; }
.otp-steps > li::before { content: counter(otp); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    background: var(--brand-50); color: var(--brand-ink); font-weight: 600; font-size: 13px; }
.otp-steps p { margin: 2px 0 0; color: var(--text-3); font-size: 13.5px; }

.qr-box { display: grid; place-items: center; padding: 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px;
    width: min(220px, 100%); margin: 10px 0 6px; }
.qr-box svg { width: 100%; height: auto; display: block; }
.secret-key { font-family: var(--font-mono); font-size: 14px; letter-spacing: .06em; overflow-wrap: anywhere;
    padding: 8px 10px; border-radius: 8px; background: var(--bg-subtle); display: inline-block; max-width: 100%; }
.otp-input { font-family: var(--font-mono); font-size: 22px !important; letter-spacing: .4em; text-align: center; height: 52px !important; }

.status-code { font-size: 64px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--text-3); margin-bottom: 12px; }
.howto ol { padding-left: 20px; display: grid; gap: 10px; margin: 0 0 16px; }
.howto li { padding-left: 4px; }
.store-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.captcha-box { margin-bottom: 16px; overflow-x: auto; }

/* Keep the auth column within the viewport on phones (long emails in lists would widen the grid track). */
.auth-main { grid-template-columns: minmax(0, 1fr); }
.auth-card .list-item .body, .auth-card .list-item .title { min-width: 0; overflow-wrap: anywhere; }