style: 切换为现代 SaaS Dashboard 风格（Linear/Vercel/Notion 风）

- 调色板：zinc 中性色 + 冷静蓝色（#3b82f6）+ 卡片阴影 token
- Sidebar：紧凑 60 宽度，加入顶部搜索框，分组导航，圆角 8px
- 卡片：rounded-2xl + shadow-sm/md，留白节奏统一
- 表格：圆角卡片包裹，灰色表头小写大写字母 tracking
- 表单：h-9 输入框，圆角 8px，focus ring 用半透明蓝
- 按钮分级：实心蓝（主操作）/ 边框白底（次操作）/ 暗黑实心（对比强调）
- 状态徽章：ring-1 inset 内边框，色板更柔和

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

apps/web/components/product/RequirementStatusBadge.tsx

@@ -7,41 +7,19 @@ 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',
-  },
+const STATUS_STYLES: Record<RequirementStatus, string> = {
+  [RequirementStatus.DRAFT]: 'bg-zinc-100 text-zinc-700 ring-zinc-200',
+  [RequirementStatus.REVIEWING]: 'bg-blue-50 text-blue-700 ring-blue-200',
+  [RequirementStatus.APPROVED]: 'bg-emerald-50 text-emerald-700 ring-emerald-200',
+  [RequirementStatus.REJECTED]: 'bg-red-50 text-red-700 ring-red-200',
+  [RequirementStatus.DELIVERED]: 'bg-violet-50 text-violet-700 ring-violet-200',
 };
 
 export function RequirementStatusBadge({ status }: Props) {
-  const style = STATUS_STYLES[status];
   return (
     <span
-      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium ${style.bg} ${style.text}`}
+      className={`inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-medium ring-1 ring-inset ${STATUS_STYLES[status]}`}
     >
-      <span className={`h-1.5 w-1.5 rounded-full ${style.dot}`} />
       {REQUIREMENT_STATUS_LABEL[status]}
     </span>
   );