/* Manchu OCR · browser reader. Palette and layout follow Manchu_OCR_Standalone/ocr_app_web/app.css (paper workspace). */
:root{--paper:#f6f8fb;--ink:#1c2a41;--muted:#64748b;--line:#e2e8f0;--green:#21395d;--gold:#526986;--flag:#b5541c;--box:#2458a6;--box-small:#278151;--label:#173b73;
  --mnc:"Noto Sans Mongolian","NotoSansMongolian","Mongolian Baiti",serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
header{display:flex;align-items:center;gap:36px;padding:22px 32px;background:#ffffff;border-bottom:1px solid var(--line)}
h1{margin:0;font:28px Georgia,serif}h1 span{font-size:22px;color:var(--gold);margin-left:15px}
.eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted)}header p{color:var(--muted)}.local{margin-left:auto;color:var(--green);font-size:12px}
main{display:grid;grid-template-columns:310px minmax(0,1fr);gap:24px;max-width:1800px;margin:auto;padding:24px}
aside section,article{background:#ffffff;border:1px solid var(--line);border-radius:10px}aside section{padding:18px;margin-bottom:16px}
h2{font-size:12px;color:var(--gold);letter-spacing:1px;margin:0 0 15px}h2 span{color:var(--ink);font-size:15px;letter-spacing:0;margin-left:8px}
label{display:block;font-size:12px;margin:12px 0 4px}
input[type=number],input:not([type]),select{width:100%;font:inherit;padding:9px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hint,small{font-size:11px;color:var(--muted)}
.check{display:flex;align-items:center;gap:8px;font-size:13px}
.upload{cursor:pointer;border:1px dashed #8caa99;background:#f7f9fc;text-align:center;padding:20px 10px;border-radius:6px;font-size:14px}.upload span{display:block;font-size:10px;margin-top:7px;color:var(--muted)}
#file{width:100%;font-size:11px}
.samples{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}.samples button{margin:0;padding:7px 8px;font-size:12px}.samples button b{display:block;font-size:11px;letter-spacing:1px;color:var(--green)}.samples button i{font-style:normal;font-size:10px;color:var(--muted)}
button{font:inherit;cursor:pointer;background:#f7f9fc;color:var(--ink);padding:9px 12px;border:1px solid var(--line);border-radius:5px}button:hover{background:#e8eef6}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
aside button{width:100%;margin-top:10px}button.primary{background:var(--green);color:white;border-color:var(--green)}button.primary:hover{background:#1b4234}button:disabled{opacity:.4;cursor:default}
details{margin-top:14px}summary{font-size:12px;cursor:pointer;color:var(--muted)}
.model{display:flex;flex-direction:column;gap:4px;font-size:12px;padding:10px 12px;border-radius:5px;background:#f0f4f9;margin-bottom:4px}.model progress{width:100%;height:6px}.model b{font-weight:600}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11px;color:var(--muted);margin-top:12px}.sw{display:inline-block;width:14px;height:10px;border:2px solid var(--box);margin-right:5px;vertical-align:middle}.sw.f{border-color:var(--flag);border-style:dashed}.sw.s{border-color:var(--box-small)}
#runlog{font:11px/1.45 ui-monospace,Menlo,monospace;white-space:pre-wrap;color:var(--muted);max-height:220px;overflow:auto;margin:8px 0 0}
article{padding:20px;align-self:start;min-height:700px}
.toolbar{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
#pages{display:flex;flex-wrap:wrap;gap:6px}#pages button{padding:5px 11px;font-size:12px}#pages button.selected{background:var(--green);color:white}#pages button.done:after{content:' ✓';font-size:10px}
.zoom{display:flex;gap:7px;align-items:center;margin:0}.zoom select{padding:5px;width:80px}
.readerControls{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:12px}.readerControls label{display:flex;align-items:center;gap:8px;margin:0}.readerControls select{width:auto;padding:6px}
.tabs{display:flex;gap:4px;margin:18px 0 12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px}.tabs button{border:0;background:none;font-size:12px}.tabs button[aria-selected=true]{background:#e8eef6;color:var(--green)}
#status{font-size:13px;padding:10px 12px;border-radius:5px;background:#f0f4f9}#status.error{background:#fff0e8;color:#983b21}
#status.busy:before{content:'◌ ';display:inline-block;margin-right:6px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#status.busy:before{animation:none}}
#meta{margin:10px 0}
#empty{text-align:center;padding:75px 10px;color:var(--muted)}#empty>span{font-size:36px;color:var(--gold);font-family:var(--mnc)}#empty h2{font:24px Georgia,serif;color:var(--ink);margin-top:15px}
#reader.combined{display:grid;gap:18px;align-items:start}#reader.combined.side{grid-template-columns:minmax(0,1.8fr) minmax(270px,1fr)}#reader.combined.stacked{grid-template-columns:minmax(0,1fr)}
.readerPanel{min-width:0;border:1px solid var(--line);border-radius:6px;padding:12px}.readerPanel>.tabs{margin-top:0}.readerPanel>.check{margin:0 0 12px}
#viewport{overflow:auto;max-height:78vh;border:1px solid var(--line);background:#eef2f6}#imageWrap{position:relative;width:100%;line-height:0}#pageImage{width:100%;display:block}
#boxes{position:absolute;inset:0;pointer-events:none}
.wordBox{position:absolute;background:transparent;border:1px solid var(--box);border-radius:0;padding:0;pointer-events:auto;overflow:visible}
.wordBox.small{border-color:var(--box-small)}.wordBox.flag{border-color:var(--flag);border-style:dashed}
.wordBox:hover,.wordBox:focus{background:#d4a43b30;outline:2px solid #b88420;z-index:10;cursor:help}
.imageLabel{position:absolute;left:-1px;bottom:100%;background:#fffffff2;color:var(--label);padding:2px 3px;font:600 var(--label-size,18px)/1.1 Arial,sans-serif;white-space:nowrap;box-shadow:0 0 1px var(--box);pointer-events:auto;text-transform:lowercase}
.wordBox.flag .imageLabel{color:var(--flag)}.wordBox:hover .imageLabel,.wordBox:focus .imageLabel{background:#fff2ca}
#reader.combined #textView{max-height:78vh;overflow:auto;padding:14px;font-size:18px;line-height:1.7}#reader.combined.stacked #textView{max-height:none}
#textView{padding:20px;background:#f8fafc;border:1px solid var(--line);font:18px/2 Georgia,serif;white-space:pre-wrap}
.romanLine{border-bottom:1px solid #e6e9df;padding:6px 0}.romanLine .column{font:10px sans-serif;color:var(--muted);margin-right:15px}.romanLine.small{font-size:.85em;padding-left:24px}
.token{font:inherit;border:0;border-bottom:1px dotted #8da38e;border-radius:0;background:none;padding:0 2px}.token:hover{background:#e8eef6}.token.flag{color:var(--flag)}
#manchuDirectionControl{font-size:11px;margin:0 0 12px}#manchuDirectionControl[hidden]{display:none}#manchuDirectionControl select{width:auto;margin-left:8px;padding:5px}
#reader.combined #textView.manchuText{font-family:var(--mnc);font-size:30px;line-height:1.65;white-space:normal;max-height:72vh;overflow:auto;min-height:450px}
.manchuColumns{display:flex;align-items:flex-start;gap:10px;width:max-content;min-width:100%}
.manchuColumn{writing-mode:vertical-lr;text-orientation:mixed;direction:ltr;white-space:nowrap;flex:none;width:52px;height:max-content;min-height:400px;border-right:1px solid var(--line);padding:8px 0}
.manchuColumn .column{font:10px sans-serif;color:var(--muted);writing-mode:horizontal-tb;display:block;margin-bottom:6px}
.manchuToken{font:inherit;writing-mode:inherit;text-orientation:inherit;color:var(--ink);border:0;border-radius:0;padding:0;background:transparent;vertical-align:baseline}.manchuToken:hover{background:#e8eef6}
.manchuToken.small{font-size:.72em}.manchuToken.flag{color:var(--flag)}
#downloads{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}#downloads[hidden]{display:none}#downloads a{font-size:12px;color:var(--green);padding:6px 10px;border:1px solid var(--line);border-radius:4px;text-decoration:none;cursor:pointer}#downloads a:hover{background:#e8eef6}
.dictionary{margin-top:25px;border-top:1px solid var(--line);padding-top:20px}.dictTitle{display:flex;justify-content:space-between;align-items:center}.dictTitle h2{margin:0;color:var(--ink);letter-spacing:0;font-size:16px}.dictTitle span{color:var(--gold);font-size:14px}
#lookupForm{display:flex;gap:8px;margin:12px 0}#lookupForm button{white-space:nowrap}#definition{font-size:14px}
.match{margin:12px 0;border-left:3px solid var(--line);padding-left:12px}.match h3{margin:0;font-size:17px}.match p{margin:6px 0}
.badge{display:inline-block;border-radius:3px;font:11px sans-serif;background:#e8eef6;color:var(--green);padding:4px 6px}.badge.lemma,.badge.suggestion{background:#edf2f8;color:#825b1d}.badge.none{background:#eef2f6;color:var(--muted)}.reason{font-size:11px;color:var(--muted)}
#tooltip{position:fixed;z-index:20;pointer-events:none;max-width:360px;max-height:220px;overflow:hidden;background:#1e293b;color:white;box-shadow:0 4px 18px #0003;padding:12px;border-radius:6px;font-size:12px;white-space:pre-line}#tooltip[hidden]{display:none}
body.dragging:after{content:'Drop page images to open them';position:fixed;inset:15px;border:3px dashed var(--green);background:#eff4fbf2;z-index:50;display:grid;place-items:center;font-size:28px;pointer-events:none}
@media(max-width:1250px){#reader.combined.side{grid-template-columns:minmax(0,1fr)}#reader.combined #textView{max-height:none}}
@media(max-width:900px){main{grid-template-columns:1fr;padding:12px}aside{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}aside section{margin:0}header{padding:16px;gap:12px}header p{display:none}h1{font-size:22px}.local{font-size:10px}article{padding:12px}}


/* Shared Manchu OCR beta visual language: quiet slate surfaces, fine borders, navy actions. */
:root{--surface:#fff;--subtle:#f7f9fc;--soft:#edf2f8;--line-strong:#cbd5e1;--canvas:#eef2f6;color-scheme:light}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px clamp(18px,4vw,52px);background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 1px 3px #0f172a08}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;min-width:0}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#edf2f8;color:var(--green);font:24px/1 var(--mnc)}
.brand-copy{display:flex;flex-direction:column;line-height:1.2}.brand-copy .eyebrow{font-size:9px;letter-spacing:2px}.brand-copy strong{font:600 16px/1.25 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.2px}.brand-copy em{font-style:normal;font-weight:400;color:var(--muted)}
.header-actions{display:flex;align-items:center;gap:24px}.header-actions .local{display:flex;align-items:center;gap:8px;margin:0;color:var(--muted);font-size:12px}.header-actions .local i{width:8px;height:8px;border-radius:50%;background:#248466;box-shadow:0 0 0 3px #24846618}
.about-link{color:var(--ink);font-size:13px;text-decoration:none}.about-link:hover{color:var(--green)}
button.theme-toggle{width:36px;height:36px;margin:0;padding:0;border-color:var(--line);border-radius:9px;background:var(--surface);font-size:16px;color:var(--ink)}
body{background:var(--paper)}main{max-width:1520px;padding:28px clamp(12px,3vw,36px)}
aside section,article{background:var(--surface);border-color:var(--line);border-radius:12px;box-shadow:0 1px 2px #0f172a08}
aside section{padding:20px}article{padding:22px}.readerPanel{border-radius:9px}
.upload{border-color:var(--line-strong);background:var(--subtle);border-radius:9px}.upload:hover{border-color:var(--green);background:var(--soft)}
button{border-radius:7px;transition:background-color .15s,border-color .15s,color .15s}button.primary{background:#1e3152;border-color:#1e3152}button.primary:hover{background:#15243d;border-color:#15243d}
#status{border:1px solid var(--line);background:var(--subtle);border-radius:8px}#status.error{border-color:#f4c7b8}
.model{background:var(--subtle);border:1px solid var(--line);border-radius:8px}.tabs button[aria-selected=true]{background:#e8eef6;color:var(--green);border-radius:6px}
#viewport{background:var(--canvas);border-radius:8px}.readerPanel,#textView{border-radius:8px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #526986;outline-offset:2px}
@media(max-width:900px){.site-header{padding:13px 16px}.header-actions{gap:12px}.header-actions .local{font-size:0}.header-actions .local i{width:9px;height:9px}.about-link{font-size:12px}main{padding-top:16px}}
@media(max-width:520px){.site-header{align-items:flex-start}.brand-mark{width:34px;height:34px}.brand-copy strong{font-size:14px}.header-actions{gap:10px}.header-actions .local{display:none}.about-link{display:none}}
:root[data-theme="dark"]{--paper:#0e1726;--ink:#e6edf7;--muted:#9aa9bd;--line:#26364c;--green:#a8c4ed;--gold:#9cb4d2;--surface:#142033;--subtle:#18263b;--soft:#21324a;--line-strong:#3a4d67;--canvas:#0b1422;color-scheme:dark}
:root[data-theme="dark"] body,:root[data-theme="dark"] header,:root[data-theme="dark"] aside section,:root[data-theme="dark"] article,:root[data-theme="dark"] .readerPanel,:root[data-theme="dark"] .dictionary{background:var(--surface);color:var(--ink)}
:root[data-theme="dark"] body{background:var(--paper)}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] button,:root[data-theme="dark"] #textView,:root[data-theme="dark"] #status,:root[data-theme="dark"] .model,:root[data-theme="dark"] .upload{background:var(--subtle);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] button:hover,:root[data-theme="dark"] .tabs button[aria-selected=true],:root[data-theme="dark"] .token:hover,:root[data-theme="dark"] .manchuToken:hover{background:var(--soft);color:var(--ink)}
:root[data-theme="dark"] button.primary,:root[data-theme="dark"] #pages button.selected{background:#d7e5f7;color:#12213a;border-color:#d7e5f7}
:root[data-theme="dark"] #viewport{background:var(--canvas)}:root[data-theme="dark"] #empty h2,:root[data-theme="dark"] .brand,:root[data-theme="dark"] .dictTitle h2,:root[data-theme="dark"] .manchuToken{color:var(--ink)}
:root[data-theme="dark"] .brand-mark{background:var(--soft)}:root[data-theme="dark"] .about-link{color:var(--ink)}
:root[data-theme="dark"] .imageLabel{background:#142033f2;color:#b9d0ef}:root[data-theme="dark"] #tooltip{background:#e6edf7;color:#142033}
:root[data-theme="dark"] .badge,:root[data-theme="dark"] .badge.lemma,:root[data-theme="dark"] .badge.suggestion,:root[data-theme="dark"] .badge.none{background:var(--soft);color:var(--ink)}


/* Keep the Lite reader on the same design tokens as manchu-ocr-frontend. */
:root{--paper:oklch(0.98 0.005 260);--ink:oklch(0.15 0.02 260);--muted:oklch(0.50 0.02 260);--line:oklch(0.88 0.02 260);--green:oklch(0.35 0.12 260);--gold:oklch(0.60 0.08 80);--flag:oklch(0.55 0.18 25);--box:oklch(0.35 0.12 260);--box-small:oklch(0.55 0.10 200);--label:oklch(0.25 0.02 260);--surface:oklch(0.995 0.003 260);--subtle:oklch(0.94 0.01 260);--soft:oklch(0.92 0.01 260);--line-strong:oklch(0.88 0.02 260);--canvas:oklch(0.94 0.01 260);color-scheme:light}
:root[data-theme="dark"]{--paper:oklch(0.14 0.02 260);--ink:oklch(0.93 0.01 260);--muted:oklch(0.60 0.02 260);--line:oklch(0.28 0.02 260);--green:oklch(0.70 0.10 260);--gold:oklch(0.90 0.06 80);--flag:oklch(0.60 0.16 25);--box:oklch(0.70 0.10 260);--box-small:oklch(0.55 0.08 200);--label:oklch(0.88 0.01 260);--surface:oklch(0.18 0.02 260);--subtle:oklch(0.22 0.02 260);--soft:oklch(0.22 0.02 260);--line-strong:oklch(0.28 0.02 260);--canvas:oklch(0.12 0.02 260);color-scheme:dark}
body{background:var(--paper);color:var(--ink)}.site-header{background:var(--surface);border-color:var(--line)}
aside section,article,.readerPanel{background:var(--surface);border-color:var(--line)}
.brand-mark{background:var(--subtle);color:var(--green)}.brand-copy em,.header-actions .local{color:var(--muted)}.about-link{color:var(--ink)}
.site-footer{display:flex;align-items:center;gap:18px;padding:12px clamp(18px,4vw,52px);border-top:1px solid var(--line);background:color-mix(in oklch,var(--subtle) 35%,var(--surface));color:var(--muted);font-size:12px}.site-footer span:first-child{color:var(--ink);font-weight:500}.site-footer span:nth-child(2){margin-left:auto}.site-footer a{color:var(--muted);text-decoration:none}.site-footer a:hover{color:var(--ink)}
button, input[type=number],input:not([type]),select{background:var(--surface);color:var(--ink);border-color:var(--line)}button{background:var(--subtle)}button:hover{background:var(--soft)}button.primary{background:oklch(0.35 0.12 260);color:oklch(0.98 0.005 260);border-color:oklch(0.35 0.12 260)}button.primary:hover{filter:brightness(.92)}
.upload,.model,#status{background:var(--subtle);border-color:var(--line)}.upload:hover{background:var(--soft)}#status.error{background:color-mix(in oklch,oklch(0.55 0.18 25) 10%,var(--surface));color:oklch(0.45 0.16 25)}
#textView{background:var(--surface);color:var(--ink);border-color:var(--line)}#viewport{background:var(--canvas)}.tabs button[aria-selected=true],.badge{background:var(--soft);color:var(--ink)}.badge.lemma,.badge.suggestion{background:var(--accent,oklch(0.92 0.06 80));color:oklch(0.25 0.06 80)}
#empty h2,.dictTitle h2,.manchuToken{color:var(--ink)}.token,.manchuToken{border-color:var(--line-strong)}.token:hover,.manchuToken:hover{background:var(--soft)}
:root[data-theme="dark"] button.primary,:root[data-theme="dark"] #pages button.selected{background:oklch(0.70 0.10 260);color:oklch(0.14 0.02 260);border-color:oklch(0.70 0.10 260)}
:root[data-theme="dark"] #status.error{background:color-mix(in oklch,oklch(0.60 0.16 25) 18%,var(--surface));color:oklch(0.83 0.08 25)}
:root[data-theme="dark"] .badge.lemma,:root[data-theme="dark"] .badge.suggestion{background:oklch(0.30 0.06 80);color:oklch(0.90 0.06 80)}
@media(max-width:700px){.site-footer{flex-wrap:wrap;gap:8px 14px}.site-footer span:nth-child(2){order:3;flex-basis:100%;margin-left:0}}