:root {
  --bg: #f6f6f9; --panel: #ffffff; --fg: #1a1b2b; --muted: #5f6478; --line: #dfe0e8; --soft: #efeff5;
  --brand: #5b3fa6; --brand-soft: #eee9f8; --on-brand: #ffffff;
  --ext: #34506e; --ext-soft: #e7eef6; --norm: #7a5a00; --norm-soft: #fbf1d6; --match: #0d7f74; --match-soft: #e2f4f1;
  --ok: #1d7a3e; --ok-soft: #e3f4e8; --amb: #a35b00; --amb-soft: #fcefdc; --bad: #b42318; --bad-soft: #fde4e1;
  --plus: #1d7a3e; --minus: #b42318; --mark: #fff1a8;
  --hl: #5b3fa6; --hl-soft: rgb(91 63 166 / .16); --cell: rgb(52 80 110 / .55); --line-box: rgb(122 90 0 / .5);
  --focus: #0d7f74; --focus-soft: rgb(13 127 116 / .14);
  --shadow: 0 1px 2px rgb(16 24 40 / .06), 0 1px 3px rgb(16 24 40 / .08);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12121a; --panel: #1b1c27; --fg: #e7e7f0; --muted: #9c9fb3; --line: #2e3040; --soft: #242534;
    --brand: #a58cf0; --brand-soft: #2a2343; --on-brand: #160f2b;
    --ext: #8fb3da; --ext-soft: #1f2c3b; --norm: #e8c46a; --norm-soft: #3a3015; --match: #4fc7b8; --match-soft: #14302d;
    --ok: #6bd18f; --ok-soft: #173322; --amb: #f0b45e; --amb-soft: #3a2a12; --bad: #ff8a80; --bad-soft: #43201d;
    --plus: #6bd18f; --minus: #ff8a80; --mark: #5a4d12;
    --hl: #a58cf0; --hl-soft: rgb(165 140 240 / .22); --cell: rgb(143 179 218 / .6); --line-box: rgb(232 196 106 / .6);
    --focus: #4fc7b8; --focus-soft: rgb(79 199 184 / .18);
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  --bg: #12121a; --panel: #1b1c27; --fg: #e7e7f0; --muted: #9c9fb3; --line: #2e3040; --soft: #242534;
  --brand: #a58cf0; --brand-soft: #2a2343; --on-brand: #160f2b;
  --ext: #8fb3da; --ext-soft: #1f2c3b; --norm: #e8c46a; --norm-soft: #3a3015; --match: #4fc7b8; --match-soft: #14302d;
  --ok: #6bd18f; --ok-soft: #173322; --amb: #f0b45e; --amb-soft: #3a2a12; --bad: #ff8a80; --bad-soft: #43201d;
  --plus: #6bd18f; --minus: #ff8a80; --mark: #5a4d12;
  --hl: #a58cf0; --hl-soft: rgb(165 140 240 / .22); --cell: rgb(143 179 218 / .6); --line-box: rgb(232 196 106 / .6);
  --focus: #4fc7b8; --focus-soft: rgb(79 199 184 / .18);
  --shadow: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding: 0 20px 20px; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0; }
code, .mono { font-family: var(--mono); font-size: .9em; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
button, select, input { font: inherit; color: inherit; }
button, .btn { border: 1px solid var(--line); background: var(--panel); padding: 6px 13px; border-radius: 8px; cursor: pointer; text-decoration: none; color: var(--fg); display: inline-block; }
button:hover, .btn:hover { border-color: var(--muted); }
button.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }
button.ghost, .btn.ghost { background: transparent; }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 22px 0 12px; max-width: 1720px; margin: 0 auto; flex-wrap: wrap; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mark { width: 16px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, var(--brand) 50%, transparent 50%), var(--fg); display: inline-block; }
.top h1 { font-size: 27px; letter-spacing: -.01em; }
.top p { margin: 6px 0 0; color: var(--muted); max-width: 900px; }
.status { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 560px; }
.pill { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; background: var(--panel); }
.pill b { color: var(--fg); font-weight: 600; }

.input { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow); max-width: 1720px; margin: 0 auto; }
.docline { display: flex; gap: 12px; align-items: center; min-width: 0; }
.docicon { width: 30px; height: 38px; border-radius: 4px; border: 1.5px solid var(--muted); position: relative; flex: none; background: var(--soft); }
.docicon::after { content: "PDF"; position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-size: 8px; font-weight: 800; color: var(--muted); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--soft); color: var(--muted); white-space: nowrap; }
.tag.warn { background: var(--amb-soft); color: var(--amb); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.bad { background: var(--bad-soft); color: var(--bad); }
.tag.ext { background: var(--ext-soft); color: var(--ext); }
.tag.norm { background: var(--norm-soft); color: var(--norm); }
.tag.match { background: var(--match-soft); color: var(--match); }
.tag.brand { background: var(--brand-soft); color: var(--brand); }

.intro { max-width: 1400px; margin: 26px auto; }
.zones { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.zone { flex: 1 1 220px; border-radius: 14px; padding: 14px 16px; border: 1px solid var(--line); background: var(--panel); }
.zone h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.zone p { margin: 0; color: var(--muted); font-size: 14px; }
.zone.ext { border-top: 4px solid var(--ext); } .zone.ext h3 { color: var(--ext); }
.zone.norm { border-top: 4px solid var(--norm); } .zone.norm h3 { color: var(--norm); }
.zone.match { border-top: 4px solid var(--match); } .zone.match h3 { color: var(--match); }
.arrow { align-self: center; color: var(--muted); }

main { max-width: 1720px; margin: 16px auto 0; }
.layout { display: grid; grid-template-columns: minmax(300px, 36%) minmax(0, 1fr); gap: 16px; align-items: start; }

/* ---------- the page, with what was read where ---------- */
.viewer { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px; box-shadow: var(--shadow); min-width: 0; }
.viewer-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 8px; }
.page-wrap { position: relative; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; cursor: crosshair; }
.page-wrap img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.hit { position: absolute; border-radius: 2px; pointer-events: none; opacity: 0; transition: opacity .1s; }
.hit.cell { border: 1px solid var(--cell); }
.hit.line { border: 1px solid var(--line-box); }
.show-boxes .hit { opacity: .9; }
.hit.focus { opacity: 1; border: 2px solid var(--focus); background: var(--focus-soft); }
.hit.hl { opacity: 1; border: 2px solid var(--hl); background: var(--hl-soft); box-shadow: 0 0 0 3px var(--hl-soft); z-index: 2; }
.tip { position: fixed; z-index: 10; pointer-events: none; max-width: 420px; background: var(--fg); color: var(--bg); font-size: 13px; padding: 5px 9px; border-radius: 8px; white-space: pre-wrap; word-break: break-word; }
.tip .k { opacity: .7; font-size: 11px; display: block; }
.src { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.src.ocr { background: var(--norm-soft); color: var(--norm); }

/* ---------- lanes of steps ---------- */
.work { min-width: 0; }
.lanes { display: grid; grid-template-columns: 5fr 8fr; gap: 8px; margin-bottom: 12px; }
.lane { border-radius: 12px; padding: 8px 10px 10px; background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.lane.ext { border-top: 4px solid var(--ext); } .lane.match { border-top: 4px solid var(--match); }
.lane-title { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; margin-bottom: 7px; display: flex; justify-content: space-between; gap: 8px; }
.lane.ext .lane-title { color: var(--ext); } .lane.match .lane-title { color: var(--match); }
.lane-title span { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps { display: flex; gap: 4px; }
.step { flex: 1; min-width: 0; text-align: left; border: 1px solid var(--line); border-radius: 9px; padding: 5px 4px 5px 6px; background: var(--panel); font-size: 11.5px; line-height: 1.25; }
.step .n { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--soft); font-size: 11px; font-weight: 700; margin-bottom: 2px; }
.step .t { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step .s { display: block; font-size: 11px; color: var(--muted); min-height: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step.todo { opacity: .45; }
.step.done .n { background: var(--ok); color: #fff; }
.step.running .n { background: var(--amb); color: #fff; animation: pulse 1.2s infinite; }
.step.current { border-color: var(--match); box-shadow: 0 0 0 2px var(--match); }
.lane.ext .step.current { border-color: var(--ext); box-shadow: 0 0 0 2px var(--ext); }
.step.skipped { opacity: .35; }
@keyframes pulse { 50% { opacity: .45; } }

/* ---------- the detail of one step ---------- */
.detail { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 18px 22px 22px; min-height: 460px; min-width: 0; }
.where { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.where.ext { color: var(--ext); } .where.norm { color: var(--norm); } .where.match { color: var(--match); }
.detail h2 { font-size: 22px; margin: 3px 0 6px; }
.lead { color: var(--muted); margin: 0 0 14px; max-width: 900px; }
.navrow { display: flex; gap: 8px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.navrow .grow { flex: 1; }

.box { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; background: var(--bg); min-width: 0; margin-bottom: 12px; }
.box h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.box h4 .tag { text-transform: none; letter-spacing: 0; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 0; font-size: 14px; }
.facts dt { color: var(--muted); } .facts dd { margin: 0; min-width: 0; word-break: break-word; }
pre.text { font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; word-break: break-word; margin: 0; max-height: 420px; overflow: auto; line-height: 1.45; }
details { margin-bottom: 8px; }
details > summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 3px 0; }
details > summary .muted { font-weight: 400; }
.big { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stats { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 12px; }
.stats div { min-width: 90px; } .stats .lbl { font-size: 12px; color: var(--muted); }

table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--soft); }
tr.sel td { background: var(--match-soft); }
tr.hl td { background: var(--hl-soft); }
tr.lead-row td { font-weight: 600; }
.tablewrap { overflow-x: auto; }
td.prod { min-width: 200px; }
td.sku { white-space: nowrap; }

/* OCR tab: the table as read, cells linked to the page */
.tabs { display: flex; gap: 2px; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 10px; flex-wrap: wrap; }
.tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 7px 12px; color: var(--muted); font-weight: 600; font-size: 14px; }
.tabs button.on { color: var(--fg); border-bottom-color: var(--brand); }
.tabs .spacer { flex: 1; }
table.ocr { border-collapse: collapse; font-size: 13px; margin-bottom: 14px; width: max-content; min-width: 100%; }
table.ocr td { border: 1px solid var(--line); padding: 3px 7px; vertical-align: top; max-width: 340px; }
table.ocr td.empty { background: var(--soft); }
.item { cursor: default; border-radius: 3px; transition: background .08s; }
.item.nobox { text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }
.item.hl { background: var(--hl-soft); outline: 2px solid var(--hl); outline-offset: -2px; }
.tcap { font-size: 12px; color: var(--muted); margin: 0 0 4px; }
ul.lines { list-style: none; margin: 0; padding: 0; font-size: 14px; }
ul.lines li { padding: 2px 6px; border-bottom: 1px solid var(--soft); }
.raw-h { font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.timeline { list-style: none; margin: 0 0 12px; padding: 0; }
.timeline li { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 14px; padding: 4px 0; border-bottom: 1px solid var(--soft); }
.timeline .t { color: var(--muted); font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.timeline .sub { color: var(--muted); font-size: 12px; }

.status-chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.status-MATCHED { background: var(--ok-soft); color: var(--ok); }
.status-AMBIGUOUS { background: var(--amb-soft); color: var(--amb); }
.status-UNMATCHED { background: var(--bad-soft); color: var(--bad); }

.chg { display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 9px; border-radius: 8px; background: var(--norm-soft); margin: 0 6px 6px 0; font-size: 13.5px; }
.chg s { color: var(--muted); }
.kw { display: inline-block; font-family: var(--mono); font-size: 12px; padding: 1px 6px; border-radius: 5px; background: var(--soft); margin: 0 4px 4px 0; }
.kw.hit-kw { background: var(--match-soft); color: var(--match); font-weight: 600; }

.rules { display: flex; flex-wrap: wrap; gap: 4px; }
.rule { font-size: 12px; padding: 1px 7px; border-radius: 6px; white-space: nowrap; cursor: help; }
.rule.plus { background: var(--ok-soft); color: var(--plus); }
.rule.minus { background: var(--bad-soft); color: var(--minus); }
.rule b { font-variant-numeric: tabular-nums; }
.bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--soft); min-width: 90px; }
.bar i { display: block; height: 100%; }
.bar i.p { background: var(--plus); opacity: .75; } .bar i.m { background: var(--minus); opacity: .75; }
.why { font-size: 13px; color: var(--muted); }
mark { background: var(--mark); color: inherit; padding: 0 2px; border-radius: 3px; }

.call { border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; margin-bottom: 7px; background: var(--panel); }
.call summary { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--amb); animation: spin 1s linear infinite; display: inline-block; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.decision { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 12px; margin-bottom: 12px; }
.decision.MATCHED { background: var(--ok-soft); } .decision.AMBIGUOUS { background: var(--amb-soft); } .decision.UNMATCHED { background: var(--bad-soft); }
.decision .verdict { font-size: 20px; font-weight: 800; }
.note { border-left: 3px solid var(--amb); padding: 6px 10px; background: var(--amb-soft); border-radius: 0 8px 8px 0; font-size: 14px; margin: 8px 0; }
.note.info { border-color: var(--ext); background: var(--ext-soft); }
.note.brand { border-color: var(--brand); background: var(--brand-soft); }

dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--fg); width: min(900px, 94vw); padding: 20px 22px; }
dialog::backdrop { background: rgb(0 0 0 / .35); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; }
.foot { max-width: 1720px; margin: 24px auto 0; color: var(--muted); font-size: 12.5px; text-align: center; }

@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .viewer { position: static; max-height: none; }
  .lanes { grid-template-columns: 1fr; }
  .arrow { display: none; }
}
@media (max-width: 700px) {
  body { padding: 0 16px 16px; }
  .top h1 { font-size: 22px; }
  .cols { grid-template-columns: 1fr; }
  .steps { flex-wrap: wrap; } .step { flex: 1 1 30%; }
  .detail { padding: 14px; }
}

/* ---------- examples and upload ---------- */
.pickers { max-width: 1720px; margin: 6px auto 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); gap: 12px; align-items: stretch; }
.examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 12px 14px; min-width: 0; }
.card h3 { font-size: 15px; margin-bottom: 4px; }
.card p { margin: 0 0 6px; }
.example { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: start; }
.example img { width: 84px; height: 112px; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--line); background: #fff; }
.example.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.ex-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ex-actions button, .ex-actions .btn { padding: 4px 10px; font-size: 13px; }
.upload { display: flex; flex-direction: column; gap: 8px; }
.drop { border: 1.5px dashed var(--line); border-radius: 10px; padding: 14px; cursor: pointer; font-size: 14px; color: var(--muted); text-align: center; flex: 1; display: grid; place-items: center; min-height: 90px; }
.drop:hover, .drop.over, .drop:focus-visible { border-color: var(--brand); color: var(--fg); background: var(--brand-soft); outline: none; }
.upload.off .drop { cursor: not-allowed; opacity: .55; }
.upload.off .drop:hover { border-color: var(--line); background: none; color: var(--muted); }
.check { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.pill.up { color: var(--ok); border-color: var(--ok); }
.runbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; font-size: 15px; }
.thumbs { display: flex; gap: 6px; overflow-x: auto; min-width: 0; align-items: center; }
.thumb { flex: none; border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; font-size: 12px; background: var(--soft); display: inline-flex; gap: 4px; align-items: center; }
.thumb.on { border-color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.src.text { background: var(--ext-soft); color: var(--ext); }
.placeholder { padding: 60px 20px; text-align: center; }
.note.bad { border-color: var(--bad); background: var(--bad-soft); }
.tabbody { max-height: 62vh; overflow: auto; }
@media (max-width: 1100px) { .pickers { grid-template-columns: 1fr; } .tabbody { max-height: none; } }
.example .noimg { width: 84px; height: 112px; border-radius: 6px; border: 1px solid var(--line); background: var(--soft); display: grid; place-items: center; font-weight: 800; color: var(--muted); font-size: 13px; }

/* ---------- compact picker ---------- */
.picker { max-width: 1720px; margin: 6px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); gap: 10px 18px; align-items: center; padding: 10px 14px; }
.pick-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pick-row select { min-width: 240px; max-width: 100%; }
#ex-blurb { margin: 6px 0 0; }
.stats-inline { color: var(--fg); white-space: nowrap; }
.stats-inline::before { content: "· "; color: var(--muted); }
.picker .upload { display: flex; flex-direction: column; gap: 4px; }
.picker .drop { min-height: 0; padding: 8px 12px; text-align: left; display: block; }
.up-foot { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
@media (max-width: 900px) { .picker { grid-template-columns: 1fr; } .pick-row select { min-width: 0; flex: 1 1 100%; } }

/* ---------- pasted text ---------- */
.small-btn { padding: 2px 9px; font-size: 12.5px; }
.textin { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.textin textarea { width: 100%; font: 13px/1.45 var(--mono); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--bg); color: var(--fg); resize: vertical; }
.page-wrap.as-text { background: var(--panel); cursor: default; max-height: 70vh; overflow: auto; }
ol.pasted { margin: 0; padding: 8px 8px 8px 42px; font: 13px/1.5 var(--mono); }
ol.pasted li { padding: 1px 6px; border-radius: 4px; white-space: pre-wrap; word-break: break-word; }
ol.pasted li.focus { background: var(--focus-soft); outline: 2px solid var(--focus); outline-offset: -2px; }
ol.pasted li::marker { color: var(--muted); font-size: 11px; }