/* ====================================================================
   develoeper 移动端适配 (≤768px)
   --------------------------------------------------------------------
   2026-09-08: 5 个页面 (developer / establish / extend / Integrate /
   GDPR) 切到全站统一导航 (js/header_sub.js + js/mobile-nav.js).
   原自带头 header.html 的 4 个 tab (开发者/创建/扩展/集成) 已统一
   到顶部 PaaS 二级菜单, 此 css 不再处理自带头的挤压.

   移动端三层 sticky 改为单层 (二级 nav left_nav 仍是 sticky tabs):
     - 顶层  : 全局 #header (≈56px 高), 走 mobile-nav 汉堡
     - 二层  : 页面内 left_nav (对象/字段/页面布局…), top=56px

   SPA jQuery .load 切换逻辑保持不变 (file:// 模式由
   js/file-fallback.js 劫持, HTTP 模式原生走 .load).
   ==================================================================== */

/* ---------- 桌面端排版兜底 (≥769px) ---------- */
@media (min-width: 769px) {
  /* 2026-09-08: .LayoutBox 1100 居中 / 字体类 .fontH3/.fontH5/.fontdiv / .btns /
     reset *{margin:0;padding:0;font-family} 都在 ./css/develoeper-base.css.
     本文件不再重复定义, 仅保留 develoeper 专属的桌面端微调 (sub-tab 胶囊).

     注意: #header (全站头部) 的字体被 base.css 显式锁在 '微软雅黑',
     不受目录 reset 的 PingFang 影响. */

  /* 2026-09-08: 第三级 sub-tab 视觉强化 (原"下划线高亮"与左 nav 几乎重叠难识别).
     设计思路: 改成"胶囊按钮式", active = 蓝实色 + 白字 (强烈对比),
     非 active = 淡蓝胶囊 + 边框, hover = 稍深. 与左 nav 的"竖列下划线"形成
     视觉区分, 让用户清楚理解"左 nav 是第二级 / 顶部 sub-tab bar 是第三级". */
  .object_tab { gap: 8px; align-items: center; }
  .object_tab > div {
    background: rgba(33,138,228,0.06) !important;
    color: #218ae4 !important;
    border: 1px solid rgba(33,138,228,0.2) !important;
    border-radius: 16px !important;
    padding: 6px 16px !important;
    height: auto !important;
    line-height: 1 !important;
    font-size: 13px !important;
    margin-right: 4px;
    transition: all 0.15s;
    cursor: pointer;
  }
  .object_tab > div:hover {
    background: rgba(33,138,228,0.12) !important;
    border-color: #218ae4 !important;
  }
  .object_tab > div.object_active {
    background: #0564F5 !important;
    color: #fff !important;
    border-color: #0564F5 !important;
    font-weight: 600 !important;
  }
}

/* ---------- 移动端：≤768px ---------- */
@media (max-width: 768px) {

  /* ===== 通用屏蔽：第三方悬浮 / iframe ===== */
  iframe,
  .embed-icon,
  [class*="aifanfan"],
  [class*="aifollowup"],
  [class*="hubspot"],
  div[id*="kfgjj"],
  [class*="online-chat"] {
    display: none !important;
  }

  /* ===== LayoutBox 通用 100% ===== */
  .LayoutBox {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  /* ===== 内容容器：列向 ===== */
  .establish_template,
  .extend_template,
  .api_template {
    padding: 0 !important;
    background: #f7f7fa !important;
    height: auto !important;
    min-height: auto !important;
  }
  .establish_template .LayoutBox,
  .extend_template .LayoutBox,
  .api_template .LayoutBox {
    flex-direction: column !important;
    height: auto !important;
    /* 2026-09-08 v4: 删除 min-height: 100vh !important.
       原意是让内容过少时 LayoutBox 占满视口, 但实际副作用是:
       pageAllot 这类内容量小的 SPA 片段加载后, LayoutBox 被强制撑到 100vh,
       而 .right_content / .object { height: 100% } 继承 → page_content 被压到
       视口剩余高度 (~537px), 6 步操作被裁掉大半, 出现大面积空白.
       页面应该按内容自然展开, 不再强占视口. */
    min-height: 0 !important;
    padding: 0 !important;
  }

  /* ===== 二级 left_nav：sticky 横滑 tabs（顶部对齐 #header 56px） ===== */
  .left_nav {
    position: sticky !important;
    top: 56px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    background: #fff !important;
    border-bottom: 1px solid #e6e8eb !important;
    border-top: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 50 !important;
  }
  .left_nav .establish_title,
  .left_nav .extend_title,
  .left_nav .api_title {
    display: none !important;
  }
  .left_nav li {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 80px;
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    color: #666 !important;
    border: none !important;
    background: transparent !important;
    white-space: nowrap;
    cursor: pointer;
  }
  /* .nav_active 在 mobile 改为下划线激活态 */
  .left_nav .nav_active {
    border-left: none !important;
    background: transparent !important;
    color: #218ae4 !important;
    font-weight: 600;
    position: relative;
  }
  .left_nav .nav_active::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    background: #218ae4;
    border-radius: 1px;
  }

  /* ===== 内容区 mask_right / right_content 100% ===== */
  .mask_right {
    width: 100% !important;
    overflow: visible !important;
  }
  /* 2026-09-08 v4: 强制覆盖 desktop JS 锁高.
     establish.html / extend.html / Integrate.html 在加载时执行
       $(".xxx_template").css("height", $(window).height() - offset.top - 50 + "px")
     把容器高度锁成 viewport - top - 50 (mobile 750 视口 → 986px).
     内部 .object { height: 100% } 继承 → page_content 被压到 viewport 剩余高度,
     当 SPA 加载内容量小 (如 pageAllot 6 步 + 1 图) 时, .right_content 实际渲染高度
     只有 537px, 6 步操作被裁到只显示前 4 步, pill 行下面出现 ~500px 大空白.
     Mobile 模式应该让页面自然展开 (整页滚动), 不应被 viewport 高度限制. */
  .establish_template,
  .extend_template,
  .api_template {
    height: auto !important;
    min-height: 0 !important;
  }
  .right_content {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    /* 2026-09-08 v3: 删 overflow-x:hidden. 它会创建 scroll container,
       把内层 sticky (object_tab/extend_tab/api_tab) 的参照系从 viewport
       切到 .right_content, 导致 sub-tab 渲染在 容器顶部 100px 处
       (sticky top:100 相对容器 top, 而非 viewport top) →
       用户看到 sub-tab 出现在内容中间. 横向溢出由下面 .right_content table
       display:block+overflow-x:auto 接管. */
    overflow: visible !important;
    padding: 0 !important;
  }

  /* ===== 第三层 sub-tab (object_tab / extend_tab / api_tab) ===== */
  /* 2026-09-08 v2: 之前整体 display:none, 用户反馈"卡片三级菜单都没显示"
     没法在 子卡片(查看标准对象/创建自定义对象 等) 间切换. 现在改为:
       - 显示胶囊
       - 重置 PC 端 position:absolute / width:805px 局限
       - sticky 放在 left_nav 下方 (top = 56 + 44 = 100px)
       - 横向滚动 (如 extend 有 6 个)
       - active 蓝实色 + 白字 (与桌面端胶囊一致) */
  .object_tab,
  .extend_tab,
  .api_tab {
    position: sticky !important;
    top: 100px !important;
    z-index: 40 !important;
    width: 100% !important;
    height: 44px !important;
    line-height: 44px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border-bottom: 1px solid #e6e8eb !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px !important;
    margin: 0 !important;
    gap: 8px;
  }
  /* 隐藏滚动条但保留滚动能力 */
  .object_tab::-webkit-scrollbar,
  .extend_tab::-webkit-scrollbar,
  .api_tab::-webkit-scrollbar { display: none; }

  .object_tab > div,
  .extend_tab > div,
  .api_tab > div {
    flex: 0 0 auto !important;
    height: 32px !important;
    line-height: 30px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    color: #666 !important;
    background: #f5f7fa !important;
    border: 1px solid #e6e8eb !important;
    border-radius: 16px !important;
    margin-top: 6px !important;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
  }
  .object_tab > div:active,
  .object_tab > div:hover,
  .extend_tab > div:active,
  .extend_tab > div:hover,
  .api_tab > div:active,
  .api_tab > div:hover {
    background: #e8f0ff !important;
  }
  /* active: object_item.object_active / trigger_item.extend_active / api_active */
  /* 2026-09-08 v3: 移除 .object_tab > div.object_standard 永远蓝实色的强选.
     原 bug: i=0「调整页面布局」带 .object_standard 类, mobile css 把它永久标蓝实色,
     用户切到 pageLine 后 i=2 也 .object_active 蓝, 视觉变"调整蓝+行式蓝"双 active,
     进一步造成 sub-tab 行下方 200px 的"占位错觉" (用户以为切到行式但调整仍 active).
     现在激活态完全交给 .object_active 单类控制, .object_standard 仅作初始 "刚加载" 标记,
     不再强行显示激活态. */
  .object_tab > div.object_active,
  .extend_tab > div.extend_active,
  .api_tab > div.api_active {
    background: #0564F5 !important;
    color: #fff !important;
    border-color: #0564F5 !important;
    font-weight: 600 !important;
  }
  /* 在 SPA fragment 加载前, 默认首个 pill 通常带 object_standard + object_active 类
     (见 develoeper/establish/pagelayout/pageLayout.html), 此时仍需要首项高亮. */
  .object_tab > div:not([class*="active"]):not([class*="standard"]) {
    background: #f5f7fa !important;
    color: #666 !important;
  }

  /* 内容 padding 收 */
  .object_content,
  .field_content,
  .page_content,
  .email_content,
  .approval_content,
  .validation_content,
  .work_content,
  .developer_content {
    padding: 16px !important;
  }

  /* ===== developer.html 落地页 ===== */
  .fontH3 {
    font-size: 22px !important;
  }
  .fontH5 {
    font-size: 17px !important;
  }
  .fontdiv {
    font-size: 13px !important;
    line-height: 24px !important;
  }

  /* developer 视频容器缩小 */
  .developer_video {
    width: 100% !important;
    height: auto !important;
  }
  video {
    width: 100% !important;
    height: auto !important;
  }

  /* 表格横向滚动 */
  .right_content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* footer 占位隐藏 */
  .footerBox:empty { display: none !important; }

  /* developer 落地页中"加入我们"、卡片类容器，回收 */
  .developer_box,
  .develop_content,
  .developer_card {
    padding: 12px !important;
    box-sizing: border-box;
  }

  /* ===== developer.html banner & PaaS 模块 ===== */
  .bannerBox {
    height: 320px !important;
    background-size: cover !important;
  }
  .bannerContent {
    padding-top: 50px !important;
  }
  .bannerContent p {
    line-height: 36px !important;
    font-size: 18px !important;
    padding: 0 12px !important;
  }
  .videoBth {
    width: 56px !important;
    height: 56px !important;
    margin: 20px auto !important;
  }
  .videoBox {
    width: 92vw !important;
    height: 56vw !important;
    max-height: 350px !important;
  }

  /* PaaS 介绍 / 为开发者提供 / 为企业提供 */
  .PaaSInfo,
  .PaaSDeveloper,
  .PaaSBusiness,
  .PaaSFramework,
  .PaaSSoftware,
  .PaaSAmbient {
    padding: 24px 0 !important;
  }
  .PaaSInfo .fontH3,
  .PaaSDeveloper .fontH3,
  .PaaSBusiness .fontH3 {
    padding: 0 12px 16px !important;
  }
  /* 2026-09-08: body 文字 (.fontdiv / .fontH5) 单独补左右 12px padding,
     否则 .PaaSInfo 等容器 padding 24px 0 只能控上下, 左右会贴屏幕边 */
  .PaaSInfo .fontdiv,
  .PaaSDeveloper .fontdiv,
  .PaaSBusiness .fontdiv,
  .PaaSBusiness .font24 {
    padding: 0 12px !important;
  }
  .PaaSBusiness .font24 {
    font-size: 14px !important;
    padding: 0 12px 16px !important;
  }

  /* developerShow：3 卡片改竖排 */
  .developerInfoBox {
    flex-direction: column !important;
    margin-bottom: 24px !important;
    padding: 0 12px !important;
  }
  .developerInfo {
    width: 100% !important;
  }
  .developerImg {
    width: 100% !important;
    height: 220px !important;
    margin-top: 12px;
  }
  /* 图像版序换行（首尾左图 / 中间右图改上下） */
  .developerInfoBox:nth-of-type(2) .developerImg {
    order: -1;
  }

  /* 企业提供：4 卡片改 2 列 */
  .PaaSBusinessList {
    flex-wrap: wrap !important;
    padding: 0 12px !important;
  }
  .PaaSBusinessList li {
    width: calc(50% - 8px) !important;
    height: auto !important;
    margin-bottom: 12px;
    padding: 16px !important;
  }

  /* PaaSFramework / PaaSSoftware / PaaSAmbient 同 developerShow 改竖排 */
  .PaaSFrameworkBox,
  .PaaSSoftwareBox,
  .PaaSAmbientBox {
    flex-direction: column !important;
    padding: 0 12px !important;
  }
  .PaaSFrameworkBox .leftInfo,
  .PaaSSoftwareBox .rightInfo,
  .PaaSAmbientBox .rightInfo {
    width: 100% !important;
    padding-right: 0 !important;
  }
  .PaaSFrameworkBox .rightImg {
    width: 100% !important;
    height: 240px !important;
    margin-top: 12px;
  }
  .PaaSSoftwareBox .leftIcon,
  .PaaSAmbientBox .leftIcon {
    width: 80px !important;
    height: 80px !important;
    margin-right: 0 !important;
    margin-bottom: 12px;
  }

  /* ===== GDPR.html 适配 ===== */
  .cc {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
  .GDPR {
    padding: 24px 0 !important;
  }
  .p2 {
    font-size: 20px !important;
    padding-bottom: 16px !important;
  }
  .banner {
    height: 280px !important;
  }
  .banner > div[style*="width:1100px"] {
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
    position: relative !important;
  }
  .banner > div > div[style*="position: absolute"] {
    width: 100% !important;
    height: auto !important;
    position: static !important;
    padding: 32px 16px 0 !important;
  }
  .test {
    font-size: 24px !important;
    line-height: 32px !important;
  }
  .test2 {
    font-size: 14px !important;
    line-height: 22px !important;
    margin-top: 12px !important;
  }
  .p33,
  .ziliao {
    font-size: 14px !important;
    line-height: 24px !important;
  }

  /* GDPR 内联 1100/610 容器覆盖 */
  .banner > div[style*="width:1100px"],
  div[style*="width: 1100px"],
  .cc,
  .GDPR {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    position: relative !important;
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .banner > div > div[style*="width:610px"],
  div[style*="width: 610px"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    position: static !important;
    padding: 24px 0 !important;
    box-sizing: border-box !important;
  }

  /* ---------- 固定宽度背景图 (span.fieldImgN / span.extendImgN) ----------
     2026-09-08: 这些"图片"是 CSS background 的 span, 宽高在 template.css /
     extend_template.css 里写死 500~745px, 375 视口必然横向溢出.
     移动端改为 100% 宽 + aspect-ratio 保持原始宽高比 (不拉伸变形).
     ⚠️ 规则由 gen_img_css.py 自动生成, 改源 CSS 后重跑该脚本. */
  .fieldImg,
  .fieldImg_left {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* ===== 自动生成: 固定宽度背景图 → 移动端 100% 宽 + aspect-ratio 保比例 ===== */
  /* 生成脚本: develoeper/gen_img_css.py  |  共 72 条 */
  [class*='fieldImg'],
  [class*='extendImg'] {
    max-width: 100% !important;
    background-size: contain !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
  }
  .fieldImg1 { width: 100% !important; height: auto !important; aspect-ratio: 300 / 80 !important; }
  .fieldImg2 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 196 !important; }
  .fieldImg3 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 390 !important; }
  .fieldImg4 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 324 !important; }
  .fieldImg5 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 306 !important; }
  .fieldImg6 { width: 100% !important; height: auto !important; aspect-ratio: 500 / 205 !important; }
  .fieldImg7 { width: 100% !important; height: auto !important; aspect-ratio: 500 / 200 !important; }
  .fieldImg8 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 222 !important; }
  .fieldImg9 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 244 !important; }
  .fieldImg10 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 256 !important; }
  .fieldImg11 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 184 !important; }
  .fieldImg12 { width: 100% !important; height: auto !important; aspect-ratio: 500 / 195 !important; }
  .fieldImg13 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 180 !important; }
  .fieldImg14 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 354 !important; }
  .fieldImg15 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 160 !important; }
  .fieldImg16 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 238 !important; }
  .fieldImg17 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 160 !important; }
  .fieldImg18 { width: 100% !important; height: auto !important; aspect-ratio: 500 / 160 !important; }
  .fieldImg19 { width: 100% !important; height: auto !important; aspect-ratio: 500 / 244 !important; }
  .fieldImg20 { width: 100% !important; height: auto !important; aspect-ratio: 500 / 240 !important; }
  .fieldImg21 { width: 100% !important; height: auto !important; aspect-ratio: 500 / 260 !important; }
  .fieldImg22 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 376 !important; }
  .fieldImg23 { width: 100% !important; height: auto !important; aspect-ratio: 500 / 326 !important; }
  .fieldImg24 { width: 100% !important; height: auto !important; aspect-ratio: 500 / 310 !important; }
  .fieldImg25 { width: 100% !important; height: auto !important; aspect-ratio: 500 / 300 !important; }
  .fieldImg26 { width: 100% !important; height: auto !important; aspect-ratio: 500 / 160 !important; }
  .fieldImg27 { width: 100% !important; height: auto !important; aspect-ratio: 500 / 260 !important; }
  .fieldImg28 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 554 !important; }
  .fieldImg29 { width: 100% !important; height: auto !important; aspect-ratio: 500 / 286 !important; }
  .fieldImg31 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 270 !important; }
  .fieldImg32 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 380 !important; }
  .fieldImg33 { width: 100% !important; height: auto !important; aspect-ratio: 550 / 326 !important; }
  .fieldImg34 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 208 !important; }
  .fieldImg35 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 316 !important; }
  .fieldImg36 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 264 !important; }
  .fieldImg37 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 278 !important; }
  .fieldImg38 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 190 !important; }
  .fieldImg39 { width: 100% !important; height: auto !important; aspect-ratio: 500 / 279 !important; }
  .fieldImg40 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 500 !important; }
  .fieldImg41 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 480 !important; }
  .fieldImg42 { width: 100% !important; height: auto !important; aspect-ratio: 500 / 262 !important; }
  .fieldImg43 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 376 !important; }
  .fieldImg44 { width: 100% !important; height: auto !important; aspect-ratio: 500 / 138 !important; }
  .fieldImg45 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 1034 !important; }
  .fieldImg46 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 146 !important; }
  .fieldImg47 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 300 !important; }
  .fieldImg48 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 240 !important; }
  .fieldImg49 { width: 100% !important; height: auto !important; aspect-ratio: 500 / 240 !important; }
  .fieldImg50 { width: 100% !important; height: auto !important; aspect-ratio: 500 / 200 !important; }
  .fieldImg51 { width: 100% !important; height: auto !important; aspect-ratio: 500 / 568 !important; }
  .extendImg1 { width: 100% !important; height: auto !important; aspect-ratio: 746 / 548 !important; }
  .extendImg2 { width: 100% !important; height: auto !important; aspect-ratio: 746 / 476 !important; }
  .extendImg3 { width: 100% !important; height: auto !important; aspect-ratio: 746 / 584 !important; }
  .extendImg4 { width: 100% !important; height: auto !important; aspect-ratio: 746 / 1004 !important; }
  .extendImg5 { width: 100% !important; height: auto !important; aspect-ratio: 746 / 380 !important; }
  .extendImg6 { width: 100% !important; height: auto !important; aspect-ratio: 746 / 380 !important; }
  .extendImg7 { width: 100% !important; height: auto !important; aspect-ratio: 746 / 280 !important; }
  .extendImg8 { width: 100% !important; height: auto !important; aspect-ratio: 746 / 256 !important; }
  .extendImg9 { width: 100% !important; height: auto !important; aspect-ratio: 746 / 294 !important; }
  .extendImg10 { width: 100% !important; height: auto !important; aspect-ratio: 746 / 294 !important; }
  .extendImg11 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 422 !important; }
  .extendImg12 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 315 !important; }
  .extendImg13 { width: 100% !important; height: auto !important; aspect-ratio: 745 / 2996 !important; }
  .extendImg14 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 415 !important; }
  .extendImg15 { width: 100% !important; height: auto !important; aspect-ratio: 745 / 1004 !important; }
  .extendImg16 { width: 100% !important; height: auto !important; aspect-ratio: 500 / 604 !important; }
  .extendImg17 { width: 100% !important; height: auto !important; aspect-ratio: 745 / 1510 !important; }
  .extendImg18 { width: 100% !important; height: auto !important; aspect-ratio: 250 / 240 !important; }
  .extendImg19 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 100 !important; }
  .extendImg20 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 450 !important; }
  .extendImg21 { width: 100% !important; height: auto !important; aspect-ratio: 700 / 100 !important; }
  .extendImg22 { width: 100% !important; height: auto !important; aspect-ratio: 745 / 2828 !important; }

  /* ---------- 内容容器局部横滚 (Integrate API 文档表格) ----------
     2026-09-08: .customClass_content 内容宽 363px > 容器 343px, 顶出 docScrollW=379 (4px 横滚).
     给内容容器 overflow-x:auto, 让表格在内部横滚.
     ⚠️ 绝不能加在 .right_content 或 .object 上 —— 它们是 .object_tab / .api_tab(sticky)
        的祖先, 加 overflow 会创建 scroll container 破坏 sticky.
        (2026-09-08 12:45 + 13:20 两次踩坑: 曾因 .right_content{overflow-x:hidden}
         和 .right_content>div{overflow-x:auto} 把 sticky 打回原形) */
  .right_content > div:not(.api_tab):not(.object),
  .right_content .page_content,
  .right_content .customClass_content,
  .right_content .developer_content,
  .right_content .api_file {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
  }
  .right_content table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
  }
}