@seaverse/payment-sdk 0.9.2 → 0.9.4

package/dist/index.browser.js

@@ -2196,24 +2196,19 @@ class PaymentModal {
  *
  * 设计风格：深色卡片 + 清晰信息层次 + 渐变 CTA 按钮
  */
-/* ─── 设计 Token（深色主题） ─── */
+/* ─── 设计 Token（与 order-popups PendingPopup 一致） ─── */
 const D = {
-    // 背景
-    bgOverlay: 'rgba(0, 0, 0, 0.80)',
-    bgCard: 'linear-gradient(180deg, #1e293b 0%, #0f172a 100%)',
-    bgInnerCard: 'rgba(255, 255, 255, 0.04)',
-    bgInnerBorder: 'rgba(255, 255, 255, 0.08)',
-    // 文字
-    textWhite: '#fff',
-    textSecondary: 'rgba(255, 255, 255, 0.55)',
-    // 强调色
-    accentRed: '#f87171',
-    accentTeal: 'linear-gradient(135deg, #2dd4bf 0%, #22d3ee 100%)',
-    accentTealShadow: 'rgba(45, 212, 191, 0.35)',
-    // 分隔线
-    divider: 'rgba(255, 255, 255, 0.06)',
-    // 圆角
-    radiusCard: '20px',
+    bgOverlay: 'rgba(0, 0, 0, 0.85)',
+    bgCard: '#121212',
+    bgCardBorder: 'rgba(44, 44, 46, 0.6)',
+    bgSurface: '#1E1E1E',
+    bgSurfaceHighlight: '#2A2A2E',
+    borderSubtle: 'rgba(255, 255, 255, 0.05)',
+    textWhite: '#FFFFFF',
+    textMuted: '#A1A1AA',
+    timerRed: '#EF4444',
+    brandGreen: '#10B981',
+    radiusCard: '24px',
     radiusInner: '12px',
     radiusBtn: '12px',
 };
@@ -2275,27 +2270,30 @@ class RetentionModal {
      */
     createModal() {
         const { language, productName, purchaseAmount, bonusAmount, discountPrice } = this.options;
-        const isZh = language === 'zh';
+        const lang = language ?? 'en';
+        const isZh = lang === 'zh' || lang === 'zh-TW';
         const t = isZh ? {
             title: '你有一笔订单待支付',
-            timePrefix: '请在',
-            timeSuffix: '内支付，超时订单将自动取消',
-            productLabel: 'Product:',
-            amountLabel: 'Amount:',
-            bonusLabel: 'Bonus:',
+            timePrefix: '请在 ',
+            timeSuffix: ' 内支付，超时自动取消',
+            productLabel: '商品',
+            quantityLabel: '数量',
+            priceLabel: '优惠价',
+            bonusLabel: '奖励',
             cancelBtn: '取消',
             continueBtn: '继续支付',
         } : {
             title: 'You have a pending order',
-            timePrefix: 'Please pay within',
-            timeSuffix: 'or the order will be automatically cancelled',
+            timePrefix: 'Please pay within ',
+            timeSuffix: ', auto-cancelled if timeout',
             productLabel: 'Product:',
-            amountLabel: 'Amount:',
+            quantityLabel: 'Quantity:',
+            priceLabel: 'Price:',
             bonusLabel: 'Bonus:',
             cancelBtn: 'Cancel',
-            continueBtn: 'Continue Payment',
+            continueBtn: 'Pay Now',
         };
-        // ─── 遮罩 ───
+        // ─── 遮罩（与 order-popups 一致） ───
         this.overlay = document.createElement('div');
         this.overlay.id = 'retention-modal-overlay';
         this.overlay.style.cssText = `
@@ -2303,137 +2301,130 @@ class RetentionModal {
       display: flex; align-items: center; justify-content: center;
       padding: 24px;
       background: ${D.bgOverlay};
-      backdrop-filter: blur(6px);
+      backdrop-filter: blur(8px);
       animation: rm-fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     `;
-        // ─── 卡片 ───
+        // ─── 卡片（order-popups: bg-dark-card, rounded-[24px], border dark-border） ───
         this.modal = document.createElement('div');
         this.modal.style.cssText = `
       position: relative;
-      width: 90vw; max-width: 520px;
+      width: 90vw; max-width: 500px; min-width: 420px;
       border-radius: ${D.radiusCard};
       background: ${D.bgCard};
-      box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6);
+      border: 1px solid ${D.bgCardBorder};
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+      padding: 24px;
       animation: rm-slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       overflow: hidden;
     `;
-        // ─── 构建 HTML ───
+        // ─── 构建 HTML（与 order-popups PendingPopup + 图片布局一致） ───
         this.modal.innerHTML = `
-      <!-- 关闭按钮 -->
+      <!-- 关闭按钮（order-popups: top-5 right-5, rounded-full, text-dark-muted） -->
       <button type="button" id="retention-modal-close-btn" style="
-        position: absolute; top: 18px; right: 18px; z-index: 10;
-        display: flex; width: 34px; height: 34px;
+        position: absolute; top: 20px; right: 20px; z-index: 10;
+        display: flex; width: 40px; height: 40px;
         align-items: center; justify-content: center;
         border-radius: 50%;
-        background: rgba(255,255,255,0.08);
-        color: rgba(255,255,255,0.5);
+        background: transparent;
+        color: ${D.textMuted};
         border: none; cursor: pointer;
-        transition: all 0.2s;
+        transition: color 0.2s, background 0.2s;
       ">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
-          <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
         </svg>
       </button>
 
-      <!-- 标题区域 -->
-      <div style="padding: 44px 36px 28px; text-align: center;">
-        <h2 style="
-          margin: 0 0 14px;
-          font-size: 22px;
+      <!-- 标题区域（order-popups: text-2xl font-bold, timer in red font-mono） -->
+      <div style="padding: 16px 0 32px; text-align: center;">
+        <h1 style="
+          margin: 0 0 8px;
+          font-size: 24px;
           font-weight: 700;
           color: ${D.textWhite};
-          letter-spacing: -0.3px;
-        ">${t.title}</h2>
+          letter-spacing: -0.02em;
+        ">${t.title}</h1>
         <p style="
           margin: 0;
           font-size: 14px;
-          color: ${D.textSecondary};
-          line-height: 1.5;
+          color: ${D.textMuted};
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-wrap: wrap;
+          gap: 2px;
         ">
-          ${t.timePrefix}
-          <span id="countdown-display" style="
-            color: ${D.accentRed};
+          ${t.timePrefix}<span id="countdown-display" style="
+            color: ${D.timerRed};
             font-weight: 700;
             font-variant-numeric: tabular-nums;
-          ">00:15:00</span>
-          ${t.timeSuffix}
+            font-family: ui-monospace, monospace;
+          ">00:15:00</span>${t.timeSuffix}
         </p>
       </div>
 
-      <!-- 分隔线 -->
-      <div style="height: 1px; background: ${D.divider}; margin: 0 36px;"></div>
-
-      <!-- 订单详情 -->
-      <div style="padding: 28px 36px;">
-        <div style="
-          border-radius: ${D.radiusInner};
-          border: 1px solid ${D.bgInnerBorder};
-          background: ${D.bgInnerCard};
-          overflow: hidden;
-        ">
-          <!-- Product -->
-          <div style="
-            display: flex; align-items: center; justify-content: space-between;
-            padding: 16px 20px;
-            border-bottom: 1px solid ${D.divider};
-          ">
-            <span style="font-size: 14px; color: ${D.textSecondary};">${t.productLabel}</span>
-            <span style="font-size: 14px; font-weight: 600; color: ${D.textWhite};">${this.escapeHtml(productName)}</span>
+      <!-- 订单详情卡片（order-popups: rounded-xl border border-white/5，上 part surface，下 part surfaceHighlight） -->
+      <div style="
+        border-radius: ${D.radiusInner};
+        overflow: hidden;
+        border: 1px solid ${D.borderSubtle};
+        margin-bottom: 32px;
+      ">
+        <!-- 上：Product + Quantity -->
+        <div style="background: ${D.bgSurface}; padding: 20px; display: flex; flex-direction: column; gap: 16px;">
+          <div style="display: flex; justify-content: space-between; align-items: center; font-size: 14px;">
+            <span style="color: ${D.textMuted}; min-width: 64px;">${t.productLabel}</span>
+            <span style="color: ${D.textWhite}; font-weight: 500; text-align: right; word-break: break-word;">${this.escapeHtml(productName)}</span>
           </div>
-
-          <!-- Amount -->
-          <div style="
-            display: flex; align-items: center; justify-content: space-between;
-            padding: 16px 20px;
-            border-bottom: 1px solid ${D.divider};
-          ">
-            <span style="font-size: 14px; color: ${D.textSecondary};">${t.amountLabel}</span>
-            <span style="font-size: 14px; font-weight: 600; color: ${D.textWhite};">${discountPrice}</span>
+          <div style="display: flex; justify-content: space-between; align-items: center; font-size: 14px;">
+            <span style="color: ${D.textMuted}; min-width: 64px;">${t.quantityLabel}</span>
+            <span style="color: ${D.textWhite}; font-weight: 500; text-align: right;">${purchaseAmount.toLocaleString()}</span>
           </div>
-
           ${bonusAmount ? `
-          <!-- Bonus -->
-          <div style="
-            display: flex; align-items: center; justify-content: space-between;
-            padding: 16px 20px;
-            border-bottom: 1px solid ${D.divider};
-          ">
-            <span style="font-size: 14px; color: ${D.textSecondary};">${t.bonusLabel}</span>
-            <span style="font-size: 14px; font-weight: 600; color: ${D.textWhite};">${bonusAmount.toLocaleString()}</span>
+          <div style="display: flex; justify-content: space-between; align-items: center; font-size: 14px;">
+            <span style="color: ${D.textMuted}; min-width: 64px;">${t.bonusLabel}</span>
+            <span style="color: ${D.textWhite}; font-weight: 500; text-align: right;">${bonusAmount.toLocaleString()}</span>
           </div>
           ` : ''}
-
-          
+        </div>
+        <!-- 下：Price（图片：大号绿色金额） -->
+        <div style="
+          background: ${D.bgSurfaceHighlight};
+          padding: 20px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-top: 1px solid ${D.borderSubtle};
+        ">
+          <span style="font-size: 14px; color: ${D.textMuted}">${t.priceLabel}</span>
+          <span style="font-size: 24px; font-weight: 700; color: ${D.brandGreen}; letter-spacing: 0.02em;">${this.escapeHtml(discountPrice)}</span>
         </div>
       </div>
 
-      <!-- 按钮组 -->
-      <div style="display: flex; gap: 12px; padding: 0 36px 36px;">
+      <!-- 按钮组（order-popups: grid grid-cols-2 gap-4, Cancel=white/5 border, Pay=#10b981） -->
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
         <button type="button" id="retention-cancel-btn" style="
-          flex: 1;
           padding: 14px 20px;
           border-radius: ${D.radiusBtn};
-          border: 1px solid rgba(255,255,255,0.15);
-          background: transparent;
-          color: ${D.textWhite};
-          font-size: 15px;
-          font-weight: 600;
+          border: 1px solid rgba(255,255,255,0.1);
+          background: rgba(255,255,255,0.05);
+          color: ${D.textMuted};
+          font-size: 14px;
+          font-weight: 500;
           cursor: pointer;
-          transition: all 0.2s;
+          transition: background 0.2s, color 0.2s, border-color 0.2s;
         ">${t.cancelBtn}</button>
-
         <button type="button" id="retention-continue-btn" style="
-          flex: 1;
           padding: 14px 20px;
           border-radius: ${D.radiusBtn};
           border: none;
-          background: ${D.accentTeal};
-          color: #0f172a;
-          font-size: 15px;
+          background: ${D.brandGreen};
+          color: #000000;
+          font-size: 14px;
           font-weight: 700;
           cursor: pointer;
-          transition: all 0.2s;
-          box-shadow: 0 4px 16px ${D.accentTealShadow};
+          transition: box-shadow 0.2s, transform 0.1s;
         ">${t.continueBtn}</button>
       </div>
     `;
@@ -2468,20 +2459,20 @@ class RetentionModal {
       }
 
       #retention-modal-close-btn:hover {
-        background: rgba(255,255,255,0.15) !important;
-        color: #fff !important;
-        transform: rotate(90deg);
+        background: rgba(255,255,255,0.05) !important;
+        color: #FFFFFF !important;
       }
       #retention-cancel-btn:hover {
-        background: rgba(255,255,255,0.08) !important;
-        border-color: rgba(255,255,255,0.25) !important;
+        background: rgba(255,255,255,0.1) !important;
+        color: #FFFFFF !important;
+        border-color: rgba(255,255,255,0.1) !important;
       }
       #retention-continue-btn:hover {
-        box-shadow: 0 6px 24px rgba(45, 212, 191, 0.50) !important;
-        transform: translateY(-1px);
+        box-shadow: 0 0 20px rgba(16, 185, 129, 0.4) !important;
+        transform: scale(1.02);
       }
       #retention-continue-btn:active {
-        transform: translateY(0);
+        transform: scale(0.98);
       }
     `;
         document.head.appendChild(style);
@@ -2852,6 +2843,64 @@ class DropinPaymentModal {
     }
 }
 
+/**
+ * 共享配置文件
+ * Shared configuration for CreditPackageModal and GenericPackageModal
+ */
+/**
+ * 环境配置映射表
+ * SDK 根据 environment 参数自动选择对应的配置
+ */
+const ENVIRONMENT_CONFIGS = {
+    development: {
+        scriptUrl: 'https://seaart-publish.sc-api-release.saconsole.com/payment-component/client.js',
+        clientId: 'XF49NOfyZ54O16GujB0ptio2',
+        orderApiUrl: 'https://payment.sg.seaverse.dev',
+        walletApiUrl: 'https://wallet.sg.seaverse.dev',
+        cssUrl: 'https://seaart-publish.sc-api-release.saconsole.com/payment-component/public/style.css',
+    },
+    production: {
+        scriptUrl: 'https://seaart-publish.sc-api.saconsole.com/payment-component/client.js',
+        clientId: 'XF11ik3u5AJ16IyDI3hebq5',
+        orderApiUrl: 'https://payment.seaverse.com',
+        walletApiUrl: 'https://wallet.seaverse.com',
+        cssUrl: 'https://seaart-publish.sc-api.saconsole.com/payment-component/public/style.css',
+    },
+};
+/**
+ * 响应式断点配置
+ * Responsive breakpoints for grid layout
+ */
+const RESPONSIVE_BREAKPOINTS = {
+    mobile: 768,
+    tablet: 1200,
+    laptop: 1400,
+    desktop: Infinity,
+};
+/**
+ * 网格列数配置
+ * Grid columns for different screen sizes
+ */
+const GRID_COLUMNS = {
+    mobile: 1,
+    tablet: 2,
+    laptop: 2,
+    desktop: 4,
+};
+/**
+ * SDK 初始化配置
+ */
+const SDK_CONFIG = {
+    /** 默认脚本加载超时 (毫秒) */
+    DEFAULT_SCRIPT_TIMEOUT: 10000,
+    /** 默认 SDK 初始化超时 (毫秒) */
+    DEFAULT_INIT_TIMEOUT: 30000,
+    /** 默认最大重试次数 */
+    DEFAULT_MAX_RETRIES: 1,
+    /** 默认业务类型 (1=一次性购买, 2=订阅) */
+    DEFAULT_BUSINESS_TYPE: 1,
+};
+
 /**
  * SeaartPaymentSDK
  * 基于 SeaartPaymentComponent 的支付 SDK 封装
@@ -2888,22 +2937,22 @@ class SeaartPaymentSDK {
             return;
         }
         console.log('[SeaartPaymentSDK] Initializing...', {
-            scriptUrl: config.scriptUrl,
-            clientId: config.clientId,
+            scriptUrl: ENVIRONMENT_CONFIGS[config.environment].scriptUrl,
+            clientId: ENVIRONMENT_CONFIGS[config.environment].clientId,
             language: config.language,
-            cssUrl: config.cssUrl,
+            cssUrl: ENVIRONMENT_CONFIGS[config.environment].cssUrl,
         });
         try {
             // 1. 并行加载 CSS 和 JavaScript
             const loadTasks = [
                 ScriptLoader.loadSeaartPaymentComponent({
-                    scriptUrl: config.scriptUrl,
+                    scriptUrl: ENVIRONMENT_CONFIGS[config.environment].scriptUrl,
                     timeout: config.scriptTimeout || 10000,
                 }),
             ];
             // 2. 如果提供了 CSS URL，则加载样式表
-            if (config.cssUrl) {
-                loadTasks.push(StylesheetLoader.loadPaymentStylesheet(config.cssUrl));
+            if (ENVIRONMENT_CONFIGS[config.environment].cssUrl) {
+                loadTasks.push(StylesheetLoader.loadPaymentStylesheet(ENVIRONMENT_CONFIGS[config.environment].cssUrl));
             }
             // 3. 等待所有资源加载完成
             await Promise.all(loadTasks);
@@ -3294,64 +3343,6 @@ async function getCreditDetail(apiHost, authToken) {
     }
 }
 
-/**
- * 共享配置文件
- * Shared configuration for CreditPackageModal and GenericPackageModal
- */
-/**
- * 环境配置映射表
- * SDK 根据 environment 参数自动选择对应的配置
- */
-const ENVIRONMENT_CONFIGS = {
-    development: {
-        scriptUrl: 'https://seaart-publish.sc-api-release.saconsole.com/payment-component/client.js',
-        clientId: 'XF49NOfyZ54O16GujB0ptio2',
-        orderApiUrl: 'https://payment.sg.seaverse.dev',
-        walletApiUrl: 'https://wallet.sg.seaverse.dev',
-        cssUrl: 'https://seaart-publish.sc-api-release.saconsole.com/payment-component/public/style.css',
-    },
-    production: {
-        scriptUrl: 'https://seaart-publish.sc-api.saconsole.com/payment-component/client.js',
-        clientId: 'prod_client_id',
-        orderApiUrl: 'https://payment.seaverse.com',
-        walletApiUrl: 'https://wallet.seaverse.com',
-        cssUrl: 'https://seaart-publish.sc-api.saconsole.com/payment-component/public/style.css',
-    },
-};
-/**
- * 响应式断点配置
- * Responsive breakpoints for grid layout
- */
-const RESPONSIVE_BREAKPOINTS = {
-    mobile: 768,
-    tablet: 1200,
-    laptop: 1400,
-    desktop: Infinity,
-};
-/**
- * 网格列数配置
- * Grid columns for different screen sizes
- */
-const GRID_COLUMNS = {
-    mobile: 1,
-    tablet: 2,
-    laptop: 2,
-    desktop: 4,
-};
-/**
- * SDK 初始化配置
- */
-const SDK_CONFIG = {
-    /** 默认脚本加载超时 (毫秒) */
-    DEFAULT_SCRIPT_TIMEOUT: 10000,
-    /** 默认 SDK 初始化超时 (毫秒) */
-    DEFAULT_INIT_TIMEOUT: 30000,
-    /** 默认最大重试次数 */
-    DEFAULT_MAX_RETRIES: 1,
-    /** 默认业务类型 (1=一次性购买, 2=订阅) */
-    DEFAULT_BUSINESS_TYPE: 1,
-};
-
 /**
  * 共享类型定义
  * Shared types for CreditPackageModal and GenericPackageModal
@@ -3761,8 +3752,9 @@ class PurchaseSuccessModal {
      */
     createModal() {
         const { data, language } = this.options;
-        const isZh = language === 'zh';
-        // 创建遮罩层
+        const lang = language ?? 'en';
+        const isZh = lang === 'zh' || lang === 'zh-TW';
+        // 创建遮罩层（与 order-popups 一致：纯黑底）
         this.overlay = document.createElement('div');
         this.overlay.id = 'purchase-success-modal-overlay';
         this.overlay.style.cssText = `
@@ -3773,21 +3765,24 @@ class PurchaseSuccessModal {
       align-items: center;
       justify-content: center;
       padding: 20px;
-      background: rgba(15, 23, 42, 0.75);
+      background: rgba(0, 0, 0, 0.85);
       backdrop-filter: blur(8px);
       animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       overflow: hidden;
     `;
-        // 创建弹窗卡片
+        // 创建弹窗卡片（order-popups: dark-card #121212, rounded-[24px], border dark-border）
         this.modal = document.createElement('div');
         this.modal.style.cssText = `
       position: relative;
       width: 90vw;
-      max-width: 480px;
-      border-radius: 16px;
-      background: linear-gradient(to bottom, #0f172a, #1e293b);
-      box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
+      max-width: 500px;
+      min-width: 420px;
+      border-radius: 24px;
+      background: #121212;
+      border: 1px solid rgba(44, 44, 46, 0.6);
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
       animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      overflow: hidden;
     `;
         this.modal.innerHTML = this.getModalHTML(data, isZh);
         this.overlay.appendChild(this.modal);
@@ -3806,211 +3801,121 @@ class PurchaseSuccessModal {
             message: '感谢您的购买。您的积分已成功添加到账户中。',
             packLabel: '套餐名称',
             creditsLabel: '积分数量',
-            amountLabel: '支付金额',
-            badge: '已支付',
-        } : {
+            amountLabel: '支付金额'} : {
             title: 'Purchase Successful!',
             subtitle: 'Your credits have been added',
             greeting: 'Hi there,',
             message: 'Thank you for your purchase. Your credits have been successfully added to your account.',
             packLabel: 'Package',
             creditsLabel: 'Credits',
-            amountLabel: 'Amount',
-            badge: 'PAID',
-        };
+            amountLabel: 'Amount'};
         const currency = getCurrencySymbol(data.currency || 'USD');
+        const creditsText = isZh ? `${data.credits.toLocaleString()} 积分` : `${data.credits.toLocaleString()} Credits`;
         return `
-      <!-- 关闭按钮 -->
+      <!-- 关闭按钮（order-popups: top-5 right-5, rounded-full, text-dark-muted, hover:bg-white/5） -->
       <button
         type="button"
         id="success-modal-close-btn"
         style="
           position: absolute;
-          top: 14px;
-          right: 14px;
+          top: 20px;
+          right: 20px;
           z-index: 10;
           display: flex;
-          width: 32px;
-          height: 32px;
+          width: 40px;
+          height: 40px;
           align-items: center;
           justify-content: center;
           border-radius: 50%;
-          background: rgba(255, 255, 255, 0.1);
-          color: rgba(255, 255, 255, 0.7);
+          background: transparent;
+          color: #A1A1AA;
           border: none;
           cursor: pointer;
-          transition: all 0.2s;
+          transition: color 0.2s, background 0.2s;
         "
       >
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
-          <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
         </svg>
       </button>
 
-      <!-- 头部 -->
+      <!-- 成功状态与标题（与图片一致：大号绿色勾 + 紧凑布局） -->
       <div style="
-        border-radius: 16px 16px 0 0;
-        background: linear-gradient(to bottom, rgba(16, 185, 129, 0.1), transparent);
-        padding: 32px 24px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         text-align: center;
+        padding: 32px 24px 24px;
       ">
-        <!-- Success Icon -->
+        <!-- Success Icon：绿色实心圆 + 白色勾 -->
         <div style="
-          margin: 0 auto 12px;
-          width: 64px;
-          height: 64px;
+          width: 72px;
+          height: 72px;
+          margin-bottom: 20px;
           animation: scaleIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         ">
-          <svg width="64" height="64" viewBox="0 0 80 80" fill="none">
-            <circle cx="40" cy="40" r="36" fill="#10B981" fill-opacity="0.1" />
-            <circle cx="40" cy="40" r="28" fill="#10B981" fill-opacity="0.2" />
-            <path d="M28 40L36 48L52 32" stroke="#10B981" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+          <svg width="72" height="72" viewBox="0 0 72 72" fill="none">
+            <circle cx="36" cy="36" r="36" fill="#52AD5F"/>
+            <path d="M22 36 L32 46 L50 26" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </div>
-
-        <!-- Title -->
-        <h2 style="
-          margin: 0 0 6px;
-          font-size: 24px;
+        <h1 style="
+          margin: 0 0 12px;
+          font-size: 28px;
           font-weight: 700;
-          color: white;
-          animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
-        ">${texts.title}</h2>
-
-        <!-- Subtitle -->
+          color: #FFFFFF;
+          letter-spacing: 0.02em;
+        ">${texts.title}</h1>
         <p style="
           margin: 0;
-          font-size: 13px;
-          color: rgba(255, 255, 255, 0.6);
-          animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s backwards;
+          font-size: 16px;
+          color: #A1A1AA;
         ">${texts.subtitle}</p>
       </div>
 
-      <!-- 内容区域 -->
-      <div style="padding: 0 24px 32px;">
-        <!-- 确认卡片 -->
+      <!-- 详情卡片（order-popups: bg-dark-surface/50, rounded-xl, border border-white/5） -->
+      <div style="
+        margin: 0 24px 24px;
+        padding: 20px;
+        border-radius: 12px;
+        background: rgba(30, 30, 30, 0.5);
+        border: 1px solid rgba(255, 255, 255, 0.05);
+      ">
+        <!-- 问候语（border-b border-white/10） -->
         <div style="
-          overflow: hidden;
-          border-radius: 12px;
-          border: 1px solid rgba(255, 255, 255, 0.1);
-          background: #1e293b;
-          animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+          padding-bottom: 16px;
+          margin-bottom: 16px;
         ">
-          <!-- 卡片头部 -->
-          <div style="
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-            background: #0f172a;
-            padding: 16px;
-          ">
-            <div style="
-              display: flex;
-              align-items: center;
-              gap: 8px;
-              color: #10B981;
-            ">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
-                <path d="M12 2L2 7L12 12L22 7L12 2Z" fill="currentColor" opacity="0.3" />
-                <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-                <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-              </svg>
-              <span style="
-                font-size: 15px;
-                font-weight: 600;
-              ">SeaVerse</span>
-            </div>
-            <div style="
-              border-radius: 9999px;
-              border: 1px solid rgba(168, 85, 247, 0.3);
-              background: rgba(168, 85, 247, 0.1);
-              padding: 4px 12px;
-              font-size: 11px;
-              font-weight: 500;
-              color: #a855f7;
-            ">${texts.badge}</div>
-          </div>
+          <h2 style="
+            margin: 0 0 8px;
+            font-size: 18px;
+            font-weight: 600;
+            color: #FFFFFF;
+          ">${texts.greeting}</h2>
+          <p style="
+            margin: 0;
+            font-size: 14px;
+            line-height: 1.6;
+            color: #A1A1AA;
+          ">${texts.message}</p>
+        </div>
 
-          <!-- 问候语 -->
-          <div style="
-            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-            padding: 20px 16px;
-          ">
-            <p style="
-              margin: 0 0 8px;
-              font-size: 13px;
-              font-weight: 600;
-              color: rgba(255, 255, 255, 0.9);
-            ">${texts.greeting}</p>
-            <p style="
-              margin: 0;
-              font-size: 12px;
-              line-height: 1.6;
-              color: rgba(255, 255, 255, 0.7);
-            ">${texts.message}</p>
+        <!-- 套餐/积分/金额行（order-popups: space-y-4, label muted, value white/right, amount 绿色） -->
+        <div style="display: flex; flex-direction: column; gap: 16px;">
+          <div style="display: flex; justify-content: space-between; align-items: center; font-size: 14px;">
+            <span style="color: #A1A1AA;">${texts.packLabel}</span>
+            <span style="color: #FFFFFF; font-weight: 500; text-align: right;">${this.escapeHtml(data.packName)}</span>
           </div>
-
-          <!-- 详情列表 -->
-          <div style="
-            background: rgba(15, 23, 42, 0.5);
-            padding: 16px;
-          ">
-            <div style="
-              display: flex;
-              align-items: center;
-              justify-content: space-between;
-              border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-              padding: 12px 0;
-            ">
-              <span style="
-                font-size: 12px;
-                font-weight: 500;
-                color: rgba(255, 255, 255, 0.6);
-              ">${texts.packLabel}</span>
-              <span style="
-                font-size: 13px;
-                font-weight: 600;
-                color: rgba(255, 255, 255, 0.95);
-              ">${this.escapeHtml(data.packName)}</span>
-            </div>
-            <div style="
-              display: flex;
-              align-items: center;
-              justify-content: space-between;
-              border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-              padding: 12px 0;
-            ">
-              <span style="
-                font-size: 12px;
-                font-weight: 500;
-                color: rgba(255, 255, 255, 0.6);
-              ">${texts.creditsLabel}</span>
-              <span style="
-                font-size: 13px;
-                font-weight: 600;
-                color: rgba(255, 255, 255, 0.95);
-              ">${data.credits.toLocaleString()} Credits</span>
-            </div>
-            <div style="
-              display: flex;
-              align-items: center;
-              justify-content: space-between;
-              background: linear-gradient(to right, rgba(16, 185, 129, 0.05), transparent);
-              margin: 0 -16px;
-              padding: 12px 16px;
-            ">
-              <span style="
-                font-size: 12px;
-                font-weight: 500;
-                color: rgba(255, 255, 255, 0.6);
-              ">${texts.amountLabel}</span>
-              <span style="
-                font-size: 16px;
-                font-weight: 600;
-                color: #10B981;
-              ">${currency}${this.escapeHtml(data.amount)}</span>
-            </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; font-size: 14px;">
+            <span style="color: #A1A1AA;">${texts.creditsLabel}</span>
+            <span style="color: #FFFFFF; font-weight: 500; text-align: right;">${creditsText}</span>
+          </div>
+          <div style="height: 1px; background: rgba(255, 255, 255, 0.1); margin: 4px 0;"></div>
+          <div style="display: flex; justify-content: space-between; align-items: center; padding-top: 4px;">
+            <span style="font-size: 14px; color: #A1A1AA;">${texts.amountLabel}</span>
+            <span style="font-size: 20px; font-weight: 700; color: #10B981; letter-spacing: 0.02em;">${currency}${this.escapeHtml(data.amount)}</span>
           </div>
         </div>
       </div>
@@ -4089,9 +3994,8 @@ class PurchaseSuccessModal {
       }
 
       #success-modal-close-btn:hover {
-        background: rgba(255, 255, 255, 0.15) !important;
-        color: white !important;
-        transform: rotate(90deg);
+        background: rgba(255, 255, 255, 0.05) !important;
+        color: #FFFFFF !important;
       }
     `;
         document.head.appendChild(style);
@@ -4274,6 +4178,7 @@ class BasePackageModal {
             console.log(`[${this.constructor.name}] Using environment:`, config.environment);
             // 3. Initialize SeaartPaymentSDK
             await SeaartPaymentSDK.getInstance().init({
+                environment: config.environment,
                 scriptUrl: finalConfig.scriptUrl,
                 clientId: finalConfig.clientId,
                 language: this.language,
@@ -5141,8 +5046,9 @@ class PaymentVerificationModal {
      * 创建弹窗元素
      */
     createModal() {
-        const isZh = this.options.language === 'zh';
-        // 创建遮罩层
+        const lang = this.options.language ?? 'en';
+        const isZh = lang === 'zh' || lang === 'zh-TW';
+        // 遮罩（与 PurchaseSuccessModal 一致）
         this.overlay = document.createElement('div');
         this.overlay.id = 'payment-verification-modal-overlay';
         this.overlay.style.cssText = `
@@ -5153,20 +5059,21 @@ class PaymentVerificationModal {
       align-items: center;
       justify-content: center;
       padding: 20px;
-      background: rgba(15, 23, 42, 0.85);
-      backdrop-filter: blur(4px);
-      animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      background: rgba(0, 0, 0, 0.85);
+      backdrop-filter: blur(8px);
+      animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       overflow: hidden;
     `;
-        // 创建弹窗卡片
+        // 弹窗卡片（PurchaseSuccessModal 风格）
         this.modal = document.createElement('div');
         this.modal.style.cssText = `
       position: relative;
       width: 90vw;
-      max-width: 560px;
-      border-radius: 16px;
-      background: linear-gradient(145deg, #1e2d3d 0%, #162234 100%);
-      border: 1px solid rgba(255, 255, 255, 0.08);
+      max-width: 500px;
+      min-width: 420px;
+      border-radius: 24px;
+      background: #121212;
+      border: 1px solid rgba(44, 44, 46, 0.6);
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
       animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       overflow: hidden;
@@ -5184,52 +5091,50 @@ class PaymentVerificationModal {
         const texts = this.getTexts(isZh);
         const paymentType = this.options.paymentMethodName || 'Debit/Credit Card';
         return `
-      <!-- 关闭按钮 -->
+      <!-- 关闭按钮（与 PurchaseSuccessModal 一致） -->
       <button
         type="button"
         id="verification-modal-close-btn"
         style="
           position: absolute;
-          top: 16px;
-          right: 16px;
+          top: 20px;
+          right: 20px;
           z-index: 10;
           display: flex;
-          width: 32px;
-          height: 32px;
+          width: 40px;
+          height: 40px;
           align-items: center;
           justify-content: center;
           border-radius: 50%;
-          background: rgba(255, 255, 255, 0.1);
-          color: rgba(255, 255, 255, 0.6);
+          background: transparent;
+          color: #A1A1AA;
           border: none;
           cursor: pointer;
-          transition: all 0.2s;
+          transition: color 0.2s, background 0.2s;
         "
       >
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-          <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
         </svg>
       </button>
 
       <!-- 内容区域 -->
-      <div style="padding: 40px 32px 28px;">
-        <!-- 标题 -->
-        <h2 style="
-          margin: 0 0 12px;
+      <div style="padding: 24px 24px 24px;">
+        <h1 style="
+          margin: 0 0 8px;
           font-size: 24px;
           font-weight: 700;
-          color: #ffffff;
+          color: #FFFFFF;
           text-align: center;
-          line-height: 1.3;
-          letter-spacing: -0.3px;
-        ">${texts.title} ${paymentType}</h2>
+          letter-spacing: -0.02em;
+        ">${texts.title} ${paymentType}</h1>
 
-        <!-- 提示文本 -->
         <p style="
           margin: 0 0 20px;
-          font-size: 15px;
+          font-size: 14px;
           line-height: 1.6;
-          color: rgba(255, 255, 255, 0.7);
+          color: #A1A1AA;
           text-align: center;
         ">${texts.message}</p>
 
@@ -5238,16 +5143,19 @@ class PaymentVerificationModal {
           position: relative;
           margin: 0 0 24px;
           min-height: 56px;
+          padding: 16px;
+          border-radius: 12px;
+          background: rgba(30, 30, 30, 0.5);
+          border: 1px solid rgba(255, 255, 255, 0.05);
         ">
           <p style="
             margin: 0;
             font-size: 13px;
             line-height: 1.7;
-            color: rgba(255, 255, 255, 0.5);
+            color: #A1A1AA;
             text-align: center;
           ">${texts.helpText}</p>
 
-          <!-- 加载状态遮罩（默认隐藏，Processing 时显示） -->
           <div id="verification-loading-overlay" style="
             display: none;
             position: absolute;
@@ -5255,71 +5163,47 @@ class PaymentVerificationModal {
             align-items: center;
             justify-content: center;
             gap: 12px;
-            background: rgba(22, 34, 52, 0.92);
-            backdrop-filter: blur(2px);
-            border-radius: 8px;
+            background: rgba(18, 18, 18, 0.92);
+            backdrop-filter: blur(4px);
+            border-radius: 12px;
           ">
             <div id="verification-spinner" style="
               width: 24px;
               height: 24px;
-              border: 3px solid rgba(13, 148, 136, 0.25);
-              border-top-color: #14b8a6;
+              border: 3px solid rgba(16, 185, 129, 0.25);
+              border-top-color: #10B981;
               border-radius: 50%;
               animation: verificationSpin 0.8s linear infinite;
               flex-shrink: 0;
             "></div>
-            <span style="
-              font-size: 14px;
-              color: rgba(255, 255, 255, 0.8);
-              white-space: nowrap;
-            ">${texts.checkingStatus}</span>
+            <span style="font-size: 14px; color: #A1A1AA; white-space: nowrap;">${texts.checkingStatus}</span>
           </div>
         </div>
 
-        <!-- 按钮组 -->
-        <div style="
-          display: flex;
-          gap: 16px;
-          justify-content: center;
-        ">
-          <!-- Cancel 按钮 -->
-          <button
-            type="button"
-            id="verification-cancel-btn"
-            style="
-              flex: 1;
-              max-width: 240px;
-              height: 48px;
-              border-radius: 10px;
-              border: 1px solid rgba(255, 255, 255, 0.15);
-              background: transparent;
-              color: rgba(255, 255, 255, 0.8);
-              font-size: 15px;
-              font-weight: 500;
-              cursor: pointer;
-              transition: all 0.2s;
-            "
-          >${texts.cancelButton}</button>
-
-          <!-- Complete Payment / Processing 按钮 -->
-          <button
-            type="button"
-            id="verification-complete-btn"
-            style="
-              flex: 1;
-              max-width: 240px;
-              height: 48px;
-              border-radius: 10px;
-              border: none;
-              background: linear-gradient(135deg, #0d9488 0%, #3b82f6 100%);
-              color: white;
-              font-size: 15px;
-              font-weight: 600;
-              cursor: pointer;
-              transition: all 0.2s;
-              box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
-            "
-          >${texts.completeButton}</button>
+        <!-- 按钮组（与 PurchaseSuccessModal 一致） -->
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
+          <button type="button" id="verification-cancel-btn" style="
+            padding: 14px 20px;
+            border-radius: 12px;
+            border: 1px solid rgba(255,255,255,0.1);
+            background: rgba(255,255,255,0.05);
+            color: #A1A1AA;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background 0.2s, color 0.2s, border-color 0.2s;
+          ">${texts.cancelButton}</button>
+          <button type="button" id="verification-complete-btn" style="
+            padding: 14px 20px;
+            border-radius: 12px;
+            border: none;
+            background: #10B981;
+            color: #000000;
+            font-size: 14px;
+            font-weight: 700;
+            cursor: pointer;
+            transition: box-shadow 0.2s, transform 0.1s;
+          ">${texts.completeButton}</button>
         </div>
       </div>
     `;
@@ -5397,24 +5281,23 @@ class PaymentVerificationModal {
       }
 
       #verification-modal-close-btn:hover {
-        background: rgba(255, 255, 255, 0.2) !important;
-        color: white !important;
-        transform: rotate(90deg);
+        background: rgba(255, 255, 255, 0.05) !important;
+        color: #FFFFFF !important;
       }
 
       #verification-cancel-btn:hover {
-        background: rgba(255, 255, 255, 0.06) !important;
-        border-color: rgba(255, 255, 255, 0.25) !important;
+        background: rgba(255, 255, 255, 0.1) !important;
+        color: #FFFFFF !important;
+        border-color: rgba(255, 255, 255, 0.1) !important;
       }
 
       #verification-complete-btn:hover {
-        background: linear-gradient(135deg, #0f766e 0%, #2563eb 100%) !important;
-        box-shadow: 0 6px 16px rgba(13, 148, 136, 0.4) !important;
-        transform: translateY(-1px);
+        box-shadow: 0 0 20px rgba(16, 185, 129, 0.4) !important;
+        transform: scale(1.02);
       }
 
       #verification-complete-btn:active {
-        transform: translateY(0);
+        transform: scale(0.98);
       }
     `;
         document.head.appendChild(style);
@@ -5493,7 +5376,8 @@ class PaymentVerificationModal {
         // 更新按钮文本为 Processing...
         const completeBtn = document.getElementById('verification-complete-btn');
         if (completeBtn) {
-            const isZh = this.options.language === 'zh';
+            const lang = this.options.language ?? 'en';
+            const isZh = lang === 'zh' || lang === 'zh-TW';
             completeBtn.textContent = isZh ? '处理中...' : 'Processing...';
             completeBtn.style.pointerEvents = 'none';
             completeBtn.style.opacity = '0.85';
@@ -5511,7 +5395,8 @@ class PaymentVerificationModal {
         // 恢复按钮文本
         const completeBtn = document.getElementById('verification-complete-btn');
         if (completeBtn) {
-            const isZh = this.options.language === 'zh';
+            const lang = this.options.language ?? 'en';
+            const isZh = lang === 'zh' || lang === 'zh-TW';
             completeBtn.textContent = isZh ? '我已完成支付' : 'I\'ve Completed Payment';
             completeBtn.style.pointerEvents = '';
             completeBtn.style.opacity = '';
@@ -5635,8 +5520,9 @@ class PaymentFailedModal {
      */
     createModal() {
         const { language } = this.options;
-        const isZh = language === 'zh';
-        // 创建遮罩层（与验证弹框一致）
+        const lang = language ?? 'en';
+        const isZh = lang === 'zh' || lang === 'zh-TW';
+        // 遮罩（与 PurchaseSuccessModal 一致）
         this.overlay = document.createElement('div');
         this.overlay.id = 'payment-failed-modal-overlay';
         this.overlay.style.cssText = `
@@ -5647,20 +5533,21 @@ class PaymentFailedModal {
       align-items: center;
       justify-content: center;
       padding: 20px;
-      background: rgba(15, 23, 42, 0.85);
-      backdrop-filter: blur(4px);
-      animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      background: rgba(0, 0, 0, 0.85);
+      backdrop-filter: blur(8px);
+      animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       overflow: hidden;
     `;
-        // 创建弹窗卡片（与验证弹框一致）
+        // 弹窗卡片（PurchaseSuccessModal 风格：dark-card #121212, rounded 24px）
         this.modal = document.createElement('div');
         this.modal.style.cssText = `
       position: relative;
       width: 90vw;
-      max-width: 560px;
-      border-radius: 16px;
-      background: linear-gradient(145deg, #1e2d3d 0%, #162234 100%);
-      border: 1px solid rgba(255, 255, 255, 0.08);
+      max-width: 500px;
+      min-width: 420px;
+      border-radius: 24px;
+      background: #121212;
+      border: 1px solid rgba(44, 44, 46, 0.6);
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
       animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       overflow: hidden;
@@ -5683,58 +5570,62 @@ class PaymentFailedModal {
         const hasDetails = !!this.options.details;
         const hasRetry = !!this.options.onRetry;
         return `
-      <!-- 关闭按钮 -->
+      <!-- 关闭按钮（与 PurchaseSuccessModal 一致） -->
       <button
         type="button"
         id="failed-modal-close-btn"
         style="
           position: absolute;
-          top: 16px;
-          right: 16px;
+          top: 20px;
+          right: 20px;
           z-index: 10;
           display: flex;
-          width: 32px;
-          height: 32px;
+          width: 40px;
+          height: 40px;
           align-items: center;
           justify-content: center;
           border-radius: 50%;
-          background: rgba(255, 255, 255, 0.1);
-          color: rgba(255, 255, 255, 0.6);
+          background: transparent;
+          color: #A1A1AA;
           border: none;
           cursor: pointer;
-          transition: all 0.2s;
+          transition: color 0.2s, background 0.2s;
         "
       >
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-          <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
         </svg>
       </button>
 
-      <!-- 内容区域 -->
-      <div style="padding: 40px 32px 28px;">
-        <!-- 标题 -->
-        <h2 style="
-          margin: 0 0 12px;
+      <!-- 标题与消息 -->
+      <div style="padding: 24px 24px 0;">
+        <h1 style="
+          margin: 0 0 8px;
           font-size: 24px;
           font-weight: 700;
-          color: #ffffff;
+          color: #FFFFFF;
           text-align: center;
-          line-height: 1.3;
-          letter-spacing: -0.3px;
-        ">${this.escapeHtml(title)}</h2>
-
-        <!-- 消息 -->
+          letter-spacing: -0.02em;
+        ">${this.escapeHtml(title)}</h1>
         <p style="
-          margin: 0 0 ${hasDetails ? '24px' : '28px'};
-          font-size: 15px;
+          margin: 0 0 24px;
+          font-size: 14px;
           line-height: 1.6;
-          color: rgba(255, 255, 255, 0.7);
+          color: #A1A1AA;
           text-align: center;
         ">${this.escapeHtml(this.options.message)}</p>
+      </div>
 
-        <!-- 详情展开/折叠 -->
-        ${hasDetails ? `
-          <div style="margin-bottom: 24px;">
+      <!-- 详情展开/折叠（放入内卡片风格） -->
+      ${hasDetails ? `
+        <div style="margin: 0 24px 24px;">
+          <div style="
+            padding: 20px;
+            border-radius: 12px;
+            background: rgba(30, 30, 30, 0.5);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+          ">
             <button
               type="button"
               id="failed-modal-details-toggle"
@@ -5744,15 +5635,15 @@ class PaymentFailedModal {
                 align-items: center;
                 justify-content: center;
                 gap: 8px;
-                padding: 10px;
+                padding: 10px 12px;
                 border: 1px solid rgba(255, 255, 255, 0.1);
-                border-radius: 10px;
+                border-radius: 8px;
                 background: rgba(255, 255, 255, 0.03);
-                color: rgba(255, 255, 255, 0.5);
+                color: #A1A1AA;
                 font-size: 13px;
                 font-weight: 500;
                 cursor: pointer;
-                transition: all 0.2s;
+                transition: background 0.2s, color 0.2s, border-color 0.2s;
               "
             >
               <span id="failed-modal-details-toggle-text">${detailsToggleText}</span>
@@ -5771,91 +5662,69 @@ class PaymentFailedModal {
               <div style="
                 margin-top: 12px;
                 padding: 16px;
-                border-radius: 10px;
-                background: rgba(239, 68, 68, 0.05);
-                border: 1px solid rgba(239, 68, 68, 0.1);
+                border-radius: 8px;
+                background: rgba(239, 68, 68, 0.06);
+                border: 1px solid rgba(239, 68, 68, 0.12);
               ">
                 <pre style="
                   margin: 0;
-                  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+                  font-family: ui-monospace, monospace;
                   font-size: 12px;
                   line-height: 1.6;
-                  color: rgba(255, 255, 255, 0.5);
+                  color: #A1A1AA;
                   white-space: pre-wrap;
                   word-break: break-word;
                 ">${this.escapeHtml(this.options.details || '')}</pre>
               </div>
             </div>
           </div>
-        ` : ''}
-
-        <!-- 按钮组 -->
-        <div style="
-          display: flex;
-          gap: 16px;
-          justify-content: center;
-        ">
-          ${hasRetry ? `
-            <!-- 关闭按钮（有重试时） -->
-            <button
-              type="button"
-              id="failed-modal-close-bottom-btn"
-              style="
-                flex: 1;
-                max-width: 240px;
-                height: 48px;
-                border-radius: 10px;
-                border: 1px solid rgba(255, 255, 255, 0.15);
-                background: transparent;
-                color: rgba(255, 255, 255, 0.8);
-                font-size: 15px;
-                font-weight: 500;
-                cursor: pointer;
-                transition: all 0.2s;
-              "
-            >${closeText}</button>
-
-            <!-- 重试按钮 -->
-            <button
-              type="button"
-              id="failed-modal-retry-btn"
-              style="
-                flex: 1;
-                max-width: 240px;
-                height: 48px;
-                border-radius: 10px;
-                border: none;
-                background: linear-gradient(135deg, #0d9488 0%, #3b82f6 100%);
-                color: white;
-                font-size: 15px;
-                font-weight: 600;
-                cursor: pointer;
-                transition: all 0.2s;
-                box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
-              "
-            >${retryText}</button>
-          ` : `
-            <!-- 关闭按钮（无重试时，居中显示） -->
-            <button
-              type="button"
-              id="failed-modal-close-bottom-btn"
-              style="
-                flex: 0;
-                min-width: 160px;
-                max-width: 240px;
-                height: 48px;
-                border-radius: 10px;
-                border: 1px solid rgba(255, 255, 255, 0.15);
-                background: transparent;
-                color: rgba(255, 255, 255, 0.8);
-                font-size: 15px;
-                font-weight: 500;
-                cursor: pointer;
-                transition: all 0.2s;
-              "
-            >${closeText}</button>
-          `}
         </div>
+      ` : '<div style="margin-bottom: 24px;"></div>'}
+
+      <!-- 按钮组（与 PurchaseSuccessModal / RetentionModal 一致） -->
+      <div style="display: grid; grid-template-columns: ${hasRetry ? '1fr 1fr' : '1fr'}; gap: 16px; padding: 0 24px 24px; justify-items: center;">
+        ${hasRetry ? `
+          <button type="button" id="failed-modal-close-bottom-btn" style="
+            width: 100%;
+            max-width: 240px;
+            padding: 14px 20px;
+            border-radius: 12px;
+            border: 1px solid rgba(255,255,255,0.1);
+            background: rgba(255,255,255,0.05);
+            color: #A1A1AA;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background 0.2s, color 0.2s, border-color 0.2s;
+          ">${closeText}</button>
+          <button type="button" id="failed-modal-retry-btn" style="
+            width: 100%;
+            max-width: 240px;
+            padding: 14px 20px;
+            border-radius: 12px;
+            border: none;
+            background: #10B981;
+            color: #000000;
+            font-size: 14px;
+            font-weight: 700;
+            cursor: pointer;
+            transition: box-shadow 0.2s, transform 0.1s;
+          ">${retryText}</button>
+        ` : `
+          <button type="button" id="failed-modal-close-bottom-btn" style="
+            min-width: 160px;
+            max-width: 240px;
+            padding: 14px 20px;
+            border-radius: 12px;
+            border: 1px solid rgba(255,255,255,0.1);
+            background: rgba(255,255,255,0.05);
+            color: #A1A1AA;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background 0.2s, color 0.2s, border-color 0.2s;
+          ">${closeText}</button>
+        `}
       </div>
     `;
     }
@@ -5902,30 +5771,29 @@ class PaymentFailedModal {
       }
 
       #failed-modal-close-btn:hover {
-        background: rgba(255, 255, 255, 0.2) !important;
-        color: white !important;
-        transform: rotate(90deg);
+        background: rgba(255, 255, 255, 0.05) !important;
+        color: #FFFFFF !important;
       }
 
       #failed-modal-details-toggle:hover {
         background: rgba(255, 255, 255, 0.06) !important;
-        border-color: rgba(255, 255, 255, 0.2) !important;
-        color: rgba(255, 255, 255, 0.7) !important;
+        border-color: rgba(255, 255, 255, 0.15) !important;
+        color: #FFFFFF !important;
       }
 
       #failed-modal-close-bottom-btn:hover {
-        background: rgba(255, 255, 255, 0.06) !important;
-        border-color: rgba(255, 255, 255, 0.25) !important;
+        background: rgba(255, 255, 255, 0.1) !important;
+        color: #FFFFFF !important;
+        border-color: rgba(255, 255, 255, 0.1) !important;
       }
 
       #failed-modal-retry-btn:hover {
-        background: linear-gradient(135deg, #0f766e 0%, #2563eb 100%) !important;
-        box-shadow: 0 6px 16px rgba(13, 148, 136, 0.4) !important;
-        transform: translateY(-1px);
+        box-shadow: 0 0 20px rgba(16, 185, 129, 0.4) !important;
+        transform: scale(1.02);
       }
 
       #failed-modal-retry-btn:active {
-        transform: translateY(0);
+        transform: scale(0.98);
       }
     `;
         document.head.appendChild(style);
@@ -5978,7 +5846,8 @@ class PaymentFailedModal {
      * 切换详情展开/折叠
      */
     toggleDetails() {
-        const isZh = this.options.language === 'zh';
+        const lang = this.options.language ?? 'en';
+        const isZh = lang === 'zh' || lang === 'zh-TW';
         const detailsToggleText = isZh ? '查看详情' : 'View Details';
         const detailsHideText = isZh ? '隐藏详情' : 'Hide Details';
         this.detailsExpanded = !this.detailsExpanded;
@@ -8509,16 +8378,6 @@ class CreditPackageModal extends BasePackageModal {
             this.isFetchingPackages = false;
         }
     }
-    /**
-     * Parse purchase limit string to day_limit number
-     * Example: "Daily limit: 1" => 1
-     */
-    parsePurchaseLimit(limit) {
-        if (!limit)
-            return 0;
-        const match = limit.match(/\d+/);
-        return match ? parseInt(match[0]) : 0;
-    }
     /**
      * 覆盖 BasePackageModal 的 handlePaymentFlow 方法
      * 使用 PaymentCheckoutModal 替代旧的 DropinPaymentModal
@@ -8653,6 +8512,7 @@ class CreditPackageModal extends BasePackageModal {
         if (modalElement) {
             modalElement.style.background = '#0a0a0f';
             modalElement.style.border = '1px solid rgba(255, 255, 255, 0.1)';
+            modalElement.style.borderRadius = '24px';
         }
         // Modify title style
         const titleElement = document.querySelector('.payment-modal-title');
@@ -8663,6 +8523,31 @@ class CreditPackageModal extends BasePackageModal {
             titleElement.style.padding = '32px 32px 0 32px';
             titleElement.style.marginBottom = '16px';
             titleElement.style.letterSpacing = '-0.01em';
+            titleElement.style.display = 'none'; // Hide default title, we use custom header in renderContent
+        }
+        // Add responsive styles for cards
+        if (!document.getElementById('credit-package-responsive-styles')) {
+            const style = document.createElement('style');
+            style.id = 'credit-package-responsive-styles';
+            style.textContent = `
+        @media (max-width: 768px) {
+          .credit-pack-card-container {
+            width: 100% !important;
+            max-width: 320px;
+            margin: 0 auto;
+          }
+          .credit-pack-card {
+            width: 100% !important;
+            height: 260px !important;
+          }
+          .payment-modal {
+            width: 95vw !important;
+            max-height: 90vh !important;
+            overflow-y: auto !important;
+          }
+        }
+      `;
+            document.head.appendChild(style);
         }
         // Modify close button color and add hover animation
         const closeButton = document.querySelector('.payment-modal-close');
@@ -8695,7 +8580,8 @@ class CreditPackageModal extends BasePackageModal {
         if (!container) {
             throw new Error('Modal content container not found');
         }
-        const isZh = this.language === 'zh';
+        const lang = this.language ?? 'en';
+        const isZh = lang === 'zh' || lang === 'zh-TW';
         const styles = this.getResponsiveStyles();
         container.innerHTML = `
       <div style="
@@ -8705,10 +8591,10 @@ class CreditPackageModal extends BasePackageModal {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
       ">
         <!-- Credit Packs - credit package purchase title -->
-        <div style="margin: 0 auto ${this.SPACING.lg}; max-width: 80rem; text-align: center;">
+        <div style="margin: 0 auto ${styles.headerMargin}; max-width: 80rem; text-align: center;">
           <h3 style="
             margin-bottom: ${this.SPACING.xs};
-            font-size: 24px;
+            font-size: ${styles.titleFontSize};
             font-weight: 700;
             color: ${this.COLORS.text.primary};
             letter-spacing: -0.02em;
@@ -8716,11 +8602,11 @@ class CreditPackageModal extends BasePackageModal {
             ${isZh ? '需要更多积分?' : 'Need More Credits?'}
           </h3>
           <p style="
-            font-size: 16px;
+            font-size: ${styles.subtitleFontSize};
             color: ${this.COLORS.text.secondary};
             line-height: 1.6;
           ">
-            ${isZh ? '随时购买永久积分包' : 'Purchase unlimited credit packages anytime'}
+            ${isZh ? '随时购买永久积分包' : 'Get credits (Valid for all platform products)'}
           </p>
         </div>
 
@@ -8728,7 +8614,8 @@ class CreditPackageModal extends BasePackageModal {
         <div style="
           display: grid;
           grid-template-columns: ${styles.packGridColumns};
-          gap: 16px;
+          gap: ${styles.gridGap};
+          justify-items: center;
         ">
           ${this.getPackages().map((pkg, index) => this.renderPackageCard(pkg, index)).join('')}
         </div>
@@ -8743,30 +8630,55 @@ class CreditPackageModal extends BasePackageModal {
      */
     getResponsiveStyles() {
         const isMobile = window.matchMedia('(max-width: 768px)').matches;
-        const isTablet = window.matchMedia('(max-width: 1200px)').matches;
+        const isTablet = window.matchMedia('(max-width: 1024px)').matches;
         const isLaptop = window.matchMedia('(max-width: 1400px)').matches;
         let computeColumns = 5;
         let packColumns = 4;
         let padding = '0 60px 60px';
+        let titleSize = '32px';
+        let subtitleSize = '16px';
+        let headerMargin = this.SPACING.lg;
+        let gridGap = '24px';
         if (isMobile) {
             computeColumns = 1;
             packColumns = 1;
-            padding = '0 20px 20px';
+            padding = '0 16px 32px';
+            titleSize = '24px';
+            subtitleSize = '14px';
+            headerMargin = this.SPACING.md;
+            gridGap = '16px';
         }
         else if (isTablet) {
             computeColumns = 2;
             packColumns = 2;
-            padding = '0 30px 30px';
+            padding = '0 32px 48px';
+            titleSize = '28px';
+            subtitleSize = '15px';
+            headerMargin = this.SPACING.md;
+            gridGap = '20px';
         }
         else if (isLaptop) {
             computeColumns = 3;
-            packColumns = 2;
-            padding = '0 40px 40px';
+            packColumns = 3;
+            padding = '0 48px 60px';
+            titleSize = '32px';
+            subtitleSize = '16px';
+            headerMargin = this.SPACING.lg;
+            gridGap = '24px';
+        }
+        // Adjust columns based on package count if small
+        const packageCount = this.getPackages().length;
+        if (!isMobile && packageCount < packColumns) {
+            packColumns = packageCount;
         }
         return {
             containerPadding: padding,
             computeGridColumns: `repeat(${computeColumns}, 1fr)`,
             packGridColumns: `repeat(${packColumns}, 1fr)`,
+            titleFontSize: titleSize,
+            subtitleFontSize: subtitleSize,
+            headerMargin: headerMargin,
+            gridGap: gridGap,
         };
     }
     /**
@@ -8922,8 +8834,8 @@ class GenericPackageModal extends BasePackageModal {
         if (!container) {
             throw new Error('Modal content container not found');
         }
-        // Directly render card content without any outer wrapper
-        container.innerHTML = this.options.packages.map((pkg, index) => this.renderPackageCard(pkg, index)).join('');
+        const cardsHtml = this.options.packages.map((pkg, index) => this.renderPackageCard(pkg, index)).join('');
+        container.innerHTML = `<div style="display:flex;flex-wrap:wrap;justify-content:center;gap:24px;padding:0;">${cardsHtml}</div>`;
         // Attach event listeners
         this.attachEventListeners(container);
     }
@@ -9018,199 +8930,229 @@ class GenericPackageModal extends BasePackageModal {
         };
     }
     /**
-     * Render package card
+     * Render package card (Credits.html / 参考图一比一风格)
      */
     renderPackageCard(pkg, index) {
         const hasBonus = pkg.bonus_credits && parseInt(pkg.bonus_credits) > 0;
-        const hasBonusPercentage = pkg.bonus_percentage && pkg.bonus_percentage > 0;
-        // Determine title based on package type
-        let packageTitle = '';
-        if (pkg.package_type === 'iceBreaker' || pkg.package_type === 'firstCharge') {
-            packageTitle = 'One-time Only';
-        }
+        const hasBonusPercentage = pkg.bonus_percentage != null && pkg.bonus_percentage > 0;
+        const baseNum = this.formatNumber(pkg.base_credits || pkg.credits);
+        const bonusNum = hasBonus ? this.formatNumber(pkg.bonus_credits) : '';
+        const originalPrice = pkg.original_price;
+        const svgClose = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>';
+        const svgZap = '<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>';
+        const svgCheck = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
+        const svgSparkles = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"></path></svg>';
         return `
       <div
         data-package-id="${pkg.id}"
+        class="generic-package-card"
         style="
           position: relative;
           display: flex;
           flex-direction: column;
-          justify-content: center;
           align-items: center;
-          gap: 48px;
-          border-radius: 16px;
-          border: 1px solid rgba(255, 255, 255, 0.1);
-          background: #000000;
-          padding: 80px 60px;
           text-align: center;
-          cursor: pointer;
-          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
           width: 100%;
-          height: 100%;
+          max-width: 384px;
+          min-width: 340px;
+          margin: 0 auto;
           box-sizing: border-box;
+          border-radius: 24px;
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          background: #171717;
+          padding: 40px 32px 32px;
+          overflow: hidden;
         "
-        onmouseover="this.style.borderColor='rgba(255, 255, 255, 0.2)';"
-        onmouseout="this.style.borderColor='rgba(255, 255, 255, 0.1)';"
       >
-        <!-- Package title - top center of card -->
-        ${packageTitle ? `
-          <div style="
-            position: absolute;
-            top: 32px;
-            left: 50%;
-            transform: translateX(-50%);
-            font-size: 44px;
-            line-height: 1;
-            font-weight: 400;
-            color: white;
-            letter-spacing: -0.02em;
-            white-space: nowrap;
-          ">
-            ${packageTitle}
-          </div>
-        ` : ''}
+        <!-- Background Ambient Glow (参考图中部绿色光晕) -->
+        <div style="
+          position: absolute;
+          bottom: 25%;
+          right: 25%;
+          width: 240px;
+          height: 240px;
+          background: rgba(6, 182, 212, 0.1);
+          border-radius: 50%;
+          filter: blur(100px);
+          pointer-events: none;
+          z-index: 0;
+        "></div>
 
-        <!-- Close button - top right -->
+        <!-- Close button (右上角圆形按钮) -->
         <button
+          type="button"
           onclick="this.closest('[data-package-id]').dispatchEvent(new CustomEvent('close-modal', { bubbles: true }));"
           style="
             position: absolute;
-            top: 24px;
-            right: 24px;
-            width: 32px;
-            height: 32px;
+            top: 16px;
+            right: 16px;
+            width: 34px;
+            height: 34px;
             border-radius: 50%;
             border: none;
-            background: rgba(255, 255, 255, 0.1);
-            color: rgba(255, 255, 255, 0.7);
+            background: rgba(255, 255, 255, 0.05);
+            color: rgba(255, 255, 255, 0.4);
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 20px;
-            line-height: 1;
             transition: all 0.2s;
-            z-index: 100;
+            z-index: 10;
           "
-          onmouseover="this.style.background='rgba(255, 255, 255, 0.2)'; this.style.color='white';"
-          onmouseout="this.style.background='rgba(255, 255, 255, 0.1)'; this.style.color='rgba(255, 255, 255, 0.7)';"
-        >
-          ×
-        </button>
+          onmouseover="this.style.background='rgba(255,255,255,0.1)'; this.style.color='#FFFFFF';"
+          onmouseout="this.style.background='rgba(255,255,255,0.05)'; this.style.color='rgba(255,255,255,0.4)';"
+        >${svgClose}</button>
 
-        <!-- Discount tag - below close button -->
-        ${hasBonusPercentage ? `
-          <div style="
-            position: absolute;
-            top: 92px;
-            right: 30px;
-            background: linear-gradient(135deg, #fa8c42 0%, #ff5a00 100%);
-            color: white;
-            padding: 8px 16px;
-            border-radius: 8px;
-            font-size: 20px;
-            font-weight: 800;
-            box-shadow: 0 4px 16px rgba(255, 90, 0, 0.5);
-            white-space: nowrap;
-            z-index: 10;
-          ">
-            +${pkg.bonus_percentage}%
+        <div style="position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center;">
+          <!-- Value badge: +N% EXTRA VALUE (深色底, 金色边框) -->
+          ${hasBonusPercentage ? `
+            <div style="
+              display: inline-flex;
+              align-items: center;
+              gap: 6px;
+              margin-bottom: 24px;
+              padding: 4px 12px;
+              border-radius: 9999px;
+              background: rgba(249, 176, 22, 0.1);
+              border: 1px solid rgba(249, 176, 22, 0.2);
+              color: #F9B016;
+              font-size: 12px;
+              font-weight: 700;
+              box-shadow: 0 0 15px rgba(249, 176, 22, 0.1);
+            ">
+              <span style="display:inline-flex;">${svgZap}</span>
+              <span>+${pkg.bonus_percentage}% EXTRA VALUE</span>
+            </div>
+          ` : '<div style="height:16px;"></div>'}
+
+          <!-- Main credits: 巨大白字 + CREDITS -->
+          <div style="margin-bottom: 0;">
+            <span style="
+              display: block;
+              font-size: 60px;
+              line-height: 1;
+              font-weight: 800;
+              color: #FFFFFF;
+              letter-spacing: -0.05em;
+              filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));
+            ">${baseNum}</span>
+            <span style="
+              display: block;
+              margin-top: 4px;
+              font-size: 14px;
+              font-weight: 500;
+              color: #A3A3A3;
+              letter-spacing: 0.1em;
+              text-transform: uppercase;
+            ">CREDITS</span>
           </div>
-        ` : ''}
 
-        <!-- Credits display area - ensure no line break -->
-        <div style="
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          gap: 0;
-          width: 100%;
-          margin-top: 60px;
-        ">
+          <!-- Separator: 渐变线 + 加号 (缩短线条长度) -->
           <div style="
             display: flex;
-            align-items: baseline;
+            align-items: center;
             justify-content: center;
             gap: 12px;
-            flex-wrap: nowrap;
+            width: 100%;
+            margin: 12px 0;
+            opacity: 0.4;
           ">
-            <!-- Base credits -->
-            <span style="
-              font-size: 80px;
-              line-height: 1;
-              font-weight: 400;
-              color: white;
-              letter-spacing: -0.04em;
-              white-space: nowrap;
-            ">
-              ${this.formatNumber(pkg.base_credits || pkg.credits)}
-            </span>
-
-            <!-- credits text -->
-            <span style="
-              font-size: 52px;
-              line-height: 1;
-              font-weight: 400;
-              color: white;
-              letter-spacing: -0.04em;
-              white-space: nowrap;
-            ">
-              credits
-            </span>
+            <span style="width: 40px; height: 1px; background: linear-gradient(to right, transparent, #FFFFFF);"></span>
+            <span style="color: #FFFFFF; font-size: 18px; font-weight: 300; line-height: 1;">+</span>
+            <span style="width: 40px; height: 1px; background: linear-gradient(to left, transparent, #FFFFFF);"></span>
+          </div>
 
-            <!-- Bonus credits -->
-            ${hasBonus ? `
+          <!-- Bonus credits: 绿色数字 + BONUS CREDITS -->
+          ${hasBonus ? `
+            <div style="margin-bottom: 32px; position: relative;">
+              <div style="position: absolute; inset: -16px; background: rgba(34, 197, 94, 0.1); filter: blur(20px); border-radius: 50%;"></div>
               <span style="
-                font-size: 52px;
+                display: block;
+                position: relative;
+                font-size: 36px;
                 line-height: 1;
-                font-weight: 400;
-                color: #00ff88;
-                letter-spacing: -0.04em;
-                white-space: nowrap;
-              ">
-                +${this.formatNumber(pkg.bonus_credits)} bonus
-              </span>
-            ` : ''}
+                font-weight: 700;
+                color: transparent;
+                background: linear-gradient(to bottom, #86EFAC, #22C55E);
+                -webkit-background-clip: text;
+                background-clip: text;
+              ">${bonusNum}</span>
+              <div style="display:inline-flex;position: relative;align-items:center;gap:6px;margin-top:4px;">
+                <span style="display:inline-flex;color:#4ADE80;">${svgSparkles}</span>
+                <span style="font-size:14px;font-weight:600;color:#4ADE80;letter-spacing:0.05em;text-transform:uppercase;">Bonus Credits</span>
+              </div>
+            </div>
+          ` : '<div style="height:32px;"></div>'}
+
+          <!-- Validity badge (深色小胶囊) -->
+          <div style="
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            margin-bottom: 32px;
+            padding: 6px 12px;
+            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.05);
+            color: #737373;
+            font-size: 12px;
+          ">
+            <span style="display:inline-flex;">${svgCheck}</span>
+            <span>Valid for all platform products</span>
           </div>
-        </div>
 
-        <!-- Subtitle - Valid for all platform products -->
-        <div style="
-          font-size: 22px;
-          line-height: 1.4;
-          font-weight: 300;
-          color: rgba(255, 255, 255, 0.75);
-          letter-spacing: -0.015em;
-        ">
-          Valid for all platform products
-        </div>
+          <!-- CTA Button (渐变大按钮, 右侧带价格深色块) -->
+          <button
+            data-package-button="${pkg.id}"
+            type="button"
+            style="
+              width: 100%;
+              border: none;
+              border-radius: 16px;
+              padding: 4px 4px 4px 24px;
+              background: linear-gradient(to right, #34D399, #06B6D4);
+              color: #171717;
+              font-size: 18px;
+              font-weight: 700;
+              cursor: pointer;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+              box-sizing: border-box;
+              position: relative;
+              overflow: hidden;
+            "
+            onmouseover="this.style.transform='scale(1.02)';"
+            onmouseout="this.style.transform='scale(1)';"
+            onmousedown="this.style.transform='scale(0.98)';"
+          >
+            <!-- Hover Shine Effect -->
+            <div style="
+              position: absolute;
+              top: 0;
+              left: -100%;
+              height: 100%;
+              width: 100%;
+              background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
+              transform: skewX(-20deg);
+              transition: left 0.5s;
+            " onmouseover="this.style.left='100%'" onmouseout="this.style.left='-100%'"></div>
 
-        <!-- Buy button -->
-        <button
-          data-package-button="${pkg.id}"
-          style="
-            margin-top: 0;
-            width: auto;
-            min-width: 280px;
-            max-width: 400px;
-            border-radius: 50px;
-            border: none;
-            background: linear-gradient(135deg, #00ff88 0%, #00f2fe 100%);
-            padding: 16px 48px;
-            font-size: 20px;
-            font-weight: 600;
-            color: #000000;
-            cursor: pointer;
-            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-            box-shadow: 0 4px 20px rgba(0, 255, 136, 0.35);
-            letter-spacing: 0.01em;
-          "
-          onmouseover="this.style.background='linear-gradient(135deg, #00ff88 0%, #00f2fe 100%)'; this.style.boxShadow='0 6px 28px rgba(0, 255, 136, 0.5)'; this.style.transform='translateY(-2px) scale(1.02)';"
-          onmouseout="this.style.background='linear-gradient(135deg, #00ff88 0%, #00f2fe 100%)'; this.style.boxShadow='0 4px 20px rgba(0, 255, 136, 0.35)'; this.style.transform='translateY(0) scale(1)';"
-        >
-          Buy $ ${pkg.price}
-        </button>
+            <span>Unlock Now</span>
+            <div style="
+              display: flex;
+              align-items: center;
+              gap: 8px;
+              background: rgba(0, 0, 0, 0.2);
+              padding: 10px 10px;
+              border-radius: 8px;
+              backdrop-filter: blur(4px);
+            ">
+              ${originalPrice ? `<span style="font-size:14px;font-weight:700;color:rgba(255, 255, 255, 0.6);text-decoration:line-through;">$${originalPrice}</span>` : ''}
+              <span style="font-size:16px;font-weight:600;color:#FFFFFF;">$${pkg.price}</span>
+            </div>
+          </button>
+        </div>
       </div>
     `;
     }