/* ═══════════════════════════════════════════════════════════
   邮邮 · 场景化视觉系统
   原则：页面是夜空场景，信纸只在“信”出现时出现（写信/读信）；
   角色是站在夜空里的存在，不关进白框。
   ═══════════════════════════════════════════════════════════ */
:root {
  --night: #1d2233;
  --night-2: #272e45;
  --paper: #faf5e9;
  --paper-2: #f3ead6;
  --ink: #3a3226;
  --warm: #e8a94b;
  --warm-2: #c9822a;
  --muted: #8b8271;
  --danger: #b4552f;
  --ok: #4a7d5b;
  --cream: rgba(250, 245, 233, .88);
  --cream-dim: rgba(250, 245, 233, .55);
  --cream-faint: rgba(250, 245, 233, .28);
  --font-hand: "Kaiti SC", "STKaiti", "KaiTi", "BiauKai", "TW-Kai", serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--night);
  color: var(--cream);
  font-family: "Songti SC", "STSong", Georgia, serif;
  min-height: 100vh;
}
a, a:visited { color: var(--warm); }
a:hover { color: var(--paper); }

/* ── 夜空：星点 + 缺口月 ── */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sky::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 22px 34px, rgba(250,245,233,.9), transparent),
    radial-gradient(1px 1px at 130px 90px, rgba(250,245,233,.6), transparent),
    radial-gradient(1.5px 1.5px at 200px 40px, rgba(232,169,75,.7), transparent),
    radial-gradient(1px 1px at 80px 150px, rgba(250,245,233,.5), transparent),
    radial-gradient(1px 1px at 260px 130px, rgba(250,245,233,.75), transparent),
    radial-gradient(1.5px 1.5px at 170px 180px, rgba(250,245,233,.4), transparent);
  background-repeat: repeat;
  background-size: 320px 220px;
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }
.sky::after {
  content: ""; position: absolute; top: -10%; left: 50%; transform: translateX(-50%);
  width: 860px; height: 560px; max-width: 100vw;
  background: radial-gradient(ellipse at center, rgba(232,169,75,.09), transparent 65%);
}
.moon {
  position: absolute; top: 64px; right: 9%;
  width: 58px; height: 58px; border-radius: 50%;
  background: #f2e8c9; box-shadow: 0 0 24px rgba(242,232,201,.35);
}
.moon::after {
  content: ""; position: absolute; width: 44px; height: 44px; border-radius: 50%;
  background: var(--night); top: -12px; right: -10px;
}
.nav, .wrap, .footer-note { position: relative; z-index: 1; }

/* ── 极简导航：左logo，右侧一个主动作 + 一个收纳菜单 ── */
.nav {
  display: flex; align-items: center; gap: 1.3rem;
  padding: 1rem 1.6rem; color: var(--cream);
}
.nav a, .nav a:visited { color: var(--cream); text-decoration: none; opacity: .82; }
.nav a:hover { opacity: 1; }
.nav .brand { font-family: var(--font-hand); font-weight: bold; font-size: 1.2rem; opacity: 1; letter-spacing: .04em; }
.nav .spacer { flex: 1; }
.nav .badge {
  background: var(--warm); color: var(--night); border-radius: 10px;
  font-size: .72rem; padding: 0 .5em; margin-left: .3em; vertical-align: 2px;
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.12);} }
.nav-pill {
  border: 1px solid rgba(232,169,75,.7); border-radius: 999px;
  padding: .32em 1.1em; font-family: var(--font-hand);
}
.nav-pill:hover { background: var(--warm); color: var(--night) !important; opacity: 1; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; opacity: .82; padding: .2em .6em; letter-spacing: .2em; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { opacity: 1; }
.menu-list {
  position: absolute; right: 0; top: 2.1em; min-width: 128px; z-index: 5;
  background: var(--night-2); border: 1px solid rgba(250,245,233,.14);
  border-radius: 12px; padding: .45em 0; box-shadow: 0 10px 28px rgba(0,0,0,.45);
}
.menu-list a { display: block; padding: .45em 1.1em; white-space: nowrap; font-size: .95rem; }
.menu-list a:hover { background: rgba(232,169,75,.14); }

/* ── 内容列：窄、居中、有呼吸 ── */
.wrap { width: 100%; max-width: 640px; margin: 2.2rem auto 4rem; padding: 0 1.2rem; animation: rise .55s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ── 场景排版（直接写在夜空上）── */
.scene { text-align: center; }
.scene h1, .scene h2 { font-family: var(--font-hand); color: var(--paper); font-weight: normal; letter-spacing: .05em; }
.scene h2 { font-size: 2rem; margin: 1rem 0 .6rem; }
.scene p { line-height: 2; }
.scene-sub { color: var(--cream-dim); font-size: 1.02rem; }
.scene-label { color: var(--cream-dim); font-size: .85rem; letter-spacing: .35em; text-transform: uppercase; }
.scene-foot { color: var(--cream-faint); font-size: .8rem; line-height: 1.9; margin-top: 2.2rem; }
.scene-foot a { color: var(--cream-dim); }
.slogan {
  font-family: var(--font-hand); font-size: 2.5rem; line-height: 1.65;
  color: var(--paper); letter-spacing: .1em; margin: 1.4rem 0 .8rem;
}
.glow-spot { position: relative; display: inline-block; }
.glow-spot::before {
  content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  width: 140%; height: 70px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(232,169,75,.26), transparent 70%);
}

/* ── 信纸：只属于信本身的容器（写信页/读信页）── */
.sheet {
  position: relative;
  background: var(--paper);
  background-image: repeating-linear-gradient(transparent, transparent 1.9em, rgba(58,50,38,.11) 2em);
  color: var(--ink); text-align: left;
  border-radius: 16px; padding: 1.8rem 2rem;
  margin: 1.2rem auto; width: 100%;
  box-shadow: 0 14px 40px rgba(0,0,0,.4), 0 0 70px rgba(232,169,75,.08);
  line-height: 2em; font-family: var(--font-hand); font-size: 1.08rem;
  animation: imgin .8s ease both;
}
.sheet-letter { white-space: pre-wrap; }   /* 纯文本信件：保留换行，AI披露自然成段 */
.sheet-stamp {
  position: absolute; top: 1rem; right: 1.1rem; width: 76px;
  transform: rotate(3.5deg); filter: drop-shadow(0 2px 4px rgba(0,0,0,.18));
  pointer-events: none;
}
.sheet-stamp img { width: 100%; display: block; }
.scene-wide { width: min(680px, 100%); margin: 1rem auto; }
.scene-wide img { width: 100%; display: block; border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.45); animation: imgin 1s ease both; }
.nav-logo { width: 30px; height: 30px; border-radius: 50%; vertical-align: -9px; margin-right: .35em; box-shadow: 0 0 0 2px rgba(232,169,75,.5); }
.sheet .postmark { font-family: "Songti SC", serif; }
.note {
  background: var(--paper); color: var(--ink); text-align: left;
  border-radius: 16px; padding: 1.5rem 1.7rem; margin: 1.2rem auto;
  width: min(440px, 100%); line-height: 2;
  font-family: var(--font-hand); font-size: 1.05rem;
  box-shadow: 0 14px 40px rgba(0,0,0,.4);
}
.postmark { color: var(--muted); font-size: .85rem; }
.scene .postmark { color: var(--cream-dim); }

textarea {
  width: 100%; min-height: 13em; border: none; background: transparent;
  font: inherit; line-height: 2em; resize: vertical; outline: none; color: var(--ink);
  transition: box-shadow .3s ease; border-radius: 4px;
}
textarea::placeholder { color: rgba(58,50,38,.45); }
input[type=text], input[type=number], input[type=email] {
  font: inherit; padding: .45em .7em; border: 1px solid rgba(58,50,38,.35);
  border-radius: 10px; background: #fffdf7; width: 100%; color: var(--ink);
}
label.check { display: block; margin: .55em 0; font-size: .9rem; }

/* ── 按钮：胶囊 ── */
.btn, a.btn, a.btn:visited {
  display: inline-block; font: inherit; cursor: pointer;
  font-family: var(--font-hand); letter-spacing: .06em; font-size: 1.08rem;
  background: var(--warm); color: var(--night);
  border: none; border-radius: 999px; padding: .65em 2.1em;
  text-decoration: none; font-weight: bold;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(232,169,75,.4); color: var(--night); }
.btn:active { transform: scale(.97); }
.btn.ghost, a.btn.ghost, a.btn.ghost:visited { background: transparent; border: 1px solid var(--cream-faint); color: var(--cream); font-weight: normal; }
.btn.ghost:hover { border-color: var(--cream-dim); box-shadow: none; color: var(--paper); }
.btn.small { padding: .3em 1.1em; font-size: .88rem; }
.btn.danger { background: var(--danger); color: var(--paper); }
.actions { display: flex; gap: .9rem; margin-top: 1rem; align-items: center; justify-content: center; flex-wrap: wrap; }

/* ── 夜空上的提示条 ── */
.notice {
  background: rgba(250,245,233,.06); border: 1px solid rgba(250,245,233,.12);
  border-left: 3px solid var(--warm); text-align: left;
  padding: .8em 1.1em; margin: 1.1em auto; border-radius: 0 12px 12px 0;
  font-size: .93rem; line-height: 1.9; color: var(--cream);
}
.notice.crisis { border-left-color: var(--danger); }
.error { color: #e08a63; margin: .6em 0; }
.msg-ok { color: #8fbf9f; margin: .6em 0; }

/* ── 收藏册列表：夜空上的信件时间线 ── */
.letter-rows { list-style: none; text-align: left; margin-top: 1.4rem; }
.letter-rows li {
  display: flex; gap: .9rem; align-items: baseline;
  padding: .85em .3em; border-bottom: 1px dashed var(--cream-faint);
}
.letter-rows time { color: var(--cream-dim); font-size: .82rem; white-space: nowrap; }
.letter-rows a.excerpt { flex: 1; color: var(--cream); text-decoration: none; font-family: var(--font-hand); font-size: 1.02rem; }
.letter-rows a.excerpt:hover { color: var(--warm); }
.tag {
  font-size: .74rem; border-radius: 999px; padding: .12em .7em;
  border: 1px solid var(--cream-faint); color: var(--cream-dim);
  white-space: nowrap; text-decoration: none;
}
.tag.warm { background: var(--warm); color: var(--night); border-color: var(--warm); }
.tag.ok { border-color: rgba(143,191,159,.5); color: #8fbf9f; }
a.tag:hover { border-color: var(--warm); color: var(--warm); }

/* ── 角色挂点 ── */
.yy-fig { margin: 0 auto .6rem; max-width: 100%; }
.yy-img { display: block; width: 100%; height: auto; animation: imgin 1s ease both; }
@keyframes imgin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
.yy-shadow {
  display: block; width: 62%; height: 10px; margin: -4px auto 0;
  border-radius: 50%; background: rgba(0,0,0,.35); filter: blur(3px);
}
.corner-companion { position: absolute; right: 1rem; bottom: .9rem; margin: 0; opacity: .95; pointer-events: none; }
.footer-companion { display: inline-block; margin: .4rem 0 0; }

/* ── 明信片 ── */
.postcard {
  width: min(540px, 94%); margin: 1.8rem auto 1rem; background: #fffdf4;
  padding: .7rem .7rem .9rem; border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,.4); transform: rotate(-1.4deg); position: relative;
}
.postcard::before {
  content: ""; position: absolute; top: -11px; left: 50%;
  transform: translateX(-50%) rotate(2deg); width: 112px; height: 22px;
  background: rgba(232,169,75,.45); box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.postcard img { width: 100%; display: block; animation: imgin 1s ease both; }
.postcard figcaption { text-align: center; color: var(--muted); padding-top: .55rem; font-size: .95rem; font-family: var(--font-hand); }

/* ── 划船逐帧 / 摇晃 ── */
@keyframes sail-bob { 0%,100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(6px) rotate(1.2deg); } }
.anim-sail { animation: sail-bob 3.5s ease-in-out infinite; }
.voyage { position: relative; width: min(480px, 92%); margin: 1.8rem auto; animation: sail-bob 4.5s ease-in-out infinite; }
.voyage picture img { position: absolute; inset: 0; width: 100%; height: auto; opacity: 0; animation: voyage-frame 5.4s ease-in-out infinite; }
.voyage picture:first-child img { position: relative; }
.voyage picture:nth-child(1) img { animation-delay: 0s; }
.voyage picture:nth-child(2) img { animation-delay: 1.8s; }
.voyage picture:nth-child(3) img { animation-delay: 3.6s; }
@keyframes voyage-frame { 0% {opacity:0;} 7% {opacity:1;} 33% {opacity:1;} 41% {opacity:0;} 100% {opacity:0;} }
.voyage-waves { width: min(500px, 94%); margin: 1.8rem auto; animation: sail-bob 3s ease-in-out infinite; }
.voyage-waves img { width: 100%; display: block; mask-image: linear-gradient(180deg, #000 82%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); }

/* ── 投进邮筒动画 ── */
.mail-drop { position: relative; width: 220px; height: 112px; margin: .4rem auto .6rem; }
.mail-drop .slot { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); width: 150px; height: 12px; background: var(--night-2); border: 1px solid rgba(250,245,233,.14); border-radius: 6px; box-shadow: inset 0 2px 5px rgba(0,0,0,.55); }
.mail-drop .env { position: absolute; top: 0; left: 50%; width: 84px; height: 54px; background: #f6efdd; border: 1px solid #dccfa9; border-radius: 3px; animation: mail-drop-fall 1.7s ease-in .2s both; }
.mail-drop .env::before { content: ""; position: absolute; inset: 0 0 auto; height: 25px; clip-path: polygon(0 0, 100% 0, 50% 100%); background: #efe5cb; }
@keyframes mail-drop-fall {
  0% { transform: translateX(-50%) translateY(-14px) rotate(-4deg); opacity: 0; }
  22% { opacity: 1; }
  68% { transform: translateX(-50%) translateY(38px) rotate(2deg); opacity: 1; }
  100% { transform: translateX(-50%) translateY(54px) rotate(0) scaleY(.55); opacity: 0; }
}

/* ── 信封拆启仪式 ── */
.envelope { width: min(360px, 92%); margin: 1.8rem auto .8rem; cursor: pointer; perspective: 900px; }
.env-body { position: relative; height: 212px; background: #f6efdd; border-radius: 8px; box-shadow: 0 14px 34px rgba(0,0,0,.4); }
.env-letter {
  position: absolute; left: 6%; right: 6%; bottom: 10px; height: 168px;
  background: #fffdf4; border: 1px solid var(--paper-2); border-radius: 4px;
  padding: .9rem 1rem; color: var(--muted); overflow: hidden; z-index: 1;
  transition: transform .9s cubic-bezier(.2,.7,.3,1) .45s; line-height: 1.9;
  font-family: var(--font-hand); text-align: left;
}
.env-front { position: absolute; inset: auto 0 0; height: 118px; background: #f6efdd; clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%); z-index: 2; border-radius: 0 0 8px 8px; }
.env-flap { position: absolute; inset: 0 0 auto; height: 116px; background: #efe5cb; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; backface-visibility: hidden; z-index: 3; border-radius: 8px 8px 0 0; }
.env-seal {
  position: absolute; left: 50%; top: 104px; transform: translate(-50%, -50%);
  width: 62px; z-index: 4; filter: drop-shadow(0 3px 5px rgba(0,0,0,.3));
  transition: opacity .35s ease .25s, transform .35s ease .25s;
}
.env-seal img { width: 100%; display: block; }
/* 开封：封舌翻上去之后必须沉到信纸后面（z-index 在关键帧里降层，防止信纸穿模） */
.envelope.open .env-flap { animation: flap-open .8s ease forwards; }
@keyframes flap-open {
  0%   { transform: rotateX(0);       z-index: 3; }
  65%  { transform: rotateX(-160deg); z-index: 3; }
  66%  {                              z-index: 0; }
  100% { transform: rotateX(-178deg); z-index: 0; opacity: .45; }
}
.envelope.open .env-seal { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.envelope.open .env-letter { transform: translateY(-84px) rotate(-.6deg); }
.env-hint { text-align: center; color: var(--cream-dim); margin-bottom: 1rem; font-family: var(--font-hand); }
#replyBox { display: none; }
#replyBox.revealed { display: block; animation: rise .9s ease-out; }

.footer-note { color: var(--cream-faint); text-align: center; font-size: .78rem; margin-top: 2rem; line-height: 1.9; padding: 0 1rem; }

/* ═══ 邮局后台（内部工具，保留纸面工作台风格）═══ */
.paper {
  position: relative; margin: 0 auto; background: var(--paper); color: var(--ink);
  border-radius: 14px; padding: 2rem 2.2rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.45); line-height: 2em;
}
.paper h1, .paper h2, .paper h3 { line-height: 1.4; margin-bottom: .8rem; font-family: var(--font-hand); }
.paper .sub, .sub { color: var(--muted); }
.scene .sub { color: var(--cream-dim); }
.paper a, .paper a:visited { color: var(--warm-2); }
.paper .notice { background: var(--paper-2); border: none; border-left: 4px solid var(--warm); color: var(--ink); border-radius: 0 8px 8px 0; }
.paper .notice.crisis { border-left-color: var(--danger); }
.paper .error { color: var(--danger); }
.paper .msg-ok { color: var(--ok); }
.paper .btn { border-radius: 8px; }
.paper .postmark { color: var(--muted); }
.paper textarea { border: 1px dashed var(--muted); padding: .6em; min-height: 9em; font-family: var(--font-hand); }
.admin-wide { max-width: 860px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: .8rem; margin: 1rem 0; }
.stat { background: var(--paper-2); border-radius: 8px; padding: .7em .9em; }
.stat b { font-size: 1.5rem; display: block; }
.stat span { font-size: .8rem; color: var(--muted); }
table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th, td { text-align: left; padding: .5em .6em; border-bottom: 1px solid rgba(250,245,233,.16); font-size: .95rem; line-height: 1.7; }
th { color: var(--cream-dim); font-weight: normal; font-size: .82rem; }
.paper th, .paper td { border-bottom-color: var(--paper-2); }
.paper th { color: var(--muted); }
.review-card { border: 1px solid var(--paper-2); border-radius: 10px; padding: 1.2rem 1.4rem; margin-bottom: 1.4rem; background: #fffdf4; }
.review-card blockquote { border-left: 3px solid var(--muted); padding-left: .9em; color: var(--muted); margin: .6em 0; white-space: pre-wrap; }
.review-card .tag { color: var(--muted); border-color: var(--muted); }
.review-card .tag.warm { color: var(--night); border-color: var(--warm); }
.review-card .tag.ok { background: var(--ok); color: var(--paper); border-color: var(--ok); }
.paper .actions { justify-content: flex-start; }

/* 信纸内白色便签（读信页信文） */
.reply-paper {
  background: #fffdf4; border: 1px solid var(--paper-2);
  padding: 1.4rem 1.6rem; margin-top: 1rem; border-radius: 8px;
  white-space: pre-wrap; color: var(--ink); text-align: left;
  font-family: var(--font-hand); font-size: 1.06rem; line-height: 2;
}
.anim-rise { animation: rise .8s ease-out; }

/* ── 入场编排：场景子元素错峰浮现 ── */
.scene > * { animation: rise .6s ease-out both; }
.scene > *:nth-child(1) { animation-delay: .05s; }
.scene > *:nth-child(2) { animation-delay: .15s; }
.scene > *:nth-child(3) { animation-delay: .25s; }
.scene > *:nth-child(4) { animation-delay: .35s; }
.scene > *:nth-child(5) { animation-delay: .45s; }
.scene > *:nth-child(6) { animation-delay: .55s; }
.scene > *:nth-child(7) { animation-delay: .65s; }
.scene > *:nth-child(n+8) { animation-delay: .75s; }

/* ── 注册卡/便签：一张飘落到桌上的纸 ── */
.note {
  position: relative;
  transform: rotate(-.6deg);
  box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 80px rgba(232,169,75,.10);
  animation: paper-land .8s cubic-bezier(.2,.7,.3,1) both !important;
  animation-delay: .35s !important;
  transition: box-shadow .4s ease, transform .4s ease;
}
@keyframes paper-land {
  from { opacity: 0; transform: translateY(30px) rotate(1.6deg) scale(.985); }
  to   { opacity: 1; transform: rotate(-.6deg); }
}
.note:focus-within {
  transform: rotate(0deg);
  box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 110px rgba(232,169,75,.22);
}
.note::before { /* 和纸胶带 */
  content: ""; position: absolute; top: -11px; left: 50%;
  transform: translateX(-50%) rotate(-2deg); width: 108px; height: 22px;
  background: rgba(232,169,75,.42); box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.note::after { /* 右上角邮票（真实票样） */
  content: ""; position: absolute; top: .8rem; right: .9rem;
  width: 56px; height: 56px; transform: rotate(3deg); opacity: .95;
  /* 相对路径：随 CSS 所在源（本地 /static 或 OSS）解析，两种部署都成立 */
  background: url("stamps/moon-sea.png") center/contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.15));
}

/* ── “在纸上写字”的输入框 ── */
.note input[type=text], .note input[type=number], .note input[type=email] {
  border: none; border-bottom: 1.5px dashed rgba(58,50,38,.35); border-radius: 0;
  background: transparent; font-family: var(--font-hand); font-size: 1.1rem;
  padding: .3em .1em; width: 100%; color: var(--ink);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.note input:focus {
  outline: none; border-bottom: 1.5px solid var(--warm-2);
  box-shadow: 0 12px 16px -12px rgba(232,169,75,.55);
}
.note input::placeholder { color: rgba(58,50,38,.32); }
.note label { color: rgba(58,50,38,.75); }
input[type=checkbox] { accent-color: var(--warm-2); width: 1em; height: 1em; }

/* 数字输入不露步进箭头；Chrome自动填充不染蓝 */
.note input[type=number]::-webkit-inner-spin-button,
.note input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.note input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.note input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px var(--paper) inset;
  -webkit-text-fill-color: var(--ink);
}

/* ── 回岛入口 ── */
.return-island { margin: 1.4rem auto 0; max-width: 26em; }
.return-island summary {
  list-style: none; cursor: pointer; color: var(--cream-dim);
  font-family: var(--font-hand); font-size: .98rem;
}
.return-island summary::-webkit-details-marker { display: none; }
.return-island summary:hover { color: var(--warm); }
.return-form { display: flex; gap: .6rem; margin-top: .8rem; justify-content: center; }
.return-form input {
  width: 14em; background: rgba(250,245,233,.08); border: 1px solid var(--cream-faint);
  border-radius: 999px; padding: .45em 1em; color: var(--cream);
  font: inherit; letter-spacing: .15em; text-align: center; outline: none;
  transition: border-color .3s ease;
}
.return-form input:focus { border-color: var(--warm); }
.return-form input::placeholder { color: var(--cream-faint); letter-spacing: 0; }

/* ── 主按钮暖光呼吸 ── */
.note .btn, .scene > p > .btn {
  animation: breath 3.2s ease-in-out infinite;
}
@keyframes breath {
  0%, 100% { box-shadow: 0 2px 10px rgba(232,169,75,.25); }
  50% { box-shadow: 0 4px 26px rgba(232,169,75,.55); }
}

/* ── 首屏构图纪律：主视觉受视口高度约束，永远完整入画，不把首屏挤爆 ── */
.hero-fig { width: auto !important; }
.hero-fig img { max-height: 44vh; max-width: 78vw; width: auto; margin: 0 auto; }
.mid-fig { width: auto !important; }
.mid-fig img { max-height: 34vh; max-width: 82vw; width: auto; margin: 0 auto; }

/* ── 欢迎页：全屏沉浸，垂直居中 ── */
.welcome { min-height: calc(100vh - 9rem); display: flex; flex-direction: column; justify-content: center; }
@supports (height: 100svh) { .welcome { min-height: calc(100svh - 9rem); } }
.welcome .envelope { margin-top: 1.6rem; }
.welcome-letter { width: min(560px, 100%); }
#replyBox.revealed .welcome-letter p { opacity: 0; animation: rise .85s ease-out both; }
#replyBox.revealed .welcome-letter p:nth-child(1) { animation-delay: .15s; }
#replyBox.revealed .welcome-letter p:nth-child(2) { animation-delay: .55s; }
#replyBox.revealed .welcome-letter p:nth-child(3) { animation-delay: 1.05s; }
#replyBox.revealed .welcome-letter p:nth-child(4) { animation-delay: 1.6s; }
#replyBox.revealed .welcome-letter p:nth-child(5) { animation-delay: 2.15s; }
#replyBox.revealed .welcome-letter p:nth-child(6) { animation-delay: 2.6s; }
#replyBox.revealed .welcome-letter p:nth-child(7) { animation-delay: 3s; }
#replyBox.revealed .actions { opacity: 0; animation: rise .8s ease-out 3.3s both; }

/* ── 移动端 / 微信H5 ── */
@media (max-width: 560px) {
  .wrap { margin: 1.1rem auto 2.6rem; padding: 0 1rem; }
  .nav { padding: .7rem 1rem; gap: .9rem; }
  .slogan { font-size: clamp(1.5rem, 6.8vw, 2rem); letter-spacing: .06em; }
  .scene h2 { font-size: clamp(1.4rem, 6vw, 1.7rem); }
  .scene-sub { font-size: .96rem; }
  .sheet { padding: 1.3rem 1.15rem; border-radius: 12px; }
  .note { padding: 1.3rem 1.2rem; }
  .note::after { display: none; }
  .letter-rows li { flex-wrap: wrap; gap: .25rem .7rem; }
  .letter-rows time { flex-basis: 100%; }
  .moon { top: 72px; right: 6%; width: 44px; height: 44px; }
  .moon::after { width: 34px; height: 34px; top: -9px; right: -8px; }
  .hero-fig img { max-height: 38vh; }
  .mid-fig img { max-height: 30vh; }
  .corner-companion { right: .5rem; bottom: .5rem; width: 72px !important; }
  .postcard { width: min(440px, 96%); }
  .actions { gap: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Δ2 回信邮戳（印泥文字层；图像资产就位后可叠底图）*/
.ink-postmark {
  position: absolute; top: 4.6rem; right: 1.2rem; width: 84px; height: 84px;
  border: 2.5px solid rgba(178, 62, 46, .55); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15em; transform: rotate(-8deg); pointer-events: none;
  color: rgba(178, 62, 46, .72); text-align: center;
  font-family: "Songti SC", serif; line-height: 1.25;
  -webkit-mask-image: radial-gradient(circle at 32% 68%, transparent 5%, #000 22%),
    linear-gradient(#000, #000);
  mask-image: radial-gradient(circle at 32% 68%, transparent 5%, #000 22%);
}
.ink-postmark::before, .ink-postmark::after {
  content: ""; position: absolute; left: 8px; right: 8px; height: 1px;
  background: rgba(178, 62, 46, .45);
}
.ink-postmark::before { top: 20px; }
.ink-postmark::after { bottom: 20px; }
.ink-postmark b { font-size: .68rem; font-weight: 600; letter-spacing: .08em; max-width: 64px; }
.ink-postmark i { font-style: normal; font-size: .58rem; letter-spacing: .05em; opacity: .85; }

/* 复核台键盘流：当前卡片高亮 */
.review-card.active-card {
  outline: 2px solid rgba(232, 169, 75, .65); outline-offset: 3px;
  border-radius: 10px;
}
kbd {
  background: rgba(0,0,0,.18); border-radius: 4px; padding: .05em .4em;
  font-size: .85em; font-family: ui-monospace, monospace;
}

/* ═══ 收藏册信封网格 / 馆藏 / 岛屿 / 班船倒计时（设计稿适配版）═══ */
.month-label { color: var(--cream-dim); font-family: var(--font-hand); font-size: .95rem;
  text-align: left; margin: 1.6rem 0 .6rem; letter-spacing: .12em; }
.env-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem; }
.env-card { position: relative; display: block; background: #f6efdd; border-radius: 10px;
  aspect-ratio: 3/2.1; padding: .7rem .8rem; text-align: left; text-decoration: none;
  color: var(--ink); box-shadow: 0 6px 16px rgba(0,0,0,.3); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease; }
.env-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 34%;
  clip-path: polygon(0 0, 100% 0, 50% 100%); background: #efe5cb; }
.env-card:hover { transform: translateY(-3px) rotate(-.5deg); box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.env-card.unread { box-shadow: 0 0 0 2px var(--warm), 0 8px 20px rgba(232,169,75,.3); }
.env-card time { position: absolute; top: .5rem; left: .7rem; font-size: .72rem; color: var(--muted); z-index: 1; }
.env-stamp { position: absolute; top: .45rem; right: .55rem; width: 34px; transform: rotate(4deg);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)); z-index: 1; }
.env-mark { position: absolute; top: .9rem; right: 2.1rem; width: 30px; height: 30px;
  border: 1.5px solid rgba(178,62,46,.5); border-radius: 50%; transform: rotate(-10deg); z-index: 1; }
.env-fav { position: absolute; bottom: .45rem; right: .6rem; color: var(--danger); font-size: .8rem; }
.env-excerpt { position: absolute; bottom: 1.5rem; left: .8rem; right: .8rem;
  font-family: var(--font-hand); font-size: .86rem; line-height: 1.5; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.env-state { position: absolute; bottom: .4rem; left: .8rem; font-size: .68rem; color: var(--muted); }
.env-card.unread .env-state { color: var(--warm-2); font-weight: bold; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1rem; margin: 1.4rem 0; }
.gallery-card { background: rgba(250,245,233,.05); border: 1px solid var(--cream-faint);
  border-radius: 12px; padding: 1rem .7rem .8rem; display: flex; flex-direction: column;
  align-items: center; gap: .35rem; }
.gallery-card img { width: 84px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.3)); }
.gallery-card b { font-family: var(--font-hand); color: var(--cream); font-weight: normal; }
.gallery-card span { font-size: .75rem; color: var(--cream-dim); }
.gallery-card.locked { opacity: .45; }
.gallery-card.locked img, .gallery-card.locked .static-mark { filter: grayscale(.9); }
.static-mark { position: static; transform: rotate(-8deg); width: 76px; height: 76px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: .8rem; margin: 1.4rem 0 .8rem; }
.stat-card { background: rgba(250,245,233,.05); border: 1px solid var(--cream-faint);
  border-radius: 12px; padding: .9rem .5rem; }
.stat-card b { display: block; font-size: 1.7rem; color: var(--warm); font-family: var(--font-hand); }
.stat-card span { font-size: .8rem; color: var(--cream-dim); }

.sail-count { font-size: .78rem; color: var(--cream-dim); letter-spacing: .06em;
  border: 1px solid var(--cream-faint); border-radius: 999px; padding: .2em .8em; white-space: nowrap; }

@media (max-width: 560px) {
  .env-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .sail-count { display: none; }   /* 手机端导航空间有限，倒计时只在桌面显示 */
  .month-label { margin-top: 1.2rem; }
}
.bulletin { display: inline-block; margin: .6rem auto; padding: .35em 1.1em; border-radius: 999px;
  border: 1px dashed rgba(232,169,75,.45); color: var(--cream-dim); font-size: .85rem;
  font-family: var(--font-hand); }
.meta-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .6rem;
  margin: 1.2rem auto 0; }
.meta-bar span { font-size: .78rem; color: var(--cream-dim); border: 1px solid var(--cream-faint);
  border-radius: 999px; padding: .22em .9em; }
.tabbar { display: none; }
@media (max-width: 560px) {
  .tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9;
    background: rgba(29,34,51,.96); border-top: 1px solid rgba(250,245,233,.12);
    padding: .4rem 0 calc(.4rem + env(safe-area-inset-bottom)); backdrop-filter: blur(8px); }
  .tabbar a { flex: 1; text-align: center; color: var(--cream-dim); text-decoration: none;
    font-size: 1.05rem; line-height: 1.2; }
  .tabbar a span { display: block; font-size: .66rem; margin-top: .1em; }
  body { padding-bottom: 4.2rem; }
  .nav .menu, .nav .nav-pill, .nav a:not(.brand) { display: none; }  /* 手机端导航交给底部tab */
}
.nav a.active { opacity: 1; color: var(--warm); border-bottom: 2px solid var(--warm); padding-bottom: 2px; }

/* ═══════════════════════════════════════════════════════════
   V4 · 夜航邮局设计层（对齐 2026-07 新界面稿）
   语言：夜海手绘底 + 金框羊皮纸牌匾 + 翻页倒计时 + 朱红主按钮
   ═══════════════════════════════════════════════════════════ */
:root {
  --gold: #c9a86a;
  --gold-dim: rgba(201, 168, 106, .55);
  --gold-faint: rgba(201, 168, 106, .3);
  --parch: #f4ebd3;
  --parch-2: #eadfc0;
  --vermil: #a8402f;
  --vermil-2: #8c3222;
}

/* —— 页面题字：— 信件详情 — —— */
.deco-title { display: flex; align-items: center; justify-content: center; gap: .7em;
  font-family: var(--font-hand); font-size: 1.5rem; color: #e8c87a; letter-spacing: .3em;
  text-shadow: 0 2px 10px rgba(0,0,0,.5); margin: .6rem 0 .3rem; font-weight: normal; }
.deco-title::before, .deco-title::after { content: ""; width: 2.2em; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim)); }
.deco-title::after { background: linear-gradient(90deg, var(--gold-dim), transparent); }
.day-header { color: var(--cream-dim); letter-spacing: .1em; font-size: .92rem; }
.day-header b { color: var(--cream); font-weight: normal; }
.day-header i { font-style: normal; opacity: .7; margin: 0 .45em; }

/* —— 金框牌匾（夜色底） / 羊皮纸面板 —— */
.plaque-frame { border: 1px solid var(--gold); outline: 1px solid var(--gold-dim);
  outline-offset: 3px; border-radius: 8px; background: rgba(24, 31, 54, .82);
  box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 0 30px rgba(0,0,0,.3); }
.panel { background: linear-gradient(#f7efdb, var(--parch-2)); border: 1px solid var(--gold);
  border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(120, 90, 40, .18), 0 12px 30px rgba(0,0,0,.4);
  color: var(--ink); padding: 1.1rem 1.3rem; text-align: left; }
.panel-title { display: flex; align-items: center; gap: .5em; font-family: var(--font-hand);
  font-size: 1.05rem; color: #5a4a2e; letter-spacing: .12em; margin-bottom: .6rem; }
.plaque-frame .panel-title { color: #e8c87a; justify-content: center; letter-spacing: .3em; }
.info-rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 1em;
  padding: .55em .1em; border-bottom: 1px dashed var(--gold-faint); font-size: .92rem; }
.info-rows div:last-child { border-bottom: none; }
.info-rows span:first-child { color: rgba(250,245,233,.6); white-space: nowrap; }
.info-rows span:last-child { color: var(--cream); text-align: right; }

/* —— 翻页倒计时 —— */
.clock-plaque { display: inline-block; padding: 1rem 1.6rem 1.1rem; margin: 1.2rem auto .6rem; }
.clock-plaque .cap { color: var(--cream-dim); font-size: .88rem; letter-spacing: .25em; margin-bottom: .6rem; }
.clock-plaque .cap-sub { color: var(--cream-dim); font-size: .8rem; letter-spacing: .2em; margin-top: .55rem; }
.flipclock { display: flex; gap: .45rem; align-items: center; justify-content: center; }
.flipclock .cell { position: relative; min-width: 1.7em; padding: .22em .18em;
  background: linear-gradient(180deg, #f8f0dc 50%, var(--parch-2) 50%);
  color: #28324e; border-radius: 7px; font: 700 1.9rem/1.25 "DIN Alternate", "Avenir Next Condensed", monospace;
  text-align: center; box-shadow: 0 3px 8px rgba(0,0,0,.45), inset 0 -2px 4px rgba(120,90,40,.25); }
.flipclock .cell::after { content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(60, 45, 20, .25); }
.flipclock .sep { color: #e8c87a; font-size: 1.5rem; font-weight: bold; text-shadow: 0 0 8px rgba(232,200,122,.4); }

/* —— 朱红主按钮 / 大按钮 —— */
.btn.red, a.btn.red, a.btn.red:visited { background: linear-gradient(#b04a36, var(--vermil-2));
  color: #f6ead2; border: 1px solid #d8b97a; font-weight: 600;
  box-shadow: 0 4px 16px rgba(140, 50, 34, .5), inset 0 1px 0 rgba(255,255,255,.15); }
.btn.red:hover { color: #fff; box-shadow: 0 6px 22px rgba(176, 74, 54, .6); }
.btn.big { padding: .68em 2.4em; font-size: 1.06rem; letter-spacing: .12em; }
.btn.navy, a.btn.navy, a.btn.navy:visited { background: linear-gradient(#2e3a5e, #232c49);
  color: #f0e3c0; border: 1px solid var(--gold-dim); font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.btn.navy:hover { color: #fff; border-color: var(--gold); box-shadow: 0 6px 20px rgba(46,58,94,.65); }

/* —— 信纸牌匾标题 + 横线信纸 + 火漆 —— */
.sheet-titled { position: relative; margin-top: 2.4rem !important; padding-top: 2.2rem !important;
  overflow: visible; }
.sheet-titled .plaque { position: absolute; top: -1.15em; left: 50%; transform: translateX(-50%);
  background: linear-gradient(#2e3a5e, #232c49); color: #ecd9a8; border: 1px solid var(--gold);
  outline: 1px solid var(--gold-dim); outline-offset: 2px; border-radius: 6px;
  padding: .32em 1.6em; font-family: var(--font-hand); font-size: 1.02rem;
  letter-spacing: .3em; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.sheet-lined { line-height: 2.15em;
  background-image: repeating-linear-gradient(180deg,
    transparent 0 calc(2.15em - 1px), rgba(90, 70, 40, .2) calc(2.15em - 1px) 2.15em);
  background-origin: content-box; }
.wax-seal { display: block; width: 72px; margin: 1.5rem auto -0.2rem; }
.wax-seal img { width: 100%; display: block; filter: drop-shadow(0 4px 9px rgba(0,0,0,.3)); }

/* —— 信息胶囊（天气/航线/第几封）—— */
.meta-bar { gap: .6rem .7rem; margin-top: 1.6rem; }
.meta-bar span { background: rgba(24, 31, 54, .8); border: 1px solid var(--gold-dim);
  border-radius: 10px; padding: .52em 1.15em; color: var(--cream); font-size: .86rem;
  letter-spacing: .05em; box-shadow: 0 3px 10px rgba(0,0,0,.35); }

/* —— 信件详情：桌面双栏 —— */
.wrap.wide { max-width: 1080px; }
.letter-grid { text-align: center; }
.letter-aside { display: grid; gap: 1.2rem; margin-top: 1.6rem; }
.aside-fig { position: relative; }
.aside-fig img { width: 100%; border-radius: 12px; display: block;
  box-shadow: 0 14px 34px rgba(0,0,0,.5); }
.aside-bubble { position: relative; margin: 0 .4rem 1rem; padding: .9em 1.2em;
  border: 1px solid var(--gold-dim); border-radius: 12px; color: var(--cream);
  font-family: var(--font-hand); font-size: .95rem; line-height: 1.9; letter-spacing: .06em;
  background: rgba(24, 31, 54, .75); }
.aside-bubble::after { content: ""; position: absolute; bottom: -7px; left: 50%;
  width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
  background: rgba(24, 31, 54, .95); border-right: 1px solid var(--gold-dim);
  border-bottom: 1px solid var(--gold-dim); }
.stamp-showcase { text-align: center; }
.stamp-showcase img { width: 128px; border: 5px solid #fdfaf0; outline: 1px solid var(--gold-faint);
  box-shadow: 0 8px 20px rgba(0,0,0,.45); transform: rotate(-1.5deg); }
@media (min-width: 1080px) {
  .letter-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.2rem;
    align-items: start; }
  .letter-aside { margin-top: 3.4rem; position: sticky; top: 1.2rem; }
}

/* —— 首页 —— */
.home-hero h1 { font-family: var(--font-hand); font-weight: normal; color: #ecd9a8;
  font-size: clamp(2.1rem, 6vw, 3rem); letter-spacing: .12em; margin-top: 1rem;
  text-shadow: 0 3px 16px rgba(0,0,0,.6); }
.home-sub { color: var(--cream-dim); letter-spacing: .3em; font-size: .95rem; margin-top: .5rem; }
.home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.2rem; margin-top: 2rem; text-align: left; align-items: start; }
.home-cards .panel { animation: rise .6s ease-out both; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.card-head a { font-size: .82rem; color: #9c6f2e; text-decoration: none; white-space: nowrap; }
.card-head a:hover { color: var(--vermil); }
.route-line { font-family: var(--font-hand); font-size: 1.06rem; color: #3a3226;
  letter-spacing: .04em; padding: .5em 0; border-bottom: 1px dashed rgba(120,90,40,.3); }
.weather-line { display: flex; align-items: center; gap: .7em; padding-top: .6em; color: #5a4a2e; }
.weather-line b { font-size: 1.5rem; font-family: var(--font-hand); font-weight: normal; }
.weather-mood { color: #8a7a58; font-size: .85rem; margin-top: .5em; }
.reply-strip { display: grid; gap: .7rem; }
.reply-strip a { display: block; position: relative; background: #fffdf4;
  border: 1px solid #e3d6b2; border-radius: 8px; padding: .7rem 4.6rem .7rem .9rem;
  text-decoration: none; color: var(--ink); box-shadow: 0 2px 8px rgba(90,70,40,.12);
  transition: transform .18s ease; }
.reply-strip a:hover { transform: translateY(-2px); }
.reply-strip .rs-ex { display: block; font-family: var(--font-hand); font-size: .95rem;
  line-height: 1.75; color: #3a3226; }
.reply-strip .rs-meta { display: block; color: #a09468; font-size: .76rem; margin-top: .3em; }
.reply-strip img { position: absolute; right: .7rem; top: 50%; width: 46px;
  transform: translateY(-50%) rotate(3deg); border: 3px solid #fff;
  box-shadow: 0 2px 7px rgba(0,0,0,.25); }
.reply-strip a.unread { box-shadow: 0 0 0 2px var(--warm), 0 2px 8px rgba(90,70,40,.12); }
.bulletin-body { font-size: .95rem; line-height: 2; color: #3a3226; font-family: var(--font-hand); }
.bulletin-sign { text-align: right; color: #8a7a58; font-size: .85rem; margin-top: .6em; }
.home-hero .actions { margin-top: 1.4rem; }

/* —— 收藏册：横幅 + 文件夹页签 + 信件清单卡 —— */
.mail-hero { position: relative; border-radius: 14px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.mail-hero img { width: 100%; display: block; max-height: min(300px, 34vh);
  object-fit: cover; object-position: center 30%; }
.mail-hero .cap { position: absolute; left: 1.3rem; top: 1.1rem; text-align: left;
  text-shadow: 0 2px 10px rgba(0,0,0,.75); }
.mail-hero .cap h2 { margin: 0; font-size: 1.7rem; }
.mail-hero .cap p { color: rgba(250,245,233,.85); font-size: .88rem; letter-spacing: .1em; margin-top: .2em; }
.folder-tabs { display: flex; gap: 3px; margin-top: 1.4rem; padding: 0 .5rem;
  position: relative; z-index: 2; }
.folder-tabs button { background: #d9cba6; color: #6a5a3a; border: 1px solid #bfa878;
  border-bottom: none; border-radius: 10px 10px 0 0; padding: .48em 1.25em;
  font-family: var(--font-hand); font-size: .95rem; cursor: pointer; letter-spacing: .08em; }
.folder-tabs button.on { background: linear-gradient(#f9f1dd, #f4ebd3); color: #3a3226;
  padding-bottom: .58em; margin-bottom: -1px; }
.folder-body { background: linear-gradient(#f4ebd3, #ece0c2); border: 1px solid #bfa878;
  border-radius: 0 12px 12px 12px; padding: 1rem .95rem 1.3rem; text-align: left;
  box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.folder-body .month-label { color: #8a7a58; margin: 1rem .3rem .2rem; }
.folder-body .month-label:first-child { margin-top: .2rem; }
.list-card { display: block; position: relative; background: #fffdf4;
  border: 1px solid #e3d6b2; border-radius: 10px; padding: .9rem 6.6rem .9rem 1.05rem;
  margin: .65rem 0; text-decoration: none; color: var(--ink);
  box-shadow: 0 3px 10px rgba(90, 70, 40, .14); transition: transform .18s ease; }
.list-card:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(90,70,40,.22); }
.list-card b { display: block; font-family: var(--font-hand); font-weight: normal;
  font-size: 1.06rem; color: #3a3226; line-height: 1.6; }
.list-card .lc-state { display: block; color: #8a7a58; font-size: .82rem; margin-top: .25em; }
.list-card time { display: block; color: #a09468; font-size: .76rem; margin-top: .45em;
  letter-spacing: .04em; }
.list-card .lc-stamp { position: absolute; right: .95rem; top: 50%; width: 60px;
  transform: translateY(-50%) rotate(3deg); border: 4px solid #fff;
  box-shadow: 0 3px 9px rgba(0,0,0,.25); }
.list-card .lc-ribbon { position: absolute; top: -1px; right: 5.4rem; width: 15px; height: 25px;
  background: #d9a941; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%); }
.list-card.unread { box-shadow: 0 0 0 2px var(--warm), 0 3px 10px rgba(90,70,40,.14); }
.list-card.unread .lc-state { color: var(--warm-2); font-weight: bold; }

/* —— 悬浮"写一封新的" —— */
.fab, a.fab, a.fab:visited { position: fixed; right: 1.1rem; bottom: 5.2rem; z-index: 40;
  width: 76px; height: 76px; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .1em; text-decoration: none;
  background: radial-gradient(circle at 35% 30%, #35426b, #232c49); color: #ecd9a8;
  border: 2px dashed var(--gold-dim); font-family: var(--font-hand); font-size: .78rem;
  letter-spacing: .05em; box-shadow: 0 10px 26px rgba(0,0,0,.55); }
.fab:hover { color: #fff; border-color: var(--gold); }
.fab i { font-style: normal; font-size: 1.25rem; }
@media (min-width: 561px) { .fab { bottom: 2rem; right: max(1.4rem, calc(50vw - 380px)); } }

/* —— 写信页 —— */
.write-sheet { position: relative; overflow: visible; padding: 1.6rem 1.5rem 3.4rem !important; }
.write-sheet .wm { display: block; margin: 0 0 .5rem; opacity: .45; width: 42px; }
.write-sheet textarea { width: 100%; min-height: min(46vh, 30em); border: none; outline: none;
  background: repeating-linear-gradient(180deg,
    transparent 0 calc(2.2em - 1px), rgba(90, 70, 40, .2) calc(2.2em - 1px) 2.2em);
  line-height: 2.2em; font-family: var(--font-hand); font-size: 1.06rem; color: #3a3226;
  resize: vertical; }
.write-sheet textarea::placeholder { color: rgba(58, 50, 38, .35); }
.write-companion { position: absolute !important; right: -6px; bottom: -10px;
  width: clamp(120px, 26%, 176px) !important; margin: 0 !important; pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.sched-line { color: var(--cream-dim); font-size: .9rem; letter-spacing: .08em; margin-top: 1rem; }
.postage-note { max-width: 30em; margin: 1.1rem auto 0; font-size: .95rem; line-height: 1.9;
  text-align: center; font-family: var(--font-hand); }
.postage-note b { color: var(--vermil); }

/* —— 底部页签（5 项）与页脚题句 —— */
@media (max-width: 560px) {
  .tabbar { gap: 0; }
  .tabbar a { flex: 1; text-align: center; }
  .tabbar a.on { color: var(--warm); }
  .tabbar a.on span { color: var(--warm); }
  body:has(.tabbar) .fab { bottom: 5.4rem; }
}
.foot-slogan { text-align: center; color: var(--cream-dim); font-family: var(--font-hand);
  letter-spacing: .35em; font-size: .9rem; margin-top: 2.6rem; }
.foot-slogan img { width: 22px; vertical-align: -6px; margin: 0 .5em; opacity: .8; }

/* —— V4 补充：侧栏移动端隐藏 + 牌匾内边距 —— */
.plaque-frame.pad { padding: 1rem 1.2rem; }
.letter-aside { display: none; }
@media (min-width: 1080px) { .letter-aside { display: grid; } }

/* —— V4 补充：首页英雄区分栏 + 移动端回信邮票避让 —— */
.hero-split { display: grid; gap: 1.6rem; align-items: center; }
.hero-art { margin: 0; }
.hero-art img { width: 100%; display: block; border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,.55); max-height: 46vh; object-fit: cover; }
@media (min-width: 900px) {
  .hero-split { grid-template-columns: 1.02fr .98fr; text-align: left; }
  .hero-copy .actions { justify-content: flex-start; }
  .hero-copy h1 { margin-top: .4rem; }
}


/* —— V4 补充：移动端标题避开月亮 —— */
@media (max-width: 560px) {
  .home-hero h1 { margin-top: 3.4rem; font-size: 2rem; }
}

/* ═══ V4 · batch-d 真图资产层 ═══ */
/* 天气图标（圆形手绘徽章） */
.wx-ico { width: 1.5em; height: 1.5em; vertical-align: -0.4em; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.wx-big { width: 74px; height: 74px; border-radius: 50%;
  box-shadow: 0 3px 10px rgba(90,70,40,.3); }
.weather-line { align-items: center; }

/* 信纸上的真图邮戳（叠在邮票左下，油墨感用 multiply 贴进纸纹） */
.postmark-img { position: absolute; top: 5.6rem; right: 1.4rem; width: 118px;
  transform: rotate(-8deg); opacity: .88; mix-blend-mode: multiply; pointer-events: none; }
@media (max-width: 560px) { .postmark-img { top: 1.7rem; right: 6.4rem; width: 88px; } }

/* —— V4 · batch-e：我的岛页头 + 火漆阴影 —— */
.island-hero { margin: .8rem auto 0; width: min(460px, 88%); }
.island-hero img { width: 100%; display: block; border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 0 60px rgba(232,169,75,.12); }
.wax-seal img { filter: drop-shadow(0 5px 10px rgba(0,0,0,.35)); }

/* ═══════════════════════════════════════════════════════════
   V5 · 现代深夜绘本产品
   现代产品字体承载导航、状态和操作；手写感只留给故事标题与信件。
   ═══════════════════════════════════════════════════════════ */
:root {
  --night: #111827;
  --night-2: #182136;
  --paper: #f6edda;
  --paper-2: #e9ddc5;
  --ink: #2f2b25;
  --warm: #e3b66e;
  --warm-2: #bd8743;
  --vermil: #9f4b3c;
  --cream: rgba(248, 242, 228, .94);
  --cream-dim: rgba(235, 229, 216, .68);
  --cream-faint: rgba(235, 229, 216, .24);
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
}
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-ui);
  background:
    radial-gradient(circle at 82% 14%, rgba(48, 66, 103, .36), transparent 31rem),
    linear-gradient(145deg, #101726 0%, #151d30 54%, #111827 100%);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .18;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0 1px, transparent 1.4px),
    radial-gradient(circle at 74% 66%, rgba(255,255,255,.06) 0 1px, transparent 1.3px);
  background-size: 37px 41px, 53px 47px;
}
.sky::before { opacity: .42; animation-duration: 9s; }
.sky::after { top: -20%; left: 74%; width: 900px; height: 760px; background: radial-gradient(ellipse at center, rgba(227,182,110,.08), transparent 66%); }
.moon { opacity: .74; width: 42px; height: 42px; box-shadow: 0 0 42px rgba(242,232,201,.22); }
.moon::after { width: 34px; height: 34px; background: #151d30; }

/* 全站导航：轻、安静、不做古典牌匾 */
.nav {
  max-width: 1280px; margin: 0 auto; padding: 1.2rem 1.75rem; gap: 1.5rem;
  font: 500 .88rem/1.2 var(--font-ui); letter-spacing: .02em;
}
.nav .brand { font: 650 1.02rem/1.2 var(--font-ui); letter-spacing: .08em; }
.nav-logo { width: 32px; height: 32px; margin-right: .55em; border-radius: 10px; box-shadow: none; }
.nav a.active { color: var(--paper); border: 0; position: relative; }
.nav a.active::after { content: ""; position: absolute; left: 50%; bottom: -.65rem; width: 4px; height: 4px; transform: translateX(-50%); border-radius: 50%; background: var(--warm); }
.nav-pill { border: 0; border-radius: 8px; padding: .62em 1.18em; background: rgba(246,237,218,.1); }
.nav-pill:hover { background: rgba(246,237,218,.16); color: var(--paper) !important; }
.sail-count { border: 0; border-left: 1px solid rgba(246,237,218,.15); border-radius: 0; padding: .15em 0 .15em 1.15rem; color: var(--cream-dim); font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.menu-list { font-family: var(--font-ui); border-radius: 10px; background: rgba(24,33,54,.96); backdrop-filter: blur(18px); }

/* 全站按钮去胶囊、渐变与外发光 */
.btn, a.btn, a.btn:visited,
.btn.red, a.btn.red, a.btn.red:visited,
.btn.navy, a.btn.navy, a.btn.navy:visited {
  font-family: var(--font-ui); border-radius: 9px; background: var(--warm); color: #28231b;
  border: 0; box-shadow: none; font-weight: 650; letter-spacing: .03em;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.btn:hover, .btn.red:hover, .btn.navy:hover { transform: translateY(-2px); background: #edc98e; color: #28231b; box-shadow: none; }
.btn.ghost, a.btn.ghost, a.btn.ghost:visited { border-radius: 9px; background: transparent; border: 1px solid rgba(246,237,218,.24); }

/* 首页：一个沉浸首屏、一个横向信息面、一个公告纸条 */
.wrap.wide { max-width: 1280px; margin-top: .8rem; padding: 0 1.75rem; }
.home-hero { text-align: left; }
.home-hero .hero-split { min-height: 570px; grid-template-columns: minmax(360px, .78fr) minmax(0, 1.22fr); gap: clamp(1rem, 4vw, 4rem); }
.hero-copy { position: relative; z-index: 2; padding: 3.5rem 0 3rem; }
.hero-kicker { margin-bottom: 1.45rem; color: rgba(227,182,110,.8); font: 650 .7rem/1.2 var(--font-ui); letter-spacing: .2em; }
.home-hero h1 { max-width: 8em; margin: 0; font-size: clamp(3rem, 5vw, 4.65rem); line-height: 1.16; letter-spacing: .06em; color: #f2e8d3; text-shadow: none; }
.home-sub { margin-top: 1.1rem; color: var(--cream-dim); font: 400 clamp(1rem, 1.5vw, 1.2rem)/1.8 var(--font-ui); letter-spacing: .08em; }
.departure-line { display: flex; align-items: center; flex-wrap: wrap; gap: .62rem; margin: 2rem 0 0; color: var(--cream-dim); font-size: .9rem; }
.departure-line .departure-label { color: var(--cream); font-weight: 600; }
.departure-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--warm); }
.departure-line strong { color: var(--paper); font: 650 clamp(1.25rem, 2vw, 1.65rem)/1 var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.hero-actions { justify-content: flex-start; gap: 1.5rem; margin-top: 2.25rem !important; }
.home-primary { padding: .88em 1.45em !important; font-size: .98rem !important; }
.home-primary span { padding-left: 1.1em; opacity: .55; }
.home-secondary { display: inline-flex; align-items: center; gap: .65em; color: var(--cream) !important; text-decoration: none; font-size: .94rem; padding: .8em 0; border-bottom: 1px solid rgba(246,237,218,.28); }
.home-secondary:hover { color: var(--paper) !important; border-color: var(--warm); }
.home-secondary em { display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--vermil); color: #fff7e8; font-size: .72rem; font-style: normal; }
.hero-promise { display: flex; align-items: center; gap: .55rem; margin-top: 1.55rem; color: rgba(235,229,216,.48); font-size: .78rem; letter-spacing: .04em; }
.hero-promise span { width: 6px; height: 6px; border-radius: 50%; background: #7caa8c; box-shadow: 0 0 0 4px rgba(124,170,140,.1); }
.hero-art { position: relative; align-self: stretch; min-width: 0; margin-right: -4.5rem; overflow: visible; isolation: isolate; }
.hero-art::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #141c2e 0%, transparent 18%, transparent 80%, #111827 100%), linear-gradient(0deg, #131b2c 0%, transparent 18%, transparent 86%, rgba(17,24,39,.5) 100%); }
.hero-art::after { content: ""; position: absolute; left: 22%; right: 8%; bottom: 3%; z-index: 2; height: 18%; background: radial-gradient(ellipse, rgba(227,182,110,.19), transparent 68%); filter: blur(20px); pointer-events: none; }
.hero-art picture, .hero-art img { width: 100%; height: 100%; display: block; }
.hero-art img { max-height: none; min-height: 570px; object-fit: cover; object-position: 48% center; border: 0; border-radius: 0; box-shadow: none; filter: saturate(.84) contrast(1.02); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 88%, transparent 100%); }
.hero-art figcaption { position: absolute; z-index: 3; right: 9%; bottom: 2.8rem; padding-left: 2.3rem; color: rgba(246,237,218,.64); font-size: .75rem; letter-spacing: .06em; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.hero-art figcaption::before { content: ""; position: absolute; left: 0; top: 50%; width: 1.6rem; height: 1px; background: rgba(227,182,110,.65); }

.home-dock { display: grid; grid-template-columns: 1.05fr .95fr; border-top: 1px solid rgba(246,237,218,.14); border-bottom: 1px solid rgba(246,237,218,.14); margin-top: 1.4rem; }
.route-block, .recent-block { min-width: 0; padding: 2.5rem clamp(1.4rem, 3vw, 3rem) 2.5rem 0; }
.recent-block { padding-right: 0; padding-left: clamp(1.4rem, 3vw, 3rem); border-left: 1px solid rgba(246,237,218,.14); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; }
.section-heading .eyebrow { display: block; color: rgba(227,182,110,.68); font: 600 .6rem/1 var(--font-ui); letter-spacing: .18em; margin-bottom: .65rem; }
.section-heading h2 { margin: 0; color: var(--paper); font: 500 1.18rem/1.2 var(--font-ui); letter-spacing: .06em; }
.section-heading a { color: var(--cream-dim); text-decoration: none; font-size: .78rem; padding-top: 1.45rem; }
.section-heading a:hover { color: var(--paper); }
.route-status { display: flex; align-items: center; gap: .45rem; color: #9fc0a9; font-size: .72rem; padding-top: 1.3rem; }
.route-status i { width: 5px; height: 5px; border-radius: 50%; background: #84b394; }
.route-line { padding: 0 0 1.1rem; border: 0; color: var(--paper); font: 500 clamp(1rem, 1.6vw, 1.15rem)/1.75 var(--font-ui); letter-spacing: .06em; }
.route-meta { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; color: var(--cream-dim); font-size: .8rem; }
.route-meta span { display: inline-flex; align-items: center; gap: .5rem; }
.route-meta img { width: 22px; height: 22px; border-radius: 50%; opacity: .9; }
.route-block .weather-mood { margin-top: 1.35rem; color: rgba(235,229,216,.42); font: 400 .8rem/1.7 var(--font-ui); }
.reply-list { display: grid; }
.reply-list > a { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: .9rem; min-height: 70px; padding: .65rem .2rem; color: var(--cream); text-decoration: none; border-top: 1px solid rgba(246,237,218,.1); }
.reply-list > a:last-child { border-bottom: 1px solid rgba(246,237,218,.1); }
.reply-list > a:hover .reply-arrow { color: var(--warm); transform: translate(2px,-2px); }
.reply-list > a.unread .reply-copy b::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: .5rem; vertical-align: .15em; border-radius: 50%; background: var(--warm); }
.reply-stamp { display: grid; place-items: center; width: 42px; height: 42px; color: var(--warm); }
.reply-stamp img { width: 38px; height: 38px; object-fit: contain; transform: rotate(-3deg); filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.reply-copy { min-width: 0; }
.reply-copy b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cream); font: 500 .9rem/1.5 var(--font-ui); }
.reply-copy small { display: block; margin-top: .25rem; color: rgba(235,229,216,.4); font-size: .7rem; }
.reply-arrow { color: rgba(235,229,216,.34); transition: transform .2s ease, color .2s ease; }
.empty-reply { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; align-items: center; min-height: 112px; padding: 1.2rem 0; border-top: 1px solid rgba(246,237,218,.1); border-bottom: 1px solid rgba(246,237,218,.1); color: var(--cream-dim) !important; text-decoration: none; }
.empty-reply span { grid-column: 1; font-size: .75rem; }
.empty-reply b { grid-column: 1; font-size: .92rem; font-weight: 500; color: var(--cream); }
.empty-reply i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; }
.post-office-note { display: flex; align-items: center; gap: 1rem; margin: 1.3rem 0 0; padding: .8rem 1rem; color: var(--cream-dim); background: rgba(246,237,218,.045); border-radius: 6px; font-size: .78rem; }
.post-office-note .note-mark { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border: 1px solid rgba(159,75,60,.65); border-radius: 50%; color: #bf7568; font-family: var(--font-hand); transform: rotate(-7deg); }
.post-office-note p { flex: 1; line-height: 1.5; }
.post-office-note b { margin-right: 1rem; color: var(--cream); font-weight: 550; }
.note-time { color: rgba(235,229,216,.34); white-space: nowrap; }

/* H5：首屏紧凑、画面横向溢出，底栏使用单色图形 */
@media (max-width: 899px) {
  .home-hero .hero-split { min-height: auto; grid-template-columns: 1fr; gap: 0; }
  .hero-copy { padding: 3.2rem 0 1rem; }
  .hero-art { min-height: 400px; margin: -1rem -1.75rem 0; }
  .hero-art img { min-height: 400px; max-height: 56vh; }
  .home-dock { margin-top: .5rem; }
}
@media (max-width: 640px) {
  .wrap.wide { margin-top: 0; padding: 0 1.15rem; }
  .nav { padding: .75rem 1rem; }
  .nav .brand { font-size: .94rem; }
  .nav-logo { width: 29px; height: 29px; border-radius: 8px; }
  .hero-copy { padding-top: 3.8rem; }
  .hero-kicker { margin-bottom: 1rem; font-size: .62rem; }
  .home-hero h1 { margin: 0; max-width: 9em; font-size: clamp(2.35rem, 11.5vw, 3.25rem); line-height: 1.22; }
  .home-sub { margin-top: .7rem; }
  .departure-line { margin-top: 1.55rem; font-size: .82rem; }
  .departure-line strong { font-size: 1.24rem; }
  .hero-actions { margin-top: 1.8rem !important; }
  .home-primary { flex: 1; text-align: center; }
  .home-secondary { flex: 0 0 auto; }
  .hero-promise { margin-top: 1.1rem; }
  .hero-art { min-height: 315px; margin: .4rem -1.15rem 0; }
  .hero-art img { min-height: 315px; max-height: 48vh; object-position: 43% center; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 84%, transparent 100%); }
  .hero-art::before { background: linear-gradient(180deg, #141c2e 0%, transparent 15%, transparent 78%, #131b2c 100%); }
  .hero-art figcaption { right: 1.15rem; bottom: 1.5rem; font-size: .68rem; }
  .home-dock { grid-template-columns: 1fr; margin-top: 0; }
  .route-block, .recent-block { padding: 2rem 0; }
  .recent-block { border-left: 0; border-top: 1px solid rgba(246,237,218,.14); }
  .section-heading { margin-bottom: 1.3rem; }
  .post-office-note { align-items: flex-start; margin-bottom: .5rem; }
  .post-office-note b { display: block; margin-bottom: .15rem; }
  .note-time { display: none; }
  .foot-slogan { font-family: var(--font-ui); letter-spacing: .08em; font-size: .75rem; }
  .footer-note { font-family: var(--font-ui); font-size: .68rem; line-height: 1.75; }
  .tabbar { padding: .5rem .35rem calc(.45rem + env(safe-area-inset-bottom)); background: rgba(15,22,36,.9); border-color: rgba(246,237,218,.09); backdrop-filter: blur(18px); }
  .tabbar a { font-family: var(--font-ui); font-size: 1rem; }
  .tabbar a i { display: block; width: 26px; height: 23px; margin: 0 auto .08rem; font: normal 400 1.12rem/23px var(--font-ui); color: rgba(235,229,216,.44); }
  .tabbar a span { color: rgba(235,229,216,.48); font-size: .62rem; letter-spacing: .02em; }
.tabbar a.on i, .tabbar a.on span { color: var(--warm); }
  body { padding-bottom: 4.5rem; }
}

/* 其余用户端页面同步收掉金框、渐变和“后台卡片感” */
.plaque-frame {
  outline: 0; border: 1px solid rgba(246,237,218,.14); border-radius: 10px;
  background: rgba(246,237,218,.045); box-shadow: none;
}
.plaque-frame .panel-title { color: var(--cream); font-family: var(--font-ui); font-size: .82rem; font-weight: 600; letter-spacing: .14em; }
.panel {
  background: rgba(246,237,218,.96); border: 1px solid rgba(246,237,218,.32);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(3,8,18,.2);
}
.panel-title, .postage-note { font-family: var(--font-ui); }
.sheet { border-radius: 10px; box-shadow: 0 18px 50px rgba(3,8,18,.32); }
.sheet-titled .plaque {
  background: #e9ddc5; color: #514738; border: 0; outline: 0; border-radius: 6px;
  box-shadow: none; font-family: var(--font-ui); font-size: .82rem; font-weight: 600; letter-spacing: .12em;
}
.meta-bar span {
  background: rgba(246,237,218,.055); border: 1px solid rgba(246,237,218,.13);
  border-radius: 7px; box-shadow: none; color: var(--cream-dim); font-family: var(--font-ui);
}
.gallery-card {
  background: transparent; border: 1px solid rgba(246,237,218,.12); border-radius: 8px;
  font-family: var(--font-ui);
}
.gallery-card b { font-family: var(--font-ui); font-size: .88rem; }
.stat-grid { border-top: 1px solid rgba(246,237,218,.12); border-bottom: 1px solid rgba(246,237,218,.12); gap: 0; }
.stat-card { background: transparent; border: 0; border-right: 1px solid rgba(246,237,218,.1); border-radius: 0; }
.stat-card:last-child { border-right: 0; }
.stat-card b { font-family: var(--font-ui); font-weight: 500; }
.folder-tabs { gap: .4rem; padding: 0; margin-bottom: .75rem; }
.folder-tabs button {
  background: transparent; color: var(--cream-dim); border: 1px solid rgba(246,237,218,.14);
  border-radius: 8px; padding: .55em 1.15em; font-family: var(--font-ui); font-size: .82rem;
}
.folder-tabs button.on { background: rgba(246,237,218,.11); color: var(--paper); border-color: rgba(246,237,218,.2); padding-bottom: .55em; margin: 0; }
.folder-body {
  background: rgba(246,237,218,.95); border: 0; border-radius: 10px;
  padding: 1rem; box-shadow: 0 18px 50px rgba(3,8,18,.28);
}
.list-card { border: 0; border-bottom: 1px solid #e2d6bd; border-radius: 0; box-shadow: none; margin: 0; padding-top: 1rem; padding-bottom: 1rem; }
.list-card:hover { transform: none; background: #fffaf0; box-shadow: none; }
.list-card b { font-family: var(--font-ui); font-size: .94rem; }
.fab, a.fab, a.fab:visited {
  width: auto; height: 46px; padding: 0 1.15rem; flex-direction: row; gap: .5rem;
  border-radius: 10px; background: var(--warm); color: #28231b; border: 0;
  box-shadow: 0 10px 25px rgba(3,8,18,.3); font-family: var(--font-ui); font-size: .82rem; font-weight: 650;
}
.fab:hover { color: #28231b; background: #edc98e; }
.fab i { font: normal 1.15rem/1 var(--font-ui); }

/* ═══════════════════════════════════════════════════════════
   V6 · 情绪绘本体验层
   自托管文楷负责“故事与信”，无衬线负责“操作与状态”。
   ═══════════════════════════════════════════════════════════ */
:root {
  --font-story: "LXGW WenKai Lite", "Kaiti SC", "STKaiti", serif;
  --font-hand: var(--font-story);
  --rose: #bd786c;
  --rose-soft: #d8a49a;
  --dawn: #c9b6d3;
  --sage: #8daa99;
  --line-soft: rgba(246, 237, 218, .13);
  --panel-night: rgba(21, 29, 47, .72);
}
.scene h1, .story-title { font-family: var(--font-story); font-weight: 400; color: var(--paper); }
.scene h2 { font-family: var(--font-story); letter-spacing: .04em; }
.soft-kicker { display: inline-block; color: rgba(227,182,110,.82); font: 650 .67rem/1.3 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; }
.page-heading { max-width: 680px; margin: 2.8rem auto 2rem; text-align: center; }
.page-heading h1 { margin: .65rem 0 .55rem; font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.25; }
.page-heading p { color: var(--cream-dim); font-size: .96rem; line-height: 1.9; }
.paper-panel { background: rgba(249, 242, 226, .97); color: var(--ink); box-shadow: 0 24px 70px rgba(3,8,18,.28); }

/* 初见：场景不是配图，而是进入世界的门 */
.onboarding-page { text-align: left; }
.story-hero { position: relative; min-height: min(640px, 72vh); overflow: hidden; border-radius: 20px; isolation: isolate; box-shadow: 0 28px 80px rgba(2,7,17,.32); }
.story-hero-media, .story-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.story-hero-media img { object-fit: cover; object-position: center; animation: scene-breathe 18s ease-in-out infinite alternate; }
.story-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10,18,34,.88) 0%, rgba(12,20,38,.58) 36%, rgba(12,20,38,.05) 68%), linear-gradient(0deg, rgba(8,15,28,.5), transparent 48%); }
.story-hero-copy { position: relative; z-index: 2; width: min(510px, 48%); padding: clamp(4rem, 8vw, 7rem) 0 4rem clamp(2.2rem, 6vw, 5.5rem); }
.story-hero-copy h1 { margin: 1.1rem 0 1.2rem; font-size: clamp(2.5rem, 4.8vw, 4.5rem); line-height: 1.38; letter-spacing: .04em; text-wrap: balance; }
.story-hero-copy > p { max-width: 26em; color: rgba(246,237,218,.72); font-size: 1rem; line-height: 2; }
.quiet-promise { display: flex; align-items: center; gap: .7rem; margin-top: 1.8rem; color: var(--cream-dim); font-size: .82rem; }
.quiet-promise i { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 5px rgba(141,170,153,.1); }
.quiet-promise b { color: var(--cream); font-weight: 550; }
.quiet-promise b::after { content: "·"; padding-left: .7rem; color: var(--warm); }
.onboarding-form { width: min(780px, calc(100% - 2rem)); margin: -3.2rem auto 0; padding: 2.2rem 2.5rem; border-radius: 16px; position: relative; z-index: 3; transform: rotate(-.15deg); }
.form-intro { text-align: center; margin-bottom: 1.5rem; }
.form-intro > span { color: var(--rose); font: 650 .68rem/1 var(--font-ui); letter-spacing: .2em; }
.form-intro h2 { margin: .65rem 0 .25rem; color: var(--ink); font-size: 1.6rem; }
.form-intro p { color: #817563; font-size: .84rem; line-height: 1.7; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; }
.field-grid label > span { display: block; color: #776b59; font: 550 .78rem/1 var(--font-ui); margin-bottom: .45rem; }
.onboarding-form input[type=text], .onboarding-form input[type=number], .onboarding-form input[type=email] { border: 0; border-bottom: 1px solid #cfc0a2; border-radius: 0; background: transparent; padding: .65rem .15rem; font-family: var(--font-ui); }
.onboarding-form input:focus { outline: 0; border-color: var(--warm-2); box-shadow: 0 9px 13px -12px rgba(189,135,67,.7); }
.onboarding-form label.check { color: #716756; font: 400 .78rem/1.7 var(--font-ui); }
.form-submit { display: block !important; min-width: 220px; margin: 1.4rem auto .8rem; }
.form-submit span { padding-left: 1.4rem; opacity: .55; }
.form-footnote { text-align: center; color: #918571; font-size: .74rem; line-height: 1.8 !important; }
.onboarding-form .return-island { border-top: 1px solid #ded2bc; padding-top: 1rem; }
.onboarding-form .return-island summary { color: #756a58; font-family: var(--font-ui); font-size: .8rem; text-align: center; }
.onboarding-form .return-form input { color: var(--ink); border-color: #cfc0a2; background: rgba(255,255,255,.45); }
.trust-row { display: flex; justify-content: center; flex-wrap: wrap; gap: .9rem 1.8rem; margin: 1.7rem 0 .4rem; color: rgba(235,229,216,.42); font-size: .7rem; }
.trust-row span::before { content: "·"; margin-right: .55rem; color: var(--warm); }
.onboarding-closed { max-width: 34em; margin-top: 2rem; }

/* 写信：HTML 输入区落在真正为它构图的空白信纸上 */
.write-page { text-align: center; }
.writing-studio { position: relative; width: min(1160px, 100%); aspect-ratio: 3 / 2; margin: 0 auto; border-radius: 20px; overflow: hidden; box-shadow: 0 28px 75px rgba(3,8,18,.38); text-align: left; isolation: isolate; }
.writing-studio::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 80px rgba(6,10,18,.42); }
.writing-studio-art, .writing-studio-art img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.writing-studio-art img { object-fit: cover; }
.write-sheet-v2 { position: absolute; z-index: 2; left: 4.2%; top: 43%; width: 57%; height: 48%; padding: 1.5rem 2rem 1.2rem; color: #4a4033; transform: rotate(-.8deg); }
.write-sheet-v2 textarea { width: 100%; height: calc(100% - 3.2rem); min-height: 0; resize: none; overflow-y: auto; color: #3c342a; font: 400 clamp(.98rem, 1.4vw, 1.08rem)/2 var(--font-story); background: repeating-linear-gradient(180deg, transparent 0 calc(2em - 1px), rgba(91,73,45,.11) calc(2em - 1px) 2em); }
.write-sheet-v2 textarea::placeholder { color: rgba(74,64,51,.46); }
.letter-to, .letter-sign { font: 400 .8rem/1.4 var(--font-story); color: rgba(74,64,51,.58); letter-spacing: .08em; }
.letter-to span { font: 650 .58rem/1 var(--font-ui); letter-spacing: .18em; color: var(--rose); margin-right: .55rem; }
.letter-sign { text-align: right; }
.send-letter { position: absolute !important; z-index: 4; left: 50%; bottom: 2.2%; transform: translateX(-50%); min-width: 180px; }
.send-letter:hover { transform: translateX(-50%) translateY(-2px); }
.schedule-strip, .postage-note-v2 { display: flex; align-items: center; justify-content: center; gap: .9rem 1.3rem; margin: 1.3rem auto 0; color: var(--cream-dim); font-size: .78rem; }
.schedule-strip i { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 5px rgba(141,170,153,.1); }
.schedule-strip b { color: var(--cream); font-weight: 550; }
.postage-note-v2 { width: fit-content; max-width: 100%; padding: .65rem 1rem; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(246,237,218,.035); }
.postage-note-v2 span { color: rgba(235,229,216,.48); }
.postage-note-v2 b { color: var(--warm); }
.night-companion { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .8rem; color: var(--cream-dim); font-size: .75rem; }
.night-companion .yy-fig { margin: 0; }

/* 寄出：先安定情绪，再给状态 */
.journey-hero { position: relative; min-height: min(660px, 72vh); overflow: hidden; border-radius: 20px; box-shadow: 0 28px 80px rgba(3,8,18,.38); text-align: left; }
.journey-hero picture, .journey-hero img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.journey-hero img { object-fit: cover; animation: voyage-pan 20s ease-in-out infinite alternate; }
.journey-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,15,28,.83), rgba(9,17,31,.36) 42%, transparent 70%), linear-gradient(0deg, rgba(8,15,28,.52), transparent 45%); }
.journey-copy { position: relative; z-index: 2; width: min(480px, 44%); padding: clamp(3.5rem, 8vw, 6.5rem) 0 3rem clamp(2.2rem, 6vw, 5.5rem); }
.journey-copy h1 { margin: .8rem 0 1rem; font-size: clamp(2.4rem, 5vw, 4.3rem); line-height: 1.34; }
.journey-copy > p { color: rgba(246,237,218,.68); line-height: 2; font-size: .96rem; }
.sent-mark { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 1.3rem; border: 1px solid rgba(141,170,153,.65); border-radius: 50%; color: #a7c6b2; }
.delivery-time { display: flex; flex-direction: column; gap: .2rem; margin-top: 1.8rem; padding-left: 1rem; border-left: 2px solid rgba(227,182,110,.65); }
.delivery-time small { color: var(--cream-dim); font-size: .68rem; letter-spacing: .1em; }
.delivery-time strong { color: var(--paper); font: 400 1.05rem/1.4 var(--font-story); }
.compact-postbox { width: 120px; margin: -3rem auto 0; z-index: 4; filter: drop-shadow(0 14px 20px rgba(0,0,0,.24)); }

/* 收藏册：清晨的图，不再是文件夹皮肤 */
.mail-hero { min-height: 360px; border-radius: 18px; box-shadow: 0 24px 65px rgba(3,8,18,.32); }
.mail-hero img { height: 100%; min-height: 360px; max-height: none; object-position: center; animation: scene-breathe 20s ease-in-out infinite alternate; }
.mail-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 35%, rgba(20,28,44,.16) 55%, rgba(12,20,34,.82) 100%); }
.mail-hero .cap { z-index: 2; left: auto; right: clamp(1.5rem, 5vw, 4.5rem); top: 50%; width: min(380px, 38%); transform: translateY(-50%); }
.mail-hero .cap h2 { margin: .65rem 0 .5rem; font-size: clamp(2rem, 4vw, 3rem); }
.mail-hero .cap p { font-family: var(--font-ui); line-height: 1.8; letter-spacing: .03em; }
.bulletin { border: 0; border-radius: 0; font-family: var(--font-ui); }
.folder-tabs { justify-content: center; margin-top: 1.6rem; }
.folder-body { width: min(820px, 100%); margin: 0 auto; background: rgba(248,241,225,.98); }
.month-label { display: flex; align-items: center; gap: .6rem; font-family: var(--font-ui); letter-spacing: .08em; }
.month-label span { width: 5px; height: 5px; border-radius: 50%; background: var(--rose); }
.list-card { transition: background .2s ease, padding-left .2s ease; }
.list-card:hover { padding-left: 1.2rem; }

/* 邮票/邮戳收藏：沉浸页头 + 轻展柜 */
.collection-page { text-align: left; }
.collection-hero { position: relative; min-height: 390px; border-radius: 18px; overflow: hidden; margin-bottom: 2rem; box-shadow: 0 24px 65px rgba(3,8,18,.34); }
.collection-hero picture, .collection-hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.collection-hero picture img { object-fit: cover; animation: scene-breathe 20s ease-in-out infinite alternate; }
.collection-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,16,29,.9) 0%, rgba(10,18,32,.66) 40%, transparent 76%); }
.collection-hero > div { position: relative; z-index: 2; width: min(420px, 43%); padding: 4.5rem 0 3rem clamp(2rem, 5vw, 4.5rem); }
.collection-hero h1 { margin: .6rem 0 .7rem; font-size: clamp(2.5rem, 5vw, 3.8rem); }
.collection-hero p { color: var(--cream-dim); line-height: 1.9; }
.collection-hero > div > b { display: inline-block; margin-top: 1.2rem; color: var(--warm); font-size: .78rem; font-weight: 550; }
.collection-page .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; margin: 0; background: var(--line-soft); border: 1px solid var(--line-soft); }
.collection-page .gallery-card { min-height: 210px; justify-content: center; border: 0; border-radius: 0; background: #182136; transition: background .25s ease, transform .25s ease; }
.collection-page .gallery-card:hover { position: relative; z-index: 2; background: #202b43; transform: translateY(-3px); }
.collection-page .gallery-card img { width: 96px; transition: transform .3s ease; }
.collection-page .gallery-card:hover img { transform: rotate(-2deg) scale(1.05); }
.collection-page .gallery-card.locked { opacity: .3; }

/* 我的岛 */
.island-page { text-align: center; }
.island-hero { position: relative; width: 100%; min-height: 520px; margin: 0; overflow: hidden; border-radius: 20px; box-shadow: 0 28px 75px rgba(3,8,18,.35); }
.island-hero picture, .island-hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.island-hero picture img { object-fit: cover; animation: scene-breathe 22s ease-in-out infinite alternate; }
.island-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,19,34,.78) 0%, rgba(11,19,34,.28) 48%, transparent 76%), linear-gradient(0deg, rgba(8,15,28,.36), transparent 48%); }
.island-title { position: absolute; z-index: 2; left: clamp(2rem, 6vw, 5.5rem); top: 50%; width: min(440px, 40%); transform: translateY(-50%); text-align: left; }
.island-title h1 { margin: .65rem 0 .6rem; font-size: clamp(2.8rem, 5vw, 4.4rem); line-height: 1.25; }
.island-title p { color: var(--cream-dim); }
.island-name-form { display: flex; justify-content: center; gap: .65rem; width: min(500px, 100%); margin: 1.4rem auto; }
.island-name-form input { color: var(--cream); background: rgba(246,237,218,.05); border: 1px solid var(--line-soft); border-radius: 9px; padding: .65rem 1rem; }
.island-page .stat-grid { width: min(760px, 100%); margin: 1.7rem auto 1rem; }

/* 求助页：最少刺激、最高可读性 */
.help-page { text-align: center; }
.help-hero { position: relative; min-height: 480px; overflow: hidden; border-radius: 18px; text-align: left; box-shadow: 0 24px 65px rgba(3,8,18,.34); }
.help-hero picture, .help-hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.help-hero picture img { object-fit: cover; }
.help-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,18,33,.92) 0%, rgba(10,18,33,.62) 43%, transparent 76%); }
.help-hero > div { position: relative; z-index: 2; width: min(500px, 45%); padding: 5rem 0 3rem clamp(2rem, 5vw, 4.5rem); }
.help-hero h1 { margin: .75rem 0 1rem; font-size: clamp(2.35rem, 4.5vw, 3.8rem); line-height: 1.4; }
.help-hero p { color: rgba(246,237,218,.73); line-height: 1.9; }
.hotline-panel { display: grid; grid-template-columns: .7fr 1.3fr; gap: 2rem; max-width: 980px; margin: 2rem auto; padding: 2rem; border: 1px solid var(--line-soft); border-radius: 14px; text-align: left; background: rgba(246,237,218,.035); }
.hotline-intro h2 { margin: 0 0 .6rem; font-size: 1.45rem; }
.hotline-intro p { color: var(--cream-dim); font-size: .82rem; line-height: 1.8; }
.hotline-list { display: grid; gap: .55rem; }
.hotline-list a { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem; padding: .9rem 1rem; border-radius: 8px; background: rgba(246,237,218,.06); color: var(--cream); text-decoration: none; }
.hotline-list a:hover { background: rgba(246,237,218,.1); }
.hotline-list span { font-size: .8rem; color: var(--cream-dim); }
.hotline-list b { font-size: .92rem; font-weight: 550; font-variant-numeric: tabular-nums; }
.hotline-list i { color: var(--warm); font-size: .7rem; font-style: normal; }
.help-boundary { color: rgba(235,229,216,.48); font-size: .76rem; }

/* 邮票付费：把支付留在故事里，但不过度情绪化 */
.stamp-page { text-align: center; }
.stamp-ritual { position: relative; min-height: 500px; overflow: hidden; border-radius: 18px; text-align: left; box-shadow: 0 24px 65px rgba(3,8,18,.34); }
.stamp-ritual picture, .stamp-ritual picture img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stamp-ritual picture img { object-fit: cover; }
.stamp-ritual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,17,30,.92) 0%, rgba(11,19,33,.7) 42%, transparent 75%); }
.stamp-copy { position: relative; z-index: 2; width: min(500px, 44%); padding: 4.5rem 0 3rem clamp(2rem, 5vw, 4.5rem); }
.stamp-copy h1 { margin: .7rem 0 1rem; font-size: clamp(2.45rem, 4.5vw, 3.8rem); line-height: 1.38; }
.stamp-copy p { color: rgba(246,237,218,.7); line-height: 1.9; margin-bottom: .8rem; }
.stamp-actions { margin-top: 1.5rem; }

/* 欢迎信与岛务 */
.welcome { position: relative; isolation: isolate; }
.welcome-backdrop { position: absolute; inset: -2rem -25vw auto; height: min(520px, 58vh); z-index: -1; opacity: .46; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, transparent 100%); }
.welcome-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82); }
.welcome .envelope { filter: drop-shadow(0 22px 30px rgba(3,8,18,.28)); }
.welcome-letter { font-family: var(--font-story); font-size: 1.05rem; }
.settings-page { text-align: left; }
.settings-hero { position: relative; min-height: 320px; border-radius: 18px; overflow: hidden; margin-bottom: 1.5rem; }
.settings-hero picture, .settings-hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.settings-hero picture img { object-fit: cover; }
.settings-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,18,33,.86), rgba(10,18,33,.38) 55%, transparent 85%); }
.settings-hero > div { position: relative; z-index: 2; width: min(430px, 44%); padding: 4rem 0 2rem 3.5rem; }
.settings-hero h1 { margin: .5rem 0; font-size: 3.3rem; }
.settings-hero p { color: var(--cream-dim); line-height: 1.8; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.setting-card { min-height: 235px; padding: 2rem; background: #151e31; }
.setting-card > span { color: var(--warm); font-size: .65rem; letter-spacing: .16em; }
.setting-card h2 { margin: .65rem 0 .7rem; font-size: 1.35rem; color: var(--paper); }
.setting-card p { color: var(--cream-dim); font-size: .82rem; line-height: 1.85; }
.key-card h2 { color: var(--warm); font-family: var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: .16em; }
.text-action { display: inline-block; margin-top: 1rem; color: var(--cream) !important; text-decoration: none; font-size: .78rem; border-bottom: 1px solid var(--line-soft); }
.danger-zone { background: #211c28; }
.danger-zone .btn { margin-top: 1rem; }
.settings-hotlines { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .7rem 1.2rem; padding: 1rem; color: var(--cream-dim); font-size: .72rem; }
.settings-hotlines b { color: var(--cream); }
.settings-hotlines a { color: var(--cream-dim); text-decoration: none; }

/* 信件详情：保留仪式，但更像真实信，而不是游戏面板 */
.letter-grid .deco-title { font-size: 2rem; color: var(--paper); text-shadow: none; }
.letter-grid .deco-title::before, .letter-grid .deco-title::after { opacity: .35; }
.letter-grid .sheet { padding: 2.2rem 2.3rem; font-family: var(--font-story); font-size: 1.08rem; line-height: 2.2; border-radius: 7px; transform: rotate(-.12deg); }
.letter-grid .sheet:nth-of-type(even) { transform: rotate(.12deg); }
.letter-aside .aside-bubble { font-family: var(--font-story); border: 0; background: rgba(246,237,218,.055); }
.info-rows, .info-rows span { font-family: var(--font-ui); }

@keyframes scene-breathe { from { transform: scale(1.005); filter: saturate(.92) brightness(.96); } to { transform: scale(1.025); filter: saturate(1) brightness(1.02); } }
@keyframes voyage-pan { from { transform: scale(1.025) translateX(-.3%); } to { transform: scale(1.045) translateX(.5%); } }

@media (max-width: 900px) {
  .story-hero-copy, .journey-copy, .collection-hero > div, .help-hero > div, .stamp-copy, .settings-hero > div { width: 58%; }
  .writing-studio { aspect-ratio: 4 / 3; }
  .write-sheet-v2 { top: 41%; }
  .hotline-panel { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .story-hero, .journey-hero, .collection-hero, .island-hero, .help-hero, .stamp-ritual, .settings-hero { border-radius: 14px; }
  .story-hero { min-height: 590px; margin: 0 -.2rem; }
  .story-hero-media img { object-position: 64% center; }
  .story-hero::after { background: linear-gradient(0deg, rgba(9,16,30,.94) 0%, rgba(10,18,33,.56) 55%, rgba(10,18,33,.1) 100%); }
  .story-hero-copy { position: absolute; left: 0; right: 0; bottom: 0; width: auto; padding: 2rem 1.35rem 2.2rem; }
  .story-hero-copy h1 { font-size: clamp(2.15rem, 10vw, 2.8rem); line-height: 1.36; }
  .story-hero-copy > p { font-size: .88rem; line-height: 1.85; }
  .onboarding-form { width: calc(100% - .8rem); margin-top: -1rem; padding: 1.55rem 1.25rem; }
  .field-grid { grid-template-columns: 1fr; gap: .9rem; }
  .trust-row { gap: .55rem 1rem; }
  .write-page .page-heading { margin-top: 2.3rem; }
  .writing-studio { aspect-ratio: auto; min-height: 680px; overflow: visible; background: #1a2232; }
  .writing-studio-art { height: 310px; }
  .writing-studio-art img { object-fit: cover; object-position: 70% center; border-radius: 14px 14px 0 0; }
  .writing-studio::after { inset: 0 0 auto; height: 310px; box-shadow: inset 0 -70px 60px -40px #1a2232; }
  .write-sheet-v2 { left: 1rem; right: 1rem; top: 270px; width: auto; height: 330px; padding: 1.3rem 1.2rem; background: #f4ead4; border-radius: 7px; box-shadow: 0 18px 40px rgba(3,8,18,.22); transform: rotate(-.35deg); }
  .send-letter { bottom: 1.2rem; }
  .schedule-strip, .postage-note-v2 { flex-wrap: wrap; line-height: 1.6; }
  .journey-hero { min-height: 600px; }
  .journey-hero img { object-position: 58% center; }
  .journey-hero::after { background: linear-gradient(0deg, rgba(8,15,28,.92), rgba(8,15,28,.45) 58%, transparent 100%); }
  .journey-copy { position: absolute; left: 0; right: 0; bottom: 0; width: auto; padding: 2rem 1.35rem 2.2rem; }
  .journey-copy h1 { font-size: 2.5rem; }
  .compact-postbox { margin-top: -2rem; }
  .mail-hero { min-height: 480px; }
  .mail-hero img { min-height: 480px; object-position: 42% center; }
  .mail-hero::after { background: linear-gradient(0deg, rgba(13,21,34,.92), rgba(13,21,34,.22) 66%, transparent 100%); }
  .mail-hero .cap { left: 1.2rem; right: 1.2rem; top: auto; bottom: 1.5rem; width: auto; transform: none; }
  .mail-hero .cap p { max-width: 26em; }
  .folder-tabs { justify-content: flex-start; overflow-x: auto; padding-bottom: .25rem; }
  .collection-hero, .help-hero, .stamp-ritual { min-height: 540px; }
  .collection-hero picture img, .stamp-ritual picture img { object-position: 69% center; }
  .help-hero picture img { object-position: 67% center; }
  .collection-hero::after, .help-hero::after, .stamp-ritual::after { background: linear-gradient(0deg, rgba(9,16,29,.93), rgba(9,16,29,.48) 60%, transparent 100%); }
  .collection-hero > div, .help-hero > div, .stamp-copy { position: absolute; left: 0; right: 0; bottom: 0; width: auto; padding: 2rem 1.25rem; }
  .collection-page .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .collection-page .gallery-card { min-height: 190px; }
  .island-hero { min-height: 560px; }
  .island-hero picture img { object-position: 66% center; }
  .island-hero::after { background: linear-gradient(0deg, rgba(9,16,29,.9), rgba(9,16,29,.18) 66%, transparent 100%); }
  .island-title { left: 1.25rem; right: 1.25rem; top: auto; bottom: 1.6rem; width: auto; transform: none; }
  .island-title h1 { font-size: 2.8rem; }
  .island-name-form { flex-direction: column; }
  .island-page .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .island-page .stat-card:nth-child(2) { border-right: 0; }
  .island-page .stat-card:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .hotline-panel { padding: 1.25rem; }
  .hotline-list a { grid-template-columns: 1fr auto; }
  .hotline-list i { display: none; }
  .settings-hero { min-height: 420px; }
  .settings-hero picture img { object-position: 66% center; }
  .settings-hero::after { background: linear-gradient(0deg, rgba(9,16,29,.9), rgba(9,16,29,.22) 70%, transparent 100%); }
  .settings-hero > div { position: absolute; left: 0; right: 0; bottom: 0; width: auto; padding: 1.5rem; }
  .settings-grid { grid-template-columns: 1fr; }
  .setting-card { min-height: auto; }
  .letter-grid .sheet { padding: 1.8rem 1.25rem; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .story-hero-media img, .journey-hero img, .mail-hero img, .collection-hero picture img, .island-hero picture img { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   V7 · 软萌沉浸绘本层
   不是“深色官网放插画”，而是所有 UI 都生活在邮邮的世界里。
   ═══════════════════════════════════════════════════════════ */
:root {
  --night: #252b55;
  --night-2: #303660;
  --paper: #fff4dd;
  --paper-2: #f3e5ca;
  --ink: #494258;
  --warm: #f2bd78;
  --warm-2: #d99b5d;
  --vermil: #bd6e67;
  --rose-soft: #e9b1ad;
  --lavender: #b9b4e4;
  --lavender-paper: #eee9f8;
  --sage: #9eb8a5;
  --cream: rgba(255,248,229,.96);
  --cream-dim: rgba(255,248,229,.74);
  --cream-faint: rgba(255,248,229,.22);
}

body {
  background:
    radial-gradient(circle at 82% 9%, rgba(204,184,232,.26), transparent 30rem),
    radial-gradient(circle at 12% 38%, rgba(241,175,149,.10), transparent 25rem),
    linear-gradient(160deg, #242a52 0%, #2d315d 48%, #262d56 100%);
  color: var(--cream);
}
body::before {
  opacity: .32;
  background-image:
    radial-gradient(circle at 18% 24%, rgba(255,237,190,.45) 0 1px, transparent 1.7px),
    radial-gradient(circle at 72% 61%, rgba(224,214,255,.35) 0 1px, transparent 1.6px),
    radial-gradient(circle at 46% 82%, rgba(255,213,181,.28) 0 1.3px, transparent 2px);
  background-size: 53px 57px, 71px 67px, 97px 89px;
  animation: soft-stars 12s ease-in-out infinite alternate;
}
.sky::after { background: radial-gradient(ellipse at center, rgba(248,193,126,.12), transparent 66%); }
.moon { background: #fff0c4; opacity: .78; box-shadow: 0 0 50px rgba(255,224,166,.28); }
.moon::after { background: #2d315d; }

/* 导航永远在画面之上；取消会落到角色脸上的下拉菜单 */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  width: min(1380px, calc(100% - 1.2rem));
  max-width: none;
  margin: 0 auto;
  padding: .9rem 1.25rem;
  gap: 1.25rem;
  border: 1px solid rgba(255,248,229,.10);
  border-top: 0;
  border-radius: 0 0 24px 24px;
  background: rgba(37,43,85,.88);
  box-shadow: 0 12px 36px rgba(24,25,56,.18);
  backdrop-filter: blur(22px) saturate(1.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
}
.nav .brand { color: #fff6df; }
.nav-logo {
  border-radius: 50%;
  background: #f9e8c6;
  box-shadow: 0 0 0 3px rgba(255,241,206,.12), 0 5px 14px rgba(12,16,43,.20);
}
.nav a.active::after { width: 16px; height: 3px; bottom: -.72rem; border-radius: 99px; background: #f5c984; }
.nav-pill {
  border-radius: 14px;
  color: #514457 !important;
  background: #f6c77f;
  box-shadow: 0 6px 18px rgba(232,168,97,.18);
}
.nav-pill:hover { background: #ffda9c; color: #514457 !important; transform: translateY(-1px); }
.nav-utility { padding: .55rem .2rem; color: rgba(255,248,229,.7) !important; }
.sail-count { color: rgba(255,248,229,.68); border-color: rgba(255,248,229,.14); }

/* 按钮像柔软文具贴纸，有触感但不做发光游戏按钮 */
.btn, a.btn, a.btn:visited,
.btn.red, a.btn.red, a.btn.red:visited,
.btn.navy, a.btn.navy, a.btn.navy:visited {
  border-radius: 15px;
  background: #f5c47e;
  color: #514457;
  box-shadow: 0 7px 0 rgba(176,111,78,.22), 0 16px 28px rgba(36,31,65,.13);
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.btn:hover, .btn.red:hover, .btn.navy:hover {
  transform: translateY(-2px);
  background: #ffd69a;
  color: #514457;
  box-shadow: 0 9px 0 rgba(176,111,78,.18), 0 19px 32px rgba(36,31,65,.16);
}
.btn:active, .btn.red:active, .btn.navy:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(176,111,78,.2); }
.btn.ghost, a.btn.ghost, a.btn.ghost:visited { border: 1px solid rgba(255,248,229,.32); border-radius: 15px; background: rgba(255,248,229,.08); box-shadow: none; }

/* 首页：一整幅场景；文字、角色、灯光处在同一个空间 */
.wrap.wide { max-width: 1360px; margin-top: 1.2rem; padding: 0 1.5rem; }
.home-hero { overflow: visible; }
.home-hero .immersive-home-stage {
  position: relative;
  display: block;
  min-height: clamp(620px, 70vh, 760px);
  overflow: hidden;
  border: 1px solid rgba(255,246,224,.13);
  border-radius: 38px;
  background: #28305b;
  box-shadow: 0 34px 90px rgba(17,18,46,.32), inset 0 0 0 1px rgba(255,255,255,.035);
  isolation: isolate;
}
.immersive-home-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(30,37,77,.88) 0%, rgba(35,42,82,.60) 29%, rgba(35,42,82,.08) 58%, transparent 76%),
    linear-gradient(0deg, rgba(34,38,76,.34), transparent 34%);
}
.home-hero .hero-art { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.home-hero .hero-art::before {
  z-index: 1;
  background: linear-gradient(180deg, rgba(39,43,82,.15), transparent 18%, transparent 78%, rgba(38,42,80,.22));
}
.home-hero .hero-art::after { left: 45%; right: 4%; bottom: 0; height: 33%; opacity: .5; }
.home-hero .hero-art picture, .home-hero .hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-hero .hero-art img {
  min-height: 0;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  filter: saturate(1.04) brightness(1.03);
  -webkit-mask-image: none;
  mask-image: none;
  animation: story-drift 18s ease-in-out infinite alternate;
}
.home-hero .hero-copy {
  position: relative;
  z-index: 3;
  width: min(510px, 44%);
  padding: clamp(5rem, 9vh, 7rem) 0 4rem clamp(2.4rem, 5vw, 5rem);
}
.hero-kicker { color: #f8c784; }
.hero-kicker span { display: inline-block; margin-right: .35rem; animation: tiny-twinkle 2.8s ease-in-out infinite; }
.home-hero h1 { color: #fff4db; font-size: clamp(3.1rem, 5.3vw, 5rem); line-height: 1.18; text-shadow: 0 4px 24px rgba(28,24,61,.18); }
.home-sub { color: rgba(255,247,225,.78); }
.departure-line { color: rgba(255,247,225,.66); }
.departure-line strong { color: #fff2d1; }
.home-primary { background: #f7c67f !important; }
.home-secondary { color: #fff2d9 !important; border-color: rgba(255,242,217,.40); }
.hero-promise { color: rgba(255,247,225,.66); }
.hero-promise span { background: #a9caae; box-shadow: 0 0 0 5px rgba(169,202,174,.12); }
.home-hero .hero-art figcaption {
  right: 3.4rem;
  bottom: 2.2rem;
  padding: .65rem 1rem .65rem 2.6rem;
  border: 1px solid rgba(255,245,220,.14);
  border-radius: 999px;
  color: rgba(255,248,229,.76);
  background: rgba(38,39,74,.34);
  text-shadow: none;
  backdrop-filter: blur(12px);
}
.home-hero .hero-art figcaption::before { left: 1rem; width: 1.1rem; background: #f3c27e; }

/* 首页信息不是两块仪表盘，而是压在夜桌上的票据和信托盘 */
.home-dock {
  position: relative;
  z-index: 5;
  grid-template-columns: .82fr 1.18fr;
  align-items: start;
  gap: clamp(1rem, 2.2vw, 1.8rem);
  width: calc(100% - clamp(1rem, 6vw, 6rem));
  margin: -3.8rem auto 0;
  border: 0;
}
.paper-object {
  position: relative;
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.2rem) !important;
  color: #554c5e;
  border: 1px solid rgba(255,255,255,.56);
  box-shadow: 0 25px 55px rgba(19,18,48,.23), inset 0 0 35px rgba(255,255,255,.26);
}
.route-ticket {
  border-radius: 28px 18px 30px 20px;
  background: #fff0d7;
  transform: rotate(-.35deg);
}
.route-ticket::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 17%;
  width: 64px;
  height: 20px;
  border-radius: 4px;
  background: rgba(234,190,140,.62);
  transform: rotate(-3deg);
  box-shadow: 0 2px 5px rgba(87,61,75,.08);
}
.letter-tray {
  border: 0 !important;
  border-radius: 22px 34px 24px 30px;
  background: #eee9f8;
  transform: translateY(1.2rem) rotate(.2deg);
}
.letter-tray::before {
  content: "♡";
  position: absolute;
  top: 1.1rem;
  right: 1.25rem;
  color: rgba(189,110,103,.42);
  font-size: 1.1rem;
  transform: rotate(8deg);
}
.paper-object .section-heading .eyebrow { color: #b27c6c; }
.paper-object .section-heading h2,
.paper-object .route-line,
.paper-object .reply-copy b,
.paper-object .empty-reply b { color: #4f485d; }
.paper-object .section-heading a,
.paper-object .route-meta,
.paper-object .weather-mood,
.paper-object .reply-copy small,
.paper-object .empty-reply { color: #85798c !important; }
.paper-object .route-status { color: #6f9b7a; }
.paper-object .reply-list > a,
.paper-object .empty-reply { border-color: rgba(88,75,101,.10); }
.paper-object .reply-list > a {
  margin-top: .55rem;
  padding: .7rem .8rem;
  border: 1px solid rgba(101,84,117,.08);
  border-radius: 15px;
  background: rgba(255,255,255,.38);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.paper-object .reply-list > a:hover { transform: translateX(4px) rotate(-.15deg); background: rgba(255,255,255,.72); box-shadow: 0 8px 20px rgba(78,59,99,.08); }
.paper-object .reply-arrow { color: #b98178; }
.post-office-note {
  position: relative;
  z-index: 4;
  width: min(760px, calc(100% - 2rem));
  margin: 2.4rem auto 0;
  padding: 1rem 1.25rem;
  color: #756979;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 10px 18px 12px 16px;
  background: #f6d7c8;
  box-shadow: 0 15px 32px rgba(24,22,56,.14);
  transform: rotate(-.25deg);
}
.post-office-note b { color: #5b5062; }
.post-office-note .note-mark { background: rgba(255,245,227,.42); }
.note-time { color: #a18791; }

/* 所有剧情大图减弱“硬卡片”和黑色压暗，保留柔软景深 */
.story-hero, .journey-hero, .mail-hero, .collection-hero, .island-hero, .help-hero, .stamp-ritual, .settings-hero {
  border: 1px solid rgba(255,248,229,.17);
  border-radius: 34px;
  box-shadow: 0 28px 72px rgba(18,18,47,.24);
}
.story-hero-media img, .journey-hero img, .mail-hero img, .collection-hero picture img, .island-hero picture img {
  filter: saturate(1.02) brightness(1.04);
}
.story-hero::after, .journey-hero::after, .collection-hero::after, .stamp-ritual::after {
  background: linear-gradient(90deg, rgba(40,45,88,.84) 0%, rgba(45,50,94,.48) 39%, rgba(45,50,94,.06) 70%, transparent 86%);
}
.story-hero-copy > p, .journey-copy > p, .collection-hero p, .stamp-copy p { color: rgba(255,248,229,.82); }

/* 清晨、岛屿、求助：在亮部直接使用深色文字，不强压一层黑蒙版 */
.mail-hero::after { background: linear-gradient(90deg, transparent 28%, rgba(255,247,230,.18) 52%, rgba(255,247,230,.91) 100%); }
.mail-hero .cap h2, .mail-hero .cap p { color: #55506a; }
.mail-hero .cap .soft-kicker { color: #b16f72; }
.island-hero::after, .settings-hero::after { background: linear-gradient(90deg, rgba(255,244,224,.92), rgba(255,244,224,.60) 42%, transparent 72%); }
.island-title h1, .island-title p, .settings-hero h1, .settings-hero p { color: #554d67; }
.island-title .soft-kicker, .settings-hero .soft-kicker { color: #b36f72; }
.help-hero::after { background: linear-gradient(90deg, rgba(255,248,233,.98) 0%, rgba(255,248,233,.84) 44%, transparent 72%); }
.help-hero h1, .help-hero p { color: #554d67; }
.help-hero .soft-kicker { color: #b36f72; }

/* 写信时，输入框成为画面里的那张纸 */
.writing-studio { border-radius: 34px; border: 1px solid rgba(255,248,229,.18); box-shadow: 0 30px 74px rgba(18,18,47,.26); }
.writing-studio::after { box-shadow: inset 0 0 55px rgba(84,59,78,.12); }
.writing-studio-art img { filter: saturate(1.02) brightness(1.03); }
.write-sheet-v2 { left: 10.3%; top: 38%; width: 54.5%; height: 47%; padding: 1.1rem 1.6rem .9rem; transform: rotate(-.6deg); }
.write-sheet-v2 textarea { color: #5a4b54; background: repeating-linear-gradient(180deg, transparent 0 calc(2em - 1px), rgba(163,124,111,.10) calc(2em - 1px) 2em); }
.send-letter { left: 39%; bottom: 4.2%; min-width: 168px; background: #e9aaa0 !important; }
.send-letter:hover { background: #f4bbb1 !important; }

/* 轻展柜、设置与热线也变成纸张和软布，不再是后台卡片 */
.folder-body, .hotline-panel, .settings-grid { border-radius: 26px; overflow: hidden; box-shadow: 0 24px 55px rgba(19,18,48,.18); }
.hotline-panel { border: 1px solid rgba(255,255,255,.48); background: #fff3df; color: #554d67; }
.hotline-intro h2, .hotline-list b { color: #554d67; }
.hotline-intro p, .hotline-list span { color: #85798c; }
.hotline-list a { color: #554d67; border: 1px solid rgba(105,84,111,.08); background: #eee9f8; }
.hotline-list a:hover { background: #f7edf8; transform: translateX(3px); }
.hotline-list i { color: #b36f72; }
.settings-grid { gap: .75rem; padding: .75rem; border: 0; background: rgba(255,247,228,.20); }
.setting-card { border-radius: 20px; background: #f8eedc; color: #554d67; }
.setting-card h2, .setting-card p, .text-action { color: #554d67 !important; }
.setting-card > span { color: #b36f72; }
.danger-zone { background: #f2dfdf; }
.collection-page .gallery-grid { gap: .8rem; padding: .8rem; border: 0; border-radius: 26px; background: rgba(255,247,228,.14); }
.collection-page .gallery-card { border-radius: 20px; background: #f8eedc; }
.collection-page .gallery-card:hover { background: #fff6e7; transform: translateY(-4px) rotate(-.4deg); }
.collection-page .gallery-card b { color: #554d67; }
.collection-page .gallery-card span { color: #85798c; }

/* 更像绘本镜头的微动：呼吸、灯光、星星，不做炫技转场 */
@keyframes story-drift { from { transform: scale(1.01) translate3d(-.25%, 0, 0); } to { transform: scale(1.035) translate3d(.35%, -.2%, 0); } }
@keyframes soft-stars { from { opacity: .22; } to { opacity: .42; } }
@keyframes tiny-twinkle { 0%,100% { opacity: .55; transform: scale(.8) rotate(-8deg); } 50% { opacity: 1; transform: scale(1.15) rotate(8deg); } }

@media (max-width: 1100px) {
  .nav { gap: .9rem; font-size: .8rem; }
  .sail-count { display: none; }
  .home-hero .hero-copy { width: 50%; }
}

@media (max-width: 899px) {
  .nav a:not(.brand):not(.nav-pill):not(.nav-utility), .nav .sail-count { display: none; }
  .nav .nav-utility { margin-left: auto; }
  .home-hero .immersive-home-stage { min-height: 720px; }
  .immersive-home-stage::before { background: linear-gradient(0deg, rgba(36,42,82,.94) 0%, rgba(40,46,88,.58) 47%, rgba(40,46,88,.04) 76%); }
  .home-hero .hero-art img { object-position: 63% center; }
  .home-hero .hero-copy { position: absolute; left: 0; right: 0; bottom: 0; width: auto; padding: 2.6rem 2rem 3.2rem; }
  .home-dock { width: calc(100% - 2rem); grid-template-columns: 1fr; margin-top: -2rem; }
  .letter-tray { transform: rotate(.2deg); }
  .story-hero-copy, .journey-copy, .collection-hero > div, .stamp-copy { width: 58%; }
}

@media (max-width: 640px) {
  .nav { width: calc(100% - .7rem); padding: .68rem .85rem; border-radius: 0 0 20px 20px; }
  .nav .nav-utility { display: none; }
  .nav-pill { margin-left: auto; padding: .56em 1em; }
  .wrap.wide { padding: 0 .8rem; }
  .home-hero .immersive-home-stage { min-height: 710px; border-radius: 28px; }
  .home-hero .hero-art { background: #2b315d; }
  .home-hero .hero-art img { bottom: auto; height: 58%; object-position: 71% 48%; }
  .immersive-home-stage::before { background: linear-gradient(0deg, #2b315d 0%, rgba(43,49,93,.98) 46%, rgba(43,49,93,.70) 58%, rgba(43,49,93,.04) 78%); }
  .home-hero .hero-copy { padding: 2rem 1.3rem 2.45rem; }
  .home-hero h1 { font-size: clamp(2.25rem, 10.5vw, 2.75rem); line-height: 1.24; }
  .home-sub { font-size: .95rem; }
  .home-hero .hero-art figcaption { display: none; }
  .hero-actions { gap: .9rem; }
  .home-primary { flex: 0 0 auto; }
  .home-dock { width: calc(100% - .8rem); margin-top: -1.15rem; }
  .paper-object { padding: 1.35rem !important; }
  .route-ticket, .letter-tray { border-radius: 22px; transform: none; }
  .post-office-note { width: calc(100% - .8rem); margin-top: 1.2rem; }
  .story-hero, .journey-hero, .mail-hero, .collection-hero, .island-hero, .help-hero, .stamp-ritual, .settings-hero, .writing-studio { border-radius: 26px; }
  .write-sheet-v2 { left: 1rem; right: 1rem; top: 270px; width: auto; height: 330px; }
  .send-letter { left: 50%; bottom: 1.2rem; }
  .help-hero::after, .island-hero::after, .settings-hero::after, .mail-hero::after { background: linear-gradient(0deg, rgba(255,248,233,.96), rgba(255,248,233,.70) 48%, transparent 78%); }
  .help-hero > div, .island-title, .settings-hero > div, .mail-hero .cap { color: #554d67; }
  .tabbar { background: rgba(44,48,91,.92); border-color: rgba(255,248,229,.12); box-shadow: 0 -12px 30px rgba(20,20,52,.16); }
  .tabbar a i { border-radius: 11px; transition: background .2s ease, transform .2s ease; }
  .tabbar a.on i { background: rgba(246,199,127,.16); transform: translateY(-2px); }
  .tabbar a.on i, .tabbar a.on span { color: #f6c77f; }
}

@media (prefers-reduced-motion: reduce) {
  body::before, .home-hero .hero-art img, .hero-kicker span { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   V8 · 完整旅程沉浸层
   把“写、寄、等、拆、收藏”做成连续的绘本动作。
   ═══════════════════════════════════════════════════════════ */

/* 可键盘操作的拆信按钮，保留纸张外观 */
button.envelope {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  background: transparent;
}
.envelope:focus-visible { outline: 3px solid rgba(246,199,127,.75); outline-offset: 8px; border-radius: 12px; }
.envelope .env-body { transition: transform .35s ease, box-shadow .35s ease; }
.envelope:hover .env-body { transform: translateY(-5px) rotate(-.35deg); box-shadow: 0 24px 45px rgba(22,20,50,.26); }
.envelope.open .env-body { transform: none; }
.env-hint { color: rgba(255,248,229,.70); font-family: var(--font-story); letter-spacing: .03em; }

/* 写信：先给一个柔软开头，再进入真实信纸 */
.letter-starters {
  display: grid;
  gap: .75rem;
  width: min(900px, 100%);
  margin: -1rem auto 1.5rem;
  text-align: center;
}
.letter-starters > span { color: rgba(255,248,229,.56); font-size: .74rem; letter-spacing: .06em; }
.letter-starters > div { display: flex; justify-content: center; flex-wrap: wrap; gap: .55rem; }
.letter-starters button {
  padding: .58rem .88rem;
  border: 1px solid rgba(255,248,229,.16);
  border-radius: 12px 16px 11px 15px;
  color: rgba(255,248,229,.82);
  background: rgba(255,248,229,.07);
  font: 400 .78rem/1.4 var(--font-story);
  cursor: pointer;
  transition: transform .2s ease, color .2s ease, background .2s ease;
}
.letter-starters button:nth-child(2) { transform: rotate(-.4deg); }
.letter-starters button:nth-child(3) { transform: rotate(.35deg); }
.letter-starters button:hover, .letter-starters button:focus-visible { color: #5b5062; background: #f8e8d6; transform: translateY(-2px) rotate(0); outline: 0; }
.write-sheet-v2 .letter-sign { display: flex; justify-content: flex-end; gap: .25rem; }
.writing-studio.is-sending::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(circle at 39% 78%, rgba(255,235,191,.48), transparent 24%);
  animation: letter-send-glow .8s ease-out both;
}
.writing-studio.is-sending .send-letter { z-index: 7; }
.night-companion {
  width: fit-content;
  max-width: 100%;
  margin: 1.2rem auto 0;
  padding: .65rem 1.05rem .65rem .65rem;
  border: 1px solid rgba(255,248,229,.12);
  border-radius: 20px;
  background: rgba(255,248,229,.055);
}
.night-companion picture { width: 88px; height: 70px; overflow: hidden; border-radius: 16px; flex: 0 0 auto; }
.night-companion picture img { width: 100%; height: 100%; display: block; object-fit: cover; }
.night-companion > span { color: rgba(255,248,229,.68); font-family: var(--font-story); }

/* 收藏册：空状态是一个房间；有信后像摊开的私人相册 */
.empty-mailbox-v3 {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(320px, 1.1fr);
  align-items: center;
  gap: clamp(1.2rem, 4vw, 4rem);
  min-height: min(720px, 76vh);
  padding: clamp(1.2rem, 4vw, 3.2rem);
  border: 1px solid rgba(255,248,229,.16);
  border-radius: 36px;
  background: linear-gradient(135deg, rgba(255,245,223,.08), rgba(183,177,226,.08));
  box-shadow: 0 30px 80px rgba(18,18,47,.22);
  text-align: left;
}
.empty-mailbox-v3 picture { display: block; transform: rotate(-.5deg); }
.empty-mailbox-v3 img { width: 100%; display: block; border-radius: 30px; box-shadow: 0 24px 55px rgba(21,19,48,.18); }
.empty-mailbox-v3 h2 { margin: .8rem 0 1rem; color: #fff3d7; font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.35; }
.empty-mailbox-v3 p { max-width: 28em; margin-bottom: 1.7rem; color: rgba(255,248,229,.70); }
.bulletin {
  display: block;
  width: fit-content;
  max-width: calc(100% - 1rem);
  margin: -1.1rem auto 1.2rem;
  padding: .7rem 1.2rem;
  border: 1px solid rgba(255,255,255,.44);
  border-radius: 9px 15px 10px 14px;
  color: #746879;
  background: #f4d9ce;
  box-shadow: 0 12px 26px rgba(24,22,56,.12);
  transform: rotate(-.25deg);
}
.folder-tabs button { border-radius: 13px; }
.folder-tabs button.on { background: #f5c680; color: #514457; border-color: transparent; box-shadow: 0 5px 0 rgba(173,111,81,.16); }
.folder-body { width: min(900px, 100%); padding: 1.1rem; border-radius: 28px; background: #f6ead5; }
.month-group { display: grid; gap: .75rem; }
.list-card {
  min-height: 104px;
  margin: 0;
  padding: 1.15rem 6rem 1rem 3.4rem;
  border: 1px solid rgba(111,87,103,.09);
  border-radius: 17px 22px 16px 20px;
  background: #fff9ed;
  box-shadow: 0 8px 20px rgba(72,53,77,.06);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.list-card:hover { padding-left: 3.65rem; transform: translateY(-3px) rotate(-.12deg); background: #fffdf7; box-shadow: 0 14px 26px rgba(72,53,77,.10); }
.list-card b { color: #554d67; }
.list-card .lc-state, .list-card time { color: #8b7e8e; }
.letter-card-mark { position: absolute; left: 1.3rem; top: 1.35rem; color: #d1948a; font-size: 1rem; }
.list-card.unread { border-color: rgba(213,142,126,.34); box-shadow: 0 0 0 3px rgba(233,177,173,.14), 0 10px 24px rgba(72,53,77,.08); }
.fab, a.fab, a.fab:visited { border-radius: 16px; background: #f5c47e; box-shadow: 0 7px 0 rgba(176,111,78,.18), 0 18px 30px rgba(25,23,56,.18); }

/* 寄出：图片之后只留一张船票，不再播放旧风格邮筒帧 */
.voyage-ticket {
  position: relative;
  z-index: 4;
  width: min(820px, calc(100% - 2rem));
  margin: -3.2rem auto 1.5rem;
  padding: 1.35rem 1.6rem 1.2rem;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 22px 16px 24px 18px;
  color: #5b5268;
  background: #fff0d9;
  box-shadow: 0 24px 52px rgba(20,18,50,.21);
  transform: rotate(-.2deg);
  text-align: left;
}
.voyage-ticket::before { content: ""; position: absolute; top: -8px; right: 16%; width: 66px; height: 18px; border-radius: 3px; background: rgba(231,185,137,.62); transform: rotate(2deg); }
.ticket-label { color: #b27570; font: 650 .59rem/1 var(--font-ui); letter-spacing: .18em; }
.voyage-line { display: grid; grid-template-columns: 12px 1fr 12px 1fr 12px 1fr; align-items: center; gap: .55rem; margin: 1rem 0 .75rem; }
.voyage-line i { position: relative; width: 10px; height: 10px; border: 2px solid #c9b8b3; border-radius: 50%; }
.voyage-line i:not(:last-of-type)::after { content: ""; position: absolute; left: 9px; top: 2px; width: clamp(30px, 9vw, 90px); height: 2px; border-radius: 99px; background: #dfcec0; }
.voyage-line i.done { border-color: #8faf98; background: #8faf98; }
.voyage-line i.moving { border-color: #d28c7e; background: #f6c5b4; box-shadow: 0 0 0 5px rgba(210,140,126,.12); animation: voyage-dot 2.4s ease-in-out infinite; }
.voyage-line b { font-size: .78rem; font-weight: 550; white-space: nowrap; }
.voyage-ticket p { margin: 0; color: #8a7d8b; font: 400 .82rem/1.8 var(--font-story); }
.posted-actions { margin-top: 1.4rem !important; }
.quiet-link { color: rgba(255,248,229,.78) !important; text-decoration: none; border-bottom: 1px solid rgba(255,248,229,.24); padding: .65rem .2rem; }
.quiet-link:hover { color: #fff3d7 !important; border-color: #f4c580; }

/* 信件详情：阅读优先，收藏信息退到柔软边栏 */
.letter-grid { max-width: 1180px; margin: 0 auto; gap: 2.5rem; align-items: start; }
.reader-heading { margin: 1.7rem auto 1.5rem; }
.reader-heading .deco-title { margin: .55rem 0 .35rem; color: #fff2d5; font-size: clamp(2.2rem, 4.6vw, 3.7rem); }
.reader-heading > p { color: rgba(255,248,229,.55); font-family: var(--font-story); }
.day-header { width: fit-content; margin: 0 auto 1.8rem; padding: .55rem .9rem; border: 1px solid rgba(255,248,229,.12); border-radius: 999px; color: rgba(255,248,229,.64); background: rgba(255,248,229,.055); font-family: var(--font-ui); }
.letter-grid .sheet {
  width: 100%;
  margin: 2.5rem auto 3rem;
  padding: 2.8rem clamp(1.6rem, 4vw, 3.3rem) 2.4rem;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 22px 28px 20px 26px;
  color: #51495a;
  background-color: #fff4df;
  box-shadow: 0 26px 58px rgba(17,16,43,.23), inset 0 0 45px rgba(255,255,255,.26);
  transform: rotate(-.15deg);
}
.letter-grid .sheet:nth-of-type(even) { transform: rotate(.12deg); background-color: #f5ecdf; }
.sheet-titled .plaque {
  top: -1.35rem;
  padding: .62rem 1.2rem;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 10px 14px 9px 13px;
  color: #66586d;
  background: #edc7ba;
  box-shadow: 0 8px 18px rgba(71,49,70,.11);
  transform: translateX(-50%) rotate(-.5deg);
}
.sheet-lined { background-image: repeating-linear-gradient(transparent, transparent calc(2.2em - 1px), rgba(112,88,104,.095) 2.2em); }
.meta-bar { gap: .45rem; }
.meta-bar span { padding: .48rem .78rem; border-radius: 12px; background: rgba(255,248,229,.07); }
.letter-aside { position: sticky; top: 5.3rem; }
.letter-aside .aside-bubble { border-radius: 18px; color: rgba(255,248,229,.74); background: rgba(255,248,229,.07); }
.aside-fig { overflow: hidden; border-radius: 28px; box-shadow: 0 22px 45px rgba(17,16,43,.20); }
.aside-fig img { height: 245px; border-radius: 0; object-fit: cover; object-position: 72% center; filter: saturate(1.02) brightness(1.04); }
.letter-aside .plaque-frame { border: 1px solid rgba(255,255,255,.46); border-radius: 20px; color: #5d5268; background: #f7ead8; box-shadow: 0 16px 36px rgba(17,16,43,.13); }
.letter-aside .panel-title { color: #9e6b70; }
.letter-aside .info-rows > div { border-color: rgba(100,80,103,.10); }
.letter-aside .info-rows span { color: #756a7a; }

/* 小岛统计变成沿路的小木牌，而不是四个 KPI */
.island-signs { width: min(900px, 100%); margin: 1.6rem auto; padding: 0; border: 0; gap: .8rem; }
.island-signs .stat-card {
  min-height: 150px;
  display: grid;
  align-content: center;
  justify-items: center;
  border: 1px solid rgba(255,255,255,.50);
  border-radius: 18px 24px 17px 22px;
  color: #5d5268;
  background: #f8ead5;
  box-shadow: 0 14px 30px rgba(19,18,48,.12);
  transform: rotate(-.35deg);
}
.island-signs .stat-card:nth-child(even) { background: #ebe7f5; transform: translateY(8px) rotate(.3deg); }
.island-signs small { color: #9a8791; font-size: .68rem; }
.island-signs b { margin: .25rem 0 .1rem; color: #b06e6f; font: 500 2.1rem/1 var(--font-story); }
.island-signs span { color: #756a7a; }
.leave-island { margin-left: auto; color: #9f6d74 !important; }
.island-name-form {
  position: relative;
  padding: .45rem;
  border: 1px solid rgba(255,248,229,.16);
  border-radius: 22px;
  background: rgba(255,248,229,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}
.island-name-form input {
  flex: 1;
  min-width: 0;
  color: #57506d;
  background: rgba(255,249,237,.93);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(31,35,75,.10);
}
.island-name-form input::placeholder { color: #a296a8; }
.island-name-form .btn {
  min-width: 92px;
  color: #58506c;
  background: #efc77c;
  border-color: transparent;
  border-radius: 16px;
}

/* 欢迎与领取邮筒：纸张更柔软，表单像放在码头上的登记卡 */
.onboarding-form { border-radius: 24px 31px 23px 28px; border: 1px solid rgba(255,255,255,.60); box-shadow: 0 30px 70px rgba(18,18,47,.20); }
.onboarding-form::before { content: ""; position: absolute; top: -8px; left: 18%; width: 72px; height: 20px; border-radius: 4px; background: rgba(229,185,139,.58); transform: rotate(-3deg); }
.trust-row span { padding: .32rem .55rem; border-radius: 999px; background: rgba(255,248,229,.045); }

/* 展馆：像翻一册文具收藏，而不是商品列表 */
.collection-page .gallery-card { position: relative; overflow: hidden; min-height: 230px; padding: 1.3rem .8rem 1rem; }
.collection-page .gallery-card::before { content: ""; position: absolute; inset: .7rem; border: 1px dashed rgba(144,112,119,.13); border-radius: 15px; pointer-events: none; }
.collection-page .gallery-card img { position: relative; z-index: 1; width: 104px; }
.collection-page .gallery-card.locked { opacity: .48; filter: saturate(.55); }

@keyframes letter-send-glow { 0% { opacity: 0; transform: scale(.8); } 45% { opacity: 1; } 100% { opacity: 0; transform: scale(1.22); } }
@keyframes voyage-dot { 0%,100% { box-shadow: 0 0 0 4px rgba(210,140,126,.10); } 50% { box-shadow: 0 0 0 9px rgba(210,140,126,.03); } }

@media (max-width: 899px) {
  .empty-mailbox-v3 { grid-template-columns: 1fr; text-align: center; }
  .empty-mailbox-v3 picture { width: min(520px, 100%); margin: 0 auto; }
  .empty-mailbox-v3 p { margin-left: auto; margin-right: auto; }
  .letter-grid { display: block; }
  .letter-aside { display: none; }
}

@media (max-width: 640px) {
  .letter-starters { margin-top: -.5rem; text-align: left; }
  .letter-starters > div { justify-content: flex-start; flex-wrap: wrap; overflow: visible; padding: 0 .1rem .25rem; }
  .letter-starters > div::-webkit-scrollbar { display: none; }
  .letter-starters button { flex: 1 1 calc(50% - .35rem); min-width: 0; padding-inline: .72rem; text-align: left; }
  .write-sheet-v2 .letter-sign { font-size: .72rem; }
  .night-companion { padding-right: .8rem; }
  .night-companion picture { width: 72px; height: 62px; }
  .empty-mailbox-v3 { min-height: auto; padding: 1rem 1rem 2rem; border-radius: 28px; }
  .empty-mailbox-v3 img { border-radius: 24px; }
  .empty-mailbox-v3 h2 { font-size: 2.35rem; }
  .bulletin { margin-top: -1rem; }
  .folder-body { padding: .75rem; border-radius: 22px; }
  .list-card { min-height: 112px; padding: 1rem 4.7rem .9rem 2.7rem; }
  .list-card:hover { padding-left: 2.7rem; }
  .letter-card-mark { left: 1rem; }
  .list-card .lc-stamp { right: .7rem; width: 48px; }
  .list-card .lc-ribbon { right: 4.3rem; }
  .voyage-ticket { width: calc(100% - 1rem); margin-top: -1.6rem; padding: 1.2rem 1rem; border-radius: 18px; }
  .voyage-line { grid-template-columns: 10px 1fr; gap: .45rem .65rem; }
  .voyage-line i:not(:last-of-type)::after { left: 3px; top: 9px; width: 2px; height: 28px; }
  .voyage-line b { white-space: normal; }
  .reader-heading { margin-top: 2.3rem; }
  .reader-heading .deco-title { font-size: 2.5rem; }
  .day-header { font-size: .72rem; }
  .letter-grid .sheet { padding: 2.4rem 1.25rem 1.8rem; border-radius: 18px 22px 17px 21px; }
  .letter-grid .sheet.sheet-lined { padding-top: 7.2rem; }
  .meta-bar { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .35rem; }
  .meta-bar span { flex: 0 0 auto; }
  .island-signs { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .island-signs .stat-card { min-height: 130px; border-bottom: 1px solid rgba(255,255,255,.50) !important; border-right: 1px solid rgba(255,255,255,.50) !important; }
  .island-name-form { gap: .5rem; padding: .5rem; border-radius: 19px; }
  .island-name-form input, .island-name-form .btn { width: 100%; min-height: 46px; border-radius: 14px; }
  .settings-hotlines { align-items: flex-start; flex-direction: column; }
  .leave-island { margin-left: 0; }
  .collection-page .gallery-card { min-height: 205px; }
}

@media (prefers-reduced-motion: reduce) {
  .writing-studio.is-sending::before, .voyage-line i.moving { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   V9 · 让界面像同一张桌上的物件，而不是互不相干的窗口
   ═══════════════════════════════════════════════════════════ */

/* 首页：两张票据压住彼此，公告从下方探出来 */
.home-storyboard { position: relative; z-index: 5; padding-bottom: .6rem; }
.home-storyboard .home-dock {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
  width: calc(100% - clamp(1rem, 5vw, 4.8rem));
}
.home-storyboard .route-ticket { grid-column: 1 / 7; grid-row: 1; z-index: 2; }
.home-storyboard .letter-tray { grid-column: 6 / 13; grid-row: 1; z-index: 3; margin-left: .45rem; }
.home-storyboard .post-office-note {
  z-index: 1;
  width: min(780px, calc(100% - 5rem));
  margin: -1.05rem auto 0;
  padding-top: 1.35rem;
  box-shadow: 0 18px 36px rgba(24,22,56,.16);
}

/* 收藏册：公告、月份与信件册共用一个叠放层 */
.archive-stack {
  position: relative;
  z-index: 4;
  width: min(940px, calc(100% - 2rem));
  margin: -2rem auto 0;
  padding-top: 3.2rem;
}
.archive-stack .bulletin { position: absolute; z-index: 3; top: 0; left: 50%; margin: 0; transform: translateX(-50%) rotate(-.25deg); }
.archive-stack .folder-tabs { position: relative; z-index: 2; margin: 0 0 -.55rem; }
.archive-stack .folder-body { position: relative; z-index: 1; width: 100%; padding-top: 1.6rem; }

/* 展馆：展册压在首图下沿，馆藏卡片变成可以触摸的纸页 */
.collection-page .collection-hero { margin-bottom: 0; }
.collection-page .gallery-grid {
  position: relative;
  z-index: 4;
  width: calc(100% - clamp(1rem, 4vw, 3.5rem));
  margin: -3rem auto 0;
  padding: 3.7rem 1rem 1.15rem;
  gap: .75rem;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 30px 24px 34px 26px;
  background: #f1e8d8;
  box-shadow: 0 28px 60px rgba(19,18,48,.22), inset 0 1px 0 rgba(255,255,255,.55);
}
.collection-page .gallery-grid::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: 50%;
  width: 78px;
  height: 22px;
  border-radius: 4px;
  background: rgba(225,177,131,.68);
  transform: translateX(-50%) rotate(-2deg);
  box-shadow: 0 3px 7px rgba(86,60,76,.09);
}
.collection-page button.gallery-card {
  appearance: none;
  -webkit-appearance: none;
  min-height: 236px;
  padding: 1.35rem .8rem 1rem;
  border: 1px solid rgba(122,94,110,.10);
  border-radius: 18px 23px 17px 21px;
  color: #584f61;
  background: #fff9ed;
  box-shadow: 0 9px 20px rgba(75,55,79,.07);
  font-family: var(--font-ui);
  cursor: zoom-in;
}
.collection-page button.gallery-card:nth-child(3n+2) { background: #f5eef9; transform: translateY(5px) rotate(.15deg); }
.collection-page button.gallery-card:nth-child(4n+3) { background: #f9eadf; transform: rotate(-.2deg); }
.collection-page button.gallery-card:hover,
.collection-page button.gallery-card:focus-visible {
  z-index: 5;
  color: #584f61;
  background: #fffdf7;
  outline: 3px solid rgba(217,148,134,.24);
  transform: translateY(-5px) rotate(-.3deg);
  box-shadow: 0 17px 30px rgba(75,55,79,.13);
}
.collection-page button.gallery-card b { color: #584f61; font-weight: 600; }
.collection-page button.gallery-card > span:not(.static-mark) { color: #958696; }
.collection-page button.gallery-card > i {
  margin-top: .35rem;
  color: #c1847d;
  font-size: .66rem;
  font-style: normal;
  letter-spacing: .08em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.collection-page button.gallery-card:hover > i,
.collection-page button.gallery-card:focus-visible > i { opacity: 1; transform: none; }
.collection-page button.gallery-card.locked { opacity: .66; }
.collection-page button.gallery-card.locked:hover,
.collection-page button.gallery-card.locked:focus-visible { opacity: .9; }
.collection-page button.gallery-card img { width: 108px; }
.postmark-hero picture img { object-position: center; }
.postmark-card .static-mark { color: rgba(75,79,118,.72); border-color: currentColor; }
.postmark-card.mark-variant-1 .static-mark { border-radius: 44%; transform: rotate(4deg) scaleX(1.08); }
.postmark-card.mark-variant-2 .static-mark { border-style: double; transform: rotate(-3deg) scale(.95); }
.postmark-card.mark-variant-3 .static-mark { border-width: 3px 1px; transform: rotate(7deg); }

/* 邮票/邮戳放大阅读：一张从展册里拿出来的说明卡 */
.collection-preview {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(760px, calc(100% - 2rem));
  max-height: min(760px, calc(100dvh - 2rem));
  padding: 0;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 30px 38px 28px 34px;
  color: #554d60;
  background: #fff3df;
  box-shadow: 0 36px 100px rgba(19,18,48,.42);
  overflow: hidden;
}
.collection-preview[open] { display: grid; grid-template-columns: .88fr 1.12fr; }
.collection-preview::backdrop { background: rgba(25,27,62,.72); backdrop-filter: blur(10px); }
.preview-close {
  position: absolute;
  z-index: 4;
  top: .8rem;
  right: .9rem;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  color: #73677a;
  background: rgba(255,255,255,.66);
  font: 300 1.4rem/1 var(--font-ui);
  cursor: pointer;
}
.preview-object {
  min-height: 430px;
  display: grid;
  place-items: center;
  padding: 2.5rem;
  background: radial-gradient(circle at 50% 46%, #fffdf3 0 25%, transparent 26%), linear-gradient(145deg, #e9e4f4, #f3dcd0);
}
.preview-object img { width: min(250px, 86%); max-height: 330px; object-fit: contain; filter: drop-shadow(0 20px 18px rgba(65,48,72,.18)); transform: rotate(-2deg); }
.preview-object .static-mark { width: 210px; height: 210px; color: rgba(70,74,112,.75); border-color: currentColor; transform: rotate(-7deg); }
.preview-object .static-mark b { max-width: 150px; font-size: 1.15rem; }
.preview-object .static-mark i { font-size: .82rem; }
.preview-copy { position: relative; padding: 3.3rem 2.6rem 2.6rem; }
.preview-copy::before { content: ""; position: absolute; top: 1.1rem; left: 34%; width: 76px; height: 20px; border-radius: 4px; background: rgba(229,181,137,.55); transform: rotate(-2deg); }
.preview-copy > span { color: #b77471; font: 650 .67rem/1 var(--font-ui); letter-spacing: .2em; }
.preview-copy h2 { margin: .8rem 0 1rem; color: #554d60; font-size: clamp(2rem, 4vw, 3rem); }
.preview-copy p { color: #706677; font: 400 .94rem/2 var(--font-story); }
.preview-copy small { display: block; width: fit-content; margin: 1.4rem 0; padding: .5rem .75rem; border-radius: 10px; color: #8b727b; background: #f5ddd2; }
.preview-copy > b { display: block; padding-top: 1.15rem; border-top: 1px solid rgba(111,91,111,.12); color: #9a7d84; font: 400 .76rem/1.8 var(--font-story); }

/* 写信：真实输入区是一张平整的 HTML 信纸，按钮也落在纸上 */
.write-sheet-v2 {
  left: 7.2%;
  top: 29%;
  width: 56%;
  height: 63%;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.8rem 1.2rem;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 20px 24px 18px 22px;
  background: linear-gradient(105deg, rgba(255,249,231,.98), rgba(250,235,207,.97));
  box-shadow: 0 24px 52px rgba(65,44,63,.20), inset 0 0 38px rgba(255,255,255,.34);
  transform: none;
  overflow: hidden;
}
.write-sheet-v2::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 17%;
  width: 74px;
  height: 20px;
  border-radius: 4px;
  background: rgba(226,176,131,.60);
  transform: rotate(-2deg);
}
.write-sheet-v2 textarea {
  flex: 1;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: .7rem 0 .55rem;
  padding: .2rem .15rem;
  border: 0;
  outline: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  word-break: break-word;
  overflow-wrap: anywhere;
  background: repeating-linear-gradient(180deg, transparent 0 calc(2em - 1px), rgba(163,124,111,.11) calc(2em - 1px) 2em);
}
.letter-sheet-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex: 0 0 auto; }
.letter-sheet-footer .letter-sign { order: 1; white-space: nowrap; }
.letter-sheet-footer .send-letter {
  position: static !important;
  order: 2;
  left: auto;
  bottom: auto;
  min-width: 148px;
  padding: .72em 1.1em;
  transform: none;
}
.letter-sheet-footer .send-letter:hover { transform: translateY(-2px); }
.writing-studio.is-sending .letter-sheet-footer .send-letter { transform: none; }

/* 岛名登记卡像从小岛画面底边抽出来 */
.island-name-form { z-index: 4; margin: -2.1rem auto 0; }
.island-page .island-signs { margin-top: 2.5rem; }

@media (max-width: 899px) {
  .home-storyboard .home-dock { width: calc(100% - 1rem); }
  .write-sheet-v2 { left: 5.5%; top: 31%; width: 59%; height: 61%; }
}

@media (max-width: 640px) {
  .home-storyboard { padding-top: .3rem; }
  .home-storyboard .home-dock { display: flex; flex-direction: column; width: 100%; margin-top: -1.5rem; }
  .home-storyboard .route-ticket { z-index: 2; width: 94%; }
  .home-storyboard .letter-tray { z-index: 3; width: 94%; margin: -1rem 0 0 auto; transform: rotate(.25deg); }
  .home-storyboard .post-office-note { width: 88%; margin-top: -.75rem; padding-top: 1.3rem; }

  .archive-stack { width: calc(100% - .4rem); margin-top: -1.5rem; padding-top: 3.5rem; }
  .archive-stack .bulletin { width: calc(100% - 1rem); text-align: center; white-space: normal; }
  .archive-stack .folder-tabs { margin-bottom: -.45rem; padding-left: .5rem; }
  .archive-stack .folder-body { padding-top: 1.5rem; }

  .collection-page .gallery-grid { width: calc(100% - .5rem); margin-top: -2rem; padding: 3rem .7rem .85rem; gap: .65rem; border-radius: 23px; }
  .collection-page button.gallery-card { min-height: 210px; padding-inline: .45rem; }
  .collection-page button.gallery-card img { width: 92px; }
  .collection-page button.gallery-card > i { display: none; }
  .postmark-hero picture img { object-position: 70% center; }

  .collection-preview[open] { grid-template-columns: 1fr; overflow-y: auto; }
  .preview-object { min-height: 280px; padding: 2rem; }
  .preview-object img { width: min(190px, 70%); max-height: 220px; }
  .preview-object .static-mark { width: 160px; height: 160px; }
  .preview-copy { padding: 2rem 1.45rem 2.2rem; }
  .preview-copy::before { display: none; }

  .writing-studio { min-height: 735px; overflow: hidden; }
  .writing-studio-art { height: 320px; }
  .writing-studio-art img { border-radius: 26px 26px 0 0; }
  .writing-studio::after { height: 320px; }
  .write-sheet-v2 {
    left: .8rem;
    right: .8rem;
    top: 275px;
    width: auto;
    height: 410px;
    padding: 1.3rem 1.15rem 1rem;
    border-radius: 20px 24px 18px 22px;
    transform: none;
  }
  .letter-sheet-footer { gap: .6rem; }
  .letter-sheet-footer .send-letter { min-width: 132px; font-size: .86rem; }
  .letter-sheet-footer .letter-sign { font-size: .66rem; }

  .island-name-form { width: calc(100% - 1rem); margin-top: -1.3rem; }
  .island-page .island-signs { margin-top: 2rem; }
}

/* ═══════════════════════════════════════════════════════════
   V10/V13 · 信件航行页：静态夜航插画 + 航行纪念笺
   不再用多张生成图模拟帧动画；未来的视频直接替换 picture。
   ═══════════════════════════════════════════════════════════ */

.voyage-still {
  position: relative;
  width: min(680px, 96%);
  aspect-ratio: 3 / 2;
  margin: 1.35rem auto .9rem;
  overflow: hidden;
  border: 1px solid rgba(255,248,229,.18);
  border-radius: 30px 38px 28px 34px;
  background: #26315e;
  box-shadow: 0 28px 66px rgba(20,19,51,.22), inset 0 0 0 1px rgba(255,255,255,.04);
}
.voyage-still picture,
.voyage-still img { display: block; width: 100%; height: 100%; }
.voyage-still img { object-fit: cover; object-position: center; }
.voyage-still::after {
  content: "";
  position: absolute;
  inset: 58% 0 0;
  background: linear-gradient(transparent, rgba(30,33,70,.48));
  pointer-events: none;
}
.voyage-still figcaption {
  position: absolute;
  z-index: 2;
  right: 1.2rem;
  bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .8rem;
  border: 1px solid rgba(255,248,229,.20);
  border-radius: 999px;
  color: rgba(255,248,229,.82);
  background: rgba(43,46,87,.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font: 500 .72rem/1.2 var(--font-ui);
}
.voyage-still figcaption i { width: 7px; height: 7px; border-radius: 50%; background: #9fc0a7; box-shadow: 0 0 0 4px rgba(159,192,167,.13); }

/* 桌面右栏：不是信息表，而是图片压住的航行纪念笺 */
.letter-mobile-meta { display: none; }
.letter-aside { gap: 1rem; }
.letter-aside .aside-bubble {
  width: calc(100% - 2.2rem);
  margin: 0 auto -.2rem;
  padding: .85rem 1rem 1.05rem;
  border: 1px solid rgba(255,248,229,.12);
  border-radius: 18px 22px 16px 20px;
  color: rgba(255,248,229,.70);
  background: rgba(255,248,229,.07);
  box-shadow: none;
}
.letter-aside .aside-bubble::after { background: #41416a; border: 0; }
.voyage-keepsake {
  position: relative;
  padding-top: 205px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 26px 32px 24px 29px;
  background: #fff1d9;
  box-shadow: 0 24px 52px rgba(18,18,47,.20);
  overflow: visible;
}
.voyage-keepsake::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 190px;
  left: 50%;
  width: 72px;
  height: 19px;
  border-radius: 4px;
  background: rgba(225,177,131,.68);
  transform: translateX(-50%) rotate(-2deg);
  box-shadow: 0 3px 7px rgba(86,60,76,.08);
}
.voyage-keepsake .aside-fig {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 228px;
  margin: 0;
  border-radius: 26px 32px 18px 18px;
  box-shadow: none;
  overflow: hidden;
}
.voyage-keepsake .aside-fig::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(38,39,72,.45)); }
.voyage-keepsake .aside-fig img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; border-radius: 0; box-shadow: none; }
.voyage-keepsake .aside-fig figcaption {
  position: absolute;
  z-index: 2;
  right: 1rem;
  bottom: 1rem;
  padding: .34rem .62rem;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  color: rgba(255,248,229,.82);
  background: rgba(47,49,90,.42);
  backdrop-filter: blur(9px);
  font: 500 .64rem/1 var(--font-ui);
}
.voyage-ledger { position: relative; z-index: 3; padding: 2rem 1.35rem 1.35rem; text-align: left; }
.voyage-ledger header { display: flex; justify-content: space-between; align-items: center; color: #b37872; font: 650 .58rem/1 var(--font-ui); letter-spacing: .16em; }
.voyage-ledger header b { font-size: .62rem; letter-spacing: .08em; }
.voyage-ledger h3 { margin: .75rem 0 1rem; color: #554d61; font: 500 1.42rem/1.35 var(--font-story); }
.route-thread { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem; color: #766b7b; font-size: .68rem; }
.route-thread span { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.route-thread span i { width: 8px; height: 8px; border: 2px solid #c88b81; border-radius: 50%; background: #fff5e5; }
.route-thread span:last-child i { border-color: #8eae99; background: #bcd2c2; }
.route-thread em { position: relative; height: 1px; border-top: 1px dashed #cfbbb0; }
.route-thread em::after { content: "›"; position: absolute; right: -1px; top: -10px; color: #b8877e; font-style: normal; }
.keepsake-route { margin: .7rem 0 1rem; padding-bottom: .9rem; border-bottom: 1px solid rgba(105,85,104,.10); color: #9b8995; font: 400 .68rem/1.65 var(--font-story); }
.keepsake-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.keepsake-facts > div { min-width: 0; padding: .8rem .75rem; border-radius: 13px 17px 12px 15px; background: rgba(235,226,244,.72); }
.keepsake-facts > div:nth-child(2) { background: rgba(247,218,204,.68); transform: translateY(3px) rotate(.2deg); }
.keepsake-facts small { display: block; color: #9c828c; font-size: .6rem; }
.keepsake-facts b { display: block; margin: .28rem 0 .18rem; overflow: hidden; color: #5b5366; font: 600 .78rem/1.25 var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.keepsake-facts span { display: block; color: #a092a0; font-size: .6rem; }
.arrival-strip { display: flex; align-items: center; gap: .55rem; margin-top: 1rem; padding: .72rem .75rem; border: 1px solid rgba(113,93,112,.08); border-radius: 12px; color: #7d7181; background: rgba(255,255,255,.48); font-size: .66rem; }
.arrival-strip i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #8fb09a; box-shadow: 0 0 0 4px rgba(143,176,154,.12); }
.keepsake-stamp { display: grid; grid-template-columns: 68px 1fr; align-items: center; gap: .8rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed rgba(109,86,105,.15); }
.keepsake-stamp img { width: 64px; display: block; filter: drop-shadow(0 6px 8px rgba(72,54,78,.15)); transform: rotate(-3deg); }
.keepsake-stamp p { min-width: 0; margin: 0; }
.keepsake-stamp small { display: block; color: #a17d82; font-size: .6rem; }
.keepsake-stamp b { display: block; margin-top: .3rem; color: #655a6c; font: 500 .68rem/1.5 var(--font-story); }

@media (min-width: 1080px) {
  .letter-grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 2.7rem; }
  .letter-aside { top: 5.2rem; margin-top: 2.5rem; }
}

@media (max-width: 1079px) {
  .letter-mobile-meta { display: flex; }
}

@media (max-width: 640px) {
  .voyage-still { width: 100%; aspect-ratio: 1 / 1; margin-top: .8rem; border-radius: 24px; }
  .voyage-still img { object-position: 66% center; }
  .voyage-still figcaption { right: .8rem; bottom: .8rem; font-size: .67rem; }
}

/* ═══════════════════════════════════════════════════════════
   V11 · 真正像信：更大字、更清楚的横线、独立邮资留白
   ═══════════════════════════════════════════════════════════ */

.letter-grid { max-width: 1260px; }
.letter-grid .sheet {
  color: #514451;
  font-size: clamp(1.12rem, 1.45vw, 1.24rem);
  line-height: 2.35;
  letter-spacing: .025em;
  background-color: #fff3d8;
  box-shadow: 0 26px 58px rgba(17,16,43,.23), inset 0 0 54px rgba(255,255,255,.28);
}
.letter-grid .sheet:not(.sheet-lined) {
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 calc(2.35em - 1.5px),
    rgba(135,101,94,.16) calc(2.35em - 1.5px) 2.35em
  );
  background-position: 0 .65em;
}
.letter-grid .sheet.reply-sheet {
  padding-top: 3.6rem !important;   /* v0.5.1：正文从信纸上部自然开始，不再预留邮资空带 */
  background-color: #fff2d6;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 calc(2.35em - 1.5px),
    rgba(135,101,94,.21) calc(2.35em - 1.5px) 2.35em
  );
  background-position: 0 .68em;
  background-origin: content-box;
}
.letter-grid .sheet.reply-sheet::before { content: none; }  /* 邮资空带取消 */
.letter-marks { position: static; pointer-events: none; }  /* 只作标记挂载点，不再占位 */
.letter-marks::before {
  content: "夜航邮资 · 邮邮邮局";
  position: absolute;
  top: 1.35rem;
  right: 7.6rem;
  z-index: 4;
  color: rgba(156,108,105,.58);
  font: 600 .58rem/1 var(--font-ui);
  letter-spacing: .12em;
}
.letter-marks .sheet-stamp {
  top: 1.05rem;
  right: 1.2rem;
  width: 80px;
  filter: drop-shadow(0 7px 9px rgba(78,57,76,.14));
  transform: rotate(3deg);
}
.letter-marks .postmark-img {
  top: auto;
  bottom: 4.4rem;          /* 信写完才盖戳：落在信纸右下角 */
  right: 1.8rem;
  width: 110px;
  opacity: .74;
  transform: rotate(-9deg);
}
.letter-marks .ink-postmark {
  top: auto;
  bottom: 4.6rem;
  right: 2rem;
  width: 102px;
  height: 102px;
  opacity: .72;
}
.wax-seal { margin-top: 1.1rem; }

/* 右侧航行笺：减少票据冷感，提升阅读字号与叙事温度 */
.letter-aside .aside-bubble {
  font-size: .96rem;
  line-height: 1.85;
  color: rgba(255,248,229,.76);
  background: rgba(255,242,218,.09);
}
.letter-aside .aside-bubble b { color: #ffe3ae; font-weight: 500; }
.voyage-ledger { padding: 2.15rem 1.55rem 1.55rem; }
.voyage-ledger header { color: #b06e6e; font-size: .7rem; letter-spacing: .1em; }
.voyage-ledger header b { color: #8d6e79; font-size: .72rem; }
.voyage-ledger h3 { margin: .85rem 0 1.15rem; font-size: 1.72rem; line-height: 1.35; }
.route-thread { gap: .65rem; font-size: .8rem; }
.route-thread span i { width: 9px; height: 9px; }
.keepsake-route { margin: .85rem 0 1.15rem; padding-bottom: 1rem; color: #8d7c89; font-size: .8rem; line-height: 1.8; }
.keepsake-facts { gap: .75rem; }
.keepsake-facts > div { min-height: 92px; padding: .9rem .85rem; }
.keepsake-facts small { color: #967984; font-size: .7rem; line-height: 1.4; }
.keepsake-facts b { margin: .38rem 0 .26rem; font-size: .92rem; }
.keepsake-facts span { color: #938593; font-size: .7rem; }
.arrival-strip { margin-top: 1.1rem; padding: .85rem; color: #706575; font-size: .76rem; line-height: 1.5; }
.keepsake-stamp { grid-template-columns: 78px 1fr; gap: .95rem; margin-top: 1.15rem; padding-top: 1.15rem; }
.keepsake-stamp img { width: 74px; }
.keepsake-stamp small { font-size: .7rem; line-height: 1.5; }
.keepsake-stamp b { margin-top: .36rem; font-size: .77rem; line-height: 1.65; }

@media (min-width: 1080px) {
  .letter-grid { grid-template-columns: minmax(0, 1fr) 370px; gap: 2.5rem; }
}

@media (max-width: 640px) {
  .letter-grid .sheet { font-size: 1.08rem; line-height: 2.25; }
  .letter-grid .sheet:not(.sheet-lined) {
    background-image: repeating-linear-gradient(180deg, transparent 0 calc(2.25em - 1.25px), rgba(135,101,94,.16) calc(2.25em - 1.25px) 2.25em);
  }
  .letter-grid .sheet.reply-sheet {
    padding-top: 6.4rem !important;   /* 手机窄幅：正文避开右上邮票即可 */
    background-image: repeating-linear-gradient(180deg, transparent 0 calc(2.25em - 1.25px), rgba(135,101,94,.20) calc(2.25em - 1.25px) 2.25em);
  }
  .letter-grid .sheet.reply-sheet::before { content: none; }
  .letter-marks .sheet-stamp { width: 72px; right: .9rem; }
  .letter-marks::before { right: 6.4rem; }
  .letter-marks .postmark-img { bottom: 4rem; right: 1rem; width: 92px; }
  .letter-marks .ink-postmark { bottom: 4.2rem; right: 1.2rem; width: 88px; height: 88px; }
}

/* ═══════════════════════════════════════════════════════════
   V12 · 一张图就是一个世界：全屏场景 + 上拉毛玻璃内容层
   大图不再是列表上方的横幅；它固定在后方，内容像信匣一样从
   画面底部抽出。毛玻璃只发生在内容覆盖区，保持首屏清晰沉浸。
   ═══════════════════════════════════════════════════════════ */

body.immersive-shell {
  overflow-x: clip;
  background: #292e58;
}
body.immersive-shell .nav {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
body.immersive-shell .wrap.wide {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  animation: none;
}
body.immersive-shell .foot-slogan,
body.immersive-shell .footer-note {
  position: relative;
  z-index: 20;
}

.immersive-page {
  position: relative;
  width: 100%;
  min-height: 150svh;
  isolation: isolate;
}
.immersive-stage,
.home-hero .immersive-home-stage.immersive-stage,
.collection-page .collection-hero.immersive-stage {
  position: sticky !important;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  isolation: isolate;
}
.immersive-stage > picture,
.immersive-stage > picture > img,
.immersive-stage > img,
.immersive-stage .hero-art,
.immersive-stage .hero-art picture,
.immersive-stage .hero-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.immersive-stage > picture > img,
.immersive-stage > img,
.immersive-stage .hero-art img {
  min-height: 100% !important;
  max-height: none !important;
  object-fit: cover;
}

/* 首屏只留下一个非常轻的上拉暗示，不做教程浮窗。 */
.immersive-scroll-cue,
.collection-hero > .immersive-scroll-cue,
.help-hero > .immersive-scroll-cue,
.settings-hero > .immersive-scroll-cue {
  position: absolute !important;
  z-index: 9;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 13svh !important;
  width: auto !important;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  margin: 0 !important;
  padding: .55rem 1rem !important;
  color: rgba(255,249,232,.82);
  border: 1px solid rgba(255,249,232,.18);
  border-radius: 999px;
  background: rgba(42,43,83,.24);
  font: 500 .72rem/1.2 var(--font-ui);
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 2px 12px rgba(25,24,54,.28);
  transform: translateX(-50%) !important;
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  pointer-events: none;
}
.immersive-scroll-cue i {
  position: absolute;
  top: calc(100% + .5rem);
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  animation: immersive-cue 1.8s ease-in-out infinite;
}
.immersive-scroll-cue.dark-ink {
  color: rgba(77,69,90,.78);
  border-color: rgba(95,78,94,.14);
  background: rgba(255,247,226,.34);
  text-shadow: none;
}

/* 上拉后，整块内容就是一层夜雾玻璃；后方插画仍然留在原位。 */
.immersive-content {
  position: relative;
  z-index: 12;
  width: min(1280px, calc(100% - 3rem));
  min-height: 68svh;
  margin: -10svh auto 0;
  padding: clamp(4.8rem, 7vw, 6.5rem) clamp(1.4rem, 4vw, 3.8rem) 4.5rem;
  overflow: visible;
  border: 1px solid rgba(255,249,232,.20);
  border-bottom: 0;
  border-radius: 44px 44px 0 0;
  background:
    linear-gradient(180deg, rgba(61,63,112,.48) 0, rgba(48,52,96,.82) 13rem, rgba(41,46,86,.97) 36rem),
    rgba(43,48,91,.68);
  box-shadow: 0 -28px 72px rgba(25,24,58,.18), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(30px) saturate(1.18);
  -webkit-backdrop-filter: blur(30px) saturate(1.18);
}
.immersive-content::before {
  content: "";
  position: absolute;
  top: 1.15rem;
  left: 50%;
  width: 46px;
  height: 5px;
  border-radius: 99px;
  background: rgba(255,248,229,.34);
  transform: translateX(-50%);
  box-shadow: 0 1px 0 rgba(30,28,65,.12);
}

/* 每种场景只决定文案落点，滚动与玻璃行为完全共用。 */
.immersive-stage.collection-hero > div:not(.immersive-scroll-cue),
.immersive-stage.help-hero > div:not(.immersive-scroll-cue),
.immersive-stage.settings-hero > div:not(.immersive-scroll-cue),
.immersive-stage .stamp-copy,
.immersive-stage .journey-copy {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: clamp(2.5rem, 7vw, 7rem);
  bottom: auto;
  width: min(500px, 42%);
  padding: 0;
  transform: translateY(-50%);
}
.immersive-stage.mail-hero .cap {
  right: clamp(2.5rem, 8vw, 8rem);
  width: min(430px, 36%);
}
.immersive-stage.island-hero .island-title {
  left: clamp(2.5rem, 7vw, 7rem);
  width: min(480px, 42%);
}
.immersive-stage.settings-hero > div:not(.immersive-scroll-cue) { width: min(470px, 40%); }
.immersive-stage .hero-copy { padding-top: clamp(8rem, 16vh, 11rem); }
.immersive-stage .hero-art figcaption { bottom: 17svh; }

/* 内容内的实体纸张仍保留触感，但不再与首图分成两个世界。 */
.immersive-home-content.home-storyboard { z-index: 12; padding-bottom: 4.5rem; }
.immersive-home-content .home-dock { margin: 0 auto; }
.immersive-home-content .post-office-note { margin-bottom: 0; }
.archive-surface.archive-stack { width: min(1120px, calc(100% - 3rem)); margin-top: -10svh; padding-top: 6.5rem; }
.archive-surface .bulletin { top: 2rem; }
.archive-surface .folder-body { width: 100%; }
.collection-surface .gallery-grid,
.collection-page .collection-surface .gallery-grid {
  width: 100%;
  margin: 0;
}
.collection-surface .scene-foot { margin-bottom: 0; }
.island-surface .island-name-form { margin: 0 auto 2.4rem; }
.island-surface .island-signs { margin-top: 0; }
.help-surface .hotline-panel,
.settings-surface .settings-grid { margin-top: 0; }
.posted-surface .voyage-ticket { margin-top: 0; }
.posted-surface,
.stamp-surface { text-align: center; }
.stamp-surface { min-height: 48svh; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .immersive-content { background: rgba(43,48,91,.96); }
  .immersive-scroll-cue { background: rgba(42,43,83,.72); }
}

@keyframes immersive-cue {
  0%, 100% { opacity: .38; translate: 0 -2px; }
  50% { opacity: 1; translate: 0 4px; }
}

@media (max-width: 899px) {
  .immersive-content,
  .archive-surface.archive-stack {
    width: calc(100% - 1.4rem);
    margin-top: -11svh;
    padding: 4.8rem 1.4rem 3.6rem;
    border-radius: 34px 34px 0 0;
  }
  .archive-surface.archive-stack { padding-top: 6.2rem; }
  .immersive-stage .hero-copy { padding-top: 0; }
}

@media (max-width: 640px) {
  body.immersive-shell .nav { width: calc(100% - .7rem); }
  .immersive-page { min-height: 160svh; }
  .immersive-stage,
  .home-hero .immersive-home-stage.immersive-stage,
  .collection-page .collection-hero.immersive-stage {
    height: 100svh;
    min-height: 100svh;
    border-radius: 0 !important;
  }
  .immersive-content,
  .archive-surface.archive-stack {
    width: calc(100% - .7rem);
    min-height: 72svh;
    margin-top: -10svh;
    padding: 4.1rem .8rem 3.4rem;
    border-radius: 28px 28px 0 0;
    backdrop-filter: blur(22px) saturate(1.12);
    -webkit-backdrop-filter: blur(22px) saturate(1.12);
  }
  .archive-surface.archive-stack { padding-top: 6.3rem; }
  .immersive-scroll-cue,
  .collection-hero > .immersive-scroll-cue,
  .help-hero > .immersive-scroll-cue,
  .settings-hero > .immersive-scroll-cue {
    bottom: 14svh !important;
    max-width: calc(100% - 3rem);
    font-size: .68rem;
  }
  .home-hero .hero-copy,
  .immersive-stage.collection-hero > div:not(.immersive-scroll-cue),
  .immersive-stage.help-hero > div:not(.immersive-scroll-cue),
  .immersive-stage.settings-hero > div:not(.immersive-scroll-cue),
  .immersive-stage .stamp-copy,
  .immersive-stage .journey-copy,
  .immersive-stage.mail-hero .cap,
  .immersive-stage.island-hero .island-title {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    top: auto;
    bottom: 20svh;
    width: auto;
    padding: 0;
    transform: none;
  }
  .home-hero .hero-copy { bottom: 18svh; }
  .immersive-stage.mail-hero .cap { bottom: 19svh; }
  .immersive-stage.help-hero > div:not(.immersive-scroll-cue) { bottom: 22svh; }
  .immersive-stage .hero-art img { height: 100%; object-position: 67% center; }
  .immersive-home-content.home-storyboard { padding-inline: .55rem; }
  .collection-page .collection-surface .gallery-grid { width: 100%; margin: 0; }
  .island-surface .island-name-form { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .immersive-scroll-cue i { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   V14 · 岛屿纪念簿：文字先讲故事，再显示数字
   ═══════════════════════════════════════════════════════════ */

.island-keepsakes {
  width: min(1040px, 100%);
  margin: 0 auto 2.3rem;
}
.island-keepsake-heading {
  position: relative;
  max-width: 650px;
  margin: 0 auto 2.2rem;
  text-align: center;
}
.island-keepsake-heading::after {
  content: "";
  display: block;
  width: 52px;
  height: 1px;
  margin: 1.15rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(246,199,127,.85), transparent);
}
.island-keepsake-heading .soft-kicker {
  color: #efc886;
  font-size: .65rem;
  letter-spacing: .24em;
}
.island-keepsake-heading h2 {
  margin: .55rem 0 .65rem;
  color: #fff2d8;
  font: 500 clamp(1.85rem, 3.2vw, 2.5rem)/1.35 var(--font-story);
  letter-spacing: .08em;
  text-shadow: 0 4px 24px rgba(21,20,52,.18);
}
.island-keepsake-heading p {
  color: rgba(255,248,229,.64);
  font: 400 .95rem/1.9 var(--font-story);
  letter-spacing: .025em;
}

.island-surface .island-signs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  margin: 0;
  border: 0;
}
.island-surface .island-signs .stat-card {
  position: relative;
  min-height: 226px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 1.35rem 1.3rem 1.2rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.58) !important;
  border-radius: 26px 20px 28px 22px;
  color: #5e5268;
  background: #fff0d9;
  box-shadow: 0 18px 42px rgba(24,22,58,.15), inset 0 0 34px rgba(255,255,255,.30);
  transform: rotate(-.35deg);
  transition: transform .25s ease, box-shadow .25s ease;
}
.island-surface .island-signs .stat-card::before {
  content: "";
  position: absolute;
  inset: .65rem;
  border: 1px dashed rgba(150,106,110,.13);
  border-radius: 20px 15px 22px 17px;
  pointer-events: none;
}
.island-surface .island-signs .stat-card::after {
  content: "";
  position: absolute;
  right: -26px;
  bottom: -30px;
  width: 100px;
  height: 100px;
  border: 1px solid rgba(174,114,113,.10);
  border-radius: 50%;
  box-shadow: inset 0 0 0 7px rgba(174,114,113,.035);
  pointer-events: none;
}
.island-surface .island-signs .stat-card:nth-child(even) {
  background: #f0ebf8;
  transform: translateY(7px) rotate(.25deg);
}
.island-surface .island-signs .stat-card:nth-child(3) { background: #f9e5d9; }
.island-surface .island-signs .stat-card:nth-child(4) { background: #e9eff0; }
.island-surface .island-signs .stat-card:hover {
  transform: translateY(-4px) rotate(-.2deg);
  box-shadow: 0 24px 52px rgba(24,22,58,.19), inset 0 0 34px rgba(255,255,255,.34);
}
.island-signs .stat-mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: .9rem;
  border: 1px solid rgba(174,106,106,.22);
  border-radius: 50%;
  color: #b36f72;
  background: rgba(255,255,255,.38);
  font: 500 1rem/1 var(--font-story);
}
.island-signs .stat-card > small {
  position: relative;
  z-index: 1;
  color: #8b7886;
  font: 650 .8rem/1.35 var(--font-ui);
  letter-spacing: .12em;
}
.island-signs .stat-value {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: .4rem 0 .7rem;
  line-height: 1;
}
.island-signs .stat-value b {
  margin: 0;
  color: #ad676b;
  font: 500 clamp(2.9rem, 4.2vw, 3.65rem)/.95 var(--font-story);
  letter-spacing: -.04em;
}
.island-signs .stat-value span {
  color: #6f6475;
  font: 500 .82rem/1 var(--font-ui);
  letter-spacing: .04em;
}
.island-signs .stat-card > em {
  position: relative;
  z-index: 1;
  margin-top: auto;
  color: #887985;
  font: normal .8rem/1.55 var(--font-story);
  letter-spacing: .02em;
}
.island-signs .stat-card > em::before {
  content: "—";
  margin-right: .35em;
  color: rgba(179,111,114,.72);
}

.milestone-note {
  position: relative;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 74px;
  align-items: center;
  gap: 1.4rem;
  width: min(880px, calc(100% - 2rem));
  margin: 2rem auto 0;
  padding: 1.2rem 1.4rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 24px 31px 22px 28px;
  color: #5c5268;
  background: linear-gradient(105deg, rgba(255,242,218,.97), rgba(244,229,235,.96));
  box-shadow: 0 20px 46px rgba(22,20,55,.16), inset 0 0 36px rgba(255,255,255,.28);
  text-align: left;
  transform: rotate(-.12deg);
}
.milestone-note::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 31%;
  width: 74px;
  height: 20px;
  border-radius: 3px;
  background: rgba(225,175,131,.58);
  transform: rotate(-2deg);
}
.milestone-stamp {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  display: grid;
  grid-template-columns: auto auto auto;
  place-content: center;
  align-items: baseline;
  gap: .18rem;
  border: 2px solid rgba(178,101,104,.50);
  border-radius: 50%;
  color: #a35f64;
  box-shadow: inset 0 0 0 5px rgba(178,101,104,.055);
  transform: rotate(-7deg);
}
.milestone-stamp::after {
  content: "纪念章";
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  font: 600 .48rem/1 var(--font-ui);
  letter-spacing: .18em;
  white-space: nowrap;
}
.milestone-stamp span,
.milestone-stamp small { font: 500 .58rem/1 var(--font-story); }
.milestone-stamp b { font: 500 1.65rem/1 var(--font-story); }
.milestone-copy { position: relative; z-index: 1; min-width: 0; }
.milestone-copy > span {
  color: #b07878;
  font: 650 .58rem/1 var(--font-ui);
  letter-spacing: .18em;
}
.milestone-copy h3 {
  margin: .45rem 0 .35rem;
  color: #5a5065;
  font: 500 1.18rem/1.45 var(--font-story);
  letter-spacing: .03em;
}
.milestone-copy h3 strong {
  display: inline-block;
  margin: 0 .08em;
  color: #a65e63;
  font-size: 1.28em;
  font-weight: 500;
  line-height: .8;
}
.milestone-copy p {
  color: #897b88;
  font: 400 .84rem/1.75 var(--font-story);
}
.milestone-postmark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 1px dashed rgba(91,91,137,.32);
  border-radius: 50%;
  color: rgba(91,91,137,.60);
  font: 500 .62rem/1.45 var(--font-story);
  letter-spacing: .08em;
  text-align: center;
  transform: rotate(8deg);
}

.island-surface > .actions { margin-top: 2.2rem; }

@media (max-width: 760px) {
  .island-keepsake-heading { margin-bottom: 1.5rem; padding: 0 .7rem; }
  .island-keepsake-heading h2 { font-size: 1.9rem; }
  .island-keepsake-heading p { font-size: .88rem; }
  .island-surface .island-signs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .island-surface .island-signs .stat-card { min-height: 202px; padding: 1.15rem 1rem 1rem; }
  .island-signs .stat-value b { font-size: 2.9rem; }
  .milestone-note {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 1rem;
    width: 100%;
    padding: 1rem;
    border-radius: 22px;
  }
  .milestone-stamp { width: 72px; height: 72px; }
  .milestone-stamp::after { bottom: 8px; font-size: .42rem; }
  .milestone-stamp b { font-size: 1.35rem; }
  .milestone-postmark { display: none; }
  .milestone-copy h3 { font-size: 1rem; }
  .milestone-copy p { font-size: .78rem; }
}

/* 测试通道按钮：明确可见（对外灰度前整个功能关闭） */
.debug-expedite { display: inline-block; margin-top: 1rem; }
.debug-expedite button { background: rgba(24,31,54,.75); color: #ecd9a8; cursor: pointer;
  border: 1px dashed rgba(201,168,106,.7); border-radius: 999px; padding: .5em 1.5em;
  font: inherit; font-size: .92rem; letter-spacing: .05em; }
.debug-expedite button:hover { border-style: solid; color: #fff; }


/* ── v0.5.1 信纸版式修订 ── */
/* AI显式标识：贴在信纸下沿之外（合规落款区），不进入信纸世界 */
.ai-caption { text-align: center; font-size: .72rem; color: var(--cream-faint);
  letter-spacing: .06em; margin: .5rem auto 0; }
/* 邮戳移到信纸右下角（盖在信写完之后，符合真实邮政动线）；邮票留在右上 */
.reply-sheet .postmark-img { top: auto !important; bottom: 4.6rem; right: 1.8rem;
  transform: rotate(-10deg); }
@media (max-width: 560px) { .reply-sheet .postmark-img { bottom: 4.2rem; right: 1rem; width: 92px; } }
/* 夜路卡片：这封信的专属照看瞬间 */
.care-moment { display: flex; gap: .5em; align-items: baseline; text-align: left;
  font-size: .88rem; line-height: 1.8; color: #6a5a3a; margin: .5rem 0 0;
  padding: .55em .8em; background: rgba(120, 90, 40, .07); border-radius: 8px; }
.care-moment i { font-style: normal; flex: none; }

/* ═══════════════════════════════════════════════════════════
   V13 · 活着的夜 —— 氛围层
   世界在呼吸（雾漂移/月光呼吸/流星），天气看得见（雨雪入页），
   读信是仪式（逐句显影→邮戳盖下→火漆落印），页面间丝滑转场。
   ═══════════════════════════════════════════════════════════ */

/* —— 页面转场（Chrome 126+ 渐进增强，其余浏览器无感回落）—— */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .22s ease both; }
::view-transition-new(root) { animation: vt-in .3s ease both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* —— 呼吸的世界 —— */
.moon { animation: moon-breath 9s ease-in-out infinite; }
@keyframes moon-breath {
  0%, 100% { box-shadow: 0 0 24px rgba(242,232,201,.35); }
  50% { box-shadow: 0 0 44px rgba(242,232,201,.6), 0 0 90px rgba(242,232,201,.18); }
}
.sky::after { animation: sky-glow 14s ease-in-out infinite alternate; }
@keyframes sky-glow { from { opacity: .75; } to { opacity: 1.1; } }

/* 漂移的海雾：两层错速平移，风夜/雾夜由 body 类加强 */
body::before {
  content: ""; position: fixed; inset: -20% -60%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 30% at 24% 76%, rgba(170,180,230,.075), transparent 70%),
    radial-gradient(50% 34% at 78% 82%, rgba(150,160,220,.06), transparent 70%);
  animation: mist-drift 90s linear infinite alternate;
}
@keyframes mist-drift { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
body.wx-foggy::before { opacity: 2.2; animation-duration: 60s; }
body.wx-breezy::before { animation-duration: 34s; }
body.wx-storming::before { animation-duration: 22s; opacity: 1.6; }

/* 夜色晕影：四角轻压，聚焦中央 */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 42%, transparent 62%, rgba(8,10,26,.32));
}

/* —— 流星 —— */
.shooting-star {
  position: fixed; z-index: 1; width: 110px; height: 1.5px; pointer-events: none;
  background: linear-gradient(90deg, rgba(250,245,233,.95), transparent);
  border-radius: 999px; transform: rotate(24deg);
  animation: star-shoot 1.5s ease-out forwards;
}
@keyframes star-shoot {
  from { opacity: 0; transform: rotate(24deg) translateX(0); }
  12% { opacity: 1; }
  to { opacity: 0; transform: rotate(24deg) translateX(46vw); }
}

/* —— 天气入页 —— */
.wx-layer { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.wx-layer i { position: absolute; top: -12vh; display: block; }
.wx-drop {
  width: 1px; height: 11vh;
  background: linear-gradient(180deg, transparent, rgba(190,205,255,.6));
  animation: wx-rain linear infinite;
}
@keyframes wx-rain { to { transform: translateY(124vh); } }
.wx-flake {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(250,248,240,.85); filter: blur(.4px);
  animation: wx-snow linear infinite;
}
@keyframes wx-snow {
  to { transform: translateY(120vh) translateX(6vw) rotate(360deg); }
}

/* —— 读信仪式 —— */
.reply-sheet.ceremony .ink { opacity: 0; }
.reply-sheet.ceremony.go .ink {
  animation: ink-in .8s ease both;
  animation-delay: calc(min(var(--i) * .34s, 3.2s));
}
@keyframes ink-in { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: none; } }
/* 邮票先在，邮戳在读完时盖下，火漆最后落印 */
.reply-sheet.ceremony .postmark-img, .reply-sheet.ceremony .ink-postmark,
.reply-sheet.ceremony .wax-seal img { opacity: 0; }
.reply-sheet.ceremony.go .postmark-img, .reply-sheet.ceremony.go .ink-postmark {
  animation: stamp-press .55s cubic-bezier(.2, 1.6, .4, 1) 3.6s both;
}
.reply-sheet.ceremony.go .wax-seal img {
  animation: wax-press .6s cubic-bezier(.2, 1.5, .4, 1) 4.3s both;
}
@keyframes stamp-press {
  from { opacity: 0; transform: rotate(-9deg) scale(1.7); }
  60% { opacity: .95; transform: rotate(-9deg) scale(.94); }
  to { opacity: .74; transform: rotate(-9deg) scale(1); }
}
@keyframes wax-press {
  from { opacity: 0; transform: scale(1.5); }
  55% { opacity: 1; transform: scale(.9) rotate(-2deg); }
  to { opacity: 1; transform: scale(1); }
}

/* —— 插画视差的平滑过渡 —— */
.hero-art img, .aside-fig img, .immersive-stage > picture img {
  transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); will-change: transform;
}

/* —— 微交互 —— */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 62%);
  transform: translateX(-120%);
}
.btn:hover::after { transition: transform .7s ease; transform: translateX(120%); }
.actions form button.btn.ghost:active { transform: scale(1.15); transition: transform .12s; }
.list-card, .reply-strip a { view-transition-name: none; }

/* 收藏册清单入场：前十张信轻微错峰浮现 */
.folder-body .list-card { animation: rise .5s ease both; }
.folder-body .list-card:nth-child(2) { animation-delay: .05s; }
.folder-body .list-card:nth-child(3) { animation-delay: .1s; }
.folder-body .list-card:nth-child(4) { animation-delay: .15s; }
.folder-body .list-card:nth-child(5) { animation-delay: .2s; }
.folder-body .list-card:nth-child(n+6) { animation-delay: .25s; }

/* —— 写信专注模式：落笔时，世界退后一步 —— */
.write-page:focus-within .writing-studio-art,
.write-page:focus-within .page-heading, .write-page:focus-within .letter-starters {
  opacity: .45; filter: saturate(.75); transition: opacity .6s ease, filter .6s ease;
}
.write-page .writing-studio-art, .write-page .page-heading, .write-page .letter-starters {
  transition: opacity .6s ease, filter .6s ease;
}
.write-sheet-v2:focus-within {
  box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 90px rgba(232,169,75,.16);
  transition: box-shadow .6s ease;
}

/* —— 动效尊重 —— */
@media (prefers-reduced-motion: reduce) {
  body::before, .moon, .sky::after, .btn::after { animation: none !important; transition: none !important; }
  .reply-sheet.ceremony .ink, .reply-sheet.ceremony .postmark-img,
  .reply-sheet.ceremony .ink-postmark, .reply-sheet.ceremony .wax-seal img { opacity: 1 !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   V14 · 细节修缮 —— 按三镜头评审的七处返工
   ═══════════════════════════════════════════════════════════ */

/* ① 首页票据不再互相挤压：干净双栏，去掉引发重叠的位移与负边距 */
.home-dock {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem);
  margin: 1.2rem auto 0;
  width: calc(100% - clamp(1rem, 5vw, 5rem));
}
.letter-tray { transform: rotate(.2deg); }        /* 只留呼吸感的微旋转，去掉纵向位移 */
.route-ticket { transform: rotate(-.25deg); }
.post-office-note { margin-top: 1.8rem; transform: none; font-size: .88rem; }
.post-office-note p { line-height: 1.8; }

/* ② 收藏册 · 时间线：一条航迹，信是挂在时间上的站点 */
.timeline { position: relative; text-align: left; padding: .6rem 0 1rem; }
.timeline::before {
  content: ""; position: absolute; left: 96px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(201,168,106,.4) 6%, rgba(201,168,106,.4) 94%, transparent);
}
.tl-month-head { display: flex; align-items: baseline; gap: .6rem; margin: 1.6rem 0 .6rem;
  padding-left: 66px; position: relative; }
.tl-month-head i { position: absolute; left: 90px; top: .32em; width: 14px; height: 14px;
  border-radius: 50%; background: var(--night-2); border: 2px solid rgba(201,168,106,.8);
  box-shadow: 0 0 0 4px rgba(201,168,106,.15); }
.tl-month-head b { margin-left: 52px; font: 600 1.02rem/1 var(--font-hand); color: #4f485d;
  letter-spacing: .08em; }
.tl-month-head span { color: #9a8f7c; font-size: .8rem; }
.tl-item { display: grid; grid-template-columns: 88px 30px 1fr; align-items: center;
  text-decoration: none; color: inherit; margin: .55rem 0; position: relative; }
.tl-time { text-align: right; color: #857a68; font-size: .86rem; font-weight: 600;
  letter-spacing: .03em; line-height: 1.3; }
.tl-time small { display: block; font-weight: 400; color: #a99e88; font-size: .74rem; }
.tl-node { justify-self: center; width: 10px; height: 10px; border-radius: 50%;
  background: #cbbfa6; transition: transform .2s ease, box-shadow .2s ease; }
.tl-item.unread .tl-node { background: var(--warm);
  box-shadow: 0 0 0 5px rgba(232,169,75,.22); animation: badge-pulse 2s ease-in-out infinite; }
.tl-card { position: relative; background: #fffdf4; border: 1px solid #e8dcbd;
  border-radius: 14px; padding: .85rem 5.4rem .85rem 1.05rem; margin-left: .4rem;
  box-shadow: 0 3px 12px rgba(90,70,40,.10); transition: transform .18s ease, box-shadow .18s ease; }
.tl-item:hover .tl-card { transform: translateX(4px); box-shadow: 0 8px 22px rgba(90,70,40,.18); }
.tl-item:hover .tl-node { transform: scale(1.35); }
.tl-card b { display: block; font: 400 1.04rem/1.65 var(--font-hand); color: #3a3226; }
.tl-state { display: block; margin-top: .2em; font-size: .8rem; color: #8a7a58; }
.tl-state.glow { color: var(--warm-2); font-weight: 600; }
.tl-stamp { position: absolute; right: .85rem; top: 50%; width: 54px;
  transform: translateY(-50%) rotate(4deg); border: 3px solid #fff;
  box-shadow: 0 3px 9px rgba(0,0,0,.22); }
.tl-stamp-slot { position: absolute; right: 1.3rem; top: 50%; transform: translateY(-50%);
  width: 44px; height: 52px; border: 1.5px dashed #d8c9a4; border-radius: 6px;
  display: grid; place-items: center; color: #cbbfa6; font-size: 1rem; }
.tl-item.unread .tl-card { border-color: rgba(232,169,75,.6);
  box-shadow: 0 0 0 1px rgba(232,169,75,.35), 0 3px 12px rgba(90,70,40,.10); }
@media (max-width: 640px) {
  .timeline::before { left: 64px; }
  .tl-month-head { padding-left: 40px; } .tl-month-head i { left: 58px; }
  .tl-month-head b { margin-left: 46px; }
  .tl-item { grid-template-columns: 56px 30px 1fr; }
  .tl-time { font-size: .78rem; } .tl-card { padding-right: 4.6rem; }
  .tl-stamp { width: 46px; }
}

/* ③ 图鉴预览：沿用 v3 版式，只加入场动画（此前的覆盖样式与 v3 冲突已撤销） */
.collection-preview[open] { animation: preview-in .38s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes preview-in { from { opacity: 0; transform: translateY(24px) scale(.95); } }
.collection-preview[open] .preview-object img {
  animation: preview-tilt .6s cubic-bezier(.2,1.4,.4,1) both .08s; }
@keyframes preview-tilt { from { transform: rotate(-14deg) scale(.82); opacity: 0; }
  to { transform: rotate(-2deg) scale(1); opacity: 1; } }

/* ④ 岛屿航图：地理第一次被说清楚 */
.island-chart { margin-top: 2.4rem; }
.map-stage { position: relative; width: min(560px, 94%); margin: 1.2rem auto 0; }
.map-stage > picture img { width: 100%; display: block; border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 60px rgba(232,169,75,.1); }
.map-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  text-decoration: none; z-index: 2; }
.map-pin i { width: 14px; height: 14px; border-radius: 50%;
  background: var(--warm); border: 2.5px solid #fff8e8;
  box-shadow: 0 0 0 5px rgba(232,169,75,.25), 0 3px 8px rgba(0,0,0,.5);
  animation: pin-pulse 2.6s ease-in-out infinite; }
@keyframes pin-pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(232,169,75,.22), 0 3px 8px rgba(0,0,0,.5); }
  50% { box-shadow: 0 0 0 9px rgba(232,169,75,.10), 0 3px 8px rgba(0,0,0,.5); } }
.map-pin span { background: rgba(20,26,48,.88); border: 1px solid rgba(201,168,106,.5);
  border-radius: 10px; padding: .4em .8em; text-align: center; backdrop-filter: blur(4px);
  transition: transform .2s ease, border-color .2s ease; }
.map-pin b { display: block; color: #f3e6c4; font: 600 .92rem/1.4 var(--font-hand); letter-spacing: .06em; }
.map-pin small { display: none; color: rgba(243,230,196,.75); font-size: .74rem; line-height: 1.5; }
.map-pin:hover span { transform: translateY(-3px); border-color: var(--gold); }
.map-pin:hover small { display: block; }
.chart-caption { width: min(560px, 94%); margin: 1rem auto 0; color: var(--cream-dim);
  font-size: .92rem; line-height: 2; }
.chart-caption b { color: #ecd9a8; font-weight: 600; }
@media (max-width: 640px) { .map-pin small { display: block; } .map-pin b { font-size: .82rem; }
  .map-pin small { font-size: .66rem; } }

/* 我的岛文字可读性：字号与对比整体上调 */
.island-signs small { font-size: .8rem; color: #7d6c76; letter-spacing: .04em; }
.island-signs span { font-size: .92rem; color: #5f5468; }
.island-signs em { font-size: .82rem; }
.island-keepsake-heading p { font-size: .95rem; color: var(--cream-dim); }

/* ⑥ 今夜航程票 v2：读得清的三步 */
.voyage-ticket.v2 { transform: none; padding: 1.5rem 1.7rem 1.3rem; }
.ticket-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: 1.1rem; }
.ticket-head b { font: 600 1.15rem/1 var(--font-hand); color: #4f485d; letter-spacing: .12em; }
.ticket-head span { font-size: .72rem; letter-spacing: .25em; color: #b39a8c; }
.voyage-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .6rem; margin: 0; padding: 0; }
.voyage-steps li { position: relative; text-align: center; padding-top: 2px; }
.voyage-steps li i { display: grid; place-items: center; width: 46px; height: 46px;
  margin: 0 auto .5rem; border-radius: 50%; font-size: 1.25rem; font-style: normal;
  background: #f4e8cf; border: 2px solid #ddc9a2; color: #8a7a58; }
.voyage-steps li:not(:first-child)::before { content: ""; position: absolute;
  top: 24px; right: calc(50% + 32px); left: calc(-50% + 32px); height: 2px;
  border-top: 2px dashed #dcc9a6; }
.voyage-steps li b { display: block; font-size: .96rem; font-weight: 650; color: #4f485d; line-height: 1.5; }
.voyage-steps li small { display: block; margin-top: .15em; font-size: .8rem; color: #9a8b76; }
.voyage-steps li.done i { background: #e5efe2; border-color: #9dba9a; color: #5c8b62; }
.voyage-steps li.next i { border-color: #d28c7e; background: #fbe9dd;
  box-shadow: 0 0 0 6px rgba(210,140,126,.14); animation: voyage-dot 2.4s ease-in-out infinite; }
.ticket-note { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px dashed rgba(120,90,60,.22);
  font-size: .9rem; color: #85786a; line-height: 1.8; }
@media (max-width: 620px) {
  .voyage-steps { grid-template-columns: 1fr; gap: 1rem; justify-items: start; }
  .voyage-steps li { display: grid; grid-template-columns: 46px 1fr; gap: .8rem;
    text-align: left; align-items: center; width: 100%; }
  .voyage-steps li i { margin: 0; }
  .voyage-steps li:not(:first-child)::before { top: -12px; left: 22px; right: auto;
    width: 2px; height: 12px; border-top: 0; border-left: 2px dashed #dcc9a6; }
}

/* ⑤ 寄出仪式：信纸折进信封 → 火漆落印 → 飞向夜色 */
.send-fx { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  /* 不用 backdrop-filter：全屏毛玻璃在无GPU加速的设备上每帧重算，会饿死任务队列 */
  background: rgba(13,16,36,.82); animation: fadein .3s ease both; }
@keyframes fadein { from { opacity: 0; } }
.fx-stage { position: relative; width: 250px; height: 240px; }
.fx-paper { position: absolute; left: 50%; top: 8%; transform: translateX(-50%);
  width: 150px; height: 118px; background: #fbf5e4; border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,.4); padding: 16px 14px;
  transition: transform .7s cubic-bezier(.5,0,.3,1), opacity .5s ease .35s; }
.fx-paper i { display: block; height: 2px; background: rgba(90,70,40,.28);
  border-radius: 2px; margin: 14px 0; }
.fx-paper i:nth-child(2) { width: 82%; }
.fx-paper i:nth-child(3) { width: 60%; }
.fx-env { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%);
  width: 180px; height: 112px; }
.fx-front { position: absolute; inset: 0; background: #efe5cb; border-radius: 8px;
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
  clip-path: polygon(0 0, 50% 42%, 100% 0, 100% 100%, 0 100%); }
.fx-flap { position: absolute; inset: 0 0 auto; height: 54px; background: #e5d8b8;
  clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center;
  transform: rotateX(180deg); transition: transform .45s ease .55s; z-index: 2; }
.fx-seal { position: absolute; left: 50%; top: 42%; z-index: 3; width: 54px;
  transform: translate(-50%,-50%) scale(2.2); opacity: 0;
  transition: transform .4s cubic-bezier(.2,1.5,.4,1), opacity .3s ease; }
.fx-word { position: absolute; left: 50%; bottom: -14%; transform: translateX(-50%);
  white-space: nowrap; color: #f3e6c4; font: 600 1.05rem/1 var(--font-hand);
  letter-spacing: .2em; opacity: 0; transition: opacity .4s ease .2s; }
/* 阶段一：信纸滑入信封 */
.send-fx.fx-fold .fx-paper { transform: translateX(-50%) translateY(96px) scale(.62); opacity: 0; }
.send-fx.fx-fold .fx-flap { transform: rotateX(0); }
/* 阶段二：火漆落印 */
.send-fx.fx-sealed .fx-seal { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.send-fx.fx-sealed .fx-word { opacity: 1; }
/* 阶段三：飞向夜色 */
.send-fx.fx-away .fx-env { transition: transform .75s cubic-bezier(.5,-.1,.7,.4), opacity .6s ease .15s;
  transform: translateX(60px) translateY(-190px) rotate(14deg) scale(.4); opacity: 0; }
.send-fx.fx-away .fx-word { opacity: 0; }
.send-fx.fx-away { transition: background .5s ease .3s; background: rgba(16,19,40,.2); }

/* V14.1 微调：时间线月头在深底上的可读性 + 首页卡距 */
.tl-month-head b { color: #ecd9a8; }
.tl-month-head span { color: rgba(236,217,168,.55); }
.tl-time { color: #cbbfa2; }
.tl-time small { color: rgba(203,191,162,.6); }
.home-dock { gap: clamp(1.6rem, 3vw, 2.6rem); }

/* V14.2 首页压叠取消：v3 的 12 栏刻意重叠改为干净分栏（同优先级后置覆盖） */
.home-storyboard .home-dock { gap: clamp(1.4rem, 2.6vw, 2.2rem); }
.home-storyboard .route-ticket { grid-column: 1 / 7; }
.home-storyboard .letter-tray { grid-column: 7 / 13; margin-left: 0; }
.home-storyboard .post-office-note { margin-top: 1.6rem; padding-top: 1rem; }

/* ═══════════════════════════════════════════════════════════
   V15 · 交互与排版收口
   一套字体职责、一套触控尺寸、一套柔和动效；旧版本只保留结构。
   ═══════════════════════════════════════════════════════════ */
:root {
  --font-ui: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-story: "LXGW WenKai Lite", "Kaiti SC", STKaiti, serif;
  --font-number: "SF Pro Rounded", "SF Pro Display", ui-rounded, var(--font-ui);
  --text-primary: #fff5de;
  --text-secondary: rgba(255, 247, 228, .76);
  --text-muted: rgba(255, 247, 228, .56);
  --paper-ink: #584c5c;
  --paper-muted: #8b7b88;
  --focus-ring: rgba(255, 211, 146, .92);
  --ease-soft: cubic-bezier(.22, .72, .24, 1);
  --nav-height: 64px;
}

html {
  scroll-padding-top: calc(var(--nav-height) + 16px);
  -webkit-text-size-adjust: 100%;
}
body {
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
img { max-width: 100%; }
::selection { color: #4d4154; background: #f5cd91; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #292e58; }
::-webkit-scrollbar-thumb { border: 3px solid #292e58; border-radius: 999px; background: rgba(255,239,209,.32); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,239,209,.48); }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: fixed;
  z-index: 120;
  left: 1rem;
  top: .75rem;
  padding: .65rem 1rem;
  border-radius: 12px;
  color: #4f4658;
  background: #fff1d7;
  box-shadow: 0 10px 30px rgba(20,18,48,.28);
  transform: translateY(-160%);
  transition: transform .2s var(--ease-soft);
}
.skip-link:focus { transform: none; }

:where(a, button, input, textarea, summary):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
:where(a, button):focus:not(:focus-visible) { outline: 0; }

/* 旧版的全子元素错峰动画会使移动端首屏先空白，再整块跳出。 */
.scene > * { animation: none; }
.anim-rise { animation: rise .5s var(--ease-soft) both; }

.scene h1, .scene h2, .story-title {
  text-wrap: balance;
  letter-spacing: .035em;
}
.scene p { text-wrap: pretty; }
.soft-kicker {
  font-size: .72rem;
  line-height: 1.4;
  letter-spacing: .18em;
}
.scene-foot, .footer-note, .ai-caption { color: var(--text-muted); }

/* 导航：提高字重和触控面积，滚动后才加强玻璃感。 */
.nav {
  min-height: var(--nav-height);
  padding: .72rem 1.15rem;
  gap: clamp(.75rem, 1.4vw, 1.3rem);
  font-size: .9rem;
  font-weight: 570;
  background: rgba(38, 43, 83, .78);
  box-shadow: 0 9px 30px rgba(21, 20, 53, .12);
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body.is-scrolled .nav {
  border-color: rgba(255,248,229,.17);
  background: rgba(38,43,83,.92);
  box-shadow: 0 14px 38px rgba(20,20,52,.22);
}
.nav a:not(.brand) {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.nav .brand { min-height: 42px; font-size: 1.08rem; letter-spacing: .055em; }
.nav-logo { width: 34px; height: 34px; }
.nav a.active::after { bottom: -.35rem; }
.nav-pill { min-width: 70px; padding: .62em 1.15em; }
.nav .badge { margin-left: .3rem; }
.sail-count { font-family: var(--font-number); font-size: .82rem; }

/* 操作：主按钮是柔软文具，次按钮与危险操作有清晰层级。 */
.btn, a.btn, a.btn:visited,
.btn.red, a.btn.red, a.btn.red:visited,
.btn.navy, a.btn.navy, a.btn.navy:visited {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .68em 1.3em;
  border-radius: 16px;
  line-height: 1.25;
  letter-spacing: .02em;
  box-shadow: 0 5px 0 rgba(171,108,78,.20), 0 14px 26px rgba(34,29,65,.12);
}
.btn::after { content: none; }
.btn:hover, .btn.red:hover, .btn.navy:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 rgba(171,108,78,.17), 0 18px 30px rgba(34,29,65,.14);
}
.btn:active, .btn.red:active, .btn.navy:active {
  transform: translateY(2px) scale(.985);
  box-shadow: 0 2px 0 rgba(171,108,78,.17), 0 8px 18px rgba(34,29,65,.10);
}
.btn.ghost, a.btn.ghost, a.btn.ghost:visited {
  min-height: 44px;
  color: var(--text-secondary);
  background: rgba(255,248,229,.065);
}
.btn.danger { color: #fff4ef; background: #a96566; box-shadow: 0 5px 0 rgba(91,47,51,.25); }
.btn[disabled], .btn.is-pending { cursor: wait; opacity: .7; transform: none !important; }
.btn.is-pending::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pending-spin .7s linear infinite;
}
@keyframes pending-spin { to { transform: rotate(1turn); } }

input, textarea {
  caret-color: #b66d70;
}
input:focus, textarea:focus { outline: 0; }
input:focus-visible, textarea:focus-visible {
  box-shadow: 0 0 0 4px rgba(223,169,128,.18);
}

/* 沉浸舞台：图片跟随同一组变量，滚动时轻轻退后，不再多动画抢 transform。 */
.immersive-stage {
  --scene-progress: 0;
  --parallax-x: 0px;
  --parallax-y: 0px;
}
.immersive-stage > picture > img,
.immersive-stage > img,
.immersive-stage .hero-art img {
  animation: none !important;
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(1.025);
  transition: transform .9s var(--ease-soft), filter .45s ease;
  will-change: transform;
  filter: saturate(1.02) brightness(calc(1.03 - var(--scene-progress) * .07)) blur(calc(var(--scene-progress) * 2px));
}
.immersive-stage .hero-copy,
.immersive-stage > div:not(.immersive-scroll-cue):not(.hero-art),
.immersive-stage .cap,
.immersive-stage .island-title {
  opacity: calc(1 - var(--scene-progress) * .72);
  transition: opacity .18s linear;
}
.immersive-scroll-cue {
  min-height: 40px;
  opacity: calc(1 - var(--scene-progress) * 1.3);
  transition: opacity .18s linear;
}

.immersive-content {
  padding-top: clamp(5.2rem, 7vw, 6.8rem);
  border-color: rgba(255,249,232,.25);
  background:
    linear-gradient(180deg, rgba(80,79,128,.60) 0, rgba(53,57,105,.88) 13rem, rgba(41,46,86,.98) 37rem),
    rgba(43,48,91,.72);
  box-shadow: 0 -30px 78px rgba(25,24,58,.22), inset 0 1px 0 rgba(255,255,255,.18);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.immersive-content::before { content: none; }
.immersive-content.is-open { border-color: rgba(255,249,232,.30); }
.immersive-handle {
  position: absolute;
  z-index: 5;
  top: .72rem;
  left: 50%;
  min-width: 118px;
  min-height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  padding: .38rem .9rem;
  border: 0;
  border-radius: 999px;
  color: rgba(255,248,229,.58);
  background: rgba(255,248,229,.04);
  cursor: grab;
  transform: translateX(-50%);
  touch-action: none;
  user-select: none;
}
.immersive-handle:hover { color: rgba(255,248,229,.84); background: rgba(255,248,229,.08); }
.immersive-handle:active { cursor: grabbing; }
.immersive-handle span {
  width: 48px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,248,229,.42);
  box-shadow: 0 1px 0 rgba(26,24,59,.18);
}
.immersive-handle small { font-size: .62rem; line-height: 1; letter-spacing: .08em; }
body.is-dragging-drawer { cursor: grabbing; user-select: none; }

/* 首页：状态和正文不再过细；实体纸张只做低幅度触感。 */
.home-hero h1 { font-weight: 430; }
.hero-kicker { font-size: .72rem; font-weight: 650; }
.home-sub { font-size: clamp(1.04rem, 1.4vw, 1.18rem); }
.departure-line { font-size: .95rem; }
.departure-line strong { font-family: var(--font-number); letter-spacing: .04em; }
.home-secondary { min-height: 46px; }
.hero-promise { font-size: .83rem; }
.paper-object {
  isolation: isolate;
  transition: transform .28s var(--ease-soft), box-shadow .28s var(--ease-soft);
}
.paper-object::after, .setting-card::after, .island-signs .stat-card::after, .tl-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(255,255,255,.48), transparent 42%);
  transition: opacity .25s ease;
}
.paper-object:hover::after, .setting-card:hover::after, .island-signs .stat-card:hover::after, .tl-item:hover .tl-card::after { opacity: .34; }
.paper-object .section-heading h2 { font-size: 1.35rem; font-weight: 500; }
.paper-object .route-line { font-size: 1.1rem; }
.paper-object .route-meta, .paper-object .weather-mood { font-size: .86rem; }
.paper-object .reply-copy b { font-size: .96rem; }
.paper-object .reply-copy small { font-size: .76rem; }
.post-office-note { font-size: .9rem; }

/* 收藏册：筛选是横向可滚动的标签，时间线在窄屏不会挤出正文。 */
.folder-tabs {
  min-height: 48px;
  align-items: center;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.folder-tabs::-webkit-scrollbar { display: none; }
.folder-tabs button {
  min-height: 42px;
  flex: 0 0 auto;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.folder-tabs button:active { transform: scale(.97); }
.timeline::before { width: 1px; }
.tl-card { overflow: hidden; }
.tl-card b { font-size: 1.08rem; }
.tl-state { font-size: .84rem; }

/* 展馆：图像是主角，名称和故事均达到正常阅读尺寸。 */
.collection-page button.gallery-card {
  min-height: 246px;
  gap: .45rem;
  cursor: zoom-in;
  transition: transform .26s var(--ease-soft), box-shadow .26s ease, background-color .26s ease;
}
.collection-page button.gallery-card b { font-size: .98rem; }
.collection-page button.gallery-card > span:not(.static-mark) { font-size: .78rem; }
.collection-page button.gallery-card > i { font-size: .7rem; opacity: .68; transform: none; }
.collection-preview { overscroll-behavior: contain; }
.collection-preview::backdrop { background: rgba(28,28,65,.70); backdrop-filter: blur(14px) saturate(.86); }
.preview-close { width: 44px; height: 44px; transition: transform .2s ease, background-color .2s ease; }
.preview-close:hover { background: #fff; transform: rotate(4deg); }
.preview-copy p { font-size: 1.02rem; line-height: 2; }
.preview-copy > b { font-size: .84rem; }
body.has-dialog { overflow: hidden; }

/* 写信：纸是平的、字更大、横线更像真实信纸，输入时画面只轻退半步。 */
.write-page .page-heading { margin-bottom: 1.4rem; }
.letter-starters > span { font-size: .8rem; color: rgba(255,248,229,.66); }
.letter-starters button {
  min-height: 42px;
  color: rgba(255,248,229,.83);
  font-size: .82rem;
  cursor: pointer;
}
.write-sheet-v2 {
  color: var(--paper-ink);
  box-shadow: 0 26px 58px rgba(65,44,63,.18), inset 0 0 42px rgba(255,255,255,.38);
}
.write-sheet-v2 textarea {
  color: #514552;
  font: 430 clamp(1.05rem, 1.45vw, 1.2rem)/2.08 var(--font-story);
  letter-spacing: .025em;
  background: repeating-linear-gradient(180deg, transparent 0 calc(2.08em - 1.5px), rgba(146,105,100,.19) calc(2.08em - 1.5px) 2.08em);
  scrollbar-color: rgba(158,112,106,.30) transparent;
  resize: none;
}
.write-sheet-v2 textarea::placeholder { color: rgba(87,71,80,.48); }
.letter-to { font-size: .88rem; }
.letter-sign { color: rgba(83,69,78,.64); font-size: .78rem; }
.letter-sign small { font: 500 .68rem/1 var(--font-ui); opacity: .66; }
.letter-sign.near-limit { color: #a35f64; }
.write-page:focus-within .writing-studio-art,
.write-page:focus-within .page-heading,
.write-page:focus-within .letter-starters { opacity: .72; filter: saturate(.9); }
.write-sheet-v2:focus-within {
  box-shadow: 0 28px 64px rgba(44,35,63,.24), 0 0 0 4px rgba(245,196,126,.16);
}

/* 读信：正文与邮资分区，任何装饰都不再盖住文字。 */
.reader-heading > p { color: var(--text-secondary); }
.day-header { font-family: var(--font-ui); font-size: .84rem; }
.letter-grid .sheet {
  position: relative;
  overflow: hidden;
  padding: 3rem clamp(1.35rem, 4vw, 3rem) 2.2rem;
  font-weight: 430;
}
.letter-grid .sheet.reply-sheet {
  padding-top: 7.8rem !important;
  padding-bottom: 3.2rem;
}
.letter-grid .sheet.reply-sheet .reply-body {
  position: relative;
  z-index: 2;
  display: block;
  min-height: 13rem;
}
.letter-marks {
  position: absolute;
  z-index: 3;
  top: 1.05rem;
  left: clamp(1.35rem, 4vw, 3rem);
  right: clamp(1.2rem, 3vw, 2.2rem);
  height: 5.6rem;
  border-bottom: 1px dashed rgba(136,99,94,.17);
}
.letter-marks::before { top: .4rem; right: 6.3rem; }
.letter-marks .sheet-stamp { top: 0; right: 0; width: 72px; }
.letter-marks .postmark-img {
  top: 0 !important;
  right: 5.2rem;
  bottom: auto;
  width: 88px;
  opacity: .58;
}
.letter-marks .ink-postmark {
  top: -.25rem;
  right: 5.1rem;
  bottom: auto;
  width: 86px;
  height: 86px;
  opacity: .58;
}
.wax-seal { position: relative; z-index: 2; }
.letter-aside .aside-bubble { font-size: 1rem; }
.voyage-ledger h3 { font-size: 1.62rem; }
.keepsake-facts small, .keepsake-facts span { font-size: .74rem; }
.keepsake-facts b { font-size: .95rem; }
.arrival-strip { font-size: .8rem; }
.actions { gap: .7rem; }

/* 岛务与求助：信息卡保持不同内容层级，不再四块等权。 */
.setting-card { position: relative; overflow: hidden; padding: 1.5rem; }
.setting-card > span { font-size: .7rem; font-weight: 650; letter-spacing: .12em; }
.setting-card h2 { font-size: 1.25rem; line-height: 1.45; }
.setting-card p { font-size: .9rem; line-height: 1.85; }
.settings-grid .key-card { grid-column: span 2; background: #fff0d9; }
.settings-grid .danger-zone { grid-column: 1 / -1; }
.hotline-list a { min-height: 74px; }
.map-pin { min-width: 44px; min-height: 44px; }
.map-pin span { transition: transform .2s var(--ease-soft), border-color .2s ease, background-color .2s ease; }

@media (hover: none), (pointer: coarse) {
  .btn:hover, .btn.red:hover, .btn.navy:hover,
  .collection-page button.gallery-card:hover,
  .paper-object:hover,
  .island-surface .island-signs .stat-card:hover { transform: none; }
  .paper-object::after, .setting-card::after, .island-signs .stat-card::after, .tl-card::after { display: none; }
}

@media (max-width: 899px) {
  :root { --nav-height: 58px; }
  .nav { min-height: var(--nav-height); }
  .immersive-content,
  .archive-surface.archive-stack { padding-top: 5.2rem; }
  .settings-grid .key-card { grid-column: auto; }
  .settings-grid .danger-zone { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .nav { padding: .55rem .8rem; }
  .nav .brand { font-size: 1rem; }
  .nav-logo { width: 32px; height: 32px; }
  .soft-kicker { font-size: .68rem; }

  .immersive-content,
  .archive-surface.archive-stack {
    padding: 4.7rem .85rem calc(3.6rem + env(safe-area-inset-bottom));
    border-radius: 30px 30px 0 0;
  }
  .immersive-handle { top: .55rem; min-width: 126px; min-height: 48px; }
  .immersive-scroll-cue { display: none; }
  .immersive-stage > picture > img,
  .immersive-stage > img,
  .immersive-stage .hero-art img {
    transform: translate3d(0, 0, 0) scale(1.018);
    filter: saturate(1.02) brightness(calc(1.03 - var(--scene-progress) * .06));
  }

  .home-hero .hero-copy { bottom: 15svh; }
  .home-hero h1 { font-size: clamp(2.55rem, 12vw, 3.25rem); }
  .hero-kicker { font-size: .66rem; }
  .home-sub { font-size: 1rem; }
  .departure-line { font-size: .86rem; }
  .departure-line strong { font-size: 1.36rem; }
  .hero-actions { align-items: center; }
  .home-primary { min-height: 50px; }
  .hero-promise { font-size: .78rem; }
  .paper-object .section-heading h2 { font-size: 1.28rem; }
  .paper-object .route-line { font-size: 1rem; }

  .tabbar {
    min-height: calc(64px + env(safe-area-inset-bottom));
    padding: .42rem .3rem calc(.38rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,248,229,.15);
    background: rgba(38,43,83,.94);
  }
  .tabbar a { min-height: 48px; border-radius: 13px; }
  .tabbar a i { width: 28px; height: 25px; margin-bottom: .08rem; }
  .tabbar a i svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .tabbar a span { font-size: .66rem; font-weight: 560; }
  .tabbar a.on { background: rgba(246,199,127,.08); }
  body { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }

  .timeline::before { left: 14px; }
  .tl-month-head { padding-left: 0; margin-top: 1.25rem; }
  .tl-month-head i { left: 7px; }
  .tl-month-head b { margin-left: 34px; }
  .tl-item { grid-template-columns: 28px minmax(0,1fr); align-items: start; }
  .tl-time { grid-column: 2; grid-row: 1; display: flex; gap: .5rem; margin: 0 0 .35rem .8rem; text-align: left; }
  .tl-time small { display: inline; }
  .tl-node { grid-column: 1; grid-row: 1 / span 2; margin-top: .45rem; }
  .tl-card { grid-column: 2; grid-row: 2; margin-left: .5rem; padding: .9rem 4.2rem .9rem 1rem; }
  .tl-card b { font-size: 1rem; }

  .collection-page button.gallery-card { min-height: 216px; }
  .collection-page button.gallery-card b { font-size: .9rem; }
  .collection-page button.gallery-card > span:not(.static-mark) { font-size: .72rem; }
  .collection-preview { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); border-radius: 24px; }
  .preview-close { top: .65rem; right: .65rem; }
  .preview-copy p { font-size: 1rem; }

  .writing-studio { min-height: 760px; }
  .write-sheet-v2 { top: 260px; height: 455px; padding: 1.35rem 1.1rem 1rem; }
  .write-sheet-v2 textarea { font-size: 1.08rem; line-height: 2.12; background: repeating-linear-gradient(180deg, transparent 0 calc(2.12em - 1.5px), rgba(146,105,100,.20) calc(2.12em - 1.5px) 2.12em); }
  .letter-sheet-footer { align-items: flex-end; }
  .letter-sheet-footer .letter-sign { white-space: normal; max-width: 9rem; line-height: 1.5; }
  .letter-sheet-footer .send-letter { min-width: 126px; min-height: 48px; }

  .letter-grid .sheet { padding: 2.8rem 1.2rem 2rem; font-size: 1.12rem; line-height: 2.3; }
  .letter-grid .sheet.reply-sheet { padding: 7.5rem 1.2rem 2.7rem !important; }
  .letter-marks { left: 1.2rem; right: 1rem; height: 5.4rem; }
  .letter-marks::before { right: 5.5rem; font-size: .5rem; }
  .letter-marks .sheet-stamp { width: 64px; right: 0; }
  .letter-marks .postmark-img { right: 4.4rem; width: 78px; }
  .letter-marks .ink-postmark { right: 4.35rem; width: 76px; height: 76px; }
  .letter-grid .actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .letter-grid .actions > * { min-width: 0; }
  .letter-grid .actions .btn { width: 100%; padding-inline: .75rem; }

  .settings-grid { grid-template-columns: 1fr; }
  .settings-grid .danger-zone { grid-column: auto; }
  .setting-card { padding: 1.25rem; }
  .hotline-list a { min-height: 82px; padding: 1rem; }
  .map-pin { transform: translate(-50%,-50%) scale(.88); }
  .map-pin small { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .immersive-stage > picture > img,
  .immersive-stage > img,
  .immersive-stage .hero-art img { transform: none !important; filter: none !important; }
}

/* V15.1 · remove startup flashes and simplify the drawer affordance. */
.wrap,
.sheet {
  animation: none;
}

.immersive-handle {
  min-width: 92px;
  min-height: 38px;
  padding: 10px 22px;
  background: transparent;
  box-shadow: none;
}

.immersive-handle small {
  display: none;
}

.immersive-handle:hover {
  background: rgba(255, 250, 238, .06);
}

.immersive-handle:focus-visible {
  outline: 2px solid rgba(255, 226, 164, .5);
  outline-offset: -2px;
  box-shadow: none;
}

@media (max-width: 640px) {
  .nav .nav-pill,
  .nav .nav-utility {
    display: none !important;
  }

  .nav .spacer {
    flex: 1;
  }

  .immersive-handle {
    min-width: 76px;
    min-height: 34px;
    padding: 8px 18px;
  }
}

/* ═══════════════════════════════════════════════════════════
   V16 · 一张桌上的夜航手账
   首页、收藏册与藏品预览不再是功能卡片拼盘，而是同一套纸张叙事。
   ═══════════════════════════════════════════════════════════ */

/* 首页：一整张航行簿承接航线、回信和页边留言。 */
.dispatch-ledger {
  position: relative;
  isolation: isolate;
  width: min(1260px, calc(100% - clamp(1rem, 5vw, 5rem)));
  margin: 0 auto;
  padding: clamp(1.45rem, 3vw, 2.5rem) clamp(1.35rem, 3.5vw, 3rem) 1.35rem;
  overflow: hidden;
  color: #564c5b;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 22px 34px 26px 30px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.72), transparent 25%),
    repeating-linear-gradient(0deg, rgba(132,91,83,.022) 0 1px, transparent 1px 5px),
    linear-gradient(106deg, #fff2d9 0 49.75%, #f8ead9 50.25% 100%);
  box-shadow: 0 34px 76px rgba(20,18,48,.26), inset 0 0 56px rgba(255,255,255,.25);
}
.dispatch-ledger::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent 3%, rgba(128,96,104,.14) 12% 88%, transparent 97%);
  box-shadow: -8px 0 20px rgba(90,63,76,.055), 8px 0 20px rgba(255,255,255,.20);
}
.dispatch-ledger::after {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 84px;
  height: 24px;
  border-radius: 4px;
  background: rgba(226,178,132,.62);
  box-shadow: 0 3px 7px rgba(84,57,69,.08);
  transform: translateX(-50%) rotate(-1.5deg);
}
.dispatch-ledger-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(124,91,96,.13);
}
.dispatch-ledger-head .eyebrow {
  color: #b67572;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .22em;
}
.dispatch-ledger .ledger-script {
  position: relative;
  width: fit-content;
  margin: .32rem 0 0;
  color: #53495b;
  font: 430 clamp(1.6rem, 2.4vw, 2.2rem)/1.25 var(--font-story);
  letter-spacing: .08em;
}
.dispatch-ledger .ledger-script::after {
  content: "";
  position: absolute;
  left: 8%;
  right: -22%;
  bottom: -.35rem;
  height: 9px;
  opacity: .52;
  border-bottom: 2px solid #c98678;
  border-radius: 50%;
  transform: rotate(-1.5deg) scaleX(0);
  transform-origin: left center;
}
.immersive-content.is-open .dispatch-ledger .ledger-script::after { animation: ledger-line .7s var(--ease-soft) .12s forwards; }
@keyframes ledger-line { to { transform: rotate(-1.5deg) scaleX(1); } }
.dispatch-ledger-head > p {
  display: grid;
  gap: .1rem;
  margin: 0;
  color: #988289;
  text-align: right;
  font-size: .75rem;
}
.dispatch-ledger-head > p span { font-family: var(--font-story); }
.dispatch-ledger-head > p b { color: #708e78; font-size: .72rem; font-weight: 600; }

.home-storyboard .dispatch-ledger .home-dock,
.dispatch-ledger .home-dock {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 0;
  width: 100%;
  margin: 0;
}
.home-storyboard .dispatch-ledger .route-ticket,
.home-storyboard .dispatch-ledger .letter-tray {
  grid-column: auto;
  grid-row: auto;
  margin: 0;
  transform: none;
}
.dispatch-ledger .paper-object {
  min-height: 340px;
  padding: clamp(1.5rem, 3vw, 2.35rem) !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.dispatch-ledger .paper-object::after,
.dispatch-ledger .route-ticket::before,
.dispatch-ledger .letter-tray::before { content: none; }
.dispatch-ledger .route-ticket { border-right: 1px dashed rgba(137,99,103,.18); }
.dispatch-ledger .section-heading { align-items: flex-start; }
.dispatch-ledger .section-heading h3 {
  margin: .25rem 0 0;
  color: #574d5c;
  font: 430 clamp(1.2rem, 1.7vw, 1.5rem)/1.45 var(--font-story);
  letter-spacing: .04em;
}
.dispatch-ledger .section-heading a { font-size: .75rem; }
.dispatch-ledger .route-status { font-size: .72rem; }
.route-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin: 2.25rem 0 1.8rem;
  padding: 0;
  list-style: none;
}
.route-rail::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 7px;
  left: 8px;
  right: 8px;
  height: 2px;
  background: linear-gradient(90deg, #c9867b, #d6b98e 55%, #8faf98);
  transform: scaleX(.02);
  transform-origin: left center;
}
.immersive-content.is-open .route-rail::before { animation: route-draw .8s var(--ease-soft) .18s forwards; }
@keyframes route-draw { to { transform: scaleX(1); } }
.route-rail li { position: relative; min-width: 0; }
.route-rail li i {
  display: block;
  width: 15px;
  height: 15px;
  margin-bottom: .7rem;
  border: 3px solid #fff4df;
  border-radius: 50%;
  background: #c9867b;
  box-shadow: 0 0 0 1px rgba(151,104,102,.28);
}
.route-rail li:last-child i { background: #86a68e; }
.route-rail li span { display: block; color: #5c5261; font: 450 .9rem/1.55 var(--font-story); }
.immersive-content.is-open .route-rail li { animation: route-stop .42s var(--ease-soft) both; }
.immersive-content.is-open .route-rail li:nth-child(2) { animation-delay: .22s; }
.immersive-content.is-open .route-rail li:nth-child(3) { animation-delay: .38s; }
@keyframes route-stop { from { opacity: .25; transform: translateY(6px); } }
.dispatch-ledger .route-meta { padding-top: 1rem; border-top: 1px solid rgba(126,94,101,.11); }
.dispatch-ledger .weather-mood { margin-bottom: 0; font-family: var(--font-story); }

.dispatch-ledger .reply-list { padding-top: 1rem; }
.dispatch-ledger .reply-list > a {
  position: relative;
  min-height: 94px;
  margin: .45rem .1rem;
  padding: .85rem 4.5rem .85rem .85rem;
  border: 1px solid rgba(119,92,108,.10);
  border-radius: 7px 15px 8px 13px;
  background: rgba(255,253,244,.68);
  box-shadow: 0 7px 16px rgba(78,58,72,.06);
  transform: rotate(-.18deg);
}
.dispatch-ledger .reply-list > a:nth-child(even) { transform: translateX(.35rem) rotate(.2deg); }
.dispatch-ledger .reply-list > a::after {
  content: "";
  position: absolute;
  right: .3rem;
  bottom: .2rem;
  width: 48%;
  height: 35%;
  opacity: .22;
  border-right: 1px solid #cdb9ad;
  border-bottom: 1px solid #cdb9ad;
  transform: skew(-30deg);
  pointer-events: none;
}
.dispatch-ledger .reply-list > a:hover {
  background: rgba(255,255,250,.94);
  box-shadow: 0 12px 24px rgba(78,58,72,.10);
  transform: translateY(-2px) rotate(0);
}
.dispatch-ledger .reply-arrow {
  z-index: 1;
  width: auto;
  color: #a36d70;
  font: 500 .68rem/1 var(--font-story);
  border-bottom: 1px solid rgba(163,109,112,.35);
}
.dispatch-ledger .post-office-note {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .8rem;
  width: 100%;
  margin: .25rem 0 0;
  padding: 1rem .3rem .2rem;
  border: 0;
  border-top: 1px dashed rgba(143,101,104,.24);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.dispatch-ledger .post-office-note p { margin: 0; font-family: var(--font-story); }
.dispatch-ledger .post-office-note .note-mark {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(174,103,101,.5);
  border-radius: 50%;
  color: #ad706d;
  background: transparent;
  transform: rotate(-8deg);
}
.dispatch-ledger .note-time { color: #a58e91; font: 400 .7rem/1 var(--font-story); }

/* 收藏册：公告、筛选与信件变成一本完整的夜航通信簿。 */
.archive-surface.archive-stack {
  width: min(1380px, calc(100% - clamp(1.5rem, 7vw, 7rem)));
  padding-inline: clamp(1rem, 2.5vw, 2.2rem);
}
.archive-book {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: clamp(1.25rem, 2.6vw, 2.25rem);
  overflow: hidden;
  color: #584e59;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 24px 34px 27px 31px;
  background:
    radial-gradient(circle at 12% 5%, rgba(255,255,255,.66), transparent 24%),
    repeating-linear-gradient(0deg, rgba(135,96,84,.02) 0 1px, transparent 1px 5px),
    #f5ead3;
  box-shadow: 0 30px 68px rgba(22,20,50,.22), inset 0 0 52px rgba(255,255,255,.27);
}
.archive-book::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 20%;
  width: 82px;
  height: 23px;
  border-radius: 4px;
  background: rgba(226,179,133,.61);
  transform: rotate(-2deg);
  box-shadow: 0 3px 8px rgba(82,56,68,.09);
}
.archive-book-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding: .4rem .3rem 1.25rem;
  border-bottom: 1px dashed rgba(135,96,100,.21);
}
.archive-bulletin { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.archive-bulletin > span {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #b06f6c;
  border: 1px solid rgba(176,111,108,.48);
  border-radius: 50%;
  font-family: var(--font-story);
  transform: rotate(-7deg);
}
.archive-bulletin small { color: #b37672; font-size: .62rem; font-weight: 700; letter-spacing: .16em; }
.archive-bulletin p { margin: .12rem 0 0; color: #756876; font: 430 .9rem/1.7 var(--font-story); }
.archive-compose,
.archive-compose:visited {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem 1rem;
  color: #574c58;
  border: 1px solid rgba(182,119,102,.20);
  border-radius: 9px 15px 10px 14px;
  background: #f4c47d;
  box-shadow: 0 5px 0 rgba(171,108,78,.17);
  text-decoration: none;
  font: 550 .86rem/1 var(--font-ui);
  transition: transform .2s var(--ease-soft), box-shadow .2s ease;
}
.archive-compose:hover { color: #574c58; transform: translateY(-2px) rotate(-.25deg); box-shadow: 0 8px 15px rgba(102,69,69,.12); }
.archive-compose:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(171,108,78,.17); }
.archive-compose i { font: normal 1rem/1 var(--font-story); }
.archive-book .folder-tabs {
  justify-content: flex-start;
  gap: .3rem;
  margin: 1rem 0 -.2rem;
  padding: 0 .4rem;
}
.archive-book .folder-tabs button {
  min-height: 40px;
  padding: .55rem .95rem .75rem;
  color: #8b7580;
  border: 1px solid rgba(126,91,98,.12);
  border-bottom: 0;
  border-radius: 12px 12px 4px 4px;
  background: #eaded0;
  box-shadow: none;
  font: 520 .78rem/1 var(--font-ui);
}
.archive-book .folder-tabs button:nth-child(even) { background: #eee7f1; }
.archive-book .folder-tabs button.on {
  color: #66545e;
  background: #fff7e7;
  box-shadow: 0 -3px 10px rgba(87,62,71,.06);
  transform: translateY(1px);
}
.archive-book [hidden] { display: none !important; }
.archive-book .timeline { padding: 0; }
.archive-book .timeline::before { content: none; }
.archive-book .tl-month {
  position: relative;
  display: block;
  margin: 0 0 1.15rem;
  padding: 1.25rem clamp(.85rem, 2vw, 1.5rem) .65rem;
  overflow: hidden;
  border: 1px solid rgba(129,95,91,.10);
  border-radius: 8px 20px 12px 17px;
  background:
    linear-gradient(90deg, transparent 0 112px, rgba(191,116,111,.13) 112px 113px, transparent 113px),
    repeating-linear-gradient(180deg, transparent 0 108px, rgba(127,101,98,.10) 108px 109px),
    rgba(255,251,240,.86);
  box-shadow: 0 12px 25px rgba(78,57,66,.07);
}
.archive-book .tl-month-head {
  min-height: 54px;
  margin: 0;
  padding: .1rem .8rem .8rem 1rem;
  border-bottom: 1px solid rgba(128,98,95,.10);
}
.archive-book .tl-month-head i {
  position: static;
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border: 2px solid #bc8178;
  background: transparent;
  box-shadow: 0 0 0 4px rgba(188,129,120,.09);
}
.archive-book .tl-month-head b {
  margin: 0;
  color: #5c505a;
  font: 500 1.15rem/1.3 var(--font-story);
  letter-spacing: .06em;
}
.archive-book .tl-month-head span { color: #9b8387; font: 450 .74rem/1 var(--font-story); }
.archive-book .tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: stretch;
  min-height: 108px;
  margin: 0;
  color: inherit;
  border-bottom: 1px solid rgba(129,99,96,.08);
  text-decoration: none;
  transition: background-color .22s ease, transform .22s var(--ease-soft);
}
.archive-book .tl-item:last-child { border-bottom: 0; }
.archive-book .tl-item:hover { background: rgba(238,217,193,.25); transform: translateX(3px); }
.archive-book .tl-node {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 106px;
  width: 7px;
  height: 7px;
  margin: 0;
  background: #c9b19b;
  box-shadow: 0 0 0 4px #fffaf0;
  transform: translate(-50%,-50%);
}
.archive-book .tl-item.unread .tl-node { background: #ca7d75; animation: none; box-shadow: 0 0 0 4px #fffaf0, 0 0 0 7px rgba(202,125,117,.13); }
.archive-book .tl-time {
  grid-column: 1;
  align-self: center;
  display: grid;
  gap: .18rem;
  padding-right: 1rem;
  color: #806f75;
  text-align: right;
  white-space: nowrap;
}
.archive-book .tl-time b { color: #6e5e66; font: 620 .82rem/1 var(--font-number); letter-spacing: .04em; }
.archive-book .tl-time small { color: #a18d91; font: 450 .7rem/1 var(--font-number); }
.archive-book .tl-card {
  grid-column: 2;
  align-self: center;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 1rem 5.5rem 1rem 1.45rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
  transform: none !important;
}
.archive-book .tl-card::after { display: none; }
.archive-book .tl-card b { color: #4f4650; font: 430 1.08rem/1.65 var(--font-story); }
.archive-book .tl-state { color: #917d80; font: 440 .76rem/1.5 var(--font-story); }
.archive-book .tl-state.glow { color: #b26766; }
.archive-book .tl-item.unread { background: linear-gradient(90deg, rgba(240,205,190,.10), transparent 70%); }
.archive-book .tl-item.unread .tl-card { border: 0; }
.archive-book .tl-stamp { right: .8rem; width: 52px; filter: saturate(.92); }
.archive-book .tl-stamp-slot { right: 1rem; color: #c9b39f; }

/* 展馆本体是一册有透明护页的集邮簿，藏品浮起而不是整张卡片跳动。 */
.collection-page .collection-surface .gallery-grid {
  position: relative;
  isolation: isolate;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  padding: 3.5rem clamp(1rem, 2.5vw, 2rem) 2rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 22px 33px 25px 30px;
  background:
    repeating-linear-gradient(0deg, rgba(126,91,91,.018) 0 1px, transparent 1px 5px),
    #f1e8d7;
  box-shadow: 0 28px 62px rgba(21,19,49,.20), inset 0 0 48px rgba(255,255,255,.28);
}
.collection-page .collection-surface .gallery-grid::before {
  content: "夜航集邮簿  ·  轻点一枚，看看它从哪一晚来";
  top: 1.15rem;
  left: 1.6rem;
  width: auto;
  height: auto;
  color: #9b7c7e;
  background: transparent;
  box-shadow: none;
  transform: none;
  font: 500 .68rem/1 var(--font-story);
  letter-spacing: .08em;
}
.collection-page .collection-surface .gallery-grid::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 82px;
  height: 22px;
  border-radius: 4px;
  background: rgba(226,178,133,.58);
  transform: translateX(-50%) rotate(-1.5deg);
  box-shadow: 0 3px 7px rgba(84,57,69,.08);
}
.collection-page .collection-surface button.gallery-card {
  position: relative;
  min-height: 252px;
  padding: 1.8rem .75rem 1.25rem;
  overflow: hidden;
  border: 0;
  border-right: 1px dashed rgba(123,92,99,.12);
  border-bottom: 1px dashed rgba(123,92,99,.12);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.collection-page .collection-surface button.gallery-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 12%;
  right: 12%;
  bottom: 4.4rem;
  height: 37%;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 7px 7px 15px 15px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.34));
  box-shadow: inset 0 -8px 18px rgba(94,68,85,.035);
  pointer-events: none;
  transition: border-color .25s ease, background-color .25s ease;
}
.collection-page .collection-surface button.gallery-card > * { position: relative; z-index: 1; }
.collection-page .collection-surface button.gallery-card img,
.collection-page .collection-surface button.gallery-card .static-mark {
  transition: transform .38s var(--ease-soft), filter .3s ease;
}
.collection-page .collection-surface button.gallery-card:nth-child(3n+1) img { transform: rotate(-2deg); }
.collection-page .collection-surface button.gallery-card:nth-child(3n+2) img { transform: rotate(1.5deg); }
.collection-page .collection-surface button.gallery-card:hover,
.collection-page .collection-surface button.gallery-card:focus-visible {
  background: rgba(255,251,242,.36);
  box-shadow: none;
  transform: none;
}
.collection-page .collection-surface button.gallery-card:hover::before,
.collection-page .collection-surface button.gallery-card:focus-visible::before { border-color: rgba(255,255,255,.82); background: rgba(255,255,255,.27); }
.collection-page .collection-surface button.gallery-card:hover img,
.collection-page .collection-surface button.gallery-card:focus-visible img { transform: translateY(-9px) rotate(0) scale(1.06); filter: drop-shadow(0 13px 10px rgba(70,50,67,.18)); }
.collection-page .collection-surface button.gallery-card b {
  margin-top: .55rem;
  color: #5d515e;
  font: 480 .95rem/1.5 var(--font-story);
  letter-spacing: .035em;
}
.collection-page .collection-surface button.gallery-card > span:not(.static-mark) { color: #9a8589; font: 420 .7rem/1.5 var(--font-story); }
.collection-page .collection-surface button.gallery-card > i { color: #b1716f; font-family: var(--font-story); }

/* 藏品预览：像翻开一页私人集邮册，而不是商品详情弹窗。 */
.collection-preview {
  width: min(900px, calc(100% - 2rem));
  max-height: min(720px, calc(100dvh - 2rem));
  border-radius: 27px 38px 29px 35px;
  background: linear-gradient(100deg, #eee8f5 0 45%, #fff1d6 45.2% 100%);
  box-shadow: 0 42px 120px rgba(18,17,45,.48), inset 0 0 55px rgba(255,255,255,.26);
}
.collection-preview[open] { grid-template-columns: .9fr 1.1fr; }
.collection-preview::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 45%;
  width: 1px;
  background: rgba(111,84,104,.10);
  box-shadow: -9px 0 22px rgba(91,65,83,.06), 8px 0 18px rgba(255,255,255,.22);
  pointer-events: none;
}
.preview-object {
  position: relative;
  min-height: 500px;
  align-content: center;
  gap: 1.5rem;
  padding: 3.5rem 2.5rem 2.5rem;
  background:
    radial-gradient(circle at 50% 43%, rgba(255,253,246,.92) 0 22%, transparent 45%),
    linear-gradient(145deg, rgba(235,230,244,.92), rgba(244,219,210,.82));
}
.preview-mat {
  position: relative;
  width: min(300px, 88%);
  min-height: 310px;
  display: grid;
  place-items: center;
  padding: 1.3rem;
  border: 1px solid rgba(255,255,255,.70);
  border-radius: 48% 52% 47% 53%;
  background: rgba(255,252,242,.52);
  box-shadow: 0 22px 38px rgba(76,55,74,.10), inset 0 0 38px rgba(255,255,255,.58);
  transform: rotate(-1.5deg);
}
.preview-object img { width: min(260px, 95%); max-height: 340px; }
.preview-object > small {
  color: rgba(105,84,105,.46);
  font-size: .58rem;
  font-weight: 650;
  letter-spacing: .26em;
}
.preview-object .static-mark { margin: auto; }
.preview-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.8rem clamp(2rem, 4vw, 3.5rem) 3rem;
}
.preview-copy::before {
  top: 1.2rem;
  left: 36%;
  width: 82px;
  height: 22px;
  opacity: .78;
}
.preview-letterhead { display: flex; align-items: center; gap: .8rem; }
.preview-letterhead > span {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 50px;
  min-height: 50px;
  padding: .4rem;
  color: #b06b6b;
  border: 1px solid rgba(176,107,107,.58);
  border-radius: 50%;
  font: 500 .72rem/1 var(--font-story);
  letter-spacing: .08em;
  transform: rotate(-8deg);
}
.preview-letterhead > span::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed rgba(176,107,107,.34);
  border-radius: inherit;
}
.preview-letterhead > small {
  margin: 0;
  padding: 0;
  color: #9b8388;
  background: none;
  font: 430 .76rem/1.5 var(--font-story);
}
.preview-copy h2 {
  position: relative;
  width: fit-content;
  margin: 1.2rem 0 1.3rem;
  color: #514758;
  font: 430 clamp(2.35rem, 5vw, 3.8rem)/1.18 var(--font-story);
  letter-spacing: .08em;
}
.preview-copy h2::after {
  content: "";
  position: absolute;
  left: 5%;
  right: -18%;
  bottom: -.45rem;
  height: 8px;
  opacity: .42;
  border-bottom: 2px solid #c68178;
  border-radius: 50%;
  transform: rotate(-1deg);
}
.preview-copy .preview-story {
  position: relative;
  margin: .6rem 0 1rem;
  padding-left: 1.2rem;
  color: #6d616f;
  font: 430 1.08rem/2.05 var(--font-story);
}
.preview-copy .preview-story::before { content: "“"; position: absolute; left: -.15rem; top: -.2rem; color: #c98a7e; font-size: 1.7rem; }
.preview-copy .preview-status {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: fit-content;
  margin: .4rem 0 1.25rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: rgba(238,207,195,.66);
}
.preview-copy .preview-status i { width: 7px; height: 7px; border-radius: 50%; background: #89a993; box-shadow: 0 0 0 4px rgba(137,169,147,.13); }
.preview-copy .preview-status small { margin: 0; padding: 0; color: #8d7077; background: none; font-size: .74rem; }
.preview-copy blockquote {
  position: relative;
  margin: 0;
  padding: 1rem 1rem .85rem 1.2rem;
  color: #927b80;
  border-left: 2px solid rgba(190,121,113,.38);
  background: linear-gradient(90deg, rgba(255,255,255,.34), transparent);
  font: 420 .86rem/1.85 var(--font-story);
}
.preview-copy blockquote em { color: #78626b; font-style: normal; }
.collection-preview[open] .preview-copy > * { animation: folio-copy-in .45s var(--ease-soft) both; }
.collection-preview[open] .preview-copy > *:nth-child(2) { animation-delay: .06s; }
.collection-preview[open] .preview-copy > *:nth-child(3) { animation-delay: .12s; }
.collection-preview[open] .preview-copy > *:nth-child(4) { animation-delay: .18s; }
.collection-preview[open] .preview-copy > *:nth-child(5) { animation-delay: .24s; }
@keyframes folio-copy-in { from { opacity: 0; transform: translateY(9px); } }

/* 雨滴短一些、斜一些，避免静止截图里像布局辅助线。 */
.wx-drop {
  width: 1px;
  height: clamp(34px, 5.5vh, 58px);
  background: linear-gradient(180deg, transparent, rgba(190,205,255,.42));
  transform: rotate(-7deg);
}
@keyframes wx-rain { to { transform: translate3d(-5vw, 124vh, 0) rotate(-7deg); } }

@media (max-width: 760px) {
  .dispatch-ledger {
    width: 100%;
    padding: 1.35rem .9rem 1rem;
    border-radius: 22px;
    background: repeating-linear-gradient(0deg, rgba(132,91,83,.02) 0 1px, transparent 1px 5px), #fff0d8;
  }
  .dispatch-ledger::before { content: none; }
  .dispatch-ledger-head { align-items: start; gap: 1rem; }
  .dispatch-ledger .ledger-script { font-size: 1.55rem; }
  .dispatch-ledger-head > p { max-width: 8rem; }
  .home-storyboard .dispatch-ledger .home-dock,
  .dispatch-ledger .home-dock { grid-template-columns: 1fr; }
  .dispatch-ledger .paper-object { min-height: 0; padding: 1.45rem .55rem !important; }
  .dispatch-ledger .route-ticket { border-right: 0; border-bottom: 1px dashed rgba(137,99,103,.18); }
  .route-rail { gap: .35rem; }
  .route-rail li span { font-size: .82rem; }
  .dispatch-ledger .reply-list > a:nth-child(even) { transform: rotate(.15deg); }
  .dispatch-ledger .post-office-note { grid-template-columns: auto 1fr; }
  .dispatch-ledger .note-time { display: none; }

  .archive-surface.archive-stack { width: calc(100% - .7rem); padding-inline: .55rem; }
  .archive-book { padding: 1rem .7rem; border-radius: 21px; }
  .archive-book-head { grid-template-columns: 1fr; }
  .archive-compose { width: fit-content; margin-left: 3.3rem; }
  .archive-book .folder-tabs { margin-top: .8rem; padding-left: .1rem; }
  .archive-book .tl-month {
    padding: 1rem .45rem .35rem;
    background:
      linear-gradient(90deg, transparent 0 70px, rgba(191,116,111,.13) 70px 71px, transparent 71px),
      repeating-linear-gradient(180deg, transparent 0 108px, rgba(127,101,98,.10) 108px 109px),
      rgba(255,251,240,.90);
  }
  .archive-book .tl-month-head { padding-inline: .5rem; }
  .archive-book .tl-item { grid-template-columns: 58px minmax(0, 1fr); }
  .archive-book .tl-node { left: 65px; }
  .archive-book .tl-time { padding-right: .55rem; }
  .archive-book .tl-time b { font-size: .72rem; }
  .archive-book .tl-card { padding: .85rem 3.65rem .85rem 1rem; }
  .archive-book .tl-card b { font-size: .94rem; }
  .archive-book .tl-stamp { right: .35rem; width: 42px; }
  .archive-book .tl-stamp-slot { right: .45rem; width: 35px; height: 43px; }

  .collection-page .collection-surface .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 3.25rem .4rem 1rem; }
  .collection-page .collection-surface .gallery-grid::before { left: .9rem; font-size: .62rem; }
  .collection-page .collection-surface button.gallery-card { min-height: 222px; padding-inline: .35rem; }
  .collection-page .collection-surface button.gallery-card::before { left: 7%; right: 7%; }

  .collection-preview {
    width: calc(100% - 1rem);
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
    background: linear-gradient(180deg, #eee8f5 0 42%, #fff1d6 42.2% 100%);
  }
  .collection-preview[open] { display: block; }
  .collection-preview::after { content: none; }
  .preview-object { min-height: 330px; padding: 2.8rem 1.4rem 1.6rem; }
  .preview-mat { min-height: 225px; width: min(230px, 78%); padding: .8rem; }
  .preview-object img { width: min(190px, 94%); max-height: 220px; }
  .preview-object .static-mark { width: 150px; height: 150px; }
  .preview-copy { padding: 2rem 1.5rem 2.2rem; }
  .preview-letterhead > span { min-width: 44px; min-height: 44px; }
  .preview-copy h2 { font-size: 2.35rem; }
  .preview-copy .preview-story { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dispatch-ledger .ledger-script::after,
  .route-rail::before { transform: none !important; }
  .immersive-content.is-open .dispatch-ledger .ledger-script::after,
  .immersive-content.is-open .route-rail::before,
  .immersive-content.is-open .route-rail li,
  .collection-preview[open] .preview-copy > * { animation: none !important; }
}

/* V16.1 · 岛页与工具页也使用连续纸页，而不是后台卡片矩阵。 */
.island-surface .island-keepsakes {
  position: relative;
  isolation: isolate;
  width: min(1120px, 100%);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 23px 34px 26px 30px;
  background:
    radial-gradient(circle at 10% 4%, rgba(255,255,255,.70), transparent 24%),
    repeating-linear-gradient(0deg, rgba(132,91,83,.02) 0 1px, transparent 1px 5px),
    #f7ecd6;
  box-shadow: 0 30px 68px rgba(21,19,49,.20), inset 0 0 50px rgba(255,255,255,.26);
}
.island-surface .island-keepsakes::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 21%;
  width: 82px;
  height: 22px;
  border-radius: 4px;
  background: rgba(226,178,133,.58);
  transform: rotate(2deg);
}
.island-surface .island-keepsake-heading { max-width: 720px; margin-bottom: 1.65rem; }
.island-surface .island-keepsake-heading .soft-kicker { color: #b57471; }
.island-surface .island-keepsake-heading h2 {
  color: #574c59;
  text-shadow: none;
  font-size: clamp(1.8rem, 3vw, 2.35rem);
}
.island-surface .island-keepsake-heading p { color: #84737e; }
.island-surface .island-keepsake-heading::after { background: linear-gradient(90deg, transparent, rgba(181,113,109,.52), transparent); }
.island-surface .island-signs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px dashed rgba(137,99,103,.20);
  border-bottom: 1px dashed rgba(137,99,103,.20);
}
.island-surface .island-signs .stat-card,
.island-surface .island-signs .stat-card:nth-child(even),
.island-surface .island-signs .stat-card:nth-child(3),
.island-surface .island-signs .stat-card:nth-child(4) {
  min-height: 200px;
  padding: 1.35rem 1.2rem 1.15rem;
  border: 0 !important;
  border-right: 1px solid rgba(133,96,104,.12) !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.island-surface .island-signs .stat-card:last-child { border-right: 0 !important; }
.island-surface .island-signs .stat-card::before,
.island-surface .island-signs .stat-card::after { content: none; }
.island-surface .island-signs .stat-card:hover { background: rgba(255,255,255,.26); box-shadow: none; transform: none; }
.island-surface .island-signs .stat-card:hover .stat-mark { transform: translateY(-3px) rotate(-5deg); }
.island-surface .island-signs .stat-mark { background: rgba(255,255,255,.30); transition: transform .25s var(--ease-soft); }
.island-surface .milestone-note {
  width: 100%;
  margin: 1.2rem 0 0;
  padding: 1.25rem .6rem .2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.island-surface .milestone-note::before { content: none; }
.island-surface .milestone-copy h3 { color: #5c505d; }
.island-surface .milestone-copy p { color: #877680; }

.settings-surface .settings-grid {
  position: relative;
  isolation: isolate;
  gap: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 23px 34px 26px 30px;
  background:
    repeating-linear-gradient(0deg, rgba(132,91,83,.02) 0 1px, transparent 1px 5px),
    #f5ead5;
  box-shadow: 0 30px 68px rgba(21,19,49,.20), inset 0 0 50px rgba(255,255,255,.26);
}
.settings-surface .settings-grid::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -8px;
  left: 18%;
  width: 80px;
  height: 22px;
  border-radius: 4px;
  background: rgba(226,178,133,.58);
  transform: rotate(-2deg);
}
.settings-surface .setting-card,
.settings-surface .settings-grid .key-card {
  min-height: 218px;
  padding: clamp(1.35rem, 2.5vw, 2rem);
  overflow: visible;
  border: 0;
  border-right: 1px dashed rgba(129,94,100,.16);
  border-bottom: 1px dashed rgba(129,94,100,.16);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.settings-surface .setting-card:nth-child(even) { border-right: 0; }
.settings-surface .setting-card::after { display: none; }
.settings-surface .setting-card:hover { background: rgba(255,255,255,.22); }
.settings-surface .setting-card > span { color: #b06d6d; }
.settings-surface .setting-card h2,
.settings-surface .setting-card p,
.settings-surface .setting-card .text-action { color: #5b505c !important; }
.settings-surface .key-card h2 {
  width: fit-content;
  margin-top: .85rem;
  padding: .4rem .7rem;
  border: 1px dashed rgba(177,107,107,.30);
  border-radius: 7px;
  color: #a55f63 !important;
  background: rgba(255,255,255,.24);
  font-family: var(--font-number);
}
.settings-surface .danger-zone {
  grid-column: 1 / -1;
  min-height: 0;
  border-right: 0;
  border-bottom: 0;
  background: linear-gradient(90deg, rgba(237,211,208,.44), transparent);
}
.settings-surface .return-form { justify-content: flex-start; }
.settings-surface .return-form input {
  min-height: 46px;
  color: #5c505b;
  border-color: rgba(130,95,104,.18);
  background: rgba(255,255,255,.38);
}
.settings-surface .return-form input::placeholder { color: #a08b92; }
.settings-surface .settings-hotlines {
  width: min(980px, 100%);
  margin: 1.2rem auto 0;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(255,248,229,.13);
  border-radius: 14px;
  background: rgba(255,248,229,.055);
}

.help-surface .hotline-panel {
  grid-template-columns: .72fr 1.28fr;
  gap: 1.5rem;
  max-width: 1080px;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  overflow: hidden;
  border-radius: 23px 34px 26px 30px;
  background:
    repeating-linear-gradient(0deg, rgba(132,91,83,.02) 0 1px, transparent 1px 5px),
    #fff1da;
}
.help-surface .hotline-intro { padding-right: 1rem; border-right: 1px dashed rgba(130,95,102,.18); }
.help-surface .hotline-intro h2 { font-family: var(--font-story); font-size: 1.65rem; }
.help-surface .hotline-list { gap: 0; }
.help-surface .hotline-list a {
  min-height: 78px;
  padding: .9rem .4rem;
  border: 0;
  border-bottom: 1px solid rgba(129,96,103,.12);
  border-radius: 0;
  background: transparent;
  transition: padding-left .22s var(--ease-soft), background-color .22s ease;
}
.help-surface .hotline-list a:last-child { border-bottom: 0; }
.help-surface .hotline-list a:hover { padding-left: .85rem; background: rgba(238,225,241,.42); transform: none; }
.help-surface .hotline-list b { font-family: var(--font-number); font-size: 1rem; }

@media (max-width: 760px) {
  .island-surface .island-keepsakes { padding: 1.35rem .75rem; }
  .island-surface .island-signs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .island-surface .island-signs .stat-card,
  .island-surface .island-signs .stat-card:nth-child(even),
  .island-surface .island-signs .stat-card:nth-child(3),
  .island-surface .island-signs .stat-card:nth-child(4) {
    min-height: 176px;
    padding: 1rem .85rem;
    border-right: 1px solid rgba(133,96,104,.12) !important;
    border-bottom: 1px solid rgba(133,96,104,.12) !important;
  }
  .island-surface .island-signs .stat-card:nth-child(even) { border-right: 0 !important; }
  .island-surface .island-signs .stat-card:nth-child(n+3) { border-bottom: 0 !important; }
  .island-surface .milestone-note { grid-template-columns: 72px minmax(0,1fr); }

  .settings-surface .settings-grid { grid-template-columns: 1fr; padding: .8rem; }
  .settings-surface .setting-card,
  .settings-surface .settings-grid .key-card {
    grid-column: auto;
    min-height: 0;
    padding: 1.25rem .85rem;
    border-right: 0;
  }
  .settings-surface .danger-zone { grid-column: auto; }
  .settings-surface .return-form { flex-direction: column; }
  .settings-surface .return-form .btn { width: 100%; }

  .help-surface .hotline-panel { grid-template-columns: 1fr; padding: 1.25rem 1rem; }
  .help-surface .hotline-intro { padding: 0 0 1rem; border-right: 0; border-bottom: 1px dashed rgba(130,95,102,.18); }
}

/* ═══════════════════════════════════════════════════════════
   V17 · 读信页是一册往返信笺，而不是两张卡片加一列字段
   Web 与 H5 分开排字：桌面保持阅读距离，手机保持手持距离。
   ═══════════════════════════════════════════════════════════ */
.letter-grid {
  width: min(1480px, calc(100% - 2rem));
  max-width: 1480px;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 420px);
  gap: clamp(2rem, 3.2vw, 3.8rem);
  text-align: left;
}
.letter-grid .scene { min-width: 0; }
.letter-grid .reader-heading,
.letter-grid .day-header { text-align: center; }
.letter-grid .reader-heading { margin-top: 2.1rem; }
.letter-grid .reader-heading > p { font-size: 1.02rem; letter-spacing: .05em; }
.letter-grid .day-header { margin-bottom: 2rem; font-size: .95rem; }

.correspondence-folio {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0 auto 1.6rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.66);
  border-radius: 19px 29px 22px 26px;
  color: #524650;
  background:
    radial-gradient(circle at 10% 2%, rgba(255,255,255,.74), transparent 27%),
    repeating-linear-gradient(0deg, rgba(128,91,84,.018) 0 1px, transparent 1px 5px),
    #fff1d4;
  box-shadow: 0 34px 76px rgba(17,16,43,.25), inset 0 0 70px rgba(255,255,255,.25);
}
.correspondence-folio::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: -8px;
  left: 19%;
  width: 92px;
  height: 23px;
  border-radius: 4px;
  background: rgba(226,177,129,.60);
  box-shadow: 0 3px 8px rgba(77,54,68,.08);
  transform: rotate(-1.5deg);
  pointer-events: none;
}
.correspondence-folio::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: clamp(2.05rem, 4.4vw, 3.85rem);
  width: 1px;
  background: rgba(190,111,106,.13);
  pointer-events: none;
}
.correspondence-head {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 clamp(2rem, 5vw, 4.2rem);
  padding: 1.5rem 0 1.15rem;
  border-bottom: 1px dashed rgba(128,91,94,.18);
}
.correspondence-head > span {
  color: #b6736f;
  font: 680 .65rem/1 var(--font-ui);
  letter-spacing: .2em;
}
.correspondence-head > p {
  margin: 0;
  color: #99838a;
  font: 430 .82rem/1.5 var(--font-story);
}

.letter-grid .correspondence-folio .sheet,
.letter-grid .correspondence-folio .sheet:nth-of-type(even) {
  width: auto;
  margin: 0;
  padding: 5.2rem clamp(2.3rem, 5vw, 4.5rem) 3.4rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: #4f434c;
  background-color: transparent;
  box-shadow: none;
  transform: none;
  font: 430 clamp(1.18rem, 1.22vw, 1.31rem)/2.26 var(--font-story);
  letter-spacing: .025em;
}
.letter-grid .correspondence-folio .outgoing-letter {
  min-height: 195px;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 calc(2.26em - 1.35px),
    rgba(137,99,92,.16) calc(2.26em - 1.35px) 2.26em
  );
  background-position: 0 .9em;
  background-origin: content-box;
}
.letter-grid .correspondence-folio .outgoing-letter::after {
  content: "";
  position: absolute;
  left: clamp(2rem, 5vw, 4.2rem);
  right: clamp(2rem, 5vw, 4.2rem);
  bottom: 0;
  height: 1px;
  border-top: 1px dashed rgba(129,94,96,.20);
}
.letter-copy { position: relative; z-index: 2; display: block; min-height: 2.26em; }

.letter-grid .correspondence-folio .sheet-titled .plaque {
  position: absolute;
  top: 1.65rem;
  left: clamp(2.3rem, 5vw, 4.5rem);
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #8f5f65;
  background: transparent;
  box-shadow: none;
  transform: none;
  font: 590 1rem/1.2 var(--font-story);
  letter-spacing: .11em;
}
.letter-grid .correspondence-folio .outgoing-letter .plaque::before,
.letter-grid .correspondence-folio .reply-sheet .plaque::before {
  color: #c08379;
  font: 680 .58rem/1 var(--font-ui);
  letter-spacing: .18em;
}
.letter-grid .correspondence-folio .outgoing-letter .plaque::before { content: "FROM YOUR ISLAND"; }
.letter-grid .correspondence-folio .reply-sheet .plaque::before { content: "RETURNED AT DAWN"; }
.letter-grid .correspondence-folio .sheet-titled .plaque::after {
  content: "";
  width: clamp(50px, 6vw, 86px);
  height: 6px;
  border-bottom: 1px solid rgba(181,110,105,.36);
  border-radius: 50%;
  transform: rotate(-1deg);
}

.letter-grid .correspondence-folio .reply-sheet,
.letter-grid .correspondence-folio .reply-sheet:nth-of-type(even) {
  padding-top: 8.7rem !important;
  padding-bottom: 4rem;
  background-color: rgba(255,248,229,.26);
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 calc(2.26em - 1.45px),
    rgba(137,99,92,.205) calc(2.26em - 1.45px) 2.26em
  );
  background-position: 0 .92em;
  background-origin: content-box;
}
.letter-grid .correspondence-folio .reply-sheet .plaque { top: 1.8rem; }
.correspondence-folio .letter-marks {
  top: 1.3rem;
  left: auto;
  right: clamp(2rem, 4vw, 3.5rem);
  width: 235px;
  height: 5.8rem;
  border-bottom: 1px dashed rgba(136,99,94,.17);
}
.correspondence-folio .letter-marks::before { top: .45rem; right: 5.8rem; font-size: .62rem; }
.correspondence-folio .letter-marks .sheet-stamp { width: 72px; right: 0; }
.correspondence-folio .letter-marks .postmark-img { right: 4.75rem; width: 88px; }
.correspondence-folio .letter-marks .ink-postmark { right: 4.75rem; width: 84px; height: 84px; }
.correspondence-folio .envelope { margin: 2.5rem auto 1rem; }
.correspondence-folio .env-hint { margin-bottom: 2.2rem; color: #8d747b; }
.correspondence-folio #replyBox { padding-top: 0; }
.letter-grid .ai-caption { margin: .8rem auto 1.6rem; font-size: .78rem; }

/* 航行附页是同一个物件：图、手记、路线与纪念邮票连续铺在一张纸上。 */
.letter-aside {
  top: 6rem;
  gap: 0;
  margin-top: 2rem;
}
.voyage-keepsake {
  display: flex;
  flex-direction: column;
  padding-top: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.64);
  border-radius: 24px 33px 26px 30px;
  background:
    repeating-linear-gradient(0deg, rgba(132,91,83,.018) 0 1px, transparent 1px 5px),
    #fff0d3;
  box-shadow: 0 30px 70px rgba(18,18,47,.24), inset 0 0 46px rgba(255,255,255,.22);
}
.voyage-keepsake::before { content: none; }
.voyage-keepsake .aside-fig {
  position: relative;
  inset: auto;
  order: 1;
  height: 275px;
  flex: 0 0 275px;
  border-radius: 0;
}
.letter-aside .aside-bubble {
  position: relative;
  order: 2;
  width: auto;
  margin: 0 clamp(1.4rem, 3vw, 2rem);
  padding: 1.25rem 0 1.15rem 1.05rem;
  border: 0;
  border-bottom: 1px dashed rgba(132,96,99,.17);
  border-radius: 0;
  color: #826f78;
  background: transparent;
  box-shadow: none;
  font: 430 1.01rem/1.85 var(--font-story);
  text-align: left;
}
.letter-aside .aside-bubble::before {
  content: "“";
  position: absolute;
  left: -.2rem;
  top: .8rem;
  color: #c17e74;
  font: 500 1.8rem/1 var(--font-story);
}
.letter-aside .aside-bubble::after { content: none; }
.letter-aside .aside-bubble b { display: block; margin-top: .15rem; color: #9b6468; font-weight: 500; }
.voyage-ledger { order: 3; padding: 1.45rem clamp(1.4rem, 3vw, 2rem) 1.8rem; }
.voyage-ledger header { font-size: .73rem; letter-spacing: .13em; }
.voyage-ledger header b { color: #9a747d; font: 650 .7rem/1 var(--font-number); letter-spacing: .1em; }
.voyage-ledger h3 {
  position: relative;
  width: fit-content;
  margin: 1.05rem 0 1.55rem;
  color: #554957;
  font: 470 clamp(1.8rem, 2.2vw, 2.15rem)/1.3 var(--font-story);
  letter-spacing: .06em;
}
.voyage-ledger h3::after {
  content: "";
  position: absolute;
  left: 3%;
  right: -24%;
  bottom: -.5rem;
  height: 7px;
  opacity: .55;
  border-bottom: 2px solid #c58278;
  border-radius: 50%;
  transform: rotate(-1deg);
}
.route-thread { margin-top: .25rem; font-size: .86rem; }
.keepsake-route { margin: .85rem 0 1.15rem; padding-bottom: 1rem; font-size: .91rem; line-height: 1.8; }
.care-moment {
  margin: .25rem 0 1.15rem;
  padding: .8rem .25rem .8rem .95rem;
  border-left: 2px solid rgba(194,125,115,.35);
  color: #77646d;
  background: linear-gradient(90deg, rgba(237,210,190,.30), transparent);
  font-size: .93rem;
  line-height: 1.8;
}
.keepsake-facts {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 1rem 0;
  border-top: 1px dashed rgba(122,91,96,.17);
  border-bottom: 1px dashed rgba(122,91,96,.17);
}
.keepsake-facts > div,
.keepsake-facts > div:nth-child(2) {
  min-height: 0;
  padding: .15rem 1rem .15rem 0;
  border: 0;
  border-right: 1px solid rgba(126,94,99,.13);
  border-radius: 0;
  background: transparent;
  transform: none;
}
.keepsake-facts > div:nth-child(2) { padding: .15rem 0 .15rem 1rem; border-right: 0; }
.keepsake-facts small { font-size: .76rem; }
.keepsake-facts b { margin: .4rem 0 .25rem; font-size: 1.02rem; }
.keepsake-facts span { font-size: .76rem; }
.arrival-strip {
  margin: 0;
  padding: 1rem .1rem;
  border: 0;
  border-bottom: 1px dashed rgba(122,91,96,.17);
  border-radius: 0;
  color: #71626e;
  background: transparent;
  font-size: .86rem;
}
.keepsake-stamp { margin-top: 1.15rem; padding-top: .25rem; border-top: 0; }
.keepsake-stamp small { font-size: .76rem; }
.keepsake-stamp b { font-size: .88rem; }

@media (max-width: 1079px) {
  .letter-grid { display: block; width: min(820px, calc(100% - 1.5rem)); }
  .letter-aside {
    position: static;
    display: grid;
    width: min(720px, 100%);
    margin: 2.4rem auto 0;
  }
  .voyage-keepsake { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); }
  .voyage-keepsake .aside-fig { grid-column: 1; grid-row: 1 / span 2; height: 100%; min-height: 420px; }
  .letter-aside .aside-bubble { grid-column: 2; grid-row: 1; }
  .voyage-ledger { grid-column: 2; grid-row: 2; }
}

@media (max-width: 640px) {
  .letter-grid { width: 100%; }
  .letter-grid .reader-heading { margin-top: .8rem; }
  .letter-grid .reader-heading .deco-title { font-size: clamp(2.15rem, 11vw, 2.75rem); }
  .letter-grid .reader-heading > p { font-size: .94rem; }
  .letter-grid .day-header { margin-bottom: 1.35rem; font-size: .76rem; }
  .correspondence-folio { border-radius: 17px 24px 19px 22px; }
  .correspondence-folio::after { left: 1.25rem; }
  .correspondence-head {
    display: block;
    margin: 0 1.2rem;
    padding: 1.25rem 0 .9rem;
  }
  .correspondence-head > span { font-size: .56rem; }
  .correspondence-head > p { margin-top: .35rem; font-size: .76rem; }
  .letter-grid .correspondence-folio .sheet,
  .letter-grid .correspondence-folio .sheet:nth-of-type(even) {
    padding: 4.75rem 1.2rem 2.7rem 1.7rem;
    font-size: 1.07rem;
    line-height: 2.18;
  }
  .letter-grid .correspondence-folio .sheet-titled .plaque {
    top: 1.35rem;
    left: 1.7rem;
    gap: .48rem;
    font-size: .88rem;
  }
  .letter-grid .correspondence-folio .sheet-titled .plaque::before { font-size: .49rem; letter-spacing: .1em; }
  .letter-grid .correspondence-folio .sheet-titled .plaque::after { width: 34px; }
  .letter-grid .correspondence-folio .reply-sheet,
  .letter-grid .correspondence-folio .reply-sheet:nth-of-type(even) {
    padding: 9.7rem 1.2rem 3.1rem 1.7rem !important;
  }
  .letter-grid .correspondence-folio .reply-sheet .plaque { top: 1.35rem; }
  .correspondence-folio .letter-marks {
    top: 4rem;
    left: 1.7rem;
    right: 1rem;
    width: auto;
    height: 5.1rem;
  }
  .correspondence-folio .letter-marks::before { right: 5rem; font-size: .48rem; }
  .correspondence-folio .letter-marks .sheet-stamp { width: 61px; }
  .correspondence-folio .letter-marks .postmark-img { right: 4rem; width: 72px; }
  .correspondence-folio .letter-marks .ink-postmark { right: 4rem; width: 70px; height: 70px; }
  .letter-grid .ai-caption { font-size: .7rem; line-height: 1.7; }

  .voyage-keepsake { display: flex; }
  .voyage-keepsake .aside-fig { order: 1; min-height: 0; height: 225px; flex-basis: 225px; }
  .letter-aside .aside-bubble { order: 2; font-size: .94rem; }
  .voyage-ledger { order: 3; }
  .voyage-ledger h3 { font-size: 1.75rem; }
  .route-thread { font-size: .78rem; }
  .keepsake-route, .care-moment { font-size: .86rem; }
  .keepsake-facts small, .keepsake-facts span { font-size: .7rem; }
  .keepsake-facts b { font-size: .92rem; }
  .arrival-strip { font-size: .78rem; }
}

/* V17.1 · 不是同一张纸：两封独立信件被收进同一只深夜信匣。 */
.correspondence-folio {
  padding: 0 clamp(.9rem, 2vw, 1.7rem) clamp(1.2rem, 2.8vw, 2.25rem);
  overflow: visible;
  border-color: rgba(255,248,229,.12);
  border-radius: 25px 35px 27px 32px;
  background:
    radial-gradient(circle at 18% 0, rgba(255,255,255,.10), transparent 28%),
    linear-gradient(145deg, #4b4b78, #30345e 58%, #292e58);
  box-shadow: 0 34px 76px rgba(17,16,43,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.correspondence-folio::before,
.correspondence-folio::after { content: none; }
.correspondence-head {
  margin: 0 clamp(.45rem, 2vw, 1.3rem);
  padding: 1.35rem .25rem 1.15rem;
  border-bottom-color: rgba(255,248,229,.13);
}
.correspondence-head > span { color: #e6bd78; }
.correspondence-head > p { color: rgba(255,248,229,.60); }
.letter-grid .correspondence-folio .sheet,
.letter-grid .correspondence-folio .sheet:nth-of-type(even) {
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 17px 25px 19px 22px;
  background-color: #fff3d8;
  box-shadow: 0 22px 48px rgba(18,17,43,.23), inset 0 0 45px rgba(255,255,255,.25);
}
.letter-grid .correspondence-folio .outgoing-letter {
  margin-top: .35rem;
  margin-bottom: clamp(1.4rem, 2.5vw, 2.2rem);
  transform: rotate(-.12deg);
}
.letter-grid .correspondence-folio .outgoing-letter::after { content: none; }
.letter-grid .correspondence-folio .reply-sheet,
.letter-grid .correspondence-folio .reply-sheet:nth-of-type(even) {
  background-color: #fff0d2;
  transform: translateX(clamp(0px, .45vw, 7px)) rotate(.1deg);
}
.correspondence-folio #replyBox { margin-top: 0; }

@media (max-width: 640px) {
  .correspondence-folio { padding: 0 .55rem 1rem; border-radius: 20px 27px 22px 25px; }
  .correspondence-head { margin-inline: .45rem; }
  .correspondence-head > p { color: rgba(255,248,229,.66); }
  .letter-grid .correspondence-folio .sheet,
  .letter-grid .correspondence-folio .sheet:nth-of-type(even) { border-radius: 14px 20px 16px 18px; }
  .letter-grid .correspondence-folio .reply-sheet,
  .letter-grid .correspondence-folio .reply-sheet:nth-of-type(even) { transform: none; }
}

/* V17.2 · 邮戳收藏袋使用一套坐标：印章只在袋中，文字只在袋下。 */
.collection-page .collection-surface button.postmark-card {
  display: grid;
  grid-template-rows: 132px auto auto auto;
  align-content: start;
  justify-items: center;
  gap: .25rem;
  min-height: 300px;
  padding: 1rem .55rem .9rem;
}
.collection-page .collection-surface button.postmark-card::before {
  top: 1rem;
  left: 11%;
  right: 11%;
  bottom: auto;
  height: 130px;
  border-radius: 8px 8px 16px 16px;
}
.collection-page .collection-surface button.postmark-card > img,
.collection-page .collection-surface button.postmark-card > .static-mark {
  position: relative;
  top: auto;
  right: auto;
  grid-row: 1;
  align-self: center;
  width: 104px;
  height: auto;
  max-height: 112px;
  margin: 0;
  object-fit: contain;
}
.collection-page .collection-surface button.postmark-card > .static-mark {
  display: flex;
  width: 96px;
  height: 96px;
  max-height: none;
}
.collection-page .collection-surface button.postmark-card > b {
  grid-row: 2;
  margin: .55rem 0 0;
  line-height: 1.45;
}
.collection-page .collection-surface button.postmark-card > span:not(.static-mark) { grid-row: 3; }
.collection-page .collection-surface button.postmark-card > i { grid-row: 4; margin-top: .35rem; }

@media (min-width: 761px) {
  .collection-page .collection-surface .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  }
  .collection-page .collection-surface button.gallery-card b { font-size: 1.02rem; }
  .collection-page .collection-surface button.gallery-card > span:not(.static-mark) { font-size: .77rem; }
}

@media (max-width: 760px) {
  .collection-page .collection-surface button.postmark-card {
    grid-template-rows: 112px auto auto;
    min-height: 245px;
    padding-inline: .25rem;
  }
  .collection-page .collection-surface button.postmark-card::before { height: 110px; }
  .collection-page .collection-surface button.postmark-card > img { width: 88px; max-height: 94px; }
  .collection-page .collection-surface button.postmark-card > .static-mark { width: 82px; height: 82px; }
  .collection-page .collection-surface button.postmark-card > i { display: none; }
}

/* V17.3 · 信纸基线、拆信逻辑与可展开航线。 */
.env-seal {
  width: 66px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: #a5422d;
  box-shadow: inset 0 0 0 1px rgba(255,223,188,.16), 0 5px 12px rgba(44,21,27,.28);
}
.env-seal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.letter-grid .correspondence-folio .outgoing-letter,
.letter-grid .correspondence-folio .reply-sheet,
.letter-grid .correspondence-folio .reply-sheet:nth-of-type(even) {
  background-position: 0 1.54em;
}
.letter-grid .correspondence-folio .reply-sheet .plaque { z-index: 4; }
.correspondence-folio .letter-marks { z-index: 1; overflow: visible; }
.correspondence-folio .letter-marks .sheet-stamp { z-index: 3; }
.correspondence-folio .letter-marks .postmark-img {
  top: 4.2rem !important;
  right: 3.5rem;
  bottom: auto;
  z-index: 1;
  width: 148px;
  opacity: .27;
  filter: saturate(.72) contrast(.92);
  mix-blend-mode: multiply;
  transform: rotate(-11deg);
}
.correspondence-folio .letter-marks .ink-postmark {
  top: 4.1rem;
  right: 3.7rem;
  bottom: auto;
  z-index: 1;
  width: 138px;
  height: 138px;
  opacity: .24;
  mix-blend-mode: multiply;
}
.letter-grid .correspondence-folio .reply-body { z-index: 2; }
@keyframes stamp-press {
  from { opacity: 0; transform: rotate(-11deg) scale(1.55); }
  60% { opacity: .38; transform: rotate(-11deg) scale(.96); }
  to { opacity: .27; transform: rotate(-11deg) scale(1); }
}

.route-journal {
  margin: .95rem 0 1.2rem;
  padding: 0;
  overflow: hidden;
  border-top: 1px dashed rgba(120,89,96,.18);
  border-bottom: 1px dashed rgba(120,89,96,.18);
  color: #665865;
}
.route-journal summary {
  position: relative;
  display: grid;
  gap: .35rem;
  padding: .9rem 2rem .9rem .1rem;
  cursor: pointer;
  list-style: none;
  text-align: left;
}
.route-journal summary::-webkit-details-marker { display: none; }
.route-journal summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: .15rem;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(180,111,107,.28);
  border-radius: 50%;
  color: #ad7474;
  font: 400 1rem/1 var(--font-ui);
  transform: translateY(-50%);
  transition: transform .25s var(--ease-soft), background-color .25s ease;
}
.route-journal[open] summary::after { background: rgba(234,207,190,.38); transform: translateY(-50%) rotate(45deg); }
.route-journal summary span { color: #9f686c; font: 590 .82rem/1.4 var(--font-story); letter-spacing: .055em; }
.route-journal summary b {
  overflow: hidden;
  color: #8b7986;
  font: 430 .78rem/1.55 var(--font-story);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.route-journal ol {
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  padding: .25rem 0 .9rem;
  list-style: none;
}
.route-journal ol::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  bottom: 1.8rem;
  left: 17px;
  width: 1px;
  background: linear-gradient(#d09183, #d4bdad 72%, #8eae99);
}
.route-journal li {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  padding: .55rem 0;
}
.route-journal li > i {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(182,119,111,.34);
  border-radius: 50%;
  color: #a56f70;
  background: #fff0d5;
  box-shadow: 0 0 0 5px rgba(255,240,213,.76);
  font: 650 .58rem/1 var(--font-number);
}
.route-journal li > div { min-width: 0; padding-top: .15rem; }
.route-journal li b { display: block; color: #5e515e; font: 530 .94rem/1.4 var(--font-story); }
.route-journal li small { display: block; margin-top: .16rem; color: #9a8790; font: 420 .72rem/1.5 var(--font-story); }
.route-journal li a { display: inline-block; margin-top: .25rem; color: #aa6e6d; font-size: .7rem; text-decoration: none; border-bottom: 1px solid rgba(170,110,109,.24); }
.route-journal .route-home > i { color: #a86469; border-color: #cb847d; background: #f6d9ca; }
.route-journal .route-postoffice > i { color: #648674; border-color: #8eae99; background: #dbe9dc; }
.route-journal[open] li { animation: route-stop-in .34s var(--ease-soft) both; }
.route-journal[open] li:nth-child(2) { animation-delay: .035s; }
.route-journal[open] li:nth-child(3) { animation-delay: .07s; }
.route-journal[open] li:nth-child(4) { animation-delay: .105s; }
.route-journal[open] li:nth-child(5) { animation-delay: .14s; }
@keyframes route-stop-in { from { opacity: 0; transform: translateY(-5px); } }

.island-route-journal {
  width: min(760px, 94%);
  margin: 1.5rem auto 0;
  padding: .3rem 1.25rem 1rem;
  border: 1px solid rgba(255,255,255,.60);
  border-radius: 18px 27px 20px 24px;
  color: #655762;
  background:
    repeating-linear-gradient(0deg, rgba(132,91,83,.018) 0 1px, transparent 1px 5px),
    #fff0d6;
  box-shadow: 0 22px 52px rgba(18,18,47,.18), inset 0 0 35px rgba(255,255,255,.22);
}
.island-route-journal summary { padding-block: 1.1rem; }
.island-route-journal summary span { font-size: .98rem; }
.island-route-journal summary b { font-size: .87rem; }
.island-route-journal footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-top: .5rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(121,90,95,.18);
  color: #897681;
  font: 420 .79rem/1.65 var(--font-story);
}
.island-route-journal footer a { flex: 0 0 auto; color: #a56669; text-decoration: none; }

@media (max-width: 640px) {
  .letter-grid .correspondence-folio .outgoing-letter,
  .letter-grid .correspondence-folio .reply-sheet,
  .letter-grid .correspondence-folio .reply-sheet:nth-of-type(even) { background-position: 0 1.5em; }
  .correspondence-folio .letter-marks .postmark-img { top: 4.2rem !important; right: 2.4rem; width: 116px; opacity: .25; }
  .correspondence-folio .letter-marks .ink-postmark { top: 4.1rem; right: 2.5rem; width: 108px; height: 108px; opacity: .22; }
  .route-thread { font-size: .74rem; }
  .route-thread span { white-space: normal; }
  .route-journal summary b { font-size: .73rem; }
  .island-route-journal { width: 100%; padding-inline: .9rem; }
  .island-route-journal footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .route-journal[open] li { animation: none !important; }
}

/* V17.4 · 邮戳馆：一枚真实印记，而不是图片与占位章叠放。 */
.collection-preview [hidden] { display: none !important; }

.postmark-preview .preview-object {
  background:
    radial-gradient(circle at 48% 42%, rgba(255,253,247,.76), transparent 39%),
    linear-gradient(145deg, rgba(232,228,242,.96), rgba(244,220,213,.84));
}
.postmark-preview .preview-mat {
  width: min(342px, 92%);
  min-height: 382px;
  padding: 2.2rem 1.6rem;
  overflow: hidden;
  border: 0;
  border-radius: 18px 25px 20px 22px;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(178,112,113,.08) 12.2% 12.6%, transparent 12.8%),
    repeating-linear-gradient(0deg, rgba(113,87,94,.035) 0 1px, transparent 1px 7px),
    #fffaf0;
  box-shadow: 0 24px 48px rgba(68,50,72,.15), inset 0 0 34px rgba(191,141,118,.07);
  transform: rotate(-1.15deg);
  clip-path: polygon(.8% 1.5%, 98.8% .5%, 99.5% 97.8%, 96.6% 99.4%, 2% 98.7%, .2% 3.8%);
}
.postmark-preview .preview-mat::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px dashed rgba(170,116,117,.13);
  border-radius: 10px 15px 12px 14px;
  pointer-events: none;
}
.postmark-preview .preview-mat > img {
  position: relative;
  z-index: 2;
  width: min(306px, 98%);
  max-height: 330px;
  object-fit: contain;
  filter: drop-shadow(0 7px 5px rgba(70,66,105,.10));
  transform: rotate(-1deg);
}
.postmark-preview .preview-mat > .static-mark { position: relative; z-index: 2; }

.collection-page .collection-surface button.postmark-card > img,
.collection-page .collection-surface button.postmark-card > .static-mark {
  transition: transform .38s var(--ease-soft), filter .38s ease, opacity .3s ease;
}
.collection-page .collection-surface button.postmark-card:hover > img,
.collection-page .collection-surface button.postmark-card:focus-visible > img {
  transform: translateY(-3px) rotate(-1.6deg) scale(1.065);
  filter: drop-shadow(0 8px 7px rgba(64,57,91,.14));
}

@media (min-width: 761px) {
  .collection-page .collection-surface button.postmark-card {
    grid-template-rows: 150px auto auto auto;
    min-height: 318px;
  }
  .collection-page .collection-surface button.postmark-card::before { height: 148px; }
  .collection-page .collection-surface button.postmark-card > img { width: 126px; max-height: 134px; }
}

@media (max-width: 760px) {
  .postmark-preview .preview-mat { width: min(250px, 84%); min-height: 260px; padding: 1.3rem; }
  .postmark-preview .preview-mat > img { width: min(220px, 96%); max-height: 224px; }
}

/* V17.5 · 收藏册改成真正的夜航信柜，不再使用程序时间轴列表。 */
.archive-surface.archive-stack {
  width: min(1320px, calc(100% - clamp(1rem, 5vw, 5rem)));
  margin-top: -8svh;
  padding: 0;
}
.archive-book {
  padding: clamp(1.25rem, 3vw, 2.8rem);
  border-radius: 31px 42px 34px 38px;
  background:
    radial-gradient(circle at 88% 0, rgba(255,255,255,.72), transparent 31%),
    repeating-linear-gradient(0deg, rgba(135,96,84,.022) 0 1px, transparent 1px 5px),
    #f5ead3;
}
.archive-book::before { left: 24%; width: 94px; height: 25px; }
.archive-book-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: .8rem .55rem 1.65rem;
  border-bottom: 0;
}
.archive-title-block { min-width: 0; max-width: 780px; }
.archive-kicker {
  display: block;
  margin-bottom: .75rem;
  color: #b06e6d;
  font: 680 .68rem/1.2 var(--font-ui);
  letter-spacing: .22em;
}
.archive-title-line { display: flex; align-items: flex-end; gap: 1.25rem; }
.archive-title-line h2 {
  margin: 0;
  color: #4f4654;
  font: 480 clamp(2.65rem, 4.5vw, 4.65rem)/1.12 var(--font-hand);
  letter-spacing: .035em;
}
.archive-title-block > p {
  max-width: 42rem;
  margin: 1.15rem 0 0;
  color: #86737a;
  font: 430 1rem/1.85 var(--font-story);
}
.archive-total {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  display: grid;
  place-content: center;
  gap: .08rem;
  margin-bottom: .4rem;
  color: #a76568;
  text-align: center;
  border: 1px solid rgba(174,101,105,.42);
  border-radius: 50%;
  transform: rotate(5deg);
}
.archive-total b { font: 600 1.3rem/1 var(--font-number); }
.archive-total small { font: 540 .55rem/1 var(--font-story); letter-spacing: .08em; }
.archive-compose,
.archive-compose:visited {
  min-width: 176px;
  min-height: 104px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  column-gap: .65rem;
  row-gap: .3rem;
  margin: 0;
  padding: 1rem 1.25rem;
  box-sizing: border-box;
  border-radius: 19px 27px 20px 25px;
}
.archive-compose i { grid-row: 1 / 3; align-self: center; font-size: 1.25rem; }
.archive-compose span { font-size: 1rem; }
.archive-compose small { color: rgba(87,76,88,.66); font: 430 .67rem/1.2 var(--font-story); }

.archive-night-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin: .25rem .4rem 0;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(177,107,105,.12);
  border-radius: 14px 23px 16px 21px;
  background: linear-gradient(96deg, rgba(244,211,197,.82), rgba(251,231,208,.68));
  box-shadow: 0 8px 20px rgba(91,64,71,.06);
}
.archive-note-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #ae6c6b;
  border: 1px solid rgba(174,108,107,.46);
  border-radius: 50%;
  font-family: var(--font-story);
  transform: rotate(-7deg);
}
.archive-night-note small { color: #b06f6e; font: 660 .62rem/1 var(--font-ui); letter-spacing: .15em; }
.archive-night-note p { margin: .22rem 0 0; color: #75646e; font: 450 .9rem/1.55 var(--font-story); }
.archive-night-note strong {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .72rem;
  color: #a45f62;
  border-radius: 999px;
  background: rgba(255,248,236,.67);
  font: 550 .72rem/1 var(--font-story);
  white-space: nowrap;
}
.archive-night-note strong i { width: 7px; height: 7px; border-radius: 50%; background: #c87772; box-shadow: 0 0 0 4px rgba(200,119,114,.11); }
.archive-night-note strong.quiet { color: #758b7c; }
.archive-night-note strong.quiet i { background: #80a28a; box-shadow: 0 0 0 4px rgba(128,162,138,.12); }

.archive-book .folder-tabs {
  gap: .4rem;
  margin: 1.45rem .65rem 0;
  padding: 0;
  border-bottom: 1px solid rgba(126,91,98,.12);
}
.archive-book .folder-tabs button {
  min-height: 46px;
  padding: .65rem 1.1rem .85rem;
  border-radius: 13px 13px 0 0;
  font-size: .84rem;
}
.archive-book .folder-tabs button.on { transform: translateY(1px); }
.archive-book [hidden] { display: none !important; }
.archive-cabinet { padding: 1.8rem .4rem .4rem; }
.cabinet-month { margin: 0 0 2rem; }
.cabinet-month-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding: 0 .3rem .75rem;
  border-bottom: 1px dashed rgba(141,103,105,.16);
}
.cabinet-month-head > span { display: flex; align-items: baseline; gap: .65rem; }
.cabinet-month-head small { color: #b47373; font: 620 .78rem/1 var(--font-number); letter-spacing: .08em; }
.cabinet-month-head b { color: #564b57; font: 500 1.65rem/1 var(--font-story); letter-spacing: .1em; }
.cabinet-month-head p { margin: 0; color: #a08b8f; font: 430 .78rem/1.5 var(--font-story); }
.cabinet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cabinet-letter {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 164px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.15rem 1.3rem;
  overflow: hidden;
  color: inherit;
  border: 1px solid rgba(131,96,91,.12);
  border-radius: 13px 24px 15px 21px;
  background:
    linear-gradient(145deg, transparent 0 76%, rgba(174,122,111,.055) 76.2% 76.5%, transparent 76.8%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(128,101,97,.065) 31px 32px),
    #fff9ec;
  box-shadow: 0 11px 22px rgba(79,58,66,.075), inset 0 0 22px rgba(255,255,255,.42);
  text-decoration: none;
  transition: transform .28s var(--ease-soft), box-shadow .28s ease, border-color .28s ease;
}
.cabinet-letter:nth-child(even) { transform: rotate(.16deg); }
.cabinet-letter:hover,
.cabinet-letter:focus-visible {
  z-index: 2;
  color: inherit;
  border-color: rgba(183,114,110,.28);
  box-shadow: 0 18px 32px rgba(70,53,63,.13), inset 0 0 22px rgba(255,255,255,.5);
  transform: translateY(-4px) rotate(-.18deg);
}
.cabinet-letter.unread { background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(161,104,102,.075) 31px 32px), #fff3e6; }
.cabinet-date {
  align-self: stretch;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .2rem;
  color: #9b7e83;
  border-right: 1px solid rgba(181,112,110,.16);
  text-align: center;
}
.cabinet-date b { color: #5e505a; font: 560 2rem/1 var(--font-number); }
.cabinet-date span { color: #b26d6e; font: 600 .66rem/1 var(--font-story); letter-spacing: .12em; }
.cabinet-date small { margin-top: .25rem; font: 480 .66rem/1 var(--font-number); }
.cabinet-copy { min-width: 0; align-self: center; text-align: left; }
.cabinet-copy > small {
  display: block;
  margin-bottom: .45rem;
  color: #ba7b77;
  font: 650 .56rem/1.2 var(--font-ui);
  letter-spacing: .15em;
}
.cabinet-copy > b {
  display: -webkit-box;
  overflow: hidden;
  color: #504650;
  font: 460 1.14rem/1.6 var(--font-story);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.cabinet-state {
  width: fit-content;
  display: block;
  margin-top: .65rem;
  padding: .28rem .55rem;
  color: #8d777d;
  border-radius: 999px;
  background: rgba(237,224,211,.7);
  font: 470 .7rem/1.2 var(--font-story);
}
.cabinet-state.glow { color: #a65d61; background: rgba(241,204,191,.68); }
.cabinet-stamp {
  justify-self: end;
  display: block;
  width: 68px;
  transform: rotate(3.5deg);
  filter: saturate(.9) drop-shadow(0 5px 4px rgba(64,53,58,.14));
  transition: transform .3s var(--ease-soft);
}
.cabinet-stamp img { width: 100%; display: block; }
.cabinet-letter:hover .cabinet-stamp { transform: rotate(1deg) scale(1.055); }
.cabinet-stamp-slot {
  justify-self: end;
  width: 58px;
  height: 68px;
  display: grid;
  place-items: center;
  color: #bba696;
  border: 1px dashed rgba(152,119,110,.25);
  background: rgba(244,235,221,.55);
}
.cabinet-open {
  position: absolute;
  right: 1.2rem;
  bottom: .6rem;
  color: rgba(158,106,106,.68);
  font: 500 .62rem/1 var(--font-story);
  letter-spacing: .06em;
}
.cabinet-open i { font-style: normal; transition: transform .25s var(--ease-soft); }
.cabinet-letter:hover .cabinet-open i { display: inline-block; transform: translateX(4px); }
/* 收藏丝带必须脱离网格流——否则占掉第一列，把日期/摘要/邮票整体挤位错行 */
.cabinet-letter .lc-ribbon {
  position: absolute; top: -1px; right: 5.6rem; width: 15px; height: 25px; z-index: 3;
  background: #d9a941; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}

@media (max-width: 900px) {
  .archive-surface.archive-stack { width: calc(100% - 1rem); margin-top: -5svh; }
  .archive-book { padding: 1.15rem .9rem 1rem; border-radius: 24px 30px 26px 28px; }
  .archive-book-head { grid-template-columns: 1fr; align-items: start; gap: 1.15rem; padding: .65rem .35rem 1.15rem; }
  .archive-title-line { position: relative; display: block; }
  .archive-title-line h2 { font-size: clamp(2.35rem, 10vw, 3.2rem); }
  .archive-title-block > p { font-size: .88rem; }
  .archive-total { position: absolute; top: .25rem; right: 0; width: 54px; height: 54px; margin: 0; }
  .archive-compose { width: 100%; min-height: 64px; grid-template-columns: auto 1fr auto; margin: 0; }
  .archive-compose i { grid-row: auto; }
  .archive-compose small { justify-self: end; }
  .archive-night-note { grid-template-columns: auto 1fr; margin-inline: .15rem; padding: .85rem; }
  .archive-night-note strong { grid-column: 2; width: fit-content; }
  .archive-book .folder-tabs { margin: 1.1rem .2rem 0; overflow-x: auto; scrollbar-width: none; }
  .archive-book .folder-tabs::-webkit-scrollbar { display: none; }
  .archive-book .folder-tabs button { flex: 0 0 auto; }
  .archive-cabinet { padding: 1.25rem .1rem .2rem; }
  .cabinet-month-head { align-items: flex-start; flex-direction: column; gap: .45rem; }
  .cabinet-grid { grid-template-columns: 1fr; gap: .8rem; }
  .cabinet-letter { min-height: 142px; grid-template-columns: 62px minmax(0, 1fr) 58px; gap: .75rem; padding: .9rem .8rem 1.2rem; }
  .cabinet-date b { font-size: 1.55rem; }
  .cabinet-copy > b { font-size: .98rem; line-height: 1.55; }
  .cabinet-copy > small { font-size: .5rem; }
  .cabinet-stamp { width: 54px; }
  .cabinet-stamp-slot { width: 48px; height: 57px; }
  .cabinet-open { right: .8rem; bottom: .45rem; }
}

/* V17.6 · 信柜首部回到同一张纸的编辑秩序：侧注代替徽章和 CTA 卡片。 */
.archive-book-head {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 285px);
  align-items: center;
  gap: clamp(2.4rem, 5vw, 5rem);
  padding: 1rem .65rem 1.7rem;
}
.archive-title-block { max-width: 800px; }
.archive-head-aside {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: .4rem 0 .35rem clamp(1.4rem, 2.8vw, 2.35rem);
  border-left: 1px dashed rgba(144,101,104,.23);
}
.archive-total {
  position: static;
  width: auto;
  height: auto;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: .48rem;
  margin: 0;
  color: #a86769;
  text-align: left;
  border: 0;
  border-radius: 0;
  transform: none;
}
.archive-total::before {
  content: "NO.";
  color: #c18b84;
  font: 680 .58rem/1 var(--font-ui);
  letter-spacing: .16em;
}
.archive-total small,
.archive-total em {
  color: #9b8185;
  font: 500 .72rem/1 var(--font-story);
  font-style: normal;
  letter-spacing: .06em;
}
.archive-total b { color: #9f6064; font: 590 1.55rem/1 var(--font-number); }
.archive-head-aside > p {
  margin: 1.05rem 0 .9rem;
  color: #817078;
  font: 430 .87rem/1.75 var(--font-story);
}
.archive-compose,
.archive-compose:visited {
  position: relative;
  width: fit-content;
  min-width: 0;
  min-height: 0;
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: .65rem;
  margin: 0;
  padding: .15rem 0 .42rem;
  color: #8f5e64;
  border: 0;
  border-bottom: 1px solid rgba(158,91,96,.38);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: 560 .91rem/1.2 var(--font-story);
}
.archive-compose::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: #9e5b60;
  transition: width .28s var(--ease-soft);
}
.archive-compose:hover {
  color: #754c54;
  background: transparent;
  box-shadow: none;
  transform: translateX(3px);
}
.archive-compose:hover::after { width: 100%; }
.archive-compose:active { box-shadow: none; transform: translateX(1px); }
.archive-compose span { font-size: inherit; }
.archive-compose i { grid-row: auto; font: normal 1rem/1 var(--font-story); }

.archive-night-note {
  gap: .9rem;
  margin: 0 .65rem;
  padding: .9rem .15rem;
  border: 0;
  border-top: 1px dashed rgba(145,103,106,.17);
  border-bottom: 1px dashed rgba(145,103,106,.17);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.archive-note-mark {
  width: 34px;
  height: 34px;
  color: #b07270;
  border-color: rgba(174,108,107,.34);
  font-size: .8rem;
}
.archive-night-note small { font-size: .58rem; }
.archive-night-note p { font-size: .86rem; }
.archive-night-note strong { padding: .35rem 0; background: transparent; }

.archive-book .folder-tabs { margin-top: .7rem; gap: 1.25rem; }
.archive-book .folder-tabs button,
.archive-book .folder-tabs button:nth-child(even) {
  position: relative;
  min-height: 42px;
  padding: .65rem .1rem .75rem;
  color: #9a8387;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.archive-book .folder-tabs button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
  border-radius: 999px;
}
.archive-book .folder-tabs button.on {
  color: #765c65;
  background: transparent;
  box-shadow: none;
}
.archive-book .folder-tabs button.on::after { background: #c68279; }

/* 桌面端独立排字：纸面越大，状态和辅助文字也必须能被正常阅读。 */
@media (min-width: 901px) {
  .dispatch-ledger-head .eyebrow { font-size: .75rem; }
  .dispatch-ledger .ledger-script { font-size: clamp(2rem, 2.8vw, 2.75rem); }
  .dispatch-ledger-head > p { gap: .34rem; font-size: 1.05rem; }
  .dispatch-ledger-head > p b { font-size: .94rem; }
  .dispatch-ledger .paper-object { padding: clamp(1.8rem, 3vw, 2.6rem) !important; }
  .dispatch-ledger .section-heading .eyebrow { font-size: .71rem; }
  .dispatch-ledger .section-heading h3 { font-size: clamp(1.42rem, 1.8vw, 1.72rem); }
  .dispatch-ledger .section-heading a { font-size: .98rem; }
  .dispatch-ledger .route-status { font-size: .92rem; }
  .dispatch-ledger .route-rail li span { font-size: .96rem; }
  .dispatch-ledger .route-meta { font-size: .96rem; }
  .dispatch-ledger .weather-mood { font-size: 1rem; line-height: 1.75; }
  .dispatch-ledger .reply-copy b { font-size: 1rem; line-height: 1.45; }
  .dispatch-ledger .reply-copy small { font-size: .88rem; }
  .dispatch-ledger .reply-arrow { font-size: .9rem; }
  .dispatch-ledger .post-office-note p { font-size: 1rem; line-height: 1.7; }
  .dispatch-ledger .note-time { font-size: .88rem; }

  /* 用户原信不再贴着信纸顶端，落在纸面的视觉中段。 */
  .letter-grid .correspondence-folio .outgoing-letter {
    min-height: 245px;
    padding-top: 7.15rem;
    padding-bottom: 3.2rem;
  }
  .letter-grid .correspondence-folio .outgoing-letter .plaque { top: 2.55rem; }
}

@media (max-width: 900px) {
  .archive-book-head { grid-template-columns: 1fr; gap: 0; }
  .archive-head-aside {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.1rem;
    row-gap: .45rem;
    margin-top: 1.15rem;
    padding: 1rem 0 .15rem;
    border-top: 1px dashed rgba(144,101,104,.2);
    border-left: 0;
  }
  .archive-total { grid-row: 1 / 3; align-self: center; display: grid; grid-template-columns: auto auto; column-gap: .35rem; }
  .archive-total::before { grid-column: 1 / 3; }
  .archive-total small { display: none; }
  .archive-head-aside > p { margin: 0; font-size: .78rem; }
  .archive-compose { width: fit-content; min-height: 0; grid-template-columns: none; margin: 0; padding: .1rem 0 .3rem; font-size: .84rem; }
  .archive-night-note { margin-inline: .1rem; padding-inline: .15rem; }
  .archive-book .folder-tabs { margin-top: .65rem; gap: 1rem; }
}

/* ═══════════════════════════════════════════════════════════
   V17.7 · 写信是一段连续动作，不是叠在插画上的表单
   桌面与 H5 各自排字；信纸、信封、邮筒共用同一套叙事语言。
   ═══════════════════════════════════════════════════════════ */
.writing-studio {
  width: min(1320px, 100%);
  aspect-ratio: 16 / 10;
  border-radius: 30px;
  background: #20294f;
}
.writing-studio::after {
  z-index: 1;
  box-shadow: inset 0 0 58px rgba(49,34,46,.18), inset 0 -48px 56px rgba(21,23,53,.12);
}
.writing-studio-art img { object-position: center center; }
.write-sheet-v2 {
  left: 5.4%;
  top: 24.5%;
  width: 58.5%;
  height: 70%;
  padding: clamp(1.45rem, 2.2vw, 2rem) clamp(1.55rem, 2.7vw, 2.5rem) 1.15rem;
  color: #584b53;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 22px 26px 21px 24px;
  background:
    linear-gradient(90deg, transparent 0 3.8rem, rgba(191,112,107,.13) 3.8rem 3.9rem, transparent 3.9rem),
    repeating-linear-gradient(0deg, rgba(134,96,79,.018) 0 1px, transparent 1px 5px),
    linear-gradient(112deg, rgba(255,251,237,.985), rgba(250,237,210,.975));
  box-shadow: 0 26px 64px rgba(45,32,52,.22), inset 0 0 44px rgba(255,255,255,.34);
  transform: none;
  overflow: hidden;
}
.write-sheet-v2::before {
  top: -8px;
  left: 17%;
  width: 82px;
  height: 22px;
  background: rgba(226,176,131,.64);
  box-shadow: 0 2px 5px rgba(107,73,56,.08);
}
.write-sheet-v2::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -20px;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(161,115,95,.1);
  background: linear-gradient(135deg, rgba(224,202,166,.08) 0 49%, #ead5ad 50% 52%, #f8e9ca 53%);
  transform: rotate(3deg);
  pointer-events: none;
}
.write-letter-head {
  position: relative;
  flex: 0 0 auto;
  padding: .15rem 0 .9rem;
  border-bottom: 1px dashed rgba(142,98,96,.2);
}
.write-letter-head > span {
  display: block;
  color: #b16f6c;
  font: 690 .64rem/1 var(--font-ui);
  letter-spacing: .2em;
}
.write-letter-head h1 {
  margin: .52rem 0 .28rem;
  color: #574b5a;
  font: 480 clamp(2rem, 3vw, 2.7rem)/1.05 var(--font-hand);
  letter-spacing: .06em;
}
.write-letter-head p {
  margin: 0;
  color: #8a7780;
  font: 430 clamp(.88rem, 1.2vw, 1rem)/1.7 var(--font-story);
}
.letter-to {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  flex: 0 0 auto;
  padding: .72rem .05rem .58rem;
  color: #796972;
  border-bottom: 1px solid rgba(147,105,97,.14);
}
.letter-to span {
  color: #bc7771;
  font: 700 .64rem/1 var(--font-ui);
  letter-spacing: .2em;
}
.letter-to b { color: #655761; font: 520 1rem/1.4 var(--font-story); }
.letter-to small {
  color: #a28d8f;
  font: 430 .73rem/1.4 var(--font-story);
}
.letter-starters {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .7rem 1rem;
  flex: 0 0 auto;
  margin: .65rem 0 .45rem;
  text-align: left;
}
.letter-starters > span {
  color: #a58a8c;
  font: 430 .7rem/1.4 var(--font-story);
  letter-spacing: .02em;
}
.letter-starters > div {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  min-width: 0;
}
.letter-starters button,
.letter-starters button:nth-child(2),
.letter-starters button:nth-child(3) {
  min-height: 0;
  padding: .12rem 0 .22rem;
  color: #8f7074;
  border: 0;
  border-bottom: 1px solid rgba(173,111,108,.24);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: 430 .73rem/1.45 var(--font-story);
  transform: none;
}
.letter-starters button:hover,
.letter-starters button:focus-visible {
  color: #6f535b;
  border-bottom-color: #b77370;
  background: transparent;
  outline: 0;
  transform: translateY(-1px);
}
.letter-body-field {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin-top: .1rem;
  padding-left: .15rem;
}
.letter-salutation {
  display: block;
  flex: 0 0 2.15rem;
  color: #594d58;
  border-bottom: 1.4px solid rgba(161,117,106,.24);
  font: 520 1.03rem/2.15rem var(--font-story);
}
.write-sheet-v2 .letter-body-field textarea {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 5.8rem;
  margin: 0;
  padding: 0 .1rem;
  color: #514550;
  border: 0;
  outline: 0;
  background: repeating-linear-gradient(180deg, transparent 0 calc(2.15rem - 1.4px), rgba(151,108,101,.22) calc(2.15rem - 1.4px) 2.15rem);
  font: 440 clamp(1.02rem, 1.35vw, 1.16rem)/2.15rem var(--font-story);
  letter-spacing: .025em;
  scrollbar-color: rgba(158,112,106,.30) transparent;
}
.write-sheet-v2 .letter-body-field textarea::placeholder { color: rgba(89,72,83,.42); }
.letter-sheet-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem;
  flex: 0 0 auto;
  padding-top: .75rem;
}
.letter-sheet-footer .letter-sign {
  order: 1;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: .28rem;
  color: #907c82;
  font-family: var(--font-number);
  white-space: nowrap;
}
.letter-sign > span { color: #9d696c; font-size: .96rem; }
.letter-sign small { font-size: .65rem; }
.letter-sign em {
  margin-left: .5rem;
  color: #aa9290;
  font: 430 .69rem/1.4 var(--font-story);
  font-style: normal;
}
.letter-delivery {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .85rem;
}
.letter-delivery > small { color: #9b8689; font: 420 .7rem/1.5 var(--font-story); }
.letter-sheet-footer .send-letter,
.letter-sheet-footer .send-letter:hover {
  position: relative !important;
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  padding: .35rem 0 .42rem;
  color: #79545b;
  border: 0;
  border-bottom: 1px solid rgba(157,91,94,.46);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: 570 .9rem/1.2 var(--font-story);
  transform: none;
}
.letter-sheet-footer .send-letter::before {
  content: "邮";
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  color: #a35d5e;
  border: 1px solid rgba(169,89,89,.42);
  border-radius: 50%;
  font: 500 .69rem/1 var(--font-story);
  transition: transform .28s var(--ease-soft), background-color .28s ease;
}
.letter-sheet-footer .send-letter:hover::before { background: rgba(205,133,120,.12); transform: rotate(-7deg) scale(1.05); }
.letter-sheet-footer .send-letter:disabled { opacity: .58; cursor: wait; }
.write-page:focus-within .writing-studio-art { opacity: .86; filter: saturate(.92) brightness(.98); }
.write-page:focus-within .letter-starters { opacity: 1; filter: none; }
.write-sheet-v2:focus-within { box-shadow: 0 30px 70px rgba(44,35,63,.25), 0 0 0 3px rgba(245,196,126,.13); }

/* 寄出后是一张留在桌边的取信凭条，不再像物流状态组件。 */
.posted-surface .pickup-receipt {
  position: relative;
  width: min(900px, 100%);
  margin: 0 auto;
  padding: clamp(1.35rem, 2.5vw, 2rem) clamp(1.25rem, 3vw, 2.5rem) 1.5rem;
  color: #5c505c;
  border: 1px solid rgba(255,255,255,.66);
  border-radius: 24px 29px 22px 27px;
  background:
    linear-gradient(90deg, transparent 0 4.4rem, rgba(190,112,105,.1) 4.4rem 4.5rem, transparent 4.5rem),
    repeating-linear-gradient(0deg, rgba(137,95,78,.018) 0 1px, transparent 1px 5px),
    #fff0d8;
  box-shadow: 0 24px 58px rgba(20,18,50,.2), inset 0 0 34px rgba(255,255,255,.28);
  text-align: left;
}
.posted-surface .pickup-receipt::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 18%;
  width: 78px;
  height: 20px;
  border-radius: 3px;
  background: rgba(228,181,136,.62);
  transform: rotate(1.5deg);
}
.pickup-receipt-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed rgba(137,93,91,.2);
}
.pickup-receipt-head > span { color: #b06f6e; font: 680 .62rem/1 var(--font-ui); letter-spacing: .2em; }
.pickup-receipt-head > div { display: flex; align-items: baseline; gap: .75rem; }
.pickup-receipt-head b { color: #594d5a; font: 520 1.3rem/1.3 var(--font-hand); letter-spacing: .05em; }
.pickup-receipt-head small { color: #9d898d; font: 430 .72rem/1.4 var(--font-story); }
.night-passage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  margin: 1.55rem 0 1.25rem;
  padding: 0;
  list-style: none;
}
.night-passage li { position: relative; display: grid; grid-template-columns: 23px 1fr; grid-template-rows: auto auto; column-gap: .72rem; text-align: left; }
.night-passage li:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 10px;
  right: calc(100% + .55rem);
  width: calc(100% - 1.25rem);
  border-top: 1px dashed rgba(162,118,106,.34);
}
.night-passage i {
  grid-row: 1 / 3;
  align-self: start;
  width: 18px;
  height: 18px;
  margin-top: .1rem;
  border: 2px solid #c8aa91;
  border-radius: 50%;
  background: #fff6e6;
  box-shadow: 0 0 0 4px rgba(186,139,111,.08);
}
.night-passage .done i { border-color: #8fad98; background: #a8c5ae; }
.night-passage .next i {
  border-color: #c98376;
  background: #f5c7ae;
  box-shadow: 0 0 0 6px rgba(207,132,116,.13), 0 0 18px rgba(222,152,111,.28);
  animation: voyage-dot 2.4s ease-in-out infinite;
}
.night-passage .morning i { border-color: #9a9dbd; background: #d9d9e7; }
.night-passage small { color: #a18b8c; font: 430 .7rem/1.35 var(--font-story); }
.night-passage b { margin-top: .12rem; color: #61535f; font: 540 .94rem/1.45 var(--font-story); }
.pickup-receipt blockquote {
  margin: 0;
  padding: .85rem 1rem .85rem 1.25rem;
  color: #806d75;
  border-left: 2px solid rgba(192,119,112,.38);
  background: linear-gradient(90deg, rgba(239,203,180,.19), transparent 70%);
  font: 430 .88rem/1.75 var(--font-story);
}
.pickup-receipt footer {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px dashed rgba(137,93,91,.17);
}
.pickup-receipt footer span { color: #a08a8e; font: 430 .67rem/1 var(--font-story); }
.pickup-receipt footer strong { color: #8b5e64; font: 570 .86rem/1 var(--font-number); }
.pickup-receipt footer em { margin-left: auto; color: #ae9691; font: 430 .7rem/1 var(--font-story); font-style: normal; }
.posted-surface > .scene-sub { max-width: 44rem; margin: 1.2rem auto 0; font-size: .9rem; line-height: 1.8; }

/* 岛屿航线里的写信入口属于起点说明，不再是一枚孤零零的按钮。 */
.island-route-journal footer > span { max-width: 34rem; }
.island-route-journal footer .route-write-entry {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  gap: .22rem;
  min-width: 205px;
  padding: .25rem 0 .25rem 1.05rem;
  color: #8b5e65;
  border: 0;
  border-left: 2px solid rgba(177,105,102,.34);
  text-decoration: none;
  text-align: left;
  transition: border-color .24s ease, transform .24s var(--ease-soft);
}
.island-route-journal footer .route-write-entry small { color: #a48d90; font: 420 .67rem/1.4 var(--font-story); }
.island-route-journal footer .route-write-entry b { color: #8a5961; font: 550 .84rem/1.45 var(--font-story); }
.island-route-journal footer .route-write-entry i { display: inline-block; font-style: normal; transition: transform .22s ease; }
.island-route-journal footer .route-write-entry:hover { border-left-color: #ae6969; transform: translateX(3px); }
.island-route-journal footer .route-write-entry:hover i { transform: translateX(4px); }

/* 封信仪式：信纸始终待在信封口袋内部，折入、合盖、落印分三拍。 */
.send-fx { background: rgba(19,21,48,.84); }
.fx-stage { width: 300px; height: 320px; }
.fx-env {
  left: 50%;
  bottom: 72px;
  width: 220px;
  height: 138px;
  transform: translateX(-50%);
  transform-origin: center center;
}
.fx-pocket {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 270px;
  overflow: hidden;
  pointer-events: none;
}
.fx-paper {
  left: 50%;
  top: 0;
  width: 176px;
  height: 132px;
  padding: 17px 16px;
  border-radius: 7px 7px 3px 3px;
  background: #fff7e3;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  transform: translateX(-50%);
  transition: transform .72s cubic-bezier(.4,0,.2,1), opacity .3s ease .52s;
}
.fx-paper i { height: 1.5px; margin: 15px 0; background: rgba(143,99,87,.26); }
.fx-back {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  border-radius: 9px;
  background: #e4d1a9;
  box-shadow: 0 18px 38px rgba(0,0,0,.38);
}
.fx-front {
  z-index: 3;
  border-radius: 8px;
  background: linear-gradient(145deg, #f3e7c9, #e9d5ae);
  clip-path: polygon(0 0, 50% 44%, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 -1px 0 rgba(122,87,64,.08);
}
.fx-flap {
  z-index: 4;
  height: 69px;
  background: #eadbb9;
  transform: rotateX(180deg);
  transition: transform .48s cubic-bezier(.4,0,.2,1);
  transition-delay: 0s;
}
.fx-seal {
  top: 43%;
  z-index: 5;
  width: 58px;
  opacity: 0;
  transform: translate(-50%,-50%) scale(1.7) rotate(-8deg);
}
.fx-word {
  bottom: 3px;
  display: grid;
  gap: .38rem;
  color: #f5e8c9;
  text-align: center;
  letter-spacing: .08em;
}
.fx-word b { font: 570 1.08rem/1.2 var(--font-hand); }
.fx-word span { color: rgba(245,232,201,.7); font: 430 .76rem/1.4 var(--font-story); letter-spacing: .04em; }
.send-fx.fx-fold .fx-paper { opacity: 1; transform: translateX(-50%) translateY(126px) scale(.82); }
.send-fx.fx-fold .fx-flap { transform: rotateX(180deg); }
.send-fx.fx-sealed .fx-paper { opacity: 0; transition-delay: 0s; }
.send-fx.fx-sealed .fx-flap { transform: rotateX(0); }
.send-fx.fx-sealed .fx-seal { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(-3deg); }
.send-fx.fx-away .fx-env {
  opacity: 0;
  transform: translate(78px,-190px) rotate(11deg) scale(.42);
  transition: transform .75s cubic-bezier(.5,-.1,.7,.4), opacity .58s ease .12s;
}

@media (max-width: 900px) {
  .writing-studio { min-height: 900px; aspect-ratio: auto; overflow: hidden; }
  .writing-studio-art { height: 400px; }
  .writing-studio-art img { object-position: 67% center; border-radius: 26px 26px 0 0; }
  .writing-studio::after { height: 400px; box-shadow: inset 0 -92px 70px -48px rgba(28,31,65,.66); }
  .write-sheet-v2 {
    left: .65rem;
    right: .65rem;
    top: 235px;
    width: auto;
    height: 625px;
    padding: 1.4rem 1.15rem 1rem;
    border-radius: 21px 25px 19px 23px;
    background:
      linear-gradient(90deg, transparent 0 2.6rem, rgba(191,112,107,.11) 2.6rem 2.68rem, transparent 2.68rem),
      repeating-linear-gradient(0deg, rgba(134,96,79,.018) 0 1px, transparent 1px 5px),
      linear-gradient(112deg, rgba(255,251,237,.99), rgba(250,237,210,.985));
  }
  .write-letter-head { padding-bottom: .7rem; }
  .write-letter-head > span { font-size: .56rem; }
  .write-letter-head h1 { margin-top: .45rem; font-size: clamp(1.85rem, 8.5vw, 2.35rem); }
  .write-letter-head p { font-size: .78rem; line-height: 1.6; }
  .letter-to { padding-block: .58rem .5rem; }
  .letter-to b { font-size: .92rem; }
  .letter-to small { font-size: .66rem; }
  .letter-starters { display: block; margin: .55rem 0 .42rem; }
  .letter-starters > span { display: block; margin-bottom: .35rem; font-size: .64rem; }
  .letter-starters > div { flex-wrap: nowrap; gap: .85rem; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: none; }
  .letter-starters > div::-webkit-scrollbar { display: none; }
  .letter-starters button,
  .letter-starters button:nth-child(2),
  .letter-starters button:nth-child(3) { flex: 0 0 auto; min-width: 0; padding-inline: 0; font-size: .7rem; }
  .letter-salutation { flex-basis: 2.05rem; font-size: .95rem; line-height: 2.05rem; }
  .write-sheet-v2 .letter-body-field textarea {
    min-height: 9.6rem;
    font-size: 1rem;
    line-height: 2.05rem;
    background: repeating-linear-gradient(180deg, transparent 0 calc(2.05rem - 1.3px), rgba(151,108,101,.23) calc(2.05rem - 1.3px) 2.05rem);
  }
  .letter-sheet-footer { align-items: stretch; flex-direction: column; gap: .48rem; padding-top: .55rem; }
  .letter-sheet-footer .letter-sign { order: 1; }
  .letter-sign em { margin-left: auto; }
  .letter-delivery { order: 2; justify-content: space-between; gap: .65rem; }
  .letter-delivery > small { max-width: 10rem; font-size: .64rem; }
  .letter-sheet-footer .send-letter,
  .letter-sheet-footer .send-letter:hover { min-width: 0; min-height: 44px; font-size: .82rem; }
  .letter-sheet-footer .send-letter::before { width: 29px; height: 29px; }

  .posted-surface .pickup-receipt { padding: 1.25rem 1rem 1.15rem; }
  .pickup-receipt-head { align-items: flex-start; flex-direction: column; gap: .65rem; }
  .pickup-receipt-head > div { width: 100%; justify-content: space-between; }
  .pickup-receipt-head b { font-size: 1.16rem; }
  .night-passage { grid-template-columns: 1fr; gap: 1.05rem; margin-block: 1.2rem; }
  .night-passage li { grid-template-columns: 24px 1fr; }
  .night-passage li:not(:first-child)::before { top: -1.05rem; left: 8px; right: auto; width: 1px; height: 1.05rem; border-top: 0; border-left: 1px dashed rgba(162,118,106,.34); }
  .pickup-receipt blockquote { font-size: .8rem; }
  .pickup-receipt footer { flex-wrap: wrap; }
  .pickup-receipt footer em { width: 100%; margin: .15rem 0 0; }

  .island-route-journal footer .route-write-entry { width: 100%; min-width: 0; margin-top: .2rem; }
}

@media (max-width: 380px) {
  .writing-studio { min-height: 930px; }
  .write-sheet-v2 { height: 660px; }
  .letter-delivery { align-items: flex-start; flex-direction: column; }
  .letter-delivery > small { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .night-passage .next i { animation: none !important; }
  .fx-paper, .fx-flap, .fx-seal, .fx-env { transition-duration: .01ms !important; }
}

/* V17.8 · 往返信札：标题属于纸面排版，未拆回信只露封套，不泄露正文。 */
.letter-grid .correspondence-folio .outgoing-letter,
.letter-grid .correspondence-folio .outgoing-letter:nth-of-type(even) {
  min-height: 0;
  padding: clamp(1.75rem, 2.8vw, 2.3rem) clamp(2.3rem, 5vw, 4.5rem) clamp(2.4rem, 4vw, 3.2rem) !important;
  background-image: none !important;
  background-position: 0 0;
}
.letter-sheet-label {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: .72rem;
  min-width: 0;
  margin: 0 0 1rem;
  padding: 0 0 .72rem;
  border-bottom: 1px dashed rgba(148,102,98,.2);
}
.letter-sheet-label > span {
  flex: 0 0 auto;
  color: #be7c75;
  font: 690 .61rem/1 var(--font-ui);
  letter-spacing: .17em;
}
.letter-sheet-label > b {
  flex: 0 0 auto;
  color: #815a62;
  font: 560 .96rem/1.35 var(--font-story);
  letter-spacing: .07em;
}
.letter-sheet-label > i {
  min-width: 32px;
  height: 7px;
  flex: 1 1 auto;
  opacity: .7;
  border-bottom: 1px solid rgba(181,110,105,.34);
  border-radius: 50%;
  transform: rotate(-.5deg);
}
.letter-grid .correspondence-folio .letter-copy {
  position: relative;
  z-index: 2;
  display: block;
  min-height: 4.7em;
  padding: .05rem 0 .35rem;
  color: #50444e;
  background: repeating-linear-gradient(180deg, transparent 0 calc(2.26em - 1.4px), rgba(137,99,92,.19) calc(2.26em - 1.4px) 2.26em);
  background-position: 0 .76em;
  font: inherit;
  line-height: 2.26;
  white-space: pre-wrap;
}

.correspondence-folio .envelope {
  display: block;
  width: min(560px, calc(100% - clamp(2.4rem, 9vw, 7rem)));
  margin: 1.45rem clamp(1.2rem, 4vw, 3.3rem) .65rem auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  appearance: none;
}
.correspondence-folio .envelope .env-body {
  height: 184px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.64);
  border-radius: 15px 19px 14px 17px;
  background: #f3e6c8;
  box-shadow: 0 18px 38px rgba(14,14,38,.29), inset 0 0 28px rgba(255,255,255,.3);
}
.correspondence-folio .envelope:hover .env-body {
  transform: translateY(-3px) rotate(-.12deg);
  box-shadow: 0 24px 46px rgba(14,14,38,.32), inset 0 0 28px rgba(255,255,255,.3);
}
.correspondence-folio .env-letter { display: none; }
.correspondence-folio .env-front {
  height: 106px;
  border-radius: 0 0 15px 17px;
  background: linear-gradient(145deg, #f8edd2, #ead7b1);
  clip-path: polygon(0 0, 50% 47%, 100% 0, 100% 100%, 0 100%);
}
.correspondence-folio .env-flap {
  height: 102px;
  border-radius: 15px 19px 0 0;
  background: linear-gradient(160deg, #eee0bd, #e5d0a8);
}
.correspondence-folio .env-address {
  position: absolute;
  left: 1.55rem;
  bottom: 1.15rem;
  z-index: 4;
  display: grid;
  gap: .2rem;
  width: 40%;
  color: #806b70;
  text-align: left;
  pointer-events: none;
}
.correspondence-folio .env-address small { color: #b47770; font: 680 .52rem/1 var(--font-ui); letter-spacing: .14em; }
.correspondence-folio .env-address b { font: 540 .88rem/1.35 var(--font-story); letter-spacing: .04em; }
.correspondence-folio .env-address em { color: #a18b89; font: 430 .63rem/1.35 var(--font-story); font-style: normal; }
.correspondence-folio .env-seal {
  top: 94px;
  z-index: 5;
  width: 62px;
  border-radius: 50%;
}
.correspondence-folio .env-hint {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: .9rem clamp(1.2rem, 4vw, 3.3rem) 1.4rem auto;
  color: rgba(255,240,213,.66);
  font: 430 .78rem/1.5 var(--font-story);
  letter-spacing: .03em;
}
.correspondence-folio .env-hint span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d19582;
  box-shadow: 0 0 0 4px rgba(209,149,130,.1);
}

.letter-grid .correspondence-folio .reply-sheet,
.letter-grid .correspondence-folio .reply-sheet:nth-of-type(even) {
  padding: clamp(1.75rem, 2.8vw, 2.3rem) clamp(2.3rem, 5vw, 4.5rem) clamp(3rem, 4.5vw, 3.8rem) !important;
  background-image: none !important;
}
.letter-grid .correspondence-folio .reply-sheet .letter-sheet-label { margin-right: 235px; }
.letter-grid .correspondence-folio .reply-sheet .reply-body {
  position: relative;
  z-index: 2;
  display: block;
  min-height: 10em;
  margin-top: 5.7rem;
  padding: .08rem 0 .45rem;
  color: #50444e;
  background: repeating-linear-gradient(180deg, transparent 0 calc(2.26em - 1.45px), rgba(137,99,92,.22) calc(2.26em - 1.45px) 2.26em);
  background-position: 0 .76em;
  line-height: 2.26;
  white-space: pre-wrap;
}
.letter-grid .correspondence-folio .reply-sheet .letter-marks { top: 1.25rem; }

@media (max-width: 640px) {
  .letter-grid .correspondence-folio .outgoing-letter,
  .letter-grid .correspondence-folio .outgoing-letter:nth-of-type(even),
  .letter-grid .correspondence-folio .reply-sheet,
  .letter-grid .correspondence-folio .reply-sheet:nth-of-type(even) {
    padding: 1.35rem 1.15rem 2.3rem 1.55rem !important;
  }
  .letter-sheet-label { gap: .45rem; margin-bottom: .8rem; }
  .letter-sheet-label > span { font-size: .47rem; letter-spacing: .1em; }
  .letter-sheet-label > b { font-size: .84rem; }
  .letter-grid .correspondence-folio .letter-copy { min-height: 4.45em; font-size: 1.05rem; line-height: 2.18; }
  .correspondence-folio .envelope {
    width: calc(100% - 1.4rem);
    margin: 1.1rem auto .55rem;
  }
  .correspondence-folio .envelope .env-body { height: 154px; }
  .correspondence-folio .env-front { height: 89px; }
  .correspondence-folio .env-flap { height: 86px; }
  .correspondence-folio .env-seal { top: 80px; width: 54px; }
  .correspondence-folio .env-address { left: 1rem; bottom: .8rem; width: 42%; }
  .correspondence-folio .env-address small { font-size: .43rem; }
  .correspondence-folio .env-address b { font-size: .75rem; }
  .correspondence-folio .env-address em { font-size: .56rem; }
  .correspondence-folio .env-hint { margin: .75rem auto 1.2rem; font-size: .7rem; }
  .letter-grid .correspondence-folio .reply-sheet .letter-sheet-label { margin-right: 0; }
  .letter-grid .correspondence-folio .reply-sheet .letter-marks { top: 4rem; }
  .letter-grid .correspondence-folio .reply-sheet .reply-body {
    min-height: 13em;
    margin-top: 7.5rem;
    font-size: 1.05rem;
    line-height: 2.18;
    background: repeating-linear-gradient(180deg, transparent 0 calc(2.18em - 1.4px), rgba(137,99,92,.22) calc(2.18em - 1.4px) 2.18em);
  }
}

/* ICP 备案号（工信部要求可点击跳转备案系统） */
.footer-note .icp-link { color: var(--cream-faint); text-decoration: none; letter-spacing: .04em; }
.footer-note .icp-link:hover { color: var(--cream-dim); }

/* V17.9 · 候船中的信仍然是一封信：正文、标题与候船回执各占自己的纸面层级。 */
.letter-grid .correspondence-folio .outgoing-letter,
.letter-grid .correspondence-folio .outgoing-letter:nth-of-type(even) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
  min-height: 0 !important;
  height: auto !important;
  margin: .35rem 0 clamp(1rem, 2vw, 1.55rem) !important;
  padding: clamp(1.55rem, 2.5vw, 2rem) clamp(2rem, 4.5vw, 3.7rem) clamp(1.65rem, 2.8vw, 2.25rem) !important;
  white-space: normal !important;
  transform: none !important;
}
.letter-grid .correspondence-folio .outgoing-letter .letter-sheet-label {
  position: static !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-height: 2.05rem;
  margin: 0 0 .78rem !important;
  padding: 0 0 .7rem !important;
  transform: none !important;
}
.letter-grid .correspondence-folio .outgoing-letter .letter-copy {
  position: relative !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-height: 2.8em !important;
  margin: 0 !important;
  padding: .02rem 0 .18rem !important;
  white-space: pre-wrap !important;
  transform: none !important;
}

.mail-holding-note {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin: 0 clamp(.55rem, 2.2vw, 1.5rem) clamp(1rem, 2vw, 1.45rem);
  padding: 1.05rem clamp(1rem, 2vw, 1.45rem);
  overflow: hidden;
  color: #66515c;
  background: linear-gradient(105deg, rgba(250,225,207,.96), rgba(255,240,216,.88));
  border-top: 1px dashed rgba(166,104,99,.28);
  border-bottom: 1px dashed rgba(166,104,99,.28);
  box-shadow: inset 0 1px rgba(255,255,255,.48);
}
.mail-holding-note::after {
  content: "";
  position: absolute;
  right: -14px;
  top: -22px;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(180,113,104,.10);
  border-radius: 50%;
}
.holding-mark {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(181,112,104,.5);
  border-radius: 50%;
  background: rgba(255,248,230,.52);
}
.holding-mark::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 11px;
  width: 20px;
  height: 12px;
  border: 1px solid #b57870;
  border-radius: 4px 4px 2px 2px;
}
.holding-mark::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 15px;
  width: 14px;
  border-top: 1px solid #b57870;
  transform: rotate(-5deg);
}
.holding-mark i {
  position: absolute;
  left: 16px;
  bottom: 8px;
  width: 9px;
  height: 5px;
  border: 1px solid rgba(181,112,104,.72);
  border-top: 0;
}
.mail-holding-note > div { min-width: 0; }
.mail-holding-note > div > small,
.mail-holding-note time small {
  display: block;
  color: #b47670;
  font: 680 .55rem/1.25 var(--font-ui);
  letter-spacing: .14em;
}
.mail-holding-note h3 {
  margin: .26rem 0 .22rem;
  color: #624e59;
  font: 590 1.02rem/1.4 var(--font-story);
  letter-spacing: .04em;
}
.mail-holding-note p {
  margin: 0;
  color: #88727a;
  font: 430 .76rem/1.65 var(--font-story);
}
.mail-holding-note time {
  position: relative;
  z-index: 1;
  min-width: 7rem;
  padding-left: 1.15rem;
  border-left: 1px solid rgba(166,104,99,.18);
  color: #725a64;
  font-style: normal;
  text-align: left;
}
.mail-holding-note time b {
  display: block;
  margin-top: .3rem;
  font: 570 .85rem/1.35 var(--font-ui);
  letter-spacing: .035em;
}
.mail-holding-note.at-sea {
  background: linear-gradient(105deg, rgba(226,231,222,.96), rgba(250,235,211,.9));
}
.mail-holding-note.at-sea .holding-mark { border-color: rgba(91,136,122,.55); }
.mail-holding-note.at-sea .holding-mark::before,
.mail-holding-note.at-sea .holding-mark::after,
.mail-holding-note.at-sea .holding-mark i { border-color: #6f9b89; }
.holding-whisper {
  margin: -.45rem 1.75rem 1.15rem;
  color: rgba(255,244,220,.64);
  font: 430 .72rem/1.6 var(--font-story);
}
.debug-route-control {
  width: fit-content;
  margin: -.4rem 1.75rem 1.1rem auto;
  color: rgba(255,244,220,.42);
  font: 430 .63rem/1.4 var(--font-ui);
}
.debug-route-control summary { cursor: pointer; }
.debug-route-control form { margin-top: .45rem; }
.debug-route-control button {
  padding: .35rem .65rem;
  border: 1px dashed rgba(255,244,220,.22);
  border-radius: 999px;
  color: rgba(255,244,220,.62);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.letter-grid > .scene > .actions {
  justify-content: center;
  gap: .75rem 1rem;
}
.letter-grid > .scene > .actions > .btn.navy {
  padding: .58rem .25rem;
  border: 0;
  border-bottom: 1px solid rgba(255,244,220,.3);
  border-radius: 0;
  color: rgba(255,244,220,.78);
  background: transparent;
  box-shadow: none;
  font-weight: 470;
}
.letter-grid > .scene > .actions > .btn.red {
  padding: .7rem 1.35rem;
  border: 1px solid rgba(236,190,126,.42);
  border-radius: 12px 15px 11px 14px;
  color: #514458;
  background: #efbd71;
  box-shadow: 0 6px 0 rgba(104,76,76,.22);
  font-size: .86rem;
  letter-spacing: .04em;
}

@media (max-width: 640px) {
  .letter-grid .correspondence-folio .outgoing-letter,
  .letter-grid .correspondence-folio .outgoing-letter:nth-of-type(even) {
    padding: 1.25rem 1.15rem 1.55rem !important;
  }
  .letter-grid .correspondence-folio .outgoing-letter .letter-sheet-label {
    min-height: 1.8rem;
    margin-bottom: .58rem !important;
  }
  .letter-grid .correspondence-folio .outgoing-letter .letter-copy { min-height: 3.15em !important; }
  .mail-holding-note {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: .72rem;
    margin-inline: .4rem;
    padding: .9rem .8rem;
  }
  .holding-mark { width: 36px; height: 36px; transform: scale(.86); transform-origin: center; }
  .mail-holding-note time {
    grid-column: 2;
    min-width: 0;
    padding: .55rem 0 0;
    border-top: 1px solid rgba(166,104,99,.16);
    border-left: 0;
  }
  .mail-holding-note time small,
  .mail-holding-note time b { display: inline; }
  .mail-holding-note time b { margin-left: .35rem; font-size: .75rem; }
}

/* ── v0.7 岛务 · 通信邮箱表单（修输入框字号溢出）── */
.mail-form { margin-top: .9rem; }
.mail-row { display: flex; gap: .55rem; align-items: stretch; flex-wrap: wrap; }
.mail-row input {
  flex: 1 1 12rem; min-width: 0; width: auto;
  font-size: .92rem; font-family: var(--font-ui, inherit);
  padding: .55em .85em; line-height: 1.4;
  border: 1px solid rgba(120, 90, 60, .28); border-radius: 10px;
  background: rgba(255, 253, 244, .9); color: #3a3226;
}
.mail-row input::placeholder { font-size: .88rem; color: rgba(85, 77, 103, .5); letter-spacing: 0; }
.mail-row input:focus { outline: none; border-color: var(--warm); box-shadow: 0 0 0 3px rgba(232,169,75,.16); }
.mail-row .btn { flex: 0 0 auto; white-space: nowrap; }
.mail-target { margin: 0 0 .5rem; font-size: .8rem !important; word-break: break-all; opacity: .8; }
.msg-hint { font-size: .78rem !important; opacity: .75; margin-top: .6rem; }
.text-action.as-button {
  display: inline-block; margin-top: .9rem; padding: 0;
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: .85rem; text-align: left;
}
.setting-card .text-action + .text-action,
.setting-card form + .text-action { display: block; margin-top: .55rem; opacity: .75; font-size: .8rem; }
/* 窄屏：输入框独占一行，按钮换行居右，避免被卡片圆角裁切 */
@media (max-width: 620px) {
  .mail-row { flex-direction: column; align-items: stretch; }
  .mail-row input { flex: 1 1 auto; width: 100%; }
  .mail-row .btn { width: 100%; }
}
/* 浅色岛务卡片上的按钮：幽灵样式的奶油色文字会隐形，改墨色描边 */
.setting-card .btn.ghost,
.setting-card .btn.ghost:visited {
  color: #5a4a63; border-color: rgba(90, 74, 99, .38); background: rgba(255, 253, 244, .6);
}
.setting-card .btn.ghost:hover { color: #3a3226; border-color: rgba(90, 74, 99, .7); background: #fffdf4; }
/* 破坏性按钮必须保持危险色，绝不能被卡片主按钮规则染成金色 CTA */
.setting-card .btn:not(.ghost):not(.danger) { background: var(--warm); color: #2b2338; }
.setting-card .btn.danger {
  background: transparent; color: #a3423a; border: 1px solid rgba(163,66,58,.45);
}
.setting-card .btn.danger:hover { background: rgba(163,66,58,.08); border-color: #a3423a; }
.mail-resend { margin-top: .5rem; }
.mail-resend .as-button { margin-top: 0; font-size: .78rem; opacity: .8; }

/* ── v0.7.2 离岛与设备管理 ── */
.bye-note {
  display: flex; align-items: center; justify-content: center; gap: .6em;
  width: min(560px, 92%); margin: 1.4rem auto -0.4rem; padding: .75em 1.2em;
  border: 1px dashed rgba(201,168,106,.45); border-radius: 999px;
  color: var(--cream-dim); font-size: .9rem; line-height: 1.7; text-align: center;
  background: rgba(24,31,54,.5);
}
.bye-note i { font-style: normal; opacity: .8; }
.settings-flash {
  width: min(680px, 92%); margin: 0 auto 1rem; padding: .7em 1.2em;
  border-radius: 12px; text-align: center; font-size: .9rem;
  color: #4f6b52; background: rgba(143,191,159,.16); border: 1px solid rgba(143,191,159,.35);
}
.setting-card .btn.small { margin-top: .9rem; }
.setting-card form + .text-action, .setting-card .btn + form { margin-top: .7rem; }