:root {
  --primary: #f59e0b;
  --primary-dark: #d97706;
  --accent: #ef4444;
  --glow-primary: rgba(245,158,11,0.18);
  --glow-accent:  rgba(239,68,68,0.12);
}
:root.theme-light {
  --primary: #d97706;
  --primary-dark: #b45309;
  --accent: #dc2626;
  --glow-primary: rgba(217,119,6,0.12);
  --glow-accent:  rgba(220,38,38,0.08);
}

.divider {
  width: 20px;
  flex-shrink: 0;
  background: transparent;
  cursor: col-resize;
  position: relative;
  z-index: 10;
}
/* 拖拽时的高亮背景放在独立的伪元素上，避免 opacity 影响到中缝上差异点标记（.diff-minimap）的显示；鼠标悬浮时不做高亮，避免遮挡差异点查看 */
.divider::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--surface2);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  transition: background 0.15s;
}
.divider.dragging::before { background: var(--surface2); opacity: 1; }

/* ============ 中缝差异点提示（Minimap） ============ */

.diff-minimap {
  position: absolute;
  top: 38px;
  left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 20;
}
.diff-mark {
  position: absolute;
  left: 1px; right: 1px;
  min-height: 3px;
  border-radius: 1px;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0.85;
  transition: opacity 0.15s, transform 0.15s;
}
.diff-mark:hover {
  opacity: 1;
  transform: scaleX(1.6);
}
.diff-mark-delete { background: var(--danger); }
.diff-mark-insert { background: var(--success); }
.diff-mark-modify { background: var(--warning); }
.diff-mark-mixed  { background: linear-gradient(to bottom, var(--danger) 50%, var(--success) 50%); }

@keyframes diffRowFlash {
  0%   { box-shadow: inset 0 0 0 2px rgba(245,158,11,.9); }
  100% { box-shadow: inset 0 0 0 2px rgba(245,158,11,0); }
}
.diff-row.diff-row-flash .diff-line { animation: diffRowFlash 0.9s ease; }

.mark-tooltip {
  position: fixed;
  z-index: 700;
  background: #13151e;
  border: 1px solid rgba(245,158,11,.35);
  border-radius: 9px;
  padding: 9px 12px;
  min-width: 160px;
  max-width: 240px;
  box-shadow: 0 8px 28px rgba(0,0,0,.55), 0 0 14px rgba(245,158,11,.12);
  pointer-events: none;
  display: none;
  animation: tipFadeIn 0.12s ease;
}
.mark-tooltip.show { display: block; }
@keyframes tipFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mark-tip-title {
  font-size: 12px; font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}
.mark-tip-desc {
  font-size: 11.5px;
  color: var(--text-muted);
}
:root.theme-light .mark-tooltip {
  background: #fff8ec;
  border-color: rgba(217,119,6,.35);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}

.dot-amber { background: var(--primary); box-shadow: 0 0 5px var(--glow-primary); }
.dot-red   { background: var(--accent);  box-shadow: 0 0 5px rgba(239,68,68,.5); }

.input-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  min-height: 0;
}

textarea {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  background: transparent;
  color: #a8b8cc;
  caret-color: #a8b8cc;
  border: none; outline: none; resize: none; padding: 16px 16px 16px 54px;
  box-sizing: border-box;
  font-family: var(--font-mono); font-size: 13.5px; line-height: 22.275px; tab-size: 2;
  z-index: 1;
  white-space: pre-wrap;
  word-break: break-word;
}
textarea::placeholder { color: var(--text-muted); opacity: 0.7; }
textarea.no-wrap,
textarea[wrap="off"] {
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
  overflow-x: auto;
}

textarea::-webkit-scrollbar { width: 7px; height: 7px; }
textarea::-webkit-scrollbar-track { background: transparent; }
textarea::-webkit-scrollbar-thumb {
  background: rgba(120, 135, 165, 0.25);
  border-radius: 4px;
}
textarea::-webkit-scrollbar-thumb:hover  { background: rgba(120, 135, 165, 0.45); }
textarea::-webkit-scrollbar-thumb:active { background: rgba(120, 135, 165, 0.65); }
textarea { scrollbar-width: thin; scrollbar-color: rgba(120,135,165,.25) transparent; }

:root.theme-light textarea {
  color: #2e3d52;
  caret-color: #2e3d52;
}
:root.theme-light textarea::-webkit-scrollbar-thumb { background: rgba(100,116,139,.2); }
:root.theme-light textarea::-webkit-scrollbar-thumb:hover  { background: rgba(100,116,139,.38); }
:root.theme-light textarea { scrollbar-color: rgba(100,116,139,.2) transparent; }

#inputLeft:focus, #inputRight:focus {
  box-shadow: inset 0 0 0 1.5px var(--glow-primary), inset 0 0 20px rgba(245,158,11,.04);
}
:root.theme-light #inputLeft:focus, :root.theme-light #inputRight:focus {
  box-shadow: inset 0 0 0 1.5px var(--glow-primary);
}

.main { flex: 1; display: flex; overflow: hidden; }
.panel { display: flex; flex-direction: column; overflow: hidden; min-width: 120px; }

/* ============ diff 高亮层 ============ */

.diff-hl {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  padding: 16px 16px 16px 54px;
  pointer-events: none;
  background: transparent;
  box-sizing: border-box;
}

.diff-row {
  min-height: 22.275px;
}
.diff-line {
  padding: 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 22.275px;
  white-space: pre-wrap;
  word-break: break-word;
  color: transparent;
  border-left: 0;
}
.diff-hl.no-wrap .diff-line {
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}

.line-numbers {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  width: 42px;
  padding: 0 7px 0 0;
  box-sizing: border-box;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 22.275px;
  text-align: right;
  pointer-events: none;
  user-select: none;
}
.line-number {
  position: absolute;
  left: 0;
  right: 7px;
  height: 22.275px;
}

.diff-line-equal { }
.diff-line-delete { background: rgba(239,68,68,.12); }
.diff-line-insert {
  background: rgba(52,200,138,.12);
}
.diff-line-modify {
  background: rgba(245,158,11,.10);
}
.diff-line-empty {
  background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(255,255,255,.02) 6px, rgba(255,255,255,.02) 12px);
}

.diff-char-del {
  background: rgba(239,68,68,.32);
  border-radius: 2px;
}
.diff-char-ins {
  background: rgba(52,200,138,.32);
  border-radius: 2px;
}
:root.theme-light .diff-char-del { background: rgba(220,38,38,.16); }
:root.theme-light .diff-char-ins { background: rgba(22,163,74,.16); }

.badge { display: inline-block; padding: 1px 7px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge-ok   { background: rgba(52,200,138,.15); color: var(--success); }
.badge-info { background: rgba(245,158,11,.15); color: var(--primary); }
.badge-warn { background: rgba(245,158,11,.15); color: var(--warning); }

.legend {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.legend-swatch-del { background: rgba(239,68,68,.5); }
.legend-swatch-ins { background: rgba(52,200,138,.5); }
.legend-swatch-mod { background: rgba(245,158,11,.5); }