/* ===== 情侣手账本 · 统一设计系统（系统默认字体） ===== */

:root {
  --cream: #F7F2E9;
  --paper: #FDFAF3;
  --kraft: #C8A97E;
  --kraft-deep: #B99B6B;
  --pink: #E8B4B8;
  --pink-deep: #D99CA1;
  --blue: #A8C0C6;
  --ink: #44403C;
  --ink-soft: #78716C;
  --ink-faint: #A8A29E;
  --line: #EAE3D5;
  --danger: #E4636F;
}

* { -webkit-tap-highlight-color: transparent; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background-color: var(--cream);
  background-image: radial-gradient(rgba(200, 169, 126, 0.12) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--ink);
}

/* ---------- 卡片 ---------- */
.card {
  background: var(--paper);
  border: 1px solid rgba(200, 169, 126, 0.25);
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(120, 90, 50, 0.08);
  padding: 1.4rem;
}
.card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.card-desc {
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-bottom: 1rem;
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: 14px;
  padding: 0.72rem 1.3rem;
  border: none;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s, filter 0.15s;
}
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.6; pointer-events: none; }
.btn-block { width: 100%; }
.btn-primary {
  background: linear-gradient(135deg, #EDC2C6, #E19DA3);
  color: #fff;
  box-shadow: 0 4px 16px rgba(225, 157, 163, 0.45);
}
.btn-primary:hover { filter: brightness(1.04); }
.btn-blue {
  background: linear-gradient(135deg, #B6CDD3, #9BB9C1);
  color: #fff;
  box-shadow: 0 4px 16px rgba(154, 184, 192, 0.4);
}
.btn-light {
  background: #fff;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.btn-danger-text { background: none; color: var(--danger); font-weight: 500; }

/* 房间里的次要 / 危险操作：细描边 + 淡底色，和普通文字链接区分开 */
.btn-quiet {
  background: #fff;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(120, 90, 50, 0.06);
}
.btn-quiet:hover {
  background: #FDFAF3;
  border-color: rgba(200, 169, 126, 0.7);
  color: var(--ink);
  box-shadow: 0 3px 12px rgba(120, 90, 50, 0.1);
}
.btn-danger-soft {
  background: rgba(228, 99, 111, 0.08);
  color: #c9555f;
  border: 1px solid rgba(228, 99, 111, 0.35);
  box-shadow: 0 2px 8px rgba(228, 99, 111, 0.08);
}
.btn-danger-soft:hover {
  background: rgba(228, 99, 111, 0.15);
  border-color: rgba(228, 99, 111, 0.65);
  color: #b8414c;
  box-shadow: 0 3px 12px rgba(228, 99, 111, 0.16);
}

/* ---------- 表单 ---------- */
.label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}
.field {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 0.72rem 0.95rem;
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field::placeholder { color: #C3BBAE; }
.field:focus {
  outline: none;
  border-color: var(--kraft);
  box-shadow: 0 0 0 3px rgba(200, 169, 126, 0.18);
}

/* ---------- 页面标题（登录/注册等） ---------- */
.auth-logo {
  width: 64px; height: 64px;
  margin: 0 auto;
  border-radius: 20px;
  background: linear-gradient(135deg, #F6E7D8, #EDD9BC);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 6px 20px rgba(185, 155, 107, 0.3);
  margin-bottom: 1rem;
}
.auth-title { font-size: 1.45rem; font-weight: 700; text-align: center; }
.auth-sub { font-size: 0.85rem; color: var(--ink-faint); text-align: center; margin-bottom: 1.6rem; }

/* ---------- 数字锁键盘 ---------- */
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 264px;
  margin: 0 auto;
}
.key {
  height: 58px;
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid rgba(200, 169, 126, 0.3);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 3px 8px rgba(120, 90, 50, 0.08);
  transition: transform 0.08s, background 0.12s;
  user-select: none;
  cursor: pointer;
}
.key:active { transform: scale(0.92); background: #F3EDDF; }

/* 锁码圆点 */
.dot {
  width: 15px; height: 15px;
  border-radius: 9999px;
  border: 2px solid var(--kraft);
  background: transparent;
  transition: all 0.15s;
}
.dot.fill { background: var(--pink); border-color: var(--pink); transform: scale(1.15); }

/* ---------- 封面 ---------- */
.cover-book {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 7px),
    linear-gradient(150deg, #F1E1C8, #E3CDA6 55%, #D6BB8E);
  border: 7px solid #B9975F;
  border-radius: 18px;
  box-shadow:
    inset 0 0 46px rgba(120, 90, 50, 0.18),
    0 24px 48px rgba(120, 90, 50, 0.35);
}
.cover-title { font-size: 1.4rem; font-weight: 700; color: #6B5433; letter-spacing: 0.04em; }
/* 封面文字压在照片上：一层极淡的亮色描影，不遮挡照片但更清楚 */
.cover-book h1, .cover-book p { text-shadow: 0 1px 2px rgba(255, 255, 255, 0.65); }
.cover-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 9999px;
  padding: 0.28rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #8A7350;
}
/* 未读提示：淡红底 + 红描边，和「在一起」白胶囊区分开 */
.cover-stat-unread {
  background: rgba(228, 99, 111, 0.1);
  border: 1px solid rgba(228, 99, 111, 0.35);
  color: #c9555f;
}
/* 封面下方的次要操作：统一轻量胶囊，和粉色主按钮拉开层次 */
.cover-mini-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(200, 169, 126, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  color: #96805C;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.16s;
}
.cover-mini-link:hover {
  background: #fff;
  border-color: rgba(217, 162, 168, 0.7);
  color: #b06a78;
}
.cover-mini-link:active { transform: scale(0.97); }
.cover-mini-link:focus-visible {
  outline: 2px solid rgba(217, 162, 168, 0.7);
  outline-offset: 2px;
}
@media (prefers-color-scheme: dark) {
  .cover-mini-link {
    background: rgba(40, 35, 30, 0.55);
    border-color: rgba(220, 200, 160, 0.22);
    color: #d8b890;
  }
  .cover-mini-link:hover { background: rgba(60, 52, 44, 0.85); color: #f0dcc0; }
}

/* ---------- 内页纸张 ---------- */
.page-paper {
  background:
    repeating-linear-gradient(0deg, transparent 0 29px, rgba(200, 169, 126, 0.08) 29px 30px),
    var(--paper);
  border: 1px solid rgba(200, 169, 126, 0.25);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(120, 90, 50, 0.08);
  padding: 1.1rem 1.25rem;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.page-title {
  font-size: 1.02rem;
  font-weight: 700;
  text-align: center;
  color: var(--ink-soft);
  letter-spacing: 0.12em;
  margin-bottom: 0.85rem;
  flex-shrink: 0;
}
.page-body { flex: 1; overflow-y: auto; padding-bottom: 0.5rem; min-height: 0; }

/* ---------- 纸条 ---------- */
.note {
  position: relative;
  padding: 0.85rem 1rem;
  border-radius: 4px 4px 12px 4px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  font-size: 0.92rem;
  line-height: 1.65;
  word-break: break-word;
  animation: note-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.note::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  width: 34px; height: 12px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(200, 169, 126, 0.5);
  border-radius: 2px;
}
.note-pink { background: #FBE0E2; }
.note-yellow { background: #FDF3C7; }
.note-blue { background: #DCE9EC; }
.note-green { background: #DFEDDD; }
.note-unread { outline: 2px solid var(--pink); }
.note-makeup { outline: 2px dashed #D98E94; }
.note-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  font-size: 0.72rem;
  color: rgba(87, 83, 78, 0.6);
}
@keyframes note-in {
  from { transform: translateY(40px) rotate(6deg) scale(0.9); opacity: 0; }
  60% { transform: translateY(-6px) rotate(-2deg) scale(1.02); }
  to { transform: translateY(0) rotate(var(--tilt, 0deg)) scale(1); opacity: 1; }
}

/* ---------- 未读红点 ---------- */
.unread-dot {
  width: 9px; height: 9px; border-radius: 9999px;
  background: var(--danger);
  display: inline-block;
  animation: breathe 2s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.6; }
}
.animate-pulse-soft { animation: breathe 2s ease-in-out infinite; }

/* ---------- 心情 ---------- */
.mood-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem;
}
.mood-btn {
  padding: 0.42rem 0.95rem;
  border-radius: 9999px;
  background: var(--cream);
  border: 1px solid rgba(200, 169, 126, 0.4);
  font-size: 0.88rem;
  transition: all 0.15s;
  cursor: pointer;
}
.mood-btn.mood-on {
  background: var(--pink); color: #fff; border-color: var(--pink);
  animation: bounce 0.4s;
}
@keyframes bounce {
  0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); }
}

/* ---------- 信箱两排筛选：共用同一套小胶囊，均分宽度 ---------- */
#msg-filters, #msg-type-filters { gap: 0.35rem; }
.filter-btn, .type-filter-btn {
  flex: 1;
  min-width: 0;
  padding: 0.28rem 0.2rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  color: #8A7C6C;
  background: #fff;
  border: 1px solid rgba(200, 169, 126, 0.45);
  cursor: pointer;
  transition: all 0.15s;
}
.filter-btn:hover, .type-filter-btn:hover { filter: brightness(0.97); }
.filter-btn.filter-on, .type-filter-btn.type-on {
  color: #fff; border-color: transparent; background: var(--kraft);
}
/* 第二排选中时用信件类型对应的四色 */
.type-filter-btn[data-type="love"].type-on    { background: #D98A9C; }
.type-filter-btn[data-type="apology"].type-on { background: #6E9EA9; }
.type-filter-btn[data-type="other"].type-on   { background: #C4A24A; }
.type-filter-btn[data-type="time"].type-on    { background: #8C75A8; }
/* 未读红点浮在按钮右上角，均分后也不会挤到「TA寄给我的」 */
#msg-filters .filter-btn { position: relative; }
#msg-filters .unread-badge {
  position: absolute;
  top: -7px; right: -3px;
  margin-left: 0;
  min-width: 1rem; height: 1rem;
  padding: 0 0.22rem;
  font-size: 0.62rem;
  border: 2px solid #fff;
}

/* ---------- 写留言颜色选择 ---------- */
.color-btn {
  width: 34px; height: 34px; border-radius: 10px;
  border: 2px solid transparent;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: transform 0.12s;
}
.color-btn.color-on { border-color: var(--ink-soft); transform: scale(1.12); }

/* ---------- 写信类型选择 ---------- */
.type-btn {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0.45rem 0.4rem;
  border-radius: 999px;
  border: 2px solid transparent;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.12s;
  white-space: nowrap;
}
.type-btn.type-on { border-color: var(--kraft); transform: scale(1.05); }

/* ---------- 时光信：送达日期 ---------- */
#letter-type-picker .type-btn {
  min-width: 0; white-space: nowrap;
  font-size: 0.78rem; padding: 0.45rem 0.2rem;
}
@media (max-width: 380px) {
  #letter-type-picker { flex-wrap: wrap; }
  #letter-type-picker .type-btn { flex: 1 1 40%; }
}
.time-letter-fields {
  background: linear-gradient(135deg, #F8F5FC, #F3EEF9);
  border: 1px solid #E3D8F0;
  border-radius: 16px;
  padding: 0.8rem 0.9rem;
  margin: 0 0 0.9rem;
}
.time-letter-label {
  display: block; font-size: 0.8rem; font-weight: 700;
  color: #6F5B86; margin-bottom: 0.45rem;
}
.time-letter-quick {
  font-size: 0.72rem; font-weight: 600; color: #6F5B86;
  background: #fff; border: 1px solid #E3D8F0; border-radius: 999px;
  padding: 0.25rem 0.6rem; cursor: pointer; transition: background 0.15s;
}
.time-letter-quick:hover { background: #EFE7F8; }
.time-letter-hint {
  font-size: 0.7rem; line-height: 1.5; color: #9481A8; margin: 0.5rem 0 0;
}

/* ---------- 信件类型 / 求和状态 ---------- */
.note-type {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-faint);
  margin-bottom: 0.25rem;
  letter-spacing: 0.03em;
}
.note-status {
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 0.55rem;
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
  text-align: center;
}
.note-status-pending { background: #FDF3C7; color: #8A6D2F; }
.note-status-accepted { background: #FBE0E2; color: #B0505E; }
.note-status-rejected { background: #EFEFEF; color: #8A8A8A; }

/* 求和按钮 */
.makeup-send-btn {
  display: block;
  width: 100%;
  margin-top: 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: 999px;
  background: var(--kraft);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(180, 136, 77, 0.35);
}
.makeup-send-btn:hover { filter: brightness(1.05); }
.makeup-send-btn:disabled { opacity: 0.6; cursor: default; }

/* 同意 / 拒绝 */
.makeup-decide {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.55rem;
}
.makeup-btn {
  flex: 1;
  padding: 0.5rem 0.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.12s;
}
.makeup-accept {
  background: #E8B4B8;
  color: #7A3A44;
  box-shadow: 0 2px 8px rgba(232, 180, 184, 0.5);
}
.makeup-reject {
  background: #EFEFEF;
  color: #8A8A8A;
}
.makeup-btn:hover { filter: brightness(1.05); }

/* ---------- 信箱信封列表 ---------- */
.wall {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ---------- 信封封面 ---------- */
.letter-cover {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  font: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  position: relative;
  box-shadow: 0 2px 10px rgba(120, 90, 50, 0.05);
  transition: transform 0.12s, box-shadow 0.12s;
}
.letter-cover:hover { box-shadow: 0 4px 14px rgba(120, 90, 50, 0.12); }
.letter-cover:active { transform: scale(0.985); }
.letter-cover-unread { border-color: var(--kraft); }
/* 未读信封：粉色描边 + 光环明显闪烁，直到所有未读变成已读 */
.letter-cover-unread {
  animation: envelope-blink 1.5s ease-in-out infinite;
}
@keyframes envelope-blink {
  0%, 100% { border-color: var(--kraft); box-shadow: 0 2px 10px rgba(120, 90, 50, 0.05); }
  50% { border-color: #E0566D; box-shadow: 0 0 0 4px rgba(224, 86, 109, 0.22); }
}
/* 未读信封右上角红点：与信封同步呼吸，手机上也能一眼看到 */
.letter-cover-unread .letter-cover-dot {
  animation: breathe 2s ease-in-out infinite;
}
/* 聊天记录里自己发的回复：对方看没看过的小标记 */
.reply-read-tag {
  align-self: flex-end;
  flex-shrink: 0;
  font-size: 0.62rem;
  line-height: 1;
  color: var(--ink-soft);
  opacity: 0.8;
}
.reply-read-tag.reply-read-on { color: #5c8f9c; }
/* 读信弹层里未读回复的圆框小标签：红底白字「N条新回复」，点「添加新回复」进聊天后才消失 */
.letter-unread-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  background: #E0566D;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  animation: unread-pulse 1.5s ease-in-out infinite;
}
@keyframes unread-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 86, 109, 0); }
  50% { box-shadow: 0 0 0 3px rgba(224, 86, 109, 0.18); }
}
/* 回复行里的「🗑 删除」：与「＋ 添加回复」同尺寸的胶囊按钮，配色保留淡红警示 */
.letter-del-btn {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(228, 99, 111, 0.45);
  border-radius: 999px;
  background: rgba(228, 99, 111, 0.08);
  color: #c9555f;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.letter-del-btn:hover {
  background: rgba(228, 99, 111, 0.15);
  border-color: rgba(228, 99, 111, 0.7);
  color: #b8414c;
}
.letter-del-btn:active { transform: scale(0.97); }
.letter-del-btn:disabled { opacity: 0.4; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  /* 系统开启「减弱动态效果」（iOS 低电量模式也会触发）时，
     不再直接关掉未读提示，而是降级为无位移的颜色/阴影呼吸 */
  .letter-cover-unread {
    animation: envelope-glow 3s ease-in-out infinite;
  }
  .letter-cover-unread .letter-cover-dot {
    animation: none;
  }
}
@keyframes envelope-glow {
  0%, 100% { border-color: var(--kraft); box-shadow: 0 2px 10px rgba(120, 90, 50, 0.05); }
  50% { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(224, 86, 109, 0.18); }
}
.letter-cover-icon {
  font-size: 1.35rem;
  flex-shrink: 0;
  width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: #FDF6E9;
}
.letter-cover-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.letter-cover-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
}
.letter-cover-meta {
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.letter-cover-chip {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-faint);
  background: #F5EFE6;
  border-radius: 999px;
  padding: 0.14rem 0.55rem;
  white-space: nowrap;
}
.letter-cover-dot {
  position: absolute;
  top: -4px; right: -4px;
  width: 11px; height: 11px;
  border-radius: 999px;
  background: #E0566D;
  border: 2px solid #fff;
}

/* 信封上的类型标签（四种配色与写信弹层一致）+ 方向标签 */
.letter-cover-tags {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.3rem; margin: 0.2rem 0 0.1rem;
}
.letter-type-tag, .letter-dir-tag {
  display: inline-flex; align-items: center; gap: 0.15rem;
  font-size: 0.68rem; line-height: 1.5;
  border-radius: 999px; padding: 0.08rem 0.5rem;
  border: 1px solid transparent; white-space: nowrap;
}
.letter-type-tag { font-weight: 700; }
.letter-type-tag--love    { background: #FBE0E2; border-color: #F3C1C6; color: #C2697B; }
.letter-type-tag--apology { background: #DCE9EC; border-color: #BFD7DD; color: #527F8B; }
.letter-type-tag--other   { background: #FDF3C7; border-color: #EFE0A6; color: #9A7B36; }
.letter-type-tag--time    { background: #EDE5F5; border-color: #DDD0ED; color: #6F5B86; }
.letter-dir-tag {
  font-weight: 600; background: #fff;
  border-color: #E6DED2; color: #8A7C6C;
}
.letter-dir-mine   { background: #FFF8F8; border-color: #F0D6DA; color: #B97A84; }
.letter-dir-theirs { background: #F7FBFC; border-color: #D6E5EA; color: #648B96; }
/* 状态 chip 与类型 / 方向标签同排，窄屏放不下时自然换行，不再挤窄标题 */
.letter-cover-tags .letter-cover-chip {
  font-size: 0.66rem; padding: 0.08rem 0.5rem;
  line-height: 1.5; border: 1px solid #EBE0D0;
}
@media (max-width: 380px) {
  .letter-cover { gap: 0.5rem; padding: 0.65rem 0.7rem; }
  .letter-cover-icon { width: 2.1rem; height: 2.1rem; font-size: 1.15rem; }
  .letter-cover-title { font-size: 0.88rem; }
  .letter-cover-tags { gap: 0.25rem; }
  .letter-type-tag, .letter-dir-tag, .letter-cover-tags .letter-cover-chip {
    font-size: 0.63rem; padding: 0.06rem 0.42rem;
  }
}

/* ---------- 读信弹层（信笺样式） ---------- */
.letter-paper {
  position: relative;
  width: 100%;
  max-width: 30rem;
  max-height: 90vh;
  max-height: 90dvh;            /* 键盘弹起时跟着可视高度缩小 */
  overflow-y: auto;             /* 内容再多也能滚到，底部不会被裁掉 */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  padding: 2.1rem 1.5rem 1.4rem;
  box-shadow: 0 20px 50px rgba(60, 40, 20, 0.22), 0 4px 10px rgba(60, 40, 20, 0.12);
  animation: sheet-pop 0.25s cubic-bezier(0.34, 1.3, 0.64, 1);
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 1.95rem,
      rgba(160, 130, 90, 0.10) 1.95rem,
      rgba(160, 130, 90, 0.10) 2.05rem
    ),
    linear-gradient(180deg, #FFFCF2 0%, #FFF8E5 100%);
  color: #2c2118;
}
@media (min-width: 640px) {
  .letter-paper { max-width: 34rem; padding: 2.5rem 2.2rem 1.7rem; }
}
@media (prefers-color-scheme: dark) {
  .letter-paper {
    background:
      repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 1.95rem,
        rgba(220, 200, 160, 0.07) 1.95rem,
        rgba(220, 200, 160, 0.07) 2.05rem
      ),
      linear-gradient(180deg, #2a2520 0%, #221d18 100%);
    color: #ece2cf;
  }
}
.letter-paper-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: #7d6e58;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  border: 1px solid rgba(160, 130, 90, 0.25);
  z-index: 2;
}
.letter-paper-close:active { transform: scale(0.9); }
@media (prefers-color-scheme: dark) {
  .letter-paper-close { background: rgba(40, 35, 30, 0.7); color: #d0c5b0; border-color: rgba(220, 200, 160, 0.2); }
}
.letter-paper-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid rgba(160, 130, 90, 0.4);
  pointer-events: none;
}
.letter-paper-corner-tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.letter-paper-corner-br { bottom: 12px; right: 12px; border-left: none; border-top: none; }
@media (prefers-color-scheme: dark) {
  .letter-paper-corner { border-color: rgba(220, 200, 160, 0.3); }
}
.letter-paper-header {
  flex-shrink: 0;
  margin-bottom: 0.9rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px dashed rgba(160, 130, 90, 0.3);
}
@media (prefers-color-scheme: dark) {
  .letter-paper-header { border-bottom-color: rgba(220, 200, 160, 0.22); }
}
.letter-paper-type {
  font-size: 0.95rem;
  color: #8a6a4a;
  margin-bottom: 0.6rem;
  font-family: "Noto Serif SC", "STZhongsong", "Songti SC", serif;
  letter-spacing: 0.05em;
}
@media (prefers-color-scheme: dark) {
  .letter-paper-type { color: #d8b890; }
}
.letter-paper-row {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin-bottom: 0.35rem;
}
.letter-paper-tag {
  display: inline-block;
  min-width: 2.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(110, 80, 50, 0.7);
  font-family: "Georgia", "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  .letter-paper-tag { color: rgba(220, 200, 160, 0.7); }
}
.letter-paper-name {
  font-size: 1.02rem;
  font-weight: 600;
  color: #4a372a;
  font-family: "Noto Serif SC", "STZhongsong", "Songti SC", serif;
  letter-spacing: 0.04em;
}
@media (prefers-color-scheme: dark) {
  .letter-paper-name { color: #f0e5d0; }
}
.letter-paper-content {
  flex: 1 1 auto;
  min-height: 4.5rem;
  max-height: 52vh;
  overflow-y: auto;
  padding: 0.6rem 0.4rem;
  display: flex;
  color: inherit;
  background: transparent;
}
/* 内层文本：短内容整体居中；内容超长时自动回落到顶部，避免 flex 居中裁掉第一行 */
.letter-paper-text {
  margin: auto;
  width: 100%;
  text-align: center;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 1rem;
  line-height: 2.05rem;  /* 与背景横线步进同步，营造信纸感 */
  font-family: "Noto Serif SC", "Songti SC", "STZhongsong", serif;
}
.letter-paper-content::-webkit-scrollbar { width: 4px; }
.letter-paper-content::-webkit-scrollbar-thumb { background: rgba(160, 130, 90, 0.3); border-radius: 2px; }
.letter-paper-content::-webkit-scrollbar-track { background: transparent; }
.letter-paper-meta {
  flex-shrink: 0;
  margin-top: 0.7rem;
  padding-top: 0.55rem;
  border-top: 1px dashed rgba(160, 130, 90, 0.25);
  font-size: 0.78rem;
  color: rgba(110, 80, 50, 0.6);
  text-align: right;
  font-family: "Georgia", "Times New Roman", serif;
  font-style: italic;
}
@media (prefers-color-scheme: dark) {
  .letter-paper-meta { color: rgba(220, 200, 160, 0.55); border-top-color: rgba(220, 200, 160, 0.18); }
}
.letter-paper-extra {
  flex-shrink: 0;
  margin-top: 0.9rem;
}

/* ---------- 信件回复（评论区式聊天，四种信件通用） ---------- */
/* 键盘弹起时遮罩只占键盘上方，信纸随可视高度居中，回复区不会被顶出屏幕 */
#letter-modal, #chat-modal { bottom: auto; height: 100vh; height: 100dvh; }
/* 独立回复界面：与读信弹层同尺寸，聊天记录吃掉所有剩余高度 */
.chat-paper { height: 90dvh; }
/* 聊天界面左右留白收窄：信纸默认的 1.5rem / 2.2rem padding 对聊天气泡来说太宽。
   用 ID 提权，才能覆盖 @media 里 .letter-paper 的 padding 简写 */
#chat-modal .chat-paper {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
@media (min-width: 640px) {
  #chat-modal .chat-paper {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
}
.chat-header { margin-bottom: 0.6rem; }
/* 用 ID 提高权重，避免被后面通用的 .reply-list 规则覆盖 */
#chat-modal .chat-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  margin: 0.1rem 0 0.4rem;
  padding: 0.2rem 0.15rem;
}
.chat-form { flex-shrink: 0; }
/* 「添加回复」入口放在回复标题行右侧 */
.reply-open-btn {
  margin-left: auto;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(200, 169, 126, 0.6);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: #8a6a4a;
  cursor: pointer;
  white-space: nowrap;
}
.reply-open-btn:active { transform: scale(0.97); }
@media (prefers-color-scheme: dark) {
  .reply-open-btn { background: rgba(40, 35, 30, 0.7); color: #d8b890; }
}
.letter-replies {
  flex-shrink: 0;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px dashed rgba(160, 130, 90, 0.3);
}
.letter-replies.hidden { display: none; }
.letter-replies-head {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.78rem; font-weight: 700;
  color: #8a6a4a; margin-bottom: 0.5rem;
}
.reply-count {
  font-size: 0.68rem; font-weight: 600;
  color: #a08a6c; background: rgba(200, 169, 126, 0.18);
  border-radius: 999px; padding: 0.05rem 0.45rem;
}
.reply-count:empty { display: none; }
.reply-list {
  list-style: none; margin: 0; padding: 0 0.15rem;
  max-height: 20vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.reply-list::-webkit-scrollbar { width: 4px; }
.reply-list::-webkit-scrollbar-thumb { background: rgba(160, 130, 90, 0.3); border-radius: 2px; }
.reply-list::-webkit-scrollbar-track { background: transparent; }
.reply-item {
  display: flex; justify-content: flex-start;
  align-items: flex-start; gap: 0.45rem;
}
.reply-item.reply-mine { justify-content: flex-end; }
/* 双方头像：有图显示图片，没图显示昵称首字 + 各自己的颜色圈 */
.reply-avatar {
  flex-shrink: 0;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.95rem; font-weight: 700;
  background: #E8B4B8;
  border: 2px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 1px 4px rgba(60, 40, 20, 0.12);
}
.reply-avatar img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.reply-bubble {
  max-width: 82%;
  padding: 0.4rem 0.65rem;
  background: #FDF1F3;
  border: 1px solid #F0D6DA;
  border-radius: 12px 12px 12px 3px;
  color: #4a372a;
}
.reply-mine .reply-bubble {
  background: #EDF6F9;
  border-color: #C9DEE4;
  border-radius: 12px 12px 3px 12px;
}
.reply-head {
  display: flex; align-items: baseline; gap: 0.5rem;
  font-size: 0.66rem; color: rgba(110, 80, 50, 0.6);
  margin-bottom: 0.2rem;
}
.reply-name { font-weight: 700; color: #8a6a4a; }
.reply-text {
  margin: 0; font-size: 0.84rem; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
/* 聊天里发送的多张图片 + 选图入口 */
.reply-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem;
  margin-top: 0.35rem;
}
.reply-images--single { grid-template-columns: 1fr; }
.reply-images--single .reply-image { max-height: 14rem; }
.reply-image {
  display: block;
  width: 100%;
  max-height: 9rem;
  object-fit: cover;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  cursor: zoom-in;
}
.reply-image-pick {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem;
  border: 1px solid rgba(200, 169, 126, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: #8a6a4a;
  font-size: 0.9rem; line-height: 1;
  cursor: pointer;
}
.reply-image-pick:active { transform: scale(0.94); }
.reply-image-preview {
  display: flex; align-items: center; gap: 0.55rem;
  flex-shrink: 0;
  margin: 0.25rem 0 0;
  font-size: 0.74rem;
  color: #8a6a4a;
}
.reply-image-preview.hidden { display: none; }
.reply-image-clear {
  border: none; background: none; padding: 0;
  font-family: inherit; font-size: 0.72rem;
  color: #a08a6c; cursor: pointer;
}
@media (prefers-color-scheme: dark) {
  .reply-image-pick { background: rgba(40, 35, 30, 0.7); color: #d8b890; }
  .reply-image-preview { color: #d8b890; }
}
.reply-form { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.6rem; }
/* 📷 / 输入框 / 发送按钮三者等高，并沿同一条水平线对齐 */
.reply-form > .reply-input,
.reply-form > .reply-send {
  height: 2.4rem;
  box-sizing: border-box;
}
.reply-input {
  flex: 1; min-width: 0;
  font-family: inherit; font-size: 0.84rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(200, 169, 126, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: #4a372a;
}
.reply-input:focus { outline: none; border-color: var(--kraft); }
.reply-send {
  flex-shrink: 0;
  font-family: inherit; font-size: 0.8rem; font-weight: 700;
  padding: 0.45rem 0.9rem;
  border: none; border-radius: 999px;
  background: var(--kraft); color: #fff; cursor: pointer;
}
.reply-send:disabled { opacity: 0.55; cursor: default; }
@media (prefers-color-scheme: dark) {
  .letter-replies { border-top-color: rgba(220, 200, 160, 0.22); }
  .letter-replies-head, .reply-name { color: #d8b890; }
  .reply-head { color: rgba(220, 200, 160, 0.6); }
}

/* ---------- 未读红点徽章（微信式数字） ---------- */
.unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.32rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #E0566D;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.unread-badge.hidden { display: none; }

/* ---------- 草稿操作（编辑 / 删除） ---------- */
.draft-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

/* ---------- 写信：存草稿按钮 ---------- */
.btn-draft {
  background: var(--cream);
  color: var(--ink);
  border: 1px solid rgba(200, 169, 126, 0.55);
  box-shadow: none;
}
.btn-draft:hover { filter: brightness(0.98); }

/* ---------- 心愿 ---------- */
.wish-done { text-decoration: line-through; color: var(--ink-faint); }

/* ---------- 编辑关于我 ---------- */
dd.editable[contenteditable="true"] {
  background: #FFFDF5;
  outline: 1px dashed var(--kraft);
  border-radius: 6px;
  padding: 2px 5px;
}

/* ---------- 关于我卡片 ---------- */
.profile-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem;
  font-size: 0.88rem;
}
.profile-avatar {
  width: 40px; height: 40px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  flex-shrink: 0;
}

/* ---------- 飘落纸片 ---------- */
.petals {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
  overflow: hidden;
}
.petal {
  position: absolute;
  top: -20px;
  width: 10px; height: 14px;
  border-radius: 10px 0 10px 0;
  background: rgba(232, 180, 184, 0.6);
  animation: fall linear infinite;
}
@keyframes fall {
  0% { transform: translateY(-5vh) rotate(0deg); }
  100% { transform: translateY(110vh) rotate(360deg); }
}

/* ---------- 页签 ---------- */
.tab {
  flex: 1;
  padding: 0.5rem 0.25rem;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-faint);
  background: transparent;
  transition: all 0.15s;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--ink-soft); background: rgba(200, 169, 126, 0.1); }
.tab-on {
  color: #fff;
  background: linear-gradient(135deg, #E4B7BB, #D9A2A8);
  box-shadow: 0 3px 10px rgba(217, 162, 168, 0.35);
}

/* ---------- 翻页 ---------- */
#book .page { height: 100%; overflow: hidden; }
.page-flip-left { animation: flipLeft 0.4s ease; }
.page-flip-right { animation: flipRight 0.4s ease; }
@keyframes flipLeft {
  from { transform: perspective(1200px) rotateY(-35deg); opacity: 0.3; }
  to { transform: none; opacity: 1; }
}
@keyframes flipRight {
  from { transform: perspective(1200px) rotateY(35deg); opacity: 0.3; }
  to { transform: none; opacity: 1; }
}

/* ---------- 导航返回箭头 ---------- */
.nav-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 500;
  transition: transform 0.12s, color 0.12s;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0.4rem 0.5rem;
  border-radius: 10px;
}
.nav-arrow:active { transform: scale(0.9); }
.nav-arrow:disabled { opacity: 0.3; }

/* ---------- 顶部栏按钮（封面 / 设置） ---------- */
.topbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(200, 169, 126, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #8a6a4a;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(138, 106, 74, 0.08);
  transition: background 0.16s, border-color 0.16s, color 0.16s,
              box-shadow 0.16s, transform 0.16s;
  cursor: pointer;
}
.topbar-btn .topbar-icon { font-size: 0.95rem; line-height: 1; }
.topbar-btn:hover {
  background: #fff;
  border-color: rgba(217, 162, 168, 0.75);
  color: #b06a78;
  box-shadow: 0 3px 12px rgba(217, 162, 168, 0.22);
  transform: translateY(-1px);
}
.topbar-btn:active { transform: translateY(0) scale(0.97); }
.topbar-btn:focus-visible {
  outline: 2px solid rgba(217, 162, 168, 0.7);
  outline-offset: 2px;
}
@media (prefers-color-scheme: dark) {
  .topbar-btn {
    background: rgba(40, 35, 30, 0.7);
    border-color: rgba(220, 200, 160, 0.22);
    color: #d8b890;
    box-shadow: none;
  }
  .topbar-btn:hover {
    background: rgba(60, 52, 44, 0.9);
    border-color: rgba(220, 200, 160, 0.45);
    color: #f0dcc0;
    box-shadow: none;
  }
}

/* ---------- 弹层（底部抽屉） ---------- */
.sheet {
  background: var(--paper);
  width: 100%;
  border-radius: 24px 24px 0 0;
  padding: 1.25rem 1.25rem 1.75rem;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
  animation: sheet-up 0.28s cubic-bezier(0.32, 0.72, 0.35, 1);
  /* 内容超过可视高度（尤其手机键盘弹起）时抽屉内部可滚，输入框不会被顶出屏幕 */
  max-height: 100%;
  max-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
@media (min-width: 640px) {
  .sheet { border-radius: 24px; max-width: 26rem; animation: sheet-pop 0.25s cubic-bezier(0.34, 1.3, 0.64, 1); }
}
.sheet-handle {
  width: 40px; height: 4px;
  border-radius: 9999px;
  background: var(--line);
  margin: 0 auto 0.9rem;
}
@media (min-width: 640px) { .sheet-handle { display: none; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-pop { from { transform: scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 消息提示浮层 ---------- */
.toast {
  animation: toast-in 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes toast-in {
  from { transform: translateY(-16px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ---------- 纪念日页 ---------- */
.anni-page {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Hero 卡片 */
.anni-hero {
  background: linear-gradient(135deg, #FF8FAB 0%, #FB6F92 100%);
  border-radius: 20px;
  padding: 1.1rem 1rem 1.2rem;
  text-align: center;
  color: #fff;
  box-shadow: 0 10px 28px rgba(251, 111, 146, 0.32);
  flex-shrink: 0;
}
.anni-hero-avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}
.anni-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.anni-avatar-heart {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  margin: 0 -0.1rem;
  z-index: 1;
}
.anni-hero-names {
  font-size: 0.82rem;
  opacity: 0.92;
  margin-bottom: 0.5rem;
}
.anni-hero-days {
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
}
.anni-hero-days strong {
  font-size: 2.4rem;
  font-weight: 700;
  margin: 0 0.15rem;
  line-height: 1;
}
.anni-hero-start {
  font-size: 0.72rem;
  opacity: 0.85;
}

/* 添加表单 */
.anni-form {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.anni-form .field {
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
}
.anni-form .field:first-child { flex: 1; }
/* 空日期框上盖一句「选择时间」，选好日期后自动隐藏 */
.anni-date-wrap {
  position: relative;
  width: 140px;
  flex-shrink: 0;
}
.anni-date-wrap .field { width: 100%; }
.anni-date-hint {
  position: absolute;
  left: 0.85rem; top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: var(--ink-faint);
  pointer-events: none;
  white-space: nowrap;
}
.anni-date-wrap.has-value .anni-date-hint { display: none; }
.anni-date-wrap:not(.has-value) input { color: transparent; }
.anni-form .btn { padding: 0.6rem 0.95rem; font-size: 0.9rem; }

/* 纪念日列表 */
.anni-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow-y: auto;
}
.anni-empty {
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-top: 1.5rem;
}
.anni-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0.8rem 0.9rem;
  box-shadow: 0 2px 10px rgba(120, 90, 50, 0.05);
}
.anni-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #FFF0F3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.anni-info {
  flex: 1;
  min-width: 0;
}
.anni-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.anni-date {
  font-size: 0.75rem;
  color: var(--ink-faint);
  margin: 0;
}
.anni-days {
  text-align: right;
  flex-shrink: 0;
  line-height: 1.15;
}
.anni-days-num {
  display: inline-block;
  font-size: 1.35rem;
  font-weight: 700;
  color: #FB6F92;
  margin: 0 0.05rem;
}
.anni-days-label {
  font-size: 0.75rem;
  color: var(--ink-soft);
}
/* 固定项：我们在一起 / 我的生日 / TA 的生日 */
.anni-item-start {
  background: linear-gradient(135deg, #FFF5F6, #FFE9ED);
  border-color: rgba(251, 111, 146, 0.28);
}
.anni-days-today {
  color: #C2697B;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- 纪念日详情卡片 ---------- */
.anni-item { cursor: pointer; transition: transform 0.12s, box-shadow 0.15s; }
.anni-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(120, 90, 50, 0.12); }
.anni-item:active { transform: scale(0.99); }

.anni-detail-mask {
  display: none;
  position: fixed; inset: 0; z-index: 60;
  align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(66, 52, 42, 0.45);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.anni-detail-mask.anni-detail-open { display: flex; }
.anni-detail-card {
  position: relative;
  width: min(390px, 100%);
  max-height: 92vh; overflow-y: auto;
  background: #FDFAF3;
  border: 1px solid #EADFCB;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(70, 50, 38, 0.28);
  animation: anni-detail-in 0.26s cubic-bezier(0.34, 1.3, 0.64, 1);
}
@keyframes anni-detail-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.anni-detail-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: rgba(255, 255, 255, 0.28);
  color: #fff; font-size: 0.9rem; cursor: pointer;
}
.anni-detail-head {
  background: linear-gradient(135deg, #F06292, #F9A8C4);
  color: #fff; text-align: center;
  font-size: 1.1rem; font-weight: 700;
  padding: 18px 46px;
  letter-spacing: 0.02em;
}
.anni-detail-body { padding: 26px 20px 18px; text-align: center; }
.anni-detail-num {
  font-size: clamp(4.5rem, 22vw, 7.5rem);
  font-weight: 800; line-height: 1;
  color: #2E2A26; letter-spacing: -0.04em;
  margin-bottom: 22px; font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.anni-detail-date { font-size: 0.95rem; color: #8A7C6C; }
.anni-detail-foot {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px dashed #EADFCB;
  font-size: 0.78rem; color: #B4A899;
}
.anni-detail-actions { display: flex; gap: 8px; padding: 0 20px 20px; }
.anni-detail-btn {
  flex: 1; padding: 10px 4px;
  border-radius: 999px; border: 1px solid #E3D6C3;
  background: #fff; color: #8A7C6C;
  font-size: 0.85rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: transform 0.12s, filter 0.15s;
}
.anni-detail-btn:hover { filter: brightness(0.97); }
.anni-detail-btn:active { transform: scale(0.96); }
.anni-detail-btn-primary { background: #FBE9EC; border-color: #F3C1C6; color: #C2697B; }
.anni-detail-btn-danger { background: #FFF0F1; border-color: #F3C1C6; color: #E5484D; }
.anni-detail-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.anni-detail-form {
  display: none; flex-direction: column; gap: 8px;
  padding: 0 20px 20px;
}
.anni-detail-form.anni-detail-form-open { display: flex; }

/* 纪念日操作按钮 */
.anni-del-btn {
  flex-shrink: 0;
  padding: 0.38rem 0.8rem;
  border: 1px solid #F3C1C6;
  border-radius: 10px;
  background: #FFF0F1;
  color: #E5484D;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.anni-del-btn:hover {
  background: #E5484D;
  color: #fff;
  border-color: #E5484D;
}
.anni-del-btn:active { transform: scale(0.94); }

.anni-edit-btn {
  flex-shrink: 0;
  padding: 0.38rem 0.8rem;
  border: 1px solid rgba(251, 111, 146, 0.35);
  border-radius: 10px;
  background: #fff;
  color: #FB6F92;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.anni-edit-btn:hover {
  background: #FB6F92;
  color: #fff;
  border-color: #FB6F92;
}
.anni-save-btn {
  flex-shrink: 0;
  padding: 0.38rem 0.8rem;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #EDC2C6, #E19DA3);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(225, 157, 163, 0.4);
}
.anni-cancel-btn {
  flex-shrink: 0;
  padding: 0.38rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-soft);
  font-size: 0.78rem;
  cursor: pointer;
}
.anni-start-input {
  width: 135px;
  flex-shrink: 0;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
}

@media (max-width: 360px) {
  .anni-form { flex-wrap: wrap; }
  .anni-form .anni-date-wrap { width: 110px; }
}

/* ---------- 小记 ---------- */
.diary-page { overflow-y: auto; }
.diary-lock {
  background: linear-gradient(135deg, #FFF9F0, #FFF3E4);
  border: 1px dashed #E5C89A;
  border-radius: 16px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.9rem;
  text-align: center;
}
.diary-lock-icon { font-size: 1.5rem; display: block; margin-bottom: 0.3rem; }
.diary-lock-text {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
  line-height: 1.5;
}
.diary-countdown {
  font-size: 1.02rem;
  font-weight: 700;
  color: #D97706;
  margin: 0.15rem 0 0.45rem;
}
.diary-toggle {
  background: none;
  border: none;
  color: #B4884D;
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.diary-unlock-tip {
  background: linear-gradient(135deg, #F0FAF3, #E4F5EA);
  border: 1px solid #BEE3C8;
  border-radius: 14px;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  color: #2F7A4C;
  margin-bottom: 0.9rem;
  text-align: center;
}
.diary-unlock-tip strong { font-size: 1.05rem; color: #22A055; }
.diary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
/* 两栏标题：与月份卡片同款白卡，但没有箭头、不可点击，用淡粉 / 淡蓝区分 */
.diary-section {
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.65rem 0.9rem;
  display: flex; align-items: center; gap: 0.5rem;
  box-shadow: 0 2px 10px rgba(120, 90, 50, 0.05);
}
.diary-section--mine { margin-top: 1rem; }
.diary-section-name {
  font-size: 0.82rem; font-weight: 700; white-space: nowrap;
}
.diary-section-line { flex: 1; height: 1px; background: var(--line); opacity: 0.6; }
.diary-section-count {
  font-size: 0.72rem; color: var(--ink-faint);
  border-radius: 999px; padding: 0.12rem 0.55rem;
  background: #F5EFE6; white-space: nowrap;
}
/* 她的一栏：淡粉；我的一栏：淡蓝 */
.diary-section--partner { background: #FCEEF1; border-color: #EFC9CF; }
.diary-section--partner .diary-section-name { color: #B97A84; }
.diary-section--partner .diary-section-count { background: #FBE0E2; color: #C2697B; }
.diary-section--mine { background: #EAF4F8; border-color: #C9DEE4; }
.diary-section--mine .diary-section-name { color: #648B96; }
.diary-section--mine .diary-section-count { background: #DCE9EC; color: #527F8B; }

/* 年月分组（记不清日期排第一） */
.diary-group { list-style: none; }
.diary-group-head {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.65rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 10px rgba(120, 90, 50, 0.05);
  list-style: none;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}
.diary-group-head::-webkit-details-marker { display: none; }
.diary-group-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-faint);
  background: #F5EFE6;
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
}
.diary-group-arrow {
  margin-left: auto;
  font-size: 0.65rem;
  color: var(--ink-faint);
  transition: transform 0.2s;
}
.diary-group details[open] > .diary-group-arrow,
details[open] .diary-group-arrow { transform: rotate(90deg); }
.diary-group-list {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.diary-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.7rem 0.9rem;
  box-shadow: 0 2px 10px rgba(120, 90, 50, 0.05);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s;
}
.diary-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(120, 90, 50, 0.12);
}
.diary-item:active { transform: scale(0.99); }
.diary-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.diary-item-date {
  font-size: 0.78rem;
  color: var(--ink-faint);
  font-weight: 600;
}
/* 有照片的条目只留一枚很淡的小图标，不占版面 */
.diary-item-hasphoto {
  flex-shrink: 0;
  font-size: 0.72rem;
  line-height: 1;
  opacity: 0.5;
}
.diary-item-content {
  font-size: 0.9rem;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* 小记照片 */
.diary-photo-pick {
  display: block;
  margin-top: 0.7rem;
  padding: 0.55rem 0.8rem;
  border: 1px dashed #D8C6A8;
  border-radius: 12px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: #FFFDF8;
  cursor: pointer;
}
.diary-photo-pick:hover { border-color: #B4884D; color: #B4884D; }
/* 正文改成可插图的编辑区，外观沿用 .field 的输入框观感 */
.diary-editor {
  margin-top: 0.85rem;
  min-height: 8rem;
  max-height: 40vh;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
  -webkit-overflow-scrolling: touch;
}
.diary-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-faint);
  pointer-events: none;
}
.diary-editor:focus { border-color: var(--kraft); }
/* 内联图片：插在光标处，编辑器与详情卡片共用 */
.diary-inline-img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  margin: 0.5rem 0;   /* 和正文一样靠左，不居中 */
  border-radius: 10px;
  background: #F5EFE6;
  cursor: zoom-in;
}
.diary-editor .diary-inline-img { cursor: default; }
/* 建议弹层里已选截图的一行小字，点它可清除重选 */
.feedback-files {
  margin-top: 0.45rem;
  font-size: 0.72rem;
  color: var(--ink-soft);
  cursor: pointer;
  word-break: break-all;
}
.feedback-files:hover { color: #c9555f; }
/* 列表不显示缩略图，照片统一在详情卡片里看大图 */
/* 大图查看器要盖在小记详情卡片之上 */
#diary-photo-viewer { z-index: 70; }
#diary-photo-viewer-img {
  max-width: 96vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
}

/* ---------- 小记详情卡片（与纪念日详情卡片同一套外观） ---------- */
/* 只让正文滚动：标题栏和底部「修改 / 删除」固定在卡片两端。
   用 #diary-detail 限定，纪念日详情仍保持原来的整卡滚动 */
#diary-detail .anni-detail-card {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  max-height: 92dvh;   /* 手机地址栏收起 / 展开时按可视高度算 */
  overflow: hidden;    /* 卡片自身不滚，顺带让头部贴合圆角 */
}
#diary-detail .anni-detail-head,
#diary-detail .anni-detail-actions { flex-shrink: 0; }
#diary-detail .anni-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.diary-detail-head { padding: 16px 46px; font-size: 0.95rem; }
.diary-detail-body { padding: 20px 22px 8px; text-align: left; }
.diary-detail-meta {
  font-size: 0.75rem; color: var(--ink-faint);
  margin-bottom: 12px; font-weight: 600;
}
.diary-detail-content {
  font-size: 0.95rem; line-height: 1.8; color: var(--ink);
  white-space: pre-wrap; word-break: break-word; margin: 0;
}
.diary-detail-photo {
  display: block; width: 100%; max-height: 46vh;
  object-fit: contain; margin-top: 14px;
  border-radius: 12px; background: #F5EFE6; cursor: zoom-in;
}
.diary-detail-photo.hidden { display: none; }

/* ---------- 头像 ---------- */
.avatar-preview {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.3rem;
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
  border: 2px solid rgba(200, 169, 126, 0.35);
  box-shadow: 0 2px 8px rgba(120, 90, 50, 0.12);
}
.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* 没有头像时「使用默认头像」不可用，避免无意义的点击 */
.avatar-reset:disabled { opacity: 0.4; cursor: not-allowed; }
.anni-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ---------- 设置页分组 ---------- */
.settings-section {
  background: var(--paper);
  border: 1px solid rgba(200, 169, 126, 0.25);
  border-radius: 16px;
  box-shadow: 0 3px 16px rgba(120, 90, 50, 0.06);
  padding: 1.1rem 1.25rem;
}
.settings-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(200, 169, 126, 0.15);
}
.settings-row:last-child { border-bottom: none; }
.settings-icon {
  width: 36px; height: 36px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  background: var(--cream);
}