<template>
    <div class="home-container">
      <!-- 页面头部 -->
      <div class="dlt-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>本期前区号码（5个）:</label>
            <div class="red-balls-selector">
              <div 
                v-for="(ball, index) in formData.lastFrontBalls" 
                :key="'front-ball-' + index"
                class="ball-selector-container"
              >
                <div 
                  class="ball-number-display"
                  :class="{ 
                    'selected': ball !== '', 
                    'clickable': true
                  }"
                  @click="openFrontBallSelector(index)"
                >
                  {{ ball || '?' }}
                </div>
              </div>
            </div>
            
            <!-- 前区球号选择弹窗 -->
          <div v-if="showFrontBallSelector" class="custom-dialog-overlay" @click="closeFrontBallSelector">
            <div class="custom-dialog" @click.stop>
              <div class="custom-dialog-header">
                <h4>选择第{{ currentFrontBallIndex + 1 }}个前区号码</h4>
                <button class="custom-dialog-close" @click="closeFrontBallSelector">×</button>
              </div>
              <div class="custom-dialog-body">
                <div class="ball-numbers-grid">
                  <div 
                    v-for="num in 35" 
                    :key="num"
                    class="ball-number-option"
                    :class="{ 
                      'selected': formData.lastFrontBalls[currentFrontBallIndex] == num,
                      'used': formData.lastFrontBalls.includes(String(num).padStart(2, '0')) && formData.lastFrontBalls[currentFrontBallIndex] != String(num).padStart(2, '0')
                    }"
                    @click="selectFrontBallNumber(num)"
                  >
                    {{ String(num).padStart(2, '0') }}
                  </div>
                </div>
                </div>
              <div class="custom-dialog-footer">
                <button class="custom-btn custom-btn-default" @click="clearFrontBallNumber">清空</button>
                <button class="custom-btn custom-btn-primary" @click="closeFrontBallSelector">确定</button>
              </div>
            </div>
          </div>
          </div>
  
          <div class="input-section">
            <label>本期后区号码（2个）:</label>
            <div class="blue-balls-selector">
              <div 
                v-for="(ball, index) in formData.lastBackBalls" 
                :key="'back-ball-' + index"
                class="ball-selector-container"
              >
                <div 
                  class="ball-number-display blue-ball-display"
                  :class="{ 
                    'selected': ball !== '', 
                    'clickable': true
                  }"
                  @click="openBackBallSelector(index)"
                >
                  {{ ball || '?' }}
                </div>
              </div>
            </div>
            
            <!-- 后区球号选择弹窗 -->
          <div v-if="showBackBallSelector" class="custom-dialog-overlay" @click="closeBackBallSelector">
            <div class="custom-dialog" @click.stop>
              <div class="custom-dialog-header">
                <h4>选择第{{ currentBackBallIndex + 1 }}个后区号码</h4>
                <button class="custom-dialog-close" @click="closeBackBallSelector">×</button>
              </div>
              <div class="custom-dialog-body">
                <div class="ball-numbers-grid">
                  <div 
                    v-for="num in 12" 
                    :key="num"
                    class="ball-number-option blue-option"
                    :class="{ 
                      'selected': formData.lastBackBalls[currentBackBallIndex] == String(num).padStart(2, '0'),
                      'used': formData.lastBackBalls.includes(String(num).padStart(2, '0')) && formData.lastBackBalls[currentBackBallIndex] != String(num).padStart(2, '0')
                    }"
                    @click="selectBackBallNumber(num)"
                  >
                    {{ String(num).padStart(2, '0') }}
                  </div>
                </div>
                </div>
              <div class="custom-dialog-footer">
                <button class="custom-btn custom-btn-default" @click="clearBackBallNumber">清空</button>
                <button class="custom-btn custom-btn-primary" @click="closeBackBallSelector">确定</button>
              </div>
            </div>
          </div>
          </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="3" 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="号球" width="80px" align="center">
                <template #default="scope">
                  <span class="ball-front 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.firstFrontBall === String(item.ballNumber).padStart(2, '0') }"
                @click="selectFirstFrontBall(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.firstFrontBall"
              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="ball-front 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>
  
          <!-- 选择4个前区随球 -->
          <div class="first-ball-selection">
            <label class="selection-label">
              请选择4个前区球作为随球（首球：<span class="ball-front" style="margin: 0 5px;">{{ formData.firstFrontBall }}</span>）：
            </label>
            <div class="first-ball-selector">
              <div 
                v-for="item in secondStepAnalysisData" 
                :key="item.ballNumber"
                v-show="String(item.ballNumber).padStart(2, '0') !== formData.firstFrontBall"
                class="ball-option"
                :class="{ 'selected': formData.selectedFrontBalls.includes(String(item.ballNumber).padStart(2, '0')) }"
                @click="selectFollowFrontBall(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="ball-blue 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 thirdStepAnalysisData" 
                :key="item.ballNumber"
                class="ball-option"
                :class="{ 'selected': formData.firstBackBall === String(item.ballNumber).padStart(2, '0') }"
                @click="selectFirstBackBall(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.firstBackBall"
            class="continue-btn"
          >
            继续
                  </el-button>
                </div>
      </el-card>

      <!-- 第五步：后区随球分析数据 -->
      <el-card v-if="currentStep === 5" class="step-panel" shadow="hover">
        <template #header>
          <h3>后区随球分析数据</h3>
              </template>
        
        <el-skeleton v-if="loading" :rows="5" animated />
        
        <el-alert 
          v-if="!loading && fourthStepAnalysisData.length === 0"
          title="未获取到分析数据"
          type="warning"
          :closable="false"
          show-icon
          style="margin-bottom: 20px;"
        >
          <template #default>
            <p>请返回上一步重新进行分析</p>
          </template>
        </el-alert>
        
        <div v-if="!loading && fourthStepAnalysisData.length > 0" class="step2-content-wrapper">
          <div class="analysis-table-container">
            <el-table
              :data="fourthStepAnalysisData"
              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="ball-blue 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 fourthStepAnalysisData" 
                :key="item.ballNumber"
                v-show="String(item.ballNumber).padStart(2, '0') !== formData.firstBackBall"
                class="ball-option"
                :class="{ 'selected': formData.followBackBall === String(item.ballNumber).padStart(2, '0') }"
                @click="selectFollowBackBall(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="fourthStepAnalysisData.length > 0"
              type="primary"
              @click="nextStep"
            :disabled="!formData.followBackBall"
              class="continue-btn"
            >
              继续
            </el-button>
          </div>
        </el-card>
  
      <!-- 第六步：确认结果 -->
      <el-card v-if="currentStep === 6" class="step-panel" shadow="hover">
          <template #header>
          <h3>您本次推测的超级大乐透号码组合为</h3>
          </template>
          
          <div class="final-result">
          <div class="result-balls" style="justify-content: center;">
              <div class="front-balls">
                <span class="ball-front">{{ String(formData.firstFrontBall).padStart(2, '0') }}</span>
                <span 
                  v-for="ball in formData.selectedFrontBalls" 
                  :key="ball"
                  class="ball-front"
                >
                  {{ String(ball).padStart(2, '0') }}
                </span>
              </div>
              <div class="back-balls">
                <span class="ball-blue">{{ String(formData.firstBackBall).padStart(2, '0') }}</span>
                <span class="ball-blue">{{ String(formData.followBackBall).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="showSubmitWarning"
              :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',
                 justifyContent: 'center',
                 gap: isDesktop ? '15px' : '12px',
                 flexWrap: 'wrap',
                 alignItems: 'center'
               }">
            <span class="ball ball-front"
                  :style="{
                    display: 'inline-flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    width: isDesktop ? '50px' : '42px',
                    height: isDesktop ? '50px' : '42px',
                    borderRadius: '50%',
                    color: 'white',
                    fontSize: isDesktop ? '20px' : '18px',
                    fontWeight: 'bold',
                    background: 'linear-gradient(135deg, #4CAF50, #66BB6A)',
                    boxShadow: '0 6px 18px rgba(76, 175, 80, 0.4)',
                    transition: 'all 0.3s ease'
                  }">{{ String(formData.firstFrontBall).padStart(2, '0') }}</span>
            <span 
              v-for="ball in formData.selectedFrontBalls" 
              :key="ball"
              class="ball ball-front"
              :style="{
                display: 'inline-flex',
                alignItems: 'center',
                justifyContent: 'center',
                width: isDesktop ? '50px' : '42px',
                height: isDesktop ? '50px' : '42px',
                borderRadius: '50%',
                color: 'white',
                fontSize: isDesktop ? '20px' : '18px',
                fontWeight: 'bold',
                background: 'linear-gradient(135deg, #4CAF50, #66BB6A)',
                boxShadow: '0 6px 18px rgba(76, 175, 80, 0.4)',
                transition: 'all 0.3s ease'
              }"
            >
              {{ String(ball).padStart(2, '0') }}
            </span>
            <div class="ball-divider"
                 :style="{
                   width: '100%',
                   height: '0',
                   margin: '3px 0'
                 }"></div>
            <span class="ball ball-blue"
                  :style="{
                    display: 'inline-flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    width: isDesktop ? '50px' : '42px',
                    height: isDesktop ? '50px' : '42px',
                    borderRadius: '50%',
                    color: 'white',
                    fontSize: isDesktop ? '20px' : '18px',
                    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.firstBackBall).padStart(2, '0') }}</span>
            <span class="ball ball-blue"
                  :style="{
                    display: 'inline-flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    width: isDesktop ? '50px' : '42px',
                    height: isDesktop ? '50px' : '42px',
                    borderRadius: '50%',
                    color: 'white',
                    fontSize: isDesktop ? '20px' : '18px',
                    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.followBackBall).padStart(2, '0') }}</span>
          </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, #3b82f6, #1d4ed8)',
                      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(59, 130, 246, 0.3)'
                    }"
                    @click="hideSuccessModal">确定</button>
          </div>
        </div>
      </div>
  
      <!-- VIP过期提示弹窗 -->
      <div v-if="showVipExpiredModal" 
           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="hideVipExpiredModal">
        <div class="centered-modal warning-modal" 
             :style="{
               position: 'relative',
               backgroundColor: '#ffffff',
             borderRadius: '16px',
             padding: isDesktop ? '40px 35px' : '20px 16px',
               textAlign: 'center',
               boxShadow: '0 25px 80px rgba(0, 0, 0, 0.4)',
             margin: isDesktop ? '0' : '0 30px',
             maxWidth: isDesktop ? 'none' : '300px',
               maxHeight: '85vh',
               overflowY: 'auto',
               animation: 'desktopModalSlideIn 0.4s ease-out',
             width: isDesktop ? '500px' : '70vw',
               minWidth: isDesktop ? '480px' : 'auto'
             }"
             @click.stop>
          <div class="modal-icon"
               :style="{
               width: isDesktop ? '100px' : '64px',
               height: isDesktop ? '100px' : '64px',
                 borderRadius: '50%',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
               margin: isDesktop ? '0 auto 25px' : '0 auto 16px',
               fontSize: isDesktop ? '42px' : '28px',
                 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' : '18px',
                fontWeight: '700',
                color: '#2c3e50',
              margin: '0 0 12px 0',
                lineHeight: '1.3'
              }">VIP会员已过期</h3>
          <p class="modal-text"
             :style="{
             fontSize: isDesktop ? '18px' : '14px',
               color: '#5a6c7d',
             margin: '0 0 18px 0',
             lineHeight: '1.5',
               fontWeight: '400'
             }">您的VIP会员已过期，推测功能受到限制。建议您尽快续费以获得完整体验！</p>
        <div class="modal-buttons"
             :style="{
               display: 'flex',
               gap: isDesktop ? '25px' : '12px',
               justifyContent: 'center',
               marginTop: isDesktop ? '30px' : '12px'
             }">
          <button class="btn-confirm single-btn"
                  :style="{
                    background: 'linear-gradient(135deg, #f59e0b, #d97706)',
                    border: 'none',
                    color: 'white',
                    padding: isDesktop ? '16px 40px' : '10px 24px',
                    borderRadius: '10px',
                    fontSize: isDesktop ? '17px' : '14px',
                    fontWeight: '600',
                    cursor: 'pointer',
                    transition: 'all 0.3s ease',
                    minWidth: isDesktop ? '180px' : '120px',
                    boxShadow: '0 8px 25px rgba(245, 158, 11, 0.3)'
                  }"
                  @click="hideVipExpiredModal">我知道了</button>
          </div>
        </div>
      </div>
  
      <!-- 筛选过程说明弹窗 -->
      <AlgorithmProcessModal
        v-model="showFilteringProcessModal"
        :process-text="currentFilteringProcess"
        :enable-formatting="true"
        theme="dlt"
        @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 { dltLotteryApi } from '../../api/dlt'
  import { userStore } from '../../store/user'
  import AlgorithmProcessModal from '../../components/AlgorithmProcessModal.vue'
  import { 
    ElButton, 
    ElCard, 
    ElSteps, 
    ElStep, 
    ElInput, 
    ElDialog,
    ElAlert,
    ElSelect,
    ElOption,
    ElCheckbox,
    ElDivider,
    ElSkeleton,
    ElTag,
    ElMessage
  } from 'element-plus'
  import { ArrowLeft, InfoFilled, Trophy } from '@element-plus/icons-vue'
  
  export default {
    name: 'DltHome',
    components: {
      AlgorithmProcessModal,
      ElButton,
      ElCard,
      ElSteps,
      ElStep,
      ElInput,
      ElDialog,
      ElAlert,
      ElSelect,
      ElOption,
      ElCheckbox,
      ElDivider,
      ElSkeleton,
      ElTag,
      ArrowLeft,
      InfoFilled,
      Trophy
    },
    data() {
      return {
        currentStep: 1,
        loading: false,
        showWarning: false,
        showSuccessModal: false,
        userVerified: false,
        userVerifying: true,
        
        // 第一步弹窗状态
        showFrontBallSelector: false,
        currentFrontBallIndex: 0,
        showBackBallSelector: false,
        currentBackBallIndex: 0,
        
        // 第二步弹窗状态
        showFirstFrontBallSelector: false,
        showFollowFrontBallSelector: false,
        currentFollowFrontBallIndex: 0,
        
        // 第三步弹窗状态
        showSelectedFrontBallSelector: false,
        currentSelectedFrontBallIndex: 0,
        showSelectedBackBallSelector: false,
        currentSelectedBackBallIndex: 0,
        
        
      steps: ['推测准备', '推测前区首球', '推测前区随球', '推测后区首球', '推测后区随球', '确认结果'],
        positions: [
          { value: 'high', label: '高区位', desc: '高位投注算法' },
          { value: 'middle', label: '中区位', desc: '中位投注算法' },
          { value: 'low', label: '低区位', desc: '低位投注算法' }
        ],
        formData: {
          level: '',
          drawId: '',
          drawDate: '',
          lastFrontBalls: ['', '', '', '', ''], // 5个前区球
          lastBackBalls: ['', ''], // 2个后区球
          firstFrontBall: '',
          followFrontBalls: ['', '', ''], // 3个前区随球
          selectedFrontBalls: ['', '', '', ''], // 4个前区球
          selectedBackBalls: ['', ''], // 2个后区球
          firstBackBall: '',
          followBackBall: '',
          predictDrawId: ''
        },
        recentDrawIds: [],
      firstStepAnalysisData: [], // 精推版第一步分析数据
      secondStepAnalysisData: [], // 精推版第二步分析数据
      thirdStepAnalysisData: [], // 精推版第三步分析数据
      fourthStepAnalysisData: [], // 精推版第四步分析数据
        analyzedFrontBalls: [],
        followAnalyzedFrontBalls: [],
        followAnalyzedBackBalls: [],
        agreeToTerms: false,
        showLoginModal: false, // 登录提示弹窗显示状态
        
        // VIP过期相关
        vipExpired: false, // VIP是否过期
        showVipExpiredModal: false, // VIP过期提示弹窗
        
        // 筛选过程说明
        frontBallsFilteringProcess: '', // 前区球筛选过程说明
        followFrontBallsFilteringProcess: '', // 前区跟随球筛选过程说明
        backBallsFilteringProcess: '', // 后区球筛选过程说明
        followBackBallsFilteringProcess: '', // 后区跟随球筛选过程说明
        showFilteringProcessModal: false, // 显示筛选过程弹窗
        currentFilteringProcess: '', // 当前显示的筛选过程
        
        // 响应式设计
        isDesktop: false, // 是否为桌面端
        resizeHandler: null, // 窗口大小变化处理器
        loginCheckTimer: null, // 登录状态检查定时器
        isCheckingLogin: false, // 是否正在检查登录状态（防止重复调用）
        cacheCleanupTimer: null // 缓存清除定时器
      }
    },
    async mounted() {
      await this.verifyUserLogin()
      await this.fetchRecentDrawIds()
      
      // 尝试从缓存加载表单数据
      this.loadFormDataFromCache()
      
      // 缓存恢复后，重新设置推测期号以确保是最新的
      if (this.recentDrawIds.length > 0) {
        const latestId = parseInt(this.recentDrawIds[0], 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.lastFrontBalls.every(ball => ball !== '') && 
               this.formData.lastBackBalls.every(ball => ball !== '') &&
               this.formData.predictDrawId;
      },
      canProceedStep2() {
      return this.formData.firstFrontBall !== '';
      },
      canProceedStep3() {
        return this.formData.selectedFrontBalls.every(ball => ball !== '') &&
               this.formData.selectedBackBalls.every(ball => ball !== '');
      },
      canProceedStep4() {
      return this.formData.firstBackBall !== '';
    },
    canProceedStep5() {
      return this.formData.followBackBall !== '';
    },
    // 第三步选择提示
    step3SelectionWarning() {
      if (this.currentStep !== 3) return ''
      const selectedCount = this.formData.selectedFrontBalls.filter(ball => ball !== '').length
      // 只有当用户开始选择（selectedCount > 0）但不足4个时才显示警告
      if (selectedCount > 0 && selectedCount < 4) {
        return `请选择4个球号，当前已选择${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 {
          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 'frontBalls':
            this.currentFilteringProcess = this.frontBallsFilteringProcess
            break
          case 'followFrontBalls':
            this.currentFilteringProcess = this.followFrontBallsFilteringProcess
            break
          case 'backBalls':
            this.currentFilteringProcess = this.backBallsFilteringProcess
            break
          case 'followBackBalls':
            this.currentFilteringProcess = this.followBackBallsFilteringProcess
            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()
      },
  
      // 隐藏登录弹窗
      hideLoginModal() {
        this.showLoginModal = false
      },
  
      // 跳转到登录页面
      goToLogin() {
        this.hideLoginModal()
        this.$router.push('/login')
      },
  
      async nextStep() {
      // 第三步验证：检查是否选择了4个随球
      if (this.currentStep === 3) {
        const selectedCount = this.formData.selectedFrontBalls.filter(ball => ball !== '').length
        if (selectedCount < 4) {
          // 不显示弹窗，滚动到底部让用户看到红色提示
          this.$nextTick(() => {
            window.scrollTo({
              top: document.documentElement.scrollHeight,
              behavior: 'smooth'
            })
          })
          return
        }
      }
      
        if (this.currentStep === 1) {
        await this.analyzeFirstStepDlt()
        } else if (this.currentStep === 2) {
        await this.analyzeSecondStepDlt()
        } else if (this.currentStep === 3) {
        await this.analyzeThirdStepDlt()
      } else if (this.currentStep === 4) {
        await this.analyzeFourthStepDlt()
        }
        
        this.currentStep++
        // 步骤变化时自动保存缓存
        this.saveFormDataToCache()
      },
      
      prevStep() {
        this.currentStep--
        // 步骤变化时自动保存缓存
        this.saveFormDataToCache()
      },
  
      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 dltLotteryApi.getRecent10DrawIds()
          
          if (response.success === true) {
            this.recentDrawIds = response.data
            if (this.recentDrawIds.length > 0) {
              const latestId = parseInt(this.recentDrawIds[0], 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 dltLotteryApi.getDrawNumbersById(drawId)
            
            if (response.success === true) {
              const results = response.data
              if (Array.isArray(results) && results.length >= 7) {
                // 前5个是前区球，后2个是后区球
                this.formData.lastFrontBalls = [
                  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')
                ]
                this.formData.lastBackBalls = [
                  String(results[5] || '').padStart(2, '0'),
                  String(results[6] || '').padStart(2, '0')
                ]
                // 设置推测期号为选中期号的下一期
                this.formData.predictDrawId = String(parseInt(drawId) + 1)
                console.log('大乐透期号选择后设置推测期号:', drawId, '->', this.formData.predictDrawId)
              }
            }
          } catch (error) {
            console.error('获取开奖结果失败:', error)
          } finally {
            this.loading = false
          }
        } else {
          this.formData.lastFrontBalls = ['', '', '', '', '']
          this.formData.lastBackBalls = ['', '']
          this.formData.drawDate = ''
          // 恢复默认推测期号
          if (this.recentDrawIds.length > 0) {
            const latestId = parseInt(this.recentDrawIds[0], 10)
            this.formData.predictDrawId = String(latestId + 1)
          } else {
            this.formData.predictDrawId = ''
          }
        }
      },
  
      // 前区球号选择相关方法
      openFrontBallSelector(index) {
        if (!this.formData.level) return
        this.currentFrontBallIndex = index
        this.showFrontBallSelector = true
      },
  
      closeFrontBallSelector() {
        this.showFrontBallSelector = false
      },
  
      selectFrontBallNumber(num) {
        const formattedNum = String(num).padStart(2, '0')
        const isUsed = this.formData.lastFrontBalls.includes(formattedNum) && this.formData.lastFrontBalls[this.currentFrontBallIndex] !== formattedNum
        if (isUsed) return
  
        this.formData.lastFrontBalls[this.currentFrontBallIndex] = formattedNum
        this.closeFrontBallSelector()
      },
  
      clearFrontBallNumber() {
        this.formData.lastFrontBalls[this.currentFrontBallIndex] = ''
        this.closeFrontBallSelector()
      },
  
      // 后区球号选择相关方法
      openBackBallSelector(index) {
        if (!this.formData.level) return
        this.currentBackBallIndex = index
        this.showBackBallSelector = true
      },
  
      closeBackBallSelector() {
        this.showBackBallSelector = false
      },
  
      selectBackBallNumber(num) {
        const formattedNum = String(num).padStart(2, '0')
        const isUsed = this.formData.lastBackBalls.includes(formattedNum) && this.formData.lastBackBalls[this.currentBackBallIndex] !== formattedNum
        if (isUsed) return
  
        this.formData.lastBackBalls[this.currentBackBallIndex] = formattedNum
        this.closeBackBallSelector()
      },
  
      clearBackBallNumber() {
        this.formData.lastBackBalls[this.currentBackBallIndex] = ''
        this.closeBackBallSelector()
      },
  
      // API 调用方法
    // 精推版大乐透第一步分析
    async analyzeFirstStepDlt() {
        this.loading = true
        try {
        const lastFrontBalls = this.formData.lastFrontBalls.join(',')
        const lastBackBalls = this.formData.lastBackBalls.join(',')
        
        // 转换level格式：high -> H, middle -> M, low -> L
        const levelMap = {
          'high': 'H',
          'middle': 'M',
          'low': 'L'
        }
        const apiLevel = levelMap[this.formData.level] || this.formData.level
        
        console.log('调用精推版大乐透第一步分析，参数:', {
          level: apiLevel,
          frontBalls: lastFrontBalls,
          backBalls: lastBackBalls
        })
        
        const response = await dltLotteryApi.jtdltFirstStepAnalysis(
          apiLevel,
          lastFrontBalls,
          lastBackBalls
        )
        
        console.log('API响应:', response)
          
          if (response.success === true) {
          this.firstStepAnalysisData = response.data?.results || []
          console.log('精推版大乐透第一步分析结果:', this.firstStepAnalysisData)
          
          if (this.firstStepAnalysisData.length === 0) {
            ElMessage.warning('分析结果为空，请检查输入数据')
          }
          } else {
            console.error('分析失败:', response.message)
          ElMessage.error(response.message || '分析失败，请重试')
          }
        } catch (error) {
        console.error('精推版大乐透第一步分析失败:', error)
        ElMessage.error('网络请求失败：' + (error.message || '请检查网络连接'))
        } finally {
          this.loading = false
        }
      },
  
    async analyzeSecondStepDlt() {
        this.loading = true
        try {
        const previousFrontBalls = this.formData.lastFrontBalls.join(',')
        const previousBackBalls = this.formData.lastBackBalls.join(',')
        const currentFirstBall = parseInt(this.formData.firstFrontBall)
        
        // 转换level格式：high -> H, middle -> M, low -> L
        const levelMap = {
          'high': 'H',
          'middle': 'M',
          'low': 'L'
        }
        const apiLevel = levelMap[this.formData.level] || this.formData.level
        
        console.log('调用精推版大乐透第二步分析，参数:', {
          level: apiLevel,
          previousFrontBalls: previousFrontBalls,
          previousBackBalls: previousBackBalls,
          currentFirstBall: currentFirstBall
        })
        
        const response = await dltLotteryApi.jtdltSecondStepAnalysis(
          apiLevel,
          previousFrontBalls,
          previousBackBalls,
          currentFirstBall
        )
        
        console.log('API响应:', response)
          
          if (response.success === true) {
          this.secondStepAnalysisData = response.data?.results || []
          console.log('精推版大乐透第二步分析结果:', this.secondStepAnalysisData)
          
          if (this.secondStepAnalysisData.length === 0) {
            ElMessage.warning('分析结果为空，请检查输入数据')
          } else {
            // 清理 selectedFrontBalls，确保不包含首球
            this.formData.selectedFrontBalls = this.formData.selectedFrontBalls.map(ball => {
              return ball === this.formData.firstFrontBall ? '' : ball
            })
          }
          } else {
          console.error('分析失败:', response.message)
          ElMessage.error(response.message || '分析失败，请重试')
          }
        } catch (error) {
        console.error('精推版大乐透第二步分析失败:', error)
        ElMessage.error('网络请求失败：' + (error.message || '请检查网络连接'))
        } finally {
          this.loading = false
        }
      },
  
    async analyzeThirdStepDlt() {
        this.loading = true
        try {
        const previousFrontBalls = this.formData.lastFrontBalls.join(',')
        const previousBackBalls = this.formData.lastBackBalls.join(',')
        // 组合本期前区球号：首球 + 4个随球
        const currentFrontBalls = [this.formData.firstFrontBall, ...this.formData.selectedFrontBalls].join(',')
        
        // 转换level格式：high -> H, middle -> M, low -> L
        const levelMap = {
          'high': 'H',
          'middle': 'M',
          'low': 'L'
        }
        const apiLevel = levelMap[this.formData.level] || this.formData.level
        
        console.log('调用精推版大乐透第三步分析，参数:', {
          level: apiLevel,
          previousFrontBalls: previousFrontBalls,
          previousBackBalls: previousBackBalls,
          currentFrontBalls: currentFrontBalls
        })
        
        const response = await dltLotteryApi.jtdltThirdStepAnalysis(
          apiLevel,
          previousFrontBalls,
          previousBackBalls,
          currentFrontBalls
        )
        
        console.log('API响应:', response)
        
        if (response.success === true) {
          this.thirdStepAnalysisData = response.data?.results || []
          console.log('精推版大乐透第三步分析结果:', this.thirdStepAnalysisData)
          
          if (this.thirdStepAnalysisData.length === 0) {
            ElMessage.warning('分析结果为空，请检查输入数据')
          }
        } else {
          console.error('分析失败:', response.message)
          ElMessage.error(response.message || '分析失败，请重试')
        }
      } catch (error) {
        console.error('精推版大乐透第三步分析失败:', error)
        ElMessage.error('网络请求失败：' + (error.message || '请检查网络连接'))
      } finally {
        this.loading = false
      }
    },

    async analyzeFourthStepDlt() {
      this.loading = true
      try {
        const previousFrontBalls = this.formData.lastFrontBalls.join(',')
        const previousBackBalls = this.formData.lastBackBalls.join(',')
        // 组合本期前区球号：首球 + 4个随球
        const currentFrontBalls = [this.formData.firstFrontBall, ...this.formData.selectedFrontBalls].join(',')
        const currentBackFirstBall = parseInt(this.formData.firstBackBall)
        
        // 转换level格式：high -> H, middle -> M, low -> L
        const levelMap = {
          'high': 'H',
          'middle': 'M',
          'low': 'L'
        }
        const apiLevel = levelMap[this.formData.level] || this.formData.level
        
        console.log('调用精推版大乐透第四步分析，参数:', {
          level: apiLevel,
          previousFrontBalls: previousFrontBalls,
          previousBackBalls: previousBackBalls,
          currentFrontBalls: currentFrontBalls,
          currentBackFirstBall: currentBackFirstBall
        })
        
        const response = await dltLotteryApi.jtdltFourthStepAnalysis(
          apiLevel,
          previousFrontBalls,
          previousBackBalls,
          currentFrontBalls,
          currentBackFirstBall
        )
        
        console.log('API响应:', response)
        
        if (response.success === true) {
          this.fourthStepAnalysisData = response.data?.results || []
          console.log('精推版大乐透第四步分析结果:', this.fourthStepAnalysisData)
          
          if (this.fourthStepAnalysisData.length === 0) {
            ElMessage.warning('分析结果为空，请检查输入数据')
          }
        } else {
          console.error('分析失败:', response.message)
          ElMessage.error(response.message || '分析失败，请重试')
        }
      } catch (error) {
        console.error('精推版大乐透第四步分析失败:', error)
        ElMessage.error('网络请求失败：' + (error.message || '请检查网络连接'))
      } finally {
        this.loading = false
      }
    },

    async analyzeFrontBalls() {
      this.loading = true
      try {
        const response = await dltLotteryApi.analyzeFrontBalls(
            this.formData.level,
            this.formData.lastFrontBalls.map(ball => parseInt(ball)),
          this.formData.lastBackBalls.map(ball => parseInt(ball))
          )
          
          if (response.success === true) {
            // 新的API响应结构：data.result 包含推荐的球号数组
          this.analyzedFrontBalls = response.data?.result || response.data || []
            // 保存筛选过程说明
          this.frontBallsFilteringProcess = response.data?.filteringProcess || ''
          console.log('前区首球分析结果:', this.analyzedFrontBalls)
          console.log('前区首球筛选过程:', this.frontBallsFilteringProcess)
          } else {
          console.error('分析失败:', response.message)
          }
        } catch (error) {
        console.error('前区首球分析失败:', error)
        } finally {
          this.loading = false
        }
      },
  
    async analyzeFollowFrontBalls() {
        this.loading = true
        try {
        const wellRegardedBalls = [
            parseInt(this.formData.firstFrontBall),
          ...this.formData.followFrontBalls.map(ball => parseInt(ball))
          ]
          
        const response = await dltLotteryApi.analyzeFollowFrontBalls(
            this.formData.level,
          wellRegardedBalls,
            this.formData.lastFrontBalls.map(ball => parseInt(ball)),
            this.formData.lastBackBalls.map(ball => parseInt(ball))
          )
          
          if (response.success === true) {
          // 新的API响应结构：data.result 包含推荐的球号数组
          this.followAnalyzedFrontBalls = response.data?.result || response.data || []
          // 保存筛选过程说明
          this.followFrontBallsFilteringProcess = response.data?.filteringProcess || ''
          console.log('前区随球分析结果:', this.followAnalyzedFrontBalls)
          console.log('前区随球筛选过程:', this.followFrontBallsFilteringProcess)
          } else {
          console.error('前区随球分析失败:', response.message)
          }
        } catch (error) {
        console.error('前区随球分析失败:', error)
        } finally {
          this.loading = false
        }
      },

  
      // 第二步：前区首球选择方法
      openFirstFrontBallSelector() {
        this.showFirstFrontBallSelector = true
      },
  
      closeFirstFrontBallSelector() {
        this.showFirstFrontBallSelector = false
      },
  
      selectFirstFrontBallNumber(num) {
        const formattedNum = String(num).padStart(2, '0')
        if (this.formData.followFrontBalls.includes(formattedNum)) return
        
        this.formData.firstFrontBall = formattedNum
        this.closeFirstFrontBallSelector()
      },
  
      clearFirstFrontBallNumber() {
        this.formData.firstFrontBall = ''
        this.closeFirstFrontBallSelector()
      },

    // 精推版第二步选择首球（从表格数据中选择）
    selectFirstFrontBall(num) {
      const formattedNum = String(num).padStart(2, '0')
      this.formData.firstFrontBall = formattedNum
    },

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

    // 精推版第四步选择后区首球（从表格数据中选择）
    selectFirstBackBall(num) {
      const formattedNum = String(num).padStart(2, '0')
      this.formData.firstBackBall = formattedNum
    },

    // 精推版第五步选择后区随球（从表格数据中选择）
    selectFollowBackBall(num) {
      const formattedNum = String(num).padStart(2, '0')
      
      // 检查是否是后区首球，如果是则不允许选择
      if (formattedNum === this.formData.firstBackBall) {
        return
      }
      
      this.formData.followBackBall = formattedNum
    },
  
      // 前区随球选择相关方法
      openFollowFrontBallSelector(index) {
        this.currentFollowFrontBallIndex = index
        this.showFollowFrontBallSelector = true
      },
  
      closeFollowFrontBallSelector() {
        this.showFollowFrontBallSelector = false
      },
  
      selectFollowFrontBallNumber(num) {
        const formattedNum = String(num).padStart(2, '0')
        const isUsed = (this.formData.firstFrontBall === formattedNum) || 
                       (this.formData.followFrontBalls.includes(formattedNum) && 
                        this.formData.followFrontBalls[this.currentFollowFrontBallIndex] !== formattedNum)
  
        if (isUsed) return
  
        this.formData.followFrontBalls[this.currentFollowFrontBallIndex] = formattedNum
        this.closeFollowFrontBallSelector()
      },
  
      clearFollowFrontBallNumber() {
        this.formData.followFrontBalls[this.currentFollowFrontBallIndex] = ''
        this.closeFollowFrontBallSelector()
      },
  
      // 第三步：其余前区球选择相关方法
      openSelectedFrontBallSelector(index) {
        this.currentSelectedFrontBallIndex = index
        this.showSelectedFrontBallSelector = true
      },
  
      closeSelectedFrontBallSelector() {
        this.showSelectedFrontBallSelector = false
      },
  
      selectSelectedFrontBallNumber(num) {
        const formattedNum = String(num).padStart(2, '0')
        const isUsed = (this.formData.firstFrontBall === formattedNum) || 
                       (this.formData.selectedFrontBalls.includes(formattedNum) && 
                        this.formData.selectedFrontBalls[this.currentSelectedFrontBallIndex] !== formattedNum)
  
        if (isUsed) return
  
        this.formData.selectedFrontBalls[this.currentSelectedFrontBallIndex] = formattedNum
        this.closeSelectedFrontBallSelector()
      },
  
      clearSelectedFrontBallNumber() {
        this.formData.selectedFrontBalls[this.currentSelectedFrontBallIndex] = ''
        this.closeSelectedFrontBallSelector()
      },
  
      // 第三步：后区球选择相关方法
      openSelectedBackBallSelector(index) {
        this.currentSelectedBackBallIndex = index
        this.showSelectedBackBallSelector = true
      },
  
      closeSelectedBackBallSelector() {
        this.showSelectedBackBallSelector = false
      },
  
      selectSelectedBackBallNumber(num) {
        const formattedNum = String(num).padStart(2, '0')
        const isUsed = this.formData.selectedBackBalls.includes(formattedNum) && 
                       this.formData.selectedBackBalls[this.currentSelectedBackBallIndex] !== formattedNum
  
        if (isUsed) return
  
        this.formData.selectedBackBalls[this.currentSelectedBackBallIndex] = formattedNum
        this.closeSelectedBackBallSelector()
      },
  
      clearSelectedBackBallNumber() {
        this.formData.selectedBackBalls[this.currentSelectedBackBallIndex] = ''
        this.closeSelectedBackBallSelector()
      },
  
  
      // 显示风险提示弹窗
      showSubmitWarning() {
        this.showWarning = true
      },
  
      // 隐藏风险提示弹窗
      hideWarning() {
        this.showWarning = false
      },
  
      // 隐藏成功弹窗
      hideSuccessModal() {
        this.showSuccessModal = false
        this.resetForm()
        // 跳转回首页
        this.$router.push('/')
      },
  
      // 重置表单
      resetForm() {
        this.currentStep = 1
        this.formData = {
          level: '',
          drawId: '',
          drawDate: '',
          lastFrontBalls: ['', '', '', '', ''], // 5个前区球
          lastBackBalls: ['', ''], // 2个后区球
          firstFrontBall: '',
          followFrontBalls: ['', '', ''], // 3个前区随球
          selectedFrontBalls: ['', '', '', ''], // 4个前区球
          selectedBackBalls: ['', ''], // 2个后区球
          firstBackBall: '',
          followBackBall: '',
          predictDrawId: ''
        }
      this.firstStepAnalysisData = []
      this.secondStepAnalysisData = []
      this.thirdStepAnalysisData = []
      this.fourthStepAnalysisData = []
        this.analyzedFrontBalls = []
        this.followAnalyzedFrontBalls = []
        this.followAnalyzedBackBalls = []
        this.agreeToTerms = false
      },
  
      // 确认提交推测
      async confirmSubmit() {
        this.loading = true
        
        try {
          // 获取用户信息
          const userInfo = await userStore.fetchLoginUser()
          if (!userInfo || !userInfo.id) {
            ElMessage.error('请先登录')
            return
          }
  
          // 收集前区球号码（首球 + 4个其余球）
          const frontBalls = [
            parseInt(this.formData.firstFrontBall),
            ...this.formData.selectedFrontBalls.map(ball => parseInt(ball))
          ]
          
          // 收集后区球号码（2个球）
          const backBalls = [
            parseInt(this.formData.firstBackBall),
            parseInt(this.formData.followBackBall)
          ]
  
          // 格式化为逗号分隔的字符串
          const frontBallsStr = frontBalls.join(',')
          const backBallsStr = backBalls.join(',')
  
          console.log('提交大乐透推测:', {
            userId: userInfo.id,
            drawId: parseInt(this.formData.predictDrawId),
            frontBalls: frontBallsStr,
            backBalls: backBallsStr
          })
  
          // 调用API创建预测记录
          const response = await dltLotteryApi.createDltPredictRecord(
            userInfo.id,
            parseInt(this.formData.predictDrawId),
            frontBallsStr,
            backBallsStr
          )
  
          if (response && response.success) {
            // 隐藏风险提示弹窗
            this.showWarning = false
            // 显示成功弹窗
            this.showSuccessModal = true
            console.log('预测记录创建成功:', response.data)
            
            // 提交成功后清除缓存
            this.clearCache()
            console.log('大乐透推测提交成功，缓存已清除')
          } else {
            ElMessage.error(response?.message || '创建预测记录失败')
          }
  
        } catch (error) {
          console.error('提交大乐透推测失败:', error)
          ElMessage.error(error?.response?.data?.message || '网络错误，请稍后重试')
        } finally {
          this.loading = false
        }
      },
  
      // 显示服务条款
      showTerms() {
        // 保存当前数据到缓存
        this.saveFormDataToCache()
        this.$router.push('/user-agreement')
      },
  
      // 保存表单数据到缓存
      saveFormDataToCache() {
        try {
          localStorage.setItem('dlt_prediction_cache', JSON.stringify({
            currentStep: this.currentStep,
            formData: this.formData,
          firstStepAnalysisData: this.firstStepAnalysisData,
          secondStepAnalysisData: this.secondStepAnalysisData,
          thirdStepAnalysisData: this.thirdStepAnalysisData,
          fourthStepAnalysisData: this.fourthStepAnalysisData,
            analyzedFrontBalls: this.analyzedFrontBalls,
            followAnalyzedFrontBalls: this.followAnalyzedFrontBalls,
            followAnalyzedBackBalls: this.followAnalyzedBackBalls,
            agreeToTerms: this.agreeToTerms,
            // 保存筛选过程说明数据
            frontBallsFilteringProcess: this.frontBallsFilteringProcess,
            followFrontBallsFilteringProcess: this.followFrontBallsFilteringProcess,
            backBallsFilteringProcess: this.backBallsFilteringProcess,
            followBackBallsFilteringProcess: this.followBackBallsFilteringProcess,
            timestamp: Date.now()
          }))
        } catch (error) {
          console.error('保存大乐透表单数据到缓存失败:', error)
        }
      },
  
      // 清除缓存
      clearCache() {
        try {
          localStorage.removeItem('dlt_prediction_cache')
          console.log('大乐透推测缓存已清除')
        } catch (error) {
          console.error('清除大乐透缓存失败:', error)
        }
      },
  
      // 从缓存加载表单数据
      loadFormDataFromCache() {
        try {
          const cachedData = localStorage.getItem('dlt_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 }
            
            // 确保 followFrontBalls 有正确的长度（3个元素）
            if (this.formData.followFrontBalls.length !== 3) {
              this.formData.followFrontBalls = ['', '', '']
            }
            
            // 确保 selectedFrontBalls 有正确的长度（4个元素）
            if (this.formData.selectedFrontBalls.length !== 4) {
              this.formData.selectedFrontBalls = ['', '', '', '']
            }
            
            // 清理 selectedFrontBalls，确保不包含首球
            if (this.formData.firstFrontBall) {
              this.formData.selectedFrontBalls = this.formData.selectedFrontBalls.map(ball => {
                // 如果随球中包含首球，则清空该位置
                return ball === this.formData.firstFrontBall ? '' : ball
              })
            }
          this.firstStepAnalysisData = parsedData.firstStepAnalysisData || []
          this.secondStepAnalysisData = parsedData.secondStepAnalysisData || []
          this.thirdStepAnalysisData = parsedData.thirdStepAnalysisData || []
          this.fourthStepAnalysisData = parsedData.fourthStepAnalysisData || []
            this.analyzedFrontBalls = parsedData.analyzedFrontBalls || []
            this.followAnalyzedFrontBalls = parsedData.followAnalyzedFrontBalls || []
            this.followAnalyzedBackBalls = parsedData.followAnalyzedBackBalls || []
            this.agreeToTerms = parsedData.agreeToTerms || false
            // 恢复筛选过程说明数据
            this.frontBallsFilteringProcess = parsedData.frontBallsFilteringProcess || ''
            this.followFrontBallsFilteringProcess = parsedData.followFrontBallsFilteringProcess || ''
            this.backBallsFilteringProcess = parsedData.backBallsFilteringProcess || ''
            this.followBackBallsFilteringProcess = parsedData.followBackBallsFilteringProcess || ''
            
            console.log('大乐透推测数据已从缓存恢复，当前步骤:', this.currentStep)
            
            return true
          }
        } catch (error) {
          console.error('从缓存加载大乐透表单数据失败:', error)
          this.clearCache()
        }
        return false
      },
  
      // 检查号码是否在第三步中已被使用
      isNumberUsedInStep3(num) {
        const formattedNum = String(num).padStart(2, '0')
        // 检查是否与首球重复
        if (this.formData.firstFrontBall === formattedNum) return true
        // 检查是否与其他已选择的前区球重复
        return this.formData.selectedFrontBalls.includes(formattedNum) && 
               this.formData.selectedFrontBalls[this.currentSelectedFrontBallIndex] !== formattedNum
      },
    }
  }
  </script>
  
  <style scoped>
  /* 基础样式参考双色球界面但使用绿色主题 */
  .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;
  }
  
  /* 大乐透头部样式 - 绿色主题 */
  .dlt-header {
    padding: 20px;
    text-align: center;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 50%, #1B5E20 100%);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.3);
    color: white;
    position: relative;
    overflow: hidden;
  }
  
  /* 前区球样式 */
  .ball-front {
    background: linear-gradient(135deg, #4CAF50, #66BB6A);
    color: white;
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    margin: 0 3px;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
  }

/* 表格中的球号样式 */
.table-ball-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  margin: 0;
}
  
  /* 后区球样式保持蓝色 */
  .ball-blue {
    background: linear-gradient(135deg, #2196f3, #42a5f5);
    color: white;
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    margin: 0 3px;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
  }
  
  /* 推荐标签样式 */
  .recommended-badge {
    position: absolute;
  bottom: -3px;
  right: -3px;
    z-index: 1;
  font-size: 10px;
  padding: 0px 3px;
  height: 16px;
  line-height: 16px;
  }
  
  /* 球号展示容器 */
  .balls-display {
    background: white;
  padding:  0 0 12px 0px;
    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;
  }

/* 精推版第二步表格和选择器样式 */
.step2-content-wrapper {
  width: 100%;
}

.analysis-table-container {
  margin-bottom: 20px;
}

/* 表格最大高度和滚动 */
.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 */
}

.first-ball-selection {
  margin-top: 20px;
  margin-bottom: 20px;
}

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

.first-ball-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  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: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4CAF50, #66BB6A);
  color: white;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
  transition: all 0.3s ease;
}

.ball-option:hover .ball-number {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
}

.ball-option.selected .ball-number {
  background: linear-gradient(135deg, #2E7D32, #388E3C);
  box-shadow: 0 8px 24px rgba(46, 125, 50, 0.6);
  transform: scale(1.15);
}

/* 蓝色球号样式 */
.ball-number.blue-ball-number {
  background: linear-gradient(135deg, #2196f3, #42a5f5);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.ball-option.selected .ball-number.blue-ball-number {
  background: linear-gradient(135deg, #1976d2, #2196f3);
  box-shadow: 0 8px 24px rgba(25, 118, 210, 0.6);
  transform: scale(1.15);
}
  
  /* 最终结果球号显示 */
  .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;
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 10px;
  }

/* 最后一步的球号放大 */
.final-result .ball-front {
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-size: 20px;
}

.final-result .ball-blue {
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-size: 20px;
}
  
  .front-balls, .back-balls {
    display: flex;
    gap: 8px;
  }
  
  /* 各种选择器容器样式 */
  .first-ball-selector,
  .follow-balls-selector,
  .selected-balls-selector,
.selected-back-balls-selector {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  
  .selected-front-balls-container {
    margin-top: 20px;
  }
  
  .first-ball-display {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
  }
  
  .disabled-ball {
    opacity: 0.7;
    cursor: not-allowed !important;
  }
  
  .disabled-ball:hover {
    transform: none !important;
  }
  
  /* 用户服务协议 */
  .terms-section {
    margin-bottom: 8px;
  }
  
  /* Alert标题和图标样式 */
  .alert-title-with-icon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  
  .alert-title-with-icon span {
    flex: 1;
    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: #4CAF50 !important;
  }
  
  :deep(.el-alert--info .el-alert__content) {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #4CAF50 !important;
  }
  
  .dlt-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: 12px 20px;
}

.step-panel :deep(.el-card__body) {
  padding: 16px 20px;
  }
  
  .custom-steps {
    width: 100%;
  }
  
  .custom-steps :deep(.el-step__title) {
    font-size: 14px;
    font-weight: 500;
    margin-left: -8px;
  }
  
  .custom-steps :deep(.el-step__title.is-process) {
    color: #4CAF50;
    font-weight: 600;
  }
  
  .custom-steps :deep(.el-step__head.is-process) {
    color: #4CAF50;
    border-color: #4CAF50;
  }
  
  .custom-steps :deep(.el-step__head.is-wait) {
    color: #c0c4cc;
    border-color: #c0c4cc;
  }
  
  /* 位置选择器 */
  .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: #4CAF50;
    background: rgba(76, 175, 80, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
  }
  
  .position-title {
    font-weight: 600;
    font-size: 16px;
    color: #333;
    transition: all 0.3s;
    text-align: center;
    width: 100%;
  }
  
  /* 输入区域 */
  .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;
  }
  
  .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-balls-selector {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    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, #4CAF50, #66BB6A);
    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(76, 175, 80, 0.3);
    border: none;
  }
  
  .ball-number-display:hover.clickable {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
  }
  
/* 自定义弹窗样式 */
.custom-dialog-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: 2000;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease-out;
}

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

.custom-dialog {
  background: white;
  border-radius: 12px;
  max-width: 90%;
  width: 480px;
    max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideIn 0.3s ease-out;
  display: flex;
  flex-direction: column;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.custom-dialog-header {
  padding: 20px 25px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.custom-dialog-header h4 {
  margin: 0;
  font-size: 18px;
    font-weight: 600;
  color: #333;
}

.custom-dialog-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #999;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0;
}

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

.custom-dialog-body {
  padding: 10px 20px;
  overflow-y: auto;
  flex: 1;
  max-height: 65vh;
}

.custom-dialog-footer {
  padding: 7.5px 20px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-shrink: 0;
}

.custom-btn {
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  outline: none;
}

.custom-btn-default {
  background: white;
  border: 1px solid #ddd;
  color: #666;
}

.custom-btn-default:hover {
  background: #f5f5f5;
  border-color: #bbb;
}

.custom-btn-primary {
  background: linear-gradient(135deg, #4CAF50, #66BB6A);
  color: white;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.custom-btn-primary:hover {
  background: linear-gradient(135deg, #388e3c, #5cb860);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
  }
  
  .ball-numbers-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
  gap: 12px;
    justify-items: center;
  padding: 5px 10px;
    min-width: 0;
    max-width: 100%;
  }
  
  .ball-number-option {
  width: 50px;
  height: 50px;
    border-radius: 50%;
  background: linear-gradient(135deg, #4CAF50, #66BB6A);
  color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    min-width: 0;
  max-width: 50px;
  box-shadow: 0 2px 6px rgba(76, 175, 80, 0.3);
  position: relative;
  }
  
  .ball-number-option:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(76, 175, 80, 0.4);
  }
  
  .ball-number-option.selected {
    background: linear-gradient(135deg, #4CAF50, #66BB6A);
    color: white;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.5);
  transform: scale(1.05);
  }
  
  .ball-number-option.used {
  background: linear-gradient(135deg, #4CAF50, #66BB6A);
  color: #FFF;
    opacity: 0.6;
    cursor: not-allowed;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .ball-number-option.used:hover {
    transform: none;
  background: linear-gradient(135deg, #4CAF50, #66BB6A);
  color: #FFF;
}

.ball-number-option.recommended {
  border: 3px solid #f56c6c;
  box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
  }
  
  /* 步骤内容 */
  .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;
  }
  
  .step-panel :deep(.el-card__header h3) {
    margin: 0;
  }
  
  /* 按钮组 */
  .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;
  }
  
  /* 响应式布局 */
  @media (max-width: 768px) {
    .home-container {
      padding: 10px 10px 5px 10px;
    }
    
    .dlt-header {
      padding: 15px 10px;
    }
    
    .main-title {
      font-size: 28px;
      margin-bottom: 16px;
    }
    
    .subtitle {
      font-size: 16px;
    }
    
    .step-panel h3 {
      font-size: 15px;
    }
    
    .position-selector {
      flex-direction: row;
      gap: 10px;
      flex-wrap: nowrap;
    }
    
    .position-item {
      max-width: none;
      min-width: 0;
      padding: 30px 10px;
      font-size: 14px;
    }
  
    /* 登录弹窗样式 */
    .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, #4CAF50, #66BB6A);
      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, #4CAF50, #66BB6A);
      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(76, 175, 80, 0.3);
    }
  
    .login-confirm-btn:active {
      transform: translateY(0);
    }
  
  /* 风险提示和成功弹窗样式 */
  .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;
  }
  
  @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);
    }
  }
  
  .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);
  }
  
  .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-front {
    background: linear-gradient(135deg, #4CAF50, #66BB6A);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 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, #3b82f6, #1d4ed8) !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(59, 130, 246, 0.3) !important;
      }
      
      .btn-confirm:hover {
        background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 12px 35px rgba(59, 130, 246, 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-front {
        background: linear-gradient(135deg, #4CAF50, #66BB6A) !important;
        box-shadow: 0 6px 18px rgba(76, 175, 80, 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) {
      .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;
      }
      
      .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;
      }
  
    /* 最后一步的球号放大 - 768px */
    .final-result .ball-front {
      width: 48px;
      height: 48px;
      line-height: 48px;
      font-size: 20px;
    }

    .final-result .ball-blue {
      width: 48px;
      height: 48px;
      line-height: 48px;
      font-size: 20px;
    }

    .custom-dialog {
      width: 85vw;
      max-width: 450px;
    }

    .custom-dialog-header {
      padding: 16px 20px;
    }

    .custom-dialog-header h4 {
      font-size: 16px;
    }

    .custom-dialog-close {
      width: 28px;
      height: 28px;
      font-size: 24px;
    }

    .custom-dialog-body {
      padding: 8px 16px;
      max-height: 60vh;
    }

    .custom-dialog-footer {
      padding: 6px 20px;
    }

    .custom-btn {
      padding: 9px 20px;
      font-size: 14px;
      }
      
      .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: 46px;
      height: 46px;
      font-size: 15px;
        min-width: 0;
      max-width: 46px;
      }
      
      .ball-number-display {
        width: 48px;
        height: 48px;
        font-size: 16px;
      }
      
      .red-balls-selector,
      .follow-balls-selector,
      .selected-balls-selector {
        gap: 10px;
        flex-wrap: wrap;
      }
  
      .step-nav-card :deep(.el-card__body) {
      padding: 10px 15px;
    }
    
    .step-panel :deep(.el-card__body) {
      padding: 12px 15px;
      }
      
      .custom-steps :deep(.el-step__title) {
        font-size: 13px;
        margin-left: -6px;
      }
      
      .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;
      }
      
    /* 精推版第二步响应式样式 */
    .analysis-table-container :deep(.el-table) {
      font-size: 13px;
      max-height: 500px;
    }
    
    .analysis-table-container :deep(.el-table__body-wrapper) {
      max-height: 450px;
    }
    
    /* 表格列宽度控制 - 768px */
    /* 号码列 */
    .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;
      padding: 8px 4px;
    }

    /* 频次列 */
    .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;
      padding: 8px 4px;
    }

    /* 系数和列 */
    .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;
      padding: 8px 4px;
    }

    /* 百期排位列 */
    .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;
      padding: 8px 4px;
    }

    /* 历史排位列 */
    .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;
      padding: 8px 4px;
    }

    /* 球号大小调整 */
    .ball-front {
      width: 28px;
      height: 28px;
      line-height: 28px;
      font-size: 13px;
    }
    
    .table-ball-number {
      width: 28px;
      height: 28px;
      font-size: 13px;
    }
    
    .ball-option .ball-number {
      width: 42px;
      height: 42px;
      font-size: 15px;
    }
    
    .first-ball-selector {
      gap: 10px;
    }
    
    }
  
    @media (max-width: 480px) {
      .home-container {
        padding: 5px 5px 3px 5px;
      }
      
      .dlt-header {
        padding: 12px 8px;
      }
      
      .main-title {
        font-size: 24px;
        margin-bottom: 6px;
      }
      
      .subtitle {
        font-size: 15px;
      }
      
      .position-selector {
        gap: 8px;
      }
      
      .position-item {
        padding: 25px 8px;
        font-size: 13px;
      }
      
      .position-title {
        font-size: 14px;
      }
      
    .custom-dialog {
      width: 90vw;
      max-width: 380px;
    }

    .custom-dialog-header {
      padding: 14px 18px;
    }

    .custom-dialog-header h4 {
      font-size: 15px;
    }

    .custom-dialog-body {
      padding: 7px 14px;
      max-height: 58vh;
    }

    .custom-dialog-footer {
      padding: 6px 18px;
    }

    .custom-btn {
      padding: 8px 18px;
      font-size: 13px;
      }
      
      .ball-numbers-grid {
        grid-template-columns: repeat(5, 1fr) !important;
      gap: 8px;
        padding: 5px 8px;
        min-width: 0;
        max-width: 100%;
      }
      
      .ball-number-option {
      width: 42px;
      height: 42px;
      font-size: 14px;
        min-width: 0;
      max-width: 42px;
      }
      
      .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;
      }
      
      .step-nav-card :deep(.el-card__body) {
      padding: 10px 12px 5px 12px;
    }
    
    .step-panel :deep(.el-card__body) {
      padding: 10px 14px;
      }
      
      .custom-steps :deep(.el-step__title) {
        font-size: 12px;
        transform: scale(0.9);
        white-space: nowrap;
        margin-left: -4px;
      }
      
      .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;
      }
    
    /* 精推版第二步响应式样式 */
    .analysis-table-container :deep(.el-table) {
      font-size: 11px;
      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: 11px;
    }

    .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: 1px !important;
      padding-right: 1px !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: 48px;
      min-width: 48px;
      max-width: 48px;
    }

    /* 频次列 */
    .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: 40px;
      min-width: 40px;
      max-width: 40px;
    }

    /* 系数和列 */
    .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: 58px;
      min-width: 58px;
      max-width: 58px;
    }

    /* 百期排位列 */
    .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: 55px;
      min-width: 55px;
      max-width: 55px;
    }

    /* 历史排位列 */
    .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: 55px;
      min-width: 55px;
      max-width: 55px;
    }

    /* 球号大小调整 */
    .ball-front {
      width: 22px;
      height: 22px;
      line-height: 22px;
      font-size: 10px;
    }
    
    .table-ball-number {
      width: 22px;
      height: 22px;
      line-height: 22px;
      font-size: 10px;
    }
    
    .ball-option .ball-number {
      width: 34px;
      height: 34px;
      font-size: 13px;
    }
    
    .first-ball-selector {
      gap: 7px;
    }

    .selection-warning {
      margin-top: 10px;
      padding: 8px 12px;
      font-size: 13px;
    }
      
      /* 小屏幕弹窗样式 */
      .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;
      }
      
      .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;
      }

    /* 最后一步的球号放大 - 480px */
    .final-result .ball-front {
      width: 42px;
      height: 42px;
      line-height: 42px;
      font-size: 18px;
    }

    .final-result .ball-blue {
      width: 42px;
      height: 42px;
      line-height: 42px;
      font-size: 18px;
    }
    }
  }
  </style>
  