@charset "utf-8";
/*
 * 万亿圆梦 - 公共样式
 * 兼容策略：面向手机端 + 老内核(Android 4.x / 旧版微信/QQ 浏览器)
 *  - 不使用 CSS 变量(var())，直接硬编码色值
 *  - 使用 -webkit- 前缀的弹性盒；用 margin 代替 flex gap
 *  - 全部 px 单位，容器 max-width 自适应各屏宽
 *
 * 调色板（来自 Figma 设计令牌）：
 *  主红 primary        #D01D21
 *  按钮渐变            #ED3726 -> #BB0A10
 *  次要背景(验证码底)   #FFEADC
 *  卡片渐变            #FFFDFA -> #FDEFE5
 *  正文/标签 深棕       #421C16
 *  弱化文字 muted      #978179
 *  输入分隔线          #F0E6DE
 *  卡片/输入框描边      #F2E5DB
 *  按钮文字/浅底        #FFFBF4
 *  标题金色            #EDA720
 *  底部备案文字        #FEF3EB
 */

/* ============ 重置 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  color: #421c16;
  background: #bb0a10;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* ⚠️ 修复「部分页面要先点一下屏幕才能上下滑动」
 *
 * 成因：本项目是图片密集型设计稿还原，每屏有 3~14 个 <img>，且不少是整屏级的
 *   背景 / 横幅 / 卡片图。移动端 WebView（iOS Safari 与 Android WebView 都一样）
 *   对 <img> 默认启用「原生图片拖拽 + 长按存图」手势 ——
 *   当手指的起手点落在图片上时，这个原生手势会把 touchmove 抢走，
 *   于是这一下滑动不会滚动页面；随后随便点一下屏幕会让手势状态复位，
 *   再滑就正常了。这正是「点一下才能滑」的由来。
 *
 * 修法：全局禁掉图片的拖拽与长按回调。
 *   这里【不能用 pointer-events:none】—— 全站有 12 处以上图片是包在
 *   <a>/<button> 里当按钮用的（如「查看更多 >」的箭头、悬浮返回键的图标），
 *   一旦禁用指针事件这些按钮会直接点不动。
 *   -webkit-user-drag 只关掉拖拽手势，点击照常，是精准的那一刀。 */
img {
  border: 0;
  display: block;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  user-drag: none;
  /* 长按不再弹出「存储图片 / 拷贝」菜单，该菜单同样会打断滑动 */
  -webkit-touch-callout: none;
  /* 图片本身没有取词需求，顺手关掉选中，避免长按拖出蓝色选区 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
a { text-decoration: none; color: inherit; }
input, button { font-family: inherit; outline: none; border: none; background: none; -webkit-appearance: none; appearance: none; }
button { cursor: pointer; }

/* ============ 页面与背景 ============ */
.page {
  position: relative;
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  margin: 0 auto;
  background-image: url(../images/bg.png);
  background-repeat: no-repeat;
  background-position: top center;
  -webkit-background-size: cover;
  background-size: cover;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
}

/* ---- 长图海报页壳（一卡通 / 委员会 / 退赔 等共用，海报 390x1356 顶部外溢 35px） ---- */
.kpage {
  position: relative;
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 74px;
  background-color: #bb0a10;
  overflow-x: hidden;
}
.kpage-bg {
  position: absolute;
  left: 0; top: -35px;
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}
.kpage > .kpage-in { position: relative; z-index: 1; }
.kpage.no-tab { padding-bottom: 24px; }
.kpage-top { padding: 50px 0 0 15px; }

/* ============ 顶部品牌区 ============ */
.hero { padding-top: 35px; text-align: center; }
.hero .emblem { width: 108px; height: 112px; margin: 0 auto; }
.hero .emblem img { width: 100%; height: 100%; }
.hero .brand-title { width: 274px; height: 95px; margin: 0 auto; }
.hero .brand-title img { width: 100%; height: 100%; object-fit: contain; }
.hero .brand-sub {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin-top: 4px;
}
.hero .brand-sub .line { width: 27px; height: 1px; }
.hero .brand-sub .line img { width: 100%; height: 1px; }
.hero .brand-sub b {
  font-weight: 700;
  color: #eda720;
  font-size: 8px;
  letter-spacing: 2.8px;
  margin: 0 6px;
  white-space: nowrap;
}

/* ============ 认证卡片 ============ */
.auth-card {
  position: relative;
  margin: 15px 16px 0;
  padding: 0 20px 28px;
  border-radius: 24px;
  background: #fff9f4;
  background: -webkit-linear-gradient(top, #fffdfa 0%, #fdefe5 100%);
  background: linear-gradient(170deg, #fffdfa 0%, #fdefe5 100%);
  -webkit-box-shadow: 0 12px 20px rgba(134,19,9,0.22);
  box-shadow: 0 12px 20px rgba(134,19,9,0.22);
}

/* 卡片标题（左右装饰线 + 文字） */
.card-head {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 28px 0 4px;
}
.card-head .hx { width: 32px; height: 1px; background: rgba(208,29,33,0.6); }
.card-head h1 {
  font-size: 26px;
  line-height: 39px;
  font-weight: 800;
  color: #d01d21;
  letter-spacing: 3.9px;
  margin: 0 12px;
  white-space: nowrap;
  text-indent: 3.9px;
}

/* 卡片副标题 */
.card-sub {
  text-align: center;
  color: #978179;
  font-size: 15px;
  line-height: 22.5px;
}

/* ============ 输入行 field ============ */
.fields { margin-top: 21px; }
.field {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 14px;
  border: 1px solid #f2e5db;
  border-radius: 14px;
  background: rgba(255,255,255,0.9);
  -webkit-box-shadow: 0 1px 3px rgba(116,47,37,0.06);
  box-shadow: 0 1px 3px rgba(116,47,37,0.06);
  margin-bottom: 12px;
}
.field:last-child { margin-bottom: 0; }
.field .ico { width: 20px; height: 20px; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
.field .ico img { width: 20px; height: 20px; }
.field .label {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  color: #421c16;
  font-size: 15px;
  line-height: 22.5px;
  white-space: nowrap;
  margin-left: 10px;
}
.field .divider { width: 1px; height: 16px; background: #f0e6de; margin-left: 10px; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
.field .input {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  margin-left: 10px;
  color: #421c16;
  font-size: 15px;
  line-height: 22.5px;
  background: transparent;
}
.field .input::-webkit-input-placeholder { color: #bda99e; }
.field .input:-moz-placeholder { color: #bda99e; }
.field .input::-moz-placeholder { color: #bda99e; }
.field .input:-ms-input-placeholder { color: #bda99e; }
.field .input::placeholder { color: #bda99e; }
.field .eye { width: 20px; height: 20px; margin-left: 10px; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
.field .eye img { width: 20px; height: 20px; }

/* ============ 主按钮 ============ */
.btn-cta {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  padding: 14.4px 0;
  border-radius: 12px;
  color: #fffbf4;
  font-size: 18px;
  line-height: 27px;
  font-weight: 800;
  letter-spacing: 6.3px;
  text-indent: 6.3px;
  background: #d01d21;
  background: -webkit-linear-gradient(top, #ed3726 0%, #bb0a10 100%);
  background: linear-gradient(180deg, #ed3726 0%, #bb0a10 100%);
  -webkit-box-shadow: 0 8px 10px rgba(187,10,16,0.35);
  box-shadow: 0 8px 10px rgba(187,10,16,0.35);
}
.btn-cta:active { -webkit-transform: translateY(1px); transform: translateY(1px); }

/* ============ 底部备案 ============ */
/* 字号由 8px 提到 11px（行高 10 -> 16）：8px 在真机上几乎看不清，用户已反馈。
 * 没有再往上加的余量 —— 最长的一行「京公网安备11010202000001号」在 11px 下约 180px，
 * 加徽标 18px 共约 198px；320px 视口去掉左右内边距只剩 300px，
 * 若提到 13px 就会挤到 230px 以上，与国徽行一起看着发胀。 */
.footer {
  margin-top: auto;
  padding: 16px 10px 14px;
  text-align: center;
  color: #fef3eb;
  font-size: 11px;
  line-height: 16px;
}
.footer p { margin: 0; }
/* 带徽标的备案行（国徽 + 主办单位 / 警徽 + 京公网安备）。
 * ⚠️ 徽标高度随字号一起从 11px 提到 14px —— 字号放大后仍留 11px 的图，
 *    徽标会明显矮于文字、显得脱节。14px 与 11px 文字视觉等高。
 * 用 inline-flex 而非 float/absolute：这行要整体居中，
 *    而 .footer 是 text-align:center，inline-flex 能直接被居中。 */
.footer p.wb {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.footer p.wb img {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  /* 图本身有留白，微调基线让它与 11px 文字看起来居中 */
  vertical-align: middle;
}

/* ============ 提示条(表单校验) ============ */
.toast {
  position: fixed;
  left: 50%;
  top: 42%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  max-width: 80%;
  padding: 10px 16px;
  border-radius: 8px;
  background: rgba(0,0,0,0.78);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  z-index: 9999;
  display: none;
}
.toast.show { display: block; }

/* ============ 公共品牌栏（国徽 + 万亿圆梦 + 标语） ============ */
.brand { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
.brand-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.brand-row .emblem { width: 39px; height: 41px; }
.brand-row .emblem img { width: 100%; height: 100%; }
.brand-row .logo { width: 103px; height: 34px; margin-left: 7px; }
.brand-row .logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-slogan {
  margin-top: 5px;
  color: #f9f2a7;
  font-size: 7.5px;
  line-height: 11px;
  letter-spacing: 2.6px;
  white-space: nowrap;
  text-align: center;
}

/* ============ 公共底部导航 ============ */
.home-tabbar {
  position: fixed;
  left: 50%; bottom: 0;
  width: 100%;
  max-width: 430px;
  height: 74px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background: #fef9f4;
  border-top: 1px solid #f0e6de;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  z-index: 50;
}
.tab {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.tab .ico { width: 24px; height: 24px; }
.tab .ico img { width: 24px; height: 24px; }
.tab span { margin-top: 3px; color: #421c16; font-size: 11.5px; line-height: 17.25px; }
.tab.active span { color: #d01d21; }

/* ============ 公共红色标题栏（子页面用） ============ */
.tbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 50px;
  background: #d01d21;
  background: -webkit-linear-gradient(top, #ed3726 0%, #bb0a10 100%);
  background: linear-gradient(180deg, #ed3726 0%, #bb0a10 100%);
  -webkit-box-shadow: 0 2px 6px rgba(92,2,4,0.25);
  box-shadow: 0 2px 6px rgba(92,2,4,0.25);
  z-index: 30;
}
.tbar .title {
  line-height: 50px;
  text-align: center;
  color: #fffbf4;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
}
.tbar .back {
  position: absolute;
  left: 0; top: 0;
  width: 48px; height: 50px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.tbar .back img { width: 18px; height: 18px; }

/* ============ 公共区块小标题（红竖条 + 文字） ============ */
.sec-head {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.sec-head i { width: 4px; height: 16px; border-radius: 4px; background: #d01d21; }
.sec-head b { margin-left: 8px; color: #421c16; font-size: 16px; line-height: 24px; font-weight: 800; }

/* ============ 通用弹窗 ============ */
.modal-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9998;
  display: none;
}
.modal-mask.show {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.modal-box {
  position: relative;
  width: 300px;
  max-width: 84%;
  padding: 34px 24px 24px;
  border-radius: 18px;
  background: #fffdfa;
  background: -webkit-linear-gradient(top, #fffdfa 0%, #fdefe5 100%);
  background: linear-gradient(180deg, #fffdfa 0%, #fdefe5 100%);
  text-align: center;
  -webkit-box-shadow: 0 12px 30px rgba(92,2,4,0.35);
  box-shadow: 0 12px 30px rgba(92,2,4,0.35);
}
.modal-badge {
  position: absolute;
  left: 50%; top: -24px;
  margin-left: -24px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #d01d21;
  background: -webkit-linear-gradient(top, #ed3726 0%, #bb0a10 100%);
  background: linear-gradient(180deg, #ed3726 0%, #bb0a10 100%);
  color: #fffbf4;
  font-size: 30px;
  font-weight: 700;
  line-height: 48px;
  text-align: center;
  -webkit-box-shadow: 0 6px 12px rgba(187,10,16,0.4);
  box-shadow: 0 6px 12px rgba(187,10,16,0.4);
}
.modal-title {
  color: #d01d21;
  font-size: 19px;
  font-weight: 800;
  line-height: 28px;
  letter-spacing: 1px;
}
.modal-msg {
  margin-top: 12px;
  color: #6b4b41;
  font-size: 14.5px;
  line-height: 22px;
}
.modal-btn {
  display: block;
  width: 100%;
  margin-top: 22px;
  padding: 12px 0;
  border-radius: 12px;
  color: #fffbf4;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  background: #d01d21;
  background: -webkit-linear-gradient(top, #ed3726 0%, #bb0a10 100%);
  background: linear-gradient(180deg, #ed3726 0%, #bb0a10 100%);
  -webkit-box-shadow: 0 6px 10px rgba(187,10,16,0.35);
  box-shadow: 0 6px 10px rgba(187,10,16,0.35);
}
.modal-btn:active { -webkit-transform: translateY(1px); transform: translateY(1px); }
/* 可选取消按钮（仅 modal({cancel:'取消'}) 时显示），用于不可逆操作的二次确认 */
.modal-cancel {
  display: none;
  margin-top: 10px;
  color: #978179;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
}
.modal-cancel.show { display: block; }

/* 多按钮弹窗（WYY.modal 的 opts.btns 模式）。
   竖排而非横排：3 个中文按钮横排后每个只有 100px 左右，
   「查看预约信息」这类 6 字文案会折行或被截断。 */
.modal-btns { display: none; margin-top: 4px; }
.modal-btns.show { display: block; }
.modal-mbtn {
  display: block;
  margin-top: 9px;
  padding: 11px 0;
  border-radius: 999px;
  background: #fff1ef;
  border: 1px solid #f0cfc7;
  color: #d01d21;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
/* 首个按钮为主操作：实心主色 */
.modal-mbtn.p {
  background: #d01d21;
  background: -webkit-linear-gradient(left, #ed3726, #bb0a10);
  background: linear-gradient(90deg, #ed3726, #bb0a10);
  border-color: transparent;
  color: #fffbf4;
}

/* 按钮下方的补充说明（modal 的 opts.note）。
   ⚠️ 用主红色而非浅灰：这行字是「另一条出路」的提示，
      灰色会被当成免责声明扫过去。字号比正文小一档以区分层级。 */
.modal-note { display: none; }
.modal-note.show {
  display: block;
  margin-top: 11px;
  color: #d01d21;
  font-size: 12.5px;
  line-height: 19px;
  text-align: left;
}

/* ============ 小屏适配 ============ */
@media screen and (max-width: 340px) {
  .card-head h1 { font-size: 23px; letter-spacing: 2px; text-indent: 2px; }
  .field .label { font-size: 14px; }
  .field .input { font-size: 14px; }
}

/* ---------- 悬浮返回键 ----------
 * 给那些【自带整页设计、没有标题栏】的页面用（名额查询、政策文件等）。
 * 绝对定位悬浮在左上角，不参与布局流，所以不会把原有 1:1 还原的版面顶偏。
 * 半透明深色底 + 白箭头，红底/浅底背景上都能看清。 */
.fab-back {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 20;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .28);
  text-decoration: none;
}
.fab-back img {
  width: 22px;
  height: 22px;
  /* 全局 img{display:block}，居中必须用 margin 而非 text-align */
  margin: 6px auto 0;
}
/* 右上变体：个别页面左上角被品牌块（国徽+logo）占满，放左边会和国徽叠在一起。
 * 名额查询页实测品牌区占 20,24→169,77，与 12,12 的返回键正面冲突，故改挂右上。 */
.fab-back.r { left: auto; right: 12px; }

/* ============ 客服 / 官方群 二维码弹窗 ============
 * 绑定 .js-service 与 .js-group，见 assets/js/contact.js
 * 放在 common.css 是因为这两类按键散布在首页、我的、登录页等多处，
 * 每个页面都要能用；单独出一个 css 文件反而要逐页引入、必漏。
 * 配色沿用站内体系：主红 #d01d21(渐变 #ed3726→#bb0a10)、米白卡 #fffdfa→#fdefe5、
 * 深文字 #421c16、次要 #978179、金饰 #ffefa9→#f5a420 */
.qr-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 9995;                 /* 高于弹窗公告(9990)，低于系统提示(9998) */
  display: none;
  background: rgba(0, 0, 0, .5);
}
.qr-mask.show {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.qr-box {
  position: relative;
  width: 300px;
  max-width: 84%;
  padding: 22px 22px 20px;
  border-radius: 18px;
  background: #fffdfa;
  background: -webkit-linear-gradient(top, #fffdfa 0%, #fdefe5 100%);
  background: linear-gradient(180deg, #fffdfa 0%, #fdefe5 100%);
  text-align: center;
  -webkit-box-shadow: 0 12px 30px rgba(92, 2, 4, .35);
  box-shadow: 0 12px 30px rgba(92, 2, 4, .35);
}
.qr-box .qr-t {
  color: #d01d21;
  font-size: 18.5px;
  font-weight: 800;
  line-height: 27px;
  letter-spacing: .5px;
}
/* 标题下的金色小分隔，与弹窗公告保持同一视觉语言 */
.qr-box .qr-t + .qr-s { margin-top: 7px; }
.qr-box .qr-s {
  color: #978179;
  font-size: 12.5px;
  line-height: 19px;
}
.qr-box .qr-img {
  margin: 14px auto 0;
  padding: 9px;
  width: 188px;
  border-radius: 12px;
  background: #fff;
  -webkit-box-shadow: 0 2px 8px rgba(92, 2, 4, .12);
  box-shadow: 0 2px 8px rgba(92, 2, 4, .12);
}
.qr-box .qr-img img {
  display: block;
  width: 170px;
  height: 170px;
  /* 二维码原图不是正方形（346x371 / 360x365），
     用 contain 而非 cover，避免把定位角裁掉导致扫不出来 */
  -o-object-fit: contain;
  object-fit: contain;
}
.qr-box .qr-tip {
  margin-top: 11px;
  color: #b0968c;
  font-size: 11.5px;
  line-height: 17px;
}
.qr-box .qr-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 11px 0;
  border: 0;
  border-radius: 12px;
  color: #fffbf4;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: none;
  background: #d01d21;
  background: -webkit-linear-gradient(top, #ed3726 0%, #bb0a10 100%);
  background: linear-gradient(180deg, #ed3726 0%, #bb0a10 100%);
  -webkit-box-shadow: 0 6px 10px rgba(187, 10, 16, .35);
  box-shadow: 0 6px 10px rgba(187, 10, 16, .35);
}
.qr-box .qr-btn:active { -webkit-transform: translateY(1px); transform: translateY(1px); }
.qr-box .qr-btn.plain {
  margin-top: 9px;
  background: transparent;
  border: 1px solid #e6d3c8;
  color: #978179;
  font-weight: 600;
  -webkit-box-shadow: none;
  box-shadow: none;
}
/* 操作顺序提示：比 .qr-tip 更醒目（要让用户真的先去下载 APP），
   故用暖色底块 + 主色文字，而不是继续用灰色小字。 */
.qr-box .qr-note {
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #fff3ec;
  color: #c4161c;
  font-size: 11.5px;
  line-height: 17px;
}
/* 「立即下载XXAPP」：与主按钮同尺寸但降一级 —— 描边金底、非实心红。
   两个实心红按钮并排会分不出主次，用户容易点错顺序。
   不复用 .plain（那是「关闭」的中性灰），这个仍属正向操作。 */
.qr-box .qr-btn.app {
  margin-top: 9px;
  color: #c4161c;
  background: #fff6ea;
  border: 1px solid #efc98f;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.qr-box .qr-x {
  position: absolute;
  right: 8px; top: 8px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(66, 28, 22, .1);
  color: #7a5c53;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
}

/* 登录页信息行里的「在线客服」原本是死文字，现改为可点，给个可点的视觉暗示 */
.info-row .grp.js-service,
.info-row .grp.js-group { cursor: pointer; }
.info-row .grp.js-service:active,
.info-row .grp.js-group:active { opacity: .65; }

/* ============ 436万元申请入口横幅（Figma Group 66 / 7:8） ============
 * 「我的」与「首页」共用。放 common.css 而不是各自的页面样式里，
 * 是因为两边引的 CSS 不同（mine.css vs home.css），复制一份迟早会改漏一边。
 * 「立即进入」用百分比定位而非绝对像素：底图按宽度自适应缩放，
 * 用 px 会在不同屏宽下偏离按钮位置。 */
.mbanner { position: relative; display: block; margin-top: 8px; }
.mbanner img { width: 100%; height: auto; border-radius: 18px; }
.mbanner .ent {
  position: absolute;
  left: 59.84%;
  top: 69.91%;
  width: 35.05%;
  height: 16.02%;
  border-radius: 16px;
  background: #fff6e2;
  background: -webkit-linear-gradient(top, #fffaf0, #ffe9b8);
  background: linear-gradient(180deg, #fffaf0, #ffe9b8);
  box-shadow: 0 2px 6px rgba(120, 30, 0, .35);
  color: #c8151a;
  font-size: 14px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
  white-space: nowrap;
}
.mbanner .ent i { margin-left: 3px; font-style: normal; font-weight: 400; }

/* ============ 提现预约横幅（首页 + 我的，共用一张图） ============
 * 原先是「我的」页专用的纯 CSS 文字条（标签 + 24 字文案 + 立即预约），
 * 按需求换成策划给的中秋横幅图，且首页也要放一条。
 * 放 common.css 而不是各自的页面样式里 —— 首页引 home.css、我的引 mine.css，
 * 复制一份迟早改漏一边（.mbanner 当初就是因为这个搬过来的）。
 *
 * ⚠️ 素材 1248x534（2.34:1）必须 width:100% + height:auto 等比缩放。
 *    给固定高度的话，390 与 320 两种屏上会一个被压扁、一个被拉长。 */
.bkbanner {
  display: block;
  margin: 10px 12px 0;
  border-radius: 12px;
  overflow: hidden;          /* 圆角要裁到图片上，否则四角会露出直角 */
  text-decoration: none;
  line-height: 0;            /* 去掉 inline 图片底部那 3~4px 的基线空隙 */
  -webkit-box-shadow: 0 3px 10px rgba(208, 29, 33, .22);
  box-shadow: 0 3px 10px rgba(208, 29, 33, .22);
}
.bkbanner img { display: block; width: 100%; height: auto; }
.bkbanner:active { opacity: .9; }

/* 首页版：对齐上方委员会横幅的 12px 左右边距，并给出与它一致的上间距 */
.bkbanner.home-bkbanner { margin: 13px 12px 0; }

/* 首页版：按需求把这张海报【缩小】。
 * 原来是左右各 12px 边距的通栏（390 下 366px 宽），改为 85% 居中（390 下约 331px）。
 * 用百分比宽度而不是加大左右 margin：横幅是等比缩放的位图，
 * 宽度一变高度跟着变，而 .ent 按钮是按百分比定位的，会一起缩，不会错位。
 * ⚠️ 只改首页这一处 —— 「我的」页那张（.mbanner 不带 home-mbanner）保持原大小。 */
.mbanner.home-mbanner {
  width: 85%;
  max-width: 340px;
  margin: 13px auto 0;
}

/* 窄屏兜底：.ent 的高度是底图高度的 16.02%（会随宽度缩），
 * 但 line-height 写死 30px —— 320px 视口下按钮只有约 25px 高，文字会溢出药丸。 */
@media screen and (max-width: 359px) {
  .mbanner .ent { font-size: 12px; line-height: 25px; }
}