.topbar-actions { display: flex; align-items: center; gap: 12px; }
.ocr-page-shortcut { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text-muted); }
.ocr-overlay { position: fixed; z-index: 1000; inset: 0; display: flex; justify-content: flex-end; background: rgba(15, 23, 42, .48); }
.ocr-drawer { display: flex; flex-direction: column; width: min(1120px, 100%); height: 100%; overflow: auto; background: var(--bg); box-shadow: -8px 0 32px rgba(0,0,0,.18); }
.ocr-head { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--border); background: #fff; }
.ocr-head h2 { font-size: 20px; }
.ocr-head p { margin-top: 3px; color: var(--text-muted); font-size: 13px; }
.ocr-body { padding: 18px 22px 30px; }
.ocr-controls { display: grid; grid-template-columns: 1fr 1fr 1.5fr auto; align-items: end; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.ocr-controls label { display: grid; gap: 4px; color: var(--text-muted); font-size: 13px; }
.ocr-file { max-width: 100%; }
.ocr-status { grid-column: 1 / -1; min-height: 1.4em; color: var(--text-muted); }
.ocr-columns { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(400px, 1.1fr); gap: 16px; margin-top: 16px; align-items: start; }
.ocr-image-pane, .ocr-draft-pane { min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.ocr-image-pane h3, .ocr-draft-pane h3 { margin-bottom: 10px; font-size: 16px; }
.ocr-preview { display: grid; min-height: 280px; place-items: center; overflow: hidden; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--surface-alt); color: var(--text-muted); }
.ocr-preview img { display: block; max-width: 100%; max-height: 65vh; object-fit: contain; }
.ocr-fields { display: grid; gap: 7px; max-height: 60vh; overflow: auto; }
.ocr-field-row, .ocr-yellow-row, .ocr-map-row { display: grid; grid-template-columns: minmax(100px, .8fr) minmax(120px, 1.2fr) auto; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; }
.ocr-field-row.is-yellow, .ocr-yellow-row { border-color: #e7bd56; background: var(--warn-bg); }
.ocr-field-name { overflow-wrap: anywhere; color: var(--text-muted); font-size: 12px; }
.ocr-check { display: flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; }
.ocr-yellow-row, .ocr-map-row { grid-template-columns: 1fr auto auto; margin-top: 7px; }
.ocr-map-row { grid-template-columns: minmax(120px, 1fr) minmax(150px, 1fr); }
.ocr-warning { margin-bottom: 8px; color: var(--danger); font-weight: 600; }
.ocr-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 14px 0; }
.ocr-history, .ocr-aliases { margin-top: 10px; padding: 12px; border-radius: 8px; background: #fff; }
.ocr-history p, .ocr-aliases p { padding: 4px 0; border-bottom: 1px solid var(--border); }
.ocr-history-item { display: block; width: 100%; margin: 3px 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); text-align: left; cursor: pointer; }
.ocr-history-item:hover { border-color: var(--primary); background: var(--surface-alt); }
.ocr-comparison { margin-top: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt); }
.ocr-comparison h3 { margin-bottom: 6px; }
.ocr-comparison-table { width: 100%; border-collapse: collapse; background: #fff; }
.ocr-comparison-table th, .ocr-comparison-table td { padding: 7px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.ocr-comparison pre { max-height: 360px; overflow: auto; white-space: pre-wrap; }
@media (max-width: 760px) {
  .topbar-actions { align-items: flex-end; flex-direction: column; gap: 4px; }
  .ocr-controls { grid-template-columns: 1fr; }
  .ocr-columns { grid-template-columns: 1fr; }
  .ocr-field-row { grid-template-columns: 1fr; }
  .ocr-page-shortcut { align-items: flex-start; flex-direction: column; }
}

/* J5018 visual refinements */
.ocr-overlay { background:rgb(15 23 42 / .42); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.ocr-drawer { color:#172033; background:#f8fafc; box-shadow:-12px 0 40px #0f172a30; }
.ocr-head { padding:16px 22px; border-color:#e2e8f0; box-shadow:0 2px 8px #0f172a08; }
.ocr-head h2 { color:#0f172a; letter-spacing:-.025em; }
.ocr-body { min-width:0; }
.ocr-controls,.ocr-image-pane,.ocr-draft-pane,.ocr-history,.ocr-aliases,.ocr-comparison { border-color:#e2e8f0; border-radius:12px; box-shadow:0 3px 12px #0f172a08; }
.ocr-controls { border-top:3px solid #3b82f6; }
.ocr-image-pane { border-top:3px solid #8b5cf6; }
.ocr-draft-pane { border-top:3px solid #8b5cf6; }
.ocr-comparison { border-top:3px solid #22c55e; background:linear-gradient(110deg,#f0fdf4,#fff7ed); }
.ocr-controls input,.ocr-controls select,.ocr-fields input,.ocr-map-row input,.ocr-drawer .btn { min-height:40px; }
.ocr-controls input,.ocr-controls select,.ocr-fields input,.ocr-map-row input { min-width:0; border-color:#cbd5e1; border-radius:8px; }
.ocr-controls input:focus,.ocr-controls select:focus,.ocr-fields input:focus,.ocr-map-row input:focus { outline:0; border-color:#3b82f6; box-shadow:0 0 0 3px #3b82f61f; }
.ocr-drawer .btn { border-radius:8px; font-weight:650; }
.ocr-preview { border-color:#cbd5e1; border-radius:10px; background:#f8fafc; }
.ocr-field-row,.ocr-yellow-row,.ocr-map-row { min-width:0; border-color:#e2e8f0; border-radius:9px; background:#fff; }
.ocr-field-row.is-yellow,.ocr-yellow-row { border-color:#fcd34d; background:#fffbeb; }
.ocr-warning { border:1px solid #fed7aa; border-left:4px solid #f59e0b; border-radius:8px; background:#fff7ed; padding:10px 12px; }
.ocr-actions { align-items:center; }
.ocr-history-item { min-height:40px; border-color:#e2e8f0; border-radius:8px; }
.ocr-comparison-table { display:block; max-width:100%; overflow-x:auto; border:1px solid #dbe3ec; border-radius:9px; font-variant-numeric:tabular-nums; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
.ocr-comparison-table th,.ocr-comparison-table td { border-color:#e2e8f0; padding:9px 11px; }
.ocr-comparison-table th { position:sticky; top:0; z-index:1; background:#f1f5f9; color:#334155; }
.ocr-comparison-table tbody tr:nth-child(even) { background:#f8fafc; }
@media (max-width:760px) {
  .topbar-actions { align-items:center; flex-direction:row; flex-wrap:wrap; }
  .ocr-overlay { align-items:stretch; }
  .ocr-drawer { width:100%; min-width:0; }
  .ocr-head { padding:12px 14px; }
  .ocr-body { padding:12px 12px 22px; }
  .ocr-controls { grid-template-columns:minmax(0,1fr); padding:12px; }
  .ocr-controls label { min-width:0; }
  .ocr-columns { grid-template-columns:minmax(0,1fr); gap:12px; }
  .ocr-field-row { grid-template-columns:minmax(0,1fr); }
  .ocr-yellow-row { grid-template-columns:minmax(0,1fr) auto auto; }
  .ocr-map-row { grid-template-columns:minmax(0,1fr); }
  .ocr-actions { align-items:stretch; }
  .ocr-actions .btn { min-height:44px; }
}
@media (prefers-reduced-motion:reduce) { .ocr-overlay,.ocr-drawer,.ocr-drawer * { scroll-behavior:auto; } }
.ocr-controls { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr) auto; }
.ocr-controls input, .ocr-controls select, .ocr-field-row input, .ocr-map-row input { min-width:0; max-width:100%; width:100%; }
.ocr-controls input[type="checkbox"], .ocr-field-row input[type="checkbox"] { width:auto; }
.ocr-drawer { overscroll-behavior:contain; }
@media (max-width:760px) { .ocr-controls { grid-template-columns:minmax(0,1fr); } }

/* ==================================================================== *
 * OPUS55 · OCR 拍单核对工作台精修
 * 左：原图预览画布（工程网格底纹 + 点击缩放）；右：低置信度琥珀导轨卡片 + 勾选动画。
 * data-ui-zoom 由 ui-polish.js 在点击原图时切换，仅用于展示。
 * ==================================================================== */
.ocr-drawer { animation: ocr-ui-slide-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.ocr-overlay { animation: ocr-ui-fade 180ms ease-out both; }
.ocr-image-pane { border-top-color: #6366f1; }
.ocr-draft-pane { border-top-color: #f59e0b; }
.ocr-image-pane h3, .ocr-draft-pane h3 { display: flex; align-items: center; gap: 8px; letter-spacing: -0.01em; }
.ocr-image-pane h3::before, .ocr-draft-pane h3::before { width: 8px; height: 8px; content: ""; border-radius: 2px; background: #6366f1; }
.ocr-draft-pane h3::before { background: #f59e0b; }
.ocr-preview {
  position: relative;
  min-height: 320px;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background-color: #f8fafc;
  background-image:
    linear-gradient(rgba(100, 116, 139, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 116, 139, 0.12) 1px, transparent 1px),
    linear-gradient(rgba(100, 116, 139, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 116, 139, 0.06) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px, 12px 12px, 12px 12px;
  background-position: -1px -1px;
  box-shadow: inset 0 2px 10px rgba(15, 23, 42, 0.04);
  color: #64748b;
  font-size: 13px;
}
.ocr-preview img {
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 10px 30px rgba(15, 23, 42, 0.18);
  cursor: zoom-in;
  transition: box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ocr-preview:has(img)::after {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  content: "🔍 点击原图放大";
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ocr-preview[data-ui-zoom="in"] { max-height: 70vh; overflow: auto; place-items: start; overscroll-behavior: contain; }
.ocr-preview[data-ui-zoom="in"] img { width: 200%; max-width: none; max-height: none; cursor: zoom-out; }
.ocr-preview[data-ui-zoom="in"]::after { position: sticky; content: "点击原图还原"; }
.ocr-fields { gap: 8px; padding-right: 2px; }
.ocr-field-row, .ocr-yellow-row, .ocr-map-row { transition: border-color 180ms cubic-bezier(0.16, 1, 0.3, 1), background-color 180ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1); }
.ocr-field-row:hover, .ocr-map-row:hover { border-color: #cbd5e1; }
.ocr-field-row.is-yellow, .ocr-yellow-row {
  padding-left: 14px;
  border-color: #fcd34d;
  background: linear-gradient(90deg, #fffbeb 0%, #fff 75%);
  box-shadow: inset 4px 0 0 #f59e0b;
}
.ocr-field-row.is-yellow .ocr-field-name { color: #92400e; font-weight: 650; }
.ocr-field-row.is-yellow:has(.ocr-check input:checked), .ocr-yellow-row:has(input[type="checkbox"]:checked) {
  border-color: #a7f3d0;
  background: linear-gradient(90deg, #ecfdf5 0%, #fff 75%);
  box-shadow: inset 4px 0 0 #10b981;
}
.ocr-field-row.is-yellow:has(.ocr-check input:checked) .ocr-field-name { color: #047857; }
.ocr-check { gap: 7px; color: #92400e; font-weight: 650; cursor: pointer; }
.ocr-check:has(input:checked) { color: #047857; }
.ocr-drawer .ocr-check input[type="checkbox"], .ocr-drawer .ocr-yellow-row input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-grid;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 0;
  flex: none;
  place-content: center;
  margin: 0;
  border: 1.5px solid #d97706;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ocr-drawer .ocr-check input[type="checkbox"]::before, .ocr-drawer .ocr-yellow-row input[type="checkbox"]::before {
  width: 11px;
  height: 11px;
  content: "";
  background: #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ocr-drawer .ocr-check input[type="checkbox"]:hover:not(:disabled), .ocr-drawer .ocr-yellow-row input[type="checkbox"]:hover:not(:disabled) { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.16); }
.ocr-drawer .ocr-check input[type="checkbox"]:checked, .ocr-drawer .ocr-yellow-row input[type="checkbox"]:checked {
  border-color: #059669;
  background: #10b981;
  animation: ocr-ui-check-pop 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ocr-drawer .ocr-check input[type="checkbox"]:checked::before, .ocr-drawer .ocr-yellow-row input[type="checkbox"]:checked::before { transform: scale(1); }
.ocr-drawer .ocr-check input[type="checkbox"]:disabled, .ocr-drawer .ocr-yellow-row input[type="checkbox"]:disabled { opacity: 0.55; cursor: not-allowed; }
.ocr-drawer .ocr-check input[type="checkbox"]:focus-visible, .ocr-drawer .ocr-yellow-row input[type="checkbox"]:focus-visible { outline: 2px solid #2563eb !important; outline-offset: 2px; }
.ocr-warning:empty { display: none; }
.ocr-history-item { transition: border-color 180ms cubic-bezier(0.16, 1, 0.3, 1), background-color 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1); }
.ocr-history-item:hover { border-color: #93c5fd; background: #f5f9ff; }
@keyframes ocr-ui-slide-in { from { opacity: 0.6; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes ocr-ui-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ocr-ui-check-pop { 0% { transform: scale(0.85); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .ocr-drawer, .ocr-overlay, .ocr-drawer .ocr-check input[type="checkbox"]:checked, .ocr-drawer .ocr-yellow-row input[type="checkbox"]:checked { animation: none !important; }
  .ocr-drawer .ocr-check input[type="checkbox"]::before, .ocr-drawer .ocr-yellow-row input[type="checkbox"]::before { transition: none; }
}