/*
 * book.css — 前台书本风格样式
 * 结构：CSS 变量 → 场景/封面 → 开本左右页 → 书签 → 卡片/表单/关于 → 响应式与动画
 * 配色对齐仿站：暖棕封面 + 纸色内页 + terracotta/sage 书签色
 */

/* ----- 设计令牌（颜色变量） ----- */
:root {
  --ink: #3d3d3d;              /* 正文主色 */
  --ink-muted: #7a7268;        /* 次要文字 */
  --ink-light: #a09a90;        /* 更浅辅助文字 */
  --paper: #faf7f2;            /* 纸页浅色 */
  --paper-deep: #f5ede3;       /* 纸页深色（渐变终点） */
  --accent: #d4956b;           /* 强调色（按钮/链接） */
  --accent-hover: #e0a87d;     /* 强调色悬停 */
  --sage: #a8b5a0;             /* 相册书签色 */
  --terracotta: #c4785a;       /* 感悟书签色 */
  --warm: #c4a574;             /* 留言书签色 */
  --cream-dark: #b8a48a;       /* 友链书签色 */
  --ink-btn: #4a4036;          /* 首页/合上书本书签 */
  --cover-1: #c4956a;          /* 封面渐变色 1 */
  --cover-2: #a87b52;          /* 封面渐变色 2 */
  --cover-3: #8b6340;          /* 封面渐变色 3 */
  /* 纸叠厚度阴影：静止页 / 翻页纸 / 翻盖共用，避免动画时立体感消失 */
  --thick-right:
    2px 2px 0 #e8ddcf,
    4px 4px 0 #dccfb8,
    6px 6px 0 #e5d9c8,
    8px 8px 0 #d0c2a8,
    6px 10px 20px rgba(0, 0, 0, .14);
  --thick-left:
    -2px 2px 0 #e8ddcf,
    -4px 4px 0 #dccfb8,
    -6px 6px 0 #e5d9c8,
    -8px 8px 0 #d0c2a8,
    -6px 10px 20px rgba(0, 0, 0, .14);
  --thick-cover:
    2px 2px 0 #f7f1e8,
    4px 4px 0 #e2d5c0,
    6px 6px 0 #f0e8dc,
    8px 8px 0 #d6c6ae,
    10px 10px 0 #ebe2d4,
    12px 12px 0 #cdbda4,
    14px 14px 0 #e6dccb,
    16px 16px 0 #c4b496,
    12px 16px 26px rgba(0, 0, 0, .28);
  /* 响应式：安全区与移动端预留高度 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --mobile-nav-h: 0px;
  --site-footer-space: 2.6rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* 全站无滚动条 */
  font-family: "Noto Serif SC", "Source Han Serif SC", Georgia, "Songti SC", "SimSun", serif;
  color: var(--ink);
  /* 与壁纸底色接近，图片未加载时也不刺眼 */
  background: #cfe8d9;
  line-height: 1.8;
}

/* 壁纸挂在 body，低于版权；书本场景再高于版权 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url("../img/scene-bg.jpg") center center / cover no-repeat;
  opacity: .8;
  pointer-events: none;
}

a { color: inherit; text-decoration: none; }

/* ----- 全屏场景（透明舞台，不盖住版权） ----- */
.scene {
  position: fixed;
  inset: 0;
  z-index: 2; /* 高于版权，书本压在版权之上 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1.25rem 2rem 1.5rem;
  background: transparent;
  /* 空白处不拦截点击，可点到底部备案链接 */
  pointer-events: none;
}
.scene::before,
.scene::after {
  display: none;
}
.scene > * {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

/* ----- 页脚版权：在壁纸之上、书本之下；被书挡住时不影响翻页 ----- */
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: .45rem 1rem .65rem;
  text-align: center;
  pointer-events: none;
  font-family: "Noto Serif SC", "Source Han Serif SC", Georgia, "Songti SC", serif;
  font-size: .68rem;
  letter-spacing: .04em;
  line-height: 1.55;
  color: var(--ink-light);
  opacity: .85;
}
.site-footer p {
  margin: 0;
}
.site-footer .footer-sep {
  margin: 0 .45rem;
  opacity: .55;
}
.site-footer a {
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease, opacity .2s ease;
}
.site-footer a:hover {
  color: var(--ink-muted);
  border-bottom-color: rgba(122, 114, 104, .35);
  opacity: 1;
}
.site-footer a.footer-rss {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  border-bottom: none;
  opacity: .95;
}
.site-footer a.footer-rss:hover {
  border-bottom: none;
  opacity: 1;
}
.site-footer a.footer-rss img {
  display: block;
  width: 36px;
  height: 14px;
  image-rendering: pixelated;
}

/* ----- 左下角背景音乐播放器（默认可收起） ----- */
.music-player {
  --mp-ease: cubic-bezier(.33, 1, .32, 1);
  --mp-list-ms: 420ms;
  position: fixed;
  left: max(0.85rem, 1.5vw);
  bottom: max(2.6rem, 5.5vh);
  z-index: 95;
  width: auto;
  max-width: min(300px, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--ink, #3a2e24);
  font-family: "Noto Serif SC", "Source Han Serif SC", Georgia, "Songti SC", serif;
  pointer-events: none;
}
.music-player:not(.is-expanded) {
  /* 收起态允许歌名完整铺开，不被容器裁切 */
  max-width: min(92vw, 36rem);
}
.music-player.is-expanded {
  width: min(278px, calc(100vw - 2rem));
  max-width: min(300px, calc(100vw - 2rem));
}
.music-player-drag {
  display: none;
}
.music-player-card {
  position: relative;
  pointer-events: auto;
  width: auto;
  padding: .4rem .45rem;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 250, 242, .92), rgba(244, 232, 214, .88));
  border: 1px solid rgba(139, 99, 64, .22);
  box-shadow:
    0 8px 24px rgba(58, 38, 20, .14),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: width .22s var(--mp-ease), padding .22s var(--mp-ease);
}
.music-player.is-expanded .music-player-card {
  width: 100%;
  padding: .65rem .75rem .7rem;
}
.music-player-compact {
  display: flex;
  align-items: center;
  gap: .3rem;
}
.music-player.is-expanded .music-player-compact {
  display: none;
}
/* 收起态：歌名在面板下方；超长不裁切，完整展示 */
.music-player-title-mini {
  pointer-events: none;
  max-width: none;
  font-size: .7rem;
  letter-spacing: .03em;
  color: rgba(90, 74, 58, .45);
  white-space: normal;
  overflow: visible;
  word-break: break-word;
  line-height: 1.3;
  padding-left: .2rem;
}
.music-player.is-expanded .music-player-title-mini {
  display: none;
}
.music-player-panel {
  display: none;
  flex-direction: column;
  gap: .45rem;
}
.music-player.is-expanded .music-player-panel {
  display: flex;
}
.music-player-title {
  min-width: 0;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.music-player-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--cover-1, #c4956a), var(--cover-3, #8b6340));
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(90, 63, 40, .25);
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}
.music-player-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.music-player-btn:active {
  transform: translateY(0);
}
.music-player-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.music-player-btn.music-player-ghost {
  background: rgba(139, 99, 64, .12);
  color: var(--cover-3, #8b6340);
  box-shadow: none;
}
.music-player-btn.music-player-ghost:hover {
  background: rgba(139, 99, 64, .2);
  filter: none;
}
.music-player-btn.music-player-ghost.is-open {
  background: rgba(139, 99, 64, .28);
}
.music-player-toggle {
  width: 36px;
  height: 36px;
}
.music-player-toggle svg,
.music-player-toggle-lg svg {
  width: 18px;
  height: 18px;
}
.music-player-toggle-lg {
  width: 42px;
  height: 42px;
}
.music-player-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .22rem;
  flex-wrap: nowrap;
  width: 100%;
}
.music-player-progress-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  opacity: .75;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.music-player-progress-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 4px;
  border-radius: 999px;
  background: rgba(139, 99, 64, .22);
  outline: none;
  cursor: pointer;
}
.music-player-progress-row input[type="range"]:disabled {
  cursor: default;
  opacity: .55;
}
.music-player-progress-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cover-2, #a87b52);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.music-player-progress-row input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cover-2, #a87b52);
  border: 1px solid rgba(255, 255, 255, .7);
}
/* 音量按钮：点击弹出纵向滑动条 */
.music-player-vol {
  position: relative;
  flex: 0 0 auto;
}
.music-player-vol-popover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + .45rem);
  transform: translateX(-50%) translateY(6px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  width: 44px;
  padding: .55rem .35rem .65rem;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 250, 242, .98), rgba(244, 232, 214, .96));
  border: 1px solid rgba(139, 99, 64, .22);
  box-shadow: 0 8px 20px rgba(58, 38, 20, .16);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.music-player-vol.is-open .music-player-vol-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.music-player-vol #music-player-vol-btn.is-open,
.music-player-vol.is-open #music-player-vol-btn {
  background: rgba(139, 99, 64, .28);
}
#music-player-vol-label {
  font-size: .62rem;
  opacity: .7;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.music-player-vol input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 6px;
  height: 72px;
  padding: 0;
  border-radius: 999px;
  background: rgba(139, 99, 64, .25);
  outline: none;
  cursor: pointer;
}
.music-player-vol input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cover-2, #a87b52);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.music-player-vol input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cover-2, #a87b52);
  border: 1px solid rgba(255, 255, 255, .7);
}
.music-player-mode-icon {
  display: inline-flex;
  line-height: 0;
}
/* 列表在卡片上方：打开上滑展开，关闭下滑收起 */
.music-player-list {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + .45rem);
  z-index: 3;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  padding: 0 .25rem;
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255, 250, 242, .96), rgba(244, 232, 214, .94));
  border: 1px solid transparent;
  box-shadow: none;
  scrollbar-width: thin;
  transition:
    max-height var(--mp-list-ms) var(--mp-ease),
    opacity var(--mp-list-ms) var(--mp-ease),
    transform var(--mp-list-ms) var(--mp-ease),
    padding var(--mp-list-ms) var(--mp-ease),
    border-color var(--mp-list-ms) ease,
    box-shadow var(--mp-list-ms) ease;
}
.music-player.is-list-open .music-player-list {
  max-height: 180px;
  overflow-y: auto;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  padding: .35rem;
  border-color: rgba(139, 99, 64, .2);
  box-shadow: 0 8px 22px rgba(58, 38, 20, .14);
}
.music-player-list-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  width: 100%;
  padding: .38rem .45rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .78rem;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.music-player-list-item:hover {
  background: rgba(139, 99, 64, .1);
}
.music-player-list-item.is-active {
  background: rgba(168, 123, 82, .18);
  font-weight: 600;
}
.music-player-list-idx {
  flex: 0 0 1.4em;
  opacity: .45;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
.music-player-list-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.book-scene {
  position: relative;
  width: min(1000px, 96vw);
  height: min(680px, 90vh);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 侧边厚度与探出书签不被裁切 */
  overflow: visible;
}

/* ----- 合上态立体书：立方体 8 角由 --dock-rx/rz/thick + 盒模型插值丝滑形变 ----- */
@property --dock-rx {
  syntax: "<angle>";
  inherits: true;
  /* 略俯视：封面多朝前；过大像纯俯视 */
  initial-value: 42deg;
}
@property --dock-rz {
  syntax: "<angle>";
  inherits: true;
  initial-value: 10deg;
}
@property --dock-thick {
  syntax: "<length>";
  inherits: true;
  initial-value: 32px;
}
@property --dock-text-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.34;
}

.book-dock {
  --dock-h: 25vh;
  /* 封面略朝前；桌面投影单独水平铺开，不随书斜转 */
  --dock-rx: 42deg;
  --dock-rz: 10deg;
  --dock-thick: 32px;
  --dock-text-scale: 0.34;
  --dock-ease: cubic-bezier(.33, 1, .32, 1);
  --dock-ms: 720ms;
  position: fixed;
  right: max(1.75rem, 3vw);
  bottom: max(1.75rem, 3.5vh);
  z-index: 90;
  width: calc(var(--dock-h) * .9);
  height: var(--dock-h);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  perspective: 1100px;
  perspective-origin: 50% 40%;
  transform-style: preserve-3d;
  overflow: visible;
  will-change: left, top, width, height, --dock-rx, --dock-rz, --dock-thick, --dock-text-scale, opacity;
}
.book-dock.is-ready {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* 形变中：用 left/top/width/height 自由定位，与姿态角同步过渡 */
.book-dock.is-free {
  right: auto;
  bottom: auto;
}
.book-dock.is-morphing {
  transition:
    left var(--dock-ms) var(--dock-ease),
    top var(--dock-ms) var(--dock-ease),
    width var(--dock-ms) var(--dock-ease),
    height var(--dock-ms) var(--dock-ease),
    --dock-rx var(--dock-ms) var(--dock-ease),
    --dock-rz var(--dock-ms) var(--dock-ease),
    --dock-thick var(--dock-ms) var(--dock-ease),
    --dock-text-scale var(--dock-ms) var(--dock-ease),
    opacity .22s ease;
}
.book-dock.is-handoff {
  pointer-events: none;
  transition: opacity .22s ease;
}
.book-dock:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 8px;
  border-radius: 8px;
}
/* 桌面投影：贴在水平桌面，椭圆扁压、不旋转，避免桌面显得是斜的 */
.book-dock-shadow {
  position: absolute;
  left: 14%;
  right: 10%;
  bottom: 10%;
  height: 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, .08) 42%, transparent 72%);
  transform: none;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  transition: opacity var(--dock-ms) var(--dock-ease);
}
.book-dock.is-cover-pose .book-dock-shadow {
  opacity: .1;
}
.book-dock-3d {
  position: absolute;
  left: 8%;
  top: 2%;
  width: 84%;
  height: 78%;
  transform-style: preserve-3d;
  overflow: visible;
  /*
   * 顺序必须是 rotateX(...) rotateZ(...)（CSS 从右到左执行）：
   * 先在正对镜头时转桌面朝向，再绕 X 倒下俯视 → 书贴桌面；
   * 若写成 rotateZ rotateX，会变成先倒下再绕屏幕拧，像斜立空中。
   */
  transform: rotateX(var(--dock-rx)) rotateZ(var(--dock-rz));
  z-index: 1;
  transition:
    left var(--dock-ms) var(--dock-ease),
    top var(--dock-ms) var(--dock-ease),
    width var(--dock-ms) var(--dock-ease),
    height var(--dock-ms) var(--dock-ease);
}
/* 放大到封面时铺满代理层，与真实封面几何对齐，避免交接时文字跳变 */
.book-dock.is-cover-pose .book-dock-3d {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.book-dock.is-ready:not(.is-morphing):not(.is-cover-pose):hover .book-dock-3d {
  transform: rotateX(var(--dock-rx)) rotateZ(var(--dock-rz)) translateY(-3px);
  transition:
    transform .22s ease,
    left var(--dock-ms) var(--dock-ease),
    top var(--dock-ms) var(--dock-ease),
    width var(--dock-ms) var(--dock-ease),
    height var(--dock-ms) var(--dock-ease);
}
.book-dock-cover {
  position: absolute;
  inset: 0;
  /* 不用 z-index，避免打平 preserve-3d 导致封底/立面被盖住 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background:
    linear-gradient(125deg, rgba(255,255,255,.1), transparent 40%),
    linear-gradient(145deg, var(--cover-1), var(--cover-2) 48%, var(--cover-3));
  /* 书脊侧几乎直角，与 spine 面贴合；外缘略圆 */
  border-radius: 1px 6px 6px 1px;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, .14),
    inset 3px 0 8px rgba(0, 0, 0, .1),
    0 0 0 1px rgba(90, 63, 40, .18);
  transform: translateZ(calc(var(--dock-thick) * .5));
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  transition: box-shadow var(--dock-ms) var(--dock-ease);
}
.book-dock.is-cover-pose .book-dock-cover {
  border-radius: 0 8px 8px 0;
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, .16),
    var(--thick-cover);
}
/* 靠近书脊的柔和凹槽，与书脊色衔接，避免生硬黑边 */
.book-dock-cover::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 10%;
  background: linear-gradient(90deg, rgba(90, 63, 40, .28), rgba(139, 99, 64, .08), transparent);
  pointer-events: none;
}
/* 封底：贴在 -Z，与封面夹出书厚；俯视时沿纸口/书脊边能看到硬壳边 */
.book-dock-back {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(145deg, #6a4a30 0%, var(--cover-3) 42%, #4a3220 100%);
  border-radius: 1px 1px 1px 6px;
  transform: rotateY(180deg) translateZ(calc(var(--dock-thick) * .5));
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow:
    inset 0 0 16px rgba(0, 0, 0, .28),
    inset 0 0 0 1px rgba(0, 0, 0, .12);
}
/*
 * 与真实封面同款排版；字号/间距用 --dock-text-scale 参与布局缩放
 * （不用 transform:scale，避免 flex 居中按未缩放盒计算导致错位）
 */
.book-dock-inner {
  position: relative;
  z-index: 1;
  width: 84%;
  text-align: center;
  padding: calc(2rem * var(--dock-text-scale));
  transform: translateZ(1px);
  box-sizing: border-box;
}
.book-dock-title {
  display: block;
  font-family: "Noto Serif SC", "Source Han Serif SC", Georgia, "Songti SC", serif;
  font-size: calc(clamp(2rem, 4vw, 2.75rem) * var(--dock-text-scale));
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.25;
  margin-bottom: calc(1.25rem * var(--dock-text-scale));
  text-shadow: 0 1px 2px rgba(0, 0, 0, .22);
}
.book-dock-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(.75rem * var(--dock-text-scale));
  margin-bottom: calc(1.25rem * var(--dock-text-scale));
  opacity: .9;
}
.book-dock-ornament::before,
.book-dock-ornament::after {
  content: "";
  width: calc(48px * var(--dock-text-scale));
  height: 1px;
  background: rgba(255, 255, 255, .7);
}
.book-dock-ornament span {
  width: calc(8px * var(--dock-text-scale));
  height: calc(8px * var(--dock-text-scale));
  border: 1px solid rgba(255, 255, 255, .8);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.book-dock-slogan {
  display: block;
  font-size: calc(1rem * var(--dock-text-scale));
  letter-spacing: .18em;
  opacity: .92;
  margin-bottom: calc(3.5rem * var(--dock-text-scale));
  line-height: 1.35;
}
.book-dock-cta {
  display: block;
  font-size: calc(.85rem * var(--dock-text-scale));
  letter-spacing: .25em;
  opacity: .8;
}
/* 从缩小态还原时，禁止封面入场/呼吸动画造成最后一刻文字跳动 */
#cover-root.is-dock-handoff .cover-inner,
#cover-root.is-dock-handoff .cover-cta {
  animation: none !important;
}
/*
 * 书脊：以左缘为中线，rotateY(-90°) 后宽度=书厚，正好夹在正反封面之间
 * 颜色与封面棕系一致，带轻脊线，避免过深色块突兀
 */
.book-dock-spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--dock-thick);
  transform-origin: center center;
  transform: translateX(-50%) rotateY(-90deg);
  border-radius: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, .2) 0%,
      rgba(255, 255, 255, .07) 24%,
      transparent 48%,
      rgba(0, 0, 0, .1) 76%,
      rgba(0, 0, 0, .26) 100%
    ),
    linear-gradient(
      180deg,
      var(--cover-3) 0%,
      var(--cover-2) 38%,
      #7a5636 68%,
      var(--cover-3) 100%
    );
  box-shadow:
    inset 1px 0 2px rgba(255, 255, 255, .1),
    inset -2px 0 5px rgba(0, 0, 0, .26);
}
/* 纸口侧：略缩高度，硬壳上下露出一点，像夹在封面/封底之间 */
.book-dock-pages-side {
  position: absolute;
  top: 4%;
  bottom: 4%;
  right: 0;
  width: calc(var(--dock-thick) * .78);
  transform-origin: center center;
  transform: translateX(50%) rotateY(90deg);
  border-radius: 0 1px 1px 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .07), transparent 40%),
    repeating-linear-gradient(
      180deg,
      #faf6ef 0px,
      #faf6ef 1.5px,
      #e8dcc8 1.5px,
      #e8dcc8 2.5px
    );
  box-shadow: inset 1px 0 3px rgba(0, 0, 0, .07);
}
/* 底边纸口：厚度小于书壳，上下留给封面/封底硬壳边 */
.book-dock-pages-bottom {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 0;
  height: calc(var(--dock-thick) * .78);
  transform-origin: center center;
  transform: translateY(50%) rotateX(90deg);
  background:
    linear-gradient(0deg, rgba(0, 0, 0, .08), transparent 42%),
    repeating-linear-gradient(
      90deg,
      #faf6ef 0px,
      #faf6ef 1.5px,
      #e8dcc8 1.5px,
      #e8dcc8 2.5px
    );
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .08);
}
/* 底边封底硬壳条：纸块靠桌一侧，俯视时能看见封底边 */
.book-dock-back-edge {
  position: absolute;
  left: 1%;
  right: 1%;
  bottom: 0;
  height: calc(var(--dock-thick) * .14);
  transform-origin: center center;
  transform: translateY(50%) translateZ(calc(var(--dock-thick) * -.36)) rotateX(90deg);
  background: linear-gradient(90deg, #5c422c, var(--cover-3) 40%, #4a3220);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
  border-radius: 0 0 1px 1px;
}
/* 底边封面硬壳条：纸块靠上一侧 */
.book-dock-cover-edge {
  position: absolute;
  left: 1%;
  right: 1%;
  bottom: 0;
  height: calc(var(--dock-thick) * .14);
  transform-origin: center center;
  transform: translateY(50%) translateZ(calc(var(--dock-thick) * .36)) rotateX(90deg);
  background: linear-gradient(90deg, var(--cover-2), var(--cover-1) 50%, var(--cover-3));
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .18);
  border-radius: 0 0 1px 1px;
}

/* 形变中：真实封面立刻交给立体书代理，避免两套画面跳变 */
.scene.is-cover-docked .book-scene,
.scene.is-cover-docking .book-scene {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.scene.is-cover-docked {
  cursor: default;
}

/* ----- 闭合封面：几何与翻盖同为右半 50%，厚度只用阴影（不占布局） ----- */
#cover-root {
  position: absolute;
  inset: 0;
  z-index: 20;
}

.book-cover-block {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
}

.book-cover-front {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(135deg, var(--cover-1), var(--cover-2), var(--cover-3));
  border-radius: 0 8px 8px 0;
  box-shadow:
    inset 0 0 50px rgba(0,0,0,.16),
    var(--thick-cover);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  cursor: pointer;
  transition: filter .25s ease;
  text-decoration: none;
}
.book-cover-front:hover {
  filter: brightness(1.03);
}
.book-cover-front::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 28px;
  background: linear-gradient(90deg, rgba(0,0,0,.35), transparent);
}

.book-cover-spine {
  position: absolute;
  top: 0;
  left: -12px;
  width: 12px;
  height: 100%;
  z-index: 6;
  background: linear-gradient(90deg, #5a3f28, #8b6340 45%, #6e4c30);
  border-radius: 5px 0 0 5px;
  box-shadow: inset -4px 0 8px rgba(0,0,0,.35);
}

/* 装饰性纸口：挂在封面外侧，不参与布局/翻页铰链 */
.book-cover-pages {
  position: absolute;
  top: 10px;
  right: -14px;
  width: 14px;
  bottom: 10px;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      180deg,
      #faf6ef 0px,
      #faf6ef 2px,
      #e5d8c4 2px,
      #e5d8c4 3px
    );
  border-radius: 0 2px 2px 0;
  box-shadow: inset 2px 0 4px rgba(0,0,0,.08);
}
.book-cover-pages-bottom {
  position: absolute;
  left: 4px;
  right: -10px;
  bottom: -12px;
  height: 12px;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      #faf6ef 0px,
      #faf6ef 2px,
      #e5d8c4 2px,
      #e5d8c4 3px
    );
  box-shadow: inset 0 3px 6px rgba(0,0,0,.1);
}

.cover-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem;
  animation: fadeUp .9s ease both;
}
.cover-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: .12em;
  margin-bottom: 1.25rem;
}
.cover-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  opacity: .9;
}
.cover-ornament::before,
.cover-ornament::after {
  content: "";
  width: 48px;
  height: 1px;
  background: rgba(255,255,255,.7);
}
.cover-ornament span {
  width: 8px;
  height: 8px;
  border: 1px solid rgba(255,255,255,.8);
  transform: rotate(45deg);
}
.cover-slogan {
  font-size: 1rem;
  letter-spacing: .18em;
  opacity: .92;
  margin-bottom: 3.5rem;
}
.cover-cta {
  font-size: .85rem;
  letter-spacing: .25em;
  opacity: .8;
  animation: pulseSoft 2.4s ease-in-out infinite;
}
/* ----- 打开的书本：左右各 50%，与翻页纸几何一致；厚度仅用阴影 ----- */
.book-open {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  animation: fadeInBook .55s ease both;
}
.book-open.is-settled,
.book-open.is-cover-opening,
.book-open.is-cover-closing {
  animation: none !important;
}
.book-left-side, .book-right-side {
  position: relative;
  width: 50%;
  height: 100%;
  z-index: 4; /* 压住非当前书签主体，只留尖端在页外 */
}
.book-left-page, .book-right-page {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--paper), var(--paper-deep));
  overflow: hidden;
}
.book-left-page {
  border-radius: 8px 0 0 8px;
  box-shadow:
    inset -10px 0 20px rgba(0,0,0,.05),
    var(--thick-left);
}
.book-right-page {
  border-radius: 0 8px 8px 0;
  box-shadow:
    inset 10px 0 20px rgba(0,0,0,.05),
    var(--thick-right);
}
.book-left-page::before,
.book-right-page::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 30px;
  pointer-events: none;
  z-index: 5;
}
.book-left-page::before {
  right: 0;
  background: linear-gradient(270deg, rgba(0,0,0,.1), transparent);
}
.book-right-page::before {
  left: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.1), transparent);
}

/* 旧厚度层已移除；若残留 DOM 则隐藏，避免翻页走位 */
.book-edge { display: none !important; }
.page-content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 1.75rem 1.75rem 1.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* 同章节内切换右侧详情：轻微淡入，无翻页 */
#page-right.is-content-swap {
  animation: inChapterFade .18s ease both;
}
@keyframes inChapterFade {
  from { opacity: .35; }
  to   { opacity: 1; }
}
.page-scroll {
  flex: 1;
  overflow-y: auto;
  padding-right: .25rem;
}
.page-scroll::-webkit-scrollbar { width: 4px; }
.page-scroll::-webkit-scrollbar-thumb { background: rgba(212,149,107,.35); border-radius: 4px; }

/* 左侧列表区：可滚动但不显示滚动条；左右留白以免选中描边被裁切 */
.list-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 3px 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.list-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.chapter-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: .35rem;
}
.chapter-sub {
  color: var(--ink-muted);
  margin-bottom: 1rem;
  font-size: .95rem;
}
.chapter-title-sm {
  font-size: 1.35rem;
  margin-bottom: .2rem;
}
.chapter-sub-sm {
  margin-bottom: .65rem;
  font-size: .85rem;
}

/* 分类筛选 */
.cat-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .65rem;
  flex-shrink: 0;
}
.cat-chip {
  display: inline-flex;
  align-items: center;
  padding: .2rem .65rem;
  font-size: .75rem;
  color: var(--ink-muted);
  background: rgba(255,255,255,.4);
  border: 1px solid rgba(212,149,107,.22);
  border-radius: 999px;
  transition: .2s ease;
}
.cat-chip:hover {
  color: var(--ink);
  border-color: var(--accent);
  background: rgba(255,255,255,.7);
}
.cat-chip.is-active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* 底部分页 */
.list-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  margin-top: .65rem;
  padding-top: .55rem;
  border-top: 1px solid rgba(212,149,107,.18);
  flex-shrink: 0;
}
.pager-btn,
.pager-num {
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 .45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  color: var(--ink-muted);
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(212,149,107,.2);
  border-radius: 6px;
  transition: .2s ease;
}
.pager-btn:hover,
.pager-num:hover {
  color: var(--ink);
  border-color: var(--accent);
}
.pager-num.is-active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.pager-btn.is-disabled {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

/* ----- 书签：非当前压纸下只露尖；悬停从纸缘伸出；当前全露 ----- */
@property --bm-out {
  syntax: "<length>";
  inherits: true;
  initial-value: 8px;
}
.bookmarks {
  --bm-step: 40px;
  --bm-tip: 8px;       /* 非当前：只露可点的一小截 */
  --bm-slide: 34px;    /* 悬停：从纸缝多伸出一截便于点击 */
  --bm-full: 22px;     /* 预留：封面当前签等 */
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  height: calc(var(--bm-step) * 5 + 34px);
  /* 高于左右页，靠 clip 只露页外部分，页内部分始终被裁掉 */
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

.bookmark {
  --bm-out: var(--bm-tip);
  --bm-depth: 0;
  pointer-events: auto;
  position: absolute;
  width: 40px;
  height: 34px;
  border: none;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: rgba(255,255,255,.95);
  transition: --bm-out .22s ease, filter .2s ease, box-shadow .2s ease;
  text-decoration: none;
}
.bookmark svg {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* 右侧：尖端探出右页外缘 */
.bookmark-right {
  left: auto;
  right: calc(-1 * var(--bm-out));
  justify-content: flex-end;
  padding: 0 7px 0 0;
  border-radius: 1px 6px 6px 1px;
  box-shadow:
    inset 4px 0 0 rgba(0,0,0,.2),
    -1px 0 0 rgba(250,246,239,.95),
    1px 2px 4px rgba(0,0,0,.18);
}
/* 左侧：尖端探出左页外缘 */
.bookmark-left {
  right: auto;
  left: calc(-1 * var(--bm-out));
  justify-content: flex-start;
  padding: 0 0 0 7px;
  border-radius: 6px 1px 1px 6px;
  box-shadow:
    inset -4px 0 0 rgba(0,0,0,.2),
    1px 0 0 rgba(250,246,239,.95),
    -1px 2px 4px rgba(0,0,0,.18);
}

/* 非当前：裁切主体，只留页外一小截可点（视觉上像压在纸下） */
.bookmark-right:not(.bookmark-current) {
  clip-path: inset(0 0 0 calc(100% - var(--bm-out) - 1px));
}
.bookmark-left:not(.bookmark-current) {
  clip-path: inset(0 calc(100% - var(--bm-out) - 1px) 0 0);
}

/*
 * 非当前悬停：沿页缘向外滑出（加大 --bm-out），clip 仍裁掉压在纸下的部分，
 * 看起来是从纸缝里伸出来，而不是浮在页面上。
 */
.bookmark-right:hover:not(.bookmark-current),
.bookmark-left:hover:not(.bookmark-current),
.bookmark-right:focus-visible:not(.bookmark-current),
.bookmark-left:focus-visible:not(.bookmark-current) {
  --bm-out: var(--bm-slide);
  filter: brightness(1.06);
  z-index: 6;
}

/* 自定义书签悬浮提示（挂在 body，避免被书签 clip-path 裁切） */
.bookmark-tip {
  position: fixed;
  z-index: 300;
  padding: .4rem .85rem;
  white-space: nowrap;
  font-family: "Noto Serif SC", "Source Han Serif SC", Georgia, "Songti SC", serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.35;
  color: var(--ink);
  background: linear-gradient(135deg, #faf7f2 0%, #f0e6d8 100%);
  border: 1px solid rgba(168, 123, 82, .38);
  border-radius: 4px;
  box-shadow: 2px 3px 12px rgba(0, 0, 0, .16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%) scale(.96);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}
.bookmark-tip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
}
/* 当前页书签不展示（已在此页，无需导航） */
.bookmark-current,
.bookmark-active {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  --bm-out: 0px;
}

/* 翻页中：原位书签隐藏，改由翻页纸上的克隆随转 */
.bookmark-is-flying {
  opacity: 0 !important;
  pointer-events: none !important;
}
.bookmarks-on-sheet {
  position: absolute;
  top: 22px; /* 与 .bookmarks 一致，保证飞行签纵向对齐 */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 12;
  pointer-events: none;
  transform-style: preserve-3d;
  overflow: visible;
}
.bookmarks-on-sheet .bookmark {
  --bm-out: 10px;
  pointer-events: none;
  /* 飞行签也只露尖，避免挡住翻页纸上的文字 */
  clip-path: inset(0 0 0 calc(100% - 11px));
}
.bookmarks-on-sheet.is-forward .bookmark {
  left: auto;
  right: -10px;
  justify-content: flex-end;
  padding: 0 7px 0 0;
  border-radius: 1px 6px 6px 1px;
  clip-path: inset(0 0 0 calc(100% - 11px));
}
.bookmarks-on-sheet.is-backward .bookmark {
  right: auto;
  left: -10px;
  justify-content: flex-start;
  padding: 0 0 0 7px;
  border-radius: 6px 1px 1px 6px;
  clip-path: inset(0 calc(100% - 11px) 0 0);
}
/* 封面翻盖上的飞行书签：略抬起以免被封面正面挡住，随翻盖转动 */
.cover-flap .bookmarks-on-sheet {
  z-index: 8;
  transform: translateZ(1px);
}
.cover-flap .bookmarks-on-sheet.is-forward .bookmark {
  left: auto;
  right: -10px;
  /* 封面缝里只露尖，随封面翻到左侧 */
  --bm-out: 12px;
  clip-path: inset(0 0 0 calc(100% - 13px));
}
.cover-flap .bookmarks-on-sheet.is-backward .bookmark {
  right: auto;
  left: -10px;
  --bm-out: 12px;
  clip-path: inset(0 calc(100% - 13px) 0 0);
}

/* 首页位置固定，其余 5 个等距靠拢 */
.bookmark-home {
  top: 0;
  background: linear-gradient(135deg, #5a524a, var(--ink-btn));
}
.bookmark-thoughts {
  top: calc(var(--bm-step) * 1);
  background: linear-gradient(135deg, #d08a6c, var(--terracotta));
}
.bookmark-album {
  top: calc(var(--bm-step) * 2);
  background: linear-gradient(135deg, #b7c3af, var(--sage));
}
.bookmark-guestbook {
  top: calc(var(--bm-step) * 3);
  background: linear-gradient(135deg, #d4b88a, var(--warm));
}
.bookmark-friends {
  top: calc(var(--bm-step) * 4);
  background: linear-gradient(135deg, #c9b59a, var(--cream-dark));
}
.bookmark-about {
  top: calc(var(--bm-step) * 5);
  bottom: auto;
  background: linear-gradient(135deg, #7a7268, #6b635a);
}

/* 合上封面：书签夹在纸口与封面之间，只在右半侧露尖 */
.book-cover-block .bookmarks {
  left: auto;
  width: 0;
  right: 0;
  top: 22px;
  z-index: 3; /* 低于 .book-cover-front(5)，主体压在封面下 */
}
.book-cover-block .bookmark-left {
  /* 合上时不应出现左侧签；兜底仍贴右 */
  left: auto;
  right: calc(-1 * var(--bm-out));
}
/* 封面：非当前靠自然遮挡露尖并悬停滑出；当前签隐藏 */
.book-cover-block .bookmark:not(.bookmark-current) {
  clip-path: none;
}
.book-cover-block .bookmark:hover:not(.bookmark-current),
.book-cover-block .bookmark:focus-visible:not(.bookmark-current) {
  --bm-out: var(--bm-slide);
  z-index: 3; /* 仍夹在纸口与封面之间 */
}

.book-scene.is-opening-cover .book-cover-pages,
.book-scene.is-opening-cover .book-cover-pages-bottom,
.book-scene.is-closing-cover .book-cover-pages,
.book-scene.is-closing-cover .book-cover-pages-bottom {
  opacity: 0 !important;
  pointer-events: none !important;
}
.book-open.is-flipping-under .bookmarks,
.book-open.is-cover-opening .bookmarks,
.book-open.is-cover-closing .bookmarks {
  pointer-events: none;
}
/* ----- 文章/留言/友链卡片 ----- */
.article-card, .message-card, .friend-card {
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(212,149,107,.18);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-bottom: .75rem;
  transition: .25s ease;
}
.message-body {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.message-body.is-collapsed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.message-body.is-collapsible {
  cursor: pointer;
}
.message-body.is-collapsible:hover {
  opacity: .92;
}
.message-reply {
  margin-top: .55rem;
  padding: .45rem .65rem;
  border-radius: 6px;
  background: rgba(168, 181, 160, .12);
  border: 1px solid rgba(168, 181, 160, .22);
}
.message-reply-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem .55rem;
  margin-bottom: .2rem;
}
.message-reply-label {
  font-size: .7rem;
  font-weight: 600;
  color: var(--sage, #8a9a7e);
  letter-spacing: .04em;
}
.message-reply-time {
  font-size: .68rem;
  color: var(--ink-light);
}
.message-reply-body {
  margin: 0;
  font-size: .82rem;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--ink);
}
.article-card { cursor: pointer; display: block; color: inherit; }
.friend-card { display: block; color: inherit; }
.article-card:hover, .friend-card:hover {
  background: rgba(255,255,255,.65);
  border-color: var(--accent);
  transform: translateX(4px);
}
/* 友链右侧列表：两行紧凑布局（名称+URL / 简介） */
.friend-card-compact {
  padding: .55rem .75rem;
  margin-bottom: .45rem;
  border-radius: 8px;
}
.friend-card-compact:hover { transform: translateX(2px); }
.friend-name-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem .55rem;
  margin-bottom: .15rem;
  min-width: 0;
}
.friend-card-compact .card-title {
  margin: 0;
  font-size: .92rem;
  line-height: 1.35;
  flex-shrink: 0;
}
.friend-url {
  font-size: .72rem;
  color: var(--ink-light);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.friend-card-compact .card-summary {
  margin: 0;
  font-size: .78rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.article-card.active {
  box-shadow: 0 0 0 2px var(--accent);
  border-color: var(--accent);
  position: relative;
  z-index: 1;
}
.article-card-compact {
  padding: .55rem .7rem;
  margin-bottom: .45rem;
  border-radius: 8px;
}
.article-card-compact:hover { transform: translateX(2px); }
/* 选中项不再右移，避免右侧描边贴边被裁切 */
.article-card-compact.active:hover { transform: none; }
.article-card-compact .meta-row { margin-bottom: .15rem; font-size: .7rem; }
.article-card-compact .card-title {
  font-size: .9rem;
  margin-bottom: .1rem;
  line-height: 1.35;
}
.article-card-compact .card-summary {
  font-size: .78rem;
  line-height: 1.4;
  -webkit-line-clamp: 1;
}
.meta-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .4rem;
  font-size: .75rem;
  color: var(--ink-light);
}
.category-tag {
  display: inline-block;
  padding: .15rem .55rem;
  background: rgba(212,149,107,.15);
  color: var(--accent);
  border-radius: 999px;
  font-size: .75rem;
}
.article-card-compact .category-tag {
  padding: .08rem .4rem;
  font-size: .68rem;
}
.card-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .25rem;
}
.card-summary {
  color: var(--ink-muted);
  font-size: .875rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.empty-hint-sm { padding: 1.5rem .75rem; font-size: .9rem; }
.prose-book {
  color: var(--ink);
  line-height: 2;
  text-align: justify;
  white-space: pre-wrap;
}
.empty-hint {
  color: var(--ink-muted);
  text-align: center;
  padding: 3rem 1rem;
}

/* ----- 相册网格与大图 ----- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}
.photo-grid-compact {
  gap: .45rem;
}
.photo-item {
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  display: block;
  transition: transform .3s ease, box-shadow .3s ease;
  border: 2px solid transparent;
}
.photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-item:hover { transform: scale(1.04); box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.photo-item.active { border-color: var(--accent); }
.photo-detail {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: .5rem 0.5rem 1.6rem;
}
.photo-detail .photo-publish-date {
  position: absolute;
  right: .35rem;
  bottom: .25rem;
  margin: 0;
  font-size: .72rem;
  letter-spacing: .04em;
  color: rgba(90, 74, 58, .38);
  font-variant-numeric: tabular-nums;
}
.photo-zoom-trigger {
  position: relative;
  display: block;
  max-width: 100%;
  max-height: 70%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
  border-radius: 8px;
}
.photo-zoom-trigger img {
  display: block;
  max-width: 100%;
  max-height: min(52vh, 420px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  transition: transform .25s ease, box-shadow .25s ease;
}
.photo-zoom-trigger:hover img {
  transform: scale(1.015);
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
}
.photo-zoom-hint {
  position: absolute;
  left: 50%;
  bottom: .75rem;
  transform: translateX(-50%);
  padding: .25rem .65rem;
  font-size: .72rem;
  letter-spacing: .08em;
  color: #fff;
  background: rgba(0,0,0,.45);
  border-radius: 999px;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.photo-zoom-trigger:hover .photo-zoom-hint,
.photo-zoom-trigger:focus-visible .photo-zoom-hint {
  opacity: 1;
}
.photo-detail h3 { margin-top: 1.25rem; font-size: 1.1rem; }
.photo-detail p { color: var(--ink-muted); font-size: .9rem; margin-top: .4rem; }

/* 相册全屏遮罩预览 */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem 1.5rem;
  background: rgba(20, 16, 12, .82);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.photo-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.photo-lightbox-panel {
  position: relative;
  max-width: min(96vw, 1100px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  transform: scale(.96);
  transition: transform .28s ease;
}
.photo-lightbox.is-open .photo-lightbox-panel {
  transform: scale(1);
}
.photo-lightbox-panel img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 5rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  background: #111;
}
.photo-lightbox-caption {
  max-width: 40rem;
  text-align: center;
  color: rgba(255,255,255,.92);
}
.photo-lightbox-caption strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: .25rem;
}
.photo-lightbox-caption span {
  display: block;
  font-size: .88rem;
  color: rgba(255,255,255,.7);
  line-height: 1.5;
}
.photo-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.photo-lightbox-close:hover {
  background: rgba(255,255,255,.22);
}
body.photo-lightbox-open {
  overflow: hidden;
}

/* ----- 书内表单控件 ----- */
.form-group { margin-bottom: .9rem; }
.form-group label {
  display: block;
  font-size: .85rem;
  margin-bottom: .35rem;
  color: var(--ink-muted);
}
.input-book, .textarea-book {
  width: 100%;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(212,149,107,.3);
  border-radius: 6px;
  padding: .6rem .85rem;
  color: var(--ink);
  font-family: inherit;
  font-size: .9rem;
}
.textarea-book { min-height: 100px; resize: vertical; }
.input-book:focus, .textarea-book:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,.85);
}
.btn-book {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 1.2rem;
  background: var(--accent);
  color: var(--paper);
  border: none;
  border-radius: 6px;
  font-size: .875rem;
  font-family: inherit;
  cursor: pointer;
  transition: .25s ease;
}
.btn-book:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-book.is-disabled,
.btn-book.is-disabled:hover {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  background: var(--accent);
  filter: grayscale(.25);
}
.captcha-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: nowrap;
  margin-bottom: 0;
}
.captcha-row .captcha-label {
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: .85rem;
  color: var(--ink-muted);
}
.captcha-img {
  display: block;
  width: 140px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(212, 149, 107, .28);
  background: #faf6ee;
  user-select: none;
  -webkit-user-drag: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity .15s ease;
}
.captcha-img:hover { opacity: .88; }
.captcha-answer {
  width: 3.6rem !important;
  min-width: 3.6rem;
  height: 42px;
  padding: 0 .4rem !important;
  text-align: center;
  font-weight: 600;
  flex-shrink: 0;
}
.captcha-submit {
  margin: 0 !important;
  flex-shrink: 0;
  white-space: nowrap;
  padding: .55rem 1rem;
  height: 42px;
}
/* 留言 / 友链温馨提示：复用 .code-notice，贴左页底部 */
.guestbook-notice,
.friends-notice {
  margin-top: auto;
}
/* 友链提示：更紧凑的高度与「标签 + 值」两行布局 */
.friends-notice.code-notice {
  padding: .55rem .75rem .5rem;
  margin-top: auto;
}
.friends-notice .about-section-title {
  margin-bottom: .25rem;
  font-size: .82rem;
  letter-spacing: .06em;
}
.friends-notice .code-notice-text {
  margin: 0 0 .35rem;
  font-size: .72rem;
  line-height: 1.45;
  white-space: normal;
}
.friends-notice-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .18rem;
}
.friends-notice-meta li {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-size: .72rem;
  line-height: 1.4;
  color: var(--ink-light, #a09a90);
  min-width: 0;
}
.friends-notice-label {
  flex: 0 0 auto;
  color: var(--ink-muted, #7a7268);
  opacity: .9;
}
.friends-notice-label::after {
  content: "：";
}
.friends-notice-meta strong {
  color: var(--ink-muted, #7a7268);
  font-weight: 600;
  min-width: 0;
}
.friends-notice-meta a {
  color: var(--warm, #c4a574);
  border-bottom: 1px solid rgba(196, 165, 116, .35);
  word-break: break-all;
  min-width: 0;
}
.friends-notice-meta a:hover {
  border-bottom-color: var(--accent, #a87b52);
}
.flash-err {
  background: rgba(181, 74, 74, .12);
  color: #8a3a3a;
  border: 1px solid rgba(181, 74, 74, .28);
  border-radius: 8px;
  padding: .65rem .85rem;
  margin-bottom: .9rem;
  font-size: .88rem;
}
.flash-ok {
  background: rgba(168,181,160,.25);
  border: 1px solid rgba(168,181,160,.45);
  color: #4f5d4a;
  padding: .6rem .8rem;
  border-radius: 8px;
  margin-bottom: .8rem;
  font-size: .875rem;
}

/* ----- 关于页：兴趣标签、代码说明与时间线 ----- */
.about-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 1.1rem 0 .5rem;
}
.interest-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.tag-book {
  display: inline-block;
  padding: .2rem .65rem;
  background: rgba(168,181,160,.2);
  color: #8b6f47;
  font-size: .75rem;
  border-radius: 20px;
  border: 1px solid rgba(168,181,160,.3);
}
.about-intro {
  color: var(--ink);
  white-space: pre-wrap;
  margin-bottom: 1.25rem;
  line-height: 1.95;
}
/* 贴在左页底部（与 .page-scroll 同级，由 .page-content 纵向 flex 推到底） */
.page-content > .code-notice {
  flex-shrink: 0;
  margin-top: auto;
}
.code-notice {
  margin-top: 1rem;
  padding: .85rem .95rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, .35);
  border: 1px solid rgba(212, 149, 107, .16);
}
.code-notice .about-section-title {
  margin-top: 0;
  margin-bottom: .45rem;
  font-size: .95rem;
  color: var(--ink-muted, #7a7268);
  font-weight: 600;
}
.code-notice-text {
  margin: 0 0 .55rem;
  font-size: .78rem;
  line-height: 1.7;
  color: var(--ink-light, #a09a90);
  white-space: pre-wrap;
}
.code-notice-text:last-child {
  margin-bottom: 0;
}
.code-notice-email {
  margin: 0;
  font-size: .78rem;
  color: var(--ink-muted, #7a7268);
}
.code-notice-email a {
  color: var(--warm, #c4a574);
  border-bottom: 1px solid rgba(196, 165, 116, .35);
  word-break: break-all;
}
.code-notice-email a:hover {
  border-bottom-color: var(--accent, #a87b52);
  color: var(--accent, #a87b52);
}
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(var(--accent), var(--sage));
}
.timeline-item { position: relative; margin-bottom: 1.4rem; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -1.7rem;
  top: .45rem;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(212,149,107,.2);
}
.timeline-year {
  color: var(--accent);
  font-weight: 700;
  font-size: .9rem;
}
.timeline-title { font-weight: 600; margin: .15rem 0; }
.timeline-desc { color: var(--ink-muted); font-size: .875rem; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .8rem;
}
.section-head h2 { font-size: 1.15rem; }

/* ----- 手机返回列表（桌面隐藏） ----- */
.mobile-back {
  display: none;
}
.detail-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 1rem 0 1.25rem;
}

/* ----- 平板竖屏 641–860：上下叠页 ----- */
@media (max-width: 860px) and (min-width: 641px) {
  html, body { overflow: hidden; }
  .scene {
    align-items: stretch;
    justify-content: center;
    padding:
      max(0.75rem, var(--safe-top))
      max(0.5rem, var(--safe-right))
      max(0.75rem, var(--safe-bottom))
      max(0.5rem, var(--safe-left));
    overflow: hidden;
  }
  .book-scene {
    width: min(720px, 96vw);
    height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 1.5rem);
    max-height: none;
    min-height: 0;
  }
  .book-cover-block {
    position: relative;
    width: min(380px, 72vw);
    height: min(520px, 70dvh);
    margin: 0 auto;
    right: auto;
  }
  .book-open {
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 0.55rem;
    padding: 0;
  }
  .book-left-side,
  .book-right-side {
    width: 100%;
    height: auto;
    min-height: 0;
  }
  .book-left-side { flex: 0 0 38%; max-height: 42%; }
  .book-right-side { flex: 1 1 auto; min-height: 0; }
  .book-left-page,
  .book-right-page {
    position: relative;
    height: 100%;
    min-height: 0;
    border-radius: 8px;
    box-shadow:
      0 2px 0 #e8ddcf,
      0 4px 0 #dccfb8,
      0 8px 18px rgba(0, 0, 0, .12);
  }
  .book-left-page::before,
  .book-right-page::before { display: none; }
  .page-content { padding: 1.1rem 1.15rem 1rem; }
  .bookmarks {
    position: absolute;
    left: 0;
    right: 0;
    top: 14px;
    height: calc(var(--bm-step) * 5 + 34px);
    z-index: 50;
  }
  .bookmark-right { right: calc(-1 * var(--bm-out)); left: auto; }
  .bookmark-left { left: calc(-1 * var(--bm-out)); right: auto; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .cover-flap,
  .page-sheet,
  .flip-under { display: none !important; }
  .cat-bar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.35rem;
    padding-bottom: 0.2rem;
  }
  .cat-chip { flex: 0 0 auto; }
}

/* ----- 手机 ≤640：内容区在上，底部 Tab 固定最底 ----- */
@media (max-width: 640px) {
  :root {
    --mobile-nav-h: calc(52px + var(--safe-bottom));
  }
  html, body { overflow: hidden; }

  /*
   * 舞台下沿停在 Tab 顶：内容（含列表分页）永不伸进书签栏。
   * 不用 inset:0 + padding 估高（百分比高度易再次叠到 Tab 上）。
   */
  .scene {
    inset: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--mobile-nav-h);
    align-items: stretch;
    justify-content: stretch;
    padding:
      max(0.45rem, var(--safe-top))
      max(0.45rem, var(--safe-right))
      0.35rem
      max(0.45rem, var(--safe-left));
    overflow: hidden;
  }
  .book-scene {
    width: 100%;
    flex: 1 1 auto;
    height: auto;
    max-height: 100%;
    min-height: 0;
    align-self: stretch;
    /* 取消 3D 透视，否则 position:fixed 书签会相对开本定位，叠在内容上 */
    perspective: none !important;
    transform-style: flat !important;
  }
  .book-cover-block {
    position: relative;
    width: min(360px, 88vw);
    height: min(480px, calc(100dvh - var(--mobile-nav-h) - 4rem));
    margin: auto;
    right: auto;
  }
  /* 手机关闭合书 dock 交互外观：封面始终居中可用 */
  .book-dock { display: none !important; }
  .scene.is-cover-docked .book-scene,
  .scene.is-cover-docking .book-scene {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .book-open {
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 0;
    padding: 0;
    /* 书签已 fixed 到底部，不占开本流 */
  }
  .book-left-side,
  .book-right-side {
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
  }
  .book-left-page,
  .book-right-page {
    position: relative;
    height: 100%;
    min-height: 0;
    border-radius: 10px;
    box-shadow:
      0 2px 0 #e8ddcf,
      0 6px 16px rgba(0, 0, 0, .12);
  }
  .book-left-page::before,
  .book-right-page::before { display: none; }
  .page-content {
    padding: 0.85rem 0.9rem 0.55rem;
    min-height: 0;
  }

  /* 感悟/相册：列表与详情互斥 */
  .book-open.is-mobile-list .book-right-side { display: none; }
  .book-open.is-mobile-detail .book-left-side { display: none; }
  /*
   * 留言 / 友链 / 关于：上下整段内容平铺，不出现分区滚动条；
   * 超出视口时由开本整体滑动（滚动条隐藏）。
   */
  .book-open:not(.is-mobile-list):not(.is-mobile-detail) {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    gap: 0.45rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .book-open:not(.is-mobile-list):not(.is-mobile-detail)::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  .book-open:not(.is-mobile-list):not(.is-mobile-detail) .book-left-side,
  .book-open:not(.is-mobile-list):not(.is-mobile-detail) .book-right-side {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .book-open:not(.is-mobile-list):not(.is-mobile-detail) .book-left-page,
  .book-open:not(.is-mobile-list):not(.is-mobile-detail) .book-right-page {
    height: auto;
    min-height: 0;
  }
  .book-open:not(.is-mobile-list):not(.is-mobile-detail) .page-content {
    height: auto;
    overflow: visible;
  }
  .book-open:not(.is-mobile-list):not(.is-mobile-detail) .page-scroll {
    flex: 0 0 auto;
    overflow: visible;
    height: auto;
    max-height: none;
    padding-right: 0;
  }
  .book-open:not(.is-mobile-list):not(.is-mobile-detail) .page-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  .book-open:not(.is-mobile-list):not(.is-mobile-detail) .book-left-side .textarea-book {
    min-height: 4.5rem;
  }
  .book-open:not(.is-mobile-list):not(.is-mobile-detail) .book-left-side .code-notice,
  .book-open:not(.is-mobile-list):not(.is-mobile-detail) .book-left-side .guestbook-notice,
  .book-open:not(.is-mobile-list):not(.is-mobile-detail) .book-left-side .friends-notice {
    margin-top: 0.55rem;
  }
  .book-open:not(.is-mobile-list):not(.is-mobile-detail) .list-pager {
    flex-shrink: 0;
  }

  .mobile-back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    align-self: flex-start;
    margin: 0 0 0.65rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--accent);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(212, 149, 107, 0.35);
    border-radius: 999px;
    pointer-events: auto;
  }
  .mobile-back::before {
    content: "←";
    font-size: 0.85rem;
  }
  .detail-title {
    font-size: 1.28rem;
    margin: 0.55rem 0 0.9rem;
  }

  /* 底部 Tab：贴视口最底，当前章节高亮可见 */
  .bookmarks,
  .book-cover-block .bookmarks {
    position: fixed;
    left: 0;
    right: 0;
    top: auto !important;
    bottom: 0;
    width: 100%;
    height: var(--mobile-nav-h);
    z-index: 100;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 0;
    padding: 0 0 var(--safe-bottom);
    margin: 0;
    background:
      linear-gradient(180deg, rgba(250, 247, 242, 0.96), rgba(240, 230, 216, 0.98));
    border-top: 1px solid rgba(139, 99, 64, 0.2);
    box-shadow: 0 -6px 20px rgba(58, 38, 20, 0.12);
    pointer-events: auto;
    overflow: visible;
  }
  .bookmark,
  .bookmark-right,
  .bookmark-left,
  .book-cover-block .bookmark-left {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto;
    flex: 1 1 0;
    height: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0;
    justify-content: center;
    border-radius: 0;
    clip-path: none !important;
    box-shadow: none !important;
    --bm-out: 0px;
    filter: none;
  }
  .bookmark svg {
    width: 18px;
    height: 18px;
  }
  .bookmark-current,
  .bookmark-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45) !important;
    filter: brightness(1.08);
  }
  .bookmark-tip { display: none !important; }

  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-zoom-trigger img {
    max-height: min(48dvh, 360px);
  }
  .photo-zoom-hint { opacity: 0.85; }

  .cat-bar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.35rem;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
    flex-shrink: 0;
  }
  .cat-bar::-webkit-scrollbar { display: none; }
  .cat-chip {
    flex: 0 0 auto;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
  }

  /* 列表可滚；分页钉在纸页底部（Tab 之上） */
  .list-scroll {
    flex: 1 1 auto;
    min-height: 0;
  }
  .list-pager {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: 0.4rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
    padding: 0.55rem 0 0.35rem;
    border-top: 1px solid rgba(212, 149, 107, 0.22);
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.35));
  }
  .pager-btn,
  .pager-num {
    min-width: 2.35rem;
    min-height: 2.35rem;
    font-size: 0.8rem;
  }

  .form-group label { font-size: 0.9rem; }
  .input-book,
  .textarea-book {
    font-size: 1rem;
    padding: 0.75rem 0.9rem;
    min-height: 2.75rem;
  }
  .textarea-book { min-height: 7rem; }
  .btn-book {
    width: 100%;
    justify-content: center;
    min-height: 2.75rem;
    font-size: 0.95rem;
  }
  .captcha-row {
    flex-wrap: wrap;
  }
  .captcha-row .captcha-answer {
    flex: 1 1 5rem;
    min-width: 4.5rem;
  }
  .captcha-row .captcha-submit {
    flex: 1 1 100%;
  }

  /* 手机隐藏页脚版权，把垂直空间留给列表与分页 */
  .site-footer {
    display: none;
  }
  .music-player {
    left: max(0.5rem, var(--safe-left));
    bottom: calc(var(--mobile-nav-h) + 0.45rem);
    transition: bottom .18s var(--mp-ease);
  }
  .music-player.is-dragging {
    transition: none;
  }
  .music-player.is-expanded {
    width: calc(100vw - 1rem - var(--safe-left) - var(--safe-right));
    max-width: calc(100vw - 1rem - var(--safe-left) - var(--safe-right));
  }
  /* 上下拖动手势：把手 + 卡片空白区可拖；列表/滑条仍可滚可滑 */
  .music-player-drag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 1.05rem;
    margin: -0.15rem 0 0.2rem;
    cursor: grab;
    touch-action: none;
    pointer-events: auto;
  }
  .music-player-drag::before {
    content: "";
    width: 2.4rem;
    height: 0.28rem;
    border-radius: 999px;
    background: rgba(139, 99, 64, 0.38);
  }
  .music-player.is-dragging .music-player-drag {
    cursor: grabbing;
  }
  .music-player.is-dragging .music-player-drag::before {
    background: rgba(139, 99, 64, 0.55);
  }
  .music-player-card {
    touch-action: manipulation;
  }
  .music-player-compact,
  .music-player-title {
    touch-action: none;
  }
  .music-player-list {
    touch-action: pan-y;
  }
  .music-player-progress-row input[type="range"],
  .music-player-vol input[type="range"] {
    touch-action: pan-x;
  }

  .cover-flap,
  .page-sheet,
  .flip-under { display: none !important; }

  /* 章节切换轻过渡 */
  .book-open.is-mobile-fade {
    animation: mobilePageFade 0.22s ease both;
  }
}

@keyframes mobilePageFade {
  from { opacity: 0.35; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ----- 入场与呼吸动画 ----- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInBook {
  from { opacity: 0; transform: scale(.98); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes pulseSoft {
  0%, 100% { opacity: .65; }
  50% { opacity: 1; }
}

/* =============================================================================
 * 真实感翻书动画（配合 book-nav.js）
 * - 开合封面：中线铰链（右→左翻开 / 左→右合上）
 * - 翻页：双面整页绕书脊旋转
 *   · 0~90° 看旧页正面，底层新页随掀起渐显
 *   · 90~180° 看新页背面，旧页被纸逐渐盖住
 * ============================================================================= */

:root {
  --flip-duration: 1100ms;
  --cover-duration: 1400ms;
  --flip-ease: cubic-bezier(.45, .05, .55, .95);
}

.book-scene {
  perspective: 2000px;
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
}
.book-scene.is-navigating,
.book-scene.is-opening-cover,
.book-scene.is-closing-cover {
  pointer-events: none;
}

#cover-root.is-hidden {
  display: none !important;
}

/* ----- 封面翻盖（与翻页同结构：正面封面 / 内侧左页） ----- */
.cover-flap {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  z-index: 60;
  transform-origin: left center;
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: none;
  overflow: visible; /* 飞行书签尖端探出封面缘 */
  transform: translateZ(2px) rotateY(0deg);
}
.cover-flap-face,
.cover-flap-inside {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.cover-flap-face {
  background: linear-gradient(135deg, var(--cover-1), var(--cover-2), var(--cover-3));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 8px 8px 0;
  transform: rotateY(0deg) translateZ(0.5px);
  box-shadow:
    inset 0 0 60px rgba(0,0,0,.15),
    var(--thick-cover);
}
.cover-flap-face::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 28px;
  background: linear-gradient(90deg, rgba(0,0,0,.28), transparent);
  pointer-events: none;
}
.cover-flap-face .cover-inner {
  transform: scale(.92);
  animation: none;
}
.cover-flap-inside {
  background-color: #faf7f2;
  background-image: linear-gradient(135deg, #faf7f2 0%, #f0e6d8 100%);
  transform: rotateY(180deg) translateZ(0.5px);
  border-radius: 8px 0 0 8px;
  box-shadow:
    inset -10px 0 20px rgba(0,0,0,.05),
    var(--thick-left);
}
.cover-flap-inside.has-page .page-face-inner {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--ink);
}

.cover-flap.is-closed {
  transform: translateZ(2px) rotateY(0deg);
}
.cover-flap.is-open-left {
  transform: translateZ(2px) rotateY(-180deg);
}
.cover-flap.is-opening {
  animation: coverFlapOpen var(--cover-duration) var(--flip-ease) forwards;
}
.cover-flap.is-closing {
  animation: coverFlapClose var(--cover-duration) var(--flip-ease) forwards;
}

/* 翻开：右→左，50% 对准 90° */
@keyframes coverFlapOpen {
  0%   { transform: translateZ(2px) rotateY(0deg); }
  50%  { transform: translateZ(10px) rotateY(-90deg); }
  100% { transform: translateZ(2px) rotateY(-180deg); }
}
/* 合上：左→右（逆过程） */
@keyframes coverFlapClose {
  0%   { transform: translateZ(2px) rotateY(-180deg); }
  50%  { transform: translateZ(10px) rotateY(-90deg); }
  100% { transform: translateZ(2px) rotateY(0deg); }
}

/*
 * 翻开时：左侧空白；右侧由 flip-under 显露（开本右页隐藏）
 * 合上时：左侧内容在封面内侧上带走；右侧逐渐被封面盖住
 */
.book-open.is-cover-opening .book-left-side {
  visibility: hidden;
}
.book-open.is-cover-opening .book-right-side {
  visibility: hidden;
}
.book-open.is-cover-closing .book-left-side {
  visibility: hidden;
}
.book-open.is-cover-closing .book-right-side {
  visibility: hidden;
}

/* ----- 翻页舞台（盖在开本之上） ----- */
.flip-stage {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  display: none;
  perspective: 2000px;
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
  overflow: visible;
}
.flip-stage.is-active { display: block; }

.book-open {
  z-index: 1;
}
/* 翻页中书签已在上方规则里隐藏，避免与翻页纸抢层 */

/*
 * 被掀起一侧：隐藏开本原页，改由 flip-under（纸下方的新页）显露，
 * 这样新内容只会顺着纸边逐渐露出来。
 * 被盖住一侧：开本保持旧页，由不透明翻页纸背面逐渐压住。
 */
.book-open.is-flipping-forward .book-right-side {
  visibility: hidden;
}
.book-open.is-flipping-backward .book-left-side {
  visibility: hidden;
}
.book-open.is-flipping-forward .book-left-page {
  animation: underPageDim var(--flip-duration) var(--flip-ease) both;
}
.book-open.is-flipping-backward .book-right-page {
  animation: underPageDim var(--flip-duration) var(--flip-ease) both;
}
@keyframes underPageDim {
  0%, 45% { filter: brightness(1); }
  100%    { filter: brightness(.92); }
}

/* 纸下方待显露的新页（与翻页纸同属 flip-stage，保证遮挡关系正确） */
.flip-under {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 1;
  overflow: hidden;
  background-color: #faf7f2;
  background-image: linear-gradient(135deg, #faf7f2 0%, #f5ede3 100%);
  transform: translateZ(-2px);
}
.flip-under-right {
  right: 0;
  left: auto;
  border-radius: 0 8px 8px 0;
  box-shadow:
    inset 10px 0 20px rgba(0,0,0,.05),
    var(--thick-right);
}
.flip-under-left {
  left: 0;
  right: auto;
  border-radius: 8px 0 0 8px;
  box-shadow:
    inset -10px 0 20px rgba(0,0,0,.05),
    var(--thick-left);
}
.flip-under .page-face-inner {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* ----- 双面翻页纸 ----- */
.page-sheet {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 2;
  transform-style: preserve-3d;
  will-change: transform;
  overflow: visible; /* 飞行书签尖端探出纸缘 */
  /* 略抬起，整段动画都压在开本之上 */
  transform: translateZ(2px);
}
.page-sheet.flip-forward {
  right: 0;
  left: auto;
  transform-origin: left center;
  transform: translateZ(2px) rotateY(0deg);
}
.page-sheet.flip-backward {
  left: 0;
  right: auto;
  transform-origin: right center;
  transform: translateZ(2px) rotateY(0deg);
}
.page-sheet.flip-forward.is-flipping {
  animation: pageTurnForward var(--flip-duration) var(--flip-ease) forwards;
}
.page-sheet.flip-backward.is-flipping {
  animation: pageTurnBackward var(--flip-duration) var(--flip-ease) forwards;
}

.page-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* 实色不透明，才能真正盖住下层旧页 */
  background-color: #faf7f2;
  background-image: linear-gradient(135deg, #faf7f2 0%, #f5ede3 100%);
  transform-style: preserve-3d;
}
.page-face-front {
  transform: rotateY(0deg) translateZ(0.5px);
  border-radius: 0 8px 8px 0;
  box-shadow:
    inset 10px 0 20px rgba(0,0,0,.05),
    var(--thick-right);
}
.page-sheet.flip-backward .page-face-front {
  border-radius: 8px 0 0 8px;
  box-shadow:
    inset -10px 0 20px rgba(0,0,0,.05),
    var(--thick-left);
}
.page-face-back {
  transform: rotateY(180deg) translateZ(0.5px);
  border-radius: 8px 0 0 8px;
  background-color: #f8f2ea;
  background-image: linear-gradient(225deg, #f8f2ea 0%, #efe6da 100%);
  box-shadow:
    inset -10px 0 20px rgba(0,0,0,.05),
    var(--thick-left);
}
.page-sheet.flip-backward .page-face-back {
  border-radius: 0 8px 8px 0;
  box-shadow:
    inset 10px 0 20px rgba(0,0,0,.05),
    var(--thick-right);
}

/* 纸面内侧书脊阴影 + 外缘高光（写在每面上，随正反面各自显示） */
.page-face::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18%;
  pointer-events: none;
  z-index: 4;
}
.page-face-front::before {
  left: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.12), transparent);
}
.page-sheet.flip-backward .page-face-front::before {
  left: auto;
  right: 0;
  background: linear-gradient(270deg, rgba(0,0,0,.12), transparent);
}
.page-face-back::before {
  right: 0;
  left: auto;
  background: linear-gradient(270deg, rgba(0,0,0,.1), transparent);
}
.page-sheet.flip-backward .page-face-back::before {
  right: auto;
  left: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.1), transparent);
}

.page-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(
    105deg,
    transparent 42%,
    rgba(255,255,255,.22) 50%,
    transparent 58%
  );
  opacity: 0;
}
.page-sheet.is-flipping .page-face::after {
  animation: faceGloss var(--flip-duration) var(--flip-ease) both;
}
@keyframes faceGloss {
  0%   { opacity: 0; }
  35%  { opacity: .55; }
  65%  { opacity: .35; }
  100% { opacity: 0; }
}

.page-face-inner {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
/* 接近侧立时略柔化，减轻拉伸；两端保持清晰 */
.page-sheet.is-flipping .page-face-inner {
  animation: pageFaceSoft var(--flip-duration) ease both;
}
@keyframes pageFaceSoft {
  0%   { filter: blur(0); }
  45%  { filter: blur(0.8px); }
  55%  { filter: blur(0.8px); }
  100% { filter: blur(0); }
}

@keyframes pageTurnForward {
  0%   { transform: translateZ(2px) rotateY(0deg); }
  50%  { transform: translateZ(8px) rotateY(-90deg); }
  100% { transform: translateZ(2px) rotateY(-180deg); }
}

@keyframes pageTurnBackward {
  0%   { transform: translateZ(2px) rotateY(0deg); }
  50%  { transform: translateZ(8px) rotateY(90deg); }
  100% { transform: translateZ(2px) rotateY(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cover-flap.is-opening,
  .cover-flap.is-closing,
  .page-sheet.flip-forward.is-flipping,
  .page-sheet.flip-backward.is-flipping,
  .page-sheet.is-flipping .page-face-inner,
  .page-sheet.is-flipping .page-face::after,
  .book-open.is-flipping-forward .book-left-page,
  .book-open.is-flipping-backward .book-right-page {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
  }
}