.diff-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.diff-inputs .field-row-stacked {
  margin-bottom: 0;
}

.diff-output {
  margin-top: 12px;
  border: 2px inset #fff;
  background: #fff;
  max-height: 420px;
  overflow: auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  line-height: 1.4;
}

.diff-output:empty {
  display: none;
}

.diff-output .diff-same,
.diff-output .diff-add,
.diff-output .diff-remove {
  display: block;
  padding: 1px 8px;
  white-space: pre-wrap;
  word-break: break-word;
  border-bottom: 1px solid #dfdfdf;
}

.diff-output .diff-same {
  background: #fff;
  color: #222;
}

.diff-output .diff-add {
  background: #c0ffc0;
  color: #004000;
  border-left: 3px solid #008000;
}

.diff-output .diff-remove {
  background: #ffc0c0;
  color: #400000;
  border-left: 3px solid #800000;
  text-decoration: line-through;
}

.diff-empty {
  margin: 0;
  padding: 8px;
  color: #444;
  font-size: 11px;
}

@media (max-width: 720px) {
  .diff-inputs {
    grid-template-columns: 1fr;
  }
}