:root { color-scheme: dark; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #35373a; }
body { color: #f7f7f8; }
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.desktop-recharge-heading, .desktop-recharge-coin-wallet, .desktop-recharge-open-member, .desktop-recharge-member-user-deco, .desktop-recharge-pay-summary, .mobile-recharge-records--desktop { display: none; }
.desktop-recharge-member-layout, .desktop-recharge-pay-panel { display: contents; }
.mobile-recharge-coin-price__rmb { display: none; }
.mobile-recharge-shell, .mobile-coin-records-shell { position: relative; display: flex; width: 100%; max-width: 430px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; flex-direction: column; overflow: visible; background: #18123b; }
.mobile-recharge-shell { container-type: inline-size; background-color: #18123b; background-image: url("/static/images/mobile-recharge-figma-bg.svg"); background-position: calc(50% - 416.5px) -76px; background-repeat: no-repeat; background-size: 953px 1076px; }
/* H5 会员中心-常规：Figma 51058:368154 */
body[data-recharge-tab="member"] .mobile-recharge-shell {
  background-color: #070707;
  background-image:
    radial-gradient(ellipse 180px 160px at 12% 8%, rgba(138, 74, 241, 0.28) 0%, transparent 70%),
    radial-gradient(ellipse 220px 180px at 88% 4%, rgba(194, 53, 1, 0.35) 0%, transparent 72%),
    radial-gradient(ellipse 260px 200px at 50% 18%, rgba(252, 141, 185, 0.16) 0%, transparent 75%),
    url("/static/images/h5-member-planet-bg.png?v=20261013-368154");
  background-position: 0 0, 0 0, 0 0, center -40px;
  background-repeat: no-repeat;
  background-size: auto, auto, auto, 160% auto;
}
.mobile-recharge-header { position: sticky; top: 0; z-index: 40; display: grid; height: 48px; padding: 0 16px; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: center; background: transparent; }
.mobile-recharge-header__spacer { width: 28px; height: 1px; }
/* H5 返回：Figma 49059:473373，未旋转 22.52×15，顺时针 90° 后可视 15×22.52 */
.mobile-recharge-back.mobile-page-back {
  align-self: start;
  width: 28px;
  min-width: 28px;
  height: 48px;
  flex: 0 0 28px;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 14.24px;
  border-radius: 0;
  background: transparent;
}
.mobile-recharge-back.mobile-page-back img {
  display: block;
  width: 15px;
  height: 22.52px;
  max-width: none;
  object-fit: fill;
}
/* H5 顶栏：49059:473371 胶囊，选中描边 #0d0022→#ffe563 */
.mobile-recharge-tabs { position: relative; display: flex; width: 161px; height: 27px; margin-top: 12px; align-self: start; justify-self: center; overflow: hidden; border-radius: 999px; background: linear-gradient(180deg, #000 0%, #382201 100%); box-shadow: inset 0 1px 2px rgba(255,255,255,.7), inset 0 -1px 2px rgba(255,255,255,.7); }
.mobile-recharge-tabs a { position: relative; display: flex; width: 65px; height: 27px; flex: 0 0 65px; align-items: center; justify-content: center; border-radius: 999px; color: #fff6f9; font-size: 12px; font-weight: 400; line-height: 18px; text-decoration: none; }
.mobile-recharge-tabs a.is-active { width: 96px; flex-basis: 96px; isolation: isolate; overflow: hidden; border: 0; background: linear-gradient(180deg, rgba(32, 0, 84, 0) 0%, #b76105 100%); box-shadow: inset 0 -2px 4px rgba(255, 225, 0, .8), inset 0 2px 4px rgba(255, 225, 0, .8); color: #191523; font-family: "Hiragino Kaku Gothic Std", "PingFang SC", sans-serif; font-size: 14px; font-weight: 800; line-height: 14px; letter-spacing: 1.96px; -webkit-text-stroke: 2.6px #fff; paint-order: stroke fill; text-shadow: 0 0 2.606px #ffe6bc, 0 0 9.12px #ffe100; }
.mobile-recharge-tabs a.is-active::before { content: ""; position: absolute; z-index: 0; top: -9.68px; left: 25px; width: 43.9007px; height: 42.0715px; background: url("/static/images/mobile-member-tab-highlight.svg") center/100% 100% no-repeat; opacity: .5; pointer-events: none; }
.mobile-recharge-tabs a.is-active::after { content: ""; position: absolute; z-index: 2; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(180deg, rgba(13, 0, 34, 0) 0%, #ffe563 100%); pointer-events: none; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }
.mobile-recharge-tabs a > span { position: relative; z-index: 1; display: flex; height: 26px; padding: 0 2px; align-items: center; justify-content: center; gap: 2px; white-space: nowrap; }
.mobile-recharge-tabs a.is-active > span { position: absolute; top: 6px; left: .7px; width: 95px; height: 14px; padding: 0; }
.mobile-recharge-tabs a b { font: inherit; }
.mobile-recharge-tabs a img { display: block; width: 12.389px; height: 10px; margin: 0 -1.1945px; flex: 0 0 10px; filter: none; }
.mobile-recharge-tabs a img:first-child { transform: rotate(90deg) scaleY(-1); }
.mobile-recharge-tabs a img:last-child { transform: rotate(90deg); }
.mobile-recharge-tabs a:not(.is-active) img { display: none; }
.mobile-recharge-tabs a:not(.is-active)::before { content: ""; position: absolute; top: -7.54px; left: 12px; width: 42.0715px; height: 42.0715px; background: url("/static/images/mobile-member-tab-highlight.svg") center/100% 100% no-repeat; opacity: .4; pointer-events: none; }
body[data-recharge-tab="coin"] .mobile-recharge-tabs a:not(.is-active) b { width: 48px; flex: 0 0 48px; text-align: center; }
.mobile-recharge-tabs::after { content: ""; position: absolute; z-index: 3; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 2px rgba(255,255,255,.7), inset 0 -1px 2px rgba(255,255,255,.7); pointer-events: none; }
.mobile-recharge-tabs a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.mobile-recharge-records { position: absolute; top: 54px; right: 0; z-index: 50; display: block; width: 21px; height: 66px; overflow: hidden; border-radius: 9px 0 0 9px; text-decoration: none; }
.mobile-recharge-records > img { display: block; width: 21px; height: 66px; max-width: none; }
.mobile-recharge-records > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mobile-recharge-hero { position: relative; height: 289px; overflow: hidden; background: transparent; }
.mobile-recharge-hero-art {
  display: none;
}
body[data-recharge-tab="member"] .mobile-recharge-hero-art {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  /* 稿宽 375；壳更宽时铺满，避免皇冠底两侧露底色 */
  width: 100%;
  height: 330px;
  overflow: visible;
  pointer-events: none;
}
/* 皇冠底图：稿 51053:31087，未开通/已开通共用（会员 tab 不再切 VIP 钻石图） */
body[data-recharge-tab="member"] .mobile-recharge-hero-art__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* 皇冠 170×113：相对上移后的英雄区，视觉仍在导航下约 19px */
body[data-recharge-tab="member"] .mobile-recharge-hero-art__crown--regular {
  position: absolute;
  z-index: 2;
  top: 67px;
  left: 50%;
  display: block;
  width: 170px;
  height: 113px;
  margin-left: -85px;
  object-fit: contain;
  pointer-events: none;
}
/* 页签下发光柱：顶边贴胶囊底（12+27=39），顶宽=两个页签固定 161px，水平居中 */
body[data-recharge-tab="member"] .mobile-recharge-hero-art__glow {
  position: absolute;
  z-index: 3;
  top: 39px;
  left: 50%;
  display: block;
  width: 328px;
  height: 250px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #ff0000 0%, rgba(148, 141, 92, 0) 100%);
  opacity: 0.31;
  mix-blend-mode: color-dodge;
  filter: blur(5.9px);
  clip-path: polygon(25.46% 0, 74.54% 0, 98% 100%, 2% 100%);
  pointer-events: none;
}
.mobile-recharge-plan-gem, .mobile-recharge-plan-ring { display: none; }
/* 星空从屏幕顶铺下，顶栏透明；返回和页签仍停在 48px 条上 */
@media (max-width: 1199px) {
  body[data-recharge-tab="member"] .mobile-recharge-hero {
    height: 288px;
    margin-top: -48px;
    overflow: visible;
  }
}
.mobile-recharge-hero__headline { position: absolute; z-index: 4; top: 172px; left: 0; display: flex; width: 100%; flex-direction: column; align-items: center; font-family: "FZZhengHeiS-B-GB", "PingFang SC", sans-serif; font-size: 26px; font-weight: 800; line-height: 32px; text-align: center; white-space: nowrap; text-shadow: 0 3px 5px #020514, 0 0 5px #020514; }
.mobile-recharge-hero__headline strong { color: #fff; font: inherit; }
.mobile-recharge-hero__headline span { color: #ffd900; font: inherit; }
/* 标题：未开通态两行文案，落在皇冠下沿（与已开通用户卡同位替换） */
body[data-recharge-tab="member"] .mobile-recharge-hero__headline {
  top: 180px;
  left: 50%;
  width: 156px;
  transform: translateX(-50%);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0;
  text-shadow: none;
}
body[data-recharge-tab="member"] .mobile-recharge-hero__headline strong {
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  text-shadow: 0 3px 5px #020514, 0 0 5px #020514;
}
body[data-recharge-tab="member"] .mobile-recharge-hero__headline .mobile-recharge-headline-copy--mobile {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  background: none;
  font: inherit;
  font-weight: 600;
}
body[data-recharge-tab="member"] .mobile-recharge-hero__headline .mobile-recharge-subline-copy--mobile {
  /* 51058:368811：#fcc100 → #fff6ee → #f0c3fe；阴影挂在伪元素外层，避免压暗渐变字 */
  position: relative;
  background-image: linear-gradient(90deg, #fcc100 0%, #fff6ee 43%, #f0c3fe 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font: inherit;
  font-weight: 600;
  filter: drop-shadow(0 2px 4px rgba(2, 5, 20, 0.75));
}
body[data-recharge-tab="member"] .mobile-recharge-plan-price b {
  background: linear-gradient(180deg, #fab33d 0%, #fb7b13 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.mobile-recharge-member-card { position: absolute; z-index: 6; top: 176px; left: 50%; display: flex; width: 235px; height: 70px; align-items: center; gap: 10px; padding: 9px 10px; transform: translateX(-50%); border-radius: var(---12, 12px); background: var(---010, rgba(255, 255, 255, 0.10)); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
.mobile-recharge-hero__headline[hidden], .mobile-recharge-member-card[hidden] { display: none; }
.mobile-recharge-member-card > img, .mobile-recharge-coin-user > img, .mobile-recharge-coin-user__avatar > img { width: 48px; height: 48px; flex: 0 0 auto; border: 2px solid #ffe580; border-radius: 50%; object-fit: cover; }
.mobile-recharge-member-card > span { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 8px; min-width: 0; }
.mobile-recharge-member-card strong { color: #fff; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 16px; font-weight: 600; line-height: 22px; white-space: nowrap; }
.mobile-recharge-member-card em, .mobile-recharge-coin-user em { display: flex; padding: 1px var(---6, 6px); align-items: center; justify-content: center; border: 0; border-radius: var(---999, 999px); background: var(---, linear-gradient(135deg, #FFE580 0%, #FACC15 100%)); color: #3b2d00; font-family: "PingFang SC", sans-serif; font-size: 10px; font-weight: 400; line-height: 14px; font-style: normal; text-align: center; white-space: nowrap; }
.mobile-recharge-member-card em:empty, .mobile-recharge-coin-user em:empty, .mobile-recharge-member-card small:empty, .mobile-recharge-coin-user small:empty { display: none; }
.mobile-recharge-member-card small { display: block; grid-column: 1 / -1; }
.mobile-recharge-member-card small, .mobile-recharge-coin-user small { color: var(---, var(----, rgba(255, 255, 255, 0.90))); font-family: "PingFang SC", sans-serif; font-size: 12px; font-style: normal; font-weight: 400; line-height: 18px; }
.mobile-recharge-hero--coin { height: 260px; overflow: visible; }
/* H5 金币页：默认藏 member-card（未开通用标题）；已开通由 max-width 规则在标题位露出。PC ≥1200 另开 */
body[data-recharge-tab="coin"] .mobile-recharge-member-card { display: none !important; }
.mobile-recharge-coin-user { position: absolute; z-index: 5; top: 64px; left: calc(50% - 96.5px); display: flex; height: 60px; align-items: center; gap: 12px; }
.mobile-recharge-coin-user[hidden] { display: none; }
.mobile-recharge-coin-user > img { width: 60px; height: 60px; border: .2px solid #fff; }
.mobile-recharge-coin-user__avatar { display: block; width: 48px; height: 48px; flex: 0 0 48px; }
.mobile-recharge-coin-user__body, .mobile-recharge-coin-user > span { display: flex; width: 152px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
.mobile-recharge-coin-user__identity { display: flex; height: 24px; align-items: center; justify-content: flex-start; gap: 6px; }
.mobile-recharge-coin-user strong { font-size: 18px; line-height: 24px; font-weight: 600; }
.mobile-recharge-coin-user small { display: flex; width: 152px; align-items: center; justify-content: flex-start; gap: 4px; white-space: nowrap; }
.mobile-recharge-coin-user small[hidden] { display: none; }
.mobile-recharge-coin-user small a { color: #e9b54b; font-weight: 600; text-decoration: none; }
.mobile-recharge-coin-user small a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }
.mobile-recharge-shell.has-account-user:not(.has-member) .mobile-recharge-coin-user em { width: 42px; min-width: 42px; height: 18px; padding: 0; justify-self: start; border: 1px solid rgba(255,255,255,.45); background: transparent; color: rgba(255,255,255,.6); line-height: 16px; }
.mobile-recharge-shell.has-account-user:not(.has-member) .mobile-recharge-coin-user small { color: rgba(255,255,255,.6); }
.mobile-recharge-balance { display: flex; align-items: center; justify-content: space-between; color: #fff; text-decoration: none; }
.mobile-recharge-hero .mobile-recharge-balance { position: absolute; z-index: 7; top: 141px; right: 16px; left: 16px; display: block; width: auto; height: 151px; padding: 0; isolation: isolate; background: none; }
.mobile-recharge-hero .mobile-recharge-balance::before,
.mobile-recharge-hero .mobile-recharge-balance::after { content: ""; position: absolute; pointer-events: none; }
.mobile-recharge-hero .mobile-recharge-balance::before { z-index: -2; top: 20.374px; right: 9.475px; left: 6.889px; height: 108.732px; transform: rotate(-6.31deg) skewX(2.02deg); border-radius: 16px; background: linear-gradient(220.633deg, #fcc100 0%, rgba(255,255,255,0) 100%), linear-gradient(40.633deg, #0022ea 0%, rgba(255,255,255,0) 100%), radial-gradient(ellipse at 76.56% 100%, rgba(255,255,255,.05) 0%, #fff 96.727%); }
.mobile-recharge-hero .mobile-recharge-balance::after { z-index: -1; top: 23px; right: 0; left: 16px; height: 109px; transform: rotate(180deg) scaleY(-1); border-radius: 24px; background: linear-gradient(180deg, #0a0909 0%, #09101f 100%); box-shadow: inset 0 6px 6px -2px rgba(35,101,255,.15), inset 0 -20px 20px -6px rgba(255,255,255,.4), inset 0 -40px 30px -8px rgba(6,63,196,.5), inset 0 -80px 60px -30px #00206a; }
.mobile-recharge-balance > span { display: flex; flex-direction: column; gap: 5px; font-size: 14px; }
.mobile-recharge-hero .mobile-recharge-balance > span { position: absolute; z-index: 2; top: 39.48px; left: 30px; gap: 6px; font-size: 14px; line-height: 18px; font-weight: 500; }
.mobile-recharge-balance > span > strong { display: flex; align-items: center; gap: 4px; color: #fcc100; font-size: 32px; line-height: 32px; font-weight: 600; }
.mobile-recharge-balance strong img { width: 36px; height: 36px; object-fit: contain; }
.mobile-recharge-balance strong b { font-weight: 600; }
.mobile-recharge-hero .mobile-recharge-balance > em { position: absolute; z-index: 2; top: 64.48px; right: 14px; display: block; width: 90px; height: 30px; padding: 0; overflow: hidden; border: 0; border-radius: 999px; background: url("/static/images/mobile-recharge-balance-detail.png?v=20260902") center/100% 100% no-repeat; box-shadow: none; color: transparent; font-size: 0; line-height: 0; font-style: normal; }
.mobile-recharge-content { position: relative; min-height: 0; margin-top: -29px; padding: 24px 16px calc(30.6667cqw + env(safe-area-inset-bottom, 0px)); flex: 1 0 auto; overflow: hidden; border-top: 3px solid #fbd341; border-radius: 18px 18px 0 0; background-color: #1d1d27; background-image: url("/static/images/mobile-recharge-content-glow.svg"); background-position: -382px -105px; background-repeat: no-repeat; background-size: 602px 739px; box-shadow: none; }
/* 内容壳 51058:368942：#27201d + 顶金描边 */
body[data-recharge-tab="member"] .mobile-recharge-content {
  z-index: 5;
  margin-top: -20px;
  padding-top: 27px;
  border-top: 1px solid #fbd341;
  border-radius: 18px 18px 0 0;
  background-color: #27201d;
  background-image:
    radial-gradient(ellipse 201px 270px at 50% -10%, rgba(255, 230, 248, 0.14) 0%, transparent 70%);
  box-shadow: none;
}
.mobile-recharge-content--coin { z-index: 8; min-height: 0; margin-top: 0; padding-top: 22px; }
/* H5 会员套餐：完整列表横向滑动，无周/年/季三档截断 */
.mobile-recharge-member-plans {
  display: flex;
  margin-right: -16px;
  padding: 0 16px 8px 0;
  gap: 10px;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-padding-left: 16px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}
.mobile-recharge-member-plans::-webkit-scrollbar { display: none; }
.mobile-recharge-member-plans .mobile-recharge-member-plan { scroll-snap-align: start; }
.mobile-recharge-package-empty { width: 100%; margin: 18px 0; color: #aaaab4; font-size: 14px; line-height: 22px; text-align: center; }
/* 套餐卡 51058:369135：底 #733e00→#1d1203；选中描边 #fbd341→#fff→#ffda0a；价格 #fab33d→#fb7b13 */
.mobile-recharge-member-plan { position: relative; width: 140px; min-width: 140px; height: 140px; padding: 13px 8px 11px; flex: 0 0 140px; overflow: visible; border: 0; border-radius: 12px; background: linear-gradient(180deg, #733e00 0%, #1d1203 100%); box-shadow: none; text-align: center; }
.mobile-recharge-member-plan::before { content: "VIP"; position: absolute; right: -8px; bottom: -7px; z-index: 0; color: rgba(255,255,255,.10); font: italic 400 68px/68px Arial, sans-serif; transform: skewX(-16deg) scaleY(.84); pointer-events: none; }
.mobile-recharge-member-plan.is-active { border: 2.5px solid transparent; background: linear-gradient(180deg, #733e00 0%, #1d1203 100%) padding-box, linear-gradient(135deg, #fbd341 0%, #ffffff 51%, #ffda0a 100%) border-box; box-shadow: 0 0 10px rgba(251, 211, 65, 0.28); }
.mobile-recharge-plan-title { position: relative; z-index: 1; display: flex; height: 20px; align-items: center; justify-content: center; gap: 2px; white-space: nowrap; }
.mobile-recharge-plan-title strong { color: #fcc100; font-size: 16px; line-height: 20px; font-weight: 600; }
/* 爆/赠字底与 PC 同形，按 18px 行高等比缩小（39×25 → 28×18） */
.mobile-recharge-plan-gift,
.mobile-recharge-coin-plan > span:not(.mobile-recharge-coin-price) i { display: block; box-sizing: border-box; width: 28px; height: 18px; flex: 0 0 28px; padding: 6px 0 0 8px; border-radius: 0; background: url("/static/images/pc-member-plan-gift.svg") 0 0 / 100% 100% no-repeat; color: #fff; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 10px; line-height: 10px; font-style: normal; font-weight: 500; text-align: left; }
.mobile-recharge-plan-price { position: relative; z-index: 1; display: flex; height: 33px; margin-top: 2px; align-items: baseline; justify-content: center; gap: 2px; overflow: visible; white-space: nowrap; }
.mobile-recharge-plan-price small { color: #ffe4c9; font-size: 12px; line-height: 17px; font-weight: 600; }
.mobile-recharge-plan-price b { display: inline-block; flex-shrink: 0; background: linear-gradient(180deg, #fab33d 0%, #fb7b13 100%); background-clip: text; -webkit-background-clip: text; color: transparent; font: 700 30px/33px "DIN Alternate", Arial, sans-serif; letter-spacing: 0.02em; font-style: normal; }
.mobile-recharge-plan-price b::after { content: "\2002"; font-style: normal; font-weight: 700; letter-spacing: 0; }
.mobile-recharge-plan-original { position: relative; z-index: 1; display: block; height: 10px; color: #aeacb8; font-size: 10px; line-height: 10px; }
.mobile-recharge-plan-original > span { position: relative; display: inline-block; }
.mobile-recharge-plan-original > span::after { content: ""; position: absolute; top: 50%; right: -1px; left: -1px; height: 1px; background: currentColor; pointer-events: none; }
.mobile-recharge-plan-benefits { position: relative; z-index: 1; display: block; width: 100%; }
.mobile-recharge-plan-bonus { position: relative; z-index: 1; display: block; height: 11px; margin-top: 8px; color: #fff; font-size: 10px; line-height: 11px; font-weight: 500; white-space: nowrap; }
.mobile-recharge-member-plan > em,
.mobile-recharge-plan-benefits > em { position: relative; z-index: 1; display: block; height: 18px; margin-top: 8px; overflow: hidden; color: #aeacb8; font-size: 12px; line-height: 18px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.mobile-recharge-countdown { position: absolute; z-index: 4; bottom: -10px; left: calc(50% + 1px); display: flex; width: 124px; height: 20px; transform: translateX(-50%); align-items: center; justify-content: center; color: #1a1c57; white-space: nowrap; }
.mobile-recharge-countdown b, .mobile-recharge-countdown i { display: inline-flex; height: 20px; padding: 4px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 3px; background: #fcc100; color: #1a1c57; font: 500 10px/normal Inter, sans-serif; }
.mobile-recharge-countdown b { width: 38px; }
.mobile-recharge-countdown i[data-countdown-hours] { width: 20px; }
.mobile-recharge-countdown i[data-countdown-minutes], .mobile-recharge-countdown i[data-countdown-seconds] { width: 21px; }
.mobile-recharge-countdown span { display: inline-flex; width: 8px; height: 16px; padding: 0 2px; flex: 0 0 8px; align-items: center; justify-content: center; color: #1a1c57; font: 400 14px/16px Inter, sans-serif; }
/* 仅占位槽隐藏；真实倒计时始终挂在对应套餐卡上，切换选中也不消失 */
.mobile-recharge-countdown.is-placeholder {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.mobile-recharge-coin-plans { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 5px; }
.mobile-recharge-coin-slant { display: none; }
.mobile-recharge-coin-plan { position: relative; width: 100%; min-width: 0; height: 140px; padding: 10px 6px 9px; overflow: hidden; border: 0; border-radius: 12px; background: linear-gradient(180deg, #433c2c 0%, #2e3355 100%); box-shadow: none; text-align: center; }
.mobile-recharge-coin-hero,
.mobile-recharge-coin-amount,
.mobile-recharge-coin-unit { display: none; }
.mobile-recharge-coin-plan > span:not(.mobile-recharge-coin-price):not(.mobile-recharge-coin-hero), .mobile-recharge-coin-plan > img, .mobile-recharge-coin-plan > strong, .mobile-recharge-coin-price { position: relative; z-index: 1; }
.mobile-recharge-coin-plan > span:not(.mobile-recharge-coin-price):not(.mobile-recharge-coin-hero) { display: flex; height: 18px; align-items: center; justify-content: center; gap: 2px; overflow: hidden; color: #fcc100; font: 600 12px/18px Sora, "PingFang SC", sans-serif; white-space: nowrap; }
.mobile-recharge-coin-plan > img { display: block; width: 40px; height: 40px; margin: 12px auto 10px; object-fit: cover; }
.mobile-recharge-coin-plan > strong { display: block; height: 11px; color: #fff; font-size: 12px; line-height: 11px; font-weight: 500; }
.mobile-recharge-coin-price { display: block; width: 103px; height: 18px; margin: 10px auto 0; background: linear-gradient(179.027deg, #ff088e 35.703%, #fcb5e9 49.744%, #ff088e 68.833%); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 12px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.mobile-recharge-payment { margin-top: 20px; }
body[data-recharge-tab="member"] .mobile-recharge-payment { margin-top: 24px; }
.mobile-recharge-payment h1 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: #aaaab4; font-size: 16px; line-height: 24px; font-weight: 400; }
body[data-recharge-tab="member"] .mobile-recharge-payment h1 {
  margin-bottom: 18px;
  color: #a5a4aa;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
}
.mobile-recharge-payment h1 img { width: 24px; height: 24px; }
.mobile-recharge-payment__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.mobile-recharge-payment-empty { grid-column: 1 / -1; margin: 10px 0; color: #8e8f99; font-size: 14px; line-height: 22px; text-align: center; }
.mobile-recharge-content--coin .mobile-recharge-payment__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.mobile-recharge-method { display: flex; height: 60px; padding: 12px; align-items: center; justify-content: space-between; border: 0; border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)); }
.mobile-recharge-method > span { display: flex; align-items: center; gap: 12px; }
.mobile-recharge-method img { width: 36px; height: 36px; object-fit: contain; }
.mobile-recharge-method b { font-size: 14px; font-weight: 400; }
body[data-recharge-tab="member"] .mobile-recharge-method b { color: rgba(255, 255, 255, 0.9); }
.mobile-recharge-method > i { position: relative; width: 16px; height: 16px; flex: 0 0 16px; border: 0; border-radius: 50%; }
.mobile-recharge-method > i::before { content: ""; position: absolute; inset: 2px; border: 1.333px solid #fff; border-radius: 50%; }
.mobile-recharge-method.is-active > i { background: url("/static/images/mobile-member-radio-selected.svg") center/14.667px 14.667px no-repeat; }
.mobile-recharge-method.is-active > i::before { display: none; }
.mobile-recharge-notes { margin-top: 20px; color: #8e8f99; font-size: 12px; line-height: 20px; }
body[data-recharge-tab="member"] .mobile-recharge-notes {
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  line-height: 18px;
}
.mobile-recharge-notes strong { display: block; margin-bottom: 2px; color: #b6b7c1; }
body[data-recharge-tab="member"] .mobile-recharge-notes strong {
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.mobile-recharge-notes p { margin: 0; }
.mobile-recharge-notes--coin { display: none; }
.mobile-recharge-footer { position: absolute; z-index: 30; right: 0; bottom: 0; left: 0; display: flex; height: calc(27.7333cqw + env(safe-area-inset-bottom, 0px)); flex-direction: column; align-items: center; gap: 3.2cqw; padding: 3.2cqw 4.2667cqw calc(3.2cqw + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, #1d1d29 18%); }
body[data-recharge-tab="member"] .mobile-recharge-footer {
  background: linear-gradient(180deg, rgba(39, 32, 29, 0) 0%, #27201d 18%);
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  height: auto;
  min-height: calc(104px + env(safe-area-inset-bottom, 0px));
}
.mobile-recharge-footer button { position: relative; display: block; width: 100%; height: 13.3333cqw; flex: 0 0 13.3333cqw; padding: 0; overflow: visible; isolation: isolate; border: 0; background: transparent; color: #151217; }
body[data-recharge-tab="member"] .mobile-recharge-footer button {
  width: 343px;
  max-width: 100%;
  height: 50px;
  flex: 0 0 50px;
}
.mobile-recharge-footer button:disabled { cursor: not-allowed; filter: grayscale(.65); opacity: .62; }
.mobile-recharge-footer button::before, .mobile-recharge-footer button::after { content: ""; position: absolute; top: 0; height: 13.3333cqw; background-repeat: no-repeat; background-size: 100% 100%; }
.mobile-recharge-footer button::before { z-index: 1; left: 0; width: 70.8455%; background-image: url("/static/images/mobile-recharge-button-left.svg"); }
.mobile-recharge-footer button::after { z-index: 0; right: 0; width: 36.4431%; background-image: url("/static/images/mobile-recharge-button-right.svg"); }
/* CTA 51058:369515：金瓣左 + 乳白右；金额白字；角标 #693401 */
body[data-recharge-tab="member"] .mobile-recharge-footer button::before,
body[data-recharge-tab="member"] .mobile-recharge-footer button::after {
  height: 50px;
}
body[data-recharge-tab="member"] .mobile-recharge-footer button::before {
  width: 70.8455%;
  background-image: url("/static/images/h5-member-button-left.svg?v=20261013-368154");
}
body[data-recharge-tab="member"] .mobile-recharge-footer button::after {
  width: 36.4431%;
  background-image: url("/static/images/h5-member-button-right.svg?v=20261013-368154");
}
.mobile-recharge-footer button > span { position: absolute; z-index: 2; top: 2.1333cqw; left: 6.9971%; display: flex; align-items: flex-end; color: #ff008a; font-size: 4.2667cqw; line-height: 5.8667cqw; font-weight: 600; text-align: left; white-space: nowrap; }
body[data-recharge-tab="member"] .mobile-recharge-footer button > span {
  top: 9px;
  left: 24px;
  align-items: flex-end;
  color: #ffffff;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
}
.mobile-recharge-footer button > span b { font-size: 7.4667cqw; line-height: 8.5333cqw; font-weight: 600; }
body[data-recharge-tab="member"] .mobile-recharge-footer button > span b {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}
.mobile-recharge-footer button > strong { position: absolute; z-index: 2; top: 4.8cqw; right: 3.2%; left: auto; width: 30%; box-sizing: border-box; overflow: hidden; font-family: Rubik, "PingFang SC", sans-serif; font-size: 3.7333cqw; line-height: 4.2667cqw; font-weight: 800; text-align: center; white-space: nowrap; }
body[data-recharge-tab="member"] .mobile-recharge-footer button > strong {
  top: 17px;
  right: 4%;
  width: 30%;
  color: #14192c;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 16px;
  font-weight: 800;
}
.mobile-recharge-footer button > em { position: absolute; z-index: 3; top: -3.2cqw; left: 30.3207%; display: flex; width: 28.5714%; min-width: 0; height: 5.3333cqw; padding: .8cqw 2.1333cqw; align-items: center; justify-content: center; overflow: visible; border: 0; border-top: 1px solid #fff; border-right: 1px solid #fff; border-left: 1px solid #fff; border-radius: 2.6667cqw 9.6cqw 9.6cqw 0; background: #ff008a; box-shadow: 0 .8cqw .92cqw rgba(247,102,89,.13); color: #fff; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 2.6667cqw; line-height: 3.7333cqw; font-weight: 500; font-style: normal; letter-spacing: -.0667cqw; opacity: 1; white-space: nowrap; }
/* 角标：结构对齐 91porn H5（overflow + 白描边 + drop-shadow + radii 10/10/10/0）；色值本仓 #693401 / Figma 51058:369529 */
body[data-recharge-tab="member"] .mobile-recharge-footer button > em {
  top: -12px;
  left: 104px;
  right: auto;
  display: flex;
  width: auto;
  min-width: 0;
  height: 20px;
  padding: 3px 8px;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  transform: none;
  border: 0;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  border-radius: 10px 10px 10px 0;
  background: #693401;
  box-shadow: none;
  filter: drop-shadow(0 3px 3.45px rgba(247, 102, 89, 0.13));
  color: #fff;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
  text-align: left;
  white-space: nowrap;
}
@media (max-width: 1199px) {
  body[data-recharge-tab="member"] .mobile-recharge-footer button > em {
    left: 30.3207%;
  }
}
.mobile-recharge-footer p { margin: 0; color: #858690; font-size: 3.2cqw; line-height: 4.8cqw; }
body[data-recharge-tab="member"] .mobile-recharge-footer p {
  color: #b3b3b3;
  font-size: 12px;
  line-height: 18px;
}
.mobile-recharge-footer p a { color: #ffb800; text-decoration: none; }
body[data-recharge-tab="member"] .mobile-recharge-footer p a { color: #ffb800; }

/* H5 已开通会员用户信息：好色 Figma 51053:32404（会员中心-会员 51053:31087）
   227×60、HORIZONTAL gap 12、pad 6/10、r12、bg 白 10%、backdrop-blur 30；替换「开通会员权益」标题位
   金币页同卡结构（稿 51054:33031），仅 top 不同。仅窄屏；PC ≥1200 走共用稿 51061:451334 */
@media (max-width: 1199px) {
  body[data-recharge-tab="member"] .mobile-recharge-member-card,
  body[data-recharge-tab="coin"] .mobile-recharge-hero.recharge-only-coin .mobile-recharge-member-card {
    left: 50%;
    display: flex;
    width: 227px;
    height: 60px;
    box-sizing: border-box;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    transform: translateX(-50%);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    -webkit-font-smoothing: antialiased;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-card {
    top: 180px;
  }
  /* 未开通：隐藏资料卡，露出两行标题「开通会员权益 / 尊享无限影片」 */
  body[data-recharge-tab="member"] .mobile-recharge-member-card[hidden] {
    display: none;
  }
  /* H5 首帧：boot 已挂 has-active-member 时即切标题/资料卡，不等 paintPanel */
  body[data-recharge-tab="member"] .has-active-member .mobile-recharge-hero.recharge-only-member .mobile-recharge-hero__headline {
    display: none !important;
  }
  body[data-recharge-tab="member"] .has-active-member .mobile-recharge-hero.recharge-only-member .mobile-recharge-member-card {
    display: flex !important;
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell:not(.has-active-member) .mobile-recharge-hero.recharge-only-member .mobile-recharge-member-card {
    display: none !important;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-card__avatar,
  body[data-recharge-tab="coin"] .mobile-recharge-hero.recharge-only-coin .mobile-recharge-member-card__avatar {
    display: block;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    padding: 2px;
    box-sizing: border-box;
    border-radius: 50%;
    /* 描边渐变 #ffe580 → #facc15（稿 stroke 2px） */
    background: linear-gradient(180deg, #ffe580 0%, #facc15 100%);
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-card__avatar > img,
  body[data-recharge-tab="coin"] .mobile-recharge-hero.recharge-only-coin .mobile-recharge-member-card__avatar > img {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 50%;
    object-fit: cover;
    outline: 1px solid rgba(255, 255, 255, 0.10);
    outline-offset: -1px;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-card__body,
  body[data-recharge-tab="coin"] .mobile-recharge-hero.recharge-only-coin .mobile-recharge-member-card__body {
    display: flex;
    width: 147px;
    flex: 1 1 147px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    min-width: 0;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-card__name,
  body[data-recharge-tab="coin"] .mobile-recharge-hero.recharge-only-coin .mobile-recharge-member-card__name {
    display: flex;
    width: 100%;
    height: 22px;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-card strong,
  body[data-recharge-tab="coin"] .mobile-recharge-hero.recharge-only-coin .mobile-recharge-member-card strong {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.90);
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-card em,
  body[data-recharge-tab="coin"] .mobile-recharge-hero.recharge-only-coin .mobile-recharge-member-card em {
    display: inline-flex;
    box-sizing: border-box;
    width: auto;
    min-width: 52px;
    height: 18px;
    padding: 1px 6px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffe580 0%, #facc15 100%);
    color: #292929;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 10px;
    line-height: 16px;
    font-weight: 400;
    font-style: normal;
    white-space: nowrap;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-card small,
  body[data-recharge-tab="coin"] .mobile-recharge-hero.recharge-only-coin .mobile-recharge-member-card small {
    display: block;
    width: 100%;
    overflow: visible;
    color: rgba(255, 255, 255, 0.55);
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    text-overflow: clip;
    white-space: nowrap;
  }
}

.mobile-coin-records-shell { max-width: none; min-height: 100vh; min-height: 100dvh; background-color: #010406; background-image: url("/static/images/mobile-coin-records-bg.svg"); background-position: top center; background-repeat: no-repeat; background-size: 100% auto; }
.mobile-coin-records-nav { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; width: 100%; height: 48px; padding: 0 16px; align-items: center; background: #0d0f11; }
.mobile-coin-records-nav a { justify-self: start; }
.mobile-coin-records-nav h1 { margin: 0; color: rgba(255,255,255,.9); font-size: 18px; line-height: 24px; font-weight: 600; text-align: center; }
.mobile-coin-records-nav > span { width: 24px; height: 24px; }
.mobile-coin-records-shell main { width: 343px; margin: 0 auto; padding: 18px 0 40px; flex: 1 0 auto; }

/* 金币明细：好色 H5 45207:35027 */
body[data-mobile-coin-records] {
  background-color: #010406;
  -webkit-font-smoothing: antialiased;
}
body[data-mobile-coin-records] .mobile-coin-records-shell {
  background-color: #010406;
  background-image: url("/static/images/mobile-coin-records-bg-gold.svg?v=20261020-coin12");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  box-shadow: none;
}
body[data-mobile-coin-records] .mobile-coin-records-nav {
  background: #0e1012;
}
body[data-mobile-coin-records] .mobile-coin-records-balance {
  position: relative;
  display: block;
  isolation: isolate;
  width: 343px;
  height: 151px;
  padding: 0;
  overflow: visible;
  text-decoration: none;
  color: inherit;
  transition-property: transform;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
body[data-mobile-coin-records] .mobile-coin-records-balance:active {
  transform: scale(0.96);
}
body[data-mobile-coin-records] .mobile-coin-records-balance::before {
  content: "";
  position: absolute;
  display: block;
  z-index: 0;
  top: 20px;
  left: 125px;
  width: 196px;
  height: 18px;
  background: url("/static/images/h5-coin-records-tab.png?v=20261020-coin12") center / 100% 100% no-repeat;
  pointer-events: none;
}
body[data-mobile-coin-records] .mobile-coin-records-balance::after {
  content: "";
  position: absolute;
  display: block;
  z-index: 1;
  top: 12px;
  left: 8px;
  width: 327px;
  height: 105px;
  background: url("/static/images/h5-coin-records-card.png?v=20261020-coin12") center / 100% 100% no-repeat;
  pointer-events: none;
}
body[data-mobile-coin-records] .mobile-coin-records-balance > span {
  position: absolute;
  z-index: 2;
  top: 34px;
  left: 22px;
  display: flex;
  width: auto;
  max-width: calc(100% - 120px);
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  color: #fff;
  font: 500 14px/18px "PingFang SC", "Microsoft YaHei", sans-serif;
}
body[data-mobile-coin-records] .mobile-coin-records-balance > span > strong {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: #fff;
  -webkit-text-fill-color: #fff;
  font: 600 32px/45px "PingFang SC", "Microsoft YaHei", sans-serif;
  font-variant-numeric: tabular-nums;
}
body[data-mobile-coin-records] .mobile-coin-records-balance strong img {
  display: block;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  object-fit: contain;
}
body[data-mobile-coin-records] .mobile-coin-records-balance strong b {
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
body[data-mobile-coin-records] .mobile-coin-records-balance > em {
  position: absolute;
  z-index: 2;
  top: 66px;
  right: 22px;
  display: inline-flex;
  box-sizing: border-box;
  width: 90px;
  height: 30px;
  overflow: visible;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #ff0064 0%, #ef005e 100%);
  box-shadow:
    inset 0 1px 4px 2px #ffdbe3,
    inset 0 1px 18px 2px #ffdbe3,
    0 4px 8px rgba(255, 0, 99, .22),
    0 12px 24px rgba(255, 0, 99, .28);
  color: #fff;
  -webkit-text-fill-color: #fff;
  font: 500 14px/20px Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-style: normal;
  white-space: nowrap;
}
/* 列表：40 高行 + 12 间距；分割线白 5%；金额 #f68804 */
body[data-mobile-coin-records] .mobile-coin-records-list {
  --mobile-loading-accent: #f68804;
  --mobile-loading-track: rgba(255,255,255,.1);
  --mobile-loading-color: rgba(255,255,255,.5);
  display: flex;
  flex-direction: column;
  min-height: 96px;
  margin-top: 12px;
  gap: 0;
}
body[data-mobile-coin-records] #mobile-coin-records-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
body[data-mobile-coin-records] .mobile-coin-records-list article {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 40px;
  margin: 0 0 12px;
  padding: 0 0 12px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: .5px solid rgba(255, 255, 255, .05);
}
body[data-mobile-coin-records] .mobile-coin-records-list article::after { display: none; }
body[data-mobile-coin-records] .mobile-coin-records-list article:last-child {
  margin-bottom: 0;
}
body[data-mobile-coin-records] .mobile-coin-records-list article > span:not(.mobile-coin-records-value) {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
}
body[data-mobile-coin-records] .mobile-coin-records-list article strong {
  overflow: hidden;
  color: #efefef;
  font: 500 14px/20px "PingFang SC", "Microsoft YaHei", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-mobile-coin-records] .mobile-coin-records-list article time {
  overflow: hidden;
  color: rgba(255, 255, 255, .55);
  font: 400 12px/18px "PingFang SC", "Microsoft YaHei", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-mobile-coin-records] .mobile-coin-records-list article > b {
  flex: 0 0 auto;
  padding-top: 0;
  color: #f68804;
  font: 400 12px/18px "PingFang SC", "Microsoft YaHei", sans-serif;
  white-space: nowrap;
}
body[data-mobile-coin-records] .mobile-coin-records-list article > b.is-negative,
body[data-mobile-coin-records] .mobile-coin-records-list article > b.is-positive {
  color: #f68804;
}
@media (min-width: 769px) {
  body[data-mobile-coin-records] .mobile-coin-records-shell {
    min-height: calc(100vh - 76px);
    min-height: calc(100dvh - 76px);
    background-size: 375px auto;
    background-position: center top;
    box-shadow: none;
  }
  body[data-mobile-coin-records] .mobile-coin-records-shell main {
    width: min(343px, calc(100% - 48px));
    padding-top: 48px;
  }
}
.mobile-coin-records-list { --mobile-loading-accent: #e9b54b; --mobile-loading-track: rgba(255,255,255,.1); --mobile-loading-color: rgba(255,255,255,.5); min-height: 96px; margin-top: 12px; }
.mobile-coin-records-list article { position: relative; display: flex; width: 100%; min-height: 76px; padding: 8px 0 16px; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mobile-coin-records-list article::after { content: ""; position: absolute; right: 0; bottom: 4px; left: 0; height: 1px; background: rgba(255,255,255,.08); }
.mobile-coin-records-list article > span:not(.mobile-coin-records-value), .mobile-coin-records-copy { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 2px; }
.mobile-coin-records-list article strong { overflow: hidden; color: #f7f7f8; font-size: 14px; line-height: 20px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.mobile-coin-records-list article time, .mobile-coin-records-list article small { overflow: hidden; color: rgba(255,255,255,.45); font-size: 12px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.mobile-coin-records-value { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 3px; padding-top: 2px; }
.mobile-coin-records-value b { color: #e9b54b; font-size: 14px; line-height: 20px; font-weight: 500; }
.mobile-coin-records-value b.is-negative { color: #e9b54b; }
.mobile-coin-records-list article > b { flex: 0 0 auto; padding-top: 11px; color: #e9b54b; font-size: 12px; line-height: 18px; font-weight: 400; }
.mobile-coin-records-list article > b.is-negative { color: #e9b54b; }
.mobile-coin-records-value em { padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.68); font-size: 11px; line-height: 18px; font-style: normal; }
.mobile-coin-records-value em.is-pending { background: rgba(252,193,0,.12); color: #fcc100; }
.mobile-coin-records-value em.is-success { background: rgba(48,209,88,.12); color: #6ee790; }
.mobile-coin-records-value em.is-failed { background: rgba(255,69,58,.12); color: #ff817a; }
.mobile-recharge-records-state, .mobile-coin-records-state { display: flex; min-height: 96px; margin: 0; align-items: center; justify-content: center; color: rgba(255,255,255,.5); font-size: 14px; line-height: 22px; text-align: center; }
.mobile-coin-records-state[hidden] { display: none; }
.mobile-recharge-records-more { display: block; min-width: 112px; height: 36px; margin: 18px auto 0; padding: 0 20px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.82); font-size: 13px; }
.mobile-recharge-records-more[hidden] { display: none; }
.mobile-recharge-records-more:disabled { opacity: .55; }

/* H5 充值记录 — Figma 46290:375560 */
body[data-recharge-records]:not(.recharge-records-page) {
  background: #010406;
}
body[data-recharge-records]:not(.recharge-records-page) .mobile-coin-records-shell {
  background-color: #010406;
  background-image: url("/static/images/mobile-coin-records-bg.svg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
body[data-recharge-records]:not(.recharge-records-page) .mobile-coin-records-nav {
  background: #0e1012;
}
body[data-recharge-records]:not(.recharge-records-page) .mobile-coin-records-nav .mobile-page-back {
  border-radius: 0;
  background: transparent;
}
body[data-recharge-records]:not(.recharge-records-page) .mobile-coin-records-shell main {
  width: 343px;
  margin: 0 auto;
  padding: 18px 0 40px;
}
body[data-recharge-records]:not(.recharge-records-page) .mobile-recharge-records-list {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body[data-recharge-records]:not(.recharge-records-page) .mobile-recharge-records__item {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 80px;
  margin: 0;
  padding: 0 0 12px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
}
body[data-recharge-records]:not(.recharge-records-page) .mobile-recharge-records__item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.5px;
  background: #303030;
}
body[data-recharge-records]:not(.recharge-records-page) .mobile-recharge-records__title {
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-recharge-records]:not(.recharge-records-page) .mobile-recharge-records__bill {
  display: flex;
  width: 100%;
  min-height: 18px;
  align-items: center;
  gap: 6px;
}
body[data-recharge-records]:not(.recharge-records-page) .mobile-recharge-records__bill > span {
  overflow: hidden;
  color: #989898;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-recharge-records]:not(.recharge-records-page) .mobile-recharge-records__copy {
  display: inline-flex;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}
body[data-recharge-records]:not(.recharge-records-page) .mobile-recharge-records__copy img {
  display: block;
  width: 18px;
  height: 18px;
}
body[data-recharge-records]:not(.recharge-records-page) .mobile-recharge-records__status {
  margin: 0;
  color: #f68804;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
}
body[data-recharge-records]:not(.recharge-records-page) .mobile-recharge-records__status.is-pending {
  color: #fcc100;
}
body[data-recharge-records]:not(.recharge-records-page) .mobile-recharge-records__status.is-failed {
  color: #ff817a;
}
body[data-recharge-records]:not(.recharge-records-page) .mobile-recharge-records__date {
  display: block;
  color: #525252;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
}

@media (min-width: 431px) { .mobile-recharge-shell, .mobile-coin-records-shell { box-shadow: 0 0 36px rgba(0,0,0,.75); } }

@media (min-width: 1200px) {
  :root { color-scheme: dark; }
  html, body { min-width: 960px; background: #070707; }
  .mobile-recharge-page { min-height: 100vh; color: #f7f7f8; }

  .mobile-recharge-shell { display: block; width: 100%; max-width: none; min-height: max(998px, calc(100vh - 76px)); margin: 0; overflow: hidden; background-color: #070707; box-shadow: none; color: #f7f7f8; container-type: normal; }
  .desktop-recharge-heading { position: absolute; top: 49px; left: 50%; z-index: 10; display: flex; width: min(1200px, calc(100% - 48px)); height: 32px; transform: translateX(-50%); align-items: center; justify-content: space-between; }
  .desktop-recharge-heading > span { display: flex; align-items: center; gap: 4px; }
  .desktop-recharge-heading img { display: block; width: 32px; height: 25px; object-fit: cover; }
  .desktop-recharge-heading b { font-family: "FZZhengHeiS-B-GB", "PingFang SC", sans-serif; font-size: 24px; line-height: 32px; font-weight: 400; color: rgba(255,255,255,.9); }
  .mobile-recharge-header { display: none; }
  .mobile-recharge-hero-art { display: none !important; }
  .mobile-recharge-records { top: 55px; right: max(24px, calc(50% - 600px)); z-index: 11; width: auto; height: 20px; overflow: visible; border-radius: 0; color: rgba(255,255,255,.55); font-size: 14px; line-height: 20px; }
  .mobile-recharge-records > img { display: none; }
  .mobile-recharge-records > span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: nowrap; }

  /* 快看 PC 会员中心：Figma 51065:405249 */
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell {
    display: grid;
    width: min(1200px, calc(100% - 48px));
    min-height: max(920px, calc(100vh - 76px));
    margin: 0 auto;
    padding: 49px 0 40px;
    grid-template-columns: minmax(0, 718px) minmax(0, 455px);
    grid-template-rows: 32px auto;
    column-gap: 27px;
    row-gap: 39px;
    align-content: start;
    overflow: visible;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
  }
  /* 会员与金币同底 regular.jpg，挂在 has-recharge-backdrop。class 在页头节点刚解析完就加上。不用 91 竖条底。 */
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]).mobile-recharge-page {
    --pc-member-content-w: min(1200px, calc(100% - 48px));
    background-color: #070707;
  }
  /* 会员中心背景：稿 49073:487943 / 已开通同底（#070707 + 星球 10% + 三团模糊），合成图 1920×1080 */
  /* 窄于 1920 保持原图宽度居中裁切；宽于 1920 等比铺满，左右不露出 #070707 */
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]).mobile-recharge-page.has-recharge-backdrop {
    background-image: url("/static/images/pc-member-bg-regular.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: max(100%, 1920px) auto;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .desktop-recharge-heading {
    position: static;
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    height: 32px;
    transform: none;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .desktop-recharge-heading > span { margin-left: 48px; }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .desktop-recharge-heading img { width: 32px; height: 32px; object-fit: contain; }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-records--mobile-only { display: none; }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-records--desktop {
    position: static;
    top: auto;
    right: auto;
    display: block;
    width: auto;
    height: 20px;
    margin-right: 48px;
    overflow: visible;
    border-radius: 0;
    color: rgba(255,255,255,.55);
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-records--desktop > span {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .desktop-recharge-member-layout {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 718px) minmax(0, 455px);
    grid-template-rows: 361px 335px;
    column-gap: 27px;
    row-gap: 25px;
    width: 100%;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-content {
    display: contents;
    position: static;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    transform: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  /* 卡皮面板：Figma 51065:405299 描边白→透明（上亮下暗） */
  body[data-recharge-tab="member"] .mobile-recharge-member-plans {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    grid-column: 1;
    grid-row: 2;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 335px;
    margin: 0;
    padding: 10px 42px;
    justify-content: center;
    align-items: center;
    gap: 14px;
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid transparent;
    border-radius: 20px;
    background:
      linear-gradient(#27201d, #27201d) padding-box,
      linear-gradient(180deg, #fff 0%, rgba(153, 153, 153, 0) 100%) border-box;
    /* 不用 filter:drop-shadow，避免整层栅格化时裁切斜体价格末位 */
    box-shadow: 0 0 6px rgba(0, 0, 0, .2);
    scrollbar-width: none;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plans::-webkit-scrollbar { display: none; }
  body[data-recharge-tab="member"] .mobile-recharge-member-plans:has(.mobile-recharge-member-plan:nth-child(3):last-child),
  body[data-recharge-tab="member"] .mobile-recharge-member-plans:has(.mobile-recharge-package-empty) {
    justify-content: center;
  }
  /* 卡皮-1：金棕底；未选暗金边，选中亮金渐变边 */
  body[data-recharge-tab="member"] .mobile-recharge-member-plan {
    display: flex;
    box-sizing: border-box;
    width: 202px;
    min-width: 202px;
    height: 202px;
    padding: 16px 10px 14px;
    flex: 0 0 202px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    border: 2px solid transparent;
    border-radius: 17px;
    outline: 0;
    background:
      linear-gradient(180deg, #703d01 0%, #1f1304 100%) padding-box,
      linear-gradient(135deg, rgba(251, 211, 65, .35) 0%, rgba(255, 255, 255, .12) 50.9%, rgba(240, 150, 123, .28) 100%) border-box;
    box-shadow: none;
    text-align: center;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan::before {
    content: "VIP";
    top: auto;
    right: auto;
    bottom: 6px;
    left: -8px;
    display: block;
    width: 171px;
    height: 98px;
    transform: matrix(1, 0, -.54, .84, 0, 0);
    clip-path: none;
    background: linear-gradient(174.22deg, rgba(255,255,255,0) 32.99%, rgba(255,255,255,.1) 94.64%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    opacity: 1;
    font-family: "HYDaBaiTu", "Swis721 Blk BT", Arial, sans-serif;
    font-size: 98px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-align: left;
    pointer-events: none;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan.is-active {
    border-width: 3px;
    background:
      linear-gradient(180deg, #703d01 0%, #1f1304 100%) padding-box,
      linear-gradient(135deg, #fbd341 0%, #ffffff 50.9%, #f0967b 100%) border-box;
  }
  /* 已开通会员态：Figma 51065:405614 — 套餐卡底 #432c32→#553b2e；未选无描边；选中亮金边；价格 #fcb88b→#ff6100 */
  body[data-recharge-tab="member"] .has-active-member .mobile-recharge-member-plans {
    background:
      linear-gradient(#27201d, #27201d) padding-box,
      linear-gradient(180deg, #fff 0%, rgba(153, 153, 153, 0) 100%) border-box;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .has-active-member .desktop-recharge-pay-panel {
    background:
      linear-gradient(#27201d, #27201d) padding-box,
      linear-gradient(180deg, #fff 0%, rgba(153, 153, 153, 0) 80.7%) border-box;
  }
  body[data-recharge-tab="member"] .has-active-member .mobile-recharge-member-plan {
    border-width: 2px;
    background:
      linear-gradient(180deg, #432c32 0%, #553b2e 100%) padding-box,
      linear-gradient(135deg, transparent 0%, transparent 100%) border-box;
  }
  body[data-recharge-tab="member"] .has-active-member .mobile-recharge-member-plan.is-active {
    border-width: 3px;
    background:
      linear-gradient(180deg, #432c32 0%, #553b2e 100%) padding-box,
      linear-gradient(135deg, #fbd341 0%, #ffffff 50.9%, #f0967b 100%) border-box;
  }
  body[data-recharge-tab="member"] .mobile-recharge-plan-title {
    z-index: 1;
    height: 28px;
    margin: 0;
    gap: 3px;
  }
  /* 爆/赠字底 51065:405381：火焰异形 SVG，字位于轮廓下半部 (11, 8.5)。flex-basis 锁 39px，盖过窄屏 28px 基准 */
  body[data-recharge-tab="member"] .mobile-recharge-plan-gift,
  body[data-recharge-tab="coin"] .mobile-recharge-coin-gift i {
    display: block;
    box-sizing: border-box;
    width: 39px;
    height: 25px;
    flex: 0 0 39px;
    padding: 8px 0 0 11px;
    border-radius: 0;
    background: url("/static/images/pc-member-plan-gift.svg") 0 0 / 100% 100% no-repeat;
    color: #fff;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px;
    text-align: left;
  }
  body[data-recharge-tab="member"] .mobile-recharge-plan-gift::before { content: none; }
  body[data-recharge-tab="member"] .mobile-recharge-plan-price {
    z-index: 1;
    height: 48px;
    margin-top: 3px;
    align-items: baseline;
    gap: 3px;
    overflow: visible;
  }
  body[data-recharge-tab="member"] .mobile-recharge-plan-price b {
    display: inline-block;
    flex-shrink: 0;
    background-clip: text;
    -webkit-background-clip: text;
  }
  body[data-recharge-tab="member"] .mobile-recharge-plan-original {
    z-index: 1;
    height: 14px;
    margin-top: 0;
    color: rgba(255,255,255,.55);
    font-size: 14px;
    line-height: 14px;
    text-align: center;
  }
  body[data-recharge-tab="member"] .mobile-recharge-plan-benefits {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    margin-top: 12px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  body[data-recharge-tab="member"] .mobile-recharge-plan-bonus {
    height: 16px;
    margin: 0;
    color: #fff;
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    text-align: center;
  }
  body[data-recharge-tab="member"] .mobile-recharge-plan-benefits > em {
    display: block;
    height: 22px;
    margin: 0;
    overflow: hidden;
    color: #aeacb8;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-recharge-tab="member"] .mobile-recharge-countdown {
    top: auto;
    bottom: -10px;
    left: 50%;
    display: flex;
    width: 181px;
    height: 29px;
    transform: translateX(-50%);
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  body[data-recharge-tab="member"] .mobile-recharge-countdown b,
  body[data-recharge-tab="member"] .mobile-recharge-countdown i {
    box-sizing: border-box;
    height: 29px;
    padding: 6px;
    border-radius: 4px;
    background: #fcc100;
    color: #1a1c57;
    /* Inter Medium 未随站点下发，回退字体用 600 才有稿面的粗度 */
    font: 600 14px/17px Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  }
  body[data-recharge-tab="member"] .mobile-recharge-countdown b { width: 56px; }
  body[data-recharge-tab="member"] .mobile-recharge-countdown i[data-countdown-hours],
  body[data-recharge-tab="member"] .mobile-recharge-countdown i[data-countdown-minutes],
  body[data-recharge-tab="member"] .mobile-recharge-countdown i[data-countdown-seconds] { width: 31px; }
  body[data-recharge-tab="member"] .mobile-recharge-countdown span {
    width: 12px;
    height: 24px;
    color: #1a1c57;
    font: 400 20px/24px Inter, "PingFang SC", sans-serif;
  }

  /* 支付面板：Figma 51065:424126 描边白→透明（约 81% 处淡出） */
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .desktop-recharge-pay-panel {
    display: flex;
    box-sizing: border-box;
    grid-column: 2;
    grid-row: 1 / -1;
    width: 100%;
    height: 724px;
    flex-direction: column;
    padding: 45px 45px 0;
    border: 1px solid transparent;
    border-radius: 20px;
    background:
      linear-gradient(#27201d, #27201d) padding-box,
      linear-gradient(180deg, #fff 0%, rgba(153, 153, 153, 0) 80.7%) border-box;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-payment { margin-top: 0; }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-payment h1 { gap: 10px; margin: 0 0 40px; color: #a5a4aa; font-size: 18px; line-height: 24px; font-weight: 600; }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-payment h1 img { width: 36px; height: 36px; object-fit: contain; }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-payment__grid {
    width: 365px;
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 176.5px));
    gap: 22px 12px;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-payment__grid[data-method-count="1"] { grid-template-columns: minmax(0, 176.5px); }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-payment__grid[data-method-count="3"] { grid-template-columns: repeat(2, minmax(0, 176.5px)); }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-method { height: 60px; }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-notes {
    width: 345px;
    max-width: 100%;
    margin: 34px 0 0;
    color: rgba(255,255,255,.55);
    font-size: 14px;
    line-height: 20px;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-notes strong { margin-bottom: 6px; color: rgba(255,255,255,.9); font-size: 16px; line-height: 22px; font-weight: 500; }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: end;
    justify-self: center;
    z-index: 3;
    width: 375px;
    height: 104px;
    margin: 0 0 24px;
    padding: 12px 16px;
    transform: none;
    gap: 12px;
    background: transparent;
  }
  /* 开通会员按钮：Figma 51065:424168 / 角标 51065:424197 */
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer button {
    width: 343px;
    height: 50px;
    flex: 0 0 50px;
    color: #14192c;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer button::before,
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer button::after { top: 0; height: 50px; }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer button::before {
    width: 243px;
    /* Figma 51065:424136 可见渐变 #FDBB10 → #C05F01 → #FEEA4C（普通用户） */
    background-image: url("/static/images/pc-member-button-left.svg?v=20261011-gold-cta");
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer button::after {
    width: 125px;
    /* Figma 51065:424133 可见渐变 #FFFFFF → #FFD447（普通用户） */
    background-image: url("/static/images/pc-member-button-right.svg?v=20261011-gold-cta");
  }
  /* 已开通会员提交价按钮：Figma 51065:405961 / 405967·405964 */
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .has-active-member .mobile-recharge-footer button::before {
    /* 左瓣 #FF5700 → #FFEDE1@0.606 → #FF5700 */
    background-image: url("/static/images/pc-member-button-left-vip.svg?v=20261012-405961");
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .has-active-member .mobile-recharge-footer button::after {
    /* 右瓣 #FFFFFF → #FCC100 */
    background-image: url("/static/images/pc-member-button-right-vip.svg?v=20261012-405961");
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .has-active-member .mobile-recharge-footer button > span {
    color: #fff;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .has-active-member .mobile-recharge-footer button > strong {
    color: #14192c;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .has-active-member .mobile-recharge-footer button > em {
    background: #ff008a;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .has-active-member .mobile-recharge-footer p a {
    /* 文本样式覆盖「在线客服」：#FFB800 */
    color: #ffb800;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer button > span {
    top: 9px;
    left: 24px;
    align-items: baseline;
    color: #fff;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer button > span b {
    font-size: 28px;
    line-height: 32px;
    font-weight: 500;
  }
  /* 右瓣文案：开通会员 / 暂不可支付 等都在右瓣内居中，避免五字溢出 */
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer button > strong {
    top: 50%;
    right: 14px;
    left: auto;
    width: 108px;
    transform: translateY(-50%);
    color: #14192c;
    font-family: Rubik, "PingFang SC", sans-serif;
    font-size: 16px;
    line-height: 1;
    font-weight: 800;
    text-align: center;
    letter-spacing: -0.02em;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer button > em {
    top: -12px;
    left: 106px;
    width: 131px;
    height: 20px;
    padding: 0 8px;
    overflow: visible;
    border: 1px solid rgba(255,255,255,.55);
    border-bottom: 0;
    border-radius: 10px 36px 36px 0;
    background: #ff008a;
    box-shadow: none;
    filter: none;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: 0;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer p { color: #b3b3b3; font-size: 12px; line-height: 18px; }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer p a { color: #ffb800; }

  /* —— PC 会员中心：好色稿 49073:487271 / 已开通 49073:488960（覆盖上方快看旧稿；用户信息差见 .has-active-member）—— */
  /* 普通用户标题行：稿 51061:449546，顶栏 76 之下 20 */
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell {
    padding-top: 20px;
    grid-template-rows: 31px auto;
    row-gap: 19px;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .desktop-recharge-heading {
    height: 31px;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .desktop-recharge-heading img {
    width: 43px;
    height: 31px;
    object-fit: fill;
    content: url("/static/images/pc-member-title-crown.png");
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .desktop-recharge-heading b {
    line-height: 25px;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .desktop-recharge-heading > span {
    margin-left: 24px;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-records--desktop {
    margin-right: 24px;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-records--desktop > span {
    background: linear-gradient(140deg, #ff3f7c 0%, #fcc100 52%, #c70000 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .desktop-recharge-member-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 84px auto auto auto;
    column-gap: 0;
    row-gap: 17px;
    padding: 30px 50px 58px;
    border: 1px solid #28282b;
    border-radius: 40px;
    background: #18181b;
  }
  /* 会员顶区：无钻石主视觉，改为用户信息行（未开通 51061:450123 / 449534；已开通 51061:450137） */
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-hero__headline {
    display: none !important;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-hero {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    width: 100%;
    height: 84px;
    align-items: flex-start;
    justify-content: space-between;
    overflow: visible;
    border-radius: 0;
    background: transparent;
  }
  /* 共用资料卡：稿 51061:451334。宽随内容；H5 147/227 仅 max-width:1199 */
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-member-card,
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-member-card[hidden] {
    position: relative;
    top: auto;
    left: auto;
    z-index: 2;
    display: flex !important;
    width: auto;
    max-width: none;
    height: 84px;
    gap: 12px;
    padding: 12px;
    transform: none;
    border-radius: 12px;
    background: transparent;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
  }
  /* 头像描边：稿 51061:451334 / 451336，2px #ff5412 */
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-member-card__avatar {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    padding: 0;
    background: none;
    border-radius: 50%;
    outline: 2px solid #ff5412;
    outline-offset: -1px;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-member-card__avatar > img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    outline: 0;
    object-fit: cover;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-member-card__body {
    display: flex;
    width: auto;
    flex: 0 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-member-card__name {
    display: flex;
    height: 32px;
    align-items: center;
    gap: 8px;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-member-card strong {
    color: #fff;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    cursor: default;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell:not(.has-account-user) .mobile-recharge-member-card strong[data-recharge-guest-login] {
    cursor: pointer;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-member-card em:empty {
    display: none;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-member-card em {
    min-width: 52px;
    height: 18px;
    padding: 1px 6px;
    color: #694923;
    font-size: 10px;
    line-height: 16px;
    background: linear-gradient(135deg, #ffe580 0%, #facc15 100%);
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-member-card small {
    color: #dcdcdc;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
  }
  /* 未开通：稿 51061:451347。12/18 #a2a2a2，链接同字号主色。会员中心和金币充值共用 */
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell.has-account-user:not(.has-active-member) .mobile-recharge-member-card small {
    color: #a2a2a2;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
  }
  /* 到期/未开通文案与「去开通会员」同一行；稿 51061:451347 两个空格 ≈ 8px */
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-member-card__meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    white-space: nowrap;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-member-card__meta small {
    display: block;
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell.has-account-user:not(.has-active-member) .desktop-recharge-open-member:not([hidden]) {
    display: block;
    flex: 0 0 auto;
    color: #e5365c;
    font: 600 12px/18px "PingFang SC", "Microsoft YaHei", sans-serif;
    text-decoration: none;
    white-space: nowrap;
  }
  /* 已开通：稿 51061:450137 到期行 55% 白 */
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell.has-active-member .mobile-recharge-member-card small {
    color: rgba(255, 255, 255, 0.55);
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .desktop-recharge-member-user-deco {
    display: block;
    width: 164px;
    height: 63px;
    flex: 0 0 164px;
    object-fit: contain;
    pointer-events: none;
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-member-plans {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: auto;
    min-height: 220px;
    padding: 51px 11px 51px 12px;
    justify-content: center;
    gap: 16px;
    border: 2px solid #28282b;
    border-radius: 40px;
    background: linear-gradient(180deg, #1d1c20 0%, rgba(27, 26, 30, 0.32) 8.2%, #141016 100%);
    box-shadow: none;
  }
  /* 普通用户套餐卡：稿 51061:449750 起。257×180，钻石图 + 光晕，字重按标注 */
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-member-plan {
    --top-a: #634ed5;
    --top-b: #dbc3eb;
    --ribbon-a: #634ed5;
    --ribbon-b: #852ac2;
    --glow-a: #6d07c4;
    --glow-b: #c5e1ff;
    --was: #dbd4ff;
    --gem: url("/static/images/pc-member-gem-purple.png");
    position: relative;
    box-sizing: border-box;
    flex: 1 1 257px;
    width: 257px;
    min-width: 0;
    max-width: 257px;
    height: 180px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 14px;
    outline: 0;
    background: #080808;
    box-shadow: none;
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-member-plan[data-plan-name*="季"] {
    --top-a: #0ebf93;
    --top-b: #6dd1ea;
    --ribbon-a: #10ac9a;
    --ribbon-b: #12a09e;
    --glow-a: #10ac9a;
    --glow-b: #8aeff4;
    --was: #caebe4;
    --gem: url("/static/images/pc-member-gem-teal.png");
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-member-plan[data-plan-name*="年"] {
    --top-a: #bf670e;
    --top-b: #eae46d;
    --ribbon-a: #ac7310;
    --ribbon-b: #a07b12;
    --glow-a: #ac7310;
    --glow-b: #f4df8a;
    --was: #ebdbca;
    --gem: url("/static/images/pc-member-gem-gold.png");
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-member-plan[data-plan-name*="周"],
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-member-plan[data-plan-name*="永久"] {
    --top-a: #4e6bd5;
    --top-b: #ccc3eb;
    --ribbon-a: #4e5fd5;
    --ribbon-b: #2a43c2;
    --glow-a: #0717c4;
    --glow-b: #c5e1ff;
    --was: #dbd4ff;
    --gem: url("/static/images/pc-member-gem-purple.png");
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-member-plan.is-active {
    outline: 0;
    background: #080808;
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-member-plan::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: auto;
    bottom: auto;
    left: 8px;
    width: 242px;
    height: 139px;
    transform: none;
    border-radius: 7px;
    /* 稿 51061:448807：色板左深右浅，再叠一层 17% 白渐隐 */
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, 0)),
      linear-gradient(90deg, var(--top-a), var(--top-b));
    background-clip: border-box;
    -webkit-background-clip: border-box;
    font-size: 0;
    pointer-events: none;
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-member-plan::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 75px;
    right: auto;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 106px;
    border-radius: 0 0 14px 14px;
    /* 稿 51061:448386：上沿 M0 0 L300 12.6，左高右低，按 257/300 约 11px */
    clip-path: polygon(0 0, 100% 11px, 100% 100%, 0 100%);
    background: linear-gradient(146deg, rgba(44, 41, 57, .94), rgba(60, 59, 67, .94));
    box-shadow: 0 2px 12px #080808, inset 0 1px 3px rgba(255, 255, 255, .08);
    pointer-events: none;
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-plan-price {
    position: absolute;
    z-index: 4;
    top: 43px;
    left: 33px;
    height: auto;
    margin: 0;
    overflow: visible;
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-plan-price::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 28px;
    left: 147px;
    width: 33px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--glow-a), var(--glow-b));
    opacity: .53;
    filter: blur(16px);
    pointer-events: none;
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-plan-price::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: -5px;
    left: 150px;
    width: 57px;
    height: 57px;
    background: var(--gem) center / contain no-repeat;
    pointer-events: none;
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-plan-price small {
    font-size: 17px;
    line-height: 24px;
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-plan-price b {
    font-family: Impact, Haettenschweiler, sans-serif;
    font-size: 41px;
    line-height: 41px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .25);
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-plan-original {
    position: absolute;
    z-index: 4;
    top: 55px;
    left: 111px;
    height: auto;
    margin: 0;
    color: var(--was);
    font-size: 21px;
    font-weight: 400;
    line-height: 21px;
    text-decoration: line-through;
  }
  /* 划线价跟在现价右侧，避免三位数和钻石重叠。anchor 无效时退回 left:111px */
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-member-plan:nth-child(1) .mobile-recharge-plan-price { anchor-name: --pc-price-1; }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-member-plan:nth-child(2) .mobile-recharge-plan-price { anchor-name: --pc-price-2; }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-member-plan:nth-child(3) .mobile-recharge-plan-price { anchor-name: --pc-price-3; }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-member-plan:nth-child(4) .mobile-recharge-plan-price { anchor-name: --pc-price-4; }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-member-plan:nth-child(1) .mobile-recharge-plan-original { position-anchor: --pc-price-1; }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-member-plan:nth-child(2) .mobile-recharge-plan-original { position-anchor: --pc-price-2; }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-member-plan:nth-child(3) .mobile-recharge-plan-original { position-anchor: --pc-price-3; }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-member-plan:nth-child(4) .mobile-recharge-plan-original { position-anchor: --pc-price-4; }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-member-plan .mobile-recharge-plan-original {
    top: calc(anchor(top) + 12px);
    left: calc(anchor(right) + 6px);
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-plan-title {
    position: absolute;
    z-index: 4;
    top: 98px;
    left: 93px;
    width: 140px;
    height: auto;
    margin: 0;
    display: block;
    text-align: left;
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-plan-title strong {
    position: static;
    top: auto;
    left: auto;
    color: #fff;
    font-family: "PingFang SC", "Hiragino Kaku Gothic Std", sans-serif;
    font-size: 27px;
    font-weight: 800;
    line-height: 41px;
    white-space: nowrap;
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-plan-gift {
    position: absolute;
    z-index: 5;
    top: 0;
    left: -60px;
    width: 59px;
    height: 59px;
    background: url("/static/images/pc-member-plan-burst.png") center / contain no-repeat;
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-plan-benefits {
    position: static;
    margin: 0;
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-plan-bonus {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 131px;
    width: 118px;
    height: 26px;
    margin: 0;
    border-radius: 0 7px 0 7px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 26px;
    text-align: center;
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-plan-benefits > em {
    position: absolute;
    z-index: 4;
    top: 139px;
    left: 93px;
    width: 140px;
    height: auto;
    color: #aeacb8;
    font-size: 14px;
    font-weight: 400;
    line-height: 15px;
    text-align: left;
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-countdown {
    top: 162px;
    bottom: auto;
    left: 52px;
    z-index: 5;
    width: 154px;
    height: 37px;
    transform: none;
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-countdown b,
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-countdown i {
    width: auto;
    height: 25px;
    padding: 5px 6px;
    border-radius: 4px;
    background: #fcc100;
    color: #1a1c57;
    font: 500 12px/15px Inter, "PingFang SC", sans-serif;
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-countdown i {
    width: 26px;
  }
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-countdown span {
    width: 10px;
    height: 20px;
    color: #fff;
    font: 400 17px/20px Inter, "PingFang SC", sans-serif;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-payment h1 {
    height: 36px;
    margin: 0 0 31px;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-payment h1 img {
    content: url("/static/images/pc-member-wallet-regular.png");
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .desktop-recharge-pay-panel {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-payment__grid {
    width: 100%;
    max-width: 1098px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-method {
    box-sizing: border-box;
    height: 68px;
    padding: 16px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-method.is-active {
    border-color: #ff2264;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-method > i {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-method > i::before {
    inset: 0;
    border-width: 1.333px;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-method.is-active > i {
    background: linear-gradient(180deg, #35debc 0%, #22bb9c 100%);
    border-radius: 50%;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-method.is-active > i::before {
    display: block;
    top: 3px;
    left: 2.5px;
    right: auto;
    bottom: auto;
    width: 6px;
    height: 3.5px;
    border: 0;
    border-left: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    border-radius: 0;
    background: transparent;
    transform: rotate(-45deg);
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-notes {
    width: 100%;
    max-width: 639px;
    margin-top: 12px;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-footer {
    position: relative;
    grid-column: 1;
    grid-row: 4;
    align-self: stretch;
    justify-self: stretch;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 100px;
    min-height: 0;
    margin: 7px 0 0;
    padding: 0 40px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 25px;
    border: 2px solid #28282b;
    border-radius: 32px;
    background: linear-gradient(180deg, #1d1c20 0%, rgba(27, 26, 30, 0.32) 8.2%, #141016 100%);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .desktop-recharge-pay-summary {
    position: absolute;
    top: 21px;
    left: 41px;
    display: flex;
    height: 24px;
    align-items: flex-end;
    gap: 16px;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .desktop-recharge-pay-summary__price {
    display: flex;
    align-items: flex-end;
    color: #fff;
    font-weight: 600;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .desktop-recharge-pay-summary__price small {
    font-size: 18px;
    line-height: 24px;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .desktop-recharge-pay-summary__price b {
    font-size: 40px;
    line-height: 1;
    font-weight: 600;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .desktop-recharge-pay-summary__save {
    background: linear-gradient(90deg, #ffe1c9 0%, #e9bb99 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .desktop-recharge-pay-summary__save[hidden] {
    display: none;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-footer p {
    position: absolute;
    left: 41px;
    bottom: 20px;
    margin: 0;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-footer button {
    position: relative;
    width: 340px;
    height: 60px;
    flex: 0 0 340px;
    overflow: visible;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-footer button::before {
    top: 10px;
    left: 0;
    z-index: 1;
    width: 340px;
    height: 50px;
    border: 0;
    border-radius: 70px;
    background: linear-gradient(107.7deg, #e9bb99 26.5%, #fff7f1 79.71%);
    box-shadow: 0 0 0 2px #f9e5cf;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-footer button::after {
    top: 15px;
    right: 5px;
    bottom: auto;
    left: auto;
    z-index: 2;
    box-sizing: border-box;
    width: 136.42px;
    height: 40px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: url("/static/images/pc-member-pay-pink.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-footer button > span {
    top: 19px;
    left: 20px;
    z-index: 3;
    align-items: flex-end;
    color: #000;
    -webkit-text-fill-color: #000;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-footer button > span b {
    color: #000;
    -webkit-text-fill-color: #000;
    font-size: 28px;
    line-height: 32px;
    font-weight: 600;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-footer button > strong {
    top: 23px;
    right: 13px;
    z-index: 3;
    display: flex;
    width: auto;
    height: 24px;
    align-items: center;
    gap: 6px;
    transform: none;
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-size: 0;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-footer button > strong::before {
    content: "立即支付";
    font-family: Inter, "PingFang SC", sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-footer button > strong::after {
    content: "";
    width: 20px;
    height: 20px;
    background: url("/static/images/pc-member-pay-arrow.png") center / 20px 20px no-repeat;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-footer button > em {
    top: 0;
    left: 72px;
    right: auto;
    width: auto;
    min-width: 131px;
    height: 20px;
    padding: 0 8px;
    border: 0;
    border-radius: 10px 36px 36px 0;
    background: linear-gradient(135deg, #ff9d70 0%, #ff5412 52%, #ff883e 100%);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell .mobile-recharge-footer p a {
    color: #5e74eb;
  }

}

@media (max-width: 1199px) {
  .mobile-recharge-page > .site-header { display: none; }
}

/* H5 金币充值：未开通/已开通同皇冠底（51054:32983）；已开通仅标题位换用户信息 */
@media (max-width: 1199px) {
  body[data-recharge-tab="coin"] {
    background: #070707;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-shell {
    background-color: #070707;
    background-image:
      radial-gradient(ellipse 180px 160px at 12% 8%, rgba(138, 74, 241, 0.28) 0%, transparent 70%),
      radial-gradient(ellipse 220px 180px at 88% 4%, rgba(194, 53, 1, 0.35) 0%, transparent 72%),
      radial-gradient(ellipse 260px 200px at 50% 18%, rgba(252, 141, 185, 0.16) 0%, transparent 75%),
      url("/static/images/h5-member-planet-bg.png?v=20261013-368154");
    background-position: 0 0, 0 0, 0 0, center -40px;
    background-repeat: no-repeat;
    background-size: auto, auto, auto, 160% auto;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-hero--coin {
    height: 288px;
    margin-top: -48px;
    overflow: visible;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-hero-art {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 330px;
    overflow: hidden;
    pointer-events: none;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-hero-art__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-hero-art__img[hidden],
  body[data-recharge-tab="coin"] .mobile-recharge-hero-art__crown[hidden],
  body[data-recharge-tab="coin"] .mobile-recharge-hero-art__glow[hidden],
  body[data-recharge-tab="coin"] .mobile-recharge-hero-art__stage[hidden] {
    display: none;
  }
  /* 皇冠：视觉顶贴页签底（页签底 39，图内透明约 3px） */
  body[data-recharge-tab="coin"] .mobile-recharge-hero-art__crown--regular {
    position: absolute;
    z-index: 2;
    top: 36px;
    left: 50%;
    display: block;
    width: 170px;
    height: 113px;
    margin-left: -85px;
    object-fit: contain;
    pointer-events: none;
  }
  /* 光晕：从整条页签胶囊底边居中发出，顶宽 161px */
  body[data-recharge-tab="coin"] .mobile-recharge-hero-art__glow--regular {
    position: absolute;
    z-index: 3;
    top: 39px;
    left: 50%;
    display: block;
    width: 328px;
    height: 250px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #ff0000 0%, rgba(148, 141, 92, 0) 100%);
    opacity: 0.31;
    mix-blend-mode: color-dodge;
    filter: blur(5.9px);
    clip-path: polygon(25.46% 0, 74.54% 0, 98% 100%, 2% 100%);
    pointer-events: none;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-hero-art__stage {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: block;
    width: 100%;
    height: 72px;
    object-fit: cover;
    object-position: center bottom;
    opacity: 0.75;
    pointer-events: none;
  }
  /* 未开通：主视觉叠两行开通文案 */
  body[data-recharge-tab="coin"] .mobile-recharge-shell:not(.has-active-member) .mobile-recharge-hero__headline {
    top: 91px;
    left: 50%;
    z-index: 6;
    display: flex;
    width: 156px;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transform: translateX(-50%);
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0;
    text-shadow: none;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-hero__headline strong {
    display: block;
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    text-shadow: 0 3px 5px #020514, 0 0 5px #020514;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-hero__headline .mobile-recharge-headline-copy--mobile {
    display: block;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    background: none;
    font: inherit;
    font-weight: 600;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-hero__headline .mobile-recharge-subline-copy--mobile {
    display: block;
    position: relative;
    background-image: linear-gradient(90deg, #fcc100 0%, #fff6ee 43%, #f0c3fe 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font: inherit;
    font-weight: 600;
    filter: drop-shadow(0 2px 4px rgba(2, 5, 20, 0.75));
  }
  body[data-recharge-tab="coin"] .has-active-member .mobile-recharge-hero__headline {
    display: none !important;
  }
  /* coin-user 始终隐藏；已开通改用 member-card 占标题位 */
  body[data-recharge-tab="coin"] .mobile-recharge-coin-user {
    display: none !important;
  }
  /* 已开通：member-card 占标题位 top 91（壳/字样与会员中心共用上方规则） */
  body[data-recharge-tab="coin"] .has-active-member .mobile-recharge-hero.recharge-only-coin .mobile-recharge-member-card,
  body[data-recharge-tab="coin"] .has-active-member .mobile-recharge-hero.recharge-only-coin .mobile-recharge-member-card[hidden] {
    top: 91px;
    z-index: 6;
    display: flex !important;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-shell:not(.has-active-member) .mobile-recharge-hero.recharge-only-coin .mobile-recharge-member-card {
    display: none !important;
  }
  /* 余额卡：未开通/已开通同用粉钮卡（h5-coin-balance-card.svg） */
  body[data-recharge-tab="coin"] .mobile-recharge-hero .mobile-recharge-balance {
    top: 177px;
    right: auto;
    left: 50%;
    width: 327px;
    max-width: calc(100% - 32px);
    height: 89px;
    padding: 0;
    transform: translateX(-50%);
    box-sizing: border-box;
    background: url("/static/images/h5-coin-balance-card.svg?v=20261020-coin2") 0 0 / 100% 100% no-repeat;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-hero .mobile-recharge-balance::before,
  body[data-recharge-tab="coin"] .mobile-recharge-hero .mobile-recharge-balance::after {
    display: none;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-hero .mobile-recharge-balance > span {
    position: absolute;
    top: 11px;
    left: 14px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: auto;
    color: #fff;
    font: 500 14px/21px "PingFang SC", "Microsoft YaHei", sans-serif;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-hero .mobile-recharge-balance > span > strong {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 45px;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    font: 600 32px/45px "PingFang SC", "Microsoft YaHei", sans-serif;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-hero .mobile-recharge-balance strong img {
    width: 34px;
    height: 34px;
    object-fit: contain;
  }
  /* 与金币明细 .mobile-coin-records-balance > em 同一套粉钮 */
  body[data-recharge-tab="coin"] .mobile-recharge-hero .mobile-recharge-balance > em {
    top: 45.5px;
    right: 14px;
    display: inline-flex;
    box-sizing: border-box;
    width: 90px;
    min-width: 90px;
    height: 30px;
    padding: 0;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, #ff0064 0%, #ef005e 100%);
    box-shadow:
      inset 0 1px 4px 2px #ffdbe3,
      inset 0 1px 18px 2px #ffdbe3,
      0 4px 8px rgba(255, 0, 99, .22),
      0 12px 24px rgba(255, 0, 99, .28);
    color: #fff;
    -webkit-text-fill-color: #fff;
    font: 500 14px/20px Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-style: normal;
    white-space: nowrap;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-hero .mobile-recharge-balance > em > span {
    position: relative;
    z-index: 1;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-hero .mobile-recharge-balance .mobile-recharge-balance__btn-text--vip {
    display: none;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-hero .mobile-recharge-balance > em::before {
    display: none;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-content--coin {
    z-index: 5;
    margin-top: -6px;
    padding-top: 16px;
    border-top: 1px solid #fbd341;
    border-radius: 18px 18px 0 0;
    background-color: #27201d;
    background-image:
      radial-gradient(ellipse 201px 270px at 50% -10%, rgba(255, 230, 248, 0.14) 0%, transparent 70%);
    box-shadow: none;
  }
  /* 金币卡：组件 51046:17453，110×120，三列间距 6px，选中外 4px 金描边 */
  body[data-recharge-tab="coin"] .mobile-recharge-coin-plans {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, 110px);
    justify-content: space-between;
    gap: 6px 0;
    padding-bottom: 14px;
    overflow: visible;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-coin-plan {
    position: relative;
    box-sizing: border-box;
    width: 110px;
    min-width: 110px;
    height: 120px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 16px;
    background-color: transparent;
    background-image: linear-gradient(#170808, #170808);
    background-repeat: no-repeat;
    background-position: 0 14px;
    background-size: 110px 86px;
    /* 51042:16930 下沿投影：0 2px 14px #080808 */
    box-shadow: 0 2px 14px #080808;
    text-align: left;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-coin-plan::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 5px;
    right: auto;
    bottom: auto;
    width: 100px;
    height: 91px;
    transform: none;
    border-radius: 8px;
    /* 51042:16923：左 #634ed5 → 右 #dbc3eb，再叠 17% 白、到底部渐隐 */
    background:
      linear-gradient(200deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.17) 82%, rgba(255, 255, 255, 0) 100%),
      linear-gradient(93deg, #634ed5 0%, #dbc3eb 100%);
    background-clip: border-box;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: 0;
    opacity: 1;
    pointer-events: none;
  }
  /* 斜切黑块盖在紫色面板上：稿 51042:16930，y=55、110×65，顶边左高右低 */
  body[data-recharge-tab="coin"] .mobile-recharge-coin-plan > .mobile-recharge-coin-slant {
    position: absolute;
    z-index: 2;
    top: 55px;
    left: 0;
    display: block;
    width: 110px;
    height: 65px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='65' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='30' y1='11' x2='80' y2='56' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%232c2939' stop-opacity='.94'/%3E%3Cstop offset='1' stop-color='%233c3b43' stop-opacity='.94'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0L110 15.1624L110 65H0V0Z' fill='url(%23c)'/%3E%3C/svg%3E") 0 0 / 110px 65px no-repeat;
    pointer-events: none;
  }
  /* 选中金环：同会员卡，4px 外描边，左上 #ffe580 → 右下 #facc15；下半段被卡身阴影压暗。圆角 = 卡身 16px + 4px */
  body[data-recharge-tab="coin"] .mobile-recharge-coin-plan::after {
    content: "";
    position: absolute;
    z-index: 6;
    inset: -4px;
    padding: 4px;
    border-radius: 20px;
    background:
      linear-gradient(180deg, rgba(8, 8, 8, 0) 28%, rgba(8, 8, 8, 0.38) 48%, rgba(8, 8, 8, 0.32) 100%),
      linear-gradient(135deg, #ffe580 0%, #facc15 100%);
    opacity: 0;
    pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-coin-plan.is-active::after {
    opacity: 1;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-coin-plan > .mobile-recharge-coin-gift {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 5px;
    left: auto;
    display: inline-flex;
    box-sizing: border-box;
    width: auto;
    min-width: 79px;
    height: 20px;
    margin: 0;
    padding: 3px 4px 6px 5px;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    overflow: visible;
    border-radius: 0 8px 0 8px;
    background: linear-gradient(93deg, #634ed5 0%, #852ac2 100%);
    color: #ffffff;
    font: 500 10px/14px "PingFang SC", "Microsoft YaHei", sans-serif;
    white-space: nowrap;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-coin-gift i {
    display: block;
    box-sizing: border-box;
    width: 19px;
    height: 10px;
    flex: 0 0 19px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: url("/static/images/pc-coin-gift-mark.svg") center / 19px 10px no-repeat;
    color: transparent;
    font-size: 0;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-coin-plan > img {
    position: absolute;
    z-index: 4;
    top: 52px;
    left: 67px;
    right: auto;
    width: 34px;
    height: 34px;
    margin: 0;
    object-fit: contain;
    content: url("/static/images/h5-member-plan-coin.png?v=20261020-card");
    /* 51042:16931：金币后 26×25 金橙光，模糊 18 */
    filter: drop-shadow(-6px 4px 9px rgba(255, 155, 79, 0.85));
  }
  body[data-recharge-tab="coin"] .mobile-recharge-coin-plan > strong {
    display: none;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-coin-hero {
    position: absolute;
    z-index: 3;
    top: 28px;
    left: 16px;
    display: flex;
    align-items: baseline;
    gap: 1px;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-coin-amount {
    display: block;
    color: #8a38f5;
    font: 400 24px/29px Impact, "Arial Narrow", sans-serif;
    -webkit-text-stroke: 1px #fff;
    paint-order: stroke fill;
    text-shadow: 0 1px 2px #24034e;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-coin-unit {
    display: block;
    background: linear-gradient(180deg, #3f0cda 0%, #220674 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font: 600 12px/17px "PingFang SC", "Microsoft YaHei", sans-serif;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-coin-price {
    position: absolute;
    z-index: 3;
    top: auto;
    bottom: 12px;
    left: 12px;
    display: flex;
    width: auto;
    height: auto;
    margin: 0;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 4px;
    background: none;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: #ffecf1;
    color: #ffecf1;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-coin-price__yen {
    display: inline;
    color: #ffecf1;
    -webkit-text-fill-color: #ffecf1;
    font: 600 12px/17px "PingFang SC", "Microsoft YaHei", sans-serif;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-coin-price__num {
    color: #ffecf1;
    -webkit-text-fill-color: #ffecf1;
    font: 400 20px/21px "HYNianHuaSong", "Hiragino Mincho ProN", "Songti SC", serif;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-coin-price__rmb {
    display: inline;
    color: #b8acae;
    -webkit-text-fill-color: #b8acae;
    font: 400 10px/12px "PingFang SC", "Microsoft YaHei", sans-serif;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-coin-plan > .mobile-recharge-countdown {
    display: none;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-payment {
    margin-top: 24px;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-payment h1 {
    margin-bottom: 18px;
    color: #a5a4aa;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-payment h1 img {
    content: url("/static/images/h5-member-wallet.svg?v=20261020-card");
  }
  body[data-recharge-tab="coin"] .mobile-recharge-method b {
    color: rgba(255, 255, 255, 0.9);
  }
  body[data-recharge-tab="coin"] .mobile-recharge-footer {
    height: auto;
    min-height: calc(104px + env(safe-area-inset-bottom, 0px));
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(39, 32, 29, 0) 0%, #27201d 18%);
  }
  body[data-recharge-tab="coin"] .mobile-recharge-footer p {
    color: #b3b3b3;
    font-size: 12px;
    line-height: 18px;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-footer p a {
    color: #ffb800;
  }
  /* 底栏 CTA：组件 51046:17866，340×60。未开通/已开通同粉钮。JS 文案保持「立即充值」。 */
  body[data-recharge-tab="coin"] .mobile-recharge-shell .mobile-recharge-footer button {
    width: 340px;
    max-width: 100%;
    height: 60px;
    flex: 0 0 60px;
    margin: 0 auto;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-shell .mobile-recharge-footer button::before {
    top: 10px;
    left: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    height: 50px;
    border-radius: 70px;
    background-image: linear-gradient(90deg, #e9bb99 16.8%, #fff7f1 87.3%);
    background-color: transparent;
    background-size: auto;
    box-shadow: 0 0 0 2px #f9e5cf;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-shell .mobile-recharge-footer button::after {
    top: 15px;
    right: 5px;
    left: auto;
    bottom: auto;
    z-index: 2;
    width: 139px;
    height: 40px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: url("/static/images/pc-member-pay-pink.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-shell .mobile-recharge-footer button > span {
    top: 19px;
    left: 20px;
    z-index: 3;
    align-items: flex-end;
    color: #000;
    -webkit-text-fill-color: #000;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-shell .mobile-recharge-footer button > span b {
    color: #000;
    -webkit-text-fill-color: #000;
    font-size: 28px;
    line-height: 32px;
    font-weight: 600;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-shell .mobile-recharge-footer button > strong {
    top: 23px;
    right: 13px;
    z-index: 3;
    display: flex;
    width: auto;
    height: 24px;
    align-items: center;
    gap: 6px;
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-size: 0;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-shell .mobile-recharge-footer button > strong::before {
    content: "立即支付";
    font-family: Inter, "PingFang SC", sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-shell .mobile-recharge-footer button > strong::after {
    content: "";
    width: 20px;
    height: 20px;
    background: url("/static/images/pc-member-pay-arrow.png") center / 20px 20px no-repeat;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-shell .mobile-recharge-footer button > em {
    top: 0;
    left: 72px;
    right: auto;
    display: flex;
    width: auto;
    min-width: 131px;
    height: 20px;
    padding: 0 8px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 0;
    border-radius: 10px 36px 36px 0;
    background: linear-gradient(135deg, #ff9d70 0%, #ff5412 52%, #ff883e 100%);
    box-shadow: none;
    filter: none;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
  }
}

/* PC 金币充值：好色 49073:489415 — 直接复用会员中心壳，仅用户行余额与套餐差 */
@media (min-width: 1200px) {
  body[data-recharge-tab="coin"] .mobile-recharge-shell .mobile-recharge-coin-plans {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 220px;
    margin: 0;
    padding: 51px 11px 51px 12px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible;
    border: 2px solid #28282b;
    border-radius: 40px;
    background: linear-gradient(180deg, #1d1c20 0%, rgba(27, 26, 30, 0.32) 8.2%, #141016 100%);
    box-shadow: none;
    scrollbar-width: none;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-shell .mobile-recharge-coin-plans::-webkit-scrollbar { display: none; }
  /* VIP 字标与会员中心同贴右（勿再左移避钮）；余额区叠在字标之上 */
  body[data-recharge-tab="coin"] .mobile-recharge-hero--coin .desktop-recharge-member-user-deco {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
  }
  body[data-recharge-tab="coin"] .desktop-recharge-coin-wallet {
    position: relative;
    z-index: 2;
    display: flex;
    width: 329px;
    height: 77px;
    flex: 0 0 329px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body[data-recharge-tab="coin"] .desktop-recharge-coin-wallet__label {
    display: block;
    width: 100%;
    color: rgba(255, 255, 255, 0.9);
    font: 500 20px/28px "PingFang SC", "Microsoft YaHei", sans-serif;
  }
  body[data-recharge-tab="coin"] .desktop-recharge-coin-wallet__row {
    display: flex;
    width: 100%;
    height: 41px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  body[data-recharge-tab="coin"] .desktop-recharge-coin-wallet__amount {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  body[data-recharge-tab="coin"] .desktop-recharge-coin-wallet__amount img {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
  }
  body[data-recharge-tab="coin"] .desktop-recharge-coin-wallet__amount b {
    color: #e5365c;
    font: 600 44px/41px "PingFang SC", "Microsoft YaHei", sans-serif;
  }
  body[data-recharge-tab="coin"] .desktop-recharge-coin-wallet__detail {
    display: inline-flex;
    box-sizing: border-box;
    width: 124px;
    height: 41px;
    flex: 0 0 124px;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: #e5365c;
    box-shadow: 2.76px 2.76px 8.27px rgba(0, 0, 0, 0.15);
    color: rgba(255, 255, 255, 0.9);
    font: 500 20px/28px "PingFang SC", "Microsoft YaHei", sans-serif;
    text-decoration: none;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-shell .mobile-recharge-footer button > strong::before {
    content: "立即充值";
  }
  body[data-recharge-tab="coin"] .mobile-recharge-shell .mobile-recharge-notes--coin {
    display: block;
  }
  /* 未开通灰色胶囊：稿 51061:451344 */
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-shell.has-account-user:not(.has-active-member) .mobile-recharge-member-card em {
    min-width: 42px;
    padding: 1px 6px;
    border: 1px solid transparent;
    background:
      linear-gradient(#18181b, #18181b) padding-box,
      linear-gradient(135deg, #f7f7f7 0%, #8e999a 100%) border-box;
    color: rgba(255, 255, 255, 0.9);
  }
  /* 金币页 meta：在共用 nowrap/gap 上限制宽度，避免挤到钱包区换行 */
  body[data-recharge-tab="coin"] .mobile-recharge-shell .mobile-recharge-member-card__meta {
    width: auto;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 8px;
  }
  /* 已开通用户信息：稿 49075:490286 / 51061:451385。金胶囊；到期行 16/22、55% 白（头像描边与未开通共用 2px #ff5412） */
  body[data-recharge-tab="coin"] .mobile-recharge-shell.has-active-member .mobile-recharge-member-card em {
    box-sizing: border-box;
    min-width: 52px;
    height: 18px;
    padding: 1px 6px;
    border: 0;
    background: linear-gradient(135deg, #ffe580 0%, #facc15 100%);
    color: #694923;
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
  }
}

/* 会员中心 / 金币充值同一文档切换，未选中的面板不占位 */
body[data-recharge-tab="member"] .recharge-only-coin,
body[data-recharge-tab="coin"] .recharge-only-member { display: none !important; }

/* 好色 PC 会员卡 51061:448807、金币卡 51061:448802。页面实例按 300×210 缩到 257×180。 */
@media (min-width: 1200px) {
  body[data-recharge-tab="member"] .mobile-recharge-member-plans {
    height: auto;
    min-height: 212px;
    padding: 16px 16px 20px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
  }

  body[data-recharge-tab="member"] .mobile-recharge-member-plan,
  body[data-recharge-tab="member"] .has-active-member .mobile-recharge-member-plan,
  body[data-recharge-tab="member"] .mobile-recharge-member-plan.is-active,
  body[data-recharge-tab="member"] .has-active-member .mobile-recharge-member-plan.is-active {
    position: relative;
    width: 257px;
    min-width: 257px;
    height: 180px;
    padding: 0;
    flex: 0 0 257px;
    overflow: visible;
    border: 0;
    border-radius: 14px;
    background: #080808;
    box-shadow: none;
  }

  /* PC 选中金环：同 H5 51046:17505，4px #ffe580→#facc15，底边被黑底压淡；单独一层，不占卡身伪元素，z 低于倒计时 */
  body[data-recharge-tab="member"] .mobile-recharge-member-plan.is-active {
    outline: 0;
    box-shadow: none;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan.is-active > .mobile-recharge-plan-ring {
    display: block;
    position: absolute;
    z-index: 3;
    inset: -4px;
    padding: 4px;
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(8, 8, 8, 0) 28%, rgba(8, 8, 8, 0.38) 48%, rgba(8, 8, 8, 0.32) 100%),
      linear-gradient(135deg, #ffe580 0%, #facc15 100%);
    pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }

  body[data-recharge-tab="member"] .mobile-recharge-member-plan::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 105px;
    transform: none;
    clip-path: none;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(160deg, rgba(44, 41, 57, 0.94) 0%, rgba(60, 59, 67, 0.94) 100%);
    background-clip: border-box;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: 0;
    opacity: 1;
    pointer-events: none;
  }

  body[data-recharge-tab="member"] .mobile-recharge-plan-title,
  body[data-recharge-tab="member"] .mobile-recharge-plan-benefits {
    display: contents;
  }

  body[data-recharge-tab="member"] .mobile-recharge-plan-gift {
    position: absolute;
    z-index: 3;
    top: 78px;
    left: 22px;
    width: 50px;
    height: 50px;
    padding: 0;
    background: url("/static/images/haose-bao.png") center / contain no-repeat;
    color: transparent;
    font-size: 0;
  }

  body[data-recharge-tab="member"] .mobile-recharge-plan-title strong {
    position: absolute;
    z-index: 3;
    top: 82px;
    left: 80px;
    height: auto;
    color: #fff;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 34px;
  }

  body[data-recharge-tab="member"] .mobile-recharge-plan-price {
    position: absolute;
    z-index: 3;
    top: 34px;
    left: 22px;
    height: auto;
    margin: 0;
    gap: 2px;
  }

  body[data-recharge-tab="member"] .mobile-recharge-plan-price small {
    color: #fff;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
  }

  body[data-recharge-tab="member"] .mobile-recharge-plan-price b {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
    font: 400 40px/1 Impact, "Arial Narrow", sans-serif;
    font-style: normal;
    letter-spacing: 0;
  }

  body[data-recharge-tab="member"] .mobile-recharge-plan-price b::after { content: none; }

  body[data-recharge-tab="member"] .mobile-recharge-plan-original {
    position: absolute;
    z-index: 3;
    top: 52px;
    left: 108px;
    height: auto;
    color: #dbd4ff;
    font-size: 16px;
    line-height: 18px;
    text-decoration: line-through;
  }

  body[data-recharge-tab="member"] .mobile-recharge-plan-bonus {
    position: absolute;
    z-index: 4;
    top: 0;
    right: 8px;
    display: flex;
    height: 26px;
    align-items: center;
    justify-content: center;
    padding: 2px 10px 4px;
    border-radius: 0 8px 0 10px;
    background: linear-gradient(90deg, #634ed5 0%, #852ac2 100%);
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
  }

  /* 色带按套餐名，不按卡片序号 */
  body[data-recharge-tab="member"] .mobile-recharge-shell .mobile-recharge-plan-bonus {
    background: linear-gradient(90deg, var(--ribbon-a), var(--ribbon-b));
  }

  body[data-recharge-tab="member"] .mobile-recharge-plan-benefits > em {
    position: absolute;
    z-index: 3;
    top: 116px;
    left: 80px;
    width: 160px;
    height: auto;
    color: #aeacb8;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
  }

  body[data-recharge-tab="member"] .mobile-recharge-countdown {
    z-index: 4;
    bottom: 8px;
    width: 220px;
  }

  body[data-recharge-tab="member"] .mobile-recharge-countdown span { color: #fff; }

  body[data-recharge-tab="coin"] .mobile-recharge-coin-plans {
    height: auto;
    min-height: 220px;
    padding: 51px 11px 51px 12px;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }

  /* 金币卡：稿 51061:448802。紫板 146×132 r7.4；黑底 160×153 自 y20 r14.7 */
  body[data-recharge-tab="coin"] .mobile-recharge-coin-plan,
  body[data-recharge-tab="coin"] .has-active-member .mobile-recharge-coin-plan,
  body[data-recharge-tab="coin"] .mobile-recharge-coin-plan.is-active,
  body[data-recharge-tab="coin"] .has-active-member .mobile-recharge-coin-plan.is-active {
    width: 160px;
    min-width: 160px;
    height: 174px;
    padding: 0;
    flex: 0 0 160px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='146' height='132'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='14' y1='23' x2='131' y2='29' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23634ed5'/%3E%3Cstop offset='1' stop-color='%23dbc3eb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='145.5' height='131.9' rx='7.36' fill='url(%23g)'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='153'%3E%3Crect width='160' height='153.4' rx='14.71' fill='%23170808'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 7px 0, 0 20px;
    background-size: 146px 132px, 160px 153px;
  }

  /* 选中金环：同会员卡，4px #ffe580→#facc15，下半段被黑底压暗；圆角 18px，z 低于倒计时 */
  body[data-recharge-tab="coin"] .mobile-recharge-coin-plan.is-active {
    box-shadow: none;
    outline: none;
  }

  /* 下沿黑底：稿 51061:448743。上边 M0 0 → L160 20.9，左高右低 */
  body[data-recharge-tab="coin"] .mobile-recharge-coin-plan::before,
  body[data-recharge-tab="coin"] .has-active-member .mobile-recharge-coin-plan::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 160px;
    height: 89.633px;
    transform: none;
    border-radius: 0;
    clip-path: path("M0 0L160 20.9085L160 73.6329C160 82.4695 152.837 89.6329 144 89.6329L16 89.6329C7.16345 89.6329 0 82.4695 0 73.6329Z");
    background: linear-gradient(146deg, rgba(44, 41, 57, .94), rgba(60, 59, 67, .94));
    filter: drop-shadow(0 1.84px 8px #080808);
    background-clip: border-box;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: 0;
    opacity: 1;
    pointer-events: none;
  }

  body[data-recharge-tab="coin"] .mobile-recharge-coin-plan::after {
    content: "";
    position: absolute;
    z-index: 6;
    inset: -4px;
    padding: 4px;
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(8, 8, 8, 0) 28%, rgba(8, 8, 8, 0.38) 48%, rgba(8, 8, 8, 0.32) 100%),
      linear-gradient(135deg, #ffe580 0%, #facc15 100%);
    opacity: 0;
    pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }

  body[data-recharge-tab="coin"] .mobile-recharge-coin-plan.is-active::after { opacity: 1; }

  body[data-recharge-tab="coin"] .mobile-recharge-coin-plan > .mobile-recharge-coin-gift {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 7px;
    left: auto;
    display: flex;
    width: auto;
    height: 24px;
    margin: 0;
    padding: 3px 4px 6px 5px;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    overflow: visible;
    border-radius: 0 7px 0 7px;
    background: linear-gradient(93deg, #634ed5 0%, #852ac2 100%);
    color: #fff;
    font: 500 9px/13px "PingFang SC", "Microsoft YaHei", sans-serif;
    white-space: nowrap;
  }

  body[data-recharge-tab="coin"] .mobile-recharge-coin-plan > .mobile-recharge-coin-gift i {
    display: block;
    box-sizing: border-box;
    width: 26px;
    height: 15px;
    flex: 0 0 26px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: url("/static/images/pc-coin-gift-mark.svg") center / 26px 15px no-repeat;
    color: transparent;
    font-size: 0;
  }

  body[data-recharge-tab="coin"] .mobile-recharge-coin-plan > img {
    position: absolute;
    z-index: 4;
    top: 77px;
    left: 97px;
    right: auto;
    width: 50px;
    height: 50px;
    margin: 0;
    object-fit: contain;
    content: url("/static/images/haose-coin.png");
    filter: drop-shadow(0 8px 6px rgba(255, 155, 79, .7));
  }

  body[data-recharge-tab="coin"] .mobile-recharge-coin-plan > strong { display: none; }

  body[data-recharge-tab="coin"] .mobile-recharge-coin-hero {
    position: absolute;
    z-index: 3;
    top: 44px;
    left: 19px;
    display: flex;
    align-items: baseline;
    gap: 1px;
  }

  body[data-recharge-tab="coin"] .mobile-recharge-coin-amount {
    display: block;
    color: #8a38f5;
    font: 400 33px/40px Impact, "Arial Narrow", sans-serif;
    -webkit-text-stroke: 1.8px #fff;
    paint-order: stroke fill;
    text-shadow: 0 0.92px 1.84px #24034e;
  }

  body[data-recharge-tab="coin"] .mobile-recharge-coin-unit {
    display: block;
    background: linear-gradient(180deg, #3f0cda 0%, #220674 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font: 600 11px/15px "PingFang SC", "Microsoft YaHei", sans-serif;
  }

  body[data-recharge-tab="coin"] .mobile-recharge-coin-price {
    position: absolute;
    z-index: 3;
    bottom: 27px;
    left: 22px;
    display: flex;
    width: 118px;
    height: auto;
    margin: 0;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    background: none;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: #ffecf1;
    color: #ffecf1;
  }

  body[data-recharge-tab="coin"] .mobile-recharge-coin-price__yen {
    display: inline;
    color: #ffecf1;
    font: 600 15px/21px "PingFang SC", "Microsoft YaHei", sans-serif;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-coin-price__num {
    color: #ffecf1;
    font: 300 24px/24px "Hiragino Mincho ProN", "Songti SC", "PingFang SC", serif;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-coin-price__rmb {
    display: inline;
    color: #b8acae;
    -webkit-text-fill-color: #b8acae;
    font: 400 15px/17px "PingFang SC", "Microsoft YaHei", sans-serif;
  }

  body[data-recharge-tab="coin"] .mobile-recharge-coin-plan > .mobile-recharge-countdown {
    position: absolute;
    z-index: 7;
    bottom: -14px;
    left: 50%;
    width: 161px;
    height: 27px;
    transform: translateX(-50%);
    gap: 0;
    overflow: visible;
    color: #1a1c57;
    font: 500 13px/16px Inter, sans-serif;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-countdown b,
  body[data-recharge-tab="coin"] .mobile-recharge-countdown i {
    height: 27px;
    padding: 5px;
    border-radius: 4px;
    background: #fcc100;
    color: #1a1c57;
    font: 500 13px/16px Inter, sans-serif;
  }
  body[data-recharge-tab="coin"] .mobile-recharge-countdown b { width: 46px; }
  body[data-recharge-tab="coin"] .mobile-recharge-countdown i[data-countdown-hours] { width: 26px; }
  body[data-recharge-tab="coin"] .mobile-recharge-countdown i[data-countdown-minutes],
  body[data-recharge-tab="coin"] .mobile-recharge-countdown i[data-countdown-seconds] { width: 28px; }
  body[data-recharge-tab="coin"] .mobile-recharge-countdown span {
    width: 11px;
    height: 22px;
    padding: 0;
    color: #fff;
    font: 400 19px/21px Inter, sans-serif;
  }
}

/* —— H5 会员/金币：组件集 51046:17433（会员卡 / 金币卡 / 支付按钮 / 支付方式选中）—— */
@media (max-width: 1199px) {
  /* 会员卡：140×140；按套餐名四色；选中外 4px #ffe580→#facc15 */
  body[data-recharge-tab="member"] .mobile-recharge-member-plans {
    margin-top: -4px;
    margin-left: -4px;
    padding-top: 4px;
    padding-left: 4px;
    padding-bottom: 18px;
    overflow-x: auto;
    overflow-y: visible;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan,
  body[data-recharge-tab="member"] .mobile-recharge-member-plan.is-active {
    position: relative;
    box-sizing: border-box;
    width: 140px;
    min-width: 140px;
    height: 140px;
    flex: 0 0 140px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 16px;
    background-color: transparent;
    /* 层序：斜切黑底在上（左高右低），128×91 圆角色块在下，#080808 垫底。稿 51046:17430 */
    --h5-plan-slant: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='97' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='38' y1='16' x2='102' y2='84' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%232c2939' stop-opacity='.94'/%3E%3Cstop offset='1' stop-color='%233c3b43' stop-opacity='.94'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0L140 9.92511L140 97H0V0Z' fill='url(%23s)'/%3E%3Cpath d='M0 0L140 9.92511' stroke='white' stroke-opacity='.16'/%3E%3C/svg%3E");
    --h5-plan-plate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='91'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='10' y1='16' x2='118' y2='22' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23634ed5'/%3E%3Cstop offset='1' stop-color='%23dbc3eb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='128' height='91' rx='8' fill='url(%23c)'/%3E%3C/svg%3E");
    background-image: var(--h5-plan-slant), var(--h5-plan-plate), linear-gradient(#080808, #080808);
    background-repeat: no-repeat;
    background-position: 0 43px, 6px 0, 0 14px;
    background-size: 140px 97px, 128px 91px, 140px 86px;
    box-shadow: 0 2px 14px #080808;
    text-align: left;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan::before {
    content: none;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan[data-plan-name*="永久"] {
    --h5-plan-plate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='91'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='10' y1='16' x2='118' y2='22' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%234e6bd5'/%3E%3Cstop offset='1' stop-color='%23ccc3eb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='128' height='91' rx='8' fill='url(%23c)'/%3E%3C/svg%3E");
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan[data-plan-name*="季"] {
    --h5-plan-plate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='91'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='10' y1='16' x2='118' y2='22' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230ebf93'/%3E%3Cstop offset='1' stop-color='%236dd1ea'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='128' height='91' rx='8' fill='url(%23c)'/%3E%3C/svg%3E");
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan[data-plan-name*="年"] {
    --h5-plan-plate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='91'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='10' y1='16' x2='118' y2='22' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23bf670e'/%3E%3Cstop offset='1' stop-color='%23eae46d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='128' height='91' rx='8' fill='url(%23c)'/%3E%3C/svg%3E");
  }
  /* 选中金环：4px 外描边，左上 #ffe580 → 右下 #facc15；下半段被卡身阴影压暗（稿 51046:17505） */
  body[data-recharge-tab="member"] .mobile-recharge-member-plan::after {
    content: "";
    position: absolute;
    z-index: 6;
    inset: -4px;
    padding: 4px;
    border-radius: 20px;
    background:
      linear-gradient(180deg, rgba(8, 8, 8, 0) 28%, rgba(8, 8, 8, 0.38) 48%, rgba(8, 8, 8, 0.32) 100%),
      linear-gradient(135deg, #ffe580 0%, #facc15 100%);
    opacity: 0;
    pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan.is-active::after {
    opacity: 1;
  }

  body[data-recharge-tab="member"] .mobile-recharge-plan-gem {
    position: absolute;
    z-index: 3;
    top: 37px;
    left: 90px;
    right: auto;
    display: block;
    width: 34px;
    height: 34px;
    background: url("/static/images/h5-member-plan-gem.png?v=20261020-card") center / contain no-repeat;
    pointer-events: none;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan[data-plan-name*="季"] .mobile-recharge-plan-gem {
    background-image: url("/static/images/h5-member-plan-gem-alt.png?v=20261020-card");
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan[data-plan-name*="年"] .mobile-recharge-plan-gem {
    background-image: url("/static/images/h5-member-plan-gem-year.png?v=20261020-card");
  }

  body[data-recharge-tab="member"] .mobile-recharge-plan-title {
    position: absolute;
    z-index: 4;
    top: 68px;
    right: 8px;
    bottom: auto;
    left: 14px;
    display: block;
    width: auto;
    height: 30px;
    text-align: left;
  }
  body[data-recharge-tab="member"] .mobile-recharge-plan-title strong {
    display: block;
    overflow: hidden;
    color: #ffffff;
    font-size: 20px;
    line-height: 30px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-recharge-tab="member"] .mobile-recharge-plan-gift {
    position: absolute;
    z-index: 5;
    top: 3px;
    right: auto;
    bottom: auto;
    left: 81px;
    width: 37px;
    height: 37px;
    padding: 0;
    background: url("/static/images/h5-member-plan-hot.png?v=20261020-card") center / 100% 100% no-repeat;
    color: transparent;
    font-size: 0;
  }

  body[data-recharge-tab="member"] .mobile-recharge-plan-price {
    position: absolute;
    z-index: 4;
    top: 22px;
    left: 14px;
    display: flex;
    height: 17px;
    margin: 0;
    align-items: flex-end;
    gap: 2px;
  }
  body[data-recharge-tab="member"] .mobile-recharge-plan-price small {
    color: #ffffff;
    font-size: 12px;
    line-height: 13px;
    font-weight: 600;
  }
  body[data-recharge-tab="member"] .mobile-recharge-plan-price b {
    background: none;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    font: 400 24px/17px "PingFang SC", "DIN Alternate", Arial, sans-serif;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
  }
  body[data-recharge-tab="member"] .mobile-recharge-plan-price b::after {
    content: none;
  }
  body[data-recharge-tab="member"] .mobile-recharge-plan-original {
    position: absolute;
    z-index: 4;
    top: 30px;
    left: 63px;
    height: 9px;
    color: #dbd4ff;
    font-size: 10px;
    line-height: 9px;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan[data-plan-name*="季"] .mobile-recharge-plan-original {
    color: #caebe4;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan[data-plan-name*="年"] .mobile-recharge-plan-original {
    color: #ebdbca;
  }
  body[data-recharge-tab="member"] .mobile-recharge-plan-benefits {
    position: absolute;
    z-index: 4;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 100%;
    pointer-events: none;
  }
  body[data-recharge-tab="member"] .mobile-recharge-plan-bonus {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 0;
    left: auto;
    display: inline-flex;
    box-sizing: border-box;
    width: auto;
    min-width: 67px;
    height: 20px;
    margin: 0;
    padding: 3px 4px 6px 5px;
    align-items: center;
    justify-content: center;
    border-radius: 0 8px 0 8px;
    background: linear-gradient(93deg, #634ed5 0%, #852ac2 100%);
    color: #ffffff;
    font-size: 10px;
    line-height: 14px;
    font-weight: 500;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan[data-plan-name*="永久"] .mobile-recharge-plan-bonus {
    background: linear-gradient(93deg, #4e5fd5 0%, #2a43c2 100%);
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan[data-plan-name*="季"] .mobile-recharge-plan-bonus {
    background: linear-gradient(93deg, #10ac9a 0%, #12a09e 100%);
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan[data-plan-name*="年"] .mobile-recharge-plan-bonus {
    background: linear-gradient(93deg, #ac7310 0%, #a07b12 100%);
  }
  body[data-recharge-tab="member"] .mobile-recharge-plan-benefits > em {
    position: absolute;
    top: 98px;
    left: 14px;
    right: 8px;
    display: block;
    height: 12px;
    margin: 0;
    overflow: hidden;
    color: #aeacb8;
    font-size: 10px;
    line-height: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-recharge-tab="member"] .mobile-recharge-countdown {
    z-index: 7;
    bottom: -10px;
    left: 50%;
    width: 124px;
    height: 20px;
    transform: translateX(-50%);
  }
  body[data-recharge-tab="member"] .mobile-recharge-countdown b,
  body[data-recharge-tab="member"] .mobile-recharge-countdown i {
    background: #fcc100;
    color: #040404;
    font: 500 10px/12px Inter, "PingFang SC", sans-serif;
  }
  body[data-recharge-tab="member"] .mobile-recharge-countdown span {
    color: #ffffff;
  }

  /* 支付标题粉钱包 */
  body[data-recharge-tab="member"] .mobile-recharge-payment h1 img {
    content: url("/static/images/h5-member-wallet.svg?v=20261020-card");
    width: 24px;
    height: 24px;
  }

  /* 支付方式选中：稿 49059:473319。1px 内描边，上 #ff2264 → 下 10% 同色；底仍是 5% 白渐变 */
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-method {
    position: relative;
    box-sizing: border-box;
    height: 60px;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-method.is-active::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(180deg, #ff2264 0%, rgba(255, 34, 100, 0.1) 100%);
    pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }
  body[data-recharge-tab="member"] .mobile-recharge-method[data-payment-method="alipay"] img,
  body[data-recharge-tab="coin"] .mobile-recharge-method[data-payment-method="alipay"] img {
    content: url("/static/images/h5-member-alipay.svg?v=20261020-card");
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-method > i {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-method > i::before {
    inset: 0;
    border-width: 1.333px;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-method.is-active > i {
    background: linear-gradient(180deg, #35debc 0%, #22bb9c 100%);
    border-radius: 50%;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-method.is-active > i::before {
    display: block;
    top: 3px;
    left: 2.5px;
    right: auto;
    bottom: auto;
    width: 6px;
    height: 3.5px;
    border: 0;
    border-left: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    border-radius: 0;
    background: transparent;
    transform: rotate(-45deg);
  }

  /* 支付按钮：组件 51046:17866，会员与金币共用 */
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer {
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(39, 32, 29, 0) 0%, #27201d 18%);
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer button {
    position: relative;
    width: 340px;
    max-width: 100%;
    height: 60px;
    flex: 0 0 60px;
    overflow: visible;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer button::before {
    top: 10px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 70px;
    background-color: transparent;
    background-image: linear-gradient(107.7deg, #e9bb99 26.5%, #fff7f1 79.71%);
    box-shadow: 0 0 0 2px #f9e5cf;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer button::after {
    top: 15px;
    right: 5px;
    bottom: auto;
    left: auto;
    z-index: 2;
    box-sizing: border-box;
    width: 139px;
    height: 40px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: url("/static/images/h5-member-pay-pink.svg?v=20261020-card");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer button > span {
    top: 19px;
    left: 20px;
    z-index: 3;
    align-items: flex-end;
    color: #000;
    -webkit-text-fill-color: #000;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer button > span b {
    color: #000;
    -webkit-text-fill-color: #000;
    font-size: 28px;
    line-height: 32px;
    font-weight: 600;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer button:not(:disabled) > strong {
    top: 23px;
    right: 13px;
    z-index: 3;
    display: flex;
    width: auto;
    height: 24px;
    align-items: center;
    gap: 6px;
    transform: none;
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-size: 0;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer button:not(:disabled) > strong::before {
    content: "立即支付";
    font-family: Inter, "PingFang SC", sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer button:not(:disabled) > strong::after {
    content: "";
    width: 20px;
    height: 20px;
    background: url("/static/images/pc-member-pay-arrow.png") center / 20px 20px no-repeat;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer button:disabled > strong {
    top: 23px;
    right: 13px;
    z-index: 3;
    width: auto;
    max-width: 120px;
    color: #fff;
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
    text-align: center;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer button:disabled > strong::before,
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer button:disabled > strong::after {
    content: none;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer button > em {
    top: 0;
    left: 72px;
    right: auto;
    display: flex;
    width: auto;
    min-width: 131px;
    height: 20px;
    padding: 0 8px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px 36px 36px 0;
    background: linear-gradient(135deg, #ff9d70 0%, #ff5412 52%, #ff883e 100%);
    box-shadow: none;
    filter: none;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
  }
  :is(body[data-recharge-tab="member"], body[data-recharge-tab="coin"]) .mobile-recharge-footer p a {
    color: #ffd301;
  }
}