.df-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.df-pin{border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-family:var(--mono);font-size:12.5px;background:var(--panel)}
.df-stat{font-size:12.5px;color:var(--muted)}
.df-add{color:var(--green);font-weight:700}
.df-del{color:var(--red);font-weight:700}

.df-body{font-family:var(--mono);font-size:12.5px;line-height:1.55;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:auto;max-height:66vh}
.df-line{display:grid;grid-template-columns:52px 52px 1fr;white-space:pre-wrap;word-break:break-word}
.df-line>.df-n{color:var(--muted);text-align:right;padding:0 8px;user-select:none;font-size:11px;background:#fafbfc;border-right:1px solid var(--border)}
.df-line>.df-t{padding:0 10px}
.df-line.add{background:var(--green-soft)}
.df-line.add .df-t::before{content:'+ ';color:var(--green);font-weight:700}
.df-line.del{background:var(--red-soft)}
.df-line.del .df-t::before{content:'- ';color:var(--red);font-weight:700}
.df-line.eq .df-t::before{content:'  '}
.df-gap{background:var(--gray-soft);color:var(--muted);text-align:center;font-size:11px;padding:3px}
.df-same{padding:28px;text-align:center;color:var(--green);font-weight:600}