fix(ui): 三处实机问题 + hero 改为三圆环

fix: 标题在窄栏里一行一个字
- Framework7 对裸 <button> 有全局样式，把「看数据」按钮拉成整行宽，
  标题/副标题容器被挤成 0 宽，文字只能竖排。给按钮显式 width:auto

fix: 标题旁边有个灰色方块
- 今日页没有右侧动作，但 NavRight 容器仍然渲染并带半透明白底。
  改为有内容才渲染

hero 改为三圆环（步数 / 睡眠 / HRV）:
- 每个环以「进入自己的参考区间」为满环，所以三个环的满度含义一致，
  尽管单位不可比
- 并列而非同心：Apple 的同心环成立是因为三环共享一个概念
  （动/练/站），而这三项是互不相关的度量，分开更好读

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

client/src/pages/Today.css

@@ -1,14 +1,11 @@
 /* Hero -------------------------------------------------------------------- */
 .hero {
-  display: flex;
-  align-items: center;
-  gap: 1.75rem;
-  padding: 1.5rem 1.75rem;
+  padding: 1.35rem 1rem 1.15rem;
   background: var(--surface-1);
   border: 1px solid var(--border);
-  border-radius: 14px;
+  border-radius: 16px;
   box-shadow: var(--shadow);
-  margin-bottom: 1.75rem;
+  margin-bottom: 1.5rem;
   animation: hero-in 0.5s var(--ease) both;
 }
 
@@ -17,59 +14,81 @@
   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;
+.ring-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+}
+
+.ring-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+/* Proportional figures: tabular-nums makes a large standalone number look
+   loose, and these sit at display size inside the rings. */
+.ring-value {
+  font-size: 1.18rem;
   font-weight: 660;
   line-height: 1;
   color: var(--text-primary);
-  letter-spacing: -0.02em;
+  letter-spacing: -0.01em;
 }
 
-.hero-caption {
-  font-size: 0.76rem;
+.ring-unit {
+  font-size: 0.62rem;
   color: var(--text-muted);
 }
 
-.hero-facts {
-  flex: 1;
-  min-width: 0;
+.ring-label {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.ring-goal {
+  font-size: 0.68rem;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.hero-summary {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  margin-top: 1.1rem;
+  padding-top: 0.9rem;
+  border-top: 1px solid var(--border);
 }
 
 .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-size: 0.95rem;
   font-weight: 620;
   color: var(--text-primary);
 }
 
+.hero-aside {
+  font-size: 0.76rem;
+  color: var(--text-muted);
+}
+
 .hero-skeleton {
-  height: 164px;
-  border-radius: 14px;
+  height: 186px;
+  border-radius: 16px;
   background: var(--surface-1);
   border: 1px solid var(--border);
-  margin-bottom: 1.75rem;
+  margin-bottom: 1.5rem;
+}
+
+@media (max-width: 400px) {
+  .hero { padding: 1.15rem 0.6rem 1rem; }
+  .ring-row { gap: 0.25rem; }
+  .ring-value { font-size: 1.02rem; }
+  .ring-goal { font-size: 0.63rem; }
 }
 
 /* Charts ------------------------------------------------------------------ */