:root{
  --paper:#faf7f2; --ink:#1f1c18; --ink-soft:#5c554c; --rule:#e3dcd1;
  --accent:#8c3a2e; --accent-soft:#f0e4e0; --card:#fffdfa; --shadow:0 1px 2px rgba(60,48,32,.06);
  --serif:"Songti SC","Source Han Serif SC","Noto Serif CJK SC",Georgia,serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
}
:root[data-theme=dark]{
  --paper:#16140f; --ink:#e8e2d6; --ink-soft:#a39a8a; --rule:#33302a;
  --accent:#d98b72; --accent-soft:#2a211d; --card:#1e1b16; --shadow:none;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --paper:#16140f; --ink:#e8e2d6; --ink-soft:#a39a8a; --rule:#33302a;
    --accent:#d98b72; --accent-soft:#2a211d; --card:#1e1b16; --shadow:none;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  -webkit-text-size-adjust:100%}
a{color:inherit}
.top{display:flex;align-items:center;gap:.8rem;padding:.7rem max(1rem,env(safe-area-inset-left));
  border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--paper);z-index:10}
.top .home{font-family:var(--serif);font-weight:600;text-decoration:none;letter-spacing:.06em}
.crumb{color:var(--ink-soft);font-size:.9rem}
.crumb a{text-decoration:none}
.ghost{margin-left:auto;background:none;border:1px solid var(--rule);color:var(--ink-soft);
  border-radius:6px;padding:.25rem .5rem;cursor:pointer;font-size:.95rem}
main{max-width:46rem;margin:0 auto;padding:1.6rem max(1rem,env(safe-area-inset-left)) 5rem}
h1{font-family:var(--serif);font-weight:600;letter-spacing:.02em;line-height:1.35}
.home h1{font-size:1.9rem;margin:.4rem 0 .6rem}
.lede{color:var(--ink-soft);line-height:1.8;margin:0 0 1.8rem;font-size:.95rem}
.vols{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));margin-bottom:2.4rem}
.vol{display:flex;flex-direction:column;gap:.35rem;padding:1.3rem 1rem;background:var(--card);
  border:1px solid var(--rule);border-radius:10px;text-decoration:none;box-shadow:var(--shadow);
  transition:border-color .15s,transform .15s}
.vol:hover{border-color:var(--accent);transform:translateY(-1px)}
.vname{font-family:var(--serif);font-size:1.25rem}
.vmeta{color:var(--ink-soft);font-size:.82rem}
.searchbox input{width:100%;padding:.75rem .9rem;border:1px solid var(--rule);border-radius:8px;
  background:var(--card);color:var(--ink);font-size:1rem;font-family:inherit}
.searchbox input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
#results{margin-top:.8rem}
#results a{display:block;padding:.65rem .2rem;border-bottom:1px solid var(--rule);text-decoration:none}
#results .rt{font-family:var(--serif)}
#results .rx{display:block;color:var(--ink-soft);font-size:.83rem;margin-top:.2rem;line-height:1.6}
#results mark{background:var(--accent-soft);color:var(--accent);padding:0 .1em;border-radius:2px}
.book h1{font-size:1.6rem;margin-bottom:.2rem}
.book .sub{color:var(--ink-soft);font-size:.85rem;margin:0 0 1.4rem}
.toc{list-style:none;padding:0;margin:0}
.toc li{border-bottom:1px solid var(--rule)}
.toc a{display:block;padding:.7rem .2rem;text-decoration:none;font-family:var(--serif);font-size:1.02rem}
.toc a:hover{color:var(--accent)}
.toc .lvl1 a{padding-left:1.2rem}
.toc .lvl2 a{padding-left:2.4rem;font-size:.96rem}
.toc .label{padding:.9rem .2rem .4rem;color:var(--ink-soft);font-size:.8rem;letter-spacing:.1em;border:none}
.doctitle{font-size:1.55rem;margin:.2rem 0 1.5rem;padding-bottom:.9rem;border-bottom:2px solid var(--rule)}
.prose{font-family:var(--serif);font-size:calc(1.06rem * var(--prose-scale,1));line-height:2.0;word-wrap:break-word}
.prose h1,.prose h2,.prose h3{font-size:1.15rem;margin:2.2rem 0 .8rem;padding-left:.6rem;
  border-left:3px solid var(--accent)}
.prose p{margin:0 0 1.1rem}
.prose img{max-width:100%;height:auto;border-radius:6px;display:block;margin:1.2rem auto}
.prose blockquote{margin:1.2rem 0;padding:.2rem 0 .2rem 1rem;border-left:3px solid var(--rule);
  color:var(--ink-soft)}
.prose hr{border:none;border-top:1px solid var(--rule);margin:2rem 0}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem;font-family:var(--sans)}
.prose td,.prose th{border:1px solid var(--rule);padding:.45rem .6rem}
.prose sub,.prose sup{font-size:.72em;color:var(--ink-soft)}
.tablewrap{overflow-x:auto;margin:1.2rem 0}
.asset{display:flex;align-items:center;gap:.75rem;margin:1rem 0;padding:.8rem .9rem;
  background:var(--card);border:1px solid var(--rule);border-radius:9px;font-family:var(--sans);
  box-shadow:var(--shadow);flex-wrap:wrap}
.asset .ico{font-size:1.3rem;line-height:1}
.asset .body{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1 1 11rem}
.asset .name{font-size:.94rem;word-break:break-word}
.asset .meta{font-size:.78rem;color:var(--ink-soft)}
.asset .acts{display:flex;gap:.4rem;flex-shrink:0}
.btn{display:inline-block;padding:.4rem .7rem;border:1px solid var(--rule);border-radius:6px;
  font-size:.83rem;text-decoration:none;white-space:nowrap;background:var(--paper)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:hover{border-color:var(--accent)}
.asset.dropped{color:var(--ink-soft);opacity:.72;border-style:dashed}
.asset.dropped .name{text-decoration:line-through;text-decoration-thickness:1px}
.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;
  padding-top:1.2rem;border-top:1px solid var(--rule);font-size:.9rem}
.pager a{text-decoration:none;color:var(--ink-soft);max-width:48%}
.pager a:hover{color:var(--accent)}
.pager .next{margin-left:auto;text-align:right}
@media(max-width:480px){
  .prose{font-size:1.02rem;line-height:1.95}
  .asset .acts{width:100%;margin-top:.2rem}
}


/* ---- reading progress ---- */
#progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;z-index:30;transition:transform .08s linear}

/* ---- search overlay ---- */
#overlay:not([hidden]){position:fixed;inset:0;background:rgba(20,16,12,.44);z-index:40;
  display:flex;justify-content:center;padding:max(3rem,8vh) 1rem 1rem;backdrop-filter:blur(2px)}
#overlay .sheet{width:min(38rem,100%);max-height:80vh;overflow:auto;background:var(--paper);
  border:1px solid var(--rule);border-radius:12px;padding:1rem;box-shadow:0 12px 40px rgba(40,30,20,.24)}
#overlay input{width:100%;padding:.7rem .85rem;border:1px solid var(--rule);border-radius:8px;
  background:var(--card);color:var(--ink);font-size:1rem;font-family:inherit}
#overlay input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
#ores{margin-top:.6rem}
#ores a{display:block;padding:.6rem .2rem;border-bottom:1px solid var(--rule);text-decoration:none}
#ores .rt{font-family:var(--serif)}
#ores .rx{display:block;color:var(--ink-soft);font-size:.83rem;margin-top:.2rem;line-height:1.6}
#ores mark{background:var(--accent-soft);color:var(--accent);padding:0 .1em;border-radius:2px}

/* ---- image lightbox ---- */
.prose img.zoomable{cursor:zoom-in}
#lightbox:not([hidden]){position:fixed;inset:0;background:rgba(12,10,8,.92);z-index:50;
  display:flex;align-items:center;justify-content:center;padding:1rem;cursor:zoom-out;overflow:auto}
#lightbox img{max-width:100%;max-height:100%;object-fit:contain}

/* ---- floating reading tools (bottom-left; the cross-site widget owns bottom-right) ---- */
#tools:not([hidden]){position:fixed;left:max(.8rem,env(safe-area-inset-left));bottom:1rem;z-index:20;
  display:flex;flex-direction:column;gap:.3rem;opacity:.45;transition:opacity .18s}
#tools:hover,#tools:focus-within,#tools.lift{opacity:1}
#tools button{width:2.2rem;height:2.2rem;border:1px solid var(--rule);border-radius:8px;
  background:var(--card);color:var(--ink-soft);font-size:.78rem;cursor:pointer;
  font-family:var(--sans);line-height:1;box-shadow:var(--shadow)}
#tools button:hover{color:var(--accent);border-color:var(--accent)}
#tools button[data-act=top]{font-size:1rem}
#tools:not(.lift) button[data-act=top]{display:none}

/* ---- toast ---- */
#toast:not([hidden]){position:fixed;left:50%;transform:translateX(-50%);bottom:1.2rem;z-index:35;
  background:var(--ink);color:var(--paper);padding:.55rem .9rem;border-radius:999px;
  font-size:.85rem;display:flex;align-items:center;gap:.6rem;box-shadow:0 6px 24px rgba(30,22,14,.3)}
#toast button{background:none;border:none;color:var(--accent);font:inherit;cursor:pointer;
  text-decoration:underline;padding:0}

@media print{
  .top,#tools,#progress,#toast,#bdfz-unified-widget,.pager{display:none!important}
  .prose{font-size:11pt;line-height:1.7}
  .asset{border:1px solid #bbb}
}
@media(max-width:480px){
  #tools{opacity:.9}
  #tools button{width:2.5rem;height:2.5rem}
}

[hidden]{display:none!important}