/* ================= 外语学习（2026-10-20 v2 课程流版） =================
   设计基调：像一本教材，不像营销页。
   白底细边框、课程表行式布局、品牌紫只出现在动作与进度上。
   动画全部 transform/opacity，保证 60fps。 */

.learn-page { max-width: 1080px; min-height: 60vh; padding: 30px 20px 70px; margin: 0 auto; }
/* 口语练习页（非全屏）：提示条 fixed 在导航下方（63px 起，高约 41px），
   会盖住 .learn-page 顶部 30px 的 padding 区 + 第一行内容 ——
   所以顶部避让要加上提示条高度。离开练习页时 learn.js 把 --et-kbd-h 清 0，自动恢复。 */
.learn-page:has(.quizbox) { padding-top: calc(30px + var(--et-kbd-h, 0px)); }
@supports not selector(:has(*)) {
  /* 老浏览器兜底：练习页 padding-top 与大厅一致，靠 JS 的 kbdTipSync 补 */
  .learn-page { padding-top: calc(30px + var(--et-kbd-h, 0px)); }
}
.learn-page h1 { font-size: 26px; margin: 0 0 6px; }
.learn-sub { color: var(--ink-2); font-size: 14px; margin: 0 0 22px; }

/* ================= 全屏沉浸模式（对齐参考站点的练习布局） =================
   body.learn-fs 时：官网导航、公告条、页脚、悬浮元素全部藏掉，学习页铺满视口，
   练习卡加宽到 900px。Esc 或右上角按钮退出。
   ⚠️ 曾经只藏了 .nav，但 nav 内部还有 .site-switch / .nav-actions / 汉堡菜单，
   窄屏展开时 .nav-links 会以 drop-down 形式单独浮在页面上（position 脱离 .nav），
   所以这里必须逐个点名藏掉，并且要放在 style.css 之后（本文件已后加载）。 */
body.learn-fs .nav,
body.learn-fs .nav-inner,
body.learn-fs .nav-links,
body.learn-fs .nav-actions,
body.learn-fs .nav-toggle,
body.learn-fs .site-switch,
body.learn-fs .brand { display: none !important; }
/* 2026-10-21：页脚在 main#app 之外（footer.footer.site-footer，高约 317px），
   上面那条 .view:not(#view-learn) 管不到它 → 全屏时页脚仍露在练习卡下方，
   既占掉半屏又让页面多出一整段可滚范围（实测 scrollHeight 1376 / 视口 900）。
   必须一并藏掉。 */
body.learn-fs footer,
body.learn-fs .site-footer { display: none !important; }
/* 顶部固定了快捷键条：给内容留出避让高度，否则第一行会被盖住。
   --et-kbd-h 由 learn.js 按实际渲染高度写入，换行/缩放都能自适应。 */
/* 顶部固定了快捷键条：给内容留出避让高度，否则第一行会被盖住。
   --et-kbd-h 由 learn.js 按实测渲染高度写入（含换行/缩放）。
   兜底值 41px 与默认单行高度一致，避免 JS 还没跑到时闪一下。 */
body.learn-fs { background: #faf9fe; overflow-x: hidden; }
body.learn-fs main#app { padding: var(--et-kbd-h, 41px) 0 0 !important; }
body.learn-fs .view:not(#view-learn) { display: none !important; }
body.learn-fs .learn-page {
  max-width: 1180px; min-height: calc(100vh - var(--et-kbd-h, 41px));
  padding: 22px 26px 40px; margin: 0 auto;
}
body.learn-fs #view-learn { min-height: calc(100vh - var(--et-kbd-h, 41px)); padding: 0 !important; margin: 0 !important; }
body.learn-fs .quizbox { max-width: 900px; padding: 34px 40px 30px; border-radius: 20px; }

/* 全屏/退出按钮：固定在右上角，练习中随时可点。
   非全屏时导航栏（62px / 折叠态 58px）就在顶部，按钮要压在它下方，
   否则会跟「国际站 / 汉堡菜单」重叠（Pad 1024 实测踩过）。 */
.lf-btn {
  position: fixed; top: 74px; right: 16px; z-index: 70;
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 15px; border-radius: 999px;
  border: 1px solid #e2d9f5; background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  color: #5b4a8a; font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; box-shadow: 0 4px 16px rgba(74,63,107,.10);
  transition: border-color .18s, color .18s, transform .18s, top .18s;
}
.lf-btn:hover { border-color: var(--brand, #7454c6); color: var(--brand, #7454c6); transform: translateY(-1px); }
.lf-btn .l-ico { width: 15px; height: 15px; }
/* 全屏时导航已藏，按钮回到最顶 */
body.learn-fs .lf-btn { top: 14px; right: 18px; background: #fff; }
@media (max-width: 1200px) { .lf-btn { top: 70px; } }

@media (max-width: 720px) {
  .lf-btn { top: 66px; right: 10px; height: 34px; padding: 0 11px; font-size: 12px; }
  .lf-btn span { display: none; }
  body.learn-fs .learn-page { padding: 16px 14px 80px; }
  body.learn-fs .quizbox { padding: 22px 16px 20px; }
  body.learn-fs .lf-btn { top: 8px; right: 8px; }
}

/* ---------- 入场动画 ---------- */
@keyframes popIn {
  0% { transform: scale(.92) translateY(6px); opacity: 0; }
  60% { transform: scale(1.015) translateY(0); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.pop-in { animation: popIn .38s cubic-bezier(.22,1.1,.36,1) both; }
@keyframes shakeX {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
.shake { animation: shakeX .45s ease both; }

/* ---------- 智能选课 ---------- */
.ob-wrap { max-width: 720px; margin: 10px auto 0; }
.ob-skip { text-align: right; margin: 2px 0 10px; }
.ob-skip:hover { cursor: pointer; color: var(--brand); }
.ob-body { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 26px 28px; }
.ob-dots { display: flex; gap: 6px; margin-bottom: 18px; }
.ob-dots i { width: 26px; height: 5px; border-radius: 3px; background: #e8e4f2; transition: background .2s; }
.ob-dots i.on { background: var(--brand); }
.ob-q { font-size: 17px; font-weight: 700; margin-bottom: 14px; }
.ob-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ob-grid-w { grid-template-columns: repeat(2, 1fr); }
.ob-opt {
  border: 1px solid var(--line); background: #fff; border-radius: 12px; cursor: pointer;
  font-family: inherit; text-align: left; padding: 13px 14px; transition: border-color .15s, transform .12s;
}
.ob-opt:hover { border-color: var(--brand); transform: translateY(-1px); }
.ob-opt.on { border-color: var(--brand); background: #f6f3fc; }
.ob-opt b { display: block; font-size: 15px; color: var(--ink); }
.ob-opt span { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }
.ob-back { margin-top: 16px; border: 0; background: none; color: var(--ink-2); cursor: pointer; font-family: inherit; font-size: 13.5px; }
.ob-back:hover { color: var(--brand); }
.ob-plan { border-top: 1px dashed var(--line); padding-top: 20px; margin-top: 4px; }
.ob-plan-head { font-size: 13px; color: var(--brand); font-weight: 700; letter-spacing: 2px; }
.ob-plan-name { font-size: 24px; font-weight: 700; margin: 6px 0 14px; }
.ob-plan-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ob-plan-rows span { font-size: 14.5px; }
.ob-plan-rows i { font-style: normal; color: var(--ink-2); display: inline-block; width: 44px; }
.ob-plan-tip { font-size: 13px; color: var(--ink-2); background: var(--bg); border-radius: 8px; padding: 10px 12px; line-height: 1.7; }
.ob-plan-ops { display: flex; gap: 10px; margin-top: 16px; }

/* ---------- 方案条 ---------- */
.plan-bar {
  display: flex; align-items: center; gap: 12px; background: #f6f3fc;
  border: 1px solid #e2d9f5; border-radius: 12px; padding: 12px 16px; margin-bottom: 20px;
}
.plan-bar .pb-ico { font-size: 18px; }
.plan-bar .pb-ico .l-ico { width: 17px; height: 17px; color: var(--brand); }

/* ---------- SVG 图标通用对齐 ---------- */
.l-ico { vertical-align: -2px; }
.btn-speak .l-ico, .btn-primary .l-ico, .sp-notebtn .l-ico { margin-right: 5px; }
.plan-bar .pb-main { flex: 1; min-width: 0; }
.plan-bar .pb-main b { display: block; font-size: 14.5px; }
.plan-bar .pb-main span { font-size: 12.5px; color: var(--ink-2); }

/* ---------- 语言切换：一行下划线式 tab ---------- */
.learn-langs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.learn-langs button {
  border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 15px; color: var(--ink-2); padding: 10px 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.learn-langs button.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

/* ---------- 词书行 ---------- */
.learn-book {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 10px; cursor: pointer; font-family: inherit;
  transition: border-color .15s, transform .12s;
}
.learn-book:hover { border-color: var(--brand); transform: translateY(-1px); }
.learn-book .bk-exam {
  flex: none; width: 76px; text-align: center; font-weight: 700; font-size: 15px;
  color: var(--brand); border: 1px solid var(--brand); border-radius: 8px; padding: 8px 4px;
}
.learn-book .bk-main { flex: 1; min-width: 0; }
.learn-book .bk-main b { font-size: 16px; color: var(--ink); }
.learn-book .bk-main span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.learn-book .bk-go { flex: none; color: var(--brand); font-size: 14px; }

/* ---------- 课表 ---------- */
.learn-back { display: inline-block; margin-bottom: 14px; color: var(--ink-2); font-size: 14px; text-decoration: none; }
.learn-back:hover { color: var(--brand); }
.learn-ch {
  display: flex; align-items: center; gap: 14px; padding: 13px 6px;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.learn-ch:hover { background: #fafafd; }
.learn-ch .no { flex: none; width: 44px; font-size: 20px; font-weight: 700; color: #c9c2dc; font-variant-numeric: tabular-nums; }
.learn-ch .nm { flex: 1; font-size: 15px; color: var(--ink); }
.learn-ch .cnt { flex: none; font-size: 13px; color: var(--ink-2); }
.learn-ch .dot { flex: none; display: flex; gap: 3px; }
.learn-ch .dot i { width: 6px; height: 6px; border-radius: 50%; background: #e3def0; }
.learn-ch .dot i.on { background: var(--brand); }

/* ---------- 学习屏头 / 阶段指示 ---------- */
.learn-study-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.learn-study-head .title { font-weight: 700; font-size: 17px; }
.learn-study-head .pos { font-size: 13px; color: var(--ink-2); }
.zh-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-2); cursor: pointer; user-select: none; }
.zh-toggle input { accent-color: var(--brand); }
.stage-bar { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.stage {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; transition: all .2s;
}
.stage i { width: 7px; height: 7px; border-radius: 50%; background: #ddd6ec; transition: background .2s; }
.stage.on { border-color: var(--brand); color: var(--brand); font-weight: 600; background: #f6f3fc; }
.stage.on i { background: var(--brand); animation: stagePulse 1.2s ease-in-out infinite; }
.stage.done { color: #2fa463; border-color: #bfe3cf; }
.stage.done i { background: #2fa463; }
@keyframes stagePulse {
  0%,100% { transform: scale(1); } 50% { transform: scale(1.5); }
}
.stage-splash {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.82); backdrop-filter: blur(4px);
}
.stage-splash-in b {
  font-size: 30px; font-weight: 700; color: var(--ink);
  border-bottom: 3px solid var(--brand); padding-bottom: 8px;
}

/* ---------- 学单词：流程卡 ---------- */
.quizbox { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px; max-width: 640px; margin: 0 auto; position: relative; }
.quizbox .q-tip { font-size: 13px; color: var(--ink-2); margin-bottom: 12px; }
.quizbox .q-zh { font-size: 22px; font-weight: 700; margin-bottom: 16px; }
.q-zh-row { display: flex; align-items: baseline; gap: 10px; }
.q-zh-row > span:first-child { flex: 1; }
.q-fig { margin-bottom: 10px; }
.flow-fig { display: flex; justify-content: center; margin: 6px 0 16px; }
.tile {
  flex: none; width: 68px; height: 68px; border-radius: 14px;
  background: linear-gradient(145deg, #f3effb, #e9e2f8);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 700; color: var(--brand); overflow: hidden;
}
.tile-big { width: 104px; height: 104px; border-radius: 20px; font-size: 58px; box-shadow: 0 10px 24px rgba(116,84,198,.16); }
.flow-zh { font-size: 20px; font-weight: 700; text-align: center; display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; }
.flow-zh .pos { color: var(--ink-2); font-style: italic; font-weight: 400; font-size: 14px; }
.flowcard .enline { margin-top: 8px; font-size: 13.5px; color: var(--ink-2); text-align: center; }
.flow-word { font-size: 36px; font-weight: 700; text-align: center; line-height: 1.2; word-break: break-word; }
.flowcard .ipa { color: var(--ink-2); font-size: 15px; margin: 6px 0 2px; text-align: center; }
.flow-ops { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.flow-ops .btn-primary, .flow-ops .btn-ghost { margin-left: auto; }
.flow-ops button:first-child { margin-left: 0; }
.btn-speak {
  border: 1px solid var(--line); background: #fff; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; color: var(--ink); padding: 8px 18px; transition: border-color .15s, color .15s;
}
.btn-speak:hover { border-color: var(--brand); color: var(--brand); }
.btn-mini { padding: 4px 11px; font-size: 12.5px; }
.flow-sent { font-size: 19px; line-height: 1.8; text-align: center; padding: 6px 2px 2px; }
.flow-sent .mask {
  display: inline-block; min-width: 84px; border: 0; border-bottom: 2.5px solid var(--brand);
  text-decoration: none; background: linear-gradient(180deg, transparent 78%, #efe9fb 0);
}
.flow-sentzh { text-align: center; color: var(--ink-2); font-size: 13.5px; margin: 8px 0 18px; }
.flow-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.flow-opt {
  border: 1.5px solid var(--line); background: #fff; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 16.5px; font-weight: 600; color: var(--ink); padding: 14px 12px;
  transition: border-color .15s, background .15s, transform .12s;
}
.flow-opt:hover:enabled { border-color: var(--brand); transform: translateY(-1px); }
.flow-opt:disabled { cursor: default; }
.flow-opt.ok { border-color: #2fa463; background: #eef9f2; color: #217a49; }
.flow-opt.bad { border-color: var(--danger); background: #fdf1f1; color: var(--danger); }
@keyframes optPop {
  0% { transform: scale(1); } 45% { transform: scale(1.09); } 70% { transform: scale(.97); } 100% { transform: scale(1); }
}
.flow-opt.pop-ok { animation: optPop .55s cubic-bezier(.3,1.4,.4,1) both; }

/* 对勾描边 stamp */
.ok-stamp {
  position: absolute; top: 50%; left: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px;
  pointer-events: none; animation: stampIn .5s cubic-bezier(.3,1.3,.4,1) both;
}
.ok-stamp svg { width: 100%; height: 100%; stroke: #2fa463; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 6px 14px rgba(47,164,99,.35)); }
.ok-stamp circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: dash .45s ease-out forwards; }
.ok-stamp path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: dash .3s .25s ease-out forwards; }
@keyframes stampIn { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: .96; } }
@keyframes dash { to { stroke-dashoffset: 0; } }

/* 纸屑 */
.cf-host { position: absolute; left: 50%; top: 38%; width: 0; height: 0; pointer-events: none; z-index: 5; }
.cf {
  position: absolute; width: 8px; height: 12px; border-radius: 2px; opacity: 1;
  animation: cfFly .72s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes cfFly {
  0% { transform: translate(0,0) rotate(0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.7); opacity: 0; }
}

/* 跟读内嵌 */
.shadow-box { margin: 4px 0 2px; }
.shadow-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.shadow-state { font-size: 13px; color: var(--ink-2); }
.shadow-state a { color: var(--brand); }
.shadow-result { text-align: center; font-weight: 700; font-size: 20px; margin-top: 8px; animation: popIn .3s both; }
.shadow-result.ok { color: #2fa463; }
.shadow-result.low { color: var(--danger); }

/* ---------- 练习通用 ---------- */
.quiz-prog { display: flex; gap: 4px; margin-bottom: 16px; }
.quiz-prog i { flex: 1; height: 4px; border-radius: 2px; background: #eceaf2; transition: background .2s; }
.quiz-prog i.ok { background: #7fc9a4; }
.quiz-prog i.bad { background: #e89b9b; }
@keyframes curPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.quiz-prog i.cur { background: var(--brand); animation: curPulse 1.1s ease-in-out infinite; }
.quiz-ops { display: flex; gap: 10px; margin-top: 16px; align-items: center; }
.quiz-ops .hint-txt { flex: 1; font-size: 13px; color: #8a76c9; }
.quiz-feed { margin-top: 12px; font-size: 14px; min-height: 20px; }
.quiz-feed.ok { color: #2fa463; }
.quiz-feed.bad { color: var(--danger); }
.big-input {
  width: 100%; box-sizing: border-box; font-size: 27px; line-height: 1.65;
  padding: 22px 24px; min-height: 104px;
  border: 2px solid #e4ddf2; border-radius: 16px; font-family: inherit; outline: none;
  background: #fff; color: var(--ink);
  transition: border-color .18s, box-shadow .18s;
}
.big-input::placeholder { color: #b7b0c9; font-size: 20px; }
.big-input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(116,84,198,.13); }
.dict-input { min-height: 124px; }
.big-input.ok { border-color: #2fa463; }
.big-input.bad { border-color: var(--danger); }

/* ---------- 听写：顶部线索 + 词槽 ---------- */
.dict-lead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dict-zh { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; }
.dict-audio { margin-bottom: 14px; }
.slots-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: flex-end; margin-bottom: 14px; padding: 10px 12px; background: var(--bg); border-radius: 10px; }
.slot {
  display: inline-block; height: 34px; border-bottom: 2px solid #cfc7e2;
  font-size: 15.5px; line-height: 32px; text-align: center; color: var(--ink);
  transition: border-color .15s, background .15s; overflow: hidden; white-space: nowrap;
}
.slot.cur { border-color: var(--brand); background: #f6f3fc; animation: curPulse 1.1s infinite; }
.slot.filled { border-color: #9b86d6; }
.punct { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 34px; }

/* ---------- 句子组成 ---------- */
.sentslots { min-height: 52px; border: 1px dashed var(--line); border-radius: 10px; padding: 9px; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sentslots.ok { border-color: #2fa463; }
.sentslots.bad { border-color: var(--danger); }
.bankrow { display: flex; flex-wrap: wrap; gap: 6px; }
.bankrow button {
  border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 14.5px; color: var(--ink); padding: 7px 12px; transition: border-color .15s;
}
.bankrow button:hover:enabled { border-color: var(--brand); color: var(--brand); }
.bankrow button:disabled { opacity: .35; cursor: default; }

/* ---------- 完成页 / 星星 ---------- */
.done { text-align: center; max-width: 480px; margin: 30px auto; position: relative; }
.done .big { font-size: 46px; font-weight: 700; color: var(--brand); }
.done p { color: var(--ink-2); font-size: 14px; }
.done .ops { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.stars { display: flex; justify-content: center; gap: 10px; margin-bottom: 6px; }
.star { color: #e3def0; transform: scale(.5); opacity: .6; }
.star .l-ico { width: 30px; height: 30px; display: block; }
.star.on { color: #f5b942; animation: starPop .5s cubic-bezier(.3,1.5,.4,1) forwards; text-shadow: 0 4px 12px rgba(245,185,66,.4); }
@keyframes starPop {
  0% { transform: scale(.3) rotate(-20deg); opacity: 0; }
  70% { transform: scale(1.25) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ---------- 错题本 ---------- */
.wrong-item {
  display: flex; align-items: center; gap: 14px; padding: 13px 6px; border-bottom: 1px solid var(--line);
}
.wrong-item .w { flex: none; font-size: 16px; font-weight: 700; min-width: 120px; }
.wrong-item .zh { flex: 1; color: var(--ink-2); font-size: 13.5px; }
.wrong-item .n { flex: none; font-size: 12px; color: var(--danger); border: 1px solid #f2d4d4; border-radius: 999px; padding: 2px 9px; }
.wrong-item .ops { flex: none; display: flex; gap: 8px; }

/* ---------- 指南 ---------- */
.learn-guide {
  border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 26px;
  background: #fcfbfe;
}
.learn-guide h3 { margin: 0 0 10px; font-size: 15px; }
.learn-guide ol { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 14px; line-height: 2; }
.learn-guide .fold { color: var(--brand); cursor: pointer; font-size: 13px; }

/* ---------- quizbox 内普通输入框（错题重测等；sp-slot 内联词框除外） ---------- */
.quizbox input { font-family: inherit; }
.quizbox input:not(.big-input):not(.sp-slot) {
  width: 100%; box-sizing: border-box; font-size: 20px; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 12px; outline: none; transition: border-color .15s;
}
.quizbox input:not(.big-input):not(.sp-slot):focus { border-color: var(--brand); }
.quizbox input.ok { border-color: #2fa463; }
.quizbox input.bad { border-color: var(--danger); }

/* ---------- 精选口语（看中文写句子） ---------- */
.sp-topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 16px; margin-bottom: 16px;
}
.sp-timer { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sp-timer .l-ico { margin-right: 4px; color: var(--brand); }
.sp-progress { font-size: 14.5px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.sp-topic-tag {
  font-size: 12.5px; color: var(--brand); background: #f6f3fc;
  border: 1px solid #e2d9f5; border-radius: 999px; padding: 3px 12px;
}
.sp-star {
  margin-left: auto; border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 22px; color: #c9c2dd; line-height: 1; transition: color .15s, transform .12s;
}
.sp-star:hover { transform: scale(1.15); }
.sp-star.on { color: #f5a623; }

.sp-star { margin-left: auto; }
.sp-star .l-ico { width: 20px; height: 20px; display: block; }
.sp-zh-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 16px; }
.sp-zh {
  border: 0; background: none; cursor: pointer; font-family: inherit; padding: 0;
  font-size: 21px; font-weight: 700; line-height: 1.6; color: var(--ink);
  border-bottom: 1.5px dashed #c9c2dd;
}
.sp-zh:hover { color: var(--brand); border-bottom-color: var(--brand); }
.sp-notebtn { font-size: 12.5px; padding: 4px 10px; }
/* ---------- 句子配图：放在输入区上方，横幅裁切 ---------- */
.sp-pic {
  margin: 0 auto 16px; border-radius: 14px; overflow: hidden;
  border: 1px solid #ece6f8; background: #f1edf9;
  max-width: 100%; box-shadow: 0 6px 20px rgba(74,63,107,.08);
}
.sp-pic img {
  display: block; width: 100%; height: 200px; object-fit: cover;
}
@media (min-width: 1080px) { .sp-pic img { height: 260px; } }
@media (max-width: 720px) { .sp-pic img { height: 150px; } }
.sp-blanks {
  display: flex; align-items: flex-end; justify-content: center;
  flex-wrap: wrap; gap: 14px 10px;
  background: linear-gradient(180deg, #fbfaff, #f6f3fc);
  border: 1px solid #ece6f8; border-radius: 18px;
  padding: 30px 26px 24px; margin-bottom: 14px;
  box-shadow: 0 4px 18px rgba(74,63,107,.05) inset;
}
/* 每个词位：固定「输入框行 + 成分行」两行网格，行高统一 → 所有输入框自然落在同一水平线 */
.sp-slotwrap {
  display: grid; grid-template-rows: auto 18px; justify-items: center;
  align-items: end; row-gap: 6px; min-width: 56px;
}
.sp-slotwrap > .sp-role { grid-row: 2; align-self: start; }
.sp-slot {
  display: block; box-sizing: border-box; text-align: center;
  border: 0; border-bottom: 3px solid #b9aeda; border-radius: 10px 10px 0 0;
  padding: 8px 14px 10px; outline: none; background: #fff;
  font-family: inherit; font-size: 30px; font-weight: 700; letter-spacing: 1px; color: var(--ink);
  caret-color: var(--brand); min-width: 88px; max-width: 320px;
  box-shadow: 0 -1px 0 rgba(74,63,107,.04);
  transition: border-color .18s, color .18s, background .18s, box-shadow .18s, transform .18s;
}
.sp-slot::-ms-clear { display: none; }
.sp-slot:focus {
  border-bottom-color: var(--brand); background: #fff;
  box-shadow: 0 8px 22px rgba(116,84,198,.16);
  transform: translateY(-1px);
}
.sp-slot:disabled { opacity: 1; }
.sp-slot.ok { border-bottom-color: #2fa463; color: #249055; background: #f0faf4; }
.sp-slot.bad { border-bottom-color: var(--danger); color: var(--danger); background: #fdf2f2; }
.sp-slot.hint { border-bottom-color: var(--brand); color: var(--brand); background: #f6f3fc; }
/* 判完的题不能再手打：禁用态也保持可读（不要浏览器默认灰化） */
.sp-slot:disabled { -webkit-text-fill-color: currentColor; cursor: default; }
.sp-role { font-size: 13px; color: #8b84a3; white-space: nowrap; letter-spacing: .3px; }
.sp-punct { font-size: 30px; font-weight: 700; color: #b6aecb; padding-bottom: 38px; line-height: 1; }
.sp-count { font-size: 12.5px; color: var(--ink-2); margin-bottom: 14px; }

.sp-eval {
  border-top: 1px dashed var(--line); margin-top: 14px; padding-top: 14px;
}
.sp-eval .shadow-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sp-score { font-size: 14px; font-weight: 700; margin-top: 8px; }
.sp-score.ok { color: #2fa463; }
.sp-score.low { color: var(--danger); }

/* ---------- 句子弹层：注释 / 用法 / 朗读 ---------- */
.sp-modal-ov {
  position: fixed; inset: 0; z-index: 90; background: rgba(24, 18, 42, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.sp-modal {
  position: relative; background: var(--card); border-radius: 16px; box-shadow: 0 18px 50px rgba(24,18,42,.25);
  max-width: 520px; width: 100%; padding: 24px 26px 22px; max-height: 82vh; overflow: auto;
}
.sp-modal-x {
  position: absolute; top: 12px; right: 12px; border: 0; background: none; cursor: pointer;
  color: var(--ink-2); padding: 6px; line-height: 0; border-radius: 8px;
}
.sp-modal-x:hover { color: var(--ink); background: var(--bg); }
.sp-m-zh { font-size: 19px; font-weight: 700; line-height: 1.6; padding-right: 30px; }
.sp-m-ex { font-size: 17px; font-weight: 600; color: var(--brand); margin: 6px 0 14px; line-height: 1.5; }
.sp-m-row { border-top: 1px dashed var(--line); margin-top: 14px; padding-top: 12px; }
.sp-m-row b {
  display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2);
  letter-spacing: 2px; margin-bottom: 6px;
}
.sp-m-row b .l-ico { width: 14px; height: 14px; }
.sp-m-row p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--ink); }
.sp-modal .btn-speak { margin-bottom: 4px; }

/* ---------- 游戏化：连击飘字 + 回合评级徽章（品牌紫视觉） ---------- */
.combo-pop {
  position: fixed; top: 84px; right: 26px; z-index: 80;
  pointer-events: none; opacity: 0;
  background: linear-gradient(135deg, #7454c6, #9a7ae0);
  color: #fff; border-radius: 999px; padding: 8px 18px;
  box-shadow: 0 8px 24px rgba(116, 84, 198, .35);
  display: flex; align-items: baseline; gap: 8px;
}
.combo-pop b { font-size: 20px; font-weight: 800; letter-spacing: 1px; }
.combo-pop span { font-size: 12.5px; opacity: .92; }
.combo-pop.hot { background: linear-gradient(135deg, #f5a623, #f5b942); box-shadow: 0 8px 24px rgba(245, 166, 35, .4); }
.combo-pop.show { animation: comboFloat 1.3s ease both; }
@keyframes comboFloat {
  0% { opacity: 0; transform: translateY(10px) scale(.75); }
  18% { opacity: 1; transform: translateY(0) scale(1.06); }
  30% { transform: translateY(0) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-26px) scale(.96); }
}
.grade-badge {
  width: 92px; height: 92px; border-radius: 50%; margin: 4px auto 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: linear-gradient(150deg, #8a6ad6, #6a4bbf);
  color: #fff; box-shadow: 0 10px 28px rgba(116, 84, 198, .35);
  animation: popIn .5s cubic-bezier(.22,1.1,.36,1) both;
}
.grade-badge b { font-size: 26px; font-weight: 800; letter-spacing: 1px; line-height: 1.1; }
.grade-badge span { font-size: 10.5px; opacity: .85; letter-spacing: 2px; }
.grade-badge.g-SSS { background: linear-gradient(150deg, #f7c948, #f0a318); box-shadow: 0 10px 28px rgba(245, 166, 35, .4); }
.grade-badge.g-SS { background: linear-gradient(150deg, #9a8cf0, #7462d8); }
.grade-badge.g-A, .grade-badge.g-B, .grade-badge.g-C { background: linear-gradient(150deg, #aeb6cc, #8d97b4); }

/* ---------- 移动端 ---------- */
@media (max-width: 720px) {
  .learn-page { padding: 22px 16px 60px; }
  .ob-grid { grid-template-columns: repeat(2, 1fr); }
  .ob-grid-w { grid-template-columns: 1fr; }
  .ob-body { padding: 20px 16px; }
  .quizbox { padding: 22px 16px 20px; }
  .flow-word { font-size: 30px; }
  .flow-opts { grid-template-columns: 1fr; }
  .tile-big { width: 84px; height: 84px; font-size: 46px; border-radius: 16px; }
  .learn-book { padding: 13px 14px; }
  .learn-book .bk-exam { width: 60px; font-size: 13px; }
  /* .big-input / .dict-input / .sp-slot / .sp-punct 的窄屏尺寸统一放在文末 g3b 段 */
  .stage-splash-in b { font-size: 24px; }
  .sp-zh-row { margin: 12px 0 14px; }
  .sp-topbar { gap: 8px; padding: 9px 12px; }
  .combo-pop { right: 14px; top: 74px; padding: 7px 14px; }
  .combo-pop b { font-size: 17px; }
  .grade-badge { width: 80px; height: 80px; }
  .grade-badge b { font-size: 22px; }
  .sp-modal { padding: 20px 18px 18px; }
}

/* ---- g2: 间隔复习 / 听写模式 / AI 老师 / 我的课程 ---- */
.sp-reveal {
  margin-top: 12px; padding: 10px 14px; border-radius: 10px;
  background: #f3f0fb; color: #4a3f6b; font-size: 14px; line-height: 1.6;
  border-left: 3px solid var(--brand, #7454c6);
}
.done-flash { transform: scale(1.06); filter: brightness(1.12); }
.mine-form {
  background: #fff; border: 1px solid #e7e2f3; border-radius: 14px;
  padding: 16px 18px; margin: 14px 0 20px; display: flex; flex-direction: column; gap: 10px;
}
.mine-title {
  border: 1px solid #dcd5ec; border-radius: 10px; padding: 9px 12px; font-size: 14px; outline: none;
}
.mine-title:focus { border-color: var(--brand, #7454c6); }
.mine-ta {
  border: 1px solid #dcd5ec; border-radius: 10px; padding: 10px 12px; font-size: 14px;
  line-height: 1.6; resize: vertical; min-height: 120px; outline: none; font-family: inherit;
}
.mine-ta:focus { border-color: var(--brand, #7454c6); }
.mine-frow { display: flex; align-items: center; gap: 12px; }
.mine-tip { font-size: 13px; color: #c0392b; }
.mine-row { flex-wrap: wrap; }
.mine-prev { display: block; width: 100%; color: #8b84a3; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .mine-form { padding: 13px 14px; }
  .mine-ta { min-height: 100px; }
}

/* ---- g3: 口语首页新排布 / 键入音效 / 学习档案 ---- */
.sp-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 4px 0 22px; }
.sp-qcard {
  position: relative; text-align: left; cursor: pointer; padding: 16px 16px 14px;
  border-radius: 14px; border: 1px solid #e7e2f3; background: #fff;
  display: flex; flex-direction: column; gap: 4px; transition: transform .18s, box-shadow .18s, border-color .18s;
  font-family: inherit;
}
.sp-qcard:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(116, 84, 198, .13); border-color: #cbbfe8; }
.sp-qtag {
  font-size: 11px; letter-spacing: .5px; color: #7454c6; background: #f1ecfb;
  border-radius: 999px; padding: 2px 9px; align-self: flex-start; margin-bottom: 4px;
}
.sp-qcard b { font-size: 15px; color: #2c2440; font-weight: 700; }
.sp-qsub { font-size: 12.5px; color: #8b84a3; }
.sp-qcard.q-rev .sp-qtag { color: #b06a1f; background: #fdf1e2; }
.sp-qcard.q-mine .sp-qtag { color: #1f7a63; background: #e3f4ef; }

.sp-sec-head { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 12px; }
.sp-sec-head h2 { font-size: 17px; margin: 0; color: #2c2440; }
.sp-sec-head span { font-size: 12.5px; color: #9b93b3; }

.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.sp-tcard {
  position: relative; cursor: pointer; text-align: left; font-family: inherit;
  padding: 15px 15px 13px; border-radius: 14px; border: 1px solid #e7e2f3; background: #fff;
  display: flex; flex-direction: column; gap: 5px; overflow: hidden;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.sp-tcard:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(116, 84, 198, .16); border-color: #c3b4e6; }
.sp-tnum {
  position: absolute; right: 11px; top: 9px; font-size: 22px; font-weight: 800;
  color: #f0ecfa; letter-spacing: -1px; line-height: 1;
}
.sp-tname { font-size: 15px; font-weight: 700; color: #2c2440; }
.sp-tmeta { font-size: 12px; color: #9b93b3; }
.sp-tbar { display: block; height: 4px; border-radius: 99px; background: #f0ecfa; overflow: hidden; margin-top: 4px; }
.sp-tbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #9b7ee0, #7454c6); }
.sp-tpct { font-size: 11.5px; color: #8b84a3; }

.sp-snd {
  border: 1px solid #e2dcf2; background: #fff; color: #b3abc9; border-radius: 9px;
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; transition: color .15s, border-color .15s, background .15s;
}
.sp-snd.on { color: #7454c6; border-color: #cbbfe8; background: #f6f2ff; }
.sp-snd .l-ico { width: 16px; height: 16px; }

/* 学习档案 */
.pf-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 6px 0 20px; }
.pf-kcard {
  border-radius: 14px; padding: 14px 15px; background: #fff; border: 1px solid #e7e2f3;
  display: flex; flex-direction: column; gap: 2px;
}
.pf-kcard b { font-size: 26px; line-height: 1.1; color: #7454c6; font-weight: 800; }
.pf-kcard span { font-size: 13.5px; font-weight: 600; color: #2c2440; }
.pf-kcard i { font-size: 11.5px; color: #9b93b3; font-style: normal; }
.pf-kcard.pf-review b { color: #b06a1f; }
.pf-kcard.pf-notes b { color: #2b6fb5; }
.pf-kcard.pf-words b { color: #1f7a63; }

.pf-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.pf-tab {
  border: 1px solid #e2dcf2; background: #fff; color: #6b6382; border-radius: 999px;
  padding: 7px 15px; font-size: 13px; cursor: pointer; font-family: inherit; transition: all .15s;
}
.pf-tab:hover { border-color: #c3b4e6; color: #4a3f6b; }
.pf-tab.on { background: #7454c6; border-color: #7454c6; color: #fff; }

.pf-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #eee9f8; margin-bottom: 9px;
}
.pf-zh { font-size: 14.5px; color: #2c2440; font-weight: 600; }
.pf-zh.pf-w { color: #1f7a63; font-weight: 800; font-size: 15.5px; }
.pf-ex { flex: 1; min-width: 180px; font-size: 13px; color: #8b84a3; }
.pf-tag {
  font-size: 11.5px; color: #7454c6; background: #f1ecfb; border-radius: 999px; padding: 2px 9px;
}
.pf-note { width: 100%; margin-top: 6px; }
.pf-note-ta {
  width: 100%; box-sizing: border-box; border: 1px dashed #d7cfec; border-radius: 10px;
  padding: 9px 11px; font-size: 13px; font-family: inherit; color: #4a3f6b; resize: vertical;
  min-height: 54px; background: #fbfaff; outline: none;
}
.pf-note-ta:focus { border-color: #7454c6; border-style: solid; background: #fff; }
.pf-foot { margin-top: 16px; }

@media (max-width: 860px) {
  .sp-quick { grid-template-columns: 1fr; gap: 9px; }
  .sp-qcard { flex-direction: row; align-items: center; gap: 10px; padding: 12px 14px; }
  .sp-qtag { margin: 0; }
  .sp-qcard b { font-size: 14px; }
  .sp-qsub { margin-left: auto; font-size: 12px; }
  .sp-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .sp-tcard { padding: 12px; }
  .sp-tnum { font-size: 17px; }
  .sp-tname { font-size: 13.5px; }
  .pf-kpi { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .pf-kcard b { font-size: 22px; }
  .pf-row { padding: 10px 11px; }
}


/* ===== 20261021 g3：口语语言切换 / 空态 / 单词配图 ===== */
.sp-langs {
  display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 14px;
}
.sp-langs button {
  font-family: inherit; font-size: 13px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid #e6e0f4; background: #fff; color: #5b5273; cursor: pointer;
  transition: all .16s;
}
.sp-langs button:hover { border-color: #c9bcec; color: #7454c6; }
.sp-langs button.on {
  background: #7454c6; border-color: #7454c6; color: #fff; font-weight: 700;
  box-shadow: 0 6px 16px rgba(116, 84, 198, .24);
}
.sp-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 44px 20px; border-radius: 16px; background: #fbfaff;
  border: 1px dashed #ddd4f0; text-align: center;
}
.sp-empty b { font-size: 15.5px; color: #4a3f6b; }
.sp-empty span { font-size: 13px; color: #8b84a3; }

/* 学单词配图 */
.w-card-img {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden;
  background: #f4f1fb; margin: 0 auto 12px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.w-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w-card-img.miss::after {
  content: "暂无配图"; font-size: 12px; color: #b0a8c6; letter-spacing: .5px;
}
.w-img-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 12px 8px;
  font-size: 11px; color: #fff; text-align: right;
  background: linear-gradient(transparent, rgba(0, 0, 0, .45));
}

/* 学习卡配图：照片优先，失败回退首字母 tile */
.flow-fig.with-photo {
  width: 100%; max-width: 420px; aspect-ratio: 16 / 10; margin: 6px auto 14px;
  padding: 0; overflow: hidden; border-radius: 18px; background: #f4f1fb;
  box-shadow: 0 10px 28px rgba(74, 63, 107, .14);
}
.flow-fig.with-photo .tile-ph,
.flow-fig.with-photo .tile-fb {
  width: 100%; height: 100%; border-radius: 0; background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.flow-fig.with-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flow-fig.with-photo .tile-fb { font-size: 58px; font-weight: 900; color: #b9aee0; }

/* ===== 20261021 g3b：PC 输入区放大（对齐参考站的大输入风格） ===== */
/* 输入区容器放宽，给大字号留呼吸 */
.sp-blanks { max-width: 100%; }
.sp-zh { font-size: 23px; }
@media (min-width: 1080px) {
  .quizbox { max-width: 840px; padding: 36px 38px 32px; }
  .sp-blanks { padding: 34px 30px 26px; gap: 14px 12px; }
  .sp-slotwrap { grid-template-rows: auto 20px; row-gap: 7px; min-width: 112px; }
  .sp-slot { font-size: 36px; min-width: 112px; padding: 11px 18px 13px; border-bottom-width: 4px; }
  .sp-punct { font-size: 36px; }
  .sp-role { font-size: 13.5px; }
  .big-input { font-size: 30px; min-height: 132px; padding: 26px 28px; }
  .sp-zh { font-size: 26px; }
}
/* 移动端同步缩小，避免大字号把词槽顶出屏幕 */
@media (max-width: 720px) {
  .sp-blanks { padding: 20px 14px 16px; gap: 10px 8px; border-radius: 14px; }
  .sp-slotwrap { min-width: 44px; gap: 6px; }
  .sp-slot {
    font-size: 21px; min-width: 62px; max-width: 70vw;
    padding: 5px 9px 7px; border-bottom-width: 2px; border-radius: 8px 8px 0 0;
    letter-spacing: 0;
  }
  .sp-role { font-size: 11px; }
  .sp-punct { font-size: 21px; padding-bottom: 28px; }
  .sp-pmark { font-size: 21px; }
  .sp-zh { font-size: 19px; }
  .big-input { font-size: 21px; min-height: 84px; padding: 15px 16px; border-radius: 13px; }
  .big-input::placeholder { font-size: 16px; }
  .dict-input { min-height: 100px; }
  .quizbox input:not(.big-input):not(.sp-slot) { font-size: 19px; padding: 13px 14px; }
}

/* ===== 标点紧贴词尾（替代单独飘着的 "?" / "."） ===== */
/* 标点跟输入框底部基线对齐：flex-end + 与 slot 底部内边距等高的 padding-bottom，
   这样 ? 正好坐在文字基线上，不会顶到框外或浮到中间 */
.sp-cell {
  display: inline-flex; align-items: flex-end; gap: 1px;
  vertical-align: bottom;
}
.sp-pmark {
  font-style: normal; font-size: 30px; font-weight: 800; color: #b6aecb;
  line-height: 1; padding-bottom: 13px; margin-left: 0;
  pointer-events: none; user-select: none;
}
@media (min-width: 1080px) { .sp-pmark { font-size: 36px; padding-bottom: 16px; } }

/* ===== 答对/答错后的讲解区：紧贴输入框下方，不用卡片外壳 =====
   用户要求「不新增窗口」——所以这里没有背景色、没有边框、没有圆角、
   没有阴影，只是一段跟着输入框往下排的文字：句子组成 → 翻译 → 注释 → 用法。 */
.sp-resolved {
  margin: 0; padding: 2px 2px 4px; border-radius: 0;
  background: none; border: 0; box-shadow: none;
  animation: popIn .26s cubic-bezier(.3,1.3,.4,1) both;
}
.sp-resolved .sr-h {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; letter-spacing: 1.2px; color: #9b93b3; margin: 0 0 10px;
  font-weight: 600;
}
.sp-resolved .sr-h .l-ico { width: 14px; height: 14px; color: #2fa463; }
/* 句子组成：每个词位固定三行 —— ①词+标点 ②中文释义 ③成分。
   三行都写死行高（不随内容撑开/塌陷），且每个格子都显式占位，
   这样同一行的所有词位必然对齐，不会出现「有的词高一行、有的矮一行」的错位。 */
.struct-toks {
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  align-items: flex-start; margin-bottom: 14px;
}
.struct-tok {
  display: grid;
  grid-template-rows: 30px 19px 20px;   /* ①②③ 固定三行 */
  grid-auto-flow: row;
  justify-items: center; align-items: center;
  row-gap: 2px; white-space: nowrap;
}
.struct-tok > * { grid-column: 1; }      /* 全部锁在第 1 列，避免隐式列错位 */
.struct-tok .st-top {
  grid-row: 1;
  display: inline-flex; align-items: baseline; gap: 1px;
  white-space: nowrap; line-height: 30px;
}
.struct-tok b { font-size: 22px; font-weight: 700; color: #2c2440; line-height: 1; }
.struct-tok .struct-p {
  font-style: normal; font-size: 22px; font-weight: 700; color: #b6aecb;
  line-height: 1; margin-left: 1px;
}
/* 逐词中文释义：没有释义时仍渲染空 <i> 占住这一行，保证下面的成分线等高 */
.struct-tok .struct-cn {
  grid-row: 2;
  display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis;
  font-style: normal; font-size: 13px; font-weight: 600; color: #7454c6;
  line-height: 19px; letter-spacing: .2px; text-align: center;
}
.struct-tok .struct-role {
  grid-row: 3;
  display: block; width: 100%;
  font-style: normal; font-size: 11.5px; color: #9b93b3; letter-spacing: .3px;
  border-top: 1px dashed #ddd4f0; padding-top: 3px;
  text-align: center; line-height: 16px; overflow: hidden; text-overflow: ellipsis;
}
/* 整句翻译：紧跟在句子组成下面一行，字号比正文略大一点 */
.sr-zh { font-size: 16.5px; font-weight: 600; color: #4a3f6b; margin: 2px 0 0; line-height: 1.6; }
.sr-row {
  display: flex; gap: 10px; padding-top: 8px; margin-top: 8px;
  border-top: 1px dashed #e8e1f5;
}
.sr-row > span {
  flex: none; width: 32px; font-size: 11.5px; color: #9b93b3; padding-top: 3px; letter-spacing: .5px;
}
.sr-row p { flex: 1; margin: 0; font-size: 13.5px; line-height: 1.7; color: #4a3f6b; }
.sr-next { margin-top: 14px; }
.tile-empty { background: #f1edf9; }

/* 口语评估按钮：与「听句子 / 问 AI / 提示 / 跳过」同一行，排在跳过左侧 */
.sp-evalbar { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-evalbtn { border-color: #d9cdf0; color: #5b4a8a; }
.sp-evalbtn:hover { border-color: var(--brand); color: var(--brand); }
.sp-evalbar .sp-evalstate {
  font-size: 12.5px; color: #9b93b3; max-width: 260px; line-height: 1.5;
}
.sp-eval .shadow-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .sp-evalbar { width: 100%; }
  .sp-evalbar .sp-evalstate { max-width: 100%; font-size: 12px; }
}
@media (max-width: 720px) {
  .sp-resolved { padding: 15px 14px 14px; border-radius: 13px; }
  .struct-tok b { font-size: 18px; }
  .struct-tok .struct-cn { font-size: 12px; }
  .sr-zh { font-size: 15.5px; }
}

/* ===== g9: AI 老师页内弹窗（对话式解析） ===== */
.ai-ov {
  position: fixed; inset: 0; z-index: 95; background: rgba(24, 18, 42, .48);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ai-modal {
  position: relative; background: #fff; border-radius: 18px;
  box-shadow: 0 24px 64px rgba(24,18,42,.28);
  width: 100%; max-width: 620px; max-height: 86vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.ai-x {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  border: 0; background: none; cursor: pointer; color: #8b84a3;
  padding: 6px; line-height: 0; border-radius: 8px;
}
.ai-x:hover { color: var(--ink); background: #f5f2fc; }
.ai-head {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 48px 14px 20px; border-bottom: 1px solid #efeaf8;
  background: linear-gradient(135deg, #f7f3ff, #fbf9ff); flex: none;
}
.ai-head .l-ico { width: 18px; height: 18px; color: var(--brand, #7454c6); }
.ai-head b { font-size: 15.5px; color: #2c2440; }
.ai-head span { font-size: 12.5px; color: #9b93b3; }
.ai-list {
  flex: 1; overflow-y: auto; padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 14px; background: #fcfbff;
}
.ai-row { display: flex; align-items: flex-start; gap: 9px; }
.ai-row.me { flex-direction: row; justify-content: flex-end; }
.ai-av {
  flex: none; width: 28px; height: 28px; border-radius: 9px; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  background: linear-gradient(140deg, #8a6ad6, #6a4bbf); color: #fff;
}
.ai-row.me .ai-av { background: #e9e3f7; color: #6b5a95; }
.ai-bub {
  max-width: 84%; padding: 12px 15px; border-radius: 14px;
  background: #fff; border: 1px solid #ece5f8;
  font-size: 14.5px; line-height: 1.7; color: #3b3352;
  box-shadow: 0 2px 10px rgba(74,63,107,.05);
}
.ai-row.me .ai-bub {
  background: linear-gradient(140deg, #7454c6, #8a6ad6); color: #fff;
  border-color: transparent; border-bottom-right-radius: 5px;
}
.ai-row.ai .ai-bub { border-bottom-left-radius: 5px; }
.ai-q { font-weight: 700; font-size: 15.5px; line-height: 1.55; }
.ai-q i { display: block; margin-top: 4px; font-style: normal; font-weight: 500; font-size: 13px; opacity: .82; }
.ai-qtip { margin: 8px 0 0; font-size: 13px; opacity: .85; }
/* 解析分区 */
.ai-bub .ai-sec { margin: 0 0 12px; }
.ai-bub .ai-sec:last-child { margin-bottom: 0; }
.ai-bub .ai-sec > b {
  display: flex; align-items: center; gap: 6px; margin-bottom: 7px;
  font-size: 12px; letter-spacing: 1.6px; color: #8b84a3; font-weight: 700;
}
.ai-bub .ai-sec > b .l-ico { width: 13px; height: 13px; }
.ai-bub .ai-sec p { margin: 0; font-size: 14px; line-height: 1.75; }
.ai-ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.8; }
.ai-ul li { margin-bottom: 2px; }
/* 逐词：词 / 中文释义 / 成分 */
.ai-toks { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.ai-tok {
  display: inline-grid; grid-template-rows: auto auto; justify-items: center;
  row-gap: 2px; padding: 5px 8px 4px; border-radius: 9px;
  background: #f7f4fd; border: 1px solid #ece5f8;
}
.ai-tk-w { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.25; }
.ai-tk-w { font-size: 15.5px; font-weight: 700; color: #2c2440; }
.ai-tk-w i {
  font-style: normal; font-size: 12px; font-weight: 600;
  color: #7454c6; letter-spacing: .2px;
}
.ai-tk-r {
  font-style: normal; font-size: 10.5px; color: #9b93b3; letter-spacing: .3px;
}
.ai-tip { background: #fff9ec; border: 1px solid #f6e6c4; border-radius: 10px; padding: 9px 11px; }
.ai-fb { margin: 8px 0 0; font-size: 12.5px; color: #9b93b3; }
.ai-typing { display: inline-flex; gap: 4px; align-items: center; height: 18px; }
.ai-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: #b9aee0;
  animation: aiDot 1.1s infinite ease-in-out;
}
.ai-typing i:nth-child(2) { animation-delay: .16s; }
.ai-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes aiDot {
  0%, 100% { opacity: .35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
.ai-foot {
  flex: none; display: flex; gap: 9px; padding: 12px 16px 14px;
  border-top: 1px solid #efeaf8; background: #fff;
}
.ai-in {
  flex: 1; font-family: inherit; font-size: 14px; padding: 10px 13px;
  border: 1px solid #e3d9f5; border-radius: 11px; outline: none; background: #fbfaff;
  color: var(--ink);
}
.ai-in:focus { border-color: var(--brand, #7454c6); background: #fff; }
.ai-send { flex: none; padding: 0 20px; font-size: 14px; }
@media (max-width: 720px) {
  .ai-ov { padding: 0; align-items: flex-end; }
  .ai-modal { max-width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
  .ai-bub { max-width: 88%; font-size: 14px; }
  .ai-list { padding: 14px 14px 16px; }
  .ai-head { padding: 14px 44px 12px 16px; }
  .ai-head span { display: none; }
  .ai-foot { padding: 10px 12px 12px; }
}
/* 主按钮（跳过 ↔ 下一题，同一个按钮两种形态） */
.sp-mainbtn { margin-left: auto; min-width: 108px; }
@media (max-width: 720px) { .sp-mainbtn { margin-left: 0; width: 100%; } }

/* ===== g10: 学习统计 ===== */
.st-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 6px 0 18px; }
.st-kcard {
  background: var(--card, #fff); border: 1px solid #e9e2f6; border-radius: 14px;
  padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 3px;
  box-shadow: 0 4px 16px rgba(74,63,107,.05);
}
.st-kcard .st-ki { display: flex; align-items: center; }
.st-kcard .st-ki .l-ico { width: 18px; height: 18px; }
.st-kcard b { font-size: 26px; line-height: 1.15; font-weight: 800; color: #2c2440; margin-top: 4px; }
.st-kcard .st-kl { font-size: 13px; font-weight: 600; color: #4a3f6b; }
.st-kcard i { font-size: 11.5px; color: #9b93b3; font-style: normal; }

.st-card {
  background: var(--card, #fff); border: 1px solid #e9e2f6; border-radius: 16px;
  padding: 18px 20px 20px; margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(74,63,107,.05);
}
.st-ch { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.st-ch h3 { margin: 0; font-size: 15.5px; color: #2c2440; }
.st-ch span { font-size: 12.5px; color: #9b93b3; }

/* 今日三格 */
.st-today { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.st-tcell {
  background: #faf8ff; border: 1px solid #eee7fa; border-radius: 12px;
  padding: 12px 10px; text-align: center; display: flex; flex-direction: column; gap: 2px;
}
.st-tcell b { font-size: 19px; font-weight: 800; color: #7454c6; }
.st-tcell span { font-size: 12px; color: #9b93b3; }
.st-goal { margin-top: 14px; position: relative; }
.st-goal span { font-size: 12.5px; color: #8b84a3; display: block; margin-bottom: 6px; }
.st-goal::after {
  content: ""; display: block; height: 8px; border-radius: 999px; background: #f1edf9;
}
.st-goal i {
  position: absolute; left: 0; bottom: 0; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #7454c6, #9a7ae0); transition: width .5s ease;
}

/* 热力图：18 列 × 7 行，列=周 */
.st-heat { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.st-hcol { display: flex; flex-direction: column; gap: 4px; }
.st-hc {
  width: 13px; height: 13px; border-radius: 3px;
  background: #f0ecf8; display: block; flex: none;
}
.st-hc.lv1 { background: #ded3f5; }
.st-hc.lv2 { background: #bda9ec; }
.st-hc.lv3 { background: #9a7ae0; }
.st-hc.lv4 { background: #7454c6; }
.st-hc.lv5 { background: #5a3da6; }
.st-hc.today { box-shadow: 0 0 0 2px rgba(116,84,198,.28); }
.st-hc-pad { background: transparent; }
.st-legend { display: flex; align-items: center; gap: 4px; margin-top: 10px; justify-content: flex-end; }
.st-legend span { font-size: 11px; color: #9b93b3; margin: 0 3px; }

/* 场景进度 */
.st-topics { display: flex; flex-direction: column; gap: 9px; }
.st-trow { display: grid; grid-template-columns: 96px 1fr 52px; align-items: center; gap: 10px; }
.st-tname { font-size: 13px; color: #4a3f6b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-tbar { height: 7px; border-radius: 999px; background: #f1edf9; overflow: hidden; }
.st-tbar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7454c6, #9a7ae0); }
.st-tpct { font-size: 12px; color: #9b93b3; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .st-kpi { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .st-kcard b { font-size: 22px; }
  .st-card { padding: 15px 14px 16px; border-radius: 13px; }
  .st-hc { width: 11px; height: 11px; }
  .st-trow { grid-template-columns: 74px 1fr 46px; }
}
@media (min-width: 1080px) {
  .st-hc { width: 15px; height: 15px; }
}

/* ================= g11（2026-10-21）：Pad / 手机 / PC 三端适配 =================
   断点约定（与全站一致，只加不破）：
     ≥1080px  PC 桌面  —— 大字大输入 + 快捷键提示
     721~1079  Pad 横竖屏 —— 词槽中等、按钮不换行、图片加高
     ≤720     手机     —— 单列堆叠，主按钮整行
   触屏设备（(hover:none)）额外：加大点击热区、去掉 hover 位移。 */

/* ---------- Pad：竖屏 768~1079 / 横屏也常落在这段 ---------- */
@media (min-width: 721px) and (max-width: 1079px) {
  .learn-page { padding: 20px 18px 60px; }
  .quizbox { max-width: 100%; padding: 26px 24px 24px; border-radius: 18px; }
  .sp-blanks { padding: 24px 18px 20px; gap: 12px 9px; border-radius: 16px; }
  .sp-slotwrap { min-width: 72px; grid-template-rows: auto 18px; row-gap: 6px; }
  .sp-blanks { justify-content: center; row-gap: 12px; }
  .sp-slot { font-size: 27px; min-width: 78px; max-width: 46vw; padding: 8px 12px 10px; }
  .sp-punct { font-size: 27px; padding-bottom: 32px; }
  .sp-pmark { font-size: 27px; padding-bottom: 15px; }
  .sp-zh { font-size: 21px; }
  .sp-pic img { height: 190px; }
  .sp-mainbtn { min-width: 128px; }
  .struct-tok { grid-template-rows: 26px 18px 19px; }
  .struct-tok b, .struct-tok .struct-p { font-size: 19px; }
}

/* 触屏：热区放大，去掉会让元素「跳一下」的 hover 位移 */
@media (hover: none) and (pointer: coarse) {
  .sp-slot { padding-top: 10px; padding-bottom: 12px; }
  .lf-btn { height: 42px; padding: 0 16px; }
  .lf-btn:hover { transform: none; }
  .sp-mainbtn { min-height: 46px; }
  .quiz-ops .btn-speak { min-height: 42px; }
}

/* ---------- 手机：整页单列，避免「PC 端内容堆在一起」 ---------- */
@media (max-width: 720px) {
  .learn-page { padding: 14px 12px 56px; }
  .quizbox { padding: 16px 12px 18px; border-radius: 16px; }
  .quiz-ops { display: flex; flex-wrap: wrap; gap: 8px; }
  .quiz-ops .btn-speak { flex: 1 1 calc(50% - 4px); min-width: 0; justify-content: center; }
  .sp-evalbar { flex: 1 1 100%; }
  .sp-pic img { height: 148px; }
  .sp-topbar { flex-wrap: wrap; gap: 8px; }
  .struct-toks { gap: 10px 13px; }
  .struct-tok { grid-template-rows: 24px 17px 18px; }
  .struct-tok b, .struct-tok .struct-p { font-size: 17px; }
  .sr-row { gap: 8px; }
}

/* ---------- PC：快捷键提示条（固定顶部） ----------
   2026-10-21 改版：原先挂在练习卡底部（.kbd-tip 在 box 内），
   全屏时卡片一高就跟着内容往下跑，滚到底还会跑到页面中间；非全屏时更是直接被
   视口切掉（实测 top=888 / 视口 900）。现改为 position:fixed 吸顶。
   ⚠️ 吸顶后会和右上角「全屏/退出全屏」按钮同一水平带，所以右侧留出避让位
   （见 --et-kbd-safe），否则窄屏会压住按钮文字。 */
.kbd-tip {
  display: none; align-items: center; gap: 14px; flex-wrap: wrap;
  position: fixed; left: 0; right: 0; z-index: 65;
  /* 非全屏：导航是 sticky 且 z-index:50、高 63px（实测），提示条必须贴在它下方，
     否则会盖住「国际站/汉堡菜单」。全屏时导航被藏，另由 body.learn-fs 拉回 top:0。 */
  top: var(--et-nav-h, 63px);
  margin: 0; padding: 9px 16px 9px 22px;
  padding-right: calc(16px + var(--et-kbd-safe, 190px));
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #ece6f7;
  box-shadow: 0 2px 10px rgba(74, 63, 107, .05);
  font-size: 12px; color: #a09ab5;
  transform: translateZ(0);            /* 合成层，滚动时不闪 */
}
.kbd-tip kbd {
  display: inline-block; min-width: 20px; padding: 1px 6px; margin-right: 4px;
  border: 1px solid #e2dbf1; border-bottom-width: 2px; border-radius: 5px;
  background: #fbfaff; color: #6f6689; font-family: inherit; font-size: 11.5px;
  font-weight: 600; line-height: 17px; text-align: center;
}
/* 只在桌面端显示（触屏不显示键盘提示） */
@media (min-width: 768px) and (hover: hover) { .kbd-tip { display: flex; } }
/* 全屏时导航已藏，提示条回到最顶；右上角仍有「退出全屏」按钮，保留避让位 */
body.learn-fs .kbd-tip { top: 0; padding-left: 18px; }
/* 窄屏：提示条换行会变高，给按钮多留位并缩小间距 */
@media (max-width: 900px) {
  .kbd-tip { gap: 9px; padding: 7px 12px 7px 14px; font-size: 11.5px; }
}
@media (max-width: 720px) {
  /* 手机端本来就不显示键盘提示，这里只兜底不塌 */
  .kbd-tip { display: none !important; }
}

/* ===== 20261022 g14：点词解读卡（口语里点单词 → 释义/朗读/使用场景例句） ===== */
.wd-cta { cursor: pointer; border-radius: 8px; transition: background .15s; }
.wd-cta:hover { background: #f6f3fc; }
.wd-cta:hover .st-top b, .wd-cta:hover .sm-w { color: #7454c6; }
.wd-card { max-width: 520px; }
.wd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.wd-word b { font-size: 28px; font-weight: 800; color: #7454c6; margin-right: 10px; }
.wd-ipa { font-size: 15px; color: #9b93b3; margin-right: 8px; }
.wd-pos { display: inline-block; font-size: 12px; color: #7454c6; background: #f1ecfb; border-radius: 999px; padding: 2px 10px; }
.wd-meaning { font-size: 16px; font-weight: 600; color: #2c2440; line-height: 1.6; padding: 6px 0 2px; }
.wd-sec { border-top: 1px dashed #e8e2ef; margin-top: 12px; padding-top: 10px; }
.wd-sec > b { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #71677f; letter-spacing: 1px; margin-bottom: 8px; }
.wd-sec > p { margin: 0; font-size: 14.5px; line-height: 1.7; color: #4a3f6b; }
.wd-ex { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; border-radius: 10px; background: #fbfaff; margin-bottom: 7px; }
.wd-ex-en { flex: 1; font-size: 14.5px; font-weight: 600; color: #2c2440; line-height: 1.55; }
.wd-ex-zh { flex: 1; font-size: 13px; color: #71677f; }
.wd-ex .btn-speak { padding: 5px 10px; font-size: 12px; flex: none; }
.wd-loading { font-size: 14px; color: #8b84a3; padding: 26px 0; text-align: center; }

/* ===== g16：AI 老师快捷追问 chips ===== */
.ai-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 2px; }
.ai-chip { font-size: 12.5px; color: #7454c6; background: #f6f3fc; border: 1px solid #e2d9f5;
  border-radius: 999px; padding: 6px 13px; cursor: pointer; transition: all .15s; }
.ai-chip:hover { background: #7454c6; color: #fff; border-color: #7454c6; }

/* ===== g18：跟读打分 ===== */
.sp-modechip { font-weight: 700; }
.sh-sent { font-size: 24px; font-weight: 800; color: var(--ink); text-align: center; line-height: 1.5; }
.sh-mic { display: block; margin: 22px auto 0; width: 76px; height: 76px; border-radius: 50%;
  border: none; background: var(--brand); color: #fff; font-size: 30px; cursor: pointer;
  transition: transform .18s, box-shadow .18s; }
.sh-mic.rec { background: #EA4335; transform: scale(1.12); box-shadow: 0 0 0 10px rgba(234,67,53,.15); }
.sh-mic:hover { transform: scale(1.06); }
.sh-status { text-align: center; font-size: 13px; color: var(--ink-2); margin-top: 10px; }
.sh-result { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; align-items: center; }
.sh-score { width: 100%; text-align: center; font-size: 44px; font-weight: 800; }
.sh-score.good { color: #34A853; } .sh-score.mid { color: #E8A317; } .sh-score.bad { color: #EA4335; }
.sh-hit, .sh-miss { font-size: 15px; font-weight: 700; color: #fff; border-radius: 9px; padding: 5px 10px; }
.sh-hit { background: #34A853; }
.sh-miss { background: #EA4335; cursor: pointer; }
.sh-miss:hover { filter: brightness(1.1); }
.sh-ops { width: 100%; display: flex; justify-content: center; gap: 10px; margin-top: 8px; }

/* ===== g19：标点完全基线对齐（baseline 对齐取代手工 padding-bottom） ===== */
.sp-cell { align-items: baseline; }
.sp-pmark { padding-bottom: 0 !important; }
@media (min-width: 1080px) { .sp-pmark { padding-bottom: 0 !important; } }

/* ===== g20：标点绝对定位在槽右下、与横线同一水平线 ===== */
.sp-cell { position: relative; align-items: stretch; }
.sp-pmark { position: absolute; right: -20px; bottom: 4px; padding-bottom: 0 !important; line-height: 1; }
@media (min-width: 1080px) { .sp-pmark { right: -24px; bottom: 5px; padding-bottom: 0 !important; } }
@media (max-width: 719px) { .sp-pmark { right: -13px; bottom: 3px; padding-bottom: 0 !important; } }

/* ===== g21：跟读麦克风实心 SVG 尺寸 ===== */
.sh-mic svg.l-ico { width: 34px; height: 34px; }

/* ===== g22：一屏化 + 慢读 ===== */
.q-tip-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.q-tip-row .q-tip { margin-bottom: 0; flex: 1; }
.sp-slow { white-space: nowrap; font-size: 12.5px; }
/* 一屏化：配图压缩、成分标注判后显示（quizbox 判后加 .locked） */
.sp-pic img, .sp-pic { max-height: 96px; object-fit: cover; }
.quizbox:not(.locked) .sp-role { visibility: hidden; }

/* g22b：解析区一屏化 */
.sr-row p, .sr-row div[class*=sr] { max-height: 3.2em; overflow: hidden; }
.struct-toks { margin-bottom: 6px !important; }

/* ===== g23：判对后词义直接标在词下（句乐部式），不再弹解析区 ===== */
.sp-role.has-meaning { color: var(--brand); font-weight: 700; }