.audit-change-summary { margin: 0 0 20px; border: 1px solid #d5e3f2; border-radius: 8px; overflow: hidden; background: #fff;
}
.audit-change-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px; background: #eef5fd;
}
.audit-change-heading h3 { margin: 0; font-size: 15px; color: #174675;
}
.audit-change-count { padding: 2px 8px; border-radius: 12px; background: #dceafb; color: #174675; font-size: 12px;
}
.audit-change-source { margin-left: auto; font-size: 12px; color: #64748b;
}
.audit-change-notice { margin: 0; padding: 10px 16px; line-height: 1.6; font-size: 12px; color: #64748b; background: #fafcff; border-bottom: 1px solid #e2e8f0;
}
.audit-change-columns, .audit-change-row { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; padding: 12px 16px;
}
.audit-change-columns { color: #64748b; font-size: 12px; background: #f8fafc;
}
.audit-change-row { border-top: 1px solid #e2e8f0; font-size: 13px; line-height: 1.6; color: #1e293b;
}
.audit-change-row > span { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap;
}
.audit-change-before { color: #64748b;
}
.audit-change-after { color: #174675; font-weight: 600;
}
.audit-change-row[data-change-kind="added"] .audit-change-after { color: #15803d;
}
.audit-change-row[data-change-kind="removed"] .audit-change-before { color: #b91c1c;
}
.audit-change-row small { display: none;
}
@media (max-width: 640px) {
.audit-change-source { margin-left: 0; width: 100%;
}
.audit-change-columns { display: none;
}
.audit-change-row { grid-template-columns: 1fr; gap: 6px;
}
.audit-change-field { font-weight: 600;
}
.audit-change-row small { display: inline-block; width: 68px; font-size: 12px; font-weight: 400; color: #64748b;
}
}