.diff-cols { display:flex; gap:14px; flex-wrap:wrap; }
.diff-col { flex:1 1 300px; min-width:0; }
.diff-out { font-family:"Courier New",Courier,monospace; font-size:12px; line-height:1.6; border:1px solid #ddd; overflow:auto; max-height:480px; padding:10px 0; background:#fafafa; }
.diff-line { padding:0 12px; white-space:pre-wrap; word-break:break-word; }
.diff-line.add { background:#e2f2e2; color:#1e5c28; }
.diff-line.del { background:#fbe9e7; color:#8c2318; }
.diff-line.same { color:#555; }
.diff-mark { display:inline-block; width:18px; font-weight:700; }

@media (prefers-color-scheme: dark) {
  .diff-out { background:#1e1f23; border-color:#33353a; }
  .diff-line.add { background:#1d2b1d; color:#7fc97f; }
  .diff-line.del { background:#331a17; color:#e08a80; }
  .diff-line.same { color:#989ca2; }
}