/* #38 CSV 修复对照台 · 手写独立主题（深色 IDE / diff 风）
   本文件自带全部组件样式，不依赖任何批次共享 UI 层。 */
.cf2 {
    --f-bg: #eef1f4; --f-paper: #ffffff; --f-paper2: #f6f8fa; --f-paper3: #e9eef2;
    --f-ink: #17232e; --f-ink2: #465868; --f-ink3: #7c8d9c; --f-line: #dce4e9; --f-line2: #c4d0d9;
    --f-code-bg: #101c26; --f-code-ink: #dbe7f1; --f-code-line: #223342; --f-code-no: #617a8d;
    --f-main: #0f6f8c; --f-main2: #0c5a72; --f-main-soft: #e2f2f7;
    --f-red: #c23c50; --f-red-soft: #fdeaed; --f-green: #1c8a62; --f-green-soft: #e3f5ed;
    --f-amber: #b26a12; --f-amber-soft: #fff2df;
    --f-shadow: 0 1px 2px rgba(23,35,46,.05), 0 16px 38px rgba(23,35,46,.09);
    --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    display: block; min-height: 70vh; padding: 0 0 56px; background: var(--f-bg);
    color: var(--f-ink); font-size: 15px; line-height: 1.8;
}
:root[data-theme="dark"] .cf2 {
    --f-bg: #0a1118; --f-paper: #131e27; --f-paper2: #182631; --f-paper3: #1f303c;
    --f-ink: #e7f0f6; --f-ink2: #b2c3ce; --f-ink3: #8298a6; --f-line: #263947; --f-line2: #355062;
    --f-code-bg: #081119; --f-code-ink: #d3e5f2; --f-code-line: #182a36; --f-code-no: #577588;
    --f-main: #67c7e8; --f-main2: #9bdef5; --f-main-soft: rgba(103,199,232,.12);
    --f-red: #ff8b9e; --f-red-soft: rgba(255,139,158,.12); --f-green: #79ddb2; --f-green-soft: rgba(121,221,178,.12);
    --f-amber: #f4bd6a; --f-amber-soft: rgba(244,189,106,.12);
    --f-shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 38px rgba(0,0,0,.3);
    color-scheme: dark;
}
.cf2 * { box-sizing: border-box; }
.cf2 [hidden] { display: none !important; }
.cf2-inner { width: min(1200px, calc(100% - 40px)); margin: 0 auto; }
.cf2 b, .cf2 strong { color: var(--f-ink); }

.cf2-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 26px 0 16px; }
.cf2-eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--f-main); }
.cf2-titlebar h1 { margin: 6px 0 5px; font-size: clamp(26px, 3.2vw, 35px); line-height: 1.25; font-weight: 800; }
.cf2-titlebar p { margin: 0; max-width: 680px; font-size: 13.8px; line-height: 1.85; color: var(--f-ink2); }
.cf2-badge { flex: none; width: 96px; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 2px solid var(--f-red); border-radius: 50%; color: var(--f-red); transform: rotate(-6deg); }
.cf2-badge b { font-family: var(--f-mono); font-size: 27px; line-height: 1.1; color: var(--f-red); }
.cf2-badge span { font-size: 11px; font-weight: 700; }

.cf2-console { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 15px 18px;
    border: 1px solid var(--f-line); border-radius: 10px; background: var(--f-paper); box-shadow: var(--f-shadow); }
.cf2-file { display: flex; align-items: center; gap: 10px; min-width: 240px; padding: 10px 12px;
    border: 1px dashed var(--f-line2); border-radius: 8px; background: var(--f-paper2); cursor: pointer; }
.cf2-file:hover, .cf2-file.is-over { border-color: var(--f-main); background: var(--f-main-soft); }
.cf2-file.has-file { border-style: solid; border-color: var(--f-green); background: var(--f-green-soft); }
.cf2-file-ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: 6px; background: var(--f-code-bg); color: #8fd9f2; font-family: var(--f-mono); font-size: 10.5px; font-weight: 800; }
.cf2-file b { display: block; font-size: 12.8px; }
.cf2-file small { display: block; font-size: 10.8px; color: var(--f-ink3); }
.cf2-params { display: flex; align-items: flex-end; gap: 9px; flex-wrap: wrap; }
.cf2-params label { display: grid; gap: 2px; font-size: 11px; font-weight: 700; color: var(--f-ink2); }
.cf2-params select, .cf2-params input[type=number] { min-width: 92px; padding: 6px 8px; font-size: 12px;
    color: var(--f-ink); background: var(--f-paper); border: 1px solid var(--f-line2); border-radius: 6px; }
.cf2-toggle { display: inline-flex !important; align-items: center; gap: 6px; align-self: center; cursor: pointer; font-size: 11.8px !important; color: var(--f-ink2); }
.cf2-toggle input { accent-color: var(--f-main); }
.cf2-actions { display: flex; gap: 7px; margin-left: auto; flex-wrap: wrap; }
.cf2-btn { appearance: none; padding: 8px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer;
    border: 1px solid var(--f-line2); border-radius: 7px; background: var(--f-paper2); color: var(--f-ink2); }
.cf2-btn:hover:not(:disabled) { border-color: var(--f-main); color: var(--f-main); }
.cf2-btn:disabled { opacity: .45; cursor: not-allowed; }
.cf2-btn--main { background: var(--f-main); color: #fff; border-color: var(--f-main); }
.cf2-btn--main:hover:not(:disabled) { background: var(--f-main2); color: #fff; }
:root[data-theme="dark"] .cf2-btn--main { color: #081119; }
.cf2-mini { appearance: none; padding: 3px 9px; font-size: 11px; font-weight: 700; cursor: pointer;
    border: 1px solid var(--f-line2); border-radius: 6px; background: var(--f-paper); color: var(--f-ink2); }
.cf2-err { flex-basis: 100%; min-height: 14px; margin: 2px 0 0; font-size: 11.8px; color: var(--f-red); }
.cf2-meta { flex-basis: 100%; margin: 0; font-size: 11px; color: var(--f-ink3); }

.cf2-diffhead { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 14px 0 8px;
    font-family: var(--f-mono); font-size: 11.5px; color: var(--f-ink3); }
.cf2-status { margin-bottom: 10px; padding: 9px 12px; border-radius: 8px; background: var(--f-green-soft);
    border-left: 3px solid var(--f-green); font-size: 12.3px; line-height: 1.8; color: var(--f-ink2); }
.cf2-status.is-demo { background: var(--f-amber-soft); border-left-color: var(--f-amber); }
.cf2-empty { padding: 44px 16px; text-align: center; border: 1px dashed var(--f-line2); border-radius: 10px;
    background: var(--f-paper); font-size: 12.8px; color: var(--f-ink3); }

/* 并排代码窗格 */
.cf2-panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cf2-pane { min-width: 0; border: 1px solid var(--f-line2); border-radius: 9px; overflow: hidden; background: var(--f-code-bg); }
.cf2-pane--after { border-color: var(--f-green); }
.cf2-pane-h { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px;
    background: #0a1620; color: #a9c4d4; font-size: 11.8px; border-bottom: 1px solid var(--f-code-line); }
.cf2-pane-h b { color: #e2f1fa; }
.cf2-pane-h span { font-family: var(--f-mono); font-size: 10.5px; opacity: .75; }
.cf2-code { height: 256px; overflow: auto; padding: 8px 0; font-family: var(--f-mono); font-size: 11.6px; line-height: 1.75; }
.cf2-line { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; padding: 1px 10px 1px 0; white-space: pre-wrap; word-break: break-all; }
.cf2-line i { text-align: right; color: var(--f-code-no); font-style: normal; user-select: none; }
.cf2-line span { color: var(--f-code-ink); }
.cf2-line.is-bad { background: rgba(194,60,80,.18); }
.cf2-line.is-bad span { color: #ffb3bf; }
.cf2-line.is-good { background: rgba(28,138,98,.16); }
.cf2-line.is-good span { color: #a6ebcb; }
.cf2-line.is-focus { outline: 1px solid var(--f-amber); }

/* 改动清单 */
.cf2-changes { margin-top: 16px; padding: 18px; border: 1px solid var(--f-line); border-radius: 10px;
    background: var(--f-paper); box-shadow: var(--f-shadow); }
.cf2-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin-bottom: 12px; padding-bottom: 9px; border-bottom: 2px solid var(--f-main-soft); }
.cf2-sec-h b { font-size: 15px; }
.cf2-sec-h > div { display: flex; align-items: center; gap: 10px; }
.cf2-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.cf2-kpis > div { padding: 8px 10px; border: 1px solid var(--f-line); border-radius: 8px; background: var(--f-paper2); }
.cf2-kpis span { display: block; font-size: 10.7px; color: var(--f-ink3); }
.cf2-kpis b { font-family: var(--f-mono); font-size: 17px; color: var(--f-main); }
.cf2-kpis em { display: block; font-style: normal; font-size: 10.5px; color: var(--f-ink3); }
.cf2-changelist { display: grid; gap: 7px; max-height: 350px; overflow: auto; }
.cf2-change { border: 1px solid var(--f-line); border-left: 3px solid var(--f-line2); border-radius: 7px;
    background: var(--f-paper2); overflow: hidden; cursor: pointer; }
.cf2-change.is-join { border-left-color: var(--f-red); background: var(--f-red-soft); }
.cf2-change.is-info { border-left-color: var(--f-green); }
.cf2-change-h { display: flex; align-items: center; gap: 9px; padding: 8px 11px; font-size: 12px; }
.cf2-change-h i { font-style: normal; font-family: var(--f-mono); font-size: 11px; color: var(--f-ink3); }
.cf2-change-h b { font-size: 12.4px; }
.cf2-change.is-join .cf2-change-h b { color: var(--f-red); }
.cf2-change-h em { margin-left: auto; font-style: normal; font-size: 10.8px; color: var(--f-ink3); }
.cf2-change-b { display: none; padding: 9px 11px; border-top: 1px dashed var(--f-line); font-size: 11.7px; line-height: 1.8; }
.cf2-change.open .cf2-change-b { display: block; }
.cf2-ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.cf2-ba div { padding: 6px 8px; border-radius: 6px; background: var(--f-code-bg); font-family: var(--f-mono);
    font-size: 11px; color: var(--f-code-ink); word-break: break-all; }
.cf2-ba .before { color: #ffb3bf; text-decoration: line-through; }
.cf2-ba .after { color: #a6ebcb; }
.cf2-notes { margin: 12px 0 0; padding-left: 18px; font-size: 11.6px; line-height: 1.8; color: var(--f-ink3); }
.cf2-exports { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

@media (max-width: 860px) { .cf2-panes { grid-template-columns: 1fr; } .cf2-actions { margin-left: 0; } }
@media (max-width: 720px) {
    .cf2-inner { width: calc(100% - 24px); }
    .cf2-titlebar { flex-direction: column; align-items: flex-start; }
    .cf2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cf2-ba { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .tool-rec-grid { grid-template-columns: minmax(0, 1fr); }
    .tool-rec-item { min-width: 0; width: 100%; }
}
@media print { .cf2-console, .cf2-btn, .cf2-code { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .cf2 * { transition: none !important; } }