@yuwenovo/ocr-result-view 2.1.0 → 2.2.0

package/README.md

@@ -4,6 +4,8 @@ Vue 3 OCR 文档比对结果查看器。传入两份文档的页面图片和差
 
 组件负责展示与交互；OCR 识别、文档比对、接口请求和审阅保存由接入项目负责。默认只读，无需 Vue Router、Pinia、Axios 或 Tailwind。
 
+预览区提供默认关闭的“同步滚动”开关。开启时以最近滚动的一侧为基准（初始为标准文档），按可滚动距离的百分比同步另一侧；滚动任意一侧或使用分页按钮均可联动。两份文档页数不同时仍按整体进度同步，不表示内容逐段对应。点击差异仍分别定位两侧的实际标注，关闭开关后恢复独立滚动。
+
 ## 1. 安装
 
 在 Vue 3.5+ 项目中安装：
@@ -293,6 +295,7 @@ const viewer = ref<OcrResultViewExpose>()
 **如何修改主题？**
 
 默认深色。可在组件或祖先元素上覆盖 CSS 变量，例如 `--viewer-bg`、`--viewer-panel`、`--viewer-border`、`--viewer-card-text`。例如：
+
 ```vue
 <template>
   <div class="viewer-container">

package/dist/ocr-result-view.css

@@ -1,2 +1,2 @@
-[data-v-61738111],[data-v-61738111]:before,[data-v-61738111]:after{box-sizing:border-box}button[data-v-61738111]{font:inherit;color:inherit;background:0 0;border:0;padding:0}h2[data-v-61738111],h3[data-v-61738111],p[data-v-61738111]{margin:0}svg[data-v-61738111]{vertical-align:middle;display:inline-block}.diff-cards[data-v-61738111]{flex-direction:column;gap:10px;display:flex}.diff-card[data-v-61738111]{--change-color:var(--diff-modify-dot,#f80);border:1px solid var(--viewer-border,#ffffff17);background:var(--diff-card-bg,#ffffff09);border-radius:12px;flex-shrink:0;min-width:0;padding:10px 12px;transition:border-color .15s,box-shadow .15s}.diff-card--insert[data-v-61738111]{--change-color:var(--diff-insert-dot,#00a870)}.diff-card--delete[data-v-61738111]{--change-color:var(--diff-delete-dot,#e34d59)}.diff-card[data-v-61738111]:hover{border-color:color-mix(in srgb, var(--viewer-card-text,#cbd5e1) 30%, transparent)}.diff-card.is-active[data-v-61738111]{border-color:var(--diff-active-border,#38bdf899);box-shadow:0 0 0 2px color-mix(in srgb, var(--diff-active-border,#38bdf899) 10%, transparent)}.diff-card.is-ignored[data-v-61738111]{--change-color:var(--ui-text-subtle,#64748b)}.card-heading[data-v-61738111]{align-items:center;gap:6px;display:flex}.card-select[data-v-61738111]{text-align:left;cursor:pointer;flex:1;align-items:center;gap:8px;min-width:0;display:flex}.type-icon[data-v-61738111]{width:24px;height:24px;color:var(--change-color);background:color-mix(in srgb, var(--change-color) 10%, transparent);border-radius:7px;flex-shrink:0;place-items:center;display:grid}.type-icon svg[data-v-61738111],.card-action svg[data-v-61738111]{width:14px;height:14px}.card-type[data-v-61738111]{color:var(--viewer-card-title,#e2e8f0);font-size:12px;font-weight:600}.card-number[data-v-61738111]{color:var(--ui-text-subtle,#64748b);font-variant-numeric:tabular-nums;font-size:10px}.card-action[data-v-61738111]{width:28px;height:28px;color:var(--ui-text-subtle,#64748b);cursor:pointer;border-radius:7px;flex-shrink:0;place-items:center;display:grid}.card-action[data-v-61738111]:hover{color:var(--viewer-card-title,#e2e8f0);background:var(--viewer-card,#ffffff09)}.card-action[data-v-61738111]:disabled{opacity:.35;cursor:wait}.card-action[data-v-61738111]:focus-visible,.card-select[data-v-61738111]:focus-visible{outline:2px solid var(--diff-active-border,#38bdf899);outline-offset:3px;border-radius:6px}.ignored-label[data-v-61738111]{color:var(--ui-text-subtle,#64748b);white-space:nowrap;font-size:10px}.card-content[data-v-61738111]{cursor:pointer}.text-row[data-v-61738111]{background:var(--viewer-card,#ffffff09);border-radius:7px;align-items:flex-start;gap:10px;margin-top:8px;padding:8px 10px;display:flex}.text-row--single[data-v-61738111]{background:color-mix(in srgb, var(--change-color) 6%, transparent)}.text-label[data-v-61738111]{color:var(--ui-text-subtle,#64748b);flex-shrink:0;padding-top:1px;font-size:10px;line-height:20px}.card-text[data-v-61738111]{min-width:0;color:var(--viewer-card-text,#cbd5e1);overflow-wrap:anywhere;white-space:pre-wrap;font-size:13px;line-height:1.65}.change-mark[data-v-61738111]{background:color-mix(in srgb, var(--change-color) 16%, transparent);border-radius:2px;font-weight:600}.card-location[data-v-61738111]{color:var(--ui-text-subtle,#64748b);margin:8px 0 0;font-size:10px;line-height:14px}[data-v-0a63a0d3],[data-v-0a63a0d3]:before,[data-v-0a63a0d3]:after{box-sizing:border-box}button[data-v-0a63a0d3]{font:inherit;color:inherit;background:0 0;border:0;padding:0}h2[data-v-0a63a0d3],h3[data-v-0a63a0d3],p[data-v-0a63a0d3]{margin:0}svg[data-v-0a63a0d3]{vertical-align:middle;display:inline-block}.ocr-result-view[data-v-0a63a0d3]{flex-direction:column;height:100%;min-height:0;display:flex}.page-btn svg[data-v-0a63a0d3]{width:14px;height:14px}.ocr-diff-viewer[data-v-0a63a0d3]{min-height:0;color:var(--viewer-card-text,#cbd5e1);background:var(--viewer-bg,#0b1220);flex:1;font-family:Segoe UI,Microsoft YaHei,system-ui,sans-serif;display:flex}.viewer-main[data-v-0a63a0d3]{flex-direction:column;flex:1;min-width:0;display:flex}.compare-row[data-v-0a63a0d3]{background:var(--viewer-workspace,#080f1c);box-sizing:border-box;flex:1;gap:12px;min-height:0;padding:12px;display:flex;position:relative}.canvas-col[data-v-0a63a0d3]{border:1px solid var(--viewer-border,#ffffff17);background:var(--viewer-panel,#111827);border-radius:10px;flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.canvas-info-bar[data-v-0a63a0d3]{height:45px;color:var(--viewer-card-title,#e2e8f0);background:var(--viewer-toolbar,#111a2b);border-bottom:1px solid var(--viewer-border,#ffffff17);white-space:nowrap;text-overflow:ellipsis;flex-shrink:0;align-items:center;padding:6px 10px;font-size:12px;font-weight:600;display:flex;overflow:hidden}.canvas-info-bar-left[data-v-0a63a0d3]{flex:1;align-items:center;gap:6px;min-width:0;display:flex}.canvas-info-bar-right[data-v-0a63a0d3]{flex-shrink:0;align-items:center;gap:4px;margin-left:8px;display:flex}.page-num[data-v-0a63a0d3]{color:var(--ui-text-muted,#94a3b8);text-align:center;-webkit-user-select:none;user-select:none;min-width:50px;font-size:12px}.page-btn[data-v-0a63a0d3]{border:1px solid var(--viewer-border,#ffffff17);background:var(--viewer-card,#ffffff09);width:24px;height:24px;color:var(--ui-text-muted,#94a3b8);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;padding:0;font-size:10px;line-height:1;transition:background .15s,border-color .15s;display:flex}.page-btn[data-v-0a63a0d3]:hover:not(:disabled){color:#bfdbfe;background:#3b82f61f;border-color:#60a5fa52}.page-btn[data-v-0a63a0d3]:disabled{opacity:.35;cursor:default}.canvas-info-bar-left-tag[data-v-0a63a0d3]{color:#fff;background-color:#10b9812e;border:1px solid #34d39940;border-radius:6px;padding:2px 7px;font-size:12px;line-height:20px}.canvas-info-bar-left-tag.gray[data-v-0a63a0d3]{color:var(--viewer-card-text,#cbd5e1);background-color:#94a3b824;border-color:#94a3b833}.canvas-info-bar-left-filename[data-v-0a63a0d3]{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.canvas-scroll[data-v-0a63a0d3]{background:var(--viewer-scroll,#1a2230);flex:1;min-height:0;position:relative;overflow-y:scroll}.canvas-scroll--flip[data-v-0a63a0d3]{direction:rtl}.virtual-spacer[data-v-0a63a0d3]{direction:ltr;width:100%;position:relative}.viewport-canvas-stack[data-v-0a63a0d3]{direction:ltr;width:100%;position:sticky;top:0}.compare-canvas[data-v-0a63a0d3],.annotation-canvas[data-v-0a63a0d3]{width:100%;display:block;position:absolute;inset:0}.compare-canvas[data-v-0a63a0d3]{pointer-events:none}.annotation-canvas[data-v-0a63a0d3]{z-index:1}.line-svg[data-v-0a63a0d3]{pointer-events:none;position:absolute;top:0;left:0}.side-panel[data-v-0a63a0d3]{border-left:1px solid var(--viewer-border,#ffffff17);background:var(--viewer-side,#0d1626);flex-direction:column;flex-shrink:0;width:clamp(300px,23vw,360px);min-height:0;display:flex;overflow:hidden}.review-header[data-v-0a63a0d3]{flex-shrink:0;padding:18px 16px 12px}.review-title-row[data-v-0a63a0d3]{justify-content:space-between;align-items:center;gap:12px;display:flex}.review-title-row h2[data-v-0a63a0d3]{color:var(--viewer-card-title,#e2e8f0);align-items:center;gap:8px;font-size:14px;font-weight:650;display:flex}.review-title-row svg[data-v-0a63a0d3]{width:16px;height:16px;color:var(--ui-text-subtle,#64748b)}.review-total[data-v-0a63a0d3]{color:var(--ui-text-subtle,#64748b);font-variant-numeric:tabular-nums;font-size:11px}.review-segments[data-v-0a63a0d3]{background:var(--viewer-card,#ffffff09);border-radius:9px;gap:3px;margin-top:16px;padding:3px;display:flex}.review-segments button[data-v-0a63a0d3]{min-width:0;color:var(--ui-text-subtle,#64748b);white-space:nowrap;cursor:pointer;border-radius:7px;flex:1;justify-content:center;align-items:center;gap:6px;padding:7px 4px;font-size:12px;transition:background .15s,color .15s;display:flex}.review-segments button[aria-pressed=true][data-v-0a63a0d3]{background:var(--viewer-side,#0d1626);color:var(--viewer-card-title,#e2e8f0);font-weight:600;box-shadow:0 1px 4px #00000014}.review-segments span[data-v-0a63a0d3]{font-variant-numeric:tabular-nums;opacity:.65;font-size:10px}.review-types[data-v-0a63a0d3]{border-bottom:1px solid var(--viewer-border,#ffffff17);flex-shrink:0;align-items:center;gap:4px;padding:0 12px 12px;display:flex}.review-type[data-v-0a63a0d3]{color:var(--ui-text-subtle,#64748b);white-space:nowrap;cursor:pointer;border-radius:6px;flex:1;justify-content:center;align-items:center;gap:4px;padding:5px 3px;font-size:11px;display:flex}.review-type span[data-v-0a63a0d3]{opacity:.65;font-variant-numeric:tabular-nums;font-size:10px}.review-type[data-v-0a63a0d3]:hover,.review-type[aria-pressed=true][data-v-0a63a0d3]{color:var(--viewer-card-title,#e2e8f0);background:var(--viewer-card,#ffffff09)}.review-type[aria-pressed=true][data-v-0a63a0d3]{font-weight:600}.side-panel[data-v-0a63a0d3] .diff-cards{overscroll-behavior:contain;scrollbar-gutter:stable;background:color-mix(in srgb, var(--viewer-card,#ffffff09) 38%, var(--viewer-side,#0d1626));flex:1;min-height:0;padding:14px 12px 16px;overflow-y:auto}.review-footer[data-v-0a63a0d3]{border-top:1px solid var(--viewer-border,#ffffff17);background:var(--viewer-side,#0d1626);flex-shrink:0;align-items:center;gap:8px;padding:12px;display:flex}.review-footer button[data-v-0a63a0d3]{cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:7px;min-width:0;padding:9px 10px;font-size:12px;transition:background .15s;display:flex}.review-footer svg[data-v-0a63a0d3]{flex-shrink:0;width:14px;height:14px}.batch-ignore[data-v-0a63a0d3]{color:var(--viewer-card-title,#e2e8f0);background:var(--viewer-card,#ffffff09);flex:1}.batch-ignore span[data-v-0a63a0d3]{color:var(--ui-text-subtle,#64748b);font-variant-numeric:tabular-nums;font-size:10px}.batch-restore[data-v-0a63a0d3]{color:var(--ui-text-subtle,#64748b)}.review-footer button[data-v-0a63a0d3]:hover:not(:disabled){background:var(--diff-card-hover,#3b82f611);color:var(--viewer-card-title,#e2e8f0)}.review-footer button[data-v-0a63a0d3]:disabled{opacity:.35;cursor:default}.side-panel button[data-v-0a63a0d3]:focus-visible{outline:2px solid var(--diff-active-border,#38bdf899);outline-offset:2px}.review-empty[data-v-0a63a0d3]{text-align:center;min-height:0;color:var(--ui-text-subtle,#64748b);flex:1;padding:42px 20px;overflow-y:auto}.empty-symbol[data-v-0a63a0d3]{background:var(--viewer-card,#ffffff09);border-radius:14px;place-items:center;width:44px;height:44px;margin:0 auto 14px;display:grid}.empty-symbol svg[data-v-0a63a0d3]{width:22px;height:22px}.empty-symbol.is-passed[data-v-0a63a0d3]{color:var(--diff-insert-dot,#00a870);background:var(--diff-insert-bg,#34d3991a)}.review-empty h3[data-v-0a63a0d3]{color:var(--viewer-card-title,#e2e8f0);font-size:14px;font-weight:600}.review-empty p[data-v-0a63a0d3]{margin-top:8px;font-size:12px;line-height:1.6}.review-empty button[data-v-0a63a0d3]{color:var(--viewer-card-text,#cbd5e1);cursor:pointer;text-underline-offset:4px;margin-top:20px;font-size:12px;text-decoration:underline}.page-loading[data-v-0a63a0d3]{height:200px;color:var(--ui-text-muted,#94a3b8);justify-content:center;align-items:center;font-size:13px;display:flex}
+[data-v-7344a999],[data-v-7344a999]:before,[data-v-7344a999]:after{box-sizing:border-box}button[data-v-7344a999]{font:inherit;color:inherit;background:0 0;border:0;padding:0}h2[data-v-7344a999],h3[data-v-7344a999],p[data-v-7344a999]{margin:0}svg[data-v-7344a999]{vertical-align:middle;display:inline-block}.diff-cards[data-v-7344a999]{flex-direction:column;gap:10px;display:flex}.diff-card[data-v-7344a999]{--change-color:var(--diff-modify-dot,#f80);border:1px solid var(--viewer-border,#ffffff17);background:var(--diff-card-bg,#ffffff09);border-radius:12px;flex-shrink:0;min-width:0;padding:10px 12px;transition:border-color .15s,box-shadow .15s}.diff-card--insert[data-v-7344a999]{--change-color:var(--diff-insert-dot,#00a870)}.diff-card--delete[data-v-7344a999]{--change-color:var(--diff-delete-dot,#e34d59)}.diff-card[data-v-7344a999]:hover{border-color:color-mix(in srgb, var(--viewer-card-text,#cbd5e1) 30%, transparent)}.diff-card.is-active[data-v-7344a999]{border-color:var(--diff-active-border,#38bdf899);box-shadow:0 0 0 2px color-mix(in srgb, var(--diff-active-border,#38bdf899) 10%, transparent)}.diff-card.is-ignored[data-v-7344a999]{--change-color:var(--ui-text-subtle,#64748b)}.card-heading[data-v-7344a999]{align-items:center;gap:6px;display:flex}.card-select[data-v-7344a999]{text-align:left;cursor:pointer;flex:1;align-items:center;gap:8px;min-width:0;display:flex}.type-icon[data-v-7344a999]{width:24px;height:24px;color:var(--change-color);background:color-mix(in srgb, var(--change-color) 10%, transparent);border-radius:7px;flex-shrink:0;place-items:center;display:grid}.type-icon svg[data-v-7344a999],.card-action svg[data-v-7344a999]{width:14px;height:14px}.card-type[data-v-7344a999]{color:var(--viewer-card-title,#e2e8f0);font-size:12px;font-weight:600}.card-number[data-v-7344a999]{color:var(--ui-text-subtle,#64748b);font-variant-numeric:tabular-nums;font-size:10px}.card-action[data-v-7344a999]{width:28px;height:28px;color:var(--ui-text-subtle,#64748b);cursor:pointer;border-radius:7px;flex-shrink:0;place-items:center;display:grid}.card-action[data-v-7344a999]:hover{color:var(--viewer-card-title,#e2e8f0);background:var(--viewer-card,#ffffff09)}.card-action[data-v-7344a999]:disabled{opacity:.35;cursor:wait}.card-action[data-v-7344a999]:focus-visible,.card-select[data-v-7344a999]:focus-visible{outline:2px solid var(--diff-active-border,#38bdf899);outline-offset:3px;border-radius:6px}.ignored-label[data-v-7344a999]{color:var(--ui-text-subtle,#64748b);white-space:nowrap;font-size:10px}.card-content[data-v-7344a999]{cursor:pointer}.text-row[data-v-7344a999]{background:var(--viewer-card,#ffffff09);border-radius:7px;align-items:flex-start;gap:10px;margin-top:8px;padding:8px 10px;display:flex}.text-row--single[data-v-7344a999]{background:color-mix(in srgb, var(--change-color) 6%, transparent)}.text-label[data-v-7344a999]{color:var(--ui-text-subtle,#64748b);flex-shrink:0;padding-top:1px;font-size:10px;line-height:20px}.card-text[data-v-7344a999]{min-width:0;color:var(--viewer-card-text,#cbd5e1);overflow-wrap:anywhere;white-space:pre-wrap;font-size:13px;line-height:1.65}.change-mark[data-v-7344a999]{background:color-mix(in srgb, var(--change-color) 16%, transparent);border-radius:2px;font-weight:600}.card-location[data-v-7344a999]{color:var(--ui-text-subtle,#64748b);margin:8px 0 0;font-size:10px;line-height:14px}[data-v-9aa39b2f],[data-v-9aa39b2f]:before,[data-v-9aa39b2f]:after{box-sizing:border-box}button[data-v-9aa39b2f]{font:inherit;color:inherit;background:0 0;border:0;padding:0}h2[data-v-9aa39b2f],h3[data-v-9aa39b2f],p[data-v-9aa39b2f]{margin:0}svg[data-v-9aa39b2f]{vertical-align:middle;display:inline-block}.ocr-result-view[data-v-9aa39b2f]{flex-direction:column;height:100%;min-height:0;display:flex}.page-btn svg[data-v-9aa39b2f]{width:14px;height:14px}.ocr-diff-viewer[data-v-9aa39b2f]{min-height:0;color:var(--viewer-card-text,#cbd5e1);background:var(--viewer-bg,#0b1220);flex:1;font-family:Segoe UI,Microsoft YaHei,system-ui,sans-serif;display:flex}.viewer-main[data-v-9aa39b2f]{flex-direction:column;flex:1;min-width:0;display:flex}.preview-toolbar[data-v-9aa39b2f]{background:var(--viewer-workspace,#080f1c);flex-shrink:0;justify-content:flex-end;padding:8px 12px 0;display:flex}.sync-scroll-toggle[data-v-9aa39b2f]{cursor:pointer;align-items:center;gap:8px;min-height:28px;font-size:12px;display:inline-flex}.sync-scroll-toggle[data-v-9aa39b2f]:focus-visible{outline:2px solid var(--viewer-accent,#60a5fa);outline-offset:4px;border-radius:4px}.sync-scroll-track[data-v-9aa39b2f]{background:var(--ui-text-muted,#64748b);border-radius:9px;align-items:center;width:30px;height:18px;padding:2px;display:inline-flex}.sync-scroll-track>span[data-v-9aa39b2f]{background:#fff;border-radius:50%;width:14px;height:14px}.sync-scroll-toggle[aria-checked=true] .sync-scroll-track[data-v-9aa39b2f]{background:var(--viewer-accent,#3b82f6)}.sync-scroll-toggle[aria-checked=true] .sync-scroll-track>span[data-v-9aa39b2f]{transform:translate(12px)}.compare-row[data-v-9aa39b2f]{background:var(--viewer-workspace,#080f1c);box-sizing:border-box;flex:1;gap:12px;min-height:0;padding:12px;display:flex;position:relative}.canvas-col[data-v-9aa39b2f]{border:1px solid var(--viewer-border,#ffffff17);background:var(--viewer-panel,#111827);border-radius:10px;flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.canvas-info-bar[data-v-9aa39b2f]{height:45px;color:var(--viewer-card-title,#e2e8f0);background:var(--viewer-toolbar,#111a2b);border-bottom:1px solid var(--viewer-border,#ffffff17);white-space:nowrap;text-overflow:ellipsis;flex-shrink:0;align-items:center;padding:6px 10px;font-size:12px;font-weight:600;display:flex;overflow:hidden}.canvas-info-bar-left[data-v-9aa39b2f]{flex:1;align-items:center;gap:6px;min-width:0;display:flex}.canvas-info-bar-right[data-v-9aa39b2f]{flex-shrink:0;align-items:center;gap:4px;margin-left:8px;display:flex}.page-num[data-v-9aa39b2f]{color:var(--ui-text-muted,#94a3b8);text-align:center;-webkit-user-select:none;user-select:none;min-width:50px;font-size:12px}.page-btn[data-v-9aa39b2f]{border:1px solid var(--viewer-border,#ffffff17);background:var(--viewer-card,#ffffff09);width:24px;height:24px;color:var(--ui-text-muted,#94a3b8);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;padding:0;font-size:10px;line-height:1;transition:background .15s,border-color .15s;display:flex}.page-btn[data-v-9aa39b2f]:hover:not(:disabled){color:#bfdbfe;background:#3b82f61f;border-color:#60a5fa52}.page-btn[data-v-9aa39b2f]:disabled{opacity:.35;cursor:default}.canvas-info-bar-left-tag[data-v-9aa39b2f]{color:#fff;background-color:#10b9812e;border:1px solid #34d39940;border-radius:6px;padding:2px 7px;font-size:12px;line-height:20px}.canvas-info-bar-left-tag.gray[data-v-9aa39b2f]{color:var(--viewer-card-text,#cbd5e1);background-color:#94a3b824;border-color:#94a3b833}.canvas-info-bar-left-filename[data-v-9aa39b2f]{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.canvas-scroll[data-v-9aa39b2f]{background:var(--viewer-scroll,#1a2230);flex:1;min-height:0;position:relative;overflow-y:scroll}.canvas-scroll--flip[data-v-9aa39b2f]{direction:rtl}.virtual-spacer[data-v-9aa39b2f]{direction:ltr;width:100%;position:relative}.viewport-canvas-stack[data-v-9aa39b2f]{direction:ltr;width:100%;position:sticky;top:0}.compare-canvas[data-v-9aa39b2f],.annotation-canvas[data-v-9aa39b2f]{width:100%;display:block;position:absolute;inset:0}.compare-canvas[data-v-9aa39b2f]{pointer-events:none}.annotation-canvas[data-v-9aa39b2f]{z-index:1}.line-svg[data-v-9aa39b2f]{pointer-events:none;position:absolute;top:0;left:0}.side-panel[data-v-9aa39b2f]{border-left:1px solid var(--viewer-border,#ffffff17);background:var(--viewer-side,#0d1626);flex-direction:column;flex-shrink:0;width:clamp(300px,23vw,360px);min-height:0;display:flex;overflow:hidden}.review-header[data-v-9aa39b2f]{flex-shrink:0;padding:18px 16px 12px}.review-title-row[data-v-9aa39b2f]{justify-content:space-between;align-items:center;gap:12px;display:flex}.review-title-row h2[data-v-9aa39b2f]{color:var(--viewer-card-title,#e2e8f0);align-items:center;gap:8px;font-size:14px;font-weight:650;display:flex}.review-title-row svg[data-v-9aa39b2f]{width:16px;height:16px;color:var(--ui-text-subtle,#64748b)}.review-total[data-v-9aa39b2f]{color:var(--ui-text-subtle,#64748b);font-variant-numeric:tabular-nums;font-size:11px}.review-segments[data-v-9aa39b2f]{background:var(--viewer-card,#ffffff09);border-radius:9px;gap:3px;margin-top:16px;padding:3px;display:flex}.review-segments button[data-v-9aa39b2f]{min-width:0;color:var(--ui-text-subtle,#64748b);white-space:nowrap;cursor:pointer;border-radius:7px;flex:1;justify-content:center;align-items:center;gap:6px;padding:7px 4px;font-size:12px;transition:background .15s,color .15s;display:flex}.review-segments button[aria-pressed=true][data-v-9aa39b2f]{background:var(--viewer-side,#0d1626);color:var(--viewer-card-title,#e2e8f0);font-weight:600;box-shadow:0 1px 4px #00000014}.review-segments span[data-v-9aa39b2f]{font-variant-numeric:tabular-nums;opacity:.65;font-size:10px}.review-types[data-v-9aa39b2f]{border-bottom:1px solid var(--viewer-border,#ffffff17);flex-shrink:0;align-items:center;gap:4px;padding:0 12px 12px;display:flex}.review-type[data-v-9aa39b2f]{color:var(--ui-text-subtle,#64748b);white-space:nowrap;cursor:pointer;border-radius:6px;flex:1;justify-content:center;align-items:center;gap:4px;padding:5px 3px;font-size:11px;display:flex}.review-type span[data-v-9aa39b2f]{opacity:.65;font-variant-numeric:tabular-nums;font-size:10px}.review-type[data-v-9aa39b2f]:hover,.review-type[aria-pressed=true][data-v-9aa39b2f]{color:var(--viewer-card-title,#e2e8f0);background:var(--viewer-card,#ffffff09)}.review-type[aria-pressed=true][data-v-9aa39b2f]{font-weight:600}.side-panel[data-v-9aa39b2f] .diff-cards{overscroll-behavior:contain;scrollbar-gutter:stable;background:color-mix(in srgb, var(--viewer-card,#ffffff09) 38%, var(--viewer-side,#0d1626));flex:1;min-height:0;padding:14px 12px 16px;overflow-y:auto}.review-footer[data-v-9aa39b2f]{border-top:1px solid var(--viewer-border,#ffffff17);background:var(--viewer-side,#0d1626);flex-shrink:0;align-items:center;gap:8px;padding:12px;display:flex}.review-footer button[data-v-9aa39b2f]{cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:7px;min-width:0;padding:9px 10px;font-size:12px;transition:background .15s;display:flex}.review-footer svg[data-v-9aa39b2f]{flex-shrink:0;width:14px;height:14px}.batch-ignore[data-v-9aa39b2f]{color:var(--viewer-card-title,#e2e8f0);background:var(--viewer-card,#ffffff09);flex:1}.batch-ignore span[data-v-9aa39b2f]{color:var(--ui-text-subtle,#64748b);font-variant-numeric:tabular-nums;font-size:10px}.batch-restore[data-v-9aa39b2f]{color:var(--ui-text-subtle,#64748b)}.review-footer button[data-v-9aa39b2f]:hover:not(:disabled){background:var(--diff-card-hover,#3b82f611);color:var(--viewer-card-title,#e2e8f0)}.review-footer button[data-v-9aa39b2f]:disabled{opacity:.35;cursor:default}.side-panel button[data-v-9aa39b2f]:focus-visible{outline:2px solid var(--diff-active-border,#38bdf899);outline-offset:2px}.review-empty[data-v-9aa39b2f]{text-align:center;min-height:0;color:var(--ui-text-subtle,#64748b);flex:1;padding:42px 20px;overflow-y:auto}.empty-symbol[data-v-9aa39b2f]{background:var(--viewer-card,#ffffff09);border-radius:14px;place-items:center;width:44px;height:44px;margin:0 auto 14px;display:grid}.empty-symbol svg[data-v-9aa39b2f]{width:22px;height:22px}.empty-symbol.is-passed[data-v-9aa39b2f]{color:var(--diff-insert-dot,#00a870);background:var(--diff-insert-bg,#34d3991a)}.review-empty h3[data-v-9aa39b2f]{color:var(--viewer-card-title,#e2e8f0);font-size:14px;font-weight:600}.review-empty p[data-v-9aa39b2f]{margin-top:8px;font-size:12px;line-height:1.6}.review-empty button[data-v-9aa39b2f]{color:var(--viewer-card-text,#cbd5e1);cursor:pointer;text-underline-offset:4px;margin-top:20px;font-size:12px;text-decoration:underline}.page-loading[data-v-9aa39b2f]{height:200px;color:var(--ui-text-muted,#94a3b8);justify-content:center;align-items:center;font-size:13px;display:flex}
 /*$vite$:1*/