<template>
  <div class="pc-my-container">
    <div class="dashboard-wrapper">

      <div class="profile-banner">
        <div class="banner-glow"></div>

        <div class="banner-content">
          <div class="user-profile">
            <div class="avatar-group" @click.stop="showUpload = true" :title="t('点击更换头像')">
              <img class="avatar-level-badge" v-if="userInfo.level && userInfo.level.level != 0" :src="userInfo.level.img" />
              
              <el-avatar
                  :src="userInfo.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg'"
                  :size="88"
                  class="user-avatar"
              ></el-avatar>
              <div class="avatar-overlay">
                <el-icon><Camera /></el-icon>
              </div>
            </div>

            <div class="user-meta">
              <h2 class="username">
                {{ userInfo.first_name || t('未设置用户名') }}
                <el-icon class="edit-icon" @click.stop="openEditInfoModal"><EditPen /></el-icon>
              </h2>
              <div class="user-id">
                <span class="label">ID:</span>
                <span class="value">{{ userInfo.user_id || t('--') }}</span>
              </div>
              <div class="user-id" style="margin-left: 8px;">
                <span class="label">{{ t('邀请码') }}:</span>
                <span class="value">{{ userInfo.user_code ||'--' }}</span>
                <el-icon 
                  class="copy-icon" 
                  v-if="userInfo.user_code" 
                  @click.stop="copyCode(userInfo.user_code)" 
                  :title="t('复制')"
                ><CopyDocument /></el-icon>
              </div>

              <div class="level-progress-wrapper" v-if="userInfo.level && userInfo.level.level != 0">
                <div class="level-info">
                  <span class="level-name">{{ userInfo.level.level_name }}</span>
                  <span class="level-tips" v-if="userInfo.next_level">
                    {{ t('距升级') }} {{ userInfo.next_level.level_name }} {{ t('还需') }} <span class="hl">{{ Math.max(0, Number(userInfo.next_level.recharge) - Number(userInfo.total_recharge || 0)).toFixed(2) }}</span> {{ t('成长值') }}
                  </span>
                  <span class="level-tips" v-else>{{ t('已达到最高等级') }}</span>
                </div>
                <div class="progress-bar-container">
                  <div class="progress-track">
                    <div class="progress-fill" :style="{ width: userInfo.next_level ? Math.min((Number(userInfo.total_recharge || 0) / Number(userInfo.next_level.recharge)) * 100, 100) + '%' : '100%' }"></div>
                  </div>
                  <div class="progress-value">
                    <span v-if="userInfo.next_level">{{ Number(userInfo.total_recharge || 0).toFixed(2) }} / {{ Number(userInfo.next_level.recharge).toFixed(2) }}</span>
                    <span v-else>{{ Number(userInfo.total_recharge || 0).toFixed(2) }} / MAX</span>
                  </div>
                </div>
              </div>

            </div>
          </div>

          <div class="user-assets">
            <div class="asset-title">{{ t('账户总余额') }}</div>
            <div class="asset-amount tmc">
              <span class="currency">¥</span>
              <span class="number">{{ userInfo.money || '0.00' }}</span>
            </div>
            <div class="asset-frozen">
              <el-icon class="frozen-icon"><Lock /></el-icon>
              <span>{{ t('冻结金额') }}: ¥{{ userInfo.frozen_money }}</span>
            </div>
          </div>

          <div class="user-actions">
            <el-button type="primary" class="action-btn" size="large" @click="showRechargeModal = true">
              <el-icon class="btn-icon"><Wallet /></el-icon>
              {{ t('充值') }}
            </el-button>
            <el-button type="primary" plain class="action-btn outline-btn" size="large" @click="showWithdraw = true">
              <el-icon class="btn-icon"><Money /></el-icon>
              {{ t('提现') }}
            </el-button>
            <el-button class="action-btn logout-btn" size="large" @click="goLogout">
              <el-icon class="btn-icon"><SwitchButton /></el-icon>
            </el-button>
          </div>
        </div>
      </div>

      <div class="features-section">
        <h3 class="section-title">
          <span class="title-decorate bmc"></span>
          <span class="title-text">{{ t('常用功能') }}</span>
        </h3>

        <div class="features-grid">
          
          <div class="feature-card" @click="goPage('Yuebao')">
            <div class="icon-box"><el-icon><Coin /></el-icon></div>
            <div class="text-box">
              <div class="title">{{ t('余额宝') }}</div>
              <div class="desc">{{ t('灵活存取，稳健收益') }}</div>
            </div>
          </div>

          <div class="feature-card" @click="goPage('Promotion')">
            <div class="icon-box"><el-icon><Present /></el-icon></div>
            <div class="text-box">
              <div class="title">{{ t('优惠活动') }}</div>
              <div class="desc">{{ t('查看最新的优惠活动') }}</div>
            </div>
          </div>

          <div class="feature-card" @click="goPage('fundRecord')">
            <div class="icon-box"><el-icon><List /></el-icon></div>
            <div class="text-box">
              <div class="title">{{ t('资金记录') }}</div>
              <div class="desc">{{ t('查看账户资金变动明细') }}</div>
            </div>
          </div>

          <div class="feature-card" @click="goPage('rechargeRecord')">
            <div class="icon-box"><el-icon><DocumentAdd /></el-icon></div>
            <div class="text-box">
              <div class="title">{{ t('充值记录') }}</div>
              <div class="desc">{{ t('查询历史存款订单') }}</div>
            </div>
          </div>

          <div class="feature-card" @click="goPage('withdrawalHistory')">
            <div class="icon-box"><el-icon><DocumentRemove /></el-icon></div>
            <div class="text-box">
              <div class="title">{{ t('提现记录') }}</div>
              <div class="desc">{{ t('查询历史提款订单') }}</div>
            </div>
          </div>

          <div class="feature-card" @click="goPage('AllHistory')">
            <div class="icon-box"><el-icon><DataBoard /></el-icon></div>
            <div class="text-box">
              <div class="title">{{ t('投注历史') }}</div>
              <div class="desc">{{ t('回顾您的所有注单') }}</div>
            </div>
          </div>

          <div class="feature-card" @click="goPage('Safety')">
            <div class="icon-box"><el-icon><Lock /></el-icon></div>
            <div class="text-box">
              <div class="title">{{ t('账户安全') }}</div>
              <div class="desc">{{ t('修改密码与安全验证') }}</div>
            </div>
          </div>

           <div class="feature-card" @click="showWalletManagement = true">
            <div class="icon-box"><el-icon><Wallet /></el-icon></div>
            <div class="text-box">
              <div class="title">{{ t('钱包管理') }}</div>
              <div class="desc">{{ t('管理您的钱包和资金') }}</div>
            </div>
          </div>
        </div>
      </div>

      <pcFooter />
    </div>

    <el-dialog
        v-model="showUpload"
        :title="t('更换头像')"
        width="400px"
        center
        class="custom-dark-dialog"
        align-center
    >
      <div class="uploader-box" v-if="showUpload">
        <CUploadImage @change="changeImg" :maxCount="1" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button class="cancel-btn" @click="showUpload = false">{{ t('取消') }}</el-button>
          <el-button type="primary" @click="saveAvatar">{{ t('保存') }}</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
        v-model="showEditInfo"
        :title="t('修改联系方式')"
        width="450px"
        center
        class="custom-dark-dialog"
        align-center
    >
      <div class="edit-info-form">
        <div class="form-item">
          <div class="form-label">{{ t('电话') }}</div>
          <el-input
              v-model="infoForm.phone"
              :placeholder="t('请输入电话号码')"
              class="dark-input"
              @keyup.enter="submitEditInfo"
          />
        </div>

        <div class="form-item">
          <div class="form-label">{{ t('电子邮箱') }}</div>
          <el-input
              v-model="infoForm.email"
              :placeholder="t('请输入电子邮箱')"
              class="dark-input"
              @keyup.enter="submitEditInfo"
          />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button class="cancel-btn" @click="showEditInfo = false">{{ t('取消') }}</el-button>
          <el-button type="primary" @click="submitEditInfo">{{ t('保存') }}</el-button>
        </span>
      </template>
    </el-dialog>

    <RechargeModal v-model="showRechargeModal" @success="handleRechargeSuccess" />
    <WithdrawModal v-model="showWithdraw" @success="fetchData" />
    <WalletManagement v-model="showWalletManagement" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  Camera, EditPen, Wallet, Money, SwitchButton,
  List, DocumentAdd, DocumentRemove, DataBoard, Lock, CopyDocument, Present, Coin
} from '@element-plus/icons-vue';

import pcFooter from '@/businessComponents/pcFooter/index.vue'
import RechargeModal from '@/businessComponents/RechargeModal/index.vue';
import WithdrawModal from '@/businessComponents/WithdrawModal/index.vue';
import CUploadImage from '@/components/CUploadImage/index.vue';
import { getUserInfo, updateUserInfo, logout, getYuebaoItemList } from '@/request/api.js';
import WalletManagement from '@/businessComponents/WalletManagement/index.vue';

getYuebaoItemList()
const router = useRouter();
const { t } = useI18n();

const userInfo = ref({});

// ================== 头像上传 ==================
const showUpload = ref(false);
const userSubmitData = ref({ avatar: '' });

function changeImg(e) {
  userSubmitData.value.avatar = Array.isArray(e) ? e[0] : e;
}

function saveAvatar() {
  if (!userSubmitData.value.avatar) {
    return ElMessage.warning(t('请先选择头像'));
  }
  updateUserInfo({ avatar: userSubmitData.value.avatar }).then(() => {
    showUpload.value = false;
    getData();
  });
}

// ================== 编辑个人信息 ==================
const showEditInfo = ref(false);
// 仅保留电话、邮箱
const infoForm = reactive({
  phone: '',
  email: ''
});

// 打开弹窗并回填
function openEditInfoModal() {
  infoForm.phone = userInfo.value.phone || '';
  infoForm.email = userInfo.value.email || '';
  showEditInfo.value = true;
}

// 提交修改
function submitEditInfo() {
  updateUserInfo({
    phone: infoForm.phone,
    email: infoForm.email
  }).then(() => {
    showEditInfo.value = false;
    getData();
  });
}

// ================== 充值 ==================
const showRechargeModal = ref(false);

const handleRechargeSuccess = () => {
  console.log('充值提交成功！这里可以刷新你的余额接口 getData()');
}

// ================== 提现 ==================
const showWithdraw = ref(false);
const fetchData = () => { /* 刷新余额等操作 */ }

// ================== 钱包管理 ==================
const showWalletManagement = ref(false);

// ================== 复制邀请码 ==================
function copyCode(text) {
  if (!text) return;
  // 优先使用 navigator.clipboard
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(text).then(() => {
      ElMessage.success(t('复制成功'));
    }).catch(() => {
      ElMessage.error(t('复制失败'));
    });
  } else {
    // 兼容方案
    const textArea = document.createElement("textarea");
    textArea.value = text;
    textArea.style.position = "absolute";
    textArea.style.opacity = "0";
    textArea.style.left = "-999999px";
    textArea.style.top = "-999999px";
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    try {
      document.execCommand('copy');
      ElMessage.success(t('复制成功'));
    } catch (err) {
      ElMessage.error(t('复制失败'));
    }
    document.body.removeChild(textArea);
  }
}

// ================== 公共逻辑 ==================
function getData() {
  getUserInfo().then(res => {
    userInfo.value = res.data;
  }).catch(err => {
    console.error(err);
  });
}

function goPage(name) {
  router.push({ name });
}

function goLogout() {
  ElMessageBox.confirm(
      t('确定要退出登录吗？'),
      t('提示'),
      {
        confirmButtonText: t('确定'),
        cancelButtonText: t('取消'),
        type: 'warning',
      }
  ).then(() => {
    logout().then(() => {
      localStorage.removeItem("token");
      localStorage.removeItem("youke_token");
      localStorage.removeItem("userInfo");
      router.replace('/login');
    });
  }).catch(() => {});
}

onMounted(() => {
  getData();
});
</script>

<style scoped lang="scss">
$card-bg: #2e2e2e;
$main-color: #f8b932;
$text-normal: #a3a6ad;
$border-color: rgba(255, 255, 255, 0.08);

.pc-my-container {
  /* 声明顶级盒子为容器查询基准点 */
  container-type: inline-size;
  container-name: my-container;

  width: 100%;
  min-height: 100%;
  padding: 24px; /* 整体外边距压缩 */
  box-sizing: border-box;
  background-color: transparent;

  @container my-container (max-width: 800px) { padding: 12px; }
  @container my-container (max-width: 550px) { padding: 8px; }

  .dashboard-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px; /* 板块间距压缩 */
    box-sizing: border-box;

    @container my-container (max-width: 800px) { gap: 16px; }
    @container my-container (max-width: 550px) { gap: 12px; }
  }

  /* =======================================
     1. 顶部个人资料横幅 (智能流式重组优化版)
     ======================================= */
  .profile-banner {
    position: relative; width: 100%; box-sizing: border-box; background-color: $card-bg; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 32px;

    @container my-container (max-width: 920px) { padding: 24px; }
    @container my-container (max-width: 550px) { padding: 16px; }

    .banner-glow { position: absolute; top: -50%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(248,185,50,0.1) 0%, rgba(30,30,30,0) 70%); pointer-events: none; z-index: 0; }

    .banner-content {
      position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center;
      gap: 24px; /* 增加整体间距，防止直接贴近 */

      /* 容器缩小时允许换行重组，门槛上调至 920px，保证大屏下也不拥挤 */
      @container my-container (max-width: 920px) { flex-wrap: wrap; }
      @container my-container (max-width: 550px) { flex-direction: column; align-items: stretch; gap: 16px; }
    }

    /* 头像与用户名区 */
    .user-profile {
      display: flex; align-items: center; gap: 20px; flex: 1 1 30%; min-width: 260px; /* 保证最小宽度 */

      /* 920px时：头像区独占一行并居中，底部加分割线 */
      @container my-container (max-width: 920px) {
        flex: 1 1 100%; justify-content: center; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 24px; margin-bottom: 8px;
      }
      /* 550px时：恢复靠左对齐，间距进一步缩小 */
      @container my-container (max-width: 550px) {
        justify-content: flex-start; padding-bottom: 16px; margin-bottom: 0; gap: 16px;
      }

      .avatar-group {
        position: relative; cursor: pointer; border-radius: 50%; padding: 4px; background: linear-gradient(135deg, rgba(248,185,50,0.5) 0%, rgba(30,30,30,0) 100%); transition: transform 0.3s ease;
        
        /* 新增：等级图标样式 */
        .avatar-level-badge {
          position: absolute;
          z-index: 2;
          top: -12px;
          left: 50%;
          transform: translateX(-50%);
          width: 56px;
          height: auto;
          pointer-events: none;
        }

        .user-avatar {
          border: 2px solid $card-bg;
          @container my-container (max-width: 920px) { width: 72px !important; height: 72px !important; }
          @container my-container (max-width: 550px) { width: 60px !important; height: 60px !important; }
        }
        .avatar-overlay { position: absolute; inset: 4px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; opacity: 0; transition: opacity 0.3s; }
        &:hover { transform: scale(1.05); .avatar-overlay { opacity: 1; } }
      }

      .user-meta {
        .username {
          font-size: 24px; color: #fff; margin: 0 0 6px 0; display: flex; align-items: center; gap: 10px; font-weight: 800;
          @container my-container (max-width: 920px) { font-size: 20px; }
          @container my-container (max-width: 550px) { font-size: 18px; gap: 8px; margin: 0 0 4px 0;}
          .edit-icon { font-size: 16px; color: #888; cursor: pointer; transition: color 0.3s; &:hover { color: $main-color; } }
        }
        .user-id {
          font-size: 12px; color: $text-normal; background: rgba(255, 255, 255, 0.05); padding: 2px 10px; border-radius: 20px; display: inline-block; border: 1px solid rgba(255, 255, 255, 0.05);
          .label { margin-right: 4px; color: #777; }
          .value { color: #ccc; }
          .copy-icon { margin-left: 6px; cursor: pointer; color: #888; font-size: 13px; vertical-align: -2px; transition: color 0.3s; &:hover { color: $main-color; } }
        }

        /* 新增：等级进度条样式 */
        .level-progress-wrapper {
          margin-top: 14px;
          background: rgba(248, 185, 50, 0.05);
          border: 1px solid rgba(248, 185, 50, 0.15);
          border-radius: 8px;
          padding: 10px 14px;
          width: 100%;
          min-width: 250px;
          box-sizing: border-box;

          @container my-container (max-width: 920px) { min-width: unset; width: 100%; }

          .level-info {
            display: flex;
            align-items: center;
            margin-bottom: 8px;

            .level-name {
              font-size: 14px;
              font-weight: 800;
              color: $main-color;
              font-style: italic;
              margin-right: 8px;
            }

            .level-tips {
              font-size: 12px;
              color: #999;
              .hl { color: $main-color; font-weight: bold; margin: 0 4px; }
            }
          }

          .progress-bar-container {
            display: flex;
            align-items: center;
            gap: 12px;

            .progress-track {
              flex: 1;
              height: 6px;
              background: rgba(255, 255, 255, 0.1);
              border-radius: 3px;
              overflow: hidden;

              .progress-fill {
                height: 100%;
                background: linear-gradient(90deg, #f8d384 0%, #f8b932 100%);
                border-radius: 3px;
                transition: width 0.3s ease;
              }
            }

            .progress-value {
              font-size: 12px;
              color: #888;
              white-space: nowrap;
              font-family: DIN, monospace;
            }
          }
        }
      }
    }

    /* 余额与冻结金额区 */
    .user-assets {
      flex: 1 1 30%; min-width: 220px; display: flex; flex-direction: column; align-items: center; padding: 0 24px;
      border-left: 1px solid rgba(255,255,255,0.08); border-right: 1px solid rgba(255,255,255,0.08);

      /* 920px时：居左排列，去掉左边框，平分下半部分 */
      @container my-container (max-width: 920px) { border-left: none; border-right: none; align-items: flex-start; padding: 0; }
      /* 550px时：加个暗色底座凸显余额 */
      @container my-container (max-width: 550px) { align-items: center; background: rgba(0,0,0,0.2); padding: 16px; border-radius: 8px; margin-bottom: 0; }

      .asset-title { font-size: 13px; color: #999; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; @container my-container (max-width: 550px) { font-size: 12px; margin-bottom: 4px; } }
      .asset-amount {
        font-size: 36px; font-weight: 900; text-shadow: 0 2px 10px rgba(248,185,50,0.2); line-height: 1.1;
        @container my-container (max-width: 920px) { font-size: 28px; }
        @container my-container (max-width: 550px) { font-size: 24px; }
        .currency { font-size: 20px; margin-right: 4px; font-weight: bold; @container my-container (max-width: 920px) { font-size: 16px; } }
        .number { font-family: DIN, monospace; }
      }
      /* 冻结金额专属样式 */
      .asset-frozen {
        margin-top: 8px; font-size: 13px; color: #e6a23c; background: rgba(230, 162, 60, 0.1); padding: 4px 12px; border-radius: 20px; display: flex; align-items: center; gap: 4px; border: 1px solid rgba(230, 162, 60, 0.2);
        @container my-container (max-width: 550px) { font-size: 12px; margin-top: 8px; }
        .frozen-icon { font-size: 14px; }
      }
    }

    /* 操作按钮区 */
    .user-actions {
      flex: 1 1 auto; min-width: 260px; display: flex; justify-content: flex-end; align-items: center; gap: 12px;

      /* 920px时：居右排列 */
      @container my-container (max-width: 920px) { justify-content: flex-end; }
      /* 550px时：三个按钮平分宽度，撑满屏幕 */
      @container my-container (max-width: 550px) { justify-content: space-between; gap: 8px; }

      .action-btn {
        height: 44px; padding: 0 20px; font-size: 14px; font-weight: bold; border-radius: 6px;
        @container my-container (max-width: 920px) { height: 38px; padding: 0 16px; font-size: 13px; }
        @container my-container (max-width: 550px) { height: 36px; padding: 0; flex: 1; display: flex; justify-content: center; }
        .btn-icon { margin-right: 6px; font-size: 16px; @container my-container (max-width: 550px) { margin-right: 4px; font-size: 14px;} }
      }

      .outline-btn { background: transparent; color: $main-color; border: 1px solid $main-color; &:hover { background: rgba(248,185,50,0.1); } }
      .logout-btn {
        padding: 0 12px; background: rgba(245, 108, 108, 0.1); color: #f56c6c; border-color: rgba(245, 108, 108, 0.3); transition: .2s;
        @container my-container (max-width: 550px) { flex: 0 0 44px; padding: 0; } 
        &:hover { background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(255, 255, 255, 0.8); color: #555; }
        .btn-icon { margin-right: 0; }
      }
    }
  }

  /* =======================================
     2. 常用功能宫格区 (降维打击重构)
     ======================================= */
  .features-section {
    width: 100%; box-sizing: border-box;

    .section-title {
      display: flex; align-items: center; margin: 0 0 16px 0;
      .title-decorate { display: inline-block; width: 4px; height: 16px; border-radius: 2px; margin-right: 10px; }
      .title-text { font-size: 18px; color: #ffffff; font-weight: 900; text-shadow: 0 2px 4px rgba(0,0,0,0.4); @container my-container (max-width: 550px) { font-size: 16px; } }
    }

    .features-grid {
      display: grid; gap: 16px;

      /* 响应式列数自动调整 */
      grid-template-columns: repeat(4, 1fr);
      @container my-container (max-width: 1200px) { grid-template-columns: repeat(3, 1fr); }
      @container my-container (max-width: 900px) { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      @container my-container (max-width: 550px) { grid-template-columns: repeat(2, 1fr); gap: 10px; }

      .feature-card {
        background-color: $card-bg; border-radius: 10px; padding: 20px 16px; display: flex; align-items: center; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.03); transition: all 0.3s ease; box-sizing: border-box;

        /* 极限小屏：强制将图标和文字从左右排布改为上下排布 (App 宫格风格) */
        @container my-container (max-width: 550px) {
          flex-direction: column; justify-content: center; text-align: center; padding: 16px 8px; gap: 10px;
        }

        .icon-box {
          width: 44px; height: 44px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); display: flex; align-items: center; justify-content: center; font-size: 20px; color: #888; margin-right: 12px; transition: all 0.3s ease; flex-shrink: 0;
          @container my-container (max-width: 550px) { margin-right: 0; width: 40px; height: 40px; font-size: 18px; border-radius: 8px; }
        }

        .text-box {
          flex: 1; overflow: hidden; width: 100%;
          .title { font-size: 15px; font-weight: bold; color: #ffffff; margin-bottom: 4px; transition: color 0.3s; @container my-container (max-width: 550px) { font-size: 13px; margin-bottom: 2px; } }
          .desc { font-size: 12px; color: #888; transition: color 0.3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @container my-container (max-width: 550px) { font-size: 11px; } }
        }

        &:hover {
          transform: translateY(-2px); background-color: #383838; border-color: rgba(248, 185, 50, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
          .icon-box { background: rgba(248, 185, 50, 0.1); color: $main-color; }
          .text-box .title { color: $main-color; }
          .text-box .desc { color: #a3a6ad; }
        }
      }
    }
  }

  .uploader-box { display: flex; justify-content: center; padding: 20px 0; }
}
</style>

<style lang="scss">
/* =======================================
   3. 全局弹窗样式补充 (增加移动端宽度自适应)
   ======================================= */
.custom-dark-dialog {
  background-color: #2e2e2e !important;
  border: 1px solid #2e2e2e !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;

  /* 手机端弹窗宽度自适应，避免溢出屏幕 */
  @media screen and (max-width: 550px) {
    width: 90% !important;
  }

  .el-dialog__header {
    margin-right: 0;
    border-bottom: 1px solid #444;
    padding-bottom: 15px;
  }

  .el-dialog__title { color: #ffffff !important; font-weight: bold !important; font-size: 16px !important; }
  .el-dialog__headerbtn .el-dialog__close { color: #999999 !important; }
  .el-dialog__headerbtn:hover .el-dialog__close { color: #ffffff !important; }

  .cancel-btn {
    background: transparent !important; color: #cccccc !important; border: 1px solid #444444 !important;
    &:hover { border-color: #666666 !important; color: #ffffff !important; background: #333333 !important; }
  }
}

.edit-info-form {
  padding: 10px; display: flex; flex-direction: column; gap: 16px;

  .form-item {
    .form-label { font-size: 13px; color: #bbbbbb; margin-bottom: 6px; }
    .dark-input {
      .el-input__wrapper {
        background-color: #1a1a1a !important; box-shadow: 0 0 0 1px #444444 inset !important; height: 40px; transition: all 0.3s;
        &:hover, &.is-focus { box-shadow: 0 0 0 1px #666666 inset !important; }
      }
      .el-input__inner { color: #ffffff !important; font-size: 13px !important; &::placeholder { color: #666666 !important; } }
    }
  }
}
</style>