/* ============================================================
   语文教材册（chinesebook）页面样式
   三段组合，保持静态版 primary 的层叠顺序（books → knowledge → study-theme）：
   1. books.css 子集：工具栏 / 搜索单元头基座 / 网格
   2. knowledge.css 全文：语文页专属样式（打印块按平台站点微调）
   3. study-theme.css 语文子集：学习页主题对语文页元素的覆写
   2、3 段的类名均为本页专属，不与 platform.css 冲突，故不再逐条加前缀。
   ============================================================ */

/* ============ 1. books.css 子集 ============ */
.study-page .toolbar { display: flex; align-items: stretch; gap: 10px; margin: 0 0 20px; flex-wrap: wrap; }
.study-page .search-box {
  flex: 1 1 240px; min-width: 0; display: flex; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px 12px;
}
.study-page .search-box:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px #4d96ff18; }
.study-page .search-box input {
  flex: 1; width: 100%; border: none; outline: none; font-size: 16px; padding: 10px 6px;
  font-family: inherit; background: none; color: var(--ink); min-width: 0;
}
.study-page .play-btn {
  background: linear-gradient(135deg, #67d38b, #2fbf71); color: #fff;
  border: none; border-radius: 14px; padding: 12px 18px;
  font-size: 15px; font-weight: 800; box-shadow: 0 3px 0 #1f9d5b;
  white-space: nowrap;
}
.study-page .play-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #1f9d5b; }
.study-page .wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; align-items: start; }
.study-page .unit-head {
  display: flex; align-items: center; gap: 14px; margin: 0 0 22px;
  border-left: 5px solid var(--c); padding: 16px 18px;
  background: var(--card); border-radius: 16px; border-block: 1px solid var(--line); border-right: 1px solid var(--line);
}
.study-page .unit-emoji { font-size: 36px; flex-shrink: 0; }
.study-page .unit-head h1 { font-size: clamp(20px, 1.5vw, 25px); font-weight: 900; overflow-wrap: anywhere; }
.study-page .unit-head p { color: var(--muted); font-size: 14px; font-weight: 600; }
.study-page .search-head { font-weight: 800; margin: 4px 2px 12px; color: #5a5570; }
.study-page .empty {
  background: var(--card); border-radius: 20px; padding: 40px 20px;
  text-align: center; font-size: 18px; font-weight: 700; color: var(--muted);
  box-shadow: 0 4px 14px rgba(61, 58, 75, .07);
}

/* ============ 2. knowledge.css 全文 ============ */
/* ============================================================
   乐学堂 · 语文知识点 —— 专属样式
   ============================================================ */

/* ---------- 教材横幅 ---------- */
.textbook-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 12px 16px;
  background: linear-gradient(135deg, #fdeef0, #fdf3f4);
  border: 1px solid #f5d8dc; border-radius: 14px;
  color: #a34856; font-size: 14px; font-weight: 700;
}
.textbook-banner strong { font-size: 16px; }

/* ---------- 单元导语 ---------- */
.goal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.goal-tags span {
  background: color-mix(in srgb, var(--c) 12%, white);
  border: 1px solid color-mix(in srgb, var(--c) 30%, white);
  color: #4a4f63; border-radius: 999px; padding: 3px 10px;
  font-size: 12.5px; font-weight: 700;
}

/* ---------- 课文知识卡 ---------- */
.kgrid { display: grid; gap: 20px; }
.kcard {
  --c: #4d96ff;
  position: relative;
  background: var(--card); border-radius: 18px; padding: 18px 18px 16px;
  border: 1px solid var(--line); border-top: 4px solid var(--c);
  box-shadow: 0 4px 16px rgba(40, 54, 85, .035); overflow-wrap: anywhere;
}
.kcard.learned { background: #f4fcf7; }
.khead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-right: 40px; }
.kno {
  background: color-mix(in srgb, var(--c) 14%, white); color: var(--c);
  border-radius: 8px; padding: 2px 8px; font-size: 13px; font-weight: 900; white-space: nowrap;
}
.ktitle { font-size: 22px; font-weight: 900; }
.ktag {
  border: 1.5px solid var(--c); color: var(--c);
  border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 800; white-space: nowrap;
}
.kauthor { color: var(--muted); font-size: 13px; font-weight: 700; }
.khead-gap { flex: 1; }
.kcard .say { width: 32px; height: 32px; }
.learn-btn {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid #e5decd; background: #faf7f0;
  font-size: 17px; font-weight: 900; color: #fff; line-height: 1;
}
.learn-btn.on { background: #2fbf71; border-color: #2fbf71; }
.k-overview { margin-top: 12px; font-size: 15.5px; line-height: 1.75; color: #4a4f63; }

/* ---------- 知识点小节 ---------- */
.ksec { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; }
.ksec > :last-child { min-width: 0; flex: 1; }
.seclabel {
  flex: 0 0 26px; height: 26px; margin-top: 2px;
  background: #efe8da; color: #8a8498; border-radius: 8px;
  font-size: 13px; font-weight: 900; display: grid; place-items: center;
}
.klist { list-style: none; display: grid; gap: 5px; }
.kli {
  display: block; width: 100%; text-align: left;
  border: none; background: none; padding: 2px 0;
  font-size: 14.5px; line-height: 1.7; color: #4a4f63; font-weight: 600;
}
.kli:hover { color: #2a64bc; }
.klist.tips .kli { color: #6b5320; }
.ktheme, .kcraft {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 8px 12px; border-radius: 12px;
  font-size: 14.5px; line-height: 1.75; font-weight: 600;
}
.ktheme { background: #fdf6e9; color: #7a5b18; }
.kcraft { background: #eef4fc; color: #35567e; }

/* ---------- 词语胶囊 ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.wpill {
  border: 2px solid color-mix(in srgb, var(--c) 40%, white);
  background: color-mix(in srgb, var(--c) 8%, white);
  border-radius: 10px; padding: 4px 9px; max-width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.wpill:active { transform: scale(.94); }
.wpill b { font-size: 15.5px; font-weight: 800; color: var(--c); }
.wpill i { font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.fw {
  border: 1.5px dashed #d9cfba; background: #fdfaf3;
  border-radius: 999px; padding: 4px 11px;
  font-size: 13.5px; font-weight: 800; color: #6b6580;
}
.fw:active { transform: scale(.94); }

/* ---------- 多音字 / 近反义词行 ---------- */
.polys { display: grid; gap: 6px; }
.poly-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.poly-char {
  flex: 0 0 34px; height: 34px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 14%, white); color: var(--c);
  border-radius: 10px; font-size: 19px; font-weight: 900;
}
.poly-half {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--line); background: #fafbfe;
  border-radius: 10px; padding: 4px 9px; max-width: 100%;
}
.poly-half:active { transform: scale(.94); }
.poly-py { color: #7c76a8; font-size: 13px; font-weight: 800; }
.poly-w { font-size: 13.5px; font-weight: 700; color: #4a4f63; }
.sas { display: flex; flex-direction: column; gap: 6px; }
.sa-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  text-align: left; border: 1.5px solid var(--line); background: #fafbfe;
  border-radius: 10px; padding: 6px 10px; max-width: 100%;
}
.sa-row:active { transform: scale(.98); }
.sa-row b { font-size: 15px; font-weight: 900; color: #34384d; }
.sa-n, .sa-a { font-size: 13px; font-weight: 700; border-radius: 8px; padding: 2px 8px; }
.sa-n { background: #e9f7ef; color: #1f7a4d; }
.sa-a { background: #fdeeee; color: #b04a4a; }
.krecite {
  margin-top: 12px; background: #fdf0f2; border-radius: 12px;
  padding: 9px 12px; font-size: 14px; font-weight: 800; color: #a34856;
}

/* ---------- 真实素材：作者小传 ---------- */
.kbio {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 12px;
  background: color-mix(in srgb, var(--c, #4d96ff) 7%, white);
  border: 1px dashed color-mix(in srgb, var(--c, #4d96ff) 35%, white);
  border-radius: 12px; padding: 9px 12px;
}
.kbio-ava {
  flex: 0 0 30px; height: 30px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c, #4d96ff) 14%, white);
  border-radius: 50%; font-size: 15px;
}
.kbio-body { min-width: 0; flex: 1; }
.kbio-body b { font-size: 14px; font-weight: 900; color: #34384d; margin-right: 8px; }
.kbio-body i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--c, #4d96ff); }
.kbio-body p { margin-top: 3px; font-size: 13px; line-height: 1.7; font-weight: 600; color: #5d6272; }
.kbio-poem {
  --c: #8b65c9;
  margin-top: 12px;
}

/* ---------- 真实素材：原文金句 ---------- */
.kb-quotes { display: grid; gap: 6px; }
.kb-quote {
  text-align: left; border: 1.5px solid var(--line); border-left: 4px solid var(--c);
  background: #fbfcff; border-radius: 10px; padding: 8px 12px;
  font-size: 14px; line-height: 1.75; font-weight: 700; color: #3c4256;
}
.kb-quote:hover { background: #fff; border-color: color-mix(in srgb, var(--c) 55%, white); color: var(--c); }

/* ---------- 真实素材：真实的世界 ---------- */
.klist.kbfacts .kli { color: #1e5e43; }
.klist.kbfacts .kli:hover { color: #145236; }

/* ---------- 真实素材：拓展视频 ---------- */
.kb-videos { display: grid; gap: 6px; }
.kbv {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--line); border-radius: 12px;
  background: #fff; padding: 7px 11px; min-width: 0;
  text-decoration: none; color: inherit;
}
.kbv-play {
  flex: 0 0 26px; height: 26px; display: grid; place-items: center;
  background: #fceff2; color: #e25563; border-radius: 50%;
  font-size: 11px; padding-left: 2px;
}
.kbv-main { min-width: 0; display: grid; }
.kbv-main b {
  font-size: 13.5px; font-weight: 800; color: #34384d;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kbv-main i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.kbv:hover { border-color: #f0c1ca; background: #fff8fa; }
.kbv:hover .kbv-main b { color: #c74b5d; }
.kb-videos-poem { margin-top: 12px; }

/* ---------- 单元板块 ---------- */
.ublock {
  margin-top: 20px; background: var(--card);
  border: 1px solid var(--line); border-left: 5px solid var(--c);
  border-radius: 16px; padding: 14px 18px;
}
.ublock h3 { font-size: 16.5px; font-weight: 900; margin-bottom: 8px; }
.ublock ul { display: grid; gap: 4px; padding-left: 22px; }
.ublock li { font-size: 14.5px; line-height: 1.7; color: #4a4f63; font-weight: 600; }
.ublock.writing { border-left-color: #8b65c9; }
.ublock.examples { border-left-color: #e25563; }
.ublock.garden { border-left-color: #2f9bd6; }
.ublock.book { border-left-color: #d97745; }

/* ---------- 习作例文 ---------- */
.ex-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  margin-top: 4px;
}
.ex-card {
  background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--c);
  border-radius: 14px; padding: 16px;
  box-shadow: 0 4px 14px rgba(40, 54, 85, .04);
}
.ex-title { font-size: 18px; font-weight: 900; color: var(--c); margin-bottom: 6px; }

/* ---------- 古诗文卡 ---------- */
.poem-card {
  --c: #8b65c9; position: relative;
  background: var(--card); border-radius: 18px; padding: 18px;
  border: 1px solid var(--line); border-top: 4px solid var(--c);
  box-shadow: 0 4px 16px rgba(40, 54, 85, .035); overflow-wrap: anywhere;
}
.phead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.phead h3 { font-size: 20px; font-weight: 900; }
.pmeta { color: var(--muted); font-size: 13.5px; font-weight: 700; display: inline-flex; gap: 8px; align-items: center; }
.pkind {
  background: #f0e9fa; color: #7c5cc4; border-radius: 999px;
  padding: 1px 9px; font-size: 12px; font-weight: 800;
}
.pimg {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 14px; margin: 12px 0 4px;
  box-shadow: 0 6px 20px rgba(40, 54, 85, .12);
}
/* 课文插图 */
.kimg {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 12px; margin: 10px 0 4px;
  box-shadow: 0 4px 14px rgba(40, 54, 85, .1);
}
.plines { display: grid; gap: 2px; margin-top: 10px; }
.pline {
  border: none; background: none; text-align: left;
  font-size: 17px; font-weight: 700; color: #4a4463;
  padding: 3px 6px; border-radius: 8px; letter-spacing: .5px;
}
.pline:hover { background: #f5f2fb; color: #7c5cc4; }
.pnote {
  margin-top: 10px; background: #f6f3fc; border-radius: 12px;
  padding: 9px 12px; font-size: 13.5px; line-height: 1.7; color: #5f5a75; font-weight: 600;
}
.pnotes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pnote-row {
  border: 1.5px dashed #ddd2f0; background: #fbf9ff; border-radius: 10px;
  padding: 3px 9px; font-size: 12.5px; font-weight: 700; color: #5f5a75;
}
.pnote-row b { color: #7c5cc4; margin-right: 5px; }
/* 创作背景 */
.pbg {
  margin-top: 10px; background: #fbf7ef; border-left: 4px solid #d9a441;
  border-radius: 10px; padding: 9px 12px;
  font-size: 13.5px; line-height: 1.7; font-weight: 600; color: #6d5b34;
}
.pbg b { color: #a97b1e; margin-right: 6px; }

/* ---------- 日积月累 ---------- */
.saying-card {
  background: var(--card); border-radius: 18px; padding: 16px 18px;
  border: 1px solid var(--line); border-left: 5px solid var(--c);
  margin-bottom: 16px; box-shadow: 0 4px 16px rgba(40, 54, 85, .035);
}
.shead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shead h3 { font-size: 17px; font-weight: 900; }
.sitems { display: grid; gap: 4px; margin-top: 10px; }
.sitem {
  border: none; background: none; text-align: left;
  font-size: 15.5px; font-weight: 700; color: #5a4a3a;
  padding: 4px 8px; border-radius: 8px; line-height: 1.6;
}
.sitem:hover { background: #fdf4ec; color: #c05f22; }

/* ---------- 字词复习 ---------- */
.wsub { margin: 18px 2px 12px; font-size: 17px; font-weight: 900; color: #35567e; }
.polygrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.poly-card {
  --c: #3f8fbf;
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border-radius: 16px; padding: 14px;
  border: 1px solid var(--line); border-top: 4px solid var(--c);
  box-shadow: 0 4px 16px rgba(40, 54, 85, .035);
}
.big-char {
  flex: 0 0 52px; height: 52px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 12%, white); color: var(--c);
  border-radius: 14px; font-size: 30px; font-weight: 900;
}
.poly-readings { display: grid; gap: 6px; min-width: 0; flex: 1; }
.similar-card {
  --c: #3f8fbf;
  display: grid; gap: 6px;
  background: var(--card); border-radius: 16px; padding: 14px;
  border: 1px solid var(--line); border-top: 4px solid var(--c);
  box-shadow: 0 4px 16px rgba(40, 54, 85, .035);
}
.sim-row {
  display: flex; align-items: center; gap: 8px;
  border: none; background: #fafbfe; border-radius: 10px;
  padding: 5px 10px; text-align: left;
}
.sim-row:active { transform: scale(.97); }
.sim-row b { font-size: 19px; font-weight: 900; color: var(--c); }
.sim-row i { font-style: normal; font-size: 13.5px; font-weight: 700; color: #4a4f63; }

/* ============================================================
   动画与交互增强（仅屏幕，不影响打印）
   ============================================================ */
@media screen {
  /* ---------- 关键帧 ---------- */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  @keyframes pulseGlow {
    0%, 100% { box-shadow: 0 4px 16px rgba(40, 54, 85, .035); }
    50% { box-shadow: 0 8px 28px rgba(40, 54, 85, .12); }
  }
  @keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
  }
  @keyframes twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
  }
  @keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* ---------- 知识卡入场 ---------- */
  .kcard, .poem-card, .saying-card, .poly-card, .similar-card, .ublock, .ex-card {
    animation: fadeInUp .55s cubic-bezier(.2,.7,.2,1) both;
  }
  .kcard:nth-child(2) { animation-delay: .05s; }
  .kcard:nth-child(3) { animation-delay: .1s; }
  .kcard:nth-child(4) { animation-delay: .15s; }
  .wgrid > .poem-card:nth-child(1) { animation-delay: 0s; }
  .wgrid > .poem-card:nth-child(2) { animation-delay: .06s; }
  .wgrid > .poem-card:nth-child(3) { animation-delay: .12s; }
  .wgrid > .poem-card:nth-child(4) { animation-delay: .18s; }

  /* ---------- 诗文/课文插图加载动画 ---------- */
  .pimg, .kimg {
    background: linear-gradient(90deg, #f0f0f5 25%, #e8e8f0 50%, #f0f0f5 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease infinite;
  }
  .pimg[src]:not([src=""]), .kimg[src]:not([src=""]) {
    animation: fadeIn .6s ease both;
  }

  /* ---------- 卡片悬浮抬升 ---------- */
  .kcard, .poem-card, .saying-card, .poly-card, .similar-card, .ex-card {
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  }
  .kcard:hover, .poem-card:hover, .saying-card:hover,
  .poly-card:hover, .similar-card:hover, .ex-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(40, 54, 85, .12);
  }
  .kcard:hover { border-top-color: color-mix(in srgb, var(--c) 80%, #000); }

  /* ---------- 单元头部 emoji 浮动 ---------- */
  .unit-emoji {
    display: inline-block;
    animation: floatY 3.2s ease-in-out infinite;
  }

  /* ---------- 学习重点标签流光 ---------- */
  .goal-tags span {
    transition: transform .2s ease, background .2s ease;
  }
  .goal-tags span:hover {
    transform: translateY(-2px) scale(1.04);
  }

  /* ---------- 词语 / 多音字胶囊按压反馈 ---------- */
  .wpill, .poly-half, .sa-row, .fw, .sim-row, .sitem, .pline {
    transition: transform .15s ease, background .2s ease, border-color .2s ease;
  }
  .kb-quote, .kbv, .kbio { transition: background .2s ease, border-color .2s ease, transform .15s ease; }
  .kb-quote:active, .kbv:active { transform: scale(.985); }
  .wpill:hover { transform: translateY(-2px); }
  .fw:hover { border-color: var(--c, #b8a878); background: color-mix(in srgb, var(--c, #d9cfba) 10%, #fdfaf3); }
  .poly-half:hover { border-color: color-mix(in srgb, var(--c) 50%, white); background: #fff; }
  .sa-row:hover { border-color: #b9c7de; background: #fff; }
  .pline:hover { transform: translateX(4px); }
  .sitem:hover { transform: translateX(4px); }

  /* ---------- 已复习标记呼吸 ---------- */
  .learn-btn.on {
    animation: pulseGlow 2.4s ease-in-out infinite;
  }
  .learn-btn { transition: transform .15s ease, background .2s ease, border-color .2s ease; }
  .learn-btn:hover { transform: scale(1.1); }

  /* ---------- 单元 chip 选中高亮 ---------- */
  .chip { transition: transform .18s ease, box-shadow .18s ease; }
  .chip:hover { transform: translateX(3px); }

  /* ---------- 图示悬浮微动 ---------- */
  .fig {
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .fig:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(40, 54, 85, .06); }
  .fig-svg { transition: transform .4s ease; }
  .fig:hover .fig-svg { transform: scale(1.01); }

  /* ---------- 诗句逐行轻微提示 ---------- */
  .pline { position: relative; }
  .pline:hover::before {
    content: '▶'; position: absolute; left: -14px; top: 50%;
    transform: translateY(-50%); font-size: 10px; color: var(--c, #7c5cc4);
    animation: fadeIn .2s ease;
  }

  /* ---------- 横幅装饰缓慢浮动 ---------- */
  .unit-banner svg circle { animation: floatY 4s ease-in-out infinite; }
  .unit-banner svg circle:nth-child(2) { animation-delay: .6s; }

  /* ---------- 教材横幅渐变流光 ---------- */
  .textbook-banner {
    background-size: 200% 100%;
    animation: shimmer 6s linear infinite;
  }

  /* ---------- 减弱动画（尊重系统偏好） ---------- */
  @media (prefers-reduced-motion: reduce) {
    .kcard, .poem-card, .saying-card, .poly-card, .similar-card, .ublock, .ex-card,
    .unit-emoji, .learn-btn.on, .textbook-banner, .unit-banner svg circle {
      animation: none !important;
    }
    .kcard:hover, .poem-card:hover, .saying-card:hover,
    .poly-card:hover, .similar-card:hover, .ex-card:hover, .fig:hover {
      transform: none;
    }
  }
}

/* ---------- 打印：只输出当前单元知识卡 ---------- */
@media print {
  body { background: #fff; font-size: 13px; }
  .site-header, .site-footer, .sidebar, .toolbar, .textbook-banner, .skip-link,
  .say, .learn-btn, .goal-tags { display: none !important; }
  .study-shell { display: block; padding: 0; }
  .study-content { padding: 0; }
  .unit-head { border: 1px solid #ccc; box-shadow: none; }
  .kcard, .poem-card, .saying-card, .poly-card, .similar-card, .ublock, .ex-card {
    box-shadow: none; break-inside: avoid; page-break-inside: avoid;
  }
  /* 真实素材板块：金句/百科/作者小传保留，视频清单以文字形式保留（家长可按片名在B站搜索） */
  .kbv { border: 1px solid #ddd; box-shadow: none; }
  .kbv-play { border: 1px solid #ddd; }
  .kgrid, .wgrid, .polygrid { grid-template-columns: 1fr; display: block; }
  .wcard, .kcard, .poem-card { margin-bottom: 12px; }
}

/* ============ 3. study-theme.css 语文子集 ============ */
@media screen {
  /* 目录和正文各有清楚的阅读层级（侧栏吸顶按平台非吸顶头部取 24px）。 */
  .study-page .study-shell { grid-template-columns: 280px minmax(0, 1fr); gap: clamp(24px, 2.2vw, 42px); padding-top: 30px; padding-bottom: 52px; }
  .study-page .sidebar { padding: 20px 12px 16px; border-color: var(--subject-line); border-radius: 23px; background: var(--card); box-shadow: 0 3px 0 var(--subject-line); }
  .study-page .sidebar-label { padding: 0 12px 16px; font-size: 16px; color: var(--subject-ink); }
  .study-page .nav-count { padding: 1px 8px; font-size: 13px; background: var(--subject-soft); color: var(--subject-ink); }
  .study-page .sidebar-note { margin-top: 14px; padding: 16px 12px 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
  .study-page .category-nav { scrollbar-color: var(--subject-line) transparent; }
  .study-page #chips { gap: 7px; padding-inline: 2px; }
  .study-page .chip { min-height: 64px; gap: 11px; padding: 9px 10px; border-radius: 15px; font-size: 16px; font-weight: 650; line-height: 1.5; }
  .study-page .chip:hover { background: #f8f4eb; }
  .study-page .chip.on { background: color-mix(in srgb, var(--c) 14%, #fffdf6); border-color: color-mix(in srgb, var(--c) 40%, #eee3cf); color: var(--ink); }
  .study-page .chip-emoji { display: grid; place-items: center; width: 38px; height: 40px; background: color-mix(in srgb, var(--c) 12%, #fffdf6); border-radius: 11px; font-size: 28px; }
  .study-page .chip-num { padding: 3px 7px; font-size: 12px; color: #596879; background: #f2f0e8; }
  .study-page .chip-num.full { color: #276f55; background: #dff3e7; }
  .study-page :is(.stat-pill, .stats-pill) { min-height: 40px; padding: 6px 14px; border-color: var(--subject-line); border-radius: 12px; background: var(--subject-soft); color: var(--subject-ink); font-size: 15px; font-weight: 650; }
  .study-page .back-btn { min-height: 44px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 12px; background: #fffefb; color: #526171; font-size: 15px; font-weight: 650; }
  .study-page .back-btn:hover { border-color: var(--subject-line); background: var(--subject-soft); color: var(--subject-ink); }

  .study-page .textbook-banner { min-height: 58px; gap: 8px 20px; padding: 14px 22px; margin-bottom: 22px; border: 1px solid var(--subject-line); border-radius: 18px; background: var(--subject-soft); color: var(--subject-ink); font-size: 16px; }
  .study-page .textbook-banner strong { font-size: 17px; color: var(--subject-ink); }
  .study-page .toolbar { gap: 12px; margin-bottom: 24px; }
  .study-page .search-box { min-height: 56px; padding: 4px 16px; border-color: #dedace; border-radius: 16px; background: var(--card); }
  .study-page .search-box > span { font-size: 23px; }
  .study-page .search-box input { padding-block: 11px; font-size: 18px; }
  .study-page .search-box input::placeholder { color: #69736f; }
  .study-page .search-box:focus-within { border-color: var(--subject-accent); box-shadow: 0 0 0 3px var(--subject-soft); }
  .study-page .play-btn { min-height: 54px; border: 1px solid var(--subject-ink); padding: 12px 20px; border-radius: 15px; background: var(--subject-ink); color: #fff; font-size: 17px; font-weight: 700; box-shadow: 0 3px 0 color-mix(in srgb, var(--subject-ink) 80%, #293b4a); }

  /* 单元标题使用首页的大色块，正文卡片留足空间。 */
  .study-page .unit-head { gap: 22px; padding: 26px 28px; margin-bottom: 24px; border: 1px solid var(--subject-line); border-radius: 24px; background: var(--subject-soft); box-shadow: 0 3px 0 var(--subject-line); }
  .study-page .unit-head > div { min-width: 0; }
  .study-page .unit-emoji { display: grid; place-items: center; flex: 0 0 80px; height: 86px; border-radius: 22px; background: #ffffff94; font-size: 52px; line-height: 1; }
  .study-page .unit-head h1 { font-size: clamp(27px, 2.1vw, 38px); font-weight: 800; line-height: 1.5; color: var(--ink); text-wrap: balance; }
  .study-page .unit-head p { margin-top: 6px; color: #516172; font-size: 17px; line-height: 1.8; font-weight: 500; text-wrap: balance; }
  .study-page .goal-tags { gap: 8px; margin-top: 14px; }
  .study-page .goal-tags span { padding: 5px 12px; border-color: var(--subject-line); border-radius: 10px; background: #ffffffb0; color: #465765; font-size: 14px; }
  .study-page .wgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 24px; }
  .study-page :is(.kcard, .poem-card, .saying-card, .poly-card, .similar-card, .ublock, .ex-card) { padding: 26px; border-color: var(--subject-line); border-radius: 22px; background: var(--card); box-shadow: 0 3px 0 var(--subject-line); }
  .study-page :is(.kcard, .poem-card, .poly-card, .similar-card) { border-top: 4px solid var(--c); }
  .study-page #cards > :is(.kcard, .saying-card) { margin-bottom: 24px; }
  .study-page .kcard.learned { background: #f0f9ed; border-color: #bfd8b7; }
  .study-page .khead { gap: 10px; padding-right: 54px; }
  .study-page .ktitle { font-size: clamp(25px, 1.7vw, 31px); line-height: 1.5; font-weight: 800; }
  .study-page :is(.kno, .ktag, .kauthor, .pkind, .pmeta) { font-size: 14px; }
  .study-page .k-overview { margin-top: 18px; max-width: 82ch; font-size: 18px; font-weight: 500; line-height: 1.9; }
  .study-page :is(.ksec, .wsec) { gap: 14px; margin-top: 18px; }
  .study-page .seclabel { flex-basis: 32px; height: 32px; margin-top: 4px; border-radius: 10px; background: var(--subject-soft); color: var(--subject-ink); font-size: 16px; }
  .study-page .klist { gap: 8px; }
  .study-page :is(.kli, .pline, .sitem) { min-height: 44px; }
  .study-page :is(.kli, .ktheme, .kcraft, .mist-row), .study-page .ublock li { font-size: 18px; line-height: 1.9; font-weight: 500; }
  .study-page :is(.ktheme, .kcraft, .krecite, .pnote) { padding: 14px 16px; border-radius: 15px; }
  .study-page :is(.krecite, .pnote) { font-size: 16px; }
  .study-page :is(.ublock h3, .phead h3, .shead h3, .wsub) { font-size: 23px; line-height: 1.6; }
  .study-page :is(.pline, .sitem) { padding: 7px 10px; font-size: 20px; line-height: 1.8; }
  .study-page .wpill { padding: 7px 11px; border-radius: 12px; }
  .study-page .wpill b { font-size: 18px; color: color-mix(in srgb, var(--c) 65%, #293b4a); }
  .study-page .wpill i { font-size: 14px; }
  .study-page .fw { min-height: 44px; padding: 7px 12px; font-size: 16px; }
  .study-page :is(.poly-char, .big-char) { background: var(--subject-soft); color: var(--subject-ink); }
  .study-page .say, .study-page .kcard .say { width: 44px; height: 44px; border: 1px solid var(--subject-line); border-radius: 50%; background: var(--subject-soft); font-size: 20px; }
  .study-page .learn-btn { top: 16px; right: 16px; width: 44px; height: 44px; border-width: 2px; border-color: #d6cbb7; background: #fffaf0; font-size: 22px; }
  .study-page .learn-btn.on { color: #fff; background: #2e8055; border-color: #2e8055; }
  .study-page .search-head { margin-block: 4px 20px; font-size: 19px; color: var(--subject-ink); }
  .study-page .empty { padding: 42px 24px; border: 1px solid var(--subject-line); border-radius: 24px; background: #fff5df; font-size: 20px; box-shadow: 0 3px 0 var(--subject-line); }

  /* 图示和操作说明使用清楚的字号；保留原有 SVG 与互动控件。 */
  .study-page .fig { margin-block: 20px 8px; padding: 18px; border-color: #e3dccd; border-radius: 18px; background: #fffaf0; }
  .study-page :is(.fig-cap, .fig-stop i) { font-size: 14px; color: #596879; }
  .study-page :is(.fig-note, .fig-label, .fig-stop b) { font-size: 17px; }
  .study-page .fig-stop { padding: 14px 10px; border-color: var(--subject-line); border-radius: 15px; }
  .study-page .fig-stop-ico { font-size: 32px; }
  .study-page .fig-table { font-size: 16px; }
  .study-page .fig-table th, .study-page .fig-table td { padding: 9px 10px; }
  .study-page .fig-ctrl { gap: 10px; margin-top: 14px; }
  .study-page .fig-btn.fig-primary { background: var(--subject-ink); border-color: var(--subject-ink); color: #fff; }
  .study-page .fig-btn.fig-on { border-color: var(--subject-accent); background: var(--subject-soft); color: var(--subject-ink); }
  .study-page .fig-range { min-height: 44px; accent-color: var(--subject-ink); }
  .study-page .unit-banner { margin-bottom: 24px; }
  .study-page .unit-banner svg { border-color: var(--subject-line); border-radius: 20px; }
}
@media screen and (max-width: 1399px) {
  .study-page .study-shell { grid-template-columns: 260px minmax(0, 1fr); gap: 24px; }
}
@media screen and (max-width: 1199px) {
  .study-page .unit-head { gap: 18px; padding: 24px; }
  .study-page .unit-emoji { flex-basis: 70px; height: 76px; font-size: 46px; }
}
@media screen and (max-width: 999px) {
  .study-page .study-shell { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px; }
  .study-page .sidebar { position: static; max-height: none; padding: 0; border-radius: 18px; }
  .study-page .category-nav > summary { min-height: 64px; gap: 14px; padding: 15px 20px; color: var(--subject-ink); font-size: 17px; }
  .study-page .category-nav > summary::after { color: var(--subject-ink); font-size: 24px; }
  .study-page .nav-current { color: var(--subject-ink); }
  .study-page #chips { gap: 8px; padding: 0 12px 14px; }
  .study-page .chip { min-height: 60px; }
  .study-page .textbook-banner { margin-bottom: 20px; }
  .study-page .wgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
  .study-page .unit-head h1 { font-size: 28px; }
  .study-page .unit-head p { font-size: 17px; }
}
@media screen and (max-width: 600px) {
  .study-page { --gutter: 18px; }
  .study-page :is(.stat-pill, .stats-pill) { padding: 6px 10px; min-height: 36px; font-size: 13px; }
  .study-page #chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .study-page .chip { gap: 8px; padding-inline: 8px; font-size: 15px; }
  .study-page .chip-emoji { width: 30px; height: 36px; font-size: 24px; }
  .study-page .chip-num { padding: 3px 5px; font-size: 11px; }
  .study-page .textbook-banner { padding: 14px 18px; gap: 5px; font-size: 15px; }
  .study-page .textbook-banner strong { font-size: 16px; }
  .study-page .toolbar { gap: 12px; }
  .study-page .search-box { flex-basis: 100%; }
  .study-page .search-box input { font-size: 17px; }
  .study-page .toolbar .play-btn { flex: 1 1 auto; padding-inline: 14px; font-size: 16px; }
  .study-page .unit-head { align-items: flex-start; gap: 15px; padding: 22px 20px; border-radius: 22px; }
  .study-page .unit-emoji { flex-basis: 56px; height: 64px; border-radius: 17px; font-size: 38px; }
  .study-page .unit-head h1 { font-size: 25px; line-height: 1.6; }
  .study-page .unit-head p { font-size: 16px; }
  .study-page .goal-tags { gap: 7px; margin-top: 12px; }
  .study-page .goal-tags span { padding: 4px 9px; font-size: 13px; }
  .study-page :is(.kcard, .poem-card, .saying-card, .poly-card, .similar-card, .ublock, .ex-card) { padding: 22px 18px; border-radius: 20px; }
  .study-page .khead { gap: 9px; padding-right: 42px; }
  .study-page .ktitle { font-size: 25px; }
  .study-page .k-overview { font-size: 17px; }
  .study-page :is(.kli, .ktheme, .kcraft) { font-size: 17px; }
  .study-page :is(.ktheme, .kcraft, .krecite, .pnote) { padding: 12px 14px; }
  .study-page .learn-btn { right: 13px; top: 15px; width: 44px; height: 44px; }
  .study-page .fig { padding: 12px; border-radius: 16px; }
  .study-page .fig-table { font-size: 14px; }
  .study-page .fig-table th, .study-page .fig-table td { padding: 7px 5px; }
  .study-page .fig-btn { font-size: 15px; }
  .study-page .fig-note { font-size: 16px; }
}

/* ---------- 册列表横幅：全站同款渐变标题卡 ---------- */
.study-page .textbook-banner.textbook-banner-hero {
  flex-direction: column; align-items: flex-start; gap: 6px;
  margin: 14px 0 22px; padding: 20px 26px;
  background:
    radial-gradient(ellipse at 92% 8%, #fff3d6, transparent 60%),
    linear-gradient(120deg, #f1f8ea, #eaf3e0);
  border: 1px solid #cfe3c0; border-radius: 20px; color: var(--ink);
}
.study-page .textbook-banner.textbook-banner-hero span { color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.study-page .textbook-banner.textbook-banner-hero strong { font-size: clamp(24px, 2.4vw, 32px); color: var(--ink); }