[阶段9] 界面打磨：hero 圆环、sparkline、骨架屏、动效

参考了 itsdrchen/Garmin-AI-Coach 与主流健康 App（Apple 活动圆环、
Oura/Whoop 的评分环、Garmin Connect 的卡内趋势）的做法。

hero 区（每个视图只有一个 hero 数字）:
- 步数目标圆环，超额时转为 status-good 色并保持满环 + 端点标记，
  而不是绕第二圈 —— 绕圈会让 101% 看起来比 100% 还少
- 圆环轨道用填充色同色系的浅阶而非中性灰，两者才读作同一个量器

sparkline（12 点，卡片内嵌）:
- 线用去强调色，只有最新一点用强调色，让它成为数字的背景而非对手
- null 处断开而不插值 —— 设备没记录的那天连一条平线过去等于编数据

骨架屏取代转圈:
- 形状与将要出现的内容一致，数据到位时布局不跳
- 用扫光而非闪烁，读起来像进度而不是元素在求关注

动效:
- 卡片/图表依次入场（45ms 递增），引导视线扫过而不是整屏同时砸下来
- 数字滚动到位、圆环扫过、sparkline 描线、悬停抬升、按下微缩
- 全部尊重 prefers-reduced-motion：直接跳过而非缩短时长 ——
  引起不适的是位移本身，不是它持续多久

深色改为冷调（借鉴参考项目）:
- 表面从暖近黑 #1a1a19 改为冷近黑 #181b21，更像运动 App
- 换表面意味着原有校验作废，已用校验器对新表面重跑：四个系列色
  全部通过含 3:1 对比度；文字亦逐个复核（正文 14.56:1、
  次要 7.98、弱化 4.38、按钮白字 6.63）

fix(a11y): 大号独立数字不应使用 tabular-nums
- 等宽数字让每个字形都占 0 的宽度，大字号下显得松散；
  等宽只保留给需要纵向对齐的表格列与坐标轴刻度

fix: 数字滚动动画吞掉了小数位
- StatTile 内部按 decimals 格式化，而调用方已经先 round 过一次，
  距离显示成 "9 km"、久坐成 "11 小时"。改为传原值 + decimals

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

client/src/pages/Daily.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { apiClient, Activity, errorMessage, HealthDay } from '../services/api';
+import Skeleton from '../components/Skeleton';
 import './Daily.css';
 import './Pages.css';
 
@@ -198,7 +199,7 @@ function Daily() {
       </header>
 
       {error && <div className="error-message">{error}</div>}
-      {loading && <div className="page-loading">加载中…</div>}
+      {loading && <Skeleton count={8} variant="row" />}
 
       {!loading && !error && !day && (
         <div className="empty-state">