:root {
  --color-navy: #0F2A4A;
  --color-navy-light: #1B3E6B;
  --color-gold: #C9A227;
  --color-gold-light: #E4C765;
  /* 申请开卡页那个「卓越理财卡」标题的橙金色（分隔线文字 .divider-text 的同款色）：
     该页所有"金色文字"（标题、权益项、图标）统一取这个变量，保证和那五个字永远一致 */
  --color-gold-card: #E0913F;
  --color-bg: #F5F6F8;
  --color-card: #FFFFFF;
  --color-text: #1A1F29;
  --color-text-muted: #6B7280;
  --color-border: #E7E9EE;
  --color-danger: #D64545;
  /* 弹窗次要按钮（一般是"取消"）的底色：两个弹窗体系（modal-box / plain-dialog）共用这一个值，
     避免再出现"同样的取消按钮在不同弹窗里颜色不一样"的情况 —— 弹窗按钮配色只有这里一处定义 */
  --color-btn-secondary: #EDEFF5;
  --radius: 14px;
  --nav-height: 93px;
  --header-height: 56px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--color-bg);
  position: relative;
  padding-bottom: var(--nav-height);
}

/* ---------- 页面容器 ---------- */
.page {
  display: none;
  padding: 20px 16px 16px;
  animation: fadeIn 0.2s ease;
}
.page.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 首页 Banner ---------- */
.hero-banner {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 60%, var(--color-gold) 140%);
  border-radius: var(--radius);
  padding: 22px 20px;
  color: #fff;
  margin-bottom: 16px;
}
.hero-banner .label { font-size: 13px; opacity: 0.85; }
.hero-banner .amount { font-size: 30px; font-weight: 700; margin: 6px 0 2px; }
.hero-banner .sub { font-size: 12px; opacity: 0.75; }

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.quick-actions .item {
  background: var(--color-card);
  border-radius: var(--radius);
  padding: 14px 6px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.quick-actions .item .icon {
  width: 34px;
  height: 34px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: #EFF3F8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--color-navy);
}

.section-title {
  font-size: 19.5px; /* 原 15px，按要求整体加大 30%（顶部左侧标题 .card-page-header .title 和底部 .tabbar .tab 不在此列，保持原样） */
  font-weight: 600;
  margin: 18px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section-title .more {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 400;
}

.card {
  background: var(--color-card);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  padding: 14px;
  margin-bottom: 10px;
}

/* ---------- 理财产品卡片 ---------- */
.product-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-card);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  padding: 16px;
  margin-bottom: 12px;
}
.product-card .info .name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.product-card .info .tag {
  display: inline-block;
  font-size: 11px;
  color: var(--color-gold);
  background: #FBF3DC;
  border-radius: 4px;
  padding: 2px 6px;
  margin-top: 4px;
}
.product-card .rate { text-align: right; }
.product-card .rate .num { font-size: 20px; font-weight: 700; color: var(--color-danger); }
.product-card .rate .desc { font-size: 11px; color: var(--color-text-muted); }
.product-card .buy-btn {
  margin-top: 8px;
  background: var(--color-navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
}

/* ---------- 邀请页 ---------- */
.invite-hero {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 100%);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  color: #3A2E00;
  margin-bottom: 16px;
}
.invite-hero .title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.invite-hero .desc { font-size: 12px; opacity: 0.85; }

.invite-code-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-card);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.invite-code-box .code { font-size: 18px; font-weight: 700; letter-spacing: 2px; }
.invite-code-box button {
  background: var(--color-navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
}

.placeholder-box {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
  padding: 40px 20px;
}

/* ---------- 我的页 ---------- */
.profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px 20px;
}
.profile-header .avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}
.profile-header .name { font-size: 16px; font-weight: 600; }
.profile-header .uid { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }

.menu-list {
  background: var(--color-card);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.menu-list .menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--color-border);
}
.menu-list .menu-item:last-child { border-bottom: none; }
.menu-list .menu-item .arrow { color: var(--color-text-muted); }
.menu-list .menu-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.menu-list .menu-icon {
  width: 20px;
  text-align: center;
  font-size: 16px;
}
.menu-list .menu-icon.icon-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #EFF3F8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.menu-list .menu-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-list .menu-item-title {
  font-size: 18.2px; /* 原 14px，加大 30% */
  font-weight: 500;
  color: var(--color-text);
}
.menu-list .menu-item-desc {
  font-size: 15.6px; /* 原 12px，加大 30% */
  color: var(--color-text-muted);
}
.menu-list .menu-item-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.menu-list .menu-value {
  font-size: 12px;
}
.menu-list .menu-value.unbound { color: var(--color-text-muted); }
.menu-list .menu-value.bound { color: var(--color-navy); font-weight: 600; }

/* ---------- 底部导航 ----------
   首页：图标（未选中=空心轮廓，选中=实心黑色+红色下划线）；
   其余四项：纯文字（未选中=灰色常规字重，选中=深色加粗+红色下划线）。
   两种情形都用同一个 .tab-underline 元素画下划线，选中时统一加 .tab.active 触发。 */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: var(--nav-height);
  background: #fff;
  border-top: 1px solid var(--color-border);
  display: flex;
  z-index: 30;
}
.tabbar .tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  color: var(--color-text-muted);
  cursor: pointer;
}
.tabbar .tab-underline {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px 2px;
  border-bottom: 5px solid transparent;
  line-height: 1;
}
.tabbar .tab.active:not(.tab-home) { color: #1F1F1F; font-weight: 600; }
.tabbar .tab.active .tab-underline { border-bottom-color: #DB0011; }

/* 首页图标和右边四个文字菜单之间的竖向分隔线 */
.tabbar .tab-divider {
  flex: none;
  align-self: center;
  width: 1px;
  height: 27px;
  background: #333;
}

/* 首页图标：同一条挖了门的房子轮廓 path，未选中只描边（stroke），选中直接填黑（fill）——
   门本身就是路径里挖空的一块，描边时门框会显出来，填色时门是镂空的，两种状态天然一致。 */
.tabbar .tab-home-icon { display: block; }
.tabbar .tab-home-shape {
  fill: none;
  stroke: var(--color-text-muted);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.tabbar .tab.active .tab-home-shape { fill: #1F1F1F; stroke: none; }

/* ---------- 弹窗（公告） ---------- */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}
.modal-mask.show { display: flex; }
.modal-box {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 340px;
  overflow: hidden;
}
.modal-box .modal-header {
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-light));
  color: #fff;
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 600;
}
.modal-box .modal-body {
  padding: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text);
  max-height: 40vh;
  overflow-y: auto;
}
/* 公告内容是管理员手打的一段文本，换行要原样保留，所以单独给它加 pre-wrap；
   其它弹窗的 modal-body 现在都是结构化的行（到账通知/转账确认等），
   如果整体套 pre-wrap，模板字符串里每行前面的缩进空白也会被当成"真实空白"渲染出来，
   导致行与行之间莫名多出一大截空白、要滚动才能看完——之前踩过这个坑，这里改成只在需要保留换行的地方单独加。 */
#annContent { white-space: pre-wrap; }
/* HKD 钱包管理弹窗内容比普通公告弹窗多得多（加款表单 + 历史记录列表），
   40vh 的通用滚动高度太挤，撤回按钮很容易被卷到看不见的地方去，这里单独放宽 */
#hkdWalletModal .modal-box { max-width: 380px; }
#hkdWalletModal .modal-body { max-height: 72vh; white-space: normal; }
.modal-box .modal-footer {
  padding: 12px 18px 18px;
}
.modal-box .modal-footer button {
  width: 100%;
  background: var(--color-navy);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px;
  font-size: 14px;
  font-weight: 600;
}
/* 两按钮并排的弹窗底部（如"申请开卡"提示：关闭 / 联系经理），复用同一套 modal-box，
   只是这里需要两个按钮平分宽度，所以用 flex 把上面单按钮 width:100% 的规则覆盖掉 */
.modal-box .modal-footer.two-btn {
  display: flex;
  gap: 10px;
}
.modal-box .modal-footer.two-btn button {
  width: auto;
  flex: 1;
}
/* 弹窗底部按钮的统一配色标准（用户端所有弹窗都按这个来）：
   左"取消"（.secondary，浅灰底）+ 右主操作（默认 navy 深蓝底白字）。
   参见 card.js 的"设置密码"弹窗 —— 那是基准样式 */
.modal-box .modal-footer.two-btn button.secondary {
  background: var(--color-btn-secondary);
  color: var(--color-text);
}

/* 公告历史列表弹窗：复用"我的"页面菜单行的样式，风格与整体保持一致 */
#annListModal .modal-box { max-width: 360px; }
#annListModal .modal-body {
  padding: 12px 14px;
  max-height: 56vh;
}
.ann-history-list .menu-item { cursor: pointer; }
.ann-history-list .menu-item:active { background: #F5F7FA; }
.ann-history-empty {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
  padding: 36px 0;
}

.plain-dialog-box {
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 320px;
  padding: 22px 20px 20px;
}
.plain-dialog-box.wide { max-width: 360px; }
.plain-dialog-title { font-size: 17px; font-weight: 700; color: var(--color-text); margin-bottom: 14px; }
.plain-dialog-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 7px 0; font-size: 13px; border-top: 1px solid var(--color-border); }
.plain-dialog-row:first-child { border-top: none; }
.plain-dialog-row .label { color: var(--color-text-muted); flex-shrink: 0; }
.plain-dialog-row .value { color: var(--color-text); font-weight: 500; text-align: right; word-break: break-all; }
.plain-dialog-row .value.positive { color: #1E9E4E; font-weight: 700; }
.plain-dialog-row .value.emphasis { color: var(--color-navy); font-weight: 700; font-size: 15px; }
.plain-dialog-note { font-size: 13px; color: var(--color-text-muted); margin: 10px 0 18px; line-height: 1.6; }
.plain-dialog-btn-group { display: flex; gap: 10px; margin-top: 16px; }
.plain-dialog-btn {
  flex: 1;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
/* 主按钮统一用品牌深蓝（原来是 #6C7FE0 浅蓝紫，跟 modal-box 弹窗的主按钮不是一个颜色，
   两个体系放在一起就能看出色差 —— 这里改成与全局一致 */
.plain-dialog-btn.primary { background: var(--color-navy); color: #fff; }
.plain-dialog-btn.secondary { background: var(--color-btn-secondary); color: var(--color-text); }
.plain-dialog-btn.full { width: 100%; }

/* ---------- 登录/注册/改密页：整体白底，衔接banner图下方的白色 ---------- */
body.auth-body {
  background: #FFFFFF;
}
.auth-page {
  padding: 40px 24px;
  max-width: 480px;
  margin: 0 auto;
  background: #FFFFFF;
}
.auth-page .auth-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 4px;
}
.auth-page .auth-sub {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 28px;
}
.auth-page .field {
  margin-bottom: 16px;
}
.auth-page .field label {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.auth-page .field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 14px;
  background: #fff;
}
.auth-page .submit-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-light));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  margin-top: 10px;
}
.auth-page .status-msg {
  margin-top: 14px;
  font-size: 13px;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
}
.status-msg.checking { background: #EFF3F8; color: var(--color-navy); }
.status-msg.reject { background: #FDECEC; color: var(--color-danger); }
.status-msg.ok { background: #EAF7EE; color: #1E8A3C; }

/* ---------- 登录/注册页（截图风格：返回箭头 + 下划线输入框）---------- */
.auth-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 20px;
  color: var(--color-text);
  text-decoration: none;
  font-size: 22px;
  cursor: pointer;
}

.auth-hero {
  position: relative;
  margin: 0 -24px 8px -24px;
  padding: 28px 24px 24px;
  overflow: hidden;
}
.auth-hero .bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
.auth-hero .hero-text {
  position: relative;
  z-index: 1;
}
.auth-hero .hero-hi {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.3;
}
.auth-hero .hero-welcome {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.3;
}

.auth-page .page-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-navy);
  margin-bottom: 28px;
}

.auth-tab-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  display: inline-block;
  padding-bottom: 8px;
  margin-bottom: 24px;
  border-bottom: 3px solid var(--color-navy);
}

.auth-page .field-underline {
  margin-bottom: 22px;
  position: relative;
}
.auth-page .field-underline input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-border);
  padding: 10px 2px;
  font-size: 15px;
  background: transparent;
  color: var(--color-text);
}
.auth-page .field-underline input:focus {
  outline: none;
  border-bottom-color: var(--color-navy);
}
.auth-page .field-underline input::placeholder {
  color: #B5BAC4;
}
.auth-page .field-underline .code-btn {
  position: absolute;
  right: 2px;
  bottom: 10px;
  background: none;
  border: none;
  color: var(--color-navy);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.auth-page .field-underline .code-btn:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.auth-forgot {
  display: block;
  text-align: left;
  font-size: 13px;
  color: var(--color-navy);
  margin-top: -8px;
  margin-bottom: 24px;
  text-decoration: none;
}

.auth-agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 24px;
  line-height: 1.6;
}
.auth-agree input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.auth-agree a {
  color: var(--color-navy);
  text-decoration: none;
}

.auth-primary-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-light));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 15px;
  font-size: 15px;
  font-weight: 700;
}
.auth-primary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-bottom-link {
  text-align: center;
  margin-top: 22px;
  font-size: 13px;
}
.auth-bottom-link a {
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: none;
}

/* ==================== 卡片页（VISA-H 实体卡）==================== */
.card-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.card-page-header .title { font-size: 22px; font-weight: 700; }
.card-page-header .header-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  color: var(--color-navy);
}
.card-page-header .header-icon svg { display: block; }

/* ---- 可用余额框（从卡面上抽出来的独立框，放在卡片下方）----
   样式跟"设置密码/卡片提现"那排按钮同一套配色（白底 + 1px 边框 + 圆角），跟项目其它信息卡一致。
   原来卡片上方那条"一键隐藏余额"的蓝色横幅已去掉（连 .privacy-banner / .toggle-switch 一起），
   显示/隐藏改由这里标签旁边的小眼睛控制。 */
.card-balance-box {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.card-balance-box-head { display: flex; align-items: center; gap: 8px; }
.card-balance-box-label { font-size: 13.5px; color: var(--color-text-muted); }
/* 小眼睛：睁眼/闭眼两个 SVG，按隐藏状态切换（.is-hidden 时显示那个带斜线的闭眼）。
   卡片页"可用余额"与理财页"总资产"共用这一套规则（改这里即两处同步，保持格式完全一致）。 */
.card-balance-eye,
.eye-toggle {
  width: 22px; height: 22px; padding: 0; border: none; background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); cursor: pointer;
}
.card-balance-eye svg,
.eye-toggle svg { display: block; }
.card-balance-eye .eye-off,
.eye-toggle .eye-off { display: none; }
.card-balance-eye.is-hidden .eye-on,
.eye-toggle.is-hidden .eye-on { display: none; }
.card-balance-eye.is-hidden .eye-off,
.eye-toggle.is-hidden .eye-off { display: block; }
.card-balance-box-amount {
  font-size: 21px;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 10px;
  letter-spacing: 0.5px;
}

.visa-card {
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 8px 20px rgba(15, 42, 74, 0.12);
}
.visa-card-face {
  position: relative;
  min-height: 180px;
  padding: 20px;
  background: linear-gradient(135deg, #D9B776 0%, #C9A05C 45%, #A97C3A 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.visa-card-face::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.visa-card-face::before {
  content: "";
  position: absolute;
  left: -30px;
  top: -50px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
}
/* 余额相关的 .card-top-row / .card-balance-label / .card-balance-amount 在这里删掉了：
   余额已于 2026-09 移到卡片下方的独立框（.card-balance-box），卡面上不再渲染这几行 */
.visa-card-face .card-number-row {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.visa-card-face .card-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  z-index: 1;
}
.visa-card-face .card-holder-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.95;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
}
.visa-card-face .card-expiry-row {
  font-size: 13px;
  opacity: 0.85;
  position: relative;
  z-index: 1;
}
.visa-card-face.card-empty {
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}
.visa-card-face.card-empty .card-empty-text {
  font-size: 15px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.visa-card-face.card-empty .card-empty-sub {
  font-size: 11px;
  opacity: 0.85;
  margin-top: 6px;
  position: relative;
  z-index: 1;
}
/* 未绑卡空态：把真实卡面图铺满卡面区域（就是上面 card-empty 的另一种皮肤）。
   规则必须放在 .card-empty 之后，两者选择器权重相同，靠顺序覆盖。
   注意：jpg 是白底压平的，容器底色要一直保持白色；图片自己撑高度，所以去掉 min-height 和内边距。 */
.visa-card-face.card-unbound {
  background: #fff;
  padding: 0 0 18px;
  min-height: 0;
  justify-content: flex-start;
}
.visa-card-face.card-unbound .card-face-art { display: block; width: 100%; height: auto; }
.visa-card-face.card-unbound .card-empty-text {
  padding: 16px 20px 0;
  color: var(--color-text);
}
.visa-card-face.card-unbound .card-empty-sub {
  padding: 0 20px;
  margin-top: 6px;
  color: var(--color-text-muted);
  opacity: 1;
}

/* 已持卡：卡面用真实卡面图（bindcard.jpg），余额/卡号/姓名/有效期叠在图上。
   图上右上是 HSBC logo、左中是芯片、左半是红色狮子多边形、右下有成片深灰菱形，
   所以下面这些百分比不是估的 —— 是把图上每块区域跟深蓝字的对比度逐像素算出来挑的：
   卡号放中部 y53% 只有 4.98、放 y34% 有 7.8；底部只有 x46%~68% 是浅色带（6.9~10.6），
   右下角 x70%~88% 冷到 3.3~3.6。位置全用百分比：卡面高度 = 宽度 × 580/900，
   自动等比缩放，窄屏不会错位。换卡面图必须把这些百分比重新量一遍。 */
.visa-card-face.card-active {
  display: block;          /* 关掉金色卡面那套 flex column 布局 */
  padding: 0;
  min-height: 0;           /* 高度交给下面的图片，比原来的 180px 高一些，视觉更饱满 */
  background: #fff;        /* 配白底压平的 jpg；图片万一加载失败也是白底深字，照样能读 */
  color: var(--color-navy);
}
/* 金色卡面上那两个半透明白装饰圆会压在图上，已持卡时关掉 */
.visa-card-face.card-active::before,
.visa-card-face.card-active::after { display: none; }
.visa-card-face.card-active .card-face-art { display: block; width: 100%; height: auto; }

/* ⚠️ 卡面上现在只渲染持卡人姓名：余额（2026-09）和卡号/有效期（2026-09）先后从卡面移走，
   见 card.js 里 renderBalanceBox 和 status === 2 那个分支。
   下面这几条 .card-active 的卡号 / 有效期规则目前没有生效对象（DOM 里根本不渲染这两个节点），
   留着是为了以后要恢复显示时可以直接用 —— 里面的百分比、"必须 left:0 + right:0 撑满"这些坑
   都是逐像素量过/踩过的，别删那段注释 */

/* 卡号：按需求放到中线以下（top 56%），字号放大 50%（20px → 30px），不加底衬。
   横向必须用 left:0 + right:0 撑满、靠父级 text-align:center 居中 —— 踩过的坑：
   如果写成 left:50% + translateX(-50%)，绝对定位元素在只给 left 不给 right 时
   可分配宽度只剩包含块的一半（416px 卡面只剩 208px），19 个字符的卡号会被挤成两行。
   字号用 min(30px, 7.2vw)：30px 是固定值、不随屏幕缩放，320px 小屏上卡片只有约 288px，
   30px 的卡号会超宽，这里按视口宽度收一下（宽屏仍是 30px）；字距从 2px 收到 1px 也是
   为了给窄屏留余量。white-space:nowrap 兜底，宁可轻微压边也不能再换成两行。
   裸字压在左侧红狮上（那带底色实测 2.5~3.5），靠上面的深蓝字 + 白色柔光描边保证轮廓。 */
.visa-card-face.card-active .card-number-row {
  position: absolute;
  top: 56%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  white-space: nowrap;
}
/* 姓名/有效期：贴底部的浅色带，两处都用同一层半透明白底衬当"印刷区"
   （右边那块底色实测只有 3.3，卡号放大后也必然压图案；有了衬就怎么挪都不糊，合成后 ≈12）。
   姓名按需求放回**左边**（左下那整片是红色狮子，正因为有白衬才敢放，裸字在那儿只有 2.8~3.5）；
   加了衬之后姓名也不必再为了躲深灰菱形而卡窄宽度，长一点的英文名也能显示完整 */
.visa-card-face.card-active .card-bottom-row {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 10%;
}
.visa-card-face.card-active .card-holder-name {
  max-width: 70%;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 4px;
  padding: 2px 6px;
}
.visa-card-face.card-active .card-expiry-row {
  background: rgba(255, 255, 255, 0.72);
  border-radius: 4px;
  padding: 2px 6px;
}

/* 文字是深蓝字压在图案/纹理上，配一层白色柔光当描边（真实卡片的凸印也是这个观感），
   在灰底和红狮上都保证读得清 */
.visa-card-face.card-active .card-balance-label,
.visa-card-face.card-active .card-balance-amount,
.visa-card-face.card-active .card-number-row,
.visa-card-face.card-active .card-holder-name,
.visa-card-face.card-active .card-expiry-row {
  color: var(--color-navy);
  opacity: 1;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.95), 0 1px 3px rgba(255, 255, 255, 0.9);
}
.visa-card-face.card-active .card-balance-label { font-size: 10px; letter-spacing: 0.5px; color: #5A6472; }
.visa-card-face.card-active .card-balance-amount { font-size: 18px; }
/* 卡号的文字描边比其它几处重一点：它是裸字压在左侧红狮上（按需求不加底衬），
   多一圈白晕当"凸印高光"，深蓝字的轮廓才立得住（真实卡片的卡号也是这种浮雕感） */
.visa-card-face.card-active .card-number-row {
  font-size: min(30px, 7.2vw);
  letter-spacing: 1px;
  text-shadow: 0 0 2px rgba(255, 255, 255, 1), 0 0 3px rgba(255, 255, 255, 0.95), 0 1px 5px rgba(255, 255, 255, 0.9);
}
.visa-card-face.card-active .card-holder-name { font-size: 13px; }
.visa-card-face.card-active .card-expiry-row { font-size: 12px; }

/* ---- 统一状态卡面（加载中 / 审核中 / 未通过 / 被拒 / 未登录）----
   这些状态都没有卡片数据可展示，但卡面依旧用同一张 bindcard.jpg 当底，状态信息装在
   中间的白衬提示块里 —— 这样"任何状态用户看到的都是同一张卡面图"。
   白衬块不是装饰：图的正中间是红色狮子 + 深灰菱纹，实测那带底色跟深蓝字的对比度只有
   2.5~3.5，裸字会糊；加衬后 ≈12，以后换卡面图也不会糊。
   图片放在文档流里负责撑高度（不用 aspect-ratio，老 WebView 不会塌成 0）。 */
.visa-card-face.card-art {
  display: block;
  padding: 0;
  min-height: 0;
  background: #fff;                    /* 配白底压平的 jpg；图片万一没加载出来也是白底深字 */
  color: var(--color-navy);
  cursor: default;
}
.visa-card-face.card-art.is-clickable { cursor: pointer; }   /* 未登录 / 未通过 这类可点状态 */
.visa-card-face.card-art::before,
.visa-card-face.card-art::after { display: none; }           /* 金色卡面那两个装饰圆不要压在图上 */
.visa-card-face.card-art .card-face-art { display: block; width: 100%; height: auto; }
.visa-card-face.card-art .card-art-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 9%;
}
.visa-card-face.card-art .card-art-plate {
  background: rgba(255, 255, 255, 0.84);
  border-radius: 14px;
  padding: 14px 18px;
  max-width: 100%;
  text-align: center;
  box-shadow: 0 2px 10px rgba(15, 42, 74, 0.08);
}
.visa-card-face.card-art .card-art-title { font-size: 15px; font-weight: 700; color: var(--color-navy); }
.visa-card-face.card-art .card-art-sub { font-size: 11.5px; line-height: 1.65; color: var(--color-text-muted); margin-top: 6px; }
.visa-card-face.card-art .card-art-action { font-size: 11.5px; color: var(--color-navy); text-decoration: underline; margin-top: 8px; }
/* "我已完成认证，立即查一次"：原来是配金色卡面的白底白字，现在放进白衬块里，
   改成深蓝实底白字才看得见 */
.card-processing-refresh-btn {
  margin-top: 12px; cursor: pointer;
  background: var(--color-navy); border: none;
  color: #fff; font-size: 11.5px; padding: 8px 14px; border-radius: 999px;
}
.card-processing-refresh-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.card-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}
.card-action-btn {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 4px;
  font-size: 12px;
  color: var(--color-text);
}
.card-action-btn:disabled { opacity: 0.5; }

.card-status-msg {
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
  margin: 10px 0;
  padding: 8px 10px;
  background: var(--color-card);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}
.card-status-msg.error { color: var(--color-danger); }

.card-topup-history { margin-top: 18px; }
.card-topup-history .topup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  font-size: 13px;
}
.card-topup-history .topup-row .amount { font-weight: 700; }
.card-topup-history .topup-row .time { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.card-topup-history .topup-row .badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
}
.card-topup-history .topup-row .badge.processing { background: #FBF3DC; color: var(--color-gold); }
.card-topup-history .topup-row .badge.success { background: #E4F6EA; color: #1E9E4E; }
.card-topup-history .topup-row .badge.failed { background: #FBE7E7; color: var(--color-danger); }

/* 卡片流水 / 提现记录 两个 Tab（卡片页底部） */
.card-history-tabs {
  display: flex;
  gap: 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}
.card-history-tab {
  position: relative;
  padding: 6px 2px 10px;
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
}
.card-history-tab.active { color: var(--color-navy); font-weight: 600; }
.card-history-tab.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--color-navy);
}
.card-history-more {
  width: 100%;
  padding: 10px;
  font-size: 13px;
  color: var(--color-text-muted);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
}
.card-history-empty {
  padding: 18px 0;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted);
}
/* 流水里"入账"（交易撤销/退款）用绿色，支出保持正文色 */
.card-topup-history .topup-row .amount.in { color: #1E9E4E; }
.card-topup-history .topup-row .tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  border-radius: 999px;
  background: #EEF1FA;
  color: var(--color-navy);
  vertical-align: middle;
}

/* 设置卡片密码（PIN）弹窗 */
.pin-modal-row { margin-bottom: 10px; }
.pin-modal-row label { display: block; font-size: 13px; color: var(--color-text-muted); margin-bottom: 6px; }
.pin-modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 18px;
  letter-spacing: 8px;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.pin-modal-status { font-size: 12px; color: var(--color-text-muted); margin-top: 8px; }
.pin-modal-status a { color: var(--color-navy); margin-left: 6px; text-decoration: underline; }
.pin-modal-error { font-size: 13px; color: var(--color-danger); margin-top: 6px; }

/* 充值金额输入弹窗，复用 modal-mask/modal-box，加一个输入框样式 */
.topup-modal-input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px;
  margin-bottom: 6px;
}
.topup-modal-hint { font-size: 11px; color: var(--color-text-muted); }

/* ==================== KYC 申请表单页 ==================== */
.kyc-page {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}
.kyc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.kyc-header .kyc-header-title { font-size: 18px; font-weight: 700; }
.kyc-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 22px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kyc-section-title:first-of-type { margin-top: 4px; }
.kyc-same-address, .kyc-long-valid {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
}
.kyc-long-valid { margin: -6px 0 14px; }

.kyc-header .auth-back { margin-bottom: 0; }
.kyc-page .status-msg {
  margin-top: 14px;
  font-size: 13px;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  background: #FDECEC;
  color: var(--color-danger);
}

/* ---- 实名认证详情页（kyc-info.html）---- */
.kyc-info-status-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 8px;
}
.kyc-info-status-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.kyc-info-status-title { font-size: 15px; font-weight: 700; color: var(--color-text); }
.kyc-info-status-sub { font-size: 12px; color: var(--color-text-muted); }
.status-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.status-badge.passed { background: #E4F6EA; color: #1E9E4E; }
.status-badge.pending { background: #FBF3DC; color: var(--color-gold); }
.status-badge.failed { background: #FBE7E7; color: var(--color-danger); }
.status-badge.empty { background: #EFF1F5; color: var(--color-text-muted); }
.kyc-info-list .kyc-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--color-border);
}
.kyc-info-list .kyc-info-row:last-child { border-bottom: none; }
.kyc-info-label { color: var(--color-text-muted); }
.kyc-info-value { color: var(--color-text); font-weight: 500; }
.kyc-info-tip {
  font-size: 12px;
  color: var(--color-text-muted);
  padding: 12px 4px 4px;
  line-height: 1.6;
}

/* ---- 设置页：退出登录 ---- */
.settings-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 28px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy);
  cursor: pointer;
}
.settings-logout-icon { font-size: 14px; }

/* ---- 设置页：语言选择弹窗（占位，暂不接入真实多语言切换）---- */
.lang-sheet-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
}
.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 2px;
  font-size: 15px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}
.lang-option .lang-check {
  color: var(--color-navy);
  font-weight: 700;
  visibility: hidden;
}
.lang-option.selected .lang-check { visibility: visible; }
.lang-cancel-btn {
  width: 100%;
  margin-top: 16px;
  background: #EFF3F8;
  color: var(--color-navy);
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.form-group { margin-bottom: 14px; }
.form-group label {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group input[type="file"],
.form-group select {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 14px;
  background: var(--color-card);
  color: var(--color-text);
  font-family: inherit;
}
.form-group-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-group-inline { display: flex; gap: 12px; }

.kyc-cert-type { display: flex; gap: 20px; padding: 4px 0; }
.kyc-cert-type label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--color-text); }

/* ==================== 收货地址簿：新增地址表单（按截图 UI 还原）==================== */
.addr-form-card {
  background: var(--color-card);
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: 0 6px 18px rgba(15, 42, 74, 0.06);
}
.addr-form-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 14px;
}
.addr-field {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  padding: 0 14px;
  margin-bottom: 14px;
  background: var(--color-card);
  transition: border-color 0.15s ease;
}
.addr-field:focus-within { border-color: var(--color-navy-light); }
.addr-field input,
.addr-field select,
.addr-field textarea {
  flex: 1;
  border: none;
  outline: none;
  padding: 13px 0;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text);
  background: transparent;
  min-width: 0;
}
.addr-field textarea { resize: vertical; padding: 13px 0; line-height: 1.5; }
.addr-field select { -webkit-appearance: none; appearance: none; padding-right: 4px; }
.addr-field-icon { color: var(--color-text-muted); font-size: 15px; flex: none; margin-left: 8px; }
.addr-field-select select { cursor: pointer; }

.addr-field-phone .addr-phone-code {
  flex: none;
  width: 78px;
  padding: 13px 0;
}
.addr-field-divider { width: 1px; height: 20px; background: var(--color-border); flex: none; margin: 0 12px; }

.addr-default-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 2px;
  font-size: 14px;
  color: var(--color-text);
}
.addr-toggle {
  flex: none;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: #DCE0EA;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}
.addr-toggle .addr-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: left 0.2s ease;
}
.addr-toggle.on { background: var(--color-navy); }
.addr-toggle.on .addr-toggle-knob { left: 23px; }

/* ---- 收货地址簿：地址列表卡片 ---- */
.addr-item {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.addr-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.addr-item-name { font-size: 14px; font-weight: 700; color: var(--color-text); }
.addr-item-phone { font-size: 13px; color: var(--color-text-muted); }
.addr-badge-default {
  font-size: 11px;
  font-weight: 600;
  color: #1E8A3C;
  background: #EAF7EE;
  padding: 2px 8px;
  border-radius: 999px;
  flex: none;
}
.addr-item-detail { font-size: 13px; color: var(--color-text); line-height: 1.6; margin-bottom: 10px; }
.addr-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}
.addr-action-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-navy);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}
.addr-action-link.danger { color: var(--color-danger); }

/* ==================== "所有受款人"页 ==================== */
.payee-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.payee-item-avatar {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #2F2F2F;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  letter-spacing: 0.5px;
}
.payee-item-info { flex: 1; min-width: 0; }
.payee-item-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.payee-item-sub {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.payee-item-remove {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-danger);
  background: none;
  border: none;
  padding: 6px 2px;
  font-family: inherit;
  cursor: pointer;
}

/* ==================== 实时兑换页（截图风格：卡片 + 上下币种框 + 中间切换按钮）==================== */
.exchange-card {
  background: var(--color-card);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  padding: 20px 16px 22px;
}
.exchange-card-title { font-size: 15px; font-weight: 700; margin-bottom: 14px; }

.exchange-boxes-wrap { position: relative; }

.exchange-box {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 14px 14px 12px;
  background: var(--color-bg);
}
.exchange-box + .exchange-box { margin-top: 22px; }

.exchange-box-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.exchange-box-label { font-size: 13px; color: var(--color-text-muted); }
.exchange-max-btn {
  background: #EEF1FA;
  color: var(--color-navy);
  border: none;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.exchange-box-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.exchange-currency-select {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  cursor: pointer;
}
.exchange-currency-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: #F0F1F5;
}
.exchange-currency-code { font-weight: 700; font-size: 17px; color: var(--color-text); }
.exchange-chevron-down { color: var(--color-text-muted); font-size: 12px; }

.exchange-amount-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  text-align: right;
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text);
  font-family: inherit;
  padding: 0;
}
.exchange-amount-input:focus { outline: none; }
.exchange-amount-input::placeholder { color: #C4C8D2; }
.exchange-amount-display {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.exchange-box-balance { font-size: 12px; color: var(--color-text-muted); margin-top: 10px; }

.exchange-swap-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 4px solid var(--color-card);
  background: var(--color-navy);
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 42, 74, 0.25);
}

.exchange-rate-row {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 16px 0 14px;
}

.exchange-error-msg {
  font-size: 12px;
  color: var(--color-danger);
  min-height: 14px;
  margin-bottom: 8px;
}
.exchange-error-msg.success { color: #1E8A3C; }

.exchange-submit-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-light));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.exchange-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.exchange-submit-icon { font-size: 15px; }

.exchange-history-link {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--color-navy);
  text-decoration: none;
}

/* ---- 转账功能页（transfer.html）：钱包转账 / 国际转账 两个 Tab ---- */
.transfer-tabs {
  display: flex;
  gap: 8px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 5px;
  margin-bottom: 18px;
}
.transfer-tab {
  flex: 1;
  text-align: center;
  padding: 10px 4px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 9px;
  color: var(--color-text-muted);
  cursor: pointer;
}
.transfer-tab.active { background: var(--color-navy); color: #fff; }

.transfer-panel { display: none; }
.transfer-panel.active { display: block; }

.transfer-banner {
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-light));
  color: #fff;
  font-size: 13px;
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.transfer-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px 16px;
  margin-bottom: 16px;
}
.transfer-card-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.transfer-card-sub { font-size: 12px; color: var(--color-text-muted); margin-bottom: 14px; }

.transfer-currency-row { display: flex; gap: 10px; flex-wrap: wrap; }
.transfer-currency-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  position: relative;
}
.transfer-currency-chip .check { color: var(--color-navy); font-weight: 700; display: none; }
.transfer-currency-chip.active {
  border-color: var(--color-navy);
  background: #EEF1FA;
  color: var(--color-navy);
}
.transfer-currency-chip.active .check { display: inline; }
.transfer-currency-chip.disabled {
  color: var(--color-text-muted);
  background: var(--color-bg);
  cursor: not-allowed;
}
.transfer-currency-chip .soon-badge {
  position: absolute;
  top: -9px;
  right: -8px;
  background: var(--color-border);
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 400;
  border-radius: 999px;
  padding: 2px 6px;
  white-space: nowrap;
}

.transfer-input-box {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 13px 14px;
  margin-bottom: 10px;
}
.transfer-input-box:last-child { margin-bottom: 0; }
.transfer-input-icon { font-size: 15px; }
.transfer-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 15px;
  color: var(--color-text);
  font-family: inherit;
  padding: 0;
}
.transfer-input:focus { outline: none; }
.transfer-input::placeholder { color: #B7BCC7; }
/* 银行卡转账里的"开户银行"用下拉选择，复用同一个输入框外壳，去掉浏览器默认样式让它和旁边的 input 看起来一致 */
select.transfer-input {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.intl-cny-highlight { color: var(--color-navy); font-weight: 700; }

.transfer-recipient-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  min-height: 14px;
  margin: -4px 0 10px 2px;
}
.transfer-recipient-hint.success { color: #1E8A3C; }
.transfer-recipient-hint.error { color: var(--color-danger); }

.transfer-fee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--color-border);
}
.transfer-fee-row:first-of-type { border-top: none; padding-top: 0; }
.transfer-fee-label { color: var(--color-text-muted); }
.transfer-fee-note {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 10px;
}

.transfer-error-msg {
  font-size: 12px;
  color: var(--color-danger);
  min-height: 14px;
  margin-bottom: 8px;
}

.transfer-submit-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-light));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.transfer-placeholder-card {
  background: var(--color-card);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 48px 24px;
  text-align: center;
}
.transfer-placeholder-icon { font-size: 36px; margin-bottom: 14px; }
.transfer-placeholder-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.transfer-placeholder-desc { font-size: 13px; color: var(--color-text-muted); line-height: 1.6; }

.kyc-preview {
  display: block;
  max-width: 160px;
  max-height: 100px;
  border-radius: 8px;
  margin-top: 8px;
  border: 1px solid var(--color-border);
}

/* ==================== 钱包 / 理财 通用：蓝色汇总卡片 ==================== */
.blue-summary-card {
  background: linear-gradient(135deg, #6C7FE0 0%, #7E8FE8 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
.blue-summary-card .top-row { display: flex; justify-content: space-between; align-items: flex-start; }
.blue-summary-card .label { font-size: 13px; opacity: 0.85; }
.blue-summary-card .amount { font-size: 30px; font-weight: 700; margin-top: 6px; }
/* 理财页总资产卡片是深蓝底，眼睛得跟着用白色；尺寸/形状完全走上面那套共用规则 */
.blue-summary-card .eye-toggle { color: #fff; opacity: 0.85; }
.blue-summary-card .stats-row { display: flex; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.22); }
.blue-summary-card .stat { flex: 1; }
.blue-summary-card .stat + .stat { border-left: 1px solid rgba(255,255,255,0.22); padding-left: 14px; margin-left: 14px; }
.blue-summary-card .stat-label { font-size: 11px; opacity: 0.85; }
.blue-summary-card .stat-value { font-size: 15px; font-weight: 700; margin-top: 4px; }

/* ==================== 钱包页 ==================== */
.wallet-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px;
}
.wallet-quick-action-btn {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--color-text);
}
.wallet-quick-action-btn .left { display: flex; align-items: center; }
.wallet-quick-action-btn .icon-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #EEF1FA;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 15px;
}
.wallet-quick-action-btn .chevron { color: var(--color-text-muted); }
.wallet-quick-action-btn.placeholder { opacity: 0.6; }

/* ==================== "转账"页（底部导航第二项，原"钱包"页）：最近受款人 + 转账入口 + 更多功能 + 钱包资产 ==================== */
/* 这一页上半部分是整幅铺开的（浅灰顶部区 + 白色主体区），所以去掉 .page 默认的内边距，由各区块自己控制 */
#page-wallet { padding: 0; }

.xfer-top {
  background: #F3F3F3;
  padding: 20px 16px 24px;
}
.xfer-top .card-page-header { margin-bottom: 16px; }

/* 四个二级标题（最近本地受款人 / 转账 / 更多功能 / 钱包资产）统一用"钱包资产"的样式：15px、600 */
.xfer-payee-title,
.xfer-heading {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text);
}

/* 最近本地受款人卡片 */
.xfer-payee-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
  overflow: hidden;
}
.xfer-payee-title { padding: 16px 16px 0; }
.xfer-payee-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 16px 8px 16px;
  min-height: 108px;
}
.xfer-payee {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  background: none;
  border: none;
  font: inherit;
  color: var(--color-text);
  cursor: pointer;
  min-width: 0;
}
.xfer-payee-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #2F2F2F;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  letter-spacing: 0.5px;
}
/* 优先展示拼音姓名（单行，超出宽度用省略号截断，比如"HUANG CHANGH…"）；
   没有姓名信息时退回脱敏卡号，固定分两行显示（4413 **** / **** 7965），读起来仍是完整的 4413 **** **** 7965 */
.xfer-payee-name {
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  color: var(--color-text-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xfer-payee-empty {
  grid-column: 1 / -1;
  align-self: center;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
}
.xfer-payee-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #ECECEC;
}
.xfer-payee-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  background: none;
  border: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}
.xfer-payee-action + .xfer-payee-action { border-left: 1px solid #ECECEC; }
.xfer-payee-action:active, .xfer-payee:active, .xfer-entry:active { opacity: 0.7; }

/* 主体：转账入口 + 更多功能 */
.xfer-body {
  background: #fff;
  padding: 20px 16px 22px;
}
.xfer-heading { margin: 0 0 12px; }
.xfer-heading:not(:first-child) { margin-top: 24px; }
.xfer-entry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* 三个入口（本地和环球账户 / 跨境支付通 / 外汇兑换）共用这一种卡片：同样的高度、边框、图标区、字体 */
.xfer-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #E7E9EE;
  border-radius: 8px;
  font: inherit;
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
}
.xfer-entry-icon { flex: none; width: 40px; height: 36px; }
.xfer-entry-text {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  text-wrap: balance; /* 两行文字尽量等长，避免"…账 / 户"这种孤字换行；不支持的浏览器就按默认换行 */
}

/* 钱包资产区块：底色沿用页面底色，和截图一致（内容与原来相同） */
.xfer-assets {
  background: var(--color-bg);
  padding: 8px 16px 16px;
}

/* 轻提示 */
.xfer-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-height) + 22px);
  transform: translateX(-50%) translateY(8px);
  max-width: 80%;
  padding: 10px 18px;
  background: rgba(34, 34, 34, 0.92);
  color: #fff;
  font-size: 13px;
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 60;
}
.xfer-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.wallet-asset-list .asset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
}
.wallet-asset-list .asset-left { display: flex; align-items: center; gap: 12px; }
.wallet-asset-list .asset-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: #F0F1F5;
}
.wallet-asset-list .asset-name { font-weight: 700; font-size: 14px; }
.wallet-asset-list .asset-sub { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.wallet-asset-list .asset-right { display: flex; align-items: center; gap: 8px; }
.wallet-asset-list .asset-amount { font-weight: 700; font-size: 15px; }
.wallet-asset-list .chevron { color: var(--color-text-muted); }

/* ==================== 理财页 ==================== */
.finance-products-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 22px;
}
.finance-product-card {
  flex: 0 0 158px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px;
}
.finance-product-card .name-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.finance-product-card .name { font-weight: 700; font-size: 14px; }
.finance-product-card .badge { font-size: 11px; background: #EEF1FA; color: var(--color-navy); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.finance-product-card .rate { font-size: 20px; font-weight: 700; color: #1E9E4E; }
.finance-product-card .rate-label { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.finance-product-card .term-row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.finance-product-card .term-text { font-size: 12px; color: var(--color-text-muted); }
.finance-product-card .subscribe-btn { background: var(--color-navy); color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font-size: 12px; }

.finance-tabs { display: flex; gap: 10px; margin-bottom: 14px; }
.finance-tab { padding: 6px 16px; border-radius: 999px; border: 1px solid var(--color-border); font-size: 12px; background: var(--color-card); color: var(--color-text-muted); }
.finance-tab.active { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }

.finance-position-row { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.finance-position-row .top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.finance-position-row .name { font-weight: 700; font-size: 14px; }
.finance-position-row .status-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.finance-position-row .status-badge.active { background: #E4F6EA; color: #1E9E4E; }
.finance-position-row .status-badge.ended { background: #EFF1F5; color: var(--color-text-muted); }
.finance-position-row .detail-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }

.finance-empty-state { text-align: center; padding: 50px 20px; color: var(--color-text-muted); font-size: 13px; }
.finance-empty-state .icon { font-size: 40px; margin-bottom: 10px; opacity: 0.5; }

/* 申购弹窗 —— 独立的底部抽屉样式（对照"理财申购页"截图），不再复用居中的 modal-mask/modal-box */
.sheet-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
}
.sheet-mask.show { display: flex; }
.sheet-box {
  background: #fff;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  animation: sheet-slide-up 0.22s ease-out;
}
@keyframes sheet-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sheet-header .sheet-title { font-size: 18px; font-weight: 700; color: var(--color-text); }
.sheet-header .sheet-close {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--color-text-muted);
  padding: 4px;
  cursor: pointer;
}

.subscribe-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--color-border); font-size: 13px; }
.subscribe-row .label { color: var(--color-text-muted); }
.subscribe-row .value { font-weight: 600; }
.subscribe-account-box {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 14px 12px;
  margin: 14px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.subscribe-account-box .account-label { font-size: 12px; color: var(--color-text-muted); }
.subscribe-account-box .account-value { font-size: 16px; font-weight: 700; color: var(--color-text); }
.subscribe-amount-input-row { position: relative; margin-bottom: 6px; }
.subscribe-amount-input-row input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 60px 12px 14px;
  font-size: 16px;
  font-family: inherit;
}
.subscribe-amount-input-row .max-link {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-navy);
  font-size: 13px;
  font-weight: 600;
  background: none;
  border: none;
}
.subscribe-hint { font-size: 11px; color: var(--color-text-muted); margin-bottom: 14px; }
.subscribe-estimate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
}
.subscribe-agree-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); margin-bottom: 16px; }
.subscribe-agree-row .agree-link { color: var(--color-navy); text-decoration: none; }
.subscribe-submit-btn { width: 100%; background: var(--color-navy); color: #fff; border: none; border-radius: 10px; padding: 14px; font-size: 15px; font-weight: 700; }
.subscribe-submit-btn:disabled { opacity: 0.5; }
.subscribe-error-msg { font-size: 12px; color: var(--color-danger); margin: -6px 0 10px; display: none; }

/* 首页原来的"立即开卡"卡片样式（.home-card-panel / .home-open-card* / .home-card-dots）在这里删掉了：
   首页内容已于 2026-09 直接换成"申请开卡"页（见 index.html 的 #page-home），
   这套蓝色渐变卡片 + SVG 火箭图不再使用 */

/* ==================== 申请开卡页 ==================== */
.apply-card-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 18px;
}
.apply-card-divider .line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(230,148,74,0), rgba(230,148,74,0.55)); }
.apply-card-divider .line.right { background: linear-gradient(90deg, rgba(230,148,74,0.55), rgba(230,148,74,0)); }
.apply-card-divider .divider-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-gold-card); /* #E0913F：这个橙金色就是全页金字的基准色，值没变，只是抽成了变量 */
  white-space: nowrap;
}

.apply-card-price-box {
  background: var(--color-card);
  border: 1px solid #DCE3F5;
  border-radius: var(--radius);
  padding: 26px 16px;
  text-align: center;
  margin-bottom: 20px;
  box-shadow: 0 6px 18px rgba(108, 127, 224, 0.08);
}
/* 卡面图：applycard.jpg 原图 2693x1790 / 5.9MB，已裁掉透明留白、等比缩到 900px 宽压成 JPEG。
   透明区被压平成白色，正好和价格盒的白底无缝相接，不用再描边或加圆角。 */
.apply-card-face-img { display: block; width: 100%; height: auto; margin-bottom: 18px; }
.apply-card-price-name { font-size: 15px; font-weight: 700; color: var(--color-text); margin-bottom: 14px; }
.apply-card-price-amount { font-size: 34px; font-weight: 800; color: #5B6FE0; line-height: 1.2; }
.apply-card-price-unit { font-size: 13px; color: var(--color-text-muted); margin-top: 4px; }

.apply-card-open-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #6C7FE0 0%, #7E8FE8 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 15px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(108, 127, 224, 0.3);
}
.apply-card-open-btn .icon { font-size: 15px; }
.apply-card-open-btn:active { opacity: 0.9; }

.apply-card-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.apply-card-benefit {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 图标统一成一个红色小圆环（原来是 📅 % 💳 🏧 这些 emoji：各系统渲染差别大、颜色也不统一）。
   圆环用内联 SVG + currentColor 上色，跨平台一致 */
.apply-card-benefit .benefit-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #FDF0E3;        /* 暖橙金浅底，与 --color-gold-card 同色系（原来是淡红底 + 红圈） */
  color: var(--color-gold-card);
  display: flex;
  align-items: center;
  justify-content: center;
}
.apply-card-benefit .benefit-icon svg { display: block; }
.apply-card-benefit .benefit-icon svg { display: block; }
/* 卓越理财卡权益：标题与所有权益文字统一用 --color-gold-card，
   也就是上方「卓越理财卡」那五个字的橙金色（同一变量，两边永远一致）。 */
.apply-card-benefits-title { color: var(--color-gold-card); }
.apply-card-benefit .benefit-label { font-size: 12px; color: var(--color-gold-card); margin-bottom: 3px; }
.apply-card-benefit .benefit-value { font-size: 14px; font-weight: 700; color: var(--color-gold-card); line-height: 1.35; }
.apply-card-benefit .benefit-value.small { font-size: 12px; font-weight: 700; }

.apply-card-note-box {
  background: #EEF1F7;
  border-radius: var(--radius);
  padding: 16px;
}
.apply-card-note-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; color: var(--color-text); }
.apply-card-note-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 8px;
}
.apply-card-note-item:last-child { margin-bottom: 0; }
.apply-card-note-item .check {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3DD16B;
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

/* ---------- 法律文档通用排版（免责声明 / 隐私政策 / 理财产品协议） ---------- */
.legal-meta {
  display: inline-block;
  font-size: 11px;
  color: var(--color-text-muted);
  background: #F0F2F7;
  border-radius: 20px;
  padding: 4px 10px;
  margin-bottom: 16px;
}
.legal-paragraph { font-size: 13px; line-height: 1.8; color: var(--color-text); margin-bottom: 16px; }
.legal-section { margin-bottom: 18px; }
.legal-section-title { font-size: 14px; font-weight: 700; color: var(--color-text); margin-bottom: 8px; }
.legal-section-content { font-size: 13px; line-height: 1.8; color: var(--color-text-muted); }
.legal-sub-section { margin: 10px 0 10px 2px; }
.legal-sub-title { font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: 4px; }
.legal-sub-content { font-size: 12.5px; line-height: 1.8; color: var(--color-text-muted); margin-bottom: 4px; }
.legal-risk-item { margin-bottom: 12px; }
.legal-risk-title { font-size: 13px; font-weight: 600; color: var(--color-text); display: block; margin-bottom: 4px; }
.legal-risk-content { font-size: 12.5px; line-height: 1.8; color: var(--color-text-muted); }
.legal-note-box {
  background: #FFF7E8;
  border: 1px solid #F5DDA8;
  border-radius: 12px;
  padding: 14px;
  margin-top: 6px;
}
.legal-note-title { font-size: 13px; font-weight: 700; color: #A9721B; margin-bottom: 6px; display: block; }
.legal-note-content { font-size: 12.5px; line-height: 1.8; color: #8A6417; }

/* 理财产品协议弹窗：叠加在“申购”底部抽屉之上的第二层抽屉 */
.agreement-sheet-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 200;
}
.agreement-sheet-mask.show { display: flex; }
.agreement-sheet-box {
  background: #fff;
  width: 100%;
  max-width: 480px;
  height: 82vh;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  animation: sheet-slide-up 0.22s ease-out;
}
.agreement-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  flex: none;
  border-bottom: 1px solid var(--color-border);
}
.agreement-sheet-header .agreement-sheet-title { font-size: 17px; font-weight: 700; color: var(--color-text); }
.agreement-sheet-header .sheet-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--color-text-muted);
  padding: 4px;
  cursor: pointer;
  line-height: 1;
}
.agreement-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
}