/* Variant 4c — Native · Tint
   Axis: level-marker chroma → LOW chroma.
   Same "Native" shell. The HSK level marker keeps its 7 hues (so you can still
   tell a level apart by colour at a glance) but each one drops to a soft tonal
   fill with dark legible text — no white-on-saturated-solid, no neon.
   Roughly iOS/Material "tonal chip": fill ~8–12% of the hue, text at ~4.5:1.
   Reads as reference-tool colour coding rather than decoration. */

:root{
  --bg:#f2f2f7; --card:#ffffff; --sep:rgba(60,60,67,.18); --sep-soft:rgba(60,60,67,.12);
  --tx:#000000; --tx2:#3c3c43; --tx3:rgba(60,60,67,.6);
  --blue:#007aff; --blue-soft:#e8f2ff;
  /* 计划层（学习计划/每日目标）专用：浅蓝纸底 + 蓝图网格 + 虚线框，
     和实操层（卡组行实心白卡）形成框体语言上的分层 */
  --plan-bg:#f3f7fd;
  /* 低饱和：淡底 + 深字（每组前为底、后为字）
     色相冷暖交替（绿-橙-蓝-品红-青-红-紫），相邻级别不撞色 */
  --l1-bg:#e3f2e8;--l1-fg:#1e6b3a;   /* green  */
  --l2-bg:#faeedd;--l2-fg:#8f5610;   /* amber  */
  --l3-bg:#e4edfa;--l3-fg:#1f5cb8;   /* blue   */
  --l4-bg:#f8e8f1;--l4-fg:#a03068;   /* magenta*/
  --l5-bg:#dff0f0;--l5-fg:#0f6b6b;   /* teal   */
  --l6-bg:#fae7e5;--l6-fg:#b0342a;   /* red    */
  --l7-bg:#ebe7f8;--l7-fg:#4b3a9e;   /* violet */
  --l1:#1e6b3a;--l2:#8f5610;--l3:#1f5cb8;--l4:#a03068;--l5:#0f6b6b;--l6:#b0342a;--l7:#4b3a9e;
  --ease-out:cubic-bezier(.32,.72,0,1);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--tx);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
  -webkit-tap-highlight-color:rgba(0,0,0,.06)}
#app{max-width:520px;margin:0 auto;min-height:100dvh}
.hidden{display:none !important}

.topbar{position:sticky;top:0;z-index:20;padding:8px 12px 6px;
  background:rgba(249,249,251,.82);
  -webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);
  border-bottom:.5px solid var(--sep-soft)}
.brand{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:2px 4px 8px}
.brand small{display:none}
.searchbox{display:flex;align-items:center;height:36px;background:rgba(118,118,128,.12);
  border-radius:10px;padding:0 8px;margin:0 4px}
.searchbox .ico{width:14px;height:14px;fill:var(--tx3);flex:none;margin-right:6px}
.searchbox input{flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:16px/1 inherit;color:var(--tx)}
.searchbox input::placeholder{color:var(--tx3)}
.clear{border:0;background:none;color:var(--tx3);font-size:17px;cursor:pointer}
/* 首页入口（2026-10-22 重设计）：语法点 / 闪卡是两个**独立的大功能**，
   不再是两行 iOS cell。并排两张彩色功能卡，各有图标、副标题、条数，
   颜色互相区分 —— 用户一眼看出「这是两件事」。 */
.quicklink{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 4px 2px}
.feat{display:flex;flex-direction:column;align-items:flex-start;gap:9px;border:0;cursor:pointer;
  border-radius:14px;padding:14px 13px 12px;text-align:left;font:inherit;color:var(--tx);
  transition:transform .12s ease,box-shadow .12s ease}
.feat:active{transform:scale(.97)}
.feat-gp{background:#eef4ff;border:1.5px solid #cadfff}
.feat-fc{background:#fff3e6;border:1.5px solid #ffdcb5}
.feat-ico{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:9px;flex:none}
.feat-gp .feat-ico{background:linear-gradient(135deg,#2f6bff,#5a8bff)}
.feat-fc .feat-ico{background:linear-gradient(135deg,#f08c1f,#f7a94e)}
.feat-ico svg{width:19px;height:19px;fill:#fff}
.feat-tx{min-width:0}
.feat-tx b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.feat-tx small{display:block;margin-top:3px;font-size:11.5px;line-height:1.35;color:var(--tx3)}
.feat .qn{margin-top:auto;font-size:12.5px;font-weight:600;color:var(--tx2);min-height:15px}
.feat .fc-hint{margin-left:0;font-weight:400;color:#c47a1d}
/* 旧版单行样式保留给仍在引用的页面，不再用于首页 */
.qlink{display:flex;align-items:center;gap:6px;width:100%;border:0;background:var(--card);
  border-radius:10px;padding:11px 14px;font:500 14px/1 inherit;color:var(--tx);
  cursor:pointer;text-align:left}
.qlink:active{background:#e5e5ea}
.qlink .qn{margin-left:auto;font:400 12px/1 inherit;color:var(--tx3)}
.qlink::after{content:"";flex:none;width:7px;height:7px;
  border-right:2px solid rgba(60,60,67,.3);border-top:2px solid rgba(60,60,67,.3);
  transform:rotate(45deg)}
/* 说明性小字（语法点页引言等） */
.sep-note{margin-top:6px;font-size:12px;line-height:1.6;color:var(--tx3)}
.topbar.sub{display:flex;align-items:center;padding:6px 8px;
  background:rgba(249,249,251,.82);
  -webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);
  border-bottom:.5px solid var(--sep-soft)}
.back{border:0;background:none;color:var(--blue);font:400 17px/1 inherit;cursor:pointer;padding:6px 2px}
.back::before{content:"‹ ";font-size:22px;line-height:1}
/* ★ 二级顶栏标题绝对居中（2026-10-21 学生反馈「Flashcards 字样偏了」）：
   右侧按钮比左侧宽（回主页房子 + 学习页还有进度和开关），按 flex 剩余空间居中
   必然偏左（实测卡组页 -29px、学习页 -115px）。改为相对顶栏绝对定位居中，
   六个二级页（词条/汉字/语法/语法点/卡组/学习）一次修平；超长标题省略号截断。 */
.topbar.sub .tt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  flex:none;margin:0;max-width:72%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none}
.tt{flex:1;text-align:center;font-size:17px;font-weight:600;margin-right:44px}
/* ★★ 学习页顶栏两行制（2026-10-21 晚，学生截图：标题压住进度数字和开关）。
   学习页顶栏比其他二级页多两样常驻东西：进度数字（1 / 20）和汉字开关。
   单行 + 标题绝对居中 → 标题必然压到它们；单行 + flex 居中 → 必然偏左（-115px 的老毛病）。
   改两行：第一行 返回(34px) | 标题(真居中) | 回主页(34px)，左右等宽 → 标题永远正中、永不重叠；
   第二行放进度数字 + 汉字开关（居中，空的时候自动塌成 0 高）。其他五个二级页不受影响。 */
.topbar.sub.fc-studybar{display:grid;grid-template-columns:34px 1fr 34px;
  grid-template-rows:auto auto;column-gap:4px;row-gap:0;align-items:center}
.fc-studybar .back{grid-area:1/1;justify-self:start}
/* ★ 优先级必须压过 .topbar.sub .tt(0,3,0) 的绝对居中，否则标题又悬空压到第二行 —— 0,4,0 才稳 */
.topbar.sub.fc-studybar .tt{grid-area:1/2;position:static;transform:none;flex:none;margin:0;
  justify-self:center;max-width:100%;min-width:0;pointer-events:auto}
.fc-studybar .homebtn{grid-area:1/3;margin:0;justify-self:end}
.fc-studybar .fc-subrow{grid-column:1/-1;grid-row:2;display:flex;align-items:center;
  justify-content:center;gap:10px;min-height:0}
.fc-studybar .fc-subrow .fc-prog{margin:0}
.fc-studybar .fc-subrow .fc-mbtn{margin:0}
/* ★ 一键回主页（2026-10-21 学生反馈）：注入到每个二级顶栏右侧的房子按钮 */
.homebtn{border:0;background:none;color:var(--blue);cursor:pointer;flex:none;
  width:34px;height:34px;padding:5px;margin-left:auto;margin-right:2px}
.homebtn svg{width:22px;height:22px;fill:currentColor;display:block}
.homebtn:active{opacity:.6}

.filters{display:flex;align-items:center;gap:8px;padding:6px 16px;overflow-x:auto;
  background:var(--bg);position:sticky;top:104px;z-index:15}
.filters[hidden]{display:none}
.flabel{font-size:11px;font-weight:600;color:var(--tx3);flex:none}
.chips{display:flex;gap:6px}
/* 语法点列表的级别筛选条：6 个级别要能横向滚 */
.gpf{flex-wrap:wrap;margin:2px 0 6px}
.chip{display:inline-flex;align-items:center;gap:5px;border:0;background:rgba(118,118,128,.12);
  color:var(--tx);border-radius:999px;padding:4px 10px;font:500 12px/1.3 inherit;
  cursor:pointer;white-space:nowrap}
.chip.on{background:var(--blue);color:#fff}
/* 结果数做成独立小徽标 —— 跟级别数字分开，避免 "HSK 1 1" 被读成 "HSK 11"。
   margin-right 负值把徽标往右推到胶囊边缘，视觉左右留白才对称。 */
.chip .ct{margin-right:-5px;min-width:18px;padding:0 5px;border-radius:999px;
  background:rgba(118,118,128,.28);color:var(--tx2);font:700 11px/17px inherit;
  text-align:center;font-variant-numeric:tabular-nums}
.chip.on .ct{background:rgba(255,255,255,.28);color:#fff}
.bar{display:none}

.results{padding-bottom:calc(28px + var(--safe-b))}
.sec-title{padding:18px 20px 6px;font:600 13px/1.2 inherit;color:var(--tx3);
  text-transform:uppercase;letter-spacing:-.01em}
/* 分组列表 */
.row{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--card);
  cursor:pointer;position:relative}
.row::after{content:"";position:absolute;left:16px;right:0;bottom:0;height:.5px;background:var(--sep-soft)}
.row:last-child::after{display:none}
.row:active{background:#e5e5ea}
.row::before{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;
  border-right:2px solid rgba(60,60,67,.3);border-top:2px solid rgba(60,60,67,.3);
  transform:translateY(-50%) rotate(45deg);margin-top:-2px}
.row .en{padding-right:16px}
.row .w{font-size:17px;letter-spacing:-.01em}
.row .py{font-size:13px;color:var(--tx3)}
.row .en{flex:1;min-width:0;text-align:right;font-size:13px;color:var(--tx3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- 英文反查结果（English → Chinese）----
   两行：上排 级别 + 词头 + 拼音（与搜索列表一致），下排 命中的那个英文义项并高亮查询词 */
.row.rv{flex-wrap:wrap;padding-top:9px;padding-bottom:9px}
.row.rv .en{flex:1 0 100%;text-align:left;white-space:normal;font-size:13px;
  line-height:1.45;color:var(--tx2);margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 命中的英文词 */
.hl{background:#fff2b8;border-radius:3px;padding:0 1px;color:inherit;font-weight:600}
/* Words 模式搜不到、但英文能搜到时的一键切换条 */
.ensw{margin:0 16px 10px;padding:11px 14px;background:var(--blue-soft);color:var(--blue);
  border-radius:10px;font:500 13px/1.4 inherit;cursor:pointer}
.ensw:active{opacity:.6}

/* ★ 级别标记：淡底 + 深字，低饱和 */
.badge{font:600 11px/1 inherit;letter-spacing:.01em;border-radius:5px;padding:3px 5px;flex:none;
  color:var(--lk);background:var(--lb)}
.badge.l1{--lk:var(--l1-fg);--lb:var(--l1-bg)}
.badge.l2{--lk:var(--l2-fg);--lb:var(--l2-bg)}
.badge.l3{--lk:var(--l3-fg);--lb:var(--l3-bg)}
.badge.l4{--lk:var(--l4-fg);--lb:var(--l4-bg)}
.badge.l5{--lk:var(--l5-fg);--lb:var(--l5-bg)}
.badge.l6{--lk:var(--l6-fg);--lb:var(--l6-bg)}
.badge.l7{--lk:var(--l7-fg);--lb:var(--l7-bg)}

.empty{padding:60px 24px;text-align:center;color:var(--tx3);font-size:14px;line-height:1.6}
.empty b{display:block;color:var(--tx);font-size:15px;margin-bottom:4px}
.hint{padding:6px 24px 24px;font-size:12px;line-height:1.6;color:var(--tx3)}
/* 首页末尾的 HSK 7–9 上线预告：紧跟搜索提示，不抢视觉焦点 */
.hint.roadmap{padding-top:0}
.hint.roadmap b{color:var(--tx);font-weight:600}

.page{padding:14px 16px calc(40px + var(--safe-b))}
.hero{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:16px}
.hero .big{font-size:40px;font-weight:600;letter-spacing:-.01em}
/* 词头大字 = 可点汉字：点一下进「含该字的所有词」页（2026-10-07 用户要求）。
   蓝色点状下划线 = 可点暗示，颜色沿用拼音的 --blue，不加底色不改字重。 */
.hero .big .big-ch{cursor:pointer;border-bottom:3px dotted var(--blue);padding-bottom:2px}
.hero .big .big-ch:active{opacity:.55}
.py-line{font-size:16px;color:var(--blue)}
.pos{font-size:12px;color:var(--tx3);margin-top:2px}
.hero-end{margin-left:auto}
.kv{font-size:12px;color:var(--tx3);padding:8px 20px}
h3.blk{font:600 13px/1.2 inherit;color:var(--tx3);text-transform:uppercase;
  margin:22px 4px 8px}
h3.blk .note{text-transform:none;font-weight:400}
.gloss{background:var(--card);border-radius:14px;padding:14px 16px;font-size:16px;line-height:1.5}
.gloss .pos-en{color:var(--blue);font-weight:600;margin-right:6px}
/* 多义项：义项编号 + 例句分组标题 */
.gloss .gi{padding:3px 0}
.gloss .gi+.gi{border-top:1px dashed var(--line,rgba(0,0,0,.08))}
.gi-n{display:inline-block;min-width:17px;height:17px;line-height:17px;text-align:center;
  border-radius:50%;background:var(--blue);color:#fff;font-size:11px;font-weight:700;
  margin-right:7px;vertical-align:1px}
h3.blk .sn{text-transform:none;color:var(--blue);font-weight:600}
.card{background:var(--card);border-radius:14px;padding:12px 16px;margin-bottom:10px}
.card .card-hd{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.card .hw{font-size:17px;font-weight:600;color:var(--blue);cursor:pointer}
.card .hp{font-size:13px;color:var(--tx3)}
.card .hen{font-size:13px;color:var(--tx3)}
.card .diff{font-size:14px;line-height:1.5;margin-top:4px}
.ex{background:var(--card);border-radius:14px;padding:14px 16px;margin-bottom:10px}
.ex .zh{font-size:19px;line-height:2.1}
.ex .py{font-size:12px;color:var(--tx3);margin-top:2px}
.ex .en{font-size:14px;color:var(--tx2);margin-top:6px}
/* 词组区 / 句子区 的小分隔标签 */
.phlbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);
margin:14px 2px 8px;font-weight:600}
.phlbl:first-child{margin-top:2px}

/* ---- 语法点索引（2026-10-12） ----
   沿用 .grp / .badge / .card / .ex 现有组件，只加「范畴小标题」和「语法点行」。 */
.gpcat{font:600 11px/1.2 inherit;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx3);margin:14px 2px 6px}
.grow{display:flex;align-items:center;gap:10px;background:var(--card);
  padding:10px 14px;cursor:pointer;position:relative}
.grow+.grow{margin-top:2px}
.grow:first-of-type{border-radius:12px 12px 0 0}
.grow:last-of-type{border-radius:0 0 12px 12px}
.grow:only-of-type{border-radius:12px}
.grow::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;
  border-right:2px solid rgba(60,60,67,.3);border-top:2px solid rgba(60,60,67,.3);
  transform:translateY(-50%) rotate(45deg);margin-top:-2px}
.grow:active{background:#e5e5ea}
.grow .gnn{flex:1;min-width:0;font-size:14.5px;line-height:1.45}
.grow .gnb{flex:none;font:600 12px/1 inherit;color:var(--tx3);
  background:rgba(118,118,128,.12);border-radius:999px;padding:4px 9px;margin-right:18px}
/* 0 例句：整行压灰、不可点（不留死链接） */
.grow.off{color:var(--tx3);cursor:default;opacity:.55}
.grow.off::after{display:none}
.grow.off:active{background:var(--card)}
.grow.off .gntag{flex:none;font-size:12px;margin-right:18px}
/* 语法点详情页：例句卡片顶部标出「来自哪个词」 */
.ex.gpex{cursor:pointer}
.ex.gpex:active{background:#e5e5ea}
.gpfrom{font-size:13px;color:var(--blue);font-weight:600;margin-bottom:6px}
.gpfrom .p{font-weight:400;color:var(--tx3);margin-left:6px}
/* 语法点名后面的中文关键词（小字、弱色，仅作对照） */
.grow .gnkw{display:block;margin-top:2px;font-size:12.5px;color:var(--tx3);font-weight:400}

/* 语法点详解：结构 / 语境 / 语义 / 与相近点的区别 */
.gpblk{padding:12px 16px;background:var(--card);margin-top:2px}
.gpblk:first-of-type{border-radius:12px 12px 0 0;margin-top:8px}
.gpblk:last-of-type{border-radius:0 0 12px 12px}
.gpblk:only-of-type{border-radius:12px}
.gpbt{font-size:12px;font-weight:600;color:var(--tx3);margin-bottom:4px}
.gpbd{font-size:14.5px;line-height:1.65;color:var(--tx)}
/* 易错点：错句 / 正确说法 / 成因 */
.gperr{padding:12px 16px;background:var(--card);margin-top:2px;border-left:3px solid var(--l6)}
.gperr:first-of-type{border-radius:0 0 0 0}
.gpw{font-size:15px;line-height:1.6;color:var(--l6);text-decoration:line-through;
  text-decoration-thickness:1px}
.gpr{font-size:15px;line-height:1.6;color:var(--l1);margin-top:4px}
.gpbad,.gpok{display:inline-block;width:16px;font-weight:600}
.gpwhy{font-size:13px;line-height:1.6;color:var(--tx2);margin-top:6px}
.gplb{display:inline-block;margin-right:6px;padding:1px 6px;border-radius:6px;
  background:rgba(118,118,128,.14);font-size:11px;font-weight:600;color:var(--tx3)}
.gpkw{margin-top:6px;font-size:15px;color:var(--tx);font-weight:600}
/* ---- 语法点新版设计（2026-10-17，对齐词页视觉） ----
   1) Hero 卡沿用词页 .hero（大字+蓝色拼音行+HSK 徽章+☆）
   2) 句型公式框：蓝底虚线感，一眼看出「拼装公式」
   3) 偏误句拼音行：错句/正句都带拼音（用户最高原则：界面每个汉字带拼音）
   4) 例句对话块：A/B 回合缩进卡片，英文在回合内
   5) 提示卡：淡黄底，和白色讲解卡区分 */
.gpwpy,.gprpy{font-size:12px;color:var(--tx3);margin-top:1px}
.gprpy{margin-top:0}
/* 结构区（2026-10-18 改版）：讲解文字一块，公式卡一块；每条公式自成一小卡，
   结构行走蓝底条、例子走「汉字 / 拼音 / 英文」三行，两者视觉分层。 */
.gpstruct-intro{font-size:14.5px;line-height:1.65;color:var(--tx2)}
.gpflist{margin-top:8px}
.gpf{background:var(--card);border-radius:12px;padding:10px 12px}
.gpf+.gpf{margin-top:8px}
.gpf-p{background:var(--blue-soft);border-radius:8px;padding:7px 10px;
  font-size:13.5px;line-height:1.65;color:var(--tx);font-weight:600}
.gpf-e{margin-top:8px;padding-left:2px}
.gpf-e+.gpf-e{margin-top:8px;padding-top:8px;border-top:1px dashed var(--sep-soft)}
.gpf-e .zh{font-size:15.5px;line-height:1.6;color:var(--tx)}
.gpf-e .py{font-size:11.5px;color:var(--blue);margin-top:1px}
.gpf-e .en{font-size:12.5px;color:var(--tx2);margin-top:2px}
/* 学习提示：① ② ③ 拆成分条，编号用琥珀色圆点 */
.gptip{background:#fff8e6;border:1px solid #f3e3b3;padding:10px 14px}
.gptip-i{display:flex;gap:9px;padding:7px 0}
.gptip-i+.gptip-i{border-top:1px solid #f0e4bf}
.gptip-n{flex:none;width:18px;height:18px;border-radius:50%;background:#ecd9a0;
  color:#6b5518;font-size:11px;font-weight:700;display:flex;align-items:center;
  justify-content:center;margin-top:2px}
.gptip-t{flex:1;min-width:0;font-size:14px;line-height:1.65;color:var(--tx)}
.gpex .ctx{margin-top:8px;border-top:1px dashed var(--sep-soft);padding-top:8px}
.gpdlg{display:flex;gap:8px;padding:4px 0}
.gpdlg .sp{flex:0 0 auto;width:18px;height:18px;border-radius:50%;
  background:rgba(118,118,128,.14);color:var(--tx3);font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center;margin-top:2px}
.gpdlg .t{min-width:0;flex:1}
.gpdlg .t .zh{font-size:16px;line-height:1.7}
.gpdlg .t .py{font-size:11.5px;color:var(--tx3)}
.gpdlg .t .en{font-size:12.5px;color:var(--tx2);margin-top:1px}
/* 语法点 Hero（2026-10-18 改版）：汉字 / 拼音 / 英文点名 归成一列，
   字号落差从 40/16/13 收到 32/16/14 —— 三行读起来是一个整体，
   且页面不出现任何中文语法术语（「介词」这类只给英文点名 Preposition zai …）。 */
.gphero{padding:14px 16px}
.gphero .gp-kw{min-width:0}
.gphero .big{font-size:32px;line-height:1.15;font-weight:600;letter-spacing:-.01em}
.gphero .py-line{font-size:16px;color:var(--blue);margin-top:2px}
.gphero .gp-kw-en{font-size:14px;line-height:1.4;color:var(--tx2);margin-top:5px;font-weight:500}

/* ---- 错误例句区（2026-10-14 合并） ----
   用户已放弃真实语料通路，错误例句统一用推演生成的。
   此前「推测示例」单独成琥珀色专区 + Predicted 角标 + 免责说明的做法已取消，
   两类错误现在合并进同一列表、同一配色，不再区分来源。 */
.gprule{font-size:14.5px;line-height:1.65;color:var(--tx);padding:3px 0 3px 14px;
  position:relative}
.gprule::before{content:"";position:absolute;left:2px;top:12px;width:5px;height:5px;
  border-radius:50%;background:var(--tx3)}
.gpty{font-size:11px;font-weight:600;color:var(--tx3);margin-bottom:6px}
.en.gpen{font-size:12.5px;color:var(--tx3);margin:2px 0 0 22px}

/* ---- 朗读：喇叭按钮 + 语速切换（speech.js，2026-10-11） ----
   沿用现有变量：--blue 强调色、--card 白卡片、--tx3 次级文字、14px 圆角。 */
.spk{position:relative;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;padding:0;margin:0 0 0 6px;width:26px;height:26px;
  flex:0 0 auto;color:var(--tx3);cursor:pointer;vertical-align:-5px;
  -webkit-tap-highlight-color:transparent}
.spk svg{width:17px;height:17px;fill:currentColor;display:block}
.spk:active{color:var(--blue)}
/* 播放中：蓝 + 呼吸 */
.spk.on{color:var(--blue)}
.spk.on svg{animation:spkpulse .9s ease-in-out infinite}
@keyframes spkpulse{0%,100%{opacity:1}50%{opacity:.35}}
/* 加载中：转圈（隐藏喇叭图标，叠一圈细环） */
.spk.ld{color:var(--blue)}
.spk.ld svg{visibility:hidden}
.spk.ld::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;
  margin:-7px 0 0 -7px;border-radius:50%;border:1.6px solid rgba(0,122,255,.22);
  border-top-color:var(--blue);animation:spkspin .7s linear infinite}
@keyframes spkspin{to{transform:rotate(360deg)}}
/* 词头喇叭稍大，跟 40px 大字对齐 */
.spk.hd{width:30px;height:30px;margin-left:8px;vertical-align:-3px}
.spk.hd svg{width:20px;height:20px}
/* 听力练习（listen 模式）：题干就是声音 → 大喇叭当主角，一眼看到、好按 */
.spk.lsn{width:84px;height:84px;margin:14px auto 4px;border-radius:50%;
  background:var(--blue);color:#fff;flex:none}
.spk.lsn svg{width:42px;height:42px}
.spk.lsn.on,.spk.lsn.ld{color:#fff}
.fc-listen{display:flex;flex-direction:column;align-items:center}
/* 学习页顶栏的「显示汉字」开关（2026-10-21） */
.fc-hanzi-tgl{flex:none;font:600 12px/1.2 inherit;padding:6px 11px;margin:0 4px 0 8px}
.fc-hanzi-tgl.on{background:var(--blue);color:#fff}

/* 语速切换：统一放在词头下方的一行（iOS cell 风格） */
.spdrow{display:flex;align-items:center;gap:8px;margin:10px 0 0;
  background:var(--card);border-radius:14px;padding:10px 14px}
.spdlb{flex:1 1 auto;font:600 13px/1.2 inherit;color:var(--tx2)}
.spdbtn{border:0;background:rgba(118,118,128,.12);color:var(--tx);border-radius:999px;
  padding:6px 12px;font:600 12px/1.2 inherit;cursor:pointer;white-space:nowrap;
  transition:background 150ms ease-out,color 150ms ease-out}
.spdbtn:active{opacity:.6}
/* 选中态：实心蓝 + 白字，与其它 chip 的选中一致 */
.spdbtn.on{background:var(--blue);color:#fff}

/* 暂停中：也是蓝的，但不呼吸 —— 一眼能跟「正在播」分开 */
.spk.pz{color:var(--blue)}
.spk.pz svg{opacity:.5}

/* ---- 整篇连读（2026-10-14 用户要求）----
   总按钮独占一行；三套图+文案一次性渲染完，靠 .run / .pz 切换，不重建 DOM 不闪烁。
   正在朗读的那一行跟着飘一层浅蓝底，连播到哪一眼看得出。 */
.sqrow{margin:10px 0 0}
.sqbtn{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  border:0;background:var(--card);border-radius:14px;padding:12px 14px;
  font:600 14px/1.2 inherit;color:var(--blue);cursor:pointer;
  transition:background 150ms ease-out}
.sqbtn:active{background:rgba(0,122,255,.08)}
.sqbtn svg{width:18px;height:18px;fill:currentColor;flex:none}
/* 空闲：三角 + Play all */
.sqbtn .sqic.q,.sqbtn .sqtx.b,.sqbtn .sqtx.c{display:none}
/* 正在播：暂停符 + Pause */
.sqbtn.run .sqic.p,.sqbtn.run .sqtx.a{display:none}
.sqbtn.run .sqic.q,.sqbtn.run .sqtx.b{display:block}
/* 已暂停：三角 + Resume */
.sqbtn.pz .sqic.q,.sqbtn.pz .sqtx.a,.sqbtn.pz .sqtx.b{display:none}
.sqbtn.pz .sqic.p,.sqbtn.pz .sqtx.c{display:block}

/* 整行可点：目标比只有小喇叭大得多，方便反复重听某一句 */
[data-sayrow]{cursor:pointer}
[data-sayrow].sayon{background:var(--blue-soft);border-radius:10px}
.ex.sayon{box-shadow:inset 0 0 0 1.4px rgba(0,122,255,.2)}
.ex.dlg .dlg-turn.sayon{padding:4px 8px;margin-left:-8px;margin-right:-8px}

/* 例句中的关键词：用该词级别标记的字色，中文与对应拼音同步高亮 */
.kw{color:var(--kwc);font-weight:600}
.kw.l1{--kwc:var(--l1-fg)}.kw.l2{--kwc:var(--l2-fg)}.kw.l3{--kwc:var(--l3-fg)}
.kw.l4{--kwc:var(--l4-fg)}.kw.l5{--kwc:var(--l5-fg)}.kw.l6{--kwc:var(--l6-fg)}
.kw.l7{--kwc:var(--l7-fg)}

/* 对话例句：左竖线 + 浅蓝底，A/B 两回合分明；B 行缩进并换更浅底色。
   沿用上面浅色主题变量，不用深色块。 */
/* 对话例句：外观与普通例句完全一致（2026-10-07 用户要求恢复原风格），
   只是中文/拼音按行分成两段、英文两行；不加底色、不加竖线、不缩进 */
.ex.dlg .dlg-turn+.dlg-turn{margin-top:6px}
.ex.dlg .en+.en{margin-top:2px}

.rb{display:inline-flex;flex-direction:column;align-items:center;vertical-align:top;margin:0 .5px}
.rb .rp{font-size:10px;line-height:1.4;color:var(--tx3);height:15px;white-space:nowrap}
.rb .rz{font-size:19px;line-height:1.35}
.rb.punct .rp{visibility:hidden}
/* 解释文字（syn/ant/释义英文说明）内联注音：汉字 + 灰字拼音跟随 */
.zw{color:var(--tx)}
.zp{color:var(--tx3);font-size:12px;letter-spacing:.2px;white-space:nowrap}

.bigchar{font-size:88px;font-weight:600;text-align:center;line-height:1.05}
.charpy{text-align:center;color:var(--blue);font-size:17px;margin-top:2px}
.tagrow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0 4px}
.tag{font:500 13px/1 inherit;color:var(--tx2);background:var(--card);border-radius:999px;padding:6px 12px}
.tag.ok{color:var(--blue);background:var(--blue-soft)}
.grp{margin-bottom:16px}
.grp .gh{display:flex;align-items:center;gap:8px;margin:0 4px 8px}
.grp .gn{font-size:13px;color:var(--tx3)}
.wordchips{display:flex;flex-wrap:wrap;gap:8px}
.wchip{background:var(--card);border-radius:12px;padding:9px 13px;cursor:pointer;
  display:flex;align-items:baseline;gap:6px;font-size:16px}
.wchip:active{opacity:.6}
.wchip .p{font-size:11px;color:var(--tx3)}
.pending{background:var(--card);border-radius:14px;padding:14px 16px;font-size:13px;
  color:var(--tx3);line-height:1.6}

/* ---- Group divider variant: RAIL ------------------------------------
   Axis: line. Each group gets a 3px solid level-coloured rail on the left,
   spanning the header and the word chips, plus a wider gap between groups.
   Reads like Notion/Linear group markers: quiet, but impossible to miss. */
.grp{position:relative;margin-bottom:24px;padding-left:14px}
.grp::before{content:"";position:absolute;left:0;top:3px;bottom:4px;width:3px;
  border-radius:2px;background:var(--gk)}
.grp.l1{--gk:var(--l1-fg)}.grp.l2{--gk:var(--l2-fg)}.grp.l3{--gk:var(--l3-fg)}
.grp.l4{--gk:var(--l4-fg)}.grp.l5{--gk:var(--l5-fg)}.grp.l6{--gk:var(--l6-fg)}

/* ================= 闪卡（.fc-*，2026-10-14 试用版） ================= */
.qlink{text-decoration:none}
.feat{text-decoration:none}   /* Flashcards 卡是 <a>，去下划线 */
.fc-star{border:0;background:none;font-size:20px;line-height:1;cursor:pointer;color:var(--tx3);padding:4px}
.fc-star.on{color:#f5a623}
.fc-prog{margin-left:auto;font:500 13px/1 inherit;color:var(--tx3)}
.fc-note{font-size:12px;color:var(--tx3);margin:2px 4px 12px;line-height:1.6}
.fc-h3{font-size:13px;font-weight:500;color:var(--tx3);margin:18px 4px 8px}
/* ===== 计划部分 vs 实操部分（用户 2026-10-16 晚定稿）=====
   计划卡（学习计划 / 每日目标）= 规划层：浅蓝纸底 + 虚线框 + 低透明度蓝图网格底纹，
   读起来像一张「正在起草的方案」；卡组行（实操）= 实心白卡 + 实线框，
   是「正在执行的卡片」。两种框体语言一眼分层：页面上面是计划，下面是动手。
   家族内部再分主次：学习计划 = 蓝虚线（主计划），每日目标 = 灰虚线（今日执行口径）。 */
.fc-plan-card,.fc-goal{
  background-color:var(--plan-bg);
  background-image:linear-gradient(rgba(0,122,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,122,255,.05) 1px,transparent 1px);
  background-size:18px 18px;
  border-radius:14px;border-style:dashed;border-width:1.5px;
  box-shadow:none;margin-bottom:12px}
.fc-plan-card{border-color:rgba(0,122,255,.42);padding:14px 16px}
.fc-goal{border-color:rgba(60,60,67,.30);padding:12px 14px}
.fc-card-h{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx3);margin-bottom:8px}
.fc-card-h-blue{color:var(--blue)}
.fc-goal-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--tx2)}
.fc-goal-top b{color:var(--tx)}
.fc-streak{color:var(--blue);font-weight:500}
.fc-bar{height:6px;border-radius:3px;background:rgba(118,118,128,.15);margin:8px 0 10px;overflow:hidden}
.fc-bar-in{height:100%;border-radius:3px;background:var(--blue);transition:width .3s}
.fc-goal-chips{display:flex;gap:8px;flex-wrap:wrap}
.fc-chip{border:0;background:rgba(118,118,128,.12);border-radius:999px;padding:6px 12px;
  font:500 12px/1 inherit;color:var(--tx2);cursor:pointer}
.fc-chip.on{background:var(--blue);color:#fff}
/* 卡组行 */
.fc-deck{background:var(--card);border-radius:14px;padding:12px 14px;margin-bottom:10px;
  border:2px solid transparent;transition:opacity .2s ease}
/* mine 高亮 = Daily 卡组（按学生级别定制的那盒词，用户 2026-10-16 晚定稿）；
   所有非当前级灰度（仍可点进复习），并归进 Other levels 组 */
.fc-deck.mine{border-color:var(--blue)}
.fc-deck.dim{opacity:.5}
/* 其他级别归组（用户 2026-10-16）：一个小标题 + 组内全部灰度，低存在感但不藏起来 */
.fc-other{margin-top:2px}
.fc-other-h{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx3);margin:14px 4px 8px}
.fc-other .fc-deck{margin-bottom:8px}
.fc-deck-t{font-size:16px;font-weight:600}
.fc-deck-d{font-size:12px;color:var(--tx3);margin-top:2px}
.fc-due{color:var(--blue)}
.fc-deck-modes{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.fc-mbtn{border:0;background:var(--blue);color:#fff;border-radius:999px;padding:7px 14px;
  font:500 12px/1 inherit;cursor:pointer}
.fc-mbtn:active{opacity:.7}
.fc-mbtn.ghost{background:rgba(118,118,128,.12);color:var(--tx2)}
.fc-banner{background:var(--l2-bg);color:var(--l2-fg);border-radius:14px;padding:12px 14px;
  margin-bottom:12px;font-size:13px;line-height:1.6;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* 徽章墙 */
.fc-honor{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fc-badge{background:var(--card);border-radius:12px;padding:10px 8px;text-align:center}
.fc-badge.off{opacity:.38}
.fc-badge-t{font-size:12px;font-weight:500}
.fc-badge-d{font-size:10px;color:var(--tx3);margin-top:3px;line-height:1.4}
/* 卡片浏览 */
.fc-clist{display:flex;flex-direction:column;gap:8px}
.fc-crow{background:var(--card);border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:10px}
.fc-crow.mastered .fc-crow-zh{color:var(--l1-fg)}
.fc-crow-zh{font-size:16px;font-weight:500;min-width:88px}
.fc-crow-py{font-size:11px;color:var(--tx3);font-weight:400;margin-left:6px}
.fc-crow-en{flex:1;font-size:13px;color:var(--tx2);line-height:1.4}
/* 词条本体 = 完整词条链接（用户 2026-10-16）：hover 变蓝示意可点 */
.fc-crow-zh,.fc-crow-en{text-decoration:none}
.fc-crow-zh{color:inherit}
.fc-crow-zh:hover,.fc-crow-en:hover{color:var(--blue)}
.fc-crow-zh:hover .fc-crow-py{color:var(--blue)}
/* 会话：翻牌（.fc-card 加 relative：星标按钮绝对定位钉在卡片右上角） */
.fc-card{position:relative;height:300px;perspective:1200px;margin:10px 0 14px;cursor:pointer}
.fc-inner{position:relative;width:100%;height:100%;transition:transform .4s;transform-style:preserve-3d}
.fc-card.flipped .fc-inner{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--card);border-radius:16px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;padding:20px;text-align:center;overflow:hidden}
.fc-back{transform:rotateY(180deg)}
.fc-zh{font-size:40px;font-weight:600;line-height:1.1}
.fc-py{font-size:15px;color:var(--blue)}
/* character mode（2026-10-24）：单词拼音被移到背面，作为背面的首要信息放大突出 */
.fc-py-back{font-size:20px;font-weight:600;margin-bottom:2px}
.fc-en{font-size:19px;font-weight:500;line-height:1.4}
.fc-ex{font-size:13px;color:var(--tx2);line-height:1.6;margin-top:6px}
/* 例句三行：中文（主）/ 拼音（蓝）/ 英文（浅） */
.fc-exzh{font-size:13px;color:var(--tx);line-height:1.6}
.fc-expy{font-size:12px;color:var(--blue);line-height:1.5;margin-top:2px}
.fc-exen{color:var(--tx3)}
/* 拼音模式：题面用拼音当主字，字号比汉字小一点但仍是主角 */
.fc-zh.py{font-size:28px;font-weight:500;letter-spacing:.02em}
/* spell 模式：题面是英文意思（比汉字长，字号要收） */
.fc-enlg{font-size:20px;font-weight:500;line-height:1.4;color:var(--tx)}
.fc-goal-note{font-size:11px;color:var(--tx3);margin-top:8px;line-height:1.5}
.fc-tap{font-size:11px;color:var(--tx3);margin-top:4px}
.fc-acts{display:flex;gap:10px}
.fc-acts .fc-btn{flex:1}
.fc-btn{border:0;background:rgba(118,118,128,.12);color:var(--tx);border-radius:12px;
  padding:13px 16px;font:500 15px/1 inherit;cursor:pointer}
.fc-btn.fc-ok{background:var(--blue);color:#fff}
.fc-btn:active{opacity:.75}
/* 完整词条入口条（2026-10-22 二次改版）：
   ① 练习中不许漏答案 —— 条子上不再写词和拼音，只写 "See more details"；
   ② 材质与题目卡片明显区分 —— 虚线边 + 浅蓝底 + 居中排版，
      学生一眼知道这是「往外跳的链接」，不是题、也不藏着答案。 */
.fc-entry{display:flex;align-items:center;gap:10px;margin-top:12px;padding:11px 14px;
  background:var(--card);border:1px solid var(--sep-soft);border-radius:12px;
  text-decoration:none;color:var(--tx);cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.fc-entry-plain{justify-content:center;gap:8px;border:1.5px dashed rgba(0,122,255,.45);
  background:var(--blue-soft)}
.fc-entry-plain .fc-entry-k{color:var(--blue);font-size:13.5px;letter-spacing:.01em}
.fc-entry:hover{border-color:var(--blue);box-shadow:0 2px 10px rgba(0,122,255,.12);transform:translateY(-1px)}
.fc-entry:active{transform:translateY(0) scale(.99);box-shadow:none}
.fc-entry:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.fc-entry-k{font-size:13px;font-weight:600;flex:none}
.fc-entry-ar{color:var(--blue);font-size:14px;flex:none;transition:transform .15s ease}
.fc-entry:hover .fc-entry-ar{transform:translate(2px,-2px)}
/* 卡片词头 = 完整词条链接：默认看不出是链接（不破坏卡片观感），hover 才显现。
   inline-block 让链接紧包文字 —— 点卡片空白处照样翻牌，不会误跳词条页。 */
.fc-wordlink{color:inherit;text-decoration:none;display:inline-block;cursor:pointer;border-radius:10px}
.fc-wordlink.inline{display:inline}
.fc-wordlink:hover .fc-zh,.fc-wordlink:hover .fc-zh.py,.fc-wordlink:hover .fc-py,.fc-wordlink.inline:hover{
  text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:6px}
.fc-wordlink:hover .fc-py{color:var(--blue)}
.fc-wordlink:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
/* 会话星标：卡片右上角（用户 2026-10-16 晚定稿：顶栏位置不合理，所有学习界面同样处理）。
   按钮由 JS 渲染进 .fc-card / .fc-prompt 内，绝对定位钉在卡片右上角；
   flip 模式下它是 .fc-card 的直接子元素，不随卡面翻面旋转；
   点击时 stopPropagation（flash.js syncHeadStar），不会误触发翻牌。 */
.fc-hstar{position:absolute;top:8px;right:8px;z-index:3;border:0;
  background:rgba(118,118,128,.07);border-radius:999px;
  font-size:18px;line-height:1;cursor:pointer;color:var(--tx3);padding:8px 9px;
  transition:transform .12s ease,color .12s ease}
.fc-hstar.on{color:#f5a623;background:rgba(245,166,35,.14)}
.fc-hstar:active{transform:scale(.82)}
/* 会话：quiz / spell（relative + 内容垂直居中：星标钉在右上角，题面文字避开角区） */
.fc-prompt{position:relative;background:var(--card);border-radius:16px;padding:20px;
  text-align:center;margin:10px 0 14px;min-height:140px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.fc-opts{display:flex;flex-direction:column;gap:8px}
.fc-opt{border:0;background:var(--card);border-radius:12px;padding:14px 16px;text-align:left;
  font:400 15px/1.4 inherit;color:var(--tx);cursor:pointer}
.fc-opt.ok{background:var(--l1-bg);color:var(--l1-fg);font-weight:500}
.fc-opt.no{background:#f5e3e3;color:#a33;opacity:.7}
.fc-spellrow{display:flex;gap:8px}
.fc-input{flex:1;min-width:0;border:0;outline:0;background:var(--card);border-radius:12px;
  padding:13px 14px;font:16px/1 inherit;color:var(--tx)}
.fc-input.shake{animation:fc-shake .3s}
@keyframes fc-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.fc-msg{font-size:13px;color:var(--tx3);margin-top:10px;min-height:18px;text-align:center}
/* 结算页 */
.fc-sum{background:var(--card);border-radius:16px;padding:22px 18px;margin-top:10px;text-align:center}
.fc-sum-t{font-size:19px;font-weight:600}
.fc-sum-cards{display:flex;justify-content:center;gap:12px;margin:16px 0 12px}
.fc-sum-cell{flex:1;background:rgba(118,118,128,.08);border-radius:12px;padding:12px 6px}
.fc-sum-cell b{display:block;font-size:22px}
.fc-sum-cell span{font-size:11px;color:var(--tx3)}
.fc-sum-line{font-size:13px;color:var(--tx2);margin-top:6px}
.fc-sum-badges{margin-top:12px;font-size:13px;font-weight:500;color:var(--blue)}
.fc-sum-acts{display:flex;gap:10px;margin-top:18px}
.fc-sum-acts .fc-btn{flex:1}
/* 反馈 */
.fc-foot{margin-top:22px;text-align:center}
.fc-foot .fc-mbtn{margin:0 4px 6px}
.fc-fb-note{font-size:11px;color:var(--tx3);margin-top:8px;line-height:1.5}
.fc-fb-form{background:var(--card);border-radius:14px;padding:14px;text-align:left;margin-top:8px}
.fc-fb-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--tx2)}
.fc-fb-kind{display:flex;align-items:center;gap:4px}
.fc-fb-text{width:100%;border:0;outline:0;background:rgba(118,118,128,.08);border-radius:10px;
  padding:10px;font:13px/1.5 inherit;color:var(--tx);margin:10px 0;resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.fc-fb-ok{font-size:12px;color:var(--l1-fg);margin-top:8px}
/* 定级测试 */
.fc-place-banner .fc-mbtn{margin-left:4px}
.fc-place-intro,.fc-place-res{background:var(--card);border-radius:16px;padding:24px 20px;margin-top:10px;text-align:center}
.fc-place-t{font-size:20px;font-weight:600}
.fc-place-d{font-size:13px;color:var(--tx2);line-height:1.7;margin-top:12px;text-align:left}
.fc-place-acts{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.fc-place-q{background:var(--card);border-radius:16px;padding:40px 20px;margin-top:10px;text-align:center}
.fc-place-word{font-size:52px;font-weight:600;line-height:1.15;letter-spacing:.02em}
/* 拼音模式：拼音串比汉字长，字号要收，且用小写拉丁字体排 */
.fc-place-word.py{font-size:34px;font-weight:500;letter-spacing:.04em;word-break:break-word}
.fc-place-ask{font-size:14px;color:var(--tx3);margin-top:10px}
.fc-place-q .fc-place-acts{margin-top:36px}
.fc-place-big{font-size:34px;font-weight:600;color:var(--blue);margin-top:8px}
.fc-place-warn{background:var(--l2-bg);color:var(--l2-fg);border-radius:10px;padding:10px 12px;
  font-size:12px;line-height:1.6;margin-top:14px;text-align:left}
/* 卡组页：级别标记 / 升级路径 / 重测入口 */
.fc-mine{display:inline-block;background:var(--blue-soft);color:var(--blue);border-radius:999px;
  padding:2px 8px;font-size:10px;font-weight:500;vertical-align:2px;margin-left:6px}
.fc-path{background:var(--card);border-radius:14px;padding:12px 14px;margin-bottom:10px;
  font-size:13px;color:var(--tx2);line-height:1.6}
.fc-path b{color:var(--blue)}
.fc-hint{color:var(--blue);font-weight:500}
/* 定制成长体系（定级结果 + 卡组页路线卡） */
.fc-plan{background:var(--card);border-radius:14px;padding:14px;margin:10px 0;text-align:left}
.fc-plan-h{font-size:14px;font-weight:600}
.fc-plan-bar{height:8px;border-radius:999px;background:rgba(118,118,128,.14);margin:10px 0 6px;overflow:hidden}
.fc-plan-fill{height:100%;border-radius:999px;background:var(--blue);transition:width .35s ease}
.fc-plan-sub{font-size:12px;color:var(--tx3);line-height:1.6}
.fc-plan-day{font-size:12px;color:var(--tx2);line-height:1.7;margin-top:8px;
  background:rgba(118,118,128,.07);border-radius:10px;padding:8px 10px}
.fc-phs{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.fc-ph{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid rgba(118,118,128,.12)}
.fc-ph:first-child{border-top:0}
.fc-ph-n{flex:0 0 20px;height:20px;border-radius:999px;background:var(--blue-soft);color:var(--blue);
  font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:1px}
.fc-ph-b{flex:1 1 auto;min-width:0}
.fc-ph-t{font-size:13px;font-weight:500}
.fc-ph-d{font-size:11px;color:var(--tx3);line-height:1.6;margin-top:2px}
.fc-ph-w{flex:0 0 auto;font-size:11px;color:var(--tx2);white-space:nowrap;margin-top:2px}
.fc-place-res .fc-plan{text-align:left;margin-top:16px}
/* 定级结果页的「每天学几个词」选择步（2026-10-16 用户截图指定必须有）：
   和计划卡并列的一张实心卡，chip 复用卡组页目标档位的样式 */
.fc-place-goal{background:var(--card);border-radius:14px;padding:14px 16px;margin-top:10px;text-align:left}
.fc-place-goal-t{font-size:14px;font-weight:600}
.fc-place-goal .fc-goal-chips{margin-top:10px}
.fc-place-goal-n{font-size:12px;color:var(--tx3);line-height:1.7;margin-top:10px}
/* ===== 目标选择（2026-10-19 用户要求：出学习计划之前先问目标）=====
   三档目标各是一个可点的整行按钮：标题加粗 + 一句说明。
   结果页里是 .fc-goalq 块；卡组页复用 .fc-plan-card 蓝图虚线外观（.fc-goalq-card 只是标记）。 */
.fc-goalq{margin-top:14px;text-align:left}
.fc-goalq-t{font-size:15px;font-weight:600}
.fc-goalq-d{font-size:12px;color:var(--tx3);line-height:1.7;margin-top:6px}
.fc-gq-opt{display:block;width:100%;text-align:left;background:var(--card);
  border:1.5px solid var(--sep-soft);border-radius:12px;padding:12px 14px;margin-top:10px;cursor:pointer}
.fc-gq-opt:hover{border-color:var(--blue)}
.fc-gq-opt:active{opacity:.75}
.fc-gq-opt .fc-gq-t{font-size:14px;font-weight:600;display:block}
.fc-gq-opt .fc-gq-d{font-size:12px;color:var(--tx3);line-height:1.6;margin-top:3px;display:block}
.fc-retake{text-align:center;margin-top:4px}
.grp.l7{--gk:var(--l7-fg)}
.grp .gh{margin:0 2px 10px}

/* ---------- 语法点配套练习（gpx.js） ---------- */
#gp-ex{margin-top:4px}
.gpx-empty{color:var(--tx3);font-size:14px;padding:14px 4px}
.gpx-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px}
.gpx-tab{border:1px solid var(--sep);background:var(--card);color:var(--tx2);border-radius:10px;
  padding:7px 12px;font-size:13px;cursor:pointer;transition:all .18s var(--ease-out)}
.gpx-tab.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.gpx-tab .gpx-prog{opacity:.8;font-size:11px;margin-left:4px}
.gpx-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 6px}
.gpx-tool{border:1px solid var(--sep);background:var(--card);color:var(--blue);border-radius:8px;
  padding:5px 12px;font-size:12px;cursor:pointer}
.gpx-tool:hover{background:var(--blue-soft)}
.gpx-hint,.gpx-hint2{color:var(--tx3);font-size:12px}
.gpx-hint2{margin:0 2px 10px}
.gpx-done{text-align:center;color:var(--l1);font-weight:700;font-size:13px;padding:9px;
  background:var(--l1-bg);border-radius:10px;margin-bottom:10px}
.gpx-q{background:var(--card);border-radius:14px;padding:14px 16px;margin-bottom:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.04)}
.gpx-qtop{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.gpx-num{width:22px;height:22px;border-radius:50%;background:var(--blue-soft);color:var(--blue);
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.gpx-tag{font-size:11px;color:var(--tx3)}
.gpx-pt{font-size:11px;font-weight:600;color:var(--l1);background:var(--l1-bg);padding:2px 8px;border-radius:6px}
.gpx-zh{font-size:21px;font-weight:600;letter-spacing:.3px;margin:2px 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gpx-zh .blank,.gpx-blank{display:inline-block;min-width:48px;border-bottom:2px solid var(--blue);
  text-align:center;color:var(--blue);margin:0 2px}
.gpx-py{color:var(--tx3);font-size:13px;margin-bottom:2px}
.gpx-en{color:var(--tx2);font-size:13px;font-style:italic}
.gpx-aline{background:var(--blue-soft);border-radius:10px;padding:8px 12px;margin:6px 0;
  font-size:18px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gpx-aline .gpx-sp{font-size:12px;font-weight:700;color:var(--blue)}
.gpx-opts{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.gpx-opt{border:1.5px solid var(--sep);background:#fff;border-radius:12px;padding:11px 14px;
  font-size:17px;text-align:left;cursor:pointer;transition:all .15s var(--ease-out);color:var(--tx);width:100%}
.gpx-opt .gpx-opy{display:block;font-size:12px;color:var(--tx3);margin-top:1px}
/* 连词成句积木（2026-10-22 加拼音）：竖排 汉字+拼音，上下结构 */
.gpx-opt.words{display:inline-flex;flex-direction:column;align-items:center;width:auto;
  font-size:17px;padding:7px 12px;margin:0 6px 8px 0;cursor:grab}
.gpx-opt.words .gpx-wpy{font-size:10.5px;line-height:1.25;color:var(--tx3);font-weight:400;margin-top:1px}
.gpx-ansline .gpx-opt.words .gpx-wpy{color:inherit;opacity:.72}
.gpx-opt.words:active{cursor:grabbing}
.gpx-opt.sel-correct{border-color:var(--l1);background:var(--l1-bg);color:var(--l1);font-weight:600}
.gpx-opt.sel-correct .gpx-opy{color:var(--l1);opacity:.85}
.gpx-opt.sel-wrong{border-color:#b0342a;background:#fae7e5;color:#b0342a;font-weight:600}
.gpx-opt.sel-wrong .gpx-opy{color:#b0342a;opacity:.85}
.gpx-opt.reveal{border-color:var(--l1);border-style:dashed}
.gpx-opt.dim{opacity:.42}
.gpx-opt.locked{cursor:default}
.gpx-jbtns{display:flex;gap:10px;margin-top:12px}
.gpx-jbtn{flex:1;border:1.5px solid var(--sep);background:#fff;border-radius:12px;padding:12px;
  font-size:17px;font-weight:600;cursor:pointer;transition:all .15s var(--ease-out)}
.gpx-jbtn.yes{color:var(--l1)}
.gpx-jbtn.no{color:#b0342a}
.gpx-jbtn.yes.pick{border-color:var(--l1);background:var(--l1-bg)}
.gpx-jbtn.no.pick{border-color:#b0342a;background:#fae7e5}
.gpx-jbtn.locked{cursor:default}
.gpx-ansline{min-height:54px;border:1.5px dashed var(--sep);border-radius:12px;padding:8px 10px;
  margin:8px 0;display:flex;flex-wrap:wrap;gap:2px;background:#fafafa;transition:border-color .15s}
.gpx-ansline.over{border-color:var(--blue);background:var(--blue-soft)}
.gpx-ansline .gpx-opt{margin:0 4px 4px 0;background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}
.gpx-bank{margin:4px 0 8px;min-height:44px}
.gpx-bank.over{outline:1.5px dashed #b0342a;outline-offset:2px;border-radius:8px}
.gpx-ph{color:var(--tx3);font-size:13px}
.gpx-check{border:none;background:var(--blue);color:#fff;border-radius:10px;padding:9px 20px;
  font-size:15px;font-weight:600;cursor:pointer}
.gpx-check:disabled{background:var(--sep);cursor:default}
.gpx-fb{margin-top:12px;border-radius:10px;padding:10px 12px;font-size:14px}
.gpx-fb.ok{background:var(--l1-bg);color:var(--l1)}
.gpx-fb.no{background:#fae7e5;color:#b0342a}
.gpx-verdict{font-weight:700;margin-bottom:2px}
.gpx-fix{margin-top:6px;padding-top:6px;border-top:1px dashed rgba(0,0,0,.12);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gpx-fz{font-size:18px;font-weight:600}
.gpx-fpy{font-size:12px;opacity:.85}
.gpx-why{font-size:13px;margin-top:4px;opacity:.95}

/* ===== Study lists (v1) ===== */
.fc-listrow{display:flex;align-items:stretch;gap:6px}
.fc-listrow .fc-deck{flex:1}
.fc-del{flex:0 0 auto;align-self:center;width:30px;height:30px;border:1px solid var(--sep);
  background:#fff;color:var(--tx3);border-radius:8px;cursor:pointer;font-size:14px;line-height:1}
.fc-del:hover{background:#fae7e5;color:#b0342a;border-color:#b0342a}
.fc-list-actions{margin:8px 0 2px}
.fc-tb-wrap{margin:10px 0 4px;border:1px solid var(--sep);border-radius:12px;padding:6px 10px;background:#fafafa}
.fc-tb-wrap>summary{cursor:pointer;font-size:13px;font-weight:600;opacity:.85}
.fc-tb{margin-top:6px}
.fc-tb-h{font-size:14px;font-weight:700;margin-bottom:6px}
.fc-tb-note{font-weight:400;font-size:12px;opacity:.7}
.fc-tb-book{margin:6px 0}
.fc-tb-bn{font-size:13px;font-weight:600;opacity:.8;margin-bottom:4px}
.fc-builder{max-width:720px;margin:0 auto;padding:6px 2px}
.fc-bld-row{margin:8px 0}
.fc-bld-input{width:100%;box-sizing:border-box;padding:10px 12px;border:1.5px solid var(--sep);
  border-radius:10px;font-size:15px}
.fc-bld-input:focus{outline:none;border-color:var(--blue)}
.fc-bld-cols{display:flex;gap:10px;margin-top:8px}
.fc-bld-box{flex:1;min-width:0;border:1px solid var(--sep);border-radius:12px;background:#fff;overflow:hidden}
.fc-bld-h{padding:8px 10px;font-size:13px;font-weight:700;background:#f5f7fa;border-bottom:1px solid var(--sep)}
.fc-bld-list{max-height:340px;overflow:auto;padding:4px}
.fc-bld-item{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;font-size:14px;cursor:default}
.fc-bld-item+.fc-bld-item{border-top:1px solid #f0f0f0}
.fc-bld-item .zh{font-weight:600}
.fc-bld-item .py{color:var(--tx3);font-size:12px}
.fc-bld-item .en{color:var(--tx3);font-size:12px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-bld-item.in{background:var(--blue-soft)}
.fc-bld-item .ok{color:var(--l1);font-weight:700}
.fc-bld-selitem{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;font-size:14px}
.fc-bld-selitem+.fc-bld-selitem{border-top:1px solid #f0f0f0}
.fc-bld-selitem .idx{width:18px;color:var(--tx3);font-size:12px;text-align:right}
.fc-bld-selitem .zh{font-weight:600;flex:1}
.fc-mini{flex:0 0 auto;width:26px;height:26px;border:1px solid var(--sep);background:#fff;
  border-radius:7px;cursor:pointer;font-size:13px;line-height:1}
.fc-mini:hover{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}
.fc-bld-acts{display:flex;gap:10px;margin-top:14px}
/* 粘贴导入（Pleco / Quizlet / 任意文本） */
#bld-paste{resize:vertical;min-height:96px;font:inherit}
.fc-bld-acts-left{margin-top:8px}
#bld-import-msg{margin-top:6px}
#bld-paste-toggle{margin:0}