<template>
  <div class="membership-page page-content">
    <div class="content-wrapper">
      <!-- Banner骨架屏或实际内容 -->
      <div class="banner">
        <template v-if="bannerLoading">
          <el-skeleton animated class="banner-skeleton">
            <template #template>
              <div class="banner-skeleton-container">
                <el-skeleton-item variant="image" class="banner-image-skeleton" />
                <div class="banner-content-skeleton">
                  <el-skeleton-item variant="h1" class="banner-title-skeleton" />
                  <el-skeleton-item variant="text" class="banner-subtitle-skeleton" />
                </div>
              </div>
            </template>
          </el-skeleton>
        </template>
        <template v-else>
          <img 
            :src="bannerImageUrl" 
            alt="banner"
            loading="eager"
            crossorigin="anonymous"
            @load="onBannerImageLoad"
            @error="onBannerImageError"
          >
          <div class="banner-content">
            <h1 class="banner-title">开启订阅，解锁更多能力</h1>
            <p class="banner-subtitle">
              选择合适你的套餐，或<span class="highlight-text">购买积分|会员兑换</span>
            </p>
          </div>
        </template>
      </div>
      <main class="main-content">
        <h1>会员购买</h1>
        <!-- 套餐卡片内容或骨架屏 -->
        <div class="membership-content">
          <div class="plans-section">
            <template v-if="loading">
              <!-- 卡片骨架屏 -->
              <div class="plans-grid skeleton-grid">
                <div v-for="i in 3" :key="i" class="plan-card-skeleton">
                  <el-skeleton animated>
                    <template #template>
                      <div class="card-skeleton-content">
                        <!-- 头部骨架 -->
                        <div class="skeleton-header">
                          <el-skeleton-item variant="circle" class="skeleton-icon" />
                          <el-skeleton-item variant="h3" class="skeleton-title" />
                        </div>
                        <el-skeleton-item variant="text" class="skeleton-desc" />
                        
                        <!-- 价格骨架 -->
                        <div class="skeleton-price">
                          <el-skeleton-item variant="rect" class="skeleton-badge" />
                          <el-skeleton-item variant="text" class="skeleton-price-text" />
                          <el-skeleton-item variant="text" class="skeleton-original-price" />
                        </div>
                        
                        <!-- 按钮骨架 -->
                        <el-skeleton-item variant="button" class="skeleton-button" />
                        
                        <!-- 分割线 -->
                        <el-skeleton-item variant="rect" class="skeleton-divider" />
                        
                        <!-- 详细描述骨架 -->
                        <div class="skeleton-details">
                          <el-skeleton-item variant="text" class="skeleton-detail-item" />
                          <el-skeleton-item variant="text" class="skeleton-detail-item" />
                          <el-skeleton-item variant="text" class="skeleton-detail-item" />
                        </div>
                      </div>
                    </template>
                  </el-skeleton>
                </div>
              </div>
            </template>
            
            <template v-else>
              <div class="plans-grid" v-if="plans.length > 0">
                <div 
                  v-for="(plan, index) in plans" 
                  :key="plan.id"
                  class="plan-card"
                  :class="getPlanCardClass(plan, index)"
                >
                   <!-- 右上角背景图区域 -->
                   <div class="card-bg-icon"></div>
                   
                  <div class="plan-header">
                     <div class="header-row">
                       <img :src="getPlanIconPath(plan, index)" alt="套餐图标" class="plan-header-icon" />
                       <h3 class="plan-title">{{ plan.name || '会员套餐' }}</h3>
                    </div>
                     <div class="plan-desc plan-desc-brief">
                       <p v-if="getFirstLine(plan.description)">{{ getFirstLine(plan.description) }}</p>
                       <p v-else class="no-description">会员权益详情</p>
                  </div>
                </div>
                
                  <!-- 套餐价格描述显示 -->
                  <div class="price-info">
                    <div class="discount-badge">
                      <span class="discount-text">
                        {{ getDiscountPercentage(plan) > 0 ? `${getDiscountPercentage(plan)}%优惠` : '限时特价' }}
                      </span>
                    </div>
                    <div class="price-details">
                      <div class="price-row">
                        <span class="monthly-price">¥{{ getDisplayPrice(plan) }}/{{ getPriceUnit(index) }}</span>
                        <span class="original-price">原价 ¥{{ getOriginalPrice(plan) }}/{{ getPriceUnit(index) }}</span>
                        <span class="daily-average">平均每天 ¥{{ getDailyPrice(plan) }}</span>
                    </div>
                  </div>
                  </div>
            
                  <!-- 按钮区 - 移到第一句描述下面 -->
                  <div class="actions">
                    <button 
                      class="plan-btn"
                      :class="getPlanButtonClass(plan, index)"
                      :disabled="processingPlan === plan.id"
                      @click="handlePurchase(plan, index)"
                    >
                      <span v-if="processingPlan === plan.id" class="loading-spinner"></span>
                      <template v-else>
                        <span class="btn-label">{{ index === 0 ? '立即购买' : '立即充值' }}</span>
                        <span class="btn-price">¥{{ getDisplayPrice(plan) }}/{{ getPriceUnit(index) }}</span>
                      </template>
                    </button>
                </div>

                  <!-- 分界线 -->
                  <div class="divider"></div>
                  
                  <!-- 内容区包裹，详细描述放在按钮下方 -->
                  <div class="plan-content">
                    <!-- 详细描述（从第2行开始） -->
                    <div class="details-list">
                      <template v-if="getRemainingLines(plan.description).length > 0">
                        <p v-for="(line, i) in getRemainingLines(plan.description)" :key="i">{{ line }}</p>
                      </template>
                      <template v-else-if="!getFirstLine(plan.description)">
                        <!-- 如果连第一行描述都没有，显示默认权益 -->
                        <p>享受会员专属服务</p>
                        <p>获得更多功能权限</p>
                        <p>优先客服支持</p>
                      </template>
                      <!-- 如果只有第一行描述而没有详细描述，不显示额外内容 -->
              </div>
            </div>
            
                  
                </div>
                </div>
              <div v-else class="no-plans">
                <p>暂无套餐信息</p>
                </div>
            </template>
              </div>
            
            <div class="benefits-section">

              </div>
            </div>
      </main>
    </div>
  </div>
  <Footer />

  <!-- 登录弹窗 -->
  <LoginModal 
    :visible="showLoginModal" 
    mode="login"
    @close="showLoginModal = false"
    @login="handleLoginSuccess"
  />

  <!-- 支付弹窗 -->
  <PaymentModal 
    :visible="showPaymentModal"
    :planInfo="selectedPlanInfo"
    :subscriptionType="'single'"
    @close="showPaymentModal = false"
    @success="handlePaymentSuccess"
    @failed="handlePaymentFailed"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElSkeleton, ElSkeletonItem } from 'element-plus'
import { getMembershipPlans, getCurrentUser } from '@/api/user.js'
import { useUserStore } from '@/store/user.js'
import LoginModal from '@/components/LoginModal.vue'
import PaymentModal from '@/components/PaymentModal.vue'
import Footer from '@/components/Footer.vue'


// 响应式数据
const loading = ref(true)
const bannerLoading = ref(true) // 专门管理banner图片加载状态
const plans = ref([])

// 使用网络图片URL
const bannerImageUrl = 'https://oss-1818ai-user-img-1302947942.cos.ap-guangzhou.myqcloud.com/%E5%A5%97%E9%A4%90.png'

// 用户状态管理
const userStore = useUserStore()

// 弹窗状态
const showLoginModal = ref(false)
const showPaymentModal = ref(false)
const selectedPlanInfo = ref({})

// 处理中状态
const processingPlan = ref(null)

// 验证和规范化套餐数据
const validatePlanData = (plan) => {
  if (!plan || typeof plan !== 'object') return null
  
  return {
    id: plan.id || `plan_${Date.now()}`,
    name: plan.name || '未命名套餐',
    description: plan.description || '',
    price: typeof plan.price === 'number' ? plan.price : 0,
    durationDays: typeof plan.durationDays === 'number' ? plan.durationDays : 30,
    targetRole: typeof plan.targetRole === 'number' ? plan.targetRole : 1,
    ...plan // 保留其他原始属性
  }
}

// 获取套餐数据
const fetchPlans = async () => {
  try {
    loading.value = true
    const response = await getMembershipPlans()
    
    if (response.code === 200 && response.data?.success) {
      const rawPlans = response.data.plans || []
      // 验证和规范化每个套餐数据
      plans.value = rawPlans
        .map(validatePlanData)
        .filter(plan => plan !== null)
        
      if (plans.value.length === 0) {
        console.warn('未获取到有效的套餐数据')
      }
    } else {
      ElMessage.error(response.message || '获取套餐信息失败')
    }
  } catch (error) {
    console.error('获取套餐信息错误:', error)
    ElMessage.error('获取套餐信息失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 格式化描述文本 - 支持多种数据格式
const formatDescription = (description) => {
  if (!description) return []
  
  // 如果已经是数组格式
  if (Array.isArray(description)) {
    return description.filter(item => item && typeof item === 'string' && item.trim())
  }
  
  // 如果是字符串格式
  if (typeof description === 'string') {
    const trimmed = description.trim()
    if (!trimmed) return []
    
    let result = []
    let usedSeparator = ''
    
    // 尝试按换行符分割
    if (trimmed.includes('\n')) {
      result = trimmed.split('\n').filter(line => line.trim()).map(line => line.trim())
      usedSeparator = '换行符'
    }
    // 尝试按逗号分割（支持中文和英文逗号）
    else if (trimmed.includes(',') || trimmed.includes('，')) {
      // 优先使用中文逗号分割，如果没有再用英文逗号
      const separator = trimmed.includes('，') ? '，' : ','
      result = trimmed.split(separator).filter(line => line.trim()).map(line => line.trim())
      usedSeparator = separator === '，' ? '中文逗号' : '英文逗号'
    }
    // 尝试按分号分割（支持中文和英文分号）
    else if (trimmed.includes(';') || trimmed.includes('；')) {
      const separator = trimmed.includes('；') ? '；' : ';'
      result = trimmed.split(separator).filter(line => line.trim()).map(line => line.trim())
      usedSeparator = separator === '；' ? '中文分号' : '英文分号'
    }
    // 尝试按 | 分割
    else if (trimmed.includes('|')) {
      result = trimmed.split('|').filter(line => line.trim()).map(line => line.trim())
      usedSeparator = '竖线'
    }
    // 如果没有分隔符，返回整个字符串作为单一描述
    else {
      result = [trimmed]
      usedSeparator = '无分隔符'
    }
    
    // 开发环境下输出调试信息
    if (import.meta.env.DEV) {
      console.log(`描述文本分割结果 [${usedSeparator}]:`, result)
    }
    
    return result
  }
  
  // 其他格式转换为字符串处理
  try {
    const stringified = String(description).trim()
    return stringified ? [stringified] : []
  } catch (e) {
    console.warn('描述文本格式异常:', description, e)
    return []
  }
}

// 获取时间周期文本
const getPeriodText = (durationDays) => {
  if (durationDays >= 365) {
    const years = Math.floor(durationDays / 365)
    return years === 1 ? '年' : `${years}年`
  } else if (durationDays >= 30) {
    const months = Math.floor(durationDays / 30)
    return months === 1 ? '月' : `${months}月`
  } else {
    return `${durationDays}天`
  }
}

// 处理购买点击
const handlePurchase = async (plan, index) => {
  // 防止重复点击
  if (processingPlan.value === plan.id) {
    return
  }

  // 检查登录状态
  if (!userStore.isLoggedIn) {
    ElMessage.warning('请先登录后购买')
    showLoginModal.value = true
    return
  }

  processingPlan.value = plan.id

  try {
    // 显示支付弹窗
    await handlePaidPlan(plan, index)
  } catch (error) {
    console.error('购买失败:', error)
    ElMessage.error(error.message || '购买失败，请稍后重试')
  } finally {
    processingPlan.value = null
  }
}



// 处理付费套餐
const handlePaidPlan = async (plan, index) => {
  // 计算价格和时长
  const planInfo = calculatePlanDetails(plan, index)
  
  selectedPlanInfo.value = {
    id: plan.id,
    planId: plan.id,
    name: plan.name,
    originalDescription: plan.description,
    originalPrice: plan.price,
    finalPrice: planInfo.finalPrice,
    durationText: planInfo.durationText,
    durationDays: planInfo.durationDays,
    discountType: planInfo.discountType,
    discountDescription: planInfo.discountDescription
  }
  
  // 调试信息
  console.log('传递给PaymentModal的数据:', selectedPlanInfo.value)
  console.log('原始套餐数据:', plan)
  console.log('计算后的价格信息:', planInfo)
  
  showPaymentModal.value = true
}

// 计算套餐详情（使用接口返回的价格和折扣数据）
const calculatePlanDetails = (plan, index) => {
  const discountedPrice = plan.discountedPrice || plan.price
  const baseDays = plan.durationDays

  // 根据索引决定时长显示：第一个卡片显示月，其他显示年
  let durationText
  if (index === 0) {
    // 第一个卡片显示月
    durationText = `${Math.ceil(baseDays / 30)}个月`
  } else {
    // 其他卡片显示年
    durationText = `${Math.ceil(baseDays / 365)}年`
  }

  // 生成折扣描述
  const discountPercentage = plan.discountPercentage || 0
  const discountDescription = discountPercentage > 0 
    ? `限时优惠${(100 - discountPercentage).toFixed(0)}折`
    : '限时特价'

  return {
    finalPrice: discountedPrice,
    durationDays: baseDays,
    discountType: 'PERCENTAGE',
    discountDescription: discountDescription,
    durationText: durationText
  }
}

// 获取按钮价格的时间单位
const getPriceUnit = (index) => {
  return index === 0 ? '月' : '年'
}



// 登录成功处理
const handleLoginSuccess = (data) => {
  ElMessage.success('登录成功！')
  showLoginModal.value = false
  // 刷新用户状态
  userStore.login(data.userInfo, data.token)
}

// 支付成功处理
const handlePaymentSuccess = async (data) => {
  ElMessage.success({
    message: '🎉 支付成功！会员权益已生效，感谢您的支持！',
    duration: 5000
  })
  showPaymentModal.value = false
  
  // 支付成功后刷新用户权限信息
  try {
    console.log('支付成功，正在更新用户权限信息...')
    
    // 调用me接口获取最新用户信息
    const response = await getCurrentUser()
    
    if (response.code === 200 && response.data) {
      // 更新用户store中的信息
      userStore.updateUserInfo(response.data)
      console.log('用户权限信息更新成功:', response.data)
      
      // 显示权限更新成功的提示
      setTimeout(() => {
        ElMessage.success({
          message: '会员权限已更新！',
          duration: 3000
        })
      }, 1500)
    } else {
      console.warn('获取用户信息响应异常:', response)
      // 如果接口调用失败，显示提示但不影响支付成功流程
      ElMessage.warning('权限更新可能需要稍等片刻，请稍后刷新页面')
    }
  } catch (error) {
    console.error('更新用户权限信息失败:', error)
    // 错误处理：不影响支付成功的主流程，只是提醒用户
    ElMessage.warning({
      message: '权限更新遇到问题，建议刷新页面或重新登录',
      duration: 4000
    })
  }
  
  // 延迟刷新页面数据以确保服务器状态更新
  setTimeout(() => {
    console.log('支付成功，订单号:', data.orderNo)
  }, 1000)
}

// 支付失败处理
const handlePaymentFailed = (error) => {
  ElMessage.error({
    message: error?.message || '支付失败，请重试或联系客服',
    duration: 5000
  })
  showPaymentModal.value = false
}

// 获取套餐卡片样式类
const getPlanCardClass = (plan, index) => {
  const classes = []
  
  // 第一个卡片使用特殊样式
  if (index === 0) {
    classes.push('first-plan')
  } else if (plan.targetRole === 2) {
    classes.push('vip-plan')
  } else if (plan.targetRole === 3) {
    classes.push('svip-plan')
  }
  
  // 调试信息
  if (import.meta.env.DEV) {
    console.log(`套餐 ${plan.name} (index: ${index}): targetRole=${plan.targetRole}, price=${plan.price}, classes=[${classes.join(', ')}]`)
  }
  
  return classes
}

// 获取套餐按钮样式类
const getPlanButtonClass = (plan, index) => {
  const classes = []
  
  // 第一个卡片使用特殊按钮样式
  if (index === 0) {
    classes.push('first-btn')
  } else if (plan.targetRole === 2) {
    classes.push('vip-btn')
  } else if (plan.targetRole === 3) {
    classes.push('svip-btn')
  }
  
  return classes
}

// 获取显示价格（使用接口返回的折扣价格）
const getDisplayPrice = (plan) => {
  if (!plan || typeof plan.discountedPrice !== 'number' || plan.discountedPrice < 0) {
    console.warn('套餐折扣价格数据异常:', plan)
    return plan?.price || 0
  }
  
  if (import.meta.env.DEV) {
    console.log(`套餐 ${plan.name} - 原价: ¥${plan.price}，折扣价: ¥${plan.discountedPrice}`)
  }
  
  return plan.discountedPrice
}

// 获取原价（用于显示划线价格）
const getOriginalPrice = (plan) => {
  if (!plan || typeof plan.price !== 'number' || plan.price < 0) {
    console.warn('套餐原价数据异常:', plan)
    return 0
  }
  return plan.price
}

// 获取优惠百分比（使用接口返回的折扣百分比）
const getDiscountPercentage = (plan) => {
  if (!plan || typeof plan.discountPercentage !== 'number') {
    console.warn('套餐折扣百分比数据异常:', plan)
    return 0
  }
  return plan.discountPercentage
}

// 获取每天价格（基于接口返回的折扣价格计算）
const getDailyPrice = (plan) => {
  const discountedPrice = getDisplayPrice(plan)
  if (discountedPrice <= 0) {
    return '0.00'
  }
  
  // 根据套餐时长计算日均价格
  const days = plan.durationDays || 30
  return (discountedPrice / days).toFixed(2)
}



// 组件挂载时获取数据
onMounted(() => {
  fetchPlans()
  preloadBannerImage() // 预加载banner图片
})

// 获取套餐图标路径
const getPlanIconPath = (plan, index) => {
  // 第一个卡片使用新的图标
  if (index === 0) return new URL('@/assets/menu_icon/组合 416.svg', import.meta.url).href
  if (plan.targetRole === 2) return new URL('@/assets/menu_icon/vip.svg', import.meta.url).href
  return new URL('@/assets/menu_icon/svip.svg', import.meta.url).href
}

// 获取描述第一行 - 使用增强的格式化函数
const getFirstLine = (description) => {
  const formattedLines = formatDescription(description)
  return formattedLines.length > 0 ? formattedLines[0] : ''
}

// 获取描述剩余行 - 使用增强的格式化函数
const getRemainingLines = (description) => {
  const formattedLines = formatDescription(description)
  return formattedLines.slice(1)
}

// Banner图片预加载
const preloadBannerImage = () => {
  // 缩短超时时间到3秒，提高用户体验
  const timeout = setTimeout(() => {
    console.warn('Banner图片加载超时，强制隐藏骨架屏')
    bannerLoading.value = false
  }, 3000)

  const img = new Image()
  
  // 添加开始时间记录用于调试
  const startTime = performance.now()
  
  img.onload = () => {
    clearTimeout(timeout)
    const loadTime = performance.now() - startTime
    console.log(`Banner图片加载成功，耗时: ${loadTime.toFixed(2)}ms`)
    bannerLoading.value = false
  }
  
  img.onerror = () => {
    clearTimeout(timeout)
    const loadTime = performance.now() - startTime
    console.error(`Banner图片加载失败，耗时: ${loadTime.toFixed(2)}ms`)
    bannerLoading.value = false // 即使加载失败也要隐藏骨架屏
  }
  
  // 添加图片加载优化属性
  img.crossOrigin = 'anonymous' // 处理跨域图片
  img.loading = 'eager' // 优先加载
  img.src = bannerImageUrl
  
  console.log('开始预加载Banner图片:', bannerImageUrl)
}

// Banner图片加载成功回调
const onBannerImageLoad = () => {
  console.log('Banner图片在DOM中加载成功')
}

// Banner图片加载失败回调
const onBannerImageError = () => {
  console.error('Banner图片在DOM中加载失败')
}
</script>

<style scoped>
.membership-page {
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.main-content {
  text-align: center;
  /* min-height: calc(100vh - 60px); 移除固定最小高度 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #eeecec; /* 灰色背景 */
  align-items: center;
  padding: 60px 20px 40px 20px; /* PC端header避让 */
}

.main-content h1 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 30px;
  position: relative;
  padding: 20px 0;
  text-align: center;
}

/* 标题两侧渐变装饰线 */
.main-content h1::before,
.main-content h1::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 120px; /* 线条长度 */
  height: 2px; /* 线条粗细 */
  transform: translateY(-50%);
}

/* 左侧渐变线 - 相对于文字左侧定位 */
.main-content h1::before {
  right: calc(50% + 80px); /* 文字中心向左偏移80px */
  background: linear-gradient(90deg, 
    rgba(51, 51, 51, 0) 0%, 
    rgba(51, 51, 51, 1) 100%);
}

/* 右侧渐变线 - 相对于文字右侧定位 */
.main-content h1::after {
  left: calc(50% + 80px); /* 文字中心向右偏移80px */
  background: linear-gradient(90deg, 
    rgba(51, 51, 51, 1) 0%, 
    rgba(51, 51, 51, 0) 100%);
}



.membership-content {
  width: 100%;
}

.plans-section {
  margin-bottom: 80px;
}

.plans-section h2 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 40px;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  width: 100%;
  margin: 0 auto;
  justify-content: center;
  box-sizing: border-box;
}

/* 基础套餐卡片样式 */
.plan-card {
  border-radius: 16px;
  padding: 30px 24px;
  text-align: left; /* 除标题与按钮外文字左对齐 */
  position: relative;
  transition: all 0.3s ease;
  width: 430px;
  /* height: 480px; 移除固定高度，改为自适应 */
  min-height: 350px; /* 设置最小高度确保美观 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden; /* 确保背景图不超出卡片边界 */
}

/* 基础卡片悬浮效果 - 只对第二、三张卡片生效 */
.plan-card.vip-plan:hover,
.plan-card.svip-plan:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/* 基础保护规则 - 防止第一个卡片受到通用样式影响 */
.membership-page .plan-card.first-plan,
.membership-page .plan-card.first-plan *,
.membership-page .plan-card.first-plan *::before,
.membership-page .plan-card.first-plan *::after {
  /* 确保不继承任何可能变色的基础样式 */
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* ==================== 第一个卡片完全重写 ==================== */
/* 
 * 目标：彻底去除第一个卡片的悬浮变色效果
 * 策略：
 * 1. 完全隔离transition行为，只允许transform过渡
 * 2. 强制锁定所有颜色相关属性为固定值
 * 3. 使用!important确保优先级高于所有其他样式
 * 4. 添加浏览器前缀确保兼容性
 * 5. 保持统一的悬浮动画（向上移动5px）
 */

/* 基础样式 - 完全隔离transition行为 */
.membership-page .plan-card.first-plan {
  /* 强制固定所有视觉属性 */
  background: #F8FFF3 !important;
  background-color: #F8FFF3 !important;
  color: #666 !important;
  position: relative !important;
  
  /* 彻底重写transition - 只允许transform，禁止所有其他属性过渡 */
  transition: transform 0.3s ease !important;
  -webkit-transition: transform 0.3s ease !important;
  -moz-transition: transform 0.3s ease !important;
  -o-transition: transform 0.3s ease !important;
  
  /* 预防性保护 - 确保不会有任何其他视觉变化 */
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* 完全禁用第一个卡片的渐变描边 */
.membership-page .plan-card.first-plan::before {
  /* 完全禁用描边 */
  display: none !important;
  content: none !important;
  
  /* 描边绝对不允许任何过渡 */
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
}

/* 悬浮效果 - 只有transform，绝对不变色 */
.membership-page .plan-card.first-plan:hover {
  /* 统一悬浮动画 */
  transform: translateY(-5px) !important;
  
  /* 强制锁定所有颜色属性为原始值 */
  background: #F8FFF3 !important;
  background-color: #F8FFF3 !important;
  background-image: none !important;
  color: #666 !important;
  
  /* 禁用所有视觉效果 */
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  
  /* 确保边框不变 */
  border: none !important;
  outline: none !important;
  
  /* 禁用任何可能的背景效果 */
  background-blend-mode: normal !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 悬浮时完全禁用描边 */
.membership-page .plan-card.first-plan:hover::before {
  /* 完全禁用描边 */
  display: none !important;
  content: none !important;
  background: none !important;
  /* 禁用所有可能的变换和过渡 */
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -o-transform: none !important;
  /* 禁用任何滤镜或效果 */
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 0 !important;
}

/* 终极保护 - 确保第一个卡片的所有子元素都不会变色 */
.membership-page .plan-card.first-plan:hover *,
.membership-page .plan-card.first-plan:hover *::before,
.membership-page .plan-card.first-plan:hover *::after {
  transition: transform 0.3s ease !important;
  -webkit-transition: transform 0.3s ease !important;
  -moz-transition: transform 0.3s ease !important;
  -o-transition: transform 0.3s ease !important;
  
  /* 禁用所有视觉效果 */
  filter: none !important;
  -webkit-filter: none !important;
  opacity: inherit !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* 第二个卡片（VIP用户）样式 */
.plan-card.vip-plan {
  background: rgba(255, 251, 248, 1);
  color: #5a3b1e; /* 深棕色文字，避免与浅背景接近 */
}

/* 第三个卡片（SVIP用户）样式 */
.plan-card.svip-plan {
  background: rgba(14, 14, 14, 1);
  color: #ffffff;
}

/* 右上角背景图区域 */
.card-bg-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  opacity: 0.4; /* 提高透明度，使背景图更清晰可见 */
  z-index: 0;
  pointer-events: none; /* 避免阻挡点击 */
  background-size: cover; /* 覆盖整个容器区域 */
  background-repeat: no-repeat;
  background-position: center; /* 居中显示，确保图案完整 */
  border-top-right-radius: 16px; /* 与卡片圆角一致 */
  overflow: hidden; /* 防止溢出卡片边界 */
}

/* 第一个卡片背景图 - 固定样式不变 */
.membership-page .plan-card.first-plan .card-bg-icon {
  background-image: url('../../assets/menu_icon/组合 416.svg') !important;
  /* 禁止任何过渡效果 */
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
}

.plan-card.vip-plan .card-bg-icon {
  background-image: url('../../assets/menu_icon/vip.svg');
}

.plan-card.svip-plan .card-bg-icon {
  background-image: url('../../assets/menu_icon/svip.svg');
}

/* 套餐头部 */
.plan-header {
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.plan-icon {
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  margin: 0 auto 12px auto;
}

/* 第一个卡片图标 - 固定样式不变 */
.membership-page .plan-card.first-plan .plan-icon {
  background: linear-gradient(135deg, rgba(138, 254, 159, 0.2) 0%, rgba(28, 229, 73, 0.2) 100%) !important;
  border-radius: 50% !important;
  color: rgba(28, 229, 73, 1) !important;
  /* 禁止任何过渡效果 */
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
}

.plan-card.vip-plan .plan-icon {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.plan-card.svip-plan .plan-icon {
  background: rgba(255, 215, 0, 0.2);
  border-radius: 50%;
}

.plan-header h3 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 8px;
}

/* 第一个卡片标题 - 固定颜色不变 */
.membership-page .plan-card.first-plan h3 {
  color: rgba(28, 229, 73, 1) !important;
  font-weight: 600 !important;
  /* 禁止颜色过渡 */
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
}

.plan-card.vip-plan h3 {
  color: #c07432;
}

.plan-card.svip-plan h3 {
  color: #ffffff;
}

.plan-desc {
  text-align: left;
  margin-bottom: 10px;
}

.plan-desc p {
  font-size: 0.85rem;
  margin: 8px 0; /* 上下8px边距 */
  opacity: 0.95;
  line-height: 1.5;
  padding-left: 12px;
  position: relative;
  color: inherit;
  text-align: left;
}

.plan-desc p::before {
  content: '•';
  position: absolute;
  left: 0;
  opacity: 0.7;
}

/* fallback描述样式 */
.plan-desc .no-description {
  font-style: italic;
  opacity: 0.8;
}

/* 第一个卡片描述文本 - 固定颜色不变 */
.membership-page .plan-card.first-plan .plan-desc p {
  color: rgba(153, 153, 153, 1) !important;
  /* 禁止颜色过渡 */
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
}

.plan-card.vip-plan .plan-desc p {
  color: #dc9853;
}

.plan-card.svip-plan .plan-desc p {
  color: rgba(255, 255, 255, 0.9);
}

/* 价格信息 */
.price-info {
  margin: 12px 0 0 0; /* 移除下边距，因为按钮现在紧跟在后面 */
  text-align: left;
  position: relative;
}

/* 优惠徽章 */
.discount-badge {
  display: inline-block;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.discount-text {
  display: inline-block;
  background: linear-gradient(135deg, #ff4757 0%, #ff6b7d 100%);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
  font-family: Arial, sans-serif;
  line-height: 1;
}

/* 注册文本样式 */
.register-text {
  font-size: 0.9rem;
  color: #666;
  margin: 0;
  font-family: Arial, sans-serif;
}

/* 价格详情容器 */
.price-details {
  margin: 0;
}

/* 价格行容器 - 同一行显示 */
.price-row {
  display: flex;
  flex-direction: column;
  gap: 6px; /* 价格元素之间的间距 */
}

/* 价格第一行：优惠价和原价 */
.price-row .monthly-price {
  order: 1;
}

.price-row .original-price {
  order: 2;
  margin-top: 4px;
}

.price-row .daily-average {
  order: 3;
  margin-top: 8px;
}

/* 月价格样式 */
.monthly-price {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0px;
  color: #000000;
  margin: 0;
}

/* 日均价格样式 */
.daily-average {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 30px; /* 调整为与月价格相同的行高以便对齐 */
  letter-spacing: 0px;
  color: #666666;
  margin: 0;
}

/* 第一个卡片的价格信息 - 固定颜色不变 */
.membership-page .plan-card.first-plan .monthly-price {
  color: rgba(28, 229, 73, 1) !important; /* 第一个卡片月价格用绿色 */
  font-weight: 700 !important;
  /* 禁止颜色过渡 */
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
}

.membership-page .plan-card.first-plan .original-price {
  color: rgba(153, 153, 153, 0.8) !important; /* 第一个卡片原价用灰色 */
  /* 禁止颜色过渡 */
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
}

.membership-page .plan-card.first-plan .daily-average {
  color: rgba(28, 229, 73, 0.8) !important; /* 第一个卡片日均价格用半透明绿色 */
  /* 禁止颜色过渡 */
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
}

.membership-page .plan-card.first-plan .discount-text {
  background: linear-gradient(135deg, rgba(28, 229, 73, 1) 0%, rgba(138, 254, 159, 1) 100%) !important;
  color: #ffffff !important;
  /* 禁止背景和颜色过渡 */
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
}

/* 付费套餐的价格信息颜色调整 */
.plan-card.vip-plan .monthly-price {
  color: #000000; /* VIP卡片月价格保持黑色 */
}

.plan-card.vip-plan .original-price {
  color: rgba(139, 105, 20, 0.6); /* VIP卡片原价用深金色半透明 */
}

.plan-card.vip-plan .daily-average {
  color: #8b6914; /* VIP卡片日均价格用深金色 */
}

.plan-card.vip-plan .discount-text {
  background: linear-gradient(135deg, rgba(220, 152, 93, 1) 0%, rgba(241, 169, 105, 1) 100%);
  color: #ffffff;
}

.plan-card.svip-plan .monthly-price {
  color: #ffffff; /* SVIP卡片月价格用白色 */
}

.plan-card.svip-plan .original-price {
  color: rgba(255, 255, 255, 0.5); /* SVIP卡片原价用半透明白色 */
}

.plan-card.svip-plan .daily-average {
  color: rgba(255, 255, 255, 0.8); /* SVIP卡片日均价格用半透明白色 */
}

.plan-card.svip-plan .discount-text {
  background: linear-gradient(135deg, rgba(243, 211, 177, 1) 0%, rgba(233, 182, 138, 1) 100%);
  color: #000000;
}

/* 价格区域 */
.price-section {
  margin: 8px 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* 内容区现在不需要撑满，按钮已移到上方 */
.plan-content {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  margin-top: 0; /* 因为有分界线，不需要额外上边距 */
}

.actions {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  margin-top: 8px; /* 与描述保持适当距离 */
}

/* 分界线样式 */
.divider {
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
  margin: 16px 0;
  position: relative;
  z-index: 1;
}

/* 第一个卡片分界线 - 固定样式不变 */
.membership-page .plan-card.first-plan .divider {
  background: linear-gradient(90deg, rgba(138, 254, 159, 0.3) 0%, rgba(28, 229, 73, 0.3) 100%) !important;
  height: 2px !important; /* 第一个卡片分界线稍微粗一点 */
  /* 禁止背景过渡 */
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
}

.plan-card.vip-plan .divider {
  background-color: rgba(139, 105, 20, 0.2); /* VIP卡片用深金色半透明 */
}

.plan-card.svip-plan .divider {
  background-color: rgba(255, 255, 255, 0.2); /* SVIP卡片用白色半透明 */
}

.price {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 2px;
  margin-bottom: 8px;
  text-align: left;
}

.currency {
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0px;
  color: #000000;
}

.amount {
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0px;
  color: #000000;
}

.period {
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0px;
  color: #000000;
}

.original-price {
  display: block;
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 4px;
  text-align: left;
  color: #999999;
  text-decoration: line-through;
  font-family: Arial, sans-serif;
  font-weight: 400;
}

/* 按钮样式 */
.plan-btn {
  border: none;
  padding: 14px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  margin-top: 0; /* 按钮现在在描述下方，不需要额外上边距 */
  align-self: flex-start;
}

.plan-btn:hover {
  transform: translateY(-2px);
}

.plan-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* 第一个卡片按钮 - 强化保护 */
.membership-page .plan-card.first-plan .plan-btn.first-btn {
  background: linear-gradient(135deg, rgba(138, 254, 159, 1) 0%, rgba(28, 229, 73, 1) 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  transition: transform 0.3s ease !important;
  -webkit-transition: transform 0.3s ease !important;
  -moz-transition: transform 0.3s ease !important;
  -o-transition: transform 0.3s ease !important;
}

/* 第一个卡片按钮的统一悬浮效果 - 强化保护 */
.membership-page .plan-card.first-plan .plan-btn.first-btn:hover {
  background: linear-gradient(135deg, rgba(138, 254, 159, 1) 0%, rgba(28, 229, 73, 1) 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important; /* 与其他按钮统一的悬浮动画 */
}

/* 第二个卡片按钮（VIP用户） */
.vip-btn {
  background: linear-gradient(135deg, rgba(220, 152, 93, 1) 0%, rgba(241, 169, 105, 1) 100%);
  color: #ffffff;
  font-weight: 600;
}

.vip-btn:hover {
  background: linear-gradient(135deg, rgba(200, 132, 73, 1) 0%, rgba(221, 149, 85, 1) 100%);
}

/* 第三个卡片按钮（SVIP用户） */
.svip-btn {
  background: linear-gradient(135deg, rgba(243, 211, 177, 1) 0%, rgba(233, 182, 138, 1) 100%);
  color: #000000;
  font-weight: 600;
}

.svip-btn:hover {
  background: linear-gradient(135deg, rgba(223, 191, 157, 1) 0%, rgba(213, 162, 118, 1) 100%);
}



.benefits-section {
  margin-bottom: 60px;
}

/* 新的头部两行布局样式 */
.header-row {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 左对齐 */
  width: 100%;
  text-align: left;
}

.plan-header-icon {
  margin-right: 5px; /* 紧贴，仅保留5px视觉呼吸 */
  width: 31px; /* SVG原始宽度 */
  height: 31px; /* SVG原始高度 */
  display: inline-block;
  vertical-align: middle;
}

/* 第一个卡片的header图标 - 固定样式不变 */
.membership-page .plan-card.first-plan .plan-header-icon {
  filter: none !important;
  /* 禁止任何过渡效果 */
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
}

.plan-title {
  margin: 0;
}

.plan-desc-brief p {
  margin: 8px 0;
}

/* 按钮内价格布局 */
.plan-btn .btn-label {
  margin-right: 8px;
}

.plan-card.svip-plan .plan-btn .btn-label,
.plan-card.svip-plan .plan-btn .btn-price {
  color: #000000; /* 按钮上已是浅色背景，文字黑更清晰 */
}

/* 第三张卡片（svip）价格文本必须为白色（在非按钮位置时）*/
.plan-card.svip-plan .currency,
.plan-card.svip-plan .amount,
.plan-card.svip-plan .period {
  color: #ffffff;
}

/* 详细描述列表（从第二行开始） */
.details-list {
  margin-top: 12px;
}
.details-list p {
  font-size: 0.85rem;
  margin: 8px 0; /* 上下8px边距 */
  opacity: 0.9;
  line-height: 1.4;
  padding-left: 12px;
  position: relative;
}
.details-list p::before {
  content: '•';
  position: absolute;
  left: 0;
  opacity: 0.7;
}

.benefits-section h2 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 40px;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.benefit-card {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.benefit-icon {
  font-size: 3rem;
  margin-bottom: 20px;
}

.benefit-card h3 {
  font-size: 1.3rem;
  color: #333;
  margin-bottom: 15px;
}

.benefit-card p {
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
}

/* Banner样式 */
.banner {
  width: 100vw;
  height: 400px;
  position: relative;
  margin-left: calc(-50vw + 50%);
  margin-top: 60px; /* PC端header避让 */
  margin-bottom: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Banner文字内容 */
.banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Banner主标题 */
.banner-title {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 70px;
  line-height: 80px;
  letter-spacing: 0px;
  color: #ffffff;
  text-align: center;
  margin: 0 0 20px 0;
}

/* Banner副标题 */
.banner-subtitle {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2; /* 修正行高为合理值 */
  letter-spacing: 0px;
  color: #ffffff;
  text-align: center;
  margin: 0;
}

/* 高亮文字样式 */
.banner-subtitle .highlight-text {
  color: rgba(0, 202, 224, 1);
}

/* 加载状态样式 */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  font-size: 1.2rem;
  color: #666;
}

/* 无套餐状态样式 */
.no-plans {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  font-size: 1.1rem;
  color: #999;
}

/* PC端适配 - 超过1024px做一致边距控制（中屏仍用Grid的gap） */
@media (min-width: 1024px) {
  .plans-grid {
    gap: 27px;
  }
}

@media (min-width: 1200px) {
  /* 大屏使用Flex，由卡片自身margin形成"边距"，不限制外层宽度 */
  .plans-grid {
    display: flex;
    justify-content: center;
    align-items: stretch; /* 保持stretch，让所有卡片等高 */
    gap: 0; /* 边距改由卡片margin控制 */
    width: 100%;
    margin: 0 auto;
  }
  
  .plan-card {
    width: 430px;
    /* height: 480px; 移除固定高度，改为自适应 */
    margin-right: 27px; /* 由卡片自身制造间距 */
  }
  
  .plan-card:last-child {
    margin-right: 0;
  }
}

@media (max-width: 1199px) and (min-width: 769px) {
  .plans-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 27px !important;
    width: 100%;
  }
  
  .plan-card {
    width: auto;
    height: auto;
    min-height: 350px; /* 与基础样式保持一致 */
  }
}

@media (max-width: 768px) {
  .banner {
    margin-top: 90px; /* 移动端header避让 */
    height: 300px; /* 移动端适当减小高度 */
  }
  
  /* 移动端banner文字调整 */
  .banner-title {
    font-size: 50px;
    line-height: 60px;
    margin: 0 0 15px 0;
  }
  
  .banner-subtitle {
    font-size: 20px;
    line-height: 1.3;
  }
  
  .main-content {
    padding: 90px 15px 40px 15px; /* 移动端增加header避让 */
  }
  

  
  .plans-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
  }
  
  .plan-card {
    width: auto;
    height: auto;
    padding: 24px 20px;
    min-height: 320px; /* 移动端适当减小 */
  }
  
  .main-content h1 {
    font-size: 2rem;
    padding: 15px 0; /* 移动端减少padding */
  }
  
  /* 移动端调整装饰线长度和定位 */
  .main-content h1::before,
  .main-content h1::after {
    width: 80px; /* 移动端缩短线条 */
  }
  
  .main-content h1::before {
    right: calc(50% + 60px); /* 移动端文字中心向左偏移60px */
  }
  
  .main-content h1::after {
    left: calc(50% + 60px); /* 移动端文字中心向右偏移60px */
  }
  
  .plan-icon {
    width: 40px;
    height: 40px;
    font-size: 1.6rem;
  }
  
  .plan-header h3 {
    font-size: 1.3rem;
  }
  
  .currency, .amount, .period {
    font-size: 18px;
    line-height: 26px;
  }
  
  /* 移动端背景图调整 */
  .card-bg-icon {
    width: 120px;
    height: 120px;
  }
}

/* 骨架屏样式 */
/* Banner骨架屏样式 */
.banner-skeleton {
  width: 100%;
  height: 400px;
}

.banner-skeleton-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-image-skeleton {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.banner-content-skeleton {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.banner-title-skeleton {
  width: 400px;
  height: 70px;
  max-width: 80%;
}

.banner-subtitle-skeleton {
  width: 350px;
  height: 26px;
  max-width: 70%;
}

/* 卡片骨架屏样式 */
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  width: 100%;
  margin: 0 auto;
  justify-content: center;
  box-sizing: border-box;
}

.plan-card-skeleton {
  background: #f8f9fa;
  border-radius: 16px;
  padding: 30px 24px;
  width: 430px;
  /* height: 480px; 移除固定高度 */
  min-height: 350px; /* 与实际卡片保持一致 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.card-skeleton-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.skeleton-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.skeleton-icon {
  width: 31px;
  height: 31px;
  flex-shrink: 0;
}

.skeleton-title {
  width: 120px;
  height: 24px;
}

.skeleton-desc {
  width: 80%;
  height: 16px;
  margin-bottom: 12px;
}

.skeleton-price {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.skeleton-badge {
  width: 80px;
  height: 20px;
  border-radius: 12px;
}

.skeleton-price-text {
  width: 120px;
  height: 20px;
}

.skeleton-original-price {
  width: 140px;
  height: 16px;
}

.skeleton-button {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  margin: 16px 0;
}

.skeleton-divider {
  width: 100%;
  height: 2px;
  border-radius: 1px;
  margin: 8px 0;
}

.skeleton-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.skeleton-detail-item {
  width: 90%;
  height: 14px;
}

.skeleton-detail-item:nth-child(2) {
  width: 85%;
}

.skeleton-detail-item:nth-child(3) {
  width: 75%;
}

/* 移动端骨架屏适配 */
@media (max-width: 1199px) {
  .skeleton-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 27px;
  }
  
  .plan-card-skeleton {
    width: auto;
    height: auto;
    min-height: 350px; /* 与基础样式保持一致 */
  }
}

@media (max-width: 768px) {
  .banner-skeleton {
    height: 300px;
  }
  
  .banner-title-skeleton {
    width: 300px;
    height: 50px;
  }
  
  .banner-subtitle-skeleton {
    width: 250px;
    height: 20px;
  }
  
  .skeleton-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .plan-card-skeleton {
    padding: 24px 20px;
    min-height: 320px; /* 与移动端plan-card保持一致 */
  }
}

@media (max-width: 480px) {
  .banner {
    margin-top: 85px; /* 小屏header避让 */
    height: 250px; /* 小屏进一步减小高度 */
  }
  
  .banner-skeleton {
    height: 250px;
  }
  
  .banner-title-skeleton {
    width: 250px;
    height: 36px;
  }
  
  .banner-subtitle-skeleton {
    width: 200px;
    height: 16px;
  }
  
  .plan-card-skeleton {
    padding: 20px 16px;
    min-height: 300px; /* 与小屏plan-card保持一致 */
  }
  
  /* 小屏banner文字调整 */
  .banner-title {
    font-size: 36px;
    line-height: 44px;
    margin: 0 0 12px 0;
  }
  
  .banner-subtitle {
    font-size: 16px;
    line-height: 1.4;
  }
  
  .banner-content {
    padding: 0 15px;
  }
  
  .main-content {
    padding: 85px 12px 40px 12px; /* 小屏增加header避让 */
  }
  

  
  .plans-grid {
    gap: 12px;
    width: 100%;
  }
  
  .plan-card {
    width: auto;
    height: auto;
    padding: 20px 16px;
    min-height: 300px; /* 小屏进一步减小 */
  }
  
  .main-content h1 {
    font-size: 1.8rem;
    padding: 12px 0; /* 小屏减少padding */
  }
  
  /* 小屏进一步缩短装饰线和调整定位 */
  .main-content h1::before,
  .main-content h1::after {
    width: 60px; /* 小屏更短的线条 */
    height: 1.5px; /* 稍微细一点 */
  }
  
  .main-content h1::before {
    right: calc(50% + 50px); /* 小屏文字中心向左偏移50px */
  }
  
  .main-content h1::after {
    left: calc(50% + 50px); /* 小屏文字中心向右偏移50px */
  }
  
  .plan-icon {
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
    margin-bottom: 8px;
  }
  
  .plan-header h3 {
    font-size: 1.2rem;
  }
  
  .plan-desc {
    text-align: center;
  }
  
  .plan-desc p {
    font-size: 0.75rem;
    margin: 3px 0;
    text-align: left;
  }
  
  .currency, .amount, .period {
    font-size: 16px;
    line-height: 24px;
  }
  
  .plan-btn {
    padding: 12px 20px;
    font-size: 0.95rem;
  }
  
  /* 小屏背景图进一步缩小 */
  .card-bg-icon {
    width: 100px;
    height: 100px;
  }
}
</style> 