<template>
    <div class="home-container">
      <!-- 页面头部 -->
      <div class="ssq-header">
        <div class="header-top">
          <el-button class="back-btn" @click="$router.push('/lottery-premium')" icon="ArrowLeft">
            返回
          </el-button>
        </div>
        <div class="page-title">
          <h1 class="main-title">双色球精细推测</h1>
          <p class="subtitle">姿态逻辑分析数据，分段推测逻辑组号</p>
        </div>
      </div>
  
      <!-- 步骤导航 -->
      <el-card class="step-nav-card" shadow="hover">
        <el-steps :active="currentStep" finish-status="success" process-status="process" class="custom-steps">
          <el-step v-for="(step, index) in steps" :key="index" :title="step" :status="getStepStatus(index + 1)" />
        </el-steps>
      </el-card>
  
      <!-- 步骤内容 -->
      <div class="step-content">
        <!-- 第一步：选择参数 -->
        <el-card v-if="currentStep === 1" class="step-panel" shadow="hover">
          <template #header>
          <h3>请选择推测进程中所调用的关键数据区位</h3>
          </template>
          
          <div class="position-selector">
            <el-card
              v-for="pos in positions" 
              :key="pos.value"
              class="position-item"
              :class="{ selected: formData.level === pos.value }"
              shadow="hover"
              @click="formData.level = pos.value"
            >
              <div class="position-title">{{ pos.label }}</div>
            </el-card>
          </div>
  
          <!-- 位置选择提示 -->
          <el-alert
            v-if="!formData.level"
            title="请先选择上方的关键数据区位哦！"
            type="info"
            :closable="false"
            show-icon
          />
  
          <div class="input-section">
            <label>本期开奖期号:</label>
            <el-input
              v-model="formData.drawId"
              placeholder="加载中..."
              disabled
              class="draw-id-select"
            />
          </div>
  
          <div class="input-section ball-input-section">
            <label>本期红球号码（6个）:</label>
            <div class="red-balls-selector">
              <div 
                v-for="(ball, index) in formData.lastRedBalls" 
                :key="'red-ball-' + index"
                class="ball-selector-container"
              >
                <div 
                  class="ball-number-display"
                  :class="{ 
                    'selected': ball !== '', 
                    'clickable': true
                  }"
                  @click="openBallSelector(index)"
                >
                  {{ ball || '?' }}
                </div>
              </div>
            </div>
            
            <!-- 球号选择弹窗 -->
            <el-dialog
              v-model="showBallSelector"
              title="选择红球号码"
              width="90%"
              style="max-width: 480px;"
              center
              append-to-body
            >
                <h4>选择第{{ currentBallIndex + 1 }}个红球号码</h4>
                <div class="ball-numbers-grid">
                  <div 
                    v-for="num in 33" 
                    :key="num"
                    class="ball-number-option"
                    :class="{ 
                      'selected': formData.lastRedBalls[currentBallIndex] == num,
                      'used': formData.lastRedBalls.includes(String(num).padStart(2, '0')) && formData.lastRedBalls[currentBallIndex] != String(num).padStart(2, '0')
                    }"
                    @click="selectBallNumber(num)"
                  >
                    {{ String(num).padStart(2, '0') }}
                  </div>
                </div>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="clearBallNumber">清空</el-button>
                  <el-button type="primary" @click="closeBallSelector">确定</el-button>
                </div>
              </template>
            </el-dialog>
          </div>
  
          <div class="input-section">
            <label>本期蓝球号码:</label>
            <div class="blue-ball-selector">
              <div class="ball-selector-container">
                <div 
                  class="ball-number-display blue-ball-display"
                  :class="{ 
                    'selected': formData.lastBlueBall !== '', 
                    'clickable': true
                  }"
                  @click="openBlueBallSelector"
                >
                  {{ formData.lastBlueBall || '?' }}
                </div>
              </div>
            </div>
            
            <!-- 蓝球号选择弹窗 -->
            <el-dialog
              v-model="showBlueBallSelector"
              title="选择蓝球号码"
              width="90%"
              style="max-width: 480px;"
              center
              append-to-body
            >
                <h4>选择蓝球号码</h4>
                <div class="ball-numbers-grid">
                  <div 
                    v-for="num in 16" 
                    :key="num"
                    class="ball-number-option blue-option"
                    :class="{ 
                      'selected': formData.lastBlueBall == String(num).padStart(2, '0')
                    }"
                    @click="selectBlueBallNumber(num)"
                  >
                    {{ String(num).padStart(2, '0') }}
                  </div>
                </div>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="clearBlueBallNumber">清空</el-button>
                  <el-button type="primary" @click="closeBlueBallSelector">确定</el-button>
                </div>
              </template>
            </el-dialog>
          </div>
  
          <!-- 推测期号输入框 -->
          <div class="input-section">
            <label>推测下期期号:</label>
            <el-input
              v-model="formData.predictDrawId"
              placeholder="自动填充"
              disabled
              class="draw-id-select"
            />
          </div>
  
          <!-- 用户验证状态提示 -->
          <div v-if="userVerifying" class="verification-status">
            <div class="loading-spinner">⏳</div>
            <p>正在验证登录状态...</p>
          </div>
  
          <el-button 
            type="primary"
            class="full-width continue-btn"
            @click="handleContinueClick"
            :disabled="!canProceedStep1"
            :loading="userVerifying"
          >
            {{ userVerifying ? '验证中...' : (userVerified ? '继续' : '请先登录') }}
          </el-button>
        </el-card>
  
        <!-- 第二步：展示首球分析结果 -->
        <el-card v-if="currentStep === 2" class="step-panel" shadow="hover">
          <template #header>
            <h3>首球分析数据</h3>
          </template>
          
          <el-skeleton v-if="loading" :rows="5" animated />
          
          <el-alert
            v-if="!loading && firstStepAnalysisData.length === 0"
            title="未获取到分析数据"
            type="warning"
            :closable="false"
            show-icon
            style="margin-bottom: 20px;"
          >
            <template #default>
              <p>请返回上一步重新进行分析</p>
            </template>
          </el-alert>
          
          <div v-if="!loading && firstStepAnalysisData.length > 0" class="step2-content-wrapper">
            <div class="analysis-table-container">
              <el-table
                :data="firstStepAnalysisData"
                stripe
                style="width: 100%"
                :header-cell-style="{ background: '#f5f7fa', color: '#333', fontWeight: 'bold' }"
                max-height="600"
                :table-layout="'fixed'"
              >
                <el-table-column prop="ballNumber" label="号球" align="center">
                  <template #default="scope">
                    <span class="table-ball-number">{{ String(scope.row.ballNumber).padStart(2, '0') }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="frequency" label="张力值" align="center" />
                <el-table-column prop="coefficientSum" label="系数值" align="center">
                  <template #default="scope">
                    {{ scope.row.coefficientSum.toFixed(2) }}
                  </template>
                </el-table-column>
                <el-table-column prop="top100Ranking" label="百期排位" align="center" />
                <el-table-column prop="historyRanking" label="历史排位" align="center" />
              </el-table>
            </div>

            <!-- 选择首球 -->
            <div class="first-ball-selection">
              <label class="selection-label">请选择1个红球作为首球:</label>
              <div class="first-ball-selector">
                <div 
                  v-for="item in firstStepAnalysisData" 
                  :key="item.ballNumber"
                  class="ball-option"
                  :class="{ 'selected': formData.firstBall == String(item.ballNumber).padStart(2, '0') }"
                  @click="selectFirstBall(item.ballNumber)"
                >
                  <span class="ball-number">{{ String(item.ballNumber).padStart(2, '0') }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 按钮组（移到外面，始终显示） -->
          <div v-if="!loading" class="button-group">
            <el-button @click="prevStep">上一步</el-button>
            <el-button 
              v-if="firstStepAnalysisData.length > 0"
              type="primary"
              @click="nextStep"
              :disabled="!formData.firstBall"
              class="continue-btn"
            >
              继续
            </el-button>
          </div>
        </el-card>
  
        <!-- 第三步：随球分析数据 -->
        <el-card v-if="currentStep === 3" class="step-panel" shadow="hover">
          <template #header>
            <h3>随球分析数据</h3>
          </template>
          
          <el-skeleton v-if="loading" :rows="5" animated />
          
          <el-alert
            v-if="!loading && secondStepAnalysisData.length === 0"
            title="未获取到分析数据"
            type="warning"
            :closable="false"
            show-icon
            style="margin-bottom: 20px;"
          >
            <template #default>
              <p>请返回上一步重新进行分析</p>
            </template>
          </el-alert>
          
          <div v-if="!loading && secondStepAnalysisData.length > 0" class="step2-content-wrapper">
            <div class="analysis-table-container">
              <el-table
                :data="secondStepAnalysisData"
                stripe
                style="width: 100%"
                :header-cell-style="{ background: '#f5f7fa', color: '#333', fontWeight: 'bold' }"
                max-height="600"
                :table-layout="'fixed'"
              >
                <el-table-column prop="ballNumber" label="号球" align="center">
                  <template #default="scope">
                    <span class="table-ball-number">{{ String(scope.row.ballNumber).padStart(2, '0') }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="frequency" label="张力值" align="center" />
                <el-table-column prop="coefficientSum" label="系数值" align="center">
                  <template #default="scope">
                    {{ scope.row.coefficientSum.toFixed(2) }}
                  </template>
                </el-table-column>
                <el-table-column prop="top100Ranking" label="百期排位" align="center" />
                <el-table-column prop="historyRanking" label="历史排位" align="center" />
              </el-table>
            </div>

            <!-- 选择随球 -->
            <div class="first-ball-selection">
              <label class="selection-label">请选择5个红球作为随球:</label>
              <div class="first-ball-selector">
                <div 
                  v-for="item in secondStepAnalysisData" 
                  :key="item.ballNumber"
                  v-show="String(item.ballNumber).padStart(2, '0') !== formData.firstBall"
                  class="ball-option"
                  :class="{ 'selected': formData.selectedRedBalls.includes(String(item.ballNumber).padStart(2, '0')) }"
                  @click="selectFollowBall(item.ballNumber)"
                >
                  <span class="ball-number">{{ String(item.ballNumber).padStart(2, '0') }}</span>
                </div>
              </div>
            </div>
            
            <!-- 球号选择提示 -->
            <div v-if="step3SelectionWarning" class="selection-warning">
              {{ step3SelectionWarning }}
            </div>
          </div>

          <!-- 按钮组（移到外面，始终显示） -->
          <div v-if="!loading" class="button-group">
            <el-button @click="prevStep">上一步</el-button>
            <el-button 
              v-if="secondStepAnalysisData.length > 0"
              type="primary"
              @click="nextStep"
              class="continue-btn"
            >
              继续
            </el-button>
          </div>
        </el-card>
  
        <!-- 第四步：蓝球分析数据 -->
        <el-card v-if="currentStep === 4" class="step-panel" shadow="hover">
          <template #header>
            <h3>蓝球分析数据</h3>
          </template>
          
          <el-skeleton v-if="loading" :rows="5" animated />
          
          <el-alert
            v-if="!loading && thirdStepAnalysisData.length === 0"
            title="未获取到分析数据"
            type="warning"
            :closable="false"
            show-icon
            style="margin-bottom: 20px;"
          >
            <template #default>
              <p>请返回上一步重新进行分析</p>
            </template>
          </el-alert>
          
          <div v-if="!loading && thirdStepAnalysisData.length > 0" class="step2-content-wrapper">
            <div class="analysis-table-container">
              <el-table
                :data="thirdStepAnalysisData"
                stripe
                style="width: 100%"
                :header-cell-style="{ background: '#f5f7fa', color: '#333', fontWeight: 'bold' }"
                max-height="600"
                :table-layout="'fixed'"
              >
                <el-table-column prop="ballNumber" label="号球" align="center">
                  <template #default="scope">
                    <span class="table-ball-number blue-ball-number">{{ String(scope.row.ballNumber).padStart(2, '0') }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="frequency" label="张力值" align="center" />
                <el-table-column prop="coefficientSum" label="系数值" align="center">
                  <template #default="scope">
                    {{ scope.row.coefficientSum.toFixed(2) }}
                  </template>
                </el-table-column>
                <el-table-column prop="top100Ranking" label="百期排位" align="center" />
                <el-table-column prop="historyRanking" label="历史排位" align="center" />
              </el-table>
            </div>

            <!-- 选择蓝球 -->
            <div class="first-ball-selection">
              <label class="selection-label">请选择1个蓝球号码:</label>
              <div class="first-ball-selector">
                <div 
                  v-for="item in thirdStepAnalysisData" 
                  :key="item.ballNumber"
                  class="ball-option blue-ball-option"
                  :class="{ 'selected': formData.finalBlueBall == String(item.ballNumber).padStart(2, '0') }"
                  @click="selectFinalBlueBall(item.ballNumber)"
                >
                  <span class="ball-number blue-ball-number">{{ String(item.ballNumber).padStart(2, '0') }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 按钮组（移到外面，始终显示） -->
          <div v-if="!loading" class="button-group">
            <el-button @click="prevStep">上一步</el-button>
            <el-button 
              v-if="thirdStepAnalysisData.length > 0"
              type="primary"
              @click="nextStep"
              :disabled="!formData.finalBlueBall"
              class="continue-btn"
            >
              继续
            </el-button>
          </div>
        </el-card>
  
        <!-- 第五步：最终结果展示 -->
        <el-card v-if="currentStep === 5" class="step-panel" shadow="hover">
          <template #header>
          <h3>您本次推测的双色球号码组合为</h3>
          </template>
          
          <div class="final-result">
            <div class="result-balls">
              <div class="red-balls">
                <span class="ball-red">{{ String(formData.firstBall).padStart(2, '0') }}</span>
                <span 
                  v-for="ball in formData.selectedRedBalls" 
                  :key="ball"
                  class="ball-red"
                >
                  {{ String(ball).padStart(2, '0') }}
                </span>
              </div>
              <div class="blue-ball">
                <span class="ball-blue">{{ String(formData.finalBlueBall).padStart(2, '0') }}</span>
              </div>
            </div>
          </div>
  
          <!-- 用户服务协议 -->
          <el-card class="terms-section" shadow="hover">
            <el-checkbox v-model="agreeToTerms">
                以上号码由本人所推测选定
            </el-checkbox>
          </el-card>
  
          <div class="button-group">
            <el-button @click="prevStep">上一步</el-button>
            <el-button 
              type="primary"
              @click="submitPrediction"
              :disabled="loading || !agreeToTerms"
              :loading="loading"
              class="continue-btn"
            >
              {{ loading ? '提交中...' : '确认' }}
            </el-button>
          </div>
        </el-card>
      </div>
  
      <!-- 风险提示弹窗 -->
      <div v-if="showWarning" 
           class="modal-overlay"
           :style="{
             position: 'fixed',
             top: '0',
             left: '0',
             width: '100vw',
             height: '100vh',
             backgroundColor: 'rgba(0, 0, 0, 0.6)',
             zIndex: 9999,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             backdropFilter: 'blur(8px)'
           }"
           @click="hideWarning">
        <div class="centered-modal warning-modal" 
             :style="{
               position: 'relative',
               backgroundColor: '#ffffff',
               borderRadius: '20px',
               padding: '40px 35px',
               textAlign: 'center',
               boxShadow: '0 25px 80px rgba(0, 0, 0, 0.4)',
               margin: '0',
               maxWidth: 'none',
               maxHeight: '85vh',
               overflowY: 'auto',
               animation: 'desktopModalSlideIn 0.4s ease-out',
               width: isDesktop ? '500px' : 'auto',
               minWidth: isDesktop ? '480px' : 'auto'
             }"
             @click.stop>
          <div class="modal-icon"
               :style="{
                 width: isDesktop ? '100px' : '80px',
                 height: isDesktop ? '100px' : '80px',
                 borderRadius: '50%',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
                 margin: '0 auto 25px',
                 fontSize: isDesktop ? '42px' : '32px',
                 color: '#ffffff',
                 background: 'linear-gradient(135deg, #ff9800, #ff6f00)',
                 boxShadow: '0 8px 25px rgba(255, 152, 0, 0.4)'
               }">
            <InfoFilled />
          </div>
          <h3 class="modal-title"
              :style="{
                fontSize: isDesktop ? '26px' : '22px',
                fontWeight: '700',
                color: '#2c3e50',
                margin: '0 0 15px 0',
                lineHeight: '1.3'
              }">风险提示</h3>
          <p class="modal-text"
             :style="{
               fontSize: isDesktop ? '18px' : '16px',
               color: '#5a6c7d',
               margin: '0 0 25px 0',
               lineHeight: '1.6',
               fontWeight: '400'
             }">彩票开奖系随机，数据、逻辑仅参考！</p>
          <div class="modal-buttons"
               :style="{
                 display: 'flex',
                 gap: isDesktop ? '25px' : '16px',
                 justifyContent: 'center',
                 marginTop: isDesktop ? '30px' : '18px'
               }">
            <button class="btn-cancel" 
                    :style="{
                      background: '#ffffff',
                      border: '2px solid #e1e8ed',
                      color: '#5a6c7d',
                      padding: isDesktop ? '16px 40px' : '12px 28px',
                      borderRadius: '12px',
                      fontSize: isDesktop ? '17px' : '16px',
                      fontWeight: '600',
                      cursor: 'pointer',
                      transition: 'all 0.3s ease',
                      minWidth: isDesktop ? '140px' : '120px'
                    }"
                    @click="hideWarning">取消</button>
            <button class="btn-confirm"
                    :style="{
                      background: 'linear-gradient(135deg, #f59e0b, #d97706)',
                      border: 'none',
                      color: 'white',
                      padding: isDesktop ? '16px 40px' : '12px 28px',
                      borderRadius: '12px',
                      fontSize: isDesktop ? '17px' : '16px',
                      fontWeight: '600',
                      cursor: 'pointer',
                      transition: 'all 0.3s ease',
                      minWidth: isDesktop ? '140px' : '120px',
                      boxShadow: '0 8px 25px rgba(245, 158, 11, 0.3)'
                    }"
                    @click="confirmSubmit">确认</button>
          </div>
        </div>
      </div>
  
      <!-- 推测完成弹窗 -->
      <div v-if="showSuccessModal" 
           class="modal-overlay"
           :style="{
             position: 'fixed',
             top: '0',
             left: '0',
             width: '100vw',
             height: '100vh',
             backgroundColor: 'rgba(0, 0, 0, 0.6)',
             zIndex: 9999,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             backdropFilter: 'blur(8px)'
           }"
           @click="hideSuccessModal">
        <div class="centered-modal success-modal" 
             :style="{
               position: 'relative',
               backgroundColor: '#ffffff',
               borderRadius: '20px',
               padding: isDesktop ? '40px 35px' : '25px 20px',
               textAlign: 'center',
               boxShadow: '0 25px 80px rgba(0, 0, 0, 0.4)',
               margin: isDesktop ? '0 20px' : '0 15px',
               maxWidth: 'none',
               maxHeight: '85vh',
               overflowY: 'auto',
               animation: 'desktopModalSlideIn 0.4s ease-out',
               width: isDesktop ? '550px' : 'auto',
               minWidth: isDesktop ? '520px' : 'auto'
             }"
             @click.stop>
          <div class="modal-icon success-icon"
               :style="{
                 width: isDesktop ? '100px' : '80px',
                 height: isDesktop ? '100px' : '80px',
                 borderRadius: '50%',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
                 margin: '0 auto 25px',
                 fontSize: isDesktop ? '42px' : '32px',
                 color: '#4caf50',
                 background: 'transparent',
                 boxShadow: 'none'
               }">
            <Trophy />
          </div>
          <h3 class="modal-title"
              :style="{
                fontSize: isDesktop ? '26px' : '22px',
                fontWeight: '700',
                color: '#2c3e50',
                margin: '0 0 15px 0',
                lineHeight: '1.3'
              }">本次推测已完成！</h3>
          <p class="modal-text"
             :style="{
               fontSize: isDesktop ? '18px' : '16px',
               color: '#5a6c7d',
               margin: '0 0 25px 0',
               lineHeight: '1.6',
               fontWeight: '400'
             }">您的第{{ formData.predictDrawId }}期推测号码已完成，祝您好运！</p>
          <div class="result-balls"
               :style="{
                 background: 'transparent',
                 padding: isDesktop ? '25px 20px' : '16px 15px',
                 margin: isDesktop ? '25px 0 30px 0' : '16px 0 20px 0',
                 display: 'flex',
                 flexDirection: 'column',
                 alignItems: 'center',
                 gap: isDesktop ? '15px' : '12px'
               }">
            <!-- 红球区域 -->
            <div :style="{
                   display: 'flex',
                   justifyContent: 'center',
                   gap: isDesktop ? '12px' : '8px',
                   flexWrap: 'wrap'
                 }">
              <span class="ball ball-red"
                    :style="{
                      display: 'inline-flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      width: isDesktop ? '48px' : '40px',
                      height: isDesktop ? '48px' : '40px',
                      borderRadius: '50%',
                      color: 'white',
                      fontSize: isDesktop ? '19px' : '17px',
                      fontWeight: 'bold',
                      background: 'linear-gradient(135deg, #e53e3e, #ff6b6b)',
                      boxShadow: '0 6px 18px rgba(229, 62, 62, 0.4)',
                      transition: 'all 0.3s ease'
                    }">{{ String(formData.firstBall).padStart(2, '0') }}</span>
              <span 
                v-for="ball in formData.selectedRedBalls" 
                :key="ball"
                class="ball ball-red"
                :style="{
                  display: 'inline-flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  width: isDesktop ? '48px' : '40px',
                  height: isDesktop ? '48px' : '40px',
                  borderRadius: '50%',
                  color: 'white',
                  fontSize: isDesktop ? '19px' : '17px',
                  fontWeight: 'bold',
                  background: 'linear-gradient(135deg, #e53e3e, #ff6b6b)',
                  boxShadow: '0 6px 18px rgba(229, 62, 62, 0.4)',
                  transition: 'all 0.3s ease'
                }"
              >
                {{ String(ball).padStart(2, '0') }}
              </span>
            </div>
            <!-- 蓝球区域 -->
            <div :style="{
                   display: 'flex',
                   justifyContent: 'center',
                   gap: isDesktop ? '12px' : '8px',
                   flexWrap: 'nowrap'
                 }">
              <span 
                v-if="formData.finalBlueBall"
                class="ball ball-blue"
                :style="{
                  display: 'inline-flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  width: isDesktop ? '48px' : '40px',
                  height: isDesktop ? '48px' : '40px',
                  borderRadius: '50%',
                  color: 'white',
                  fontSize: isDesktop ? '19px' : '17px',
                  fontWeight: 'bold',
                  background: 'linear-gradient(135deg, #2196f3, #42a5f5)',
                  boxShadow: '0 6px 18px rgba(33, 150, 243, 0.4)',
                  transition: 'all 0.3s ease'
                }"
              >{{ String(formData.finalBlueBall).padStart(2, '0') }}</span>
            </div>
          </div>
          <div class="modal-buttons"
               :style="{
                 display: 'flex',
                 gap: isDesktop ? '25px' : '16px',
                 justifyContent: 'center',
                 marginTop: isDesktop ? '30px' : '18px'
               }">
            <button class="btn-confirm single-btn"
                    :style="{
                      background: 'linear-gradient(135deg, #e53e3e, #ff6b6b)',
                      border: 'none',
                      color: 'white',
                      padding: isDesktop ? '16px 40px' : '12px 28px',
                      borderRadius: '12px',
                      fontSize: isDesktop ? '17px' : '16px',
                      fontWeight: '600',
                      cursor: 'pointer',
                      transition: 'all 0.3s ease',
                      minWidth: isDesktop ? '180px' : '140px',
                      boxShadow: '0 8px 25px rgba(229, 62, 62, 0.3)'
                    }"
                    @click="hideSuccessModal">确定</button>
          </div>
        </div>
      </div>
  
      <!-- 通用消息弹窗 -->
      <el-dialog
        v-model="showMessageModal"
        :title="messageModalContent.title"
        width="400px"
        center
      >
          <p>{{ messageModalContent.message }}</p>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="hideMessageModal">确定</el-button>
          </div>
        </template>
      </el-dialog>
  
      <!-- VIP过期提示弹窗 -->
      <div v-if="showVipExpiredModal" class="modal-overlay" @click="hideVipExpiredModal">
        <div class="centered-modal warning-modal" @click.stop>
          <div class="modal-icon">
            <InfoFilled />
          </div>
          <h3 class="modal-title">VIP会员已过期</h3>
          <p class="modal-text">您的VIP会员已过期，推测功能受到限制。建议您尽快续费以获得完整体验！</p>
          <div class="modal-buttons">
            <button class="btn-confirm single-btn" @click="hideVipExpiredModal">我知道了</button>
          </div>
        </div>
      </div>
  
      <!-- VIP过期提示弹窗 -->
      <div v-if="showVipExpiredModal" class="modal-overlay" @click="hideVipExpiredModal">
        <div class="centered-modal warning-modal" @click.stop>
          <div class="modal-icon">
            <InfoFilled />
          </div>
          <h3 class="modal-title">VIP会员已过期</h3>
          <p class="modal-text">您的VIP会员已过期，推测功能受到限制。建议您尽快续费以获得完整体验！</p>
          <div class="modal-buttons">
            <button class="btn-confirm single-btn" @click="hideVipExpiredModal">我知道了</button>
          </div>
        </div>
      </div>
  
      <!-- 筛选过程说明弹窗 -->
      <AlgorithmProcessModal
        v-model="showFilteringProcessModal"
        :process-text="currentFilteringProcess"
        :enable-formatting="true"
        theme="ssq"
        @close="handleFilteringModalClose"
      />
  
      <!-- 登录提示弹窗 -->
      <div v-if="showLoginModal" class="login-overlay" @click="hideLoginModal">
        <div class="login-content" @click.stop>
          <div class="login-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <circle cx="12" cy="8" r="3" fill="white"/>
              <path d="M12 14c-4 0-8 2-8 6v2h16v-2c0-4-4-6-8-6z" fill="white"/>
            </svg>
          </div>
          <h3>需要登录</h3>
          <p>使用助手功能需要先登录您的账号</p>
          <div class="login-buttons">
            <button class="login-cancel-btn" @click="hideLoginModal">取消</button>
            <button class="login-confirm-btn" @click="goToLogin">立即登录</button>
          </div>
        </div>
      </div>
  
  
    </div>
  </template>
  
  <script>
  import { lotteryApi } from '../../api'
  import { userStore } from '../../store/user'
  import AlgorithmProcessModal from '../../components/AlgorithmProcessModal.vue'
  import { 
    ElButton, 
    ElCard, 
    ElSteps, 
    ElStep, 
    ElInput, 
    ElRadioGroup, 
    ElRadioButton,
    ElDialog,
    ElAlert,
    ElCheckbox,
    ElDivider,
    ElSkeleton,
    ElTag,
    ElSelect,
    ElOption,
    ElTable,
    ElTableColumn
  } from 'element-plus'
  import { ArrowLeft, Warning, Check, InfoFilled, Trophy, QuestionFilled, Bell, Promotion } from '@element-plus/icons-vue'
  
  export default {
    name: 'Home',
    components: {
      AlgorithmProcessModal,
      ElButton,
      ElCard,
      ElSteps,
      ElStep,
      ElInput,
      ElRadioGroup,
      ElRadioButton,
      ElDialog,
      ElAlert,
      ElCheckbox,
      ElDivider,
      ElSkeleton,
      ElTag,
      ArrowLeft,
      Warning,
      Check,
      InfoFilled,
      QuestionFilled,
      Bell,
      Promotion,
      ElSelect,
      ElOption,
      ElTable,
      ElTableColumn,
      Trophy
    },
    data() {
      return {
        currentStep: 1,
        loading: false,
        showWarning: false,
        showSuccessModal: false,
        showMessageModal: false,
        showLoginModal: false, // 登录提示弹窗显示状态
        messageModalContent: {
          title: '',
          message: '',
          type: 'info' // 'info', 'error', 'warning'
        },
  
        userVerified: false, // 用户登录验证状态
        userVerifying: true, // 正在验证用户登录状态
        vipExpired: false, // VIP是否过期
        showVipExpiredModal: false, // VIP过期提示弹窗
        
        // 筛选过程说明
        redBallsFilteringProcess: '', // 红球筛选过程说明
        followBallsFilteringProcess: '', // 跟随球筛选过程说明
        blueBallsFilteringProcess: '', // 蓝球筛选过程说明
        showFilteringProcessModal: false, // 显示筛选过程弹窗
        currentFilteringProcess: '', // 当前显示的筛选过程
        showBallSelector: false, // 红球号选择弹窗显示状态
        currentBallIndex: 0, // 当前选择的球位置
        showBlueBallSelector: false, // 蓝球号选择弹窗显示状态
        showFirstBallSelector: false, // 首球选择弹窗显示状态
        showFollowBallSelector: false, // 随球选择弹窗显示状态
        currentFollowBallIndex: 0, // 当前选择的随球位置
        showSelectedBallSelector: false, // 其余红球选择弹窗显示状态
        currentSelectedBallIndex: 0, // 当前选择的其余红球位置
        showSelectedBlueBallSelector: false, // 蓝球选择弹窗显示状态
        currentSelectedBlueBallIndex: 0, // 当前选择的蓝球位置
        showFinalBlueBallSelector: false, // 最终蓝球选择弹窗显示状态
        steps: ['推测准备', '推测首球', '推测随球', '推测蓝球', '确认结果'],
        positions: [
          { value: 'H', label: '高区位', desc: '高位投注算法' },
          { value: 'M', label: '中区位', desc: '中位投注算法' },
          { value: 'L', label: '低区位', desc: '低位投注算法' }
        ],
        formData: {
          level: '',
          drawId: '',
          drawDate: '',
          lastRedBalls: ['', '', '', '', '', ''],
          lastBlueBall: '',
          firstBall: '',
          followBalls: ['', ''], // 改为数组，存储2个随球
          selectedRedBalls: ['', '', '', '', ''],
          selectedBlueBalls: ['', ''],
          finalBlueBall: '',
          predictDrawId: '' // 新增推测期号
        },
        analyzedRedBalls: [],
        followAnalyzedBalls: [],
        analyzedBlueBalls: [],
        firstStepAnalysisData: [], // 精推第一步分析数据
        secondStepAnalysisData: [], // 精推第二步分析数据
        thirdStepAnalysisData: [], // 精推第三步分析数据
        agreeToTerms: false, // 用户服务协议勾选状态
        recentDrawIds: [], // 存储近10期开奖期号
        drawIdOptions: [], // 用于el-select的选项
        latestDrawId: null, // 最新开奖期号
        
        // 响应式设计
        isDesktop: false, // 是否为桌面端
        resizeHandler: null, // 窗口大小变化处理器
        loginCheckTimer: null, // 登录状态检查定时器
        isCheckingLogin: false, // 是否正在检查登录状态（防止重复调用）
        cacheCleanupTimer: null // 缓存清除定时器
      }
    },
    async mounted() {
      // 进入首页时验证用户登录状态
      await this.verifyUserLogin()
      // 获取近10期开奖期号
      await this.fetchRecentDrawIds()
      
      // 尝试从缓存加载表单数据，静默恢复，不显示提示
      this.loadFormDataFromCache()
      
      // 缓存恢复后，重新设置推测期号以确保是最新的
      if (this.latestDrawId) {
        const latestId = parseInt(this.latestDrawId, 10)
        this.formData.predictDrawId = String(latestId + 1)
        console.log('重新设置推测期号为最新:', this.formData.predictDrawId)
      }
      
      // 初始化桌面端检测
      this.initResponsiveDesign()
      
      // 启动定时清除缓存（每15分钟）
      this.cacheCleanupTimer = setInterval(() => {
        this.clearCache()
        console.log('精推版双色球缓存已定时清除（15分钟）')
      }, 15 * 60 * 1000)
    },
    beforeUnmount() {
      // 移除窗口大小变化监听器
      if (this.resizeHandler && typeof window !== 'undefined') {
        window.removeEventListener('resize', this.resizeHandler)
      }
      // 清除缓存清除定时器
      if (this.cacheCleanupTimer) {
        clearInterval(this.cacheCleanupTimer)
        this.cacheCleanupTimer = null
      }
    },
    computed: {
      canProceedStep1() {
        return this.userVerified && 
               this.formData.level && 
               this.formData.drawId && 
               this.formData.lastRedBalls.every(ball => ball !== '') && 
               this.formData.lastBlueBall &&
               this.formData.predictDrawId;
      },
      canProceedStep2() {
        return this.formData.firstBall !== ''
      },
      canProceedStep3() {
        return this.formData.selectedRedBalls.every(ball => ball !== '')
      },
      canProceedStep4() {
        return this.formData.selectedBlueBalls.every(ball => ball !== '')
      },
      canProceedStep4Final() {
        return this.canProceedStep4 && this.formData.finalBlueBall && this.analyzedBlueBalls.length > 0
      },
      // 第三步选择提示
      step3SelectionWarning() {
        if (this.currentStep !== 3) return ''
        const selectedCount = this.formData.selectedRedBalls.filter(ball => ball !== '').length
        if (selectedCount < 5) {
          return `请选择5个球号，当前已选择${selectedCount}个`
        }
        return ''
      }
    },
    watch: {
      // 监听formData的变化，自动保存缓存
      formData: {
        handler() {
          // 只有在用户已经开始选择时才保存缓存
          if (this.formData.level) {
            this.saveFormDataToCache()
          }
        },
        deep: true
      },
      // 监听协议同意状态
      agreeToTerms() {
        if (this.formData.level) {
          this.saveFormDataToCache()
        }
      }
    },
    methods: {
      // 初始化响应式设计
      initResponsiveDesign() {
        // 安全检查 window 对象是否存在
        if (typeof window !== 'undefined') {
          // 设置初始状态
          this.isDesktop = window.innerWidth > 1024
          
          // 创建防抖的窗口大小变化处理器
          this.resizeHandler = this.debounce(() => {
            this.isDesktop = window.innerWidth > 1024
          }, 100)
          
          // 添加窗口大小变化监听器
          window.addEventListener('resize', this.resizeHandler)
        }
      },
      
      // 防抖函数
      debounce(func, wait) {
        let timeout
        return function executedFunction(...args) {
          const later = () => {
            clearTimeout(timeout)
            func(...args)
          }
          clearTimeout(timeout)
          timeout = setTimeout(later, wait)
        }
      },
      
      // 验证用户登录状态
      async verifyUserLogin(isTimerCheck = false) {
        // 防止重复调用
        if (this.isCheckingLogin) {
          return
        }
        
        this.isCheckingLogin = true
        // 只在首次验证时显示验证中状态，定时检查时不显示
        if (!isTimerCheck) {
          this.userVerifying = true
        }
        try {
          // 使用userStore的fetchLoginUser方法获取用户信息
          const userInfo = await userStore.fetchLoginUser()
          
          if (userInfo && userInfo.id) {
            this.userVerified = true
            if (!isTimerCheck) {
              console.log('用户登录验证成功，用户ID:', userInfo.id)
            }
            
            // 只在首次验证时检查VIP是否过期，定时检查时不检查
            if (!isTimerCheck) {
              await this.checkVipExpire()
            }
          } else {
            // 登录验证失败，清除本地登录状态
            this.handleSessionExpired('登录验证失败，session可能已过期')
          }
        } catch (error) {
          // 接口调用失败，可能是session过期或网络问题
          console.error('获取用户信息失败:', error)
          this.handleSessionExpired('登录状态已过期，请重新登录')
        } finally {
          this.userVerifying = false
          this.isCheckingLogin = false
        }
      },
  
      // 检查VIP是否过期
      async checkVipExpire() {
        try {
          const response = await lotteryApi.checkVipExpire()
          if (response && response.success === true) {
            this.vipExpired = response.data // data为true表示已过期，false表示未过期
            if (this.vipExpired) {
              console.log('VIP已过期')
              this.showVipExpiredModal = true
            } else {
              console.log('VIP未过期')
            }
          } else {
            console.error('检查VIP过期状态失败:', response?.message)
          }
        } catch (error) {
          console.error('检查VIP过期状态出错:', error)
        }
      },
  
      // 隐藏VIP过期弹窗
      hideVipExpiredModal() {
        this.showVipExpiredModal = false
        // 跳转回首页
        this.$router.push('/')
      },
  
      // 显示筛选过程说明
      showFilteringProcess(type) {
        switch (type) {
          case 'redBalls':
            this.currentFilteringProcess = this.redBallsFilteringProcess
            break
          case 'followBalls':
            this.currentFilteringProcess = this.followBallsFilteringProcess
            break
          case 'blueBalls':
            this.currentFilteringProcess = this.blueBallsFilteringProcess
            break
          default:
            this.currentFilteringProcess = '' // 设置为空字符串，让组件处理默认显示
        }
        this.showFilteringProcessModal = true
      },
  
      // 处理筛选弹窗关闭
      handleFilteringModalClose() {
        this.currentFilteringProcess = ''
      },
  
      // 处理session过期
      handleSessionExpired(message) {
        console.log('Session过期处理:', message)
        
        // 清除本地登录状态
        userStore.logout()
        
        // 设置验证失败状态
        this.userVerified = false
        
        // 清除定时器
        if (this.loginCheckTimer) {
          clearInterval(this.loginCheckTimer)
          this.loginCheckTimer = null
        }
        
        // 跳转到登录页
        this.$router.push('/login')
      },
  
      // 处理继续按钮点击
      handleContinueClick() {
        if (!this.userVerified) {
          this.showLoginModal = true
          return
        }
        this.nextStep()
      },
  
      async nextStep() {
        // 第三步验证：检查是否选择了5个随球
        if (this.currentStep === 3) {
          const selectedCount = this.formData.selectedRedBalls.filter(ball => ball !== '').length
          if (selectedCount < 5) {
            // 不显示弹窗，滚动到底部让用户看到红色提示
            this.$nextTick(() => {
              window.scrollTo({
                top: document.documentElement.scrollHeight,
                behavior: 'smooth'
              })
            })
            return
          }
        }
        
        if (this.currentStep === 1) {
          await this.analyzeFirstBalls()
        } else if (this.currentStep === 2) {
          await this.analyzeSecondStep()
        } else if (this.currentStep === 3) {
          await this.analyzeThirdStep()
        }
        
        this.currentStep++
        // 步骤变化时自动保存缓存
        this.saveFormDataToCache()
      },
      
      prevStep() {
        this.currentStep--
        // 步骤变化时自动保存缓存
        this.saveFormDataToCache()
      },
  
      async analyzeFirstBalls() {
        this.loading = true
        try {
          const response = await lotteryApi.jtssqFirstStepAnalysis(
            this.formData.level,
            this.formData.lastRedBalls.join(','),
            parseInt(this.formData.lastBlueBall)
          )
          
          if (response.success === true) {
            // 保存完整的分析结果
            this.firstStepAnalysisData = response.data?.results || []
            console.log('精推首球分析结果:', this.firstStepAnalysisData)
          } else {
            this.showMessage('分析失败', response.message, 'error')
          }
        } catch (error) {
          console.error('首球分析失败:', error)
          this.showMessage('分析失败', '请检查网络连接', 'error')
        } finally {
          this.loading = false
        }
      },

      async analyzeSecondStep() {
        this.loading = true
        try {
          const response = await lotteryApi.jtssqSecondStepAnalysis(
            this.formData.level,
            this.formData.lastRedBalls.join(','),
            parseInt(this.formData.lastBlueBall),
            parseInt(this.formData.firstBall)
          )
          
          if (response.success === true) {
            // 保存完整的分析结果
            this.secondStepAnalysisData = response.data?.results || []
            console.log('精推随球分析结果:', this.secondStepAnalysisData)
          } else {
            this.showMessage('分析失败', response.message, 'error')
          }
        } catch (error) {
          console.error('随球分析失败:', error)
          this.showMessage('分析失败', '请检查网络连接', 'error')
        } finally {
          this.loading = false
        }
      },

      async analyzeThirdStep() {
        this.loading = true
        try {
          // 组合下期红球号码：首球 + 5个随球
          const nextRedBalls = [this.formData.firstBall, ...this.formData.selectedRedBalls].join(',')
          
          const response = await lotteryApi.jtssqThirdStepAnalysis(
            this.formData.level,
            this.formData.lastRedBalls.join(','),
            parseInt(this.formData.lastBlueBall),
            nextRedBalls
          )
          
          if (response.success === true) {
            // 保存完整的分析结果
            this.thirdStepAnalysisData = response.data?.results || []
            console.log('精推蓝球分析结果:', this.thirdStepAnalysisData)
          } else {
            this.showMessage('分析失败', response.message, 'error')
          }
        } catch (error) {
          console.error('蓝球分析失败:', error)
          this.showMessage('分析失败', '请检查网络连接', 'error')
        } finally {
          this.loading = false
        }
      },
  
      async analyzeFallowBalls() {
        this.loading = true
        try {
          // 获取用户ID
          const userId = userStore.user?.id
          if (!userId) {
            this.showMessage('登录提示', '请先登录后再进行分析', 'warning')
            this.$router.push('/login')
            return
          }
          
          const firstThree = `${this.formData.firstBall},${this.formData.followBalls.join(',')}`
          
          const response = await lotteryApi.fallowBallAnalysis(
            userId,
            this.formData.level,
            firstThree,
            this.formData.lastRedBalls.join(','),
            parseInt(this.formData.lastBlueBall)
          )
          
          if (response.success === true) {
            // 新的API响应结构：data.result 包含推荐的球号数组
            this.followAnalyzedBalls = response.data?.result || response.data || []
            // 保存筛选过程说明
            this.followBallsFilteringProcess = response.data?.filteringProcess || ''
            console.log('跟随球分析结果:', this.followAnalyzedBalls)
            console.log('跟随球筛选过程:', this.followBallsFilteringProcess)
          } else {
            this.showMessage('跟随分析失败', response.message, 'error')
          }
        } catch (error) {
          console.error('跟随分析失败:', error)
          this.showMessage('分析失败', '请检查网络连接', 'error')
        } finally {
          this.loading = false
        }
      },
  
      async analyzeBlueBalls() {
        this.loading = true
        try {
          // 获取用户ID
          const userId = userStore.user?.id
          if (!userId) {
            this.showMessage('登录提示', '请先登录后再进行分析', 'warning')
            this.$router.push('/login')
            return
          }
          
          const allRedBalls = [this.formData.firstBall, ...this.formData.selectedRedBalls].join(',')
          
          const response = await lotteryApi.blueBallAnalysis(
            userId,
            this.formData.level,
            allRedBalls,
            this.formData.selectedBlueBalls.join(','),
            this.formData.lastRedBalls.join(','),
            parseInt(this.formData.lastBlueBall)
          )
          
          if (response.success === true) {
            // 新的API响应结构：data.result 包含推荐的球号数组
            this.analyzedBlueBalls = response.data?.result || response.data || []
            // 保存筛选过程说明
            this.blueBallsFilteringProcess = response.data?.filteringProcess || ''
            console.log('蓝球分析结果:', this.analyzedBlueBalls)
            console.log('蓝球筛选过程:', this.blueBallsFilteringProcess)
          } else {
            this.showMessage('蓝球分析失败', response.message, 'error')
          }
        } catch (error) {
          console.error('蓝球分析失败:', error)
          this.showMessage('分析失败', '请检查网络连接', 'error')
        } finally {
          this.loading = false
        }
      },
  
      submitPrediction() {
        this.showWarning = true
      },
  
      hideWarning() {
        this.showWarning = false
      },
  
      hideSuccessModal() {
        this.showSuccessModal = false
        this.resetForm()
        // 跳转回首页
        this.$router.push('/')
      },
  
      showMessage(title, message, type = 'info') {
        this.messageModalContent = {
          title,
          message,
          type
        }
        this.showMessageModal = true
      },
  
      hideMessageModal() {
        this.showMessageModal = false
      },
  
      // 显示登录弹窗
      showLoginTip() {
        this.showLoginModal = true
      },
  
      // 隐藏登录弹窗
      hideLoginModal() {
        this.showLoginModal = false
      },
  
      // 跳转到登录页面
      goToLogin() {
        this.hideLoginModal()
        this.$router.push('/login')
      },
  
      // 显示服务条款
      showTerms() {
        // 保存当前表单数据到localStorage
        this.saveFormDataToCache();
        this.$router.push('/user-agreement');
      },
      
      // 保存表单数据到缓存
      saveFormDataToCache() {
        try {
          localStorage.setItem('jtssq_prediction_cache', JSON.stringify({
            currentStep: this.currentStep,
            formData: this.formData,
            analyzedRedBalls: this.analyzedRedBalls,
            followAnalyzedBalls: this.followAnalyzedBalls,
            analyzedBlueBalls: this.analyzedBlueBalls,
            firstStepAnalysisData: this.firstStepAnalysisData,
            secondStepAnalysisData: this.secondStepAnalysisData,
            thirdStepAnalysisData: this.thirdStepAnalysisData,
            agreeToTerms: this.agreeToTerms,
            // 保存筛选过程说明数据
            redBallsFilteringProcess: this.redBallsFilteringProcess,
            followBallsFilteringProcess: this.followBallsFilteringProcess,
            blueBallsFilteringProcess: this.blueBallsFilteringProcess,
            timestamp: Date.now() // 添加时间戳
          }));
        } catch (error) {
          console.error('保存精推双色球表单数据到缓存失败:', error);
        }
      },
  
      // 清除缓存
      clearCache() {
        try {
          localStorage.removeItem('jtssq_prediction_cache');
          console.log('精推双色球推测缓存已清除');
        } catch (error) {
          console.error('清除精推双色球缓存失败:', error);
        }
      },
      
      // 从缓存加载表单数据
      loadFormDataFromCache() {
        try {
          const cachedData = localStorage.getItem('jtssq_prediction_cache');
          if (cachedData) {
            const parsedData = JSON.parse(cachedData);
            
            // 检查缓存是否过期 (15分钟)
            const cacheAge = Date.now() - (parsedData.timestamp || 0);
            const maxAge = 15 * 60 * 1000; // 15分钟
            
            if (cacheAge > maxAge) {
              console.log('双色球缓存已过期，自动清除');
              this.clearCache();
              return false;
            }
  
            // 恢复数据
            this.currentStep = parsedData.currentStep || 1;
            // 恢复表单数据，但排除推测期号（确保始终使用最新的推测期号）
            const { predictDrawId, ...restFormData } = parsedData.formData || {};
            this.formData = { ...this.formData, ...restFormData };
            this.analyzedRedBalls = parsedData.analyzedRedBalls || [];
            this.followAnalyzedBalls = parsedData.followAnalyzedBalls || [];
            this.analyzedBlueBalls = parsedData.analyzedBlueBalls || [];
            this.firstStepAnalysisData = parsedData.firstStepAnalysisData || [];
            this.secondStepAnalysisData = parsedData.secondStepAnalysisData || [];
            this.thirdStepAnalysisData = parsedData.thirdStepAnalysisData || [];
            this.agreeToTerms = parsedData.agreeToTerms || false;
            // 恢复筛选过程说明数据
            this.redBallsFilteringProcess = parsedData.redBallsFilteringProcess || '';
            this.followBallsFilteringProcess = parsedData.followBallsFilteringProcess || '';
            this.blueBallsFilteringProcess = parsedData.blueBallsFilteringProcess || '';
            
            console.log('精推双色球推测数据已从缓存恢复，当前步骤:', this.currentStep);
            return true;
          }
        } catch (error) {
          console.error('从缓存加载双色球表单数据失败:', error);
          this.clearCache();
        }
        return false;
      },
  
      async confirmSubmit() {
        this.loading = true
        this.showWarning = false
        
        try {
          // 获取用户ID，如果没有则提示登录
          const userId = userStore.user?.id
          if (!userId) {
            this.showMessage('登录提示', '请先登录后再提交推测', 'warning')
            this.$router.push('/login')
            return
          }
          
          const allRedBalls = [this.formData.firstBall, ...this.formData.selectedRedBalls].join(',')
          
          // 如果没有开奖日期，使用今天的日期
          const today = new Date()
          const drawDate = today.getFullYear() + '-' + 
                          String(today.getMonth() + 1).padStart(2, '0') + '-' + 
                          String(today.getDate()).padStart(2, '0')
          
          const response = await lotteryApi.createPredictRecord(
            userId, // 使用真实的用户ID
            parseInt(this.formData.predictDrawId),
            drawDate, // 使用今天的日期
            allRedBalls,
            parseInt(this.formData.finalBlueBall)
          )
          
          if (response.success === true) {
            this.showSuccessModal = true
            // 提交成功后清除缓存
            this.clearCache()
            console.log('精推双色球推测提交成功，缓存已清除')
          } else {
            this.showMessage('提交失败', response.message, 'error')
          }
        } catch (error) {
          console.error('提交推测记录失败:', error)
          this.showMessage('提交失败', '请检查网络连接', 'error')
        } finally {
          this.loading = false
        }
      },
  
      // 球号选择相关方法
      openBallSelector(index) {
        if (!this.formData.level) {
          this.showMessage('提示', '请先选择上方的关键数据区位！', 'warning')
          return
        }
        
        this.currentBallIndex = index
        this.showBallSelector = true
      },
  
      closeBallSelector() {
        this.showBallSelector = false
      },
  
      selectBallNumber(num) {
        const formattedNum = String(num).padStart(2, '0')
        const isUsed = this.formData.lastRedBalls.includes(formattedNum) && this.formData.lastRedBalls[this.currentBallIndex] !== formattedNum
        if (isUsed) return
  
        this.formData.lastRedBalls[this.currentBallIndex] = formattedNum
        this.closeBallSelector()
      },
  
      clearBallNumber() {
        this.formData.lastRedBalls[this.currentBallIndex] = ''
        this.closeBallSelector()
      },
  
      // 蓝球选择相关方法
      openBlueBallSelector() {
        if (!this.formData.level) {
          this.showMessage('提示', '请先选择上方的关键数据区位！', 'warning')
          return
        }
        
        this.showBlueBallSelector = true
      },
  
      closeBlueBallSelector() {
        this.showBlueBallSelector = false
      },
  
      selectBlueBallNumber(num) {
        const formattedNum = String(num).padStart(2, '0')
        this.formData.lastBlueBall = formattedNum
        this.closeBlueBallSelector()
      },
  
      clearBlueBallNumber() {
        this.formData.lastBlueBall = ''
        this.closeBlueBallSelector()
      },
  
      // 首球选择相关方法
      openFirstBallSelector() {
        this.showFirstBallSelector = true
      },
  
      closeFirstBallSelector() {
        this.showFirstBallSelector = false
      },
  
      selectFirstBallNumber(num) {
        const formattedNum = String(num).padStart(2, '0')
        if (this.formData.followBalls.includes(formattedNum)) return
        
        this.formData.firstBall = formattedNum
        this.closeFirstBallSelector()
      },
  
      clearFirstBallNumber() {
        this.formData.firstBall = ''
        this.closeFirstBallSelector()
      },
  
      // 随球选择相关方法
      openFollowBallSelector(index) {
        this.currentFollowBallIndex = index
        this.showFollowBallSelector = true
      },
  
      closeFollowBallSelector() {
        this.showFollowBallSelector = false
      },
  
      selectFollowBallNumber(num) {
        const formattedNum = String(num).padStart(2, '0')
        const isUsed = (this.formData.firstBall === formattedNum) || 
                       (this.formData.followBalls.includes(formattedNum) && 
                        this.formData.followBalls[this.currentFollowBallIndex] !== formattedNum)
  
        if (isUsed) return
  
        this.formData.followBalls[this.currentFollowBallIndex] = formattedNum
        this.closeFollowBallSelector()
      },
  
      clearFollowBallNumber() {
        this.formData.followBalls[this.currentFollowBallIndex] = ''
        this.closeFollowBallSelector()
      },
  
      // 其余红球选择相关方法
      openSelectedBallSelector(index) {
        this.currentSelectedBallIndex = index
        this.showSelectedBallSelector = true
      },
  
      closeSelectedBallSelector() {
        this.showSelectedBallSelector = false
      },
  
      selectSelectedBallNumber(num) {
        if (this.isNumberUsedInStep3(num)) return
  
        const formattedNum = String(num).padStart(2, '0')
        this.formData.selectedRedBalls[this.currentSelectedBallIndex] = formattedNum
        this.closeSelectedBallSelector()
      },
  
      clearSelectedBallNumber() {
        this.formData.selectedRedBalls[this.currentSelectedBallIndex] = ''
        this.closeSelectedBallSelector()
      },
  
      // 检查号码是否在第三步中已被使用
      isNumberUsedInStep3(num) {
        const formattedNum = String(num).padStart(2, '0')
        // 检查是否与首球重复
        if (this.formData.firstBall === formattedNum) return true
        // 检查是否与其他已选择的红球重复
        return this.formData.selectedRedBalls.includes(formattedNum) && 
               this.formData.selectedRedBalls[this.currentSelectedBallIndex] !== formattedNum
      },
  
      // 蓝球选择相关方法
      openSelectedBlueBallSelector(index) {
        this.currentSelectedBlueBallIndex = index
        this.showSelectedBlueBallSelector = true
      },
  
      closeSelectedBlueBallSelector() {
        this.showSelectedBlueBallSelector = false
      },
  
      selectSelectedBlueBallNumber(num) {
        const formattedNum = String(num).padStart(2, '0')
        const isUsed = this.formData.selectedBlueBalls.includes(formattedNum) && this.formData.selectedBlueBalls[this.currentSelectedBlueBallIndex] !== formattedNum
        if (isUsed) return
  
        this.formData.selectedBlueBalls[this.currentSelectedBlueBallIndex] = formattedNum
        this.closeSelectedBlueBallSelector()
      },
  
      clearSelectedBlueBallNumber() {
        this.formData.selectedBlueBalls[this.currentSelectedBlueBallIndex] = ''
        this.closeSelectedBlueBallSelector()
      },
  
      // 最终蓝球选择相关方法
      openFinalBlueBallSelector() {
        this.showFinalBlueBallSelector = true
      },
  
      closeFinalBlueBallSelector() {
        this.showFinalBlueBallSelector = false
      },
  
      selectFirstBall(num) {
        const formattedNum = String(num).padStart(2, '0')
        this.formData.firstBall = formattedNum
      },

      selectFollowBall(num) {
        const formattedNum = String(num).padStart(2, '0')
        
        // 检查是否是首球，如果是则不允许选择
        if (formattedNum === this.formData.firstBall) {
          return
        }
        
        const index = this.formData.selectedRedBalls.indexOf(formattedNum)
        
        if (index > -1) {
          // 如果已选择，则取消选择
          const newArr = [...this.formData.selectedRedBalls]
          newArr[index] = ''
          // 整理数组，将空字符串移到后面
          const selected = newArr.filter(b => b !== '')
          const empty = newArr.filter(b => b === '')
          this.formData.selectedRedBalls = [...selected, ...empty]
        } else {
          // 如果未选择，则添加到第一个空位置
          const emptyIndex = this.formData.selectedRedBalls.findIndex(b => b === '')
          if (emptyIndex !== -1) {
            const newArr = [...this.formData.selectedRedBalls]
            newArr[emptyIndex] = formattedNum
            this.formData.selectedRedBalls = newArr
          }
        }
        
        console.log('选中的随球:', this.formData.selectedRedBalls)
      },

      selectFinalBlueBallNumber(num) {
        const formattedNum = String(num).padStart(2, '0')
        this.formData.finalBlueBall = formattedNum
        this.closeFinalBlueBallSelector()
      },

      selectFinalBlueBall(num) {
        const formattedNum = String(num).padStart(2, '0')
        this.formData.finalBlueBall = formattedNum
      },
  
      clearFinalBlueBallNumber() {
        this.formData.finalBlueBall = ''
        this.closeFinalBlueBallSelector()
      },
  
      resetForm() {
        this.currentStep = 1
        this.formData = {
          level: '',
          drawId: '',
          drawDate: '',
          lastRedBalls: ['', '', '', '', '', ''],
          lastBlueBall: '',
          firstBall: '',
          followBalls: ['', ''],
          selectedRedBalls: ['', '', '', '', ''],
          selectedBlueBalls: ['', ''],
          finalBlueBall: '',
          predictDrawId: '' // 新增推测期号
        }
        this.analyzedRedBalls = []
        this.followAnalyzedBalls = []
        this.analyzedBlueBalls = []
        this.firstStepAnalysisData = []
        this.secondStepAnalysisData = []
        this.thirdStepAnalysisData = []
        this.agreeToTerms = false
      },
  
      getStepStatus(index) {
        if (index < this.currentStep) {
          return 'success'
        } else if (index === this.currentStep) {
          return 'process'
        } else {
          return 'wait'
        }
      },
  
      // 获取近10期开奖期号
      async fetchRecentDrawIds() {
        this.loading = true
        try {
          const response = await lotteryApi.getRecent10DrawIds()
          if (response.success === true) {
            this.recentDrawIds = response.data
            // 将期号转换为选项格式
            this.drawIdOptions = this.recentDrawIds.map(id => ({
              value: String(id),
              label: String(id)
            }))
            if (this.recentDrawIds.length > 0) {
              this.latestDrawId = this.recentDrawIds[0]
              const latestId = parseInt(this.latestDrawId, 10)
              this.formData.drawId = String(latestId)
              // 自动设置推测期号为最新一期的下一期
              this.formData.predictDrawId = String(latestId + 1)
              // 自动加载最新期号的球号数据
              await this.handleDrawIdChange(String(latestId))
            }
          } else {
            console.error('获取期号失败:', response.message)
          }
        } catch (error) {
          console.error('获取期号失败:', error)
        } finally {
          this.loading = false
        }
      },
  
      // 期号选择变化时，自动获取并填充球号
      async handleDrawIdChange(drawId) {
        if (drawId) {
          this.loading = true
          try {
            const response = await lotteryApi.getDrawNumbersById(drawId)
            if (response.success === true) {
              const results = response.data
              // 根据接口返回的格式调整
              if (Array.isArray(results) && results.length >= 7) {
                // 前6个是红球，最后一个是蓝球
                this.formData.lastRedBalls = [
                  String(results[0] || '').padStart(2, '0'),
                  String(results[1] || '').padStart(2, '0'),
                  String(results[2] || '').padStart(2, '0'),
                  String(results[3] || '').padStart(2, '0'),
                  String(results[4] || '').padStart(2, '0'),
                  String(results[5] || '').padStart(2, '0')
                  ]
                  this.formData.lastBlueBall = String(results[6] || '').padStart(2, '0')
                  // 设置推测期号为选中期号的下一期
                  this.formData.predictDrawId = String(parseInt(drawId) + 1)
                  console.log('期号选择后设置推测期号:', drawId, '->', this.formData.predictDrawId)
                  // 静默更新，不显示提示弹窗
              } else {
                this.showMessage('获取开奖结果格式错误', '返回的球号数据格式不正确', 'error')
              }
            } else {
              this.showMessage('获取开奖结果失败', response.message, 'error')
            }
          } catch (error) {
            console.error('获取开奖结果失败:', error)
            this.showMessage('获取开奖结果失败', '请检查网络连接', 'error')
          } finally {
            this.loading = false
          }
        } else {
          // 如果清空期号，清空红球和蓝球
          this.formData.lastRedBalls = ['', '', '', '', '', '']
          this.formData.lastBlueBall = ''
          this.formData.drawDate = ''
          // 恢复默认推测期号
          if (this.latestDrawId) {
            const latestId = parseInt(this.latestDrawId, 10)
            this.formData.predictDrawId = String(latestId + 1)
          } else {
            this.formData.predictDrawId = ''
          }
          // 静默清空，不显示提示弹窗
        }
      }
    }
  }
  </script>
  
  <style scoped>
  /* 全局卡片样式 */
  :deep(.el-card) {
    border-radius: 8px !important;
    overflow: hidden;
  }
  
  /* 页面容器 */
  .home-container {
    padding: 20px 20px 8px 20px;
    background-color: #f0f2f5;
    min-height: calc(100vh - 70px);
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    max-width: 1200px;
  }
  
  /* 页面头部样式 */
  .ssq-header {
    padding: 20px;
    text-align: center;
    margin-bottom: 12px;
    background: linear-gradient(90deg, rgba(254, 150, 51, 1) 0%, rgba(246, 102, 77, 1) 100%);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(229, 62, 62, 0.3);
    color: white;
    position: relative;
    overflow: hidden;
  }
  
  .ssq-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
  }
  
  .header-top {
    display: flex;
    justify-content: flex-start;
    position: relative;
    z-index: 1;
  }
  
  .back-btn {
    color: #333;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 8px 15px;
    border-radius: 6px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.4);
  }
  
  .back-btn:hover {
    background-color: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 0.8);
    color: #333;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  .page-title {
    margin: 0;
    text-align: center;
    position: relative;
    z-index: 1;
  }
  
  .main-title {
    font-size: 32px;
    margin: 0 auto 10px;
    font-weight: 700;
    color: white;
    text-align: center;
    width: 100%;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
  }
  
  .subtitle {
    font-size: 18px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    width: 100%;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  
  /* 步骤导航 */
  .step-nav-card {
    margin-bottom: 8px;
    border-radius: 8px;
  }
  
  .step-nav-card :deep(.el-card__body) {
    padding: 20px 30px;
  }
  
  /* 自定义步骤条样式 */
  .custom-steps {
    width: 100%;
  }
  
  .custom-steps :deep(.el-step__title) {
    font-size: 14px;
    font-weight: 500;
  }
  
  .custom-steps :deep(.el-step__title.is-process) {
    color: #e53e3e;
    font-weight: 600;
  }
  
  .custom-steps :deep(.el-step__head.is-process) {
    color: #e53e3e;
    border-color: #e53e3e;
  }
  
  .custom-steps :deep(.el-step__head.is-wait) {
    color: #c0c4cc;
    border-color: #c0c4cc;
  }
  
  
  /* 步骤内容 */
  .step-content {
    padding: 0;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    display: flex;
  }
  
  .step-panel {
    width: 100%;
    margin-bottom: 8px;
    border-radius: 8px;
  }
  
  .step-panel :deep(.el-card__header) {
    padding: 12px 20px 12px 24px; 
  }
  
  .step-panel :deep(.el-card__header h3) {
    margin: 0;
  }
  
  .step-panel :deep(.el-card__body) {
    padding:  10px 15px 15px 15px;
  }
  
  /* 位置选择器 */
  .position-selector {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    justify-content: center;
    flex-wrap: nowrap;
  }
  
  .position-item {
    flex: 1;
    min-width: 0;
    max-width: none;
    padding: 35px 15px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .position-item :deep(.el-card__body) {
    padding: 0;
  }
  
  .position-item:hover {
    transform: translateY(-1px);
  }
  
  .position-item.selected {
    border-color: #e53e3e;
    background: rgba(229, 62, 62, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(229, 62, 62, 0.2);
  }
  
  .position-title {
    font-weight: 600;
    font-size: 16px;
    color: #333;
    transition: all 0.3s;
    text-align: center;
    width: 100%;
  }
  
  .position-desc {
    font-size: 13px;
    color: #666;
    transition: all 0.3s;
  }
  
  /* 输入区域 */
  .input-section {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
  .ball-input-section {
    margin-top: 0px !important;
  }
  
  
  .input-section label {
    display: block;
    margin-bottom: 15px;
    font-weight: bold;
    color: #333;
    font-size: 15px;
  }
  
  .input-section .el-input {
    margin-top: 8px;
  }
  
  .ball-input-section {
    margin-top: 20px;
  }
  
  .draw-id-select {
    width: 100%;
  }
  
  .input-section :deep(.el-input__wrapper),
  .input-section :deep(.el-select__wrapper) {
    height: 42px; /* default 32px + 10px */
    font-size: 16px;
  }
  
  /* 红球选择器样式 */
  .red-balls-selector {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    margin-top: 20px;
    padding: 0px;
  }
  
  .ball-selector-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 蓝球选择器样式 */
  .blue-ball-selector {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
    padding: 0px;
  }
  
  .blue-ball-display {
    background: linear-gradient(135deg, #2196f3, #42a5f5) !important;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3) !important;
  }
  
  .blue-option {
    background: #e3f2fd !important;
    color: #1976d2 !important;
    border: 2px solid #bbdefb !important;
  }
  
  .blue-option:hover {
    background: #2196f3 !important;
    color: white !important;
  }
  
  .ball-number-option.blue-option.selected {
    background: linear-gradient(135deg, #2196f3, #42a5f5) !important;
    color: white !important;
    border-color: #fff !important;
    transform: scale(1.1);
  }
  
  .ball-number-display {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e53e3e, #ff6b6b);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
    border: none;
  }
  
  .ball-number-display:hover.clickable {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 5px 15px rgba(229, 62, 62, 0.4);
  }
  
  .ball-number-display.disabled {
    background: linear-gradient(135deg, #e0e0e0, #bdbdbd);
    color: #999;
    cursor: not-allowed;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .ball-number-display.disabled:hover {
    transform: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* 确保红球始终显示红色 */
  .red-balls-selector .ball-number-display,
  .first-ball-selector .ball-number-display,
  .follow-balls-selector .ball-number-display,
  .first-ball-display .ball-number-display,
  .selected-balls-selector .ball-number-display {
    background: linear-gradient(135deg, #e53e3e, #ff6b6b) !important;
    box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3) !important;
  }
  
  /* 首球选择器样式 */
  .first-ball-selector {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
  }
  
  /* 随球选择器样式 */
  .follow-balls-selector {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  
  /* 第三步红球选择器样式 */
  .selected-red-balls-container {
    margin-top: 20px;
  }
  
  .first-ball-display {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
  }
  
  .selected-balls-selector {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    margin-top: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  
  .disabled-ball {
    opacity: 0.7;
    cursor: not-allowed !important;
  }
  
  .disabled-ball:hover {
    transform: none !important;
  }
  
  /* 蓝球选择器样式 */
  .blue-balls-selector {
    display: flex;
    gap: 15px;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
  }
  
  .final-blue-ball-selector {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
  }
  
  .recommended-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    z-index: 1;
  }
  
  .ball-number-option.recommended {
    position: relative;
    border: 2px solid #4caf50;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
  }
  
  /* 球号选择弹窗 */
  :deep(.el-dialog) {
    margin: 5vh auto !important;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  :deep(.el-dialog__body) {
    padding: 25px 30px;
  }
  
  :deep(.el-dialog__body h4) {
    margin: 0 0 20px 0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
  }
  
  .ball-numbers-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 18px;
    margin-bottom: 20px;
    justify-items: center;
    padding: 10px 15px;
    min-width: 0;
    max-width: 100%;
  }
  
  .ball-number-option {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    min-width: 0;
    max-width: 62px;
  }
  
  .ball-number-option:hover {
    background: #e53e3e;
    color: white;
    transform: scale(1.1);
  }
  
  .ball-number-option.selected {
    background: linear-gradient(135deg, #e53e3e, #ff6b6b);
    color: white;
    border-color: #fff;
    transform: scale(1.1);
  }
  
  .ball-number-option.used {
    background: #ffeb3b;
    color: #333;
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  .ball-number-option.used:hover {
    transform: none;
    background: #ffeb3b;
    color: #333;
  }
  
  /* 第二步内容包装器 */
  .step2-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* 首球选择 */
  .first-ball-selection {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
  }

  .selection-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
  }

  .first-ball-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    justify-content: flex-start;
  }

  .ball-option {
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .ball-option .ball-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff4757, #ee5a6f);
    color: white;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
    transition: all 0.3s ease;
  }

  .ball-option:hover .ball-number {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.5);
  }

  .ball-option.selected .ball-number {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.5);
    transform: scale(1.15);
  }

  /* 分析表格容器 */
  .analysis-table-container {
    margin-bottom: 20px;
    overflow: hidden;
    width: 100%;
  }

  /* 表格最大高度和滚动 */
  .analysis-table-container :deep(.el-table) {
    max-height: 600px;
    width: 100%;
    table-layout: fixed;
  }

  .analysis-table-container :deep(.el-table__body-wrapper) {
    max-height: 550px;
    overflow-y: auto;
  }

  /* 隐藏表格滚动条 */
  .analysis-table-container :deep(.el-table__body-wrapper)::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .analysis-table-container :deep(.el-table__body-wrapper) {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .table-ball-number {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #e53e3e, #ff6b6b);
    color: white;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(229, 62, 62, 0.3);
  }

  .blue-ball-number {
    background: linear-gradient(135deg, #2196f3, #42a5f5) !important;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3) !important;
  }

  .ball-option.blue-ball-option .ball-number {
    background: linear-gradient(135deg, #2196f3, #42a5f5) !important;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3) !important;
  }

  .ball-option.blue-ball-option.selected .ball-number {
    background: linear-gradient(135deg, #1976d2, #2196f3) !important;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.6) !important;
  }

  /* 球号展示 */
  .balls-display {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 12px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
  
  .balls-container {
    display: flex;
    flex-wrap: wrap;
      gap: 15px;
    justify-content: center;
  }
  
  /* 红球容器 */
  .red-balls-container {
    display: flex;
    flex-wrap: nowrap;
  }
  
  .ball-red, .ball-blue {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    color: white;
    font-size: 18px;
    font-weight: bold;
    margin: 0 3px;
  }
  
  .ball-red {
    background-color: #e53e3e;
  }
  
  .ball-blue {
    background-color: #3b82f6;
  }
  
  /* 最终结果 */
  .final-result {
    background: #f8f9fa;
    padding: 0px 20px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 8px;
    border: 1px solid #e9ecef;
  }
  
  .result-balls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
  }
  
  .red-balls {
    display: flex;
    gap: 5px;
  }
  
  /* 服务协议区域 */
  .terms-section {
    margin-bottom: 8px;
  }
  
  /* 按钮组 */
  .button-group {
    display: flex;
    gap: 10px;
    margin-top: 15px;
  }
  
  .button-group > .el-button {
    flex: 1;
    font-size: 16px;
    padding: 11px 20px;
    height: auto;
  }

  /* 球号选择警告提示 */
  .selection-warning {
    margin-top: 12px;
    padding: 10px 15px;
    color: #f56c6c;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    background-color: #fef0f0;
    border: 1px solid #fde2e2;
    border-radius: 4px;
  }
  
  .full-width {
    width: 100%;
  }
  
  .continue-btn {
    font-size: 16px;
    padding: 11px 20px;
    height: auto;
  }
  
  @keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
      transform: translate3d(0,0,0);
    }
    40%, 43% {
      transform: translate3d(0,-30px,0);
    }
    70% {
      transform: translate3d(0,-15px,0);
    }
    90% {
      transform: translate3d(0,-4px,0);
    }
  }
  
  /* 蓝球推荐提示样式 */
  .blue-ball-alert :deep(.el-alert__title) {
    color: #4caf50 !important;
    font-weight: 600;
  }
  
  /* Alert标题和图标样式 */
  .alert-title-with-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
  }
  
  .alert-title-with-icon span {
    font-size: 16px;
    font-weight: 600;
    color: #4caf50;
  }
  
  .info-btn-in-alert {
    margin-left: 8px;
    padding: 2px 4px !important;
    min-height: auto !important;
    height: auto !important;
    font-size: 16px !important;
    color: #4caf50 !important;
  }
  
  .info-btn-in-alert:hover {
    background-color: rgba(76, 175, 80, 0.1) !important;
    color: #388e3c !important;
  }
  
  /* 关键数据区位选择提示样式 */
  :deep(.el-alert--info .el-alert__title) {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #e53e3e !important;
  }
  
  :deep(.el-alert--info .el-alert__content) {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #e53e3e !important;
  }
  
  /* 新设计的弹窗样式 */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
  }
  
  /* 桌面端弹窗动画 */
  @keyframes desktopModalSlideIn {
    from {
      opacity: 0;
      transform: scale(0.8) translateY(-30px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  
  .centered-modal {
    background: white;
    border-radius: 16px;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideIn 0.3s ease-out;
  }
  
  @keyframes modalSlideIn {
    from {
      opacity: 0;
      transform: scale(0.9) translateY(-20px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  
  .warning-modal {
    width: 400px;
    min-width: 360px;
  }
  
  .success-modal {
    width: 450px;
    min-width: 400px;
    background: white !important;
  }
  
  .modal-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 32px;
    color: #2196f3;
    background: transparent;
  }
  
  .warning-modal .modal-icon {
    background: linear-gradient(135deg, #ff9800, #ff6f00);
    color: white;
  }
  
  .success-icon {
    animation: bounce 0.6s ease-in-out;
  }
  
  .modal-title {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px 0;
  }
  
  .modal-text {
    font-size: 16px;
    color: #666;
    margin: 0 0 18px 0;
    line-height: 1.5;
  }
  
  .modal-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
  }
  
  .btn-cancel {
    background: white;
    border: 2px solid #ddd;
    color: #666;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .btn-cancel:hover {
    background: #f5f5f5;
    border-color: #bbb;
  }
  
  .btn-confirm {
    background: linear-gradient(135deg, #2196f3, #1976d2);
    border: none;
    color: white;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .btn-confirm:hover {
    background: linear-gradient(135deg, #1976d2, #1565c0);
    transform: translateY(-1px);
  }
  
  .warning-modal .btn-confirm {
    background: linear-gradient(135deg, #ff6f00, #e65100);
  }
  
  .warning-modal .btn-confirm:hover {
    background: linear-gradient(135deg, #e65100, #d84315);
  }
  
  /* 登录弹窗样式 */
  .login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
  }
  
  .login-content {
    background: white;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    max-width: 300px;
    width: 100%;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
  }
  
  .login-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
  }
  
  .login-content h3 {
    font-size: 18px;
    color: #333;
    margin: 0 0 12px 0;
    font-weight: 600;
  }
  
  .login-content p {
    color: #666;
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 20px 0;
  }
  
  .login-buttons {
    display: flex;
    gap: 12px;
  }
  
  .login-cancel-btn {
    flex: 1;
    background: white;
    border: 1px solid #ddd;
    color: #666;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .login-cancel-btn:hover {
    border-color: #bbb;
    background: #f9f9f9;
  }
  
  .login-confirm-btn {
    flex: 1;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    border: none;
    color: white;
    padding: 10px 24px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .login-confirm-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
  }
  
  .login-confirm-btn:active {
    transform: translateY(0);
  }
  
  .single-btn {
    min-width: 140px;
  }
  
  /* 推测结果球号样式 */
  .result-balls {
    background: transparent;
    padding: 16px 15px;
    margin: 16px 0 20px 0;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
  }
  
  .ball-divider {
    width: 100%;
    height: 0;
    margin: 3px 0;
  }
  
  .ball {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
  }
  
  .ball:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }
  
  .ball-red {
    background: linear-gradient(135deg, #e53e3e, #ff6b6b);
    box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
  }
  
  .ball-blue {
    background: linear-gradient(135deg, #2196f3, #42a5f5);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
  }
  
  /* 桌面端弹窗样式完全重设计 */
  @media (min-width: 1025px) {
    .modal-overlay {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      background: rgba(0, 0, 0, 0.6) !important;
      z-index: 9999 !important;
      backdrop-filter: blur(8px) !important;
    }
    
    .centered-modal {
      display: block !important;
      position: relative !important;
      background: #ffffff !important;
      border-radius: 20px !important;
      padding: 40px 35px !important;
      text-align: center !important;
      box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4) !important;
      margin: 0 !important;
      max-width: none !important;
      max-height: 85vh !important;
      overflow-y: auto !important;
      animation: desktopModalSlideIn 0.4s ease-out !important;
      transform: none !important;
    }
    
    @keyframes desktopModalSlideIn {
      from {
        opacity: 0;
        transform: scale(0.8) translateY(-30px);
      }
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }
    
    .warning-modal {
      width: 500px !important;
      min-width: 480px !important;
      background: #ffffff !important;
    }
    
    .success-modal {
      width: 550px !important;
      min-width: 520px !important;
      background: #ffffff !important;
      margin: 0 20px !important;
    }
    
    .modal-icon {
      width: 100px !important;
      height: 100px !important;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 auto 25px !important;
      font-size: 42px !important;
      color: #ffffff !important;
      background: transparent !important;
    }
    
    .warning-modal .modal-icon {
      background: linear-gradient(135deg, #ff9800, #ff6f00) !important;
      color: white !important;
      box-shadow: 0 8px 25px rgba(255, 152, 0, 0.4) !important;
    }
    
    .success-modal .modal-icon {
      background: transparent !important;
      color: #4caf50 !important;
      box-shadow: none !important;
    }
    
    .modal-title {
      font-size: 26px !important;
      font-weight: 700 !important;
      color: #2c3e50 !important;
      margin: 0 0 15px 0 !important;
      line-height: 1.3 !important;
    }
    
    .modal-text {
      font-size: 18px !important;
      color: #5a6c7d !important;
      margin: 0 0 25px 0 !important;
      line-height: 1.6 !important;
      font-weight: 400 !important;
    }
    
    .modal-buttons {
      display: flex !important;
      gap: 25px !important;
      justify-content: center !important;
      margin-top: 30px !important;
    }
    
    .btn-cancel {
      background: #ffffff !important;
      border: 2px solid #e1e8ed !important;
      color: #5a6c7d !important;
      padding: 16px 40px !important;
      border-radius: 12px !important;
      font-size: 17px !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      transition: all 0.3s ease !important;
      min-width: 140px !important;
    }
    
    .btn-cancel:hover {
      background: #f8f9fa !important;
      border-color: #cbd5e0 !important;
      color: #2c3e50 !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    }
    
    .btn-confirm {
      background: linear-gradient(135deg, #e53e3e, #ff6b6b) !important;
      border: none !important;
      color: white !important;
      padding: 16px 40px !important;
      border-radius: 12px !important;
      font-size: 17px !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      transition: all 0.3s ease !important;
      min-width: 140px !important;
      box-shadow: 0 8px 25px rgba(229, 62, 62, 0.3) !important;
    }
    
    .btn-confirm:hover {
      background: linear-gradient(135deg, #d43030, #ff5a5a) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 12px 35px rgba(229, 62, 62, 0.4) !important;
    }
    
    .warning-modal .btn-confirm {
      background: linear-gradient(135deg, #f59e0b, #d97706) !important;
      box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3) !important;
    }
    
    .warning-modal .btn-confirm:hover {
      background: linear-gradient(135deg, #d97706, #b45309) !important;
      box-shadow: 0 12px 35px rgba(245, 158, 11, 0.4) !important;
    }
    
    .single-btn {
      min-width: 180px !important;
    }
    
    /* 推测结果球号样式桌面端优化 */
    .result-balls {
      background: transparent !important;
      padding: 25px 20px !important;
      margin: 25px 0 30px 0 !important;
      display: flex !important;
      justify-content: center !important;
      gap: 15px !important;
      flex-wrap: wrap !important;
      align-items: center !important;
    }
    
    .ball {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 50px !important;
      height: 50px !important;
      border-radius: 50% !important;
      color: white !important;
      font-size: 20px !important;
      font-weight: bold !important;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2) !important;
      transition: all 0.3s ease !important;
    }
    
    .ball:hover {
      transform: translateY(-3px) !important;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
    }
    
    .ball-red {
      background: linear-gradient(135deg, #e53e3e, #ff6b6b) !important;
      box-shadow: 0 6px 18px rgba(229, 62, 62, 0.4) !important;
    }
    
    .ball-blue {
      background: linear-gradient(135deg, #2196f3, #42a5f5) !important;
      box-shadow: 0 6px 18px rgba(33, 150, 243, 0.4) !important;
    }
  }
  
  /* 响应式布局优化 */
  @media (max-width: 768px) {
    .home-container {
      padding: 10px 10px 5px 10px;
    }

    .step-panel {
      border-radius: 0;
      margin-bottom: 0;
    }

    .step-panel h3 {
      font-size: 15px;
    }

    .step-panel :deep(.el-card__body) {
      padding: 10px 12px 15px 12px;
    }

    .step-panel :deep(.el-card__header) {
      padding:  10px 12px 10px 20px;
    }

    .step-nav-card {
      border-radius: 0;
      margin-bottom: 8px;
    }

    .table-ball-number {
      width: 32px;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
    }

    .analysis-table-container :deep(.el-table) {
      font-size: 13px;
      max-height: 500px;
    }

    .analysis-table-container :deep(.el-table__body-wrapper) {
      max-height: 450px;
    }

    .analysis-table-container :deep(.el-table th) {
      padding: 8px 0;
      font-size: 13px;
    }

    .analysis-table-container :deep(.el-table td) {
      padding: 8px 0;
    }

    /* 移动端列宽度控制 */
    .analysis-table-container :deep(.el-table th),
    .analysis-table-container :deep(.el-table td) {
      padding-left: 4px !important;
      padding-right: 4px !important;
    }

    /* 号码列 */
    .analysis-table-container :deep(.el-table__body-wrapper tbody tr td:nth-child(1)),
    .analysis-table-container :deep(.el-table__header-wrapper thead tr th:nth-child(1)) {
      width: 60px;
      min-width: 60px;
      max-width: 60px;
    }

    /* 频次列 */
    .analysis-table-container :deep(.el-table__body-wrapper tbody tr td:nth-child(2)),
    .analysis-table-container :deep(.el-table__header-wrapper thead tr th:nth-child(2)) {
      width: 50px;
      min-width: 50px;
      max-width: 50px;
    }

    /* 系数和列 */
    .analysis-table-container :deep(.el-table__body-wrapper tbody tr td:nth-child(3)),
    .analysis-table-container :deep(.el-table__header-wrapper thead tr th:nth-child(3)) {
      width: 70px;
      min-width: 70px;
      max-width: 70px;
    }

    /* 百期排位列 */
    .analysis-table-container :deep(.el-table__body-wrapper tbody tr td:nth-child(4)),
    .analysis-table-container :deep(.el-table__header-wrapper thead tr th:nth-child(4)) {
      width: 65px;
      min-width: 65px;
      max-width: 65px;
    }

    /* 历史排位列 */
    .analysis-table-container :deep(.el-table__body-wrapper tbody tr td:nth-child(5)),
    .analysis-table-container :deep(.el-table__header-wrapper thead tr th:nth-child(5)) {
      width: 65px;
      min-width: 65px;
      max-width: 65px;
    }

    .table-ball-number {
      width: 28px;
      height: 28px;
      line-height: 28px;
      font-size: 13px;
    }

    /* 移动端首球选择 */
    .first-ball-selection {
      padding: 15px;
    }

    .selection-label {
      font-size: 15px;
      margin-bottom: 12px;
    }

    .first-ball-selector {
      gap: 11px;
    }

    .ball-option .ball-number {
      width: 38px;
      height: 38px;
      font-size: 15px;
    }
    
    .ssq-header {
      padding: 15px 10px;
      margin-bottom: 8px;
    }
    
    .main-title {
      font-size: 28px;
      margin-bottom: 16px;
    }
    
    .subtitle {
      font-size: 16px;
    }
    
    .position-selector {
      flex-direction: row;
      gap: 8px;
      flex-wrap: nowrap;
      margin-bottom: 16px;
    }
    
    .position-item {
      max-width: none;
      min-width: 0;
      padding: 30px 10px;
      font-size: 14px;
    }
    
    :deep(.el-dialog) {
      margin: 2vh auto !important;
      max-height: 96vh;
    }
    
    :deep(.el-dialog__body) {
      padding: 20px 25px;
    }
    
    .ball-numbers-grid {
      grid-template-columns: repeat(5, 1fr) !important;
      gap: 14px;
      padding: 8px 12px;
      min-width: 0;
      max-width: 100%;
    }
    
    .ball-number-option {
      width: 52px;
      height: 52px;
      font-size: 17px;
      min-width: 0;
      max-width: 52px;
    }
    
    .ball-number-display {
      width: 48px;
      height: 48px;
      font-size: 16px;
    }
    
    .red-balls-selector,
    .follow-balls-selector,
    .selected-balls-selector {
      gap: 10px;
      flex-wrap: wrap;
    }

    .input-section {
      margin-top: 16px;
      margin-bottom: 16px;
    }

    .input-section label {
      margin-bottom: 12px;
    }
  
    .step-nav-card :deep(.el-card__body) {
      padding: 12px 12px;
    }
    
    .custom-steps :deep(.el-step__title) {
      font-size: 13px;
    }
    
    /* 移动端弹窗样式 */
    .centered-modal {
      padding: 20px 15px;
      max-width: 85vw;
    }
    
    .warning-modal {
      width: auto;
      max-width: 350px;
    }
    
    .success-modal {
      width: auto;
      max-width: 380px;
      margin: 0 15px;
    }
    
    .login-content {
      max-width: 280px;
      padding: 28px 20px;
    }
    
    .login-icon {
      width: 56px;
      height: 56px;
      margin-bottom: 14px;
    }
    
    .login-content h3 {
      font-size: 17px;
      margin-bottom: 10px;
    }
    
    .login-content p {
      font-size: 14px;
      margin-bottom: 18px;
    }
    
    .login-buttons {
      gap: 10px;
    }
    
    .login-cancel-btn, .login-confirm-btn {
      padding: 9px 18px;
      font-size: 13px;
    }
    
    .modal-icon {
      width: 70px;
      height: 70px;
      font-size: 28px;
      margin-bottom: 14px;
    }
    
    .modal-title {
      font-size: 20px;
      margin-bottom: 8px;
    }
    
    .modal-text {
      font-size: 15px;
      margin-bottom: 16px;
    }
    
    .modal-buttons {
      gap: 12px;
    }
    
    .btn-cancel, .btn-confirm {
      padding: 10px 24px;
      font-size: 15px;
    }
    
    .ball {
      width: 38px;
      height: 38px;
      font-size: 16px;
    }
    
    .result-balls {
      gap: 10px;
      padding: 14px 12px;
      margin: 12px 0 16px 0;
    }
  }
  
  @media (max-width: 480px) {
    .home-container {
      padding: 5px 5px 3px 5px;
    }

    .step-panel {
      border-radius: 0;
      margin-bottom: 0;
    }

    .step-panel :deep(.el-card__body) {
      padding: 8px 10px 12px 10px;
    }

    .step-panel :deep(.el-card__header) {
      padding:  8px 10px 8px 16px;
    }

    .step-nav-card {
      border-radius: 0;
      margin-bottom: 8px;
    }

    .table-ball-number {
      width: 28px;
      height: 28px;
      line-height: 28px;
      font-size: 12px;
    }

    .analysis-table-container :deep(.el-table) {
      font-size: 12px;
      max-height: 450px;
    }

    .analysis-table-container :deep(.el-table__body-wrapper) {
      max-height: 400px;
    }

    .analysis-table-container :deep(.el-table th) {
      padding: 6px 0;
      font-size: 12px;
    }

    .analysis-table-container :deep(.el-table td) {
      padding: 6px 0;
    }

    /* 小屏移动端列宽度控制 */
    .analysis-table-container :deep(.el-table th),
    .analysis-table-container :deep(.el-table td) {
      padding-left: 2px !important;
      padding-right: 2px !important;
    }

    /* 号码列 */
    .analysis-table-container :deep(.el-table__body-wrapper tbody tr td:nth-child(1)),
    .analysis-table-container :deep(.el-table__header-wrapper thead tr th:nth-child(1)) {
      width: 55px;
      min-width: 55px;
      max-width: 55px;
    }

    /* 频次列 */
    .analysis-table-container :deep(.el-table__body-wrapper tbody tr td:nth-child(2)),
    .analysis-table-container :deep(.el-table__header-wrapper thead tr th:nth-child(2)) {
      width: 45px;
      min-width: 45px;
      max-width: 45px;
    }

    /* 系数和列 */
    .analysis-table-container :deep(.el-table__body-wrapper tbody tr td:nth-child(3)),
    .analysis-table-container :deep(.el-table__header-wrapper thead tr th:nth-child(3)) {
      width: 65px;
      min-width: 65px;
      max-width: 65px;
    }

    /* 百期排位列 */
    .analysis-table-container :deep(.el-table__body-wrapper tbody tr td:nth-child(4)),
    .analysis-table-container :deep(.el-table__header-wrapper thead tr th:nth-child(4)) {
      width: 60px;
      min-width: 60px;
      max-width: 60px;
    }

    /* 历史排位列 */
    .analysis-table-container :deep(.el-table__body-wrapper tbody tr td:nth-child(5)),
    .analysis-table-container :deep(.el-table__header-wrapper thead tr th:nth-child(5)) {
      width: 60px;
      min-width: 60px;
      max-width: 60px;
    }

    .table-ball-number {
      width: 26px;
      height: 26px;
      line-height: 26px;
      font-size: 12px;
    }

    /* 小屏移动端首球选择 */
    .first-ball-selection {
      padding: 12px;
    }

    .selection-label {
      font-size: 14px;
      margin-bottom: 10px;
    }

    .first-ball-selector {
      gap: 10px;
    }

    .ball-option .ball-number {
      width: 35px;
      height: 35px;
      font-size: 14px;
    }
    
    .ssq-header {
      padding: 12px 8px;
      margin-bottom: 8px;
    }
    
    .main-title {
      font-size: 24px;
      margin-bottom: 6px;
    }
    
    .subtitle {
      font-size: 15px;
    }
    
    .position-selector {
      gap: 6px;
      margin-bottom: 16px;
    }
    
    .position-item {
      padding: 15px 8px;
      font-size: 13px;
    }
    
    .position-title {
      font-size: 14px;
    }
    
    :deep(.el-dialog) {
      margin: 1vh auto !important;
      max-height: 98vh;
    }
    
    :deep(.el-dialog__body) {
      padding: 15px 18px;
    }
    
    .ball-numbers-grid {
      grid-template-columns: repeat(5, 1fr) !important;
      gap: 10px;
      padding: 5px 8px;
      min-width: 0;
      max-width: 100%;
    }
    
    .ball-number-option {
      width: 45px;
      height: 45px;
      font-size: 16px;
      min-width: 0;
      max-width: 45px;
    }
    
    .ball-number-display {
      width: 42px;
      height: 42px;
      font-size: 14px;
    }
    
    .button-group {
      flex-direction: row;
      gap: 8px;
    }
    
    .button-group > .el-button {
      font-size: 14px;
      padding: 10px 16px;
    }

    .selection-warning {
      margin-top: 10px;
      padding: 8px 12px;
      font-size: 13px;
    }

    .input-section {
      margin-top: 14px;
      margin-bottom: 14px;
    }

    .input-section label {
      margin-bottom: 10px;
      font-size: 14px;
    }
    
    .step-nav-card :deep(.el-card__body) {
      padding: 12px 10px 5px 10px;
    }
    
    .custom-steps :deep(.el-step__title) {
      font-size: 12px;
      transform: scale(0.9);
      white-space: nowrap;
    }
    
    /* 小屏幕弹窗样式 */
    .centered-modal {
      padding: 18px 12px;
      max-width: 90vw;
    }
    
    .warning-modal {
      width: auto;
      max-width: 320px;
    }
    
    .success-modal {
      width: auto;
      max-width: 340px;
      margin: 0 10px;
    }
    
    .login-content {
      max-width: 260px;
      padding: 24px 18px;
    }
    
    .login-icon {
      width: 52px;
      height: 52px;
      margin-bottom: 12px;
    }
    
    .login-content h3 {
      font-size: 16px;
      margin-bottom: 8px;
    }
    
    .login-content p {
      font-size: 13px;
      margin-bottom: 16px;
    }
    
    .login-buttons {
      gap: 8px;
    }
    
    .login-cancel-btn, .login-confirm-btn {
      padding: 8px 16px;
      font-size: 12px;
    }
    
    .modal-icon {
      width: 60px;
      height: 60px;
      font-size: 24px;
      margin-bottom: 12px;
    }
    
    .modal-title {
      font-size: 18px;
      margin-bottom: 6px;
    }
    
    .modal-text {
      font-size: 14px;
      margin-bottom: 14px;
    }
    
    .modal-buttons {
      gap: 10px;
      flex-direction: row;
    }
    
    .btn-cancel, .btn-confirm {
      padding: 9px 20px;
      font-size: 14px;
      flex: 1;
    }
    
    .single-btn {
      min-width: 120px;
      flex: none;
    }
    
    .ball {
      width: 34px;
      height: 34px;
      font-size: 14px;
    }
    
    .result-balls {
      gap: 8px;
      padding: 12px 10px;
      margin: 10px 0 14px 0;
    }
  }
  </style> 