/* =========================================================
   MIBET BLOG — 全局文章样式表（2026-08 修订版 r7）
   说明：
   - 网站已有全局 H1/H2/H3/P 等基础标签样式，本表不重复定义。
   - 本表只负责文章内的特殊排版组件（目录、FAQ、来源、卡片、
     表格、数据条、判定清单、图注等）。
   - 品牌绿 #82bc24 / 深色 #2c2d30 为主色系。
   - 正文编辑区宽度 840px，表格 min-width 600 / 760 均在其内，
     桌面端不触发横向滚动。
   - 旧组件（.toc / .video-box / .img4 / 弹窗）全部保留，未做删除。

   r1 修订（已并入）：
   【改 1】表格表头由黑色 #2c2d30 → 浅绿 #f2f6ee + 2px 品牌绿底线
   【改 2】表格焦点/对比列色阶重排，新增 tbody th 行标题列样式
   【改 3】Table of Contents 全新设计（图标按钮 + 自动编号 + 单栏）
   【改 4】h2[id] 锚点偏移由 vw 改为 clamp，避免宽屏跳过头
   【新 1】.mibet-datastrip  实测数据条（值 + 标签 + 条件脚注）
   【新 2】.mibet-criteria-box  判定清单卡
   【新 3】.col-neutral  表格第三态（待研究）列
   【新 4】.mibet-hero-box.qa-only  仅含 Quick Answer 时的间距修正
   【新 5】.table-wide  4 列以上宽表的移动端最小宽度

   r2 修订（已并入）：
   【新 6】tr.row-group  长表分组行（10 行以上的输入清单表分段）
   【新 7】.table-narrow  2 列窄表，取消 600px 强制横滚
   【改 5】.mibet-figure 图片阴影降为发丝线边框，与全页无阴影语言对齐
   【改 6】表格单元格启用 tabular-nums，数值列纵向对齐

   r3 修订（已并入）：
   【新 8】.mibet-verdict  表内三态判定标签（适用 / 视情况 / 另比方案）
   【新 9】.mibet-term  内联术语定义标记（中性点线，轻于 .mibet-metric）
   【改 7】.mibet-mechanism-grid / .mibet-geo-comparison 改为 1px 缝隙栅格
   【改 8】.col-focus 使用规则写入注释：仅用于 ≤5 行的表
   【改 9】.video-box max-width 由 785px 对齐到 840px 正文栏宽

   r4 修订（已并入）：
   【新 10】.mibet-loadpath  载荷路径链条（全页唯一表达"方向"的图形语言）
   【改 10】.mibet-table-container 加发丝线边框 + 8px 圆角，表格不再是
            全页唯一的直角块；caption 改为表内标题条，末行去底边，
            移动端滑动提示改为 sticky，横滚时不跟着跑
   【改 11】清除 .toc / .faq / .srcs / .mibet-hero-box 的残留阴影，
            与 r2 确立的"发丝线 + 微差底色"语言对齐（弹窗保留阴影）
   【改 12】.ds-3 在 ≤768px 由 2 列改为 1 列。3 项进 2 列会空出一格，
            栅格底色 #e6ebdf 会露成一块实心色块
   【改 13】2 列栅格的孤项自动占满整行（:last-child:nth-child(odd)），
            修掉 3 卡机制网格在平板端空出一格的同类问题
   【改 14】表格取消 caption 标题条：清掉主题给 <table> 的默认上下
            外边距（加边框后会露成白带），空 caption 不渲染

   r5 修订（已并入）：
   【新 11】.mibet-relation  关系条（因子 × 因子 = 结果）。全页唯一表达
            "等式/换算"的图形语言；分隔符只用 × 与 =，不用箭头，
            方向角标仍是 .mibet-loadpath 的专属符号
   【新 12】.mibet-loadpath.lp-5  五段变体。注意基础规则写在
            .single-blog-content 下（0,2,0），.lp-5 是 0,3,0，
            移动端单列必须同步写一条 .lp-5 覆盖，否则手机端仍是 5 列
   【新 13】.ds-alt  数据条副值位（英制换算 / 第二单位）。SI 值留在
            .ds-value，换算值降级到本行，避免两套单位挤进 26px 数值位
   【改 15】≤600px 的 .table-narrow 行标题最小宽度排除 th[colspan]，
            否则 tr.row-group 的分组行会被一起套上 150px 下限；
            ≤480px 下限降到 130px，给右列留出可读宽度
   【改 16】.mibet-ordered-list 加固：ol 自身清掉主题的列表符与
            默认外边距（r4 前该组件从未在正式文章中启用过）

   r6 修订（已并入）：
   【新 14】.mibet-relation.rel-noted  关系条的"带脚注"变体。只把
            下外边距归零，让紧随其后的 .ds-note 贴住关系条，
            与数据条 + 脚注的间距节奏一致。只写 margin-bottom
            单属性，不写简写，避免被移动端的 margin 简写覆盖。
   【改 17】.mibet-datastrip:has(.ds-alt)  含副值行的数据条，
            .ds-item 改为纵向弹性盒、.ds-label 贴底对齐。
            用 :has() 把作用域限定在"确实含副值行"的数据条上；
            :has() 不支持时退回 r5 行为，不会破版。
   【改 18】.ds-note 正式定位为数据条与关系条共用的块级脚注类，
            注释同步更新。类名保留不动，避免历史文章失效。

   r7 修订（本次）：
   【新 15】.mibet-compare-grid / .mibet-compare-card  双栏对比栅格的
            语义别名。取值与 .mibet-geo-comparison / .mibet-geo-card
            完全相同，只是把别名并入既有选择器列表，没有复制任何取值。
            起因：该组件已不止用于地理口径对比（US / EU），也用于
            "移出范围 / 移入范围"这类中性双栏对比，geo 前缀会误导。
            历史文章的 geo 类名继续有效，两套类名可混用。
   【新 16】.srcs-toggle:focus-visible  来源块折叠按钮补键盘焦点环。
            .mibet-toc summary 与 .faq-q 都已有可见焦点，只有这里缺，
            用同一档 rgba(130,188,36,.35) 补齐，纯增量。
   【新 17】@media (prefers-reduced-motion: reduce)  关闭装饰性过渡。
            只影响 hover / open 的背景与变换过渡，不改变任何布局取值。
   【改 19】.mibet-divider 下外边距 0 → 18px。
            本次是唯一触及既有取值的一条。原值下方留白为 0，
            分隔线会紧贴 KEY TAKEAWAYS 标题。只影响使用完整版
            .mibet-hero-box（Quick Answer + Key Takeaways）的文章，
            .qa-only 的文章不含分隔线，渲染不变。
            回退方式：把 margin 改回 20px 0 0px 0 即可。
   【改 20】.mibet-relation 语言边界注释扩充：分隔符由"只用 × 与 ="
            放宽为"× ÷ ="。除法同属等式词汇，不与 .mibet-loadpath
            的方向角标冲突，符号专属制不受影响。纯注释改动，
            .rel-op 的取值未变，运算符字符由 HTML 决定。
   ========================================================= */


/* =========================================================
   [旧] 文章中的 Table of Contents（保留，供历史文章使用）
   ========================================================= */
.toc{
  max-width:400px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
  box-shadow:none;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft Yahei",Arial,sans-serif;
  counter-reset: toc;
  margin-top: 4px;
  margin-bottom: 20px;
}
.toc .toc-title{
  display:flex; align-items:center;
  padding:8px 12px;
  font-size:14px; color:#64748b;
  border-bottom:1px solid #e5e7eb;
}
.toc .toc-title > * + *{ margin-left:8px; }
.toc .toc-icon{
  width:14px; height:14px; border:2px solid #94a3b8; border-radius:3px; position:relative;
}
.toc .toc-icon::after{
  content:""; position:absolute; inset:2px;
  border-top:2px solid #94a3b8; border-left:2px solid #94a3b8;
  border-right:0; border-bottom:0; border-radius:2px;
}
.toc .toc-list,
.toc nav{
  display:block;
  font-size:0;
}
.toc .toc-item{
  display:block;
  padding:8px 12px;
  text-decoration:none;
  color:#111827;
  border-top:1px solid #e5e7eb;
  line-height:1.28;
  background:#fff;
  font-size:14px;
}
.toc .toc-text{
  position:relative;
  display:inline;
  line-height:1.28;
}
.toc .toc-text::before{
  counter-increment: toc;
  content: counter(toc) ". ";
  margin-right:.25em; opacity:.9;
}
.toc .toc-arrow{ width:14px; height:14px; opacity:.65; font-size:14px; line-height:14px; }
.toc .toc-arrow::before{ content:"→"; display:inline-block; }
.toc .toc-item:hover,
.toc .toc-item:focus{ background:#f4f8ee; outline:none; }
.toc .toc-item:focus-visible{
  box-shadow:inset 0 0 0 2px #82bc24;
  border-color:rgba(130,188,36,.35);
}
@media (max-width:640px){
  .toc{ max-width:100%; }
}


/* =========================================================
   【改 4】正文标题避挡：锚点滚动预留头部高度
   ========================================================= */
h2[id],
h3[id]{
  scroll-margin-top: clamp(72px, 6vw, 110px);
}


/* =========================================================
   Frequently Asked Questions（品牌绿系）
   ========================================================= */
.faq-section .faq-h2{
  margin:3px 0 25px;
  font-size:28px;
  line-height:1.3;
  font-weight:700;
}

.faq{
  width:100%;
  max-width:none;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
  box-shadow:none;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft Yahei",Arial,sans-serif;
  margin:0 0 20px;
}
.faq .faq-list{ display:block; }
.faq .faq-item{ border-top:1px solid #e5e7eb; }
.faq .faq-item:first-child{ border-top:none; }

/* H3 问题行 */
.faq .faq-q{
  display:flex; align-items:center;
  padding:12px 16px;
  cursor:pointer; user-select:none;
  outline:0; color:#111827;
  margin:0;
  font-size:16px; line-height:1.35;
  font-weight:500;
  white-space:normal;
}
.faq .faq-q:hover{ background:#f7faf1; }
.faq .faq-q:focus{ box-shadow:inset 0 0 0 2px #82bc24; background:#f4f8ee; }
.faq .is-open > .faq-q{ background:#f4f8ee; transition:background .15s ease; }

/* 左侧编号 / 标题 / 右侧符号 */
.faq .faq-num{ width:18px; margin-right:6px; font-weight:700; color:#82bc24; flex:0 0 auto; }
.faq .faq-text{ flex:1 1 auto; min-width:0; }
.faq .faq-arrow{
  width:16px; height:16px; text-align:right;
  opacity:.7; font-weight:600; flex:0 0 auto;
}
.faq .faq-arrow::before{ content:"+"; line-height:16px; font-size:18px; }
.faq .is-open > .faq-q .faq-arrow::before{ content:"\2212"; }

/* 答案区域 */
.faq .faq-a{
  display:none;
  box-sizing:border-box;
  padding:4px 20px 16px 40px;
  background:#fcfdfc;
  color:#374151;
  font-size:14.5px; line-height:1.75;
  overflow:visible;
}
.faq .is-open > .faq-a{ display:block; }
.faq .faq-a, .faq .faq-a *{
  white-space:normal !important;
  overflow-wrap:break-word !important;
  word-wrap:break-word !important;
  max-width:100% !important;
}
.faq .faq-a p{ margin:0 0 12px; display:block; }
.faq .faq-a p:last-child{ margin-bottom:0; }
.faq .faq-a strong{ color:#2c2d30; }
.faq .faq-a .mibet-lead-in{ color:#2c2d30; }

@media (max-width:640px){
.faq .faq-q{
    display:block !important;
    position:relative;
    padding:12px 34px 12px 38px;
    line-height:1.35;
  }
.faq .faq-num{
    position:absolute; left:16px; top:12px;
    width:auto; margin:0;
  }
.faq .faq-arrow{
    position:absolute; right:14px; top:14px;
  }
.faq .faq-text{
    display:block; min-width:0;
    white-space:normal !important;
    word-wrap:break-word; overflow-wrap:break-word;
  }
.faq .faq-a{ padding-left:38px; padding-right:20px; }
}


/* =========================================================
   [旧] 通用表格移动端水平滚动（.table-wrapper，保留）
   ========================================================= */
.table-wrapper {
  width: 100%;
  margin-bottom: 2em;
  overflow-x: hidden;
}
.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}
.table-wrapper th,
.table-wrapper td {
  padding: 12px 15px;
  text-align: left;
  border: 1px solid #e0e0e0;
  vertical-align: top;
}
.table-wrapper thead th {
  background-color: #f5f5f5;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
  }
  .table-wrapper table {
    min-width: 774px;
  }
  .table-wrapper::-webkit-scrollbar { height: 8px; }
  .table-wrapper::-webkit-scrollbar-track { background: #f1f1f1; }
  .table-wrapper::-webkit-scrollbar-thumb { background: #bbb; }
}


/* =========================================================
   [旧] H4 前的"播放"小图标（保留）
   ========================================================= */
.h4-play{
  display:inline-flex; align-items:center; gap:8px;
  margin:12px 0 8px;
}
.h4-play::before{
  content:"";
  display:inline-block;
  width:0; height:0;
  border-style:solid;
  border-width:7px 0 7px 11px;
  border-color:transparent transparent transparent #10b981;
  transform:translateY(1px);
}


/* =========================================================
   [旧] Video（文章内）最终版（保留）
   ========================================================= */
.video-box{
  width:100%;
  max-width:840px;
  margin:12px 0;
  position:relative !important;
}
.video-aspect{
  position:relative !important;
  isolation:isolate;
  height:0;
  padding-bottom:56.25%;
  aspect-ratio:16 / 9;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:8px;
  overflow:hidden;
}
.video-aspect > video,
.video-aspect > iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  border:0;
  background:#000;
}
.overlay-layer{
  position:absolute !important;
  inset:0 !important;
  z-index:5 !important;
  pointer-events:none;
}
.overlay-play{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
  pointer-events:auto;
  width:72px; height:72px;
  border-radius:999px; border:0;
  cursor:pointer;
  background:rgba(16,185,129,.92);
  box-shadow:0 6px 18px rgba(16,185,129,.35);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.overlay-play::before{
  content:"";
  display:block;
  border-style:solid;
  border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent #fff;
  margin-left:4px;
}
.overlay-play:hover,
.overlay-play:focus{
  transform:translate(-50%, -50%) scale(1.06);
}
.video-aspect.is-playing .overlay-play{
  opacity:0; pointer-events:none;
}
@media (max-width:480px){
.overlay-play{ width:60px; height:60px; }
.overlay-play::before{ border-width:10px 0 10px 16px; }
}
.video-aspect > video::-webkit-media-controls-start-playback-button,
.video-aspect > video::-webkit-media-controls-overlay-play-button{
  display: none !important;
}


/* =========================================================
   [旧] 正文双图网格 .img4（保留）
   ========================================================= */
.img4{
  font-size:0;
  margin:12px 0;
}
.img4 .img4-item{
  display:inline-block; vertical-align:top;
  width:49.5%;
  box-sizing:border-box;
  padding:0 8px 16px;
  margin:0;
}
.img4 img{
  display:block; width:100%; height:auto;
  border:1px solid #e5e7eb; border-radius:6px;
  background:#fff;
}
.img4 figcaption{
  text-align:center;
  margin-top:6px;
  font-size:14px; line-height:1.6;
  color:#374151;
}
@media (max-width:640px){
.img4 .img4-item{
    width:100%;
    padding:0 0 14px;
  }
}


/* =========================================================
   Article Sources 文章来源（品牌绿系）
   ========================================================= */
.srcs{
  background:#f6f8f7;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:none;
  margin:16px 0;
  overflow:hidden;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft Yahei",Arial,sans-serif;
}
.srcs-toggle{
  width:100%;
  display:flex; align-items:center; justify-content:initial;
  padding:16px 18px;
  background:transparent;
  border:0; cursor:pointer; text-align:left;
  color:#111827; font-size:18px; line-height:1.3;
  transition:background .15s ease;
}
.srcs-toggle:hover{ background:#f7faf1; }
/* 【新 16】键盘焦点环：与 .mibet-toc summary 同一档，
   鼠标点击不触发（:focus-visible），只在键盘导航时出现 */
.srcs-toggle:focus-visible{
  outline: 2px solid rgba(130,188,36,.45);
  outline-offset: -2px;
  background:#f7faf1;
}
.srcs-title{ margin-right:12px; font-weight:600; }
.srcs-arrow{
  margin-left:auto;
  position:relative; width:24px; height:24px; flex:0 0 auto;
  border:1.5px solid #94a3b8; border-radius:50%;
  color:#111827; opacity:.85; transition:transform .2s ease, opacity .2s ease;
}
.srcs-arrow::after{
  content:""; position:absolute; left:50%; top:50%;
  width:8px; height:8px; margin:-6px 0 0 -4px;
  border:2px solid currentColor; border-left:0; border-top:0;
  transform:rotate(45deg);
}
.srcs.is-open .srcs-arrow{ transform:rotate(180deg); }
.srcs-body{
  display:none;
  padding:14px 18px 16px;
  border-top:1px solid #e5e7eb;
  background:#f5fcf7;
}
.srcs.is-open .srcs-body{ display:block; }
.srcs,
.srcs *{
  box-sizing: border-box;
}
.srcs-intro{
  margin: 0 0 12px;
  color: #4a5568;
  font-size: 13.5px;
  line-height: 1.7;
}
.single-blog-content .srcs-list{
  margin: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
  list-style-type: none !important;
}
.single-blog-content .srcs-list li{
  list-style: none !important;
  list-style-type: none !important;
  background: none !important;
  position: relative !important;
  padding-left: 18px !important;
  margin: 0 0 10px 0 !important;
  color: #374151;
  font-size: 13.5px;
  line-height: 1.6;
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 100%;
}
.single-blog-content .srcs-list li:last-child{
  margin-bottom: 0 !important;
}
.srcs-list li::before{
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  top: 8px !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background-color: #82bc24 !important;
}
.single-blog-content .srcs-list a{
  display: inline;
  color: #374151;
  text-decoration: none !important;
  border-bottom: 1px dotted transparent;
  overflow-wrap: break-word;
  word-break: normal;
  transition: color .15s ease, border-color .15s ease;
}
.single-blog-content .srcs-list a:hover{
  color: #60911a;
  text-decoration: none !important;
  border-bottom-color: #82bc24;
}

@media (max-width:640px){
  .srcs-toggle{ padding:14px 14px; font-size:16px; }
  .srcs-body{ padding:12px 16px 14px; }
  .single-blog-content .srcs-list li{ font-size: 13px; }
}


/* =========================================================
   弹窗样式（保留，阴影是必要的层级提示，不参与【改 11】）
   ========================================================= */
#modal-inquiry-success.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
}
.md-show ~ .md-overlay {
    opacity: 1;
    visibility: visible;
    transition: all 0.3s;
}
#modal-inquiry-success .md-content {
    background: #ffffff;
    color: #333333;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    max-width: 500px;
    width: 90vw;
    padding: 20px 30px;
    box-sizing: border-box;
}
#modal-inquiry-success h3 {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
}
#modal-inquiry-success p {
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 30px;
}
#modal-inquiry-success #inquiry-success-ok {
    background-color: #00a651 !important;
    font-size: 16px;
    padding: 12px 50px;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: block;
    margin: 0 auto;
    border: none;
    cursor: pointer;
}
#modal-inquiry-success #inquiry-success-ok:hover {
    background-color: #008742 !important;
}


/* =========================================================
   Mibet Blog 核心组件
   ========================================================= */

/* 语义化章节容器：不引入任何间距，仅防止主题 section 样式污染 */
.single-blog-content .mibet-section{
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* 全局重置，防止 CMS 主题样式污染 */
.mibet-hero-box ul,
.mibet-toc ul,
.mibet-mechanism-grid ul,
.mibet-criteria-box ul {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.mibet-hero-box ul li,
.mibet-toc ul li {
    list-style: none !important;
    list-style-type: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 1. 一体化 Quick Answer & Key Takeaways 卡片
   【改 11】去除残留阴影 */
.mibet-hero-box {
    background-color: #fcfdfc;
    border: 1px solid #e1e8da;
    border-radius: 8px;
    padding: 24px 28px;
    margin: 32px 0;
    box-shadow: none;
}
.mibet-quick-answer {
    margin-bottom: 20px;
}
/* 【新 4】只放 Quick Answer、不带 Key Takeaways 时的间距修正 */
.mibet-hero-box.qa-only .mibet-quick-answer {
    margin-bottom: 0;
}
.mibet-qa-badge {
    display: inline-block;
    background-color: #f0f6e9;
    color: #70a120;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.mibet-qa-text {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.6;
    color: #1a202c;
    margin: 0;
}
/* 【改 19】下外边距由 0 改为 18px。
   原值下分隔线紧贴 KEY TAKEAWAYS 标题，两者之间没有喘息。
   只影响使用完整版 hero box 的文章；.qa-only 不含分隔线。
   回退：margin: 20px 0 0px 0; */
.mibet-divider {
    border: 0;
    border-top: 1px solid #e9edf0;
    margin: 20px 0 18px 0;
}
.mibet-key-takeaways .takeaways-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #2c2d30;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}
.single-blog-content .mibet-key-takeaways ul{
    padding-left: 1.0em;
}
.single-blog-content .mibet-key-takeaways ul li {
    list-style-type: none !important;
    position: relative !important;
    padding-left: 20px !important;
    margin-bottom: 14px !important;
    font-size: 15px;
    line-height: 1.6;
    color: #4a5568;
}
.mibet-key-takeaways ul li::before {
    content: "•" !important;
    position: absolute !important;
    left: 2px !important;
    top: -1px !important;
    color: #82bc24 !important;
    font-size: 20px !important;
    line-height: 1 !important;
}
.mibet-key-takeaways ul li strong { color: #2c2d30; }


/* =========================================================
   【改 3】2. Table of Contents
   - 原生 <details>/<summary>，无 JS 依赖，折叠态下链接仍在 DOM 中
   - 编号由 CSS counter 自动生成，增删 H2 不需要改文案
   ========================================================= */
.mibet-toc {
    border: 1px solid #e2e8f0;
    background-color: #fcfdfc;
    border-radius: 8px;
    padding: 16px 18px 14px 18px;
    margin: 32px 0;
}
.mibet-toc summary {
    list-style: none !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #2c2d30;
    cursor: pointer;
    outline: none;
}
.mibet-toc summary::-webkit-details-marker {
    display: none !important;
}
/* 右侧图标按钮（灰） */
.mibet-toc summary::after {
    content: "";
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='2.4' width='2.6' height='2.6' rx='.6' fill='%23a0aec0'/%3E%3Crect x='5.8' y='3' width='9.2' height='1.5' rx='.75' fill='%23a0aec0'/%3E%3Crect x='1' y='6.7' width='2.6' height='2.6' rx='.6' fill='%23a0aec0'/%3E%3Crect x='5.8' y='7.3' width='9.2' height='1.5' rx='.75' fill='%23a0aec0'/%3E%3Crect x='1' y='11' width='2.6' height='2.6' rx='.6' fill='%23a0aec0'/%3E%3Crect x='5.8' y='11.6' width='9.2' height='1.5' rx='.75' fill='%23a0aec0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.mibet-toc summary:hover::after {
    border-color: #cbd5e1;
}
/* 展开态图标按钮（绿） */
.mibet-toc[open] summary::after {
    background-color: #f4f8ee;
    border-color: #dbe6c8;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='2.4' width='2.6' height='2.6' rx='.6' fill='%2382bc24'/%3E%3Crect x='5.8' y='3' width='9.2' height='1.5' rx='.75' fill='%2382bc24'/%3E%3Crect x='1' y='6.7' width='2.6' height='2.6' rx='.6' fill='%2382bc24'/%3E%3Crect x='5.8' y='7.3' width='9.2' height='1.5' rx='.75' fill='%2382bc24'/%3E%3Crect x='1' y='11' width='2.6' height='2.6' rx='.6' fill='%2382bc24'/%3E%3Crect x='5.8' y='11.6' width='9.2' height='1.5' rx='.75' fill='%2382bc24'/%3E%3C/svg%3E");
}
.mibet-toc summary:focus-visible {
    box-shadow: 0 0 0 2px rgba(130,188,36,.35);
    border-radius: 4px;
}

/* 单栏纵向排列：条目不再分栏，避免长短标题换行后左右两栏高度错位 */
.single-blog-content .mibet-toc-list {
    counter-reset: mibet-toc;
    column-count: 1;
    margin: 12px 0 0 0 !important;
    padding-left: 0 !important;
    border-top: 1px solid #eef2ea;
}
.single-blog-content .mibet-toc-list li {
    list-style-type: none !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #eef2ea;
}
.mibet-toc-list li:last-child {
    border-bottom: none;
}
/* hover 时左侧长出的品牌绿短条 */
.mibet-toc-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background-color: #82bc24;
    border-radius: 2px;
    transition: height 0.2s ease;
    z-index: 1;
}
.mibet-toc-list li:hover::before {
    height: 56%;
}
.mibet-toc-list li a {
    display: block;
    padding: 10px 12px 10px 34px;
    color: #4a5568;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}
/* 自动编号 */
.mibet-toc-list li a::before {
    counter-increment: mibet-toc;
    content: counter(mibet-toc);
    position: absolute;
    left: 13px;
    top: 10px;
    color: #82bc24;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}
.mibet-toc-list li a:hover {
    color: #2c2d30;
    background-color: #f7faf1;
}
.mibet-toc-list li a:focus-visible {
    color: #2c2d30;
    background-color: #f7faf1;
    outline: 2px solid rgba(130,188,36,.45);
    outline-offset: -2px;
}

/* 3. Engineer's Note / Engineering Note / Scope Note / Layout Note
   / Procurement Note / Warranty Note / Schedule Note / Planning Note
   / Data Note —— 标注家族
   共用同一底子，仅靠标签文字区分（不配不同颜色/图标）。
   刻意不做"警示色"变体：引入第三种强调色会破坏双色体系，
   内容的轻重交给标签文字和所在位置表达。
   预算：一篇文章 4 条封顶，再多会从"工程师旁注"退化成
   "每节一个提示框"。 */
.mibet-engineer-tip {
    background-color: #fcfdfc;
    border-left: 2px solid #cbd5e1;
    padding: 18px 22px;
    margin: 28px 0;
    border-radius: 0 4px 4px 0;
}
.tip-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #82bc24;
    background: none !important;
    padding: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}
.tip-label::before {
    content: "› ";
    font-size: 15px;
    font-weight: 900;
}
.tip-content {
    font-size: 14px;
    line-height: 1.7;
    color: #4a5568;
    font-style: italic;
    margin: 0 !important;
}
.tip-content + .tip-content { margin-top: 12px !important; }

/* 4. 规范与高价值数据微设计 */
.mibet-badge-standard {
    background-color: #f2f6ee;
    color: #60911a;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 600;
    display: inline-block;
    margin: 0 2px;
}
.mibet-metric {
    border-bottom: 1.5px dashed #82bc24;
    padding-bottom: 1px;
    color: #2c2d30;
    font-weight: 600;
}

/* 【新 9】4a. 内联术语定义标记 .mibet-term
   用途：标记正文中首次给出定义的术语（load path / clear span /
   cantilever / GCR / dripline / table geometry 等）。
   视觉重量刻意低于 .mibet-metric：中性灰点线，不占用品牌绿。
   规则：同一术语全文只标一次，标在给出定义的那一句上。
   预算：一篇 3–4 个，超出会让正文出现连片点线。 */
.mibet-term {
    font-weight: 600;
    color: #2c2d30;
    border-bottom: 1px dotted #a0aec0;
    padding-bottom: 1px;
}

/* =========================================================
   【改 1 / 改 2 / 改 10】5. 响应式表格
   r4：容器加发丝线边框 + 8px 圆角，表格不再是全页唯一的直角块。
   caption 变成表内标题条（白底 + 底部发丝线），tbody 末行去掉
   底边线，避免与容器边框叠成双线。
   若需回退到 r3 的无边框表格，只删本块的 border / border-radius
   与 caption 的 background / border-bottom 即可。
   ========================================================= */
.mibet-table-container {
    width: 100%;
    overflow-x: auto;
    margin: 20px 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
}
.mibet-custom-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
    text-align: left;
    color: #4a5568;
}
/* 【改 14】清掉主题给 <table> 的默认上下外边距。
   r3 的表格没有容器边框，这段外边距看不出来；r4 加边框后，
   它会在表头上方和末行下方各露出一条白带。 */
.single-blog-content .mibet-table-container > .mibet-custom-table,
.single-blog-content .mibet-table-container .mibet-custom-table {
    margin: 0 !important;
}
/* 【新 5】4 列及以上的宽表 */
.mibet-custom-table.table-wide {
    min-width: 760px;
}
/* 【新 7】2 列窄表：两列在 320px 视口也能读，不需要强制横滚 */
.mibet-custom-table.table-narrow {
    min-width: 0;
}
.mibet-custom-table thead th {
    background-color: #f2f6ee;
    color: #2c2d30;
    font-weight: 700;
    letter-spacing: 0.2px;
    padding: 13px 18px;
    border: none;
    border-bottom: 2px solid #82bc24;
    vertical-align: bottom;
}
.mibet-custom-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
    line-height: 1.5;
    vertical-align: middle;
}
/* 【改 6】数值列纵向对齐（psf / kPa / 系数 / 温度等） */
.mibet-custom-table td,
.mibet-custom-table tbody th {
    font-variant-numeric: tabular-nums;
}
.mibet-custom-table tbody tr:nth-child(even) {
    background-color: #fafbfa;
}
.mibet-custom-table tbody tr:hover {
    background-color: #f4f8ee;
}
/* 【改 10】末行不再画底边线，交给容器边框 */
.mibet-custom-table tbody tr:last-child td,
.mibet-custom-table tbody tr:last-child th {
    border-bottom: 0;
}
/* 【改 14】表格标题（caption）：新文章不再使用表内标题条，
   表格的说明交给上一段正文承担，表头直接接住容器边框。
   下面的样式保留给仍带 caption 文本的历史文章；空 caption
   直接不渲染，避免留下一条白带。 */
.mibet-custom-table caption:empty {
    display: none;
}
.mibet-custom-table caption {
    caption-side: top;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    color: #2c2d30;
    padding: 14px 18px 12px 18px;
    background-color: #ffffff;
    border-bottom: 1px solid #eef2ea;
}

/* 5a. 行标题列（<th scope="row">，也可用 td.col-rowhead） */
.mibet-custom-table tbody th,
.mibet-custom-table td.col-rowhead {
    background-color: #f6f8f4;
    color: #2c2d30;
    font-weight: 600;
    text-align: left;
    padding: 14px 18px;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    line-height: 1.5;
    vertical-align: middle;
}
.mibet-custom-table tbody tr:nth-child(even) th,
.mibet-custom-table tbody tr:nth-child(even) td.col-rowhead {
    background-color: #f2f5ef;
}
.mibet-custom-table tbody tr:hover th,
.mibet-custom-table tbody tr:hover td.col-rowhead {
    background-color: #eef3e8;
}

/* 5b. 焦点列：把"结论/限制"那一列点亮
   【改 8】使用规则：只用于 5 行及以内的表。
   行数更多时整列同色会被读成"这一列是绿的"而不是"这一列是重点"，
   届时改用 tr.row-group 分段，或用 .mibet-verdict 逐格标注。
   并列方案的对比表（铝方案列 / 钢方案列、地面列 / 屋面列）
   不要用本类，点亮其中一列会被读成推荐倾向。 */
.mibet-custom-table thead th.col-focus {
    background-color: #e4eed3;
}
.mibet-custom-table td.col-focus {
    background-color: #f6faf0;
    color: #2c2d30;
    font-weight: 600;
}
.mibet-custom-table tbody tr:nth-child(even) td.col-focus { background-color: #f1f7e6; }
.mibet-custom-table tbody tr:hover td.col-focus { background-color: #eaf3d9; }

/* 5c. 焦点行：表内结论行整行点亮 */
.mibet-custom-table tbody tr.row-focus,
.mibet-custom-table tbody tr.row-focus:nth-child(even) {
    background-color: #f4f8ee;
}
.mibet-custom-table tbody tr.row-focus td,
.mibet-custom-table tbody tr.row-focus th {
    border-bottom-color: #dbe6c8;
}
.mibet-custom-table tbody tr.row-focus:hover { background-color: #eaf3d9; }

/* 5d. 对比表：FPV / 目标方案列 */
.mibet-custom-table thead th.col-fpv {
    background-color: #dfebc8;
    color: #2c2d30;
}
.mibet-custom-table td.col-fpv {
    background-color: #f6faf0;
    color: #2c2d30;
}
.mibet-custom-table tbody tr:nth-child(even) td.col-fpv { background-color: #f1f7e6; }
.mibet-custom-table tbody tr:hover td.col-fpv { background-color: #eaf3d9; }

/* 【新 3】5e. 中性列：三态判定表里的"待进一步研究"列 */
.mibet-custom-table thead th.col-neutral {
    background-color: #f0f1f2;
    color: #4a5568;
    border-bottom-color: #cbd5e1;
}
.mibet-custom-table td.col-neutral {
    background-color: #fafbfc;
    color: #718096;
}
.mibet-custom-table tbody tr:nth-child(even) td.col-neutral { background-color: #f6f7f8; }
.mibet-custom-table tbody tr:hover td.col-neutral { background-color: #f1f2f4; }

/* =========================================================
   【新 6】5f. 长表分组行 tr.row-group
   用途：行数较多的输入/参数清单表或对比表，按性质分段，
   避免长表平铺。并列方案对比表禁用 .col-focus，需要分层时
   用本类，不会被读成推荐倾向。
   结构：<tr class="row-group"><th colspan="N" scope="colgroup">分组名</th></tr>
   [colspan] 属性选择器用于抬高优先级，压过 5a 的行标题列样式
   和 nth-child 斑马纹，不依赖规则书写顺序。
   ========================================================= */
.mibet-custom-table tbody tr.row-group th[colspan] {
    background-color: #f2f6ee;
    color: #60911a;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    line-height: 1.4;
    padding: 9px 18px;
    border: none;
    border-bottom: 1px solid #dbe6c8;
    vertical-align: middle;
}
.mibet-custom-table tbody tr.row-group:hover th[colspan] {
    background-color: #f2f6ee;
}
/* 分组行不是数据行，鼠标不做可交互暗示 */
.mibet-custom-table tbody tr.row-group {
    cursor: default;
}

/* =========================================================
   【新 8】5g. 三态判定标签 .mibet-verdict
   用途：判定结果列。整列上色在多行表里会失效，改为逐格标注。
   结构：<td><span class="mibet-verdict v-fit">Often suitable</span></td>
   所在列不要再叠加 .col-focus，否则底色会与标签互相抵消。
   ========================================================= */
.mibet-verdict {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.2px;
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: 4px;
    white-space: nowrap;
    font-variant-numeric: normal;
}
.mibet-verdict.v-fit {
    background-color: #f2f6ee;
    color: #60911a;
    border-color: #e4eed3;
}
.mibet-verdict.v-case {
    background-color: #f0f1f2;
    color: #4a5568;
    border-color: #e2e8f0;
}
.mibet-verdict.v-alt {
    background-color: #ffffff;
    color: #718096;
    border-color: #cbd5e1;
}

/* =========================================================
   【改 7 / 新 15】6. 并列型栅格：双栏对比卡片 + 机制卡片网格
   层级规则：
     独立卡片（hero / criteria / toc / tip）= 全边框 + 圆角
     并列栅格（compare-grid / mechanism-grid / datastrip
               / loadpath / relation）= 外框收口 + 1px 缝隙分格

   【新 15】.mibet-compare-grid / .mibet-compare-card 是
   .mibet-geo-comparison / .mibet-geo-card 的语义别名，取值相同。
   新文章用哪一套都可以：地理口径对比（US / EU）沿用 geo 命名，
   中性双栏对比（移出范围 / 移入范围、优势 / 代价）用 compare 命名。
   两套类名不要同时写在一个元素上。
   ========================================================= */
.mibet-geo-comparison,
.mibet-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background-color: #e6ebdf;
    border: 1px solid #e6ebdf;
    border-radius: 8px;
    overflow: hidden;
    margin: 28px 0;
}
.mibet-geo-card,
.mibet-compare-card {
    background: #fcfdfc;
    border: 0;
    border-radius: 0;
    padding: 20px 22px;
}
.mibet-geo-card .card-tag,
.mibet-compare-card .card-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #2c2d30;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.35;
}
.mibet-geo-card p,
.mibet-compare-card p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0 !important;
}
.mibet-geo-card p + p,
.mibet-compare-card p + p {
    margin-top: 10px !important;
}
/* 【改 13】双栏栅格里落单的最后一张卡占满整行，
   避免空出的格子露出 #e6ebdf 底色 */
.mibet-geo-comparison > .mibet-geo-card:last-child:nth-child(odd),
.mibet-compare-grid > .mibet-compare-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* =========================================================
   【新 1】7. 实测数据条 .mibet-datastrip
   用途：把一组数值从叙述里提出来，供扫读与 AI 抽取。
   结构只用 div + span（不用 dl/dt/dd：多数 CMS 编辑器的元素白名单
   不含定义列表，粘贴后会被剥掉标签）。
   必须搭配 .ds-note 写明数据条件与出处，缺条件的数据卡不要用；
   推导值（非实测值）与规范条款值同样要在 .ds-note 里说明来源。
   840px 栏宽下：4 列每格约 209px，3 列（.ds-3）每格约 280px。
   标签超过 6 个单词时优先用 .ds-3。
   适用边界：分类值（曝光类别、腐蚀性等级 C1–CX、等级代号）
   不放数值位，改用表格或正文。文章本身没有可溯源的数值时
   不要启用本组件，凑数比不用更伤可信度。
   ========================================================= */
.single-blog-content .mibet-datastrip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background-color: #e6ebdf;
    border: 1px solid #e6ebdf;
    border-radius: 8px;
    overflow: hidden;
    margin: 28px 0 0 0;
    padding: 0;
}
/* 3 项时的修饰类 */
.single-blog-content .mibet-datastrip.ds-3 {
    grid-template-columns: repeat(3, 1fr);
}
.single-blog-content .mibet-datastrip .ds-item {
    display: block;
    background-color: #fcfdfc;
    padding: 18px 18px 16px;
    margin: 0;
}
.single-blog-content .mibet-datastrip .ds-value {
    display: block;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: #2c2d30;
    margin: 0 0 7px 0;
    padding: 0;
    font-variant-numeric: tabular-nums;
}
.single-blog-content .mibet-datastrip .ds-unit {
    font-size: 15px;
    font-weight: 600;
    margin-left: 1px;
    color: #4a5568;
}
/* 数值前缀（min. / max. / up to / approx. 等限定词），
   压小并上提，不与数字抢主体 */
.single-blog-content .mibet-datastrip .ds-cap {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    color: #82bc24;
    margin-right: 5px;
    vertical-align: 4px;
    letter-spacing: 0.3px;
}
/* 【新 13】副值位 .ds-alt
   用途：同一数值的第二套单位（英制换算）或等效表述。
   规则：主单位留在 .ds-value，换算值一律降级到本行。
   两套单位挤进 26px 数值位会让整条数据条失去扫读价值。 */
.single-blog-content .mibet-datastrip .ds-alt {
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #a0aec0;
    margin: 0 0 7px 0;
    padding: 0;
    font-variant-numeric: tabular-nums;
}
/* 有副值行时收紧主值下方间距，避免值 / 副值 / 标签三行等距 */
.single-blog-content .mibet-datastrip .ds-value + .ds-alt {
    margin-top: -2px;
}
.single-blog-content .mibet-datastrip .ds-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    color: #718096;
    margin: 0;
    padding: 0;
}

/* 【改 17】含副值行的数据条：标签行贴底对齐。
   只有部分格子带 .ds-alt 时，那一格会比同排其他格多出一行，
   标签整排错位。这里把 .ds-item 改成纵向弹性盒，
   .ds-label 用 margin-top:auto 推到底部，数值仍然顶部对齐。
   :has() 把作用域限定在确实含副值行的数据条上：
   不含 .ds-alt 的历史数据条不进入本规则；
   浏览器不支持 :has() 时退回 r5 行为，仅副值格标签偏低，不破版。 */
.single-blog-content .mibet-datastrip:has(.ds-alt) .ds-item {
    display: flex;
    flex-direction: column;
}
.single-blog-content .mibet-datastrip:has(.ds-alt) .ds-label {
    margin-top: auto;
}

/* 【改 18】块级脚注 .ds-note
   数据条与关系条共用：写明数据条件、前提、出处，
   或标注推导值 / 示例值而非实测值。
   位置固定在所属图形块的正下方，不用于普通段落。 */
.single-blog-content .ds-note {
    font-size: 12.5px;
    line-height: 1.65;
    color: #718096;
    font-style: italic;
    margin: 10px 0 28px 0 !important;
}

/* =========================================================
   【新 2】8. 判定清单卡 .mibet-criteria-box
   用途：把"满足以下条件时成立"这类可复制、可截图的判定条款成组固定。
   典型内容：规范方法的适用性限值、成立门槛、指向性条件清单。
   建议一篇文章只用一个，用第二个会稀释第一个的分量。
   与"要准备哪些材料"这类清单区分：后者用 .mibet-bullet-list，
   本组件留给真正的门槛条款。
   ✓ 勾选是本组件的专属符号，不外借。
   ========================================================= */
.mibet-criteria-box {
    background-color: #fcfdfc;
    border: 1px solid #e1e8da;
    border-radius: 8px;
    padding: 22px 26px;
    margin: 28px 0;
}
.mibet-criteria-box .criteria-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #82bc24;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}
.single-blog-content .mibet-criteria-box .criteria-intro {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    color: #2c2d30;
    margin: 0 0 14px 0 !important;
}
.single-blog-content .criteria-list {
    padding-left: 0 !important;
    margin: 0 !important;
}
.single-blog-content .criteria-list li {
    list-style-type: none !important;
    position: relative !important;
    padding-left: 28px !important;
    margin: 0 0 11px 0 !important;
    font-size: 14.5px;
    line-height: 1.6;
    color: #4a5568;
}
.single-blog-content .criteria-list li:last-child {
    margin-bottom: 0 !important;
}
.criteria-list li::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid #82bc24;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* =========================================================
   【改 7】9. 机制 / 概览卡片网格
   短内容 3 列，长内容用 .cols-2 降为 2 列（4 项时排成 2×2）。
   .mech-num 为可选元素：只有内容确实是有序步骤时才用，
   并列关系（三组变量、承载力的三个来源）不加编号，
   避免被读成顺序。
   ========================================================= */
.mibet-mechanism-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background-color: #e6ebdf;
    border: 1px solid #e6ebdf;
    border-radius: 8px;
    overflow: hidden;
    margin: 28px 0;
}
.mibet-mechanism-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}
/* 【改 13】.cols-2 下奇数张卡时，最后一张占满整行 */
.mibet-mechanism-grid.cols-2 > .mibet-mechanism-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}
.mibet-mechanism-card {
    background: #fcfdfc;
    border: 0;
    border-radius: 0;
    padding: 18px 20px 20px;
}
.mibet-mechanism-card .mech-num {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #82bc24;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}
.mibet-mechanism-card .mech-title {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: #2c2d30;
    margin-bottom: 6px;
    line-height: 1.35;
}
.mibet-mechanism-card .mech-desc {
    font-size: 13px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0 !important;
}

/* =========================================================
   【新 10】9a. 载荷路径链条 .mibet-loadpath
   用途：把结构传力路径（modules → rails or purlins → main beams →
   columns and bases → foundations，或地面支架的
   modules → beams → posts → foundations → soil）从加粗正文里
   提出来，成为可扫读、可独立抽取的一行。
   结构：<ol class="mibet-loadpath"><li>…</li>…</ol>
     用 <ol> 而不是 div：它本身就是有序序列，语义和抽取都受益。
   视觉：复用并列栅格的 1px 缝隙语言，归入栅格层级而非独立卡片，
   不与 hero / criteria 抢重量。
   方向符号是全页唯一表达"方向"的图形，只用于本组件，
   其他地方再出现会让方向感贬值。
   行数：6 段是上限。840px 下 6 段每格约 139px、5 段（.lp-5）
   约 167px，标签控制在 2–3 个单词内。
   ========================================================= */
.single-blog-content .mibet-loadpath {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background-color: #e6ebdf;
    border: 1px solid #e6ebdf;
    border-radius: 8px;
    overflow: hidden;
    margin: 24px 0 28px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    list-style-type: none !important;
    counter-reset: none;
}
/* 【新 12】5 段变体。
   注意：本选择器是 (0,3,0)，比基础规则 (0,2,0) 高，
   所以移动端单列必须在媒体查询里同步写一条 .lp-5 覆盖，
   否则手机端会继续按 5 列渲染。 */
.single-blog-content .mibet-loadpath.lp-5 {
    grid-template-columns: repeat(5, 1fr);
}
.single-blog-content .mibet-loadpath li {
    list-style-type: none !important;
    background: #fcfdfc !important;
    position: relative !important;
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 16px 14px !important;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #2c2d30;
}
.single-blog-content .mibet-loadpath li:not(:last-child) {
    padding-right: 26px !important;
}
/* 覆盖主题可能给 li 加的项目符号 */
.single-blog-content .mibet-loadpath li::before {
    content: none !important;
}
/* 方向符号：品牌绿细角标，指向下一段 */
.mibet-loadpath li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 9px;
    top: 50%;
    width: 6px;
    height: 6px;
    border: solid #82bc24;
    border-width: 1.5px 1.5px 0 0;
    transform: translateY(-50%) rotate(45deg);
}

/* =========================================================
   【新 11 / 改 20】9b. 关系条 .mibet-relation
   用途：把一条"因子 × 因子 = 结果"或"因子 ÷ 因子 = 结果"的
   定量关系从正文里提出来。
   典型场景：滑移抗力 = 法向力 × 摩擦系数；
             热胀位移 = 长度 × 温差；
             GCR = 组件面积 ÷ 占地面积。
   结构：
     <div class="mibet-relation rel-noted">
       <div class="rel-item"><span class="rel-term">…</span>
                             <span class="rel-note">…</span></div>
       <div class="rel-op">&times;</div>
       <div class="rel-item">…</div>
       <div class="rel-op">=</div>
       <div class="rel-item rel-result">…</div>
     </div>
     <p class="ds-note">前提与出处…</p>
   语言边界：
     - 【改 20】分隔符只用 × ÷ =，不用箭头。除法同属等式词汇；
       方向角标是 .mibet-loadpath 的专属符号，两个组件同页出现时
       符号必须可区分。
     - 结果格 .rel-result 用 .col-focus 的同一档浅绿 #f6faf0，
       表示"这一格是输出"，不引入新色。
     - 一篇文章用一次。第二条关系式请改用表格或正文。
     - 常数系数（膨胀系数、摩擦系数等）留在 .rel-note 或脚注里，
       不单独占一个格子：三因子会把格宽压到 180px 以下。
   840px 栏宽下：三格各约 250px，运算符列各约 40px。
   .rel-term 控制在 3 个单词内，.rel-note 一行短句。
   ========================================================= */
.mibet-relation {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 1px;
    background-color: #e6ebdf;
    border: 1px solid #e6ebdf;
    border-radius: 8px;
    overflow: hidden;
    margin: 28px 0;
}
/* 【新 14】带脚注变体：下外边距归零，让紧随其后的 .ds-note
   贴住关系条，与"数据条 + 脚注"的间距节奏一致。
   刻意只写 margin-bottom 单属性而不是 margin 简写：
   移动端媒体查询里 .mibet-relation 会重设 margin 简写，
   写简写会被整块覆盖掉底部归零的效果。
   本选择器 (0,2,0) 高于媒体查询里的 (0,1,0)，各断点均生效。 */
.mibet-relation.rel-noted {
    margin-bottom: 0;
}
.mibet-relation .rel-item {
    background-color: #fcfdfc;
    padding: 18px 20px 20px;
}
.mibet-relation .rel-item.rel-result {
    background-color: #f6faf0;
}
.mibet-relation .rel-term {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: #2c2d30;
    line-height: 1.35;
    margin-bottom: 6px;
}
.mibet-relation .rel-note {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    color: #718096;
}
/* 运算符列：窄格，读作两块内容之间的连接件而非第四张卡 */
.mibet-relation .rel-op {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 0 12px;
    background-color: #f6f8f4;
    color: #82bc24;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: normal;
}

/* 10. 工程步骤有序列表
   【改 16】ol 自身也要清掉主题的列表符与默认外边距：
   主题的 ol 默认样式会在 padding-left 归零后把原生编号
   露在容器外。
   使用边界：只用于真正的有序序列（劣化顺序、施工步骤、
   选型的优先级顺序），并列关系用 .mibet-bullet-list。 */
.single-blog-content .mibet-ordered-list {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin: 20px 0 !important;
    counter-reset: mibet-counter;
}
.single-blog-content .mibet-ordered-list li {
    list-style-type: none !important;
    background: none !important;
    position: relative;
    padding-left: 32px !important;
    margin-bottom: 16px !important;
    font-size: 15px;
    line-height: 1.6;
    color: #4a5568;
}
.single-blog-content .mibet-ordered-list li:last-child {
    margin-bottom: 0 !important;
}
.mibet-ordered-list li::before {
    counter-increment: mibet-counter;
    content: counter(mibet-counter) "." !important;
    position: absolute;
    left: 0;
    top: 0;
    color: #82bc24;
    font-weight: 800;
    font-size: 16px;
    background: none !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
}

/* 11. 正文通用要点列表（品牌绿圆点） */
.single-blog-content .mibet-bullet-list { padding-left: 1.0em; margin: 18px 0; }
.single-blog-content .mibet-bullet-list li {
    list-style-type: none !important;
    position: relative !important;
    padding-left: 20px !important;
    margin-bottom: 12px !important;
    font-size: 15px;
    line-height: 1.65;
    color: #4a5568;
}
.mibet-bullet-list li::before {
    content: "•" !important;
    position: absolute !important;
    left: 2px !important;
    top: -1px !important;
    color: #82bc24 !important;
    font-size: 20px !important;
    line-height: 1 !important;
}
.mibet-bullet-list li strong { color: #2c2d30; }

/* 12. 品牌 CTA 收口块
   注：文章末尾的方案/联系段落默认用普通正文排版，不套本块。
   本块保留给正文中间需要独立收口的短段落。 */
.mibet-cta-block {
    background: #f7faf1;
    border: 1px solid #e1e8da;
    border-left: 3px solid #82bc24;
    border-radius: 0 8px 8px 0;
    padding: 22px 26px;
    margin: 24px 0;
}
.mibet-cta-block p { margin: 0 0 12px 0; }
.mibet-cta-block p:last-child { margin-bottom: 0; }

/* 13. 图片说明（figure / figcaption 统一图注样式） */
.single-blog-content .mibet-figure {
    margin: 32px 0;
}
.single-blog-content .mibet-figure img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    box-shadow: none;
}
.single-blog-content .mibet-figure figcaption {
    text-align: center;
    font-size: 13.5px;
    color: #718096;
    margin-top: 12px;
    font-style: italic;
    line-height: 1.6;
}

/* 14. 平铺式 FAQ 分隔（保留） */
.mibet-faq-flat-section {
    margin-top: 48px;
    padding-top: 1px;
    border-top: 2px solid #f0f6e9;
}

/* 15. 段内小标题引导（替代高频 <strong>）
   典型用法：双栏对比卡内的 Roof access. / Site management. 分层，
   有序列表条目的引导词，或段首的短引导词。
   字重由本类承担，正文里不再散布 <strong>。 */
.mibet-lead-in {
    font-weight: 700;
    color: #2c2d30;
}


/* =========================================================
   响应式：平板及移动端
   ========================================================= */
@media screen and (max-width: 1024px) {
    .single-blog-content .mibet-datastrip {
        grid-template-columns: repeat(2, 1fr);
    }
    .single-blog-content .mibet-datastrip.ds-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    /* 3 列机制网格在平板上降为 2 列，卡片文字不至于挤成竖条 */
    .mibet-mechanism-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* 【改 13】降为 2 列后，3 张卡会空出第 4 格并露出栅格底色，
       让落单的最后一张占满整行 */
    .mibet-mechanism-grid > .mibet-mechanism-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
    /* 载荷路径仍保持单行 6 段，收紧内边距与字号 */
    .single-blog-content .mibet-loadpath li {
        padding: 14px 11px !important;
        font-size: 12px;
    }
    .single-blog-content .mibet-loadpath li:not(:last-child) {
        padding-right: 22px !important;
    }
    .mibet-loadpath li:not(:last-child)::after {
        right: 7px;
    }
    /* 【新 11】关系条在平板上保持三格一行，收紧内边距与副文字号 */
    .mibet-relation .rel-item {
        padding: 16px 16px 18px;
    }
    .mibet-relation .rel-term {
        font-size: 14px;
    }
    .mibet-relation .rel-note {
        font-size: 12px;
    }
    .mibet-relation .rel-op {
        min-width: 34px;
        padding: 0 9px;
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {
    .mibet-hero-box {
        padding: 20px;
        margin: 24px 0;
    }
    .mibet-qa-text {
        font-size: 15.5px;
    }
    .mibet-key-takeaways ul li {
        font-size: 14px;
        margin-bottom: 10px !important;
    }

    /* 目录：收紧内边距，行内距略降 */
    .mibet-toc {
        padding: 14px 14px 12px 14px;
        margin: 24px 0;
    }
    .single-blog-content .mibet-toc-list {
        margin-top: 10px !important;
    }
    .mibet-toc-list li a {
        font-size: 14px;
        padding: 9px 8px 9px 32px;
    }
    .mibet-toc-list li a::before {
        left: 11px;
        top: 9px;
    }
    .mibet-toc summary {
        font-size: 14.5px;
    }
    .mibet-toc summary::after {
        width: 30px;
        height: 30px;
    }

    .mibet-engineer-tip {
        padding: 18px 20px;
        margin: 24px 0;
    }
    .tip-content {
        font-size: 13.5px;
    }

    /* 【改 7】并列栅格在手机端降为单列，保持 1px 缝隙不改成外边距，
       这样整组仍然是一个视觉单元，而不是散开的若干张卡 */
    .mibet-geo-comparison,
    .mibet-compare-grid {
        grid-template-columns: 1fr;
        gap: 1px;
        margin: 24px 0;
    }
    .mibet-geo-card,
    .mibet-compare-card {
        padding: 18px 18px 20px;
    }
    .mibet-mechanism-grid,
    .mibet-mechanism-grid.cols-2 {
        grid-template-columns: 1fr;
        gap: 1px;
        margin: 24px 0;
    }

    /* 【改 12】.ds-3 由 2 列改为 1 列：3 项进 2 列会空出一格，
       栅格底色 #e6ebdf 会露成一块实心色块 */
    .single-blog-content .mibet-datastrip.ds-3 {
        grid-template-columns: 1fr;
    }
    .single-blog-content .mibet-datastrip .ds-value {
        font-size: 23px;
    }
    /* 【改 17】单列后每格独占一行，标签贴底对齐失去意义，
       且会在短标签下方留出空白，这里退回常规块级流 */
    .single-blog-content .mibet-datastrip:has(.ds-alt) .ds-item {
        display: block;
    }
    .single-blog-content .mibet-datastrip:has(.ds-alt) .ds-label {
        margin-top: 0;
    }

    /* 【新 10 / 新 12】载荷路径转为纵向链条，
       方向符号旋转 90° 指向下一段。
       .lp-5 的优先级高于基础规则，必须单独写一条覆盖。 */
    .single-blog-content .mibet-loadpath,
    .single-blog-content .mibet-loadpath.lp-5 {
        grid-template-columns: 1fr;
        margin: 20px 0 24px 0 !important;
    }
    .single-blog-content .mibet-loadpath li {
        padding: 13px 16px 23px !important;
        font-size: 13.5px;
    }
    .single-blog-content .mibet-loadpath li:not(:last-child) {
        padding-right: 16px !important;
    }
    .single-blog-content .mibet-loadpath li:last-child {
        padding-bottom: 13px !important;
    }
    .mibet-loadpath li:not(:last-child)::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: 8px;
        transform: translateX(-50%) rotate(135deg);
    }

    /* 【新 11】关系条转为纵向：三格与两个运算符自动堆成五行，
       运算符行压成一条窄带，仍然读作连接件。
       注意本条是 margin 简写，.rel-noted 的 margin-bottom
       优先级更高，底部归零在移动端同样生效。 */
    .mibet-relation {
        grid-template-columns: 1fr;
        margin: 24px 0;
    }
    .mibet-relation .rel-item {
        padding: 16px 18px 18px;
    }
    .mibet-relation .rel-term {
        font-size: 14.5px;
    }
    .mibet-relation .rel-note {
        font-size: 12.5px;
    }
    .mibet-relation .rel-op {
        min-width: 0;
        padding: 7px 0;
        font-size: 16px;
    }

    .mibet-criteria-box {
        padding: 20px;
    }
    .single-blog-content .criteria-list li {
        font-size: 14px;
    }
    .single-blog-content .mibet-ordered-list li {
        padding-left: 24px !important;
        font-size: 14px;
    }
    .mibet-ordered-list li::before {
        font-size: 15px;
    }
    .mibet-bullet-list li {
        font-size: 14px;
    }
    .mibet-cta-block {
        padding: 20px;
    }
    .mibet-faq-flat-section {
        margin-top: 32px;
        padding-top: 1px;
    }
    .single-blog-content .mibet-figure {
        margin: 24px 0;
    }
}

@media screen and (max-width: 600px) {
    /* 【改 10】滑动提示改为容器内的 sticky 底条：
       横向滚动时不跟着内容跑，且不再顶到容器边框上 */
    .mibet-table-container::after {
        content: "Swipe ↔ to view full table";
        display: block;
        position: sticky;
        left: 0;
        text-align: right;
        font-size: 11px;
        color: #a0aec0;
        padding: 6px 12px 7px;
        border-top: 1px solid #eef2ea;
        font-style: italic;
    }
    /* 【新 7】窄表不横滚，因此不显示滑动提示。
       :has() 不支持时仅多出一行提示文字，不影响布局。 */
    .mibet-table-container:has(.table-narrow)::after {
        content: none;
    }
    .mibet-custom-table thead th,
    .mibet-custom-table tbody th,
    .mibet-custom-table td,
    .mibet-custom-table td.col-rowhead {
        padding: 10px 12px;
        font-size: 13px;
    }
    /* 【新 6】分组行随表格一起收紧 */
    .mibet-custom-table tbody tr.row-group th[colspan] {
        padding: 8px 12px;
        font-size: 11px;
        letter-spacing: 0.6px;
    }
    /* 【新 8】判定标签随表格一起收紧，仍保持不换行 */
    .mibet-verdict {
        font-size: 11.5px;
        padding: 2px 7px;
    }
    .mibet-custom-table caption {
        font-size: 14px;
        padding: 12px 12px 10px 12px;
    }
    /* 【改 15】窄表在小屏上给行标题列一个稳定的最小宽度，
       避免被挤成竖排。:not([colspan]) 用来排除 tr.row-group
       的分组行——它跨满整表，套上 150px 下限没有意义，
       在窄视口还会把整表的最小宽度顶起来。 */
    .mibet-custom-table.table-narrow tbody th:not([colspan]) {
        min-width: 150px;
    }
    /* 双栏对比卡的标签在窄屏容易顶到两行，行高略放 */
    .mibet-geo-card .card-tag,
    .mibet-compare-card .card-tag {
        font-size: 12.5px;
        letter-spacing: 0.4px;
    }
}

@media screen and (max-width: 480px) {
    .mibet-datastrip .ds-item {
        padding: 14px 14px 13px;
    }
    .single-blog-content .mibet-datastrip .ds-value {
        font-size: 21px;
    }
    .single-blog-content .mibet-datastrip .ds-alt {
        font-size: 11.5px;
    }
    .single-blog-content .mibet-datastrip .ds-label {
        font-size: 12px;
    }
    .mibet-geo-card,
    .mibet-compare-card,
    .mibet-mechanism-card {
        padding: 16px 16px 18px;
    }
    .mibet-relation .rel-item {
        padding: 14px 16px 16px;
    }
    .mibet-relation .rel-term {
        font-size: 14px;
    }
    .single-blog-content .mibet-loadpath li {
        padding: 12px 14px 21px !important;
        font-size: 13px;
    }
    .single-blog-content .mibet-loadpath li:last-child {
        padding-bottom: 12px !important;
    }
    /* 【改 15】320–480px 下把窄表行标题下限降到 130px，
       给右列（说明列）留出可读宽度 */
    .mibet-custom-table.table-narrow tbody th:not([colspan]) {
        min-width: 130px;
    }
    .faq-flat-item {
        padding: 14px;
    }
    .faq-flat-q .faq-num {
        font-size: 16px;
    }
}


/* =========================================================
   【新 17】动效降级：系统开启"减少动态效果"时关闭装饰性过渡
   只影响 hover / 展开态的背景、边框、变换过渡，
   不改动任何布局取值，也不影响折叠展开本身的可用性。
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .toc .toc-item,
    .faq .is-open > .faq-q,
    .srcs-toggle,
    .srcs-arrow,
    .single-blog-content .srcs-list a,
    .mibet-toc summary::after,
    .mibet-toc-list li::before,
    .mibet-toc-list li a,
    .overlay-play,
    #modal-inquiry-success #inquiry-success-ok,
    .md-show ~ .md-overlay {
        transition: none !important;
    }
}