[阶段10] 前端以 Framework7 重建，采用 iOS 原生形态

按要求废弃手写外壳，改用 Framework7 React（theme=ios）。参照 PeakWatch
的信息架构与卡片语言。

保留（这些是资产，不该重来）:
- 数据层 services/api.ts、聚合 lib/aggregate.ts、参考区间 lib/ranges.ts
- 图表组件 Chart / Ring / Sparkline / BandBar / MetricCard / MetricStrip
- 经校验的配色令牌（色盲安全 + 对比度，浅深两档）

替换:
- 路由与外壳交给 F7：五个 Tab 各自独立导航栈，推入详情页不影响其他 Tab
- 页面转场、橡皮筋滚动、大标题折叠、半透明栏 —— 这些正是换框架的理由，
  手写做不像
- 底部标签栏改用 F7 Toolbar，触控目标与安全区由框架处理

配色接入:
- 新增 f7theme.css 把我们的令牌映射到 F7 的 CSS 变量，让它的导航栏/
  列表/面板与我们的图表同属一套设计，而不是两种视觉打架
- F7 的深色靠 .dark 类，我们的靠 data-theme，两者在 App 里同步切换

fix: 图标显示为原始名称（squ/hea/cale…）
- iconIos/iconMd 引用的是 framework7-icons 字体，没装就只会渲染出名字

其他:
- tsconfig moduleResolution 改为 bundler —— F7 用 exports 映射，
  node 解析方式找不到它的类型
- 登录页不套 Tab 外壳，未登录时不该出现导航

桌面与手机都要好看：内容在宽屏收进 1100px 居中列并加密卡片列数，
窄屏走底部标签栏；两档都已实机核对。

bundle 190KB -> 399KB，是换取原生手感的代价。

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

client/src/pages/Today.css

@@ -0,0 +1,104 @@
+/* Hero -------------------------------------------------------------------- */
+.hero {
+  display: flex;
+  align-items: center;
+  gap: 1.75rem;
+  padding: 1.5rem 1.75rem;
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  box-shadow: var(--shadow);
+  margin-bottom: 1.75rem;
+  animation: hero-in 0.5s var(--ease) both;
+}
+
+@keyframes hero-in {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: none; }
+}
+
+/* The one hero figure on the view. Proportional figures, and the app's own
+   sans — a display face here would read as decoration rather than data. */
+.hero-value {
+  font-size: 2.6rem;
+  font-weight: 660;
+  line-height: 1;
+  color: var(--text-primary);
+  letter-spacing: -0.02em;
+}
+
+.hero-caption {
+  font-size: 0.76rem;
+  color: var(--text-muted);
+}
+
+.hero-facts {
+  flex: 1;
+  min-width: 0;
+}
+
+.hero-headline {
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 0.9rem;
+}
+
+.hero-list {
+  display: flex;
+  gap: 2rem;
+  margin: 0;
+  flex-wrap: wrap;
+}
+
+.hero-list dt {
+  font-size: 0.74rem;
+  color: var(--text-muted);
+  margin-bottom: 0.2rem;
+}
+
+.hero-list dd {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 620;
+  color: var(--text-primary);
+}
+
+.hero-skeleton {
+  height: 164px;
+  border-radius: 14px;
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  margin-bottom: 1.75rem;
+}
+
+/* Charts ------------------------------------------------------------------ */
+.charts-section {
+  margin-top: 2rem;
+}
+
+.charts-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
+  gap: 1rem;
+}
+
+@media (max-width: 700px) {
+  .hero {
+    flex-direction: column;
+    text-align: center;
+    gap: 1.25rem;
+    padding: 1.5rem 1rem;
+  }
+  .hero-list {
+    justify-content: center;
+    gap: 1.5rem;
+  }
+  .charts-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hero { animation: none; }
+}