/* Figma 49059:472045 / 45207:32978. Coordinates exclude the 44px OS status bar.
   H5 member presentation only; package, account and payment behavior stays shared. */
.mobile-recharge-member-visual { display: none; }
@media (max-width: 1199px) {
  body[data-recharge-tab="member"] .mobile-recharge-shell {
    background: #111;
  }
  body[data-recharge-tab="member"] .mobile-recharge-hero {
    height: calc(71.4667cqw - 48px);
    flex: 0 0 auto;
    overflow: visible;
  }
  body[data-recharge-tab="member"] .mobile-recharge-hero::before,
  body[data-recharge-tab="member"] .mobile-recharge-diamond { display: none; }
  body[data-recharge-tab="member"] .mobile-recharge-member-visual {
    position: absolute;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    top: -48px;
    height: 71.4667cqw;
    background: #070707;
  }
  .mobile-member-hero__planet {
    position: absolute;
    top: -11.7333cqw;
    left: -38.9333cqw;
    width: 157.0667cqw;
    height: 88.5333cqw;
    background: url("/static/images/mobile-member-hero-20261022/planet.png") center / cover;
    mix-blend-mode: hard-light;
    opacity: .1;
  }
  .mobile-member-hero__columns {
    position: absolute;
    inset: -5.2779cqw 0 auto;
    height: 64.2061cqw;
  }
  .mobile-member-hero__columns i {
    position: absolute;
    top: 0;
    left: 0;
    width: 9.3315%;
    height: 100%;
    opacity: .3;
    background: linear-gradient(transparent, rgba(255,255,255,.3) 47.596%, transparent);
  }
  .mobile-member-hero__columns i:nth-child(2) { left: 12.6747%; }
  .mobile-member-hero__columns i:nth-child(3) { left: 27.2987%; width: 9.1923%; }
  .mobile-member-hero__columns i:nth-child(4) { left: 42.896%; width: 4.4568%; }
  .mobile-member-hero__columns i:nth-child(5) { left: 82.032%; width: 4.4568%; }
  .mobile-member-hero__columns i:nth-child(6) { left: 88.8587%; width: 4.4568%; }
  .mobile-member-hero__columns i:nth-child(7) { left: 95.544%; width: 4.4568%; }
  .mobile-member-hero__columns i:nth-child(8) { left: 50.1387%; width: 5.1533%; }
  .mobile-member-hero__columns i:nth-child(9) { left: 58.496%; width: 5.1533%; }
  .mobile-member-hero__columns i:nth-child(10) { left: 65.8773%; width: 13.7883%; }
  .mobile-member-hero__art {
    position: absolute;
    top: 3.7333cqw;
    left: 0;
    width: 100%;
    height: 88cqw;
    overflow: hidden;
    border-radius: 4.8755cqw;
    mask: url("/static/images/mobile-member-hero-20261022/mask.svg") 0 0 / 100% 98.6667cqw no-repeat;
  }
  .mobile-member-hero__art > img {
    position: absolute;
    top: -1.8667cqw;
    left: 0;
    width: 100%;
    height: 87.9581cqw;
    object-fit: cover;
  }
  .mobile-member-hero__overlay {
    position: absolute;
    top: -15.2cqw;
    left: 0;
    width: 100%;
    height: 103.2cqw;
    background: url("/static/images/mobile-member-hero-20261022/overlay.svg") center / 100% 100% no-repeat;
  }
  .mobile-member-hero__steps {
    position: absolute;
    top: 64cqw;
    left: 0;
    width: 100%;
    height: 23.7333cqw;
  }
  .mobile-member-hero__steps i {
    position: absolute;
    left: 50%;
    width: 45.3333%;
    height: 3.2cqw;
    transform: translateX(-50%);
    background: linear-gradient(250deg, #2a1520, #a9477b 46.627%, #1d0f15 97.965%);
    box-shadow: 0 -1px 4px #0000001a;
  }
  .mobile-member-hero__steps i:nth-child(2) { top: 1.0667cqw; width: 51.2%; }
  .mobile-member-hero__steps i:nth-child(3) { top: 2.4cqw; width: 54.9333%; }
  .mobile-member-hero__steps i:nth-child(4) { top: 3.4667cqw; width: 61.3333%; }
  .mobile-member-hero__steps i:nth-child(5) { top: 4.8cqw; width: 67.7333%; }
  .mobile-member-hero__steps i:nth-child(6) { top: 6.1333cqw; width: 73.0667%; }
  .mobile-member-hero__steps i:nth-child(7) { top: 7.2cqw; width: 100%; height: 15.7333cqw; }
  .mobile-member-hero__steps::after {
    content: "";
    position: absolute;
    top: -.8cqw;
    left: 44.344%;
    width: 8%;
    height: 19.2cqw;
    background: #190f16;
    filter: blur(20px);
  }
  body[data-recharge-tab="member"] .mobile-recharge-hero__headline:not([hidden]) {
    display: flex !important;
    top: calc(41.6489cqw - 48px);
    left: .6667%;
    width: 98.6666%;
    gap: .8cqw;
    font-size: 6.9333cqw;
    line-height: 8.5333cqw;
    text-shadow: 0 2px 3px #000;
  }
  body[data-recharge-tab="member"] .mobile-recharge-headline-copy--mobile { color: #fff; }
  body[data-recharge-tab="member"] .mobile-recharge-subline-copy--mobile {
    background: linear-gradient(146.13deg, #fcc100 14.159%, #fff7ee 44.435%, #8651f8 85.37%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 2px #000);
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-card:not([hidden]) {
    display: flex !important;
    top: calc(40.5333cqw - 48px);
    left: 50.5333%;
    width: 60.5333cqw;
    height: 16cqw;
    gap: 3.2cqw;
    padding: 1.6cqw 2.6667cqw;
    border-radius: 3.2cqw;
    background: rgba(0,0,0,.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-card > img {
    width: 12.8cqw;
    height: 12.8cqw;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-card > span {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 1.0667cqw 2.1333cqw;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-card strong {
    max-width: calc(100% - 16.2667cqw);
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 4.2667cqw;
    font-weight: 500;
    line-height: 5.8667cqw;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-card em {
    justify-self: start;
    padding: .2667cqw 1.6cqw;
    font-size: 2.6667cqw;
    line-height: 4.2667cqw;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-card small {
    width: 100%;
    color: rgba(255,255,255,.55);
    font-size: 3.2cqw;
    line-height: 4.8cqw;
    white-space: nowrap;
  }
}

/* The remaining H5 member controls use the same revised Figma frames. */
@media (max-width: 1199px) {
  body[data-recharge-tab="member"] { background: #14010a; }
  body[data-recharge-tab="member"] .mobile-recharge-shell { background: #14010a; min-height: 100dvh; }
  body[data-recharge-tab="member"] .mobile-recharge-header { position: relative; flex: 0 0 48px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body[data-recharge-tab="member"] .mobile-recharge-tabs {
    margin-top: 12px; align-self: start; transform: translateX(1.5px);
    width: 161px; height: 27px; padding: 0; gap: 0; border-radius: 999px;
    background: linear-gradient(#000, #380116);
    box-shadow: inset 0 1px 2px #ffffffb3, inset 0 -1px 2px #ffffffb3;
  }
  body[data-recharge-tab="member"] .mobile-recharge-tabs a,
  body[data-recharge-tab="member"] .mobile-recharge-tabs a.is-active {
    height: 27px; width: 65px; flex: 0 0 65px; border-radius: 999px;
    background: transparent; color: #fff6f9; font-size: 12px;
  }
  body[data-recharge-tab="member"] .mobile-recharge-tabs a.is-active {
    width: 96px; flex-basis: 96px; overflow: hidden;
    background: linear-gradient(transparent, #b7056a);
    box-shadow: inset 0 -2px 4px #f13677cc, inset 0 2px 4px #f13677cc;
    font-size: 14px; font-weight: 800; color: #191523;
    -webkit-text-stroke: 1px #fff6f9; paint-order: normal;
    text-shadow: 0 0 2.606px #ffbcd9, 0 0 9.12px #f13677;
  }
  body[data-recharge-tab="member"] .mobile-recharge-tabs a.is-active::before {
    content: ""; position: absolute; display: block; top: -9.68px; left: 25px;
    width: 43.9px; height: 42.07px; opacity: .5;
    background: url("/static/images/mobile-member-hero-20261022/tab-glow.svg") center / 100% 100% no-repeat;
    mask: url("/static/images/mobile-member-hero-20261022/tab-mask.png") -12.475px 9.68px / 67.826px 27px no-repeat;
  }
  body[data-recharge-tab="member"] .mobile-recharge-tabs a > span,
  body[data-recharge-tab="member"] .mobile-recharge-tabs a.is-active > span { position: relative; top: auto; left: auto; opacity: 1; height: 27px; gap: 1px; }
  body[data-recharge-tab="member"] .mobile-recharge-tabs a.is-active > span { position: absolute; top: 6px; left: .7px; width: 95px; height: 14px; gap: 2px; }
  /* Figma's outlined display lettering, including its original glow bounds. */
  body[data-recharge-tab="member"] .mobile-recharge-tabs a.is-active b {
    position: relative; width: 62px; height: 14px; flex: 0 0 62px;
    color: transparent; font-size: 0; text-shadow: none; -webkit-text-stroke: 0;
  }
  body[data-recharge-tab="member"] .mobile-recharge-tabs a.is-active b::after {
    content: ""; position: absolute; top: -10.40625px; left: -10.15723px; width: 83px; height: 35px;
    background: url("/static/images/mobile-member-hero-20261022/tab-title.svg") center / 83px 35px no-repeat;
  }
  body[data-recharge-tab="member"] .mobile-recharge-tabs a:not(.is-active) img { display: none; }
  body[data-recharge-tab="member"] .mobile-recharge-tabs a.is-active img { display: block; width: 12.389px; height: 10px; flex: 0 0 12.389px; object-fit: contain; }
  body[data-recharge-tab="member"] .mobile-recharge-tabs a.is-active img:first-child { content: url("/static/images/mobile-member-hero-20261022/tab-left.svg"); }
  body[data-recharge-tab="member"] .mobile-recharge-tabs a.is-active img:last-child { content: url("/static/images/mobile-member-hero-20261022/tab-right.svg"); }
  body[data-recharge-tab="member"] .mobile-recharge-records {
    top: 55px; width: 20px; height: 64px; border: .6px solid #ff74c5;
    border-right: 0; border-radius: 8px 0 0 8px; background: linear-gradient(#000, #38011b);
    overflow: visible;
  }
  body[data-recharge-tab="member"] .mobile-recharge-records::after {
    content: ""; position: absolute; inset: -.6px 0 -.6px -.6px;
    border-radius: inherit; box-shadow: inset 4px 0 4px #ffffff80; pointer-events: none;
  }
  body[data-recharge-tab="member"] .mobile-recharge-records > img { display: none; }
  body[data-recharge-tab="member"] .mobile-recharge-records > span {
    position: relative; display: block; width: 11px; height: 56px; margin: 3.4px auto;
    overflow: visible; clip: auto; white-space: normal; color: #ffffffe6; font-size: 12px; font-weight: 500; line-height: 14px;
  }
  body[data-recharge-tab="member"] .mobile-recharge-content {
    z-index: 10;
    margin: 0; padding: 24px 16px calc(144px + env(safe-area-inset-bottom, 0px)); flex: 0 0 auto; border-top: 3px solid #fbd341;
    border-radius: 18px 18px 0 0; background: linear-gradient(#23161c, #14010a 25.156%);
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plans {
    width: calc(100% + 16px); height: 148px; margin: 0 -16px 0 0; padding: 0 16px 8px 0;
    gap: 10px; align-items: flex-start; overflow-x: auto; overflow-y: hidden;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan,
  body[data-recharge-tab="member"] .mobile-recharge-member-plan.is-active {
    width: 140px; min-width: 140px; height: 140px; flex: 0 0 140px; margin: 0;
    padding: 11px 6px; border: 2.5px solid transparent; border-radius: 12px; overflow: visible;
    background: linear-gradient(#090607, #552e3e) padding-box; box-shadow: none; outline: 0;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan.is-active {
    background: linear-gradient(#090607, #552e3e) padding-box, linear-gradient(135deg, #fcc100, #fff 48%, #ff77bf) border-box;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan::before {
    display: block; content: "VIP"; left: 0; right: 0; top: 86px; bottom: auto;
    overflow: hidden; height: 51px; color: #ffffff0d; font: italic 800 62px/1 Arial, sans-serif;
    transform: skewX(-20deg) scaleY(.84); border-radius: 0 0 12px 12px;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan::after { display: none; }
  body[data-recharge-tab="member"] .mobile-recharge-plan-title { height: 22px; gap: 2px; }
  body[data-recharge-tab="member"] .mobile-recharge-plan-title strong { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fcc100; font-size: 16px; line-height: 22px; }
  body[data-recharge-tab="member"] .mobile-recharge-plan-gift {
    font-size: 0; flex-shrink: 0;
    display: inline-flex; position: relative; width: 27.249px; height: 17.77px;
    border-radius: 0; background: url("/static/images/mobile-member-hero-20261022/plan-hot.svg") center / 100% 100% no-repeat;
  }
  body[data-recharge-tab="member"] .mobile-recharge-plan-gift img { display: none; }
  body[data-recharge-tab="member"] .mobile-recharge-plan-gift::after { content: "爆"; color: #fff; font: 500 10px/18px "PingFang SC", sans-serif; }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan .mobile-recharge-plan-price-row {
    height: 45px; margin-top: 2px; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan .mobile-recharge-plan-price { height: 33px; flex: 0 0 33px; }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan .mobile-recharge-plan-price b {
    background: linear-gradient(270deg, #fc8cba, #ff0073); background-clip: text; -webkit-background-clip: text;
    color: transparent; font: italic 700 30px/33px Inter, Arial, sans-serif;
  }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan .mobile-recharge-plan-original { height: 10px; font-size: 10px; line-height: 10px; }
  body[data-recharge-tab="member"] .mobile-recharge-plan-bonus { height: 11px; margin-top: 8px; color: #fff; font-size: 10px; line-height: 11px; }
  body[data-recharge-tab="member"] .mobile-recharge-member-plan > em { height: 18px; margin-top: 8px; color: #aeacb8; font-size: 12px; line-height: 18px; }
  body[data-recharge-tab="member"] .mobile-recharge-countdown { top: 124.5px; bottom: auto; left: 6.5px; width: 124px; height: 20px; transform: none; }
  body[data-recharge-tab="member"] .mobile-recharge-countdown b,
  body[data-recharge-tab="member"] .mobile-recharge-countdown i { background: #fcc100; color: #1a1c57; }
  body[data-recharge-tab="member"] .mobile-recharge-countdown span { color: #fff; }
  body[data-recharge-tab="member"] .mobile-recharge-payment { width: 100%; margin: 16px 0 0; }
  body[data-recharge-tab="member"] .mobile-recharge-payment h1 { margin-bottom: 18px; color: #ffffffd9; font-weight: 400; }
  body[data-recharge-tab="member"] .mobile-recharge-payment h1 img {
    object-position: -9999px; background: url("/static/images/mobile-member-hero-20261022/wallet.svg") center / 20px 19px no-repeat;
  }
  body[data-recharge-tab="member"] .mobile-recharge-payment__grid { min-height: 0; align-content: start; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-recharge-tab="member"] .mobile-recharge-method,
  body[data-recharge-tab="member"] .mobile-recharge-method.is-active {
    height: 60px; padding: 12px; border: 0; background: linear-gradient(#ffffff0d, #ffffff00); border-radius: 12px; box-shadow: none;
  }
  body[data-recharge-tab="member"] .mobile-recharge-method img { width: 36px; height: 36px; }
  body[data-recharge-tab="member"] .mobile-recharge-method > i::before { border-color: #fff; }
  body[data-recharge-tab="member"] .mobile-recharge-method.is-active > i { background-image: url("/static/images/mobile-member-hero-20261022/radio-selected.svg"); }
  body[data-recharge-tab="member"] .mobile-recharge-notes {
    width: 100%; height: auto; min-height: 0; margin: 24px 0 0; padding: 0; border: 0; border-radius: 0;
    background: none; color: #ffffff8c; font-size: 12px; line-height: 18px;
  }
  body[data-recharge-tab="member"] .mobile-recharge-notes strong { display: block; margin: 0 0 6px; color: #ffffffd9; font-size: 14px; line-height: 20px; font-weight: 500; }
  body[data-recharge-tab="member"] .mobile-recharge-notes p { color: #ffffff8c; font-size: 12px; line-height: 18px; }
  body[data-recharge-tab="member"] .mobile-recharge-footer {
    position: fixed; margin: 0;
    top: auto; bottom: 0; left: 50%; right: auto; width: min(100%, 430px); height: calc(104px + env(safe-area-inset-bottom, 0px));
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 12px; transform: translateX(-50%); background: linear-gradient(transparent, #14010a 18%);
  }
  body[data-recharge-tab="member"] .mobile-recharge-footer > button { width: 100%; height: 50px; flex: 0 0 50px; }
  body[data-recharge-tab="member"] .mobile-recharge-footer > button::before { top: 0; left: 0; width: 70.8455%; height: 50px; background: url("/static/images/mobile-member-hero-20261022/button-left.svg") center / 100% 100% no-repeat; }
  body[data-recharge-tab="member"] .mobile-recharge-footer > button::after { top: 0; right: 0; width: 36.4431%; height: 50px; z-index: 0; background: url("/static/images/mobile-member-hero-20261022/button-right.svg") center / 100% 100% no-repeat; }
  body[data-recharge-tab="member"] .mobile-recharge-footer > button > span { top: 8px; left: 24px; height: 32px; color: #fff; font-size: 16px; line-height: 22px; align-items: baseline; }
  body[data-recharge-tab="member"] .mobile-recharge-footer > button > span b { color: #fff; background: none; font: 600 28px/32px "PingFang SC", sans-serif; }
  body[data-recharge-tab="member"] .mobile-recharge-footer > button > strong { top: 18px; right: 24px; left: auto; width: auto; height: 16px; color: #14192c; font-size: 16px; line-height: 16px; text-align: center; }
  body[data-recharge-tab="member"] .mobile-recharge-footer > button > strong::after { display: none; }
  body[data-recharge-tab="member"] .mobile-recharge-footer > button > em {
    top: -12px; left: 30.3207%; width: 98px; height: 20px; padding: 3px 8px;
    border: 0; border-radius: 10px 10px 10px 0; background: #ffe149; box-shadow: none; color: #14192c;
    font: 500 10px/14px "PingFang SC", sans-serif;
  }
  body[data-recharge-tab="member"] .mobile-recharge-footer > p { margin: 0; color: #ffffff8c; font-size: 12px; line-height: 18px; }
  body[data-recharge-tab="member"] .mobile-recharge-footer > p a { color: #fd3666; text-decoration: none; }
}