:root{
  --purple:#7c3aed;
  --purple-soft:#ede9fe;
  --green:#22c55e;
  --red:#ef4444;
  --ink:#1f2430;
  --muted:#8b90a0;
  --line:#e6e8ef;
  --card:#ffffff;
  --bg:#ffffff;
  /* ---------- 语义 token（第二十三轮 P0 深色模式补全） ----------
     浅色档取值 = 原先散落各处的硬编码浅色值（浅色模式视觉零变化）；
     深色档只在 body.dark 里覆盖，以后加深色样式只改那一处。 */
  --surface:#ffffff;        /* 卡片 / 弹层底（原 26 处 background:#fff） */
  --surface-2:#f6f7fb;      /* 悬停浅灰 / 次层底（原 #f2f3f7 #f4f5f9 #f6f7fb #f7f8fc #fafbfe #f8f9fc #fbfbfd） */
  --surface-3:#f1f2f6;      /* 更浅的槽 / 轨道 / 分隔（原 #f1f2f6 #eef0f6 #f1f3f8） */
  --text:#22283a;           /* 主文字（原 #22283a #1e2333 #2f3547 #3b4152） */
  --text-strong:#0f172a;    /* 强调文字（原 #0f172a） */
  --text-2:#4b5164;         /* 次文字（原 #4b5164 #5d6376 #5b6377 #475569） */
  --text-3:#8b90a0;         /* 弱文字（原 #94a3b8 #a5adc0 #8a90a3 #6a7183） */
  --border-2:#f1f3f8;       /* 浅分隔线（原 #f1f3f8 #eef1f6 #e8ecf3） */
  --ok:#15803d;--ok-bg:#dcfce7;--ok-soft:#d9f5e0;--ok-line:#86efac;
  --bad:#b91c1c;--bad-bg:#fee2e2;--bad-soft:#fecaca;--bad-line:#fca5a5;
  --warn:#b45309;--warn-bg:#fffbeb;--warn-line:#fcd34d;
  --info:#3b82f6;--info-bg:#e0f2fe;
  --purple-deep:#6d28d9;    /* 原 #6d28d9 散落 6 处 */
  --purple-tint:#f3eefe;    /* 选中浅紫底（原 #f3eefe） */
  --purple-tint-2:#faf7ff;  /* 选中更浅紫底（原 #faf7ff） */
  --purple-hover:#c9c2f0;   /* 悬停紫边（原 #c9c2f0） */
  --purple-line:#e4dafd;    /* 选中紫描边（原 #e4dafd） */
  --focus-line:#c4b5fd;     /* 悬停焦点边（原 #c4b5fd） */
  --kbd-bg:#f1f2f6;         /* 键帽底（原 #f1f2f6） */
  --track:#e7e9f0;          /* 滑杆轨道（原 #e7e9f0） */
  --sw-off:#dfe3ec;         /* 开关关态底（原 #dfe3ec） */
  --quote-bg:#fffefb;       /* 每日一句卡底（原 #fffefb，暖语义） */
  --hero-1:#faf7ff;--hero-2:#f3f0ff;--hero-3:#eef4ff;   /* 模式弹窗 hero 渐变 */
  --ms-chip:#f1eefb;--ms-chip-ink:#7c73a8;
  --ms-types-bg:#fbfaff;--ms-types-line:#f0eef7;
  /* ---------- 答题反馈族 token（第二十四轮 P0 第二批） ----------
     浅色档 = 原硬编码值（浅色模式视觉零变化）；深色档见 body.dark。 */
  --ok-bg-strong:#f7fef9;--bad-bg-strong:#fff8f8;--ok-line-soft:#bbf7d0;
  --cmp-tip-bg:#ffffff;--cmp-tip-line:rgba(0,0,0,.08);--cmp-tip-ink:#4b5563;--cmp-tip-label:#1f2937;--cmp-tip-type:#9ca3af;
  --guide-txt:#98a1b3;--guide-ans:#111827;--ph-ink:#c3c7d4;
  --cover-go-bg:#faf5ff;--cover-go-line:#e9d5ff;--cover-go-ink:#7e22ce;--cover-go-kbd-bg:#fff;--cover-go-kbd-ink:#6b21a8;
  --wd-ipa:#6b7280;--wd-w:#111827;--wd-cn:#4b5563;--wd-cn-i:#a5b4cf;--wd-pos:#6b7280;--wd-hover:#a855f7;
  --chip-word-bg:#eef6ff;--chip-word-ink:#0369a1;--chip-phrase-bg:#eafaf1;
  --chip-chunk-bg:#fff4e8;--chip-chunk-ink:#c2410c;--chip-combined-bg:#fdf0f7;--chip-combined-ink:#be185d;
  --ck-subj:#b45309;--ck-verb:#be123c;--ck-obj:#2563eb;--ck-pred:#7c3aed;--ck-comp:#9333ea;--ck-attr:#c2410c;--ck-adv:#0e7490;--ck-clause:#475569;
  --ans-tip-bg:#faf8ff;--ans-tip-line:#e9e4f5;--ans-tip-label-bg:#f3ebff;
  --st-score:#3f4759;--cn-ink:#454a58;--icon-ink:#5d6376;--kbd-face:#fff;--kbd-ink:#6b7280;--panel-soft:#fbfbfd;
  --dd-line:#e2e8f0;--dd-line-soft:#eef1f6;--dd-w-line:#e8ecf3;--dd-ink:#334155;--dd-ink-2:#475569;--dd-cn:#64748b;--dd-dim:#94a3b8;--dd-dim-2:#a3aec0;--dd-strong:#4c1d95;--dd-tag-bg:#f3eeff;--dd-th:#8b93a7;--dd-td:#3d4356;--dd-hover:#fafbfe;--dd-info-ink:#0369a1;--dd-chip-u-bg:#f1f5f9;--dd-chip-r-bg:#fef3c7;--dd-chip-s-bg:#f8fafc;--dd-say-hover:#eef2ff;--st-amber:#f59e0b;
  --slot-bad-bg:#fef2f2;--hover-line:#ddd6fe;--progress-track:rgba(245,245,245,.4);--sw-thumb:#fff;
  /* 纸上校对室：新皮肤专用 token，不覆盖上方 78 个既有语义值。 */
  --paper-bg:#F4F7FA;--paper-sheet:#FFFFFF;--paper-ink:#1F2D3D;--paper-ink-2:#40536A;
  --paper-ruler:#D6E0EA;--paper-amber:#D8922B;--paper-red:#B23B3B;
  --paper-veil:rgba(31,45,61,.38);--paper-shadow:0 26px 64px rgba(31,45,61,.16);
  --paper-shadow-soft:0 8px 24px rgba(31,45,61,.08);
  --paper-tint:#FBF6EB;--paper-tint-line:#EBD8B5;--paper-serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);background:var(--bg);overflow:hidden;
}
#app{height:100%;display:flex;flex-direction:column}

/* ---------- 顶栏（原站 demo 头部：px 32px / py 12px / 底线 1px #f3f4f6） ---------- */
#topbar{
  display:flex;align-items:center;gap:14px;padding:12px 32px;
  border-bottom:1px solid #f3f4f6;position:relative;
}
#tools{margin-left:auto;display:flex;gap:6px}
.icon-btn{
  border:0;background:transparent;font-size:16px;line-height:1;color:var(--icon-ink);
  padding:6px 8px;border-radius:8px;cursor:pointer;
}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}
#stats{display:flex;gap:18px;align-items:center;font-variant-numeric:tabular-nums}
.stat{color:var(--muted);font-size:14px}
#stScore{font-size:20px;font-weight:700;color:var(--st-score)}
#stCombo{color:var(--purple);font-weight:600;opacity:0;transition:opacity .2s}
#stCombo.on{opacity:1}

/* ---------- 舞台 ---------- */
/* 原站 demo 外壳（julebu.co 首页实测）：外层 max-width 1320px 居中，
   卡片 rounded-2xl(18px) + 1px rgba(229,231,235,.6) 边框 + shadow-2xl，
   头部 px 32px / py 12px / 底线 1px #f3f4f6，主体 px 32px、
   高度 clamp(600px,70vh,720px)。本站沿用同一外壳几何，头部/进度条
   保留本站既有信息（标题、计时、分数、连击、工具按钮）。 */
#stage{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;gap:0;overflow:auto;
}
#shell{
  width:min(1320px,100%);background:var(--card);border:1px solid rgba(229,231,235,.6);
  border-radius:18px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);overflow:hidden;
  display:flex;flex-direction:column;
}
#shellHead{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 32px;border-bottom:1px solid #f3f4f6;min-height:53px;box-sizing:border-box;
}
#shellTitle{font-size:17px;font-weight:600;letter-spacing:.2px;display:flex;gap:8px;align-items:baseline}
#shellStats{display:flex;gap:18px;align-items:center;font-variant-numeric:tabular-nums}
#shellStats .stat{color:var(--muted);font-size:14px}
/* 原站头部右侧分数：text-xl font-black tabular-nums tracking-tight text-amber-500 */
#shellStats #stScore{font-size:20px;font-weight:900;letter-spacing:-.02em;color:var(--st-amber)}
#shellStats #stCombo{color:var(--purple);font-weight:600;opacity:0;transition:opacity .2s}
#shellStats #stCombo.on{opacity:1}
#shellProgress{height:6px;border-radius:9999px;background:var(--progress-track);margin:12px 32px 0;overflow:hidden}
#shellBar{height:100%;width:0;border-radius:9999px;background:linear-gradient(90deg,#8b5cf6,#22c55e);transition:width .3s}
/* 原站主体高度 clamp(600px,70vh,720px)；但 #shellBody 还带着 flex:1，
   clamp 的 70vh 会被 flex 拉伸/压缩覆盖（900px 视口下被压成 320px），
   所以这里显式 min-height 兜底到 600px，flex 只允许往上长 */
#shellBody{
  position:relative;                                   /* #cover 遮罩的定位父 */
  flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:center;
  padding:32px;min-height:600px;height:clamp(600px,70vh,720px);
}
/* 原站 demo 主体内容通栏居中（不再另限 900/1100px），长句答案卡在宽屏下需要更多宽度。
   注意 #shellBody 是 align-items:stretch，子块要自己 width:100% + margin auto 才能既通栏又居中 */
#promptBox{text-align:center;width:100%;margin:0 auto}
#promptLabel{color:var(--guide-txt);font-size:14px;margin-bottom:12px}
#promptZh{font-size:17px;line-height:1.6;color:var(--text);max-width:820px;margin-bottom:14px}

/* 槽容器 gap 对齐原站 InputWordSlots：非 Line 非 subtitle = gap-2（8px），
   Line 变体更紧；本站单词题只有 1 个槽，gap 0 */
#slots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%}
/* 槽位尺寸对齐原站实测：text-2xl md:text-5xl（桌面 48px）/ min-h 66px / 圆角 2px / 内距 0 .75rem .5rem */
/* 槽默认配色对齐原站 C(L) 的 default 分支：text-gray-500 + border-b-gray-300
   （本站原来用 --muted #8b90a0 + #dcdfe8，偏灰紫）。
   注意 CSS 顺序：.cur / .bad / .fixed 的状态色必须写在 default 之后才能盖住。
   这里同时覆盖 style.css 后半段「单词槽引擎」里的同名规则（那时写在 default
   之前会被后来的 .slot 默认值盖掉，所以那几行只留背景/透明度）。 */
.slot{
  min-width:56px;border-bottom:2px solid #d1d5db;text-align:center;padding:0 12px 8px;
  font-size:48px;line-height:1;min-height:66px;border-radius:2px;color:#6b7280;transition:.15s;
  display:inline-flex;align-items:flex-end;justify-content:center;cursor:pointer;
}
/* 原站槽配色（BKjqcbN1.js C(L)）：
   active+focusing → 字+线都紫（text-purple-500 + border-b-purple-500）；
   fixed 蓝；incorrect 红。
   注意：原站的 animate-shake 已被需求③(a) 明确去掉——「提交之后我的答题区域的
   位置是不变的」，抖动会让整排槽左右位移。红色保留（错词标识）。 */
.slot.cur{color:var(--purple);border-color:var(--purple)}
.slot.ok{color:var(--green);border-color:var(--green)}
.slot.bad{color:var(--red);border-color:var(--red)}
/* 原站 fixed（答对后给定词）= 蓝字蓝底线 */
.slot.fixed{color:#2563eb;border-color:#2563eb}
@keyframes slotShake{                  /* 历史遗留：判定反馈不再用它（见上） */
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(3px)}
}

#inputRow{width:100%}
#typed{
  width:100%;border:0;border-bottom:2px solid var(--line);outline:none;
  font-size:26px;line-height:1.6;padding:8px 4px;text-align:center;color:var(--ink);
  font-family:inherit;background:transparent;transition:border-color .2s;
}
#typed:focus{border-color:var(--purple)}
#typed::placeholder{color:var(--ph-ink);font-size:18px}

#slots.hidden{display:none}
/* 多词题：槽位就是输入区，真正的 input 只当键盘接收器（透明、不占视觉） */
#inputRow.mirror #typed{color:transparent;caret-color:transparent;border-bottom:0;font-size:14px;line-height:1;padding:0;height:16px}
#inputRow.mirror{margin-top:-8px}
/* 判错时的正确答案区（需求③(b)：正确答案显示在答题区域上方）。
   就在 #slots 正上方，用原站答案卡的同款配色。 */
#fixAns{
  width:100%;margin:0 auto 12px;padding:10px 16px 12px;border:1px solid var(--ok-line-soft);border-radius:12px;
  background:var(--ok-bg-strong);text-align:center;
}
#fixAns .fa-label{display:inline-block;margin-bottom:4px;font-size:11px;font-weight:700;color:var(--ok);letter-spacing:.08em}
#fixAns .fa-en{font-size:24px;line-height:1.7;color:var(--text);font-weight:600}
#fixAns .fa-en w{padding:0 1px;border-radius:4px}
#fixAns .fa-en w.ok{color:var(--ok);background:var(--ok-bg)}
#fixAns .fa-en w.bad{color:var(--bad);background:var(--bad-bg)}
#resultBox{
  width:100%;margin:0 auto;border-radius:16px;padding:18px 22px;border:1px solid var(--line);
  background:var(--card);box-shadow:0 14px 40px rgba(23,26,38,.08);
}
#resultBox.good{border-color:var(--ok-line-soft);background:var(--ok-bg-strong)}
#resultBox.bad{border-color:var(--bad-soft);background:var(--bad-bg-strong)}
/* 答案页中文译文行：对齐原站 HeroGameAnswer（text-xl md:text-2xl / leading-relaxed / text-foreground-deep） */
#resultBox .cn{color:var(--cn-ink);font-size:20px;font-weight:400;line-height:1.7;margin-top:18px;white-space:pre-wrap;text-align:center;max-width:820px}
@media (min-width:768px){#resultBox .cn{font-size:24px}}
/* 判语横幅已删（她 m00888：原站答对也只给答案卡，不要多余文字交互）。
   .verdict 现在是答案页的功能按钮行（逐词慢读 / 笔记 / 翻盘加分），只做右对齐排布。 */
#resultBox .verdict{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-bottom:10px}
#resultBox.good .verdict{color:var(--ok)}
#resultBox.bad .verdict{color:var(--bad)}
#resultBox .en{font-size:20px;line-height:1.7;margin-bottom:8px}
#resultBox .en w{padding:0 1px;border-radius:4px}
#resultBox .en w.ok{color:var(--ok);background:var(--ok-bg)}
#resultBox .en w.bad{color:var(--bad);background:var(--bad-bg)}
/* 英文展示性正文用书页衬线；答题槽与 #typed 仍继承界面字体，避免牵动 ch 宽度。 */
.fa-en,.quote-en,#resultBox .en,#fixAns .fa-en{
  font-family:var(--paper-serif);
}
body.font-system .fa-en,body.font-system .quote-en,body.font-system #resultBox .en,body.font-system #fixAns .fa-en{font-family:inherit}

/* .next-hint 规则已删（她 m00888：答案页不再放「按 Enter 进入下一个练习点」这类提示文字）。
   DOM 里也已不渲染，此规则留着只会误导后来人。 */

/* ---------- kbd ---------- */
kbd{
  font-family:inherit;font-size:11px;border:1px solid var(--line);border-bottom-width:2px;
  border-radius:6px;padding:2px 6px;background:var(--kbd-face);color:var(--kbd-ink);
}

/* ---------- 抽屉 / 结算 ---------- */
.hidden{display:none!important}
#drawer,#summary{
  position:fixed;inset:0;background:rgba(20,22,32,.35);display:flex;
  align-items:center;justify-content:center;z-index:20;
}
.drawer-card{
  background:var(--surface);border-radius:20px;padding:26px 30px;width:min(460px,92vw);
  box-shadow:0 24px 70px rgba(20,22,32,.28);
}
.drawer-card h2{margin:0 0 18px;font-size:18px}
.row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;font-size:15px}
.row.muted{color:var(--muted);font-size:13px;line-height:1.7;display:block}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{
  border:0;background:var(--surface);padding:7px 14px;font-size:13px;cursor:pointer;color:var(--text-2);font-family:inherit;
}
.seg button.on{background:var(--purple);color:#fff}
.primary{
  width:100%;margin-top:16px;border:0;background:var(--purple);color:#fff;
  padding:12px;border-radius:12px;font-size:15px;cursor:pointer;font-family:inherit;
}
.primary:hover{background:var(--purple-deep)}
.danger{
  border:1px solid var(--bad-soft);background:var(--surface);color:var(--bad);padding:7px 14px;
  border-radius:10px;font-size:13px;cursor:pointer;font-family:inherit;
}
/* ---------- 练习结算 / 列表 / 分析 / 复习本 / 生词本 / 依存树 / 学习卡 / 成就 ----------
   2026-10-21 修：复习本(#reviewPanel) 与 生词本/依存树/学习卡/成就/我自己的词书 这 6 个面板当初漏进本组，
   于是没有浮层定位 → #panel{position:static} 作为普通块挤进文档流，一开就把上面的练习区压扁
   （实测复习本打开后 #shell 高度 696.6px → 481px，这就是她报的「点错题本后明显偏移」；
    #myBooksPanel 是点遍所有按钮时抓到的第 6 个，697 → 103px。它不在 app.js 的 PANES 列表里，所以第一轮没扫到）。
   本组一律 fixed 浮层；#noteWrap 结构不同（.note-head，非 .sheet-card），是练习页内嵌笔记栏，不在此列。
   2026-10-21 二次修正 z-index：30 → 65。原因是 #cover（练习页封面引导条）的 offsetParent 是
   #shellBody{position:relative;z-index:auto} —— relative+auto **不产生层叠上下文**，于是 cover 的 z=60
   和本组的 z=30 直接在 root 层叠上下文里比较，cover 盖住整块面板（实测 elementFromPoint 中心返回 cover），
   用户点复习本就「打开了但什么都看不见」。层级定为：练习内容 < cover(60) < 面板族(65) < 设置/快捷键(70 见下) < 模式选择(80) < 暂停(90)。 */
#sheet,#listPanel,#analytics,#reviewPanel,#vocabPanel,#treePane,#learnPane,#badgesPanel,#myBooksPanel{
  position:fixed;inset:0;background:rgba(20,22,32,.38);z-index:65;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.sheet-card{
  background:var(--surface);border-radius:22px;width:min(1000px,96vw);max-height:94vh;overflow:auto;
  box-shadow:0 30px 90px rgba(20,22,32,.3);
  display:flex;flex-direction:column;padding-bottom:24px;
}
.sheet-card.wide{width:min(1040px,94vw);max-height:88vh;}
.sheet-head{
  display:flex;align-items:center;gap:16px;padding:20px 28px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--surface);border-radius:22px 22px 0 0;z-index:2;
}
.sheet-title{font-size:18px;font-weight:700}
.sheet-links{margin-left:auto;display:flex;gap:6px}
.sheet-links button{
  border:0;background:transparent;color:var(--text-2);font-size:14px;padding:6px 10px;
  border-radius:8px;cursor:pointer;font-family:inherit;
}
.sheet-links button:hover{background:var(--surface-2);color:var(--ink)}

.sheet-top{display:flex;align-items:center;padding:26px 28px 18px;gap:24px;flex-wrap:wrap}
.grade-wrap{display:flex;align-items:baseline;gap:10px;font-variant-numeric:tabular-nums}
#shGrade{font-size:64px;font-weight:800;color:var(--info);line-height:1}
.grade-sep{font-size:38px;color:var(--text-3)}
#shScore{font-size:44px;font-weight:800;color:var(--text)}
.counters{margin-left:auto;display:flex;gap:44px;text-align:center}
.counter b{display:block;font-size:30px;font-weight:800;color:var(--text)}
.counter span{color:var(--muted);font-size:13px}

.sheet-cells{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cell{flex:1;text-align:center;padding:16px 10px;border-right:1px solid var(--line)}
.cell:last-child{border-right:0}
.cell span{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
.cell b{font-size:20px;font-weight:700;color:var(--text)}

.sheet-analysis{padding:22px 28px 8px}
.analysis-title{color:var(--text-2);font-size:14px;margin-bottom:18px}
.rings{display:flex;gap:26px;justify-content:space-around;flex-wrap:wrap}
.ring{text-align:center}
.ring svg{width:92px;height:92px;transform:rotate(-90deg)}
.ring .val{font-size:19px;font-weight:700;color:var(--text);margin-top:-64px;margin-bottom:44px}
.ring .lab{color:var(--muted);font-size:13px}

.quote-card{
  margin:16px 28px 8px;border:1px solid var(--line);border-radius:16px;padding:18px 22px;background:var(--quote-bg);
}
.quote-head{color:var(--warn);font-size:14px;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.quote-speak{margin-left:auto;border:0;background:transparent;cursor:pointer;font-size:16px}
.quote-en{font-size:17px;font-style:italic;color:var(--text);line-height:1.7}
.quote-cn{color:var(--muted);font-size:14px;margin-top:8px}

.sheet-foot{display:flex;gap:10px;padding:18px 28px 24px;flex-wrap:wrap;align-items:center}
.foot-left,.foot-right{display:flex;gap:10px;flex-wrap:wrap}
.foot-right{margin-left:auto}
.ghost{
  border:1px solid var(--line);background:var(--surface);color:var(--text-2);padding:10px 18px;
  border-radius:12px;font-size:14px;cursor:pointer;font-family:inherit;
}
.ghost:hover{background:var(--surface-2)}
.primary.inline{width:auto;margin:0;padding:10px 20px;border-radius:12px}

/* 课程列表（原站课程列表是 plain list：无卡片底、无外框，
   行内 12px 状态圆点 + 课号 + 状态/点数右对齐，行分隔 1px #f1f3f8）。
   注意：按钮默认 display 会让 <b> 变成 block 占满整行，这里用 grid 布局
   把「圆点 / 课号 / 右侧状态」分三列，课号列宽度固定 34px。 */
.grid{
  display:grid;
  padding:12px 28px 16px;
}
.gitem{
  display:grid;grid-template-columns:12px 34px 1fr;align-items:center;gap:0 10px;
  width:100%;text-align:left;
  border:0;border-bottom:1px solid var(--border-2);border-radius:0;padding:10px 4px;
  cursor:pointer;background:transparent;font-family:inherit;color:var(--text-2);
}
.gitem:last-child{border-bottom:0}
.gitem:hover{background:var(--surface-2)}
.gitem > b{font-size:14px;font-weight:600;color:var(--text-strong);margin:0}
.gitem > small{color:var(--muted);font-size:12px;text-align:right}
.gitem .lg{margin-right:0}
.legend{display:flex;gap:18px;align-items:center;padding:0 28px 22px;color:var(--muted);font-size:13px}
.lg{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-1px}
.lg.perfect{background:var(--ok-line)}.lg.ok{background:var(--ok-soft)}.lg.wrong{background:var(--bad-soft)}.lg.todo{background:var(--surface-3)}

/* 学习分析 */
#anaBody{padding:20px 28px 28px}
.ana-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px dashed var(--line);font-size:15px}
.ana-row b{font-variant-numeric:tabular-nums}
.bars{margin-top:18px}
.bar-line{margin:14px 0}
.bar-line .bl-top{display:flex;justify-content:space-between;font-size:13px;color:var(--text-2);margin-bottom:6px}
.bar-track{height:10px;border-radius:6px;background:var(--surface-3);overflow:hidden}
.bar-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,#8b5cf6,#22c55e)}
/* ---------- 答案卡（对齐原站实测：语块框 + 悬浮 chip + 48px 词 + 24px 音标行 + 4px 词性下划线） ---------- */
#resultBox .card{display:flex;flex-wrap:wrap;gap:16px 20px;justify-content:center;align-items:flex-end;padding:0 16px;margin:12px 0 6px}
#resultBox .ck{position:relative;display:inline-flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;
  gap:12px 10px;padding:8px 10px 6px;margin-top:34px;--cc:var(--ck-subj)}
#resultBox .ck::before{content:"";position:absolute;inset:0;z-index:0;border:1.5px solid color-mix(in srgb,var(--cc) 50%,transparent);border-radius:18px;pointer-events:none}
/* 语块色 = 原站 Yh 表的 solidHex（主语/谓语/宾语/表语/补语/定语/状语…） */
#resultBox .ck.l-subj{--cc:var(--ck-subj)}
#resultBox .ck.l-verb{--cc:var(--ck-verb)}
#resultBox .ck.l-obj{--cc:var(--ck-obj)}
#resultBox .ck.l-pred{--cc:var(--ck-pred)}
#resultBox .ck.l-comp{--cc:var(--ck-comp)}
#resultBox .ck.l-attr{--cc:var(--ck-attr)}
#resultBox .ck.l-adv{--cc:var(--ck-adv)}
#resultBox .ck.l-clause{--cc:var(--ck-clause)}
#resultBox .ck.l-other{--cc:var(--ck-clause)}
#resultBox .ck-label{position:absolute;left:50%;top:0;transform:translate(-50%,-60%);z-index:2;white-space:nowrap;
  font-size:10px;font-weight:500;line-height:1;letter-spacing:1px;padding:2px 6px;border-radius:9999px;background:var(--cc);color:#fff}
#resultBox .ck-words{position:relative;z-index:1;display:inline-flex;flex-wrap:wrap;align-items:flex-end;gap:12px 10px}
/* ---------- 新手引导（原版 guide-hint：overflow-hidden + max-height/margin/opacity 三合一过渡） ---------- */
.guide-hint{overflow:hidden;transition:max-height .3s ease-in-out,margin-bottom .3s ease-in-out,opacity .3s ease-in-out;
  max-height:64px;margin-bottom:24px;opacity:1;text-align:center}
.guide-hint.hidden{max-height:0;margin-bottom:0;opacity:0;display:block!important}   /* hidden 只收不消失，过渡才看得见（盖过 .hidden 的 !important） */
/* guide-float：2s 上下浮动 6px（HeroGame.C3BdA3Cd.css） */
.guide-float{display:inline-flex;align-items:baseline;gap:8px;animation:guideFloat 2s ease-in-out infinite}
@keyframes guideFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.guide-txt{font-size:16px;color:var(--guide-txt)}          /* 原站 text-base text-foreground-faint */
.guide-ans{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:24px;font-weight:700;
  letter-spacing:.1em;color:var(--guide-ans)}              /* 原站 font-mono text-2xl font-bold tracking-widest text-gray-900 */
@media (min-width:768px){.guide-ans{font-size:30px}}   /* md:text-3xl */
/* ---------- 首屏封面（原版 HeroGameCover.Df2lGvHy.css） ----------
   遮罩盖住卡片主体，按任意键开始；文案 text-base(16px) font-medium(500) purple-400 #c084fc；
   cover-float 2s 上下浮动 6px；cover-pulse 2s opacity .7→1 + 12px 紫色光晕。
   挂在 #shellBody 里（已加 position:relative），absolute inset-0 全覆盖。
   第二十二轮：cover-float 改为纵向排布（主文案 + cover-go 引导条）——她把封面灰字升级成
   「明显开始引导条」（Enter 提交 / Ctrl+; 看答案 / Shift+? 全部快捷键），
   这样开局就知道主键，不用先去 Shift+? 速查表翻。cover-pulse 原样式与两条动画保持不变。 */
#cover{
  position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:var(--card);border-radius:0 0 18px 18px;cursor:pointer;
}
#cover.hidden{display:none}
.cover-float{display:inline-flex;flex-direction:column;align-items:center;gap:14px;animation:coverFloat 2s ease-in-out infinite}
@keyframes coverFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.cover-pulse{font-size:16px;font-weight:500;color:#c084fc;animation:coverPulse 2s ease-in-out infinite}
@keyframes coverPulse{0%,100%{opacity:.7;text-shadow:0 0 12px rgba(168,85,247,.4)}50%{opacity:1;text-shadow:0 0 12px rgba(168,85,247,.4)}}
/* 开始引导条：紫底胶囊 + 三个主键胶囊，压暗但一眼能扫完 */
.cover-go{
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  padding:7px 14px;border:1px solid var(--cover-go-line);border-radius:999px;background:var(--cover-go-bg);
  font-size:12px;color:var(--cover-go-ink);letter-spacing:.02em;
}
.cover-go kbd{
  font-family:inherit;font-size:11px;color:var(--cover-go-kbd-ink);background:var(--cover-go-kbd-bg);
  border:1px solid var(--cover-go-line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;
}
body.dark #cover{background:var(--card)}
/* 成分悬停 tooltip：对齐原站 SentenceComponentTooltip.Dar55lan.css 实测
   （fixed / min-w 240 / max-w 360 / padding 16 / radius 12 / 白底 + 0 4px 20px 26% 黑影 / z 9999；
   header = 14px 成分色圆点 + label 15px/600/#1f2937 + type 12px italic #9ca3af；
   body 13px/1.6/#4b5563；四向 8px 三角 + drop-shadow；300ms 延迟隐藏） */
#cmpTip{position:fixed;z-index:9999;display:none;min-width:240px;max-width:360px;padding:16px;
  background:var(--cmp-tip-bg);border:1px solid var(--cmp-tip-line);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.15);
  font-size:13px;line-height:1.6;color:var(--cmp-tip-ink);pointer-events:none;text-align:left}
#cmpTip.on{display:block}
#cmpTip .ct-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
#cmpTip .ct-dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto;background:var(--cc,#94a3b8);box-shadow:0 1px 3px rgba(0,0,0,.12);margin-top:2px}
#cmpTip .ct-label{font-size:15px;font-weight:600;color:var(--cmp-tip-label);line-height:1.2;flex:1}
#cmpTip .ct-type{font-size:12px;font-style:italic;color:var(--cmp-tip-type);line-height:1.2}
#cmpTip .ct-body{white-space:pre-wrap}
#cmpTip .ct-arrow{position:absolute;width:0;height:0;border:8px solid transparent;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}
#cmpTip[data-dir="top"] .ct-arrow{left:50%;bottom:-16px;transform:translateX(-50%);border-top-color:var(--cmp-tip-bg);border-bottom:0}
#cmpTip[data-dir="bottom"] .ct-arrow{left:50%;top:-16px;transform:translateX(-50%);border-bottom-color:var(--cmp-tip-bg);border-top:0}
#cmpTip[data-dir="left"] .ct-arrow{top:50%;right:-16px;transform:translateY(-50%);border-right-color:var(--cmp-tip-bg);border-left:0}
#cmpTip[data-dir="right"] .ct-arrow{top:50%;left:-16px;transform:translateY(-50%);border-left-color:var(--cmp-tip-bg);border-right:0}
/* 答案卡词栈四行几何：对齐原站 answer-word-stack 实测
   （gap-y 4.8px = 原站 0.1em@48px；IPA 12px / Arial+IPA 字体 / 字距 .72px；
    词形 gray-900 + 500；词性标签行 mt 0 —— 原站靠 gap 已经分开） */
#resultBox .wd{position:relative;display:flex;flex-direction:column;align-items:center;min-width:30px;gap:4.8px}
#resultBox .wd-ipa{display:flex;align-items:flex-end;min-height:24px;font-size:14px;font-weight:400;line-height:14px;color:var(--wd-ipa);white-space:nowrap;letter-spacing:.84px;font-family:Arial,"Noto Sans Mono IPA",sans-serif}
/* 词条几何对齐原站 ux2Asgjd.js：词形行 font-medium + p-0.5 md:p-1 + pb-1，
   字号随答案目标字号档（ue.standard：small 20px / medium 24px / large 30px，
   默认 medium = 24px，不是答题槽的 48px）；
   词性下划线 = .answer-pos-underline（absolute inset-x-0 -bottom-1 h-1 rounded-full） */
/* 答案卡词栈：原站 ux2Asgjd.js 词形 span 是 text-gray-900（hover 才变紫），
   但整个 .answer-word-stack（含音标行/释义/词性标签）外层是 gray-500 基调，
   词形本体仍是 gray-900 —— 本站 #111827 与原站 gray-900 一致，**不**改 gray-500 */
#resultBox .wd-w{position:relative;font-size:24px;line-height:1;font-weight:500;color:var(--wd-w);padding:2px 4px 4px}
@media (min-width:768px){#resultBox .wd-w{font-size:36px}}
/* 原站 ux2Asgjd.js 词形 span：hover:text-purple-500 + cursor-default
   （过渡期间 computed 是插值中的颜色，所以断言基色/悬浮色都取 300ms 后的稳定值） */
#resultBox .wd-w{cursor:default;transition:color .3s ease}
#resultBox .wd-w:hover{color:var(--wd-hover)}
#resultBox .wd.haspos .wd-w::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:4px;border-radius:9999px;background:var(--posc,#94a3b8)}
/* 释义行：原站 answer-definition-text 是 whitespace-nowrap、无宽度限制
   （长释义把词栈撑宽而不是折行）——去掉本站自加的 max-width 200px */
#resultBox .wd-cn{margin-top:0;font-size:14px;font-weight:500;line-height:1.35;color:var(--wd-cn);white-space:nowrap;text-align:center}
#resultBox .wd-cn i{display:block;font-style:normal;font-size:12px;line-height:15px;color:var(--wd-cn-i);margin-top:1px}
/* 词性标签：原站 .answer-pos-label —— 释义下一行、10px、字距 .3px、灰、mt 0（gap 已分开） */
#resultBox .wd-pos{margin-top:0;font-size:10px;font-weight:400;line-height:1.3;letter-spacing:.3px;color:var(--wd-pos);text-align:center}
/* 词性标记：颜色圆点 / 文字 / 两者（规格 §七，跟随设置面板） */
.pos{display:inline-flex;align-items:center;gap:3px;margin-left:3px;vertical-align:middle}
.pos-dot{width:5px;height:5px;border-radius:50%;display:inline-block;flex:0 0 auto}
.pos-txt{font-size:9px;line-height:11px;color:var(--wd-cn-i);font-style:normal}

/* ---------- S2：题型标签 / 满分 / 答案卡整句高亮 ---------- */
#titleType{margin-left:2px}
.chip{font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--purple-tint);color:var(--purple-deep);letter-spacing:.3px}
.chip.t-word{background:var(--chip-word-bg);color:var(--chip-word-ink)}
.chip.t-phrase{background:var(--chip-phrase-bg);color:var(--ok)}
.chip.t-chunk{background:var(--chip-chunk-bg);color:var(--chip-chunk-ink)}
.chip.t-combined{background:var(--chip-combined-bg);color:var(--chip-combined-ink)}
.chip.t-sentence{background:var(--purple-tint);color:var(--purple-deep)}
.grade-max{margin-top:6px;font-size:13px;color:var(--muted);font-weight:400}

/* ---------- 设置面板（对齐句乐部「设置」） ---------- */
#settings{position:fixed;inset:0;background:rgba(20,22,32,.38);z-index:70;display:flex;align-items:flex-start;justify-content:center;padding:5vh 20px;overflow:auto}
.set-card{
  width:min(880px,100%);background:var(--surface);border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(15,18,30,.22);display:flex;flex-direction:column;max-height:88vh;
}
.set-head{display:flex;align-items:center;padding:18px 22px 14px;border-bottom:1px solid var(--line)}
.set-title{font-size:20px;font-weight:700;letter-spacing:.5px}
.set-close{margin-left:auto;border:0;background:transparent;font-size:16px;color:var(--text-3);cursor:pointer;padding:6px 8px;border-radius:8px}
.set-close:hover{background:var(--surface-2);color:var(--text-2)}
.set-body{display:flex;min-height:0;flex:1}
.set-nav{
  width:172px;flex:none;padding:14px 10px;border-right:1px solid var(--line);
  overflow:auto;display:flex;flex-direction:column;gap:2px;
}
.set-nav button{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;
  padding:10px 12px;border-radius:10px;font-size:14px;color:var(--text-2);cursor:pointer;font-family:inherit;
}
.set-nav button span{font-size:15px;width:18px;text-align:center;flex:none}
.set-nav button:hover{background:var(--surface-2)}
.set-nav button.on{background:var(--purple-tint);color:var(--purple-deep);font-weight:600}
.set-main{flex:1;padding:22px 28px 30px;overflow:auto}
.set-group{display:flex;flex-direction:column}
.set-row{display:flex;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--border-2)}
.set-row:last-child{border-bottom:0}
.set-row.disabled .set-lab,.set-row.disabled .set-ctl{opacity:.42}
.set-lab{flex:1;min-width:0}
.set-lab b{display:block;font-size:15px;font-weight:600;color:var(--text)}
.set-lab small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.set-ctl{flex:none;display:flex;align-items:center;gap:12px}
/* 开关（句乐部是紫色圆钮） */
.sw{position:relative;width:46px;height:26px;border-radius:999px;border:0;background:var(--sw-off);cursor:pointer;transition:background .18s;flex:none;padding:0}
.sw i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--sw-thumb);box-shadow:0 1px 3px rgba(20,22,40,.22);transition:transform .18s}
.sw.on{background:var(--purple)}
.sw.on i{transform:translateX(20px)}
/* 下拉 */
.set-sel{
  appearance:none;border:1px solid var(--line);background:var(--surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
  padding:9px 34px 9px 14px;border-radius:10px;font-size:14px;color:var(--text);cursor:pointer;font-family:inherit;min-width:132px;
}
.set-sel:hover{border-color:var(--text-3)}
.demo{border:0;background:transparent;font-size:15px;cursor:pointer;padding:6px;border-radius:8px;color:var(--purple-deep)}
.demo:hover{background:var(--purple-tint)}
/* 滑杆 */
.set-range{-webkit-appearance:none;appearance:none;width:190px;height:5px;border-radius:999px;background:var(--track);outline:none;cursor:pointer}
.set-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--sw-thumb);border:2px solid var(--purple);box-shadow:0 1px 4px rgba(109,40,217,.3)}
.set-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--sw-thumb);border:2px solid var(--purple)}
.set-val{min-width:46px;text-align:right;font-size:14px;color:var(--text-2);font-variant-numeric:tabular-nums}
/* 卡片式单选（外观页） */
.set-cards{margin-bottom:28px}
.sc-head{margin-bottom:14px}
.sc-head b{font-size:15px;color:var(--text)}
.sc-head small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.pick{display:flex;gap:14px;flex-wrap:wrap}
.pick button{
  position:relative;width:172px;padding:16px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);
  cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:10px;
}
.pick button:hover{border-color:var(--purple-hover)}
.pick button.on{border-color:var(--purple);background:var(--purple-tint-2);box-shadow:0 2px 10px rgba(109,40,217,.08)}
.pk-t{font-size:14px;color:var(--text);font-weight:600}
.pk-mark{position:absolute;top:10px;right:12px;font-size:12px;color:var(--purple);font-weight:700}
.pk-d{font-size:16px;color:var(--text);line-height:1.35;text-align:center}
.pk-d.ipa{font-family:ui-monospace,Consolas,monospace;font-size:17px;color:var(--purple-deep)}
.set-ph{padding:70px 20px;text-align:center;color:var(--muted);font-size:15px;line-height:1.9}
.set-ph small{font-size:12px;color:var(--text-3)}
/* 设置 → 听力 / 口语（照两张原站实拍图：卡片、逐档次数/速度、显示内容、三张模式卡） */
.sm-wrap{max-width:100%}
.sm-title{font-size:17px;font-weight:700;color:var(--text);margin:0 0 4px}
.sm-sub{font-size:12px;color:var(--muted);margin:0 0 16px}
.sm-card{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:2px 20px 0;margin-bottom:16px}
.sm-stage{align-items:flex-start;padding:15px 0 8px;border-bottom:0}
.sm-stage.off .set-lab,.sm-stage.off+.sm-fields{opacity:.48}
.sm-stage .set-lab b{font-size:14px}
.sm-fields{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 13px;border-bottom:1px solid var(--border-2);padding-bottom:14px}
.sm-field{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.sm-field .set-sel{min-width:94px;padding:7px 30px 7px 12px;font-size:13px}
.sm-field .set-sel[disabled]{opacity:.45;cursor:not-allowed}
.sm-display{border-top:1px solid var(--border-2);border-bottom:0;align-items:flex-start;padding:16px 0}
.sm-inline{gap:16px;flex-wrap:wrap}
.sm-pair{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-2)}
.sm-mini{width:38px;height:22px}
.sm-mini i{width:16px;height:16px}
.sm-mini.on i{transform:translateX(16px)}
.sm-note{color:var(--text-3)}
.sm-block-title{font-size:14px;font-weight:600;color:var(--text);padding:18px 0 12px}
.sm-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-bottom:18px}
.sm-card-opt{
  position:relative;min-width:0;text-align:left;border:1.5px solid var(--line);border-radius:14px;
  background:var(--surface);padding:14px;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;gap:8px;min-height:120px;
}
.sm-card-opt:hover{border-color:var(--purple-hover)}
.sm-card-opt.on{border-color:var(--purple);background:var(--purple-tint-2)}
.sm-icon{width:28px;height:28px;border-radius:8px;background:var(--surface-2);color:var(--text-2);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.sm-card-opt.on .sm-icon{background:var(--purple-soft);color:var(--purple-deep)}
.sm-check{position:absolute;top:12px;right:12px;width:17px;height:17px;border:1px solid var(--line);border-radius:50%;color:#fff;font-size:11px;line-height:15px;text-align:center}
.sm-card-opt.on .sm-check{background:var(--purple);border-color:var(--purple)}
.sm-name{font-size:14px;font-weight:600;color:var(--text)}
.sm-desc{font-size:12px;color:var(--muted);line-height:1.55}
.sm-auto{border-top:1px solid var(--border-2);border-bottom:0}
.mx-ipa{font-family:ui-monospace,Consolas,monospace;color:var(--purple-deep)}
@media(max-width:640px){
  .sm-card{padding:2px 14px 0}
  .sm-cards{grid-template-columns:1fr}
  .sm-card-opt{min-height:0;gap:5px}
  .sm-inline{gap:10px}
  .sm-fields{gap:10px}
}
/* 设置联动：音标字号 / 题目字号 / 输入框样式
   （原站 Dh2gTkKs.js 字号表：音标 small=text-xs(12px) / medium=text-sm(14px) /
   large=text-base(16px)，默认档 medium=14px；
   题干字号 small=16px / medium=20px / large=24px） */
body.ipa-s #resultBox .wd-ipa{font-size:12px}
body.ipa-m #resultBox .wd-ipa{font-size:14px}
body.ipa-l #resultBox .wd-ipa{font-size:16px}
body.q-s #promptLabel,body.q-s #promptZh{font-size:14px}
body.q-m #promptLabel,body.q-m #promptZh{font-size:17px}
body.q-l #promptLabel,body.q-l #promptZh{font-size:20px}

/* ---------- 外观设置：主题 / 字体 / 背景色（原版 Wf 默认 inter + default + 浅色） ---------- */
body.dark{
  --ink:#e8e9ee;--muted:#9aa0ae;--line:#2a2b31;--card:#17181c;--bg:#0f0f10;
  --surface:#17181c;--surface-2:#22242b;--surface-3:#2a2b31;
  --text:#e8e9ee;--text-strong:#f1f3f8;--text-2:#b3b8c6;--text-3:#9aa0ae;--border-2:#2f3138;
  --ok:#4ade80;--ok-bg:rgba(34,197,94,.16);--ok-soft:rgba(34,197,94,.22);--ok-line:rgba(34,197,94,.42);
  --bad:#f87171;--bad-bg:rgba(239,68,68,.16);--bad-soft:rgba(239,68,68,.22);--bad-line:rgba(239,68,68,.42);
  --warn:#fbbf24;--warn-bg:rgba(245,158,11,.14);--warn-line:rgba(245,158,11,.42);
  --info:#60a5fa;--info-bg:rgba(59,130,246,.16);
  --purple-deep:#c4b5fd;--purple-tint:#2a2438;--purple-tint-2:#241f33;--purple-hover:#4c3f78;--purple-line:#3b2f5e;
  --focus-line:#4c3f78;--kbd-bg:#22242b;--track:#2f3138;--sw-off:#3a3d46;--quote-bg:#241f1a;
  --hero-1:#241f33;--hero-2:#221d2e;--hero-3:#1b2233;
  --ms-chip:#2a2438;--ms-chip-ink:#b3a8d6;--ms-types-bg:#1e1b26;--ms-types-line:#2f2b3d;
  /* ---------- 答题反馈族 token · 深色档（第二十四轮 P0 第二批） ---------- */
  --ok-bg-strong:rgba(34,197,94,.10);--bad-bg-strong:rgba(239,68,68,.10);--ok-line-soft:rgba(34,197,94,.42);
  --cmp-tip-bg:#22242b;--cmp-tip-line:rgba(255,255,255,.12);--cmp-tip-ink:#b3b8c6;--cmp-tip-label:#f1f3f8;--cmp-tip-type:#9aa0ae;
  --guide-txt:#8b90a0;--guide-ans:#f1f3f8;--ph-ink:#6a7183;
  --cover-go-bg:rgba(168,85,247,.12);--cover-go-line:rgba(168,85,247,.35);--cover-go-ink:#d8b4fe;--cover-go-kbd-bg:rgba(255,255,255,.08);--cover-go-kbd-ink:#e9d5ff;
  --wd-ipa:#9aa0ae;--wd-w:#f1f3f8;--wd-cn:#b3b8c6;--wd-cn-i:#8b93a7;--wd-pos:#9aa0ae;--wd-hover:#c4b5fd;
  --chip-word-bg:rgba(59,130,246,.16);--chip-word-ink:#7dd3fc;--chip-phrase-bg:rgba(34,197,94,.16);
  --chip-chunk-bg:rgba(245,158,11,.16);--chip-chunk-ink:#fcd34d;--chip-combined-bg:rgba(236,72,153,.16);--chip-combined-ink:#f9a8d4;
  --ck-subj:#fbbf24;--ck-verb:#fb7185;--ck-obj:#60a5fa;--ck-pred:#c4b5fd;--ck-comp:#d8b4fe;--ck-attr:#fb923c;--ck-adv:#22d3ee;--ck-clause:#94a3b8;
  --ans-tip-bg:#241f33;--ans-tip-line:#3b2f5e;--ans-tip-label-bg:#2a2438;
  --st-score:#e8e9ee;--cn-ink:#c3c8d6;--icon-ink:#b3b8c6;--kbd-face:#22242b;--kbd-ink:#b3b8c6;--panel-soft:#1e1f25;
  --dd-line:#2f3138;--dd-line-soft:#2a2b31;--dd-w-line:#2f3138;--dd-ink:#cbd5e1;--dd-ink-2:#b3b8c6;--dd-cn:#a8b0c2;--dd-dim:#9aa0ae;--dd-dim-2:#8b93a7;--dd-strong:#ddd6fe;--dd-tag-bg:#2a2438;--dd-th:#9aa0ae;--dd-td:#cbd5e1;--dd-hover:rgba(255,255,255,.04);--dd-info-ink:#7dd3fc;--dd-chip-u-bg:rgba(255,255,255,.06);--dd-chip-r-bg:rgba(245,158,11,.16);--dd-chip-s-bg:rgba(255,255,255,.04);--dd-say-hover:rgba(99,102,241,.16);--st-amber:#fbbf24;
  --slot-bad-bg:rgba(239,68,68,.14);--hover-line:#3b2f5e;--progress-track:rgba(255,255,255,.10);--sw-thumb:#f1f3f8;
  /* 夜间继续用同一张纸：纸面反相、琥珀只降饱和，不换产品性格。 */
  --paper-bg:#111820;--paper-sheet:#18222D;--paper-ink:#E7EDF4;--paper-ink-2:#B8C5D2;
  --paper-ruler:#334252;--paper-amber:#D9A454;--paper-red:#DE7777;
  --paper-veil:rgba(7,12,18,.62);--paper-shadow:0 26px 64px rgba(0,0,0,.42);
  --paper-shadow-soft:0 8px 24px rgba(0,0,0,.28);
  --paper-tint:#25303A;--paper-tint-line:#5A4A31;
}
body[data-bg="warm"]{--bg:#f5efd9;--card:#fdf9ec;--line:#e3d9c0}
body[data-bg="warm"]{--paper-bg:#F5EFD9;--paper-sheet:#FDF9EC;--paper-ruler:#DCCDAE;--paper-tint:#F8EFD8;--paper-tint-line:#E5CF9F}
body.dark[data-bg="warm"]{--bg:#252120;--card:#2c2724;--line:#3a3330;--surface:#2c2724;--surface-2:#3a3330;--surface-3:#3a3330}
body.dark[data-bg="warm"]{--paper-bg:#252120;--paper-sheet:#2C2724;--paper-ruler:#4A403A;--paper-tint:#3A3330;--paper-tint-line:#66543F}
body[data-bg="green"]{--bg:#def3e4;--card:#f0faf4;--line:#bfe3cd}
body[data-bg="green"]{--paper-bg:#DEF3E4;--paper-sheet:#F0FAF4;--paper-ruler:#BFE3CD;--paper-tint:#E6F5EA;--paper-tint-line:#B9DCC5}
body.dark[data-bg="green"]{--bg:#1c2422;--card:#212b28;--line:#2e3a36;--surface:#212b28;--surface-2:#2e3a36;--surface-3:#2e3a36}
body.dark[data-bg="green"]{--paper-bg:#1C2422;--paper-sheet:#212B28;--paper-ruler:#384A44;--paper-tint:#2E3A36;--paper-tint-line:#4B5E4F}
body.dark #topbar .icon-btn:hover,body.dark .ms-card,body.dark .sheet-card{color:var(--ink)}
body.font-system{font-family:system-ui,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
body.font-system #resultBox .wd-w{font-family:inherit}

/* ---------- 学习开关（原版 ev 默认：显示词性/翻译/结构/进度全开） ---------- */
body.no-pos #resultBox .pos{display:none}
body.no-pos #resultBox .tr-pos{display:none}
body.no-trans .wd-cn{display:none}
body.no-struct #resultBox .card{display:none}

/* ---------- 快捷键：改键按钮 + 速查表（原版 ? 打开） ---------- */
.kbd-cap{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:6px 10px;cursor:pointer;font:inherit;color:var(--ink)}
.kbd-cap:hover{border-color:var(--purple)}
.kbd-cap.mod{border-color:var(--purple);color:var(--purple);font-weight:600}
.kbd-cap.cap{background:var(--purple-soft);border-color:var(--purple);color:var(--purple)}
.kbd-cap kbd{font-family:inherit;font-size:12px}
.ghost{border:1px solid var(--line);background:transparent;border-radius:8px;padding:7px 14px;cursor:pointer;font:inherit;font-size:13px;color:var(--muted)}
.ghost:hover{border-color:var(--purple);color:var(--purple)}
.set-foot{padding:14px 0 2px;text-align:right}
#cheat{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;z-index:70}
#cheat.hidden{display:none}
.cheat-card{width:min(680px,92vw);max-height:82vh;overflow:auto;background:var(--card);border-radius:18px;box-shadow:0 24px 60px rgba(15,23,42,.25)}
.cheat-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);font-size:17px;font-weight:600}
.cheat-body{padding:8px 20px 16px}
.cheat-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px}
.cheat-row:last-child{border-bottom:0}
.cheat-row b{color:var(--purple);font-weight:600;white-space:nowrap}
.cheat-row kbd,.set-lab kbd,.cheat-foot kbd{font-family:inherit;font-size:12px;background:var(--kbd-bg);border:1px solid var(--line);border-radius:5px;padding:1px 5px;margin:0 1px}
.cheat-foot{padding:12px 20px 18px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}
#promptZh.hinting{color:var(--purple);letter-spacing:.14em;font-family:ui-monospace,Menlo,Consolas,monospace}

/* ---------- 连击飘字（对齐原站 HeroGame.C3BdA3Cd.css：italic 900 + 白描边 + 双色） ----------
   原站容器：absolute left-1/2 top-[15%] -translate-x-1/2、flex items-center gap-2，
   三段 span：Perfect/Great（text-2xl sm:text-4xl）+ ×（text-lg sm:text-2xl）+
   数字（text-2xl sm:text-4xl tabular-nums）；进场 transition-[opacity,transform]
   duration-300 ease-out（opacity 0→1、-translate-y-4→0），800ms 后自动撤。 */
#comboFx{
  position:fixed;left:50%;top:15%;transform:translateX(-50%) translateY(-16px);
  display:flex;align-items:center;gap:8px;z-index:300;
  opacity:0;pointer-events:none;white-space:nowrap;
  transition:opacity .3s ease-out,transform .3s ease-out;
}
#comboFx .cfx-word{font-size:36px;font-style:italic;font-weight:900;letter-spacing:.05em;-webkit-text-stroke:2px #fff;paint-order:stroke fill}
#comboFx .cfx-x{font-size:24px;font-style:italic;font-weight:900;letter-spacing:.05em;-webkit-text-stroke:2px #fff;paint-order:stroke fill}
#comboFx .cfx-num{font-size:36px;font-style:italic;font-weight:900;letter-spacing:.05em;font-variant-numeric:tabular-nums;-webkit-text-stroke:2px #fff;paint-order:stroke fill}
#comboFx.perfect .cfx-word,#comboFx.perfect .cfx-x,#comboFx.perfect .cfx-num{color:#ea580c;text-shadow:3px 3px 6px rgba(0,0,0,.15),0 0 30px rgba(234,88,12,.3)}
#comboFx.great .cfx-word,#comboFx.great .cfx-x,#comboFx.great .cfx-num{color:#0891b2;text-shadow:3px 3px 6px rgba(0,0,0,.15),0 0 30px rgba(8,145,178,.3)}
body.dark #comboFx.perfect .cfx-word,body.dark #comboFx.perfect .cfx-x,body.dark #comboFx.perfect .cfx-num{color:#fbbf24;-webkit-text-stroke:0;text-shadow:0 0 20px rgba(251,191,36,.6),0 0 40px rgba(251,191,36,.4)}
body.dark #comboFx.great .cfx-word,body.dark #comboFx.great .cfx-x,body.dark #comboFx.great .cfx-num{color:#22d3ee;-webkit-text-stroke:0;text-shadow:0 0 20px rgba(34,211,238,.6),0 0 40px rgba(34,211,238,.4)}
#comboFx.pop{opacity:1;transform:translateX(-50%) translateY(0)}

/* 小乌龟按钮（答案页逐词朗读） */
.turtle{
  margin-left:12px;border:1px solid var(--line);background:var(--surface);border-radius:999px;
  font-size:16px;padding:2px 10px;cursor:pointer;vertical-align:middle;
}
.turtle:hover{background:var(--purple-soft);border-color:var(--hover-line)}
/* 输入框样式「等宽 / 一条直线」（原站 inputStyle=Fixed / Line）：两档都是每词恒定 4ch
   宽的槽（原站 inputWidth Line/Fixed 固定 4ch；本站原来把 Fixed 写死 104px）。
   Line 档另加相邻槽 -ml-[2px] 让横线视觉连贯 —— 不是整行一条横线。
   renderSlotsLive 对 Fixed/Line 档不发 inline min-width，所以这条对真实槽也生效。 */
#slots.box-fixed .slot,#slots.box-line .slot{min-width:4ch}
#slots.box-line{gap:8px 2px}
#slots.box-line .slot + .slot{margin-left:-2px}
@media (max-width:640px){
  .set-body{flex-direction:column}
  .set-nav{width:auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
  .set-nav button{white-space:nowrap}
  .set-main{padding:18px 16px 26px}
  .set-row{flex-direction:column;align-items:flex-start;gap:10px}
  .set-range{width:150px}
}

/* ---------- 单词槽引擎（句乐部 tce：槽位即输入区） ---------- */
#slots.single{gap:0}
.slot.fixed{opacity:.55}                 /* fix 流里已固定（改完）的词 */
.slot.bad{background:var(--slot-bad-bg)}            /* 错词淡红底（红字红线见上半部分 .slot.bad） */
/* 隐藏 input 永久作为键盘接收器（视觉全部走槽位） */
#inputRow.mirror #typed{color:transparent;caret-color:transparent;border-bottom:0;font-size:14px;line-height:1;padding:0;height:14px}
#inputRow{margin-top:-6px}

/* ---------- 选择练习模式（对齐句乐部弹窗） ---------- */
#modeSel{position:fixed;inset:0;background:rgba(20,22,32,.42);z-index:80;display:flex;align-items:center;justify-content:center;padding:4vh 18px;overflow:auto}
.ms-card{
  position:relative;width:min(880px,100%);min-height:520px;background:var(--surface);border-radius:18px;overflow:hidden;
  box-shadow:0 24px 70px rgba(15,18,30,.28);display:flex;
}
.ms-modes{width:236px;flex:none;padding:20px 14px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.ms-side-head{font-size:15px;font-weight:700;color:var(--text);padding:2px 8px 14px}
.ms-side-head small{display:block;font-size:11px;font-weight:400;color:var(--text-3);margin-top:2px}
.ms-mode{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;
  padding:11px 12px;border-radius:12px;font-size:14px;color:var(--text-2);cursor:pointer;font-family:inherit;
}
.ms-mode:hover{background:var(--surface-2)}
.ms-mode.on{background:var(--purple-tint);color:var(--purple-deep);font-weight:600;box-shadow:inset 0 0 0 1px var(--purple-line)}
.ms-mode.lock{opacity:.5;cursor:not-allowed}
.ms-mode i{font-size:18px;font-style:normal;width:22px;text-align:center;flex:none}
.ms-main{flex:1;padding:20px 26px 24px;display:flex;flex-direction:column;min-width:0}
.ms-hero{
  display:flex;align-items:center;gap:16px;border-radius:14px;padding:16px 18px;margin-bottom:20px;
  background:linear-gradient(100deg,var(--hero-1) 0%,var(--hero-2) 60%,var(--hero-3) 100%);
}
.ms-hero-txt{flex:1;min-width:0}
.ms-title{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:800;color:var(--text);letter-spacing:.4px}
.ms-tag{font-size:13px;font-weight:600;color:var(--purple-deep);background:var(--surface);border-radius:999px;padding:3px 12px;box-shadow:0 1px 4px rgba(109,40,217,.12)}
.ms-sub{font-size:13.5px;color:var(--text-3);margin-top:8px;line-height:1.6}
.ms-hero-art{font-size:64px;line-height:1;filter:drop-shadow(0 6px 14px rgba(109,40,217,.18))}
.ms-block{margin-bottom:18px}
.ms-block-t{font-size:14px;font-weight:600;color:var(--text);margin-bottom:10px}
.ms-splits{display:flex;gap:10px;flex-wrap:wrap}
.ms-split{
  position:relative;border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 16px;
  font-size:14px;color:var(--text);cursor:pointer;font-family:inherit;min-width:104px;
}
.ms-split:hover{border-color:var(--purple-hover)}
.ms-split.on{border-color:var(--purple);background:var(--purple-tint-2);color:var(--purple-deep);font-weight:600}
.ms-split.on::after{content:"";position:absolute;top:9px;right:10px;width:6px;height:6px;border-radius:50%;background:var(--purple)}
.ms-types{border:1px solid var(--ms-types-line);background:var(--ms-types-bg);border-radius:14px;padding:14px 16px}
.ms-types-t{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.ms-types-t b{font-size:14px;color:var(--text)}
.ms-types-t small{margin-left:auto;font-size:12px;color:var(--text-3)}
.ms-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ms-chip{
  border:0;border-radius:999px;padding:6px 14px;font-size:13px;font-family:inherit;cursor:pointer;
  background:var(--ms-chip);color:var(--ms-chip-ink);transition:.15s;
}
.ms-chip.on{background:var(--purple);color:#fff;box-shadow:0 2px 8px rgba(109,40,217,.22)}
.ms-types-desc{font-size:12.5px;color:var(--text-3);line-height:1.6}
.ms-foot{margin-top:auto;display:flex;gap:12px;justify-content:flex-end;padding-top:16px}
.ms-foot .ghost,.ms-foot .primary{min-width:118px;justify-content:center;text-align:center}
.ms-close{position:absolute;top:12px;right:14px;border:0;background:transparent;font-size:15px;color:var(--text-3);cursor:pointer;padding:6px 8px;border-radius:8px}
.ms-close:hover{background:var(--surface-2);color:var(--text-2)}
.ms-desc{font-size:12.5px;color:var(--text-3);line-height:1.6;margin-top:10px}
@media (max-width:720px){
  .ms-card{flex-direction:column;min-height:0}
  .ms-modes{width:auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
  .ms-side-head{display:none}
  .ms-mode{white-space:nowrap}
  .ms-hero-art{font-size:46px}
}
/* 答案卡显示时 #slots 要真的收起（原站答案页不并排显示槽位） */
#slots.hidden{display:none}

/* ============ 句子树（Ctrl+2）与学习内容（Ctrl+1） ============ */
.tr-root, .lc-head { display:flex; align-items:baseline; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--dd-line); margin-bottom:14px; }
.tr-root b, .lc-head b { font-size:13px; color:var(--purple); letter-spacing:.02em; white-space:nowrap; }
.tr-root span, .lc-head span { font-size:16px; font-weight:700; color:var(--text-strong); line-height:1.5; }
.tr-tree { display:flex; flex-direction:column; gap:10px; }
.tr-node { border:1px solid var(--dd-line); border-radius:14px; padding:10px 12px; background:var(--panel-soft); }
.tr-node.l-主语 { border-left:4px solid #0369a1; } .tr-node.l-谓语 { border-left:4px solid #15803d; }
.tr-node.l-宾语 { border-left:4px solid #c2410c; } .tr-node.l-表语 { border-left:4px solid #be185d; }
.tr-node.l-状语 { border-left:4px solid #6d28d9; } .tr-node.l-定语 { border-left:4px solid #0f766e; }
.tr-node.l-从句 { border-left:4px solid #b45309; }
.tr-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.tr-hw { font-size:11px; color:var(--dd-dim); }
.tr-say { border:none; background:none; cursor:pointer; font-size:13px; padding:2px 4px; border-radius:6px; }
.tr-say:hover { background:var(--dd-say-hover); }
.tr-words { display:flex; flex-wrap:wrap; gap:6px; }
.tr-w { display:flex; flex-direction:column; align-items:center; min-width:34px; padding:4px 7px; border-radius:9px; background:var(--surface); border:1px solid var(--dd-w-line); font-size:13px; color:var(--dd-ink); cursor:default; }
.tr-w i { font-style:normal; font-size:9px; color:var(--dd-dim-2); font-family:Consolas, monospace; }
.tr-w .tr-pos{display:inline-flex;align-items:center;gap:3px;font-style:normal}
.tr-w .pos-txt{font-size:9px;color:var(--dd-dim-2)}
.tr-w.head { background:var(--dd-tag-bg); border-color:var(--focus-line); color:var(--dd-strong); font-weight:700; }
.tr-w:hover { border-color:var(--focus-line); }
.lc-cols { display:flex; flex-direction:column; gap:14px; }
.lc-block { border:1px solid var(--dd-line); border-radius:14px; padding:12px 14px; }
.lc-block h4 { margin:0 0 10px; font-size:13px; color:var(--dd-ink-2); }
.lc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:8px; }
.lc-w { border:1px solid var(--dd-line-soft); border-radius:10px; padding:7px 9px; background:var(--panel-soft); }
.lc-ww { font-size:14px; font-weight:700; color:var(--text-strong); display:flex; align-items:center; gap:6px; }
.lc-tag { font-size:9px; font-weight:600; color:var(--purple); background:var(--dd-tag-bg); border-radius:5px; padding:1px 5px; }
.lc-ipa { font-size:10px; color:var(--dd-dim); font-family:Consolas, monospace; }
.lc-cn { font-size:11px; color:var(--dd-cn); line-height:1.4; }
.lc-cn i { font-style:normal; color:var(--purple); margin-left:4px; }
.lc-syn { display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--dd-ink); padding:4px 0; line-height:1.5; }
.lc-block p { margin:4px 0; font-size:12px; color:var(--dd-cn); line-height:1.6; }
.lc-empty { font-size:12px; color:var(--dd-dim); padding:16px 0; text-align:center; }
/* ============ 结算页：题目明细表 ============ */
.sheet-detail{margin-top:18px;}
.dt{width:100%;border-collapse:collapse;font-size:12px;}
.dt th{text-align:left;color:var(--dd-th);font-weight:600;padding:6px 6px;border-bottom:1px solid var(--line);white-space:nowrap;}
.dt td{padding:6px 6px;border-bottom:1px solid var(--border-2);color:var(--dd-td);white-space:nowrap;}
.dt tbody tr:hover{background:var(--dd-hover);}
.dt tbody tr:last-child td{border-bottom:0}
.dt-st{font-size:11px;font-weight:700;border-radius:5px;padding:1px 6px;}
.dt-st.p{color:var(--ok);background:var(--ok-bg);}
.dt-st.g{color:var(--dd-info-ink);background:var(--info-bg);}
.dt-st.u{color:var(--dd-cn);background:var(--dd-chip-u-bg);}
.dt-st.r{color:var(--warn);background:var(--dd-chip-r-bg);}
.dt-st.s{color:var(--dd-dim);background:var(--dd-chip-s-bg);}
/* 结算页状态色统一到「答对=绿 / 答错=红」语义：Perfect 走 grade 用的蓝改绿，
   与练习页 .verdict 的绿同源；Great 保留信息蓝（原站无对应物，本站自有分级） */
.dt-st.p{color:var(--ok);background:var(--ok-bg)}
.dt-hint{color:var(--warn);font-weight:700;}   /* 用过高亮成琥珀色（规格 §十二 L159） */
.dt-empty{text-align:center;color:var(--dd-dim);padding:14px 0;}
@media (max-width:720px){
  .dt th:nth-child(4),.dt td:nth-child(4),.dt th:nth-child(9),.dt td:nth-child(9){display:none;}
}

/* ============ 答案浮层（原站 showAnswerTip：答案显示方式=「弹出在输入框上方」） ============ */
#ansTip{
  position:relative;margin:14px auto 10px;width:max-content;max-width:min(1100px,100%);
  padding:10px 16px 12px;border:1px solid var(--ans-tip-line);border-radius:14px;
  background:var(--ans-tip-bg);box-shadow:0 6px 18px rgba(109,40,217,.12);text-align:left;
}
#ansTip::after{                      /* 指向下方输入框的小尖角 */
  content:"";position:absolute;left:34px;bottom:-7px;width:12px;height:12px;
  background:var(--ans-tip-bg);border-right:1px solid var(--ans-tip-line);border-bottom:1px solid var(--ans-tip-line);
  transform:rotate(45deg);
}
#ansTip .tip-label{
  display:inline-block;margin-bottom:6px;padding:2px 8px;border-radius:999px;
  background:var(--ans-tip-label-bg);color:var(--purple);font-size:11px;font-weight:700;letter-spacing:.08em;
}
#ansTip .tip-en{font-size:22px;line-height:1.3;font-weight:600;color:var(--text-strong)}
#ansTip .tip-ipa{margin-top:2px;font-size:14px;font-weight:300;color:var(--wd-ipa)}
#ansTip .tip-cn{margin-top:4px;font-size:14px;line-height:1.5;color:var(--text-2)}

/* ============ 单词提示行（原版「单词提示」揭示区） ============ */
/* 提示字母单独占一行，下划线代表未揭示，不打乱上方题干区 */
.hint-line{
  margin:10px auto 0;width:min(880px,100%);
  font-family:Consolas,"SFMono-Regular","SF Mono",monospace;
  font-size:24px;font-weight:700;letter-spacing:.16em;
  color:var(--purple);text-align:center;
  white-space:pre-wrap;word-break:break-all;line-height:1.5;
}

/* ============ 顶栏复习本徽章（原版 S11 入口） ============ */
.rev-badge{
  border:1px solid var(--purple);background:var(--purple-soft);color:var(--purple);
  font-size:12px;font-weight:600;border-radius:999px;padding:2px 9px;cursor:pointer;
  line-height:1.6;
}
.rev-badge:hover{background:var(--purple);color:#fff}

/* ============ 笔记（原版 Ctrl+J，每句一条，自动保存） ============ */
#noteWrap{
  margin:14px auto 0;width:min(880px,100%);
  border:1px solid var(--line);border-radius:14px;background:var(--panel-soft);padding:12px 14px;
}
.note-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;font-size:13px;color:var(--ink)}
.note-tip{color:var(--muted);font-size:11px;margin-left:auto}
#noteBox{
  width:100%;min-height:110px;resize:vertical;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);
  padding:9px 11px;font-size:13px;line-height:1.6;color:var(--ink);
  font-family:inherit;
}
#noteBox:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-soft)}

/* ============ 暂停遮罩（原版 Ctrl+P：暂停游戏 / 继续游戏） ============ */
#pauseMask{
  position:fixed;inset:0;z-index:90;
  background:rgba(15,23,42,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
}
.pause-card{
  width:min(340px,88vw);background:var(--surface);border-radius:18px;padding:26px 24px;
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  box-shadow:0 24px 60px rgba(15,23,42,.3);
}
.pause-icon{font-size:40px;line-height:1}
.pause-card b{font-size:18px}
.pause-card small{color:var(--muted);font-size:12px}

/* ============ 生词本 / 复习本列表行 ============ */
.vc-row,.rv-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--line);border-radius:12px;
  padding:9px 12px;margin-bottom:8px;background:var(--surface-2);
}
.vc-row.learned{opacity:.5}
.vc-main{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.vc-main b,.rv-main b{font-size:14px;color:var(--text-strong)}
.vc-main i{font-style:normal;font-size:10px;font-weight:600;color:var(--purple);
  background:var(--purple-soft);border-radius:5px;padding:1px 6px}
.vc-main span{font-size:12px;color:var(--text-2)}
.vc-main small,.rv-main small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.rv-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.rv-when{font-size:12px;color:var(--text-2);text-align:right;flex-shrink:0;white-space:nowrap}
.rv-when i{display:block;font-style:normal;font-size:10px;color:var(--muted);margin-top:2px}
.rv-row.due{border-color:var(--warn-line);background:var(--warn-bg)}
.rv-row.due .rv-when b,.due{color:var(--warn)}
.vc-act{display:flex;gap:6px;flex-shrink:0}
.vc-act button{border:1px solid var(--line);background:var(--surface);border-radius:8px;
  padding:4px 9px;font-size:12px;color:var(--text-2);cursor:pointer}
.vc-act button:hover{background:var(--surface-2);border-color:var(--focus-line);color:var(--ink)}
#revStart:disabled{opacity:.45;cursor:not-allowed}

/* ============ 轻提示条幅（原版练完最后一课的自动跳转提示） ============ */
.toast{
  position:fixed;left:50%;top:18px;transform:translate(-50%,-140%);
  z-index:120;max-width:min(560px,92vw);
  background:#1f2430;color:#fff;font-size:13px;line-height:1.6;
  padding:10px 16px;border-radius:12px;box-shadow:0 18px 44px rgba(15,23,42,.32);
  opacity:0;transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .26s;
}
.toast.on{transform:translate(-50%,0);opacity:1}
/* ============ 模式专属区（听力三阶段 / 口语跟读 / 阅读盖原文） ============ */
#modeExtra{
  width:100%;max-width:calc(760px + 4vw);margin:0 auto 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px;
}
.mx-steps{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.mx-step{
  flex:1 1 auto;min-width:max-content;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  border-radius:10px;padding:6px 12px;font-size:13px;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s;
}
.mx-step:hover{border-color:var(--focus-line);color:var(--ink)}
.mx-step.done{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.mx-step.on{background:var(--purple-soft);border-color:var(--purple);color:var(--purple);font-weight:600}
.mx-body{font-size:14px;line-height:1.85;color:var(--ink)}
.mx-sub{margin:2px 0}
.mx-sub.cn{color:var(--muted)}
.mx-btn{
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:8px;padding:5px 11px;font-size:13px;cursor:pointer;
}
.mx-btn:hover{background:var(--surface-2);border-color:var(--focus-line)}
.mx-btn.danger{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.mx-tip{color:var(--muted);font-size:12px}
.mx-score{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);color:var(--purple)}
.mx-score b{font-size:20px}

/* ---------- T5 成长分析：分区 / 折线 / 直方图 / 连击榜 ---------- */
.ana-sec{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.ana-sec-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:10px;font-size:14px;font-weight:600;color:var(--ink);
}
.ana-sec-head small{font-weight:400;font-size:12px;color:var(--muted)}
.ana-sec-head i{font-style:normal;font-weight:600}
.ana-sec-head i.up{color:var(--green)}
.ana-sec-head i.down{color:var(--red)}

.ana-kpis{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px;
}
.ana-kpis .kpi{
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:8px 6px;text-align:center;
}
.ana-kpis .kpi b{display:block;font-size:17px;color:var(--purple);line-height:1.25}
.ana-kpis .kpi span{display:block;font-size:11px;color:var(--muted);margin-top:2px}

.spark{width:100%;height:34px;display:block;margin:2px 0 0}
.sp-wrap{display:flex;align-items:stretch;gap:6px;margin-top:2px}
.sp-y{
  display:flex;flex-direction:column;justify-content:space-between;
  font-size:10px;color:var(--muted);line-height:1;padding:1px 0 3px;flex:0 0 auto;text-align:right;
}
.sp-wrap .spark{flex:1;height:34px;margin:0}
.sp-axis{
  display:flex;justify-content:space-between;
  font-size:11px;color:var(--muted);margin-top:2px;
}
.sp-empty{
  font-size:12px;color:var(--muted);padding:12px 0;text-align:center;
  background:var(--surface-2);border-radius:8px;
}

.hist{display:flex;align-items:flex-end;gap:8px;height:112px;padding:4px 0 0}
.hist-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.hist-bar-wrap{flex:1;width:100%;display:flex;align-items:flex-end}
.hist-bar{
  width:100%;min-height:2px;border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,#a78bfa,var(--purple));
  transition:height .25s ease;
}
.hist-num{font-size:11px;color:var(--purple);font-weight:600;margin-top:3px}
.hist-lab{font-size:10px;color:var(--muted);margin-top:1px;white-space:nowrap}

.combo-list{display:flex;flex-direction:column;gap:6px}
.combo-row{display:flex;align-items:center;gap:8px;font-size:12px}
.cm-rank{
  width:18px;height:18px;flex:0 0 18px;border-radius:50%;
  background:var(--purple-soft);color:var(--purple);
  font-size:11px;font-weight:600;display:grid;place-items:center;
}
.cm-name{flex:0 0 68px;color:var(--ink)}
.cm-bar{flex:1;height:6px;background:var(--surface-3);border-radius:4px;overflow:hidden}
.cm-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#fbbf24,#f97316)}
.cm-num{flex:0 0 40px;text-align:right;color:var(--warn);font-weight:600}

/* 窄屏：KPI 四列压成两列，直方图列宽收窄，连击榜名字缩短 */
@media (max-width:640px){
  .ana-kpis{grid-template-columns:repeat(2,1fr)}
  .ana-sec-head{flex-wrap:wrap;gap:4px}
  .hist{gap:4px}
  .hist-lab{font-size:9px}
  .cm-name{flex:0 0 54px}
  .cm-num{flex:0 0 34px}
}

/* 全部掌握的空状态（当前拆分方式下没有可练的点了） */
.all-mastered{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:28px 16px;text-align:center;color:var(--muted);
}
.all-mastered b{font-size:19px;color:var(--ink);letter-spacing:.3px}
.all-mastered span{font-size:13px;line-height:1.7;max-width:420px}
.all-mastered .am-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.all-mastered .ghost{padding:7px 16px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:13px;cursor:pointer;transition:.16s}
.all-mastered .ghost:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-soft)}

/* 自定义词性颜色（设置 → 学习） */
.posc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 12px;max-width:420px}
.posc{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink);cursor:pointer}
.posc input[type=color]{
  width:22px;height:22px;padding:0;border:1px solid var(--line);border-radius:6px;
  background:var(--surface);cursor:pointer;
}
.posc input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.posc input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}
@media (max-width:640px){ .posc-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* 成就徽章（☰ → 成就；2026-10-19） */
.bdg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.bdg{
  display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  padding:16px 10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--card,#fff);
  opacity:.55;filter:grayscale(1);transition:.16s;
}
.bdg.on{opacity:1;filter:none;border-color:var(--purple-soft);background:var(--purple-soft)}
.bdg-icon{font-size:30px;line-height:1}
.bdg b{font-size:14px;color:var(--ink)}
.bdg small{font-size:12px;color:var(--muted);line-height:1.5}
.bdg-date{font-style:normal;font-size:11px;color:var(--muted)}
.bdg.on .bdg-date{color:var(--purple);font-weight:600}
.bdg-bar{width:100%;height:5px;border-radius:999px;background:var(--line);overflow:hidden}
body.dark .bdg.on{background:rgba(124,58,237,.16)}
.bdg-bar i{display:block;height:100%;border-radius:999px;background:var(--purple);transition:width .3s}
.bdg-pct{font-style:normal;font-size:11px;color:var(--muted)}
@media (max-width:640px){ .bdg-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* ============ 练习页状态条（status.js：剩余题数 / 预计剩余时间 / 已保存题数） ============
   刻意压小压淡：练习页按她的要求是极简的，这行是给「还剩多少」做参考，不抢输入框的注意力 */
.pace-line{
  margin:6px 32px 0;font-size:11px;line-height:1.6;letter-spacing:.02em;
  color:var(--muted);font-variant-numeric:tabular-nums;
}
.pace-line.hidden{display:none}
@media (max-width:640px){ .pace-line{margin:6px 14px 0} }
/* ============ 答题区底部按键提示（hintbar.js：ADHD 第二批①，句乐部同款常驻提示） ============
   刻意做成「一行压暗的普通文字」而不是一排 chip/button：⑬ 回归同时断言
   「练习页没有底栏快捷键条」「没有残留可点快捷键 chip」「没有播放键」，
   做成纯元素 + 零 data-act 才能既给到 ADHD「随时看得见键位」又不破极简口径。
   键位是 tables.js KEY_DEF 默认值（用户自定义后这里不跟随，见 hintbar.js 头注）。 */
.key-hint{
  margin:8px auto 0;padding:0 4px;line-height:1.7;text-align:center;
  font-size:11px;color:var(--muted);letter-spacing:.02em;
  user-select:none;-webkit-user-select:none;cursor:default;
}
.key-hint .kh-k{margin:0 2px 0 6px;font-size:11px;color:var(--muted)}
.key-hint kbd{
  font-family:inherit;font-size:10px;color:var(--muted);
  background:var(--kbd-bg);border:1px solid var(--line);border-radius:4px;
  padding:1px 5px;border-bottom-width:2px;
}
.key-hint .kh-sep{margin:0 4px;color:var(--line);font-style:normal}
@media (max-width:640px){ .key-hint{font-size:10px;line-height:2} .key-hint .kh-k{margin-left:4px} }
/* ============ 键盘焦点可见（a11y） ============
   原来全站只有 #typed / #noteBox 有 focus 样式，按钮一律吃浏览器默认圈。
   :focus-visible 只在键盘（Tab）操作时出现，鼠标点击不会多一圈。 */
button:focus-visible,select:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--purple);outline-offset:2px;
}
body.dark button:focus-visible,body.dark select:focus-visible,body.dark a:focus-visible,
body.dark input:focus-visible,body.dark textarea:focus-visible{outline-color:#a78bfa}
#typed:focus-visible{outline:none}          /* 答题框常驻焦点，它的「焦点」由底线变色表示 */
/* ============ 我自己的词书（mybooks.js：导入作文模板等自建内容来默写） ============ */
.mb-body{padding:18px 28px 4px;display:flex;flex-direction:column;gap:10px}
.mb-tip{margin:0;font-size:13px;line-height:1.7;color:var(--muted)}
.mb-tip code{background:var(--surface-2);border-radius:4px;padding:1px 5px;font-size:12px;color:var(--text-2)}
.mb-warn{font-size:12px;color:var(--warn)}
.mb-input{
  width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;font-size:14px;font-family:inherit;color:var(--ink);background:var(--card,#fff);
}
.mb-text{
  width:100%;box-sizing:border-box;min-height:190px;resize:vertical;
  border:1px solid var(--line);border-radius:10px;background:var(--card,#fff);
  padding:11px 13px;font-size:13px;line-height:1.7;color:var(--ink);font-family:inherit;
}
.mb-input:focus,.mb-text:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-soft)}
.mb-count{font-size:12px;color:var(--muted);min-height:18px}
.mb-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mb-row .primary{flex:0 0 auto}
.mb-existing{border-top:1px solid var(--line);padding-top:12px;margin-top:2px}
.mb-existing .set-sel{flex:1 1 200px;min-width:0}
body.dark .mb-input,body.dark .mb-text{background:#1b1c21;color:var(--ink)}

/* ============ 响应式：手机宽度收敛（P2 · 第二十六轮，2026-10-20） ============
   起因：㊵ 把视口压到 360/414px 逐状态扫「越出视口」的元素，抓到两处真问题——
   ① 头部统计 #shellStats 与标题挤在一行、被 #shell{overflow:hidden} 裁掉（目标环画到视口外）；
   ② `.slot` 在手机上仍是 48px 巨字 + 32px 内边距，一行放不下两个词、纵向拉得很长。
   判据在 tests/regress.js ㊵（16 个状态无横向溢出 + 三条关键收敛）。 */
@media (max-width:640px){
  /* 头部：标题与统计允许换行；统计自己也能换行，别被裁 */
  #shellHead{padding:10px 14px;gap:8px 10px;flex-wrap:wrap}
  #shellTitle{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #shellStats{gap:12px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
  #shellStats .stat{font-size:12px}
  #shellStats #stScore{font-size:16px}
  #shellProgress{margin:10px 14px 0}
  /* 答题区：内边距收窄；槽位字号 48 → 30px（手机一行放得下更多词，不至于顶满一屏） */
  #shellBody{padding:18px 14px}
  .slot{font-size:30px;min-width:40px;min-height:44px;padding:0 8px 6px}
  #promptZh{font-size:15px}
  /* 手机没有物理键盘：按键提示条只在键盘流下有意义，窄屏收起来 */
  #keyHint{display:none}
  /* 浮层：给内容让出宽度 */
  #settings{padding:3vh 10px}
  /* 结算页：SSS / 18,000 / 得分 一行在 360px 下比视口宽 18px（㊵ 抓到的真溢出）——字号收一档并允许换行 */
  .sheet-top{padding:18px 16px 12px;gap:12px 16px}
  .grade-wrap{gap:6px;flex-wrap:wrap}
  #shGrade{font-size:44px}
  .grade-sep{font-size:26px}
  #shScore{font-size:30px}
  .counters{gap:20px}
  .counter b{font-size:22px}
}

/* ============ 动效统一（P3 · 第二十七轮，2026-10-20） ============
   现状：面板只用 `.hidden{display:none!important}` 硬开关，**完全没有入场动效**；
   答题反馈里只有判错槽的 slotShake（app.js 里的 WAAPI）与连击特效 .comboFx。
   做法：纯 CSS —— display 由 none 变回来时动画会自动重放，所以本块不动 app.js 一行。
   口径：只做「入场」不做「退场」（退场要等 animationend 才能 display:none，那会把手伸进 app.js）；
   时长统一走 `--dur-*`（1=快·微交互 / 2=中·入场 / 3=慢·大块位移），缓动统一 `--ease-out`。 */
:root{--dur-1:.15s;--dur-2:.24s;--dur-3:.34s;--ease-out:cubic-bezier(.2,.8,.2,1)}
@keyframes panelIn{from{opacity:0}to{opacity:1}}
@keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes drawerIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
/* 面板族：遮罩淡入 + 卡片上浮（#settings/#cheat/#sheet/#modeSel/#treePane/#learnPane/#analytics/#vocabPanel/#pauseMask/#noteWrap/#cover）；
   2026-10-21 补 #reviewPanel/#badgesPanel/#myBooksPanel —— 前两个自 P3 动效批次起就漏了入场动画，第三个随浮层定位一起补 */
#settings,#cheat,#sheet,#modeSel,#treePane,#learnPane,#analytics,#vocabPanel,#pauseMask,#noteWrap,#cover,#reviewPanel,#badgesPanel,#myBooksPanel{animation:panelIn var(--dur-1) var(--ease-out)}
#settings>.set-card,#cheat>.cheat-card,#sheet>.sheet-card,#modeSel>.ms-card,#pauseMask>.pause-card,#treePane>.sheet-card,#learnPane>.sheet-card,#analytics>.sheet-card,#vocabPanel>.sheet-card,#reviewPanel>.sheet-card,#badgesPanel>.sheet-card,#myBooksPanel>.sheet-card{animation:cardIn var(--dur-2) var(--ease-out)}
/* 抽屉：从左侧滑入 */
#drawer{animation:panelIn var(--dur-1) var(--ease-out)}
#drawer>.drawer-card{animation:drawerIn var(--dur-2) var(--ease-out)}
/* 答题反馈：判对的结果条弹入（判错槽的抖动仍由 app.js 的 slotShake 负责，不重复做） */
#resultBox.good{animation:popIn var(--dur-2) var(--ease-out)}
/* 无障碍：系统开了「减少动态效果」时把动画与过渡压到几乎瞬时 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}

/* ============ 错题翻盘加成标签（ADHD 第二批②，2026-10-20） ============
   判对一道「以前错过」的题时，答案卡上多一枚「翻盘 ×1.5 +N」小胶囊。 */
.cb-up{display:inline-flex;align-items:center;margin-left:8px;padding:2px 9px;border-radius:999px;
  background:var(--purple-tint);color:var(--purple-deep);font-size:12px;font-weight:600;vertical-align:2px}


/* ============ 纸上校对室（2026-11-15 整站外观） ============
   原则：页面是一张摊开的校对纸，工作面是稿纸白，浮层是压在纸上的便签。
   这一层只覆盖未被回归锁死的材质与页边；答题槽四态、答案卡字号 / 颜色、
   封面文案与动画、plain list、动效时长、53px 页眉全部沿用原值。 */
body{background:var(--paper-bg)}
#topbar{background:var(--paper-sheet);border-bottom-color:var(--paper-ruler)}
#topbar .stat,#promptLabel{color:var(--text-3)}
#stScore{color:var(--paper-ink)}
#stage{background:var(--paper-bg)}
#shell{
  background:var(--paper-sheet);border-color:var(--paper-ruler);
  box-shadow:var(--paper-shadow-soft);
}
#shellHead{background:var(--paper-sheet)}
#shellTitle{color:var(--paper-ink)}
#shellProgress{background:var(--paper-ruler)}
#shellBar{background:var(--paper-amber)}
#shellBody{background:var(--paper-sheet)}
#promptZh{color:var(--paper-ink)}
#typed{border-bottom-color:var(--paper-ruler);color:var(--paper-ink)}
#typed:focus{border-bottom-color:var(--paper-amber)}
#resultBox{border-color:var(--paper-ruler);background:var(--paper-sheet);box-shadow:var(--paper-shadow-soft)}
#resultBox .cn{color:var(--paper-ink-2)}
#resultBox .en{color:var(--paper-ink)}
#cover{background:var(--paper-sheet)}
#cover .cover-pulse{text-shadow:0 0 12px rgba(216,146,43,.28)}
#drawer,#summary,#sheet,#listPanel,#analytics,#reviewPanel,#vocabPanel,#treePane,#learnPane,#badgesPanel,#myBooksPanel,
#settings,#modeSel,#cheat,#pauseMask{background:var(--paper-veil)}
.drawer-card,.sheet-card,.set-card,.ms-card,.cheat-card,.pause-card{
  background:var(--paper-sheet);border:1px solid var(--paper-ruler);box-shadow:var(--paper-shadow);
}
.sheet-head,.set-nav{border-color:var(--paper-ruler)}
.sheet-head{background:var(--paper-sheet)}
.set-nav button.on{
  background:var(--paper-tint);color:var(--paper-ink);font-weight:600;
  box-shadow:inset 3px 0 0 var(--paper-amber);
}
.set-main,.sm-card,.sm-card-opt{background:var(--paper-sheet)}
.sm-card,.sm-card-opt{border-color:var(--paper-ruler)}
.sm-card-opt:hover{border-color:var(--paper-amber)}
.sm-card-opt.on{
  border-color:var(--paper-amber);background:var(--paper-tint);
  box-shadow:inset 0 0 0 1px var(--paper-tint-line);
}
.sm-card-opt.on .sm-icon{background:var(--paper-tint);color:var(--paper-ink)}
.sm-card-opt.on .sm-check,.seg button.on,.primary{background:var(--paper-ink);border-color:var(--paper-ink);color:var(--paper-sheet)}
.sm-card-opt.on .sm-check{border-color:var(--paper-ink)}
.primary:hover{background:var(--paper-ink-2);border-color:var(--paper-ink-2)}
#resultBox.bad .verdict{color:var(--paper-red)}
.ms-hero{
  background:var(--paper-tint);border:1px solid var(--paper-tint-line);
}
.ms-types,.mx-card,.mx-step{border-color:var(--paper-ruler)}
.mx-card,.mx-step{background:var(--paper-sheet)}
.quote-card{background:var(--paper-tint);border-color:var(--paper-tint-line)}
.quote-en{color:var(--paper-ink)}
.cb-up{background:var(--paper-tint);color:var(--paper-ink)}
button:focus-visible,select:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{
  outline-color:var(--paper-amber);
}
body.dark button:focus-visible,body.dark select:focus-visible,body.dark a:focus-visible,
body.dark input:focus-visible,body.dark textarea:focus-visible{outline-color:var(--paper-amber)}
body.dark #shellProgress{background:var(--paper-ruler)}
body.dark #shellBar{background:var(--paper-amber)}
body.dark #topbar,body.dark #shellHead,body.dark #shellBody,body.dark #cover,
body.dark .sheet-head,body.dark .set-main,body.dark .sm-card,body.dark .sm-card-opt,
body.dark .mx-card,body.dark .mx-step{background:var(--paper-sheet);color:var(--paper-ink)}
body.dark .set-nav button.on{color:var(--paper-ink)}
@media(max-width:640px){
  #shell,#drawer>.drawer-card,.sheet-card,.set-card,.ms-card{border-radius:12px}
}