/* =============================================
   eq.css — 方程解应用题（天平消除版 · 完整 10 关）
   spec: docs/产品设计/spec/方程解应用题.md
   【第①批】答题屏外壳框架（顶栏 / 内容区 / 反馈条 / 占位）。
   why 选关页·结算·关间导航·复习页复用 tri.css（全局加载、零走样，同 nav/review 引擎约定，
        母本对齐铁律：外壳不做 per-topic 样式）——本文件只放 eq 答题屏自有结构。
   所有尺寸 / 颜色 / 间距用 tokens（AGENTS.md 强制）；模块色 = --eq-color（青绿 teal）。
   ============================================= */

/* 答题屏容器（内容区 max-width clamp 流式 · AGENTS.md） */
.eq-game-wrap {
  max-width: clamp(480px, 70vw, 680px);
  margin: 0 auto;
  padding: var(--space-4);
}

/* 顶栏：标题 + 进度 + 帮助❓（spec §四 顶栏 · ❓不自动弹 UX-16） */
.eq-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--module-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.eq-topbar-title {
  font-size: var(--text-heading);
  font-weight: var(--weight-bold);
  color: var(--module-color);
}
.eq-progress {
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}
/* 帮助按钮：≥44dp 触摸目标（UX-06）· Secondary 样式（AGENTS.md Action Bar：不用 Ghost） */
.eq-help-btn {
  flex: 0 0 auto;
  width: clamp(36px, 9vw, 44px);
  height: clamp(36px, 9vw, 44px);
  background: var(--surface);
  border: 2px solid var(--module-color);
  border-radius: 999px;
  font-size: var(--text-heading);
  color: var(--module-color);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

/* 内容挂载区（关卡交互后续批填充） */
.eq-stage {
  min-height: clamp(240px, 50vh, 420px);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 占位（第①批 · 后续批替换为真实关卡交互） */
.eq-placeholder {
  font-size: var(--text-heading);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  line-height: var(--leading-loose);
}
.eq-placeholder-sub {
  margin-top: var(--space-3);
  font-size: var(--text-caption);
  font-weight: var(--weight-normal);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

/* 反馈条（FEEDBACK-20 渲染落点 #eqFeedback） */
.eq-feedback {
  min-height: var(--space-6);
  margin: var(--space-3) 0;
  text-align: center;
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
}


/* =========================================================
   第②批 · L1 天平探索 + L2 讲解对照
   why .eq-stage 默认 flex 居中(占位用)，L1/L2 有多个顶层 div 需纵向排列 →
        渲染时加 .eq-stage--active 改 column；position:relative 给 AHA 遮罩定位。
   ========================================================= */
.eq-stage--active {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  position: relative;
}

/* --- L1 欲望驱动开场（EQ-05 先痛点后工具·顺序不可反） --- */
.eq-desire { width: 100%; display: flex; flex-direction: column; gap: var(--space-4); }
.eq-stem {
  font-size: var(--text-heading); font-weight: var(--weight-bold);
  color: var(--text-primary); line-height: var(--leading-normal);
  background: var(--module-light); padding: var(--space-4); border-radius: var(--radius-md);
}
.eq-desire-tip { font-size: var(--text-body); color: var(--text-secondary); line-height: var(--leading-normal); }
.eq-guess-row { display: flex; gap: var(--space-3); align-items: center; }
.eq-guess-input {
  flex: 1; min-height: 44px; padding: var(--space-2) var(--space-3);
  font-size: var(--text-body); border: 2px solid var(--surface-dim);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary);
}
.eq-guess-input:focus { outline: none; border-color: var(--module-color); }
.eq-guess-fb { min-height: var(--space-6); font-size: var(--text-body); color: var(--text-primary); line-height: var(--leading-normal); }
.eq-to-balance {
  align-self: center; margin-top: var(--space-2);
  padding: var(--space-3) var(--space-5); font-size: var(--text-body); font-weight: var(--weight-bold);
  color: var(--text-on-accent); background: var(--module-color);
  border: none; border-radius: var(--radius-md); cursor: pointer; box-shadow: var(--shadow-md);
}

/* --- L1 天平本体（盘在上、横梁+支点在下；重的一边下沉 ≤200ms） --- */
.eq-balance-goal {
  text-align: center; font-size: var(--text-heading); font-weight: var(--weight-bold);
  color: var(--module-dark); margin-bottom: var(--space-4); line-height: var(--leading-normal);
}
.eq-balance { position: relative; display: flex; flex-direction: column; align-items: center; margin: var(--space-2) 0 var(--space-4); }
.eq-pans { display: flex; justify-content: space-around; align-items: flex-end; width: 100%; gap: var(--space-4); }
.eq-pan {
  width: 42%; display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  transition: transform 0.18s var(--ease-out);   /* EQ-04：重的一边下沉，≤200ms */
}
.eq-pan-items {
  display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-end; gap: var(--space-2);
  min-height: 100px; width: 100%;
}
.eq-pan-dish {
  width: 100%; height: 10px; background: var(--text-muted);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-sm);
}
.eq-pan-label { font-size: var(--text-caption); color: var(--text-muted); }

/* 盒子＝橙(模式33 x 专色·借 --warning 橙值表达、非警告语义) / 砝码＝灰 / 负砝码＝蓝气球(UX-05 颜色绑唯一语义) */
.eq-item {
  min-width: 48px; min-height: 48px; padding: var(--space-1) var(--space-2);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: var(--text-body); font-weight: var(--weight-bold); cursor: pointer;
  border-radius: var(--radius-sm); border: 2px solid transparent; line-height: 1.1;
  transition: transform 0.12s var(--ease-out);
}
.eq-item:active { transform: scale(0.88); }
.eq-box { background: var(--warning-bg); border-color: var(--warning); color: var(--module-dark); }
.eq-box-x { font-size: var(--text-caption); color: var(--warning); font-style: italic; }
.eq-weight { background: var(--surface-dim); border-color: var(--text-muted); color: var(--text-secondary); }
.eq-weight-neg { background: var(--info-bg); border-color: var(--info); color: var(--info); }
.eq-w-num { font-size: var(--text-caption); }

.eq-beam-wrap { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: var(--space-2); width: 80%; }
.eq-beam {
  width: 100%; height: 10px; background: var(--module-color);
  border-radius: 999px; transform-origin: center center;
  transition: transform 0.18s var(--ease-out); box-shadow: var(--shadow-sm);
}
.eq-fulcrum { font-size: var(--text-title); color: var(--module-dark); margin-top: -6px; line-height: 1; }

.eq-balance-hint { text-align: center; font-size: var(--text-caption); color: var(--text-secondary); margin-bottom: var(--space-3); line-height: var(--leading-normal); }
/* EQ-19 符号小字幕：concrete 档灰色同屏伴随 */
.eq-symbol-caption {
  text-align: center; font-size: var(--text-body); color: var(--text-muted);
  letter-spacing: 0.5px; margin-bottom: var(--space-4);
  padding: var(--space-2); background: var(--surface-dim); border-radius: var(--radius-sm);
}
.eq-explore-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.eq-explore-trials { font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--text-primary); }
.eq-l1-next { text-align: center; margin-top: var(--space-2); }
.eq-next-big {
  padding: var(--space-3) var(--space-6); font-size: var(--text-heading); font-weight: var(--weight-bold);
  color: var(--text-on-accent); background: var(--module-color); border: none;
  border-radius: var(--radius-md); cursor: pointer; box-shadow: var(--shadow-md);
}

/* --- AHA 专属庆祝（EQ-21 · 先卡后通触发·区别普通答对） --- */
.eq-aha {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(13,148,136, 0.14); z-index: var(--z-overlay);
  opacity: 0; transition: opacity 0.3s var(--ease-out); pointer-events: none;
}
.eq-aha.show { opacity: 1; }
.eq-aha-card {
  background: var(--surface); border: 3px solid var(--module-color); border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8); text-align: center; box-shadow: var(--shadow-lg);
  font-size: var(--text-heading); font-weight: var(--weight-bold); color: var(--text-primary);
  line-height: var(--leading-loose); transform: scale(0.8); transition: transform 0.3s var(--ease-bounce);
}
.eq-aha.show .eq-aha-card { transform: scale(1); }
.eq-aha-sub { font-size: var(--text-caption); color: var(--module-dark); font-weight: var(--weight-normal); }

/* --- L2 讲解对照表（EQ-06 · 逐行点亮：你的操作 ↔ 数学家术语） --- */
.eq-explain-lead { text-align: center; font-size: var(--text-title); font-weight: var(--weight-bold); color: var(--module-dark); margin-bottom: var(--space-5); line-height: var(--leading-normal); }
.eq-explain-table { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.eq-explain-head {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: center;
  font-size: var(--text-caption); color: var(--text-muted); font-weight: var(--weight-bold); padding: 0 var(--space-2);
}
.eq-explain-row {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: center;
  opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.eq-explain-row.shown { opacity: 1; transform: translateY(0); }
.eq-exp-you {
  background: var(--warning-bg); border: 2px solid var(--warning); border-radius: var(--radius-md);
  padding: var(--space-3); font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--text-primary);
}
.eq-exp-expr { font-size: var(--text-caption); color: var(--text-secondary); margin-top: var(--space-1); font-weight: var(--weight-normal); }
.eq-exp-arrow { color: var(--module-color); font-weight: var(--weight-bold); }
.eq-exp-math {
  background: var(--module-light); border: 2px solid var(--module-color); border-radius: var(--radius-md);
  padding: var(--space-3); font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--module-dark); text-align: center;
}
.eq-explain-reveal {
  background: var(--correct-bg); border-radius: var(--radius-md); padding: var(--space-4);
  font-size: var(--text-body); color: var(--text-primary); line-height: var(--leading-loose); text-align: center;
  opacity: 0; transition: opacity 0.5s var(--ease-out);
}
.eq-explain-reveal.shown { opacity: 1; }
.eq-explain-foot { text-align: center; margin-top: var(--space-5); opacity: 0; transition: opacity 0.4s var(--ease-out); }
.eq-explain-foot.shown { opacity: 1; }

/* =========================================================
   2026-06-16 重设计追加：糖果🍬 + 盖盒子悬念 + 符号做对后淡入
   why 用户反馈：第一关要简单/容易做对/一上来纯具象（实物糖+盒子，非文字题+算式）。
   ========================================================= */
/* 糖🍬（具象常数·可拿·灰，区别盒子橙；继承 .eq-item 的 ≥48dp/边框） */
.eq-candy { background: var(--surface-dim); border-color: var(--text-muted); }
/* 抽象方框（button 边框即"框"·橙）+ 里面 🍬? ＝"装着糖·几颗不知道"（2026-06-16 用户反馈：
   方框抽象代表盒子、消除实物箱子"自重"困惑·框本身不计重量、天平称的是糖）。 */
.eq-box { flex-direction: row; gap: 2px; }
.eq-box-q { font-size: var(--text-heading); font-weight: var(--weight-bold); color: var(--module-dark); }
/* 数学严谨说明行（盒子=装糖·散糖=看得见的糖·比糖总数） */
.eq-box-note { text-align: center; font-size: var(--text-caption); color: var(--text-secondary); margin-bottom: var(--space-3); line-height: var(--leading-normal); }

/* 第 N/2 题标签 */
.eq-prob-tag { text-align: center; font-size: var(--text-caption); color: var(--text-muted); margin-bottom: var(--space-2); }

/* 盖盒子悬念开场（EQ-05 具象先行） */
.eq-desire-q { text-align: center; font-size: var(--text-title); font-weight: var(--weight-bold); color: var(--module-dark); margin-bottom: var(--space-2); }
/* 盖盒子悬念：也用抽象方框（与天平态一致）·里面 🍬? · 下方"盖着看不见" */
.eq-mystery-box { text-align: center; margin: var(--space-3) 0; }
.eq-mystery-frame {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  width: clamp(72px, 18vw, 100px); height: clamp(72px, 18vw, 100px);
  border: 3px solid var(--warning); background: var(--warning-bg); border-radius: var(--radius-md);
  font-size: var(--text-title); box-shadow: var(--shadow-sm);
}
.eq-mystery-lid { font-size: var(--text-caption); color: var(--text-muted); font-weight: var(--weight-normal); margin-top: var(--space-1); }
.eq-guess-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: var(--space-3) 0; }
.eq-guess-num {
  min-width: 48px; min-height: 48px; font-size: var(--text-heading); font-weight: var(--weight-bold);
  background: var(--surface); border: 2px solid var(--module-color); color: var(--module-color);
  border-radius: var(--radius-sm); cursor: pointer; transition: transform 0.12s var(--ease-out);
}
.eq-guess-num:active { transform: scale(0.9); }

/* EQ-19 符号 x 做对后淡入（concrete 收口、非一上来同屏） */
.eq-symbol-caption.eq-cap-reveal { animation: eqCapReveal 0.5s var(--ease-bounce); }
@keyframes eqCapReveal { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } }

/* =========================================================
   第③批 · L3 翻译拼块关（EQ-07 READQ 三问门 + EQ-08 句→代数式折返）
   why 颜色绑唯一语义（UX-05）：可点=模块色边框(蓝绿) / 选对=绿 / 已拼入=实色模块 / 展示态=灰。
   ========================================================= */
/* 读题框（先读题·养成读题习惯） */
.eq-read-stem {
  font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--text-primary);
  line-height: var(--leading-loose); background: var(--module-light);
  padding: var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-4);
}
/* READQ 三问卡 */
.eq-readq { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.eq-readq-q {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  font-size: var(--text-body); color: var(--text-primary); line-height: var(--leading-normal);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-dim);
}
.eq-readq-n { font-weight: var(--weight-bold); color: var(--module-color); }
.eq-readq-dim { color: var(--text-secondary); background: transparent; }  /* ②③展示行·不可交互 */
/* ①「要找什么」选项：可点（模块色边框）→ 选对变绿 */
.eq-readq-opt {
  min-height: 44px; padding: var(--space-2) var(--space-4);
  font-size: var(--text-body); font-weight: var(--weight-bold);
  background: var(--surface); border: 2px solid var(--module-color); color: var(--module-color);
  border-radius: var(--radius-sm); cursor: pointer; transition: transform 0.12s var(--ease-out);
}
.eq-readq-opt:active { transform: scale(0.92); }
.eq-readq-opt.picked { background: var(--correct-bg); border-color: var(--correct); color: var(--correct); }
.eq-readq-opt:disabled { opacity: 0.4; cursor: default; }

/* 拼块区（未点亮求什么前半透明 + 显示 lock 提示） */
.eq-translate { opacity: 0.5; transition: opacity 0.3s var(--ease-out); position: relative; }
.eq-translate.unlocked { opacity: 1; }
.eq-translate-task { font-size: var(--text-body); color: var(--text-primary); margin-bottom: var(--space-3); line-height: var(--leading-normal); }
.eq-translate-lock { text-align: center; font-size: var(--text-caption); color: var(--text-muted); margin-top: var(--space-3); }
.eq-translate.unlocked .eq-translate-lock { display: none; }
.eq-translate-foot { text-align: center; margin-top: var(--space-4); }

/* 拼装区（虚线框·把积木拼到这里） */
.eq-build-zone {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  min-height: 60px; padding: var(--space-3); margin-bottom: var(--space-3);
  border: 2px dashed var(--module-color); border-radius: var(--radius-md); background: var(--surface);
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.eq-build-empty { color: var(--text-muted); font-size: var(--text-caption); }
.eq-build-zone.eq-build-correct { background: var(--correct-bg); border-color: var(--correct); border-style: solid; }
/* 候选块区 */
.eq-cand-zone { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-2); }

/* 算式积木块（≥44dp·UX-06）：候选=模块色边框可点 / 已拼入=实色模块 */
.eq-block {
  min-width: 48px; min-height: 48px; padding: var(--space-2) var(--space-4);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-heading); font-weight: var(--weight-bold);
  border-radius: var(--radius-sm); cursor: pointer; border: 2px solid var(--module-color);
  transition: transform 0.12s var(--ease-out);
}
.eq-block:active { transform: scale(0.9); }
.eq-block-cand { background: var(--surface); color: var(--module-color); }
.eq-block-built { background: var(--module-color); color: var(--text-on-accent); border-color: var(--module-color); }
.eq-submit-btn { padding: var(--space-3) var(--space-6); font-size: var(--text-heading); }

/* 答错抖动（GameHost.feedback.wrong 给 el 加 .shake；READQ 选错亦用）· eqStage 内通用、各关复用。
   why 自带 @keyframes：全局 .shake 无统一定义（各专题各自带前缀），eq 自包含不依赖他模块 css。 */
.eq-stage .shake { animation: eqShake 0.4s var(--ease-out); }
@keyframes eqShake { 0%,100%{ transform: translateX(0); } 25%{ transform: translateX(-7px); } 50%{ transform: translateX(7px); } 75%{ transform: translateX(-4px); } }

/* =========================================================
   第④批 · L4/L5 列方程关（EQ-09/10/11：设1倍量门 + 条形图 + 列式填空 + 解步骤）
   ========================================================= */
/* 设 1 倍量（EQ-10·复用 readq-opt 视觉语言：模块色可点→选对变绿） */
.eq-setx {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: var(--space-3); margin-bottom: var(--space-3);
  background: var(--surface-dim); border-radius: var(--radius-md);
}
.eq-setx-q { font-size: var(--text-body); color: var(--text-primary); }
.eq-setx-opts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.eq-setx-opt {
  min-height: 44px; padding: var(--space-2) var(--space-4);
  font-size: var(--text-body); font-weight: var(--weight-bold);
  background: var(--surface); border: 2px solid var(--module-color); color: var(--module-color);
  border-radius: var(--radius-sm); cursor: pointer; transition: transform 0.12s var(--ease-out);
}
.eq-setx-opt:active { transform: scale(0.92); }
.eq-setx-opt.picked { background: var(--correct-bg); border-color: var(--correct); color: var(--correct); }
.eq-setx-opt:disabled { opacity: 0.4; cursor: default; }

/* 列式区（设对前半透明 + lock 提示，同 L3 translate） */
.eq-buildeq { opacity: 0.45; transition: opacity 0.3s var(--ease-out); }
.eq-buildeq.unlocked { opacity: 1; }
.eq-buildeq-lock { text-align: center; font-size: var(--text-caption); color: var(--text-muted); margin-top: var(--space-3); }
.eq-buildeq.unlocked .eq-buildeq-lock { display: none; }
.eq-buildeq-foot { text-align: center; margin-top: var(--space-4); }

/* 条形图（模式47 多重体现·长度∝值·标 expr） */
.eq-bars { margin-bottom: var(--space-4); }
.eq-bars-title { font-size: var(--text-caption); color: var(--text-secondary); margin-bottom: var(--space-2); }
.eq-bar-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.eq-bar-name { flex: 0 0 auto; width: 3.5em; font-size: var(--text-body); color: var(--text-primary); text-align: right; }
.eq-bar {
  display: inline-block; height: 22px; background: var(--module-color);
  border-radius: var(--radius-sm); min-width: 16px; transition: width 0.4s var(--ease-out);
}
.eq-bar-expr { flex: 0 0 auto; font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--module-dark); }

/* 列式行（⚖️ 等式 + 各量表达式填空槽） */
.eq-eqline-title { font-size: var(--text-body); color: var(--text-primary); margin-bottom: var(--space-3); }
.eq-eqline-build {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3); margin-bottom: var(--space-3);
  background: var(--surface); border: 2px dashed var(--module-color); border-radius: var(--radius-md);
}
.eq-fill-slot {
  min-width: 64px; min-height: 44px; padding: var(--space-2) var(--space-3);
  font-size: var(--text-heading); font-weight: var(--weight-bold);
  background: var(--surface-dim); border: 2px dashed var(--text-muted); color: var(--text-muted);
  border-radius: var(--radius-sm); cursor: pointer; transition: transform 0.12s var(--ease-out);
}
.eq-fill-slot.filled { background: var(--module-color); border-style: solid; border-color: var(--module-color); color: var(--text-on-accent); }
.eq-fill-slot:active { transform: scale(0.92); }
.eq-op { font-size: var(--text-heading); font-weight: var(--weight-bold); color: var(--text-secondary); }
.eq-rhs { font-size: var(--text-heading); font-weight: var(--weight-bold); color: var(--text-primary); }
.eq-fill-cands { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); }
.eq-fill-label { font-size: var(--text-caption); color: var(--text-secondary); width: 100%; text-align: center; margin-bottom: var(--space-1); }

/* 解步骤展示（EQ-09 列对后·设→列→解→答） */
.eq-solve { text-align: center; }
.eq-solve-eq {
  font-size: var(--text-heading); font-weight: var(--weight-bold); color: var(--correct);
  background: var(--correct-bg); padding: var(--space-3); border-radius: var(--radius-md); margin-bottom: var(--space-3);
}
.eq-solve-steps { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.eq-solve-step {
  font-size: var(--text-body); color: var(--text-primary);
  background: var(--surface-dim); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
}
.eq-solve-ans { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.eq-ans-chip {
  font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--module-dark);
  background: var(--module-light); padding: var(--space-2) var(--space-4); border-radius: 999px;
}

/* =========================================================
   第⑤批 · L6/L7/L8 三题型具象（EQ-12 笼子锁 / EQ-13 年龄滑块 / EQ-14 双方案）
   ========================================================= */
/* L6 鸡兔·笼子锁（设的量=x橙·另一量自动锁=蓝·间接量联动看得见） */
.eq-cage { display: flex; align-items: stretch; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.eq-cage-cell {
  flex: 1; max-width: 40%; display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-dim);
}
.eq-cage-emoji { font-size: var(--text-title); }
.eq-cage-label { font-size: var(--text-body); color: var(--text-secondary); }
.eq-cage-val { font-size: var(--text-heading); font-weight: var(--weight-bold); }
.eq-cage-x { color: var(--warning); }                 /* 设的 x = 橙(x 专色·模式33) */
.eq-cage-locked { color: var(--info); }               /* 自动锁的间接量 = 蓝 */
.eq-cage-link { display: flex; align-items: center; font-size: var(--text-title); color: var(--text-muted); font-weight: var(--weight-bold); }
.eq-cage-note { font-size: var(--text-caption); color: var(--text-secondary); line-height: var(--leading-normal); background: var(--module-light); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }

/* L7 年龄·时间滑块 + 差距条恒定（年龄条复用 .eq-bar） */
.eq-age-diff {
  text-align: center; font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--module-dark);
  margin: var(--space-2) 0; padding: var(--space-2); background: var(--module-light); border-radius: var(--radius-sm);
}
.eq-age-slider { display: flex; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.eq-age-btn {
  min-height: 44px; padding: var(--space-2) var(--space-5);
  font-size: var(--text-body); font-weight: var(--weight-bold);
  background: var(--surface); border: 2px solid var(--module-color); color: var(--module-color);
  border-radius: var(--radius-md); cursor: pointer; transition: transform 0.12s var(--ease-out);
}
.eq-age-btn:active { transform: scale(0.94); }
.eq-age-btn.active { background: var(--module-color); color: var(--text-on-accent); }

/* L8 盈亏·双方案（两行：方案标签 + 描述 + 总数表达式） */
.eq-plan {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  padding: var(--space-3); margin-bottom: var(--space-2);
  background: var(--surface-dim); border-radius: var(--radius-md);
}
.eq-plan-tag {
  flex: 0 0 auto; font-size: var(--text-caption); font-weight: var(--weight-bold);
  color: var(--text-on-accent); background: var(--module-color);
  padding: var(--space-1) var(--space-3); border-radius: 999px;
}
.eq-plan-tag-b { background: var(--info); }
.eq-plan-desc { flex: 1; font-size: var(--text-body); color: var(--text-primary); }
.eq-plan-expr { flex: 0 0 auto; font-size: var(--text-heading); font-weight: var(--weight-bold); color: var(--module-dark); }
.eq-plan-eq { text-align: center; font-size: var(--text-caption); color: var(--text-secondary); margin-top: var(--space-1); line-height: var(--leading-normal); }

/* =========================================================
   第⑥批 · L9 四步法 + 迁移桥 + 回答所问门（EQ-15/16/17）
   ========================================================= */
/* EQ-16 迁移桥（折叠·游戏 ↔ 算式并排对照·补 DragonBox 只会玩不会写） */
.eq-bridge-bar { text-align: center; margin-bottom: var(--space-3); }
.eq-bridge-toggle {
  min-height: 44px; padding: var(--space-2) var(--space-4);
  font-size: var(--text-body); font-weight: var(--weight-bold);
  background: var(--surface); border: 2px dashed var(--module-color); color: var(--module-color);
  border-radius: var(--radius-md); cursor: pointer;
}
.eq-bridge-panel { margin-bottom: var(--space-3); border: 2px solid var(--module-light); border-radius: var(--radius-md); overflow: hidden; }
.eq-bridge-head, .eq-bridge-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.eq-bridge-head {
  font-size: var(--text-caption); font-weight: var(--weight-bold); color: var(--text-on-accent);
  background: var(--module-color); padding: var(--space-2) var(--space-3);
}
.eq-bridge-row { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--surface-dim); align-items: center; }
.eq-bridge-game { font-size: var(--text-caption); color: var(--text-secondary); line-height: var(--leading-normal); }
.eq-bridge-sym { font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--module-dark); }

/* EQ-17 回答所问门（防 E5·解出 x 后强制选问谁） */
.eq-asks { background: var(--warning-bg); border-radius: var(--radius-md); padding: var(--space-4); }
.eq-asks-q { font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--module-dark); margin-bottom: var(--space-3); line-height: var(--leading-normal); }
.eq-asks-opts { display: flex; flex-direction: column; gap: var(--space-2); }
.eq-asks-opt {
  min-height: 44px; padding: var(--space-2) var(--space-4);
  font-size: var(--text-body); font-weight: var(--weight-bold);
  background: var(--surface); border: 2px solid var(--module-color); color: var(--module-color);
  border-radius: var(--radius-sm); cursor: pointer; transition: transform 0.12s var(--ease-out);
}
.eq-asks-opt:active { transform: scale(0.96); }
.eq-asks-ok {
  font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--correct);
  background: var(--correct-bg); padding: var(--space-3); border-radius: var(--radius-md);
  margin-bottom: var(--space-3); line-height: var(--leading-normal);
}

/* =========================================================
   第⑦批 · L10 综合挑战·辨别步（EQ-18 先判题型再调工具）
   ========================================================= */
.eq-mixed-head {
  text-align: center; font-size: var(--text-heading); font-weight: var(--weight-bold);
  color: var(--module-dark); margin-bottom: var(--space-4); line-height: var(--leading-normal);
}
.eq-mixed-stem {
  font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--text-primary);
  line-height: var(--leading-loose); background: var(--module-light);
  padding: var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-4);
}
.eq-classify-q { font-size: var(--text-body); color: var(--text-primary); margin-bottom: var(--space-3); text-align: center; }
.eq-classify-opts { display: flex; flex-direction: column; gap: var(--space-2); }
.eq-classify-opt {
  min-height: 48px; padding: var(--space-3) var(--space-4);
  font-size: var(--text-body); font-weight: var(--weight-bold);
  background: var(--surface); border: 2px solid var(--module-color); color: var(--module-color);
  border-radius: var(--radius-md); cursor: pointer; transition: transform 0.12s var(--ease-out);
}
.eq-classify-opt:active { transform: scale(0.97); }

/* =========================================================
   第⑧批 · 复习卡（EQ-02 三铁律）+ 渐进提示 overlay（EQ-20）
   ========================================================= */
/* 复习卡（在 tri-core-card 基础上补 eq 内容样式） */
.eq-review-card { text-align: left; }
.eq-rv-essence {
  font-size: var(--text-title); font-weight: var(--weight-bold); color: var(--module-dark);
  text-align: center; margin: var(--space-2) 0 var(--space-4);
}
.eq-rv-why-title { font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--text-secondary); margin-bottom: var(--space-2); }
.eq-rv-why { margin: 0 0 var(--space-4) var(--space-4); padding: 0; }
.eq-rv-why li { font-size: var(--text-body); color: var(--text-primary); line-height: var(--leading-loose); }
.eq-rv-visual {
  font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--module-dark);
  background: var(--module-light); padding: var(--space-3); border-radius: var(--radius-md);
  line-height: var(--leading-loose); margin-bottom: var(--space-3); text-align: center;
}
.eq-rv-apply { font-size: var(--text-caption); color: var(--text-muted); text-align: center; }

/* 渐进提示 overlay（EQ-20·复用 tri-gate-overlay/tri-help-card 容器） */
.eq-hint-card { max-width: clamp(300px, 86vw, 480px); }
.eq-hint-head { font-size: var(--text-heading); font-weight: var(--weight-bold); color: var(--module-dark); margin-bottom: var(--space-3); text-align: center; }
.eq-hint-body {
  font-size: var(--text-body); color: var(--text-primary); line-height: var(--leading-loose);
  background: var(--surface-dim); padding: var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-4);
}
.eq-hint-foot { display: flex; flex-direction: column; gap: var(--space-2); }
.eq-hint-foot button { min-height: 44px; border-radius: var(--radius-md); cursor: pointer; font-weight: var(--weight-bold); }