/* novel reader — warm paper */
:root{
  --paper:#f7f3ea; --ink:#222; --muted:#666; --accent:#a0522d;
  --line:#ddd; --card:#fffdf8; --badge:#c45c26; --badge-bg:#fff0e6;
  --toolbar:#efe9dc; --shadow:0 1px 3px rgba(0,0,0,.06);
  --fs:18px; --lh:1.9;
}
html[data-theme="white"]{
  --paper:#ffffff; --ink:#222; --muted:#666; --accent:#a0522d;
  --line:#e2e2e2; --card:#fafafa; --toolbar:#f4f4f4;
}
html[data-theme="sepia"]{
  --paper:#f5ecd7; --ink:#2b2418; --muted:#6b5f4a; --accent:#8b4513;
  --line:#dccfb2; --card:#fbf4e3; --badge:#b5501f; --badge-bg:#f9e2cf; --toolbar:#ece0c4;
}
html[data-theme="green"]{
  --paper:#cfe8cf; --ink:#1d2b1d; --muted:#4a5e4a; --accent:#2f6b3a;
  --line:#a9cca9; --card:#e0f1e0; --badge:#9a4a1c; --badge-bg:#f3e3d2; --toolbar:#bfdfbf;
}
html[data-theme="night"], html[data-theme="night"] body, body.night, body.night.novel-night{
  --paper:#1b1b1b; --ink:#ddd; --muted:#999; --accent:#d4a574;
  --line:#333; --card:#242424; --badge:#e08a4f; --badge-bg:#3a2a1f;
  --toolbar:#2a2a2a; --shadow:0 1px 3px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:var(--fs)/var(--lh) -apple-system,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:720px; margin:0 auto; padding:16px 18px 48px}
.topbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:12px; font-size:15px; color:var(--muted);
}
.topbar a{color:var(--muted)}
.topbar a:hover{color:var(--accent)}
h1{font-size:clamp(1.35rem,4vw,1.7rem); line-height:1.35; margin:.4rem 0 .6rem; font-weight:700}
h2{font-size:1.15rem; margin:1.4rem 0 .6rem; border-bottom:1px solid var(--line); padding-bottom:6px}
.meta{color:var(--muted); font-size:14px; margin:0 0 1rem}
.blurb{color:var(--muted); font-size:15px; margin:0 0 1.2rem; line-height:1.7}
.search-row{margin:0 0 1rem}
.search-row input{
  width:100%; padding:.7rem 1rem; border:1px solid var(--line); border-radius:.7rem;
  background:var(--card); color:var(--ink); font-size:16px; outline:none;
}
.search-row input:focus{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.section-title{font-size:1.05rem; margin:1.6rem 0 .7rem; font-weight:700}
.book-list,.shelf-list{display:grid; gap:.75rem}
.book-card{
  display:block; background:var(--card); border:1px solid var(--line); border-radius:.9rem;
  padding:1rem 1.1rem; box-shadow:var(--shadow); color:inherit!important; text-decoration:none!important;
  position:relative; transition:transform .12s ease, border-color .12s;
}
.book-card:hover{transform:translateY(-1px); border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); text-decoration:none!important}
.book-card b{display:block; font-size:1.02rem; margin-bottom:.25rem}
.book-card small{display:block; color:var(--muted); font-size:.86rem; line-height:1.55}
.badge-update{
  display:inline-block; margin-left:.4rem; padding:.05rem .45rem; border-radius:999px;
  background:var(--badge-bg); color:var(--badge); font-size:.72rem; font-weight:700; vertical-align:middle;
}
.shelf-empty,.search-empty{color:var(--muted); font-size:14px; margin:.2rem 0 1rem}
.volume{margin:1.2rem 0}
.volume h2{margin-top:.8rem}
.chapter-list{list-style:none; padding:0; margin:0}
.chapter-list li{border-bottom:1px solid var(--line)}
.chapter-list a{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:.75rem 0; color:var(--ink)!important; text-decoration:none!important;
}
.chapter-list a:hover{color:var(--accent)!important}
.chapter-list .ch-mark{font-size:12px; color:var(--muted); white-space:nowrap}
.toolbar{
  position:sticky; top:0; z-index:30; display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  background:color-mix(in srgb,var(--toolbar) 92%,transparent); backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  padding:8px 12px; margin:0 -18px 14px; padding-left:18px; padding-right:18px;
}
.toolbar button,.toolbar .tb-link{
  appearance:none; border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:999px; padding:.35rem .75rem; font-size:13px; cursor:pointer; line-height:1.3;
}
.toolbar button:hover,.toolbar .tb-link:hover{border-color:var(--accent); color:var(--accent)}
.toolbar .tb-link{text-decoration:none!important; display:inline-flex; align-items:center}
.toolbar .spacer{flex:1}
.chapter-title{font-size:clamp(1.25rem,3.8vw,1.55rem); margin:.2rem 0 1rem; line-height:1.4}
.chapter-body p{margin:0 0 .9em; text-indent:2em}
.chapter-body p:last-child{margin-bottom:0}
.nav-chapters{
  display:flex; justify-content:space-between; gap:12px; margin:2rem 0 1rem;
  padding-top:1rem; border-top:1px solid var(--line); font-size:15px;
}
.nav-chapters a{color:var(--accent)}
.nav-chapters .disabled{color:var(--muted); pointer-events:none}
.foot-links{margin-top:1.5rem; font-size:14px; color:var(--muted)}
.mark-btn{
  margin:.4rem 0 1rem; appearance:none; border:1px solid var(--line); background:var(--card);
  color:var(--ink); border-radius:999px; padding:.4rem .9rem; font-size:14px; cursor:pointer;
}
.mark-btn.on{border-color:var(--accent); color:var(--accent); background:var(--badge-bg)}
.hidden{display:none!important}
@media(max-width:560px){
  .wrap{padding:12px 14px 40px}
  .toolbar{margin:0 -14px 12px; padding-left:14px; padding-right:14px}
}
/* 章節留言 */
.novel-comments{margin:1.6rem 0 1rem; padding-top:1rem; border-top:1px solid var(--line); font-size:15px; line-height:1.7}
.novel-comments .nc-title{font-size:1.05rem; border:0; margin:0 0 .7rem; padding:0}
.nc-count{color:var(--muted); font-weight:400; font-size:.85rem}
.nc-form{display:grid; gap:.5rem; margin-bottom:1rem}
.nc-form input,.nc-form textarea{width:100%; padding:.6rem .8rem; border:1px solid var(--line); border-radius:.6rem; background:var(--card); color:var(--ink); font:inherit; font-size:16px; outline:none}
.nc-form textarea{resize:vertical; min-height:4.5em}
.nc-form input:focus,.nc-form textarea:focus{border-color:var(--accent)}
.nc-hp{position:absolute!important; left:-9999px; width:1px!important; height:1px; opacity:0}
.nc-row{display:flex; align-items:center; gap:.6rem; font-size:13px; color:var(--muted)}
.nc-msg{flex:1}.nc-msg.err{color:#c0392b}.nc-msg.ok{color:var(--accent)}
.nc-row button{appearance:none; border:1px solid var(--accent); background:var(--accent); color:#fff; border-radius:999px; padding:.4rem 1rem; font-size:14px; cursor:pointer}
body.night .nc-row button,html[data-theme="night"] .nc-row button{color:#1b1b1b}
.nc-row button:disabled{opacity:.5}
.nc-list{list-style:none; margin:0; padding:0}
.nc-list li{padding:.7rem 0; border-bottom:1px solid var(--line)}
.nc-meta{font-size:13px; color:var(--muted); display:flex; align-items:center; gap:.3rem}
.nc-meta b{color:var(--ink)}
.nc-body{white-space:normal; word-break:break-word; margin-top:.15rem}
.nc-empty{color:var(--muted); font-size:14px}
.nc-del{appearance:none; margin-left:auto; border:1px solid #c0392b; background:transparent; color:#c0392b; font-size:13px; cursor:pointer; padding:.2rem .7rem; border-radius:999px; line-height:1.4}
.nc-del:hover,.nc-del:active{background:#c0392b; color:#fff}
html[data-theme="night"] .nc-del,html[data-theme="night"] .nc-msg.err{color:#ff7b6b; border-color:#ff7b6b}
html[data-theme="night"] .nc-del:hover,html[data-theme="night"] .nc-del:active{background:#ff7b6b; color:#1b1b1b}
html[data-theme="green"] .nc-del,html[data-theme="green"] .nc-msg.err{color:#a8281b; border-color:#a8281b}
html[data-theme="green"] .nc-del:hover{background:#a8281b; color:#fff}
.nc-rep{appearance:none; margin-left:auto; border:0; background:transparent; color:var(--accent); font-size:13px; cursor:pointer; padding:.2rem .4rem}
.nc-rep+.nc-del{margin-left:.2rem}
.nc-au{display:inline-block; background:var(--accent); color:#fff; font-size:11px; line-height:1.5; padding:0 .45rem; border-radius:999px; font-weight:700}
html[data-theme="night"] .nc-au{color:#1b1b1b}
.nc-replies{list-style:none; margin:.4rem 0 0 1.1rem; padding:0 0 0 .8rem; border-left:2px solid var(--line)}
.nc-list .nc-replies li{padding:.45rem 0; border-bottom:0}
.nc-rform{margin:.5rem 0 0 1.1rem}
/* 背景色選擇 */
.theme-picker{display:inline-flex; gap:4px; flex-wrap:wrap}
.toolbar .theme-opt{display:inline-flex; align-items:center; gap:4px; padding:.25rem .5rem; font-size:12px}
.theme-opt .dot{display:inline-block; width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.35)}
.dot-white{background:#fff}.dot-sepia{background:#f5ecd7}.dot-green{background:#cfe8cf}.dot-night{background:#1b1b1b; border-color:#888!important}
.toolbar .theme-opt.on{border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent); font-weight:700}

.shelf-item{position:relative}
.shelf-item .book-card{padding-right:4.5em}
.shelf-del{position:absolute;top:50%;right:.6em;transform:translateY(-50%);border:1px solid #d9534f;color:#d9534f;background:transparent;border-radius:999px;padding:.2em .8em;font-size:.85em;cursor:pointer}
.shelf-del:hover{background:#d9534f;color:#fff}

.nc-act{margin-top:.35rem}