/* ============================================================
   Power-Up Speaking Trainer 样式
   设计语言：清新柔和 · 轻量化 · 趣味治愈 · 极简不杂乱
   主色：柔和青绿（护眼专注）｜点缀：浅暖黄 / 浅天蓝
   ============================================================ */
:root {
  /* 主色：提亮青绿（B档童趣多色 · UI优化 M1） */
  --blue: #1D9E75;            /* 兼容旧变量名：品牌主色（按钮/链接/页头） */
  --blue-dark: #178a64;
  --blue-light: #e9fbf3;
  /* 品牌强调色：珊瑚粉（连续打卡 / CTA） */
  --coral: #ff7a9a;
  --coral-light: #ffeef2;
  /* 等级 / 学科：梦幻紫 */
  --purple: #9b8cff;
  --purple-light: #f1eefe;
  /* 阳光值：暖黄 */
  --sun: #ffcf5c;
  --sun-dark: #e0a800;
  --sun-light: #fff8e6;
  --yellow-light: #fdf3dc;   /* 兼容旧变量名（原 --yellow 已并入 --sun） */
  /* 进度 / 今日完成：天蓝（唯一 active 态色） */
  --sky: #5bb8e8;
  --sky-light: #e9f5fd;
  --sky-deep: #2b8aad;       /* UI皮肤：天蓝深档（Tab active / 指标小字，保 WCAG AA） */
  /* 语义色（柔和化，兼容旧变量名） */
  --green: #57a773;           /* 成功绿（柔） */
  --orange: #dd9a4e;          /* 提醒橙（柔，替代大红） */
  --red: #dd9a4e;             /* 柔和陶土橙：全站不再出现刺眼大红 */
  /* 文字与背景 */
  --text: #37474f;            /* 深灰黑（非纯黑，护眼） */
  --text-muted: #8aa0a8;
  --bg: #f8fbfa;              /* 极浅灰白 */
  --card: #ffffff;
  --line: #e4eeec;            /* 细边框 */
  /* 三档圆角（模块11）：卡片 18 / 控件 14 / 胶囊 999，全站收敛 */
  --r-card: 18px;
  --r-btn: 14px;
  --r-pill: 999px;
  --radius: var(--r-card);    /* 兼容旧变量名 */
  /* 动效曲线（UI优化 M1）：统一缓动 */
  --ease: cubic-bezier(.22,.61,.36,1);
  /* 卡片三级层次（模块11）：L1 内嵌块 / L2 标准卡 / L3 浮层 */
  --card-in: #f4f9f8;
  --shadow-1: 0 1px 3px rgba(55, 71, 79, 0.06);
  --shadow-2: 0 4px 18px rgba(56, 168, 157, 0.09);
  --shadow-3: 0 12px 32px rgba(23, 46, 44, 0.16);
  /* 三态语义色（模块11）：active/完成统一归 --sky，锁定灰保留 */
  --state-active-bg: #e9f2fb;
  --state-done-bg: #e9f7ee;
  --state-locked: #94a3a8;
  --state-locked-bg: #f1f4f5;
  --shadow: var(--shadow-2);   /* 兼容旧变量名 */
  /* 报告四分区卡片色 */
  --rc-green-bg: #e9f7ee; --rc-green-bd: #cbe9d5; --rc-green-tx: #2e7d4f;
  --rc-orange-bg: #fdf1e1; --rc-orange-bd: #f2dcb4; --rc-orange-tx: #a9742a;
  --rc-blue-bg: #e8f4fb; --rc-blue-bd: #c6e1f2; --rc-blue-tx: #3a7ca5;
  --rc-yellow-bg: #fdf3dc; --rc-yellow-bd: #f0dcae; --rc-yellow-tx: #a07c22;
  /* 学科色板（UI优化 M1 · 10 科，色相分散兼顾色盲友好） */
  --subj-chinese: #ff922b;  --subj-chinese-l: #fff0e6;  /* 语文 橙 */
  --subj-math:    #4dabf7;  --subj-math-l:    #e7f1fe;  /* 数学 蓝 */
  --subj-english: #9775fa;  --subj-english-l: #f3effe;  /* 英语 紫 */
  --subj-science: #51cf66;  --subj-science-l: #ebfbee;  /* 科学 绿 */
  --subj-politics:#ff6b6b;  --subj-politics-l:#ffe9e9;  /* 道法 珊瑚红 */
  --subj-pe:      #20c997;  --subj-pe-l:      #e6fbf4;  /* 体育 青绿 */
  --subj-music:   #f783ac;  --subj-music-l:   #fde9f1;  /* 音乐 粉 */
  --subj-art:     #fcc419;  --subj-art-l:     #fff8e1;  /* 美术 黄 */
  --subj-it:      #748ffc;  --subj-it-l:      #eaeefe;  /* 信息 靖 */
  --subj-comprehensive: #94d82d; --subj-comprehensive-l: #f4fbe6; /* 综合 青柠 */
}

/* ==================== UI 皮肤系统（11 套 · data-skin 驱动 · 20260828） ====================
   classic 经典（默认·青绿单色渐变）+ A 类插画 5 套（candy/cosmic/forest/ink/neon）+ B 类纯色 5 套（klein/qing/biz/indigo/coral）。
   每套自包含调色板（含自身明度性格），不再依赖 dark/light 切换；
   旧 html[data-theme] 视觉语义已废弃（JS 不再写入，皮肤优先，见 app.js applySkin）。 */

/* ---- 回归 · classic 经典（默认：青绿单色渐变——全语义色统一青绿系明度档，参照 klein 单色模式；
   20260830 用户指示「把经典也换成青绿单色渐变」：由「青绿主色+粉/紫/黄多彩点缀」改为单色系，色板条与焦点卡均为青绿明度渐变） ---- */
[data-skin="classic"]{
  --blue:#1D9E75; --blue-dark:#178a64; --blue-light:#e3f7ee;
  --coral:#12996f; --purple:#2ebd8f; --sun:#3fce9f; --sky:#24a97e; --green:#178a64;
  --coral-light:#e3f7ee; --purple-light:#e3f7ee; --sun-light:#e3f7ee; --sky-light:#e3f7ee;
  --sun-dark:#178a64; --sky-deep:#0f7a56;
  --orange:#2ebd8f; --red:#0f7a56; --yellow-light:#e3f7ee;
  --text:#2d463f; --text-muted:#78a093;
  --bg:#f5faf7; --card:#ffffff; --card-in:#ecf7f2; --line:#d9ece5;
  --r-card:18px; --r-btn:14px; --shadow-2:0 4px 18px rgba(29,158,117,.10);
  --font-head:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
/* classic 焦点卡：青绿单色渐变（亮→深明度过渡，替代青绿→暖黄双色渐变） */
[data-skin="classic"] .ws-focus{background:linear-gradient(135deg,#2ec49b,#178a64)}

/* ---- A 类 · candy 童趣糖果（备选：显式全量写出，切换无残留） ---- */
[data-skin="candy"]{
  --blue:#1D9E75; --blue-dark:#178a64; --blue-light:#e9fbf3;
  --coral:#ff7a9a; --coral-light:#ffeef2;
  --purple:#9b8cff; --purple-light:#f1eefe;
  --sun:#ffcf5c; --sun-dark:#e0a800; --sun-light:#fff8e6;
  --yellow-light:#fdf3dc;
  --sky:#5bb8e8; --sky-light:#e9f5fd; --sky-deep:#2b8aad;
  --green:#57a773; --orange:#dd9a4e; --red:#dd9a4e;
  --text:#37474f; --text-muted:#8aa0a8;
  --bg:#f8fbfa; --card:#ffffff; --card-in:#f4f9f8; --line:#e4eeec;
  --r-card:18px; --r-btn:14px; --shadow-2:0 4px 18px rgba(56,168,157,.09);
  --font-head:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}

/* ---- A 类 · cosmic 深空探索（深蓝星空 + 霓虹青/品红，玻璃卡） ---- */
[data-skin="cosmic"]{
  --blue:#38e1ff; --blue-dark:#7af0ff; --blue-light:#102a44;
  --coral:#ff5fa2; --coral-light:#3a1330;
  --purple:#a98bff; --purple-light:#231a44;
  --sun:#ffd166; --sun-dark:#e0a800; --sun-light:#3a3324;
  --yellow-light:#2c2a44;   /* 用户气泡深底（浅黄在深色下刺眼） */
  --sky:#5cc8ff; --sky-light:#16314a; --sky-deep:#7af0ff;
  --green:#3ddc97; --orange:#ff9f5a; --red:#ff9f5a;
  --text:#e8ecff; --text-muted:#8b97c9;
  --bg:#0d1430; --card:#161f47; --card-in:#1d2954; --line:#2a356b;
  --state-active-bg:#16314a; --state-done-bg:#123526;
  --state-locked:#5a6a8c; --state-locked-bg:#1a2340;
  --rc-green-bg:#123526; --rc-green-bd:#24523a; --rc-green-tx:#7fe0a0;
  --rc-orange-bg:#382a1c; --rc-orange-bd:#55402a; --rc-orange-tx:#ffb37a;
  --rc-blue-bg:#14243a; --rc-blue-bd:#2b4257; --rc-blue-tx:#7cc3e8;
  --rc-yellow-bg:#332c14; --rc-yellow-bd:#4d4322; --rc-yellow-tx:#ffd97a;
  --shadow-1:0 1px 3px rgba(0,0,0,.35);
  --shadow-2:0 6px 26px rgba(56,225,255,.14);
  --shadow-3:0 12px 32px rgba(0,0,0,.55);
  /* 20260831 bug修复：学科浅底随深色皮走暗卡——总览学科卡内联 --sc-l 引用 --subj-*-l，
     此前未重定义导致 cosmic 下仍是浅粉浅紫底（主题打穿）；.sj-ic 学科图标同步受益 */
  --subj-chinese-l:var(--card-in); --subj-math-l:var(--card-in); --subj-english-l:var(--card-in);
  --subj-science-l:var(--card-in); --subj-politics-l:var(--card-in); --subj-pe-l:var(--card-in);
  --subj-music-l:var(--card-in); --subj-art-l:var(--card-in); --subj-it-l:var(--card-in); --subj-comprehensive-l:var(--card-in);
  --r-card:20px; --r-btn:14px;
  --font-head:"PingFang SC",system-ui,sans-serif;
}

/* ---- A 类 · forest 森野自然（米白纸 + 森林绿 + 陶土橙，有机圆润） ---- */
[data-skin="forest"]{
  --blue:#5b8c3e; --blue-dark:#3f6b27; --blue-light:#eaf2e0;
  --coral:#e08a5b; --coral-light:#fbeede;
  --purple:#9b8cff; --purple-light:#f1eefe;
  --sun:#e6b800; --sun-dark:#b89400; --sun-light:#fbf3d6;
  --yellow-light:#f7f0d8;
  --sky:#7fb3c9; --sky-light:#e7f1f5; --sky-deep:#4a7d94;
  --green:#6aa84f; --orange:#d98a4a; --red:#d98a4a;
  --text:#3a3a2e; --text-muted:#8a8a6e;
  --bg:#f3f1e4; --card:#ffffff; --card-in:#eef3e6; --line:#dfe3cf;
  --r-card:22px; --r-btn:16px; --shadow-2:0 4px 18px rgba(91,140,62,.12);
  --font-head:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}

/* ---- A 类 · ink 国风水墨（宣纸 + 墨黑 + 朱砂红 + 玉绿，楷体标题） ---- */
[data-skin="ink"]{
  --blue:#b23b2e; --blue-dark:#8c2c22; --blue-light:#f6e7e3;
  --coral:#c98a3a; --coral-light:#f7ecd8;
  --purple:#5b6e57; --purple-light:#e9ede6;
  --sun:#caa84a; --sun-dark:#9c7f2e; --sun-light:#f8f1dd;
  --yellow-light:#f5ecd2;
  --sky:#4a6b7c; --sky-light:#e8eef0; --sky-deep:#3a5568;
  --green:#5e8c5a; --orange:#c0742e; --red:#b23b2e;
  --text:#2b2b28; --text-muted:#8c8378;
  --bg:#f5f1e8; --card:#fbf9f3; --card-in:#efe9da; --line:#d8cfb8;
  --r-card:12px; --r-btn:10px; --shadow-2:0 4px 16px rgba(43,43,40,.10);
  --font-head:"KaiTi","STKaiti","PingFang SC",serif;
}

/* ---- A 类 · neon 霓虹赛博（近黑底 + 电青/品红/酸绿，发光描边） ---- */
[data-skin="neon"]{
  --blue:#00e5ff; --blue-dark:#66f2ff; --blue-light:#062b33;
  --coral:#ff2e9a; --coral-light:#330a22;
  --purple:#b14bff; --purple-light:#1e0a33;
  --sun:#f5ff00; --sun-dark:#c9d100; --sun-light:#2e2e08;
  --yellow-light:#26260a;
  --sky:#2ee6ff; --sky-light:#0a2e33; --sky-deep:#66f2ff;
  --green:#39ff14; --orange:#ff8a00; --red:#ff2e9a;
  --text:#eafcff; --text-muted:#7da0b5;
  --bg:#0a0a14; --card:#14142a; --card-in:#1c1c3a; --line:#2a2a55;
  --state-active-bg:#0a2e33; --state-done-bg:#0d2e18;
  --state-locked:#4d5d6a; --state-locked-bg:#16162a;
  --rc-green-bg:#0d2e18; --rc-green-bd:#1e5528; --rc-green-tx:#39ff14;
  --rc-orange-bg:#33200a; --rc-orange-bd:#55381a; --rc-orange-tx:#ff8a00;
  --rc-blue-bg:#0a2830; --rc-blue-bd:#1a4a55; --rc-blue-tx:#2ee6ff;
  --rc-yellow-bg:#2e2e08; --rc-yellow-bd:#4d4d16; --rc-yellow-tx:#f5ff00;
  --shadow-1:0 1px 3px rgba(0,0,0,.4);
  --shadow-2:0 0 18px rgba(0,229,255,.25);
  --shadow-3:0 12px 32px rgba(0,0,0,.6);
  /* 20260831 bug修复：同 cosmic——学科浅底重定义为暗卡，消除深色皮下浅底残留 */
  --subj-chinese-l:var(--card-in); --subj-math-l:var(--card-in); --subj-english-l:var(--card-in);
  --subj-science-l:var(--card-in); --subj-politics-l:var(--card-in); --subj-pe-l:var(--card-in);
  --subj-music-l:var(--card-in); --subj-art-l:var(--card-in); --subj-it-l:var(--card-in); --subj-comprehensive-l:var(--card-in);
  --r-card:16px; --r-btn:12px;
  --font-head:"PingFang SC",system-ui,sans-serif;
}

/* ---- B 类 · klein 克莱因蓝（IKB 纯色，主色多档明度衍生） ---- */
[data-skin="klein"]{
  --blue:#002FA7; --blue-dark:#001c66; --blue-light:#e8edfb;
  --coral:#3b5bdb; --purple:#5c7aea; --sun:#8e9fe8; --sky:#4a6fd0; --green:#1b3a8f;
  --coral-light:#e8edfb; --purple-light:#e8edfb; --sun-light:#e8edfb; --sky-light:#e8edfb;
  --sun-dark:#1b3a8f; --sky-deep:#1b3a8f;
  --orange:#3b5bdb; --red:#002FA7; --yellow-light:#e8edfb;
  --text:#0a1a3f; --text-muted:#5a6b8c;
  --bg:#f2f5fc; --card:#ffffff; --card-in:#e8edfb; --line:#d6deef;
  --shadow-2:0 4px 18px rgba(0,47,167,.14);
  --font-head:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}

/* ---- B 类 · qing 传统青（青花瓷青纯色） ---- */
[data-skin="qing"]{
  --blue:#1B6CA8; --blue-dark:#0e3d5c; --blue-light:#e3eff6;
  --coral:#2e86ab; --purple:#3b9bc4; --sun:#5ba3c9; --sky:#1b6ca8; --green:#15547f;
  --coral-light:#e3eff6; --purple-light:#e3eff6; --sun-light:#e3eff6; --sky-light:#e3eff6;
  --sun-dark:#15547f; --sky-deep:#15547f;
  --orange:#2e86ab; --red:#0e3d5c; --yellow-light:#e3eff6;
  --text:#0e2e44; --text-muted:#5a7488;
  --bg:#f0f5f8; --card:#ffffff; --card-in:#e3eff6; --line:#cfe1ec;
  --shadow-2:0 4px 18px rgba(27,108,168,.14);
  --font-head:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}

/* ---- B 类 · biz 经典商务蓝（沉稳） ---- */
[data-skin="biz"]{
  --blue:#1F4E79; --blue-dark:#163a5c; --blue-light:#e1e7ed;
  --coral:#2e5c8a; --purple:#3b6ea5; --sun:#5a7ca5; --sky:#1f4e79; --green:#163a5c;
  --coral-light:#e1e7ed; --purple-light:#e1e7ed; --sun-light:#e1e7ed; --sky-light:#e1e7ed;
  --sun-dark:#163a5c; --sky-deep:#163a5c;
  --orange:#2e5c8a; --red:#163a5c; --yellow-light:#e1e7ed;
  --text:#1a2b3c; --text-muted:#5a6b7c;
  --bg:#f1f4f7; --card:#ffffff; --card-in:#e1e7ed; --line:#cfd8e0;
  --shadow-2:0 4px 18px rgba(31,78,121,.14);
  --font-head:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}

/* ---- B 类 · indigo 靛蓝（紫调） ---- */
[data-skin="indigo"]{
  --blue:#3F51B5; --blue-dark:#303F9F; --blue-light:#e8eaf6;
  --coral:#5c6bc0; --purple:#7986cb; --sun:#9fa8da; --sky:#3f51b5; --green:#303f9f;
  --coral-light:#e8eaf6; --purple-light:#e8eaf6; --sun-light:#e8eaf6; --sky-light:#e8eaf6;
  --sun-dark:#303f9f; --sky-deep:#303f9f;
  --orange:#5c6bc0; --red:#303f9f; --yellow-light:#e8eaf6;
  --text:#1a1f3d; --text-muted:#5a6090;
  --bg:#f1f2f9; --card:#ffffff; --card-in:#e8eaf6; --line:#d4d7ea;
  --shadow-2:0 4px 18px rgba(63,81,181,.14);
  --font-head:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}

/* ---- B 类 · coral 珊瑚橙（暖色对比亮点） ---- */
[data-skin="coral"]{
  --blue:#FF6B4A; --blue-dark:#e64a19; --blue-light:#ffe3db;
  --coral:#ff8a65; --purple:#ff7043; --sun:#ffa726; --sky:#ff6b4a; --green:#e64a19;
  --coral-light:#ffe3db; --purple-light:#ffe3db; --sun-light:#ffe3db; --sky-light:#ffe3db;
  --sun-dark:#e64a19; --sky-deep:#e64a19;
  --orange:#ff8a65; --red:#e64a19; --yellow-light:#ffe3db;
  --text:#3d1f17; --text-muted:#a06a5a;
  --bg:#fff6f3; --card:#ffffff; --card-in:#ffe3db; --line:#fcd6cc;
  --shadow-2:0 4px 18px rgba(255,107,74,.14);
  --font-head:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}

/* ---- 皮肤专属背景质感（A 类专属；B 类纯色保持扁平） ---- */
[data-skin="cosmic"] body{background:
  radial-gradient(2px 2px at 20% 30%, #fff8 0, transparent 40%),
  radial-gradient(1.5px 1.5px at 70% 20%, #fff6 0, transparent 40%),
  radial-gradient(1.5px 1.5px at 40% 70%, #fff5 0, transparent 40%),
  linear-gradient(160deg,#0d1430,#0f1838 60%,#101a40);}
[data-skin="ink"] body{background:
  radial-gradient(circle at 85% 12%, #c0392b18 0 120px, transparent 120px), #f5f1e8;}
[data-skin="neon"] body{background:
  linear-gradient(transparent 95%, #00e5ff10 95%) 0 0/100% 26px,
  linear-gradient(160deg,#0a0a14,#10101f);}
/* ink 焦点卡朱砂→金渐变；neon 焦点卡电青发光描边 */
[data-skin="ink"] .ws-focus{background:linear-gradient(120deg,#b23b2e,#caa84a)}
[data-skin="neon"] .ws-focus{color:#eafcff;border:1px solid var(--blue);box-shadow:0 0 22px rgba(0,229,255,.35)}
/* ink 楷体标题（--font-head 暂无组件引用，直接选择器落地） */
[data-skin="ink"] h1, [data-skin="ink"] h2, [data-skin="ink"] h3,
[data-skin="ink"] .view-title{font-family:"KaiTi","STKaiti","PingFang SC",serif}
/* cosmic/neon 主色过亮，按钮白字对比不足 → 改深字（UI皮肤按钮变量化后补的对比档） */
[data-skin="cosmic"] .btn-primary, [data-skin="neon"] .btn-primary { color: var(--bg); }
[data-skin="cosmic"] .btn-coral, [data-skin="neon"] .btn-coral { color: var(--bg); }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; max-width: 100%; overflow-x: hidden; }  /* UI优化 M5：杜绝任何横向滚动 */

/* ---------- 触摸设备基础优化（手机/平板） ---------- */
button, .nav-btn, .seg-btn, .stage-entry, .mode-opt, .feature-toggle,
.btn-primary, .btn-secondary, .btn-soft, .btn-send, .flag-item, .history-item,
.flag-item input, .tts-toggle, .switch {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* 消除触摸双击缩放延迟 */
}
button, .flag-item, .tts-toggle, .switch {
  user-select: none;
  -webkit-user-select: none;
}

body {
  font-family: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Segoe UI",
               "Microsoft YaHei", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  line-height: 1.6;
}

.hidden { display: none !important; }
.muted { color: var(--text-muted); font-size: 13px; line-height: 1.7; }

/* ============ 顶栏（白底轻量） ============ */
.topbar {
  display: flex; flex-direction: column;
  padding: 10px 22px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
/* 两行顶栏（方案 C 预览基准）：第一行 Logo + 用户区，第二行整行导航 */
.topbar-row { display: flex; align-items: center; gap: 18px; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; letter-spacing: 0.3px;
  background: linear-gradient(135deg, var(--blue-dark) 10%, var(--blue) 60%, var(--sky) 100%);  /* UI皮肤：品牌渐变随皮肤换色 */
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--blue-dark); }
.nav { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; padding-top: 10px; border-top: 1px solid var(--line); } /* 第二行整行导航：4 常驻 + 更多▾；窄屏 .nav 隐藏时分隔线自动消失 */
.nav-btn {
  background: var(--card-in); color: var(--text-muted); border: none;   /* UI皮肤：随皮肤换底色 */
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font-size: 14px; transition: all 0.2s; text-align: center; white-space: nowrap;
}
.nav-btn:hover { background: var(--blue-light); color: var(--blue-dark); }
.nav-btn.active { background: var(--blue-light); color: var(--blue-dark); font-weight: 600; }
/* ===== 顶栏「更多 ▾」内联下拉（仅宽屏；窄屏顶栏整体隐藏） ===== */
.nav-more { position: relative; }
.nav-more-btn { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.nav-more-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  display: none; flex-direction: column; gap: 4px;
  min-width: 150px; padding: 6px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-btn); box-shadow: var(--shadow-3); z-index: 80;
}
.nav-more.open .nav-more-menu { display: flex; }
.nav-more-menu .nav-btn { width: 100%; text-align: left; }
.user-box { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.user-box select {
  padding: 7px 10px; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--card); font-size: 14px; max-width: 140px; color: var(--text);
}
.icon-btn {
  background: var(--blue-light); border: none; color: var(--blue-dark);
  width: 32px; height: 32px; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.icon-btn:hover { background: var(--blue); color: #fff; }
/* 两行顶栏后第一行空间充裕：iPad 竖屏（769–900px）徽章文字常驻，无需收窄补丁 */

/* 本地离线标注（轻量水印） */
.offline-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--rc-green-tx);
  background: var(--rc-green-bg); border: 1px solid var(--rc-green-bd);
  border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}

/* ============ 主区 ============ */
/* UI优化 M5 容器体系：≥1201 桌面 max-width 1200 居中；901-1200 平板横屏 960（见下方媒体查询）；
   641-900 平板竖屏 / ≤640 手机满宽（边距由各断点块控制）。.app-shell 为同规范的工具类。 */
.app-shell { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (max-width: 640px) { .app-shell { padding: 0 12px; } }
.main {
  flex: 1; width: 100%; max-width: 1200px; margin: 0 auto;
  padding: 22px 18px 44px;
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
}
.view-title { font-size: 22px; margin-bottom: 16px; color: var(--text); }

/* ============ ICP 备案页脚（v2.55.1 粤ICP备2026155182号-1，管局合规悬挂） ============ */
.icp-footer {
  text-align: center; padding: 6px 16px 18px;
  font-size: 12px; color: var(--text-muted); line-height: 1.6;
}
.icp-footer a { color: var(--text-muted); text-decoration: none; }
.icp-footer a:hover { color: var(--blue); text-decoration: underline; }
body.in-chat .icp-footer { display: none; }  /* 对话页整页布局，页脚让位键盘 */
body.hw-printing .icp-footer, body.hw-printing-his .icp-footer { display: none; }  /* 作业打印不夹带页脚 */
/* 窄屏：避开固定底部导航（与 .main 同款让位策略） */
@media (max-width: 900px) {
  .icp-footer { padding-bottom: calc(70px + env(safe-area-inset-bottom) + 10px); }
}

.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px;
  border: 1px solid rgba(228, 238, 236, 0.6);
}
.card h2 { font-size: 16px; color: var(--blue-dark); margin-bottom: 10px; }
.card h3 { font-size: 15px; color: var(--blue-dark); margin-bottom: 12px; }

/* ============ 仪表盘 · 训练总面板 ============ */
.panel-wrap { display: flex; flex-direction: column; gap: 16px; max-width: 860px; margin: 0 auto; }

/* --- 模式切换（核心置顶） --- */
.mode-switch { display: flex; gap: 10px; }
.mode-opt {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 116px; /* 两卡等高等宽 */
  background: var(--card); border: 2px solid var(--line); border-radius: var(--r-btn);
  padding: 14px 10px; cursor: pointer; transition: all 0.2s;
  font-family: inherit; text-align: center;
}
.mode-opt:hover { border-color: var(--blue); }
.mode-opt.active { border-color: var(--blue); background: var(--blue-light); }
.mode-opt .mo-icon {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #f0f5f4; color: var(--text-muted); transition: all 0.2s;
}
.mode-opt.active .mo-icon { background: var(--card); color: var(--blue-dark); }
.mode-opt b { font-size: 15px; color: var(--text); }
.mode-opt.active b { color: var(--blue-dark); }
.mode-opt small { color: var(--text-muted); font-size: 12px; }

/* --- 教材配置区（级别 + 单元下拉） --- */
.book-config { display: flex; flex-direction: column; gap: 12px; }
.config-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.config-field { flex: 1; min-width: 200px; }
.config-field label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 5px; }
.config-field select {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--r-btn);
  font-size: 16px; background: var(--card); color: var(--text); font-family: inherit;
}
.config-field select:focus { outline: none; border-color: var(--blue); }
.smart-hint {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--sky-light); border: 1px solid var(--rc-blue-bd); color: var(--rc-blue-tx);
  border-radius: 999px; padding: 5px 13px; font-size: 12.5px;
}

/* --- 三阶段训练入口 --- */
.stage-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stage-entry {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: #fff; border: 2px solid var(--line); border-radius: 16px;
  padding: 20px 12px 16px; cursor: pointer; text-align: center;
  transition: all 0.2s; font-family: inherit;
}
.stage-entry:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow); }
.stage-entry:active { transform: scale(0.98); }
.stage-entry .se-icon {
  width: 52px; height: 52px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-light); color: var(--blue-dark);
}
.stage-entry b { font-size: 15px; color: var(--text); }
.stage-entry small { color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.stage-entry .se-go {
  margin-top: 4px; font-size: 12.5px; color: var(--blue-dark);
  background: var(--blue-light); border-radius: 999px; padding: 4px 14px;
}
.stage-entry.recommended { border-color: var(--blue); }
.stage-entry.recommended::before {
  content: "本周推荐";
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--sun); color: #fff; font-size: 11px; font-weight: 600;
  border-radius: 999px; padding: 2px 10px; letter-spacing: 1px;
}

/* --- 对话轮数（轻量选择） --- */
.turns-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.turns-row > span { font-size: 13.5px; color: var(--text-muted); }

/* --- 阶段2 角色配置面板 --- */
.role-panel .form-row { margin-top: 0; }
.role-preview {
  background: #f7fbfa; border: 1px dashed var(--line); border-radius: 12px;
  padding: 10px 14px; font-size: 13px; color: var(--text-muted); margin-top: 12px;
}
.role-actions { margin-top: 14px; text-align: center; }

/* --- 六大辅助功能快捷开关 --- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.feature-toggle {
  display: flex; align-items: center; gap: 10px;
  background: #fbfdfd; border: 1px solid var(--line); border-radius: 14px;
  padding: 11px 12px; cursor: pointer; transition: border-color 0.2s;
}
.feature-toggle:hover { border-color: var(--blue); }
.feature-toggle .ft-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-light); color: var(--blue-dark);
}
.feature-toggle .ft-text { flex: 1; min-width: 0; }
.feature-toggle b { display: block; font-size: 13px; color: var(--text); line-height: 1.35; }
.feature-toggle small { color: var(--text-muted); font-size: 11.5px; line-height: 1.4; display: block; }
.feature-toggle.on { border-color: var(--blue); background: #f4fbf9; }

/* 轻量开关（switch） */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .knob {
  position: absolute; inset: 0; background: #dde8e6; border-radius: 999px;
  transition: background 0.25s; cursor: pointer;
}
.switch .knob::before {
  content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform 0.25s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.switch input:checked + .knob { background: var(--blue); }
.switch input:checked + .knob::before { transform: translateX(18px); }

/* --- 学习进度与统计 --- */
.stage-progress { margin-bottom: 8px; }
.stage-track { height: 10px; background: var(--blue-light); border-radius: 6px; overflow: hidden; }
.stage-fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--green)); border-radius: 6px; transition: width 0.4s; }
.stage-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.stat-row { display: flex; gap: 14px; margin-bottom: 12px; }
.stat { flex: 1; text-align: center; background: #f6fafa; border-radius: 12px; padding: 12px; }
.stat b { display: block; font-size: 24px; color: var(--blue-dark); }
.stat span { font-size: 12px; color: var(--text-muted); }
.trend { display: flex; align-items: flex-end; gap: 6px; height: 62px; }
.trend-col { flex: 1; display: flex; align-items: flex-end; height: 100%; }
.trend-bar { width: 100%; background: linear-gradient(180deg, var(--blue-light), var(--blue)); border-radius: 4px 4px 0 0; }  /* UI皮肤：随皮肤换色 */

/* --- 游客欢迎 --- */
.guest-card { text-align: center; padding: 40px 24px; }
.guest-card .guest-icon {
  width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 24px;
  background: var(--blue-light); color: var(--blue-dark);
  display: flex; align-items: center; justify-content: center;
}

/* ============ 按钮 ============ */
.btn-primary {
  background: linear-gradient(180deg, var(--blue), var(--blue-dark)); /* 同色系微渐变（UI皮肤：随皮肤换色） */
  color: #fff;
  border: none; border-radius: var(--r-pill); padding: 12px 30px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background 0.2s, transform 0.12s;
}
.btn-primary:hover { background: linear-gradient(180deg, var(--blue-dark), var(--blue-dark)); transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.97); }
/* 珊瑚粉强调按钮（连续打卡 / 空态引导 CTA；白字仅用于≥15px 大按钮，小标签用 coral 字 on coral-light 底） */
.btn-coral {
  background: var(--coral);   /* UI皮肤：随皮肤换色（原亮粉→粉微渐变改纯色） */
  color: #fff; border: none; border-radius: var(--r-btn);
  padding: 11px 24px; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.btn-coral:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn-coral:active { transform: scale(0.97); }
.btn-big { font-size: 17px; padding: 14px 36px; }
/* 行内小操作按钮（三档尺寸的最小档；商店购买/穿上等） */
.btn-mini {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-pill);
  padding: 5px 14px; font-size: 12px; font-weight: 600; cursor: pointer; /* 三档字号最小档（模块12） */
  color: var(--text); font-family: inherit;
  transition: background 0.15s, transform 0.12s;
}
.btn-mini:hover { background: var(--blue-light); }
.btn-mini:active { transform: scale(0.95); }
/* ==================== 按钮规范（模块12） ==================== */
/* 全局禁用态：任何按钮 disabled 一律可见可懂（去悬停抬升/按压反馈） */
button:disabled, .btn:disabled {
  opacity: .5; cursor: not-allowed;
  transform: none !important;
  filter: grayscale(.15);
}
/* loading 旋转标：文字隐去改转圈（纯 transform 动画）；主色按钮白圈、描边按钮主色圈 */
.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2.5px solid rgba(255, 255, 255, 0.45); border-top-color: #fff;
  border-radius: 50%; animation: btn-spin 0.7s linear infinite;
}
.btn-secondary.btn-loading::after, .btn-mini.btn-loading::after, .btn-soft.btn-loading::after {
  border-color: rgba(56, 168, 157, 0.3); border-top-color: var(--blue);
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
/* 触控目标 ≥44px：粗指针设备上全部可点控件拉高（儿童手指友好） */
@media (hover: none) and (pointer: coarse) {
  .btn-primary, .btn-secondary, .btn-soft, .btn-send, .seg-btn, .nav-btn { min-height: 44px; }
  .btn-mini { min-height: 38px; padding: 8px 16px; }
  .icon-btn { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .btn-loading::after { animation-duration: 1.4s; } }

.btn-secondary {
  background: var(--card); color: var(--blue-dark); border: 1.5px solid var(--blue);
  border-radius: var(--r-pill); padding: 9px 20px; font-size: 14px; cursor: pointer; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.2s, transform 0.12s;
}
.btn-secondary:hover { background: var(--blue-light); }
.btn-secondary:active { transform: scale(0.97); }
/* 结束按钮：柔和中性，不用大红 */
.btn-soft {
  background: var(--card); color: var(--rc-orange-tx); border: 1.5px solid var(--rc-orange-bd);
  border-radius: var(--r-pill); padding: 9px 18px; font-size: 13.5px; cursor: pointer; font-weight: 600;
  transition: background 0.2s;
}
.btn-soft:hover { background: var(--rc-orange-bg); }
.btn-send {
  background: var(--blue); color: #fff; border: none;
  border-radius: var(--r-pill); padding: 0 24px; font-size: 15px; cursor: pointer; font-weight: 600;
  align-self: stretch; min-height: 44px; /* 触摸友好高度 */
  transition: background 0.2s;
}
.btn-send:hover { background: var(--blue-dark); }

/* ============ 通用分段选择（seg） ============ */
.seg { display: flex; gap: 10px; flex-wrap: wrap; }
.seg-btn {
  flex: 1; min-width: 120px; background: var(--card-in); color: var(--text);
  border: 2px solid transparent; border-radius: var(--r-btn); padding: 11px;
  font-size: 14px; cursor: pointer; line-height: 1.4; transition: all 0.2s;
  font-family: inherit;
}
.seg-btn small { color: var(--text-muted); font-size: 12px; }
.seg-btn:hover { background: var(--blue-light); }
.seg-btn.active { border-color: var(--blue); background: var(--blue-light); color: var(--blue-dark); font-weight: 600; }

/* ============ 表单 ============ */
.form-row { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.form-row > div { flex: 1; min-width: 200px; }
.form-row label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 5px; }
.form-row input, .form-row select {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--r-btn); font-size: 16px; /* 16px 防止 iOS 缩放 */
  background: var(--card); color: var(--text); font-family: inherit;
}
.form-row input:focus, .form-row select:focus { outline: none; border-color: var(--blue); }

/* ============ 对话页 ============ */
/* --vvh 由 JS 的 visualViewport 实时更新（软键盘弹出时收缩）；未设置时回退 dvh/vh */
.chat-layout {
  display: flex; flex-direction: column;
  height: calc(var(--vvh, 100vh) - 170px);
  height: calc(var(--vvh, 100dvh) - 170px);
  min-height: 420px;
}
/* 对话页整页占满视口：输入栏永远贴底，下面不留空白。
   高度用 --vvh（软键盘弹出时 JS 自动收缩），并保留 vh 全兼容回退；
   手机浏览器若不支持 dvh，flex 布局也不受影响。 */
body.in-chat { height: var(--vvh, 100vh); height: var(--vvh, 100dvh); overflow: hidden; }
body.in-chat .main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0; }
body.in-chat .view { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; }
body.in-chat .chat-layout { flex: 1; min-height: 0; height: auto; }
.chat-head {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
}
.chat-info { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px;
  font-size: 12.5px; color: var(--blue-dark); box-shadow: none; font-weight: 600;
}
.chip-unit { color: var(--rc-yellow-tx); background: var(--yellow-light); border-color: var(--rc-yellow-bd); }
.chip-role { color: var(--rc-green-tx); background: var(--rc-green-bg); border-color: var(--rc-green-bd); }
.chat-actions { display: flex; align-items: center; gap: 14px; }
/* 移动端返回主画面：窄屏顶栏让位给对话，会话页内补一个回家入口 */
.btn-chat-home { font-size: 17px; line-height: 1; }
@media (min-width: 821px) { .btn-chat-home { display: none; } }
.tts-toggle { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; cursor: pointer; }

.chat-area { flex: 1; display: flex; flex-direction: column; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); border: 1px solid rgba(228, 238, 236, 0.6); overflow: hidden; }

/* CHAT_UX·UX5 主题 emoji 条：横排不遮挡输入区，点 emoji 听发音 */
.topic-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 14px 2px; }
.topic-bar-title { font-size: 13px; font-weight: 700; color: var(--blue-dark);
  background: rgba(124, 199, 188, .18); border-radius: 999px; padding: 3px 10px; }
.topic-emoji { border: none; background: rgba(255, 255, 255, .8); border-radius: 12px;
  font-size: 22px; line-height: 1; padding: 6px 8px; cursor: pointer;
  box-shadow: 0 1px 3px rgba(56, 168, 157, .18); transition: transform .15s ease, box-shadow .15s ease; }
.topic-emoji:hover { transform: translateY(-2px) scale(1.08); box-shadow: 0 4px 10px rgba(56, 168, 157, .3); }
.topic-emoji:active { transform: scale(.94); }

/* CHAT_UX·UX6 本场进度条：答对前进，达目标亮金 */
.chat-progress { position: relative; height: 16px; margin: 6px 14px 0;
  border-radius: 999px; background: rgba(228, 238, 236, .9); overflow: hidden;
  border: 1px solid rgba(228, 238, 236, 1); }
.chat-progress-fill { height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--blue-light));
  transition: width .45s cubic-bezier(.34, 1.3, .64, 1); }
.chat-progress.goal-done .chat-progress-fill { background: linear-gradient(90deg, var(--sun), var(--orange)); }
.chat-progress-label { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 10.5px; font-weight: 700; color: var(--text); opacity: .85; }

/* CHAT_UX·UX6 报告页三枚本场徽章 */
.session-badges { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.s-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 13px;
  font-weight: 700; color: var(--blue-dark); background: rgba(124, 199, 188, .16);
  border: 1px solid rgba(124, 199, 188, .4); border-radius: 999px; padding: 7px 13px; }

.messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; -webkit-overflow-scrolling: touch; }
.msg { display: flex; flex-wrap: wrap; align-items: flex-end; }
.msg-ai { justify-content: flex-start; }
.msg-user { justify-content: flex-end; }
.bubble {
  max-width: 76%; padding: 12px 16px; border-radius: 18px;
  font-size: 15px; line-height: 1.65; white-space: pre-wrap; word-break: break-word;
}
/* 师生对话：浅底色区分（AI 极浅青绿 · 学生浅暖黄） */
.msg-ai .bubble { background: var(--blue-light); color: var(--text); border-bottom-left-radius: 6px; }
.msg-user .bubble { background: var(--yellow-light); color: var(--text); border: 1px solid var(--rc-yellow-bd); border-bottom-right-radius: 6px; }

/* 气泡重播小按钮：点一下把这条内容再朗读一遍 */
.bubble-replay {
  flex-shrink: 0; align-self: flex-end; margin: 0 6px 4px; padding: 0;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(203, 233, 228, 0.9); background: #fff;
  font-size: 13px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.7; transition: opacity 0.15s, transform 0.15s;
}
.bubble-replay:hover { opacity: 1; transform: scale(1.12); }
.msg-user .bubble-replay { order: -1; } /* 学生气泡靠右：按钮放气泡左边更顺手 */

/* CHAT_UX·UX1 慢速听一遍：与重播同款圆形小按钮 */
.bubble-slow {
  flex-shrink: 0; align-self: flex-end; margin: 0 6px 4px 0; padding: 0;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(203, 233, 228, 0.9); background: #fff;
  font-size: 13px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.7; transition: opacity 0.15s, transform 0.15s;
}
.bubble-slow:hover { opacity: 1; transform: scale(1.12); }

/* CHAT_UX·UX2 一键中文小链接 */
.bubble-zh {
  flex-shrink: 0; align-self: flex-end; margin: 0 6px 4px 0; padding: 3px 9px;
  border-radius: 12px; border: 1px solid rgba(203, 233, 228, 0.9); background: #fff;
  font-size: 11.5px; color: var(--text-muted); cursor: pointer; opacity: 0.8;
}
.bubble-zh:hover { opacity: 1; }
.bubble-zh-text {
  flex-basis: 100%; order: 9; margin: 4px 6px 0 0; padding: 8px 12px;
  background: rgba(255, 246, 220, 0.9); border: 1px dashed var(--rc-yellow-bd);
  border-radius: 10px; font-size: 13px; line-height: 1.6; color: var(--text);
}

/* CHAT_UX·UX3 提示卡：题目下方折叠支架，给台阶不给答案 */
.hint-card { flex-basis: 100%; order: 10; margin: 6px 6px 0 0; }
.hint-toggle {
  padding: 5px 14px; border-radius: 14px; border: 1px solid rgba(203, 233, 228, 0.9);
  background: #fff; font-size: 13px; color: var(--blue-dark, #2a7d74); cursor: pointer;
}
.hint-toggle:hover { background: var(--blue-light); }
.hint-body {
  margin-top: 6px; padding: 10px 14px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px;
}
.hint-body p { margin: 4px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hint-label { color: var(--text-muted); }
.hint-word, .hint-pattern {
  padding: 5px 12px; border-radius: 14px; border: 1.5px solid var(--blue, #38a89d);
  background: #fff; font-size: 14px; font-weight: 600; color: var(--blue-dark, #2a7d74);
  cursor: pointer; transition: transform 0.12s, background 0.12s;
}
.hint-word:hover, .hint-pattern:hover { background: var(--blue-light); transform: scale(1.05); }
.hint-pattern { border-style: dashed; }

/* 「外教正在思考…」轻柔加载提示 */
.msg-typing .bubble { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13.5px; }
.typing-dots { display: inline-flex; gap: 4px; }
.typing-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
  animation: breathe 1.4s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes breathe {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

.composer {
  border-top: 1px solid var(--line); padding: 12px 14px; background: #fcfefd;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.stt-banner {
  background: var(--sky-light); color: var(--rc-blue-tx); border: 1px solid var(--rc-blue-bd);
  border-radius: 10px; padding: 6px 12px; font-size: 13px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
/* CHAT_UX·UX8 音量条：5 格随振幅逐级点亮，越响越高越暖 */
.vol-meter { display: inline-flex; align-items: flex-end; gap: 2px; }
.vol-meter i {
  width: 5px; border-radius: 2px; background: #cfe0ef;
  transition: height 0.08s linear, background 0.08s linear;
}
.vol-meter i:nth-child(1) { height: 6px; }
.vol-meter i:nth-child(2) { height: 9px; }
.vol-meter i:nth-child(3) { height: 12px; }
.vol-meter i:nth-child(4) { height: 15px; }
.vol-meter i:nth-child(5) { height: 18px; }
.vol-meter i.on { background: var(--green); }
.vol-meter i:nth-child(4).on, .vol-meter i:nth-child(5).on { background: var(--orange); }
/* CHAT_UX·UX8 VAD 开关：小手一点就能切回手动模式 */
.vad-toggle {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
  font-size: 12px; cursor: pointer; user-select: none; white-space: nowrap;
}
.vad-toggle input { accent-color: var(--blue); cursor: pointer; }
/* CHAT_UX·UX9 点选拼句词卡 */
.chip-row {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
  padding: 8px 4px 2px;
}
.word-chip {
  padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--rc-blue-bd);
  background: #fff; color: var(--rc-blue-tx); font-size: 15px; cursor: pointer;
  box-shadow: 0 2px 0 var(--rc-blue-bd); transition: transform 0.12s, background 0.12s;
  touch-action: manipulation; user-select: none;
}
.word-chip:hover { background: var(--sky-light); }
.word-chip:active { transform: translateY(2px); box-shadow: none; }
.word-chip-del { background: #fff7f0; border-color: #f0cfae; color: #b06a2a; box-shadow: 0 2px 0 #f0cfae; }
.chip-toggle {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line);
  background: #fff; font-size: 20px; cursor: pointer; flex-shrink: 0; line-height: 1;
  transition: transform 0.15s, border-color 0.2s, background 0.2s;
}
.chip-toggle:hover { transform: scale(1.06); }
.chip-toggle.active { border-color: var(--blue); background: var(--sky-light); }
@media (prefers-reduced-motion: reduce) {
  .vol-meter i { transition: none; }
  .word-chip, .chip-toggle { transition: none; }
}
.composer-row { display: flex; gap: 10px; align-items: center; }
.composer-row input[type="text"] {
  flex: 1; min-width: 0; /* 窄屏可收缩，保住发送按钮不被裁 */ padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 16px; /* 16px 防止 iOS 聚焦自动缩放 */
  background: #fff; color: var(--text); font-family: inherit;
}
.composer-row input[type="text"]:focus { outline: none; border-color: var(--blue); }
.mic-btn {
  width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--blue); color: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(56, 168, 157, 0.30); transition: transform 0.15s, background 0.2s;
  /* 防双击缩放/长按呼出菜单，连点开关更稳 */
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.mic-btn:hover { transform: scale(1.06); }
.mic-btn:active { transform: scale(0.96); }
/* 录音中：柔和暖橙轻脉冲（不再是刺眼大红） */
.mic-btn.recording { background: var(--orange); animation: pulse 1.3s infinite; }
.mic-big { width: 74px; height: 74px; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(221, 154, 78, 0.35); }
  70% { box-shadow: 0 0 0 16px rgba(221, 154, 78, 0); }
  100% { box-shadow: 0 0 0 0 rgba(221, 154, 78, 0); }
}

/* ============ 发音训练 ============ */
.pron-area { flex: 1; display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; }
.pron-progress { font-size: 14px; color: var(--text-muted); background: var(--card); padding: 6px 16px; border-radius: var(--r-pill); border: 1px solid var(--line); }
.pron-target { width: 100%; max-width: 640px; text-align: center; }
.pron-label { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.pron-sentence { font-size: 22px; font-weight: 600; line-height: 1.5; margin-bottom: 16px; color: var(--text); }
.pron-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pron-result { width: 100%; max-width: 640px; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 16px 20px; }
/* 发音波形/音高对比画布（模块 A1）：上标准音下跟读音 */
.pron-viz { width: 100%; max-width: 640px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px 12px 6px; }
.pron-viz canvas { width: 100%; height: 220px; display: block; }
.pron-viz-legend { display: flex; gap: 14px; justify-content: center; margin: 4px 0 2px; font-size: 12px; color: var(--text-muted); }
.pron-viz-legend .lg::before { content: "●"; margin-right: 4px; }
.lg-ok::before { color: #38a89d; }
.lg-mid::before { color: #dd9a4e; }
.lg-bad::before { color: #d9764f; }
.pron-score-row { display: flex; gap: 18px; align-items: center; }
.pron-score { font-size: 52px; font-weight: 800; line-height: 1; }
.pron-score small { font-size: 15px; font-weight: 600; margin-left: 2px; }
.pron-feedback { font-size: 15px; margin-bottom: 8px; }
.pron-pitch { font-size: 14px; margin-bottom: 10px; color: var(--text); }
.pron-pitch b { color: var(--blue-dark); font-size: 16px; }
.pron-words { display: flex; flex-wrap: wrap; gap: 6px; }
.pw { padding: 3px 10px; border-radius: 8px; font-size: 14px; }
.pw-ok { background: var(--rc-green-bg); color: var(--rc-green-tx); }
/* 未读准的词：温和浅橙提示，不用红叉与删除线 */
.pw-miss { background: var(--rc-orange-bg); color: var(--rc-orange-tx); }
#pronFallback { margin-top: 8px; }

/* ============ 报告（四分区温柔卡片） ============ */
.report-wrap { max-width: 780px; margin: 0 auto; }
.report-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.report-head > div { display: flex; gap: 10px; }
.report-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.stats-mini { display: flex; gap: 10px; padding: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.stats-mini .stat { background: #f6fafa; }

.report-sec { margin-bottom: 14px; }
/* 四大分区卡片：浅色底 + 细边框 + 主题轻图标 */
.rc-card { border: 1.5px solid transparent; }
.rc-green  { background: var(--rc-green-bg);  border-color: var(--rc-green-bd); }
.rc-orange { background: var(--rc-orange-bg); border-color: var(--rc-orange-bd); }
.rc-blue   { background: var(--rc-blue-bg);   border-color: var(--rc-blue-bd); }
.rc-yellow { background: var(--rc-yellow-bg); border-color: var(--rc-yellow-bd); }
.rc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.rc-icon {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: #fff;
}
.rc-green  .rc-head h3 { color: var(--rc-green-tx); }
.rc-orange .rc-head h3 { color: var(--rc-orange-tx); }
.rc-blue   .rc-head h3 { color: var(--rc-blue-tx); }
.rc-yellow .rc-head h3 { color: var(--rc-yellow-tx); }
.rc-green  .rc-icon { color: var(--rc-green-tx); }
.rc-orange .rc-icon { color: var(--rc-orange-tx); }
.rc-blue   .rc-icon { color: var(--rc-blue-tx); }
.rc-yellow .rc-icon { color: var(--rc-yellow-tx); }
.rc-head h3 { font-size: 15.5px; }

.sec-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.score-ring { position: relative; width: 64px; height: 64px; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring .ring-bg { fill: none; stroke: #ffffff; stroke-width: 4.5; }
.score-ring .ring-fill { fill: none; stroke: var(--green); stroke-width: 4.5; stroke-linecap: round; }
.score-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--rc-green-tx); }
.point-list { padding-left: 20px; display: flex; flex-direction: column; gap: 7px; font-size: 14.5px; line-height: 1.7; }
.corr-item, .better-item, .lesson { background: rgba(255, 255, 255, 0.75); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.corr-src { font-size: 14px; margin-bottom: 5px; }
.corr-fix { font-size: 14px; color: var(--rc-blue-tx); margin-bottom: 5px; font-weight: 600; }
.corr-note { font-size: 13px; color: var(--text-muted); }
/* 关键句子轻柔高亮 */
.quote { background: #fff; border-left: 3px solid var(--rc-blue-bd); padding: 2px 8px; border-radius: 6px; font-style: italic; display: inline-block; }
.quote-good { border-left-color: var(--rc-green-bd); color: var(--rc-green-tx); }
.arrow { margin: 0 8px; color: var(--text-muted); font-weight: 700; }
.pill-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.pill { background: rgba(255, 255, 255, 0.8); color: var(--text-muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.pill-hit { background: #fff; color: var(--rc-green-tx); font-weight: 600; border-color: var(--rc-green-bd); }
.plan-list { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.pron-avg { font-size: 38px; font-weight: 800; color: var(--blue-dark); }
.pron-avg small { font-size: 14px; }
.pron-row { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--line); align-items: flex-start; }
.pron-row:last-child { border-bottom: none; }
.pron-score-sm { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; }
.s-good { background: var(--rc-green-bg); color: var(--rc-green-tx); }
.s-ok { background: var(--rc-blue-bg); color: var(--rc-blue-tx); }
/* 待加强：温和浅橙，不用大红 */
.s-low { background: var(--rc-orange-bg); color: var(--rc-orange-tx); }

/* ============ 学习记录 ============ */
.history-wrap { max-width: 640px; margin: 0 auto; }
.history-list { display: flex; flex-direction: column; gap: 10px; }
.history-item {
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; border: 1.5px solid var(--line); text-align: left; width: 100%;
  font-family: inherit; transition: border-color 0.2s;
}
.history-item:hover { border-color: var(--blue); }
.history-item small { display: block; color: var(--text-muted); margin-top: 3px; font-size: 12px; }

/* ============ 设置页 ============ */
.settings-wrap { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

/* ============ Toast ============ */
.toast {
  position: fixed; bottom: calc(28px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  background: rgba(55, 71, 79, 0.92); color: #fff; border-radius: 999px;
  padding: 11px 24px; font-size: 14px; z-index: 100; max-width: 86vw;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* ---------- 触摸设备（平板/手机，含大屏平板）：加大导航触摸目标 ---------- */
@media (hover: none) and (pointer: coarse) {
  .nav-btn { padding: 12px 18px; }
  .icon-btn { width: 38px; height: 38px; }
  .user-box select { padding: 8px 12px; }
  .tts-toggle input { width: 17px; height: 17px; }
}

/* ============ 响应式：手机（≤640px 顶栏第一行紧凑；UI优化 M5 拆分自原 ≤820 块） ============ */
@media (max-width: 640px) {
  /* 顶栏（窄屏只剩第一行：Logo + 用户区；导航移交底部 Tab） */
  .topbar {
    padding: 8px 12px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .logo { font-size: 16px; gap: 6px; }
  .logo svg { width: 21px; height: 21px; }
  .offline-badge { font-size: 11px; padding: 3px 9px; }
  .offline-badge .ob-text { display: none; }
  .offline-badge::after { content: "本地离线"; font-size: 11px; }
  .user-box select { max-width: 104px; font-size: 13px; }
  .icon-btn { width: 34px; height: 34px; }
}

/* 手机（≤600）六件套压缩规则已后移至下方 ≤640 块之后（同优先级必须后置才能覆盖 40px 触控目标） */

/* ============ 响应式：手机 + 平板竖屏内容紧凑（≤820px 同窄屏逻辑） ============ */
@media (max-width: 820px) {
  .main { padding: 14px 12px 28px; }
  .view-title { font-size: 19px; margin-bottom: 12px; }
  .card { padding: 14px; border-radius: 15px; }

  /* 训练总面板：纵向堆叠 */
  .mode-switch { flex-direction: row; }
  .stage-cards { grid-template-columns: 1fr; gap: 10px; }
  .stage-entry { flex-direction: row; text-align: left; align-items: center; padding: 14px; gap: 12px; }
  .stage-entry .se-icon { width: 46px; height: 46px; }
  .stage-entry > div { flex: 1; }
  .feature-grid { grid-template-columns: 1fr; }
  .config-field { min-width: 100%; }
  .smart-hint { align-self: flex-start; }

  /* 统计两列换行 */
  .stat-row { gap: 8px; flex-wrap: wrap; }
  .stat { min-width: calc(50% - 4px); padding: 10px 6px; }

  /* 对话页：顶栏两行 → 扣除更多；软键盘时由 --vvh 自动收缩 */
  .chat-layout { height: calc(var(--vvh, 100dvh) - 208px); min-height: 300px; }
  .chat-head { gap: 6px; margin-bottom: 8px; }
  .chat-actions { width: 100%; justify-content: space-between; }
  .messages { padding: 12px; gap: 10px; }
  .bubble { max-width: 90%; font-size: 14.5px; padding: 10px 13px; }
  .composer { padding: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .composer-row { gap: 8px; }
  .btn-send { padding: 0 16px; } /* 窄屏发送按钮紧凑，给输入框让位 */
  .mic-btn { width: 46px; height: 46px; }
  .mic-big { width: 64px; height: 64px; }
  .stt-banner { font-size: 12px; }

  /* 发音训练 */
  .pron-area { gap: 12px; }
  .pron-sentence { font-size: 18px; }
  .pron-score { font-size: 42px; }
  .pron-result { padding: 14px; }

  /* 报告：统计格三列两行 */
  .stats-mini { gap: 8px; padding: 10px; }
  .stats-mini .stat { min-width: calc(33% - 6px); padding: 10px 4px; }
  .report-head { flex-wrap: wrap; gap: 10px; }
  .pron-row { gap: 10px; }
}

/* ============ 响应式：手机横屏（高度稀缺） ============ */
@media (max-width: 920px) and (orientation: landscape) {
  .chat-layout { min-height: 240px; }
  .pron-sentence { font-size: 17px; }
}

/* ============ 响应式：平板（横屏 901-1200，UI优化 M5 断点迁移） ============ */
@media (min-width: 901px) and (max-width: 1200px) {
  .stage-cards { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .main { padding: 18px 16px 32px; max-width: 960px; }
}

/* ============================================================
   作业批改（小学全科 · 温柔批改）
   ============================================================ */
.hw-wrap { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

/* 作业页 seg 按钮文字短，放开 min-width 保证并排 */
.hw-wrap .seg-btn { min-width: 0; }

/* -- 拍照上传 -- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.hw-photo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.hw-photo-hint { font-size: 12.5px; color: var(--text-muted); }
.hw-photo-preview { margin-top: 12px; }
.hw-photo-preview img {
  max-width: 100%; max-height: 340px; border-radius: 14px;
  border: 1.5px solid var(--line); background: #fff; display: block;
}
.hw-photo-ops { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.hw-ocr-status {
  margin-top: 10px; font-size: 13.5px; color: var(--blue-dark);
  background: var(--blue-light); border-radius: 10px; padding: 8px 13px;
  line-height: 1.7; display: none;
}
.hw-ocr-status.show { display: block; }

#hwContent {
  width: 100%; margin-top: 12px; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 14px;
  font-size: 16px; /* 防止 iOS 聚焦缩放 */
  font-family: inherit; line-height: 1.8; color: var(--text);
  background: #fff; resize: vertical; min-height: 140px;
}
#hwContent:focus { outline: none; border-color: var(--blue); }

.hw-example {
  margin-top: 12px; padding: 10px 14px; border-radius: 12px;
  background: var(--sky-light); border: 1px solid #c6e1f2;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: #3a7ca5; line-height: 1.7;
}
.hw-example b { color: var(--blue-dark); }
.hw-example code {
  background: #fff; border: 1px solid #c6e1f2; border-radius: 6px;
  padding: 1px 6px; font-size: 12px; color: var(--blue-dark);
}

.hw-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

/* -- 逐题批改列表 -- */
.hw-items { display: flex; flex-direction: column; gap: 9px; }
.hw-item {
  background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 13px; padding: 10px 13px; font-size: 14.5px; line-height: 1.7;
}
.hw-item-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.hw-no {
  font-size: 12px; color: var(--text-muted); font-weight: 700; flex-shrink: 0;
}
.hw-text { font-weight: 600; word-break: break-all; }
.hw-st {
  flex-shrink: 0; font-size: 11.5px; font-weight: 700; border-radius: 999px;
  padding: 2px 10px; border: 1px solid transparent;
}
.hw-st-ok     { color: var(--rc-green-tx);  background: var(--rc-green-bg);  border-color: var(--rc-green-bd); }
.hw-st-wrong  { color: var(--rc-orange-tx); background: var(--rc-orange-bg); border-color: var(--rc-orange-bd); }
.hw-st-warn   { color: var(--rc-yellow-tx); background: var(--rc-yellow-bg); border-color: var(--rc-yellow-bd); }
.hw-st-manual { color: var(--rc-blue-tx);   background: var(--rc-blue-bg);   border-color: var(--rc-blue-bd); }
.hw-item-ans { margin-top: 6px; color: var(--rc-green-tx); font-weight: 600; }
.hw-item-note { margin-top: 4px; color: var(--text-muted); font-size: 13.5px; }

/* -- 统计条 -- */
.hw-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hw-stat {
  background: #fff; border-radius: 10px; padding: 6px 12px;
  font-size: 13px; color: var(--text-muted); font-weight: 600;
}
.hw-stat b { font-size: 16px; color: var(--rc-green-tx); margin-right: 2px; }
.hw-stat.hw-s-wrong b { color: var(--rc-orange-tx); }
.hw-stat.hw-s-warn b { color: var(--rc-yellow-tx); }
.hw-stat.hw-s-manual b { color: var(--rc-blue-tx); }

/* -- 知识点小结 -- */
.hw-tips { padding-left: 20px; display: flex; flex-direction: column; gap: 7px; font-size: 14.5px; line-height: 1.7; }

/* -- 追问快捷键 + 对话 -- */
.hw-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.hw-quick-btn { cursor: pointer; font-family: inherit; transition: all 0.15s; }
.hw-quick-btn:hover { background: var(--blue-light); }
.hw-chat {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px;
  max-height: 380px; overflow-y: auto; padding: 4px 2px;
}
.hw-bubble {
  max-width: 86%; padding: 10px 14px; border-radius: 14px;
  font-size: 14.5px; line-height: 1.75; white-space: pre-wrap; word-break: break-word;
}
.hw-bubble-user {
  align-self: flex-end; background: var(--blue-light);
  border: 1px solid #cbe9e4; border-bottom-right-radius: 5px;
}
.hw-bubble-ai {
  align-self: flex-start; background: #fff; border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
}
.hw-bubble-speak {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
  font-size: 12.5px; color: var(--blue-dark); background: var(--blue-light);
  border: 1px solid #cbe9e4; border-radius: 999px; padding: 3px 12px;
  cursor: pointer; font-family: inherit;
}
.hw-ask-row { display: flex; gap: 10px; }
.hw-ask-row input {
  flex: 1; padding: 11px 14px; border: 1.5px solid var(--line);
  border-radius: 12px; font-size: 16px; /* 防 iOS 缩放 */
  font-family: inherit; color: var(--text); background: #fff;
}
.hw-ask-row input:focus { outline: none; border-color: var(--blue); }

/* -- 同款练习题（v2.10.0 答题卡：白底圆角卡 + 对错两态 + 44px 触控） -- */
.hw-drill { display: flex; flex-direction: column; gap: 10px; }
.hw-drill-card {
  background: var(--card); border: 1.5px solid var(--rc-blue-bd); border-radius: 14px;
  padding: 12px 14px; font-size: 14.5px; display: flex; flex-direction: column; gap: 9px;
  transition: border-color .2s, background .2s;
}
.hw-drill-card.is-ok {
  border-color: var(--rc-green-bd); background: var(--rc-green-bg);
}
.hw-drill-card.is-bad { border-color: var(--rc-orange-bd); }
.hw-drill-q { display: flex; align-items: flex-start; gap: 9px; }
.hw-drill-no {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue); color: #fff; font-size: 12.5px; font-weight: 700;
}
.hw-drill-card.is-ok .hw-drill-no { background: var(--rc-green-tx); }
.hw-drill-text { font-weight: 600; word-break: break-all; line-height: 1.6; }
.hw-drill-form { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.hw-drill-input {
  flex: 1; min-width: 0; min-height: 44px; padding: 6px 12px;
  border: 1.5px solid var(--line); border-radius: 12px;
  font-size: 16px; font-family: inherit; color: var(--text); background: #fff;
}
.hw-drill-input:focus { outline: none; border-color: var(--blue); }
.hw-drill-input:disabled { color: var(--rc-green-tx); background: var(--rc-green-bg); }
.hw-drill-submit { min-height: 44px; }
.hw-drill-reveal { min-height: 44px; align-self: flex-start; }
.hw-drill-msg { font-size: 13.5px; line-height: 1.6; border-radius: 10px; padding: 7px 11px; }
.hw-drill-msg-ok {
  color: var(--rc-green-tx); background: var(--rc-green-bg);
  font-weight: 700;
}
.hw-drill-msg-bad {
  color: var(--rc-orange-tx); background: var(--rc-orange-bg);
}
.hw-drill-ans { color: var(--text-muted); font-size: 12.5px; margin-top: 3px; }
/* 旧版同款练习折叠条：仍供书库问答小测（renderKbQuiz）使用，作业批改已改答题卡 */
.hw-drill-item {
  background: var(--card); border: 1px dashed var(--rc-blue-bd); border-radius: 12px;
  padding: 9px 13px; font-size: 14.5px;
}
.hw-drill-bonus {
  margin-top: 10px; padding: 10px 14px; border-radius: 12px;
  background: var(--rc-yellow-bg); color: var(--rc-yellow-tx);
  font-weight: 700; font-size: 14.5px; text-align: center;
}

/* -- v2.10.0 批改历史面板 -- */
.hw-his-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hw-his-head h3 { margin-bottom: 0; }
.hw-his-stats { font-size: 13.5px; margin: 8px 0 10px; }
.hw-his-item {
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px;
  margin-bottom: 8px; cursor: pointer; transition: border-color .15s, background .15s;
}
.hw-his-item:hover, .hw-his-item.open { border-color: var(--blue); background: var(--blue-light); }
.hw-his-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hw-his-time { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.hw-his-subj { font-size: 13px; font-weight: 700; }
.hw-his-count { font-size: 13.5px; font-weight: 600; }
.hw-his-bar {
  flex: 1; min-width: 60px; max-width: 140px; height: 8px; border-radius: 999px;
  background: var(--rc-orange-bg); overflow: hidden;
}
.hw-his-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--rc-green-tx);
}
.hw-his-detail { margin-top: 10px; cursor: default; }
.hw-his-meta {
  font-size: 12.5px; color: var(--text-muted); font-weight: 700;
  padding: 6px 10px; background: var(--card-in); border-radius: 10px; margin-bottom: 10px;
}
.hw-his-detail .card { margin: 10px 0; }

/* -- v2.11.0 P2 三件：家长复核条 / 全对庆祝条 / 报告打印入口 -- */
.hw-print-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.hw-print-title { font-size: 15px; font-weight: 800; }
.hw-print-btn { min-height: 44px; }
.hw-manual-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding: 9px 12px; border-radius: 10px;
  background: var(--blue-light);
}
.hw-manual-q { font-size: 13.5px; font-weight: 700; flex: 1; min-width: 150px; }
.hw-manual-ops { display: flex; gap: 8px; }
.hw-manual-ok, .hw-manual-wrong {
  min-height: 44px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  font-size: 13.5px; font-weight: 700; font-family: inherit;
  border: 1.5px solid var(--rc-green-tx); background: var(--card); color: var(--rc-green-tx);
}
.hw-manual-wrong { border-color: var(--rc-orange-tx); color: var(--rc-orange-tx); }
.hw-manual-done { font-size: 13.5px; font-weight: 700; color: var(--rc-green-tx); }
.hw-perfect-bar {
  margin-top: 4px; padding: 12px 14px; border-radius: 12px;
  background: var(--rc-yellow-bg); color: var(--rc-yellow-tx);
  font-weight: 800; font-size: 15px; text-align: center;
}

/* 手机（≤640）：复核条问题与按钮分行、庆祝条字号收敛 */
@media (max-width: 640px) {
  .hw-manual-q { flex-basis: 100%; }
  .hw-perfect-bar { font-size: 14px; }
}

/* ===== v2.11.0 P2 报告打印：藏壳只留报告，白底黑字 A4 =====
   两种模式：body.hw-printing=当前批改（只留 #hwResult），
   body.hw-printing-his=历史回看（只留已展开的那份 .hw-his-detail）。
   @page A4 已由字帖打印块声明；无打印机时走系统「另存为 PDF」。 */
@media print {
  body.hw-printing > *:not(.main),
  body.hw-printing-his > *:not(.main) { display: none !important; }
  body.hw-printing .topbar, body.hw-printing .sidebar, body.hw-printing .bottom-nav,
  body.hw-printing .nav, body.hw-printing .voice-assist, body.hw-printing .toast,
  body.hw-printing-his .topbar, body.hw-printing-his .sidebar, body.hw-printing-his .bottom-nav,
  body.hw-printing-his .nav, body.hw-printing-his .voice-assist, body.hw-printing-his .toast
  { display: none !important; }
  /* 当前批改模式：只留报告区（输入卡/追问卡/历史面板全部不进纸） */
  body.hw-printing #view-homework > .hw-wrap > :not(#hwResult) { display: none !important; }
  /* 历史回看模式：只留展开的那条记录，收起其他行、隐藏当前报告区 */
  body.hw-printing-his #view-homework > .hw-wrap > :not(#hwHistoryPanel) { display: none !important; }
  body.hw-printing-his #hwResult { display: none !important; }
  body.hw-printing-his .hw-his-item { display: none !important; }
  body.hw-printing-his .hw-his-item.open { display: block !important; }
  /* 打印按钮不进纸，标题保留作报告抬头；「可以继续提问」是纯屏幕交互引导，
     打印件上没有提问框，一并隐藏 */
  body.hw-printing .hw-print-btn, body.hw-printing-his .hw-print-btn { display: none !important; }
  body.hw-printing .rc-yellow, body.hw-printing-his .rc-yellow { display: none !important; }
  /* 视图壳展开：仅定向 #view-homework（不能写 .view——特异性会压过 .hidden，
     把 workspace 等所有隐藏视图一起强制显示，打印会叠页） */
  body.hw-printing #view-homework.hidden, body.hw-printing-his #view-homework.hidden
  { display: block !important; }
  body.hw-printing .main, body.hw-printing-his .main { margin: 0; padding: 0; }
  /* 白底黑字、去卡片阴影圆角、字号 12pt、色条/彩色文字按实际色打印 */
  body.hw-printing, body.hw-printing-his { background: #fff !important; height: auto; }
  body.hw-printing #hwResult, body.hw-printing-his .hw-his-detail { font-size: 12pt; }
  body.hw-printing #hwResult .card, body.hw-printing-his .hw-his-detail .card {
    box-shadow: none; border: 1px solid #999; background: #fff;
    break-inside: avoid; margin: 0 0 10px;
  }
  body.hw-printing *, body.hw-printing-his * {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* 手机（≤640）：答题卡提交按钮随输入行换行后可撑满；历史色条换行不挤压；
   历史按钮拉到 44px 触控目标（btn-secondary 默认高不够） */
@media (max-width: 640px) {
  .hw-drill-form .hw-drill-submit { flex: 1 1 auto; }
  .hw-his-bar { max-width: none; flex-basis: 100%; }
  .hw-his-detail .hw-stats { gap: 6px; }
  #btnHwHistory { min-height: 44px; }
}

/* ---------- 我的书库（本地 PDF 知识库） ---------- */
.kb-wrap { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

/* -- 上传区 -- */
.kb-upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.kb-upload-hint { font-size: 12.5px; color: var(--text-muted); }
.kb-range-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.kb-range-row label { font-size: 13.5px; color: var(--text-muted); white-space: nowrap; }
.kb-range-row input {
  width: 220px; max-width: 100%; padding: 8px 12px; border-radius: 10px;
  border: 1.5px solid var(--line); font-size: 14px; font-family: inherit;
  background: #fff;
}
.kb-range-row input:focus { outline: none; border-color: var(--blue-dark); }
.kb-up-status { margin-top: 10px; font-size: 13.5px; color: var(--blue-dark); }
.kb-import-row { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }

/* -- 书架 -- */
.kb-shelf { display: flex; flex-direction: column; gap: 12px; }
.kb-book {
  display: flex; gap: 14px; align-items: stretch;
  border: 1.5px solid var(--line); border-radius: 16px; padding: 12px;
  background: #fff;
}
.kb-book-cover {
  flex: 0 0 76px; min-height: 100px; border-radius: 10px 12px 12px 10px;
  color: #fff; font-weight: 700; font-size: 12.5px; line-height: 1.5;
  padding: 10px 8px; overflow: hidden; word-break: break-word;
  box-shadow: inset -5px 0 8px -6px rgba(0,0,0,.45);
}
.kb-book-cover.c1 { background: linear-gradient(150deg, #6ea8fe, #3b6fe0); }
.kb-book-cover.c2 { background: linear-gradient(150deg, #57cf9d, #22916a); }
.kb-book-cover.c3 { background: linear-gradient(150deg, #f7b26d, #e07b39); }
.kb-book-cover.c4 { background: linear-gradient(150deg, #c39bf0, #8a5cd6); }
.kb-book-cover.c5 { background: linear-gradient(150deg, #f38ba0, #d5486e); }
.kb-book-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.kb-book-title { font-size: 15px; overflow-wrap: anywhere; }
.kb-book-meta { font-size: 12.5px; color: var(--text-muted); }
.kb-book-ops { display: flex; gap: 9px; margin-top: auto; flex-wrap: wrap; }

/* -- 扫描版 OCR 进度 -- */
.kb-ocr-progress { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
.kb-ocr-bar {
  flex: 1; min-width: 120px; height: 8px; border-radius: 99px;
  background: var(--line); overflow: hidden;
}
.kb-ocr-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--blue), var(--blue-dark));
  transition: width .8s ease;
}
.kb-ocr-text { font-size: 12.5px; color: var(--blue-dark); font-weight: 600; min-width: 38px; text-align: right; }
.kb-ocr-failed { font-size: 12.5px; color: #c0392b; margin-top: 4px; }
.kb-cover-dim { filter: grayscale(.7) opacity(.55); }

/* -- 阅读问答头 -- */
.kb-read-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kb-read-head h3 { margin: 0 0 4px; }

/* -- 手机适配 -- */
@media (max-width: 640px) {
  .hw-quick-btn { padding: 6px 11px; font-size: 12px; }
  .hw-bubble { max-width: 92%; font-size: 14px; }
  .hw-actions { justify-content: stretch; }
  .hw-actions .btn-primary, .hw-actions .btn-secondary { flex: 1; }
  .hw-stat { flex: 1; text-align: center; }
  .hw-photo-hint { flex-basis: 100%; }
  .hw-photo-preview img { max-height: 260px; }
  .kb-book-cover { flex-basis: 60px; min-height: 84px; font-size: 11.5px; }
  .kb-read-head { flex-direction: column; }
}

/* ---------- 绘本伴读（MOD-10：逐页浏览 + 点句朗读 + 点词查义 + 生词收藏 + 整页跟读） ---------- */
.cp-wrap {
  max-width: 860px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
  min-height: calc(100vh - 140px);
}

/* -- 顶部栏：返回 / 书名 / 级别下拉 / 页码 -- */
.cp-topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--r-card); padding: 12px 14px; box-shadow: var(--shadow-1);
}
.cp-topbar .btn-soft { min-height: 44px; min-width: 44px; }  /* 触控目标 ≥44px */
.cp-title-box { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.cp-title {
  font-size: 16px; overflow-wrap: anywhere;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-level-sel {
  padding: 6px 8px; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--blue-light); color: var(--blue-dark);
  font-size: 13px; font-weight: 700; font-family: inherit;
  min-height: 44px; cursor: pointer;
}
.cp-pageno { font-size: 13px; color: var(--text-muted); white-space: nowrap; }

/* 级别徽章（书架卡片与伴读顶栏共用） */
.cp-level-badge {
  display: inline-block; margin-right: 6px; padding: 2px 8px;
  border-radius: var(--r-pill); background: var(--sun-light);
  color: var(--sun-dark); font-size: 11.5px; font-weight: 800;
  letter-spacing: .5px; vertical-align: 1px;
}

/* -- 正文：按句分行，英文上中文下 -- */
.cp-tip { font-size: 12.5px; color: var(--text-muted); margin: -4px 2px 0; }
.cp-body {
  flex: 1; background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--r-card); padding: 18px 20px; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 16px;
}
.cp-sent { display: flex; flex-direction: column; gap: 4px; }
.cp-sent-en {
  font-size: 16.5px; line-height: 1.9; cursor: pointer;
  padding: 6px 10px; margin: -6px -10px; border-radius: 12px;
  transition: background .18s var(--ease);
  overflow-wrap: anywhere;
}
.cp-sent-en:hover { background: var(--blue-light); }
.cp-sent-zh { font-size: 13px; color: var(--text-muted); line-height: 1.6; padding-left: 10px; }

/* 可点单词：轻底色提示可交互；已收藏高亮 */
.cp-word {
  border-radius: 6px; padding: 1px 2px; margin: 0 -1px;
  cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease);
}
.cp-word:hover { background: var(--sun-light); color: var(--sun-dark); }
.cp-word-starred {
  background: var(--sun-light); color: var(--sun-dark); font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--sun);
}

/* -- 点词释义气泡（屏幕居中卡片式，小屏不溢出） -- */
.cp-bubble {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 60; max-width: min(92vw, 380px); width: max-content;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow-3);
  animation: cpBubbleIn .18s var(--ease);
}
@keyframes cpBubbleIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.cp-bubble-word { font-size: 17px; color: var(--blue-dark); }
.cp-bubble-meaning { font-size: 14px; color: var(--text); flex: 1; min-width: 120px; }
.cp-bubble-done { font-size: 12.5px; color: var(--sun-dark); background: var(--sun-light);
  padding: 4px 10px; border-radius: var(--r-pill); }
.cp-bubble-speak {
  min-width: 44px; min-height: 44px; border: none; border-radius: 12px;
  background: var(--blue-light); color: var(--blue-dark); font-size: 18px;
  cursor: pointer; transition: transform .15s var(--ease);
}
.cp-bubble-speak:active { transform: scale(.92); }
.cp-bubble-close {
  min-width: 34px; min-height: 34px; border: none; border-radius: 10px;
  background: transparent; color: var(--text-muted); font-size: 14px; cursor: pointer;
}

/* -- 底部操作条：上一页 / 下一页 / 生词 / 跟读 -- */
.cp-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 4px 2px calc(6px + env(safe-area-inset-bottom));
}
.cp-actions .btn-secondary, .cp-actions .btn-soft, .cp-actions .btn-primary {
  min-height: 44px; flex: 1; min-width: 96px;
}
.cp-actions .btn-primary { flex: 1.4; }

/* -- 生词本列表（书库页与伴读页共用） -- */
.kb-vocab-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.kb-vocab-item {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1.5px dashed var(--rc-blue-bd); border-radius: 12px;
  background: #fff; padding: 9px 13px; font-size: 14.5px;
}
.kb-vocab-word {
  color: var(--blue-dark); cursor: pointer; min-width: 44px; min-height: 30px;
  display: inline-flex; align-items: center;
}
.kb-vocab-meaning { flex: 1; min-width: 120px; }
.kb-vocab-page { font-size: 12.5px; color: var(--text-muted); }

/* -- 伴读手机适配：顶部栏折行、句号降字号、操作条四键平铺 -- */
@media (max-width: 640px) {
  .cp-topbar { gap: 8px; padding: 10px 12px; }
  .cp-title { font-size: 14.5px; }
  .cp-body { padding: 14px 12px; gap: 14px; }
  .cp-sent-en { font-size: 15.5px; line-height: 1.85; }
  .cp-sent-zh { padding-left: 4px; }
  .cp-actions { gap: 8px; }
  .cp-actions .btn-secondary, .cp-actions .btn-soft, .cp-actions .btn-primary { min-width: 0; }
  .cp-bubble { bottom: 118px; }
  .kb-vocab-meaning { flex-basis: 100%; }
  /* 书架操作按钮小屏提升触控目标（低龄手指好点） */
  .kb-book-ops .btn-secondary, .kb-book-ops .btn-soft { min-height: 44px; }
}

/* （顶部导航窄屏规则已移除：≤768px 改用底部 Tab 栏 + 「更多」抽屉，见文件末尾） */

/* ---------- 坚持打卡（首页激励卡） ---------- */
.streak-hero {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 12px;
}
.streak-num { display: flex; align-items: baseline; gap: 8px; }
.streak-num b {
  font-size: 42px; line-height: 1; color: var(--blue-dark);
  text-shadow: 0 2px 0 var(--blue-light);
}
.streak-num span { font-size: 14px; color: var(--text-muted); }
.streak-best {
  font-size: 12.5px; color: #a9742a; background: var(--yellow-light);
  border: 1px solid #f0dcae; border-radius: 99px; padding: 3px 10px;
}
.streak-week { display: flex; gap: 8px; }
.stk-day {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 2px; border-radius: 12px;
  background: #f4faf8; border: 1.5px solid transparent;
}
.stk-day small { font-size: 11px; color: var(--text-muted); }
.stk-dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--line); color: transparent; font-size: 14px; font-weight: 700;
}
.stk-day.on .stk-dot {
  background: linear-gradient(150deg, var(--blue), var(--blue-dark));
  color: #fff;
}
.stk-day.on small { color: var(--blue-dark); font-weight: 600; }
.stk-day.today { border-color: var(--blue); background: var(--blue-light); }

/* ---------- 错题本（间隔复习） ---------- */
.mk-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.mk-card {
  border: 1.5px solid var(--line); border-radius: 16px;
  background: #fff; padding: 12px 14px;
}
.mk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mk-subject { background: var(--sky-light); color: #3a7ca5; border: 1px solid #c6e1f2; }
.mk-state { font-size: 12.5px; color: var(--text-muted); }
.mk-state.due { color: #a9742a; font-weight: 600; }
.mk-q {
  font-size: 16.5px; font-weight: 600; margin: 10px 0;
  overflow-wrap: anywhere;
}
.mk-ans {
  background: var(--blue-light); border-radius: 12px;
  padding: 10px 12px; margin: 8px 0;
  display: flex; flex-direction: column; gap: 8px;
}
.mk-ans-row { display: flex; flex-direction: column; gap: 2px; }
.mk-ans-row b { font-size: 12px; color: var(--blue-dark); }
.mk-ans-row span { font-size: 14px; overflow-wrap: anywhere; }
.mk-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.mk-remove { color: var(--text-muted); }
.mk-reveal { margin-top: 4px; }

/* ---------- 拍照复习（模块 3：本机 OCR 对答案） ---------- */
.mk-foot {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 4px;
}
.mk-photo {
  margin-top: 10px; padding: 12px;
  border: 1.5px dashed var(--line); border-radius: 12px;
  background: var(--blue-light);
}
.mk-photo-q {
  font-weight: 600; font-size: 15px; margin: 8px 0 10px;
  overflow-wrap: anywhere;
}
.mk-photo-preview img {
  max-width: 100%; max-height: 320px;
  border-radius: 10px; margin-top: 10px;
  object-fit: contain; background: #fff;
}
.mk-photo-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mk-photo-status { min-height: 1.2em; margin: 8px 0 0; color: var(--text-muted); font-size: .85rem; }
.mk-judge {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  font-size: .92rem; display: flex; flex-direction: column; gap: 4px;
}
.mk-judge b { font-size: 15px; }
.mk-judge-ok { background: #e8f7ee; color: #1d7a43; }
.mk-judge-warn { background: #fff7e6; color: #9a6b00; }
.mk-judge-no { background: #fdeeee; color: #b03a3a; }
.mk-judge p { margin: 0; overflow-wrap: anywhere; }

/* ---------- 家长管控（设置页）与护眼提醒 ---------- */
#pcPinInline {
  width: 130px; padding: 8px 10px;
  border: 1.5px solid var(--line); border-radius: 10px;
  font-size: 14px; margin-right: 8px;
}
.rest-card .pin-row { justify-content: center; }

/* ---------- 家长口令门（解锁遮罩层） ---------- */
.pin-gate {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(44, 62, 68, 0.5);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.pin-card {
  background: var(--card); border-radius: 22px;
  max-width: 400px; width: 100%;
  padding: 28px 26px 24px; text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}
.pin-lock {
  width: 58px; height: 58px; margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--blue-light); color: var(--blue-dark);
  display: flex; align-items: center; justify-content: center;
}
.pin-card h2 { font-size: 20px; color: var(--text); margin-bottom: 8px; }
.pin-card .muted { font-size: 13px; line-height: 1.7; }
.pin-row { display: flex; gap: 10px; margin-top: 16px; }
.pin-row input {
  flex: 1; min-width: 0;
  font-size: 18px; letter-spacing: 4px; text-align: center;
  padding: 10px 12px;
  border: 2px solid var(--line); border-radius: 12px;
  outline: none; background: var(--bg); color: var(--text);
}
.pin-row input:focus { border-color: var(--blue); }
.pin-row .btn-primary { padding: 10px 20px; font-size: 15px; }
.pin-err {
  margin-top: 10px; font-size: 13px; color: var(--orange);
}

/* v2.55.0 访客体验通道（口令门内）：分隔线 + 昵称一键免费体验 */
.pin-alt { margin-top: 18px; }
.pin-alt-sep {
  display: flex; align-items: center; gap: 10px;
  color: var(--text); font-size: 12px; opacity: 0.65; margin-bottom: 2px;
}
.pin-alt-sep::before, .pin-alt-sep::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.pin-alt .pin-row input {
  letter-spacing: normal; text-align: left; font-size: 15px;
}
.pin-alt .pin-row .btn-soft { padding: 10px 16px; font-size: 15px; white-space: nowrap; }
.pin-tip { margin-top: 10px; font-size: 12px; line-height: 1.6; }



/* ---- 语法练习（改错题） ---- */
.gr-sentence { font-size: 20px; line-height: 1.6; margin: 10px 0 4px; color: var(--text); }
.gr-answer-row { display: flex; gap: 10px; margin: 12px 0; }
.gr-answer-row input { flex: 1; }
.seg-row { display: flex; gap: 8px; margin: 12px 0 16px; flex-wrap: wrap; }
.seg-row .seg-btn { flex: 1; min-width: 88px; }
.gr-fb { border-radius: 12px; padding: 12px 14px; margin-top: 6px; }
.gr-fb p { margin: 6px 0 0; }
.gr-ok { background: #e8f6ef; color: #1d7a4f; }
.gr-no { background: #fff3e0; color: #9a5b13; }

/* ---- 单元测评（10 题解锁闯关） ---- */
.uq-unit { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; text-align: left; padding: 14px 16px; margin: 10px 0; border-radius: var(--r-btn);
  border: 1px solid var(--line); background: var(--card); cursor: pointer; transition: border-color .15s, background .15s; }
/* 三态（模块11）：待测=悬停蓝 / 已通过=绿 / 锁定=灰 */
.uq-unit:hover:not(.uq-locked):not(.uq-passed) { border-color: var(--sky); background: var(--state-active-bg); }
.uq-unit b { display: block; }
.uq-unit small { color: var(--text-muted); }
.uq-unit.uq-locked { opacity: .6; cursor: not-allowed; background: var(--state-locked-bg); border-color: var(--line); }
.uq-unit.uq-passed { border-color: #cbe9d5; background: var(--state-done-bg); }
.uq-unit-main { min-width: 0; }
.uq-done { display: inline-flex; align-items: center; gap: 4px; color: var(--sky);
  font-size: 13px; font-weight: 600; white-space: nowrap; }
.uq-done::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: var(--sky); color: #fff; font-size: 12px; }
.uq-lock { color: var(--state-locked); font-size: 14px; white-space: nowrap; }
.uq-go { color: var(--sky); font-size: 14px; font-weight: 600; white-space: nowrap; }
.uq-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.uq-opt { padding: 16px 12px; border-radius: var(--r-btn); border: 1px solid var(--line); background: var(--card);
  font-size: 17px; cursor: pointer; transition: border-color .15s, background .15s; }
.uq-opt:hover { border-color: #3b6fd4; background: #f4f8ff; }
.uq-replay { margin: 4px 0 0; }
.uq-rev-item { padding: 10px 0; border-bottom: 1px dashed #e3e8ef; }
.uq-rev-item:last-child { border-bottom: none; }
@media (max-width: 820px) {
  .uq-options { grid-template-columns: 1fr; }
  .uq-unit { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   AI 外教吉祥物（猫头鹰“帕普”）· 三情绪 + 轻动效
   动效只动 transform/opacity；reduced-motion 时全部静默降级
   ============================================================ */

/* 首页欢迎区：标题行与吉祥物并排 */
.dash-hello { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dash-hello h2 { margin-bottom: 0; }
.dash-mascot { flex: none; line-height: 0; }

/* 对话页：吉祥物与 chips 同行 */
.chat-info { align-items: center; }
.chat-mascot { flex: none; line-height: 0; width: 40px; height: 40px; }

/* 报告页顶部总评行 */
.report-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  padding: 6px 4px 0; }
.hero-mascot { flex: none; line-height: 0; }
.hero-say { font-size: 16.5px; font-weight: 700; color: var(--blue-dark); }

/* 情绪切换时轻弹一下 */
.mascot-pop { animation: mascot-pop .38s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes mascot-pop {
  0% { transform: scale(.9); }
  55% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* 身体轻微上下浮动（呼吸感） */
.mascot-svg .m-float { animation: mascot-float 3.2s ease-in-out infinite; transform-origin: 60px 60px; }
@keyframes mascot-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2.4px); }
}

/* think：思考点依次浮起 + 眼睛周期性眨一下 */
.mascot-svg .m-thk { transform-box: fill-box; transform-origin: center; }
.mascot-svg .m-thk.d1 { animation: mthk 1.5s ease-in-out infinite; }
.mascot-svg .m-thk.d2 { animation: mthk 1.5s ease-in-out .25s infinite; }
.mascot-svg .m-thk.d3 { animation: mthk 1.5s ease-in-out .5s infinite; }
@keyframes mthk {
  0%, 100% { transform: translateY(0); opacity: .55; }
  40% { transform: translateY(-2.5px); opacity: 1; }
}
.mascot-svg .m-blink { transform-box: fill-box; transform-origin: center;
  animation: mblink 5.2s ease-in-out infinite; }
@keyframes mblink {
  0%, 93.5%, 100% { transform: scaleY(1); }
  95.5% { transform: scaleY(.08); }
  97.5% { transform: scaleY(1); }
}

/* encourage：星星眼闪烁 + 侧边小星闪耀 */
.mascot-svg .m-spark { transform-box: fill-box; transform-origin: center;
  animation: mspark 1.8s ease-in-out infinite; }
@keyframes mspark {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.12) rotate(8deg); opacity: .85; }
}
.mascot-svg .m-twinkle { transform-box: fill-box; transform-origin: center;
  animation: mtwinkle 1.4s ease-in-out infinite; }
@keyframes mtwinkle {
  0%, 100% { transform: scale(.7); opacity: .5; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* CHAT_UX·UX7 celebrate：头顶彩纸屑循环浮落 + 整只跳一下 */
.mascot-svg .m-confetti circle { transform-box: fill-box; transform-origin: center;
  animation: mconfetti 1.6s ease-in-out infinite; }
.mascot-svg .m-confetti circle:nth-child(2n) { animation-delay: .3s; }
.mascot-svg .m-confetti circle:nth-child(3n) { animation-delay: .55s; }
@keyframes mconfetti {
  0%, 100% { transform: translateY(0); opacity: .9; }
  50% { transform: translateY(3.5px); opacity: .55; }
}
.chat-mascot[data-mood="celebrate"] { animation: mcelebrate .55s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes mcelebrate {
  0% { transform: translateY(0); }
  35% { transform: translateY(-7px) scale(1.06); }
  70% { transform: translateY(0) scale(.97); }
  100% { transform: translateY(0) scale(1); }
}

/* CHAT_UX·UX7 hint：歪头 + 头顶小灯泡闪一下 */
.chat-mascot[data-mood="hint"] .mascot-svg .m-float { animation: mhint-tilt 1.8s ease-in-out infinite; }
@keyframes mhint-tilt {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  45% { transform: rotate(-7deg) translateY(-1px); }
  60% { transform: rotate(-7deg) translateY(-1px); }
}
.mascot-svg .m-bulb { transform-box: fill-box; transform-origin: center;
  animation: mbulb 1.3s ease-in-out infinite; }
@keyframes mbulb {
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.18); opacity: 1; }
}

/* ============================================================
   庆祝动画系统 · 星星雨 / 彩带爆发 / 徽章弹出
   全屏 overlay 不拦截点击（pointer-events:none）；点击任意处可提前结束
   ============================================================ */
.celebrate-overlay { position: fixed; inset: 0; z-index: 80; pointer-events: none;
  overflow: hidden; }

/* ① 星星雨：从顶部散落 */
.cel-star { position: absolute; top: -34px; line-height: 1; will-change: transform;
  animation: cel-fall var(--dur, 1.2s) linear var(--del, 0s) forwards; }
@keyframes cel-fall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--dx, 0px), 108vh, 0) rotate(560deg); opacity: .9; }
}

/* ② 彩带爆发：从中心径向飞出（rotate 后 translateY 沿旋转方向） */
.cel-burst { position: absolute; left: 50%; top: 42%; width: 0; height: 0; }
.cel-rib { position: absolute; left: 0; top: 0; width: 10px; height: 26px;
  border-radius: 6px; background: var(--c, var(--blue)); will-change: transform;
  animation: cel-rib var(--dur, .95s) cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes cel-rib {
  0% { transform: rotate(var(--ang, 0deg)) translateY(0) scale(.4); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: rotate(var(--ang, 0deg)) translateY(calc(0px - var(--d, 200px))) scale(1); opacity: 0; }
}

/* ③ 徽章弹出：弹性缩放 + 光晕扩散 + 文字浮现 */
.cel-badge { position: absolute; left: 50%; top: 38%; text-align: center;
  transform: translate(-50%, -50%);
  animation: cel-badge-in 2.1s ease forwards; }
.cel-badge-ico { display: block; font-size: 64px; line-height: 1.1;
  filter: drop-shadow(0 6px 14px rgba(56, 168, 157, .35)); }
.cel-badge p { margin-top: 6px; font-size: 16px; font-weight: 700; color: var(--blue-dark);
  background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 6px 16px;
  box-shadow: var(--shadow); white-space: nowrap; }
.cel-badge-ring { position: absolute; left: 50%; top: 32px; width: 84px; height: 84px;
  margin: -42px 0 0 -42px; border: 3px solid var(--sun); border-radius: 50%;
  animation: cel-ring 1.6s ease-out .1s forwards; opacity: 0; }
@keyframes cel-badge-in {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  14% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  22% { transform: translate(-50%, -50%) scale(1); }
  86% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(.92); opacity: 0; }
}
@keyframes cel-ring {
  0% { transform: scale(.55); opacity: .95; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* ============================================================
   批4·趣味音效增强：答案闪光/抖动、吉祥物弹跳/安慰、满分金色闪光、旋转星雨
   ============================================================ */

/* B3 正确选项：绿色闪光边框 0.6s（与 SFX 同步触发） */
.glow-ok { animation: glow-ok .6s ease; }
@keyframes glow-ok {
  0% { box-shadow: 0 0 0 0 rgba(102, 217, 166, .9); }
  55% { box-shadow: 0 0 0 7px rgba(102, 217, 166, .55); }
  100% { box-shadow: 0 0 0 0 rgba(102, 217, 166, 0); }
}

/* B3 错误选项：水平抖动 0.4s */
.shake-bad { animation: shake-bad .4s ease; }
@keyframes shake-bad {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

/* B2 吉祥物答对：弹跳 2 次 + 轻微旋转 */
.mascot-bounce { animation: mascot-bounce .8s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes mascot-bounce {
  0% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-14px) rotate(-6deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-8px) rotate(5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* B2 满分大弹跳：更高更欢 */
.mascot-bounce-big { animation: mascot-bounce-big 1s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes mascot-bounce-big {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  20% { transform: translateY(-20px) rotate(-8deg) scale(1.08); }
  45% { transform: translateY(0) rotate(0deg) scale(.96); }
  70% { transform: translateY(-12px) rotate(7deg) scale(1.05); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* B2 连错 2 次：左右轻摆安慰 */
.mascot-soothe { animation: mascot-soothe 1s ease-in-out; }
@keyframes mascot-soothe {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-7deg); }
  65% { transform: rotate(7deg); }
}

/* B1 满分 confetti big：中心金色闪光粒子 */
.cel-spark { position: absolute; top: -22px; line-height: 1; will-change: transform, opacity;
  animation: cel-spark-in 1.3s ease var(--del, 0s) forwards; }
@keyframes cel-spark-in {
  0% { opacity: 0; transform: scale(.4) translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.15) translateY(52px); }
}

/* B1 连击 10+ 星星雨 big：旋转轨迹（--rot 随机正反转） */
.cel-star-big { animation-name: cel-fall-spin; }
@keyframes cel-fall-spin {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--dx, 0px), 108vh, 0) rotate(var(--rot, 560deg)); opacity: .9; }
}

/* 用户系统开启「减弱动态效果」时：吉祥物与庆祝动画全部静默（JS 侧同步降级为文字提示） */
@media (prefers-reduced-motion: reduce) {
  .mascot-svg .m-float, .mascot-svg .m-thk, .mascot-svg .m-blink,
  .mascot-svg .m-spark, .mascot-svg .m-twinkle, .mascot-pop,
  .mascot-svg .m-confetti circle, .chat-mascot[data-mood="celebrate"],
  .chat-mascot[data-mood="hint"] .mascot-svg .m-float, .mascot-svg .m-bulb,
  .cel-star, .cel-rib, .cel-badge, .cel-badge-ring,
  .glow-ok, .shake-bad, .mascot-bounce, .mascot-bounce-big, .mascot-soothe,
  .cel-spark { animation: none !important; }
  .cel-star, .cel-rib, .cel-spark { display: none; }
}

/* ============================================================
   移动端底部导航 + 「更多」抽屉（模块14 · 窄屏核心导航）
   ≤640px 手机：左侧导航隐藏，底部 4 主 Tab + 更多抽屉；对话页底栏滑出
   （UI优化 M5：断点由 820 迁至 900——平板竖屏(641-900)顶栏图标态与底部 Tab 冗余可达，
     保证「更多」抽屉（学科入口）往任何窄于桌面的宽度都可达（任务书 6.4）；≤640 手机为主形态）
   ============================================================ */
.bottom-nav { display: none; }
.dash-quick-start { display: none; }  /* 宽屏不显示：训练首页已有阶段入口卡，吸底 CTA 只给窄屏 */

@media (max-width: 900px) {
  .main { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  /* 20260831 UI审计 P1：641~900 平板竖屏顶栏药丸与底部 Tab 双轨并存 → 顶栏第二行让位底部 Tab（单轨化，与 ≤640 同策略） */
  .nav { display: none; }
  .icon-btn { width: 40px; height: 40px; }  /* 平板竖屏触屏档：触控目标对齐 ≤640 档（桌面鼠标档维持 32） */

  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: calc(58px + env(safe-area-inset-bottom));
    padding: 0 4px env(safe-area-inset-bottom);
    background: var(--card); border-top: 1px solid var(--line);
    box-shadow: 0 -2px 14px rgba(56, 168, 157, .08);
    transition: transform .25s ease;
  }
  body.in-chat .bottom-nav { transform: translateY(110%); } /* 对话页把空间还给键盘 */
  body.in-chat .main { padding-bottom: 0; } /* 整页 flex 布局：chat-layout 直接撑到视口底，输入栏贴底不留白 */

  /* 模块14细项：窄屏主 CTA 吸底（浮在底部 Tab 上方 8px；仅训练首页出现）。
     用 left/right + margin auto 居中，避免占用 transform（:active 的 scale 还能用） */
  body.on-dash .dash-quick-start {
    display: block;
    position: fixed; left: 12px; right: 12px; margin: 0 auto;
    width: min(86%, 340px);
    bottom: calc(66px + env(safe-area-inset-bottom));
    z-index: 55; box-shadow: var(--shadow-3);
  }
  .bn-item {
    flex: 1; min-width: 44px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 11px; position: relative;
    transition: color .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
  }
  .bn-item:active { transform: scale(.92); }
  .bn-item svg { width: 22px; height: 22px; }
  .bn-item.active { color: var(--blue-dark); font-weight: 700; }
  .bn-item.active::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 18px; height: 3px; border-radius: 999px; background: var(--blue);
  }
}

@media (max-width: 640px) {
  /* UI优化 M5：手机专属——顶栏第二行整体让位（导航归底部 Tab），顶栏信息缩编 */
  .nav { display: none; }                 /* 两行顶栏的第二行整体让位，底部 Tab 接管 */
  .logo .logo-tail { display: none; }     /* 「Power-Up Speaking」缩为「Power-Up」 */
  .icon-btn { width: 40px; height: 40px; } /* 触控目标放大 */
  /* 对话/报告页沉浸式：窄屏隐藏顶栏，整屏留给内容（对话页有「结束并点评」、报告页有「返回」可退出） */
  body.in-chat .topbar, body.in-report .topbar { display: none; }
}

/* 手机（≤600）：顶栏一行塞下 全屏/皮肤/设置/用户/+/徽章 六件套（20260830 全屏按钮加入后压缩）。
   必须放在上方 ≤640 块之后：同优先级后置覆盖，31px 才能压过 640 档的 40px 触控目标；
   徽章只留盾牌图标（文字进 title），用户下拉与+必须完整可见（20260828 用户反馈） */
@media (max-width: 600px) {
  .topbar-row { gap: 8px; }
  .user-box { gap: 5px; }
  .user-box select { max-width: 68px; }
  .icon-btn { width: 31px; height: 31px; }
  .offline-badge { padding: 5px 7px; flex-shrink: 0; }
  .offline-badge::after { content: none; }   /* 覆盖 ≤640 的「本地离线」后缀，手机只留盾牌图标；平板 641-820 完整文字常驻 */
}

/* 「更多」抽屉：从底部上滑（点遮罩 / 收起 / 选完入口即关闭） */
.more-sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; }
.more-mask { position: absolute; inset: 0; background: rgba(23, 46, 44, .35); }
.more-panel {
  position: relative; width: 100%; background: var(--card);
  border-radius: 22px 22px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px;
  animation: sheet-up .25s ease;
}
.more-panel::before { /* 顶部小把手 */
  content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 4px; border-radius: 999px; background: var(--line);
}
@keyframes sheet-up { from { transform: translateY(48px); opacity: .5; } to { transform: none; opacity: 1; } }
.more-title { font-size: 12.5px; color: var(--text-muted); text-align: center; margin: 4px 0 2px; }
.more-item {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  background: #f6fafa; border: 1px solid var(--line); border-radius: 14px;
  font-size: 15px; color: var(--text); cursor: pointer; min-height: 48px;
  transition: background .15s; -webkit-tap-highlight-color: transparent;
}
.more-item:active { background: var(--blue-light); }
.more-item svg { width: 22px; height: 22px; color: var(--blue-dark); flex: none; }
.more-item span { display: flex; flex-direction: column; line-height: 1.35; text-align: left; }
.more-item small { font-size: 11.5px; color: var(--text-muted); font-weight: 400; }
.more-close {
  padding: 12px; border: none; border-radius: 14px; background: none;
  font-size: 14px; color: var(--text-muted); cursor: pointer; min-height: 44px;
}
@media (min-width: 901px) { .more-sheet { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .more-panel { animation: none; } }

/* ==================== 连击计数（模块6） ==================== */
.combo-chip {
  display: inline-flex; align-items: center;
  padding: 3px 12px; border-radius: 999px;
  background: linear-gradient(90deg, #fff3e0, #ffe0b2);
  border: 1px solid #f5b301; color: #8a5300;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.combo-chip.combo-pop { animation: combo-pop .35s ease; }
@keyframes combo-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.view-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.view-title-row .view-title { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .combo-chip.combo-pop { animation: none; } }

/* ==================== 今日任务（模块7） ==================== */
.task-list { display: flex; flex-direction: column; gap: 8px; }
.task-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-btn); background: var(--card-in); }
.task-item .tk-ic { flex: none; display: flex; align-items: center; }
.task-item .tk-title { flex: 1; font-size: 14px; }
.task-item .tk-progress { font-size: 12.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.task-item.done { background: var(--state-done-bg); }
.task-item.done .tk-title { color: var(--sky); font-weight: 600; }
.task-item.done .tk-progress { color: var(--sky); }

/* ==================== 打卡火焰（模块6） ==================== */
.streak-flame { position: relative; display: inline-flex; align-items: flex-end; flex: none; }
.streak-flame svg { display: block; }
.fl-sway { transform-origin: 24px 50px; animation: fl-sway 2.6s ease-in-out infinite; }
@keyframes fl-sway {
  0%, 100% { transform: rotate(-3deg) scaleY(1); }
  50% { transform: rotate(3deg) scaleY(1.05); }
}
.fl-spark { animation: fl-blink 1.6s ease-in-out infinite; }
.fl-spark.s2 { animation-delay: .5s; }
.fl-spark.s3 { animation-delay: .9s; }
@keyframes fl-blink {
  0%, 100% { opacity: .15; transform: translateY(2px); }
  50% { opacity: 1; transform: translateY(-3px); }
}
.streak-flame.empty svg { filter: grayscale(1); opacity: .3; } /* 还没打卡：火苗休眠 */
.fullweek-badge {
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, #f5b301, #ffd965); color: #5b4200;
  font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .fl-sway, .fl-spark { animation: none; } }

/* ==================== 装饰商店（模块8） ==================== */
.shop-head { display: flex; align-items: center; gap: 18px; padding: 18px 20px; }
.shop-head-text h2 { margin-bottom: 4px; }
.shop-stars { margin-top: 8px; font-size: 15px; color: var(--text); }
.shop-stars b { font-size: 20px; color: #b8860b; }
.shop-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin-top: 12px;
}
.shop-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 10px 12px; border: 1.5px solid var(--line); border-radius: var(--r-btn);
  background: var(--card-in); min-height: 44px; box-shadow: var(--shadow-1); /* L1 内嵌层 */
}
.shop-item.on { border-color: var(--blue); background: var(--blue-light); }
.shop-art {
  display: flex; align-items: center; justify-content: center;
  width: 84px; height: 54px; border-radius: 12px; background: var(--card);
}
.shop-name { font-size: 14px; color: var(--text); text-align: center; }
.shop-item .btn-mini { min-height: 36px; }
.shop-item .btn-buy { color: #8a5300; border-color: #f5b301; }
.shop-item .btn-buy:disabled { opacity: .5; cursor: not-allowed; }
.shop-item .btn-wear { color: var(--blue-dark); border-color: var(--blue); }

/* 设置页衣橱入口卡 */
.shop-entry {
  display: flex; align-items: center; gap: 14px; width: 100%;
  text-align: left; cursor: pointer; font-family: inherit;
}
.shop-entry-ico { font-size: 26px; }
.shop-entry-text { display: flex; flex-direction: column; gap: 2px; }
.shop-entry-text small { color: var(--text-muted); font-size: 12.5px; }
.shop-entry-arrow { margin-left: auto; font-size: 22px; color: var(--text-muted); }
.shop-entry:hover { border-color: var(--blue); }
.shop-mascot svg { display: block; }

/* ==================== 深色模式（模块11） ====================
   变量整套换肤：只改令牌不动组件，护眼低饱和暗青调；
   未手动设置时跟随 prefers-color-scheme（见 app.js applyTheme）。 */
html[data-theme="dark"] {
  --bg: #141d1c;
  --card: #1e2a29;
  --card-in: #263231;
  --text: #d9e5e3;
  --text-muted: #92a8a5;
  --line: #2f3d3b;
  --blue: #3fa396;
  --blue-dark: #6ecfc2;          /* dark 下标题/强调色反而提亮 */
  --blue-light: #24413d;
  --yellow-light: #3a3324;
  --sky-light: #22333d;
  --rc-green-bg: #1f3328; --rc-green-bd: #2f4a39; --rc-green-tx: #8fd6a8;
  --rc-orange-bg: #382e1f; --rc-orange-bd: #4d3f28; --rc-orange-tx: #e5b877;
  --rc-blue-bg: #1e2f3a; --rc-blue-bd: #2e4453; --rc-blue-tx: #8cc3e8;
  --rc-yellow-bg: #362f1d; --rc-yellow-bd: #4a4028; --rc-yellow-tx: #e0c273;
  --state-active-bg: #1e3242;   /* UI优化 M1：--state-active/--state-done 已删（归 --sky/--sun） */
  --state-done-bg: #1f3328;
  --state-locked: #7d8d92; --state-locked-bg: #232b2a;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 4px 18px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] body { background: var(--bg); }
html[data-theme="dark"] .nav-btn { background: #263231; }
html[data-theme="dark"] .msg-bubble-ai { background: #263231; }
html[data-theme="dark"] .shop-stars b { color: #e0c273; }
html[data-theme="dark"] .uq-unit.uq-passed { border-color: #2f4a39; }
/* 顶部渐变文字在暗色下提亮一档，保持可读 */
html[data-theme="dark"] .logo {
  background: linear-gradient(135deg, #6ecfc2 10%, #4fb3c4 60%, #7cc4e8 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* ==================== CHAT_UX·UX10 多外教形象 ==================== */
.chip-teacher { display: inline-flex; align-items: center; gap: 6px; }
.chip-teacher svg { border-radius: 50%; }
/* AI 气泡淡描边跟随外教主题色（变量由 app.js 注入，默认青绿） */
.msg-ai .bubble { border: 1.5px solid var(--teacher-soft, #d9efec); }
.teacher-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.teacher-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 18px; border-radius: 14px; border: 2px solid var(--line);
  background: #fff; cursor: pointer; font-family: inherit;
  transition: transform 0.15s, border-color 0.2s, background 0.2s;
}
.teacher-card b { color: var(--tc); font-size: 15px; }
.teacher-card small { color: #8aa2a8; font-size: 12px; }
.teacher-card:hover { transform: scale(1.05); }
.teacher-card.active { border-color: var(--tc); background: var(--tcs); }

/* ==================== CHAT_UX·UX12 贴纸反应 ==================== */
.msg-sticker {
  font-size: 30px; line-height: 1; margin: 0 4px 2px;
  display: inline-block; animation: sticker-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes sticker-pop {
  0% { transform: scale(0) rotate(-14deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ==================== CHAT_UX·UX13 主题闯关 ==================== */
.quest-wrap { max-width: 860px; margin: 0 auto; padding: 18px 14px 40px; }
.quest-sub { text-align: center; margin-bottom: 14px; }
.quest-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.quest-topic { padding: 14px; }
.qt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; }
.qt-emoji { font-size: 24px; }
.qt-levels { display: flex; flex-wrap: wrap; gap: 8px; }
.qt-level {
  width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--line);
  background: #fff; font-size: 15px; font-weight: 700; cursor: pointer; color: var(--text);
  transition: transform 0.12s, border-color 0.2s, background 0.2s;
}
.qt-level:hover:not(:disabled) { transform: scale(1.1); border-color: var(--blue); }
.qt-level.cleared { background: var(--yellow-light); border-color: var(--rc-yellow-bd); color: #b8860b; }
.qt-level.locked { opacity: 0.55; cursor: not-allowed; }
.quest-play-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.quest-task { padding: 18px; }
.quest-task-label { margin-bottom: 8px; color: #6b8188; font-size: 13.5px; }
.quest-word {
  font-size: 34px; font-weight: 800; color: var(--blue-dark); text-align: center;
  padding: 10px 0 16px; letter-spacing: 1px;
}
.quest-feedback { margin-top: 10px; font-size: 14px; font-weight: 600; }
.quest-feedback.good { color: var(--green); }
.quest-feedback.miss { color: #c98a2b; }
.quest-result { padding: 20px; text-align: center; }
.quest-result h2 { margin-bottom: 8px; }
.quest-result-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
@media (prefers-reduced-motion: reduce) {
  .msg-sticker { animation: none; }
  .teacher-card, .qt-level { transition: none; }
}
@media (max-width: 640px) {
  .quest-word { font-size: 28px; }
  .teacher-row { justify-content: center; }
}

/* ==================== ENHANCE·A2 发音工坊 + A3 语音助手 ==================== */
.pron-tip { font-size: 13px; margin: 2px 0 10px; }
.pron-lab-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.pron-hl {
  background: var(--sun); color: #5b4300; border-radius: 8px;
  padding: 1px 6px; font-weight: 700;
}

/* A3 右下角语音助手徽章：点击开关，.on=待命，.hear=收到声音闪一下 */
.voice-assist {
  position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 55;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--text); font-size: 13px; font-weight: 600;  /* 20260831 bug修复：白底硬编码/未定义 --ink 打穿深色皮，改走主题 token */
  box-shadow: 0 4px 14px rgba(20, 60, 70, .12); cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.voice-assist:hover { transform: scale(1.05); }
.voice-assist.on { border-color: var(--green); background: var(--state-done-bg); }  /* 20260831 bug修复：浅绿硬编码→状态 token，深色皮走暗绿 */
.voice-assist.on .va-icon { animation: va-bob 1.6s ease-in-out infinite; }
.voice-assist.hear { background: var(--sun-light); border-color: var(--sun); }  /* 20260831 bug修复：浅黄硬编码→暖黄 token，深色皮走暗黄 */
.voice-assist .va-label { line-height: 1; }
body.in-chat .voice-assist { bottom: calc(70px + env(safe-area-inset-bottom)); }
@keyframes va-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  .voice-assist.on .va-icon { animation: none; }
  .voice-assist { transition: none; }
}
@media (max-width: 640px) {
  .voice-assist { bottom: calc(66px + env(safe-area-inset-bottom)); }
  .voice-assist .va-label { display: none; }   /* 窄屏只留图标，不挡内容 */
}

/* ==================== ENHANCE·B 学习报告（热力图/雷达/推荐/周报长图） ==================== */
.rep-heatmap {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  max-width: 340px; margin: 12px auto 4px;
}
.hm-cell {
  aspect-ratio: 1; border-radius: 6px; background: var(--card-in);
  border: 1px solid var(--line);
}
.hm-l1 { background: #ffe8c7; border-color: #f7d9a8; }
.hm-l2 { background: #ffd28f; border-color: #f3be71; }
.hm-l3 { background: #ffb45c; border-color: #ef9f43; }
.hm-l4 { background: #ff9f43; border-color: #ef8a2b; }
html[data-theme="dark"] .hm-cell { background: #243231; border-color: #2f3d3b; }
.rep-legend { text-align: center; font-size: 12px; margin-top: 8px; }
.rep-radar, .rep-growth { display: block; max-width: 100%; margin: 8px auto 0; }
/* 周报环比：本周 vs 上周（涨跌徽标，柔和不刺眼） */
.cmp-total { font-size: 14px; margin: 10px 0 4px; color: var(--text); }
.cmp-total b { font-size: 26px; color: var(--orange); margin-right: 4px; }
.cmp-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 2px; border-bottom: 1px dashed var(--line);
  font-size: 14px;
}
.cmp-row:last-child { border-bottom: none; }
.cmp-sub { flex: 0 0 100px; font-weight: 600; }
.cmp-nums { flex: 1; color: var(--text-muted); }
.cmp-nums i { font-style: normal; font-size: 12px; }
.cmp-badge {
  min-width: 54px; text-align: center; padding: 3px 8px;
  border-radius: 12px; font-size: 13px; font-weight: 700;
}
.cmp-up { background: var(--blue-light); color: var(--blue-dark); }
.cmp-down { background: var(--yellow-light); color: #c07a2e; }
.cmp-flat { background: var(--card-in); color: var(--text-muted); }
.cmp-new { background: #f0e8fd; color: #7c5cd6; }
html[data-theme="dark"] .cmp-new { background: #2d2543; color: #c4b5fd; }
.rec-clusters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.rec-chip { background: var(--yellow-light); }
.rec-q { margin-top: 12px; }
.rec-q-text { font-size: 17px; font-weight: 700; margin: 8px 0 12px; }

/* 周报长图弹层：长图可滚动预览，保存/分享按钮在底部 */
.report-img-panel { max-width: 420px; }
.report-img-scroll {
  max-height: 60vh; overflow-y: auto; border-radius: 12px;
  border: 1px solid var(--line); margin: 10px 0; background: #fff6e9;
}
.report-img-scroll img { width: 100%; display: block; }

/* ==================== ENHANCE·D2 学习计划（今日任务 + 下周日程） ==================== */
.plan-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin: 6px 0;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card-in);
}
.plan-item.done { opacity: 0.65; }
.plan-item.done .plan-title { text-decoration: line-through; }
.plan-type {
  flex-shrink: 0; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 2px 8px; border: 1px solid transparent;
}
.plan-t-speak    { color: var(--rc-orange-tx); background: var(--rc-orange-bg); border-color: var(--rc-orange-bd); }
.plan-t-listen   { color: var(--rc-green-tx);  background: var(--rc-green-bg);  border-color: var(--rc-green-bd); }
.plan-t-homework { color: var(--rc-blue-tx);   background: var(--rc-blue-bg);   border-color: var(--rc-blue-bd); }
.plan-t-review   { color: var(--text-muted);   background: var(--card-in);      border-color: var(--line); }
.plan-title { flex: 1; font-size: 13.5px; line-height: 1.4; }
.plan-title small { display: block; font-size: 11.5px; color: var(--text-muted); }
.plan-done-ico { color: var(--rc-green-tx); font-weight: 700; }
.plan-done-btn { flex-shrink: 0; padding: 6px 12px; font-size: 12.5px; }
.plan-days { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.plan-day { border: 1px dashed var(--line); border-radius: 12px; padding: 8px 10px; }
.plan-day h4 { margin: 0 0 4px; font-size: 13px; color: var(--text-muted); }
.plan-day .plan-item { margin: 4px 0; background: transparent; }
.plan-next { margin-top: 12px; }
.plan-next summary { cursor: pointer; font-weight: 600; color: var(--blue-dark); font-size: 14px; }
.plan-edit-btn {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  font-size: 13px; padding: 2px 4px; opacity: 0.7;
}
.plan-edit-btn:hover { opacity: 1; }

/* ==================== ENHANCE·F3 近期活动（家长审计日志） ==================== */
.audit-list { margin-top: 10px; max-height: 260px; overflow-y: auto; }
.audit-row {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  padding: 6px 4px; border-bottom: 1px dashed var(--line); font-size: 13px;
}
.audit-row:last-child { border-bottom: none; }
.audit-ts { flex-shrink: 0; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ============================================================
   工作台化 v2.0 · soft 马卡龙主题 + 左侧导航 + 今日总览仪表盘
   左侧导航：≥901px 固定 220px（UI优化 M5 断点迁移）；≤900px 隐藏（#bottomNav + #moreSheet 接管）
   ============================================================ */

/* ---------- soft 柔和马卡龙主题（默认；profile.theme=tech 时 JS 移除） ---------- */
html[data-theme="light"] body.theme-soft {
  --bg: #fff7fa;
  --card: #ffffff;
  --card-in: #fdf3f6;
  --line: #f3e4ea;
  --text: #4a3f44;
  --text-muted: #a08d95;
  --yellow-light: #fff6df;
  --shadow-2: 0 2px 12px rgba(244, 114, 182, 0.08);
  --shadow: 0 2px 12px rgba(244, 114, 182, 0.08);
  /* UI优化 M1：--blue/--blue-dark/--blue-light 与 .btn-primary 粉渐变覆盖已删，
     主色/按钮全主题统一走 :root 新青绿色板（#1D9E75 系），本块仅保留粉白底色皮肤 */
}

/* ---------- 左侧固定导航 #sideNav ---------- */
.sidebar { display: none; }
/* UI优化 M5：断点由 821 迁至 901——平板竖屏(641-900)改走顶栏图标导航，侧栏仅平板横屏+桌面 */
@media (min-width: 901px) {
  .sidebar {
    display: flex; flex-direction: column; gap: 10px;
    position: fixed; top: 0; left: 0; bottom: 0; width: 220px;
    background: var(--card); border-right: 1px solid var(--line);
    padding: 16px 12px 12px; z-index: 40;
  }
  .topbar { margin-left: 220px; }   /* 顶栏与主区右移让出侧栏（topbar 无显式宽，交叉轴 stretch 自适应不溢出） */
  .main { margin-left: 220px; width: calc(100% - 220px); }  /* 20260831 P0：显式扣除侧栏宽，修复 width:100%+margin-left 220 在 1280/1024 溢出 140~156px；不用 width:auto（交叉轴 auto margin 会禁用 stretch 导致塌宽） */
  .topbar .nav { display: none; }   /* 宽屏药丸导航整体让位左侧栏 */
}
.side-brand {
  font-weight: 800; font-size: 15px; line-height: 1.45; color: var(--coral);
  padding: 4px 8px 10px; border-bottom: 1px dashed var(--line);
}
.side-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; padding-right: 2px; }
.side-cap { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 1px; margin: 12px 8px 4px; }
.side-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 9px 12px; border: none; background: none; border-radius: 12px;
  font-size: 14px; color: #6b7280; cursor: pointer;
  transition: background .15s, color .15s; -webkit-tap-highlight-color: transparent;
}
.side-item:hover { background: var(--blue-light); color: var(--blue-dark); }
.side-item.active { background: var(--blue-light); color: var(--blue-dark); font-weight: 600; }  /* UI皮肤：选中态随主题主色，与顶栏/底栏导航统一 */
.side-pu-head { justify-content: space-between; }
.side-arrow { font-size: 11px; transition: transform .2s; }
.side-pu-head.open .side-arrow { transform: rotate(180deg); }
.side-sub { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px 10px; margin: 0 0 4px 8px; border-left: 2px solid var(--line); }
.side-sub-item {
  text-align: left; padding: 6px 10px; border: none; background: none;
  font-size: 12.5px; color: var(--text-muted); border-radius: 9px; cursor: pointer;
  transition: background .15s, color .15s;
}
.side-sub-item:hover { background: var(--blue-light); color: var(--blue-dark); }
.side-sub-item.active { color: var(--blue-dark); background: var(--blue-light); font-weight: 600; }  /* UI皮肤：随主题主色 */
.side-new { font-size: 10px; color: var(--blue-dark); background: var(--blue-light); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }  /* v2.54.1 分级课程总览 NEW 徽标（主题变量，随皮肤联动） */
/* v2.54.1 分级课程总览（view-powerup-overview · renderPuOverview）：主题跟随——v2.54.0 固定品牌配色全部改皮肤变量（深色皮肤 cosmic/neon 不打穿）；类名 puov- 前缀避开既有 .stat 等通用类 */
.puov-head { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); border-radius: var(--r-card); padding: 16px 18px; color: #fff; margin-bottom: 14px; }
.puov-head .t1 { font-size: 18px; font-weight: 700; letter-spacing: .5px; }
.puov-head .t2 { font-size: 12px; opacity: .9; margin-top: 4px; }
.puov-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.puov-stat { flex: 1 1 120px; min-width: 0; border-radius: 12px; padding: 10px 12px; background: var(--blue-light); border: 1px solid var(--line); }  /* c1-c5 类名保留共用此变量底（v2.54.1 删五套渐变） */
.puov-stat .k { font-size: 11px; color: var(--text-muted); }
.puov-stat .v { font-size: 19px; font-weight: 700; margin-top: 2px; color: var(--blue-dark); }
.puov-ladder { display: flex; flex-direction: column; gap: 8px; }
.puov-row { border-radius: var(--r-card); border: 1px solid var(--line); overflow: hidden; background: var(--card); }
.puov-row-head { display: flex; gap: 8px; align-items: stretch; cursor: pointer; min-height: 44px; }  /* 触控目标 ≥44px（任务书 2.4） */
.puov-badge { flex: 0 0 128px; border-right: 1px dashed var(--line); padding: 8px 10px; background: var(--blue-light); }
.puov-badge .n { font-size: 13px; font-weight: 700; color: var(--blue-dark); }
.puov-badge .e { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.puov-badge .m { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.puov-body { flex: 1; min-width: 0; padding: 8px 12px; font-size: 12px; color: var(--text-muted); background: var(--card-in); display: flex; align-items: center; }
.puov-body b { display: block; font-size: 13px; color: var(--text); margin-bottom: 3px; }
.puov-arrow { flex: 0 0 30px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-muted); transition: transform .25s; }
.puov-row.open .puov-arrow { transform: rotate(180deg); }
.puov-units { display: none; padding: 10px 12px; border-top: 1px dashed var(--line); background: var(--bg); }  /* lv1-lv7 七套渐变已删（v2.54.1 主题跟随） */
.puov-row.open .puov-units { display: block; }
.puov-ucap { font-size: 11px; color: var(--text-muted); margin-bottom: 7px; }
.puov-grid { display: flex; gap: 7px; flex-wrap: wrap; }
.puov-unit { display: flex; align-items: center; gap: 5px; min-height: 44px; padding: 6px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 12px; color: var(--text); cursor: pointer; }  /* 触控目标 ≥44px */
.puov-unit:hover { border-color: var(--blue); color: var(--blue-dark); }
.puov-verbar { margin-top: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 11px 14px; }
.puov-vt { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.puov-vchain { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 11px; color: var(--text-muted); }
.puov-vchip { padding: 3px 9px; border-radius: 999px; background: var(--blue-light); color: var(--blue-dark); }
.puov-vchip.last { background: var(--blue); color: #fff; font-weight: 700; }
.puov-arw { color: var(--text-muted); }
.puov-hint { margin-top: 10px; font-size: 11px; color: var(--text-muted); text-align: center; }
@media (max-width: 480px) {
  .puov-badge { flex: 0 0 104px; }  /* 窄屏级别卡缩窄（任务书 2.4） */
}

/* v2.54.1 训练总面板收敛：功能 chips 后的单个「分级课程总览」入口卡（7 段横滑条归位总览页） */
.pu-overview-entry { width: 100%; display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px 14px; border-radius: var(--r-card); border: 1px solid var(--line); background: linear-gradient(135deg, var(--blue-light), var(--card-in)); cursor: pointer; text-align: left; }
.pu-overview-entry .poe-t { font-size: 14px; font-weight: 700; color: var(--blue-dark); white-space: nowrap; }
.pu-overview-entry .poe-s { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; flex: 1 1 auto; min-width: 0; }  /* 可收缩换行，窄屏不溢出 */
.pu-overview-entry .poe-ar { margin-left: auto; font-size: 14px; color: var(--blue-dark); }
.side-subjects { display: flex; flex-direction: column; gap: 1px; }

/* 学段·年级·学期胶囊（侧栏内 / moreSheet 内共用） */
.stage-pill {
  width: 100%; padding: 10px 12px; border-radius: 14px;
  border: 1.5px dashed var(--coral); background: var(--card-in);
  color: var(--text); font-size: 13px; cursor: pointer; text-align: left;
  transition: background .15s;
}
.stage-pill:hover { background: var(--blue-light); }
.stage-pill-more { margin: 2px 0 4px; }

/* ---------- Power-Up 子菜单横向 chips ---------- */
.pu-wrap { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 4px; }
.pu-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 2px 2px; }
.pu-chip {
  flex: none; padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--card);
  font-size: 13px; color: var(--text-muted); cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.pu-chip:hover { border-color: var(--blue); color: var(--blue-dark); }
.pu-chip.active { border-color: var(--blue); background: var(--blue-light); color: var(--blue-dark); font-weight: 600; }

/* ---------- 今日总览 view-workspace ---------- */
.ws-wrap { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.ws-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--coral-light), var(--card));  /* UI皮肤：粉白横幅随皮肤点缀色 */
  border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px;
}
.ws-brand { font-weight: 700; font-size: 15px; color: var(--coral); }
.ws-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }
.ws-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--coral-light); }
.ws-sun-chip { color: var(--sun-dark); font-weight: 600; }
.ws-sun-chip b { color: var(--sun); font-size: 16px; }
.ws-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ws-title { font-size: 24px; font-weight: 800; }
/* v2.38.0 B批 成长等级称号徽章：靠右胶囊，随等级升级换名 */
.ws-badge { margin-left: auto; font-size: 12px; font-weight: 700; color: #2f855a;
  background: #e6f6ec; border: 1px solid #9ae6b4; border-radius: 999px;
  padding: 3px 12px; white-space: nowrap; }
.ws-guest { text-align: center; padding: 36px 20px; }
.ws-compat { text-align: center; padding: 36px 20px; }
/* 三数据卡 */
.ws-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ws-card {
  position: relative; background: var(--card); border-radius: 20px;
  padding: 18px 16px 14px; box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: 3px; overflow: hidden;
}
.ws-band { position: absolute; top: 0; left: 0; right: 0; height: 5px; }
.ws-b-sun { background: linear-gradient(90deg, var(--sun-light), var(--sun)); }  /* UI皮肤：顶彩条随主题 */
.ws-b-streak { background: var(--green); }
.ws-b-done { background: linear-gradient(90deg, var(--sky-light), var(--sky)); }
.ws-card b { font-size: 26px; font-weight: 800; line-height: 1.25; }
.ws-card span { font-size: 13px; color: var(--text-muted); }
.ws-card small { font-size: 12px; }
/* 成长等级条 */
.ws-level-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ws-level-row b { font-size: 18px; color: var(--coral); }
.ws-level-track { height: 12px; border-radius: 999px; background: var(--coral-light); margin-top: 10px; overflow: hidden; }
.ws-level-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--coral-light), var(--coral)); transition: width .4s ease; }
/* 2×2 图表网格 */
.ws-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ws-chart { display: flex; flex-direction: column; gap: 8px; }
.ws-chart h3 { font-size: 15px; }
.ws-bars { display: flex; align-items: flex-end; gap: 8px; height: 108px; padding-top: 4px; }
.ws-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; min-width: 0; }
.ws-bar i { display: block; width: 100%; max-width: 26px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--coral-light), var(--coral)); min-height: 4px; }
.ws-bar.today i { background: var(--coral); }
.ws-bar small { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.ws-sun-bars .ws-bar i { background: linear-gradient(180deg, var(--sun-light), var(--sun)); }
.ws-sun-bars .ws-bar.today i { background: linear-gradient(180deg, var(--sun), var(--sun-dark)); }
/* 环形图 */
.ws-donut-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ws-donut {
  width: 118px; height: 118px; border-radius: 50%; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; background: conic-gradient(#f3e4ea 0 100%);
}
.ws-donut::before { content: ""; position: absolute; inset: 15px; background: var(--card); border-radius: 50%; }
.ws-donut b { position: relative; font-size: 26px; font-weight: 800; line-height: 1.1; }
.ws-donut small { position: relative; font-size: 11px; color: var(--text-muted); }
.ws-legend { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-muted); }
.ws-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ws-legend b { color: var(--text); margin-left: 4px; }
/* 番茄卡 */
.ws-pomo { border: none; text-align: left; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.ws-pomo:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.ws-pomo-nums { display: flex; gap: 22px; }
.ws-pomo-nums b { font-size: 30px; font-weight: 800; }
.ws-pomo-nums small { display: block; font-size: 12px; color: var(--text-muted); }

/* 学科视图 */
.subject-hero { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; }
.subject-hero .sj-emoji { font-size: 38px; line-height: 1; }
.subject-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; padding: 30px 16px; border: 1.5px dashed var(--line);
  border-radius: 16px; background: var(--card-in); color: var(--text-muted);
}

/* ---------- 学段·年级·学期选择器弹层 #stageGate ---------- */
.stage-card { width: min(92vw, 430px); }
.sg-block { margin: 12px 0; }
.sg-cap { font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; font-weight: 600; }
.sg-seg { display: flex; gap: 6px; }
.sg-seg .seg-btn { flex: 1; min-width: 0; padding: 9px 6px; }
.sg-grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sg-grade {
  padding: 12px 4px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--card); font-size: 14px; cursor: pointer; color: var(--text);
  transition: border-color .15s, background .15s, color .15s;
}
.sg-grade:hover { border-color: var(--blue); }
.sg-grade.active { border-color: var(--blue); background: var(--blue-light); color: var(--blue-dark); font-weight: 700; }

/* ---------- 「更多」抽屉全枚举增强 ---------- */
.more-panel-tall { max-height: 78vh; overflow-y: auto; }
.more-group-cap { font-size: 12px; font-weight: 700; color: var(--text-muted); margin: 10px 2px 2px; }
.more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.more-grid .more-item { padding: 11px 12px; font-size: 13.5px; min-height: 0; }
.more-grid .more-item small { font-size: 10.5px; }
.more-grid .more-item:active { background: var(--blue-light); }

/* ---------- 窄屏（≤820px）：工作台单列化 ---------- */
@media (max-width: 820px) {
  .ws-cards { grid-template-columns: 1fr; gap: 10px; }
  .ws-grid { grid-template-columns: 1fr; }
  .ws-topbar { padding: 10px 13px; }
  .ws-brand { font-size: 13.5px; }
  .ws-title { font-size: 21px; }
  .pu-wrap { gap: 2px; }
  .sg-grades { grid-template-columns: repeat(3, 1fr); }
  .more-grid { grid-template-columns: 1fr 1fr; }
}
/* 平板横屏（821-1024px）：三卡收窄防挤 */
@media (min-width: 821px) and (max-width: 1024px) {
  .ws-card b { font-size: 22px; }
  .ws-legend { font-size: 11.5px; gap: 4px; }
}

/* ==================== 工作台化 v2.0 批次2：番茄钟 / 娱乐 / 习惯 / 家长中心 ==================== */

/* 番茄大圆环：conic-gradient 进度 + 内圆遮罩（与总览环形图同套路） */
.pomo-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 16px; }
.pomo-ring {
  position: relative; width: 210px; height: 210px; border-radius: 50%;
  background: var(--line); display: grid; place-items: center;
}
.pomo-ring-fill {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--blue) calc(var(--pct, 0) * 1%), var(--line) 0);
  transition: background 0.9s linear;
}
.pomo-ring::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--card); z-index: 1; }
.pomo-center { position: relative; z-index: 2; text-align: center; }
.pomo-time { font-size: 40px; font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.pomo-durs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pomo-btns { display: flex; gap: 10px; }
.pomo-btns .btn-primary { min-width: 132px; }
.fun-eye { width: 132px; height: 132px; }
.fun-eye .pomo-time { font-size: 30px; }

/* 娱乐时间 */
.fun-card { display: flex; flex-direction: column; gap: 8px; }
.fun-card h3 { margin-bottom: 0; }
.fun-bgm { max-width: 240px; }
.fun-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fun-game {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px;
  background: var(--bg); border-radius: 16px; text-align: center;
}
.fg-ico { font-size: 26px; }

/* 娱乐时间 · 6 小游戏（内容填充批2） */
.fun-limit-bar { height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; }
.fun-limit-fill { display: block; height: 100%; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg, #ffd9a0, #ff9a76); transition: width .6s ease; }
.fun-stage-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fun-stage-head b { font-size: 16px; }
#funStage { display: flex; flex-direction: column; gap: 12px; }

/* 单词消消乐：低年级 12 张 / 高年级 20 / 初中 28 */
.fun-board { display: grid; gap: 8px; }
.fun-board-1 { grid-template-columns: repeat(3, 1fr); }
.fun-board-2 { grid-template-columns: repeat(4, 1fr); }
.fun-board-3 { grid-template-columns: repeat(4, 1fr); }
.fun-tile {
  border: 2px solid var(--line); background: var(--card); border-radius: 14px;
  padding: 12px 4px; min-height: 58px; font-size: 13px; cursor: pointer; color: var(--text);
  overflow-wrap: anywhere; transition: all .18s;
}
.fun-tile.open { border-color: var(--blue); background: var(--blue-light); transform: scale(1.04); }
.fun-tile.done { border-color: #66d9a6; opacity: 0; pointer-events: none; transform: scale(.6); }

/* 卡片翻翻看 / 口算 / 画家共用选项组 */
.fun-flip-card { display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #FFF7FA, #FFE9F0); border-radius: 20px; padding: 22px 16px; }
.ffc-zh { font-size: 26px; font-weight: 700; color: #E85D75; }
.fun-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fun-opt {
  border: 2px solid var(--line); background: var(--bg); border-radius: 14px;
  padding: 12px 8px; font-size: 15px; font-weight: 600; cursor: pointer; color: var(--text);
  overflow-wrap: anywhere; transition: all .15s;
}
.fun-opt.ok { border-color: #66d9a6; background: #e6f9f0; color: #1e8e5a; }
.fun-opt.no { border-color: #ffb3b3; background: #ffeded; color: #c05621; }

/* 儿歌欣赏 */
.fun-song-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fun-song-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: 2px solid var(--line); background: var(--bg); border-radius: 16px; padding: 12px 14px;
  cursor: pointer; text-align: left; transition: all .15s; }
.fun-song-item:hover { border-color: var(--blue); }
.fun-song-title { text-align: center; margin-bottom: 2px; }
.fun-song-lines { display: flex; flex-direction: column; gap: 6px; }
.fsl { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--bg);
  font-size: 15px; display: flex; flex-direction: column; transition: all .3s; }
.fsl small { color: var(--text-muted); font-size: 12px; }
.fsl.on { background: var(--blue-light); color: var(--blue-dark); font-weight: 700; }
.fsl.past { opacity: .55; }

/* 拼音拼拼乐 */
.fun-py-word { text-align: center; font-size: 30px; font-weight: 700; color: #E85D75; letter-spacing: 6px; }
.fun-py-slots { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.fun-py-slot { min-width: 52px; padding: 8px 10px; border: 2px dashed var(--line);
  border-radius: 12px; text-align: center; font-size: 16px; color: var(--blue-dark); }
.fun-py-blocks { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.fun-py-block { border: 2px solid var(--line); background: var(--card); border-radius: 12px;
  padding: 8px 14px; font-size: 16px; cursor: pointer; color: var(--text); transition: all .15s; }
.fun-py-block.used { opacity: .25; pointer-events: none; }

/* 口算大冒险 */
.fun-mental-q { text-align: center; font-size: 34px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--blue-dark); }

/* 小小画家 */
.fun-paint-canvas { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.fpc-item { width: 64px; height: 64px; border-radius: 16px; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 26px; border: 2px solid var(--line); }
.fpc-item small { font-size: 12px; }
.fpc-item.cur { border-color: var(--blue); background: var(--blue-light); transform: scale(1.08); }
.fun-paint-cmd { text-align: center; font-size: 18px; font-weight: 700; color: var(--blue-dark); }
.fun-colors { grid-template-columns: repeat(6, 1fr); }
.fun-color { min-height: 44px; padding: 0; }

/* 结束页 */
.fun-over { display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 0 6px; text-align: center; }
.fun-over-emoji { font-size: 46px; }
.fun-over-score b { font-size: 28px; color: var(--blue-dark); }
.fun-over-sun { color: #E8A23D; font-weight: 600; }

@media (max-width: 820px) {
  .fun-tile { font-size: 11.5px; padding: 10px 2px; min-height: 52px; }
  .fun-song-list { grid-template-columns: 1fr; }
  .fpc-item { width: 52px; height: 52px; font-size: 22px; }
  .fun-mental-q { font-size: 28px; }
  .ffc-zh { font-size: 22px; }
  .fun-py-word { font-size: 26px; }
}

/* ==================== Power-Up 内容库接数据（内容填充批2） ==================== */
/* 语法专项训练营：10 主题网格 */
.gr-topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gr-topic-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: 2px solid var(--line); background: var(--bg); border-radius: 14px;
  padding: 12px 14px; cursor: pointer; text-align: left; transition: all .15s;
}
.gr-topic-item:hover { border-color: var(--blue); background: var(--blue-light); }
.gr-topic-item b { font-size: 14.5px; }
/* 语法选择题选项判定态（复用 uq-opt） */
.uq-opt.ok { border-color: #66d9a6; background: #e6f9f0; color: #1e8e5a; font-weight: 700; }
.uq-opt.no { border-color: #ffb3b3; background: #ffeded; color: #c05621; }

/* 发音工坊：全部目标音（12 组） */
.pron-all-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pron-all-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: 2px solid var(--line); background: var(--bg); border-radius: 14px;
  padding: 10px 12px; cursor: pointer; text-align: left; transition: all .15s;
}
.pron-all-item:hover { border-color: var(--blue); background: var(--blue-light); }
.pron-all-item b { font-size: 14.5px; color: var(--blue-dark); }
.pron-all-tip { color: var(--text-muted); font-size: 11.5px; }

/* 节日特辑：全年日历 */
.fest-cal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fest-cal-item {
  display: flex; align-items: center; gap: 10px; border: 2px solid var(--line);
  background: var(--bg); border-radius: 14px; padding: 10px 12px;
}
.fest-cal-item.now { border-color: #66d9a6; background: #e6f9f0; }
.fc-emoji { font-size: 24px; }
.fc-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fc-live {
  font-style: normal; font-size: 11.5px; font-weight: 700;
  background: #66d9a6; color: #fff; border-radius: 99px; padding: 3px 10px; white-space: nowrap;
}

@media (max-width: 820px) {
  .gr-topic-grid { grid-template-columns: repeat(2, 1fr); }
  .pron-all-grid { grid-template-columns: 1fr; }
  .fest-cal-grid { grid-template-columns: 1fr; }
}

/* 兴趣养成 */
.hab-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hab-head .view-title { margin-bottom: 2px; }
.hab-banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.hab-num { display: flex; flex-direction: column; align-items: center; min-width: 72px; }
.hab-num b { font-size: 26px; color: var(--blue); font-variant-numeric: tabular-nums; }
.hab-num small { color: var(--text-muted); font-size: 11.5px; }
.hab-progress { flex: 1; height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; }
.hab-progress i { display: block; height: 100%; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg, var(--coral-light), var(--coral)); transition: width 0.6s ease; }  /* UI皮肤：随主题点缀色 */
.hab-goal { white-space: nowrap; }
.hab-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
.hab-card { background: var(--card); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.hab-card-top { display: flex; align-items: center; gap: 10px; }
.hab-ico { width: 42px; height: 42px; border-radius: 14px; background: var(--blue-light); display: grid; place-items: center; font-size: 22px; }
.hab-card-top b { font-size: 15.5px; }
.hab-streak { color: var(--text-muted); font-size: 12.5px; }
.hab-card-btns { display: flex; gap: 8px; }
.hab-check {
  flex: 1; border: none; border-radius: 14px; padding: 10px 0; cursor: pointer;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff; font-weight: 600; font-size: 14px;
}
.hab-check:disabled { background: var(--line); color: var(--text-muted); cursor: default; }
.hab-check.done { background: #66d9a6; }
.hab-check.pop { animation: habPop 0.45s ease; }
@keyframes habPop {
  0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); }
}
.hab-edit { border: none; background: var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; font-size: 13px; }
.hab-del { border: none; background: #fee2e2; color: #c05621; border-radius: 12px; padding: 10px 12px; cursor: pointer; font-size: 13px; }
.hab-edit-btns { display: flex; gap: 8px; align-items: flex-end; }

/* ---------- v2.20.0 巧虎增强 Phase A ---------- */
/* A1 习惯打卡月历墙（周一起 7 列；复用 habBanner 视觉语言） */
.hab-cal-wrap { margin-top: 12px; }
.hab-cal { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.hab-cal-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hab-cal-head b { font-size: 15.5px; margin-right: 4px; }
.hab-cal-nav { min-width: 34px; min-height: 34px; padding: 4px 10px; font-size: 16px; line-height: 1; }
.hab-cal-badge {
  background: var(--blue-light); color: var(--blue-dark); border-radius: 99px;
  padding: 4px 12px; font-size: 12.5px; font-weight: 600;
}
.hab-cal-badge.fire { background: #fef3e2; color: #d69e2e; }
.hab-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.hab-cal-week i { text-align: center; font-style: normal; font-size: 11.5px; color: var(--text-muted); }
.hab-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.hab-cal-cell {
  aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 10px;
  background: var(--bg); color: var(--text-muted); font-size: 12.5px;
  font-variant-numeric: tabular-nums; user-select: none;
}
.hab-cal-cell.pad { background: transparent; }
.hab-cal-cell.hit { background: #c6f6d5; color: #276749; font-weight: 700; }
.hab-cal-cell.today { box-shadow: inset 0 0 0 2px var(--blue); }
.hab-cal-cell.fut { opacity: 0.45; }
/* A2 课程联动高亮（呼吸光晕 4s 自收） */
.hab-glow { animation: habGlow 1.2s ease-in-out infinite; }
@keyframes habGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(246, 173, 85, 0.0); }
  50% { box-shadow: 0 0 0 5px rgba(246, 173, 85, 0.35); }
}
/* A2 虎虎引导气泡卡（亮星后弹，手动确认打卡） */
.sj-tiger-hint {
  display: flex; flex-direction: column; gap: 10px; margin: 10px 0;
  background: #fffaf0; border: 1px solid #f6e05e55; padding: 14px 16px;
  animation: habPop 0.45s ease;
}
.sj-tiger-hint-row { display: flex; align-items: flex-start; gap: 10px; }
.sj-tiger-hint p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text); }
.sj-tiger-hint .btn-coral { align-self: flex-end; }
/* A3 虎虎角色卡（tiger 课程 Tab 顶部；头像 + 气泡 + 单元主题） */
.sj-tiger-card {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: linear-gradient(135deg, #fffaf0, #fff5e6);
  border: 1px solid #f6ad5544; margin-bottom: 10px;
}
.sj-tiger-ava {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: #f6ad55; display: grid; place-items: center; font-size: 26px;
  box-shadow: 0 3px 8px rgba(246, 173, 85, 0.4);
}
.sj-tiger-ava.sm { width: 36px; height: 36px; font-size: 20px; }
.sj-tiger-bubble {
  flex: 1; min-width: 0; background: var(--card); border-radius: 14px;
  padding: 10px 14px; display: flex; flex-direction: column; gap: 2px;
  position: relative;
}
.sj-tiger-bubble::before {
  content: ""; position: absolute; left: -6px; top: 50%; transform: translateY(-50%);
  border: 6px solid transparent; border-right-color: var(--card); border-left: 0;
}
.sj-tiger-bubble b { font-size: 13px; color: #d69e2e; }
.sj-tiger-bubble span { font-size: 14px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.sj-tiger-bubble small { font-size: 11.5px; color: var(--text-muted); }

/* ---------- v2.21.0 巧虎增强 Phase B ---------- */
/* B1 月度主题徽标（组头内联）+ 开屏预告弹窗 */
.sj-month-badge {
  display: inline-block; background: linear-gradient(135deg, #f6ad55, #ed8936);
  color: #fff; border-radius: 99px; padding: 2px 10px;
  font-size: 11.5px; font-weight: 600; vertical-align: middle; margin-left: 6px;
}
.sj-month-pop {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(49, 46, 43, 0.45);
  display: grid; place-items: center;
  animation: fadeIn 0.25s ease;
}
.sj-month-card {
  background: var(--card); border-radius: 24px; padding: 28px 26px;
  max-width: 340px; width: calc(100% - 48px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.sj-month-card b { font-size: 18px; }
.sj-month-card p { font-size: 14px; line-height: 1.7; color: var(--text-muted); margin: 0; }
.sj-month-card .btn-primary { margin-top: 6px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* B2 问候歌卡：逐行显现动画（护眼：一次性淡入，不循环） */
.sj-tiger-song { background: #fffaf0; border: 1px solid #f6e05e55; margin: 10px 0; }
.sj-tiger-song-lines { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.sj-tiger-song-lines i {
  font-style: normal; font-size: 15px; line-height: 1.7; color: var(--text);
  opacity: 0; animation: songLineIn 0.5s ease forwards;
}
@keyframes songLineIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* C1 tiger 分龄档位条（课程 Tab 顶部，仅幼儿综合课）：档位按钮复用 sg-grade 视觉 */
.sj-grade-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 14px; margin: 0 0 10px;
}
.sj-grade-cap { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.sj-grade-bar .sg-grade { min-height: 34px; }   /* 触控友好 */

/* C2 家长月报卡：标题行 + 月导航（上月/下月，按钮复用 btn-soft） */
.pt-month-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
.pt-month-head b { font-size: 15px; }
.pt-month-nav { display: flex; align-items: center; gap: 6px; }
.pt-month-cur { font-size: 13px; color: var(--text-muted); }
.pt-month-nav .btn-soft { padding: 4px 10px; font-size: 13px; min-height: 30px; }
#ptMonthly .muted { margin: 0; line-height: 1.8; }
#ptMonthly b { color: var(--subj-tiger-l, #f6ad55); }   /* 学科色高亮数字 */

/* 家长中心 */
#view-parent .card { display: flex; flex-direction: column; gap: 8px; }
#view-parent .card h3 { margin-bottom: 0; }
#view-parent select, #view-parent input, #view-parent textarea {
  width: 100%; max-width: 320px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg); font-size: 14px; color: var(--text);
}
#view-parent textarea { max-width: 480px; resize: vertical; }
#view-parent .form-row > div { flex: 1; }

@media (max-width: 820px) {
  .hab-grid { grid-template-columns: 1fr; }
  .fun-games { grid-template-columns: 1fr; }
  .hab-banner { flex-wrap: wrap; }
  .hab-progress { order: 5; flex-basis: 100%; }
  .pomo-time { font-size: 34px; }
}

/* ==================== 工作台化 v2.0 批次3：学科详情 Tab 内容 / 轻量子视图 / 聚合筛选 ==================== */

/* 聚合菜单学科筛选条：chips 行（书库 / 记录 / 错题本顶部） */
.subj-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.subj-chip {
  border: 1px solid var(--line); background: var(--bg); color: var(--text-muted);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; transition: all .15s;
}
.subj-chip.on { background: var(--blue-light); border-color: var(--blue); color: var(--blue-dark); font-weight: 600; }
.kb-shelf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.kb-shelf-head h3 { margin-bottom: 0; }

/* 学科详情：跳转卡 / 描红卡 / 口算题 */
.sj-jump { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sj-jump .btn-primary { margin-top: 4px; }
.sj-copy-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 14px; }
.sj-copy-text { font-size: 26px; letter-spacing: 6px; line-height: 1.7; margin: 0; }
.sj-quiz-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 14px; }
.sj-quiz-q { font-size: 30px; font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; }
.sj-quiz-opts { display: grid; grid-template-columns: repeat(2, minmax(110px, 150px)); gap: 10px; }
.sj-quiz-opt { min-height: 46px; font-size: 17px; }
.sj-quiz-opt.active, .pu-comp-opt.active {
  background: var(--blue-light); border-color: var(--blue); color: var(--blue-dark); font-weight: 600;
}
.sj-think-input {
  flex: 1; max-width: 240px; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg); font-size: 14px; color: var(--text);
}

/* v2.18.0 口算闯关：关卡头 / 连对 / 进度点（装饰性圆点，不可交互无 44px 要求） */
.sj-oral-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin: 14px 0 0; padding: 12px 16px;
}
.sj-oral-head b { font-size: 16px; color: var(--text); }
.sj-oral-combo { font-size: 13px; font-weight: 600; color: var(--orange); }
.sj-oral-dots { display: flex; gap: 6px; justify-content: center; margin: 10px 0 2px; }
.sj-oral-dot {
  width: 10px; height: 10px; border-radius: var(--r-pill);
  background: var(--line); display: inline-block; transition: background .3s var(--ease);
}
.sj-oral-dot.ok { background: var(--green); }
.sj-oral-dot.miss { background: var(--orange); }

/* Power-Up 轻量子视图：抽词卡片网格 / 阅读短文 / 每日一句 */
.pu-word-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.pu-word-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 86px; background: var(--bg); border: 1.5px solid var(--line); border-radius: 16px;
  cursor: pointer; transition: all .18s; padding: 8px;
}
.pu-word-card:hover { border-color: var(--blue); }
.pu-word-card .pu-en { font-size: 16.5px; }
.pu-word-card .pu-zh { font-size: 14px; color: var(--blue-dark); }
.pu-word-card .pu-zh-show { font-size: 17px; letter-spacing: 2px; }
.pu-comp-text { line-height: 1.9; font-size: 15px; }
.pu-comp-q { display: flex; flex-direction: column; gap: 8px; }
.pu-daily-text { font-size: 20px; line-height: 1.8; font-weight: 600; }

@media (max-width: 820px) {
  .pu-word-grid { grid-template-columns: repeat(2, 1fr); }
  .sj-copy-text { font-size: 22px; letter-spacing: 4px; }
  .subj-filter { gap: 5px; }
  .subj-chip { padding: 4px 10px; font-size: 12px; }
}

/* ==================== 知识库与词汇库 v2.0.1：view-library 列表/详情词卡 + 抽词主题胶囊 ====================
   马卡龙粉色系：选中背景 #FFD1DC / 选中文字 #E85D75 / 轻阴影 rgba(244,114,182,.08) */
.lib-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
#libSearch {
  width: 280px; max-width: 100%; padding: 9px 14px; border: 1.5px solid var(--line);
  border-radius: 999px; background: var(--bg); font-size: 14px; color: var(--text);
}
#libSearch:focus { outline: none; border-color: #E85D75; }
.lib-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.lib-cat.active, .lib-theme-pill.active {
  background: #FFD1DC; border-color: #E85D75; color: #E85D75;
}
.lib-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.lib-card {
  display: flex; gap: 14px; align-items: flex-start; text-align: left;
  padding: 16px; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lib-card:hover { transform: translateY(-3px); border-color: #E85D75; box-shadow: 0 6px 18px rgba(244, 114, 182, .14); }
.lib-cover {
  flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; background: #FFF7FA; border-radius: 14px; border: 1px solid #FFD1DC;
}
.lib-card-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lib-card-title { font-size: 15.5px; line-height: 1.5; color: var(--text); }
.lib-card-sum {
  font-size: 12.5px; color: #6B7280; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lib-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.lib-card-date { font-size: 12px; }
.info-tag {
  font-style: normal; font-size: 11.5px; font-weight: 600; color: #E85D75;
  background: #FFF7FA; border: 1px solid #FFD1DC; border-radius: 999px; padding: 2px 9px;
}
.lib-theme-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
.lib-stage-block { margin-bottom: 18px; }
.lib-stage-cap {
  font-size: 14.5px; font-weight: 700; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.lib-stage-cap i { font-style: normal; font-size: 12px; font-weight: 500; color: #6B7280; }
.lib-stage-primary { color: #E85D75; }
.lib-stage-middle { color: var(--blue-dark); }
.lib-word-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.lib-word-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 96px; padding: 10px 12px; background: var(--bg);
  border: 1.5px solid var(--line); border-radius: 16px;
  box-shadow: 0 2px 12px rgba(244, 114, 182, .08);
  transition: transform .18s ease, border-color .18s ease;
}
.lib-word-card:hover { transform: translateY(-3px); border-color: #E85D75; }
.lib-word-en { font-size: 21px; font-weight: 700; letter-spacing: .5px; }
.lib-word-zh { font-size: 13.5px; color: #6B7280; }
.lib-word-speak {
  position: absolute; top: 6px; right: 6px; border: none; background: transparent;
  font-size: 14px; cursor: pointer; opacity: .55; padding: 4px;
  transition: opacity .15s ease, transform .15s ease;
}
.lib-word-speak:hover { opacity: 1; transform: scale(1.15); }
.pu-theme-pills { margin: 2px 0 4px; }

@media (max-width: 820px) {
  /* 提示词 §1.5.5：移动端主题胶囊横滑 + 词卡两列自适应，列表单列 */
  .lib-grid { grid-template-columns: 1fr; }
  .lib-theme-pills, .pu-theme-pills {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch;
  }
  .lib-word-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  #libSearch { width: 100%; }
  .lib-toolbar { gap: 8px; }
}

/* ==================== UI整体优化（B档童趣多色 · 20260828）====================
   M2 仪表盘焦点卡 + 语义色指标网格 / M3 学科卡片网格 + 图标 Tab + 学科色徽标
   M4 统一空态 + 微动效 / M5 全设备响应式（平板竖屏顶栏图标态 · 触控 · 流体排版 · 防溢出） */

/* ---- M2：焦点大卡（青绿→暖黄渐变）+ 4 语义色指标卡（替换原 .ws-cards 三卡平铺） ---- */
.ws-focus { position: relative; background: linear-gradient(135deg, var(--blue), var(--sun)); color: #fff;
  border-radius: 20px; padding: 20px 22px; margin-bottom: 14px;
  display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-3); }
.ws-focus-val { font-size: clamp(28px, 8vw, 38px); font-weight: 800; line-height: 1; }
.ws-focus-tag { font-size: 13px; opacity: .92; }
.ws-focus-sub { font-size: 12px; opacity: .9; margin-top: 4px; max-width: 60%; }
.ws-focus-emo { font-size: 46px; flex: none; }
/* ---- v2.38.0 B批 打卡火焰卡：≥3 天点燃，≥7 天变大跳动 + 本周全勤角标，禁焦虑 ---- */
.ws-fire-card { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 14px; }
.ws-fire-flame { font-size: 34px; line-height: 1; flex: none; }
.ws-fire-card.fire-low .ws-fire-flame { font-size: 26px; opacity: .55; filter: grayscale(.5); }
.ws-fire-card.fire-low .ws-fire-txt b { color: var(--text-muted); }
.ws-fire-card.fire-big { background: linear-gradient(135deg, #fffbeb, #feefce); }
.ws-fire-card.fire-big .ws-fire-flame { font-size: 46px; animation: firePulse 1.6s ease-in-out infinite; }
@keyframes firePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16) rotate(-5deg); }
}
.ws-fire-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-fire-txt b { font-size: 16px; }
.ws-fire-txt .muted { font-size: 12px; }
.ws-fire-week { flex: none; font-size: 11px; font-weight: 700; color: #b7791f;
  background: #fef3d8; border: 1px solid #f6d878; border-radius: 999px; padding: 4px 10px; }
/* v2.38.0 B批 月报小节：等级足迹 + 保护卡（虚线分隔行） */
.pt-fire-line { font-size: 12px; color: var(--text-muted); margin-top: 8px;
  padding-top: 8px; border-top: 1px dashed var(--line, #e2e8f0); }
@media (prefers-reduced-motion: reduce) {
  .ws-fire-card.fire-big .ws-fire-flame { animation: none; }
}
.ws-metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.ws-m { border-radius: 14px; padding: 14px; text-align: center; }
.ws-m .v { font-size: clamp(18px, 5vw, 22px); font-weight: 700; }
.ws-m .l { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.ws-m.coral { background: var(--coral-light); } .ws-m.coral .v { color: var(--coral); }
.ws-m.sky { background: var(--sky-light); } .ws-m.sky .v { color: var(--sky-deep); }  /* 小字天蓝加深保对比（WCAG AA，随皮肤换档） */
.ws-m.purple { background: var(--purple-light); } .ws-m.purple .v { color: var(--purple); }
.ws-m.sun { background: var(--sun-light); } .ws-m.sun .v { color: var(--sun-dark); }

/* ---- 学科导航（总览最下方，20260830）：学科色徽标卡，手机 2 列 / 平板 3 列 / 桌面 5 列 ----
   底色用 :root 学科色板浅档（--subj-*-l，与「今日学科占比」图例同源），随主题底色协调 */
.ws-subnav { display: flex; flex-direction: column; gap: 10px; }
.ws-subnav-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ws-subnav-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 13px 6px 11px; border: none; border-radius: var(--r-btn);
  background: var(--sc-l, var(--card-in)); color: var(--text); cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  font-family: inherit; -webkit-tap-highlight-color: transparent;
}
.ws-subnav-item b { font-size: 13px; }
.ws-subnav-ic { font-size: 24px; line-height: 1; }
.ws-subnav-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.ws-subnav-item:active { transform: none; }
@media (min-width: 641px) { .ws-subnav-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 901px) { .ws-subnav-grid { grid-template-columns: repeat(5, 1fr); } }
/* 平板 3 列下最后一行恰为孤卡（小学 10 科 → 3+3+3+1）时居中，避免综合卡孤悬左下角 */
@media (min-width: 641px) and (max-width: 900px) {
  .ws-subnav-item:last-child:nth-child(3n+1):not(:first-child) { grid-column: 2; }
}

/* ---- M3：学科卡片自适应网格（auto-fit：平板 2↔3 列自动过渡）+ 学科色徽标 ---- */
.sj-card-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.sj-ic { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; font-size: 18px; margin-bottom: 6px;
  background: var(--blue-light); }  /* 兜底浅底（未定义专色的初中/幼儿学科） */
.sj-ic.subj-chinese { background: var(--subj-chinese-l); }
.sj-ic.subj-math { background: var(--subj-math-l); }
.sj-ic.subj-english { background: var(--subj-english-l); }
.sj-ic.subj-science { background: var(--subj-science-l); }
.sj-ic.subj-politics { background: var(--subj-politics-l); }
.sj-ic.subj-pe { background: var(--subj-pe-l); }
.sj-ic.subj-music { background: var(--subj-music-l); }
.sj-ic.subj-art { background: var(--subj-art-l); }
.sj-ic.subj-it { background: var(--subj-it-l); }
.sj-ic.subj-comprehensive { background: var(--subj-comprehensive-l); }
/* 学科 Tab：active 态统一天蓝下划线（UI优化 M3；.seg-btn.active 原青绿样式让位） */
.sj-tab.active { color: var(--sky-deep); border-color: transparent; background: var(--sky-light);
  box-shadow: inset 0 -2px 0 var(--sky); }

/* ---- M4：统一空态卡片（带引导按钮：data-goto 挂 .sj-jump 委托，非死链） ---- */
.sj-empty { display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 30px 16px; }
.sj-empty-emo { font-size: 32px; line-height: 1; }
.sj-empty .btn-coral { margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; }  /* 覆盖 .sj-jump 容器布局，按钮文字居中 */

/* ---- M4：微动效（统一 --ease 曲线；reduced-motion 全局静默见本块末尾） ---- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card, .ws-m, .sj-copy-card { animation: fadeUp .35s var(--ease) both; }
.ws-level-fill, .progress-bar > i { transition: width .5s var(--ease); }
.btn-primary, .btn-coral, .sj-jump { transition: transform .15s var(--ease), box-shadow .15s var(--ease); }

/* ---- M5：防横向溢出（长英文单词/URL 不撑破卡片） ---- */
.sj-copy-card, .card { overflow-wrap: break-word; word-break: break-word; }

/* ---- M5：平板竖屏（641-900）顶栏第二行图标态导航（≥901 侧栏文字接管，≤640 底部 Tab 接管） ---- */
@media (min-width: 641px) and (max-width: 900px) {
  .main { padding: 14px 16px 28px; }
  .nav { gap: 6px; }
  .nav > .nav-btn, .nav .nav-more-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 12px; border-radius: 12px; min-height: 44px; min-width: 44px; }
  .nav > .nav-btn .nav-t, .nav .nav-more-btn .nav-t { display: none; }  /* 竖屏仅图标 */
  .nav > .nav-btn svg, .nav .nav-more-btn svg { width: 20px; height: 20px; }
}

/* ---- M5：触控设备强化（触控目标 ≥44px，儿童手指友好） ---- */
@media (pointer: coarse) {
  .btn-primary, .btn-coral, .btn-secondary, .sj-jump, .bn-item { min-height: 44px; }
  .sj-tab { padding: 10px 14px; }
}

/* ---- M5：≥1201 桌面舒展（指标 4 列 / 焦点卡加高 / 学科卡 3 列） ---- */
@media (min-width: 1201px) {
  .ws-metric-grid { grid-template-columns: repeat(4, 1fr); }
  .ws-focus { min-height: 128px; padding: 24px 28px; }
  .sj-card-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- M5：≤640 手机兜底（学科网格单列 / 焦点副文案满宽换行） ---- */
@media (max-width: 640px) {
  .sj-card-grid { grid-template-columns: 1fr; }
  .ws-focus-sub { max-width: 100%; }
}

/* ---- M5：流体排版（clamp 替代写死 px，三端字号连续过渡） ---- */
body { font-size: clamp(14px, 1rem + 0.2vw, 16px); }

/* UI优化 M4：用户开启「减弱动态效果」时，新增动效全部静默 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ==================== UI 皮肤系统：设置页皮肤选择网格（紧凑 · 10 项并列） ====================
   卡片只留色板条 + 名字，描述收进 title 提示；手机 3 列、桌面 10 项一行。 */
.skin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,88px),1fr));gap:8px;margin-top:10px}
.skin-opt{cursor:pointer;border:2px solid var(--line);background:var(--card-in);border-radius:12px;
  padding:8px 6px;display:flex;flex-direction:column;gap:5px;align-items:center;color:var(--text);font-family:inherit;transition:.2s}
.skin-opt .skin-sw{display:flex;gap:3px;width:100%;justify-content:center}
.skin-opt .skin-sw i{width:22px;height:10px;border-radius:3px;display:block}
.skin-opt b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.skin-opt small{display:none} /* 描述收进 title 提示，省空间 */
.skin-opt.active{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light)}
.skin-opt:hover{border-color:var(--blue)}

/* ---- 顶栏皮肤速选浮层（总览页顶部常驻入口；与设置页网格同源渲染，行式紧凑布局） ---- */
.skin-pop-wrap{position:relative;display:inline-flex}
.skin-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:80;
  min-width:236px;max-width:min(300px,calc(100vw - 24px));
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-3);padding:12px;display:none}
.skin-pop.open{display:block;animation:fadeUp .18s var(--ease)}
.skin-pop h4{font-size:12.5px;font-weight:700;color:var(--text-muted);margin:0 2px 8px;letter-spacing:.5px}
.skin-pop-list{display:flex;flex-direction:column;gap:6px;max-height:min(56vh,420px);overflow-y:auto;overscroll-behavior:contain}
/* 浮层内选项改行式：色板条固定宽 + 名字，与设置页网格卡共用 .skin-opt 基础样式 */
.skin-pop-list .skin-opt{flex-direction:row;justify-content:flex-start;gap:10px;
  padding:7px 10px;border-width:2px;border-radius:var(--r-btn)}
.skin-pop-list .skin-opt b{font-size:13px}
.skin-pop-list .skin-opt .skin-sw{width:66px;flex:0 0 66px;justify-content:flex-start}
.skin-pop-list .skin-opt .skin-sw i{flex:1 1 0;width:auto;height:12px}
/* 窄屏：皮肤设置按钮靠左，浮层改左对齐向右展开，避免向左溢出视口 */
@media (max-width: 900px) {
  .skin-pop { right: auto; left: 0; }
}

/* ================= v2.3.0 练字帖 ================= */
.cb-head { display: flex; align-items: flex-end; justify-content: space-between;
           gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cb-head .head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cb-sun { font-size: 14px; font-weight: 700; color: var(--sun-dark);
          background: var(--sun-light); padding: 7px 14px; border-radius: var(--r-pill);
          border: 1px solid var(--sun); }
.cb-sound-btn { width: 44px; height: 44px; border-radius: var(--r-btn); border: 1px solid var(--line);
                background: var(--card-in); color: var(--text); font-size: 17px; cursor: pointer;
                transition: transform .15s var(--ease); }
.cb-sound-btn:active { transform: scale(.92); }
.cb-sound-btn.muted { opacity: .45; }

/* 状态条 */
.cb-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cb-stat { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
           padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--line);
           background: var(--card); box-shadow: var(--shadow-1); }
.cb-stat.sun { color: var(--sun-dark); background: var(--sun-light); border-color: var(--sun); }
.cb-stat.combo { color: var(--orange); background: var(--sun-light); border-color: var(--sun); }
.cb-stat.combo.zero { opacity: .5; }
.cb-stat.prog { color: var(--blue-dark); background: var(--blue-light); border-color: var(--blue); }
.cb-stat.album { color: var(--purple); background: var(--purple-light); border-color: var(--purple); }

/* 配置区 */
.cb-config .form-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.cb-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cb-field > label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.cb-field select { padding: 8px 12px; border-radius: var(--r-btn); border: 1px solid var(--line);
                   background: var(--card-in); color: var(--text); font-size: 14px; min-width: 120px; }
.cb-custom-row { margin-bottom: 12px; }
.cb-custom-row label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.cb-custom-row textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; min-height: 60px;
                          border-radius: var(--r-btn); border: 1px solid var(--line);
                          background: var(--card-in); color: var(--text); font-size: 15px;
                          resize: vertical; }
.cb-btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* 字帖主体：容器自适应不溢出（禁止固定 px 宽） */
.cb-sheet { position: relative; box-sizing: border-box; width: auto; min-width: 0;
            overflow-x: auto; margin-bottom: 0; }
.cb-sheet-title { font-size: 15px; margin-bottom: 12px; color: var(--text-muted); text-align: center; }
/* 网格：列数由 CSS 变量 --cb-cols 驱动 */
.cb-grid { position: relative; box-sizing: border-box; width: 100%; min-width: 0;
           display: grid; grid-template-columns: repeat(var(--cb-cols, 8), 1fr); gap: 6px;
           touch-action: none; user-select: none; -webkit-user-select: none; }
.cb-cell { position: relative; aspect-ratio: 1/1; min-width: 0; min-height: 44px;
           border: 2px solid var(--line); border-radius: 6px;
           background: var(--card); display: flex; align-items: center; justify-content: center;
           overflow: hidden; }
/* 田字格：十字虚线（中线） */
.cb-grid.tianzi .cb-cell::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
                                   width: 0; border-left: 1px dashed var(--line); opacity: .8; }
.cb-grid.tianzi .cb-cell::after { content: ""; position: absolute; top: 50%; left: 0; right: 0;
                                  height: 0; border-top: 1px dashed var(--line); opacity: .8; }
/* 米字格：十字虚线 + 对角实线 */
.cb-grid.mizi .cb-cell::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
                                 width: 0; border-left: 1px dashed var(--line); opacity: .8; }
.cb-grid.mizi .cb-cell::after { content: ""; position: absolute; top: 50%; left: 0; right: 0;
                                height: 0; border-top: 1px dashed var(--line); opacity: .8; }
.cb-grid.mizi .cb-cell { background-image:
    linear-gradient(to top right, transparent calc(50% - .5px), var(--line) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom right, transparent calc(50% - .5px), var(--line) 50%, transparent calc(50% + .5px)); }
/* 四线三格（拼音/英语）：宽高 3:2，上下边线 + 内部两条横线 */
.cb-grid.fourline .cb-cell { aspect-ratio: 3/2; border: none; border-top: 1.5px solid var(--line);
                             border-bottom: 1.5px solid var(--line); border-radius: 0;
                             background-image:
    linear-gradient(to bottom, transparent calc(33.33% - .5px), var(--line) calc(33.33% - .5px), var(--line) calc(33.33% + .5px), transparent calc(33.33% + .5px)),
    linear-gradient(to bottom, transparent calc(66.66% - .5px), var(--line) calc(66.66% - .5px), var(--line) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
/* 描红底字：浅色大字，不可选中 */
.cb-trace { font-size: clamp(24px, 6vw, 52px); color: var(--text); opacity: .25;
            font-family: "KaiTi", "STKaiti", "Kaiti SC", serif; pointer-events: none; }
.cb-grid.fourline .cb-trace { font-size: clamp(16px, 4vw, 34px); }
/* 已收集格：右上角小星标 */
.cb-cell.done::marker { content: none; }
.cb-cell.done { border-color: var(--green); }
.cb-cell.done > .cb-star { position: absolute; right: 2px; top: 0; font-size: 12px; }
/* 书写层：透明 canvas 覆盖整块网格 */
#cbCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; cursor: crosshair; }

/* 工具条（吸底） */
.cb-toolbar { position: sticky; bottom: 0; display: flex; gap: 12px; align-items: center;
              flex-wrap: wrap; padding: 10px 2px; background: var(--card);
              border-top: 1px solid var(--line); margin-bottom: 14px; z-index: 6; }
.cb-pens { display: flex; gap: 8px; }
.cb-swatch { width: 44px; height: 44px; border-radius: var(--r-pill); border: 2px solid var(--line);
             min-width: 44px; min-height: 44px; cursor: pointer; padding: 0;
             transition: transform .15s var(--ease); }  /* 触控铁律：热区 ≥44px */
.cb-swatch:active { transform: scale(.9); }
.cb-swatch.on { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }
.cb-size-label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
                 color: var(--text-muted); }
.cb-size-label input[type="range"] { width: 90px; accent-color: var(--blue); }
.cb-tool-btn { min-height: 44px; }  /* 触控铁律：≥44px */
#btnCbEraser.on { background: var(--sun-light); border-color: var(--sun); color: var(--sun-dark); }

/* 完成行 */
.cb-done-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 16px; }
.cb-finish-btn { min-height: 46px; font-size: 16px; }
.cb-done-tip { font-size: 12.5px; color: var(--text-muted); }

/* 集字册贴纸墙 */
.cb-album-card { margin-bottom: 14px; }
.cb-album-hint { font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px; }
.cb-album { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-stamp { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
            font-size: 22px; font-weight: 700; color: var(--text); background: var(--card-in);
            border: 1px solid var(--line); position: relative;
            animation: cbStampIn .35s var(--ease); font-family: "KaiTi", "STKaiti", serif; }
.cb-stamp::after { content: "⭐"; position: absolute; right: -3px; top: -6px; font-size: 11px; }
@keyframes cbStampIn { from { transform: scale(.2) rotate(-18deg); opacity: 0; }
                       to { transform: scale(1) rotate(0); opacity: 1; } }

/* 书法成就 */
.cb-badges-card { margin-bottom: 14px; }
.cb-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.cb-badge { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
            padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line);
            background: var(--card-in); color: var(--text-muted); opacity: .55;
            transition: .3s var(--ease); }
.cb-badge small { font-weight: 500; opacity: .8; }
.cb-badge.got { opacity: 1; color: var(--blue-dark); background: var(--blue-light); border-color: var(--blue); }

/* 连写浮层 */
.cb-combo-pop { position: absolute; left: 50%; top: 8px; transform: translateX(-50%) scale(.5);
                background: linear-gradient(135deg, var(--sun), var(--orange)); color: var(--card);
                font-weight: 700; padding: 5px 16px; border-radius: var(--r-pill); font-size: 15px;
                pointer-events: none; opacity: 0; z-index: 8;
                transition: opacity .2s, transform .25s var(--ease); }
.cb-combo-pop.show { opacity: 1; transform: translateX(-50%) scale(1); }

/* 彩带（字帖卡片内爆发） */
.cb-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 9;
              border-radius: var(--r-card); }
.cb-confetti i { position: absolute; left: 50%; top: 40%; width: 9px; height: 14px; border-radius: 2px;
                 transform-origin: center;
                 animation: cbRib var(--dur, 1s) var(--ease) var(--del, 0s) forwards; }
@keyframes cbRib { to { transform: translate(var(--dx, 0), var(--dy, 180px)) rotate(var(--rot, 360deg)); opacity: 0; } }

/* 完成庆祝弹层 */
.cb-win-mask { position: fixed; inset: 0; background: rgba(20, 40, 38, .45); display: none;
               align-items: center; justify-content: center; z-index: 60; }
.cb-win-mask.on { display: flex; }
.cb-win { background: var(--card); border-radius: 22px; padding: 26px 30px; width: min(420px, 90vw);
          text-align: center; box-shadow: var(--shadow-3); }
.cb-win .big-emoji { font-size: 52px; margin: 6px 0 10px; animation: cbBob 1.2s var(--ease) infinite; }
@keyframes cbBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.cb-win-stats { display: flex; justify-content: center; gap: 10px; margin: 14px 0 16px; flex-wrap: wrap; }
.cb-win-stats .s { background: var(--card-in); border-radius: 14px; padding: 10px 14px; min-width: 80px; }
.cb-win-stats .s b { display: block; font-size: 21px; color: var(--blue-dark); }
.cb-win-stats .s span { font-size: 11.5px; color: var(--text-muted); }
.cb-win .msg { font-size: 14px; color: var(--text-muted); margin-bottom: 18px; }

/* 移动端：列数降为 6，格边保证 ≥44px 触控 */
@media (max-width: 820px) {
  .cb-grid { --cb-cols: 6; gap: 5px; }
  .cb-toolbar { gap: 8px; }
  .cb-config .form-row { gap: 10px; }
}
@media (max-width: 430px) {
  .cb-stat { font-size: 12px; padding: 6px 10px; }
  .cb-done-row { flex-direction: column; align-items: stretch; text-align: center; }
}

/* 减动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .cb-confetti, .cb-combo-pop, .cb-stamp, .cb-win .big-emoji { animation: none !important; }
}

/* ===== 打印：A4 纵向，只留字帖（#999/#bbb 为纸质印刷色，不受屏幕主题影响） ===== */
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  body.printing > *:not(.cb-print-root) { display: none !important; }
  body.printing .cb-print-root { display: block !important; }
  .cb-print-root { width: 100%; }
  .cb-print-title { text-align: center; font-size: 16pt; margin: 0 0 6mm; }
  .cb-print-grid { display: grid; grid-template-columns: repeat(var(--cb-cols, 8), 1fr); gap: 2mm;
                  position: relative; }
  .cb-print-cell { position: relative; aspect-ratio: 1/1; border: 1px solid #999;
                   display: flex; align-items: center; justify-content: center; }
  .cb-print-trace { font-size: 26mm; color: #bbb; font-family: "KaiTi", "STKaiti", serif; }
  .cb-print-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .cb-print-foot { margin-top: 8mm; font-size: 11pt; color: #333; }
}
/* 非打印态下隐藏打印容器（避免 display:none 时的测量问题由 JS 控制显隐） */
.cb-print-root { display: none; }

/* ================= v2.4.0 P0 四件套：笔顺动画 / 字卡重练 / 口算闯关 ================= */

/* —— 功能 A：笔顺动画 —— */
/* 格右上角 ▶ 小按钮：视觉 22px 圆点，伪元素把命中区撑到 44×44（小孩手指好点） */
.cb-stroke-btn { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px;
                 border-radius: 50%; border: none; background: var(--blue); color: #fff;
                 font-size: 10px; line-height: 1; cursor: pointer; opacity: .85; padding: 0;
                 display: flex; align-items: center; justify-content: center;
                 z-index: 7; pointer-events: auto;
                 transition: transform .15s var(--ease); }
.cb-stroke-btn::after { content: ""; position: absolute; inset: -11px; }   /* 命中区 44×44 */
.cb-stroke-btn:active { transform: scale(.88); }
/* 笔顺弹层：白卡片内嵌 SVG 动画容器（宽度自适应手机） */
.cb-stroke-win { width: min(360px, 88vw); }
.cb-stroke-box { width: 260px; height: 260px; margin: 10px auto 4px; background: var(--card-in);
                 border-radius: 14px; overflow: hidden; }
.cb-stroke-btns { display: flex; gap: 10px; justify-content: center; }
.cb-stroke-btns button { min-height: 44px; }
/* 打印时笔顺按钮不进纸 */
@media print { .cb-stroke-btn { display: none !important; } }

/* —— 功能 B：集字册字卡重练（贴纸可点） —— */
.cb-album-item { cursor: pointer; transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.cb-album-item:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 4px 12px rgba(0, 0, 0, .14); }
.cb-album-item:active { transform: scale(.95); }

/* —— 功能 D：口算闯关 —— */
.mt-start-card { text-align: center; padding: 34px 20px; margin-bottom: 14px; }
.mt-start-card .big-emoji { font-size: 56px; animation: cbBob 1.2s var(--ease) infinite; }
.mt-start-card h2 { margin: 10px 0 6px; color: var(--text); font-size: 22px; }
.mt-tip { color: var(--text-muted); font-size: 14px; line-height: 1.8; margin-bottom: 18px; }
.mt-start-btn { min-height: 52px; font-size: 17px; padding: 0 34px; }

.mt-quiz-card { position: relative; overflow: hidden; padding: 18px 18px 20px; }
.mt-top { display: flex; align-items: center; gap: 12px; }
/* 倒计时环：SVG 圆环 + 中央数字（最后 10 秒变暖色提醒） */
.mt-timer { position: relative; width: 52px; height: 52px; flex: none; }
.mt-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mt-timer-bg { fill: none; stroke: var(--line); stroke-width: 4; }
.mt-timer-arc { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: round;
                stroke-dasharray: 119.38; stroke-dashoffset: 0;
                transition: stroke-dashoffset .25s linear, stroke .3s; }
.mt-timer-arc.low { stroke: var(--sun); }
.mt-timer b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
              font-size: 15px; color: var(--text); }
.mt-prog { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.mt-prog-bar { flex: 1; height: 10px; background: var(--card-in); border-radius: var(--r-pill); overflow: hidden; }
.mt-prog-bar > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--blue-dark));
                     border-radius: var(--r-pill); transition: width .3s var(--ease); }
.mt-prog span { font-size: 12.5px; font-weight: 700; color: var(--text-muted); flex: none; }

.mt-question { text-align: center; font-size: 34px; font-weight: 800; color: var(--text);
               margin: 18px 0 4px; font-variant-numeric: tabular-nums; }
.mt-input { display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 52px; }
.mt-input b { font-size: 30px; color: var(--blue-dark); font-variant-numeric: tabular-nums; }
.mt-caret { width: 2px; height: 30px; background: var(--blue); animation: mtBlink 1s steps(1) infinite; }
@keyframes mtBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* 数字键盘：每键 ≥56px，平板手指可点 */
.mt-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 340px; margin: 10px auto 0; }
.mt-key { min-height: 56px; border-radius: var(--r-btn); border: 1px solid var(--line);
          background: var(--card-in); color: var(--text); font-size: 22px; font-weight: 700;
          cursor: pointer; transition: transform .12s var(--ease); font-family: inherit; }
.mt-key:active { transform: scale(.94); }
.mt-key-del { background: var(--sun-light); color: var(--sun-dark); border-color: var(--sun); }
.mt-key-ok { background: linear-gradient(180deg, var(--blue), var(--blue-dark)); color: #fff; border: none; }

/* 手机档：题目与键盘缩小但键盘键仍 ≥56px */
@media (max-width: 820px) {
  .mt-question { font-size: 28px; margin: 12px 0 2px; }
  .mt-input b { font-size: 26px; }
  .mt-pad { gap: 8px; max-width: 300px; }
  .mt-key { min-height: 56px; font-size: 20px; }
  .mt-timer { width: 46px; height: 46px; }
  .mt-timer b { font-size: 13px; }
}
/* 动效敏感用户：关闪烁/浮动，保留状态呈现 */
@media (prefers-reduced-motion: reduce) {
  .mt-caret { animation: none; }
  .mt-start-card .big-emoji { animation: none; }
}

/* ================= v2.5.0 单词闯关记：五关 + 关卡流程条 + 单词册勋章 ================= */

/* 主题选择 + 今日计划 */
.wm-theme-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.wm-theme-seg .seg-btn { min-height: 44px; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--card-in); color: var(--text-muted); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.wm-theme-seg .seg-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.wm-plan-note { margin: 10px 2px 0; font-size: 12.5px; color: var(--text-muted); font-weight: 600; }

/* 关卡流程条：圆节点 + 连线轨道（1:1 参照原型 stagebar；--flow 控制渐变分界） */
.wm-stagebar { --flow: 8%; position: relative; display: flex; justify-content: center; gap: 34px;
  margin: 18px 0 32px; padding: 6px 0 0; flex-wrap: nowrap; }
.wm-stagebar::before { content: ""; position: absolute; top: 32px; left: 8%; right: 8%; height: 6px;
  border-radius: 3px; transform: translateY(-50%);
  background: linear-gradient(90deg, var(--green) 0%, var(--blue) var(--flow), var(--card-in) var(--flow), var(--card-in) 100%); }
.wm-st { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; background: var(--card);
  border: 3px solid var(--card-in); display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: var(--text-muted); box-shadow: var(--shadow-1); cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease); font-family: inherit; flex: none; }
.wm-st:hover { transform: translateY(-2px); }
.wm-st.on { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff;
  border-color: var(--card); box-shadow: 0 6px 16px rgba(29, 158, 117, .35); transform: scale(1.14); }
.wm-st.done { background: var(--green); color: #fff; border-color: var(--card); }
.wm-st small { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 5px;
  font-size: 11px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.wm-st.on small { color: var(--blue-dark); }
.wm-cnt { display: block; font-weight: 700; color: var(--green); margin-top: 1px; font-size: 10px; }

/* 进度统计七小卡 */
.wm-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.wm-stat { background: var(--card); border-radius: var(--r-card); padding: 10px 16px;
  box-shadow: var(--shadow-1); min-width: 104px; flex: none; }
.wm-stat b { font-size: 20px; display: block; color: var(--text); font-variant-numeric: tabular-nums; }
.wm-stat span { font-size: 12px; color: var(--text-muted); }

/* 面板与角标 */
.wm-panel { position: relative; overflow: visible; margin-bottom: 14px; }
.wm-tag { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 800; color: #fff;
  border-radius: var(--r-pill); padding: 3px 10px; z-index: 2; }
.wm-tag-new { background: var(--blue); }
.wm-tag-review { background: var(--sun-dark); }

/* 关卡① 学卡片 */
.wm-card-stage { max-width: 520px; margin: 0 auto; text-align: center; }
.wm-en { font-size: 44px; font-weight: 900; letter-spacing: 1px; margin: 8px 0 4px; color: var(--text); }
.wm-syll { font-size: 14px; color: var(--purple); font-weight: 700; letter-spacing: 2px; margin-bottom: 10px; }
.wm-zh { font-size: 22px; font-weight: 800; color: var(--text); min-height: 30px; }
.wm-sent { font-size: 14px; color: var(--text-muted); margin-top: 12px; line-height: 1.6; min-height: 22px; }
.wm-sent b { color: var(--blue-dark); }
.wm-flip { cursor: pointer; user-select: none; }
.wm-flip-hint { font-size: 12px; color: var(--text-muted); margin-top: 14px; }
.wm-say-btn { border: none; background: var(--blue-light); color: var(--blue-dark); font-size: 15px; font-weight: 800;
  border-radius: var(--r-pill); padding: 11px 22px; cursor: pointer; margin-top: 8px; min-height: 44px; font-family: inherit; }
.wm-say-btn:active { transform: scale(.95); }
.wm-card-nav { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

/* 趣味拆解记忆（有种子数据才显示） */
.wm-mnemo { margin-top: 14px; }
.wm-mnemo-toggle { border: 1px dashed var(--purple); background: var(--purple-light); color: var(--purple);
  font-size: 13.5px; font-weight: 800; border-radius: var(--r-btn); padding: 10px 16px; cursor: pointer;
  min-height: 44px; font-family: inherit; }
.wm-mnemo-body { margin-top: 10px; background: var(--card-in); border-radius: var(--r-card); padding: 14px; }
.wm-mnemo-parts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wm-mnemo-part { display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--card); border-radius: var(--r-btn); padding: 8px 14px; min-width: 64px; }
.wm-mnemo-part b { font-size: 18px; color: var(--purple); }
.wm-mnemo-part i { font-style: normal; font-size: 13px; color: var(--text); font-weight: 700; }
.wm-mnemo-story { margin-top: 10px; text-align: center; font-size: 13.5px; color: var(--text-muted); }

/* 关卡② 选一选 */
.wm-quiz { max-width: 560px; margin: 0 auto; text-align: center; }
.wm-quiz-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.wm-quiz-word { font-size: 38px; font-weight: 900; margin: 6px 0 18px; color: var(--text); }
.wm-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wm-opt { min-height: 56px; background: var(--card-in); border: 2px solid transparent; border-radius: 14px;
  padding: 16px 10px; font-size: 18px; font-weight: 800; cursor: pointer; transition: all .12s var(--ease);
  color: var(--text); font-family: inherit; }
.wm-opt:hover { border-color: var(--blue); }
.wm-opt:disabled { cursor: default; }
.wm-opt.right { background: var(--state-done-bg); border-color: var(--green); color: var(--green); }
.wm-opt.wrong { background: var(--coral-light); border-color: var(--red); color: var(--red); animation: shake-bad .3s; }

/* 关卡③ 拼一拼 */
.wm-spell { max-width: 560px; margin: 0 auto; text-align: center; }
.wm-spell-zh { font-size: 26px; font-weight: 900; margin-bottom: 4px; color: var(--text); }
.wm-spell-hint { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.wm-slots { display: flex; gap: 8px; justify-content: center; min-height: 56px; margin-bottom: 16px; flex-wrap: wrap; }
.wm-slot { width: 48px; height: 56px; border-radius: 10px; border: 2px dashed var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 900; color: var(--blue-dark); }
.wm-slot.filled { border-style: solid; border-color: var(--blue); background: var(--blue-light); }
.wm-slot.err { border-color: var(--red); color: var(--red); background: var(--coral-light); }
.wm-tiles { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.wm-tile { width: 48px; height: 56px; border-radius: 10px; border: none; background: var(--purple-light);
  color: var(--purple); font-size: 24px; font-weight: 900; cursor: pointer; box-shadow: 0 3px 0 var(--line); font-family: inherit; }
.wm-tile:active { transform: translateY(2px); box-shadow: none; }
.wm-tile.used { opacity: .25; pointer-events: none; }
.wm-spell-acts { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* 关卡④⑤ 默写 / 听写共用 */
.wm-dict { max-width: 520px; margin: 0 auto; text-align: center; }
.wm-dict-hint { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.wm-dict-zh { font-size: 30px; font-weight: 900; margin: 8px 0 14px; color: var(--text); }
.wm-dict-input { width: 100%; max-width: 360px; border: 2px dashed var(--line); border-radius: 14px;
  padding: 14px 16px; font-size: 22px; font-weight: 800; text-align: center; letter-spacing: 2px; outline: none;
  color: var(--blue-dark); background: var(--card-in); font-family: inherit; }
.wm-dict-input:focus { border-style: solid; border-color: var(--blue); }
.wm-dict-input.err { border-color: var(--red); color: var(--red); animation: shake-bad .3s; }
.wm-dict-acts { margin-top: 16px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* 关卡⑤ 听写专属（参照原型 pnDict） */
.wm-dict-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.wm-auto-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: #fff;
  background: var(--blue); border: none; border-radius: var(--r-pill); padding: 10px 14px; cursor: pointer;
  min-height: 44px; font-family: inherit; }
.wm-auto-pill.off { background: var(--line); color: var(--text-muted); }
.wm-accent-row { display: flex; gap: 16px; justify-content: center; margin: 4px 0 16px; flex-wrap: wrap; }
.wm-accent-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800;
  color: var(--blue-dark); background: var(--card); border: 2px solid var(--line); border-radius: var(--r-pill);
  padding: 12px 30px; cursor: pointer; box-shadow: var(--shadow-1); min-height: 44px; font-family: inherit; }
.wm-accent-btn:hover { border-color: var(--blue); }
.wm-inp-card { background: var(--card-in); border-radius: var(--r-card); padding: 12px 14px; text-align: left; margin-bottom: 4px; }
.wm-inp-label { font-size: 13px; font-weight: 800; margin-bottom: 8px; display: flex; align-items: center;
  gap: 6px; color: var(--text); flex-wrap: wrap; }
.wm-inp-label small { color: var(--text-muted); font-weight: 600; }
.wm-kb-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; flex-wrap: wrap; gap: 8px; }
.wm-kb-seg { display: inline-flex; background: var(--card); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.wm-kb-seg .seg-btn { border: none; background: transparent; font-size: 13px; font-weight: 800; color: var(--text-muted);
  border-radius: var(--r-pill); padding: 8px 14px; cursor: pointer; font-family: inherit; min-height: 40px; }
.wm-kb-seg .seg-btn.active { background: var(--blue); color: #fff; }
.wm-mini-btn { padding: 8px 12px; font-size: 13px; min-height: 44px; }
.wm-kbd { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-top: 10px; }
.wm-kbd button { border: 1px solid var(--line); background: var(--card); border-radius: 10px; font-size: 15px;
  font-weight: 800; padding: 9px 0; cursor: pointer; color: var(--text); min-height: 44px; font-family: inherit; }
.wm-kbd button:active { background: var(--blue-light); }
.wm-kbd .wm-kbd-act { background: var(--blue-light); color: var(--blue-dark); font-size: 13px; }
.wm-kbd .wm-kbd-ok { grid-column: span 3; }

/* 单词册（三态 chips）与词汇勋章 */
.wm-h3 { font-size: 15px; margin-bottom: 10px; color: var(--text); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wm-h3 small { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.wm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wm-chip { font-size: 13px; font-weight: 800; border-radius: var(--r-pill); padding: 6px 12px;
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.wm-chip.got { background: var(--state-done-bg); color: var(--green); }
.wm-chip.weak { background: var(--coral-light); color: var(--red); }
.wm-chip.todo { background: var(--card-in); color: var(--text-muted); }
.wm-chip small { font-weight: 700; margin-left: 4px; opacity: .8; font-size: 11px; }
.wm-badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.wm-bdg { background: var(--card-in); border-radius: var(--r-btn); padding: 12px 8px; text-align: center;
  opacity: .45; transition: opacity .3s var(--ease); }
.wm-bdg.on { opacity: 1; background: var(--sun-light); box-shadow: var(--shadow-1); }
.wm-bdg .ico { font-size: 26px; }
.wm-bdg .nm { font-size: 13px; font-weight: 800; margin-top: 4px; color: var(--text); }
.wm-bdg .cd { font-size: 11px; color: var(--text-muted); }

/* 结算弹层：阳光明细 + 记忆曲线节点图 */
.wm-win-detail { font-size: 13px; color: var(--text-muted); margin: 2px 0 4px; }
.wm-curve { display: flex; gap: 6px; justify-content: center; margin: 14px 0; flex-wrap: wrap; }
.wm-node { background: var(--blue-light); color: var(--blue-dark); border-radius: 10px;
  padding: 8px 10px; font-size: 12px; font-weight: 800; }
.wm-node small { display: block; font-weight: 700; opacity: .8; }
.wm-arrow { align-self: center; color: var(--text-muted); font-weight: 900; }
/* 连击浮层：固定层不依赖父容器定位（与原型一致） */
#wmComboPop { position: fixed; top: 16%; }

/* 手机档：节点/键盘缩小不换行，触控仍 ≥44px */
@media (max-width: 820px) {
  .wm-en { font-size: 36px; }
  .wm-quiz-word { font-size: 30px; }
  .wm-opts { grid-template-columns: 1fr; }
  .wm-stagebar { gap: 18px; }
  .wm-st { width: 46px; height: 46px; font-size: 17px; }
  .wm-stagebar::before { top: 29px; }
  .wm-stat { min-width: 92px; padding: 8px 12px; }
  .wm-stat b { font-size: 17px; }
  .wm-kbd { gap: 3px; }
  /* 手机档 10 列键盘键宽物理上限 ~26px（375 视口）：高度提至 52px 保主触控维度，
     ::after 负 inset 横向扩命中区（事件委托命中宿主按钮，同字帖 ▶ 按钮先例），对齐 iOS 键盘触感 */
  .wm-kbd button { min-height: 52px; font-size: 14px; position: relative; }
  .wm-kbd button::after { content: ""; position: absolute; inset: -4px -5px; }
  .wm-slot, .wm-tile { width: 42px; height: 52px; font-size: 20px; }
  .wm-dict-zh { font-size: 24px; }
  .wm-dict-input { font-size: 18px; padding: 12px 14px; }
}
/* 动效敏感用户：关抖动/浮层动画 */
@media (prefers-reduced-motion: reduce) {
  .wm-opt.wrong, .wm-dict-input.err, .wm-slot.err { animation: none; }
  .wm-st { transition: none; }
}

/* ============================================================
   v2.6.0 P0 三件套：今日复习聚合卡 / 学卡片跟读 / 集字兑装扮
   ============================================================ */

/* ① 总览「今日复习」卡：可点直达（错题优先），hover 描边轻反馈 */
.dash-review-card { display: flex; align-items: center; gap: 10px; cursor: pointer;
  transition: border-color .2s var(--ease), transform .12s var(--ease); }
.dash-review-card h2 { margin-bottom: 4px; }
.dash-review-card p { flex: 1; margin: 0; }
.dash-review-card:hover, .dash-review-card:focus-visible { border-color: var(--blue); }
.dash-review-card:active { transform: scale(.99); }
.dash-review-arrow { font-size: 28px; line-height: 1; font-weight: 900;
  color: var(--text-muted); flex-shrink: 0; }

/* v2.31.0 艾宾浩斯课程复习卡（幼儿学段专属）：竖排课卡列表（emoji+课名+天数），点击直达该课 */
#dashCourseReviewCard { display: block; }
.cr-list { display: grid; gap: 8px; margin-top: 10px; }
.cr-item { display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card-in); text-align: left; cursor: pointer;
  transition: border-color .15s var(--ease), transform .12s var(--ease); }
.cr-item:hover, .cr-item:focus-visible { border-color: var(--blue); }
.cr-item:active { transform: scale(.98); }
.cr-emoji { font-size: 24px; line-height: 1; flex-shrink: 0; }
.cr-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cr-body b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-body small { font-size: 12px; }
.cr-go { font-size: 22px; font-weight: 900; color: var(--text-muted); flex-shrink: 0; }

/* v2.32.0 节日限定活动包卡（幼儿学段专属）：节日名行 + 活动正文块 + 打卡按钮 */
.dh-act { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card-in); display: grid; gap: 6px; }
.dh-act b { font-size: 15px; }
.dh-act p { margin: 0; }

/* ② 学卡片跟读：听一听 + 跟读并排；录音态红底波纹（reduced-motion 无波纹） */
.wm-say-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.wm-say-row .wm-say-btn { margin-top: 0; }
.wm-read-btn { background: var(--purple-light); color: var(--purple); position: relative; }
.wm-read-btn.recording { background: var(--red); color: var(--card); }
.wm-read-btn.recording::before { content: ""; position: absolute; inset: -4px;
  border-radius: var(--r-pill); border: 2px solid var(--red); opacity: 0;
  animation: wmReadWave 1.1s ease-out infinite; }
@keyframes wmReadWave { 0% { transform: scale(.94); opacity: .7; } 100% { transform: scale(1.16); opacity: 0; } }
.wm-read-tip { font-size: 14px; font-weight: 800; min-height: 22px; margin: 8px 0 0;
  color: var(--text-muted); text-align: center; }
.wm-read-tip.wm-read-ok { color: var(--green); animation: wmReadStamp .4s var(--ease); }
.wm-read-tip.wm-read-mid { color: var(--sun-dark); }
@keyframes wmReadStamp { 0% { transform: scale(1.6) rotate(-8deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; } }

/* ③ 集字兑装扮：集字册标题行按钮 + 兑换面板（达标亮起/未达灰态/已兑换标记） */
.cb-album-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cb-redeem-btn { min-height: 44px; font-size: 13px; }
.cb-redeem-panel { margin-top: 12px; background: var(--card-in); border-radius: var(--r-card);
  padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.cb-redeem-item { display: flex; align-items: center; gap: 12px; padding: 10px;
  border-radius: var(--r-btn); border: 1px solid var(--line); background: var(--card); opacity: .6; }
.cb-redeem-item.ready { opacity: 1; border-color: var(--green); }
.cb-redeem-item.owned { opacity: 1; }
.cb-redeem-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-redeem-info b { font-size: 15px; color: var(--text); }
.cb-redeem-info small { font-size: 12.5px; color: var(--text-muted); }
.cb-redeem-item .btn-mini { min-height: 44px; font-size: 13px; flex-shrink: 0; }
.cb-redeem-tag { font-size: 13px; font-weight: 800; color: var(--green); flex-shrink: 0; }

/* 动效敏感用户：跟读波纹/盖章动画静默 */
@media (prefers-reduced-motion: reduce) {
  .wm-read-btn.recording::before, .wm-read-tip.wm-read-ok { animation: none; }
  .dash-review-card { transition: none; }
}


/* ==================== v2.8.0 学科升级包：古诗考一考 + 写一写 + 口算新题型 + 升降档建议 ==================== */

/* 分段模式开关（诵读/考一考、翻卡/写一写），复用 seg-btn */
.sj-mode-seg { display: inline-flex; gap: 8px; margin: 0 auto 16px; flex-wrap: wrap; justify-content: center;
  width: 100%; }
.sj-mode-seg .seg-btn { min-height: 44px; padding: 8px 16px; font-size: 14.5px; }

/* 诵读卡按钮排（🔊 听一听 + 🎤 我读过啦） */
.sj-poem-ops { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* 古诗考一考：题目卡 */
.pq-card { position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 22px 16px; text-align: center; }
.pq-progress { font-size: 12.5px; color: var(--text-muted); margin: 0; }
.pq-quiz-q { font-size: 19px; line-height: 1.6; margin: 0; color: var(--text); }
.pq-opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 320px));
  gap: 10px; width: 100%; max-width: 460px; }
.pq-opt { min-height: 52px; font-size: 16.5px; line-height: 1.45; padding: 8px 14px;
  border-radius: var(--r-btn); border: 1.5px solid var(--line); background: var(--card);
  color: var(--text); cursor: pointer; transition: border-color .15s var(--ease), transform .15s var(--ease); }
.pq-opt:hover { border-color: var(--blue); transform: translateY(-1px); }
.pq-opt.glow-ok { border-color: var(--green); background: var(--state-done-bg); }
.pq-opt.shake-bad, .pq-tile.shake-bad { animation: sjShake .45s var(--ease); border-color: var(--red); }
@keyframes sjShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* 字块排序：已拼区 + 候选字块 */
.pq-built { min-height: 52px; width: 100%; max-width: 460px; display: flex; flex-wrap: wrap;
  gap: 6px; align-items: center; justify-content: center; padding: 8px 10px;
  border: 1.5px dashed var(--line); border-radius: var(--r-btn); background: var(--card-in); }
.pq-built:empty::after { content: "按顺序点下面的字块"; font-size: 13px; color: var(--text-muted); }
.pq-ch { font-size: 20px; font-weight: 700; color: var(--text); }
.pq-tiles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 480px; }
.pq-tile { min-width: 44px; min-height: 44px; padding: 6px 10px; font-size: 19px; font-weight: 700;
  border-radius: var(--r-btn); border: 1.5px solid var(--line); background: var(--card);
  color: var(--text); cursor: pointer; transition: transform .12s var(--ease); }
.pq-tile:hover { transform: translateY(-2px); border-color: var(--blue); }
.pq-tile.used { opacity: .25; pointer-events: none; }
.pq-order-ops { display: flex; justify-content: center; }

/* 考一考结算卡 */
.pq-done-card { gap: 8px; }

/* 考一考连对浮层（挂 body，fixed 定位） */
.pq-combo-pop { position: fixed; left: 50%; top: 16vh; transform: translateX(-50%) scale(.5);
  z-index: 60; padding: 10px 22px; border-radius: 999px; background: var(--sun);
  color: #fff; font-size: 19px; font-weight: 800; opacity: 0; pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.pq-combo-pop.show { opacity: 1; transform: translateX(-50%) scale(1); }

/* 看拼音写词语·写一写 */
.vw-card { display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 26px 16px; text-align: center; }
.vw-py { font-size: 30px; font-weight: 800; letter-spacing: 3px; color: var(--text); margin: 0;
  line-height: 1.5; }
.vw-row { display: flex; gap: 10px; width: 100%; max-width: 360px; }
.vw-input { flex: 1; min-width: 0; min-height: 48px; font-size: 20px; text-align: center;
  letter-spacing: 2px; padding: 6px 12px; border-radius: var(--r-btn);
  border: 1.5px solid var(--line); background: var(--card); color: var(--text); }
.vw-input:focus { outline: none; border-color: var(--blue); }
.vw-input.shake-bad { animation: sjShake .45s var(--ease); border-color: var(--red); }
.vw-feedback { min-height: 22px; font-size: 15.5px; font-weight: 700; margin: 0; }
.vw-feedback.ok { color: var(--green); }
.vw-feedback.bad { color: var(--red); }

/* 口算：题型徽标 + 符号键 + 建议行 */
.mt-q-row { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; }
.mt-badge { flex-shrink: 0; font-size: 12px; font-weight: 800; padding: 4px 10px;
  border-radius: 999px; background: var(--card-in); color: var(--text-muted);
  border: 1px solid var(--line); }
.mt-badge.cmp { background: var(--sun-light); color: var(--sun-dark); border-color: var(--sun); }
.mt-key-sym { font-size: 26px; font-weight: 800; }
.mt-win-suggest { font-size: 14.5px; color: var(--sun-dark); font-weight: 700;
  margin: 4px 0 0; }

/* 小屏适配：选项/字块/输入行不溢出 */
@media (max-width: 640px) {
  .pq-quiz-q { font-size: 17.5px; }
  .pq-opt-grid { grid-template-columns: 1fr; }
  .vw-py { font-size: 25px; letter-spacing: 2px; }
  .vw-row { flex-direction: column; }
  .vw-row .btn-primary { min-height: 48px; }
  .pq-tile { min-width: 40px; min-height: 44px; font-size: 17px; }
  .mt-badge { font-size: 11px; }
  .mt-key-sym { font-size: 22px; }
}

/* 动效敏感用户：连击浮层与抖动静默 */
@media (prefers-reduced-motion: reduce) {
  .pq-combo-pop { transition: none; }
  .pq-opt.shake-bad, .pq-tile.shake-bad, .vw-input.shake-bad { animation: none; }
}

/* ==================== v2.9.0 作业批改 OCR 三件套 ==================== */
/* 改动三：低置信行标黄提醒（家长核对防线）——淡黄底+左侧黄边，点按可关闭 */
.hw-ocr-warn {
  margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--sun-dark);
  background: var(--sun-light); border-left: 3px solid var(--sun-dark);
  border-radius: 10px; padding: 10px 12px; cursor: pointer; word-break: break-word;
}
.hw-ocr-warn ul { margin: 6px 0 0; padding-left: 18px; }
.hw-ocr-warn li { margin: 2px 0; }

/* ==================== v2.13.0 语文课文学习（统编版同步） ==================== */
/* 单元分组头 */
.sj-unit-block { margin: 14px 0; }
.sj-unit-head {
  margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--ink-soft, var(--ink));
  letter-spacing: 1px;
}
/* 课文卡（手风琴头部 + 展开详情） */
.sj-lesson-card { padding: 0; overflow: hidden; }
.sj-lesson-head {
  display: flex; align-items: center; gap: 10px; min-height: 52px;
  padding: 10px 14px; cursor: pointer; user-select: none;
}
.sj-lesson-head:hover { background: var(--bg-soft, rgba(0,0,0,.02)); }
.sj-lesson-no { font-size: 12px; color: var(--ink-soft, var(--ink)); white-space: nowrap; }
.sj-lesson-title { flex: 1; font-size: 16px; font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-lesson-tag { font-size: 11px; padding: 3px 8px; border-radius: 999px;
  background: var(--blue-light, var(--bg-soft)); color: var(--blue-dark, var(--ink));
  white-space: nowrap; }
.sj-lesson-arrow { font-size: 18px; color: var(--ink-soft, var(--ink));
  transition: transform .2s; }
.sj-lesson-card .sj-lesson-body { padding: 4px 14px 14px; border-top: 1px solid var(--line, rgba(0,0,0,.06)); }
.sj-lesson-card .sj-lesson-arrow { transform: rotate(90deg); }
.sj-lesson-summary { font-size: 14px; line-height: 1.8; color: var(--ink); margin: 10px 0; }
.sj-lesson-ops { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.sj-lesson-ops button { min-height: 44px; }
.sj-lesson-sub { font-size: 13px; font-weight: 600; color: var(--ink-soft, var(--ink)); margin: 12px 0 6px; }
/* 生字翻卡网格（auto-fill 自适应，窄屏单列起） */
.sj-char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.sj-char-card { min-height: 76px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; padding: 8px 6px;
  cursor: pointer; word-break: break-all; text-align: center; }
.sj-char-card .pu-zh { font-size: 12px; color: var(--ink-soft, var(--ink)); }
/* 词语药丸行 */
.sj-word-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sj-word-pill { min-height: 44px; }
/* 理解问答 */
.sj-ask-item { border-top: 1px dashed var(--line, rgba(0,0,0,.08)); padding: 10px 0 6px; }
.sj-ask-q { font-size: 14px; margin: 0 0 6px; line-height: 1.7; }
.sj-ask-ops { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.sj-ask-ops button { min-height: 40px; font-size: 13px; }
.sj-ask-a { font-size: 13px; line-height: 1.8; color: var(--ink-soft, var(--ink));
  background: var(--green-light, var(--bg-soft)); border-radius: 10px; padding: 8px 10px; }
/* ≤640：课文头部紧凑 + 角标字号缩小 */
@media (max-width: 640px) {
  .sj-lesson-head { gap: 8px; padding: 10px 12px; }
  .sj-lesson-title { font-size: 15px; }
  .sj-lesson-tag { font-size: 10px; padding: 2px 6px; }
  .sj-char-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}

/* ---- v2.33.0 F 涂鸦画板：canvas 自由画 + 跟画模式 + 作品集 ---- */
.paint-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.paint-tip { border-left: 4px solid var(--brand, #48bb78); }
.paint-tip b { font-size: 15px; }
.paint-lock p { margin: 0; }
.paint-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.paint-colors { display: flex; gap: 8px; flex-wrap: wrap; }
.paint-color { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0; }
.paint-color.on { border-color: var(--text, #333); transform: scale(1.12); }
.paint-sizes { display: flex; gap: 8px; }
.paint-size { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line, #e2e8f0); background: var(--card-in, #f7faf9); display: grid; place-items: center; cursor: pointer; padding: 0; }
.paint-size.on { border-color: var(--brand, #48bb78); background: #e6ffed; }
.paint-size i { display: block; border-radius: 50%; background: var(--text, #333); }
.paint-ops { display: flex; gap: 8px; flex-wrap: wrap; }
.paint-ops .btn-soft.on { border-color: var(--brand, #48bb78); background: #e6ffed; }
.paint-canvas-wrap { margin-top: 12px; }
#paintCanvas { width: 100%; height: auto; background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 14px; touch-action: none; cursor: crosshair; display: block; }
.paint-save-row { margin-top: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.paint-save-hint { margin: 0; font-size: 12px; }
.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 10px; }
.art-item { position: relative; border: 1px solid var(--line, #e2e8f0); border-radius: 12px; overflow: hidden; background: #fff; }
.art-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; cursor: zoom-in; }
.art-item .art-del { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0,0,0,.45); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; }
.art-item .art-ref { margin: 0; padding: 4px 6px; font-size: 11px; color: var(--text-muted, #718096); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .paint-tools { gap: 10px; }
  .paint-color { width: 30px; height: 30px; }
  .paint-size { width: 34px; height: 34px; }
}

/* ---- v2.34.0 H 朗读录音棚：课程卡录音面板 + 声音存折 ---- */
.voice-panel { margin: 4px 0 12px; padding: 12px; border: 1.5px dashed var(--line, #e2d5c3); border-radius: 12px; background: var(--bg-soft, #fffaf3); }
.voice-tip { margin: 0 0 10px; font-size: 13px; color: var(--ink-soft, var(--ink)); }
.voice-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.voice-state { font-size: 12px; }
.voice-done { margin-top: 10px; }
.voice-done audio { width: 100%; max-width: 320px; display: block; margin-bottom: 8px; }
.voice-ops { display: flex; gap: 8px; flex-wrap: wrap; }
.voice-ops button { min-height: 44px; }
.clip-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.clip-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line, #e2e8f0); border-radius: 10px; background: var(--card-in, #fffdf9); flex-wrap: wrap; }
.clip-info { display: flex; flex-direction: column; gap: 2px; min-width: 110px; flex: 1; }
.clip-info small { font-size: 11px; }
.clip-item audio { flex: 2; min-width: 170px; height: 36px; }
.clip-del { border: none; background: none; color: #c0392b; cursor: pointer; font-size: 12px; min-height: 44px; padding: 4px 8px; }
@media (max-width: 640px) {
  .clip-item audio { flex-basis: 100%; order: 3; }
}

/* ==================== v2.36.0 J 本月育儿贴士 + 成长档案 ==================== */
.pt-tips { margin-top: 12px; }
.pt-tips-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 8px; }
.pt-tip-read-tag { color: #38a169; font-weight: 700; font-size: 14px; }
.pt-tip-item { background: var(--sun-light, #fff8e6); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.pt-tip-item b { font-size: 15px; }
.pt-tip-item p { margin: 4px 0 0; font-size: 13.5px; color: #4a5568; line-height: 1.65; }
.gr-hl { background: #fffaf0; border: 1px dashed #ecc94b; border-radius: 12px; padding: 8px 12px; margin: 10px 0; }
.gr-hl p { margin: 2px 0; font-size: 14px; color: #744210; }
.gr-art { display: block; max-width: 100%; max-height: 260px; border-radius: 12px; margin: 10px auto; }
.gr-day { border-left: 3px solid var(--sun, #ffcf5c); margin: 12px 0; padding: 2px 0 2px 12px; }
.gr-day-head { color: #2b6cb0; font-size: 14px; }
.gr-item { margin: 3px 0; font-size: 13.5px; color: #4a5568; line-height: 1.55; }
@media (max-width: 640px) {
  .pt-tips-head { flex-wrap: wrap; }
  .gr-art { max-height: 200px; }
}

/* ==================== v2.38.1 英语主题语言地图（Hello / Farm） ==================== */
/* 硬规则：容器锁 3:4，底图铺满，四板块百分比叠加在底图留白卡上，任何宽度同比例缩放不错位；
   字号 clamp 随容器缩放；点词/问答命中区用伪元素扩到 ≥44px 不占布局。 */
.pu-map-card { position: relative; max-width: 760px; margin: 0 auto; aspect-ratio: 3 / 4;
  border-radius: 18px; overflow: hidden; box-shadow: 0 6px 24px rgba(0, 0, 0, .08); background: #f3f9ec; }
.pu-map-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pu-map-panels { position: absolute; inset: 0; }
.pu-panel { position: absolute; display: flex; flex-direction: column; gap: 2px;
  background: rgba(255, 255, 255, .72); border: 1.5px solid rgba(255, 255, 255, .95);
  border-radius: 12px; padding: 1.8% 2%; overflow: visible; }
/* Hello 底图四留白卡（上排 47~63%、下排 68~83%），面板微溢出到纯色区仍可读 */
.pu-p-goal  { left: 5.2%;  top: 46%;   width: 43.3%; height: 17.5%; }
.pu-p-words { right: 5.2%; top: 46%;   width: 43.3%; height: 17.5%; }
.pu-p-qa    { left: 5.2%;  top: 66.8%; width: 43.3%; height: 17.5%; }
.pu-p-cando { right: 5.2%; top: 66.8%; width: 43.3%; height: 17.5%; }
/* Farm 底图：上排 39~55%、下排 73~89%（中间裸露动物行不可压，面板高度收窄） */
.pu-map-card.farm .pu-p-goal,  .pu-map-card.farm .pu-p-words { top: 38.6%; height: 17%; }
.pu-map-card.farm .pu-p-qa,    .pu-map-card.farm .pu-p-cando { top: 72.6%; height: 17%; }
.pu-map-poster .pu-map-panels { display: none; }   /* 纯海报模式：只看插画 */
.pu-map-mode { position: absolute; right: 3%; top: 2%; z-index: 2; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .85); color: #2f855a; font-size: 12px; font-weight: 700;
  padding: 4px 10px; min-height: 26px; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.pu-panel-t { margin: 0; font-size: clamp(12px, 2.8vw, 14px); font-weight: 800; color: #22543d; }
.pu-panel-t small { font-weight: 500; color: #718096; font-size: 10px; margin-left: 4px; }
.pu-word-group { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.pu-word-g { font-size: 12px; }
.pu-word { position: relative; display: inline-flex; align-items: baseline; gap: 3px;
  border: 1px solid #dbe7dd; border-radius: 999px; background: #fff;
  padding: 1px 7px; min-height: 21px; cursor: pointer; }
.pu-word b { font-weight: 700; font-size: clamp(11px, 2.9vw, 13.5px); color: #2b6cb0; }
.pu-word small { font-size: clamp(10px, 2.6vw, 11.5px); color: #718096; }
.pu-line { position: relative; display: flex; flex-direction: column; align-items: flex-start;
  border: 0; background: transparent; padding: 0 2px; text-align: left; cursor: pointer;
  line-height: 1.25; min-height: 20px; }
.pu-line b { font-weight: 700; font-size: clamp(11px, 2.9vw, 13.5px); color: #2d3748; }
.pu-line small { font-size: clamp(10px, 2.6vw, 11.5px); color: #718096; }
/* 点按热区扩到 ≥44px（不改变视觉布局） */
.pu-word::after, .pu-line::after { content: ""; position: absolute; inset: -9px; }
.pu-word:active, .pu-line:active { background: #ebf8ff; }
.pu-course-cap { margin: 16px 0 8px; font-size: 16px; color: #22543d; }
@media (max-width: 480px) {
  .pu-panel { border-radius: 9px; gap: 1px; }
  .pu-word { padding: 0 5px; }
}

/* ==================== v2.46.0 Power Up 1 全册：横幅 / 每课插图 / 对话气泡 / 全册进度 ==================== */
/* 无地图单元横幅（U4~U13）：token 化随皮肤走，宽度与主题地图卡一致（760px） */
.pu-banner { display: flex; align-items: center; gap: 12px;
  background: var(--card, #fff); border: 1px solid var(--line, #e2e8f0);
  border-radius: 16px; padding: 14px 16px; max-width: 760px; margin: 0 auto 12px; }
.pu-banner-emo { font-size: 34px; line-height: 1.2; flex: none; }
.pu-banner > div { flex: 1; min-width: 0; }
.pu-banner > div > b { display: block; font-size: 16px; margin-bottom: 4px; }
.pu-banner .pu-line { min-height: 36px; padding: 4px 8px; margin: 0 -8px; border-radius: 10px; }
.pu-banner .pu-line b { font-size: clamp(13px, 3vw, 15px); }
/* 全册进度小字 */
.pu-progress { max-width: 760px; margin: 0 auto 10px; text-align: center;
  font-size: 13px; color: var(--text-muted, #718096); }
/* 每课插图（4:3 横图，居中不变形；手机/平板 ≤520px、电脑 ≤560px） */
.pu-lesson-fig { margin: 12px 0; }
.pu-lesson-img { display: block; width: 100%; max-width: 520px; height: auto;
  margin: 0 auto; border-radius: 14px; border: 1px solid var(--line, #e2e8f0); }
/* 对话气泡：白底圆角 14px，中文在上英文在下，气泡宽 ≤88%，触控 ≥44px */
.pu-bubbles { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; }
.pu-bubble { position: relative; display: flex; flex-direction: column; align-items: flex-start;
  width: 88%; max-width: 520px; min-height: 44px; box-sizing: border-box;
  background: var(--card, #fff); border: 1px solid var(--line, #e2e8f0); border-radius: 14px;
  padding: 9px 14px; text-align: left; cursor: pointer; word-break: break-word; }
.pu-bubble small { font-size: 12px; line-height: 1.5; color: var(--text-muted, #718096); }
.pu-bubble b { font-size: clamp(14px, 2.6vw, 16px); line-height: 1.5; color: #2b6cb0; }
.pu-bubble:active { background: #ebf8ff; }
@media (min-width: 1024px) {
  .pu-lesson-img, .pu-bubble { max-width: 560px; }
}

/* ==================== v2.47.0 手机端导航优化：chips 拆段 / 全册单元横滑条 / 主题页页内导航 ==================== */
.pu-strip-cap { margin: 8px 0 0; font-size: 12.5px; color: var(--text-muted, #718096); }
.pu-strip { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 8px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent); }
.pu-strip::-webkit-scrollbar { display: none; }
.pu-strip .pu-chip { flex: none; scroll-snap-align: start; min-height: 36px; }
.pu-nav { max-width: 760px; margin: 0 auto 10px; display: flex; flex-direction: column; gap: 2px; }
.pu-nav-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--line, #e2e8f0); background: var(--card, #fff); border-radius: 999px;
  padding: 7px 14px; min-height: 36px; font-size: 13.5px; cursor: pointer; color: var(--ink, #1a202c);
  transition: background .15s; }
.pu-nav-back:active { background: #ebf8ff; }
@media (min-width: 1024px) {
  .pu-nav { max-width: 760px; }
}

/* v2.54.1 分级导航收敛：侧栏 7 组折叠子菜单（pu-lvl-head/side-lvl）已删，样式一并移除 */
.pu-lvl-soon { padding: 6px 10px; font-size: 12px; color: var(--text-muted, #718096); }
/* 横滑条内「即将上线」灰 chip（不可点） */
.pu-chip-soon { flex: none; display: inline-flex; align-items: center; padding: 7px 12px; min-height: 36px;
  border-radius: 999px; font-size: 12.5px; color: #a0aec0; border: 1px dashed var(--line, #e2e8f0); }
/* 规划中空态页（Start Smart / Level 3-6）：温和空态不报错不空白 */
.pu-planned { max-width: 560px; margin: 18px auto; padding: 34px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--card, #fff); border: 1px solid var(--line, #e2e8f0); border-radius: 18px; }
.pu-planned-emo { font-size: 40px; line-height: 1; }
.pu-planned b { font-size: 15.5px; color: var(--ink, #1a202c); }
.pu-planned small { color: var(--text-muted, #718096); font-size: 12.5px; line-height: 1.6; }
.pu-planned .btn-soft { margin-top: 8px; }