/* ============ 用心记 · 网页版（对齐小程序「日系胶片日记」UI） ============ */

:root {
  --paper: #F4EFE7;        /* 页面米底 */
  --card: #FFFDF8;         /* 卡片 */
  --ink: #3A3228;          /* 墨色按钮/文字 */
  --ink-txt: #3C342C;
  --seal: #B5442B;         /* 印章红 */
  --line: #E7DCC9;
  --sub: #A3947F;
  --kai: "STKaiti", "Kaiti SC", "KaiTi", "楷体", "Hannotate SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* hidden 必须永远生效：防止 display 样式覆盖导致遮罩层/面板无法隐藏 */
[hidden] { display: none !important; }

html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink-txt);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, textarea { font: inherit; color: inherit; }
/* 手机浏览器：表单控件字号必须 ≥16px，否则 iOS 聚焦时会自动放大页面、视口来回跳动 */
input, textarea, select { font-size: 16px; }
img { display: block; }

.kai,
.brand-name,
.meta-date,
.note-body,
.letter-title,
.letter-area,
.who-initial,
.profile-name,
.empty-txt {
  font-family: var(--kai);
}

/* ===================== 版心 ===================== */
.page {
  max-width: 520px;
  margin: 0 auto;
  box-sizing: border-box;
}
.page-main {
  padding: 8px 15px 30px; /* 主界面刊头已并入登录页，这里给顶部一点呼吸空间 */
  min-height: 60vh;
}

/* ===================== 顶部刊头 ===================== */
.masthead {
  position: relative;
  text-align: center;
  padding: 20px 15px 18px;
}
.masthead-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
}
.masthead-bar .bar {
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  display: block;
}
.masthead-bar .b1,
.masthead-bar .b3 {
  border: 1px solid #CDBB9E;
  background: transparent;
  opacity: .8;
}
.masthead-bar .b2 {
  background: var(--seal);
}
.brand-name {
  font-size: 42px;
  font-weight: 400;
  color: #38302A;
  letter-spacing: 12px;
  text-indent: 12px;
  line-height: 1.2;
}
.brand-sub {
  margin-top: 6px;
  font-size: 12px;
  color: #A3947F;
  letter-spacing: 2px;
}
.brand-seal {
  position: absolute;
  right: 16px;
  top: 10px;
  width: 30px;
  height: 30px;
  background: var(--seal);
  border-radius: 5px;
  color: #FBF6EC;
  font-family: var(--kai);
  font-size: 19px;
  line-height: 30px;
  text-align: center;
  transform: rotate(8deg);
  opacity: .92;
  box-shadow: 0 3px 8px rgba(160, 60, 35, .28);
  user-select: none;
}

/* ===================== 面板 / 通用 ===================== */
.panel {
  background: var(--card);
  border-radius: 12px;
  padding: 13px 12px;
  box-shadow: 0 3px 12px rgba(96, 78, 52, .06);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-txt);
  letter-spacing: 1px;
}
.panel-sub {
  margin-top: 7px;
  font-size: 11px;
  color: #AB9C87;
}

/* 日期药丸 */
.date-pill-wrap {
  position: relative;
  display: inline-block;
}
.date-pill {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  background: #F0E8DA;
  color: #7E6F5A;
  font-size: 13px;
  letter-spacing: .5px;
}
.date-picker {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ===================== 按钮 ===================== */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  padding: 12px 0;
  letter-spacing: 2px;
  transition: transform .12s ease, opacity .2s ease;
}
.btn:active { transform: scale(.97); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 0; font-size: 13px; }
.btn-ink {
  background: var(--ink);
  color: #F7F2E9;
  box-shadow: 0 4px 12px rgba(58, 50, 40, .18);
}
.btn-ghost {
  background: transparent;
  color: #8A7B66;
  border: 1px solid #D9CDBB;
}
.upload-panel { margin-bottom: 16px; }
.upload-panel .btn { margin-top: 12px; }

/* 上传预览（支持一次多选，缩略图网格） */
.upload-preview { margin-top: 12px; }
.upload-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.upload-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  background: #EFE7D9;
}
.thumb-item { position: relative; }
.thumb-item img { display: block; }
.thumb-rm {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(20, 16, 10, .62);
  color: #fff;
  font-size: 11px;
  line-height: 1;
}
.thumb-add {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1;
  border: 1.5px dashed #CDBFAA;
  border-radius: 8px;
  background: rgba(250, 246, 238, .6);
  color: #A79479;
  font-size: 26px;
  line-height: 1;
}
.thumb-add:active { background: #EFE7D9; }
.upload-count {
  margin-bottom: 12px;
  font-size: 12px;
  color: #8A7B66;
  letter-spacing: 1px;
}

/* ===================== 首页封面轮播（杂志封面式） ===================== */
.cover {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin: 2px 0 14px;
  aspect-ratio: 4 / 3;
  background: #E4D9C6;
  box-shadow: 0 8px 22px rgba(96, 78, 52, .14);
  user-select: none;
  touch-action: pan-y; /* 竖向滚动页面，横向手势留给轮播 */
}
.cover-track { position: absolute; inset: 0; }
.cover-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease; /* 照片之间缓慢交叉淡入，像翻杂志 */
  cursor: zoom-in;
}
.cover-slide.on { opacity: 1; z-index: 1; }
.cover-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cover-slide.on img {
  animation: coverZoom 9s ease-out forwards; /* 静默缓慢推进，给静态照片一点呼吸感 */
}
@keyframes coverZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
/* 底部渐变遮罩：保证日期文字在任何照片上都清晰 */
.cover-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(24, 16, 9, .6) 0%,
    rgba(24, 16, 9, .22) 34%,
    rgba(24, 16, 9, 0) 56%);
}
.cover-cap {
  position: absolute;
  left: 16px;
  bottom: 13px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
}
.cover-date {
  font-family: var(--kai);
  font-size: 30px;
  line-height: 1.1;
  color: #FFF9EF;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(20, 14, 8, .4);
}
.cover-note {
  margin-top: 4px;
  font-size: 11px;
  color: rgba(255, 249, 239, .78);
  letter-spacing: 1px;
}
.cover-dots {
  position: absolute;
  right: 14px;
  bottom: 17px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 5px;
}
.cover-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  padding: 0;
  background: rgba(255, 249, 239, .55);
  transition: all .25s ease;
}
.cover-dot.on {
  width: 16px;
  background: #FFF9EF;
}

/* ===================== 筛选 ===================== */
.filter { margin-bottom: 12px; }
.filter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.filter-name {
  font-size: 12px;
  color: var(--sub);
  letter-spacing: 3px;
  font-weight: 600;
}
.filter-total { font-size: 11px; color: #C0B3A0; }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--card);
  color: #776A58;
  font-size: 12px;
  border: 1px solid transparent;
  box-shadow: 0 1px 5px rgba(96, 78, 52, .06);
  letter-spacing: .5px;
  white-space: nowrap; /* 日期带年份后不允许 chip 内折行 */
}
.chip.chip-on,
.chip.on {
  /* 选中态实心高亮：明确标出「当前看的是全部还是某一天」 */
  background: var(--ink);
  color: #F7F2E9;
  border-color: transparent;
}
.chip.chip-ghost {
  background: transparent;
  border: 1px dashed #CDBB9E;
  color: #A99A84;
  box-shadow: none;
}
.chip.chip-ghost.on {
  /* 「其他日期」作为当前选中时，压过虚线药丸样式，转为实心高亮 */
  background: var(--ink);
  color: #F7F2E9;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(58, 50, 40, .18);
}
/* 「其他日期」药丸内嵌原生日期输入：整颗可点，弹系统日期面板（iOS/安卓均可用） */
.chip-pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.chip-picker {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.filter-summary {
  margin-top: 10px;
  font-size: 11px;
  color: var(--sub);
}
.filter-summary .hl { color: var(--seal); font-weight: 600; }
.filter-clear {
  margin-left: 8px;
  color: var(--seal);
  cursor: pointer;
}

/* ===================== 空态 ===================== */
.empty { padding: 36px 0 26px; text-align: center; }
.empty-rule {
  width: 28px;
  height: 2px;
  background: #D3C2A6;
  margin: 0 auto 11px;
  border-radius: 2px;
}
.empty-txt { font-size: 12px; color: #A99A84; letter-spacing: 1px; }

/* ===================== 双列胶片墙 ===================== */
.wall {
  display: flex;
  align-items: flex-start;
}
.wall-col { flex: 1; min-width: 0; }
.wall-col + .wall-col { margin-left: 10px; }
.card {
  background: var(--card);
  border-radius: 9px;
  box-shadow: 0 4px 14px rgba(96, 78, 52, .09);
  margin-bottom: 10px;
  overflow: hidden;
}
.card-photo { position: relative; background: #EFE7D9; }
.card-img { width: 100%; display: block; }
.card-del {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  background: rgba(30, 24, 16, .52);
  color: #FFF6EC;
  font-size: 12px;
  font-family: serif;
}
.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 9px 9px;
}
.meta-left { display: flex; flex-direction: column; min-width: 0; }
.meta-date { font-size: 13px; color: #403830; letter-spacing: .5px; }
.meta-by {
  /* 右侧整体靠右，上下两行：头像+用户名 / 上传时间 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  max-width: 64%;
  min-width: 0;
}
.meta-head {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.meta-up {
  font-size: 8px;
  color: #B0A18B;
  line-height: 1.3;
  letter-spacing: .2px;
  white-space: nowrap;
}
.who-name {
  font-size: 10px;
  color: #8F816D;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 头像（通用） */
.who-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  object-fit: cover;
}
.who-lg { width: 34px; height: 34px; }
.who-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #8A6A4A;
  background: #F0E3CB;
}
.who-initial.who-me { background: #F3DCCF; color: var(--seal); }
.who-lg.who-initial { font-size: 19px; }

/* ===================== 留言 ===================== */
#page-message .btn { margin-bottom: 12px; }
.letter {
  background: var(--card);
  border-radius: 12px;
  padding: 14px 13px;
  margin-bottom: 12px;
  box-shadow: 0 3px 12px rgba(96, 78, 52, .06);
}
.letter-title {
  font-size: 13px;
  color: var(--seal);
  letter-spacing: 3px;
  font-weight: 600;
}
.letter-area {
  width: 100%;
  box-sizing: border-box;
  min-height: 110px;
  margin-top: 9px;
  background: transparent;
  padding: 9px 4px;
  font-size: 16px;
  color: #413931;
  line-height: 1.9;
  border: none;
  outline: none;
  border-bottom: 1px dashed #D9CDBB;
  resize: none;
}
.letter-actions {
  display: flex;
  gap: 9px;
  margin-top: 12px;
}
.letter-actions .btn { flex: 1; margin: 0; font-size: 13px; padding: 9px 0; }

.note {
  background: var(--card);
  border-radius: 11px;
  padding: 13px 13px 10px;
  margin-bottom: 10px;
  box-shadow: 0 3px 10px rgba(96, 78, 52, .06);
  position: relative;
  cursor: pointer;
}
.note-head { display: flex; align-items: center; gap: 9px; }
.note-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.note-nick { font-size: 14px; font-weight: 600; color: var(--ink-txt); letter-spacing: .5px; }
.note-time { font-size: 10px; color: #B5A78F; letter-spacing: .5px; }
.note-body {
  margin-top: 8px;
  padding-bottom: 4px;
  font-size: 16px;
  color: #413931;
  line-height: 1.9;
  white-space: pre-wrap;
  word-break: break-word;
}
.note-ops {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed #E7DCC9;
  display: flex;
  justify-content: flex-end;
  gap: 17px;
}
.note-op { font-size: 12px; color: var(--sub); padding: 2px 4px; }
.note-op-del { color: #C0553C; }

/* ===================== 语音留言（唱一段 / 说一段） ===================== */
.note-voice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 12px;
  background: #F7F1E4;
  border: 1px dashed #D9CDBB;
  border-radius: 999px;
}
.voice-play {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--seal);
  color: #FBF6EC;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .12s ease;
}
.voice-play:active { transform: scale(.9); }
.voice-play .vp-pause { display: none; }
.note-voice.playing .voice-play .vp-play { display: none; }
.note-voice.playing .voice-play .vp-pause { display: block; }
/* 装饰性小竖线：播放中轻微跳动 */
.voice-bars {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 16px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.voice-bars i {
  width: 2.5px;
  border-radius: 2px;
  background: #C9A574;
  display: block;
}
.note-voice.playing .voice-bars i { animation: voiceBar .7s ease-in-out infinite alternate; }
.note-voice.playing .voice-bars i:nth-child(2n) { animation-delay: .12s; }
.note-voice.playing .voice-bars i:nth-child(3n) { animation-delay: .24s; }
@keyframes voiceBar { from { transform: scaleY(.55); } to { transform: scaleY(1.25); } }
.voice-dur {
  font-size: 11px;
  color: #8F816D;
  letter-spacing: .5px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* 编辑器里：录音 / 选文件一排 */
.voice-bar {
  display: flex;
  gap: 9px;
  margin-top: 12px;
}
.voice-btn {
  flex: 1;
  padding: 9px 0;
  border-radius: 999px;
  border: 1px dashed #CDBB9E;
  background: #FBF6EC;
  color: #7E6F5A;
  font-size: 13px;
  letter-spacing: 1px;
  transition: background .15s ease;
}
.voice-btn:active { background: #F1E7D4; }
.voice-hint {
  margin: 8px 2px 0;
  font-size: 11px;
  line-height: 1.6;
  color: #B0A28C;
}
.voice-help-toggle {
  display: inline;
  font-size: 11px;
  color: var(--seal);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}
.voice-help {
  margin: 6px 2px 0;
  padding: 9px 12px;
  background: #FBF6EC;
  border: 1px dashed #E0D2BB;
  border-radius: 10px;
  font-size: 11.5px;
  line-height: 1.8;
  color: #8F816D;
}
.voice-help b { color: #6B5E4B; font-weight: 700; }
.voice-help .mono { font-family: ui-monospace, monospace; }
/* 录音进行中 */
.rec-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 8px 9px 8px 14px;
  border-radius: 999px;
  background: #FBF0EE;
  border: 1px solid #EBD3CC;
}
.rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--seal);
  animation: recBlink 1s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes recBlink { 50% { opacity: .25; } }
.rec-time {
  flex: 1;
  font-size: 15px;
  color: var(--seal);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.voice-stop { flex: 0 0 auto; padding: 7px 18px; }
/* 已录好/已选好的语音：试听胶囊 */
.voice-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 7px 8px 7px 7px;
  border-radius: 999px;
  background: #F7F1E4;
  border: 1px solid #E4D5BB;
}
.voice-chip-play {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--seal);
  color: #FBF6EC;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.voice-chip-play.on { background: var(--ink); }
.voice-chip-info {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: #7E6F5A;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
}
.voice-chip-rm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #F1E9DA;
  color: #A3947F;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.voice-chip-rm:active { background: #C0553C; color: #FFF6EC; }

/* ===================== 记录（像微信的会话流） ===================== */
/* 日期翻页导航：固定在屏幕底部、紧贴 Tab 栏上沿，翻完不用划回顶部。
   它放在 #page-chat 内部，随「记录」Tab 显隐，其他页不会出现。 */
.chat-nav-holder {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 65px);
  margin: 0 auto;
  max-width: 520px;
  box-sizing: border-box;
  padding: 0 15px;
  z-index: 40;
  pointer-events: none; /* 非按钮区域不挡消息点击 */
}
.chat-nav-holder .chat-nav { pointer-events: auto; }
.chat-nav {
  padding: 7px 10px 9px;
  margin-bottom: 0;
}
.chat-nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.chat-nav-date .date-pill {
  min-width: 122px;
  text-align: center;
  padding: 7px 10px;
}
.chat-nav-btn {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #EFE6D6;
  color: #7E6F5A;
  font-size: 19px;
  font-family: serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 2px;
  flex-shrink: 0;
}
.chat-nav-btn:disabled { opacity: .32; }
.chat-tip {
  font-size: 11px;
  color: #B0A28C;
  text-align: center;
  margin: 0 0 6px;
  letter-spacing: .3px;
}
/* 会话线程 */
.chat-thread { padding-top: 4px; }
.thread-day { display: flex; justify-content: center; margin: 4px 0 16px; }
.thread-day span {
  font-size: 11px;
  color: #8F816D;
  background: #EDE4D4;
  padding: 3px 13px;
  border-radius: 999px;
  letter-spacing: 1px;
}
/* 更早的消息：分页加载（一天上千条，先只渲染最新一批） */
.thread-more {
  display: block;
  margin: 0 auto 16px;
  padding: 6px 16px;
  font-size: 12px;
  color: #8F816D;
  background: #F1E9DA;
  border: 1px solid #E4D8C2;
  border-radius: 999px;
  letter-spacing: 1px;
}
.thread-more:active { background: #E8DDC7; }
/* 按天拉取时的过渡提示（只拉当天，通常一闪而过） */
.thread-loading {
  text-align: center;
  margin: 28px 0;
  font-size: 13px;
  color: #A99B85;
  letter-spacing: 1px;
}
/* 气泡 */
.msg { display: flex; align-items: flex-start; margin-bottom: 14px; }
.msg.theirs { justify-content: flex-start; }
.msg.mine { justify-content: flex-end; }
.msg-ava { margin-right: 8px; flex-shrink: 0; }
.msg.mine .msg-ava { margin: 0 0 0 8px; } /* 自己的头像贴右侧 */
.who-chat { width: 30px; height: 30px; }
.who-chat.who-initial { font-size: 16px; }
/* 一组消息 = 名字在上 + 气泡在下，左右按说话方对齐 */
.msg-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 74%;
  min-width: 0;
}
.msg.mine .msg-side { align-items: flex-end; }
.msg-name {
  max-width: 100%;
  font-size: 11px;
  color: #8F816D;
  letter-spacing: .3px;
  line-height: 1.3;
  margin: 0 5px 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg.mine .msg-name { color: #9B8B74; }
.bubble {
  max-width: 100%;
  padding: 8px 11px 7px;
  border-radius: 15px;
  font-size: 15px;
  line-height: 1.7;
  word-break: break-word;
  box-shadow: 0 2px 7px rgba(96, 78, 52, .07);
}
.bubble-text { white-space: pre-wrap; }
.msg.theirs .bubble {
  background: var(--card);
  color: #3C342C;
  border: 1px solid #F0E4D0;
  border-bottom-left-radius: 4px;
}
.msg.mine .bubble {
  background: var(--ink);
  color: #F8F3EA;
  border-bottom-right-radius: 4px;
}
.bubble-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: .3px;
}
.msg.theirs .bubble-meta { justify-content: flex-start; color: #B5A78F; }
.msg.mine .bubble-meta { justify-content: flex-end; color: rgba(248, 243, 234, .78); }
/* ===================== 我的 ===================== */
.profile-main {
  display: flex;
  align-items: center;
  gap: 14px;
}
.avatar-btn {
  width: 74px;
  height: 74px;
  padding: 0;
  margin: 0;
  background: transparent;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: none;
}
.mine-avatar {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}
.mine-avatar-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F0E6D3;
  color: #A08A67;
  font-size: 32px;
  font-weight: 200;
}
.profile-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.profile-name {
  font-size: 17px;
  font-weight: 400;
  color: var(--ink-txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-tip { font-size: 11px; color: #B0A28C; }

.field {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 9px;
  border-bottom: 1px solid #E7DCC9;
}
.field-label { font-size: 13px; color: #7E6F5A; flex-shrink: 0; }
.field-input {
  flex: 1;
  min-width: 0;
  font-size: 16px; /* ≥16px 防止 iOS 聚焦自动放大页面 */
  color: var(--ink-txt);
  border: none;
  background: transparent;
  outline: none;
}
.profile .btn { margin-top: 14px; }
.profile-foot {
  margin-top: 14px;
  font-size: 11px;
  color: #B0A28C;
  line-height: 1.7;
  text-align: center;
}
.logout-btn { margin-top: 14px; }

/* ===================== Tab 页面切换 ===================== */
.tab-page { padding-top: 2px; }

/* 留言 / 我的页沿用顶部刊头：页内版比登录页收敛些，不喧宾夺主 */
.tab-page > .masthead {
  padding: 14px 0 16px;
}
.tab-page > .masthead .masthead-bar { margin-bottom: 8px; }
.tab-page > .masthead .brand-name { font-size: 34px; letter-spacing: 10px; text-indent: 10px; }
.tab-page > .masthead .brand-sub { margin-top: 4px; font-size: 11px; }
.tab-page > .masthead .brand-seal { right: 4px; top: 8px; width: 27px; height: 27px; font-size: 17px; line-height: 27px; }

/* ===================== 底部 Tab 栏 ===================== */
.tab-space { height: 116px; }
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FBF7EF;
  border-top: 1px solid #E7DCC9;
  box-shadow: 0 -3px 14px rgba(96, 78, 52, .06);
  z-index: 800;
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar-inner {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 62px;   /* 更高的点击区域，好按 */
  padding: 12px 0 9px;
  margin: 0 4px;      /* 轻微分开四个按钮，避免误触相邻页 */
  border-radius: 12px;
}
.tab-txt {
  font-size: 16px;
  color: #A99A84;
  letter-spacing: 3px;
  text-indent: 3px;
  transition: color .2s;
}
.tab-flag {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  background: transparent;
  margin-top: 6px;
}
.tab.on .tab-txt { color: var(--ink-txt); font-weight: 600; }
.tab.on .tab-flag { background: var(--seal); }
.tab:active { background: rgba(96, 78, 52, .09); } /* 按下即点亮，确认这次点到了 */

/* ===================== 照片查看器（沉浸翻页） ===================== */
.viewer {
  position: fixed;
  inset: 0;
  background: rgba(18, 14, 8, .96);
  z-index: 900;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.viewer-img {
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: contain;
  animation: viewerImgIn .2s ease;
}
@keyframes viewerImgIn { from { opacity: .35; } }
/* 左右翻页箭头：半透明玻璃圆钮，浮在图片两侧中段 */
.viewer-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 248, 236, .12);
  color: #FFF6EC;
  font-size: 24px;
  font-family: serif;
  line-height: 1;
  padding-bottom: 4px;
  z-index: 915;
  transition: background .15s ease, opacity .15s ease;
}
.viewer-btn:active { background: rgba(255, 248, 236, .3); }
.viewer-btn:disabled { opacity: .18; pointer-events: none; }
.viewer-prev { left: 8px; }
.viewer-next { right: 8px; }
/* 底部信息条：日期 + 当前第几张，像相册书页的注脚 */
.viewer-bar {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 248, 236, .12);
  border-radius: 999px;
  padding: 5px 15px;
  z-index: 915;
  pointer-events: none;
  backdrop-filter: blur(3px);
}
.viewer-date {
  font-family: var(--kai);
  font-size: 14px;
  color: #F6EDDA;
  letter-spacing: 1px;
}
.viewer-num { font-size: 12px; color: #CFC1AA; }
.viewer-close {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  right: 20px;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  background: rgba(255, 248, 236, .16);
  color: #FFF6EC;
  border-radius: 50%;
  font-size: 17px;
  font-family: serif;
  z-index: 916;
}

/* ===================== 想念弹窗（登录后进首页弹出） ===================== */
.greet-mask {
  position: fixed;
  inset: 0;
  z-index: 960;              /* 盖过 Tab 栏，但低于 toast(999) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
  background: rgba(58, 50, 40, .44);
  animation: greetMaskIn .2s ease;
}
@keyframes greetMaskIn { from { opacity: 0; } }
.greet-card {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px 22px 20px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(44, 36, 26, .28);
  animation: greetCardIn .3s cubic-bezier(.2, .85, .3, 1.1);
}
@keyframes greetCardIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
}
.greet-close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #F1E9DA;
  color: #A3947F;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.greet-seal {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  background: var(--seal);
  border-radius: 7px;
  color: #FBF6EC;
  font-family: var(--kai);
  font-size: 26px;
  line-height: 46px;
  text-align: center;
  transform: rotate(8deg);
  box-shadow: 0 3px 10px rgba(160, 60, 35, .3);
}
.greet-overline {
  font-size: 11px;
  color: #B0A28C;
  letter-spacing: 4px;
  text-indent: 4px;
}
.greet-text {
  margin: 12px 0 4px;
  font-family: var(--kai);
  font-size: 26px;
  line-height: 1.7;
  color: var(--ink-txt);
}
.greet-card .btn { margin-top: 18px; }

/* ===================== Toast ===================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%);
  background: rgba(58, 50, 40, .92);
  color: #FFF8EE;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 999;
  max-width: 80%;
  text-align: center;
  animation: fadeUp .25s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes fadeUp { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ===================== 伪装崩溃页（登录前的障眼法） ===================== */
.crash-view {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  background: var(--paper);
}
.crash-wrap { width: 100%; max-width: 400px; }
.crash-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 34px 24px 26px;
  box-shadow: 0 10px 30px rgba(96, 78, 52, .08);
  text-align: center;
}
.crash-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #EAE2D3;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.crash-sad {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 34px;
  color: #A3947F;
  letter-spacing: 1px;
}
.crash-icon.pop { animation: crashPop .18s ease; }
@keyframes crashPop {
  50% { transform: scale(.9); background: #DFD3BE; }
}
.crash-title {
  font-size: 21px;
  font-weight: 600;
  color: var(--ink-txt);
  letter-spacing: 1px;
}
.crash-desc {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.8;
  color: #8A7B66;
}
.crash-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.crash-btn {
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid #E0D4BE;
  background: #FFFDF8;
  color: #6B5C46;
  font-size: 13px;
  letter-spacing: 1px;
  transition: transform .1s;
}
.crash-btn.primary,
.crash-btn.crash-primary { background: #3C342C; border-color: transparent; color: #FBF6EC; }
.crash-btn:active { transform: scale(.97); }
.crash-detail-txt {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.9;
  color: #B0A28C;
}

/* ===================== 登录 ===================== */
.auth-view {
  /* vh 为旧浏览器回退；dvh 随浏览器工具栏/键盘动态变化，避免居中内容被顶出可视区 */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
.auth-inner {
  width: 100%;
  max-width: 400px;
  margin: auto; /* 空间富余时垂直居中；内容超高时可正常滚动、顶部不被裁掉 */
}
.auth-inner .masthead { padding: 10px 0 24px; }
.auth-card { padding: 16px; }
.auth-card .field { margin-top: 12px; }
.auth-card .field:first-child { margin-top: 4px; } /* 去掉切换条后，首行输入框距卡片顶留一点空 */
.auth-card .btn { margin-top: 16px; }
.auth-err { margin-top: 10px; color: var(--seal); font-size: 12px; min-height: 16px; text-align: center; }
.auth-tip { margin-top: 10px; color: #B0A28C; font-size: 11px; text-align: center; }

/* ===================== 桌面微调 ===================== */
@media (min-width: 760px) {
  .brand-name { font-size: 48px; letter-spacing: 14px; text-indent: 14px; }
  .page-main { padding-top: 6px; }
}

/* ===================== TODO · 叮嘱墙（朱红墙＋明黄便签，一眼分清区域） ===================== */
.todo-panel {
  position: relative;
  background: linear-gradient(160deg, #C64A2E 0%, #9E3420 100%);
  border-radius: 14px;
  padding: 12px 13px 13px;
  margin-bottom: 16px;
  box-shadow: 0 6px 16px rgba(146, 56, 32, .26);
  overflow: hidden;
}
.todo-panel::before { /* 墙顶一道高光，添一点“贴纸板”质感 */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 36px;
  background: linear-gradient(180deg, rgba(255, 244, 224, .18), transparent);
  pointer-events: none;
}
.todo-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.todo-title-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.todo-title {
  font-family: var(--kai);
  font-size: 20px;
  color: #FFF6E6;
  letter-spacing: 4px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(120, 30, 10, .35);
  flex-shrink: 0;
}
.todo-caption {
  font-size: 10px;
  color: rgba(255, 246, 230, .82);
  letter-spacing: .5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.todo-add {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFE08A;
  color: #A03A20;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(96, 28, 12, .3);
  transition: transform .12s ease;
}
.todo-add:active { transform: scale(.9); }
.todo-write {
  position: relative;
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.todo-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 250, 240, .96);
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 16px;
  outline: none;
  color: var(--ink-txt);
}
.todo-input::placeholder { color: #B08F74; }
.todo-input:focus { border-color: #FFD98A; background: #FFFDF5; }
.todo-write-btn {
  flex-shrink: 0;
  background: #FFD98A;
  color: #8C2F17;
  font-weight: 600;
  border-radius: 9px;
  padding: 0 15px;
  font-size: 13px;
  letter-spacing: 3px;
  text-indent: 3px;
}
.todo-empty {
  position: relative;
  margin: 8px 2px 2px;
  font-size: 12px;
  color: rgba(255, 246, 230, .85);
  letter-spacing: .5px;
}
.todo-list { margin-top: 2px; }
/* 便签纸条：明黄纸底，像随手撕下贴在朱红墙上的叮嘱 */
.todo-stick {
  position: relative;
  background: linear-gradient(180deg, #FFF7B8 0%, #FFE987 100%);
  border-radius: 5px;
  padding: 10px 38px 8px 12px;
  margin-top: 9px;
  box-shadow: 0 2px 7px rgba(96, 42, 16, .28);
}
.todo-txt {
  font-family: var(--kai);
  font-size: 16px;
  line-height: 1.7;
  color: #6B4617;
  font-weight: 700;
  word-break: break-word;
  white-space: pre-wrap;
}
.todo-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.todo-by { font-size: 10px; color: #A97E33; letter-spacing: .5px; }
.todo-rm {
  position: absolute;
  right: 7px;
  top: 7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(168, 118, 30, .16);
  color: #9A6E22;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.todo-rm:active { background: #B5442B; color: #FFF6E6; }

/* ===================== 留言簿分隔线（叮嘱墙与留言区的分界） ===================== */
.msg-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 4px 12px;
}
.msg-sep::before,
.msg-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(196, 150, 96, 0), #D8C6A2);
}
.msg-sep::after {
  background: linear-gradient(90deg, #D8C6A2, rgba(196, 150, 96, 0));
}
.msg-sep-txt {
  font-family: var(--kai);
  font-size: 13px;
  letter-spacing: 7px;
  text-indent: 7px;
  color: #BF9E68;
  font-weight: 600;
  flex-shrink: 0;
}

/* ===================== 写一页信笺 · 右下角浮动 ＋ ===================== */
.fab {
  position: fixed;
  right: max(14px, calc((100vw - 520px) / 2 + 14px));
  bottom: calc(env(safe-area-inset-bottom) + 76px);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--seal);
  color: #FBF6EC;
  font-size: 27px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(160, 60, 35, .32);
  z-index: 500;
  transition: transform .15s ease;
}
.fab:active { transform: scale(.9); }

/* ===================== 写一页信笺 · 居中弹层 ===================== */
.msg-mask {
  position: fixed;
  inset: 0;
  z-index: 950;              /* 盖过 Tab 栏与浮动按钮，低于 toast */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 18px;
  background: rgba(58, 50, 40, .44);
  animation: msgMaskIn .2s ease;
}
@keyframes msgMaskIn { from { opacity: 0; } }
.msg-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 86vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 17px 17px 14px;
  box-shadow: 0 20px 50px rgba(44, 36, 26, .28);
  animation: msgCardIn .3s cubic-bezier(.2, .85, .3, 1.1);
}
@keyframes msgCardIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
}
.msg-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.msg-card .letter-title { font-size: 15px; letter-spacing: 4px; }
.msg-x {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #F1E9DA;
  color: #A3947F;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msg-card .letter-area {
  margin-top: 12px;
  border: 1px dashed #D9CDBB;
  border-radius: 10px;
  padding: 12px;
  background: #FCF8EF;
}

/* ===================== 想做 · 一起想做的事（朱红墙＋明黄便签，可打勾完成） ===================== */
/* 沿用 TODO 叮嘱墙的「墙 + 便签」语言，只是便签上多了一个可打勾的圆点 */
.want-list { margin-top: 2px; }

/* 分组小标题：想做的事 / 已完成（底色是朱红墙，用米白字） */
.want-sec {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 2px 0;
  font-size: 11px;
  color: rgba(255, 246, 230, .92);
  letter-spacing: 3px;
  font-weight: 700;
}
.want-sec::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 246, 230, .5), rgba(255, 246, 230, 0));
}
.want-sec-num { font-size: 10px; color: rgba(255, 246, 230, .68); letter-spacing: 0; font-weight: 400; }
.want-sec-done { color: rgba(255, 246, 230, .6); }

/* 单条想做：明黄便签，左侧圆圈可打勾 */
.want-stick {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(180deg, #FFF7B8 0%, #FFE987 100%);
  border-radius: 5px;
  padding: 10px 38px 9px 12px;
  margin-top: 9px;
  box-shadow: 0 2px 7px rgba(96, 42, 16, .28);
  transition: opacity .2s ease;
}
.want-stick.done {
  background: linear-gradient(180deg, #F4EFDD 0%, #E8E0CB 100%);
  box-shadow: 0 2px 6px rgba(96, 42, 16, .16);
  opacity: .94;
}
/* 打勾圆点：未完成是描边圈，完成后实心朱红带 ✓ */
.want-box {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid #C79A3A;
  background: rgba(255, 253, 245, .6);
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.want-box:active { transform: scale(.88); }
.want-box.on {
  background: var(--seal);
  border-color: var(--seal);
}
.want-box.on::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  color: #FBF6EC;
}
.want-note { flex: 1; min-width: 0; }
.want-note-txt {
  font-family: var(--kai);
  font-size: 16px;
  line-height: 1.7;
  color: #6B4617;
  font-weight: 700;
  word-break: break-word;
  white-space: pre-wrap;
  transition: color .2s ease;
}
.want-note-txt.done {
  color: #9C8C68;
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-color: #B6A87E;
}
.want-note-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.want-note-doneby { font-size: 10px; color: var(--seal); letter-spacing: .5px; }