.mfa-guide-trigger { margin-block: 12px; }
.mfa-guide-quick-help { margin-block: 16px; padding: 16px; border: 1px solid var(--border, #ddd); border-radius: 10px; }
.mfa-guide-quick-help summary { cursor: pointer; font-weight: 600; }
.mfa-guide-quick-help p { margin-block: 12px; white-space: pre-line; }
.mfa-guide-quick-help button { margin-block-start: 4px; }
.canonical-dialog.mfa-guide-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; }
.canonical-dialog.mfa-guide-dialog[open] { display: flex; flex-direction: column; }
.mfa-guide-dialog > header { flex: none; padding: 22px 26px 16px; border-bottom: 1px solid var(--border, #ddd); }
.mfa-guide-dialog h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; }
.mfa-guide-content { padding: 20px 26px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.mfa-guide-content h3 { margin: 24px 0 10px; font-size: 18px; line-height: 1.4; font-weight: 600; }
.mfa-guide-content h4 { margin: 16px 0 8px; font-size: 16px; line-height: 1.4; }
.mfa-guide-content p { margin: 10px 0; white-space: pre-line; line-height: 1.6; overflow-wrap: anywhere; }
.mfa-guide-content .mfa-guide-notice { padding: 14px 16px; border-inline-start: 3px solid var(--brand, #a84b1b); background: var(--surface-subtle, #fff4ec); }
.mfa-guide-content .mfa-guide-official { display: flex; flex-direction: column; gap: 12px; margin-block: 12px; }
.mfa-guide-dialog > footer { flex: none; display: flex; justify-content: flex-end; padding: 20px 26px; border-top: 1px solid var(--border, #ddd); }
.mfa-guide-dialog footer button { margin: 0; }
@media (max-width: 600px) {
  .mfa-guide-dialog > header { padding: 20px 18px 16px; }
  .mfa-guide-content { padding: 16px 18px; }
  .mfa-guide-dialog > footer { padding: 20px 18px; }
  .mfa-guide-dialog h2 { font-size: 18px; }
}