:root{
  --bg:#ffffff; --fg:#111111; --muted:#6b6b6b; --line:#e6e6e6;
  --card:#fafafa; --accent:#111111; --accent-fg:#ffffff;
  --hl-yellow:#fff1a8; --hl-blue:#bfe0ff; --hl-green:#c7f0c2; --hl-red:#ffc4c4;
  --maxw:720px; --font:1.0625rem; --bar-h:52px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --serif:"Songti SC","SimSun","Noto Serif SC",Georgia,serif;
}
[data-theme="dark"]{
  --bg:#15171a; --fg:#e7e7e7; --muted:#9aa0a6; --line:#2a2d31;
  --card:#1d2024; --accent:#f5f5f5; --accent-fg:#15171a;
  --hl-yellow:#6b5d18; --hl-blue:#22506e; --hl-green:#2f5a2c; --hl-red:#6e2f33;
}
[data-theme="sepia"]{
  --bg:#f4ecd8; --fg:#33312b; --muted:#7c715a; --line:#e0d3b8; --card:#efe6cf;
  --accent:#33312b; --accent-fg:#f4ecd8;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; line-height:1.7;
  transition:background .25s,color .25s;
}
button{font-family:inherit; cursor:pointer}

/* Top bar */
#topbar{
  position:sticky; top:0; z-index:40; height:var(--bar-h);
  display:flex; align-items:center; justify-content:space-between; gap:.4rem;
  padding:0 max(.6rem,env(safe-area-inset-left)); background:var(--bg);
  border-bottom:1px solid var(--line); backdrop-filter:saturate(1.2) blur(6px);
}
.bar-left,.bar-right{display:flex; align-items:center; gap:.2rem}
.bar-title{font-weight:600; font-size:.95rem; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:46vw; text-align:center}
.icon-btn{
  border:1px solid transparent; background:transparent; color:var(--fg);
  font-size:.9rem; padding:.4rem .55rem; border-radius:8px; line-height:1;
}
.icon-btn:hover{background:var(--card); border-color:var(--line)}

/* progress */
#progressBar{position:sticky; top:var(--bar-h); z-index:39; height:3px; background:transparent}
#progressFill{display:block; height:100%; width:0; background:var(--accent); transition:width .15s}

/* views */
.view{max-width:var(--maxw); margin:0 auto; padding:1.4rem 1.15rem 5rem}

/* Library */
.hero{padding:2.2rem .2rem 1.4rem}
.hero h1{font-size:1.7rem; margin:0 0 .6rem; letter-spacing:-.01em}
.hero p{color:var(--muted); margin:0; font-size:.98rem; max-width:36rem}
.book-grid{display:grid; gap:1rem}
.book-card{
  display:flex; gap:1rem; align-items:stretch; text-align:left;
  border:1px solid var(--line); background:var(--card); border-radius:14px;
  padding:1rem; width:100%; color:inherit; transition:transform .12s,border-color .12s;
}
.book-card:hover{transform:translateY(-2px); border-color:var(--accent)}
.book-cover{
  flex:0 0 78px; width:78px; height:108px; border-radius:8px;
  background:var(--accent); color:var(--accent-fg); display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:.5rem; text-align:center;
  font-family:var(--serif); font-weight:700; line-height:1.25; font-size:.95rem;
}
.book-meta{display:flex; flex-direction:column; min-width:0}
.book-meta h3{margin:.1rem 0 .25rem; font-size:1.12rem}
.book-meta .sub{color:var(--muted); font-size:.9rem; margin-bottom:.5rem}
.book-meta .stat{margin-top:auto; color:var(--muted); font-size:.82rem}
.book-meta .resume{font-size:.82rem; color:var(--accent); margin-top:.35rem; font-weight:600}
.site-foot{margin-top:2.4rem; color:var(--muted); font-size:.8rem; text-align:center}

/* TOC drawer */
#toc{
  position:fixed; top:0; left:0; bottom:0; width:300px; max-width:84vw; z-index:60;
  background:var(--bg); border-right:1px solid var(--line); transform:translateX(-105%);
  transition:transform .25s; display:flex; flex-direction:column;
}
#toc.open{transform:translateX(0)}
.toc-head{padding:1rem 1.1rem; font-weight:700; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--bg)}
#tocList{overflow:auto; padding:.4rem 0 2rem}
.toc-item{display:block; width:100%; text-align:left; background:transparent; border:0;
  color:var(--fg); padding:.55rem 1.1rem; font-size:.9rem; line-height:1.45;
  border-left:3px solid transparent}
.toc-item:hover{background:var(--card)}
.toc-item.active{border-left-color:var(--accent); background:var(--card); font-weight:600}
.toc-item.section{color:var(--muted); font-size:.78rem; letter-spacing:.04em;
  text-transform:none; padding-top:.9rem; font-weight:700; cursor:default}
.toc-item .tnum{color:var(--muted); margin-right:.4rem}
#scrim{position:fixed; inset:0; background:rgba(0,0,0,.38); z-index:55; opacity:0;
  pointer-events:none; transition:opacity .25s}
#scrim.show{opacity:1; pointer-events:auto}

/* Content */
.content{font-size:var(--font); font-family:var(--serif); word-wrap:break-word}
.content h1{font-size:1.5em; margin:.4em 0 .8em; font-family:var(--sans)}
.content h2{font-size:1.22em; margin:1.6em 0 .6em; font-family:var(--sans)}
.content h3{font-size:1.08em; margin:1.3em 0 .5em; font-family:var(--sans)}
.content p{margin:0 0 1.05em}
.content ul,.content ol{margin:0 0 1.1em; padding-left:1.4em}
.content li{margin:.3em 0}
.content blockquote{margin:1.2em 0; padding:.6em 1em; border-left:3px solid var(--line);
  color:var(--muted); background:var(--card); border-radius:0 8px 8px 0}
.content hr{border:0; border-top:1px solid var(--line); margin:2em 0}
.content table{border-collapse:collapse; width:100%; margin:1.2em 0; font-size:.9em;
  font-family:var(--sans); display:block; overflow-x:auto}
.content th,.content td{border:1px solid var(--line); padding:.45em .6em; text-align:left}
.content th{background:var(--card)}
.content code{background:var(--card); padding:.1em .35em; border-radius:4px; font-size:.9em}
.chap-title-block{margin-bottom:1.6em; padding-bottom:1em; border-bottom:1px solid var(--line)}
.chap-title-block .kicker{color:var(--muted); font-size:.8rem; font-family:var(--sans);
  letter-spacing:.06em; margin-bottom:.4rem}
.chap-title-block h1{margin:0; font-size:1.5rem; line-height:1.3}

/* marks: 4 styles */
mark.hl{background:transparent; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;
  text-decoration-skip-ink:none}
mark.hl.highlight{background:var(--hl-yellow); border-radius:2px; padding:.02em 0}
mark.hl.underline{border-bottom:2px solid var(--accent)}
mark.hl.wave{text-decoration:underline; text-decoration-style:wavy;
  text-decoration-color:var(--accent); text-underline-offset:3px}
mark.hl.strike{text-decoration:line-through; text-decoration-color:var(--accent); text-decoration-thickness:2px}
mark.hl.hasnote{background:var(--hl-yellow); border-radius:2px}
mark.hl.hasnote.underline,mark.hl.hasnote.wave,mark.hl.hasnote.strike{background:transparent}
/* highlight colors (黄/蓝/绿/红) */
mark.hl.c-yellow{background:var(--hl-yellow)}
mark.hl.c-blue{background:var(--hl-blue)}
mark.hl.c-green{background:var(--hl-green)}
mark.hl.c-red{background:var(--hl-red)}
.note-flag{font-size:.62em; vertical-align:super; color:var(--accent); cursor:pointer;
  margin-left:1px; user-select:none}
@keyframes flash{0%,100%{background:transparent}30%{background:var(--hl-yellow)}}
.flash{animation:flash 1.4s ease}

/* chapter nav */
.chapter-nav{display:flex; justify-content:space-between; gap:1rem; margin-top:2.5rem;
  padding-top:1.4rem; border-top:1px solid var(--line)}
.chap-btn{flex:1; padding:.8rem; border:1px solid var(--line); background:var(--card);
  color:var(--fg); border-radius:10px; font-size:.92rem}
.chap-btn:hover:not(:disabled){border-color:var(--accent)}
.chap-btn:disabled{opacity:.35; cursor:default}

/* Selection toolbar */
.sel-toolbar{position:absolute; z-index:70; display:flex; align-items:center; gap:.15rem; flex-wrap:wrap;
  max-width:340px; justify-content:center;
  background:var(--accent); color:var(--accent-fg); padding:.35rem .45rem; border-radius:12px;
  box-shadow:0 6px 24px rgba(0,0,0,.28)}
.sel-toolbar .sep{width:1px; height:18px; background:rgba(127,127,127,.4); margin:0 .15rem}
.tb-btn{background:transparent; border:0; color:var(--accent-fg); font-size:.8rem; padding:.32rem .45rem;
  border-radius:7px; display:flex; align-items:center; gap:.25rem; white-space:nowrap}
.tb-btn:hover{background:rgba(127,127,127,.25)}
.sel-toolbar .swatch{width:22px; height:22px; border-radius:50%; padding:0;
  border:2px solid rgba(127,127,127,.4); cursor:pointer; transition:transform .1s}
.sel-toolbar .swatch:hover{transform:scale(1.15)}
.sw-yellow{background:#ffe14d}.sw-blue{background:#6db8ff}.sw-green{background:#7ad77a}.sw-red{background:#ff7a7a}
.tb-btn .ic{font-weight:700; font-size:.78rem; line-height:1; padding-bottom:1px}
.ic-hl{background:#ffe14d; color:#222; border-radius:2px; padding:0 2px}
.ic-ul{border-bottom:2px solid currentColor}
.ic-wv{text-decoration:underline; text-decoration-style:wavy; text-underline-offset:2px}
.ic-st{text-decoration:line-through}

/* Mark action popup */
.mark-popup{position:absolute; z-index:72; background:var(--bg); color:var(--fg);
  border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.22);
  padding:.5rem; min-width:180px; max-width:280px}
.mp-note{font-family:var(--serif); font-size:.9rem; padding:.4rem .5rem .6rem; color:var(--fg);
  border-bottom:1px solid var(--line); margin-bottom:.4rem; white-space:pre-wrap}
.mp-actions{display:flex; gap:.3rem}
.mp-btn{flex:1; background:var(--card); border:1px solid var(--line); color:var(--fg);
  padding:.4rem .5rem; border-radius:8px; font-size:.82rem}
.mp-btn:hover{border-color:var(--accent)}
.mp-btn.danger:hover{border-color:#d33; color:#d33}

/* Note modal */
.note-modal{position:fixed; inset:0; z-index:95; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; padding:1rem}
.nm-card{background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:16px;
  width:100%; max-width:440px; padding:1.2rem; box-shadow:0 12px 40px rgba(0,0,0,.35)}
.nm-head{font-weight:700; margin-bottom:.7rem}
.nm-quote{font-family:var(--serif); font-size:.9rem; color:var(--muted);
  border-left:3px solid var(--hl-yellow); padding:.3rem .7rem; margin-bottom:.8rem;
  max-height:5.5em; overflow:auto}
.nm-text{width:100%; resize:vertical; font-family:var(--sans); font-size:.95rem; line-height:1.6;
  padding:.7rem .8rem; border:1px solid var(--line); border-radius:10px; background:var(--card);
  color:var(--fg); box-sizing:border-box}
.nm-text:focus{outline:none; border-color:var(--accent)}
.nm-btns{display:flex; justify-content:flex-end; gap:.5rem; margin-top:.9rem}
.nm-btn{padding:.5rem 1.1rem; border-radius:9px; border:1px solid var(--line); background:var(--card);
  color:var(--fg); font-size:.88rem}
.nm-btn.primary{background:var(--accent); color:var(--accent-fg); border-color:var(--accent)}

/* Marks view */
.marks-head{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; padding:1.5rem .2rem 1rem}
.marks-head h1{margin:0; font-size:1.5rem; flex-basis:100%}
.marks-tabs{display:flex; gap:.3rem}
.tab{border:1px solid var(--line); background:var(--card); color:var(--fg);
  padding:.4rem .9rem; border-radius:20px; font-size:.85rem}
.tab.active{background:var(--accent); color:var(--accent-fg); border-color:var(--accent)}
.text-btn{margin-left:auto; background:transparent; border:1px solid var(--line);
  color:var(--fg); padding:.4rem .8rem; border-radius:8px; font-size:.82rem}
.marks-list{display:flex; flex-direction:column; gap:.7rem; padding-top:.5rem}
.mark-item{border:1px solid var(--line); border-radius:12px; padding:.85rem 1rem;
  background:var(--card); position:relative}
.mark-item .mtext{font-family:var(--serif); font-size:.98rem; cursor:pointer;
  border-left:3px solid var(--accent); padding-left:.7rem; margin-bottom:.5rem}
.mark-item.type-highlight .mtext{border-left-color:#e8c400}
.mark-item.color-yellow .mtext{border-left-color:#e8c400}
.mark-item.color-blue .mtext{border-left-color:#3f9bff}
.mark-item.color-green .mtext{border-left-color:#3aab3a}
.mark-item.color-red .mtext{border-left-color:#ff5a5a}
.mark-item .mnote{font-size:.88rem; color:var(--fg); background:var(--bg);
  border:1px solid var(--line); border-radius:8px; padding:.45rem .6rem; margin-bottom:.5rem;
  white-space:pre-wrap}
.mark-item .mmeta{color:var(--muted); font-size:.78rem; display:flex; gap:.5rem;
  align-items:center; flex-wrap:wrap}
.tag{border:1px solid var(--line); border-radius:20px; padding:.05rem .5rem; font-size:.72rem;
  color:var(--fg); background:var(--bg)}
.tag-highlight{background:var(--hl-yellow)}
.tag-c-yellow{background:var(--hl-yellow)}
.tag-c-blue{background:var(--hl-blue)}
.tag-c-green{background:var(--hl-green)}
.tag-c-red{background:var(--hl-red)}
.mark-item .del{margin-left:auto; background:transparent; border:0; color:var(--muted);
  font-size:.8rem; cursor:pointer}
.mark-item .del:hover{color:#d33}
.empty{color:var(--muted); text-align:center; padding:3rem 1rem; font-size:.95rem}

/* toast */
.toast{position:fixed; left:50%; bottom:2rem; transform:translateX(-50%);
  background:var(--accent); color:var(--accent-fg); padding:.65rem 1.1rem;
  border-radius:24px; font-size:.88rem; z-index:90; box-shadow:0 6px 24px rgba(0,0,0,.25)}

@media(min-width:560px){
  .book-cover{flex-basis:88px; width:88px; height:120px}
  .hero h1{font-size:2rem}
}

/* Desktop two-pane reading: left TOC docked, right chapter */
@media(min-width:900px){
  body.reading #tocToggle{display:none}
  body.reading #toc{transform:none; top:var(--bar-h); bottom:0; width:288px; box-shadow:none}
  body.reading #scrim{display:none !important}
  body.reading #app{max-width:none; margin:0; padding-left:288px}
  body.reading #readerView{max-width:760px; margin:0 auto}
}