/* Contract review workspace. TraeWork Light tokens are the only UI palette. */
:root {
  --diff-deleted: var(--status-error-active);
  --diff-deleted-bg: var(--status-error-surface-l1);
  --diff-added: var(--status-success-active);
  --diff-added-bg: var(--status-success-surface-l1);
  --diff-modified: var(--status-warning-active);
  --diff-modified-bg: var(--status-warning-surface-l1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* The workbench owns the viewport. Never toggle root overflow on hover: doing
   so changes the available width, refits both pages and causes scroll jumps. */
html { height: 100%; min-height: 0; overflow: hidden; overscroll-behavior: none; }
html, body { margin: 0; padding: 0; height: 100%; }
body.page-body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; padding: 0; background: var(--bg-base-default); color: var(--text-default); font: var(--body-base-font-weight) var(--body-base-font-size)/var(--body-base-line-height) var(--body-base-font-family); }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--border-brand); outline-offset: 2px; }
button:active:not(:disabled) { transform: translateY(1px); }
.skip-link { position: fixed; top: var(--spacer-8); left: var(--spacer-8); z-index: 60; background: var(--bg-base-default); color: var(--text-default); padding: var(--spacer-12); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.cmp-icon { display: inline-block; width: var(--icon-size-16); height: var(--icon-size-16); flex: 0 0 auto; background: currentColor; mask: var(--cmp-icon) center / contain no-repeat; -webkit-mask: var(--cmp-icon) center / contain no-repeat; }
.cmp-icon--upload { --cmp-icon: url('/trae-work/assets/icons/file-upload.svg'); }
.cmp-icon--close { --cmp-icon: url('/trae-work/assets/icons/Close.svg'); }
.cmp-icon--search { --cmp-icon: url('/trae-work/assets/icons/Search.svg'); }
.cmp-icon--up { --cmp-icon: url('/trae-work/assets/icons/arrow_up.svg'); }
.cmp-icon--down { --cmp-icon: url('/trae-work/assets/icons/arrow_down.svg'); }
.cmp-icon--add { --cmp-icon: url('/trae-work/assets/icons/add.svg'); }
.navbar { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 var(--spacer-24); background: var(--bg-base-secondary); border-bottom: 1px solid var(--border-neutral-l1); flex-shrink: 0; }
.navbar__brand { display: inline-flex; align-items: center; gap: var(--spacer-8); font-size: var(--heading-sm-font-size); font-weight: var(--font-weight-strong); color: var(--text-default); text-decoration: none; }
.navbar__brand-icon { width: 36px; height: 36px; object-fit: contain; }
.navbar__nav { display: inline-flex; align-items: center; gap: var(--spacer-4); }
.navbar__link { display: inline-flex; align-items: center; gap: var(--spacer-6); height: 32px; padding: 0 var(--spacer-12); border-radius: var(--radius-8); color: var(--text-secondary); text-decoration: none; }
.navbar__link.is-active { background: var(--bg-overlay-l1); color: var(--text-default); font-weight: var(--font-weight-medium); }
.navbar__divider { width: 1px; height: 20px; background: var(--border-neutral-l1); margin: 0 var(--spacer-8); }
.navbar__user { display: inline-flex; align-items: center; gap: var(--spacer-8); font-size: var(--body-md-font-size); color: var(--text-secondary); }
.page-shell, .workspace { flex: 1; display: flex; min-height: 0; min-width: 0; overflow: hidden; overscroll-behavior: none; }
.workspace { overflow: hidden; }
.compare-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 var(--spacer-24) var(--spacer-16); overflow: auto; }
.compare-hero { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: var(--spacer-16); padding: var(--spacer-20) 0 var(--spacer-16); }
.compare-back { font-size: var(--body-md-font-size); color: var(--text-tertiary); text-decoration: none; }
.compare-back:hover { color: var(--text-default); }
.compare-hero h1 { display: inline; margin: 0 0 0 var(--spacer-8); font: var(--heading-lg-font-weight) var(--heading-lg-font-size)/var(--heading-lg-line-height) var(--heading-lg-font-family); }
.compare-hero p { margin: var(--spacer-6) 0 0; color: var(--text-tertiary); font-size: var(--body-md-font-size); }
.upload-section { flex-shrink: 0; margin: var(--spacer-24) auto; width: 100%; max-width: 1200px; }
.upload-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--spacer-16); }
.upload-panel { display: flex; flex-direction: column; gap: var(--spacer-16); }
.upload-panel__title { display: flex; align-items: center; gap: var(--spacer-8); margin: 0; font-size: var(--body-base-font-size); font-weight: var(--font-weight-strong); }
.upload-panel__note { margin-left: auto; font-size: var(--body-md-font-size); color: var(--text-tertiary); font-weight: var(--font-weight-default); }
.version-label { font-family: var(--code-editor-font-family); color: var(--text-tertiary); font-size: var(--body-md-font-size); }
.dropzone { position: relative; display: grid; place-items: center; padding: var(--spacer-24); min-height: 240px; background: var(--bg-base-default); border: 1px dashed var(--border-neutral-l3); border-radius: var(--radius-8); }
.dropzone:hover, .dropzone:focus-within, .dropzone.is-dragover { border-color: var(--border-brand); background: var(--bg-overlay-l1); }
.dropzone:focus-within { outline: 2px solid var(--border-brand); outline-offset: 2px; }
.dropzone__prompt { display: flex; flex-direction: column; gap: var(--spacer-8); align-items: center; text-align: center; pointer-events: none; }
.dropzone__icon { width: var(--icon-size-24); height: var(--icon-size-24); color: var(--icon-tertiary); margin-bottom: var(--spacer-12); }
.dropzone__title { font-weight: var(--font-weight-medium); }
.dropzone__hint { color: var(--text-tertiary); font-size: var(--body-md-font-size); }
.dropzone-overlay-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-card { display: none; width: 100%; min-width: 0; text-align: center; position: relative; pointer-events: none; }
.has-files .file-card { display: block; }
.has-files .dropzone__prompt { display: none; }
.file-card__remove { pointer-events: auto; position: absolute; right: 0; top: 0; z-index: 1; }
.file-card__icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--spacer-16); background: var(--bg-overlay-l1); border: 1px solid var(--border-neutral-l1); border-radius: var(--radius-8); font: var(--font-weight-strong) var(--body-base-font-size)/var(--body-base-line-height) var(--code-editor-font-family); color: var(--text-secondary); }
.file-card__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--font-weight-medium); }
.file-card__size { margin-top: var(--spacer-4); color: var(--text-tertiary); font-size: var(--body-md-font-size); }
.compare-action { display: flex; align-items: center; justify-content: center; }
.upload-help { margin-top: var(--spacer-20); color: var(--text-tertiary); font-size: var(--body-md-font-size); line-height: var(--body-md-line-height); text-wrap: pretty; }
.upload-progress { display: none; }
.upload-progress.is-visible { display: block; }
.upload-progress__row, .progress-bar-row { display: flex; justify-content: space-between; gap: var(--spacer-12); margin: var(--spacer-12) 0 var(--spacer-8); font-size: var(--body-md-font-size); color: var(--text-secondary); }
.upload-progress__fill, .progress-bar-fill { width: 100%; transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
.progress-section { display: none; width: 100%; max-width: 1200px; margin: var(--spacer-24) auto; flex-shrink: 0; }
.progress-section.is-visible { display: block; }
.progress-card__head { display: flex; align-items: center; gap: var(--spacer-8); flex-wrap: wrap; }
.progress-card__title { margin: 0 auto 0 0; font-size: var(--heading-sm-font-size); font-weight: var(--font-weight-strong); }
.progress-timeline { display: flex; margin: var(--spacer-24) 0; }
.progress-timeline__track { display: none; }
.progress-timeline__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--spacer-8); position: relative; }
.progress-timeline__step:not(:last-child)::after { content: ''; position: absolute; top: var(--spacer-16); left: calc(50% + var(--spacer-24)); right: calc(-50% + var(--spacer-24)); height: 1px; background: var(--border-neutral-l2); }
.progress-timeline__node { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--border-neutral-l2); border-radius: var(--radius-full); color: var(--text-tertiary); font-family: var(--code-editor-font-family); }
.progress-timeline__label { color: var(--text-tertiary); font-size: var(--body-md-font-size); }
.progress-timeline__sub { display: none; }
.is-active .progress-timeline__node { color: var(--text-brand); border-color: var(--border-brand); background: var(--bg-brand-popup); }
.is-active .progress-timeline__label { color: var(--text-default); }
.is-done .progress-timeline__node { color: var(--status-success-active); border-color: var(--status-success-surface-l3); background: var(--status-success-surface-l1); }
.progress-message { margin: var(--spacer-12) 0 0; color: var(--text-secondary); font-size: var(--body-md-font-size); }
.result-section { display: none; flex: 1; flex-direction: column; min-height: 0; }
.result-section.is-visible { display: flex; }
.result-notice { display: block; flex-shrink: 0; padding: var(--spacer-8) var(--spacer-12); border-radius: var(--radius-6); max-height: 32dvh; overflow: auto; }
.result-notice summary { cursor: pointer; color: var(--text-secondary); font-size: var(--body-md-font-size); }
.result-notice summary:focus-visible { outline: 2px solid var(--border-brand); outline-offset: 2px; }
.result-notice[open] .ds-alert__desc { margin-top: var(--spacer-8); line-height: var(--body-md-line-height); }
.notice-detail-hint { margin-left: var(--spacer-12); color: var(--text-tertiary); font-size: var(--body-sm-font-size); }
.result-notice[open] .notice-detail-hint { display: none; }
.result-notice.is-warning { background: var(--status-warning-surface-l1); }
.result-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--spacer-16); flex-shrink: 0; margin-bottom: var(--spacer-12); }
.result-controls .ds-tabs { border-bottom: 0; }
.diff-navigation { display: flex; align-items: center; gap: var(--spacer-8); }
#diffPosition { min-width: 5.5em; text-align: center; color: var(--text-secondary); font-family: var(--code-editor-font-family); font-size: var(--body-md-font-size); font-variant-numeric: tabular-nums; }
.result-body { display: flex; flex: 1; min-height: 0; min-width: 0; }
.result-body > .compare-viewer { flex: 1; }
button, .ds-btn, .ds-tab, .ds-tag, .diff-item__head, .diff-stat, .progress-timeline__label, .task-sidebar__title { white-space: nowrap; writing-mode: horizontal-tb; text-orientation: mixed; }
.diff-item__text, .diff-item__llm { white-space: pre-wrap; }
.task-sidebar__head { flex-wrap: nowrap; gap: var(--spacer-4); }
#sidebarBackBtn { padding-left: var(--spacer-4); padding-right: var(--spacer-4); }
#sidebarDiffPanel { flex: 1; border: 0; border-radius: 0; max-height: none; }
#sidebarDiffPanel .diff-sidebar__head { display: block; }
#sidebarDiffPanel .diff-list { display: flex; }
#sidebarDiffPanel .diff-stats { min-width: 0; }
#sidebarDiffPanel .diff-stat { flex-direction: column; }
#sidebarDiffPanel .diff-search { max-width: none; margin-top: var(--spacer-12); }
#sidebarDiffPanel .diff-sidebar__foot { display: block; }
.task-sidebar__item-head { align-items: center; }
.task-sidebar__item-head .ds-tag { flex: 0 0 auto; min-width: max-content; white-space: nowrap; writing-mode: horizontal-tb; }
.task-sidebar__item-title { flex: 1 1 auto; }
.task-sidebar__item-actions { flex: 0 0 auto; }
.task-sidebar__item-progress, .task-sidebar__item-meta { white-space: nowrap; }
.task-sidebar__item-meta { overflow: hidden; text-overflow: ellipsis; }
.page-slot { display: flex; flex-direction: column; width: 100%; flex: 0 0 auto; padding-bottom: var(--spacer-16); }
.page-slot__missing { flex: 1; }
.page-slot__missing { display: grid; place-items: center; min-height: 200px; height: 100%; padding: var(--spacer-24); border: 1px dashed var(--border-neutral-l3); color: var(--text-tertiary); font-size: var(--body-base-font-size); background: var(--bg-overlay-l1); }
.page-card[data-role="source"] .diff-highlight { border-color: var(--diff-deleted); background: var(--status-error-surface-l2); }
.page-card[data-role="target"] .diff-highlight { border-color: var(--diff-added); background: var(--status-success-surface-l2); }
.diff-highlight.is-selected { outline: 2px solid currentColor; outline-offset: 1px; }
.page-card[data-role="source"] .diff-highlight { color: var(--diff-deleted); }
.page-card[data-role="target"] .diff-highlight { color: var(--diff-added); }
.has-diff[data-role="source"] { background: var(--status-error-surface-l1); box-shadow: inset 3px 0 var(--diff-deleted); }
.has-diff[data-role="target"] { background: var(--status-success-surface-l1); box-shadow: inset 3px 0 var(--diff-added); }
.has-diff.is-filtered-out { background: transparent; box-shadow: none; }
.original-char-del { background: var(--status-error-surface-l3); color: inherit; text-decoration: line-through; }
.original-char-ins { background: var(--status-success-surface-l3); color: inherit; text-decoration: underline; }
.diff-highlight[data-scope="character"] { border-width: 1px; border-style: solid; }
.compare-viewer__col { display: flex; flex-direction: column; }
.page-card { flex-shrink: 0; }
.page-card__media { aspect-ratio: var(--page-ratio, 0.707); }
.page-card__media.is-loaded { aspect-ratio: auto; }
.page-card__img { object-fit: contain; }
.compare-viewer { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--border-neutral-l2); border-radius: var(--radius-8); overflow: hidden; background: var(--bg-base-default); }
.compare-viewer__toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--spacer-8); flex-shrink: 0; padding: var(--spacer-6) var(--spacer-12); border-bottom: 1px solid var(--border-neutral-l1); background: var(--bg-base-secondary); }
.diff-legend, .viewer-tools { display: flex; gap: var(--spacer-12); align-items: center; font-size: var(--body-md-font-size); color: var(--text-secondary); }
.diff-legend > span { white-space: nowrap; }
.legend-mark { display: inline-grid; place-items: center; width: var(--icon-size-16); height: var(--icon-size-16); margin-right: var(--spacer-4); border-radius: var(--radius-2); font-family: var(--code-editor-font-family); }
.legend-mark--del { color: var(--diff-deleted); background: var(--diff-deleted-bg); }
.legend-mark--ins { color: var(--diff-added); background: var(--diff-added-bg); }
.keyboard-hint { color: var(--text-tertiary); }
.viewer-tools .ds-btn { font-size: var(--body-md-font-size); }
#syncScrollBtn.is-active { background: var(--bg-overlay-l2); }
.context-toggle { display: inline-flex; align-items: center; gap: var(--spacer-6); white-space: nowrap; cursor: pointer; }
.context-toggle input { accent-color: var(--bg-brand); }
#previewZoomControls { display: flex; gap: var(--spacer-4); }
.document-headings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex-shrink: 0; background: var(--bg-base-default); border-bottom: 1px solid var(--border-neutral-l2); }
.document-headings > div { display: flex; align-items: center; min-width: 0; padding: var(--spacer-12); gap: var(--spacer-8); }
.document-headings > div + div { border-left: 1px solid var(--border-neutral-l2); }
.document-version { flex-shrink: 0; padding: var(--spacer-2) var(--spacer-6); border: 1px solid var(--border-neutral-l2); border-radius: var(--radius-4); font-size: var(--body-md-font-size); font-weight: var(--font-weight-medium); }
.compare-viewer__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--body-md-font-size); color: var(--text-secondary); }
.text-compare-view, .preview-compare-view { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1; min-height: 0; overflow: hidden; }
.text-pane { overflow: auto; min-width: 0; scrollbar-gutter: stable; overscroll-behavior: contain; }
.text-pane + .text-pane { border-left: 1px solid var(--border-neutral-l2); }
.text-row { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); border-bottom: 1px solid var(--border-neutral-l1); background: var(--bg-base-default); position: relative; }
.text-row.is-change { cursor: pointer; }
.text-row.is-change:hover { box-shadow: inset 3px 0 var(--border-neutral-l3); }
.text-row.is-selected { box-shadow: inset 3px 0 var(--border-brand); outline: 1px solid var(--border-brand); outline-offset: -1px; }
.text-row__gutter { display: flex; flex-direction: column; align-items: center; padding: var(--spacer-12) var(--spacer-2); background: var(--bg-base-secondary); border-right: 1px solid var(--border-neutral-l1); color: var(--text-tertiary); font: var(--code-terminal-font-weight) var(--body-md-font-size)/var(--body-base-line-height) var(--code-editor-font-family); user-select: none; font-variant-numeric: tabular-nums; }
.text-row__gutter small { font: inherit; font-size: var(--body-xs-font-size); color: var(--text-tertiary); }
.text-row__content { padding: var(--spacer-12) var(--spacer-16); white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--heading-sm-line-height); }
.text-row--deleted .text-row__content, .text-row--modified[data-role="source"] .text-row__content { background: var(--diff-deleted-bg); }
.text-row--added .text-row__content, .text-row--modified[data-role="target"] .text-row__content { background: var(--diff-added-bg); }
.text-row.is-placeholder .text-row__content { background: var(--bg-overlay-l1); color: var(--text-tertiary); }
.text-row.is-placeholder .text-row__content::after { content: '此处无对应内容'; font-size: var(--body-md-font-size); }
.diff-char-del { color: var(--diff-deleted); background: var(--status-error-surface-l2); text-decoration: line-through; border-radius: var(--radius-2); }
.diff-char-ins { color: var(--diff-added); background: var(--status-success-surface-l2); text-decoration: underline; text-underline-offset: .18em; border-radius: var(--radius-2); }
.viewer-footer { display: flex; justify-content: space-between; gap: var(--spacer-8); padding: var(--spacer-6) var(--spacer-12); border-top: 1px solid var(--border-neutral-l1); background: var(--bg-base-secondary); color: var(--text-tertiary); font-size: var(--body-sm-font-size); flex-shrink: 0; }
.diff-sidebar { display: flex; flex-direction: column; min-height: 0; min-width: 0; border: 1px solid var(--border-neutral-l1); border-radius: var(--radius-8); background: var(--bg-base-secondary); overflow: hidden; }
.diff-sidebar__head { padding: var(--spacer-12); border-bottom: 1px solid var(--border-neutral-l1); }
.diff-sidebar__head h2 { margin: 0 0 var(--spacer-12); font-size: var(--body-base-font-size); font-weight: var(--font-weight-strong); }
.diff-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacer-4); }
.diff-stat { display: flex; flex-direction: column; gap: var(--spacer-4); align-items: center; background: transparent; border: 1px solid transparent; border-radius: var(--radius-6); color: var(--text-tertiary); padding: var(--spacer-6) var(--spacer-2); font-size: var(--body-md-font-size); }
.diff-stat:hover { background: var(--bg-overlay-l1); }
.diff-stat.is-active { background: var(--bg-base-default); border-color: var(--border-neutral-l2); color: var(--text-default); }
.diff-stat__count { font: var(--font-weight-medium) var(--heading-sm-font-size)/var(--heading-sm-line-height) var(--code-editor-font-family); font-variant-numeric: tabular-nums; }
.diff-stat--deleted .diff-stat__count { color: var(--diff-deleted); }
.diff-stat--added .diff-stat__count { color: var(--diff-added); }
.diff-stat--modified .diff-stat__count { color: var(--diff-modified); }
.diff-search { margin-top: var(--spacer-12); font-size: var(--body-md-font-size); }
.diff-list-wrap { flex: 1; overflow: auto; min-height: 0; overscroll-behavior: contain; }
.diff-list { display: flex; flex-direction: column; padding: var(--spacer-8); gap: var(--spacer-6); }
.diff-group { min-width: 0; }
.diff-page-links { display: flex; flex-wrap: wrap; gap: var(--spacer-4); padding: var(--spacer-6) var(--spacer-4) var(--spacer-8); }
.diff-page-link { display: inline-flex; align-items: center; padding: var(--spacer-3) var(--spacer-6); border: 1px solid var(--border-neutral-l2); border-radius: var(--radius-4); background: var(--bg-base-default); color: var(--text-secondary); font-size: var(--body-md-font-size); line-height: var(--body-md-line-height); white-space: nowrap; writing-mode: horizontal-tb; }
.diff-page-link:hover { background: var(--bg-overlay-l2); }
.diff-page-link.is-active { border-color: var(--border-brand); color: var(--text-brand); background: var(--bg-brand-popup); }
.diff-item { display: block; width: 100%; text-align: left; background: var(--bg-base-default); border: 1px solid var(--border-neutral-l1); border-radius: var(--radius-6); color: var(--text-default); padding: var(--spacer-12); }
.diff-item:hover { border-color: var(--border-neutral-l3); }
.diff-item.is-selected { border-color: var(--border-brand); box-shadow: inset 2px 0 var(--border-brand); }
.diff-item__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacer-6); margin-bottom: var(--spacer-8); font-size: var(--body-md-font-size); }
.diff-item__type--deleted { color: var(--diff-deleted); }
.diff-item__type--added { color: var(--diff-added); }
.diff-item__type--modified { color: var(--diff-modified); }
.diff-item__page { color: var(--text-tertiary); font-size: var(--body-sm-font-size); }
.diff-item__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--body-md-font-size); line-height: var(--body-md-line-height); white-space: pre-wrap; }
.diff-item__llm { display: block; color: var(--text-tertiary); font-size: var(--body-sm-font-size); margin-top: var(--spacer-8); }
.diff-sidebar__foot { margin: 0; padding: var(--spacer-8) var(--spacer-12); border-top: 1px solid var(--border-neutral-l1); color: var(--text-tertiary); font-size: var(--body-sm-font-size); }
.diff-empty { padding: var(--spacer-24) var(--spacer-12); text-align: center; color: var(--text-tertiary); font-size: var(--body-md-font-size); }
/* Original layout preview is lazy-loaded and isolated from text diff rendering. */
.compare-viewer__col { overflow: auto; min-width: 0; padding: var(--spacer-16); background: var(--bg-base-secondary); overscroll-behavior: contain; scrollbar-gutter: stable; }
.compare-viewer__col + .compare-viewer__col { border-left: 1px solid var(--border-neutral-l2); }
.page-card { width: 100%; position: relative; margin: 0 auto var(--spacer-16); border: 1px solid var(--border-neutral-l2); background: var(--bg-base-default); overflow: hidden; }
.page-card__media { position: relative; min-height: 80px; }
.page-card__img { display: block; width: 100%; height: auto; }
.page-card__overlay { position: absolute; inset: 0; pointer-events: none; }
.page-card__footer { padding: var(--spacer-8); border-top: 1px solid var(--border-neutral-l1); text-align: center; color: var(--text-tertiary); background: var(--bg-base-default); font-size: var(--body-md-font-size); }
.page-card__loading, .page-card__error { padding: var(--spacer-24); color: var(--text-tertiary); font-size: var(--body-md-font-size); text-align: center; }
.page-card__loading .ds-skeleton { height: var(--spacer-12); margin-bottom: var(--spacer-12); }
.page-card__html .doc-page { width: 794px; min-height: 1123px; padding: 72px 90px; box-sizing: border-box; font-size: var(--body-base-font-size); line-height: 1.6; color: var(--text-default); }
.page-card__html .doc-para { margin: 0 0 .5em; word-break: break-word; }
.page-card__html .doc-heading { margin: .8em 0 .4em; font-weight: var(--font-weight-strong); }
.page-card__html table { width: 100%; border-collapse: collapse; margin: .5em 0; }
.page-card__html td, .page-card__html th { border: 1px solid var(--border-neutral-l3); padding: var(--spacer-6) var(--spacer-8); }
.page-card__html img { max-width: 100%; height: auto; }
.has-diff { cursor: pointer; background: var(--bg-overlay-l1); box-shadow: inset 2px 0 var(--border-neutral-l3); }
.has-diff.is-selected { outline: 2px solid var(--border-brand); outline-offset: -2px; }
.has-diff.is-filtered-out { background: transparent; box-shadow: none; cursor: default; }
.diff-highlight { position: absolute; border: 1px dashed var(--border-brand); background: var(--bg-brand-popup); padding: 0; pointer-events: auto; border-radius: var(--radius-2); }
.diff-highlight.is-selected { border-style: solid; outline: 2px solid var(--border-brand); }
/* Existing history component contract. */
.task-sidebar { display: flex; flex: 0 0 auto; height: 100%; background: var(--bg-base-secondary); border-left: 1px solid var(--border-neutral-l1); }
.task-sidebar.is-collapsed { width: 0; border: 0; overflow: hidden; }
.task-sidebar.is-expanded { width: 300px; }
.task-sidebar__panel { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.task-sidebar.is-collapsed .task-sidebar__panel { display: none; }
.task-sidebar__head { display: flex; justify-content: space-between; align-items: center; padding: var(--spacer-12); border-bottom: 1px solid var(--border-neutral-l1); }
.task-sidebar__title { font-weight: var(--font-weight-strong); }
.task-sidebar__body { flex: 1; overflow: auto; padding: var(--spacer-12); }
.task-sidebar__item { padding: var(--spacer-12); border: 1px solid var(--border-neutral-l1); border-radius: var(--radius-8); background: var(--bg-base-default); margin-bottom: var(--spacer-8); }
.task-sidebar__item-head { display: flex; justify-content: space-between; gap: var(--spacer-8); }
.task-sidebar__item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: var(--body-md-font-size); }
.task-sidebar__item-meta, .task-sidebar__group-title { font-size: var(--body-sm-font-size); color: var(--text-tertiary); margin-top: var(--spacer-8); }
.task-sidebar__empty { padding: var(--spacer-24); color: var(--text-tertiary); text-align: center; }
.toast-wrap { position: fixed; right: var(--spacer-16); top: var(--spacer-16); display: flex; flex-direction: column; gap: var(--spacer-8); z-index: 50; max-width: min(400px, calc(100vw - var(--spacer-32))); }
.compare-detail-loading { position: fixed; inset: 0; z-index: 40; background: var(--bg-overlay-l3); display: grid; place-items: center; }
.compare-detail-loading__body { background: var(--bg-base-default); border: 1px solid var(--border-neutral-l2); border-radius: var(--radius-8); padding: var(--spacer-24); min-width: 260px; }
.compare-detail-loading .ds-skeleton { margin-top: var(--spacer-12); height: var(--spacer-12); }
@media (max-width: 1200px) { .keyboard-hint { display: none; } .result-body { grid-template-columns: minmax(0, 1fr) 224px; } .compare-main { padding-left: var(--spacer-16); padding-right: var(--spacer-16); } .viewer-tools { gap: var(--spacer-4); } }
@media (max-width: 900px) {
  .result-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(300px, 1fr) auto; overflow: auto; }
  .diff-sidebar { max-height: 220px; }
  .diff-sidebar__head { display: flex; align-items: center; gap: var(--spacer-12); flex-wrap: wrap; }
  .diff-sidebar__head h2 { margin: 0; }
  .diff-stats { min-width: 220px; flex: 1; }
  .diff-search { margin: 0; max-width: 220px; }
  .diff-stat { flex-direction: row; justify-content: center; }
  .diff-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diff-sidebar__foot { display: none; }
}
@media (max-width: 640px) {
  .compare-main { padding: 0 var(--spacer-12) var(--spacer-12); }
  .compare-hero { padding-top: var(--spacer-12); }
  .compare-hero h1 { font-size: var(--heading-md-font-size); }
  .compare-hero p { max-width: 26em; }
  .compare-back { display: none; }
  .upload-section { margin-top: var(--spacer-8); overflow: auto; }
  .upload-pair { display: flex; flex-direction: column; gap: var(--spacer-12); }
  .upload-panel { padding: var(--spacer-12); }
  .dropzone { min-height: 160px; padding: var(--spacer-16); }
  .compare-action { order: 1; }
  .compare-action .ds-btn { width: 100%; }
  .progress-section { margin-top: var(--spacer-8); }
  .progress-timeline { flex-wrap: wrap; gap: var(--spacer-16) 0; }
  .progress-timeline__step { flex: 0 0 33.33%; }
  .progress-timeline__step::after { display: none; }
  .result-notice summary { line-height: var(--body-md-line-height); }
  .notice-detail-hint { display: none; }
  .result-controls { gap: var(--spacer-8); flex-wrap: wrap; margin-bottom: var(--spacer-8); }
  .result-controls .ds-tab { padding: var(--spacer-8) 0; }
  .diff-navigation { margin-left: auto; }
  .diff-navigation .ds-btn { padding: 0 var(--spacer-8); font-size: var(--body-md-font-size); }
  .compare-viewer__toolbar { flex-wrap: wrap; padding: var(--spacer-6); }
  .diff-legend { gap: var(--spacer-8); }
  .viewer-tools { margin-left: auto; }
  .document-headings > div { flex-direction: column; align-items: flex-start; gap: var(--spacer-4); padding: var(--spacer-8); }
  .document-version { border: 0; padding: 0; }
  .compare-viewer__label { max-width: 100%; }
  .text-row { grid-template-columns: 2.2em minmax(0, 1fr); }
  .text-row__content { padding: var(--spacer-8); }
  .text-row__gutter { padding-top: var(--spacer-8); font-size: var(--body-sm-font-size); }
  .viewer-footer > span:last-child { display: none; }
  .compare-viewer__col { padding: var(--spacer-6); }
  .diff-sidebar { max-height: 200px; }
  .diff-sidebar__head { gap: var(--spacer-6); padding: var(--spacer-8); }
  .diff-sidebar__head h2 { font-size: var(--body-md-font-size); }
  .diff-search { max-width: none; }
  .diff-list { grid-template-columns: minmax(0, 1fr); }
  .task-sidebar.is-expanded { position: fixed; right: 0; top: 56px; bottom: 0; z-index: 35; max-width: 90vw; }
}
/* Original-document workbench: one command row, two paper canvases, one switchable rail. */
.compare-hero { padding: var(--spacer-12) 0; }
.compare-hero__text { display: flex; align-items: baseline; gap: var(--spacer-8); }
.compare-hero h1 { margin-left: 0; font-size: var(--heading-sm-font-size); line-height: var(--heading-sm-line-height); }
.compare-hero p { margin: 0 0 0 var(--spacer-12); font-size: var(--body-md-font-size); }
.compare-back { font-size: var(--body-md-font-size); }
.result-notice { padding: var(--spacer-6) var(--spacer-12); margin-bottom: var(--spacer-8); border: 0; background: var(--bg-base-secondary); }
.compare-viewer__toolbar { min-height: 48px; gap: var(--spacer-12); flex-wrap: wrap; }
.result-controls { display: contents; }
.result-controls .ds-tabs { gap: var(--spacer-16); }
.result-controls .ds-tab { padding: var(--spacer-8) 0; font-size: var(--body-md-font-size); }
.diff-navigation { margin-left: auto; }
.diff-navigation .ds-btn { padding: 0 var(--spacer-8); font-size: var(--body-md-font-size); }
.viewer-tools { gap: var(--spacer-8); margin-left: 0; }
.document-headings > div { padding: var(--spacer-10) var(--spacer-16); }
.document-version { border: 0; padding: 0; color: var(--text-secondary); }
.document-version--source::before, .document-version--target::before { content: ''; display: inline-block; width: var(--spacer-6); height: var(--spacer-6); margin-right: var(--spacer-6); border-radius: var(--radius-full); background: var(--diff-deleted); vertical-align: middle; }
.document-version--target::before { background: var(--diff-added); }
.page-position { margin-left: auto; color: var(--text-tertiary); font-size: var(--body-md-font-size); font-family: var(--code-editor-font-family); white-space: nowrap; }
.page-card { margin-bottom: 0; box-shadow: 0 2px 6px var(--bg-overlay-l2); }
.page-card__overlay .diff-highlight { mix-blend-mode: multiply; }
.page-card[data-role="source"] .diff-highlight.is-selected { border-color: var(--diff-deleted); outline-color: var(--diff-deleted); }
.page-card[data-role="target"] .diff-highlight.is-selected { border-color: var(--diff-added); outline-color: var(--diff-added); }
.page-card__overlay .diff-highlight[data-scope="region"] { border-style: dashed; }
.original-char-del.is-filtered-out, .original-char-ins.is-filtered-out { background: transparent; text-decoration: none; }
.compare-main { padding-bottom: var(--spacer-12); overscroll-behavior: contain; }
/* Upload/help can scroll within main; results scroll only inside the paper panes
   and the single directory, not through a second outer workbench scrollbar. */
.compare-main:has(> .result-section.is-visible) { overflow: hidden; }
.compare-viewer__col, .text-pane { min-height: 0; overscroll-behavior: contain; overflow-anchor: none; }
.result-notice, .task-sidebar__body, .diff-list-wrap { overscroll-behavior: contain; }
#taskSidebar.task-sidebar.is-expanded { width: 300px; }
#sidebarDiffPanel .diff-item { white-space: normal; }
#sidebarDiffPanel .diff-item__head, #sidebarDiffPanel .diff-stat span { white-space: nowrap; }
@media (max-width: 1200px) { .compare-hero p { display: none; } .compare-viewer__toolbar { gap: var(--spacer-8); } }
@media (max-width: 768px) { .compare-hero__text { display: block; } .compare-hero p { display: none; } .compare-viewer__toolbar { align-items: center; } .viewer-tools { margin-left: auto; } .document-headings > div { flex-direction: row; flex-wrap: wrap; align-items: baseline; } .page-position { margin-left: 0; } .document-headings .compare-viewer__label { flex-basis: 100%; order: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }