/* 整套主题全站样式层（按 platform:device 标记块组织）。
 * 本主题仅承载「移动档（mobile）」专有样式：
 *   - 编译端：PC 档编译时该块被整体剥离（ThemeHtmlCompiler.stripPackDeviceBlocks 按档取源，落实约束 I2）；
 *   - Web 端：靠 `.m-*` 独立命名空间 + 真源断点（≤767px）双重隔离 —— PC 档页面只含 PC 结构（无 .m-* 元素），永不命中。
 * ⚠️ 不套 `[data-tl-device="mobile"]` 作用域：该属性仅由 Web 渲染端注入（modules/theme/routes.js），
 *    编译产物（WXML/WXSS）无此属性，套用会导致小程序/App 端移动档样式全部失效。
 * 断点值全部取自真源 modules/page_editor/config/devices.js（1200 / 992 / 768 / 480）。
 *
 * ───────────────────────── 移动端设计规范摘要（mobile/home.html 专用） ─────────────────────────
 * 【字号层级】首屏标题 26px（小屏 24px）／区块标题 20px／卡片标题 16px／正文 15px／辅助 13px（标签、徽标 12px）
 * 【间距】页面左右安全边距 14px（.m-wrap / 横滑容器 padding）；卡片间距 10px；区块纵向 24px；卡片内边距 14-16px
 * 【圆角】卡片 12px（--radius-lg）；按钮 / 图标容器 8-14px；标签与徽标胶囊 9999px（--radius-full）
 * 【触控热区】≥44px：按钮高 46px；金刚区入口（图标 44px + 文字）整体 ≥74px；TabBar 项高 52px；文字链 min-height 44px
 * 【TabBar 安全区】固定底部 52px + env(safe-area-inset-bottom)；页面末尾追加 .m-tabbar-pad 预留「52px + 安全区」，
 *   避免固定底栏遮挡页脚备案信息（合规必需）。Web 端 iOS Safari / 小程序端 WXSS 均支持 env()（源码已有先例）。
 * 【点击反馈】<a> 编译为 <navigator> 后自动带 hover-class="nav-hover"（opacity .7，见 compiler/generate/pages.js）；
 *   Web 端补充 :active 反馈（:active 规则在 WXSS 编译期被剥离，故仅 Web 生效，两端互不干扰）。
 * 【编译口径】display:grid 由编译器降级为 flex + 子项等宽规则；::before/::after 在 WXSS 中被剥离（仅可作 Web 装饰）；
 *   px 统一换算 rpx；本块不使用 767 媒体查询（编译端 WXSS 本就会拆平，Web 端改为全量生效，见块首说明）；仅 480 小屏细化块保留为真正的 @media。
 * ─────────────────────────────────────────────────────────────────────────────────────────
 */
/*@tl-pack:web:mobile:start@*/
/* ⚠️ 本块不套 @media 包裹（原 @media(max-width:767px) 已移除）：
 *   本块只在「移动档」页面被加载（.m-* 元素仅存在于 mobile 档模板），PC 档页面无任何 .m-* 元素 → 天然零污染；
 *   若沿用 767 媒体查询，平板/桌面视口（768~991px）访问移动档时样式会整体失效（实测 801px 视口下 hero 内边距归零、TabBar 变 static）。
 *   编译端 WXSS 本就会把 767 媒体查询拆平生效，故移除后 Web 端与编译端语义一致。 */
  /* ===== 页面容器 ===== */
  .m-main { display: block; }
  .m-wrap { width: 100%; max-width: 100%; padding: 0 14px; margin: 0 auto; box-sizing: border-box; }
  .m-sec { padding: 24px 0; }
  .m-sec--soft { background: var(--bg-card); }

  /* ===== 区块标题（左对齐，压缩纵向空间） ===== */
  .m-head { text-align: left; margin-bottom: 14px; }
  .m-label { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; color: var(--brand-blue); background: var(--color-info-bg); padding: 3px 10px; border-radius: var(--radius-full); margin-bottom: 8px; }
  .m-title { font-size: 20px; font-weight: 800; line-height: 1.35; color: var(--text-1); margin-bottom: 8px; }
  .m-desc { font-size: 15px; line-height: 1.7; color: var(--text-2); }

  /* ===== 首屏 Hero（顶栏固定吸顶，需预留两行顶栏高度；顶栏实测 121px，故取 130px = 121 + 9px 缓冲。
     取值与 .m-member .member-header / member-sidebar sticky top 保持同一口径） ===== */
  .m-hero { position: relative; overflow: hidden; padding: 130px 0 32px; background: var(--tl-gradient-dark); color: #fff; text-align: left; }
  .m-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 26% 30%, rgba(var(--brand-blue-2-rgb),0.28) 0%, transparent 52%), radial-gradient(circle at 78% 72%, rgba(var(--brand-blue-rgb),0.2) 0%, transparent 54%); }
  .m-hero .m-wrap { position: relative; z-index: 1; }
  .m-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-full); background: rgba(var(--brand-blue-2-rgb),0.18); border: 1px solid rgba(var(--brand-blue-2-rgb),0.4); font-size: 12px; color: #fff; margin-bottom: 14px; }
  .m-badge i { color: #9BC0FF; }
  .m-hero-title { font-size: 26px; font-weight: 800; line-height: 1.28; color: #fff; margin-bottom: 12px; }
  .m-grad { display: block; background: linear-gradient(135deg, #9BC0FF 0%, #FFFFFF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .m-hero-sub { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.82); margin-bottom: 20px; }
  .m-hero-actions { display: flex; flex-direction: column; gap: 10px; }

  /* ===== 按钮（移动档统一全宽；高 46px ≥ 44px 触控热区） ===== */
  .m-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; padding: 0 18px; box-sizing: border-box; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; border: 1px solid transparent; }
  .m-btn--primary { background-color: var(--brand-blue); background-image: var(--brand-gradient); color: #fff; box-shadow: var(--shadow-blue); }
  .m-btn--ghost { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.28); color: #fff; }
  .m-btn--outline { background: #fff; color: var(--brand-blue); border-color: rgba(var(--brand-blue-rgb),0.5); }

  /* ===== 金刚区：横向滚动图标入口（国内 App 首页最典型结构） ===== */
  .m-kk { padding: 14px 0 6px; background: #fff; }
  .m-kk-scroll { display: flex; gap: 4px; overflow-x: auto; padding: 2px 14px 8px; box-sizing: border-box; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .m-kk-scroll::-webkit-scrollbar { display: none; }
  .m-kk-item { flex: 0 0 auto; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px; border-radius: var(--radius-md); }
  .m-kk-ico { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; color: var(--brand-blue); background: var(--color-info-bg); }
  .m-kk-txt { font-size: 12px; line-height: 1.3; color: var(--text-2); white-space: nowrap; }
  .m-kk-item:active { opacity: .72; }

  /* ===== 单列内容卡片流（白底 / 12px 圆角 / 10px 间距） ===== */
  .m-list { display: flex; flex-direction: column; gap: 10px; }
  .m-card { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
  .m-card--soft { background: var(--color-info-bg); border-color: rgba(var(--brand-blue-rgb),0.24); }
  .m-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; margin-bottom: 10px; background: var(--color-info-bg); color: var(--brand-blue); }
  .m-card-title { font-size: 16px; font-weight: 600; color: var(--text-1); margin-bottom: 8px; }
  .m-card-text { font-size: 15px; line-height: 1.7; color: var(--text-2); }
  .m-card-list { display: flex; flex-direction: column; gap: 12px; }
  .m-card-feats { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
  .m-card-feats li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.6; color: var(--text-2); }
  .m-card-feats i { color: #16a34a; font-size: 13px; margin-top: 3px; }
  .m-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .m-stat { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px 12px; text-align: center; box-shadow: var(--shadow-sm); }
  .m-stat-value { font-size: 20px; font-weight: 800; color: var(--brand-blue); margin-bottom: 6px; }
  .m-stat-label { font-size: 12px; color: var(--text-2); }
  .m-doc-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .m-doc-nav a { display: inline-block; padding: 4px 12px; border-radius: var(--radius-full); background: var(--color-info-bg); color: var(--brand-blue); font-size: 12px; text-decoration: none; }
  .m-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--brand-blue); }

  /* ===== 横向滑动能力卡片（右侧露边提示可滑动；卡片宽 74%） ===== */
  .m-hscroll { display: flex; gap: 10px; overflow-x: auto; padding: 2px 14px 10px; box-sizing: border-box; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .m-hscroll::-webkit-scrollbar { display: none; }
  .m-scard { flex: 0 0 auto; width: 74%; max-width: 280px; box-sizing: border-box; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
  .m-scard-ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; color: var(--brand-blue); background: var(--color-info-bg); margin-bottom: 10px; }
  .m-scard-title { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--text-1); margin-bottom: 8px; }
  .m-scard-text { font-size: 15px; line-height: 1.7; color: var(--text-2); }
  .m-scard:active { opacity: .85; }

  /* ===== 合规声明 ===== */
  .m-callout { margin-top: 14px; padding: 14px; border-left: 3px solid var(--brand-blue); border-radius: var(--radius-md); background: var(--color-info-bg); font-size: 15px; line-height: 1.8; color: var(--text-2); }
  .m-callout strong { color: var(--text-1); }

  /* ===== 模型网格（2 列，模型广场标准版式） ===== */
  .m-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .m-model { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 14px 12px; text-align: center; }
  .m-model-ico { font-size: 26px; line-height: 1; margin-bottom: 8px; }
  .m-model-name { font-size: 15px; font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
  .m-model-desc { font-size: 13px; line-height: 1.5; color: var(--text-2); }
  .m-tag { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-info-bg); color: var(--brand-blue); font-size: 12px; }
  .m-more { margin-top: 14px; }

  /* ===== 适用场景：左图标 + 文本 列表项 ===== */
  .m-li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow-sm); }
  .m-li-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; color: var(--brand-blue); background: var(--color-info-bg); }
  .m-li-body { flex: 1 1 auto; min-width: 0; }
  .m-li-title { font-size: 16px; font-weight: 600; color: var(--text-1); margin-bottom: 6px; }
  .m-li-text { font-size: 15px; line-height: 1.7; color: var(--text-2); }

  /* ===== CTA ===== */
  .m-cta { padding: 24px 0 28px; background: var(--color-info-bg); text-align: center; }
  .m-cta-title { font-size: 20px; font-weight: 800; color: var(--text-1); margin-bottom: 10px; }
  .m-cta-desc { font-size: 15px; line-height: 1.75; color: var(--text-2); margin-bottom: 16px; }
  .m-cta-actions { display: flex; flex-direction: column; gap: 10px; }

  /* ===== 固定底部 TabBar（52px + iOS 底部安全区） ===== */
  .m-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; display: flex; align-items: stretch; background: rgba(255,255,255,0.98); border-top: 1px solid var(--border-color); box-shadow: 0 -2px 12px rgba(29,33,41,0.06); padding-bottom: env(safe-area-inset-bottom); }
  .m-tab-item { flex: 1 1 0; min-width: 0; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-3); }
  .m-tab-ico { font-size: 20px; line-height: 1; }
  .m-tab-txt { font-size: 12px; line-height: 1.2; }
  .m-tab-item.is-active { color: var(--brand-blue); }
  .m-tab-item:active { opacity: .72; }
  /* TabBar 占位：与固定底栏等高（52px + 安全区），保证页脚备案信息完整可见 */
  .m-tabbar-pad { height: calc(52px + env(safe-area-inset-bottom)); }

  /* ===== 移动档通用：返回上一页（左上角固定；仅 Web 端由 ThemeModuleLoader.renderMobileNav 注入） ===== */
  .m-back-btn { position: fixed; top: 12px; left: 12px; z-index: 1001; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; background: rgba(255,255,255,0.94); border: 1px solid var(--border-color); color: var(--text-1); font-size: 15px; line-height: 1; box-shadow: 0 2px 10px rgba(29,33,41,0.12); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .m-back-btn:active { transform: scale(0.94); opacity: .85; }

  /* ===== 回顶按钮：移动档缩小并上移到 TabBar 之上（避免被固定底栏遮挡）
     .tl-has-tabbar 由 ThemeModuleLoader.renderMobileNav 注入（仅当页面确有 .m-tabbar 时），
     特异性 (1,2,0) 高于运行时注入的 #scroll-to-top (1,0,0) ===== */
  html[data-tl-device="mobile"].tl-has-tabbar #scroll-to-top { bottom: calc(52px + env(safe-area-inset-bottom) + 14px); right: 12px; width: 38px; height: 38px; font-size: 15px; }

  /* ===== 内页页头（FAQ 等移动档内页；为固定顶栏预留高度。130px = 顶栏实测 121px + 9px 缓冲，
     低于此值会使页标题被固定顶栏遮挡） ===== */
  .m-page-head { padding: 130px 0 18px; background: var(--tl-gradient-dark); color: #fff; }
  .m-page-title { font-size: 24px; font-weight: 800; line-height: 1.3; color: #fff; margin-bottom: 8px; }
  .m-page-sub { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.82); }

  /* ===== FAQ 问答卡（平铺；::before 的 Q 角标仅 Web 装饰，WXSS 会剥离） ===== */
  .m-faq-list { display: flex; flex-direction: column; gap: 10px; }
  .m-faq-item { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
  .m-faq-q { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; font-weight: 600; line-height: 1.6; color: var(--text-1); margin-bottom: 10px; }
  .m-faq-q::before { content: 'Q'; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; background: var(--color-info-bg); color: var(--brand-blue); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
  .m-faq-a { font-size: 15px; line-height: 1.75; color: var(--text-2); }

  /* ===== 登录 / 注册（认证页）移动优化 =====
     结构完全复用 PC 档（保留全部 form/id/onclick/script 契约，零功能风险）。
     ⚠️ 标记容器必须是外层 <div class="m-auth-page">：
        ① 编译端无 body 元素，bodyClass 会被丢弃；
        ② <section> 会被编译期区块化重写（class 重写为 auth-section + data-tl-block），附加类被剥离；
        ③ <div> 的 class 在编译端完整保留 → Web 端与小程序/App 端一致生效。 */
  .m-auth-page .auth-section { min-height: auto; display: block; padding: 92px 0 28px; }
  .m-auth-page .auth-container { max-width: 100%; padding: 0 14px; }
  .m-auth-page .auth-card { padding: 22px 16px; border-radius: 14px; box-shadow: none; border: 1px solid var(--border-color); }
  .m-auth-page .auth-title { font-size: 22px; }
  .m-auth-page .auth-subtitle { font-size: 14px; }
  .m-auth-page .login-tabs { gap: 8px; }
  .m-auth-page .tab-btn { height: 44px; font-size: 14px; border-radius: 10px; }
  .m-auth-page .form-label { font-size: 13px; }
  /* 16px 字号防止 iOS 聚焦自动缩放；48px 满足移动触控热区 */
  .m-auth-page .form-input { height: 48px; font-size: 16px; }
  .m-auth-page .input-group { height: 48px; }
  .m-auth-page .btn-block, .m-auth-page .btn-primary { height: 48px; font-size: 16px; }
  .m-auth-page .third-party-btn { width: 52px; height: 52px; }
  .m-auth-page #scroll-to-top { display: none; }

  /* ===== 内页通用组件（capability / compliance / models / pricing / about / contact / docs 等内页移动档） ===== */

  /* 图标变体（对齐 PC 档 .tl-icon 的 blue/green/orange 三色语义） */
  .m-li-ico--green { color: #16a34a; background: rgba(22,163,74,0.10); }
  .m-li-ico--orange { color: #ea580c; background: rgba(234,88,12,0.10); }

  /* 内页 CTA（原 PC 的 text-align:center + margin-top:40px → 移动档全宽堆叠） */
  .m-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

  /* 步骤条 → 纵向卡片（capability-steps） */
  .m-steps { display: flex; flex-direction: column; gap: 10px; }
  .m-step { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow-sm); }
  .m-step-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; line-height: 1; color: #fff; background-color: var(--brand-blue); background-image: var(--brand-gradient); }
  .m-step-body { flex: 1 1 auto; min-width: 0; }
  .m-step-title { font-size: 15px; font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
  .m-step-text { font-size: 14px; line-height: 1.7; color: var(--text-2); }

  /* 表格 → 卡片列表（data-table / pricing-table）
     Web 端是真实 table/tr/td；编译端已塌缩为 view + TABLE_SEMANTIC 语义类（.tl-tbl-* / .tl-tr / .tl-td），故双写。
     首列作卡片标题（列表卡范式，去掉表头避免列名重复堆积）。 */
  .m-table { display: block; width: 100%; overflow: visible; white-space: normal; }
  .m-table thead, .m-table .tl-tbl-head { display: none; }
  .m-table tbody, .m-table .tl-tbl-body { display: block; }
  .m-table tr, .m-table .tl-tr { display: block; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
  .m-table td, .m-table .tl-td { display: block; width: auto; border: none; padding: 3px 0; font-size: 14px; line-height: 1.65; color: var(--text-2); word-break: break-all; text-align: left; }
  .m-table tr > td:first-child, .m-table .tl-tr > .tl-td:first-child { font-size: 15px; font-weight: 600; color: var(--text-1); padding-bottom: 6px; }
    /* 多列表格嵌套行内标签（表头在移动端隐藏，靠标签保留列义） */
    .m-table td .m-td-label { display: block; font-size: 12px; font-weight: 600; color: #94a3b8; margin-bottom: 2px; }
    .m-table td .m-tag { margin-top: 0; }

  /* 表单（联系我们等内页表单；16px 防 iOS 聚焦自动缩放，48px 触控热区） */
  .m-form .form-group { margin-bottom: 14px; }
  .m-form label { display: block; font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 8px; }
  .m-form input, .m-form textarea, .m-form select { width: 100%; box-sizing: border-box; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: #fff; font-size: 16px; color: var(--text-1); font-family: inherit; }
  .m-form input, .m-form select { height: 48px; padding: 0 14px; }
  .m-form textarea { min-height: 120px; padding: 12px 14px; line-height: 1.6; resize: vertical; }

  /* 文档正文（docs / compliance-whitepaper） */
  .m-doc { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); font-size: 15px; line-height: 1.8; color: var(--text-2); overflow-wrap: anywhere; }
  .m-doc h2 { font-size: 18px; font-weight: 700; color: var(--text-1); margin: 20px 0 10px; }
  .m-doc h3 { font-size: 16px; font-weight: 700; color: var(--text-1); margin: 18px 0 8px; }
  .m-doc h4 { font-size: 15px; font-weight: 600; color: var(--text-1); margin: 14px 0 6px; }
  .m-doc h2:first-child, .m-doc h3:first-child, .m-doc h4:first-child { margin-top: 0; }
  .m-doc p { margin-bottom: 10px; overflow-wrap: anywhere; }
  .m-doc ul, .m-doc ol { padding-left: 20px; margin-bottom: 12px; }
  .m-doc li { margin-bottom: 6px; }
  .m-doc pre { overflow-x: auto; background: #0f172a; color: #e2e8f0; padding: 12px; border-radius: 10px; font-size: 13px; line-height: 1.7; margin-bottom: 12px; -webkit-overflow-scrolling: touch; }
  .m-doc code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; }

  /* 时间线（模型更新日志） */
  .m-time { display: flex; flex-direction: column; gap: 10px; }
  .m-time-item { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow-sm); }
  .m-time-date { display: inline-block; font-size: 12px; font-weight: 600; color: var(--brand-blue); background: var(--color-info-bg); padding: 2px 10px; border-radius: var(--radius-full); margin-bottom: 8px; }
  .m-time-title { font-size: 15px; font-weight: 600; color: var(--text-1); margin-bottom: 6px; }
  .m-time-text { font-size: 14px; line-height: 1.7; color: var(--text-2); }
  
    /* 定价卡（计费规则移动档） */
  .m-price-list { display: flex; flex-direction: column; gap: 12px; }
  .m-price { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
  .m-price--featured { border-color: var(--brand-blue); box-shadow: 0 0 0 1px var(--brand-blue), var(--shadow-sm); }
  .m-price-title { font-size: 16px; font-weight: 700; color: var(--text-1); margin-bottom: 6px; }
  .m-price-amount { font-size: 22px; font-weight: 800; color: var(--brand-blue); margin-bottom: 12px; }
  .m-price-amount small { font-size: 13px; font-weight: 500; color: var(--text-2); }
  .m-price-feats { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
  .m-price-feat { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
  .m-price-feat i { color: #16a34a; font-size: 13px; }

  /* 标签筛选行（模型列表） */
  .m-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .m-tag--on { background: var(--brand-blue); color: #fff; }
  .m-tag--ok { background: rgba(22, 163, 74, 0.12); color: #16a34a; }
  .m-tag--wait { background: rgba(100, 116, 139, 0.12); color: #64748b; }

  /* ===== 用户中心（member / user-center 移动档） =====
     结构完全复用 PC 档（保留 20 个 tab 面板、全部表格 id、.member-nav-item+data-tab 协议 ——
     这些是 user_center 模块 injectMemberTabs / injectMemberData 的编译契约锚点，动了就会让小程序/App 功能失效）；
     移动化只由本块完成：金刚区 + 吸顶横滑 Tab 条 + 单列内容 + 表格卡片化 + 触控热区。
     ⚠️ 选择器一律以 .m-member 开头（编译端只保留 div 的 class；标签选择器在 WXSS 会失配）。
     ⚠️ 表格同时写「标签选择器」(tr/td) 与「语义类选择器」(.tl-tr/.tl-td)：
        Web 端是真实 table 标签，编译端已被塌缩为 view + TABLE_SEMANTIC 语义类。
     ⚠️ sticky 偏移取 130px = 移动端固定顶栏（两行 grid）实测高度，避免 Tab 条被顶栏遮挡。 */
  .m-member { background: var(--bg-page); }

  /* 顶部标题（紧凑内页头；固定顶栏已占位） */
  .m-member .member-header { padding: 130px 0 18px; }
  .m-member .member-header h1 { font-size: 22px; }
  .m-member .member-header p { font-size: 13px; line-height: 1.6; }

  /* 金刚区（4 列图标入口；按钮复用 .member-nav-item 协议）
     ⚠️ 必须用 flex+wrap + 子项 flex-basis 定宽，不可用 display:grid：
        编译端 cssToWxss 把 grid 降级为 flex-wrap，且只为 > view/navigator/image 生成列宽，
        而金刚区子项是 button（须保留 button 标签才能被 injectMemberTabs 命中）→ 拿不到列宽，
        小程序/App 端 4 格会被内容撑成不齐。flex-basis 在 Web 与编译端计算完全同构。 */
  /* ⚠️ 选择器必须带 .m-member 前缀（0,3,0）：侧栏横滑条规则 .m-member .member-nav-item（0,2,0）
     在文件更靠后，不清升特异性会把金刚区按钮的 flex 覆盖为 0 0 auto（四列塔成内容宽）。 */
  .m-member .m-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; background: #fff; border-bottom: 1px solid var(--border-color); }
  /* 24px = 3 × 8px gap，四列等分 */
  .m-member .m-quick .member-nav-item { flex: 0 0 calc((100% - 24px) / 4); box-sizing: border-box; flex-direction: column; justify-content: center; gap: 6px; min-height: 76px; padding: 6px 2px; border: none; background: transparent; font-size: 12px; color: var(--text-2); }
  .m-member .m-quick .member-nav-item i { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--brand-blue); background: var(--color-info-bg); }
  .m-member .m-quick .member-nav-item.active i { background-color: var(--brand-blue); background-image: var(--brand-gradient); color: #fff; }
  .m-member .m-quick .member-nav-item:active { opacity: .72; }

  /* 主体：单列（去掉 280px 侧栏栅格） */
  .m-member .member-container { display: block; grid-template-columns: 100%; gap: 0; padding: 0; max-width: 100%; }

  /* 侧栏 → 吸顶横滑 Tab 条（同时容纳头像卡：user-center 档自带头像信息） */
  .m-member .member-sidebar { position: sticky; top: 130px; z-index: 90; padding: 8px 0; border-radius: 0; box-shadow: 0 2px 10px rgba(29,33,41,0.06); border-bottom: 1px solid var(--border-color); background: rgba(255,255,255,0.98); }
  .m-member .member-avatar-wrap { display: flex; align-items: center; gap: 12px; text-align: left; padding: 0 14px 8px; margin-bottom: 0; }
  .m-member .member-avatar { width: 48px; height: 48px; font-size: 20px; margin: 0; flex: 0 0 auto; }
  .m-member .member-name { font-size: 16px; margin: 0 0 2px; }
  .m-member .member-email { font-size: 12px; margin: 0; }
  .m-member .member-role { margin-left: auto; flex: 0 0 auto; }
  .m-member .member-nav { flex-direction: row; gap: 8px; overflow-x: auto; padding: 0 14px 2px; box-sizing: border-box; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .m-member .member-nav::-webkit-scrollbar { display: none; }
  .m-member .member-nav-item { flex: 0 0 auto; min-height: 44px; padding: 0 14px; border-radius: var(--radius-full); border: 1px solid var(--border-color); background: var(--bg-page); font-size: 13px; white-space: nowrap; }
  .m-member .member-nav-item.active { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
  .m-member .member-nav-item i { font-size: 14px; }

  /* 主内容区（单列卡片流；解除 PC 档的视口内滚动，交还页面级滚动） */
  .m-member .member-main { padding: 14px; gap: 14px; max-height: none; overflow: visible; }
  .m-member .member-card { padding: 16px 14px; border-radius: var(--radius-lg); box-shadow: none; border: 1px solid var(--border-color); }
  .m-member .member-card-title { font-size: 16px; margin-bottom: 14px; }
  .m-member .member-card-title-flex { flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .m-member .member-card-title-flex h3 { font-size: 16px; }

  /* 统计卡 2 列 + 触控热区 */
  .m-member .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .m-member .stat-card { padding: 14px; border-radius: var(--radius-lg); box-shadow: none; border: 1px solid var(--border-color); }
  .m-member .stat-value { font-size: 20px; }
  .m-member .form-row, .m-member .profile-row { grid-template-columns: 1fr; }
  .m-member .form-input { height: 46px; font-size: 16px; }
  .m-member .btn { min-height: 44px; }

  /* 表格 → 卡片列表（Web: table/tr/td；编译端: view + .tl-* 语义类） */
  .m-member .member-table { display: block; width: 100%; overflow: visible; white-space: normal; }
  .m-member .member-table thead, .m-member .member-table .tl-tbl-head { display: none; }
  .m-member .member-table tbody, .m-member .member-table .tl-tbl-body { display: block; }
  .m-member .member-table tr, .m-member .member-table .tl-tr { display: block; background: #fff; border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
  .m-member .member-table td, .m-member .member-table .tl-td { display: block; width: auto; border: none; padding: 3px 0; font-size: 13px; color: var(--text-2); word-break: break-all; text-align: left; }

  /* 弹窗与分页：移动档全宽化 */
  .m-member .modal { width: 94%; max-width: 94%; padding: 18px 16px; border-radius: 16px; }
  .m-member .modal-actions { flex-wrap: wrap; }
  .m-member .pagination { justify-content: center; }

  /* ===== 小屏细化（480 媒体查询） =====
     Web 端 ≤480px 生效；编译端 cssToWxss.unwrapMediaBlocks 会把 ≤1200 档的 @media 展开为
     「无条件规则」（小程序视口恒为移动视口），故这些值在小程序/App 端全宽度同样生效。
     真实手机 Web 视口几乎全 ≤480px（iPhone 15 Pro Max=430px），故两端取值天然一致。 */
  @media (max-width: 480px) {
    .m-hero { padding: 126px 0 28px; }
    .m-hero-title { font-size: 24px; }
    .m-kk-item { width: 62px; }
    .m-kk-ico { width: 42px; height: 42px; font-size: 19px; }
    .m-scard { width: 78%; }
    .m-card, .m-scard, .m-li { padding: 14px; }
    .m-member .member-header h1 { font-size: 20px; }
    .m-member .m-quick .member-nav-item { min-height: 70px; font-size: 11px; }
    .m-member .m-quick .member-nav-item i { width: 40px; height: 40px; font-size: 18px; }
    .m-member .member-main { padding: 12px; }
    .m-li, .m-step, .m-time-item, .m-faq-item, .m-card, .m-doc { padding: 14px; }
    .m-table td, .m-table .tl-td { font-size: 13px; }
    .m-page-head { padding: 126px 0 16px; }
    .m-page-title { font-size: 21px; }
  }
/*@tl-pack:web:mobile:end@*/
