/* ========================================
   邮保同行 · 好礼相伴 — 首屏
   设计稿基准: 375px → vw = px / 3.75
   切图 @2x: CSS尺寸 = 图片尺寸 / 2
   ======================================== */

/* === Page === */
.page {
  width: 100vw;
  background: #FFF2DD;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ========================================
   核销码锁定弹窗 (375×523pt)
   ======================================== */

/* 锁定弹窗 — 遮罩居中（与前三个一致） */
#modalLocked {
  /* 继承 .modal-overlay 默认样式，不额外覆写 */
}

#modalLocked .green-nav {
  display: flex;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  z-index: 10;
}

.popup-locked-wrap {
  position: relative;
  width: 90vw;
  max-width: 375px;
  flex-shrink: 0;
}

.popup-locked-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 375 / 523;    /* 设计稿比例 */
  overflow: visible;
}

/* 背景图铺满 */
.popup-locked-inner > img:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 核销码输入区 — 对齐手动验证尺寸 */
.locked-code-boxes {
  position: absolute;
  left: 18.53%;
  top: 47.43%;                  /* 35.95% + 30/523 */
  width: 63%;
  height: 11.85%;               /* 对齐手动验证: 62/523 */
  display: flex;
  gap: 3.125%;
  justify-content: center;
}

/* 输入框继承 .code-input，仅覆盖必要的 */

/* 确认解锁按钮 — 切图, 与手动核销一致 */
.locked-confirm-btn {
  position: absolute;
  left: 17.6%;
  top: 57.18%;
  width: 64.8%;
  height: auto;
  display: block;
  cursor: pointer;
}

/* 提示文字 — 在输入框上方 */
.locked-unlock-hint {
  position: absolute;
  left: 22.7%;                  /* 左移两个字节 */
  top: 40.48%;                  /* 29% + 30/523 */
  width: 60%;
  height: 22px;
  margin: 0;
  font-family: "AlibabaPuHuiTi", "PingFang SC", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
  text-align: center;
  line-height: 22px;
  white-space: nowrap;
}

/* 限制1小时遮罩 — 216×116, rgba(0,0,0,0.7), cornerRadius 10 */
/* 在"请联系工作人员进行解锁"下方, 覆盖输入框 */
.locked-limit-overlay {
  position: absolute;
  left: 21.33%;                  /* 80/375 */
  top: 36.85%;                  /* 38.38% - 8/523 */
  width: 57.6%;                 /* 216/375 */
  height: 22.18%;               /* 116/523 */
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  z-index: 5;
  display: none;
}

.locked-limit-overlay.show {
  display: flex;
  align-items: center;          /* 文字垂直居中 */
  justify-content: center;      /* 文字水平居中 */
}

/* 文字: 144×44 双行, 垂直居中 */
.locked-limit-text {
  width: 80%;                   /* 144→173px, 容纳10中文字/行 */
  margin: 0;
  font-family: "AlibabaPuHuiTi", "PingFang SC", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #FFFFFF;
  text-align: center;
  line-height: 1.375;
  padding-top: 6px;             /* 向下3px */
  padding-left: 8px;            /* 向右: 首字"连"对齐"联" */
}

/* ========================================
   NAV BAR — 顶部白色导航
   ======================================== */

.nav-bar {
  display: flex;
  align-items: center;
  height: 12.8vw;          /* 48px */
  padding: 0 4.27vw;       /* 16px */
  background: #fff;
}

.nav-bar .btn-back {
  width: 6.4vw;
  height: 6.13vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-bar .nav-title {
  font-size: 4.27vw;
  color: rgba(0,0,0,0.87);
  margin-left: 34.13vw;
}

/* ========================================
   HEADER — 主图大背景 750×788@2x → CSS 375×394px
   ======================================== */

.header-section {
  width: 100vw;
  line-height: 0;          /* 消除图片底部间隙 */
}

.header-bg {
  display: block;
  width: 100vw;
  height: auto;
}

/* ========================================
   参与领好礼 横幅  750×352@2x → 375×176 CSS px → 46.9vw
   进店/消费卡片叠在其空白区域
   ======================================== */

.canyu-banner {
  position: relative;
  width: 100vw;
  margin-top: -14.9vw;     /* 叠入主图56px (设计稿 y:439→y:383) */
  line-height: 0;
}

.canyu-banner > img {
  display: block;
  width: 100vw;
  height: auto;
}

/* 卡片在Hero内容区内,距顶部 63px = 16.8vw (设计稿 y:446 - y:383) */
.cards-row {
  position: absolute;
  left: 0;
  right: 0;
  top: 16.8vw;
  display: flex;
  justify-content: center;
  gap: 1vw;
  padding: 0 3.2vw;
}

.card-wrap {
  width: 46.9vw;           /* 176px */
}

.card-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

/* ========================================
   京城打卡路线 Header  750×174@2x → 375×87 CSS px → 23.2vw
   ======================================== */

.route-header {
  width: 100vw;
  line-height: 0;
}

.route-header img {
  display: block;
  width: 100vw;
  height: auto;
}

/* ========================================
   CONTENT PANEL — 内容面板 (y:645, 351×622, #FEF8EE, r:12)
   ======================================== */

.content-panel {
  width: 93.6vw;           /* 351px */
  margin: 0 auto;
  padding: 0 0 2.67vw;
  background: #FEF8EE;
  border-radius: 0 0 3.2vw 3.2vw;  /* 底部12px圆角 */
}

/* ========================================
   ACTIVITY DESCRIPTION — 活动说明 (Tab 上方)
   ======================================== */

.activity-desc {
  width: 85.07vw;          /* 319px */
  margin-left: 3.47vw;      /* 13px from left */
  margin-top: 0;
  margin-bottom: 5.33vw;    /* 20px → tab区间距 */
  font-family: "AlibabaPuHuiTi", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 4vw;          /* 15px */
  font-weight: 400;         /* AlibabaPuHuiTiR */
  line-height: 1.4;         /* 15*1.4*3 ≈ 63px */
  text-align: justify;
  color: rgba(0, 0, 0, 0.87);
}

.activity-desc .highlight {
  color: #267551;
  font-weight: 500;
}

/* ========================================
   COMPLETE BUTTON — 默认大按钮 (打卡完成后显示)
   702×166@2x → 351×83 CSS px → 93.6vw × 22.1vw
   ======================================== */

.complete-btn {
  width: 93.6vw;           /* 351px */
  margin: 2.67vw auto;
  text-align: center;
}

.complete-btn img {
  display: block;
  width: 100%;
  height: auto;
}

/* ========================================
   TAB BAR
   默认: 164×164@2x → 82×82 CSS px → 21.87vw
   选中: 200×196@2x → 100×98 CSS px → 26.67vw × 26.13vw
   ======================================== */

.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;  /* 选中后向下延伸 */
  width: 93.6vw;           /* 351px */
  margin: 0 auto;
  padding: 0 1vw;
  line-height: 0;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  position: relative;
  height: 26.67vw;         /* 100px — 统一高度，选中最高的 */
}

.tab-item .tab-img {
  width: 21.87vw;          /* 82px — 默认 */
  height: auto;
}

.tab-item.active .tab-img {
  width: 26.67vw;          /* 100px — 选中, 与设计稿一致 */
}

.tab-item .tab-progress {
  position: absolute;
  top: 14.13vw;            /* 53px — 43+10 */
  left: 50%;
  transform: translateX(-50%);
  font-family: "AlibabaPuHuiTi", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 3.2vw;        /* 12px */
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
  z-index: 1;
}

/* ========================================
   CONTENT AREA
   ======================================== */

.content-area {
  margin-top: 0;
  padding: 0 0 1.67vw;     /* 6pt — 留出浮动按钮安全距离 */
}

/* --- Post Office List --- */
.po-list {
  display: flex;
  flex-direction: column;
  gap: 2.13vw;             /* 8px */
  align-items: center;
}

/* 卡片盒子 — 自带竖线和marker参考系 */
.po-item {
  position: relative;
  display: flex;
  align-items: center;
  width: 82.13vw;          /* 308px */
  margin-left: 8.27vw;     /* 31px — 设计稿 x=43, 面板 x=12 */
  margin-right: 3.2vw;     /* 12px */
  min-height: 19.73vw;      /* 74px */
  padding: 1.6vw 2.67vw 1.6vw 4.27vw;
  background: #FAEFDE;
  border-radius: 2.13vw;   /* 8px */
}

/* 竖线 — 卡片左侧 */
.po-item::before {
  content: "";
  position: absolute;
  left: -3.47vw;           /* 卡片左外 */
  top: 0;
  bottom: 0;
   width: 0.27vw;           /* 1px */
  background: rgba(0,0,0,0.12);
}

/* 首尾卡片不显示竖线 */
.po-item:first-child::before {
  top: 50%;                /* 只显示下半段 */
}

.po-item:last-child::before {
  bottom: 50%;             /* 只显示上半段 */
}

/* marker — 与竖线同一坐标系，居中在线 */
.po-item .po-marker {
  position: absolute;
  left: -6.13vw;           /* -3.47(线) - 5.33/2(半宽) = -6.13 */
  top: 50%;
  transform: translateY(-50%);
  width: 5.33vw;           /* 20pt */
  z-index: 1;
}

.po-item .po-marker img {
  display: block;
  width: 100%;
  height: auto;
}

.po-item .po-logo {
  width: 11.73vw;          /* 44px */
  flex-shrink: 0;
  margin-right: 1.6vw;
}

.po-item .po-info {
  flex: 1;
  min-width: 0;
}

.po-item .po-name {
  display: block;
  font-family: "AlibabaPuHuiTi", "PingFang SC", sans-serif;
  font-weight: 500;         /* AlibabaPuHuiTiM */
  font-size: 4vw;          /* 15px */
  color: rgba(0,0,0,0.87);
  line-height: 1.4;
  text-align: left;
  /* 允许换行，iOS 参考 numberOfLines=0, byWordWrapping */
  white-space: normal;
  word-break: break-all;
  max-width: 46.4vw;       /* 174px */
}

.po-item .po-address {
  display: block;
  font-family: "AlibabaPuHuiTi", "PingFang SC", sans-serif;
  font-weight: 400;         /* AlibabaPuHuiTiR */
  font-size: 3.47vw;       /* 13px */
  color: rgba(0,0,0,0.54);
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  word-break: break-all;
  max-width: 46.4vw;       /* 174px */
}

/* 已打卡状态：badge + 距离 */
.checked-status {
  position: absolute;
  right: 1.07vw;            /* 4px */
  top: 50%;
  transform: translateY(calc(-50% - 3.2vw));  /* 居中后再上移12px */
}

.po-item .checked-badge {
  position: relative;
  z-index: 1;               /* 覆盖在距离文字上方 */
  display: block;
  width: 19.73vw;           /* 74pt */
  height: 18.67vw;          /* 70pt */
  opacity: 1;
}

.po-distance-sm {
  position: absolute;
  top: calc(100% - 5.33vw);  /* badge 底部叠入 20px，只露 25m 底部 2px */
  right: 2.13vw;             /* 25m 右边缘比 badge 右边缘左 8px */
  font-family: "AlibabaPuHuiTi", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 3.47vw;        /* 13px — iOS 参考 */
  color: rgba(0,0,0,0.54);
  line-height: 1;
  white-space: nowrap;
}

.po-item .po-distance {
  font-family: "AlibabaPuHuiTi", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 3.47vw;       /* 13px */
  color: rgba(0,0,0,0.54);  /* iOS 参考 */
  margin-left: auto;
  margin-top: 2.67vw;       /* 10px — 对齐地址行 */
  flex-shrink: 0;
}

/* ========================================
   CHECK-IN BUTTON — floating (脱离文档流)
   256×256@2x → 128×128 CSS px → 34.13vw
   初始: 设计稿 y=632, 滚动≥200px → 底部
   ======================================== */

.check-in-wrap {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 100;
  transform: translateX(-50%) translateY(var(--btn-offset, 0px));
  display: flex;
  justify-content: center;
}

.check-in-btn {
  width: 34.13vw;           /* 128px */
  height: 34.13vw;
}

.check-in-btn img {
  display: block;
  width: 100%;
  height: auto;
}

/* ========================================
   DETAIL RULES
   ======================================== */

.detail-rules {
  width: 100%;
  height: 8vw;
  cursor: pointer;
}

/* ========================================
   打卡成功弹窗
   切图: 打卡成功弹窗.png
   设计: 375×448pt
   保留动态第三行
   ======================================== */

/* 弹窗外层 */
.popup-success-wrap {
  position: relative;
  width: 90vw;
  max-width: 375px;
  padding-bottom: 0;
}

/* 弹窗内部 — 锁死比例 375:448，保证各端 % 定位准确 */
.popup-success-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 375 / 448;
  overflow: visible;
}

.popup-success-inner > img:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 动态行 (第三行) */
.success-line {
  position: absolute;
  left: 21.6%;                /* 81/375 */
  top: 32.37%;                /* 145/448 */
  width: 56.53%;              /* 212/375 */
  height: 4.91%;              /* 22/448 */
  margin: 0;
  font-family: "AlibabaPuHuiTi", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(14px, 4.27vw, 16px);
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
  text-align: center;
  line-height: normal;
  overflow: hidden;
}

/* "已打卡" 徽章 — 设计稿坐标 + 等比缩小，右上角装饰 */
.success-badge {
  position: absolute;
  right: 10.46%;              /* 与手动验证弹窗一致 */
  top: -5.56%;                /* 与手动验证弹窗一致 */
  width: 39.47%;              /* 148/375, 原尺寸 */
  height: auto;
  pointer-events: none;
  z-index: 2;
}

/* 路线完成横幅 — 750×68@2x → 375×34px, 全宽, 在弹窗盒子下方 */
.route-banner {
  width: 100%;
  max-width: 375px;
  height: auto;
  display: block;
  margin: 0 auto;
  pointer-events: none;
}

/* 联系工作人员底部区域 */
.route-bottom-section {
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
  padding: 24px 0;
  text-align: center;
  flex-shrink: 0;
}

.route-contact-btn {
  width: 92%;
  max-width: 345px;
  height: auto;
  display: block;
  margin: 0 auto;
  cursor: pointer;
}

/* 路线完成页面：全屏，背景 #A5D8D6，非半透明遮罩 */
#modalRouteComplete {
  background: #A5D8D6;       /* 设计稿底色 */
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  padding: 110px 0 40px 0;   /* 弹窗顶部距页顶 110px */
  gap: 0;
}

/* 导航栏固定在顶部 */
#modalRouteComplete .nav-bar {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  z-index: 10;
  flex-shrink: 0;
}

#modalRouteComplete .popup-success-wrap {
  margin: 0 auto;
  flex-shrink: 0;
}

/* 横幅与弹窗底部 0 间距 */
#modalRouteComplete .route-banner {
  margin-top: 0;
}

/* 联系按钮与横幅间距 8px */
#modalRouteComplete .route-bottom-section {
  padding-top: 8px;
}

/* 关闭按钮 (复用失败弹窗相同样式) */
.success-close-btn {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 8.53vw;
  max-width: 32px;
  height: 8.53vw;
  max-height: 32px;
  background: url("../img/tanchuang-guanbi.png") no-repeat center/contain;
  border: none;
  cursor: pointer;
}

/* ========================================
   打卡成功-手动验证弹窗
   切图: 默认打卡弹窗@2x → moren-daka-tanchuang.png
   设计: 375×448pt, 页面 76:6765
   所有文字 H5 覆盖
   ======================================== */

/* 弹窗外层 */
.popup-manual-wrap {
  position: relative;
  width: 90vw;
  max-width: 375px;
  padding-bottom: 0;
}

/* 弹窗内部 — 锁死比例 */
.popup-manual-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 375 / 448;
  overflow: visible;
}

.popup-manual-inner > img:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "已打卡" 徽章 — 原尺寸 148×140 */
.manual-badge {
  position: absolute;
  right: 10.46%;              /* 再左3px: 9.66% + 0.8% */
  top: -5.56%;                /* 再上3px: -4.89% - 0.67% */
  width: 39.47%;              /* 148/375, 原尺寸比例 */
  height: auto;
  pointer-events: none;
  z-index: 2;
}

/* 标题 "打卡成功" — 设计稿 (127,96) 120×39, jiangxizhuokai 30px */
.manual-title {
  position: absolute;
  left: 33.87%;               /* 127/375 */
  top: 21.43%;                /* 96/448 */
  width: 32%;                 /* 120/375 */
  margin: 0;
  font-family: "jiangxizhuokai", "KaiTi", "STKaiti", serif;
  font-size: clamp(24px, 8vw, 30px);
  font-weight: 400;
  color: #0A6B7A;
  text-align: center;
  line-height: 1;
}

/* 邮局名称 — 设计稿 (81,145) 212×22, AlibabaPuHuiTiM */
.manual-post-name {
  position: absolute;
  left: 25.6%;                /* 右移一个字符: 21.6% + 4% */
  top: 32.37%;                /* 145/448 */
  width: 56.53%;              /* 212/375 */
  height: 4.91%;              /* 22/448 */
  margin: 0;
  font-family: "AlibabaPuHuiTi", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(13px, 4vw, 15px);
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
  text-align: center;
  line-height: normal;
  overflow: hidden;
}

/* 提示文字 "请邮局工作人员输入核销码" — 设计稿 (92.5,196) 189×22 */
.manual-hint {
  position: absolute;
  left: 24.67%;               /* 92.5/375 */
  top: 42.63%;                /* 上移5px: 43.75% - 1.12% */
  width: 55%;                 /* 加宽防止截断 */
  height: 4.91%;              /* 22/448 */
  margin: 0;
  font-family: "AlibabaPuHuiTi", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(13px, 4vw, 15px);
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
  text-align: center;
  line-height: normal;
  white-space: nowrap;
}

/* 核销码输入框容器 — 略微缩小, 236×62 */
.manual-code-boxes {
  position: absolute;
  left: 18.53%;               /* (375-236)/2/375 */
  top: 50%;                   /* 上移5px: 51.12% - 1.12% */
  width: 63%;                 /* 236/375, 缩小约8% */
  height: 13.84%;             /* 62/448 */
  display: flex;
  gap: 3.125%;                /* 容器百分比 */
  justify-content: center;
}

/* 单个输入框 — 字母+数字 */
.code-input {
  width: 22.66%;              /* 相对容器 */
  max-width: 53px;
  height: 100%;
  border: 1.2px solid #E2975A;
  border-radius: 7px;
  background: #fff;
  box-sizing: border-box;
  font-family: "AlibabaPuHuiTi", "PingFang SC", sans-serif;
  font-size: clamp(16px, 4.8vw, 20px);
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
  text-align: center;
  outline: none;
}

.code-input:focus {
  border-color: #CE4B00;
}

/* "确认核销" 切图 — 设计稿 243×83pt */
.manual-confirm-btn {
  position: absolute;
  left: 17.6%;                /* (375-243)/2/375 */
  top: 63.68%;               /* 上移5px: 64.8% - 1.12% */
  width: 64.8%;               /* 243/375, 严格按设计稿 */
  height: auto;
  display: block;
  cursor: pointer;
}

/* 关闭按钮 — 与失败弹窗同款 */
.manual-close-btn {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 8.53vw;
  max-width: 32px;
  height: 8.53vw;
  max-height: 32px;
  background: url("../img/tanchuang-guanbi.png") no-repeat center/contain;
  border: none;
  cursor: pointer;
}

/* ========================================
   HEALTH STATION ENTRY
   ======================================== */

.health-station-entry {
  display: none;
  position: relative;
  text-align: center;
  overflow: visible;         /* 确保 shadow 不被裁剪 */
}

.health-station-entry.show {
  display: block;
}

.health-station-entry img {
  display: block;
  width: 100vw;
  height: auto;
}

.health-station-list {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 37.87vw;             /* ~142px */
  width: 93.6vw;
  display: flex;
  flex-direction: column;
  gap: 2.13vw;
}

.health-station-list .po-item {
  width: 82.13vw;
  margin-left: 8.27vw;
  margin-right: 3.2vw;
}

.health-station-list .po-item::before {
  display: none;            /* 不需要竖线 */
}

.health-station-list .po-marker {
  display: none;            /* 不需要地点标识 */
}

.health-checkin {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.health-checkin-btn {
  width: 12.8vw;
  height: 5.6vw;
  background: #AB5B36;
  border-radius: 2.8vw;
  font-family: "AlibabaPuHuiTi", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 3.2vw;
  color: #fff;
  line-height: 5.6vw;
  text-align: center;
}

.health-checkin .po-distance {
  margin-top: 0.53vw;
  margin-left: 0;
}

/* ========================================
   PAGE BOTTOM
   ======================================== */

.page-bottom {
  height: 5.33vw;
  background: #FFF2DD;
}

/* ========================================
   MODAL
   ======================================== */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  align-items: center;
  justify-content: center;
}

.modal-overlay.show { display: flex; }

/* 绿色背景开关 — 只改背景+显示导航栏，弹窗位置不动 */
.modal-overlay.green-overlay {
  background: #A5D8D6;
}

/* 绿色模式下的导航栏：默认隐藏 */
.green-nav {
  display: none;
}

.modal-overlay.green-overlay .green-nav {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  flex-shrink: 0;
}

.modal-content {
  width: 85.33vw;
  max-height: 80vh;
  background: #fff;
  border-radius: 3.2vw;
  padding: 5.33vw;
  overflow-y: auto;
}

.modal-content .modal-title {
  font-size: 4.8vw;
  font-weight: 700;
  margin-bottom: 2.67vw;
  text-align: center;
}

.modal-content .modal-body {
  font-size: 3.73vw;
  line-height: 1.6;
  color: rgba(0,0,0,0.7);
}

.modal-content .modal-close {
  display: block;
  width: 100%;
  margin-top: 4.27vw;
  padding: 2.67vw 0;
  text-align: center;
  font-size: 4.27vw;
  font-weight: 600;
  color: #267551;
  border-top: 1px solid #eee;
}

/* ========================================
   打卡失败弹窗
   切图: 388×516pt (775×1032px @2x)
   设计: 375×448pt
   文字按原设计 % 定位
   ======================================== */

/* 弹窗外层 */
.popup-fail-wrap {
  position: relative;
  width: 90vw;
  max-width: 375px;
  padding-bottom: 0;            /* 关闭按钮紧贴底部 */
}

/* 弹窗内部 — 图片自然撑开容器 */
.popup-fail-inner {
  position: relative;
  width: 100%;
}

.popup-fail-inner > img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- 正文行 (left:81.5 居中, width:212=56.53%) --- */
.fail-line {
  position: absolute;
  left: 21.73%;               /* 81.5/375 */
  width: 56.53%;              /* 212/375 */
  margin: 0;
  font-family: "AlibabaPuHuiTi", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(14px, 4.27vw, 16px);   /* 16px @375 */
  text-align: center;
  line-height: normal;
  overflow: hidden;
}

.fail-line1 {
  top: 27.49%;                /* 往下11px (原25.28%) */
  height: 4.91%;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
}

.fail-line2 {
  top: 39.94%;                /* 上移8px (原41.54%) */
  height: 4.91%;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.54);
}

.fail-line3 {
  top: 48.54%;                /* 上移15px (原51.79%) */
  height: 4.91%;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
}

.fail-line4 {
  top: 65.01%;                /* 上移22px (原69.42%) */
  height: 9.82%;              /* 44/448 */
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
}

/* --- 关闭按钮 (32×32, 弹窗下方居中) --- */
.fail-close-btn {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 8.53vw;              /* 32px */
  max-width: 32px;
  height: 8.53vw;
  max-height: 32px;
  background: url("../img/tanchuang-guanbi.png") no-repeat center/contain;
  border: none;
  cursor: pointer;
}

/* --- 打卡按钮 浮动 --- */