/* =========================================================
   MIBET BLOG — 全局文章样式表（2026-08 修订版 r2）
   说明：
   - 网站已有全局 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，数值列纵向对齐
   ========================================================= */


/* =========================================================
   [旧] 文章中的 Table of Contents（保留，供历史文章使用）
   ========================================================= */
.toc{
  max-width:400px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  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】正文标题避挡：锚点滚动预留头部高度
   原 5.5vw 在 2560px 宽屏上会达到 140px，在 1280px 上只有 70px，
   落点不一致；改用 clamp 锁定合理区间。
   ========================================================= */
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:0 1px 0 rgba(0,0,0,.02);
  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（文章内）最终版（保留）
   注：max-width 785px 为旧栏宽遗留值，正文区已扩到 840px，
   下次文章内嵌视频时同步调整。
   ========================================================= */
.video-box{
  width:100%;
  max-width:785px;
  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:0 1px 0 rgba(0,0,0,.02);
  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; }
.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-intro{ margin:0 0 10px; color:#374151; line-height:1.7; }
/* Article Sources 列表 */
.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; }
}


/* =========================================================
   弹窗样式（保留）
   ========================================================= */
#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 卡片 */
.mibet-hero-box {
    background-color: #fcfdfc;
    border: 1px solid #e1e8da;
    border-radius: 8px;
    padding: 24px 28px;
    margin: 32px 0;
    box-shadow: 0 4px 12px rgba(130, 188, 36, 0.03);
}
.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;
}
.mibet-divider {
    border: 0;
    border-top: 1px solid #e9edf0;
    margin: 20px 0 0px 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;
}

/* 单栏纵向排列：条目不再分栏，避免长短标题换行后左右两栏高度错位。
   每行 <a> 撑满整行宽度，hover 时整条变浅绿底，右侧留白因此被读成
   "这一行的可点区域"，而不是空白。行间发丝线负责收住左对齐的文字。 */
.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 / O&M Reality Check / Comparison Boundary — 标注家族
   共用同一底子，仅靠标签文字区分（不配不同颜色/图标） */
.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;
}

/* =========================================================
   【改 1 / 改 2】5. 响应式表格
   表头由实心黑改为浅绿底 + 2px 品牌绿底线，去掉页面里唯一的重色块；
   强调权全部交给焦点列 / 对比列 / 结论行。
   ========================================================= */
.mibet-table-container {
    width: 100%;
    overflow-x: auto;
    margin: 20px 0;
    -webkit-overflow-scrolling: touch;
}
.mibet-custom-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: 14px;
    text-align: left;
    color: #4a5568;
}
/* 【新 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;
}
/* 表格标题（caption） */
.mibet-custom-table caption {
    caption-side: top;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    color: #2c2d30;
    padding: 0 0 10px 0;
}

/* 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. 焦点列：把"结论/限制"那一列点亮 */
.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
   用途：10 行以上的输入/参数清单表，按性质分段，避免长表平铺。
   结构：<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;
}

/* 6. 双栏对比卡片 */
.mibet-geo-comparison {
    display: flex;
    gap: 16px;
    margin: 28px 0;
}
.mibet-geo-card {
    flex: 1;
    background: #fafbfa;
    border: 1px solid #e6ebdf;
    border-radius: 6px;
    padding: 20px;
    transition: border-color 0.2s ease;
}
.mibet-geo-card:hover {
    border-color: #cbd5e1;
}
.mibet-geo-card .card-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #2c2d30;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mibet-geo-card p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0 !important;
}
.mibet-geo-card p + p {
    margin-top: 10px !important;
}

/* =========================================================
   【新 1】7. 实测数据条 .mibet-datastrip
   用途：把一组一手实测/建模数值从叙述里提出来，供扫读与 AI 抽取。
   结构只用 div + span（不用 dl/dt/dd：多数 CMS 编辑器的元素白名单
   不含定义列表，粘贴后会被剥掉标签，只剩纯文本堆在一起）。
   必须搭配 .ds-note 写明测量条件与出处，缺条件的数据卡不要用。
   840px 栏宽下：4 列每格约 209px，3 列（.ds-3）每格约 280px。
   标签超过 6 个单词时优先用 .ds-3。
   ========================================================= */
.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;
}
/* 数值前缀（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;
}
.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;
}
.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-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);
}

/* 9. 机制 / 概览卡片网格（短内容 3 列，长内容自动降为 2 列） */
.mibet-mechanism-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 28px 0;
}
.mibet-mechanism-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}
.mibet-mechanism-card {
    background: #fafbfa;
    border: 1px solid #e6ebdf;
    border-radius: 6px;
    padding: 18px 18px 20px;
    transition: border-color 0.2s ease;
}
.mibet-mechanism-card:hover { border-color: #cbd5e1; }
.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. 工程步骤有序列表 */
.mibet-ordered-list {
    padding-left: 0;
    margin: 20px 0;
    counter-reset: mibet-counter;
}
.single-blog-content .mibet-ordered-list li {
    list-style-type: none !important;
    position: relative;
    padding-left: 32px !important;
    margin-bottom: 16px !important;
    font-size: 15px;
    line-height: 1.6;
    color: #4a5568;
}
.mibet-ordered-list li::before {
    counter-increment: mibet-counter;
    content: counter(mibet-counter) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: #82bc24;
    font-weight: 800;
    font-size: 16px;
}

/* 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 统一图注样式）
   【改 5】原 0 4px 15px rgba(0,0,0,.08) 是全页唯一的重阴影，
   与卡片体系的"发丝线 + 微差底色"语言不一致，改为 1px 边框。 */
.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>） */
.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);
    }
}

@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;
    }
    .mibet-geo-comparison {
        flex-direction: column;
        gap: 12px;
    }
    .mibet-mechanism-grid,
    .mibet-mechanism-grid.cols-2 {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .single-blog-content .mibet-datastrip.ds-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .single-blog-content .mibet-datastrip .ds-value {
        font-size: 23px;
    }
    .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) {
    .mibet-table-container::after {
        content: "Swipe ↔ to view full table";
        display: block;
        text-align: right;
        font-size: 11px;
        color: #a0aec0;
        margin-top: 6px;
        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;
    }
    .mibet-custom-table caption {
        font-size: 14px;
    }
    /* 窄表在小屏上给行标题列一个稳定的最小宽度，避免被挤成竖排 */
    .mibet-custom-table.table-narrow tbody th {
        min-width: 150px;
    }
}

@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-label {
        font-size: 12px;
    }
    .faq-flat-item {
        padding: 14px;
    }
    .faq-flat-q .faq-num {
        font-size: 16px;
    }
}