/* ============================================================
 * 情侣账本 · 专属样式
 * 只用 app.css 里已有的 CSS 变量，保证深浅色自动跟随
 * ============================================================ */

/* ---------- 情侣账本自己的令牌 ----------
   粉色只在这里定义一次，暗色下提亮 4%：同样的 #FF6A9B 落在 #171C27 上
   对比度只有 3.4:1，小字会糊，提亮到 #FF8AB0 才到 5.1:1。 */
:root {
  --cp-pink: #FF6A9B;
  --cp-pink-soft: rgba(255, 106, 155, .12);
  --cp-ink: rgba(255, 106, 155, .16);   /* 日历里的粉色小字 */
}
[data-theme="dark"] {
  --cp-pink: #FF8AB0;
  --cp-pink-soft: rgba(255, 138, 176, .14);
  --cp-ink: rgba(255, 138, 176, .2);
}

/* ---------- 底栏：情侣格 + 心形 ---------- */
/* m02510 用户定稿：和其他底栏图标一致 —— 永远线条轮廓、不上色不实心。
   启用与否只靠选中色（.tab.active 的 --brand）区分，不再换实心心。 */
.tab--couple .tab-ic { color: inherit; }
.tab--couple .ic { transition: transform .2s var(--ease); }
/* 对方有新账时冒一个粉色小点，1.2 秒消失（不做常驻红点） */
.tab--couple .tab-ping {
  position: absolute; top: 6px; left: 50%; margin-left: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #FF6A9B;
  animation: cpPing 1.2s ease forwards;
}
@keyframes cpPing {
  0% { opacity: 0; transform: scale(.4); }
  30% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* ---------- 引导流程 ---------- */
.cp-onboard {
  padding: 18px 16px calc(var(--tab-h) + var(--safe-b) + 28px);
  display: flex; flex-direction: column; min-height: 100%;
}
.cp-hero { text-align: center; padding: 26px 0 22px; }
.cp-hero-hearts { font-size: 52px; line-height: 1; margin-bottom: 14px; }
.cp-hero-title { font-size: 22px; font-weight: 750; letter-spacing: -.3px; margin-bottom: 8px; }
.cp-hero-sub { font-size: 13px; color: var(--text-2); line-height: 1.7; padding: 0 12px; }

.cp-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 16px;
  margin-bottom: 12px;
}
.cp-card--soft { background: var(--card-2); border-style: dashed; }
.cp-card-title { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.cp-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.7; }

.cp-list { display: flex; flex-direction: column; gap: 9px; }
.cp-line { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
.cp-line-ic { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px; }
.cp-line-ic { background: var(--bg-2); color: var(--text-3); }
.cp-line--ok .cp-line-ic { background: rgba(20, 184, 122, .14); color: var(--income); }

.cp-note {
  margin-top: 12px; padding: 10px 12px; border-radius: 11px;
  background: rgba(124, 92, 255, .08);
  font-size: 11.5px; line-height: 1.65; color: var(--text-2);
}
.cp-note--center { margin-top: 16px; text-align: center; background: none; padding: 0; color: var(--text-3); }

.cp-foot { margin-top: auto; padding-top: 18px; }
.cp-foot .btn { width: 100%; }

/* 协议页 */
.cp-onboard-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cp-back {
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: var(--card-2); color: var(--text-2);
}
.cp-onboard-title { font-size: 15px; font-weight: 700; }
.cp-scroll {
  flex: 1; min-height: 0; max-height: 46vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
}
.cp-doc h3 { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.cp-doc ol { padding-left: 18px; margin: 0; }
.cp-doc li { font-size: 12.5px; line-height: 1.85; color: var(--text-2); margin-bottom: 9px; }
.cp-doc li b { color: var(--text); }
.cp-doc-end { text-align: center; color: var(--text-3); font-size: 11.5px; margin-top: 14px; }

.cp-foot--consent { display: flex; flex-direction: column; gap: 12px; }

/* 勾选框：全局 input { appearance:none } 会把原生方框吃掉，
   所以这里自己画一个，保证任何浏览器都能看见「有个格子要打勾」。 */
.cp-check {
  position: relative;
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.55; color: var(--text-2);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* 真正的 input 留在 DOM 里（无障碍、键盘、表单语义都靠它），只是不画出来 */
.cp-check input {
  position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; margin: 0;
  opacity: 0; pointer-events: none;
}
.cp-box {
  width: 20px; height: 20px; flex: none; margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid var(--line-2);
  background: var(--card);
  display: grid; place-items: center;
  color: #fff;
  transition: background .16s ease, border-color .16s ease, transform .16s var(--ease);
}
.cp-box .ic { opacity: 0; transform: scale(.6); transition: opacity .14s ease, transform .18s var(--ease); }
.cp-check input:checked + .cp-box {
  background: var(--brand); border-color: var(--brand);
}
.cp-check input:checked + .cp-box .ic { opacity: 1; transform: scale(1); }
.cp-check input:focus-visible + .cp-box {
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.cp-check:active .cp-box { transform: scale(.92); }
.cp-check-text { padding-top: 1px; }
.cp-check input:checked ~ .cp-check-text { color: var(--text); }

/* 同意页：未读到底时，勾选框整行变灰、不可点；底部给一句提示 */
.cp-consent-hint {
  font-size: 11.5px; color: var(--text-3); line-height: 1.5;
  background: var(--bg-2); border-radius: 9px; padding: 8px 11px;
}
.cp-consent-hint.is-ok { color: var(--income); background: color-mix(in srgb, var(--income) 12%, transparent); }
.cp-check.is-locked { opacity: .45; filter: grayscale(.4); pointer-events: none; }
.cp-check.is-locked .cp-box { border-style: dashed; }

/* 必填资料 */
.cp-form { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }
.cp-field { display: flex; flex-direction: column; gap: 7px; }
.cp-label { font-size: 12.5px; font-weight: 650; color: var(--text-2); }
/* 选填的字段在标签后面挂一个淡一点的小字，别让人以为必填 */
.cp-label-opt { margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--text-3); }
/* 生日两个并排：各占一半，窄屏也不会挤成一列太长 */
.cp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cp-input {
  width: 100%; height: 46px; padding: 0 14px;
  border-radius: 13px; border: 1px solid var(--line);
  background: var(--card); color: var(--text);
  font-size: 14.5px; outline: none;
  transition: border-color .18s ease;
}
.cp-input:focus { border-color: var(--brand); }
.cp-input--btn {
  display: flex; align-items: center; justify-content: space-between;
  text-align: left; color: var(--text-2);
}
.cp-err { font-size: 11.5px; color: var(--expense); min-height: 15px; line-height: 1.4; }

/* 模式选择 */
.cp-mode-grid { display: flex; flex-direction: column; gap: 12px; }
.cp-mode {
  text-align: left;
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 16px;
  transition: border-color .18s ease, background .18s ease, transform .16s var(--ease);
}
.cp-mode:active { transform: scale(.985); }
.cp-mode.on { border-color: var(--brand); background: var(--brand-soft); }
.cp-mode-emoji { font-size: 26px; line-height: 1; margin-bottom: 10px; }
.cp-mode-art {
  position: relative;
  margin-bottom: 12px;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
  /* 图片没加载完之前先铺这层，避免闪一块白 */
  background: #161D40;
  aspect-ratio: 720 / 542;
}
/* 铺满版（模式页）的尺寸全在下面的 .cp-mode--fill 块里定义，这里不再覆盖 aspect-ratio */
.cp-art-img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  /* 图片自带的状态栏/截图边框一律裁掉 */
  transform: scale(1.01);
}
/* 底下那层渐变：只在图片还没到 / 加载失败时可见 */
.cp-art-veil {
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  opacity: .16;
}
.cp-art-veil--local { background: linear-gradient(140deg, #5A4B9C, #C98CA8); }
.cp-art-veil--remote { background: linear-gradient(140deg, #3E4780, #8A7599); }
[data-theme="dark"] .cp-art-veil { opacity: .08; }
[data-theme="dark"] .cp-mode-art { background: #10152F; }
.cp-art-svg { display: block; width: 100%; height: auto; }
.cp-mode.on .cp-mode-art { box-shadow: 0 0 0 2px var(--brand); }
.cp-mode-name { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.cp-mode-list { margin: 0; padding-left: 16px; }
.cp-mode-list li { font-size: 12px; line-height: 1.8; color: var(--text-2); }
.cp-mode-pick {
  margin-top: 12px; font-size: 12px; font-weight: 650; color: var(--brand);
}

/* ---- 模式卡：「竖排 + 铺满」版 ----
   这一版是为「两个选项要占满整屏」重做的。三条硬约束决定了版式：

   1) 不能有滚动条 —— 所以答案只能是「余量全给卡片」，让卡片去吃掉空白，
      而不是给卡片写上更大的固定高度（写死高度总有一档屏幕会溢出）。
      做法：.cp-onboard--mode 改成 height:100% 的 flex 纵向容器，
      网格 .cp-mode-grid--fill 用 1fr 1fr 平分卡片区，卡片自身 flex 纵向铺满。
   2) 插画必须等比 —— 宽高比锁在 720 / 542，只由宽度决定。
      插画区给 flex:1，内部图用 object-fit:cover 裁掉左右的浮空，
      这样卡片变高时只有图变高，比例和画意都不动。
   3) 图不能压过字（上一版头重脚轻） —— 图有 max-height 上限（min(120px, 34%)），
      文字块 .cp-mode-body 不收缩（flex:none），余量优先给留白而不是给图。
   文字同时放大一档：标题 17px、特性 13px、状态 12.5px。 */
.cp-onboard-top--mode { gap: 8px; margin-bottom: 12px; flex: none; padding: 0 16px; }
.cp-onboard-top--mode .cp-onboard-sub { margin-left: auto; font-size: 11.5px; color: var(--text-3); text-align: right; line-height: 1.35; }

/* ---- 铺满整屏（模式选择页） ----
   .view 自己给了 padding-bottom = tab-h + safe + 26（给底部标签栏预留的那块）。
   本页是「定高的一屏」，用 :has() 把那层预留直接从 .view 上摘掉，
   否则本页只能拿到 100% − 86px，等于白丢 86px 可用高度。
   不支持 :has() 的浏览器只是少这 86px，版式不会坏。 */
/* --mode 只用在「选模式」那一屏（定高铺满），同样要摘掉这层预留，
   否则 100% 里已经扣过 tab-h，--mode 又减一次 tab-h，凭空少 60px。 */
.view:has(> .cp-onboard--fit),
.view:has(> .cp-onboard--mode) { padding-bottom: 0; }

.cp-onboard--mode,
.cp-onboard--fit {
  /* 高度必须是一个确定的「一屏」，不能靠内容撑（内容一撑就溢出），
     也不能写 height:100% —— .view 的百分比高度算的是 content-box。 */
  height: calc(100% - var(--tab-h) - var(--safe-b) - 4px);
  box-sizing: border-box;
  flex: none;
  min-height: 0;
  overflow: hidden;
}
.cp-onboard--fit { padding: 12px 0 8px; }
/* 左右留白放在子元素上：父容器是 border-box + 定高，
   写在父容器上的左右内边距不会影响高度，但会让「卡片区」的宽多算两次，
   写在这里更直白 */
.cp-onboard--mode { padding-bottom: calc(var(--safe-b) + 8px); }
/* 引导流程里的模式页（.cp-onboard--mode）没有返回键，标题行也能省一点 */
.cp-onboard--mode .cp-onboard-top--mode { margin-bottom: 10px; }

/* 卡片区：两张等高。
   为什么不在这里用 flex 分配高度 —— 卡片内部（图 + 文字 + 状态）要先撑出内容高，
   再由 flex 把它缩到目标高，这一步在「卡片区本身也是 flex:1 的定高盒」里
   会被算成溢出，卡片会被压成内容高的下限（实测 107 / 167 不等高）。
   块布局 + flex:1 没有这个循环：可用高度 = 卡片区高度 − 间距，两张各分一半。 */
.cp-mode-grid--fill {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 12px; padding: 0 16px;
}
.cp-mode-grid--fill > .cp-mode { flex: 1 1 0; height: 0; min-height: 0; }

.cp-mode--fill {
  display: flex; flex-direction: column; align-items: stretch;
  padding: 10px 12px 9px;
  gap: 0;
  overflow: hidden;
}
/* ---- 插图：按原比例铺满，绝不裁切、也不留黑边 ----
   以前这里是「图框写死 aspect-ratio: 720/542 + 里面 object-fit: contain」。
   问题在图框的尺寸不归它自己管：高度是 flex 抢剩下的（卡片剩多少给多少），
   宽度被卡片撑满，框的真实比例根本到不了 1.328——
   实测 390×844 是 300×167（1.795），375×667 更极端，287×100（2.878）。
   contain 于是把图缩成中间一条：390 下左右各 39px 深蓝底，375 下各 77px，
   图只剩 132px 宽。画意还在，但看着就像"图被裁了贴在黑板上"。

   现在改让**图自己决定尺寸**，框退化成一块透明容器：
   图用 width:auto / height:auto + max-width/max-height 收到框里，
   等比缩小是 <img> 的固有行为，不需要 object-fit:cover 去裁，
   所以既没有像素被切，也没有留白可露（框的可见边界就是图本身）。
   好处是任何视口都成立，不再依赖 aspect-ratio 和 flex 谁先算出来。 */
.cp-mode--fill .cp-mode-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex: none; margin-bottom: 8px;
}
.cp-mode--fill .cp-mode-head .cp-mode-name { margin: 0; }
.cp-mode--fill .cp-mode-head .cp-mode-pick { margin: 0; padding: 0; }
.cp-mode--fill .cp-mode-art {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  margin-bottom: 0;
  border-radius: 14px;
  /* 深蓝底必须去掉：框比图宽时，那层底色就是用户看到的「黑边」 */
  background: transparent;
  aspect-ratio: auto;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}
.cp-mode--fill .cp-mode-art .cp-art-img {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain; object-position: center;
  transform: none;
  border-radius: 14px;
}
/* 渐变遮罩只用于「图还没到 / 加载失败」时垫底。
   框现在是透明且比图宽，罩上去会变成一条盖住卡片的紫色带，所以这里关掉。 */
.cp-mode--fill .cp-art-veil { display: none; }
.cp-mode--fill .cp-mode-list {
  flex: none;
  padding-top: 9px;
  display: flex; flex-wrap: wrap; align-content: flex-start;
  gap: 3px 0; margin: 0; list-style: none;
}
.cp-mode--fill .cp-mode-name { font-size: 17px; font-weight: 750; letter-spacing: -.2px; }
.cp-mode--fill .cp-mode-list li {
  width: 50%; font-size: 13px; line-height: 1.5; color: var(--text-2);
  padding-left: 11px; position: relative;
}
.cp-mode--fill .cp-mode-list li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); opacity: .55;
}
.cp-mode--fill .cp-mode-pick {
  font-size: 12px; font-weight: 650; color: var(--brand);
  white-space: nowrap;
}
.cp-mode--fill.on .cp-mode-pick { color: var(--text-3); font-weight: 600; }
.cp-mode-hint.cp-note { flex: none; margin-top: 12px; font-size: 12px; padding: 0 16px; }
/* 矮屏只管留白与字号：图照旧按比例走，不为腾地方去切它 */
@media (max-height: 700px) {
  .cp-onboard--fit, .cp-onboard--mode { padding-top: 8px; }
  .cp-mode-grid--fill { gap: 9px; }
  .cp-mode--fill { padding: 9px 11px 8px; }
  .cp-mode--fill .cp-mode-head { margin-bottom: 6px; }
  .cp-mode--fill .cp-mode-name { font-size: 16px; }
  .cp-mode--fill .cp-mode-list { padding-top: 7px; }
  .cp-mode--fill .cp-mode-list li { font-size: 12px; line-height: 1.45; }
  .cp-mode-hint.cp-note { margin-top: 8px; font-size: 11.5px; }
}
@media (min-height: 780px) {
  /* 大屏（例如 430×932）多出来的高度全部给图，文字只放大一档 */
  .cp-mode--fill .cp-mode-list { padding-top: 10px; }
  .cp-mode--fill .cp-mode-list li { font-size: 13.5px; }
  .cp-mode-hint.cp-note { margin-top: 14px; }
}

/* ---------- 主界面 ---------- */
.cp-main { padding: 14px 16px calc(var(--tab-h) + var(--safe-b) + 28px); }

.cp-head { display: flex; align-items: center; gap: 12px; padding: 4px 2px 16px; }
.cp-avatars { display: flex; flex: none; }
.cp-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700; color: #fff;
  background: var(--brand-grad);
  border: 2px solid var(--bg);
}
.cp-avatar--peer { margin-left: -12px; background: linear-gradient(135deg, #FF6A9B, #FF9A6A); }
.cp-head-main { flex: 1; min-width: 0; }
.cp-head-title { font-size: 14.5px; font-weight: 700; }
.cp-head-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.cp-head-sub b { color: var(--accent); font-variant-numeric: tabular-nums; }
/* 右上角的同步入口。
   没配对：一颗显眼的品牌色胶囊「配对」（用户要求：配对入口要做明显，
   以前那枚 26px 的刷新图标没人知道能点）。
   配对之后：收成低调状态灯，只有小圆点在表状态，不抢标题的视线。 */
.cp-pair {
  flex: none; height: 30px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 15px;
  background: var(--brand-grad); color: #fff;
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .2px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 32%, transparent);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .12s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.cp-pair:active { transform: scale(.95); }
.cp-pair:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cp-pair-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; flex: none; }
.cp-pair-txt { line-height: 1; white-space: nowrap; }
.cp-pair--on, .cp-pair--busy, .cp-pair--warn {
  background: var(--bg-2); color: var(--text-2); box-shadow: none;
}
.cp-pair--on .cp-pair-dot { background: var(--income); }
.cp-pair--busy .cp-pair-dot { background: var(--brand); }
.cp-pair--warn .cp-pair-dot { background: var(--warn); }

/* 小金库：卡头做成可点的一整行（以前只有右上角一个「去存」小字，看不出来能点） */
.cp-vault { padding: 14px 14px 16px; }
.cp-vault-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 0 0 2px; margin: 0 0 4px;
  border: 0; background: none; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cp-vault-head:active { opacity: .72; }
.cp-vault-head-ic {
  width: 34px; height: 34px; flex: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
  background: linear-gradient(135deg, rgba(255, 106, 155, .18), rgba(124, 92, 255, .18));
}
.cp-vault-head-main { flex: 1; min-width: 0; display: block; }
.cp-vault-head-title {
  display: block; font-size: 14.5px; font-weight: 650; color: var(--text); line-height: 1.3;
}
.cp-vault-head-sub {
  display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.45; color: var(--text-3);
}
.cp-vault-head-go {
  flex: none; display: inline-flex; align-items: center; gap: 1px;
  padding: 5px 9px 5px 11px; border-radius: 14px;
  font-size: 12px; font-weight: 600; color: var(--brand);
  background: rgba(79, 124, 255, .1);
}
.cp-vault-build { width: 100%; height: 42px; border-radius: 21px; margin-top: 4px; }

/* 小金库：双心合拢 */
.cp-vault-hearts {
  position: relative; height: 46px; margin: 6px 0 12px;
  display: flex; align-items: center; justify-content: center;
}
.cp-heart { position: absolute; font-size: 26px; line-height: 1; transition: transform .5s var(--ease); }
.cp-heart--l { left: calc(50% - 62px); }
.cp-heart--r { right: calc(50% - 62px); }
.cp-vault-bar {
  height: 8px; border-radius: 4px; overflow: hidden;
  background: linear-gradient(90deg, rgba(255, 106, 155, .16), rgba(124, 92, 255, .16));
}
.cp-vault-bar i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #FF6A9B, #7C5CFF);
  transition: width .5s var(--ease);
}
.cp-vault-nums {
  margin-top: 10px; font-size: 12.5px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.cp-vault-nums b { font-size: 17px; color: var(--text); font-weight: 750; }
.cp-vault-name { float: right; color: var(--text-3); font-size: 11.5px; }
.cp-vault-empty { font-size: 12.5px; color: var(--text-3); padding: 10px 0 2px; }

/* ---------- 小金库存取面板（重排过：以前元素堆在一起，没有分组） ---------- */
.cp-vault-sheet { display: flex; flex-direction: column; gap: 14px; }

/* 1. 顶部进度块：灰底大圆角，把双心、进度条、数字圈在一起 */
.cv-hero {
  padding: 14px 16px 16px; border-radius: 18px;
  background: var(--bg-2);
}
.cv-hero .cp-vault-hearts { height: 40px; margin: 0 0 10px; }
.cv-hero .cp-vault-nums { margin-top: 9px; }
.cv-hero .cp-vault-name { float: none; display: block; margin-top: 2px; }

/* 2. 目标金额行：整行可点，右边显示当前目标 */
.cv-target-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 13px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--card);
  font-family: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cv-target-row:active { transform: scale(.995); opacity: .8; }
.cv-target-row-ic {
  width: 30px; height: 30px; flex: none; border-radius: 10px;
  display: grid; place-items: center; font-size: 15px;
  background: rgba(255, 122, 69, .12);
}
.cv-target-row-main { flex: 1; min-width: 0; display: block; }
.cv-target-row-name { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.cv-target-row-sub { display: block; margin-top: 2px; font-size: 11px; color: var(--text-3); }
.cv-target-row-val {
  flex: none; font-size: 13px; font-weight: 650; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.cv-target-row svg { flex: none; color: var(--text-3); }

/* 3. 存取表单：金额一行、备注一行、两个按钮一行，全部同宽 */
.cv-form { display: flex; flex-direction: column; gap: 9px; }
.cv-amount-row {
  display: flex; align-items: baseline; gap: 7px;
  padding: 10px 14px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--card);
}
.cv-amount-row:focus-within { border-color: var(--brand); }
.cv-amount-row:focus-within .cv-amount-cur { color: var(--brand); }
.cv-amount-cur { font-size: 17px; font-weight: 650; color: var(--text-3); }
.cv-amount-input {
  flex: 1; min-width: 0; border: 0; background: none; padding: 0;
  font-family: inherit; font-size: 26px; font-weight: 700;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.cv-amount-input::placeholder { color: var(--text-3); opacity: .45; }
.cv-note {
  width: 100%; height: 42px; padding: 0 14px; border-radius: 13px;
  border: 1px solid var(--line); background: var(--card);
  font-family: inherit; font-size: 13px; color: var(--text);
}
.cv-note::placeholder { color: var(--text-3); }
.cv-note:focus { border-color: var(--brand); }
.cv-acts { display: flex; gap: 9px; }
.cv-act { flex: 1; min-width: 0; height: 44px; border-radius: 22px; }

/* 4. 记录列表：一排一条，左边圆点、中间备注、右边金额，中间用细线隔开 */
.cv-log-title { font-size: 11.5px; font-weight: 650; color: var(--text-3); margin: 2px 0 -2px; }
.cv-logs {
  border-radius: 14px; border: 1px solid var(--line);
  background: var(--card); overflow: hidden;
}
.cv-log {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 13px; font-size: 12.5px;
}
.cv-log + .cv-log { border-top: 1px solid var(--line); }
.cv-log-dot {
  width: 6px; height: 6px; flex: none; border-radius: 50%;
  background: var(--text-3);
}
.cv-log-dot.is-in { background: #FF6A9B; }
.cv-log-dot.is-out { background: var(--text-3); }
.cv-log-note {
  flex: 1; min-width: 0; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv-log-date { flex: none; font-size: 11px; color: var(--text-3); }
.cv-log-amt {
  flex: none; font-weight: 650; font-variant-numeric: tabular-nums;
}
.cv-log-amt.is-in { color: #FF4F87; }
.cv-log-amt.is-out { color: var(--text-3); }
.cv-log-empty {
  padding: 18px 0; text-align: center; font-size: 12px; color: var(--text-3);
  border-radius: 14px; border: 1px dashed var(--line);
}
.cv-foot-note { font-size: 11px; line-height: 1.55; color: var(--text-3); text-align: center; }

/* 定目标金额的弹层 */
.cv-target-label { font-size: 12px; color: var(--text-3); margin-bottom: 7px; }
.cv-target-input {
  display: flex; align-items: baseline; gap: 7px;
  padding: 10px 14px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--card);
}
.cv-target-input:focus-within { border-color: var(--brand); }
.cv-target-input:focus-within .cv-target-yen { color: var(--brand); }
.cv-target-yen { font-size: 18px; font-weight: 650; color: var(--text-3); }
.cv-target-input input {
  flex: 1; min-width: 0; border: 0; background: none; padding: 0;
  font-family: inherit; font-size: 28px; font-weight: 700;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.cv-target-hint { margin: 9px 0 12px; font-size: 11.5px; line-height: 1.6; color: var(--text-3); }
.cv-target-quick { display: flex; flex-wrap: wrap; gap: 7px; }
.cv-qk {
  padding: 7px 13px; border-radius: 15px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-2);
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-2);
  -webkit-tap-highlight-color: transparent;
}
.cv-qk:active { transform: scale(.96); }

/* 我们的支出 */
.cp-stat {
  display: flex; gap: 10px; margin: 12px 0;
}
.cp-stat-cell {
  flex: 1; padding: 13px 14px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line);
}
.cp-stat-label { font-size: 11px; color: var(--text-3); }
.cp-stat-val {
  margin-top: 6px; font-size: 19px; font-weight: 750;
  letter-spacing: -.4px; font-variant-numeric: tabular-nums;
}

/* 模块占位（旧版，保留给其他视图兜底；情侣页已改用 .cp-mod） */
.cp-modules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.cp-module {
  padding: 14px; border-radius: var(--radius);
  background: var(--card); border: 1px dashed var(--line);
}
.cp-module-name { font-size: 12.5px; font-weight: 650; }
.cp-module-desc { font-size: 10.5px; color: var(--text-3); margin-top: 4px; }

/* 深色模式微调 */
[data-theme="dark"] .cp-line--ok .cp-line-ic { background: rgba(20, 184, 122, .18); }
[data-theme="dark"] .cp-avatar { border-color: var(--card); }

/* ============================================================
 * 步骤 2：数据层相关（归属印记 / 双心 / 模块）
 * ============================================================ */

/* ---------- 记账页：账本胶囊上的「♡ 和 XX」 ---------- */
.book-pill-cp {
  flex: none; margin-left: 2px;
  padding: 2px 7px; border-radius: 7px;
  font-size: 10.5px; font-weight: 650; line-height: 1.45;
  color: #FF6A9B; background: rgba(255, 106, 155, .12);
  white-space: nowrap;
}
[data-theme="dark"] .book-pill-cp { background: rgba(255, 106, 155, .18); }

/* ---------- 记账页：归属印记选择器 ---------- */
.attrib-row {
  margin: 12px 0 2px;
  padding: 13px 14px;
  border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line);
}
.attrib-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.attrib-title { font-size: 12.5px; font-weight: 700; }
.attrib-hint { font-size: 10.5px; color: var(--text-3); }
.attrib-chips { display: flex; gap: 7px; }
.attrib-chip {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 34px; padding: 0 6px;
  border-radius: 11px;
  border: 1.5px solid var(--line);
  background: var(--card-2);
  color: var(--text-2);
  font-size: 12px; font-weight: 620;
  white-space: nowrap;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.attrib-chip .attrib-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ac, var(--brand)); opacity: .5;
  transition: opacity .16s ease, transform .16s var(--ease);
}
.attrib-chip.on {
  border-color: var(--ac, var(--brand));
  background: var(--card-2);                                     /* 老浏览器兜底 */
  background: color-mix(in srgb, var(--ac, var(--brand)) 10%, transparent);
  color: var(--ac, var(--brand));
}
.attrib-chip.on .attrib-dot { opacity: 1; transform: scale(1.25); }
.attrib-chip:active { transform: scale(.97); }
.attrib-note {
  margin-top: 9px; font-size: 11px; color: var(--text-3);
  text-align: center;
  animation: attribFade 1.5s ease forwards;
}
@keyframes attribFade {
  0% { opacity: 0; }
  18% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: .45; }
}

/* ---------- 账目卡片：归属徽章 ---------- */
.tx-tag--attrib {
  color: var(--ac, var(--brand));
  background: var(--bg-2);                                      /* 老浏览器兜底 */
  background: color-mix(in srgb, var(--ac, var(--brand)) 13%, transparent);
}

/* ---------- 情侣页：卡片头 / 开关行 / 按钮行 ---------- */
.cp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cp-card-head .cp-card-title { margin-bottom: 0; }
.cp-stat-unit { font-size: 12px; font-weight: 600; color: var(--text-3); }

.cp-switch-row { display: flex; align-items: center; gap: 12px; }
.cp-switch-main { flex: 1; min-width: 0; }
.cp-switch-name { font-size: 12.5px; font-weight: 650; }
.cp-switch-desc { font-size: 10.5px; color: var(--text-3); line-height: 1.55; margin-top: 3px; }
.cp-btn-row { display: flex; gap: 8px; margin-top: 13px; }
.cp-btn-row .btn { flex: 1; font-size: 12px; padding-left: 6px; padding-right: 6px; }
.cp-desc--tiny { font-size: 10.5px; color: var(--text-3); margin-top: 11px; text-align: center; }

/* ---------- 情侣页：模块卡（2 列） ---------- */
.cp-mods {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin-bottom: 12px;
}
.cp-mod {
  padding: 13px 14px;
  border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.cp-mod-head { display: flex; align-items: center; gap: 6px; }
.cp-mod-ic { font-size: 13px; line-height: 1; }
.cp-mod-name { font-size: 11.5px; font-weight: 650; color: var(--text-2); }
.cp-mod-val {
  margin-top: 9px;
  font-size: 21px; font-weight: 750; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.cp-mod-val--empty { font-size: 15px; color: var(--text-3); font-weight: 600; }
.cp-mod-unit { font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.cp-mod-desc { font-size: 10.5px; color: var(--text-3); line-height: 1.55; margin-top: 5px; }
/* 见面倒计时下面那行「2026年10月25日 14:30」：比描述字重一点，
   因为「几点几分到」是这张卡里最值得看清的信息 */
.cp-mod-time { font-size: 11px; font-weight: 600; color: var(--text-2); line-height: 1.5;
  margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.cp-mod .link-btn { margin-top: auto; padding-top: 8px; font-size: 11px; align-self: flex-start; }

/* ---------- 爱的账单：归属次数 ---------- */
.cp-attrib-nums { display: flex; flex-direction: column; gap: 7px; }
.cp-attrib-cell {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text-2);
}
.cp-attrib-cell i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ac, var(--brand)); flex: none;
}
.cp-attrib-cell b { color: var(--text); font-variant-numeric: tabular-nums; }
.cp-attrib-line {
  margin-top: 12px; padding-top: 11px;
  border-top: 1px dashed var(--line);
  font-size: 12px; color: var(--text-2); text-align: center;
}

/* ---------- 双心合拢：按进度靠近 ---------- */
.cp-vault-hearts { --gap: 124px; }
.cp-heart--l { left: calc(50% - 13px - var(--gap) / 2); }
.cp-heart--r { right: calc(50% - 13px - var(--gap) / 2); }
.cp-vault-cap {
  margin-top: 7px; font-size: 11.5px; line-height: 1.5;
  color: var(--text-3); text-align: center;
}
.cp-vault-hearts.is-done .cp-heart--big {
  position: static; font-size: 40px;
  animation: cpBoom .7s var(--ease) both;
}
@keyframes cpBoom {
  0% { transform: scale(.4); opacity: 0; }
  55% { transform: scale(1.22); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 尊重「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
  .cp-heart, .cp-vault-bar i { transition: none; }
  .cp-vault-hearts.is-done .cp-heart--big { animation: none; }
  .attrib-note { animation: none; opacity: .6; }
}

/* ============================================================
 * 情侣账单（独立页面）
 * 这是「情侣」栏里自己的一页，跟「记一笔」的个人账目完全分开
 * ============================================================ */

/* ---------- 主页里的账单入口 ---------- */
/* 「TA 刚记了 N 笔」：同步拉完的第一眼提示。
   一条细带子，不是卡片 —— 它只是「有更新」的指路牌，不该抢内容的视觉重量。
   间距用 -6px：.cp-head 底下有 16px padding，再顶 12px 会断开成一截悬空的盒子。 */
.cp-peernew {
  width: 100%; display: flex; align-items: center; gap: 8px;
  margin: -6px 0 12px; padding: 9px 12px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  background: color-mix(in srgb, var(--brand) 7%, transparent);
  color: var(--brand); font-family: inherit; font-size: 12.5px; font-weight: 600;
  text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: cpPeerIn .28s var(--ease);
}
.cp-peernew-dot {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}
.cp-peernew-txt { flex: 1; min-width: 0; }
.cp-peernew-txt b { font-weight: 800; font-variant-numeric: tabular-nums; }
.cp-peernew-go {
  flex: none; display: inline-flex; align-items: center; gap: 2px;
  font-size: 11.5px; font-weight: 600; color: var(--text-3);
}
.cp-peernew-go svg { width: 12px; height: 12px; }
.cp-peernew:active { background: color-mix(in srgb, var(--brand) 11%, transparent); }
@keyframes cpPeerIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-peernew { animation: none; }
}

.cp-bill-entry {
  display: flex; align-items: stretch; gap: 0;
  background: var(--card); border-radius: var(--radius);
  border: 1px solid var(--line); overflow: hidden;
  margin-bottom: 12px;
}
.cp-bill-entry-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  padding: 15px 6px 15px 16px; text-align: left;
  background: none; border: none;
  -webkit-tap-highlight-color: transparent;
}
.cp-bill-entry-ic {
  width: 42px; height: 42px; border-radius: 14px; flex: none;
  display: grid; place-items: center; font-size: 20px;
  background: rgba(255,106,155,.13);
}
.cp-bill-entry-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cp-bill-entry-title { font-size: 14.5px; font-weight: 650; color: var(--text); }
.cp-bill-entry-sub { font-size: 11.5px; color: var(--text-3); }
.cp-bill-entry-add {
  width: 54px; flex: none; display: grid; place-items: center;
  background: none; border: none; border-left: 1px solid var(--line);
  color: var(--brand); -webkit-tap-highlight-color: transparent;
}
.cp-bill-entry-add:active { background: var(--brand-soft); }

/* ---------- 账单页 ---------- */
.cp-bill { padding-bottom: 24px; }

.cp-bill-bar {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 14px;
}
.cp-bill-nav {
  width: 34px; height: 34px; flex: none; border-radius: 11px;
  display: grid; place-items: center; border: 1px solid var(--line);
  background: var(--card); color: var(--text-2);
}
.cp-bill-nav:disabled { opacity: .35; }
.cp-bill-month {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; flex: none; padding: 0 11px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--card); font-size: 13px; font-weight: 600; color: var(--text);
}
.cp-bill-now {
  font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 6px;
  background: var(--brand-soft); color: var(--brand);
}

.cp-bill-hero {
  text-align: center; padding: 18px 16px 20px;
  background: var(--card); border-radius: var(--radius);
  border: 1px solid var(--line); margin-bottom: 12px;
}
.cp-bill-hero-label { font-size: 11.5px; color: var(--text-3); }
.cp-bill-hero-val {
  font-size: 30px; font-weight: 700; letter-spacing: -.5px;
  margin: 7px 0 6px; font-variant-numeric: tabular-nums;
}
.cp-bill-hero-sub { font-size: 11.5px; color: var(--text-3); }
.cp-bill-hero-sub b { color: var(--text-2); }
/* 账单页「收到 TA 的红包」行：我的收入，支出合计之外单独亮出来 */
.cp-bill-rpin {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding: 9px 13px;
  border-radius: 12px; background: rgba(255, 106, 155, .08);
  font-size: 12px; color: var(--text-2);
}
.cp-bill-rpin b {
  font-size: 14px; font-weight: 750; color: var(--income);
  font-variant-numeric: tabular-nums;
}

.cp-bill-tabs {
  display: flex; gap: 6px; margin: 2px 0 12px;
  padding: 3px; background: var(--bg-2); border-radius: 12px;
}
.cp-bill-tab {
  flex: 1; height: 30px; border-radius: 9px; border: none;
  background: none; font-size: 12.5px; color: var(--text-2);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.cp-bill-tab.on { background: var(--card); color: var(--brand); font-weight: 600; }

.cp-bill-day { margin-bottom: 14px; }
.cp-bill-day-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 3px 7px; font-size: 11.5px; color: var(--text-3);
}
.cp-bill-day-sum { font-variant-numeric: tabular-nums; }

.cp-bill-row {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; text-align: left;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 15px; margin-bottom: 8px;
  -webkit-tap-highlight-color: transparent;
}
.cp-bill-row:active { background: var(--card-2); }
.cp-bill-avatar {
  width: 40px; height: 40px; border-radius: 13px; flex: none;
  display: grid; place-items: center; font-size: 19px;
}
/* 分类图标换成手绘 SVG（红包）后不吃 font-size，尺寸由这行给；emoji 不受影响 */
.cp-bill-avatar .cat-ic { width: 22px; height: 22px; }
/* 记账弹层里选了「红包」：提示语换成粉色，和图标、偏爱卡同一个色 */
.cbe-hint.is-red { color: var(--cp-pink); font-weight: 650; }
.cp-bill-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cp-bill-name {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  font-size: 13.5px; font-weight: 600; color: var(--text);
}
.cp-bill-attrib {
  font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 6px;
  color: var(--ac); background: color-mix(in srgb, var(--ac) 13%, transparent);
  background: var(--bg-2);
}
.cp-bill-meta {
  font-size: 11px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-bill-amt {
  flex: none; font-size: 15px; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.cp-bill-amt.out { color: var(--text); }
.cp-bill-amt.in { color: var(--income); }

.cp-bill-foot { margin-top: 16px; }
.cp-bill-foot .btn { width: 100%; }

/* ---------- 记账弹层 ---------- */
.cbe-amount {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 2px 16px;
}
.cbe-cur { font-size: 22px; font-weight: 600; color: var(--text-3); }
.cbe-input {
  flex: 1; min-width: 0; border: none; background: none;
  font-size: 34px; font-weight: 700; letter-spacing: -.5px;
  color: var(--text); font-variant-numeric: tabular-nums;
  padding: 0;
}
.cbe-input::placeholder { color: var(--text-3); opacity: .5; }
/* 大号金额框不要 index.html 那条「品牌色焦点环」：它在 34px 数字外面
   会画出一个明显的圆角方框，像输入框而不是「¥ 数字」。
   但 m02799 起要让用户看得出「点中了、键盘该出来了」——
   金额框自己没边框没背景，聚焦时完全没有视觉，用户会当成没反应。
   所以改成：聚焦时把前面的 ¥ 染成主色、数字本身提一档亮度。
   光标仍在，键盘用户也不会失去焦点位置。 */
.cbe-input:focus,
.cbe-input:focus-visible,
.crs-input:focus,
.crs-input:focus-visible { box-shadow: none !important; }
.cbe-amount:focus-within .cbe-cur,
.crs-amount:focus-within .crs-cur { color: var(--brand, #4F7CFF); }
.cbe-input:focus, .cbe-input:focus-visible { color: var(--text); }
.cbe-label {
  font-size: 11.5px; font-weight: 600; color: var(--text-3);
  margin: 16px 0 9px;
}
.cbe-cat {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 14px;
  background: var(--card-2); border: 1px solid var(--line);
  text-align: left;
}
.cbe-cat-ic {
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  display: grid; place-items: center; font-size: 17px;
}
.cbe-cat-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; }
.cbe-note {
  width: 100%; padding: 12px 14px; border-radius: 14px;
  background: var(--card-2); border: 1px solid var(--line);
  font-size: 13px; color: var(--text);
}
.cbe-hint {
  margin-top: 9px; font-size: 11px; color: var(--text-3);
  min-height: 15px;
}
/* 补记时告诉用户「这笔记在哪天」——没有它，弹层和平时记账长得一模一样，
   用户会怀疑是不是补到了今天。 */
.cbe-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin: -6px 0 2px; padding: 5px 10px; border-radius: 9px;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  color: var(--brand); font-size: 11.5px; font-weight: 650;
}
.cbe-back .ic, .cbe-back svg { width: 13px; height: 13px; flex: none; }
.cbe-del {
  margin-top: 18px; width: 100%; height: 42px; border-radius: 13px;
  border: 1px solid rgba(255,90,95,.35); background: rgba(255,90,95,.09);
  color: var(--expense); font-size: 13px; font-weight: 600;
}
.cbe-del.is-hidden { display: none; }

/* 弹层底部那两个附加入口：「这笔退回来了」「收了一笔」。
   以前只写了 class、没有样式，全局 button 重置把背景和边框都清了，
   于是它们在界面上就是一串黑字 —— 用户根本看不出能点（用户 m03602 反馈）。
   现在给成和 .cbe-cat 同一族的胶囊按钮：有底色、有描边、有最小高度，
   两个并排时各占一半，单独一个时占满整行。 */
.cbe-links { display: flex; gap: 8px; margin-top: 18px; }
.cbe-links--new { margin-top: 14px; }
.cbe-link {
  flex: 1 1 0; min-width: 0; height: 42px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  /* 用主色染色而不是中性色：中性底 + 细边和上面「备注」输入框长得几乎一样，
     用户会当成又一条输入框；染成品牌色才一眼是「按的」。
     只染 8%，不抢「记下来」那个主按钮。 */
  border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  color: var(--brand);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .16s var(--ease), transform .12s var(--ease);
}
.cbe-link .ic, .cbe-link svg { width: 13px; height: 13px; flex: none; }
.cbe-link:active { transform: scale(.98); background: color-mix(in srgb, var(--brand) 16%, transparent); }
.cbe-link:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }


/* ---------- 退款 / 收了一笔 / 补记偏爱 三个弹层 ----------
   它们原先只有结构（.crs-* / .cis-*），没有样式：金额框是裸 input，
   两个选项是浏览器默认按钮。这里补齐一套，尺寸全部对齐 .cbe-*，
   不引入新的字号和圆角。 */
.crs-src {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 13px; border-radius: 14px;
  background: var(--card-2); border: 1px solid var(--line);
}
.crs-src-ic {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; font-size: 19px;
}
.crs-src-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.crs-src-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crs-src-sub { font-size: 11px; color: var(--text-3); }

.crs-opt { display: flex; gap: 8px; margin-top: 14px; }
.crs-opt-btn {
  flex: 1; min-width: 0; text-align: left;
  padding: 11px 12px; border-radius: 14px;
  background: var(--card-2); border: 1px solid var(--line);
  font-family: inherit; cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.crs-opt-btn.on {
  border-color: color-mix(in srgb, var(--brand) 48%, var(--line));
  background: color-mix(in srgb, var(--brand) 8%, var(--card-2));
}
.crs-opt-name { display: block; font-size: 13px; font-weight: 650; color: var(--text); }
.crs-opt-sub { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.5; color: var(--text-3); }

.crs-part { margin-top: 14px; }
.crs-part-label { font-size: 11.5px; font-weight: 600; color: var(--text-3); margin-bottom: 7px; }
.crs-amount {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 2px 10px;
}
.crs-cur { font-size: 22px; font-weight: 600; color: var(--text-3); }
.crs-input {
  flex: 1; min-width: 0; border: none; background: none; padding: 0;
  font-size: 32px; font-weight: 700; letter-spacing: -.5px;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.crs-input::placeholder { color: var(--text-3); opacity: .5; }
.crs-hint { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.crs-note {
  margin-top: 14px; padding: 10px 12px; border-radius: 12px;
  background: var(--bg-2);
  font-size: 11.5px; line-height: 1.6; color: var(--text-3);
}

.cis-lead {
  font-size: 12px; line-height: 1.7; color: var(--text-2);
  margin-bottom: 4px;
}
.cis-goals { display: flex; flex-direction: column; gap: 7px; }
.cis-goal {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 13px;
  background: var(--card-2); border: 1px solid var(--line);
  font-family: inherit; text-align: left; cursor: pointer;
}
.cis-goal.on { border-color: color-mix(in srgb, var(--cp-pink) 48%, var(--line)); background: color-mix(in srgb, var(--cp-pink) 8%, var(--card-2)); }
.cis-goal-ic { flex: none; font-size: 18px; }
.cis-goal-name {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cis-goal-val { flex: none; font-size: 12px; font-weight: 650; color: var(--text-2); font-variant-numeric: tabular-nums; }

.cp-attrib-say {
  font-size: 11px; color: var(--text-3);
}

/* 暗色下入口块更暗一点，避免和卡片糊在一起 */
[data-theme="dark"] .cp-bill-entry-ic { background: rgba(255,106,155,.2); }

/* 账单页顶部：返回气泡 + 月份切换 */
.cp-bill-spacer { flex: 1; }

/* ---------- 返回气泡（账单页 / 模式切换页 / 两个子页共用） ---------- */
/* 只有一个圆角方块 + 一个左尖角，不放「返回」两个字：
   手机上一眼就知道是退回去，省出来的宽度留给标题 */
.cp-back--bub {
  width: 34px; height: 34px; padding: 0; flex: none;
  /* 箭头要对准方块正中：grid 居中 + 图标本身没有额外偏移 */
  display: grid;
  place-items: center;
  grid-auto-flow: column;
  align-content: center;
  justify-content: center;
  line-height: 0;
  border: 1px solid var(--line) !important;
  border-radius: 11px !important;
  background: var(--card) !important;
  color: var(--text-2) !important;
  font-size: 0;
  box-shadow: 0 1px 2px rgba(20, 28, 50, .05);
  transition: transform .16s ease, background .16s ease, color .16s ease;
  -webkit-tap-highlight-color: transparent;
}
/* 图标框等于方块内径，箭头在自己的 viewBox 里居中 */
.cp-back--bub svg {
  display: block;
  width: 18px; height: 18px;
  margin: 0;
  transform: none !important;
}
.cp-back--bub:active {
  transform: scale(.92);
  background: var(--card-2);
  color: var(--text);
}
.cp-back--bub:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
[data-theme="dark"] .cp-back--bub {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
@media (prefers-reduced-motion: reduce) {
  .cp-back--bub { transition: none; }
  .cp-back--bub:active { transform: none; }
}

/* ---------- 子页（回忆小票墙 / 重要日子） ---------- */
.cp-sub { padding-bottom: 8px; }
.cp-sub-top {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.cp-back {
  display: inline-flex; align-items: center; gap: 3px;
  height: 34px; padding: 0 9px 0 4px; border-radius: 11px;
  border: none; background: none; color: var(--text-2); font-size: 12.5px;
  -webkit-tap-highlight-color: transparent;
}
.cp-back svg { transform: rotate(90deg); }
.cp-sub-top .cp-back--bub,
.cp-onboard-top .cp-back--bub { padding: 0; }
.cp-sub-title { font-size: 14px; font-weight: 700; }

.cp-sub-hero {
  padding: 18px 16px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255,106,155,.14), rgba(124,92,255,.1));
  border: 1px solid rgba(255,106,155,.22);
  text-align: center; margin-bottom: 14px;
}
.cp-sub-hero-label { font-size: 11.5px; color: var(--text-2); }
.cp-sub-hero-val {
  margin-top: 6px;
  font-size: 32px; font-weight: 800; letter-spacing: -1px;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.cp-sub-hero-unit { font-size: 15px; font-weight: 650; color: var(--text-2); }
.cp-sub-hero-sub { margin-top: 6px; font-size: 11.5px; color: var(--text-3); }

.cp-sub-empty { padding: 46px 20px; text-align: center; }
.cp-sub-empty-ic { font-size: 34px; opacity: .55; }
.cp-sub-empty-txt { margin-top: 12px; font-size: 12.5px; color: var(--text-3); }

/* 回忆小票：两列 */
.cp-mem-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.cp-mem {
  position: relative;
  padding: 13px 12px 11px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
  -webkit-tap-highlight-color: transparent;
}
.cp-mem::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 0;
  height: 5px;
  background:
    radial-gradient(circle at 3px 5px, var(--bg) 3px, transparent 3px)
    0 0 / 10px 5px repeat-x;
  opacity: .9; pointer-events: none;
}
.cp-mem-ic {
  width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center;
  color: var(--mc, var(--brand));
  background: color-mix(in srgb, var(--mc, #8D97AB) 13%, transparent);
}
.cp-mem-amt {
  margin-top: 9px;
  font-size: 19px; font-weight: 780; letter-spacing: -.4px;
  font-variant-numeric: tabular-nums;
}
.cp-mem-cat { margin-top: 3px; font-size: 11px; color: var(--text-2); }
.cp-mem-note {
  margin-top: 2px; font-size: 10.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-mem-date { margin-top: 7px; font-size: 10px; color: var(--text-3); }

/* 重要日子：时间轴 */
.cp-day-list { display: flex; flex-direction: column; gap: 8px; }
.cp-day {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 13px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
}
.cp-day-dot { font-size: 17px; line-height: 1; flex: none; }
.cp-day-main { flex: 1; min-width: 0; }
.cp-day-name { font-size: 13px; font-weight: 700; }
.cp-day-date { margin-top: 2px; font-size: 10.5px; color: var(--text-3); }
.cp-day-tag {
  flex: none; font-size: 10.5px; font-weight: 650;
  padding: 3px 8px; border-radius: 999px;
  background: var(--bg-2); color: var(--text-3);
}
.cp-day.is-past { opacity: .62; }
.cp-day--start {
  border-color: rgba(255,106,155,.32);
  background: linear-gradient(135deg, rgba(255,106,155,.1), transparent);
}
.cp-day--start .cp-day-tag { background: rgba(255,106,155,.16); color: #FF6A9B; }

/* 重新打开入口 */
.cp-card--resume {
  border-color: rgba(255,106,155,.3) !important;
  background: linear-gradient(135deg, rgba(255,106,155,.1), rgba(124,92,255,.06)) !important;
}

/* 可点的模块卡 */
.cp-mod--tap { -webkit-tap-highlight-color: transparent; text-align: left; }
.cp-mod--tap:active { transform: scale(.985); }

/* ---------- TA 时区面板 ---------- */
.cp-mod-desc--dim { opacity:.62; font-size:11.5px; margin-top:1px; }
.cp-tz-lead { font-size:12.5px; line-height:1.65; color:var(--text-3); margin:0 0 12px; }
.cp-tz-list { display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow-y:auto;
  -webkit-overflow-scrolling:touch; padding-right:2px; }
.cp-tz-row { display:flex; align-items:center; gap:10px; width:100%; border:1px solid var(--line);
  border-radius:13px; background:var(--card); padding:11px 13px; font-family:inherit;
  text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.cp-tz-row.on { border-color:transparent; background:color-mix(in srgb, var(--brand) 10%, var(--card)); }
.cp-tz-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.cp-tz-name { font-size:13.5px; font-weight:600; color:var(--text); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.cp-tz-sub { font-size:11.5px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.cp-tz-check { flex:none; width:18px; display:grid; place-items:center; color:var(--brand); }
.cp-tz-foot { padding:14px 0 4px; }
.cp-tz-foot .btn { width:100%; }

/* ---------- 存钱记录入口 ---------- */
.cp-logs-entry {
  display:flex; align-items:center; gap:12px; width:100%;
  margin:10px 0 0; padding:14px 15px; border:0;
  border-radius:18px; background:var(--card); text-align:left;
  font-family:inherit; cursor:pointer; box-shadow:var(--shadow-sm);
  -webkit-tap-highlight-color:transparent;
  transition:transform .14s var(--ease), box-shadow .14s var(--ease);
}
.cp-logs-entry:active { transform:scale(.985); }
.cp-logs-entry-ic {
  flex:none; width:38px; height:38px; border-radius:13px;
  display:grid; place-items:center; font-size:18px;
  background:linear-gradient(135deg, rgba(255,106,155,.16), rgba(124,92,255,.14));
}
.cp-logs-entry-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.cp-logs-entry-title { font-size:14px; font-weight:650; color:var(--text); }
.cp-logs-entry-sub { font-size:11.5px; line-height:1.45; color:var(--text-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-logs-entry-go { flex:none; color:var(--text-3); display:grid; place-items:center; }

/* ---------- 存钱记录列表 ---------- */
.cp-log-list { display:flex; flex-direction:column; gap:0; }
.cp-log {
  display:flex; align-items:center; gap:11px; padding:12px 4px;
  border-bottom:1px solid var(--line);
}
.cp-log:last-child { border-bottom:0; }
.cp-log-dot {
  flex:none; width:8px; height:8px; border-radius:50%;
  background:var(--income); box-shadow:0 0 0 3px color-mix(in srgb, var(--income) 15%, transparent);
}
.cp-log-dot.is-out { background:var(--expense); box-shadow:0 0 0 3px color-mix(in srgb, var(--expense) 15%, transparent); }
.cp-log-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.cp-log-name { font-size:13.5px; font-weight:600; color:var(--text); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-log-auto { margin-left:5px; padding:1px 5px; border-radius:6px; font-size:10px; font-weight:600;
  background:var(--brand-soft, rgba(79,124,255,.14)); color:var(--brand); }
.cp-log-sub { font-size:11px; color:var(--text-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-log-amt { flex:none; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--income); }
.cp-log-amt.is-out { color:var(--expense); }

/* ---------- 定目标的截止日期 ---------- */
.cv-dl { margin-top:16px; padding:13px 14px; border-radius:16px; background:var(--bg-2); }
.cv-dl-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cv-dl-label { font-size:12.5px; font-weight:600; color:var(--text-2); }
.cv-dl-label b { margin-left:4px; font-size:10.5px; font-weight:500; color:var(--text-3); }
.cv-dl-pick {
  display:inline-flex; align-items:center; gap:2px; flex:none;
  height:32px; padding:0 4px 0 13px; border:0; border-radius:16px;
  background:var(--card); color:var(--brand); font-family:inherit;
  font-size:12.5px; font-weight:650; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.cv-dl-pick:active { transform:scale(.96); }
.cv-dl-hint { margin-top:8px; font-size:11px; line-height:1.5; color:var(--text-3); }

/* ============================================================
 * 关闭 / 隐藏 / 删除 / 多本账本
 *
 * 这一组的底色是「不吓人」。关闭和删除长得完全不一样：
 * 关闭的主按钮永远是「再想想」，删除的按钮是红的、而且只出现在最后一屏。
 * ============================================================ */

/* 底栏收起态：心还是实心的，只是这一格退到后面 */
.tab--couple.is-hidden .tab-ic { opacity: .45; }
.tab--couple.is-hidden .tab-txt { color: var(--text-3); }

/* ---------- 关账/删除的问答弹层 ---------- */
.cpq { padding: 4px 2px 2px; }
.cpq-title {
  font-size: 18px; font-weight: 700; line-height: 1.4;
  color: var(--text); letter-spacing: -.2px;
}
.cpq-desc {
  margin-top: 9px; font-size: 13.5px; line-height: 1.68; color: var(--text-2);
}
.cpq-desc--soft { margin-top: 12px; font-size: 12.5px; color: var(--text-3); }
.cpq-note {
  margin-top: 14px; padding: 11px 13px; border-radius: 13px;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  font-size: 12.5px; line-height: 1.5; font-weight: 600; color: var(--brand);
}
.cpq-ic {
  font-size: 34px; line-height: 1; text-align: center; margin: 6px 0 14px;
}
.cpq--after .cpq-title { text-align: center; }
.cpq--after .cpq-desc { text-align: center; }

.cpq-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.cpq-opt {
  display: block; width: 100%; padding: 14px 16px; border: 0;
  border-radius: 15px; background: var(--bg-2); color: var(--text-2);
  font-family: inherit; font-size: 13.5px; font-weight: 600; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .16s ease, color .16s ease, transform .16s var(--ease);
}
.cpq-opt:active { transform: scale(.985); background: var(--line); }

.cpq-acts { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.cpq-acts .btn { width: 100%; height: 46px; border-radius: 23px; font-size: 15px; }
.cpq-acts .cpq-main { order: 1; }
.cpq-acts .cpq-sub { order: 2; }
.cpq-danger { color: var(--expense) !important; }
.btn--danger {
  background: color-mix(in srgb, var(--expense) 12%, transparent) !important;
  color: var(--expense) !important; box-shadow: none !important;
}
.btn--danger:disabled { color: var(--text-3) !important; background: var(--bg-2) !important; }

/* 「不再需要它了」：故意做得很淡、很靠下，不做成按钮 */
.cpq-del {
  display: block; width: 100%; margin-top: 20px; padding: 10px;
  border: 0; background: none; color: var(--text-3);
  font-family: inherit; font-size: 11.5px; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cpq-del:active { color: var(--expense); }

.cpq-input {
  display: block; width: 100%; margin-top: 18px; padding: 13px 15px;
  border: 1.5px solid var(--line); border-radius: 15px;
  background: var(--bg-2); color: var(--text);
  font-family: inherit; font-size: 16px; letter-spacing: 2px; text-align: center;
}
.cpq-input::placeholder { color: var(--text-3); letter-spacing: 2px; }

/* ---------- 历史账本列表 ---------- */
.cpb { padding: 2px 0; }
.cpb-lead { font-size: 12.5px; line-height: 1.6; color: var(--text-3); margin-bottom: 14px; }
.cpb-list { display: flex; flex-direction: column; gap: 8px; }
.cpb-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 15px; border: 1px solid var(--line); border-radius: 17px;
  background: var(--card); text-align: left; font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--ease), border-color .16s ease;
}
.cpb-row:active { transform: scale(.985); }
.cpb-row.is-on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 5%, var(--card)); }
.cpb-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cpb-row-name {
  display: flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 650; color: var(--text);
}
.cpb-now {
  flex: none; padding: 2px 7px; border-radius: 7px; font-style: normal;
  font-size: 10px; font-weight: 700; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}
.cpb-row-sub {
  font-size: 11.5px; line-height: 1.5; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cpb-row-go { flex: none; color: var(--text-3); display: flex; }
.cpb-empty { padding: 30px 0; text-align: center; font-size: 12.5px; line-height: 1.7; color: var(--text-3); }
.cpb-empty-sub { font-size: 11.5px; color: var(--text-3); opacity: .72; }
.cpb-foot { margin-top: 18px; }
.cpb-new { width: 100%; height: 44px; border-radius: 22px; }

/* 历史账本的一行：左边点进去，右边单独「永久删除」。
   删除按钮不做成红色大按钮 —— 它常驻在列表里，天天看见红色会麻木。 */
.cpb-item {
  display: flex; align-items: stretch; gap: 6px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--card); overflow: hidden;
}
.cpb-item .cpb-row { flex: 1; min-width: 0; border: 0; background: transparent; border-radius: 0; }
.cpb-item .cpb-row:active { transform: none; background: var(--bg-2); }
.cpb-del {
  flex: none; width: 62px; border: 0; border-left: 1px solid var(--line);
  background: transparent; color: var(--text-3);
  font-size: 11.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: color .16s var(--ease), background .16s var(--ease);
}
.cpb-del:active { background: color-mix(in srgb, var(--expense) 8%, transparent); color: var(--expense); }
.cpb-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: 10px; font-weight: 600; font-style: normal; line-height: 1.6;
  color: var(--text-3); background: var(--bg-2); border-radius: 6px;
}

/* 主界面次要按钮行：收起 / 换一本，视觉上明显低于上面两个 */
.cp-btn-row--minor { margin-top: 8px; }
.cp-btn-row--minor .btn { font-size: 12px; color: var(--text-3); }
.cp-foot-alt { margin-top: 10px; width: 100%; }

/* 「历史账本」入口：用户要求「稍微隐秘一点」。
   所以它不占一整行、不是胶囊、不加边框，就是一行极小的淡字，
   放在关闭账本下面，不主动找它看不见，但知道的人一眼能找到。 */
.cp-hist-row { margin-top: 12px; text-align: center; }
.cp-hist-link {
  border: 0; background: transparent; padding: 4px 10px;
  font-family: inherit; font-size: 11.5px; font-weight: 500;
  color: var(--text-3); opacity: .78; cursor: pointer;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text-3) 34%, transparent);
  text-underline-offset: 3px;
  transition: opacity .16s var(--ease), color .16s var(--ease);
}
.cp-hist-link:active { opacity: 1; color: var(--text-2); }

/* ------------------------------------------------------------
   来自 TA 的偏爱（红包）
   一张卡片，不是列表页：红包是「被记得」的证据，一眼先看到，
   要看全部再点进去（closest('[data-cp]') 已经是 to-days）。
   颜色全部走令牌 + color-mix，深浅色自动跟随；粉色只在图标块上用一次。
   ------------------------------------------------------------ */
/* 一张卡 = 两张横条：上条「TA 给我的」，下条「我发出去的」。
   为什么不做成「行 + 底部合计」：首页那张卡在 390 宽里要装标题、两笔账、
   合计和「全部」，做成列表每条就要撑到 44px 以上，卡会滚到首屏外。
   两张横条各带自己的金额和方向，合计就写在条子右端（+27.68 / -5.20），
   一眼能读出「收了多少、发了多少」，同时卡高压到 ~124px。 */
.cp-favor {
  display: flex; flex-direction: column; gap: 7px;
  width: 100%; text-align: left;
  padding: 11px 12px 10px; margin-bottom: 12px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--cp-pink) 30%, var(--line));
  background:
    linear-gradient(155deg,
      color-mix(in srgb, var(--cp-pink) 9%, var(--card)) 0%,
      var(--card) 62%);
  font-family: inherit;
  transition: transform .14s var(--ease), border-color .18s var(--ease);
}
.cp-favor:active { transform: scale(.985); }
/* 只有「发出去了、还没收到」的时候边框淡一点，不抢别的模块 */
.cp-favor.is-empty { border-color: var(--line); background: var(--card); }

.cp-favor-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cp-favor-ic {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 7px;
  background: color-mix(in srgb, var(--cp-pink) 16%, transparent);
  color: var(--cp-pink);
}
.cp-favor-title {
  font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -.1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-favor-sum {
  margin-left: auto; flex: none;
  font-size: 13px; font-weight: 750; color: var(--cp-pink);
  font-variant-numeric: tabular-nums;
}

.cp-favor-rows { display: flex; flex-direction: column; gap: 6px; }
.cp-favor-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 11px;
  background: var(--card-2);
  min-height: 38px;
}
.cp-favor-row-ic {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--cp-pink) 14%, transparent);
  color: var(--cp-pink);
}
.cp-favor-row-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.cp-favor-row-top {
  flex: none; font-size: 12.5px; font-weight: 600; color: var(--text);
  white-space: nowrap;
}
.cp-favor-row-sub {
  flex: 1; min-width: 0;
  font-size: 11px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-favor-amt {
  flex: none; font-size: 13.5px; font-weight: 700; color: var(--cp-pink);
  font-variant-numeric: tabular-nums;
}

/* 没收到时的两行字：第一行给盼头，第二行说实话（发出去多少） */
.cp-favor-tip { font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.cp-favor-tip--dim { font-size: 11px; color: var(--text-3); }

.cp-favor-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 7px; border-top: 1px dashed var(--line);
  font-size: 11px; color: var(--text-3);
}
.cp-favor-go { display: inline-flex; align-items: center; gap: 2px; color: var(--text-2); font-weight: 600; }

/* 清单（独立「偏爱」页；首页卡片点「全部」进这里） */
.cp-sub--favor { padding-bottom: 24px; }
.cp-sub--favor .cp-favor-list { margin-top: 12px; }
.cp-favor-list {
  margin-top: 16px; padding: 13px 14px 8px;
  border-radius: 16px; border: 1px solid var(--line); background: var(--card);
}
.cp-favor-list-head { display: flex; align-items: center; gap: 7px; padding-bottom: 9px; }
.cp-favor-list-sum { margin-left: auto; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.cp-favor-hrow {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--line); cursor: pointer;
}
.cp-favor-hrow:active { opacity: .72; }
.cp-favor-hrow-ic {
  flex: none; width: 26px; height: 26px; border-radius: 9px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--cp-pink) 14%, transparent);
  color: var(--cp-pink);
}
.cp-favor-hrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-favor-hrow-top {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-favor-hrow-sub { font-size: 11px; color: var(--text-3); }
.cp-favor-hrow-amt {
  flex: none; font-size: 13px; font-weight: 650; color: var(--cp-pink);
  font-variant-numeric: tabular-nums;
}
.cp-favor-hrow-amt.is-mine { color: var(--text-3); font-weight: 600; }
/* 补记入口：藏在标题行右端，和「收到/发出」同一排，不额外占一行。
   颜色用偏爱粉、底色用 7% 混色 —— 它是这张卡的唯一写入口，但不该抢过清单。 */
.cp-favor-add {
  flex: none; display: inline-flex; align-items: center; gap: 2px;
  height: 24px; padding: 0 7px; margin-left: 2px;
  border: 1px solid color-mix(in srgb, var(--cp-pink) 32%, var(--line));
  border-radius: 12px; background: color-mix(in srgb, var(--cp-pink) 7%, transparent);
  color: var(--cp-pink); font-family: inherit; font-size: 11px; font-weight: 650;
  cursor: pointer; transition: transform .12s var(--ease), background .16s var(--ease);
}
.cp-favor-add:active { transform: scale(.94); background: color-mix(in srgb, var(--cp-pink) 14%, transparent); }
.cp-favor-empty {
  padding: 10px 0 8px; border-top: 1px dashed var(--line);
  font-size: 11.5px; line-height: 1.6; color: var(--text-3);
}
/* 空态的偏爱卡：以前空着就整卡不画，用户以为功能没做；
   现在空卡本身就是入口 —— 一句说明 + 「去补一笔」。 */
.cp-favor--empty { border-color: color-mix(in srgb, var(--cp-pink, #FF6A9B) 26%, var(--line)); }
.cp-favor--empty .cp-favor-empty {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; color: var(--text-2);
}
.cp-favor-empty-go {
  display: inline-flex; align-items: center; gap: 2px;
  font-style: normal; font-weight: 650; color: var(--cp-pink, #FF6A9B);
}
.cp-favor-list-foot {
  padding: 9px 0 2px; border-top: 1px solid var(--line);
  font-size: 10.5px; color: var(--text-3); text-align: center;
}
/* 补记弹层：复用记账弹层的金额框和归属胶囊，不另起一套尺寸 */
.cfa-add .cp-desc { margin-bottom: 12px; }
.cfa-add .cbe-label { margin-top: 14px; }
.cfa-add .attrib-chips { margin-top: 2px; }
.cfa-add .cbe-amount { padding-bottom: 6px; }

/* ------------------------------------------------------------
   日历（回忆小票墙改造成一张日历）

   像日历的三件事，都只花「结构」不花「宽度」：
     1. 一块有边界的纸（.cp-cal-board：边框 + 卡片色 + 20px 圆角）
     2. 一条把头（年月）和身子（日期）分开的「双线」—— 摘要是纸边，
        周标题行下面再压一道实线，日历本、杂志目录都是这个做法
     3. 周末两列压暗，让方格有节奏（只有颜色差，不占尺寸）
   撕页纸的装订孔 / 锯齿边每一样都要吃掉 16-24px 的横向空间，
   390px 七列本来就只有 48px 一格，所以只取「体」，不取「饰」。

   高度全部用定值（不用 aspect-ratio）：
   一周 43px（日期行 18 + 图标行 11 + 小字行 10 + 上下内边距），
   六周 258px，日历本体（含头、摘要、图例）约 350px。
   ------------------------------------------------------------ */
.cp-sub--cal { padding-bottom: 8px; }

/* 顶栏：返回 | [‹ 2026 年 10 月 ›] | 月报
   中间那组是「一个控件」，两个箭头各留 4px 内边距紧贴在标题两侧，
   所以它们看起来是挂在标题上的，而不是和左右两个按钮三等分整个宽度。 */
.cp-sub-top--cal {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0 10px;
}
.cp-cal-head { flex: 1; min-width: 0; display: flex; justify-content: center; }
.cp-cal-switch {
  display: inline-flex; align-items: center; gap: 0;
  height: 30px; padding: 0 2px; border-radius: 15px;
  background: var(--bg-2);
}
.cp-cal-nav {
  flex: none; width: 26px; height: 26px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--text-2); cursor: pointer;
  transition: background .16s var(--ease), transform .12s var(--ease);
}
.cp-cal-nav:active { transform: scale(.9); background: var(--card); }
.cp-cal-nav.is-off { opacity: .28; pointer-events: none; }
/* 「年」「月」是两个独立热区：点年选年、点月切月，左右键才负责翻月。
   外层只是排这两个热区的容器（不能是 button —— button 里套 button 不合法）。 */
.cp-cal-title {
  display: inline-flex; align-items: center; gap: 0;
  max-width: 150px; height: 30px; padding: 0 4px;
  border: 0; background: transparent;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--text);
  letter-spacing: -.2px; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 热区 44px（Apple HIG）。视觉上这行还是 30px 的胶囊带，
   多出来的 14px 靠上下各溢 7px 吃掉 —— 手指点的是 44，眼睛看的是 30。 */
.cp-cal-hit {
  display: inline-flex; align-items: center; gap: 0;
  height: 44px; margin: -7px 0; padding: 0 3px;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.cp-cal-title-num { font-size: 15px; font-weight: 750; letter-spacing: -.4px; }
.cp-cal-title-unit { font-size: 10.5px; font-weight: 600; color: var(--text-3); margin: 0 2px 0 1px; }
.cp-cal-hit:active { opacity: .6; }
.cp-cal-hit:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 8px; }

/* ---------- 选月面板：上半年份条 + 下半 3×4 月份网格 ----------
   不做 1–12 横条：560px 里 12 格横排每格只有 ~40px，手指点不准。
   3 列每格 ~169px（390 手机上也有 ~113px），高 48 —— 热区 ≥44。 */
.cp-cal-pick { padding: 2px 0 4px; }
.cp-cal-pick-lab {
  font-size: 11.5px; font-weight: 650; color: var(--text-3);
  margin: 0 2px 8px;
}
.cp-cal-pick-lab + .cp-cal-pick-lab { margin-top: 16px; }
.cp-cal-year {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none;
}
.cp-cal-year::-webkit-scrollbar { display: none; }
.cp-cal-year-i {
  flex: none; height: 40px; padding: 0 16px; border: 0; border-radius: 20px;
  background: var(--bg-2); color: var(--text-2);
  font-family: inherit; font-size: 13.5px; font-weight: 650;
  font-variant-numeric: tabular-nums; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .16s var(--ease), color .16s var(--ease), transform .12s var(--ease);
}
.cp-cal-year-i:active { transform: scale(.96); }
.cp-cal-year-i.is-on {
  background: var(--brand-grad); color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 30%, transparent);
}
/* 未来年：和日历格子同一套 is-off（灰 + 点不动） */
.cp-cal-year-i.is-off { opacity: .3; pointer-events: none; }

.cp-cal-mons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cp-cal-mon {
  height: 48px; border: 1px solid var(--line); border-radius: 13px;
  background: var(--card); color: var(--text);
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background .16s var(--ease), color .16s var(--ease), transform .12s var(--ease);
}
.cp-cal-mon:active { transform: scale(.97); }
.cp-cal-mon.is-on {
  border-color: transparent; background: var(--brand-grad); color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 30%, transparent);
}
/* 未来的月份还没到：沿用日历格子的 is-off —— 灰掉 + pointer-events:none */
.cp-cal-mon.is-off { opacity: .3; pointer-events: none; }
.cp-cal-pick-note {
  margin: 12px 2px 0; font-size: 11px; line-height: 1.5; color: var(--text-3);
}

.cp-cal-report {
  flex: none; height: 30px; padding: 0 12px; border-radius: 15px;
  border: 0; background: var(--brand-grad); color: #fff;
  font-family: inherit; font-size: 12px; font-weight: 650; cursor: pointer;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 28%, transparent);
  transition: transform .12s var(--ease);
}
.cp-cal-report:active { transform: scale(.955); }

/* 纸张本体 */
.cp-cal-board {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  padding: 0 10px 8px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent),
              0 8px 24px color-mix(in srgb, var(--brand) 6%, transparent);
  overflow: hidden;
}

/* 摘要：纸的上边缘，下面那道线就是「日历的头」和身体的接缝 */
.cp-cal-sum {
  font-size: 11px; color: var(--text-3); line-height: 1.5;
  padding: 9px 2px 8px; font-variant-numeric: tabular-nums;
}
.cp-cal-week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  padding: 0 0 5px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  font-size: 10.5px; font-weight: 600; color: var(--text-3);
}
.cp-cal-week .is-wk { color: color-mix(in srgb, var(--text-3) 70%, var(--cp-pink)); }
.cp-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px; padding-top: 5px;
}

/* 格子：定高 43px，四行结构（日期 / 图标 / 小字） */
.cp-cal-cell {
  position: relative;
  height: 43px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 1px; padding: 3px 1px 2px;
  border: 0; border-radius: 10px; background: transparent;
  font-family: inherit; cursor: pointer; overflow: hidden;
  transition: background .16s var(--ease), transform .12s var(--ease);
}
.cp-cal-cell.is-blank { cursor: default; pointer-events: none; }
/* 未来的日子：还没发生，灰掉点不动 */
.cp-cal-cell.is-future { cursor: default; pointer-events: none; opacity: .38; }
.cp-cal-cell:active:not(.is-blank):not(.is-future) { transform: scale(.93); }
.cp-cal-cell.has { background: color-mix(in srgb, var(--brand) 7%, transparent); }
/* 有特殊日子的格子：在最下面让出 10px 给小字，图标行上移 1px */
.cp-cal-cell.has-ev { padding-bottom: 1px; }
.cp-cal-cell.has-ev .cp-cal-marks { height: 10px; margin-top: 1px; }

/* ---------- 日期数字是一枚「小印章」 ----------
   改版原因（用户反馈）：以前「今天」是数字背后一块实心方块、「选中」是整格铺
   14% 透明蓝 + 1.5px 描边。整格铺底有两个毛病：
     ① 数字在 43px 的格子里靠上排，气泡却是一整格 → 视觉上数字不居中，像浮着；
     ② 「今天」的实心块比「选中」的描边更重，选完别的日子眼睛还被今天吸走。
   现在统一成「印章」语言，两种状态只有强弱差别，形状完全一致：
     今天 = 空心印章（品牌字 + 1px 描边，弱提示，不抢视线）
     选中 = 实心印章（品牌底 + 白字 + 一点点投影，最强，一眼看到自己选的是哪天）
   高度仍然是 17px，不动格子布局（has-ev 的格子刚好排满 43px）。 */
.cp-cal-num {
  display: inline-flex; align-items: center; justify-content: center;
  height: 17px; min-width: 17px; padding: 0 4px;
  border-radius: 6px;
  font-size: 12px; font-weight: 600; line-height: 17px; color: var(--text);
  font-variant-numeric: tabular-nums;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.cp-cal-cell.is-wk .cp-cal-num { color: var(--text-2); }
.cp-cal-cell.is-today .cp-cal-num {
  /* 今天用「空心印章」：品牌色字 + 一圈 1px 描边。
     和选中的「实心印章」形状一致、强弱分明 —— 一个是指个位置，一个是选中。 */
  color: var(--brand); font-weight: 750;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 46%, transparent);
}
.cp-cal-cell.is-on .cp-cal-num {
  background: var(--brand); color: #fff; font-weight: 750;
  box-shadow: 0 2px 7px color-mix(in srgb, var(--brand) 34%, transparent);
}
/* 今天正好也是选中的那天：实心印章优先，去掉「今天」那圈描边，只留投影 */
.cp-cal-cell.is-on.is-today .cp-cal-num {
  background: var(--brand); color: #fff;
  box-shadow: 0 2px 7px color-mix(in srgb, var(--brand) 34%, transparent);
}

.cp-cal-marks {
  display: flex; align-items: center; justify-content: center; gap: 1px;
  height: 11px; max-width: 100%; overflow: hidden;
}
.cp-cal-ic {
  width: 11px; height: 11px; display: flex; align-items: center; justify-content: center;
  color: var(--mc, var(--text-3));
}
/* 和记账页同一套图标（emoji 或 SVG 都能进来），只是缩小到 11px */
.cp-cal-ic .ic { width: 11px; height: 11px; }
.cp-cal-ic .cat-ic { width: 11px; height: 11px; }
.cp-cal-cell .cat-ic { font-size: 11px; }
.cp-cal-heart { font-size: 8.5px; line-height: 1; }
.cp-cal-star { font-size: 8px; line-height: 1; color: var(--accent); }

/* 小字标注：8px、单行、超长省略 —— 格子 46.3px 宽、左右各留 8px，
   8px 汉字 + 省略号一行只放得下 4 个，所以标签一律控制在 4 字内
   （「情人节」「一周年」「TA 生日」「1314天」）。超出的不换行，直接省略号。 */
.cp-cal-ev {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  width: 100%; height: 10px; overflow: hidden;
}
.cp-cal-ev-i {
  font-size: 8px; line-height: 10px; font-weight: 700; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.cp-cal-ev-i.is-pink { color: var(--cp-pink); }
.cp-cal-ev-i.is-mile {
  color: var(--brand);
  padding: 0 2px; border-radius: 3px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}
.cp-cal-ev-i.is-cake { color: var(--accent); }

/* 图例：保留原来的两句话，贴纸底边 */
.cp-cal-legend {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 4px 12px; padding: 9px 0 1px;
  margin-top: 7px; border-top: 1px dashed var(--line);
  font-size: 10px; color: var(--text-3);
}
.cp-cal-legend-i { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }

/* 某一天的简报 */
.cp-cal-brief { margin-top: 12px; }
.cp-brief {
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--card); padding: 11px 13px;
}
.cp-brief.has-ev { border-color: color-mix(in srgb, var(--cp-pink) 26%, var(--line)); }
.cp-brief-title {
  font-size: 12.5px; font-weight: 700; color: var(--text-2);
  padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 2px;
}
/* 「这天是什么日子」永远在账单上面 */
.cp-brief-evs { display: flex; flex-direction: column; gap: 6px; padding: 9px 0 4px; }
.cp-brief-ev {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 12px;
  background: color-mix(in srgb, var(--cp-pink) 9%, transparent);
}
.cp-brief-ev-ic {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--cp-pink) 16%, transparent);
  color: var(--cp-pink);
}
.cp-brief-ev-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cp-brief-ev-label { font-size: 12.5px; font-weight: 650; color: var(--text); }
.cp-brief-ev-sub { font-size: 10.5px; color: var(--text-3); }
.cp-brief-empty {
  padding: 12px 0 6px; font-size: 12.5px; color: var(--text-3); text-align: center;
}
/* 补记入口：只出现在「过去」那天的简报里。
   用虚线边而不是实心按钮 —— 它是「这天还缺一笔」的补位，不是主操作，
   别和下面那颗「记下来」抢。 */
.cp-brief-foot { margin-top: 10px; }
.cp-brief-add {
  width: 100%; height: 38px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px dashed color-mix(in srgb, var(--brand) 42%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 6%, transparent);
  color: var(--brand); font-family: inherit; font-size: 12.5px; font-weight: 650;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .16s var(--ease), transform .12s var(--ease);
}
.cp-brief-add .ic, .cp-brief-add svg { width: 12px; height: 12px; flex: none; }
.cp-brief-add:active { transform: scale(.985); background: color-mix(in srgb, var(--brand) 13%, transparent); }
.cp-brief-add:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cp-brief-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line); cursor: pointer;
}
.cp-brief-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.cp-brief-row:active { opacity: .7; }
.cp-brief-row--dep { cursor: default; }
.cp-brief-ic {
  flex: none; width: 28px; height: 28px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mc, var(--text-3)) 12%, transparent);
  color: var(--mc, var(--text-3));
}
.cp-brief-ic .cat-ic { width: 15px; height: 15px; }
.cp-brief-ic--heart { background: color-mix(in srgb, var(--expense) 12%, transparent); font-size: 13px; }
.cp-brief-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-brief-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-brief-cat { font-size: 11px; color: var(--text-3); }
.cp-brief-amt {
  flex: none; font-size: 13px; font-weight: 650; color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* TA 发给我的红包：日历当天明细里也是「收到的」，用收入色 + 号 */
.cp-brief-amt.is-in { color: var(--income); }

@media (prefers-reduced-motion: reduce) {
  .cp-cal-nav, .cp-cal-cell, .cp-cal-report { transition: none; }
  .cp-cal-nav:active, .cp-cal-cell:active, .cp-cal-report:active { transform: none; }
}

/* ------------------------------------------------------------
   月报（从日历进）
   摆事实，不考核：不设目标、不排名、不和上个月比涨跌。
   ------------------------------------------------------------ */
.cp-sub--report { padding-bottom: 24px; }
.cp-rep-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 4px 0 16px;
}
.cp-rep-stat {
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--card); padding: 13px 10px 14px; text-align: center;
}
.cp-rep-stat-label { font-size: 11px; color: var(--text-3); margin-bottom: 6px; }
.cp-rep-stat-val {
  font-size: 16px; font-weight: 750; color: var(--text);
  letter-spacing: -.4px; font-variant-numeric: tabular-nums;
  line-height: 1.2; word-break: break-all;
}
.cp-rep-stat-val span { font-size: 11px; font-weight: 600; color: var(--text-3); }
/* 月报「收到 TA 的红包」：只在我的视角出现，钱是从 TA 那儿来的 → 收入色 */
.cp-rep-rpin {
  display: flex; align-items: center; gap: 10px;
  margin: -8px 0 14px; padding: 12px 14px;
  border: 1px solid rgba(255, 106, 155, .28); border-radius: 16px;
  background: rgba(255, 106, 155, .07);
}
.cp-rep-rpin-ic { font-size: 17px; line-height: 1; }
.cp-rep-rpin-main { flex: 1; font-size: 12.5px; color: var(--text-2); }
.cp-rep-rpin-val {
  font-size: 15px; font-weight: 750; color: var(--income);
  font-variant-numeric: tabular-nums; letter-spacing: -.3px;
}
.cp-rep-block {
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--card); padding: 14px 15px; margin-bottom: 10px;
}
.cp-rep-block-title {
  font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 4px;
}
.cp-rep-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.cp-rep-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.cp-rep-row-ic {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mc, var(--brand)) 12%, transparent);
  color: var(--mc, var(--brand)); font-size: 13px;
}
.cp-rep-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cp-rep-row-name {
  font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.2;
}
.cp-rep-bar {
  display: block; height: 4px; border-radius: 2px; background: var(--bg-2); overflow: hidden;
}
.cp-rep-bar i {
  display: block; height: 100%; border-radius: 2px;
  background: var(--mc, var(--brand)); opacity: .85;
}
.cp-rep-row-val {
  flex: none; font-size: 12.5px; font-weight: 650; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.cp-rep-best { display: flex; align-items: center; gap: 10px; padding: 9px 0 2px; }
.cp-rep-best-ic {
  flex: none; width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mc, var(--text-3)) 12%, transparent);
  color: var(--mc, var(--text-3));
}
.cp-rep-best-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cp-rep-best-name {
  font-size: 13.5px; font-weight: 650; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-rep-best-sub { font-size: 11px; color: var(--text-3); }
.cp-rep-best-val {
  flex: none; font-size: 15px; font-weight: 750; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cp-rep-compare {
  margin: 2px 0 12px; padding: 13px 15px;
  border-radius: 16px; font-size: 12.5px; line-height: 1.75;
  color: var(--text-2);
  background: color-mix(in srgb, var(--brand) 6%, var(--card));
  border: 1px solid color-mix(in srgb, var(--brand) 14%, transparent);
}
.cp-rep-foot {
  margin-top: 16px; text-align: center;
  font-size: 12px; line-height: 1.8; color: var(--text-3);
}
.cp-rep-empty { padding: 56px 20px 40px; text-align: center; }
.cp-rep-empty-ic { font-size: 34px; line-height: 1; margin-bottom: 14px; opacity: .7; }
.cp-rep-empty-title { font-size: 14px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; }
.cp-rep-empty-sub { font-size: 12px; line-height: 1.75; color: var(--text-3); }

/* ============================================================
   「这笔情侣账」弹层（.cfa）
   ------------------------------------------------------------
   结构（重排后）：hero（图标 + 大字金额 + 归属/日期）→ 备注 →
   三条整行操作（再来一笔 / 改一下 / 删掉这笔，一行一个带说明）。
   以前两个 ghost 并排 + 整宽 danger，按钮挤在边上、主次靠猜；
   竖排一行一个，删除放最后且整行淡红 —— 顺眼也不易误触。
   ============================================================ */
.cfa { padding: 2px 0 4px; }

/* hero：金额当主角，大字居中 */
.cfa-hero {
  display: flex; flex-direction: column; align-items: center;
  gap: 9px; padding: 16px 12px 14px; border-radius: 16px;
  background: var(--bg-2); text-align: center;
}
.cfa-hero-ic {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--ac) 14%, var(--card));
  color: var(--ac);
}
.cfa-hero-ic .cat-ic { width: 26px; height: 26px; }
.cfa-hero-amt {
  font-size: 30px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.1;
}
.cfa-hero-amt.is-income { color: var(--income); }
.cfa-hero-cur {
  font-style: normal; font-size: 14px; font-weight: 600;
  color: var(--text-3); margin-left: 3px;
}
.cfa-hero-meta {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center;
  gap: 4px 8px; font-size: 11.5px; color: var(--text-3);
}
.cfa-amt-sign { font-size: 18px; font-weight: 700; margin-right: 1px; opacity: .7; }
.cfa-at {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px 1px 5px; border-radius: 99px;
  color: var(--ac);
  background: color-mix(in srgb, var(--ac) 12%, transparent);
  white-space: nowrap;
}
.cfa-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.cfa-when { font-variant-numeric: tabular-nums; }

.cfa-note {
  margin-top: 8px; padding: 10px 12px; border-radius: 12px;
  background: var(--bg-2); font-size: 12.5px; line-height: 1.65; color: var(--text-2);
  word-break: break-word;
}

/* 操作列表：一行一个，图标 + 主文字 + 小说明，触达面积 52px */
.cfa-list {
  margin-top: 12px; display: flex; flex-direction: column; gap: 7px;
}
.cfa-row {
  width: 100%; min-height: 54px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--card);
  display: flex; align-items: center; gap: 11px;
  padding: 8px 12px; text-align: left; cursor: pointer;
  transition: transform .14s var(--ease), background .16s ease, border-color .16s ease;
}
.cfa-row:active { transform: scale(.985); background: var(--bg-2); }
.cfa-row-ic {
  flex: none; width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--bg-2); color: var(--text-2);
}
.cfa-row-t {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
  font-size: 14px; font-weight: 650; color: var(--text);
}
.cfa-row-t i {
  font-style: normal; font-weight: 500; font-size: 11px; color: var(--text-3);
}
.cfa-row > svg:last-child { flex: none; opacity: .5; }
/* 删除行：淡红 ghost。原来是整块浅红底 + 白字，看着像「主按钮」，
   一屏里红色面积太大，反而把「删掉这笔」这个破坏性操作衬得理所当然。
   改成只有边框和文字泛红（图标底色用 expense 的 10% 透明混色）。 */
.cfa-row--del { border-color: color-mix(in srgb, var(--expense) 26%, var(--line)); }
.cfa-row--del .cfa-row-ic {
  background: color-mix(in srgb, var(--expense) 10%, transparent); color: var(--expense);
}
.cfa-row--del .cfa-row-t { color: var(--expense); }

@media (prefers-reduced-motion: reduce) {
  .cfa-row { transition: none; }
  .cfa-row:active { transform: none; }
}

/* ============================================================
 * 双人同步：状态灯 + 配对面板（view-sync.js）
 * ============================================================ */
/* 状态灯的配色在 .cp-pair--* 里（见文件上方「右上角的同步入口」），
   这里只留下同步面板本身的样式 */

.sync-wrap { padding: 2px 0 6px; }

.sync-head { display: flex; gap: 12px; align-items: flex-start; padding: 4px 2px 14px; }
.sync-head-ic {
  flex: none; width: 38px; height: 38px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}
.sync-head-txt { flex: 1; min-width: 0; }
.sync-head-title { font-size: 15px; font-weight: 650; color: var(--text); line-height: 1.35; }
.sync-head-desc { margin-top: 3px; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }

.sync-btn { width: 100%; margin-top: 10px; }
.sync-btn--danger { color: var(--expense); }

/* 「删除云端数据」：比「解除连接」更危险，但不能做得像主按钮，
   所以只留一行小字，点开还有两道确认。 */
.sync-wipe {
  display: block; width: 100%; margin-top: 12px; padding: 8px 0;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 11.5px; color: var(--text-3);
  text-decoration: underline; text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}
.sync-wipe:active { color: var(--expense); }
.sync-wipe:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

.sync-note {
  margin-top: 14px; padding: 11px 13px;
  font-size: 12px; line-height: 1.6; color: var(--text-2);
  background: var(--bg-2); border-radius: 13px;
}
.sync-note b { color: var(--text); }

/* 配对码：等宽 + 大字距，方便逐组核对 */
.sync-code {
  margin: 2px 0 4px; padding: 16px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px; line-height: 1.9; letter-spacing: .06em;
  color: var(--text); background: var(--card-2);
  border: 1px solid var(--line-2); border-radius: 14px;
  word-break: break-word; text-align: center;
  -webkit-user-select: all; user-select: all;
}

.sync-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 13px; margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; line-height: 1.7; letter-spacing: .04em;
  color: var(--text); background: var(--card-2);
  border: 1px solid var(--line-2); border-radius: 14px;
  resize: none; outline: none;
}
.sync-input:focus { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }

.sync-err {
  display: none; margin-top: 9px; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.55;
  color: var(--expense); background: var(--expense-soft);
  border-radius: 12px;
}
.sync-err.in { display: block; }

.sync-stat {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; margin-bottom: 12px;
  border-radius: 14px; background: var(--bg-2);
  font-size: 13px; color: var(--text-2);
}
.sync-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-3); }
.sync-stat--on .sync-dot { background: var(--income); }
.sync-stat--warn .sync-dot { background: var(--warn); }
.sync-stat--on .sync-stat-txt { color: var(--text); }

.sync-rows {
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line);
}
.sync-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; font-size: 13px; color: var(--text-2);
  background: var(--card);
}
.sync-row + .sync-row { border-top: 1px solid var(--line); }
.sync-row b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }