feat: sync latest OpenVuln frontend

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -9,6 +9,7 @@ RUN pnpm install --frozen-lockfile
 
 COPY index.html postcss.config.js tailwind.config.js tsconfig.json vite.config.ts ./
 COPY src ./src
+COPY public ./public
 ARG VITE_API_BASE_URL=https://openvuln.vulnhunter.pro
 ARG VITE_GITHUB_REPO_URL=https://github.com/Clouditera/OpenVuln
 ENV VITE_API_BASE_URL=$VITE_API_BASE_URL \

package.json

@@ -8,6 +8,9 @@
     "build": "tsc -b && vite build"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource-variable/space-grotesk": "^5.3.0",
+    "@fontsource/ibm-plex-mono": "^5.3.0",
     "@tanstack/react-query": "^5.62.7",
     "js-yaml": "^5.2.3",
     "lucide-react": "^0.469.0",

pnpm-lock.yaml

@@ -8,6 +8,15 @@ importers:
 
   .:
     dependencies:
+      '@fontsource-variable/inter':
+        specifier: ^5.3.0
+        version: 5.3.0
+      '@fontsource-variable/space-grotesk':
+        specifier: ^5.3.0
+        version: 5.3.0
+      '@fontsource/ibm-plex-mono':
+        specifier: ^5.3.0
+        version: 5.3.0
       '@tanstack/react-query':
         specifier: ^5.62.7
         version: 5.101.4(react@18.3.1)
@@ -300,6 +309,15 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@fontsource-variable/inter@5.3.0':
+    resolution: {integrity: sha512-OupL48va4JNofb97w6NYeF9S7W/kHNKM0Er8Dem5nqi4jeOLrVJDoE8tZEpnMJmtkvNbB1EIPPwHcdkF6b1oUA==}
+
+  '@fontsource-variable/space-grotesk@5.3.0':
+    resolution: {integrity: sha512-2IxmvfB08i9vnGB3Ym/AXvhRE+8XOjWMXIyDum03c+tPwH0FUoMNQfGpU8NXPxjbws0Vvss3AH0Zqt4oJBBAdw==}
+
+  '@fontsource/ibm-plex-mono@5.3.0':
+    resolution: {integrity: sha512-eTgnZjZEGk1QtD3ZstF+Vclo2HLAni8YMy34/DxllwZvyz1lR/1RF/xTiAquOBO7MvqBx8D2Ig2WCPMVfdZu7Q==}
+
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -321,6 +339,7 @@ packages:
     engines: {node: ^22.20 || ^24.12 || >=25}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
@@ -375,66 +394,79 @@ packages:
     resolution: {integrity: sha512-81wiiX3v7aqy+T+bT61TJ78yJjRquqFFTTbAPt08imfQQzkPIW8t6aJbkTagtCCrXMNc9D66+geqlK7ydLPNqA==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.62.4':
     resolution: {integrity: sha512-9kmDIvNZqdoHOBZgNtpTBeLWYO/LVipM3H/j62P8848/l/VPEQL6N3uxU9pvP1oZAsXyC2MEnFP3ovRjo7WYNQ==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.62.4':
     resolution: {integrity: sha512-CcnXHWnXg69g+DX5VWL3FHts3qMRN2uVEHX+BZvGLdd07/gXkn3ePjYtO1LDJvxkGKVHMclKBRa1QUTH+6toYQ==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.62.4':
     resolution: {integrity: sha512-iFOibiHnTRuhrWLlRsOQFdZJJIa7S8OwkneJr4ocALP16u5yk6lWLINFwhHaEqBFMsKDUZofLkGos7+CPzGB3g==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.62.4':
     resolution: {integrity: sha512-XnWYMI7euHlb5a871xPja+Gm7DRCFU+FGRrtS2sMq9N8FvqtpagUy6gD4YOemC5MRk9xbh8+jYMEJbigFQwsgA==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-loong64-musl@4.62.4':
     resolution: {integrity: sha512-qGDAlO0U8xedCcsdRm9oaoQY8DAx/QT7uIxJWhCdx0ceIWX783UC9QSYkdpzAe29wNiVfp24+bZdQmn49o45SQ==}
     cpu: [loong64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-ppc64-gnu@4.62.4':
     resolution: {integrity: sha512-ru4H6ezD7ysA5EiEK6qkkaEb4modH8CTej6kUy/gQi20u3kB3G7Zn8snXXkeJSCOFKG/rbPPtM/+9Wgas1961w==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-musl@4.62.4':
     resolution: {integrity: sha512-2W4MO5WQVJnbJaZdvDb9rhBDuFU1nKIepPFpJUBsTh2k1YY2g+ODViaWuyOAjQ5cOP7NvrvLzt3wvHOoiAvc7w==}
     cpu: [ppc64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-riscv64-gnu@4.62.4':
     resolution: {integrity: sha512-+fxjfuoAmVMCYV5QyjoIpu0cp5DOiOTeqYFk1AVaxGr+/ravWLX89XfQmptsoWcaVy/TGf2hexzbUOrCQIL1CQ==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.62.4':
     resolution: {integrity: sha512-jTn8JfHGL4djjFxPuM06LmNUJDsst2jeVlsd9OmIH6zc5sC9K6rIuO4YajXatLUpBmBKl6b35ro1QZocLi+tcA==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.62.4':
     resolution: {integrity: sha512-oCJCJL4pXsoDcP2QZ+JVlPTIRc6266zsIaeJJsWImmF7HO0W8nb6HuSgZlMWxJwaPf8ehbSw8yo0EUw925hKsA==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.62.4':
     resolution: {integrity: sha512-W69hukhZ3KKNRCaMIEzKvcFye42hh0FE1+YoYaf5+Ikacuftoco6yO/xouz0hc5d5W/s3yBro5jRiuEE/Q5vUw==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.62.4':
     resolution: {integrity: sha512-qiXbGG2jkjXhzXpsFZSR2Xpb8DN/UaxYsbb/STbuR/6fpaDgRmmaq1B/LmtF2wQFOFOSsK2jdE0RZ3a0zHn4QA==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-openbsd-x64@4.62.4':
     resolution: {integrity: sha512-nWeM//hxv8mIo6jD7Hu4o48DVmV9pbV6gsKaWU+4NFyqHoPKwrkRiZGLKUhOBk8qNmDmpwFtPKg80Bo/Tn4xiQ==}
@@ -1162,6 +1194,12 @@ snapshots:
   '@esbuild/win32-x64@0.25.12':
     optional: true
 
+  '@fontsource-variable/inter@5.3.0': {}
+
+  '@fontsource-variable/space-grotesk@5.3.0': {}
+
+  '@fontsource/ibm-plex-mono@5.3.0': {}
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5

public/hero-bg.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:22578443c1f297aa6c9271d939f33ab8043bf98deb87f8c75b8a38948d11ee9d
+size 1142870

src/components/AuthButton.tsx

@@ -1,17 +1,17 @@
 import { useEffect, useRef, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { Github, LogOut, ChevronDown, FolderGit2 } from "lucide-react";
-import { navigateToLogin, navigateToLoginPopup, isEmbedded, currentReturnTo } from "../shared/api/client";
+import { navigateToLogin, navigateToLoginPopup, isEmbedded } from "../shared/api/client";
 import { useLogout, useMe } from "../features/auth/useAuth";
 
 /**
  * 顶栏登录态：未登录 = Sign in with GitHub；已登录 = 头像 + 下拉（Logout）。
- * appearance="dark" 用于 zai 深色着陆页头部（与 GitHub pill 同族样式）。
+ * 浅色体系统一样式；appearance prop 仅为调用方兼容保留。
  */
 export function AuthButton({ appearance = "light" }: { appearance?: "light" | "dark" }) {
+  void appearance;
   const meQ = useMe();
   const logoutM = useLogout();
-  const { pathname, search } = useLocation();
   const nav = useNavigate();
   const [open, setOpen] = useState(false);
   const rootRef = useRef<HTMLDivElement>(null);
@@ -34,10 +34,6 @@ export function AuthButton({ appearance = "light" }: { appearance?: "light" | "d
 
   // 加载中/后端未接入 auth：按未登录渲染（不阻塞页面）
   const user = meQ.data?.authenticated ? meQ.data.user : null;
-  const dark = appearance === "dark";
-  // loginUrl for href fallback (non-iframe); navigateToLogin for onClick
-  void pathname; void search;
-
   if (!user) {
     return (
       <button
@@ -47,16 +43,12 @@ export function AuthButton({ appearance = "light" }: { appearance?: "light" | "d
             navigateToLoginPopup();
             window.dispatchEvent(new Event("ov-oauth-popup-opened"));
           } else {
-            navigateToLogin(currentReturnTo());
+            navigateToLogin();
           }
         }}
-        className={
-          dark
-            ? "inline-flex h-9 items-center gap-2 rounded-full border border-[#333] bg-[#030303] px-3.5 text-xs font-medium text-[#acacb0] transition hover:border-[#484a58] hover:bg-[#111216] hover:text-white focus-ring-dark"
-            : "inline-flex h-9 items-center gap-1.5 rounded-md border border-line bg-surface px-3 text-[13px] font-medium text-ink transition-colors hover:bg-surface-sunken focus-ring"
-        }
+        className="inline-flex h-9 items-center gap-2 rounded-full bg-ink px-4 text-[13px] font-medium text-surface transition hover:bg-white focus-ring"
       >
-        <Github size={dark ? 14 : 15} />
+        <Github size={14} />
         Sign in
       </button>
     );
@@ -70,11 +62,7 @@ export function AuthButton({ appearance = "light" }: { appearance?: "light" | "d
         aria-expanded={open}
         aria-haspopup="menu"
         aria-label={`Signed in as ${user.login}`}
-        className={
-          dark
-            ? "flex h-9 items-center gap-1.5 rounded-full border border-[#333] bg-[#030303] p-1 pr-2 transition hover:border-[#484a58] hover:bg-[#111216] focus-ring-dark"
-            : "flex h-9 items-center gap-1 rounded-md border border-line bg-surface p-1 pr-1.5 transition-colors hover:bg-surface-sunken focus-ring"
-        }
+        className="flex h-9 items-center gap-1.5 rounded-full border border-line bg-surface-raised p-1 pr-2 transition-colors hover:border-line-strong hover:bg-surface-sunken focus-ring"
       >
         {user.avatar_url ? (
           <img
@@ -90,22 +78,16 @@ export function AuthButton({ appearance = "light" }: { appearance?: "light" | "d
         )}
         <ChevronDown
           size={13}
-          className={`transition-transform ${dark ? "text-[#77787e]" : "text-ink-tertiary"} ${open ? "rotate-180" : ""}`}
+          className={`text-ink-tertiary transition-transform ${open ? "rotate-180" : ""}`}
         />
       </button>
 
       {open && (
         <div
           role="menu"
-          className={
-            dark
-              ? "absolute right-0 top-full z-40 mt-2 w-44 overflow-hidden rounded-xl border border-[#333] bg-[#111216] shadow-[0_16px_50px_rgba(0,0,0,0.5)]"
-              : "absolute right-0 top-full z-40 mt-1.5 w-44 overflow-hidden rounded-lg border border-line bg-surface shadow-lg"
-          }
+          className="absolute right-0 top-full z-40 mt-2 w-44 overflow-hidden rounded-xl border border-line bg-surface-raised shadow-[0_16px_48px_-12px_rgba(0,0,0,0.7)]"
         >
-          <div
-            className={`border-b px-3.5 py-2.5 text-[13px] font-medium ${dark ? "border-[#26272c] text-[#f0f2f6]" : "border-line text-ink"}`}
-          >
+          <div className="border-b border-line px-3.5 py-2.5 text-[13px] font-medium text-ink">
             {user.login}
           </div>
           <a
@@ -116,11 +98,7 @@ export function AuthButton({ appearance = "light" }: { appearance?: "light" | "d
               setOpen(false);
               nav("/my");
             }}
-            className={`flex w-full items-center gap-2 px-3.5 py-2.5 text-left text-[13px] transition-colors ${
-              dark
-                ? "text-[#acacb0] hover:bg-[#1a1b20] hover:text-white"
-                : "text-ink-secondary hover:bg-surface-sunken hover:text-ink"
-            }`}
+            className="flex w-full items-center gap-2 px-3.5 py-2.5 text-left text-[13px] text-ink-secondary transition-colors hover:bg-surface-sunken hover:text-ink"
           >
             <FolderGit2 size={14} />
             My submissions
@@ -133,11 +111,7 @@ export function AuthButton({ appearance = "light" }: { appearance?: "light" | "d
               logoutM.mutate();
             }}
             disabled={logoutM.isPending}
-            className={`flex w-full items-center gap-2 px-3.5 py-2.5 text-left text-[13px] transition-colors ${
-              dark
-                ? "text-[#acacb0] hover:bg-[#1a1b20] hover:text-white"
-                : "text-ink-secondary hover:bg-surface-sunken hover:text-ink"
-            }`}
+            className="flex w-full items-center gap-2 px-3.5 py-2.5 text-left text-[13px] text-ink-secondary transition-colors hover:bg-surface-sunken hover:text-ink"
           >
             <LogOut size={14} />
             {logoutM.isPending ? "Signing out…" : "Sign out"}

src/components/Button.tsx

@@ -4,11 +4,11 @@ type Variant = "primary" | "secondary" | "ghost" | "danger";
 type Size = "md" | "lg";
 
 const styles: Record<Variant, string> = {
-  // 协作者深色体系：主按钮 = 白底黑字（composer submit 同族）
-  primary: "bg-[#ebecf0] text-[#0d0d0f] hover:bg-white border border-transparent",
-  secondary: "bg-surface-raised text-ink border border-[#333] hover:border-[#484a58] hover:bg-surface-sunken",
+  // 暗色控制台：主按钮 = 亮面（phosphor 白底 + 暗字）
+  primary: "bg-ink text-surface hover:bg-white border border-transparent",
+  secondary: "bg-surface-raised text-ink border border-line hover:border-line-strong hover:bg-surface-sunken",
   ghost: "bg-transparent text-ink-secondary border border-transparent hover:bg-surface-sunken hover:text-ink",
-  danger: "bg-danger text-white hover:bg-[#d63f3f] border border-transparent",
+  danger: "bg-danger text-surface hover:bg-[#ff7d77] border border-transparent",
 };
 
 // 高度集中在 size prop，禁止 className 覆盖高度（Tailwind 同源类冲突靠 CSS 顺序，不可靠）

src/components/ConfirmDialog.tsx

@@ -36,7 +36,7 @@ export function ConfirmDialog({
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-ink/40 p-4"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
       role="dialog"
       aria-modal="true"
       aria-labelledby="confirm-title"

src/components/HeroStats.tsx

@@ -1,115 +0,0 @@
-import { useEffect, useState } from "react";
-import { AlertTriangle, Bug, FolderGit2 } from "lucide-react";
-import type { OverviewStats } from "@/shared/types";
-
-function usePrefersReducedMotion(): boolean {
-  const [reduced, setReduced] = useState(false);
-  useEffect(() => {
-    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
-    setReduced(media.matches);
-    const update = () => setReduced(media.matches);
-    media.addEventListener("change", update);
-    return () => media.removeEventListener("change", update);
-  }, []);
-  return reduced;
-}
-
-function useCountUp(target: number, duration = 650): number {
-  const reduced = usePrefersReducedMotion();
-  const [value, setValue] = useState(reduced ? target : 0);
-  useEffect(() => {
-    if (reduced) {
-      setValue(target);
-      return;
-    }
-    let frame = 0;
-    const start = performance.now();
-    const tick = (time: number) => {
-      const progress = Math.min(1, (time - start) / duration);
-      setValue(Math.round(target * (1 - (1 - progress) ** 3)));
-      if (progress < 1) frame = requestAnimationFrame(tick);
-    };
-    frame = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(frame);
-  }, [duration, reduced, target]);
-  return value;
-}
-
-function AnimatedNumber({ value }: { value: number }) {
-  return <>{useCountUp(value).toLocaleString()}</>;
-}
-
-export function HeroStats({
-  stats,
-  loading = false,
-  failed = false,
-}: {
-  stats: OverviewStats | undefined;
-  loading?: boolean;
-  failed?: boolean;
-}) {
-  const unavailable = loading || failed || !stats;
-  const scannedRepositories = stats
-    ? stats.scanned_project_count ?? Math.min(stats.project_count, stats.scan_completed_count)
-    : 0;
-  const findingTotal = stats?.finding_total ?? 0;
-  const highRiskTotal = stats?.severity_counts?.high ?? 0;
-
-  const metrics = [
-    {
-      label: "Findings",
-      detail: "Discovered issues",
-      value: findingTotal,
-      icon: Bug,
-      color: "text-white",
-      iconClass: "border-white/[0.08] bg-white/[0.05] text-[#b5b6bd]",
-    },
-    {
-      label: "High risk",
-      detail: "High severity findings",
-      value: highRiskTotal,
-      icon: AlertTriangle,
-      color: "text-white",
-      iconClass: "border-white/[0.08] bg-white/[0.05] text-[#b5b6bd]",
-    },
-    {
-      label: "Repositories",
-      detail: "Scanned projects",
-      value: scannedRepositories,
-      icon: FolderGit2,
-      color: "text-white",
-      iconClass: "border-white/[0.08] bg-white/[0.05] text-[#b5b6bd]",
-    },
-  ];
-
-  return (
-    <section aria-labelledby="overview-title" className="openvuln-panel min-w-0 p-5 sm:p-6">
-      <div className="flex items-end justify-between gap-4">
-        <div>
-          <p className="font-mono text-[9px] font-semibold uppercase tracking-[0.18em] text-ink-tertiary">
-            Security overview
-          </p>
-          <h2 id="overview-title" className="mt-2 font-display text-lg font-semibold tracking-tight text-white">
-            Findings at a glance
-          </h2>
-        </div>
-        <span className="mb-1 h-2 w-2 rounded-full bg-white/60" aria-hidden />
-      </div>
-
-      <div className="mt-5 grid grid-cols-3 divide-x divide-white/[0.07]">
-        {metrics.map(({ label, detail, value, icon: Icon, color, iconClass }) => (
-          <div key={label} className="min-w-0 px-3 first:pl-0 last:pr-0 sm:px-5">
-            <div className={`flex h-8 w-8 items-center justify-center rounded-lg border ${iconClass}`} aria-hidden>
-              <Icon size={15} />
-            </div>
-            <p className={`mt-4 font-display text-3xl font-semibold tabular-nums tracking-[-0.04em] sm:text-4xl ${color}`}>
-              {unavailable ? "—" : <AnimatedNumber value={value} />}
-            </p>
-            <p className="mt-2 truncate text-[11px] font-medium text-[#d0d1d5] sm:text-xs">{label}</p>
-            <p className="mt-0.5 hidden text-[10px] leading-4 text-ink-tertiary sm:block">{detail}</p>
-          </div>
-        ))}
-      </div>
-    </section>
-  );
-}

src/components/Layout.tsx

@@ -13,28 +13,36 @@ export function Layout() {
   const isDeck = pathname === "/";
   return (
     <div className="flex min-h-screen flex-col">
-      {!isDeck && <header className="app-shell-chrome sticky top-0 z-30 h-14 border-b border-line bg-surface-header/95 backdrop-blur">
+      {!isDeck && <header className="app-shell-chrome sticky top-0 z-30 h-14 border-b border-line bg-surface/85 backdrop-blur">
         <div className="flex h-full items-center justify-between gap-4 px-5">
           <div className="flex items-center">
             <Link
               to="/"
-              className="font-display text-[17px] font-bold tracking-tight focus-ring rounded-md text-ink"
+              className="flex items-center gap-2.5 rounded-md focus-ring"
             >
-              OpenVuln
+              <img
+                src="/logo.svg"
+                alt=""
+                className="h-7 w-7 shrink-0 rounded-lg"
+                aria-hidden
+              />
+              <span className="font-display text-[15px] font-semibold tracking-tight text-ink">
+                OpenVuln
+              </span>
             </Link>
           </div>
 
           <div className="flex items-center gap-2">
-            <NotificationBell appearance="light" />
-            <AuthButton appearance="light" />
+            <NotificationBell />
+            <AuthButton />
             <a
               href={OWN_REPO}
               target="_blank"
               rel="noreferrer"
-              className="rounded-md p-2 text-ink-secondary hover:bg-surface-sunken hover:text-ink focus-ring"
+              className="flex h-9 w-9 items-center justify-center rounded-full border border-line bg-surface-raised text-ink-secondary transition-colors hover:border-line-strong hover:bg-surface-sunken hover:text-ink focus-ring"
               title="OpenVuln on GitHub"
             >
-              <Github size={18} />
+              <Github size={15} />
             </a>
           </div>
         </div>
@@ -46,7 +54,8 @@ export function Layout() {
 
       {!isDeck && (
       <footer className="app-shell-chrome mt-auto border-t border-line">
-        <div className="flex justify-end px-5 py-6 text-[13px] text-ink-secondary">
+        <div className="flex flex-col gap-2 px-5 py-6 text-[13px] text-ink-secondary sm:flex-row sm:items-center sm:justify-between">
+          <p className="text-ink-tertiary">© 2026 OpenVuln · Powered by VulnHunter</p>
           <div className="flex flex-wrap gap-x-5 gap-y-1">
             <a href={OWN_REPO} target="_blank" rel="noreferrer" className="hover:text-ink">
               GitHub

src/components/NotificationBell.tsx

@@ -21,6 +21,7 @@ function summary(n: NotificationItem): string {
 
 /** 站内通知铃铛（task-78c9fb3a）：未读红点 + 下拉列表，点击跳项目页并标已读。60s 轮询。 */
 export function NotificationBell({ appearance = "light" }: { appearance?: "light" | "dark" }) {
+  void appearance;
   const meQ = useMe();
   const authed = meQ.data?.authenticated === true;
   const nav = useNavigate();
@@ -59,7 +60,6 @@ export function NotificationBell({ appearance = "light" }: { appearance?: "light
 
   if (!authed) return null;
 
-  const dark = appearance === "dark";
   const items = listQ.data?.notifications ?? [];
   const unread = listQ.data?.unread_count ?? 0;
 
@@ -78,15 +78,11 @@ export function NotificationBell({ appearance = "light" }: { appearance?: "light
         aria-expanded={open}
         aria-haspopup="menu"
         aria-label={unread > 0 ? `Notifications (${unread} unread)` : "Notifications"}
-        className={
-          dark
-            ? "relative flex h-9 w-9 items-center justify-center rounded-full border border-[#333] bg-[#030303] text-[#acacb0] transition hover:border-[#484a58] hover:bg-[#111216] hover:text-white focus-ring-dark"
-            : "relative flex h-9 w-9 items-center justify-center rounded-md border border-line bg-surface text-ink-secondary transition-colors hover:bg-surface-sunken hover:text-ink focus-ring"
-        }
+        className="relative flex h-9 w-9 items-center justify-center rounded-full border border-line bg-surface-raised text-ink-secondary transition-colors hover:border-line-strong hover:bg-surface-sunken hover:text-ink focus-ring"
       >
-        <Bell size={dark ? 14 : 16} />
+        <Bell size={15} />
         {unread > 0 && (
-          <span className="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-danger px-1 text-[10px] font-semibold leading-none text-white">
+            <span className="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-danger px-1 text-[10px] font-semibold leading-none text-surface">
             {unread > 9 ? "9+" : unread}
           </span>
         )}
@@ -95,24 +91,16 @@ export function NotificationBell({ appearance = "light" }: { appearance?: "light
       {open && (
         <div
           role="menu"
-          className={
-            dark
-              ? "absolute right-0 top-full z-40 mt-2 w-80 overflow-hidden rounded-xl border border-[#333] bg-[#111216] shadow-[0_16px_50px_rgba(0,0,0,0.5)]"
-              : "absolute right-0 top-full z-40 mt-1.5 w-80 overflow-hidden rounded-lg border border-line bg-surface shadow-lg"
-          }
+          className="absolute right-0 top-full z-40 mt-2 w-80 overflow-hidden rounded-xl border border-line bg-surface-raised shadow-[0_16px_48px_-12px_rgba(0,0,0,0.7)]"
         >
-          <div
-            className={`flex items-center justify-between border-b px-3.5 py-2.5 ${dark ? "border-[#26272c]" : "border-line"}`}
-          >
-            <span className={`text-[13px] font-medium ${dark ? "text-[#f0f2f6]" : "text-ink"}`}>
-              Notifications
-            </span>
+          <div className="flex items-center justify-between border-b border-line px-3.5 py-2.5">
+            <span className="text-[13px] font-medium text-ink">Notifications</span>
             {unread > 0 && (
               <button
                 type="button"
                 onClick={() => readAllM.mutate()}
                 disabled={readAllM.isPending}
-                className={`inline-flex items-center gap-1 text-[12px] ${dark ? "text-[#acacb0] hover:text-white" : "text-ink-secondary hover:text-ink"}`}
+                className="inline-flex items-center gap-1 text-[12px] text-ink-secondary hover:text-ink"
               >
                 <CheckCheck size={13} />
                 Mark all read
@@ -122,11 +110,9 @@ export function NotificationBell({ appearance = "light" }: { appearance?: "light
 
           <ul className="max-h-80 overflow-y-auto">
             {listQ.isPending ? (
-              <li className={`px-3.5 py-6 text-center text-[13px] ${dark ? "text-[#77787e]" : "text-ink-tertiary"}`}>
-                Loading…
-              </li>
+              <li className="px-3.5 py-6 text-center text-[13px] text-ink-tertiary">Loading…</li>
             ) : items.length === 0 ? (
-              <li className={`px-3.5 py-6 text-center text-[13px] ${dark ? "text-[#77787e]" : "text-ink-tertiary"}`}>
+              <li className="px-3.5 py-6 text-center text-[13px] text-ink-tertiary">
                 No notifications yet
               </li>
             ) : (
@@ -138,22 +124,20 @@ export function NotificationBell({ appearance = "light" }: { appearance?: "light
                       type="button"
                       role="menuitem"
                       onClick={() => openItem(n)}
-                      className={`flex w-full items-start gap-2.5 px-3.5 py-2.5 text-left transition-colors ${
-                        dark ? "hover:bg-[#1a1b20]" : "hover:bg-surface-sunken"
-                      }`}
+                      className="flex w-full items-start gap-2.5 px-3.5 py-2.5 text-left transition-colors hover:bg-surface-sunken"
                     >
                       <span
                         className={`mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full ${isUnread ? "bg-accent-600" : "bg-transparent"}`}
                         aria-hidden
                       />
                       <span className="min-w-0 flex-1">
-                        <span className={`block truncate text-[13px] font-medium ${dark ? "text-[#f0f2f6]" : "text-ink"}`}>
+                        <span className="block truncate text-[13px] font-medium text-ink">
                           {n.payload.full_name}
                         </span>
-                        <span className={`mt-0.5 block text-[12px] leading-snug ${dark ? "text-[#acacb0]" : "text-ink-secondary"}`}>
+                        <span className="mt-0.5 block text-[12px] leading-snug text-ink-secondary">
                           {summary(n)}
                         </span>
-                        <span className={`mt-0.5 block font-mono text-[11px] ${dark ? "text-[#696a70]" : "text-ink-tertiary"}`}>
+                        <span className="mt-0.5 block font-mono text-[11px] text-ink-tertiary">
                           {formatRelativeTime(n.created_at)}
                         </span>
                       </span>

src/components/ProjectRow.tsx

@@ -3,7 +3,6 @@ import { useNavigate } from "react-router-dom";
 import type { ProjectCard } from "@/shared/types";
 import { formatRelativeTime, formatStars, totalFindings } from "../shared/lib/format";
 import { SeverityBar } from "./SeverityBar";
-import { StatusBadge } from "./StatusBadge";
 
 function OwnerAvatar({ owner, compact = false }: { owner: string; compact?: boolean }) {
   const [failed, setFailed] = useState(false);
@@ -11,7 +10,7 @@ function OwnerAvatar({ owner, compact = false }: { owner: string; compact?: bool
   if (failed) {
     return (
       <div
-        className={`flex shrink-0 items-center justify-center rounded-full bg-white/[0.06] font-semibold text-ink-secondary ${sizeClass} ${compact ? "text-[10px]" : "text-xs"}`}
+        className={`flex shrink-0 items-center justify-center rounded-full bg-surface-sunken font-semibold text-ink-secondary ${sizeClass} ${compact ? "text-[10px]" : "text-xs"}`}
         aria-hidden
       >
         {owner.slice(0, 1).toUpperCase()}
@@ -46,7 +45,7 @@ export function ProjectRow({ project, compact = false }: { project: ProjectCard;
       onKeyDown={(e) => {
         if (e.key === "Enter") nav(`/p/${project.owner_login}/${project.name}`);
       }}
-      className={`group block cursor-pointer overflow-hidden border-b border-line px-1 transition-colors hover:bg-white/[0.025] focus-ring rounded-sm ${
+      className={`group block cursor-pointer overflow-hidden border-b border-line px-1 transition-colors hover:bg-surface-sunken/60 focus-ring rounded-sm ${
         compact ? "h-[104px] py-3" : "py-4"
       }`}
     >
@@ -89,7 +88,13 @@ export function ProjectRow({ project, compact = false }: { project: ProjectCard;
               </div>
               <div className={compact ? "mt-1.5" : "mt-2.5"}>
                 {scanning ? (
-                  <span className={`${compact ? "text-[10px]" : "text-[13px]"} font-medium text-running-ink`}>
+                  <span
+                    className={`inline-flex items-center gap-1.5 font-medium text-running-ink ${compact ? "text-[10px]" : "text-[13px]"}`}
+                  >
+                    <span className="relative flex h-1.5 w-1.5">
+                      <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-running opacity-60 motion-reduce:animate-none" />
+                      <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-running" />
+                    </span>
                     {soFar > 0 ? `Scanning · ${soFar} findings so far` : "Scanning…"}
                   </span>
                 ) : waiting ? (
@@ -107,12 +112,6 @@ export function ProjectRow({ project, compact = false }: { project: ProjectCard;
                 )}
               </div>
             </div>
-            {/* completed 的扫描时间已在 meta 行，右侧 badge 只留给需要注意的状态（去重，fish v1.11） */}
-            {state !== "completed" && (
-              <div className={`shrink-0 pt-0.5 ${compact ? "scale-90 origin-top-right" : ""}`}>
-                <StatusBadge state={state} finishedAt={project.latest_scan?.finished_at} />
-              </div>
-            )}
           </div>
         </div>
       </div>

src/components/RepoSubmitForm.tsx

@@ -49,10 +49,12 @@ export function RepoSubmitForm({
   size = "default",
   appearance = "default",
   className = "",
+  align = "center",
 }: {
   size?: "default" | "hero";
   appearance?: "default" | "dark";
   className?: string;
+  align?: "center" | "left";
 }) {
   const nav = useNavigate();
   const meQ = useMe();
@@ -93,6 +95,8 @@ export function RepoSubmitForm({
   };
 
   if (dark) {
+    // hero composer（暗色控制台）；appearance prop 名保留为调用方兼容
+    const centered = align === "center";
     return (
       <form
         onSubmit={(e) => void onSubmit(e)}
@@ -101,13 +105,13 @@ export function RepoSubmitForm({
         aria-busy={pending}
       >
         <div
-          className={`openvuln-composer group flex min-h-[62px] items-center gap-3 rounded-[18px] border bg-[#141519] p-2 pl-5 shadow-[0_18px_60px_rgba(0,0,0,0.32)] transition focus-within:bg-[#17181d] focus-within:shadow-[0_22px_70px_rgba(68,70,88,0.16)] ${
-            error ? "border-[#a94d55]" : "border-[#35363c] focus-within:border-[#5b5e6a]"
+          className={`openvuln-composer group flex min-h-[58px] items-center gap-3 rounded-xl border bg-surface-raised p-2 pl-4 shadow-[0_20px_48px_-20px_rgba(0,0,0,0.65)] transition focus-within:bg-surface-sunken/60 ${
+            error ? "border-danger/60" : "border-line focus-within:border-line-strong"
           }`}
         >
           <Github
-            size={20}
-            className="shrink-0 text-[#6d6f78] transition group-focus-within:text-[#acacb0]"
+            size={18}
+            className="shrink-0 text-ink-tertiary transition group-focus-within:text-ink-secondary"
           />
           <input
             type="url"
@@ -118,25 +122,25 @@ export function RepoSubmitForm({
             }}
             placeholder="Paste a public GitHub repository URL"
             spellCheck={false}
-            className="min-w-0 flex-1 bg-transparent py-3 text-[14px] text-[#f0f2f6] outline-none placeholder:text-[#696a70] sm:text-[15px]"
+            className="min-w-0 flex-1 bg-transparent py-3 font-mono text-[13px] text-ink outline-none placeholder:text-ink-tertiary sm:text-[14px]"
             aria-label="GitHub repository URL"
             aria-invalid={!!error}
           />
           <button
             type="submit"
             aria-label={pending ? "Submitting repository" : "Analyze repository"}
-            className="flex h-11 w-11 shrink-0 items-center justify-center rounded-[14px] border border-[#0d0d0f] bg-[#ebecf0] text-[#0d0d0f] shadow-sm transition hover:scale-[1.03] hover:bg-white active:scale-95 focus-ring-dark disabled:cursor-not-allowed disabled:bg-[#484a58] disabled:text-[#989aa5] disabled:opacity-100"
+            className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-ink text-surface shadow-sm transition hover:bg-white active:scale-95 focus-ring disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:text-ink-tertiary disabled:opacity-100"
             disabled={!url.trim() || pending}
           >
             {pending ? (
-              <LoaderCircle size={20} className="animate-spin motion-reduce:animate-none" />
+              <LoaderCircle size={19} className="animate-spin motion-reduce:animate-none" />
             ) : (
-              <ArrowUp size={21} strokeWidth={2.2} />
+              <ArrowUp size={19} strokeWidth={2.2} />
             )}
           </button>
         </div>
 
-        <div className="mt-2.5 flex justify-center">
+        <div className={`mt-2.5 flex ${centered ? "justify-center" : "justify-start"}`}>
           {showRef ? (
             <input
               type="text"
@@ -144,28 +148,28 @@ export function RepoSubmitForm({
               onChange={(e) => setRef(e.target.value)}
               placeholder="Branch, tag, or commit SHA (optional)"
               spellCheck={false}
-              className="h-8 w-72 rounded-full border border-[#333] bg-[#030303] px-3.5 font-mono text-xs text-[#f0f2f6] outline-none placeholder:text-[#696a70] focus:border-[#484a58]"
+              className="h-8 w-72 rounded-lg border border-line bg-surface-raised px-3 font-mono text-xs text-ink outline-none placeholder:text-ink-tertiary focus:border-line-strong"
               aria-label="Version to scan (branch, tag, or commit SHA)"
             />
           ) : (
             <button
               type="button"
               onClick={() => setShowRef(true)}
-              className="text-[11px] text-[#696a70] underline decoration-[#333] underline-offset-2 transition hover:text-[#acacb0]"
+              className="font-mono text-[11px] text-ink-tertiary underline decoration-line underline-offset-2 transition hover:text-ink-secondary"
             >
               Scan a specific version
             </button>
           )}
         </div>
 
-        <div className="mt-3 flex min-h-5 items-start justify-center gap-1.5 text-center text-xs text-[#77787e]">
+        <div className={`mt-2.5 flex min-h-5 items-start gap-1.5 text-xs text-ink-tertiary ${centered ? "justify-center text-center" : "justify-start text-left"}`}>
           {error ? (
-            <span className="inline-flex items-start gap-1.5 text-[#ff9ca5]" role="alert">
+            <span className="inline-flex items-start gap-1.5 text-danger" role="alert">
               <CircleAlert size={14} className="mt-px shrink-0" />
               <span>{error}</span>
             </span>
           ) : pending ? (
-            <span className="text-[#b9bfd2]" role="status">Submitting repository…</span>
+            <span className="text-ink-secondary" role="status">Submitting repository…</span>
           ) : (
             <span className="inline-flex items-center gap-1.5">
               <CircleAlert size={13} strokeWidth={1.8} className="shrink-0" aria-hidden />

src/components/ScanDurationNotice.tsx

@@ -4,7 +4,7 @@ import { Clock3 } from "lucide-react";
 export function ScanDurationNotice({ className = "" }: { className?: string }) {
   return (
     <p
-      className={`flex items-center justify-center gap-1.5 text-xs text-[#77787e] ${className}`}
+      className={`flex items-center justify-center gap-1.5 text-xs text-ink-tertiary ${className}`}
       role="note"
     >
       <Clock3 size={13} strokeWidth={1.8} className="shrink-0" />

src/components/SeverityBar.tsx

@@ -1,17 +1,17 @@
 import type { Severity, SeverityCounts } from "@/shared/types";
 import { SEV_ORDER, severityLabel, totalFindings } from "../shared/lib/format";
 
-/** NVD four tiers — Critical uses R4 #C22828. */
+/** NVD four tiers — dark-console spectrum, red → orange → amber. */
 const BAR: Record<Severity, string> = {
-  critical: "#C22828",
-  high: "#F24F4F",
-  medium: "#FF733C",
-  low: "#F7C530",
+  critical: "#E5484D",
+  high: "#F2604F",
+  medium: "#FF8A3C",
+  low: "#F0C43A",
 };
 
 const DOT: Record<Severity, string> = {
-  critical: "bg-[#C22828]",
-  high: "bg-[#F24F4F]",
+  critical: "bg-sev-critical-bar",
+  high: "bg-sev-high-bar",
   medium: "bg-sev-medium-bar",
   low: "bg-sev-low-bar",
 };

src/features/home/ProductHomePage.tsx

@@ -1,37 +1,31 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Link } from "react-router-dom";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
-import {
-  Activity,
-  ArrowRight,
-  CheckCircle2,
-  ChevronDown,
-  ChevronUp,
-  Clock3,
-  Github,
-  Radar,
-  Search,
-  Shield,
-} from "lucide-react";
-import type { LiveScanItem } from "@/shared/types";
+import { Clock3, Github, Search, Shield } from "lucide-react";
+import type { LiveScanItem, OverviewStats, ProjectCard, Severity } from "@/shared/types";
 import { api } from "../../shared/api/client";
 import { Button } from "../../components/Button";
 import { EmptyState } from "../../components/EmptyState";
-import { ProjectRow } from "../../components/ProjectRow";
 import { RepoSubmitForm } from "../../components/RepoSubmitForm";
-import { HeroStats } from "../../components/HeroStats";
-import { ScanDurationNotice } from "../../components/ScanDurationNotice";
+import { SeverityBar } from "../../components/SeverityBar";
 import { AuthButton } from "../../components/AuthButton";
 import { NotificationBell } from "../../components/NotificationBell";
+import { formatRelativeTime, formatStars, totalFindings } from "../../shared/lib/format";
 
 const OWN_REPO =
   (import.meta.env.VITE_GITHUB_REPO_URL as string | undefined) ||
   "https://github.com/Clouditera/OpenVuln";
-const ZAI_HF_AVATAR = "https://huggingface.co/api/avatars/zai-org";
 
 /** List state survives project-detail navigation. */
 const listCache = { sort: "stars" as "newest" | "stars", q: "" };
 
+const SEV_BARS: Array<{ level: Severity; color: string; label: string; short: string }> = [
+  { level: "critical", color: "#E5484D", label: "Critical", short: "Crit" },
+  { level: "high", color: "#F2604F", label: "High", short: "High" },
+  { level: "medium", color: "#FF8A3C", label: "Medium", short: "Med" },
+  { level: "low", color: "#F0C43A", label: "Low", short: "Low" },
+];
+
 function formatElapsed(seconds: number): string {
   if (seconds < 60) return `${seconds}s`;
   const minutes = Math.floor(seconds / 60);
@@ -39,163 +33,365 @@ function formatElapsed(seconds: number): string {
   return `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
 }
 
-function BrandMark({ compact = false }: { compact?: boolean }) {
+function BrandMark() {
   return (
-    <div
-      className={`relative flex shrink-0 items-center justify-center overflow-hidden rounded-xl border border-white/15 bg-white font-display font-bold text-black shadow-[0_8px_24px_rgba(0,0,0,0.24)] ${
-        compact ? "h-8 w-8" : "h-9 w-9"
-      }`}
+    <img
+      src="/logo.svg"
+      alt=""
+      className="h-8 w-8 shrink-0 rounded-lg"
       aria-hidden
+    />
+  );
+}
+
+/* ── 滚动进入视口时的克制上浮（一次性） ── */
+function Reveal({
+  children,
+  delay = 0,
+  className = "",
+}: {
+  children: React.ReactNode;
+  delay?: number;
+  className?: string;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [inView, setInView] = useState(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setInView(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: "0px 0px -6% 0px" },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  return (
+    <div
+      ref={ref}
+      style={delay ? { transitionDelay: `${delay}ms` } : undefined}
+      className={`ov-reveal ${inView ? "ov-in" : ""} ${className}`}
     >
-      <span className={compact ? "text-sm" : "text-base"}>Z</span>
-      <img
-        src={ZAI_HF_AVATAR}
-        alt=""
-        className="absolute inset-0 h-full w-full object-cover"
-        onError={(event) => {
-          event.currentTarget.style.display = "none";
-        }}
-      />
+      {children}
     </div>
   );
 }
 
-function ScanRow({ scan }: { scan: LiveScanItem }) {
-  const dispatching = scan.state === "dispatching";
+function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(media.matches);
+    const update = () => setReduced(media.matches);
+    media.addEventListener("change", update);
+    return () => media.removeEventListener("change", update);
+  }, []);
+  return reduced;
+}
+
+function useCountUp(target: number, duration = 700): number {
+  const reduced = usePrefersReducedMotion();
+  const [value, setValue] = useState(reduced ? target : 0);
+  useEffect(() => {
+    if (reduced) {
+      setValue(target);
+      return;
+    }
+    let frame = 0;
+    const start = performance.now();
+    const tick = (time: number) => {
+      const progress = Math.min(1, (time - start) / duration);
+      setValue(Math.round(target * (1 - (1 - progress) ** 3)));
+      if (progress < 1) frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [duration, reduced, target]);
+  return value;
+}
+
+function AnimatedNumber({ value }: { value: number }) {
+  return <>{useCountUp(value).toLocaleString()}</>;
+}
+
+/* ── 控制台带子共用网格：三条带子的竖向 hairline 严格同轴 ── */
+const BAND_GRID = "grid divide-y divide-line lg:grid-cols-4 lg:divide-y-0 lg:divide-x";
+const BAND_CELL = "py-5 lg:px-6 lg:first:pl-0";
+
+/* ── 实时信息板（departures strip）：正在扫描的仓库，全宽横条 ── */
+function LiveStrip({
+  scans,
+  loading,
+  failed,
+}: {
+  scans: LiveScanItem[];
+  loading: boolean;
+  failed: boolean;
+}) {
+  const active = scans.length;
+  // 单行 4 列：1 列标签 + 3 列条目；超过 3 个时末列汇总
+  const shown = active > 3 ? scans.slice(0, 2) : scans;
+  const overflow = active - shown.length;
+  const fillers = Math.max(0, 3 - shown.length - (overflow > 0 ? 1 : 0));
 
   return (
-    <Link
-      to={`/p/${scan.full_name}`}
-      className="group flex min-h-[72px] items-center gap-3 rounded-2xl border border-white/[0.07] bg-black/20 p-3.5 transition hover:border-white/[0.14] hover:bg-white/[0.045] focus-ring-dark"
-    >
-      <div className="relative flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-white/[0.1] bg-white/[0.05] text-[#b8bac2]">
-        <Radar size={18} className="motion-safe:animate-pulse" />
-        <span className="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full border-2 border-[#15161a] bg-success" />
-      </div>
-      <div className="min-w-0 flex-1">
-        <p className="truncate text-sm font-semibold text-white">
-          {scan.full_name}
-        </p>
-        <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 font-mono text-[10px] text-ink-tertiary">
-          <span className="inline-flex items-center gap-1.5 text-[#b8bac2]">
-            <Activity size={10} />
-            {dispatching ? "Preparing scan" : "Scanning now"}
-          </span>
-          <span className="inline-flex items-center gap-1.5">
-            <Clock3 size={10} />
-            {formatElapsed(scan.elapsed_sec)}
+    <section aria-labelledby="ops-title" className={`border-t border-line ${BAND_GRID}`}>
+      <div className={`flex items-center justify-between gap-3 lg:flex-col lg:items-start lg:justify-center ${BAND_CELL}`}>
+        <h2
+          id="ops-title"
+          className="flex items-center gap-2.5 font-mono text-[10px] font-medium uppercase tracking-[0.22em] text-ink-secondary"
+        >
+          <span className="relative flex h-1.5 w-1.5">
+            {active > 0 && (
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-success opacity-60 motion-reduce:hidden" />
+            )}
+            <span className={`relative inline-flex h-1.5 w-1.5 rounded-full ${active > 0 ? "bg-success" : "bg-ink-tertiary"}`} />
           </span>
-        </div>
+          Live — scanning now
+        </h2>
+        {!loading && !failed && (
+          <p className="font-mono text-[10px] tabular-nums text-ink-tertiary lg:mt-2">
+            {active} active
+          </p>
+        )}
       </div>
-      <div className="shrink-0 text-right">
-        <p className="font-display text-lg font-semibold tabular-nums text-white">
-          {scan.findings_so_far}
+
+      {loading ? (
+        [0, 1, 2].map((item) => (
+          <div key={item} className={`flex items-center ${BAND_CELL}`} aria-hidden>
+            <div className="h-9 w-full animate-pulse rounded-md bg-surface-sunken/70" />
+          </div>
+        ))
+      ) : failed ? (
+        <p className={`flex items-center font-mono text-[11px] uppercase tracking-[0.14em] text-ink-tertiary lg:col-span-3 ${BAND_CELL}`}>
+          Signal lost — live data reconnects automatically
         </p>
-        <p className="font-mono text-[8px] uppercase tracking-[0.12em] text-ink-tertiary">
-          found
+      ) : active === 0 ? (
+        <p className={`flex items-center font-mono text-[11px] uppercase tracking-[0.14em] text-ink-tertiary lg:col-span-3 ${BAND_CELL}`}>
+          Standing by — no repository is being scanned right now
         </p>
-      </div>
-      <ArrowRight
-        size={14}
-        className="shrink-0 text-ink-tertiary transition group-hover:translate-x-0.5 group-hover:text-white"
-      />
-    </Link>
+      ) : (
+        <>
+          {shown.map((scan) => (
+            <Link
+              key={scan.project_id}
+              to={`/p/${scan.full_name}`}
+              className={`group flex min-w-0 items-center justify-between gap-4 transition-colors hover:bg-surface-sunken/60 focus-ring ${BAND_CELL}`}
+            >
+              <span className="min-w-0">
+                <span className="block truncate font-mono text-[13px] font-medium text-ink group-hover:text-white">
+                  {scan.full_name}
+                </span>
+                <span className="mt-1 block font-mono text-[10px] uppercase tracking-[0.1em] text-ink-tertiary">
+                  {scan.state === "dispatching" ? "preparing" : "scanning"} · {formatElapsed(scan.elapsed_sec)}
+                </span>
+              </span>
+              <span className="shrink-0 text-right">
+                <span className="block font-mono text-[16px] font-semibold tabular-nums text-ink">
+                  {scan.findings_so_far}
+                </span>
+                <span className="block font-mono text-[9px] uppercase tracking-[0.12em] text-ink-tertiary">found</span>
+              </span>
+            </Link>
+          ))}
+          {overflow > 0 && (
+            <p className={`flex items-center font-mono text-[11px] uppercase tracking-[0.14em] text-ink-tertiary ${BAND_CELL}`}>
+              +{overflow} more scanning
+            </p>
+          )}
+          {Array.from({ length: fillers }).map((_, index) => (
+            <div key={`filler-${index}`} className="hidden lg:block" aria-hidden />
+          ))}
+        </>
+      )}
+    </section>
   );
 }
 
-function LiveScanPanel({
-  scans,
-  queued,
+/* ── 指标带：账本数字 + severity 光谱，与顶部饰带互为图例 ── */
+function MetricsBand({
+  stats,
   loading,
   failed,
 }: {
-  scans: LiveScanItem[];
-  queued: number;
+  stats: OverviewStats | undefined;
   loading: boolean;
   failed: boolean;
 }) {
-  const active = scans.length;
+  const unavailable = loading || failed || !stats;
+  const scanned = stats
+    ? stats.scanned_project_count ?? Math.min(stats.project_count, stats.scan_completed_count)
+    : 0;
+  const counts = stats?.severity_counts ?? { critical: 0, high: 0, medium: 0, low: 0 };
+
+  const cells: Array<{ label: string; value: number }> = [
+    { label: "Repositories scanned", value: scanned },
+    { label: "Findings discovered", value: stats?.finding_total ?? 0 },
+    { label: "Scans in progress", value: stats?.scan_in_progress_count ?? stats?.live?.scanning?.length ?? 0 },
+  ];
+
+  return (
+    <section aria-label="Platform metrics" className={`border-y border-line ${BAND_GRID}`}>
+      {cells.map((cell) => (
+        <div key={cell.label} className={BAND_CELL}>
+          <p className="font-mono text-3xl font-medium tabular-nums tracking-tight text-ink sm:text-[36px]">
+            {unavailable ? "—" : <AnimatedNumber value={cell.value} />}
+          </p>
+          <p className="mt-2 font-mono text-[10px] uppercase tracking-[0.16em] text-ink-tertiary">{cell.label}</p>
+        </div>
+      ))}
+      <div className={`flex flex-col justify-between gap-4 ${BAND_CELL}`}>
+        <div className="space-y-2" role="img" aria-label="Findings by severity">
+          {SEV_BARS.map((s) => {
+            const count = counts[s.level] ?? 0;
+            const max = Math.max(1, ...SEV_BARS.map((x) => counts[x.level] ?? 0));
+            return (
+              <div key={s.level} className="flex items-center gap-2.5">
+                <span className="w-8 shrink-0 font-mono text-[9px] uppercase tracking-[0.08em] text-ink-tertiary">
+                  {s.short}
+                </span>
+                <span className="h-[3px] flex-1 overflow-hidden rounded-full bg-surface-sunken">
+                  <span
+                    className="block h-full rounded-full transition-[width] duration-700 ease-out"
+                    style={{
+                      width: unavailable ? "0%" : `${(count / max) * 100}%`,
+                      backgroundColor: s.color,
+                    }}
+                  />
+                </span>
+                <span className="w-7 shrink-0 text-right font-mono text-[12px] tabular-nums text-ink">
+                  {unavailable ? "—" : count.toLocaleString()}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+        <p className="font-mono text-[10px] uppercase tracking-[0.16em] text-ink-tertiary">
+          Findings by severity
+        </p>
+      </div>
+    </section>
+  );
+}
+
+/* ── 仓库账本行 ── */
+function LedgerAvatar({ owner }: { owner: string }) {
+  const [failed, setFailed] = useState(false);
+  if (failed) {
+    return (
+      <span
+        className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-surface-sunken font-mono text-[10px] font-semibold text-ink-secondary"
+        aria-hidden
+      >
+        {owner.slice(0, 1).toUpperCase()}
+      </span>
+    );
+  }
+  return (
+    <img
+      src={`https://github.com/${owner}.png?size=64`}
+      alt=""
+      width={28}
+      height={28}
+      className="h-7 w-7 shrink-0 rounded-full border border-line bg-surface-sunken"
+      onError={() => setFailed(true)}
+    />
+  );
+}
+
+function LedgerRow({ project }: { project: ProjectCard }) {
+  const state = project.latest_scan?.state;
+  const scanning = state === "scanning" || state === "dispatching";
+  const waiting = state !== "completed" && !scanning;
+  const soFar = project.latest_scan?.findings_so_far ?? 0;
+  const findings = totalFindings(project.severity_counts);
 
   return (
-    <section
-      id="live-scans"
-      aria-labelledby="live-scan-title"
-      className="openvuln-panel relative min-w-0 overflow-hidden p-5 sm:p-6"
+    <Link
+      to={`/p/${project.owner_login}/${project.name}`}
+      className="group grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-2 border-b border-line/70 px-2 py-3.5 transition-colors last:border-b-0 hover:bg-surface-sunken/60 focus-ring md:grid-cols-[minmax(0,2.4fr)_110px_78px_150px_70px_150px] md:gap-x-5"
     >
-      <div className="pointer-events-none absolute inset-x-8 top-0 h-px bg-gradient-to-r from-transparent via-white/35 to-transparent" />
-      <div className="flex items-start justify-between gap-4">
-        <div>
-          <div className="flex items-center gap-2 font-mono text-[9px] font-semibold uppercase tracking-[0.18em] text-[#a8aab1]">
-            <span className="relative flex h-2 w-2">
-              {active > 0 && (
-                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-success opacity-50 motion-reduce:hidden" />
-              )}
-              <span
-                className={`relative inline-flex h-2 w-2 rounded-full ${active > 0 ? "bg-success" : "bg-ink-tertiary"}`}
-              />
+      {/* repository */}
+      <span className="flex min-w-0 items-center gap-3">
+        <LedgerAvatar owner={project.owner_login} />
+        <span className="min-w-0">
+          <span className="block truncate font-mono text-[13px] font-medium text-ink group-hover:text-white">
+            {project.full_name}
+          </span>
+          {project.description && (
+            <span className="mt-0.5 block truncate text-[12px] text-ink-tertiary">{project.description}</span>
+          )}
+        </span>
+      </span>
+
+      {/* language */}
+      <span className="hidden min-w-0 items-center gap-1.5 truncate text-[12px] text-ink-secondary md:flex">
+        {project.language ? (
+          <>
+            <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-ink/40" />
+            <span className="truncate">{project.language}</span>
+          </>
+        ) : (
+          <span className="text-ink-tertiary">—</span>
+        )}
+      </span>
+
+      {/* stars */}
+      <span className="hidden font-mono text-[12px] tabular-nums text-ink-secondary md:block">
+        ★ {formatStars(project.stars)}
+      </span>
+
+      {/* status */}
+      <span className="hidden md:block">
+        {scanning ? (
+          <span className="inline-flex items-center gap-1.5 font-mono text-[11px] uppercase tracking-[0.06em] text-ink">
+            <span className="relative flex h-1.5 w-1.5">
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-ink opacity-40 motion-reduce:animate-none" />
+              <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-ink" />
             </span>
-            Live scanner
-          </div>
-          <h2 id="live-scan-title" className="mt-2 font-display text-lg font-semibold tracking-tight text-white">
-            Scanning now
-          </h2>
-        </div>
-        {!loading && !failed && (
-          <div className="rounded-full border border-white/[0.08] bg-black/25 px-3 py-1.5 font-mono text-[9px] text-ink-secondary">
-            {active} active · {queued} queued
-          </div>
+            scanning{soFar > 0 ? ` · ${soFar}` : ""}
+          </span>
+        ) : waiting ? (
+          <span className="font-mono text-[11px] uppercase tracking-[0.06em] text-ink-tertiary">pending</span>
+        ) : (
+          <span className="font-mono text-[11px] text-ink-secondary">
+            {project.latest_scan?.finished_at ? formatRelativeTime(project.latest_scan.finished_at) : "done"}
+          </span>
         )}
-      </div>
+      </span>
 
-      <div className="mt-4 min-h-[130px] max-h-[228px] overflow-y-auto pr-0.5">
-        {loading ? (
-          <div className="space-y-2.5" aria-label="Loading live scans">
-            {[0, 1].map((item) => (
-              <div key={item} className="h-[72px] animate-pulse rounded-2xl bg-white/[0.04]" />
-            ))}
-          </div>
-        ) : failed ? (
-          <div className="flex min-h-[130px] items-center justify-center rounded-2xl border border-dashed border-white/[0.08] bg-black/15 px-5 text-center">
-            <div>
-              <Activity size={20} className="mx-auto text-ink-tertiary" />
-              <p className="mt-2 text-sm font-medium text-ink-secondary">Live data is unavailable</p>
-              <p className="mt-1 text-xs text-ink-tertiary">Scanner status will reconnect automatically.</p>
-            </div>
-          </div>
-        ) : scans.length > 0 ? (
-          <div className="space-y-2.5">
-            {scans.map((scan) => (
-              <ScanRow key={scan.project_id} scan={scan} />
-            ))}
-          </div>
+      {/* findings count */}
+      <span className="text-right font-mono text-[13px] font-medium tabular-nums text-ink md:text-left">
+        {waiting || (scanning && findings === 0) ? <span className="text-ink-tertiary">—</span> : findings}
+      </span>
+
+      {/* severity */}
+      <span className="col-span-2 md:col-span-1">
+        {!waiting && !scanning && findings > 0 ? (
+          <SeverityBar counts={project.severity_counts} showLegend={false} widthClass="w-full" heightClass="h-1" />
         ) : (
-          <div className="flex min-h-[130px] items-center justify-center rounded-2xl border border-dashed border-white/[0.08] bg-black/15 px-5 text-center">
-            <div>
-              <CheckCircle2 size={21} className="mx-auto text-success-ink" />
-              <p className="mt-2 text-sm font-medium text-white">Scanner is ready</p>
-              <p className="mt-1 text-xs leading-5 text-ink-tertiary">
-                No repository is being scanned right now{queued > 0 ? ` · ${queued} waiting` : ""}.
-              </p>
-            </div>
-          </div>
+          <span className="block h-1 w-full rounded-full bg-surface-sunken md:w-full" aria-hidden />
         )}
-      </div>
+      </span>
 
-      <div className="mt-4 h-0.5 overflow-hidden rounded-full bg-white/[0.045]" aria-hidden>
-        <div
-          className={`h-full rounded-full bg-white/60 ${
-            active > 0 ? "live-scan-sweep w-1/3" : "w-0"
-          }`}
-        />
-      </div>
-    </section>
+      {/* mobile meta line */}
+      <span className="col-span-2 flex flex-wrap items-center gap-x-3 font-mono text-[10px] uppercase tracking-[0.06em] text-ink-tertiary md:hidden">
+        {project.language && <span>{project.language}</span>}
+        <span>★ {formatStars(project.stars)}</span>
+        {scanning ? <span className="text-ink">scanning{soFar > 0 ? ` · ${soFar}` : ""}</span> : waiting ? <span>pending</span> : project.latest_scan?.finished_at ? <span>{formatRelativeTime(project.latest_scan.finished_at)}</span> : null}
+      </span>
+    </Link>
   );
 }
 
 export function ProductHomePage() {
   const [q, setQState] = useState(listCache.q);
   const [sort, setSortState] = useState<"newest" | "stars">(listCache.sort);
-  const [repositoriesOpen, setRepositoriesOpen] = useState(false);
   const setQ = (value: string) => {
     listCache.q = value;
     setQState(value);
@@ -221,23 +417,21 @@ export function ProductHomePage() {
   });
   const allItems = useMemo(() => projects.data?.pages.flatMap((page) => page.items) ?? [], [projects.data]);
   const sentinelRef = useRef<HTMLDivElement>(null);
-  const repositoryScrollRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const sentinel = sentinelRef.current;
-    const scrollContainer = repositoryScrollRef.current;
-    if (!repositoriesOpen || !sentinel || !scrollContainer) return;
+    if (!sentinel) return;
     const observer = new IntersectionObserver(
       (entries) => {
         if (entries.some((entry) => entry.isIntersecting) && projects.hasNextPage && !projects.isFetchingNextPage) {
           void projects.fetchNextPage();
         }
       },
-      { root: scrollContainer, rootMargin: "240px" },
+      { rootMargin: "240px" },
     );
     observer.observe(sentinel);
     return () => observer.disconnect();
-  }, [repositoriesOpen, projects.hasNextPage, projects.isFetchingNextPage, projects.fetchNextPage]);
+  }, [projects.hasNextPage, projects.isFetchingNextPage, projects.fetchNextPage]);
 
   const filtered = useMemo(() => {
     const needle = q.trim().toLowerCase();
@@ -250,210 +444,181 @@ export function ProductHomePage() {
   }, [allItems, q]);
 
   const scans = overview.data?.live?.scanning ?? [];
-  const queued = overview.data?.live?.queued_count ?? 0;
 
   return (
-    <div id="top" className="openvuln-home relative isolate min-h-screen overflow-hidden bg-[#08090b] text-white">
-      <div className="openvuln-glow pointer-events-none fixed inset-0 -z-10" />
-
-      <div className="min-h-screen">
-        <header className="sticky top-0 z-30 border-b border-white/[0.06] bg-[#08090b]/80 backdrop-blur-xl">
-          <div className="mx-auto flex h-[68px] w-full max-w-[1280px] items-center justify-between px-4 sm:px-7 lg:px-9 xl:px-12">
-            <div className="flex items-center gap-3">
-              <Link to="/" className="flex items-center gap-2.5 rounded-lg focus-ring-dark">
-                <BrandMark compact />
-                <span className="font-display text-sm font-semibold text-white">OpenVuln</span>
-              </Link>
-            </div>
-            <div className="flex items-center gap-2">
-              <NotificationBell appearance="dark" />
-              <AuthButton appearance="dark" />
-              <a
-                href={OWN_REPO}
-                target="_blank"
-                rel="noreferrer"
-                aria-label="OpenVuln on GitHub"
-                className="hidden h-9 items-center gap-2 rounded-full border border-[#2a2b30] bg-[#101114] px-3.5 text-xs font-medium text-[#9c9da4] transition hover:border-[#41434b] hover:bg-[#17181d] hover:text-white focus-ring-dark sm:inline-flex"
-              >
-                <Github size={14} />
-                GitHub
-              </a>
-            </div>
+    <div id="top" className="relative isolate min-h-screen overflow-hidden bg-surface text-ink">
+      <div className="openvuln-hero-video" aria-hidden>
+        <video src="/hero-bg.mp4" poster="/hero-bg-poster.jpg" autoPlay muted loop playsInline preload="auto" />
+      </div>
+
+      <header className="sticky top-0 z-30 border-b border-line bg-surface/85 backdrop-blur-xl">
+        <div className="mx-auto flex h-16 w-full max-w-[1200px] items-center justify-between px-5 sm:px-8">
+          <Link to="/" className="flex items-center gap-2.5 rounded-lg focus-ring">
+            <BrandMark />
+            <span className="font-display text-[15px] font-semibold tracking-tight text-ink">OpenVuln</span>
+          </Link>
+          <div className="flex items-center gap-2">
+            <NotificationBell />
+            <AuthButton />
+            <a
+              href={OWN_REPO}
+              target="_blank"
+              rel="noreferrer"
+              aria-label="OpenVuln on GitHub"
+              className="hidden h-9 items-center gap-2 rounded-full border border-line bg-surface-raised px-3.5 text-xs font-medium text-ink-secondary transition hover:border-line-strong hover:text-ink focus-ring sm:inline-flex"
+            >
+              <Github size={14} />
+              GitHub
+            </a>
+          </div>
+        </div>
+      </header>
+
+      <main className="mx-auto w-full max-w-[1200px] px-5 pb-16 sm:px-8">
+        {/* ── Hero：大字报 —— 整幅展示字 + 出版物边注 ── */}
+        <section id="submit" className="scroll-mt-24 pt-10 sm:pt-14">
+          <div className="openvuln-brand">
+            <h1 className="mt-10 font-display font-medium uppercase leading-[0.94] tracking-[-0.015em] sm:mt-12">
+              <span className="ov-line-mask">
+                <span className="ov-line openvuln-outline block text-[15vw] sm:text-[clamp(64px,9.6vw,116px)]" style={{ animationDelay: "80ms" }}>
+                  Open source<span className="openvuln-title-comma">,</span>
+                </span>
+              </span>
+              <span className="ov-line-mask">
+                <span className="ov-line openvuln-solid block text-[15vw] sm:text-[clamp(64px,9.6vw,116px)]" style={{ animationDelay: "200ms" }}>
+                  audited by GLM<span className="sr-only">.</span><span className="openvuln-title-mark openvuln-title-period" aria-hidden />
+                </span>
+              </span>
+            </h1>
           </div>
-        </header>
-
-        <main className="mx-auto w-full max-w-[1280px] px-4 pb-16 pt-8 sm:px-7 sm:pt-11 lg:px-9 lg:pb-20 lg:pt-14 xl:px-12">
-          <section id="submit" className="mx-auto flex max-w-[920px] scroll-mt-24 flex-col items-center text-center">
-            <div className="openvuln-brand flex flex-col items-center">
-              <div className="mb-4 flex items-center gap-2 font-mono text-[9px] font-semibold uppercase tracking-[0.2em] text-[#96989f]">
-                <span className="h-1.5 w-1.5 rounded-full bg-white/60" />
-                Open-source security scanner
-              </div>
-              <div className="flex items-center justify-center gap-4 sm:gap-5">
-                <div className="relative flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-white/20 bg-white font-display text-2xl font-bold text-black shadow-[0_14px_44px_rgba(0,0,0,0.4)] sm:h-16 sm:w-16">
-                  <span aria-hidden>Z</span>
-                  <img
-                    src={ZAI_HF_AVATAR}
-                    alt="Z.ai"
-                    className="absolute inset-0 h-full w-full object-cover"
-                    onError={(event) => {
-                      event.currentTarget.style.display = "none";
-                    }}
-                  />
-                </div>
-                <h1 className="openvuln-title font-display text-[40px] font-[450] leading-none tracking-normal sm:text-[56px]">
-                  OpenVuln
-                </h1>
-              </div>
-              <p className="mt-4 max-w-2xl text-sm leading-6 text-ink-secondary sm:text-[15px]">
-                GLM-powered vulnerability discovery for the open-source world.
-              </p>
-            </div>
 
-            <RepoSubmitForm size="hero" appearance="dark" className="mt-7 w-full max-w-[820px]" />
-            <div className="mt-1 w-full max-w-[820px] text-center">
-              <p className="text-xs leading-5 text-[#777981]" role="note">
-                Submitted repositories may require manual review before they are approved for scanning.
+          <div className="openvuln-composer mt-10 grid items-end gap-8 pb-12 sm:mt-14 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] lg:gap-16 lg:pb-16" style={{ animationDelay: "380ms" }}>
+            <p className="max-w-[44ch] text-[15px] leading-7 text-ink-secondary">
+              Submit a public repository and OpenVuln hunts its vulnerabilities.
+              Maintainers see every finding — the world sees only what they disclose.
+            </p>
+            <div className="w-full lg:max-w-[600px] lg:justify-self-end">
+              <RepoSubmitForm size="hero" appearance="dark" className="w-full" align="left" />
+              <p className="mt-2 flex items-center gap-1.5 text-xs leading-5 text-ink-tertiary" role="note">
+                <Clock3 size={12} strokeWidth={1.8} aria-hidden />
+                Submissions may require manual review · A full scan usually takes 12+ hours
               </p>
-              <ScanDurationNotice className="mt-1.5 w-full" />
             </div>
-          </section>
-
-          <div className="mt-9 grid items-stretch gap-4 xl:grid-cols-[0.88fr_1.12fr]">
-            <HeroStats stats={overview.data} loading={overview.isLoading} failed={overview.isError} />
-            <LiveScanPanel
-              scans={scans}
-              queued={queued}
-              loading={overview.isLoading}
-              failed={overview.isError}
-            />
           </div>
+        </section>
 
-          <section
-            id="repositories"
-            aria-labelledby="projects-title"
-            className="mt-8 scroll-mt-24 rounded-[26px] border border-white/[0.08] bg-[#101115]/80 p-4 shadow-[0_24px_80px_rgba(0,0,0,0.22)] sm:p-6"
-          >
-            <div className="flex items-start justify-between gap-4">
-              <div>
-                <p className="font-mono text-[9px] font-semibold uppercase tracking-[0.18em] text-[#96989f]">
-                  Repository index
-                </p>
-                <h2 id="projects-title" className="mt-2 font-display text-xl font-semibold tracking-tight text-white sm:text-2xl">
-                  Scanned repositories
-                </h2>
-                <p className="mt-1.5 text-xs text-ink-tertiary">Browse public scan status and disclosed results.</p>
+        {/* ── 实时信息板 ── */}
+        <Reveal>
+          <LiveStrip scans={scans} loading={overview.isLoading} failed={overview.isError} />
+        </Reveal>
+
+        {/* ── 指标带 ── */}
+        <Reveal delay={60}>
+          <MetricsBand stats={overview.data} loading={overview.isLoading} failed={overview.isError} />
+        </Reveal>
+
+        {/* ── 仓库账本 ── */}
+        <section id="repositories" aria-labelledby="projects-title" className="scroll-mt-24 pt-12">
+          <Reveal className="flex flex-wrap items-end justify-between gap-4">
+            <div>
+              <p className="font-mono text-[10px] font-medium uppercase tracking-[0.22em] text-ink-tertiary">
+                Repository index
+              </p>
+              <h2 id="projects-title" className="mt-2 font-display text-2xl font-semibold tracking-tight text-ink">
+                Scanned repositories
+              </h2>
+            </div>
+            <div className="flex flex-col gap-2.5 sm:flex-row sm:items-center">
+              <div className="relative">
+                <Search size={14} className="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-ink-tertiary" />
+                <input
+                  type="search"
+                  value={q}
+                  onChange={(event) => setQ(event.target.value)}
+                  placeholder="Search repositories"
+                  aria-label="Search repositories"
+                  className="h-9 w-full rounded-lg border border-line bg-surface-raised pl-9 pr-3 font-mono text-[13px] text-ink placeholder:text-ink-tertiary focus-ring sm:w-64"
+                />
               </div>
-              <button
-                type="button"
-                onClick={() => setRepositoriesOpen((open) => !open)}
-                aria-expanded={repositoriesOpen}
-                aria-controls="repository-list-content"
-                className="inline-flex h-9 shrink-0 items-center gap-2 rounded-xl border border-white/[0.09] bg-black/20 px-3 text-[11px] font-medium text-[#b9bac0] transition hover:border-white/[0.16] hover:bg-white/[0.05] hover:text-white focus-ring-dark"
+              <div
+                className="inline-flex self-start rounded-lg border border-line bg-surface-raised p-0.5 sm:self-auto"
+                aria-label="Sort repositories"
               >
-                {repositoriesOpen ? (
-                  <>
-                    Collapse
-                    <ChevronUp size={14} />
-                  </>
-                ) : (
-                  <>
-                    Expand
-                    <ChevronDown size={14} />
-                  </>
-                )}
-              </button>
+                <button
+                  type="button"
+                  aria-pressed={sort === "stars"}
+                  onClick={() => setSort("stars")}
+                  className={`rounded-md px-3 py-1.5 font-mono text-[11px] font-medium transition focus-ring ${
+                    sort === "stars" ? "bg-ink text-surface" : "text-ink-tertiary hover:text-ink"
+                  }`}
+                >
+                  Most starred
+                </button>
+                <button
+                  type="button"
+                  aria-pressed={sort === "newest"}
+                  onClick={() => setSort("newest")}
+                  className={`rounded-md px-3 py-1.5 font-mono text-[11px] font-medium transition focus-ring ${
+                    sort === "newest" ? "bg-ink text-surface" : "text-ink-tertiary hover:text-ink"
+                  }`}
+                >
+                  Recently added
+                </button>
+              </div>
             </div>
+          </Reveal>
 
-            {repositoriesOpen && (
-              <div id="repository-list-content">
-                <div className="mt-5 flex flex-col gap-2.5 sm:flex-row sm:items-end sm:justify-end">
-                  <div className="relative">
-                    <Search size={14} className="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-ink-tertiary" />
-                    <input
-                      type="search"
-                      value={q}
-                      onChange={(event) => setQ(event.target.value)}
-                      placeholder="Search repositories"
-                      aria-label="Search repositories"
-                      className="h-10 w-full rounded-xl border border-white/[0.09] bg-black/20 pl-10 pr-3 text-sm text-white placeholder:text-ink-tertiary focus-ring-dark sm:w-72"
-                    />
-                  </div>
-                  <div
-                    className="inline-flex self-start rounded-lg border border-white/[0.08] bg-black/20 p-1 sm:self-auto"
-                    aria-label="Sort repositories"
-                  >
-                    <button
-                      type="button"
-                      aria-pressed={sort === "stars"}
-                      onClick={() => setSort("stars")}
-                      className={`rounded-md px-3 py-1.5 text-[11px] font-medium transition focus-ring-dark ${
-                        sort === "stars" ? "bg-white text-black" : "text-ink-tertiary hover:text-white"
-                      }`}
-                    >
-                      Most starred
-                    </button>
-                    <button
-                      type="button"
-                      aria-pressed={sort === "newest"}
-                      onClick={() => setSort("newest")}
-                      className={`rounded-md px-3 py-1.5 text-[11px] font-medium transition focus-ring-dark ${
-                        sort === "newest" ? "bg-white text-black" : "text-ink-tertiary hover:text-white"
-                      }`}
-                    >
-                      Recently added
-                    </button>
-                  </div>
-                </div>
-
-                <div
-                  ref={repositoryScrollRef}
-                  className="openvuln-scrollbar mt-5 max-h-[520px] overflow-y-auto overscroll-contain border-y border-white/[0.07] pr-2"
-                  tabIndex={0}
-                  aria-label="Scanned repository list"
-                >
-              {projects.isLoading ? (
-                <div className="space-y-3 py-6">
-                  {Array.from({ length: 5 }).map((_, index) => (
-                    <div key={index} className="h-24 animate-pulse rounded-xl bg-white/[0.035]" />
-                  ))}
-                </div>
-              ) : projects.isError ? (
-                <EmptyState icon={Shield} title="Could not load repositories" description="The OpenVuln API may be unavailable." />
-              ) : filtered.length === 0 ? (
-                <EmptyState
-                  icon={Shield}
-                  title={q ? "No matching repositories" : "No repositories yet"}
-                  description={
-                    q
-                      ? "Try a different repository name."
-                      : "Submit the first open-source repository to be scanned by VulnHunter."
-                  }
-                  action={!q ? <Link to="/submit"><Button>Submit a repository</Button></Link> : undefined}
-                />
-              ) : (
-                <>
-                  {filtered.map((project) => (
-                    <ProjectRow key={project.id} project={project} compact />
-                  ))}
-                  <div ref={sentinelRef} className="h-px" />
-                  {projects.isFetchingNextPage && (
-                    <div className="py-5 text-center font-mono text-xs text-ink-tertiary">Loading more…</div>
-                  )}
-                </>
-              )}
-                </div>
-
-                <div className="mt-4 flex items-center justify-between gap-3 font-mono text-[10px] text-ink-tertiary">
-                  <span>{(projects.data?.pages[0]?.total ?? 0).toLocaleString()} repositories indexed</span>
-                  <a href="#top" className="hover:text-white">Back to top ↑</a>
-                </div>
+          {/* 表头 */}
+          <div className="mt-6 hidden grid-cols-[minmax(0,2.4fr)_110px_78px_150px_70px_150px] gap-x-5 border-b border-line px-2 pb-2.5 font-mono text-[10px] font-medium uppercase tracking-[0.16em] text-ink-tertiary md:grid">
+            <span>Repository</span>
+            <span>Language</span>
+            <span>Stars</span>
+            <span>Last scan</span>
+            <span>Findings</span>
+            <span>Severity</span>
+          </div>
+          <div className="mt-6 border-b border-line md:hidden" aria-hidden />
+
+          <div aria-label="Scanned repository list">
+            {projects.isLoading ? (
+              <div className="space-y-2 py-5">
+                {Array.from({ length: 6 }).map((_, index) => (
+                  <div key={index} className="h-14 animate-pulse rounded-lg bg-surface-sunken/70" />
+                ))}
               </div>
+            ) : projects.isError ? (
+              <EmptyState icon={Shield} title="Could not load repositories" description="The OpenVuln API may be unavailable." />
+            ) : filtered.length === 0 ? (
+              <EmptyState
+                icon={Shield}
+                title={q ? "No matching repositories" : "No repositories yet"}
+                description={
+                  q
+                    ? "Try a different repository name."
+                    : "Submit the first open-source repository to be scanned by VulnHunter."
+                }
+                action={!q ? <Link to="/submit"><Button>Submit a repository</Button></Link> : undefined}
+              />
+            ) : (
+              <>
+                {filtered.map((project) => (
+                  <LedgerRow key={project.id} project={project} />
+                ))}
+                <div ref={sentinelRef} className="h-px" />
+                {projects.isFetchingNextPage && (
+                  <div className="py-5 text-center font-mono text-xs text-ink-tertiary">Loading more…</div>
+                )}
+              </>
             )}
-          </section>
+          </div>
+
+          <div className="mt-4 flex items-center justify-between gap-3 border-t border-line pt-3.5 font-mono text-[10px] uppercase tracking-[0.1em] text-ink-tertiary">
+            <span>{(projects.data?.pages[0]?.total ?? 0).toLocaleString()} repositories indexed</span>
+            <a href="#top" className="transition-colors hover:text-ink">Back to top ↑</a>
+          </div>
+        </section>
+      </main>
 
-        </main>
-      </div>
     </div>
   );
 }

src/features/my/MyProjectsPage.tsx

@@ -56,7 +56,7 @@ export function MyProjectsPage() {
             action={
               <Link
                 to="/submit"
-                className="inline-flex h-9 items-center rounded-md bg-[#ebecf0] px-3.5 text-sm font-medium text-[#0d0d0f] hover:bg-white"
+                className="inline-flex h-9 items-center rounded-md bg-ink px-3.5 text-sm font-medium text-surface hover:bg-white"
               >
                 Submit a project
               </Link>

src/features/project/OwnerFindings.tsx

@@ -130,7 +130,7 @@ export function OwnerFindings({
               type="checkbox"
               checked={allChecked}
               onChange={toggleAll}
-              className="h-4 w-4 rounded border-line accent-[#28D1FF]"
+              className="h-4 w-4 rounded border-line accent-[#EDEFF4]"
             />
             Select undisclosed ({disclosable.length})
           </label>
@@ -201,7 +201,7 @@ export function OwnerFindings({
                     onClick={(e) => e.stopPropagation()}
                     onChange={() => toggle(f.id)}
                     aria-label={disclosed ? `${f.finding_key} already disclosed` : `Select ${f.finding_key}`}
-                    className="mt-1 h-4 w-4 shrink-0 rounded border-line accent-[#28D1FF] disabled:opacity-40"
+                    className="mt-1 h-4 w-4 shrink-0 rounded border-line accent-[#EDEFF4] disabled:opacity-40"
                   />
                   <div className="min-w-0 flex-1">
                     <div className="flex flex-wrap items-center gap-x-2 gap-y-1">

src/features/project/ProjectPage.tsx

@@ -491,13 +491,13 @@ function ScanProgressPage({
           : "VulnHunter is analyzing the repository. Results will appear after the scan completes.";
 
   return (
-    <div className="openvuln-home fixed inset-0 z-50 overflow-y-auto bg-black text-white">
+    <div className="fixed inset-0 z-50 overflow-y-auto bg-surface text-ink">
       <div className="openvuln-glow pointer-events-none absolute inset-0 -z-10" />
 
       <header className="flex items-center justify-between px-5 py-5 sm:px-8 sm:py-7">
         <Link
           to="/"
-          className="inline-flex items-center gap-2 rounded-full border border-[#333] bg-[#030303] px-3.5 py-2 text-xs font-medium text-[#acacb0] transition hover:border-[#484a58] hover:bg-[#111216] hover:text-white focus-ring-dark"
+          className="inline-flex items-center gap-2 rounded-full border border-line bg-surface-raised px-3.5 py-2 text-xs font-medium text-ink-secondary transition hover:border-line-strong hover:bg-surface-sunken hover:text-ink focus-ring"
         >
           <ArrowLeft size={14} />
           OpenVuln
@@ -507,7 +507,7 @@ function ScanProgressPage({
             href={htmlUrl}
             target="_blank"
             rel="noreferrer"
-            className="inline-flex items-center gap-2 rounded-full border border-[#333] bg-[#030303] px-3.5 py-2 text-xs font-medium text-[#acacb0] transition hover:border-[#484a58] hover:bg-[#111216] hover:text-white focus-ring-dark"
+            className="inline-flex items-center gap-2 rounded-full border border-line bg-surface-raised px-3.5 py-2 text-xs font-medium text-ink-secondary transition hover:border-line-strong hover:bg-surface-sunken hover:text-ink focus-ring"
           >
             <Github size={14} />
             GitHub
@@ -516,45 +516,45 @@ function ScanProgressPage({
       </header>
 
       <main className="mx-auto flex min-h-[calc(100vh-88px)] w-full max-w-4xl flex-col items-center justify-center px-5 pb-16 pt-8 text-center sm:px-8">
-        <div className="openvuln-brand flex h-16 w-16 items-center justify-center rounded-2xl border border-white/15 bg-[#151619] shadow-[0_18px_64px_rgba(0,0,0,0.5)]">
+        <div className="openvuln-brand flex h-16 w-16 items-center justify-center rounded-2xl border border-line bg-surface-raised shadow-[0_20px_56px_-20px_rgba(0,0,0,0.7)]">
           <LoaderCircle
             size={28}
-            className="animate-spin text-[#c9ccd6] motion-reduce:animate-none"
+            className="animate-spin text-accent-600 motion-reduce:animate-none"
             strokeWidth={1.7}
           />
         </div>
 
-        <p className="mt-7 font-mono text-[11px] uppercase tracking-[0.22em] text-[#85868d]">
+        <p className="mt-7 font-mono text-[11px] uppercase tracking-[0.22em] text-ink-tertiary">
           {justSubmitted ? "Repository added" : "Live scan status"}
         </p>
-        <h1 className="openvuln-title mt-3 text-balance text-3xl font-medium leading-tight sm:text-5xl">
+        <h1 className="openvuln-title mt-3 text-balance font-display text-3xl font-medium leading-tight sm:text-5xl">
           {statusLabel}
         </h1>
 
-        <div className="mt-5 flex flex-wrap items-center justify-center gap-2 text-sm text-[#acacb0]">
-          <span className="text-[#f0f2f6]">{owner}</span>
-          <span className="text-[#5f6067]">/</span>
-          <span className="text-[#f0f2f6]">{repo}</span>
+        <div className="mt-5 flex flex-wrap items-center justify-center gap-2 text-sm text-ink-secondary">
+          <span className="text-ink">{owner}</span>
+          <span className="text-ink-tertiary">/</span>
+          <span className="text-ink">{repo}</span>
           {branch && (
             <>
-              <span className="text-[#5f6067]">·</span>
-              <span className="font-mono text-xs text-[#85868d]">{branch}</span>
+              <span className="text-ink-tertiary">·</span>
+              <span className="font-mono text-xs text-ink-tertiary">{branch}</span>
             </>
           )}
         </div>
 
-        <div className="openvuln-composer mt-9 w-full max-w-2xl rounded-[22px] border border-[#333] bg-[#111216] px-5 py-5 text-left shadow-[0_24px_90px_rgba(0,0,0,0.52)] sm:px-6">
+        <div className="openvuln-composer mt-9 w-full max-w-2xl rounded-2xl border border-line bg-surface-raised px-5 py-5 text-left shadow-[0_24px_64px_-24px_rgba(0,0,0,0.7)] sm:px-6">
           <div className="flex items-center gap-3">
             <span className="relative flex h-2.5 w-2.5 shrink-0">
-              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#aeb0ba] opacity-50 motion-reduce:animate-none" />
-              <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-[#d5d7df]" />
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-accent-600 opacity-40 motion-reduce:animate-none" />
+              <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-accent-600" />
             </span>
-            <p className="text-sm font-medium text-[#f0f2f6]">{statusLabel}</p>
+            <p className="text-sm font-medium text-ink">{statusLabel}</p>
           </div>
-          <p className="mt-3 text-sm leading-6 text-[#85868d]">{detail}</p>
+          <p className="mt-3 text-sm leading-6 text-ink-secondary">{detail}</p>
           {!loading && (
-            <div className="mt-5 border-t border-[#27282e] pt-4">
-              <div className="flex items-center justify-between text-xs text-[#66676e]">
+            <div className="mt-5 border-t border-line pt-4">
+              <div className="flex items-center justify-between text-xs text-ink-tertiary">
                 <span>Current stage</span>
                 <span>
                   {currentStage + 1} of {stages.length}
@@ -569,20 +569,20 @@ function ScanProgressPage({
                       key={stageLabel}
                       className={`flex min-w-0 flex-col items-center gap-2 rounded-xl border px-2 py-3 text-center ${
                         current
-                          ? "border-[#4b4d58] bg-[#1a1b20] text-[#f0f2f6]"
+                          ? "border-accent-200 bg-accent-50 text-ink"
                           : complete
-                            ? "border-[#303139] bg-[#151619] text-[#acacb0]"
-                            : "border-[#24252a] bg-[#121317] text-[#5f6067]"
+                            ? "border-line bg-surface-sunken text-ink-secondary"
+                            : "border-line bg-surface text-ink-tertiary"
                       }`}
                       aria-current={current ? "step" : undefined}
                     >
                       <span
                         className={`flex h-6 w-6 items-center justify-center rounded-full border text-[11px] ${
                           current
-                            ? "border-[#b7bac5] bg-[#d5d7df] text-[#111216]"
+                            ? "border-transparent bg-ink text-surface"
                             : complete
-                              ? "border-[#555762] bg-[#26272d] text-[#d5d7df]"
-                              : "border-[#303139] text-[#5f6067]"
+                              ? "border-line bg-surface text-ink-secondary"
+                              : "border-line text-ink-tertiary"
                         }`}
                       >
                         {complete ? <Check size={13} strokeWidth={2.2} /> : index + 1}
@@ -594,7 +594,7 @@ function ScanProgressPage({
                   );
                 })}
               </ol>
-              <p className="mt-3 text-xs text-[#66676e]">
+              <p className="mt-3 text-xs text-ink-tertiary">
                 This shows status stages, not elapsed-time progress. Refreshes every 5 seconds.
               </p>
             </div>

src/features/project/VersionBar.tsx

@@ -83,7 +83,7 @@ export function VersionBar({
           onClick={() => setOpen((v) => !v)}
           aria-expanded={open}
           aria-haspopup="menu"
-          className="inline-flex h-8 items-center gap-1.5 rounded-full border border-line bg-surface-raised px-3 text-ink transition-colors hover:border-[#484a58] hover:bg-surface-sunken focus-ring"
+          className="inline-flex h-8 items-center gap-1.5 rounded-full border border-line bg-surface-raised px-3 text-ink transition-colors hover:border-line-strong hover:bg-surface-sunken focus-ring"
         >
           <CircleCheck size={13} className="text-success" />
           <span className="font-mono text-[12px]">{viewing?.label ?? "—"}</span>

src/features/submit/SubmitPage.tsx

@@ -39,15 +39,15 @@ export function SubmitPage() {
               every submission — only maintainers and admins can start a scan.
             </p>
             <a
-              href={loginUrl("/submit")}
+              href={loginUrl()}
               onClick={(e) => {
                 if (window.top && window.top !== window.self) {
                   e.preventDefault();
-                  navigateToLogin("/submit");
+                  navigateToLogin();
                   window.dispatchEvent(new Event("ov-oauth-popup-opened"));
                 }
               }}
-              className="mt-5 inline-flex h-10 items-center gap-2 rounded-md bg-[#ebecf0] px-4 text-sm font-medium text-[#0d0d0f] transition-colors hover:bg-white focus-ring"
+              className="mt-5 inline-flex h-10 items-center gap-2 rounded-md bg-ink px-4 text-sm font-medium text-surface transition-colors hover:bg-white focus-ring"
             >
               <Github size={16} />
               Sign in with GitHub

src/index.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 @layer base {
-  /* 深色体系：原生控件（select 弹层/滚动条/checkbox）跟随深色 */
+  /* 暗色控制台体系：原生控件（select 弹层/滚动条/checkbox）跟随暗色 */
   :root {
     color-scheme: dark;
   }
@@ -15,27 +15,29 @@
   }
 
   select option {
-    background-color: #111216;
-    color: #f0f2f6;
+    background-color: #12151c;
+    color: #edeff4;
   }
 
   body {
     @apply bg-surface text-ink font-sans;
+    font-feature-settings: "cv05" 1, "ss01" 1;
   }
 
   ::selection {
-    background: rgba(40, 209, 255, 0.24);
-    color: #f0f2f6;
+    background: rgba(237, 239, 244, 0.2);
+    color: #ffffff;
   }
 }
 
 @layer utilities {
   .focus-ring {
-    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-black;
+    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0C0E13];
   }
 
+  /* 历史命名保留：与 .focus-ring 一致 */
   .focus-ring-dark {
-    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black;
+    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0C0E13];
   }
 
   .text-balance {
@@ -44,38 +46,114 @@
 }
 
 @layer components {
-  .openvuln-home {
-    font-family:
-      -apple-system,
-      BlinkMacSystemFont,
-      "Segoe UI",
-      Roboto,
-      "Helvetica Neue",
-      Arial,
-      "Noto Sans",
-      sans-serif,
-      "Apple Color Emoji",
-      "Segoe UI Emoji",
-      "Segoe UI Symbol",
-      "Noto Color Emoji";
+  .openvuln-title {
+    color: #edeff4;
+    letter-spacing: -0.02em;
   }
 
-  .openvuln-title {
-    color: #f1f1f3;
+  /* 大字报标题：第一行空心描边（hover 时微微填充） */
+  .openvuln-outline {
+    color: transparent;
+    -webkit-text-stroke: 1.5px rgba(237, 239, 244, 0.56);
+    transition: color 500ms cubic-bezier(0.22, 1, 0.36, 1);
   }
 
-  .openvuln-glow {
-    background: radial-gradient(ellipse 48% 38% at 50% 18%, rgba(255, 255, 255, 0.055), transparent 72%);
+  h1:hover .openvuln-outline {
+    color: rgba(237, 239, 244, 0.12);
   }
 
-  .openvuln-home::after {
-    position: absolute;
-    inset: 0;
-    z-index: -1;
+  @supports not ((-webkit-text-stroke: 1px white)) {
+    .openvuln-outline {
+      color: rgba(237, 239, 244, 0.56);
+    }
+  }
+
+  /* 大字报标题整行印刷式抬升入场 */
+  .ov-line-mask {
+    display: block;
+    overflow: hidden;
+    padding-bottom: 0.12em;
+  }
+
+  .ov-line {
+    display: block;
+    transform: translateY(112%);
+    animation: ov-line-up 850ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
+  }
+
+  .openvuln-title-mark {
+    position: relative;
+    display: inline-block;
+    -webkit-text-stroke: 0;
+  }
+
+  .openvuln-title-comma {
+    display: inline-block;
+    margin-left: 4px;
+  }
+
+  .openvuln-title-period {
+    width: 0.1em;
+    height: 0.1em;
+    margin-left: 0.1em;
+    border-radius: 999px;
+    background: rgba(237, 239, 244, 0.88);
+  }
+
+  @keyframes ov-line-up {
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  /* 滚动进入视口的克制上浮 */
+  .ov-reveal {
+    opacity: 0;
+    transform: translateY(14px);
+    transition:
+      opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
+      transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  .ov-reveal.ov-in {
+    opacity: 1;
+    transform: none;
+  }
+
+  /* 顶栏导航的下划线扫入 */
+  .ov-navlink {
+    position: relative;
+  }
+
+  .ov-navlink::after {
     content: "";
-    pointer-events: none;
-    opacity: 0.04;
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -4px;
+    height: 1px;
+    background: #edeff4;
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  .ov-navlink:hover::after,
+  .ov-navlink:focus-visible::after {
+    transform: scaleX(1);
+  }
+
+  /* 大字报标题：第二行实心，带极轻的金属纵向光泽 */
+  .openvuln-solid {
+    background: linear-gradient(180deg, #ffffff 0%, #eceef2 52%, #c2c8d2 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+  }
+
+  /* 极淡的顶部纵深，用于扫描进度页 */
+  .openvuln-glow {
+    background: radial-gradient(ellipse 52% 30% at 50% 0%, rgba(237, 239, 244, 0.04), transparent 70%);
   }
 
   .openvuln-brand {
@@ -87,31 +165,40 @@
   }
 
   .openvuln-panel {
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 26px;
-    background:
-      linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
-      rgba(16, 17, 21, 0.82);
-    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
-    backdrop-filter: blur(18px);
-  }
-
-  .openvuln-scrollbar {
-    scrollbar-width: thin;
-    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+    border: 1px solid #232833;
+    border-radius: 16px;
+    background: #12151c;
+    box-shadow: 0 20px 48px -24px rgba(0, 0, 0, 0.6);
   }
 
-  .openvuln-scrollbar::-webkit-scrollbar {
-    width: 6px;
+  /* hero 背景视频：原生暗色线网动画，向下淡入页面底色 */
+  .openvuln-hero-video {
+    position: absolute;
+    inset: 0 0 auto 0;
+    z-index: -10;
+    height: 720px;
+    overflow: hidden;
+    pointer-events: none;
   }
 
-  .openvuln-scrollbar::-webkit-scrollbar-track {
-    background: transparent;
+  .openvuln-hero-video video {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
   }
 
-  .openvuln-scrollbar::-webkit-scrollbar-thumb {
-    border-radius: 999px;
-    background: rgba(255, 255, 255, 0.2);
+  .openvuln-hero-video::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      to bottom,
+      rgba(12, 14, 19, 0.38) 0%,
+      rgba(12, 14, 19, 0.18) 34%,
+      rgba(12, 14, 19, 0.55) 62%,
+      rgba(12, 14, 19, 0.94) 86%,
+      #0c0e13 100%
+    );
   }
 }
 
@@ -149,11 +236,30 @@
     animation: none;
     transform: translateX(200%);
   }
+
+  .openvuln-hero-video video {
+    display: none;
+  }
+
+  .ov-line {
+    animation: none;
+    transform: none;
+  }
+
+  .ov-reveal {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+
+  .ov-navlink::after {
+    transition: none;
+  }
 }
 
 body.openvuln-running {
   overflow: hidden;
-  background: #000;
+  background: #0c0e13;
 }
 
 body.openvuln-running .app-shell-chrome {

src/main.tsx

@@ -1,5 +1,10 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import "@fontsource-variable/inter";
+import "@fontsource-variable/space-grotesk";
+import "@fontsource/ibm-plex-mono/400.css";
+import "@fontsource/ibm-plex-mono/500.css";
+import "@fontsource/ibm-plex-mono/600.css";
 import "./index.css";
 import { App } from "./App";
 

src/shared/api/client.ts

@@ -76,7 +76,7 @@ export interface MeResponse {
 }
 
 /** GitHub OAuth login URL (full-page redirect). */
-export function loginUrl(returnTo: string): string {
+export function loginUrl(returnTo: string = currentReturnTo()): string {
   // 站内相对路径与白名单绝对地址（HF 部署回跳）都放行 —— 白名单校验在后端；
   // 仅协议相对 "//…" 一律拒绝（开放重定向的唯一真风险）。
   const safe = returnTo.startsWith("//") ? "/" : returnTo;

tailwind.config.js

@@ -4,48 +4,50 @@ export default {
   theme: {
     extend: {
       colors: {
-        // ── 深色视觉语言（对齐协作者着陆页，task-5ee34751 fish 定稿）──
+        // ── 暗色控制台视觉语言：石墨蓝黑分层，彩色只留给风险数据 ──
         surface: {
-          DEFAULT: "#000000",   // 页面底（openvuln-home bg-black）
-          raised: "#111216",    // 卡片（composer bg）
-          sunken: "#15161b",    // 井/hover（focus-within bg）
-          header: "#030303",    // 顶栏（pill bg）
+          DEFAULT: "#0C0E13",   // 页面底（void）
+          raised: "#12151C",    // 卡片/面板（graphite）
+          sunken: "#191D26",    // 井/hover 底
+          header: "#0C0E13",    // 顶栏
+        },
+        line: {
+          DEFAULT: "#232833",   // hairline 分隔线/边框
+          strong: "#37404F",    // hover 边框
         },
-        line: "#26272c",        // 分隔线/边框（#26272c ~ #2f3037）
         ink: {
-          DEFAULT: "#f0f2f6",   // 主文字
-          secondary: "#acacb0", // 次文字
-          tertiary: "#696a70",  // 辅助/placeholder
+          DEFAULT: "#EDEFF4",   // 主文字（暖白）
+          secondary: "#9BA3B0", // 次文字
+          tertiary: "#646C7A",  // 辅助/placeholder
         },
-        // 交互蓝：深色底链接/聚焦/进行中（Clouditera 规范深底 accent）
+        // 交互单色（phosphor 白）：链接/聚焦/进行中一律无彩，彩色专属数据
         accent: {
-          50: "rgba(40, 209, 255, 0.10)",
-          100: "rgba(40, 209, 255, 0.16)",
-          200: "rgba(40, 209, 255, 0.28)",
-          600: "#28D1FF",  // 深底主色（原 accent-dark）
-          700: "#5CDDFF",  // hover 亮一档
-          800: "#8AE6FF",
+          50: "rgba(237, 239, 244, 0.05)",
+          100: "rgba(237, 239, 244, 0.09)",
+          200: "rgba(237, 239, 244, 0.18)",
+          600: "#D7DBE2",
+          700: "#FFFFFF",
+          800: "#FFFFFF",
         },
-        // 功能色深底版：亮 ink + 半透明 bg，bar 用亮色
+        // 功能色（数据语义专用）：NVD 四档 红→橙→琥珀
         sev: {
-          critical: { ink: "#FF6B6B", bg: "rgba(242, 79, 79, 0.16)", bar: "#F24F4F" },
-          high:     { ink: "#F24F4F", bg: "rgba(242, 79, 79, 0.12)", bar: "#F24F4F" },
-          medium:   { ink: "#FF8A5C", bg: "rgba(255, 115, 60, 0.13)", bar: "#FF733C" },
-          low:      { ink: "#F7C530", bg: "rgba(247, 197, 48, 0.12)", bar: "#F7C530" },
+          critical: { ink: "#FF7A72", bg: "rgba(229, 72, 77, 0.14)", bar: "#E5484D" },
+          high:     { ink: "#FF9A8A", bg: "rgba(242, 96, 79, 0.12)", bar: "#F2604F" },
+          medium:   { ink: "#FFB37E", bg: "rgba(255, 138, 60, 0.12)", bar: "#FF8A3C" },
+          low:      { ink: "#F2CE60", bg: "rgba(240, 196, 58, 0.12)", bar: "#F0C43A" },
           // info：VH 兜底档，公众 UI 不展示，仅防御保留
-          info:     { ink: "#acacb0", bg: "rgba(172, 172, 176, 0.10)", bar: "#696a70" },
+          info:     { ink: "#9BA3B0", bg: "rgba(155, 163, 176, 0.10)", bar: "#646C7A" },
         },
-        ai: { DEFAULT: "#9285FF", bg: "rgba(146, 133, 255, 0.13)", ink: "#A79DFF" }, // AI 紫（深底）
-        success: { DEFAULT: "#3AD186", bg: "rgba(58, 209, 134, 0.12)", ink: "#3AD186" },
-        danger: "#F24F4F",
-        warning: "#FF733C",
-        running: { DEFAULT: "#28D1FF", bg: "rgba(40, 209, 255, 0.12)", ink: "#28D1FF" },
+        ai: { DEFAULT: "#9285FF", bg: "rgba(146, 133, 255, 0.12)", ink: "#A79DFF" },
+        success: { DEFAULT: "#34B87C", bg: "rgba(52, 184, 124, 0.12)", ink: "#57D69C" },
+        danger: "#F0655F",
+        warning: "#FF8A3C",
+        running: { DEFAULT: "#D7DBE2", bg: "rgba(237, 239, 244, 0.08)", ink: "#D7DBE2" },
       },
       fontFamily: {
-        // 协作者体系：系统字栈（着陆页 openvuln-home 同族）
-        display: ['-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', '"PingFang SC"', '"Microsoft YaHei"', 'sans-serif'],
-        sans: ['-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', '"PingFang SC"', '"Microsoft YaHei"', 'sans-serif'],
-        mono: ["ui-monospace", "SFMono-Regular", "Menlo", "Consolas", "monospace"],
+        display: ['"Space Grotesk Variable"', '"Inter Variable"', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', '"PingFang SC"', '"Microsoft YaHei"', 'sans-serif'],
+        sans: ['"Inter Variable"', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', '"PingFang SC"', '"Microsoft YaHei"', 'sans-serif'],
+        mono: ['"IBM Plex Mono"', 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Consolas', 'monospace'],
       },
       maxWidth: {
         "6xl": "72rem",