/* ============================================================
   css/chat/chat-payment.css — 红包 / 转账 / 支付三层 / 数字键盘 / 财务泡泡卡
   （管钱 V3 · 第 5 窗口全量重做；第 6 窗口只做专项微调）

   这一份的规矩（照手册 §10~§12 / §21 / §25）：
     · 颜色一律走 --money-*（css/money-tokens.css）；**这里不许再出现硬编码颜色**
     · 层级一律走 --z-money-*（面板 1620 / 小窗 1640 / 支付层 1660 / 最要紧 1690）
     · 禁系统感：无系统弹窗长相、无 emoji、无原生控件、无满屏玻璃
     · 一屏只有一个视觉主角、一个强调色、一个主要动作，其余退后
     · 动效：三档时长 + 一条缓动；**禁无限飘动装饰**（旧版 7s/6.5s 浮动已删）
     · 顶部/底部安全区各自让出
   ============================================================ */

/* ============================================================
   一、红包面板 —— 「小笺 / 蜡封 / 花瓣纸张」，不是微信红包也不是春节红包
   ============================================================ */
.red-packet-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-money-base);
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  box-sizing: border-box;
  /* iOS 加到主屏时 innerHeight 不含安全区，只写 inset:0 会留白边（长期规则 #35） */
  height: 100vh;
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  /* 外部世界压暗（不是白雾玻璃）：让信封像被托在手心里 */
  background: oklch(0.30 0.02 30 / 0.55);
  padding: calc(12px + var(--safe-top)) 0 calc(12px + var(--safe-bottom));
  font-family: var(--money-font);
}
.red-packet-overlay.open { display: flex; }

/* ---- 信封（视觉主角）----
   旧版是 250px 写死的顶部大红块 + 7 秒无限浮动 —— 一律删掉。
   现在按可用高度自适应：小屏自动矮，430 大屏也不无限长高。 */
.rp-top-area {
  width: 88%; max-width: 380px;
  flex: 0 1 auto;
  min-height: 150px;
  max-height: 38vh;
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: var(--money-radius-card) var(--money-radius-card) 0 0;
  /* 旧纸 + 蜡封的玫瑰：单色到同色系微渐变，不是高饱和红 */
  background:
    radial-gradient(120% 90% at 50% 0%, oklch(0.72 0.10 22 / 0.35), transparent 62%),
    linear-gradient(160deg,
      var(--money-accent) 0%,
      var(--money-accent-strong) 100%);
  box-shadow: var(--money-shadow-md);
  overflow: hidden;
}
/* 信封上那一道极轻的纸纹（CSS 画的，不依赖外网图片）*/
.rp-top-area::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg,
      oklch(1 0 0 / 0.045) 0 2px,
      transparent 2px 7px);
  pointer-events: none;
}
/* 蜡封（中央一枚小圆章；只有它一个装饰件，不再有角落艺术字堆叠）*/
.rp-top-area::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -13px;
  width: 26px; height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  background: oklch(from var(--money-accent-strong) calc(l - 0.10) c h);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.18), var(--money-shadow-sm);
  pointer-events: none;
}
.rp-close-btn { position: absolute; top: 8px; right: 8px; z-index: 2; }
.rp-close-btn button { color: oklch(1 0 0 / 0.8); }
.rp-close-btn svg line { stroke: currentColor; }

/* 信封上的字：中文标题为主，英文只留一行装饰 */
.rp-title-en {
  position: relative; z-index: 1;
  font-family: var(--money-font-num);
  font-style: italic;
  font-size: 15px; letter-spacing: 0.10em;
  color: var(--money-on-accent);
  opacity: 0.72;
  transform: none;                 /* 旧版 scale(1.05,1.12) 的拉伸已去掉 */
  animation: none;                 /* 旧版 7s 无限浮动已去掉 */
  text-align: center;
}
.rp-subtitle-en { display: none; }  /* 一屏只留一条装饰英文（手册 §11.1）*/
.rp-corner-tl { display: none; }    /* 角落艺术字堆叠 = 「堆」，删 */
.rp-corner-br { display: none; }

/* ---- 金额条（骑在信封下沿的纸质小卡）---- */
.rp-amount-card {
  position: absolute;
  bottom: -30px; left: 50%; transform: translateX(-50%);
  min-width: 168px; padding: 12px 24px 10px;
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center;
  border-radius: var(--money-radius-surface);
  background: var(--money-surface-solid);
  box-shadow: var(--money-shadow-md);
  z-index: 3;
}
.rp-amount-num {
  font-family: var(--money-font-num);
  font-size: 34px; font-weight: 500; line-height: 1;
  letter-spacing: -0.02em;
  color: var(--money-ink);
  font-variant-numeric: tabular-nums;
}
.rp-amount-text {
  margin-top: 4px;
  font-size: 10px; letter-spacing: 0.28em;
  color: var(--money-muted);
  text-transform: uppercase;
}

/* ---- 下方信纸（写名字 / 金额 / 封面 / 送出去）---- */
.rp-content {
  width: 88%; max-width: 380px;
  box-sizing: border-box;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  max-height: 54vh;
  padding: 54px 22px calc(22px + var(--safe-bottom));
  display: flex; flex-direction: column; gap: 18px;
  border-radius: 0 0 var(--money-radius-card) var(--money-radius-card);
  background: var(--money-surface-solid);
  box-shadow: var(--money-shadow-lg);
  position: relative;
}
/* 纸纤维纹：旧版用外网图片（国内弱网拿不到）→ 改成 CSS 画的细横纹 */
.rp-content::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 0 0 var(--money-radius-card) var(--money-radius-card);
  background: repeating-linear-gradient(0deg,
    oklch(0.55 0.02 62 / 0.018) 0 1px,
    transparent 1px 4px);
  pointer-events: none;
}
.rp-content > * { position: relative; z-index: 1; }

.rp-field {
  display: flex; flex-direction: column; gap: 3px;
  border-bottom: 1px solid var(--money-line);
  padding-bottom: 10px;
  transition: border-color var(--money-duration-base) var(--money-ease);
}
.rp-field:focus-within { border-bottom-color: var(--money-accent); }
.rp-label {
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--money-ink-soft);
  font-weight: 500;
  font-family: var(--money-font);
}
.rp-input {
  width: 100%; box-sizing: border-box;
  padding: 8px 0 2px;
  margin-top: 2px;
  border: none; border-radius: 0;
  background: transparent;
  font-family: var(--money-font);
  font-size: 15px;
  color: var(--money-ink);
  outline: none;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.rp-input::placeholder { color: var(--money-faint); }

/* ---- 第 6 窗口：红包面板上那两格「写一句 / 填金额」----
   信封封面上那一枚极淡的植物线稿（只一个装饰件，与蜡封合计两件 —— 手册 §11.1 上限 2~3 件） */
.rp-ornament {
  position: absolute;
  left: 10px; top: 50%;
  width: 46px; height: 46px;
  margin-top: -23px;
  border-radius: 50% 6% 50% 6%;
  border: 1px solid oklch(1 0 0 / 0.16);
  transform: rotate(-38deg);
  opacity: 0.75;
  pointer-events: none;
}
.rp-ornament::after {
  content: '';
  position: absolute; inset: 9px;
  border-radius: 50% 6% 50% 6%;
  border: 1px solid oklch(1 0 0 / 0.12);
}
/* 一格：标签 + 一行她自己写的字（点一下开自绘小窗；**不是原生输入框**，
   所以没有浏览器自己的聚焦外观、自动填充、以及安卓上的蓝色高亮 —— 手册 §11.1 / §12） */
.rp-write {
  display: flex; flex-direction: column; gap: 3px;
  cursor: text;
  -webkit-tap-highlight-color: transparent;
  min-height: var(--money-tap);
}
.rp-write-line {
  display: flex; align-items: center; gap: 8px;
  min-height: 34px;
  padding: 2px 0 6px;
  border-bottom: 1px solid var(--money-line);
  transition: border-color var(--money-duration-base) var(--money-ease),
              box-shadow var(--money-duration-base) var(--money-ease);
}
.rp-write:hover .rp-write-line { border-bottom-color: var(--money-accent-line); }
.rp-write-text {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--money-font);
  font-size: 15px;
  line-height: 1.4;
  color: var(--money-ink);
  overflow-wrap: anywhere;
}
.rp-write-text.is-hint { color: var(--money-faint); }
.rp-write-pen {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  color: var(--money-muted);
  display: flex; align-items: center; justify-content: center;
}
.rp-write-pen svg { width: 16px; height: 16px; }

/* 封面：4~6 个「纸张/植物/花色」小卡，不是高饱和色块 */
.rp-cover-section { display: flex; flex-direction: column; gap: 10px; }
.rp-cover-options { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.rp-cover-chip {
  width: 46px; height: 46px;
  /* ★ 显式给下限：窄屏（<370）压到 42 就不够 44px 了（第 6 窗口量尺当场量到 42×42）
     —— 360 屏上三张 44 的色卡排得下（3×44+2×10=152），不靠压尺寸换空间 */
  min-width: var(--money-tap); min-height: var(--money-tap);
  box-sizing: border-box;
  border-radius: 13px;
  border: 1.5px solid var(--money-line-faint);
  cursor: pointer;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--money-font);
  font-size: 10.5px;
  color: var(--money-ink-soft);
  box-shadow: var(--money-shadow-sm);
  transition: transform var(--money-duration-base) var(--money-ease),
              border-color var(--money-duration-base) var(--money-ease),
              box-shadow var(--money-duration-base) var(--money-ease);
}
.rp-cover-chip:hover { border-color: var(--money-accent-line); }
.rp-cover-chip:active { transform: scale(0.96); }
.rp-cover-chip.selected {
  border-color: var(--money-accent);
  box-shadow: 0 0 0 3px var(--money-accent-soft);
  transform: scale(1.03);     /* 旧版 1.07 太跳，收到 1.03 */
}
.rp-cover-chip img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; }
/* 「用自己的图」：**一枚细线小加号**，不塞三个字
   （46px 的色卡里塞「自己的图」会折成两行、压出卡外，与本页的克制基调也不搭；
    文字仍然留着当无障碍名字，只是不显示出来） */
.rp-cover-chip.add-cover {
  border: 1.5px dashed var(--money-line);
  background: transparent;
  box-shadow: none;
  color: var(--money-muted);
  font-size: 0;
  line-height: 0;
  position: relative;
}
.rp-cover-chip.add-cover::before,
.rp-cover-chip.add-cover::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}
.rp-cover-chip.add-cover::before { width: 15px; height: 1px; }
.rp-cover-chip.add-cover::after { width: 1px; height: 15px; }
/* 她自己传的那张图选中时也是同一枚色卡（不是另一套长相） */
.rp-cover-chip.own img { border-radius: 11px; }

/* 送出去（深玫瑰稳色；不是白底 + 鲜红按钮 + 金字）*/
.rp-send-btn {
  width: 100%; box-sizing: border-box;
  min-height: var(--money-tap);
  padding: 15px;
  border: none;
  border-radius: var(--money-radius-btn);
  background: var(--money-accent-strong);
  color: var(--money-on-accent);
  font-family: var(--money-font);
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--money-duration-base) var(--money-ease),
              transform var(--money-duration-fast) var(--money-ease),
              opacity var(--money-duration-base) var(--money-ease);
}
.rp-send-btn:hover { background: var(--money-accent); }
.rp-send-btn:active { transform: scale(0.98); opacity: 1; }
.rp-send-btn:disabled { opacity: 0.45; cursor: default; }

/* ============================================================
   二、转账面板 —— 「私人小笺 / 金钱信纸」，与红包同一个视觉家族
   ============================================================ */
.transfer-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-money-base);
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  box-sizing: border-box;
  background: var(--money-bg);
  color: var(--money-ink);
  font-family: var(--money-font);
  display: none; flex-direction: column;
  height: 100vh;
}
.transfer-overlay.open { display: flex; }

.tf-header-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  padding-top: calc(10px + var(--safe-top));
  flex-shrink: 0;
  background: var(--money-surface-solid);
  border-bottom: 0.5px solid var(--money-divider);
}
.tf-back-btn {
  width: var(--money-tap); height: var(--money-tap);
  border: none; background: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--money-ink);
  cursor: pointer; border-radius: var(--money-radius-btn);
  -webkit-tap-highlight-color: transparent;
  transition: background var(--money-duration-fast) var(--money-ease),
              color var(--money-duration-fast) var(--money-ease);
}
.tf-back-btn svg { width: 20px; height: 20px; }
.tf-back-btn:hover { background: var(--money-surface-soft); }
.tf-back-btn:active { color: var(--money-accent-strong); }
.tf-recipient {
  flex: 1 1 auto; min-width: 0;
  font-size: 15px; font-weight: 600;
  color: var(--money-ink);
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tf-avatar-placeholder {
  width: var(--money-tap); height: var(--money-tap);
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--money-accent-soft);
  color: var(--money-on-accent-soft);
  font-family: var(--money-font-num);
  font-size: 15px;
  overflow: hidden;
}
.tf-avatar-placeholder img { width: 100%; height: 100%; object-fit: cover; }

.tf-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 34px 22px calc(26px + var(--safe-bottom));
}
/* 一行英文装饰 + 一条金色细线（与红包同族，但更安静）*/
.tf-body::before {
  content: 'a little note';
  font-family: var(--money-font-num);
  font-style: italic;
  font-size: var(--money-fs-en);
  letter-spacing: 0.08em;
  color: var(--money-warm);
  opacity: 0.85;
}
.tf-amount-label {
  font-size: var(--money-fs-sub);
  color: var(--money-ink-soft);
  letter-spacing: 0.04em;
}
/* 金额区域给一层很淡的纸质底片（不是只有一条线）*/
.tf-amount-field {
  display: flex; align-items: baseline; gap: 2px;
  width: 100%; max-width: 320px;
  box-sizing: border-box;
  justify-content: center;
  min-height: 76px;
  padding: 10px 16px;
  border-radius: var(--money-radius-card);
  background: var(--money-surface-solid);
  border: 1px solid var(--money-line-faint);
  box-shadow: var(--money-shadow-sm);
  cursor: text;
  transition: border-color var(--money-duration-base) var(--money-ease),
              box-shadow var(--money-duration-base) var(--money-ease);
}
.tf-amount-field:hover { border-color: var(--money-accent-line); }
.tf-yuan-sign {
  font-family: var(--money-font-num);
  font-size: 24px; font-weight: 500;
  color: var(--money-muted);
}
.tf-amount-value {
  font-family: var(--money-font-num);
  font-size: 38px; font-weight: 500; line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--money-ink);
  font-variant-numeric: tabular-nums;
  min-width: 8px;
  border-bottom: none;      /* 旧版那条 2px 粗底线已去掉 */
  padding-bottom: 0;
}
.tf-amount-value.is-blank { color: var(--money-faint); }
/* 金额条里「还没填」时闪的那一小竖线 */
.tf-amount-cursor {
  width: 2px; height: 32px;
  background: var(--money-accent);
  animation: tfCaret 1.1s step-end infinite;
}
@keyframes tfCaret { 50% { opacity: 0; } }
/* 还没填钱的时候才闪那一小竖线（填了就一直亮着「￥128.00」，不再有光标乱闪） */
.tf-amount-field:has(.tf-amount-value.is-blank) .tf-amount-cursor { animation: tfCaret 1.1s step-end infinite; }
.tf-amount-field:not(:has(.tf-amount-value.is-blank)) .tf-amount-cursor { display: none; }

/* 留言：**跟随内容区宽度**（旧版写死 200px，430 屏上又窄又跟别处不是一个语言），
   点开是自绘「写一句话」小窗（不是一个原生输入框 —— 手册 §11.2 / §12） */
.tf-note-wrap {
  width: 100%; max-width: 320px;
  box-sizing: border-box;
  min-height: var(--money-tap);
  padding: 13px 15px;
  border: 1px solid var(--money-line);
  border-radius: var(--money-radius-input);
  background: var(--money-surface-solid);
  color: var(--money-ink);
  font-family: var(--money-font);
  font-size: 14px;
  text-align: center;
  cursor: text;
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--money-duration-base) var(--money-ease),
              box-shadow var(--money-duration-base) var(--money-ease);
}
.tf-note-wrap:hover { border-color: var(--money-accent-line); }
.tf-note-wrap:active { transform: scale(0.99); }
.tf-note-text {
  min-width: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
  color: var(--money-ink);
}
.tf-note-text.is-hint { color: var(--money-faint); }
/* 旧类名留着（别处还有引用它的样式判据）；新的界面不再用它 */
.tf-note-input {
  width: 100%; max-width: 320px;
  box-sizing: border-box;
  padding: 13px 15px;
  border: 1px solid var(--money-line);
  border-radius: var(--money-radius-input);
  background: var(--money-surface-solid);
  color: var(--money-ink);
  font-family: var(--money-font);
  font-size: 14px;
  outline: none;
  -webkit-appearance: none; appearance: none;
}
.tf-note-input::placeholder { color: var(--money-faint); }
.tf-body .money-submit-btn { max-width: 320px; margin-top: 6px; }

/* ============================================================
   三、数字键盘 —— 全站只有这一个长相（管钱面板、挪钱、红包、转账、支付密码共用）
   旧版「转账键盘贴边无圆角」与「管钱键盘有圆角有阴影」两套长得不一样，已统一。
   ============================================================ */
.numpad-overlay {
  position: fixed;
  bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  box-sizing: border-box;
  z-index: var(--z-money-modal);
  background: var(--money-surface-solid);
  border-top: 0.5px solid var(--money-divider);
  box-shadow: var(--money-shadow-md);
  display: none;
  padding: 8px 10px calc(8px + var(--safe-bottom));
  font-family: var(--money-font);
}
.numpad-overlay.open { display: block; }
.numpad-row { display: flex; gap: 8px; }
.numpad-row + .numpad-row { margin-top: 8px; }
.numpad-key {
  flex: 1 1 0; min-width: 0;
  /* ★ 必须显式给高度：只靠按钮内容撑，真浏览器里量出来是 0 高
     （「量尺抓到的坑」——自动化测量永远比眼看更早知道这件事），
     所以这里写死下限 --money-tap（44px），窄屏再压到 40。 */
  min-height: var(--money-tap);
  padding: 0;
  border: 1px solid var(--money-line-faint);
  border-radius: var(--money-radius-btn);
  background: var(--money-surface-solid);
  color: var(--money-ink);
  font-family: var(--money-font-num);
  font-size: 21px; font-weight: 500;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--money-duration-base) var(--money-ease),
              transform var(--money-duration-fast) var(--money-ease),
              color var(--money-duration-fast) var(--money-ease);
}
.numpad-key:hover { background: var(--money-surface-soft); }
.numpad-key:active { transform: scale(0.98); background: var(--money-accent-soft); }
.numpad-key:focus-visible { outline: 2px solid var(--money-accent); outline-offset: 2px; }
.numpad-key.empty {
  background: transparent; border-color: transparent;
  cursor: default; pointer-events: none;
}
/* 退格：线条图标（旧版是 ⌫ 字符，已换成 SVG）*/
.numpad-key.backspace { color: var(--money-ink-soft); }
.numpad-key.backspace svg { width: 22px; height: 22px; }
/* 确认键：整盘只这一个强调色，别的键都不做成按钮 */
.numpad-key.confirm {
  background: var(--money-accent-strong);
  border-color: transparent;
  color: var(--money-on-accent);
  font-family: var(--money-font);
  font-size: 15px; font-weight: 600;
}
.numpad-key.confirm:hover { background: var(--money-accent); }
.numpad-key.confirm:active { transform: scale(0.98); background: var(--money-accent-strong); }

/* ============================================================
   四、支付中 —— 半透明纸质小卡 + 细线环形进度（不是纯白 140×140 系统盒子）
   ============================================================ */
.pay-loading-overlay {
  position: fixed; inset: 0;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  z-index: var(--z-money-critical);
  background: oklch(0.22 0.02 60 / 0.42);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  font-family: var(--money-font);
}
.pay-loading-overlay.open { display: flex; }
.pay-loading-box {
  width: auto; height: auto;
  min-width: 190px;
  box-sizing: border-box;
  padding: 26px 24px 22px;
  border: 1px solid var(--money-line-faint);
  border-radius: var(--money-radius-card);
  background: var(--money-surface-solid);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  box-shadow: var(--money-shadow-lg);
  text-align: center;
}
.pay-loading-icon {
  width: 46px; height: 46px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
/* 细线环形进度（CSS 画，不用图片也不用 SVG 时钟）*/
.pay-loading-icon::before,
.pay-loading-icon::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
}
.pay-loading-icon::before { border: 2px solid var(--money-line); }
.pay-loading-icon::after {
  border: 2px solid transparent;
  border-top-color: var(--money-accent-strong);
  animation: payRing 900ms linear infinite;
}
.pay-loading-icon svg { display: none; }
@keyframes payRing { to { transform: rotate(360deg); } }
.pay-loading-text {
  /* 「正在把这份心意整理好…」比「支付中」长，给它一行半的余量与舒服的行高 */
  font-size: var(--money-fs-sub);
  line-height: 1.6;
  max-width: 210px;
  color: var(--money-ink-soft);
  text-wrap: pretty;
}
/* 三个点收进环里不需要了：环本身已经在动（手册 §22 禁连续闪烁）*/
.pay-dots { display: none; }

/* ============================================================
   五、支付密码 —— Kstar 自绘密码输入，不是银行密码支付
   ============================================================ */
.pay-password-overlay {
  position: fixed; inset: 0;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  /* iOS 加到主屏（standalone）时 innerHeight 不含安全区，只写 inset:0 会留一条白边
     （长期规则 #35）→ 明确再给一层高度。
     ★ 2028-09 修「键盘盖住面板」（甲方实锤）：老写法只写 100vh ——
       手机上键盘一弹，`100vh` 还是**键盘之前**那个高度，于是整个面板的下半截
       （正好是键盘那几十颗键）被顶到看不见的地方。现在按能力依次让位：
       先 dvh（跟随真实可视高度），不认再退 svh，最后才是 100vh。 */
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  z-index: var(--z-money-modal);
  display: none; flex-direction: column; justify-content: flex-end;
  font-family: var(--money-font);
}
.pay-password-overlay.open { display: flex; }
.pay-pw-backdrop {
  position: absolute; inset: 0;
  background: oklch(0.22 0.02 60 / 0.48);
}
.pay-pw-panel {
  position: relative;
  box-sizing: border-box;
  background: var(--money-bg);
  color: var(--money-ink);
  border-radius: var(--money-radius-card) var(--money-radius-card) 0 0;
  /* 旧版写死 66vh（横屏/超小屏被压扁）→ 改成「内容说了算，最多 92vh」 */
  max-height: 92vh;
  max-height: 92svh;
  max-height: 92dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--money-shadow-lg);
}
/* 顶部（关闭钮 + 金额）与中间那几行（付款方式 / 钱袋 / 六格）
   ★ 360×640 这种矮屏：五排键盘（每排 ≥44）加头部一共 731px，超过视口 640
   ——键盘是「输不进钱就没法用」的那部分，所以**固定不动、永不压缩**，
   中间那几行改成可滚动（矮屏上她能滑一下看全，键盘不会被顶出去）。
   量尺那条「整盘都在视口里 + 最后一行没被顶出去」就是为这个加的。 */
.pay-pw-scroll {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.pay-pw-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 6px 14px 4px;
  padding-top: calc(6px + var(--safe-top));
  flex-shrink: 0;
}
.pay-pw-header .collapse-icon-btn {
  width: var(--money-tap); height: var(--money-tap);
  border: 0; background: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--money-ink); cursor: pointer;
  border-radius: var(--money-radius-btn);
}
.pay-pw-header .collapse-icon-btn:active { color: var(--money-accent-strong); }
.pay-pw-title-area { text-align: center; flex: 1 1 auto; min-width: 0; }
.pay-pw-title {
  font-size: var(--money-fs-sub);
  color: var(--money-muted);
}
.pay-pw-amount {
  margin-top: 3px;
  font-family: var(--money-font-num);
  font-size: 32px; font-weight: 500; line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--money-ink);
  font-variant-numeric: tabular-nums;
}
.pay-pw-divider {
  height: 0.5px; background: var(--money-divider);
  margin: 10px 16px 0;
  flex-shrink: 0;
}
.pay-pw-method-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 2px 20px 0;
  flex-shrink: 0;
}
.pay-pw-method-label {
  font-size: var(--money-fs-sub);
  color: var(--money-ink-soft);
}
.pay-pw-method-change {
  /* 「换一个」是能点的：触摸目标 ≥44（第 6 窗口量尺当场量到 34px 就不算过） */
  display: flex; align-items: center; justify-content: center; gap: 4px;
  min-height: var(--money-tap);
  padding: 0 4px;
  font-size: var(--money-fs-sub);
  color: var(--money-accent-strong);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pay-pw-method-change:active { color: var(--money-accent); }

/* 当前钱袋那一行（= 自绘选择行）*/
.pay-pw-card-display {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin: 2px 20px 0;
  padding: 8px 14px;
  border: 1px solid var(--money-line-faint);
  border-radius: var(--money-radius-surface);
  background: var(--money-surface-solid);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--money-duration-base) var(--money-ease),
              background var(--money-duration-base) var(--money-ease);
}
.pay-pw-card-display:hover { border-color: var(--money-accent-line); }
.pay-pw-card-display:active { background: var(--money-surface-soft); }
.pay-pw-card-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pay-pw-card-icon {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 10px;
  background: var(--money-accent-soft);
  color: var(--money-on-accent-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pay-pw-card-icon svg { width: 18px; height: 18px; }
.pay-pw-card-icon img { width: 100%; height: 100%; object-fit: cover; }
.pay-pw-card-info {
  min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
/* 钱袋名字（她自己起的名字）+ 还剩多少：这一层一眼看得见用哪个钱袋、够不够 */
.pay-pw-card-name {
  font-size: 14px; color: var(--money-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pay-pw-card-sub {
  font-size: 11.5px; color: var(--money-muted);
  font-variant-numeric: tabular-nums;
}
.pay-pw-head-space { width: var(--money-tap); flex: 0 0 auto; }
/* 选中勾：线条 SVG（旧版是 ✓ 字符 + 硬编码 #4a8 的第三方绿）*/
.pay-pw-card-check {
  flex: 0 0 auto; width: 18px; height: 18px;
  color: var(--money-success);
}
.pay-pw-card-check svg { width: 18px; height: 18px; }

/* 六格密码：自绘方形容器 + 圆点（旧版 44×44 方盒里塞 14px 实心「●」字符）*/
.pay-pw-dots-row {
  display: flex; gap: 10px; justify-content: center;
  padding: 8px 0 2px;
  flex-shrink: 0;
}
.pay-pw-dot-box {
  width: 42px; height: 48px;
  box-sizing: border-box;
  border-radius: var(--money-radius-input);
  background: var(--money-surface-solid);
  border: 1px solid var(--money-line);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--money-duration-base) var(--money-ease),
              box-shadow var(--money-duration-base) var(--money-ease);
}
.pay-pw-dot-box.filled {
  border-color: var(--money-accent-line);
}
.pay-pw-dot-box.filled::after {
  content: '';
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--money-accent-strong);
  animation: pinPop var(--money-duration-base) var(--money-ease);
}
@keyframes pinPop {
  from { transform: scale(0.4); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}
.pay-pw-panel.is-shake { animation: payShake 380ms var(--money-ease); }
@keyframes payShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* 密码键盘：与全站数字键盘同一份长相，只多一条自己的滚动边界 */
.pay-numpad {
  flex: 0 0 auto;
  padding: 0 10px calc(8px + var(--safe-bottom));
}
.pay-numpad .numpad-row { flex: 0 0 auto; }
/* 最后一行只有一枚退格：让它只占一格宽（与金额键盘那枚退格同一个位置感） */
.pay-numpad .numpad-key.backspace { flex: 0 0 calc((100% - 16px) / 3); }
/* ★ 50 不是随便定的：360×640 上五排 50 会把最后一行顶出视口（量尺当场量到 790 > 640）。
   统一走触摸目标 44px —— 量「最后一行真的在视口里」那条判据就是为这个加上的。 */
.pay-numpad .numpad-key { min-height: var(--money-tap); }

/* ============================================================
   六、支付错误 —— 小型法式提示卡（最不能出现系统感的一层）
   旧版：「白盒 280px + 两个按钮竖排 + 上分隔线」＝ 浏览器 confirm 长相，已重做。
   ============================================================ */
.pay-error-overlay {
  position: fixed; inset: 0;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  z-index: var(--z-money-critical);
  background: oklch(0.22 0.02 60 / 0.46);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  font-family: var(--money-font);
}
.pay-error-overlay.open { display: flex; }
.pay-error-box {
  width: 100%; max-width: 316px;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 24px 20px 18px;
  border: 1px solid var(--money-line-faint);
  border-radius: var(--money-radius-card);
  background: var(--money-surface-solid);
  box-shadow: var(--money-shadow-lg);
  text-align: center;
  overflow: visible;   /* 旧版 overflow:hidden 是为了那两条分隔线，现在不要了 */
  animation: payCardIn var(--money-duration-slow) var(--money-ease);
}
@keyframes payCardIn {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
/* 一枚细线小印（不用 emoji、不用红色警告三角）*/
.pay-error-icon {
  width: 30px; height: 30px;
  margin-bottom: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--money-accent-line);
  background: radial-gradient(circle at 50% 50%,
    var(--money-accent-soft) 0 42%, transparent 43%);
}
/* 兼容：老 HTML 若还留着 ::before 那一版也不重复画 */
.pay-error-box::before { content: none; }
.pay-error-msg {
  padding: 0 0 6px;
  font-size: 14.5px; line-height: 1.65;
  color: var(--money-ink);
  /* 「这个钱袋还差 ￥12.00。」这类话不能撑到卡片外面去 */
  overflow-wrap: anywhere;
}
.pay-error-msg b { font-weight: 600; }
.pay-error-actions {
  display: flex; gap: 10px;
  width: 100%;
  margin-top: 14px;
  border-top: none;      /* 旧版那条「系统弹窗」式分隔线已去掉 */
  flex-direction: row;
}
.pay-error-action {
  flex: 1 1 0;
  box-sizing: border-box;
  min-height: var(--money-tap);
  padding: 12px 10px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--money-line);
  border-radius: var(--money-radius-btn);
  background: transparent;
  font-size: 14px;
  color: var(--money-ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--money-duration-base) var(--money-ease),
              border-color var(--money-duration-base) var(--money-ease),
              transform var(--money-duration-fast) var(--money-ease);
}
.pay-error-action:hover { background: var(--money-surface-soft); }
.pay-error-action:active { transform: scale(0.98); }
/* 只有一个出口时（网络问题的「再试一次」）就让它占满，不留一个空半格 */
.pay-error-action[hidden] { display: none; }
.pay-error-action.primary {
  border-color: transparent;
  background: var(--money-accent-strong);
  color: var(--money-on-accent);
  font-weight: 600;
}
.pay-error-action.primary:hover { background: var(--money-accent); }

/* ============================================================
   七、支付方式选择 —— 自绘列表（卡片缩略图 + 钱袋名 + 余额 + 选中态）
   ============================================================ */
.pay-method-overlay {
  position: fixed; inset: 0;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  box-sizing: border-box;
  z-index: var(--z-money-modal);
  background: var(--money-bg);
  color: var(--money-ink);
  font-family: var(--money-font);
  display: none; flex-direction: column;
  height: 100vh;
  /* 从密码层「向前展开」：整层轻轻推上前，不是硬切（手册 §11.5）*/
  animation: payMethodIn var(--money-duration-slow) var(--money-ease);
}
.pay-method-overlay.open { display: flex; }
@keyframes payMethodIn {
  from { transform: translateX(-50%) translateY(10px); opacity: 0.4; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.pay-method-top {
  display: flex; align-items: center;
  gap: 8px;
  padding: 10px 14px;
  padding-top: calc(10px + var(--safe-top));
  flex-shrink: 0;
  background: var(--money-surface-solid);
  border-bottom: 0.5px solid var(--money-divider);
}
.pay-method-back {
  width: var(--money-tap); height: var(--money-tap);
  flex: 0 0 auto;
  border: none; background: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--money-ink);
  cursor: pointer;
  border-radius: var(--money-radius-btn);
  -webkit-tap-highlight-color: transparent;
}
.pay-method-back svg { width: 20px; height: 20px; }
.pay-method-back:active { color: var(--money-accent-strong); }
.pay-method-title {
  flex: 1 1 auto; min-width: 0;
  text-align: center;
  font-size: 15px; font-weight: 600;
  color: var(--money-ink);
  margin-right: var(--money-tap);
}
.pay-method-list {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px calc(24px + var(--safe-bottom));
}
.pay-method-item {
  display: flex; align-items: center; gap: 12px;
  box-sizing: border-box;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid var(--money-line-faint);
  border-radius: var(--money-radius-surface);
  background: var(--money-surface-solid);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--money-duration-base) var(--money-ease),
              background var(--money-duration-base) var(--money-ease),
              transform var(--money-duration-fast) var(--money-ease);
}
.pay-method-item + .pay-method-item { margin-top: 10px; }
.pay-method-item:hover { border-color: var(--money-accent-line); }
.pay-method-item:active { transform: scale(0.99); }
.pay-method-item.is-current {
  border-color: var(--money-accent);
  background: var(--money-accent-soft);
}
/* 余额不够：**不在这一层禁掉**（手册 §11.5：要让她看得见还差多少、还能点进去换个钱袋）*/
.pay-method-item.is-short .pay-method-item-icon { opacity: 0.55; }
.pay-method-item-icon {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 11px;
  background: var(--money-accent-soft);
  color: var(--money-on-accent-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pay-method-item-icon svg { width: 20px; height: 20px; }
.pay-method-item-icon img { width: 100%; height: 100%; object-fit: cover; }
.pay-method-item-info { flex: 1 1 auto; min-width: 0; }
.pay-method-item-name {
  font-size: 14.5px; color: var(--money-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pay-method-item-sub {
  margin-top: 3px;
  font-size: var(--money-fs-sub);
  color: var(--money-muted);
  font-variant-numeric: tabular-nums;
}
.pay-method-item-sub.is-short { color: var(--money-danger); }
.pay-method-item-check {
  flex: 0 0 auto; width: 18px; height: 18px;
  color: var(--money-accent-strong);
}
.pay-method-item-check svg { width: 18px; height: 18px; }
/* 兼容旧类名（旧版靠 opacity .4 + pointer-events:none 禁掉，已不再使用）*/
.pay-method-item.disabled { opacity: 1; pointer-events: auto; }
.pay-method-empty {
  padding: 40px 20px;
  text-align: center;
  font-size: 13.5px;
  color: var(--money-muted);
}

/* ============================================================
   八、聊天里的财务泡泡卡 —— 像「聊天内容的一部分」，不像外部支付产品
   ============================================================ */
/* 窄屏（<370px）也不许把键盘键压到 44px 以下（实测 40px 手点会飘；
   360px 宽摆三个 21px 的数字完全放得下，不需要靠压高度换空间）。 */
.finance-card-bubble {
  background: transparent !important;
  padding: 0 !important;
  border-radius: var(--money-radius-surface) !important;
  overflow: hidden;
  max-width: 264px;
  box-shadow: var(--money-shadow-sm) !important;
}
.finance-card {
  padding: 15px 17px;
  border-radius: var(--money-radius-surface);
  border: 1px solid var(--money-line-faint);
  background: var(--money-surface-solid);
  color: var(--money-ink);
  font-family: var(--money-font);
  text-align: center;
}
/* 五态一律走令牌（旧版五套底色+字色全是硬编码，深色下会突然浮出浅绿米黄）*/
.finance-card.income            { background: var(--money-success-soft); border-color: transparent; color: var(--money-success); }
.finance-card.expense_approved  { background: var(--money-success-soft); border-color: transparent; color: var(--money-success); }
.finance-card.expense_rejected  { background: var(--money-danger-soft);  border-color: transparent; color: var(--money-danger); }
.finance-card.expense_report    { background: var(--money-surface-soft);  color: var(--money-ink-soft); }
.finance-card.expense_pending   { background: var(--money-warm-soft);     border-color: transparent; color: var(--money-on-accent-soft); }
.finance-card.is-plain          { background: var(--money-surface-solid); text-align: left; }

.fc-title {
  font-size: 11px; font-weight: 500;
  margin-bottom: 6px;
  opacity: 0.78;
  letter-spacing: 0.10em;
}
.fc-amount {
  font-family: var(--money-font-num);
  font-size: 27px; font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  /* 状态一变数字不瞬变：淡出 → 淡入 + 上浮（手册 §11.17）*/
  animation: fcAmountIn 240ms var(--money-ease);
}
@keyframes fcAmountIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.fc-reason {
  font-size: 13px; line-height: 1.5;
  opacity: 0.82;
  margin-bottom: 4px;
}
.fc-split,
.fc-reject-reason {
  font-size: 11.5px; line-height: 1.5;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--money-line-faint);
  opacity: 0.85;
}
.fc-reject-reason { font-style: italic; }

/* ---- 红包泡泡卡：信封视觉，但走「旧纸 + 蜡封 + 玫瑰」那一族 ---- */
.rp-bubble-card {
  position: relative; overflow: hidden;
  box-sizing: border-box;
  border-radius: var(--money-radius-surface); padding: 17px 15px 13px;
  text-align: center; cursor: pointer;
  min-width: 200px; max-width: 264px;
  /* 由 JS 给的行内底（每一款封面一套）在这里兜底，不再出现重红 */
  background: linear-gradient(160deg, var(--money-accent) 0%, var(--money-accent-strong) 100%);
  color: var(--money-on-accent);
  font-family: var(--money-font);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--money-duration-fast) var(--money-ease),
              opacity var(--money-duration-base) var(--money-ease);
}
.rp-bubble-card:active { transform: scale(0.97); }
.rp-bubble-card.opened { opacity: 0.8; cursor: default; }
.rp-card-pattern {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg,
    oklch(1 0 0 / 0.05) 0 2px, transparent 2px 7px);
}
.rp-card-top {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-bottom: 8px; position: relative; z-index: 1;
}
.rp-card-icon { display: flex; align-items: center; }
.rp-card-icon svg { width: 20px; height: 20px; }
.rp-card-label {
  font-size: var(--money-fs-sub);
  letter-spacing: 0.06em;
  opacity: 0.88;
}
.rp-card-amount {
  font-family: var(--money-font-num);
  font-size: 30px; font-weight: 500;
  margin: 4px 0; position: relative; z-index: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: none;      /* 旧版 0 2px 4px 黑阴影已去掉 */
  animation: fcAmountIn 240ms var(--money-ease);
}
/* 未拆的悬念（旧版金色 ●●● 低对比 + 字距 6） */
.rp-card-mystery {
  font-size: 20px; font-weight: 500;
  margin: 10px 0; position: relative; z-index: 1;
  letter-spacing: 0.22em;
  opacity: 0.6;
}
.rp-card-yuan {
  font-family: var(--money-font-num);
  font-size: 17px; font-weight: 400;
  margin-right: 2px;
  vertical-align: top;
  opacity: 0.8;
}
.rp-card-status {
  font-size: 11.5px;
  margin-top: 8px; position: relative; z-index: 1;
  opacity: 0.7;       /* 旧版白 55%，深色/浅色下都接近看不清 → 提到 0.7 */
}
/* 「拆」按钮：一整枚蜡封（不是金色发光球 + 1.5s 无限呼吸）*/
.rp-card-open-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 12px;
  width: 46px; height: 46px;
  position: relative; z-index: 1;
  border-radius: 50%;
  background: oklch(from var(--money-accent-strong) calc(l - 0.10) c h);
  color: var(--money-on-accent);
  font-family: var(--money-font);
  font-size: 14px; font-weight: 600;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.2);
  animation: none;      /* 旧版 1.5s 无限呼吸已去掉（手册 §22）*/
  transition: transform var(--money-duration-fast) var(--money-ease);
}
.rp-bubble-card:active .rp-card-open-btn { transform: scale(0.96); }

/* ---- 转账泡泡卡：纸笺 / 金额条视觉，与红包同族 ---- */
.tr-bubble-card {
  box-sizing: border-box;
  border: 1px solid var(--money-line-faint);
  border-radius: var(--money-radius-surface);
  background: var(--money-surface-solid);
  color: var(--money-ink);
  padding: 15px 15px 12px;
  text-align: center; cursor: pointer;
  min-width: 200px; max-width: 264px;
  font-family: var(--money-font);
  box-shadow: var(--money-shadow-sm);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--money-duration-fast) var(--money-ease),
              opacity var(--money-duration-base) var(--money-ease);
}
.tr-bubble-card:active { transform: scale(0.97); }
.tr-bubble-card.confirmed { opacity: 0.78; cursor: default; }
.tr-bubble-card.returned { opacity: 0.6; cursor: default; }
.tr-card-top {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-bottom: 8px;
}
.tr-card-icon { display: flex; align-items: center; color: var(--money-accent-strong); }
.tr-card-icon svg { width: 18px; height: 18px; }
.tr-card-label {
  font-size: var(--money-fs-sub);
  color: var(--money-ink-soft);
  letter-spacing: 0.06em;
}
.tr-card-amount {
  font-family: var(--money-font-num);
  font-size: 27px; font-weight: 500;
  margin: 4px 0;
  letter-spacing: -0.02em;
  color: var(--money-ink);
  font-variant-numeric: tabular-nums;
  animation: fcAmountIn 240ms var(--money-ease);
}
.tr-card-mystery {
  font-size: 19px; font-weight: 500;
  margin: 10px 0; letter-spacing: 0.18em;
  color: var(--money-muted);
}
.tr-card-note {
  font-size: var(--money-fs-sub); line-height: 1.5;
  color: var(--money-muted);
  margin-top: 6px;
}
.tr-card-status {
  font-size: 11.5px;
  color: var(--money-muted);
  margin-top: 6px;
}
.tr-card-actions {
  display: flex; gap: 8px;
  margin-top: 12px;
  justify-content: center;
}
.tr-confirm-btn {
  /* ≠40px：手册 §10 触摸目标一律 ≥44px（第 6 窗口量尺当场量到 40 就不算过） */
  min-height: var(--money-tap);
  padding: 0 20px;
  border: none;
  border-radius: var(--money-radius-btn);
  background: var(--money-accent-strong);
  color: var(--money-on-accent);
  font-family: var(--money-font);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--money-duration-base) var(--money-ease),
              transform var(--money-duration-fast) var(--money-ease);
}
.tr-confirm-btn:hover { background: var(--money-accent); }
.tr-confirm-btn:active { transform: scale(0.97); opacity: 1; }
.tr-return-btn {
  min-height: var(--money-tap);
  padding: 0 16px;
  border: 1px solid var(--money-line);
  border-radius: var(--money-radius-btn);
  background: transparent;
  color: var(--money-ink-soft);
  font-family: var(--money-font);
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--money-duration-base) var(--money-ease),
              border-color var(--money-duration-base) var(--money-ease),
              transform var(--money-duration-fast) var(--money-ease);
}
.tr-return-btn:hover { background: var(--money-surface-soft); border-color: var(--money-accent-line); }
.tr-return-btn:active { transform: scale(0.97); }

/* ---- 深色模式：泡泡卡/信封不再做「整张白卡突然浮出来」----
   令牌已经各定义过一份，这里只补深色下仍要压住的那两颗蜡封与强调底。 */
[data-theme-mode="dark"] .rp-top-area {
  background:
    radial-gradient(120% 90% at 50% 0%, oklch(0.62 0.09 22 / 0.30), transparent 62%),
    linear-gradient(160deg,
      oklch(0.520 0.088 22) 0%,
      oklch(0.395 0.072 22) 100%);
}
[data-theme-mode="dark"] .rp-bubble-card {
  background: linear-gradient(160deg,
    oklch(0.520 0.088 22) 0%,
    oklch(0.395 0.072 22) 100%);
  color: oklch(0.940 0.010 84);
}
[data-theme-mode="dark"] .tr-bubble-card {
  background: var(--money-surface-solid);
  border-color: var(--money-line-faint);
}
[data-theme-mode="dark"] .tr-card-amount { color: var(--money-ink); }

/* ============================================================
   九、详情弹窗 —— 查看为主，不像「改账本」
   （层级提到 --z-money-modal 之上：详情不许被小窝/朋友圈盖住）
   ============================================================ */
.payment-detail-overlay {
  position: fixed; inset: 0;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  box-sizing: border-box;
  z-index: var(--z-money-critical);
  background: oklch(0.22 0.02 60 / 0.44);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  font-family: var(--money-font);
  /* 开合两拍：插入时先定住透明态，下一帧加 .is-open 再淡入（防「先出现再闪一下」）*/
  opacity: 0;
  transition: opacity var(--money-duration-base) var(--money-ease);
}
.payment-detail-overlay.is-open { opacity: 1; }
.payment-detail-card {
  width: 100%; max-width: 316px;
  box-sizing: border-box;
  background: var(--money-surface-solid);
  color: var(--money-ink);
  border: 1px solid var(--money-line-faint);
  border-radius: var(--money-radius-card);
  padding: 22px 20px 18px;
  box-shadow: var(--money-shadow-lg);
  animation: payCardIn var(--money-duration-base) var(--money-ease);
  max-height: 84vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pd-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.pd-title { font-size: 15px; font-weight: 600; color: var(--money-ink); }
.pd-close {
  width: 34px; height: 34px; flex: 0 0 auto;
  border: none; background: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--money-muted);
  cursor: pointer;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--money-duration-fast) var(--money-ease),
              color var(--money-duration-fast) var(--money-ease);
}
.pd-close svg { width: 18px; height: 18px; }
.pd-close:hover { background: var(--money-surface-soft); color: var(--money-ink); }
.pd-amount {
  font-family: var(--money-font-num);
  font-size: 33px; font-weight: 500;
  text-align: center;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
  color: var(--money-ink);   /* 旧版红包 #c0392b / 转账 #e08040 硬编码已去掉 */
  font-variant-numeric: tabular-nums;
}
.pd-status {
  text-align: center;
  font-size: var(--money-fs-sub);
  color: var(--money-muted);
  margin-bottom: 16px;
}
/* 还没拆/还没表态：金额用同一份金额组件 + 一个「还不知道」的样子（不再压 6px 字距硬撑）*/
.pd-amount.is-mystery {
  color: var(--money-faint);
  letter-spacing: 0.06em;
}
/* 财务卡里的链接那一条 */
.fc-link {
  font-size: 14px; font-weight: 500;
  color: var(--money-accent-strong);
  word-break: break-all;
}
/* 已退回的转账金额：划掉 + 退后 */
.tr-card-amount-dead { text-decoration: line-through; opacity: 0.5; }
/* 详情里的加载中 / 空 / 出错（旧版打开要拉 500 条流水却没有任何等待反馈）*/
.pd-loading {
  padding: 26px 0;
  display: flex; align-items: center; justify-content: center;
}
.pd-loading-ring {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--money-line);
  border-top-color: var(--money-accent-strong);
  animation: payRing 900ms linear infinite;
}
.pd-empty {
  padding: 26px 8px;
  text-align: center;
  font-size: var(--money-fs-sub);
  line-height: 1.6;
  color: var(--money-muted);
}
.pd-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-top: 0.5px solid var(--money-divider);
}
.pd-label { font-size: var(--money-fs-sub); color: var(--money-muted); flex: 0 0 auto; }
.pd-value {
  font-size: var(--money-fs-sub); color: var(--money-ink);
  text-align: right;
  min-width: 0; max-width: 66%;
  word-break: break-word;
}

/* 金额/状态数字变化时不瞬变：淡出 → 淡入 + 上浮（手册 §11.17）*/
.pd-amount.is-updating { animation: fcAmountIn 240ms var(--money-ease); }

/* ============================================================
   十、窄屏（<370px）与减少动效
   ============================================================ */
@media (max-width: 369px) {
  .rp-top-area { min-height: 128px; max-height: 32vh; }
  .rp-content { padding: 48px 16px calc(18px + var(--safe-bottom)); gap: 14px; }
  .rp-amount-card { min-width: 150px; padding: 10px 18px 8px; }
  .rp-amount-num { font-size: 29px; }
  /* 窄屏也不许把触摸目标压到 44 以下（旧写法在这里压到 42，量尺当场判红） */
  .rp-cover-chip { width: 44px; height: 44px; min-width: var(--money-tap); min-height: var(--money-tap); }
  .tf-body { padding: 26px 16px calc(20px + var(--safe-bottom)); }
  .tf-amount-value { font-size: 32px; }
  .pay-pw-dots-row { gap: 7px; }
  .pay-pw-dot-box { width: 36px; height: 44px; }
  .pay-numpad .numpad-key { min-height: 46px; font-size: 19px; }
  .pay-method-list { padding: 12px 12px calc(20px + var(--safe-bottom)); }
  .payment-detail-overlay { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .red-packet-overlay, .transfer-overlay, .rp-cover-chip, .rp-send-btn,
  .numpad-key, .tf-note-input, .pay-method-overlay, .pay-method-item,
  .pay-error-box, .pay-error-action, .payment-detail-card, .tr-bubble-card,
  .rp-bubble-card, .tr-confirm-btn, .tr-return-btn, .pay-pw-card-display,
  .pay-pw-dot-box {
    transition: none;
    animation: none;
  }
  .tf-amount-cursor { animation: none; }
  .pay-loading-icon::after { animation: none; border-top-color: var(--money-accent-strong); }
  .pay-pw-dot-box.filled::after { animation: none; }
  .fc-amount, .tr-card-amount, .rp-card-amount, .pd-amount { animation: none; }
}