feat: 练习模式答案对比块——显示你的答案与正确答案

- buildExplain() 替换原有单行「正确答案」为双行对比块：
  · 多选题：始终显示「你的答案」+「正确答案」两行，
    字母徽章着色：绿=选对 红=选错 橙=漏选（含漏标注）
  · 单选题：答错时显示「你的答案→正确答案」单行对比，
    答对时不显示（绿色高亮已足够）
  · 极简模式 (_zenMode) 沿用原逻辑，单选答对也展示答案

- quiz.css 新增 .explain-ans-cmp / .explain-ans-row /
  .ans-row-label / .ans-badges / .ans-badge-ok/bad/miss 样式

Author: zyh001

assets/static/quiz.css

@@ -844,6 +844,27 @@ input[type=range]::-webkit-slider-thumb:active{transform:scale(1.2)}
   padding:8px 16px;border-bottom:1px solid var(--border);background:var(--card);
 }
 .explain-correct-row span{color:var(--success);font-weight:600}
+/* ── 答案对比块 ── */
+.explain-ans-cmp{
+  padding:10px 16px;border-bottom:1px solid var(--border);
+  background:var(--card);display:flex;flex-direction:column;gap:7px;
+}
+.explain-ans-row{
+  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
+}
+.ans-row-label{
+  font-size:12px;color:var(--muted);white-space:nowrap;min-width:52px;
+}
+.ans-badges{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
+.ans-arrow{font-size:12px;color:var(--muted);margin:0 2px}
+.ans-badge{
+  display:inline-flex;align-items:center;justify-content:center;
+  min-width:26px;height:26px;padding:0 6px;border-radius:7px;
+  font-size:13px;font-weight:700;line-height:1;
+}
+.ans-badge-ok  {background:var(--success-bg);color:var(--success);border:1.5px solid var(--success)}
+.ans-badge-bad {background:var(--danger-bg);color:var(--danger);border:1.5px solid var(--danger)}
+.ans-badge-miss{background:var(--warn-bg);color:var(--warning);border:1.5px solid var(--warning);font-size:11px;min-width:auto}
 .explain-body{padding:14px 16px;font-size:var(--qfs-explain);line-height:1.85;color:var(--text)}
 .explain-point{
   margin-top:12px;padding:10px 14px;

assets/static/quiz.js

@@ -2566,15 +2566,103 @@ function buildExplain(q, selected) {
     <span class="result-title ${isCorrect ? 'ok' : 'err'}">${isCorrect ? '回答正确！' : (isMulti ? '答案不完整或有误' : '回答错误')}</span>`;
   inner.appendChild(resultRow);
 
-  if (!isCorrect || _zenMode) {
-    const corrRow = document.createElement('div');
-    corrRow.className = 'explain-correct-row';
-    if (isMulti) {
-      corrRow.innerHTML = `正确答案：<span class="multi-ans">${q.answer.split('').join(' ')}</span>`;
-    } else {
-      corrRow.innerHTML = `正确答案：<span>${q.answer}</span>`;
+  // ── 答案对比行 ────────────────────────────────────────────────────
+  // 多选题：始终显示（帮助识别少选/多选）；单选题：答错时显示
+  {
+    const selSet = isMulti
+      ? (selected instanceof Set ? selected : new Set())
+      : new Set(selected ? [selected] : []);
+
+    const showCmp = isMulti || !isCorrect || _zenMode;
+    if (showCmp) {
+      const cmpWrap = document.createElement('div');
+      cmpWrap.className = 'explain-ans-cmp';
+
+      if (isMulti) {
+        // 多选：两行对比 + 字母徽章着色
+        // 收集所有出现过的字母（用户选 + 正确），按字母序排列
+        const allLetters = [...new Set([...correctSet, ...selSet])].sort();
+
+        // — 你的答案行 —
+        const yourRow = document.createElement('div');
+        yourRow.className = 'explain-ans-row';
+        const yourLabel = document.createElement('span');
+        yourLabel.className = 'ans-row-label';
+        yourLabel.textContent = '你的答案';
+        yourRow.appendChild(yourLabel);
+        const yourBadges = document.createElement('span');
+        yourBadges.className = 'ans-badges';
+        if (selSet.size === 0) {
+          const dash = document.createElement('span');
+          dash.className = 'ans-badge ans-badge-miss';
+          dash.textContent = '未作答';
+          yourBadges.appendChild(dash);
+        } else {
+          // 只展示用户选的字母
+          [...selSet].sort().forEach(l => {
+            const b = document.createElement('span');
+            b.className = 'ans-badge ' + (correctSet.has(l) ? 'ans-badge-ok' : 'ans-badge-bad');
+            b.textContent = l;
+            yourBadges.appendChild(b);
+          });
+          // 漏选的字母补一个 miss 提示
+          [...correctSet].filter(l => !selSet.has(l)).sort().forEach(l => {
+            const b = document.createElement('span');
+            b.className = 'ans-badge ans-badge-miss';
+            b.textContent = l + ' 漏';
+            yourBadges.appendChild(b);
+          });
+        }
+        yourRow.appendChild(yourBadges);
+        cmpWrap.appendChild(yourRow);
+
+        // — 正确答案行 —
+        const corrRow2 = document.createElement('div');
+        corrRow2.className = 'explain-ans-row';
+        const corrLabel = document.createElement('span');
+        corrLabel.className = 'ans-row-label';
+        corrLabel.textContent = '正确答案';
+        corrRow2.appendChild(corrLabel);
+        const corrBadges = document.createElement('span');
+        corrBadges.className = 'ans-badges';
+        [...correctSet].sort().forEach(l => {
+          const b = document.createElement('span');
+          b.className = 'ans-badge ans-badge-ok';
+          b.textContent = l;
+          corrBadges.appendChild(b);
+        });
+        corrRow2.appendChild(corrBadges);
+        cmpWrap.appendChild(corrRow2);
+
+      } else {
+        // 单选：单行对比
+        const row = document.createElement('div');
+        row.className = 'explain-ans-row';
+        const lbl1 = document.createElement('span');
+        lbl1.className = 'ans-row-label';
+        lbl1.textContent = '你的答案';
+        row.appendChild(lbl1);
+        const yourB = document.createElement('span');
+        yourB.className = 'ans-badge ' + (!selected ? 'ans-badge-miss' : (!isCorrect ? 'ans-badge-bad' : 'ans-badge-ok'));
+        yourB.textContent = selected || '—';
+        row.appendChild(yourB);
+        const arrow = document.createElement('span');
+        arrow.className = 'ans-arrow';
+        arrow.textContent = '→';
+        row.appendChild(arrow);
+        const lbl2 = document.createElement('span');
+        lbl2.className = 'ans-row-label';
+        lbl2.textContent = '正确答案';
+        row.appendChild(lbl2);
+        const corrB = document.createElement('span');
+        corrB.className = 'ans-badge ans-badge-ok';
+        corrB.textContent = q.answer;
+        row.appendChild(corrB);
+        cmpWrap.appendChild(row);
+      }
+
+      inner.appendChild(cmpWrap);
     }
-    inner.appendChild(corrRow);
   }
 
   // B型题：在解析前展示共享选项，高亮正确答案