:root { --bg: #f6f6f4; --card: #fff; --ink: #1d1d1b; --muted: #6b6b66; --line: #e2e2dc; --accent: #1f5f8b; --warn: #a33; --mark: #ffe58a; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #161615; --card: #1f1f1d; --ink: #ecece8; --muted: #a0a09a; --line: #34342f; --accent: #7fb6de; --warn: #f08a8a; --mark: #6b5a12; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, sans-serif; background: var(--bg); color: var(--ink); padding-bottom: 3rem; }
a { color: var(--accent); }
.top { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; padding: .6rem 1rem; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.brand { font-weight: 700; text-decoration: none; color: var(--ink); }
.search { flex: 1 1 16rem; }
.search input { width: 100%; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); }
nav a { margin-right: .75rem; }
main { padding: 1rem; max-width: 1400px; margin: 0 auto; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1rem; margin-bottom: 1rem; overflow-x: auto; }
.narrow { max-width: 24rem; margin: 3rem auto; }
.narrow label { display: block; margin: .6rem 0; }
.narrow input { width: 100%; padding: .45rem; }
button { padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .3rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, monospace; font-size: .92em; }
.muted { color: var(--muted); }
.error { color: var(--warn); }
mark { background: var(--mark); color: inherit; }
.thumbs { display: flex; flex-wrap: wrap; gap: .6rem; }
.thumb { display: flex; flex-direction: column; width: 150px; text-decoration: none; color: var(--ink); font-size: .85em; }
.thumb img { width: 150px; height: 200px; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.pending { display: flex; width: 150px; height: 200px; align-items: center; justify-content: center; border: 1px dashed var(--line); color: var(--muted); }
.hit { display: flex; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.hit img { width: 70px; height: 95px; object-fit: contain; background: #fff; flex: none; }
.pagebar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .6rem; }
.viewer-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 1rem; }
#viewer { height: calc(100vh - 11rem); min-height: 420px; background: #2a2a28; border-radius: 8px; }
.side { max-height: calc(100vh - 11rem); overflow-y: auto; }
.lines { padding-left: 1.6rem; margin: 0; }
.lines li { cursor: pointer; padding: .1rem .2rem; border-radius: 4px; }
.lines li.on, .lines li:hover { background: var(--mark); }
.ocrbox { border: 1px solid rgba(31, 95, 139, .8); background: rgba(31, 95, 139, .08); }
.ocrbox.on { border: 2px solid #e0a000; background: rgba(255, 200, 0, .25); }
.hidden-boxes .ocrbox { display: none; }
.inline { display: inline; }
.statusbar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; flex-wrap: wrap; gap: 1.2rem; padding: .4rem 1rem; background: var(--card); border-top: 1px solid var(--line); font-size: .85em; color: var(--muted); }
@media (max-width: 800px) {
  .viewer-wrap { grid-template-columns: 1fr; }
  #viewer { height: 70vh; }
  .side { max-height: none; }
}

.adj td, .adj th { vertical-align: top; }
.adj tr.differs th, .adj tr.differs td { background: rgba(224, 160, 0, .18); }
.part { margin: .2rem 0; font-size: .92em; }
.sticky { position: sticky; bottom: 0; background: var(--card); padding: .5rem 0; border-top: 1px solid var(--line); }
#entry label { display: block; margin: .3rem 0; }
#entry input.fld, #entry select { width: 100%; padding: .3rem; }
.button { display: inline-block; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; }
fieldset { border: 1px solid var(--line); border-radius: 6px; margin: .5rem 0; }