.diff-tool {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.diff-input-pane {
  min-height: 160px;
  max-height: 240px;
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  line-height: 1.5;
  background: var(--color-ink, #0f1117);
  border: 1px solid var(--color-border, #2a2d3a);
  border-radius: 0.5rem;
  padding: 0.75rem;
  color: var(--color-snow, #f0f2f8);
  resize: vertical;
  width: 100%;
  white-space: pre;
}

.diff-input-pane:focus {
  outline: none;
  border-color: var(--color-accent, #4f8ef7);
}

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

.diff-line {
  display: flex;
  width: 100%;
  border-bottom: 1px solid rgba(42, 45, 58, 0.4);
}

.diff-num {
  width: 44px;
  min-width: 44px;
  padding: 0.2rem 0.5rem;
  text-align: right;
  color: var(--color-muted, #6b7280);
  background: rgba(15, 17, 23, 0.5);
  user-select: none;
  border-right: 1px solid var(--color-border, #2a2d3a);
}

.diff-content {
  flex: 1;
  padding: 0.2rem 0.75rem;
  white-space: pre-wrap;
  word-break: break-all;
}

.diff-added {
  background: rgba(16, 185, 129, 0.15);
  color: #a7f3d0;
}

.diff-added .diff-num {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
}

.diff-deleted {
  background: rgba(239, 68, 68, 0.15);
  color: #fecaca;
}

.diff-deleted .diff-num {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
}

.diff-empty {
  background: rgba(15, 17, 23, 0.25);
}

.char-ins {
  background: rgba(16, 185, 129, 0.4);
  border-radius: 2px;
  padding: 0 1px;
}

.char-del {
  background: rgba(239, 68, 68, 0.4);
  border-radius: 2px;
  padding: 0 1px;
  text-decoration: line-through;
}