.diff-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: .75rem;
}

.diff-file {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    font-size: .85rem;
}

.diff-file-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: .45rem .75rem;
    font-family: var(--mono, monospace);
    font-size: .8rem;
    color: var(--fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.diff-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mono, monospace);
    font-size: .82rem;
    line-height: 1.55;
}

.diff-table tr { vertical-align: top; }

/* sign column (+/−/ ) */
.diff-sign {
    width: 1.6ch;
    text-align: center;
    padding: 0 .3rem;
    user-select: none;
}

/* code column */
.diff-code {
    white-space: pre;
    overflow: auto;
    padding: 0 .5rem;
}

/* row colours */
.diff-add              { background: color-mix(in srgb, #22863a 12%, transparent); }
.diff-add .diff-sign   { color: #22863a; }
.diff-del              { background: color-mix(in srgb, #cb2431 10%, transparent); }
.diff-del .diff-sign   { color: #cb2431; }
.diff-ctx              { color: var(--fg-muted); }
.diff-meta             { font-style: italic; opacity: .7; }
.diff-hunk td          {
    padding: .2rem .75rem;
    background: color-mix(in srgb, var(--gold, #e6a817) 8%, transparent);
    color: var(--fg-muted);
    font-size: .78rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

@media (prefers-color-scheme: dark) {
    .diff-add            { background: color-mix(in srgb, #2ea043 18%, transparent); }
    .diff-add .diff-sign { color: #3fb950; }
    .diff-del            { background: color-mix(in srgb, #f85149 15%, transparent); }
    .diff-del .diff-sign { color: #f85149; }
}