*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  min-height:100vh;
  background:#f0f2f5;
  font-family:"Microsoft YaHei",system-ui,-apple-system,sans-serif;
}
.container{
  margin:0 auto;
  position:relative;
}
#restart{
  position:absolute;
  top:8px;
  right:12px;
  background:none;
  border:none;
  color:#999;
  font-size:13px;
  cursor:pointer;
  padding:4px 8px;
  z-index:10;
}
#restart:hover{color:#666}

.training-detail .card{
  background:#fff;
  border-radius:16px;
  padding:22px;
  box-shadow:0 3px 12px rgba(0,0,0,0.06);
  margin-bottom:14px;
}
.training-detail .title{
  text-align:center;
  font-size: clamp(22px, 5vw, 28px);
  font-weight:bold;
  color:#2d3748;

  margin:20px 0 24px 0; /* 🔥 这里加大了间距 */
}
.mode-select{
  display:flex;
  gap:8px;
  margin-bottom:22px; /* 🔥 这里加大了间距 */
  flex-wrap:wrap;
  justify-content:center;
}
.mode-btn{
  padding:8px 12px;
  border:1px solid #ddd;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  font-size:14px;
}
.mode-btn.active{
  background:#4299e1;
  color:#fff;
  border-color:#4299e1;
}
.info{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size: clamp(15px, 3.5vw, 18px);
  margin-bottom:10px;
  flex-wrap:wrap;
  gap:8px;
}
.question{
  font-size: clamp(20px, 5vw, 26px);
  text-align:center;
  margin:24px 0;
  font-weight:500;
  line-height:1.8;
}
.symbol, .option-symbol{
  font-size: clamp(48px, 12vw, 72px) !important;
  line-height:1.1;
  margin:16px 0;
  font-weight:normal;
  display:block;
  text-align:center;
}
.options-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:8px;
}
.option{
  background:#f7fafc;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding: clamp(16px, 4vw, 22px);
  font-size: clamp(16px, 4vw, 19px);
  cursor:pointer;
  transition:0.25s ease;
  text-align:center;
  line-height:1.4;
  word-break:break-all;
  min-height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}
.option:hover{background:#ebf8ff;border-color:#bee3f8}
.option.right{background:#c6f6d5;border-color:#68d391;color:#22543d}
.option.wrong{background:#fed7d7;border-color:#fc8181;color:#742a2a}
.option:disabled{cursor:not-allowed}
.result{
  text-align:center;
  padding: clamp(14px, 3vw, 20px);
  border-radius:14px;
  font-size: clamp(17px, 4vw, 21px);
  font-weight:bold;
  margin:18px 0;
}
.result.right{background:#c6f6d5;color:#22543d}
.result.wrong{background:#fed7d7;color:#742a2a}
.result.pass{background:#bee3f8;color:#2c5282}
.training-detail .btn{
  width:100%;
  background:#4299e1;
  color:#fff;
  border:none;
  border-radius:14px;
  padding: clamp(16px, 4vw, 20px);
  font-size: clamp(17px, 4vw, 20px);
  cursor:pointer;
  margin-top:12px;
  font-weight:500;
}
.training-detail .btn:disabled{background:#cbd5e0}
.training-detail .btn:hover{background:#3182ce;color:#fff}
@media (max-width:480px){
  .options-grid{grid-template-columns:1fr}
  .card{padding:18px}
  .option{min-height:72px}
}