/* Status badges */
.sp2fa-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:13px; font-weight:600; line-height:1.4; }
.sp2fa-badge-on { background:#d1fae5; color:#047857; }
.sp2fa-badge-off { background:#f3f4f6; color:#6b7280; }
.sp2fa-method-label { margin-left:8px; color:#6b7280; font-size:13px; }
.sp2fa-recovery-count { display:block; margin-top:6px; color:#6b7280; font-size:12px; }
.sp2fa-hint { display:block; margin-top:4px; color:#9ca3af; font-size:13px; }

/* Buttons */
.sp2fa-btn-group { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-start; max-width:100%; }
.sp2fa-btn-group .button,
.sp2fa-actions-bar .button {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	max-width:100%;
	white-space:normal;
	height:auto;
	min-height:30px;
	line-height:1.35;
	padding-top:6px;
	padding-bottom:6px;
	text-align:center;
}
.sp2fa-btn-danger { color:#dc2626 !important; border-color:#fca5a5 !important; }
.sp2fa-btn-danger:hover { background:#fef2f2 !important; border-color:#dc2626 !important; }

/* Method selection cards */
.sp2fa-method-cards { display:flex; gap:12px; flex-wrap:wrap; }
.sp2fa-method-card {
	display:flex; flex-direction:column; align-items:flex-start; gap:4px;
	width:220px; padding:16px 18px; border:2px solid #e5e7eb; border-radius:10px;
	background:#fff; cursor:pointer; text-align:left; transition:border-color .15s, box-shadow .15s;
	font-family:inherit; font-size:13px; line-height:1.4;
}
.sp2fa-method-card:hover { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.sp2fa-method-card strong { font-size:14px; color:#111827; margin-top:4px; }
.sp2fa-method-card span { color:#6b7280; font-size:12px; }
.sp2fa-recommended { font-style:normal; font-size:11px; font-weight:600; color:#059669; background:#ecfdf5; padding:1px 8px; border-radius:10px; margin-top:4px; }
.sp2fa-setup-password { max-width:360px; margin-top:16px; }
.sp2fa-setup-password label { display:block; margin-bottom:6px; font-weight:600; color:#374151; }
.sp2fa-setup-password .description { margin-top:6px; }

/* Cards */
.sp2fa-card { padding:14px 16px; border-radius:8px; margin-bottom:14px; font-size:13px; line-height:1.5; }
.sp2fa-card-warn { background:#fffbeb; border:1px solid #fde68a; }
.sp2fa-card-info { background:#eff6ff; border:1px solid #bfdbfe; }
.sp2fa-card-error { background:#fef2f2; border:1px solid #fecaca; }
.sp2fa-card-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:14px; }
.sp2fa-card-desc { margin:0; color:#6b7280; font-size:13px; }
.sp2fa-card-warn .sp2fa-card-header { color:#92400e; }
.sp2fa-card-warn .sp2fa-card-desc { color:#a16207; }
.sp2fa-card-info .sp2fa-card-header { color:#1e40af; }
.sp2fa-card-info .sp2fa-card-desc { color:#1e40af; }

/* QR code and TOTP setup */
.sp2fa-setup-totp, .sp2fa-setup-email { max-width:480px; }
.sp2fa-step-label { font-weight:600; font-size:14px; color:#111827; margin:0 0 4px; }
.sp2fa-step-desc { color:#6b7280; font-size:13px; margin:0 0 12px; }
.sp2fa-qr-wrapper {
	display:flex; justify-content:center; padding:20px;
	background:#fff; border:2px solid #e5e7eb; border-radius:12px;
	margin-bottom:16px;
}
.sp2fa-qr-img { display:block; image-rendering:pixelated; }
.sp2fa-manual-toggle { margin-bottom:16px; }
.sp2fa-manual-toggle summary { cursor:pointer; color:#2563eb; font-size:13px; font-weight:500; }
.sp2fa-manual-toggle summary:hover { text-decoration:underline; }
.sp2fa-manual-key {
	display:flex; align-items:center; gap:8px;
	margin-top:8px; padding:10px 14px;
	background:#f9fafb; border:1px solid #e5e7eb; border-radius:6px;
}
.sp2fa-manual-key code { font-family:'SF Mono',Consolas,'Courier New',monospace; font-size:15px; letter-spacing:2px; color:#111827; user-select:all; flex:1; }
.sp2fa-copy-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:1px solid #d1d5db; border-radius:6px; background:#fff; color:#6b7280; cursor:pointer; transition:color .15s,border-color .15s; }
.sp2fa-copy-btn:hover { color:#111827; border-color:#9ca3af; }
.sp2fa-divider { height:1px; background:#e5e7eb; margin:18px 0; }

/* Verification input */
.sp2fa-verify-input { margin-bottom:4px; }
.sp2fa-verify-input label { display:block; font-weight:600; font-size:13px; color:#374151; margin-bottom:4px; }
.sp2fa-verify-input input[type="text"] { font-family:'SF Mono',Consolas,'Courier New',monospace; font-size:18px; letter-spacing:6px; width:160px; padding:8px 12px; text-align:center; }

/* Messages */
.sp2fa-msg { padding:8px 14px; border-radius:6px; font-size:13px; margin-top:10px; }
.sp2fa-msg.error { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
.sp2fa-msg.success { background:#f0fdf4; color:#059669; border:1px solid #bbf7d0; }

/* Actions bar */
.sp2fa-actions-bar { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; align-items:flex-start; }

/* Recovery codes grid */
.sp2fa-codes-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:10px 0; }
.sp2fa-code-item { display:block; padding:7px; background:#fff; border:1px solid #e5e7eb; border-radius:4px; text-align:center; font-family:'SF Mono',Consolas,'Courier New',monospace; font-size:13px; }
.sp2fa-copy-codes { margin-top:4px; }

/* Success banner */
.sp2fa-success-banner { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; background:#ecfdf5; border:1px solid #a7f3d0; border-radius:8px; margin-bottom:16px; }
.sp2fa-success-banner strong { display:block; color:#047857; font-size:14px; }
.sp2fa-success-banner p { margin:2px 0 0; color:#059669; font-size:13px; }

/* Loading */
.sp2fa-loading { display:flex; align-items:center; color:#6b7280; font-size:13px; padding:8px 0; }

/* Subtle link */
.sp2fa-link-subtle { color:#6b7280; font-size:12px; text-decoration:underline; }
.sp2fa-link-subtle:hover { color:#374151; }
