/* ============================================================================
   v4 · 内容组件层
   定位：把「图标+标题+箭头的列表行」升级为「有封面、有标签、有进度的内容卡片」
   依赖：theme.css（基础 token）→ v3.css（品牌视觉）→ v4.css（内容组件）
   ============================================================================ */

/* ---------- 封面系统：真实图 + 品牌蒙层，保证图片与品牌色调统一 ---------- */
.cf{position:relative;background:linear-gradient(150deg,#33513F 0%,#16241D 100%);
  background-size:cover;background-position:center;overflow:hidden}
.cf::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,20,16,.06) 0%,rgba(12,20,16,.30) 46%,rgba(12,20,16,.72) 100%)}
.cf>*{position:relative;z-index:2}

/* ---------- 胶囊标签 ---------- */
.pill{display:inline-flex;align-items:center;gap:4px;height:21px;padding:0 9px;
  border-radius:999px;font-size:11px;font-weight:500;line-height:1;white-space:nowrap;
  letter-spacing:.02em}
.pill svg{width:11px;height:11px}
.pill.gold{background:var(--gold-soft);color:#8A6320}
.pill.green{background:var(--brand-soft);color:var(--brand)}
.pill.gray{background:rgba(107,114,106,.11);color:var(--sub)}
.pill.red{background:var(--danger-soft);color:var(--danger)}
.pill.on-cf{background:rgba(12,20,16,.46);color:#EFD9AC;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(239,217,172,.28)}

/* ---------- 进度条 ---------- */
.prog{height:3px;border-radius:2px;background:rgba(30,36,31,.09);overflow:hidden}
.prog i{display:block;height:100%;border-radius:2px;width:0;
  background:linear-gradient(90deg,#E3C688,#BE8A34);
  transition:width .9s cubic-bezier(.22,.85,.32,1)}
.prog.green i{background:linear-gradient(90deg,#5C7A66,#2F4A3B)}

/* ---------- 头像 ---------- */
.av{display:flex;align-items:center;justify-content:center;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(150deg,#3A5C49,#22362B);color:#EFD9AC;font-weight:600;
  letter-spacing:0;overflow:hidden}
.av.gold{background:linear-gradient(150deg,#E3C688,#BE8A34);color:#2A1F0C}

/* ============================================================
   1. 内容大卡 .ccard —— 课程 / 疗法 / 话术包，带封面横幅
   ============================================================ */
.ccard{position:relative;background:var(--card);border:1px solid var(--hairline);
  border-radius:18px;overflow:hidden;box-shadow:var(--e-1);
  transition:box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.ccard .cf{height:116px}
.ccard .cf .pl{position:absolute;left:11px;bottom:10px}
.ccard .cf .tm{position:absolute;right:11px;bottom:10px}
.ccard .bd{padding:11px 13px 13px}
.ccard .tt{font-size:15.5px;font-weight:600;color:var(--txt);line-height:1.36;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ccard .ds{font-size:12px;color:var(--sub);line-height:1.55;margin-top:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ccard .ft{display:flex;align-items:center;gap:9px;margin-top:10px}
.ccard .ft .prog{flex:1}
.ccard .ft .pt{font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums;flex:0 0 auto}
.ccard .tags{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}

/* ============================================================
   2. 媒体卡 .mcard —— 替代原 .item 列表行，左侧缩略封面
   ============================================================ */
.mcard{display:flex;gap:11px;padding:10px;background:var(--card);
  border:1px solid var(--hairline);border-radius:16px;box-shadow:var(--e-1);
  transition:box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out)}
.mcard .thumb{width:72px;height:72px;border-radius:13px;flex:0 0 auto;position:relative;overflow:hidden}
.mcard .thumb .tg{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:3px 5px;
  font-size:9.5px;color:#EFD9AC;text-align:center;letter-spacing:.04em;
  background:linear-gradient(180deg,transparent,rgba(12,20,16,.72));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcard .bd{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.mcard .tt{font-size:14px;font-weight:600;color:var(--txt);line-height:1.35;letter-spacing:-.01em;
  display:flex;align-items:center;gap:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcard .ds{font-size:11.5px;color:var(--sub);line-height:1.5;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcard .mt{display:flex;align-items:center;gap:6px;margin-top:7px;flex-wrap:wrap}
.mcard .rt{flex:0 0 auto;display:flex;align-items:center;color:var(--mute)}
.mcard .rt svg{width:15px;height:15px}

/* ============================================================
   3. 任务卡 .tcard —— 左侧状态色条
   ============================================================ */
.tcard{position:relative;background:var(--card);border:1px solid var(--hairline);
  border-radius:16px;padding:12px 13px 12px 17px;box-shadow:var(--e-1);overflow:hidden;
  transition:box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.tcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.tcard.g::before{background:var(--ok)}
.tcard.r::before{background:var(--danger)}
.tcard.b::before{background:var(--info)}
.tcard .hd{display:flex;align-items:flex-start;gap:9px}
.tcard .tt{font-size:14px;font-weight:600;color:var(--txt);line-height:1.35;flex:1;min-width:0}
.tcard .ds{font-size:11.5px;color:var(--sub);line-height:1.5;margin-top:5px}
.tcard .ft{display:flex;align-items:center;gap:8px;margin-top:9px}

/* ============================================================
   4. 榜单行 .rank-i —— 名次徽章 + 头像 + 分数条
   ============================================================ */
.rank-i{display:flex;align-items:center;gap:11px;padding:10px 12px;background:var(--card);
  border:1px solid var(--hairline);border-radius:15px;margin-bottom:8px;box-shadow:var(--e-1);
  transition:box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.rank-i:last-child{margin-bottom:0}
.rank-i .no{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:700;
  background:rgba(30,36,31,.06);color:var(--sub);font-variant-numeric:tabular-nums}
.rank-i.n1 .no{background:linear-gradient(150deg,#E9D3A2,#C79A3E);color:#2A1F0C;
  box-shadow:0 4px 10px -4px rgba(190,138,52,.7)}
.rank-i.n2 .no{background:linear-gradient(150deg,#D9DDE0,#A9B0B4);color:#2A2F2C}
.rank-i.n3 .no{background:linear-gradient(150deg,#E0B990,#B98A55);color:#2F2114}
.rank-i .av{width:38px;height:38px;font-size:14px}
.rank-i .bd{flex:1;min-width:0}
.rank-i .nm{font-size:13.5px;font-weight:600;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-i .sb{font-size:11px;color:var(--mute);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-i .sc{flex:0 0 auto;text-align:right}
.rank-i .sc b{font-size:16px;font-weight:700;color:var(--brand-deep);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rank-i .sc span{display:block;font-size:10px;color:var(--mute);margin-top:1px}

/* ============================================================
   5. 数据卡 .kpi2 —— 大数字 + 迷你趋势
   ============================================================ */
.kpi2{background:var(--card);border:1px solid var(--hairline);border-radius:18px;
  padding:13px 14px 12px;box-shadow:var(--e-1);position:relative;overflow:hidden;
  transition:box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.kpi2 .lb{font-size:11px;color:var(--sub);letter-spacing:.04em;display:flex;align-items:center;gap:5px}
.kpi2 .lb svg{width:13px;height:13px}
.kpi2 .n{font-size:27px;font-weight:700;letter-spacing:-.035em;line-height:1.1;
  color:var(--txt);font-variant-numeric:tabular-nums;margin-top:7px}
/* 单位（分 / 分钟 / 条 / 人）：原 12px/500/--mute 太轻，在 27px 数字旁像脱落的碎片，
   提到 13px/600/--sub，与数字形成「主数—单位」的明确主次而非两个孤立元素 */
.kpi2 .n small{font-size:13px;font-weight:600;color:var(--sub);margin-left:3px;letter-spacing:0}
.kpi2 .d{font-size:11px;color:var(--mute);margin-top:5px;display:flex;align-items:center;gap:4px}
.kpi2 .sp{margin-top:8px;height:26px}
.kpi2 .glow{position:absolute;right:-18px;top:-20px;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle,rgba(190,138,52,.13),transparent 68%)}

/* ============================================================
   6. 勋章 .medal
   ============================================================ */
.medal{position:relative;width:58px;height:58px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center}
.medal svg{width:100%;height:100%}
.medal .tx{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:#4E3A0C}
.medals{display:flex;gap:10px;flex-wrap:wrap}

/* ============================================================
   7. 空态 .empty2 —— 插画 + 文案 + 行动
   ============================================================ */
.empty2{padding:30px 22px 34px;text-align:center;background:var(--card);
  border:1px solid var(--hairline);border-radius:20px;box-shadow:var(--e-1)}
.empty2 .art{width:104px;height:104px;margin:0 auto 15px}
.empty2 .art svg{width:100%;height:100%}
.empty2 .t1{font-size:14.5px;font-weight:600;color:var(--txt)}
.empty2 .t2{font-size:12px;color:var(--sub);line-height:1.6;margin-top:6px}
.empty2 .act{margin-top:15px}

/* ============================================================
   8. 分组标题 .grp-t —— 带计数与更多
   ============================================================ */
.grp-t{display:flex;align-items:center;gap:8px;margin:var(--sp-5) 2px var(--sp-3)}
.grp-t .dm{width:5px;height:5px;border-radius:2px;background:var(--gold);
  transform:rotate(45deg);flex:0 0 auto}
.grp-t b{font-size:14.5px;font-weight:600;color:var(--txt);letter-spacing:-.01em}
.grp-t .ct{font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
.grp-t .more{margin-left:auto;font-size:11.5px;color:var(--brand);display:flex;align-items:center;gap:2px}
.grp-t .more svg{width:13px;height:13px}

/* ============================================================
   9. 横向滚动 .hscroll —— 精选专题滑动卡片
   ============================================================ */
.hscroll{display:flex;gap:11px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  margin:0 -16px;padding:2px 16px 8px}
.hscroll::-webkit-scrollbar{display:none}
.hscroll>.ccard{flex:0 0 76%;scroll-snap-align:start;max-width:270px}

/* 后台宽屏：横向滑动改为自适应网格，避免末张被裁切 */
@media (min-width:760px){
  .admin .hscroll{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
    gap:12px;overflow:visible;margin:0;padding:0;scroll-snap-type:none;align-items:stretch}
  .admin .hscroll>.ccard{flex:none;max-width:none;scroll-snap-align:none;height:100%;
    display:flex;flex-direction:column}
  .admin .hscroll>.ccard .bd{flex:1;display:flex;flex-direction:column}
  .admin .hscroll>.ccard .ft{margin-top:auto;padding-top:10px}
  .admin .hscroll>.ccard .tags+.ft,.admin .hscroll>.ccard .ds+.ft{margin-top:auto}
}

/* ============================================================
   10. 追加（供 sales / practice 模块使用）
   ------------------------------------------------------------
   .tcard 竖向堆叠间距：八阶段流程、SOP 步骤清单、话术推荐等
   连续任务卡之间留 9px，末张不留尾距，避免与后续 .card 叠距。
   .mcard .ex：媒体卡附加说明行（讲师批注、额外备注），
   位于摘要之下、标签之上，最多两行。
   ============================================================ */
.tcard{margin-bottom:9px}
.tcard:last-child{margin-bottom:0}

.mcard .ex{margin-top:6px;font-size:11.5px;color:var(--sub);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- 悬停（仅真实指针设备） ---------- */
@media (hover:hover) and (pointer:fine){
  .ccard:hover,.mcard:hover,.tcard:hover,.rank-i:hover,.kpi2:hover{
    box-shadow:var(--e-2);transform:translateY(-2px)}
  .mcard:hover{border-color:var(--brand-3)}
}

/* ---------- 深色模式 ---------- */
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .ccard,
  html:not([data-theme="light"]) .mcard,
  html:not([data-theme="light"]) .tcard,
  html:not([data-theme="light"]) .rank-i,
  html:not([data-theme="light"]) .kpi2,
  html:not([data-theme="light"]) .empty2{background:var(--card);border-color:var(--line)}
  html:not([data-theme="light"]) .ccard .tt,
  html:not([data-theme="light"]) .mcard .tt,
  html:not([data-theme="light"]) .tcard .tt{color:var(--txt)}
  html:not([data-theme="light"]) .prog{background:rgba(255,255,255,.10)}
  html:not([data-theme="light"]) .rank-i .no{background:rgba(255,255,255,.07);color:var(--sub)}
  html:not([data-theme="light"]) .rank-i.n1 .no{background:linear-gradient(150deg,#E9D3A2,#C79A3E);color:#2A1F0C}
  html:not([data-theme="light"]) .rank-i.n2 .no{background:linear-gradient(150deg,#D9DDE0,#A9B0B4);color:#2A2F2C}
  html:not([data-theme="light"]) .rank-i.n3 .no{background:linear-gradient(150deg,#E0B990,#B98A55);color:#2F2114}
  html:not([data-theme="light"]) .rank-i .sc b{color:var(--gold-2)}
  html:not([data-theme="light"]) .pill.on-cf{background:rgba(12,20,16,.55)}
  html:not([data-theme="light"]) .cf::after{
    background:linear-gradient(180deg,rgba(8,14,11,.10) 0%,rgba(8,14,11,.42) 46%,rgba(8,14,11,.80) 100%)}
}

/* ============================================================
   10. 追加 · 个人档案页专用
   用途：① 档案头图内的段位进度行（深底，故单独配色）
        ② 菜单媒体卡选中态（替代原 .item 行内高亮）
        ③ 数据卡深色主视觉变体（作为页面第一视觉锚点）
        ④ 勋章条目：徽章 + 名称 + 进度提示
   ============================================================ */
.pf-fn{margin-top:15px}
.pf-fn .ft{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.pf-fn .ft .rt{font-size:11px;color:rgba(255,255,255,.66);font-variant-numeric:tabular-nums}
.pf-fn .prog{background:rgba(255,255,255,.18)}
.pf-fn .pt{margin-top:8px;font-size:11px;line-height:1.6;color:rgba(255,255,255,.5)}

.mcard.on{border-color:var(--gold-line);box-shadow:var(--e-2)}
.mcard.on .thumb{box-shadow:0 0 0 2px rgba(190,138,52,.34)}
.mcard.on .tt{color:var(--brand-deep)}

.kpi2.dark{background:linear-gradient(155deg,#2C4536,#182A21);border-color:#182A21;
  box-shadow:0 14px 28px -20px rgba(22,36,29,.85)}
.kpi2.dark .lb{color:rgba(255,255,255,.58)}
.kpi2.dark .lb svg{opacity:.9}
.kpi2.dark .n{color:#fff}
.kpi2.dark .n small{color:rgba(255,255,255,.52)}
.kpi2.dark .d{color:rgba(255,255,255,.45)}
.kpi2.dark .glow{background:radial-gradient(circle,rgba(227,198,136,.25),transparent 68%)}

.mdli{width:70px;flex:0 0 auto;text-align:center}
.mdli .cp{display:block;font-size:11.5px;font-weight:600;color:var(--txt);margin-top:7px;line-height:1.4}
.mdli .cd{display:block;font-size:11px;color:var(--mute);margin-top:2px;line-height:1.4;
  font-variant-numeric:tabular-nums}
.medal.lock{opacity:.48;filter:grayscale(1)}
.medal.lock .tx{color:var(--sub)}

@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .mdli .cp{color:var(--txt)}
  html:not([data-theme="light"]) .mdli .cd{color:var(--mute)}
  html:not([data-theme="light"]) .mcard.on{border-color:rgba(227,198,136,.42)}
  html:not([data-theme="light"]) .mcard.on .tt{color:var(--gold-2)}
}

/* ============================================================
   11. 追加 · 管理后台专用（js/modules/admin.js）
   ------------------------------------------------------------
   ① .admin .main .card 竖向留白：theme.css 将后台卡片外边距置零，
      导致多张卡片直接贴边，这里恢复 12px 节奏。
   ② .kpi2.k-txt：数据卡「数字位」换成短文本
      （如「薄弱病症 TOP1」展示病症名而非数值），避免 27px 撑破卡片。
   ③ .acts：卡片操作区（媒体卡右槽 / 任务卡与大卡底栏）多按钮并排时的
      间距与换行，防止窄屏挤压。
   ④ .grp-t.in / .grp-t.in.fst：分组标题置于卡片（或弹层）内部时的
      紧凑间距，fst 用于该容器内首个分组标题。
   ============================================================ */
.admin .main .card{margin-bottom:12px}

.kpi2.k-txt .n{font-size:16px;font-weight:600;line-height:1.4;letter-spacing:-.01em;margin-top:9px}

.mcard .rt.acts{gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tcard .ft.acts,.ccard .ft.acts{flex-wrap:wrap}

.grp-t.in{margin:14px 2px 9px}
.grp-t.in.fst{margin-top:2px}

/* ============================================================
   12. 追加 · 对练类模块专用（js/modules/diagnosis.js、talk.js、invest.js）
   ------------------------------------------------------------
   ① .mcard .thumb .av：媒体卡缩略封面上叠加的首字母头像，
      用于顾客人设 / 招商客户人设卡，保留原 .av 渐变圆视觉。
   ② .ccard.on：内容大卡选中态（话术训练场景选择），
      与既有 .mcard.on 的选中反馈保持一致。
   ③ .chat-note：固定输入条下方的说明条。原先是内联浅色背景
      rgba(255,255,255,.96)，无法被深色模式覆盖，故抽成类名并补深色值。
   ============================================================ */
.mcard .thumb .av{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:2;width:34px;height:34px;font-size:14px;
  border:2px solid rgba(246,244,239,.92);box-shadow:0 6px 14px -8px rgba(12,20,16,.6)}

.ccard.on{border-color:var(--gold-line);box-shadow:var(--e-2)}

.chat-note{text-align:center;padding:6px 0 calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);font-size:11px;color:var(--mute)}

/* ============================================================
   13. 缩略封面去重 + 快捷入口深色适配
   同类内容共用一张封面图时，用色相轮换打散重复感
   ============================================================ */
.mcard .thumb{background-image:none !important}
.mcard:nth-child(3n+1) .thumb{background:linear-gradient(150deg,#33513F 0%,#1B2A22 100%) !important}
.mcard:nth-child(3n+2) .thumb{background:linear-gradient(150deg,#4E5F4A 0%,#242F25 100%) !important}
.mcard:nth-child(3n+3) .thumb{background:linear-gradient(150deg,#5C4A2C 0%,#2B2418 100%) !important}
.mcard .thumb.cf::after{background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(12,20,16,.30) 100%)}
.mcard .thumb .th-t{color:#E3C688}

/* 缩略图首字：同图不同条目也能一眼区分 */
.mcard .thumb .th-t{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:26px;color:rgba(255,255,255,.95);letter-spacing:0;
  text-shadow:0 2px 10px rgba(12,20,16,.55);padding-bottom:10px;z-index:2}

/* ============================================================
   14. KPI 图标徽章 .kic
   ------------------------------------------------------------
   原实现把 13px 灰线图标内联在标签文字前，缩到 13px 且用 --sub 色，
   在 1440 宽后台里几乎看不清，也缺少「模块标识」的视觉锚点。
   改为右上角独立徽章：34px 品牌深绿淡底 + 14px 品牌色描边图标。
   ============================================================ */
.kpi2 .kic{position:absolute;right:13px;top:12px;width:30px;height:30px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(47,74,59,.075);color:var(--brand);border:1px solid rgba(47,74,59,.10)}
.kpi2 .kic svg{width:14px;height:14px;stroke-width:1.7}
.kpi2:has(.kic) .lb{padding-right:34px}
/* 内联图标变体（移动端各页仍把图标放在标签前）：加深一档，避免 13px 灰线看不清 */
.kpi2 .lb>svg{color:var(--brand-2)}
.kpi2.dark .kic{background:rgba(227,198,136,.12);color:#E3C688;border-color:rgba(227,198,136,.20)}

@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .kpi2 .kic{background:rgba(143,182,155,.12);
    color:var(--brand-2);border-color:rgba(143,182,155,.16)}
  /* .duo-c.b 在 v3 里写死 #fff，深色模式下白底白字，必须改走 token */
  html:not([data-theme="light"]) .duo-c.b{background:var(--card);border-color:var(--line);
    color:var(--txt);box-shadow:0 10px 22px -18px rgba(0,0,0,.75)}
  html:not([data-theme="light"]) .duo-c.b .st{color:var(--sub)}
  html:not([data-theme="light"]) .duo-c.b .go{color:var(--gold-2)}
}

@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .ccard.on{border-color:rgba(227,198,136,.42)}
  html:not([data-theme="light"]) .chat-note{background:rgba(20,26,22,.96)}
  html:not([data-theme="light"]) .svc-i b{color:var(--txt)}
  html:not([data-theme="light"]) .t-g{background:rgba(143,182,155,.15);color:#A9C7B4}
  html:not([data-theme="light"]) .t-o{background:rgba(219,182,108,.15);color:#EBD3A2}
  html:not([data-theme="light"]) .t-c{background:rgba(210,142,105,.15);color:#E0A98C}
  html:not([data-theme="light"]) .t-s{background:rgba(143,182,155,.13);color:#9FC0AB}
  html:not([data-theme="light"]) .t-p{background:rgba(133,187,208,.13);color:#A6CFDD}
  html:not([data-theme="light"]) .t-n{background:rgba(255,255,255,.08);color:#B7BFB0}
  html:not([data-theme="light"]) .mcard .thumb.cf::after{
    background:linear-gradient(180deg,rgba(8,14,11,.04) 0%,rgba(8,14,11,.20) 50%,rgba(8,14,11,.64) 100%)}

  /* ============================================================
     深色补齐（本段新增）：扫描器实测对比度不足项统一修正
     ------------------------------------------------------------
     ① .s3-i — v3 里 background:#fff 被深色块改成深底，但 .v 的
        颜色写死 #25332B（深墨绿），落在深底上 cr≈1.24 完全看不见。
     ② .pill.gold — 文字 #8A6320 在 --gold-soft(rgba) 深底上 cr≈3.04。
     ③ .alert.* — theme.css 写死 #8A5A05 / #245A87 等深色字，
        深底上不可读，统一改用语义 token 的深色值。
     ④ .app-hd .who / .admin .main .sub — 写死深色字。
     ============================================================ */
  html:not([data-theme="light"]) .s3-i .v{color:var(--txt)}
  /* 深色下单位提到 --sub（12px/600 在 25px 数字旁若仍用 --mute 会读不清） */
  html:not([data-theme="light"]) .s3-i .v small{color:var(--sub)}
  html:not([data-theme="light"]) .s3-i .l{color:var(--sub)}
  html:not([data-theme="light"]) .s3-i .d{color:var(--mute)}
  /* ⑤ .s3-i 边框：v3 写死 rgba(233,229,218,.9)（浅米白 90%），
     深色下变成一圈刺眼的白描边，且只有浅底卡看得出来，三卡不齐。统一改走 --line */
  html:not([data-theme="light"]) .s3-i{border-color:var(--line)}
  html:not([data-theme="light"]) .s3-i.dark .v{color:#fff}

  html:not([data-theme="light"]) .pill.gold{background:rgba(219,182,108,.16);color:#EBD3A2}
  html:not([data-theme="light"]) .pill.green{background:rgba(143,182,155,.16);color:#A9C7B4}
  html:not([data-theme="light"]) .pill.gray{background:rgba(255,255,255,.09);color:var(--sub-2)}
  html:not([data-theme="light"]) .pill.red{background:rgba(221,132,119,.16);color:#EFA396}

  html:not([data-theme="light"]) .alert{color:var(--txt)}
  html:not([data-theme="light"]) .alert.warn{background:rgba(227,182,103,.13);
    border-color:rgba(227,182,103,.26);color:#EDC583}
  html:not([data-theme="light"]) .alert.info{background:rgba(133,187,208,.13);
    border-color:rgba(133,187,208,.26);color:#A6CFDD}
  html:not([data-theme="light"]) .alert.danger{background:rgba(221,132,119,.13);
    border-color:rgba(221,132,119,.26);color:#EFA396}
  html:not([data-theme="light"]) .alert.ok{background:rgba(116,194,153,.13);
    border-color:rgba(116,194,153,.26);color:#9BD3B4}

  html:not([data-theme="light"]) .app-hd .who{color:var(--txt)}
  html:not([data-theme="light"]) .admin .main .sub{color:var(--sub)}

  /* 步骤条 / 进度轨 / 条形榜底轨：theme.css 写死 #F2EADC / #F3EEE3 浅米色，
     深色模式下会亮成一条白带，统一改走半透明白 */
  html:not([data-theme="light"]) .steps .s i{background:rgba(255,255,255,.09);color:var(--sub)}
  html:not([data-theme="light"]) .steps .s::after{background:rgba(255,255,255,.09)}
  html:not([data-theme="light"]) .steps .s.on i{background:linear-gradient(150deg,#D8AE64,#9A6B1F);color:#241B0C}
  html:not([data-theme="light"]) .steps .s.done i{background:var(--ok);color:#0F1A13}
  html:not([data-theme="light"]) .steps .s span{color:var(--mute)}
  html:not([data-theme="light"]) .steps .s.on span{color:var(--gold-2)}
  html:not([data-theme="light"]) .ch-bar .cb-tr{background:rgba(255,255,255,.09)}
  html:not([data-theme="light"]) .ch-bar .cb-v{color:var(--txt)}
  html:not([data-theme="light"]) .ch-bar .cb-tag{background:rgba(255,255,255,.08);color:var(--sub-2)}
  html:not([data-theme="light"]) .sheet-hd .x{background:rgba(255,255,255,.08);color:var(--sub)}
  html:not([data-theme="light"]) .bar{background:rgba(255,255,255,.09)}

  /* 热力图格内文字：v3 里按分数写死深字 #243A2E，深色模式下格底被压暗
     后深字完全看不清，统一改为浅字；高分格(≥85)原本就是白字，不受影响 */
  html:not([data-theme="light"]) .ch-heat td.hc{color:#E9EDE8 !important}
  html:not([data-theme="light"]) .ch-heat th,
  html:not([data-theme="light"]) .ch-heat td.rn{color:var(--sub)}
}

/* ============================================================
   14a. 三宫格数字单位（/4、分）与标签字重校正
   ------------------------------------------------------------
   v3 里单位是 11px/500/--mute（2.63:1 灰），在 25px 数字旁几乎读不出来，
   看起来像「3」后面挂了个脏点。这里提到 12px/600/--sub，
   并把标签 .l 提到 600 权重，让「数字—标签—说明」三级层级更清楚。
   ============================================================ */
.s3-i .v small{font-size:12px;font-weight:600;color:var(--sub);margin-left:3px}
.s3-i.dark .v small{color:rgba(255,255,255,.52)}
.s3-i .l{font-weight:600;letter-spacing:.01em}

/* ============================================================
   14b. 深色卡内进度条的「达标 / 未达标」语义分色
   ------------------------------------------------------------
   上岗认证卡片里四模块进度条原本一律走金色渐变（.dk .bar i 默认金），
   导致 88 分「已达标」和 62 分「未达标」长得完全一样，语义丢失。
   现在按达标线 PASS 分色：达标 → 达标绿，未达标 → 赭金，
   与右侧分数文字色（#8FD3AE / #E9D9B4）形成同一套语义。
   .dk 是恒深色卡（浅色模式下也是深底），故此规则不放进深色媒体查询。
   ============================================================ */
.dk .bar i.ok{background:linear-gradient(90deg,#6FD3A4,#2E8C63);
  box-shadow:0 0 10px -2px rgba(111,211,164,.42)}
.dk .bar i.gold{background:linear-gradient(90deg,#E3C688,#C08A2E)}

/* ============================================================
   15. 闯关地图 .lm-* —— 知识点闯关的关卡节点
   ------------------------------------------------------------
   原 .lmap-i 只有「小圆点数字 + 标题 + 箭头」，是纯列表观感。
   升级为大牌训练系统常见的「路径关卡」：
   · 每关一个 38px 进度环（SVG，按历史最高分填充）
   · 通关 = 墨绿环 + 对勾徽章；待重考 = 赭金环；未开始 = 灰环
   · 首个未通关关卡标「下一关」，并把环改为品牌渐变高亮
   · 顶部一条总进度轨，让「8 关走到第几关」一眼可见
   ============================================================ */
.lm-bar{height:4px;border-radius:999px;background:var(--line);overflow:hidden;margin:2px 0 12px}
.lm-bar>i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#8FB69B,#2F4A3B);
  transition:width .8s cubic-bezier(.22,.85,.32,1)}

.lm-i{position:relative;display:flex;align-items:center;gap:12px;
  min-height:50px;padding:7px 10px 7px 4px;border-radius:14px;
  transition:background var(--dur-2) var(--ease-out)}
.lm-i+.lm-i{margin-top:2px}
.lm-i:active{background:var(--brand-wash)}

.lm-node{position:relative;flex:0 0 auto;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;color:var(--brand-3)}
.lm-ring{position:absolute;inset:0;transform:rotate(0deg)}
.lm-no{position:relative;z-index:2;font-size:11px;font-weight:700;
  letter-spacing:.02em;color:var(--mute);display:flex;align-items:center;justify-content:center}
.lm-no svg{width:14px;height:14px;stroke-width:2.8}

/* 关卡连接线：从当前节点底部贯穿到下一关节点顶部，保证视觉连续 */
.lm-i:not(:last-child)::after{content:"";position:absolute;left:22.75px;top:45px;
  width:1.5px;height:calc(100% - 34px);border-radius:2px;
  background:repeating-linear-gradient(180deg,var(--line-2) 0 3px,transparent 3px 6px)}
.lm-i.ok:not(:last-child)::after{background:var(--brand-3);opacity:.5}

.lm-i.ok .lm-node{color:var(--brand)}
.lm-i.ok .lm-no{color:var(--gold-2)}
.lm-i.ok .lm-node::before{content:"";position:absolute;inset:2px;border-radius:50%;
  background:linear-gradient(155deg,#33513F,#1C2E24);
  box-shadow:0 6px 14px -9px rgba(22,36,29,.85)}
.lm-i.ok .lm-no{position:relative;z-index:3}
.lm-i.ok .lm-no svg{stroke:#E3C688}

.lm-i.try .lm-node{color:var(--gold)}
.lm-i.try .lm-no{color:var(--warn)}

.lm-tx{flex:1;min-width:0}
.lm-tx b{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;
  letter-spacing:.01em;color:var(--txt);line-height:1.35}
.lm-tx span{display:block;font-size:11px;color:var(--mute);margin-top:3px;
  font-variant-numeric:tabular-nums}
.lm-flag{flex:0 0 auto;font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.02em;
  padding:2px 6px;border-radius:6px;background:var(--gold-soft);color:var(--warn);
  border:1px solid var(--gold-line)}

.lm-go{flex:0 0 auto;color:var(--line-2);display:flex;align-items:center}
.lm-go svg{width:15px;height:15px}
.lm-i.next .lm-go{color:var(--brand-3)}

/* 「下一关」高亮：整行淡金底 + 环改品牌渐变 */
.lm-i.next{background:linear-gradient(90deg,rgba(190,138,52,.07),transparent 78%)}
.lm-i.next .lm-node{color:var(--gold)}
.lm-i.next .lm-no{color:var(--warn);font-weight:700}
.lm-i.next .lm-tx b{color:var(--brand-deep)}

@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .lm-bar{background:rgba(255,255,255,.10)}
  /* 未开始关卡的节点环：浅色下 --brand-3(#7C9A83) 够用，深色下 #6D9A80 压在
     --card(#1A211C) 上再把 stroke-opacity 降到 .16 就基本看不见了，
     提一档到 --brand-2 并把序号从 --mute 提到 --sub */
  html:not([data-theme="light"]) .lm-node{color:var(--brand-2)}
  html:not([data-theme="light"]) .lm-no{color:var(--sub)}
  html:not([data-theme="light"]) .lm-i.ok .lm-node::before{
    background:linear-gradient(155deg,#2A4436,#16241D);box-shadow:none}
  html:not([data-theme="light"]) .lm-i.next{background:linear-gradient(90deg,rgba(219,182,108,.10),transparent 78%)}
  html:not([data-theme="light"]) .lm-i:active{background:rgba(255,255,255,.05)}
  html:not([data-theme="light"]) .lm-i:not(:last-child)::after{
    background:repeating-linear-gradient(180deg,rgba(255,255,255,.18) 0 3px,transparent 3px 6px)}
  html:not([data-theme="light"]) .lm-i.ok:not(:last-child)::after{
    background:var(--brand-3);opacity:.5}
  html:not([data-theme="light"]) .lm-flag{background:rgba(219,182,108,.14);
    color:#EBD3A2;border-color:rgba(219,182,108,.28)}
}

@media (hover:hover) and (pointer:fine){
  .lm-i:hover{background:var(--brand-wash)}
  .lm-i:hover .lm-tx b{color:var(--brand)}
}