/* ============================================================
   学习单元页（#lesson/:kpId）—— 学 → 例 → 练 三段式
   仅使用 tokens.css 的变量，自动适配亮/暗主题。
   ============================================================ */

.lsn-page { max-width: 880px; padding-bottom: var(--sp-10); }
/* 宽版：给左侧索引让位 */
.lsn-page.lsn-page--wide { max-width: 1180px; }

/* ═══════════════════════════════════════════════════════════════════
   两栏骨架：左侧固定索引 + 右侧主内容
   ═══════════════════════════════════════════════════════════════════ */
.lsn-layout {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.lsn-main { min-width: 0; }

/* —— 左侧目录 —— */
.lsn-index {
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  background: var(--card);
  overflow: hidden;
}
.lsn-index-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 8px 10px 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-alt);
}
/* 桌面端：目录头部右侧的「收起」按钮（窄屏隐藏，窄屏有自己的 toggle） */
.lsn-index-collapse {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 15px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  transition: color .12s, background .12s;
}
.lsn-index-collapse:hover { color: var(--brand-dark); background: var(--brand-50); }
.lsn-index-body {
  overflow-y: auto;
  padding: 6px 0 8px;
  flex: 1 1 auto;
}
.lsn-index-toggle { display: none; }

/* —— 目录条目 —— */
.lsn-idx-row > a {
  display: block;
  padding: 5px 14px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-secondary);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.lsn-idx-row > a:hover { color: var(--brand-dark); background: var(--brand-50); }
.lsn-idx-row.lsn-idx-l1 > a { font-weight: 700; color: var(--text); font-size: var(--fs-sm); margin-top: 2px; }
.lsn-idx-row.lsn-idx-l2 > a { padding-left: 22px; font-weight: 600; color: var(--text); }

/* —— 并列用法（chip 行）：一个知识点的所有用法一眼看全 —— */
.lsn-idx-inline {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 3px 12px 7px 24px;
}
.lsn-idx-inline > a {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  white-space: nowrap;
  transition: color .12s, background .12s, border-color .12s;
}
.lsn-idx-inline > a:hover { color: var(--brand-dark); background: var(--brand-50); border-color: var(--brand); }

/* 当前所在项 */
.lsn-idx-on {
  color: var(--brand-dark) !important;
  background: var(--brand-50);
  border-left-color: var(--brand);
  font-weight: 700;
}
.lsn-idx-inline > a.lsn-idx-on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
/* 命中某个用法时，把它所属的知识点行也标出来 */
.lsn-idx-parent-on {
  color: var(--brand-dark) !important;
  background: var(--brand-50);
  border-left-color: var(--brand);
  font-weight: 700;
}
.lsn-index-top {
  display: block;
  margin: 6px 10px 2px;
  padding: 5px 8px;
  border-top: 1px dashed var(--border-light);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-decoration: none;
  text-align: center;
}
.lsn-index-top:hover { color: var(--brand); }

/* —— 桌面端：目录整体收起 → 单栏排版 + 左上角悬浮「展开」按钮 —— */
.lsn-toc-float { display: none; }
@media (min-width: 1025px) {
  .lsn-layout.lsn-toc-collapsed { grid-template-columns: minmax(0, 1fr); }
  .lsn-layout.lsn-toc-collapsed .lsn-index { display: none; }
  .lsn-layout.lsn-toc-collapsed .lsn-toc-float {
    display: inline-block;
    position: sticky;
    top: 76px;
    z-index: 5;
    align-self: start;
    justify-self: start;
    margin-bottom: var(--sp-3);
    padding: 6px 13px;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--brand-dark);
    background: var(--brand-50);
    border: 1px solid var(--border-light);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: color .12s, background .12s, border-color .12s;
  }
  .lsn-layout.lsn-toc-collapsed .lsn-toc-float:hover {
    color: var(--brand-dark);
    background: var(--brand-50);
    border-color: var(--brand);
  }
}

@media (max-width: 1024px) {
  .lsn-layout { grid-template-columns: minmax(0, 1fr); }
  .lsn-index {
    position: static;
    max-height: none;
    margin-bottom: var(--sp-3);
  }
  .lsn-index-toggle {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--brand-dark);
    background: var(--brand-50);
    border: 0;
    cursor: pointer;
  }
  .lsn-index .lsn-index-head { display: none; }
  .lsn-index-body { display: none; }
  .lsn-index-open .lsn-index-body { display: block; max-height: 56vh; }
}

/* ═══════════════════════════════════════════════════════════════════
   ① 学 · 心法总纲：章节折叠块
   ═══════════════════════════════════════════════════════════════════ */
.lsn-chapter-tools {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  margin: 0 0 var(--sp-3);
}
.lsn-tool {
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-dark);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  transition: background .15s, border-color .15s;
}
.lsn-tool:hover { background: var(--brand-100); border-color: var(--brand); }
.lsn-chapters { display: flex; flex-direction: column; gap: var(--sp-3); }
.lsn-chapter {
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  background: var(--card);
  overflow: hidden;
  scroll-margin-top: 96px;
}
.lsn-chapter > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text);
  background: var(--bg-alt);
  border-bottom: 1px solid transparent;
}
.lsn-chapter > summary::-webkit-details-marker { display: none; }
.lsn-chapter > summary::before { content: '▸ '; color: var(--brand); }
.lsn-chapter[open] > summary { border-bottom-color: var(--border-light); }
.lsn-chapter[open] > summary::before { content: '▾ '; }
.lsn-chapter-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.lsn-ch-text { margin-bottom: var(--sp-3); }
.lsn-ch-sub { margin-bottom: var(--sp-5); scroll-margin-top: 96px; }
.lsn-ch-sub:last-child { margin-bottom: 0; }
.lsn-md-h3 {
  font-size: var(--fs-md);
  color: var(--text);
  margin: 0 0 var(--sp-2);
  padding-left: 10px;
  border-left: 3px solid var(--brand);
}

/* ═══════════════════════════════════════════════════════════════════
   ② 按模型学：自包含模型卡
   ═══════════════════════════════════════════════════════════════════ */
.lsn-model {
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  background: var(--card);
  scroll-margin-top: 96px;
}
.lsn-model:last-child { margin-bottom: 0; }
.lsn-model-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.lsn-model-toggle {
  margin-left: auto; flex: none;
  cursor: pointer;
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--brand-dark); background: var(--brand-50);
  border: 1px solid var(--brand-100); border-radius: var(--r-pill);
  padding: 4px 12px;
  transition: background .15s, border-color .15s;
}
.lsn-model-toggle:hover { background: var(--brand-100); border-color: var(--brand); }
.lsn-model-no {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--brand); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-base);
}
.lsn-model-title { margin: 0; font-size: var(--fs-md); color: var(--text); }
.lsn-model-meta { font-size: var(--fs-xs); color: var(--text-tertiary); }

/* 速览卡：写法 + 对应例题 */
.lsn-model-quick {
  border: 1px dashed var(--brand-100);
  border-radius: var(--r-md);
  background: var(--brand-50);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.lsn-model-quick-head {
  font-size: var(--fs-sm); font-weight: 700; color: var(--brand-dark); margin-bottom: var(--sp-3);
}
.lsn-model-quick-code {
  margin: 0 0 var(--sp-3);
}
/* 代码块样式与正文完全一致（灰底 / 圆角 / 行号 / hljs 高亮），不另起一套 */
.lsn-model-quick-code > pre {
  margin: 0;
  border: 1px solid var(--border-light);
}
.lsn-quick-list { list-style: none; margin: 0; padding: 0; }
.lsn-quick-list li {
  display: flex; gap: var(--sp-2); align-items: baseline;
  font-size: var(--fs-sm); color: var(--text-secondary); padding: 2px 0;
}
.lsn-quick-pid {
  font-weight: 700; color: var(--brand-dark); text-decoration: none; flex: none;
  border-bottom: 1px dashed var(--brand);
}
.lsn-quick-pid:hover { background: var(--brand-50); }

.lsn-model-teach { margin-bottom: var(--sp-4); }
.lsn-model-apps { margin-top: var(--sp-4); }
.lsn-model-apps-head {
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-tertiary); margin-bottom: var(--sp-2);
}
.lsn-model-drill { margin-top: var(--sp-4); }

/* 用法示例（一个应用点 = 一张卡） */
.lsn-app {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
  background: var(--card);
  overflow: hidden;
  scroll-margin-top: 96px;
}
.lsn-app:last-child { margin-bottom: 0; }
.lsn-app-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg-alt);
  border-bottom: 1px solid transparent;
}
.lsn-app-summary::-webkit-details-marker { display: none; }
.lsn-app-summary::before { content: '▸ '; color: var(--brand); font-size: var(--fs-sm); }
.lsn-app[open] > .lsn-app-summary { border-bottom-color: var(--border-light); }
.lsn-app[open] > .lsn-app-summary::before { content: '▾ '; }
.lsn-app-no {
  flex: none;
  font-size: var(--fs-xs); font-weight: 700; color: #fff; background: var(--ai);
  padding: 2px 9px; border-radius: var(--r-pill);
}
.lsn-app-title { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.lsn-app-sum {
  margin-left: auto; display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--text-tertiary); text-align: right;
}
.lsn-app-badge {
  flex: none;
  border: 1px solid var(--border-light); background: var(--card);
  padding: 1px 8px; border-radius: var(--r-pill);
}
.lsn-app-body { padding: var(--sp-4) var(--sp-5); }
.lsn-app-deps {
  padding: 0 var(--sp-5) var(--sp-4);
}
.lsn-app-deps-head {
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-tertiary);
  border-top: 1px dashed var(--border-light); padding-top: var(--sp-3); margin-bottom: var(--sp-2);
}
.lsn-app-dep {
  border: 1px solid var(--border-light);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-2);
  background: var(--bg-alt);
}
.lsn-app-dep > summary {
  cursor: pointer; list-style: none;
  padding: 8px 12px; font-size: var(--fs-sm); font-weight: 600; color: var(--brand-dark);
}
.lsn-app-dep > summary::-webkit-details-marker { display: none; }
.lsn-app-dep > summary::before { content: '▸ '; }
.lsn-app-dep[open] > summary::before { content: '▾ '; }
.lsn-app-dep .lsn-md { padding: 0 var(--sp-4) var(--sp-4); }

/* ① 推演里每道「走一遍」下面的就地展开块：默认收起，只占一行，展开看完整题意与代码 */
.lsn-app-inline {
  margin: var(--sp-3) 0 var(--sp-4);
  background: var(--bg-alt);
}
.lsn-app-inline > summary { font-weight: 600; }

/* 页内引用链接（应用点 N / 推演 N） */
.lsn-ref-link {
  color: var(--brand-dark);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed var(--brand);
}
.lsn-ref-link:hover { background: var(--brand-50); }

/* ═══════════════════════════════════════════════════════════════════
   抽屉内渲染（宽度只有 780px）→ 收起左侧索引，退回单栏
   ═══════════════════════════════════════════════════════════════════ */
.noi-learn-body .lsn-layout { grid-template-columns: minmax(0, 1fr); }
.noi-learn-body .lsn-index { display: none; }
.noi-learn-body .lsn-toc-float { display: none !important; }


.lsn-topbar {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) 0 var(--sp-3);
}
.btn-sm { padding: 6px 12px; font-size: var(--fs-sm); }

/* —— 头部 —— */
.lsn-hero { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
.lsn-hero-stage {
  font-size: var(--fs-xs); color: var(--brand); background: var(--brand-50);
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  margin-bottom: var(--sp-2); font-weight: 600;
}
.lsn-hero-title { margin: 0 0 var(--sp-2); font-size: var(--fs-2xl); color: var(--text); line-height: 1.25; }
.lsn-hero-desc { margin: 0 0 var(--sp-3); color: var(--text-secondary); font-size: var(--fs-base); }
.lsn-hero-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.lsn-pill {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; background: var(--bg-alt); color: var(--text-secondary);
}
.lsn-pill--ok    { background: var(--success-50); color: var(--success); }
.lsn-pill--mid   { background: var(--warning-50); color: var(--warning-text); }
.lsn-pill--weak  { background: var(--danger-50);  color: var(--danger); }
.lsn-pill--ai    { background: var(--ai-50);      color: var(--ai-dark); }
.lsn-pill--muted { background: var(--bg-alt);     color: var(--text-tertiary); }

.lsn-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--sp-3);
  border-top: 1px solid var(--border-light); padding-top: var(--sp-4);
}
.lsn-step {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 10px 8px; border-radius: var(--r-md); background: var(--bg-alt);
  color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 600;
  text-decoration: none; transition: background .15s, color .15s;
}
.lsn-step:hover { background: var(--brand-50); color: var(--brand-dark); }
.lsn-step b { color: var(--brand); }

/* —— 提示区 —— */
.lsn-warn { border-left: 4px solid var(--warning); padding: var(--sp-5); margin-top: var(--sp-4); }
.lsn-warn p { margin: var(--sp-2) 0; color: var(--text-secondary); font-size: var(--fs-base); }
.lsn-warn ul { margin: 0; padding-left: 20px; }
.lsn-warn a { color: var(--brand); }

.lsn-obj { padding: var(--sp-5); margin-top: var(--sp-4); }
.lsn-obj ul { margin: var(--sp-3) 0 0; padding-left: 20px; }
.lsn-obj li { color: var(--text-secondary); font-size: var(--fs-base); margin-bottom: 6px; }

/* —— 段落 —— */
.lsn-sec { padding: var(--sp-6); margin-top: var(--sp-4); scroll-margin-top: 80px; }
.lsn-sec-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.lsn-sec-no {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--brand); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm);
}
.lsn-h2 { margin: 0; font-size: var(--fs-lg); color: var(--text); }
.lsn-sec-sub { margin: 0 0 var(--sp-4); color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.7; }

/* —— 讲解正文（markdown） —— */
.lsn-md { color: var(--text-secondary); font-size: var(--fs-base); line-height: 1.8; word-break: break-word; }
.lsn-md h1, .lsn-md h2 { font-size: var(--fs-lg); color: var(--text); margin: var(--sp-5) 0 var(--sp-3); }
.lsn-md h3 { font-size: var(--fs-md); color: var(--text); margin: var(--sp-4) 0 var(--sp-2); }
.lsn-md h4 { font-size: var(--fs-base); color: var(--text); margin: var(--sp-3) 0 var(--sp-2); }
.lsn-md p { margin: 0 0 var(--sp-3); }
.lsn-md ul, .lsn-md ol { margin: 0 0 var(--sp-3); padding-left: 22px; }
.lsn-md li { margin-bottom: 4px; }
.lsn-md table { border-collapse: collapse; width: 100%; margin: var(--sp-3) 0; font-size: var(--fs-sm); }
.lsn-md th, .lsn-md td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.lsn-md th { background: var(--bg-alt); color: var(--text); font-weight: 600; }
.lsn-md code { background: var(--bg-alt); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
.lsn-md pre { background: var(--bg-alt); padding: var(--sp-4); border-radius: var(--r-md); overflow-x: auto; }
.lsn-md pre code { background: none; padding: 0; }
/* 配图：拆题示意图 / 动态演示（prog 节统一走 .lsn-figure 容器，带图注） */
.lsn-md img { max-width: 100%; height: auto; display: block; margin: var(--sp-3) auto; border-radius: var(--r-md); }
.lsn-md .lsn-figure { margin: var(--sp-4) 0; padding: var(--sp-3); background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-md); }
.lsn-md .lsn-figure img, .lsn-md .lsn-figure video { margin: 0 auto; max-width: 100%; height: auto; border-radius: var(--r-sm); }
.lsn-md .lsn-figure-cap { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-secondary); text-align: center; line-height: 1.6; }
/* 讲解正文里自动生成的洛谷「看原题」链接：题号直接可点，直达原题页 */
.lsn-md a.lsn-luogu-link { color: var(--brand); font-weight: 600; text-decoration: none; border-bottom: 1px dashed var(--brand); white-space: nowrap; }
.lsn-md a.lsn-luogu-link::after { content: " ↗"; font-weight: 400; opacity: .7; }
.lsn-md a.lsn-luogu-link:hover { background: var(--brand-50); border-bottom-style: solid; }

/* —— 代码块：自动换行 + 行号 + 注释高亮（#lesson/ 页面）——
   1) 长行折行：原来只有 overflow-x: auto，长代码行必须横向滚动才能看全；
   2) 行号：highlightjs-line-numbers 会把代码变成 table，行号列要窄且不换行，
      代码列要能折行（否则折行会撑破表格）；
   3) 注释：hljs 的 .hljs-comment 在浅底上偏淡，这里固定一个可读的灰蓝并斜体。 */
.lsn-md pre {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.lsn-md pre code { display: block; white-space: inherit; }
.lsn-md pre table.hljs-ln { width: 100%; margin: 0; padding: 0; border: none; border-collapse: collapse; }
.lsn-md pre table.hljs-ln tr { background: transparent !important; border: none; }
.lsn-md pre table.hljs-ln tr:nth-child(even) { background: transparent !important; }
.lsn-md pre table.hljs-ln td { padding: 0; border: none; vertical-align: top; text-align: left; }
.lsn-md pre td.hljs-ln-numbers {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  color: #94a3b8 !important;
  padding: 0 10px 0 0 !important;
  border-right: 1px solid #d8dee4;
  user-select: none;
  -webkit-user-select: none;
}
.lsn-md pre td.hljs-ln-code {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  padding: 0 0 0 10px !important;
}
.lsn-md pre .hljs-comment,
.lsn-md pre .hljs-quote { color: #6a737d; font-style: italic; }
.lsn-md blockquote {
  margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--brand-100); background: var(--brand-50);
  color: var(--text-secondary); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.lsn-md img { max-width: 100%; height: auto; }

/* —— 重点强调体系（2026-10-14）：用文字颜色 + 背景色把重点从正文里「拎」出来 ——
   原问题：讲解正文 .lsn-md 里 **加粗** 与 *斜体* 和正文同色（--text-secondary），
   重点完全淹没；四色 callout 提示框类由 renderMarkdown 挂了，但样式只写在
   .analysis-text 作用域下，#lesson 页等于没有。
   语义与 .analysis-text 强调体系保持一致（学 / 题解两处同一套颜色语言）：
   · strong = 核心术语 / 关键结论：品牌蓝字 + 浅蓝底（荧光笔效果）
   · em     = 次级强调 / 特别注意：琥珀字 + 浅琥珀底（不用斜体，中文斜体难读）
   · callout = 按首行标签升级的四色提示框（考点=蓝 / 记忆=绿 / 陷阱=橙 / 思路=靛） */
.lsn-md strong {
  color: var(--brand-dark);
  font-weight: 700;
  background: var(--brand-50);
  padding: 1px 5px;
  border-radius: 4px;
}
.lsn-md em {
  color: var(--warning-text);
  font-style: normal;
  font-weight: 600;
  background: var(--warning-50);
  padding: 1px 5px;
  border-radius: 4px;
}
/* 提示框基座：覆盖上面的 .lsn-md blockquote 旧样式（同元素、更高优先级） */
.lsn-md .callout {
  margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--brand-50);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.75;
}
.lsn-md .callout > :first-child { margin-top: 0; }
.lsn-md .callout > :last-child { margin-bottom: 0; }
/* 提示框内的加粗/强调回归框体主色，避免框里再叠一层高亮底色显得花 */
.lsn-md .callout strong,
.lsn-md .callout em { color: inherit; background: none; padding: 0; font-style: normal; }
/* 四色语义：一眼区分「考点 / 必记 / 易错 / 方法」 */
.lsn-md .callout-kp   { border-left-color: var(--brand);   background: var(--brand-50);   color: var(--brand-dark); }
.lsn-md .callout-mem  { border-left-color: var(--success); background: var(--success-50); color: #14532d; }
.lsn-md .callout-trap { border-left-color: var(--warning); background: var(--warning-50); color: var(--warning-text); }
.lsn-md .callout-ai   { border-left-color: var(--ai);      background: var(--ai-50);      color: var(--ai-dark); }
/* 记忆框文字色在暗色下换亮绿（浅色的深绿在暗底上不可读），与 style.css 的
   .analysis-text 暗色覆盖保持同一色值 */
:root[data-theme="dark"] .lsn-md .callout-mem { color: #a7f3d0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lsn-md .callout-mem { color: #a7f3d0; }
}

/* —— 精讲分层呈现（2026-10-14）：思路/易错常显，推演/意图/变式按需展开 —— */
.lsn-note { display: flex; flex-direction: column; gap: var(--sp-3); }
.lsn-note-src {
  font-size: var(--fs-xs); color: var(--text-tertiary); line-height: 1.7;
  padding-bottom: var(--sp-2); border-bottom: 1px dashed var(--border-light);
}
.lsn-note-sec { border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.lsn-note-idea    { background: var(--brand-50);  border-left: 4px solid var(--brand); }
.lsn-note-mistake { background: var(--warning-50); border-left: 4px solid var(--warning); }
.lsn-note-tag { font-weight: 700; font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.lsn-note-idea .lsn-note-tag { color: var(--brand-dark); }
.lsn-note-mistake .lsn-note-tag { color: var(--warning-text); }
/* 分层卡内正文收紧：思路/易错卡里不再叠加 strong/em 荧光底（避免框里套框） */
.lsn-note-sec strong, .lsn-note-sec em { background: none; padding: 0; }
.lsn-note-idea strong, .lsn-note-idea em { color: var(--brand-dark); }
.lsn-note-mistake strong, .lsn-note-mistake em { color: var(--warning-text); }
.lsn-note-fold > summary { background: var(--bg-alt); color: var(--text-secondary); }
.lsn-note-fold[open] > summary { background: var(--bg-alt); }
.lsn-note-count {
  margin-left: auto; font-weight: 400; font-size: var(--fs-xs); color: var(--text-tertiary);
}
.lsn-fold > summary { display: flex; align-items: center; }

/* —— 术语内联链接 chip（kp-inline-links.js 注入） ——
   点开右侧学习抽屉看该知识点，不离开当前页。视觉上是「虚线下划线 + 悬停变亮」，
   不用链接蓝以免和真超链接混淆。 */
.kp-chip {
  cursor: pointer; font-weight: 600; color: var(--brand-dark);
  border-bottom: 1.5px dotted var(--brand); padding: 0 1px;
  transition: background .12s;
}
.kp-chip:hover { background: var(--brand-50); }
.kp-chip::after { content: ' ⌕'; font-size: .8em; color: var(--brand); }

/* —— 例题 —— */
.lsn-ex {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-4); margin-bottom: var(--sp-4); background: var(--card);
}
.lsn-ex-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.lsn-ex-badge {
  background: var(--brand); color: #fff; font-size: var(--fs-xs); font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-pill);
}
.lsn-ex-src { color: var(--text); font-weight: 600; font-size: var(--fs-sm); }
.lsn-ex-type { color: var(--text-tertiary); font-size: var(--fs-xs); }
.lsn-ai-tag {
  background: var(--ai-50); color: var(--ai-dark);
  font-size: var(--fs-xs); font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill);
}
.lsn-ex-why {
  font-size: var(--fs-sm); color: var(--text-tertiary);
  background: var(--bg-alt); border-radius: var(--r-sm); padding: 8px 12px; margin-bottom: var(--sp-3);
}
.lsn-typical-head {
  margin: var(--sp-5) 0 var(--sp-3); font-size: var(--fs-sm); font-weight: 700;
  color: var(--text-tertiary); border-top: 1px dashed var(--border); padding-top: var(--sp-4);
}

/* 折叠块：原生 details，无需 JS */
.lsn-fold { border: 1px solid var(--border-light); border-radius: var(--r-sm); margin-bottom: var(--sp-2); }
.lsn-fold > summary {
  cursor: pointer; padding: 10px 14px; font-size: var(--fs-sm); font-weight: 600;
  color: var(--brand-dark); background: var(--brand-50); border-radius: var(--r-sm) var(--r-sm) 0 0;
  list-style: none;
}
.lsn-fold > summary::-webkit-details-marker { display: none; }
.lsn-fold > summary::before { content: '▸ '; }
.lsn-fold[open] > summary::before { content: '▾ '; }
.lsn-fold--note > summary { background: var(--ai-50); color: var(--ai-dark); }
.lsn-fold--diagram > summary { background: var(--bg-alt); color: var(--text-secondary); }
.lsn-fold-body { padding: var(--sp-4); border-top: 1px solid var(--border-light); }
.lsn-fold:not([open]) > summary { border-radius: var(--r-sm); }

/* —— 题目呈现 —— */
.lsn-q-src { font-size: var(--fs-xs); color: var(--text-tertiary); margin-bottom: var(--sp-2); }
.lsn-q-type, .lsn-q-score {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  background: var(--bg-alt); border-radius: var(--r-pill);
}
.lsn-q-stem { color: var(--text); margin-bottom: var(--sp-3); }
.lsn-q-sub { color: var(--text); margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-base); }
.lsn-choices { list-style: none; margin: 0 0 var(--sp-2); padding: 0; }
.lsn-choices li {
  padding: 6px 10px; border-radius: var(--r-sm); background: var(--card-alt);
  margin-bottom: 4px; font-size: var(--fs-sm); color: var(--text-secondary);
}
.lsn-choices b { color: var(--brand); margin-right: 4px; }
.lsn-ans { font-size: var(--fs-sm); color: var(--success); font-weight: 600; }

/* —— 练习清单 —— */
.lsn-drill-list { margin: 0 0 var(--sp-4); padding-left: 22px; }
.lsn-drill-list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 8px 0; border-bottom: 1px solid var(--border-light); font-size: var(--fs-sm);
}
.lsn-drill-src { color: var(--text-secondary); }
.lsn-drill-type { color: var(--text-tertiary); font-size: var(--fs-xs); flex: none; }
.lsn-cta { display: flex; justify-content: center; padding-top: var(--sp-2); }

/* —— 同模块知识点 —— */
.lsn-more { padding: var(--sp-5); margin-top: var(--sp-4); }
.lsn-more-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.lsn-more-item {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-md);
  text-decoration: none; color: var(--text); font-size: var(--fs-sm); font-weight: 600;
  transition: border-color .15s, background .15s;
}
.lsn-more-item:hover { border-color: var(--brand); background: var(--brand-50); }
.lsn-more-item span { color: var(--text-tertiary); font-weight: 400; font-size: var(--fs-xs); flex: none; }

.lsn-empty { color: var(--text-tertiary); font-size: var(--fs-sm); }
.lsn-empty-card { padding: var(--sp-8); text-align: center; }

/* —— 复合知识点：分模型学练（讲解 + 编程题从易到难） —— */
.lsn-sub { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); margin-bottom: var(--sp-4); background: var(--card); }
.lsn-sub:last-child { margin-bottom: 0; }
.lsn-sub-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.lsn-sub-no {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--ai); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm);
}
.lsn-sub-title { margin: 0; font-size: var(--fs-md); color: var(--text); }
.lsn-sub-meta { font-size: var(--fs-xs); color: var(--text-tertiary); }

/* 锚定例题卡 */
.lsn-lead {
  border: 1px solid var(--brand-100); background: var(--brand-50);
  border-radius: var(--r-md); padding: var(--sp-4); margin: var(--sp-4) 0;
}
.lsn-lead-badge {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700; color: var(--brand-dark);
  background: var(--brand-100); padding: 2px 9px; border-radius: var(--r-pill); margin-bottom: var(--sp-2);
}
.lsn-lead-title { font-size: var(--fs-base); font-weight: 700; color: var(--text); margin-bottom: var(--sp-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.lsn-lead-title a { color: var(--brand-dark); text-decoration: none; }
.lsn-lead-title a:hover { text-decoration: underline; }
.lsn-lead-desc { color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.75; margin: 0 0 var(--sp-3); }

/* 难度徽章（编程题） */
.lsn-diff {
  display: inline-block; padding: 1px 8px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; flex: none;
}
.lsn-diff.diff-easy { background: var(--success-50); color: var(--success); }
.lsn-diff.diff-mid  { background: var(--warning-50); color: var(--warning-text); }
.lsn-diff.diff-hard { background: var(--danger-50);  color: var(--danger); }
.lsn-diff.diff-none { background: var(--bg-alt); color: var(--text-tertiary); }

/* 编程题从易到难列表 */
.lsn-prog-head { font-size: var(--fs-sm); font-weight: 700; color: var(--text-tertiary); margin: var(--sp-4) 0 var(--sp-2); }
.lsn-prog-list { list-style: none; margin: 0; padding: 0; }
.lsn-prog-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px 4px; border-bottom: 1px solid var(--border-light); font-size: var(--fs-sm);
}
.lsn-prog-item:last-child { border-bottom: none; }
.lsn-prog-rank { width: 20px; flex: none; text-align: center; color: var(--text-tertiary); font-weight: 700; }
.lsn-prog-name { flex: 1; min-width: 0; color: var(--text); font-weight: 600; }
.lsn-prog-name a { color: var(--text); text-decoration: none; }
.lsn-prog-name a:hover { color: var(--brand); text-decoration: underline; }
.lsn-prog-ext { font-size: var(--fs-xs); color: var(--text-tertiary); background: var(--bg-alt); padding: 1px 6px; border-radius: var(--r-pill); margin-left: 6px; }
.lsn-prog-src { color: var(--text-tertiary); font-size: var(--fs-xs); flex: none; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lsn-prog-go { flex: none; color: var(--brand); font-weight: 600; text-decoration: none; }
.lsn-prog-go:hover { text-decoration: underline; }
.lsn-prog-anim { flex: none; color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 600; text-decoration: none; background: var(--bg-alt); border: 1px solid var(--border-light); padding: 1px 8px; border-radius: var(--r-pill); margin-right: 8px; }
.lsn-prog-anim:hover { color: var(--brand); border-color: var(--brand); }

@media (max-width: 640px) {
  .lsn-prog-src { display: none; }
}
.lsn-empty-card h3 { margin: 0 0 var(--sp-2); color: var(--text); }
.lsn-empty-card p { color: var(--text-secondary); margin-bottom: var(--sp-4); }
.lsn-diagram { display: flex; justify-content: center; overflow-x: auto; }
.lsn-diagram svg { max-width: 100%; height: auto; }

/* —— 今日「先学」小卡（首页 / 今日练习复用） —— */
.lsn-card-mini {
  display: block; padding: var(--sp-4); border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--card); text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.lsn-card-mini + .lsn-card-mini { margin-top: var(--sp-3); }
.lsn-card-mini:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.lsn-card-mini-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.lsn-card-mini-name { font-weight: 700; color: var(--text); font-size: var(--fs-md); }
.lsn-card-mini-reason { margin: 6px 0; color: var(--text-tertiary); font-size: var(--fs-sm); line-height: 1.6; }
.lsn-card-mini-foot { color: var(--text-tertiary); font-size: var(--fs-xs); display: flex; justify-content: space-between; }
.lsn-card-mini-go { color: var(--brand); font-weight: 600; }

/* —— 知识学习页里的「从这里开始」入口 —— */
.kp-lesson-entry {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap; padding: var(--sp-4);
  border: 1px solid var(--brand-100); background: var(--brand-50);
  border-radius: var(--r-md); margin: var(--sp-3) 0;
}
.kp-lesson-entry-txt { display: flex; flex-direction: column; gap: 4px; min-width: 220px; flex: 1; }
.kp-lesson-entry-txt b { color: var(--brand-dark); font-size: var(--fs-base); }
.kp-lesson-entry-txt span { color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.6; }
.kp-lesson-entry-btn { flex: none; text-decoration: none; }

@media (max-width: 640px) {
  .lsn-hero, .lsn-sec { padding: var(--sp-4); }
  .lsn-hero-title { font-size: var(--fs-xl); }
  .lsn-steps { grid-template-columns: 1fr; }
  .lsn-step { justify-content: flex-start; }
  .lsn-more-list { grid-template-columns: 1fr; }
}

/* 试看模式提示条（学习单元，普通用户只看到首节） */
.lsn-locknote{margin-top:14px;padding:14px 16px;border:1px dashed #cbd5e1;border-radius:12px;background:#fbfcfe}
.lsn-locknote-title{font-weight:700;color:#334155;margin-bottom:6px;font-size:.95rem}
.lsn-locknote-desc{color:#64748b;font-size:.86rem;line-height:1.75;margin-bottom:10px}
.lsn-locknote-actions{display:flex;gap:10px;flex-wrap:wrap}