/* ============================================================
   页面专有样式
   顺序：首页 → 锁屏 → 留言板 → 相册 → 清单 → 点滴 → 设置
   ============================================================ */

/* ================================================== 首页 */

/* 全屏照片打底，下面压一层毛玻璃卡片。
   照片用 <img> 而不是 background-image：能用上图片缓存和 object-position。

   背景是"贴住"的：换照片时它不移动，页面滚动它也不动，
   像一扇窗外的景，你只是在窗前看。 */
.home {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

.home__bg {
  position: fixed;      /* 固定，不随页面滚动 */
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.home__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  /* 换图时淡入，而不是"啪"地一下换掉 */
  animation: bg-fade-in .5s var(--ease-out) both;
  filter: saturate(1.08) brightness(1.04);
}

@keyframes bg-fade-in {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: none; }
}

/* 没有照片时的兜底：粉渐变 + 云朵，绝不出现空白 */
.home__bg--none {
  background:
    radial-gradient(circle at 22% 18%, #FFE3EC 0%, transparent 46%),
    radial-gradient(circle at 78% 30%, #FFF0DA 0%, transparent 42%),
    linear-gradient(165deg, #FFE9F0 0%, #FFD9E5 46%, #FFCBA0 100%);
}

/* 压暗层：只压一点点，保证白色小字能读，又不把照片弄得脏。
   跟着背景一起固定，否则滚动时会错位。 */
.home__scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(70, 35, 50, .26) 0%,
    rgba(70, 35, 50, 0) 30%,
    rgba(70, 35, 50, .04) 62%,
    rgba(70, 35, 50, .34) 100%
  );
}

.home__body {
  flex: 1;
  display: flex;
  flex-direction: column;   /* 主卡片在上，"最近的日子"在下 */
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: calc(var(--nav-h) + var(--safe-top) + 20px) 20px calc(40px + var(--safe-bot));
}

/* 毛玻璃卡：整个站的主角就这一个元素，其余都为它安静。
   模糊程度由 --glass-blur 控制，设置页能调（0~40px）。 */
.timer {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 30px 24px 26px;
  text-align: center;
  border-radius: 28px;
  border: 1.5px solid rgba(255, 255, 255, .62);
  /* 玻璃感来自三件事：半透明底 + 背景模糊 + 内侧高光。
     底色带一点点粉，纯白会显得像塑料板。 */
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, .46) 0%,
    rgba(255, 240, 246, .34) 55%,
    rgba(255, 255, 255, .40) 100%
  );
  backdrop-filter: blur(calc(var(--glass-blur, 22) * 1px)) saturate(1.8) brightness(1.06);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur, 22) * 1px)) saturate(1.8) brightness(1.06);
  box-shadow:
    0 12px 44px rgba(70, 30, 45, .26),
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(255, 255, 255, .35);
}

/* 卡片顶上一道斜向高光，模拟玻璃反光 */
.timer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, .42) 0%,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0) 68%,
    rgba(255, 255, 255, .16) 100%
  );
}

/* 深色模式下玻璃要压暗，否则文字看不清 */
:root[data-mode="dark"] .timer {
  background: linear-gradient(
    160deg,
    rgba(60, 42, 52, .62) 0%,
    rgba(48, 34, 42, .52) 55%,
    rgba(60, 42, 52, .58) 100%
  );
  border-color: rgba(255, 255, 255, .18);
  box-shadow:
    0 12px 44px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

.timer__label {
  font-family: var(--font-hand);
  font-size: calc(15px * var(--scale));
  letter-spacing: .12em;
  color: #6E3B4E;
  text-shadow: 0 1px 6px rgba(255, 255, 255, .5);
}

:root[data-mode="dark"] .timer__label {
  color: #FFD9E4;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

/* 天数：整张卡就是为这个数字存在的。数字大到接近撑满卡片宽度 */
.timer__line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.timer__days {
  font-family: var(--font-hand);
  font-size: clamp(56px, 21vw, 104px);
  line-height: 1;
  margin: 8px 0 2px;
  color: #6B2F44;
  letter-spacing: -.02em;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, .6),
    0 6px 22px rgba(122, 68, 88, .18);
  font-variant-numeric: tabular-nums;
}

:root[data-mode="dark"] .timer__days {
  color: #FFF0F5;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .3), 0 8px 26px rgba(0, 0, 0, .45);
}

.timer__unit {
  font-family: var(--font-hand);
  font-size: calc(20px * var(--scale));
  color: #7A4458;
  line-height: 1;
  /* 和数字基线对齐，"天"不要浮在半空 */
  transform: translateY(-4px);
}

:root[data-mode="dark"] .timer__unit { color: #FFD9E4; }

.timer__names {
  margin-top: 12px;
  font-size: calc(13.5px * var(--scale));
  color: #6E3B4E;
  letter-spacing: .04em;
}

:root[data-mode="dark"] .timer__names { color: #E8C9D4; }

.timer__since {
  margin-top: 4px;
  font-size: calc(11.5px * var(--scale));
  color: rgba(110, 59, 78, .72);
}

:root[data-mode="dark"] .timer__since { color: rgba(232, 201, 212, .7); }

/* 心形小按钮：戳一下飘爱心。纯装饰 */
.timer__heart {
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 17px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  border: 1px solid rgba(255, 255, 255, .5);
  transition: transform .16s var(--ease-bounce);
}

.timer__heart:active { transform: scale(1.25); }

.floating-heart {
  position: fixed;
  z-index: 120;
  pointer-events: none;
  font-size: 18px;
  animation: float-up 1.15s var(--ease-out) forwards;
}

@keyframes float-up {
  0%   { opacity: 1; transform: translate(0, 0) scale(.7) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx, 0), -90px) scale(1.25) rotate(var(--rot, 18deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .floating-heart { display: none; }
}

/* 首页底部一句小字，给两个人看的悄悄话（设置里能改） */
.home__footer {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(18px + var(--safe-bot));
  text-align: center;
  font-family: var(--font-hand);
  font-size: calc(12.5px * var(--scale));
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 8px rgba(80, 40, 55, .55);
  pointer-events: none;
}

/* ================================================== 锁屏 */

.lock {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 211, 224, .8), transparent 46%),
    radial-gradient(circle at 82% 85%, rgba(255, 233, 168, .55), transparent 44%),
    var(--cream);
}

.lock__card {
  width: 100%;
  max-width: 340px;
  padding: 32px 24px 26px;
  text-align: center;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
  animation: lock-in .5s var(--ease-bounce) both;
}

@keyframes lock-in {
  from { opacity: 0; transform: scale(.94) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.lock__emoji {
  font-size: 44px;
  line-height: 1;
  display: block;
  margin-bottom: 12px;
}

.lock__title {
  font-family: var(--font-hand);
  font-size: calc(22px * var(--scale));
  margin-bottom: 6px;
}

.lock__hint {
  font-size: calc(13px * var(--scale));
  color: var(--berry-soft);
  margin-bottom: 20px;
  line-height: 1.6;
}

.lock__form { display: flex; flex-direction: column; gap: 12px; }

.lock__error {
  font-size: calc(12.5px * var(--scale));
  color: #b8435a;
  min-height: 18px;
}

/* 输对时卡片翻一下 */
.lock__card.is-ok {
  animation: unlock .55s var(--ease-out) both;
}

@keyframes unlock {
  0%   { transform: rotateY(0deg) scale(1); }
  55%  { transform: rotateY(90deg) scale(.96); opacity: .6; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}

/* ================================================== 通用页头 */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.page-head__title {
  font-family: var(--font-hand);
  font-size: calc(24px * var(--scale));
  color: var(--berry);
}

.page-head__sub {
  font-size: calc(12px * var(--scale));
  color: var(--berry-soft);
  margin-top: 1px;
}

/* ================================================== 留言板 */

/* 上半：小本子。横线纸 + 左侧装订孔 + 顶部胶带 */
.notebook {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 6px 16px 16px 6px;
  box-shadow: var(--shadow-md);
  padding: 18px 16px 16px 34px;
  margin-bottom: 22px;
  /* 横线：比纸色深一点点就够，太深会像表格、干扰写字 */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 31px,
    color-mix(in srgb, var(--line) 70%, transparent) 31px,
    color-mix(in srgb, var(--line) 70%, transparent) 32px
  );
  background-position: 0 18px;
}

/* 装订孔：间距拉大，数量少一点，不然像拉链 */
.notebook::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 26px;
  bottom: 26px;
  width: 7px;
  background-image: radial-gradient(circle, var(--line-strong) 2.5px, transparent 3px);
  background-size: 7px 42px;
  background-repeat: repeat-y;
  opacity: .75;
}

.notebook__tape {
  top: -10px;
  left: 50%;
  margin-left: -32px;
  transform: rotate(-3deg);
}

.notebook__title {
  font-family: var(--font-hand);
  font-size: calc(16px * var(--scale));
  color: var(--pink-ink);
  margin-bottom: 8px;
}

.notebook__textarea {
  width: 100%;
  min-height: 128px;
  border: none;
  background: transparent;
  resize: none;
  line-height: 32px;           /* 和横线对齐 */
  font-size: calc(15px * var(--scale));
  color: var(--berry);
}

.notebook__textarea:focus { outline: none; }

.notebook__textarea::placeholder { color: var(--berry-faint); }

.notebook__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* 留言纸颜色选择：一排小圆点 */
.dot-row { display: flex; gap: 8px; align-items: center; }

.dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(122, 68, 88, .1);
  transition: transform .14s var(--ease-bounce), border-color .16s;
}

.dot:active { transform: scale(1.15); }

.dot[aria-pressed="true"] {
  border-color: var(--berry);
  transform: scale(1.08);
}

/* 下半：软木板。留言像便签一样贴上去 */
.board {
  position: relative;
  border-radius: 16px;
  padding: 16px 12px 20px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #F6DFC9 0%, #EFD2B8 100%);
  border: 1.5px solid #E3C1A3;
  box-shadow: inset 0 2px 10px rgba(150, 100, 70, .18), var(--shadow-sm);
}

/* 深色模式下软木板也压暗 */
:root[data-mode="dark"] .board {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #4A3529 0%, #3E2C22 100%);
  border-color: #5A4234;
}

.board__empty {
  text-align: center;
  padding: 30px 16px;
  color: #8B5C3F;
  font-family: var(--font-hand);
  font-size: calc(14px * var(--scale));
}

:root[data-mode="dark"] .board__empty { color: #C8A488; }

/* 便签 */
.note {
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(122, 68, 88, .12);
  border-radius: var(--r-sticker);
  box-shadow: 0 2px 0 rgba(122, 68, 88, .08), 0 6px 14px rgba(122, 68, 88, .12);
  padding: 16px 14px 12px;
  margin-bottom: 14px;
  /* 每条歪一点，像真的用手贴的。用 nth-child 打散，避免整齐排列 */
  transform: rotate(var(--tilt, -1.2deg));
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
  animation: note-in .34s var(--ease-bounce) both;
}

.note:nth-child(2n)   { --tilt: 1.4deg; }
.note:nth-child(3n)   { --tilt: -.7deg; }
.note:nth-child(4n)   { --tilt: 1.9deg; }
.note:nth-child(5n)   { --tilt: -2.1deg; }

.note:hover,
.note:focus-within {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 3px 0 rgba(122, 68, 88, .1), 0 12px 24px rgba(122, 68, 88, .18);
}

@keyframes note-in {
  from { opacity: 0; transform: rotate(var(--tilt, 0deg)) scale(.9) translateY(-8px); }
  to   { opacity: 1; transform: rotate(var(--tilt, 0deg)) scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .note { animation: none; }
  .note:hover, .note:focus-within { transform: rotate(var(--tilt, 0deg)); }
}

/* 便签纸的颜色 */
.note--pink   { background: #FFF0F5; }
.note--mint   { background: #EDFAF4; }
.note--butter { background: #FFFAE6; }
.note--lilac  { background: #F6F0FE; }
.note--sky    { background: #EDF6FE; }

:root[data-mode="dark"] .note--pink   { background: #4A2F3A; }
:root[data-mode="dark"] .note--mint   { background: #2C4239; }
:root[data-mode="dark"] .note--butter { background: #473D25; }
:root[data-mode="dark"] .note--lilac  { background: #3A2F49; }
:root[data-mode="dark"] .note--sky    { background: #2B3A47; }

.note__pin {
  position: absolute;
  top: -7px;
  left: 50%;
  margin-left: -24px;
  width: 48px;
  height: 16px;
  background: color-mix(in srgb, var(--butter) 82%, transparent);
  transform: rotate(-4deg);
  box-shadow: 0 1px 3px rgba(122, 68, 88, .14);
  border-left: 1px dashed rgba(122, 68, 88, .16);
  border-right: 1px dashed rgba(122, 68, 88, .16);
}

.note__body {
  font-size: calc(15px * var(--scale));
  line-height: 1.72;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--berry);
}

.note__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(122, 68, 88, .16);
  font-size: calc(11.5px * var(--scale));
  color: var(--berry-soft);
}

.note__who {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-hand);
  color: var(--pink-ink);
}

.note__del {
  color: var(--berry-faint);
  padding: 4px 8px;
  border-radius: 8px;
  font-size: calc(11.5px * var(--scale));
}

.note__del:hover { color: #b8435a; background: rgba(184, 67, 90, .08); }

/* ================================================== 相册 */

.album__day {
  margin-bottom: 20px;
}

/* 日期条：占满整行，作为两列之间的视觉分隔 */
.album__dayhead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 18px 0 8px;
  padding-left: 2px;
}

.album__dayhead--full {
  /* 贴在整行上方，压住两列 */
  grid-column: 1 / -1;
}

.album__dayhead--full:first-child { margin-top: 0; }

.album__daydate {
  font-family: var(--font-hand);
  font-size: calc(15px * var(--scale));
  color: var(--pink-ink);
}

.album__daycount {
  font-size: calc(11.5px * var(--scale));
  color: var(--berry-faint);
}

/* 相册：一整片瀑布流。
   用一个扁平的列表 + CSS 多列布局：卡片 break-inside: avoid，
   照片和文字高度不一致时会自动补到较短的那一列下面，
   不会出现"左一天右一天的锯齿"，也不会有整行等高的空洞。
   之前出问题是因为按天分成了多个独立的多列容器，每个容器都要自己配平。 */
.album__grid {
  column-count: 2;
  column-gap: 10px;
}

.album__item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 10px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease-out);
  display: block;
  width: 100%;
  text-align: left;
}

.album__item:active { transform: scale(.97); }

.album__img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--cream-deep);
}

.album__meta {
  padding: 7px 9px 9px;
  font-size: calc(11px * var(--scale));
  color: var(--berry-soft);
  line-height: 1.45;
}

.album__place {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--berry);
}

.album__note {
  margin-top: 2px;
  color: var(--berry-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 日期跟着照片走，小小的、不抢照片 */
.album__date {
  margin-top: 4px;
  font-family: var(--font-hand);
  font-size: calc(10.5px * var(--scale));
  color: var(--berry-faint);
}

/* 大图查看器 */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(35, 20, 27, .94);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s var(--ease-out);
}

.viewer.is-open { opacity: 1; pointer-events: auto; }

.viewer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(10px + var(--safe-top)) 14px 10px;
  color: #fff;
}

.viewer__close {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 20px;
}

.viewer__stage {
  flex: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0 8px;
}

.viewer__stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.viewer__info {
  padding: 12px 18px calc(18px + var(--safe-bot));
  color: #fff;
  text-align: center;
}

.viewer__place {
  font-family: var(--font-hand);
  font-size: calc(15px * var(--scale));
}

.viewer__note {
  font-size: calc(13px * var(--scale));
  opacity: .85;
  margin-top: 4px;
}

.viewer__date {
  font-size: calc(11.5px * var(--scale));
  opacity: .6;
  margin-top: 6px;
}

.viewer__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 18px;
}

.viewer__nav--prev { left: 8px; }
.viewer__nav--next { right: 8px; }

/* 上传按钮：悬浮在右下，拇指够得到 */
.fab {
  position: fixed;
  right: 18px;
  bottom: calc(20px + var(--safe-bot));
  z-index: 60;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pink-deep);
  color: #fff;
  font-size: 24px;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--pink-deep) 55%, #7a4458), var(--shadow-md);
  transition: transform .14s var(--ease-bounce);
}

.fab:active { transform: scale(.93); }

/* ================================================== 恋爱清单 */

.wish {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 12px 12px 10px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  margin-bottom: 9px;
  transition: background-color .2s var(--ease-out), opacity .25s var(--ease-out);
}

.wish.is-done { opacity: .62; background: color-mix(in srgb, var(--mint) 22%, var(--paper)); }

/* 复选框：方框 + 手写体打勾 */
.wish__check {
  flex: 0 0 26px;
  width: 26px; height: 26px;
  margin-top: 1px;
  border-radius: 8px;
  border: 2px solid var(--pink-mid);
  display: grid;
  place-items: center;
  background: var(--paper);
  transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out);
}

.wish.is-done .wish__check {
  background: var(--mint);
  border-color: var(--mint-ink);
}

.wish__check svg {
  width: 16px; height: 16px;
  overflow: visible;
}

.wish__check path {
  fill: none;
  stroke: var(--mint-ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
}

/* 勾上时"笔迹"画出来 */
.wish.is-done .wish__check path {
  animation: draw-tick .32s var(--ease-out) forwards;
}

@keyframes draw-tick {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wish__check path { stroke-dashoffset: 0; animation: none; }
}

.wish__main { flex: 1; min-width: 0; }

.wish__text {
  font-size: calc(15px * var(--scale));
  line-height: 1.55;
  word-break: break-word;
  position: relative;
  display: inline;
}

.wish.is-done .wish__text {
  color: var(--berry-soft);
  /* 划掉：用渐变画一条线，比 text-decoration 好看 */
  background-image: linear-gradient(to right, var(--berry-faint), var(--berry-faint));
  background-repeat: no-repeat;
  background-size: 100% 1.5px;
  background-position: 0 55%;
}

.wish__note {
  margin-top: 3px;
  font-size: calc(12px * var(--scale));
  color: var(--berry-soft);
  line-height: 1.5;
}

.wish__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  font-size: calc(11px * var(--scale));
  color: var(--berry-faint);
}

.wish__del {
  margin-left: auto;
  color: var(--berry-faint);
  padding: 3px 6px;
  border-radius: 6px;
}

.wish__del:hover { color: #b8435a; }

/* 已完成区折叠 */
.done-fold {
  margin-top: 16px;
  border-top: 1px dashed var(--line-strong);
  padding-top: 12px;
}

.done-fold__head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 0;
  font-family: var(--font-hand);
  font-size: calc(14px * var(--scale));
  color: var(--berry-soft);
}

.done-fold__arrow {
  transition: transform .2s var(--ease-out);
}

.done-fold.is-open .done-fold__arrow { transform: rotate(90deg); }

.done-fold__body { display: none; }

.done-fold.is-open .done-fold__body { display: block; }

/* 快速添加一行 */
.quick-add {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.quick-add .input { flex: 1; }

/* ================================================== 点滴（时间轴） */

/*
 * 时间轴的做法：竖线在正中间，内容左右交错分布。
 * 这样一屏能看两列的信息量，也让"时间"这个概念特别明显 ——
 * 像一条路，两人从两边往中间写。
 *
 * 左右怎么分：由 JS 给每条加 moment--left / moment--right。
 * 这样不用 CSS 的 nth-child 硬算，插入/删除时也不会错位。
 */
.timeline {
  position: relative;
  padding: 6px 0 8px;
}

/* 中间那条竖线 */
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  bottom: 28px;
  width: 2px;
  transform: translateX(-1px);
  background: linear-gradient(
    to bottom,
    var(--line-strong) 0%,
    var(--line-strong) 76%,
    transparent 100%
  );
}

/* 一条点滴：占一半宽度，靠左或靠右 */
.moment {
  position: relative;
  width: calc(50% - 16px);
  margin-bottom: 18px;
  animation: moment-in .34s var(--ease-out) both;
}

.moment--left {
  margin-right: auto;
}

.moment--right {
  margin-left: auto;
}

@keyframes moment-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* 时间轴上的小圆点 = 心情表情，正好压在中线上 */
.moment__dot {
  position: absolute;
  top: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 13px;
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(199, 91, 126, .12);
  z-index: 2;
}

/* 靠左的：圆点挂在右边那侧；靠右的：挂在左边 */
.moment--left .moment__dot {
  right: -27px;
}

.moment--right .moment__dot {
  left: -27px;
}

/* 日期条：像本子上的页眉 */
.moment__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 7px;
  padding: 3px 12px 3px 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--pink) 62%, transparent);
  font-family: var(--font-hand);
  font-size: calc(12px * var(--scale));
  color: var(--pink-ink);
  line-height: 1.5;
}

.moment--right .moment__date {
  margin-left: 0;
}

.moment--left .moment__date {
  margin-left: 0;
}

/* 同一天记了多件小事时的那句小字 */
.moment__daycount {
  margin: -2px 0 10px;
  font-size: calc(11px * var(--scale));
  color: var(--berry-faint);
}

/* 卡片本体：左上一角做缺口，像从本子上撕下来的一页 */
.moment__body {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 4px 16px 16px 16px;
  padding: 12px 14px;
  font-size: calc(14px * var(--scale));
  line-height: 1.72;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
}

/* 靠右的卡片，圆角反过来，指向中线 */
.moment--right .moment__body {
  border-radius: 16px 4px 16px 16px;
}

.moment__body:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.moment__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-left: 2px;
  font-size: calc(10.5px * var(--scale));
  color: var(--berry-faint);
  flex-wrap: wrap;
}

.moment__foot .wish__del {
  margin-left: auto;
}

/* 窄屏也要保持中线 + 左右交错。
   缩小的只是字号和内边距，布局不变 —— 左右交错是这个页的骨架，
   不能因为屏幕窄就退化成单列。 */
@media (max-width: 520px) {
  .timeline {
    padding-left: 0;
    padding-right: 0;
  }

  .timeline::before {
    left: 50%;
    transform: translateX(-1px);
  }

  .moment {
    width: calc(50% - 12px);
  }

  .moment--left .moment__dot {
    right: -21px;
    left: auto;
  }

  .moment--right .moment__dot {
    left: -21px;
    right: auto;
  }

  .moment__dot {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }

  .moment__body {
    padding: 10px 11px;
    font-size: calc(13px * var(--scale));
    line-height: 1.65;
  }

  .moment__date {
    padding: 2px 9px 2px 8px;
    font-size: calc(11px * var(--scale));
  }

  /* 手机上署名那行可能挤，允许换行 */
  .moment__foot {
    font-size: calc(9.5px * var(--scale));
    gap: 4px;
  }
}

/* 真的特别窄（320 以下）才退回单列，否则字挤成一竖条没法看 */
@media (max-width: 320px) {
  .timeline {
    padding-left: 24px;
  }

  .timeline::before {
    left: 8px;
    transform: none;
  }

  .moment {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .moment--left .moment__dot,
  .moment--right .moment__dot {
    left: -24px;
    right: auto;
  }

  .moment--right .moment__body {
    border-radius: 4px 16px 16px 16px;
  }
}

/* 心情选择 */
.moods {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}

.mood {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  font-size: 19px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: color-mix(in srgb, var(--pink) 32%, var(--paper));
  transition: transform .14s var(--ease-bounce), border-color .16s;
}

.mood[aria-pressed="true"] {
  border-color: var(--pink-deep);
  transform: scale(1.08);
}

/* ================================================== 设置 */

.set-group {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
  overflow: hidden;
}

.set-group__title {
  font-family: var(--font-hand);
  font-size: calc(14px * var(--scale));
  color: var(--pink-ink);
  padding: 14px 16px 6px;
}

.set-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}

.set-row:first-of-type { border-top: none; }

.set-row__label {
  flex: 1;
  min-width: 0;
  font-size: calc(14px * var(--scale));
}

.set-row__hint {
  font-size: calc(11.5px * var(--scale));
  color: var(--berry-faint);
  margin-top: 1px;
}

.set-row__control { flex: 0 0 auto; }

.set-row .input { max-width: 190px; text-align: right; }

/* 主题色选择：四个色块 */
.theme-picker { display: flex; gap: 10px; }

.theme-swatch {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid transparent;
  position: relative;
  transition: transform .14s var(--ease-bounce);
}

.theme-swatch[aria-pressed="true"] {
  border-color: var(--berry);
  transform: scale(1.08);
}

/* 字号选择：三档小按钮 */
.seg {
  display: inline-flex;
  background: color-mix(in srgb, var(--pink) 28%, var(--paper));
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}

.seg__item {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: calc(12.5px * var(--scale));
  color: var(--berry-soft);
}

.seg__item[aria-pressed="true"] {
  background: var(--paper);
  color: var(--pink-ink);
  box-shadow: var(--shadow-sm);
}

/* 背景照片预览 */
.bg-preview {
  position: relative;
  height: 132px;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--line);
  background:
    radial-gradient(circle at 25% 20%, #FFE3EC, transparent 50%),
    linear-gradient(160deg, #FFE9F0, #FFD9E5);
  display: grid;
  place-items: center;
  margin: 4px 0 12px;
}

.bg-preview img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.bg-preview__empty {
  font-family: var(--font-hand);
  color: var(--berry-faint);
  font-size: calc(13px * var(--scale));
}

/* 危险区 */
.danger-zone { border-color: #f0c0cb; }

.danger-zone .set-group__title { color: #b8435a; }

/* 版本信息 */
.about {
  text-align: center;
  padding: 20px 0 8px;
  font-size: calc(11.5px * var(--scale));
  color: var(--berry-faint);
  line-height: 1.8;
}

/* ================================================== 通用弹窗 */

.modal {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(60, 34, 44, .42);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease-out);
}

.modal.is-open { opacity: 1; pointer-events: auto; }

.modal__card {
  width: 100%;
  max-width: 340px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 22px;
  padding: 22px 20px 18px;
  box-shadow: var(--shadow-lg);
  transform: scale(.95);
  transition: transform .22s var(--ease-bounce);
}

.modal.is-open .modal__card { transform: scale(1); }

.modal__title {
  font-family: var(--font-hand);
  font-size: calc(18px * var(--scale));
  margin-bottom: 8px;
}

.modal__body {
  font-size: calc(13.5px * var(--scale));
  color: var(--berry-soft);
  line-height: 1.65;
  margin-bottom: 16px;
}

.modal__actions {
  display: flex;
  gap: 10px;
}

.modal__actions .btn { flex: 1; }

/* 上传进度条 */
.progress {
  height: 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--pink) 40%, var(--paper));
  overflow: hidden;
  margin: 10px 0 4px;
}

.progress__bar {
  height: 100%;
  width: 0;
  background: var(--pink-deep);
  border-radius: 99px;
  transition: width .2s var(--ease-out);
}

/* ================================================== 手机上的一些细节 */

/* 小屏：压缩内边距，但保留拇指区 */
@media (max-width: 360px) {
  :root { --page-pad: 12px; }
  .timer { padding: 24px 16px 22px; }
  .timer__days { font-size: clamp(56px, 22vw, 88px); }
}

/* 横屏时不把内容拉得太宽 */
@media (min-width: 620px) {
  .page { max-width: 600px; }
  .nav__inner { max-width: 600px; }
}

/* 触屏设备去掉 hover 造成的粘滞感 */
@media (hover: none) {
  .note:hover { transform: rotate(var(--tilt, 0deg)); box-shadow: 0 2px 0 rgba(122,68,88,.08), 0 6px 14px rgba(122,68,88,.12); }
  .album__item:hover { transform: none; }
}