/* 答题页 */
.quiz-top { position: sticky; top: 0; z-index: 5; background: linear-gradient(var(--paper) 85%, rgba(245, 247, 248, 0)); padding: 6px 0 12px; margin-bottom: 12px; }
.quiz-top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.quiz-counter { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.92rem; }
.progress { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width 360ms var(--ease); }

/* 情境卡 */
.intro-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 4vw, 32px); display: grid; gap: 12px; justify-items: start; box-shadow: var(--shadow); }
.intro-card h1 { margin-bottom: 0; }
.intro-text { font-size: 1.1rem; color: var(--ink-2); line-height: 1.7; }
.intro-meta { color: var(--muted); font-size: 0.9rem; margin: 0; }
.scene { width: 100%; border-radius: 12px; overflow: hidden; }
.scene img { display: block; width: 100%; height: auto; }

/* 小问卡 */
.item-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(16px, 3.5vw, 26px); display: grid; gap: 16px; box-shadow: var(--shadow); }

/* 情境背景回顾：始终在题干上方，一点即开 */
.scene-recap { border-radius: 12px; background: var(--accent-soft); border: 1px solid transparent; }
.scene-recap summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; color: var(--accent-ink); font-weight: 700; font-size: 0.95rem; }
.scene-recap summary::-webkit-details-marker { display: none; }
.recap-toggle { font-weight: 500; font-size: 0.85rem; opacity: 0.85; white-space: nowrap; }
.recap-toggle::before { content: "▸ "; }
.scene-recap[open] .recap-toggle::before { content: "▾ "; }
.scene-recap[open] .recap-toggle { visibility: visible; }
.recap-body { padding: 0 14px 12px; display: grid; gap: 8px; justify-items: start; }
.recap-body p { margin: 0; color: var(--ink-2); line-height: 1.65; }
.recap-body .btn-tts { min-height: 34px; font-size: 0.85rem; }
.item-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-block; font-size: 0.78rem; padding: 3px 10px; border-radius: 999px; background: var(--paper); color: var(--muted); border: 1px solid var(--line); }
.chip-scenario { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.stem-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; }
.stem { font-size: clamp(1.1rem, 1rem + 0.9vw, 1.35rem); font-weight: 700; line-height: 1.55; margin: 0; }
.btn-tts { min-height: 38px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-weight: 600; font-size: 0.9rem; color: var(--ink-2); }
.btn-tts.is-prominent { background: var(--warm-soft); border-color: #eecfa7; color: #7a4a12; font-size: 1rem; min-height: 44px; }
.tts-icon { font-size: 1rem; }

.fig { display: grid; justify-items: center; padding: 8px 0; }
.fig-svg { display: block; max-width: 100%; height: auto; }
.fig-grid { width: min(100%, 340px); height: auto; }
.fig > .fig-figure { width: min(40%, 140px); height: auto; }
.opt .fig-figure { width: 110px; height: auto; }
.fig-blocks, .fig-net, .fig-gears, .fig-chart, .fig-pattern, .fig-flow { width: min(100%, 420px); height: auto; }
.fig-table { border-collapse: collapse; font-size: 1rem; background: var(--surface); }
.fig-table th, .fig-table td { border: 1px solid var(--line-strong); padding: 8px 14px; text-align: center; }
.fig-table th { background: var(--paper); color: var(--ink-2); font-weight: 700; }
.fig-table tr.is-highlight td { background: var(--warm-soft); }
.fig-log { list-style: none; padding: 0; margin: 0; width: 100%; max-width: 440px; font-size: 1rem; }
.fig-log li { display: flex; gap: 12px; padding: 8px 4px; border-bottom: 1px dashed var(--line); }
.fig-log-time { font-family: var(--mono); color: var(--accent-ink); flex: 0 0 auto; }
.fig-program { font-family: var(--mono); font-size: 1rem; background: var(--paper); border-radius: 12px; padding: 12px 14px; width: 100%; max-width: 420px; }
.fig-program-line { padding: 6px 10px; margin: 4px 0; margin-left: calc(var(--indent, 0) * 22px); background: var(--surface); border-left: 4px solid #3b7dd8; border-radius: 6px; }
.fig-program-line.is-control { border-left-color: var(--warm); }
.fig-icon { display: inline-grid; justify-items: center; gap: 4px; color: var(--ink-2); }
.fig-icon-label { font-size: 0.85rem; color: var(--muted); }

/* 选项 */
.opt-list { display: grid; gap: 10px; }
.opt-list-figs, .opt-list-multi.has-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt-list-figs .opt { flex-direction: column; align-items: center; text-align: center; }
.opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  min-height: 56px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--surface); cursor: pointer;
  transition: border-color 140ms, background 140ms, transform 140ms var(--ease);
}
.opt:hover { border-color: var(--accent); }
.opt.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.opt.is-bump { animation: bump 240ms var(--ease); }
@keyframes bump { 50% { transform: translateX(-3px); } }
.opt-key { flex: 0 0 auto; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--paper); color: var(--ink-2); font-weight: 700; font-size: 0.9rem; }
.opt.is-selected .opt-key { background: var(--accent); color: #fff; }
.opt-text { font-size: 1.05rem; line-height: 1.5; }
.opt-fig { display: grid; place-items: center; }
.opt.has-fig .opt-fig svg { max-height: 132px; width: auto; }
.opt-list-multi .opt { flex-wrap: wrap; }
.opt-list-multi .opt.has-fig { padding: 10px 12px; }
.opt-list-multi .opt.has-fig .opt-fig .fig-icon svg { width: 40px; height: 40px; }
.widget-status { color: var(--muted); font-size: 0.9rem; margin: 0; min-height: 1.4em; }

/* 排序 */
.order-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.order-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; }
.order-handle { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--surface); cursor: pointer; min-height: 52px; }
.order-row.is-armed .order-handle { border-color: var(--warm); background: var(--warm-soft); }
.order-num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--paper); font-weight: 700; color: var(--ink-2); flex: 0 0 auto; }
.order-text { font-size: 1.02rem; }
.order-ctl { display: grid; grid-template-rows: 1fr 1fr; gap: 4px; }
.order-btn { width: 44px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; font-size: 0.85rem; }
.order-btn:disabled { opacity: 0.3; cursor: default; }

/* 网格点选 */
.grid-tap { display: grid; justify-items: center; }
.grid-tap .grid-cell { cursor: pointer; transition: fill 120ms; }
.grid-tap .grid-cell:hover { fill: #eef5f3; }
.grid-tap .grid-cell.is-selected { stroke: var(--accent); stroke-width: 3; }

/* 底部操作 */
.quiz-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.quiz-actions .btn-primary { min-width: 160px; }
.opt, .order-row, .order-btn, .order-handle, .grid-tap, .grid-cell { scroll-margin-bottom: 110px; }

@media (max-width: 480px) {
  .screen-quiz { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .quiz-actions { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(245, 247, 248, 0.92); backdrop-filter: blur(8px); border-top: 1px solid var(--line); margin: 0; }
  .quiz-actions .btn-primary { flex: 1; }
  .stem-row { grid-template-columns: 1fr; }
  .opt-list-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}