.version-compare-box {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto;
  gap: 10px;
  align-items: end;
  margin: 12px 0 16px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #f8fafc;
}
.version-compare-box label { display: grid; gap: 5px; margin: 0; font-size: 10px; }
.version-compare-arrow { align-self: center; color: var(--muted); font-weight: 700; }
.version-compare-button { min-height: 38px; padding: 7px 12px; font-size: 10px; white-space: nowrap; }
.compare-modal { z-index: 30; }
.compare-modal > div { width: min(1400px,96vw); max-height: 94vh; }
.compare-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.compare-summary span { padding: 5px 9px; border-radius: 999px; background: #f2f4f7; color: #475467; font-size: 10px; }
.compare-summary .added { background: #abefc6; color: #05603a; border: 1px solid #75e0a7; }
.compare-summary .removed { background: #fecdca; color: #912018; border: 1px solid #fda29b; }
.compare-summary .changed { background: #fedf89; color: #7a2e0e; border: 1px solid #fec84b; }
.compare-only-differences { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 0 auto; padding: 6px 9px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; color: #344054; font-size: 10px; font-weight: 600; cursor: pointer; }
.compare-only-differences input { width: auto; margin: 0; accent-color: var(--blue); }
.compare-legend { display: flex; flex-wrap: wrap; gap: 7px; margin: -4px 0 12px; color: #667085; font-size: 10px; }
.compare-legend b { display: inline-grid; place-items: center; width: 21px; height: 21px; margin-right: 4px; border-radius: 5px; color: #101828; }
.compare-legend .legend-added b { background: #75e0a7; }
.compare-legend .legend-removed b { background: #fda29b; }
.compare-legend .legend-changed b { background: #fec84b; }
.compare-content { overflow: auto; border: 1px solid #dfe4eb; border-radius: 10px; background: #fff; }
.compare-table { width: 100%; min-width: 900px; border-collapse: collapse; table-layout: fixed; }
.compare-table th { position: sticky; top: 0; z-index: 1; padding: 9px 10px; background: #101828; color: #fff; text-align: left; font-size: 10px; }
.compare-table col.line-column { width: 42px; }
.compare-table col.code-column { width: calc(50% - 42px); }
.compare-table .line-number { width: 42px; padding: 3px 5px 3px 2px; border-right: 1px solid #e4e7ec; background: #f8fafc; color: #98a2b3; text-align: right; white-space: nowrap; font: 9px/1.45 Consolas,monospace; user-select: none; }
.compare-table .code-line { padding: 3px 8px; border-right: 1px solid #e4e7ec; white-space: pre; overflow: hidden; color: #344054; font: 11px/1.45 Consolas,monospace; }
.compare-table tr.equal .code-line { background: #fff; }
.compare-table tr.added td:nth-child(3),.compare-table tr.added td:nth-child(4) { background: #d1fadf; color: #054f31; }
.compare-table tr.removed td:nth-child(1),.compare-table tr.removed td:nth-child(2) { background: #fee4e2; color: #7a271a; }
.compare-table tr.changed td:nth-child(1),.compare-table tr.changed td:nth-child(2) { background: #ffead5; color: #7a2e0e; }
.compare-table tr.changed td:nth-child(3),.compare-table tr.changed td:nth-child(4) { background: #fef0c7; color: #713b12; }
.compare-table tr.added td:nth-child(3) { border-left: 5px solid #17b26a; }
.compare-table tr.removed td:first-child { border-left: 5px solid #f04438; }
.compare-table tr.changed td:first-child { border-left: 5px solid #f79009; }
.compare-table tr.added td:nth-child(3)::before { content: '+'; color: #067647; font-weight: 800; }
.compare-table tr.removed td:first-child::before { content: '−'; color: #b42318; font-weight: 800; }
.compare-table tr.changed td:first-child::before { content: '↔'; color: #b54708; font-weight: 800; }
.compare-table.show-changes-only tr.equal { display: none; }
.compare-no-differences { padding: 22px; border: 1px solid #abefc6; border-radius: 9px; background: #ecfdf3; color: #067647; text-align: center; font-size: 12px; font-weight: 600; }
.compare-empty { padding: 28px; color: var(--muted); text-align: center; }
@media(max-width:760px){.version-compare-box{grid-template-columns:1fr}.version-compare-arrow{display:none}.version-compare-button{width:100%}}