/* ============================================================================
 * 添问年卡 VIP · 会员中心（2026-11-08 · 网页化重做）
 * ----------------------------------------------------------------------------
 * 机主指令：这一页本身就是支付页，不许只放一张整页图，也不许再弹小支付窗。
 * 结构 = 原生 HTML 顶栏（返回 / 会员中心 / 订单）+ 可滚动内容 + 吸底支付条
 * （真实复选框 + 真实「确认并支付」按钮，直接在本页下单）。
 * 只有三张插画（皇冠书 / 古籍 / 记录板）是从设计稿里裁出来的图片资产。
 * 下单仍走 mine-ui.js 的 MineApi.pay("membership","pro_1y",channel)。
 * ========================================================================== */

#screen-vip-center.active,
#screen-vip-center.screen-leaving {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0;
  overflow: hidden;
  background: #fdfaff;
  /* 本页底部导航始终隐藏；整屏跨过两条网格行，兜住版式。 */
  grid-row: 1 / -1;
}

/* ── 顶栏 ─────────────────────────────────────────────────────────────── */
.vc-bar {
  flex: 0 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: calc(var(--sa-top) + 4px) 6px 4px;
  /* 收口色 = 设计稿原图首行像素 #FEDED2，图从顶栏下沿直接接上，看不出接缝 */
  background: linear-gradient(180deg, #fdeee0, #feded2);
}
.vc-bar-title {
  margin: 0;
  text-align: center;
  font: 700 18px/1.4 "Noto Serif SC", "Songti SC", SimSun, serif;
  color: #43280f;
  letter-spacing: .08em;
}
.vc-back {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; padding: 0; background: transparent;
  color: #43280f; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vc-orders {
  height: 44px; border: 0; padding: 0; background: transparent;
  color: #43280f; font-size: 14px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── 滚动内容 ─────────────────────────────────────────────────────────── */
.vc-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 12px 18px;
}
.vc-scroll::-webkit-scrollbar { display: none; }

/* ── 设计稿原图（2026-11-09 机主直令：中间不要重画，用原图） ─────────────── */
.vc-orig {
  margin: 0 -12px;          /* 抵掉 .vc-scroll 的左右内边距，整幅铺满 */
}
.vc-orig img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 头图 ─────────────────────────────────────────────────────────────── */
.vc-hero {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 2px 16px;
}
.vc-hero-copy { flex: 1 1 auto; min-width: 0; }
.vc-hero-title {
  margin: 0;
  font: 800 29px/1.2 "Noto Serif SC", "Songti SC", SimSun, serif;
  color: #3b2211;
  letter-spacing: .01em;
}
.vc-hero-sub {
  margin: 10px 0 0;
  font-size: 15.5px; font-weight: 600; color: #46290f;
}
.vc-hero-tags {
  margin: 8px 0 0;
  font-size: 12.5px; color: #8b6b4f; letter-spacing: .05em;
}
.vc-hero-art {
  flex: 0 0 auto;
  width: 45%;
  max-width: 178px;
  height: auto;
  margin: 0 -6px 0 0;
  mix-blend-mode: multiply;
}

/* ── 价格卡 ───────────────────────────────────────────────────────────── */
.vc-price {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  padding: 18px 12px 14px;
  border-radius: 18px;
  border: 1.5px solid #f0c48f;
  background: linear-gradient(135deg, #fdeedd 0%, #fdf8f0 55%, #fcefdd 100%);
  box-shadow: 0 8px 20px rgba(196, 133, 58, .10);
  overflow: hidden;
}
.vc-price-badge {
  position: absolute; left: 0; top: 0;
  padding: 5px 14px 5px 11px;
  border-radius: 0 0 12px 0;
  background: linear-gradient(120deg, #f7a94f, #ef7f2e);
  color: #fff; font-size: 13px; font-weight: 600;
}
.vc-price-tick {
  position: absolute; right: 0; top: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 0 0 0 12px;
  background: linear-gradient(225deg, #f7a94f, #ef7f2e);
  color: #fff; font-size: 16px; line-height: 1;
}
.vc-price-main { flex: 1 1 auto; text-align: center; padding-top: 14px; }
.vc-price-name {
  margin: 0;
  font-size: 17px; font-weight: 700; color: #4f2d13; letter-spacing: .05em;
}
.vc-price-num {
  margin: 2px 0 0;
  color: #66360f;
  font-family: Georgia, "Times New Roman", serif;
}
.vc-price-num em { font-style: normal; font-size: 21px; font-weight: 700; vertical-align: 3px; }
.vc-price-num b { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
.vc-price-num span { margin-left: 2px; font-size: 15px; font-weight: 600; }
.vc-price-more {
  display: inline-block;
  margin-top: 7px;
  padding: 5px 14px;
  border-radius: 999px;
  background: #fff2df;
  color: #8a5a25; font-size: 12.5px;
}
.vc-price-side {
  flex: 0 0 auto;
  padding-left: 11px;
  border-left: 1px solid #eccba2;
  text-align: left;
}
.vc-price-old { margin: 0; font-size: 13.5px; color: #3b2211; }
.vc-price-old s { color: #54301a; }
.vc-price-save { margin: 9px 0 0; font-size: 13.5px; font-weight: 700; color: #df671d; }
.vc-price-save b { font-weight: 800; }

/* ── 两张特性卡 ───────────────────────────────────────────────────────── */
.vc-feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.vc-feat {
  padding: 12px 10px 6px;
  border-radius: 16px;
  border: 1px solid #f3e3cf;
  background: #fff7ee;
}
.vc-feat h3 { margin: 0; font-size: 14.5px; font-weight: 700; color: #3b2211; }
.vc-feat p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: #7d5c3e; }
.vc-feat img {
  display: block;
  width: 66%;
  height: auto;
  margin: 6px auto 0;
}

/* ── 分区标题 ─────────────────────────────────────────────────────────── */
.vc-sec-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 24px 0 0;
  font: 800 20px/1.3 "Noto Serif SC", "Songti SC", SimSun, serif;
  color: #3b2211;
  letter-spacing: .02em;
}
.vc-sec-title::before,
.vc-sec-title::after {
  content: "";
  width: 34px; height: 1px;
  background: linear-gradient(90deg, rgba(217, 161, 90, 0), #d9a15a);
}
.vc-sec-title::after { background: linear-gradient(90deg, #d9a15a, rgba(217, 161, 90, 0)); }
.vc-sec-sub {
  margin: 8px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: #8b6b4f;
}

/* ── 权益表 ───────────────────────────────────────────────────────────── */
.vc-block { margin-top: 18px; }
.vc-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 16px; font-weight: 700; color: #3b2211;
}
.vc-ic {
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  border-radius: 7px;
  background: linear-gradient(135deg, #f8b25e, #e4812f);
  color: #fff; font-size: 12px; font-weight: 700;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
}
.vc-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff9f2;
  font-size: 14px;
}
.vc-tbl th {
  padding: 10px 4px;
  background: #fde6c8;
  color: #43280f;
  font-size: 13px; font-weight: 700;
}
.vc-tbl td {
  padding: 11px 4px;
  text-align: center;
  color: #43280f;
  border-top: 1px solid #f5e4d1;
  font-size: 15px;
}
.vc-tbl th:first-child,
.vc-tbl td:first-child { width: 44%; font-weight: 600; font-size: 14px; }
.vc-tbl th.is-vip,
.vc-tbl td.is-vip { background: #fbe1c0; font-weight: 700; }
.vc-note {
  margin: 12px 0 4px;
  text-align: center;
  font-size: 11.5px;
  color: #9b8168;
}

/* ── 吸底支付条 ───────────────────────────────────────────────────────── */
.vc-dock {
  flex: 0 0 auto;
  padding: 10px 12px calc(8px + var(--sa-bottom));
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, #fffaf3, #fffdf9);
  box-shadow: 0 -6px 18px rgba(160, 110, 60, .10);
}
.vc-dock-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.vc-dock-label { font-size: 14px; font-weight: 600; color: #3b2211; }
.vc-dock-badge {
  padding: 2px 9px;
  border-radius: 999px;
  background: #fdeedd;
  color: #c1681f;
  font-size: 11px; font-style: normal;
}
.vc-dock-price {
  margin-left: auto;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px; font-weight: 800; color: #3b2211;
}
.vc-dock-price small { font-size: 12.5px; font-weight: 600; }
/* 支付方式：微信 / 支付宝（2026-11-09 机主直令：支付部分要能选） */
.vc-methods {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.vc-method {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ecd9c4;
  border-radius: 12px;
  background: #fffdfa;
  color: #6b4a2c;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vc-method-brand { width: 18px; height: 18px; flex: 0 0 auto; }
.vc-method-dot {
  width: 14px; height: 14px;
  box-sizing: border-box;
  border: 1.5px solid #d8c3ac;
  border-radius: 50%;
  background: #fff;
}
.vc-method[aria-checked="true"] {
  border-color: #ea7a2c;
  background: #fff6ec;
  color: #b1551c;
}
.vc-method[aria-checked="true"] .vc-method-dot {
  border-color: #ea7a2c;
  background: #ea7a2c;
  box-shadow: inset 0 0 0 3px #fff6ec;
}
.vc-dock-btn {
  display: block;
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(100deg, #fdc775 0%, #ea7a2c 100%);
  color: #fff;
  font: 700 19px/1 "Noto Serif SC", "Songti SC", SimSun, serif;
  letter-spacing: .05em;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(234, 122, 44, .26);
  -webkit-tap-highlight-color: transparent;
}
.vc-dock-btn:active { filter: brightness(.97); }
.vc-dock-btn[data-busy="1"] { opacity: .7; cursor: progress; }
.vc-dock-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 9px;
  font-size: 12px;
  color: #7d5c3e;
}
.vc-agree {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.vc-agree input {
  width: 16px; height: 16px;
  margin: 0;
  accent-color: #e4812f;
  cursor: pointer;
}
.vc-doc { color: #b1551c; text-decoration: none; }
.vc-help {
  margin-left: auto;
  padding: 4px 0;
  border: 0;
  background: none;
  color: #7d5c3e;
  font-size: 12px;
  cursor: pointer;
}

/* ── 页内提示与协议浮层 ───────────────────────────────────────────────── */
.vc-toast {
  position: absolute;
  left: 50%;
  bottom: calc(150px + var(--sa-bottom));
  transform: translateX(-50%);
  z-index: 60;
  max-width: 86%;
  padding: 11px 16px;
  border-radius: 10px;
  background: rgba(31, 24, 18, .92);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
}
.vc-terms {
  width: min(360px, 88vw);
  border: 0;
  border-radius: 16px;
  padding: 18px 16px;
  background: #fffaf3;
  color: #3b2211;
  font-size: 13.5px;
  line-height: 1.75;
}
.vc-terms::backdrop { background: rgba(0, 0, 0, .45); }
.vc-terms h2 { margin: 0 0 10px; font-size: 17px; }
.vc-terms ol { margin: 0; padding-left: 18px; }
.vc-terms button {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 14px;
  border: 0;
  border-radius: 10px;
  background: #e4812f;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

/* 与图标并排、只给读屏用的文字 */
.vip-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
 * 我的页 · 生辰 / 修改入口行间距校正（2026-11-08）
 * 该行原先「上 12 + 下 30」明显宽于相邻列表项（12~14），统一到 14。
 * 本文件随全站加载，规则只作用于 #screen-mine，不动其它页。
 * ========================================================================== */
#screen-mine .mine-quickrow {
  margin-top: 14px;
  margin-bottom: 14px;
}
#screen-mine .mine-quickrow .mine-birth {
  margin-top: 0;
}
#screen-mine .mine-quickrow ~ .mine-promo {
  margin-top: 0;
}

/* VIP payment sheet: native header/footer; middle crop original y=160..700. */
#screen-vip-pay.active,
#screen-vip-pay.screen-leaving {
  display: block; padding: 0; overflow: hidden;
  background: rgb(238,229,217); grid-row: 1 / -1;
}
.vip-pay-scroll {
  display: flex; flex-direction: column; height: 100%;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  background: rgb(238,229,217);
}
.vip-pay-scroll::-webkit-scrollbar { display: none; }
.vip-pay-stage {
  position: relative; flex: 0 0 auto; margin: auto 0 0;
  background: #f9f3e9; color: #5c3a20;
  border-radius: 24px 24px 0 0; overflow: hidden;
}
.vip-pay-header {
  position: relative; padding: 36px 12px 14px; text-align: center;
  background: linear-gradient(#fdf8ee, #fdf7ef);
}
.vip-pay-title {
  margin: 0; color: #5c3a20; font: 700 24px/1.3 "Noto Serif SC", "Songti SC", SimSun, serif;
}
.vip-pay-subtitle { margin: 9px 0 0; color: #88705a; font-size: 13px; line-height: 1.5; }
.vip-pay-close {
  position: absolute; top: 4px; right: 8px; width: 36px; height: 36px;
  border: 0; padding: 0; background: transparent; color: #5c3a20;
  font: 300 30px/36px Arial, sans-serif; cursor: pointer;
}
.vip-pay-middle { position: relative; margin: 0; line-height: 0; background: #fdf7ef; }
.vip-pay-mid { display: block; width: 100%; height: auto; margin: 0; user-select: none; mask-image: linear-gradient(to bottom, transparent, #000 6px); }
.vip-pay-options { padding: 0 14px 14px; }
.vip-pay-options h2 { margin: 0 0 10px; text-align: left; font-size: 14px; line-height: 20px; font-weight: 500; color: #5c3a20; }
.vip-pay-method { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin: 0 0 8px; padding: 10px 14px; box-sizing: border-box; border: 1px solid #efe3d2; border-radius: 12px; background: #fff; color: #5c3a20; font-size: 15px; cursor: pointer; }
.vip-pay-method[aria-pressed="true"] { border-color: #c25a33; background: #fff7eb; }
.vip-pay-brand { border-radius: 50%; overflow: hidden; width: 27px; height: 27px; flex: 0 0 27px; }
.vip-pay-radio { width: 20px; height: 20px; box-sizing: border-box; flex: 0 0 20px; margin-left: auto; border: 1.5px solid #c8c4bf; border-radius: 50%; display: grid; place-items: center; }
.vip-pay-method[aria-pressed="true"] .vip-pay-radio { border-color: #c25a33; }
.vip-pay-method[aria-pressed="true"] .vip-pay-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #c25a33; }
.vip-pay-consent { display: flex; align-items: center; gap: 4px; margin-top: 14px; font-size: 12px; line-height: 20px; white-space: nowrap; }
#vipPayAgree { appearance: none; width: 20px; height: 20px; flex: 0 0 20px; margin: 0 4px 0 0; border: 1px solid #bfb5a8; border-radius: 3px; background: white; display: grid; place-items: center; cursor: pointer; }
#vipPayAgree:checked { background: #c25a33; border-color: #c25a33; }
#vipPayAgree:checked::after { content: ""; width: 10px; height: 5px; border-left: 2px solid white; border-bottom: 2px solid white; transform: translateY(-1px) rotate(-45deg); }
.vip-pay-consent label { cursor: pointer; }
.vip-pay-consent a { color: #a34b2b; text-decoration: none; }
.vip-pay-toast { position: fixed; z-index: 10000; bottom: 94px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 40px); box-sizing: border-box; padding: 12px 16px; border-radius: 8px; background: #292522; color: white; font-size: 13px; line-height: 20px; text-align: center; }
.vip-pay-toast[hidden] { display: none; }
.vip-pay-terms { box-sizing: border-box; width: calc(100% - 32px); max-width: 400px; max-height: calc(100dvh - 48px); padding: 22px; border: 1px solid #efe3d2; border-radius: 16px; color: #5c3a20; background: #fffaf2; }
.vip-pay-terms::backdrop { background: rgb(0 0 0 / .4); }
.vip-pay-terms h2 { margin: 0 0 14px; font-size: 18px; }
.vip-pay-terms ol { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.7; }
.vip-pay-terms li { margin-bottom: 8px; }
.vip-pay-terms button { display: block; margin: 16px auto 0; padding: 10px 30px; border: 0; border-radius: 8px; color: white; background: #c25a33; }
.vip-pay-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 74px; box-sizing: border-box; padding: 10px 12px max(10px, var(--sa-bottom));
  border-radius: 24px 24px 0 0; background: linear-gradient(100deg,#fff9ed,#fffdf8);
  box-shadow: 0 -1px 0 rgba(174,136,78,.12);
}
.vip-pay-price { display: flex; align-items: baseline; white-space: nowrap; gap: 2px; }
.vip-pay-price strong { font: 700 30px/1.2 Georgia, "Times New Roman", serif; color: #713b1d; }
.vip-pay-price > span { font-size: 12px; }
.vip-pay-price .vip-pay-offer { align-self: center; margin-left: 5px; padding: 3px 5px; border-radius: 4px; background: #f7e5c5; color: #865321; font-size: 10px; }
.vip-pay-now {
  flex: 1; max-width: 180px; min-width: 132px; min-height: 50px; border: 0; border-radius: 28px;
  background: linear-gradient(120deg,#f5bf73,#bd4d2e); color: #fff9ed;
  font: 700 20px/1.2 "Noto Serif SC", "Songti SC", SimSun, serif; cursor: pointer;
  box-shadow: 0 2px 5px rgba(146,74,33,.15);
}
.vip-pay-now span { margin-left: 5px; font-family: Arial, sans-serif; }
#screen-vip-pay button:focus-visible { outline: 2px solid #95602d; outline-offset: -3px; }
.vip-pay-now[data-busy="1"] { opacity: .65; cursor: progress; }