/* 书斋 · 轻量网页阅读器样式（无任何框架依赖） */

/* ---------- 主题变量：四套护眼配色 ---------- */
:root,
html[data-theme="sepia"] {
  --bg: #f4eddc;
  --panel: #ece2c8;
  --fg: #3b352b;
  --muted: #8a8069;
  --bd: rgba(59, 53, 43, 0.16);
  --accent: #8a5a2b;
  --accent-bg: rgba(138, 90, 43, 0.12);
}
html[data-theme="green"] {
  --bg: #c9e4cc;
  --panel: #bcdcC1;
  --fg: #24382b;
  --muted: #5e7a64;
  --bd: rgba(36, 56, 43, 0.18);
  --accent: #2f6b44;
  --accent-bg: rgba(47, 107, 68, 0.12);
}
html[data-theme="paper"] {
  --bg: #faf9f4;
  --panel: #f0eee4;
  --fg: #34312a;
  --muted: #94907f;
  --bd: rgba(52, 49, 42, 0.14);
  --accent: #3d6b7d;
  --accent-bg: rgba(61, 107, 125, 0.1);
}
html[data-theme="dark"] {
  --bg: #17191d;
  --panel: #22252b;
  --fg: #c6c1b7;
  --muted: #7c7a72;
  --bd: rgba(255, 255, 255, 0.1);
  --accent: #a8894f;
  --accent-bg: rgba(168, 137, 79, 0.16);
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Georgia, "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  transition: background 0.25s, color 0.25s;
}
html[data-font="sans"] body {
  font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
button, .btn {
  font-family: inherit;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn:active { opacity: 0.7; }
.btn.on { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }

/* ---------- 顶栏 ---------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--bd);
}
.bar h1 { font-size: 18px; margin: 0; font-weight: 500; }
.bar .sub { color: var(--muted); font-size: 12px; }
.bar .spacer { flex: 1; }
.bar-title {
  flex: 1;
  text-align: center;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
}

/* 阅读进度条 */
#progress {
  position: sticky;
  top: 45px;
  z-index: 20;
  height: 2px;
  background: transparent;
  margin-top: -1px;
}
#progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.15s; }

/* ---------- 书架 ---------- */
main { max-width: 960px; margin: 0 auto; padding: 20px 16px 60px; }
.search-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; }
.search-row input {
  flex: 1;
  max-width: 420px;
  font: inherit;
  font-size: 15px;
  padding: 9px 14px;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--bd);
  border-radius: 10px;
  outline: none;
}
.search-row input:focus { border-color: var(--accent); }
.search-row .count { color: var(--muted); font-size: 13px; }
.more-row { text-align: center; margin: 18px 0 6px; }
.pager-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin: 20px 0 8px; }
.pager-row .tab { min-width: 38px; text-align: center; }
.pager-row .gap { color: var(--muted); font-size: 13px; align-self: center; }
.pager-row .jump { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.pager-row .jump input {
  width: 64px; font: inherit; font-size: 13px; text-align: center;
  padding: 5px 6px; color: var(--fg); background: var(--panel);
  border: 1px solid var(--bd); border-radius: 8px; outline: none;
}
.pager-row .jump input:focus { border-color: var(--accent); }
.tabs .tab[disabled] { opacity: 0.42; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.tabs .tab { padding: 5px 11px; font-size: 13px; border-radius: 999px; }
.tabs .tab i { font-style: normal; color: var(--muted); font-size: 11px; margin-left: 2px; }
.tabs .tab.on { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); font-weight: 500; }
.tabs .tab.on i { color: var(--accent); }
#tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; }
#tabs .btn.on { font-weight: 500; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: transform 0.12s;
}
.card:active { transform: scale(0.98); }
.card .cat { font-size: 12px; color: var(--accent); margin-bottom: 6px; }
.card .title { font-size: 17px; font-weight: 500; margin-bottom: 4px; }
.card .author { font-size: 13px; color: var(--muted); }
.card .desc { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.card .prog { font-size: 12px; color: var(--accent); margin-top: 10px; }
#continue { margin-bottom: 22px; }
#continue h2, .sec-title { font-size: 14px; font-weight: 500; color: var(--muted); margin: 0 0 10px; }
#continue .card { border-left: 3px solid var(--accent); }

/* ---------- 阅读页排版（核心：舒服、护眼） ---------- */
.reader-main {
  max-width: 42rem;          /* 每行约 36~40 字，视线不必横扫全屏 */
  margin: 0 auto;
  padding: 28px 22px 80px;
}
#content { font-size: var(--fs, 19px); }
#content p {
  margin: 0 0 1em;
  line-height: var(--lh, 1.9);
  text-indent: 2em;          /* 中文首行缩进 */
  text-align: justify;
  letter-spacing: 0.02em;
}
#content p.noindent { text-indent: 0; }
.ch-title {
  font-size: 1.35em;
  font-weight: 500;
  text-align: center;
  margin: 0.4em 0 1.6em;
  color: var(--fg);
  letter-spacing: 0.08em;
}
.ch-title::after {
  content: "";
  display: block;
  width: 3em;
  height: 1px;
  background: var(--bd);
  margin: 1.1em auto 0;
}
.chap-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 40px;
}
#chap-now { color: var(--muted); font-size: 13px; }
#content + .chap-nav { border-top: 1px solid var(--bd); padding-top: 22px; }

/* ---------- 抽屉：目录 / 设置 ---------- */
#overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 30;
}
aside.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  width: min(300px, 82vw);
  background: var(--bg);
  z-index: 31;
  overflow-y: auto;
  padding: 18px;
}
#toc { left: 0; border-right: 1px solid var(--bd); }
#panel { right: 0; border-left: 1px solid var(--bd); width: min(280px, 86vw); }
.drawer h3 { font-size: 15px; font-weight: 500; margin: 2px 0 14px; }
#toc-list { list-style: none; margin: 0; padding: 0; }
#toc-list li {
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  color: var(--fg);
  line-height: 1.5;
}
#toc-list li:hover { background: var(--panel); }
#toc-list li.cur { color: var(--accent); background: var(--accent-bg); }
#toc-list li .n { color: var(--muted); font-size: 12px; margin-right: 8px; }

.set-group { margin-bottom: 20px; }
.set-group .lab { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.set-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fs-val { min-width: 3em; text-align: center; color: var(--muted); }

@media (max-width: 600px) {
  .reader-main { padding: 20px 18px 60px; }
  .bar { padding: 8px 12px; }
  .bar .sub { display: none; }
}