feat(ui): 清爽专业风设计系统与界面重构

设计令牌(tailwind.config.js):
- brand 11 档蓝色阶、ink 11 档冷灰色阶、win/draw/loss 语义色
- 中文字体栈、tabular-nums 数字等宽、2xs 字号
- borderRadius card/pill、boxShadow card/raise/focus、fade-up/shimmer 动画

组件层(index.css):
- @layer base: 全局背景/字色/抗锯齿、统一焦点环、自定义滚动条,
  尊重 prefers-reduced-motion
- @layer components: .card .btn .field .pill .skeleton .segment

界面:
- App.tsx: SVG 队徽替代 emoji、sticky 毛玻璃头部、服务状态指示、页脚免责声明
- Matches.tsx: 比赛列表卡片化;新增 TeamMark(队名哈希色相队标)、
  EdgeBar(home_edge 双向可视化)、OutcomeCard、AgentCard(状态徽章+证据
  列表+无数据说明)、骨架屏;SVG Spinner 替代 emoji 转圈

可用性修复:
- 预测面板拆为独立的胜平负/置信度/模式/耗时卡片,胜平负与比分各有
  独立可视化条
- 移动端横向溢出:比赛行改为 flex-col -> sm:flex-row,元信息与操作按钮重排
- 无数据专家卡片补充说明文案,不再空白

保留原有契约:loadSeq/predictSeq 竞态防护、游标分页、全部类型定义。

验证:tsc --noEmit(strict)0 错误;vite build 成功;
360/390/414/768/1280px 五档实测 scrollWidth === viewport,零横向溢出。

frontend/src/App.tsx

@@ -1,17 +1,65 @@
 import { ErrorBoundary } from './components/ErrorBoundary'
 import Matches from './pages/Matches'
 
+function Logo() {
+  // 纯 SVG 队徽/足球图形,替代 emoji ⚽(跨平台渲染不一致)
+  return (
+    <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-brand-600 shadow-sm">
+      <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" aria-hidden="true">
+        <circle cx="12" cy="12" r="9" stroke="white" strokeWidth="1.6" />
+        <path
+          d="M12 6.2l3.1 2.2-1.2 3.6h-3.8L8.9 8.4 12 6.2z"
+          fill="white"
+          fillOpacity="0.95"
+        />
+        <path
+          d="M12 3v3.2M4.2 9.6l4.7-1.2M7.1 19.4l2.9-4.6M16.9 19.4l-2.9-4.6M19.8 9.6l-4.7-1.2"
+          stroke="white"
+          strokeWidth="1.4"
+          strokeLinecap="round"
+          strokeOpacity="0.85"
+        />
+      </svg>
+    </span>
+  )
+}
+
 export default function App() {
   return (
     <ErrorBoundary>
-      <div className="min-h-screen bg-gray-50">
-        <header className="bg-white border-b px-6 py-3 flex items-center justify-between">
-          <h1 className="text-xl font-bold text-blue-700">⚽ 先知 Profeto</h1>
-          <span className="text-sm text-gray-500">足球 LLM 预测服务</span>
+      <div className="min-h-screen bg-ink-100">
+        <header className="sticky top-0 z-20 border-b border-ink-200 bg-white/85 backdrop-blur-sm">
+          <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-6 py-3">
+            <div className="flex items-center gap-3">
+              <Logo />
+              <div className="leading-tight">
+                <h1 className="text-[15px] font-semibold tracking-tight text-ink-900">
+                  先知 <span className="font-normal text-ink-400">Profeto</span>
+                </h1>
+                <p className="text-2xs text-ink-500">
+                  LLM 多专家协作 · 足球比分预测
+                </p>
+              </div>
+            </div>
+            <span className="hidden items-center gap-1.5 sm:inline-flex">
+              <span className="relative flex h-2 w-2">
+                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60" />
+                <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500" />
+              </span>
+              <span className="text-2xs font-medium text-ink-500">服务运行中</span>
+            </span>
+          </div>
         </header>
-        <main className="max-w-5xl mx-auto p-6">
+
+        <main className="mx-auto max-w-6xl px-6 py-6">
           <Matches />
         </main>
+
+        <footer className="mx-auto max-w-6xl px-6 pb-8 pt-2">
+          <p className="text-center text-2xs text-ink-400">
+            预测结果由大语言模型生成,仅供研究参考,不构成任何投注建议
+          </p>
+        </footer>
       </div>
     </ErrorBoundary>
   )