style: 重做整体视觉系统（编辑设计 × 建筑精度）

- Fraunces 衬线 display + DM Sans body + JetBrains Mono 数字标签
- 暖米白主题（#f7f4ee）+ 蓝色强调色（#2563eb）
- 引入 lucide-react 图标库替代 emoji
- Sidebar 加入编号索引、Logo、用户区域、杂志风分组标题
- 产品列表页加入大号 display 标题、搜索、卡片悬浮动画
- 产品详情页面包屑、tab 编号、需求表格重做
- 状态徽章改为色点 + 文字，"已拒绝"用红色避免与"评审中"冲突
- 全局加入 grain 噪点纹理、入场交错动画

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/components/product/RequirementStatusBadge.tsx

@@ -1,15 +1,47 @@
 'use client';
 
 import { RequirementStatus } from '@ftb/shared';
-import { REQUIREMENT_STATUS_LABEL, REQUIREMENT_STATUS_COLOR } from '@/lib/constants';
+import { REQUIREMENT_STATUS_LABEL } from '@/lib/constants';
 
 interface Props {
   status: RequirementStatus;
 }
 
+const STATUS_STYLES: Record<RequirementStatus, { bg: string; text: string; dot: string }> = {
+  [RequirementStatus.DRAFT]: {
+    bg: 'bg-[var(--line-soft)]',
+    text: 'text-[var(--ink-soft)]',
+    dot: 'bg-[var(--ink-muted)]',
+  },
+  [RequirementStatus.REVIEWING]: {
+    bg: 'bg-blue-50',
+    text: 'text-blue-700',
+    dot: 'bg-blue-500',
+  },
+  [RequirementStatus.APPROVED]: {
+    bg: 'bg-emerald-50',
+    text: 'text-emerald-700',
+    dot: 'bg-emerald-500',
+  },
+  [RequirementStatus.REJECTED]: {
+    bg: 'bg-red-50',
+    text: 'text-red-700',
+    dot: 'bg-red-500',
+  },
+  [RequirementStatus.DELIVERED]: {
+    bg: 'bg-purple-50',
+    text: 'text-purple-700',
+    dot: 'bg-purple-500',
+  },
+};
+
 export function RequirementStatusBadge({ status }: Props) {
+  const style = STATUS_STYLES[status];
   return (
-    <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${REQUIREMENT_STATUS_COLOR[status]}`}>
+    <span
+      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium ${style.bg} ${style.text}`}
+    >
+      <span className={`h-1.5 w-1.5 rounded-full ${style.dot}`} />
       {REQUIREMENT_STATUS_LABEL[status]}
     </span>
   );