/* dmarcboard app — DNS provider help + Cloudflare one-click apply (public/js/app-dnsfix.js). */
.dnsfix { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.dnsfix > * + * { margin-top: 12px; }
.dnsfix-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dnsfix-head h3 { font-size: 15.5px; margin: 0; }
.dnsfix-apply { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; padding: 14px 16px;
  background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--r); }
.dnsfix-apply p { margin: 0; flex: 1 1 280px; font-size: 14px; color: var(--navy-900); }
.dnsfix-diy summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--brand); padding: 6px 0; width: fit-content; min-height: 32px; display: flex; align-items: center; }
.dnsfix-diy summary:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
.dnsfix-diy[open] summary { margin-bottom: 8px; }
.dnsfix-steps { margin: 0; padding-left: 22px; display: grid; gap: 12px; font-size: 14px; color: var(--fg); }
.dnsfix-steps > li { padding-left: 2px; }
.dnsfix-steps > li::marker { font-weight: 600; color: var(--brand); }
.dnsfix-steps > li > .btn { margin-top: 4px; vertical-align: middle; }
.dnsfix-record { margin-top: 8px; }
.dnsfix-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dnsfix-hint { display: block; font-size: 12.5px; color: var(--muted-fg); line-height: 1.45; }
.dnsfix-menu { display: inline; }
.dnsfix-menu-item { font-weight: 600; color: var(--navy-900); }
.dnsfix-sep { color: var(--subtle-fg); }
.dnsfix-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dnsfix-parked-list { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }

/* dialog */
.dnsfix-safe { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); background: var(--pass-bg); border: 1px solid var(--pass-bd); color: var(--pass); }
.dnsfix-safe .i { flex: none; margin-top: 2px; }
.dnsfix-safe span { color: var(--navy-900); }
.dnsfix-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dnsfix-change { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; background: var(--card); }
.dnsfix-change.dnsfix-remove { border-color: var(--fail-bd); background: var(--fail-bg); }
.dnsfix-change.dnsfix-noop { background: #f8f9fc; }
.dnsfix-change-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dnsfix-val { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; margin-top: 8px; align-items: baseline; }
.dnsfix-val-k { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--subtle-fg); }
.dnsfix-val code { font-size: 12.5px; line-height: 1.5; background: #f8f9fc; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; }
.dnsfix-del { text-decoration: line-through; text-decoration-color: rgba(185,28,28,.6); color: var(--fail); }
.dnsfix-dlg #cf-token { letter-spacing: .04em; }

@media (max-width: 640px) {
  .dnsfix-apply { padding: 12px; }
  .dnsfix-apply .btn { width: 100%; justify-content: center; }
  .dnsfix-val { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dnsfix-steps { padding-left: 18px; }
}