/* ============================================================================
   默听练习（妹妹的词表，板块 id 仍是 'prep'）· 板块局部样式
   ----------------------------------------------------------------------------
   ★ 2026-10 改名：这一页原来叫「准备工作」，用户要求改成「默听练习」
     （id / 类名 `prep-` / 文件名一个字没动 —— 路由与验收都按 id 走）。
     ⚠️ 姐姐那一页（modules/listen.js）**也叫「默听练习」**：同名、不同 id、
        不同归属。样式各归各的文件（姐姐的写在 web/listen.html 里），不共享。
   ★ 只给 modules/prep.js 用，类名统一 `prep-` 前缀，不动 app.css 里任何已有规则。
   ★ 颜色 / 圆角 / 间距一律走 tokens.css 的变量 —— 这个文件里**零硬编码色值**，
     换皮（浅色/深色/换主色）自动跟随。
   ★ 为什么不写进 app.css：那个文件这一轮有别的改动在进行（前端那条线在改
     app.css / registry.js / shell.js），新板块的样式单独一个文件，
     谁也不用等谁。index.html 里多一行 <link>。
   ============================================================================ */

/* ---------------------------------------------------------------- 工具条 */
.prep-bar{
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  padding-bottom:var(--sp-3);margin-bottom:var(--sp-3);border-bottom:1px solid var(--line);
}
.prep-bar__sp{flex:1;min-width:0}



/* ---------------------------------------------------------------- 一组（可折叠） */
.prep-unit{
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  box-shadow:var(--sh-1);overflow:hidden;
}
.prep-unit+.prep-unit{margin-top:var(--sp-2)}
.prep-unit__hd{display:flex;align-items:center;gap:var(--sp-2);padding:9px 11px;flex-wrap:wrap}
.prep-unit__tog{
  flex:1;min-width:0;display:flex;align-items:center;gap:var(--sp-2);
  text-align:left;padding:2px 0;color:var(--tx);
}
.prep-unit__caret{
  flex:none;width:16px;color:var(--tx-3);font-size:11px;line-height:1;
  transition:transform var(--t-fast) var(--ease);
}
.prep-unit.is-open .prep-unit__caret{transform:rotate(90deg)}
.prep-unit__lbl{font-weight:650;font-size:var(--fs-lg);letter-spacing:-.2px;
  min-width:0;overflow-wrap:anywhere}
.prep-unit__lbl.is-blank{color:var(--tx-3);font-weight:600}
.prep-unit__hd:hover .prep-unit__lbl{color:var(--ac-ink)}
.prep-unit__meta{font-size:var(--fs-xs);color:var(--tx-3);white-space:nowrap}
.prep-unit__bd{border-top:1px solid var(--line);background:var(--bg-2)}
.prep-unit__empty{padding:var(--sp-4);text-align:center;color:var(--tx-3);
  font-size:var(--fs-sm)}

/* ---------------------------------------------------------------- 词条 */
.prep-words{display:flex;flex-direction:column}
.prep-word{
  display:grid;align-items:center;gap:var(--sp-2);
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr) 64px minmax(0,1.2fr) auto;
  padding:8px 11px;
}
.prep-word+.prep-word{border-top:1px solid var(--line)}
.prep-word__en{font-family:var(--mono);font-size:var(--fs-md);font-weight:650;
  overflow-wrap:anywhere;min-width:0}
.prep-word__ph{font-family:var(--mono);font-size:var(--fs-sm);color:var(--tx-3);
  overflow-wrap:anywhere;min-width:0}
.prep-word__pos{font-size:var(--fs-xs);color:var(--tx-2);font-weight:700;
  overflow-wrap:anywhere;min-width:0}
.prep-word__cn{font-size:var(--fs-md);color:var(--tx-2);overflow-wrap:anywhere;min-width:0}
.prep-word__acts{display:flex;gap:4px;flex:none}
.prep-word__miss{
  display:inline-block;font-size:var(--fs-xs);font-weight:700;color:var(--warn);
  background:var(--warn-soft);border-radius:var(--r-full);padding:1px 7px;
}
.prep-word__star{color:var(--warn);font-weight:700;margin-left:4px}
/* 词条上的「错 ×N / 已掌握」小标（错词本联动） */
.prep-word__mk{margin-right:6px;vertical-align:1px}

/* ---------------------------------------------------------------- 错词本弹窗 */
.prep-mks{display:flex;flex-direction:column;max-height:52vh;overflow:auto;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel)}
.prep-mk{display:flex;align-items:center;gap:var(--sp-2);padding:9px 11px}
.prep-mk+.prep-mk{border-top:1px solid var(--line)}
.prep-mk__main{flex:1;min-width:0}
.prep-mk__en{font-family:var(--mono);font-size:var(--fs-md);font-weight:650;
  overflow-wrap:anywhere}
.prep-mk__cn{font-size:var(--fs-sm);color:var(--tx-2);overflow-wrap:anywhere}
.prep-mk__meta{font-size:var(--fs-xs);color:var(--tx-3);margin-top:2px}
.prep-mk__acts{flex:none;display:flex;gap:4px}

/* 编辑弹窗里的字段（沿用 .field/.input，这里只补布局） */
.prep-form{display:flex;flex-direction:column;gap:var(--sp-3)}
.prep-form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.prep-form__chk{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);
  color:var(--tx-2);font-weight:600}
.prep-preview{
  max-height:190px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg-2);padding:8px 10px;font-family:var(--mono);font-size:var(--fs-sm);
  line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--tx-2);
}

/* ---------------------------------------------------------------- 拍照录入 */
/* 「拍照 / 从相册选」那一块（见 modules/prep_ocr.js）。
   ★ input 用 .prep-ocr__hide 藏起来，靠 <label for> 触发 ——
     不要改成 display:none：iOS 上 display:none 的 input 点 label 弹不出选择器。 */
.prep-ocr{display:flex;flex-direction:column;gap:var(--sp-3)}
.prep-ocr__pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.prep-ocr__pick .hint{flex:1 1 100%;margin:0}
.prep-ocr__hide{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.prep-ocr__flag{color:var(--bad);margin-left:5px;font-family:var(--mono)}
/* 识别结果预览表：只在弹窗里用，别撑破弹窗 */
.prep-ocr__tbl{max-height:230px;overflow:auto;padding:0;font-family:inherit}
.prep-ocr__tbl table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.prep-ocr__tbl th,.prep-ocr__tbl td{
  text-align:left;padding:5px 8px;border-bottom:1px solid var(--line);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.prep-ocr__tbl th{position:sticky;top:0;background:var(--bg-2);color:var(--tx-2);
  font-weight:600;z-index:1}
.prep-ocr__tbl tr:last-child td{border-bottom:0}
.prep-ocr__tr--warn td{background:var(--warn-soft)}

/* ---------------------------------------------------------------- 响应式 */
/* iPad 竖屏（≤900）：词条挤不下就缩一档，但不折行 */
@media (max-width:900px){
  .prep-word{grid-template-columns:minmax(0,1fr) minmax(0,.9fr) 58px minmax(0,1.1fr) auto;
    gap:6px;padding:8px 9px}
}
/* 手机（≤640）：改成两行 —— 上排「英文 + 音标 + 词性」，下排「中文 + 按钮」。
   ★ 一律 minmax(0,…) + overflow-wrap，390px 下不出现横向滚动条。 */
@media (max-width:640px){
  .prep-word{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:
    "en acts" "cn cn" "ph pos";gap:2px 8px;padding:9px 10px}
  .prep-word__en{grid-area:en}
  .prep-word__acts{grid-area:acts;align-self:start}
  .prep-word__cn{grid-area:cn;color:var(--tx)}
  .prep-word__ph{grid-area:ph}
  .prep-word__pos{grid-area:pos;justify-self:end}
  .prep-form__row{grid-template-columns:minmax(0,1fr)}
  .prep-unit__meta{display:none}
}

/* 手机（≤640）：错词本那一行也折起来（英文在上，按钮在下） */
@media (max-width:640px){
  .prep-mk{flex-wrap:wrap}
  .prep-mk__main{flex:1 1 100%}
  .prep-mk__acts{margin-left:auto}
  .prep-mks{max-height:44vh}
}

/* ============================================================================
   2026-10 新增：四个视图（按月词库 / 日历 / 按天明细 / 错词本）
   + 自然拼读音块 + 默写（家长核对）
   ----------------------------------------------------------------------------
   ★ 颜色依旧**零硬编码**：全部走 tokens.css 的变量。
     · 日历的"词数深浅"用的是同一个主色的四个档：
         --ac-soft（最浅）→ --ac-line → --ac → --ac-3（最深）；
       深色模式下 --ac/--ac-3 会变亮、文字色用 --panel（在浅色下是白、
       在深色下是近黑），两个模式下都读得清 —— 这也是为什么**不写死 #fff**。
     · 拼读的 6 个色调同理（--ac / --ok / --ac-2 / --warn / --tx-2 / --ac-3）。
       它们是**装饰**：相邻音块颜色一定不同，孩子一眼看出切成了几块。
   ============================================================================ */

/* ---------------------------------------------------------------- 页签 */
.prep-tabs{
  display:flex;gap:4px;margin:16px 0 12px;padding:4px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel-2);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.prep-tabs button{
  flex:none;padding:7px 14px;border-radius:var(--r-sm);color:var(--tx-2);
  font-size:var(--fs-md);font-weight:650;transition:all var(--t-fast) var(--ease);
  white-space:nowrap;
}
.prep-tabs button:hover{color:var(--tx)}
.prep-tabs button.on{background:var(--panel);color:var(--ac-ink);box-shadow:var(--sh-1)}
.prep-panel[hidden]{display:none}

/* 卡片头里的标题不许被提示文字挤成两行（390px 下实测："日历" 被折成 "日/历"） */
.prep-panel .card__hd h3{flex:none;white-space:nowrap}
.prep-panel .card__hd .hint{flex:1 1 auto;min-width:0}

/* 月份那一行 */
.prep-month{width:auto;min-width:150px;padding:6px 10px;font-size:var(--fs-sm)}
.prep-mpick{padding:6px 8px;font-size:var(--fs-sm);max-width:190px}

.prep-mhead{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  margin:var(--sp-3) 0 var(--sp-2)}
.prep-mhead b{font-size:var(--fs-xl);letter-spacing:-.2px}
.prep-mhead__acts{margin-left:auto;display:flex;gap:6px}

/* ---------------------------------------------------------------- 按月词库的词表 */
.prep-mlist{display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:var(--panel)}
.prep-mrow{padding:8px 11px}
.prep-mrow+.prep-mrow{border-top:1px solid var(--line)}
.prep-mrow:hover{background:var(--bg-2)}
.prep-mrow__top{display:grid;align-items:center;gap:var(--sp-2);
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr) 64px minmax(0,1.2fr) auto auto}
.prep-mrow__src{white-space:nowrap}
.prep-mrow__ph{margin-top:3px}
.prep-mrow__ph:empty{display:none}

/* ---------------------------------------------------------------- 日历 */
.prep-cal__hd{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  margin:var(--sp-3) 0 var(--sp-2)}
.prep-cal__hd b{font-size:var(--fs-xl);letter-spacing:-.2px;min-width:96px;text-align:center}
.prep-cal{display:flex;flex-direction:column;gap:6px}
.prep-cal__week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;
  font-size:var(--fs-xs);color:var(--tx-3);font-weight:700;text-align:center}
.prep-cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.prep-cal__cell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-height:54px;padding:4px 2px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);color:var(--tx);transition:all var(--t-fast) var(--ease);
}
.prep-cal__cell:hover{border-color:var(--ac-line)}
.prep-cal__cell.is-out{color:var(--tx-3);opacity:.35}
.prep-cal__cell.is-today{box-shadow:inset 0 0 0 2px var(--ac)}
.prep-cal__cell.is-sel{border-color:var(--ac);box-shadow:0 0 0 2px var(--ac-line)}
.prep-cal__d{font-size:var(--fs-md);font-weight:650;line-height:1}
.prep-cal__n{font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;line-height:1;
  opacity:.75}
/* ★ 词数深浅：四档。文字色跟着底色翻（浅底用 --tx，深底用 --panel）——
   这是"两个模式下都读得清"的关键，也是不写死 #fff / #000 的原因。 */
.prep-cal__cell[data-lvl="1"]{background:var(--ac-soft);border-color:var(--line);color:var(--tx)}
.prep-cal__cell[data-lvl="2"]{background:var(--ac-line);border-color:var(--ac-line);color:var(--tx)}
.prep-cal__cell[data-lvl="3"]{background:var(--ac);border-color:var(--ac);color:var(--panel)}
.prep-cal__cell[data-lvl="4"]{background:var(--ac-3);border-color:var(--ac-3);color:var(--panel)}
.prep-cal__lg{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:var(--sp-3);
  font-size:var(--fs-xs);color:var(--tx-3)}
.prep-cal__lg i{display:inline-block;width:12px;height:12px;border-radius:3px;
  border:1px solid var(--line);vertical-align:middle}
.prep-cal__lg i[data-lvl="0"]{background:var(--panel)}
.prep-cal__lg i[data-lvl="1"]{background:var(--ac-soft)}
.prep-cal__lg i[data-lvl="2"]{background:var(--ac-line)}
.prep-cal__lg i[data-lvl="3"]{background:var(--ac)}
.prep-cal__lg i[data-lvl="4"]{background:var(--ac-3)}
/* ★ 那个月一个词都没有时的一条提示（2026-10-09）：浅底 + 一行小字 + 一个按钮。
   用户要的就是"日历默认落在当天"，所以本月空是**预期**，不能装作没事、
   也不能偷偷跳月。颜色全部走 tokens（--ac-soft / --ac-line / --tx-2），
   深色模式自动跟随；flex-wrap 保证 390px 下换行、不撑出横向滚动。 */
.prep-cal__hint{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  margin:0 0 var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);
  background:var(--ac-soft);border:1px solid var(--ac-line);color:var(--tx-2);
  font-size:var(--fs-sm)}
.prep-cal__hint .btn{margin-left:auto}

/* 日历下面：选中那天的词 */
.prep-calday{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--line)}
.prep-calday__hd{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  margin-bottom:var(--sp-2)}
.prep-calday__hd b{font-size:var(--fs-lg);letter-spacing:-.2px}
/* ★ 日历下面那一天的词条，用的是**统一的 .prep-unit / .prep-word**（和原来
   「按天明细」同一份渲染，所以"改来源/删整组/改词/删词/读音/拼读"全都在）。
   原来日历里那套只读的 .prep-cw 已经删掉，别再加回来。 */
.prep-calday .prep-unit:first-of-type{margin-top:var(--sp-1)}

/* ---------------------------------------------------------------- 自然拼读 */
/* 一行拼读：🔤 播放键 + 可点音块（点单块只读那一块）。
   原站的 .ph-* 样式搬过来，颜色改成 tokens（见文件头）。 */
.ph-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px;max-width:100%}
.ph-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;padding:0;border:1px solid var(--line);border-radius:6px;
  background:var(--panel);color:var(--tx-3);cursor:pointer;
  transition:all var(--t-fast) var(--ease)}
.ph-btn svg{width:12px;height:12px;display:block}
.ph-btn:hover{color:var(--ac-ink);border-color:var(--ac);background:var(--ac-soft)}
.ph-seg{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;line-height:1;
  padding:3px 6px;border-radius:6px;border:1px solid transparent;
  background:var(--panel-2);cursor:pointer;transition:all var(--t-fast) var(--ease)}
.ph-seg:hover{background:var(--panel-2);border-color:var(--line-2)}
/* 正在读的那一块（原站 .is-on：浅底 + 浅边 + 抬起来 1px，文字色保留，
   因为颜色本身带信息 = 这是第几块） */
.ph-seg.is-on{background:var(--ac-soft);border-color:var(--ac-line);transform:translateY(-1px)}
/* 6 个色调循环（相邻两块一定不同）。装饰用，非语义。 */
.ph-seg[data-tone="0"]{color:var(--ac)}
.ph-seg[data-tone="1"]{color:var(--ok)}
.ph-seg[data-tone="2"]{color:var(--ac-2)}
.ph-seg[data-tone="3"]{color:var(--warn)}
.ph-seg[data-tone="4"]{color:var(--tx-2)}
.ph-seg[data-tone="5"]{color:var(--ac-3)}

/* 词条里那一行拼读：单独占一行（桌面/iPad） */
.prep-word__phonics{grid-column:1/-1;min-width:0}
.prep-word__phonics:empty{display:none}
.prep-word .ph-row{margin-top:2px}
.prep-mk__ph{margin-top:4px}

/* ---------------------------------------------------------------- 默写 / 学读音（家长核对）
   ★ 骨架**照姐姐的家长模式**（web/listen.html 的 `#play` + `.acts.three`）：
     顶栏 → 主区（.stage/.bi）→ 底部三个大键，上面再挂一排小键。
     覆盖整个视口（专注模式）；z-index 150 —— 比 .mask(200) 低、
     比身份菜单(60) 高（默写时不该去点别的东西）。 */
.prep-dict{position:fixed;inset:0;z-index:150;background:var(--bg);
  display:flex;flex-direction:column;overflow:auto;padding:var(--sp-4)}
.prep-dict__bar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.prep-dict__bar b{font-size:var(--fs-lg);letter-spacing:-.2px}
/* 顶栏这三个：方向 / 进度 / 错几个（对应姐姐 .top 里的 .dir/.pg/.bad） */
.prep-dict__dir{font-size:var(--fs-md);font-weight:700;color:var(--ac-ink)}
.prep-dict__pg{font-family:var(--mono);font-size:var(--fs-sm);color:var(--tx-2)}
.prep-dict__bad{font-size:var(--fs-sm);font-weight:700;color:var(--bad)}
.prep-dict__stage{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--sp-3);padding:var(--sp-4) 0;min-height:0}
/* 「🔊 正在报…」指示条 —— 只是在响的时候亮一下，**不参与播放** */
.prep-dict__playing{font-size:var(--fs-sm);color:var(--tx-3);opacity:.45;
  transition:all var(--t-mid) var(--ease)}
.prep-dict__playing.is-on{opacity:1;color:var(--ac-ink);font-weight:700}
.prep-dict__card{width:min(680px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:var(--sp-6);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);text-align:center}
.prep-dict__ask{font-size:clamp(28px,6vw,52px);font-weight:800;letter-spacing:-.5px;
  line-height:1.25;overflow-wrap:anywhere}
.prep-dict__ask.is-sub{font-size:clamp(20px,4vw,34px);font-weight:700;color:var(--tx-2)}
/* 默写的默认态：卡面故意什么都不给（"只报音"） */
.prep-dict__dots{font-size:clamp(28px,6vw,52px);font-weight:800;color:var(--tx-3);
  letter-spacing:.25em}
.prep-dict__pos{font-size:var(--fs-sm);color:var(--tx-3);font-weight:700}
.prep-dict__peek{display:flex;flex-direction:column;align-items:center;gap:6px;
  width:100%;padding-top:var(--sp-2);border-top:1px dashed var(--line)}
.prep-dict__en{font-family:var(--mono);font-size:clamp(20px,4vw,34px);font-weight:800;
  color:var(--ac-ink);overflow-wrap:anywhere}
.prep-dict__ph{font-family:var(--mono);font-size:var(--fs-lg);color:var(--tx-3)}
.prep-dict__segs{display:flex;justify-content:center;width:100%}
.prep-dict__last{margin-top:2px}
.prep-dict__ok{color:var(--ok);font-weight:800}
.prep-dict__no{color:var(--bad);font-weight:800}
.prep-dict__tip{font-size:var(--fs-sm);color:var(--tx-3);text-align:center;
  max-width:min(680px,100%);line-height:1.6}
/* ============================================================================
   ★「上一个词 / 下一个词」（用户原话：「'学读音'这一栏的页面要增加'上一个词'和
     '下一个词'的功能。有的时候，我可能要回看一下上一个词。」）
   ----------------------------------------------------------------------------
   ★ 位置与尺寸**照姐姐的**（web/listen.html 的 `.lnav`，那里已经有 goCard(±1)）：
     · 放在**单词卡的下方**、单独一行、左右两角（不是贴在单词两侧 ——
       英文最长（如 `look after`）在 390px 上两侧一挤就把单词压小/挤出屏幕）；
     · 两列等宽（1fr 1fr）：单手持 iPad，拇指左右各够得着一角；
     · **44px 高**：iOS 触摸目标下限，手指粗也点得中。
   ★ 行为（见 prep.js 的 dictGoCard）：**回看，出声与否由「自动报音」开关决定** ——
     开关=开：切到哪一张就报哪一张（学读音报英文 / 默写报中文）；
     开关=关：切换不出声，要听点「🔊 重播」。
     **不计对错、不写库**这一条没变；到头禁用。禁用态在这里定义，一眼看得出来
     （透明度 + 灰字 + 不响应）。
     ⚠️ 曾经写成"翻看一律不出声"的绝对规则 —— 那会让「自动报音」这个开关彻底失效
        （用户报障：「不管是开启还是关闭自动报音，切换词的时候都没有办法自动报音」），
        已按"开关说了算"改回。
   ★ 颜色全走 tokens，零硬编码；深色模式自动跟随。
   ============================================================================ */
.prep-dnav{width:min(680px,100%);display:grid;grid-template-columns:1fr 1fr;
  gap:var(--sp-2)}
.prep-dnav__b{height:44px;min-height:44px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);color:var(--tx-2);
  font-size:var(--fs-md);font-weight:700;display:flex;align-items:center;
  justify-content:center;white-space:nowrap;
  transition:all var(--t-fast) var(--ease)}
.prep-dnav__b:hover{border-color:var(--ac-line);color:var(--ac-ink)}
.prep-dnav__b:active{transform:scale(.98)}
.prep-dnav__b[disabled]{opacity:.4;color:var(--tx-3);background:var(--bg);
  cursor:default}
.prep-dnav__b[disabled]:active{transform:none}
/* 小键那一排（姐姐那儿是「🔊 听另一种语言」独占一行） */
.prep-dict__aux{flex:none;display:flex;align-items:center;justify-content:center;
  gap:var(--sp-2);flex-wrap:wrap;padding-bottom:var(--sp-3)}
.prep-dict__dirseg{flex:none}
/* ★ 底部三个大键：三列等宽（= 姐姐的 `.acts.three{grid-template-columns:1fr 1fr 1fr}`），
   家长手指粗也点得准；390px 下仍是一行三列，不折行。 */
.prep-dict__acts{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-3);padding-bottom:var(--sp-2)}
.prep-dict__big{height:64px;font-size:26px;font-weight:800;border-radius:var(--r-lg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  line-height:1.05}
.prep-dict__klabel{font-size:var(--fs-xs);font-weight:650;opacity:.75}
.prep-dict__peekbtn{height:44px}
.prep-sum{width:100%;display:flex;flex-direction:column;gap:6px}
.prep-sum__row{display:flex;justify-content:space-between;gap:var(--sp-3);
  padding:6px 2px;border-bottom:1px solid var(--line);font-size:var(--fs-md)}
.prep-sum__row b{font-family:var(--mono)}
.prep-dict__wrong{width:100%;max-height:34vh;overflow:auto;text-align:left;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);
  padding:6px 10px}
.prep-dw{display:flex;align-items:baseline;gap:var(--sp-2);padding:4px 0}
.prep-dw+.prep-dw{border-top:1px solid var(--line)}

/* ---------------------------------------------------------------- 响应式 */
/* iPad 竖屏（≤900）：按月词表的列缩一档 */
@media (max-width:900px){
  .prep-mrow__top{grid-template-columns:minmax(0,1fr) minmax(0,.9fr) 58px minmax(0,1.1fr) auto auto;
    gap:6px}
  .prep-cal__cell{min-height:46px}
}
/* 手机（≤640）：
   · 按月词表折成两行（上排英文+按钮，下排中文+音标/词性/来源）
   · 日历格子缩到能放下（7 列 + 4px 间隙在 390px 下是够的）
   · 默写的 ✓/✗ 加大（家长在手机上点，别点错） */
@media (max-width:640px){
  .prep-month,.prep-mpick{flex:1 1 auto;min-width:0}
  .prep-mrow__top{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:
    "en acts" "cn cn" "ph ph" "src src";gap:2px 8px}
  .prep-mrow__top .prep-word__en{grid-area:en}
  .prep-mrow__top .prep-word__acts{grid-area:acts;align-self:start}
  .prep-mrow__top .prep-word__cn{grid-area:cn;color:var(--tx)}
  .prep-mrow__top .prep-word__ph{grid-area:ph}
  .prep-mrow__top .prep-word__pos{grid-area:ph;justify-self:end}
  .prep-mrow__top .prep-mrow__src{grid-area:src}
  .prep-cal__cell{min-height:40px;padding:2px 1px}
  .prep-cal__d{font-size:var(--fs-sm)}
  .prep-cal__n{font-size:10px}
  .prep-cal__week{font-size:10px}
  .prep-cal__hd b{min-width:0}
  .prep-mhead b{font-size:var(--fs-lg)}
  .prep-dict__card{padding:var(--sp-4)}
  .prep-dict__big{height:58px;font-size:23px}
  .prep-dict__acts{gap:var(--sp-2)}
  .prep-dict__klabel{font-size:10px}
  .prep-dict__aux{gap:6px}
  .prep-dict__dirseg button{padding:6px 10px;font-size:var(--fs-sm)}
  /* 390px：上一个/下一个只缩间距和字号，**高度保持 44px**（触摸目标不下调） */
  .prep-dnav{gap:6px}
  .prep-dnav__b{font-size:var(--fs-sm)}
}

/* 手机（≤640）：按天明细里的词条也把拼读行挂到网格最后一行 */
@media (max-width:640px){
  .prep-word{grid-template-areas:"en acts" "cn cn" "ph pos" "ph2 ph2"}
  .prep-word__phonics{grid-area:ph2}
}