<template>
  <div class="account-management-page">
    <div class="account-management-container">
      <!-- 标题 -->
      <div class="section-title">
        <div class="title-bar"></div>
        <div class="title-text">账号管理</div>
      </div>
      
      <!-- 主要内容区域 -->
      <div class="content-area">
        <!-- 顶部导航栏 -->
        <div class="nav-tabs">
          <div class="nav-item" :class="{ active: currentTab === 'real-name' }" @click="switchTab('real-name')">实名认证</div>
          <div class="nav-item" :class="{ active: currentTab === 'account-binding' }" @click="switchTab('account-binding')">账号绑定</div>
        <div class="nav-item" :class="{ active: currentTab === 'withdrawal' }" @click="switchTab('withdrawal')">账户提现</div>

        </div>

        <!-- 实名认证内容 -->
        <div v-if="currentTab === 'real-name'" class="tab-content">
          <div class="form-container" :class="{ 'form-verified': isVerified }">
            <!-- 认证印章 -->
            <div v-if="isVerified" class="verification-stamp">
              <img src="../../assets/Authentication-icon/认证成功.svg" alt="认证成功" class="stamp-icon">
            </div>
            
            <div class="form-item">
              <label class="form-label">真实姓名:</label>
              <input 
                v-model="displayData.realUsername"
                type="text" 
                class="form-input" 
                placeholder="请输入您的姓名"
                :disabled="isVerified || isPending"
                style="color: black;"
              />
            </div>
            <div class="form-item">
              <label class="form-label">证件号码:</label>
              <input 
                v-model="displayData.idNumber"
                type="text" 
                class="form-input" 
                placeholder="请输入证件号码"
                :disabled="isVerified || isPending"
                style="color: black;"
              />
            </div>
            
            <!-- 待审核状态显示 -->
            <div v-if="isPending" class="verification-status">
              <div class="status-pending">
                <span class="status-text">实名认证审核中，请耐心等待</span>
              </div>
            </div>
            
            <!-- 提交按钮 -->
            <div class="submit-container">
              <button 
                v-if="isUnverified"
                class="submit-btn" 
                @click="handleSubmit"
                :disabled="submitting"
              >
                {{ submitting ? '提交中...' : '提交认证' }}
              </button>
              <div v-else-if="isPending" class="pending-notice">
                您的实名认证信息正在审核中，请耐心等待
              </div>
            </div>
          </div>
        </div>

        <!-- 账号绑定内容 -->
        <div v-if="currentTab === 'account-binding'" class="tab-content">
          <div class="binding-container">
            <!-- 手机号绑定 -->
            <div class="binding-item">
              <div class="binding-info">
                <div class="binding-icon phone-icon">
                  <img src="../../assets/manager_icon/手机.svg" alt="" class="icon-placeholder">
                </div>
                <div class="binding-text">
                  <div class="binding-title">手机号绑定</div>
                  <div class="binding-status" v-if="userInfo.phone || userInfo.mobile || userInfo.phoneNumber">
                    {{ maskPhone(userInfo.phone || userInfo.mobile || userInfo.phoneNumber) }}
                  </div>
                </div>
              </div>
              <el-tag 
                v-if="userInfo.phone || userInfo.mobile || userInfo.phoneNumber"
                type="success" 
                size="large"
                class="binding-status-tag"
              >
                已绑定
              </el-tag>
              <el-button 
                v-else
                type="primary" 
                size="small"
                @click="handlePhoneBinding"
                class="binding-btn"
              >
                去绑定
              </el-button>
            </div>

            <!-- 微信绑定 -->
            <div class="binding-item">
              <div class="binding-info">
                <div class="binding-icon wechat-icon">
                  <svg t="1756367768293" class="icon-placeholder" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4490" width="200" height="200"><path d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z" fill="#28C445" p-id="4491"></path><path d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z" fill="#28C445" p-id="4492"></path></svg>
                </div>
                <div class="binding-text">
                  <div class="binding-title">微信绑定</div>
                  <div class="binding-status">
                    {{ userInfo.wechatBound ? '已绑定微信账号' : '绑定微信，享受更多便利' }}
                  </div>
                </div>
              </div>
              <el-tag 
                v-if="userInfo.wechatBound"
                type="success" 
                size="large"
                class="binding-status-tag"
              >
                已绑定
              </el-tag>
              <el-button 
                v-else
                type="primary" 
                size="small"
                @click="handleWechatBinding"
                class="binding-btn"
              >
                去绑定
              </el-button>
            </div>


          </div>
        </div>

        <!-- 账户提现内容 -->
        <div v-if="currentTab === 'withdrawal'" class="tab-content">
          <div class="account-withdrawal-page">
            <div class="account-withdrawal-container">
              <!-- 主要内容区域 -->
              <div class="main-content-withdrawal">
                <!-- 账户余额卡片 -->
                <div class="balance-card-new">
                  <div class="balance-header-new">
                    <h2 class="balance-title-new">账户余额</h2>
                    <div class="balance-actions-new">
                      <el-dropdown trigger="hover" popper-class="balance-dropdown-popper">
                        <el-button 
                          size="small"
                          class="action-btn-new"
                        >
                          明细<el-icon class="el-icon--right"><ArrowDown /></el-icon>
                        </el-button>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item @click="showBalanceDetail" :icon="Document">余额明细</el-dropdown-item>
                            <el-dropdown-item @click="showWithdrawRecords" :icon="List">提现记录</el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                      <el-button 
                        size="small"
                        class="action-btn-new withdraw-btn-new" 
                        @click="handleWithdraw"
                        :icon="Money"
                      >
                        提现
                      </el-button>
                    </div>
                  </div>
                  
                  <div class="balance-main-new">
                    <div class="balance-amount-new">
                      <div class="wallet-icon-new">
                        <img src="../../assets/account-mananger/余额.svg" alt="钱包图标" class="wallet-icon-img-new" />
                      </div>
                      <div class="amount-info-new">
                        <div class="amount-label-new">可提现金额（元）</div>
                        <div class="amount-value-new" :class="{ 'negative': userBalance.availableBalance < 0 }">
                          ¥{{ formatAmount(userBalance.availableBalance || 0) }}
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <!-- 统计卡片组 -->
                  <div class="stats-grid-new">
                    <div class="stat-item-new">
                      <div class="stat-icon-new">
                        <img src="../../assets/account-mananger/总金额.svg" alt="总余额图标" class="stat-icon-img-new" />
                      </div>
                      <div class="stat-info-new">
                        <div class="stat-label-new">总余额（元）</div>
                        <div class="stat-value-new">¥{{ formatAmount(userBalance.balance || 0) }}</div>
                      </div>
                    </div>
                    <div class="stat-item-new">
                      <div class="stat-icon-new">
                        <img src="../../assets/account-mananger/审核.svg" alt="审核中图标" class="stat-icon-img-new" />
                      </div>
                      <div class="stat-info-new">
                        <div class="stat-label-new">审核中（元）</div>
                        <div class="stat-value-new">¥{{ formatAmount(userBalance.frozenAmount || 0) }}</div>
                      </div>
                    </div>
                    <div class="stat-item-new">
                      <div class="stat-icon-new">
                        <img src="../../assets/account-mananger/昨日.svg" alt="昨日收益图标" class="stat-icon-img-new" />
                      </div>
                      <div class="stat-info-new">
                        <div class="stat-label-new">昨日收益（元）</div>
                        <div class="stat-value-new">¥{{ formatAmount(userBalance.yesterdayIncome || 0) }}</div>
                      </div>
                    </div>
                    <div class="stat-item-new">
                      <div class="stat-icon-new">
                        <img src="../../assets/account-mananger/累计svg.svg" alt="累计收益图标" class="stat-icon-img-new" />
                      </div>
                      <div class="stat-info-new">
                        <div class="stat-label-new">累计收益（元）</div>
                        <div class="stat-value-new">¥{{ formatAmount(userBalance.totalIncome || 0) }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                
                <!-- 收益卡片组 -->
                <div class="revenue-cards-new">
                  <div class="revenue-card-new content-revenue-new">
                    <div class="revenue-header-new">
                      <h3 class="revenue-title-new">内容收益</h3>
                    </div>
                    <div class="revenue-main-new">
                      <div class="revenue-icon-new">
                        <img src="../../assets/account-mananger/内容.svg" alt="内容收益图标" class="revenue-icon-img-new" />
                      </div>
                      <div class="revenue-info-new">
                        <div class="revenue-amount-new">¥{{ formatAmount(incomeDetail.contentIncomes?.reduce((sum, item) => sum + item.incomeAmount, 0) || 0) }}</div>
                        <div class="revenue-desc-new">工作流、视频等创作收益</div>
                      </div>
                    </div>
                  </div>
                  
                  <div class="revenue-card-new promotion-revenue-new">
                    <div class="revenue-header-new">
                      <h3 class="revenue-title-new">推广收益</h3>
                    </div>
                    <div class="revenue-main-new">
                      <div class="revenue-icon-new">
                        <img src="../../assets/account-mananger/推广.svg" alt="推广收益图标" class="revenue-icon-img-new" />
                      </div>
                      <div class="revenue-info-new">
                        <div class="revenue-amount-new">¥{{ formatAmount(incomeDetail.promotionIncome || 0) }}</div>
                        <div class="revenue-desc-new">邀请好友获得的收益</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

                <!-- 提现记录内容 -->
        <div v-if="currentTab === 'withdraw-records'" class="tab-content">
          <div class="withdraw-records-container">
            <div class="records-header">
              <h3 class="records-title">提现记录</h3>
              <div class="header-actions">
                <el-button 
                  type="primary" 
                  size="small"
                  @click="switchTab('withdrawal')"
                  :icon="ArrowLeft"
                  style="background: black;color: white; border-color: black;"
                >
                  返回
                </el-button>
                <el-button 
                  type="primary" 
                  size="small"
                  @click="fetchWithdrawList(1)"
                  :loading="withdrawLoading"
                  style="background: black;color: white; border-color: black;"
                >
                  刷新
                </el-button>
              </div>
            </div>
            
            <div v-if="withdrawLoading" class="loading-container">
              <el-icon class="is-loading"><Loading /></el-icon>
              <span>加载中...</span>
            </div>
            
            <div v-else-if="withdrawList.length === 0" class="empty-container">
              <el-icon class="empty-icon"><Document /></el-icon>
              <span>暂无提现记录</span>
            </div>
            
            <div v-else class="table-container">
              <el-table 
                :data="withdrawList" 
                style="width: 100%"
                :header-cell-style="{ background: '#f8f9fa', color: '#333', fontWeight: '600' }"
                :cell-style="{ color: '#333' }"
                stripe
                class="withdraw-table"
                border
                fit
              >
                <el-table-column prop="id" label="ID" min-width="60">
                  <template #default="scope">
                    <span class="id-cell">{{ String(scope.row.id) }}</span>
                  </template>
                </el-table-column>
                
                <el-table-column label="提现金额" min-width="100">
                  <template #default="scope">
                    <span class="amount-cell">¥{{ formatAmount(scope.row.amount) }}</span>
                  </template>
                </el-table-column>
                
                <el-table-column label="提现方式" min-width="100">
                  <template #default="scope">
                    <span class="account-type">{{ formatAccountType(scope.row.accountType) }}</span>
                  </template>
                </el-table-column>
                
                <el-table-column prop="account" label="收款账户" min-width="130" />
                
                <el-table-column prop="accountName" label="收款人" min-width="100" />
                
                <el-table-column label="状态" min-width="80">
                  <template #default="scope">
                    <el-tag 
                      :type="formatWithdrawStatus(scope.row.status).color"
                      size="small"
                    >
                      {{ formatWithdrawStatus(scope.row.status).text }}
                    </el-tag>
                  </template>
                </el-table-column>
                
                <el-table-column label="申请时间" min-width="150">
                  <template #default="scope">
                    <span class="time-cell">{{ formatTime(scope.row.createTime) }}</span>
                  </template>
                </el-table-column>
                
                <el-table-column label="审核时间" min-width="150">
                  <template #default="scope">
                    <span class="time-cell">{{ formatTime(scope.row.reviewedAt) }}</span>
                  </template>
                </el-table-column>
                
                <el-table-column prop="reason" label="备注" min-width="120">
                  <template #default="scope">
                    <span class="reason-cell">{{ scope.row.reason || '-' }}</span>
                  </template>
                </el-table-column>
              </el-table>
              
              <!-- 分页 -->
              <div v-if="withdrawPagination.total > 0" class="pagination-container">
                <el-pagination
                  v-model:current-page="withdrawPagination.page"
                  v-model:page-size="withdrawPagination.size"
                  :total="withdrawPagination.total"
                  :page-sizes="[10, 20, 50]"
                  layout="total, sizes, prev, pager, next"
                  @size-change="(size) => { withdrawPagination.size = size; fetchWithdrawList(1) }"
                  @current-change="fetchWithdrawList"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>



    <!-- 提现弹窗 -->
    <div v-if="showWithdrawDialog" class="withdraw-modal-overlay" @click="closeWithdrawModal">
      <div class="withdraw-modal-container" @click.stop>
        <div class="withdraw-modal-header">
          <h3 class="withdraw-modal-title">申请提现</h3>
          <button class="withdraw-modal-close" @click="closeWithdrawModal">×</button>
        </div>
        <div class="withdraw-modal-body">
          <div class="withdraw-form-container">
            <!-- 提现金额 -->
            <div class="withdraw-form-section">
              <label class="withdraw-form-label">提现金额</label>
              <el-input
                v-model="withdrawForm.amount"
                type="number"
                placeholder="请输入提现金额"
                size="large"
                class="withdraw-form-input"
                :min="100"
                :max="userBalance.availableBalance || 0"
              >
                <template #prefix>¥</template>
              </el-input>
              <div class="withdraw-form-tip">
                最低提现金额：¥100，可用余额：¥{{ formatAmount(userBalance.availableBalance || 0) }}
              </div>
            </div>

            <!-- 提现方式 -->
            <div class="withdraw-form-section">
              <label class="withdraw-form-label">提现方式</label>
              <div class="withdraw-method-container">
                <div 
                  class="withdraw-method-option"
                  :class="{ 'active': withdrawForm.accountType === 'alipay' }"
                  @click="withdrawForm.accountType = 'alipay'"
                >
                  <el-icon class="withdraw-method-icon"><Money /></el-icon>
                  <span class="withdraw-method-text">支付宝</span>
                </div>
                <div 
                  class="withdraw-method-option"
                  :class="{ 'active': withdrawForm.accountType === 'bank' }"
                  @click="withdrawForm.accountType = 'bank'"
                >
                  <el-icon class="withdraw-method-icon"><CreditCard /></el-icon>
                  <span class="withdraw-method-text">银行卡</span>
                </div>
              </div>
            </div>

            <!-- 支付宝提现信息 -->
            <div v-if="withdrawForm.accountType === 'alipay'" class="withdraw-form-section">
              <label class="withdraw-form-label">支付宝账号</label>
              <el-input
                v-model="withdrawForm.account"
                placeholder="请输入支付宝账号"
                size="large"
                class="withdraw-form-input"
              />
              <label class="withdraw-form-label">收款人姓名</label>
              <el-input
                v-model="withdrawForm.accountName"
                placeholder="请输入收款人姓名"
                size="large"
                class="withdraw-form-input"
              />
            </div>

            <!-- 银行卡提现信息 -->
            <div v-if="withdrawForm.accountType === 'bank'" class="withdraw-form-section">
              <label class="withdraw-form-label">银行卡号</label>
              <el-input
                v-model="withdrawForm.account"
                placeholder="请输入银行卡号"
                size="large"
                class="withdraw-form-input"
              />
              <label class="withdraw-form-label">收款人姓名</label>
              <el-input
                v-model="withdrawForm.accountName"
                placeholder="请输入收款人姓名"
                size="large"
                class="withdraw-form-input"
              />
              <label class="withdraw-form-label">开户银行</label>
              <el-input
                v-model="withdrawForm.bankName"
                placeholder="请输入开户银行"
                size="large"
                class="withdraw-form-input"
              />
              <label class="withdraw-form-label">开户支行</label>
              <el-input
                v-model="withdrawForm.bankBranch"
                placeholder="请输入开户支行"
                size="large"
                class="withdraw-form-input"
              />
            </div>
          </div>
        </div>
        <div class="withdraw-modal-footer">
          <button class="withdraw-modal-btn" @click="handleSubmitWithdraw" :disabled="withdrawSubmitting">
            {{ withdrawSubmitting ? '提交中...' : '确认提现' }}
          </button>
        </div>
      </div>
    </div>

    <!-- 余额明细弹窗 -->
    <div v-if="showBalanceDetailDialog" class="modal-overlay" @click="closeBalanceDetailModal">
      <div class="modal-container balance-detail-modal" @click.stop>
        <div class="modal-content">
          <div class="modal-header">
            <h3 class="modal-title">余额明细</h3>
            <button class="modal-close" @click="closeBalanceDetailModal">×</button>
          </div>
          <div class="modal-body">
            <div class="balance-detail-content">
              <!-- 余额概览 -->
              <div class="detail-section">
                <h4 class="section-title">余额概览</h4>
                <div class="balance-summary">
                  <div class="summary-item">
                    <span class="summary-label">总余额</span>
                    <span class="summary-value">¥{{ formatAmount(userBalance.balance || 0) }}</span>
                  </div>
                  <div class="summary-item">
                    <span class="summary-label">可提现余额</span>
                    <span class="summary-value">¥{{ formatAmount(userBalance.availableBalance || 0) }}</span>
                  </div>
                  <div class="summary-item">
                    <span class="summary-label">审核中</span>
                    <span class="summary-value">¥{{ formatAmount(userBalance.frozenAmount || 0) }}</span>
                  </div>
                  <div class="summary-item">
                    <span class="summary-label">总收益</span>
                    <span class="summary-value">¥{{ formatAmount(incomeDetail.totalIncome || 0) }}</span>
                  </div>
                </div>
              </div>

              <!-- 收益明细 -->
              <div class="detail-section">
                <h4 class="section-title">收益明细</h4>
                
                <!-- 内容收益表格 -->
                <div class="income-section">
                  <div class="income-section-header">
                    <el-icon class="income-icon"><Document /></el-icon>
                    <span class="income-title">内容收益</span>
                    <span class="income-amount">¥{{ formatAmount(incomeDetail.contentIncomes?.reduce((sum, item) => sum + item.incomeAmount, 0) || 0) }}</span>
                  </div>
                  <div v-if="incomeDetail.contentIncomes && incomeDetail.contentIncomes.length > 0" class="table-container">
                    <el-table 
                      :data="incomeDetail.contentIncomes" 
                      style="width: 100%"
                      :header-cell-style="{ background: '#f8f9fa', color: '#333', fontWeight: '600' }"
                      :cell-style="{ color: '#333' }"
                      stripe
                      border
                      size="small"
                    >
                      <el-table-column prop="contentName" label="内容名称" min-width="120" />
                      <el-table-column label="内容类型" min-width="80" align="center">
                        <template #default="scope">
                          <el-tag size="small" type="info">{{ scope.row.contentTypeName || scope.row.contentType || '未知' }}</el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column label="收益金额" min-width="90" align="right">
                        <template #default="scope">
                          <span class="amount-cell">¥{{ formatAmount(scope.row.incomeAmount) }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="收益时间" min-width="140">
                        <template #default="scope">
                          <span class="time-cell">{{ formatTime(scope.row.incomeTime || scope.row.createTime) }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="description" label="收益描述" min-width="200" show-overflow-tooltip>
                        <template #default="scope">
                          <span class="description-cell">{{ scope.row.description || '-' }}</span>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <div v-else class="no-data-container">
                    <el-icon class="no-data-icon"><Document /></el-icon>
                    <span class="no-data-text">暂无内容收益</span>
                  </div>
                </div>
                
                <!-- 推广收益表格 -->
                <div class="income-section">
                  <div class="income-section-header">
                    <el-icon class="income-icon"><User /></el-icon>
                    <span class="income-title">推广收益</span>
                    <span class="income-amount">¥{{ formatAmount(incomeDetail.promotionIncome || 0) }}</span>
                  </div>
                  <div v-if="incomeDetail.promotionIncomes && incomeDetail.promotionIncomes.length > 0" class="table-container">
                    <el-table 
                      :data="incomeDetail.promotionIncomes" 
                      style="width: 100%"
                      :header-cell-style="{ background: '#f8f9fa', color: '#333', fontWeight: '600' }"
                      :cell-style="{ color: '#333' }"
                      stripe
                      border
                      size="small"
                    >
                      <el-table-column prop="fanUsername" label="推广用户" min-width="100" />
                      <el-table-column label="等级" min-width="70" align="center">
                        <template #default="scope">
                          <el-tag size="small" :type="scope.row.commissionLevel >= 2 ? 'success' : 'primary'">
                            {{ scope.row.levelName || `Lv${scope.row.commissionLevel}` }}
                          </el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column prop="orderNo" label="订单号" min-width="140" />
                      <el-table-column label="订单金额" min-width="90" align="right">
                        <template #default="scope">
                          <span class="amount-cell">¥{{ formatAmount(scope.row.orderAmount) }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="佣金比例" min-width="80" align="center">
                        <template #default="scope">
                          <span class="rate-cell">{{ (scope.row.commissionRate * 100).toFixed(1) }}%</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="佣金金额" min-width="90" align="right">
                        <template #default="scope">
                          <span class="commission-amount">¥{{ formatAmount(scope.row.commissionAmount) }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="佣金时间" min-width="130">
                        <template #default="scope">
                          <span class="time-cell">{{ formatTime(scope.row.commissionTime) }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="结算时间" min-width="130">
                        <template #default="scope">
                          <span class="time-cell">{{ formatTime(scope.row.settledAt) }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="description" label="收益描述" min-width="220" show-overflow-tooltip>
                        <template #default="scope">
                          <span class="description-cell">{{ scope.row.description || '-' }}</span>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <div v-else class="no-data-container">
                    <el-icon class="no-data-icon"><User /></el-icon>
                    <span class="no-data-text">暂无推广收益</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 手机号绑定弹窗 -->
    <PhoneBindModal 
      :visible="showPhoneBindModal"
      @close="handlePhoneBindClose"
      @success="handlePhoneBindSuccess"
    />

    <!-- 微信绑定弹窗 -->
    <WechatBindModal 
      :visible="showWechatBindModal"
      @close="handleWechatBindClose"
      @success="handleWechatBindSuccess"
    />

  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, ElTag, ElButton, ElIcon, ElPagination, ElTable, ElTableColumn, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
import { Loading, Money, Document, User, List, ArrowLeft, CreditCard, ArrowDown } from '@element-plus/icons-vue'
import { getRealIdentity, updateRealIdentity, getCurrentUser, getWithdrawList, getUserBalance, getBalanceIncomeDetail, submitWithdraw } from '../../api/user'
import { handleAuthFailure } from '../../utils/auth'
import PhoneBindModal from '../../components/PhoneBindModal.vue'
import WechatBindModal from '../../components/WechatBindModal.vue'

// 定义emit
const emit = defineEmits([])

const router = useRouter()



// 当前选中的标签页
const currentTab = ref('real-name')

// 用户信息
const userInfo = ref({})

// 用户余额信息
const userBalance = ref({})

// 余额增加明细
const incomeDetail = ref({
  promotionIncome: 0,
  promotionIncomes: [],
  contentIncomes: [],
  totalIncome: 0
})

// 提现列表数据
const withdrawList = ref([])
const withdrawLoading = ref(false)
const withdrawPagination = ref({
  page: 1,
  size: 10,
  total: 0
})

// 表单数据（原始数据）
const formData = ref({
  realUsername: '',
  idNumber: ''
})

// 显示数据（脱敏后的数据）
const displayData = ref({
  realUsername: '',
  idNumber: ''
})



// 认证状态原始值
const verificationStatus = ref(null) // null: 未认证, 0: 待审核, 1: 已认证

// 计算属性 - 认证状态
const isVerified = computed(() => verificationStatus.value === 1)
const isPending = computed(() => verificationStatus.value === 0)
const isUnverified = computed(() => verificationStatus.value === null)

// 提交状态
const submitting = ref(false)



// 余额明细弹窗状态
const showBalanceDetailDialog = ref(false)

// 提现弹窗状态
const showWithdrawDialog = ref(false)
const withdrawSubmitting = ref(false)

// 提现表单数据
const withdrawForm = ref({
  amount: '',
  accountType: 'alipay',
  account: '',
  accountName: '',
  bankName: '',
  bankBranch: ''
})



// 计算是否有数据
const hasData = computed(() => {
  return formData.value.realUsername || formData.value.idNumber
})

// 切换标签页
const switchTab = (tab) => {
  currentTab.value = tab
}

// 手机号脱敏
const maskPhone = (phone) => {
  if (!phone) return ''
  const phoneStr = String(phone)
  if (phoneStr.length <= 7) return '*'.repeat(phoneStr.length)
  return phoneStr.substring(0, 3) + '*'.repeat(phoneStr.length - 7) + phoneStr.substring(phoneStr.length - 4)
}

// 格式化金额
const formatAmount = (amount) => {
  if (amount === null || amount === undefined) return '0.00'
  return Number(amount).toFixed(2)
}

// 格式化提现状态
const formatWithdrawStatus = (status) => {
  const statusMap = {
    0: { text: '审核中', color: 'warning' },
    1: { text: '审核通过', color: 'success' },
    2: { text: '审核拒绝', color: 'danger' },
    3: { text: '提现成功', color: 'success' },
    4: { text: '提现失败', color: 'danger' }
  }
  return statusMap[status] || { text: '未知状态', color: 'info' }
}

// 格式化账户类型
const formatAccountType = (type) => {
  const typeMap = {
    'wechat': '微信',
    'alipay': '支付宝',
    'bank': '银行卡'
  }
  return typeMap[type] || type || '未知'
}

// 格式化时间
const formatTime = (time) => {
  if (!time) return '-'
  return new Date(time).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}



// 脱敏处理函数
const maskData = (data, type) => {
  if (!data) return ''
  
  if (type === 'name') {
    // 姓名脱敏：保留姓氏，其他用*代替
    if (data.length <= 1) return data
    return data.charAt(0) + '*'.repeat(data.length - 1)
  } else if (type === 'id') {
    // 身份证号脱敏：保留前4位和后4位，中间用*代替
    if (data.length <= 8) return '*'.repeat(data.length)
    return data.substring(0, 4) + '*'.repeat(data.length - 8) + data.substring(data.length - 4)
  }
  
  return data
}

// 更新显示数据
const updateDisplayData = () => {
  if (isVerified.value || isPending.value) {
    // 已认证或待审核，显示脱敏数据
    displayData.value.realUsername = maskData(formData.value.realUsername, 'name')
    displayData.value.idNumber = maskData(formData.value.idNumber, 'id')
  } else {
    // 未认证，显示原始数据供编辑
    displayData.value.realUsername = formData.value.realUsername
    displayData.value.idNumber = formData.value.idNumber
  }
}

// 监听认证状态变化
watch(verificationStatus, () => {
  updateDisplayData()
})

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const response = await getCurrentUser()
    if (response.code === 200) {
      userInfo.value = response.data || {}
      console.log('用户信息获取成功:', userInfo.value)
      console.log('用户ID:', userInfo.value.id)
      console.log('用户ID类型:', typeof userInfo.value.id)
      // 检查用户ID是否为字符串类型，避免JavaScript数字精度问题
      if (userInfo.value.id && typeof userInfo.value.id === 'number' && userInfo.value.id > Number.MAX_SAFE_INTEGER) {
        console.warn('用户ID超过JavaScript安全整数范围，建议使用字符串类型')
      }
    } else if (response.code === 500) {
      // 特别处理500错误
      console.error('Account: /me接口返回500错误:', response.message)
      handleAuthFailure(router, response.message || '用户信息获取失败，请重新登录')
    } else {
      console.error('获取用户信息失败:', response.message)
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    
    // 检查是否是500错误
    if (error.response && error.response.status === 500) {
      console.error('Account: 捕获到/me接口500错误')
      const errorMessage = error.response.data?.message || '用户信息获取失败，请重新登录'
      handleAuthFailure(router, errorMessage)
    } else if (error.response && error.response.status === 401) {
      // 401错误说明认证失败
      console.error('Account: 捕获到401认证错误')
      handleAuthFailure(router, '登录已过期，请重新登录')
    }
  }
}

// 获取用户余额信息
const fetchUserBalance = async () => {
  try {
    const response = await getUserBalance()
    if (response.code === 200) {
      userBalance.value = response.data || {}
      console.log('用户余额信息获取成功:', userBalance.value)
    } else {
      console.error('获取用户余额信息失败:', response.message)
    }
  } catch (error) {
    console.error('获取用户余额信息失败:', error)
  }
}

// 获取余额增加明细
const fetchBalanceIncomeDetail = async () => {
  try {
    const response = await getBalanceIncomeDetail()
    if (response.code === 200) {
      incomeDetail.value = {
        promotionIncome: response.data?.promotionIncome || 0,
        promotionIncomes: response.data?.promotionIncomes || [],
        contentIncomes: response.data?.contentIncomes || [],
        totalIncome: response.data?.totalIncome || 0
      }
      console.log('余额增加明细获取成功:', incomeDetail.value)
    } else {
      console.error('获取余额增加明细失败:', response.message)
    }
  } catch (error) {
    console.error('获取余额增加明细失败:', error)
  }
}



// 获取提现列表
const fetchWithdrawList = async (page = 1) => {
  try {
    withdrawLoading.value = true
    const response = await getWithdrawList({
      page: page,
      size: withdrawPagination.value.size
    })
    
    if (response.code === 200) {
      withdrawList.value = response.data.records || []
      withdrawPagination.value.total = response.data.total || 0
      withdrawPagination.value.page = page
      console.log('提现列表获取成功:', response.data)
    } else {
      console.error('获取提现列表失败:', response.message)
      ElMessage.error('获取提现列表失败')
    }
  } catch (error) {
    console.error('获取提现列表失败:', error)
    ElMessage.error('获取提现列表失败')
  } finally {
    withdrawLoading.value = false
  }
}

// 获取实名认证信息
const fetchRealIdentity = async () => {
  try {
    const response = await getRealIdentity()
    if (response.code === 200 && response.data) {
      formData.value.realUsername = response.data.realUsername || ''
      formData.value.idNumber = response.data.idNumber || ''
      
      // 设置认证状态：结合isVerified和realUsername判断状态
      // 0+有姓名=待审核，0+无姓名=未认证，1=已认证
      if (response.data.isVerified === 1) {
        verificationStatus.value = 1 // 已认证
      } else if (response.data.isVerified === 0 && response.data.realUsername) {
        verificationStatus.value = 0 // 待审核（有提交信息但未通过认证）
      } else {
        verificationStatus.value = null // 未认证（未提交或无有效信息）
      }
      
      // 更新显示数据
      updateDisplayData()
      
      // 如果数据为null且未认证状态，显示提示
      if (!response.data.realUsername && !response.data.idNumber && isUnverified.value) {
        ElMessageBox.alert(
          '您还没有完善实名认证信息，请填写真实姓名和身份证号码进行实名认证。',
          '实名认证提示',
          {
            confirmButtonText: '我知道了',
            type: 'info',
            center: true
          }
        )
      }
    }
  } catch (error) {
    console.error('获取实名认证信息失败:', error)
    ElMessage.error('获取实名认证信息失败')
  }
}

// 验证表单
const validateForm = () => {
  if (!displayData.value.realUsername.trim()) {
    ElMessage.warning('请输入真实姓名')
    return false
  }
  
  if (!displayData.value.idNumber.trim()) {
    ElMessage.warning('请输入证件号码')
    return false
  }
  
  // 简单的身份证号验证
  const idNumberRegex = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
  if (!idNumberRegex.test(displayData.value.idNumber.trim())) {
    ElMessage.warning('请输入正确的身份证号码')
    return false
  }
  
  return true
}

// 提交表单
const handleSubmit = async () => {
  if (!validateForm()) {
    return
  }
  
  try {
    submitting.value = true
    const response = await updateRealIdentity({
      realUsername: displayData.value.realUsername.trim(),
      idNumber: displayData.value.idNumber.trim()
    })
    
    if (response.code === 200) {
      ElMessage.success('实名认证信息提交成功')
      
      // 更新原始数据
      formData.value.realUsername = displayData.value.realUsername.trim()
      formData.value.idNumber = displayData.value.idNumber.trim()
      
      // 重新获取最新信息
      await fetchRealIdentity()
    } else {
      ElMessage.error(response.message || '提交失败')
    }
  } catch (error) {
    console.error('提交实名认证信息失败:', error)
    ElMessage.error('操作失败，请稍后重试')
  } finally {
    submitting.value = false
  }
}

// 手机号绑定弹窗控制
const showPhoneBindModal = ref(false)

// 微信绑定弹窗控制
const showWechatBindModal = ref(false)

// 处理手机号绑定
const handlePhoneBinding = () => {
  if (userInfo.value.phone || userInfo.value.mobile || userInfo.value.phoneNumber) {
    ElMessage.info('手机号已绑定，暂不支持修改')
  } else {
    showPhoneBindModal.value = true
  }
}

// 手机号绑定成功处理
const handlePhoneBindSuccess = (phoneNumber) => {
  // 刷新用户信息
  loadUserInfo()
  ElMessage.success(`手机号 ${phoneNumber} 绑定成功`)
}

// 手机号绑定弹窗关闭
const handlePhoneBindClose = () => {
  showPhoneBindModal.value = false
}

// 处理微信绑定
const handleWechatBinding = () => {
  if (userInfo.value.wechatBound) {
    ElMessage.info('微信已绑定，暂不支持解绑')
  } else {
    showWechatBindModal.value = true
  }
}

// 微信绑定成功处理
const handleWechatBindSuccess = () => {
  // 刷新用户信息
  fetchUserInfo()
  ElMessage.success('微信绑定成功')
}

// 微信绑定弹窗关闭
const handleWechatBindClose = () => {
  showWechatBindModal.value = false
}

// 显示余额明细
const showBalanceDetail = async () => {
  // 刷新最新的余额和收益数据
  await Promise.all([
    fetchUserBalance(),
    fetchBalanceIncomeDetail()
  ])
  showBalanceDetailDialog.value = true
}

// 关闭余额明细弹窗
const closeBalanceDetailModal = () => {
  showBalanceDetailDialog.value = false
}

// 显示提现记录
const showWithdrawRecords = () => {
  switchTab('withdraw-records')
}

// 处理提现
const handleWithdraw = () => {
  // 检查余额是否足够
  if (!userBalance.value.availableBalance || userBalance.value.availableBalance < 100) {
    ElMessage.warning('余额不足，最低提现金额为¥100')
    return
  }
  
  // 检查是否已填写实名认证信息
  if (!formData.value.realUsername || !formData.value.idNumber) {
    ElMessage.warning('请先完善实名认证信息后再申请提现')
    return
  }
  
  // 自动填充用户信息
  if (formData.value.realUsername) {
    withdrawForm.value.accountName = formData.value.realUsername
  }
  
  showWithdrawDialog.value = true
}

// 关闭提现弹窗
const closeWithdrawModal = () => {
  showWithdrawDialog.value = false
  // 重置表单
  withdrawForm.value = {
    amount: '',
    accountType: 'alipay',
    account: '',
    accountName: formData.value.realUsername || '',
    bankName: '',
    bankBranch: ''
  }
}

// 提交提现申请
const handleSubmitWithdraw = async () => {
  // 表单验证
  if (!withdrawForm.value.amount || withdrawForm.value.amount < 100) {
    ElMessage.warning('提现金额不能少于¥100')
    return
  }
  
  if (withdrawForm.value.amount > userBalance.value.availableBalance) {
    ElMessage.warning('提现金额不能超过可用余额')
    return
  }
  
  if (!withdrawForm.value.account) {
    ElMessage.warning('请输入收款账号')
    return
  }
  
  if (!withdrawForm.value.accountName) {
    ElMessage.warning('请输入收款人姓名')
    return
  }
  
  if (withdrawForm.value.accountType === 'bank') {
    if (!withdrawForm.value.bankName) {
      ElMessage.warning('请输入开户银行')
      return
    }
    if (!withdrawForm.value.bankBranch) {
      ElMessage.warning('请输入开户支行')
      return
    }
  }
  
  try {
    withdrawSubmitting.value = true
    
    const submitData = {
      amount: Number(withdrawForm.value.amount),
      accountType: withdrawForm.value.accountType,
      account: withdrawForm.value.account,
      accountName: withdrawForm.value.accountName
    }
    
    // 如果是银行卡，添加银行信息
    if (withdrawForm.value.accountType === 'bank') {
      submitData.bankName = withdrawForm.value.bankName
      submitData.bankBranch = withdrawForm.value.bankBranch
    }
    
    const response = await submitWithdraw(submitData)
    
    if (response.code === 200) {
      ElMessage.success('提现申请提交成功，请等待审核')
      closeWithdrawModal()
      // 刷新余额信息
      await fetchUserBalance()
      // 刷新提现记录
      await fetchWithdrawList(1)
    } else {
      ElMessage.error(response.message || '提现申请提交失败')
    }
  } catch (error) {
    console.error('提现申请提交失败:', error)
    ElMessage.error('提现申请提交失败，请稍后重试')
  } finally {
    withdrawSubmitting.value = false
  }
}






// 组件挂载时获取数据
onMounted(() => {
  fetchUserInfo()
  fetchRealIdentity()
  fetchUserBalance()
  fetchBalanceIncomeDetail()
  fetchWithdrawList()
})
</script>

<style scoped>
.account-management-page {
  width: 100%;
  min-height: 800px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.account-management-container {
  width: 100%;
  box-sizing: border-box;
}

.section-title {
  width: 100%;
  max-width: 312px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 0;
  margin-bottom: 20px;
  text-align: left;
}

.title-bar {
  width: 4px;
  height: 24px;
  background: #333;
  border-radius: 2px;
}

.title-text {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: 0px;
  color: #333;
  margin: 0;
  text-align: left;
  align-self: flex-start;
  flex: 1;
  text-align-last: left;
  -webkit-text-align-last: left;
  display: inline-block;
  text-align: left !important;
}

.content-area {
  padding: 20px 0;
  text-align: left;
}

.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
  gap: 10px;
}

.nav-item {
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 20px;
  transition: all 0.3s;
  color: #333;
  font-family: Arial;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0px;
  border: 1px solid #e4e7ed;
  background: #fff;
  text-align: center;
  white-space: nowrap;
}

@media screen and (min-width: 576px) {
  .nav-item {
    padding: 12px 24px;
    margin-right: 12px;
  }
}

.nav-item.active {
  background: #f5f7fa;
  color: #333;
  font-weight: 500;
  
}

.nav-item:hover:not(.active) {
  color: #333;
  background: #f5f5f5;
  border-color: #d0d0d0;
}

.tab-content {
  min-height: 400px;
}

.form-container {
  width: 100%;
  text-align: left;
  position: relative;
}

.form-container.form-verified {
  position: relative;
}

/* 认证印章样式 */
.verification-stamp {
  position: absolute;
  top: 5px;
  left: 170px;
  z-index: 10;
  pointer-events: none;
  animation: stampAppear 0.6s ease-out;
}

.stamp-icon {
  width: 140px;
  height: 140px;
  filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.3));
  transform: rotate(-15deg);
  opacity: 0.9;
  transition: all 0.3s ease;
}

.stamp-icon:hover {
  transform: rotate(-15deg) scale(1.05);
  opacity: 1;
}

/* 认证成功状态下输入框样式 - 提高权重 */
.form-container.form-verified .form-input {
  border: none !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.form-container.form-verified .form-input:focus {
  border: none !important;
  background: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
}

.form-container.form-verified .form-input:disabled {
  background: #ffffff !important;
  color: #333 !important;
}

/* 印章出现动画 */
@keyframes stampAppear {
  0% {
    transform: scale(0) rotate(-15deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(-15deg);
    opacity: 0.7;
  }
  100% {
    transform: scale(1) rotate(-15deg);
    opacity: 0.9;
  }
}

/* 响应式设计 - 移动端调整印章位置，大小保持不变 */
@media screen and (max-width: 768px) {
  .verification-stamp {
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .stamp-icon {
    width: 90px;
    height: 90px;
  }
  
  /* 移动端印章动画保持居中 */
  @keyframes stampAppear {
    0% {
      transform: translateX(-50%) scale(0) rotate(-15deg);
      opacity: 0;
    }
    50% {
      transform: translateX(-50%) scale(1.2) rotate(-15deg);
      opacity: 0.7;
    }
    100% {
      transform: translateX(-50%) scale(1) rotate(-15deg);
      opacity: 0.9;
    }
  }
}

@media screen and (max-width: 480px) {
  .verification-stamp {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .stamp-icon {
    width: 70px;
    height: 70px;
  }
}

.form-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
  margin-right: 0;
}

.form-label {
  width: 100%;
  text-align: left;
  margin-bottom: 8px;
  color: #606266;
  font-size: 14px;
  font-family: Arial;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0px;
}

.form-input {
  width: 100%;
  max-width: 600px;
  height: 50px;
  padding: 12px 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  font-family: Arial;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0px;
  transition: border-color 0.3s;
  background: #fff;
  box-sizing: border-box;
}

@media screen and (min-width: 768px) {
  .form-item {
    flex-direction: row;
    align-items: center;
  }
  
  .form-label {
    width: 120px;
    margin-right: 16px;
    margin-bottom: 0;
  }
}

.form-input:focus {
  outline: none;
  border-color: #409eff;
}

.form-input:disabled {
  background: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.form-input::placeholder {
  color: #c0c4cc;
}

.verification-status {
  margin-bottom: 24px;
}

.status-success {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 4px;
  color: #52c41a;
}

.status-pending {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fff7e6;
  border: 1px solid #ffd591;
  border-radius: 4px;
  color: #fa8c16;
}

.status-icon {
  font-size: 16px;
  font-weight: bold;
}

.status-text {
  font-size: 14px;
  font-weight: 500;
}

.submit-container {
  margin-top: 40px;
  text-align: center;
}

/* 密码修改页面的提交按钮左对齐 */
.tab-content .form-container .submit-container {
  text-align: left;
}

.submit-btn {
  width: 120px;
  height: 46px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: Arial;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.submit-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.submit-btn:not(:disabled)::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.submit-btn:not(:disabled):hover::before {
  left: 100%;
}

.submit-btn:not(:disabled):hover {
  background: #333;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.verified-notice {
  padding: 16px;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 4px;
  color: #52c41a;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}

.pending-notice {
  padding: 16px;
  background: #fff7e6;
  border: 1px solid #ffd591;
  border-radius: 4px;
  color: #fa8c16;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}

/* 账号绑定样式 */
.binding-container {
  max-width: 600px;
  text-align: left;
}

.binding-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
}

.binding-item:last-child {
  border-bottom: none;
}

.binding-info {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.binding-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.phone-icon {
  background: #ffd700;
}

.password-icon {
  background: #666;
}

.wechat-icon {
 
  color: #fff;
}

.icon-placeholder {
  font-style: normal;
}

.binding-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: flex-start;
  min-height: 48px;
}

.binding-title {
  font-family: Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  color: #333;
  margin: 0;
}

.binding-status {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #666;
  margin: 0;
}

.binding-btn {
  width: 80px;
  height: 32px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: Arial;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.binding-btn:hover {
  background: #555;
}

.binding-status-tag {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0px;
}



.withdraw-records-container {
  width: 100%;
  max-width: 100%;
  text-align: left;
  padding: 20px 0;
}

/* 删除无用的媒体查询 */



/* 新的账户提现页面样式 - 基于Test.vue布局 */
.account-withdrawal-page {
  width: 100%;
  min-height: 100%;
}

/* 🔧 关键修复：覆盖个人中心的main-content设置，避免样式冲突 */
.account-withdrawal-page :deep(.tab-content) {
  margin-top: 0 !important;      /* 移除60px上边距 */
  margin-bottom: 0 !important;   /* 移除20px下边距 */
  padding: 0 !important;         /* 移除24px上下内边距 */
  min-height: auto !important;   /* 移除478px最小高度限制 */
  flex: none !important;         /* 不占据剩余空间，只包含内容 */
}

.account-withdrawal-container {
  width: 100%;
  max-width: 1025px; /* 🔧 限制最大宽度，防止右侧被截断 */
  box-sizing: border-box;
  margin: 0; /* 确保没有外边距 */
  padding: 0; /* 确保没有内边距 */
}

/* 主要内容区域 */
.main-content-withdrawal {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 减少行间距 */
  width: 100%; /* 确保占满宽度 */
}

/* 账户余额卡片 */
.balance-card-new {
  background: #ffffff;
  border-radius: 12px;
  padding: 28px; /* 稍微减少内边距 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  width: 100%; /* 确保占满可用宽度 */
  box-sizing: border-box;
}

.balance-header-new {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.balance-title-new {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.balance-actions-new {
  display: flex;
  gap: 16px;
  align-items: center;
}

.action-btn-new {
  height: 32px !important;
  padding: 0 12px !important;
  font-family: Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 14px !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
  background: #333 !important;
  border: 1px solid #333 !important;
  border-color: #333 !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
}

.action-btn-new::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
  z-index: 1;
}

.action-btn-new:hover::before {
  left: 100%;
}

.action-btn-new:hover {
  background: #555 !important;
  border-color: #555 !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.action-btn-new:focus {
  background: #333 !important;
  border-color: #333 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* 提现按钮统一样式 */
.withdraw-btn-new {
  background: #333 !important;
  border-color: #333 !important;
  color: #fff !important;
}

.withdraw-btn-new:hover {
  background: #555 !important;
  border-color: #555 !important;
  color: #fff !important;
}

.withdraw-btn-new:focus {
  background: #333 !important;
  border-color: #333 !important;
  color: #fff !important;
}

/* 余额主要区域 */
.balance-main-new {
  margin-bottom: 32px; /* 减少底部边距 */
}

.balance-amount-new {
  display: flex;
  align-items: center;
  gap: 20px; /* 稍微减少间距 */
}

.wallet-icon-new {
  flex-shrink: 0;
}

.amount-info-new {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.amount-label-new {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.amount-value-new {
  font-size: 36px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.amount-value-new.negative {
  color: #e74c3c;
}

/* 统计卡片网格 */
.stats-grid-new {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 强制4列等宽布局 */
  gap: 16px; /* 减少间距以节省空间 */
}

.stat-item-new {
  display: flex;
  align-items: center;
  gap: 12px; /* 减少图标与文字间距 */
  padding: 12px 8px; /* 减少内边距，增加左右padding */
  border-radius: 8px; /* 添加圆角 */
  background: rgba(74, 144, 226, 0.03); /* 添加淡色背景 */
  transition: background 0.3s ease;
}

.stat-item-new:hover {
  background: rgba(74, 144, 226, 0.06);
}

.stat-info-new {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label-new {
  font-size: 13px;
  color: #999;
}

.stat-value-new {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* 收益卡片组 - 第二行布局 */
.revenue-cards-new {
  display: grid;
  grid-template-columns: 1fr 1fr; /* PC端强制2列等宽布局，平分宽度 */
  gap: 20px;
  width: 100%; /* 确保与第一行余额卡片宽度一致 */
}

.revenue-card-new {
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  padding: 32px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%; /* 确保卡片占满分配的空间 */
  box-sizing: border-box; /* 包含padding在内的盒模型 */
  min-height: 160px; /* 🎯 调整最小高度适应20px标题 */
}

.revenue-card-new:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.content-revenue-new {
  background: white url('../../assets/account-mananger/内容卡片.svg') no-repeat center center;
  background-size: cover;
}

.promotion-revenue-new {
  background: white url('../../assets/account-mananger/推广卡片.svg') no-repeat center center;
  background-size: cover;
}

.revenue-header-new {
  margin-bottom: 20px;  /* 🎯 调整间距适应20px标题 */
  text-align: left;     
  width: 100%;          
}

.revenue-title-new {
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  font-size: 20px;      /* 🎯 调整为20px，比金额(28px)小，更协调 */
  font-weight: bold;    /* 🎯 保持加粗 */
  color: #1a1a1a;       /* 深色文字 */
  margin: 0;
  line-height: 1.3;     /* 调整行高适应字体 */
  letter-spacing: 0;    
  text-align: left;     
  display: block;       
}

.revenue-main-new {
  display: flex;
  align-items: center;
  gap: 24px;
}

.revenue-info-new {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left; /* 🎯 确保金额和描述文字左对齐 */
  align-items: flex-start; /* 🎯 确保子元素左对齐 */
}

.revenue-amount-new {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  text-align: left; /* 🎯 明确设置金额左对齐 */
  width: 100%; /* 确保占满容器宽度 */
}

.revenue-desc-new {
  font-size: 13px;
  color: #666;
  text-align: left; /* 🎯 明确设置描述文字左对齐 */
  width: 100%; /* 确保占满容器宽度 */
}

/* SVG图标样式 */
.wallet-icon-img-new {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.stat-icon-img-new {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.revenue-icon-img-new {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

/* 中等宽度屏幕优化 - 专门针对个人中心受限宽度 */
@media (max-width: 1400px) {
  .account-withdrawal-container {
    max-width: 950px; /* 1400px屏幕下的可用宽度 */
  }
}

@media (max-width: 1200px) {
  .account-withdrawal-container {
    max-width: 850px; /* 1200px屏幕下的可用宽度 */
  }
  
  .stats-grid-new {
    grid-template-columns: repeat(2, 1fr); /* 在中等宽度下改为2列 */
    gap: 12px;
  }
  
  .stat-item-new {
    padding: 10px 6px;
    gap: 10px;
  }
  
  /* 保持2行布局：第二行两个收益卡片平分宽度 */
  .revenue-cards-new {
    grid-template-columns: 1fr 1fr; /* 继续保持2列等宽布局 */
    gap: 16px; /* 稍微减少间距 */
  }
  
  .revenue-card-new {
    padding: 24px; /* 减少收益卡片内边距 */
    min-height: 140px; /* 🎯 中等屏幕下调整最小高度适应18px标题 */
  }
  
  .revenue-header-new {
    margin-bottom: 20px; /* 中等屏幕下适当标题间距 */
    text-align: left;    
  }
  
  .revenue-title-new {
    font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
    font-size: 18px;     /* 🎯 中等屏幕下调整为18px，更匹配 */
    font-weight: bold;   /* 🎯 保持加粗 */
    color: #1a1a1a;      
    text-align: left;    
    line-height: 1.3;    /* 调整行高 */
  }
  
  .revenue-main-new {
    gap: 18px; /* 减少图标与内容间距 */
  }
  
  .revenue-info-new {
    text-align: left; /* 🎯 中等屏幕下确保左对齐 */
  }
  
  .revenue-amount-new {
    text-align: left; /* 🎯 中等屏幕下金额左对齐 */
  }
  
  .revenue-desc-new {
    text-align: left; /* 🎯 中等屏幕下描述文字左对齐 */
  }
}

@media (max-width: 900px) {
  .account-withdrawal-container {
    max-width: none; /* 移动端移除宽度限制 */
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  
  .balance-card-new {
    padding: 24px 20px;
  }
  
  .balance-header-new {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .balance-actions-new {
    width: 100%;
    justify-content: space-between;
  }
  
  .balance-amount-new {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .amount-value-new {
    font-size: 28px;
  }
  
  .stats-grid-new {
    grid-template-columns: repeat(2, 1fr); /* 保持2列布局 */
    gap: 12px;
  }
  
  .stat-item-new {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    padding: 10px 6px; /* 调整移动端内边距 */
  }
  
  /* 移动端改为垂直排列 */
  .revenue-cards-new {
    grid-template-columns: 1fr; /* 移动端垂直排列 */
    gap: 16px;
  }
  
  .revenue-card-new {
    padding: 24px 20px;
    min-height: auto; /* 移动端取消最小高度限制 */
  }
  
  .revenue-header-new {
    margin-bottom: 18px; /* 移动端适当减少标题间距 */
    text-align: left;    
    width: 100%;         
  }
  
  .revenue-title-new {
    font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
    font-size: 18px;     /* 🎯 移动端调整为18px，比金额(24px)小 */
    font-weight: bold;   /* 🎯 保持加粗 */
    color: #1a1a1a;      
    text-align: left;    
    display: block;      
    line-height: 1.3;    /* 调整行高 */
  }
  
  .revenue-main-new {
    flex-direction: column;
    gap: 16px;
    text-align: left; /* 🎯 移动端也保持左对齐 */
    align-items: flex-start; /* 🎯 确保子元素左对齐 */
  }
  
  .revenue-amount-new {
    font-size: 24px;
    text-align: left; /* 🎯 移动端金额左对齐 */
  }
  
  .revenue-desc-new {
    text-align: left; /* 🎯 移动端描述文字左对齐 */
  }
  
  /* 移动端图标尺寸调整 */
  .wallet-icon-img-new {
    width: 60px;
    height: 60px;
  }
  
  .revenue-icon-img-new {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 576px) {
  
  .balance-card-new {
    padding: 20px 16px;
  }
  
  .stats-grid-new {
    grid-template-columns: repeat(2, 1fr); /* 小屏仍保持2列 */
    gap: 8px;
  }
  
  .stat-item-new {
    padding: 8px 4px; /* 进一步减少内边距 */
  }
  
  /* 继续保持移动端垂直布局 */
  .revenue-cards-new {
    grid-template-columns: 1fr; /* 小屏继续垂直排列 */
    gap: 12px;
  }
  
  .revenue-card-new {
    padding: 20px 16px;
  }
  
  .revenue-header-new {
    margin-bottom: 16px; /* 小屏设备下适当标题间距 */
    text-align: left;    
    width: 100%;         
  }
  
  .revenue-title-new {
    font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
    font-size: 16px;     /* 🎯 小屏设备下调整为16px，保持层次 */
    font-weight: bold;   /* 🎯 保持加粗 */
    color: #1a1a1a;      
    text-align: left;    
    display: block;      
    line-height: 1.3;    /* 调整行高 */
  }
  
  .revenue-info-new {
    text-align: left; /* 🎯 小屏下确保左对齐 */
  }
  
  .revenue-amount-new {
    text-align: left; /* 🎯 小屏下金额左对齐 */
  }
  
  .revenue-desc-new {
    text-align: left; /* 🎯 小屏下描述文字左对齐 */
  }
  
  /* 小屏设备图标尺寸进一步调整 */
  .wallet-icon-img-new {
    width: 50px;
    height: 50px;
  }
  
  .stat-icon-img-new {
    width: 32px;
    height: 32px;
  }
  
  .revenue-icon-img-new {
    width: 45px;
    height: 45px;
  }
  
  .balance-actions-new {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  
  .action-btn-new,
  .withdraw-btn-new {
    width: 100% !important;
  }
  
  /* 移动端按钮样式强化 */
  .action-btn-new :deep(.el-button) {
    width: 100% !important;
    background: #333 !important;
    border-color: #333 !important;
    color: #fff !important;
  }
}

/* Element Plus 按钮样式覆盖 */
.action-btn-new :deep(.el-button) {
  background: #333 !important;
  border-color: #333 !important;
  color: #fff !important;
}

.action-btn-new :deep(.el-button:hover) {
  background: #555 !important;
  border-color: #555 !important;
  color: #fff !important;
}

.action-btn-new :deep(.el-button:focus) {
  background: #333 !important;
  border-color: #333 !important;
  color: #fff !important;
  outline: none !important;
}

.action-btn-new :deep(.el-button:active) {
  background: #555 !important;
  border-color: #555 !important;
  color: #fff !important;
}

/* Element Plus 按钮文字和图标颜色 */
.action-btn-new :deep(.el-button .el-icon) {
  color: #fff !important;
}

.action-btn-new :deep(.el-button span) {
  color: #fff !important;
}

/* 提现样式 */
.withdrawal-container {
  width: 100%;
  text-align: left;
  padding: 20px 0;
}

/* 余额概览卡片样式 */
.balance-overview-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.balance-overview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.balance-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.balance-title-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.balance-icon {
  font-size: 24px;
  color: #333;
}

.balance-title {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #333;
  margin: 0;
}

.balance-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

@media screen and (max-width: 576px) {
  .balance-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .balance-actions {
    width: 100%;
    justify-content: space-between;
  }
}

.balance-amount {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  text-align: left;
}

.balance-amount .amount-value {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 36px;
  color: #2c3e50;
}

.balance-amount .amount-value.negative {
  color: #e74c3c;
}

.balance-amount .amount-label {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.balance-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.balance-details .detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.balance-details .detail-item:last-child {
  border-bottom: none;
}

.balance-details .detail-label {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #666;
}

.balance-details .detail-value {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  color: #333;
}

/* 操作按钮区域样式 */
.action-buttons {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.action-btn {
  flex: 1;
  height: 48px;
  background: #333;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-family: Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: #555;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 小按钮样式 */
.action-btn-small {
  height: 32px;
  padding: 0 12px;
  font-family: Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  border-radius: 6px;
  transition: all 0.3s ease;
  background: #333;
  border-color: #333;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.action-btn-small::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.action-btn-small:hover::before {
  left: 100%;
}

.action-btn-small:hover {
  background: #555;
  border-color: #555;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 收益分类样式 */
.income-categories {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.income-card {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@media screen and (min-width: 768px) {
  .income-categories {
    flex-direction: row;
  }
  
  .income-card {
    flex: 1;
  }
}

.income-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border-color: #d0d0d0;
}

.income-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.income-icon {
  font-size: 20px;
  color: #555;
}

.income-title {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  color: #333;
}

.income-amount {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: #2c3e50;
  margin-bottom: 8px;
}

.income-desc {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: #666;
}

/* 提现记录样式 */
.withdraw-records {
  margin-top: 24px;
}

.records-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.records-title {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 20px;
  color: #333;
  margin: 0;
}

.loading-container,
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  background: #f8f9fa;
  border-radius: 8px;
  color: #666;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.loading-container .is-loading {
  font-size: 24px;
  color: #409eff;
}

.empty-container .empty-icon {
  font-size: 24px;
  color: #999;
}

.table-container {
  background: #ffffff;
  border-radius: 8px;
  overflow-x: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  width: 100%;
  /* 确保表格容器可以滚动 */
  -webkit-overflow-scrolling: touch;
}

.withdraw-table {
  font-family: Arial, sans-serif;
  width: 100%;
  /* 确保表格保持最小宽度以保持可读性 */
  min-width: 700px;
}

/* 在小屏幕上为表格添加更好的滚动体验 */
@media screen and (max-width: 768px) {
  .table-container {
    margin: 0 -20px;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
  }
  
  .withdraw-table {
    min-width: 600px;
  }
}

.withdraw-table :deep(.el-table__header) {
  background: #f8f9fa;
}

.withdraw-table :deep(.el-table__header th) {
  background: #f8f9fa !important;
  color: #333 !important;
  font-weight: 600;
  border-bottom: 1px solid #e0e0e0;
}

.withdraw-table :deep(.el-table__body td) {
  border-bottom: 1px solid #f0f0f0;
  color: #333;
}

.withdraw-table :deep(.el-table__row:hover td) {
  background: #f8f9fa !important;
}

.withdraw-table :deep(.el-table__row:nth-child(even)) {
  background: #fafafa;
}

.amount-cell {
  font-weight: 600;
  color: #2c3e50;
}

.account-type {
  color: #666;
  font-size: 13px;
}

.time-cell {
  color: #666;
  font-size: 13px;
}

.reason-cell {
  color: #666;
  font-size: 13px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  padding: 16px;
  background: #f8f9fa;
  border-top: 1px solid #e0e0e0;
  width: 100%;
}

.pagination-container :deep(.el-pagination) {
  white-space: nowrap;
  flex-wrap: wrap;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .pagination-container :deep(.el-pagination) {
    padding: 5px 0;
  }
}





/* 删除加载按钮样式，已改为自动加载 */

/* 加载状态样式 */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  color: #666;
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
}

.loading-icon {
  font-size: 16px;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}







/* 通用弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.modal-container {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 90vh;
}

.modal-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}

.modal-title {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  color: #333;
  margin: 0;
}

.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s;
}

.modal-close:hover {
  background: #f5f5f5;
  color: #666;
}

.modal-body {
  flex: 1;
  padding: 24px 32px;
  overflow-y: auto;
  background: #fff;
}

/* 余额明细弹窗样式 */
.balance-detail-modal {
  width: 95%;
  max-width: 1200px;
  max-height: 85vh;
}

@media screen and (max-width: 1280px) {
  .balance-detail-modal {
    max-width: 1000px;
  }
}

@media screen and (max-width: 768px) {
  .balance-detail-modal {
    width: 98%;
    max-width: none;
    max-height: 90vh;
  }
  
  .balance-detail-modal .modal-header {
    padding: 16px 20px 12px;
  }
  
  .balance-detail-modal .modal-body {
    padding: 16px 20px;
  }
}

.balance-detail-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-section {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

.detail-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.detail-section .section-title {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 20px;
  color: #333;
  margin: 0 0 16px 0;
}

.balance-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.summary-label {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #666;
}

.summary-value {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  color: #333;
}

.income-detail-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.income-detail-item {
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
}

.income-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e8e8e8;
}

.income-detail-icon {
  font-size: 18px;
  color: #555;
}

.income-detail-title {
  flex: 1;
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  color: #333;
}

.income-detail-amount {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: #2c3e50;
}

.income-detail-content {
  padding: 16px;
}

.content-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.content-item:last-child {
  border-bottom: none;
}

.content-name {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #333;
}

.content-amount {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  color: #2c3e50;
}

.promotion-desc {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #666;
  font-style: italic;
}

/* 收益章节样式 */
.income-section {
  margin-bottom: 24px;
}

.income-section:last-child {
  margin-bottom: 0;
}

.income-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px 8px 0 0;
  border: 1px solid #e8e8e8;
  border-bottom: none;
}

.income-section-header .income-icon {
  font-size: 20px;
  color: #555;
}

.income-section-header .income-title {
  flex: 1;
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  color: #333;
}

.income-section-header .income-amount {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: #2c3e50;
}

.no-data-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  background: #f8f9fa;
  border: 1px solid #e8e8e8;
  border-top: none;
  border-radius: 0 0 8px 8px;
  color: #999;
}

.no-data-icon {
  font-size: 32px;
  color: #ccc;
}

.no-data-text {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #999;
}

/* 表格相关样式 */
.income-section .table-container {
  border: 1px solid #e8e8e8;
  border-top: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

.income-section .table-container :deep(.el-table) {
  border-radius: 0 0 8px 8px;
}

.income-section .table-container :deep(.el-table__header) {
  background: #f8f9fa;
}

.income-section .table-container :deep(.el-table__header th) {
  background: #f8f9fa !important;
  color: #333 !important;
  font-weight: 600;
  border-bottom: 1px solid #e0e0e0;
  padding: 8px;
}

.income-section .table-container :deep(.el-table__body td) {
  border-bottom: 1px solid #f0f0f0;
  color: #333;
  padding: 8px;
}

.income-section .table-container :deep(.el-table__row:hover td) {
  background: #f5f7fa !important;
}



.commission-amount {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  color: #e74c3c;
}

.rate-cell {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 15px;
  color: #409eff;
}

.description-cell {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: #666;
  word-wrap: break-word;
  word-break: break-all;
}

/* 移动端表格优化 */
@media screen and (max-width: 768px) {
  .income-section .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .income-section .table-container :deep(.el-table) {
    min-width: 520px;
  }
  
  .income-section .table-container :deep(.el-table__header th),
  .income-section .table-container :deep(.el-table__body td) {
    padding: 6px 4px;
    font-size: 12px;
  }
  
  .income-section-header {
    padding: 12px;
  }
  
  .income-section-header .income-title {
    font-size: 14px;
  }
  
  .income-section-header .income-amount {
    font-size: 16px;
  }
}

@media screen and (max-width: 480px) {
  .income-section .table-container :deep(.el-table) {
    min-width: 420px;
  }
  
  .income-section .table-container :deep(.el-table__header th),
  .income-section .table-container :deep(.el-table__body td) {
    padding: 4px 2px;
    font-size: 11px;
  }
  
  .commission-amount {
    font-size: 12px;
  }
}

/* 提现弹窗样式 - 完全重写 */
.withdraw-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.withdraw-modal-container {
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.withdraw-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}

.withdraw-modal-title {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  color: #333;
  margin: 0;
}

.withdraw-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s;
}

.withdraw-modal-close:hover {
  background: #f5f5f5;
  color: #666;
}

.withdraw-modal-body {
  flex: 1;
  padding: 24px 32px;
  overflow-y: auto;
  background: #fff;
}

.withdraw-form-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.withdraw-form-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.withdraw-form-label {
  font-family: Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: #333;
}

.withdraw-form-input {
  width: 100%;
}

.withdraw-form-input :deep(.el-input__wrapper) {
  height: 48px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  transition: all 0.3s;
  background: #fff;
  box-shadow: none;
}

.withdraw-form-input :deep(.el-input__wrapper:hover) {
  border-color: #409eff;
}

.withdraw-form-input :deep(.el-input__wrapper.is-focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.withdraw-form-input :deep(.el-input__inner) {
  height: 48px;
  font-size: 16px;
  font-family: Arial, sans-serif;
  font-weight: 400;
  line-height: 18px;
  color: #333;
}

.withdraw-form-input :deep(.el-input__inner::placeholder) {
  color: #c0c4cc;
}

.withdraw-form-tip {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: #666;
  padding: 10px 14px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #409eff;
}

.withdraw-method-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media screen and (min-width: 576px) {
  .withdraw-method-container {
    flex-direction: row;
  }
}

.withdraw-method-option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fff;
  min-height: 50px;
}

.withdraw-method-option:hover {
  border-color: #409eff;
  background: #f0f9ff;
}

.withdraw-method-option.active {
  border-color: #409eff;
  background: #f0f9ff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.withdraw-method-icon {
  font-size: 20px;
  color: #409eff;
}

.withdraw-method-text {
  font-family: Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  color: #333;
}

.withdraw-modal-footer {
  padding: 16px 32px 24px;
  border-top: 1px solid #f0f0f0;
  background: #fff;
}

.withdraw-modal-btn {
  width: 100%;
  height: 48px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  cursor: pointer;
  transition: all 0.3s;
}

.withdraw-modal-btn:hover:not(:disabled) {
  background: #555;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.withdraw-modal-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 自定义下拉菜单样式 */
:deep(.el-popper.balance-dropdown-popper) {
  background: #2c2c2c !important;
  border: 1px solid #444 !important;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

:deep(.el-popper.balance-dropdown-popper .el-dropdown-menu) {
  background: transparent !important;
  padding: 6px 0;
}

:deep(.el-popper.balance-dropdown-popper .el-dropdown-menu__item) {
  color: #f0f0f0 !important;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 2.5;
}

:deep(.el-popper.balance-dropdown-popper .el-dropdown-menu__item:hover) {
  background-color: #444 !important;
  color: #fff !important;
}

:deep(.el-popper.balance-dropdown-popper .el-dropdown-menu__item .el-icon) {
  color: #f0f0f0 !important;
}

:deep(.el-popper.balance-dropdown-popper .el-popper__arrow::before) {
  background: #2c2c2c !important;
  border-color: transparent !important;
}

/* 提现样式 */
.withdrawal-container {
  width: 100%;
  text-align: left;
  padding: 20px 0;
}

/* 余额概览卡片样式 */
.balance-overview-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.balance-overview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.balance-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.balance-title-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.balance-icon {
  font-size: 24px;
  color: #333;
}

.balance-title {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #333;
  margin: 0;
}

.balance-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

@media screen and (max-width: 576px) {
  .balance-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .balance-actions {
    width: 100%;
    justify-content: space-between;
  }
}

.balance-amount {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  text-align: left;
}

.balance-amount .amount-value {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 36px;
  color: #2c3e50;
}

.balance-amount .amount-value.negative {
  color: #e74c3c;
}

.balance-amount .amount-label {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.balance-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.balance-details .detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.balance-details .detail-item:last-child {
  border-bottom: none;
}

.balance-details .detail-label {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #666;
}

.balance-details .detail-value {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  color: #333;
}

/* 操作按钮区域样式 */
.action-buttons {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.action-btn {
  flex: 1;
  height: 48px;
  background: #333;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-family: Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: #555;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 小按钮样式 */
.action-btn-small {
  height: 32px;
  padding: 0 12px;
  font-family: Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  border-radius: 6px;
  transition: all 0.3s ease;
  background: #333;
  border-color: #333;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.action-btn-small::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.action-btn-small:hover::before {
  left: 100%;
}

.action-btn-small:hover {
  background: #555;
  border-color: #555;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 收益分类样式 */
.income-categories {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.income-card {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@media screen and (min-width: 768px) {
  .income-categories {
    flex-direction: row;
  }
  
  .income-card {
    flex: 1;
  }
}

.income-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border-color: #d0d0d0;
}

.income-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.income-icon {
  font-size: 20px;
  color: #555;
}

.income-title {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  color: #333;
}

.income-amount {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: #2c3e50;
  margin-bottom: 8px;
}

.income-desc {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: #666;
}

/* 提现记录样式 */
.withdraw-records {
  margin-top: 24px;
}

.records-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.records-title {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 20px;
  color: #333;
  margin: 0;
}

.loading-container,
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  background: #f8f9fa;
  border-radius: 8px;
  color: #666;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.loading-container .is-loading {
  font-size: 24px;
  color: #409eff;
}

.empty-container .empty-icon {
  font-size: 24px;
  color: #999;
}

.table-container {
  background: #ffffff;
  border-radius: 8px;
  overflow-x: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  width: 100%;
  /* 确保表格容器可以滚动 */
  -webkit-overflow-scrolling: touch;
}

.withdraw-table {
  font-family: Arial, sans-serif;
  width: 100%;
  /* 确保表格保持最小宽度以保持可读性 */
  min-width: 700px;
}

/* 在小屏幕上为表格添加更好的滚动体验 */
@media screen and (max-width: 768px) {
  .table-container {
    margin: 0 -20px;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
  }
  
  .withdraw-table {
    min-width: 600px;
  }
}

.withdraw-table :deep(.el-table__header) {
  background: #f8f9fa;
}

.withdraw-table :deep(.el-table__header th) {
  background: #f8f9fa !important;
  color: #333 !important;
  font-weight: 600;
  border-bottom: 1px solid #e0e0e0;
}

.withdraw-table :deep(.el-table__body td) {
  border-bottom: 1px solid #f0f0f0;
  color: #333;
}

.withdraw-table :deep(.el-table__row:hover td) {
  background: #f8f9fa !important;
}

.withdraw-table :deep(.el-table__row:nth-child(even)) {
  background: #fafafa;
}

.amount-cell {
  font-weight: 600;
  color: #2c3e50;
}

.account-type {
  color: #666;
  font-size: 13px;
}

.time-cell {
  color: #666;
  font-size: 13px;
}

.reason-cell {
  color: #666;
  font-size: 13px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  padding: 16px;
  background: #f8f9fa;
  border-top: 1px solid #e0e0e0;
  width: 100%;
}

.pagination-container :deep(.el-pagination) {
  white-space: nowrap;
  flex-wrap: wrap;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .pagination-container :deep(.el-pagination) {
    padding: 5px 0;
  }
}





/* 删除加载按钮样式，已改为自动加载 */

/* 加载状态样式 */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  color: #666;
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
}

.loading-icon {
  font-size: 16px;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}







/* 通用弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.modal-container {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 90vh;
}

.modal-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}

.modal-title {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  color: #333;
  margin: 0;
}

.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s;
}

.modal-close:hover {
  background: #f5f5f5;
  color: #666;
}

.modal-body {
  flex: 1;
  padding: 24px 32px;
  overflow-y: auto;
  background: #fff;
}

/* 余额明细弹窗样式 */
.balance-detail-modal {
  width: 95%;
  max-width: 1200px;
  max-height: 85vh;
}

@media screen and (max-width: 1280px) {
  .balance-detail-modal {
    max-width: 1000px;
  }
}

@media screen and (max-width: 768px) {
  .balance-detail-modal {
    width: 98%;
    max-width: none;
    max-height: 90vh;
  }
  
  .balance-detail-modal .modal-header {
    padding: 16px 20px 12px;
  }
  
  .balance-detail-modal .modal-body {
    padding: 16px 20px;
  }
}

.balance-detail-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-section {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

.detail-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.detail-section .section-title {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 20px;
  color: #333;
  margin: 0 0 16px 0;
}

.balance-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.summary-label {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #666;
}

.summary-value {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  color: #333;
}

.income-detail-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.income-detail-item {
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
}

.income-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e8e8e8;
}

.income-detail-icon {
  font-size: 18px;
  color: #555;
}

.income-detail-title {
  flex: 1;
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  color: #333;
}

.income-detail-amount {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: #2c3e50;
}

.income-detail-content {
  padding: 16px;
}

.content-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.content-item:last-child {
  border-bottom: none;
}

.content-name {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #333;
}

.content-amount {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  color: #2c3e50;
}

.promotion-desc {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #666;
  font-style: italic;
}

/* 收益章节样式 */
.income-section {
  margin-bottom: 24px;
}

.income-section:last-child {
  margin-bottom: 0;
}

.income-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px 8px 0 0;
  border: 1px solid #e8e8e8;
  border-bottom: none;
}

.income-section-header .income-icon {
  font-size: 20px;
  color: #555;
}

.income-section-header .income-title {
  flex: 1;
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  color: #333;
}

.income-section-header .income-amount {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: #2c3e50;
}

.no-data-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  background: #f8f9fa;
  border: 1px solid #e8e8e8;
  border-top: none;
  border-radius: 0 0 8px 8px;
  color: #999;
}

.no-data-icon {
  font-size: 32px;
  color: #ccc;
}

.no-data-text {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #999;
}

/* 表格相关样式 */
.income-section .table-container {
  border: 1px solid #e8e8e8;
  border-top: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

.income-section .table-container :deep(.el-table) {
  border-radius: 0 0 8px 8px;
}

.income-section .table-container :deep(.el-table__header) {
  background: #f8f9fa;
}

.income-section .table-container :deep(.el-table__header th) {
  background: #f8f9fa !important;
  color: #333 !important;
  font-weight: 600;
  border-bottom: 1px solid #e0e0e0;
  padding: 8px;
}

.income-section .table-container :deep(.el-table__body td) {
  border-bottom: 1px solid #f0f0f0;
  color: #333;
  padding: 8px;
}

.income-section .table-container :deep(.el-table__row:hover td) {
  background: #f5f7fa !important;
}



.commission-amount {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  color: #e74c3c;
}

.rate-cell {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 15px;
  color: #409eff;
}

.description-cell {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: #666;
  word-wrap: break-word;
  word-break: break-all;
}

/* 移动端表格优化 */
@media screen and (max-width: 768px) {
  .income-section .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .income-section .table-container :deep(.el-table) {
    min-width: 520px;
  }
  
  .income-section .table-container :deep(.el-table__header th),
  .income-section .table-container :deep(.el-table__body td) {
    padding: 6px 4px;
    font-size: 12px;
  }
  
  .income-section-header {
    padding: 12px;
  }
  
  .income-section-header .income-title {
    font-size: 14px;
  }
  
  .income-section-header .income-amount {
    font-size: 16px;
  }
}

@media screen and (max-width: 480px) {
  .income-section .table-container :deep(.el-table) {
    min-width: 420px;
  }
  
  .income-section .table-container :deep(.el-table__header th),
  .income-section .table-container :deep(.el-table__body td) {
    padding: 4px 2px;
    font-size: 11px;
  }
  
  .commission-amount {
    font-size: 12px;
  }
}

/* 提现弹窗样式 - 完全重写 */
.withdraw-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.withdraw-modal-container {
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.withdraw-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}

.withdraw-modal-title {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  color: #333;
  margin: 0;
}

.withdraw-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s;
}

.withdraw-modal-close:hover {
  background: #f5f5f5;
  color: #666;
}

.withdraw-modal-body {
  flex: 1;
  padding: 24px 32px;
  overflow-y: auto;
  background: #fff;
}

.withdraw-form-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.withdraw-form-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.withdraw-form-label {
  font-family: Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: #333;
}

.withdraw-form-input {
  width: 100%;
}

.withdraw-form-input :deep(.el-input__wrapper) {
  height: 48px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  transition: all 0.3s;
  background: #fff;
  box-shadow: none;
}

.withdraw-form-input :deep(.el-input__wrapper:hover) {
  border-color: #409eff;
}

.withdraw-form-input :deep(.el-input__wrapper.is-focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.withdraw-form-input :deep(.el-input__inner) {
  height: 48px;
  font-size: 16px;
  font-family: Arial, sans-serif;
  font-weight: 400;
  line-height: 18px;
  color: #333;
}

.withdraw-form-input :deep(.el-input__inner::placeholder) {
  color: #c0c4cc;
}

.withdraw-form-tip {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: #666;
  padding: 10px 14px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #409eff;
}

.withdraw-method-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media screen and (min-width: 576px) {
  .withdraw-method-container {
    flex-direction: row;
  }
}

.withdraw-method-option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fff;
  min-height: 50px;
}

.withdraw-method-option:hover {
  border-color: #409eff;
  background: #f0f9ff;
}

.withdraw-method-option.active {
  border-color: #409eff;
  background: #f0f9ff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.withdraw-method-icon {
  font-size: 20px;
  color: #409eff;
}

.withdraw-method-text {
  font-family: Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  color: #333;
}

.withdraw-modal-footer {
  padding: 16px 32px 24px;
  border-top: 1px solid #f0f0f0;
  background: #fff;
}

.withdraw-modal-btn {
  width: 100%;
  height: 48px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  cursor: pointer;
  transition: all 0.3s;
}

.withdraw-modal-btn:hover:not(:disabled) {
  background: #555;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.withdraw-modal-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 自定义下拉菜单样式 */
:deep(.el-popper.balance-dropdown-popper) {
  background: #2c2c2c !important;
  border: 1px solid #444 !important;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

:deep(.el-popper.balance-dropdown-popper .el-dropdown-menu) {
  background: transparent !important;
  padding: 6px 0;
}

:deep(.el-popper.balance-dropdown-popper .el-dropdown-menu__item) {
  color: #f0f0f0 !important;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 2.5;
}

:deep(.el-popper.balance-dropdown-popper .el-dropdown-menu__item:hover) {
  background-color: #444 !important;
  color: #fff !important;
}

:deep(.el-popper.balance-dropdown-popper .el-dropdown-menu__item .el-icon) {
  color: #f0f0f0 !important;
}

:deep(.el-popper.balance-dropdown-popper .el-popper__arrow::before) {
  background: #2c2c2c !important;
  border-color: transparent !important;
}

/* 提现样式 */
.withdrawal-container {
  width: 100%;
  text-align: left;
  padding: 20px 0;
}

/* 余额概览卡片样式 */
.balance-overview-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.balance-overview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.balance-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.balance-title-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.balance-icon {
  font-size: 24px;
  color: #333;
}

.balance-title {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #333;
  margin: 0;
}

.balance-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

@media screen and (max-width: 576px) {
  .balance-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .balance-actions {
    width: 100%;
    justify-content: space-between;
  }
}

.balance-amount {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  text-align: left;
}

.balance-amount .amount-value {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 36px;
  color: #2c3e50;
}

.balance-amount .amount-value.negative {
  color: #e74c3c;
}

.balance-amount .amount-label {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.balance-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.balance-details .detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.balance-details .detail-item:last-child {
  border-bottom: none;
}

.balance-details .detail-label {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #666;
}

.balance-details .detail-value {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  color: #333;
}

/* 操作按钮区域样式 */
.action-buttons {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.action-btn {
  flex: 1;
  height: 48px;
  background: #333;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-family: Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: #555;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 小按钮样式 */
.action-btn-small {
  height: 32px;
  padding: 0 12px;
  font-family: Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  border-radius: 6px;
  transition: all 0.3s ease;
  background: #333;
  border-color: #333;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.action-btn-small::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.action-btn-small:hover::before {
  left: 100%;
}

.action-btn-small:hover {
  background: #555;
  border-color: #555;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 收益分类样式 */
.income-categories {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.income-card {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@media screen and (min-width: 768px) {
  .income-categories {
    flex-direction: row;
  }
  
  .income-card {
    flex: 1;
  }
}

.income-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border-color: #d0d0d0;
}

.income-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.income-icon {
  font-size: 20px;
  color: #555;
}

.income-title {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  color: #333;
}

.income-amount {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: #2c3e50;
  margin-bottom: 8px;
}

.income-desc {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: #666;
}

/* 提现记录样式 */
.withdraw-records {
  margin-top: 24px;
}

.records-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.records-title {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 20px;
  color: #333;
  margin: 0;
}

.loading-container,
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  background: #f8f9fa;
  border-radius: 8px;
  color: #666;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.loading-container .is-loading {
  font-size: 24px;
  color: #409eff;
}

.empty-container .empty-icon {
  font-size: 24px;
  color: #999;
}

.table-container {
  background: #ffffff;
  border-radius: 8px;
  overflow-x: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  width: 100%;
  /* 确保表格容器可以滚动 */
  -webkit-overflow-scrolling: touch;
}

.withdraw-table {
  font-family: Arial, sans-serif;
  width: 100%;
  /* 确保表格保持最小宽度以保持可读性 */
  min-width: 700px;
}

/* 在小屏幕上为表格添加更好的滚动体验 */
@media screen and (max-width: 768px) {
  .table-container {
    margin: 0 -20px;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
  }
  
  .withdraw-table {
    min-width: 600px;
  }
}

.withdraw-table :deep(.el-table__header) {
  background: #f8f9fa;
}

.withdraw-table :deep(.el-table__header th) {
  background: #f8f9fa !important;
  color: #333 !important;
  font-weight: 600;
  border-bottom: 1px solid #e0e0e0;
}

.withdraw-table :deep(.el-table__body td) {
  border-bottom: 1px solid #f0f0f0;
  color: #333;
}

.withdraw-table :deep(.el-table__row:hover td) {
  background: #f8f9fa !important;
}

.withdraw-table :deep(.el-table__row:nth-child(even)) {
  background: #fafafa;
}

.amount-cell {
  font-weight: 600;
  color: #2c3e50;
}

.account-type {
  color: #666;
  font-size: 13px;
}

.time-cell {
  color: #666;
  font-size: 13px;
}

.reason-cell {
  color: #666;
  font-size: 13px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  padding: 16px;
  background: #f8f9fa;
  border-top: 1px solid #e0e0e0;
  width: 100%;
}

.pagination-container :deep(.el-pagination) {
  white-space: nowrap;
  flex-wrap: wrap;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .pagination-container :deep(.el-pagination) {
    padding: 5px 0;
  }
}





/* 删除加载按钮样式，已改为自动加载 */

/* 加载状态样式 */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  color: #666;
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
}

.loading-icon {
  font-size: 16px;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}







/* 通用弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.modal-container {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 90vh;
}

.modal-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}

.modal-title {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  color: #333;
  margin: 0;
}

.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s;
}

.modal-close:hover {
  background: #f5f5f5;
  color: #666;
}

.modal-body {
  flex: 1;
  padding: 24px 32px;
  overflow-y: auto;
  background: #fff;
}

/* 余额明细弹窗样式 */
.balance-detail-modal {
  width: 95%;
  max-width: 1200px;
  max-height: 85vh;
}

@media screen and (max-width: 1280px) {
  .balance-detail-modal {
    max-width: 1000px;
  }
}

@media screen and (max-width: 768px) {
  .balance-detail-modal {
    width: 98%;
    max-width: none;
    max-height: 90vh;
  }
  
  .balance-detail-modal .modal-header {
    padding: 16px 20px 12px;
  }
  
  .balance-detail-modal .modal-body {
    padding: 16px 20px;
  }
}

.balance-detail-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-section {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

.detail-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.detail-section .section-title {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 20px;
  color: #333;
  margin: 0 0 16px 0;
}

.balance-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.summary-label {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #666;
}

.summary-value {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  color: #333;
}

.income-detail-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.income-detail-item {
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
}

.income-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e8e8e8;
}

.income-detail-icon {
  font-size: 18px;
  color: #555;
}

.income-detail-title {
  flex: 1;
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  color: #333;
}

.income-detail-amount {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: #2c3e50;
}

.income-detail-content {
  padding: 16px;
}

.content-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.content-item:last-child {
  border-bottom: none;
}

.content-name {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #333;
}

.content-amount {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  color: #2c3e50;
}

.promotion-desc {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #666;
  font-style: italic;
}

/* 收益章节样式 */
.income-section {
  margin-bottom: 24px;
}

.income-section:last-child {
  margin-bottom: 0;
}

.income-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px 8px 0 0;
  border: 1px solid #e8e8e8;
  border-bottom: none;
}

.income-section-header .income-icon {
  font-size: 20px;
  color: #555;
}

.income-section-header .income-title {
  flex: 1;
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  color: #333;
}

.income-section-header .income-amount {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: #2c3e50;
}

.no-data-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  background: #f8f9fa;
  border: 1px solid #e8e8e8;
  border-top: none;
  border-radius: 0 0 8px 8px;
  color: #999;
}

.no-data-icon {
  font-size: 32px;
  color: #ccc;
}

.no-data-text {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #999;
}

/* 表格相关样式 */
.income-section .table-container {
  border: 1px solid #e8e8e8;
  border-top: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

.income-section .table-container :deep(.el-table) {
  border-radius: 0 0 8px 8px;
}

.income-section .table-container :deep(.el-table__header) {
  background: #f8f9fa;
}

.income-section .table-container :deep(.el-table__header th) {
  background: #f8f9fa !important;
  color: #333 !important;
  font-weight: 600;
  border-bottom: 1px solid #e0e0e0;
  padding: 8px;
}

.income-section .table-container :deep(.el-table__body td) {
  border-bottom: 1px solid #f0f0f0;
  color: #333;
  padding: 8px;
}

.income-section .table-container :deep(.el-table__row:hover td) {
  background: #f5f7fa !important;
}



.commission-amount {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  color: #e74c3c;
}

.rate-cell {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 15px;
  color: #409eff;
}

.description-cell {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: #666;
  word-wrap: break-word;
  word-break: break-all;
}

/* 移动端表格优化 */
@media screen and (max-width: 768px) {
  .income-section .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .income-section .table-container :deep(.el-table) {
    min-width: 520px;
  }
  
  .income-section .table-container :deep(.el-table__header th),
  .income-section .table-container :deep(.el-table__body td) {
    padding: 6px 4px;
    font-size: 12px;
  }
  
  .income-section-header {
    padding: 12px;
  }
  
  .income-section-header .income-title {
    font-size: 14px;
  }
  
  .income-section-header .income-amount {
    font-size: 16px;
  }
}

@media screen and (max-width: 480px) {
  .income-section .table-container :deep(.el-table) {
    min-width: 420px;
  }
  
  .income-section .table-container :deep(.el-table__header th),
  .income-section .table-container :deep(.el-table__body td) {
    padding: 4px 2px;
    font-size: 11px;
  }
  
  .commission-amount {
    font-size: 12px;
  }
}

/* 提现弹窗样式 - 完全重写 */
.withdraw-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.withdraw-modal-container {
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.withdraw-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}

.withdraw-modal-title {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  color: #333;
  margin: 0;
}

.withdraw-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s;
}

.withdraw-modal-close:hover {
  background: #f5f5f5;
  color: #666;
}

.withdraw-modal-body {
  flex: 1;
  padding: 24px 32px;
  overflow-y: auto;
  background: #fff;
}

.withdraw-form-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.withdraw-form-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.withdraw-form-label {
  font-family: Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: #333;
}

.withdraw-form-input {
  width: 100%;
}

.withdraw-form-input :deep(.el-input__wrapper) {
  height: 48px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  transition: all 0.3s;
  background: #fff;
  box-shadow: none;
}

.withdraw-form-input :deep(.el-input__wrapper:hover) {
  border-color: #409eff;
}

.withdraw-form-input :deep(.el-input__wrapper.is-focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.withdraw-form-input :deep(.el-input__inner) {
  height: 48px;
  font-size: 16px;
  font-family: Arial, sans-serif;
  font-weight: 400;
  line-height: 18px;
  color: #333;
}

.withdraw-form-input :deep(.el-input__inner::placeholder) {
  color: #c0c4cc;
}

.withdraw-form-tip {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: #666;
  padding: 10px 14px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #409eff;
}

.withdraw-method-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media screen and (min-width: 576px) {
  .withdraw-method-container {
    flex-direction: row;
  }
}

.withdraw-method-option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fff;
  min-height: 50px;
}

.withdraw-method-option:hover {
  border-color: #409eff;
  background: #f0f9ff;
}

.withdraw-method-option.active {
  border-color: #409eff;
  background: #f0f9ff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.withdraw-method-icon {
  font-size: 20px;
  color: #409eff;
}

.withdraw-method-text {
  font-family: Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  color: #333;
}

.withdraw-modal-footer {
  padding: 16px 32px 24px;
  border-top: 1px solid #f0f0f0;
  background: #fff;
}

.withdraw-modal-btn {
  width: 100%;
  height: 48px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  cursor: pointer;
  transition: all 0.3s;
}

.withdraw-modal-btn:hover:not(:disabled) {
  background: #555;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.withdraw-modal-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


</style>

 