From b937895bc988d7abf880cc50dc746fdba50cbcf6 Mon Sep 17 00:00:00 2001
From: richarjiang <richarjiang@tencent.com>
Date: Tue, 8 Sep 2026 15:52:34 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E4=BC=9A=E5=91=98?=
 =?UTF-8?q?=E5=8D=A1=E8=B4=AD=E4=B9=B0=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/app/src/pages/card/detail.vue | 2058 ++++++++++++++----------
 packages/app/src/stores/user.ts        |    6 +-
 2 files changed, 1188 insertions(+), 876 deletions(-)

diff --git a/packages/app/src/pages/card/detail.vue b/packages/app/src/pages/card/detail.vue
index 3630d51..66629d4 100644
--- a/packages/app/src/pages/card/detail.vue
+++ b/packages/app/src/pages/card/detail.vue
@@ -1,117 +1,132 @@
 <template>
-  <view class="card-detail-page" :class="{ 'page--renew': isRenewal }" :style="{ paddingTop: navBarHeight }">
-    <CustomNavBar :title="isRenewal ? '续卡' : '购买会员卡'" show-back />
-    <!-- Loading state -->
+  <view
+    class="card-detail-page"
+    :class="{ 'page--renew': isRenewal }"
+    :style="{ paddingTop: navBarHeight }"
+  >
+    <CustomNavBar :title="pageTitle" show-back />
+
     <view v-if="loading" class="loading-wrap">
-      <view class="skeleton-header" />
-      <view class="skeleton-body">
-        <view class="skeleton-line w80" />
-        <view class="skeleton-line w60" />
-        <view class="skeleton-line w40" />
+      <view class="skeleton-pass" />
+      <view class="skeleton-panel">
+        <view class="skeleton-line skeleton-line--long" />
+        <view class="skeleton-line skeleton-line--medium" />
+        <view class="skeleton-line skeleton-line--short" />
       </view>
     </view>
 
-    <!-- Error state -->
-    <view v-else-if="!card && !showAll" class="error-wrap">
-      <text class="error-icon">😕</text>
-      <text class="error-text">会员卡信息加载失败</text>
-      <view class="retry-btn" @tap="loadCard">
-        <text class="retry-text">点击重试</text>
-      </view>
+    <view v-else-if="!card && !showAll" class="state-wrap">
+      <view class="state-mark">—</view>
+      <text class="state-title">{{ singleCardErrorTitle }}</text>
+      <text class="state-copy">{{ singleCardErrorCopy }}</text>
+      <button class="state-action" @tap="loadCard">重新加载</button>
     </view>
 
-    <!-- All cards list mode -->
     <template v-else-if="showAll">
-      <view v-if="loading" class="loading-wrap">
-        <view class="skeleton-header" />
-        <view class="skeleton-body">
-          <view class="skeleton-line w80" />
-          <view class="skeleton-line w60" />
-          <view class="skeleton-line w40" />
+      <view v-if="allCards.length" class="all-cards-page">
+        <view class="all-cards-intro">
+          <view class="intro-orbit intro-orbit--one" />
+          <view class="intro-orbit intro-orbit--two" />
+          <text class="intro-kicker">PILATES MEMBERSHIP</text>
+          <text class="intro-title">选择你的练习节奏</text>
+          <text class="intro-copy">每一张卡都清楚标明课程、有效期与价格，按当下的安排做选择。</text>
         </view>
-      </view>
-      <view v-else-if="allCards.length" class="all-cards-list">
-        <view
-          v-for="c in allCards"
-          :key="c.id"
-          class="card-row"
-          @tap="goToDetail(c.id)"
-        >
-          <!-- Card Cover — image if available, gradient fallback -->
-          <view class="card-cover" :class="c.coverUrl ? '' : getCardCoverClass(c.type)">
-            <image
-              v-if="c.coverUrl"
-              class="card-cover-img"
-              :src="c.coverUrl"
-              mode="aspectFill"
-            />
-            <template v-else>
-              <view class="cover-deco cover-deco--1" />
-              <view class="cover-deco cover-deco--2" />
-            </template>
-          </view>
 
-          <!-- Card info — aligns with card-cover height -->
-          <view class="card-info">
-            <view class="info-top">
+        <view class="all-cards-list">
+          <view
+            v-for="c in allCards"
+            :key="c.id"
+            class="card-row"
+            :class="{ 'card-row--renew': isOwnedForRenew(c) }"
+            @tap="goToDetail(c.id)"
+          >
+            <view class="card-cover" :class="hasCardCover(c) ? '' : getCardCoverClass(c.type)">
+              <image
+                v-if="hasCardCover(c)"
+                class="card-cover-img"
+                :src="c.coverUrl"
+                mode="aspectFill"
+                @error="handleCoverError(c.id)"
+              />
+              <template v-else>
+                <view class="cover-curve cover-curve--one" />
+                <view class="cover-curve cover-curve--two" />
+                <text class="cover-edition">PILATES</text>
+                <text class="cover-type">{{ getTypeLabel(c.type) }}</text>
+              </template>
+            </view>
+
+            <view class="card-info">
               <view class="card-name-row">
                 <text class="card-name">{{ c.name }}</text>
-                <text v-if="isOwnedForRenew(c)" class="renew-tag">续</text>
+                <text v-if="isOwnedForRenew(c)" class="renew-tag">可续卡</text>
+              </view>
+              <text class="card-benefit">{{ cardAccessLabel(c) }}</text>
+              <view class="card-price-row">
+                <view class="price-stack">
+                  <text class="card-price">¥{{ formatPrice(c.price) }}</text>
+                  <text v-if="getSavingsLabel(c)" class="save-tag">{{ getSavingsLabel(c) }}</text>
+                </view>
+                <text class="card-unit">{{ getUnitPriceLabel(c) }}</text>
               </view>
-              <text class="card-validity">有效期 {{ c.durationDays }} 天</text>
             </view>
-            <view class="info-bottom">
-              <view v-if="c.totalTimes" class="card-times">
-                <text class="card-times-value">{{ c.totalTimes }}</text>
-                <text class="card-times-unit">课时</text>
-              </view>
-              <view class="price-row">
-                <text class="price-current">¥{{ formatPrice(c.price) }}</text>
-                <text
-                  v-if="c.originalPrice && c.originalPrice > c.price"
-                  class="price-original"
-                >
-                  ¥{{ formatPrice(c.originalPrice) }}
-                </text>
-              </view>
+
+            <view class="card-select">
+              <text class="card-select-text">查看</text>
+              <text class="card-select-arrow">›</text>
             </view>
           </view>
-
-          <text class="card-arrow">›</text>
         </view>
       </view>
-      <view v-else class="empty-state">
-        <text class="empty-text">暂无可购买的会员卡</text>
+
+      <view v-else-if="cardLoadFailed" class="state-wrap state-wrap--list">
+        <view class="state-mark">—</view>
+        <text class="state-title">暂时无法加载会员卡</text>
+        <text class="state-copy">检查网络后重新加载，价格和权益会以最新配置为准。</text>
+        <button class="state-action" @tap="loadCard">重新加载</button>
+      </view>
+
+      <view v-else class="state-wrap state-wrap--list">
+        <view class="state-mark">—</view>
+        <text class="state-title">暂无可购买的会员卡</text>
+        <text class="state-copy">新的会员计划上线后，会在这里显示。</text>
       </view>
     </template>
 
-    <!-- Card content (single card mode) -->
     <template v-else>
-      <!-- Hero section -->
-      <view class="card-hero" :class="[cardData.coverUrl ? 'hero--custom' : heroClass, isRenewal ? 'hero--renew' : '']">
-        <!-- Cover image background -->
+      <view
+        class="card-hero"
+        :class="[hasCardCover(cardData) ? 'hero--custom' : heroClass, isRenewal ? 'hero--renew' : '']"
+      >
         <image
-          v-if="cardData.coverUrl"
+          v-if="hasCardCover(cardData)"
           class="hero-cover-img"
           :src="cardData.coverUrl"
           mode="aspectFill"
+          @error="handleCoverError(cardData.id)"
         />
-        <!-- Decorative circles (only when no cover image) -->
-        <template v-else>
-          <view class="hero-deco hero-deco--1" />
-          <view class="hero-deco hero-deco--2" />
+        <view class="hero-image-veil" />
+        <view class="hero-grid" />
+        <template v-if="!hasCardCover(cardData)">
+          <view class="hero-orb hero-orb--one" />
+          <view class="hero-orb hero-orb--two" />
+          <view class="hero-arc" />
         </template>
 
-        <view class="hero-badge-row">
-          <view class="hero-badge">
-            <text class="hero-badge-text">{{ typeLabel }}</text>
-          </view>
-          <view v-if="isRenewal" class="hero-badge hero-badge--renew">
-            <text class="hero-badge-text">续卡</text>
-          </view>
+        <view class="hero-topline">
+          <text class="hero-edition">PILATES · MEMBERSHIP</text>
+          <text v-if="savingsLabel" class="hero-saving">{{ savingsLabel }}</text>
         </view>
-        <text v-if="isRenewal" class="hero-kicker">把练习节奏接下去</text>
-        <text class="hero-name">{{ cardData.name }}</text>
+
+        <view class="hero-copy-area">
+          <view class="hero-type-row">
+            <text class="hero-type">{{ typeLabel }}</text>
+            <text v-if="isRenewal" class="hero-renewal">续卡计划</text>
+          </view>
+          <text class="hero-name">{{ cardData.name }}</text>
+          <text class="hero-copy">{{ heroCopy }}</text>
+        </view>
+
         <view class="hero-price-row">
           <text class="hero-currency">¥</text>
           <text class="hero-price">{{ formatPrice(cardData.price) }}</text>
@@ -121,41 +136,61 @@
           >
             ¥{{ formatPrice(cardData.originalPrice) }}
           </text>
+          <text class="hero-unit">{{ unitPriceLabel }}</text>
+        </view>
+
+        <view class="hero-facts">
+          <view class="hero-fact">
+            <text class="hero-fact-value">{{ cardAccessShort(cardData) }}</text>
+            <text class="hero-fact-label">{{ isUnlimitedCard ? '可预约课程' : '课程权益' }}</text>
+          </view>
+          <view class="hero-fact-divider" />
+          <view class="hero-fact">
+            <text class="hero-fact-value">{{ cardData.durationDays }} 天</text>
+            <text class="hero-fact-label">有效期</text>
+          </view>
         </view>
       </view>
 
-      <!-- Detail cards -->
       <view class="detail-section">
-        <!-- Key info grid -->
-        <view class="info-card">
-          <view class="info-grid">
-            <view class="info-cell" v-if="cardData.totalTimes">
-              <text class="cell-value">{{ cardData.totalTimes }}</text>
-              <text class="cell-label">课时次数</text>
+        <view class="plan-summary">
+          <view class="section-heading">
+            <text class="section-kicker">WHAT YOU GET</text>
+            <text class="section-title">这张卡包含什么</text>
+          </view>
+          <view class="summary-grid">
+            <view class="summary-item">
+              <text class="summary-value">{{ cardAccessValue }}</text>
+              <text class="summary-label">{{ isUnlimitedCard ? '有效期内可预约' : '可约课程' }}</text>
             </view>
-            <view class="info-cell">
-              <text class="cell-value">{{ cardData.durationDays }}</text>
-              <text class="cell-label">有效天数</text>
+            <view class="summary-item">
+              <text class="summary-value">{{ cardData.durationDays }}</text>
+              <text class="summary-label">有效天数</text>
             </view>
-            <view class="info-cell">
-              <text class="cell-value">{{ unitPrice }}</text>
-              <text class="cell-label">{{ cardData.totalTimes ? '每次单价' : '按天均价' }}</text>
+            <view class="summary-item">
+              <text class="summary-value">{{ unitPrice }}</text>
+              <text class="summary-label">{{ isUnlimitedCard ? '每天约价' : '每节约价' }}</text>
             </view>
           </view>
         </view>
 
-        <!-- Description -->
         <view v-if="cardData.description" class="desc-card">
-          <view class="section-header">
-            <view class="section-dot" />
+          <view class="section-heading">
+            <text class="section-kicker">ABOUT THIS PLAN</text>
             <text class="section-title">课程说明</text>
           </view>
-          <text class="desc-content">{{ cardData.description }}</text>
+          <view class="desc-body">
+            <text class="desc-quote">“</text>
+            <text class="desc-content">{{ cardData.description }}</text>
+          </view>
         </view>
 
         <view v-if="renewalPreview" class="renew-compare">
           <view class="renew-compare-head">
-            <text class="renew-compare-kicker">续卡对照</text>
+            <view>
+              <text class="section-kicker">YOUR CONTINUITY</text>
+              <text class="renew-compare-title">续卡后预计变化</text>
+            </view>
             <text class="renew-compare-status">{{ renewalPreview.statusLabel }}</text>
           </view>
 
@@ -166,15 +201,13 @@
               <text class="renew-col-unit">{{ renewalPreview.highlightUnit }}</text>
               <text class="renew-col-date">{{ renewalPreview.currentExpire }}</text>
             </view>
-
             <view class="renew-arrow">
               <view class="renew-arrow-line" />
               <view class="renew-arrow-diamond" />
               <view class="renew-arrow-line" />
             </view>
-
             <view class="renew-col renew-col--after">
-              <text class="renew-col-label">续后</text>
+              <text class="renew-col-label">确认后</text>
               <text class="renew-col-value">{{ renewalPreview.afterHighlight }}</text>
               <text class="renew-col-unit">{{ renewalPreview.highlightUnit }}</text>
               <text class="renew-col-date">{{ renewalPreview.afterExpire }}</text>
@@ -187,69 +220,116 @@
           </view>
         </view>
 
-        <!-- Features list -->
-        <view class="features-card">
-          <view class="section-header">
-            <view class="section-dot" />
-            <text class="section-title">{{ isRenewal ? '续卡须知' : '购买须知' }}</text>
+        <view class="notice-card">
+          <view class="section-heading">
+            <text class="section-kicker">BEFORE YOU PAY</text>
+            <text class="section-title">{{ isRenewal ? '续卡说明' : '使用与退款说明' }}</text>
           </view>
-          <view class="feature-item">
-            <text class="feature-dot">•</text>
-            <text class="feature-text">{{ isRenewal ? `续卡后有效期接续，再延长 ${cardData.durationDays} 天` : `购买后立即生效，有效期 ${cardData.durationDays} 天` }}</text>
-          </view>
-          <view v-if="cardData.totalTimes" class="feature-item">
-            <text class="feature-dot">•</text>
-            <text class="feature-text">共 {{ cardData.totalTimes }} 次课时，可灵活安排上课时间</text>
-          </view>
-          <view v-if="!cardData.totalTimes" class="feature-item">
-            <text class="feature-dot">•</text>
-            <text class="feature-text">有效期内可无限次预约课程</text>
-          </view>
-          <view v-if="cardData.totalTimes" class="feature-item">
-            <text class="feature-dot">•</text>
-            <text class="feature-text">每次预约扣除 1 次课时</text>
-          </view>
-          <view v-if="cardData.type === CardTypeCategory.DURATION" class="feature-item">
-            <text class="feature-dot">•</text>
-            <text class="feature-text">如需退卡，已上课时按次卡单价计费扣除，不以月卡优惠价结算</text>
-          </view>
-          <view v-if="cardData.type === CardTypeCategory.DURATION && !cardData.totalTimes" class="feature-item">
-            <text class="feature-dot">•</text>
-            <text class="feature-text">到期后自动失效</text>
-          </view>
-          <view v-else class="feature-item">
-            <text class="feature-dot">•</text>
-            <text class="feature-text">到期或课时用完后自动失效，不可退款</text>
-          </view>
-          <view class="feature-item">
-            <text class="feature-dot">•</text>
-            <text class="feature-text">支持微信支付，安全便捷</text>
+          <view
+            v-for="(note, index) in purchaseNotes"
+            :key="note"
+            class="notice-item"
+          >
+            <text class="notice-number">0{{ index + 1 }}</text>
+            <text class="notice-text">{{ note }}</text>
           </view>
         </view>
       </view>
 
-      <!-- Bottom action bar -->
       <view class="bottom-bar" :class="{ 'bottom-bar--renew': isRenewal }">
         <view class="price-summary">
-          <text class="summary-label">{{ isRenewal ? '续卡金额' : '实付金额' }}</text>
-          <text class="summary-price">¥{{ formatPrice(cardData.price) }}</text>
+          <text class="price-summary-label">{{ isRenewal ? '续卡金额' : '实付金额' }}</text>
+          <text class="price-summary-value">¥{{ formatPrice(cardData.price) }}</text>
+          <text class="price-summary-hint">{{ bottomPriceHint }}</text>
         </view>
-        <view
+        <button
           class="buy-btn"
-          :class="{ 'buy-btn--loading': buying, 'buy-btn--renew': isRenewal }"
+          :class="{ 'buy-btn--busy': isPurchaseBusy, 'buy-btn--renew': isRenewal }"
+          :disabled="isPurchaseBusy"
           @tap="handleBuy"
         >
-          <text class="buy-btn-text">{{ buying ? '支付中...' : (isRenewal ? '确认续卡' : '立即购买') }}</text>
-        </view>
+          {{ buyButtonLabel }}
+        </button>
       </view>
     </template>
+
+    <view
+      v-if="purchaseConfirmVisible && card"
+      class="purchase-sheet-layer"
+      @tap="closePurchaseConfirmation"
+      @touchmove.stop.prevent
+    >
+      <view class="purchase-sheet" @tap.stop>
+        <view class="sheet-handle" />
+        <text class="sheet-kicker">PURCHASE CONFIRMATION</text>
+        <text class="sheet-title">{{ isRenewal ? '确认继续这份练习计划' : '确认这份练习计划' }}</text>
+
+        <view class="sheet-card">
+          <view class="sheet-card-top">
+            <view>
+              <text class="sheet-card-type">{{ typeLabel }}</text>
+              <text class="sheet-card-name">{{ cardData.name }}</text>
+            </view>
+            <text class="sheet-card-price">¥{{ formatPrice(cardData.price) }}</text>
+          </view>
+          <view class="sheet-card-meta">
+            <text>{{ cardAccessLabel(cardData) }}</text>
+            <text>{{ cardData.durationDays }} 天有效</text>
+          </view>
+        </view>
+
+        <view class="sheet-note">
+          <text class="sheet-note-mark">✓</text>
+          <text class="sheet-note-text">{{ purchaseConfirmationNote }}</text>
+        </view>
+        <view v-if="purchaseConfirmationWarning" class="sheet-warning">
+          <text class="sheet-warning-label">请注意</text>
+          <text class="sheet-warning-text">{{ purchaseConfirmationWarning }}</text>
+        </view>
+
+        <view class="sheet-actions">
+          <button class="sheet-cancel" :disabled="buying" @tap="closePurchaseConfirmation">再想想</button>
+          <button class="sheet-confirm" :disabled="buying" @tap="doPurchase">
+            {{ buying ? '正在唤起支付...' : '确认支付' }}
+          </button>
+        </view>
+        <text class="sheet-footnote">点击确认后将唤起微信支付</text>
+      </view>
+    </view>
+
+    <view v-if="paymentConfirming || paymentPending" class="payment-status-layer" @touchmove.stop.prevent>
+      <view class="payment-status-card">
+        <view class="status-orbit" :class="{ 'status-orbit--still': paymentPending }">
+          <view class="status-orbit-core">{{ paymentConfirming ? '···' : '✓' }}</view>
+        </view>
+        <text class="payment-status-title">{{ paymentStatusTitle }}</text>
+        <text class="payment-status-copy">{{ paymentStatusCopy }}</text>
+        <template v-if="paymentConfirming">
+          <button class="status-secondary" @tap="goToMembership">稍后查看我的会员卡</button>
+        </template>
+        <template v-else-if="paymentPending">
+          <button class="status-primary" @tap="handlePaymentStatusPrimary">
+            {{ paymentStatusIssue === 'reauthentication' ? '重新登录并查看' : '继续确认' }}
+          </button>
+          <button class="status-secondary" @tap="goToMembership">查看我的会员卡</button>
+        </template>
+      </view>
+    </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
 import type { CardType, CreateOrderResponse } from '@mp-pilates/shared'
-import { CardTypeCategory, MembershipStatus, computeMembershipGrant, pickRenewalTarget, getMembershipDaysLeft } from '@mp-pilates/shared'
+import {
+  CardTypeCategory,
+  MembershipStatus,
+  OrderStatus,
+  computeMembershipGrant,
+  getMembershipDaysLeft,
+  pickRenewalTarget,
+} from '@mp-pilates/shared'
 import { getErrorMessage } from '../../utils/auth'
 import { get, post } from '../../utils/request'
 import { formatPrice, getCardCoverClass } from '../../utils/format'
@@ -258,33 +338,47 @@ import { useUserStore } from '../../stores/user'
 import { requestOrderPaidSubscriptionMessage } from '../../utils/wechat-subscription'
 import CustomNavBar from '../../components/CustomNavBar.vue'
 
+interface MyOrderStatusResponse {
+  readonly items: ReadonlyArray<{
+    readonly id: string
+    readonly status: OrderStatus
+  }>
+}
+
+type PaymentConfirmationResult = 'paid' | 'pending' | 'unavailable' | 'unauthorized'
+type PaymentStatusIssue = 'none' | 'order-check' | 'membership-sync' | 'reauthentication'
+
 const userStore = useUserStore()
-
-// ─── Nav bar height ──────────────────────────────────────────
 const navBarHeight = ref('64px')
-
-// ─── Route params ──────────────────────────────────────────
-const cardId = ref<string>('')
-const isTrial = ref(false)
+const cardId = ref('')
+const isTrialEntry = ref(false)
 const showAll = ref(false)
-
-// ─── State ────────────────────────────────────────────────
 const card = ref<CardType | null>(null)
 const allCards = ref<CardType[]>([])
-const loading = ref(false)
+const loading = ref(true)
+const cardLoadFailed = ref(false)
+const membershipContextLoading = ref(false)
+const purchasePreparing = ref(false)
+const purchaseConfirmVisible = ref(false)
 const buying = ref(false)
+const paymentConfirming = ref(false)
+const paymentPending = ref(false)
+const pendingOrderId = ref('')
+const paymentStatusIssue = ref<PaymentStatusIssue>('none')
+const paymentRedirecting = ref(false)
+const paymentConfirmationSession = ref(0)
+const failedCoverIds = ref<Set<string>>(new Set())
 
-// ─── Computed ─────────────────────────────────────────────
-const typeLabel = computed(() => {
-  if (!card.value) return ''
-  const map: Record<CardTypeCategory, string> = {
-    [CardTypeCategory.TIMES]: '次卡',
-    [CardTypeCategory.DURATION]: '月卡',
-    [CardTypeCategory.TRIAL]: '体验卡',
-  }
-  return map[card.value.type] ?? '会员卡'
+const pageTitle = computed(() => {
+  if (showAll.value) return '选择会员卡'
+  return isRenewal.value ? '续卡' : '购买会员卡'
 })
 
+const typeLabel = computed(() => card.value ? getTypeLabel(card.value.type) : '')
+const isTrialCard = computed(() => card.value?.type === CardTypeCategory.TRIAL)
+const isUnlimitedCard = computed(() => card.value?.totalTimes === null)
+const cardData = computed<CardType>(() => card.value as CardType)
+
 const heroClass = computed(() => {
   if (!card.value) return ''
   if (card.value.type === CardTypeCategory.TRIAL) return 'hero--trial'
@@ -292,20 +386,23 @@ const heroClass = computed(() => {
   return 'hero--times'
 })
 
-const unitPrice = computed(() => {
+const unitPrice = computed(() => card.value ? getUnitPrice(card.value) : '-')
+const unitPriceLabel = computed(() => card.value ? getUnitPriceLabel(card.value) : '')
+const savingsLabel = computed(() => card.value ? getSavingsLabel(card.value) : '')
+const cardAccessValue = computed(() => {
   if (!card.value) return '-'
-  if (card.value.totalTimes) {
-    const pricePerTime = card.value.price / card.value.totalTimes
-    return `¥${(pricePerTime / 100).toFixed(0)}`
-  }
-  const pricePerDay = card.value.price / card.value.durationDays
-  return `¥${(pricePerDay / 100).toFixed(0)}`
+  return card.value.totalTimes === null ? '不限次' : String(card.value.totalTimes)
 })
 
-const cardData = computed<CardType>(() => card.value as CardType)
+const heroCopy = computed(() => {
+  if (!card.value) return ''
+  if (isTrialCard.value) return '从一节课开始，感受身体更舒展的可能。'
+  if (card.value.totalTimes === null) return '把接下来的练习时间，留给更稳定的自己。'
+  return '按自己的节奏，把练习慢慢变成日常。'
+})
 
 const renewalTarget = computed(() => {
-  if (!card.value || card.value.type === CardTypeCategory.TRIAL) return null
+  if (!card.value || isTrialCard.value) return null
   return pickRenewalTarget(userStore.memberships, card.value.id)
 })
 
@@ -325,7 +422,7 @@ function formatStudioDate(value: Date | string): string {
   const year = date.getFullYear()
   const month = String(date.getMonth() + 1).padStart(2, '0')
   const day = String(date.getDate()).padStart(2, '0')
-  return `${year}.${month}.${day}`
+  return year + '.' + month + '.' + day
 }
 
 const renewalPreview = computed(() => {
@@ -347,16 +444,19 @@ const renewalPreview = computed(() => {
 
   return {
     isTimes,
-    isExpired,
     statusLabel,
-    currentHighlight: isTimes ? String(target.remainingTimes ?? 0) : String(Math.max(0, getMembershipDaysLeft(target.expireDate))),
-    afterHighlight: isTimes ? String(grant.remainingTimes ?? 0) : String(Math.max(0, getMembershipDaysLeft(grant.expireDate))),
+    currentHighlight: isTimes
+      ? String(target.remainingTimes ?? 0)
+      : String(Math.max(0, getMembershipDaysLeft(target.expireDate))),
+    afterHighlight: isTimes
+      ? String(grant.remainingTimes ?? 0)
+      : String(Math.max(0, getMembershipDaysLeft(grant.expireDate))),
     highlightUnit: isTimes ? '次剩余' : '天有效',
     currentExpire: formatStudioDate(target.expireDate),
     afterExpire: formatStudioDate(grant.expireDate),
     addedLabel: isTimes
-      ? `本次续入 +${currentCard.totalTimes ?? 0} 次 · +${currentCard.durationDays} 天`
-      : `本次续入 +${currentCard.durationDays} 天`,
+      ? '本次预计续入 +' + String(currentCard.totalTimes ?? 0) + ' 次 · +' + String(currentCard.durationDays) + ' 天'
+      : '本次预计续入 +' + String(currentCard.durationDays) + ' 天',
     forfeitNote: isExpired && isTimes && (target.remainingTimes ?? 0) > 0
       ? '到期余次不结转，按新购次数起算'
       : '',
@@ -367,859 +467,1069 @@ const renewalPreviewText = computed(() => {
   const preview = renewalPreview.value
   if (!preview) return ''
   if (preview.isTimes) {
-    return `续卡后剩余 ${preview.afterHighlight} 次，有效期至 ${preview.afterExpire}`
+    return '确认后预计剩余 ' + preview.afterHighlight + ' 次，有效期至 ' + preview.afterExpire
   }
-  return `续卡后有效期至 ${preview.afterExpire}`
+  return '确认后预计有效期至 ' + preview.afterExpire
 })
 
+const purchaseNotes = computed(() => {
+  if (!card.value) return []
+  const notes: string[] = []
+
+  if (isRenewal.value) {
+    notes.push('支付确认后，现有会员有效期预计再延长 ' + String(card.value.durationDays) + ' 天。')
+  } else {
+    notes.push('支付确认后会员卡生效，有效期为 ' + String(card.value.durationDays) + ' 天。')
+  }
+
+  if (card.value.totalTimes === null) {
+    notes.push('有效期内可不限次预约课程。')
+  } else {
+    notes.push('共 ' + String(card.value.totalTimes) + ' 次课时，每次预约扣除 1 次。')
+  }
+
+  if (card.value.type === CardTypeCategory.DURATION) {
+    notes.push('如需退卡，已上课时按次卡单价计费扣除，不以月卡优惠价结算。')
+  }
+
+  notes.push(
+    card.value.totalTimes === null
+      ? '到期后自动失效。'
+      : '到期或课时用完后自动失效，不可退款。',
+  )
+  notes.push('支持微信支付，支付过程由微信安全保障。')
+  return notes
+})
+
+const isPurchaseBusy = computed(() =>
+  buying.value ||
+  membershipContextLoading.value ||
+  purchasePreparing.value ||
+  paymentRedirecting.value,
+)
+
+const buyButtonLabel = computed(() => {
+  if (buying.value) return '正在唤起微信支付...'
+  if (paymentRedirecting.value) return '会员权益已到账'
+  if (membershipContextLoading.value || purchasePreparing.value) return '正在核对权益...'
+  if (!userStore.loggedIn) return '登录后购买'
+  return isRenewal.value ? '确认续卡' : '立即购买'
+})
+
+const bottomPriceHint = computed(() => {
+  if (savingsLabel.value) return savingsLabel.value + ' · 支付确认后生效'
+  return '支付确认后生效'
+})
+
+const purchaseConfirmationNote = computed(() => {
+  if (isRenewal.value && renewalPreviewText.value) return renewalPreviewText.value
+  return '支付确认后，会员权益会自动同步到「我的会员卡」。'
+})
+
+const purchaseConfirmationWarning = computed(() => renewalPreview.value?.forfeitNote ?? '')
+
+const paymentStatusTitle = computed(() => {
+  if (paymentConfirming.value) return '支付已完成，正在确认权益'
+  if (paymentStatusIssue.value === 'reauthentication') return '需要重新登录以确认权益'
+  if (paymentStatusIssue.value === 'membership-sync') return '权益已确认，正在同步会员卡'
+  if (paymentStatusIssue.value === 'order-check') return '暂时无法确认支付状态'
+  return '会员权益仍在确认中'
+})
+
+const paymentStatusCopy = computed(() => {
+  if (paymentConfirming.value) return '请勿重复支付，系统正在同步你的会员卡。'
+  if (paymentStatusIssue.value === 'reauthentication') {
+    return '支付结果仍在待确认状态。重新登录后即可查看会员权益，请勿再次购买。'
+  }
+  if (paymentStatusIssue.value === 'membership-sync') {
+    return '支付权益已确认，但当前网络未能刷新会员卡。恢复网络后可继续同步，或稍后在我的会员卡查看。'
+  }
+  if (paymentStatusIssue.value === 'order-check') {
+    return '当前网络未能读取支付状态。请恢复网络后继续确认，避免重复支付。'
+  }
+  return '支付结果已提交，微信回调稍慢时可继续确认，或稍后在我的会员卡查看。'
+})
+
+const singleCardErrorTitle = computed(() =>
+  cardLoadFailed.value ? '暂时无法加载会员卡' : '这张会员卡暂不可购买',
+)
+
+const singleCardErrorCopy = computed(() =>
+  cardLoadFailed.value
+    ? '检查网络后重新加载，价格和权益会以最新配置为准。'
+    : '它可能已下架或配置有更新，你可以返回选择其他会员计划。',
+)
+
+function getTypeLabel(type: CardTypeCategory): string {
+  if (type === CardTypeCategory.TRIAL) return '体验卡'
+  if (type === CardTypeCategory.DURATION) return '期限卡'
+  return '次卡'
+}
+
+function cardAccessShort(cardType: CardType): string {
+  return cardType.totalTimes === null ? '不限次' : String(cardType.totalTimes) + ' 节'
+}
+
+function cardAccessLabel(cardType: CardType): string {
+  if (cardType.totalTimes === null) return '有效期内不限次预约'
+  return '共 ' + String(cardType.totalTimes) + ' 次课程 · 有效期 ' + String(cardType.durationDays) + ' 天'
+}
+
+function getUnitPrice(cardType: CardType): string {
+  const divisor = cardType.totalTimes === null ? cardType.durationDays : cardType.totalTimes
+  if (!divisor) return '-'
+  return '¥' + String(Math.round(cardType.price / divisor / 100))
+}
+
+function getUnitPriceLabel(cardType: CardType): string {
+  return '约 ' + getUnitPrice(cardType) + (cardType.totalTimes === null ? '/天' : '/节')
+}
+
+function getSavingsLabel(cardType: CardType): string {
+  if (!cardType.originalPrice || cardType.originalPrice <= cardType.price) return ''
+  return '省 ¥' + formatPrice(cardType.originalPrice - cardType.price)
+}
+
+function hasCardCover(cardType: CardType): boolean {
+  return !!cardType.coverUrl && !failedCoverIds.value.has(cardType.id)
+}
+
+function handleCoverError(id: string) {
+  if (failedCoverIds.value.has(id)) return
+  failedCoverIds.value = new Set([...failedCoverIds.value, id])
+}
+
 function isOwnedForRenew(target: CardType): boolean {
   return target.type !== CardTypeCategory.TRIAL && !!pickRenewalTarget(userStore.memberships, target.id)
 }
 
-// ─── Data loading ─────────────────────────────────────────
 async function loadCard() {
   loading.value = true
+  cardLoadFailed.value = false
+
   try {
     const types = await get<CardType[]>('/membership/card-types')
-    const activeTypes = types.filter((c) => c.isActive).sort((a, b) => a.sortOrder - b.sortOrder)
+    const activeTypes = types
+      .filter((item) => item.isActive)
+      .sort((left, right) => left.sortOrder - right.sortOrder)
 
     if (showAll.value) {
       allCards.value = activeTypes
       return
     }
 
-    if (isTrial.value) {
-      // Auto-find the trial card type
-      card.value = activeTypes.find((c) => c.type === CardTypeCategory.TRIAL) ?? null
-      if (card.value) {
-        cardId.value = card.value.id
-      }
-    } else if (cardId.value) {
-      card.value = activeTypes.find((c) => c.id === cardId.value) ?? null
+    if (isTrialEntry.value) {
+      card.value = activeTypes.find((item) => item.type === CardTypeCategory.TRIAL) ?? null
+      if (card.value) cardId.value = card.value.id
+      return
     }
+
+    card.value = activeTypes.find((item) => item.id === cardId.value) ?? null
   } catch {
-    if (!showAll.value) {
-      card.value = null
-    }
+    cardLoadFailed.value = true
+    card.value = null
     allCards.value = []
   } finally {
     loading.value = false
   }
 }
 
-// ─── Helpers ───────────────────────────────────────────────
 function goToDetail(id: string) {
-  uni.navigateTo({ url: `/pages/card/detail?id=${id}` })
+  uni.navigateTo({ url: '/pages/card/detail?id=' + id })
 }
 
-// ─── Buy flow ─────────────────────────────────────────────
-async function handleBuy() {
-  if (buying.value || !card.value) return
-
-  // Ensure logged in
-  if (!userStore.loggedIn) {
-    uni.showModal({
-      title: '提示',
-      content: '请先登录后再购买会员卡',
-      confirmText: '去登录',
-      success: async (res) => {
-        if (res.confirm) {
-          try {
-            const { isNewUser } = await userStore.loginWithSetup()
-            if (!isNewUser) {
-              handleBuy()
-            }
-          } catch (err: unknown) {
-            uni.showToast({ title: getErrorMessage(err, '登录失败'), icon: 'none' })
-          }
-        }
-      },
-    })
-    return
+async function refreshMembershipContext(): Promise<boolean> {
+  if (!userStore.loggedIn) return false
+  membershipContextLoading.value = true
+  try {
+    return await userStore.fetchMemberships()
+  } finally {
+    membershipContextLoading.value = false
   }
+}
 
+function showLoginPrompt() {
   uni.showModal({
-    title: isRenewal.value ? '确认续卡' : '确认购买',
-    content: isRenewal.value
-      ? `确认续卡「${card.value.name}」，${renewalPreviewText.value}，实付 ¥${formatPrice(card.value.price)}？`
-      : `确认购买「${card.value.name}」，实付 ¥${formatPrice(card.value.price)}？`,
-    confirmText: '确认支付',
+    title: '登录后继续',
+    content: '登录后可核对续卡权益并完成购买。',
+    confirmText: '去登录',
     success: async (res) => {
       if (!res.confirm) return
-      await doPurchase()
+      try {
+        const result = await userStore.loginWithSetup()
+        if (!result.isNewUser) await preparePurchaseConfirmation()
+      } catch (err: unknown) {
+        uni.showToast({ title: getErrorMessage(err, '登录失败，请重试'), icon: 'none' })
+      }
     },
   })
 }
 
+function showReauthenticationPrompt() {
+  uni.showModal({
+    title: '登录状态已失效',
+    content: '请重新登录后查看本次支付的会员权益。',
+    confirmText: '重新登录',
+    success: async (res) => {
+      if (!res.confirm) return
+      try {
+        const result = await userStore.loginWithSetup()
+        if (!result.isNewUser) {
+          await refreshMembershipContext()
+          goToMembership()
+        }
+      } catch (err: unknown) {
+        uni.showToast({ title: getErrorMessage(err, '登录失败，请重试'), icon: 'none' })
+      }
+    },
+  })
+}
+
+async function handleBuy() {
+  if (!card.value || isPurchaseBusy.value) return
+  if (!userStore.loggedIn) {
+    showLoginPrompt()
+    return
+  }
+  await preparePurchaseConfirmation()
+}
+
+async function preparePurchaseConfirmation() {
+  if (!card.value || isPurchaseBusy.value) return
+  purchasePreparing.value = true
+  try {
+    const refreshed = await refreshMembershipContext()
+    if (!userStore.loggedIn) {
+      showLoginPrompt()
+      return
+    }
+    if (!refreshed) {
+      uni.showToast({ title: '暂时无法核对会员权益，请稍后重试', icon: 'none' })
+      return
+    }
+    purchaseConfirmVisible.value = true
+  } finally {
+    purchasePreparing.value = false
+  }
+}
+
+function closePurchaseConfirmation() {
+  if (buying.value) return
+  purchaseConfirmVisible.value = false
+}
+
+function wait(milliseconds: number): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, milliseconds)
+  })
+}
+
+async function waitForPaidOrder(orderId: string): Promise<PaymentConfirmationResult> {
+  const retryDelays = [0, 700, 1_200, 1_800, 2_500]
+  let requestUnavailable = false
+
+  for (const delay of retryDelays) {
+    if (delay) await wait(delay)
+    try {
+      const result = await get<MyOrderStatusResponse>('/payment/orders?page=1&limit=10')
+      const order = result.items.find((item) => item.id === orderId)
+      if (order?.status === OrderStatus.PAID) return 'paid'
+    } catch (err: unknown) {
+      if (getErrorMessage(err, '') === 'Unauthorized') return 'unauthorized'
+      requestUnavailable = true
+    }
+  }
+
+  return requestUnavailable ? 'unavailable' : 'pending'
+}
+
+async function settlePaidOrder(orderId: string) {
+  const session = ++paymentConfirmationSession.value
+  paymentConfirming.value = true
+  paymentPending.value = false
+  paymentStatusIssue.value = 'none'
+  const result = await waitForPaidOrder(orderId)
+  if (session !== paymentConfirmationSession.value) return
+  paymentConfirming.value = false
+
+  if (result === 'unauthorized') {
+    paymentStatusIssue.value = 'reauthentication'
+    paymentPending.value = true
+    showReauthenticationPrompt()
+    return
+  }
+
+  if (result === 'pending' || result === 'unavailable') {
+    paymentStatusIssue.value = result === 'unavailable' ? 'order-check' : 'none'
+    paymentPending.value = true
+    return
+  }
+
+  const membershipsLoaded = await userStore.fetchMemberships()
+  if (session !== paymentConfirmationSession.value) return
+  if (!membershipsLoaded) {
+    if (!userStore.loggedIn) {
+      paymentStatusIssue.value = 'reauthentication'
+      paymentPending.value = true
+      showReauthenticationPrompt()
+      return
+    }
+    paymentStatusIssue.value = 'membership-sync'
+    paymentPending.value = true
+    return
+  }
+
+  pendingOrderId.value = ''
+  paymentRedirecting.value = true
+  uni.showToast({ title: isRenewal.value ? '续卡权益已到账' : '会员卡已到账', icon: 'success' })
+  setTimeout(() => {
+    if (session === paymentConfirmationSession.value) goToMembership()
+  }, 900)
+}
+
+async function retryPaymentConfirmation() {
+  if (!pendingOrderId.value || paymentConfirming.value) return
+  await settlePaidOrder(pendingOrderId.value)
+}
+
+async function handlePaymentStatusPrimary() {
+  if (!userStore.loggedIn) {
+    showReauthenticationPrompt()
+    return
+  }
+  await retryPaymentConfirmation()
+}
+
+function goToMembership() {
+  paymentConfirmationSession.value++
+  paymentConfirming.value = false
+  paymentPending.value = false
+  paymentStatusIssue.value = 'none'
+  paymentRedirecting.value = false
+  purchaseConfirmVisible.value = false
+  pendingOrderId.value = ''
+  uni.navigateTo({ url: '/pages/profile/membership' })
+}
+
 async function doPurchase() {
-  if (!card.value) return
+  if (!card.value || buying.value) return
+
   buying.value = true
+  purchaseConfirmVisible.value = false
+  paymentPending.value = false
+  paymentStatusIssue.value = 'none'
+  paymentRedirecting.value = false
+  paymentConfirmationSession.value++
+  pendingOrderId.value = ''
   uni.showLoading({ title: '创建订单...' })
 
   try {
     const inviterId = uni.getStorageSync('invite_inviter_id') as string
     const result = await post<CreateOrderResponse>('/payment/create-order', {
       cardTypeId: card.value.id,
-      inviterId: isTrial.value && inviterId ? inviterId : undefined,
+      inviterId: isTrialCard.value && inviterId ? inviterId : undefined,
     })
 
     uni.hideLoading()
-
-    // Launch WeChat Pay
     await new Promise<void>((resolve, reject) => {
       uni.requestPayment({
         provider: 'wxpay',
         timeStamp: result.paymentParams.timeStamp,
         nonceStr: result.paymentParams.nonceStr,
         package: result.paymentParams.package,
-        signType: result.paymentParams.signType as 'MD5' | 'HMAC-SHA256',
+        signType: result.paymentParams.signType as 'MD5' | 'HMAC-SHA256' | 'RSA',
         paySign: result.paymentParams.paySign,
         success: () => resolve(),
         fail: (err: { errMsg?: string }) => reject(new Error(err.errMsg ?? '支付取消')),
       })
     })
 
-    // Payment succeeded — refresh memberships then navigate
+    pendingOrderId.value = result.order.id
     await requestOrderPaidSubscriptionMessage().catch(() => undefined)
-    uni.showToast({ title: isRenewal.value ? '续卡成功！' : '购买成功！', icon: 'success' })
-    await userStore.fetchMemberships()
-    setTimeout(() => {
-      uni.navigateTo({ url: '/pages/profile/membership' })
-    }, 1500)
+    await settlePaidOrder(result.order.id)
   } catch (err: unknown) {
     uni.hideLoading()
-    const msg = err instanceof Error ? err.message : '支付失败，请重试'
-    if (!msg.includes('取消') && !msg.includes('cancel')) {
-      uni.showToast({ title: msg, icon: 'none' })
+    const message = getErrorMessage(err, '支付未完成，请重试')
+    if (message === 'Unauthorized') {
+      showLoginPrompt()
+    } else if (!message.includes('取消') && !message.includes('cancel')) {
+      uni.showToast({ title: message, icon: 'none', duration: 3000 })
     }
   } finally {
     buying.value = false
   }
 }
 
-// ─── Lifecycle ────────────────────────────────────────────
 onMounted(() => {
-  navBarHeight.value = `${getSystemLayout().navBarHeight}px`
-
+  navBarHeight.value = String(getSystemLayout().navBarHeight) + 'px'
   const pages = getCurrentPages()
   const current = pages[pages.length - 1]
   const options = (current as { options?: Record<string, string> }).options ?? {}
   cardId.value = options.id ?? ''
-  isTrial.value = options.trial === '1'
+  isTrialEntry.value = options.trial === '1'
   showAll.value = options.showAll === '1'
-  loadCard()
-  if (userStore.loggedIn) {
-    userStore.fetchMemberships()
+  void loadCard()
+})
+
+onShow(() => {
+  if (!paymentConfirming.value && !paymentPending.value) {
+    void refreshMembershipContext()
   }
 })
+
+onUnmounted(() => {
+  paymentConfirmationSession.value++
+})
 </script>
 
 <style lang="scss" scoped>
 .card-detail-page {
   min-height: 100vh;
-  background: #f5f3f0;
-  padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
+  box-sizing: border-box;
+  padding-bottom: calc(184rpx + env(safe-area-inset-bottom));
+  color: #514943;
+  background: radial-gradient(circle at 100% 0, rgba(231, 222, 211, 0.5), transparent 30%), #fbf9f6;
 }
 
 .page--renew {
-  background: #f4f1eb;
+  background: radial-gradient(circle at 100% 0, rgba(218, 229, 217, 0.7), transparent 32%), #fbf9f6;
 }
 
-/* ── Loading ─────────────────────────────────────────── */
-.loading-wrap {
-  padding: 0 0 32rpx;
-}
-
-.skeleton-header {
-  height: 380rpx;
-  background: linear-gradient(90deg, #e8e8e8 25%, #d8d8d8 50%, #e8e8e8 75%);
-  background-size: 400% 100%;
-  animation: shimmer 1.4s infinite;
-}
-
-.skeleton-body {
-  padding: 32rpx 24rpx;
-  display: flex;
-  flex-direction: column;
-  gap: 20rpx;
-}
+.loading-wrap { padding: 28rpx 32rpx; }
 
+.skeleton-pass,
 .skeleton-line {
-  height: 28rpx;
-  border-radius: 14rpx;
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background: linear-gradient(90deg, #eee8e2 25%, #f9f6f2 50%, #eee8e2 75%);
   background-size: 400% 100%;
-  animation: shimmer 1.4s infinite;
-
-  &.w80 { width: 80%; }
-  &.w60 { width: 60%; }
-  &.w40 { width: 40%; }
+  animation: shimmer 1.5s infinite;
 }
 
-/* ── Error ───────────────────────────────────────────── */
-.error-wrap {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 160rpx 40rpx;
-  gap: 24rpx;
-}
+.skeleton-pass { height: 470rpx; border-radius: 32rpx; }
 
-.error-icon {
-  font-size: 80rpx;
-}
-
-.error-text {
-  font-size: 30rpx;
-  color: #999;
-}
-
-.retry-btn {
-  padding: 20rpx 48rpx;
-  border-radius: 40rpx;
-  background: $primary-dark;
-}
-
-.retry-text {
-  font-size: 28rpx;
-  color: #fff;
-  font-weight: 600;
-}
-
-/* ── Hero ────────────────────────────────────────────── */
-.card-hero {
-  padding: 64rpx 36rpx 56rpx;
+.skeleton-panel {
+  margin-top: 24rpx;
+  padding: 32rpx;
+  border: 1rpx solid #eee8e3;
+  border-radius: 28rpx;
+  background: rgba(255, 255, 255, 0.8);
   display: flex;
   flex-direction: column;
   gap: 18rpx;
-  position: relative;
-  overflow: hidden;
-
-  &.hero--times {
-    background: linear-gradient(160deg, #f3e9de 0%, #e6d5c4 100%);
-  }
-
-  &.hero--duration {
-    background: linear-gradient(160deg, #eee6ea 0%, #dccfd6 100%);
-  }
-
-  &.hero--trial {
-    background: linear-gradient(160deg, #e4eee9 0%, #c9dbd3 100%);
-  }
-
-  &.hero--custom {
-    background: #5c534c;
-  }
-
-  &.hero--renew {
-    background: linear-gradient(165deg, #e4ede8 0%, #f3ebe3 52%, #e8dcd0 100%);
-  }
 }
 
-.hero-cover-img {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0.5;
+.skeleton-line {
+  height: 22rpx;
+  border-radius: 999rpx;
+  &--long { width: 84%; }
+  &--medium { width: 62%; }
+  &--short { width: 42%; }
 }
 
-/* Decorative background circles */
-.hero-deco {
-  position: absolute;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.38);
-  pointer-events: none;
-
-  &--1 {
-    width: 320rpx;
-    height: 320rpx;
-    top: -80rpx;
-    right: -60rpx;
-  }
-
-  &--2 {
-    width: 200rpx;
-    height: 200rpx;
-    bottom: -40rpx;
-    left: 20rpx;
-  }
-}
-
-.hero--renew .hero-deco--1 {
-  background: rgba(143, 168, 154, 0.22);
-}
-
-.hero--renew .hero-deco--2 {
-  background: rgba(255, 252, 248, 0.45);
-}
-
-.hero-badge-row {
-  display: flex;
-  align-items: center;
-  gap: 12rpx;
-  z-index: 1;
-}
-
-.hero-badge {
-  align-self: flex-start;
-  padding: 8rpx 22rpx;
-  border-radius: 20rpx;
-  background: rgba(255, 252, 248, 0.45);
-  border: 1rpx solid rgba(95, 122, 110, 0.18);
-  z-index: 1;
-}
-
-.hero-badge--renew {
-  background: rgba(143, 168, 154, 0.22);
-  border-color: rgba(95, 122, 110, 0.22);
-
-  .hero-badge-text {
-    color: #5f7a6e;
-  }
-}
-
-.hero-badge-text {
-  font-size: 22rpx;
-  color: #5c534c;
-  font-weight: 600;
-  letter-spacing: 2rpx;
-}
-
-.hero-kicker {
-  font-size: 24rpx;
-  color: #7a8f85;
-  letter-spacing: 4rpx;
-  z-index: 1;
-}
-
-.hero-name {
-  font-size: 48rpx;
-  font-weight: 800;
-  color: #4f5d56;
-  letter-spacing: 1rpx;
-  z-index: 1;
-}
-
-.hero-price-row {
-  display: flex;
-  align-items: baseline;
-  gap: 8rpx;
-  z-index: 1;
-}
-
-.hero-currency {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #7a8f85;
-  line-height: 1;
-}
-
-.hero-price {
-  font-size: 64rpx;
-  font-weight: 800;
-  color: #4f5d56;
-  line-height: 1;
-}
-
-.hero-original {
-  font-size: 28rpx;
-  color: rgba(92, 83, 76, 0.4);
-  text-decoration: line-through;
-  margin-left: 8rpx;
-}
-
-/* ── Detail section ──────────────────────────────────── */
-.detail-section {
-  padding: 24rpx 24rpx 0;
-  display: flex;
-  flex-direction: column;
-  gap: 20rpx;
-}
-
-/* ── Section header ──────────────────────────────────── */
-.section-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 12rpx;
-  margin-bottom: 16rpx;
-}
-
-.section-dot {
-  width: 6rpx;
-  height: 28rpx;
-  border-radius: 3rpx;
-  background: #8fa89a;
-  flex-shrink: 0;
-}
-
-.section-title {
-  font-size: 30rpx;
-  font-weight: 700;
-  color: $text-primary;
-}
-
-/* ── Info grid card ──────────────────────────────────── */
-.info-card {
-  background: #fff;
-  border-radius: 20rpx;
-  padding: 32rpx 24rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
-}
-
-.info-grid {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  align-items: center;
-}
-
-.info-cell {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8rpx;
-  flex: 1;
-  position: relative;
-
-  & + & {
-    border-left: 1rpx solid #f0f0f0;
-  }
-}
-
-.cell-value {
-  font-size: 44rpx;
-  font-weight: 800;
-  color: #4f5d56;
-  line-height: 1.1;
-}
-
-.cell-label {
-  font-size: 22rpx;
-  color: #9a9088;
-}
-
-/* ── Description card ────────────────────────────────── */
-.desc-card {
-  background: #fff;
-  border-radius: 20rpx;
-  padding: 28rpx 24rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
-}
-
-.desc-content {
-  font-size: 27rpx;
-  color: #666;
-  line-height: 1.75;
-}
-
-.renew-compare {
-  background: linear-gradient(180deg, #fffcfa 0%, #f3eee6 100%);
-  border-radius: 28rpx;
-  padding: 32rpx 28rpx 28rpx;
-  box-shadow: 0 10rpx 32rpx rgba(95, 122, 110, 0.08);
-  border: 1rpx solid rgba(143, 168, 154, 0.28);
-}
-
-.renew-compare-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 28rpx;
-}
-
-.renew-compare-kicker {
-  font-size: 22rpx;
-  font-weight: 600;
-  letter-spacing: 4rpx;
-  color: #7a8f85;
-}
-
-.renew-compare-status {
-  font-size: 20rpx;
-  color: #f7faf8;
-  background: #8fa89a;
-  padding: 6rpx 16rpx;
-  border-radius: 20rpx;
-  letter-spacing: 1rpx;
-}
-
-.renew-compare-body {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.renew-col {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-width: 0;
-}
-
-.renew-col-label {
-  font-size: 20rpx;
-  color: #a3988e;
-  letter-spacing: 2rpx;
-  margin-bottom: 8rpx;
-}
-
-.renew-col-value {
-  font-size: 72rpx;
-  font-weight: 800;
-  color: #8a7e74;
-  line-height: 1;
-  font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
-}
-
-.renew-col--after .renew-col-value {
-  color: #5f7a6e;
-}
-
-.renew-col-unit {
-  font-size: 22rpx;
-  color: #8a7e74;
-  margin-top: 8rpx;
-}
-
-.renew-col-date {
-  font-size: 22rpx;
-  color: #a3988e;
-  margin-top: 12rpx;
-  letter-spacing: 1rpx;
-}
-
-.renew-arrow {
-  width: auto;
-  padding: 0 8rpx 28rpx;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8rpx;
-  flex-shrink: 0;
-}
-
-.renew-arrow-line {
-  width: 28rpx;
-  height: 2rpx;
-  background: rgba(143, 168, 154, 0.45);
-}
-
-.renew-arrow-diamond {
-  width: 14rpx;
-  height: 14rpx;
-  background: #8fa89a;
-  transform: rotate(45deg);
-}
-
-.renew-compare-foot {
-  margin-top: 28rpx;
-  padding-top: 24rpx;
-  border-top: 1rpx dashed rgba(143, 168, 154, 0.4);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10rpx;
-}
-
-.renew-compare-add {
-  font-size: 24rpx;
-  font-weight: 600;
-  color: #5f7a6e;
-  letter-spacing: 1rpx;
-}
-
-.renew-compare-note {
-  font-size: 20rpx;
-  color: #a3988e;
-}
-
-/* ── Features card ───────────────────────────────────── */
-.features-card {
-  background: #fff;
-  border-radius: 20rpx;
-  padding: 28rpx 24rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
-  display: flex;
-  flex-direction: column;
-}
-
-.feature-item {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: 12rpx;
-  padding: 6rpx 0;
-}
-
-.feature-dot {
-  font-size: 26rpx;
-  color: #8fa89a;
-  line-height: 1.65;
-  flex-shrink: 0;
-}
-
-.feature-text {
-  font-size: 26rpx;
-  color: #6f675f;
-  line-height: 1.65;
-}
-
-/* ── Bottom action bar ───────────────────────────────── */
-.bottom-bar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: rgba(255, 252, 250, 0.96);
-  border-top: 1rpx solid #efe8df;
-  padding: 20rpx 32rpx calc(20rpx + env(safe-area-inset-bottom));
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 24rpx;
-  box-shadow: 0 -8rpx 28rpx rgba(95, 122, 110, 0.06);
-}
-
-.bottom-bar--renew {
-  background: #fffcfa;
-  border-top-color: rgba(143, 168, 154, 0.22);
-}
-
-.price-summary {
-  display: flex;
-  flex-direction: column;
-  gap: 4rpx;
-}
-
-.summary-label {
-  font-size: 22rpx;
-  color: #9a9088;
-}
-
-.summary-price {
-  font-size: 40rpx;
-  font-weight: 800;
-  color: #5f7a6e;
-}
-
-.buy-btn {
-  flex: 1;
-  height: 88rpx;
-  border-radius: 44rpx;
-  background: #6e8b7e;
+.state-wrap {
+  min-height: 620rpx;
+  padding: 80rpx 56rpx;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 8rpx 24rpx rgba(95, 122, 110, 0.22);
-
-  &:active {
-    opacity: 0.85;
-  }
-
-  &--loading {
-    opacity: 0.6;
-  }
-
-  &--renew {
-    background: linear-gradient(135deg, #6e8b7e 0%, #8fa89a 100%);
-  }
-}
-
-.buy-btn-text {
-  font-size: 30rpx;
-  font-weight: 700;
-  color: #fffcfa;
-  letter-spacing: 4rpx;
-}
-
-/* ── All cards list ────────────────────────────────────── */
-.all-cards-list {
-  padding: 24rpx;
-  display: flex;
   flex-direction: column;
-  gap: 20rpx;
+  text-align: center;
 }
 
+.state-wrap--list { min-height: 520rpx; }
+
+.state-mark {
+  width: 76rpx;
+  height: 76rpx;
+  margin-bottom: 28rpx;
+  border: 1rpx solid #ded4ca;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #8b6c5b;
+  font-family: 'Songti SC', 'STSong', serif;
+  font-size: 42rpx;
+  line-height: 1;
+}
+
+.state-title { color: #514943; font-size: 32rpx; font-weight: 500; letter-spacing: 1rpx; }
+.state-copy { max-width: 520rpx; margin-top: 16rpx; color: #8b817b; font-size: 24rpx; line-height: 1.75; }
+
+.state-action {
+  min-width: 200rpx;
+  height: 74rpx;
+  margin: 32rpx 0 0;
+  padding: 0 28rpx;
+  border: none;
+  border-radius: 999rpx;
+  background: #6b8276;
+  color: #fff;
+  font-size: 25rpx;
+  line-height: 74rpx;
+  &::after { border: none; }
+}
+
+/* ── All membership plans ────────────────────────────── */
+.all-cards-page { padding: 24rpx 32rpx 12rpx; }
+
+.all-cards-intro {
+  position: relative;
+  overflow: hidden;
+  padding: 38rpx 32rpx 36rpx;
+  border: 1rpx solid #e8ddd3;
+  border-radius: 32rpx;
+  background: #f1e8e1;
+}
+
+.intro-orbit {
+  position: absolute;
+  border: 1rpx solid rgba(139, 108, 91, 0.18);
+  border-radius: 50%;
+  &--one { width: 260rpx; height: 260rpx; top: -142rpx; right: -76rpx; }
+  &--two { width: 170rpx; height: 170rpx; right: 58rpx; bottom: -105rpx; }
+}
+
+.intro-kicker,
+.section-kicker,
+.sheet-kicker {
+  display: block;
+  color: #8b6c5b;
+  font-family: 'Songti SC', 'STSong', serif;
+  font-size: 19rpx;
+  letter-spacing: 3rpx;
+  line-height: 1.4;
+}
+
+.intro-title {
+  position: relative;
+  z-index: 1;
+  display: block;
+  margin-top: 14rpx;
+  color: #514943;
+  font-family: 'Songti SC', 'STSong', serif;
+  font-size: 40rpx;
+  font-weight: 500;
+  letter-spacing: 2rpx;
+  line-height: 1.3;
+}
+
+.intro-copy {
+  position: relative;
+  z-index: 1;
+  display: block;
+  max-width: 510rpx;
+  margin-top: 14rpx;
+  color: #756a63;
+  font-size: 23rpx;
+  line-height: 1.7;
+}
+
+.all-cards-list { margin-top: 24rpx; display: flex; flex-direction: column; gap: 18rpx; }
+
 .card-row {
+  min-height: 166rpx;
+  padding: 20rpx;
+  border: 1rpx solid #eee8e3;
+  border-radius: 28rpx;
+  background: rgba(255, 255, 255, 0.88);
   display: flex;
   align-items: center;
   gap: 20rpx;
-  padding: 20rpx;
-  background: #fff;
-  border-radius: 20rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+  box-sizing: border-box;
+  transition: transform 160ms ease, border-color 160ms ease;
+  &:active { transform: scale(0.988); border-color: #d9c9bc; }
 }
 
-/* ══════════════════════════════════════════════════════════
-   CARD COVER — Clean minimal design
-   ══════════════════════════════════════════════════════════ */
+.card-row--renew { border-color: #d9e4d8; background: linear-gradient(100deg, #fff 0%, #f5f8f3 100%); }
+
 .card-cover {
-  width: 200rpx;
-  height: 130rpx;
-  border-radius: 16rpx;
+  position: relative;
+  width: 190rpx;
+  height: 126rpx;
   overflow: hidden;
   flex-shrink: 0;
-  position: relative;
+  border-radius: 18rpx;
+  background: #e9ddd3;
 }
 
-.card-cover-img {
-  width: 100%;
-  height: 100%;
-}
+.card-cover-img { width: 100%; height: 100%; }
+.cover--times { background: linear-gradient(135deg, #d8bb9f, #926f5d); }
+.cover--duration { background: linear-gradient(135deg, #b9c9b7, #657a6c); }
+.cover--trial { background: linear-gradient(135deg, #ead4c0, #aa775f); }
 
-.cover-deco {
+.cover-curve {
   position: absolute;
+  border: 1rpx solid rgba(255, 250, 245, 0.46);
   border-radius: 50%;
-  pointer-events: none;
-
-  &--1 {
-    width: 100rpx;
-    height: 100rpx;
-    top: -30rpx;
-    right: -20rpx;
-    background: rgba(255, 255, 255, 0.4);
-  }
-
-  &--2 {
-    width: 70rpx;
-    height: 70rpx;
-    bottom: -20rpx;
-    left: -10rpx;
-    background: rgba(255, 255, 255, 0.25);
-  }
+  &--one { width: 144rpx; height: 144rpx; right: -76rpx; top: -62rpx; }
+  &--two { width: 90rpx; height: 90rpx; bottom: -58rpx; left: -26rpx; }
 }
 
-.cover--times {
-  background: linear-gradient(135deg, #E8D5C4 0%, #D4BFA8 100%);
+.cover-edition {
+  position: absolute;
+  left: 16rpx;
+  top: 17rpx;
+  color: rgba(255, 251, 246, 0.74);
+  font-family: 'Songti SC', 'STSong', serif;
+  font-size: 15rpx;
+  letter-spacing: 2rpx;
 }
 
-.cover--duration {
-  background: linear-gradient(135deg, #D8C8DC 0%, #C4AECB 100%);
+.cover-type {
+  position: absolute;
+  left: 16rpx;
+  bottom: 16rpx;
+  color: #fffaf4;
+  font-family: 'Songti SC', 'STSong', serif;
+  font-size: 28rpx;
+  letter-spacing: 2rpx;
 }
 
-.cover--trial {
-  background: linear-gradient(135deg, #C8D8D2 0%, #A9C4BC 100%);
-}
-
-/* ── Card info — matches card-cover height ── */
 .card-info {
   flex: 1;
   min-width: 0;
-  height: 130rpx;
+  align-self: stretch;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
-.info-top {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 4rpx;
-}
-
-.info-bottom {
-  display: flex;
-  align-items: baseline;
-  gap: 16rpx;
-}
+.card-name-row { min-width: 0; display: flex; align-items: center; gap: 10rpx; }
 
 .card-name {
-  font-size: 30rpx;
-  font-weight: 700;
-  color: $text-primary;
+  min-width: 0;
   overflow: hidden;
+  color: #514943;
+  font-size: 29rpx;
+  font-weight: 500;
+  line-height: 1.35;
   text-overflow: ellipsis;
   white-space: nowrap;
-  letter-spacing: 0.5rpx;
-  line-height: 1.2;
 }
 
-.card-name-row {
+.renew-tag,
+.save-tag { flex-shrink: 0; border-radius: 999rpx; font-size: 18rpx; line-height: 1.35; }
+.renew-tag { padding: 4rpx 10rpx; background: #edf2ec; color: #617d73; }
+
+.card-benefit {
+  overflow: hidden;
+  color: #8b817b;
+  font-size: 20rpx;
+  line-height: 1.45;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-price-row,
+.price-stack { display: flex; align-items: baseline; }
+.card-price-row { gap: 10rpx; }
+.price-stack { min-width: 0; gap: 8rpx; }
+
+.card-price {
+  color: #8b6c5b;
+  font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif;
+  font-size: 34rpx;
+  font-weight: 600;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+.save-tag { padding: 3rpx 8rpx; background: #f4e7dd; color: #9b6b51; }
+.card-unit { overflow: hidden; color: #a0968f; font-size: 18rpx; text-overflow: ellipsis; white-space: nowrap; }
+
+.card-select {
+  min-width: 48rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rpx;
+  color: #9a8d84;
+}
+
+.card-select-text { font-size: 18rpx; }
+.card-select-arrow { font-size: 34rpx; font-weight: 300; line-height: 0.8; }
+
+/* ── Membership pass ─────────────────────────────────── */
+.card-hero {
+  position: relative;
+  min-height: 466rpx;
+  margin: 24rpx 32rpx 0;
+  padding: 32rpx;
+  overflow: hidden;
+  border: 1rpx solid rgba(255, 255, 255, 0.34);
+  border-radius: 32rpx;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  color: #fffaf4;
+  box-shadow: 0 18rpx 38rpx rgba(77, 58, 46, 0.12);
+  animation: pass-reveal 480ms ease both;
+  &.hero--times { background: linear-gradient(135deg, #9c7864 0%, #725747 55%, #4f4037 100%); }
+  &.hero--duration { background: linear-gradient(135deg, #849882 0%, #5d7564 56%, #3e5548 100%); }
+  &.hero--trial { background: linear-gradient(135deg, #b98668 0%, #946b57 56%, #654b40 100%); }
+  &.hero--custom { background: #4d443d; }
+  &.hero--renew { background: linear-gradient(135deg, #708c79 0%, #536f60 60%, #3e5548 100%); }
+}
+
+.hero-cover-img,
+.hero-image-veil,
+.hero-grid { position: absolute; inset: 0; width: 100%; height: 100%; }
+.hero-cover-img { z-index: 0; }
+.hero-image-veil { z-index: 1; background: linear-gradient(110deg, rgba(46, 38, 33, 0.72) 0%, rgba(46, 38, 33, 0.38) 62%, rgba(46, 38, 33, 0.56) 100%); }
+
+.hero-grid {
+  z-index: 1;
+  opacity: 0.26;
+  background-image: linear-gradient(rgba(255, 250, 244, 0.24) 1rpx, transparent 1rpx), linear-gradient(90deg, rgba(255, 250, 244, 0.24) 1rpx, transparent 1rpx);
+  background-size: 46rpx 46rpx;
+}
+
+.hero-orb,
+.hero-arc { position: absolute; z-index: 1; pointer-events: none; }
+
+.hero-orb {
+  border: 1rpx solid rgba(255, 250, 244, 0.25);
+  border-radius: 50%;
+  &--one { width: 320rpx; height: 320rpx; top: -166rpx; right: -82rpx; }
+  &--two { width: 196rpx; height: 196rpx; bottom: -112rpx; right: 98rpx; }
+}
+
+.hero-arc {
+  width: 520rpx;
+  height: 192rpx;
+  right: -314rpx;
+  bottom: -110rpx;
+  border: 1rpx solid rgba(255, 250, 244, 0.25);
+  border-radius: 50%;
+  transform: rotate(-24deg);
+}
+
+.hero-topline,
+.hero-copy-area,
+.hero-price-row,
+.hero-facts { position: relative; z-index: 2; }
+
+.hero-topline { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; }
+.hero-edition { color: rgba(255, 250, 244, 0.76); font-family: 'Songti SC', 'STSong', serif; font-size: 18rpx; letter-spacing: 3rpx; }
+.hero-saving { padding: 6rpx 14rpx; border: 1rpx solid rgba(255, 250, 244, 0.38); border-radius: 999rpx; background: rgba(255, 250, 244, 0.14); color: #fffaf4; font-size: 19rpx; line-height: 1.3; }
+.hero-copy-area { margin-top: auto; }
+.hero-type-row { display: flex; align-items: center; gap: 12rpx; }
+.hero-type { color: rgba(255, 250, 244, 0.78); font-size: 21rpx; letter-spacing: 2rpx; }
+.hero-renewal { padding-left: 12rpx; border-left: 1rpx solid rgba(255, 250, 244, 0.45); color: #fffaf4; font-size: 20rpx; }
+
+.hero-name {
+  display: block;
+  margin-top: 12rpx;
+  color: #fffaf4;
+  font-family: 'Songti SC', 'STSong', serif;
+  font-size: 48rpx;
+  font-weight: 500;
+  letter-spacing: 2rpx;
+  line-height: 1.22;
+}
+
+.hero-copy { display: block; max-width: 480rpx; margin-top: 10rpx; color: rgba(255, 250, 244, 0.8); font-size: 22rpx; line-height: 1.65; }
+.hero-price-row { min-height: 67rpx; margin-top: 20rpx; display: flex; align-items: baseline; gap: 6rpx; }
+.hero-currency { color: rgba(255, 250, 244, 0.88); font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif; font-size: 28rpx; }
+.hero-price { color: #fffaf4; font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif; font-size: 62rpx; font-weight: 600; letter-spacing: 1rpx; line-height: 1; font-variant-numeric: tabular-nums; }
+.hero-original { color: rgba(255, 250, 244, 0.56); font-size: 20rpx; text-decoration: line-through; }
+.hero-unit { margin-left: 5rpx; color: rgba(255, 250, 244, 0.68); font-size: 19rpx; }
+
+.hero-facts {
+  margin-top: 20rpx;
+  padding-top: 18rpx;
+  border-top: 1rpx solid rgba(255, 250, 244, 0.25);
   display: flex;
   align-items: center;
-  gap: 10rpx;
+}
+
+.hero-fact { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5rpx; }
+.hero-fact-divider { width: 1rpx; height: 42rpx; margin: 0 24rpx; background: rgba(255, 250, 244, 0.28); }
+.hero-fact-value { color: #fffaf4; font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif; font-size: 26rpx; font-weight: 600; line-height: 1.2; }
+.hero-fact-label { color: rgba(255, 250, 244, 0.66); font-size: 18rpx; }
+
+/* ── Plan information ────────────────────────────────── */
+.detail-section { padding: 26rpx 32rpx 0; display: flex; flex-direction: column; gap: 20rpx; }
+
+.plan-summary,
+.desc-card,
+.notice-card,
+.renew-compare {
+  border: 1rpx solid #eee8e3;
+  border-radius: 28rpx;
+  background: rgba(255, 255, 255, 0.92);
+  box-sizing: border-box;
+}
+
+.plan-summary,
+.desc-card,
+.notice-card { padding: 30rpx 28rpx; }
+.section-heading { display: flex; flex-direction: column; gap: 7rpx; }
+.section-title { color: #514943; font-size: 29rpx; font-weight: 500; letter-spacing: 1rpx; line-height: 1.4; }
+.summary-grid { margin-top: 26rpx; display: flex; align-items: stretch; }
+
+.summary-item {
+  flex: 1;
   min-width: 0;
-}
-
-.renew-tag {
-  flex-shrink: 0;
-  font-size: 18rpx;
-  font-weight: 700;
-  color: #5f7a6e;
-  background: rgba(143, 168, 154, 0.2);
-  padding: 2rpx 10rpx;
-  border-radius: 8rpx;
-  line-height: 1.4;
-  letter-spacing: 1rpx;
-}
-
-.card-validity {
-  font-size: 23rpx;
-  color: $text-secondary;
-  line-height: 1.2;
-}
-
-.card-times {
+  padding: 0 12rpx;
   display: flex;
-  align-items: baseline;
-  gap: 4rpx;
+  align-items: center;
+  flex-direction: column;
+  gap: 8rpx;
+  text-align: center;
+  & + & { border-left: 1rpx solid #eee8e3; }
 }
 
-.card-times-value {
-  font-size: 34rpx;
-  font-weight: 800;
-  color: $brand-color;
-  line-height: 1;
+.summary-value { color: #6a5547; font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif; font-size: 39rpx; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
+.summary-label { color: #8b817b; font-size: 20rpx; white-space: nowrap; }
+.desc-body { position: relative; margin-top: 18rpx; padding-left: 22rpx; }
+.desc-quote { position: absolute; left: -2rpx; top: -18rpx; color: #d5c1b2; font-family: 'Songti SC', 'STSong', serif; font-size: 56rpx; line-height: 1; }
+.desc-content { display: block; color: #6f655e; font-size: 25rpx; line-height: 1.8; }
+
+/* ── Renewal projection ───────────────────────────────── */
+.renew-compare {
+  overflow: hidden;
+  border-color: #dce7da;
+  background: linear-gradient(180deg, #f7faf6 0%, #f0f5ef 100%);
+  padding: 30rpx 28rpx 26rpx;
 }
 
-.card-times-unit {
+.renew-compare-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20rpx; }
+.renew-compare-title { display: block; margin-top: 7rpx; color: #516858; font-size: 29rpx; font-weight: 500; }
+.renew-compare-status { flex-shrink: 0; padding: 6rpx 13rpx; border-radius: 999rpx; background: #dfeadf; color: #617d73; font-size: 19rpx; }
+.renew-compare-body { margin-top: 28rpx; display: flex; align-items: center; }
+.renew-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
+.renew-col-label { color: #829087; font-size: 19rpx; letter-spacing: 2rpx; }
+.renew-col-value { margin-top: 8rpx; color: #6b756d; font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif; font-size: 62rpx; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
+.renew-col--after .renew-col-value { color: #55705f; }
+.renew-col-unit { margin-top: 6rpx; color: #6f7d74; font-size: 20rpx; }
+.renew-col-date { margin-top: 11rpx; color: #8b998e; font-size: 19rpx; font-variant-numeric: tabular-nums; }
+.renew-arrow { width: 74rpx; padding-bottom: 24rpx; display: flex; align-items: center; justify-content: center; gap: 6rpx; }
+.renew-arrow-line { width: 22rpx; height: 1rpx; background: #abc0ad; }
+.renew-arrow-diamond { width: 10rpx; height: 10rpx; background: #85a08a; transform: rotate(45deg); }
+
+.renew-compare-foot {
+  margin-top: 24rpx;
+  padding-top: 19rpx;
+  border-top: 1rpx dashed #c7d7c7;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8rpx;
+  text-align: center;
+}
+
+.renew-compare-add { color: #55705f; font-size: 22rpx; font-weight: 500; }
+.renew-compare-note { color: #8a7669; font-size: 19rpx; line-height: 1.5; }
+
+/* ── Usage and refund notes ───────────────────────────── */
+.notice-card { padding-bottom: 24rpx; }
+
+.notice-item {
+  padding: 17rpx 0;
+  display: flex;
+  align-items: flex-start;
+  gap: 16rpx;
+  & + & { border-top: 1rpx solid #f2ede8; }
+}
+
+.notice-number { flex-shrink: 0; color: #a48674; font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif; font-size: 19rpx; line-height: 1.7; letter-spacing: 1rpx; }
+.notice-text { color: #6f655e; font-size: 24rpx; line-height: 1.7; }
+
+/* ── Fixed purchase action ────────────────────────────── */
+.bottom-bar {
+  position: fixed;
+  z-index: 100;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 18rpx 32rpx calc(18rpx + env(safe-area-inset-bottom));
+  border-top: 1rpx solid #eee8e3;
+  background: rgba(251, 249, 246, 0.97);
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  box-shadow: 0 -10rpx 28rpx rgba(78, 64, 54, 0.06);
+}
+
+.bottom-bar--renew { border-top-color: #dae5d9; }
+.price-summary { min-width: 176rpx; display: flex; flex-direction: column; gap: 2rpx; }
+.price-summary-label { color: #8b817b; font-size: 19rpx; }
+.price-summary-value { color: #8b6c5b; font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif; font-size: 37rpx; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
+.price-summary-hint { overflow: hidden; max-width: 200rpx; color: #9d918a; font-size: 17rpx; text-overflow: ellipsis; white-space: nowrap; }
+
+.buy-btn {
+  flex: 1;
+  min-width: 0;
+  height: 86rpx;
+  margin: 0;
+  padding: 0 18rpx;
+  border: none;
+  border-radius: 999rpx;
+  background: #6b8276;
+  box-shadow: 0 8rpx 20rpx rgba(84, 109, 94, 0.2);
+  color: #fff;
+  font-size: 27rpx;
+  font-weight: 500;
+  letter-spacing: 2rpx;
+  line-height: 86rpx;
+  &::after { border: none; }
+  &:active { transform: scale(0.99); }
+  &--renew { background: #617d6e; }
+  &--busy,
+  &[disabled] { background: #a6b3a9; box-shadow: none; color: rgba(255, 255, 255, 0.88); }
+}
+
+/* ── Purchase confirmation ────────────────────────────── */
+.purchase-sheet-layer,
+.payment-status-layer {
+  position: fixed;
+  z-index: 300;
+  inset: 0;
+  padding: 32rpx;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-end;
+  background: rgba(42, 35, 30, 0.44);
+}
+
+.purchase-sheet {
+  width: 100%;
+  padding: 20rpx 28rpx calc(30rpx + env(safe-area-inset-bottom));
+  border-radius: 32rpx;
+  box-sizing: border-box;
+  background: #fffdfa;
+  animation: sheet-rise 260ms ease both;
+}
+
+.sheet-handle { width: 56rpx; height: 6rpx; margin: 0 auto 25rpx; border-radius: 999rpx; background: #ddd3cb; }
+.sheet-title { display: block; margin-top: 8rpx; color: #514943; font-family: 'Songti SC', 'STSong', serif; font-size: 36rpx; font-weight: 500; letter-spacing: 1rpx; }
+
+.sheet-card {
+  margin-top: 26rpx;
+  padding: 24rpx;
+  border: 1rpx solid #e9dfd6;
+  border-radius: 22rpx;
+  background: #f7f1eb;
+}
+
+.sheet-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20rpx; }
+.sheet-card-type { display: block; color: #8b6c5b; font-size: 19rpx; letter-spacing: 2rpx; }
+.sheet-card-name { display: block; margin-top: 7rpx; color: #514943; font-size: 29rpx; font-weight: 500; }
+.sheet-card-price { flex-shrink: 0; color: #8b6c5b; font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif; font-size: 37rpx; font-weight: 600; font-variant-numeric: tabular-nums; }
+.sheet-card-meta { margin-top: 19rpx; padding-top: 16rpx; border-top: 1rpx solid #e9ded4; display: flex; flex-direction: column; gap: 6rpx; color: #81756c; font-size: 21rpx; line-height: 1.5; }
+
+.sheet-note { margin-top: 21rpx; display: flex; align-items: flex-start; gap: 10rpx; }
+.sheet-note-mark { width: 26rpx; height: 26rpx; margin-top: 3rpx; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #e9f0e8; color: #617d73; font-size: 17rpx; }
+.sheet-note-text { color: #756b64; font-size: 22rpx; line-height: 1.65; }
+
+.sheet-warning {
+  margin-top: 16rpx;
+  padding: 14rpx 16rpx;
+  border: 1rpx solid #edd9ca;
+  border-radius: 16rpx;
+  background: #fdf4ed;
+  display: flex;
+  align-items: flex-start;
+  gap: 10rpx;
+}
+
+.sheet-warning-label {
+  flex-shrink: 0;
+  color: #9b6b51;
   font-size: 20rpx;
-  color: $text-secondary;
   font-weight: 500;
 }
 
-.price-row {
-  display: flex;
-  align-items: baseline;
-  gap: 6rpx;
-}
-
-.price-current {
-  font-size: 32rpx;
-  font-weight: 800;
-  color: $brand-color;
-  line-height: 1;
-}
-
-.price-original {
+.sheet-warning-text {
+  color: #856c5e;
   font-size: 20rpx;
-  color: $text-hint;
-  text-decoration: line-through;
+  line-height: 1.55;
 }
 
-.card-arrow {
-  font-size: 44rpx;
-  color: $text-hint;
-  flex-shrink: 0;
-  transform: scaleX(0.5);
-  transform-origin: center;
+.sheet-actions { margin-top: 28rpx; display: flex; gap: 14rpx; }
+
+.sheet-cancel,
+.sheet-confirm {
+  height: 82rpx;
+  margin: 0;
+  border: none;
+  border-radius: 999rpx;
+  font-size: 26rpx;
+  line-height: 82rpx;
+  &::after { border: none; }
 }
 
-/* ── Empty state ─────────────────────────────────────── */
-.empty-state {
-  padding: 160rpx 40rpx;
+.sheet-cancel { flex: 0 0 172rpx; background: #f1ece6; color: #756a61; }
+.sheet-confirm { flex: 1; background: #6b8276; color: #fff; &[disabled] { background: #a6b3a9; color: rgba(255, 255, 255, 0.88); } }
+.sheet-footnote { display: block; margin-top: 15rpx; color: #a0968f; font-size: 19rpx; text-align: center; }
+
+/* ── Payment confirmation ─────────────────────────────── */
+.payment-status-layer { align-items: center; justify-content: center; }
+
+.payment-status-card {
+  width: 100%;
+  max-width: 590rpx;
+  padding: 44rpx 34rpx 36rpx;
+  border-radius: 32rpx;
+  box-sizing: border-box;
+  background: #fffdfa;
+  text-align: center;
+}
+
+.status-orbit {
+  width: 102rpx;
+  height: 102rpx;
+  margin: 0 auto;
+  border: 1rpx solid #b9ccba;
+  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
+  animation: orbit-pulse 1.4s ease-in-out infinite;
+  &--still { animation: none; }
 }
 
-.empty-text {
-  font-size: 28rpx;
-  color: #bbb;
+.status-orbit-core { width: 72rpx; height: 72rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e7f0e6; color: #617d73; font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif; font-size: 26rpx; font-weight: 600; letter-spacing: 3rpx; }
+.payment-status-title { display: block; margin-top: 28rpx; color: #514943; font-family: 'Songti SC', 'STSong', serif; font-size: 33rpx; font-weight: 500; line-height: 1.4; }
+.payment-status-copy { display: block; margin-top: 14rpx; color: #7c7169; font-size: 23rpx; line-height: 1.7; }
+
+.status-primary,
+.status-secondary {
+  width: 100%;
+  height: 82rpx;
+  margin: 25rpx 0 0;
+  border: none;
+  border-radius: 999rpx;
+  font-size: 26rpx;
+  line-height: 82rpx;
+  &::after { border: none; }
+}
+
+.status-primary { background: #6b8276; color: #fff; }
+.status-secondary { margin-top: 12rpx; background: #f0ece6; color: #70655d; }
+
+@keyframes pass-reveal {
+  from { opacity: 0; transform: translateY(16rpx); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes sheet-rise {
+  from { transform: translateY(36rpx); }
+  to { transform: translateY(0); }
+}
+
+@keyframes orbit-pulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.06); opacity: 0.74; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card-hero,
+  .purchase-sheet,
+  .status-orbit,
+  .skeleton-pass,
+  .skeleton-line { animation: none; }
 }
 </style>
diff --git a/packages/app/src/stores/user.ts b/packages/app/src/stores/user.ts
index e46cd81..c23521a 100644
--- a/packages/app/src/stores/user.ts
+++ b/packages/app/src/stores/user.ts
@@ -88,12 +88,14 @@ export const useUserStore = defineStore('user', () => {
     }
   }
 
-  async function fetchMemberships() {
-    if (!isLoggedIn()) return
+  async function fetchMemberships(): Promise<boolean> {
+    if (!isLoggedIn()) return false
     try {
       memberships.value = await get<MembershipWithCardType[]>('/membership/my')
+      return true
     } catch (err) {
       console.error('Fetch memberships failed:', err)
+      return false
     }
   }