/* ============================================================
   画册 · 还原纸质速写本质感（CSS-3D 硬纸翻页）
   ============================================================ */

:root{
  --bg:        #f8f7f3;
  --paper:     #f6f3ea;
  --ink:       #3c362e;
  --ink-soft:  #8d8577;
  --accent:    #c0392b;

  --pw: 407px;   /* 单页宽（JS 按窗口覆盖） */
  --ph: 536px;   /* 单页高 */

  /* 内页纸纹：干净精致的米白纸面（细腻竖纹、边缘整齐、无毛边无做旧） */
  --paper-spread: url("../images/tex/paper-fine.jpg");

  --font-ui:   -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  /* 艺术手写体：楷体系，温馨清晰、不幼稚（用于标题/引言/结语） */
  --font-hand: "Kaiti SC","STKaiti","KaiTi","FangSong","PingFang SC","Hiragino Sans GB",serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }

body{
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--ink);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
}

/* ---------- 舞台 ---------- */
.stage{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.book-viewport{
  position:relative;
  width:calc(var(--pw) * 2);
  height:var(--ph);
}
.mobile-reader{ display:none; }
@media (min-width:641px){
  .book-viewport{ transform:translateY(-16px); }
}

#book{
  width:100%; height:100%;
  position:relative;
  perspective:2100px;
  transform-style:preserve-3d;
  transition:transform .58s cubic-bezier(.22,.8,.24,1);
}
/* 首尾合上时分别只露右半封面 / 左半封底，并都回到舞台中央 */
#book.closed{ transform:translateX(calc(var(--pw) / -2)); }
#book.closed-end{ transform:translateX(calc(var(--pw) / 2)); }

/* ---------- 硬纸书页：每张是一块刚性板，正反两面，绕书脊铰链翻转 ---------- */
.leaf{
  position:absolute; top:0; left:var(--pw);
  width:var(--pw); height:var(--ph);
  transform-origin:left center;            /* 铰链在中缝 */
  transform-style:preserve-3d;
  will-change:transform;
}
.leaf-face{
  position:absolute; inset:0;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.leaf-front{ transform:rotateY(0deg); }
.leaf-back { transform:rotateY(180deg); }
.leaf-face .page{ position:relative; width:100%; height:100%; background:transparent; }

/* 翻面时板面迎光角度变化的一层很淡的明暗（铰链侧深、书口侧淡） */
.leaf-face::before{
  content:""; position:absolute; inset:0; z-index:6;
  pointer-events:none; opacity:var(--fa,0);
}
.leaf-front::before{
  background:linear-gradient(to left, rgba(38,28,12,.55), rgba(38,28,12,0) 58%);
}
.leaf-back::before{
  background:linear-gradient(to right, rgba(38,28,12,.55), rgba(38,28,12,0) 58%);
}

/* 硬页投在下面纸页上的落影：翻动时最强、随页身移动 */
.flip-shadow{
  position:absolute; top:0; height:100%;
  z-index:8;
  background:linear-gradient(to right,
    rgba(48,38,24,.30) 0%,
    rgba(48,38,24,.16) 30%,
    rgba(48,38,24,0) 78%);
  filter:blur(2.5px);
  opacity:0; pointer-events:none;
}

/* 整册投影 */
.book-shadow{
  position:absolute;
  left:8%; right:8%; bottom:-25px;
  height:34px;
  background:radial-gradient(ellipse at center, rgba(70,58,40,.20), transparent 72%);
  filter:blur(12px);
  z-index:0;
  transition:opacity .5s;
}

/* ---------- 书页 ---------- */
.page{
  width:var(--pw);
  height:var(--ph);
  background:transparent;
  overflow:hidden;
}
.sheet{
  position:absolute; inset:0;
  background:var(--paper);
  overflow:hidden;
  isolation:isolate;
}
/* 外圆角：摊开时整书的外侧圆角 */
.page.even .sheet{ border-radius:8px 2px 2px 8px; }
.page.odd  .sheet{ border-radius:2px 8px 8px 2px; }
/* 书页环境光遮蔽：靠书脊处卷进装订的暗角 + 上下纸边轻微变暗 */
.page.even .sheet{ box-shadow:
  inset -28px 0 34px -28px rgba(76,61,40,.18),
  inset 0 9px 18px -16px rgba(74,57,34,.10),
  inset 0 -12px 22px -18px rgba(74,57,34,.13); }
.page.odd .sheet{ box-shadow:
  inset 28px 0 34px -28px rgba(76,61,40,.18),
  inset 0 9px 18px -16px rgba(74,57,34,.10),
  inset 0 -12px 22px -18px rgba(74,57,34,.13); }

/* 极轻的纸齿与边缘纤维，不盖住孩子的画 */
.sheet.paper::after,
.sheet.paper-texture::after{
  content:""; position:absolute; inset:0; z-index:12; pointer-events:none;
  background:linear-gradient(to right,rgba(255,255,255,.035),transparent 14%,transparent 86%,rgba(72,65,52,.02));
  mix-blend-mode:multiply;
}

/* 内页直接使用实物纸张底图（跨页 200% 宽：左页用左半、右页用右半） */
.sheet.paper{
  background-color:var(--paper);
  background-image:var(--paper-spread);
  background-repeat:no-repeat;
  background-size:200% 100%;
}
.page.even .sheet.paper{ background-position:left center; }
.page.odd .sheet.paper{ background-position:right center; }

/* ---------- 书脊（中缝线装） ----------
   底层：中缝的装订深槽与纸页收口阴影，营造“书页在此折入装订”的凹陷感；
   上层：科普特裸脊线装——真实蜡线纹理（透明 PNG，程序化渲染）。 */
.spine{
  position:absolute; top:0; bottom:0;
  left:50%; width:58px; transform:translateX(-50%);
  z-index:998;
  pointer-events:none;
  opacity:0; transition:opacity .12s ease-out;
  background:
    /* 中缝收口：两侧纸页卷入装订的暗影 */
    linear-gradient(to right,
      transparent 0%,
      rgba(74,57,34,0) 27%, rgba(74,57,34,.16) 40%, rgba(74,57,34,.05) 47%,
      rgba(74,57,34,.05) 53%, rgba(74,57,34,.16) 60%, rgba(74,57,34,0) 73%,
      transparent 100%),
    /* 中缝最中心一条极细的凹槽 */
    linear-gradient(to right,
      transparent 0%,
      rgba(64,49,29,0) 45%, rgba(64,49,29,.20) 50%, rgba(64,49,29,0) 55%,
      transparent 100%),
    /* 线把纸略微压亮的一丝反光 */
    linear-gradient(to right,
      transparent 0%,
      rgba(255,253,247,0) 44%, rgba(255,253,247,.18) 50%, rgba(255,253,247,0) 56%,
      transparent 100%);
}
body.is-open:not(.opening-book):not(.closing-book):not(.is-end-closed) .spine{ opacity:1; }
body.opening-book .spine,
body.closing-book .spine,
body.is-end-closed .spine{ opacity:0; transition-duration:.06s; }

/* 真实蜡线：暖棕线 + 交叉针脚 + 线结，纵向拉伸覆盖整本高度 */
.spine::before{
  content:""; position:absolute; inset:0;
  background:url("../images/tex/spine-thread.png") center top / auto 100% no-repeat;
  pointer-events:none;
}

/* ---------- 书口：一叠纸的整齐侧边（精致，不做旧） ---------- */
.fore-edge{
  position:absolute; top:6px; bottom:8px;
  width:12px; z-index:60;
  pointer-events:none;
  opacity:0;
  transition:opacity .28s ease, transform .28s cubic-bezier(.22,.8,.24,1);
  background-color:#efeadd;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(120,98,60,.05) 0px, rgba(120,98,60,.05) .5px,
      rgba(255,255,255,0) .5px, rgba(255,255,255,0) 3px);
  box-shadow:1px 2px 5px rgba(60,46,25,.06);
}
.fore-edge-right{ right:-10px; transform-origin:left center; }
.fore-edge-left{
  left:-10px;
  transform:scaleX(-1);
  transform-origin:center;
  box-shadow:-1px 2px 5px rgba(60,46,25,.06);
}
body.is-open .fore-edge-right{ opacity:var(--right-edge-opacity,.5); }
body.is-open .fore-edge-left{ opacity:var(--left-edge-opacity,.32); }

/* ---------- 点击翻页层 ---------- */
.click-layer{
  position:absolute; inset:0; z-index:2000;
  display:flex;
}
.click-layer .zone{
  flex:1; cursor:pointer; touch-action:manipulation;
}
body.is-open .click-layer .zone-left,
body.is-open .click-layer .zone-right{ cursor:pointer; }

/* ---------- 内页：画作 ---------- */
.page-art{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding:30px 30px 20px;
}
.art-mat{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:10px 14px 4px;
}
/* 画稿是白纸上的画：用 multiply 让白纸变透明、纸纹从画后透出来。
   扫描件融合：白/浅黄底经正片叠底化为纸色；
   外缘只做一点点极细的羽化（97% 前全实，只在最外圈 2% 左右微微渐隐），
   不打扰主画面，只消掉硬边。 */
.art-mat img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  mix-blend-mode:multiply;
  filter:saturate(.98) contrast(1.015);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 97%,rgba(0,0,0,0) 99.5%);
  mask-image:radial-gradient(ellipse at center,#000 97%,rgba(0,0,0,0) 99.5%);
}
.page-caption{
  padding:13px 20px 2px; text-align:center; min-height:62px;
}
.page-caption .cap-title{
  font-family:var(--font-hand);
  font-size:17px; font-weight:700; color:var(--ink);
  letter-spacing:.7px; line-height:1.4;
}
.page-caption .cap-meta{
  font-size:12px; color:var(--ink-soft); margin-top:3px; letter-spacing:.8px;
}
.page-number{
  position:absolute; bottom:14px;
  font-size:11px; color:#b8af9e; letter-spacing:.8px;
  z-index:3;
}
.page.even .page-number{ right:22px; }
.page.odd  .page-number{ left:22px; }

/* ---------- 扉页（艺术感：装饰 + 欢迎 + 照片） ---------- */
.sheet.title-page{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center; padding:34px 30px;
  background-color:var(--paper);
  background-image:var(--paper-spread);
  background-repeat:no-repeat;
  background-size:200% 100%;
}
.page.even .sheet.title-page{ background-position:left center; }
.page.odd .sheet.title-page{ background-position:right center; }
.titlepage-deco{ font-size:26px; letter-spacing:10px; margin-bottom:2px; }
.titlepage-kicker{
  font-size:14px; letter-spacing:8px; color:#b0906a;
  font-family:var(--font-hand); font-weight:700;
}
.titlepage-name{
  font-family:var(--font-hand);
  font-size:42px; font-weight:800; line-height:1.2;
  background:linear-gradient(165deg,#e87496 0%,#efa04a 55%,#5fbf6d 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.85);
  filter:drop-shadow(0 3px 5px rgba(200,120,80,.25));
}
.titlepage-rule{ width:110px; border-top:2px dashed #d8c9b0; margin:2px 0; }
.titlepage-sub{ font-size:14px; color:var(--ink-soft); line-height:1.9; }

/* 扉页 / 尾页的“可贴照片”艺术框 */
.page-photo-frame{
  position:relative;
  width:min(56%, 220px);
  aspect-ratio:4/3;
  background:#fffdf6; border-radius:10px;
  overflow:hidden;
  box-shadow:0 6px 14px rgba(90,65,35,.22), inset 0 0 0 1px rgba(160,120,70,.16);
}
.page-photo-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
}
.page-photo-empty{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  color:#c4aa8e; font-size:14px; line-height:1.8; letter-spacing:3px;
  font-family:var(--font-hand);
  background:
    repeating-linear-gradient(45deg, rgba(200,180,150,.05) 0 9px, rgba(255,255,255,0) 9px 18px),
    linear-gradient(160deg, #fffdf6, #f6ecdd);
}
.photo-add{
  position:absolute; right:6px; bottom:6px; z-index:5;
  border:0; border-radius:999px; padding:5px 12px;
  background:rgba(255,255,255,.93); color:#a05a4f;
  font-size:12px; font-weight:700; letter-spacing:1px; cursor:pointer;
  box-shadow:0 2px 6px rgba(90,60,40,.28);
  display:none;
}
body.edit-mode .photo-add{ display:inline-block; }
/* 封底“替换照片”按钮：居中偏下 */
.photo-add-back{
  right:auto; left:50%; bottom:7%; transform:translateX(-50%);
  font-size:13px; padding:7px 18px;
}
/* 扉页日期：点击可修改 */
.years-edit{
  display:none;
  position:absolute; top:45%; left:50%; transform:translateX(-50%);
  z-index:3;
  border:0; background:none; padding:1px 8px; margin:0;
  font-family:var(--font-hand); font-size:15px; color:#8a5f42;
  letter-spacing:.05em; white-space:nowrap;
  border-radius:6px; cursor:pointer; user-select:none;
  transition:background .15s;
}
.years-edit:hover{ background:rgba(255,255,255,.55); }
.years-edit:hover::after{ content:" ✎"; font-size:11px; opacity:.6; margin-left:3px; }

/* ---------- 尾页 ---------- */
.sheet.end-page{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; text-align:center; padding:40px;
  background-color:var(--paper);
  background-image:var(--paper-spread);
  background-repeat:no-repeat;
  background-size:200% 100%;
}
.page.even .sheet.end-page{ background-position:left center; }
.page.odd .sheet.end-page{ background-position:right center; }
.endpage-deco{ font-size:24px; letter-spacing:10px; }
.sheet.end-page .end-line{
  max-width:100%;
  font-family:var(--font-hand);
  font-size:26px; font-weight:400; color:#766b59;
  letter-spacing:1px; line-height:1.9; text-align:center;
  padding:0 24px;
  font-synthesis:none;
}
.sheet.end-page .hand-char{
  display:inline-block;
  transform-origin:center 80%;
}
.sheet.end-page .hand-char:nth-child(4n+1){ transform:rotate(-3deg) translateY(1px); }
.sheet.end-page .hand-char:nth-child(4n+2){ transform:rotate(2deg) translateY(-2px); }
.sheet.end-page .hand-char:nth-child(4n+3){ transform:rotate(-1deg) translateY(2px); }
.sheet.end-page .hand-char:nth-child(4n){ transform:rotate(3deg) translateY(-1px); }
.endpage-sub{ font-size:13px; color:#a08a70; letter-spacing:3px; font-family:var(--font-hand); margin-top:-6px; }

/* ---------- 温馨手绘风封面（精装画册：左书脊 + 右页叠厚度） ---------- */
.page.odd .sheet.cover{
  border-radius:10px;
  background:#f8f3e7;
  /* 右侧多层页边 + 投影 = 合上的书侧面厚度；底部桌面投影 = 立着的书 */
  box-shadow:
    inset -11px 0 24px rgba(105,71,59,.20),
    inset 0 0 0 2px rgba(255,255,255,.18),
    inset 0 -12px 26px rgba(38,52,64,.15),
    2px 0 0 0 rgba(253,251,246,.98),
    4px 0 0 0 rgba(249,246,238,.96),
    6px 0 0 0 rgba(245,241,231,.94),
    8px 0 0 0 rgba(240,236,225,.92),
    10px 0 0 0 rgba(235,231,219,.9),
    12px 0 0 0 rgba(230,225,213,.88),
    14px 0 22px rgba(70,52,32,.28),
    0 22px 44px -10px rgba(70,52,32,.32);
}
/* 左侧书脊：精装硬壳的翻折收口 */
.sheet.cover::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:14px; z-index:6;
  border-radius:10px 0 0 10px;
  background:linear-gradient(90deg,
    rgba(60,40,22,.30),
    rgba(255,255,255,.08) 42%,
    rgba(60,40,22,.10));
  pointer-events:none;
}
.cover-art{
  position:absolute;
  left:-4%; top:-2%; width:108%; height:104%;
  z-index:2;                  /* 高于封面底色、低于设计层(3/4) */
  will-change:transform;      /* 强制独立合成层：保证照片始终被绘制 */
  object-fit:cover;
  pointer-events:none;
  user-select:none;
}
.cover-photo{
  background-size:cover;
  background-position:center;
}
.cover-photo-back{ filter:saturate(.72) brightness(.88); }
/* 插画背景铺满整页（云朵/蝴蝶结/草地/彩虹/小熊） */
.cover-bg-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1;
  will-change:transform;      /* 强制独立合成层，保证始终绘制 */
  pointer-events:none; user-select:none;
}
/* 中间照片相框（横版 4:3，白底圆角，像贴上去的照片） */
.cover-photo-frame{
  position:absolute; left:13%; width:74%; top:33%; z-index:3;
  background:#fffdf6; border-radius:9px;
  padding:8px 8px 11px;
  box-shadow:0 8px 18px rgba(90,65,35,.28), inset 0 0 0 1px rgba(160,120,70,.18);
}
.cover-photo-img{
  display:block; width:100%; height:auto;
  aspect-ratio:4/3; object-fit:cover;
  border-radius:4px;
}
.cover-overlay{ position:absolute; inset:0; z-index:4; pointer-events:none; }
/* “Coco 的”小字（参考图“Coco的”彩色字，居中偏上） */
.cover-kicker{
  position:absolute; top:26%; left:50%; transform:translateX(-50%);
  font-family:var(--font-hand);
  font-size:30px; font-weight:900; letter-spacing:8px; white-space:nowrap;
  background:linear-gradient(120deg,#f26d8d 0%,#f5a94b 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 4px rgba(220,130,150,.35));
}
/* “成长画册”深棕艺术字图（白底，multiply 融入封面） */
.cover-title-art{
  position:absolute; top:38%; left:50%; transform:translateX(-50%);
  width:66%; max-width:540px; z-index:4;
  mix-blend-mode:multiply;
  pointer-events:none; user-select:none;
}
/* 照片两侧的手绘气泡文字 */
.cover-bubble{
  position:absolute; font-family:var(--font-hand);
  font-size:12px; line-height:1.55; text-align:center;
  padding:8px 13px; border-radius:15px; white-space:nowrap;
}
.cover-bubble.bubble-left{
  left:1%; top:45%;
  background:#eaf7d6; border:2px dashed #9fc96b;
  color:#5b7d3a; transform:rotate(-4deg);
  box-shadow:0 3px 8px rgba(120,160,70,.18);
}
.cover-bubble.bubble-right{
  right:1%; top:62%;
  background:#fde6ee; border:2px dashed #f39cbd;
  color:#c2537f; transform:rotate(4deg);
  box-shadow:0 3px 8px rgba(210,120,150,.18);
}
/* 封面内侧（翻开后看到的素色内封） */
.sheet.cover-inside{
  background-color:#efe6d6;
  background-image:var(--paper-spread);
  background-repeat:no-repeat;
  background-size:200% 100%;
  box-shadow:inset 0 0 40px rgba(120,95,55,.15);
}
.page.even .sheet.cover-inside{ background-position:left center; }
.page.odd .sheet.cover-inside{ background-position:right center; }
/* 封底 */
.sheet.backcover{
  border-radius:10px;
  background:#f3d8c7;
  box-shadow:inset 11px 0 24px rgba(105,71,59,.20), inset 0 0 0 2px rgba(255,255,255,.16);
}
.sheet.backcover::before{
  content:""; position:absolute; inset:0; z-index:2;
  background:rgba(190,119,102,.16);
  pointer-events:none;
}
.cover-art-back{
  filter:saturate(.72) brightness(.88);
  transform:scale(1.04);
}

/* 硬壳页边缘（书页厚度感） */
.page.hard .sheet.cover::after{
  content:""; position:absolute; top:4px; bottom:4px; right:0; width:10px;
  background:repeating-linear-gradient(to right,#d8d0bc 0 1.4px,#b9ad96 1.4px 2.8px);
  box-shadow:inset 2px 0 4px rgba(0,0,0,.18);
  border-radius:0 6px 6px 0;
}

/* ---------- 返回按钮 ---------- */
.back-btn{
  position:fixed; top:26px; left:26px;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.8);
  color:#8d8577;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:80;
  opacity:0; pointer-events:none; transition:opacity .4s, transform .2s, color .2s;
  backdrop-filter:blur(4px);
}
body.is-open .back-btn{ opacity:1; pointer-events:auto; }
.back-btn:hover{ color:var(--ink); transform:translateX(-3px); }

/* ---------- 打开提示 ---------- */
.open-hint{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%);
  color:#8d8577; font-size:13px; letter-spacing:.8px; z-index:40;
  transition:opacity .4s;
}
body.is-open .open-hint{ opacity:0; pointer-events:none; }

.back-btn:focus-visible{
  outline:2px solid rgba(52,104,180,.72);
  outline-offset:3px;
}

/* ---------- 管理入口 ---------- */
.manage-btn{
  position:fixed; top:24px; right:24px;
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(91,77,57,.13);
  background:rgba(255,255,255,.78); color:#83796a; cursor:pointer; z-index:2200;
  display:flex; align-items:center; justify-content:center;
  font-size:23px; line-height:1; padding-bottom:5px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 20px rgba(83,68,45,.07);
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.manage-btn:hover,.manage-btn.is-active{ color:var(--ink); background:rgba(255,255,255,.96); transform:translateY(-1px); }
.manage-btn.is-editing{ color:#a03030; border-color:rgba(160,48,48,.32); }
.manage-btn:focus-visible,
.manage-action:focus-visible{
  outline:2px solid rgba(52,104,180,.72);
  outline-offset:3px;
}
.manage-panel{
  position:fixed; top:76px; right:24px; z-index:2200;
  width:142px; padding:5px; border-radius:10px;
  border:1px solid rgba(91,77,57,.12); background:rgba(255,255,255,.94);
  box-shadow:0 12px 28px rgba(83,68,45,.12);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.manage-action{
  appearance:none; width:100%; min-height:38px; border:0; border-radius:7px;
  padding:0 9px; background:transparent; color:#63594c; cursor:pointer;
  display:flex; align-items:center; gap:9px; text-align:left;
  font:500 13px var(--font-ui); letter-spacing:.4px;
  transition:background .15s ease, color .15s ease;
}
.manage-action:hover{ color:var(--ink); background:rgba(239,232,218,.58); }
.manage-action-icon{ width:16px; text-align:center; font-size:17px; line-height:1; color:#a97961; }

/* ---------- 阅读进度 ---------- */
.reader-meta{
  position:fixed; left:50%; bottom:25px; z-index:80;
  transform:translate(-50%,8px); opacity:0; pointer-events:none;
  color:#847a6c; font-size:12px; letter-spacing:.7px;
  transition:opacity .25s ease, transform .25s ease;
}
body.is-open:not(.is-end-closed) .reader-meta{ opacity:1; transform:translate(-50%,0); }

/* ---------- 轻提示 ---------- */
.toast{
  position:fixed; top:86px; left:50%; transform:translate(-50%,-10px);
  padding:10px 20px; border-radius:20px;
  background:rgba(42,36,25,.88); color:#f6f0e3;
  font-size:14px; letter-spacing:.5px;
  opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s;
  z-index:3000;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------- 封面上传按钮（闭合时显示在封面下方） ---------- */
.cover-upload-btn{
  position:fixed; left:50%; transform:translateX(-50%);
  top:calc(50% + var(--ph) / 2 + 18px);
  height:36px; padding:0 16px; border-radius:18px;
  border:1.5px dashed rgba(140,120,90,.45);
  background:rgba(255,255,255,.7);
  color:#9a8a6d; font-size:13px; letter-spacing:1px;
  display:flex; align-items:center; gap:6px;
  cursor:pointer; z-index:2100;
  opacity:0; pointer-events:none;
  transition:opacity .4s, transform .2s, background .2s, color .2s;
  backdrop-filter:blur(3px);
}
body:not(.is-open) .cover-upload-btn{ opacity:1; pointer-events:auto; }
.cover-upload-btn:hover{ background:rgba(255,255,255,.95); color:var(--ink); }
.cover-upload-btn:focus-visible{
  outline:2px solid rgba(52,104,180,.72);
  outline-offset:3px;
}
@media (max-width:640px){
  .cover-upload-btn{ top:auto; bottom:96px; height:32px; padding:0 12px; font-size:12px; }
}

/* ---------- 背景音乐 ---------- */
.music-btn{
  position:fixed; right:18px;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.85);
  color:#8d8577;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:2200;
  transition:transform .2s, color .2s, background .2s;
  backdrop-filter:blur(4px);
  -webkit-tap-highlight-color:transparent;
}
.music-btn svg{ width:22px; height:22px; }
.music-btn:hover{ color:var(--ink); background:rgba(255,255,255,.96); transform:translateY(-2px); }
.music-btn:focus-visible{
  outline:2px solid rgba(52,104,180,.72); outline-offset:3px;
}
.music-btn{ bottom:20px; }
.music-btn .ico-off{ display:none; }
body.music-off .music-btn .ico-on{ display:none; }
body.music-off .music-btn .ico-off{ display:block; }
body.music-on .music-btn .ico-on{ color:var(--accent); }
@keyframes note-bounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-2px);} }
body.music-on .music-btn .ico-on{ animation:note-bounce 1.6s ease-in-out infinite; }

/* 每幅画右上角的删除按钮（编辑模式下显示） */
.art-del{
  position:absolute; top:8px; right:8px; z-index:15;
  width:26px; height:26px; border-radius:50%;
  border:none; background:rgba(150,60,60,.88); color:#fff;
  font-size:16px; line-height:1; cursor:pointer;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.28);
  transition:transform .15s, background .15s;
  -webkit-tap-highlight-color:transparent;
}
body.edit-mode .art-del{ display:flex; }
.art-del:hover{ background:#a03030; transform:scale(1.1); }
/* 编辑模式下：翻页点击层让路，让每幅画上的 × 删除按钮可被点到 */
body.edit-mode .click-layer{ pointer-events:none; }

/* ---------- 拖放文件进画册 ---------- */
body.is-dragging::after{
  content:"松手，把画作加进画册";
  position:fixed; inset:0; z-index:2500;
  display:flex; align-items:center; justify-content:center;
  background:rgba(60,48,30,.4); color:#fff;
  font-size:22px; letter-spacing:4px;
  pointer-events:none;
  backdrop-filter:blur(2px);
}

/* ---------- 手机 ---------- */
@media (max-width:640px){
  .book-viewport{ flex:0 0 auto; }
  body.mobile-reading .book-viewport,
  body.mobile-reading .open-hint{ display:none; }
  .mobile-reader:not([hidden]){
    position:relative; display:block;
    width:min(calc(100vw - 32px), calc((100dvh - 172px) * .76), 440px);
    aspect-ratio:.76; filter:drop-shadow(0 16px 20px rgba(72,56,34,.11));
  }
  .mobile-reader-page,
  .mobile-reader-page .page{ width:100%; height:100%; }
  .mobile-reader-page .page{ position:relative; overflow:hidden; }
  .mobile-reader-page .sheet{ border-radius:8px !important; }
  .mobile-reader-page .page.even .sheet,
  .mobile-reader-page .page.odd .sheet{ box-shadow:0 12px 28px rgba(70,54,34,.11); }
  .mobile-reader-nav{
    position:absolute; top:0; bottom:0; z-index:20; width:20%; border:0;
    background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .mobile-reader-prev{ left:0; }
  .mobile-reader-next{ right:0; }
  .mobile-reader-nav:disabled{ cursor:default; }
  .manage-btn{ top:16px; right:16px; width:39px; height:39px; font-size:22px; }
  .manage-panel{ top:64px; right:16px; width:136px; }
  .reader-meta{ bottom:20px; font-size:11px; }
  .open-hint{ bottom:20px; font-size:12px; }
  .toast{ top:64px; font-size:12px; padding:8px 14px; }
  .sheet.title-page{ gap:7px; padding:16px; }
  .titlepage-emoji{ font-size:17px; letter-spacing:4px; }
  .titlepage-kicker{ font-size:9px; letter-spacing:2px; }
  .titlepage-name{ font-size:23px; }
  .titlepage-rule{ width:58px; }
  .titlepage-sub{ font-size:9px; line-height:1.5; }
  .page-art{ padding:19px 16px 14px; }
  .art-mat{ padding:5px 6px 0; }
  .page-caption{ padding-top:10px; min-height:50px; }
  .page-caption .cap-title{ font-size:16px; }
  .page-caption .cap-meta{ font-size:10px; margin-top:2px; }
  .page-number{ bottom:10px; font-size:9px; }
  .page.even .page-number{ right:14px; }
  .page.odd .page-number{ left:14px; }
}

@media (prefers-reduced-motion:reduce){
  #book,.spine,.fore-edge,.open-hint,.back-btn,.reader-meta{ transition-duration:.12s !important; }
  body.music-on .music-btn .ico-on{ animation:none !important; }
}

/* ---------- 照片裁切模态框（放大 / 拖拽选择展示区域） ---------- */
.crop-modal{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(45,34,22,.55);
}
.crop-modal[hidden]{ display:none; }
.crop-dialog{
  background:#fffdf6; border-radius:16px; padding:20px;
  box-shadow:0 20px 55px rgba(0,0,0,.4);
  width:min(600px, 94vw);
}
.crop-hint{ font-size:13px; color:#9a8a72; text-align:center; margin-bottom:14px; letter-spacing:1px; }
.crop-stage{
  position:relative; overflow:hidden; border-radius:10px;
  background:#e6dfd1; width:100%; aspect-ratio:4/3;
  touch-action:none; cursor:grab;
}
.crop-stage:active{ cursor:grabbing; }
.crop-stage img{
  position:absolute; left:0; top:0; max-width:none;
  transform-origin:0 0; user-select:none; -webkit-user-drag:none;
  will-change:transform,width,height;
}
.crop-frame{
  position:absolute; inset:0; border-radius:8px; pointer-events:none;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 2000px rgba(0,0,0,.42);
}
.crop-toolbar{ display:flex; align-items:center; gap:10px; margin-top:16px; }
.crop-zoom-btn{
  width:32px; height:32px; border-radius:8px; border:1px solid #d8ccb8;
  background:#fff; color:#7a6a52; font-size:18px; line-height:1; cursor:pointer;
}
.crop-zoom-btn:hover{ background:#f3ecdd; }
.crop-toolbar input[type=range]{ flex:1; accent-color:#d08a6a; }
.crop-spacer{ flex:0 0 6px; }
.crop-cancel, .crop-confirm{
  border:0; border-radius:10px; padding:9px 20px; font-size:14px; cursor:pointer; letter-spacing:2px;
}
.crop-cancel{ background:#efe7d8; color:#8a7a62; }
.crop-confirm{ background:linear-gradient(135deg,#f08a9c,#f0a55a); color:#fff; font-weight:700; }

/* ---------- 扉页装饰（参考图：星星/云朵/画笔/调色盘/彩虹/爱心/纸飞机/树木 + 左侧绳结） ---------- */
.tp-deco{
  position:absolute; z-index:2; pointer-events:none;
  opacity:.9; line-height:1; filter:drop-shadow(0 1px 2px rgba(120,90,50,.12));
}
.tp-d1{ top:10%; left:6%; font-size:24px; }
.tp-d2{ top:8%; right:7%; font-size:20px; }
.tp-d3{ top:46%; left:4%; font-size:20px; }
.tp-d4{ top:40%; right:4%; font-size:20px; }
.tp-d5{ bottom:17%; left:6%; font-size:22px; }
.tp-d6{ top:31%; right:11%; font-size:16px; }
.tp-d7{ bottom:23%; right:5%; font-size:20px; }
.tp-d8{ bottom:6%; left:3%; font-size:24px; }
.tp-bind{
  position:absolute; left:-2px; top:50%; transform:translateY(-50%);
  width:16px; height:30px; border-radius:9px; z-index:3; pointer-events:none;
  background:linear-gradient(180deg,#d09a68,#a96a40);
  box-shadow:inset -2px 0 3px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.15);
}
.tp-bind::before{
  content:""; position:absolute; left:50%; top:-9px; transform:translateX(-50%);
  width:2px; height:9px; background:#b07a4e;
}

/* ---------- 扉页：直接用参考图作整页背景，照片框叠加到图中照片位置 ---------- */
.sheet.title-page{ position:absolute; inset:0; height:100%; }
.title-bg-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1;
  pointer-events:none; user-select:none;
}
.title-photo-frame{
  position:absolute; top:57%; left:50%; transform:translateX(-50%);
  width:47%; aspect-ratio:6/5; z-index:3;
}