.audit-preview { color: var(--ink, #14161a); font: inherit; font-size: 16px; line-height: 1.6; }
.audit-preview h2 { font-size: 24px; margin: 0 0 12px; }
.audit-preview h3 { font-size: 18px; margin: 22px 0 10px; }
.audit-preview-score { font-size: 44px; font-weight: 700; margin: 8px 0; }
.audit-preview-score small { font-size: 16px; font-weight: 400; }
.audit-preview-url { overflow-wrap: anywhere; color: var(--ink-muted, #5b6470); }
.audit-preview-grades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.audit-preview-grade, .audit-preview-email { background: var(--surface-2, #f8fafc); border: 1px solid var(--line, #e3e7ee); border-radius: 10px; padding: 14px; }
.audit-preview-grade strong { display: block; font-size: 22px; }
.audit-preview li { margin-bottom: 12px; }
.audit-preview-email { margin-top: 22px; }
.audit-preview-email h3 { margin-top: 0; }
.audit-preview button { min-height: 44px; font: inherit; padding: 10px 14px; margin: 8px 8px 0 0; border: 1px solid var(--line, #e3e7ee); border-radius: 6px; background: var(--surface, #fff); color: var(--ink, #14161a); cursor: pointer; }
.audit-preview button:disabled { opacity: .6; cursor: default; }
.audit-preview button:focus-visible { outline: 3px solid #2a6fb0; outline-offset: 3px; }
.audit-preview-note { font-size: 14px; color: var(--ink-muted, #5b6470); }
@media (max-width: 420px) { .audit-preview-grades { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .audit-preview { font-size: 16px; line-height: 1.6; }
  .audit-preview h2 { font-size: 23px; line-height: 1.2; }
  .audit-preview h3 { font-size: 17px; line-height: 1.35; }
  .audit-preview-grade, .audit-preview-email { padding: 13px; }
  .audit-preview-email { margin-top: 18px; }
  .audit-preview button {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 9px 0 0;
    text-align: center;
  }
  .audit-preview-status { overflow-wrap: anywhere; }
  .audit-preview-note { font-size: 14px; line-height: 1.5; }
}