:root {
  --bg: #1a1d24;
  --bg2: #23272f;
  --bar: #15171c;
  --accent: #e8b04b;
  --text: #e9edf2;
  --muted: #9aa3af;
  --btn: #2c313b;
  --btn-hover: #3a414e;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: radial-gradient(circle at 50% 30%, var(--bg2), var(--bg) 70%);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* 顶部栏 */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--bar);
  border-bottom: 1px solid rgba(255,255,255,.06);
  z-index: 20;
}
.brand {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50vw;
}
.controls { display: flex; align-items: center; gap: 6px; }
.btn {
  background: var(--btn);
  color: var(--text);
  border: none;
  border-radius: 8px;
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  font-size: 16px;
  cursor: pointer;
  transition: background .15s, transform .1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: scale(.94); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.toggle.off { opacity: .45; }
.divider { width: 1px; height: 24px; background: rgba(255,255,255,.12); margin: 0 4px; }
.page-indicator {
  font-size: 14px;
  color: var(--muted);
  min-width: 64px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 舞台 */
.stage {
  position: fixed;
  top: 56px; bottom: 40px; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* ============================================================
 * 书本质感：装订书脊 + 立体厚度（单页模式，书脊恒在左侧）
 * ------------------------------------------------------------
 * 装订样式在 config.js 用 "spine" 切换：
 *   "saddle"  骑马钉（默认）——书脊上能看到两枚金属钉脚，薄册常用
 *   "perfect" 胶装        ——书脊更厚，左侧叠出页芯厚度块，厚册常用
 *   "none"    不显示书脊
 * ============================================================ */
.book {
  border-radius: 3px;
  /* 多层投影：远处大柔影 + 近处实影，让书"浮"在桌面上更立体 */
  box-shadow:
    0 26px 60px rgba(0,0,0,.55),
    0 6px 16px rgba(0,0,0,.40);
}

/* page-flip 生成的页面图片自适应 */
.book img { display: block; }

/* 懒加载页面：占位/真实图都填满整页，保证排版稳定不塌陷 */
.page { position: relative; width: 100%; height: 100%; background: #fff; overflow: hidden; }
.page-img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }

/* ---- 左侧书脊(装订边)：真实 DOM 层 .spine（含钉脚），比伪元素更可控 ---- */
.page .spine {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: clamp(14px, 2.6%, 30px);
  z-index: 3; pointer-events: none;
  /* 折缝阴影：靠近装订边深、向页面内快速淡出（仿实物窄而含蓄的装订影） */
  background: linear-gradient(90deg,
    rgba(0,0,0,.42) 0%,
    rgba(0,0,0,.16) 46%,
    rgba(0,0,0,.04) 72%,
    rgba(0,0,0,0) 100%);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.40);
}
/* 骑马钉：两枚细长白色钉脚——仿真实骑马钉，
 * 贴在页面左缘、微微一凸、低对比；位置在上约 1/4 与下约 1/4（实测实物 23%、67% 页高处） */
.page .spine .staple {
  position: absolute; left: -1px;
  width: 3px; height: 5%;
  border-radius: 1px;
  background: linear-gradient(180deg,
    #ffffff 0%, #f7f7f7 50%, #ececec 85%, #e2e2e2 100%);
  box-shadow:
    0 0 2px rgba(0,0,0,.30),          /* 四周柔影，钉脚微微"浮"在纸上 */
    1px 0 1.5px rgba(0,0,0,.45),      /* 右侧一道细影（钉脚嵌进纸里的厚度） */
    0 0 0 .5px rgba(0,0,0,.18);
}
.page .spine .staple:nth-child(1) { top: 23.3%; }
.page .spine .staple:nth-child(2) { top: 67.3%; }

/* 右侧书口(纸堆厚度)：细线 + 阴影，暗示后面还压着一叠页 */
.page::after {
  content: "";
  position: absolute; top: 0; bottom: 0; right: 0;
  width: clamp(8px, 1.6%, 16px);
  z-index: 3; pointer-events: none;
  background: linear-gradient(270deg, rgba(0,0,0,.24), rgba(0,0,0,0) 100%);
  border-right: 1px solid rgba(0,0,0,.10);
}

/* ---- 胶装：去掉骑马钉；仅在书脊内做较深的装订折缝（不再向外叠"页芯厚度块"） ---- */
body.spine-perfect .page .spine .staple { display: none; }
body.spine-perfect .page .spine {
  width: clamp(16px, 3.2%, 34px);
  background: linear-gradient(90deg,
    rgba(0,0,0,.52) 0%,
    rgba(0,0,0,.24) 44%,
    rgba(0,0,0,.06) 74%,
    rgba(0,0,0,0) 100%);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.35);
}
/* 注：胶装原先向外叠出的"页芯厚度块"已按要求去除，避免边缘多出一条浅色竖条 */

/* ---- 关闭书脊 ---- */
body.spine-none .page .spine,
body.spine-none .page::after { display: none; }

/* ---- 书脊预览切换开关（仅 config.spineSwitch=true 时显示，用于对比骑马钉/胶装） ---- */
.spine-switch {
  position: fixed; left: 16px; bottom: 16px; z-index: 20;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 9px; border-radius: 999px;
  background: rgba(20,22,28,.80); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0,0,0,.40);
}
.spine-switch .ss-label { color: #cfd2da; font-size: 12px; margin-right: 2px; }
.spine-switch button {
  border: 0; cursor: pointer; font-size: 13px; line-height: 1;
  color: #cfd2da; background: rgba(255,255,255,.08);
  padding: 6px 13px; border-radius: 999px; transition: .15s;
}
.spine-switch button:hover { background: rgba(255,255,255,.18); }
.spine-switch button.on { color: #fff; background: var(--accent); }
@media (max-width: 600px) {
  .spine-switch { left: 50%; transform: translateX(-50%); bottom: 12px; }
}

/* 加载 */
.loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--bg);
  z-index: 10;
  transition: opacity .4s;
}
.loader.hide { opacity: 0; pointer-events: none; }
.spinner {
  width: 42px; height: 42px;
  border: 4px solid rgba(255,255,255,.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.loader-text { color: var(--muted); font-size: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 底部提示 + 备案号 */
.hintbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--bar);
  border-top: 1px solid rgba(255,255,255,.06);
  z-index: 20;
}
.hintbar #hint {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* 窄屏自动省略，给备案号留位置 */
}
/* 工信部备案号：右下角可点击链接 */
.hintbar .beian {
  flex: 0 0 auto;
  margin-left: 12px;
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}
.hintbar .beian:hover { color: var(--accent); }
@media (max-width: 600px) {
  .hintbar { justify-content: center; }
  .hintbar #hint { display: none; }   /* 手机上只留备案号，居中显示 */
}

/* 全屏时的边距微调 */
:fullscreen .stage { top: 0; bottom: 0; }
:fullscreen .topbar, :fullscreen .hintbar { display: none; }

/* ============================================================
 * 强制单页显示（每屏只显示一页，永不左右并排）
 * 原理：StPageFlip 仅在「容器宽 < 2×minWidth」时才用单页(portrait)，
 *       故把 minWidth 设得足够大以永远触发单页；
 *       再用下面的规则抵消引擎写入的 inline min-width，并让页面按高度自适应。
 * ============================================================ */
#book { width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; }
#book .stf__wrapper { width: 100% !important; height: 100% !important; min-width: 0 !important; }
#book .stf__parent { width: 100% !important; height: 100% !important; }
#book .stf__block { width: 100% !important; height: 100% !important; }