/* Membership and coin purchase share the existing package and checkout flow. */
.mobile-recharge-page { margin: 0; color: #fff; background: #0d0f11; font: 14px/1.5 "PingFang SC", "Microsoft YaHei", sans-serif; color-scheme: dark; }
.mobile-recharge-page *, .mobile-recharge-page *::before, .mobile-recharge-page *::after { box-sizing: border-box; }
.mobile-recharge-shell { position: relative; width: 100%; min-height: 100dvh; margin: 0 auto; background: #010406 url("/static/images/wydsp/recharge-background-mobile.svg") center -44px / 100% auto no-repeat; }
.mobile-recharge-shell [hidden] { display: none !important; }
.mobile-recharge-shell :where(button, a) { font: inherit; -webkit-tap-highlight-color: transparent; }
.mobile-recharge-shell a { color: inherit; text-decoration: none; }
.mobile-recharge-shell button { color: inherit; cursor: pointer; }
.mobile-recharge-shell :is(button, a):focus-visible { outline: 2px solid var(--wydsp-accent, #fd2d55); outline-offset: 3px; }
.desktop-recharge-heading { display: none; }
.mobile-recharge-header { position: sticky; top: 0; z-index: 20; display: grid; height: 56px; padding: 0 16px; grid-template-columns: 1fr auto 1fr; align-items: center; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.mobile-recharge-back { display: flex; width: 24px; height: 24px; align-items: center; }
.mobile-recharge-back.mobile-page-back { background: none; }
.mobile-recharge-tabs { display: flex; width: 199px; height: 36px; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.1); }
.mobile-recharge-tabs a { display: flex; flex: 1; align-items: center; justify-content: center; border-radius: inherit; white-space: nowrap; }
.mobile-recharge-tabs a.is-active { background: var(--wydsp-accent, #fd2d55); }
.mobile-recharge-records { justify-self: end; font-size: 12px !important; line-height: 18px; white-space: nowrap; }
.mobile-recharge-hero { position: relative; height: 164px; overflow: hidden; }
.mobile-recharge-diamond { position: absolute; top: 8px; right: 16px; width: 148px; height: 148px; }
.mobile-recharge-diamond img { position: absolute; top: -30px; left: -15px; display: block; width: 171px; height: 171px; max-width: none; }
.mobile-recharge-hero__headline { position: absolute; top: 50px; left: 16px; display: flex; flex-direction: column; font-size: 26px; line-height: 32px; font-weight: 800; }
.mobile-recharge-hero__headline strong { font: inherit; }
.mobile-recharge-hero__headline > span { background: linear-gradient(90deg, #ff2785, #f4f0f1 52%, #de32ff); background-clip: text; -webkit-background-clip: text; color: transparent; }
.mobile-recharge-member-card, .mobile-recharge-coin-user { position: absolute; top: 24px; left: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: calc(100% - 176px); }
.mobile-recharge-member-card > img, .mobile-recharge-coin-user > img { width: 60px; height: 60px; flex: none; object-fit: cover; border: 2px solid rgba(255,255,255,.3); border-radius: 50%; }
.mobile-recharge-member-card > span { display: flex; min-width: 0; max-width: 100%; flex-direction: column; gap: 4px; }
.mobile-recharge-member-card__identity { display: flex; min-width: 0; align-items: center; gap: 8px; }
.mobile-recharge-member-card__identity strong { min-width: 0; }
.mobile-recharge-member-card em { justify-self: start; }
.mobile-recharge-shell:not(.has-member) .mobile-recharge-member-card { display: none; }
.mobile-recharge-member-card strong, .mobile-recharge-coin-user strong { overflow: hidden; font-size: 16px; line-height: 22px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.mobile-recharge-member-card small { display: flex; grid-column: 1 / -1; gap: 4px; }
.mobile-recharge-member-card small a { color: var(--wydsp-accent, #fd2d55); font-weight: 600; }
.mobile-recharge-member-card em, .mobile-recharge-coin-user em { display: inline-flex; padding: 0 6px; flex: none; align-items: center; border-radius: 999px; background: linear-gradient(135deg,#ffe580,#facc15); color: #3b2d00; font: 10px/18px "PingFang SC",sans-serif; white-space: nowrap; }
.mobile-recharge-member-card small, .mobile-recharge-coin-user small { color: rgba(255,255,255,.5); font-size: 12px; line-height: 18px; white-space: nowrap; }
.mobile-recharge-member-card :is(em,small):empty, .mobile-recharge-coin-user :is(em,small):empty { display: none; }
.mobile-recharge-coin-user > span { min-width: 0; max-width: 100%; }
.mobile-recharge-coin-user__identity { display: flex; align-items: center; gap: 8px; }
.mobile-recharge-coin-user small { display: flex; gap: 4px; margin-top: 4px; }
.mobile-recharge-coin-user small a { color: var(--wydsp-accent, #fd2d55); font-weight: 600; }
.mobile-recharge-shell:not(.has-member) :is(.mobile-recharge-coin-user,.mobile-recharge-member-card) em { border: 1px solid rgba(255,255,255,.4); background: transparent; color: rgba(255,255,255,.5); line-height: 16px; }
.mobile-recharge-hero--coin { height: 256px; }
.mobile-recharge-balance { position: absolute; top: 164px; right: 24px; left: 24px; display: flex; height: 116px; padding: 16px; align-items: center; justify-content: space-between; border-radius: 20px; background: linear-gradient(#020202 35%, #180609); box-shadow: inset 0 0 6px #fd2d5555, inset 0 -24px 28px -10px #fd2d5577; }
.mobile-recharge-balance { gap: 8px; }
.mobile-recharge-balance > span { display: flex; flex: 1; min-width: 0; container-type: inline-size; flex-direction: column; gap: 2px; }
.mobile-recharge-balance strong { display: flex; min-height: 44px; align-items: center; gap: 4px; font-size: 32px; line-height: 44px; }
.mobile-recharge-balance strong img { width: 36px; height: 36px; flex: none; object-fit: contain; }
.mobile-recharge-balance strong b { min-width: 0; font-size: clamp(12px, calc((100cqi - 40px) * 1.65 / var(--coin-balance-length, 6)), 1em); font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }
.mobile-recharge-balance > em { flex: none; margin-top: 28px; padding: 4px 12px; border-radius: 999px; background: var(--wydsp-accent, #fd2d55); font-style: normal; }
.mobile-recharge-panel { position: relative; z-index: 2; border-radius: 32px 32px 0 0; background: rgba(13,15,17,.94); }
.mobile-recharge-content { padding: 16px 16px 24px; }
.mobile-recharge-member-plans { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; }
#mobile-recharge-member-plans { scroll-margin-top: 96px; }
.mobile-recharge-member-plan { position: relative; display: flex; flex: 0 0 calc((100% - 16px) / 3); min-width: 96px; height: 173px; padding: 17px 9px 16px; flex-direction: column; align-items: flex-start; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.05); text-align: left; scroll-snap-align: start; }
.mobile-recharge-member-plan.is-active, .mobile-recharge-coin-plan.is-active { border-color: var(--wydsp-accent, #fd2d55); background: rgba(253,45,85,.1); }
.mobile-recharge-plan-badge { position: absolute; top: 0; right: 0; height: 16px; padding: 0 4px; border-radius: 0 0 0 4px; background: linear-gradient(90deg,#e6cba3,#ba9670); color: #333; font: 12px/16px Arial,sans-serif; }
.mobile-recharge-member-plan:nth-child(2) .mobile-recharge-plan-badge { background: linear-gradient(90deg,#dedede,#9facac); }
.mobile-recharge-member-plan:nth-child(3n) .mobile-recharge-plan-badge { background: linear-gradient(90deg,#fff2ac,#e9c955); }
.mobile-recharge-plan-title { width: 100%; font-size: 14px; line-height: 20px; }
.mobile-recharge-plan-title strong { font-weight: 400; }
.mobile-recharge-plan-price { display: flex; align-items: baseline; height: 34px; line-height: 34px; white-space: nowrap; }
.mobile-recharge-plan-price small { font-size: 16px; font-weight: 700; }
.mobile-recharge-plan-price b { font: 700 30px/34px Arial,sans-serif; }
.mobile-recharge-member-plan.is-active .mobile-recharge-plan-price { color: var(--wydsp-accent, #fd2d55); }
.mobile-recharge-plan-original { font-size: 12px; line-height: 14px; color: rgba(255,255,255,.45); }
.mobile-recharge-plan-original > span { text-decoration: line-through; }
.mobile-recharge-plan-bonus { color: var(--wydsp-accent, #fd2d55); font-size: 12px; line-height: 14px; white-space: nowrap; }
.mobile-recharge-member-plan > em { display: -webkit-box; margin-top: auto; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 10px; font-style: normal; line-height: 16px; white-space: pre-line; }
.mobile-recharge-countdown { display: flex; flex: none; align-self: center; gap: 2px; height: 16px; margin-top: 12px; font: 10px/16px Arial,sans-serif; white-space: nowrap; }
.mobile-recharge-countdown :is(b,i) { padding: 0 2px; border-radius: 3px; background: var(--wydsp-accent, #fd2d55); font-weight: 400; font-style: normal; }
.mobile-recharge-countdown i { min-width: 16px; text-align: center; }
.mobile-recharge-countdown.is-placeholder { display: none; }
.mobile-recharge-coin-plans { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.mobile-recharge-coin-plan { display: flex; min-width: 0; height: 158px; padding: 17px 6px 12px; flex-direction: column; align-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.05); }
.mobile-recharge-coin-plan > span:first-child { display: flex; max-width: 100%; align-items: center; gap: 4px; font-size: 12px; line-height: 20px; white-space: nowrap; }
.mobile-recharge-coin-plan > span:first-child i { display: inline-flex; width: 16px; height: 16px; flex: none; align-items: center; justify-content: center; border-radius: 3px; color: #6f5a20; background: linear-gradient(135deg,#fff2ac,#d3ab4d); font-size: 10px; font-style: normal; }
.mobile-recharge-coin-plan > img { width: 40px; height: 40px; margin: 12px 0 8px; object-fit: contain; }
.mobile-recharge-coin-plan > strong { max-width: 100%; overflow: hidden; font: 700 24px/28px Arial,"PingFang SC",sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.mobile-recharge-coin-price { font-size: 12px; line-height: 18px; }
.mobile-recharge-payment { margin-top: 24px; }
.mobile-recharge-payment h1 { margin: 0 0 12px; font-size: 14px; font-weight: 400; line-height: 20px; }
.mobile-recharge-payment__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 8px; }
.mobile-recharge-method { display: flex; min-width: 0; height: 52px; padding: 12px; align-items: center; justify-content: space-between; gap: 4px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.05); }
.mobile-recharge-method > span { display: flex; min-width: 0; align-items: center; gap: 8px; }
.mobile-recharge-method__icon { position: relative; display: block; width: 24px; height: 24px; flex: 0 0 24px; }
.mobile-recharge-method__icon img { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; max-width: none; object-fit: contain; transform: translate(-50%,-50%) scale(.6666667); }
.mobile-recharge-method__icon img[src$="mobile-member-wallet.svg"] { width: 20.6389px; height: 19.1724px; }
.mobile-recharge-method b { min-width: 0; font-size: 14px; line-height: 20px; font-weight: 400; overflow-wrap: anywhere; }
.mobile-recharge-method > i { position: relative; width: 12px; height: 12px; flex: 0 0 12px; border: 1.25px solid rgba(255,255,255,.5); border-radius: 50%; }
.mobile-recharge-method.is-active { border-color: var(--wydsp-accent,#fd2d55); }
.mobile-recharge-method.is-active > i { border-color: transparent; background: var(--wydsp-accent,#fd2d55); }
.mobile-recharge-method.is-active > i::after { position: absolute; top: 1px; left: 3px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1px 1px 0; transform: rotate(45deg); content: ""; }
.mobile-recharge-notes { margin-top: 24px; padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.5); font-size: 12px; line-height: 18px; }
.mobile-recharge-notes strong { display: block; margin-bottom: 8px; color: rgba(255,255,255,.8); font-weight: 400; }
.mobile-recharge-notes p { margin: 0; }
.mobile-recharge-footer { display: flex; padding: 16px 24px calc(16px + env(safe-area-inset-bottom,0px)); flex-direction: column; gap: 16px; border-top: 1px solid rgba(255,255,255,.05); }
.mobile-recharge-checkout { display: flex; gap: 12px; min-height: 44px; align-items: center; justify-content: space-between; }
.mobile-recharge-total { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.mobile-recharge-total > span { max-width: 100%; overflow-wrap: anywhere; font-size: 18px; font-weight: 700; }
.mobile-recharge-total b { font: 700 32px/40px Arial,sans-serif; }
.mobile-recharge-total em { display: block; flex: none; padding: 2px 7px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px 10px 10px 0; background: #4252b9; font-size: 10px; font-style: normal; line-height: 14px; white-space: nowrap; }
#mobile-recharge-submit { min-width: 139px; height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--wydsp-accent,#fd2d55); }
#mobile-recharge-submit strong { font-size: 16px; font-weight: 400; white-space: nowrap; }
#mobile-recharge-submit:disabled { cursor: not-allowed; opacity: .5; }
.mobile-recharge-footer p { margin: 0; color: rgba(255,255,255,.5); font-size: 12px; line-height: 18px; text-align: center; }
.mobile-recharge-footer p a { color: #7889e9; }
.mobile-recharge-package-empty, .mobile-recharge-payment-empty { width: 100%; grid-column: 1 / -1; margin: 16px 0; color: rgba(255,255,255,.5); font-size: 14px; line-height: 22px; text-align: center; }

@media (min-width:769px) {
  body.mobile-recharge-page { background: #0e1012 url("/static/images/wydsp/recharge-background-desktop.svg") center top / cover no-repeat fixed; }
  .mobile-recharge-shell { width: min(1200px,calc(100% - 48px)); min-height: calc(100dvh - 76px); padding: 48px 0 40px; background: none; }
  .mobile-recharge-shell::before { position: absolute; top: 48px; left: 0; width: min(718px,100%); height: 340px; background: url("/static/images/wydsp/recharge-light.png") left top / 718px 383px no-repeat; pointer-events: none; content: ""; }
  .mobile-recharge-shell.has-account-user::before { height: 300px; }
  [data-recharge-tab="coin"] .mobile-recharge-shell::before { height: 299px; }
  .desktop-recharge-heading { display: block; height: 32px; padding-left: 48px; font-size: 24px; line-height: 32px; }
  .desktop-recharge-heading > span { display: flex; align-items: center; gap: 8px; }
  .desktop-recharge-heading img { width: 32px; height: 32px; object-fit: contain; }
  .mobile-recharge-header { display: contents; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mobile-recharge-back.mobile-page-back, .mobile-recharge-tabs { display: none; }
  .mobile-recharge-records { position: absolute; top: 55px; right: 48px; color: rgba(255,255,255,.5) !important; font-size: 14px !important; }
  .mobile-recharge-hero { height: 307px; }
  .has-account-user .mobile-recharge-hero:not(.mobile-recharge-hero--coin) { height: 267px; }
  .has-account-user .mobile-recharge-hero__headline { display: none; }
  .mobile-recharge-shell.has-account-user .mobile-recharge-member-card { display: flex; }
  .mobile-recharge-hero--coin { height: 267px; }
  .mobile-recharge-diamond { top: 98px; right: auto; left: 48px; }
  .has-account-user .mobile-recharge-diamond, .mobile-recharge-hero--coin .mobile-recharge-diamond { top: 58px; }
  .mobile-recharge-hero__headline { top: 118px; left: 220px; font-size: 40px; line-height: 50px; }
  .mobile-recharge-member-card, .mobile-recharge-coin-user { top: 102px; left: 220px; max-width: 40%; flex-direction: row; align-items: center; }
  .mobile-recharge-member-card strong, .mobile-recharge-coin-user strong { font-size: 24px; line-height: 32px; }
  .mobile-recharge-balance { top: 78px; right: 0; left: auto; width: 410px; height: 116px; padding: 12px 24px; font-size: 20px; }
  .mobile-recharge-balance strong { min-height: 52px; font-size: 40px; line-height: 52px; }
  .mobile-recharge-balance em { font-size: 18px; }
  .mobile-recharge-panel { padding: 48px; border-top: 2px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(255,255,255,.05); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); }
  .mobile-recharge-content { padding: 0; }
  .mobile-recharge-member-plans { position: absolute; top: -208px; right: 0; width: 473px; min-height: 173px; }
  .mobile-recharge-member-plan { flex-basis: calc((100% - 16px) / 3); }
  .mobile-recharge-plan-original { margin-top: 4px; }
  .mobile-recharge-plan-bonus { color: #e8b8c3; }
  .mobile-recharge-countdown { align-self: flex-start; margin-top: 10px; }
  .mobile-recharge-countdown :is(b,i) { background: #8a4ff1; color: #260f47; }
  .mobile-recharge-coin-plans { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 24px; }
  .mobile-recharge-payment { margin-top: 0; }
  .mobile-recharge-content--coin .mobile-recharge-payment { margin-top: 48px; }
  .mobile-recharge-payment h1 { margin-bottom: 32px; font-size: 18px; font-weight: 600; line-height: 24px; }
  .mobile-recharge-payment__grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
  .mobile-recharge-method { height: 60px; padding: 12px; border: 0; border-radius: 12px; background: rgba(255,255,255,.1); }
  .mobile-recharge-method > span { gap: 12px; }
  .mobile-recharge-method__icon { width: 36px; height: 36px; flex-basis: 36px; }
  .mobile-recharge-method__icon img { transform: translate(-50%,-50%); }
  .mobile-recharge-method.is-active > i { background: #25bfa2; }
  .mobile-recharge-notes { margin-top: 12px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 14px; line-height: 20px; }
  .mobile-recharge-notes strong { margin-bottom: 6px; font-size: 16px; line-height: 22px; }
  .mobile-recharge-footer { margin-top: 48px; padding: 0; border: 0; }
  .mobile-recharge-checkout { min-height: 76px; padding: 16px 40px; border-radius: 16px; background: rgba(255,255,255,.05); }
  .mobile-recharge-footer p a { color: rgba(255,255,255,.9); }
}

/* Pointer-only feedback: keep selected/disabled controls and layout unchanged. */
@media (hover: hover) and (pointer: fine) {
  .mobile-recharge-shell :is(button, a) { transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease; }
  .mobile-recharge-shell :is(.mobile-recharge-member-plan, .mobile-recharge-coin-plan, .mobile-recharge-method):not(.is-active):not(:disabled):not([aria-disabled="true"]):hover {
    border-color: rgba(253,45,85,.55);
    background-color: rgba(253,45,85,.08);
    box-shadow: inset 0 0 0 1px rgba(253,45,85,.35);
  }
  .mobile-recharge-tabs a:not(.is-active):not([aria-disabled="true"]):hover { background-color: rgba(255,255,255,.15); }
  .mobile-recharge-records:not([aria-disabled="true"]):hover { color: var(--wydsp-accent, #fd2d55) !important; }
  .mobile-recharge-shell :is(.mobile-recharge-member-card small a, .mobile-recharge-coin-user small a, .mobile-recharge-footer p a):not([aria-disabled="true"]):hover { color: #ff6b88; text-decoration: underline; text-underline-offset: 3px; }
  .mobile-recharge-balance:not([aria-disabled="true"]):hover { filter: brightness(1.15); }
  #mobile-recharge-submit:not(:disabled):not([aria-disabled="true"]):hover { background-color: #ff4569; box-shadow: 0 0 0 3px rgba(253,45,85,.15); }
}

@media (min-width:769px) and (max-width:1199px) {
  .mobile-recharge-hero__headline { left: 160px; font-size: 30px; line-height: 42px; }
  .mobile-recharge-diamond { left: 16px; transform: scale(.85); transform-origin: left center; }
  .mobile-recharge-member-card, .mobile-recharge-coin-user { left: 160px; max-width: 43%; }
  .mobile-recharge-member-card { max-width: calc(58% - 184px); }
  .mobile-recharge-member-card > span { flex: 1; }
  .mobile-recharge-member-card small { flex-wrap: wrap; white-space: normal; }
  .mobile-recharge-member-card strong, .mobile-recharge-coin-user strong { font-size: 20px; }
  .mobile-recharge-member-plans { width: 42%; }
  .mobile-recharge-member-plan { min-width: 100px; }
  .mobile-recharge-balance { width: 34%; padding: 12px 16px; }
  .mobile-recharge-balance strong { font-size: 32px; }
  .mobile-recharge-balance em { padding: 4px 8px; font-size: 14px; }
  .mobile-recharge-panel { padding: 32px; }
  .mobile-recharge-coin-plans { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
  .mobile-recharge-payment__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mobile-recharge-checkout { padding-right: 24px; padding-left: 24px; }
}
@media (max-width:350px) {
  .mobile-recharge-tabs { width: 170px; }
  .mobile-recharge-tabs a { font-size: 12px; }
  .mobile-recharge-records { right: 12px; font-size: 11px !important; }
  .mobile-recharge-diamond { right: 0; transform: scale(.85); transform-origin: right center; }
  .mobile-recharge-hero__headline { font-size: 21px; }
  .mobile-recharge-member-card, .mobile-recharge-coin-user { max-width: calc(100% - 144px); }
  .mobile-recharge-member-card small, .mobile-recharge-coin-user small { font-size: 10px; }
  .mobile-recharge-balance { right: 16px; left: 16px; padding: 16px 12px; }
  .mobile-recharge-balance strong { font-size: 28px; }
  .mobile-recharge-coin-plan { padding-right: 4px; padding-left: 4px; }
  .mobile-recharge-coin-plan > span:first-child { gap: 2px; font-size: 10px; }
  .mobile-recharge-footer { padding-right: 16px; padding-left: 16px; }
  .mobile-recharge-total { flex-wrap: wrap; gap: 0 6px; }
  #mobile-recharge-submit { min-width: 124px; }
}