:root {
  --bg1: #4E5565;
  --bg2: #565f72;
  --pay-green: #09bb07;
  --pay-green-d: #07a006;
  --bar-bg: #0d0a08;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background: radial-gradient(130% 120% at 50% 0%, var(--bg2) 0%, var(--bg1) 65%);
  color: #f3e9dc;
  display: flex; flex-direction: column;
}

/* kuhuace 同款：放开双指缩放（翻页引擎默认 pan-y 会挡掉 pinch） */
.stf__parent { touch-action: pan-y pinch-zoom !important; }

/* ---------- 书区 ---------- */
#bookWrap {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
  padding: 8px 6px 0;
}
#book { position: relative; transition: transform .45s ease; }

#book .page {
  background: #fff;
  color: #222;
  font-size: 12px;
  overflow: hidden;
}
#book .page img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* ---------- 第 20 页 整页付款墙（深色金尊版，完全仿参考页） ---------- */
.paywall { background: #0a0705; overflow: hidden; }
.paywall .pw-inner {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .55em;
  background: radial-gradient(130% 100% at 50% 0%, #1c1305 0%, #0a0705 72%);
  padding: 1.2em 7%;
  text-align: center;
}
.pw-lock { line-height: 0; }
.pw-lock svg { width: 2.4em; height: 2.4em; }
.pw-badge {
  border: 1px solid #8a6d35; color: #e2c274;
  font-size: .72em; letter-spacing: 2px;
  padding: .32em 1.3em; border-radius: 999px;
  background: rgba(138,109,53,.12);
}
.pw-title {
  font-family: Georgia, "STZhongsong", "SimSun", serif;
  color: #e8c56a; font-size: 1.45em; font-weight: 700;
  letter-spacing: 2px;
}
.pw-quote {
  background: #161009;
  border-left: 3px solid #b98f3e;
  border-radius: 8px;
  padding: .8em 1em;
  font-size: .74em; line-height: 1.9;
  color: #e9ddc8; text-align: left;
}
.pw-quote span { color: #d9ab52; }
.pw-price { display: flex; align-items: baseline; justify-content: center; gap: .7em; }
.pp-label { color: #8f8378; font-size: .82em; letter-spacing: 1px; }
.pp-num {
  font-family: Georgia, "STZhongsong", "SimSun", serif;
  color: #e8c56a; font-size: 2.1em; font-weight: 700; line-height: 1;
}
.pp-orig { color: #7a6f63; font-size: .78em; text-decoration: line-through; }
.pw-qr {
  display: block;
  width: 9em; max-width: 70%;
  background: #fff;
  border: none; border-radius: .8em;
  padding: 0; cursor: pointer;
  box-shadow: 0 6px 24px rgba(216,178,92,.28);
}
.pw-qr img {
  width: 100%; height: auto; display: block;
  border-radius: .8em; pointer-events: none;
}
.pw-scantip { color: #d9ab52; font-size: .72em; letter-spacing: 1px; }

/* 「款已付，继续读」金色大按钮 */
.continue-btn {
  display: flex; width: 100%; max-width: 15em;
  background: linear-gradient(180deg, #f3d98b 0%, #d9ae4a 55%, #c9992f 100%);
  color: #3a2a08; font-weight: 700; font-size: .95em; letter-spacing: 2px;
  border: none; border-radius: 999px;
  padding: .75em 1em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(201,153,47,.35);
  transition: transform .1s, filter .15s;
}
.continue-btn .bi { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.continue-btn:active { transform: scale(.96); filter: brightness(.92); }
.pw-note { color: #8f8378; font-size: .66em; letter-spacing: 1px; }

/* 「返回免费试读区」暗色按钮 */
.backfree-btn {
  display: block; width: 100%; max-width: 15em;
  background: #171310;
  border: 1px solid #4a3c28; color: #cbb98f;
  font-size: .8em; letter-spacing: 2px;
  border-radius: 999px;
  padding: .7em 1em;
  cursor: pointer;
  transition: transform .1s, background .15s;
}
.backfree-btn:active { transform: scale(.96); background: #211a13; }

/* ---------- 底部控制条（仿酷画册） ---------- */
.bottombar {
  flex: 0 0 auto;
  height: 54px;
  background: var(--bar-bg);
  display: flex; align-items: center; justify-content: center;
  gap: 20px;
  padding: 0 12px calc(env(safe-area-inset-bottom) * .5);
}
.cbtn {
  width: 36px; height: 36px;
  background: none; border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: .9;
  transition: opacity .15s, transform .1s;
}
.cbtn svg { width: 20px; height: 20px; display: block; }
.cbtn:active { transform: scale(.9); opacity: .7; }
.cbtn:hover { opacity: 1; }

.pager {
  display: flex; align-items: center;
  background: #fff;
  border-radius: 4px;
  height: 32px;
  padding: 0 8px 0 6px;
}
#pageInput {
  width: 40px;
  border: none; outline: none;
  font-size: 14px; color: #222;
  text-align: right;
  background: transparent;
}
.pager-total { color: #555; font-size: 13px; white-space: nowrap; }

/* ---------- 弹窗 ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal-mask { position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.modal-card {
  position: relative;
  background: #fff; color: #333;
  border-radius: 16px;
  padding: 22px 22px 18px;
  width: min(86vw, 360px);
  text-align: center;
  animation: pop .18s ease-out;
}
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-close {
  position: absolute; top: 6px; right: 10px;
  border: none; background: none;
  font-size: 28px; color: #999; cursor: pointer; line-height: 1;
}
.modal-title { font-size: 18px; font-weight: 700; color: var(--pay-green); margin-bottom: 14px; }
.modal-qr { width: min(70vw, 280px); display: block; margin: 0 auto; border-radius: 8px; }
.modal-tip { margin-top: 12px; font-size: 13px; color: #777; line-height: 1.7; }
.modal .continue-btn { margin-top: 16px; }
.modal-note { margin-top: 10px; font-size: 12px; color: #999; }

/* ---------- 提示浮层 ---------- */
#toast, #hintToast {
  position: fixed; left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  background: rgba(20,16,12,.92);
  color: #fff; font-size: 15px;
  padding: 12px 26px; border-radius: 10px;
  animation: pop .2s ease-out;
  pointer-events: none;
}
#toast { top: 50%; transform: translate(-50%,-50%); font-weight: 700; background: rgba(9,187,7,.95); }
#hintToast { bottom: 76px; }
#toast[hidden], #hintToast[hidden] { display: none; }

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
  .bottombar { gap: 14px; }
  .cbtn { width: 42px; height: 42px; }
  .cbtn svg { width: 22px; height: 22px; }
  .pager { height: 34px; }
  #pageInput { width: 44px; font-size: 15px; }
}