✨ style(Account UX): resilient binding layout, copyable popovers, pastel header, and custom pay colors

- AccountManagement.js
  - Prevent action button from shifting when account IDs are long by adding gap, min-w-0, and flex-shrink-0; keep buttons in a fixed position.
  - Add copyable Popover for account identifiers (email/GitHub/OIDC/Telegram/LinuxDO) using Typography.Paragraph with copyable; reveal full text on hover.
  - Ensure ellipsis works by rendering the popover trigger as `block max-w-full truncate`.
  - Import Popover and wire up `renderAccountInfo` across all binding rows.

- UserInfoHeader.js
  - Apply unified `with-pastel-balls` background to match PricingVendorIntro.
  - Remove legacy absolute-positioned circles and top gradient bar to avoid visual overlap.

- RechargeCard.jsx
  - Colorize non-Alipay/WeChat/Stripe payment icons using backend `pay_methods[].color`; fallback to `var(--semi-color-text-2)`.
  - Add `showClear` to the redemption code input for quicker clearing.

Notes:
- No linter errors introduced.
- i18n strings and behavior remain unchanged except for improved UX and visual consistency.

web/src/components/topup/InvitationCard.jsx

@@ -54,7 +54,7 @@ const InvitationCard = ({
       {/* 收益展示区域 */}
       <div className='space-y-4'>
         {/* 主要收益卡片 - 待使用收益 */}
-        <Card className='!rounded-xl bg-slate-50 dark:bg-slate-800'>
+        <Card className='!rounded-xl with-pastel-balls'>
           <div className='flex justify-between items-center mb-3'>
             <div className="flex items-center">
               <TrendingUp size={16} className="mr-2 text-slate-600 dark:text-slate-300" />
@@ -75,7 +75,6 @@ const InvitationCard = ({
           <div className='text-2xl sm:text-3xl font-bold text-slate-900 dark:text-slate-100 mb-1'>
             {renderQuota(userState?.user?.aff_quota || 0)}
           </div>
-          <div className="text-xs text-slate-500 dark:text-slate-400">{t('可随时划转到账户余额')}</div>
         </Card>
 
         {/* 统计数据网格 */}
@@ -88,7 +87,6 @@ const InvitationCard = ({
             <div className='text-xl font-semibold text-slate-900 dark:text-slate-100'>
               {renderQuota(userState?.user?.aff_history_quota || 0)}
             </div>
-            <div className="text-xs text-slate-500 dark:text-slate-400 mt-1">{t('累计获得')}</div>
           </Card>
 
           <Card className='!rounded-xl bg-slate-50 dark:bg-slate-800'>
@@ -99,7 +97,6 @@ const InvitationCard = ({
             <div className='text-xl font-semibold text-slate-900 dark:text-slate-100 flex items-center'>
               {userState?.user?.aff_count || 0} {t('人')}
             </div>
-            <div className="text-xs text-slate-500 dark:text-slate-400 mt-1">{t('成功邀请')}</div>
           </Card>
         </div>
 
@@ -126,7 +123,7 @@ const InvitationCard = ({
 
         {/* 奖励说明 */}
         <Card
-          className='!rounded-xl'
+          className='!rounded-xl with-pastel-balls-warm'
           title={
             <Text strong className='text-slate-700'>
               {t('奖励说明')}

web/src/components/topup/RechargeCard.jsx

@@ -224,7 +224,7 @@ const RechargeCard = ({
                                   ) : payMethod.type === 'stripe' ? (
                                     <SiStripe size={24} color="#635BFF" />
                                   ) : (
-                                    <CreditCard size={24} className='text-slate-500' />
+                                    <CreditCard size={24} color={payMethod.color || 'var(--semi-color-text-2)'} />
                                   )}
                                 </div>
                                 <div className='text-sm font-medium text-slate-700 dark:text-slate-200'>{payMethod.name}</div>
@@ -269,6 +269,7 @@ const RechargeCard = ({
                 onChange={(value) => setRedemptionCode(value)}
                 className='!rounded-lg'
                 prefix={<IconGift />}
+                showClear
               />
 
               <div className='flex flex-col sm:flex-row gap-2'>

web/src/components/topup/modals/PaymentConfirmModal.jsx

@@ -24,7 +24,7 @@ import {
   Card,
   Skeleton,
 } from '@douyinfe/semi-ui';
-import { SiAlipay, SiWechat } from 'react-icons/si';
+import { SiAlipay, SiWechat, SiStripe } from 'react-icons/si';
 import { CreditCard } from 'lucide-react';
 
 const { Text } = Typography;
@@ -86,11 +86,13 @@ const PaymentConfirmModal = ({
                     return (
                       <>
                         {payMethod.type === 'zfb' ? (
-                          <SiAlipay className='mr-2' size={16} />
+                          <SiAlipay className='mr-2' size={16} color="#1677FF" />
                         ) : payMethod.type === 'wx' ? (
-                          <SiWechat className='mr-2' size={16} />
+                          <SiWechat className='mr-2' size={16} color="#07C160" />
+                        ) : payMethod.type === 'stripe' ? (
+                          <SiStripe className='mr-2' size={16} color="#635BFF" />
                         ) : (
-                          <CreditCard className='mr-2' size={16} />
+                          <CreditCard className='mr-2' size={16} color={payMethod.color || 'var(--semi-color-text-2)'} />
                         )}
                         <Text className='text-slate-900 dark:text-slate-100'>{payMethod.name}</Text>
                       </>
@@ -100,21 +102,21 @@ const PaymentConfirmModal = ({
                     if (payWay === 'zfb') {
                       return (
                         <>
-                          <SiAlipay className='mr-2' size={16} />
+                          <SiAlipay className='mr-2' size={16} color="#1677FF" />
                           <Text className='text-slate-900 dark:text-slate-100'>{t('支付宝')}</Text>
                         </>
                       );
                     } else if (payWay === 'stripe') {
                       return (
                         <>
-                          <CreditCard className='mr-2' size={16} />
+                          <SiStripe className='mr-2' size={16} color="#635BFF" />
                           <Text className='text-slate-900 dark:text-slate-100'>Stripe</Text>
                         </>
                       );
                     } else {
                       return (
                         <>
-                          <SiWechat className='mr-2' size={16} />
+                          <SiWechat className='mr-2' size={16} color="#07C160" />
                           <Text className='text-slate-900 dark:text-slate-100'>{t('微信')}</Text>
                         </>
                       );