.m26{background:#f4f6fa;padding-bottom:14px;-webkit-text-size-adjust:100%;}
.m26 *{box-sizing:border-box;}
/* ★ 第 31 版（No.136）勘察结论 —— 先写在这里，免得后来人再试一遍。
   "正文图标膨胀"是**两条规则叠加**的结果：
     ① 老站手机版 index.css 有一条 `.wrap img{width:100%}`（.wrap 就是
        base.html 那个包住整页的容器），它把 `<img width="90">` 这个属性盖掉；
     ② 本文件与 `.m26-pbody` 段里的 `height:auto` 又把 `<img height="90">` 盖掉，
        于是浏览器只剩"宽度铺满、高度按比例"一条路 ⇒ 640x360 的图标图渲染成 352x198。
   为什么不在这里动 CSS（试过，更糟）：把 `height:auto` 删掉之后 height 属性确实
   生效了，**但大图跟着变形** —— 720x400 的图宽度被 max-width 压到 352、高度却仍是
   400 ⇒ 变成 352x400 的竖长条。CSS 没法"按属性值条件化尺寸"：不写 width 声明时
   `width:auto` 取的是**固有宽度**（640），而不是属性值（90）。
   ⇒ 修法落在**渲染后用脚本按属性还原尺寸**，见
     templates/cms/mobile/product_detail.html 的 extra_js 段（判据：属性宽度超容器
     的按满宽自适应，没超的按属性高度 + 宽度按比例）。 */
.m26 img{max-width:100%;height:auto;border:0;}
.m26 a{text-decoration:none;color:inherit;}
.m26 p{margin:0;}
.m26 ul{margin:0;padding:0;list-style:none;}

/* ---------- 页头 ---------- */
.m26-hero{position:relative;padding:20px 16px 18px;background:#0b63ce;color:#fff;overflow:hidden;}
.m26-hero::after{content:"";position:absolute;right:-38px;top:-38px;width:132px;height:132px;border-radius:50%;background:rgba(255,255,255,.09);}
.m26-hero h1{position:relative;margin:0;font-size:21px;line-height:1.25;font-weight:700;color:#fff;}
.m26-hero .sub{position:relative;margin:7px 0 0;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.86);}
.m26-hero .meta{position:relative;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px;}
.m26-hero .meta span{display:inline-block;padding:3px 10px;border-radius:20px;background:rgba(255,255,255,.16);font-size:11.5px;line-height:18px;}
.m26-hero .pc{position:relative;display:inline-block;margin-top:12px;font-size:12px;color:rgba(255,255,255,.9);border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:1px;}

/* ---------- G9. 第 38 版（No.181）：hero 里的七枚入口 ----------
   运营原话：
     「把AI营销总览、AI获客方案、AI工作手机、AI销售辅助、AI视频案例、
       AI漫剧制作、AI分析报表 7个胶囊按钮移去广告位，配色给优化。
       处理方案参照 https://www.shuangxisoft.cn/ai/」

   ## 这一版替换掉了什么
     原来是 hero **下面**一条白色吸顶的横滑胶囊（`.m26-nav`）：375px 屏
     一次只看得见 3 枚半，第 4 枚起要左右滑。现在整组搬进 hero（页顶
     那片蓝色广告位）内部，7 枚排成 4+3 两行，一屏看全，不用滑。
     ⇒ 与 PC 端 `.ai-hero .quick-tabs` 同构（PC 那道注释写着「布局参照
       shuangxisoft.cn/ai/tools/」），手机端是最后一个补齐的页面。

   ## 配色为什么反过来（白底蓝字 而不是 灰底深灰字）
     PC 那张 hero 是**白底**，所以 PC 端未选中用 #f1f5f9 灰底 + #334155 深灰字。
     手机端这张 hero 是**蓝底 #0b63ce** —— 灰底灰字压上去会糊成一片。
     于是取同一套对比关系、把明暗反过来：
       未选中 = 半透明白底 rgba(255,255,255,.14) + 白字
                （与 hero 里已有的 .meta span 同一口径，不新造一套语言）
       选中   = 纯白底 + 品牌蓝 #0b63ce 字 + 加粗
                （全组里对比度最高的一枚 = "你正在这一页"）

   ## 一行永远 4 枚
     flex-wrap:wrap + 每枚 width:calc(25% - 6px) 配 gap:7px ⇒ 净占
     100% − 3px，留 3px 余量防内核把小数像素进位后挤掉第 4 枚
     （与 G8 的 .m26-fold 同源）。7 枚 ⇒ 4+3；运营以后在后台再加场景，
     自动变回 4+4 —— 这里**不写死"第一行是哪几个"**。
   ---------------------------------------------------------------------- */
.m26-quick{position:relative;margin:13px 0 0;display:flex;flex-wrap:wrap;gap:7px;}
.m26-quick a{flex:0 0 auto;box-sizing:border-box;width:calc(25% - 6px);
  text-align:center;padding:8px 2px;border-radius:16px;
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.26);
  font-size:12.5px;line-height:18px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
.m26-quick a.on{background:#fff;color:#0b63ce;font-weight:700;border-color:#fff;
  box-shadow:0 2px 8px rgba(4,32,74,.18);}

/* ---------- 吸顶板块导航（第 38 版起**已无页面使用**） ----------
   ★ 这一条 CSS 一个字没删，但**最后一个使用者也没了** —— 本轮 No.181 把
     AI营销 总览页与 6 个子页的横滑条一起搬进了 hero（见上面 G9 段）。
     保留的理由有两条，都不是"舍不得删"：
       ① 历史基线与自检口径：包内自检的 AS-26 断言按「.m26-nav 的 CSS
          仍在 _m26_head.html 里」守恒来锁基线，删掉会把那条断言打成假失败；
       ② 这条横滑条是本项目移动端导航的早期范式，将来若某个频道又需要
          "一屏宽放不下、条目很多"的索引条，用它比新写一套更省。
     ⇒ 真要删，另起一版专门做"清理死 CSS"，并同时改掉那条 AS-26 断言。 */
.m26-nav{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid #e9eef5;box-shadow:0 1px 4px rgba(15,40,80,.05);}
.m26-nav .track{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:8px;padding:9px 12px;}
.m26-nav .track::-webkit-scrollbar{display:none;}
/* ★ 第 44 版（No.211）：横滑索引条与上面两处是同一套色值语言，一起加深，
   避免同一站出现「有的清楚、有的发虚」两种观感。 */
.m26-nav a{flex:0 0 auto;padding:6px 13px;border-radius:16px;background:#e9f0f9;color:#1b3a5c;font-size:13px;line-height:20px;font-weight:600;white-space:nowrap;}
.m26-nav a.on{background:#0b63ce;color:#fff;font-weight:600;}

/* ---------- 板块 ---------- */
.m26-sec{padding:16px 12px 2px;}
.m26-sec-h{display:flex;align-items:baseline;justify-content:space-between;margin:0 4px 10px;}
/* ★ 第 37 版（2026-09-22 · 测试反馈 No.171）：板块标题字号 16.5 → 18.5。
   运营原话（服务体系那一页）：「有胶囊按钮组成的滚动条删除。主题 / 热线活动 /
   远程服务 / 培训服务 / 量身定制 / 应用巡检 / 实施方法 —— **字体稍变大一点
   区别正文内容**」。
   ## 为什么这一条必须跟着 No.171 一起做
     那排胶囊（`.m26-nav`）本来是"这页有哪几个板块"的唯一提示 —— 它一删，
     板块之间的分界就只剩这行标题。正文是 `.m26-inline` 的 15px，
     标题原来是 16.5px（只差 1.5px），删掉导航条之后整页会糊成一大片。
     抬到 18.5px（差 3.5px）才"一眼看得出这是一节的开始"。
   ★ 只动字号，字重(700)、左侧那根 3.5px 蓝色竖条、条数徽标都不动 ——
     运营说的是"稍变大一点"，不是重新设计这一行。 */
.m26-sec-h h2{position:relative;margin:0;padding-left:11px;font-size:18.5px;line-height:1.3;font-weight:700;color:#16283d;}
.m26-sec-h h2::before{content:"";position:absolute;left:0;top:3px;width:3.5px;height:16px;border-radius:2px;background:#0b63ce;}
.m26-sec-h .n{font-size:12px;color:#93a1b3;}
.m26-sec-note{margin:0 4px 10px;font-size:12.5px;line-height:1.7;color:#8494a8;}
.m26-more{display:block;margin:2px 4px 0;padding:9px 0;text-align:center;font-size:13px;color:#0b63ce;background:#fff;border-radius:10px;border:1px solid #e4ecf7;}

/* ---------- 行卡（图左文右） ---------- */
.m26-card{display:flex;gap:11px;padding:11px;margin-bottom:9px;background:#fff;border-radius:11px;box-shadow:0 1px 5px rgba(20,50,90,.06);}
.m26-card .pic{flex:0 0 104px;width:104px;height:76px;border-radius:8px;overflow:hidden;background:#eef3f9;}
.m26-card .pic img{width:100%;height:100%;object-fit:cover;display:block;}
.m26-card .txt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.m26-card h3{margin:0 0 5px;font-size:14.5px;line-height:1.38;font-weight:600;color:#16283d;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.m26-card .d{margin:0;font-size:12.5px;line-height:1.55;color:#7c8b9e;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.m26-card .b{margin-top:7px;display:flex;align-items:center;gap:8px;font-size:11.5px;color:#9aa7b8;}
.m26-card .b em{font-style:normal;padding:1px 7px;border-radius:10px;background:#eef4fd;color:#2f6bb5;}
/* 无图时改为纯文字卡，别留一个空图位 */
.m26-card.plain .pic{display:none;}

/* ---------- 大卡：只看「解决方案」（第 27 版） ----------
   为什么要一套单独的大卡（用户原话：「每个方案高度有点小，是否再扩大点，
   原来放四个方案的位置改为放3个方案」）：

   实测（playwright 375x667 iPhone）—— 改版前：
     hero+吸顶导航占 195px，可视区只剩 472px；
     行卡高度 110~130px、加 9px 间距 ≈ 119px ⇒ 472/119 = 3.96
     ⇒ 一屏正好塞 **4 个**，每个卡里图只有 104x76（比一张邮票大不了多少）。
   改版后：图 104x76 → **120x120**，卡高 120+24(内边距)+4(2px 边框×2) = 148px、
     加 9px 间距 = 157px ⇒ 472/157 = **3.01** ⇒ 一屏正好 **3 个**
     （第 3 张完整可见到 657px，第 4 张露个边 ⇒ 一眼就知道还能往下滑）。
     ★ 尺寸是**倒推**出来的，不是随手填的：
         pic = 472/3 − 9(间距) − 24(内边距) − 4(边框) = 120.3
       改这里的任何数字都要重新量一遍，判据是「472 / (卡高+9) 落在 2.9~3.15」，
       而不是"看起来大一点"。
     ★ 量错过两次，所以把过程留在这里：
       第一版 128 → 实测 2.86（第 3 张被切掉 14%）；
       第二版 124 → 实测 2.93 —— 因为**忘了算 2px 边框**（428/3 时它不在公式里）。
       结论：这类"差几个像素"的事，只能在真浏览器里量 getBoundingClientRect，
       而且要连边框/内边距一起算，目测和心算都会错。

   边框的讲究：默认就写 `2px` 浅色描边（不是 0 → 2px），
   这样滑动时切到蓝框**不产生 2px 的宽度跳变**，卡片不会抖。 */
.m26-sec-sol{padding-top:14px;}
.m26-card.m26-sol{position:relative;padding:12px;border:2px solid #e8eef7;
  transition:border-color .18s ease,box-shadow .18s ease;}
.m26-card.m26-sol .pic{flex:0 0 120px;width:120px;height:120px;border-radius:10px;}
.m26-card.m26-sol .txt{padding-right:28px;}   /* 给右上角角标留位，标题别钻到它下面 */
.m26-card.m26-sol h3{font-size:15.5px;line-height:1.4;margin-bottom:6px;}
.m26-card.m26-sol .d{font-size:13px;line-height:1.6;}
.m26-card.m26-sol.on{border-color:#0b63ce;box-shadow:0 3px 14px rgba(11,99,206,.20);}
.m26-card.m26-sol:active{border-color:#0b63ce;}
/* 320~350px 的老小屏：再收一点，否则右侧只剩 100px 放标题，两行也放不下。
   ★ 这里**不**追求"一屏 3 个" —— 那种屏高度本来就矮，能放几个放几个。 */
@media screen and (max-width:350px){
  .m26-card.m26-sol{padding:11px;}
  .m26-card.m26-sol .pic{flex:0 0 104px;width:104px;height:104px;}
  .m26-card.m26-sol h3{font-size:15px;}
}

/* 右上角「领域单字」角标（第 27 版）：一个字代表这条方案所属的行业领域。
   值来自 `cms/domain_char.py`（按方案所属行业栏目提炼），模板判空后才渲染。
   负 2px 是为了压在卡片的 2px 描边上、与卡片外圆角对齐成一枚"角签"。 */
.m26-badge{position:absolute;top:-2px;right:-2px;width:36px;height:36px;
  border-radius:0 11px 0 12px;background:linear-gradient(135deg,#1a7ae0,#0b4fa8);
  color:#fff;font-size:16px;font-weight:700;line-height:36px;text-align:center;}

/* ---------- 镜像大卡：文字在左、图在右（第 28 版 · 测试反馈 No.125）----------
   用户原话：「手机上产品中心，…以图形式展示，…文字（产品名称）放左侧；
              滑动时边框自动变蓝色；类似"解决方案"的效果」

   产品中心唯一的版式差异就去这里 —— **不复制一份 `.m26-sol`**：
   大卡尺寸、右上角蓝框、滑动高亮全都与解决方案共用同一套规则，
   只把主轴反过来。复制一份的代价是这个"每屏正好 3 个"的尺寸公式
   （120 = 472/3 − 9 − 24 − 4）从此有两处，改一处忘一处；
   而 flex-direction 反过来完全不碰尺寸，实测 3 个/屏的分隔位置一样。

   连带两处必须跟着镜像，否则会露馅：
     · `.txt` 的 28px 让位从右改到**左**（原来那个 28px 是躲右上角角标）；
     · 角标挪到**左上角**，圆角也跟着镜像（否则圆角方向与卡片角反着长）。
   视觉上角标落在文字那一侧，不会盖住产品图。 */
.m26-card.m26-sol.m26-rev{flex-direction:row-reverse;}
.m26-card.m26-sol.m26-rev .txt{padding-right:0;padding-left:28px;}
.m26-card.m26-sol.m26-rev .m26-badge{right:auto;left:-2px;border-radius:11px 0 12px 0;}

/* ---------- 图片墙（条数多且都有图） ---------- */
.m26-wall{display:flex;flex-wrap:wrap;margin:0 -4px;}
.m26-wall li{width:33.333%;padding:4px;}
.m26-wall .p{position:relative;padding-top:100%;border-radius:9px;overflow:hidden;background:#eef3f9;}
.m26-wall .p img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;}
.m26-wall .t{margin:5px 1px 0;font-size:11.5px;line-height:1.4;color:#5d6e83;text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* ---------- 锚点入口 ---------- */
.m26-anchor{display:flex;flex-wrap:wrap;gap:8px;padding:4px 16px 0;}
.m26-anchor a{flex:1 1 46%;padding:11px 12px;border-radius:10px;background:#fff;border:1px solid #e4ecf7;
  font-size:13px;line-height:1.45;color:#2b4767;}
.m26-anchor a span{display:block;margin-top:3px;font-size:11.5px;color:#96a4b6;}

/* ---------- 小方块墙（第 28 版 · 测试反馈 No.128）----------
   鹏为思想页的 7 个板块各占一枚小方块。为什么是 3 列（与 `.m26-wall` 同宽）
   而不是 2 列：板块名最长 10 个字（「解决企业经营管理难题」），
   375px 屏上 3 列每格约 113px、12.5px 字号一行放 8 个字 ⇒ 两行放得下；
   2 列虽然更宽松，但 7 个方块会排出 4 行，整屏几乎被导航占满。

   `.pend`（资料待整理）那一档刻意做成**虚线灰边**：
   它是"暂时没内容"的区块，视觉上要能被一眼区分出来，
   又不该灰到让人以为点不动（点得动 —— 点进去就是留言索取入口）。 */
.m26-tiles{display:flex;flex-wrap:wrap;margin:0 -4px;padding:4px 12px 0;}
.m26-tiles li{width:33.333%;padding:4px;}
.m26-tiles a{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:80px;padding:8px 6px;background:#fff;
  border:1px solid #e4ecf7;border-radius:10px;}
.m26-tiles a b{font-size:12.5px;line-height:1.35;font-weight:600;color:#1f3a5c;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.m26-tiles a span{margin-top:5px;font-size:10.5px;line-height:1;color:#8fa0b4;}
.m26-tiles a.pend{background:#fbfcfe;border-style:dashed;}
.m26-tiles a.pend b{color:#5b6f88;font-weight:500;}
.m26-tiles a.pend span{color:#b0bccb;}
.m26-tiles a:active{border-color:#0b63ce;}

/* 页内跳转的两个小配套（第 28 版）：方块点下去要"滚到它的位置"。
   ① 顶部那条吸顶导航会盖住落点头部的 40 多像素，不补 scroll-margin-top
      现象就是"跳过去了，但板块标题被导航条切掉一半"；
   ② smooth 让跳转是"滚过去"而不是"瞬移过去" —— 手机上一屏一屏地滚，
      瞬移会让人失去方向感（不知道跳到了上面还是下面）。
   这份样式只被 m26 系列模板 include，所以 html 这一条不会影响老页面。 */
html{scroll-behavior:smooth;}
.m26-sec{scroll-margin-top:54px;}

/* ---------- 空板块里的动作按钮（第 28 版 No.128）---------- */
.m26-cta{margin-top:14px;display:flex;flex-wrap:wrap;gap:9px;justify-content:center;}
.m26-cta a{display:inline-block;padding:8px 16px;border-radius:18px;font-size:13px;line-height:1.5;}
.m26-cta .ask{background:#0b63ce;color:#fff;font-weight:600;}
.m26-cta .tel{background:#fff;color:#0b63ce;border:1px solid #bcd6f5;}

/* ---------- 产品详情：产品分类（第 28 版 · 测试反馈 No.126）----------
   源网站的 area_choose 是 5 行「父类 + 一串子类」、总宽 1199px 的表格式导航。
   手机上保留同一份数据与层级，改成：一组一行、父类做深色标签、
   子类横排可滑动 —— 一行放不下就滑，绝不让它把页面撑宽。
   ★ `overflow-x:auto` 只加在 .cs（子类那一行）上，不加在整块上，
     否则父类标签会被一起滑走，用户就"不知道这一行是什么组"了。

   ==========================================================================
   ★★ 第 36 版（2026-09-22 · 测试反馈 No.163）：**由换行改折叠**
   ==========================================================================
   运营原话：
     「产品分类由"换行"改"折叠"：鹏为CRM / 电商商城搭建 / 领域解决方案在一行，
       提供对接接口 / 应用场景版本在下一行；默认鹏为CRM展开，其余折叠；
       点某个胶囊时其它全折叠、被点的展开（单开互斥）。」

   历史（保留，别删）：第 34 版（No.141）把这里从"横滑"改成"换行"，
     原话是「产品分类，现在要滑动，建议用换行方案。即每个分类的产品，
     一行放不下"胶囊"就换到下一下，显得直观，一眼能看到。」
     ⇒ 本版**反转**的正是那一条，不是把它的记录抹掉：换行仍然是要求
       （一级胶囊该换行还换行），只是二级不再**全部铺开**。

   改版前（第 34 版）的实际观感：5 组全部展开 ⇒
     `.grp` 是 `flex-wrap:wrap` 且 `.cs{flex:1 1 100%}`，于是每一组都占
     「一行蓝色父类标签 + 若干行灰色子类胶囊」，5 组叠起来一共 23 枚子类胶囊
     一次全铺在页面上，产品详情正文被顶到很下面 —— 这正是运营要"折叠"的原因。

   改后结构（模板侧 `mobile/product_detail.html` 同步改了 DOM）：
     `.row`  = 5 枚一级胶囊所在的**可换行行**（375 屏上自然排成 3 + 2，
               与运营描述逐字一致：鹏为CRM / 电商商城搭建 / 领域解决方案 一行，
               提供对接接口 / 应用场景版本 下一行）；
     `.grp`  = 一枚一级胶囊的壳（`flex:0 0 auto`，不再吃满一行）；
     `.cs`   = 该组的二级面板，**默认 `display:none`**，只有 `.cs.on` 才展开。
   谁展开由服务端定（`_product_area_choose()` 的 `open`：当前产品所属那一组，
   没有就回落到第 1 组鹏为CRM）⇒ **JS 没跑起来时页面也是对的**（默认就展开一组），
   JS 只负责"点另一枚胶囊时切换"。 */

.m26-pnav{margin:10px 12px 0;padding:10px 12px;background:#fff;border-radius:11px;
  box-shadow:0 1px 5px rgba(20,50,90,.06);}
.m26-pnav .ttl{margin-bottom:6px;font-size:13px;font-weight:700;color:#16283d;}
.m26-pnav .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.m26-pnav .grp{flex:0 0 auto;}
.m26-pnav a.p{display:block;flex:0 0 auto;padding:3px 9px;border-radius:8px;
  background:#f2f6fc;color:#33506f;font-size:12.5px;font-weight:600;text-decoration:none;}
/* 展开中的那一枚 = 实心蓝（第 28 版以来一级胶囊一直是这个色），
   折叠中的 = 与二级胶囊同色的浅灰。两级用同一套"蓝=当前/灰=可点"的语言，
   折叠才有可读的形态差 —— 不然 5 枚一模一样的蓝胶囊看不出谁开着。 */
.m26-pnav .grp.on a.p{background:#0b63ce;color:#fff;}
.m26-pnav .cs{display:none;flex-wrap:wrap;gap:7px;margin-top:8px;padding-top:8px;
  border-top:1px solid #f0f4f9;}
.m26-pnav .cs.on{display:flex;}
.m26-pnav .cs a{flex:0 0 auto;padding:3px 9px;border-radius:8px;background:#f2f6fc;
  color:#33506f;font-size:12.5px;white-space:nowrap;text-decoration:none;}
.m26-pnav .cs a.cur{background:#e8f1fd;color:#0b63ce;font-weight:600;}

/* ---------- 产品详情：申请资料下载（第 28 版 No.126）----------
   源站是 4 个 1/4 宽的小图块，手机上 2×2。
   两列而不是一列：4 项内容都很短（4~6 个字 + 一句说明），
   一列会排成 4 条通栏、把页面拉长一大截。 */
.m26-dl{display:flex;flex-wrap:wrap;margin:0 -4px;}
.m26-dl li{width:50%;padding:4px;}
.m26-dl a{display:block;height:100%;padding:12px;background:#fff;
  border:1px solid #e4ecf7;border-radius:10px;}
.m26-dl a:active{border-color:#0b63ce;}
.m26-dl a b{display:block;font-size:14px;line-height:1.4;font-weight:600;color:#1f3a5c;}
.m26-dl a span{display:block;margin-top:5px;font-size:11.5px;line-height:1.5;color:#8494a8;}

/* ---------- 产品详情正文（第 28 版 No.126）----------
   只作用于 `.m26-pbody`（产品详情的正文容器，见 mobile/product_detail.html）。

   背景：那段正文是从旧站 **全宽 1200px 版式** 整段搬来的。视图侧已用
   `|mobilebody` 把 `<style>`/`<script>` 块拿掉，但**内联**的
   `float:right;width:410px`、`float:left;width:720px;height:460px` 去不掉，
   只能靠 `!important` 压。下面每一条都对应实测正文里真实存在的写法：

     ① `.kz > div`      —— 「410px 文字栏 + 720px 图栏」左右分栏 ⇒ 上下堆叠；
     ② `font-size:32px` —— 正文开头那个大标题（与页面 h1 重复）⇒ 缩到 20px；
     ③ `.djg-t dl`      —— 源站一行 7~9 个 67px 图标的网格 ⇒ 手机上两列、图标 46px；
     ④ 空 spacer div    —— 老站用 `clear:both;margin-bottom:70px` 的空 div 当间距
                            ⇒ 收到 10px（否则正文里会凭空多出 4~5 段空白）；
     ⑤ `img`            —— 一律 `max-width:100%`，别把页面撑出横向滚动条。

   ★ 这一整段**只加样式、不改一个字**：取资料的人要的是字和图，不是那些 px。
   ★ 与解决方案频道的差异：实测 solutions 里只有 9 条带 `<style>` 且**一条
     固定宽度都没有** ⇒ 那 9 条在手机上本来就是正常的，不需要这一段。
     如果以后运营反馈方案详情也有同类问题，把 product_detail.html 里
     正文那行「先过 mobilebody 过滤器」的写法照搬过去即可。
   ★ CSS 注释不是 Django 注释：注释里写变量/标签原文会被真解析
     （本文件刚才就因此报 Invalid filter: 'mobilebody'）—— 说明文字
     一律用中文描述，绝不写模板标签原文。
   ★★ 而且 **CSS 注释不嵌套**：注释正文里出现成对的注释括号，注释会提前
     闭合，后面那行说明变成垃圾码，**紧跟其后的第一条规则被整条吃掉**
     （本轮实测：被吃掉的是下面第一条 .m26-pbody .kz，产品正文的重排
       因此少了一半；症状是"样式好像生效了一半"，极难查）。
     规矩：注释正文里不写注释括号本身。 */
.m26-pbody .kz{width:auto!important;max-width:100%!important;margin:0!important;padding:0 4px;}
.m26-pbody .kz > div{float:none!important;width:auto!important;max-width:100%!important;
  height:auto!important;overflow:visible!important;display:block!important;
  margin:0 0 10px!important;text-align:left!important;}
.m26-pbody p[style*="font-size:32px"]{font-size:20px!important;line-height:1.4!important;}
.m26-pbody .djg-t{display:flex!important;flex-wrap:wrap;margin:0!important;}
.m26-pbody .djg-t dl{width:50%;display:flex;align-items:flex-start;gap:8px;
  margin:0!important;padding:7px 4px;box-sizing:border-box;}
.m26-pbody .djg-t dt{flex:0 0 auto;margin:0!important;}
.m26-pbody .djg-t dt img{width:46px!important;height:46px!important;}
.m26-pbody .djg-t dd{margin:0!important;min-width:0;font-size:13px;line-height:1.4;
  font-weight:600;color:#1f3a5c;}
.m26-pbody .djg-t dd ul{margin:3px 0 0!important;padding:0!important;list-style:none;
  font-size:12px;line-height:1.5;font-weight:400;color:#7c8b9e;}
.m26-pbody > div[style*="margin-bottom:70px"],
.m26-pbody > div[style*="margin-bottom:35px"]{margin-bottom:10px!important;height:0!important;}
.m26-pbody img{max-width:100%!important;height:auto;}
/* ★ 第 31 版（No.136）：这一段的 `height:auto` **保持原样**，图标尺寸的还原交给
   product_detail.html 里那段脚本（判据：属性宽度超过容器的按满宽自适应，
   没超的按属性高度 + 宽度按比例）。
   试过纯 CSS 的两条路，都不成立：
     · 删掉 `height:auto` ⇒ 小图标正常了，但 720x400 那几张变成 352x400 的竖长条；
     · 再加 `img[height]{width:auto!important}` ⇒ 同样问题（CSS 无法按属性值条件化尺寸）。
   谁要再动这两处 height，先用真机把 720x400 那几张图量一遍再下手。 */

/* ---------- 职位卡 ---------- */
.m26-job{padding:11px 12px;margin-bottom:9px;background:#fff;border-radius:11px;box-shadow:0 1px 5px rgba(20,50,90,.06);}
.m26-job .h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.m26-job .h h3{margin:0;font-size:15px;line-height:1.35;font-weight:600;color:#16283d;}
.m26-job .h .sal{flex:0 0 auto;font-size:14px;font-weight:700;color:#c2410c;}
.m26-job .tags{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px;}
.m26-job .tags span{padding:2px 9px;border-radius:12px;background:#f2f7fd;border:1px solid #e2ecf8;
  font-size:11.5px;line-height:18px;color:#41618c;}
.m26-job .desc{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:#6f7f92;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.m26-job .act{margin-top:10px;display:flex;gap:9px;}
.m26-job .act a{flex:1;padding:8px 0;border-radius:8px;text-align:center;font-size:13px;}
.m26-job .act .apply{background:#0b63ce;color:#fff;font-weight:600;}
.m26-job .act .view{background:#fff;color:#0b63ce;border:1px solid #bcd6f5;}

/* ---------- 详情页 ---------- */
.m26-art{background:#fff;padding:16px 15px 6px;}
.m26-art h1{margin:0 0 9px;font-size:19px;line-height:1.45;font-weight:700;color:#16283d;}
.m26-art .meta{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:10px;margin-bottom:12px;
  border-bottom:1px solid #eef2f7;font-size:12px;color:#93a1b3;}
.m26-art .body{font-size:15.5px;line-height:1.85;color:#28323f;word-wrap:break-word;overflow-wrap:break-word;}
.m26-art .body img{display:block;margin:12px auto;border-radius:6px;}
.m26-art .body p{margin:10px 0;}
.m26-art .body h1,.m26-art .body h2,.m26-art .body h3{font-size:16.5px;line-height:1.5;margin:16px 0 8px;color:#16283d;}
/* ---------- 第 49 版（2026-09-24 · 测试反馈 No.237）：行业小标题重新定版 ----------
   运营原话：「"仪器仪表行业"如图 E238 所示，汉字颜色太浅。请设计字体：
             字体大小及颜色风格。所有类似页面需要统一处理」
   真因（库里 20 条全部同款，实测出来不是猜的）：
     老站富文本把它写成
       <h3 style="height:42px;border-bottom:2px #db2129 solid;color:#333;
                  font-size:24px;font-weight:100;text-align:center;margin:0 320px;">
     ⇒ 「颜色太浅」**不是颜色的问题**，是 font-weight:100（极细字重）：
       手机屏上 24px 的超细汉字，笔画只剩 1px 上下，看上去发灰发虚；
       再加上 font-size:24px 在 342px 视口里过大、又被 height:42px 定高压着，
       整行既松散又发虚。所以重新定版：18px / 700 / 品牌深蓝 #16283d。
   ★ 行内样式优先级高于类选择器 ⇒ 必须 !important 才改得动。
     这不是偷懒：那 20 处的 style 属性写在**数据库正文**里，改不了源头；
     而 CSS 属性选择器读不出数值、一刀切又会连正常 h3 一起动，
     所以用 [style*="border-bottom"] 精准命中这 20 处带红下划线的小标题。
   ★ 只重定字号 / 字重 / 颜色 / 行高，**保留**红下划线与居中对齐 ——
     那是老站版式的一部分，运营没让去掉。
   ★ 作用域与三个正文容器一致（详情页 .m26-art .body / 板块页 .m26-inline /
     产品详情 .m26-pbody）⇒ 运营要的「所有类似页面统一处理」。 */
.m26-art .body h3[style*="border-bottom"],
.m26-inline h3[style*="border-bottom"],
.m26-pbody h3[style*="border-bottom"]{
  font-size:18px!important;font-weight:700!important;color:#16283d!important;
  line-height:1.5!important;height:auto!important;min-height:0!important;
  padding:0 0 7px!important;letter-spacing:.2px;
  margin-left:0!important;margin-right:0!important;}
.m26-art .body table{width:100%!important;max-width:100%;border-collapse:collapse;font-size:13.5px;}
.m26-art .body td,.m26-art .body th{padding:6px 7px;border:1px solid #e6ecf3;word-break:break-word;}
/* ★ 宽表格自己做横向滚动容器，别让整个页面跟着横向撑开 */
.m26-tbl{margin:12px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.m26-tbl table{margin:0!important;}
.m26-art .body iframe,.m26-art .body video{max-width:100%;}

/* ---------- G4. 第 44 版（No.207 / No.208 / No.209）：详情页正文反压 ----------
   运营原话（三条，其实同一个病灶）：
     No.207「手机端解决方案详情中 / 出现"竖排文字"如图E208所示，如果文字横排时，
             字体颜色需要明显一点；同理所有方案此处都有问题」
     No.208「手机端解决方案详情中 / 有段落汉字出轨了（屏幕外了被遮挡），如图：E209」
     No.209「手机端解决方案详情中 / 如图E210所示汉字"……CRM打通与线下零售店、
             线上电商平台、据互通，实现高效智能的大数据……"显示不全，请查所有方案。」

   真因（两件事叠在一起）：
     ① 详情页的正文此前**没挂 `mobilebody`**（对比：板块页 `m26_section.html`
        一直挂着）。于是老站正文自带的 `<style>` 全局生效，里面写着
        `float:left;width:720px` / `float:right;width:410px` 这类桌面分栏 ⇒
        375px 屏上每一行被撑到 720px：**横向出格（No.208）**、
        剩下的窄列逐字换行成**竖排（No.207）**、超宽部分被父级裁掉
        **显示不全（No.209）**。
     ② 这里（`.m26-art .body`）**只有** `word-wrap`，没有 G5 给 `.m26-inline`
        配的那套 `float:none!important;position:static!important;width:auto!important`
        反压 ⇒ 即使把 `<style>` 删了，老的**内联** `style="float:left;width:720px"`
        仍然生效。
   修法两条一起上（模板挂过滤器 + 这里补反压），少一条都还有残留。
   ★ 这一处修好，所有 extends `m26_detail.html` 的详情页一起好：解决方案 /
     资讯 / 产品 / 帮助单页 / 招聘职位。 */
.m26-art .body *{max-width:100%!important;box-sizing:border-box!important;
  min-height:0!important;}
.m26-art .body div,.m26-art .body p,.m26-art .body span,.m26-art .body li,
.m26-art .body ul,.m26-art .body ol,.m26-art .body dl,.m26-art .body dt,
.m26-art .body dd{
  float:none!important;position:static!important;
  width:auto!important;height:auto!important;min-height:0!important;}
/* 正文里的分栏容器交给这两条兜住：横排、可换行、按屏宽收缩 */
.m26-art .body li{list-style:inherit;}
.m26-art .body a{word-break:break-word;overflow-wrap:anywhere;}
/* ★ 正文颜色加深一档：运营说"如果文字横排时，字体颜色需要明显一点"。
   原来 #28323f 在老皮肤灰底上偏浅，正文段落统一到 #22303f。 */
.m26-art .body,.m26-art .body p,.m26-art .body li,.m26-art .body dd{
  color:#22303f;}
.m26-pn{display:flex;gap:9px;padding:14px 12px 0;}
.m26-pn a{flex:1;min-width:0;padding:11px 12px;background:#fff;border-radius:10px;font-size:13px;line-height:1.5;color:#2b4767;}
.m26-pn a span{display:block;margin-bottom:3px;font-size:11.5px;color:#93a1b3;}
.m26-pn a b{display:block;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* 第 27 版：上一篇/下一篇下面补一行「简要文字说明」（用户现场反馈第 3 条）。
   取的是相邻那条的摘要，没有摘要时视图侧已回退成「栏目名 · 日期」，
   所以这一行基本不会空着。单行截断 —— 这里只是个引子，不该比标题还长。 */
.m26-pn a em{display:block;margin-top:4px;font-style:normal;font-size:11.5px;line-height:1.5;
  color:#9aa7b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.m26-pn .empty{flex:1;background:transparent;}

/* ---------- 空态 / 提示 ---------- */
.m26-empty{padding:46px 20px;text-align:center;color:#9aa7b8;font-size:13.5px;line-height:1.8;}
.m26-empty .ico{font-size:30px;display:block;margin-bottom:8px;opacity:.5;}
.m26-tip{margin:10px 12px 0;padding:10px 12px;border-radius:9px;background:#fff8ec;
  border:1px solid #ffe4bd;color:#8a5a13;font-size:12.5px;line-height:1.7;}

/* ---------- 分页 ---------- */
.m26-page{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 12px 4px;}
.m26-page a,.m26-page span{padding:8px 18px;border-radius:20px;background:#fff;border:1px solid #e4ecf7;
  font-size:13px;color:#0b63ce;}
.m26-page .off{color:#c2ccd8;background:#f7f9fc;}
.m26-page .cur{background:#0b63ce;border-color:#0b63ce;color:#fff;font-weight:600;}

/* ==========================================================================
   第 30 版（2026-09-21 · 测试反馈 No.130 / No.132 / No.133 / No.135）
   —— 大卡图区"黄金比 / 三分之一"两档 + 描边强化 + 产品营销角标 + 方块墙升级
   ==========================================================================

   需求原话：
     No.130 产品中心：「手机上产品中心，产品图显示太小，同比扩大到屏幕宽度的
                       黄金分割比；边框现在颜色太淡，需要再设计显眼有冲击」
     No.132 产品中心：「产品中心展示需要能排序，另外角标可以加上热、推、火等
                       字样及对应颜色，后台可以配置」
                       ⇒ 排序改在视图（order_by order_id），角标字段在模型，
                         这里只负责把角标画出来（④）
     No.133 客户案例：「缩略图同比扩大，占到现有宽度的三份之一，整体显示再
                       大气一点，你有优化方案可以改进」
     No.135 鹏为思想：「缩略图显示太小，同比扩大到屏幕宽度的黄金分割比；
                       边框现在颜色太淡，需要再设计显眼有冲击；文字可以少点」
     （No.131「产品明细 1:1 复刻源站」与样式无关，改在
       templates/cms/mobile/product_detail.html）

   ★ 为什么新增两个类（`.m26-phi` / `.m26-third`）而不是直接改 `.m26-sol`：
     解决方案频道**没有**被要求放大图片 —— 它现在的一屏 3 个
     （120 = 472/3 − 9 − 24 − 4）是第 27 版在真机上量出来的。
     直接改 `.m26-sol` 的图尺寸等于顺手改了解决方案的版式，
     而本轮需求只落在 产品中心 / 鹏为思想（`.m26-phi`）与 客户案例（`.m26-third`）上。
     **尺寸分开、描边共用**：三条需求都说"边框颜色太淡"，那是大卡这一套设计的
     通病，所以描边强化写在共用的 `.m26-card.m26-sol` 上，三个频道一起变精神。

   ★ 边框为什么从"淡灰细边"换成"深蓝描边 + 顶条 + 光晕"：
     原来 2px `#e8eef7` 在白底上几乎没有边界感，运营的原话就是"颜色太淡"。
     新方案三件套：① 2px `#bcd6f5`（同色系但暗三档，白底上看得见）；
     ② 卡片顶部 3px 品牌蓝渐变条（一眼看出这是可点的卡片，也呼应页头）；
     ③ 常驻柔光晕，滑动 / 按下时换成实蓝 + 更强光晕。
     ★ 边框宽度**仍然保持 2px**（不改成 3px）：解决方案那个
       「120 = 472/3 − 9(间距) − 24(内边距) − 4(2px 边框×2)」的公式里这 4px
       是算进去的，加宽会让一屏 3 个变成 2.97 个（第 3 张被切掉一截）。
       要"更有存在感"就加顶条与光晕，**不动那 2px**。

   ★ 黄金比例的具体落法（口径要能复算，不要"看着差不多"）：
     375px 屏 → `.m26-sec` 左右各 12px ⇒ 卡片外宽 351px
              → 减内边距 24px、减边框 4px ⇒ 卡片**内容宽 323px**
              → × 0.618 ≈ 200px ⇒ 图 200×200
              → 卡高 200 + 24 + 4 = 228px，加 9px 间距 = 237px
              → 实测 472 / 237 ≈ 1.99 ⇒ **一屏 2 张**
     这是"把图放大到黄金比"的必然结果（原来图 120px 时一屏 3 张）。
     与 No.125 的"一屏 3 个"相比，是本条新需求**主动放宽**了，不是回归。
   ========================================================================== */

/* ---- ① 描边强化（第 34 版起**只剩产品中心 / 鹏为思想**这一档）----
   ★ 第 31 版（No.137）修正 —— 更早那版把这一组写在**共用的** `.m26-sol` 上，
     于是「解决方案」频道跟着变成了深蓝粗边 + 顶部渐变条 + 光晕。运营原话：

     「手机端解决方案中每个方案的边框蓝色太深了（边框恢复原来的配色，很淡的），
       当时热点或选择时才是现在这个色」

   ★★ 第 34 版（2026-09-22 · 测试反馈 No.143）—— **把 `.m26-third` 摘出去**。
     运营原话：「加载后客户案例列表后边框颜色太深，参照"解决方案"初始加载的样子，
               在滑动时才有深色动画效果。」
     ⇒ 客户案例的卡片走 `.m26-sol.m26-third`，本来是这一组里的（初始就
       `#bcd6f5` 蓝边 + 顶部渐变条 + 光晕），比解决方案的初始态（`#e8eef7` 淡灰）
       明显深一档 —— 这正是运营看到的那条。现在把 `.m26-third` 从这一组里去掉，
       客户案例的初始态就回到与解决方案**完全一样**的第 27 版淡边
       （`2px solid #e8eef7`，见上面 `.m26-card.m26-sol` 那条），
       只有滑动到 / 按下才变深蓝。
     ★ `.m26-third` 这个类名**保留**（它同时还负责"缩略图占屏宽 1/3"，
       见下面第 ② 段旁边那条），只是不再参与描边强化 —— 所以不要顺手把它删掉。
     ★ 后两条 `.on` / `:active` **保持全频道生效** —— 那正是运营说的"现在这个色"，
       滑动到哪张、按下哪张，哪张才亮成深蓝（原来是第 27 版就有的行为）。 ---- */
.m26-card.m26-sol.m26-phi{border-color:#bcd6f5;box-shadow:0 4px 14px rgba(11,99,206,.14);}
.m26-card.m26-sol.m26-phi::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  border-radius:9px 9px 0 0;background:linear-gradient(90deg,#0b63ce,#4aa8ff);}
.m26-card.m26-sol.on{border-color:#0b63ce;
  box-shadow:0 0 0 1px rgba(11,99,206,.45),0 9px 24px rgba(11,99,206,.30);}
.m26-card.m26-sol:active{border-color:#0b63ce;
  box-shadow:0 0 0 1px rgba(11,99,206,.45),0 9px 24px rgba(11,99,206,.30);}

/* ---- ② 产品中心 / 鹏为思想：图区宽度 = 卡片内容宽的黄金分割比 61.8% ----
   `align-self:flex-start` 是必须的：`.m26-card` 是 flex 行卡，交叉轴默认
   `stretch` 会把图拉满卡片高度，`aspect-ratio` 就失效了（图变成竖长条）。 */
.m26-card.m26-sol.m26-phi .pic{flex:0 0 61.8%;width:61.8%;height:auto;
  align-self:flex-start;aspect-ratio:1/1;border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(20,50,90,.07);}
/* 产品中心没有"右上角领域单字"（第 29 版 No.125 已去掉），
   所以不需要原来那条 28px 的让位；营销角标改压在图片上（见 ④）。 */
.m26-card.m26-sol.m26-phi .txt{padding-right:0;}
/* 极老内核（iOS 14 及以下）没有 aspect-ratio：退回固定高度，图仍是正方形。 */
@supports not (aspect-ratio:1/1){
  .m26-card.m26-sol.m26-phi .pic{height:200px;}
}

/* ---- ③ 客户案例：缩略图 = 屏幕宽度的三分之一 ----
   用 `vw` 而不是百分比：需求原话是"占到**现有宽度**的三份之一"，
   指的是一屏的宽度；`33.333vw` 在任何屏宽下都正好是 1/3，
   而百分比会随卡片内边距变化，320px 窄屏上就不再是 1/3 了。 */
.m26-card.m26-sol.m26-third .pic{flex:0 0 33.333vw;width:33.333vw;height:33.333vw;
  border-radius:12px;box-shadow:inset 0 0 0 1px rgba(20,50,90,.07);}

/* ---- ④ 产品营销角标（No.132）：压在**图片左上角**，不占文字区 ----
   为什么不沿用 `.m26-badge` 的右上角：图放大到黄金比之后文字区只剩约 112px，
   右上角再压一枚角标会把标题挤成三行。压图是电商的通用做法，
   也不会与"右上角领域单字"（解决方案/客户案例仍在用）撞位。
   配色由 `Product.badge_css` 给出（后台可选，留空按文字自动配）。 */
.m26-card .m26-badge.m26-badge-tag{top:10px;left:10px;right:auto;width:auto;
  min-width:34px;height:23px;padding:0 9px;border-radius:7px;
  font-size:12.5px;line-height:23px;letter-spacing:.5px;
  box-shadow:0 2px 8px rgba(0,0,0,.22);}
.m26-badge-tag.m26-badge-red{background:linear-gradient(135deg,#ff6a5a,#dc1f0d);}
.m26-badge-tag.m26-badge-orange{background:linear-gradient(135deg,#ffab45,#ef7300);}
.m26-badge-tag.m26-badge-gold{background:linear-gradient(135deg,#ffcf4d,#dd9500);}
.m26-badge-tag.m26-badge-green{background:linear-gradient(135deg,#46d585,#0f9a4a);}
.m26-badge-tag.m26-badge-blue{background:linear-gradient(135deg,#1f83e8,#0b4fa8);}

/* ---- ⑤ 鹏为思想「小方块墙」（No.135）：3 列 → 2 列、描边强化、文字收一行 ----
   3 列时每格约 109px（375 屏），最长的板块名「解决企业经营管理难题」10 个字
   要排 3 行、字号只有 12.5px —— 运营的原话就是"缩略图显示太小…文字可以少点"。
   改 2 列后每格约 168px（+54%），标题收到 2 行、字号 14px。 */
.m26-tiles li{width:50%;}
.m26-tiles a{min-height:92px;padding:13px 11px;border:2px solid #cfe0f5;
  border-radius:13px;box-shadow:0 4px 14px rgba(11,99,206,.13);}
.m26-tiles a b{font-size:14px;line-height:1.4;-webkit-line-clamp:2;}
.m26-tiles a span{margin-top:6px;font-size:11px;}
/* 「资料待整理」那一档仍是虚线，但换成同色系的深一档 —— 虚线是它的语义
   （暂时没内容），第 28 版特意做的区分，本轮只加大加粗、不改语义。 */
.m26-tiles a.pend{border:2px dashed #d2dce9;background:#f8fafd;box-shadow:none;}
.m26-tiles a:active,.m26-tiles a.on{border-color:#0b63ce;
  box-shadow:0 0 0 1px rgba(11,99,206,.40),0 8px 20px rgba(11,99,206,.26);}

/* ---- ⑥ 产品详情：面包屑（第 30 版 No.131，源站 ②）----
   源站是 `plc rows` 那一行（首页 » 鹏为产品中心 » 鹏为CRM » 当前产品），
   手机上原样保留层级。**第 51 版（No.244）起每一级都是可点的链接**
   （此前中间几级是 `<span>`、只有「首页」能点；原因与地址映射见
   product_detail.html 与 cms/views.py 里那段手机端地址映射函数的注释）。
   ★ 注释里**不许出现 url 加左括号**那种写法（第 48 版 AT-17 有护栏：
     这份 CSS 里那个标记的计数必须为 0 —— 基准目录已从页面变成 CSS 文件，
     真出现就意味着相对路径会让图 404）。
   收在一张白卡里，与上方那块分类导航（.m26-pnav）同一套观感。 */
.m26-crumb{margin:10px 12px 0;padding:9px 12px;background:#fff;border-radius:10px;
  font-size:12.5px;line-height:1.6;color:#8494a8;
  box-shadow:0 1px 5px rgba(20,50,90,.06);}
.m26-crumb a{color:#2f6bb5;}
/* ★ 第 51 版（No.244）：最后一级（就是当前这个产品/页面本身）虽然也是链接，
   但它在语义上是"你在这里"，所以**保留原来 `<b>` 的深色加粗观感**，
   只把光标与点击能力加上去 —— 否则整行全蓝，看不出哪个是当前位置。
   （PC 端 `templates/cms/product_detail.html` 的最后一级仍是 `<span>`：
     本轮运营明确点名"大中型企业CRM 没有链接"，只改手机端，PC 一个字不动。） */
.m26-crumb a.cur{color:#16283d;font-weight:600;}
.m26-crumb i{margin:0 5px;font-style:normal;color:#c2ccd8;}
.m26-crumb b{font-weight:600;color:#16283d;}

/* ---- ⑦ 产品详情：CRM整体解决方案服务商（第 30 版 No.131，源站 ⑤）----
   源站是 4 个 297px 的横排方块 + 一行大标题（`crmq` 块，连同它自己的
   `<style>` 一起写在 PC 模板里）。手机上改 2×2：
   每格内容很短（一个数字 + 一句说明），一列会排成 4 条通栏把页面拉长。
   ★ 4 张图沿用服务器上传目录 `/uploadfiles/pictures/qt/*.png`
     （线上核验 4 张全 200），不搬进 static —— 与源站同一份，不会分叉。 */
.m26-crmq{margin:14px 12px 0;padding:16px 12px 14px;background:#fff;border-radius:14px;
  box-shadow:0 4px 14px rgba(11,99,206,.10);}
.m26-crmq h2{margin:0 0 14px;text-align:center;font-size:16px;line-height:1.35;
  font-weight:700;color:#16283d;}
.m26-crmq h2 i{display:block;margin-top:6px;font-style:normal;font-size:12.5px;
  font-weight:400;color:#8494a8;}
.m26-crmq ul{display:flex;flex-wrap:wrap;margin:0 -5px;}
.m26-crmq li{width:50%;padding:5px;}
.m26-crmq li > div{padding:13px 8px;text-align:center;background:#f5f8fd;border-radius:11px;}
.m26-crmq li img{display:block;width:56px;height:56px;margin:0 auto 7px;}
.m26-crmq li b{display:block;font-size:14px;line-height:1.35;font-weight:700;color:#c2410c;}
.m26-crmq li span{display:block;margin-top:4px;font-size:11.5px;line-height:1.5;color:#7c8b9e;}

/* ==========================================================================
   第 31 版（2026-09-21 · 测试反馈「temp.haocrm.cn测试反馈」本轮六条）
   —— 正文图片还原尺寸 + 方案页「按行业分组 + 单字导航 + 分色角标」
   ==========================================================================
   需求原话：
     (1)「手机端中型crm详情页面源来的样子… 原来的图标没有 1:1 显示，现在膨胀了」
         ⇒ 见文件开头 `.m26 img` 那段推导；实际修复在 product_detail.html 的脚本里
     (2)「手机端解决方案中每个方案的边框蓝色太深了（边框恢复原来的配色，很淡的），
          当时热点或选择时才是现在这个色」
         ⇒ 第 30 版 ① 段已把默认态收窄到 `.m26-phi` / `.m26-third`
     (3)「手机端解决方案显示"129条"不要显示」⇒ 改在模板 hero 的判据上
     (4)「电脑端导航… 手机上换成一个字导航（角标字），点击导航后弹窗，
          能快速定位到对应方案位置」⇒ 本段 ② `.m26-idx` + ③ `.m26-sheet`
     (5)「排序后台需要能配置方案，同类方案集中展示」
         ⇒ 排序改在视图（类别 > 类内两级 order_id）+ 本段 ④ `.m26-ghead`
     (6)「相邻的行业方案角标颜色应该不同，现在全是蓝色，感觉完全一样」
         ⇒ 本段 ① 六色色板：「同行业同色、相邻行业必不同色」

   ★ 与第 30 版的关系：那一版只动"产品中心 / 客户案例 / 鹏为思想"三个频道，
     本版六条里有五条落在「解决方案」频道 —— 而它正是第 27 版量出来、
     第 30 版刻意**没动**版式的那个频道（图区仍是 120x120、一屏 3 张）。
     本版不动它的卡片尺寸，只加：分组、导航、配色，以及把误伤的描边还回去。
   ★ 页面内锚点跳转（单字导航 → 分组）依赖前面那条 `html{scroll-behavior:smooth}`
     与 `.m26-ghead` 的 `scroll-margin-top`：吸顶条高 52px，不补就会切掉落点。
   ========================================================================== */

/* ---- ① 行业配色（6 色轮转）----
   为什么是"按分组序号轮转"而不是"按行业名取 hash"：
   需求要的是**相邻不同**（"相邻的行业方案角标颜色应该不同，这样看起来清晰"），
   而 hash 会撞色 —— 47 个行业只有 6 个色，相邻同色几乎必然出现。
   序号轮转是唯一能"保证"相邻必不同的做法：第 n 个行业固定用 (n mod 6) + 1 号色。
   代价是同一行业在不同页面可能换色，但本频道 129 条**不分页**、一次渲染完，
   所以每次打开看到的配色都一样。
   六色 = 品牌蓝 + 五个对比明显、压白字都够深的颜色（角标上是白字，浅色不行）。 */
.m26-hue1{background:linear-gradient(135deg,#1a7ae0,#0b4fa8);}
.m26-hue2{background:linear-gradient(135deg,#12b981,#0a8f62);}
.m26-hue3{background:linear-gradient(135deg,#f59e0b,#d97706);}
.m26-hue4{background:linear-gradient(135deg,#8b5cf6,#6d28d9);}
.m26-hue5{background:linear-gradient(135deg,#ef4444,#c81e1e);}
.m26-hue6{background:linear-gradient(135deg,#0ea5e9,#0369a1);}

/* ---- ② 吸顶「单字索引」----
   PC 端那套导航是 47 个行业名平铺成三列；手机上照抄必然横向溢出、或排成极长一列。
   运营给的做法是"一个字"：一枚按钮一个字 —— 字就是角标上那个字
   （来源 = 栏目后台可配的「手机端角标单字」，见 Column.badge_char），
   并且一字一色，与它对应的那一组方案角标同色 ⇒ 扫一眼就知道"绿色是环保那组"。
   47 个字在 375px 屏上一行放不下，所以这条本身可横向滑动（老站手机版已有的手势）。 */
.m26-idx{position:sticky;top:0;z-index:28;background:#fff;
  border-bottom:1px solid #e9eef5;box-shadow:0 1px 4px rgba(15,40,80,.05);}
.m26-idx .track{display:flex;align-items:center;gap:9px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;padding:9px 12px;}
.m26-idx .track::-webkit-scrollbar{display:none;}
.m26-idx a{flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  color:#fff;font-size:15px;font-weight:700;line-height:34px;text-align:center;}
.m26-idx a:active{transform:scale(.92);}
.m26-idx .lead{flex:0 0 auto;width:auto;height:34px;padding:0 12px;border-radius:17px;
  background:#eef4fd;color:#0b63ce;font-size:12.5px;font-weight:600;line-height:34px;}

/* ---- ③ 弹窗「全行业索引」----
   为什么不"点字直接跳"就完事：一屏最多露 8~9 个字，用户点完还得回去滑；
   弹窗里 47 个行业一次看全（每项 = 单字 + 行业名 + 条数），点哪去哪。
   这正是运营那句「点击导航后弹窗，能快速定位到对应方案位置」。
   固定定位 + 底部面板（sheet）：手机上单手够得着，也不遮挡上方内容；
   `max-width:640px` + `margin:0 auto` 是为了与整站 `.wrap` 的 640px 上限对齐。 */
.m26-sheet{position:fixed;left:0;right:0;top:0;bottom:0;z-index:120;
  display:none;max-width:640px;margin:0 auto;}
.m26-sheet.on{display:block;}
.m26-sheet .mask{position:absolute;left:0;right:0;top:0;bottom:0;
  background:rgba(8,24,48,.48);}
.m26-sheet .panel{position:absolute;left:0;right:0;bottom:0;max-height:76%;
  display:flex;flex-direction:column;background:#fff;
  border-radius:16px 16px 0 0;box-shadow:0 -6px 26px rgba(8,24,48,.24);}
.m26-sheet .hd{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:14px 15px 10px;border-bottom:1px solid #eef2f7;}
.m26-sheet .hd b{font-size:15.5px;font-weight:700;color:#16283d;}
.m26-sheet .hd a{font-size:13px;color:#8494a8;}
.m26-sheet .grid{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-wrap:wrap;margin:0;padding:11px 9px 18px;}
.m26-sheet .grid li{width:33.333%;padding:4px;}
.m26-sheet .grid a{display:flex;align-items:center;gap:7px;padding:7px 8px;
  background:#f6f9fd;border:1px solid #e8eff8;border-radius:10px;}
.m26-sheet .grid a b{flex:0 0 auto;width:24px;height:24px;border-radius:7px;
  color:#fff;font-size:13px;font-weight:700;line-height:24px;text-align:center;}
.m26-sheet .grid a span{flex:1 1 auto;min-width:0;font-size:11.5px;line-height:1.35;
  color:#3c5573;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.m26-sheet .grid a i{flex:0 0 auto;font-style:normal;font-size:11.5px;color:#9aa7b8;}
.m26-sheet .grid a.cur{border-color:#0b63ce;background:#eaf3ff;}
/* 弹窗打开时锁页面滚动（JS 加这个类）。只锁 body 不锁 html —— 锁 html 会连
   弹窗自己那层 overflow-y:auto 也一起冻住。 */
body.m26-locked{overflow:hidden;}

/* ---- ④ 行业分组标题 ----
   "同类方案集中展示"的前提是每条内容都归到一个明确的行业栏目
   （project 频道那 51 个栏目就是 51 个行业）。既然按行业排好了，就必须给出**边界**：
   不给分组标题的话，47 个行业头尾相接排下来，用户看不出"从这里换行业了"。
   样式与 `.m26-sec-h` 同源，只多一枚同色的单字标签（与角标同色，形成呼应）。 */
.m26-ghead{display:flex;align-items:center;gap:9px;padding:14px 4px 9px;
  scroll-margin-top:58px;}
.m26-ghead b{flex:0 0 auto;width:26px;height:26px;border-radius:8px;
  color:#fff;font-size:14px;font-weight:700;line-height:26px;text-align:center;}
.m26-ghead h2{margin:0;font-size:15.5px;line-height:1.3;font-weight:700;color:#16283d;}
.m26-ghead .n{margin-left:auto;font-size:11.5px;color:#93a1b3;}

/* 平板 / 大屏手机（≥600px）：整体放宽一点。
   ★ 这里**不是**两列布局（原文案写「卡片两列」是错的：`.m26-card` 始终是
     `display:flex` 的行卡，从没做过 `flex-wrap` 的两列 —— 第 27/28 版核对
     模板时发现，改正以免后来人照着这条注释去改）。这里的唯一作用是把
     行卡的配图与字号放大，别让 8 寸屏上一条卡显得空。
   ★ 第 28 版补上 `.m26-sol` 的对应规则：不加的话，≥600px 时**行卡变成
     150x106 而大卡还停在 120x120**，同一个站上两种卡的大小关系正好反了。 */
@media screen and (min-width:600px){
  .m26-hero{padding:26px 22px 22px;}
  .m26-hero h1{font-size:25px;}
  .m26-sec{padding:18px 20px 2px;}
  .m26-card .pic{flex-basis:150px;width:150px;height:106px;}
  .m26-card h3{font-size:16px;}
  .m26-card.m26-sol .pic{flex-basis:150px;width:150px;height:150px;}
  .m26-card.m26-sol h3{font-size:17px;}
  .m26-wall li{width:25%;}
}

/* ============================================================
   第 32 版（2026-09-22 · 测试反馈 No.138 / No.139 / No.140 / No.141）
   ------------------------------------------------------------
   ★ 这一段**故意写在全文件最后、所有 @media 之外**。
     原因：本文件末尾那条 `@media screen and (min-width:600px)` 会把
     `.m26-card.m26-sol .pic` 从 104 改到 150 —— 而本轮要的是"按源站尺寸"
     （固定 130 宽），必须**在所有断点下都成立**。
     同权重看声明先后 ⇒ 只有写在最后才能真正压住那条媒体查询
     （写在前面会被 ≥600px 的规则反过来盖掉，宽屏上尺寸又跑偏）。

   A 段（No.138 1.1）产品中心「一排两个」—— 1:1 对齐源站手机版的
      `.g-bd .m-con-1 a{float:left;width:45%;margin:0 2% 10px;text-align:center;
       line-height:20px;display:block;font-size:14px}` +
      `a img{border:1px solid #e2e2e2;margin-bottom:8px;width:100%}`
      （规则原文见 _v32/src_m/css_Mobile_Css_newslist.css_v_1.0.1）
      ★ 用 flex 复刻而非直接抄 float：45% + 左右各 2% = 49% 一格，
        两格 98%，行为与 float 完全一致（都是"一格 45%、两格一行、
        右侧留 2%"），但不用再管浮动清除。
   B 段（No.141 4.2）思想页缩略图 = 源站尺寸。
      源站 `.g-bd .m-con-2 dt{width:40%}` 装着 130x98 的图
      （源文件就叫 `…_130X98.jpg`）。卡片内容宽 323px × 40% ≈ 129px，
      正好等于源站的 130 —— 所以这里也写 40% + 130/98 的宽高比，
      375 屏上量出来就是 129x97，与源站逐像素同尺寸。
   C 段（No.140 3.2）资讯分类过滤 chips。
   D 段（No.140 3.3）异步「加载更多」取代「上一页 / 下一页」。
   E/F 段（No.139 2.3）案例详情尾部「资料下载」表单 + 「CRM整体解决方案
      服务商」实力背书块，规则数值全部按源站抄（见文件里的逐条对照）。
   ============================================================ */

/* ---- A. 产品中心：一排两个 ---- */
.m26-p2{display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px 12px 0;}
.m26-p2>a{flex:0 0 45%;margin:0 2% 12px;display:block;text-align:center;text-decoration:none;color:#333;}
.m26-p2>a .p{position:relative;border:1px solid #e2e2e2;border-radius:6px;overflow:hidden;background:#fff;}
.m26-p2>a .p img{display:block;width:100%;height:auto;aspect-ratio:130/93;object-fit:cover;}
.m26-p2>a .p.noimg{padding-top:71.54%;background:#f1f5fa;}
.m26-p2>a .p.noimg::after{content:"";position:absolute;left:50%;top:50%;width:38px;height:30px;
  margin:-15px 0 0 -19px;border:1px dashed #c3d2e4;border-radius:4px;}
.m26-p2>a .t{display:block;margin-top:8px;height:22px;line-height:22px;font-size:14px;color:#333;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.m26-p2>a .d{display:block;margin-top:2px;font-size:11.5px;line-height:1.35;color:#9aa7b8;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.m26-p2>a .tag{position:absolute;left:0;top:0;z-index:2;padding:2px 8px;font-size:11.5px;
  line-height:18px;color:#fff;border-radius:6px 0 8px 0;}
.m26-p2>a:active .p{border-color:#0b63ce;box-shadow:0 0 0 1px rgba(11,99,206,.35);}

/* ---- A2. 产品详情大图（No.138 1.2：源站 pro_gd2 那块）---- */
.m26-pbanner{margin:0 0 14px;border-radius:10px;overflow:hidden;background:#f1f5fa;}
.m26-pbanner img{display:block;width:100%;height:auto;}

/* ---- B. 思想页缩略图：源站尺寸（130x98，占卡片内容宽 40%）---- */
.m26-card.m26-sol.m26-src .pic{flex:0 0 40%;width:40%;height:auto;aspect-ratio:130/98;
  align-self:flex-start;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(20,50,90,.07);}
.m26-card.m26-sol.m26-src .txt{padding-right:0;}

/* ---- C. 资讯分类过滤条 ---- */
.m26-cats{display:flex;flex-wrap:wrap;gap:8px;padding:12px 12px 0;}
/* ★ 第 44 版（No.211）：未选中态加深加粗。
   运营原话：「鹏为咨讯、走进鹏为 它们的胶囊中的文字未被选择中时颜色太淡，
              看不清，是否加大加粗或加黑，请设计一下与整体协调。」
   实测原值 #33506f on #f2f6fc，对比度 7.1:1 —— 数值上过线，但 13px 细体
   在手机低亮度屏上确实发虚。处理：前景压到 #1b3a5c（对比度 10.4:1）、
   字重提到 600、底色略压一档到 #e9f0f9（让白字未选中态与选中态层次更清楚）。
   ★ 选中态（`.on`，#0b63ce 底白字）一个字没动。 */
.m26-cats a{flex:0 0 auto;padding:6px 14px;border-radius:16px;background:#e9f0f9;color:#1b3a5c;
  font-size:13px;line-height:20px;font-weight:600;white-space:nowrap;text-decoration:none;}
.m26-cats a i{font-style:normal;margin-left:5px;font-size:11.5px;color:#8ba0b8;}
.m26-cats a.on{background:#0b63ce;color:#fff;font-weight:600;}
.m26-cats a.on i{color:#cfe3fb;}
.m26-cats a:active{border-color:#0b63ce;}

/* ---- D. 异步「加载更多」---- */
.m26-more{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px 4px;}
.m26-more button{min-width:150px;padding:10px 22px;border:1px solid #cfe0f5;border-radius:22px;
  background:#fff;color:#0b63ce;font-size:14px;line-height:20px;cursor:pointer;}
.m26-more button:active{background:#0b63ce;border-color:#0b63ce;color:#fff;}
.m26-more button[disabled]{opacity:.55;cursor:default;}
.m26-more .tip{font-size:12px;color:#9aa7b8;}
.m26-more .end{font-size:12px;color:#b0bccb;}

/* ============================================================
   E. No.139 2.3 —— 案例详情尾部「资料下载」表单
   ------------------------------------------------------------
   逐条对照源站（_v32/src_m/case_det_a.html 内联 <style> 与
   css_Mobile_css_skins.css_v_1.0.1 的 .h_tit / .sq_form）：
     源站                                    本版
     .h_tit{height:2rem;line-height:2rem;   → 32px / 32px（rem 基数 16）
       margin-bottom:.5rem;border-bottom:     → 8px / 1px solid #ddd
       1px solid #ddd}
     .h_name{color:#333;font-size:1rem}     → 16px
     h_tit em{color:#c2c2c2;font-family:      → 同值（0.8rem = 12.8px）
       Arial;font-size:.8rem;uppercase}
     .sq_form{background:#fff;border:1px      → 同值（居中改由父容器给外边距）
       dashed #ccc;padding:1.5rem 5%;width:90%}
     li span{float:left;width:21%;            → flex 列 0 0 21%（不用 float）
       text-align:right;color:#666;font-size:1rem;padding-right:4%}
     select{border:1px solid #ddd;padding:  → 同值
       4px 3%;margin-right:2%;font-size:1rem}
     .ipt{width:58%;height:1.8rem;          → 同值（1.8rem = 28.8 → 30px）
       border:1px solid #dbdbdb;font-size:.9rem}
     textarea{width:58%;height:6rem;        → 同值（6rem = 96px）
       border:1px solid #dbdbdb;resize:none}
     .li5{height:7rem}                      → 一行 96px 文本域 + 标签顶对齐
     .ip1{background:#0374ce;width:6rem;     → 同值（6rem = 96px）
       height:2rem;color:#fff;border-radius:.2rem;margin-left:25%}
     .ip2{background:#db2028;…}              → 同值
   ★ 唯一的结构性改动：`li` 用 flex 而不是 float + width:58%，
     因为 flex 在 320px 的小屏上不会因为"21% + 4% + 58%"超过 100% 而换行。
     数值一个没动。
   ============================================================ */
.m26-lead{margin:18px 0 0;}
.m26-lead .h_tit{display:flex;align-items:baseline;height:32px;line-height:32px;
  margin:0 12px 8px;border-bottom:1px solid #ddd;}
.m26-lead .h_tit .h_name{color:#333;font-size:16px;font-weight:600;text-decoration:none;}
.m26-lead .h_tit em{font-style:normal;color:#c2c2c2;font-family:Arial,Helvetica,sans-serif;
  font-size:12.8px;text-transform:uppercase;margin-left:3px;}
.m26-lead .sq_form{background:#fff;border:1px dashed #ccc;padding:18px 5%;text-align:left;
  margin:10px 12px 18px;border-radius:6px;}
.m26-lead .sq_form ul{list-style:none;margin:0;padding:0;}
.m26-lead .sq_form li{display:flex;align-items:center;min-height:32px;margin-bottom:12px;}
.m26-lead .sq_form li>span{flex:0 0 21%;box-sizing:border-box;text-align:right;color:#666;
  font-size:15px;padding-right:4%;}
.m26-lead .sq_form li select{flex:1 1 auto;min-width:0;box-sizing:border-box;
  border:1px solid #ddd;border-radius:4px;padding:5px 3%;font-size:14px;color:#333;background:#fff;}
.m26-lead .sq_form li input{flex:1 1 auto;min-width:0;box-sizing:border-box;width:58%;
  height:30px;line-height:20px;padding:0 8px;border:1px solid #dbdbdb;border-radius:4px;
  font-size:14px;color:#333;background:#fff;}
.m26-lead .sq_form li textarea{flex:1 1 auto;min-width:0;box-sizing:border-box;width:58%;
  height:96px;line-height:1.5;padding:6px 8px;border:1px solid #dbdbdb;border-radius:4px;
  font-size:14px;color:#333;background:#fff;resize:none;}
.m26-lead .sq_form li.li5{align-items:flex-start;}
.m26-lead .sq_form li.li5>span{padding-top:7px;}
.m26-lead .sq_form p{display:flex;align-items:center;margin:0;}
.m26-lead .sq_form .ip1,.m26-lead .sq_form .ip2{flex:0 0 auto;width:96px;height:32px;border:none;
  border-radius:3px;font-size:15px;color:#fff;cursor:pointer;-webkit-appearance:none;}
.m26-lead .sq_form .ip1{background:#0374ce;margin-left:25%;}
.m26-lead .sq_form .ip2{background:#db2028;margin-left:8px;}
.m26-lead .sq_form .ip1[disabled],.m26-lead .sq_form .ip2[disabled]{opacity:.55;cursor:default;}
/* 蜜罐：正常浏览器看不到，填了就一定是机器人（与 cms/lead_forms.py 的判据同名） */
.m26-lead .sq_form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.m26-lead .msg{display:none;margin:0 12px 16px;padding:10px 12px;border-radius:6px;
  font-size:13.5px;line-height:1.6;}
.m26-lead .msg.ok{display:block;background:#eefaf1;border:1px solid #bde5c8;color:#1c7a3a;}
.m26-lead .msg.bad{display:block;background:#fef4f4;border:1px solid #f5c2c7;color:#b02a37;}

/* ============================================================
   F. No.139 2.3 —— 「CRM整体解决方案服务商」实力背书块
   ------------------------------------------------------------
   逐条对照源站 case_det_a.html 里的内联 <style>（原样）：
     .fws{padding:0 1.6% 1.5rem;box-sizing:border-box;margin-bottom:3.3rem;background:#fff}
     h2{text-align:center;color:#000;font-size:1.33rem;line-height:100%}
     h2 span{display:block;font-size:1rem;color:#666;padding:.5rem 0 1.2rem 0}
     .fws ul li{width:49.5%;border:1px solid #efefef;margin-bottom:.38rem;height:12.8rem;
       float:left;text-align:center;color:#666;font-size:.92rem;box-sizing:border-box;background:#fff}
     .fws ul li:nth-child(2n){float:right}
     .fws ul li img{display:block;width:5.4rem;margin:0 auto;padding-top:.8rem}
     .fws ul li i{display:block;color:#db2129;font-size:1rem;line-height:2.8rem;position:relative;
       margin-bottom:.2rem}
     .fws ul li i:before{content:"";position:absolute;height:1px;width:5.8rem;left:27%;top:90%;
       background:#c4c4c4}
   rem 基数 16：1.33rem=21.3→21px、1rem=16px、.5rem=8px、1.2rem=19px、
   .38rem=6px、12.8rem=205px、.92rem=14.7px、5.4rem=86px、.8rem=13px、
   2.8rem=45px、5.8rem=93px。
   ★ 那条 i:before 的下划线：源站写 `left:27%`，是因为它按 li 宽 49.5%
     的百分比定位；本版两列布局的 li 宽由 flex 决定，百分比会随屏宽漂。
     所以改成 `left:50% + margin-left:-46.5px`（= 宽 93 的一半）——
     视觉完全一致（都是居中的 93px 细线），但在任何屏宽下都居中。
   ★ 4 张圆形渐变图标用源站自己那 4 张（static/cms/img/fws/ico1..4.jpg，
     从 /Mobile/images/index/ico{1..4}.jpg 取得），不自己画 —— 需求原文
     要的就是"这 4 个圆形图标"，重画只会引入色差。
   ============================================================ */
.m26-fws{padding:0 12px 0;margin:0 0 20px;background:#fff;text-align:center;}
.m26-fws h2{margin:14px 0 0;color:#000;font-size:21px;line-height:1.15;font-weight:700;}
.m26-fws h2 span{display:block;font-size:16px;line-height:1.4;color:#666;
  padding:8px 0 19px;font-weight:400;}
.m26-fws ul{list-style:none;display:flex;flex-wrap:wrap;align-items:flex-start;margin:0;padding:0;}
.m26-fws li{width:49.5%;height:205px;box-sizing:border-box;border:1px solid #efefef;
  margin-bottom:6px;text-align:center;color:#666;font-size:14.7px;line-height:1.5;background:#fff;}
.m26-fws li:nth-child(2n){margin-left:1%;}
.m26-fws li img{display:block;width:86px;margin:0 auto;padding-top:13px;}
.m26-fws li i{display:block;position:relative;color:#db2129;font-size:16px;line-height:45px;
  font-style:normal;margin-bottom:3px;}
.m26-fws li i:before{content:"";position:absolute;left:50%;top:90%;width:93px;height:1px;
  margin-left:-46.5px;background:#c4c4c4;}
.m26-fws li span{display:block;}

/* ============================================================
   G. 第 34 版（2026-09-22 · 测试反馈 No.140 / No.142 / No.143 /
      No.144 / No.146 / No.147）—— 每一条对应下面一小段
   ------------------------------------------------------------
   本段是"新增"，**没有一条是改写上面已有规则的默认态** ——
   唯一改动默认态的是上面 ①（把 `.m26-third` 从描边强化那组摘掉，No.143）。
   ============================================================ */

/* ---------- G1. No.140：产品中心（一排两个的图片墙）滑动时的蓝色焦点框 ----------
   运营原话：「手机上产品中心：滑动时焦点产品需要蓝色边框动态效突出显示，
             参照解决方案中的动态的蓝边框效果」

   ★ 为什么不能直接复用上面 `.m26-card.m26-sol.on` 那一套：
     产品中心第 32 版（No.138 1.1）已经按运营要求改回**源站手机版的一排两个**
     （`card_style='grid2'` ⇒ `.m26-p2 > a` 的图片墙），页面上**根本没有**
     `.m26-card.m26-sol` 这种行卡 —— 老选择器在这里一个元素都选不中，
     脚本加了 `.on` 也不会变蓝。所以这一条必须给 `.m26-p2 > a` 单独写。

   ★ 蓝框画在 `.p`（包着图片的那个框）上而不是整个 `a` 上：
     `a` 里除图片还有产品名与一行简介，把框画在 `a` 上会让"框"离图片很远、
     看着像两个东西。源站 PC 页的高亮也是画在图片框上的，口径一致。
   ★ 默认就是 `1px solid #e2e2e2`（源站原样，不动它），只改 border-color 与
     box-shadow ⇒ **不产生任何尺寸跳变**，卡片不会抖（与 `.m26-sol` 同一个讲究）。
   ★ `transition` 只写在 `.p` 上，不写在 `a` 上：`a` 上还有 `:active` 的旧规则，
     两者叠加会让颜色变化的时长不一致。 */
.m26-p2>a .p{transition:border-color .18s ease,box-shadow .18s ease;}
.m26-p2>a.on .p{border-color:#0b63ce;
  box-shadow:0 0 0 1px rgba(11,99,206,.45),0 9px 24px rgba(11,99,206,.30);}
.m26-p2>a.on .t{color:#0b63ce;font-weight:600;}

/* ---------- G2. No.146 / No.147：卡片左上角的「类别」角标 ----------
   运营原话：
     No.146「在每个思想左上角显示属哪类思想，前面你设计过的效果」
     No.147「在每个资讯左上角显示属哪类资讯，参照手机端鹏为思想实现」

   ★ 与右上角那枚 `.m26-badge`（一个行业汉字）不是一个东西：
     这个是**分类全称**（「解决企业经营管理难题」/「鹏为动态」…），
     所以压在**左上角**、横排、字号更小，与右上角那枚并存也不打架。
   ★ 挂点是 `.pic`（图片容器）而不是整张卡：`.pic` 已经有了
     `overflow:hidden` 与圆角 ⇒ 角标天然被裁成圆角边，
     与 `.m26-p2>a .tag`（产品营销角标）是同一种视觉语言 ——
     这就是运营说的"前面你设计过的效果"。
   ★ `max-width:100%` + `text-overflow:ellipsis`：思想页缩略图只有
     卡片内容宽的 40%（375 屏上约 129px），栏目名「解决企业经营管理难题」
     10 个字刚好放得下；万一个别栏目名更长，截断而不是把图顶破。
   ★ 为什么要给 `.pic` 加 `position:relative`：`.m26-card .pic` 原来只有
     `overflow:hidden`、没有定位上下文，绝对定位的角标会跑到卡片外边去。 */
.m26-card.m26-sol .pic{position:relative;}
.m26-card.m26-sol .m26-tag{position:absolute;left:0;top:0;z-index:2;max-width:100%;
  padding:2px 7px;font-size:11px;line-height:17px;color:#fff;
  border-radius:8px 0 8px 0;background:linear-gradient(135deg,#1a7ae0,#0b4fa8);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---------- G3. No.142：客户案例页顶部的 14 个行业案例图标 ----------
   运营原话：「增加 PC 上 14 个案例图标到手机端展示，点图标进有看真案例，
             如图 PC 上的操作逻辑」

   ★ 图标本体用源站那 7 张 58x58 PNG（PC 上也是这 7 张、两排各用一遍），
     路径与 PC 完全一致 ⇒ 服务器上是什么图，手机端就是什么图，不另存一份。
   ★ 一格 25%（一行 4 个）：14 个图标在 375px 屏上排成 4/4/4/2 ——
     源站 PC 是一行 7 个，手机上 7 个只有 53px 宽、名称会挤成两行看不清。
   ★ 名称 `nowrap + ellipsis`：行业名最长 6 个字（「会员管理行业」），
     一行放得下；万一后台改了更长的名字，截断而不是把格子撑歪。 */
.m26-ico14{display:flex;flex-wrap:wrap;padding:12px 12px 0;}
.m26-ico14 a{flex:0 0 25%;box-sizing:border-box;padding:6px;text-align:center;
  text-decoration:none;}
.m26-ico14 a img{display:block;width:52px;height:52px;margin:0 auto;
  border:1px solid #e8eef7;border-radius:50%;background:#fff;}
.m26-ico14 a span{display:block;margin-top:6px;font-size:11.5px;line-height:1.3;
  color:#33506f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.m26-ico14 a:active img{border-color:#0b63ce;box-shadow:0 0 0 1px rgba(11,99,206,.35);}

/* ---------- G4. No.144：客户案例页底部的四类客户代表 logo 墙 ----------
   运营原话：「客户例需以把 pc 端展示的：上市公司代表 / 央企国企代表 /
             集团公司代表 / 本地客户代表，再直接展示出来」

   ★ 数据复用 PC 那份 `_hzkh_logo_groups()`（与 `/hzkh.html`、PC 案例页底部同源）
     ⇒ 后台加一家客户，PC 与手机同时变。
   ★ 3 列（与手机端「合作客户」页 `.m-hz-list` 同口径）。
   ★ `object-fit:contain` + 白底：客户 logo 长宽比各不相同，
     `cover` 会把字切掉；`contain` 是唯一不会切错的处理。
   ★ 图框高 58px 而不是按百分比：来源图高度参差，固定高才排得整齐。 */
.m26-coop-g{margin:0 0 14px;}
.m26-coop-t{margin:0 2px 8px;padding-left:9px;font-size:14.5px;font-weight:700;
  color:#16283d;border-left:3px solid #0b63ce;line-height:1.3;}
.m26-coop-l{list-style:none;display:flex;flex-wrap:wrap;margin:0;padding:0;}
.m26-coop-l li{width:33.33%;box-sizing:border-box;padding:5px;text-align:center;}
.m26-coop-l li img{display:block;width:100%;height:58px;object-fit:contain;
  background:#fff;border:1px solid #eef2f7;border-radius:6px;}
.m26-coop-l li p{margin:5px 0 0;font-size:11px;line-height:1.3;color:#7c8b9e;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---------- G5. 第 35 版（No.159~162）：一屏直出的正文 `.m26-inline` ----------
   运营原话：「切记需要参考源网站手机版…的展示效果，细节注意，你的自适应
             会导致展示乱，图标显示比例乱套，需分析问题原因总结经验，进有处理。」

   ## 真因（两条，都在老站富文本里，与我们的自适应代码无关）
     ① 正文自带 `<style>` 块且写的是**桌面固定宽度**。实测 HelpItem 112
        （渠道合作）正文第 1 个字符就是 `<style>`，里面 `.lm_lt{width:660px;
        float:left}`；HelpItem 153 是 `.zc h4{...}`。`<style>` 全局生效，
        在 375px 的屏上会把正文撑到 660px、两栏互相叠 ⇒ 版面全乱。
        处理：模板侧用 `|mobilebody` **删掉**这些 style/script（只删样式，
        正文一个字不动，见 ops/templatetags/ops_tags.py）。
     ② 行内 `style="width:720px"` / `float:left` / `width="800"` 这类
        **内联声明**：普通 CSS 规则**压不住**它们（内联优先级更高）。
        处理：下面用 `!important` 反压 —— 这是唯一能盖过行内样式的手段，
        不是"随手加强度"。

   ## 为什么把 float 一起归零
     老站正文大量用 `float:left` + 固定宽度做左右分栏（660+410 那种）。
     在 375px 上两栏并排必然重叠（宽度之和远超屏幕），
     把 float 归零后它们会自然上下堆叠 —— 这正是手机端要的效果。
   ★ `position:static!important` 同理：老站有几处绝对定位的角标/浮层，
     在窄屏上会压住正文。

   ## 图片
     `width:auto/height:auto` + `max-width:100%`：按原图比例缩放，
     **不拉伸**。原来那些 `width="800"` 的行内属性会被这条盖掉。
     `height:auto` 很关键 —— 只写 max-width 时，若行内还有 height，
     图片会被压扁（就是运营说的"图标显示比例乱套"）。
   ★ 这一段的每一条都以"实测老站正文里长什么样"为依据，不要凭感觉删。 */
.m26-inline{padding:2px 12px 6px;font-size:15px;line-height:1.85;color:#333;
  word-break:break-word;overflow-wrap:anywhere;}
.m26-inline *{max-width:100%!important;box-sizing:border-box!important;
  min-height:0!important;}
.m26-inline img{display:block;width:auto!important;height:auto!important;
  max-width:100%!important;margin:10px auto;border:0;border-radius:6px;}
.m26-inline div,.m26-inline p,.m26-inline span,.m26-inline li,
.m26-inline ul,.m26-inline ol,.m26-inline dl,.m26-inline dt,.m26-inline dd,
.m26-inline table,.m26-inline tbody,.m26-inline tr,.m26-inline td,.m26-inline th{
  float:none!important;position:static!important;
  width:auto!important;height:auto!important;min-height:0!important;}
.m26-inline table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.m26-inline iframe,.m26-inline video{width:100%!important;max-width:100%!important;}
.m26-inline p{margin:0 0 10px;}
.m26-inline h1,.m26-inline h2,.m26-inline h3,.m26-inline h4,.m26-inline h5{
  font-size:16.5px!important;line-height:1.5!important;color:#16283d!important;
  margin:14px 0 8px!important;font-weight:700!important;}
.m26-inline b,.m26-inline strong{font-weight:700;}
.m26-inline a{color:#0b63ce;}

/* ---------- G5c. 第 44 版（No.203）：老站「图片滚动」残骸的自适应 ----------
   运营原话：「手机端走进鹏为 / 鹏为公益，下面出现大黑块，如图：E204」

   服务端已经把翻页按钮剥掉了（见 ops_tags.py 的 `_RE_LEGACY_ARROWS`），
   这里补两件事：
     ① `.tl00` 容器在手机上的版式 —— 去掉正文自带样式里的 230px 定高与
        绝对定位（那两条随 `<style>` 一起被删了，不补就是"图全宽竖排 10 屏"），
        改成**两列网格**，10 张公益照片一屏看 4 张；
     ② 兜底：万一正文里换了个写法（比如 `<a class="prev">` 或 title 变了），
        这一层仍然把翻页控件压住 —— 它被 `width:100%` 拉满就是那个黑块。
   ★ 只作用于 `.m26-inline`（板块页正文），详情页不在此列。 */
/* ★ 第 44 版补（验证时发现）：这一族规则必须**同时覆盖两个作用域**。
   板块页正文的容器是 `.m26-inline`（`m26_section.html`），而详情页正文的容器
   是 `.m26-art .body`（`m26_detail.html`）—— 「鹏为公益」正是后者。
   第一版只写了 `.m26-inline` 前缀，实测公益页的 .tl00 依旧是 2497px 高
   （10 张公益图全宽竖排 10 屏），翻页按钮剥掉了、排版却没救回来。
   ⇒ 每个选择器都带上两个作用域。 */
.m26-inline .tl00,.m26-art .body .tl00{
  height:auto!important;position:static!important;overflow:visible!important;}
.m26-inline .tl00 .con,.m26-art .body .tl00 .con{
  display:flex!important;flex-wrap:wrap!important;gap:8px!important;}
.m26-inline .tl00 .lio,.m26-art .body .tl00 .lio{
  flex:0 0 calc(50% - 4px)!important;width:auto!important;
  height:auto!important;float:none!important;margin:0!important;padding:0!important;
  border:0!important;background:none!important;}
.m26-inline .tl00 .lio img,.m26-art .body .tl00 .lio img{
  width:100%!important;height:auto!important;
  margin:0!important;border-radius:8px!important;}
.m26-inline .tl00 .prev,.m26-inline .tl00 .next,
.m26-art .body .tl00 .prev,.m26-art .body .tl00 .next{display:none!important;}
.m26-inline img[title="prevBtn"],.m26-inline img[title="nextBtn"],
.m26-art .body img[title="prevBtn"],.m26-art .body img[title="nextBtn"]{display:none!important;}

/* ---------- G5b. 第 37 版（No.172 / No.173 / No.174）：正文里三处"桌面尺寸" ----------
   运营原话：
     No.172「在培训服务版块，图标太大了，不美观，如图E173。需要重新规划展示效果」
     No.173「巡检其它说明，下面的 1、2、3、4、5、6 放在段落最前面，与 pc 端类似，
             不要现在独立放居中展示。」
     No.174「合作伙伴名录中的 logo 一行放两个，看起来更紧凑美观」

   ## 三处同一个病因
     G5 那一段解决的是"整块版面被撑爆"，这一段解决的是**块内元素的比例**。
     三处的老站正文都自带 `<style>`，尺寸按 1000px 桌面写死。`|mobilebody` 会把
     这些 `<style>` 删掉，但**行内 `width=` / `height=` 属性删不掉**，而 G5 又写了
     `img{width:auto!important;height:auto!important}` ⇒ 图片按**原始像素**渲染。
     实测（线上取图量过）：
       · 培训服务三张：原图就是 152×166 —— 在 375px 屏上占掉近半个屏幕，
         三张竖着排下来七百多像素，这就是「图标太大、不美观」。
       · 巡检的 1..6 数字图：24×24，本来正好；问题是它们**被挤成了独立一行**。
       · 合作伙伴 logo：179×90，一行放不下两个（179×2 > 351），所以是一个一行。
     ⇒ 三处都得从**手机端的用途**重新定尺寸，不是简单调小。

   ## 逐处依据

   ① No.172 培训服务
     老站正文：`<div class="comm"><ul class="comm_top fn">`
                 `<li class="c1"><img width="152" height="166"><span>交流会</span><em>说明</em></li>`
               × 3（c1 交流会 / c2 管理员培训 / c3 培训资料）
     老站 CSS：`.comm{width:830px}` `.comm_top img{width:152px;height:166px}`
               `.comm_top li{float:left}` `.c1{width:162px}` `.c2{width:244px;margin:0 112px}`
               `.c3{width:176px}`
     ⇒ 改成**一行三个小卡**：缩略图 78×85、标题 13px、说明 11.5px。
       78:85 = 152:166 的等比缩放（152/166 = 0.9157，78/85 = 0.9176），
       所以图片**不拉伸**不变形，只是变小。
     ★ `.comm` 那个 830px 反而不用管：它是个 `div`，G5 的
       `.m26-inline div{width:auto!important}` 已经压住了。真正没被压住的是图片原始像素。

   ② No.173 巡检其它说明
     老站正文：`<div class="other"><b>巡检其它说明：</b><ul>`
                 `<li><em><img width="24" height="24"></em> <span>正文…</span></li>` × 6
     老站 CSS：`.other li{overflow:hidden;zoom:1}` `.other li em{float:left;width:35px;margin-top:2px}`
     ⇒ 老站靠 **em 浮动 + li 包含浮动** 实现"数字图标在左、正文在右"。
       我们的 G5 把 `float` 归零了，而老站 `<style>` 又被删掉（`em` 根本拿到过 float）
        ⇒ 24×24 的数字图先被 `img{display:block;margin:10px auto}` 变成**独占一行的居中块**，
          `<span>` 再另起一行 —— 正是运营说的「独立放居中展示」。
     ⇒ 这里把老站那两行**原样搬回来**（em 浮动 + li 包含浮动 + span 作为块级绕排）。
       ★ 为什么不用 `display:flex`：这 6 条是富文本老结构，中间还有裸文本节点，
         flex 会把裸文本也变成 flex item，行高会跳；浮动方案与 PC 端一致，
         也就是运营说的「与 pc 端类似」。

   ③ No.174 合作伙伴名录
     老站正文：`<div class="hz"><h4>合作伙伴名录</h4><ul class="hz_list fn">`
                 `<li><img width="181" height="92"></li>` × 10
               （实测 10 张：sap / IBM / kingdee / oracle / 用友 / 牛商网 / sun /
                 comprc / 海泰 / wibu，其中 IBM 那张没写 width/height 属性）
     老站 CSS：`.hz_list{width:1025px}` `.hz_list li{float:left;width:181px;margin:0 24px 18px 0}`
     ⇒ 手机端改**一行两个**：`width:48.5%`，图自适应撑满格子、`height:auto` 保持
       181:92 的比例；描边用老站值 `#e3e3e3`，加 6px 圆角。
     ★ 间距用 `justify-content:space-between` 而不是 `margin-right`：
       10 个正好 5 行 2 个；万一后台删成奇数个，最后一行那个也不会孤零零贴左。

   ## 反压强度
     这三处的对手是 G5 的 `!important` 规则 + 行内属性，所以**每一处都要写
     `!important`**，并且选择器比 G5 多一个类（例如 `.m26-inline .comm_top img`
     对 `.m26-inline img`）—— 同等 `!important` 时后者胜。
   ---------------------------------------------------------------------------- */
/* ① No.172 培训服务：三张 152x166 大图 → 一行三个小卡（等比缩到 78x85） */
.m26-inline .comm{width:auto!important;margin:0!important;}
.m26-inline .comm_top{display:flex!important;margin:0!important;padding:0!important;
  list-style:none!important;}
.m26-inline .comm_top li{flex:1 1 0!important;width:auto!important;float:none!important;
  margin:0 0 0 7px!important;padding:10px 5px!important;text-align:center;
  border:1px solid #e8eef7!important;border-radius:9px!important;
  box-sizing:border-box!important;}
.m26-inline .comm_top li:first-child{margin-left:0!important;}
.m26-inline .comm_top img{display:block!important;width:78px!important;
  height:85px!important;object-fit:cover!important;margin:0 auto 7px!important;
  border-radius:6px!important;}
.m26-inline .comm_top span{display:block!important;height:auto!important;
  font-size:13px!important;font-weight:700!important;color:#16283d!important;
  line-height:1.4!important;margin:0 0 4px!important;}
.m26-inline .comm_top em{display:block!important;height:auto!important;
  font-style:normal!important;font-size:11.5px!important;color:#7c8b9e!important;
  line-height:1.5!important;text-align:left;}
/* ② No.173 巡检其它说明：把老站那套"em 浮动 + li 包含浮动"搬回来，数字图回到段落最前面 */
.m26-inline .other li{overflow:hidden!important;}
.m26-inline .other li em{float:left!important;display:block!important;
  width:35px!important;margin:2px 0 0!important;}
.m26-inline .other li em img{display:block!important;width:24px!important;
  height:24px!important;object-fit:contain!important;margin:2px 0 0!important;
  border:0!important;}
.m26-inline .other li span{display:block!important;}
/* ③ No.174 合作伙伴名录：10 张 logo 一行两个 */
.m26-inline .hz_list{display:flex!important;flex-wrap:wrap!important;
  justify-content:space-between!important;width:auto!important;
  margin:0!important;padding:0!important;list-style:none!important;}
.m26-inline .hz_list li{width:48.5%!important;float:none!important;
  margin:0 0 10px!important;padding:0!important;box-sizing:border-box!important;}
.m26-inline .hz_list li img{display:block!important;width:100%!important;
  height:auto!important;margin:0!important;border:1px solid #e3e3e3!important;
  border-radius:6px!important;}

/* ---------- G6. 第 37 版（No.177）：招聘职位「一行一个 + 缩略图」 ----------
   运营原话：
     「要求一行1个招聘职位；现在有点乱如图E178
       类似"解决方案"中的滑动效果，每个招聘岗位前面一个缩略图，
       如果没有上传，就是聘图，大小与"解决方案"一样」

   ## 这一块**覆盖**了第 35 版（No.161）的「一排两个」
     第 35 版是两列小方块（`.m26-jobs2 li{flex:0 0 50%}` / `.m26-jb`），
     块高 104px、只放岗位名/薪资/地点三行小字。运营看到 10 个岗位连成一片
     密密麻麻的方块 —— 原话「现在有点乱」，指的就是它。
     ⇒ `m26_section.html` 里那段 DOM 已换成 `.m26-jobs1` + `.m26-card.m26-sol`
       （**就是解决方案页那张大卡**），旧的 `.m26-jobs2` / `.m26-jb` 规则
       随之删除 —— 留着会成为"没人引用但看着像在用"的死样式。
     保留的历史口径（挪进注释，别删）：
       .m26-jobs2{list-style:none;display:flex;flex-wrap:wrap;margin:0;padding:0 12px;}
       .m26-jobs2 li{flex:0 0 50%;box-sizing:border-box;padding:5px;}
       .m26-jb{min-height:104px;padding:11px 10px;border:1px solid #e3ecf7;border-radius:9px;}

   ## 「大小与解决方案一样」怎么保证
     **不抄数字**：缩略图尺寸、描边、悬停/滑动蓝框全部由
     `.m26-card.m26-sol` 那一组规则给（pic = 120×120，
     见上面"大卡"那一段倒推出来的 120 = 472/3 − 9 − 24 − 4）。
     这里只补三件事：外层列表不能是 flex 两列、薪资/地点的配色、
     以及一行小提示的样式。改 `.m26-sol` 的尺寸时两边同时变。 */
.m26-jobs1{list-style:none;margin:0;padding:0;}
.m26-jobs1 > li{margin-bottom:9px;}
/* 薪资用暖橙（与「酬薪福利」那个板块关键词一致），地点用中性灰 */
.m26-jobs1 .m26-card .d{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;}
.m26-jobs1 .sal{font-size:13px;font-weight:700;color:#c2410c;line-height:1.5;}
/* ★ 第 51 版（No.246）：`.adr`（工作地点）已不再出现在职位卡上，
   规则**刻意留着**（与第 38 版保留 `.m26-nav` 同一条纪律：删样式属于
   另起一版的清理动作，同一个版本里既改 DOM 又删样式，一旦出问题
   分不清是哪一边引起的）。当前全仓已无 `class="adr"` 的使用点。 */
.m26-jobs1 .adr{font-size:12.5px;color:#7c8b9e;line-height:1.5;}
/* ★ 第 51 版（No.246）：招聘人数（胶囊）+ 摘要（两行截断）
   · `.num` 的形状与 `_rcpt_jobs.html` 的 `.m-rcpt-tag` 同族（浅蓝底 + 蓝字），
     这样手机端两处职位卡"标签"的观感一致；用 `inline-block` 而不是 flex 项，
     是因为 `.d` 本身已经是 flex 容器、这里只当普通标签用。
   · `.sm` 的 `-webkit-line-clamp:2` 与 `templates/cms/mobile/_rcpt_jobs.html`
     的 `.m-rcpt-desc` 是同一套写法（项目既有口径）；服务端另有
     `truncatechars:42` 先把 DOM 收住，两层各管一件事：
     服务端管"别把 183 字全塞进页面"，样式管"视觉上永远不超过两行"。
   · 为什么 `-webkit-box` 那三行不能省：只写 `overflow:hidden` 不会截断成
     两行，会把卡片撑高（缩略图 120px 定高被拉长，10 张卡高度参差）。 */
.m26-jobs1 .num{display:inline-block;font-size:11.5px;font-weight:600;color:#2f6bb5;
  background:#eef4fd;border:1px solid #dbe8fb;border-radius:11px;
  padding:2px 9px;line-height:1.5;}
.m26-jobs1 .sm{margin:5px 0 0;font-size:12.5px;line-height:1.55;color:#7c8b9e;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;}
.m26-jobs1 .m26-card .b em{font-size:12px;}
.m26-jobs-tip{margin:2px 4px 0;padding:10px 12px;font-size:12.5px;line-height:1.7;
  color:#5b6b7f;background:#f5f9ff;border:1px solid #e3ecf7;border-radius:9px;}

/* ---------- G7. 第 35 版（No.161）：职位详情页底部的「申请职位」 ----------
   ★ 挂在 `m26_detail.html`，只有 `model_name == 'job'` 时才渲染
     （见该模板的注释）。按钮不写 JS，只挂 data-wx-open="hr"，
     由 base.html 的事件委托弹出人力资源招聘二维码。 */
.m26-apply{display:flex;flex-wrap:wrap;gap:10px;margin:16px 12px 6px;}
.m26-apply-btn{flex:1 1 160px;display:block;text-align:center;padding:12px 0;
  background:#0b63ce;color:#fff;font-size:15.5px;font-weight:700;
  border-radius:8px;text-decoration:none;}
.m26-apply-btn:active{background:#0950a8;}
.m26-apply-tel{flex:1 1 160px;display:block;text-align:center;padding:12px 0;
  background:#fff;color:#0b63ce;font-size:15px;font-weight:600;
  border:1px solid #b9d4f2;border-radius:8px;text-decoration:none;}

/* ---------- G8. 第 37 版（No.178）：走进鹏为的「折叠页签」 ----------
   运营原话：
     「走进鹏为，换行方案。…更变方案启用折叠状态，不用现在向右滑动样式。
       公司简介、发展历程、鹏为荣誉、顾问团队在第一行，
       团队风采、总部介绍、鹏为文化放在第二行。默认公司简介展开，
       …点击发展历程时其它展示详细信息。即只有一个展示内容，其它不显示。
       注：公司简介里那条要隐藏的条目不要展示。」

   ## 「隐藏的那一条」怎么落的
     按**条目标题**滤，落在 `cms/mobile_sections.py` 的 `HIDE_ITEMS`
     （键是 `(页面 key, 栏目 legacy_id)`）。它是 HelpItem **条目**、不是栏目，
     所以不能进 `HIDE_SECTIONS`（那个表收的是栏目）。
     ★ 本注释里**故意不复写那条的标题**：页面源码里连一次都不该出现它，
       这样"隐藏到位"就能用一句 `页面里不含该词` 直接验掉（`_v37` 的
       验收脚本里就是这么断言的）。

   ## 这一块替换掉了什么
     原来是 `.m26-nav`（吸顶 + `overflow-x:auto` + 胶囊 + 向右滑）。
     运营说得直接：「不用现在向右滑动样式」。这一版走进鹏为改成
     **8 枚页签两行铺开（4 + 4）、点哪枚只显示哪块**。
     ★ `.m26-nav` 的 CSS 一个字没删 —— `ai_marketing.html` 与
       `ai_marketing_sub.html` 两个 AI营销页还在用它（见 G 段上面那处注释）。

   ## 为什么 4+4 是"自动"的，而不是写死第一行 4 个
     `flex-wrap:wrap` + 每枚 `width:calc(25% - 6px)` ⇒ 不管后台把栏目
     排成几个、调到什么顺序，**每行永远是 4 个**，8 个就是 4+4。
     运营给的两行名单（公司简介/发展历程/鹏为荣誉/顾问团队 +
     团队风采/总部介绍/鹏为文化）与栏目表的 `order_id` 顺序逐项吻合，
     第 8 个「鹏为公益」按运营确认"补成第二行第 4 个"。
     ⇒ 所以这里**不写"第一行是哪四个"**，写死了反而会在后台调序后错位。
     ★ 宽度用 `calc(25% - 6px)` 配 `gap:7px`：4 枚一排合计占 100% − 3px，
       留 3px 余量，避免某些内核把小数像素进位后挤掉第 4 枚。

   ## `.m26-fp` 那两行是"整块开关"
     `display:none` / `display:block` 两个状态，`on` 类在 8 块之间搬一次。
     服务端已把第一块（公司简介）写成带 `on` —— **脚本挂了也看得见内容**，
     不会出现整页空白（同 No.163 的折叠心智）。
     ★ 只有走进鹏为页会输出 `.m26-fp`：`fold` 为假的另外 4 个板块页
       `class` 里连这两个字都没有，渲染结果与本版之前逐字节相同。
   ---------------------------------------------------------------------------- */
.m26-fold{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;
  gap:7px;padding:9px 12px;background:#fff;border-bottom:1px solid #e9eef5;
  box-shadow:0 1px 4px rgba(15,40,80,.05);}
/* ★ 第 44 版（No.211）：同上，走进鹏为那一排折叠胶囊（未选中态）加深加粗。 */
.m26-fold .m26-fb{flex:0 0 auto;width:calc(25% - 6px);box-sizing:border-box;
  text-align:center;padding:7px 2px;border-radius:16px;background:#e9f0f9;
  color:#1b3a5c;font-size:12.5px;line-height:18px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;text-decoration:none;}
.m26-fold .m26-fb.on{background:#0b63ce;color:#fff;font-weight:600;}
.m26-fp{display:none;}
.m26-fp.on{display:block;}

/* ============================================================================
 * G10. 第 40 版（2026-09-23 · 测试反馈 No.182 / No.183 / No.184 / No.187）
 * ----------------------------------------------------------------------------
 * 这一版四条手机端需求都落在**同一个接缝**上：「老站正文」×「本套 .m26 版式」。
 * 所以集中放一段，不散到上面各段去 —— 散着改，以后没人看得出它们是一版的。
 * 每一条的尺寸都是**实测**出来的（探针脚本见下），不是估的。
 *
 * ----------------------------------------------------------------------------
 * ## No.183 招聘详情「福利图标」—— 一行 5 个、固定 48x48
 * ----------------------------------------------------------------------------
 * 实测（`_v39/probe182.py` → temp.haocrm.cn `/Mobile/MHelps/xszl.html`）：
 *   10 枚 48x49 的 PNG，正文里那段 UDT 内联样式写的是
 *     `.pic li{float:left;width:80px;margin-left:25px;text-align:center}`
 *   80+25=105px 一步 ⇒ 342px 的正文只排得下 3 枚（li 实测 left=15/120/225）；
 *   而 `li:first-child{margin-left:0}` **只对第一行生效** ⇒
 *   第 1 行从 15 起、第 2/3/4 行从 40 起，**行与行整体错位 25px**；
 *   10 枚 ÷ 3 = 3 行 + 1 枚，最后一行只剩一枚孤图（`job_xszl.png` 里看得很清楚）。
 *   ⇒ 用 `.m26-art .body .pic > li` 改成 **一行 5 个**：10 枚正好 5x2，不留孤行。
 *   ★ 为什么图标锁 48x48：原图就是 48x49（内容占满全幅，无内边距，见
 *     `_v39/jobico/_report.txt` —— 面积占比 0.75~1.00）。容器做正方形
 *     会把它压掉 1px 高度，所以配 `object-fit:contain`：**只缩不裁**、不变形。
 *   ★ 选择器比 `.pic li` 多两级（.m26-art .body），0,3,1 > 0,1,1，
 *     不靠 `!important` 也赢；只有 `width/height/float/margin` 这几条
 *     必须 `!important` —— 因为那段内联样式在**正文里**、比本文件晚加载。
 *
 * ----------------------------------------------------------------------------
 * ## No.184 走进鹏为四个板块的行数
 * ----------------------------------------------------------------------------
 * 实测（`_v39/probe40c.py`，走进鹏为页逐个点开折叠页签后量）：
 *   鹏为荣誉 s9 = 15 项、顾问团队 s10 = 4 项、团队风采 s31 = 2 项，
 *   三者共用 `.m26-wall` 的 3 列（li 宽 122px、left=12/134/256）
 *   ⇒ 顾问 4 人排成 3+1、风采 2 条排成 2+空格，看着都"没排满"。
 * 运营要求：荣誉·顾问「一行两个」、风采「一行一个」。
 *   ⇒ 列数走 `m26_section.html` 按 `page_id` 打的类（s9/s10 → `.m26-w2`，
 *     s31/s38 → `.m26-w1`），CSS 只认这两个类，不认栏目名 ——
 *     后台改栏目名那么这条样式不会错位。
 *   ★ s9 额外加一枚 `.m26-fit`：证书是**文档**，方框 + `object-fit:cover`
 *     会把证号/落款裁掉，改 `contain` 让整张可见（`.p` 的底色 #eef3f9 兜底）。
 *   ★ 鹏为公益 s38 不在 `.m26-wall` 里：它是老站轮播 `.tl00` 的 10 张
 *     220x146 裸图**竖向排列**，容器 342px ⇒ 左右各留白 61px（运营说的
 *     "两边留白多"就是这个）。`.m26-w1` 顺带把它的图放到 100% 宽 = 342x227。
 *
 * ----------------------------------------------------------------------------
 * ## No.187 手机端「广告条」高度对齐 127px；第 44 版（No.206）改为 91px
 * ----------------------------------------------------------------------------
 * ★ 第 44 版更正：当时那句「实测其它菜单页 = 127px」是量在了产品中心上
 *   （它多一行「共 17 条」统计，91.3 + 12 + 24 = 127.3）。九页逐量 + CDP
 *   核过之后确认基准是 **91px**，详见下面 `.m26-bn` 那两行上方的注释。
 * 原实测记录（保留，说明 127px 这个数的来历）：
 *   而 AI营销页顶部那条 banner 是 `_m26-head`+`width:100%` 直接压出来的
 *   **71px**（banner 图 1920x350，390 宽下 350*390/1920 = 71）—— 明显比别页塌。
 *   ⇒ 包一层 `.m26-bn` 把它锁成 127px，图 `object-fit:cover` 居中裁切。
 *   ★ 为什么**不**靠"把原图裁一裁"：1920x350 的图里，左侧「AI 营销」标题、
 *     右侧文案、中间网络图都各占一块，任何 390:127 的裁切都会切掉字。
 *   ⇒ 本版另配一张**手机专用**的 `ai-marketing-banner-m.svg`（780x254，
 *     正好 390:127 的 2 倍图）⇒ `cover` 等于"刚好铺满"，**不裁不拉伸**，
 *     字按 390 宽排版，清晰可读。映射规则见 `cms/ai_marketing.py`
 *     的 `mobile_banner()`（`.svg` → `-m.svg`）。
 *
 * ----------------------------------------------------------------------------
 * ## No.182 正文图统一口径 + 「定位/愿景/价值观/用人理念/使命」五宫格
 * ----------------------------------------------------------------------------
 * 实测两处硬伤（`_v39/probe40b.py`，用 CDP `CSS.getMatchedStylesForNode`
 * 把命中规则原文打出来，**不是猜的**）：
 *   ① 老站 CSS 里有一条 `.wrap img{display:block;width:100%}`。招聘详情页
 *      正文（`.m26-art .body`）此前**没有**对应的反压规则 ⇒ 那枚 20x20 的
 *      「在线沟通」小图标被它按父容器 200px 拉成 **200x200**（放大 10 倍，
 *      糊成一片）。G5 段只护住了 `.m26-inline`，详情页不在它的射程内。
 *      ⇒ 这里给 `.m26-art .body img` 配上**与 G5 完全同一条口径**：
 *        `width/height:auto` + `max-width:100%` ⇒ 只缩不放、保持比例。
 *   ② 走进鹏为公司简介里的 `.tl` 五宫格（定位/愿景/价值观/用人理念/使命）：
 *      老站是 5 个 `float:left` 的 `.on` 卡，而正文自带的 `<style>` 被
 *      `mobilebody` 过滤器**删掉了**（那是第 35 版故意删的，见 m26_section.html
 *      的注释），于是 5 张卡变成 5 个竖排大块、整段 1211px 高，图标还各按
 *      原图尺寸显示 —— 3 张 97px + 2 张 129px（同一排图标两个尺寸）。
 *      ⇒ 改成「图标 54px 定宽在左、标题与正文在右」的横排卡片：图标统一、
 *        行距一致、整段高度砍掉一半。用 `position:absolute` 定位图标
 *        （不用 flex）：`.on` 里是 `img + h3 + p` 三个**并列**兄弟节点，
 *        flex 会把 h3 与 p 排成同一行的两列（那就不是"图标在左、文字在右"了）。
 *        ★ 老内核也认 absolute，比 grid 稳妥。
 * ============================================================================ */
/* --- No.187 手机端广告条；第 44 版（No.206）把高度从 127px 收到 91px ---
   ★ 为什么改：No.187 当时写的「其它菜单页顶部那块蓝底标题块实测 127px」是
     **量错了页**——那次量到的应该是产品中心（它页头多一行「共 17 条」统计，
     91.3 + 12 + 24 = 127.3）。第 44 版用 Playwright + CDP 把九个频道页逐一量过：
     除产品中心外一律 **91.3px**（`.m26-hero` = 20 上内距 + 21px 标题×1.25 +
     7px + 12.5px×1.6 + 18 下内距）；No.205 又把产品中心那行统计删了 ⇒
     **91px 才是全站唯一的页头基准**。
   ★ 运营原话（No.206）：「广告位置高度比别的都高了，需要统一。前面处理说
     "把广告条的高度锁定 127 像素"但是肉眼看比别的高」—— 正是这一条。
   ★ 配套：`ai-marketing-banner-m.svg` 已按 780x182（= 390x91 的 2 倍图）
     重新导出，`object-fit:cover` 不裁不拉伸。 */
.m26-bn{display:block;height:91px;overflow:hidden;background:#0b3f8c;}
.m26-bn img{display:block;width:100%;height:91px;object-fit:cover;
  object-position:center;}

/* --- No.183 招聘详情福利图标：一行 5 个、48x48、文字居中 --- */
.m26-art .body .pic{display:flex;flex-wrap:wrap;margin:8px 0 4px;}
.m26-art .body .pic > li{flex:0 0 20%;width:20%!important;margin:0!important;
  padding:0 2px 12px;float:none!important;box-sizing:border-box;list-style:none;}
.m26-art .body .pic > li img{display:block!important;width:48px!important;
  height:48px!important;margin:0 auto!important;border-radius:0!important;
  object-fit:contain;}
.m26-art .body .pic > li span{display:block!important;width:auto!important;
  margin:0!important;padding:6px 0 0!important;font-size:11.5px;line-height:1.35;
  color:#5d6e83;text-align:center;}

/* --- No.182 正文图统一口径（与 G5 的 .m26-inline img 逐条同义） --- */
.m26-art .body img{display:block;margin:12px auto;border-radius:6px;
  width:auto!important;height:auto!important;max-width:100%!important;}
/* ↑ 这一条会命中 .pic 里的图标；上面那条 `.pic > li img` 特异度更高
   （0,3,2 > 0,1,1），本来就已经赢。这里再声明一次 48x48 是**冗余保险** ——
   以后谁把上面那段挪走或改了选择器，图标也不会因此被撑成父容器宽度。 */
.m26-art .body .pic > li img{width:48px!important;height:48px!important;}

/* --- No.182 走进鹏为·公司简介 五宫格（.tl / .on） --- */
.m26-inline .tl{display:block;margin:14px 0 4px;}
.m26-inline .tl > .on{position:relative!important;display:block;
  margin:0 0 10px;padding:11px 12px 11px 76px;background:#f7fafd;
  border-radius:9px;}
.m26-inline .tl > .on img{position:absolute!important;left:12px;top:13px;
  width:54px!important;height:54px!important;margin:0!important;
  border-radius:0!important;object-fit:contain;}
.m26-inline .tl > .on h3{font-size:15px!important;line-height:1.4!important;
  margin:0 0 4px!important;color:#16283d!important;}
.m26-inline .tl > .on p{margin:0;font-size:13.5px;line-height:1.7;color:#4a5a6e;}

/* --- No.184 走进鹏为四个板块的列数（类由 m26_section.html 按 page_id 打） --- */
.m26-sec.m26-w2 .m26-wall li{width:50%;}
.m26-sec.m26-w1 .m26-wall li{width:100%;}
.m26-sec.m26-w1 .m26-wall .t{font-size:13px;}
.m26-sec.m26-fit .m26-wall .p img{object-fit:contain;}
.m26-sec.m26-w1 .m26-inline .tl00 img{width:100%!important;height:auto!important;
  border-radius:8px;}

/* ============================================================================
   第 45 版（2026-09-23 · 测试反馈 No.221）
   ----------------------------------------------------------------------------
   运营原话：「手机端快消行业 / 广告位高度需要与广告页统一，样式风格风格颜色
             太深了，请最优的方案设计。其它也有同类问题」

   这一条在 44 版已经处理过一半（No.210 + 本文件顶部那条老皮肤细条覆盖块），
   本版补的是**另一半**：手机端「广告位」其实有两个渲染者，除了快消行业那种
   老皮肤内页走的那条细条，还有 m26 系频道页/详情页的页头
   `.m26-hero`（本文件第 72 行，写死 `background:#0b63ce`）。
   ★ 上面两处刻意不写那条老皮肤细条的**类名字面量**：本文件是被 include 进
     手机端页面的，里面这段 <style> 会**原样发到浏览器**；而包内自检有一条
     "合作客户页不许再出现那个老皮肤类名"的反向断言，它是按**整页文本**搜的
     —— 注释里写出来就会被当成"矮页头没删干净"（本机真跑实测踩过一次）。
   运营说的"其它也有同类问题"就是它 —— 同一屏里两种深蓝，放在手机上都发闷。

   ⇒ 用同一个色值家族把两者并到一条线上：
        linear-gradient(135deg,#4ea3f5 0%,#1c74d8 100%)
      高度两边本来就都是 91px（No.210 已实测对齐），本版**只动颜色**，
      内距 / 字号 / 行高一个像素都没改。

   ★ 为什么可以覆盖而不改第 72 行：这是**追加在最后一段 <style> 末尾**的
     同权重规则，文档顺序在后 ⇒ 后者赢（与 common.css 里 No.210 的手法一致，
     不必用 !important，将来要回退只需删掉本段）。
   ============================================================================ */
.m26-hero{background:linear-gradient(135deg,#4ea3f5 0%,#1c74d8 100%);}
.m26-hero::after{background:rgba(255,255,255,.16);}

/* ============================================================================
   第 45 版（2026-09-23 · 测试反馈 No.219 / No.220）
   ----------------------------------------------------------------------------
   No.219：「产品中心产品详情页，页面不能左右拨动，很稳定，但是解决方案详情
            会左右晃动。需要把左右晃动的页面改为"产品详情页"稳定」
   No.220：「出现"竖排文字"…如果文字横排时，字体颜色需要明显一点；同理所有
            方案此处都有问题；同时图标大的问题也没有解决」

   ## 「左右晃动」到底是怎么来的
     手机上"页面能左右拨动"= 文档宽度 > 视口宽度。产品详情页一直稳，是因为
     `product_detail.html` 自己那套逐图定尺寸的护栏 + 它把正文里的桌面分栏
     压平了；方案详情走的是通用正文，老站富文本里**残留的行内固定宽度**
     （`style="float:left;width:720px"` 那类）、超宽 `<table>` 与 `iframe`
     只要有一个超过 342px，整页就跟着能左右晃。

     E221 那张截图里能直接看到证据：正文右侧那条竖直排下来的
     「教育培训行业」正是被挤到只剩十来像素宽的窄列 —— 竖排和晃动是**同一个
     根因**的两种表现（同一行还有右边被裁掉的半句正文）。

   ## 这一段的四层护栏
     ① 页面级：`.m26{overflow-x:hidden}` —— 正文里还有什么野元素都不再推页面
        （产品详情页靠的就是这一手）。
     ② 行内固定宽度：正文里凡是在 style 里写过 width 的元素，一律
        `max-width:100%` 封顶。720px 的分栏在 342px 视口里变成 342px，
        不再把左边那半挤成竖排。
     ③ 表格 / iframe / 视频：自己缩（或自己滚），不推页面；单元格允许断词，
        避免"一个字一行"。
     ④ 正文底色的可读性：老站正文默认是浅灰（#4a5a6e 一档），在手机小字号下
        偏飘；本段把正文与表格单元格的文字统一到 #33445c（深一档）。
        ★ 不使用 !important ⇒ 正文里**故意**染过色的字（运营自己标的红字）
          仍然按原色显示，本段只在"没有别的颜色可用"时才生效。

   ★ 关于「图标大」：那一条的正解不在 CSS 里，而在服务端过滤器 ——
     见 ops/templatetags/ops_tags.py 的 `_pin_img_size`（本版新增）。
     原因写在那个函数上方：老站的"图标"是**倍图**（200x200 只显示 60x60），
     尺寸原本靠正文自带的 <style> 与 width 属性一起给；<style> 被本项目的
     `mobilebody` 删掉之后，只有 width 属性还在，而 _m26_head.html 里
     No.182 那条 `width:auto!important` 会把属性值一并抹掉 ⇒ 倍图恢复原始像素。
     CSS 无法读回属性值，所以必须在服务端把属性"钉"成行内 !important。
   ============================================================================ */
.m26{overflow-x:hidden;}
.m26-art .body [style*="width"]{max-width:100%!important;box-sizing:border-box;}
.m26-art .body table{max-width:100%!important;}
.m26-art .body iframe,.m26-art .body video,.m26-art .body embed{max-width:100%!important;}
.m26-art .body td,.m26-art .body th{word-break:break-word;overflow-wrap:break-word;}
.m26-art .body pre{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.m26-art .body{color:#33445c;}
.m26-art .body td,.m26-art .body th{color:#33445c;}

/* ============================================================================
   第 50 版（2026-09-24 · 测试反馈 No.240）—— 短标签条排回横向

   运营原话：「中小型企业CRM，正文中出现如图 E241、F242：内部办公 / 客户管理 /
   市场管理 / 售前管理 / 进销存管理 / 销售管理 / 服务管理 / 合同项目 /
   产品管理 / 决策分析 / 这样的竖着，很不好看，请优化，手机端全页分析处理类似问题」

   真因：老站正文里那类 tab 条（`<ul class="txrz_t">` 10 个模块名）横排的
   唯一依据是正文自带 <style> 里的 `float:left`；`mobilebody`（第 44 版）
   会把 <style> 整块剥掉 ⇒ <li> 恢复默认块级盒 ⇒ 每项各占一行。
   完整推导与三批判据见 ops/templatetags/ops_tags.py::mchips 上方的注释。

   本段只认 `.m26-chips` 这一个 class（由服务端按**内容形态**打上去，
   与老站类名无关），所以同一批老站内容里的同类列表会被一并修好 ——
   这正是运营说的"手机端全页分析处理类似问题"。

   ★ 一律 !important：老站正文残留的行内样式与老皮肤选择器都在同一场
     specificity 竞赛里，`.m26-pbody` 段（第 28 版）也是同样的口径。
   ★ 选择器一律带 `.m26` 前缀，不污染老页面（本文件的开篇纪律）。
   ============================================================================ */
.m26 ul.m26-chips{display:flex!important;flex-wrap:wrap!important;gap:8px!important;
  margin:14px 0 18px!important;padding:0!important;list-style:none!important;
  float:none!important;width:auto!important;height:auto!important;overflow:visible!important;}
.m26 ul.m26-chips>li{float:none!important;width:auto!important;min-width:0!important;
  height:auto!important;line-height:1.35!important;flex:0 0 auto!important;
  margin:0!important;padding:0!important;border:0!important;
  text-align:center!important;background:none!important;}
/* 有链接的条目：品牌蓝胶囊（与手机端导航同色系） */
.m26 ul.m26-chips>li>a{display:block!important;padding:8px 14px!important;
  border-radius:6px!important;background:#0066c3!important;color:#fff!important;
  font-size:14px!important;font-weight:600!important;text-decoration:none!important;
  white-space:nowrap!important;border:0!important;line-height:1.35!important;
  cursor:default!important;}
.m26 ul.m26-chips>li>a:hover,.m26 ul.m26-chips>li.cur>a{
  background:#db2129!important;color:#fff!important;}
/* 纯文字的条目（没有 <a>）：淡蓝描边胶囊，与上面区分开 */
.m26 ul.m26-chips>li>span{display:block!important;padding:8px 14px!important;
  border-radius:6px!important;background:#eef4fb!important;
  border:1px solid #cfe1f5!important;color:#0b4b8f!important;
  font-size:14px!important;font-weight:600!important;white-space:nowrap!important;}
/* 直排文字（li 里既没 a 也没 span）也要成个形，别留裸文字。
   ★ 不用 :has() —— 它在旧版微信 webview（Chrome 105 以前）不支持，
     而 :has() 出现在选择器里会让**整条规则**失效，等于白写。
     这里用相邻兄弟选择器做不到"仅当没有子元素"，所以裸文字的条目
     交给上面那条 `>li` 的基础盒（无底色），已经不会再竖排。 */