<template>
  <div class="profile-container">
    <!-- 未登录状态 -->
    <div v-if="!userStore.isLoggedIn" class="login-prompt">
      <div class="login-card">
        <div class="login-icon">
          <div class="icon-circle">
            <div class="lock-icon">🔒</div>
          </div>
        </div>
        <div class="login-content">
          <h3>登录账号</h3>
          <p>登录后查看个人信息和使用记录</p>
          <div class="login-actions">
            <router-link to="/login" class="btn btn-primary">立即登录</router-link>
            <router-link to="/register" class="btn btn-secondary">快速注册</router-link>
          </div>
        </div>
      </div>
    </div>

    <!-- 已登录状态 -->
    <div v-else>
      <!-- 用户信息红色区域 -->
      <div class="user-header">
        <!-- 用户信息加载状态 -->
        <div v-if="userInfoLoading" class="user-info-loading">
          <div class="loading-spinner">正在更新用户信息...</div>
        </div>
        <div v-else>
          <!-- 用户信息 -->
          <div class="user-content">
        <div class="user-avatar">
          <div class="avatar-circle">
            <img v-if="userStore.user.avatar" :src="userStore.user.avatar" alt="头像" class="avatar-img" />
            <div v-else class="avatar-icon">{{ userInitial }}</div>
          </div>
        </div>
        <div class="user-info">
          <div class="user-name">
            {{ displayUsername }}
            <button class="edit-btn" @click="showEditProfile" title="编辑资料">
              <svg viewBox="0 0 24 24" class="edit-icon">
                <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
              </svg>
            </button>
          </div>
          <div class="user-level">
              <span class="level-badge" :class="getVipBadgeClass()">
                {{ getVipTypeLabel() }}
            </span>
            </div>
              <div class="expire-date">有效期：{{ formattedExpireDate }}</div>
          </div>
            <div class="logout-btn" @click="handleLogout">
              退出登录
        </div>
            <div class="service-btn" @click="showCustomerService">
              <img src="/assets/home/kefu.svg" alt="客服" class="service-icon" />
              联系客服
          </div>
        </div>
        
          <!-- 功能卡片 -->
          <div class="quick-actions">
            <div class="action-item" @click="showComingSoon">
              <div class="action-icon">
                <img src="/assets/home/qianbao.svg" alt="账户充值" />
            </div>
              <span class="action-text">账户充值</span>
            </div>
            <div class="action-item" @click="$router.push('/exchange-records')">
              <div class="action-icon">
                <img src="/assets/home/dingdan.svg" alt="消费明细" />
          </div>
              <span class="action-text">消费明细</span>
        </div>
            <div class="action-item" @click="showMemberExchange">
              <div class="action-icon">
                <img src="/assets/home/duihuan.svg" alt="会员兑换" />
              </div>
              <span class="action-text">会员兑换</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 会员权益展示 -->
      <div class="vip-benefits">
        <div class="benefits-header">
          <h3>会员权益</h3>
        </div>
        <div class="benefits-grid">
          <div class="benefit-item" @click="$router.push('/lottery-info')">
            <div class="benefit-icon">
              <el-icon size="36" color="#e53e3e"><View /></el-icon>
            </div>
            <span class="benefit-text">开奖信息查询</span>
          </div>
          <div class="benefit-item" @click="$router.push('/data-analysis')">
            <div class="benefit-icon">
              <el-icon size="36" color="#e53e3e"><TrendCharts /></el-icon>
            </div>
            <span class="benefit-text">三性数据分析</span>
          </div>
          <div class="benefit-item" @click="$router.push('/')">
            <div class="benefit-icon">
              <el-icon size="36" color="#e53e3e"><Star /></el-icon>
            </div>
            <span class="benefit-text">开奖推测辅助</span>
          </div>
          <div class="benefit-item" @click="$router.push('/predict-records')">
            <div class="benefit-icon">
              <el-icon size="36" color="#e53e3e"><Download /></el-icon>
            </div>
            <span class="benefit-text">推测数据备份</span>
          </div>
          <div class="benefit-item" @click="openAIAssistant">
            <div class="benefit-icon">
              <el-icon size="36" color="#e53e3e"><Comment /></el-icon>
            </div>
            <span class="benefit-text">AI深度互动</span>
          </div>
          <div class="benefit-item" @click="$router.push('/help-center')">
            <div class="benefit-icon">
              <el-icon size="36" color="#e53e3e"><Reading /></el-icon>
            </div>
            <span class="benefit-text">推测行为分析</span>
          </div>
        </div>
      </div>

      <!-- 会员续费提醒 -->
      <div v-if="userStore.user?.vipType === '体验会员'" class="vip-renewal-notice">
                  <div class="renewal-content">
            <div class="renewal-icon">
              <el-icon size="28" color="#e53e3e"><Warning /></el-icon>
            </div>
            <div class="renewal-text">
            <h4>体验会员</h4>
            <p>您当前为体验会员，升级为付费会员可享受更多权益。<span class="renewal-link" @click="showCustomerService">去升级</span></p>
          </div>
        </div>
      </div>

      <!-- 功能列表 -->
      <div class="function-list">
        <div class="function-list-item" @click="$router.push('/predict-records')">
          <div class="function-icon">
            <img src="/assets/home/tuice.svg" alt="推测记录" />
            </div>
          <div class="function-label">推测记录</div>
          <div class="function-arrow">›</div>
          </div>
        <div class="function-list-item" @click="$router.push('/usage-stats')">
          <div class="function-icon">
            <img src="/assets/home/tongji.svg" alt="使用统计" />
            </div>
          <div class="function-label">使用统计</div>
          <div class="function-arrow">›</div>
          </div>
        <div class="function-list-item" @click="$router.push('/hit-analysis')">
          <div class="function-icon">
            <img src="/assets/home/mingzhong.svg" alt="命中分析" />
            </div>
          <div class="function-label">命中分析</div>
          <div class="function-arrow">›</div>
          </div>
        <div class="function-list-item" @click="$router.push('/prize-statistics')">
          <div class="function-icon">
            <img src="/assets/home/jiangjing.svg" alt="奖金统计" />
            </div>
          <div class="function-label">奖金统计</div>
          <div class="function-arrow">›</div>
          </div>
        <div class="function-list-item" @click="$router.push('/help-center')">
          <div class="function-icon">
            <img src="/assets/home/help.svg" alt="帮助中心" />
            </div>
          <div class="function-label">帮助中心</div>
          <div class="function-arrow">›</div>
          </div>
        <div class="function-list-item" @click="$router.push('/about-us')">
          <div class="function-icon">
            <img src="/assets/home/about.svg" alt="关于我们" />
            </div>
          <div class="function-label">关于我们</div>
          <div class="function-arrow">›</div>
        </div>
        <div class="function-list-item" @click="$router.push('/member-agreement')">
          <div class="function-icon">
            <svg t="1769669390151" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4914" width="32" height="32"><path d="M212.502804 931.4304h559.104l-75.4688-135.9872c-16.2816-29.2864-47.3088-47.5136-81.1008-47.5136H119.114004c-14.336 0-27.4432 7.5776-34.5088 19.968-7.0656 12.288-6.8608 27.4432 0.512 39.6288l48.0256 79.36c16.6912 27.648 46.7968 44.544 79.36 44.544z m553.2672-173.8752l93.7984 168.96c50.4832-14.9504 85.0944-60.928 85.0944-113.0496V184.32c0-24.3712-9.728-47.7184-27.136-64.9216-17.408-17.2032-40.96-26.8288-65.536-26.8288H269.949204c-51.0976 0-92.5696 41.0624-92.5696 91.7504v484.9664h-29.0816 466.8416c62.5664 0 120.32 33.8944 150.6304 88.2688z m-617.5744-88.2688h-50.176V184.32c0-94.1056 77.0048-170.3936 171.9296-170.3936H851.990804c45.6704 0 89.3952 17.92 121.6512 49.8688 32.256 31.9488 50.3808 75.264 50.3808 120.5248v629.1456c0 52.1216-20.8896 102.1952-58.1632 139.0592-37.2736 36.864-87.6544 57.5488-140.3904 57.5488H212.605204c-60.416 0-116.4288-31.4368-147.456-82.7392l-48.128-79.36C-5.097196 811.52-5.711596 766.1568 15.485204 729.088c21.0944-36.9664 60.7232-59.8016 103.6288-59.8016h29.0816z m0 0" fill="#d81e06" p-id="4915"></path><path d="M415.459604 538.2144c-14.2336 0-27.2384-7.4752-34.4064-19.6608-7.0656-12.1856-7.0656-27.136 0-39.3216 7.0656-12.1856 20.1728-19.6608 34.4064-19.6608h291.0208c14.4384-0.4096 27.9552 7.0656 35.2256 19.3536 7.3728 12.288 7.3728 27.648 0 39.936s-20.8896 19.7632-35.2256 19.3536H415.459604zM415.459604 328.4992c-14.4384 0.4096-27.9552-7.0656-35.2256-19.3536-7.3728-12.288-7.3728-27.648 0-39.936s20.8896-19.7632 35.2256-19.3536h291.0208c14.4384-0.4096 27.9552 7.0656 35.2256 19.3536 7.3728 12.288 7.3728 27.648 0 39.936s-20.8896 19.7632-35.2256 19.3536H415.459604z" fill="#d81e06" p-id="4916"></path></svg>
            </div>
          <div class="function-label">会员服务协议</div>
          <div class="function-arrow">›</div>
        </div>
        <div class="function-list-item" @click="$router.push('/user-guide')">
          <div class="function-icon">
            <svg t="1769669432843" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5982" width="32" height="32"><path d="M660.784116 90.432639l0 0.373507-297.577442 82.402755L65.634348 90.807169l0 760.358461 297.573349 82.401732 297.577442-82.401732 0-0.918929 297.580512 83.321684L958.365652 164.826999 660.784116 90.432639zM546.39588 820.388672c-9.019421 9.480932-19.812231 14.22191-32.385595 14.22191-12.100596 0-22.661116-4.674463-31.674397-14.026458-9.020444-9.353019-13.524015-21.169135-13.524015-35.45756 0-14.027481 4.448312-25.77913 13.345959-35.264155 8.896624-9.479909 19.512403-14.219863 31.852452-14.219863 12.573363 0 23.366174 4.807493 32.385595 14.416338 9.014304 9.612938 13.524015 21.301142 13.524015 35.068703C559.919894 799.153022 555.410184 810.909787 546.39588 820.388672zM670.95885 438.730253c-12.811794 24.681122-34.287921 50.653657-64.416102 77.92886-24.201192 22.081924-40.455387 39.616276-48.75747 52.602032-8.3072 12.992919-12.456706 31.172977-12.456706 54.55143l0 30.393217L483.403197 654.205792l0-33.509185c0-27.27725 4.982478-50.717102 14.947434-70.331835 9.964956-19.61064 27.759227-40.328497 53.383838-62.148455 25.145703-21.297049 43.119053-41.23617 53.918004-59.811224 10.793834-18.568914 16.192797-39.938618 16.192797-64.09683 0-25.716708-8.364505-46.88482-25.091468-63.512523-16.726963-16.620539-39.448454-24.936949-68.154239-24.936949-45.321208 0-84.880179 20.203134-119.580492 61.666478-11.109012 13.273305-50.256614 21.579481-47.425126-23.8942 1.733481-27.840068 47.425126-60.760852 47.425126-60.760852 39.859823-27.275203 83.040275-40.912805 129.545448-40.912805 46.266743 0 83.101673 13.31526 110.50479 39.938618 27.403117 26.629497 41.10621 61.503772 41.10621 104.619756C690.177564 386.651131 683.770644 414.054247 670.95885 438.730253z" fill="#d81e06" p-id="5983"></path></svg>
            </div>
          <div class="function-label">使用指南</div>
          <div class="function-arrow">›</div>
        </div>

      </div>
    </div>

    <!-- 版权信息 -->
    <div class="copyright-section">
      <div class="copyright-content">
        <p class="copyright-text">© 2026 西安溢彩数智科技有限公司</p>
        <p class="icp-info">
          <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">陕ICP备2025084645号-1</a>
          <span class="separator">|</span>
          <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=61019002003624" target="_blank" rel="noopener noreferrer" class="police-link">
            <img src="https://www.staroceanwisdom.com/assets/jinghui-1_QVWmWl.png" alt="公安备案" class="police-icon" />
            陕公网安备 61019002003624号
          </a>
        </p>
        <p class="license-info">经营许可证编号：陕B2-20260040</p>
      </div>
    </div>

    <!-- 提示弹窗 -->
    <div v-if="showModal" class="modal-overlay" @click="hideModal">
      <div class="modal-content" @click.stop>
        <h3>{{ modalTitle }}</h3>
        <p>{{ modalMessage }}</p>
        <button class="btn btn-primary" @click="hideModal">确定</button>
      </div>
    </div>

    <!-- 退出登录确认弹窗 -->
    <div v-if="showLogoutConfirm" class="modal-overlay" @click="cancelLogout">
      <div class="modal-content logout-modal" @click.stop>
        <h3>退出登录</h3>
        <p>确定要退出当前账号吗？</p>
        <div class="modal-actions">
          <button class="btn btn-secondary" @click="cancelLogout">取消</button>
          <button class="btn btn-danger" @click="confirmLogout">确定退出</button>
        </div>
      </div>
    </div>

    <!-- 会员兑换弹窗 -->
    <div v-if="showMemberExchangeModal" class="modern-modal-overlay" @click="hideMemberExchange">
      <div class="modern-modal-content member-exchange-modal" @click.stop>
        <!-- 关闭按钮 -->
        <button class="modal-close-btn" @click="hideMemberExchange">
          <span>×</span>
        </button>
        
        <!-- 头部图标和标题 -->
        <div class="modal-header">
          <div class="modal-icon">
            <img src="/assets/home/duihuan.svg" alt="会员兑换" />
          </div>
          <h3 class="modal-title">会员兑换</h3>
          <p class="modal-subtitle">请输入您的会员兑换码，立即享受专属服务</p>
        </div>
        
        <!-- 输入区域 -->
        <div class="modal-body">
          <div class="input-group">
            <div class="input-wrapper">
          <input 
            v-model="exchangeCode" 
            type="text" 
            placeholder="请输入兑换码" 
                class="modern-input"
            maxlength="20"
          />
              <div class="input-focus-border"></div>
        </div>
          </div>
          <!-- 会员服务协议勾选 -->
          <div class="agreement-checkbox">
            <label class="checkbox-label">
              <input type="checkbox" v-model="agreeTerms" />
              <span class="checkbox-text">我已阅读并同意<a href="javascript:;" class="agreement-link">《会员服务协议》</a></span>
            </label>
          </div>
        </div>
        
        <!-- 按钮区域 -->
        <div class="modal-footer">
          <button class="modern-btn cancel-btn" @click="hideMemberExchange">
            <span>取消</span>
          </button>
          <button class="modern-btn primary-btn" @click="confirmExchange">
            <span>确认兑换</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 客服二维码弹窗 -->
    <div v-if="showCustomerServiceModal" class="modern-modal-overlay" @click="hideCustomerService">
      <div class="modern-modal-content customer-service-modal" @click.stop>
        <!-- 关闭按钮 -->
        <button class="modal-close-btn" @click="hideCustomerService">
          <span>×</span>
        </button>
        
        <!-- 头部图标和标题 -->
        <div class="modal-header">
          <div class="modal-icon service-icon-bg">
            <img src="/assets/home/kefu.svg" alt="在线客服" />
          </div>
          <h3 class="modal-title">在线客服</h3>
          <p class="modal-subtitle">扫描二维码联系客服，享受专业服务</p>
        </div>
        
        <!-- 二维码区域 -->
        <div class="modal-body">
          <div class="qrcode-wrapper">
        <div class="qrcode-container">
          <img src="/assets/home/erweima.png" alt="客服二维码" class="qrcode-image" />
        </div>
          </div>
        </div>
        
        <!-- 按钮区域 -->
        <div class="modal-footer">
          <button class="modern-btn cancel-btn" @click="downloadQRCode">
            <span>下载二维码</span>
          </button>
          <button class="modern-btn primary-btn" @click="hideCustomerService">
            <span>关闭</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 编辑用户信息弹窗 -->
    <div v-if="showEditProfileModal" class="modern-modal-overlay" @click="hideEditProfile">
      <div class="modern-modal-content edit-profile-modal" @click.stop>
        <!-- 关闭按钮 -->
        <button class="modal-close-btn" @click="hideEditProfile">
          <span>×</span>
        </button>
        
        <!-- 头像区域 -->
        <div class="avatar-section">
          <div class="avatar-upload">
            <div class="avatar-preview" :class="{ 'uploading': uploadingAvatar }">
              <img v-if="editForm.userAvatar" :src="editForm.userAvatar" alt="头像" />
              <div v-else class="avatar-placeholder">{{ editForm.userName ? editForm.userName.charAt(0) : 'U' }}</div>
              <div v-if="uploadingAvatar" class="upload-overlay">
                <div class="upload-spinner"></div>
              </div>
            </div>
            <button class="upload-btn" @click="triggerFileUpload" :disabled="uploadingAvatar">
              <svg viewBox="0 0 24 24" class="camera-icon">
                <path d="M12 15.2c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
                <path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm11 14H4V6h4.05l1.83-2h4.24l1.83 2H20v10z"/>
              </svg>
              {{ uploadingAvatar ? '上传中...' : '更换头像' }}
            </button>
            <input type="file" ref="avatarInput" @change="handleAvatarChange" accept="image/*" style="display: none;" />
          </div>
        </div>
        
        <!-- 表单区域 -->
        <div class="modal-body edit-form">
          <div class="form-grid">
            <!-- 左列 -->
            <div class="form-column">
              <div class="form-item readonly">
                <label>会员ID</label>
                <div class="input-wrapper">
                  <input type="text" :value="editForm.id" readonly />
                </div>
              </div>
              
              <div class="form-item">
                <label>昵称</label>
                <div class="input-wrapper">
                  <input type="text" v-model="editForm.userName" placeholder="请输入昵称" />
                </div>
              </div>
              
              <div class="form-item">
                <label>手机号码</label>
                <div class="input-wrapper">
                  <input type="tel" :value="editForm.phone" readonly />
                </div>
              </div>
              
              <div class="form-item readonly">
                <label>等级</label>
                <div class="input-wrapper">
                  <input type="text" :value="editForm.userRole === 'admin' ? '管理员' : '普通用户'" readonly />
                </div>
              </div>
              
              <div class="form-item readonly">
                <label>套餐类别</label>
                <div class="input-wrapper">
                  <input type="text" :value="editForm.vipType || '体验会员'" readonly />
                </div>
              </div>
              
              <div class="form-item">
                <label>性别</label>
                <div class="input-wrapper">
                  <CustomSelect
                    v-model="editForm.gender"
                    :options="[
                      { value: 1, label: '男' },
                      { value: 0, label: '女' }
                    ]"
                    placeholder="请选择性别"
                  />
                </div>
              </div>
              
              <div class="form-item">
                <label>所在省市</label>
                <div class="input-wrapper">
                  <input type="text" v-model="editForm.location" placeholder="如：北京市" />
                </div>
              </div>
              
              <div class="form-item">
                <label>彩票种类偏好</label>
                <div class="input-wrapper">
                  <input type="text" v-model="editForm.preference" placeholder="如：双色球、大乐透" />
                </div>
              </div>
              
              <div class="form-item">
                <label>获客渠道</label>
                <div class="input-wrapper">
                  <input type="text" v-model="editForm.channel" placeholder="如：微信推广" />
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 按钮区域 -->
        <div class="modal-footer">
          <button class="modern-btn cancel-btn" @click="hideEditProfile">
            <span>取消</span>
          </button>
          <button class="modern-btn primary-btn" @click="saveUserInfo" :disabled="savingUserInfo">
            <span>{{ savingUserInfo ? '保存中...' : '保存' }}</span>
          </button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { userStore } from '../store/user'
import { lotteryApi } from '../api/index.js'
import QRCode from 'qrcode'
import { ElIcon, ElTable, ElTableColumn, ElMessage } from 'element-plus'
import CustomSelect from '../components/CustomSelect.vue'
import {
  View,
  TrendCharts,
  Star,
  Download,
  Comment,
  Reading,
  Collection,
  Tickets,
  ShoppingBag,
  Warning
} from '@element-plus/icons-vue'

export default {
  name: 'Profile',
  components: {
    ElIcon,
    View,
    TrendCharts,
    Star,
    Download,
    Comment,
    Reading,
    Collection,
    ElTable,
    ElTableColumn,
    Tickets,
    ShoppingBag,
    Warning,
    CustomSelect
  },
  data() {
    return {
      userStore,
      showModal: false,
      modalTitle: '',
      modalMessage: '',
      showLogoutConfirm: false,
      showMemberExchangeModal: false,
      showCustomerServiceModal: false,
      showEditProfileModal: false,
      savingUserInfo: false,
      uploadingAvatar: false,
      exchangeCode: '',
      agreeTerms: true,
      statsLoading: false,
      userInfoLoading: false,
      detailedStatsLoading: false,
      userStats: {
        predictCount: 0,
        pendingCount: 0,
        hitCount: 0,
        hitRate: '0.00'
      },
      detailedStats: {
        firstBall: { hitCount: 0, totalCount: 0, hitRate: 0 },
        blueBall: { hitCount: 0, totalCount: 0, hitRate: 0 },
        redBall: { totalHitCount: 0, totalPredictedCount: 0, hitRate: 0 },
        prize: { totalPrize: 0, prizeDetails: [] }
      },
      editForm: {
        id: '',
        userAccount: '',
        userRole: '',
        userName: '',
        userAvatar: '',
        phone: '',
        gender: 2,
        location: '',
        preference: '',
        channel: '',
        createTime: '',
        vipType: '',
        vipExpire: ''
      }
    }
  },
  async mounted() {
    // 进入页面时重新获取用户信息，确保数据是最新的
    if (this.userStore.isLoggedIn) {
      await this.refreshUserInfo()
    } else {
      // 如果未登录，跳转到登录页面
      console.log('用户未登录，跳转到登录页面')
      this.$router.push('/login')
    }
    
    // 初始检测设备类型
    this.checkDeviceType();

  },
  async activated() {
    if (this.userStore.isLoggedIn) {
      await this.refreshUserInfo()
    }
  },
  beforeUnmount() {
    // 移除事件监听
    window.removeEventListener('resize', this.checkDeviceType);
  },
  computed: {
    userStore() {
      return userStore
    },
    isVip() {
      return this.userStore.user?.vipLevel > 0
    },
    vipExpireDate() {
      if (!this.userStore.user?.vipExpireTime) return ''
      return new Date(this.userStore.user.vipExpireTime).toLocaleDateString()
    },
    filteredPrizeDetails() {
      // 过滤掉未中奖的记录
      return this.detailedStats.prize.prizeDetails?.filter(item => item.prizeLevel !== '未中奖') || []
    },
    // 计算用户头像首字母
    userInitial() {
      console.log('用户数据:', this.userStore.user) // 调试信息
      if (this.userStore.user && this.userStore.user.username) {
        return this.userStore.user.username.charAt(0).toUpperCase()
      }
      return '👤'
    },
    // 计算显示的账号
    displayUsername() {
      if (this.userStore.user && this.userStore.user.username) {
        return this.userStore.user.username
      }
      return '未知用户'
    },
    // 格式化有效期显示
    formattedExpireDate() {
      if (this.userStore.user && this.userStore.user.expireDate) {
        const date = new Date(this.userStore.user.expireDate)
        return date.toISOString().split('T')[0] // 只取日期部分 YYYY-MM-DD
      }
      return '2025-06-30'
    },
    
    // 检查会员是否已过期
    isVipExpired() {
      if (!this.userStore.user || !this.userStore.user.expireDate) {
        return false
      }
      
      const expireDate = new Date(this.userStore.user.expireDate)
      const currentDate = new Date()
      // 设置时间为当天23:59:59，确保在到期当天还能使用
      currentDate.setHours(23, 59, 59, 999)
      
      return expireDate < currentDate
    }
  },
  methods: {


    // 刷新用户信息（统一方法）
    async refreshUserInfo() {
      this.userInfoLoading = true
      try {
        console.log('重新获取用户信息')
        await this.userStore.fetchLoginUser()
        
        // 检查用户状态是否被禁用 (status为1表示禁用)
        if (this.userStore.user && this.userStore.user.status === 1) {
          this.modalTitle = '账号异常'
          this.modalMessage = '您的账号已被禁用，请联系管理员。'
          this.showModal = true
          
          // 延迟跳转到登录页
          setTimeout(() => {
            this.$router.push('/login')
          }, 2000) // 2秒后跳转
          return // 禁用状态下不再加载统计数据
        }

        // 获取用户信息成功后，不再获取统计数据
        // 统计数据已移至专门的页面
      } catch (error) {
        console.error('获取用户信息失败:', error)
        // fetchLoginUser内部已经处理了logout，如果失败会跳转到登录页
      } finally {
        this.userInfoLoading = false
      }
    },

    // 获取用户统计数据
    async fetchUserStats() {
      if (!this.userStore.user || !this.userStore.user.id) {
        console.log('用户ID不存在，无法获取统计数据')
        return
      }

      this.statsLoading = true
      try {
        console.log('正在获取用户统计数据，用户ID:', this.userStore.user.id)
        const response = await lotteryApi.getUserPredictStat(this.userStore.user.id)
        
        if (response && response.success && response.data) {
          this.userStats = {
            predictCount: response.data.predictCount || 0,
            pendingCount: response.data.pendingCount || 0,
            hitCount: response.data.hitCount || 0,
            hitRate: response.data.hitRate || '0.00'
          }
          console.log('获取用户统计数据成功:', this.userStats)
        } else {
          console.error('获取用户统计数据失败:', response)
          this.showModal = true
          this.modalTitle = '获取数据失败'
          this.modalMessage = response?.message || '无法获取统计数据，请稍后重试'
        }
      } catch (error) {
        console.error('获取用户统计数据出错:', error)
        this.showModal = true
        this.modalTitle = '网络错误'
        this.modalMessage = '获取统计数据时发生网络错误，请检查网络连接'
      } finally {
        this.statsLoading = false
      }
    },

    // 获取详细统计数据
    async fetchDetailedStats() {
      if (!this.userStore.user || !this.userStore.user.id) {
        console.log('用户ID不存在，无法获取详细统计数据');
        return;
      }

      this.detailedStatsLoading = true;
      try {
        console.log('正在获取详细统计数据，用户ID:', this.userStore.user.id);
        
        const [firstBallRes, blueBallRes, redBallRes, prizeRes] = await Promise.all([
          lotteryApi.getFirstBallHitRate(),
          lotteryApi.getBlueBallHitRate(),
          lotteryApi.getRedBallHitRate(),
          lotteryApi.getPrizeStatistics()
        ]);

        if (firstBallRes.success) this.detailedStats.firstBall = firstBallRes.data;
        if (blueBallRes.success) this.detailedStats.blueBall = blueBallRes.data;
        if (redBallRes.success) this.detailedStats.redBall = redBallRes.data;
        if (prizeRes.success) this.detailedStats.prize = prizeRes.data;

        console.log('获取详细统计数据成功:', this.detailedStats);

      } catch (error) {
        console.error('获取详细统计数据出错:', error);
        this.$message.error('获取详细统计数据时发生网络错误');
      } finally {
        this.detailedStatsLoading = false;
      }
    },

    showComingSoon() {
      this.modalTitle = '功能开发中'
      this.modalMessage = '该功能正在开发中，敬请期待！'
      this.showModal = true
    },


    
    showUpgradeInfo() {
      // 直接弹出客服咨询窗口
      this.showCustomerService()
    },

    showMemberExchange() {
      this.showMemberExchangeModal = true
      this.exchangeCode = ''
    },

    hideMemberExchange() {
      this.showMemberExchangeModal = false
      this.exchangeCode = ''
    },

    async confirmExchange() {
      if (!this.exchangeCode.trim()) {
        this.modalTitle = '提示'
        this.modalMessage = '请输入兑换码'
        this.showModal = true
        return
      }

      // 检查用户是否已登录
      if (!this.userStore.user || !this.userStore.user.id) {
        this.modalTitle = '提示'
        this.modalMessage = '请先登录后再进行会员兑换'
        this.showModal = true
        return
      }

      try {
        console.log('正在激活会员码，用户ID:', this.userStore.user.id, '兑换码:', this.exchangeCode)
        
        // 调用后端激活会员码接口
        const response = await lotteryApi.activateVipCode(this.userStore.user.id, this.exchangeCode)
        
        if (response && response.success) {
          this.hideMemberExchange()
          this.modalTitle = '兑换成功'
          this.modalMessage = '会员码激活成功！您的会员权限已生效，感谢您的使用。'
          this.showModal = true
          
          // 重新获取用户信息以更新会员状态
          try {
            await this.userStore.fetchLoginUser()
          } catch (error) {
            console.error('更新用户信息失败:', error)
          }
        } else {
          this.hideMemberExchange()
          this.modalTitle = '兑换失败'
          this.modalMessage = response?.message || '会员码激活失败，请检查兑换码是否正确。'
          this.showModal = true
        }
      } catch (error) {
        console.error('激活会员码失败:', error)
        this.hideMemberExchange()
        this.modalTitle = '兑换失败'
        this.modalMessage = error?.response?.data?.message || '会员码无效或已过期，请检查后重试。'
        this.showModal = true
      }
    },
    
    hideModal() {
      this.showModal = false
    },
    
    async handleLogout() {
      this.showLogoutConfirm = true
    },

    async confirmLogout() {
      this.showLogoutConfirm = false
      try {
        // 调用后端退出登录接口，清除session
        await lotteryApi.userLogout()
        console.log('服务端退出登录成功')
      } catch (error) {
        console.error('服务端退出登录失败:', error)
        // 即使服务端退出失败，也要清除本地状态
      }
      
      // 清除本地用户状态和统计数据
      userStore.logout()
      this.userStats = {
        predictCount: 0,
        pendingCount: 0,
        hitCount: 0,
        hitRate: '0.00'
      }
      
      // 跳转到登录页面
      this.$router.push('/login')
    },

    cancelLogout() {
      this.showLogoutConfirm = false
    },

    async showCustomerService() {
      this.showCustomerServiceModal = true
    },

    hideCustomerService() {
      this.showCustomerServiceModal = false
    },

    // 显示编辑用户信息弹窗
    async showEditProfile() {
      try {
        // 获取最新的用户信息
        const response = await lotteryApi.getUserInfo()
        if (response.code === 0 && response.data) {
          const user = response.data
          this.editForm = {
            id: user.id,
            userAccount: user.userAccount,
            userRole: user.userRole,
            userName: user.userName || '',
            userAvatar: user.userAvatar || '',
            phone: user.phone || '',
            gender: user.gender !== null ? user.gender : 2,
            location: user.location || '',
            preference: user.preference || '',
            channel: user.channel || '',
            createTime: user.createTime,
            vipType: user.vipType,
            vipExpire: user.vipExpire
          }
          this.showEditProfileModal = true
        } else {
          ElMessage.error('获取用户信息失败')
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
        ElMessage.error('获取用户信息失败，请稍后重试')
      }
    },

    // 隐藏编辑用户信息弹窗
    hideEditProfile() {
      this.showEditProfileModal = false
    },

    // 保存用户信息
    async saveUserInfo() {
      // 验证手机号
      if (this.editForm.phone && this.editForm.phone.length !== 11) {
        ElMessage.error('手机号格式不正确，请输入11位手机号')
        return
      }

      this.savingUserInfo = true
      try {
        const updateData = {
          id: this.editForm.id,
          userName: this.editForm.userName,
          userAvatar: this.editForm.userAvatar,
          phone: this.editForm.phone,
          gender: parseInt(this.editForm.gender),
          location: this.editForm.location,
          preference: this.editForm.preference,
          channel: this.editForm.channel
        }

        const response = await lotteryApi.updateUserInfo(updateData)
        if (response.code === 0) {
          ElMessage.success('保存成功！')
          this.hideEditProfile()
          // 刷新用户信息
          await this.refreshUserInfo()
        } else {
          ElMessage.error(response.message || '保存失败')
        }
      } catch (error) {
        console.error('保存用户信息失败:', error)
        ElMessage.error('保存失败，请稍后重试')
      } finally {
        this.savingUserInfo = false
      }
    },

    // 触发文件上传
    triggerFileUpload() {
      console.log('triggerFileUpload 被调用')
      console.log('avatarInput ref:', this.$refs.avatarInput)
      if (this.$refs.avatarInput) {
        this.$refs.avatarInput.click()
      } else {
        console.error('avatarInput ref 不存在')
      }
    },

    // 处理头像上传
    async handleAvatarChange(event) {
      console.log('handleAvatarChange 被调用', event)
      const file = event.target.files[0]
      console.log('选择的文件:', file)
      if (!file) return

      // 验证文件类型
      if (!file.type.startsWith('image/')) {
        ElMessage.error('请选择图片文件')
        return
      }

      // 验证文件大小（限制2MB）
      if (file.size > 2 * 1024 * 1024) {
        ElMessage.error('图片大小不能超过2MB')
        return
      }

      this.uploadingAvatar = true
      try {
        // 显示上传提示
        ElMessage.info('正在上传头像...')
        
        console.log('开始调用上传接口...')
        // 调用上传接口
        const response = await lotteryApi.uploadFile(file)
        console.log('上传接口响应:', response)
        
        if (response.code === 0 && response.data && response.data.fileUrl) {
          // 上传成功，设置头像URL
          this.editForm.userAvatar = response.data.fileUrl
          ElMessage.success('头像上传成功！')
        } else {
          ElMessage.error(response.message || '头像上传失败')
        }
      } catch (error) {
        console.error('头像上传失败:', error)
        ElMessage.error('头像上传失败，请稍后重试')
      } finally {
        this.uploadingAvatar = false
        // 清空文件输入框，允许重新选择同一文件
        event.target.value = ''
      }
    },

    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    },

    async generateQRCode() {
      // 已移除：使用图片替代生成二维码
    },

    showQRCodeError() {
      // 已移除：使用图片替代生成二维码
    },

    downloadQRCode() {
      try {
        // 直接下载图片
        const link = document.createElement('a')
        link.download = '客服二维码.png'
        link.href = '/assets/home/erweima.png'
        link.click()
      } catch (error) {
        console.error('下载二维码失败:', error)
        this.modalTitle = '错误'
        this.modalMessage = '下载二维码失败，请稍后重试'
        this.showModal = true
      }
    },

    // 格式化命中率，保留两位小数
    formatHitRate(rate) {
      if (!rate || rate === '0.00') {
        return '0.00'
      }
      
      // 如果是字符串，先转换为数字
      const numRate = typeof rate === 'string' ? parseFloat(rate) : rate
      
      // 保留两位小数
      return numRate.toFixed(2)
    },

    // 检查是否为移动设备（基于屏幕宽度）
    checkDeviceType() {
      const isMobile = window.innerWidth <= 768;
      console.log('设备类型检测:', isMobile ? '移动设备' : 'PC设备', '屏幕宽度:', window.innerWidth);
      return isMobile;
    },

    // 打开AI助手
    openAIAssistant() {
      // 通过发送自定义事件来触发App.vue中的showAIAssistant方法
      const event = new CustomEvent('showAIAssistant');
      window.dispatchEvent(event);
    },

    // 显示统计信息弹窗 - 现在直接跳转到统计页面
    showStatsModal() {
      this.$router.push('/usage-stats')
    },

    // 获取会员类型标签
    getVipTypeLabel() {
      const vipType = this.userStore.user?.vipType
      if (vipType === '体验会员') return '体验会员'
      if (vipType === '月度会员') return '月度会员'
      if (vipType === '年度会员') return '年度会员'
      return '体验会员'
    },

    // 获取会员类型样式类
    getVipBadgeClass() {
      const vipType = this.userStore.user?.vipType
      if (vipType === '年度会员') return 'vip-annual'
      if (vipType === '月度会员') return 'vip-monthly'
      return 'vip-trial'
    }
  }
}
</script>

<style scoped>
/* 用户中心容器 */
.profile-container {
  min-height: calc(100vh - 85px);
  background: #f5f5f5;
  padding: 0 0 0px 0;
  width: 100%;
}

/* 登录提示卡片 */
.login-prompt {
  padding: 30px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 160px);
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.login-card {
  background: white;
  border-radius: 20px;
  padding: 50px 30px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  max-width: 380px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.login-icon {
  margin-bottom: 20px;
}

.icon-circle {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #e53e3e, #ff6b6b);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.lock-icon {
  font-size: 32px;
  color: white;
}

.login-content h3 {
  color: #333;
  margin-bottom: 10px;
  font-size: 20px;
}

.login-content p {
  color: #666;
  margin-bottom: 25px;
  font-size: 14px;
}

.login-actions {
  display: flex;
  gap: 15px;
}

.btn {
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
  flex: 1;
}

.btn-primary {
  background: linear-gradient(135deg, #e53e3e, #ff6b6b);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
}

.btn-secondary {
  background: #f8f9fa;
  color: #666;
  border: 1px solid #e0e0e0;
}

.btn-secondary:hover {
  background: #e9ecef;
  border-color: #ccc;
}

/* 用户信息红色区域 */
.user-header {
  background: linear-gradient(to top, #e53e3e, #ff6b6b);
  padding: 25px 20px 80px 20px;
  color: white;
  position: relative;
}

.user-content {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.user-avatar {
  flex-shrink: 0;
}

.avatar-circle {
  width: 70px;
  height: 70px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border: 3px solid rgba(255, 255, 255, 0.3);
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-icon {
  font-size: 30px;
  font-weight: bold;
  color: #e53e3e;
  background: linear-gradient(135deg, #e53e3e, #ff6b6b);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
  color: white;
}

.user-level {
  margin-bottom: 8px;
}

.level-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
}

/* 会员样式 */
.level-badge.vip-member {
  background: #ffd700;
  color: #b45309;
  box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3);
}

/* 年度会员样式 */
.level-badge.vip-annual {
  background: #ffd700;
  color: #b45309;
  box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3);
}

/* 月度会员样式 */
.level-badge.vip-monthly {
  background: #87ceeb;
  color: #0066cc;
  box-shadow: 0 2px 6px rgba(135, 206, 235, 0.3);
}

/* 体验版用户样式 */
.level-badge.trial-user,
.level-badge.vip-trial {
  background: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
}

.expire-date {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 3px;
}

/* 注销按钮 */
.logout-btn {
  position: absolute;
  top: 25px;
  right: 20px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.logout-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.service-btn {
  position: absolute;
  top: 42%;
  right: 0px;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #ffd700, #ffb347);
  color: #8B4513;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 25px 0 0 25px;
  padding: 10px 20px 10px 18px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
  font-weight: 600;
  box-shadow: 0 3px 12px rgba(255, 215, 0, 0.4);
  display: flex;
  align-items: center;
  gap: 6px;
}

.service-btn:hover {
  background: linear-gradient(135deg, #ffed4a, #ffc947);
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 215, 0, 0.5);
}

.service-icon {
  width: 20px;
  height: 20px;
  filter: brightness(0.7);
}

/* 快捷功能区 */
.quick-actions {
  position: absolute;
  bottom: -30px;
  left: 20px;
  right: 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  z-index: 10;
  overflow: hidden;
}

.action-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 10px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease;
}

.action-item:hover {
  background-color: #f8f9fa;
}

.action-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15px;
  bottom: 15px;
  width: 1px;
  background-color: #e9ecef;
}

.action-icon {
  margin-bottom: 8px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 225, 221, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(255, 225, 221, 0.4);
}

.action-icon img {
  width: 28px;
  height: 28px;
}

.action-text {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

/* 会员权益展示 */
.vip-benefits {
  background: white;
  margin: 55px 20px 0 20px;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.benefits-header {
  text-align: left;
  margin-bottom: 8px;
  padding-left: 10px;
}

.benefits-header h3 {
  color: #333;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.3px;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 15px 10px;
  border-radius: 12px;
  background: transparent;
  transition: all 0.3s ease;
  cursor: pointer;
}

.benefit-item:hover {
  background: rgba(0, 0, 0, 0.03);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.benefit-item:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.benefit-text {
  font-size: 13px;
  font-weight: 500;
  color: #333;
  line-height: 1.2;
}


/* 会员续费提醒 */
.vip-renewal-notice {
  background: linear-gradient(135deg, #fff3cd, #ffeaa7);
  margin: 15px 20px 0 20px;
  border-radius: 12px;
  padding: 15px;
  border: 1px solid #ffc107;
}

.renewal-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

  .renewal-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

.renewal-text h4 {
  color: #856404;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 5px 0;
}

.renewal-text p {
  color: #664d03;
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

.renewal-link {
  color: #e53e3e;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

/* 功能图标 */
.function-icon {
  width: 24px;
  height: 24px;
  margin: 0 auto 8px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.function-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.function-label {
  font-size: 12px;
  color: #333;
  font-weight: 500;
  line-height: 1.2;
}

/* 功能列表 */
.function-list {
  background: white;
  margin: 15px 20px 0 20px;
  padding: 0;
  border-radius: 15px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.function-list-item {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.3s;
  background: white;
}

.function-list-item:hover {
  background-color: #f8f9fa;
}

.function-list-item:first-child {
  border-radius: 15px 15px 0 0;
}

.function-list-item:last-child {
  border-bottom: none;
  border-radius: 0 0 15px 15px;
}

.function-list-item:first-child:last-child {
  border-radius: 15px;
}

.function-list-item .function-icon {
  margin: 0 15px 0 0;
  width: 24px;
  height: 24px;
}

.function-list-item .function-label {
  flex: 1;
  font-size: 16px;
  color: #333;
  margin: 0;
}

.function-arrow {
  color: #ccc;
  font-size: 18px;
  font-weight: bold;
}



/* 现代化弹窗样式 */
.modern-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
}

.modern-modal-content {
  background: white;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 360px;
  width: 90%;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
  animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  to { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 关闭按钮 */
.modal-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.modal-close-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(1.1);
}

.modal-close-btn span {
  font-size: 16px;
  color: #666;
  line-height: 1;
}

/* 弹窗头部 */
.modal-header {
  padding: 24px 24px 20px 24px;
  text-align: center;
  background: linear-gradient(135deg, #f8f9ff, #fff);
}

.modal-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px auto;
  background: linear-gradient(135deg, #e53e3e, #ff6b6b);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(229, 62, 62, 0.3);
}

.modal-icon img {
  width: 26px;
  height: 26px;
  filter: brightness(0) invert(1);
}

.modal-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 6px 0;
  letter-spacing: -0.5px;
}

.modal-subtitle {
  font-size: 13px;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

/* 弹窗主体 */
.modal-body {
  padding: 0 24px 20px 24px;
}

.input-group {
  position: relative;
}


.input-wrapper {
  position: relative;
}

.modern-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e8e8e8;
  border-radius: 12px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: #fafafa;
  color: #333;
  font-weight: 500;
  letter-spacing: 0.5px;
  box-sizing: border-box;
}

.modern-input::placeholder {
  color: #999;
  font-weight: 400;
}

.modern-input:focus {
  border-color: #ddd;
  background: white;
  outline: none;
}

.input-focus-border {
  display: none;
}

/* 会员服务协议勾选框 */
.agreement-checkbox {
  margin-top: 15px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 13px;
  color: #666;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  cursor: pointer;
  accent-color: #e53e3e;
}

.checkbox-text {
  line-height: 1.4;
}

.agreement-link {
  color: #e53e3e;
  text-decoration: none;
}

.agreement-link:hover {
  text-decoration: underline;
}

/* 弹窗底部 */
.modal-footer {
  padding: 16px 24px 20px 24px;
  display: flex;
  gap: 8px;
}

.modern-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.modern-btn:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.modern-btn:active:before {
  width: 300px;
  height: 300px;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
  border: 2px solid transparent;
}

.cancel-btn:hover {
  background: #ebebeb;
  color: #333;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.primary-btn {
  background: linear-gradient(135deg, #e53e3e, #ff6b6b);
  color: white;
  border: 2px solid transparent;
  box-shadow: 0 4px 16px rgba(229, 62, 62, 0.3);
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(229, 62, 62, 0.4);
}

.primary-btn:active {
  transform: translateY(0);
}

/* 响应式设计 */
@media (max-width: 480px) {
  .modern-modal-content {
    margin: 20px;
    width: calc(100% - 40px);
    border-radius: 18px;
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .modal-header {
    padding-top: 20px;
    padding-bottom: 16px;
  }
  
  .modal-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  
  .modal-icon img {
    width: 24px;
    height: 24px;
  }
  
  .modal-title {
    font-size: 18px;
  }
  
  .modal-subtitle {
    font-size: 12px;
  }
  
  .modern-input {
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 10px;
  }
  
  .modern-btn {
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 10px;
  }

  .modal-footer {
    padding: 14px 20px 18px 20px;
    gap: 6px;
  }
}



/* 模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 12px;
  max-width: 300px;
  width: 90%;
  text-align: center;
}

.modal-content h3 {
  margin-bottom: 15px;
  color: #333;
}

.modal-content p {
  margin-bottom: 20px;
  color: #666;
  line-height: 1.5;
}

.modal-content .btn {
  width: 100px;
  margin: 0 auto;
}

/* 退出登录确认弹窗 */
.logout-modal {
  max-width: 350px;
}

.logout-modal h3 {
  color: #f44336;
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 600;
}

.logout-modal p {
  margin-bottom: 25px;
  color: #666;
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.modal-actions .btn {
  width: 100px;
  margin: 0;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-danger {
  background: linear-gradient(135deg, #f44336, #e57373);
  color: white;
  border: none;
}

.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

/* 客服弹窗现代化样式 */
.customer-service-modal {
  max-width: 380px;
  width: 90%;
}

/* 客服图标特殊样式 */
.service-icon-bg {
  background: linear-gradient(135deg, #25d366, #128c7e) !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3) !important;
}

.service-icon-bg img {
  filter: brightness(0) invert(1) !important;
}

/* 二维码包装器 */
.qrcode-wrapper {
  display: flex;
  justify-content: center;
}

.qrcode-container {
  padding: 20px;
  background: linear-gradient(135deg, #f8fffe, #e8f8f5);
  border-radius: 20px;
  border: 2px solid #e0f2f1;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.1);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.qrcode-container::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #25d366, #128c7e, #25d366);
  border-radius: 20px;
  z-index: -1;
  opacity: 0.1;
}

.qrcode-canvas,
.qrcode-image {
  width: 180px;
  height: 180px;
  max-width: 180px;
  max-height: 180px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  background: white;
  padding: 8px;
  display: block;
  border: 2px solid #e0f2f1;
  object-fit: contain;
}


/* 按钮特殊样式覆盖 */
.customer-service-modal .cancel-btn {
  background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
  color: #666;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.customer-service-modal .cancel-btn:hover {
  background: linear-gradient(135deg, #eeeeee, #d5d5d5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.customer-service-modal .primary-btn {
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: white;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
}

.customer-service-modal .primary-btn:hover {
  background: linear-gradient(135deg, #1fbd5a, #0f7a6b);
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.5);
}

/* 响应式设计 */
@media (max-width: 480px) {
  .customer-service-modal {
    max-width: 340px;
  }
  
  .qrcode-canvas,
  .qrcode-image {
    max-width: 160px;
    max-height: 160px;
    padding: 6px;
  }
  
  .qrcode-container {
    padding: 16px;
    border-radius: 16px;
  }
  
}

/* 用户信息加载状态 */
.user-info-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
}

.user-info-loading .loading-spinner {
  color: #666;
    font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-info-loading .loading-spinner::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid #e0e0e0;
  border-top: 2px solid #666;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-container {
    min-height: calc(100vh - 80px);
    padding-bottom: 0px;
  }
  
  .user-header {
    padding: 20px 15px 70px 15px;
  }
  
  .vip-benefits {
    margin: 50px 15px 0 15px;
    padding: 18px;
  }
  
  .benefits-header h3 {
    font-size: 15px;
  }
  
  .benefits-grid {
    gap: 10px;
  }
  
  .benefit-item {
    padding: 12px 8px;
  }
  
  .benefit-icon {
    margin-bottom: 6px;
  }
  
  .benefit-icon .el-icon {
    font-size: 32px !important;
  }
  
  .benefit-text {
    font-size: 12px;
  }

  .vip-renewal-notice {
    margin: 15px 15px 0 15px;
  }
  
  .quick-actions {
    bottom: -30px;
    left: 15px;
    right: 15px;
    border-radius: 14px;
  }
  
  .action-item {
    padding: 16px 8px;
  }

  .action-icon {
    width: 46px;
    height: 46px;
  }

  .action-icon img {
    width: 26px;
    height: 26px;
  }

  .action-text {
    font-size: 13px;
  }

  .function-list {
    margin: 15px 15px 0 15px;
    border-radius: 14px;
  }

  .function-list-item:first-child {
    border-radius: 14px 14px 0 0;
  }

  .function-list-item:last-child {
    border-radius: 0 0 14px 14px;
  }

  .function-list-item:first-child:last-child {
    border-radius: 14px;
  }
  
  .user-content {
    gap: 12px;
    margin-bottom: 20px;
  }
  
  .avatar-circle {
    width: 60px;
    height: 60px;
    border-width: 2px;
  }
  
  .avatar-icon {
    font-size: 24px;
  }
  
  .user-name {
    font-size: 18px;
  }
  
  .logout-btn {
    top: 20px;
    right: 15px;
    padding: 6px 12px;
    font-size: 13px;
  }
  
  .service-btn {
    top: 42%;
    right: 0px;
    transform: translateY(-50%);
    padding: 8px 16px 8px 14px;
    font-size: 14px;
    gap: 5px;
    border-radius: 22px 0 0 22px;
  }
  
  .service-btn:hover {
    transform: translateY(-50%) translateY(-2px);
  }
  
  .service-icon {
    width: 18px;
    height: 18px;
  }
  
  .function-list-item {
    padding: 18px;
  }
  
  .function-list-item .function-label {
    font-size: 15px;
  }
  
  .login-actions {
    flex-direction: column;
  }
  
  .login-card {
    padding: 30px 20px;
    margin: 0 20px;
  }
}

@media (max-width: 480px) {
  .profile-container {
    padding-bottom: 0px;
  }
  
  .user-header {
    padding: 18px 12px 65px 12px;
  }
  
  .vip-benefits {
    margin: 45px 10px 0 10px;
    padding: 15px;
    border-radius: 12px;
  }
  
  .benefits-header {
    margin-bottom: 6px;
  }
  
  .benefits-header h3 {
    font-size: 14px;
  }
  
  .benefits-grid {
    gap: 6px;
  }
  
  .benefit-item {
    padding: 10px 6px;
    border-radius: 10px;
  }
  
  .benefit-icon {
    margin-bottom: 5px;
  }
  
  .benefit-icon .el-icon {
    font-size: 28px !important;
  }
  
  .benefit-text {
    font-size: 11px;
  }

  .vip-renewal-notice {
    margin: 12px 10px 0 10px;
    padding: 12px;
  }
  
  .quick-actions {
    bottom: -28px;
    left: 12px;
    right: 12px;
    border-radius: 12px;
  }
  
  .action-item {
    padding: 14px 6px;
  }

  .action-icon {
    width: 42px;
    height: 42px;
  }

  .action-icon img {
    width: 24px;
    height: 24px;
  }

  .action-text {
    font-size: 12px;
  }

  .function-list {
    margin: 12px 12px 0 12px;
    border-radius: 12px;
  }

  .function-list-item:first-child {
    border-radius: 12px 12px 0 0;
  }

  .function-list-item:last-child {
    border-radius: 0 0 12px 12px;
  }

  .function-list-item:first-child:last-child {
    border-radius: 12px;
  }
  
  .user-content {
    gap: 10px;
    margin-bottom: 18px;
  }
  
  .avatar-circle {
    width: 55px;
    height: 55px;
    border-width: 2px;
  }
  
  .avatar-icon {
    font-size: 22px;
  }
  
  .user-name {
    font-size: 16px;
  }
  
  .logout-btn {
    top: 18px;
    right: 12px;
    padding: 5px 10px;
    font-size: 12px;
  }
  
  .service-btn {
    top: 42%;
    right: 0px;
    transform: translateY(-50%);
    padding: 7px 14px 7px 12px;
  font-size: 13px;
    gap: 4px;
    border-radius: 20px 0 0 20px;
  }
  
  .service-btn:hover {
    transform: translateY(-50%) translateY(-2px);
  }
  
  .service-icon {
    width: 16px;
    height: 16px;
  }
  
  .function-list-item {
    padding: 15px;
  }
  
  .function-list-item .function-icon {
    width: 20px;
    height: 20px;
  }
  
  .function-list-item .function-label {
    font-size: 14px;
  }
  
  .function-arrow {
  font-size: 16px;
  }
  
  .renewal-content {
    gap: 8px;
  }
  
  .renewal-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }
  
  .renewal-icon .el-icon {
    font-size: 22px !important;
  }
  
  .renewal-text h4 {
    font-size: 13px;
  }
  
  .renewal-text p {
    font-size: 11px;
  }
}

/* 编辑按钮样式 */
.user-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.edit-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.edit-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.edit-icon {
  width: 16px;
  height: 16px;
  fill: white;
}

/* 编辑用户信息弹窗样式 */
.edit-profile-modal {
  max-width: 520px;
  width: 90%;
  max-height: 75vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  margin-bottom: 60px;
}

/* 头像区域 */
.avatar-section {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
  padding: 24px 24px;
  display: flex;
  justify-content: center;
  border-radius: 16px 16px 0 0;
  position: relative;
}

.avatar-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.avatar-preview {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid white;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.avatar-preview:hover {
  transform: scale(1.05);
}

.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: bold;
  color: #4a90e2;
  background: linear-gradient(135deg, #f0f4f8 0%, #e8eef5 100%);
}

.upload-btn {
  background: white;
  border: 2px solid #e0e6ed;
  color: #555;
  padding: 8px 18px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.upload-btn:hover {
  background: #4a90e2;
  border-color: #4a90e2;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
}

.upload-btn:hover .camera-icon {
  fill: white;
}

.upload-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f5f5f5;
  border-color: #e0e6ed;
  color: #999;
}

.upload-btn:disabled:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.camera-icon {
  width: 16px;
  height: 16px;
  fill: #555;
  transition: fill 0.3s ease;
}

/* 上传遮罩层 */
.avatar-preview.uploading {
  position: relative;
}

.upload-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.upload-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* 表单区域 */
.edit-profile-modal .modal-body {
  overflow-y: auto;
  padding: 20px 24px;
  flex: 1;
  background: #fafbfc;
}

.edit-form {
  padding: 0;
}

.form-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-item {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  align-items: center;
}

.form-item label {
  font-size: 13px;
  font-weight: 600;
  color: #4a5568;
  padding: 8px 12px;
  border-radius: 8px;
  background: white;
  border: 2px solid #e8eef5;
  text-align: center;
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.input-wrapper {
  position: relative;
}

.input-wrapper input {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #e8eef5;
  border-radius: 10px;
  font-size: 13px;
  transition: all 0.3s ease;
  background: white;
  color: #2d3748;
  box-sizing: border-box;
  font-family: inherit;
}

.input-wrapper input:focus {
  outline: none;
  border-color: #4a90e2;
  background-color: #f7fafc;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.input-wrapper input::placeholder {
  color: #a0aec0;
}

.form-item.readonly .input-wrapper input {
  background-color: #f7fafc;
  color: #718096;
  cursor: not-allowed;
  border-color: #e8eef5;
}

.input-wrapper input[readonly] {
  background-color: #f7fafc;
  color: #718096;
  cursor: not-allowed;
  border-color: #e8eef5;
}

/* 按钮区域 */
.edit-profile-modal .modal-footer {
  background: white;
  border-top: 2px solid #f0f4f8;
  padding: 12px 24px 12px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.edit-profile-modal .modern-btn {
  padding: 11px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 22px;
  transition: all 0.3s ease;
}

.edit-profile-modal .cancel-btn {
  background: white;
  border: 2px solid #e0e6ed;
  color: #4a5568;
}

.edit-profile-modal .cancel-btn:hover {
  background: #f7fafc;
  border-color: #cbd5e0;
  transform: translateY(-1px);
}

.edit-profile-modal .primary-btn {
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
  border: none;
  color: white;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25);
}

.edit-profile-modal .primary-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #357abd 0%, #2868a8 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(74, 144, 226, 0.3);
}

.edit-profile-modal .primary-btn:active:not(:disabled) {
  transform: translateY(0);
}

.edit-profile-modal .primary-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 768px) {
  .edit-profile-modal {
    width: 95%;
    max-height: 90vh;
  }

  .avatar-section {
    padding: 20px 20px;
  }

  .avatar-preview {
    width: 100px;
    height: 100px;
  }

  .avatar-placeholder {
    font-size: 40px;
  }

  .edit-profile-modal .modal-body {
    padding: 24px 20px;
  }

  .form-grid {
    gap: 16px;
  }

  .form-item {
    grid-template-columns: 105px 1fr;
    gap: 12px;
  }

  .form-item label {
    font-size: 13px;
    padding: 8px 10px;
  }

  .input-wrapper input {
    padding: 10px 14px;
    font-size: 13px;
  }

  .edit-profile-modal .modal-footer {
    padding: 10px 20px;
  }

  .edit-profile-modal .modern-btn {
    padding: 8px;
    font-size: 13px;
    border-radius: 20px;
  }
}

/* 版权信息样式 */
.copyright-section {
  background: transparent;
  padding: 12px 16px 20px 16px;
  margin: 0;
}

.copyright-content {
  text-align: center;
}

.copyright-text {
  font-size: 12px;
  color: #666;
  margin: 0 0 8px 0;
  line-height: 1.6;
}

.icp-info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  margin: 0 0 8px 0;
}

.icp-info a {
  color: #666;
  text-decoration: none;
  transition: color 0.3s ease;
}

.icp-info a:hover {
  color: #e53e3e;
}

.license-info {
  font-size: 12px;
  color: #666;
  margin: 0;
  text-align: center;
}

.separator {
  color: #ccc;
}

.police-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.police-icon {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .copyright-section {
    padding: 10px 12px 16px 12px;
  }
  
  .icp-info {
    flex-direction: column;
    gap: 4px;
  }
  
  .separator {
    display: none;
  }
}
</style> 