/* ============================================================
   JSON Diff Styling - Scenic IT Solutions
   ============================================================ */

.json-diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

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

.json-diff-result {
  background: #0d0d12;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  min-height: 200px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-all;
}

.diff-added {
  color: #27ae60;
  background: rgba(39, 174, 96, 0.15);
  display: block;
  padding: 2px 6px;
}

.diff-removed {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.15);
  display: block;
  padding: 2px 6px;
}

.diff-same {
  color: #a0a0ab;
  display: block;
  padding: 2px 6px;
}