:root{
  --bg:#f5f1ea; --panel:#ffffff; --ink:#1f2a44; --ink2:#5b667e;
  --brand:#2f6bff; --brand-d:#1d4fd6; --cta:#1e5a96; --accent:#ff7a59; --good:#16a34a;
  --line:#eae3d8; --soft:#f3eee5; --chip:#efe9de; --shadow:0 6px 24px rgba(26,26,24,.07);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
.hidden{display:none!important}

/* 顶栏（纸色毛玻璃 · 参照标杆站） */
.topbar{display:flex;align-items:center;justify-content:flex-start;gap:14px;
  padding:10px 16px;background:rgba(245,241,234,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer}
.logo{font-size:26px}
.logo-img{width:42px;height:42px;object-fit:contain;flex-shrink:0;
  filter:drop-shadow(0 2px 5px rgba(30,90,150,.22))}
/* 品牌字标（「AI活课本」横版 PNG，透明底）：紧邻书本方标显示，与 .logo-img 同高对齐。
   桌面 30px 高（宽随比例 ≈92px）；≤760px 缩到 24px，避免与导航抢横向空间。 */
.brand-logo-text{height:30px;width:auto;display:block;flex-shrink:0;
  user-select:none;-webkit-user-drag:none;-webkit-user-select:none}
@media(max-width:760px){.brand-logo-text{height:24px}}
.brand-title{font-size:19px;font-weight:800;letter-spacing:1px;color:var(--ink);font-family:Georgia,"Songti SC",serif}
.brand-sub{font-size:12px;color:var(--ink2)}
/* 顶部导航「固定两行」（.nv-break 强制折行，见下）；
   项宽/间距随视口「按空间放大」：clamp 下限 12px（≈窄屏原值，不缩水）、上限 15.5px（超宽屏），
   中段随 vw 线性放大。两行布局把横向空间腾出来，故整体比旧版单行档更大、更松散。
   取值经过宽度账核算：第二行 8 项需视口 ≳1600px 才单行容纳，故强制两行阈值定在 1600。 */
/* 行距（两行之间）：在列间距基础上缩 60%（×0.4），让固定两行更紧凑；列间距（同排项之间）不变。 */
.topnav{display:flex;gap:clamp(8px,.72vw,14px);row-gap:calc(clamp(8px,.72vw,14px) * .4);flex-wrap:wrap;align-items:center;flex:1;min-width:0;justify-content:flex-start}
.topnav a{display:inline-flex;align-items:center;gap:4px;color:rgba(26,26,24,.55);text-decoration:none;
  font-size:calc(clamp(13.44px,1.12vw,17.36px) * var(--nv-fs,1));padding:4px 0;white-space:nowrap;
  background-image:linear-gradient(var(--cta),var(--cta));background-position:0 100%;background-repeat:no-repeat;
  background-size:0 1.6px;transition:background-size .35s ease,color .2s}
.topnav a:hover{color:var(--cta);background-size:100% 1.6px}
.topnav a.nv-on{color:var(--cta);font-weight:800;background-size:100% 2.4px}
/* 导航项：图标 + 名称 + （分类括注） */
.topnav a .nv-ic{font-size:calc(clamp(13.44px,1.12vw,17.36px) * var(--nv-fs,1));line-height:1;opacity:.92;transition:transform .25s ease}
.topnav a:hover .nv-ic{transform:translateY(-1px) scale(1.06)}
/* 分类括注（听力）（口语）（阅读）…：超宽屏（≥1920px，两行布局横向余量充足）一律显示，让 15 个导航项
   统一为「图标 + 名称（分类）」样式；<1920px（含移动端横滑单行）隐藏括注，保证两行 / 单行不塌不折。
   注：带括注两行 itemSum 实测见 tools/_probe_nav.js 多档视口日志。 */
.topnav a .nv-sub{display:inline;font-size:calc(9.075px * var(--nv-fs,1));font-weight:600;letter-spacing:.2px;color:var(--ink2);opacity:.66;line-height:1;
  transition:color .2s,opacity .2s}
.topnav a:hover .nv-sub{opacity:1;color:var(--cta)}
.topnav a.nv-on .nv-sub{opacity:1;color:var(--cta)}
/* 导航折行占位：app.js 在「首页…练嘴巴」7 项之后插入一个 .nv-break。
   2026-10-01 起**默认隐藏**（不再强制折成两行）——桌面改走「单行」，
   见下方 @media(min-width:1280px)。元素保留仅为兼容 app.js 现有 DOM。 */
.nv-break{display:none;flex-basis:100%;height:0;margin:0;padding:0}
/* 顶栏最右：AI英语魔法师 品牌标识（图标 + 品牌名 + 副标题）
   （.topnav 为 flex:1，故天然被推到最右；纯展示，非链接、不显示网址） */
.brand-mark{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;margin-left:2px}
.brand-mark img{width:52px;height:52px;object-fit:contain;display:block;
  filter:drop-shadow(0 2px 6px rgba(30,90,150,.24))}
.brand-mark .bm-txt{display:flex;flex-direction:column;justify-content:center;min-width:0}
.brand-mark .bm-title{font-size:19px;font-weight:800;letter-spacing:1px;color:var(--ink);
  font-family:Georgia,"Songti SC",serif;line-height:1.25;white-space:nowrap}
.brand-mark .bm-sub{font-size:12px;color:var(--ink2);line-height:1.25;white-space:nowrap}

/* 容器 */
main{max-width:1180px;margin:0 auto;padding:22px}
/* 页脚（参照标杆站：品牌区 + 链接行 + 版权/备案行） */
.foot{max-width:1180px;margin:30px auto 0;padding:26px 22px 20px;border-top:1px solid var(--line);text-align:left}
.ft-main{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.ft-name{font-size:18px;font-weight:900;color:var(--ink);letter-spacing:1px}
.ft-name i{font-style:normal;color:var(--ink2);font-weight:400;margin:0 7px}
/* 页脚金色 slogan：思源宋体 Heavy（与 hero 标语同款字形） */
.foot-slogan{font-family:"SHS Heavy","Source Han Serif SC","Noto Serif SC","Songti SC","STSong","SimSun","宋体",serif;
  font-size:29px;font-weight:900;letter-spacing:2px;margin-top:10px;
  background:linear-gradient(100deg,#8a6d1a 0%,#d9b84a 40%,#b8912e 70%,#9a7b1c 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.85))}
.ft-links{display:flex;gap:22px;flex-wrap:wrap;padding-top:4px}
.ft-links a{font-size:13px;color:var(--ink2);text-decoration:none;font-weight:700;white-space:nowrap}
.ft-links a:hover{color:var(--ink)}
.ft-beian{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:24px;padding-top:14px;border-top:1px dashed var(--line);font-size:12px;color:#9a937f}
.ft-beian .ft-copy{color:#9a937f}
.ft-beian a{color:#9a937f;text-decoration:none;white-space:nowrap}
.ft-beian a:hover{color:var(--ink);text-decoration:underline}
.ft-beian img{width:14px;height:14px;vertical-align:-2px;margin-right:3px}
/* 友情链接 */
.ft-friend{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:22px;padding-top:14px;border-top:1px dashed var(--line)}
.ft-friend-label{font-size:13px;font-weight:900;color:var(--ink);white-space:nowrap;letter-spacing:.5px}
.ft-friend-links{display:flex;gap:18px;flex-wrap:wrap}
.ft-friend-links a{font-size:13px;color:var(--ink2);text-decoration:none;font-weight:700;white-space:nowrap}
.ft-friend-links a:hover{color:var(--ink);text-decoration:underline}
/* 商务合作邮箱 */
.ft-contact{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--ink2)}
.ft-contact-label{font-weight:900;color:var(--ink);letter-spacing:.5px;white-space:nowrap}
.ft-contact a{color:var(--ink2);text-decoration:none;font-weight:700;white-space:nowrap}
.ft-contact a:hover{color:var(--ink);text-decoration:underline}
/* 中屏以下：收起分类括注（横向余量不足，避免两行塌成三行 / 单行溢出）
   阈值 1920px = 带括注两行 6+9 的稳妥下限（实测 1900px 可两行、1880px 起第二行 9 项落第三行）。 */
@media(max-width:1919px){
  .topnav a .nv-sub{display:none}
}
/* 顶部导航「单行」（2026-10-01）：桌面（≥1280px）**一律单行** ——
   .nv-break 已默认隐藏；此区间字号/列距随视口微缩（字号 12.32→15.12px、列距 5→10px），
   并收起分类括注（括注会撑破单行，1920 也放不下），保证 15 项一行容纳、不溢出。
   2026-10-01 二轮：顶栏右侧「AI英语魔法师」品牌标识删除后横向余量大增 → 单行阈值曾下探至 1200。
   2026-10-01 三轮：**导航字号整体放大 12%**（11→12.32 / 13.5→15.12，即 ×1.12）→ 1200/1240px
   放不下（实测溢出 48/11px），**单行下界回调至 1280** 并微收列距（gap 6→5）留安全余量。
   <1280px 由下方原逻辑接管：自然连续换行；≤760px 移动端横滑单行。 */
@media(min-width:1280px){
  .topnav{flex-wrap:nowrap;gap:clamp(5px,.5vw,10px)}
  .topnav a{font-size:calc(clamp(12.32px,.9184vw,15.12px) * var(--nv-fs,1))}
  .topnav a .nv-ic{font-size:calc(clamp(12.32px,.9184vw,15.12px) * var(--nv-fs,1))}
  .topnav a .nv-sub{display:none}
}
/* 导航折行：.nv-break 在默认样式中已 display:block → 桌面（≥1200px）固定两行
   （app.js 插于「练嘴巴」之后：第一行 7 项 / 第二行 8 项）。
   <1200px 起隐藏 .nv-break、走自然连续换行。
   阈值依据（宽度账）：第二行 8 项在当前口径（≤1919px 无括注 · 字号下限 12px · 列距 ≥8px）
   实测 ≈678px，1200px 视口导航可用宽 ≈721px，可容 → 1200 起固定两行。
   （2026-10-01 修正：曾因「学习数据」排到第二行（6+9）致第二行 9 项 ≈763px 放不下、
   1200–1599px 落三行而把阈值抬到 1600；本次「学习数据」回到第一行第 3 位成 7+8 后，
   第二行仅 8 项，阈值回调至 1200，使常见笔记本宽度（1280/1366/1440）稳定呈现截图分法。）
   仅 ≤760px 横滑单行模式同样隐藏（见下）。 */
@media(max-width:1199px){
  .nv-break{display:none}
}
/* 中屏：右侧品牌标识只留「图标 + 品牌名」（副标题收起，让位给导航） */
@media(max-width:1260px){
  .brand-mark .bm-sub{display:none}
}
/* 窄屏：右侧品牌标识只留图标 */
@media(max-width:900px){
  .brand-mark .bm-txt{display:none}
}
@media(max-width:760px){
  .topnav{gap:10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;padding-right:6px}
  /* 移动端横滑单行：字号锁固定 13.86px（= 桌面基准 12.375 × 1.12 放大；clamp 的 vw 项在窄屏会被压到下限，这里显式锁住） */
  .topnav a,.topnav a .nv-ic{font-size:calc(13.86px * var(--nv-fs,1))}
  .topnav::-webkit-scrollbar{display:none}
  .nv-break{display:none}
  /* 移动端精简：收起分类括注（每项短 ≈46px，14 项少 ≈640px 横滑），只留「图标 + 名称」 */
  .topnav a .nv-sub{display:none}
  /* 触控目标：用伪元素外扩点击区（不改布局、不影响底部下划线定位） */
  .topnav a{position:relative}
  .topnav a::after{content:"";position:absolute;top:-11px;bottom:-11px;left:-5px;right:-5px}
  .brand-mark img{width:38px;height:38px}
  .ft-main{flex-direction:column;gap:14px}
  .foot-slogan{font-size:22px;letter-spacing:2px}
  .ft-beian{justify-content:center;text-align:center}
  .ft-friend{flex-direction:column;gap:8px}
}

/* 总目录 */
.cat-head{text-align:center;margin:8px 0 22px}
.cat-head h1{font-size:26px;margin:0 0 6px}
.cat-head p{color:var(--ink2);margin:0}
/* 总目录顶部：AI英语活课本 横幅（双栏卡，版式与比例对齐 #/ear hero —— 图左 56%/max560，文右） */
.catalog-hero{display:flex;align-items:center;gap:20px;background:linear-gradient(120deg,#fffdf7,#f6ecdb);
  border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);margin:2px 0 18px}
.catalog-hero .ch-img{display:block;flex:0 1 56%;max-width:560px;min-width:0;height:auto;border-radius:12px;
  box-shadow:0 6px 20px rgba(31,42,68,.10)}
.catalog-hero .ch-meta{display:flex;flex-direction:column;gap:12px;justify-content:center;align-items:flex-start;
  flex:1 1 auto;min-width:0;padding:0 2px}
.catalog-hero .ch-lead{display:flex;flex-direction:column;gap:5px;min-width:0;flex:0 1 auto}
.catalog-hero .ch-kicker{font-size:12.5px;font-weight:800;color:var(--cta);letter-spacing:.6px}
.catalog-hero .ch-h1{margin:0;font-size:26px;line-height:1.28;font-weight:900;color:var(--ink);letter-spacing:.5px}
.catalog-hero .ch-h1::after{content:"";display:block;width:44px;height:4px;border-radius:3px;margin-top:9px;
  background:linear-gradient(90deg,#2f6bff,#7c4dff)}
/* 右栏统计区：与首页 .hh-stats 同款四项（大号品牌蓝数字 + 小字说明），四列铺满文字栏 */
.catalog-hero .ch-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 12px;
  width:100%;max-width:620px;align-self:stretch}
/* 版本 / 学段分类筛选条 */
.cat-filter{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px;
  box-shadow:var(--shadow);margin:0 0 20px;display:flex;flex-direction:column;gap:8px}
.cat-filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cat-filter-row .cf-label{flex-shrink:0;font-size:12px;font-weight:800;color:var(--ink2);letter-spacing:2px;
  background:var(--soft);border-radius:8px;padding:3px 10px}
.cat-filter-row .pg-filter{margin:0}
/* 版本块：三个版本分类展示 */
.ver-block{margin:26px 0 6px}
.ver-block .ver-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  border-bottom:2px solid var(--line);padding-bottom:8px}
.ver-block .ver-name{font-size:20px;font-weight:900;letter-spacing:1px;color:var(--ink)}
.ver-block .ver-name::before{content:'';display:inline-block;width:6px;height:18px;border-radius:3px;
  background:var(--brand);margin-right:9px;vertical-align:-2px}
.ver-block .ver-meta{font-size:12px;color:var(--ink2)}
.ver-block .ver-prog{margin-left:auto;font-size:12px;color:var(--ink2)}
@media(max-width:640px){
  .catalog-hero .ch-h1{font-size:21px}
  .ver-block .ver-prog{margin-left:0;flex-basis:100%}
  /* 总目录书卡：窄屏改双列 + 紧凑化（单列时封面过高、翻页过长） */
  .book-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .book-card{padding:10px;border-radius:12px}
  .book-card .bc-title{font-size:14px;margin-bottom:2px}
  .book-card .bc-meta{font-size:11px}
  .book-card .bc-cover{margin-bottom:7px}
  .book-card .bc-status{font-size:10px;padding:2px 7px;top:8px;right:8px}
  /* 总目录筛选条 / 横幅：窄屏收敛内边距 */
  .cat-filter{padding:10px 12px}
  .catalog-hero{display:block;padding:12px}
  .catalog-hero .ch-img{width:100%;max-width:none}
  .catalog-hero .ch-meta{align-items:stretch;margin-top:14px;gap:12px}
  .catalog-hero .ch-lead{flex:1 1 100%}
  /* 统计区窄屏两列（四列在 390px 下数字会撑破格子） */
  .catalog-hero .ch-stats{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
}
.grade-group{margin:18px 0}
.grade-title{font-size:15px;font-weight:800;color:var(--brand-d);margin:0 0 10px;
  border-left:4px solid var(--brand);padding-left:10px}
/* 来源与版权提醒：学段目录页 / 全部目录页 / 首页课本馆底部统一出处 */
.src-note{margin:16px 0 0;background:#f7faff;border:1px solid #dbe6ff;border-radius:12px;
  padding:12px 16px;font-size:13px;line-height:1.8;color:var(--ink2)}
.src-note b{color:var(--brand-d);font-weight:800}
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.book-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;
  box-shadow:var(--shadow);cursor:pointer;transition:.18s;position:relative;overflow:hidden}
.book-card:hover{transform:translateY(-3px);border-color:var(--brand)}
.book-card .bc-title{font-size:16px;font-weight:800;margin-bottom:4px}
.book-card .bc-meta{font-size:12px;color:var(--ink2)}
.book-card .bc-status{position:absolute;top:12px;right:12px;font-size:11px;padding:2px 9px;border-radius:12px}
.st-ready{background:#e7f8ee;color:var(--good)}
.st-coming{background:#f1f3f7;color:#98a2b8}
.book-card.coming{cursor:not-allowed;opacity:.72}
.book-card.coming:hover{transform:none;border-color:var(--line)}

/* 书籍首页 */
.book-hero{display:flex;gap:20px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:20px;box-shadow:var(--shadow);margin-bottom:18px}
.book-hero img{width:150px;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.12);background:#fff}
.book-hero h2{margin:0 0 6px}
.book-hero .meta{color:var(--ink2);font-size:13px;margin:2px 0}
.unit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.unit-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;
  cursor:pointer;transition:.18s;box-shadow:var(--shadow)}
.unit-card:hover{transform:translateY(-3px);border-color:var(--brand);background:var(--soft)}
.unit-card .uc-idx{font-size:12px;color:var(--brand);font-weight:800}
.unit-card .uc-title{font-size:16px;font-weight:800;margin:4px 0}
.unit-card .uc-topic{font-size:12px;color:var(--ink2)}

/* 单元阅读器 */
.reader{display:grid;grid-template-columns:230px 1fr;gap:18px}
.side{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;
  box-shadow:var(--shadow);height:fit-content;position:sticky;top:78px}
.side h3{font-size:13px;margin:6px 4px 10px;color:var(--ink2)}
.side a{display:block;padding:8px 10px;border-radius:9px;color:var(--ink);text-decoration:none;
  font-size:14px;margin-bottom:3px}
.side a:hover{background:var(--soft)}
.side a.active{background:var(--brand);color:#fff;font-weight:700}
.side .back{color:var(--brand);font-size:13px;margin-bottom:8px;display:block}
.side .book-name{font-size:15px;font-weight:800;color:var(--ink);line-height:1.5;
  padding:2px 4px;margin-bottom:10px}

.content{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:18px;min-height:60vh}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.tab{padding:8px 16px;border-radius:10px 10px 0 0;cursor:pointer;font-size:14px;color:var(--ink2);
  border:1px solid transparent;border-bottom:none}
.tab.active{color:var(--brand-d);font-weight:800;background:var(--soft);border-color:var(--line)}

/* 工具条 */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;
  padding:10px 12px;background:var(--soft);border-radius:10px}
.toolbar .tg{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;
  padding:5px 10px;border-radius:8px;background:#fff;border:1px solid var(--line)}
.toolbar .tg.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn{padding:7px 14px;border-radius:9px;border:none;background:var(--brand);color:#fff;
  font-size:13px;cursor:pointer}
.btn:hover{background:var(--brand-d)}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}

/* 对话/阅读文本 */
.dlg{margin-bottom:18px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.dlg-title{background:var(--chip);padding:8px 14px;font-weight:800;font-size:14px;color:var(--brand-d)}
.line{display:flex;gap:10px;padding:9px 14px;border-top:1px solid var(--line);align-items:flex-start}
.line:first-child{border-top:none}
.line .sp{min-width:84px;color:var(--accent);font-weight:700;font-size:13px;flex-shrink:0}
.line .tx{flex:1;font-size:16px}
.wd{display:inline-block;cursor:pointer;border-radius:5px;padding:0 2px;transition:.12s}
.wd:hover{background:#fff3cd}
.playing{background:#fff3cd;outline:2px solid var(--accent)}
.sentence{cursor:pointer}
.sentence:hover .tx{color:var(--brand-d)}

/* 讲解浮层 */
.mask{position:fixed;inset:0;background:rgba(20,30,55,.45);z-index:8000;display:flex;
  align-items:center;justify-content:center;padding:20px}
.explain-panel{background:#fff;border-radius:16px;max-width:560px;width:100%;max-height:84vh;
  overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.explain-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;
  background:linear-gradient(120deg,#2f6bff,#5b8bff);color:#fff;font-weight:800;border-radius:16px 16px 0 0}
.explain-head .x{background:rgba(255,255,255,.2);border:none;color:#fff;border-radius:8px;
  width:30px;height:30px;cursor:pointer;font-size:15px}
.explain-body{padding:16px 18px}
.explain-body h4{margin:14px 0 6px;font-size:13px;color:var(--brand-d);display:flex;align-items:center;gap:6px}
.explain-body h4 .tag{background:var(--chip);color:var(--brand-d);font-size:11px;padding:1px 8px;border-radius:10px}
.explain-body .zh{font-size:15px;line-height:1.8}
.breakdown{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.bk-row{display:flex;gap:10px;padding:7px 10px;border-top:1px solid var(--line);align-items:baseline}
.bk-row:first-child{border-top:none}
.bk-w{font-weight:800;min-width:120px;color:var(--ink)}
.bk-p{color:var(--brand);font-size:12px;min-width:70px}
.bk-m{color:var(--ink2);font-size:13px}
.bk-row.unknown .bk-w{color:#b9c0d0}
.intent{background:#fff8ec;border-left:3px solid var(--accent);padding:10px 12px;border-radius:8px;
  font-size:13px;color:#8a5a00}

/* ===== 单词表（即点即译 + 英/美双发音） ===== */
.vt-head{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.vt-search{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px}
.vt-search:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(88,120,255,.12)}
.vt-count{flex:0 0 auto;font-size:12px;color:var(--ink2);background:var(--soft);
  padding:5px 10px;border-radius:20px;white-space:nowrap}
.vt-tips{font-size:12px;color:var(--ink2);background:var(--soft);border-radius:8px;
  padding:8px 11px;margin-bottom:10px;line-height:1.6}
.vt-tips b{color:var(--brand-d)}
.vt{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.vt-row{display:grid;grid-template-columns:1.25fr 1.5fr .6fr 2.2fr auto;gap:10px;padding:9px 12px;
  border-top:1px solid var(--line);align-items:center;font-size:14px}
.vt-row:first-child{border-top:none}
.vt-row:hover{background:var(--soft)}
.vt-row .w{font-weight:800;cursor:pointer;word-break:break-word}
.vt-row .w:hover{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.vt-row .ph{color:var(--brand);font-size:13px;line-height:1.7}
.vt-row .ph .phk{display:inline-block;font-style:normal;font-size:10px;color:#fff;
  background:var(--brand);border-radius:3px;padding:0 3px;margin:0 3px 0 0;vertical-align:1px}
.vt-row .ph .phk:not(:first-child){margin-left:6px}
.vt-row .ps{color:var(--ink2);font-size:12px}
.vt-row .mn{color:var(--ink2);word-break:break-word}
.vt-row .say{display:flex;gap:5px;justify-content:flex-end}
.vt-say{background:#fff;border:1px solid var(--line);border-radius:8px;cursor:pointer;
  font-size:12px;line-height:1;padding:5px 8px 5px 6px;transition:.15s;color:var(--ink);
  display:inline-flex;align-items:center;gap:3px;font-weight:700;white-space:nowrap}
.vt-say i{font-style:normal;font-size:11px;opacity:.65}
.vt-say.uk{color:var(--brand-d)}
.vt-say.us{color:#b45309}
.vt-say:hover{border-color:var(--brand);background:var(--chip);transform:translateY(-1px)}
.vt-say.uk:hover{border-color:var(--brand);background:var(--chip)}
.vt-say.us:hover{border-color:#f59e0b;background:#fff7ed}
.vt-say.playing{border-color:var(--brand);background:var(--brand);color:#fff;
  box-shadow:0 0 0 3px rgba(88,120,255,.25)}
.vt-say.playing i{opacity:1}
.vt-say:active{transform:translateY(0)}
.vt-foot{margin-top:10px;font-size:12px;color:var(--ink2);text-align:right}
.vt-foot b{color:var(--brand-d)}
.vt-empty{text-align:center;padding:48px 20px;color:var(--ink2)}
.vt-empty-ico{font-size:38px;margin-bottom:10px}
.vt-empty b{display:block;font-size:16px;color:var(--ink);margin-bottom:6px}
.vt-empty p{font-size:13px;max-width:420px;margin:0 auto;line-height:1.7}
/* 释义浮层里的双音标行 */
.we-pron{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:6px 0 10px;
  padding:10px 12px;background:var(--soft);border-radius:10px}
.we-pron .we-pr{font-size:14px;color:var(--brand);font-weight:600}
.we-pron .we-pr i{font-style:normal;font-size:10px;color:#fff;background:var(--brand);
  border-radius:3px;padding:1px 4px;margin-right:5px;vertical-align:1px;font-weight:400}
.we-pron .we-pr-say{display:flex;gap:6px;margin-left:auto}

/* 听力 */
.ls-hint{font-size:13px;color:var(--ink2);margin-bottom:12px}
.ls-hint b{color:var(--brand-d)}
.track{border:1px solid var(--line);border-radius:12px;padding:0;margin-bottom:12px;overflow:hidden;
  transition:border-color .15s,box-shadow .15s}
.track.open{border-color:var(--brand);box-shadow:0 4px 16px rgba(47,107,255,.07)}
.track-head{display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;
  background:var(--soft);transition:background .15s;user-select:none}
.track-head:hover{background:var(--chip)}
.trk-ico{font-size:15px;flex:0 0 auto}
.trk-title{font-weight:800;font-size:14.5px;color:var(--ink);flex:1 1 auto;min-width:0}
.trk-meta{font-size:12px;color:var(--ink2);background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:1px 9px;flex:0 0 auto}
.trk-caret{font-size:12.5px;font-weight:700;color:var(--brand);flex:0 0 auto;white-space:nowrap}
.track .script{border-top:1px solid var(--line);padding:6px 0 4px;background:#fff}
.ls-line{display:flex;gap:10px;padding:8px 16px;border-top:1px dashed var(--line);
  font-size:14px;line-height:1.7;align-items:flex-start;cursor:pointer}
.ls-line:first-child{border-top:none}
.ls-line:hover{background:var(--soft)}
.ls-line:hover .ls-en{color:var(--brand-d)}
.ls-sp{flex:0 0 auto;font-weight:800;color:var(--brand);min-width:74px;font-size:13.5px}
.ls-en{flex:1 1 auto;color:var(--ink);word-break:break-word}
.ls-actions{padding:10px 16px 12px;border-top:1px dashed var(--line);text-align:right}
/* 听力原声播放器（站内 listen/*.mp3） */
.ls-player{padding:11px 16px;background:#fff;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:10px}
.ls-player audio{width:100%;height:38px;outline:none}
.track.playing{border-color:var(--brand);box-shadow:0 4px 16px rgba(47,107,255,.12)}
.track.playing .trk-ico{animation:lsPulse 1.1s ease-in-out infinite}
@keyframes lsPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.7}}
.ls-audio-err{font-size:12px;color:#b45309;background:#fff7ed;border:1px solid #fed7aa;
  border-radius:8px;padding:6px 10px;margin:0 16px 10px}
.track h4{margin:0 0 8px;font-size:15px}
.track .audio-note{font-size:12px;color:var(--ink2);background:var(--soft);padding:8px 10px;
  border-radius:8px;margin-top:8px}
.track a.platform{color:var(--brand);font-size:13px;text-decoration:none;font-weight:700}
/* 听力空态 */
.ls-empty{text-align:center;padding:44px 20px;color:var(--ink2)}
.ls-empty-ico{font-size:34px;margin-bottom:10px}
.ls-empty b{display:block;font-size:15px;color:var(--ink);margin-bottom:8px}
.ls-empty p{margin:0;font-size:13px}
@media(max-width:600px){
  .trk-title{font-size:13.5px}
  .ls-sp{min-width:58px;font-size:12.5px}
  .ls-line{font-size:13px;padding:8px 12px}
}

/* ---------- 全册翻阅 ---------- */
.flip-wrap{padding-bottom:80px}
.flip-bar{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;
  padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:8px}
.flip-bar .fb-book{font-weight:700;color:var(--ink);font-size:14px}
.flip-hint{text-align:center;color:var(--ink2);font-size:12.5px;margin-bottom:10px}
.flip-stage{text-align:center}
.flip-page{position:relative;display:inline-block;max-width:100%;line-height:0;
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);background:#fff;overflow:hidden}
.flip-page img{display:block;max-width:100%;max-height:74vh;width:auto;height:auto}
/* 左右整页热区：悬停浮出箭头提示 */
.flip-zone{position:absolute;top:0;bottom:0;width:16%;min-width:64px;border:none;cursor:pointer;
  background:transparent;color:transparent;font-size:30px;transition:background .15s,color .15s;z-index:2}
.flip-zone.left{left:0;border-radius:12px 0 0 12px}
.flip-zone.right{right:0;border-radius:0 12px 12px 0}
.flip-zone.left::before{content:'‹'}
.flip-zone.right::before{content:'›'}
.flip-zone:hover{background:linear-gradient(to right,rgba(0,0,0,.14),rgba(0,0,0,0));color:#fff}
.flip-zone.right:hover{background:linear-gradient(to left,rgba(0,0,0,.14),rgba(0,0,0,0))}
.flip-zone:focus-visible{outline:2px solid var(--brand);color:var(--brand)}
.flip-jump{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin:14px 0 6px}
.flip-jump input{width:78px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;text-align:center}
/* 缩略图分块 */
.flip-units{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}
.fu-block{margin-bottom:8px;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.fu-head{display:flex;gap:10px;align-items:center;padding:9px 12px;cursor:pointer;font-size:13.5px}
.fu-head:hover{background:#f7f9fc}
.fu-arrow{color:var(--brand);width:14px}
.fu-title{font-weight:600;color:var(--ink);flex:1}
.fu-range{color:var(--ink2);font-size:12px;white-space:nowrap}
.fu-block.open>.thumbs{padding:4px 12px 12px}
.thumb{position:relative}
.th-n{position:absolute;left:0;right:0;bottom:0;font-size:10px;text-align:center;color:#fff;
  background:rgba(0,0,0,.5);line-height:14px}
.thumb.active .th-n{background:var(--brand)}
.thumbs{display:flex;gap:6px;overflow-x:auto;padding:8px 0}
.thumb{flex:0 0 auto;width:58px;height:76px;border:2px solid transparent;border-radius:6px;overflow:hidden;
  cursor:pointer;background:#fff}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.active{border-color:var(--brand)}
@media(max-width:760px){
  .flip-page img{max-height:none}
  .flip-jump{gap:8px}
  .flip-jump .btn{padding:6px 10px;font-size:12.5px}
  .flip-hint{font-size:11.5px}
}

/* ---------- 全册翻阅 · 全屏阅读层 ----------
   不变量：flipFullOn（JS 状态）与 [data-on]（DOM 状态）必须同生同灭。
   层挂 <body>、z-index 高于讲解浮层（见 .mask），浏览器拒绝真全屏时退化为「全窗口阅读」，
   此时右上角的「退出全屏」按钮照常可见可点——这是本功能最要紧的一条。 */
.flip-full{display:none}
.flip-full[data-on]{display:flex;flex-direction:column;position:fixed;inset:0;z-index:7000;background:#0e1116}
.flip-full .full-stage{display:none;flex:1;min-height:0;flex-direction:column;color:#fff}
/* 只有 .full-stage 进 Fullscreen API → 全屏态自带白底；层本身则保持深色遮罩 */
.flip-full[data-on] .full-stage{display:flex}
.flip-full .full-stage:fullscreen{background:#fff;color:var(--ink)}
.flip-full .full-stage:-webkit-full-screen{background:#fff;color:var(--ink)}
.flip-full .full-top{display:flex;align-items:center;gap:14px;padding:10px 16px;
  background:rgba(0,0,0,.25);flex:0 0 auto}
.flip-full .full-stage:fullscreen .full-top{background:#fff;border-bottom:1px solid var(--line)}
.flip-full .full-book{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flip-full .full-count{font-size:13px;opacity:.85;white-space:nowrap}
/* 右栏目录显隐按钮（在全屏态压 real fullscreen 下也要可点，故放在 .full-top 内） */
.flip-full .full-dir{flex:0 0 auto;margin-left:auto;cursor:pointer;border:none;border-radius:20px;padding:7px 14px;
  font-size:13px;font-weight:700;font-family:inherit;color:#fff;background:rgba(255,255,255,.18);
  transition:background .15s;white-space:nowrap}
.flip-full .full-dir:hover{background:rgba(255,255,255,.32)}
.flip-full .full-stage:fullscreen .full-dir{color:#fff;background:var(--brand);opacity:.92}
.flip-full .full-stage:fullscreen .full-dir:hover{background:var(--brand-d);opacity:1}
.flip-full .full-x{margin-left:8px;cursor:pointer;border:none;border-radius:20px;padding:7px 16px;
  font-size:13.5px;font-weight:700;font-family:inherit;color:#fff;background:rgba(255,255,255,.18);
  transition:background .15s}
.flip-full .full-x:hover{background:rgba(255,255,255,.32)}
.flip-full .full-stage:fullscreen .full-x{color:#fff;background:var(--brand)}
.flip-full .full-body{flex:1;min-height:0;display:flex;align-items:stretch;justify-content:center;gap:2px;padding:8px}
/* 全屏层左舞台（‹ 图片 ›）：右栏出现或收起时由它自己收缩 */
.flip-full .ff-stage{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:2px}
/* 全屏层右栏：与主层同一份「全册单元折叠」列表（data-pr2list 标记的两份 DOM 共享状态）。
   偏好记在 localStorage hj_ffside：要纯净大图时点右上角「隐藏目录」收起。 */
.flip-full .ff-side{flex:0 0 340px;max-width:36vw;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff}
.flip-full .full-stage:fullscreen .ff-side{background:#f6f8fc;border:1px solid var(--line)}
.flip-full.noside .ff-side{display:none}
.flip-full .ff-side-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.flip-full .ff-ttl{font-size:13px;font-weight:800;opacity:.95;white-space:nowrap}
.flip-full .ff-tgs{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.flip-full .ff-tgs .tg{cursor:pointer;user-select:none;padding:4px 9px;font-size:12.5px;border-radius:8px;
  background:#fff;border:1px solid var(--line);color:var(--ink2)}
.flip-full .ff-tgs .tg.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.flip-full .ff-list{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
/* 卡片内文字回到正色：.ff-side 的 color:#fff 只该作用于面板骨架，
   否则会继承进无显式颜色的 .line .tx（白底白字，句子整列隐形）。 */
.flip-full .ff-list .pu-block{color:var(--ink)}
.flip-full .flip-page.full{box-shadow:0 10px 40px rgba(0,0,0,.5);border-color:transparent}
.flip-full .flip-page.full img{max-height:calc(100vh - 190px)}
.flip-full .full-stage:fullscreen .flip-page.full img{max-height:calc(100vh - 190px)}
.flip-full .fnav{flex:0 0 auto;width:58px;height:96px;cursor:pointer;font-size:34px;line-height:1;
  color:#fff;background:transparent;border:none;border-radius:12px;transition:background .15s}
.flip-full .fnav:hover{background:rgba(255,255,255,.14)}
.flip-full .full-stage:fullscreen .fnav{color:var(--ink2)}
.flip-full .full-stage:fullscreen .fnav:hover{background:#f2f5fa}
.flip-full .full-bar{flex:0 0 auto;display:flex;gap:10px;justify-content:center;align-items:center;
  flex-wrap:wrap;padding:10px 16px;background:rgba(0,0,0,.25)}
.flip-full .full-stage:fullscreen .full-bar{background:#fff;border-top:1px solid var(--line)}
.flip-full .full-bar .btn{padding:7px 12px;font-size:13px}
.flip-full .fbar-num{font-size:13.5px;white-space:nowrap}
.flip-full .fbar-num input{width:70px;padding:6px 8px;border:1px solid rgba(255,255,255,.35);border-radius:8px;
  text-align:center;font-family:inherit;background:rgba(0,0,0,.25);color:#fff}
.flip-full .full-stage:fullscreen .fbar-num input{border-color:var(--line);background:#fff;color:var(--ink)}
.flip-full .full-hint{flex:0 0 auto;text-align:center;font-size:12px;opacity:.7;padding:0 0 10px}
.flip-full .full-stage:fullscreen .full-hint{color:var(--ink2);opacity:1}
@media(max-width:760px){
  .flip-full .full-body{gap:0;padding:6px}
  .flip-full .ff-side{flex:0 0 44vw;max-width:52vw;padding:8px}
  .flip-full .ff-tgs{width:100%;margin-left:0}
  .flip-full .fnav{width:42px;height:70px;font-size:26px}
  .flip-full .flip-page.full img{max-height:calc(100vh - 210px)}
  .flip-full .full-bar{gap:6px;padding:8px 10px}
  .flip-full .full-bar .btn{padding:6px 9px;font-size:12.5px}
  .flip-full .full-hint{font-size:11px}
}

/* TTS 控制条 */
.tts-bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:40;
  background:#fff;border:1px solid var(--line);border-radius:30px;box-shadow:0 8px 30px rgba(0,0,0,.18);
  padding:8px 16px;display:flex;gap:10px;align-items:center;font-size:13px;white-space:nowrap;max-width:92vw}
.tts-bar select{padding:5px 8px;border-radius:8px;border:1px solid var(--line);max-width:340px}
.tts-bar .mini{background:none;border:none;cursor:pointer;font-size:14px;color:var(--brand);white-space:nowrap}
.tts-bar .tip{color:var(--ink2);white-space:nowrap}

@media(max-width:760px){
  .reader{grid-template-columns:1fr}
  .side{position:static}
  .book-hero{flex-direction:column}
  /* 单词表窄屏：单词+音标+发音一行，词性+释义换行铺满 */
  .vt-row{grid-template-columns:1.3fr 1.6fr auto;gap:6px 10px;row-gap:4px}
  .vt-row .ps{grid-column:1;font-size:11px}
  .vt-row .mn{grid-column:2/4}
  .vt-row .say{grid-column:3;grid-row:1}
}

/* ===== 分页点读讲解 ===== */
.hero-btns{display:flex;gap:10px;flex-wrap:wrap}
.hero-btns .btn.primary{background:linear-gradient(135deg,#ff7a45,#ff4d4f)}
.pg-cat-head{max-width:1100px;margin:0 auto 18px}
.pg-cat-head h2{font-size:22px;margin:6px 0}
.pg-cat-head p{color:var(--ink2);font-size:13px;margin:4px 0 12px}
.pg-filter{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.pf{cursor:pointer;padding:6px 14px;border:1px solid var(--line);border-radius:20px;font-size:13px;background:#fff;color:var(--ink2)}
.pf.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.pg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-width:1100px;margin:0 auto}
.pchip{cursor:pointer;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;min-height:96px;display:flex;flex-direction:column;gap:6px;transition:.15s;position:relative}
.pchip:hover{box-shadow:0 6px 20px rgba(0,0,0,.12);transform:translateY(-2px)}
.pchip.interactive{border-left:4px solid var(--brand)}
.pchip.material{opacity:.82}
.pc-n{font-weight:700;font-size:14px;color:var(--ink)}
.pc-sub{font-size:11px;padding:2px 8px;border-radius:10px;align-self:flex-start;color:#fff}
.s-dlg{background:#2f80ed}.s-read{background:#27ae60}.s-vocab{background:#9b51e0}.s-mat{background:#9aa5b1}.s-x{background:#f2994a}
.pc-title{font-size:12px;color:var(--ink2);line-height:1.4;margin-top:auto}
/* 阅读器布局 · 视口自适应（2026-09-30）
   旧写法 height:calc(100vh - 0px) 没扣掉站点顶栏与 main 内边距，阅读器底部会溢出首屏
   （实测顶栏 94 + main padding 22 = 116px），于是页图在「可见窗口」里整体偏下、看着没居中。
   这里改用纯 CSS 的 flex 分配：body 撑满一屏、main 吃掉剩余高度、.page-reader 填满 main，
   不写任何魔法数字，顶栏换行/字号变化都自动跟随。
   （.mouth 动嘴巴阅读器保持原样，不在本次改动范围。） */
/* 仅桌面/平铺档（≥901px，左右分栏）生效；≤900px 是上下单列布局，
   两块各自需要一个较高的滚动区，沿用下面的固定 100vh 旧行为，不动。 */
@media(min-width:901px){
  /* body 用确定高度（不是 min-height）：否则内容超出时 flex 容器只会「长高」，
     main 不会被压缩，阅读器依旧按 100vh 溢出一截。 */
  body:has(> main > .page-reader:not(.mouth)){display:flex;flex-direction:column;height:100vh;height:100dvh}
  /* 页脚在阅读页整体收进一屏之外（原本就在首屏下方，看不到），故直接不参与高度分配，
     否则它会占掉 ~220px 把页图压小；顶栏导航仍在，站内链接不受影响。 */
  body:has(> main > .page-reader:not(.mouth)) .foot{display:none}
  body:has(> main > .page-reader:not(.mouth)) main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding-bottom:0}
  main > .page-reader:not(.mouth){flex:1 1 auto;min-height:0;height:auto}
}
.page-reader{display:flex;flex-direction:column;height:calc(100vh - 0px)}
.pg-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line);flex-wrap:wrap;position:sticky;top:0;z-index:20}
.pg-crumb{font-size:13px;color:var(--ink2)}
/* 顶栏「翻页到第 N 页」直达输入框 */
.pg-find{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2);white-space:nowrap}
.pg-find input{width:64px;padding:4px 8px;border:1px solid var(--line);border-radius:6px;font-size:13px;text-align:center;color:var(--ink);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s;
  -moz-appearance:textfield;appearance:textfield}
.pg-find input::-webkit-outer-spin-button,.pg-find input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pg-find input:focus{border-color:#2f6bff;box-shadow:0 0 0 3px rgba(47,107,255,.14)}
.pg-nav{margin-left:auto;display:flex;align-items:center;gap:8px}
.pg-find + .pg-nav{margin-left:0}
.pg-num{font-size:13px;color:var(--ink2)}
/* ---------- 分页点读 · 全屏（2026-09-29） ----------
   真全屏挂在 documentElement（见 app.js enterPgFull 注释），body.pg-full 只负责：
   ① 隐藏站点顶栏/页脚 ② 把 .page-reader 固定铺满视口。布局与进入前完全一致——
   顶栏工具条、左页图、右栏文本原样保留；tts 条 / 即指即译 / 讲解抽屉层级压回全屏层之上。 */
.pg-fullbtn{white-space:nowrap}
body.pg-full{overflow:hidden}
body.pg-full .topbar,body.pg-full .foot{display:none}
body.pg-full .page-reader{position:fixed;inset:0;z-index:7000;height:100vh;background:var(--bg)}
/* 「退出全屏」按钮仅全屏态显示（顶栏最右，Esc 同效）；.pg-exit 规则须晚于 .btn 才能盖住其 display */
.pg-exit{display:none}
body.pg-full .pg-exit{display:inline-flex}
body.pg-full .tts-bar{z-index:7100}
@media(max-width:900px){
  /* 窄屏全屏：单列改双行（上图下文），两块各自内部滚动（.ph-wrap / .explain-panel 本就 overflow:auto） */
  body.pg-full .pr-body{grid-template-rows:minmax(0,1.15fr) minmax(0,1fr)}
}
.pr-body{display:grid;grid-template-columns:1fr 420px;gap:0;flex:1;min-height:0}
@media(max-width:900px){.pr-body{grid-template-columns:1fr}}
/* 左舞台：浅色（原 #3a3a3a 深灰「黑框」已按反馈去除）。
   页图 1:1 等比居中：flex + margin:auto 双向居中，max-width/max-height 只做等比收缩，
   绝不拉伸变形；.ph-stage 紧贴页图尺寸，热点框的百分比坐标因此永远对得上。 */
.ph-wrap{position:relative;overflow:auto;background:#eef1f6;padding:16px;display:flex}
.ph-stage{position:relative;margin:auto;max-width:100%;flex:0 0 auto;font-size:0;line-height:0}
.ph-img{max-width:100%;width:auto;height:auto;display:block;
  box-shadow:0 6px 22px rgba(31,42,68,.12);border-radius:6px;background:#fff}
/* 页图「一屏放得下」：只用 flex 链等比收缩（.ph-stage 撑满可用高度 + 页图 max-height:100%），
   不写 calc(100vh - Npx) 这种魔法数字——顶栏高度随导航条目数与换行变化（实测 94 ~ 139px），
   硬编码必然在某个宽度/某套导航下把页图挤出视口。
   不加媒体查询：窄屏单列（含窄屏全屏）同样是确定高度的滚动区，规则一样成立。
   作用域限定 .page-reader:not(.mouth)——.mouth 动嘴巴页图是 width:100% 长条，
   绝不能加 max-height（会把图片压成非等比）。 */
.page-reader:not(.mouth) .ph-stage{height:100%;max-height:100%;width:fit-content;max-width:100%;display:flex;align-items:center;justify-content:center}
.page-reader:not(.mouth) .ph-img{max-height:100%;max-width:100%}
.hotspot{position:absolute;background:rgba(66,133,244,.05);border:1.5px dashed rgba(66,133,244,.45);border-radius:4px;cursor:pointer;transition:.12s}
.hotspot:hover{background:rgba(66,133,244,.16);border:1.5px solid rgba(25,103,210,.85)}
.hotspot:active{background:rgba(25,103,210,.28)}
/* 点读选中：当前句的**所有**印刷行框一起点亮（一句跨多行时整句高亮）。
   2026-09-29 按用户反馈去掉旧版「box-shadow 4000px 整页蒙纱」——蒙纱会把
   整页压成灰色影响阅读；现在页面保持原亮度，选中句改用「琥珀底 + 深橙
   实线描边 + 贴框光晕」突出：
   - .hl-on：同句所有行框统一橙色描边（跨行整句都有线）
   - .hl-focus：仅第一块框再叠加近距离橙色光晕，在多行框中锚定视线起点。
   光晕只贴框不扩散全页，纯视觉不拦截点击。 */
.hotspot.hl-on{background:rgba(255,183,77,.20);border:2.5px solid #ff6d00;border-radius:6px;z-index:5}
.hotspot.hl-on.hl-focus{
  box-shadow:0 0 0 3px rgba(255,109,0,.28), 0 0 14px rgba(255,109,0,.40)}
.explain-panel{background:#fff;border-left:1px solid var(--line);overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
/* Point-read explanation drawer: replaces the old centered modal on sentence clicks. */
#explainMask{justify-content:flex-end;align-items:stretch;padding:0;background:rgba(20,30,55,.28);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,visibility .22s}
#explainMask.hidden{display:flex!important;opacity:0;visibility:hidden;pointer-events:none}
#explainMask:not(.hidden){opacity:1;visibility:visible;pointer-events:auto}
#explainMask.closing{opacity:0;visibility:visible;pointer-events:none}
#explainMask.closing #explainPanel{transform:translateX(102%)}
#explainPanel{width:min(480px,100%);max-width:none;max-height:none;height:100%;border-radius:0;overflow:auto;box-shadow:-16px 0 40px rgba(15,23,42,.2);transform:translateX(102%);transition:transform .24s ease}
#explainMask:not(.hidden) #explainPanel{transform:translateX(0)}
#explainPanel .explain-head{position:sticky;top:0;z-index:2;background:linear-gradient(120deg,#1e5a96,#2f6bff);border-radius:0;padding:12px 16px}
#explainPanel .explain-body{padding:14px 18px 28px}
#explainPanel .explain-body h4:has(.ex-more){display:block}
#explainPanel .explain-body .intent{font-size:13px;line-height:1.7}
.explain-body .ex-translate-hint{font-size:12px;color:var(--ink2);background:#f3eee5;border-radius:7px;padding:6px 9px;margin-top:6px}
.explain-body .ex-ipa{font-size:13px;color:#8a6d1a;font-family:Georgia,serif;margin-top:-6px}
.explain-body .ex-zh-say{margin-left:auto;border:1px solid var(--line);border-radius:999px;background:#fff;padding:3px 9px;font-size:11px;cursor:pointer;color:var(--cta)}
.explain-body .ex-sub{background:#f3eee5;border:1px dashed var(--line);border-radius:10px;padding:10px;margin:8px 0}
.explain-body .ex-chunks{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px}
.explain-body .ex-chunk{border:1px solid #b5d4f4;background:#e6f1fb;border-radius:8px;padding:6px 8px;min-width:0;cursor:pointer}
.explain-body .ex-chunk:hover{border-color:#185fa5}
.explain-body .ex-chunk-en{display:block;font-weight:800;color:#185fa5}
.explain-body .ex-chunk-pos{display:block;font-size:11px;color:var(--ink2);white-space:nowrap}
.explain-body .ex-chunk-zh{display:block;font-size:12px;color:var(--ink2)}
.explain-body .ex-chunk-role{display:inline-block;margin-top:4px;border-radius:4px;background:#1e5a96;color:#fff;padding:0 5px;font-size:10px}
.explain-body .ex-sub-sentence{font-size:16px;font-weight:800;line-height:1.7}
.explain-body .ex-slot{color:#d85a30;border-bottom:2px solid #d85a30;cursor:pointer;padding:0 2px}
.explain-body .ex-op{display:inline-block;margin:4px 4px 0 0;border:1px solid var(--line);border-radius:16px;background:#fff;padding:3px 9px;font-size:12px;cursor:pointer}
.explain-body .ex-op.on{background:#1e5a96;border-color:#1e5a96;color:#fff}
.explain-body .ex-stress{color:#185fa5;background:#e6f1fb;border-bottom:2px solid #185fa5;border-radius:3px;padding:0 2px}
.explain-body .ex-stressbox{background:#f3eee5;border-radius:9px;padding:10px 12px}
.explain-body .ex-more{width:100%;border:1px dashed var(--line);background:#fff;border-radius:9px;padding:9px;color:var(--ink2);cursor:pointer;text-align:left}
.explain-body .ex-deep{display:none;margin-top:10px}
.explain-body .ex-deep.open{display:block}
.explain-body .ex-deep-row{padding:8px 0;border-bottom:1px dashed var(--line)}
.explain-body .ex-deep-label{font-size:12px;color:var(--cta);font-weight:800}
.explain-body .ex-pitfall{margin-top:8px;background:#fcebeb;color:#791f1f;border-radius:8px;padding:9px 11px;font-size:13px}
@media(max-width:600px){#explainPanel{width:100%}#explainPanel .explain-body{padding:12px 14px 24px}}
.explain-body .ex-headword{font-size:18px;font-weight:800;line-height:1.5}
.ep-head{font-size:15px;display:flex;gap:8px;align-items:center}
.ep-tip{font-size:12px;color:var(--ink2);background:#fff7e6;border:1px solid #ffe7ba;border-radius:8px;padding:8px}
.ep-empty{font-size:13px;color:var(--ink2);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.pg-dlg{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fafbff}
.pg-dlg-t{font-weight:700;font-size:14px;color:var(--brand);margin-bottom:6px}
.pg-line{padding:8px;border-radius:8px;cursor:pointer;transition:.12s;border:1px solid transparent}
.pg-line:hover{background:#f0f5ff}
/* 当前点读句：深色蒙纱卡（参照黑色字幕卡：说话人蓝 / 英文黄 / 中文浅） */
.pg-line.sel{background:linear-gradient(135deg,rgba(27,39,69,.94),rgba(17,26,48,.90));border-color:#33456b;
  box-shadow:0 8px 20px rgba(15,23,42,.28)}
.pg-line.sel .pg-sp{background:#3b82f6}
.pg-line.sel .pg-en{color:#ffd76b}
.pg-line.sel .pg-zh{color:#e8eefb}
.pg-line.sel .wd:hover{background:rgba(255,215,107,.22)}
.pg-sp{display:inline-block;font-size:11px;color:#fff;background:#2f80ed;padding:1px 7px;border-radius:8px;margin-right:6px}
.pg-en{font-size:15px;color:var(--ink);line-height:1.5}
.pg-zh{display:block;font-size:12.5px;color:var(--ink2);margin-top:2px}
.bk-inline{margin-top:8px;background:#f8fafc;border:1px dashed var(--line);border-radius:8px;padding:8px}
.bk-inline .bk-row{display:grid;grid-template-columns:90px 70px 60px 1fr;gap:6px;font-size:12px;padding:3px 0;border-bottom:1px solid #eef}
.bk-inline .bk-row:last-child{border-bottom:none}
.bk-inline .bk-w{font-weight:700;color:var(--brand)}
.bk-inline .bk-p{color:#888}
.bk-inline .bk-m{color:var(--ink)}
.bk-inline .bk-row.unknown .bk-m{color:#bbb}
.pg-note{background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:10px;padding:10px 12px}
.pg-note-t{font-weight:700;font-size:14px;margin:4px 0;color:var(--ink)}
.pg-note-i{font-size:13px;color:var(--ink2);line-height:1.6}
/* 即指即译浮层 */
.word-tip{position:fixed;z-index:9999;display:none;max-width:240px;background:#222;color:#fff;font-size:12.5px;line-height:1.5;padding:7px 10px;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.3);pointer-events:none}

/* ===== 学段板块（小学/初中/高中） ===== */
.stage-sec{margin:24px 0}
.stage-head{display:flex;align-items:center;gap:16px;margin-bottom:14px;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:14px 20px;box-shadow:var(--shadow)}
.stage-badge{font-size:20px;font-weight:900;color:#fff;border-radius:12px;padding:8px 18px;letter-spacing:3px;
  background:var(--brand);flex-shrink:0}
.stage-badge.stage-primary{background:linear-gradient(135deg,#ff9a3c,#ff6b6b)}
.stage-badge.stage-middle{background:linear-gradient(135deg,#2f6bff,#5b8bff)}
.stage-badge.stage-high{background:linear-gradient(135deg,#7c4dff,#b388ff)}
/* 版本学段徽章：译林版=青绿族、沪教牛津版=琥珀族（区别于人教版三档配色） */
.stage-badge.stage-yl-primary{background:linear-gradient(135deg,#12b886,#38d9a9)}
.stage-badge.stage-yl-middle{background:linear-gradient(135deg,#0ca678,#20c997)}
.stage-badge.stage-yl-high{background:linear-gradient(135deg,#099268,#12b886)}
.stage-badge.stage-hj-primary{background:linear-gradient(135deg,#f08c00,#ffd43b)}
.stage-badge.stage-hj-middle{background:linear-gradient(135deg,#e8590c,#ff922b)}
.stage-badge.stage-hj-high{background:linear-gradient(135deg,#d9480f,#f76707)}
.stage-badge.stage-hjw-primary{background:linear-gradient(135deg,#0c8599,#22b8cf)}
.stage-badge.stage-hjw-middle{background:linear-gradient(135deg,#0b7285,#15aabf)}
/* 版本学段徽章：外研版=红玫族（外研社红，区别于人教版 / 译林 / 沪教配色） */
.stage-badge.stage-wy-primary{background:linear-gradient(135deg,#e03131,#ff8787)}
.stage-badge.stage-wy-middle{background:linear-gradient(135deg,#c2255c,#f783ac)}
.stage-badge.stage-wy-high{background:linear-gradient(135deg,#9c36b5,#da77f2)}
.stage-badge.stage-lk-primary{background:linear-gradient(135deg,#0d9488,#2dd4bf)}
.stage-badge.stage-zd-primary{background:linear-gradient(135deg,#5f3dc4,#9775fa)}
.stage-badge.stage-zd-high{background:linear-gradient(135deg,#364fc7,#748ffc)}
.stage-info{flex:1;min-width:0}
.stage-name{font-size:17px;font-weight:800}
.stage-desc{font-size:12.5px;color:var(--ink2);margin-top:2px}
.stage-prog{font-size:13px;color:var(--good);font-weight:800;background:#e7f8ee;padding:5px 14px;border-radius:14px;white-space:nowrap}
.book-card .bc-cover{width:100%;height:auto;aspect-ratio:707/1000;object-fit:cover;border-radius:10px;margin:2px 0 10px;background:#fff;display:block}
.bc-link{display:inline-block;margin-top:9px;font-size:12.5px;color:var(--brand);text-decoration:none;font-weight:700}
.bc-link:hover{text-decoration:underline}
.st-link{background:#fff4e6;color:#d97706}
.book-card.linked{cursor:default}
.book-card.linked:hover{transform:translateY(-3px);border-color:var(--brand)}

/* ===== 学习驾驶舱（首页 · 参照标杆站：米白底 / 黑标题 / 黄色 marker） ===== */
/* 2026-10-03：首屏顶部留白过大（main padding-top 22 + 本块 40 = 62px）→ 正文整体上移，
   只留一点缝隙。main 的顶距只在首页收紧（见下方 main:has(> .home-hero) 规则），其它页面不变。 */
main:has(> .home-hero){padding-top:10px}
.home-hero{background:transparent;border:none;border-radius:0;padding:6px 4px 6px;
  box-shadow:none;display:grid;grid-template-columns:1.14fr .86fr;gap:36px;align-items:start;position:relative;overflow:visible}
/* hero 左栏宣传横幅图：assets/img/home-banner.jpg（16:9，含品牌名+标语+男孩点读插画）
   —— 2026-10-01 起取代原「翻开课本」装饰小插画 hero-book.png；改用整幅图作左栏主视觉。
   2026-10-01 v2：换新素材并把圆角/投影对齐 #/ear 磨耳朵宣传位（.eh-img：radius 12 +
   0 6px 20px rgba(31,42,68,.10)），保持等比 16:9。 */
.hero-copy .hero-banner{display:block;width:100%;height:auto;border-radius:12px;
  box-shadow:0 6px 20px rgba(31,42,68,.10);background:#fbf8f2;margin:0 0 18px}
/* hero 左栏「整块底图卡」（2026-10-01）：把 AI 扩图底版 assets/img/hero-copy-bg.jpg
   （1400×958，来源见 app.js 的 HERO_BG_VER 注释）作底图，铺满
   「banner 顶 → 统计底」整块；说明行 + 4 项统计浮在图上（真实 DOM 文字，统计仍实时）。
   背景用 100% 100% 拉伸以贴合元素的实际高度；原 <img class="hero-banner"> 保留在
   DOM 里撑出横幅高度、但视觉隐藏（占位不动版式）。≤900px 单列时回退普通横幅图。
   2026-10-03（公告条并入卡片）：.hero-card 退化为**纯外框**（圆角 + 投影 + 裁切），
   底图下沉到内层 .hero-visual —— .hero-visual 的高度与改版前的 .hero-card 完全一致，
   故底图拉伸比例零变化（不会因多出公告条那 56px 而把男孩压高）。≤900px 同样回退。 */
.hero-card{position:relative;border-radius:12px;box-shadow:0 6px 20px rgba(31,42,68,.10);
  overflow:hidden;background:#fbf8f2}
.hero-visual{position:relative;background-position:center -56.7px;background-color:#f6f5ee;background-size:100% 100%;background-repeat:no-repeat}
/* 2026-10-03（用户需求「红框空白用 AI 扩图填充」）：卡片底部延伸带 .hero-ext。
   实测右栏 .hero-demo 底边比左栏卡片低 80.5px（≥1280px 视口），左栏卡片没填满，
   卡片下方露出一条页面底色空白带（就是用户红框那块）。此带贴在 .hero-visual 之下、
   .hero-card 之内 —— 吃卡片圆角与 overflow:hidden 裁切，看起来就是卡片的一部分。
   高度 80px：bg 图 hero-ext.jpg 为 1400×180 = 7.778:1，元素 622.4×80 = 7.78:1，
   **完全同比例** ⇒ background-size:100% 100% 零裁切零变形（不需要 object-fit 技巧）。
   ⚠ hero-copy-bg.jpg 与 .hero-visual 的几何/背景定位/上移 1.5cm 全部原样不动 ——
     本次只做「向下加一条」，上方 481.9px 渲染结果与改动前逐像素一致（零回归）。
   ≤1100px 时左栏本就比右栏高（实测 1100px 左栏高 93.8px），此时隐藏避免过长。 */
.hero-ext{height:80px;background-position:center;background-size:100% 100%;background-repeat:no-repeat}
@media(max-width:1100px){.hero-ext{display:none}}
.hero-card .hero-banner{visibility:hidden}
/* 公告条并入卡片内部第一行（2026-10-03，需求：公告从 hero 卡片外移到卡片内顶部）：
   贴着卡片上沿通栏铺满、只保留一条下边分隔线；自身的圆角/边框/投影/外边距全部去掉，
   由卡片外框统一裁切（overflow:hidden + border-radius:12px 出上下圆角）。
   特异度 .hero-card > .hj-ann (0,2,0) 高于基础 .hj-ann (0,1,0) 与 ≤900px 的 .hj-ann，
   故移动端那条 margin-bottom:14px 也会被这里的 margin:0 覆盖。 */
.hero-card > .hj-ann{margin:0;border:0;border-bottom:1px solid var(--line);
  border-radius:0;box-shadow:none;background:var(--panel)}
@media(max-width:900px){
  .hero-card{box-shadow:none}
  .hero-visual{background-image:none !important}
  .hero-card .hero-banner{visibility:visible}
}
.hero-copy{margin-top:56.7px}
.home-hero>*:not(.hero-book-bg){position:relative;z-index:1}
.home-hero::after{content:none}
/* hero 顶部标语：思源宋体 Heavy（SHS Heavy 子集，同参考图字形），金色加粗 */
.hero-tagline{--hj-fit-k:1;
  font-family:"SHS Heavy","Source Han Serif SC","Noto Serif SC","Songti SC","STSong","SimSun","宋体",serif;
  font-size:calc(38px * var(--hj-fit-k));font-weight:900;letter-spacing:calc(2px * var(--hj-fit-k));line-height:1.4;
  background:linear-gradient(100deg,#8a6d1a 0%,#d9b84a 40%,#b8912e 70%,#9a7b1c 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:#9a7b1c;margin:0 0 16px;white-space:nowrap}
/* 「AI」：顶栏 logo「AI英语魔法师」同款衬线体（明体/Songti 风格），相对正文放大 50% */
.hero-ai{font-family:"Songti SC","STSong","SimSun","宋体","Times New Roman",Georgia,serif;
  font-size:1.5em;font-weight:700;letter-spacing:0;font-style:normal}
.hero-tagline .hero-ai{background:none;-webkit-text-fill-color:currentColor;color:inherit;
  font-family:inherit;font-size:1.28em}
.hh-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:13px;font-weight:700;color:var(--ink2);box-shadow:0 2px 10px rgba(31,42,68,.06)}
/* 主标题：马善政毛笔楷书（assets/fonts 自托管，OFL 开源），参照用户提供的书法 banner 素材 */
.hero-copy h1{font-family:"Ma Shan Zheng","Kaiti SC","STKaiti","KaiTi","楷体","Noto Serif SC",serif;
  font-size:56px;font-weight:400;line-height:1.28;letter-spacing:2px;color:var(--ink);margin:14px 0 10px}
.hero-copy h1 .hero-ai{font-size:1.5em;color:inherit}
.hero-feats{font-size:17px;font-weight:700;letter-spacing:1px;color:var(--ink);margin:0 0 18px}
.hero-feats i{font-style:normal;font-weight:400;color:#b9b2a6;margin:0 12px}
.gal-head h2 em,.about-copy h2 em{font-style:normal;padding:0 6px;border-radius:6px;
  background:linear-gradient(transparent 60%,#ffd76b 60%,#ffd76b 94%,transparent 94%)}
.hero-copy h1 em{font-style:normal;color:var(--cta);padding:0;border-radius:0;background:none}
.hero-copy p{margin:0 0 22px;font-size:15px;color:var(--ink2);max-width:520px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-main{background:var(--cta);color:#fff;font-size:14.5px;font-weight:800;padding:12px 24px;border-radius:12px;box-shadow:0 8px 20px rgba(30,90,150,.30)}
.hero-main:hover{background:#17497c;transform:translateY(-1px)}
.hero-line{background:#fff;border:1px solid var(--line);color:var(--ink);font-size:14px;font-weight:700;padding:12px 20px;border-radius:12px;box-shadow:0 2px 8px rgba(31,42,68,.05)}
.hero-line:hover{border-color:var(--cta);color:var(--cta)}
.hero-foot{margin-top:18px;font-size:12px;color:#9a948a;letter-spacing:.4px;text-align:center;padding-left:0}
.hh-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:30px}
.stat{background:transparent;border:none;box-shadow:none;padding:0;text-align:center}
.stat b{display:block;font-size:24px;font-weight:900;color:var(--cta);background:none;-webkit-text-fill-color:currentColor}
.stat span{font-size:12px;color:var(--ink2)}
/* ============ 首页公告滚动条 .hj-ann（红框位 · 置顶固定 + 其余竖向滚动 · 单行不换行 · 溢出左右滚动 · 最多 10 条） ============
   尺寸：@1920 约 649×56（= hero-copy 整宽 · 高 56 ≈ 2 行）。
   左侧竖排「📢 公告/NEWS」标签；右侧：
     · 「置顶」主公告固定在最上一行，不参与滚动（超长仍本行左右往返滚动）；
     · 其余公告在下方**单行窗口**内竖向向上轮播（一次只露 1 条；超长省略号收尾，不左右滚动）。
   内容由 app.js renderHome → hjAnnMount() 注入（拉 /hjapi/announcements，失败回退内置 3 条）。 */
.hj-ann{display:flex;align-items:stretch;height:56px;margin:0 0 16px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 4px 14px rgba(31,42,68,.06);overflow:hidden}
.hj-ann-tag{flex:0 0 84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:linear-gradient(160deg,#fff5f6,#ffe9ee);color:#c2365a;border-right:1px dashed var(--line)}
.hj-ann-tag .hj-ann-ic{font-size:15px;line-height:1}
.hj-ann-tag b{font-size:14px;font-weight:900;letter-spacing:1px}
.hj-ann-tag small{font-size:9px;font-weight:700;letter-spacing:1.5px;color:#d98aa2}
.hj-ann-view{flex:1 1 auto;min-width:0;position:relative;overflow:hidden;background:#fff;
  display:flex;flex-direction:column}
.hj-ann-view::after{content:'';position:absolute;top:0;right:0;width:30px;height:100%;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff)}
.hj-ann-scroll{flex:1 1 auto;position:relative;overflow:hidden}
.hj-ann-list{position:absolute;top:0;left:0;width:100%;display:flex;flex-direction:column;
  transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform}
.hj-ann-row{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:0 16px;overflow:hidden;box-sizing:border-box}
.hj-ann-row + .hj-ann-row{border-top:1px dashed #e9eff7}
.hj-ann-pinrow{flex:0 0 auto;background:#f1f7fd;border-bottom:1px solid #dbe8f7}
.hj-ann-row.is-pin{background:#f1f7fd}
.hj-ann-pin{flex:0 0 auto;font-size:10px;font-weight:900;color:#fff;background:#1e5a96;
  border-radius:5px;padding:2px 6px;letter-spacing:.5px}
.hj-ann-dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#4a90d9;opacity:.65}
/* 非置顶公告行文字前的 HOT / NEW 角标（2026-10-03）：替代原小圆点 .hj-ann-dot。
   HOT = 橙红渐变（热/重要），NEW = 品牌蓝渐变（最新）；尺寸/圆角与「置顶」徽标一致，
   保证同一行内视觉对齐。窄屏下字号微缩，避免挤占正文宽度。 */
.hj-ann-badge{flex:0 0 auto;font-size:10px;font-weight:900;letter-spacing:.5px;
  border-radius:5px;padding:2px 6px;line-height:1.35;color:#fff;white-space:nowrap}
.hj-ann-badge.is-hot{background:linear-gradient(135deg,#ff8a3d,#f2622a)}
.hj-ann-badge.is-new{background:linear-gradient(135deg,#2f7fd4,#1e5a96)}
/* 公告文字外观：字号 / 字体 / 字重 / 字间距 / 颜色 由后台「公告管理 · 字体外观」维护，
   通过 #hjAnnBar 上的 CSS 变量覆盖（--ann-fs / --ann-ff / --ann-fw / --ann-ls / --ann-color / --ann-pinc）。
   默认字重 400（常规，不加粗）。 */
.hj-ann-t{display:inline-block;white-space:nowrap;line-height:1;
  font-size:var(--ann-fs,13px);font-family:var(--ann-ff,inherit);font-weight:var(--ann-fw,400);
  letter-spacing:var(--ann-ls,0);color:var(--ann-color,var(--ink))}
.hj-ann-row.is-pin .hj-ann-t{color:var(--ann-pinc,#1e5a96)}
/* 循环槽位（非置顶）：单行省略号收尾，不参与左右滚动（只做竖向轮播） */
.hj-ann-list .hj-ann-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.hj-ann-row.scroll .hj-ann-t{animation:hjAnnRow linear infinite}
@keyframes hjAnnRow{
  0%,7%{transform:translateX(0)}
  43%,57%{transform:translateX(calc(-1 * var(--d,0px)))}
  93%,100%{transform:translateX(0)}
}
.hj-ann:hover .hj-ann-row.scroll .hj-ann-t{animation-play-state:paused}
@media(max-width:900px){
  .hj-ann{height:50px;margin-bottom:14px}
  .hj-ann-tag{flex-basis:72px}
  .hj-ann-t{font-size:calc(var(--ann-fs,13px) - 1px)}
  .hj-ann-badge{font-size:9px;padding:2px 5px;letter-spacing:.3px}
  /* 窄屏·置顶公告行修复：app.js fixOverflow(pinRow) 把 .scroll 落在外层 .hj-ann-pinrow 上，
     而跑马灯动画选择器是 .hj-ann-row.scroll .hj-ann-t → 置顶行此前永不滚动，长文本被
     .hj-ann-row{overflow:hidden} 永久裁切（≤480px 实测最多被裁 191px）。
     补一条匹配 .hj-ann-pinrow.scroll 的动画，使置顶行与其余公告行一样左右往返滚动。
     ⚠ 仅移动端生效：≥900px 时置顶文本不溢出、不会加 .scroll，故桌面端零影响。 */
  .hj-ann-pinrow.scroll .hj-ann-t{animation:hjAnnRow linear infinite}
}
.hero-demo{position:relative;background:#fff;border-radius:24px;padding:22px 22px 16px;
  box-shadow:0 24px 60px rgba(31,42,68,.13);border:1px solid var(--line)}
.demo-arrow{position:absolute;top:16px;right:18px;width:32px;height:32px;border-radius:50%;
  background:var(--cta);display:flex;align-items:center;justify-content:center;
  font-size:15px;color:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(30,90,150,.30);transition:.15s;z-index:2}
.demo-arrow:hover{transform:translate(1px,-1px);background:#17497c}
.demo-book{position:relative;width:100%;max-width:430px;margin:0 auto;border-radius:12px;overflow:hidden;
  box-shadow:0 10px 26px rgba(31,42,68,.14);border:1px solid var(--line);font-size:0;line-height:0;background:#fff}
.demo-book>img{width:100%;height:auto;display:block}
.demo-note{margin-top:12px;background:transparent;border-radius:0;padding:0;
  font-size:12px;color:#9a948a;text-align:center;box-shadow:none;cursor:pointer}
.demo-note b{color:var(--cta)}
/* 保留按钮：个人信息 / 正在学习页仍在使用 */
.hh-btns{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.hh-main{background:linear-gradient(135deg,#ff7a45,#ff5c33);font-size:16px;padding:11px 26px;
  box-shadow:0 6px 18px rgba(255,122,69,.35)}
.hh-main:hover{background:linear-gradient(135deg,#ff6626,#ff4d1f)}
.hh-ghost{background:#fff;border:1px solid var(--line);color:var(--ink);
  font-size:14px;padding:10px 20px;box-shadow:0 2px 8px rgba(31,42,68,.05)}
.hh-ghost:hover{border-color:var(--brand);color:var(--brand-d)}
.last-card{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:12px 18px;margin-top:18px;box-shadow:var(--shadow);cursor:pointer;transition:.15s}
.last-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.last-card img{width:44px;height:60px;object-fit:cover;border-radius:6px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.last-card .lc-info{flex:1;min-width:0}
.last-card .lc-t{font-size:13px;font-weight:800;color:var(--ink)}
.last-card .lc-n{font-size:14px;color:var(--ink2);margin-top:2px}
.last-card .lc-go{font-size:13px;color:var(--ink);font-weight:800}
.home-sec{margin-top:34px}
.hs-title{font-size:16px;font-weight:800;margin-bottom:12px;color:var(--ink)}
/* 课本馆（参照标杆站「做出来的，才算数」区 + 总目录 chips 排版） */
.gal-sec{margin-top:44px}
.gal-kicker{font-size:12.5px;font-weight:700;color:var(--ink2);letter-spacing:.5px}
.gal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
.gal-head h2,.about-copy h2{font-size:30px;font-weight:900;color:var(--ink);margin:8px 0 0;letter-spacing:.5px}
.gal-desc{max-width:400px;margin:0;font-size:13.5px;color:var(--ink2);line-height:1.8}
.gal-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:20px 0 16px}
/* 两层筛选：版本（人教版（新）/ 译林 / 沪教牛津 / 外研 / 全部版本）+ 学段（随版本切换） */
.gal-filters{display:flex;flex-direction:column;gap:10px;flex:1;min-width:0}
.gal-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gal-flabel{font-size:12.5px;font-weight:800;color:var(--ink2);letter-spacing:.5px;flex-shrink:0;min-width:30px}
.gal-tabs{display:flex;gap:8px;flex-wrap:wrap}
.gal-tabs .gt{cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink2);
  font-size:13px;font-weight:700;padding:7px 16px;border-radius:20px;transition:.15s}
.gal-tabs .gt:hover{border-color:var(--ink2);color:var(--ink)}
.gal-tabs .gt.on{background:var(--ink);border-color:var(--ink);color:#fff}
.gal-count{font-size:13px;color:var(--ink2);text-decoration:none;font-weight:700;white-space:nowrap}
.gal-count:hover{color:var(--ink)}
/* 首页课本馆栅格：flex 换行 —— 末行不满整行时（如 11 张学段卡 = 3/3/3/2，
   最后两张是「五四学制」）自动均分整行宽度，不再右侧留空；
   同一行内各卡仍等宽（flex-grow 平分剩余空间），与原先 3 列观感一致。 */
.stage-grid{display:flex;flex-wrap:wrap;gap:14px}
.stage-entry{flex:1 1 280px;min-width:0;display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:18px 20px;box-shadow:var(--shadow);cursor:pointer;transition:.15s}
.stage-entry:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:0 12px 30px rgba(31,42,68,.14)}
.stage-entry .stage-badge{font-size:15px;padding:7px 14px}
.se-info{flex:1;min-width:0}
.se-name{font-size:15px;font-weight:800}
.se-desc{font-size:12px;color:var(--ink2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.se-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.se-prog{font-size:12.5px;font-weight:800;color:var(--good);background:#e7f8ee;padding:3px 10px;border-radius:12px;white-space:nowrap}
.se-go{font-size:12.5px;font-weight:800;color:var(--ink2)}
.stage-entry:hover .se-go{color:var(--ink)}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.feat-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;
  box-shadow:var(--shadow);cursor:pointer;transition:.15s}
.feat-card:hover{transform:translateY(-3px);border-color:var(--ink)}
.feat-card .fc-ico{font-size:26px;margin-bottom:8px}
.feat-card b{font-size:15px}
.feat-card p{margin:6px 0 0;font-size:12.5px;color:var(--ink2);line-height:1.7}

/* ===== 常见问题（FAQ 手风琴 · 参照标杆站） ===== */
.faq-sec{background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:26px 30px;box-shadow:var(--shadow)}
.faq-sub{font-size:13px;color:var(--ink2);margin:-6px 0 14px}
.faq-item{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden;
  background:#fdfbf7;transition:.2s}
.faq-item:hover{border-color:#d8cdb9}
.faq-item.open{border-color:var(--cta);box-shadow:0 4px 14px rgba(30,90,150,.08)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 18px;cursor:pointer;font-size:15px;font-weight:800;color:var(--ink)}
.faq-item.open .faq-q{color:var(--cta)}
.faq-q i{font-style:normal;font-size:11px;color:var(--ink2);transition:transform .25s;flex-shrink:0}
.faq-item.open .faq-q i{transform:rotate(180deg);color:var(--cta)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;
  padding:0 18px;font-size:13.5px;color:var(--ink2);line-height:1.9}
.faq-item.open .faq-a{max-height:480px;padding:0 18px 16px}

/* ===== 个人信息 / 正在学习 ===== */
.me-wrap{display:grid;grid-template-columns:1fr;gap:22px;align-items:start;max-width:920px;margin:0 auto}
.me-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:32px 38px;box-shadow:var(--shadow)}
.me-title{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:.2px}
.me-sub{font-size:14.5px;color:var(--ink2);margin:8px 0 20px;line-height:1.75}
.pf-row{display:flex;align-items:flex-start;gap:16px;padding:13px 0;border-bottom:1px dashed var(--line)}
.pf-row label{width:70px;flex-shrink:0;font-size:15px;font-weight:700;color:var(--ink);padding-top:9px}
.pf-input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;
  background:#fdfbf7;color:var(--ink);font-family:inherit}
.pf-input:focus{outline:none;border-color:var(--cta);background:#fff}
.pf-grades{display:flex;flex-wrap:wrap;gap:8px;flex:1}
.pf-grade{cursor:pointer;user-select:none;font-size:13px;padding:6px 12px;border-radius:16px;
  border:1px solid var(--line);background:#fdfbf7;color:var(--ink2);transition:.15s}
.pf-grade:hover{border-color:var(--cta);color:var(--cta)}
.pf-grade.on{background:var(--cta);color:#fff;border-color:var(--cta);font-weight:700}
.pf-msg{font-size:12.5px;color:var(--ink2);margin-top:12px;background:var(--soft);border-radius:10px;padding:8px 12px}
.pf-msg.ok{color:#166534;background:#e7f8ee}
.pf-msg.err{color:#b91c1c;background:#fdecec}
.match-row{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:16px;
  padding:14px 18px;margin-bottom:12px;background:#fdfbf7;cursor:pointer;transition:.15s}
.match-row:hover{border-color:var(--cta);transform:translateY(-2px)}
.match-row img{width:48px;height:66px;object-fit:cover;border-radius:6px;background:#fff}
.match-row .mr-info{flex:1;min-width:0}
.match-row .mr-t{font-size:17px;font-weight:800;color:var(--ink)}
.match-row .mr-d{font-size:13px;color:var(--ink2);margin-top:3px}
.match-row .mr-go{font-size:14px;font-weight:800;color:var(--cta);white-space:nowrap}
.me-empty{font-size:14.5px;color:var(--ink2);background:var(--soft);border-radius:14px;padding:18px;line-height:1.85}
.me-empty a{color:var(--cta);font-weight:700;text-decoration:none}
@media(max-width:760px){
  .hero-copy h1{font-size:57px}
  .hero-tagline{font-size:calc(min(25px,6.2vw) * var(--hj-fit-k));letter-spacing:calc(1.5px * var(--hj-fit-k))}
  .hero-copy .hero-banner{border-radius:12px;margin-bottom:14px}
  .hero-feats{font-size:14px}
  .hero-feats i{margin:0 7px}
  .hh-stats{grid-template-columns:repeat(2,1fr)}
}

/* ===== 首页 hero 演示：热点与字幕条（demo-book 样式已并入首页区） ===== */
.demo-hs{position:absolute;background:rgba(255,215,107,.12);border:1.5px dashed rgba(255,171,64,.65);
  border-radius:4px;cursor:pointer;transition:.12s;padding:0}
.demo-hs:hover{background:rgba(255,171,64,.28);border:1.5px solid #ff7a45}
.demo-hs.on{background:rgba(255,122,69,.3);border:1.5px solid #ff7a45;outline:2px solid rgba(255,122,69,.4)}
.demo-cap{position:absolute;left:0;right:0;bottom:0;background:rgba(20,30,55,.88);backdrop-filter:blur(4px);
  padding:10px 14px;display:flex;flex-direction:column;gap:2px;min-height:52px;justify-content:center;font-size:14px;line-height:1.5}
.demo-cap .dc-tip{color:#cfd8ea;font-size:12.5px}
.demo-cap .dc-sp{color:#8fb3ff;font-weight:700;margin-right:8px}
.demo-cap .dc-en{color:#ffd76b;font-weight:700}
.demo-cap .dc-zh{color:#e8eefb;font-size:12.5px}

/* ===== 首页底部：关于 + 引导卡（参照标杆站底部区） ===== */
.about-sec{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;
  margin-top:44px;padding:10px 4px 6px}
.about-copy h2{line-height:1.3}
.about-copy p{font-size:13.5px;color:var(--ink2);line-height:1.9;margin:14px 0 18px;max-width:460px}
.about-link{display:inline-block;font-size:13.5px;font-weight:800;color:var(--ink);text-decoration:none;
  border-bottom:2px solid #ffd76b;padding-bottom:2px;transition:.15s}
.about-link:hover{border-bottom-color:var(--ink)}
.about-card{background:#f6eedb;border:1px solid #ece1c6;border-radius:20px;padding:24px 26px;box-shadow:var(--shadow)}
.ac-kicker{font-size:12px;font-weight:700;color:#8a7434;margin-bottom:10px}
.ac-title{font-size:20px;font-weight:900;color:var(--ink);margin-bottom:14px}
.ac-rows{display:flex;flex-direction:column}
.ac-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 2px;
  border-bottom:1px solid #e7dcbd;cursor:pointer;transition:.15s}
.ac-row:last-child{border-bottom:none}
.ac-row:hover{padding-left:8px}
.ac-row span{font-size:14px;font-weight:700;color:var(--ink)}
.ac-row i{font-style:normal;font-size:12.5px;color:#8a7434;white-space:nowrap}
.ac-dark{margin-top:14px;background:var(--ink);color:#fff;border-radius:12px;padding:13px 16px;
  font-size:13.5px;font-weight:700;cursor:pointer;text-align:center;transition:.15s}
.ac-dark:hover{background:#000}
.ac-tip{margin-top:12px;font-size:12px;color:#8a7434;text-align:center}
@media(max-width:900px){
  .home-hero{grid-template-columns:minmax(0,1fr);gap:24px;padding:8px 4px 4px}
  /* [2026-10-02] 手机端横向溢出修复：公告条 #hjAnnBar 置顶行 nowrap 会把 .hero-copy（grid 子项，
     min-width:auto）的最小内容宽撑到 ~449px > 手机视口(360~430) → 整页右溢 142~212px、公告被裁。
     轨道改 minmax(0,1fr) + 子项 min-width:0，让 hero-copy 收缩到视口宽；公告条内部由既有
     fixOverflow() 接管（超长本行左右往返滚动）。桌面端（>900px）零影响。 */
  .hero-copy,.hero-copy>*{min-width:0}
  .hj-ann,.hj-ann-view{min-width:0}
  .about-sec{grid-template-columns:1fr;gap:22px}
}

/* ===== 点读翻阅（点读讲解 × 全册翻阅 合并页，2026-09-29） =====
   左栏：整本课本连续翻阅 + 当前页热点框（sticky 跟随滚动）；
   右栏：全册点读文本按单元折叠，点句子跳左栏对应页。 */
.pr2{padding-bottom:76px}                     /* 避让底部悬浮 ttsBar（同原 .flip-wrap） */
.pr2-body{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:16px;align-items:start}
.pr2-left{position:sticky;top:78px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:12px;box-shadow:var(--shadow)}
/* 合并页 = 「大图阅读」场景：让出横向空间给课本 —— 侧栏单元列表收起
   （单元导航由右栏全册折叠块承担），站点主容器放宽，课本按原图尺寸 1:1 呈现。 */
body.duo main{max-width:min(100vw - 24px, 1920px)}
body.duo .reader{grid-template-columns:1fr}
body.duo .side{display:none}
.pr2-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;font-size:13px}
.pr2-top .back{color:var(--brand);text-decoration:none;font-weight:700;font-size:13px}
.pr2-top .pr2-crumb{color:var(--ink2)}
/* 舞台区：课本按原尺寸显示，高于可视区时在这里纵向滚动（翻页条始终留在视野内） */
.pr2-stagewrap{text-align:center;max-height:calc(100vh - 208px);overflow:auto;overscroll-behavior:contain}
.pr2-page{position:relative;display:inline-block;max-width:100%;line-height:0;
  border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
/* 原尺寸优先：不再按视口高度压缩（70vh 曾把 835×1180 的页压到 376×531，只剩 45%）；
   仅在容器宽度不足时才等比缩到容器宽。 */
.pr2-page img{display:block;max-width:100%;max-height:none;width:auto;height:auto}
/* 热点容器：盖在图上但不吃点击（pointer-events:none），只有框本身可点；
   z-index 高于 .flip-zone(2)，点框=朗读、点框外空白=翻页 */
.pr2-hot{position:absolute;inset:0;z-index:3;line-height:0;pointer-events:none}
.pr2-hot .hotspot{pointer-events:auto}
.pr2-bar{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:10px}
.pr2-num{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.pr2-jump{font-size:13px;color:var(--ink2);white-space:nowrap;display:flex;align-items:center;gap:6px}
.pr2-jump input{width:68px;padding:5px 7px;border:1px solid var(--line);border-radius:8px;text-align:center;font-family:inherit}
.pr2-hint{text-align:center;color:var(--ink2);font-size:12px;margin-top:8px}
.pr2-right{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;min-width:0}
.pr2-tip{color:var(--ink2);font-size:12.5px;background:var(--soft);border-radius:10px;
  padding:8px 12px;margin:0 0 12px;line-height:1.7}
.pr2-list{padding-right:2px}
/* 折叠块：块表复用 flipBlocks()（单元区间 + 封面/附录 gap 块） */
.pu-block{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:10px;overflow:hidden}
.pu-head{display:flex;gap:10px;align-items:center;padding:10px 12px;cursor:pointer;font-size:13.5px;transition:background .15s}
.pu-head:hover{background:#f7f9fc}
.pu-arrow{color:var(--brand);width:14px;flex-shrink:0}
.pu-title{font-weight:700;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pu-range{color:var(--ink2);font-size:12px;white-space:nowrap}
.pu-empty{padding:12px 14px;color:var(--ink2);font-size:12.5px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-top:1px dashed var(--line)}
/* 对话组：组标题即页码，点击跳页 */
.pr2-dlg{border-top:1px dashed var(--line)}
.pr2-dlg-t{padding:9px 14px 7px;font-weight:800;font-size:13px;color:var(--brand-d);cursor:pointer;
  display:flex;align-items:center;gap:8px;transition:background .12s}
.pr2-dlg-t:hover{background:#f0f5ff}
.pr2-pg{margin-left:auto;font-size:11.5px;font-weight:700;color:#fff;background:var(--brand);border-radius:10px;padding:1px 9px;flex-shrink:0}
/* 句子行：复用 .line/.sentence 基础样式，仅加选中态 */
.pr2-line{padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:0}
.pr2-line:hover{background:#f0f5ff}
.pr2-line.sel{background:linear-gradient(135deg,rgba(47,107,255,.14),rgba(47,107,255,.05));
  box-shadow:inset 3px 0 0 var(--brand)}
.pr2-line.sel .tx{color:var(--brand-d);font-weight:700}
.pr2-line .tx{font-size:15px}
/* 中等宽度屏幕：优先保证课本原尺寸，不让右栏把课本压缩成 90%/66%。
   课本与点读栏上下排列；桌面宽屏（>1800px）继续左右并排。 */
@media(max-width:1800px){
  .pr2-body{grid-template-columns:1fr}
  .pr2-left{position:static}
  .pr2-right{margin-top:2px}
}
@media(max-width:900px){
  /* 窄屏堆叠后跟随整页滚动，不再内滚，避免手机上出现嵌套滚动区 */
  .pr2-stagewrap{max-height:none;overflow:visible}
}

/* ---------- 单元学习（#/book/<id>/unit/<uid> · 点读翻阅）左舞台：
   「页图整页一屏可见」（2026-10-01，与点读页 .page-reader 同一口径）----------
   原行为：.pr2-page img{max-height:none} = 按原图尺寸铺满，A4 竖版页高约 2 倍视口，
   必须在上一个 calc(100vh - 208px) 的滚动窗口里上下拖才能看完整页 —— 不利于「整体预览」点读。
   现改为：等比缩到可用高度内、**整页完整可见、居中**，与点读页一致。
   实现照搬 §3.4 的 flex 链（**不用 calc(100vh - Npx) 魔法数字**）：
   body 定高 → main/.reader/.content/#tabBody/.pr2 逐级 flex:1，最终 .pr2-stagewrap 拿到
   确定高度 → 页图 .pr2-page/.pr2-page img 的 max-height:100% 才解析得动
   （max-height:100% 对 auto 高度的父级不生效，这是本项目踩过的坑）。
   ≥901px 生效；≤900px（手机单列长滚动）保持原行为不动。
   注意：.pr2-page 仍带 1px 边框（与改前一致），故热点百分比基准框 = 页图 + 2px——
   这与「原尺寸」时期完全相同，不是回归。 */
@media(min-width:901px){
  body:has(> main .pr2){height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
  body:has(> main .pr2) .foot{display:none}
  body:has(> main .pr2) main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:8px 16px 0;overflow:hidden}
  body:has(> main .pr2) main > .reader{flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr)}
  body:has(> main .pr2) .content{min-height:0;display:flex;flex-direction:column;padding:10px 14px 12px}
  body:has(> main .pr2) #tabBody{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  body:has(> main .pr2) .tabs{margin-bottom:6px}
  body:has(> main .pr2) .pr2{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding-bottom:54px}
  body:has(> main .pr2) .pr2-body{align-items:stretch;grid-template-rows:minmax(0,1fr);min-height:0}
  body:has(> main .pr2) .pr2-left{display:flex;flex-direction:column;min-height:0;position:static;top:auto;
    width:auto;max-width:min(100%,760px);justify-self:center}
  body:has(> main .pr2) .pr2-stagewrap{flex:1 1 auto;min-height:0;max-height:none;
    display:flex;align-items:center;justify-content:center;
    background:#eef1f6;border-radius:10px}
  body:has(> main .pr2) .pr2-page{height:100%;width:fit-content;max-width:100%;max-height:100%;margin:auto}
  body:has(> main .pr2) .pr2-page img{max-height:100%;max-width:100%;width:auto;height:auto}
  /* 翻页条/提示行不再参与高度分配之外的开销：提示行本视图隐藏（同一提示右栏 .pr2-tip 已给） */
  body:has(> main .pr2) .pr2-bar{flex:0 0 auto;margin-top:6px}
  body:has(> main .pr2) .pr2-hint{display:none}
  body:has(> main .pr2) .pr2-right{min-height:0;max-height:100%;overflow:auto}
}
@media(min-width:901px) and (max-width:1800px){
  /* 单列档：左舞台占满一屏高度（100% = 容器确定高度），右栏点读文本排在它下面、整页滚动可达 */
  body:has(> main .pr2) .pr2-body{grid-template-columns:1fr;grid-template-rows:100% auto;overflow:auto}
}

/* ================= 「点读演示」页（#/demo） ================= */
/* hero = 「双栏」：左侧宣传横幅（裁成 2.2059:1）+ 右侧文案栏，版式与尺寸完全对齐
   #/ear（磨耳朵）hero —— 图 56%/max560px、hero 高 ≈252px。banner 图里保留了品牌名与
   毛笔标语「指到哪，译到哪」，右侧用真实文字承载标题层级（kicker / h1 / 说明 / 跳转按钮）。 */
.demo-hero{display:flex;align-items:center;gap:20px;
  background:linear-gradient(120deg,#fffdf7,#f6ecdb);border:1px solid var(--line);
  border-radius:16px;padding:16px 18px;box-shadow:var(--shadow)}
.demo-hero .dh-img{display:block;flex:0 1 56%;max-width:560px;min-width:0;height:auto;border-radius:12px;
  box-shadow:0 6px 20px rgba(31,42,68,.10)}
.dh-meta{display:flex;flex-direction:column;gap:12px;justify-content:center;align-items:flex-start;
  flex:1 1 auto;min-width:0;padding:0 2px}
.dh-lead{display:flex;flex-direction:column;gap:5px;min-width:0;flex:0 1 auto}
.dh-kicker{font-size:12.5px;font-weight:800;color:var(--cta);letter-spacing:.6px}
/* 原横幅上方的标语改用真实文字承标题层级（与 .eh-h1 同款：品牌渐变下划线） */
.dh-h1{margin:0;font-size:26px;line-height:1.28;font-weight:900;color:var(--ink);letter-spacing:.5px}
.dh-h1::after{content:"";display:block;width:44px;height:4px;border-radius:3px;margin-top:9px;
  background:linear-gradient(90deg,#2f6bff,#7c4dff)}
.demo-hero p{margin:0;color:var(--ink2);font-size:14px;line-height:1.8;max-width:760px}
.demo-hero p b{color:var(--cta)}
.dh-jump{display:flex;gap:10px;flex-wrap:wrap}
.dh-jump button{cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:999px;padding:9px 17px;font-size:13.5px;font-weight:700;transition:.15s;
  box-shadow:0 2px 8px rgba(31,42,68,.05)}
.dh-jump button:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(88,120,255,.16)}

.demo-block{background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:22px 24px;margin-top:22px;box-shadow:var(--shadow)}
.db-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.db-idx{flex:0 0 auto;width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,#1e5a96,#2f6bff);
  color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:16px}
.db-ht h2{margin:0;font-size:20px;font-weight:900;color:var(--ink)}
.db-ht p{margin:4px 0 0;font-size:13px;color:var(--ink2);line-height:1.7}
.db-ht p b{color:var(--cta)}

.db-body{display:block}
/* ① 课本点读 */
.db-read{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:22px;align-items:start}
.db-book{display:flex;justify-content:center}
.db-side{background:var(--soft);border-radius:14px;padding:16px 18px;border:1px solid var(--line)}
.db-side-t{font-weight:800;font-size:15px;color:var(--ink);margin-bottom:10px}
.db-side-list{margin:0 0 14px;padding-left:18px;color:var(--ink2);font-size:13px;line-height:1.9}
.db-side-list li{margin-bottom:2px}
.db-cta{display:block;width:100%;margin-bottom:8px}
.db-side .btn{width:100%}

/* ② 单词听力演示：迷你「单元页」
   —— 刻意复用阅读器的 .reader/.side/.content/.tabs/.vt-*/.track/.ls-* 样式，
      让演示页与真实阅读器视觉完全一致；这里只补演示特有的册次下拉/加载态/移动端。 */
.dw-reader{grid-template-columns:210px minmax(0,1fr);gap:16px;align-items:start}
.dw-side{align-self:start}
.dw-side .book-name{margin-bottom:10px}
.dw-booksel-wrap{display:block;font-size:12px;color:var(--ink2);margin:0 4px 12px}
.dw-booksel{width:100%;margin-top:5px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;
  font-size:13px;color:var(--ink);background:#fff;cursor:pointer}
.dw-booksel:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(88,120,255,.12)}
.dw-main{min-height:auto;padding:16px 18px}
.dw-loading{font-size:13px;color:var(--ink2);padding:22px 6px;text-align:center}
.dw-loading::before{content:'⏳ '}
.dw-more{display:block;margin:12px 4px 2px;font-size:12.5px;color:var(--brand);
  text-decoration:none;line-height:1.6}
.dw-more:hover{text-decoration:underline;text-underline-offset:2px}

/* ③ 平行会话 + 四层讲解 */
.db-explain{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:22px;align-items:start}
.de-left{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.de-sub{font-weight:800;font-size:14px;color:var(--ink);margin-bottom:6px}
.de-scene{font-size:12.5px;color:var(--ink2);background:#fff;border:1px dashed var(--line);
  border-radius:9px;padding:7px 10px;margin-bottom:10px;line-height:1.6}
.de-lines{display:flex;flex-direction:column;gap:6px}
.de-line{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;cursor:pointer;transition:.12s}
.de-line:hover{border-color:var(--brand);transform:translateX(2px)}
.de-line.on{border-color:var(--brand);background:#eef4ff;box-shadow:inset 3px 0 0 var(--brand)}
.de-sp{display:inline-block;font-size:11.5px;font-weight:800;color:#fff;background:var(--cta);
  border-radius:6px;padding:0 7px;margin-right:7px;vertical-align:1px}
.de-en{font-size:14.5px;color:var(--ink)}
.de-zh{display:block;font-size:12px;color:var(--ink2);margin-top:2px}
.de-badge{display:inline-block;font-size:10.5px;color:#fff;background:var(--accent);border-radius:6px;
  padding:0 6px;margin-left:6px;vertical-align:1px}
.de-hint{font-size:12px;color:var(--ink2);margin-top:10px;line-height:1.6}
.de-right{background:#fff;border:1px solid var(--line);border-radius:14px;min-height:420px;
  max-height:620px;overflow:auto;position:sticky;top:74px}
.de-panel{padding:16px 18px}
.de-empty{color:var(--ink2);font-size:13.5px;padding:30px 6px;text-align:center}
.de-who{font-size:12.5px;color:var(--ink2);margin-top:2px}
.de-panel .ex-headword{font-size:19px}

@media(max-width:900px){
  .db-read,.db-explain,.dw-reader{grid-template-columns:1fr}
  .de-right{position:static;max-height:none}
  .demo-hero{display:block;padding:12px}
  .demo-hero .dh-img{width:100%;max-width:none}
  .dh-h1{font-size:21px}
  .dh-jump button{flex:1 1 auto;text-align:center;padding:10px 12px}
  .demo-block{padding:18px 15px}
  .dw-main{padding:14px 12px}
  .dw-side .vt-search,.dw-main .vt-search{font-size:16px}   /* 移动端避免 iOS 聚焦缩放 */
}

/* ================= 课本考纲单词表（#/wordlist） ================= */
.wl-hero{position:relative;text-align:left;padding:32px 30px 30px;margin:6px 0 22px;border-radius:22px;
  background:linear-gradient(160deg,#fffdf8 0%,#f6efe2 55%,#efe4d2 100%);
  border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.wl-hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(520px 200px at 50% -40px,rgba(30,90,150,.09),transparent 70%),
  radial-gradient(420px 180px at 10% 120%,rgba(220,183,90,.16),transparent 70%),
  radial-gradient(420px 180px at 92% 120%,rgba(30,90,150,.08),transparent 70%);pointer-events:none}
.wl-hero>*{position:relative}
/* 左图右文：左侧按版本区分的插画（assets/img/wl-art-<ver>.*）+ 右侧文字/徽章/KPI */
.wl-hero-grid{display:grid;grid-template-columns:minmax(0,372px) minmax(0,1fr);gap:34px;align-items:center}
.wl-hero-text{min-width:0}
.wl-hero-art{margin:0;display:flex;justify-content:center;align-items:center}
.wl-hero-art img{display:block;width:100%;max-width:372px;height:auto;border-radius:18px;
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 18px 38px rgba(30,90,150,.18),0 2px 6px rgba(31,42,68,.06)}
.wl-hero-badge{display:inline-block;font-size:13px;font-weight:800;color:var(--cta);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 16px;box-shadow:var(--shadow)}
.wl-slogan{margin:16px 0 10px;font-size:38px;letter-spacing:3px;line-height:1.28;
  font-family:"SHS Heavy","Source Han Serif SC","Noto Serif SC","Songti SC","STSong",serif;font-weight:900;
  background:linear-gradient(100deg,#8a6d1a 0%,#d9b84a 38%,#b8912e 68%,#9a7b1c 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.9))}
.wl-sub{max-width:640px;margin:0;color:var(--ink2);font-size:14.5px;line-height:1.75}
.wl-stats{display:flex;gap:14px;justify-content:flex-start;flex-wrap:wrap;margin-top:22px}
.wl-stat{min-width:112px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:12px 20px;box-shadow:var(--shadow)}
.wl-stat b{display:block;font-size:26px;font-weight:900;color:var(--brand-d);line-height:1.1}
.wl-stat span{font-size:12.5px;color:var(--ink2)}

.wl-sec{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:22px 24px;margin-bottom:20px;box-shadow:var(--shadow)}
.wl-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:16px;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.wl-sec-head h2{margin:0;font-size:19px;font-weight:900;color:var(--ink)}
.wl-legend{font-size:12.5px;color:var(--ink2);display:flex;align-items:center;gap:6px}
.wl-legend b{font-weight:700;color:var(--ink2)}
.wl-legend i{display:inline-block;width:14px;height:10px;border-radius:3px;vertical-align:-1px;background:#1e5a96}
.wl-legend i.lg-p{margin-left:10px;background:#b4cce7}
/* 学段色系小图例（组标题内）：同一学段各年级共用同色系，深=单词、浅=短语 */
.wl-key{margin-left:8px;display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;color:var(--ink2)}
.wl-key i{display:inline-block;width:10px;height:8px;border-radius:2px}
.wl-key i+i{margin-left:8px}
.wl-cnt{font-size:12.5px;color:var(--ink2)}
.wl-head-right{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
/* 下载闸门提示：仅注册会员可下载（#/wordlist / #/wb 共用） */
.hj-dl-hint{display:inline-flex;align-items:center;gap:6px;background:#fff7e8;border:1px solid #f2dcae;
  color:#a06a10;font-size:12.5px;font-weight:800;border-radius:999px;padding:4px 12px;white-space:nowrap}
.wb-memhint{display:flex;align-items:center;gap:8px;background:#fff7e8;border:1px solid #f2dcae;color:#a06a10;
  font-size:13px;font-weight:700;border-radius:12px;padding:10px 14px;margin:0 0 14px;line-height:1.5}
.wb-memhint b{color:#8a5a08;font-weight:900}

.wl-group{margin-bottom:16px}
.wl-group-head{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--ink);margin:0 0 8px}
.wl-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.wl-sum{margin-left:auto;font-size:12px;font-weight:600;color:var(--ink2)}
.wl-row{display:flex;align-items:center;gap:12px;padding:3px 0}
.wl-name{width:104px;flex:none;font-size:13px;color:var(--ink);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-track{position:relative;flex:1;height:22px;background:var(--soft);border:1px solid #ece5d8;border-radius:8px;overflow:hidden;min-width:120px}
.wl-seg{position:absolute;top:0;height:100%}
/* 柱内数字（柱段够宽才渲染；深色段用白字、浅色段用深字） */
.wl-in{position:absolute;left:8px;top:0;height:100%;line-height:22px;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.2px}
.wl-in-w{color:rgba(255,255,255,.96)}
.wl-in-p{color:#6b7c93}
.wl-val{width:46px;flex:none;font-size:13px;font-weight:800;text-align:right}
.wl-note{font-size:12px;color:var(--ink2);margin-top:12px;line-height:1.9}
.wl-note b{color:var(--ink);font-weight:800}
.wl-chipk{display:inline-flex;align-items:center;gap:4px;margin:0 4px;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:1px 8px;font-weight:700;color:var(--ink);white-space:nowrap}
.wl-chipk i{display:inline-block;width:10px;height:8px;border-radius:2px}

.wl-dlg{margin-bottom:18px}
.wl-dlg-head{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:800;color:var(--ink);
  margin-bottom:10px}
.wl-tag{display:inline-block;font-size:12.5px;font-weight:800;border-radius:8px;padding:3px 12px}
.wl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.wl-card{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:13px;
  padding:14px 15px;transition:.16s;box-shadow:0 2px 10px rgba(26,26,24,.04)}
.wl-card:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:0 10px 24px rgba(47,107,255,.14)}
.wl-card-top{display:flex;align-items:center;justify-content:space-between}
.wl-card-name{font-size:15px;font-weight:800;color:var(--ink)}
.wl-card-ico{font-size:16px;font-weight:900}
.wl-card-nums{font-size:12.5px;color:var(--ink2);margin-top:6px}
.wl-card-nums b{color:var(--brand-d);font-size:14px}
.wl-card-file{font-size:11px;color:#a99f8c;margin-top:6px;font-family:Consolas,Menlo,monospace}
/* 学段整体打包卡片：金色强调，与普通年级卡区分 */
.wl-card-pack{background:linear-gradient(135deg,#fffaf0,#fff4d9);border:1.5px solid #e8c877;
  box-shadow:0 4px 16px rgba(200,160,40,.16)}
.wl-card-pack:hover{border-color:#d9a92f;box-shadow:0 12px 26px rgba(200,160,40,.28)}
.wl-card-pack .wl-card-name{color:#8a6314}
.wl-card-pack .wl-card-ico{color:#c8901a}
.wl-card-pack .wl-card-nums b{color:#a8801f}
.wl-packk{color:#a8801f;font-weight:800}
.wl-packk b{color:#8a6314}
.wl-packhint{color:#a8801f;font-weight:800}

/* ================= 首页 · 单词背诵默写本 ================= */
.wb-sec{margin-top:46px}
.wb-page{margin-top:6px}   /* #/wb 独立页面：与「课本考纲单词表」页顶部对齐 */
/* —— #/wb 顶部 hero：左插画 + 右文案（版式参照 #/ear / #/catalog hero，暖米底） —— */
.wb-hero{display:flex;align-items:center;gap:22px;margin:0 0 20px;padding:16px 18px;
  background:linear-gradient(120deg,#fffdf7,#f6ecdb);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.wb-hero-img{display:block;flex:0 1 42%;max-width:420px;min-width:0;height:auto;border-radius:14px;
  box-shadow:0 10px 26px rgba(31,42,68,.14)}
.wb-hero-meta{display:flex;flex-direction:column;gap:12px;justify-content:center;align-items:flex-start;min-width:0;flex:1 1 auto}
.wb-hero-lead{display:flex;flex-direction:column;gap:6px;min-width:0}
.wb-kicker{font-size:12.5px;font-weight:800;color:var(--cta);letter-spacing:.4px}
.wb-h1{margin:0;font-size:26px;font-weight:900;color:var(--ink);letter-spacing:.5px;line-height:1.28}
.wb-h1::after{content:"";display:block;width:44px;height:4px;border-radius:3px;margin-top:9px;
  background:linear-gradient(90deg,var(--cta),var(--brand-d))}
.wb-hero-p{margin:0;max-width:600px;color:var(--ink2);font-size:14px;line-height:1.8}
.wb-hero-p b{color:var(--brand-d)}
.wb-hero-stats{display:flex;flex-wrap:wrap;gap:10px}
.wbs{background:#fff;border:1px solid var(--line);border-radius:20px;padding:5px 14px;font-size:12.5px;color:var(--ink2)}
.wbs b{color:var(--brand-d);font-weight:800;font-size:14px;margin:0 2px}
.wb-hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.wb-hero-tip{font-size:12.5px;color:var(--ink2)}
.wb-group{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px 18px 8px;
  margin-bottom:14px;box-shadow:var(--shadow)}
.wb-ghead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:800;color:var(--ink2);
  margin-bottom:8px;padding-bottom:10px;border-bottom:1px dashed var(--line)}
.wb-gtag{display:inline-block;font-size:12.5px;font-weight:800;color:#fff;border-radius:8px;padding:3px 12px;letter-spacing:1px}
.wb-gtag.wb-primary{background:linear-gradient(135deg,#e3b24a,#c9942a)}
.wb-gtag.wb-middle{background:linear-gradient(135deg,#2f6bff,#5b8bff)}
.wb-gtag.wb-high{background:linear-gradient(135deg,#4780bd,#1e4f80)}
.wb-ghead .wb-gsum{margin-left:auto;font-weight:600;font-size:12px;color:var(--ink2)}
.wb-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 2px;border-bottom:1px solid #f1ece1}
.wb-row:last-child{border-bottom:none}
.wb-grade{flex:0 0 auto;min-width:150px;font-size:14px;font-weight:800;color:var(--ink)}
.wb-grade small{display:block;font-weight:600;font-size:11.5px;color:var(--ink2);margin-top:2px}
.wb-dls{flex:1 1 auto;display:flex;gap:8px;flex-wrap:wrap}
.wb-dl{display:inline-flex;align-items:center;gap:5px;text-decoration:none;font-size:12.5px;font-weight:700;
  color:var(--cta);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 15px;
  transition:.15s;white-space:nowrap}
.wb-dl:hover{border-color:var(--cta);background:#fbfdff;transform:translateY(-1px);box-shadow:0 6px 14px rgba(30,90,150,.13)}
.wb-dl i{font-style:normal;font-weight:900}
.wb-sep{flex:0 0 1px;align-self:stretch;background:var(--line);margin:2px 3px}
.wb-dl.wb-zip{color:#fff;background:var(--cta);border-color:var(--cta)}
.wb-dl.wb-zip:hover{background:var(--brand-d);border-color:var(--brand-d);box-shadow:0 6px 14px rgba(30,90,150,.28)}
.wb-foot{font-size:12px;color:var(--ink2);margin-top:6px;line-height:1.8}
.wb-foot b{color:var(--brand-d)}

/* 中宽：插画列收窄，避免标语折行 */
@media(max-width:980px){
  .wl-hero-grid{grid-template-columns:minmax(0,278px) minmax(0,1fr);gap:22px}
  .wl-hero-art img{max-width:278px}
}
@media(max-width:760px){
  .wl-slogan{font-size:25px;letter-spacing:2px}
  .wl-hero{padding:26px 16px 22px;text-align:center}
  .wl-hero-grid{grid-template-columns:1fr;gap:12px}
  .wl-hero-art img{max-width:280px;box-shadow:0 14px 26px rgba(30,90,150,.16)}
  .wl-sub{max-width:720px;margin:0 auto}
  .wl-stats{justify-content:center}
  .wl-sec{padding:18px 15px}
  .wl-name{width:76px;font-size:12px}
  .wl-stat{min-width:96px;padding:10px 14px}
  .wl-stat b{font-size:22px}
  .wl-key,.wl-in{display:none}          /* 窄屏：柱内数字与组内小图例让位，颜色含义留在顶部图例与说明里 */
  .wl-note{line-height:1.8}
  .wb-h1{font-size:21px;line-height:1.4}
  .wb-group{padding:14px 14px 6px}
  .wb-grade{min-width:100%}
  .wb-dl{padding:6px 12px;font-size:12px}
  .wb-sep{display:none}
}

/* ================= 单词默写本 · 在线听写 + 我的（错题本 / 词库） ================= */
.wb-tabs{display:flex;gap:10px;flex-wrap:wrap}
.wb-tab{font-size:15px;font-weight:800;color:var(--ink2);background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:9px 26px;cursor:pointer;transition:.15s}
.wb-tab:hover{color:var(--cta);border-color:var(--cta)}
.wb-tab.on{color:#fff;background:linear-gradient(135deg,var(--cta),var(--brand-d));border-color:transparent;
  box-shadow:0 8px 20px rgba(30,90,150,.26)}
/* #/wb hero 窄屏：单列堆叠（文案在上、图在下前先图后文不重要，图置于文案之上更醒目） */
@media(max-width:860px){
  .wb-hero{display:block;padding:14px}
  .wb-hero-img{width:100%;max-width:100%;margin:0 0 14px}
  .wb-hero-meta{align-items:stretch}
  .wb-hero-p{max-width:100%}
}
/* —— 纸质听写 · 三大版本切换（滑块指示器 + 版本色，参照首页课本馆徽章配色） —— */
.wb-vers{display:flex;justify-content:center;margin:0 0 20px}
.wb-seg{position:relative;display:inline-flex;gap:4px;padding:5px;background:#eef1f7;border:1px solid var(--line);border-radius:14px}
/* 会滑动、会换色的指示块：transition 覆盖位置/宽度/颜色 */
.wb-vthumb{position:absolute;top:5px;left:5px;height:calc(100% - 10px);border-radius:10px;z-index:0;
  background:linear-gradient(135deg,var(--cta),var(--brand-d));box-shadow:0 8px 20px rgba(30,90,150,.26);
  transition:transform .34s cubic-bezier(.34,1.3,.4,1),width .34s cubic-bezier(.34,1.3,.4,1),background .34s ease,box-shadow .34s ease}
.wb-vthumb.v-pep{background:linear-gradient(135deg,#2f6bff,#7c4dff);box-shadow:0 8px 20px rgba(47,107,255,.30)}
.wb-vthumb.v-yilin{background:linear-gradient(135deg,#12b886,#38d9a9);box-shadow:0 8px 20px rgba(18,184,134,.32)}
.wb-vthumb.v-hujiao{background:linear-gradient(135deg,#f08c00,#ff922b);box-shadow:0 8px 20px rgba(240,140,0,.32)}
.wb-vthumb.v-waiyan{background:linear-gradient(135deg,#c2255c,#f783ac);box-shadow:0 8px 20px rgba(194,37,92,.32)}
.wb-vthumb.v-all{background:linear-gradient(135deg,#495057,#868e96);box-shadow:0 8px 20px rgba(73,80,87,.30)}
.wb-vbtn{position:relative;z-index:1;cursor:pointer;border:0;background:transparent;font-family:inherit;white-space:nowrap;
  font-size:14.5px;font-weight:800;color:var(--ink2);padding:10px 30px;border-radius:10px;transition:color .3s ease}
.wb-vbtn:hover{color:var(--ink)}
.wb-vbtn.on{color:#fff}
/* 切换版本时：下方内容淡入上移 + 顶部一道版本色高光扫过 */
.wb-pane-fx{animation:wbPaneIn .42s cubic-bezier(.22,1,.36,1)}
@keyframes wbPaneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wb-vbar{height:3px;border-radius:3px;margin:0 0 14px;background:linear-gradient(90deg,var(--cta),var(--brand-d));
  animation:wbBarIn .5s cubic-bezier(.22,1,.36,1)}
.wb-vbar.v-pep{background:linear-gradient(90deg,#2f6bff,#7c4dff)}
.wb-vbar.v-yilin{background:linear-gradient(90deg,#12b886,#38d9a9)}
.wb-vbar.v-hujiao{background:linear-gradient(90deg,#f08c00,#ff922b)}
.wb-vbar.v-waiyan{background:linear-gradient(90deg,#c2255c,#f783ac)}
@keyframes wbBarIn{from{transform:scaleX(.15);transform-origin:left;opacity:0}to{transform:scaleX(1);opacity:1}}
@media(prefers-reduced-motion:reduce){
  .wb-vthumb{transition:background .2s ease}
  .wb-pane-fx,.wb-vbar{animation:none}
}
/* 五四学制学段标签（与六三区分） */
.wb-gtag.wb-primary-w{background:linear-gradient(135deg,#2ab7a9,#1a8c80)}
.wb-gtag.wb-middle-w{background:linear-gradient(135deg,#8e6cd8,#6647ba)}
.dx-err{font-size:13px;color:#b91c1c;background:#fdecec;border:1px solid #f6d0d0;border-radius:12px;padding:10px 14px;margin:0 0 14px;line-height:1.7}

/* —— 在线听写 · 配置器 —— */
.dx-cfg{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px 26px;box-shadow:var(--shadow)}
.dx-cfg-row{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px dashed var(--line)}
.dx-cfg-row label{flex:0 0 150px;font-size:14px;font-weight:800;color:var(--ink);padding-top:8px}
.dx-select{flex:0 0 auto;min-width:200px;max-width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:10px;
  font-size:14px;font-weight:700;color:var(--ink);background:#fff;cursor:pointer}
.dx-select:focus{outline:none;border-color:var(--cta)}
.dx-cfg-hint{font-size:12.5px;color:var(--ink2);align-self:center}
.dx-units{display:flex;flex-wrap:wrap;gap:8px;flex:1}
.dx-unit{cursor:pointer;user-select:none;font-size:13px;padding:6px 12px;border-radius:16px;border:1px solid var(--line);
  background:#fff;color:var(--ink2);transition:.15s;display:inline-flex;align-items:center;gap:5px}
.dx-unit:hover{border-color:var(--cta);color:var(--cta)}
.dx-unit.on{background:var(--cta);color:#fff;border-color:var(--cta);font-weight:700}
.dx-unit i{font-style:normal;font-size:11px;opacity:.75}
.dx-unit-ops{flex:0 0 auto;display:flex;gap:10px;align-items:center;font-size:12.5px;font-weight:700;color:var(--cta);padding-top:8px}
.dx-unit-ops span{cursor:pointer;border-bottom:1px solid transparent}
.dx-unit-ops span:hover{border-bottom-color:var(--cta)}
.dx-cnts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1}
.dx-cnt{cursor:pointer;user-select:none;font-size:13px;font-weight:700;padding:6px 16px;border-radius:16px;border:1px solid var(--line);
  background:#fff;color:var(--ink2);transition:.15s}
.dx-cnt:hover{border-color:var(--cta);color:var(--cta)}
.dx-cnt.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.dx-cnt-input{width:82px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;font-size:14px;text-align:center}
.dx-cnt-input:focus{outline:none;border-color:var(--cta)}
.dx-cnt-unit{font-size:13px;color:var(--ink2)}
.dx-start-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px}
.dx-pool{font-size:13.5px;color:var(--ink2)}
.dx-pool b{color:var(--brand-d);font-weight:800}
.btn.dx-start{background:var(--cta);color:#fff;border:none;font-size:15px;font-weight:800;border-radius:999px;padding:11px 30px}
.btn.dx-start:hover{background:var(--brand-d)}
.btn.dx-start:disabled{opacity:.5;cursor:not-allowed}

/* —— 在线听写 · 会话（整体放大约 60%） —— */
.dx-session{max-width:1080px;margin:0 auto}
.dx-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 18px;font-size:16px;color:var(--ink2)}
.dx-lib{font-weight:800;color:var(--ink)}
.dx-top-num b{color:var(--brand-d)}
.dx-top-num b.ok{color:var(--good)}
.dx-top-num b.bad{color:#d4544e}
.dx-card{background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:48px 54px 40px;box-shadow:var(--shadow);
  background-image:radial-gradient(circle at 92% 8%,rgba(47,107,255,.06),transparent 42%)}
.dx-cap{text-align:center;font-size:14.5px;font-weight:800;color:var(--accent);letter-spacing:3px}
.dx-mean{text-align:center;font-size:36px;font-weight:800;color:var(--ink);line-height:1.5;margin:20px 0 28px}
.dx-ipa{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:32px}
.dx-say{font-size:16px;font-weight:700;color:var(--cta);background:#f2f7ff;border:1px solid #cfe0f5;border-radius:999px;
  padding:12px 26px;cursor:pointer;transition:.15s}
.dx-say:hover{background:#e6f0ff;border-color:var(--cta)}
.dx-ph{font-family:"Times New Roman",Georgia,serif;font-size:20px;color:var(--ink2)}
.dx-inputrow{display:flex;gap:16px;align-items:stretch}
.dx-input{flex:1;min-width:0;padding:22px 24px;border:2px solid var(--line);border-radius:16px;font-size:28px;font-weight:700;
  letter-spacing:1.5px;color:var(--ink);background:#fff;text-align:center}
.dx-input:focus{outline:none;border-color:var(--cta);box-shadow:0 0 0 4px rgba(30,90,150,.08)}
.dx-input:disabled{background:#f6f8fb;color:var(--ink2)}
.btn.dx-check{flex:0 0 auto;background:var(--cta);color:#fff;border:none;font-size:18px;font-weight:800;border-radius:16px;padding:0 38px}
.btn.dx-check:hover{background:var(--brand-d)}
.btn.dx-check:disabled{opacity:.5;cursor:not-allowed}
.dx-tools{display:flex;gap:14px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.dx-tool{font-size:15px;font-weight:700;color:var(--ink2);background:var(--soft);border:1px solid var(--line);border-radius:999px;
  padding:10px 22px;cursor:pointer;transition:.15s}
.dx-tool:hover{color:var(--cta);border-color:var(--cta);background:#fff}
.dx-tool.dx-retry{color:#fff;background:linear-gradient(135deg,#ff7a45,#ff5c33);border-color:transparent;font-weight:800;
  box-shadow:0 8px 18px rgba(255,92,51,.30)}
.dx-tool.dx-retry:hover{color:#fff;filter:brightness(1.05);border-color:transparent}
.dx-fb{min-height:0;margin-top:22px;text-align:center;font-size:16px;line-height:1.75;border-radius:14px}
.dx-fb:empty{display:none}
.dx-fb.ok{color:#166534;background:#e7f8ee;border:1px solid #c6e9d4;padding:14px 18px}
.dx-fb.bad{color:#b23b35;background:#fdecec;border:1px solid #f6d0d0;padding:14px 18px}
.dx-fb.hint{color:#8a6d1f;background:#fdf6e3;border:1px solid #f0e2b6;padding:14px 18px}
.dx-fb code{font-family:Consolas,Menlo,monospace;font-size:19px;font-weight:800;color:var(--ink);background:rgba(255,255,255,.7);
  border-radius:6px;padding:1px 10px;margin:0 4px}
.dx-fb-say{border:none;background:transparent;cursor:pointer;font-size:17px;margin-left:2px;vertical-align:-1px}
.dx-fb-note{margin-left:10px;font-size:13.5px;color:#b23b35}
.dx-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px}
.dx-nav-btn{font-size:15.5px;font-weight:700;color:var(--ink2);background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:12px 30px;cursor:pointer;transition:.15s}
.dx-nav-btn:hover:not(:disabled){color:var(--cta);border-color:var(--cta)}
.dx-nav-btn:disabled{opacity:.4;cursor:not-allowed}
.dx-nav-btn.dx-finish{color:#fff;background:var(--good);border-color:var(--good)}
.dx-nav-btn.dx-finish:hover{background:#12833c;border-color:#12833c;color:#fff}
.dx-nav-mid{font-size:15px;font-weight:800;color:var(--ink2)}
.dx-tally{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:22px;font-size:14px;font-weight:700}
.dx-tally-p{color:var(--ink2);background:var(--soft);border-radius:999px;padding:8px 20px}
.dx-tally-ok{color:#166534;background:#e7f8ee;border-radius:999px;padding:8px 20px}
.dx-tally-bad{color:#b23b35;background:#fdecec;border-radius:999px;padding:8px 20px}

/* —— 在线听写 · 结算 —— */
.dx-sum{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:36px 30px;text-align:center;box-shadow:var(--shadow)}
.dx-sum-emoji{font-size:46px;line-height:1}
.dx-sum-title{margin:10px 0 20px;font-size:22px;font-weight:900;color:var(--ink)}
.dx-sum-nums{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.dx-sum-n{min-width:104px;background:var(--soft);border-radius:14px;padding:14px 18px}
.dx-sum-n b{display:block;font-size:28px;font-weight:900;color:var(--ink);line-height:1.1}
.dx-sum-n span{font-size:12.5px;color:var(--ink2)}
.dx-sum-n.ok b{color:var(--good)}
.dx-sum-n.bad b{color:#d4544e}
.dx-sum-rate{margin-top:18px;font-size:15px;color:var(--ink2)}
.dx-sum-rate b{font-size:20px;color:var(--brand-d)}
.dx-sum-tip{max-width:560px;margin:12px auto 22px;font-size:13.5px;color:var(--ink2);line-height:1.8}
.dx-sum-btns{justify-content:center}

/* —— 我的：错题本计数 / 错题列表 / 我的词库 —— */
.me-count{display:inline-block;min-width:24px;padding:1px 9px;margin-left:6px;font-size:13.5px;font-weight:800;color:#fff;
  background:var(--accent);border-radius:999px;vertical-align:2px}
.wr-list{max-height:480px;overflow:auto;border:1px solid var(--line);border-radius:16px}
.wr-row{display:grid;grid-template-columns:1fr auto;gap:3px 14px;align-items:center;padding:14px 18px;border-bottom:1px solid #f1ece1}
.wr-row:last-child{border-bottom:none}
.wr-w{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:800;color:var(--ink)}
.wr-w b{letter-spacing:.4px}
.wr-say{border:none;background:transparent;cursor:pointer;font-size:16px}
.wr-ph{font-family:"Times New Roman",Georgia,serif;font-size:14.5px;font-weight:400;color:var(--ink2)}
.wr-m{grid-column:1/2;font-size:14.5px;color:var(--ink2);line-height:1.6}
.wr-src{grid-column:1/2;font-size:12.5px;color:#a2988a}
.wr-del{grid-row:1/3;grid-column:2/3;border:1px solid var(--line);background:#fff;color:#c98a86;border-radius:50%;width:30px;height:30px;
  line-height:1;cursor:pointer;font-size:13px;transition:.15s}
.wr-del:hover{background:#fdecec;border-color:#f6d0d0;color:#b23b35}
.mv-cur{display:flex;align-items:center;gap:20px}
.mv-cover{width:76px;height:104px;object-fit:cover;border-radius:9px;border:1px solid var(--line);flex:0 0 auto;background:var(--soft)}
.mv-info{min-width:0}
.mv-t{font-size:19px;font-weight:800;color:var(--ink)}
.mv-d{font-size:14px;color:var(--ink2);margin:4px 0}
.mv-n{font-size:14.5px;color:var(--ink2)}
.mv-n b{color:var(--brand-d);font-weight:800}
.btn.mv-dl{background:var(--cta);color:#fff;border:none;font-size:15.5px;padding:11px 26px;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn.mv-dl:hover{background:var(--brand-d)}

@media(max-width:760px){
  .wb-tab{font-size:13.5px;padding:8px 18px}
  .wb-vbtn{font-size:13px;padding:9px 18px}
  .wb-seg{gap:3px;padding:4px}
  .dx-cfg{padding:18px 16px}
  .dx-cfg-row{flex-direction:column;gap:8px}
  .dx-cfg-row label{flex:none;padding-top:0}
  .dx-select{width:100%}
  .dx-card{padding:28px 18px 24px}
  .dx-mean{font-size:24px}
  .dx-cap{font-size:13px;letter-spacing:2px}
  .dx-inputrow{flex-wrap:wrap}
  .dx-input{font-size:21px;flex:1 1 100%}
  .btn.dx-check{flex:1 1 100%;padding:14px}
  .dx-start-bar{justify-content:stretch}
  .dx-pool{flex:1 1 100%}
  .btn.dx-start{flex:1 1 100%}
  .me-card{padding:22px 18px}
  .me-title{font-size:18px}
  .me-sub{font-size:13.5px}
  .wr-list{max-height:none}
  .mv-cur{flex-wrap:wrap}
}


/* ================= 练嘴巴（#/mouth）：亲子口语 8000 句点读本 ================= */
/* 纸张贴合：白底、无黑框、无内边距、无投影；页图按栏宽铺满（1:1），纵向连续滚动 */
.mouth .ph-wrap{background:#fff;padding:0;align-items:flex-start}
.mouth .ph-stage{position:relative;margin:0;width:100%}
.mouth .ph-img{width:100%;max-width:100%;box-shadow:none;border-radius:0}
/* 右栏随左栏同高齐平：去掉浮层卡片的圆角/投影/高度上限（84vh 泄漏），白底满格 */
.mouth .explain-panel{max-width:none;max-height:none;border-radius:0;box-shadow:none;border-left:1px solid var(--line)}
/* 热点容器：盖在图上但不吃点击，只有框本身可点（z-index 高于 .flip-zone(2)，点框朗读、点框外翻页） */
.mt-hot{position:absolute;inset:0;z-index:3;line-height:0;pointer-events:none}
.mt-hot .hotspot{pointer-events:auto}
.mt-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mt-loop{font-size:12.5px;color:var(--ink2);display:inline-flex;align-items:center;gap:4px;cursor:pointer;user-select:none}
.mt-voice{font-size:12.5px;color:var(--ink2);display:inline-flex;align-items:center;gap:4px}
.mt-voice select{font-size:12.5px;padding:2px 6px;border:1px solid #cdd6e4;border-radius:6px;background:#fff;color:var(--ink);cursor:pointer}
.mt-rate,.mt-repeat{font-size:12.5px;color:var(--ink2);display:inline-flex;align-items:center;gap:4px}
.mt-rate select,.mt-repeat select{font-size:12.5px;padding:2px 6px;border:1px solid #cdd6e4;border-radius:6px;background:#fff;color:var(--ink);cursor:pointer}

.mt-h{font-weight:800;font-size:13.5px;color:var(--brand-d);background:#eef4ff;border-radius:8px;padding:6px 10px;margin:8px 0 2px;letter-spacing:.3px}
.mt-line{display:flex;gap:8px;align-items:flex-start}
.mt-no{flex:0 0 auto;min-width:20px;font-size:11px;color:#9aa3b2;font-weight:700;padding-top:4px;text-align:right}
.mt-body{flex:1;min-width:0}
.mt-toc{background:#fff;border-bottom:1px solid var(--line);max-height:54vh;overflow:auto;padding:10px 16px;box-shadow:inset 0 -6px 12px rgba(20,30,60,.05)}
.mt-toc.hidden{display:none}
.mt-ch{margin-bottom:8px}
.mt-ch-t{font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;padding:4px 6px;border-radius:6px}
.mt-ch-t:hover{background:#f0f5ff;color:var(--brand-d)}
.mt-ch-t b{color:var(--brand);font-weight:800}
.mt-ch-p{font-size:11px;color:#98a2b3;font-weight:600;margin-left:6px}
.mt-sec{display:inline-block;font-size:12px;color:var(--ink2);background:#f4f7ff;border:1px solid #e2eaff;border-radius:20px;padding:2px 10px;margin:3px 6px 0 0;cursor:pointer}
.mt-sec:hover{background:#e6efff;color:var(--brand-d)}
.mt-sec i{color:#b3bcc9;font-style:normal;font-size:10px;margin-left:4px}
@media(max-width:900px){
  .mouth .pr-body{grid-template-columns:1fr}
  body.pg-full .mouth .pr-body{grid-template-rows:minmax(0,1.15fr) minmax(0,1fr)}
}

/* ================= 词汇训练三件套（单词闪记 / 单词红绿灯 / 抗遗忘复习） ================= */
.vm-page{max-width:940px;margin:0 auto}
.vm-loading{padding:60px 0;text-align:center;color:var(--ink2);font-size:14px}
.vm-hero{position:relative;text-align:center;padding:32px 24px 28px;margin:6px 0 22px;border-radius:22px;
  background:linear-gradient(180deg,#fff 0%,#fbf8f2 100%);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.vm-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% -20%,rgba(30,90,150,.10),transparent 60%);pointer-events:none}
.vm-hero.small{padding:26px 24px 22px}
.vm-hero>*{position:relative}
.vm-badge{display:inline-block;font-size:12.5px;font-weight:800;color:var(--cta);background:#eef4fb;border:1px solid #d8e6f5;border-radius:999px;padding:5px 14px}
.vm-slogan{margin:14px 0 8px;font-size:32px;line-height:1.3;letter-spacing:2px;font-weight:900;color:var(--ink);
  font-family:"SHS Heavy","Source Han Serif SC","Noto Serif SC","Songti SC",serif}
.vm-slogan em{font-style:normal;color:var(--cta)}
.vm-sub{max-width:660px;margin:0 auto;color:var(--ink2);font-size:14px;line-height:1.8}
.vm-stats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.vm-stat{min-width:104px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;box-shadow:0 2px 10px rgba(31,42,68,.04)}
.vm-stat b{display:block;font-size:24px;font-weight:900;color:var(--cta);line-height:1.1}
.vm-stat b.g,.vm-ring b.g{color:var(--good)}
.vm-stat b.r,.vm-ring b.r{color:#e5484d}
.vm-stat span{font-size:12px;color:var(--ink2)}
.vm-sec{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin-bottom:18px;box-shadow:0 2px 14px rgba(31,42,68,.04)}
.vm-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.vm-sec-head h2{margin:0;font-size:18px;font-weight:900;color:var(--ink)}
.vm-hint{font-size:12.5px;color:var(--ink2)}
.vm-hint b{color:var(--cta)}
.vm-hint b.r{color:#e5484d}
.vm-pick-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vm-lab{font-size:13px;font-weight:800;color:var(--ink2);flex:none}
.vm-sel{flex:1;min-width:200px;max-width:340px;font-size:14px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.vm-pick-cnt{margin-left:auto}
.vm-units{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px;max-height:230px;overflow:auto}
.vm-chip{font-size:12.5px;font-weight:700;color:var(--ink2);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;transition:.18s}
.vm-chip i{font-style:normal;opacity:.6;font-size:11px;margin-left:2px}
.vm-chip.on{background:#eef4fb;border-color:var(--cta);color:var(--cta)}
.vm-chip:hover{border-color:var(--cta)}
.vm-pick-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.vm-mini{font-size:12.5px;font-weight:700;color:var(--cta);background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 14px;cursor:pointer}
.vm-mini:hover{border-color:var(--cta)}
.vm-cta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vm-cta{display:inline-flex;align-items:center;gap:8px;background:var(--cta);color:#fff;font-size:14.5px;font-weight:800;padding:12px 24px;border:none;border-radius:12px;cursor:pointer;box-shadow:0 8px 20px rgba(30,90,150,.28);transition:.18s;text-decoration:none}
.vm-cta:hover{background:#17497c;transform:translateY(-1px)}
.vm-cta:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.vm-cta-line{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);color:var(--ink);font-size:13.5px;font-weight:700;padding:11px 18px;border-radius:12px;cursor:pointer;text-decoration:none}
.vm-cta-line:hover{border-color:var(--cta);color:var(--cta)}
.vm-tips ul{margin:0;padding-left:20px;color:var(--ink2);font-size:13.5px;line-height:2}
.vm-tips-t{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:6px}
.vm-tips b.g{color:var(--good)}
.vm-tips b.r{color:#e5484d}
/* 会话（跑词页：模版化大卡片 + 两侧翻页 + 底部判定条） */
.vm-run{position:relative;max-width:1100px}
.vm-rbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 12px}
.vm-back{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 14px;font-size:13px;font-weight:700;color:var(--ink2);cursor:pointer}
.vm-back:hover{border-color:var(--cta);color:var(--cta)}
.vm-rbar-title{font-size:15px;font-weight:900;color:var(--ink);margin-right:auto}
.vm-rbar-title i{font-style:normal;font-weight:600;color:var(--ink2);font-size:13px}
.vm-pill{font-size:12.5px;font-weight:700;color:var(--ink2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;white-space:nowrap}
.vm-pill b{color:var(--cta);font-size:14px}
.vm-pill.done{background:#f2fbf5;border-color:#bfe9cd;color:var(--good)}
.vm-pill.done b{color:var(--good)}
.vm-bar{height:8px;background:var(--soft);border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.vm-bar i{display:block;height:100%;background:linear-gradient(90deg,#2f6bff,#1e5a96);border-radius:999px;transition:width .3s}
.vm-runstage{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px}
.vm-nav{flex:none;width:78px;height:78px;border-radius:50%;background:#fff;border:1px solid var(--line);padding:0;
  box-shadow:0 8px 20px rgba(31,42,68,.08);color:var(--cta);font-size:23px;font-weight:900;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;transition:.18s}
.vm-nav span{font-size:12px;font-weight:700;color:var(--ink2);margin-top:4px}
.vm-nav:hover:not(:disabled){border-color:var(--cta);transform:translateY(-2px);box-shadow:0 12px 26px rgba(31,42,68,.14)}
.vm-nav:disabled{opacity:.32;cursor:not-allowed;box-shadow:none}
.vm-card2{position:relative;flex:1;max-width:820px;min-height:568px;border-radius:30px;overflow:hidden;cursor:pointer;
  background:linear-gradient(180deg,#fff 0%,#fdfaf4 100%);border:1px solid var(--line);
  box-shadow:0 20px 54px rgba(31,42,68,.11);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:42px 38px 34px;transition:box-shadow .2s}
.vm-card2:hover{box-shadow:0 26px 66px rgba(31,42,68,.16)}
.vm-card2 .vm-face{width:100%}
.vm-card2 .vm-face-back{display:none}
.vm-card2.on .vm-face-front{display:none}
.vm-card2.on .vm-face-back{display:block}
.vm-media{width:224px;height:224px;margin:0 auto 26px;border-radius:26px;background:#fff;border:1px solid #efe7d9;
  box-shadow:0 10px 26px rgba(31,42,68,.08);overflow:hidden;display:flex;align-items:center;justify-content:center}
.vm-media img{width:100%;height:100%;object-fit:cover;display:block}
.vm-card2.noimg .vm-media{display:none}
.vm-word{font-size:70px;font-weight:900;letter-spacing:1px;color:var(--ink);font-family:Georgia,"Times New Roman",serif;line-height:1.15;word-break:break-word}
.vm-word.sm{font-size:40px}
.vm-deco{font-style:normal;font-size:20px;color:#e8b4b8;vertical-align:super;margin-left:7px}
.vm-ipa{margin-top:10px;font-size:18px;color:var(--ink2);font-style:italic;min-height:22px}
.vm-mean{margin-top:18px;font-size:30px;font-weight:800;color:var(--cta);line-height:1.5}
.vm-mean.big{font-size:34px}
.vm-hr{width:72%;height:1px;background:var(--line);margin:24px auto 16px}
.vm-card-tip{font-size:13.5px;color:#b9b2a6}
.vm-src{margin-top:12px;font-size:12.5px;color:#c2bcb0}
.vm-recinfo{font-size:13px;color:var(--ink2);line-height:1.8}
.vm-recinfo b{color:var(--cta)}
.vm-say{position:absolute;right:18px;top:18px;background:#eef4fb;border:1px solid #d8e6f5;border-radius:12px;font-size:16px;padding:7px 11px;cursor:pointer}
.vm-overdue{position:absolute;left:18px;top:18px;font-size:12px;font-weight:800;color:#b26a00;background:#fff4e0;border:1px solid #ffe0a8;border-radius:999px;padding:4px 11px}
.vm-actions{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.vm-act{font-size:16.5px;font-weight:900;padding:15px 54px;border-radius:999px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);transition:.16s}
.vm-act:hover{transform:translateY(-1px)}
.vm-act-yes{background:#eafaf0;color:var(--good);border-color:#bfe9cd}
.vm-act-yes:hover{background:#ddf5e6;box-shadow:0 10px 24px rgba(46,160,90,.18)}
.vm-act-no{background:#fdeeee;color:#e5484d;border-color:#f6cdcf}
.vm-act-no:hover{background:#fbe0e1;box-shadow:0 10px 24px rgba(229,72,77,.16)}
.vm-act-flip{background:#fff8e6;color:#b26a00;border-color:#ffe3a8}
.vm-act-flip:hover{background:#fdf1d6;box-shadow:0 10px 24px rgba(178,106,0,.15)}
.vm-runfoot{margin-top:14px;text-align:center;font-size:12.5px;color:#b9b2a6}
.vm-runfoot b{color:var(--cta)}
/* 结果 */
.vm-rings{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.vm-ring{flex:1;min-width:104px;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center}
.vm-ring b{display:block;font-size:26px;font-weight:900;color:var(--cta);line-height:1.1}
.vm-ring span{font-size:12px;color:var(--ink2)}
.vm-note{font-size:13px;color:var(--ink2);line-height:1.9;margin:8px 0 16px}
.vm-note b{color:var(--ink)}
.vm-empty-box{font-size:13.5px;color:var(--ink2);background:var(--soft);border:1px dashed var(--line);border-radius:12px;padding:16px 18px;line-height:1.9;margin-bottom:14px}
.vm-dist-bar{position:relative;display:flex;height:22px;border-radius:8px;overflow:hidden;background:var(--soft);border:1px solid var(--line)}
.vm-dist-bar .seg{height:100%}
.vm-dist-bar .seg.mastered{background:#1e5a96}
.vm-dist-bar .seg.green{background:#7ec6a1}
.vm-dist-bar .seg.red{background:#f0a2a5}
.vm-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--ink2)}
.vm-legend .dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.vm-legend .dot.mastered{background:#1e5a96}
.vm-legend .dot.green{background:#7ec6a1}
.vm-legend .dot.red{background:#f0a2a5}
.vm-fbars{display:flex;align-items:flex-end;gap:12px;height:150px;padding:0 4px}
.vm-fbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.vm-fbar i{display:block;width:60%;min-height:2px;background:linear-gradient(180deg,#8fb8dd,#1e5a96);border-radius:6px 6px 0 0;transition:height .3s}
.vm-fbar b{font-size:12px;font-weight:800;color:var(--cta);margin-bottom:2px}
.vm-fbar span{font-size:11.5px;color:var(--ink2);margin-top:6px}
@media(max-width:720px){
  .vm-word{font-size:48px}
  .vm-word.sm{font-size:30px}
  .vm-slogan{font-size:25px}
  .vm-runstage{gap:6px;margin-top:14px}
  .vm-nav{width:44px;height:44px;font-size:15px}
  .vm-nav span{display:none}
  .vm-card2{min-height:400px;padding:26px 20px 22px;border-radius:22px}
  .vm-media{width:152px;height:152px;margin-bottom:16px;border-radius:20px}
  .vm-mean{font-size:23px}
  .vm-mean.big{font-size:26px}
  .vm-actions{gap:8px;margin-top:20px}
  .vm-act{font-size:14.5px;padding:12px 30px}
}

/* ============== 账号 · 学习记录云化（#/account · #/report · 到期闸门） ============== */
.hj-idcard{display:flex;align-items:center;gap:14px;margin-top:12px;padding:14px 16px;border:1px solid #dbe6ff;background:#f7faff;border-radius:12px}
.hj-idcard-avatar{width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:linear-gradient(135deg,#2f6fd0,#1e5a96);color:#fff;font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:center}
.hj-idcard-info{min-width:0}
.hj-idcard-name{font-size:16px;font-weight:800;color:var(--ink)}
.hj-idcard-meta{font-size:12.5px;color:var(--ink2);margin-top:3px}
.hj-idcard-meta b{color:var(--cta)}
.hj-note{margin-top:12px;padding:11px 14px;border-radius:10px;background:#fff8e8;border:1px solid #f2dfae;color:#8a6412;font-size:13px;line-height:1.6}
.hj-tabs{display:flex;gap:8px;margin:14px 0 6px}
.hj-tab{border:1px solid #d8dee9;background:#fff;color:var(--ink2);font-size:14px;font-weight:700;padding:8px 20px;border-radius:20px;cursor:pointer}
.hj-tab.on{background:var(--cta);border-color:var(--cta);color:#fff}
.hj-field{display:flex;align-items:center;gap:10px;margin:10px 0}
.hj-field label{flex:0 0 92px;font-size:13.5px;color:var(--ink2)}
.hj-input{flex:1;min-width:0;height:42px;border:1px solid #d8dee9;border-radius:10px;padding:0 12px;font-size:14px;background:#fff;color:var(--ink);box-sizing:border-box}
.hj-input:focus{outline:none;border-color:var(--cta);box-shadow:0 0 0 3px rgba(47,111,208,.12)}
.hj-msg{min-height:20px;font-size:13px;margin:6px 0 4px}
.hj-msg.err{color:#b3261e}
.hj-msg.ok{color:#1a7f45}
.hj-main{width:100%;justify-content:center}
.hj-gate{position:fixed;inset:0;z-index:9600;background:rgba(20,28,44,.62);display:flex;align-items:center;justify-content:center;padding:20px}
.hj-gate-card{width:100%;max-width:420px;background:#fff;border-radius:16px;padding:26px 24px 22px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:92vh;overflow:auto}
.hj-gate-emoji{font-size:34px;text-align:center}
.hj-gate-title{margin:8px 0 6px;font-size:21px;font-weight:800;color:var(--ink);text-align:center}
.hj-gate-sub{margin:0 0 8px;font-size:13.5px;line-height:1.7;color:var(--ink2);text-align:center}
.hj-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #dbe6ff;background:#f7faff;border-radius:20px;font-size:13px;color:var(--ink);text-decoration:none}
.hj-chip-dot{width:8px;height:8px;border-radius:50%;background:#1a9f5a}
.hj-chip-dot.guest{background:#e0a12a}
.hj-chip-sub{font-size:11.5px;color:var(--ink2)}
.hj-report .me-card{margin-bottom:18px}
.hj-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.hj-kpi{background:#f7faff;border:1px solid #dbe6ff;border-radius:12px;padding:12px 10px;text-align:center}
.hj-kpi b{display:block;font-size:20px;font-weight:800;color:var(--cta);line-height:1.3}
.hj-kpi span{display:block;font-size:12px;color:var(--ink2);margin-top:2px}
.hj-bars{display:flex;align-items:flex-end;gap:4px;height:150px;margin-top:14px;overflow-x:auto;padding-bottom:2px}
.hj-bar{flex:1 0 14px;min-width:14px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.hj-bar-in{width:72%;min-height:0;background:linear-gradient(180deg,#8fb8dd,#2f6fd0);border-radius:4px 4px 0 0;transition:height .3s}
.hj-bar-d{font-size:10px;color:var(--ink2);margin-top:4px;transform:rotate(-0deg)}
.hj-hours{display:flex;align-items:flex-end;gap:3px;height:110px;margin-top:14px}
.hj-hour{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.hj-hour-in{min-height:0;background:linear-gradient(180deg,#f0b56b,#d98523);border-radius:3px 3px 0 0}
.hj-hours-x{display:flex;justify-content:space-between;font-size:11px;color:var(--ink2);margin-top:4px}
.hj-bklist{margin-top:10px}
.hj-bkrow{padding:10px 0;border-bottom:1px dashed #e6eaf2}
.hj-bkrow:last-child{border-bottom:none}
.hj-bk-t{font-size:14.5px;font-weight:700;color:var(--ink)}
.hj-bk-m{font-size:12.5px;color:var(--ink2);margin-top:3px}
.hj-wchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.hj-wchip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:18px;background:#fdeeee;border:1px solid #f3cccc;font-size:13px;color:var(--ink)}
.hj-wchip i{font-style:normal;color:var(--ink2);font-size:12px}
.hj-wchip em{font-style:normal;font-weight:800;color:#b3261e;font-size:12px}

/* ===== 学习数据（#/learning） ===== */
.ld-wrap{max-width:920px;min-width:0}
.ld-wrap .me-card{min-width:0}
.ld-hero-top{display:flex;align-items:center;gap:14px}
.ld-avatar{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#eaf1ff,#dbe6ff);display:flex;align-items:center;justify-content:center;font-size:26px;flex:none}
.ld-hero-info{flex:1;min-width:0}
.ld-hero-title{font-size:20px;font-weight:800;color:var(--ink)}
.ld-hero-sub{font-size:13px;color:var(--ink2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld-hero-badge{flex:none;font-size:12px;color:var(--cta);background:#eef4ff;border:1px solid #dbe6ff;border-radius:20px;padding:4px 12px}
.ld-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.ld-kpi{background:#f7faff;border:1px solid #dbe6ff;border-radius:14px;padding:14px 8px;text-align:center}
.ld-kpi-ic{display:block;font-size:18px;margin-bottom:2px}
.ld-kpi b{display:block;font-size:20px;font-weight:800;color:var(--cta);line-height:1.25;word-break:break-all}
.ld-kpi em{display:block;font-style:normal;font-size:12px;color:var(--ink2);margin-top:3px}
/* 学习时长 KPI：本周 / 本月 / 累计 切换 */
.ld-kpi-dur{padding-bottom:9px}
.ld-durtabs{display:flex;justify-content:center;gap:4px;margin-top:8px}
.ld-dt{font:inherit;font-size:11px;line-height:1;color:var(--ink2);background:#fff;border:1px solid #dbe6ff;border-radius:20px;padding:4px 9px;cursor:pointer;transition:.15s}
.ld-dt:hover{border-color:var(--cta);color:var(--cta)}
.ld-dt.on{background:var(--cta);border-color:var(--cta);color:#fff;font-weight:700}
.ld-heatwrap{display:flex;gap:8px;margin-top:14px;min-width:0}
.ld-hdays{display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:var(--ink2);padding:1px 0 16px;flex:none}
.ld-hscroll{overflow-x:auto;padding-bottom:4px;flex:1 1 auto;min-width:0}
.ld-hgrid{display:flex;gap:3px}
.ld-hcol{display:flex;flex-direction:column;gap:3px;position:relative}
.ld-hc{width:12px;height:12px;border-radius:3px;background:#eef1f6;display:block}
.ld-hc-e{background:transparent}
.ld-hc-0{background:#eef1f6}
.ld-hc-1{background:#d3e2ff}
.ld-hc-2{background:#a6c6ff}
.ld-hc-3{background:#6e9fef}
.ld-hc-4{background:#2f6fd0}
.ld-hm{font-size:10px;color:var(--ink2);font-weight:400;height:12px;line-height:12px;white-space:nowrap}
.ld-hlegend{display:flex;align-items:center;gap:4px;justify-content:flex-end;font-size:11px;color:var(--ink2);margin-top:10px}
.ld-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px}
.ld-m{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 12px;text-align:center}
.ld-m-ic{display:block;font-size:20px;margin-bottom:4px}
.ld-m b{display:block;font-size:22px;font-weight:800;color:var(--ink);line-height:1.2}
.ld-m i{display:block;font-style:normal;font-size:13px;color:var(--ink);margin-top:4px;font-weight:700}
.ld-m u{display:block;text-decoration:none;font-size:11px;color:var(--ink2);margin-top:3px;line-height:1.45}
.ld-tag{font-size:11px;font-weight:400;color:#8a6412;background:#fff8e8;border:1px solid #f2dfae;border-radius:10px;padding:2px 8px;margin-left:6px;vertical-align:middle}
.ld-cals{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.ld-cal{border-top:1px dashed #e6eaf2;padding-top:8px}
.ld-cal b{display:block;font-size:13.5px;color:var(--ink)}
.ld-cal span{display:block;font-size:12.5px;color:var(--ink2);margin-top:2px;line-height:1.55}
.ld-cal em{font-style:normal;color:#b3841a;font-weight:700}
@media(max-width:720px){
  .hj-kpis{grid-template-columns:repeat(2,1fr)}
  .hj-field label{flex-basis:74px}
  .ld-kpis{grid-template-columns:repeat(2,1fr)}
  .ld-grid{grid-template-columns:repeat(2,1fr)}
  .ld-cals{grid-template-columns:1fr}
}

/* =====================================================================
   移动端专项自适应（2026-10-01）—— 全部限定在媒体查询内，桌面端(≥961)零影响
   针对直板机 / 大屏双折叠三类终端的横向越界与被裁缺陷。
   ===================================================================== */

/* A1. 「我的 / 学习数据」：.me-wrap 是 1fr 网格，子项默认 min-width:auto 不肯收缩，
   内容最小宽把文档撑宽（320px 实测溢出 11px）→ 显式放开收缩。 */
@media(max-width:760px){
  .me-wrap,.me-wrap>.me-card{min-width:0}
}

/* A2. 学段头（总目录 / 各版本）：badge + 进度徽章 nowrap 撑宽文档（320-390px 实测溢出 9-67px）
   → 允许换行，学段名独占一行，徽章靠右。 */
@media(max-width:600px){
  .stage-head{flex-wrap:wrap;gap:8px 10px;padding:12px 16px}
  .stage-badge{font-size:15px;padding:5px 12px;letter-spacing:1px}
  .stage-info{flex:1 1 100%;order:3}
  .stage-prog{margin-left:auto;font-size:12px;padding:4px 10px}
}

/* B. 单词拆解（点读演示 .breakdown）：一行内「词+词性+释义」三段 nowrap，
   最小宽≈483px，超过窄屏后被 .breakdown{overflow:hidden} 裁掉（≤390px 实测）
   → 窄屏改为释义换行独占一行。 */
@media(max-width:430px){
  .bk-row{flex-wrap:wrap;row-gap:2px}
  .bk-w,.bk-p{min-width:0}
  .bk-m{flex:1 1 100%}
}

/* C. TTS 控制条（全局 fixed）：单行 nowrap，内容 >1000px，窄屏必然越界（≤884px 实测）
   → 窄屏允许换行、收缩下拉框，并隐藏纯说明性提示文字。 */
@media(max-width:960px){
  .tts-bar{flex-wrap:wrap;justify-content:center;white-space:normal;border-radius:18px;
    padding:8px 12px;gap:6px 10px;max-width:calc(100vw - 16px)}
  .tts-bar .tip{display:none}
  .tts-bar select{min-width:0;max-width:100%;flex:1 1 120px}
  .tts-bar #hjHumanVoice{flex:0 0 auto;min-width:64px}
}

/* D. 点读演示「单词表听力」区块（#/demo）：select 的固有宽度（最长选项文本）把
   .dw-side 网格列撑到 279px，320px 下溢出；.vt-row 子项在 #dwTable 内被裁。
   → 放开收缩 + 允许换行（≤430px 实测）。 */
@media(max-width:900px){
  .dw-reader,.dw-side,.dw-main{min-width:0}
  .dw-booksel{min-width:0;max-width:100%}
}
@media(max-width:760px){
  .vt-row>*{min-width:0}
  .vt-row .w,.vt-row .ph,.vt-row .mn{overflow-wrap:anywhere}
  .vt-head>*{min-width:0}
}

/* E. 底部悬浮 TTS 控制条遮挡正文（≤900px 实测：条顶边 y=744，阅读页正文末行 y=921）。
   TTS 条只在 #/book/* 与 #/mouth 显示 → 用 :has 定向为「有可见 TTS 条的页面」预留底部空间，
   使正文末端可滚动到条上方；全屏态（pg-full）给 .pr-body 预留，避免遮住右栏最后几行。 */
@media(max-width:900px){
  body:not(.pg-full):has(#ttsBar:not(.hidden)) main{padding-bottom:92px}
  body.pg-full .pr-body{padding-bottom:88px}
}


/* =====================================================================
   分页点读 · 移动端（≤900px，或触屏设备 ≤1366px——覆盖 iPad 全系横屏）：
   精简顶栏 + 左右滑动翻页 + 图层浮层 + 底部点句条
   非触屏桌面端（>900px）这些元素一律 display:none，零影响。
   ===================================================================== */
.pg-mini,.pg-fab,.pg-sheet,.pg-sheet-mask,.pg-sentbar,.pg-edge-hint{display:none}

@media(max-width:900px),(pointer:coarse) and (max-width:1366px){
  /* 顶栏精简：隐藏面包屑/第二返回/翻页控件，只留「全册目录 + 页码 + 全屏」 */
  .pg-bar{padding:8px 12px;gap:8px}
  .pg-bar .pg-crumb{display:none}
  .pg-bar .back:nth-of-type(2){display:none}
  .pg-find,.pg-nav{display:none}
  .pg-fullbtn{margin-left:0;padding:6px 12px;font-size:13px}
  .pg-mini{display:inline-flex;align-items:center;margin-left:auto;font-size:12.5px;
    color:var(--brand-d);background:var(--soft);border-radius:20px;padding:3px 10px;white-space:nowrap}

  /* 滑动翻页容器：纵向滚动保留，横向交给 Pointer（触摸/鼠标拖动）翻页；拖动时不选中文字、不触发图片原生拖拽 */
  .page-reader .ph-wrap{touch-action:pan-y;-webkit-user-select:none;user-select:none}
  .page-reader .ph-wrap img{-webkit-user-drag:none;user-drag:none}

  /* 图层按钮（浮动） */
  .pg-fab{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
    position:fixed;right:14px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:7200;
    width:54px;height:54px;border:0;border-radius:50%;cursor:pointer;
    background:linear-gradient(135deg,#3b6ef0,#5b8cf5);color:#fff;
    box-shadow:0 8px 22px rgba(40,80,180,.34);font-size:19px;line-height:1}
  .pg-fab b{font-size:10.5px;font-weight:700;margin-top:2px}
  .pg-fab:active{transform:scale(.94)}

  /* 底部点句条：点句子后显示 EN + 中文 */
  .pg-sentbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:7300;
    background:#1b2334;color:#fff;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    transform:translateY(100%);transition:transform .22s ease;pointer-events:none;
    box-shadow:0 -6px 22px rgba(10,20,40,.28)}
  .pg-sentbar.show{transform:translateY(0);pointer-events:auto}
  .pg-sentbar-en{font-size:15px;font-weight:700;line-height:1.4}
  .pg-sentbar-zh{font-size:13px;color:#c7d2e6;margin-top:2px}
  body.pg-has-sent .tts-bar{bottom:calc(80px + env(safe-area-inset-bottom,0px))}

  /* 遮罩 + 翻页浮层 */
  .pg-sheet-mask{display:block;position:fixed;inset:0;background:rgba(15,22,38,.42);z-index:7400;
    opacity:0;visibility:hidden;transition:.2s}
  .pg-sheet-mask.open{opacity:1;visibility:visible}
  .pg-sheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:7500;background:#fff;
    border-radius:18px 18px 0 0;padding:16px 18px calc(18px + env(safe-area-inset-bottom,0px));
    transform:translateY(110%);transition:transform .24s ease;box-shadow:0 -10px 34px rgba(20,30,60,.24)}
  .pg-sheet.open{transform:translateY(0)}
  .pg-sheet-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .pg-sheet-h b{font-size:16px}
  .pg-sheet-x{border:0;background:#f0f3f9;border-radius:50%;width:30px;height:30px;font-size:14px;color:#5b6780;cursor:pointer}
  .pg-sheet-row{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:14px}
  .pg-sheet-nav{flex:1 1 0;white-space:nowrap;padding:10px 6px}
  .pg-sheet-nav:disabled{opacity:.4;cursor:not-allowed}
  .pg-sheet-num{font-size:14px;color:var(--ink2);white-space:nowrap;flex:0 0 auto}
  .pg-sheet-num b{color:var(--brand-d)}
  .pg-sheet-jump{display:flex;align-items:center;gap:10px;justify-content:space-between;
    background:var(--soft);border-radius:12px;padding:10px 12px}
  .pg-sheet-jump label{font-size:14px;color:var(--ink);display:flex;align-items:center;gap:6px}
  .pg-sheet-jump input{width:68px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;
    font-size:15px;text-align:center;color:var(--ink);background:#fff;outline:none}
  .pg-sheet-tip{margin-top:12px;font-size:12px;color:#8b95a8;line-height:1.6}
  .pg-sheet-tip b{color:var(--ink2)}
  .pg-edge-hint{display:block;position:fixed;left:50%;bottom:96px;transform:translate(-50%,8px);
    background:rgba(27,35,52,.92);color:#fff;font-size:13px;padding:8px 16px;border-radius:20px;
    z-index:7300;opacity:0;transition:.25s;pointer-events:none;white-space:nowrap}
  .pg-edge-hint.show{opacity:1;transform:translate(-50%,0)}
}

/* ===== 首页节日底图「欢度国庆」 =====
   仅首页 / 首页 FAQ 视图生效：由 app.js route() 在 10-01 ~ 10-07 给 <body> 挂 .nd-bg，
   10 月 8 日 0 点起 isNationalDay() 返回 false，class 自动摘除，背景恢复原米白 --bg。
   底图 assets/img/national-day-bg.jpg（1920×843，约 2.28:1 横幅）：淡粉米白渐变底 + 右侧红绸飘带 → 金色粒子 + 飘浮红色爱心，
   左侧大面积浅色留白（正好留给首页文案）。桌面 cover + fixed 铺满视口、顶部对齐；
   窄屏改随内容滚动、整幅宽度铺在顶部作装饰带，下方仍为米白，避免竖屏被裁得只剩中间留白。
   换图：覆盖同名文件并 bump 下面两处 ?v= 戳（与其它宣传图同样的缓存破坏口径）。 */
body.nd-bg{background:#f5f1ea url("../img/national-day-bg.jpg?v=7") center top / cover no-repeat fixed}
@media (max-width:760px){
  body.nd-bg{background:#f5f1ea url("../img/national-day-bg.jpg?v=7") center top / 100% auto no-repeat scroll}
}

/* ===== #/wb 单词默写本 · 纸质听写版本切换条窄屏适配（≤420px）=====
   切换条 .wb-seg 内含 4 个不换行按钮（人教版 / 译林版 / 沪教牛津版 / 外研版），
   在 ≤760 断点下仍为 font-size:13px + padding:9px 18px，整条约 345px；而 main 内宽 = 视口 - 44，
   故视口 < 389px 时整条会左右溢出（320px 下实测溢出 13px）。这里收窄内边距与字号，
   保持单行 + 滑块指示器不变（wbPaintThumb 动态读 padding，滑块自动跟随）。 */
@media (max-width:420px){
  .wb-vbtn{font-size:12.5px;padding:8px 9px}
  .wb-seg{gap:2px;padding:3px}
}
/* ================================================================================
   App 端（套壳 APK / PWA 独立窗口）专属：**底部 Tab 栏 + 全部模块抽屉**
   -------------------------------------------------------------------------------
   需求演进（2026-10-03）：
     v1「App端不显示公告，导航最多排 3 行」→ 实现为顶栏导航换 3 行。
     v2 用户反馈：「操控感还是页面，上次做的是底部有 tab 的移动端体验」→ 重构为原生 App 范式。

   设计（对齐主站 /opt/yingyumofa 的 #mobileTabBar 交互，视觉沿用本站品牌色）：
     · 顶栏：只留品牌 + 「全部模块」九宫格按钮（.topnav 隐藏，公告条隐藏）
     · 底部：6 个固定 Tab（首页 / 课本 / 听力 / 口语 / 阅读 / 我的），
       高度 58px + env(safe-area-inset-bottom)，点击即时高亮 + hash 路由
     · 抽屉：从底部升起的「全部模块」面板，收纳全部 14 个功能入口（Tab 装不下的走这里）
     · 正文预留 --app-tabh 底部内边距，避免被 Tab 栏遮住最后一屏

   所有规则挂在 `body.app-shell` 下（app.js 的 isAppShell() 命中才加），
   **手机浏览器与电脑端完全不命中，行为零变化。**
   ================================================================================ */

/* ---- ① 顶栏：隐藏公告条与横向导航，只留品牌 + 全部模块按钮 ---- */
body.app-shell .hj-ann{display:none !important}
body.app-shell .topnav{display:none !important}          /* 14 项入口全部下沉到 Tab / 抽屉 */
body.app-shell .topbar{
  flex-wrap:nowrap;padding:8px 12px;gap:10px;
  padding-top:calc(8px + env(safe-area-inset-top));
  background:rgba(245,241,234,.96);
}
body.app-shell .brand{flex:1;min-width:0;gap:10px}
body.app-shell .brand-logo-text{height:26px}
body.app-shell .brand-mark{display:none}                  /* 右侧品牌标识让位给菜单按钮 */
body.app-shell #hjAppMenuBtn{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:40px;height:40px;border-radius:12px;cursor:pointer;
  background:#fff;border:1px solid var(--line);color:var(--cta);
  box-shadow:0 2px 8px rgba(30,90,150,.10);
}
body.app-shell #hjAppMenuBtn svg{width:21px;height:21px}
body.app-shell #hjAppMenuBtn:active{transform:scale(.94);background:#f1f7fd}
/* 非 App 端隐藏该按钮 */
#hjAppMenuBtn{display:none}

/* ---- ①b 顶栏右上角：消息中心入口（位于「全部模块」按钮左侧） ----
   背景：会员端 IM 的常驻入口原本是左下角悬浮球（.hj-im-entry，member.js 注入），
        在 App 端正好压在底部 Tab 栏的「首页」按钮上（截图反馈「遮挡首页按钮」）。
        现 App 端统一改为顶栏右上角入口：非 App 端隐藏，仍用左下角悬浮球。 */
#hjImTopBtn{display:none}
body.app-shell #hjImTopBtn{
  display:inline-flex;align-items:center;justify-content:center;position:relative;flex:0 0 auto;
  width:40px;height:40px;border-radius:12px;cursor:pointer;
  background:#fff;border:1px solid var(--line);color:var(--cta);
  box-shadow:0 2px 8px rgba(30,90,150,.10);
}
body.app-shell #hjImTopBtn:active{transform:scale(.94);background:#f1f7fd}
body.app-shell #hjImTopBtn .hj-im-top-ic{font-size:19px;line-height:1}
body.app-shell #hjImTopBtn .hj-im-badge{
  position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 5px;border-radius:10px;
  background:#ff3b5c;color:#fff;font-size:11px;font-weight:800;line-height:17px;text-align:center;
  border:2px solid #fff;box-sizing:content-box;
}
/* 「全部模块」按钮：图标 + 文字标签 */
body.app-shell #hjAppMenuBtn{width:auto;padding:0 12px 0 9px;gap:6px}
body.app-shell #hjAppMenuBtn .hj-am-tx{font-size:12.5px;font-weight:800;line-height:1;letter-spacing:.4px}
/* App 端：隐藏左下角悬浮「消息」入口（会被顶栏入口取代，且它压住底部「首页」Tab） */
body.app-shell .hj-im-entry{display:none !important}
/* App 端：收到的消息弹窗改到右上角（顶栏下方右对齐），不再遮挡底部 Tab 栏 */
body.app-shell .hj-im-dock{
  top:calc(62px + env(safe-area-inset-top));bottom:auto;left:auto;right:12px;align-items:flex-end;
}
/* 抽屉升起时一并收起弹窗，避免浮在面板之上 */
body.app-shell.hj-drawer-open .hj-im-dock{opacity:0;pointer-events:none;transition:opacity .18s}

/* ---- ② 正文底部留白：Tab 栏高 + 安全区（避免遮住最后一屏 / 页脚） ---- */
body.app-shell{--app-tabh:calc(58px + env(safe-area-inset-bottom,0px))}
body.app-shell main#app{padding-bottom:var(--app-tabh)}
body.app-shell .foot{padding-bottom:calc(18px + var(--app-tabh))}
body.app-shell #hjVisitBand{margin-bottom:var(--app-tabh)}
/* 点读页 / 练嘴巴自带底部条：让它们抬到 Tab 栏之上 */
body.app-shell .tts-bar{bottom:calc(var(--app-tabh) + 8px)}
body.app-shell .mt-player{bottom:calc(var(--app-tabh) + 8px)}
/* 全屏点读（pg-full）隐藏顶栏的同时也隐藏 Tab 栏，还原沉浸阅读 */
body.app-shell.pg-full #hjTabBar,
body.app-shell.pg-full #hjDrawer,
body.app-shell.pg-full #hjDrawerMask{display:none !important}
body.app-shell.pg-full main#app{padding-bottom:0}

/* ---- ③ 底部 Tab 栏 ---- */
#hjTabBar{display:none}
body.app-shell #hjTabBar{
  display:flex;position:fixed;left:0;right:0;bottom:0;z-index:210;
  height:var(--app-tabh);padding-bottom:env(safe-area-inset-bottom,0px);
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -2px 14px rgba(30,90,150,.07);
}
.hj-tab{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:none;border:0;padding:0 1px;cursor:pointer;
  color:rgba(26,26,24,.5);font-size:10.5px;font-weight:700;letter-spacing:0;
  font-family:inherit;transition:color .18s,transform .18s;
}
.hj-tab .hj-tab-ic{font-size:20px;line-height:1;filter:grayscale(.55) opacity(.75);transition:filter .18s,transform .18s}
/* 6 个 Tab 均分 390px → 每格 ≈65px；「磨耳朵/练嘴巴/刷真题」三字标签在 10.5px 下约需 34px，
   加上 emoji 挤压后 nowrap+ellipsis 会截成「磨…」——故放开 nowrap 并允许缩到 10px。 */
.hj-tab .hj-tab-tx{max-width:100%;white-space:nowrap;font-size:10.5px;line-height:1.1}
.hj-tab:active{transform:scale(.93)}
.hj-tab.hj-tab-on{color:var(--cta)}
.hj-tab.hj-tab-on .hj-tab-ic{filter:none;transform:translateY(-1px) scale(1.1)}
/* Tab 上的小红点（消息 / 反馈未读，由 member.js 写入 data-hj-badge） */
.hj-tab{position:relative}
.hj-tab[data-badge="1"]::after{
  content:"";position:absolute;top:6px;left:calc(50% + 8px);
  width:7px;height:7px;border-radius:50%;background:#e5484d;
  box-shadow:0 0 0 2px rgba(255,255,255,.97);
}

/* ---- ④ 全部模块抽屉（底部升起面板） ---- */
/* ⚠ 关键修复（2026-10-03）：遮罩必须「默认不吃点击」。
   旧写法 `body.app-shell #hjDrawerMask{display:block}` 把遮罩强制显示，
   而 pointer-events 默认就是 auto —— 于是一层 opacity:0 的透明全屏层
   （z-index:220 > Tab 栏 210）常驻，吞掉了 App 端**所有**真实触摸/点击，
   表现为「点击没反应、底部 Tab 按不动」（程序化 dispatchEvent 仍能过，
   所以只测事件派发的探针查不出来 —— 必须用 elementFromPoint 或坐标点击）。
   修法：显隐全交给 CSS（HTML 上的 hidden 属性已移除，其 UA display:none
   会压过作者样式），关闭态 visibility:hidden + pointer-events:none，
   只有 body.hj-drawer-open 时才真正激活。 */
#hjDrawerMask{
  display:none;position:fixed;inset:0;z-index:220;
  background:rgba(26,26,24,.42);opacity:0;
  visibility:hidden;pointer-events:none;
  transition:opacity .26s ease,visibility .26s;
}
#hjDrawer{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:230;
  max-height:82vh;flex-direction:column;
  background:#fffdf9;border-radius:20px 20px 0 0;
  box-shadow:0 -8px 32px rgba(26,26,24,.22);
  transform:translateY(102%);transition:transform .3s cubic-bezier(.22,.85,.24,1);
  padding-bottom:env(safe-area-inset-bottom,0px);
  visibility:hidden;pointer-events:none;   /* 同上：未升起时不可点 */
}
body.app-shell #hjDrawerMask{display:block}
body.app-shell #hjDrawer{display:flex}
body.app-shell.hj-drawer-open #hjDrawerMask{opacity:1;pointer-events:auto;visibility:visible}
body.app-shell.hj-drawer-open #hjDrawer{transform:translateY(0);visibility:visible;pointer-events:auto}
/* 抽屉升起时收起 IM 悬浮入口（member.js 注入的 .hj-im-entry，z-index:9990），
   否则它会浮在抽屉之上（表现为左下角一个蓝紫圆圈悬在面板中）。 */
body.app-shell.hj-drawer-open .hj-im-entry{opacity:0;pointer-events:none;transform:scale(.7);transition:opacity .18s,transform .18s}
.hjd-head{
  display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;
  padding:16px 16px 12px;border-bottom:1px solid var(--line);
}
.hjd-title{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:800;color:var(--ink)}
.hjd-title svg{width:18px;height:18px;color:var(--cta)}
.hjd-close{
  width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:#fff;
  font-size:21px;line-height:1;color:var(--ink2);cursor:pointer;font-family:inherit;
}
.hjd-close:active{background:#f3efe7}
.hjd-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 12px calc(20px + var(--app-tabh))}
/* 抽屉内分组标题 */
.hjd-group{font-size:11.5px;font-weight:800;color:var(--ink2);letter-spacing:.6px;margin:10px 4px 8px}
.hjd-group:first-child{margin-top:2px}
/* 抽屉内九宫格按钮 */
.hjd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hjd-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:11px 3px 9px;border-radius:13px;cursor:pointer;text-decoration:none;
  background:#faf7f1;border:1px solid #efe8db;color:var(--ink);
  font-size:11px;font-weight:700;line-height:1.25;text-align:center;
  min-height:66px;font-family:inherit;
}
.hjd-item .hj-d-ic{font-size:21px;line-height:1}
.hjd-item .hj-d-tx{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hjd-item:active{background:#f1f7fd;border-color:#dbe8f7;transform:scale(.96)}
.hjd-item.hj-d-on{background:#f1f7fd;border-color:var(--cta);color:var(--cta)}
/* 抽屉内「当前所在」高亮（同步路由） */
.hjd-item.hj-d-cur{box-shadow:inset 0 0 0 2px var(--cta)}

/* ---- ⑤ 极窄屏（≤360px）微调 ---- */
@media(max-width:360px){
  .hj-tab{font-size:9.5px}
  .hj-tab .hj-tab-ic{font-size:18px}
  .hjd-grid{grid-template-columns:repeat(3,1fr)}
}


/* ================================================================================
   移动端 · 朗读语音面板（2026-10-03）
   -------------------------------------------------------------------------------
   把 #ttsBar 从「窄屏常驻 3 行白块」改为「功能区按需升起的抽屉面板」：
     · 面板 #hjVoicePanel / 语音球 #hjVoiceFab / 遮罩 #hjVoiceMask 默认 display:none；
     · ≤900px（或触屏 ≤1366px，与 app.js isVoicePanelScope() 同口径）才 display:block；
     · 语音球放**左下**（右下已被 .pg-fab 图层球占用，同位会重叠成双层圆钮）；
     · body.hj-vopen 时底部点句条 .pg-sentbar 让位（translateY 移出视口），
       语音面板 z-index 7600 高于 .pg-sheet(7500)，结构上不可能重叠；
     · 搬进面板后的 #ttsBar 需解除 fixed/translateX 回到文档流（选择器带 body 前缀，
       压过 body.pg-has-sent / body.app-shell 的 bottom 规则，特异性 (0,2,1) + 后置胜出）。

   ⚠ 桌面端还原（关键）：若用户先在移动端建过面板，#ttsBar 已移入容器，若容器仍是
     display:none，常驻语音条会一起消失（=功能丢失）。故对「移动端作用域的补集」
     —— (min-width:901px) and (pointer:fine) 或 (min-width:1367px) —— 把容器还原为
     display:contents：容器自身不产生盒子，子元素 #ttsBar 回到 body 级的
     position:fixed 定位，与改动前逐像素一致；同时隐藏面板专属的标题行与提示行。
   ================================================================================ */
.hj-vpanel,.hj-vfab,.hj-vmask{display:none}

/* ---------- 移动端整页舞台（2026-10-03 移植自 Demo）+ 语音面板避让 App 底栏 ---------- */
/* ================================================================================
 * 移动端「按页点读」整页舞台 · 样式（2026-10-03· 移植自 /demo/pr/）
 * ----------------------------------------------------------------------------
 * 全部包在 @media(max-width:900px),(pointer:coarse) and (max-width:1366px) 内，
 * 桌面端一条规则都不生效 → 桌面点读页逐像素零影响。
 * 命名前缀统一 pgm-，绝不与生产 .pg-* / .explain-* / .hj-v* 撞名。
 * body.pgm-on 时：本舞台盖住生产 .page-reader；离开点读路由时 pgmClose() 摘class 还原。
 * ================================================================================ */
.pgm-root{display:none}
@media(max-width:900px),(pointer:coarse) and (max-width:1366px){
  body.pgm-on #pgmStage{display:flex}
  body.pgm-on .page-reader{display:none}          /* 生产点读页在移动端让位给整页舞台 */
  body.pgm-on #hjTabBar{display:none}             /* 舞台自带底部功能条，隐藏 App 端 6Tab 免双底栏 */
  body.pgm-on{overflow:hidden}

  .pgm-root{
    position:fixed;inset:0;z-index:7200;display:none;
    flex-direction:column;background:#eef1f6;color:#22272e;
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
    -webkit-tap-highlight-color:transparent;
  }
  .pgm-root *{box-sizing:border-box}

  /* ---------- 顶栏 ---------- */
  .pgm-top{
    /* [P1-c 安全区] padding-top 叠 env(safe-area-inset-top)：iPhone X/灵动岛机型
       顶栏原本会被刘海遮住。写成 calc 而不是新加一条规则 —— 后者会被 padding 简写覆盖。 */
    flex:0 0 auto;display:flex;align-items:center;gap:8px;
    padding:calc(8px + env(safe-area-inset-top,0px)) 10px 8px;
    background:#fff;border-bottom:1px solid #e3e7ec;position:relative;z-index:6;
  }
  .pgm-bk{
    width:32px;height:32px;border-radius:9px;border:1px solid #e3e7ec;background:#fff;
    display:flex;align-items:center;justify-content:center;font-size:16px;color:#5b6672;cursor:pointer;
  }
  .pgm-ttl{flex:1;min-width:0}
  .pgm-ttl b{display:block;font-size:13.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pgm-ttl span{display:block;font-size:10.5px;color:#5b6672;margin-top:1px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pgm-pg{
    flex:0 0 auto;font-size:12px;font-weight:800;color:#1e5a96;
    background:#eaf2fa;border-radius:999px;padding:5px 11px;position:relative;
  }
  .pgm-pg.chain{background:#fff3d6;color:#a06b00}
  .pgm-pg.chain::after{
    content:"连读中";position:absolute;right:-2px;top:-7px;font-size:9px;
    background:#e8452c;color:#fff;border-radius:6px;padding:0 4px;font-weight:700;
  }

  /* ---------- 舞台 ---------- */
  .pgm-stage{flex:1 1 auto;position:relative;overflow:hidden;background:#eef1f6;touch-action:pan-y}
  .pgm-slide{
    position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;
    padding:10px 8px 14px;will-change:transform,opacity;
    transition:transform .26s cubic-bezier(.22,.7,.3,1),opacity .26s;
  }
  .pgm-slide.out-l{transform:translateX(-100%);opacity:.4}
  .pgm-slide.out-r{transform:translateX(100%);opacity:.4}
  .pgm-slide.in-l{transform:translateX(100%)}
  .pgm-slide.in-r{transform:translateX(-100%)}
  .pgm-pagebox{
    position:relative;width:100%;max-width:374px;flex:0 0 auto;line-height:0;
    box-shadow:0 2px 10px rgba(20,30,45,.10);border-radius:4px;overflow:hidden;background:#fff;
  }
  .pgm-pagebox img{width:100%;display:block;-webkit-user-drag:none;user-drag:none}
  /* [P1-a 平板档] 原 .pgm-pagebox 的 max-width:374px 是按手机定的；iPad 竖屏(820px 宽)
     实测页图仍只有 374px 宽、占屏高 45%，两侧大量留白、字偏小。
     只在「确实很宽的视口」放开（min-width:700px），手机档仍走原 374px，观感零变化。
     写成并列选择器而不是嵌套 @media —— 避免与外层 (pointer:coarse) 查询再套一层，
     也保证它在任何 .pgm-root 作用域下都能命中。 */
  @media (min-width:700px){ .pgm-pagebox{max-width:min(560px,78vw)} }

  /* 热点：默认隐形（点哪都响应），点读时才显形 */
  .pgm-hs{
    position:absolute;border:0;padding:0;margin:0;background:transparent;border-radius:4px;
    box-shadow:inset 0 0 0 0 rgba(232,69,44,0);transition:box-shadow .12s;
  }
  .pgm-hs.on{box-shadow:inset 0 0 0 2px #e8452c;background:rgba(232,69,44,.10)}
  .pgm-hs.lit{box-shadow:inset 0 0 0 2.5px #e8452c;background:rgba(232,69,44,.18)}
  @keyframes pgmBreathe{0%,100%{box-shadow:inset 0 0 0 0 rgba(232,69,44,0)}50%{box-shadow:inset 0 0 0 2px rgba(232,69,44,.55)}}
  .pgm-hs.hint{animation:pgmBreathe 1.6s ease-in-out infinite}

  /* 引导条 */
  .pgm-tipbar{
    position:absolute;left:10px;right:10px;top:10px;z-index:5;
    background:rgba(20,30,45,.86);color:#fff;border-radius:12px;padding:9px 12px;
    font-size:12px;line-height:1.55;display:flex;gap:8px;align-items:flex-start;
    box-shadow:0 6px 20px rgba(20,30,45,.28);
  }
  .pgm-tipbar b{color:#ffd166}
  .pgm-tip-x{
    margin-left:auto;flex:0 0 auto;opacity:.8;font-size:14px;padding:0 2px;
    background:transparent;border:0;color:#fff;cursor:pointer;
  }

  /* 滑动提示箭头 */
  .pgm-swipe{
    position:absolute;top:50%;transform:translateY(-50%);z-index:4;pointer-events:none;
    color:#fff;background:rgba(20,30,45,.34);width:26px;height:56px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;font-size:15px;opacity:0;transition:opacity .25s;
  }
  .pgm-swipe.l{left:2px}.pgm-swipe.r{right:2px}
  .pgm-swipe.on{opacity:1;animation:pgmNudgeR 1.5s ease-in-out infinite}
  @keyframes pgmNudgeR{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(3px)}}
  .pgm-swipe.l.on{animation-name:pgmNudgeL}
  @keyframes pgmNudgeL{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(-3px)}}

  /* ---------- 蒙版字幕条 ---------- */
  .pgm-subs{
    position:absolute;left:0;right:0;bottom:0;z-index:7;
    background:linear-gradient(180deg,#3a4353 0%,#2c3441 100%);
    color:#fff;padding:12px 14px 12px;
    transform:translateY(102%);transition:transform .24s cubic-bezier(.22,.7,.3,1);
    box-shadow:0 -4px 18px rgba(0,0,0,.18);
  }
  body.app-shell .pgm-subs{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .pgm-subs.up{transform:translateY(0)}
  .pgm-subs.chain{background:linear-gradient(180deg,#3d4a5e 0%,#2b3646 100%)}
  .pgm-subs.chain::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#ffd166;
    animation:pgmPulse 1.1s ease-in-out infinite;
  }
  @keyframes pgmPulse{0%,100%{opacity:.35}50%{opacity:1}}
  .pgm-sp{
    display:none;position:absolute;top:8px;left:12px;font-size:10.5px;color:#ffd166;
    background:rgba(255,209,102,.14);border-radius:6px;padding:1px 6px;
  }
  .pgm-subs-row{display:flex;align-items:flex-start;gap:10px}
  .pgm-en{flex:1;min-width:0}
  .pgm-en b{display:block;font-size:16.5px;line-height:1.42;font-weight:700;letter-spacing:.1px}
  .pgm-en i{display:block;font-style:normal;font-size:13.5px;line-height:1.5;color:#d8e0ea;margin-top:4px}
  .pgm-en i.empty{color:#93a0b1;font-style:italic}
  .pgm-w{transition:color .1s}
  .pgm-w.hit{color:#ffd166}
  .pgm-side{flex:0 0 auto;display:flex;flex-direction:column;gap:6px}
  .pgm-mini{
    background:rgba(255,255,255,.1);color:#cfd8e3;border:0;border-radius:8px;
    font-size:11px;padding:4px 9px;cursor:pointer;white-space:nowrap;
  }
  .pgm-mini.pgm-ex{background:rgba(255,209,102,.18);color:#ffd166}
  .pgm-pgline{height:2px;background:rgba(255,255,255,.14);border-radius:2px;margin-top:8px;overflow:hidden}
  .pgm-pgline i{display:block;height:100%;width:0;background:#ffd166;border-radius:2px;transition:width .2s}
  .pgm-meta{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:10.5px;color:#93a0b1}
  .pgm-meta-btns{margin-left:auto;display:flex;gap:6px}

  /* ---------- 悬浮功能球 + 面板 ---------- */
  .pgm-fab{
    position:absolute;right:10px;bottom:12px;z-index:9;
    width:48px;height:48px;border-radius:50%;border:0;
    background:linear-gradient(140deg,#2a6fb0,#1b4f80);color:#fff;font-size:21px;
    box-shadow:0 6px 18px rgba(20,40,70,.34);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .pgm-fab:active{transform:scale(.94)}
  .pgm-sheet{
    position:absolute;right:10px;bottom:12px;z-index:8;
    display:flex;flex-direction:column-reverse;gap:8px;align-items:center;
    opacity:0;transform:translateY(8px) scale(.9);transform-origin:bottom right;
    transition:opacity .18s,transform .18s;pointer-events:none;
  }
  .pgm-sheet.up{opacity:1;transform:none;pointer-events:auto}
  .pgm-it{
    position:relative;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#1e5a96;
    box-shadow:0 3px 12px rgba(20,40,70,.20);cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  }
  .pgm-it em{font-style:normal;font-size:16px;line-height:1}
  .pgm-it span{font-size:9px;color:#5b6672;line-height:1;transform:scale(.94)}
  .pgm-it.act{background:#1e5a96;color:#fff}
  .pgm-it.act span{color:#d6e6f5}

  /* ---------- 底部主功能条 ---------- */
  .pgm-dock{
    flex:0 0 auto;background:#fff;border-top:1px solid #e3e7ec;
    padding:6px 4px 6px;display:flex;align-items:flex-end;gap:2px;position:relative;z-index:6;
  }
  body.app-shell .pgm-dock{padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
  .pgm-d{
    flex:1;min-width:0;border:0;background:transparent;color:#1e5a96;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0 2px;border-radius:10px;
  }
  .pgm-d em{font-style:normal;font-size:18px;line-height:1.1}
  .pgm-d span{font-size:10px;line-height:1.1;color:#5b6672;white-space:nowrap}
  .pgm-d:active{background:#f2f6fa}
  .pgm-d-main{flex:0 0 54px}
  .pgm-d-main em{
    width:44px;height:44px;border-radius:50%;background:#1e5a96;color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:19px;
    box-shadow:0 3px 10px rgba(30,90,150,.32);
  }
  .pgm-d-main.playing em{background:#e8452c}

  /* ---------- 目录抽屉 ---------- */
  .pgm-drawer{position:absolute;inset:0;z-index:12;display:none}
  .pgm-drawer.up{display:block}
  .pgm-dmask{position:absolute;inset:0;background:rgba(10,15,22,.42)}
  .pgm-dpn{
    position:absolute;left:0;right:0;bottom:0;height:62%;background:#fff;
    border-radius:16px 16px 0 0;padding:12px 12px 12px;display:flex;flex-direction:column;gap:8px;
    animation:pgmUp .24s cubic-bezier(.22,.7,.3,1);
  }
  body.app-shell .pgm-dpn{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  @keyframes pgmUp{from{transform:translateY(30px);opacity:.5}to{transform:none;opacity:1}}
  .pgm-dh{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800}
  .pgm-dh b{color:#1e5a96}
  .pgm-dx{margin-left:auto;font-size:17px;color:#5b6672;background:transparent;border:0;cursor:pointer}
  .pgm-dgrid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:7px;align-content:start}
  .pgm-dgrid button{
    border:1px solid #e3e7ec;background:#fff;border-radius:9px;padding:8px 0;
    font-size:12px;color:#22272e;position:relative;cursor:pointer;
  }
  .pgm-dgrid button.on{background:#1e5a96;color:#fff;border-color:#1e5a96;font-weight:700}
  .pgm-dgrid button.q::after{
    content:"";position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:#e8452c;
  }
  .pgm-dgrid button.on.q::after{background:#fff}

  /* ---------- toast ---------- */
  .pgm-toast{
    position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:20;
    background:rgba(20,30,45,.9);color:#fff;font-size:13px;padding:9px 16px;border-radius:10px;
    opacity:0;pointer-events:none;transition:opacity .2s;max-width:80%;text-align:center;
  }
  .pgm-toast.on{opacity:1}

  /* 语音面板升起时字幕让位（声音继续播，不打断） */
  body.pgm-on.hj-vopen .pgm-subs{transform:translateY(102%)}
  body.pgm-on.hj-vopen .pgm-fab{opacity:0;pointer-events:none}
}

/* 语音面板 bug 修复：套壳App 底部有 6 个 Tab 栏（#hjTabBar z=210），
   而语音面板 z=7600 且 bottom:0 → 会把整个 Tab 栏盖住，点不到。
   修法：App 端把面板整体抬高一个 Tab 栏高度（--app-tabh 由 body.app-shell 定义）。 */
body.app-shell .hj-vpanel{bottom:var(--app-tabh)}
body.app-shell .hj-vmask{bottom:var(--app-tabh)}
/* [P1-b 重叠] 上面两条写在 PGM 的 @media 之外，于是「套壳 + PGM」同时成立时，
   语音面板仍按 Tab 栏高度抬高；但 PGM 已经把 Tab 栏藏了
   （body.pgm-on #hjTabBar{display:none}），实测面板底边压住 PGM 底部功能条 6px。
   这里用更具体的选择器把 bottom 打回 0，只影响「套壳且正在看 PGM」这一种组合，
   其余场景（普通点读页需避让 Tab 栏）保持原样。 */
body.app-shell.pgm-on .hj-vpanel{bottom:0}
body.app-shell.pgm-on .hj-vmask{bottom:0}
/* 同理，语音球的 App 端定位已有 --app-tabh 叠加，这里确认不与 Tab 栏重叠 */


@media (min-width:901px) and (pointer:fine), (min-width:1367px){
  .hj-vpanel{display:contents}
  .hj-vpanel>.hj-vp-h{display:none}
}

@media(max-width:900px),(pointer:coarse) and (max-width:1366px){
  /* 遮罩：点它收起面板。用 visibility 而非仅 opacity —— opacity:0 仍会吞点击。 */
  .hj-vmask{display:block;position:fixed;inset:0;z-index:7550;background:rgba(15,22,38,.45);
    opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
  .hj-vmask.open{opacity:1;visibility:visible}

  /* 语音面板：贴底抽屉，max-height 88vh 内部滚动，超高内容不会溢出视口 */
  .hj-vpanel{display:block;position:fixed;left:0;right:0;bottom:0;z-index:7600;
    max-height:88vh;overflow:auto;-webkit-overflow-scrolling:touch;
    background:#fff;border-radius:18px 18px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -10px 34px rgba(20,30,60,.26);
    transform:translateY(112%);visibility:hidden;transition:transform .24s ease,visibility .24s ease}
  .hj-vpanel.open{transform:translateY(0);visibility:visible}
  .hj-vp-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .hj-vp-h b{font-size:15.5px;color:var(--ink)}
  .hj-vp-x{border:0;background:#f0f3f9;border-radius:50%;width:30px;height:30px;
    font-size:14px;color:#5b6780;cursor:pointer}
  /* 原 .hj-vp-tip 规则已删：说明文案回归既有 #ttsBar .tip，避免重复（CDP 视觉验收发现）。 */
  /* 面板开口时让既有 IM 入口球（#hjImEntry z=9990）一并让位：否则它会压在面板左下角。 */
  body.hj-vopen .hj-im-entry{opacity:0;visibility:hidden;pointer-events:none}

  /* 语音球：左下固定（右下留给 .pg-fab 图层球）；App 端再叠上底部 Tab 栏高度 */
  .hj-vfab{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
    position:fixed;left:14px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:7200;
    width:54px;height:54px;border:0;border-radius:50%;cursor:pointer;padding:0;
    background:linear-gradient(135deg,#1e5a96,#4b8fd6);color:#fff;
    box-shadow:0 8px 22px rgba(20,70,140,.32);font-size:19px;line-height:1}
  .hj-vfab b{font-size:10.5px;font-weight:700;margin-top:2px}
  .hj-vfab:active{transform:scale(.94)}
  body.app-shell .hj-vfab{bottom:calc(var(--app-tabh) + 84px)}

  /* 面板升起时：底部点句条让位（移出视口，不靠 opacity:0）；语音球同步隐藏防重叠 */
  body.hj-vopen .pg-sentbar{transform:translateY(112%);pointer-events:none}
  body.hj-vopen .hj-vfab{opacity:0;visibility:hidden;pointer-events:none}

  /* 搬进面板后的 #ttsBar：解除 fixed/translateX/nowrap，回到面板内的块级卡片。
     选择器带 body 前缀 → 特异性 (0,2,1)，压过 body.pg-has-sent / body.app-shell 的 bottom。 */
  body .hj-vpanel .tts-bar{position:static;left:auto;right:auto;bottom:auto;transform:none;
    display:flex;max-width:none;width:100%;white-space:normal;flex-wrap:wrap;
    justify-content:flex-start;gap:8px 10px;border-radius:14px;box-shadow:none;
    padding:10px 12px;background:var(--soft);border:1px solid var(--line);font-size:13px;z-index:auto}
  body .hj-vpanel .tts-bar select{flex:1 1 100%;min-width:0;max-width:100%;width:100%}
  body .hj-vpanel .tts-bar .tip{display:block;flex:1 1 100%;white-space:normal;
    font-size:11.5px;line-height:1.6;color:var(--ink2)}
  body .hj-vpanel .tts-bar .mini{flex:0 0 auto}

  /* 语音条迁入面板后，撤掉原为「常驻 3 行浮条」预留的 92px 底部空白；
     改由 .pg-sentbar 出现时按其实际高度预留（点句条是 fixed 贴底浮层）。 */
  body.hj-vwrap:not(.pg-full) main{padding-bottom:16px}
  body.hj-vwrap.pg-has-sent:not(.pg-full) main{padding-bottom:88px}
}


/* ===== 国庆灯笼「国庆快乐」（v8）=====
   与 body.nd-bg 同生命周期：仅首页 + 10/01~10/07 显示，10/08 00:00 自动随底图消失。
   为什么不用 AI 出图：生图写中文必然糊/错字，而「国庆快乐」必须准确 → 灯笼纯 CSS 画，文字走真文本。
/* 定位：position:fixed 悬挂视口顶部两侧，z-index 极低 + pointer-events:none，
   既能被看见、又绝不吞掉任何点击。
   ⚠ top 取「顶栏实际底边(63px) + 呼吸间距(15px)」= 78px：绳头不能贴到 63px，
   否则视觉上像"插进导航栏"（T5 实测判据：lanternTop 必须 > topbarBottom）。 */
.nd-lanterns{position:fixed;inset:0;z-index:1;pointer-events:none;display:none}
body.nd-bg .nd-lanterns{display:block}
.nd-lantern{position:fixed;top:78px;width:74px;pointer-events:none;
  transform-origin:50% 0;animation:ndLanternSway 5.2s ease-in-out infinite}
.nd-lantern-l{left:16px}
.nd-lantern-r{right:16px;animation-duration:5.8s;animation-delay:-1.4s}
/* 吊绳 */
.nd-lantern-cord{display:block;width:2px;height:20px;margin:0 auto;
  background:linear-gradient(180deg,rgba(180,120,40,.05),rgba(198,140,52,.85))}
/* 灯身：上窄下宽的椭圆灯笼，红绸渐变 + 上下金箍 + 中缝 */
.nd-lantern-body{display:flex;align-items:center;justify-content:center;
  width:74px;height:88px;border-radius:50%/46%;position:relative;
  background:
    /* 中缝高光 */
    linear-gradient(90deg,rgba(0,0,0,.16),rgba(255,255,255,.22) 38%,rgba(0,0,0,.14)),
    /* 竖向金线 */
    repeating-linear-gradient(90deg,rgba(255,215,120,.30) 0 2px,rgba(0,0,0,0) 2px 14px),
    /* 主体红绸 */
    radial-gradient(ellipse at 50% 34%,#ff7a5e 0%,#e6392c 48%,#c0201c 78%,#9d1512 100%);
  box-shadow:inset 0 -8px 18px rgba(120,10,10,.35),0 6px 16px rgba(150,25,20,.28);
  border-top:4px solid #d9a441;border-bottom:4px solid #d9a441}
.nd-lantern-body>b{display:block;font-size:15px;line-height:1.16;font-weight:900;
  letter-spacing:0;color:#ffe9a8;text-align:center;
  text-shadow:0 1px 0 rgba(150,20,15,.75),0 0 6px rgba(255,225,150,.35);
  font-family:"STZhongsong","Songti SC","SimHei","Microsoft YaHei",serif}
/* 流苏 */
.nd-lantern-tassel{display:block;width:9px;height:20px;margin:3px auto 0;
  background:linear-gradient(180deg,#e0b257,#c9973c 60%,#a8791f);
  clip-path:polygon(50% 0,100% 16%,74% 100%,50% 84%,26% 100%,0 16%)}
@keyframes ndLanternSway{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
/* 窄屏（≤900px）：只保留右侧一只灯笼。
   理由（截图实证）：窄屏 hero 标题「给孩子请一位AI英语陪读老师」几乎占满整行，
   左右各一只会夹住标题两端、显得拥挤；单只挂在右上角最清爽，也不压任何可点内容。 */
@media (max-width:900px){
  .nd-lantern{width:56px;top:64px;transform:scale(.84);transform-origin:50% 0}
  .nd-lantern-body{width:56px;height:68px;border-top-width:3px;border-bottom-width:3px}
  .nd-lantern-body>b{font-size:12px}
  .nd-lantern-l{display:none}
  .nd-lantern-r{right:4px}
}