/* =====================================================================
 * 博客前台（列表页 + 详情页）V1.3
 * 前缀 bmbl- 防冲突；依赖 bm_common.css（颜色/字体基础）
 * 响应式断点：≤1024 侧栏下沉；≤768 移动单列
 * ===================================================================== */

/* ---------- 公共 ---------- */
/* 内容域宽度/内边距按全站 .bm_container 规格（1512px；≤1540/1366 为 1212px；≤1024 为 1024px；padding 0 6px），本类不再覆盖 */
.bmbl-hide{display:none !important}
.bmbl-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;cursor:pointer;font-size:14px;border-radius:4px;transition:all .2s}
.bmbl-btn-primary{background:#1E9FFF;color:#fff;padding:9px 22px}
.bmbl-btn-primary:hover{background:#1a8fe8}
.bmbl-btn-ghost{background:#fff;color:#1E9FFF;border:1px solid #1E9FFF;padding:8px 20px}
.bmbl-btn-ghost:hover{background:#f0f9ff}

/* ---------- 首屏 loading 遮罩（blog.html/blog_data.html body 起始挂载；页面 JS 完成 bm-m 移动端判定后移除——防移动端首帧闪现 PC 样式；gif 复用主站） ---------- */
.bmbl-loading{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:9999}
.bmbl-loading img{position:absolute;top:50%;left:50%;width:100px;height:100px;margin:-50px 0 0 -50px}

/* ---------- 作者头像公共组件（templates/commons/avatar.html） ---------- */
/* 有图 img+CDN 压缩；无图名字色块：背景色=名字长度取模色板（组件内定义），
   字号按名字长度分档（规则硬按 design_work_search_detail.html L311-325：1-4/5/6 字）；
   小尺寸受浏览器 12px 中文最小字号钳制，超宽文本由 overflow:hidden 收口不破布局 */
.bl-av{border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:#fff;overflow:hidden;line-height:1}
.bl-av-lg{width:38px;height:38px;font-size:15px}
.bl-av-sm{width:22px;height:22px;font-size:12px}
.bl-av-lg.bl-len4{font-size:13px;text-align:center}
.bl-av-lg.bl-len5,.bl-av-lg.bl-len6{font-size:10px;text-align:center}
.bl-av-sm.bl-len4{font-size:10px;text-align:center}
.bl-av-sm.bl-len5,.bl-av-sm.bl-len6{font-size:8px;text-align:center}

/* ---------- 面包屑 ---------- */
.bmbl-bc{font-size:14px;color:#999}
.bmbl-bc a{color:#666;margin:0 4px}
.bmbl-bc a:hover{color:#1E9FFF}
.bmbl-bc .sep{color:#ccc;margin:0 2px}
.bmbl-bc .cur{color:#333;margin-left:4px;max-width:420px;display:inline-block;vertical-align:bottom;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===================== 列表页 ===================== */

/* Banner：高 316px，左价值主张 + 右转化卡 384×236 */
.bmbl-banner{margin:10px 0 20px;border-radius:10px;overflow:hidden;background:linear-gradient(120deg,#E8F3FD 0%,#EDF1FE 50%,#EAF7FE 100%);border:1px solid #D6E8FA;box-shadow:0 2px 14px rgba(15,60,120,.06);color:#1d3b5c;position:relative}
.bmbl-banner-in{display:flex;align-items:center;justify-content:space-between;height:316px;padding:0 48px;box-sizing:border-box}
.bmbl-bm{max-width:640px}
.bmbl-bm h2{font-size:36px;font-weight:700;margin:0 0 10px;line-height:1.3}
.bmbl-bm p{font-size:16px;color:rgba(29,59,92,.72);line-height:1.7;margin:15px 0 35px}
.bmbl-pts{display:flex;gap:26px}
.bmbl-pt{display:flex;align-items:center;gap:10px}
.bmbl-pt .ic{width:46px;height:46px;border-radius:8px;background:rgba(30,159,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bmbl-pt .ic svg{width:18px;height:18px;stroke:#1E9FFF}
.bmbl-pt b{display:block;font-size:16px}
.bmbl-pt em{display:block;font-style:normal;font-size:14px;color:rgba(29,59,92,.6);margin-top:2px}
.bmbl-bcta{width:384px;height:236px;background:#fff;border-radius:10px;color:#333;padding:28px 30px;box-sizing:border-box;display:flex;flex-direction:column;box-shadow:0 6px 20px rgba(15,60,120,.12);flex-shrink:0}
.bmbl-bcta-badge{align-self:flex-start;font-size:12px;color:#e65c00;background:#fff3e8;border-radius:3px;padding:2px 8px;margin-bottom:12px}
.bmbl-bcta h3{font-size:20px;margin:0 0 8px;color:#103a5c}
.bmbl-bcta p{font-size:14px;color:#888;line-height:1.6;margin:0 0 auto}
.bmbl-bcta .bmbl-btn{width:100%;padding:12px 0;font-size:15px;margin-top:16px}

/* 主区：左列表面板 + 右侧栏 */
.bmbl-main{display:flex;gap:24px;align-items:flex-start;padding-bottom:40px}
.bmbl-panel{flex:1;min-width:0;background:#fff;border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.05);overflow:hidden}

/* 筛选栏：类型 Tab + 话题 chips（静态折行） */
.bmbl-filter{padding:16px 20px 14px;border-bottom:1px solid #f0f0f0}
.bmbl-typebar{display:flex;gap:4px;align-items:center;background:#f5f7fa;border-radius:22px;padding:4px;width:fit-content}
.bmbl-tb{border:none;background:transparent;color:#555;font-size:14px;padding:7px 18px;border-radius:18px;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.bmbl-tb:hover{color:#1E9FFF}
.bmbl-tb.on{background:#fff;color:#007DEE;font-weight:600;box-shadow:0 2px 8px rgba(0,125,238,.12)}
.bmbl-tb .n{font-size:12px;line-height:1;background:#e8f4ff;color:#1E9FFF;border-radius:10px;padding:3px 7px;font-weight:400}
.bmbl-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.bmbl-chip{border:1px solid #e3e8ee;background:#fff;color:#555;font-size:14px;padding:5px 16px;border-radius:16px;cursor:pointer;transition:all .2s}
.bmbl-chip:hover{color:#1E9FFF;border-color:#1E9FFF}
.bmbl-chip.on{background:#007DEE;border-color:#007DEE;color:#fff}

/* 卡片流：横向一行一条（左封面 16:9） */
.bmbl-cards{min-height:200px}
.bmbl-card{display:flex;padding:20px;border-bottom:1px solid #f0f0f0;text-decoration:none;color:inherit;transition:background .2s;cursor:pointer}
.bmbl-card:hover{background:#fafcff}
.bmbl-card:last-child{border-bottom:none}
.bmbl-cover{position:relative;width:300px;flex-shrink:0}
.bmbl-cover .cbox{position:relative;width:100%;padding-top:56.25%;border-radius:8px;overflow:hidden;background:#f2f4f7}
.bmbl-cover img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.bmbl-card:hover .bmbl-cover img{transform:scale(1.04)}
.bmbl-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:2}
.bmbl-play svg{width:16px;height:18px;fill:#fff;margin-left:2px}
.bmbl-cb{flex:1;min-width:0;margin-left:20px;display:flex;flex-direction:column}
.bmbl-card-tags{align-self:flex-start;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px} /* 多标签容器：flex 列布局下标签平铺会竖排，容器横排可换行（2026-09-28 多标签需求） */
.bmbl-card-tag{font-size:12px;color:#007DEE;background:#e8f4ff;border-radius:5px;padding:4px 11px;font-weight:500}
.bmbl-card-title{font-size:18px;font-weight:600;color:#222;line-height:1.45;margin:0 0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bmbl-card:hover .bmbl-card-title{color:#1E9FFF}
.bmbl-card-sum{font-size:14px;color:#888;line-height:1.65;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bmbl-card-meta{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:#999}
.bmbl-card-meta .nm{color:#555}
.bmbl-card-meta .cmt{flex-shrink:0;white-space:nowrap} /* 署名过长时评论数不参与收缩并强制单行——否则移动端长署名挤压 .cmt 宽度，「N 条评论」逐字换行成竖排（SSR 与 JS 渲染同 class 生效） */
.bmbl-card-meta .cmt::before{content:"·";margin:0 6px 0 2px;color:#ccc}

/* 触底加载/空态 */
.bmbl-loader{display:flex;align-items:center;justify-content:center;gap:10px;padding:22px 0;color:#999;font-size:14px}
.bmbl-loader.end .spin{display:none}
.bmbl-loader .spin{width:16px;height:16px;border:2px solid #e3e8ee;border-top-color:#1E9FFF;border-radius:50%;animation:bmblSpin .8s linear infinite}
@keyframes bmblSpin{to{transform:rotate(360deg)}}
.bmbl-empty{text-align:center;padding:60px 0 50px}
.bmbl-empty .t{font-size:16px;color:#666;margin:16px 0 20px}

/* 侧栏（列表页与详情页共用 352px） */
.bmbl-aside{width:352px;flex-shrink:0;display:flex;flex-direction:column;gap:20px}
/* 列表页侧栏 sticky 吸顶跟随滚动（2026-09-21 需求调整：去掉发布引导卡后仅留资卡）；
   .bmbl-main 已 align-items:flex-start 不拉伸子项；祖先链无 overflow 滚动容器；公共头非 fixed，top 取小间距。
   仅列表页作用域（.bmbl-main），详情页侧栏不吸附 */
.bmbl-main .bmbl-aside{position:sticky;top:16px}
.bmbl-dmd{background:linear-gradient(135deg,#103a5c,#175a8f);border-radius:10px;color:#fff;padding:22px}
.bmbl-dmd b{display:block;font-size:16px;line-height:1.5;margin-bottom:8px}
.bmbl-dmd p{font-size:14px;color:rgba(255,255,255,.7);line-height:1.6;margin:0 0 16px}
.bmbl-dmd .bmbl-btn{width:100%;padding:11px 0}

/* 留资卡 */
.bmbl-lf{background:#fff;border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.05);padding:20px}
.bmbl-lf-t{font-size:17px;font-weight:700;color:#222;margin:0 0 8px}
.bmbl-lf-desc{font-size:12px;color:#999;line-height:1.6;margin:0 0 14px}
.bmbl-lf-lab{display:block;font-size:14px;color:#555;margin:12px 0 6px}
.bmbl-lf-lab i{color:#e6162d;font-style:normal}
.bmbl-lf-field input,.bmbl-lf-field select,.bmbl-lf-field textarea{width:100%;box-sizing:border-box;border:1px solid #e3e8ee;border-radius:4px;padding:9px 12px;font-size:14px;outline:none;transition:border .2s;background:#fff;color:#333}
.bmbl-lf-field textarea{resize:vertical}
.bmbl-lf-field input:focus,.bmbl-lf-field select:focus,.bmbl-lf-field textarea:focus{border-color:#1E9FFF}
/* 字段级校验错误（jquery.validate errorClass='error bm_error'，口径=发布表单/注册页）：控件 error 红框 + label.bm_error 红字。
   红字由 blog-lead.js errorPlacement append 进字段块内部末尾（块级布局下独占一行=框正下方，与旧版插块外视觉一致） */
.bmbl-lf-field input.error{border-color:#e6162d}
/* width:100%：红字在字段块内独占整行（flex 行经 flex-wrap:wrap 换行到输入框下方） */
.bmbl-lf label.bm_error,.bmbl-cta label.bm_error{color:red;border:none !important;margin-top:5px;display:block;width:100%;font-size:12px;line-height:initial}
/* layui form.render 渲染后 select 变为伪装输入框（.layui-input），样式对齐原生输入框；focus 态=面板展开 */
.bmbl-lf-field .layui-form-select .layui-input{border:1px solid #e3e8ee;border-radius:4px;padding:9px 12px;font-size:14px;height:auto;line-height:1.5;color:#333}
.bmbl-lf-field .layui-form-select .layui-input:focus{border-color:#1E9FFF}
.bmbl-lf-field .layui-form-selected .layui-input{border-color:#1E9FFF}
/* 区号+号码同行（共用组件 blog-lead-form；区号为 layui lay-search select，动态数据 new_number.json） */
.bmbl-lf-phonerow{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}   /* flex-start：BUG 27942 区号红字入 .lf-cc-wrap 撑高时防 phone 控件被 stretch 拉高 */
.bmbl-lf-phonerow .lf-cc-wrap{width:110px;flex:none;position:relative}
.bmbl-lf-phonerow .lf-cc-wrap.error .layui-form-select .layui-input{border-color:#e6162d !important}
/* 区号框与手机号框固定等高 38px（layui 标准高）：上方两规则靠 padding 拼高——input UA 行高(normal)与 div 显式行高(1.5)口径差约 4px 致两框不等高（CTA 皮肤同款问题同款修法）；区号框 line-height:36px=内容区高使 div 单行文字严格垂直居中 */
.bmbl-lf-phonerow .lf-cc-wrap .layui-input{height:38px;line-height:36px;padding:0 12px;box-sizing:border-box}
.bmbl-lf-phonerow .lf-phone-wrap{flex:1;min-width:0}   /* 手机号包 div（与 .lf-cc-wrap 对称，2026-09-24）：flex 弹性从 input 上移到包裹层 */
.bmbl-lf-phonerow .lf-phone{width:100%;height:38px;padding:0 12px;box-sizing:border-box}   /* 包 div 后铺满包裹层：width:100%+border-box（原 flex 子项时宽由 flex 分配，无 width） */
.bmbl-lf-coderow{display:flex;flex-wrap:wrap;gap:10px}
.bmbl-lf-coderow input{flex:1}
.bmbl-codebtn{flex-shrink:0;border:none;background:#1E9FFF;color:#fff;font-size:14px;border-radius:4px;padding:0 14px;cursor:pointer}
.bmbl-codebtn.disabled{background:#a8d8ff;cursor:not-allowed}
/* 协议勾选行（需求1.5：未勾选拦截提交；layui primary 复选框：勾选框=渲染层 i、前缀文案=渲染层 span，
   链接段=外置 .bmbl-lf-agree-txt（点击链接不触发勾选切换）；文字口径=12px/#888，勾选蓝沿用 layui 主色） */
.bmbl-lf-agree{margin-top:14px;font-size:12px;color:#888;line-height:1.6}
.bmbl-lf-agree .layui-form-checkbox{vertical-align:top;padding-left:24px}
.bmbl-lf-agree .layui-form-checkbox span{font-size:12px;color:#888;padding-right:0;line-height:inherit}
.bmbl-lf-agree .layui-form-checkbox i{top:2px}
.bmbl-lf-agree .layui-form-checkbox.error i{border-color:#e6162d !important}
.bmbl-lf-agree a{color:#1E9FFF;text-decoration:none}
.bmbl-lf-agree a:hover{text-decoration:underline}
.bmbl-lf-submit{width:100%;margin-top:18px;background:linear-gradient(90deg,#1E9FFF,#43b0ff);color:#fff;border:none;border-radius:4px;padding:12px 0;font-size:15px;cursor:pointer}
.bmbl-lf-submit:hover{opacity:.92}
.bmbl-lf-foot{display:flex;justify-content:space-between;font-size:12px;color:#aaa;margin-top:12px}
.bmbl-lf .bmbl-lf-foot span:first-child{color:#2fa45c}   /* 侧栏卡「信息严格加密保护」绿色标识（2026-09-28）；底部 CTA（.bmbl-cta）不变色 */

/* ===================== 详情页 ===================== */

.bmbl-det{display:flex;gap:24px;align-items:flex-start;margin-top:12px;padding-bottom:40px}
.bmbl-article{flex:1;min-width:0;background:#fff;border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.05);padding:32px 36px 28px;box-sizing:border-box}
.bmbl-mode-tag{display:inline-block;font-size:12px;color:#fff;border-radius:3px;padding:3px 10px;margin-bottom:14px;background:#1E9FFF}
.bmbl-mode-tag.vd{background:#e65c00}
.bmbl-article h1{font-size:26px;line-height:1.45;color:#1a1a1a;margin:0 0 16px;font-weight:700}

/* 作者行 + 互动 */
.bmbl-by{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-bottom:18px;border-bottom:1px solid #f0f0f0;margin-bottom:24px;font-size:14px;color:#999}
.bmbl-by .nm{font-size:14px;color:#333;font-weight:600}
.bmbl-by-acts{margin-left:auto;display:flex;gap:8px}
.bmbl-mini{display:inline-flex;align-items:center;gap:5px;border:1px solid #e3e8ee;background:#fff;color:#666;font-size:14px;border-radius:20px;padding:6px 14px;cursor:pointer;transition:all .2s}
.bmbl-mini svg{width:15px;height:15px;fill:#999}
.bmbl-mini:hover{border-color:#1E9FFF;color:#1E9FFF}
.bmbl-mini.on{background:#e8f4ff;border-color:#1E9FFF;color:#1E9FFF}
.bmbl-mini.on svg{fill:#1E9FFF}
.bmbl-mini.primary{background:#1E9FFF;border-color:#1E9FFF;color:#fff}
.bmbl-mini.primary svg{fill:#fff}
.bmbl-mini.primary:hover{background:#1a8fe8;color:#fff}
/* 互动按钮弱化口径（PC 作者行 .bmbl-by-acts + 移动端吸底条 .bmbl-mbar 共用，对齐原型 .det-by .mini-act/.share-inline）：
   点赞/收藏=无边框文本式灰字、on 态主蓝 #1E9FFF、图标实心 fill 跟随文字；分享=唯一主按钮 #007DEE（用户口径替代原型的红/金） */
.bmbl-by-acts .bmbl-mini,.bmbl-mbar .bmbl-mini{border:none;background:none;padding:5px 9px;font-weight:600;color:#888;line-height:1}
/* 图标用实心 fill 渲染（stroke 描边沿路径外扩越界会被 svg 裁切致心形缺角，且部分浏览器
   不支持根 svg overflow:visible；fill 模式 path 本体在 viewBox 内完整显示），颜色跟随文字 */
.bmbl-by-acts .bmbl-mini svg,.bmbl-mbar .bmbl-mini svg{fill:currentColor;stroke:none}
.bmbl-by-acts .bmbl-mini:hover{border:none;background:none;color:#555}
.bmbl-by-acts .bmbl-mini.on,.bmbl-mbar .bmbl-mini.on{border:none;background:none;color:#1E9FFF}
.bmbl-by-acts .bmbl-mini.on svg,.bmbl-mbar .bmbl-mini.on svg{fill:#1E9FFF;stroke:none}
.bmbl-by-acts .bmbl-mini.primary,.bmbl-mbar .bmbl-mini.primary{background:#007DEE;border-color:#007DEE;color:#fff;padding:8px 20px;margin-left:16px;gap:6px}
/* 分享图标为线条型 path（开放路径），须描边渲染（fill 会闭合成色块错乱）；
   尺寸/线帽对齐原型 .share-inline：16px、默认 butt 平头（不加 round） */
.bmbl-by-acts .bmbl-mini.primary svg,.bmbl-mbar .bmbl-mini.primary svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2}
.bmbl-by-acts .bmbl-mini.primary:hover,.bmbl-mbar .bmbl-mini.primary:hover{background:#006CC4;box-shadow:0 4px 14px rgba(0,125,238,.32);color:#fff}

/* 正文富文本（图文） */
.bmbl-body{font-size:14px;color:#333;line-height:1.85}
.bmbl-body h2{font-size:20px;margin:30px 0 14px;padding-left:12px;border-left:4px solid #1E9FFF;color:#1a1a1a;line-height:1.4}
.bmbl-body h3{font-size:17px;margin:22px 0 10px;color:#222}
.bmbl-body p{margin:0 0 14px}
.bmbl-body a{color:#1E9FFF}
.bmbl-body img{max-width:100%;border-radius:8px}
.bmbl-body ul,.bmbl-body ol{padding-left:22px;margin:0 0 14px}
.bmbl-body li{margin-bottom:8px}
.bmbl-body table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
.bmbl-body table th{background:#f5f9ff;color:#103a5c;font-weight:600}
.bmbl-body table th,.bmbl-body table td{border:1px solid #e8edf3;padding:10px 12px;text-align:left}
.bmbl-sumbox{background:#edf5fe;border-left:3px solid #1E9FFF;border-radius:2px;padding:16px 20px;margin-bottom:20px}
.bmbl-sumbox .lab{display:block;font-size:12px;color:#1E9FFF;margin-bottom:8px}
.bmbl-sumbox p{margin:0;color:#444;line-height:1.8}
/* 文末数据引用列表（需求1.3：来源于名称纯文本+查看来源链接新标签；无引用不渲染） */
.bmbl-refs{background:#f8fafd;border-radius:8px;padding:16px 20px;margin:20px 0}
.bmbl-refs-t{font-size:14px;font-weight:700;color:#1d3b5c;margin-bottom:10px}
/* BUG#27944：查看来源紧跟引用来源名称之后（原 space-between 将链接推至行尾，视觉脱离引用项） */
.bmbl-ref{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:6px 0;font-size:14px;color:#555}
.bmbl-ref .src{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bmbl-ref a{color:#1E9FFF;text-decoration:none;white-space:nowrap;flex-shrink:0}
.bmbl-ref a:hover{text-decoration:underline}
/* 版权声明（REQ-024/DTL-25：正文结束后，PC 与移动端同模板一致） */
.bmbl-copyright{margin:24px 0 0;padding:16px 20px;background:#fff;border:1px solid #e8e8e8;border-left:3px solid #1E9FFF;border-radius:4px}
.bmbl-copyright .lab{display:block;font-size:14px;font-weight:700;color:#1E9FFF;margin-bottom:8px}
.bmbl-copyright p{margin:0;font-size:12px;line-height:1.8;color:#999}
.bmbl-body figure{margin:18px 0}
.bmbl-body figcaption{font-size:12px;color:#999;text-align:center;margin-top:8px}

/* 内联视频（图文正文 / 视频主内容） */
.bmbl-vp{position:relative;width:100%;padding-top:56.25%;border-radius:8px;overflow:hidden;background:#000;cursor:pointer}
.bmbl-vp img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.bmbl-vp-mask{position:absolute;inset:0;background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;transition:background .2s}
.bmbl-vp:hover .bmbl-vp-mask{background:rgba(0,0,0,.4)}
.bmbl-vp-play{width:58px;height:58px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.bmbl-vp-play svg{width:20px;height:24px;fill:#103a5c;margin-left:3px}
.bmbl-vp iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:none}
.bmbl-vsrc{font-size:12px;color:#aaa;margin-top:10px}

/* 视频模式容器 */
.bmbl-detvideo{margin-bottom:24px}
.bmbl-vintro h2{font-size:18px;margin:0 0 10px;color:#1a1a1a}

/* CTA 留资板块（2026-09-21 美化：原型 .cta-block 基础上升版——双角光晕浅蓝渐变+主蓝描边+深投影、16px 圆角，
   内容列 520px 居中。光晕用多层 background 实现：背景绘制区=边框盒自动裁剪，不用伪元素+overflow:hidden
   （会裁掉 layui 区号下拉面板） */
.bmbl-cta{background:radial-gradient(420px 180px at 100% 0%,rgba(0,125,238,.09),transparent 65%),radial-gradient(420px 200px at 0% 100%,rgba(30,159,255,.08),transparent 65%),linear-gradient(135deg,#eef6ff,#e2effb);border:1px solid rgba(0,125,238,.10);border-radius:16px;padding:36px 32px 30px;margin:36px 0 20px;text-align:center;box-shadow:0 8px 24px rgba(0,125,238,.10)}
.bmbl-cta-t{font-size:20px;font-weight:800;color:#0f3a66;margin-bottom:6px;letter-spacing:.3px}
.bmbl-cta-s{font-size:14px;color:#5a7a96;margin-bottom:22px;line-height:1.55}
/* CTA 皮肤：复用 bmbl-lead 表单体（label/可选字段块隐藏）；form 变 flex 列（内容列 520px）：
   姓名(150px，保证"例如：陈经理"占位不截断)+区号/电话同行，验证码行/协议/提交/foot 通栏换行 */
.bmbl-cta .bmbl-lf-lab{display:none}
.bmbl-cta .bmbl-lead-extra{display:none}
.bmbl-cta form.bmbl-lead{display:flex;flex-wrap:wrap;justify-content:center;column-gap:14px;align-items:flex-start;max-width:520px;margin:0 auto}
.bmbl-cta .bmbl-lf-field{width:100%;display:flex;flex-wrap:wrap;gap:8px}
.bmbl-cta .bmbl-lead>.bmbl-lf-field:first-of-type{width:140px;flex:none;row-gap:0}   /* 150→140：给区号框加宽让位（"例如：陈经理"占位约 116px 仍全显）；加>限定 form 直接子级：验证码行在 wrap 内也是 first-of-type，原选择器误伤致验证码框被压成 36px；row-gap:0：红字换行独占姓名框下方一行时去掉块 gap 8px 行距，姓名→红字间隙=3px margin 与手机号/区号红字口径一致（2026-09-24 反馈「第一个框和提示语中间有点间隙」） */
.bmbl-cta .bmbl-lf-phonerow{width:auto;flex:1;min-width:0}   /* phonerow 占 CTA 横排姓名块之外整行（min-width:0 防内容撑破）；原 row-gap:0 随红字回各自包裹 div 方案移除（2026-09-24，恒单行无 row gap） */
.bmbl-cta .bmbl-lf-coderow-wrap{width:100%;flex:none;margin-top:14px}
/* WhatsApp 通栏换行块：CTA 皮肤隐藏 label 后无行距来源，与上（姓名/电话）行贴死——补 14px 行距（与验证码行/协议口径一致；选择器只命中 WhatsApp：form 直接子级 div 字段块排除姓名 first-of-type 与 phonerow） */
.bmbl-cta form.bmbl-lead>.bmbl-lf-field:not(:first-of-type):not(.bmbl-lf-phonerow){margin-top:14px}
.bmbl-cta .bmbl-lf-coderow{width:100%}
.bmbl-cta .lf-cc-wrap{width:180px;position:relative}   /* 96→180：占位「Country/Region Code」定高 48px 框内需约 133px+36px 内边距才不截断（165px 实测仍折行），180px 内容宽 144px 单行全显 */
/* 控件风格：白底/10px 圆角/14px 字号/#d8e4f0 描边/占位符弱化/focus 主蓝外发光；error 红框在覆盖后重申 */
.bmbl-cta .bmbl-lf-field input{background:#fff;border:1px solid #d8e4f0;border-radius:10px;padding:0 16px;font-size:14px;height:48px}   /* 与区号 layui 框固定等高 48px（原生行高 normal 与 layui 1.5 口径不一致，靠 padding 拼高度会差约 4px） */
.bmbl-cta .bmbl-lf-field input::placeholder{color:#a9bccc}
.bmbl-cta .bmbl-lf-field input:focus{border-color:#007DEE;box-shadow:0 0 0 3px rgba(0,125,238,.12)}
.bmbl-cta .bmbl-lf-field input.error{border-color:#e6162d;box-shadow:none}
/* CTA 横排布局错误态（2026-09-22 改版：弃绝对定位浮层——浮层高 ~17px>行间距 14px，红字会压下方控件）：
   红字（append 在字段块内末尾，见 blog-lead.js）流内占位——字段块 flex-wrap:wrap 使红字
   （width:100%，见基础规则）换行独占输入框下方一行，块自然撑高、下方内容顺移，物理无遮挡；
   居左显示（用户口径）；表单 align-items:flex-start 防同线姓名块/电话行互相 stretch 拉高输入框
   （验证码行内按钮等高所需 stretch 不受影响）；.bmbl-lf-agree 为块级容器，红字直接后置换行 */
.bmbl-cta label.bm_error{margin:3px 0 0;text-align:left}
/* phonerow 内 flex-start：同行姓名块有错撑高时防区号/电话控件被 stretch 拉高变形 */
.bmbl-cta .bmbl-lf-phonerow{align-items:flex-start}
.bmbl-cta .bmbl-lf-field .layui-form-select .layui-input{background:#fff;border:1px solid #d8e4f0;border-radius:10px;padding:0 24px 0 12px;font-size:14px;height:48px}   /* 与 input 统一固定高 48px；文本垂直居中靠 input 自身行为，去掉上下 padding */
.bmbl-cta .bmbl-lf-field .layui-form-select .layui-input:focus,
.bmbl-cta .bmbl-lf-field .layui-form-selected .layui-input{border-color:#007DEE;box-shadow:0 0 0 3px rgba(0,125,238,.12)}
/* 验证码按钮：随行拉伸与输入框等高、主蓝实底 */
.bmbl-cta .bmbl-codebtn{border-radius:10px;background:#007DEE;font-size:14px;font-weight:600;padding:0 18px;transition:background .2s}
.bmbl-cta .bmbl-codebtn:hover{background:#1a8fe8}
.bmbl-cta .bmbl-codebtn.disabled,.bmbl-cta .bmbl-codebtn.disabled:hover{background:#a8d8ff;cursor:not-allowed}
/* 协议（通栏左对齐）/提交（通栏主蓝渐变+投影，hover 微上浮） */
.bmbl-cta .bmbl-lf-agree{width:100%;margin-top:14px;text-align:left}
.bmbl-cta .bmbl-lf-agree a{color:#007DEE}
.bmbl-cta .lf-submit{width:100%;margin-top:16px;border-radius:10px;background:linear-gradient(90deg,#007DEE,#2f9bff);font-size:16px;font-weight:700;letter-spacing:1px;padding:14px 0;box-shadow:0 6px 16px rgba(0,125,238,.25);transition:transform .2s,box-shadow .2s}
.bmbl-cta .lf-submit:hover{transform:translateY(-1px);box-shadow:0 9px 20px rgba(0,125,238,.30)}
.bmbl-cta .lf-submit:active{transform:none;box-shadow:0 4px 10px rgba(0,125,238,.25)}
/* foot 两段信息间竖分隔线（纯 CSS，不动组件结构） */
.bmbl-cta .bmbl-lf-foot{width:100%;justify-content:center;margin-top:12px;color:#8aa7c1}
.bmbl-cta .bmbl-lf-foot span+span::before{content:'';display:inline-block;width:1px;height:10px;background:#b9d2e8;margin:0 12px;vertical-align:-1px}

/* 上下篇 */
/* 对齐原型 V2.2：单行 baseline（品牌蓝标签+深色标题同行）、白底卡片圆角阴影、hover 上浮；首末篇占位灰底弱化禁点 */
.bmbl-pn{display:flex;gap:14px;margin:30px 0 20px}
.bmbl-pn a,.bmbl-pn .pn-empty{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;background:#fff;border:1px solid #e5ecf4;border-radius:14px;padding:16px 18px;text-decoration:none;color:inherit;box-shadow:0 2px 10px rgba(20,40,80,.04);transition:border-color .18s,box-shadow .18s,transform .18s}
.bmbl-pn a:hover{border-color:#1E9FFF;box-shadow:0 8px 22px rgba(0,125,238,.12);transform:translateY(-2px)}
.bmbl-pn .lab{flex:none;color:#1E9FFF;font-size:13.5px;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.bmbl-pn .t{flex:1;min-width:0;color:#222;font-size:14px;font-weight:600;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bmbl-pn .pn-empty{background:#fafbfc;box-shadow:none;opacity:.6;pointer-events:none}
.bmbl-pn .pn-empty .lab{color:#999;font-weight:600}
.bmbl-pn .pn-empty .t{color:#999;font-weight:500}

/* 评论区（置于左侧文章栏内、宽度跟随文章栏不横向铺满；复用站内通用评论组件 templates/comment/index.html，评论样式由组件自带 css/comment/index.css 承载） */
.bmbl-comment{margin:20px 0 0}
/* 详情侧栏模块 */
.bmbl-smod{background:#fff;border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.05);padding:18px 20px}
.bmbl-smod h5{font-size:15px;color:#1a1a1a;margin:0 0 14px;padding-left:10px;border-left:3px solid #1E9FFF;line-height:1.2}
.bmbl-tagcloud{display:flex;flex-wrap:wrap;gap:10px}
.bmbl-tagcloud span{font-size:14px;color:#555;background:#f5f7fa;border-radius:14px;padding:5px 14px;cursor:pointer;transition:all .2s}
.bmbl-tagcloud span:hover{background:#e8f4ff;color:#1E9FFF}
.bmbl-faq{list-style:none;margin:0;padding:0}
.bmbl-faq li{padding:12px 0;border-bottom:1px dashed #eef1f5}
.bmbl-faq li:last-child{border-bottom:none}
.bmbl-faq .q{display:flex;gap:8px;font-size:14px;font-weight:600;color:#333;line-height:1.5;margin-bottom:8px}
.bmbl-faq .qi,.bmbl-faq .ai{flex-shrink:0;width:20px;height:20px;border-radius:4px;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.bmbl-faq .qi{background:#1E9FFF;color:#fff}
.bmbl-faq .a{display:flex;gap:8px;font-size:14px;color:#666;line-height:1.7}
.bmbl-faq .ai{background:#e8f4ff;color:#1E9FFF}

/* 分享面板（对齐原型 V2.2：标题带蓝色分享图标、OG 卡纵向大图、平台 3 列圆角方图标、底部仅通栏复制链接） */
.bmbl-share-mask{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;display:none;align-items:center;justify-content:center}
.bmbl-share-mask.on{display:flex}
.bmbl-share-panel{width:420px;max-width:92vw;background:#fff;border-radius:16px;padding:20px 22px;box-sizing:border-box}
.bmbl-share-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.bmbl-share-tt{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:#222}
.bmbl-share-ic{display:flex;align-items:center;justify-content:center}
.bmbl-share-ic svg{width:20px;height:20px;fill:none;stroke:#007DEE;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bmbl-share-h .x{width:28px;height:28px;border-radius:50%;background:#f2f4f7;display:flex;align-items:center;justify-content:center;font-size:18px;color:#999;cursor:pointer;line-height:1}
.bmbl-og{border:1px solid #eef1f5;border-radius:12px;padding:10px;margin-bottom:16px}
.bmbl-og img{width:100%;height:150px;border-radius:8px;object-fit:cover;display:block}
.bmbl-og-bd{padding:10px 4px 4px;min-width:0}
.bmbl-og-d{font-size:11px;color:#999;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.bmbl-og-t{font-size:15px;color:#222;font-weight:600;line-height:1.45;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bmbl-og-s{font-size:12px;color:#999;margin-top:4px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bmbl-sh-t{font-size:14px;color:#999;margin-bottom:12px}
.bmbl-shgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 8px;margin-bottom:18px}
.bmbl-shit{display:flex;flex-direction:column;align-items:center;gap:8px;border:none;background:none;cursor:pointer;font-size:12px;color:#555}
.bmbl-shic{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.bmbl-shic svg{width:24px;height:24px;fill:#fff}
.bmbl-shic.wx{background:#07c160}.bmbl-shic.moments{background:#2aae67}
.bmbl-shic.wb{background:#e6162d}.bmbl-shic.x{background:#111}
.bmbl-shic.fb{background:#1877f2}.bmbl-shic.li{background:#0a66c2}
.bmbl-shic.wxw{background:#2e77e6}.bmbl-shic.xhs{background:#ff2442}.bmbl-shic.qq{background:#12b7f5}
.bmbl-shic.wa{background:#25d366}.bmbl-shic.tt{background:#fe2c55}.bmbl-shic.yt{background:#f00}.bmbl-shic.ig{background:#e4405f}
.bmbl-share-acts{display:flex}
.bmbl-share-acts .bmbl-btn{flex:1;padding:11px 0}
.bmbl-qrview{display:none;text-align:center;padding:10px 0 4px}
.bmbl-qrview.on{display:block}
.bmbl-qrview .t{font-size:15px;font-weight:600;color:#222;margin-bottom:6px}
.bmbl-qrview .s{font-size:12px;color:#999;margin-bottom:14px}
.bmbl-qrview img{display:block;width:180px;height:180px;border:1px solid #eef1f5;border-radius:8px;margin:0 auto 14px}
.bmbl-qrback{border:none;background:none;color:#1E9FFF;font-size:14px;cursor:pointer}

/* 移动端：顶栏 + 吸底操作栏 */
.bmbl-mtopbar{display:none}
.bmbl-mbar{display:none}

/* ---------- 移动端适配（团队规范：isMobile 判定，html.bm-m 由 bm_common.js 注入；不使用媒体查询） ----------
   原 ≤1024/960/768 三档断点在 isMobile 口径下合并为一档（平板 isTablet 归 PC，窄窗兜底见 bm_common.js） */
/* 对齐原型 V2.2 ≤960：官网双层导航（白头部+搜索层+深灰菜单条）收起，
   App 顶栏（.bmbl-mtopbar）替代并置顶；右侧悬浮工具栏（toolbar.html）
   位于 .header_primary 子树内连带隐藏。 */
.bm-m .header_primary,.bm-m #search,.bm-m #menu{display:none}
/* 原型 L640：面包屑移动端隐藏 */
.bm-m .bmbl-bc{display:none}
/* 原型 L214：列表页 banner 移动端隐藏（空间宝贵，一进直接看内容） */
.bm-m .bmbl-banner{display:none}
/* 移动端隐藏官网页脚（#footer > footer-primary.html 深灰大页脚）：原型 V2.2
   移动端页面以内容结尾无页脚呈现，详情页以吸底操作栏收尾。 */
.bm-m #footer{display:none}
/* BUG#38 修复：公共头部 #menu 导航项 float:left，窄屏折行后浮动向下侵入博客内容
   （.bmbl-banner 因 overflow:hidden 形成 BFC 而避让浮动，右移并收缩成 315px）；
   博客容器整体清除浮动。导航隐藏后本规则不可达，保留作防御兜底。 */
/* 2026-09-23：移动端 App 顶栏（.bmbl-mtopbar）与内容区之间增加 12px 间距（.bm_container 自身无顶距） */
.bm-m .bmbl-wrap{clear:both;padding-top:12px}
/* BUG#38 次生：公共导航 .chinese-menu 的 layui-clear clearfix 在博客页未生效，
   浮动 li 折行后 #menu/.bg-dark 恒高 46px，后三行白底白字溢出；
   强制容器随浮动长高 + 兜底 clearfix（桌面宽单排时高度不变）。 */
.bm-m #menu,.bm-m .bg-dark{height:auto}
.bm-m .chinese-menu:after{display:block;clear:both;content:" "}
.bm-m .bmbl-main,.bm-m .bmbl-det{flex-direction:column;align-items:stretch} /* BUG#34 次生修复：column 下取消顶对齐收缩，防止子项被内容固有宽撑出视口 */
/* 2026-09-23 间距统一（列表/详情四向一致：上12 下40 左右6）：移动端列表 bc/banner 均隐藏、顶距=wrap 的12px，
   详情需抵消 .bmbl-det 的 margin-top:12px；底部 89px = 吸底栏实测高 49px（上下 padding 8×2 + 按钮行高 32 + 1px 边框）
   + 40px 净空（与列表 .bmbl-main 的 pb 40px 对齐）。原 .bm-m body{padding-bottom:56px} 实测无效
  （body 高度被约束为视口高，其 padding 不计入文档滚动区），已删除，改由内容容器兜底 */
.bm-m .bmbl-det{margin-top:0;padding-bottom:89px}
.bm-m .bmbl-aside{width:100%;flex-direction:row;flex-wrap:wrap}
.bm-m .bmbl-aside>*{flex:1;min-width:300px}
.bm-m .bmbl-cover{width:240px}
/* SEO/GEO 防护规范：列表页侧栏（留资卡+发布引导）整体隐藏，移动端留资走详情页底部 CTA；
   详情页侧栏纵向堆叠，其中留资卡隐藏（与底部 CTA 共用同一份表单，避免重复呈现），保障正文占比 */
.bm-m .bmbl-main .bmbl-aside{display:none}
.bm-m .bmbl-det .bmbl-aside{flex-direction:column}
.bm-m .bmbl-det .bmbl-aside .bmbl-lf{display:none}
.bm-m .bmbl-banner-in{height:auto;flex-direction:column;padding:28px 20px;gap:20px}
.bm-m .bmbl-bm{max-width:100%}
.bm-m .bmbl-bm h2{font-size:22px}
.bm-m .bmbl-pts{flex-wrap:wrap;gap:14px}
.bm-m .bmbl-bcta{width:100%;height:auto}
/* 移动端类型 Tab 按原型改文字+下划线样式（2026-09-22）：覆写 PC 分段控件外观（容器浅灰胶囊/选中白底浮起），
   移动为裸文字 Tab：选中蓝字+短下划线，两档居中拉开间距；角标 .n 由 SSR 注入（全量计数，控制器 typeTextCount/typeVideoCount），
   移动端转小号上标（去 PC 胶囊底），选中色对齐 PC #007DEE */
.bm-m .bmbl-typebar{justify-content:center;gap:56px;background:none;padding:0;border-radius:0;width:auto}
.bm-m .bmbl-tb{background:none;padding:2px 4px 10px;font-size:16px;border-radius:0;color:#333;position:relative;box-shadow:none}
.bm-m .bmbl-tb.on{background:none;color:#007DEE;box-shadow:none}
.bm-m .bmbl-tb.on:after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:#007DEE}
.bm-m .bmbl-tb .n{font-size:11px;line-height:1;vertical-align:top;margin-left:2px;background:none;padding:0;border-radius:0;color:inherit;font-weight:400;opacity:.75}
/* 移动端话题 chips 按原型放大一档（选中实心蓝底白字沿用 PC 基样式，不另覆写） */
.bm-m .bmbl-tags{margin-top:18px;gap:12px 10px}
.bm-m .bmbl-chip{padding:7px 18px;font-size:14px;border-radius:999px}
.bm-m .bmbl-card{flex-direction:column;padding:16px}
.bm-m .bmbl-cover{width:100%}
.bm-m .bmbl-cb{margin-left:0;margin-top:12px}
.bm-m .bmbl-card-sum{display:none} /* BUG#36：移动端卡片不展示摘要（LMB-2） */
.bm-m .bmbl-article{padding:20px 16px}
.bm-m .bmbl-article h1{font-size:20px}
.bm-m .bmbl-by-acts{display:none}
/* CTA 移动端：内容列放开 520 限制，姓名/电话各自通栏换行堆叠（区号+号码行内保持横排） */
.bm-m .bmbl-cta{padding:26px 18px}
.bm-m .bmbl-cta form.bmbl-lead{max-width:100%}
.bm-m .bmbl-cta .bmbl-lead>.bmbl-lf-field:first-of-type{width:100%;margin-bottom:14px}   /* 移动端姓名与电话行堆叠，补行间距（form 仅 column-gap） */
.bm-m .bmbl-cta .bmbl-lf-phonerow{width:100%;flex:none}
.bm-m .bmbl-cta .lf-cc-wrap{width:130px}   /* 移动端区号框限宽：PC 180px 在通栏窄容器下挤压电话框 */
.bm-m .bmbl-pn{flex-direction:column}
.bm-m .bmbl-det .bmbl-aside{flex-direction:column}
/* 移动 App 顶栏：返回 + 标题 */
.bm-m .bmbl-mtopbar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #f0f0f0;height:46px;padding:0 12px}
.bm-m .bmbl-mtopbar .back{display:flex;align-items:center;gap:4px;color:#333;font-size:14px;cursor:pointer;min-width:60px}
.bm-m .bmbl-mtopbar .back svg{width:18px;height:18px;stroke:#333;fill:none;stroke-width:2}
.bm-m .bmbl-mtopbar .t{font-size:16px;font-weight:600;color:#222;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bm-m .bmbl-mtopbar .ph{min-width:60px}
/* 吸底：赞/藏/分享 */
.bm-m .bmbl-mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:99;background:#fff;border-top:1px solid #f0f0f0;padding:8px 12px;box-sizing:border-box;gap:10px}
.bm-m .bmbl-mbar .bmbl-mini{flex:1;justify-content:center}
.bm-m .bmbl-mbar .bmbl-mini.primary{flex:1.4;margin-left:0}
/* BUG#34 次生：全站页脚 footer_link 定宽 832px（footer.css L86）致移动端横向溢出，页内覆写换行自适应；
   公共头部徽标残留 12~16px 溢出用 overflow-x:clip 兜底（不产生滚动容器，mtopbar sticky 不受影响，
   旧浏览器忽略本声明回落可见溢出，无副作用） */
.bm-m .footer_link{width:auto;max-width:100%}
.bm-m,.bm-m body{overflow-x:clip}
.bm-m .bmbl-share-panel{padding:18px}
/* BUG#34：bm_common.css ≤1024px 全局 html,body{min-width:1024px} 会锁死移动端视口，
   博客前台为自有响应式设计，在此覆写释放（仅作用于引用本 CSS 的博客页，不动公共样式） */
.bm-m,.bm-m body{min-width:0}
/* BUG 27970 修复：bm_common.css 全局 html,body{height:100%} 把 body 高度锁死为一屏视口，
   sticky 吸附范围被限制在父容器 body 内容盒内——滚动超过一屏（列表触底加载翻页后）顶栏
   即被 body 底边顶走不再固定。覆写释放高度（仅 .bm-m 作用域，对齐上方 min-width:0 覆写
   同源公共样式的做法），body 由内容撑开后 .bmbl-mtopbar sticky 全程吸顶（列表/详情页同规则生效） */
.bm-m,.bm-m body{height:auto}