:root{
  --paper:#F5F6F8; --paper-2:#EEF0F3; --card:#FFFFFF;
  --ink:#1B2230; --ink-soft:#4A5363; --ink-faint:#687182;
  --line:#D9DDE4; --line-soft:#E8EBEF;
  --accent:#1F4E79; --accent-deep:#163A5C; --accent-tint:#E4ECF5;
  --btn-a:#1F4E79; --btn-b:#163A5C; --on-accent:#FFFFFF;
  --mark:#FFF1B8; --mark-ink:inherit;
  --warn:#8A3B12; --warn-tint:#F9E6DA;
  --glass:rgba(255,255,255,.7);
  --serif:"Frank Ruhl Libre",Georgia,serif;
  --sans:"Assistant",system-ui,sans-serif;
  --shadow:0 1px 2px rgba(27,34,48,.05),0 8px 24px rgba(20,30,50,.06);
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --paper:#12161D; --paper-2:#222935; --card:#1B212B;
    --ink:#E6E9EE; --ink-soft:#B4BCC9; --ink-faint:#8E97A6;
    --line:#2D3542; --line-soft:#252C37;
    --accent:#7FB0E0; --accent-deep:#A9CBEC; --accent-tint:#1D2B3B;
    --btn-a:#3272AE; --btn-b:#1F4E79;
    --mark:#5A4A12; --mark-ink:#F4E9C4;
    --warn:#F2A07A; --warn-tint:#3B2419;
    --glass:rgba(27,33,43,.7);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{font-family:var(--sans); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit; color:inherit}
[hidden]{display:none !important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{max-width:1440px; margin:0 auto; padding:0 34px 40px; min-height:100%; display:flex; flex-direction:column}

header.top{direction:ltr; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding:22px 0 0}
.brand{justify-self:start; display:flex; align-items:center; gap:7px; font-family:var(--serif); font-weight:700; color:var(--ink); text-decoration:none; white-space:nowrap}
.brand .glyph{width:46px; height:46px; display:grid; place-items:center; color:var(--accent)}
.brand .glyph svg{width:44px; height:44px}
.brand .wm{font-size:19px} .brand .tld{color:var(--accent)}
.lang-toggle{justify-self:center; display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--glass)}
.lang-toggle .seg{font-size:13px; font-weight:700; border:0; background:transparent; color:var(--ink-faint); padding:6px 13px; cursor:pointer}
.lang-toggle .seg:hover{color:var(--accent)}
.lang-toggle .seg.active{background:linear-gradient(150deg,var(--btn-a),var(--btn-b)); color:var(--on-accent)}
.desk-name{justify-self:end; font-family:var(--serif); font-weight:700; color:var(--accent)}

.shell{flex:1; display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; margin-top:24px; align-items:start}
@media (max-width:900px){ .shell{grid-template-columns:1fr} .wrap{padding:0 16px 32px} }
@media (max-width:560px){ .desk-name{display:none} }

.col{display:flex; flex-direction:column; gap:16px; min-width:0}
.hero{text-align:center; padding:6vh 0 8px}
.hero h1{font-family:var(--serif); font-weight:900; font-size:clamp(30px,4vw,44px); margin-bottom:8px}
.hero p{font-family:var(--serif); font-size:18px; color:var(--ink-soft)}

.composer{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; box-shadow:var(--shadow)}
.composer textarea{width:100%; border:0; outline:0; resize:vertical; background:transparent; font-family:var(--serif); font-size:18px; line-height:1.6; min-height:72px}
.bar{display:flex; align-items:center; gap:10px; margin-top:6px}
.grow{flex:1}
.note{font-size:13.5px; color:var(--warn)}
button.primary{border:0; border-radius:999px; padding:8px 22px; font-weight:700; cursor:pointer; color:var(--on-accent); background:linear-gradient(150deg,var(--btn-a),var(--btn-b))}
button.primary:disabled{opacity:.55; cursor:progress}
button.ghost{border:1px solid var(--line); background:transparent; border-radius:999px; padding:5px 12px; font-size:13px; font-weight:600; color:var(--ink-soft); cursor:pointer}
button.ghost:hover{color:var(--accent); border-color:var(--accent)}

.thread{display:flex; flex-direction:column; gap:18px}
.turn{display:flex; flex-direction:column; gap:8px}
.turn .q{align-self:flex-start; max-width:85%; background:var(--accent-tint); color:var(--accent-deep); border-radius:12px; padding:8px 14px; font-family:var(--serif); font-size:17px; white-space:pre-wrap}
.turn .a{background:var(--card); border:1px solid var(--line-soft); border-radius:12px; padding:14px 18px; font-family:var(--serif); font-size:17.5px; line-height:1.8}
.turn .a .muted, .turn .meta{font-family:var(--sans); font-size:13px; color:var(--ink-faint)}
.sentence{display:block; margin-bottom:6px}
.sentence.unsupported .stext{text-decoration:underline dashed var(--warn); text-underline-offset:5px}
.flag{display:inline-block; margin-inline-start:6px; font-family:var(--sans); font-size:12px; font-weight:700; color:var(--warn); background:var(--warn-tint); border-radius:999px; padding:0 8px; vertical-align:middle}
.chip{display:inline-block; margin-inline-start:6px; font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--accent); background:var(--accent-tint); border:1px solid transparent; border-radius:6px; padding:0 6px; cursor:pointer; vertical-align:middle; max-width:22em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chip:hover, .chip:focus-visible{border-color:var(--accent)}
.msg{font-family:var(--sans); font-size:15px; color:var(--warn); background:var(--warn-tint); border-radius:8px; padding:10px 14px; white-space:pre-wrap}
.spin{display:inline-block; width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; vertical-align:middle; margin-inline-end:6px}
@keyframes spin{to{transform:rotate(360deg)}}

.sources{position:sticky; top:16px; display:flex; flex-direction:column; gap:14px}
.sources h2{font-family:var(--serif); font-size:20px; color:var(--accent-deep)}
.box{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:8px}
.box h3{font-size:14px; font-weight:700; color:var(--ink-soft)}
.box input[type=search]{width:100%; border:1px solid var(--line); border-radius:8px; padding:7px 10px; background:var(--paper); font-family:var(--serif); font-size:16px}
.box input[type=search]:focus{outline:2px solid var(--accent); outline-offset:-1px}
ul{list-style:none}
.results{display:flex; flex-direction:column; gap:2px; max-height:240px; overflow-y:auto}
.results li, .books li{display:flex; align-items:center; gap:8px; padding:4px 2px; border-bottom:1px solid var(--line-soft)}
.t{flex:1; min-width:0; font-family:var(--serif); font-size:15.5px}
.by{display:block; font-family:var(--sans); font-size:12px; color:var(--ink-faint)}
.results .empty{color:var(--ink-faint); font-size:13px; border:0}
.books .t{color:var(--accent-deep); font-weight:500}
.icon{border:0; background:none; cursor:pointer; color:var(--accent); font-weight:700; font-size:13px; padding:2px 6px; border-radius:6px}
.icon:hover{background:var(--accent-tint)}
.icon.danger{color:var(--warn)}
.icon.danger:hover{background:var(--warn-tint)}

.drop{border:1.5px dashed var(--line); border-radius:10px; padding:16px 10px; text-align:center; cursor:pointer; color:var(--ink-soft); font-weight:600; display:flex; flex-direction:column; gap:2px}
.drop .sub{font-size:12px; font-weight:400; color:var(--ink-faint)}
.drop.over, .drop:focus-visible{border-color:var(--accent); background:var(--accent-tint); color:var(--accent-deep); outline:0}
.files{display:flex; flex-direction:column; gap:10px}
.file{display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding-bottom:8px; border-bottom:1px solid var(--line-soft)}
.file .name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:600}
.file .st{font-size:12px; color:var(--ink-faint)}
.file .warn, .file .err{flex-basis:100%; font-size:12.5px; color:var(--warn)}
.preload{flex-basis:100%; min-width:0}
.preload-text{font-size:12px; color:var(--ink-faint); margin-bottom:6px}
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(22px,1fr)); gap:4px; max-height:180px; overflow-y:auto; padding:1px}
.tile{position:relative; aspect-ratio:17 / 22; border:1px solid var(--line); border-radius:2px; background:var(--paper-2); overflow:hidden; padding:0; cursor:default}
.tile.text, .tile.ocr{border-color:var(--accent); background:var(--card) repeating-linear-gradient(to bottom,transparent 0 3px,var(--line) 3px 4px) content-box; padding:4px 3px; cursor:pointer}
.tile.ocr_running{border-color:var(--accent)}
.tile.ocr_running::after{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--accent); box-shadow:0 0 6px var(--accent); animation:scan 1.2s linear infinite}
@keyframes scan{from{top:0} to{top:calc(100% - 3px)}}
.tile.ocr_empty, .tile.not_ocred{border-style:dashed}
.tile.ocr_error{border-style:dashed; border-color:var(--warn)}
@media (prefers-reduced-motion:reduce){
  .tile.ocr_running::after{animation:none; top:auto; bottom:0; height:100%; opacity:.25; box-shadow:none}
  .spin{animation:none}
}

.viewer{position:fixed; top:0; bottom:0; inset-inline-end:0; width:min(560px,100vw); background:var(--card); border-inline-start:1px solid var(--line); box-shadow:var(--shadow); z-index:10; display:flex; flex-direction:column; padding:18px 20px; gap:12px}
.viewer header{display:flex; align-items:flex-start; gap:12px}
.viewer h2{flex:1; font-family:var(--serif); font-size:20px; color:var(--accent-deep)}
.scan-link{color:var(--accent); font-weight:600; font-size:14px}
.viewer-text{flex:1; overflow-y:auto; font-family:var(--serif); font-size:18px; line-height:1.9; white-space:pre-wrap; border-top:1px solid var(--line-soft); padding-top:10px}
.viewer-text mark{background:var(--mark); color:var(--mark-ink); border-radius:3px; padding:0 2px}