feat(public-frontend): 公开前端 UI 视觉升级

引入统一品牌主题(色阶/字体/阴影/动效),重做首页 hero、卡片、导航与页脚,统一各页面的卡片/输入框/按钮样式。

- tailwind: 新增 brand 色阶、Inter 字体、card/glow 阴影与 fade-up 动效
- index.html: 引入 Inter 字体与 theme-color/description meta
- index.css: 双径向渐变背景 + @layer 组件类(.card/.input/.btn-primary 等)
- App/Home/ProductView/Contribute/ApiDocs/Account: 套用新设计系统

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

public-frontend/src/components/ApiDocs.tsx

@@ -20,7 +20,7 @@ function CopyBtn({ text }: { text: string }) {
       className="text-gray-400 hover:text-gray-600"
       title="复制"
     >
-      {done ? <Check className="w-4 h-4 text-emerald-600" /> : <Copy className="w-4 h-4" />}
+      {done ? <Check className="w-4 h-4 text-brand-600" /> : <Copy className="w-4 h-4" />}
     </button>
   );
 }
@@ -39,7 +39,7 @@ function Code({ children }: { children: string }) {
 }
 
 function Method({ m }: { m: string }) {
-  const color = m === "GET" ? "bg-sky-100 text-sky-700" : "bg-emerald-100 text-emerald-700";
+  const color = m === "GET" ? "bg-sky-100 text-sky-700" : "bg-brand-100 text-brand-700";
   return <span className={`text-xs font-mono font-semibold rounded px-1.5 py-0.5 ${color}`}>{m}</span>;
 }
 
@@ -63,7 +63,7 @@ function Endpoint({
   response: string;
 }) {
   return (
-    <div className="bg-white border rounded-lg p-5">
+    <div className="card p-5">
       <div className="flex items-center gap-2 flex-wrap">
         <Method m={method} />
         <code className="text-sm text-gray-800 font-mono break-all">{path}</code>
@@ -105,7 +105,7 @@ function Endpoint({
 export default function ApiDocs({ onRegister }: { onRegister?: () => void }) {
   return (
     <div className="space-y-5">
-      <div className="bg-white border rounded-lg p-5">
+      <div className="card p-5">
         <h1 className="text-2xl font-bold text-gray-800">API 调用说明</h1>
         <p className="mt-2 text-gray-600 text-sm leading-relaxed">
           天工商品档案公共仓提供<strong>公开、只读、免鉴权</strong>的商品事实 REST API，任何人都可直接调用，
@@ -119,7 +119,7 @@ export default function ApiDocs({ onRegister }: { onRegister?: () => void }) {
           <ul className="mt-2 list-disc pl-5 text-gray-600 space-y-1">
             <li>
               无需 API Key / Token 即可直接 GET；匿名调用按来源 IP 累计共 <strong>1000</strong> 次，
-              用满后需<button onClick={onRegister} className="text-emerald-600 hover:underline">注册账号</button>
+              用满后需<button onClick={onRegister} className="text-brand-600 hover:underline">注册账号</button>
               领取更高配额密钥（见下文「鉴权与配额」）。
             </li>
             <li>
@@ -135,13 +135,13 @@ export default function ApiDocs({ onRegister }: { onRegister?: () => void }) {
         </div>
       </div>
 
-      <div className="bg-white border rounded-lg p-5">
+      <div className="card p-5">
         <h2 className="text-lg font-semibold text-gray-800">鉴权与配额</h2>
         <p className="mt-2 text-gray-600 text-sm leading-relaxed">
           API 默认<strong>匿名可用</strong>：无需任何凭证即可调用，但按来源 IP 计一个
           <strong>累计总配额（共 1000 次）</strong>，用满后返回
           <code className="font-mono">403</code>（错误码 <code className="font-mono">quota_exhausted</code>），
-          需<button onClick={onRegister} className="text-emerald-600 hover:underline">注册账号</button>
+          需<button onClick={onRegister} className="text-brand-600 hover:underline">注册账号</button>
           自助领取更高配额的 API Key。注册得到的密钥拥有更高的每分钟频率与累计调用配额，请求时通过请求头携带：
         </p>
         <div className="mt-3">