/* =========================================================================
   湖南单招升学网 · 设计系统 (Design System)
   定位：教育板块 · 权威 / 克制 / 可信
   用法：所有页面统一引用本文件，组件类名即单一事实源。
   ========================================================================= */

/* ---------- 设计 Token → 已抽出到 tokens.css（唯一色源） ----------
   :root 里的颜色/字号/间距 token 不再写在本文件；前台、后台 admin.css、独立页
   404.html 一律从 tokens.css 取，避免"同一品牌两种蓝"。 */
@import url("tokens.css");

/* ---------- 基础重置 ---------- */
*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
/* 防 iOS Safari 聚焦 input 时自动放大 viewport */
input,select,textarea{font-size:16px}
a{text-decoration:none; color:inherit}
img{max-width:100%; display:block}
/* 注：这里原本还有 img[loading="lazy"]{opacity:0} + .loaded{opacity:1} 做「懒加载淡入」，
   但全站没有任何脚本会给图片补 .loaded 类，导致凡写了 loading="lazy" 的图永久不可见
   （院校档案封面图曾因此整块空白）。原生 loading="lazy" 已足够，不再用透明度做淡入。 */
button{font-family:inherit; cursor:pointer; border:none; background:none}
ul{list-style:none}

/* ---------- 图标（assets/icons.svg sprite）----------
   全站唯一图标源。此前区块标题用 emoji（🏫📜🏆📈），emoji 由操作系统渲染，
   跨平台形态不一（部分环境是灰方块），等于把品牌视觉外包给用户系统。
   用法：<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg#ico-school"></use></svg>
   颜色继承文字色（currentColor），所以在深色底上自动变白，无需额外类。 */
.ico{width:var(--ico); height:var(--ico); flex:0 0 auto; display:inline-block; vertical-align:-.24em; color:inherit}
.ico--sm{width:16px; height:16px}
.ico--lg{width:24px; height:24px}
.ico--xl{width:28px; height:28px}
/* 区块标题里的图标用品牌蓝，与文字层级拉开 */
.section-head__title .ico,.card__title .ico{color:var(--brand)}

/* ---------- 布局容器 ---------- */
.container{max-width:var(--container); margin:0 auto; padding:0 var(--s4)}
.section{padding:var(--s8) 0}
.section--tight{padding:var(--s6) 0}

/* ---------- 顶部通告栏 ---------- */
.topbar{background:var(--brand-dark); color:#dbe6f5; font-size:var(--fs-xs); padding:var(--s2) 0}
.topbar__inner{display:flex; justify-content:space-between; align-items:center; gap:var(--s4); flex-wrap:wrap}
.topbar__tag{display:inline-block; background:rgba(255,255,255,.14); color:#fff; font-weight:700; padding:2px 8px; border-radius:999px; margin-right:var(--s2)}
.topbar__tag b{color:#FFD54F; font-weight:800; font-size:1.1em}  /* 倒计时数字：亮黄高亮，深蓝底上清晰可读 */
.topbar a{color:#dbe6f5; text-decoration:underline; text-underline-offset:2px}

/* ---------- 导航栏 ---------- */
.navbar{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; box-shadow:var(--shadow-sm)}
.navbar__inner{display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:var(--s5)}
.brand{display:flex; align-items:center; gap:var(--s3); cursor:pointer; flex:0 0 auto}
.brand__mark{width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; box-shadow:0 4px 10px rgba(31,95,168,.25)}
/* 真 LOGO（2026-09-17 起替换「湘」字块）。素材是白底方形图，页头/页脚都是白底，
   所以不能保留上面那条的底板渐变与蓝色投影 —— 否则白底图外会多出一圈蓝晕方块。 */
img.brand__mark{background:none; box-shadow:none; border-radius:0; object-fit:contain; display:block}
/* 品牌名与英文副名必须显式声明为块级堆叠：
   两者都是 <span>（默认 inline），原先靠"标记里的换行 + flex 压缩"才偶然折成两行。
   换成组件渲染后没有了那个换行，就变成"湖南单招升学网Hunan Vocational Gateway"
   挤在一行且没有间隔。这里把它变成设计系统的确定性行为，不再依赖标记巧合。 */
.brand__name{display:block; font-size:18px; font-weight:800; color:var(--ink); line-height:1.15}
.brand__sub{display:block; font-size:11px; color:var(--muted); font-weight:600; letter-spacing:.04em}
.nav{display:flex; align-items:center; gap:var(--s1); min-width:0}
.nav__link{white-space:nowrap; flex:0 0 auto}
.nav__link{padding:8px 14px; border-radius:var(--r-sm); font-size:var(--fs-body); font-weight:600; color:var(--muted); transition:all .15s}
.nav__link:hover{background:var(--surface-alt); color:var(--brand)}
.nav__link--active{background:var(--brand-soft); color:var(--brand)}
.navbar__actions{display:flex; align-items:center; gap:var(--s2)}
.menu-toggle{display:none; width:40px; height:40px; border-radius:var(--r-sm); align-items:center; justify-content:center}
.menu-toggle span{display:block; width:20px; height:2px; background:var(--ink); position:relative}
.menu-toggle span:before,.menu-toggle span:after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink)}
.menu-toggle span:before{top:-6px} .menu-toggle span:after{top:6px}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 18px; border-radius:var(--r-sm); font-size:var(--fs-body); font-weight:700; transition:all .15s; white-space:nowrap}
.btn--primary{background:var(--brand); color:#fff}
.btn--primary:hover{background:var(--brand-dark)}
.btn--secondary{background:var(--surface); border:1px solid var(--line-strong); color:var(--text)}
.btn--secondary:hover{border-color:var(--brand); color:var(--brand)}
.btn--ghost{color:var(--brand); font-weight:700; padding:8px 12px}
.btn--ghost:hover{background:var(--brand-soft)}
.btn--block{width:100%}
.btn--sm{padding:7px 13px; font-size:var(--fs-sm)}

/* ---------- Hero ---------- */
.hero{background:var(--grad-brand); color:#fff; padding:var(--hero-pad)}
.hero--amber{background:linear-gradient(160deg,#92400e 0%, var(--warn) 100%)}
.hero__tag{display:inline-block; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); font-size:var(--fs-sm); font-weight:600; padding:4px 14px; border-radius:999px; margin-bottom:var(--s4)}
.hero__title{font-size:var(--fs-display); font-weight:800; letter-spacing:-.02em; line-height:1.25; max-width:760px}
.hero__desc{font-size:16px; color:#d6e4f5; max-width:640px; margin:var(--s4) 0 var(--s5)}
.searchbar{display:flex; gap:var(--s2); max-width:680px; background:var(--surface); padding:6px; border-radius:var(--r-md); box-shadow:0 12px 30px rgba(0,0,0,.18)}
.searchbar__input{flex:1; border:none; outline:none; padding:12px 16px; font-size:var(--fs-body); color:var(--ink); border-radius:var(--r-sm)}
.searchbar__btn{background:var(--brand); color:#fff; padding:12px 24px; border-radius:var(--r-sm); font-weight:700; font-size:var(--fs-body)}
.searchbar__btn:hover{background:var(--brand-dark)}
.hero--short{padding:var(--hero-pad-short)}

/* 栏目页 Hero 版式契约（2026-09-17 收敛）
   收敛前：11 个自定义 hero 类各自声明内边距（46/24 ~ 72/64，7 档）与标题字号
           （22/24/25/26/30/32/34/38px，8 档），页面切换时呼吸感与视觉重量都在跳变。
   收敛后：纵向节奏只有两档、标题字号只有两档，全部由 token 驱动；
           页面内联只允许保留渐变与装饰层。新增栏目页请直接复用本规则，
           不要在页面 <style> 里再写 padding / h1 font-size。 */
.tier-hero,.ai-hero,.est-hero,.know-hero,.ag-hero,.ct-hero,.prv-hero,.rec-hero,
.policy-hero,.sd-hero,.hero-video{padding:var(--hero-pad-short)}
.home-hero{padding:var(--hero-pad)}
.home-hero h1{font-size:var(--fs-display)}
.tier-hero h1,.ai-hero h1,.est-hero h1,.know-hero h1,.ag-hero h1,.ct-hero h1,
.prv-hero h1,.rec-hero h1,.policy-hero h1,.sd-hero h1,.hero-video h1{font-size:var(--fs-h1)}

/* ---------- Tabs ---------- */
.tabs{display:flex; gap:var(--s2); border-bottom:1px solid var(--line); margin-bottom:var(--s4); flex-wrap:wrap}
.tab{background:none; border:none; padding:10px 16px; font-size:var(--fs-body); font-weight:700; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px}
.tab:hover{color:var(--brand)}
.tab--active{color:var(--brand); border-bottom-color:var(--brand)}

/* ---------- Chip ---------- */
.chip{background:var(--surface-alt); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; font-size:var(--fs-sm); color:var(--text)}

/* ---------- 标签描边变体 ---------- */
.tag--outline{background:transparent; border:1px solid var(--line-strong)}

/* ---------- 区块标题 ---------- */
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s4); margin-bottom:var(--s5); flex-wrap:wrap}
.section-head__title{font-size:var(--fs-h2); font-weight:800; color:var(--ink); letter-spacing:-.01em}
.section-head__desc{font-size:var(--fs-sm); color:var(--muted); margin-top:var(--s2)}
.link-more{font-size:var(--fs-sm); font-weight:700; color:var(--brand)}

/* ---------- 栅格 ---------- */
.grid{display:grid; gap:var(--s4)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ---------- 卡片 ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); box-shadow:var(--shadow)}
.card__head{display:flex; align-items:center; gap:var(--s3); border-bottom:1px solid var(--line); padding-bottom:var(--s3); margin-bottom:var(--s4)}
.card__title{font-size:var(--fs-h3); font-weight:800; color:var(--ink)}
.card__bar{width:4px; height:18px; border-radius:2px; background:var(--brand)}
.card__bar--green{background:var(--accent)}

/* ---------- 院校卡（全站唯一实现，渲染在 assets/js/school-card.js）----------
   收敛前：这份样式有 12 个"分层变体"类（cover--red/blue/green/purple/sky/gray 与
   school-card--tier1/tierblue/…），其中 4 个（amber/gold/emerald/cornflower、
   tiergold/tieremerald/tiercornflower）从来没人用过；在用的 6 个里颜色全是蓝色系，
   却叫 red/green/purple —— 名字描述颜色、颜色又不符名。这 6 组又被 index.html
   在页内内联重写了一遍，两边数值还不同（设计系统写 #6FB0F2，首页写 #3E84F0）。
   现在：卡片只输出 data-tier="t1..t6"，颜色由下面这一处映射到 tokens 的 --cover-N。 */
.school-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s; display:flex; flex-direction:column}
.school-card:hover{transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.08)}
.school-card__cover{padding:var(--s4); color:#fff; background:var(--grad-brand-diag)}
.school-card__type{background:var(--grad-brand-diag); color:#fff}
.school-card__name{font-size:var(--fs-h3); font-weight:800; margin:0; line-height:1.35; min-width:0}
.school-card__head{display:flex; align-items:center; gap:10px; margin-top:10px; min-width:0}
.school-card__summary{font-size:var(--fs-sm); color:rgba(255,255,255,.85); margin-top:4px}
.school-card__body{padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); flex:1}
.school-card__majors{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.school-card__metrics{display:flex; justify-content:space-between; background:var(--surface-alt); border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--s3)}
.school-card__metrics b{display:block; font-size:var(--fs-sm2)}
.school-card__foot{margin-top:auto; padding-top:var(--s3); border-top:1px solid var(--line); display:flex; justify-content:space-between; font-size:var(--fs-xs); color:var(--faint)}
.school-card__foot .link-more{font-size:var(--fs-xs)}
.school-card__city{font-size:var(--fs-xs); color:rgba(255,255,255,.75)}

/* 分档 → 封面色阶（序号越小越靠前，封面越深）。
   目前只有首页的横条卡（--compact）启用分档配色：它是"热门公办标杆"的短名单，
   分档是这一区块的主要信息；院校库的 66 张大卡保持统一品牌渐变封面，
   避免 66 块不同深浅的蓝铺满整页、反而看不出差别。 */
.school-card--compact[data-tier="t1"] .school-card__cover{background:var(--cover-1)}
.school-card--compact[data-tier="t2"] .school-card__cover{background:var(--cover-2)}
.school-card--compact[data-tier="t3"] .school-card__cover{background:var(--cover-3)}
.school-card--compact[data-tier="t4"] .school-card__cover{background:var(--cover-4)}
.school-card--compact[data-tier="t5"] .school-card__cover{background:var(--cover-5)}
.school-card--compact[data-tier="t6"] .school-card__cover{background:var(--cover-6)}

/* 横条变体（首页「热门公办标杆」）：纯入口，只留校名，不显示指标与专业 */
.school-card--compact{flex-direction:row; align-items:center; min-height:auto; border-radius:var(--r-md)}
.school-card--compact .school-card__cover{flex:1; padding:14px 18px; display:flex; align-items:center; gap:12px; margin:0; border-radius:var(--r-md)}
.school-card--compact .school-card__cover > *{margin:0}
.school-card--compact .school-card__name{font-size:var(--fs-body); font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0}
.school-card--compact .tag{font-size:11px; padding:2px 8px; letter-spacing:.02em; flex-shrink:0}
.school-card--compact .sc-arrow{font-size:17px; opacity:.5; flex-shrink:0; transition:transform .15s}
.school-card--compact:hover .sc-arrow{transform:translateX(3px); opacity:.9}
.school-card--compact .school-card__city{flex-shrink:0}
.school-card--compact .school-card__body,
.school-card--compact .school-card__metrics,
.school-card--compact .school-card__foot{display:none}

/* ---------- 校徽位（校名特征字 + 真校徽图，全站唯一实现）----------
   渲染在 assets/js/school-badge.js。两种坐法：默认坐在白卡上（.sc-badge），
   --on-cover 坐在深色院校卡封面上（白底 + 投影，否则徽标会被蓝底吃掉）。 */
.sc-badge{position:relative; flex:0 0 auto; width:38px; height:38px; border-radius:10px; background:var(--brand-soft); display:flex; align-items:center; justify-content:center; overflow:hidden}
.sc-badge__char{font-size:17px; font-weight:800; color:var(--brand-dark); line-height:1}
.sc-badge img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left center}
.sc-badge img.is-square{object-fit:contain; padding:2px}
.sc-badge img.is-right{object-position:right center}
.sc-badge img.is-center{object-position:center center}
.sc-badge img.is-top{object-position:center 22%}
.sc-badge--on-cover{width:42px; height:42px; border-radius:11px; background:rgba(255,255,255,.96); box-shadow:0 2px 8px rgba(13,42,92,.18)}
.sc-badge--on-cover img.is-square{padding:3px}
@media (max-width:560px){
  .sc-badge--on-cover{width:36px; height:36px; border-radius:9px}
  .sc-badge--on-cover .sc-badge__char{font-size:16px}
}

/* 专业标签：命中当前搜索词 / 王牌专业 / 剩余数量（颜色覆盖 .chip 默认灰底，
   必须排在本文件 .chip 之后才生效，两者同为一个类的特异性） */
.chip--flagship{background:var(--brand-soft); color:var(--brand); font-weight:600}
.chip--hit{background:var(--brand); color:#fff; font-weight:600}
.chip--more{font-size:11px; color:var(--muted)}

/* 培训机构卡片：暖橙色系指标 */
.school-card--agency .school-card__metrics{background:linear-gradient(135deg,#fff9ed,#fef3c7);border-color:#fde68a}
.school-card--agency .school-card__metrics b{color:var(--warn)}
.school-card--agency .school-card__foot{border-top-color:#fde68a}
.school-card--agency .school-card__foot .link-more{color:var(--warn)}

/* ---------- 标签 / Badge ---------- */
.tag{display:inline-block; font-size:var(--fs-xs); font-weight:700; padding:3px 9px; border-radius:999px; line-height:1.5}
.tag--blue{background:var(--brand-soft); color:var(--brand)}
.tag--green{background:var(--accent-soft); color:var(--accent)}
.tag--gray{background:var(--surface-alt); color:var(--muted); border:1px solid var(--line)}
/* 实底标签：用于蓝色渐变封面上的「公办 · 双高」等类型标签。
   原为 var(--accent) 绿底，压在蓝色渐变封面上过于冲突；
   改为白色胶囊 + 品牌深蓝字，与封面上白底校徽（.sc-badge--on-cover）同范式。 */
.tag--solid{background:rgba(255,255,255,.94); color:var(--brand-dark); box-shadow:0 1px 4px rgba(13,42,92,.16)}

/* ---------- 统计块 ---------- */
.stat-grid{display:grid; gap:var(--s3); grid-template-columns:repeat(4,1fr)}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s3) var(--s4); display:flex; align-items:center; gap:var(--s3); box-shadow:var(--shadow-sm); min-width:0; overflow:hidden}
.stat__icon{width:52px; height:44px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:var(--fs-body); flex:0 0 auto; letter-spacing:2px}
.stat__value{font-size:22px; font-weight:800; color:var(--ink); line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stat__value small{font-size:var(--fs-xs); font-weight:600; color:var(--faint)}
.stat__label{font-size:var(--fs-xs); color:var(--muted); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---------- 价值 / 功能块 ---------- */
.feature{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); box-shadow:var(--shadow-sm)}
.feature__icon{width:52px; height:42px; border-radius:var(--r-md); background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; margin-bottom:var(--s3); font-weight:800; font-size:var(--fs-body); letter-spacing:2px}
.feature__title{font-size:var(--fs-h3); font-weight:800; color:var(--ink); margin-bottom:var(--s2)}
.feature__desc{font-size:var(--fs-sm); color:var(--muted)}

/* ---------- 表格 ---------- */
.table{width:100%; min-width:600px; border-collapse:collapse; font-size:var(--fs-sm)}
.table-wrap{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:var(--s4)}
.table th{background:var(--surface-alt); color:var(--muted); font-weight:700; text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); white-space:nowrap}
.table td{padding:12px; border-bottom:1px solid var(--line); color:var(--text)}
.table tbody tr:hover{background:var(--surface-alt)}
.table .num{font-weight:800; color:var(--brand)}

/* ---------- 表单 ---------- */
.form-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); box-shadow:var(--shadow)}
.field{margin-bottom:var(--s4)}
.field__label{display:block; font-size:var(--fs-sm); font-weight:700; color:var(--ink); margin-bottom:var(--s2)}
.input,.select{width:100%; border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:10px 12px; font-size:var(--fs-body); color:var(--ink); background:var(--surface); outline:none; transition:border-color .15s}
.input:focus,.select:focus{border-color:var(--brand)}
.form-note{font-size:var(--fs-xs); color:var(--faint); margin-top:var(--s3)}

/* ---------- 提示块（说明 / 免责 / 数据口径） ---------- */
.notice{border-radius:var(--r-md); padding:var(--s3) var(--s4); font-size:var(--fs-sm); line-height:1.75; color:var(--text); border:1px solid var(--line); background:var(--surface)}
.notice b{color:var(--ink)}
.notice--info{background:var(--brand-soft); border-color:#cfe0f5; color:#2a4d7d}
.notice--info b{color:var(--brand-dark)}
.notice--warn{background:var(--warn-soft); border-color:#efdcb4; color:#7a5210}
.notice--warn b{color:var(--warn)}
@media (max-width:760px){.notice{padding:var(--s3); font-size:var(--fs-xs)}}

/* ---------- 页脚 ---------- */
.footer{background:var(--surface); border-top:1px solid var(--line); padding:var(--s7) 0 var(--s5); margin-top:var(--s8)}
.footer__inner{display:flex; justify-content:space-between; gap:var(--s5); flex-wrap:wrap}
.footer__links{display:flex; gap:var(--s5); flex-wrap:wrap}
.footer__col h4{font-size:var(--fs-sm); color:var(--ink); margin-bottom:var(--s3); font-weight:800}
.footer__col a{display:block; font-size:var(--fs-sm); color:var(--muted); padding:4px 0}
.footer__col a:hover{color:var(--brand)}
.footer__legal{margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--faint); text-align:center}

/* ---------- 家长课堂：分类筛选 + 文章卡 ---------- */
.chips{display:flex; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s5)}
.cat-chip{cursor:pointer; transition:all .15s}
.cat-chip small{opacity:.7; font-weight:600; margin-left:2px}
.cat-chip.is-active{background:var(--brand); color:#fff; border-color:var(--brand)}
.cat-chip.is-active small{opacity:.85}

/* ---------- 家长课堂：文章列表 ---------- */
.article-list{display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface)}
.article-list__item{display:flex; align-items:center; gap:var(--s4); padding:var(--s3) var(--s4); text-decoration:none; color:inherit; transition:background .12s; border-bottom:1px solid var(--line)}
.article-list__item:last-child{border-bottom:none}
.article-list__item:hover{background:var(--surface-alt)}
.article-list__item--pinned{background:rgba(236,153,34,.04)}
.article-list__item--pinned:hover{background:rgba(236,153,34,.08)}

/* 置顶标记 */
.badge-pin{display:inline-flex; align-items:center; background:var(--warn); color:#fff; font-size:11px; font-weight:700; padding:1px 8px; border-radius:999px; line-height:1.8; vertical-align:middle; letter-spacing:.02em}
.article-list__num{flex:0 0 32px; font-size:var(--fs-xs); font-weight:800; color:var(--faint); text-align:center; font-variant-numeric:tabular-nums}
.article-list__body{flex:1; min-width:0}
.article-list__title{font-size:var(--fs-base); font-weight:700; color:var(--ink); line-height:1.5; display:flex; align-items:center; gap:8px}
.article-list__title:hover{color:var(--brand)}
.article-list__summary{font-size:var(--fs-xs); color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.article-list__meta{flex:0 0 auto; display:flex; gap:var(--s3); align-items:center; font-size:var(--fs-xs); color:var(--faint); flex-shrink:0}

/* ---------- 文章详情 ---------- */
.article-detail{max-width:820px; margin:0 auto}
.article-detail__head{margin-bottom:var(--s4)}
.article-detail__title{font-size:var(--fs-display); font-weight:800; color:var(--ink); line-height:1.3; margin:var(--s3) 0}
.article-detail__meta{display:flex; gap:var(--s4); flex-wrap:wrap; font-size:var(--fs-sm); color:var(--muted)}
.article-cover{width:100%; border-radius:var(--r-md); margin-bottom:var(--s4)}
.article-detail__body{font-size:16px; line-height:1.8; color:var(--text)}
.article-detail__body h2{font-size:var(--fs-h3); font-weight:800; color:var(--ink); margin:var(--s5) 0 var(--s2); padding-left:10px; border-left:4px solid var(--brand)}
.article-detail__body p{margin-bottom:var(--s3)}
.article-detail__body ul{list-style:disc; padding-left:1.4em; margin-bottom:var(--s3)}
.article-detail__body ol{list-style:decimal; padding-left:1.4em; margin-bottom:var(--s3)}
.article-detail__body li{margin-bottom:8px}
.article-detail__body table{width:100%; margin-bottom:var(--s3)}
.article-detail__body b{color:var(--ink)}
.article-detail__note{margin-top:var(--s5); padding:var(--s3) var(--s4); background:var(--surface-alt); border:1px solid var(--line); border-radius:var(--r-sm); font-size:var(--fs-sm); color:var(--muted)}

/* ---------- GEO 可抽取块（一句话结论 / 要点 / 常见问题）----------
   由 tools/geo-enrich-articles.js 注入，既是给家长的速读区，也是给 AI 搜索引擎
   可整段摘走的事实块。必须默认展开、在静态 HTML 里可见 —— 纯 JS 折叠的 FAQ
   抓取器读不到，等于白做。改这里前先看 docs/GEO内容体检报告.html。 */
.article-detail__body .geo-brief{background:var(--brand-soft); border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:var(--r-md); padding:var(--s4); margin:0 0 var(--s5)}
.article-detail__body .geo-brief__lead{margin:0 0 var(--s3); font-size:16.5px; font-weight:600; line-height:1.75; color:var(--ink)}
.article-detail__body .geo-brief__points{margin:0; padding-left:1.3em; list-style:disc}
.article-detail__body .geo-brief__points li{margin-bottom:6px; font-size:var(--fs-body); line-height:1.75; color:var(--text)}
.article-detail__body .geo-faq{margin-top:var(--s6); padding:var(--s4); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md)}
.article-detail__body .geo-faq h2{font-size:var(--fs-h3); font-weight:800; color:var(--ink); margin:0 0 var(--s3); padding-left:10px; border-left:4px solid var(--brand)}
.article-detail__body .geo-faq h3{font-size:15.5px; font-weight:700; color:var(--ink); margin:var(--s4) 0 6px; padding:0; border-left:0}
.article-detail__body .geo-faq p{margin-bottom:6px; font-size:var(--fs-body); color:var(--text); line-height:1.8}
@media (max-width:760px){
  .article-detail__body .geo-brief, .article-detail__body .geo-faq{padding:14px}
  .article-detail__body .geo-brief__lead{font-size:15.5px}
}

/* 相关阅读 */
.related{margin-top:var(--s6)}
.related__title{font-size:var(--fs-h3); font-weight:800; color:var(--ink); margin-bottom:var(--s3); padding-left:10px; border-left:4px solid var(--brand)}
.related-item{display:flex; gap:var(--s3); align-items:baseline; padding:var(--s3) 0; border-bottom:1px solid var(--line)}
.related-item__cat{flex:0 0 auto; font-size:var(--fs-xs); color:var(--brand); font-weight:700}
.related-item__title{flex:1; color:var(--text)}
.related-item__title:hover{color:var(--brand)}
.related-item__date{flex:0 0 auto; font-size:var(--fs-xs); color:var(--faint)}

/* ---------- 浮动按钮（公众号 / 视频引流）---------- */
/* 统一基类：垂直或水平堆叠的圆角胶囊按钮组，固定右下角 */
.float-mp,.floating-cta{position:fixed;right:16px;z-index:50;display:flex;flex-direction:column;gap:8px}
.float-mp{bottom:90px}
.floating-cta{bottom:24px}
.float-mp a,.floating-cta a{display:flex;align-items:center;gap:6px;padding:10px 16px;border-radius:99px;font-weight:700;font-size:13px;box-shadow:0 4px 16px rgba(0,0,0,.15);text-decoration:none;color:#fff;transition:all .2s;min-height:44px}
.floating-cta a{padding:12px 20px;font-size:14px}
.float-mp a:hover,.floating-cta a:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.2)}
/* 变体：公众号蓝色 / 视频号橙红 / 视频引流橙黄边框 */
.float-mp .mp{background:linear-gradient(135deg,#3E7BD6,#57A0E0)}
.float-mp .vid{background:linear-gradient(135deg,#dc2626,#f59e0b)}
.float-mp--outline{position:fixed;right:16px;bottom:80px;z-index:50;background:#fff;border:1.5px solid #f59e0b;color:#92400e;font-size:13px;font-weight:600;padding:10px 14px;border-radius:14px;display:flex;align-items:center;gap:8px;box-shadow:0 6px 20px rgba(245,158,11,.25);cursor:pointer;text-decoration:none}
.float-mp--outline:hover{transform:translateY(-2px)}
/* 极小屏收小 */
@media (max-width:480px){
  .float-mp--outline{bottom:84px;right:10px;font-size:12px;padding:8px 12px}
}

/* ---------- 自适应（响应式） ---------- */
/* 平板（≤960）：4 列与统计降 2 列，3 列降 2 列，避免竖屏拥挤 */
@media (max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .article-list__meta{display:none}
}
/* 平板与窄屏（≤1024）：导航收进抽屉。
   原断点为 760px，导致 761–1023px 区间的 8 个导航项挤爆一行（品牌名被压成两行）。 */
@media (max-width:1024px){
  .nav{display:none; position:absolute; top:64px; left:0; right:0; background:var(--surface); flex-direction:column; align-items:stretch; padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); box-shadow:var(--shadow); overflow:visible}
  .nav.is-open{display:flex}
  .nav__link{padding:14px 12px; min-height:44px}
  .menu-toggle{display:flex}
}
/* 手机（≤760）：单列布局、保留登录入口 */
@media (max-width:760px){
  :root{--fs-display:27px; --fs-h2:20px; --fs-h1:24px; --hero-pad:44px 0 36px; --hero-pad-short:32px 0 28px}
  .brand__sub{display:none}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .article-list__item{flex-wrap:wrap; gap:var(--s2)}
  .article-list__num{display:none}
  .article-list__summary{display:none}
  .searchbar{flex-direction:column}
  .searchbar__btn{padding:14px; min-height:44px}
  .btn--sm{padding:10px 16px; min-height:40px}
  .school-card__metrics{flex-direction:column; gap:var(--s2)}
  .school-card__metrics > div{display:flex; justify-content:space-between; align-items:baseline}
  .section{padding:var(--s7) 0}
  .container{padding:0 var(--s3)}
}
/* 极小屏（≤480）：进一步收拢字号、导航高度与间距 */
@media (max-width:480px){
  :root{--fs-display:23px; --fs-h2:19px; --fs-h3:16px; --fs-body:14px}
  .navbar__inner{min-height:56px; gap:var(--s3)}
  .nav{top:56px}
  .brand__mark{width:36px; height:36px; font-size:18px}
  .brand__name{font-size:16px}
  .hero__desc{font-size:14px}
  .section{padding:var(--s6) 0}
  .footer__inner{flex-direction:column; gap:var(--s4)}
  .stat-grid{grid-template-columns:repeat(2,1fr); gap:var(--s3)}
  .stat__icon{width:44px; height:38px; font-size:13px}
  .stat__value{font-size:19px}
  /* topbar 极小屏：隐藏较长的「全省动态」，保留服务热线（2026-09-12 调整，原来是反过来的） */
  .topbar__inner{font-size:12px}
  .topbar__inner > div:first-child{display:none}
  /* 学校/机构卡 metrics 在极小屏横向排布 */
  .school-card__metrics{flex-direction:row; gap:var(--s3)}
  .school-card__metrics > div{flex:1}
  /* 表格超小屏横向滚动 */
  .table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .table-wrap .table{min-width:600px}
  /* 浮动按钮极小屏缩小 */
  .float-mp{bottom:80px; right:10px}
  .float-mp a{font-size:12px; padding:8px 12px}
}
/* 培训机构详情页响应式 */
@media (max-width:760px){
  .ag-stat{padding:14px 12px}
  .ag-stat__value{font-size:var(--fs-h3) !important}
  .ag-stat__label{font-size:11px}
  /* hero 4 数据卡 → 2x2 */
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important; gap:10px !important}
  /* step-card 4 列 → 2 列 */
  [style*="grid-template-columns:repeat(4,1fr)"][style*="step-card"]{grid-template-columns:repeat(2,1fr)}
  /* lead-form 2 列 → 1 列 */
  .lead-form > div[style*="grid-template-columns:repeat(2,1fr)"]{grid-template-columns:1fr !important}
  .lead-form{padding:22px 18px}
  /* timeline list */
  .timeline-list{padding:16px 18px}
  .timeline-list li{flex-wrap:wrap}
  .timeline-list li b{min-width:100%; margin-bottom:2px}
  .hero-video .sub{font-size:13px}
  .video-card{margin:20px 12px; padding:22px 18px}
  .mp-card{margin:20px 12px; padding:20px 16px}
  .mp-card .qr{width:120px; height:120px; font-size:38px}
  /* 浮动 CTA 收小 */
  .floating-cta{right:12px; bottom:20px}
  .floating-cta a{font-size:13px; padding:10px 16px}
}
@media (max-width:480px){
  .ag-stat__value{font-size:var(--fs-md) !important}
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important}
  .step-card{padding:18px 14px}
  .floating-cta{flex-direction:column-reverse; right:8px; bottom:16px; gap:6px}
}

/* =========================================================================
   响应式补强（不改变视觉风格）：
   原版断点 480/760/980 已存在，但 flex/grid 子项默认 min-width:auto
   会被不可压缩内容撑破视口。在 480px 以下统一加 min-width:0。
   仅作用于响应式断点，桌面/平板视觉零变化。
   ========================================================================= */
@media (max-width: 480px) {
  /* grid 子项：1fr 才能真正收缩 */
  .grid-2 > *, .grid-3 > *, .grid-4 > *,
  .split-layout > *, .policy-layout > * { min-width: 0; }

  /* flex 单项：允许被 flex-wrap 真正换行 */
  .policy-search { min-width: 0; }
  .policy-cats   { min-width: 0; }

  /* 原版 [style*=grid-template-columns:repeat(N,1fr)] 的属性选择器已在 760 断点切 2 列；
     480 断点确保单列。已在原版第 328 行覆盖，仅作防御。 */
  [style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; }
}

/* =========================================================================
   底部分享条压缩（section--compact 分享区，配合页内 inline padding:12px 0）
   ========================================================================= */
@media (max-width: 760px) {
  /* 手机端进一步收紧内边距（覆盖页内 inline 样式需 !important） */
  .section--compact .container { padding: 8px 0 !important; }
  /* 隐藏第二行说明文案，分享按钮与标题同行堆叠高度显著下降 */
  .section--compact .container > div:first-child > div:nth-child(2) { display: none; }
}