feat(web): 窄屏适配 — 侧栏转底部 tab bar + 各页响应式重排

此前只有一个 max-width:900px 断点（仅缩窄侧栏），手机上 210px 侧栏吃掉
半屏、卡片网格横向溢出、按钮被挤成细条。新增 720px / 380px 两档断点：

App.vue（关键）
- ≤720px：shell 转竖向，导航从侧栏抽出固定到屏幕底部（图标上/文字下），
  品牌+身份+主题折进顶部窄条；tab 最小 44px 触控高度
- 内容区预留 env(safe-area-inset-bottom)，避开 iOS 手势条
- ≤380px 再压一档：隐藏权限徽标、缩小字号

StatusView
- card-grid 的 minmax(320px) 在 375px 屏溢出 → 单列
- KPI 由 auto-fit 改固定两列（auto-fit 窄屏退化单列使四卡拉长），≤380px 单列
- 转发卡 fwd-head 原一行塞 7~8 元素 → 路由占整行、按钮另起一行平分
- 分组标题按钮不再被 margin-left:auto 压扁

ClusterView
- 环拓扑改竖向，节点卡占满宽，箭头旋转 90° 指下
- nodeKey（32 位 hex）允许 break-all，不再撑宽容器
- 日志 lg-detail 由 max-width:60%+nowrap 改整行完整显示

SettingsView / UsersView / CanvasView
- binary-row、setting-row 竖排；表格卡标题行竖排、操作按钮平分
- 画布 toolbar 按钮换行平铺；vue-flow handle 12px→16px（触控可达）

index.html
- viewport 加 viewport-fit=cover，这是 env(safe-area-inset-*) 生效前提

验证：tsc --noEmit 通过、npm run build 通过、dist 已重新 embed，
三节点部署后环正常（pending=0，5 条转发 frpc 进程与 topology 归属一致）。

web/src/App.vue

@@ -363,4 +363,119 @@ const currentLabel = computed(() => nav.value.find((n) => n.key === view.value)?
   .breadcrumb { padding: 12px 16px 6px; }
   .content { padding: 8px 14px 32px; }
 }
+
+/* ---------- narrow screens: sidebar becomes a bottom tab bar ----------
+   窄屏（≤ 720px）下 210px 侧栅会吃掉手机一半宽度，改为：
+   - shell 竖向排列，侧栅沉到底部变成固定 tab bar（图标在上文字在下）
+   - 品牌区/身份区/主题切换折叠进顶部窄条，不占垂直空间
+   - 内容区预留底部安全区 + tab bar 高度，避开 iOS 手势条
+   - 每个 tab 至少 44px 高（触控目标下限） */
+@media (max-width: 720px) {
+  .app-shell {
+    flex-direction: column;
+  }
+
+  /* 顶部窄条：logo + 身份 + 主题，横向排一行 */
+  .sidebar {
+    flex: 0 0 auto;
+    width: 100%;
+    order: -1;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    overflow: visible;
+    border-right: none;
+    border-bottom: 1px solid var(--w4f-line);
+    padding-top: max(10px, env(safe-area-inset-top));
+  }
+  .sb-brand {
+    padding: 0;
+    gap: 8px;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .sb-logo { width: 30px; height: 30px; border-radius: 10px; }
+  .sb-brand-text b { font-size: 14.5px; }
+  .sb-brand-text small { display: none; }
+
+  /* 导航从侧栅里抽出来，固定到底部 */
+  .sb-nav {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 40;
+    flex: none;
+    flex-direction: row;
+    gap: 0;
+    padding: 4px 4px max(4px, env(safe-area-inset-bottom));
+    background: var(--w4f-card);
+    border-top: 1px solid var(--w4f-line);
+    backdrop-filter: blur(calc(var(--w4f-glass) * 0.9)) saturate(1.3);
+    -webkit-backdrop-filter: blur(calc(var(--w4f-glass) * 0.9)) saturate(1.3);
+    box-shadow: 0 -4px 20px rgb(0 0 0 / 6%);
+  }
+  .sb-i {
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 44px;
+    flex-direction: column;
+    justify-content: center;
+    gap: 2px;
+    padding: 5px 2px;
+    border-radius: 11px;
+    font-size: 10.5px;
+    font-weight: 600;
+    text-align: center;
+  }
+  .sb-i .label {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .sb-i.active {
+    /* 底部 tab 不用渐变底，只高亮图标与文字（避免拥挤） */
+    background: var(--w4f-primary-50);
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  /* 身份与主题折进顶条右侧 */
+  .sb-foot {
+    margin-top: 0;
+    padding-top: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 0 0 auto;
+  }
+  .sb-identity {
+    margin-bottom: 0;
+    padding: 5px 8px;
+    font-size: 11.5px;
+    max-width: 42vw;
+  }
+  .sb-identity .id-name { max-width: 14vw; }
+  .sb-theme { margin-bottom: 0; }
+  .sb-theme .sw { width: 22px; height: 22px; border-radius: 7px; }
+
+  .main { height: auto; flex: 1; min-height: 0; }
+  .breadcrumb { padding: 10px 14px 4px; font-size: 14px; }
+  .content {
+    padding: 6px 12px 24px;
+    /* 底部 tab bar（44px + padding）+ 安全区 */
+    padding-bottom: calc(64px + env(safe-area-inset-bottom));
+  }
+}
+
+/* 极窄（≤ 380px，iPhone SE / 小屏安卓）：进一步压缩顶条 */
+@media (max-width: 380px) {
+  .sb-brand-text b { font-size: 13px; }
+  .sb-identity { max-width: 38vw; padding: 4px 7px; }
+  .sb-identity .id-level { display: none; }
+  .sb-i { font-size: 9.5px; }
+  .content { padding-left: 10px; padding-right: 10px; }
+}
 </style>