/* 晨窗首页卡：全屏移动端 + 桌面浮卡；玻璃材质与气泡同一套画法，背景图与本机情头都从这里应用 */
.home-overlay {
  position: fixed;
  inset: 0;
  z-index: 650;
  /* 关闭态必须离开渲染树：卡片里挂了几块磨砂，display:none 才不白算每帧 */
  display: none;
  /* 退场：整层淡出（桌面浮卡另在下方下沉）；时长与 home.js 的 HOME_CLOSE_MS 对齐 */
  transition: opacity 0.32s ease;
}

/* 入场：整层淡入（照永恒之书的底图淡入），桌面浮卡在下方媒体块里另做轻升 */
.home-overlay.show {
  display: block;
  animation: homeLayerIn 0.8s ease-out;
}

.home-overlay.closing {
  opacity: 0;
  /* 入场没演完就关：先掐掉入场，免得卡面反而亮一下 */
  animation: none;
}

/* 退场途中被叫回来：原地淡回，本场不再重演入场 */
.home-overlay.home-inplace {
  animation: none;
}

/* 退场中卡片不再接点击（否则连点两下底栏会二次触发） */
.home-overlay.closing .home-shell {
  pointer-events: none;
}

/* 开机用 visibility 不用 display 收起三栏（不改布局）；记号在 plHomeBootDone() 撤 */
:root[data-home-boot="1"] #leftSidebar,
:root[data-home-boot="1"] #chatWindow,
:root[data-home-boot="1"] #rightSidebar {
  visibility: hidden;
}

.home-shell {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* 下方两张副卡（方块 / 嘱托）的高度，两张等高 */
  --card-h: 138px;
  /* 主卡高度：以前和副卡共用 --card-h 强制三张等高，现在主卡单独一档（手机 118 / 桌面 124） */
  --days-h: 138px;
  /* 卡里中文的字体栈：桌面衬线，手机端在 max-width:800px 块里换成非衬线（手机上不能挂衬线，见那里的注释） */
  --font-home-text: 'Cormorant Garamond', 'Times New Roman', 'Songti SC', 'SimSun', serif;
  /* 左右内边距：内容区与底栏共用同一个值，两条边才对得齐 */
  --home-pad: 22px;
  color: var(--color-home-ink);
  background:
    radial-gradient(ellipse at 18% 0%, var(--color-home-glow-a) 0%, transparent 42%),
    radial-gradient(ellipse at 96% 82%, var(--color-home-glow-c) 0%, transparent 44%),
    radial-gradient(ellipse at 0% 100%, var(--color-home-glow-b) 0%, transparent 38%),
    var(--color-home-bg);
  display: flex;
  flex-direction: column;
}

.home-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.32'/%3E%3C/svg%3E");
}

.home-bg-layer {
  position: absolute;
  inset: 0;
  display: none;
  background-size: cover;
  background-position: center;
  opacity: var(--home-bg-alpha, 0.28);
  filter: blur(var(--home-bg-blur, 0px));
}

/* 蒙层只管「裸字落在图上」的那一段（顶栏 → 统计条），卡片区让磨砂自己管可读性 */
.home-bg-tint {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      var(--color-home-image-tint) 0%,
      var(--color-home-image-tint) 44%,
      transparent 68%,
      transparent 88%,
      var(--color-home-image-tint) 100%);
}

.home-content {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 顶边距写死（两端一致）；余高由 .home-people 与 .home-days-card 的两个 margin-top:auto 平分 */
  justify-content: flex-start;
  gap: 26px;
  padding: calc(26px + env(safe-area-inset-top, 0px)) var(--home-pad) 20px;
}

/* 内容超出可用高度时整块滚动，绝不许把固定高度的卡片压扁：压扁 = 三卡不等高 + 方块溢出到导航条下面 */
.home-content>* {
  flex-shrink: 0;
}

.home-content::-webkit-scrollbar {
  display: none;
}

.home-topline {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 14px;
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 0.66rem;
  font-style: italic;
  letter-spacing: 2.2px;
  color: var(--color-home-faint);
  white-space: nowrap;
}

.home-topline>span:last-child {
  margin-left: auto;
}

.home-hero {
  width: 100%;
  text-align: left;
  cursor: var(--pl-cursor-pointer, pointer);
  -webkit-tap-highlight-color: transparent;
}

.home-greeting {
  font-size: 1.45rem;
  font-weight: 300;
  letter-spacing: 0.8px;
  line-height: 1.35;
  color: var(--color-home-ink);
}

.home-subline {
  margin-top: 12px;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 1.2px;
  line-height: 1.55;
  color: var(--color-home-muted);
}

/* 换一组开屏语：旧字先退场，新字从左往右擦出来（拉幕 + 轻去模糊 + 微上浮，逐行错开） */
#homeGreeting,
#homeSubline {
  width: fit-content;   /* 拉幕要贴着字走，满宽会把空行也算进擦除时间 */
}

#homeTopline,
#homeGreeting,
#homeSubline {
  transition: opacity 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo);
}

#homeTopline.copy-out,
#homeGreeting.copy-out,
#homeSubline.copy-out {
  opacity: 0;
  transform: translateY(-4px);
}

#homeTopline.copy-in,
#homeGreeting.copy-in,
#homeSubline.copy-in {
  animation: homeCopyIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

#homeTopline.copy-in { --copy-blur: 1px; }
#homeGreeting.copy-in { --copy-blur: 2.4px; }
#homeSubline.copy-in { --copy-blur: 1.4px; }

@keyframes homeCopyIn {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateY(4px);
    filter: blur(var(--copy-blur, 2px));
  }

  55% {
    opacity: 0.9;
  }

  70% {
    clip-path: inset(0 0 0 0);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
    filter: blur(0);
  }
}

.home-people {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;
  margin-top: auto;
}

.home-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.home-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-home-accent-soft);
}

.home-avatar-agent {
  border: 1px solid var(--color-home-faint);
  box-shadow: 0 4px 14px var(--color-home-card-shadow);
}

.home-avatar-user {
  border: 1px solid var(--color-panel2-avatar-border);
  box-shadow: 0 4px 14px var(--color-home-card-shadow);
}

.home-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.home-avatar-fallback {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 1.35rem;
  color: var(--color-home-muted);
}

.home-heart {
  width: 24px;
  height: 24px;
  margin-top: 23px;
  color: var(--color-home-warm);
  opacity: 0.72;
}

.home-heart svg {
  width: 100%;
  height: 100%;
  display: block;
}

.home-name {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 0.8rem;
  font-style: italic;
  letter-spacing: 1.6px;
  line-height: 1.2;
  color: var(--color-home-muted);
}

.home-since {
  /* 和上面情头贴一点，视觉上是一整块 */
  margin-top: -6px;
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 0.6rem;
  font-style: italic;
  letter-spacing: 2.3px;
  color: color-mix(in srgb, var(--color-home-faint) 45%, var(--color-home-muted));
}

/* 四列等宽，中间那枚 • 压在列缝上；无底色无圆角块 */
.home-stats-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.home-stat {
  position: relative;
  min-width: 0;
  text-align: center;
}

.home-stat+.home-stat::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0.1rem;
  transform: translateX(-50%);
  font-size: 0.6rem;
  color: var(--color-home-faint);
}

.home-stat strong {
  display: block;
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 1.04rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-home-accent);
}

.home-stat span {
  display: block;
  margin-top: 6px;
  font-size: 0.54rem;
  letter-spacing: 1.1px;
  color: var(--color-home-muted);
  white-space: nowrap;
}

/* 这两样只在手机端出现；⚠️ .home-stat-en 必须带 .home-stat 前缀，否则被 .home-stat span 盖掉 */
.home-stat .home-stat-en,
.home-enter {
  display: none;
}

/* 液态玻璃：与气泡同一套画法，底色走 background-color，导航条只换底色即继承 */
.home-glass {
  position: relative;
  border: 0.5px solid var(--color-home-card-rim);
  border-radius: 24px;
  background-color: var(--color-home-card-bg);
  background-image: linear-gradient(158deg, var(--color-home-card-rim) 0%, transparent 44%);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow:
    0 12px 32px -18px var(--color-home-card-shadow),
    0 3px 10px -8px var(--color-home-card-shadow),
    var(--glass-rim-bottom),
    inset 0 -2px 5px -2px var(--color-glass-rim-lo),
    inset 0 0 16px -2px var(--color-home-card-rim);
}

/* 四块玻璃一律不磨砂：写成显式的，别让"祖先有没有 transform"决定外观 */
.home-tile,
.home-note-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.home-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(135deg,
      var(--color-glass-rim-hi) 0%,
      transparent 34%,
      transparent 66%,
      var(--color-glass-rim-hi) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.home-days-card {
  width: 100%;
  height: var(--days-h);
  margin-top: auto;
  padding: 15px 18px 13px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 和另外两张共用的白 34% 压在亮背景上太实、太抢眼；这一张单独降到白约 1%（34% × 3%），暗色主题按同一比例跟着走 */
  background-color: color-mix(in srgb, var(--color-home-card-bg) 3%, transparent);
  /* 磨砂在这张上关掉：5px 一糊，背景就成了一块奶油，和嘱托卡那种清透完全两种质感 */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.home-day-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 300;
  letter-spacing: 1px;
  color: var(--color-home-ink);
}

.home-day-main strong {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 2.3rem;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--color-home-accent);
}

.home-day-sub {
  margin-top: 7px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  font-size: 0.72rem;
  letter-spacing: 1.3px;
  color: var(--color-home-muted);
}

.home-day-sub strong {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-home-warm);
}

.home-quote {
  margin: 9px auto 0;
  max-width: 310px;
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 0.62rem;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: 0.4px;
  color: var(--color-home-faint);
}

.home-note-row {
  width: 100%;
  display: grid;
  grid-template-columns: var(--card-h) 1fr;
  gap: 18px;
  align-items: stretch;
}

.home-tile {
  align-self: start;
  width: var(--card-h);
  height: var(--card-h);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 点这张卡本身就是换图：选图框在 home.js 里挂 */
  cursor: var(--pl-cursor-pointer, pointer);
}

.home-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.home-tile-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-tile-empty svg {
  width: 34%;
  height: 34%;
  color: var(--color-home-faint);
  opacity: 0.55;
}

.home-note-card {
  height: var(--card-h);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.home-note-label {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 0.56rem;
  font-style: italic;
  letter-spacing: 2px;
  color: var(--color-home-faint);
}

/* 固定高度 + 两行截断：嘱托再长也不许把卡片撑高（三张卡必须等高） */
.home-note-text {
  margin-top: 9px;
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.4px;
  color: var(--color-home-ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-note-meta {
  margin-top: auto;
  padding-top: 10px;
  text-align: right;
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 0.62rem;
  font-style: italic;
  letter-spacing: 1px;
  color: var(--color-home-muted);
}

/* ⚠️ 手机端别挂衬线：OPPO WebView 取不到系统字体，中文衬线会画成粗黑 */
.home-greeting,
.home-subline,
.home-name,
.home-day-main,
.home-stat span,
.home-note-text,
.home-note-meta {
  font-family: var(--font-home-text);
}

.home-nav {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  height: 70px;
  margin: 0 var(--home-pad) calc(20px + env(safe-area-inset-bottom, 0px));
  padding: 0 10px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  border-radius: 26px;
  background-color: var(--color-home-nav-bg);
  /* 底栏也关磨砂：18px 一糊就成一块白板，背景透出来才好看（与嘱托卡、方块一致） */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.home-nav button {
  height: 58px;
  border: none;
  background: transparent;
  color: var(--color-home-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: var(--pl-cursor-pointer, pointer);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s var(--ease-out-expo), color 0.18s var(--ease-out-expo);
}

.home-nav button:active {
  transform: scale(0.94);
}

.home-nav svg {
  width: 21px;
  height: 21px;
  display: block;
}

.home-nav span {
  font-family: 'Kapakana', 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 0.64rem;
  line-height: 1;
  letter-spacing: 0.6px;
}

.home-nav .home-nav-home {
  width: 58px;
  height: 58px;
  margin: -18px auto 0;
  border: 0.5px solid var(--color-home-card-rim);
  border-radius: 50%;
  background: var(--color-home-card-bg);
  color: var(--color-home-accent);
  box-shadow:
    0 10px 22px var(--color-home-card-shadow),
    inset 0 0 0 var(--glass-rim-w) var(--color-glass-rim-hi);
}

.home-nav .home-nav-home svg {
  width: 23px;
  height: 23px;
  margin-top: 4px;
}

.home-nav .home-nav-home span {
  font-size: 0.58rem;
}

.pl-orb {
  position: fixed;
  /* 静息位：右 120 让开窄条热区与右下恢复热区；底 2.5rem 与输入框底边同线 */
  right: 120px;
  bottom: 2.5rem;
  z-index: 180;
  width: 46px;
  height: 46px;
  border: 0.5px solid var(--color-home-card-rim);
  border-radius: 50%;
  background: var(--color-home-nav-bg);
  color: var(--color-home-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: var(--pl-cursor-grab, grab);
  box-shadow:
    0 10px 24px var(--color-home-card-shadow),
    inset 0 0 0 var(--glass-rim-w) var(--color-glass-rim-hi);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0.72;
  transition: opacity 0.25s var(--ease-out-expo), transform 0.25s var(--ease-out-expo);
}

.pl-orb:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.pl-orb.dragging {
  cursor: var(--pl-cursor-grabbing, grabbing);
  transform: none;
  opacity: 1;
}

.pl-orb svg {
  width: 22px;
  height: 22px;
}

/* —— 右栏「晨窗」里的两处设置 —— */
.home-bg-settings,
.home-tile-settings {
  flex-direction: column;
  align-items: stretch;
}

.home-bg-preview,
.home-tile-preview {
  margin-bottom: 10px;
}

.home-bg-thumb-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  border: 0.5px solid var(--color-panel2-bg-thumb-border);
}

.home-tile-thumb-wrap {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 18px;
  border: 0.5px solid var(--color-panel2-bg-thumb-border);
}

.home-bg-thumb,
.home-tile-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 与「永恒之书 · 背景图」同款：更换占满、移除按字数收紧 */
.home-bg-controls,
.home-tile-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.home-avatar-actions {
  display: flex;
  gap: 10px;
}

.home-bg-btn,
.home-tile-btn {
  flex: 1;
  min-width: 0;
}

.home-avatar-reset {
  flex: 1;
}

.home-bg-remove,
.home-tile-remove {
  flex-shrink: 0;
}

.home-bg-remove:hover,
.home-tile-remove:hover {
  border-color: var(--color-rs-restore-hover);
  color: var(--color-rs-restore-hover);
}

.home-avatar-settings {
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 8px 0 12px;
}

.home-avatar-setting {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid var(--color-panel2-avatar-border);
  background: var(--color-panel2-avatar-placeholder-bg);
  color: var(--color-caramel-text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: var(--pl-cursor-pointer, pointer);
  overflow: hidden;
}

.home-avatar-setting img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.home-avatar-setting span {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 1rem;
}

@media (min-width: 801px) {
  .home-overlay {
    background: var(--color-home-veil);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
  }

  .home-overlay.show {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .home-shell {
    position: relative;
    inset: auto;
    width: min(520px, calc(100vw - 48px));
    max-height: calc(100vh - 64px);
    /* 只给方块+嘱托用：改了上方文字块或主卡 124，就要重算 684 */
    --card-h: clamp(132px, calc(100vh - 684px), 150px);
    --days-h: 124px;
    --home-pad: 34px;
    border: 0.5px solid var(--color-home-card-rim);
    border-radius: 36px;
    box-shadow: 0 24px 70px var(--color-home-card-shadow);
    transition: transform 0.32s var(--ease-out-expo);
  }

  /* 桌面浮卡入场：从退场那一档原地轻升回来 */
  .home-overlay.show .home-shell {
    animation: homeShellIn 1s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* 桌面浮卡退场时轻轻下沉：与入场 homeRise 反向；手机满屏位移会露背景，只淡出 */
  .home-overlay.closing .home-shell {
    transform: translateY(10px) scale(0.992);
    animation: none;
  }

  .home-overlay.home-inplace .home-shell {
    animation: none;
  }

  .home-title-action {
    display: none;
  }

  .home-content {
    gap: clamp(18px, 2.75vh, 28px);
    padding-top: clamp(22px, 3.5vh, 36px);
    padding-bottom: clamp(15px, 1.9vh, 20px);
  }

  /* 主卡比下面两块矮：124 是三行字的下限，内边距与两处小间距收紧才装得下；
     上边距仍小于下边距（德文行下方留白更多） */
  .home-days-card {
    padding: 10px 18px 14px;
  }

  .home-day-sub {
    margin-top: 5px;
  }

  .home-quote {
    margin-top: 6px;
  }

  .home-note-row {
    gap: 20px;
  }

  .home-nav {
    margin-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .home-note-text {
    font-size: 0.82rem;
    line-height: 1.7;
  }
}

/* 卡高降到 146 以下（窗口比 830 还矮）嘱托塞不下三行，硬撑会把落款挤出卡片，这段改两行 */
@media (min-width: 801px) and (max-height: 833px) {
  .home-note-text {
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 800px) {
  /* ── 手机端定稿：竖向账按 354×792 真机算（内容盒 702），没有余高 ── */
  .home-shell {
    --days-h: 124px;
    /* 手机端字体栈必须与 extra.css 的移动端规则同一串（OPPO WebView 取不到系统字体） */
    --font-home-text: 'Cormorant Garamond', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    /* 手机端中文三档；嘱托正文单独一档 10px（见下方 .home-note-text），别再单个元素写 font-size */
    --home-fs-lg: 1.0625rem;
    --home-fs-md: 0.75rem;
    --home-fs-sm: 0.5625rem;
  }

  /* 底边距 ±10px 就把数字推离中线 ±10px；手机没有余高，加多少就得从这里省 */
  .home-content {
    gap: 16px;
    /* ⚠️ env(safe-area-inset-top) 一个像素都不能删：OPPO 状态栏安全区，删了文字贴顶 */
    padding-top: calc(4px + env(safe-area-inset-top, 0px));
    padding-bottom: 12px;
  }

  /* 小标题到情头 21px（内容间距 16 + 5）；余高（她手机上≈0）仍全部让给「统计行 → 主卡」那一处呼吸 */
  .home-people {
    margin-top: 5px;
  }

  /* 标题档 */
  .home-greeting {
    font-size: var(--home-fs-lg);
  }

  /* 手机端大小标题居中（桌面端仍是左对齐）。上边距 +4：顶部英文行和标题之间拉开一点层次（内容间距 16 + 4） */
  .home-hero {
    text-align: center;
    margin-top: 4px;
  }

  /* 擦除要贴着字走（width:fit-content），居中得靠自动外边距，text-align 管不住块的位置 */
  #homeGreeting,
  #homeSubline {
    margin-left: auto;
    margin-right: auto;
  }

  /* 正文档：小标题 / 唤醒卡里的中文 / 情头下方的名字 */
  .home-subline,
  .home-day-main,
  .home-name {
    font-size: var(--home-fs-md);
  }

  /* 小字档：相爱那行 / 统计标签 / 嘱托落款 */
  .home-day-sub,
  .home-stat span,
  .home-note-meta {
    font-size: var(--home-fs-sm);
  }

  /* SINCE 行要 lining-nums：Cormorant 默认旧式数字比大写矮一截，看着就不齐 */
  .home-since {
    font-size: 0.6875rem;
    font-variant-numeric: lining-nums;
  }

  /* ⚠️ 必须带 .home-stat 前缀，否则被 .home-stat span 的字号/颜色/上边距盖掉 */
  .home-stat .home-stat-en {
    display: block;
    margin-top: 2px;
    font-family: 'Kapakana', 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 0.9375rem;
    line-height: 1;
    letter-spacing: 0.4px;
    color: var(--color-home-faint);
    white-space: nowrap;
  }

  /* 底部留一条放进入按钮；手机高度是满的，加高副卡就得从这里省 */
  .home-enter {
    position: relative;
    /* 白光要压在字后面（::before 的 z-index:-1），isolate 让它只在按钮自己这一层里往下压 */
    isolation: isolate;
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-home-enter);
    /* 墨是米白的、底下又垫了白光：让字站住的是这组暗影（她的判断：「明显的原因其实是暗影」），
       所以字自己那圈白色微光不做——做了她就说白色突出 */
    text-shadow:
      0 1px 3px var(--color-home-enter-shadow),
      0 2px 8px var(--color-home-enter-shadow),
      0 0 16px var(--color-home-enter-glow);
    cursor: var(--pl-cursor-pointer, pointer);
    -webkit-tap-highlight-color: transparent;
  }

  /* ⚠️ 字底白光的 -11px 要吃进 .home-content 的 padding-bottom，浓度别再往上加 */
  .home-enter::before {
    content: '';
    position: absolute;
    inset: -5px -16px -11px;
    z-index: -1;
    border-radius: 50%;
    background:
      radial-gradient(ellipse 56% 90% at 50% 70%,
        var(--color-home-enter-halo) 0%, rgba(255, 255, 255, 0) 74%),
      radial-gradient(ellipse at 50% 60%,
        var(--color-home-enter-halo-soft) 0%, rgba(255, 255, 255, 0) 100%);
    filter: blur(5px);
    pointer-events: none;
  }

  .home-enter-brand {
    font-family: 'Kapakana', 'Cormorant Garamond', 'Times New Roman', serif;
    font-style: normal;
    font-size: 1.5rem;
    letter-spacing: 1px;
  }

  .home-enter-dot {
    font-size: 1rem;
    opacity: 0.72;
  }

  .home-enter-hint {
    font-size: var(--home-fs-md);
    letter-spacing: 1px;
  }

  /* 名称去掉斜体：中文斜体是浏览器硬拧出来的斜，很脏（字距保持原样，她说先不动） */
  .home-name {
    font-style: normal;
  }

  .home-avatar {
    width: 64px;
    height: 64px;
  }

  /* 心比情头矮 12（24/2），情头 64 时留 20 才垂直居中 */
  .home-heart {
    margin-top: 20px;
  }

  /* 上边距不能再小于 10px（会窄过一二行间的行距）；左右各收 2px 才不比副卡宽 */
  .home-days-card {
    width: calc(100% - 4px);
    padding: 10px 18px 16px;
  }

  .home-day-main strong {
    font-size: 1.875rem;
  }

  .home-day-sub {
    margin-top: 10px;
  }

  /* 主数字的行高写死，德文行才落在可算的位置上（Cormorant 的默认行高约 1.3） */
  .home-day-sub strong {
    font-size: 1.5rem;
    line-height: 1.15;
  }

  /* nowrap 的前提：Kapakana 15px 实测 280 ≤ 卡内宽 294，改字号要重量 */
  .home-quote {
    margin-top: 4px;
    font-family: 'Kapakana', 'Cormorant Garamond', 'Times New Roman', serif;
    font-style: normal;
    font-size: 0.9375rem;
    white-space: nowrap;
  }

  .home-note-card {
    padding: 16px 18px 14px;
  }

  /* 副卡用 1:1 正方形（宽度定高，所以不用 --card-h）；144 =（310 内宽 − 22 缝）/2 */
  .home-note-row {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 6px;
  }

  .home-tile,
  .home-note-card {
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* 「A NOTE FOR YOU」：原字距 2px 在缩小后的卡片里太散，收到 1px（9px 字号下整行约 92 < 卡内宽 108） */
  .home-note-label {
    letter-spacing: 1px;
  }

  /* ⚠️ 必须 font-style: normal：父级 .home-note-meta 是 italic，中文斜体会被硬拧 */
  .home-note-who {
    font-family: 'Kapakana', var(--font-home-text);
    font-style: normal;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
  }

  /* 副卡 144 见方仍三行（桌面 801+ 同三行）；正文自己一档：10px 斜体 + 落款同色，行高 2 才不挤 */
  .home-note-text {
    font-size: 0.625rem;
    font-style: italic;
    line-height: 2;
    color: var(--color-home-muted);
    -webkit-line-clamp: 3;
  }

  /* 行高写死，卡片高度就不随中文字体漂 */
  .home-note-meta {
    line-height: 1.25;
  }

  /* 手机上她要玻璃磨砂：主卡、嘱托卡、导航条各 3px（方块卡没列、不做；桌面端仍旧一律不磨砂） */
  .home-days-card,
  .home-note-card,
  .home-nav {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  .pl-orb {
    display: none;
  }

  /* 移动端晨窗是全屏竖屏：预览框同步竖屏，否则竖屏照片被裁成横幅 */
  .home-bg-thumb-wrap {
    aspect-ratio: 3 / 4;
  }
}

@media (max-height: 760px) {
  .home-content {
    gap: 14px;
  }

  .home-avatar {
    width: 60px;
    height: 60px;
  }

  .home-heart {
    width: 20px;
    height: 20px;
    margin-top: 20px;
  }

  .home-day-main strong {
    font-size: 2rem;
  }

  .home-days-card {
    padding-top: 12px;
    padding-bottom: 11px;
  }

  .home-note-card {
    padding: 14px 16px 13px;
  }
}

/* ⚠️ 进卡动画绝不能挂在 .home-note-row 上：祖先带 transform 就废掉子孙的磨砂 */
.home-overlay.show .home-topline,
.home-overlay.show .home-hero,
.home-overlay.show .home-people,
.home-overlay.show .home-since,
.home-overlay.show .home-stats-row,
.home-overlay.show .home-days-card,
.home-overlay.show .home-tile,
.home-overlay.show .home-note-card,
.home-overlay.show .home-enter,
.home-overlay.show .home-nav {
  animation: homeRise 0.62s var(--ease-out-expo) both;
}

.home-overlay.show .home-hero { animation-delay: 0.05s; }
.home-overlay.show .home-people { animation-delay: 0.1s; }
.home-overlay.show .home-since { animation-delay: 0.13s; }
.home-overlay.show .home-stats-row { animation-delay: 0.16s; }
.home-overlay.show .home-days-card { animation-delay: 0.2s; }
.home-overlay.show .home-tile { animation-delay: 0.25s; }
.home-overlay.show .home-note-card { animation-delay: 0.25s; }
.home-overlay.show .home-nav { animation-delay: 0.3s; }
.home-overlay.show .home-enter { animation-delay: 0.35s; }

@keyframes homeRise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    /* 终点必须是 none：写 translateY(0) 会把 transform 永久留在元素上，子孙的 backdrop-filter 就废了 */
    transform: none;
  }
}

@keyframes homeLayerIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes homeShellIn {
  from {
    transform: translateY(10px) scale(0.992);
  }

  to {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .home-overlay.show,
  .home-overlay.show .home-shell {
    animation: none;
  }

  .home-overlay.show .home-topline,
  .home-overlay.show .home-hero,
  .home-overlay.show .home-people,
  .home-overlay.show .home-since,
  .home-overlay.show .home-stats-row,
  .home-overlay.show .home-days-card,
  .home-overlay.show .home-tile,
  .home-overlay.show .home-note-card,
  .home-overlay.show .home-enter,
  .home-overlay.show .home-nav {
    animation: none;
  }

  /* 退场只保留淡出，不做下沉 */
  .home-overlay.closing .home-shell {
    transform: none;
  }
}