💳 feat(TopUp): unify payment cards, add header stats, brand icons, and mobile refinements [[memory:5659506]]

- Add RightStatsCard and place it in RechargeCard header
  - Shows current balance, historical spend, and request count
  - Mobile: stacks under title; three metrics split equally (flex-1); vertical dividers hidden on small screens
  - Remove extra margins; small card styling

- RechargeCard
  - Replace redeem code Input icon with Semi UI IconGift
  - Style “Payable amount” number in red and bold; keep same style in confirm modal
  - Always render payment methods as Cards (remove Button variant) with adaptive grid
  - Use brand color icons: SiAlipay (#1677FF), SiWechat (#07C160), SiStripe (#635BFF)
  - Replace Stripe icon with SiStripe
  - Integrate RightStatsCard props; adjust header to flex-col on mobile and flex-row on desktop
  - Hide Banner close button when online top-up is disabled (closeIcon={null})

- InvitationCard
  - Simplify to match RechargeCard’s minimalist slate style
  - Use Card title for “Rewards” and place content directly in body
  - Improve link input and copy button; use Badge dots for bullet points

- TopUp index
  - Remove separate right-column stats card; pass userState and renderQuota to RechargeCard

- Cleanup
  - Lint passes; no functional changes to APIs or business logic

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

@@ -0,0 +1,82 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import {
+  Modal,
+  Typography,
+  Input,
+  InputNumber,
+} from '@douyinfe/semi-ui';
+import { CreditCard } from 'lucide-react';
+
+const TransferModal = ({
+  t,
+  openTransfer,
+  transfer,
+  handleTransferCancel,
+  userState,
+  renderQuota,
+  getQuotaPerUnit,
+  transferAmount,
+  setTransferAmount,
+}) => {
+  return (
+    <Modal
+      title={
+        <div className='flex items-center'>
+          <CreditCard className='mr-2' size={18} />
+          {t('划转邀请额度')}
+        </div>
+      }
+      visible={openTransfer}
+      onOk={transfer}
+      onCancel={handleTransferCancel}
+      maskClosable={false}
+      centered
+    >
+      <div className='space-y-4'>
+        <div>
+          <Typography.Text strong className='block mb-2'>
+            {t('可用邀请额度')}
+          </Typography.Text>
+          <Input
+            value={renderQuota(userState?.user?.aff_quota)}
+            disabled
+            className='!rounded-lg'
+          />
+        </div>
+        <div>
+          <Typography.Text strong className='block mb-2'>
+            {t('划转额度')} · {t('最低') + renderQuota(getQuotaPerUnit())}
+          </Typography.Text>
+          <InputNumber
+            min={getQuotaPerUnit()}
+            max={userState?.user?.aff_quota || 0}
+            value={transferAmount}
+            onChange={(value) => setTransferAmount(value)}
+            className='w-full !rounded-lg'
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default TransferModal;