[x-cloak] {
  display: none !important;
}

.diff-shell {
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 212, 170, 0.12), transparent 30rem),
    radial-gradient(circle at 88% 8%, rgba(59, 130, 246, 0.09), transparent 26rem);
}

.diff-panel {
  box-shadow: 0 20px 45px -35px rgba(15, 23, 42, 0.45);
}

.diff-editor,
.diff-result-editor {
  min-height: 410px;
}

.diff-result-editor {
  height: min(68vh, 720px);
}

.diff-editor .monaco-editor,
.diff-result-editor .monaco-editor,
.diff-result-editor .monaco-diff-editor {
  border-radius: 0;
}

.diff-stat {
  min-width: 7.5rem;
}

.diff-drop-active {
  outline: 2px dashed #00d4aa;
  outline-offset: -7px;
  background: rgba(0, 212, 170, 0.07);
}

.diff-toggle:checked {
  background-color: #00d4aa;
  border-color: #00d4aa;
}

/* Monaco provides semantic diff classes; these reinforce red/green contrast. */
.diff-result-editor .line-insert,
.diff-result-editor .char-insert {
  background-color: rgba(34, 197, 94, 0.22) !important;
}

.diff-result-editor .line-delete,
.diff-result-editor .char-delete {
  background-color: rgba(239, 68, 68, 0.22) !important;
}

.dark .diff-result-editor .line-insert,
.dark .diff-result-editor .char-insert {
  background-color: rgba(34, 197, 94, 0.2) !important;
}

.dark .diff-result-editor .line-delete,
.dark .diff-result-editor .char-delete {
  background-color: rgba(239, 68, 68, 0.2) !important;
}

@media (max-width: 767px) {
  .diff-editor {
    min-height: 320px;
  }

  .diff-result-editor {
    height: 620px;
  }
}