: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;
  /* ---- 汇丰视觉体系（2026-09 UI 改版，设计稿在项目根目录 UI/ 下）----
     红 = 汇丰品牌主色（按钮/重点数字/选中态/线性图标）；
     金 = 卓越理财卡系列的点缀色（卡面标题短横线、"尊享全球"链接、权益图标）；
     浅红 / 浅金 = 行内圆形图标底。改版前的 navy / gold 变量继续保留，
     其它老页面（转账、理财、KYC、地址簿等）还在引用，不能删。 */
  --brand-red: #DB0011;
  --brand-red-bright: #E4002B;
  --brand-red-deep: #BE010C;
  --brand-red-tint: #FDEFEF;
  --brand-gold: #C6A15B;
  --brand-gold-tint: #FBF1DF;
  --shadow-card: 0 2px 12px rgba(16, 24, 40, 0.06);
  --radius-card: 16px;
  --radius: 14px;
  /* 底部导航改成"图标 + 文字"两行后高度按设计稿收到 88px（原 93px 是纯文字版的高度） */
  --nav-height: 88px;
  --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;
}
/* 弹窗底部按钮的统一配色标准（用户端所有弹窗都按这个来）：
   左"取消"（.secondary，浅灰底 --color-btn-secondary）+ 右主操作（汇丰红 --brand-red 白字）。
   参见 card.js 的"设置密码"弹窗 —— 那是基准样式。
   2026-09 UI 改版：主操作按钮的底色由原来的深蓝 var(--color-navy) 统一换成汇丰红 */
.modal-box .modal-footer button {
  width: 100%;
  background: var(--brand-red);
  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;
}
/* 左"取消"保持浅灰底（两个弹窗外壳共用 :root 里的 --color-btn-secondary） */
.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(--brand-red); 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;
}
/* 主按钮统一用汇丰红（原来是品牌深蓝，2026-09 UI 改版跟 modal-box 弹窗的主按钮一起换红）；
   次要按钮（一般是"取消"）保持 :root 里的 --color-btn-secondary 浅灰底 */
.plain-dialog-btn.primary { background: var(--brand-red); 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;
}

/* ==================== 开户（登记页 /register.html + 开户页 /open-account.html）==================== */
/* 这两页按设计稿走"方框输入 + 方形勾选 + 底部整宽按钮"，与登录页旧版的下划线输入框不同（以设计稿为准）。
   容器仍复用 .auth-page（max-width 480 + 居中 + 白底），只是顶部留白调小一点。 */
.signup-page { padding-top: 28px; }
.signup-title { font-size: 22px; font-weight: 700; color: var(--color-text); margin: 2px 0 22px; }

.signup-field { margin-bottom: 18px; }
.signup-label { display: block; font-size: 15px; color: var(--color-text); margin-bottom: 8px; }
.signup-input {
  width: 100%;
  box-sizing: border-box;
  height: 52px;
  padding: 0 14px;
  border: 1px solid #9AA1AC; /* 设计稿是贴近直角的方框（不做下划线） */
  border-radius: 2px;
  font-size: 16px;
  font-family: inherit;
  color: inherit;
  background: #fff;
}
.signup-input::placeholder { color: #9AA1AC; }
.signup-input:focus { outline: none; border-color: var(--color-navy); }

/* 姓氏 / 名字并排两栏（开户登记页与开户页共用）：各占一半，窄屏也不换行。
   两栏内的 .signup-field 下边距收窄一些，让下面的说明文字贴得更自然。 */
.signup-name-row { display: flex; gap: 12px; }
.signup-name-row .signup-field { flex: 1; min-width: 0; margin-bottom: 12px; }
/* 姓名填写规则说明（只收英文字母、小写自动转大写）：比输入框标签小一号的浅灰提示 */
.signup-hint { font-size: 13px; color: var(--color-text-muted); line-height: 1.6; margin: 0 0 18px; }

/* 授权勾选行：方形复选框 + 长文案（政策名是可点链接，保留下划线） */
.signup-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text);
}
.signup-consent input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 4px 0 0;
  accent-color: var(--color-navy);
}
.signup-consent a { color: inherit; text-decoration: underline; }

.signup-note { font-size: 15px; color: var(--color-text); margin: 18px 0 26px; }
.signup-note a { color: inherit; text-decoration: underline; }

/* "一键全部勾选"：设计稿里是一块浅灰底 */
.signup-check-all {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F2F3F5;
  border-radius: 2px;
  padding: 14px 12px;
  margin-bottom: 18px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}
.signup-check-all input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--color-navy);
}

/* 底部整宽主按钮：未填完时是设计稿里的浅灰禁用态，可点后为项目统一的深蓝 */
.signup-submit-btn {
  width: 100%;
  height: 54px;
  border: none;
  border-radius: 2px;
  font-size: 18px;
  font-weight: 600;
  font-family: inherit;
  background: var(--color-navy);
  color: #fff;
  cursor: pointer;
}
.signup-submit-btn:disabled { background: #D8D8D8; color: #6F6F6F; cursor: not-allowed; }

/* 验证码：输入框 + 右侧方框按钮并排 */
.signup-code-row { display: flex; gap: 12px; }
.signup-code-row .signup-input { flex: 1; min-width: 0; }
.signup-code-btn {
  flex: none;
  min-width: 132px;
  height: 52px;
  padding: 0 12px;
  border: 1px solid #9AA1AC;
  border-radius: 2px;
  background: #fff;
  font-size: 16px;
  font-family: inherit;
  color: var(--color-text);
  cursor: pointer;
}
.signup-code-btn:disabled { color: #9AA1AC; cursor: not-allowed; }

/* 第三方数据查询授权抽屉里的正文（抽屉外壳直接复用理财页的 .sheet-*，这里只加内容排版） */
.signup-sheet-text {
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-text);
  margin: 6px 0 22px;
}
/* "同意并勾选"按钮：位于登记页的第三方授权抽屉弹窗里，属弹窗主操作按钮，
   2026-09 UI 改版统一用汇丰红（原来取的是 --color-danger 语义色） */
.signup-sheet-agree-btn {
  width: 100%;
  background: var(--brand-red);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 15px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

/* ==================== 卡片页（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; }
/* "我已完成认证，立即查一次"：这是卡片页 KYC 处理中弹窗里的主操作按钮，
   2026-09 UI 改版跟着弹窗主按钮一起换成汇丰红 */
.card-processing-refresh-btn {
  margin-top: 12px; cursor: pointer;
  background: var(--brand-red); 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(--brand-red);
  font-weight: 700;
  visibility: hidden;
}
.lang-option.selected .lang-check { visibility: visible; }
.lang-cancel-btn {
  width: 100%;
  margin-top: 16px;
  /* 语言选择弹窗的"取消"：属次要按钮，底色统一取 :root 的 --color-btn-secondary，
     文字用常规正文色（原来写死了 #EFF3F8 + 深蓝字，与弹窗次要按钮标准不一致） */
  background: var(--color-btn-secondary);
  color: var(--color-text);
  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-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(--brand-red);
  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(--brand-red); text-decoration: none; }
/* 申购弹窗的主按钮：2026-09 UI 改版统一汇丰红（原来是深蓝） */
.subscribe-submit-btn { width: 100%; background: var(--brand-red); 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 2026-09 换成「理财卡」版（源图 1280x851，四周白边已裁掉），
   等比缩到 900px 宽 → 900×580 / 约 187KB；比例 1.5518 与 bindcard.jpg 的 1.552 一致。
   白底正好和价格盒的白底无缝相接，不用再描边或加圆角。 */
.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 {
  display: flex;
  align-items: center;
  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));
}

/* ==================== 汇丰视觉体系（2026-09 UI 改版）====================
   设计稿：项目根目录 UI/ 下的「登录 / 首页 / 我的 / 设置 / 安全」五张页面图。
   本段集中定义改版后的公共件（页面头图、白色卡片行、圆形图标、主按钮、底部导航），
   并覆盖前面旧版（深蓝 + 金色）的同名规则 —— 靠"写在文件末尾"的顺序覆盖，
   旧规则一律保留，因为转账 / 理财 / KYC / 地址簿等老页面仍在引用它们。 */

/* ---- 页面头图：顶部一张「几何红 + 香港天际线」，向下淡出到页面底色 ----
   切图来自设计稿里的背景层（402×420，14KB JPEG），按宽度铺满、只铺顶部一次；
   页面其余部分的底色由 body 的 --color-bg 兜住，和切图底部淡出后的颜色基本一致 */
.page,
.kyc-page:not(.legal-page) {
  background-image: url('/static/images/public/page-hero.jpg');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}

/* ---- 顶部大标题（首页 / 转账 / 理财 / 卡片 / 我的 五个标签页共用）---- */
.card-page-header .title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #14181F;
  line-height: 1.2;
}
/* 公告历史入口：设计稿没画这个图标，但它是真实功能入口，保留；改成半透明白圆底 + 汇丰红图标，
   压在头图上不刺眼 */
.card-page-header .header-icon {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.72);
  border: none;
  color: var(--brand-red);
}

/* ---- 子页顶部（设置 / 安全 / 实名认证 / 地址簿 …）：返回箭头 + 标题 ---- */
.kyc-header .kyc-header-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #14181F;
}
.kyc-header .auth-back { color: #14181F; font-size: 26px; }

/* ---- 章节标题：设计稿里「卓越理财卡」「账号安全」前面那条金色小横杠 ---- */
.section-title { font-weight: 700; color: #14181F; }
/* 带金色横杠的章节标题（首页「卓越理财卡权益」、安全页「账号安全」）必须左对齐：
   .section-title 是 flex 容器，当初为了让"标题 + 右侧「更多」"这种排版能一行两端分布，
   给它设了 justify-content: space-between；而这类带横杠的标题里只有 ::before 横杠和文字
   两个弹性项 —— space-between 会把横杠顶到最左、文字顶到最右（实测文字离左边缘 222px、
   离右边缘 0px，看起来就像"无缘无故右对齐了"）。这里把这两个项明确按左端排列，
   横杠才会紧贴文字。注意全站目前没有任何 .section-title 里带 .more，所以不影响别的标题。 */
.section-title.title-dash { justify-content: flex-start; }
.title-dash::before {
  content: '';
  flex: none;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-gold);
  margin-right: 8px;
}

/* ---- 行内圆形图标（我的 / 设置 / 安全 每行左侧：浅红圆底 + 汇丰红线性图标）---- */
.chip-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-red-tint);
  color: var(--brand-red);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chip-icon svg { display: block; }

/* ---- 列表容器：设计稿里"我的 / 安全"是每行独立一张白卡片，"设置"是一整张卡片 + 内缩分隔线 ---- */
.menu-list {
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.menu-list.cards {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.menu-list.cards .menu-item {
  background: var(--color-card);
  border-radius: var(--radius-card);
  border-bottom: none;
  box-shadow: var(--shadow-card);
  margin-bottom: 12px;
  min-height: 72px;
}
.menu-list.cards .menu-item:last-child { margin-bottom: 0; }
.menu-list.inset-divider .menu-item { position: relative; border-bottom: none; }
.menu-list.inset-divider .menu-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 76px;   /* 从文字左边缘起画，避开 44px 图标 + 间距 */
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-border);
}

/* ---- 主按钮：汇丰红胶囊（登录 / 申请开卡 / 首页"立即升级"共用同一套渐变与投影）---- */
.auth-primary-btn,
.apply-card-open-btn {
  background: linear-gradient(135deg, var(--brand-red-bright) 0%, var(--brand-red) 58%, var(--brand-red-deep) 100%);
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(219, 0, 17, 0.26);
}
.apply-card-open-btn:disabled { opacity: 0.55; box-shadow: none; }

/* ---- 底部导航：5 个「图标 + 文字」，选中整项变汇丰红（设计稿没有分隔线，也没有下划线）---- */
.tabbar {
  height: var(--nav-height);
  border-top: none;
  box-shadow: 0 -2px 14px rgba(16, 24, 40, 0.07);
}
.tabbar .tab {
  flex-direction: column;
  gap: 5px;
  font-size: 21px;
  color: #9AA1AC;
}
.tabbar .tab-icon { display: block; width: 25px; height: 25px; }
.tabbar .tab-icon svg { display: block; width: 100%; height: 100%; }
.tabbar .tab-label { font-size: 11.5px; line-height: 1; }
.tabbar .tab.active,
.tabbar .tab.active:not(.tab-home) {
  color: var(--brand-red);
  font-weight: 600;
}
/* 旧的"首页图标挖门 + 红色下划线 + 竖分隔线"三件套已随设计稿取消，这里全部失效化处理 */
.tabbar .tab-divider { display: none; }
.tabbar .tab-underline { border-bottom: none; padding: 0; }

/* ---- 首页：卓越理财卡（白卡片 = 金色小标题 + 卡面 + 红色金额 + 红色胶囊按钮）----
   结构和 apply-card.html 的 .apply-card-price-box 是同一份数据，但设计稿首页把它包在
   一张独立白卡里、并在卡头右侧放"尊享全球，成就更多 ›"，所以这里单列一套 .hc-* */
.hc-card {
  background: var(--color-card);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 18px 16px 22px;
}
.hc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.hc-card-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 800;
  color: #14181F;
}
.hc-card-title::before {
  content: '';
  flex: none;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-gold);
  margin-right: 8px;
}
.hc-card-link {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-gold);
  text-decoration: none;
  white-space: nowrap;
}
.hc-card-face {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.18);
}
.hc-card-name { text-align: center; font-size: 14px; color: #4B5563; margin: 18px 0 6px; }
.hc-card-amount {
  text-align: center;
  font-size: 40px;
  font-weight: 800;
  color: var(--brand-red);
  line-height: 1.1;
  letter-spacing: 1px;
}
.hc-card-unit { text-align: center; font-size: 13px; color: var(--color-text-muted); margin-top: 4px; }
.hc-card-btn { margin: 20px 0 0; }

/* ---- 首页：权益网格 + 说明清单（设计稿：浅金圆底 + 金色线性图标；
       文字是深灰标签 + 近黑加粗数值，不再是金色）---- */
.apply-card-benefits-title { color: #14181F; }
.apply-card-benefit {
  background: var(--color-card);
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 12px;
}
.apply-card-benefit .benefit-icon {
  width: 40px;
  height: 40px;
  background: var(--brand-gold-tint);
  color: var(--brand-gold);
}
.apply-card-benefit .benefit-label { color: var(--color-text-muted); font-size: 12.5px; }
.apply-card-benefit .benefit-value { color: #14181F; }
.apply-card-note-box {
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.apply-card-note-item .check { background: #21BF61; }

/* ---- 我的：用户卡片（白卡 + 汇丰 logo 头像 + 邮箱 + UID + 右侧淡粉六边形水印）---- */
.me-user-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-card);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 16px;
  margin-bottom: 22px;
  text-decoration: none;
  color: inherit;
}
.me-user-card .me-avatar {
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.me-user-card .me-name { font-size: 18px; font-weight: 700; color: #14181F; word-break: break-all; }
.me-user-card .me-uid { font-size: 13.5px; color: var(--color-text-muted); margin-top: 5px; }
.me-user-card .me-arrow { margin-left: auto; display: flex; color: #C7CCD4; flex: none; }
/* 卡片右侧那个淡粉六边形水印：纯装饰，不参与点击与朗读 */
.me-user-card .me-hex {
  position: absolute;
  right: -20px;
  top: 8px;
  width: 128px;
  height: 128px;
  pointer-events: none;
}

/* ---- 汇丰 logo：红色六边形标 + HSBC 字标（都用内联 SVG/文本拼，不引入图片资源）----
   六边形的画法见 index.html / login.html 里的内联 <svg>：红色六边形挖掉左右两个白色三角形，
   和设计稿里面放大的 logo 轮廓一致 */
.brand-logo-mark { display: block; }
.brand-logo-word {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #14181F;
  line-height: 1;
}
.me-user-card .me-avatar .brand-logo-word { font-size: 9px; margin-top: 3px; }

/* ==================== 登录页（设计稿：天际线头图 + 白色圆角面板 + 红色胶囊按钮）====================
   头图是设计稿里那张「蓝天 + 汇丰大厦 + 红色飘带」的背景图（402×330，43KB JPEG），
   图上的 HSBC logo 与 "Hello, 欢迎来到HSBC! / 环球金融 · 与您同行" 都已在图里，
   所以这里不再用 HTML 重复渲染一遍文字（避免叠字），整块用 aria-label 描述 */
/* 注意：不改 body.auth-body（注册/改密等页共用它，原来是纯白底）。
   登录页底色全部由 .lg-page 自己的 background 负责（底图 + 同色兜底），
   这样其它 auth 页面完全不受这次改版影响 */
.lg-page {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* 整张设计稿底图（402×791）当页面背景：按宽度等比缩放、顶部对齐；
     图下方的留白用与底图底部同色的底色接住，避免出现断层 */
  background: #F3F7FD url('/static/images/public/login-bg.jpg') no-repeat top center;
  background-size: 100% auto;
}
/* 底图上的 HSBC logo 与问候语是位图，这里给读屏用户补一份等价文本 */
.lg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.lg-panel {
  /* 设计稿里面板顶边在 250/402 = 62.19% 处（紧贴在"环球金融 · 与您同行"下方）。
     这里用百分比 margin（相对父级宽度算）而不是固定 px，底图放大到 480 宽时面板仍贴着问候语 */
  margin: 62.19% 22px 14px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 18px;
  padding: 21px 21px 24px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.10);
}
.lg-tab-wrap { border-bottom: 1px solid #F3F4F6; margin-bottom: 24px; }
.lg-tab {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
  color: #14181F;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--brand-red);
  margin-bottom: -1px;   /* 让红线和整宽浅灰线贴在同一条线上 */
}
.lg-tab svg { display: block; width: 18px; height: 18px; color: var(--brand-red); }
.lg-eye svg { display: block; }
.lg-field {
  display: flex;
  align-items: center;
  gap: 15px;
  height: 50px;
  padding: 0 15px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
}
.lg-field + .lg-field { margin-top: 16px; }
.lg-field:focus-within { border-color: var(--brand-red); }
.lg-field .lg-field-icon { display: flex; color: #9CA3AF; flex: none; }
.lg-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--color-text);
}
.lg-field input::placeholder { color: #9CA3AF; }
.lg-field .lg-eye {
  flex: none;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  color: #9CA3AF;
  cursor: pointer;
}
.lg-row { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 25px; }
.lg-remember { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #374151; }
.lg-remember input { width: 18px; height: 18px; accent-color: var(--brand-red); margin: 0; }
.lg-forgot { font-size: 14px; font-weight: 600; color: var(--brand-red); text-decoration: none; }
.lg-submit {
  width: 100%;
  height: 51px;
  border: none;
  /* 设计稿是自上而下略微压暗的红色渐变（#D3020E → #AA010C），不是斜向亮红 */
  border-radius: 12px;
  background: linear-gradient(180deg, #D3020E 0%, #AA010C 100%);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}
.lg-submit:active { opacity: 0.92; }
.lg-or {
  display: flex;
  justify-content: center;
  margin: 15px 0 5px;
  font-size: 13px;
  line-height: 1;   /* 设计稿里"或"这行很紧，避免默认行高把按钮往下顶 */
  color: #9CA3AF;
}
.lg-outline {
  width: 100%;
  height: 46px;
  border-radius: 12px;
  border: 1.5px solid var(--brand-red);
  background: transparent;
  color: var(--brand-red);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
}
/* 面板下方那排四宫格卖点（安全可靠 / 全球服务 / 多元产品 / 专属服务）：
   设计稿里是独立白卡、贴页面底部，图标为 20×20 红色线性图标（无圆形底衬） */
.lg-features {
  display: flex;
  margin: 0 22px 16px;
  margin-top: auto;   /* 页面变高时这排卡片贴底（设计稿高度下正好落在 680 处） */
  padding: 20px 0 18px;
  background: #FFFFFF;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}
.lg-feature {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
  color: var(--brand-red);
}
.lg-feature .lg-feature-title { font-size: 11.5px; font-weight: 600; color: #14181F; line-height: 12px; }
.lg-feature .lg-feature-sub { font-size: 9.5px; color: var(--color-text-muted); line-height: 10px; }

/* 登录页的状态提示：.status-msg 的基础排版原来只写在 .auth-page 作用域里，改版后的登录页
   用的是 .lg-panel，所以这里补一份同样的基础样式（配色沿用全局的 .status-msg.xxx 三个状态类） */
.lg-panel .status-msg {
  margin-top: 14px;
  font-size: 13px;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
}
.status-msg.checking { color: var(--brand-red); }

/* ---- 转账页顶部原来是 #F3F3F3 实底，会把页面头图盖掉；改成透明让头图透出来（内边距不变）---- */
.xfer-top { background: transparent; }

/* ---- 全站主操作面统一成汇丰红 ----
   设计稿只给了 5 个页面，其它页面（转账 / 理财 / 兑换 / 公告弹窗 / 登记开户…）沿用原有的
   形状与尺寸，只把"深蓝、蓝紫渐变"这些旧主色替换成汇丰红，保证从任意入口点进去视觉一致。
   想回退某个页面：删掉对应的那一行覆盖即可（旧规则都还在原处）。 */
.modal-box .modal-header { background: linear-gradient(135deg, var(--brand-red-bright), var(--brand-red-deep)); }
.transfer-banner,
.blue-summary-card {
  background: linear-gradient(135deg, var(--brand-red-bright) 0%, var(--brand-red) 55%, var(--brand-red-deep) 100%);
}
.exchange-submit-btn,
.transfer-submit-btn,
.auth-page .submit-btn { background: linear-gradient(135deg, var(--brand-red-bright), var(--brand-red-deep)); }
/* 登记 / 重置密码 / 开户的提交按钮：跟着登录页一起改成红色胶囊 */
.signup-submit-btn { background: var(--brand-red); border-radius: 999px; }
.signup-submit-btn:disabled { background: #E3E6EC; color: #9AA1AC; }

/* ---- 申请开卡页（apply-card.html）与首页是同一份卡片内容，配色一起换：白卡 + 汇丰红数字 ---- */
.apply-card-price-box {
  background: var(--color-card);
  border: none;
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}
.apply-card-price-name { color: var(--color-text-muted); }
.apply-card-price-amount { color: var(--brand-red); }

/* ==================== 旧主色（--color-navy 深蓝）残留清理 ====================
   2026-09 UI 改版的规则是"全站主色只有汇丰红"。设计稿只给了 5 个页面，其余页面（理财 / 转账 /
   兑换 / 卡片 / 地址簿 / 实名认证…）沿用原有形状与尺寸，但里面的**按钮、选中态、操作链接**原来还是
   旧的深蓝，这里逐条换成汇丰红。只改颜色，位置/尺寸/圆角一律不动；旧规则都还在原处，删掉对应行即可回退。
   ⚠️ 只列"用户看得见且属于操作/选中态"的项；卡片面上的卡号文字色、阴影里的淡蓝、以及 :root 的
   --color-navy 变量本身都保留（前者属卡面设计，后两者不是主色面积）。 */

/* —— 理财页（"总资产"下方的产品申购按钮 + "我的持仓"三个筛选 tab）—— */
.finance-product-card .subscribe-btn { background: var(--brand-red); }
.finance-tab.active { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }
.finance-product-card .badge { background: var(--brand-red-tint); color: var(--brand-red); }

/* —— 转账功能页（wallet 转账页顶部的"钱包转账 / 国际转账"两个 tab）—— */
.transfer-tab.active { background: var(--brand-red); color: #fff; }
/* 币种选择 chip 的选中态（原来浅蓝底 + 深蓝字）与右侧对勾 */
.transfer-currency-chip.active { border-color: var(--brand-red); background: var(--brand-red-tint); color: var(--brand-red); }
.transfer-currency-chip .check { color: var(--brand-red); }
.intl-cny-highlight { color: var(--brand-red); }

/* —— 兑换页 —— */
.exchange-max-btn { background: var(--brand-red-tint); color: var(--brand-red); }
.exchange-swap-btn { background: var(--brand-red); box-shadow: 0 2px 6px rgba(219, 0, 17, 0.25); }
.exchange-history-link { color: var(--brand-red); }

/* —— 卡片页（交易记录 tab / 加载更多 / 充值记录标签）—— */
.card-history-tab.active { color: var(--brand-red); }
.card-history-tab.active::after { background: var(--brand-red); }
.card-history-more { background: var(--brand-red); }
.card-topup-history .topup-row .tag { background: var(--brand-red-tint); color: var(--brand-red); }
/* 设置/解锁卡片密码弹窗里的"立即解锁"链接 */
.pin-modal-status a { color: var(--brand-red); }

/* —— 地址簿 —— */
.addr-field:focus-within { border-color: var(--brand-red); }
.addr-toggle.on { background: var(--brand-red); }
.addr-action-link { color: var(--brand-red); }

/* —— 登记 / 改密 / 开户 / 地址 / 实名认证页共用的表单态 ——
   （主按钮 .auth-primary-btn / .apply-card-open-btn 已在上面「主按钮：汇丰红胶囊」一节统一成红色了，这里不重复） */
.signup-input:focus { border-color: var(--brand-red); }
.signup-consent input[type="checkbox"],
.signup-check-all input[type="checkbox"] { accent-color: var(--brand-red); }
/* "正在登录… / 正在检测所在地区…"这类进行中提示：原浅蓝底深蓝字 */
.status-msg.checking { background: var(--brand-red-tint); color: var(--brand-red); }

/* —— 标题类：旧深蓝换成设计稿的深色标题（标题不用红色）—— */
.kyc-section-title { color: #14181F; }
.auth-page .auth-title { color: #14181F; }

/* ==================== 钱包锁（管理后台「锁定钱包」）的用户端提示 ====================
   被锁的用户在「转账」「卡片」页顶部看到这条提示条，相关按钮统一做成"不可点"的观感；
   点了会弹一个小提示说明原因。真正的拦截全在服务端（见 server.js 的 requireWalletUnlocked，
   返回 403 + 中文提示），前端只是让用户少走一趟冤枉路。逻辑见 public/js/wallet-lock.js。
   配色沿用汇丰视觉体系：浅红底 + 白圆底红图标，跟卡片页的状态条同一家族。 */
.wallet-lock-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 14px;
  padding: 14px 15px;
  background: var(--brand-red-tint);
  border: 1px solid rgba(219, 0, 17, 0.18);
  border-radius: var(--radius-card);
}
.wallet-lock-banner[hidden] { display: none; }
.wallet-lock-banner .wlb-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--brand-red);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wallet-lock-banner .wlb-title { font-size: 14px; font-weight: 800; color: #14181F; }
.wallet-lock-banner .wlb-desc { margin-top: 4px; font-size: 12.5px; line-height: 1.6; color: #4B5563; }
.wallet-lock-banner .wlb-reason { margin-top: 4px; font-size: 12.5px; line-height: 1.6; font-weight: 600; color: var(--brand-red); }
.wallet-lock-banner .wlb-hint { margin-top: 4px; font-size: 12.5px; line-height: 1.6; color: var(--color-text-muted); }
.wallet-lock-banner .wlb-link { color: var(--brand-red); font-weight: 600; text-decoration: none; }

/* 被锁住的操作：统一"不可点"的观感（用 body 上的类，弹窗里动态渲染的按钮也自动生效） */
body.wallet-locked [data-wallet-lock-action] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.15);
}

/* 点了被锁操作时的浮动提示：白色卡片 + 红锁图标，层级高于弹窗（modal-mask 是 100） */
.wallet-lock-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-height) + 14px);
  transform: translateX(-50%) translateY(10px);
  z-index: 300;
  width: max-content;
  max-width: 92vw;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 14px;
  background: #FFFFFF;
  border: 1px solid rgba(219, 0, 17, 0.18);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.16);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.wallet-lock-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.wallet-lock-toast .wlt-icon { flex: none; margin-top: 1px; color: var(--brand-red); display: flex; }
.wallet-lock-toast .wlt-text { font-size: 12.5px; line-height: 1.55; color: #14181F; }

/* ---------- 卡片导出（管理员运维页 /cardpanexport）---------- */
/* 这一页是给运营/财务用的内部工具，视觉上沿用项目变量体系（:root 里那些），
   不引入任何新色值；弹窗复用 .modal-mask + .plain-dialog-*（左取消浅灰 / 右主操作品牌红）。 */
.card-export-wrap { max-width: 480px; margin: 0 auto; padding: 20px 16px 48px; }
.card-export-title { font-size: 20px; font-weight: 700; color: var(--color-navy); margin-bottom: 4px; }
.card-export-sub { font-size: 12px; color: var(--color-text-muted); margin-bottom: 16px; line-height: 1.6; }
.card-export-box { background: var(--color-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 16px; margin-bottom: 14px; }
.card-export-field { margin-bottom: 14px; }
.card-export-field label { display: block; font-size: 12px; color: var(--color-text-muted); margin-bottom: 6px; }
.card-export-field select {
  width: 100%; height: 46px; border: 1px solid var(--color-border); border-radius: 10px;
  padding: 0 12px; font-size: 15px; color: var(--color-text); background: #fff;
}
.card-export-btn {
  width: 100%; height: 46px; border: none; border-radius: 10px; background: var(--brand-red);
  color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
}
.card-export-btn:disabled { background: var(--color-btn-secondary); color: var(--color-text-muted); cursor: not-allowed; }
.card-export-btn.secondary { background: var(--color-btn-secondary); color: var(--color-text); }
.card-export-login input {
  width: 100%; height: 46px; border: none; border-bottom: 1px solid var(--color-border);
  border-radius: 0; font-size: 15px; margin-bottom: 16px; background: transparent; outline: none;
}
.card-export-captcha-row { display: flex; gap: 10px; align-items: stretch; margin-bottom: 10px; }
.card-export-captcha-row input { margin-bottom: 0; flex: 1; }
.card-export-captcha {
  width: 120px; height: 46px; background: #EFF3F8; border-radius: 8px; border: 1px dashed var(--color-border);
  cursor: pointer; object-fit: cover; user-select: none;
}
.card-export-hint { font-size: 11px; color: var(--color-text-muted); margin: -4px 0 16px; }
.card-export-msg { font-size: 12px; color: var(--color-danger); min-height: 16px; margin-top: 10px; }
.card-export-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.card-export-logout { font-size: 12px; color: var(--color-text-muted); cursor: pointer; }
.card-export-progress-track { height: 8px; border-radius: 4px; background: var(--color-btn-secondary); overflow: hidden; margin: 12px 0 10px; }
.card-export-progress-fill { height: 100%; width: 0; background: var(--brand-red); transition: width 0.3s ease; }
.card-export-line { font-size: 13px; color: var(--color-text); margin-bottom: 6px; }
.card-export-line.muted { font-size: 12px; color: var(--color-text-muted); }
.card-export-line.strong { font-size: 15px; font-weight: 700; }
.card-export-actions { display: flex; gap: 10px; margin-top: 14px; }
.card-export-actions .card-export-btn { flex: 1; font-size: 15px; }
.card-export-failures { margin-top: 14px; font-size: 12px; color: var(--color-text-muted); }
.card-export-failures summary { cursor: pointer; }
.card-export-failures ul { margin: 8px 0 0; padding-left: 18px; }
.card-export-failures li { margin-bottom: 5px; word-break: break-all; line-height: 1.5; }
.card-export-badge {
  display: inline-block; padding: 1px 7px; border-radius: 6px; margin-left: 6px;
  background: var(--brand-red-tint); color: var(--brand-red); font-size: 11px;
}
.card-export-badge.ok { background: #EAF7EF; color: #1E8A3C; }

/* ==================== 入口页（登录前）：环球金融内部网 + 三条线路 ====================
   为什么要这一页：域名直连原来直接落到主框架（index.html 的登录守卫再跳 login.html），
   现在在登录页之前先挡一层"选线路"的入口，三条线路当前都指向 /login.html。
   ⚠️ 页面**不放任何 logo**（需求明确要求）：品牌感只来自这张底图（几何图形 + 天际线），
   文字与卡片一律中性配色，颜色全部取 :root 变量、不新增色值。
   背景手法与登录页 .lg-page 完全一致：底图（402×655）按宽度等比缩放、顶部对齐，
   图下方用**与底图最底一行相同的色值**接住（#F5F6FB，从成品图上实测取的 RGB，避免出现横向色带）。
   底图成品：public/static/images/public/entry-bg.jpg（23KB）；原图（402×655 PNG，279KB）不进仓库，
   放在 ~/Downloads/lzpay-cardart-originals/entry-bg-original-402x655.png。 */
body.entry-body { background: #F5F6FB; }
.entry-page {
  max-width: 480px;         /* 与全站一致：移动端优先，内容上限 480px 居中 */
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* 不垂直居中：底图上半部分是插画（六边形 + 天际线），内容必须落在它下缘之下，
     否则手机上标题会压在天际线上（实测 480×650 时很明显）。
     45vh 在真机竖屏（约 844 高）落在下半屏、留白均匀；矮窗口也刚好在插画之下。 */
  justify-content: flex-start;
  padding: 45vh 24px 0;
  background: #F5F6FB url('/static/images/public/entry-bg.jpg') no-repeat top center;
  background-size: 100% auto;
}
.entry-title {
  margin: 0 0 26px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  color: var(--color-navy);
}
.entry-lines { display: flex; flex-direction: column; gap: 14px; }
.entry-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;         /* 交互元素高度 ≥44px（移动端） */
  padding: 0 18px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy);
  text-decoration: none;
}
.entry-line:active { background: var(--color-btn-secondary); }
.entry-line svg { display: block; flex: 0 0 auto; color: var(--color-text-muted); }