/* ===== 28 · 合同沿革轴：版本链 + 双栏 diff · 石墨靛 ===== */
.ct-page {
    --cg-accent: #40506b;
    --cg-accent-2: #2b384e;
    --cg-accent-soft: #e9edf3;
    --cg-accent-ink: #ffffff;
    background:
        linear-gradient(180deg, rgba(64, 80, 107, .07), transparent 300px),
        var(--cg-bg);
}
:root[data-theme="dark"] .ct-page {
    --cg-accent: #9fb4d8;
    --cg-accent-2: #c0d0ea;
    --cg-accent-soft: rgba(159, 180, 216, .14);
    --cg-accent-ink: #101a2c;
    background: linear-gradient(180deg, rgba(159, 180, 216, .06), transparent 300px), var(--cg-bg);
}

.ct-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 470px); gap: 40px; align-items: start; padding: 24px 0 26px; }
.ct-lead .cg-h1 em { border-left: 4px solid var(--cg-accent); padding-left: 10px; }
.ct-chain-demo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.ct-chain-demo span { font-size: 11.5px; font-weight: 700; color: var(--cg-ink-2); background: var(--cg-surface); border: 1px solid var(--cg-line); border-radius: 999px; padding: 5px 12px; }
.ct-chain-demo span.is-current { color: var(--cg-accent-ink); background: var(--cg-accent); border-color: transparent; }
.ct-chain-demo i { width: 18px; height: 1px; background: var(--cg-line); position: relative; }
.ct-chain-demo i::after { content: "›"; position: absolute; right: -3px; top: -11px; color: var(--cg-faint); }
.ct-lead .cg-value-row { margin-top: 26px; }
.ct-console .cg-console-h { background: var(--cg-accent-2); }
.ct-fields { min-height: 76px; }
.ct-batch { border: 1px solid var(--cg-line); border-radius: 10px; padding: 10px 12px; margin-top: 14px; background: var(--cg-surface-2); }
.ct-batch summary { cursor: pointer; font-size: 12.8px; font-weight: 700; color: var(--cg-ink); list-style: none; }
.ct-batch summary::-webkit-details-marker { display: none; }
.ct-batch summary::before { content: "▸ "; color: var(--cg-accent); }
.ct-batch[open] summary::before { content: "▾ "; }
.ct-batch summary span { font-weight: 500; color: var(--cg-muted); font-size: 11.5px; }
.ct-batch-input { min-height: 100px; margin: 9px 0; font-size: 12px; }
.ct-kpis .cg-kpi-value { color: var(--cg-accent); }
.ct-kpis .cg-kpi--ok .cg-kpi-value { color: var(--cg-ok); }
.ct-kpis .cg-kpi--warn .cg-kpi-value { color: var(--cg-warn); }

.ct-top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr); gap: 16px; margin-top: 26px; align-items: start; }
.ct-axis { display: grid; gap: 0; max-height: 420px; overflow: auto; padding: 4px 2px; }
.ct-node {
    position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 12px;
    padding: 10px 12px 10px 30px; border-left: 2px solid var(--cg-line); margin-left: 10px;
}
.ct-node::before { content: ""; position: absolute; left: -7px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--cg-surface); border: 2px solid var(--cg-accent); }
.ct-node.is-current { background: var(--cg-accent-soft); border-radius: 0 10px 10px 0; }
.ct-node.is-current::before { background: var(--cg-accent); }
.ct-node:last-child { border-left-color: transparent; }
.ct-node-date { font-family: var(--cg-num); font-size: 12.5px; color: var(--cg-accent); font-weight: 700; }
.ct-node-date small { display: block; font-family: var(--cg-font); font-size: 10.5px; color: var(--cg-faint); font-weight: 500; }
.ct-node-main b { font-size: 13px; }
.ct-node-main .cg-small { display: block; margin-top: 3px; }
.ct-node-bar { height: 5px; border-radius: 999px; background: var(--cg-surface-3); margin-top: 7px; position: relative; overflow: hidden; }
.ct-node-bar i { display: block; height: 100%; background: var(--cg-accent); opacity: .65; }
.ct-gaps { display: grid; gap: 8px; max-height: 300px; overflow: auto; }
.ct-gap { border-left: 3px solid var(--cg-warn); border-radius: 8px; padding: 9px 11px; background: var(--cg-surface-2); font-size: 12.2px; line-height: 1.75; }
.ct-gap b { color: var(--cg-ink); }

.ct-diff-card { margin-top: 18px; }
.ct-diffs { display: grid; gap: 12px; max-height: 520px; overflow: auto; }
.ct-diff {
    border: 1px solid var(--cg-line); border-radius: 11px; overflow: hidden;
}
.ct-diff-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 10px 14px; background: var(--cg-surface-2); border-bottom: 1px solid var(--cg-line); font-size: 12.5px; }
.ct-diff-h b { color: var(--cg-ink); }
.ct-diff-h span.cg-small { margin-left: auto; }
.ct-diff-body { display: grid; gap: 6px; padding: 11px 14px; }
.ct-diff-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 20px minmax(0, 1fr); gap: 9px; align-items: center; font-size: 12.2px; }
.ct-diff-key { font-weight: 700; color: var(--cg-ink); }
.ct-diff-old, .ct-diff-new { padding: 5px 9px; border-radius: 7px; word-break: break-word; line-height: 1.6; }
.ct-diff-old { background: var(--cg-bad-soft); color: var(--cg-bad); }
.ct-diff-new { background: var(--cg-ok-soft); color: var(--cg-ok); }
.ct-diff-arrow { text-align: center; color: var(--cg-faint); }
.ct-diff-row.is-add .ct-diff-old { background: var(--cg-surface-2); color: var(--cg-faint); }
.ct-diff-row.is-del .ct-diff-new { background: var(--cg-surface-2); color: var(--cg-faint); }
.ct-diff-empty { font-size: 12.2px; color: var(--cg-muted); padding: 4px 0; }

@media print {
    .ct-console, .ct-chain-demo { display: none !important; }
    .ct-top { display: block; }
    .ct-top > .cg-card + .cg-card { margin-top: 14px; }
    .ct-axis, .ct-diffs, .ct-gaps { max-height: none; overflow: visible; }
}
@media (max-width: 1080px) { .ct-hero, .ct-top { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
    .ct-hero { gap: 22px; padding-top: 14px; }
    .ct-chain-demo { display: none; }
    .ct-diff-row { grid-template-columns: 66px 1fr; }
    .ct-diff-arrow { display: none; }
    .ct-diff-new { grid-column: 2; }
}