/* Kindle (KOA2) 专用样式 - 浅色高对比，适合墨水屏
 * v1.5.9：新增「字体选择面板」——阅读页中部点按（非翻页区）打开圆角矩形卡片式弹窗，
 * 列出后端 fonts 目录下被浏览器成功识别（@font-face 加载成功）的字体。
 * 全程不使用 position:fixed/absolute（旧 WebKit 不支持），用自然流 + display 切换实现类弹窗效果。
 */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #000000;
  font-family: "Songti SC", "Noto Serif CJK SC", "STSong", Georgia, serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
#app { max-width: none; margin: 0; padding: 0; }
/* 视图默认隐藏，由 JS 切换为 display:block */
.view { display: none; }

/* ============ 顶部菜单栏：三区（左/中/右）浮动布局 ============ */
.bar-row {
  border-bottom: 2px solid #000;
  padding: 10px 12px;
  overflow: hidden;            /* 包含浮动，避免高度塌陷 */
}
.bar-left { float: left; line-height: 68px; }
.bar-right { float: right; text-align: right; line-height: 68px; }
.bar-center {
  overflow: hidden;            /* 在两浮动之间撑满剩余空间 */
  text-align: center;
  line-height: 68px;
  white-space: nowrap;
}
/* 内容区：正常文档流，随页面一起滚动（无锁定） */
.scroll-row { padding: 0 0 40px 0; }

.ver-tag {
  font-size: 33px;
  font-weight: bold;
  color: #000;
  white-space: nowrap;
}
/* 书架底部诊断行：覆盖 ver-tag 的 nowrap/33px/bold，
 * 否则长书名/日志撑破页宽 → Kindle 整页自动缩小 */
#resume-dbg {
  white-space: normal;
  word-wrap: break-word;
  font-size: 26px;
  font-weight: normal;
  color: #555;
}
.toc-title {
  font-size: 30px;
  font-weight: normal;
  margin-left: 12px;
}
.bar-link {
  font-size: 30px;
  color: #000;
  text-decoration: none;
  margin: 0 8px;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}
.bar-btn {
  font-size: 28px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 6px 14px;
  margin: 3px;
  cursor: pointer;
  white-space: nowrap;
}

/* 底部操作栏（阅读页末尾，随内容滚动） */
.bar {
  border-bottom: 2px solid #000;
  padding: 10px 4px;
  line-height: 1.4;
  overflow: hidden;
}
.mini {
  background: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 6px 14px;
  margin: 3px;
  font-size: 28px;
  vertical-align: middle;
}
button.mini { cursor: pointer; }
.bottom-bar { border-top: 2px solid #000; border-bottom: none; margin-top: 14px; text-align: center; }

.login-box { text-align: center; margin-top: 60px; }
.login-box h1 { font-size: 42px; margin-bottom: 4px; }
.sub { color: #333; font-size: 24px; margin: 4px 0; }
.login-box input {
  font-size: 30px;
  width: 80%;
  padding: 10px;
  margin: 14px 0 10px 0;
  border: 1px solid #000;
  background: #fff;
  color: #000;
}
.login-box button {
  font-size: 30px;
  width: 84%;
  padding: 12px;
  background: #fff;
  color: #000;
  border: 2px solid #000;
  cursor: pointer;
}

.search-row { margin: 8px 0 14px 0; text-align: center; }
.search-row input {
  font-size: 36px;
  width: 65%;
  padding: 8px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
}
.search-row button {
  font-size: 36px;
  padding: 8px 14px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  cursor: pointer;
}

.msg { color: #666; font-size: 30px; text-align: center; }

.book-row {
  border: 1px solid #000;
  margin: 8px 0;
  padding: 12px 14px;
}
.book-link {
  display: block;
  font-size: 42px;
  font-weight: bold;
  color: #000;
  text-decoration: underline;
  cursor: pointer;
}
.book-meta { font-size: 30px; color: #333; margin: 6px 0 5px 0; }
.book-actions { text-align: right; font-size: 30px; }
.book-actions a {
  margin-left: 14px;
  color: #000;
  text-decoration: underline;
  cursor: pointer;
}
.res-row {
  border-bottom: 1px solid #999;
  padding: 8px 4px;
}
.res-name { font-size: 28px; }
.res-meta { font-size: 22px; color: #333; margin: 2px 0; }
.res-actions { text-align: right; }
.res-actions button {
  font-size: 26px;
  padding: 4px 10px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  cursor: pointer;
}
.res-actions .added { color: #666; font-size: 22px; padding: 0 8px; }

.ch-row {
  border-bottom: 1px solid #bbb;
  padding: 11px 6px;
}
.ch-row a { color: #000; text-decoration: none; font-size: 28px; }
/* 当前章高亮：墨水屏为灰度，浅灰底/描边几乎不可见，故用「反白」保证醒目可见 */
.ch-row.cur { background: #000; font-weight: bold; }
.ch-row.cur a { color: #fff; font-weight: bold; }
/* 目录页两侧留边距（仅作用于目录视图，不影响书架/阅读页） */
#toc-view .scroll-row { padding: 0 28px 40px 28px; }

.reader-head { text-align: center; border-bottom: 1px solid #ccc; margin-bottom: 6px; padding-bottom: 4px; }
.chapter-pos { font-size: 22px; color: #555; margin: 0; line-height: 1.3; }
/* 状态行三区：左(章页进度) / 中(缓存操作) / 右(已缓存章数)。
   旧 WebKit 不支持 flex，用 float 两侧 + 中间 inline-block（DOM 顺序：左→右→中，居中才准确） */
.head-row { text-align: center; }
.head-row .head-fl { float: left; text-align: left; }
.head-row .head-fr { float: right; text-align: right; }
.head-actions { display: inline-block; }
.cache-count { font-size: 22px; color: #555; line-height: 1.3; }
button.mini.head-btn { font-size: 20px; padding: 3px 10px; margin: 2px; }
/* 章节标题：作为正文首块流动，仅在第 1 页出现，不再单独置顶常驻 */
.chapter-title-inline {
  font-size: 60px;
  font-weight: bold;
  text-align: center;
  margin: 4px 0 18px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #999;
}
/* 真分页：每页一个 .reader-page，仅当前页显示，翻页=切 display（不滚动） */
.reader-page { display: none; overflow: hidden; }
.reader-page.active { display: block; }
#reader-content { font-size: 52px; line-height: 1.35; padding: 0 0.5em; }
#reader-content p { margin: 0 0 32px 0; text-indent: 2em; }
#reader-content .loading { color: #666; text-indent: 0; }
/* 阅读视图的滚动容器不留额外底 padding，避免分页高度计算偏差 */
#reader-view .scroll-row { padding-bottom: 0; }

/* ============ 字体选择面板（阅读页中部点按打开） ============ */
/* 不用 position:fixed/absolute：打开时隐藏 #reader-content，本面板以自然流占满阅读区，
 * 视觉上等同「圆角矩形弹窗」。popup-card 为白色圆角卡片 + 黑色描边。 */
.reader-popup { display: none; padding: 16px 12px; }
.reader-popup.active { display: block; }
.popup-card {
  border: 2px solid #000;
  border-radius: 18px;
  background: #fff;
  padding: 12px 14px 16px 14px;
  /* 卡片四周留白，露出页面白底，产生「悬浮卡片」观感（无法用阴影/模糊，墨水屏适配） */
  margin: 4px 2px;
}
.popup-head { overflow: hidden; border-bottom: 1px solid #999; padding-bottom: 8px; margin-bottom: 8px; }
.popup-title { float: left; font-size: 32px; font-weight: bold; }
.popup-close {
  float: right;
  font-size: 26px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 4px 14px;
  cursor: pointer;
}
/* 「刷新」按钮：与「关闭」同款，位于其左侧 */
.popup-refresh {
  float: right;
  font-size: 26px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 4px 14px;
  cursor: pointer;
  margin-right: 8px;
}
.font-list { /* 列表区，自然流纵向排列，必要时由外层滚动 */
  font-size: 30px;
}
.font-row {
  border-bottom: 1px solid #ccc;
  padding: 12px 6px;
  cursor: pointer;
  overflow: hidden;
}
.font-row .fr-name { float: left; max-width: 80%; }
.font-row .fr-status { float: right; font-size: 24px; color: #555; }
.font-row.cur .fr-status { color: #000; font-weight: bold; }
.font-row.cur { background: #f0f0f0; }
/* 字体预览：用该字体本身渲染名称，直观看到字形差异 */
.font-row .fr-name { font-size: 34px; }
.font-empty { font-size: 28px; color: #333; padding: 10px 4px; }
/* 字体面板分组标题（常规 / 书法 / 字重） */
.font-group-title {
  font-size: 30px;
  font-weight: bold;
  color: #333;
  margin: 18px 4px 8px;
  border-bottom: 2px solid #ccc;
  padding-bottom: 4px;
}
/* 字重实时预览样张：反映当前字号 + 字体 + 描边字重 */
.font-preview {
  font-size: 38px;
  line-height: 1.5;
  color: #000;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 14px;
  margin: 12px 4px;
  text-align: center;
  word-break: break-all;
}