/* Comparison follows the existing review theme, with explicit +/- labels as well as color. */
.compare-heading, .compare-section-heading, .compare-totals, .compare-row, .compare-formula summary {
    display: flex;
    align-items: center;
    gap: 12px;
}
.compare-heading, .compare-section-heading { justify-content: space-between; flex-wrap: wrap; }
.compare-heading h2 { margin: 4px 0 20px; }
.compare-eyebrow { font-size: 11px; letter-spacing: 2px; font-weight: bold; color: #8650af; margin: 0; }
.compare-versions { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; padding: 24px; border: 1px solid #b8a2cb; border-radius: 8px; background: #f8f5fb; }
.compare-versions > div { display: grid; gap: 10px; min-width: 0; }
.compare-versions strong { font-size: 28px; }
.compare-versions span:not(.compare-arrow) { font-size: 11px; letter-spacing: 1px; font-weight: bold; }
.compare-versions small { overflow-wrap: anywhere; }
.compare-arrow { align-self: center; font-size: 30px; color: #8650af; }
.compare-totals { padding: 12px 0 24px; gap: 32px; flex-wrap: wrap; }
.compare-totals > div { display: grid; gap: 4px; min-width: 100px; }
.compare-totals strong { font-size: 30px; }
.compare-totals span, .compare-section-heading > span { font-size: 13px; }
.compare-section { border-top: 1px solid #d9d5df; padding: 12px 0; }
.compare-section h3 { font-size: 17px; margin: 8px 0; }
.compare-list { list-style: none; padding: 0; margin: 4px 0; }
.compare-row, .compare-formula summary { padding: 10px 0; align-items: baseline; overflow-wrap: anywhere; }
.compare-badge { display: inline-block; border-radius: 4px; padding: 3px 7px; font-size: 12px; font-weight: bold; white-space: nowrap; flex-shrink: 0; }
.compare-badge.compare-added { background: #ddf3e5; color: #155d36; }
.compare-badge.compare-removed { background: #fce3e3; color: #912b2b; }
.compare-badge.compare-changed { background: #fff0cd; color: #745100; }
.compare-empty { color: #68616f; font-size: 13px; }
.compare-welcome { padding: 28px; border-left: 3px solid #9F5CD0; background: #f8f5fb; margin-top: 12px; }
.compare-welcome p { line-height: 1.6; }
.compare-expand summary, .compare-formula summary { cursor: pointer; }
.compare-expand summary { color: #78419f; font-weight: bold; padding: 12px 0; }
.compare-formula { border-bottom: 1px solid #e4e0e8; }
.compare-formula summary::before { content: '▸'; }
.compare-formula[open] summary::before { content: '▾'; }
.compare-view-diff { margin-left: auto; color: #78419f; font-size: 12px; white-space: nowrap; }
.compare-diff { overflow: auto; max-height: 520px; border: 1px solid #d9d5df; border-radius: 4px; margin: 4px 0 16px; background: #fafafa; }
.compare-diff-label { padding: 10px; font-size: 12px; font-weight: bold; border-bottom: 1px solid #d9d5df; }
.compare-diff-line { display: flex; min-width: max-content; font-size: 13px; line-height: 1.7; }
.compare-diff-line > span { width: 42px; flex-shrink: 0; text-align: right; padding-right: 10px; color: #666; user-select: none; }
.compare-diff-line code { white-space: pre; font-family: Consolas, 'Courier New', monospace; padding-right: 16px; }
.compare-diff-line.compare-added { background: #ddf3e5; color: #155d36; }
.compare-diff-line.compare-removed { background: #fce3e3; color: #912b2b; }
.dark-mode .compare-versions, .dark-mode .compare-welcome { background: #302b37; border-color: #7e648f; }
.dark-mode .compare-section, .dark-mode .compare-formula, .dark-mode .compare-diff, .dark-mode .compare-diff-label { border-color: #524a5b; }
.dark-mode .compare-diff { background: #242127; }
.dark-mode .compare-empty, .dark-mode .compare-diff-line > span { color: #bfb5ca; }
.dark-mode .compare-eyebrow, .dark-mode .compare-arrow, .dark-mode .compare-view-diff, .dark-mode .compare-expand summary { color: #d0a6ef; }
.dark-mode .compare-added { background: #183e2b; color: #a7e3bd; }
.dark-mode .compare-removed { background: #502727; color: #ffbbbb; }
.dark-mode .compare-changed { background: #493d20; color: #f5da8b; }
.dark-mode .compare-diff-line.compare-added, .dark-mode .compare-badge.compare-added { background: #183e2b; color: #a7e3bd; }
.dark-mode .compare-diff-line.compare-removed, .dark-mode .compare-badge.compare-removed { background: #502727; color: #ffbbbb; }
.dark-mode .compare-badge.compare-changed { background: #493d20; color: #f5da8b; }
@media (max-width: 1000px) {
    .compare-versions { gap: 12px; padding: 16px; }
    .compare-formula summary { flex-wrap: wrap; }
}