/* 智慧升学 v1 —— 视觉对齐《UI效果图_v1.html》：主色 #2B5CE6 / 橙 #FF8A3D */
/* ==========================================================================
设计令牌（2026-08-13 全站排版体系改造）
------------------------------------------------------------------------
改造前：44K 样式表零变量、21 档硬编码字号、9 种灰、4 种圆角，
且「小字设了好行高、大字全漏设」——标题 14px 反而比正文 16px 小。
现在全站字号/行高/间距/颜色/圆角只准从这里取值，新增模块直接复用。
========================================================================== */
:root {
/* 字号阶梯（6 档）。12px 是全站可读下限，不许再低 */
--fs-display: 21px; /* 报告 / 页面主标题 */
--fs-section: 18px; /* 章节标题（如「① 孩子差在哪」） */
--fs-title: 16px; /* 卡片标题 */
--fs-body: 16px; /* 正文（家长年龄段读着舒服，保持不变） */
--fs-sm: 13.5px; /* 说明 / 辅助文字 */
--fs-caption: 12px; /* 注释 / 元信息（下限） */
/* 展示位：统计数值与品牌字，不属于正文阶梯，不参与上面 6 档收敛 */
--fs-num-xl: 30px;
--fs-num-lg: 24px;
--fs-brand: 24px;
/* 行高（3 档）。凡承载成段文字的元素都必须显式取值，不许留 normal(≈1.2) */
--lh-tight: 1.35; /* 标题 */
--lh-body: 1.75; /* 长正文 */
--lh-compact: 1.6; /* 密集小字 / 交互项 */
/* 间距（4px 刻度）。margin / padding / gap 一律落在这上面 */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
/* 颜色。灰阶收敛为三档，括号内为对各自标注基底的实测对比度（WCAG AA 正文需 ≥4.5:1） */
/* 🔴 2026-09-02 两套色板收敛为一套（UI 对齐效果图）。
由来：v8 玻璃改造新增了 --accent/--t1/--t2/--t3（下方第二个 :root，取自
效果图 UI-v7-液态玻璃-全屏定稿-20260831.html 的原表），但只有玻璃卡片改用了新的；
其余 277 处仍引用这四个旧名 → 同屏两套绿、两套灰，家长一眼看得出「上下不是一个东西」。
改法：**旧名保留为别名**，值统一指向 v8 那套 —— 一处改，277 处同时对齐，
不用去动 277 个引用点（动引用点才是真会漏的做法）。
对比度方向安全：四个新值都比旧值**更深**，对浅底的对比度只升不降，
旧注释里那几个 WCAG 数字是下限而不是等号，故不会因此跌破 4.5。 */
--c-brand: var(--accent); /* 旧 #2F5D50 → 现 #1F5346 */
--c-brand-soft: #EAF0ED;
--c-brand-deep: #14382F; /* 旧 #24493F 比新的 --c-brand 还浅，会把「深色」画成浅色 */
--c-ink: var(--t1); /* 旧 #1B2420 → 现 #0C1B16 */
--c-ink-2: var(--t2); /* 旧 #41504A → 现 #3A4A43 */
--c-ink-3: var(--t3); /* 旧 #5F6B66 → 现 #55655D */
--c-line: #E6E3DC;
--c-bg-soft: #FBFAF7;
--c-warn-bg: #F7EFE6;
--c-warn-ink: #8F5B27; /* 对 --c-warn-bg 4.99:1 · 2026-08-31 重算：原 #B8763A 标注 4.64 是假数，
实测仅 3.24，不到 WCAG 正文线 4.5，三轮评审全部漏查，见效果图同源整改 */
/* 圆角（3 档）。🔴 2026-09-02 对齐效果图 :root{--r-lg:22px;--r-md:16px;--r-sm:10px}
旧值 14/18 是 v1 时代的，v8 玻璃卡已经在各处硬写 22/16 绕开它 ——
于是「玻璃卡 22、旁边按钮 14」，同屏两种圆角。改 token 一处，硬写的那些也就不必再加。 */
--r-sm: 10px; --r-md: 16px; --r-lg: 22px;
/* 触控目标最小高度（移动端标准） */
--tap: 44px;
}
/* ==========================================================================
液态玻璃 UI v8（2026-08-31 · UI 落地与上线方案 步骤1：只落地「今天」这一屏）
参照 reports/UI-v7-液态玻璃-全屏定稿-20260831.html 的玻璃体系落地，不是照抄。
圆角三档 / 4px 间距刻度沿用上面已有的 --r-sm/--r-md/--r-lg 与 --sp-*，不重复定义；
这里只新增玻璃卡专属的强调色 token（v7 原表）与背景光斑层。 */
:root {
--accent: #1F5346;
--accent-2: #2F7D68;
--warn: #8A5100;
--t1: #0C1B16;
--t2: #3A4A43;
--t3: #55655D;
--glass: rgba(255,255,255,.58);
--edge: rgba(255,255,255,.75);
}
/* 背景光斑层：v7 的 .aurora 四团模糊光晕。本轮只有首页用，挂在 #screen-home 上；
#screen-home 可滚动，.aurora 只覆盖首屏可视高度（v7 原图同样的限制，不是本轮引入的新缺口）。 */
#screen-home { position: relative; }
#screen-home > .home-head,
#screen-home > .home-intent,
#screen-home > .today-pane,
#screen-home > .hm-dash,
#screen-home > .home-section-label,
#screen-home > .feature-cards { position: relative; z-index: 1; }
.aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(58px); opacity: .5; }
.aurora .a1 { width: 260px; height: 260px; top: -60px; left: -50px; background: #7FD3B8; }
.aurora .a2 { width: 220px; height: 220px; top: 100px; right: -70px; background: #9FD8E8; }
.aurora .a3 { width: 240px; height: 240px; top: 360px; left: -70px; background: #F2D6A8; }
.aurora .a4 { width: 200px; height: 200px; bottom: -50px; right: -40px; background: #A8CFC0; }
/* 玻璃卡：半透明 + 模糊 + 边缘高光。::after 是「像玻璃」而非「像半透明色块」的关键——
顶部内高光，模拟玻璃厚度上表面的反光，漏了这条就只是个毛玻璃色块。 */
.glass {
position: relative; overflow: hidden; border-radius: var(--r-lg);
background: var(--glass); border: 1px solid var(--edge);
-webkit-backdrop-filter: blur(26px) saturate(190%);
backdrop-filter: blur(26px) saturate(190%);
box-shadow: 0 8px 32px rgba(12,27,22,.10), 0 2px 8px rgba(12,27,22,.05);
}
.glass::after {
content: ""; position: absolute; inset: 0 0 auto; height: 52%; pointer-events: none;
background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
}
.glass > * { position: relative; z-index: 1; }
/* X5 回退（任务书硬约束）：微信安卓 X5 内核对 backdrop-filter 支持不完整，一旦失效，
玻璃卡会变成半透明块、文字直接压在彩色光斑上——家长根本看不清。
退成不透明白卡：边框/阴影仍在，只是不再透光，可读性优先于美观。 */
@supports not (backdrop-filter: blur(1px)) {
.glass, .tabbar {
background: rgba(255,255,255,.97) !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
}
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; } /* 保证 hidden 属性优先于 display:flex */
body {
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, sans-serif;
/* 🔴 2026-09-02 第二次修：手机壳**外面**那一大片底色。
前一轮我只改了 .screen（屏内）和 .phone（机身），漏了 body ——
于是屏内是效果图的绿灰、屏外还是 v1 的蓝紫渐变 #eef2f9→#e4ebf7，
桌面浏览器上一眼就是「手机是绿的、桌布是紫的」。
漏的原因：本轮所有截图与门禁都跑在 390px 手机视口，那个宽度下
手机壳铺满整屏，body 一个像素都露不出来，**结构上看不见这个缺陷**。
效果图 body 是 #C9D6CF 平铺，这里给一点点起伏免得死板。 */
background: linear-gradient(135deg, #CFDBD4 0%, #C9D6CF 52%, #D4DFD8 100%);
background-attachment: fixed;
min-height: 100vh; color: var(--c-ink);
font-size: var(--fs-body); line-height: var(--lh-compact);
-webkit-font-smoothing: antialiased;
}
/* B3-1（2026-08-21 版式扫描）：正文段落一行最大宽度。
760px+ 桌面演示壳（B0 降级）下 .screen 铺满整个视口，纯正文 因此被拉到
一行 50~60 字，中文正文超过 45 字/行就很难连续读。34em 是相对单位——不管
font-size 落在哪一档（13.5px 说明文字还是 16px 正文），换算下来都稳定落在
~34 字/行，比写死 px 更抗字号漂移。只管文字元素本身，不加到卡片/表格/网格
容器上，避免把已经调好的横条流又勒窄。 */
p { max-width: 34em; }
/* B3-4（2026-08-21 版式扫描）：长词/长路径名不断行导致横向溢出。
命中样本：li「尖子生走竞赛班+强基（其他学科不能太瘸）」、h4「免费医学生
（农村订单定向免费医学生）」、.ai-para——都是不含空格的长中文短语，浏览器
默认按词断行时无处可断，直接撑破容器。 */
li, h4, .ai-para { overflow-wrap: anywhere; word-break: break-word; }
/* ---------- 手机壳舞台 ---------- */
.stage { display: flex; flex-direction: column; align-items: center; padding: var(--sp-10) var(--sp-4) var(--sp-12); }
/* B2（2026-08-23 F5 修复）：桌面壳下这行说明文字背景透明到根，1440 视口会跟屏内
文案叠成一片。加不透明底 + 内边距留白，视觉上彻底脱离内容投影区。 */
.stage-caption { display: none !important; }
.phone {
width: 350px;
height: 730px;
/* 当视口矮于 phone+stage边距（88px）时，外框收缩到恰好填满视口，
避免手机底部落在窗口外且外层无法滚动的缺陷（2026-08-13 fix） */
max-height: calc(100dvh - var(--sp-10) - var(--sp-12));
/* 效果图 .device：机身 #0C120F、投影 rgba(12,27,22,.45)（绿黑），
旧值是 v1 蓝调 rgba(30,50,110,.35)，跟绿色底一起看会发紫。 */
background: #0C120F; border-radius: 48px; padding: 10px;
box-shadow: 0 0 0 2px #2C3A33, 0 30px 60px -20px rgba(12,27,22,.45);
}
.screen {
width: 100%; height: 100%; border-radius: 40px; overflow: hidden;
/* 🔴 2026-09-02 UI 对齐效果图：底色从 v1 的蓝白 #f6f8fc 换成效果图的
.screen{background:#EFF4F1}。这是「一眼就不一样」里最大的一块——
整机底色是蓝调还是绿调，比任何单个组件都先被看到。
另外把 aurora 的四团光晕同时画进**不滚动的这一层**：
`.aurora` 是 `position:absolute` 挂在可滚动的 #screen-home 上，只覆盖首屏可视高度，
往下滚就是纯底色（大圣 09-02 截图「上面好看下面像半成品」就是这个）。
背景画在 .screen 上则铺满整个屏，滚多远都还在。 */
background:
radial-gradient(320px 300px at -8% -6%, rgba(127,211,184,.42), transparent 70%),
radial-gradient(280px 260px at 108% 12%, rgba(159,216,232,.36), transparent 70%),
radial-gradient(300px 280px at -10% 46%, rgba(242,214,168,.30), transparent 70%),
radial-gradient(260px 240px at 106% 92%, rgba(168,207,192,.38), transparent 70%),
#EFF4F1;
display: flex; flex-direction: column; position: relative;
/* 2026-08-22（大圣实测「昨天说过的横排怎么还是竖排」）：
手机适配一直写在 `@media (max-width: …)` 里，看的是**视口宽度**。
今晚把桌面手机壳改成默认开之后，壳内容器只有 370px，可视口是 1440px——
`@media` 一条都不命中，于是「表格换成卡片」「四列折成字段块」这些昨天就做好的
手机版式，在壳里全部失效，看到的还是给桌面用的四列表格挤成窄柱。
改用容器查询：判据从「屏幕多宽」换成「这块内容区多宽」，
真机 390px 与壳内 370px 都命中同一套规则，一次改两处都对。 */
container-type: inline-size;
container-name: screen;
}
.notch {
display: none !important;
}
/* ---------- 屏切换 ---------- */
.app-screen { flex: 1; display: none; flex-direction: column; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; min-height: 0; }
.app-screen.active { display: flex; }
/* B1（2026-08-23 F5 修复）：navbar 同理需要不透明背景 + 高于内容的层级，
避免各屏聊天/建议 chip 在滚动边缘与标题条叠出「糊在一起的字」。 */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-1) var(--sp-4);
flex-shrink: 0;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--c-line);
position: relative;
z-index: 2;
}
.navbar .title { font-size: var(--fs-title); font-weight: 700; line-height: var(--lh-tight); }
.navbar .icon-btn {
color: var(--c-ink-2); font-size: var(--fs-title); min-width: 32px; min-height: var(--tap);
display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
/* ---------- 屏1 首页 ---------- */
.home-head { padding: var(--sp-4) var(--sp-5) var(--sp-1); }
.home-head .appname { font-size: var(--fs-brand); font-weight: 800; color: var(--c-brand); margin-top: var(--sp-1); letter-spacing: 1px; }
/* 🔴 2026-09-02：首页主标题「今天」原为 --fs-display(21px)，其余三屏的主标题已经是
效果图的 30px（.navbar .title），于是四屏里只有首页的标题小一圈。
效果图 .head h1 = 30px/700/-.4px，四屏同一档。
（这条是把尺子的配对键换成「文字+角色」之后才露出来的：原来按纯文字配对时，
「今天」被配成了 tab 对 tab，页面标题这一档根本没进过比对。） */
.today-page-title {
margin-top: var(--sp-4); font-size: 30px; font-weight: 700; letter-spacing: -.4px;
line-height: var(--lh-tight);
white-space: nowrap;
}
.today-pane { padding: var(--sp-3) var(--sp-4) 0; }
.today-card {
padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-lg);
background: var(--c-bg-soft); line-height: var(--lh-body);
}
.today-card[data-state="empty"], .today-card[data-state="confirmed"] { background: var(--c-brand-soft); }
.today-card[data-state="pending"], .today-card[data-state="error"] { background: var(--c-warn-bg); }
.today-badge {
display: inline-flex; align-items: center; min-height: var(--sp-6); padding: 0 var(--sp-2);
border-radius: var(--r-sm); background: var(--c-bg-soft); color: var(--c-ink-2);
font-size: var(--fs-caption); font-weight: 700; line-height: var(--lh-compact);
}
.today-card h2 { margin-top: var(--sp-3); font-size: var(--fs-section); line-height: var(--lh-tight); }
.today-card h3 { margin-top: var(--sp-4); font-size: var(--fs-title); line-height: var(--lh-tight); }
.today-card > p { margin-top: var(--sp-2); color: var(--c-ink-2); font-size: var(--fs-sm); }
.today-card strong, .today-goal { color: var(--c-ink); font-weight: 800; }
.today-cta { margin: var(--sp-4) 0 0; width: 100%; }
/* 方案 v3 §三 第③态：「今天这一件」是首屏焦点，比整周清单更重，所以给实底卡而不是列表行。 */
.today-one {
margin-top: var(--sp-3); padding: var(--sp-4);
border: 1px solid var(--c-brand); border-radius: var(--r-lg); background: #fff;
}
.today-one-label {
display: block; color: var(--c-brand); font-size: var(--fs-caption);
font-weight: 700; line-height: var(--lh-compact);
}
.today-one-action {
margin-top: var(--sp-2); color: var(--c-ink); font-size: var(--fs-title);
font-weight: 700; line-height: var(--lh-tight); overflow-wrap: anywhere;
}
.today-one[data-today-one="rest"] { border-color: var(--c-line); }
.today-one[data-today-one="rest"] .today-one-label { color: var(--c-ink-3); }
.today-one[data-today-one="rest"] .today-one-action { color: var(--c-ink-2); font-size: var(--fs-sm); font-weight: 400; }
/* 第②态的次级按钮：报告入口是主行动，「继续补充情况」退一级，避免两个实心按钮抢焦点。 */
.ghost-btn {
min-height: 44px; padding: 0 var(--sp-4); border: 1px solid var(--c-line);
border-radius: var(--r-md); background: transparent; color: var(--c-ink-2);
font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
}
.ghost-btn.full { width: 100%; }
.today-cta-sub { margin-top: var(--sp-2); }
.today-progress {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
margin-top: var(--sp-4); color: var(--c-ink-2); font-size: var(--fs-sm);
}
.today-progress strong { color: var(--c-brand); font-size: var(--fs-num-lg); white-space: nowrap; }
.today-progress-track { height: var(--sp-2); margin-top: var(--sp-2); overflow: hidden; border-radius: var(--r-sm); background: var(--c-line); }
.today-progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--c-brand); }
.today-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); list-style: none; }
.today-actions li { display: grid; grid-template-columns: 3.5em minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--c-line); border-radius: var(--r-sm); }
.today-actions li > span { color: var(--c-brand); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
.today-actions p, .today-observation { color: var(--c-ink-2); font-size: var(--fs-sm); line-height: var(--lh-compact); overflow-wrap: anywhere; }
.home-section-label { padding: var(--sp-5) var(--sp-4) 0; color: var(--c-ink-3); font-size: var(--fs-caption); font-weight: 700; }
.feature-cards { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); flex: 1; }
.fcard {
border-radius: var(--r-lg); padding: var(--sp-5); color: #fff; position: relative; overflow: hidden;
cursor: pointer; transition: transform .25s ease; min-height: 120px;
display: flex; flex-direction: column; justify-content: center;
}
.fcard:hover { transform: scale(1.025); }
/* 首页「已经做过体检？直接开聊」的次要口子：紧贴在体检卡下面，做成一行文字链接，
不能长得像第二张主卡——那正是 08-18 要修掉的「两张卡不知道点哪个」。 */
/* U1（2026-08-23 F5 修复）：家长原话「先做体检又冒出直接开聊按钮，矛盾」——
进一步降级视觉权重：居中、字号降到 caption 档、透明度调低，读起来是页脚级
的小字链接，不再跟下面的橙卡形成「两个入口」的观感。 */
.home-skip-row { margin-top: calc(var(--sp-4) * -1 + var(--sp-2)); padding: 0 var(--sp-1); text-align: center; }
.home-skip-link {
background: none; border: 0; padding: var(--sp-1) 0; cursor: pointer;
font-size: var(--fs-caption); color: var(--c-ink-3); text-decoration: underline;
text-underline-offset: 3px; font-family: inherit; opacity: .8;
/* B3-3（0821 版式扫描）：实测触控高 27px，小于 44px 拇指最小触控区 */
min-height: var(--tap); display: inline-flex; align-items: center;
}
.home-skip-link:hover { color: var(--c-brand); opacity: 1; }
.fcard .emoji {
position: absolute; right: var(--sp-4); top: 50%; transform: translateY(-50%);
font-size: 44px; opacity: .92; filter: drop-shadow(0 4px 8px rgba(0,0,0,.18));
}
/* 2026-08-31：内容从 emoji 字符换成内联 SVG（硬约束：首页 0 emoji）。
.emoji 类名与容器尺寸原样保留，只是子节点从文字换成矢量图标。 */
.fcard .emoji svg {
display: block; width: 40px; height: 40px;
stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.fcard h3 { font-size: var(--fs-display); font-weight: 800; letter-spacing: .5px; line-height: var(--lh-tight); }
/* R6（0822）：.emoji 绝对定位居中于卡片右侧（right:sp-4，宽约44px），
而 h3/p 是 .fcard（flex-direction:column，align-items 默认 stretch）里的
flex item，会被拉伸铺满卡片横向可用宽度，标题短还好，摘要文字换行到
第二行时会在纵向上撞进图标的高度区间——形状是「文字底下压着图标」。
注意这里必须用 margin-right 不能用 padding-right：全局 box-sizing:
border-box 下，stretch 出来的 border-box 宽度已经把 padding 算在内，
加 padding 只会让文字在盒子内部往左缩、盒子本身（getBoundingClientRect）
右边界纹丝不动，量出来的重叠面积不变；margin 会在 stretch 计算可用宽度
时被减掉，才能真正把整个盒子的右边界收窄，永远让在图标左边。 */
.fcard h3, .fcard p { margin-right: calc(var(--sp-4) + 44px + var(--sp-3)); }
.fcard p { font-size: var(--fs-sm); line-height: var(--lh-compact); opacity: .9; margin-top: var(--sp-2); }
/* U-CTA（2026-08-23 ux-accept X4 重跑逐像素实测）：原为 rgba(255,255,255,.22)
——白字压 22% 白蒙层，底色深浅全看卡片自己的渐变。实测：蓝卡 4.91:1 勉强过，
橙卡「生成规划 →」只有 2.24:1、紫卡「开始测评 →」4.18:1，均低于 12px 文字
要求的 4.5:1。白蒙层等于没有底，对比度是随卡色浮动的。
改成深色蒙层：白字任何卡色下都有稳定深底，与卡色解耦。实测见下方复验脚本。 */
.fcard .arrow {
margin-top: var(--sp-3); font-size: var(--fs-caption); background: rgba(0,0,0,.45);
display: inline-block; width: fit-content; padding: var(--sp-1) var(--sp-3); border-radius: 999px;
}
.fcard.blue { background: linear-gradient(135deg, #1F5346, #3E9C82); box-shadow: 0 10px 22px -8px #1F534688; }
.fcard.orange { background: linear-gradient(135deg, #2F7D68, #7FD3B8); box-shadow: 0 10px 22px -8px rgba(47,125,104,.53); }
.fcard.purple { background: linear-gradient(135deg, #1F5346, #2F7D68); box-shadow: 0 10px 22px -8px rgba(31,83,70,.53); }
.tabbar {
display: flex; justify-content: space-around; padding: var(--sp-2) 0 var(--sp-6);
/* 2026-08-31：玻璃化，配套 X5 回退（见上方 @supports not(backdrop-filter) 块，
命中时整条规则连同 .glass 一起退成 rgba(255,255,255,.97) 不透明白）。 */
/* 🔴 2026-09-02：不透明度从 .72 提到 .90（模糊按效果图取 28px）。
效果图里 .tabbar 是滚动区 .body 的**兄弟**（flex:none，永远不与内容重叠），
所以 .62 半透明很干净；产品这边 tabbar 是滚动容器 .app-screen 的最后一个孩子、
靠 sticky 钉底，**内容会从它下面滚过去** —— .72 的白透出下方文字，
首页实测「完成诊断后，这里会出现家庭系统画像」压在「今天」上成了叠字。
结构上的差异改不了（要动 index.html，本轮 write-scope 不许），
所以用不透明度兜住；仍保留玻璃模糊，底下的光晕色照样透上来。 */
background: rgba(255,255,255,.90);
-webkit-backdrop-filter: blur(28px) saturate(190%);
backdrop-filter: blur(28px) saturate(190%);
border-top: 1px solid var(--edge); flex-shrink: 0;
}
/* 🔴 2026-09-02 对齐效果图底部 tab（.tabbar .tab span）：
未选中 11px/600/--t2，选中 11px/800/--accent。
线上原为 12px/600(选中)/400(未选中)/--t3 —— 字大半档、选中态又不够重，
底部 5 个 tab 是每屏都在的东西，差半档字号是最先被看出来的地方之一。
11px 低于本表 12px 的正文下限，但 tab 是图标下的短标签、不是正文，效果图即取 11。 */
.tab {
text-align: center; font-size: 11px; font-weight: 600; color: var(--t2); cursor: pointer;
min-height: var(--tap); min-width: var(--tap);
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.tab .t-icon { display: block; margin-bottom: 2px; line-height: 0; }
.tab .t-icon svg {
width: 22px; height: 22px; display: block; margin: 0 auto;
/* B-4（2026-09-05 D11）：未激活态原用 --c-ink-3（--t3 #55655D），比效果图定的
--t2 #3A4A43 浅一档，激活/未激活图标色差比文字色差更明显。 */
stroke: var(--t2); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.tab.active { color: var(--accent); font-weight: 800; }
.tab.active .t-icon svg { stroke: var(--accent); stroke-width: 2.2; }
.family-tabbar { position: sticky; bottom: 0; z-index: 4; }
.family-tabbar .tab { flex: 1; min-width: 0; padding: 0 var(--sp-1); white-space: nowrap; }
/* ---------- 首页仪表盘：四块可视化（2026-08-31，只做首页这一屏） ---------- */
.hm-dash { padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 0 !important; }
.hm-card { padding-bottom: var(--sp-3); }
.hm-ch { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4) 0; gap: var(--sp-2); }
/* 效果图图表卡标题 .ch .ct = 15px/700；线上取 --fs-title(16px) 偏大半档 */
.hm-ct { font-size: 15px; font-weight: 700; color: var(--t1); letter-spacing: -.1px; }
.hm-cs { font-size: var(--fs-caption); color: var(--t2); font-weight: 600; text-align: right; }
.hm-loading { padding: var(--sp-5) var(--sp-4); color: var(--t3); font-size: var(--fs-sm); }
/* 空态：拿不到真实数据一律走这里，禁止塞假数字/示例文案（任务硬约束）。 */
.hm-empty { padding: var(--sp-5) var(--sp-4) var(--sp-4); text-align: center; }
.hm-empty svg { opacity: .45; }
/* 效果图空态 .empty .et = 14px/600、.empty .es = 12px/500 */
.hm-empty .hm-et { font-size: 14px; font-weight: 600; color: var(--t1); margin-top: var(--sp-2); }
.hm-empty .hm-es { font-size: var(--fs-caption); font-weight: 500; line-height: var(--lh-compact); color: var(--t2); margin-top: var(--sp-1); }
/* 雷达：家庭执行力六维 */
.hm-radar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-3); }
.hm-radar-fig { width: 128px; height: 128px; flex: none; }
.hm-legend { flex: 1; min-width: 0; }
.hm-lg { display: flex; align-items: center; gap: var(--sp-2); padding: 2px 0; }
.hm-lg .hm-nm { font-size: var(--fs-caption); color: var(--t2); width: 60px; flex: none; font-weight: 500; }
.hm-lg .hm-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(12,27,22,.10); overflow: hidden; }
.hm-lg .hm-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.hm-lg .hm-bar i.low { background: var(--warn); }
.hm-lg .hm-vl { font-size: var(--fs-caption); font-weight: 800; width: 14px; text-align: right; color: var(--t1); }
.hm-lg .hm-vl.low { color: var(--warn); }
.hm-conc {
margin: 0 var(--sp-4) var(--sp-3); padding: var(--sp-3); border-radius: var(--r-sm);
background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7);
font-size: var(--fs-sm); line-height: var(--lh-compact); color: var(--t1);
}
.hm-conc b { color: var(--warn); }
/* 九科条形：先攻（warn）/ 已稳（on）/ 暂缓（off，未填分数） */
.hm-bars { display: flex; align-items: flex-end; gap: 6px; height: 84px; padding: var(--sp-3) var(--sp-4) var(--sp-2); }
.hm-bars .hm-b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.hm-bars .hm-b .hm-col { width: 100%; border-radius: 5px 5px 0 0; background: rgba(31,83,70,.16); min-height: 4px; }
.hm-bars .hm-b .hm-col.on { background: linear-gradient(180deg, var(--accent-2), var(--accent)); }
.hm-bars .hm-b .hm-col.warn { background: linear-gradient(180deg, #C08A2E, var(--warn)); }
.hm-bars .hm-b .hm-col.off { background: repeating-linear-gradient(45deg, rgba(12,27,22,.10), rgba(12,27,22,.10) 3px, transparent 3px, transparent 6px); }
.hm-bars .hm-b .hm-nm { font-size: 10px; color: var(--t2); font-weight: 600; }
.hm-blg { display: flex; gap: var(--sp-3); padding: 0 var(--sp-4) var(--sp-3); font-size: var(--fs-caption); color: var(--t2); font-weight: 500; flex-wrap: wrap; }
.hm-blg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
/* 升学路径匹配环：主路径 / 备选 / 保底 */
.hm-paths { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3) var(--sp-3); }
.hm-pth {
flex: 1; text-align: center; border-radius: var(--r-md); padding: var(--sp-2) 4px;
background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.68);
}
.hm-pth .hm-dial { width: 100%; aspect-ratio: 1; max-width: 64px; margin: 0 auto 6px; position: relative; }
.hm-pth .hm-dial .hm-n {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 800; color: var(--t1);
}
.hm-pth .hm-lb { font-size: var(--fs-caption); font-weight: 700; color: var(--t1); }
.hm-pth .hm-sub { font-size: 11px; color: var(--t2); margin-top: 1px; font-weight: 500; }
/* 本周三件事 */
.hm-todo { padding: var(--sp-1) var(--sp-4) var(--sp-3); }
.hm-ti { display: flex; gap: var(--sp-2); padding: var(--sp-2) 0; align-items: flex-start; }
.hm-ti + .hm-ti { border-top: 1px solid rgba(12,27,22,.09); }
/* 44px 触控目标（硬约束）：可见方块只有 22px，靠 padding 把命中区撑到 44px，
不能把方块本身画到 44px——那会比文字还显眼，喧宾夺主。 */
.hm-ck {
width: 44px; height: 44px; flex: none; margin: -11px -11px -11px 0; cursor: pointer;
display: flex; align-items: center; justify-content: center; border: 0; background: none; padding: 0;
}
.hm-ck::before {
content: ""; width: 22px; height: 22px; border-radius: 7px;
border: 1.8px solid rgba(12,27,22,.18); background: rgba(255,255,255,.5);
}
.hm-ck.done::before { background: var(--accent); border-color: var(--accent); }
.hm-ck svg { position: absolute; width: 12px; height: 12px; stroke: #fff; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; display: none; }
.hm-ck.done svg { display: block; }
.hm-tt { flex: 1; min-width: 0; }
.hm-tt .hm-a { font-size: var(--fs-sm); line-height: var(--lh-compact); font-weight: 600; color: var(--t1); }
.hm-tt .hm-a.done { color: var(--t3); text-decoration: line-through; font-weight: 500; }
.hm-tt .hm-m { font-size: var(--fs-caption); line-height: var(--lh-compact); color: var(--t2); margin-top: 2px; }
/* ---------- 屏2 提分聊天 ---------- */
.chat-area {
flex: 1; padding: var(--sp-3); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-3);
scrollbar-width: none;
}
.chat-area::-webkit-scrollbar { display: none; }
/* 滚动锚点用的弹性留白：高度由 JS 算，保证「问题置顶、答案从上往下读」能真的顶到顶 */
.chat-tail { flex-shrink: 0; height: 0; }
.msg { display: flex; gap: var(--sp-2); align-items: flex-start; flex-shrink: 0; }
.msg .avatar {
width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
background: linear-gradient(135deg, #1F5346, #358B74); color: #fff;
box-shadow: 0 2px 6px rgba(31,83,70,0.18);
margin-top: 2px;
}
.bubble {
max-width: 84%; padding: 10px 14px; border-radius: 14px;
font-size: 13.5px; line-height: 1.58;
background: rgba(255, 255, 255, 0.96); color: var(--c-ink); border-top-left-radius: 4px;
border: 1px solid rgba(226, 232, 240, 0.85);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); white-space: pre-wrap; word-break: break-word;
}
.msg.user { justify-content: flex-end; }
.msg.user .bubble {
background: linear-gradient(135deg, #1F5346 0%, #167448 100%); color: #fff;
border: none;
border-radius: 14px; border-top-right-radius: 4px;
box-shadow: 0 2px 8px rgba(22, 116, 72, 0.22);
}
.diag-card {
background: #fff; border-radius: var(--r-lg); padding: var(--sp-4); margin: 0 2px;
box-shadow: 0 4px 14px rgba(40,60,120,.08); flex-shrink: 0;
}
.diag-card h4 {
font-size: var(--fs-title); font-weight: 800; line-height: var(--lh-tight);
margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2);
}
.diag-card h4::before { content: ""; width: 4px; height: 16px; background: var(--c-brand); border-radius: 2px; }
.bar-row { margin-bottom: var(--sp-3); }
.bar-row .bar-label { display: flex; justify-content: space-between; font-size: var(--fs-caption); color: var(--c-ink-2); margin-bottom: var(--sp-1); }
.bar-row .bar-label b { color: var(--c-brand); }
.bar-track { height: var(--sp-2); background: #eef1f7; border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1F5346, #57B79A); animation: grow 1.2s ease; }
@keyframes grow { from { width: 0; } }
.diag-btn {
width: 100%; margin-top: var(--sp-2); background: linear-gradient(180deg, #2F7D68, #1F5346);
color: #fff; border: none; padding: var(--sp-3); border-radius: var(--r-md);
font-size: var(--fs-title); font-weight: 700; min-height: var(--tap);
cursor: pointer; box-shadow: 0 6px 20px rgba(31,83,70,.32);
}
.subject-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-left: var(--sp-10); flex-shrink: 0; }
.s-chip {
border: 1.5px solid #d7e2ff; background: #fff; color: var(--c-brand); font-size: var(--fs-sm); font-weight: 600;
padding: var(--sp-2) var(--sp-4); border-radius: 999px; cursor: pointer; transition: all .15s ease;
min-height: var(--tap); display: inline-flex; align-items: center;
}
.s-chip:hover { background: var(--c-brand); color: #fff; }
.stuck-row {
display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--sp-1); width: 100%;
background: var(--c-bg-soft); border: 1.5px solid #e3e8f2; border-radius: var(--r-md); padding: var(--sp-3);
margin-bottom: var(--sp-2); cursor: pointer; text-align: left; transition: all .15s ease; min-height: var(--tap);
}
.stuck-row:hover { border-color: var(--c-brand); background: #f0f5ff; }
.stuck-row .stuck-name { font-size: var(--fs-title); font-weight: 700; color: var(--c-brand); line-height: var(--lh-tight); }
.stuck-row .stuck-sig { font-size: var(--fs-sm); color: var(--c-ink-3); line-height: var(--lh-compact); }
.stuck-row .stuck-sig.clamp {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.stuck-row .sig-more { font-size: var(--fs-caption); color: var(--c-brand); font-weight: 600; cursor: pointer; }
/* 批0-2（2026-08-29）：卡点行上的方案预览。与识别信号拉开层次——
信号是「像不像你家孩子」，预览是「选了之后要做什么」，两块不能糊成一片，
所以加一条左边线并整体缩进，视觉上归成卡点行的下挂内容。 */
.stuck-row .stuck-prev {
display: flex; flex-direction: column; gap: 5px; width: 100%;
margin-top: var(--sp-2); padding: 8px 10px 9px var(--sp-2);
border-left: 2px solid var(--c-brand, #1F5346);
background: rgba(31, 83, 70, .045); border-radius: 0 8px 8px 0;
}
.stuck-row .stuck-prev .sp-label {
font-size: var(--fs-caption); font-weight: 700; color: var(--c-brand); letter-spacing: .02em;
margin-bottom: 1px;
}
.stuck-row .stuck-prev .sp-step {
font-size: var(--fs-caption); color: var(--c-ink-2); line-height: 1.55;
}
.stuck-row .stuck-prev .sp-step::before { content: "· "; color: var(--c-brand); font-weight: 700; }
.stuck-row .stuck-prev .sp-meta {
font-size: 11px; color: var(--c-ink-3); margin-top: 3px;
align-self: flex-start; padding: 1px 8px; border-radius: 999px;
background: rgba(31, 83, 70, .08);
}
/* 判定卡沿用诊断卡与卡点行，只给系统推荐和家长改判补一层状态。 */
.recommend-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.recommend-card h4 { margin-bottom: var(--sp-1); }
.recommend-basis { background: var(--c-bg-soft); border-radius: var(--r-sm); color: var(--c-ink-2); font-size: var(--fs-sm); line-height: var(--lh-compact); padding: var(--sp-3); }
.recommend-options { display: flex; flex-direction: column; gap: var(--sp-2); }
.recommend-card .stuck-row { margin-bottom: 0; }
.recommend-card .stuck-row.is-recommended,
.recommend-card .stuck-row.is-selected { border-color: var(--c-brand); background: #f0f5ff; }
.recommend-tag { font-size: var(--fs-caption); font-weight: 700; color: var(--c-brand); }
.recommend-confirm:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; }
/* ---- 提分行动方案图文卡（blocks 渲染） ---- */
.plan-card-h5 {
background: #fff; border-radius: var(--r-lg); padding: var(--sp-4); margin: 0 2px;
box-shadow: 0 6px 18px rgba(40,60,120,.10); flex-shrink: 0;
display: flex; flex-direction: column; gap: var(--sp-3);
}
/* ---- C3：每日进度卡（附着在动态聊天流，不占固定页面容器） ---- */
.tf-progress-card {
background: #fff; border: 1px solid #d7e2ff; border-radius: var(--r-lg); padding: var(--sp-4); margin: 0 2px;
box-shadow: 0 6px 18px rgba(40,60,120,.10); display: flex; flex-direction: column; gap: var(--sp-2);
}
.tf-progress-head b { display: block; font-size: var(--fs-title); line-height: var(--lh-tight); }
.tf-progress-head span, .tf-progress-yesterday, .tf-progress-restart, .tf-progress-notice {
display: block; color: var(--c-ink-2); font-size: var(--fs-sm); line-height: var(--lh-compact);
}
.tf-progress-tasks { padding-left: var(--sp-5); color: var(--c-ink); font-size: var(--fs-sm); line-height: var(--lh-body); }
.tf-progress-quality, .tf-progress-actor { color: var(--c-ink-2); font-size: var(--fs-sm); font-weight: 600; }
.tf-progress-quality input, .tf-progress-actor select { width: 100%; min-height: var(--tap); margin-top: var(--sp-1); border: 1px solid var(--c-line); border-radius: var(--r-sm); padding: 0 var(--sp-3); font: inherit; background: #fff; }
.tf-progress-done { color: var(--c-ink); font-size: var(--fs-sm); display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); }
.tf-progress-submit { min-height: var(--tap); border: 0; border-radius: var(--r-sm); background: var(--c-brand); color: #fff; font-size: var(--fs-body); font-weight: 700; cursor: pointer; }
.tf-progress-submit:disabled { opacity: .6; cursor: wait; }
.tf-progress-card.is-degraded { border-color: #f0c36a; background: var(--c-warn-bg); }
.tf-progress-card.is-degraded .tf-progress-notice { color: var(--c-warn-ink); }
.pk-header { display: flex; align-items: flex-start; gap: var(--sp-3); }
.pk-badge {
flex-shrink: 0; color: #fff; font-size: var(--fs-sm); font-weight: 800; letter-spacing: 1px;
width: 40px; height: 40px; border-radius: var(--r-md); display: flex; align-items: center;
justify-content: center; box-shadow: 0 4px 10px -3px rgba(30,50,110,.4);
}
.pk-head-main { flex: 1; min-width: 0; }
.pk-title { font-size: var(--fs-title); font-weight: 800; color: var(--c-ink); line-height: var(--lh-tight); }
.pk-signal { font-size: var(--fs-sm); color: var(--c-ink-3); margin-top: var(--sp-1); line-height: var(--lh-compact); }
/* 分节：标题上边距远大于下边距 —— 亲密性原则，让标题视觉归属它下方的内容 */
.pk-sec { display: flex; flex-direction: column; }
.pk-sec > * + * { margin-top: var(--sp-2); }
.pk-sec-title {
font-size: var(--fs-section); font-weight: 800; line-height: var(--lh-tight);
color: var(--c-ink); margin: var(--sp-5) 0 var(--sp-2);
}
.pk-sec > .pk-sec-title + * { margin-top: 0; }
.plan-card-h5 > .pk-sec-title:first-child,
.form-card > .pk-sec-title:first-child { margin-top: 0; }
.pk-sec-no { font-style: normal; color: var(--c-brand); margin-right: var(--sp-1); }
.pk-sec p {
font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink);
margin: 0 0 var(--sp-3);
}
/* 2026-09-05 大圣裁定：初筛诊断单（#diag-body）上半截①②③正文比下半截「我是怎么
判断的」（.ev-basis/.dp-pair-row，均 --fs-sm/--lh-compact）明显大一号，视觉断层。
以下半截为准统一，只在诊断单容器内覆盖，不动 .pk-sec p 在 tifen.js/ai-rich.js
里的既有用法（--fs-body 变量本身注释写明"保持不变"，不能改变量）。 */
#diag-body .pk-sec p {
font-size: var(--fs-sm); line-height: var(--lh-compact);
}
/* 关键数字（"566分""还差96分"）：正文里挑出来加色加重，家长一眼能抓到 */
em.num { font-style: normal; font-weight: 700; color: var(--c-brand); }
/* 「结论」段单独成块，与①②③三段拉开 */
.pk-sec--summary {
background: var(--c-brand-soft); border-radius: var(--r-md);
padding: var(--sp-4); margin-top: var(--sp-5);
}
.pk-sec--summary .pk-sec-title { margin-top: 0; color: var(--c-brand); }
.pk-step {
display: flex; gap: var(--sp-3); align-items: flex-start; background: var(--c-bg-soft);
border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-3);
line-height: var(--lh-body);
}
.pk-no {
flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; font-size: var(--fs-title); font-weight: 800;
display: flex; align-items: center; justify-content: center; line-height: 1;
}
.pk-step-body { flex: 1; min-width: 0; }
.pk-step-title { font-size: var(--fs-title); font-weight: 800; color: var(--c-ink); line-height: var(--lh-tight); }
.pk-step-desc { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: var(--lh-body); margin-top: var(--sp-1); }
.pk-tip {
background: var(--c-warn-bg); border: 1px solid #ffedb8; border-radius: var(--r-md);
padding: var(--sp-3); font-size: var(--fs-sm); color: var(--c-warn-ink); line-height: var(--lh-body);
}
.pk-alt { border: 1.5px dashed #d7e0f2; border-radius: var(--r-md); overflow: hidden; }
.pk-alt-toggle {
width: 100%; background: #f6f8fd; border: none; padding: var(--sp-3); cursor: pointer;
font-size: var(--fs-sm); font-weight: 700; color: var(--c-brand); text-align: left; min-height: var(--tap);
}
.pk-alt-toggle i { font-style: normal; float: right; }
.pk-alt-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.pk-alt-title { font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink-2); line-height: var(--lh-compact); }
.pk-tasks { display: flex; flex-direction: column; gap: var(--sp-2); }
.pk-task {
display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-sm); color: var(--c-ink-2);
line-height: var(--lh-body); background: var(--c-bg-soft); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3);
}
.pk-task .pk-box { color: var(--c-ink-3); font-size: var(--fs-title); line-height: var(--lh-tight); flex-shrink: 0; }
.pk-ai {
background: #f0f6ff; border: 1px solid #d7e6ff; border-radius: var(--r-md); padding: var(--sp-3);
display: flex; flex-direction: column; gap: var(--sp-2);
}
.pk-ai-title { font-size: var(--fs-title); font-weight: 800; color: var(--c-brand); line-height: var(--lh-tight); }
.pk-ai-item {
font-size: var(--fs-sm); color: var(--c-ink-2); line-height: var(--lh-body); padding-left: var(--sp-3);
border-left: 3px solid #b9d2fb;
}
.pk-disc {
font-size: var(--fs-caption); color: var(--c-ink-3); line-height: var(--lh-compact);
border-top: 1px dashed var(--c-line); padding-top: var(--sp-2);
}
/* U4（0821）：「我是怎么判断的」按「看了什么／发现什么／接下来核对什么」分组，
复用既有 token（.f-label 字号 + .c-bg-soft 卡片背景），不新引入配色/圆角。 */
/* P1 把「判断依据」拆成独立条目后，条目起行会浪费句尾残余宽度，总高度容易超出改造前——
靠压缩组间距找回空间：sp-3→sp-2，不影响可读性，只是三组标题之间的呼吸感略紧。 */
.dp-group + .dp-group { margin-top: var(--sp-2); }
.dp-group-title { font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink-2); }
.dp-group-title + * { margin-top: var(--sp-1); }
/* D4/P3（0821）：「发现什么」是结论，视觉要跳出来——但区块总高度不许比改前增加，
放弃会占竖向空间的 padding 背景盒，改用 .pk-ai-item 同款左侧强调边（border-left +
padding-left，只占横向空间）+ 品牌色标题，字重/边框都是已有 token，不新引入配色。
只加后代选择器，不改 .dp-group-title 自身 class（见 screening.js 里的断言注释）。 */
.dp-group--focus .dp-group-title { color: var(--c-brand); font-weight: 800; }
.dp-group--focus .ev-basis {
border-left: 3px solid var(--c-brand); padding-left: var(--sp-2); color: var(--c-ink);
}
.dp-pair {
background: var(--c-bg-soft); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3);
}
.dp-pair + .dp-pair { margin-top: var(--sp-2); }
.dp-pair-row { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: var(--lh-body); }
.dp-pair-row + .dp-pair-row { margin-top: var(--sp-1); }
.dp-pair-row b { color: var(--c-ink); font-weight: 700; margin-right: var(--sp-1); }
/* ---- 意图层：真实案例卡 / 知识命中 / 下一步 chips ---- */
.intent-card {
background: #fff; border-radius: var(--r-lg); padding: var(--sp-4); margin: 0 2px;
box-shadow: 0 6px 18px rgba(40,60,120,.10); flex-shrink: 0;
display: flex; flex-direction: column; gap: var(--sp-3);
}
.case-card {
position: relative; background: #fffdf7; border: 1px solid #f2e7c9;
border-left: 4px solid #e8a23d; border-radius: var(--r-md); padding: var(--sp-3);
display: flex; flex-direction: column; gap: var(--sp-2);
}
.cc-badge {
position: absolute; top: -1px; right: var(--sp-3); background: #e8a23d; color: #fff;
font-size: var(--fs-caption); font-weight: 800; letter-spacing: 1px;
padding: var(--sp-1) var(--sp-2); border-radius: 0 0 8px 8px;
}
.cc-title { font-size: var(--fs-title); font-weight: 800; color: var(--c-ink); line-height: var(--lh-tight); padding-right: 64px; }
.cc-meta { font-size: var(--fs-sm); color: var(--c-ink-3); line-height: var(--lh-compact); }
.cc-meta b { color: #8a6d2b; font-weight: 700; margin-right: var(--sp-1); font-size: var(--fs-caption); }
.cc-essence { display: flex; flex-direction: column; gap: var(--sp-2); }
.cc-step { display: flex; gap: var(--sp-2); align-items: flex-start; }
.cc-no {
flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; margin-top: var(--sp-1);
background: #f6e8c8; color: #8a6d2b; font-size: var(--fs-caption); font-weight: 800;
display: flex; align-items: center; justify-content: center;
}
.cc-text { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: var(--lh-body); }
.cc-src { font-size: var(--fs-caption); color: var(--c-ink-3); border-top: 1px dashed #eee2c2; padding-top: var(--sp-2); }
/* GPT 自然回答气泡：正文同普通气泡，底部小字"依据"可点开折叠的参考卡 */
.llm-bubble { display: flex; flex-direction: column; }
.la-text { word-break: break-word; }
.la-src {
margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--c-line); background: var(--c-bg-soft);
border-radius: var(--r-sm); cursor: pointer; white-space: normal;
word-break: break-word; width: 100%; text-align: left;
font-size: var(--fs-sm); color: var(--c-ink-2); line-height: var(--lh-compact);
}
.la-src:hover { color: var(--c-brand); }
.la-refs { margin-top: var(--sp-2); border-top: 1px dashed var(--c-line); padding-top: var(--sp-2); }
.la-refs .kh-item { background: var(--c-bg-soft); }
/* AI 补充段占位态（替代行内 style）*/
.ai-pending { color: var(--c-ink-3); font-style: italic; }
/* pk-sec-title 主题色通过 CSS 自定义属性传递，替代行内 style="color:..." */
.pk-sec-title--brand { color: var(--subject-color, var(--c-brand)); }
/* ---- AI 自由文本 → 卡片化渲染（js/ai-rich.js 输出，与 pk-* 同源视觉） ---- */
.ai-rich { display: flex; flex-direction: column; }
.ai-rich > * + * { margin-top: var(--sp-3); }
/* 小标题：emoji + 主题色，规格对齐 .pk-sec-title--brand */
.ai-sec-title {
display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
font-size: var(--fs-section); font-weight: 800; line-height: var(--lh-tight);
color: var(--subject-color, var(--c-brand));
}
.ai-rich > .ai-sec-title + * { margin-top: var(--sp-2); }
.ai-rich > * + .ai-sec-title { margin-top: var(--sp-5); }
.ai-sec-emoji { flex-shrink: 0; font-size: var(--fs-title); line-height: 1; }
/* 结论段：左边框引用块，规格对齐 .pk-ai-item */
.ai-lead {
font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink);
padding-left: var(--sp-3); border-left: 3px solid #b9d2fb;
}
.ai-para {
font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink); margin: 0;
}
/* 列表项：灰底圆角卡。
字号必须与 .ai-lead / .ai-para 同为 --fs-body ——AI 回复是「通篇读下来」的场景，
不是模板卡那种「扫一眼」的场景。此前照搬 .pk-task 的 --fs-sm，正文 16px 与列表 13.5px
在同一段回答里来回跳，家长看着就是「忽大忽小、很粗糙」。
层次改由背景块 + 间距 + 圆点承担，不由字号承担。 */
.ai-cards { display: flex; flex-direction: column; gap: var(--sp-2); }
.ai-card {
display: flex; gap: var(--sp-3); align-items: flex-start;
font-size: var(--fs-body); color: var(--c-ink); line-height: var(--lh-body);
background: var(--c-bg-soft); border-radius: var(--r-sm); padding: var(--sp-3);
}
.ai-card-dot {
flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%;
background: var(--subject-color, var(--c-brand));
/* 对齐首行文字的视觉中线：(16px × 1.75 - 6px) / 2 */
margin-top: 11px;
}
.ai-step-badge {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(22, 116, 72, 0.12);
color: var(--subject-color, #167448);
font-size: 13px;
font-weight: 800;
line-height: 1;
margin-top: 2px;
}
.ai-card-text { flex: 1; min-width: 0; }
.ai-strong { font-weight: 800; color: var(--c-ink); }
.ai-ref { color: var(--c-brand); font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
.kh-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.kh-item {
background: var(--c-bg-soft); border: 1px solid var(--c-line); border-left: 4px solid var(--c-brand);
border-radius: var(--r-md); padding: var(--sp-3); line-height: var(--lh-body);
}
.kh-title { font-size: var(--fs-title); font-weight: 800; color: var(--c-ink); line-height: var(--lh-tight); }
.kh-snippet { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: var(--lh-body); margin-top: var(--sp-1); }
.kh-hint { font-size: var(--fs-caption); color: var(--c-brand); font-weight: 600; margin-top: var(--sp-1); }
.sg-wrap { margin-left: var(--sp-10); flex-shrink: 0; }
.sg-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.plan-card-h5 .sg-chips { border-top: 1px dashed var(--c-line); padding-top: var(--sp-3); }
.sg-chip {
border: 1.5px solid #d7e2ff; background: #f6f9ff; color: var(--c-brand); font-size: var(--fs-sm);
font-weight: 600; padding: var(--sp-2) var(--sp-4); border-radius: 999px; cursor: pointer;
transition: all .15s ease; min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center;
}
.sg-chip:hover { background: var(--c-brand); color: #fff; }
/* 🔴 2026-09-04 大圣实拍「试卷证据」步：.sg-chip 本是居中的纯文字胶囊按钮，
这里被当