@import url("faq.css?v=4737e0e2");
@import url("hubnav.css?v=eee1bc77");
:root {
  --bg: #f5f7fa;
  --panel: #ffffff;
  --ink: #1f2733;
  --muted: #6b7785;
  --line: #e3e8ef;
  --brand: #0e7490;
  --brand-soft: #e0f2f7;
  --accent: #d97706;
  --good: #15803d;
  --bad: #b91c1c;
  --chip: #eef2f6;
  --shadow: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  /* 🔴 全站唯一的内容宽度（2026-10-17 老杨定：页面左右边线必须一条线）。
     原来是 860 / 900 / 920 / 960 / 1080 / 1100 / 1140 七种值并存，
     从首页点进学校详情页时内容框会突然内缩 120px。现在所有容器都取这一个数。 */
  --page-w: 960px;
  /* 🔴 左右留白也必须只有一个数（2026-10-17 二次返工）。
     --page-w 是「外框宽」，可见内容/带边框的块要从 page-pad 之后算起：
     · .wrap / .hero-inner 用 padding → 里面的块宽度自动 = page-w - 2*pad
     · 有边框的一级块（.hubjump 直接挂在 </header> 后面，不在 .wrap 里）
       必须自己写成 max-width: calc(page-w - 2*pad)，否则它比正文块宽 40px，
       左边线 224 vs 244 错开一截（老杨截图「不统一」就是这个）。 */
  --page-pad: 20px;
  --page-inner: calc(var(--page-w) - var(--page-pad) * 2);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}
a { color: var(--brand); text-decoration: none; }

/* 顶部 */
header.hero {
  background: linear-gradient(135deg, #0e7490, #155e75);
  color: #fff;
  padding: 28px 0 22px;
}
.hero-inner { max-width: var(--page-w); margin: 0 auto; padding: 0 var(--page-pad); }
.hero h1 { margin: 0 0 6px; font-size: 24px; }
.hero p { margin: 0; opacity: .92; font-size: 14px; }
.hero .stat { display: flex; gap: 18px; margin-top: 14px; flex-wrap: wrap; }
.hero .stat div { font-size: 13px; }
.hero .stat b { font-size: 18px; display: block; }

/* ===== Hero 顶部：面包屑 + 信任 slogan + 导语（2026-10-21 老杨 SEO 单）=====
   H1 保留不动，紧接着一行 slogan 说清「我们是谁、图什么」，再一段导语交代这页在讲什么。
   slogan 比正文重一档（600），导语比正文轻（13.5/1.9），避免整块看起来像一段广告词。 */
.hero .crumb {
  margin: 0 0 10px; font-size: 12px; color: rgba(255, 255, 255, .62);
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.hero .crumb a { color: rgba(255, 255, 255, .82); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.hero .crumb a:hover { color: #fff; border-bottom-color: #fff; }
.hero .crumb .cb-sep { color: rgba(255, 255, 255, .45); }
/* 2026-10-21 老杨方案 A：首屏只留 H1 + 这一行 slogan + 数据卡。
   Slogan 14px / 常规字重 / 比正文略淡的白（hero 是深青底，写「深灰」会直接看不见，
   对齐到等价的 85% 白）；长导语搬到 .wrap 里的 .seo-lead，不再压在数据卡上方。 */
.hero .hero-tag {
  margin: 7px 0 0; font-size: 14px; font-weight: 400; line-height: 1.7;
  color: rgba(255, 255, 255, .85); opacity: 1;
}
@media (max-width: 640px) {
  .hero .hero-tag { font-size: 13px; }
}
/* 长段 SEO 导语：套一个与折叠条 summary 同款的外框（浅灰底 #f5f7fa + 1px 边 + 10px 圆角），
   2026-10-21 老杨指定「加一个这样的框」——它是一段说明文字，不该散在页面上像广告语。
   排版再按老杨 2026-10-21 晚的定稿：13px / #666 / 行高 1.6 / 上下留白 24。
   定位是「安静的说明文字」，不跟下面三张功能卡抢主角。 */
.seo-lead {
  margin: 24px 0;
  padding: 12px 16px; background: #f5f7fa; border: 1px solid var(--line); border-radius: 10px;
  font-size: 13px; line-height: 1.6; color: #666;
}
/* 移动端 13px 在安卓部分机型偏小（2026-10-21 复核建议），升到 14px，行高不动 */
@media (max-width: 768px) {
  .seo-lead { font-size: 14px; }
}
/* ===== 手机端「本站说明」折叠（2026-10-21 老杨）=====
   这段导语有 200 多字，手机上一进首页占掉大半屏，先说教再给内容。
   改成：默认只露一行「本站是什么 · 数据怎么核对的」，点开才看全文；桌面端保持整段常显。
   🔴 折叠开关的皮（底色 / 边框 / 圆角 / 字号 / 内边距）全站只有一套，就是下面这条：
   手机端目录块的 .hj-fold-btn 必须写成同一组参数，不要再各写各的。
   箭头用 css/faq.css 里的 .fold-ar，这里不许再画三角。 */
.sl-btn { display: none; }
@media (max-width: 700px) {
  .seo-lead-fold { margin: 24px 0; }
  .seo-lead-fold > .sl-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; box-sizing: border-box; margin: 0;
    background: #f5f7fa; border: 1px solid var(--line, #e3e8ef); border-radius: 10px;
    color: #334155; font-size: 13.5px; font-weight: 600; line-height: 1.5;
    padding: 11px 14px; font-family: inherit; cursor: pointer; text-align: left;
  }
  .seo-lead-fold > .sl-btn:active { background: #eef2f7; }
  .seo-lead-fold .sl-t::after { content: "（展开）"; color: #64748b; font-weight: 400; }
  .seo-lead-fold.is-open .sl-t::after { content: "（收起）"; }
  .seo-lead-fold .seo-lead { margin: 8px 0 0; }
  .seo-lead-fold:not(.is-open) .seo-lead { display: none; }
}

/* 布局 */
.wrap { max-width: var(--page-w); margin: 18px auto; padding: 0 var(--page-pad); }
.layout { display: grid; grid-template-columns: 290px 1fr; gap: 18px; align-items: start; }

/* 侧栏筛选
   🔴 2026-10-16 第一版（已废）：给 .filters 加 max-height + 自身滚动。
   实测体验差 —— 老杨截图反馈「这块滚动特别不好」：sticky 容器内部滚动 = 滚轮被容器吃掉、
   底部被切、滚动链断裂，用户感觉"卡住"。
   🔴 第二版：**高度装不下时就不 sticky**（见下面 @media max-height）。让筛选栏回到正常
   文档流、整页滚动，内容自然完整可见。sticky 只留给能完整容纳筛选栏的高视口；
   max-height 仅作极端兜底（字体渲染/内容变多时不让它溢出屏幕）。 */
.filters {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; position: sticky; top: 14px; box-shadow: var(--shadow);
  max-height: calc(100vh - 28px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.2) transparent;
}
.filters::-webkit-scrollbar { width: 8px; }
.filters::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 4px; }
.filters::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.34); }
.filters::-webkit-scrollbar-track { background: transparent; }
.filters h3 { margin: 0 0 3px; font-size: 15px; }
.filters .grp { margin-top: 12px; }
.filters .grp > label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 4px; color: var(--muted); }
.filters select, .filters input[type="range"], .filters input[type="search"] { width: 100%; }
.filters select, .filters input[type="search"] {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: #fff;
}
/* 关键词搜索（2026-10-17）：首页目录块的搜索框无 JS / 直接回车时落到 /schools/?q=，
   由这里接住；也可以在本页自己输入。 */
.filters input[type="search"] { font-family: inherit; outline: none; -webkit-appearance: none; appearance: none; }
.filters input[type="search"]:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(29, 78, 216, .12); }
.filters .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filters .chip {
  font-size: 12px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--chip); cursor: pointer; user-select: none;
}
.filters .chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.filters .range-val { font-size: 13px; font-weight: 600; color: var(--brand); }
.filters .reset { margin-top: 12px; width: 100%; padding: 8px; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; font-size: 13px; }

/* 筛选分组（2026-10-16）：原来 7 个下拉平铺，看不出先后。改成按决策顺序分 4 组
   （学什么 / 怎么教 / 在哪住 / 花多少），每组一句人话副标题 + 细分割线。
   纯视觉分层：控件、id、行为一律不变。 */
.filters .fset { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--line); }
.filters .fset:first-of-type { margin-top: 6px; padding-top: 0; border-top: 0; }
.filters .fset-h { display: flex; align-items: baseline; gap: 8px; }
.filters .fset-h b { font-size: 13.5px; color: var(--ink); }
.filters .fset-h span { font-size: 11.5px; color: var(--muted); }
.filters .fset .grp { margin-top: 8px; }

/* 结果区（2026-10-22 方案 B：工具条只剩「筛选（总数）」+ 排序两个控件，左对齐、同款样式） */
/* P0-1（2026-10-22）：筛选/排序栏吸顶 —— 桌面端 results-head 跟随页面滚走，
   翻到下面想换排序要滚回顶部。这里让它 sticky 吸顶、白底+底部分隔线（无厚重阴影），
   与移动端 @media 里的吸顶规则同源；左侧 .filters 侧栏本来就是 sticky（top:14px）。 */
/* 2026-10-22 老杨：吸顶栏原来是一条扁平白条（只有底部分隔线，无边框/圆角/投影），
   夹在圆角卡片上方显得突兀 → 统一成和卡片同一个「圆角白卡」：同边框、圆角、投影、背景。 */
.results-head {
  display: flex; justify-content: flex-start; align-items: center; gap: 8px;
  position: sticky; top: 0; z-index: 30;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow);
  padding: 12px 16px; margin-bottom: 12px;
}
.results-head select {
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--brand); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px;
  margin-bottom: 12px; box-shadow: var(--shadow);
}
.card .top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
/* 标题行：校名 + 徽标（重点收录 / N 人打卡 / 双校区 / 斯巴达）一起排。
   2026-10-22 老杨：窄屏时徽标被挤断——「3 人打卡」折成只剩一个「3」，「3 个校区」只剩「个校区」。
   原因：.name 是普通行内流，徽标是 inline 元素，浏览器可以在「3」和「人打卡」之间换行。
   修法：① .name 改 flex + wrap，徽标要么整个留在标题行，要么整个掉到下一行，不会从中间断开；
        ② 徽标本身 white-space: nowrap，任何情况下都不折行。 */
/* P0-2（2026-10-22）：校名提为最强视觉层级 —— 18px / 600 字重 / --ink。 */
.card .name {
  font-size: 18px; font-weight: 600; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px;
}
.card .name > a.nlink { min-width: 0; }
.card .name .tag { white-space: nowrap; flex: 0 0 auto; }
.card .tags .tag { white-space: nowrap; }
/* P0-2：英文原名/城市/派系/建校/容纳 —— 降为 13px --muted，单独一行弱化，不与校名抢视觉。 */
.card .sub { font-size: 13px; color: var(--muted); margin: 2px 0 0; }
.card .score { text-align: right; white-space: nowrap; }
.card .score .num { font-size: 20px; font-weight: 800; color: var(--accent); }
.card .score .stars { font-size: 12px; color: var(--muted); }
.card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
/* P0-2：课程标签（口语/雅思/托业）改为小浅灰圆角，与名称旁「重点收录/斯巴达/校区」彩标区分层级。
   彩标走 inline 样式覆盖，不受这条影响；只作用于无 inline 色的纯课程标签。 */
.tag { font-size: 12px; padding: 3px 9px; border-radius: 6px; background: var(--chip); color: #475569; }
.tag.gray { background: var(--chip); color: var(--muted); }
/* 标签截断「+N」：小号弱化按钮，点开看全部标签（2026-10-22） */
.tags-more {
  font-size: 11px; line-height: 1; padding: 3px 7px; border-radius: 6px;
  border: 1px solid var(--line); background: #f8fafc; color: var(--muted);
  cursor: pointer; font-family: inherit; margin-left: 2px;
}
.tags-more:hover { background: #eef2f7; color: #475569; }
/* 参数区：常显单行（2026-10-22 再定版）——
   列表卡只放快速判断信息，1:1占比｜管理模式｜住宿｜适合 一行看完，不做折叠、不放大段文字。 */
/* P0-2：核心参数行提到 14px（只留关键指标，1:1占比｜管理模式｜住宿｜适合，不冗余文字）。 */
.meta { margin-top: 8px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.meta b { color: var(--ink); font-weight: 600; }
/* 卡片内折叠项（仅剩【费用明细】，以及【查看真实评价】）——统一上间距。 */
.card details.pd { margin-top: 8px; }
.price-box {
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 10px 12px; margin-top: 12px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
/* P0-2：价格数字放大，强化最强转化锚点（小字规格 price-cap 仍 12px 弱化）。 */
.price-box .big { font-size: 22px; font-weight: 800; color: var(--good); line-height: 1.25; }
/* 极致极简（2026-10-22）：绿色块只留「总价 + 一句话」。说明另起一行，
   避免「｜4周打包价（平季双人间）」被挤断、末尾「间）」孤字换行。 */
.price-box .price-cap { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin: 2px 0 0; line-height: 1.45; }
/* 被收进【费用明细】折叠的每周单价 + 测算器入口（桌面随折叠展开、手机默认收起）。 */
.price-detail-extra { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
.price-detail-extra .wk-price { font-size: 12px; color: var(--muted); line-height: 1.7; }
.price-detail-extra .calc-link { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--brand); text-decoration: none; }
.price-detail-extra .calc-link:hover { text-decoration: underline; }
/* 价格框右栏「每周单价（人民币）：学费 ¥x · 住宿 ¥y · 餐：已含」
   不加这条时 flex 会把这个 div 压到 min-content 宽 → 每段各占一行、竖成 4 行（612px 卡片上实测 54/88 张这样）。
   min-width:max-content 让它保持整块宽度、放不下就整体换到下一行；max-width:100% 兜住手机端（超宽时退回折行，
   段内仍是 nowrap，只会在「·」处断开，标签和金额不会被拆到两行）。 */
.price-box .wk-price { flex: 0 0 auto; min-width: max-content; max-width: 100%; }
.price-detail { font-size: 12px; color: var(--muted); margin-top: 6px; }
/* 打卡标签点开后原地展开的出行月份（2026-10-22）。display:block 而不是 flex——
   它挂在 <p class="name"> 里，块级会让它自然落到标题下一行，不动标签行本身。 */
.btag-m { display: block; font-size: 12px; color: #0f766e; margin-top: 3px; }
.btag-m[hidden] { display: none; }
/* 首页 FAQ 底部的一句出口（2026-10-22）：把撤下去的城市/签证问题指到问答库。
   刻意不用全站那条 .qa-entry 引导条——_inject_qa_entry.js 会主动摘掉首页的它。 */
.faq-more {
  font-size: 13px; line-height: 1.75; color: #64748b;
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
}
.faq-more a { color: var(--brand); font-weight: 600; text-decoration: none; }
.faq-more a:hover { text-decoration: underline; }
/* 卡片「费用明细」折叠（2026-10-22）
   桌面常显（HTML 里带 open，见 app.js cardHTML）；手机默认收起 ——
   390×844 的手机一屏连一张卡都放不下，主要体积就是这段五行明细。 */
details.pd > summary { display: none; }
details.pd > summary::-webkit-details-marker { display: none; }
details.pd > summary .pd-ar {
  display: inline-block; width: 7px; height: 7px; margin-left: 5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform .2s;
}
details.pd[open] > summary .pd-ar { transform: rotate(-135deg) translate(-1px, -1px); }
@media (max-width: 820px) {
  /* 断点跟筛选面板统一到 820：不然 800 宽的设备会出现「面板是手机形态、卡片明细却是桌面常显」的怪组合 */
  details.pd > summary {
    display: flex; align-items: center; font-size: 13px; color: var(--brand);
    cursor: pointer; padding: 7px 0 2px; list-style: none; font-weight: 500;
  }
  .price-detail { margin-top: 4px; }
}
/* P0-2：底部动作行（查看真实评价）靠右排布，与上方左对齐内容拉开距离，不挤在一起。 */
.card .more { margin-top: 10px; display: flex; justify-content: flex-end; }
/* 学校详情页入口 = 卡片标题（2026-10-16 老杨：撤掉卡片底部重复的「查看学校详情」，标题成为唯一入口）
   → 默认就给一条淡下划线提示「这里可以点」，hover 时才变实、变品牌色 */
.card .name a.nlink {
  color: inherit; text-decoration: underline;
  text-decoration-color: rgba(37, 99, 235, .3); text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.card .name a.nlink:hover { color: var(--brand); text-decoration-color: var(--brand); }
.card .more button {
  font-size: 13px; border: none; background: none; color: var(--brand); cursor: pointer; padding: 0; font-weight: 500;
}
.reviews { display: none; margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; }
.reviews.open { display: block; }
.review { font-size: 13px; background: #fafbfc; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.review .who { color: var(--muted); font-size: 12px; }
.empty { text-align: center; color: var(--muted); padding: 40px; background: var(--panel); border-radius: 12px; border: 1px dashed var(--line); }

/* ===== 列表分批加载的进度条与「再看 N 所」（2026-10-21 老杨：111 所不要一次全铺）=====
   滚动到底部会自动加载下一批，这个按钮是给①不支持 IntersectionObserver 的老浏览器
   ②想自己控制节奏的人兜底。不抢卡片视觉，浅灰底、与正文同字号。 */
/* 🔴 overflow-anchor:none 是分批加载能成立的前提。默认的「滚动锚定」会在卡片插到列表末尾时
   重新计算视口位置，实测一次滚到底会触发 7 次锚定修正、把 scrollY 一路顶到新底部，
   于是哨兵永远停在视口上方，一次就把 111 张全铺完了（等于没分批）。关掉它，插入不影响滚动位置。 */
#results { overflow-anchor: none; }
/* 2026-10-22 老杨：滚到底那段「留白太多」——原来 #results 的 56px 内边距 + 这里 14px 上边距
   叠出 70px 空地。上下留白都收紧，完成态（只剩一行「这 N 所都在这儿了」）再压一档。 */
.load-more { text-align: center; padding: 10px 0 0; }
.load-more[hidden] { display: none; }
.load-more.is-done { padding-top: 6px; }
.load-more .lm-progress { font-size: 12px; color: var(--muted); margin: 0; }
.load-more .lm-btn {
  display: inline-block; margin-top: 8px; padding: 8px 18px; border-radius: 8px; cursor: pointer;
  background: #f5f7fa; border: 1px solid var(--line); color: #444;
  font-size: 13px; font-family: inherit; transition: background .15s ease, color .15s ease;
}
.load-more .lm-btn:hover { background: #ecfeff; color: var(--brand); border-color: var(--brand); }
.load-more .lm-btn[hidden] { display: none; }

section.block { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin: 16px 0; box-shadow: var(--shadow); }
section.block h2 { margin: 0 0 10px; font-size: 18px; }
section.block ul { margin: 8px 0; padding-left: 20px; }
section.block li { margin: 6px 0; font-size: 14px; }
.kicker { color: var(--brand); font-size: 12px; font-weight: 700; letter-spacing: .5px; }

/* 智能匹配问卷 */
.match label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
.match select { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.match .go { margin-top: 14px; background: var(--accent); color: #fff; border: none; padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; }
.match .res { margin-top: 12px; }

/* 页脚（2026-10-21 老杨：原来 12px 挤成一坨，把字号和行距各抬一档，
   并靠 <br> 分成「定位 / 更新时间 / 费用免责」三层，需要看的人找得到，不需要的人一眼带过） */
footer { text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.9; padding: 20px 24px 10px; }

@media (max-width: 820px) {
  /* minmax(0,1fr) 而不是 1fr（2026-10-22）：1fr 的最小值是 auto，
     筛选栏里任一不可换行元素都会把轨道撑破 —— 实测 390 宽下 .layout 350px、
     aside 被撑到 379px，整页多出 9px 横向滚动，右侧内容全被切。
     min-width:0 是同一件事的双保险（卡片区也会被长英文名撑）。 */
  .layout { grid-template-columns: minmax(0, 1fr); }
  .layout > * { min-width: 0; }
  .filters { position: static; max-height: none; overflow: visible; }
  .meta { grid-template-columns: repeat(2, 1fr); }
}
.layout > * { min-width: 0; }
/* ---------- 列表页工具条与筛选面板 ----------
   2026-10-22 方案 C（老杨定稿，在 B 之上再砍一刀）：
   桌面左栏常驻、没有任何开关，工具条只留【排序▾】一个控件——
   原来那个「筛选（114 所）」按钮点了会把左栏收起来，等于把筛选项藏了，方向反了，删。
   手机才需要开关：点它弹出全屏筛选面板，与【排序▾】并排、同款样式、垂直居中。 */
.f-toggle {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--brand); cursor: pointer;
}
.f-toggle-ar {
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
}
/* 面板抬头只剩一个关闭 ✕，且只属于手机覆盖层；
   桌面左栏既没有抬头也没有条件摘要，直接从「直接搜」开始（老杨：两行都是噪音）。 */
.f-body-top { display: none; }
.c-short { display: none; }
/* 桌面：筛选按钮隐藏（左栏常驻，开关无意义），工具条只剩排序 */
@media (min-width: 821px) {
  .f-toggle { display: none; }
}

@media (max-width: 820px) {
  /* ---- 吸顶工具条：两个控件左对齐（筛选总数｜排序），与桌面同款 ---- */
  /* 手机端跟随基础样式：同样是圆角白卡（边框/圆角/投影与卡片一致），只把内边距收窄一点。 */
  .results-head {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 8px;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 12px; box-shadow: var(--shadow);
    padding: 10px 12px; margin: 0 0 12px;
  }
  .results-head .sort-wrap { flex: none; }
  .results-head select { max-width: 42vw; font-size: 12.5px; padding: 5px 6px; }

  /* 卡片标题：手机上校名独占第一行，徽标（重点收录/打卡/校区/管理模式）整体落到第二排，
     不再挤在校名同一行或被从词中间断开（老杨 2026-10-22：直接置第二排更美观）。 */
  .card .name > a.nlink { flex: 0 0 100%; }

  /* ---- 筛选面板：手机上变成全屏覆盖层（不做抽屉，覆盖层不用管手势和返回键）---- */
  .filters { padding: 0; border: 0; background: none; box-shadow: none; }
  .filters > .f-body { display: none; }
  .filters.is-open > .f-body {
    display: block; position: fixed; inset: 0; z-index: 200;
    background: #fff; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 18px 92px;
  }
  /* 覆盖层不再有「筛选条件 / 全部 N 所」两行抬头（老杨 2026-10-22：纯噪音），
     只留右上角一个 ✕ —— 收起时贴边、不占一整条横栏的高度。 */
  .f-body-top {
    position: fixed; top: 10px; right: 18px; z-index: 2;
    display: flex; align-items: center; justify-content: flex-end;
  }
  .f-close {
    border: 0; background: #f1f5f9; color: #475569; width: 30px; height: 30px;
    border-radius: 50%; font-size: 15px; line-height: 1; cursor: pointer; font-family: inherit;
  }
  /* 抬头的 ✕ 现在浮在右上角（fixed），不再占一条横栏 → 首项只需 8px 上边距 */
  .filters > .f-body > .fset:first-of-type { margin-top: 8px; padding-top: 0; border-top: 0; }
  /* 覆盖层左右留白与首项上沿对齐，别让「直接搜」贴着屏幕边 */
  .filters.is-open > .f-body { padding-top: 10px; }
  body.f-open { overflow: hidden; }
  /* 全屏筛选面板打开时，右下角那个「答疑」悬浮按钮会正好压在「看结果」上（实测点不到）。
     面板是模态的，浮窗这时候没有意义，直接让位。 */
  body.f-open .ph-adv-btn { display: none; }

  /* 面板底部固定一条出口：选完直接看结果，不用再找关闭 */
  .f-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 201;
    display: flex; gap: 8px; margin: 0;
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--line);
  }
  .f-actions .reset { margin-top: 0; flex: 1; }

  /* 卡片底部给悬浮「答疑」按钮让出空间，否则最后一屏的价格框被它压住。
     2026-10-22 老杨：56px 太厚，滚到底那一段是纯空白 → 收到 18px（浮钮直径 44、离底 20，
     只要不被它压住正文即可，不需要整块空地）。 */
  #results { padding-bottom: 18px; }

  /* 价格框在手机上改成上下两段：原来右栏「每周单价…」用 nowrap 顶着 100% 宽度，
     390 宽下会横着溢出框外（实测「餐：已含」这几个字直接被裁掉）。 */
  .price-box { display: block; }
  .price-box .wk-price {
    text-align: left !important; margin-top: 6px;
    min-width: 0; max-width: 100%;
  }
  .price-box .wk-price span { white-space: normal !important; }

  /* 用 .f-actions .f-apply 而不是 .f-apply —— 文件后面还有一条全局的
     `.f-apply { display:none }`（桌面隐藏），同权重会被它盖掉，按钮就不见了。 */
  .f-actions .f-apply {
    display: block; flex: 1.4; padding: 9px; border: 1px solid var(--brand);
    background: var(--brand); color: #fff; border-radius: 8px; cursor: pointer;
    font-size: 13.5px; font-weight: 600; font-family: inherit;
  }
}

.f-apply { display: none; }

/* 🔴 视口高度装不下整个筛选栏 → 不做 sticky，回到正常文档流、整页滚动。
   sticky + 内部滚动是反模式（滚轮被容器吃掉 / 底部被切 / 滚动链断裂），
   矮屏就让筛选栏跟着页面一起滚，内容自然完整可见。
   阈值 800：筛选栏自然高约 715px，加 top 14 + 余量，800 以上才容得下。
   若将来筛选栏内容显著变多，需同步上调此阈值。 */
@media (max-height: 800px) {
  .filters { position: static; max-height: none; overflow: visible; }
}
/* 2026-10-22 老杨反馈「下面的内容看不到」：窗口够高但筛选栏本身比视口高时，
   sticky + max-height 会把它切成「上半截可见 + 内部滚动」，而用户滚的是页面、不是栏内，
   于是预算滑杆和「重置筛选」永远在屏幕外。app.js 的 fitFilters() 量过实际高度后挂 .is-tall，
   这里直接放弃 sticky 与限高，让它跟页面一起滚。 */
.filters.is-tall { position: static; max-height: none; overflow: visible; }

/* ===== 首页编辑层（2026-10-16 评测：枢纽页补导语 / 3 分钟速查表 / FAQ / 收录分级说明）=====
   只给首页用；本轮之前首页除了筛选器和卡片什么都没有。 */
.hub-editor {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px; margin: 16px 0; box-shadow: var(--shadow);
}
/* 🔴 编辑层注入点（</header> 之后）在 .wrap 外面，必须自带容器，否则没有居中与左右留白 */
.hub-wrap { margin: 18px auto 0; }
.hub-wrap .hub-editor { margin: 0 0 4px; }
.hub-editor h2 { margin: 18px 0 10px; font-size: 18px; }
.hub-editor h2:first-of-type { margin-top: 4px; }
.hub-editor p { font-size: 14px; line-height: 1.85; }
.hub-editor .note { font-size: 12.5px; color: var(--muted); }
/* 首页静态学校索引（2026-10-16）：服务端生成的纯文字目录，不依赖 JS */
.hub-idx-wrap { margin: 10px 0 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.hub-idx-wrap > summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--brand); padding: 6px 0; }
.hub-idx-wrap > summary:hover { text-decoration: underline; }
.hub-idx-city { margin: 12px 0 2px; }
.hub-idx-city h3 { font-size: 13.5px; margin: 0 0 4px; color: var(--muted); font-weight: 700; }
ul.hub-idx { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 3px 14px; }
ul.hub-idx li { font-size: 13.5px; line-height: 1.7; }
ul.hub-idx a { color: var(--brand); text-decoration: none; }
ul.hub-idx a:hover { text-decoration: underline; text-underline-offset: 2px; }
ul.hub-idx .hp-p { color: var(--muted); font-size: 12px; margin-left: 2px; }
.tbl-scroll { overflow-x: auto; }
table.hubtbl { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
table.hubtbl th, table.hubtbl td { border-bottom: 1px solid var(--line); padding: 9px 8px; text-align: left; vertical-align: top; }
table.hubtbl th { background: #f8fafc; font-size: 12.5px; color: var(--muted); font-weight: 600; }
table.hubtbl td.hp-price { white-space: nowrap; font-weight: 600; color: var(--good); }
.hp-p { font-size: 11.5px; color: var(--muted); }
/* 折叠（手风琴）样式已抽到 css/faq.css，本文件顶部用 @import 复用 —— 唯一实现在那边，
   这里不再保留副本，避免两份各改各的（2026-10-21 老杨定规）。 */

/* 学校页「一分钟速览」数据条已于 2026-10-21 下线（老杨：信息本页都有，读起来也不清楚），
   样式一并删除，别留空壳。 */
@media (max-width: 820px) {
  table.hubtbl { font-size: 12px; }
  .hub-editor { padding: 14px; }
}

/* ===== 首页「资料最全的 8 所」精选区（2026-10-17 拆列表页后新增）=====
   全量 108 张卡片已搬到 /ph/schools/；首页这里只留 8 张「有结论」的极简卡，
   一张卡三行（校名 / 定位 / 价格）+ 一个出口，高度约 110px，不是原来的 378px 大卡。 */
.hub-featured {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px 16px; margin: 18px 0;
}
.hub-featured h2 { font-size: 18px; margin: 0 0 6px; }
.hub-featured .note { margin: 0 0 12px; }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
/* 精选卡与下方速查表之间的桥（2026-10-17）：一句「不合适就往下看」，不是第二个出口按钮 ——
   所以做成小字行、链接可点但不着色块，避免和底部「全部 108 所」大按钮抢注意力。 */
.pick-jump { margin: -4px 0 10px; font-size: 13px; color: #64748b; }
.pick-jump a { color: #1d4ed8; text-decoration: underline; text-underline-offset: 2px; }
.pick-jump a:hover { color: #1e40af; }
.pick {
  display: flex; flex-direction: column; gap: 3px;
  border: 1px solid #e2e8f0; border-radius: 10px; padding: 11px 13px;
  background: #f8fafc; text-decoration: none; color: inherit;
  transition: border-color .15s, background .15s;
}
.pick:hover { border-color: #93c5fd; background: #f0f7ff; }
.pick-n { font-size: 14.5px; font-weight: 700; color: var(--brand); line-height: 1.45; }
/* 一句话结论（2026-10-17）：九张卡原来只有「名字 / 城市·体系·管理 / 价格」，
   等于把「推荐」做回了「名录」。这行是差异化卖点，取自 linkTag 原文（可溯源，不是我们写的评价）。 */
.pick-t { font-size: 12.5px; color: #334155; line-height: 1.5; }
.pick-m { font-size: 12px; color: #64748b; }
.pick-p { font-size: 13.5px; font-weight: 700; color: #047857; margin-top: 2px; }
/* 「看这所 →」已删（2026-10-17 老杨：整张卡就是 <a>，卡内再挂一个同义提示是多余的） */
.pick-all {
  display: block; margin-top: 14px; text-align: center;
  background: #fff; color: var(--brand); font-weight: 700; font-size: 14.5px;
  border: 1.5px solid var(--brand);
  border-radius: 10px; padding: 10px 16px; text-decoration: none;
}
.pick-all:hover { background: var(--brand-soft); color: var(--brand); }
.pick-s { font-size: 11.5px; color: #64748b; }
/* 打卡人数（2026-10-22）：首页卡上的「有 N 人打卡」，来自 /ph/buddy/ 的统计快照。
   放在卖点下面、城市信息上面——它是热度信号，不是学校属性，所以用绿色小徽标而不是当卖点写。 */
.pick-b {
  display: inline-block; align-self: flex-start;
  font-size: 11.5px; line-height: 1.5; color: #047857;
  background: #ecfdf5; border: 1px solid #a7f3d0;
  border-radius: 999px; padding: 0 7px;
}

/* 首页原有的「这个库是怎么建的」独立折叠条 2026-10-21 已并入 FAQ 第一条，
   .hub-kcalib 样式随块删除（块没了，样式留着只会在下次改版时被误用）。 */

/* ===== 全站目录（按城市 / 按需求 / 攻略 / 工具）=====
   🔴 2026-10-21：本块的全部样式（本体 / 标签行 / 按钮 / 搜索）已搬进 css/hubnav.css，
   这里只留 @import。改样式去 hubnav.css，别在本文件里找。
   原本埋在页面最底部（`<!-- layout-end -->` 之后），实测没人滚到那儿；
   2026-10-17 老杨定：挪到 Hero 正下方，「比顶部那排导航有用」。
   宽度对齐正文块（1100），改由 class 控制样式——原来是四行 inline style，改不动也统一不了。 */
/* ===== 按钮层级：全站只有一种主色（2026-10-17）=====
   老杨转的设计评测：「红、绿、紫、橙、深灰、青至少六种主色按钮同页竞争」。
   确实——AI 卡紫 #7c3aed、测算器橙 #d97706、比校深灰 #475569、结伴青 #0e7490、
   目录块红 #b91c1c / 绿 #15803d，六个实心色块抢同一个视觉层级，用户看不出「先点哪个」。
   规矩定下来：**一个页面只有一个实心主行动**，颜色一律 = --brand（导航 CTA 也是它，语义统一）；
   其余动作全部降级成描边（.btn-line）或不带底色（.btn-quiet）。
   新增按钮时先问：它在「实心 → 描边 → 纯文字」三层里属于哪一层，别再开新颜色。 */
.btn-solid {
  display: inline-block; padding: 10px 18px; border-radius: 9px;
  background: var(--brand); color: #fff; font-weight: 700; font-size: 14px;
  border: 1.5px solid var(--brand); line-height: 1.5;
}
.btn-solid:hover { background: #0b5f75; border-color: #0b5f75; color: #fff; }
.btn-line {
  display: inline-block; padding: 8.5px 16.5px; border-radius: 9px;
  background: #fff; color: var(--brand); font-weight: 700; font-size: 14px;
  border: 1.5px solid var(--brand); line-height: 1.5; margin-left: 8px;
}
.btn-line:hover { background: var(--brand-soft); color: var(--brand); }
.btn-quiet {
  display: inline-block; padding: 8.5px 4px; color: var(--muted);
  font-weight: 600; font-size: 13.5px; line-height: 1.5; margin-left: 12px;
  border-bottom: 1px dashed #cbd5e1;
}
.btn-quiet:hover { color: var(--brand); border-bottom-color: var(--brand); }
@media (max-width: 560px) {
  .btn-line, .btn-quiet { margin-left: 0; margin-top: 8px; }
}

/* ===== 首页轻量化分组标签导航（.tagnav / .tg-*）2026-10-21 搬到 css/hubnav.css =====
   cost / buddy / cities 三个手写页也要用同一份，样式不再只活在本文件里。 */

/* ===== 首页两个「参考类」模块的折叠外壳（2026-10-21 老杨：默认收起，减少滚动疲劳）=====
   标题就是一行浅色引导语，展开后内容原样；不用卡片、不加粗，避免又抢 AI 模块的焦点。 */
.foldmod { border: 0; margin: 0 0 14px; }
/* 展开后紧贴标题条：内层 section 自己带 16–18px 上边距，不清掉会在灰条和卡片之间留一道缝。
   同时清掉卡片的上圆角与上边框 —— 留着的话浅蓝条底部左右各露一个白色弧角（老杨截图红框）。 */
.foldmod[open] > section {
  margin-top: 0;
  border-top-left-radius: 0; border-top-right-radius: 0; border-top-width: 0;
}
.foldmod > summary {
  /* 右内边距与区块的 20px 对齐（2026-10-22 老杨：箭头没排整齐）：
     原来 16px，箭头比同页 FAQ 的箭头往右多 4px，一屏里箭头不在一条竖线上。 */
  list-style: none; cursor: pointer; padding: 13px 20px;
  background: #f5f7fa; border: 1px solid var(--line); border-radius: 10px;
  font-size: 14px; font-weight: 400; color: #334155; line-height: 1.6;
}
.foldmod > summary::-webkit-details-marker { display: none; }
.foldmod > summary::marker { content: ""; }
.foldmod > summary:hover { color: var(--brand); border-color: #a5f3fc; background: #ecfeff; }
/* 🔴 展开时两条必须拼成一个整块（2026-10-21 老杨红框指出）：
   原来 summary 底部是直角、下面 .hub-featured 14px / .hub-editor 12px 的上圆角露在外面，
   接缝左右各被啃掉一个白色弧角；卡片的上边框还会跟 summary 的底边框叠成两条线。
   现在：summary 只留上圆角、去掉底边框；内容卡片去掉上圆角与上边框，两块严丝合缝。
   左右内边距同时对齐 20px（卡片本来就是 20px），展开时文字不会横跳 4px。 */
.foldmod[open] > summary {
  border-radius: 10px 10px 0 0; background: #ecfeff; border-color: #a5f3fc; color: var(--brand);
  border-bottom-width: 0; padding-left: 20px; padding-right: 20px;
}
/* 模块折叠：文字居左、箭头贴右（与手机端开关、FAQ 的贴右口径一致），
   箭头用全站统一的 .fold-ar，不再用 ▾ 字符。summary 里的文字是裸文本节点，
   flex 下会成为一个匿名 item，所以靠箭头的 margin-left:auto 把它推到头。 */
.foldmod > summary { display: flex; align-items: center; gap: 6px; }
.foldmod > summary .fold-ar { flex: 0 0 auto; margin-left: auto; }

/* 次要折叠入口（2026-10-22）：首页「先看这 9 所」和「按你的情况挑」并排时长得一样，
   用户会犹豫点哪个。这里把后者降级 —— 无底色、无边框、小一号、箭头也细一号，
   视觉上只剩一个主按钮，内容一个字没少。 */
.foldmod.fold-lite { margin-bottom: 10px; }
.foldmod.fold-lite > summary {
  background: #fbfcfd; border-color: transparent; padding: 9px 20px;
  font-size: 13.5px; color: #475569;
}
.foldmod.fold-lite > summary:hover { background: #f5f7fa; border-color: var(--line); color: var(--brand); }
.foldmod.fold-lite[open] > summary {
  background: transparent; border-color: transparent; color: var(--brand);
  padding-left: 4px; padding-right: 4px;
}
.foldmod.fold-lite[open] > section { border: 1px solid var(--line); border-radius: 10px; margin-top: 6px; }

/* ===== 首页两个模块折叠：改成与「常见问题」同一套长相（2026-10-22 老杨）=====
   原来这两条是浅灰卡片（圆角 + 边框 + 底色），跟下面 FAQ 的纯列表不是一套。
   现在统一成 FAQ 口径：无底色、无边框、无圆角，只有一条 1px 分隔线；
   字号 14.5px / 字重 600 / 行高 1.6 / padding 13px 0（窄屏 12px 0）。
   🔴 右侧 padding 必须是 0：箭头靠 margin-left:auto 顶到内容边线，
      这样才和 FAQ 的 .faq-ar、.fold-row 的箭头落在同一条竖线上。
      写 2px 或 20px 都会让首页箭头比 FAQ 偏左，一屏里箭头分档（2026-10-22 实测）。 */
/* 外框与下方「常见问题」卡片同一套（2026-10-22 老杨第二次定）：
   白底 + 1px #e3e8ef 边框 + 12px 圆角 + 同款阴影，数值全部照抄 #hub-faq（section.hub-editor），
   所以两块边框与 FAQ 卡的左右边线严丝合缝落在同一条竖线上。
   🔴 左右内边距不能加在 details 上：加在 details 会把展开后的 section 二次缩进。
      缩进只给 summary，靠它自己 20px（窄屏 14px）实现；1px 边框由父级提供，
      所以这里比 FAQ 卡内的 20px 少 1px 才对得上 —— 实测两边箭头同为 1063 / 454。 */
.foldmod.fold-plain {
  margin: 0 0 14px;
  background: #fff;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  overflow: hidden;
}
/* 🔴 分隔线用 background 渐变画，不用 ::after 伪元素（2026-10-22 老杨手机截图：
   卡片底部一条十几像素的灰带）。原因：iOS Safari 对 flex 容器里绝对定位的伪元素，
   会把 height 按 align-items: stretch 处理，1px 线被拉成一条灰带。
   渐变的 background-size 是绝对值，不参与 flex 布局，所有浏览器表现一致。
   ⚠️ hover / [open] 必须显式重设这个 background：.foldmod > summary:hover 和
   .foldmod[open] > summary 都会把 background 改成浅青色（background 简写会把
   background-image 一并清掉），不覆盖的话线在悬停和展开时就消失了。
   所以抽成变量，三处统一引用。 */
.foldmod.fold-plain {
  --fp-line: linear-gradient(var(--line, #e3e8ef), var(--line, #e3e8ef)) no-repeat 20px 100% / calc(100% - 40px) 1px;
}
.foldmod.fold-plain > summary {
  background: var(--fp-line);
  border: 0; border-radius: 0;
  padding: 13px 20px; font-size: 14.5px; font-weight: 600; color: #0f172a;
  display: flex; align-items: flex-start; gap: 10px;
  /* 整像素行高，与 faq.css 的 .faq-list .faq > summary 同一口径（24px）；
     写 1.6 会得到 23.2px，箭头落在半像素上时粗时细。 */
  line-height: 24px;
}
.foldmod.fold-plain > summary:hover { background: var(--fp-line); border: 0; color: var(--brand); }
.foldmod.fold-plain[open] > summary {
  background: var(--fp-line);
  border: 0; border-radius: 0;
  padding-left: 20px; padding-right: 20px; color: var(--brand);
}
/* 展开后 section 自己带 28px 上内边距，不需要再补 margin-top。
   🔴 2026-10-22 老杨截图：蓝框下面多出一条线和一大片空白。
   section 的类名是 .hub-editor（自己带边框 + 阴影 + 26px 下边距），套在折叠卡里就成了「卡中卡」：
   阴影底边看着像第二条线，26px 下边距又叠上外层 34px 内边距。
   外框归 .fold-plain 管，内层这块把边框/阴影/底色/下边距全部让给外层。 */
.foldmod.fold-plain > section {
  border: 0; border-radius: 0; margin: 0;
  background: transparent; box-shadow: none;
}
.foldmod.fold-plain > summary .fold-ar { flex: 0 0 auto; margin: 5px 0 0 auto; }
@media (max-width: 640px) {
  /* 手机端定位方式必须跟 #hub-faq 的 FAQ 行完全一致：align-items:center + 箭头 margin 0。
     原来这里用 flex-start + margin-top:4px，跟 FAQ 差 0.3px 的垂直相位，
     抗锯齿下箭头一深一浅，看着就是「大小不一样」（2026-10-22 老杨截图指出）。 */
  .foldmod.fold-plain {
    --fp-line: linear-gradient(var(--line, #e3e8ef), var(--line, #e3e8ef)) no-repeat 14px 100% / calc(100% - 28px) 1px;
  }
  .foldmod.fold-plain > summary {
    font-size: 14px; padding: 12px 14px; line-height: 22px; align-items: center;
  }
  .foldmod.fold-plain[open] > summary { padding-left: 14px; padding-right: 14px; }
  .foldmod.fold-plain > summary .fold-ar { margin-top: 0; }
}

/* ===== 页内引导条 .qa-entry（2026-10-20 老杨定：全站统一）=====
   模板：/ph/cost/。只做一件事——把看完这页的人送去下一步，不做第二个导航。
   位置铁律（2026-10-22 三改，最终版）：**放进「常见问题」卡片的内部末尾**，
   排在最后一条问题下面，和问题列表之间一条细线隔开。不是卡片外面另起一块。
   实现统一走 tools/_inject_qa_entry.js，别手写。
   首页 index.html 不挂这条（首页自己已有 AI / 情报板 / 问答入口）。
   宽度取 --page-inner（920），与 .hubjump / 正文同宽。 */
/* 🔴 2026-10-22 老杨：视觉向首页 .faq-more 看齐——原来那版浅青底 + 边框 + 圆角
   像一块广告条，压在 FAQ 卡片下面很跳。现在是「一条分隔线 + 一句灰字」，
   和问题列表连成一体，读者不会觉得又插了一个模块。两份样式必须保持同源。 */
.qa-entry {
  max-width: var(--page-inner); margin: 14px auto 0; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.75; color: #64748b;
}
/* 万一它成了卡片里的第一块（无 FAQ 的页面兜底走 footer 时可能出现），不画那条线 */
.card > .qa-entry:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.qa-entry .qe-lead { color: #64748b; }
.qa-entry a { color: var(--brand); font-weight: 600; text-decoration: none; }
.qa-entry a:hover { text-decoration: underline; }
@media (max-width: 640px) { .qa-entry { margin-top: 12px; padding-top: 10px; font-size: 12.5px; } }

/* ===== 手机端目录块折叠（.is-foldable）2026-10-21 搬到 css/hubnav.css ===== */

/* ===== 首页顶部导航条：已整体下线（2026-10-21 老杨）=====
   原来这里是一条 fixed 横条（品牌名 + 3 分钟选校 / 游学顾问 / 费用测算 / 找搭子），
   滚过 Hero 才浮现。老杨判断：Hero 正下方已经有按用途分组的全站目录，
   这条横条属于同一批入口的第二份拷贝，删掉不损失任何路径。
   页面结构与滚动脚本同步移除，这里不留空壳规则。 */

/* ===== Hero 数据墙（2026-10-17）=====
   原来四个数字是一条 13px 的流水句（「108所收录学校 11个城市…」），
   用户扫一眼抓不住。改成四块玻璃卡：数字 24px/800，标签 12.5px。 */
.hero .stat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.hero .stat div {
  font-size: 12.5px; line-height: 1.35; padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  display: flex; flex-direction: column; justify-content: flex-start;
}
.hero .stat b { font-size: 24px; font-weight: 800; display: block; line-height: 1.15; letter-spacing: -.5px; }
/* 标签必须一行：四格等宽，标签一旦折行就把该格拉高，四个数字的视觉基线全乱。
   极小屏放不下时以省略号收尾，别换行。 */
.hero .stat .st-lb { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 新鲜度小字（2026-10-17）：紧跟数据条，不占一格 —— 它是一条注脚，不该和四个数字抢同一层级。
   颜色用 78% 白，压在深色 Hero 上刚好可读又不跳。 */
.hero .stat-note { margin: 10px 0 0; font-size: 12.5px; color: rgba(255,255,255,.78); }
.hero .stat-note b { color: #fff; font-weight: 600; white-space: nowrap; }
@media (max-width: 700px) { .hero .stat { grid-template-columns: repeat(2, 1fr); } }

/* ===== 3 分钟表的价格列（2026-10-17）=====
   价格敏感用户要一眼看到底价：数字加粗放大，「≈¥」「起」降为辅助小字。
   ⚠️ 结构与 index.html 底部重算脚本的 innerHTML 必须一致，否则脚本一跑结构就没了。 */
.hp-price b { font-size: 17px; font-weight: 800; color: var(--good); letter-spacing: -.3px; }
.hp-price .hp-ap { font-size: 11.5px; color: #6b7280; }
.hp-price .hp-from { font-size: 11px; color: #6b7280; margin-left: 3px; }

/* ===== 「同规则全部 N 所」就地展开（2026-10-17）=====
   替代原先那句并不存在的「点表头右侧的规则说明」。服务端直出 <details>，零 JS。 */
.rule-more { margin-top: 10px; }
/* 2026-10-23 老杨：原写法是虚线下划线 + padding/等值负 margin 做 hover 呼吸边，
   放在页面级（不在卡片里）时负 margin 把开头两个字拖出容器裁掉，看着又贴边又突兀。
   改成全站统一的浅青 pill：一眼是按钮、不贴边、hover 加深。 */
.rule-more summary {
  cursor: pointer; list-style: none; display: inline-block; font-size: 12.5px;
  color: var(--brand); background: var(--brand-soft);
  border: 1px solid rgba(14, 116, 144, .18); border-radius: 999px;
  padding: 4px 12px; line-height: 1.5; white-space: nowrap;
}
.rule-more summary::-webkit-details-marker { display: none; }
/* 折叠态给一个 ▾、展开态给 ▴：这行文字是「可点」的，纯靠底色不够显眼 */
.rule-more summary::after { content: " ▾"; font-size: 10px; }
.rule-more[open] summary::after { content: " ▴"; }
/* 2026-10-17 老杨：hover 明确「这里能点」——pill 底色再深一档 */
.rule-more summary:hover { background: #ccfbf1; }
.rule-more[open] summary { margin-bottom: 8px; }
.rule-more ul {
  margin: 0; padding: 8px 10px; list-style: none; background: #f8fafc;
  border: 1px solid var(--line); border-radius: 8px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 1px 12px;
}
.rule-more li { font-size: 12px; line-height: 1.75; display: flex; justify-content: space-between; gap: 8px; }
.rule-more .rm-p { color: #6b7280; font-size: 11.5px; white-space: nowrap; }
/* 展开块末尾的就地「收起」（gen-pages 的 ruleMore）：只给手机。
   手机展开「75 所」约 830px，summary 早已滑出屏幕，块尾必须留一个出口。 */
.rm-close { display: none; }
@media (max-width: 700px) {
  .rule-more[open] .rm-close {
    display: inline-block; margin: 8px 0 2px; padding: 6px 14px; font: inherit; font-size: 12px;
    color: var(--brand); background: #fff; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  }
}
/* `.rm-rest`（「其余 N 所…这里只列前 18 所」）随全量渲染一起去掉，样式已删 */

/* ===== 速查表下方的 AI 出口（2026-10-17）=====
   AI 选校是「最强功能」却排在第 3 屏之后；复杂场景（带娃 + 考雅思 + 短假）在表里找不到对应行，
   就地给一个出口，位置成本为零。
   2026-10-23 老杨：原来是浅蓝底 + 左色条的告示牌，比上面的速查表还扎眼，把眼球抢走了。
   降级为一行灰色补充说明，只留链接保持品牌色 —— 位置不变、能点，但不再压过正文。 */
.hub-aihint {
  margin: 14px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--muted);
  padding: 0; background: none; border: 0;
}
.hub-aihint a { color: var(--brand); font-weight: 600; }

/* 展开区的宿主行：把「同规则全部 N 所」放到整表宽的独立 <tr> 里，
   否则挤在 570px 的说明列中，18 所会排成 3 个窄列、校名全部折行、一行撑高近一屏。 */
.hubtbl tr.rule-row > td { padding: 0 8px 10px; border-bottom: 1px solid var(--line); }
.hubtbl tr.rule-row .rule-more { margin-top: 0; }
.hubtbl tr.rule-row .rule-more ul { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.hubtbl tr.rule-row .rule-more li { min-width: 0; }
.hubtbl tr.rule-row .rule-more li > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 「≈¥」和「起」不该跟着数字一起加粗（td.hp-price 是 font-weight:600） */
.hp-price .hp-ap, .hp-price .hp-from { font-weight: 400; }

/* 展开列表：校名允许折行（截断成「BECI 语言学校（City 校区…」会丢信息），
   但价格仍不折、靠右，列宽 200 起，18 所横排 5-6 列。 */
.hubtbl tr.rule-row .rule-more ul { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 14px; }
.hubtbl tr.rule-row .rule-more li { line-height: 1.55; align-items: baseline; }
.hubtbl tr.rule-row .rule-more li > a { white-space: normal; overflow: visible; text-overflow: clip; }
/* 第一列表头/首列：给足宽度并禁止折行 —— 「带孩子（亲子/少儿）」在 150px 会被压成两行 */
table.hubtbl th:first-child { width: 172px; }
table.hubtbl td:first-child { white-space: nowrap; }
@media (max-width: 700px) {
  table.hubtbl th:first-child { width: auto; }
  table.hubtbl td:first-child { white-space: normal; }
}

/* 「同规则全部 N 所」这条 summary 在视觉上必须归属**上一行**：
   把上一行的下边框去掉、把边框挪到展开宿主行的末尾，否则 summary 会落在分隔线下方，
   读者会以为它是下一行的标题。
   2026-10-17 老杨：「这个可以往上再移一行」—— 上一行 td 的 padding-bottom(9) + 本行 padding-top(1)
   原来给了 10px 空档，summary 像独立浮着的一行。压到 2px，它就贴着上面那行的底边，
   视觉上归到上一行里去（表格结构不变，展开仍横跨整表宽，不牺牲 18 所的排版）。 */
.hubtbl tr.has-more > td { border-bottom: 0; padding-bottom: 2px; }
.hubtbl tr.rule-row > td { border-bottom: 1px solid var(--line); padding: 0 8px 9px; }

/* ===== 手机端速查表修正（2026-10-17）=====
   4 列在 419px 里不会触发 .tbl-scroll 的横滑（表格没有最小宽度），
   结果列被压扁、说明文字挤成竖条。给最小宽度让它老实横滑（与 citytbl 同一套做法）。
   （原来这里还有一条「顶栏 CTA 手机端 sticky right:0」规则，2026-10-21 CTA 挪走后已失效，一并删掉。） */
@media (max-width: 700px) {
  table.hubtbl { min-width: 640px; }
  /* 「同规则全部 75 所」手机端（2026-10-17 实测）：
     速查表 min-width 640、.tbl-scroll 可视区只有 305 —— 不管排 2 列还是 3 列，
     第二列起的部分都永远在横滑区外。用户点开只会看到 37 行，会以为「说有 75 所、只给了 37 所」。
     正解是把名单收窄到可视区宽度、改单列纵向：75 行约 1400px，但**一眼能数完**，不用左右滑。
     93 = 视口 390 − 可视区 305 + 单元格左内边距 8（页面 padding 40 + 卡片 padding 34 + 边框 11 + td 8 的实测值）。
     ⚠️ 以后调页面/卡片 padding，这个数要跟着量一遍；块尾的「收起 ▴」就是为这 1400px 准备的。
     ⚠️ 选择器必须带 `table.`：前面那条桌面规则写的是 `.hubtbl tr.rule-row .rule-more ul`，
     少一个元素选择器、特异性低一级，所以才压得住它。加新规则时照抄这个前缀。 */
  table.hubtbl tr.rule-row .rule-more ul {
    grid-template-columns: 1fr;
    gap: 0;
    width: calc(100vw - 93px);
    max-width: 100%;
  }
}

/* 速查表「先看这三所」列：校名与价格必须同行，否则在窄容器下第一行会掉下来，
   视觉上跟后面几行参差不齐（实测 880px 内容宽时必现）。 */
table.hubtbl td:nth-child(2) { white-space: nowrap; }
table.hubtbl td:nth-child(2) .hp-p { margin-left: 2px; }
@media (max-width: 700px) { table.hubtbl td:nth-child(2) { white-space: normal; } }

/* ===== 首页「已经能用 / 还没做」两栏（2026-10-17 设计评测）=====
   原来是 8 条正文竖排，实测要滚两屏多，第 5 条之后基本没人看。
   改左右两栏后，两项数量对比（5 项 / 3 项）一眼可见，高度砍掉约一半。
   文字未删——「0 条实名评价」「0 张实拍图」是这块最值钱的部分，只调结构和字号。 */
.trust { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 26px; margin-top: 8px; }
.trust-h { font-size: 13.5px; font-weight: 700; margin: 0 0 7px; letter-spacing: .2px; }
.trust-h span { font-weight: 600; opacity: .72; }
.trust-h.ok { color: #047857; }
.trust-h.no { color: #b45309; }
.trust-col ul { margin: 0; padding-left: 17px; }
.trust-col li { font-size: 13px; line-height: 1.65; color: #334155; margin-bottom: 7px; }
.trust-col li b { color: #0f172a; }
@media (max-width: 820px) { .trust { grid-template-columns: 1fr; gap: 6px; } }

/* ===== 首页情报板引流 Banner（2026-10-20）=====
   替掉原来「结伴游学：按同校同期帮你拉群」那块小卡片。左文案 + 右实时案例 + 大按钮，
   案例由 /ph/api/buddy/public 现取，静态部分只有标题、副标题和按钮，爬虫照常读得到。 */
.bb-banner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px 26px; align-items: center;
  /* 外框与「常见问题」卡、两个 module 卡统一（2026-10-22 老杨：全站卡片外框一致）：
     1px var(--line) + 12px 圆角，原来这里是自己一套的 1px #bae6fd + 14px。
     背景渐变与内部配色保持原样，只换壳。 */
  border: 1px solid var(--line); border-radius: 12px; padding: 20px 20px; margin: 18px 0;
  background: linear-gradient(120deg, #ecfeff 0%, #eff6ff 55%, #f0fdf4 100%); box-shadow: var(--shadow); }
.bb-banner .kicker { color: #0e7490; }
.bb-banner h2 { margin: 4px 0 6px; font-size: 19px; line-height: 1.4; color: #0f172a; }
.bb-sub { font-size: 13.5px; color: #334155; margin: 0 0 8px; line-height: 1.6; }
.bb-stat { font-size: 13px; color: #0e7490; font-weight: 700; margin: 0; }
.bb-stat b { font-size: 18px; color: #0d9488; }
.bb-right { background: rgba(255,255,255,.8); border: 1px solid #cffafe; border-radius: 12px; padding: 12px 14px; }
.bb-cases { list-style: none; margin: 0 0 10px; padding: 0; }
/* 2026-10-21：城市段固定、右边「校名 + 个人信息」自适应 —— 长校名折行时，
   第二行从校名起点开始（老杨指定），不会顶到行首、也不会吊在城市名下面。 */
.bb-cases li { display: flex; align-items: baseline; gap: 4px; font-size: 13px; color: #1f2937; line-height: 1.6; padding: 5px 0; border-bottom: 1px dashed #e2e8f0; }
.bb-city { flex: 0 0 auto; white-space: nowrap; }
/* 2026-10-21：不管宽度够不够，个人信息一律另起一行、左边缘与校名对齐 —— 三条卡片形态统一。
   用纵向 flex 而不是靠自然折行，短校名（CPILS / CIA）也不会和 QQ 那条排得参差不齐。 */
.bb-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.bb-cases li:last-child { border-bottom: 0; }
.bb-cases a { color: #0e7490; font-weight: 600; text-decoration: none; border-bottom: 1px solid #bae6fd; }
.bb-cases a:hover { color: #155e75; border-bottom-color: #0e7490; }
/* 括号里的「女 / 23–27 岁 / 2027 年 4 月出发」当成一个整体：放不下就整段换行，不会被拆成两半；
   字号调小半档、压成灰字，让校名是这一行最先被看到的。 */
/* 个人信息：小半档字号 + 灰字，与校名区分；行内外都不再靠 margin 制造间距。 */
.bb-who { display: inline-block; color: #64748b; font-weight: 400; font-size: 12.5px; max-width: 100%; }
.bb-case-empty { color: #94a3b8; }
.bb-btn { display: block; text-align: center; background: #0e7490; color: #fff; font-weight: 700;
  font-size: 14.5px; padding: 11px 16px; border-radius: 10px; text-decoration: none; }
.bb-btn:hover { background: #155e75; }
@media (max-width: 820px) {
  .bb-banner { grid-template-columns: 1fr; gap: 14px; padding: 16px 14px 18px; }
  .bb-banner h2 { font-size: 17.5px; }
}

/* ===== 首页减负（2026-10-20 老杨：一眼只看数据、表格、按钮）=====
   ① 速查表「筛选逻辑」列默认收起，只留一个极小链接；
   ② FAQ 答案只留前两句，补充说明收进二级折叠；
   ③ 建设进度压成一行大字，清单收进折叠；
   ④ section 上下留白加大到 30-40px，H2 下方统一 12px。 */

/* ① 速查表：筛选逻辑 */
.hubtbl td.why-cell { vertical-align: top; width: 112px; padding-right: 4px; }
.hubtbl details.why { display: inline-block; }
.hubtbl details.why > summary {
  font-size: 11.5px; color: #2563eb; cursor: pointer; list-style: none;
  border-bottom: 1px dashed #93c5fd; white-space: nowrap; display: inline-block;
}
.hubtbl details.why > summary::-webkit-details-marker { display: none; }
.hubtbl details.why > summary::after { content: "▾"; font-size: 9px; margin-left: 3px; }
.hubtbl details.why[open] > summary::after { content: "▴"; }
.hubtbl details.why > summary:hover { color: #1d4ed8; }
.hubtbl details.why > p {
  font-size: 12px; line-height: 1.65; color: #475569; margin: 6px 0 0;
  padding: 8px 10px; background: #f8fafc; border: 1px solid var(--line); border-radius: 8px;
}

/* ② FAQ：答案已按句数收口，不再有二级折叠（2026-10-20 老杨：多此一举）*/
/* ③ 建设进度：一行大字 */
.progress { padding-top: 26px; padding-bottom: 26px; }
.progress .prog-h { font-size: 19px; margin: 0 0 10px; letter-spacing: .2px; }
.progress .prog-h b { color: var(--brand); font-size: 22px; }
/* 轻量折叠（首页「资料完整度怎么算的」这类）：箭头改用全站统一的折线标记 .fold-ar，
   原来是在 summary 上挂 ▾ ▴ 字符，形状和 FAQ 的折线箭头不是一套（2026-10-21 老杨：都套成同一套）。 */
.fold > summary {
  font-size: 13px; color: #2563eb; cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 5px;
  border-bottom: 1px dashed #93c5fd; padding-bottom: 1px;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover { color: #1d4ed8; }
.fold[open] > summary { margin-bottom: 10px; }
/* 轻量折叠「整行版」（2026-10-22 老杨：箭头没排整齐）：
   上面 .fold 的 summary 是 inline-flex，宽度只到文字末尾，箭头就跟在文字后面 ——
   首页「这个顺序是怎么排的」「4 周全包怎么算的」两行只有 137/148px 宽，箭头孤零零
   停在卡片左边，和上下 FAQ 贴右的箭头对不上，一屏里箭头东一个西一个。
   这里给文字套 .fold-t（虚线只画在文字下面），summary 撑满整行，箭头用 margin-left:auto 顶到最右。
   🔴 只作用于 .fold-row，别的 .fold 用法（cost / buddy / blog 那些页）不受影响。 */
.fold-row > summary {
  display: flex; align-items: center; gap: 6px; width: 100%;
  border-bottom: 0; padding-bottom: 0;
  /* 整像素行高：这里继承 body 的 1.6 × 13px = 20.8px，同样会让箭头落在半像素上，
     跟同页 FAQ 的箭头一粗一细（2026-10-22 老杨）。21px 是 13px 字号的整数近似。 */
  line-height: 21px;
}
.fold-row > summary .fold-t {
  border-bottom: 1px dashed #93c5fd; padding-bottom: 1px; min-width: 0;
}
.fold-row > summary .fold-ar { flex: 0 0 auto; margin-left: auto; }
/* 卡片版折叠块里那两行轻量折叠（「这个顺序是怎么排的」「4 周全包怎么算的」）：
   它们活在 section 内，而 details 新加的 1px 边框让 section 内容窄了 1px，
   箭头因此比同页 FAQ 的箭头往左偏 1px。这里补回来，让整列落在同一条竖线（2026-10-22 实测）。 */
.foldmod.fold-plain .fold-row > summary .fold-ar { margin-right: -1px; }

/* ④ 呼吸感：只加**上下**留白，左右 padding 保持原值——2026-10-20 第一次改时
   写成 padding:30px 0 34px，把 .hub-editor / .hub-featured 原有的 20px 左右内边距清零，
   正文直接贴到卡片边框上（老杨当场截图「样式改坏了」）。左右必须留在原处。 */
/* 左右内边距 22 → 20：与「常见问题」卡（section.hub-editor 的 20px）对齐，
   三张卡和 FAQ 卡的文字左边缘落在同一条竖线上（2026-10-22 老杨：外框统一）。 */
section.block { padding: 30px 20px 34px; margin: 26px 0; }
section.hub-editor { padding: 30px 20px 34px; margin: 26px 0; }
section.hub-featured { padding: 28px 20px 26px; margin: 26px 0; }
section.block h2, section.hub-editor > h2, section.hub-featured > h2 { margin-bottom: 14px; }
section.block h2 + .note, section.hub-editor > h2 + .note { margin-top: 0; }
/* 🔴 2026-10-22 老杨：「常见问题」标题跟下面第一条问题贴太近，要空开。
   14px 对 18px 的标题来说几乎等于没有间距，加到 22px；只动首页那张 FAQ 卡，
   不碰 section.block / hub-featured —— 那两张卡的 h2 下面跟的是正文段落，本来就不挤。 */
#hub-faq > h2 { margin-bottom: 22px; }
@media (max-width: 640px) {
  /* 手机端箭头统一落到内容边线（2026-10-22 老杨：箭头没排整齐）：
     折叠模块的灰条右内边距 20→14、顶部目录块的折叠按钮 14→0，
     与 FAQ 行、正文卡片的箭头对齐到同一条竖线。 */
  .foldmod > summary { padding-right: 14px; }
  /* 轻量折叠行：summary 本来就是 width:100%，箭头贴着内容边线走，
     再加右内边距只会把箭头往左推 —— 2026-10-22 实测加 15px 时箭头落在 439，
     去掉才回到 454，与同一屏 FAQ 的箭头同一条竖线。这条旧补偿已删。 */
  .hubjump.is-foldable .hj-fold-btn { padding-right: 0; }
  section.block { padding: 24px 14px 26px; }
  section.hub-editor { padding: 24px 14px 26px; }
  section.hub-featured { padding: 22px 14px 22px; }
}

/* 精选区折叠链接与上下两行的间距（2026-10-20）：原来贴着 note 和「不合适就往下看」，
   两条链接挤成一片。给 4px/6px 的呼吸，视觉上仍是一组。 */
.hub-featured .fold > summary { margin: 2px 0 8px; }
.hub-featured .pick-jump { margin-top: 0; }

/* 精选 9 所：手机端单列 + 只留校名与价格（2026-10-20 老杨转评测）
   原来手机上是 2 列 auto-fill，240px 最小宽被压到 160 上下，校名换两行、字号也跟着挤。
   单列后每张卡横过来排：左边校名、右边价格，把「课型/城市/系统」两行隐掉。 */
@media (max-width: 640px) {
  .picks { grid-template-columns: 1fr; gap: 8px; }
  .pick { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; row-gap: 2px; padding: 10px 12px; }
  .pick .pick-n { font-size: 14px; grid-column: 1; }
  .pick .pick-p { grid-column: 2; grid-row: 1; margin: 0; font-size: 14px; white-space: nowrap; }
  .pick .pick-t,
  .pick .pick-b,
  .pick .pick-m,
  .pick .pick-s { display: none; }
}

/* FAQ 末尾出口链接（2026-10-20）：跟着答案走，不抢折叠标题，所以用小字 + 虚线下划线 */
.faqs .faq .faq-a .faq-link {
  font-size: 13px; color: #1d4ed8; text-decoration: none;
  border-bottom: 1px dashed #93c5fd; white-space: nowrap;
}
.faqs .faq .faq-a .faq-link:hover { color: #1e40af; border-bottom-color: #1d4ed8; }

/* ===== 移动端专项适配（≤768px，2026-10-21）=====
   前提：PC 端样式、排版、文案一律不动。所以全部规则集中在这一块，
   选择器外层全带 @media (max-width:768px) 与更高的 .wrap > 前缀，
   PC 宽度下这些行连解析结果都不会变。
   对应五条要求：①三张主卡片留白 ②打卡列表行距与断词 ③FAQ 行高与箭头居中
   ④相邻模块间距统一 ⑤搜索框加高（触控 44px 以上）。 */
@media (max-width: 768px) {
  /* ④ 统一模块间距：原来 block 26px、打卡卡 18px、说明段 24px，手机上疏密不一。
     现在相邻卡片/区块一律 16px 起步，视觉节奏拉平。 */
  .wrap > section.block,
  .wrap > section.hub-editor,
  .wrap > section.hub-featured,
  .wrap > section.bb-banner,
  .wrap > .seo-lead-fold { margin: 16px 0; }

  /* ① 三张主卡片：上下内边距加大（左右沿用原值，动了会贴边） */
  .wrap > section.block { padding-top: 28px; padding-bottom: 30px; }
  .wrap > section.block p,
  .wrap > section.block li { line-height: 1.6; }
  /* 卡片末尾那个按钮离卡片底边再留一点，别贴着边框 */
  .wrap > section.block > a:last-child { margin-bottom: 4px; }

  /* ① 学员打卡卡（它用的是 section.bb-banner，不是 .block） */
  .wrap > section.bb-banner { padding-top: 24px; padding-bottom: 26px; }
  .bb-sub { line-height: 1.6; }
  .bb-right { padding-bottom: 16px; }
  .bb-btn { margin-bottom: 2px; }

  /* ② 打卡预览列表：行高 1.6 + 条目之间加间距，长校名允许断词 */
  .bb-cases li { line-height: 1.6; padding: 7px 0; }
  .bb-cases li + li { margin-top: 3px; }
  /* 长校名换行（2026-10-21 老杨第二次提：`QQ English 海滨校区（Beach Front）` 断成
     「…（Beach」/「Front）」，最后一行只剩一个词，视觉割裂）。
     原写法 word-break: break-word 只在「放不下且无空格」时才断词，对有空格的长校名没有帮助。
     改两层：
       ① overflow-wrap: anywhere —— 允许在任意字符处断，行末空间不够装一整个词时把它挤上去；
       ② text-wrap: pretty —— Chrome 的孤词规避，能让两行长度自动均衡，不再出现「Front）」独占一行。
     两者不冲突：pretty 管整段怎么分，anywhere 兜住极端窄屏。 */
  .bb-cases a,
  .bb-who { overflow-wrap: anywhere; word-break: normal; text-wrap: pretty; }

  /* ③ FAQ：问题行高整数 22px；右侧箭头垂直居中（原来 margin-top:5px 贴顶，
     多行问题时更明显，手机上容易看成「挂在第一行」）
     🔴 行高不能写 1.6（2026-10-22 老杨：箭头大小看着不一样）：
        1.6 × 14px = 22.4px，每行累加 0.4px 小数，箭头盒的 y 坐标在整数与半像素之间
        来回漂，抗锯齿一档深一档浅 —— 屏幕上看就是「有的箭头粗、有的细」，
        五个一循环（实测暗像素 31 与 22 交替）。整数行高后每行高度 46px，相位不再漂。
        这条在 faq.css 的手机媒体查询里也有同口径设置，两处必须一起改，否则这里会覆盖那边。 */
  .faq-list .faq > summary { line-height: 22px; align-items: center; }
  .faq-list .faq > summary > .faq-ar { margin-top: 0; }

  /* ⑤ 搜索输入框与按钮加高：13px/7px 内边距在手机上只有 38px 高，
     点起来费劲，提到 44px 左右（iOS 触控最小可点区的通行值） */
  .hj-search input { padding: 10px 12px; font-size: 14px; }
  .hj-search button { padding: 10px 16px; font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * P0-3（2026-10-22）回到顶部悬浮按钮
 * 风格与全站 .ph-adv-btn 顾问浮窗一致（同品牌色、同胶囊形、同投影），
 * 固定在右下角、叠在顾问钮上方；向下滚动 >300px 才出现（由 app.js 切换 .show）。 */
.ph-backtop {
  position: fixed;
  left: calc(50% + 496px);   /* 与顾问钮同锚：内容区右线外侧，不压内容 */
  bottom: 84px;              /* 顾问钮 24 + 高 48 + 间距 12 */
  z-index: 9989;             /* 低于顾问钮 9990，高于卡片 */
  display: flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 16px;
  border: 0; border-radius: 22px;
  background: var(--brand, #0e7490); color: #fff;
  font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(14, 116, 144, .28), 0 1px 3px rgba(16, 24, 40, .12);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.ph-backtop.show { opacity: 1; visibility: visible; transform: none; }
.ph-backtop:hover { filter: brightness(1.05); }
.ph-backtop svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* 打开筛选覆盖层时让位（与顾问钮同逻辑） */
body.f-open .ph-backtop { display: none; }
/* 窄屏：跟随顾问钮改贴视口右边 */
@media (max-width: 1168px) {
  .ph-backtop { left: auto; right: 16px; }
}
@media (max-width: 600px) {
  .ph-backtop {
    right: 14px;
    bottom: calc(120px + env(safe-area-inset-bottom, 0px));  /* 顾问钮 64+46+10 之上 */
    height: 42px; padding: 0 15px;
  }
}