/* 学习端页面级样式（assets/pages.css）
 * owner：frontend-learn（task-8）。在 app.css（框架层，frontend-core 维护）之后加载，只做页面内布局与页面级部件，
 * 不定义 :root 令牌、不写全局 reset、不重复 .hd/.nav/.wrap/.g2/.g3/.g4 的基础响应式。
 * 断点统一：1199 / 1023 / 767 / 480。令牌全部来自 app.css（--c-* / --fs-* / --sp-* / --radius / --tap / --wrap）。
 * 覆盖页面：#/ 首页、#/courses 课程发现、#/course/:id 详情、#/learn/:id 学习、#/me 我的学习、
 *          #/plan 学习计划、#/profile 个人中心、#/mastery 知识点掌握、#/ai 学习助手。
 */

/* =====================================================================
 * 通用：页头 / 页内小部件
 * ===================================================================== */
.btn-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card .searchbox { margin-top: 2px; }

/* 目录项用 <button> 承载（可键盘可达），抹掉按钮默认外观 */
.tree button.it {
  width: 100%; border: 0; background: transparent; text-align: left; font: inherit;
  display: flex; align-items: center; gap: 6px; color: inherit;
}
.tree button.it:hover { background: var(--c-bg); }
.tree button.it.on { background: var(--c-primary-l); }
.page-head { margin-bottom: 18px; }
.page-head .pg-title { font-size: var(--fs-xxl); font-weight: 700; color: var(--c-ink); }
.page-head .pg-sub { font-size: var(--fs-md); color: var(--c-ink3); margin-top: 4px; }

.pg-title { font-size: var(--fs-xxl); font-weight: 700; color: var(--c-ink); }

/* 搜索框内联排版（页面内，不需要 framework 层） */
.searchbox { display: flex; gap: 8px; }
.searchbox .input { flex: 1; min-width: 0; }
.searchbox .btn { flex: none; }

/* 高亮（搜索结果关键词；由 CP.esc/ LF.hl 转义后生成） */
.hl { background: #fbf0c9; color: var(--c-ink); border-radius: 2px; padding: 0 1px; }

/* 评分 / 价格（课程卡尾部；app.css 的 .ccard-foot 只有布局） */
.rating { font-size: var(--fs-sm); color: var(--c-warn); font-weight: 500; }
.rating.off { color: var(--c-ink3); font-weight: 400; }
.price { margin-left: auto; font-size: var(--fs-md); font-weight: 600; color: var(--c-primary-d); }
/* 卡片标签容器（app.css 只有 .tag 本体，没有容器布局）
 * 第三轮第 4 条：`.tags` 始终是横向 flex 容器；窄屏由本文件 @media 480 强制 `.tags` 独占整行（grid-column:1/-1），
 * 避免被 app.css 窄屏 `.ccard` 栅格挤成「一 chip 一行」。 */
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; align-items: center; }
.tags .tag { font-size: var(--fs-xs); white-space: nowrap; }
.ccard > .tags { display: flex; flex-wrap: wrap; }

/* =====================================================================
 * 首页 #/
 * ===================================================================== */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }

.resume-line { font-size: var(--fs-sm); color: var(--c-ink2); line-height: 1.65; }
.go-learn { font-size: var(--fs-sm); color: var(--c-primary); font-weight: 600; margin-left: auto; }

/* 推荐卡（.ccard 之上叠加；.why 与 .scoreline 的基础样式在 app.css） */
.rcard .why { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; padding: 5px 8px; }
/* 第三轮第 2/3 条：推荐卡只留「一句人话理由」（单行省略）+ 命中标签 chip；分数/权重/总分进折叠面板。
 * 首页三类卡片（继续学习 272 / 推荐 ≈300 / 热门≈272）同屏高度差目标 ≤40px。 */
.rcard .why .why-t {
  flex: 1 1 120px; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: var(--fs-sm); color: var(--c-accent); line-height: 1.55;
}
.rcard .why .mtag { flex: none; }
/* 推荐卡结构：<article class="ccard rcard"> 内是 <a class="rcard-hit">（封面+标题+元信息+理由）
 * + 折叠面板 + 卡片脚。不能把 <details> 放进 <a> 里（交互元素嵌套，键盘会误触跳转），
 * 所以整卡点击用 .rcard-hit::after 铺满覆盖层实现，折叠面板抬到覆盖层之上。 */
.rcard { position: relative; }
.rcard .rcard-hit {
  display: flex; flex-direction: column; gap: 9px; min-width: 0;
  color: inherit; text-decoration: none;
}
.rcard .rcard-hit::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.rcard .rcard-hit:focus-visible { outline: 2px solid var(--c-primary-d); outline-offset: 3px; border-radius: 6px; }
.rcard > .why-more { position: relative; z-index: 2; }
.why-full { margin: 0 0 6px; font-size: var(--fs-sm); color: var(--c-ink2); line-height: 1.7; }
.why-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 6px; font-size: var(--fs-xs); }
.mtag {
  display: inline-block; font-size: var(--fs-xs); border-radius: 6px; padding: 1px 7px;
  background: var(--c-primary-l); color: var(--c-primary-d); border: 1px solid #cfe3e8; font-weight: 500;
}
/* 探索位：与兴趣标签视觉区分开（灰底虚线），一眼看出这条不是按兴趣推的。
   刻意不复用 .mtag 类名——.mtag 的语义是「命中的兴趣标签」，
   混进去会让「理由里提到的标签必须来自用户兴趣」这条验收断言误判。 */
.explore-tag {
  display: inline-block; font-size: var(--fs-xs); border-radius: 6px; padding: 1px 7px;
  background: transparent; color: var(--c-ink3); border: 1px dashed var(--c-line); font-weight: 400;
  white-space: nowrap;
}
.rscores {
  display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-xs); color: var(--c-ink3);
  border-top: 1px dashed var(--c-line); padding-top: 8px;
}
.rscores .rs { white-space: nowrap; }
.rscores .rs.off { color: var(--c-warn); font-weight: 500; }
.rweights { font-size: var(--fs-xs); color: var(--c-ink3); line-height: 1.5; }
/* 第三轮第 2/3 条：技术分数收进默认折叠面板 */
.why-more { margin-top: 2px; font-size: var(--fs-sm); }
.why-more > summary {
  cursor: pointer; list-style: none; color: var(--c-primary-d); font-size: var(--fs-sm);
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 0;
}
.why-more > summary::-webkit-details-marker { display: none; }
.why-more > summary::after { content: '▾'; font-size: var(--fs-xs); }
.why-more[open] > summary::after { content: '▴'; }
.why-more .why-body { padding-top: 4px; }
.why-more .why-src { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: var(--fs-xs); }
.why-more .why-src .tag { font-size: var(--fs-xs); }

/* 新同学首屏：没有在学课程也没有计划时，「继续学习」「本周学习计划」两块都是空态卡，
 * 两块叠在一起会把「为你推荐」推到 900px 之后。此时把推荐提到最前，空态区收到后面。 */
.page-home.is-newcomer .sec-rec { order: -1; }
.page-home.is-newcomer { display: flex; flex-direction: column; }
.page-home.is-newcomer .page-head, .page-home.is-newcomer .stat-grid { order: -2; }

/* 本周学习计划 */
.plan-card { padding: 4px 16px; }
.plan-row { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--c-line); flex-wrap: wrap; }
.plan-row:last-child { border-bottom: 0; }
.plan-main { flex: 1 1 220px; min-width: 0; }
/* 命中区：计划行课程名实测 21px 高；纵向 padding 扩到 33px（规范次要交互 32 下限），负 margin 保持行距不变 */
.plan-name { display: inline-block; font-size: var(--fs-md); font-weight: 600; color: var(--c-ink);
  padding: 6px 0; margin: -6px 0; }
.plan-name:hover { color: var(--c-primary); }
.plan-bar { flex: 1 1 220px; display: flex; align-items: center; gap: 10px; }
.plan-bar .bar { flex: 1; }

/* =====================================================================
 * 课程发现 #/courses
 * ===================================================================== */
.filterbar { padding: 14px 16px; display: flex; flex-direction: column; }
.searchrow { order: 0; }
/* 桌面端保持原顺序：chips 面板在上、排序/总数/重置在下 */
.filters { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; order: 1; }
.fbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; order: 2; }
.frow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 32px; }
.flabel { flex: none; font-size: var(--fs-sm); color: var(--c-ink3); font-weight: 500; }
.flabel-gap { margin-left: 16px; }
.filter-toggle { display: none; }
.fbadge {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--c-primary); color: #fff; font-size: var(--fs-xs); font-weight: 600;
}
.fcaret { font-size: var(--fs-xs); color: var(--c-ink3); }
.sel-sort, .sel-sel { width: auto; min-width: 118px; height: 32px; padding: 0 26px 0 10px; font-size: var(--fs-sm); }
.sel-sel { min-width: 108px; }

/* 搜索联想 / 历史下拉 */
.suggest-wrap { position: relative; flex: 1; min-width: 0; }
.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 45;
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-s);
  box-shadow: var(--shadow-lg); max-height: 328px; overflow: auto; padding: 6px;
}
.sg-group + .sg-group { border-top: 1px solid var(--c-line2); margin-top: 4px; padding-top: 4px; }
.sg-h { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; font-size: var(--fs-xs); color: var(--c-ink3); }
.sg-it {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0;
  background: transparent; padding: 8px; border-radius: 6px; cursor: pointer;
  font-size: var(--fs-md); color: var(--c-ink2); font-family: inherit;
}
.sg-it:hover, .sg-it.on { background: var(--c-bg); color: var(--c-ink); }
.sg-it:focus-visible { outline: 2px solid var(--c-primary-d); outline-offset: -2px; }
.sg-ic {
  flex: none; width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center;
  background: var(--c-primary-l); color: var(--c-primary); font-size: var(--fs-xs); font-weight: 600;
}

/* 数字分页 */
.pager .pg {
  min-width: 34px; min-height: 34px; padding: 5px 11px; border: 1px solid var(--c-line);
  border-radius: 7px; background: var(--c-card); color: var(--c-ink2); font-size: var(--fs-sm);
  cursor: pointer; font-family: inherit;
}
.pager .pg:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); }
.pager .pg.on { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); font-weight: 600; }
.pager .pg:disabled { opacity: .55; cursor: not-allowed; }
.pager .pg-gap { color: var(--c-ink3); padding: 0 2px; }
.pager .pg:focus-visible { outline: 2px solid var(--c-primary-d); outline-offset: 2px; }

/* =====================================================================
 * 课程详情 #/course/:id
 * ===================================================================== */
/* task-22 后 app.css 的 .cover 统一为「40px 窄条 + 一级分类全名」；详情页 hero 同步为
 * 单列布局 + 40px 分类条（原 152px 色块会与卡片语言不一致，且 375 下挤压标题）。 */
.hero { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
/* 详情页顶部：分类名做成左侧对齐的 chip，而不是整行铺满的 40px 空色带
 * （1440 下铺满 1200px 只剩中间三个字，读起来像占位符；chip 与下方元信息同一视觉节奏） */
.hero-cover {
  width: fit-content; max-width: 100%; height: 26px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; padding: 0 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-main { min-width: 0; }
.cate-path { font-size: var(--fs-sm); color: var(--c-ink3); margin-top: 4px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-sm); color: var(--c-ink3); margin-top: 8px; }
.hero-meta span { white-space: nowrap; }
.hero-rating { margin-top: 8px; }
.rating-big { font-size: var(--fs-lg); font-weight: 600; color: var(--c-warn); }
.hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
/* 收藏按钮：默认描边低调，收藏后变琥珀色，避免和主 CTA「加入学习」抢视觉 */
.fav-btn { display: inline-flex; align-items: center; gap: 6px; }
.fav-btn .fav-ic { font-size: 1.02em; line-height: 1; color: #c99a1e; }
.fav-btn.fav-on { border-color: #efc96b; background: #fffaee; color: #8a5a00; }
.fav-btn.fav-on:hover { border-color: #e0b64b; background: #fff5dc; }
/* 「我的收藏」列表 */
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.fav-card { display: flex; flex-direction: column; gap: 8px; }
.fav-card .fav-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fav-card .fav-name { font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); line-height: 1.45; }
.fav-card .fav-meta { font-size: var(--fs-xs); color: var(--c-ink3); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.fav-card .fav-acts { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; }
/* 价格做成紧跟在元信息后面的小徽标：原来用 margin-left:auto 顶到 1090px 容器的极右端，
   1440 下和左侧「26 人在学」隔了 900 多像素，读起来像两个不相干的元素 */
.price-hero { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--c-primary-l); color: var(--c-primary-d); font-size: var(--fs-sm); font-weight: 700; }
.plan-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: var(--fs-sm); color: var(--c-ink3); }
/* 已有学习计划时：用 chip 展示真实频率，避免「加入后可在…」这句在已加入时还挂着 */
.plan-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--c-accent-l); color: var(--c-accent); font-weight: 600; font-size: var(--fs-sm); }
.plan-inline .btn.sm { height: 30px; padding: 0 12px; font-size: var(--fs-sm); }
/* 已学完标记：与主按钮同一行，用成功色 chip 说明「不是漏了按钮，而是这门课学完了」 */
.finish-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--c-ok-l, #e8f5ec); color: var(--c-ok, #2e7d4f); font-weight: 600; font-size: var(--fs-sm); }
.plan-inline .btn-text { color: var(--c-primary); font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; }
.plan-inline .btn-text:hover { text-decoration: underline; }

.sec-card { padding: 18px 20px; }
.sec-h2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sec-h2 h2 { font-size: var(--fs-xl); font-weight: 600; color: var(--c-ink); }
.sec-h2 .note { margin-left: auto; font-size: var(--fs-sm); color: var(--c-ink3); }
.mini-h { font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); margin: 16px 0 6px; }

/* 行长（measure）：1440 下正文实测 1090px、每行 78–84 个汉字，远超中文舒适阅读区
   （35–45 字）。容器宽度保持铺满（卡片、表格要占满），只把「连续正文」限制到 44em，
   眼睛扫完一行不用来回甩头。375 下 321px 本来就在舒适区内，44em 不生效。 */
.intro-text { font-size: var(--fs-md); line-height: 1.85; color: var(--c-ink2); white-space: pre-wrap; max-width: 44em; }
.intro-text.folded { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* 第三轮第 1 条：窄容器里「展开/收起」不得被折成两行（375 下会被挤成「展」「开」） */
.expand-btn { white-space: nowrap; }
.intro-extra { margin-top: 4px; }

.empty-inline { padding: 12px 0 4px; border-top: 1px dashed var(--c-line); margin-top: 10px; }
.empty-inline-t { font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); }
.empty-inline .muted { margin: 4px 0 10px; }

/* 课程目录 */
.cata-ch { margin-bottom: 8px; }
.cata-ch-t {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 0; background: transparent; padding: 8px 2px; border-radius: 6px; cursor: pointer;
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink2); font-family: inherit;
}
.cata-ch-t:hover { background: var(--c-bg); color: var(--c-ink); }
.cata-ch-t:focus-visible { outline: 2px solid var(--c-primary-d); outline-offset: -2px; }
.cata-ch-caret { flex: none; width: 10px; font-size: var(--fs-xs); color: var(--c-ink3); }
.cata-ch-nm { flex: 1; min-width: 0; }
.cata-ch-meta { flex: none; display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 500; color: var(--c-ink3); }
.cata-ch-done { color: var(--c-ok); font-weight: 600; }
.cata-ch-body { padding-left: 10px; border-left: 2px solid var(--c-line2); margin-left: 4px; }
.cata-it {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0;
  background: transparent; padding: 8px 10px; border-radius: 6px; cursor: pointer;
  color: var(--c-ink2); font-size: var(--fs-md); font-family: inherit;
}
.cata-it:hover { background: var(--c-bg); color: var(--c-ink); }
.cata-it:focus-visible { outline: 2px solid var(--c-primary-d); outline-offset: -2px; }
.cata-nm { flex: 1; min-width: 0; }
.cata-meta { flex: none; display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--c-ink3); }
.ok-mark { color: var(--c-ok); font-weight: 700; }

/* 评价 */
.rev-sum { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 20px; padding: 4px 0 14px; border-bottom: 1px solid var(--c-line2); }
.rev-avg { text-align: center; }
.rev-num { font-size: var(--fs-xxl); font-weight: 700; line-height: 1.1; color: var(--c-warn); }
.rev-stars { display: flex; justify-content: center; gap: 2px; margin: 4px 0; color: #b98223; font-size: var(--fs-xl); }
.rev-dist { display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.rbar-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--c-ink3); }
.rbar-l, .rbar-p { flex: none; width: 36px; }
.rbar-p { text-align: right; }
.rbar { flex: 1; height: 8px; border-radius: 4px; background: var(--c-line); overflow: hidden; }
.rbar > i { display: block; height: 100%; border-radius: 4px; background: #b98223; }

.review-list { margin-top: 12px; }
.review { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--c-line2); }
.review:last-of-type { border-bottom: 0; }
.rev-ava {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-primary-l); color: var(--c-primary); font-size: var(--fs-sm); font-weight: 600;
}
.rev-body { flex: 1; min-width: 0; }
.rev-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rev-nick { font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); }
/* 列表里标出「我的评价」，与下方「我的评分」区分开，避免同一段文字读起来像重复 */
.rev-me { flex: none; padding: 1px 7px; border-radius: 9px; background: var(--c-primary-l); color: var(--c-primary-d); font-size: var(--fs-xs); font-weight: 600; }
.review.mine .rev-ava { background: var(--c-primary); color: #fff; }
.rev-stars-sm { color: #b98223; font-size: var(--fs-sm); }
.rev-time { margin-left: auto; font-size: var(--fs-xs); color: var(--c-ink3); }
/* 同上：评价正文 1440 下 1048px / 每行 81 字，限到 44em 更好读 */
.rev-text { margin-top: 4px; font-size: var(--fs-md); line-height: 1.7; color: var(--c-ink2); white-space: pre-wrap; max-width: 44em; }
.more-btn { width: 100%; margin-top: 10px; }

.my-rate { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-line); }
.rate-pick { margin-left: 8px; font-size: var(--fs-sm); color: var(--c-ink3); }

/* =====================================================================
 * 学习页 #/learn/:id
 * ===================================================================== */
.learn-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.learn-head .pg-title { font-size: var(--fs-xl); }
/* O-09：小屏把「学习计划」收进标题行右侧，标题省略而不换行 */
.learn-head .pg-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.learn-head > .btn:last-child { margin-left: auto; }
@media (max-width: 767px) {
  .learn-head { flex-wrap: nowrap; }
  .learn-head .tag { display: none; }
  .learn-head .btn { flex: 0 0 auto; }
}

.learn-tree-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 8px; font-size: var(--fs-sm); color: var(--c-ink3); }

.resume-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* 媒体区下方常驻说明（I-P1-8：播放器与实际媒体资产自洽，不伪造进度） */
.media-note {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--c-ink3); padding: 8px 2px 0;
}
.media-note .tag { flex: none; }

/* 图文小节抬头（无媒体文件时替代伪播放器，避免黑块 + 无效播放键） */
.doc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.doc-head .doc-sub { font-size: var(--fs-xs); color: var(--c-ink3); }

/* 正文卡 */
.sec-title { font-size: var(--fs-xl); font-weight: 600; color: var(--c-ink); margin-bottom: 4px; }
.sec-sub { font-size: var(--fs-sm); color: var(--c-ink3); margin-bottom: 12px; }
.mark-done-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.mark-done-row .state { font-size: var(--fs-sm); color: var(--c-ink3); }
.mark-done-row .state.ok { color: var(--c-ok); }

/* 右侧栏卡片 */
.aside-card { padding: 14px 16px; }
.aside-card + .aside-card { margin-top: 14px; }
.aside-title { font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); margin-bottom: 6px; }
.aside-item { padding: 8px 0; border-bottom: 1px dashed var(--c-line); font-size: var(--fs-md); }
.aside-item:last-child { border-bottom: 0; }
.aside-item .k { font-size: var(--fs-xs); color: var(--c-ink3); margin-bottom: 2px; }
/* 命中区：右栏推荐卡标题链接实测 17px 高；纵向 padding 扩到 26px，行盒不变 */
/* 命中区：右栏推荐卡标题链接实测 17px 高；纵向 padding 扩到 33px，行盒不变 */
.aside-item a { display: inline-block; padding: 8px 0; margin: -8px 0; }
.aside-item .act { font-size: var(--fs-sm); color: var(--c-primary); cursor: pointer; }
.weak-item { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--c-ink2); padding: 4px 0; }
.weak-item .nm { flex: none; width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weak-item .bar { flex: 1; }
.weak-item .val { flex: none; font-size: var(--fs-xs); color: var(--c-ink3); }

/* =====================================================================
 * 我的学习 #/me
 * ===================================================================== */
.me-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.course-row { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--c-line2); flex-wrap: wrap; }
.course-row:last-child { border-bottom: 0; }
.course-row .cover { width: 96px; flex: none; align-self: flex-start; }
.course-row-main { flex: 1 1 240px; min-width: 0; }
/* 命中区：标题链接实测 19px 高（行内元素，上下 padding 不改变行盒，可点区域变大而布局不动） */
.course-row-title { font-size: var(--fs-lg); font-weight: 600; color: var(--c-ink); padding: 6px 0; }
.course-row-title:hover { color: var(--c-primary); }
.course-row-meta { font-size: var(--fs-sm); color: var(--c-ink3); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.course-row-side { flex: 0 1 220px; display: flex; flex-direction: column; gap: 6px; }
.course-row-side .bar { width: 100%; }
/* 破坏性操作（退出学习）用 .btn.quiet：红底实心按钮 × 6 行会让页面全是警示色，
 * 主操作（继续学习）被稀释；但入口必须保持可见（验收用例 F-P2-4 要求可点到并弹二次确认），
 * 所以不做折叠菜单。quiet 悬停才转危险色，语义与二次确认都不变。 */

/* 掌握度条（meter 结构在 app.css，这里只调页面内宽度） */
.meter .val { width: 52px; }

/* =====================================================================
 * 学习计划 #/plan
 * ===================================================================== */
.plan-item { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--c-line2); flex-wrap: wrap; }
.plan-item:last-child { border-bottom: 0; }
.plan-item .cover { width: 96px; flex: none; align-self: flex-start; }
.plan-item-main { flex: 1 1 220px; min-width: 0; }
/* 命中区：同上，行内链接加纵向 padding 扩可点区，行高不变 */
.plan-item-title { font-size: var(--fs-lg); font-weight: 600; color: var(--c-ink); padding: 6px 0; }
.plan-item-meta { font-size: var(--fs-sm); color: var(--c-ink3); margin-top: 4px; }
.plan-item-bar { flex: 1 1 200px; display: flex; align-items: center; gap: 8px; }
.plan-item-bar .bar { flex: 1; }
.week-summary { display: flex; gap: 20px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--c-ink2); margin-bottom: 10px; }
.week-summary b { color: var(--c-primary-d); }

/* =====================================================================
 * 个人中心 #/profile
 * ===================================================================== */
.profile-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.profile-card { padding: 20px; text-align: center; }
.avatar-big {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 10px; display: grid; place-items: center;
  background: var(--c-primary-l); color: var(--c-primary); font-size: var(--fs-xxl); font-weight: 700;
}
.profile-name { font-size: var(--fs-xl); font-weight: 600; color: var(--c-ink); }
.profile-role { font-size: var(--fs-sm); color: var(--c-ink3); margin-top: 2px; }
.profile-facts { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--c-line); text-align: left; }
.profile-facts li { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-sm); padding: 5px 0; }
.profile-facts .k { color: var(--c-ink3); }
.profile-facts .v { color: var(--c-ink2); text-align: right; overflow-wrap: anywhere; }
.avatar-actions { margin-top: 12px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.form-grid .field.full { grid-column: 1 / -1; }

/* =====================================================================
 * 知识点掌握 #/mastery
 * ===================================================================== */
.mastery-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.interest-list { display: flex; flex-wrap: wrap; gap: 8px; }
.interest-chip { display: inline-flex; align-items: center; gap: 6px; }
/* 命中区：删除标签的 × 原为 11×13，触屏几乎点不中；扩到 24×24（负 margin 抵消，chip 不变高） */
.interest-chip .x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: var(--fs-md); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px;
  margin: -4px -4px -4px 0; padding: 0; border-radius: 50%; }
.interest-chip .x:focus-visible { outline: 2px solid var(--c-primary-d); outline-offset: 1px; }
.interest-chip .x:hover { color: var(--c-danger); }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--fs-sm); color: var(--c-ink3); margin-top: 10px; }
.legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.dot.ok { background: var(--c-ok); }
.dot.warn { background: var(--c-warn); }
.dot.danger { background: var(--c-danger); }

/* =====================================================================
 * 学习助手 #/ai
 * ===================================================================== */
.ai-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.ai-chat-card { padding: 16px 18px; display: flex; flex-direction: column; min-height: 0; }
.ai-side-card { padding: 14px 16px; }
.ai-side-card + .ai-side-card { margin-top: 14px; }
.ai-refs { margin-top: 6px; font-size: var(--fs-xs); color: var(--c-ink3); }
/* AI 服务未启动的降级提示：黄色提示条，必须显眼，便于答辩现场一眼看出是环境问题而非答得差 */
.ai-degraded { margin-top: 8px; display: flex; align-items: flex-start; gap: 7px;
  background: #fff8e6; border: 1px solid #f2d08a; color: #8a5a00;
  border-radius: var(--radius-s); padding: 7px 10px; font-size: var(--fs-xs); line-height: 1.6; }
.ai-degraded code { background: rgba(138, 90, 0, .10); padding: 1px 5px; border-radius: 3px; font-size: inherit; }
.ai-degraded .dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #e0a300; margin-top: 6px; }
/* 资料不足时的引导：弱化处理，不抢正文视觉，但要让用户知道该换个说法 */
.ai-lowconf { margin-top: 8px; display: flex; align-items: flex-start; gap: 7px;
  background: var(--c-fill, #f4f7f9); border: 1px solid var(--c-line); color: var(--c-ink3);
  border-radius: var(--radius-s); padding: 7px 10px; font-size: var(--fs-xs); line-height: 1.6; }
.ai-cards { display: grid; gap: 8px; margin-top: 8px; }
.bcard { border: 1px solid var(--c-line); border-radius: var(--radius-s); padding: 8px 10px; background: var(--c-card); }
.bcard-t { font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); }
.bcard-m { font-size: var(--fs-xs); color: var(--c-ink3); margin-top: 2px; }
.bcard-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.bcard-tags .tag { font-size: var(--fs-xs); }

/* =====================================================================
 * 补充：模板实际使用、app.css 未覆盖的选择器
 * ===================================================================== */
.searchrow { display: flex; gap: 8px; align-items: center; }
.page-home, .page-courses, .page-course { display: block; }
.course-grid { row-gap: var(--sp-4); }
.cata-tree { border-top: 1px solid var(--c-line2); }
.rev-star { color: #b98223; font-size: var(--fs-lg); line-height: 1; }
.sort-note { margin: 4px 0 10px; }

/* =====================================================================
 * 响应式（只处理页面内布局；外壳与 g2/g3/g4 由 app.css 负责）
 * ===================================================================== */
@media (max-width: 1199px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .me-grid, .mastery-grid, .ai-layout { grid-template-columns: minmax(0, 1fr); }
  .profile-grid { grid-template-columns: 240px minmax(0, 1fr); }
}

@media (max-width: 1023px) {
  .course-row .cover, .plan-item .cover { width: 96px; }
  .rev-sum { grid-template-columns: 140px minmax(0, 1fr); gap: 14px; }
  .profile-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rev-sum { grid-template-columns: minmax(0, 1fr); }
  .rev-avg { display: flex; align-items: center; justify-content: center; gap: 12px; }
  .rev-stars { margin: 0; }
  .suggest { max-height: 60vh; }
  .plan-row, .plan-item, .course-row { align-items: flex-start; }
  .course-row-side, .plan-item-bar { flex-basis: 100%; }
  /* 375 实测：`.course-row` 是 flex-wrap，封面 80 + gap 14 + main 最小 240 > 321，
   * 于是封面独占首行、标题掉到第二行、进度条再掉第三行（rowH=228，卡片被拉长一倍）。
   * 窄屏改成两列 grid：封面列固定宽、正文列吃掉剩余宽度，进度/按钮再横跨整行。 */
  .course-row, .plan-item {
    display: grid; grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 12px; row-gap: 8px; align-items: start;
  }
  .course-row .cover, .plan-item .cover { width: 100%; align-self: start; }
  .course-row-main, .plan-item-main { grid-column: 2; }
  .course-row-side, .plan-item-bar, .plan-item > .btn-row { grid-column: 1 / -1; }
  .ai-layout { grid-template-columns: minmax(0, 1fr); }
  .ai-layout .chat { height: 62vh; }
  /* 空会话不撑满 62vh：窄屏 62vh≈503px 里只有一句问候，快捷问句被推到屏幕外 */
  .ai-layout .chat.chat-empty { height: auto; }
  /* 窄屏筛选折叠：chip 面板默认收起，只留「筛选 N ▾ / 排序 / 课程数 / 重置」一行。
     收起前实测 375×812 下筛选卡 416px、首张课程卡 top=556（半屏看不到课程）。 */
  .filters { display: none; margin-top: 10px; }
  .filters.open { display: flex; }
  .filter-toggle {
    display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px;
    border: 1px solid var(--c-line); border-radius: var(--radius-s); background: var(--c-card);
    color: var(--c-ink2); font-size: var(--fs-sm); font-family: inherit; cursor: pointer;
  }
  .filter-toggle:focus-visible { outline: 2px solid var(--c-primary-d); outline-offset: 2px; }
  /* 工具条提到 chip 面板之前：展开后「筛选 ▴」仍紧贴搜索框，不会把收起入口推到首屏外 */
  .searchrow { order: 0; }
  .fbar { order: 1; margin-top: 10px; }
  .filters { order: 2; }
  .fbar .sel-sort { flex: 1 1 40%; min-width: 0; }
  .fbar .fcount { order: 5; }
}

@media (max-width: 480px) {
  .page-head .pg-title, .pg-title { font-size: var(--fs-xl); }
  .filterbar { padding: 12px; }
  .frow { gap: 6px; }
  .sel-sort, .sel-sel { flex: 1 1 40%; min-width: 0; }
  .hero { padding: 14px; }
  .sec-card { padding: 14px; }
  .stat-grid { gap: 8px; }
  .searchbox { flex-wrap: wrap; }
  .searchbox .input { flex: 1 1 60%; }
  .searchbox .btn { flex: 1 1 auto; }
  .rev-num { font-size: var(--fs-xl); }
  .cata-it, .review, .plan-row { font-size: var(--fs-md); }
  .plan-item .cover, .course-row .cover { width: 80px; }
  /* 第三轮第 4 条：窄屏下标签/推荐理由/折叠面板独占整行，chips 横向排列（每行 ≥2 个） */
  .ccard > .tags, .ccard > .why, .ccard > .why-more { grid-column: 1 / -1; }
  /* 推荐卡的封面/标题/理由现在包在 .rcard-hit 里（见上方说明），窄屏要单独复刻「封面窄条 + 文本列」栅格 */
  .rcard { display: flex; flex-direction: column; }
  .rcard .rcard-hit {
    display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: start;
  }
  .rcard .rcard-hit .cover { width: 72px; height: 40px; font-size: var(--fs-sm); letter-spacing: 0; padding: 0 6px; }
  .rcard .rcard-hit .ccard-t, .rcard .rcard-hit .ccard-meta { grid-column: 2; min-width: 0; }
  .rcard .rcard-hit .why { grid-column: 1 / -1; }
  .tags .tag { font-size: var(--fs-xs); }
  /* 命中区：设计规范 §10.2-13「≤480 所有可点元素命中区 ≥44」。
     本文件在 app.css 之后加载，同特异性的 app.css @media 480 覆盖会被这里的基础规则赢掉，
     所以这些选择器的 44px 版本必须写在本文件内。行内/行内块元素加纵向 padding 扩命中区，
     再等量负 margin 抵消，视觉与行距不变。 */
  .plan-name, .course-row-title, .plan-item-title, .aside-item a { padding: 13px 0; margin: -13px 0; }
  .interest-chip .x { min-width: var(--tap); min-height: var(--tap); margin: -11px -10px -11px 0; }
  /* 其余交互元素在 375 下同样按规范撑到 44：筛选按钮 / 排序下拉 / 分页 / 目录章头与小节 */
  .filter-toggle { min-height: var(--tap); }
  .sel-sort, .sel-sel { height: var(--tap); }
  .pager .pg { min-height: var(--tap); min-width: var(--tap); }
  .cata-ch-t { min-height: var(--tap); }
  .cata-it { min-height: var(--tap); }
}