/* The approved security chooser, inside the existing signup verification dialog. */
#auth-online #signup-verification-dialog.security-active { width:min(600px,calc(100vw - 24px)); border-radius:4px; }
#auth-online #signup-verification-dialog.security-active #signup-verification-title:focus { outline:none; box-shadow:none; }
.account-security { padding:20px 24px; font-family:"Open Sans",Arial,sans-serif; font-size:16px; line-height:1.5; }
.account-security [hidden] { display:none !important; }
.account-security p { margin:0 0 16px; }
.account-security .as-verified { display:flex; gap:8px; color:var(--success-ink); font-size:14px; overflow-wrap:anywhere; }
.account-security .as-verified i { margin-top:4px; }
.account-security fieldset { min-width:0; padding:0; margin:0; border:0; }
.account-security legend { padding:0; margin-bottom:12px; font-size:16px; font-weight:700; }
.account-security .as-choices { display:grid; gap:8px; }
.account-security .as-choice { display:flex; align-items:flex-start; gap:12px; padding:8px 0; min-height:44px; cursor:pointer; }
.account-security .as-choice input { flex:0 0 18px; margin:4px 0 0; accent-color:var(--btn-primary-bg); }
.account-security .as-choice input:focus-visible { outline:2px solid var(--brand-purple-ink); outline-offset:3px; }
.account-security .as-icon { width:28px; flex:0 0 28px; font-size:23px; line-height:28px; color:var(--brand-purple-ink,#6B48E0); text-align:center; }
.account-security .as-copy { min-width:0; }
.account-security .as-choice-title { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:16px; font-weight:400; }
.account-security .as-description { display:block; margin-top:4px; font-size:16px; font-weight:400; color:var(--text-muted); line-height:1.5; }
.account-security .as-recommended { display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:4px; background:#c9ecff; color:#042238; font-size:11px; font-weight:600; }
.account-security .as-footer { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:12px; }
.account-security .as-caption { font-size:14px; color:var(--text-muted); }
.account-security .as-actions { margin-left:auto; display:flex; flex-wrap:wrap; gap:12px; }
.account-security .as-back { border:0; padding:8px 0; min-height:44px; background:none; color:var(--link-ink,#006cb4); font-size:14px; cursor:pointer; }
.account-security .as-back:hover { text-decoration:underline; }
.account-security .as-field { margin:16px 0; }
.account-security .as-field label { display:block; margin-bottom:4px; font-size:16px; font-weight:600; }
.account-security .as-field input { width:100%; min-height:44px; padding:8px 12px; border:1px solid var(--border); border-radius:4px; background:var(--surface); color:var(--text); font:400 16px/1.5 "Open Sans",Arial,sans-serif; }
.account-security .as-field input:focus-visible { outline:2px solid var(--brand-purple-ink); outline-offset:2px; }
.account-security .as-code { max-width:240px; }
.account-security .as-code input { letter-spacing:.15em; }
.account-security .as-consent { display:flex; align-items:flex-start; gap:12px; min-height:44px; font-size:14px; line-height:1.5; cursor:pointer; }
.account-security .as-consent input { margin-top:4px; flex-shrink:0; accent-color:var(--btn-primary-bg); }
.account-security .as-error { color:var(--danger); font-size:16px; margin:12px 0; }
.account-security .as-qr { display:block; width:160px; height:160px; margin:16px 0; }
.account-security .as-secret { font-family:monospace; font-size:16px; overflow-wrap:anywhere; user-select:all; }
.account-security .as-recovery-codes { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; margin:16px 0; padding:12px; background:var(--surface-canvas); font-size:16px; font-family:monospace; overflow-wrap:anywhere; }
.account-security .as-reveal { animation:as-reveal 2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes as-reveal { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:500px) { .account-security { padding:16px; } .account-security .as-choice { gap:10px; } .account-security .as-recovery-codes { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .account-security .as-reveal { animation:none; } }

/* Sign-up popup, approved Option A: one purple header with the 80px lock and a
   white title on every step, then a white question area. */
#auth-online #signup-verification-dialog { border-radius:4px; }
#auth-online #signup-verification-dialog .signup-verification-header { overflow:hidden; gap:16px; padding:18px 12px 18px 24px; background:linear-gradient(120deg,#3B2A8C,var(--brand-purple-ink,#6B48E0)); color:#fff; border-bottom:0; }
#auth-online #signup-verification-dialog .signup-verification-header::after { content:""; position:absolute; right:-40px; top:-60px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.07); pointer-events:none; }
#auth-online #signup-verification-dialog .signup-verification-header > * { position:relative; z-index:1; }
#auth-online #signup-verification-dialog .signup-verification-header img { width:80px; height:80px; }
#auth-online #signup-verification-dialog #signup-verification-title { font-size:22px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; }
#auth-online #signup-verification-dialog .signup-verification-close { align-self:flex-start; color:#fff; border-radius:50%; }
#auth-online #signup-verification-dialog .signup-verification-close:is(:hover,:focus-visible) { background:rgba(255,255,255,.16); }
#auth-online #signup-verification-dialog #security-fields { padding:20px 24px 20px; }
#auth-online #signup-verification-dialog .signup-code-panel { margin:0; padding:0; border-top:0; }
#auth-online #signup-verification-dialog #signup-code-title { display:none; }
#auth-online #signup-verification-dialog #signup-code-status { font-size:16px; line-height:1.5; margin:0 0 16px; }
@media (max-width:500px) {
  #auth-online #signup-verification-dialog .signup-verification-header { gap:12px; padding:14px 8px 14px 16px; }
  #auth-online #signup-verification-dialog .signup-verification-header img { width:56px; height:56px; }
  #auth-online #signup-verification-dialog #signup-verification-title { font-size:20px; }
  #auth-online #signup-verification-dialog #security-fields { padding:16px; }
}