/* 单词小达人 —— 儿童友好样式（手机 / 平板 / 电脑自适应）
   ============================================================
   尺寸基准（2026-09-19 改造）：整份样式的 px 尺寸按 **19px 基准**换算成 rem，
   基准字号本身随视口缩放 —— 手机保持原样，平板/大屏整体等比放大。

     html { font-size: clamp(19px, min(3.2vw, 5vh), 32px) }

   · 竖屏手机恒为 19px、与改造前逐像素相同：视口宽 <594 或 高 <380 时，
     3.2vw 与 5vh 都到不了 19px，被下限接管（412/360 宽时 3.2vw 只有 11.5–13.2px）。
     实测：412×900 与 360×780 的 8 个界面截图逐字节一致。
   · ⚠️ 手机横屏（宽 ≫594、高 380–430）**不是** 19px，而是 19.5–21.5px（如 844×390 → 19.5、
     932×430 → 21.5）——护栏改按高度接手。旧版在 ≥800 宽时也会把 body 抬到 20px，
     所以这里同样有变化，只是幅度更小（+3%～13%）。要让横屏手机也锁死 19px：把 5vh 改成 4.2vh。
   · 平板/大屏：800 宽 → 25.6px（1.35×）；1000 宽且高 ≥640 → 32px（1.68×）封顶；
     1000×625 这类矮横屏 → 31.25px（被 5vh 压制，不是 32px）。
   · 上面那行普通 font-size: 19px 是给不认识 clamp/min 的老浏览器兜底。
   · 为什么改：原来只有一条 @media (min-width:800px)，只把 body 从 19px 抬到
     20px，其余元素全是写死的 px —— 平板上 2.4 倍大的屏幕只有 +1px 的字。

   换算规则：px ÷ 19 = rem。以后加新尺寸请沿用 rem，不要再写死 px。
   不参与缩放（保持绝对 px）：
     · 边框线宽、阴影、1px 虚线分隔（细线就该是细线）
     · 庆祝动效内部尺寸（猫/火花的大小与航线由 ui.js 按屏幕现算）
     · 「已会」小按钮那一块（用户要求：故意做小、不易误触，见文件末尾）
   ============================================================ */

html {
  font-size: 19px;                                  /* 老浏览器兜底 */
  font-size: clamp(19px, min(3.2vw, 5vh), 32px);    /* 竖屏手机=19px，平板等比放大，32px 封顶（矮横屏被 5vh 压制） */
}

:root {
  --orange: #FF8A3D;
  --orange-deep: #F06A1E;
  --yellow: #FFC94D;
  --cream: #FFF6E8;
  --teal: #2BBFA8;
  --teal-deep: #1FA48F;
  --blue: #4A90D9;
  --green: #4CAF50;
  --red: #E85D5D;
  --ink: #4A3B2A;
  --ink-soft: #8A7760;
  --card: #FFFFFF;
  --radius: 1.052631578947rem;
  --shadow: 0 4px 14px rgba(255, 138, 61, .18);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  background: var(--cream);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ===== 顶栏 ===== */
#topbar {
  background: linear-gradient(135deg, var(--orange) 0%, #FFB45E 100%);
  color: #fff;
  padding: 0.526315789474rem 0.842105263158rem 0.631578947368rem;
  padding-top: calc(0.526315789474rem + env(safe-area-inset-top));
}
.topbar-row { display: flex; align-items: center; justify-content: space-between; }
#topbar h1 { margin: 0; font-size: 1.368421052632rem; letter-spacing: 0.105263157895rem; text-shadow: 0 2px 4px rgba(0,0,0,.15); }
#statusbar { display: flex; gap: 0.421052631579rem; margin-top: 0.421052631579rem; flex-wrap: wrap; }
.chip {
  background: rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 0.157894736842rem 0.631578947368rem;
  font-size: 0.789473684211rem;
  font-weight: bold;
}

/* 同步状态圆点：绿=已同步 灰=离线 蓝=同步中 */
.dot { width: 0.736842105263rem; height: 0.736842105263rem; border-radius: 50%; display: inline-block; }
.dot-off { background: #bbb; }
.dot-ok { background: #6BE07A; box-shadow: 0 0 6px #6BE07A; }
.dot-sync { background: #4FC3F7; animation: pulse 1s infinite; }
.dot-fail { background: #FF6B6B; box-shadow: 0 0 6px #FF6B6B; }
@keyframes pulse { 50% { opacity: .35; } }

/* ===== 顶部选项卡 ===== */
#tabs {
  display: flex;
  gap: 0.947368421053rem;
  align-items: center;
  justify-content: center;
  padding: 0.526315789474rem 0.842105263158rem;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 246, 232, .92);
  backdrop-filter: blur(6px);
}
.tab {
  font-size: 1.052631578947rem;
  font-weight: bold;
  padding: 0.631578947368rem;
  border: 3px solid transparent;
  border-radius: 0.842105263158rem;
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  box-shadow: var(--shadow);
}
/* 布局：设置键 position:absolute 脱离文档流靠右；学习键是唯一在流内的项，
   被 #tabs 的 justify-content:center 在整条栏（= 页面）里真正居中。 */
.tab + .tab { position: absolute; right: 0.842105263158rem; top: 50%; transform: translateY(-50%); }
/* 学习键宽度：正文栏的一半（main 内容盒 760 − 28 = 732 → 366px，即 19.263157894737rem）。
   窄屏上 max-width 兜底，避免跟右侧设置键贴上。 */
#tab-learn { width: min(50%, 19.263157894737rem); max-width: calc(100% - 10.526315789474rem); }
#tab-learn .tab-pill { width: 100%; justify-content: center; }
/* 设置按钮里的齿轮 emoji：单独缩小，不影响「设置」两个字的大小 */
.tab-ico { font-size: 0.684210526316rem; line-height: 1; }
.tab.active { border-color: var(--orange); color: var(--orange-deep); background: #FFF1DC; }
/* 两个页签都收成贴字的胶囊：按钮本身无底无边无影，白框在内层 .tab-pill 上 */
.tab.tab-plain {
  flex: 0 0 auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.tab.tab-plain.active { background: none; border: 0; color: var(--ink-soft); }
.tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.210526315789rem;
  padding: 0.315789473684rem 0.526315789474rem;
  border: 3px solid transparent;
  border-radius: 0.736842105263rem;
  background: #fff;
  box-shadow: var(--shadow);
  color: var(--ink-soft);
}
.tab.tab-plain.active .tab-pill { border-color: var(--orange); color: var(--orange-deep); background: #FFF1DC; }

/* ===== 主体 ===== */
/* max-width 用 rem：它是「正文栏有多宽」的设计量，跟着基准一起放大（40rem = 手机上的 760px） */
main { max-width: 40rem; margin: 0 auto; padding: 0.631578947368rem 0.736842105263rem calc(1.578947368421rem + env(safe-area-inset-bottom)); }

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.947368421053rem;
  margin-bottom: 0.842105263158rem;
}
.card h2 { margin: 0 0 0.631578947368rem; font-size: 1.157894736842rem; color: var(--orange-deep); }

/* ===== 大按钮（选册/选单元/选模式） ===== */
.btn-grid { display: grid; gap: 0.631578947368rem; }
.btn-big {
  display: block;
  width: 100%;
  font-size: 1.105263157895rem;
  font-weight: bold;
  padding: 0.842105263158rem;
  border: none;
  border-radius: 0.947368421053rem;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow);
  text-align: left;
  transition: transform .12s;
}
.btn-big:active { transform: scale(.97); }
.btn-big .sub { display: block; font-size: 0.789473684211rem; color: var(--ink-soft); font-weight: normal; margin-top: 0.210526315789rem; }
/* 左侧那道彩色竖条是设计元素（不是细边框线），跟着基准放大 —— 否则平板上会细得看不见 */
.btn-book { border-left: 0.526315789474rem solid var(--orange); }
.btn-unit { border-left: 0.526315789474rem solid var(--teal); }
.btn-mode { border-left: 0.526315789474rem solid var(--blue); }
.btn-big:disabled { opacity: .45; cursor: default; }

/* 进度条 */
.bar { height: 0.631578947368rem; border-radius: 999px; background: #F0E4D2; overflow: hidden; margin-top: 0.421052631579rem; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), #7BDCB2); border-radius: 999px; transition: width .4s; }
.bar-label { font-size: 0.736842105263rem; color: var(--ink-soft); margin-top: 0.210526315789rem; }

/* 次级按钮 */
.btn {
  display: inline-block;
  font-size: 0.947368421053rem;
  font-weight: bold;
  padding: 0.526315789474rem 1.157894736842rem;
  border: none;
  border-radius: 0.736842105263rem;
  cursor: pointer;
  color: #fff;
  box-shadow: var(--shadow);
}
.btn:active { transform: scale(.96); }
.btn-orange { background: var(--orange); }
.btn-teal { background: var(--teal); }
.btn-blue { background: var(--blue); }
.btn-gray { background: #B9AC99; }
.btn-plain { background: #fff; color: var(--ink); border: 2px solid #EADCC5; box-shadow: none; }
.btn-row { display: flex; gap: 0.526315789474rem; flex-wrap: wrap; margin-top: 0.736842105263rem; }
.back-link { color: var(--ink-soft); cursor: pointer; font-size: 0.842105263158rem; margin-bottom: 0.526315789474rem; display: inline-block; text-decoration: underline; }

/* ===== 闪卡 ===== */
#flash-card {
  text-align: center;
  background: linear-gradient(180deg, #FFF9EE, #FFF);
  border: 4px solid var(--yellow);
  border-radius: 1.368421052632rem;
  padding: 1.368421052632rem 0.842105263158rem;
  margin-bottom: 0.842105263158rem;
  box-shadow: var(--shadow);
}
.flash-en { font-size: 2.736842105263rem; font-weight: bold; color: var(--orange-deep); letter-spacing: 0.052631578947rem; margin: 0.421052631579rem 0; word-break: break-word; }
.flash-zh { font-size: 1.368421052632rem; color: var(--teal-deep); margin: 0.315789473684rem 0; }
.tag-chip {
  display: inline-block;
  background: #FFF1DC;
  color: var(--orange-deep);
  border-radius: 999px;
  font-size: 0.789473684211rem;
  padding: 0.105263157895rem 0.736842105263rem;
  font-weight: bold;
}
.flash-count { color: var(--ink-soft); font-size: 0.789473684211rem; margin-top: 0.526315789474rem; }

/* 发音大按钮 */
.speak-btn {
  font-size: 1.578947368421rem;
  background: #fff;
  border: 3px solid var(--yellow);
  border-radius: 50%;
  width: 3.894736842105rem; height: 3.894736842105rem;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.speak-btn:active { transform: scale(.9); }

/* ===== 默写 ===== */
.dict-zh { font-size: 1.578947368421rem; font-weight: bold; color: var(--blue); text-align: center; margin: 0.526315789474rem 0; }
.dict-input {
  width: 100%;
  font-size: 1.473684210526rem;
  padding: 0.736842105263rem 0.842105263158rem;
  border: 3px solid var(--yellow);
  border-radius: 0.842105263158rem;
  outline: none;
  text-align: center;
  letter-spacing: 0.105263157895rem;
  font-family: inherit;
  background: #FFFDF8;
}
.dict-input:focus { border-color: var(--orange); }
.feedback { text-align: center; font-size: 1.157894736842rem; font-weight: bold; margin: 0.631578947368rem 0; min-height: 1.789473684211rem; }
.feedback.ok { color: var(--green); animation: bounce-ok .5s; }
.feedback.bad { color: var(--red); }
@keyframes bounce-ok { 30% { transform: scale(1.25); } }
.show-answer { font-size: 1.263157894737rem; color: var(--teal-deep); text-align: center; margin: 0.315789473684rem 0; }
.dict-progress { text-align: center; color: var(--ink-soft); font-size: 0.789473684211rem; margin-bottom: 0.421052631579rem; }

/* 成绩页 */
.result-big { font-size: 3.368421052632rem; text-align: center; margin: 0.315789473684rem 0; }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.526315789474rem; text-align: center; }
.result-grid .num { font-size: 1.578947368421rem; font-weight: bold; color: var(--orange-deep); }
.result-grid .lbl { font-size: 0.736842105263rem; color: var(--ink-soft); }

/* ===== 家长视图 ===== */
.pin-box { text-align: center; padding: 1.368421052632rem 0.526315789474rem; }
.pin-input {
  font-size: 1.578947368421rem; letter-spacing: 0.631578947368rem; text-align: center; width: 11.578947368421rem;
  padding: 0.526315789474rem; border: 3px solid var(--yellow); border-radius: 0.736842105263rem; outline: none;
}
.pin-input:focus { border-color: var(--orange); }
.pin-hint { color: var(--ink-soft); font-size: 0.789473684211rem; margin-top: 0.526315789474rem; }

.subtabs { display: flex; gap: 0.421052631579rem; margin-bottom: 0.736842105263rem; flex-wrap: wrap; }
.subtab {
  flex: 1; min-width: 4.736842105263rem; font-size: 0.894736842105rem; font-weight: bold; padding: 0.526315789474rem 0.315789473684rem;
  border-radius: 0.684210526316rem; border: 2px solid #EADCC5; background: #fff; color: var(--ink-soft); cursor: pointer;
}
.subtab.active { border-color: var(--orange); color: var(--orange-deep); background: #FFF1DC; }

.word-row { display: flex; gap: 0.421052631579rem; align-items: center; padding: 0.526315789474rem 0; border-bottom: 1px dashed #F0E4D2; flex-wrap: wrap; }
.word-row .en { font-weight: bold; font-size: 0.947368421053rem; min-width: 4.736842105263rem; color: var(--orange-deep); }
.word-row .tag { font-size: 0.684210526316rem; color: var(--ink-soft); background: #F5EDDD; border-radius: 999px; padding: 0.052631578947rem 0.526315789474rem; }
.word-row input[type="text"] { font-size: 0.842105263158rem; padding: 0.315789473684rem 0.421052631579rem; border: 2px solid #EADCC5; border-radius: 0.526315789474rem; outline: none; font-family: inherit; }
.word-row input[type="text"]:focus { border-color: var(--orange); }
.word-row .zh { flex: 1; min-width: 4.736842105263rem; }
.word-row .units { min-width: 6.842105263158rem; }
.mini-btn { font-size: 0.789473684211rem; font-weight: bold; padding: 0.315789473684rem 0.631578947368rem; border: none; border-radius: 0.526315789474rem; cursor: pointer; }
.mini-save { background: var(--teal); color: #fff; }
.mini-del { background: #FBE4E4; color: var(--red); }

textarea.bulk {
  width: 100%; min-height: 8.421052631579rem; font-size: 0.842105263158rem; padding: 0.526315789474rem;
  border: 2px solid #EADCC5; border-radius: 0.631578947368rem; outline: none; font-family: inherit;
}
textarea.bulk:focus { border-color: var(--orange); }
.bulk-note { font-size: 0.736842105263rem; color: var(--ink-soft); margin: 0.421052631579rem 0; }
.import-result { font-size: 0.894736842105rem; font-weight: bold; color: var(--teal-deep); margin-top: 0.526315789474rem; }

.form-row { margin-bottom: 0.736842105263rem; }
.form-row label { font-weight: bold; display: block; margin-bottom: 0.210526315789rem; }
.form-row input[type="number"], .form-row input[type="password"], .form-row input[type="text"] {
  font-size: 1rem; padding: 0.473684210526rem 0.631578947368rem; border: 2px solid #EADCC5; border-radius: 0.631578947368rem; outline: none; font-family: inherit;
}
.form-row input:focus { border-color: var(--orange); }
.form-row .tip { font-size: 0.736842105263rem; color: var(--ink-soft); }
.check-row { display: flex; gap: 0.526315789474rem; flex-wrap: wrap; margin-bottom: 0.631578947368rem; }
.check-item {
  background: #fff; border: 2px solid #EADCC5; border-radius: 0.631578947368rem; padding: 0.421052631579rem 0.736842105263rem;
  font-weight: bold; cursor: pointer; user-select: none;
}
.check-item.on { border-color: var(--teal); background: #E7F8F3; color: var(--teal-deep); }
.family-code { font-size: 1.789473684211rem; font-weight: bold; letter-spacing: 0.210526315789rem; color: var(--orange-deep); text-align: center; margin: 0.421052631579rem 0; }

/* 错题本 */
.wrong-chips { display: flex; flex-wrap: wrap; gap: 0.315789473684rem; margin: 0.421052631579rem 0; }
.wrong-chip { background: #FBE4E4; color: var(--red); border-radius: 999px; padding: 0.105263157895rem 0.631578947368rem; font-size: 0.789473684211rem; font-weight: bold; }

/* 每日目标庆祝横幅 */
#goal-banner {
  text-align: center; font-size: 1.052631578947rem; font-weight: bold; color: #fff;
  background: linear-gradient(90deg, #FFB45E, var(--orange), #FFB45E);
  border-radius: 0.736842105263rem; padding: 0.526315789474rem; margin: 0.631578947368rem 0;
  animation: banner-in .6s;
}
@keyframes banner-in { from { transform: scale(.8); opacity: 0; } }

/* ===== 弹窗 ===== */
#modal-root { display: none; }
#modal-root.open {
  display: flex; position: fixed; inset: 0; z-index: 150;
  background: rgba(74, 59, 42, .45); align-items: center; justify-content: center; padding: 1.052631578947rem;
}
.modal-box {
  background: #fff; border-radius: 1.157894736842rem; padding: 1.157894736842rem; max-width: 25.263157894737rem; width: 100%;
  box-shadow: 0 8px 30px rgba(0,0,0,.25); text-align: center;
}
.modal-box h3 { margin: 0 0 0.526315789474rem; color: var(--orange-deep); font-size: 1.157894736842rem; }
.modal-box p { margin: 0.421052631579rem 0; }

/* ===== 大屏微调 =====
   这里原来有 body { font-size: 20px } 和 .flash-en { font-size: 64px }：基准缩放接管
   「字号多大」之后，它们只会在平板上把字号又压回去（20px < 32px），已删除。
   这里现在只管「排几列」。 */
@media (min-width: 800px) {
  .btn-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .btn-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ===== 猫猫奖励 ===== */
.chip svg, .chip-star svg { width: 1.15em; height: 1.15em; vertical-align: -0.22em; }
/* 默一默界面里的猫猫数（原在顶部状态栏，现只在这里显示；0.789473684211rem → 1.578947368421rem，比顶部大一倍） */
.dict-cats { text-align: center; margin: 0.105263157895rem 0 0.526315789474rem; }
.dict-cats .chip { font-size: 1.578947368421rem; }
.chip-today { cursor: pointer; font: inherit; }
/* ===== 庆祝动效：猫猫烟花式掠角飞行 + 火花 =====
   坐标由 ui.js 算好后写进 CSS 变量（--x0/--y0/--x1/--y1/--x2/--y2…），#celebration 是
   fixed inset:0 → 这些坐标就是视口坐标；pointer-events:none 保证不吃点击（挡住点击也是挡字）。
   0% / 50% / 100% = 起点 / 掠角点 / 终点，起点与终点在屏幕之外 → 猫是「飞进来、再飞出去」。
   --omid = 中段透明度：由 ui.js 按「这条路会压到字多久」算好（压得越久越透），使遮挡当量
   （时长 × 不透明度）有上界；完全不压字的路径 --omid:1 —— 整只猫清清楚楚。
   ⚠️ 这一块的尺寸全部保持 px，不参与基准缩放：猫与火花的大小/航线本来就是 ui.js 按
   屏幕尺寸现算的（pure.js 的 randFlyPath），跟界面基准字号无关。 */
#celebration { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 140; }
.confetti-cat {
  position: absolute; left: 0; top: 0;
  width: var(--size, 84px); height: var(--size, 84px);
  margin-left: calc(var(--size, 84px) / -2); margin-top: calc(var(--size, 84px) / -2);
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(255, 205, 90, .6));
  animation: cat-fly var(--dur, 760ms) cubic-bezier(.25, .6, .3, 1) both;
}
.confetti-cat svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
@keyframes cat-fly {
  0% { left: var(--x0); top: var(--y0); transform: rotate(var(--r0, 0deg)) scale(var(--k0, 1)); opacity: 0; }
  10% { opacity: var(--omid, 1); }
  50% { left: var(--x1); top: var(--y1); transform: rotate(var(--r1, 0deg)) scale(var(--k1, 1)); }
  90% { opacity: var(--omid, 1); }
  100% { left: var(--x2); top: var(--y2); transform: rotate(var(--r2, 0deg)) scale(var(--k1, 1)); opacity: 0; }
}
/* 光晕拖尾：走同一条轨迹、整体延后 45ms 出发 → 看上去像猫身后拖着一条光带。
   亮度同样乘 --omid：拖尾也是「会盖到字的东西」，猫被压暗时它必须跟着淡下去
   （否则手机上满屏卡片那种布局里，猫淡到 0.24、光带还稳稳 0.45 盖在字上）。 */
.confetti-trail {
  position: absolute; left: 0; top: 0;
  width: var(--size, 84px); height: var(--size, 84px);
  margin-left: calc(var(--size, 84px) / -2); margin-top: calc(var(--size, 84px) / -2);
  border-radius: 50%; opacity: 0; filter: blur(4px);
  background: radial-gradient(circle, rgba(255, 214, 102, .5), rgba(255, 214, 102, 0) 70%);
  animation: cat-trail var(--dur, 760ms) ease-in-out both;
}
@keyframes cat-trail {
  0% { left: var(--x0); top: var(--y0); transform: scale(.6); opacity: 0; }
  14% { opacity: calc(.45 * var(--omid, 1)); }
  86% { opacity: calc(.45 * var(--omid, 1)); }
  100% { left: var(--x2); top: var(--y2); transform: scale(1.15); opacity: 0; }
}
/* 炸开的火花：一圈扩散光环 + n 个径向飞出的小点（--ax/--ay = 飞多远，--sc = 颜色，--sd = 时长） */
.spark-burst { position: absolute; width: 0; height: 0; }
.spark-burst::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  border: 3px solid rgba(255, 214, 102, .9);
  animation: spark-ring 520ms ease-out both;
}
.spark {
  position: absolute; left: 0; top: 0;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--sc, #FFC107); box-shadow: 0 0 8px var(--sc, #FFC107);
  animation: spark-out var(--sd, 640ms) cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes spark-out {
  0% { transform: translate(0, 0) scale(.4); opacity: 1; }
  70% { opacity: .9; }
  100% { transform: translate(var(--ax, 0px), var(--ay, 0px)) scale(.2); opacity: 0; }
}
@keyframes spark-ring {
  0% { transform: scale(.3); opacity: .9; }
  100% { transform: scale(6); opacity: 0; }
}

/* ===== 闪卡例句 ===== */
.flash-sent { margin-top: 0.736842105263rem; font-size: 1.052631578947rem; color: var(--ink-soft); line-height: 1.7; }
.flash-sent .speak-btn { font-size: 1.052631578947rem; margin-left: 0.421052631579rem; vertical-align: middle; }
.sent-mark { margin-right: 0.210526315789rem; }

/* ===== 拼一拼 ===== */
.pz-slots { display: flex; flex-wrap: wrap; gap: 0.526315789474rem; justify-content: center; min-height: 3.368421052632rem;
  padding: 0.736842105263rem; border: 2px dashed var(--orange-soft, #FFD9B3); border-radius: 0.842105263158rem; margin: 0.631578947368rem 0; }
.pz-slot { min-width: 2.421052631579rem; height: 2.421052631579rem; line-height: 2.421052631579rem; text-align: center; font-size: 1.368421052632rem; font-weight: 700;
  border-radius: 0.631578947368rem; background: #FFF4E8; color: var(--orange-deep, #C2410C); }
.pz-slot.filled { background: var(--orange-deep, #C2410C); color: #fff; }
.pz-pool { display: flex; flex-wrap: wrap; gap: 0.631578947368rem; justify-content: center; margin-top: 0.315789473684rem; }
.pz-tile { min-width: 3.052631578947rem; height: 3.052631578947rem; padding: 0 0.526315789474rem; font-size: 1.473684210526rem; font-weight: 700;
  border: none; border-radius: 0.736842105263rem; background: var(--teal, #2AA48A); color: #fff; cursor: pointer;
  box-shadow: 0 0.157894736842rem 0 rgba(0,0,0,.15); transition: transform .1s; }
/* 按下去的那 3px 位移与上面的方块厚度是同一对量，必须同步换算，否则按下时方块会「脱开」 */
.pz-tile:active { transform: translateY(0.157894736842rem); box-shadow: none; }
.pz-tile.used { background: #E5E7EB; color: #9CA3AF; box-shadow: none; cursor: default; }
.pz-tile.wrong { background: #EF4444; animation: pzShake .25s; }
@keyframes pzShake { 25% { transform: translateX(-0.315789473684rem); } 75% { transform: translateX(0.315789473684rem); } }

/* ===== 词库管理例句列 ===== */
.word-row .sent { width: 30%; }

/* ===== 已会（卡片右上角的「已会 ✓」小按钮 / 二次确认 / 已会清单） =====
   ⚠️ 这一块的尺寸**故意不参与基准缩放**，保持绝对 px：
   用户明确要求「不要太大和太容易按到，防止误触」——主按钮在手机上 21px 字 / 87px 高，
   平板上会放大到约 35px 字 / 146px 高，而这个按钮必须仍然是「最小、偏、不抢眼」的那一个，
   所以它在平板上会比别的东西相对更小 —— 这正是要的效果。改这里之前先问用户。 */
.known-row { display: flex; justify-content: flex-end; margin-bottom: 6px; }
/* 13px + 3px 内边距 → 总高约 22px，虚线浅灰边框 + 灰字，明显不抢眼。**不要放大**。 */
.known-btn { font-size: 13px; font-weight: normal; color: var(--ink-soft); background: #fff; border: 1px dashed #DCC9AC; border-radius: 999px; padding: 3px 10px; cursor: pointer; opacity: .78; }
.known-btn:active { transform: scale(.94); }
/* 已经标过已会的词又翻回这张卡片时，占位一行灰字（不留一个点了没反应的按钮）——
   跟上面的小按钮同一个位置、两种状态，字号必须一致，所以也保持 13px */
.known-done { font-size: 13px; color: var(--ink-soft); opacity: .78; }
/* 已会清单每一行：单词 + 中文 + 🔊 + 「↩ 放回学习」（这些不是易误触的小角标，正常参与缩放） */
.known-say { font-size: 0.789473684211rem; background: #fff; border: 2px solid var(--yellow); border-radius: 50%; width: 1.789473684211rem; height: 1.789473684211rem; cursor: pointer; }
.known-item { display: flex; align-items: center; gap: 0.526315789474rem; padding: 0.473684210526rem 0; border-bottom: 1px dashed #F0E4D2; }
.known-item .known-en { font-size: 1.052631578947rem; font-weight: bold; color: var(--orange-deep); }
.known-item .known-zh { font-size: 0.789473684211rem; color: var(--ink-soft); margin-right: auto; }
/* 清单页那条真正的操作按钮（「↩ 放回学习」）：不复用角落里那个 13px 小按钮的样式（.known-btn 是「故意做小」的） */
.known-item .known-forget { font-size: 0.789473684211rem; padding: 0.315789473684rem 0.736842105263rem; }
/* 选模式页「已会的单词」入口下面的小字说明 */
.mode-note { color: var(--ink-soft); font-size: 0.736842105263rem; margin-top: 0.421052631579rem; }