:root{
  --desk:#e6dfd0;--desk-2:#d9d0bd;--paper:#f8f2e4;--paper-2:#efe5cf;--paper-edge:#e2d6bb;
  --ink:#2a2420;--ink-2:#6a5f53;--ink-3:#8b7f70;--line:#cfc1a4;--accent:#9e3426;--accent-ink:#fff8ee;
  --bar:#f3ecdc;--shadow:rgba(60,40,20,.28);--gutter:rgba(80,55,25,.16);--cast:rgba(30,20,10,.42);
  --card:#fbf7ee;--flash:rgba(196,120,40,.28);--pan-bg:rgba(150,120,70,.07);--pan-line:rgba(150,120,70,.32);--ok:#2f6b3a;
  --font:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
  color-scheme:light;
}
html[data-theme=dark]{
  --desk:#14110e;--desk-2:#0e0c0a;--paper:#29241e;--paper-2:#221e19;--paper-edge:#3a3329;
  --ink:#e6dac6;--ink-2:#b0a28c;--ink-3:#8f826f;--line:#4a4135;--accent:#e2a65a;--accent-ink:#1b150f;
  --bar:#1c1915;--shadow:rgba(0,0,0,.6);--gutter:rgba(0,0,0,.38);--cast:rgba(0,0,0,.6);
  --card:#211d18;--flash:rgba(226,166,90,.25);--pan-bg:rgba(230,200,150,.06);--pan-line:rgba(230,200,150,.22);--ok:#8fcf98;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--desk);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.btn{background:transparent;border:1px solid var(--line);border-radius:6px;padding:5px 12px;cursor:pointer;font-size:14px;line-height:1.4;color:var(--ink)}
.btn:hover{border-color:var(--ink-3);background:var(--paper-2)}
.btn:focus-visible,.card:focus-visible,.nav:focus-visible,.th:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:disabled{opacity:.45;cursor:default}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

.bar{position:fixed;top:0;left:0;right:0;height:48px;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--bar);border-bottom:1px solid var(--line);z-index:30}
.bar-title{flex:1;margin:0;font-size:17px;font-weight:600;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tools{display:flex;gap:6px}

.shelf{padding:72px 24px 40px;max-width:1240px;margin:0 auto}
.shelf-hd{display:flex;align-items:baseline;gap:14px;margin:0 0 18px}
.shelf-hd h2{margin:0;font-size:24px;letter-spacing:.12em}
.shelf-sub{margin:0;color:var(--ink-2);font-size:14px}
.shelf-status{color:var(--ink-2);margin:8px 0 16px;display:flex;gap:12px;align-items:center;min-height:0}
.shelf-status:empty{display:none}
.err-t{color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 22px}
.card{display:flex;flex-direction:column;gap:8px;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.cover{position:relative;display:block;aspect-ratio:3/4;border-radius:3px 6px 6px 3px;overflow:hidden;background:var(--paper-2);box-shadow:0 2px 0 var(--paper-edge),0 8px 18px var(--shadow);transition:transform .2s ease}
.cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7%;background:linear-gradient(to right,rgba(0,0,0,.18),rgba(0,0,0,0));z-index:1}
.bk-book-cover{transition:transform .2s ease}
.card:hover .bk-book-cover{transform:translateY(-3px)}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.tcover{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-start;padding-top:12%;background:linear-gradient(160deg,#5a4632,#3b2d20)}
html[data-theme=dark] .tcover{background:linear-gradient(160deg,#3d3024,#231a12)}
.tc-strip{writing-mode:vertical-rl;background:#f4ead2;color:#2a2018;border:1px solid #b9a37c;padding:10px 6px;font-size:15px;letter-spacing:.2em;max-height:76%;overflow:hidden;line-height:1.3}
.c-title{font-size:15px;font-weight:600;line-height:1.35;color:var(--ink)}
.c-meta{font-size:12.5px;color:var(--ink-2)}

.reader{position:fixed;top:48px;left:0;right:0;bottom:0;display:flex;flex-direction:column;overflow:hidden}
.stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,var(--desk) 40%,var(--desk-2) 100%)}
.foot{height:44px;display:flex;align-items:center;gap:14px;padding:0 18px;border-top:1px solid var(--line);background:var(--bar);font-size:13.5px;color:var(--ink-2)}
.pgno{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48%}
.prog{flex:1;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s ease}
.prog-txt{min-width:3em;text-align:right}

.nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:88px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink-2);font-size:30px;cursor:pointer;opacity:.82;z-index:6}
.nav:hover{opacity:1;color:var(--ink)}
.nav:disabled{opacity:.25;cursor:default}
.nav.prev{left:22px}.nav.next{right:22px}

.book{position:relative;width:calc(var(--pw) * 2);height:var(--ph);touch-action:none;cursor:pointer;flex:none}
.book.single{width:var(--pw)}
.book::before{content:"";position:absolute;inset:0;box-shadow:0 18px 40px var(--shadow),0 2px 6px var(--shadow);border-radius:2px}
.edge{position:absolute;top:3px;bottom:3px;background:repeating-linear-gradient(to right,var(--paper) 0 1px,var(--paper-edge) 1px 2px);transition:width .3s ease}
.edge.l{right:100%;width:var(--tl,4px);border-radius:3px 0 0 3px;box-shadow:-3px 4px 8px var(--shadow)}
.edge.r{left:100%;width:var(--tr,4px);border-radius:0 3px 3px 0;box-shadow:3px 4px 8px var(--shadow)}
.pages{position:absolute;inset:0;perspective:calc(var(--pw) * 3.4);perspective-origin:50% 50%}
.slot{position:absolute;top:0;width:var(--pw);height:var(--ph)}
.slot.l{left:0}.slot.r{left:var(--pw)}
.book.single .slot.l{display:none}
.book.single .slot.r{left:0}
.spine{position:absolute;top:0;bottom:0;left:calc(var(--pw) - 1px);width:2px;background:rgba(0,0,0,.18);pointer-events:none;z-index:4}
.book.single .spine{display:none}
.leaf{position:absolute;top:0;left:var(--pw);width:var(--pw);height:var(--ph);transform-origin:0 50%;transform-style:preserve-3d;z-index:3;will-change:transform}
.book.single .leaf{left:0}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.face.back{transform:rotateY(180deg)}
.shade{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:5}
.face.front .shade{background:linear-gradient(to right,rgba(0,0,0,.30) 0%,rgba(0,0,0,.08) 35%,rgba(255,255,255,.10) 78%,rgba(0,0,0,.22) 100%)}
.face.back .shade{background:linear-gradient(to left,rgba(0,0,0,.30) 0%,rgba(0,0,0,.08) 35%,rgba(255,255,255,.10) 78%,rgba(0,0,0,.22) 100%)}
.cast{position:absolute;top:0;height:100%;width:0;pointer-events:none;z-index:2;opacity:0}

.pg{position:absolute;inset:0;background:var(--paper);background-image:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.18),rgba(255,255,255,0) 60%);overflow:hidden}
html[data-theme=dark] .pg{background-image:none}
.pg::after{content:"";position:absolute;top:0;bottom:0;width:14%;pointer-events:none}
.pg.l::after{right:0;background:linear-gradient(to left,var(--gutter),rgba(0,0,0,0))}
.pg.r::after{left:0;background:linear-gradient(to right,var(--gutter),rgba(0,0,0,0))}
.book.single .pg.r::after{width:5%}
.pg-hd{position:absolute;left:var(--padx);right:var(--padx);top:calc(var(--padt) * .38);font-size:11.5px;color:var(--ink-3);letter-spacing:.12em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg.r .pg-hd{text-align:right}
.pg-in{position:absolute;left:var(--padx);top:var(--padt);width:var(--cw);height:var(--ch);overflow:hidden}
.pg-ft{position:absolute;left:var(--padx);right:var(--padx);bottom:calc(var(--padb) * .32);font-size:12px;color:var(--ink-3);text-align:center}
.pg.l .pg-ft{text-align:left}.pg.r .pg-ft{text-align:right}
.pg-wait .pg-wait-t{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:22px;letter-spacing:.3em}

.measure{position:fixed;left:0;top:0;overflow:hidden;visibility:hidden;pointer-events:none;z-index:-1}
.flow{column-fill:auto;line-height:1.85;color:var(--ink);text-align:justify;font-family:var(--font);overflow-wrap:break-word;orphans:2;widows:2}
.flow>:first-child{margin-top:0}
.flow p{margin:0 0 .3em;text-indent:2em}
.flow h1,.flow h2,.flow h3,.flow h4{text-indent:0;break-after:avoid;break-inside:avoid;line-height:1.5;letter-spacing:.05em}
.flow h1{font-size:1.45em;text-align:center;margin:.4em 0 .8em}
.flow h2{font-size:1.25em;text-align:center;margin:.8em 0 .6em}
.flow h3{font-size:1.1em;margin:.8em 0 .4em}
.flow h4{font-size:1em;margin:.6em 0 .3em;color:var(--accent)}
.flow h1>br:first-child,.flow h2>br:first-child,.flow h3>br:first-child,.flow h4>br:first-child{display:none}
.flow strong{font-weight:700}
.flow hr{border:0;border-top:1px solid var(--line);margin:.9em 22%}
.flow figure.bk-fig{margin:.5em 0;text-align:center;text-indent:0;break-inside:avoid;line-height:0}
.flow figure.bk-fig img{display:inline-block;vertical-align:top}
.flow img{-webkit-user-drag:none;user-select:none}
html[data-theme=dark] .flow img{filter:brightness(.86) contrast(1.05)}
.flow img.bk-inl{vertical-align:-.25em}
.flow table{width:100%;border-collapse:collapse;margin:.5em 0;font-size:.86em;line-height:1.55;break-inside:avoid;text-indent:0}
.flow tr{break-inside:avoid}
.flow td,.flow th{border:1px solid var(--line);padding:.2em .4em;vertical-align:top;text-align:left;word-break:break-all}
.flow th{background:var(--paper-2)}
.flow td>br:last-child,.flow th>br:last-child{display:none}
.flow p.bk-pan{display:block;white-space:pre;text-indent:0;text-align:left;break-inside:avoid;overflow:hidden;font-family:"SimSun","NSimSun","Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC",serif;letter-spacing:0;word-spacing:0;line-height:1.6;font-kerning:none;font-variant-east-asian:normal;margin:.6em 0;padding:.35em .5em;background:var(--pan-bg);border:1px solid var(--pan-line);border-radius:3px;overflow-wrap:normal;word-break:keep-all}
.flow p.bk-pan *{white-space:pre}
.flow .flash{background:var(--flash);border-radius:3px;transition:background .6s ease}

.r-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink-2);font-size:16px;letter-spacing:.2em;z-index:8}
.r-msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px 24px;max-width:min(420px,88vw);box-shadow:0 10px 30px var(--shadow);z-index:9;text-align:center}
.r-msg p{margin:0 0 14px;line-height:1.6}
.r-msg-act{display:flex;gap:10px;justify-content:center}
.hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:var(--ink);color:var(--paper);font-size:13px;padding:5px 14px;border-radius:14px;opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:7}
.hint.on{opacity:.88}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:40}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(360px,88vw);background:var(--card);border-right:1px solid var(--line);z-index:41;display:flex;flex-direction:column;box-shadow:6px 0 24px var(--shadow)}
.dr-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);font-size:16px}
.dr-body{flex:1;overflow:auto;padding:8px 6px 24px}
.tv{margin:2px 0}
.tv>summary{cursor:pointer;padding:8px 10px;border-radius:6px;font-weight:600;list-style-position:inside}
.tv.cur>summary{color:var(--accent)}
.tv ul{list-style:none;margin:0 0 6px;padding:0}
.th{display:block;width:100%;text-align:left;background:none;border:0;padding:5px 10px;border-radius:5px;cursor:pointer;font-size:14px;line-height:1.45;color:var(--ink-2)}
.th:hover{background:var(--paper-2);color:var(--ink)}
.th.l0{color:var(--ink-3);font-size:13px}
.th.l1{padding-left:14px;color:var(--ink)}
.th.l2{padding-left:26px;color:var(--ink)}
.th.l3{padding-left:38px}
.th.l4{padding-left:50px;font-size:13.5px}

@media (max-width:899px){
  .nav{width:34px;height:64px;font-size:24px;opacity:.6}
  .nav.prev{left:4px}.nav.next{right:4px}
  .tools{gap:4px}
  .btn{padding:4px 9px}
  .bar-title{font-size:15px}
}
@media (max-width:560px){
  .shelf{padding:66px 14px 30px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:18px 14px}
  .pgno{max-width:62%}
}
@media (prefers-reduced-motion:reduce){
  .bk-book-cover,.prog i,.edge,.hint{transition:none}
}
@media print{body{display:none!important}}
.sync{font-size:12px;color:var(--ink-3);white-space:nowrap;align-self:center;margin-right:4px}
.sync.on{color:var(--ok)}
.btn[aria-expanded=true]{background:var(--paper-2);border-color:var(--ink-3)}
.pop{position:fixed;top:54px;right:14px;z-index:35;width:min(340px,92vw);background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px var(--shadow);padding:12px 14px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.pop .row{display:flex;align-items:center;gap:8px;margin:0}
.pop .row>span:first-child{min-width:4.2em;color:var(--ink-2)}
.pop select,.pop input[type=number]{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:4px 6px;min-width:0}
.pop select{flex:1}
.pop input[type=number]{width:6em}
.pop input[type=range]{flex:1;accent-color:var(--accent)}
.pop output{min-width:3em;text-align:right;color:var(--ink-2)}
.pop .sub{margin:0;font-size:12.5px;color:var(--ink-3)}
.pg.spk .pg-hd::before{content:"🔊 ";font-size:12px}
.pg.spk{box-shadow:inset 0 0 0 2px var(--flash)}
@media (max-width:899px){.sync{display:none}}