@charset "UTF-8";
/* ============================================================================
   鸣山机械 · 新闻资讯版块皮肤（Phase NEWS-DARK · 2026-09-24 全面改版）
   file: static/css/ms-news.css
   ----------------------------------------------------------------------------
   使用方：view/{pc,m}/list_news.html、view/{pc,m}/article_news.html 及 6 个组件
           （_news_top / _news_list / _news_geo / _news_picks / _news_kb）。

   ┌── 本次改版要解决的问题（客户原话）───────────────────────────────────
   │ 「新闻资讯这个版块，至今版面都还是白色背景色，还没搞过来，版面啊！重新设计！」
   │
   │ 根因：上一版（Phase Z）把资讯做成了「深蓝版头 + **纯白正文区**」的两段式。
   │       白底在那时是刻意的（.msn-page{background:#FFFFFF}），但它与全站
   │       深蓝体系（#061424）割裂 —— 点进资讯就像进了另一个网站；
   │       且全文件有 27 处硬编码 #fff / 5 处 #FFF / 15 处 rgba(255,255,255,·)，
   │       靠"改几处变量"救不回来，只能整份重写。
   │
   │ 改法：① 整页一条**连续深蓝渐变**（页头 #0B1E33 → 页脚 #061424），
   │         版头不再自带上色，杜绝"色阶断层"；
   │       ② 全部卡片改为深底半透明面（rgba(255,255,255,.04)）+ 冷蓝描边；
   │       ③ 版式重排为「置顶价值热文 → 属地标签索引 → 资讯列表 → 分类智能推荐」，
   │         侧栏补「液压缸知识干货」卡；
   │       ④ 覆盖 site.css 里所有浅色公共组件（.ms-prose / .ms-card / .ms-pcard /
   │          .ms-chip / .ms-badge-red / .ms-crumb）—— 否则正文会"白底黑字浮在深蓝上"。
   └──────────────────────────────────────────────────────────────────────

   【四条硬约束（都是本项目踩过的坑）】
   1. ⚠ 禁止把基础规则写进 @media —— 一旦落进媒体查询，桌面端整块**静默失效**，
      而用 grep 检查还是"全过"。本文件除末尾两段响应式覆盖外，
      所有规则的花括号深度必须为 0。
   2. ⚠ 页面禁止出现宽 ≥800px 的浅色大块。唯一允许的浅色是**内容图片本身**。
      深底上的可点文字一律用 --msn-link (#8FC4EC)；品牌红 #C81E2D 在深底只有
      2.97:1 对比度，**只做背景与描边，绝不做正文文字色**（角标小字用 #FF8089）。
   3. ⚠ .msn-pg 必须 flex-wrap:nowrap —— 移动端分页**单行不换行**是用户的硬性要求。
   4. ⚠ 加载顺序：site.css → ms-case.css → ms-form.css → **ms-news.css** → ms-sitemap.css
      → ms-contact.css。所以本文件覆盖 site.css 时用同权重即可（后出现者胜）；
      覆盖 .ms-prose 这类后代选择器时再叠一层 .msn-scope 提高权重。
   ========================================================================== */

/* ═══════════════════════════════ 0. 令牌 ═══════════════════════════════
   与 site.css / ms-case.css / ms-contact.css 同一套色板（唯一真源在 ms-case.css），
   本文件不引入第三个色相。所有 var() 都带兜底值：本文件某次没加载成功也不裸奔。 */
:root{
  --msn-ink:#061424;   --msn-ink2:#0B1E33;  --msn-ink3:#12293F;  --msn-ink4:#0E2438;
  --msn-brand:#C81E2D; --msn-brand2:#DF3543; --msn-brand-l:#FF8089;
  --msn-title:#EAF2FA;
  --msn-body:rgba(234,242,250,.78);
  --msn-mute:rgba(234,242,250,.50);
  --msn-line:rgba(122,168,214,.17);
  --msn-line2:rgba(122,168,214,.09);
  --msn-line-strong:rgba(122,168,214,.34);
  --msn-surface:rgba(255,255,255,.04);
  --msn-surface-h:rgba(255,255,255,.065);
  --msn-link:#8FC4EC;
  --msn-r:10px;
  --msn-shadow:0 2px 6px rgba(0,0,0,.28);
  --msn-shadow-h:0 18px 40px -22px rgba(0,0,0,.85);
  --msn-ease:cubic-bezier(.22,.61,.36,1);
}

/* 屏幕阅读器专用（视觉隐藏，SEO/A11y 可见） */
.msn-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ═════════════════ 1. 页面底：页头 → 正文 → 页脚 一条连续渐变 ═════════════════
   端点必须与相邻区块逐字相等，否则就是肉眼可见的接缝：
     0%   #0B1E33 = .ms-navbar / .ms-header 底色
     100% #061424 = footer 底色，也是 html,body 的底色（首帧防白闪的那一层）
   中间两档只为制造纵深，不改变端点。 */
main.msn-scope{
  background:linear-gradient(180deg,
    #0B1E33 0%,
    #0C2743 16%,
    #0A2038 46%,
    #08172A 76%,
    #061424 100%);
  color:var(--msn-body,#BEDBF2);
}
main.msn-scope ::selection{background:rgba(200,30,45,.35);color:#fff}

/* ═══════════════════════════════ 2. 版头 ═══════════════════════════════
   刻意**不再自带上色**（旧版 background:var(--msn-ink)）——
   它现在透明地坐在整页渐变上，与页头之间没有断层。 */
.msn-hero{position:relative;background:transparent;overflow:hidden;
  border-bottom:1px solid var(--msn-line,#0E2438)}
.msn-hero-glow{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(780px 320px at 8% -16%,rgba(62,123,176,.34),transparent 66%),
    radial-gradient(560px 280px at 96% 4%,rgba(200,30,45,.15),transparent 68%);
}
.msn-hero-in{position:relative;padding:34px 0 36px}
.msn-hero-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
/* 刊头小标签（编辑感，非模板风）：短红线 + 全大写字距 */
.msn-hero-kicker{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--msn-link,#8FC4EC)}
.msn-hero-kicker::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--msn-brand,#C81E2D)}
.msn-hero-h1{margin:13px 0 0;font-size:clamp(25px,2.6vw,34px);line-height:1.24;font-weight:800;
  color:var(--msn-title,#EAF2FA);letter-spacing:-.015em}
.msn-hero-sub{margin:13px 0 0;max-width:46rem;font-size:14.5px;line-height:1.9;color:rgba(234,242,250,.62)}

/* 版头数字（B 端"制造实力"质感：细竖线分隔 + 等宽数字） */
.msn-stats{display:flex;flex:0 0 auto;gap:0;padding:14px 4px 14px 26px;
  border-left:1px solid var(--msn-line,#12293F)}
.msn-stat{padding:0 22px;text-align:center;border-right:1px solid var(--msn-line2,#0E2438)}
.msn-stat:last-child{border-right:0;padding-right:4px}
.msn-stat b{display:block;font-size:26px;font-weight:800;line-height:1;color:var(--msn-title,#EAF2FA);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.msn-stat b em{font-size:13px;font-style:normal;font-weight:700;margin-left:1px;color:var(--msn-brand-l,#FF8089)}
.msn-stat span{display:block;margin-top:7px;font-size:12px;color:rgba(234,242,250,.45);white-space:nowrap}

/* 正文区：不再铺白，完全透明地坐在整页渐变上（这就是本次改版的核心一行） */
.msn-page{background:transparent}

/* ═══════════════════════════ 3. 栏目条（吸顶） ═══════════════════════════ */
.msn-tabs{position:sticky;top:76px;z-index:40;
  background:rgba(9,26,45,.90);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--msn-line,#12293F)}
.msn-tabs-in{display:flex;align-items:center;gap:10px;padding:13px 0}
.msn-chips{display:flex;align-items:center;gap:8px;flex:1;min-width:0;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.msn-chips::-webkit-scrollbar{display:none}
.msn-chip{display:inline-flex;align-items:center;flex:0 0 auto;height:36px;padding:0 17px;
  border:1px solid var(--msn-line,#12293F);border-radius:9999px;background:var(--msn-surface,rgba(255,255,255,.04));
  font-size:14px;font-weight:600;color:var(--msn-body,#BEDBF2);white-space:nowrap;
  transition:color .18s var(--msn-ease),border-color .18s var(--msn-ease),background-color .18s var(--msn-ease)}
.msn-chip:hover{border-color:var(--msn-line-strong,#235580);color:var(--msn-title,#EAF2FA);
  background:var(--msn-surface-h,rgba(255,255,255,.065))}
.msn-chip.is-on{background:var(--msn-brand,#C81E2D);border-color:var(--msn-brand,#C81E2D);color:#fff}
.msn-chip.is-on:hover{color:#fff;background:var(--msn-brand2,#DF3543)}
.msn-chips-hint{flex:0 0 auto;font-size:12.5px;color:var(--msn-mute,rgba(234,242,250,.5));white-space:nowrap}

/* ═══════════════════════════════ 4. 版心 ═══════════════════════════════ */
.msn-main{padding:32px 0 64px}
.msn-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:38px;align-items:start}
.msn-sec-hd{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.msn-sec-hd h2{margin:0;font-size:17px;font-weight:800;color:var(--msn-title,#EAF2FA);letter-spacing:-.01em}
.msn-sec-hd i{display:block;width:3px;height:15px;border-radius:2px;background:var(--msn-brand,#C81E2D)}
.msn-sec-hd span{margin-left:auto;font-size:12.5px;color:var(--msn-mute,rgba(234,242,250,.5))}
/* 模块头部的"查看全部"链接（深底上必须用冷蓝，品牌红对比度不够） */
.msn-sec-more{font-size:12.5px;font-weight:600;color:var(--msn-link,#8FC4EC)}
.msn-sec-more:hover{color:var(--msn-brand-l,#FF8089)}
/* 详情页里的分隔节（地区资讯 / 相关资讯等整段） */
.msn-art-sec{margin-top:34px;padding-top:26px;border-top:1px solid var(--msn-line,#12293F)}
/* 移动端整幅分段（跨满屏宽的那种） */
.msn-msec{padding:30px 0;border-top:1px solid var(--msn-line,#12293F)}
.msn-mh2{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:16px;
  font-weight:800;color:var(--msn-title,#EAF2FA)}
.msn-mh2 i{display:block;width:3px;height:16px;border-radius:2px;background:var(--msn-brand,#C81E2D)}
/* 列表面板盒（把 .msn-plist 装进一个深色边框盒里） */
.msn-plist-box{border:1px solid var(--msn-line,#12293F);border-radius:10px;overflow:hidden}
.msn-plist em{font-style:normal;font-size:12px;color:var(--msn-mute,rgba(234,242,250,.5));flex:0 0 auto}
/* 变体：纯文字两行（标题 + 日期），用于"相关资讯" */
.msn-plist--txt a{display:block;padding:13px 16px}
.msn-plist--txt a b{display:block;font-size:13.5px}
.msn-plist--txt a em{display:block;margin-top:6px;flex:none}
/* 变体：加大行内边距，用于"地区资讯" */
.msn-plist--lg a{padding:13px 16px}
.msn-plist--lg a b{font-size:14px}

/* ═════════════════════ 5. 组件一 · 置顶价值热文 ═════════════════════
   1.58 : 1 不对称栅格：等高对齐下大图与两张小卡视觉重量接近，
   左右 1:1 会显得呆板；略偏大图形成"主次分明"的编辑部质感。 */
.msn-top{display:grid;grid-template-columns:minmax(0,1.58fr) minmax(0,1fr);gap:18px;margin-bottom:28px}
.msn-lead{position:relative;display:block;border-radius:14px;overflow:hidden;
  background:var(--msn-ink3,#12293F);border:1px solid var(--msn-line,#12293F);
  box-shadow:var(--msn-shadow);transition:box-shadow .28s var(--msn-ease),border-color .28s var(--msn-ease)}
.msn-lead:hover{box-shadow:var(--msn-shadow-h);border-color:var(--msn-line-strong,#235580)}
.msn-lead-media{position:relative;display:block;aspect-ratio:16/9.4;overflow:hidden}
.msn-lead-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--msn-ease)}
.msn-lead:hover .msn-lead-media img{transform:scale(1.045)}
.msn-lead-shade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,20,36,0) 30%,rgba(6,20,36,.76) 72%,rgba(6,20,36,.96) 100%)}
.msn-lead-body{position:absolute;left:0;right:0;bottom:0;padding:22px 24px 20px}
.msn-lead-flags{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.msn-lead-t{margin:0;font-size:22px;line-height:1.36;font-weight:800;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.msn-lead-d{margin:9px 0 0;font-size:13.5px;line-height:1.75;color:rgba(234,242,250,.66);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.msn-lead-meta{display:flex;align-items:center;gap:16px;margin-top:13px;font-size:12.5px;color:rgba(234,242,250,.55)}
.msn-lead-meta em{display:inline-flex;align-items:center;gap:5px;font-style:normal}
.msn-lead-meta b{color:var(--msn-brand-l,#FF8089);font-weight:700;margin-left:auto;
  display:inline-flex;align-items:center;gap:5px}

.msn-side{display:grid;grid-template-rows:1fr 1fr;gap:18px}
.msn-scard{display:flex;gap:14px;padding:12px;border:1px solid var(--msn-line,#12293F);border-radius:14px;
  background:var(--msn-surface,rgba(255,255,255,.04));transition:border-color .2s,box-shadow .28s,background-color .2s}
.msn-scard:hover{border-color:var(--msn-line-strong,#235580);background:var(--msn-surface-h,rgba(255,255,255,.065));
  box-shadow:var(--msn-shadow-h)}
.msn-scard-media{flex:0 0 auto;width:132px;align-self:stretch;border-radius:8px;overflow:hidden;
  background:rgba(255,255,255,.05)}
.msn-scard-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--msn-ease)}
.msn-scard:hover .msn-scard-media img{transform:scale(1.05)}
.msn-scard-body{display:flex;flex-direction:column;min-width:0}
.msn-scard-t{margin:2px 0 0;font-size:14.5px;line-height:1.5;font-weight:700;color:var(--msn-title,#EAF2FA);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .18s}
.msn-scard:hover .msn-scard-t{color:var(--msn-brand-l,#FF8089)}
.msn-scard-meta{margin-top:auto;padding-top:8px;display:flex;align-items:center;gap:10px;
  font-size:12px;color:var(--msn-mute,rgba(234,242,250,.5))}

/* ═════════════════════ 6. 组件二 · 资讯列表 ═════════════════════ */
.msn-list{display:flex;flex-direction:column;gap:14px}
.msn-row{display:flex;gap:18px;padding:15px;border:1px solid var(--msn-line,#12293F);border-radius:14px;
  background:var(--msn-surface,rgba(255,255,255,.04));
  transition:border-color .2s,box-shadow .28s,transform .25s var(--msn-ease),background-color .2s}
.msn-row:hover{border-color:var(--msn-line-strong,#235580);box-shadow:var(--msn-shadow-h);
  transform:translateY(-2px);background:var(--msn-surface-h,rgba(255,255,255,.065))}
.msn-row-media{flex:0 0 auto;width:216px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.05);
  aspect-ratio:16/10}
.msn-row-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s var(--msn-ease)}
.msn-row:hover .msn-row-media img{transform:scale(1.05)}
.msn-row-body{display:flex;flex-direction:column;flex:1;min-width:0}
.msn-row-flags{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.msn-row-t{margin:0;font-size:16.5px;line-height:1.5;font-weight:700;color:var(--msn-title,#EAF2FA);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .18s}
.msn-row:hover .msn-row-t{color:var(--msn-brand-l,#FF8089)}
.msn-row-d{margin:8px 0 0;font-size:13.5px;line-height:1.8;color:var(--msn-body,rgba(234,242,250,.78));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.msn-row-meta{margin-top:auto;padding-top:11px;display:flex;align-items:center;gap:16px;
  font-size:12.5px;color:var(--msn-mute,rgba(234,242,250,.5))}
.msn-row-meta em{display:inline-flex;align-items:center;gap:5px;font-style:normal}
.msn-row-meta em svg{color:var(--msn-link,#8FC4EC);opacity:.75}
.msn-row-meta b{margin-left:auto;color:var(--msn-link,#8FC4EC);font-weight:700;
  display:inline-flex;align-items:center;gap:5px}
.msn-row-meta b svg{transition:transform .2s var(--msn-ease)}
.msn-row:hover .msn-row-meta b{color:var(--msn-brand-l,#FF8089)}
.msn-row:hover .msn-row-meta b svg{transform:translateX(3px)}

/* ═════════════════════ 7. 角标 / 属地标签 ═════════════════════
   深底上重新定色：不再用浅色块 + 深字，一律「半透明彩底 + 高亮字 + 细描边」。
   品牌红在深底只有 2.97:1，所以红底上的字一律用 --msn-brand-l (#FF8089)。 */
.msn-tag{display:inline-flex;align-items:center;gap:5px;height:23px;padding:0 9px;border-radius:5px;
  font-size:12px;font-weight:600;font-style:normal;white-space:nowrap;line-height:1;
  border:1px solid transparent}
.msn-tag--cat{background:rgba(200,30,45,.16);color:var(--msn-brand-l,#FF8089);border-color:rgba(200,30,45,.32)}
.msn-tag--top{background:var(--msn-brand,#C81E2D);color:#fff;border-color:var(--msn-brand,#C81E2D)}
.msn-tag--rec{background:rgba(247,174,51,.15);color:#F5C77E;border-color:rgba(247,174,51,.30)}
.msn-tag--geo{background:rgba(62,123,176,.20);color:var(--msn-link,#8FC4EC);border-color:rgba(62,123,176,.34)}
.msn-tag--geo svg{flex:0 0 auto}
/* .msn-tag--ai 已于 2026-09-25 删除：4 个模板里的 6 处引用同步移除，
   全站再无引用点（改前已 grep 确认），留着只会让人误以为前台还有 AI 角标。 */

/* ═════════════════════ 8. 组件三 · 属地标签索引 ═════════════════════ */
.msn-geo{border:1px solid var(--msn-line,#12293F);border-radius:12px;
  background:var(--msn-surface,rgba(255,255,255,.04));margin-bottom:24px;overflow:hidden}
.msn-geo-hd{display:flex;align-items:center;gap:10px;padding:13px 18px;
  border-bottom:1px solid var(--msn-line2,#0E2438);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012))}
.msn-geo-hd h2{margin:0;font-size:14.5px;font-weight:800;color:var(--msn-title,#EAF2FA)}
.msn-geo-hd i{display:block;width:3px;height:14px;border-radius:2px;background:var(--msn-brand,#C81E2D)}
.msn-geo-hd span{margin-left:auto;font-size:12px;color:var(--msn-mute,rgba(234,242,250,.5))}
.msn-geo-body{display:flex;flex-wrap:wrap;gap:8px;padding:15px 18px}
.msn-geo-i{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:6px;
  border:1px solid var(--msn-line,#12293F);background:rgba(255,255,255,.03);
  font-size:13px;color:var(--msn-body,#BEDBF2);white-space:nowrap;transition:all .16s var(--msn-ease)}
.msn-geo-i em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--msn-mute,rgba(234,242,250,.5));
  background:rgba(255,255,255,.07);border-radius:4px;padding:1px 5px;font-variant-numeric:tabular-nums}
.msn-geo-i:hover{border-color:rgba(200,30,45,.50);color:var(--msn-brand-l,#FF8089);background:rgba(200,30,45,.10)}
.msn-geo-i:hover em{color:var(--msn-brand-l,#FF8089);background:rgba(200,30,45,.18)}
.msn-geo-i.is-on{background:var(--msn-brand,#C81E2D);border-color:var(--msn-brand,#C81E2D);color:#fff}
.msn-geo-i.is-on em{background:rgba(0,0,0,.22);color:#fff}
/* 空态说明（地方资讯尚未产出时）：不留空版面，给一句说明 + 指向已有栏目 */
.msn-geo-note{margin:0;padding:14px 16px;border:1px dashed var(--msn-line,#12293F);border-radius:8px;
  background:rgba(255,255,255,.02);color:var(--msn-body,rgba(234,242,250,.78));
  font-size:13.5px;line-height:1.8}
.msn-geo-note a{color:var(--msn-link,#8FC4EC);font-weight:600}
.msn-geo-note a:hover{color:var(--msn-brand-l,#FF8089)}

/* ═════════════════════ 9. 组件四 · 分类智能推荐 ═════════════════════
   三栏并列，各栏展示本栏目最新 4 条标题 + 该栏目总量。
   数据由 News::catPicks() 装配；某栏无内容时走 .msn-pick-empty 的"征集中"态，
   不留空版面 —— 因为地方资讯要等 AI 采集（Phase E）才有稿。 */
.msn-picks{margin-top:36px;padding-top:30px;border-top:1px solid var(--msn-line,#12293F)}
.msn-picks-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.msn-pick{display:flex;flex-direction:column;border:1px solid var(--msn-line,#12293F);
  border-radius:12px;background:var(--msn-surface,rgba(255,255,255,.04));overflow:hidden}
.msn-pick-hd{display:flex;align-items:center;gap:9px;padding:13px 15px;
  border-bottom:1px solid var(--msn-line2,#0E2438);
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent);
  transition:background-color .18s}
.msn-pick-hd:hover{background:rgba(255,255,255,.075)}
.msn-pick-hd b{font-size:14px;font-weight:700;color:var(--msn-title,#EAF2FA)}
.msn-pick-hd em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--msn-brand-l,#FF8089);
  background:rgba(200,30,45,.16);border-radius:5px;padding:2px 7px;font-variant-numeric:tabular-nums}
.msn-pick-hd svg{margin-left:auto;color:var(--msn-mute,rgba(234,242,250,.5));
  transition:transform .2s var(--msn-ease),color .2s}
.msn-pick-hd:hover svg{transform:translateX(3px);color:var(--msn-brand-l,#FF8089)}
.msn-pick-list{margin:0;padding:8px;list-style:none;flex:1}
.msn-pick-list li{list-style:none}
.msn-pick-list a{display:block;padding:8px 10px;border-radius:7px;font-size:13px;line-height:1.65;
  color:var(--msn-body,rgba(234,242,250,.78));text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:background-color .16s,color .16s}
.msn-pick-list a:hover{background:rgba(255,255,255,.055);color:var(--msn-link,#8FC4EC)}
.msn-pick-empty{margin:0;padding:10px 14px 12px;font-size:12.5px;line-height:1.75;
  color:var(--msn-mute,rgba(234,242,250,.5))}
.msn-pick-more{display:block;margin:0 8px 8px;padding:8px;border-radius:7px;text-align:center;
  font-size:12.5px;font-weight:600;color:var(--msn-link,#8FC4EC);
  background:rgba(143,196,236,.08);border:1px solid rgba(143,196,236,.18);
  transition:background-color .16s}
.msn-pick-more:hover{background:rgba(143,196,236,.16);color:#fff}

/* ═════════════════════ 10. 组件五 · 知识干货卡片 ═════════════════════
   侧栏卡，取 ms_service_article（技术知识库，10 篇真实长文）——
   这是"知识干货卡片"的落点：不凭空生成，直接引已有干货。 */
.msn-kb-list{margin:0;padding:8px;list-style:none}
.msn-kb-list li{list-style:none}
.msn-kb-list a{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:7px;
  font-size:13px;line-height:1.6;color:var(--msn-body,rgba(234,242,250,.78));
  transition:background-color .16s,color .16s}
.msn-kb-list a::before{content:"";flex:0 0 auto;width:5px;height:5px;margin-top:.55em;
  border-radius:999px;background:var(--msn-brand-l,#FF8089)}
.msn-kb-list a:hover{background:rgba(255,255,255,.055);color:var(--msn-link,#8FC4EC)}
.msn-kb-more{display:block;padding:11px 16px;border-top:1px solid var(--msn-line2,#0E2438);
  text-align:center;font-size:12.5px;font-weight:600;color:var(--msn-link,#8FC4EC);
  background:rgba(143,196,236,.06);transition:background-color .16s}
.msn-kb-more:hover{background:rgba(143,196,236,.14);color:#fff}

/* ═════════════════════ 11. 分页（强制单行，硬性要求） ═════════════════════ */
.msn-pager{margin-top:32px}
.msn-pg{display:flex;flex-wrap:nowrap!important;align-items:center;justify-content:center;gap:6px;
  margin:0;padding:2px 0;list-style:none;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.msn-pg::-webkit-scrollbar{display:none}
.msn-pg>li{flex:0 0 auto;list-style:none}
.msn-pg-i{display:grid;place-items:center;min-width:34px;height:34px;padding:0 8px;
  border:1px solid var(--msn-line,#12293F);border-radius:7px;background:rgba(255,255,255,.04);
  font-size:13.5px;font-weight:600;color:var(--msn-body,#BEDBF2);font-variant-numeric:tabular-nums;
  white-space:nowrap;transition:all .16s var(--msn-ease)}
a.msn-pg-i:hover{border-color:rgba(200,30,45,.50);color:var(--msn-brand-l,#FF8089);background:rgba(200,30,45,.10)}
.msn-pg-i.is-on{background:var(--msn-brand,#C81E2D);border-color:var(--msn-brand,#C81E2D);color:#fff}
.msn-pg-i.is-off{color:rgba(234,242,250,.28);background:rgba(255,255,255,.02);
  border-color:var(--msn-line2,#0E2438);cursor:not-allowed}
.msn-pg-i svg{display:block}
.msn-pg-gap{display:grid;place-items:center;min-width:20px;height:34px;
  color:rgba(234,242,250,.35);font-size:13px}
.msn-pg-info{display:none}

/* ═════════════════════ 12. 空状态 / AI 声明 ═════════════════════ */
.msn-empty{padding:64px 24px;text-align:center;border:1px dashed var(--msn-line,#12293F);
  border-radius:12px;background:rgba(255,255,255,.025)}
.msn-empty svg{color:var(--msn-mute,rgba(234,242,250,.5))}
.msn-empty p{margin:14px 0 0;font-size:14px;color:var(--msn-body,rgba(234,242,250,.78))}
.msn-empty-sub{margin-top:8px!important;font-size:12.5px!important;color:var(--msn-mute,rgba(234,242,250,.5))!important}
.msn-ai{display:flex;gap:9px;margin-top:24px;padding:13px 15px;border-radius:8px;
  background:rgba(255,255,255,.035);border:1px solid var(--msn-line,#12293F);
  font-size:12.5px;line-height:1.75;color:var(--msn-mute,rgba(234,242,250,.5))}
.msn-ai svg{flex:0 0 auto;margin-top:2px;color:var(--msn-link,#8FC4EC)}

/* ═══════════════════════════════ 13. 侧栏 ═══════════════════════════════ */
.msn-aside{display:flex;flex-direction:column;gap:22px}
.msn-card{border:1px solid var(--msn-line,#12293F);border-radius:12px;
  background:var(--msn-surface,rgba(255,255,255,.04));overflow:hidden}
.msn-card-hd{display:flex;align-items:center;gap:9px;padding:13px 17px;
  border-bottom:1px solid var(--msn-line2,#0E2438);
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent)}
.msn-card-hd h2{margin:0;font-size:14.5px;font-weight:800;color:var(--msn-title,#EAF2FA)}
.msn-card-hd i{display:block;width:3px;height:14px;border-radius:2px;background:var(--msn-brand,#C81E2D)}
.msn-search{display:flex;align-items:center;height:46px;border:1px solid var(--msn-line,#12293F);
  border-radius:10px;background:rgba(255,255,255,.04);overflow:hidden}
.msn-search input{flex:1;min-width:0;height:100%;padding:0 15px;border:0;background:transparent;
  font-size:14px;color:var(--msn-title,#EAF2FA);outline:none}
.msn-search input::placeholder{color:rgba(234,242,250,.38)}
.msn-search button{flex:0 0 auto;height:100%;padding:0 15px;border:0;background:transparent;
  color:var(--msn-mute,rgba(234,242,250,.5));cursor:pointer;transition:color .18s}
.msn-search button:hover{color:var(--msn-brand-l,#FF8089)}
.msn-hot{margin:0;padding:8px;list-style:none}
.msn-hot li{list-style:none}
.msn-hot a{display:flex;align-items:flex-start;gap:11px;padding:9px 11px;border-radius:7px;
  transition:background-color .16s}
.msn-hot a:hover{background:rgba(255,255,255,.055)}
.msn-hot-n{flex:0 0 auto;display:grid;place-items:center;width:20px;height:20px;margin-top:1px;
  border-radius:5px;background:rgba(255,255,255,.07);color:var(--msn-mute,rgba(234,242,250,.5));
  font-size:11.5px;font-weight:700;font-style:normal;font-variant-numeric:tabular-nums}
.msn-hot-n.is-top{background:var(--msn-brand,#C81E2D);color:#fff}
.msn-hot b{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.55;
  color:var(--msn-body,rgba(234,242,250,.78));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .18s}
.msn-hot a:hover b{color:var(--msn-link,#8FC4EC)}
.msn-plist{margin:0;padding:0;list-style:none}
.msn-plist li{list-style:none;border-top:1px solid var(--msn-line2,#0E2438)}
.msn-plist li:first-child{border-top:0}
.msn-plist a{display:flex;align-items:center;gap:12px;padding:11px 15px;transition:background-color .16s}
.msn-plist a:hover{background:rgba(255,255,255,.055)}
.msn-plist img{flex:0 0 auto;width:52px;height:52px;border-radius:6px;object-fit:cover;
  background:rgba(255,255,255,.05);border:1px solid var(--msn-line2,#0E2438)}
.msn-plist b{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.55;
  color:var(--msn-body,rgba(234,242,250,.78));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.msn-plist a:hover b{color:var(--msn-link,#8FC4EC)}
.msn-plist u{flex:0 0 auto;font-size:11.5px;color:var(--msn-mute,rgba(234,242,250,.5));
  text-decoration:none;font-variant-numeric:tabular-nums}
.msn-aside-sticky{position:sticky;top:132px}

/* 地方资讯引导卡（侧栏，突出"重点栏目"） */
.msn-promo{padding:20px;border-radius:12px;color:#fff;
  border:1px solid rgba(122,168,214,.22);
  background:linear-gradient(135deg,#0E2A45 0%,#153A5E 55%,#1C4A74 100%);
  box-shadow:var(--msn-shadow)}
.msn-promo h2{margin:11px 0 0;font-size:16px;font-weight:800;line-height:1.4;color:#fff}
.msn-promo p{margin:9px 0 0;font-size:12.5px;line-height:1.8;color:rgba(234,242,250,.66)}
.msn-promo a{display:inline-flex;align-items:center;gap:6px;margin-top:14px;height:34px;padding:0 15px;
  border-radius:7px;background:var(--msn-brand,#C81E2D);color:#fff;font-size:13px;font-weight:700;
  transition:background-color .18s}
.msn-promo a:hover{background:var(--msn-brand2,#DF3543)}
.msn-promo-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;
  background:rgba(255,255,255,.10);color:var(--msn-link,#8FC4EC)}

/* ═══════════════════════════════ 14. 详情页 ═══════════════════════════════ */
.msn-art-crumb{border-bottom:1px solid var(--msn-line,#12293F);background:rgba(255,255,255,.02)}
.msn-art{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:38px;align-items:start;
  padding:34px 0 64px}
.msn-art-hd{padding-bottom:24px;border-bottom:1px solid var(--msn-line,#12293F)}
.msn-art-flags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:15px}
.msn-art-h1{margin:0;font-size:clamp(23px,2.5vw,32px);line-height:1.34;font-weight:800;
  color:var(--msn-title,#EAF2FA);letter-spacing:-.015em}
.msn-art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:19px;
  font-size:13px;color:var(--msn-mute,rgba(234,242,250,.5))}
.msn-art-meta em{display:inline-flex;align-items:center;gap:6px;font-style:normal}
.msn-art-meta em svg{color:var(--msn-link,#8FC4EC);opacity:.78}
.msn-art-sum{margin-top:24px;padding:16px 20px;border-radius:10px;background:rgba(255,255,255,.04);
  border:1px solid var(--msn-line,#12293F);border-left:3px solid var(--msn-brand,#C81E2D)}
.msn-art-sum p{margin:0;font-size:14.5px;line-height:1.9;color:var(--msn-body,rgba(234,242,250,.78))}
.msn-art-body{margin-top:28px}
.msn-art-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:34px;padding-top:24px;
  border-top:1px solid var(--msn-line,#12293F)}
.msn-art-tags span{font-size:13px;color:var(--msn-mute,rgba(234,242,250,.5));margin-right:2px}
.msn-art-tags a{display:inline-flex;align-items:center;height:30px;padding:0 12px;
  border:1px solid var(--msn-line,#12293F);border-radius:9999px;font-size:13px;
  color:var(--msn-body,rgba(234,242,250,.78));transition:all .16s var(--msn-ease)}
.msn-art-tags a:hover{border-color:rgba(200,30,45,.50);color:var(--msn-brand-l,#FF8089);background:rgba(200,30,45,.10)}
.msn-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px;padding-top:24px;
  border-top:1px solid var(--msn-line,#12293F)}
.msn-nav a,.msn-nav div{display:block;padding:14px 16px;border:1px solid var(--msn-line,#12293F);
  border-radius:10px;background:var(--msn-surface,rgba(255,255,255,.04));
  transition:border-color .2s,box-shadow .28s,background-color .2s}
.msn-nav a:hover{border-color:var(--msn-line-strong,#235580);background:var(--msn-surface-h,rgba(255,255,255,.065));
  box-shadow:var(--msn-shadow)}
.msn-nav span{display:block;font-size:12px;color:var(--msn-mute,rgba(234,242,250,.5))}
.msn-nav b{display:block;margin-top:7px;font-size:14px;font-weight:600;line-height:1.6;
  color:var(--msn-body,rgba(234,242,250,.78));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .18s}
.msn-nav a:hover b{color:var(--msn-link,#8FC4EC)}
.msn-nav div.is-off{background:rgba(255,255,255,.02);opacity:.7}
.msn-nav div.is-off b{color:rgba(234,242,250,.30)}

/* ════════ 15. 详情页 · 四个价值模块（知识要点 / 核心技术 / 属地场景 / 相关推荐）════════
   对应 ms_article 的 knowledge_points / tech_summary / geo_scene / related_ids 四列。
   四列目前全为空（等 Phase E 的 AI 批量生成），模板侧统一「有则显示、无则不渲染」，
   所以这里先备好皮肤，数据一到即自动成版，无需再改样式。 */
.msn-mods{display:flex;flex-direction:column;gap:18px;margin-top:34px}
.msn-mod{border:1px solid var(--msn-line,#12293F);border-radius:12px;
  background:var(--msn-surface,rgba(255,255,255,.04));overflow:hidden}
.msn-mod-hd{display:flex;align-items:center;gap:10px;padding:14px 18px;
  border-bottom:1px solid var(--msn-line2,#0E2438);
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent)}
.msn-mod-hd h2{margin:0;font-size:15px;font-weight:800;color:var(--msn-title,#EAF2FA)}
.msn-mod-hd i{display:block;width:3px;height:15px;border-radius:2px;background:var(--msn-brand,#C81E2D)}
.msn-mod-hd span{margin-left:auto;font-size:12px;color:var(--msn-mute,rgba(234,242,250,.5))}
.msn-mod-body{padding:16px 18px}
.msn-kpts{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.msn-kpts li{position:relative;padding-left:26px;font-size:14px;line-height:1.85;
  color:var(--msn-body,rgba(234,242,250,.78))}
.msn-kpts li::before{content:"";position:absolute;left:6px;top:.68em;width:6px;height:6px;
  border-radius:999px;background:var(--msn-brand-l,#FF8089)}
.msn-tsum{margin:0;font-size:14.5px;line-height:1.95;color:var(--msn-body,rgba(234,242,250,.78))}
.msn-scene{display:flex;flex-direction:column;gap:13px}
.msn-scene-t{margin:0;font-size:14.5px;line-height:1.95;color:var(--msn-body,rgba(234,242,250,.78))}
.msn-scene-l{display:flex;flex-wrap:wrap;gap:8px}
.msn-rel{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 22px}
.msn-rel li{list-style:none;border-top:1px solid var(--msn-line2,#0E2438)}
.msn-rel a{display:flex;align-items:baseline;gap:10px;padding:11px 2px;font-size:13.5px;line-height:1.6;
  color:var(--msn-body,rgba(234,242,250,.78));transition:color .16s}
.msn-rel a:hover{color:var(--msn-link,#8FC4EC)}
.msn-rel a b{flex:1;min-width:0;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.msn-rel a em{flex:0 0 auto;font-style:normal;font-size:11.5px;
  color:var(--msn-mute,rgba(234,242,250,.5));font-variant-numeric:tabular-nums}

/* ═══════════════════════════ 16. 地域频道页 ═══════════════════════════ */
.msn-geohero{padding:26px 0 30px}
.msn-geohero-h1{margin:13px 0 0;font-size:clamp(22px,2.3vw,29px);font-weight:800;
  color:var(--msn-title,#EAF2FA);line-height:1.3}
.msn-geohero-p{margin:11px 0 0;max-width:46rem;font-size:14px;line-height:1.9;color:rgba(234,242,250,.62)}
.msn-geohero-chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:17px}
.msn-geohero-chain a,.msn-geohero-chain span{display:inline-flex;align-items:center;height:29px;padding:0 11px;
  border-radius:6px;font-size:12.5px;font-weight:600;white-space:nowrap;
  border:1px solid var(--msn-line,#12293F)}
.msn-geohero-chain a{background:rgba(255,255,255,.045);color:rgba(234,242,250,.82)}
.msn-geohero-chain a:hover{background:rgba(255,255,255,.10);color:#fff;border-color:var(--msn-line-strong,#235580)}
.msn-geohero-chain span{background:var(--msn-brand,#C81E2D);border-color:var(--msn-brand,#C81E2D);color:#fff}

/* ═══════ 17. 覆盖 site.css 的浅色公共组件（否则正文会"白底黑字浮在深蓝上"）═══════
   .msn-scope 前缀把权重提到 0,2,0+，稳赢 site.css 的 0,1,0。 */
.msn-scope .ms-prose{color:var(--msn-body,rgba(234,242,250,.78))}
.msn-scope .ms-prose p{color:var(--msn-body,rgba(234,242,250,.78))}
.msn-scope .ms-prose h2{color:var(--msn-title,#EAF2FA);border-color:var(--msn-brand,#C81E2D)}
.msn-scope .ms-prose h3{color:var(--msn-title,#EAF2FA);border-color:var(--msn-brand-l,#FF8089)}
.msn-scope .ms-prose h4{color:var(--msn-title,#EAF2FA)}
.msn-scope .ms-prose strong{color:var(--msn-title,#EAF2FA)}
.msn-scope .ms-prose em{color:var(--msn-body,rgba(234,242,250,.78))}
.msn-scope .ms-prose a{color:var(--msn-link,#8FC4EC);text-decoration-color:rgba(143,196,236,.35)}
.msn-scope .ms-prose a:hover{text-decoration-color:var(--msn-link,#8FC4EC);color:#fff}
.msn-scope .ms-prose blockquote{background:rgba(255,255,255,.045);
  border-color:var(--msn-brand,#C81E2D);color:var(--msn-body,rgba(234,242,250,.78))}
.msn-scope .ms-prose ul>li::before{background-color:var(--msn-brand-l,#FF8089)}
.msn-scope .ms-prose ol::marker{color:var(--msn-brand-l,#FF8089)}
.msn-scope .ms-prose img{border-radius:8px;box-shadow:0 18px 40px -22px rgba(0,0,0,.85)}
.msn-scope .ms-prose hr{border-color:var(--msn-line,#12293F)}
.msn-scope .ms-prose code{background:rgba(255,255,255,.08);color:var(--msn-link,#8FC4EC);
  border-radius:4px;padding:1px 5px}
.msn-scope .ms-prose pre{background:rgba(0,0,0,.32);border:1px solid var(--msn-line,#12293F);
  border-radius:8px;color:var(--msn-body,rgba(234,242,250,.78))}
.msn-scope .ms-prose table{width:100%;border-collapse:collapse;table-layout:fixed}
.msn-scope .ms-prose table th{background:rgba(255,255,255,.07);color:var(--msn-title,#EAF2FA);
  border-bottom:1px solid var(--msn-line,#12293F)}
.msn-scope .ms-prose table td{color:var(--msn-body,rgba(234,242,250,.78));
  border-color:var(--msn-line2,#0E2438);word-break:break-word}
.msn-scope .ms-prose table tr:nth-child(2n) td{background:rgba(255,255,255,.028)}
.msn-scope .ms-card{background:var(--msn-surface,rgba(255,255,255,.04));
  border-color:var(--msn-line,#12293F);box-shadow:none}
.msn-scope .ms-card-hover:hover{border-color:var(--msn-line-strong,#235580)}
.msn-scope .ms-pcard{background:var(--msn-surface,rgba(255,255,255,.04));
  border-color:var(--msn-line,#12293F);box-shadow:none}
.msn-scope .ms-pcard:hover{border-color:var(--msn-line-strong,#235580)}
.msn-scope .ms-pcard-media{background:rgba(255,255,255,.05)}
.msn-scope .ms-pcard-title{color:var(--msn-title,#EAF2FA)}
.msn-scope .ms-pcard:hover .ms-pcard-title{color:var(--msn-brand-l,#FF8089)}
.msn-scope .ms-pcard-desc{color:var(--msn-mute,rgba(234,242,250,.5))}
.msn-scope .ms-chip{background:rgba(255,255,255,.04);border-color:var(--msn-line,#12293F);
  color:var(--msn-body,rgba(234,242,250,.78))}
.msn-scope .ms-chip:hover{border-color:rgba(200,30,45,.50);color:var(--msn-brand-l,#FF8089)}
.msn-scope .ms-chip.is-active{background:var(--msn-brand,#C81E2D);border-color:var(--msn-brand,#C81E2D);color:#fff}
.msn-scope .ms-badge-red{background:rgba(200,30,45,.18);color:var(--msn-brand-l,#FF8089);
  border:1px solid rgba(200,30,45,.32)}
.msn-scope .ms-crumb{color:var(--msn-mute,rgba(234,242,250,.5))}
.msn-scope .ms-crumb a{color:var(--msn-link,#8FC4EC)}
.msn-scope .ms-crumb a:hover{color:var(--msn-brand-l,#FF8089)}
.msn-scope .ms-crumb li+li::before{color:rgba(234,242,250,.30)}
.msn-scope .ms-crumb .current{color:var(--msn-title,#EAF2FA)}

/* ==========================================================================
   18. 响应式覆盖（本文件唯一允许出现 @media 的地方，只写断点差异，不写基础规则）
   ========================================================================== */

/* ---------------------------- 移动端 / 窄屏 ≤1023.98 ---------------------------- */
@media (max-width:1023.98px){
  .msn-hero-in{padding:22px 0 24px}
  .msn-hero-hd{display:block}
  .msn-hero-h1{margin-top:11px;font-size:22px}
  .msn-hero-sub{margin-top:10px;font-size:13px}
  .msn-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:19px;
    padding:0;border-left:0;background:rgba(255,255,255,.08);border-radius:9px;overflow:hidden}
  .msn-stat{padding:12px 8px;border-right:0;background:rgba(255,255,255,.045)}
  .msn-stat b{font-size:21px}
  .msn-stat span{margin-top:5px;font-size:11.5px}
  .msn-tabs{top:56px}
  .msn-tabs-in{gap:8px;padding:10px 0}
  .msn-chip{height:32px;padding:0 13px;font-size:13px}
  .msn-chips-hint{display:none}
  .msn-cols{grid-template-columns:minmax(0,1fr);gap:28px}
  .msn-main{padding:20px 0 44px}
  .msn-art{grid-template-columns:minmax(0,1fr);gap:28px;padding:20px 0 44px}
  .msn-art-h1{font-size:21px;line-height:1.42}
  .msn-art-meta{gap:14px;margin-top:15px;font-size:12px}
  .msn-nav{grid-template-columns:1fr;gap:10px}
  .msn-aside-sticky{position:static}
  .msn-geohero{padding:18px 0 22px}
  .msn-geohero-h1{font-size:20px}
  .msn-geohero-p{font-size:12.5px}
}

/* 置顶区 & 列表行：窄屏改为"图上文下"竖向卡（保证 5 条/页时信息密度与可读性） */
@media (max-width:1023.98px){
  .msn-top{grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:22px}
  .msn-side{grid-template-rows:auto;gap:12px}
  .msn-lead-media{aspect-ratio:16/9}
  .msn-lead-body{padding:16px 16px 15px}
  .msn-lead-t{font-size:17px}
  .msn-lead-d{display:none}
  .msn-lead-meta{margin-top:10px;font-size:11.5px}
  .msn-scard{padding:10px;gap:11px}
  .msn-scard-media{width:104px}
  .msn-scard-t{font-size:13.5px}
  .msn-list{gap:11px}
  .msn-row{flex-direction:column;gap:0;padding:0;border-radius:12px;overflow:hidden}
  .msn-row-media{width:100%;aspect-ratio:16/8.6;border-radius:0}
  .msn-row-body{padding:12px 13px 13px}
  .msn-row-flags{margin-bottom:7px;flex-wrap:wrap}
  .msn-row-t{font-size:15px;line-height:1.5}
  .msn-row-d{font-size:12.5px;margin-top:6px;-webkit-line-clamp:2}
  .msn-row-meta{margin-top:10px;padding-top:9px;gap:12px;font-size:11.5px}
  .msn-row-meta b{display:none}
  .msn-geo{margin-bottom:20px}
  .msn-geo-body{gap:7px;padding:13px 14px}
  .msn-geo-hd{padding:12px 14px}
  .msn-geo-i{height:28px;padding:0 9px;font-size:12.5px}
  /* 分类推荐：窄屏改单列，避免 3 栏在 390px 里挤成 1 个字一行 */
  .msn-picks{margin-top:28px;padding-top:24px}
  .msn-picks-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  /* 详情页四模块：相关推荐改单列 */
  .msn-mods{gap:14px;margin-top:26px}
  .msn-mod-body{padding:14px}
  .msn-kpts li{font-size:13.5px;padding-left:22px}
  .msn-tsum,.msn-scene-t{font-size:13.5px;line-height:1.9}
  .msn-rel{grid-template-columns:minmax(0,1fr)}
  /* 分页：移动端保持单行，靠横向滚动兜底（绝不换行） */
  .msn-pager{margin-top:22px}
  .msn-pg{gap:5px;justify-content:flex-start}
  .msn-pg-i{min-width:32px;height:32px;font-size:13px}
}

/* ------------------------------- 桌面 ≥1024 ------------------------------- */
@media (min-width:1024px){
  .msn-tabs{top:76px}
  .msn-pg-info{display:inline-flex;align-items:center;margin-left:8px;font-size:12.5px;
    color:var(--msn-mute,rgba(234,242,250,.5))}
}

/* ==========================================================================
   正文图片：按版面与终端自适应（PC + 手机端）
   --------------------------------------------------------------------------
   分工：服务端 ms_news_body() 负责"剥掉旧站内联 width/height + 打比例类"，
   这里只负责"每种比例怎么显示才好看"。

   三条铁律（缺一不可）：
     · **绝不变形** —— 要么 width/height 一起交给浏览器等比解，要么用
       object-fit 裁切，绝不单边写死尺寸（单边写死 = 拉伸）。
     · **绝不横向溢出** —— max-width:100% 兜底，375px 手机上不出现左右滚动。
     · **两端都不能难看** —— 超宽图（宽高比 ≥2.6）等比缩放后只有一条细缝，
       手机端改通栏出血（不裁切、不拉伸，只是把可用宽度吃到边）；
       竖长图（宽高比 ≤0.8）等比放大后要占三四屏，限绝对高度。
   -------------------------------------------------------------------------- */

.msn-scope .ms-prose img.msn-img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  margin:1.6em auto;
  border-radius:10px;
}

/* 竖长图：等比缩放到限高（max-width 与 max-height 同时约束，浏览器取等比解，
   所以宽度会跟着收缩 —— 这是等比，不是压缩） */
.msn-scope .ms-prose img.msn-img--tall{max-height:620px}

/* 超宽横幅：PC 版面宽度有限，保持不变形即可；手机端再走下面的通栏出血 */
@media (max-width:1023.98px){
  .msn-scope .ms-prose img.msn-img--tall{max-height:460px}

  /* 通栏出血：横向吃掉 .px-4 的 16px 内边距，图片可视宽度最大化。
     宽度用 calc(100% + 32px) 精确对齐版心，不会引出横向滚动条。 */
  .msn-scope .ms-prose img.msn-img--wide{
    width:calc(100% + 32px);
    max-width:none;
    margin-left:-16px;
    margin-right:-16px;
    border-radius:0;
  }
}

/* ==========================================================================
   /news 列表页版面重构（Phase NEWS-2）
   --------------------------------------------------------------------------
   ① 侧栏吸顶可用：父级 .msn-cols 上是 align-items:start，网格项高度=内容高度，
      包含块与内容等高 → .msn-aside-sticky 的位移空间为 0，sticky 会"完全不动"
      且不报任何错。必须让 aside 拉伸填满行高才有位移空间。
   ② 地域速览：两列 chip 网格 + 限高渐隐 + 展开按钮（数据增长时不撑爆侧栏）。
   ③ 分页信息：PC 行内、移动端整行居中，都带上"共 N 页 / M 条"。
   ========================================================================== */

.msn-cols>.msn-aside{align-self:stretch}

.msn-card-hd>.msn-card-sub{
  margin-left:auto;font-size:12px;font-weight:600;
  color:var(--msn-mute,rgba(234,242,250,.5));
}

/* ---- 地域速览 ---- */
.msn-card--geo .msn-geo-body{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;padding:14px 15px 15px;
}
.msn-card--geo .msn-geo-i{
  height:30px;padding:0 9px;min-width:0;gap:6px;
  justify-content:space-between;
}
.msn-card--geo .msn-geo-i>span{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.msn-card--geo .msn-geo-i>em{flex:0 0 auto}

/* 限高 + 底部渐隐：默认只露前 4 行，一眼看到"文章最多的那几个省" */
.msn-card--geo .msn-geo-body.msn-geo-clamp{
  max-height:178px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 60%,rgba(0,0,0,.15) 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 60%,rgba(0,0,0,.15) 100%);
}
.msn-card--geo .msn-geo-body.msn-geo-clamp.is-open{
  max-height:none;-webkit-mask-image:none;mask-image:none;
}
.msn-card--geo .msn-geo-toggle{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:calc(100% - 30px);margin:0 15px 15px;height:34px;
  border:1px solid var(--msn-line,#12293F);border-radius:8px;
  background:rgba(255,255,255,.035);color:var(--msn-link,#8FC4EC);
  font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;
  transition:border-color .16s,color .16s,background-color .16s;
}
.msn-card--geo .msn-geo-toggle:hover{
  border-color:rgba(200,30,45,.50);color:var(--msn-brand-l,#FF8089);background:rgba(200,30,45,.10);
}
.msn-card--geo .msn-geo-toggle svg{transition:transform .2s}
.msn-card--geo .msn-geo-toggle.is-open svg{transform:rotate(180deg)}

/* ---- 分页信息 ---- */
.msn-pg-info b{font-weight:800;color:var(--msn-title,#EAF2FA)}
.msn-pg-info em{font-style:normal;color:rgba(234,242,250,.32);margin:0 5px}

/* 移动端：分页信息整行居中落在分页条下方（不挤占页码行，避免换行错位） */
@media (max-width:1023.98px){
  .msn-pager{flex-wrap:wrap}
  .msn-pg-info{
    display:flex;width:100%;justify-content:center;
    margin:9px 0 0;font-size:12px;
  }
  .msn-card--geo .msn-geo-body.msn-geo-clamp{max-height:156px}
}


/* ══════════════════════════════════════════════════════════════════════════
   K21（2026-09-26）· 移动端分页：页码与「总数/总页」压到同一行
   --------------------------------------------------------------------------
   用户：「新闻列表页，分页与总数和总页，做成一行显示。」
   【成因】本文件里 .msn-pager 只写了 margin-top（一个纯 block），它的第一个孩子
   <ul class="msn-pg"> 是**块级 flex**（占满整行）⇒ 后面的 .msn-pg-info 必然掉到
   第二行。K12 已在 ms-tech.css 里为 /tech 页面写好同款修法并实测通过；本文件是
   新闻资讯版块的皮肤（被 view/m/head.html 无条件加载 ⇒ 每个 m 页面都有它），
   所以那三条必须搬到这儿，才管得住新闻列表页。
   【为什么关在 max-width:1023.98px 里】需求只针对手机端；PC 端保持现状、零回归。
   （PC 端 .msn-pg-info 仍由本文件 min-width:1024px 那条显示，仍占第二行。）
   【为什么用 .msn-pager .msn-pg-info（0,2,0）】要压过本文件移动端那条
   `.msn-pg-info{display:flex;width:100%;justify-content:center;margin:9px 0 0}`（0,1,0）。
   【为什么给 .msn-pg 加 min-width:0】它自带 overflow-x:auto ⇒ 窄屏时页码条自己
   横向滚动，绝不把统计挤下去，仍然是一行。
   ⚠ 本块必须排在本文件**最后**：.msn-pager 的 flex-wrap 要覆盖同文件里那条
   `@media (max-width:1023.98px){.msn-pager{flex-wrap:wrap}}`，同权重靠源序取胜。
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1023.98px){
  .msn-pager { display:flex;align-items:center;flex-wrap:nowrap;gap:8px }
  .msn-pager .msn-pg { flex:1 1 auto;min-width:0 }
  .msn-pager .msn-pg-info { display:inline-flex;align-items:center;flex:0 0 auto;
    width:auto;justify-content:flex-start;margin:0;font-size:12px;white-space:nowrap }
}


/* ============================================================================
   K23（2026-09-26）正文「大 / 中 / 小」字号
   ----------------------------------------------------------------------------
   需求原话：「新闻资讯板块下面的详细页和液压文库的详细页的正文部分，增加文字放大的
   功能，大，中，小，两个终端（PC/m）页面都加」。

   作用对象：`.msn-art-body`（4 个详情页共用这一个容器：m/PC × 新闻/文库）；
   开关载体：<html> 上的 `data-msz` 属性（'s' / 'l'），由 /static/gz/ms-zoom.js
   在首帧之前写入（该文件同步引入，原因见其文件头）。

   ⚠ 取值原则：**「中」必须是零改动**
     中号 = 不写属性 ⇒ 本块所有规则都以 `html[data-msz=…]` 为前缀，属性不在时一条都
     不生效，渲染与改动前逐像素一致。这样该功能对不用它的人完全隐形。

   ⚠ 子元素字号为什么要重写成 em
     site.css（Tailwind 预编译产物）里 `.ms-prose` 的几档字号用的是 **rem / px**：
       h2 → 22px      h3 → 1.25rem     h4 → 1.125rem     table → .875rem
     rem 跟 <html> 根字号走、px 是绝对值 —— 两者都**不随正文容器字号变化**。
     只改 `.msn-art-body` 的 font-size 的话，结果是「只有段落变大，标题和表格纹丝不动」。
     故把这几档**等值改写成 em**（相对正文容器）：
       22px@16px = 1.375em   ·  1.25rem = 1.25em  ·  1.125rem = 1.125em  ·  .875rem = .875em
     在「中号」（容器 16px）下换算结果与原值**完全相同** ⇒ 这一步同样是零改动，
     只有放大/缩小时才跟着一起缩放。
     （pre / code 未写死字号、本来就继承容器，无需处理。）

   ⚠ 行高：只在「大」这一档动
     site.css 的 `.ms-prose{line-height:1.5rem}` 是绝对值(24px)，不随字号走；
     18px 正文配 24px 行高明显发挤，故「大」档改成无单位 1.9。
     「小」档 14px 配继承来的 24px = 1.71，本来就够松 ⇒ 不动（少动一处少一分风险）。

   ⚠ 摘要卡片（.msn-art-sum，14.5px）**不随字号变化** —— 需求说的是「正文部分」，
     摘要属于独立的高亮卡片，保持固定字号更稳。若以后要一起放大，在这里加一条即可。
   ============================================================================ */
.ms-zoom{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:24px}
.ms-zoom-t{margin-right:2px;font-size:12px;letter-spacing:.06em;color:var(--msn-mute,rgba(234,242,250,.42))}
.ms-zoom-b{height:28px;min-width:40px;padding:0 11px;border:1px solid var(--msn-line,#12293F);
  border-radius:6px;background:transparent;color:var(--msn-body,rgba(234,242,250,.72));
  font-size:13px;line-height:1;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:border-color .16s var(--msn-ease,ease),background-color .16s var(--msn-ease,ease),color .16s var(--msn-ease,ease)}
.ms-zoom-b:hover{border-color:rgba(143,196,236,.45);color:#EAF2FA}
.ms-zoom-b:focus-visible{outline:2px solid var(--msn-link,#8FC4EC);outline-offset:2px}
/* 选中态由 <html data-msz> 驱动，**不依赖 JS** ⇒ 首帧就是对的，不会先错后对闪一下 */
html[data-msz="s"] .ms-zoom-b[data-msz="s"],
html[data-msz="l"] .ms-zoom-b[data-msz="l"],
html:not([data-msz]) .ms-zoom-b[data-msz="m"]{
  border-color:rgba(200,30,45,.58);background:rgba(200,30,45,.16);color:#fff;font-weight:700}

/* —— 两档缩放本体 ——
   取值按**各端自己的正文基准**定，基准来自 site.css（实测）：
     · 视口 < 768px ：`.ms-prose{font-size:15px}`          → 窄屏基准 15px
     · 视口 ≥ 768px ：`@media(min-width:768px){…1rem}`      → 宽屏基准 16px
   所以窄屏 13 / 15 / 17、宽屏 14 / 16 / 18 —— 两端都是 ±2px，「中」恒等于原值。
   （若不分明细、统一写 14/16/18，则手机端量出来是 14 / 15 / 18，
     「小」只比「中」小 1px —— 实测就是这个问题，故按端取值。） */
html[data-msz="s"] .msn-art-body{font-size:13px}
html[data-msz="l"] .msn-art-body{font-size:17px;line-height:1.9}
@media (min-width:768px){
  html[data-msz="s"] .msn-art-body{font-size:14px}
  html[data-msz="l"] .msn-art-body{font-size:18px}
}

/* —— 把正文里写死的 rem/px 字号改成 em（中号下等值，零改动）—— */
html[data-msz] .msn-art-body h2{font-size:1.375em}   /* 原 22px */
html[data-msz] .msn-art-body h3{font-size:1.25em}    /* 原 1.25rem */
html[data-msz] .msn-art-body h4{font-size:1.125em}   /* 原 1.125rem */
html[data-msz] .msn-art-body table{font-size:.875em} /* 原 .875rem */