/* ============================================
   1. 全局重置与基础样式（所有页面通用）
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: url('src/首页背景图.png') no-repeat center center fixed;
  background-size: cover;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

/* 通用工具类 */
.hidden {
  display: none;
}

/* 动画定义（全局唯一，避免重复） */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================
   2. 页面容器与核心布局（页面整体结构）
   ============================================ */
.report-container {
  background: white;
  border-radius: 20px;
  padding: 40px 40px 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  width: 100%;
  text-align: center;
  min-height: 600px;
  display: flex;
  flex-direction: column;
}

/* 标题区域 */

   .report-title {
            /* 让整个标题块在页面中水平居中 */
            text-align: center;
            /* 清除h1默认的外边距，避免布局混乱 */
            margin: 0 auto;
            /* 让图片和文字垂直居中对齐 */
            display: inline-flex;
            align-items: center;
            /* 可选：调整图片和文字的间距 */
            gap: 8px;
            /* 可选：给标题加个上下间距，避免贴边 */
            padding: 10px 0;
  color: #333;
  font-size: 2.5rem;
  margin-bottom: 10px;
  font-weight: 700;
}
 .title-logo {
            width: 70px;  /* 按需调整，比如24px/32px */
            height: 70px;
            /* 确保图片和文字基线对齐 */
            vertical-align: middle;
        }
    

.report-subtitle {
  color: #666;
  font-size: 1.1rem;
  margin-bottom: 30px;
}

/* 查询区域 */
.query-box {
  margin-bottom: 30px;
}

.input-group {
  margin-bottom: 25px;
  text-align: left;
}

.input-group label {
  display: block;
  margin-bottom: 8px;
  color: #555;
  font-weight: 600;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e1e5e9;
  border-radius: 10px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.query-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  margin-top: 10px;
}

.query-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

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

/* 结果区域（核心优化：分层间距） */
.result-area {
  margin-top: 30px;
  text-align: left;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px; /* 模块之间的间距，避免堆砌 */
  flex: 1; /* 占满剩余空间，让技术支持区域贴底 */
}

/* 加载状态 */
.loading {
  margin: 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 15px;
}

/* loading-area 核心样式（确保显示/隐藏正常） */
#loading-area {
  display: none; /* 默认隐藏 */
  margin: 30px 0;
  justify-content: center;
  align-items: center;
}

#loading-area.loading {
  display: flex; /* 有loading类时显示（flex布局居中） */
}

#loading-area.hidden {
  display: none !important; /* 确保hidden类优先级最高 */
}

/* 提示信息（错误/成功） */
.error-message {
  background: #fee;
  border: 1px solid #fcc;
  color: #c33;
  padding: 15px;
  border-radius: 10px;
  line-height: 1.6;
}

.success-message {
  background: #efe;
  border: 1px solid #cfc;
  color: #363;
  padding: 15px;
  border-radius: 10px;
  margin: 20px 0;
}

/* 技术支持区域（贴底） */
.tech-support {
  text-align: center;
  margin-top: auto; /* 保持贴底效果 */
  color: #888;
  font-size: 0.9rem;
  padding-top: 20px; /* 与上方内容保持距离 */
  padding-bottom: 15px; /* 分割线下方留空隙 */
  border-top: 1px solid #eee; /* 浅灰色分割线（改为上边框，更合理） */
  width: 80%; /* 窄一点更精致 */
  margin-left: auto;
  margin-right: auto;
}

.tech-support-title {
  color: #555;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.tech-support-info {
  margin: 4px 0;
  font-weight: 600;
}

/* ============================================
   3. 分数与排名组件样式（独立模块）
   ============================================ */
.score-display-wrapper {
  text-align: center;
  background-color: white;
  padding: 30px 40px;
  border-radius: 15px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); /* 轻微阴影提升层次 */
  border: 1px solid #f5f5f5;
  width: 100%;
  max-width: 380px; /* 保留最大宽度，避免过大 */
  margin: 0 auto; /* 水平居中 */
}

.score-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 分数圆环容器 */
.score-container {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto 20px;
}

.score-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 8px solid #e0e0e0;
  border-top: 8px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  box-sizing: border-box;
}

.score-ring.loaded {
  animation: none;
  border-color: #667eea; /* 覆盖所有边框颜色 */
}

/* 分数文字内容 */
.score-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}

.score-label {
  font-size: 20px;
  color: #555;
  margin-bottom: 5px;
}

.score-value {
  font-size: 64px;
  font-weight: bold;
  color: #667eea;
  line-height: 1;
}

.loading-text {
  color: #888;
  font-style: italic;
  transition: opacity 0.5s ease-in-out;
}

/* 排名区域 */
.ranking-container {
  margin-top: 20px;
  padding-top: 10px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ranking-icon,
.congrats-text,
.rank-details-text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.ranking-icon {
  font-size: 48px;
  color: #FFD700;
  margin: 10px 0;
}

.congrats-text {
  font-size: 24px;
  color: #333;
  font-weight: 600;
  margin-bottom: 8px;
}

.rank-details-text {
  font-size: 16px;
  color: #666;
  margin-top: 0;
}

/* ============================================
   4. 美化后的详细信息区域样式（核心优化）
   ============================================ */
.info-section {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 两个卡片之间的间距 */
  width: 100%;
}

/* 详细信息卡片 */
.detail-card {
  background: white;
  border-radius: 15px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  border: 1px solid #f5f5f5;
}

/* 卡片标题（带图标） */
.card-title {
  font-size: 1.3rem;
  color: #333;
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  gap: 8px; /* 图标与文字间距 */
}

.card-icon {
  font-size: 1.5rem;
  color: #667eea;
}

/* 信息列表（无列表样式） */
.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 单个信息项（分行展示，带分隔线） */
.info-item {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0; /* 浅灰色分隔线 */
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap; /* 适配小屏幕，内容换行 */
}

/* 最后一项去掉分隔线 */
.info-item:last-child {
  border-bottom: none;
}

/* 信息标签（左侧固定宽度，对齐） */
.info-label {
  font-weight: 600;
  color: #666;
  min-width: 90px; /* 固定宽度，确保所有标签对齐 */
}

/* 信息内容（右侧自适应） */
.info-value {
  color: #333;
  font-size: 1rem;
  line-height: 1.5; /* 多行文本换行更美观 */
  flex: 1; /* 占满剩余空间，避免图标偏移 */
}

/* 高亮文本（如获奖记录） */
.highlight {
  color: #667eea;
  font-weight: 600;
}

/* 信息项图标（如奖杯） */
.item-icon {
  color: #FFD700;
  font-size: 1.2rem;
}

/* 排名信息卡片 */
.rank-card {
  background: #f8f9ff; /* 浅蓝色背景，突出排名 */
  border-radius: 15px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #e6e9ff;
}

.rank-card-icon {
  font-size: 2rem;
  color: #667eea;
  min-width: 40px; /* 固定图标宽度，避免内容偏移 */
  text-align: center;
}

.rank-content {
  flex: 1;
}

.rank-card-title {
  font-size: 1.1rem;
  color: #333;
  margin: 0 0 4px 0;
}

.rank-card-text {
  font-size: 1rem;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

/* ============================================
   5. 雷达图区域样式
   ============================================ */
.chart-section {
  background: white;
  border-radius: 15px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  border: 1px solid #f5f5f5;
  width: 100%;
}

.chart-title {
  font-size: 1.3rem;
  color: #333;
  margin: 0 0 8px 0;
  text-align: center;
}

.chart-subtitle {
  color: #888;
  font-size: 0.9rem;
  text-align: center;
  margin: 0 0 16px 0;
}

/* 图表错误提示样式 */
.chart-error {
  text-align: center;
  padding: 40px 0;
  color: #888;
  font-size: 1rem;
  background: #fafafa;
  border-radius: 8px;
}

/* ============================================
   6. 响应式样式（适配手机端）
   ============================================ */
@media (max-width: 768px) {
  .report-container {
    padding: 30px 20px;
  }

  .report-title {
    font-size: 2rem;
  }

  /* 响应式调整分数组件 */
  .score-display-wrapper {
    padding: 20px 15px;
  }

  .score-container {
    width: 180px;
    height: 180px;
  }

  .score-value {
    font-size: 48px;
  }

  .congrats-text {
    font-size: 20px;
  }

  .rank-details-text {
    font-size: 14px;
  }

  /* 响应式调整信息项 */
  .info-label {
    min-width: 70px; /* 缩小标签宽度，适配小屏幕 */
  }

  .card-title {
    font-size: 1.2rem;
  }

  .chart-title {
    font-size: 1.2rem;
  }
}
/* 统一大卡片容器 */
.unified-card {
  background: white;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  border: 1px solid #f5f5f5;
  width: 100%;
}

/* 内部弱化分隔线（替代独立卡片） */
.internal-divider {
  height: 1px;
  background: #f0f0f0; /* 浅灰色，避免生硬分割 */
  margin: 20px 0; /* 上下留空，保持呼吸感 */
}

/* 各区块标题统一样式 */
.section-title {
  font-size: 1.3rem;
  color: #333;
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 排名区域紧凑样式 */
.rank-section {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.rank-icon {
  font-size: 1.5rem;
  color: #667eea;
}

.rank-title {
  font-size: 1.1rem;
  color: #333;
  margin: 0;
}

.rank-text {
  color: #666;
  margin: 0;
  flex: 1; /* 自适应剩余空间 */
}

/* 分数顶部区域样式调整 */
.score-top-section {
  text-align: center;
  padding-bottom: 10px;
}

/* 详细信息区域样式调整 */
.detail-section {
  padding: 10px 0;
}

/* 雷达图区域样式调整 */
.chart-section {
  padding: 10px 0;
}