:root {
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-soft: #e0e7ff;
  --shadow-hover: 0 16px 36px -8px rgba(79, 70, 229, 0.18), 0 4px 12px rgba(15, 23, 42, 0.05);
}
.brand-badge {
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
}
.hero-highlight {
  color: #a5b4fc;
}
.tool-textarea {
  width: 100%;
  min-height: 170px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
  background: #ffffff;
  color: var(--ink);
}
.tool-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.diff-box {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: auto;
  max-height: 360px;
  background: #ffffff;
}
.diff-line { padding: 4px 12px; border-bottom: 1px solid #f1f5f9; white-space: pre-wrap; word-break: break-word; }
.diff-add { background: #dcfce7; color: #166534; }
.diff-del { background: #fee2e2; color: #991b1b; }
.diff-same { color: #334155; }