[data-fui-comp="ui-diff-viewer"] {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.85rem;
  line-height: 1.5;
  border: 1px solid var(--color-border, #E4E4E7);
  border-radius: var(--radii-md, 8px);
  overflow: hidden;
  background: var(--color-surface, #FFFFFF);
}
[data-fui-comp="ui-diff-viewer"] .ui-diff-viewer__hunk {
  padding: 4px var(--spacing-md, 12px);
  background: var(--color-surface-soft, #F4F4F5);
  color: var(--color-text-muted, #52525B);
  font-size: 0.75rem;
  border-block: 1px solid var(--color-border, #E4E4E7);
}
[data-fui-comp="ui-diff-viewer"] .ui-diff-viewer__file {
  padding: 4px var(--spacing-md, 12px);
  color: var(--color-text, #18181B);
  font-weight: 600;
  font-size: 0.85rem;
  border-block-end: 1px solid var(--color-border, #E4E4E7);
}
[data-fui-comp="ui-diff-viewer"] .ui-diff-viewer__line {
  display: grid;
  grid-template-columns: 2ch 1fr;
  gap: var(--spacing-sm, 8px);
  padding-inline: var(--spacing-md, 12px);
}
[data-fui-comp="ui-diff-viewer"] .ui-diff-viewer__gutter {
  user-select: none;
  text-align: end;
  color: var(--color-text-muted, #52525B);
}
[data-fui-comp="ui-diff-viewer"] .ui-diff-viewer__code {
  margin: 0;
  padding: 0;
  font: inherit;
  white-space: pre;
  overflow-x: auto;
}
[data-fui-comp="ui-diff-viewer"] .ui-diff-viewer__line--add {
  background: color-mix(in srgb, var(--color-success, #16A34A) 12%, transparent);
}
[data-fui-comp="ui-diff-viewer"] .ui-diff-viewer__line--remove {
  background: color-mix(in srgb, var(--color-danger, #DC2626) 12%, transparent);
}

/* Split layout */
.ui-diff-viewer--split .ui-diff-viewer__header,
.ui-diff-viewer--split .ui-diff-viewer__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ui-diff-viewer--split .ui-diff-viewer__header-cell {
  padding: 4px var(--spacing-md, 12px);
  background: var(--color-surface-soft, #F4F4F5);
  color: var(--color-text-muted, #52525B);
  font-weight: 600;
  border-block-end: 1px solid var(--color-border, #E4E4E7);
}
.ui-diff-viewer--split .ui-diff-viewer__header-cell + .ui-diff-viewer__header-cell {
  border-inline-start: 1px solid var(--color-border, #E4E4E7);
}
.ui-diff-viewer--split .ui-diff-viewer__cell {
  padding: 0 var(--spacing-md, 12px);
}
.ui-diff-viewer--split .ui-diff-viewer__cell + .ui-diff-viewer__cell {
  border-inline-start: 1px solid var(--color-border, #E4E4E7);
}
.ui-diff-viewer--split .ui-diff-viewer__cell--add {
  background: color-mix(in srgb, var(--color-success, #16A34A) 12%, transparent);
}
.ui-diff-viewer--split .ui-diff-viewer__cell--remove {
  background: color-mix(in srgb, var(--color-danger, #DC2626) 12%, transparent);
}