/* ---------- themes ---------- */
body.theme-light  { --bg:#fbfbfb; --fg:#222;   --bar:#fff;    --line:#e3e3e3; --link:#06c; --dim:#888; }
body.theme-paper  { --bg:#f7efdc; --fg:#4a3b26; --bar:#fff8e8; --line:#e2d5b5; --link:#8a5a1e; --dim:#9c8a6a; }
body.theme-green  { --bg:#cce5d3; --fg:#1f3a2b; --bar:#dcf0e2; --line:#b3d4bd; --link:#1c6b40; --dim:#5c7d68; }
body.theme-dark   { --bg:#141414; --fg:#c9c9c9; --bar:#1e1e1e; --line:#333;    --link:#6ab0ff; --dim:#777; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin:0; padding:0; }
body {
  background: var(--bg); color: var(--fg);
  font-family: 'Microsoft JhengHei','PingFang TC',sans-serif;
  transition: background .25s, color .25s;
}

/* ---------- top bar ---------- */
#topbar {
  position: sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; background:var(--bar); border-bottom:1px solid var(--line);
}
#topbar #bookTitle { font-weight:700; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
#topbar #spacer { flex:0; }
button, select, input[type=search] {
  background:transparent; color:inherit; border:1px solid var(--line);
  border-radius:6px; padding:5px 10px; font-size:14px; cursor:pointer;
}
button:hover { border-color: var(--link); }

/* ---------- chapter nav strips ---------- */
.subbar {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:8px 14px; background:var(--bg); border-bottom:1px solid var(--line);
  font-size:14px;
}
#chapterNav { position:sticky; top:39px; z-index:29; }
.subbar a { color:var(--link); text-decoration:none; white-space:nowrap; }
.subbar a.disabled { color:var(--dim); pointer-events:none; opacity:.5; }
#chapterSelect { max-width:50%; flex:1; }

/* ---------- reader ---------- */
#main { display:flex; justify-content:center; }
#reader { width:var(--w,720px); max-width:96vw; padding:24px 18px 80px; }
#chTitle { font-size:calc(var(--fs,20px) + 6px); margin:8px 0 4px; }
#chVolume { color:var(--dim); font-size:13px; margin-bottom:22px; }
#chMetadata { color:var(--dim); font-size:13px; white-space:pre-line; overflow-wrap:anywhere; }
#content {
  font-size:var(--fs,20px); line-height:var(--lh,1.9);
  font-family:var(--ff,'Microsoft JhengHei','PingFang TC',sans-serif);
}
#content p { margin:0 0 1em; text-indent:2em; word-break:normal; overflow-wrap:break-word; }
#content p.loading { color:var(--dim); text-indent:0; }
#chapterNavBottom { margin-top:40px; border-top:1px solid var(--line); border-bottom:none; }

/* ---------- progress ---------- */
#progressWrap { position:fixed; left:0; bottom:0; width:100%; height:3px; z-index:40; }
#progress { height:100%; width:0; background:var(--link); opacity:.7; }

/* ---------- catalog drawer ---------- */
#mask { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:40; }
#catalog {
  position:fixed; top:0; left:0; bottom:0; width:min(360px,90vw); z-index:41;
  background:var(--bar); border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  animation: slide .2s ease-out;
}
@keyframes slide { from { transform:translateX(-100%);} to { transform:none;} }
#catalogHead { display:flex; gap:8px; padding:10px; border-bottom:1px solid var(--line); }
#catalogHead input { flex:1; cursor:text; }
#catalogHead input { min-width:0; }
#libraryPicker { padding:12px; border-bottom:1px solid var(--line); font-size:14px; }
.folderControls { display:flex; gap:6px; margin-top:8px; }
#folderSelect { flex:1; min-width:0; width:100%; }
#refreshFolders { flex-shrink:0; }
#folderStatus { margin:8px 0 0; color:var(--dim); overflow-wrap:anywhere; }
#catalogBody { overflow-y:auto; flex:1; padding:6px 0; font-size:14px; }
.volHead { padding:10px 14px 4px; font-weight:700; color:var(--dim); font-size:13px; }
.chItem { display:block; padding:7px 16px; cursor:pointer; color:var(--fg); text-decoration:none; }
.chItem:hover { background:var(--line); }
.chItem.current { color:var(--link); font-weight:700; }

/* ---------- settings panel ---------- */
#settings {
  position:fixed; right:12px; top:52px; z-index:41; width:300px;
  background:var(--bar); border:1px solid var(--line); border-radius:10px;
  padding:16px; box-shadow:0 8px 30px rgba(0,0,0,.25);
}
#settings h2 { margin:0 0 12px; font-size:16px; }
#settings .row { display:flex; justify-content:space-between; align-items:center; margin:10px 0; font-size:14px; }
#settings .seg { display:flex; align-items:center; gap:6px; }
#settings .seg button { padding:4px 10px; }
#settings .seg span { min-width:36px; text-align:center; font-size:13px; color:var(--dim); }
#settings .seg.themes button.active { border-color:var(--link); color:var(--link); }
#settings button.ghost { width:100%; margin-top:8px; }

@media (max-width:640px) {
  #chapterNav { top:39px; }
  #settings { right:6px; left:6px; width:auto; }
  #content { font-size:calc(var(--fs,20px) - 1px); }
}