.group-heading {
  margin: 32px 0 4px;
  padding: 14px 16px;
  border-left: 4px solid #238063;
  border-radius: 0 8px 8px 0;
  background: #edf6ef;
  color: #235d48;
  font-size: 17px;
}
.scale-legend {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 24px 0;
}
.scale-legend > div {
  min-width: 0;
  border: 1px solid #dce9df;
  border-radius: 8px;
  padding: 10px;
  background: #f7faf7;
}
.scale-legend strong,
.scale-legend span {
  display: block;
  line-height: 1.5;
}
.scale-legend strong { color: #245847; font-size: 13px; }
.scale-legend span { color: #71847a; font-size: 12px; margin-top: 4px; }

/* ===== 分值配色：5 分最深 → 1 分最浅（量表说明卡片） ===== */
.scale-legend > .rate-5 { background: #a6dabf; border-color: #7ec5a1; border-left: 4px solid #218a5c; }
.scale-legend > .rate-4 { background: #c1e5d2; border-color: #9bd2b5; border-left: 4px solid #4fa87a; }
.scale-legend > .rate-3 { background: #d8eee2; border-color: #b7ddc8; border-left: 4px solid #7dbf9b; }
.scale-legend > .rate-2 { background: #e9f6ef; border-color: #cfe8da; border-left: 4px solid #a5d3ba; }
.scale-legend > .rate-1 { background: #f6fbf8; border-color: #deeee5; border-left: 4px solid #c8e3d4; }

.scale-legend > .rate-5 strong { color: #103526; }
.scale-legend > .rate-4 strong { color: #1d5240; }
.scale-legend > .rate-3 strong { color: #2f6551; }
.scale-legend > .rate-2 strong { color: #3f6a55; }
.scale-legend > .rate-1 strong { color: #4c705d; }

.scale-legend > .rate-5 span { color: #3f5f4f; }
.scale-legend > .rate-4 span { color: #4e6f5e; }
.scale-legend > .rate-3 span { color: #5d7a6b; }
.scale-legend > .rate-2 span { color: #6b8375; }
.scale-legend > .rate-1 span { color: #7d9186; }

/* ===== 分值配色：作答选项，5 分最深 → 1 分最浅 ===== */
.rating label.rate {
  font-weight: 700;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.rating label.rate-5 { background: #6fc196; border-color: #42966e; color: #0f3626; }
.rating label.rate-4 { background: #9ed5b5; border-color: #6cb891; color: #1c4633; }
.rating label.rate-3 { background: #c2e6d2; border-color: #93c9ac; color: #33604b; }
.rating label.rate-2 { background: #dcf0e5; border-color: #bcdccb; color: #47705d; }
.rating label.rate-1 { background: #f0f8f3; border-color: #d9eade; color: #577a66; }

.rating label.rate:hover { box-shadow: 0 0 0 3px rgba(28, 118, 95, .18); }

/* 选中态：同色系整体加深，白字 + 外环 */
.rating label.rate-5:has(input:checked) { background: #0e523b; border-color: #073f2c; color: #fff; box-shadow: 0 0 0 3px rgba(14, 82, 59, .25); }
.rating label.rate-4:has(input:checked) { background: #1f6549; border-color: #125239; color: #fff; box-shadow: 0 0 0 3px rgba(31, 101, 73, .25); }
.rating label.rate-3:has(input:checked) { background: #2f7457; border-color: #1d6247; color: #fff; box-shadow: 0 0 0 3px rgba(47, 116, 87, .25); }
.rating label.rate-2:has(input:checked) { background: #3d8265; border-color: #286b50; color: #fff; box-shadow: 0 0 0 3px rgba(61, 130, 101, .25); }
.rating label.rate-1:has(input:checked) { background: #45886c; border-color: #2f7156; color: #fff; box-shadow: 0 0 0 3px rgba(69, 136, 108, .25); }
.result {
  margin: 24px 0;
  border: 1px solid #dcebdd;
  border-radius: 12px;
  background: #f8fbf8;
  padding: 22px;
}
.result h4 { font-size: 21px; margin: 0 0 10px; }
.result h5 { font-size: 15px; margin: 24px 0 12px; }
.result-lead { line-height: 1.9; margin: 0; color: #4b6958; }
.result-lead strong { color: #1d7155; }
.score-row { margin: 13px 0; }
.score-label, .belief-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.score-label span, .belief-row span { color: #71867a; text-align: right; }
.score-track { height: 8px; border-radius: 8px; background: #e0ece3; margin-top: 8px; overflow: hidden; }
.score-track div { height: 100%; background: #2a9873; border-radius: inherit; }
.belief-row { border-bottom: 1px solid #e4ede5; padding: 10px 0; }
.result-note { margin: 17px 0 0; color: #4d6859; line-height: 1.7; font-size: 14px; }
.result .helper { display: block; margin-top: 18px; line-height: 1.6; }
@media(max-width:680px) {
  .scale-legend { grid-template-columns: 1fr; }
  .scale-legend > div { display: flex; justify-content: space-between; gap: 10px; }
  .scale-legend span { margin-top: 0; text-align: right; }
  .score-label { flex-direction: column; gap: 2px; }
  .score-label span { text-align: left; }
}