/* ══════════════════════════════════════════════════════════════════
   两个人的邮局 · 样式表
   风格：奶油底 + 手绘感的小人 + 一点点手账感
   ══════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------- 变量 */
:root {
  --cream:      #FFF9F2;
  --cream-deep: #FDF1E4;
  --paper:      #FFFDFA;
  --ink:        #453B3E;
  --ink-2:      #7C7075;
  --ink-3:      #B0A5A8;

  --pink:       #FFB7C5;
  --pink-deep:  #FF8FA3;
  --pink-soft:  #FFEDF2;
  --blue:       #A8D8EA;
  --blue-deep:  #7CBEDB;
  --blue-soft:  #EAF5FB;
  --yellow:     #FFE8A3;
  --mint:       #B8E6D4;
  --lilac:      #DACFF3;

  --line:       #453B3E;
  --ok:         #6FC79B;
  --warn:       #F0A868;

  --r-xs: 10px;
  --r-sm: 14px;
  --r:    20px;
  --r-lg: 28px;
  --r-xl: 36px;

  --sh-s: 0 2px 5px rgba(69, 59, 62, .05);
  --sh:   0 10px 26px -10px rgba(69, 59, 62, .22), 0 2px 6px rgba(69, 59, 62, .05);
  --sh-l: 0 30px 70px -24px rgba(69, 59, 62, .38);
  --sh-in: inset 0 -3px 0 rgba(69, 59, 62, .07);

  --ease:        cubic-bezier(.22, .9, .3, 1);
  --bounce:      cubic-bezier(.34, 1.5, .5, 1);
  --font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei",
          -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-hand: "LXGW WenKai", "Kaiti SC", "STKaiti", KaiTi, "楷体", "PingFang SC", serif;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 68px;
}

/* ---------------------------------------------------------- 基础 */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(69, 59, 62, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
}

/* 必须放在 .screen 的 display 规则之前生效：hidden 要能压过 display:flex/grid */
[hidden] { display: none !important; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2.5px solid var(--blue-deep); outline-offset: 2px; border-radius: 6px; }

.bg-deco { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-deco__blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; }
.bg-deco__blob--1 { width: 320px; height: 320px; background: var(--pink-soft); top: -90px; left: -80px; }
.bg-deco__blob--2 { width: 280px; height: 280px; background: var(--blue-soft); bottom: -80px; right: -70px; }
.bg-deco__blob--3 { width: 240px; height: 240px; background: #FFF4DC; top: 42%; right: -110px; }

.screen { position: relative; z-index: 1; }

/* ---------------------------------------------------------- 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--line);
  box-shadow: 0 3px 0 var(--line);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), background .14s;
  user-select: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--line); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.btn:disabled { opacity: .45; pointer-events: none; }

.btn--primary { background: var(--pink); }
.btn--primary:hover { background: var(--pink-deep); }
/* 用 .btn.btn--ghost 提高优先级，免得被后面的 .btn--sm 把阴影加回来 */
.btn.btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.btn.btn--ghost:hover { background: rgba(69, 59, 62, .06); transform: none; box-shadow: none; }
.btn.btn--ghost:active { transform: translateY(1px); }
.btn--sm { padding: 7px 14px; font-size: 13px; border-width: 2px; box-shadow: 0 2px 0 var(--line); }
.btn--danger { background: #FFDCD6; }
.btn--block { width: 100%; }

.linkbtn {
  color: var(--ink-3);
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 2px 4px;
}
.linkbtn:hover { color: var(--pink-deep); }

.iconbtn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink-2);
  transition: background .15s, color .15s, transform .15s var(--ease);
}
.iconbtn:hover { background: rgba(69, 59, 62, .07); color: var(--ink); transform: rotate(-8deg); }

/* ---------------------------------------------------------- 登录 */
.screen--login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
}
.login { width: min(420px, 100%); text-align: center; animation: rise .6s var(--ease) both; }
.login__pair { display: flex; justify-content: center; gap: 4px; margin-bottom: 4px; }
.login__pair svg { animation: bob 3.4s ease-in-out infinite; }
.login__pair svg:nth-child(2) { animation-delay: .5s; }
.login__title {
  font-size: 30px; font-weight: 800; letter-spacing: .12em;
  margin-top: 2px;
}
.login__sub { color: var(--ink-3); font-size: 13.5px; margin-top: 6px; }
.login__steps { margin-top: 26px; }
.login__step { animation: rise .35s var(--ease) both; }
.login__label {
  font-size: 13px; color: var(--ink-2); font-weight: 600;
  margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.login__hint { font-size: 12px; color: var(--ink-3); margin-top: 12px; }
.login__err { min-height: 22px; color: var(--pink-deep); font-size: 13px; margin-top: 12px; font-weight: 600; }

.pickusers { display: flex; gap: 14px; justify-content: center; }
.pickuser {
  flex: 1;
  max-width: 150px;
  padding: 16px 10px 12px;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 2.5px solid transparent;
  box-shadow: var(--sh-s);
  transition: transform .2s var(--bounce), border-color .2s, box-shadow .2s;
}
.pickuser:hover { transform: translateY(-4px) rotate(-2deg); box-shadow: var(--sh); }
.pickuser[aria-pressed="true"] { border-color: var(--line); box-shadow: var(--sh); }
.pickuser__name { font-weight: 700; font-size: 14px; margin-top: 8px; }
.pickuser__sub { font-size: 11.5px; color: var(--ink-3); }

.pinbox { display: flex; gap: 10px; justify-content: center; }
.pinbox__input {
  width: 140px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 2.5px solid var(--line);
  background: var(--paper);
  letter-spacing: .5em;
  text-align: center;
  font-size: 17px;
}
.pinbox__input::placeholder { letter-spacing: .3em; color: var(--ink-3); }

/* ---------------------------------------------------------- 主框架 */
.screen--main {
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.topbar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 20px 10px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
.topbar__brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.topbar__logo { display: grid; place-items: center; }
.topbar__name { font-weight: 800; font-size: 17px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__me {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 14px 5px 6px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: var(--sh-s);
  transition: transform .18s var(--bounce), box-shadow .18s;
}
.topbar__me:hover { transform: translateY(-2px); box-shadow: var(--sh); }
.topbar__me-name { font-size: 13px; font-weight: 600; color: var(--ink-2); }

.view {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 20px calc(var(--tabbar-h) + 24px + var(--safe-b));
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
.view--plain { padding-top: 0; }

/* ---------------------------------------------------------- 底部导航 */
.tabbar {
  position: fixed;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(560px, 100%);
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: 2px;
  padding: 8px 12px calc(10px + var(--safe-b));
  background: rgba(255, 253, 250, .9);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-top: 2px solid rgba(69, 59, 62, .08);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  z-index: 40;
}
.tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px;
  color: var(--ink-3);
  position: relative;
  transition: color .18s, transform .22s var(--bounce);
}
.tab__label { font-size: 10.5px; font-weight: 600; }
.tab__icon { display: grid; place-items: center; height: 24px; }
.tab:hover { color: var(--ink-2); transform: translateY(-2px); }
.tab.is-active { color: var(--ink); }
.tab.is-active .tab__icon { animation: pop .38s var(--bounce); }
.tab__badge {
  position: absolute; top: 0; left: 50%; margin-left: 4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--pink-deep); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 2px 6px rgba(255, 143, 163, .5);
  animation: pop .4s var(--bounce);
}
.tab--compose { flex: 0 0 auto; }
.tab--compose .tab__icon {
  width: 48px; height: 48px;
  margin-top: -18px;
  border-radius: 50%;
  background: var(--pink);
  border: 2.5px solid var(--line);
  box-shadow: 0 4px 0 var(--line);
  color: var(--ink);
  transition: transform .18s var(--bounce), box-shadow .18s;
}
.tab--compose:hover .tab__icon { transform: translateY(-3px) rotate(-6deg); }
.tab--compose:active .tab__icon { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.tab--compose.is-active .tab__icon { background: var(--pink-deep); }

/* ---------------------------------------------------------- 通用块 */
.card {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  padding: 18px;
}

.section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--ink-2);
  letter-spacing: .08em;
  margin: 22px 0 12px;
}
.section-title::after {
  content: ""; flex: 1; height: 0;
  border-top: 2px dashed rgba(69, 59, 62, .14);
}

.empty {
  text-align: center;
  padding: 44px 20px;
  color: var(--ink-3);
}
.empty__title { font-size: 15px; font-weight: 700; color: var(--ink-2); margin-top: 10px; }
.empty__sub { font-size: 12.5px; margin-top: 4px; }
.empty svg { animation: bob 3.6s ease-in-out infinite; }

/* ---------------------------------------------------------- 首页英雄区 */
.hero {
  position: relative;
  margin-top: 6px;
  padding: 22px 22px 20px;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, #FFF6EC 0%, #FFEDF2 55%, #EAF5FB 100%);
  box-shadow: var(--sh);
  overflow: hidden;
}
/* 半身像是一个圆。出血切在**上面**，切掉的是头和头发；
   要是照老样子切下面，切掉的正好是肩膀和胸口 —— 看着像被削掉了，
   不像"站在卡片边上"。 */
.hero__partner { position: absolute; top: -16px; right: -12px; opacity: .95; pointer-events: none; }
.hero__partner svg { display: block; }
.hero__hi { font-size: 22px; font-weight: 800; letter-spacing: .02em; }
.hero__date { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.hero__days {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 12px; padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  font-size: 12.5px; font-weight: 700; color: var(--pink-deep);
  box-shadow: var(--sh-s);
}
.hero__unread {
  position: relative; z-index: 1;
  margin-top: 16px;
  display: flex; align-items: center; gap: 12px;
  max-width: 62%;
}

/* ---------------------------------------------------------- 信封卡片 */
.envlist { display: flex; flex-direction: column; gap: 13px; }

.envcard {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  width: 100%;
  text-align: left;
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--sh-s);
  border: 2px solid rgba(69, 59, 62, .07);
  transition: transform .2s var(--bounce), box-shadow .2s, border-color .2s;
  animation: rise .45s var(--ease) both;
}
.envcard:hover { transform: translateY(-3px) rotate(-.5deg); box-shadow: var(--sh); border-color: rgba(69, 59, 62, .16); }
.envcard:active { transform: translateY(0) scale(.99); }
.envcard__thumb { flex: none; }
.envcard__main { flex: 1; min-width: 0; }
.envcard__title {
  font-weight: 700; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.envcard__meta {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--ink-3); margin-top: 3px;
}
.envcard__from { color: var(--ink-2); font-weight: 600; }
.envcard__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.envcard__peek {
  font-size: 12.5px; color: var(--ink-3);
  margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.envcard__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: rgba(69, 59, 62, .06);
  color: var(--ink-2);
  white-space: nowrap;
}
.tag--new { background: var(--pink); color: #fff; box-shadow: 0 2px 8px rgba(255, 143, 163, .45); }
.tag--soon { background: var(--yellow); color: #7A5B12; }
.tag--done { background: #DDF3E8; color: #2E7D5B; }
.tag--sent { background: var(--blue-soft); color: #2F7191; }

/* 未读小信封 */
.mini-env { position: relative; width: 52px; height: 38px; }
.mini-env svg { display: block; width: 100%; height: 100%; }
.envcard--new .mini-env { animation: wiggle 2.6s ease-in-out infinite; transform-origin: 50% 80%; }

/* ---------------------------------------------------------- 收纳袋 */
.baghead {
  position: relative;
  margin-top: 6px;
  padding: 20px 22px;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, #F3F9FF 0%, #EAF5FB 60%, #FFF2F6 100%);
  box-shadow: var(--sh);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.baghead__title { font-size: 19px; font-weight: 800; }
.baghead__sub { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.baghead__art { flex: none; }

.papergrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px 14px;
  margin-top: 20px;
}
.papercard {
  position: relative;
  aspect-ratio: 3 / 4;
  padding: 16px 14px 12px;
  border-radius: 6px 6px var(--r-sm) var(--r-sm);
  background: var(--paper);
  box-shadow: var(--sh);
  text-align: left;
  overflow: hidden;
  /* 竖着排：正文占掉剩下的高度，页脚自己待在最后一行的位置。
     页脚以前是 absolute 定位的，正文一长就压到它身上（窄屏特别明显，
     卡片一窄、行数一样高、能放的字反而更少）。 */
  display: flex;
  flex-direction: column;
  transition: transform .22s var(--bounce), box-shadow .22s;
  animation: rise .45s var(--ease) both;
}
.papercard:nth-child(3n)   { transform: rotate(-1.4deg); }
.papercard:nth-child(3n+1) { transform: rotate(1.1deg); }
.papercard:nth-child(4n)   { transform: rotate(-.4deg); }
.papercard:hover { transform: translateY(-6px) rotate(0deg) scale(1.02); box-shadow: var(--sh-l); z-index: 2; }
.papercard__tape {
  position: absolute; top: -9px; left: 50%;
  width: 54px; height: 20px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(255, 232, 163, .8);
  box-shadow: 0 1px 3px rgba(69, 59, 62, .12);
}
/* 卡片上只剩日期了（编号只在信纸左上角出现，不再往别处复制）。
   仍然要 nowrap + 省略号：卡片是 aspect-ratio 3/4 + overflow:hidden，
   日期一换行就会顶掉正文，然后正文被从中间裁断。 */
.papercard__date {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 11px; color: var(--ink-3);
}
.papercard__date > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.papercard__day { flex: 1 1 auto; text-align: right; }
/* 心情是 emoji 的 <text>，不再自带圆底，所以这里只要把行高收掉，
   别让它把 .papercard__foot 撑高（那会挤掉正文）。 */
.papercard__mood { line-height: 0; }
@media (max-width: 430px) {
  .papercard__date { gap: 5px; font-size: 10.5px; }
  /* 正文的行数上限。注意实际裁在哪一行是**卡片高度**决定的，不是这条 ——
     卡片宽 157px、高 209px 时正文只有 108px，而 5 行要 109.4px，
     所以 360px 上是高度先把它截断（截在整行边界上，不留半个字）。
     这条的作用是：卡片够高时（430px 那档能放 7 行）不让正文无限长下去，
     并且这时会正常点出「…」。别把它当成精确的截断控制。 */
  .papercard__body { -webkit-line-clamp: 5; }
}
.papercard__title {
  font-family: var(--font-hand);
  font-size: 15px; font-weight: 700; line-height: 1.4;
  margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.papercard__body {
  font-family: var(--font-hand);
  font-size: 12.5px; color: var(--ink-2); line-height: 1.75;
  margin-top: 8px;
  /* min-height:0 是关键：flex 子项默认不肯缩到内容以下，不写这句裁不掉 */
  flex: 1 1 auto; min-height: 0;
  display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden;
  opacity: .85;
}
.papercard__foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--ink-3);
}

/* ---------------------------------------------------------- 写信 */
.compose { padding-top: 4px; }
.tplstrip {
  display: flex; gap: 12px;
  overflow-x: auto;
  padding: 6px 4px 14px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.tplstrip::-webkit-scrollbar { display: none; }
.tpl {
  flex: none;
  width: 96px;
  scroll-snap-align: start;
  text-align: center;
  transition: transform .2s var(--bounce);
}
.tpl:hover { transform: translateY(-4px); }
.tpl__paper {
  width: 96px; height: 120px;
  border-radius: 8px;
  border: 2.5px solid transparent;
  box-shadow: var(--sh-s);
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
  transition: border-color .2s, box-shadow .2s;
  /* 缩略图也要带上模板自己的底色和花纹 */
  background: var(--paper-bg, var(--paper));
  background-image: var(--paper-img, none);
  background-size: var(--paper-size, auto);
  background-position: var(--paper-pos, center);
  color: var(--paper-ink, var(--ink));
}
.tpl[aria-pressed="true"] .tpl__paper { border-color: var(--line); box-shadow: var(--sh); }
.tpl[aria-pressed="true"] .tpl__name { color: var(--ink); font-weight: 800; }
.tpl__name { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; font-weight: 600; }
.tpl__lines { width: 62%; display: flex; flex-direction: column; gap: 7px; }
.tpl__lines i { display: block; height: 3px; border-radius: 2px; background: currentColor; opacity: .22; }
.tpl__lines i:last-child { width: 55%; }
.tpl--upload .tpl__paper {
  border: 2.5px dashed rgba(69, 59, 62, .3);
  background: rgba(255, 255, 255, .6);
  flex-direction: column;
  color: var(--ink-2);
}

.compose__paper {
  position: relative;
  border-radius: var(--r-lg);
  padding: 26px 24px 22px;
  min-height: 340px;
  box-shadow: var(--sh);
  background: var(--paper-bg, #FFFBF3);
  color: var(--paper-ink, var(--ink));
  background-image: var(--paper-img, none);
  background-size: var(--paper-size, auto);
  background-position: var(--paper-pos, center);
  transition: background .3s, color .3s;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.compose__paper::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--paper-veil, transparent);
  pointer-events: none;
}
.compose__inner { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; }
.compose__to {
  font-size: 12px; opacity: .62; letter-spacing: .06em;
  display: flex; align-items: center; gap: 6px;
}
.compose__title {
  width: 100%;
  border: 0; background: none; outline: none;
  font-size: 21px; font-weight: 800;
  font-family: var(--font-hand);
  color: inherit;
  padding: 10px 0 8px;
  border-bottom: 2px dashed currentColor;
  border-color: color-mix(in srgb, currentColor 22%, transparent);
}
.compose__title::placeholder { color: currentColor; opacity: .3; }
.compose__body {
  flex: 1;
  width: 100%;
  min-height: 190px;
  margin-top: 14px;
  border: 0; background: none; outline: none; resize: none;
  font-family: var(--font-hand);
  font-size: 16.5px;
  line-height: 2;
  color: inherit;
  overflow: hidden;
}
.compose__body::placeholder { color: currentColor; opacity: .3; }
.compose__sign {
  margin-top: 14px;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  font-family: var(--font-hand);
  font-size: 15.5px;
}
.compose__sign input {
  border: 0; background: none; outline: none;
  font: inherit; color: inherit; text-align: right;
  width: 130px;
  border-bottom: 2px dashed color-mix(in srgb, currentColor 25%, transparent);
}
.compose__stamp {
  position: absolute; top: 16px; right: 18px;
  z-index: 1;
  transform: rotate(7deg);
  filter: drop-shadow(0 3px 6px rgba(69, 59, 62, .18));
  transition: transform .25s var(--bounce);
}
.compose__stamp:hover { transform: rotate(-6deg) scale(1.08); }

/* ---------------------------------------------------------- 信纸头一行
   左上角是花体编号，右边是日期。这一行在**纸上**，所以不能用 .input ——
   那个类写死了浅底深字，而这里的字色是纸张传下来的（星空纸是近白的），
   套上去就是白字白底，什么都看不见。 */

.compose__meta {
  display: flex; align-items: center; gap: 10px;
  /* 必须能换行。flex 子项默认 min-width:auto，宁可撑破也不肯缩，
     而 .compose__paper 和 .view 都是 overflow:hidden ——
     撑破的结果是**被悄悄裁掉**，连横向滚动条都没有（360px 上就会撞到）。 */
  flex-wrap: wrap;
  padding-right: 56px;   /* 让开右上角那张邮票 */
  margin-bottom: 8px;
}
.compose__meta > * { min-width: 0; }
.compose__no { display: flex; align-items: center; gap: 8px; flex: 1 1 128px; min-width: 0; }

/* 纸上的输入框：没有底、没有边框，只剩一条虚线，跟标题和署名一致 */
.paper-input {
  border: 0; background: none; outline: none;
  font: inherit; color: inherit;
  min-height: 28px; padding: 2px 0 3px;
  border-bottom: 1.5px dashed color-mix(in srgb, currentColor 30%, transparent);
}
.paper-input::placeholder { color: currentColor; opacity: .32; }
.paper-input:focus { border-bottom-color: color-mix(in srgb, currentColor 55%, transparent); }

.compose__no .paper-input {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; letter-spacing: .04em;
}
.compose__date {
  flex: 0 0 auto; width: auto; max-width: 100%;
  -webkit-appearance: none; appearance: none;
  font-family: var(--font-hand); font-size: 14px;
}

/* 拆信页那一行：只读，所以让它随便排 */
.sheet__meta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px 14px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.sheet__no { flex: none; line-height: 0; }
.sheet__no svg { display: block; }
/* 编号里要是有画不出来的字（中文之类），就退回普通手写体，别画成一堆空白 */
.sheet__no--plain {
  font-family: var(--font-hand);
  font-size: 15px; font-weight: 700; letter-spacing: .08em;
  line-height: 1.4; opacity: .85;
}
.sheet__date-hand {
  font-family: var(--font-hand);
  font-size: 14px; opacity: .68; white-space: nowrap;
}

.optrow {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.optrow__label { font-size: 12.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }

/* align-items 让「今天的心情」里那个名字跟表情圆垂直居中 */
.chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--sh-s);
  border: 2.5px solid transparent;
  transition: transform .18s var(--bounce), border-color .18s;
}
.chip:hover { transform: translateY(-2px) scale(1.06); }
.chip[aria-pressed="true"] { border-color: var(--line); }
.chip--wide { width: auto; padding: 0 14px; border-radius: 999px; height: 38px; font-size: 13px; font-weight: 600; }
/* 邮票是一张张小纸片，用圆角方块比圆形好看 */
.chip--stamp { width: 46px; height: 54px; border-radius: 12px; }
/* 「传一张自己的」那个方块：虚线边，一眼看出是"这儿能加东西"而不是一张空票 */
.chip--upload { color: var(--ink-3); border: 2px dashed rgba(69, 59, 62, .22); }
.chip--upload:hover { color: var(--ink-2); }

/* 「今天的心情」是 6 个表情圆 + 选中的那个名字。
   在 360px 宽的手机（OPPO 大多是这个宽度）上，6×40px 的圆加名字
   差十几个像素放不下，名字会被挤到第二行、贴在最左边，看着像整行错位。
   这里把圆和间距收小一圈，让它们老老实实待在同一行。 */
@media (max-width: 400px) {
  .chips--moods { gap: 6px; }
  .chips--moods .chip { width: 36px; height: 36px; }

  /* 信纸头一行在 360px 上排不下：纸里去掉左右内边距只剩 292px，
     再让开邮票 56px 就是 236px，而一个原生日期控件自己就要 130~150px。
     与其挤成一团，不如折成两行 —— 跟 .optrow「什么时候寄到」是同一个做法。 */
  .compose__meta { flex-direction: column; align-items: flex-start; gap: 8px; }
  .compose__no { flex-basis: auto; width: 100%; }
}

.segmented {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: rgba(69, 59, 62, .07);
  gap: 3px;
}
.segmented button {
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  color: var(--ink-2);
  transition: background .2s, color .2s, transform .2s var(--bounce);
}
.segmented button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--sh-s);
}

.input {
  width: 100%;
  padding: 11px 15px;
  border-radius: var(--r-sm);
  border: 2px solid rgba(69, 59, 62, .14);
  background: var(--paper);
  outline: none;
  transition: border-color .18s;
}
.input:focus { border-color: var(--pink); }

.composebar {
  position: sticky;
  bottom: 0;
  margin-top: 18px;
  padding: 12px 0 calc(4px + var(--safe-b));
  display: flex; gap: 10px;
  background: linear-gradient(to top, var(--cream) 62%, transparent);
}

/* ---------------------------------------------------------- 寄出 / 定时 */
.statline {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--sh-s);
  margin-bottom: 10px;
}
.statline__ico { flex: none; }
.statline__main { flex: 1; min-width: 0; }
.statline__t { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statline__m { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* ---------------------------------------------------------- 我的小窝 */
.profile {
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 20px 20px;
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, #FFF6EC, #FFEDF2);
  box-shadow: var(--sh);
  margin-top: 6px;
}
.profile__name { font-size: 19px; font-weight: 800; margin-top: 10px; }
.profile__sub { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }

.outfits { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.outfit {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--sh-s);
  border: 2.5px solid transparent;
  transition: transform .18s var(--bounce), border-color .18s;
}
.outfit:hover { transform: translateY(-3px) scale(1.05); }
.outfit[aria-pressed="true"] { border-color: var(--line); }

/* 【小窝】里的「我的邮票」：一排存好的自定义邮票 + 一个「加一张」。
   邮票是竖的（62:74），所以用 grid 自动铺，别用 flex —— flex 在窄屏上会
   把七张挤成两行三行、每张宽度还不一样，看着像没对齐。 */
.stampset {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  gap: 10px;
  align-items: start;
}
.stampset__item { position: relative; justify-self: center; }
.stampset__del {
  position: absolute; top: -6px; right: -6px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--sh-s);
}
.stampset__del:hover { transform: scale(1.1); }
.stampset__add {
  justify-self: center;
  width: 54px; height: 64px;
  display: grid; place-items: center; gap: 2px;
  border-radius: 12px;
  color: var(--ink-3);
  background: var(--paper);
  border: 2px dashed rgba(69, 59, 62, .22);
  transition: transform .18s var(--bounce), border-color .18s, color .18s;
}
.stampset__add:hover:not([disabled]) { transform: translateY(-3px); border-color: var(--line); color: var(--ink-2); }
.stampset__add[disabled] { opacity: .5; cursor: default; }
.stampset__addtext { font-size: 10.5px; }
/* 计数器：占满一整行，不然它会跑去跟邮票抢一个格子 */
.stampset__tip { grid-column: 1 / -1; font-size: 11px; color: var(--ink-3); text-align: right; }

.field { margin-top: 14px; }
.field__label { font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.field__hint { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }
.row2 { display: flex; gap: 10px; }
.row2 > * { flex: 1; }

/* ---------------------------------------------------------- 阅读器 */
.overlay {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
}
.reader {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: 20px;
}
.reader__backdrop {
  position: absolute; inset: 0;
  background: rgba(58, 48, 51, .38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.reader.is-shown .reader__backdrop { opacity: 1; }

.reader__stage {
  position: relative;
  display: grid; place-items: center;
  transition: transform .55s var(--ease), opacity .45s var(--ease);
}
.reader[data-phase="3"] .reader__stage { transform: translateY(-4%) scale(.86); opacity: 0; pointer-events: none; }
.reader.is-closing .reader__stage { transform: translateY(8%) scale(.88); opacity: 0; }
.reader.is-closing .sheet-wrap { opacity: 0; transform: scale(.92); }

/* 信封本体 */
.envelope {
  position: relative;
  width: min(74vw, 330px);
  aspect-ratio: 1.48 / 1;
  perspective: 1100px;
  transform: scale(.94);
  transition: transform .5s var(--bounce);
  filter: drop-shadow(0 22px 40px rgba(58, 48, 51, .35));
}
.reader[data-phase="1"] .envelope,
.reader[data-phase="2"] .envelope,
.reader[data-phase="3"] .envelope { transform: scale(1); }

.env__back, .env__front, .env__flap { position: absolute; inset: 0; }
.env__back {
  z-index: 1;
  border-radius: 8px;
  background: #F6E7D6;
  box-shadow: inset 0 0 0 2.5px rgba(69, 59, 62, .55);
}
.env__letter {
  position: absolute;
  left: 5%; right: 5%;
  top: 4%;
  height: 88%;
  z-index: 10;
  border-radius: 5px;
  background: var(--paper);
  box-shadow: 0 6px 18px rgba(58, 48, 51, .22);
  transform: translateY(46%);
  transition: transform .72s var(--bounce);
  overflow: hidden;
  padding: 15px 16px;
  display: flex; flex-direction: column;
}
.reader[data-phase="2"] .env__letter,
.reader[data-phase="3"] .env__letter { transform: translateY(-52%) rotate(-1.6deg); }

.env__front {
  z-index: 20;
  border-radius: 8px;
  background: linear-gradient(160deg, #FFF6EA 0%, #FBEBD9 55%, #F7E3CD 100%);
  clip-path: polygon(0 0, 50% 42%, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 2.5px rgba(69, 59, 62, .55);
}
.env__flap {
  z-index: 30;
  background: linear-gradient(180deg, #FDF0E1 0%, #F7E3CD 100%);
  clip-path: polygon(0 0, 100% 0, 50% 76%);
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform .62s var(--ease), z-index 0s linear .31s;
  box-shadow: inset 0 0 0 2.5px rgba(69, 59, 62, .55);
}
.reader[data-phase="1"] .env__flap,
.reader[data-phase="2"] .env__flap,
.reader[data-phase="3"] .env__flap { transform: rotateX(-176deg); z-index: 4; }

/* 封蜡 */
.env__seal {
  position: absolute;
  left: 50%; top: 62%;
  width: 58px; height: 58px;
  margin: -29px 0 0 -29px;
  z-index: 31;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FF9AAE, #E96A85);
  box-shadow: 0 4px 12px rgba(200, 80, 105, .5), inset 0 -3px 6px rgba(0, 0, 0, .16);
  color: #fff;
  font-size: 22px;
  transition: opacity .3s var(--ease), transform .4s var(--bounce);
}
.reader[data-phase="1"] .env__seal,
.reader[data-phase="2"] .env__seal,
.reader[data-phase="3"] .env__seal { opacity: 0; transform: scale(.4) rotate(-40deg); }

/* 信纸小预览 */
.env__preview { display: flex; flex-direction: column; height: 100%; font-family: var(--font-hand); }
.env__preview-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.env__preview-from { font-size: 11px; color: var(--ink-3); }
.env__preview-title { font-size: 15px; font-weight: 800; margin-top: 8px; line-height: 1.35; }
.env__preview-lines { margin-top: 8px; flex: 1; overflow: hidden; }
.env__preview-lines span {
  display: block; height: 5px; border-radius: 3px;
  background: rgba(69, 59, 62, .12);
  margin-bottom: 9px;
}
.env__preview-lines span:last-child { width: 58%; }
.env__preview-sign {
  font-size: 12px; color: var(--ink-2); text-align: right;
  border-top: 1.5px dashed rgba(69, 59, 62, .16); padding-top: 7px;
}

.sheet__sign {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
.sheet__face { line-height: 0; }

/* 展开的信纸 */
.sheet-wrap {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  padding: 16px;
  pointer-events: none;
  opacity: 0;
  transform: scale(.9) translateY(18px);
  transition: opacity .42s var(--ease), transform .5s var(--bounce);
}
.reader[data-phase="3"] .sheet-wrap,
.reader[data-phase="4"] .sheet-wrap { opacity: 1; transform: none; pointer-events: auto; }

.sheet {
  position: relative;
  width: min(600px, 100%);
  max-height: min(84dvh, 780px);
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--paper-bg, #FFFBF3);
  background-image: var(--paper-img, none);
  background-size: var(--paper-size, auto);
  background-position: var(--paper-pos, center);
  color: var(--paper-ink, var(--ink));
  box-shadow: var(--sh-l);
  overflow: hidden;
}
.sheet__scroll {
  overflow-y: auto;
  padding: 34px 32px 30px;
  overscroll-behavior: contain;
}
.sheet__scroll::after { content: ""; display: block; height: 4px; }
.sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sheet__stamp { flex: none; transform: rotate(6deg); filter: drop-shadow(0 3px 6px rgba(69, 59, 62, .16)); }
.sheet__to { font-size: 12px; opacity: .6; letter-spacing: .05em; }
.sheet__title {
  font-family: var(--font-hand);
  font-size: 25px; font-weight: 800; line-height: 1.4;
  margin-top: 12px;
}
.sheet__body {
  font-family: var(--font-hand);
  font-size: 17px; line-height: 2.15;
  margin-top: 18px;
  white-space: pre-wrap;
  word-break: break-word;
}
.sheet__sign {
  font-family: var(--font-hand);
  font-size: 17px;
  margin-top: 26px;
  text-align: right;
  opacity: .85;
}
/* 360px 上这一排是真放不下（内宽只有 ~288px）：标记未读 + 存成图片 + 存成网页
   + 垃圾桶 + 收好。而 `.sheet` 是 overflow: hidden —— 挤出去的按钮会被**无声裁掉**，
   不是出滚动条，所以窄屏检查量 `.sheet` 也抓不住。让它换行，日期先不让位。 */
.sheet__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 2px dashed color-mix(in srgb, currentColor 16%, transparent);
  background: color-mix(in srgb, var(--paper-bg, #FFFBF3) 88%, transparent);
  backdrop-filter: blur(8px);
}
/* flex: none —— 日期不许被按钮挤成两行，挤不下就让整排按钮折到下面去 */
.sheet__date { font-size: 11.5px; opacity: .55; flex: none; }
.sheet__actions {
  display: flex; gap: 8px; row-gap: 8px; flex-wrap: wrap;
  justify-content: flex-end;
}

.reader__hint {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  color: #fff;
  font-size: 12.5px;
  letter-spacing: .1em;
  opacity: 0;
  transition: opacity .4s var(--ease);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  pointer-events: none;
  white-space: nowrap;
}
.reader[data-phase="1"] .reader__hint,
.reader[data-phase="2"] .reader__hint { opacity: .9; }

/* 投递成功的小动画 */
.flyenv {
  position: fixed;
  z-index: 120;
  pointer-events: none;
  transform-origin: center;
}

/* ---------------------------------------------------------- 导出预览 */

/**
 * 存成图片之后弹的那张大图。
 *
 * 它是 body 的直接子节点，**不在 #overlay 里** —— 阅读器关闭时会把 overlay
 * 整个 innerHTML 清空。z-index 也要压过 .reader（90），否则大图被信纸盖住。
 *
 * ⚠ 里面那张 <img> 上**不能**加 user-select: none / pointer-events: none /
 *   -webkit-touch-callout: none —— 手机就是靠长按它存进相册的。
 */
.expview {
  position: fixed; inset: 0; z-index: 150;
  display: flex; flex-direction: column; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 12px
           calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(45, 36, 39, .74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: rise .26s var(--ease) both;
}
.expview__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.expview__hint { color: #FFF6EC; font-size: 12.5px; line-height: 1.5; opacity: .92; }
.expview__scroll {
  flex: 1 1 auto; min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: grid; place-items: start center;
}
.expview__img {
  display: block;
  width: auto; max-width: 100%; height: auto;
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--sh-l);
}

/* ---------------------------------------------------------- Toast */
.toasts {
  position: fixed;
  left: 50%; bottom: calc(var(--tabbar-h) + 22px + var(--safe-b));
  transform: translateX(-50%);
  z-index: 200;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
  width: max-content; max-width: 90vw;
}
.toast {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(69, 59, 62, .93);
  color: #FFF9F2;
  font-size: 13.5px; font-weight: 600;
  box-shadow: var(--sh-l);
  animation: toastin .4s var(--bounce) both;
}
.toast--out { animation: toastout .3s var(--ease) both; }
.toast--ok { background: rgba(60, 140, 105, .95); }
.toast--err { background: rgba(206, 84, 105, .95); }

/* ---------------------------------------------------------- 弹窗 */
.modal {
  width: min(440px, calc(100vw - 40px));
  max-height: 86dvh;
  overflow-y: auto;
  padding: 24px;
  border-radius: var(--r-xl);
  background: var(--paper);
  box-shadow: var(--sh-l);
  animation: pop .42s var(--bounce) both;
}
.modal__title { font-size: 18px; font-weight: 800; }
.modal__sub { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.modal__foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

/* ---------------------------------------------------------- 动画 */
@keyframes rise   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop    { 0% { transform: scale(.7); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes bob    { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1.5deg); } }
@keyframes wiggle { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-7deg); } 94% { transform: rotate(6deg); } 97% { transform: rotate(-3deg); } }
@keyframes toastin  { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes toastout { to { opacity: 0; transform: translateY(-8px) scale(.94); } }
@keyframes blink  { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes flyup  { 0% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } 100% { opacity: 0; transform: translateY(-58vh) scale(.25) rotate(-14deg); } }

/* transform-box 必须写。
   SVG 里 transform-box 的初始值是 view-box —— 也就是 transform-origin: center
   会被解释成「整个 viewBox 的中心」，不是「这只眼睛的中心」。
   少了这一句，眨眼不是原地压扁，而是绕着头顶往下滑。
   另外动画只能挂在这种不带 transform 属性的 g 上：CSS 的 transform
   会把元素自己的 transform 属性整个顶掉，挂在镜像那一层右眼会翻到左边去。 */
.char-eye { animation: blink 4.6s infinite; transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .08s !important;
  }
}

/* ---------------------------------------------------------- 信纸模板 */
.tpl-cream {
  --paper-bg: #FFFBF3;
  --paper-ink: #4A3F3C;
  --paper-img: radial-gradient(circle at 12% 18%, rgba(255, 183, 197, .28) 0 3px, transparent 3.5px),
               radial-gradient(circle at 82% 62%, rgba(168, 216, 234, .3) 0 3px, transparent 3.5px),
               radial-gradient(circle at 44% 86%, rgba(255, 232, 163, .5) 0 3px, transparent 3.5px);
  --paper-size: 90px 90px, 130px 130px, 110px 110px;
}
.tpl-sakura {
  --paper-bg: #FFF6F8;
  --paper-ink: #6B4A52;
  --paper-img:
    radial-gradient(circle at 20% 24%, rgba(255, 183, 197, .75) 0 5px, transparent 6px),
    radial-gradient(circle at 70% 12%, rgba(255, 205, 218, .8) 0 4px, transparent 5px),
    radial-gradient(circle at 84% 72%, rgba(255, 183, 197, .55) 0 6px, transparent 7px),
    radial-gradient(circle at 34% 82%, rgba(255, 205, 218, .7) 0 4px, transparent 5px),
    linear-gradient(160deg, #FFF9FB 0%, #FFEFF4 100%);
  --paper-size: 120px 120px, 90px 90px, 150px 150px, 100px 100px, auto;
}
.tpl-starry {
  --paper-bg: #232A4D;
  --paper-ink: #F0ECFF;
  --paper-img:
    radial-gradient(circle at 16% 22%, rgba(255, 255, 255, .9) 0 1.6px, transparent 2px),
    radial-gradient(circle at 62% 14%, rgba(255, 217, 142, .95) 0 2px, transparent 2.4px),
    radial-gradient(circle at 84% 48%, rgba(255, 255, 255, .8) 0 1.6px, transparent 2px),
    radial-gradient(circle at 34% 68%, rgba(255, 255, 255, .7) 0 1.4px, transparent 1.8px),
    radial-gradient(circle at 72% 84%, rgba(255, 217, 142, .8) 0 1.8px, transparent 2.2px),
    radial-gradient(120% 90% at 50% 0%, #38406E 0%, #232A4D 55%, #1A1F3A 100%);
  --paper-size: 140px 140px, 190px 190px, 110px 110px, 170px 170px, 130px 130px, auto;
}
/* 深蓝纸上的日期控件：那个小日历图标默认是深色的，在这个底上基本看不见。
   只对这个控件、只在星空纸上开 dark —— 别写到 :root 上去，
   那会连滚动条和页面上所有表单控件的配色一起翻掉。 */
.tpl-starry input[type="date"] { color-scheme: dark; }
/* 幽灵按钮的文字色写死的是 --ink-2（#7C7075），在 #232A4D 上几乎看不见 ——
   信纸页脚那排「标记未读 / 存成图片 / 存成网页 / 垃圾桶」全是幽灵按钮，
   星空纸上等于四个看不见的按钮。把它们跟正文一样用纸上的字色。 */
.tpl-starry .btn--ghost { color: var(--paper-ink, #F0ECFF); }
.tpl-grid {
  --paper-bg: #FDFEFF;
  --paper-ink: #3D4A5C;
  --paper-img:
    linear-gradient(rgba(124, 190, 219, .3) 2px, transparent 2px),
    linear-gradient(90deg, rgba(124, 190, 219, .3) 2px, transparent 2px);
  --paper-size: 26px 26px, 26px 26px;
  --paper-pos: 0 0, 0 0;
}
.tpl-kraft {
  --paper-bg: #E8D5B7;
  --paper-ink: #4A3A28;
  --paper-img:
    repeating-linear-gradient(92deg, rgba(120, 90, 55, .07) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(2deg, rgba(120, 90, 55, .05) 0 1px, transparent 1px 7px),
    linear-gradient(160deg, #EFDEC4 0%, #E4CFAC 100%);
  --paper-size: auto, auto, auto;
}
.tpl-cloud {
  --paper-bg: #F2FAFF;
  --paper-ink: #3E5A6B;
  --paper-img:
    radial-gradient(60% 40% at 18% 16%, rgba(255, 255, 255, .95) 0%, transparent 70%),
    radial-gradient(50% 34% at 82% 34%, rgba(255, 255, 255, .9) 0%, transparent 70%),
    radial-gradient(70% 46% at 46% 88%, rgba(255, 255, 255, .85) 0%, transparent 72%),
    linear-gradient(165deg, #EAF6FF 0%, #DCEEFB 100%);
  --paper-size: auto;
}
.tpl-custom {
  --paper-veil: linear-gradient(rgba(255, 253, 250, .74), rgba(255, 253, 250, .74));
  --paper-ink: #453B3E;
  --paper-size: cover;
}

/* ---------------------------------------------------------- 响应式 */
@media (max-width: 420px) {
  .view { padding-left: 16px; padding-right: 16px; }
  .hero { padding: 18px; }
  .hero__unread { max-width: 100%; }
  /* 原来是 .5 —— 那是给「平涂 + 黑描边」那种全身像定的；
     现在是带渐变和圆底的半身像，压到 .5 在粉色底上会糊成一团脏印子。 */
  .hero__partner { opacity: .88; top: -12px; right: -8px; }
  .compose__paper { padding: 20px 18px 18px; }
  .sheet__scroll { padding: 26px 20px 22px; }
  .sheet__title { font-size: 21px; }
  .sheet__body { font-size: 16px; }
  .papergrid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .reader__hint { bottom: 16px; font-size: 11.5px; }
}

@media (min-width: 720px) {
  .view { padding-left: 32px; padding-right: 32px; }
}

/* 桌面上把内容收窄居中，别让卡片拉成一整条 */
@media (min-width: 900px) {
  .topbar, .view { width: 100%; max-width: 800px; margin-inline: auto; }
  .topbar { padding-inline: 32px; }
}