/* =========================================================
   mobile-app.css · 策略面板移动端统一层（2026-09-19）
   适用：/5u/ /50u/ /100u/ /growth/ 四个自包含面板
   依赖：tokens.css → glass.css → tabbar.css → 本文件
   激活方式：mobile-app.js 在 ≤860px 时给 body 加 .glass-app
   ========================================================= */

/* ===== 顶部毛玻璃导航栏（仅移动端显示） ===== */
.g-topbar{display:none}
body.glass-app .g-topbar{
  display:flex;align-items:center;gap:10px;
  position:sticky;top:0;z-index:1100;
  margin:0 -14px;padding:calc(env(safe-area-inset-top,0px) + 8px) 14px 8px;
  background:var(--mat-regular-bg,rgba(249,249,249,.72));
  -webkit-backdrop-filter:var(--mat-regular-blur,saturate(180%) blur(20px));
  backdrop-filter:var(--mat-regular-blur,saturate(180%) blur(20px));
  box-shadow:0 .5px 0 var(--glass-hairline,rgba(60,60,67,.10));
}
.g-topbar .g-tb-mark{
  width:32px;height:32px;border-radius:9px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#007AFF,#5E5CE6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.g-topbar .g-tb-name{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.g-topbar .g-tb-sub{font-size:10px;color:var(--sub,#8A8A8A);font-weight:500}
.g-topbar .g-tb-home{
  margin-left:auto;width:34px;height:34px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--sub,#8A8A8A);text-decoration:none;
  background:var(--mat-thin-bg,rgba(255,255,255,.55));
  -webkit-backdrop-filter:var(--mat-thin-blur,saturate(160%) blur(12px));
  backdrop-filter:var(--mat-thin-blur,saturate(160%) blur(12px));
  border:1px solid var(--glass-card-border,rgba(255,255,255,.65));
  transition:transform .18s var(--ios-spring,cubic-bezier(.32,.72,.24,1)),opacity .18s ease;
}
.g-topbar .g-tb-home:active{transform:scale(.92);opacity:.7}
.g-topbar .g-tb-home svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ===== 页内锚点导航 · 玻璃芯片横滑条（仅移动端显示） ===== */
.g-anchors{display:none}
body.glass-app .g-anchors{
  display:flex;gap:6px;
  position:sticky;z-index:1090;
  top:calc(env(safe-area-inset-top,0px) + 49px);
  margin:0 -14px;padding:8px 14px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  background:var(--mat-regular-bg,rgba(249,249,249,.72));
  -webkit-backdrop-filter:var(--mat-regular-blur,saturate(180%) blur(20px));
  backdrop-filter:var(--mat-regular-blur,saturate(180%) blur(20px));
  box-shadow:0 .5px 0 var(--glass-hairline,rgba(60,60,67,.10));
}
body.glass-app .g-anchors::-webkit-scrollbar{display:none}
.g-anchors .g-anchor{
  flex:none;display:inline-flex;align-items:center;gap:5px;
  padding:7px 13px;border-radius:999px;text-decoration:none;
  font-size:12px;font-weight:600;color:var(--text,#1A1A1A);
  background:var(--mat-thin-bg,rgba(255,255,255,.55));
  border:1px solid var(--glass-card-border,rgba(255,255,255,.65));
  transition:transform .18s var(--ios-spring,cubic-bezier(.32,.72,.24,1)),opacity .18s ease;
}
.g-anchors .g-anchor:active{transform:scale(.94);opacity:.7}
.g-anchors .g-anchor svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ===== 移动端激活时的全局修正 ===== */
@media(max-width:860px){
  /* 旧侧栏（已沉底的应用内菜单）整体退役，由顶部栏+锚点条+全局 TabBar 取代 */
  body.glass-app nav.sidebar{display:none!important}
  /* 横向溢出硬保险（表格等内部滚动不受影响） */
  body.glass-app{overflow-x:hidden}
  /* 底部留出全局 TabBar 空间（覆盖各页自带的 84px 预留） */
  body.glass-app{padding-bottom:calc(var(--tabbar-h,49px) + env(safe-area-inset-bottom,0px) + 12px)!important}

  /* 触控热区（iOS HIG ≥44px） */
  body.glass-app button,
  body.glass-app .btn,
  body.glass-app select,
  body.glass-app input[type="submit"]{min-height:44px}
  body.glass-app input,body.glass-app select{font-size:16px} /* 防 iOS 聚焦自动放大 */

  /* 表格统一横滑 */
  body.glass-app table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  body.glass-app table thead,body.glass-app table tbody{display:table;width:100%;min-width:560px}

  /* 卡片圆角与阴影统一到 iOS 节奏 */
  body.glass-app .card,
  body.glass-app section{border-radius:var(--r-16,16px)}

  /* 模态框适配窄屏 */
  body.glass-app .modal{width:min(92vw,380px);max-height:82vh;overflow-y:auto}
}

/* ===== 底部全局 TabBar 的空间兜底（hub 三页以外，tabbar.css 的 body padding 已含） ===== */