/* ============================================================================
   LC LAB Demo · 移动端适配样式（Mobile Contract · v2 液态玻璃 + 漂浮岛屿）
   ----------------------------------------------------------------------------
   · 唯一规范：demo/MOBILE_CONTRACT.md + demo/APPLE_STYLE_V2.md §2.1
   · 所有规则带 html.m 前缀，只在移动模式（html 上加 m 类）生效
   · 只在「固定外壳」（顶栏/tab 岛/sheet/浮层）用 backdrop-filter，
     内容区不做模糊（参照 app.css §20 防闪烁经验）
   · 设计延续「液态玻璃」：白色半透明 + 品牌色 var(--brand-*) + 复用圆角/阴影 token
   · v2：底部 Tab 为漂浮岛屿 + #m-island 滑动选中胶囊 + m-tab-pop 弹簧动效；
     环境光柔阴影；圆角体系（卡 16 / sheet 顶 28 / 岛 30 / 按钮 12-14）；
     顶栏双图标光学统一（21px / stroke 1.7）；身份 sheet 舒适行；纵排 stretch 兜底
   ============================================================================ */

/* ---------- §1 全局：通栏布局 / 触控 / safe-area ---------- */
/* 不覆盖 body 背景：保留桌面壁纸网格渐变，移动端的"玻璃"才有可折射的内容 */
html.m body::before { filter: saturate(1.25); }
html.m * { -webkit-tap-highlight-color: transparent; }
html.m .app {
  height: 100dvh; padding: 0; gap: 0; touch-action: manipulation;
}
html.m .body { gap: 0; }
html.m .main { gap: 0; }
html.m .content-wrap { gap: 0; }
html.m .content {
  padding: 10px 12px calc(96px + env(safe-area-inset-bottom));
}
/* immersive 路由（仅 /C04）在移动端的「仍然继续」态仍需显示内容，
   ctxpanel 已由下方全局规则隐藏，这里不再额外隐藏任何内容区。 */

/* 隐藏桌面外壳部件（DOM 保留，回桌面自动恢复） */
html.m .sidenav,
html.m .crumbbar,
html.m .ctxpanel,
html.m .topbar .searchbox,
html.m .tour.collapsed .tour-pill { display: none !important; }

/* 纵排兜底：内联 align-items:center 在纵排下会水平居中子项（C01 等），强制 stretch */
html.m .row { align-items: stretch !important; }
/* 防“一字一行”通用兜底：flex 行内文本容器必须可收缩 */
html.m .row > *,
html.m .m-kv-r .m-v,
html.m .list-rows .lr > * { min-width: 0; }
/* 内联双列 grid 兜底（防止 /C11 成员与共享等场景挤列） */
html.m [style*="grid-template-columns"] { grid-template-columns: minmax(0,1fr) !important; }
html.m dl.kv, html.m .kv { grid-template-columns: 84px 1fr !important; }

/* ---------- §2.1 顶栏（52px，内容由 mobile.js 重写） ---------- */
html.m .topbar {
  height: 52px; flex: 0 0 52px; border-radius: 0;
  padding: 0 8px; gap: 4px;
  background: rgba(255,255,255,.60) !important;   /* 中和任何内联透明化 */
  -webkit-backdrop-filter: saturate(200%) blur(28px) !important;
  backdrop-filter: saturate(200%) blur(28px) !important;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 1px 12px rgba(31,38,64,.06);
}
html.m .topbar .logo,
html.m .topbar .identity,
html.m .topbar .top-actions { display: none !important; }

/* 移动顶栏内部结构（mobile.js 注入） */
html.m .topbar .m-back,
html.m .topbar .m-avatar-btn {
  width: 40px; height: 40px; flex: 0 0 40px; border: 0; border-radius: 11px;
  background: transparent; color: var(--n-600); position: relative;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: background var(--t-1), color var(--t-1), transform 100ms var(--ease-spring);
}
html.m .topbar .m-back:active,
html.m .topbar .m-avatar-btn:active { transform: scale(.92); background: rgba(255,255,255,.7); }
/* 双图标光学统一：同尺寸同描边 */
html.m .topbar .m-back svg,
html.m .topbar .m-avatar-btn svg { width: 21px; height: 21px; display: block; stroke-width: 1.7; }
html.m .topbar .m-mark {
  width: 24px; height: 24px; flex: 0 0 24px; margin-right: 4px; display: flex; align-items: center; justify-content: center;
}
html.m .topbar .m-mark img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 6px; }
html.m .topbar .m-title {
  flex: 1; min-width: 0; text-align: left; font-size: 16px; font-weight: 600; color: var(--n-800);
  letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 1 !important;   /* 中和滚动联动的内联透明 */
}
html.m .topbar .m-top-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
html.m .topbar .m-avatar-btn .dot {
  position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-500); box-shadow: 0 0 0 2px #fff;
}

/* ---------- §2.2 底部漂浮岛屿 Tab 栏 ---------- */
html.m #mtabbar {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  max-width: 420px; margin: 0 auto; z-index: 80;
  height: 58px; padding: 0 6px env(safe-area-inset-bottom);
  display: flex; align-items: stretch;
  border-radius: 30px;
  background: rgba(255,255,255,.50);
  -webkit-backdrop-filter: saturate(200%) blur(28px); backdrop-filter: saturate(200%) blur(28px);
  border: 1px solid rgba(255,255,255,.80);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.35), 0 10px 32px rgba(31,38,64,.16);
}
/* 滑动选中胶囊（mobile.js 驱动 transform/width） */
html.m #mtabbar #m-island {
  position: absolute; top: 6px; bottom: 6px; left: 0; z-index: 0;
  border-radius: 22px;
  background: rgba(91,141,239,.12);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(91,141,239,.16);
  transition: transform 340ms var(--ease-spring), width 340ms var(--ease-spring);
}
html.m #mtabbar .m-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 48px; border: 0; background: transparent; padding: 0;
  color: var(--n-500); position: relative; z-index: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--t-1), transform 120ms var(--ease-spring);
}
html.m #mtabbar .m-tab svg { width: 22px; height: 22px; display: block; }
html.m #mtabbar .m-tab .m-tx { font-size: 10px; line-height: 1; font-weight: 500; letter-spacing: .01em; }
html.m #mtabbar .m-tab.on { color: var(--brand-600); }
html.m #mtabbar .m-tab.on .m-tx { font-weight: 600; }
html.m #mtabbar .m-tab.on svg { animation: m-tab-pop 260ms var(--ease-spring); }
html.m #mtabbar .m-tab .m-badge {
  position: absolute; top: 6px; left: 50%; margin-left: 7px; min-width: 15px; height: 15px;
  padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 9.5px; line-height: 15px; font-weight: 600; text-align: center;
  box-shadow: 0 0 0 1.5px #fff;
}
/* 横屏：岛屿略矮 */
@media (max-height: 500px) {
  html.m #mtabbar { height: 50px; bottom: calc(8px + env(safe-area-inset-bottom)); }
}

/* ---------- §3 卡片化 ---------- */
html.m .m-cards { display: flex; flex-direction: column; gap: 10px; }
html.m .m-card {
  position: relative; padding: 12px 13px; border-radius: 16px;
  background: var(--glass-fill), rgba(255,255,255,.45);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid var(--glass-line);
  box-shadow: 0 1px 2px rgba(20,28,46,.04), 0 10px 30px rgba(31,38,64,.08), inset 0 1px 0 rgba(255,255,255,.75);
  display: flex; flex-direction: column; gap: 8px;
}
html.m .m-card.m-click { cursor: pointer; transition: transform var(--t-1) var(--ease-spring), box-shadow var(--t-1); }
html.m .m-card.m-click:active { transform: scale(.985); box-shadow: 0 2px 6px rgba(20,28,46,.06), 0 12px 32px rgba(31,38,64,.10); }
html.m .m-card.m-total {
  background: linear-gradient(180deg, rgba(91,141,239,.14), rgba(91,141,239,.08));
  border-color: rgba(91,141,239,.28);
}
html.m .m-card.m-warn { border-left: 3px solid var(--warn); }
html.m .m-card.m-dim { border-left: 3px solid var(--n-300); opacity: .82; }
html.m .m-card .m-ck { position: absolute; top: 13px; left: 11px; z-index: 2; }
html.m .m-card .m-ck input { width: 16px; height: 16px; accent-color: var(--brand-600); }
html.m .m-card .m-tt {
  display: flex; align-items: flex-start; gap: 8px; min-height: 20px;
  padding-left: 0;
}
html.m .m-card.has-ck .m-tt { padding-left: 26px; }
html.m .m-card .m-tt-t { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--n-800);
  line-height: 20px; overflow-wrap: anywhere; }
html.m .m-card .m-tt-b { display: flex; gap: 5px; align-items: center; flex: 0 0 auto; max-width: 50%; flex-wrap: wrap; justify-content: flex-end; }
html.m .m-card .m-kv { display: flex; flex-direction: column; gap: 5px; }
html.m .m-card .m-kv-r { display: flex; align-items: baseline; gap: 8px; }
html.m .m-card .m-kv-r .m-l {
  flex: 0 0 auto; font-size: 11.5px; color: var(--n-500); min-width: 64px; max-width: 46%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.m .m-card .m-kv-r .m-v {
  flex: 1; min-width: 0; font-size: 13px; color: var(--n-700); overflow-wrap: anywhere;
}
html.m .m-card .m-kv-r .m-v.m-num {
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap;
}
html.m .m-card .m-kv-r .m-v.m-num.neg { color: var(--danger-fg); }
html.m .m-card .m-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
html.m .m-card .m-card-actions .btn { min-height: 36px; }
html.m .m-sect {
  margin: 6px 0 2px; padding: 9px 12px; border-radius: 9px;
  font-size: 12.5px; font-weight: 600; color: var(--n-700);
  background: rgba(29,36,48,.045); border-left: 3px solid var(--brand-500);
}
html.m .m-card-ft { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 7px;
  border-top: 1px solid rgba(29,36,48,.06); font-size: 11.5px; color: var(--n-500); }

/* 工具栏 / 过滤器 / 分段 横向滚动单行 */
html.m .filters, html.m .inputs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px; }
html.m .filters::-webkit-scrollbar, html.m .inputs::-webkit-scrollbar { display: none; }
html.m .filters > *, html.m .inputs > * { flex: 0 0 auto; }
html.m .filters .input, html.m .filters .select { min-width: 140px; }
/* 内联 width/margin-left:auto 是桌面横排定位，纵排下必须解除（C01 搜索框缩进根因） */
html.m .input-group { width: 100% !important; margin-left: 0 !important; }
html.m .input-group .input { flex: 1; min-width: 0; }
html.m .row > [style] { margin-left: 0 !important; }
/* seg / tabs：灰轨 + 白选中 pill */
html.m .seg { overflow-x: auto; max-width: 100%; scrollbar-width: none;
  background: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 10px; padding: 2px; }
html.m .seg::-webkit-scrollbar { display: none; }
html.m .seg .s { flex: 0 0 auto; height: 30px; border-radius: 8px; font-size: 13px; }
html.m .seg .s.on { background: rgba(255,255,255,.92); box-shadow: 0 1px 2px rgba(20,28,46,.06), 0 4px 10px rgba(31,38,64,.06); }
html.m .tabs { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
html.m .tabs::-webkit-scrollbar { display: none; }
html.m .tabs .tab { flex: 0 0 auto; height: 32px; display: inline-flex; align-items: center; font-size: 13px; }
html.m .chip { height: 32px; }

/* 保留表格（≤4 列）提升行高，确保横向可滚动且 min-width 不被覆盖 */
html.m .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
html.m .table-wrap table.tb { font-size: 13px; max-width: none; }
html.m .table-wrap table.tb th { padding: 9px 8px; }
html.m .table-wrap table.tb td { padding: 10px 8px; min-height: 44px; }
html.m .table-wrap table.tb.dense td { padding: 8px 6px; }

/* ---------- §4 弹层：底部 Sheet ---------- */
html.m .overlay { align-items: flex-end; justify-content: center; padding: 0; }
html.m .overlay.center { align-items: flex-end; justify-content: center; padding: 0; }
html.m .drawer, html.m .modal {
  width: 100vw; max-width: 100vw; height: auto; max-height: 88dvh;
  border-radius: 28px 28px 0 0; border: 0;
  border-top: 1px solid var(--glass-line);
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-4);
  animation: mSheetIn var(--t-3) var(--ease-spring) both;
}
html.m .drawer::before, html.m .modal::before {
  content: ""; display: block; width: 36px; height: 4px; border-radius: 999px;
  background: rgba(29,36,48,.16); margin: 8px auto 4px; flex: 0 0 auto;
}
html.m .drawer { display: flex; flex-direction: column; }
html.m .drawer-hd { padding: 8px 16px 12px; border-bottom: 1px solid rgba(29,36,48,.07); }
html.m .drawer-hd h3 { font-size: 15px; }
html.m .drawer-bd { padding: 14px 16px; }
html.m .drawer-bd .list-rows > *,
html.m .drawer-bd .list-rows .lr { min-height: 52px; }
html.m .drawer-bd .list-rows .im-it { min-height: 60px; }
html.m .drawer-ft {
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(29,36,48,.07);
}
html.m .drawer-ft .btn { flex: 1; height: 44px; }
html.m .modal .m-hd { padding: 8px 20px 12px; font-size: 15px; }
html.m .modal .m-bd { padding: 0 16px 16px; max-height: 68dvh; }
html.m .modal .m-ft {
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(29,36,48,.07);
}
html.m .modal .m-ft .btn { flex: 1; height: 44px; }
html.m .close-x { width: 32px; height: 32px; }

/* 身份切换 sheet 舒适行排版 */
html.m .im-it {
  display: flex; gap: 12px; align-items: center; padding: 12px 16px; min-height: 60px;
  border-top: 1px solid var(--hairline); cursor: pointer;
}
html.m .list-rows .im-it:first-child { border-top: 0; }
html.m .im-it .avatar { width: 40px; height: 40px; flex: 0 0 40px; font-size: 15px; }
html.m .im-it .im-n { font-size: 15px; font-weight: 600; color: var(--n-800);
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
html.m .im-it .im-r { font-size: 12px; color: var(--n-500); margin-top: 2px; }
html.m .im-it .badge { margin-left: auto; }
html.m .im-it.on { background: rgba(91,141,239,.04); }

/* 导览展开态覆盖 */
html.m .tour.open {
  left: 8px; right: 8px; width: auto; max-width: none;
  bottom: calc(78px + env(safe-area-inset-bottom));
}
html.m .tour.open .tour-ft .btn { height: 40px; }
html.m .tour.open .tour-hd .th-min { width: 32px; height: 32px; }

/* toast / idmenu */
html.m #toast, html.m .toast { top: auto; bottom: calc(96px + env(safe-area-inset-bottom)); }
html.m .idmenu { left: 8px; right: 8px; width: auto; top: 60px; }

/* ---------- §6 引导页 ---------- */
html.m .m-gate {
  padding: 34px 20px; border-radius: 16px; text-align: center;
  background: var(--glass-fill), rgba(255,255,255,.5);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255,255,255,.68);
  box-shadow: 0 1px 2px rgba(20,28,46,.04), 0 10px 30px rgba(31,38,64,.08), inset 0 1px 0 rgba(255,255,255,.75);
}
html.m .m-gate .mg-ic { width: 56px; height: 56px; margin: 0 auto 16px; color: var(--brand-500);
  display: flex; align-items: center; justify-content: center;
  background: rgba(91,141,239,.1); border: 1px solid rgba(91,141,239,.18); border-radius: 16px; }
html.m .m-gate .mg-ic svg { width: 28px; height: 28px; }
html.m .m-gate .mg-t { font-size: 17px; font-weight: 600; color: var(--n-800); }
html.m .m-gate .mg-d { font-size: 13px; color: var(--n-600); line-height: 20px; margin: 8px auto 0; max-width: 280px; }
html.m .m-gate .mg-ft { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
html.m .m-gate .mg-ft .btn { width: 100%; height: 44px; }
html.m .m-force {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 10px;
  border-radius: 10px; font-size: 12px; color: var(--warn-fg);
  background: var(--warn-tint); border: 1px solid rgba(233,162,59,.28);
}
html.m .m-force .mf-x { margin-left: auto; border: 0; background: transparent; color: inherit; font-size: 16px;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* ---------- §2.3 「我的」页 ---------- */
html.m .m-acct {
  display: flex; align-items: center; gap: 12px; padding: 15px; border-radius: 16px;
  background: var(--glass-fill), rgba(255,255,255,.5);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255,255,255,.68);
  box-shadow: 0 1px 2px rgba(20,28,46,.04), 0 10px 30px rgba(31,38,64,.08), inset 0 1px 0 rgba(255,255,255,.75);
}
html.m .m-acct .ma-av { width: 48px; height: 48px; border-radius: 50%; color: #fff; font-size: 18px; font-weight: 600;
  flex: 0 0 48px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--brand-500), var(--brand-700));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 3px rgba(17,24,39,.16); }
html.m .m-acct.ma-public .ma-av { background: linear-gradient(160deg, var(--accent-500), var(--accent-700)); }
html.m .m-acct .ma-tx { flex: 1; min-width: 0; }
html.m .m-acct .ma-nm { font-size: 15px; font-weight: 600; color: var(--n-800); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
html.m .m-acct .ma-sub { font-size: 11.5px; color: var(--n-500); margin-top: 2px; overflow-wrap: anywhere; }
html.m .m-acct .ma-go { flex: 0 0 auto; display: flex; align-items: center; gap: 2px;
  font-size: 13px; color: var(--n-500); }
html.m .m-acct .ma-go svg { width: 16px; height: 16px; }
html.m .m-kpis { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
html.m .m-kpi {
  padding: 13px 14px; border-radius: 16px; cursor: pointer;
  background: var(--glass-fill), rgba(255,255,255,.45);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid var(--glass-line);
  box-shadow: 0 1px 2px rgba(20,28,46,.04), 0 10px 30px rgba(31,38,64,.08), inset 0 1px 0 rgba(255,255,255,.75);
  transition: transform var(--t-1) var(--ease-spring);
}
html.m .m-kpi:active { transform: scale(.98); }
html.m .m-kpi.mk-brand { background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(232,240,255,.62)); border-color: rgba(174,200,251,.6); }
html.m .m-kpi .mk-l { font-size: 11px; color: var(--n-500); display: flex; align-items: center; gap: 5px; }
html.m .m-kpi .mk-v { font-size: 20px; line-height: 26px; font-weight: 600; color: var(--n-800);
  letter-spacing: -.02em; white-space: nowrap; margin-top: 4px; }
html.m .m-kpi .mk-v small { font-size: 12px; font-weight: 400; color: var(--n-500); margin-left: 2px; }
html.m .m-kpi .mk-f { font-size: 10.5px; color: var(--n-500); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.m .m-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
html.m .m-grid4 .mg4 {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px;
  border-radius: 12px; background: transparent; border: 0; cursor: pointer; color: var(--n-600);
}
html.m .m-grid4 .mg4:active { background: rgba(255,255,255,.6); }
html.m .m-grid4 .mg4 .mg4-ic { width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; color: var(--brand-600);
  background: rgba(91,141,239,.1); border: 1px solid rgba(91,141,239,.16); }
html.m .m-grid4 .mg4 .mg4-ic svg { width: 20px; height: 20px; }
html.m .m-grid4 .mg4 .mg4-t { font-size: 11px; color: var(--n-700); line-height: 15px; text-align: center; }
html.m .m-list { border-radius: 16px; overflow: hidden;
  background: var(--glass-fill), rgba(255,255,255,.45);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid var(--glass-line);
  box-shadow: 0 1px 2px rgba(20,28,46,.04), 0 10px 30px rgba(31,38,64,.08), inset 0 1px 0 rgba(255,255,255,.75); }
html.m .m-list .ml-g { padding: 10px 14px 5px; font-size: 11px; color: var(--n-500); font-weight: 500; letter-spacing: .04em; }
html.m .m-list .ml-row {
  display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 0 14px;
  border-top: 1px solid rgba(29,36,48,.055); cursor: pointer; color: var(--n-700);
  transition: background var(--t-1);
}
html.m .m-list .ml-row:active { background: rgba(91,141,239,.06); }
html.m .m-list .ml-g + .ml-row { border-top: 1px solid rgba(29,36,48,.055); }
html.m .m-list .ml-ic { width: 22px; height: 22px; color: var(--n-500); flex: 0 0 22px; display: flex; align-items: center; justify-content: center; }
html.m .m-list .ml-ic svg { width: 20px; height: 20px; }
html.m .m-list .ml-t { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.m .m-list .ml-badge-desk {
  flex: 0 0 auto; font-size: 10px; height: 17px; line-height: 15px; padding: 0 6px; border-radius: 5px;
  color: var(--n-500); background: rgba(29,36,48,.05); border: 1px solid rgba(29,36,48,.08);
}
html.m .m-list .ml-chev { color: var(--n-300); display: flex; flex: 0 0 auto; }
html.m .m-list .ml-chev svg { width: 16px; height: 16px; }
html.m .m-foot { padding: 20px 16px 8px; text-align: center; font-size: 11px; color: var(--n-400); line-height: 18px; }
html.m .m-foot b { color: var(--n-500); font-weight: 500; }

/* ---------- §7 排版细节 ---------- */
html.m .page-head { margin: 2px 0 12px; gap: 10px; }
html.m .page-head h1 { font-size: 20px; letter-spacing: -.02em; }
html.m .page-head .sub { font-size: 12px; }
html.m .page-head .actions { width: 100%; margin-left: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
html.m .page-head .actions::-webkit-scrollbar { display: none; }
html.m .page-head .actions > * { flex: 0 0 auto; }
html.m .g3, html.m .g4, html.m .g5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
/* g2 多为内容型双卡（如 J01 动作卡），手机宽度下双列必挤——改单列 */
html.m .g2, html.m .ga { grid-template-columns: minmax(0,1fr); }
/* 内联渐变背景的卡（J01 等）统一回玻璃材质 */
html.m .card[style] {
  background: var(--glass-fill), rgba(255,255,255,.45) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-color: rgba(255,255,255,.68) !important;
}
/* 图标+文本行：文本列必须可收缩，避免标题断行错乱 */
html.m .act-ic { flex: 0 0 auto; }
html.m .act-ic + div { flex: 1; min-width: 0; }
html.m .kpi { padding: 12px 13px; border-radius: 16px; }
html.m .kpi .k-val { font-size: 20px; line-height: 26px; }
html.m .card { border-radius: 16px; }
html.m .card-hd { padding: 9px 12px; min-height: 44px; }
html.m .card-hd h3 { font-size: 15px; }
html.m .card-bd { padding: 12px; }
html.m #content > .card + .card { margin-top: 10px; }
html.m .card + .card { margin-top: 10px; }
html.m .row, html.m .row.resizable, html.m .row:has(> .rs-bar) {
  flex-direction: column; gap: 10px; flex-wrap: nowrap;
}
html.m .row > .rs-bar { display: none; }
html.m .row > .rs-pane { width: auto !important; flex: 0 0 auto !important; }
html.m .side-pane { width: 100%; flex: 1 1 100%; }
html.m .steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
html.m .steps::-webkit-scrollbar { display: none; }
html.m .steps .step, html.m .steps .step-line { flex: 0 0 auto; }
html.m .flow { flex-wrap: wrap; }
html.m .tree .tree-node { min-height: 44px; padding: 8px 10px; }
html.m .tree .tree-children { margin-left: 16px; }
html.m .kv { grid-template-columns: 84px 1fr; }
html.m .lr { padding: 10px 0; }
html.m .list-rows .lr { min-height: 44px; }
html.m .banner { padding: 10px 12px; font-size: 12.5px; }
html.m .banner .acts { flex-wrap: wrap; }
html.m .btn { height: 40px; border-radius: 12px; font-size: 13px; }
html.m .btn-sm { height: 34px; border-radius: 10px; font-size: 12px; }
html.m .btn-lg { border-radius: 14px; font-size: 15px; }
html.m .btn:hover { transform: none; }
html.m .icon-btn { width: 40px; height: 40px; }
html.m .icon-btn svg, html.m .icon-btn .ic { width: 20px; height: 20px; }
html.m .input, html.m .select { height: 40px; border-radius: 12px;
  background: rgba(255,255,255,.5); border-color: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html.m .empty { padding: 30px 18px; }
html.m .checklist .ck { padding: 11px 0; }
html.m .timeline .tl-item { padding-bottom: 14px; }

/* 入场动效减半（手机上快进快出） */
html.m .view-in > * { animation-duration: 230ms; }
html.m .view-in > *:nth-child(2) { animation-delay: 14ms; }
html.m .view-in > *:nth-child(3) { animation-delay: 28ms; }
html.m .view-in > *:nth-child(4) { animation-delay: 42ms; }
html.m .view-in > *:nth-child(5) { animation-delay: 54ms; }
html.m .view-in > *:nth-child(6) { animation-delay: 65ms; }
html.m .view-in > *:nth-child(n+7) { animation-delay: 75ms; }

/* ---------- keyframes ---------- */
@keyframes mSheetIn {
  from { opacity: .5; transform: translate3d(0, 100%, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes m-tab-pop {
  0% { transform: scale(.82); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* 防溢出兜底：内容区不允许横向溢出 */
html.m .content { overflow-x: hidden; max-width: 100vw; }
html.m .content > *, html.m .content * { max-width: 100%; }
html.m .content img, html.m .content svg.ic { max-width: 100%; }
html.m .table-wrap { overflow-x: auto; max-width: 100%; }
html.m .table-wrap table.tb { max-width: none; }