/* 从question.html提取的样式 */
/* 问卷页面专用样式 - 简洁基础版 */
.question-page body {
  background: #ffffff; /* 移除渐变色背景，使用纯色白底 */
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0; /* 清除默认边距，避免布局偏移 */
  padding: 20px 0; /* 上下留白，避免内容贴边 */
}

/* 容器：固定宽度+居中，保证不同屏幕下布局一致 */
.question-page .container.narrow {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px; /* 左右留白，适配小屏幕 */
  box-sizing: border-box; /* 避免padding撑大容器 */
}

/* 进度条：简洁无阴影，突出进度核心信息 */
.question-page .progress {
  background: #f0f0f0; /* 浅灰底色，更符合简洁风格 */
  border-radius: 6px; /* 适度圆角，不夸张 */
  height: 8px; /* 降低高度，避免视觉占比过高 */
  margin: 16px 0;
  overflow: hidden;
}

.question-page .progress .bar {
  background: #4CAF50; /* 纯色进度条，移除渐变 */
  height: 100%;
  border-radius: 6px;
  transition: width 0.6s ease; /* 保留平滑过渡效果 */
}

/* 状态信息：清晰展示答题进度，无多余装饰 */
.question-page .status {
  background: #f8f8f8;
  padding: 10px 16px;
  border-radius: 4px;
  text-align: center;
  color: #666666;
  font-size: 0.9rem;
  margin-bottom: 20px;
  border: 1px solid #eeeeee; /* 细边框增强规整感 */
}

/* 题目标题：突出核心内容，排版规整 */
.question-page .q-title {
  background: #ffffff;
  color: #333333;
  padding: 20px 24px;
  border-radius: 6px;
  text-align: left; /* 左对齐更符合阅读习惯 */
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0 0 24px;
  border: 1px solid #eeeeee;
  font-weight: 500; /* 适度加粗，突出标题层级 */
}

/* 选项样式：规整统一，交互清晰 */
.question-page .option {
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  padding: 14px 18px;
  margin: 8px 0; /* 减少选项间距，避免页面过长 */
  cursor: pointer;
  transition: border-color 0.3s ease; /* 仅保留边框色过渡，简洁交互 */
  display: flex; /* 对齐单选框和文字 */
  align-items: center; /* 垂直居中，提升规整度 */
}

/* 移除hover渐变效果，保留简洁反馈 */
.question-page .option:hover {
  border-color: #4CAF50; /*  hover时边框变主题色，清晰反馈 */
  background: #fafafa;
}

/* 单选框：统一大小和颜色 */
.question-page .option input[type="radio"] {
  width: 18px;
  height: 18px;
  margin-right: 12px;
  accent-color: #4CAF50; /* 选中色与进度条统一，视觉一致 */
}

/* 选中状态：清晰区分，无夸张缩放 */
.question-page .option:has(input:checked) {
  border-color: #4CAF50;
  background: #f6fff6; /* 浅绿背景，温和提示选中状态 */
}

.question-page .option:has(input:checked) span {
  color: #2e7d32; /* 选中文字色，与背景呼应 */
  font-weight: 500;
}

/* 导航按钮：简洁实用，无多余装饰 */
.question-page .nav {
  margin-top: 24px;
  display: flex;
  justify-content: flex-start; /* 左对齐按钮，符合操作逻辑 */
  gap: 12px;
  align-items: center; /* 垂直居中对齐 */
}

.question-page .nav .btn {
  background: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.3s ease;
  cursor: pointer; /* 明确点击反馈 */
  font-size: 0.9rem;
}

.question-page .nav .btn:hover {
  background: #43a047; /*  hover时加深颜色，简洁反馈 */
  transform: none; /* 移除上浮效果，保持规整 */
  box-shadow: none;
}

/* 辅助按钮样式 */
.question-page .nav .btn-secondary {
  background: #6c757d;
}

.question-page .nav .btn-secondary:hover {
  background: #5a6268;
}

/* 答题提示样式 */
.question-page .answer-hint {
  background: #f0f8ff;
  border: 1px solid #e3f2fd;
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: #1565c0;
}

/* 题目序号样式 */
.question-page .question-number {
  color: #4CAF50;
  font-weight: 600;
  margin-right: 8px;
}

/* 状态信息中的间距 */
.question-page .status-separator {
  margin-left: 16px;
}

/* 进度提示样式 */
.question-page .progress-hint {
  color: #666;
  font-size: 0.85rem;
  align-self: center;
}

/* 响应式设计：适配小屏幕，保持布局紧凑 */
@media (max-width: 640px) {
  .question-page .container.narrow {
    padding: 0 12px;
  }
  
  .question-page .q-title {
    padding: 16px 18px;
    font-size: 1rem;
  }
  
  .question-page .option {
    padding: 12px 16px;
    margin: 6px 0;
  }
  
  .question-page .status {
    padding: 8px 12px;
    font-size: 0.85rem;
  }
  
  .question-page .nav .btn {
    padding: 8px 16px;
  }
}

/* 加载动画：保留轻量过渡，避免过度动效 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.question-page .q-title, 
.question-page .option {
  animation: fadeIn 0.5s ease forwards;
}

/* 选项依次加载，保持轻量节奏 */
.question-page .option:nth-child(1) { animation-delay: 0.1s; }
.question-page .option:nth-child(2) { animation-delay: 0.2s; }
.question-page .option:nth-child(3) { animation-delay: 0.3s; }
.question-page .option:nth-child(4) { animation-delay: 0.4s; }
.question-page .option:nth-child(5) { animation-delay: 0.5s; }

/* 从result.html提取的样式 */
/* 结果页局部样式，与现有 style.css 协同 */
.result-page .table { 
  width: 100%; 
  border-collapse: collapse; 
  background: #fff; 
  text-align: left;
}

.result-page .table th, 
.result-page .table td { 
  padding: 12px 10px; 
  border-bottom: 1px solid #eef1f5; 
}

.result-page .table thead th { 
  background: #f6f8fb; 
  color: #334155; 
  font-weight: 600; 
}

.result-page .tag { 
  display: inline-block; 
  padding: 2px 8px; 
  border-radius: 999px; 
  font-size: .875rem; 
  line-height: 1.6; 
}

.result-page .tag-pos { 
  background: #fee2e2; 
  color: #b91c1c; 
}  /* 阳性红 */

.result-page .tag-neg { 
  background: #dcfce7; 
  color: #166534; 
}  /* 阴性绿 */

.result-page .level-normal { 
  background: #dcfce7; 
  color: #166534; 
}

.result-page .level-mild { 
  background: #fef9c3; 
  color: #92400e; 
}

.result-page .level-moderate { 
  background: #ffedd5; 
  color: #9a3412; 
}

.result-page .level-high { 
  background: #fee2e2; 
  color: #b91c1c; 
}

.result-page .card { 
  background: #fff; 
  border-radius: 12px; 
  padding: 16px; 
  box-shadow: 0 1px 2px rgba(0,0,0,.04); 
  margin-bottom: 14px 
}

.result-page .bar-wrap { 
  background: #eef2f7; 
  border-radius: 999px; 
  overflow: hidden; 
  height: 10px; 
}

.result-page .bar { 
  height: 10px; 
  width: 0; 
}

.result-page .bar.normal { 
  background: #22c55e;
}

.result-page .bar.mild { 
  background: #facc15;
}

.result-page .bar.moderate { 
  background: #fb923c;
}

.result-page .bar.high { 
  background: #ef4444;
}

.result-page .kpi { 
  font-weight: 700; 
}

.result-page .muted { 
  color: #6b7280; 
  font-size: .9rem; 
}

/* 结果页面特定样式 */
.result-page .hero--compact {
  /* 如果需要可以添加特定样式 */
}

.result-page .radar-title {
  margin: 0 0 10px;
}

.result-page .detail-title {
  margin: 0 0 12px;
}

.result-page .detail-item {
  margin-bottom: 12px;
}

.result-page .detail-flex {
  display: flex;
  justify-content: space-between;
}

.result-page .factor-table {
  border: 0;
  cellpadding: 8;
  border-collapse: collapse;
  width: 100%;
}

.result-page .factor-table thead tr {
  background-color: #f0f0f0;
}

.result-page .factor-advice {
  background-color: #f9f9f9;
  padding: 10px;
}

.result-page .summary-title {
  margin: 0 0 12px;
}

.result-page .summary-judgment {
  margin: 0 0 8px;
}

.result-page .summary-overview {
  margin: 8px 0 12px;
}

.result-page .summary-disclaimer {
  margin-top: 12px;
}

.result-page .range-highlight {
  padding: 2px 6px;
  border-radius: 6px;
}

.result-page .table-note {
  margin-top: 8px;
}

/* 提交状态提示样式 */
.submit-hint {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  z-index: 9999;
  font-size: 0.9rem;
}

/* 快捷键提示样式 */
.shortcut-hint {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  z-index: 1000;
}