From 74854d507c402110ebbd7693b195c271ce776d1a Mon Sep 17 00:00:00 2001
From: shunli <shunli@qq.com>
Date: Thu, 5 Mar 2026 18:38:56 +0800
Subject: [PATCH] =?UTF-8?q?style(css):=20=E4=BC=98=E5=8C=96=E8=A1=A8?=
 =?UTF-8?q?=E5=A4=B4=E4=B8=AD=E6=96=87=E5=AD=97=E4=BD=93=E5=8F=AF=E8=AF=BB?=
 =?UTF-8?q?=E6=80=A7=E5=B9=B6=E6=B7=BB=E5=8A=A0=E4=B8=8B=E6=8B=89=E6=A1=86?=
 =?UTF-8?q?=E9=80=9A=E7=94=A8=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/index.css | 88 +++++++++++++++++++++++++++++++++++++-------
 1 file changed, 75 insertions(+), 13 deletions(-)

diff --git a/client/src/index.css b/client/src/index.css
index c32e33bf..1803f094 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,10 +1,9 @@
 /*
   Style tokens source (single-direction sync):
-  - /home/shunli/Projects/hyb-web
-  - commit: unavailable_local_reference
+  - Extracted from Stitch MCP AI-generated Design Preview (B2B SaaS Theme)
 */
 
-@import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;700;900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
 @import "./styles/mobile-touch.css";
 
 @tailwind base;
@@ -13,36 +12,99 @@
 
 @layer base {
   body {
-    @apply bg-background-light text-slate-900 font-sans antialiased selection:bg-primary selection:text-white;
+    @apply bg-zinc-50 font-sans text-zinc-900 antialiased selection:bg-zinc-900 selection:text-white;
   }
 
   #root {
-    @apply min-h-screen;
+    @apply min-h-screen flex flex-col;
   }
 }
 
 @layer components {
+
+  /* Layout */
   .layout-container {
-    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
+    @apply mx-auto w-full px-4 sm:px-6 lg:px-8;
   }
 
+  /* Buttons */
   .btn-primary {
-    @apply rounded-lg bg-primary px-4 py-2 font-bold text-white transition-colors hover:bg-primary-600;
+    @apply flex items-center justify-center gap-2 px-4 py-2 bg-zinc-900 text-white rounded-lg text-sm font-bold hover:bg-zinc-800 transition-all shadow-sm;
   }
 
   .btn-secondary {
-    @apply rounded-lg border border-slate-200 bg-white px-4 py-2 font-medium text-slate-700 transition-colors hover:bg-slate-50;
+    @apply flex items-center justify-center gap-2 px-3 py-2 bg-white border border-zinc-200 rounded-lg text-sm font-medium text-zinc-700 hover:bg-zinc-50 transition-colors shadow-sm;
   }
 
+  .btn-ghost {
+    @apply text-zinc-400 hover:text-zinc-600 p-1 rounded-md transition-colors;
+  }
+
+  /* Cards */
   .card-std {
-    @apply rounded-xl border border-slate-200 bg-white p-6 text-left shadow-sm transition-all hover:shadow-md;
+    @apply bg-white p-6 rounded-xl shadow-sm ring-1 ring-zinc-900/5 transition-all;
   }
 
   .card-title {
-    @apply mb-2 text-xl font-bold text-slate-900;
+    @apply text-sm font-medium text-zinc-500 mb-1;
   }
 
-  .card-desc {
-    @apply text-slate-600;
+  .card-value {
+    @apply text-3xl font-bold text-zinc-900 tracking-tight;
   }
-}
+
+  /* Forms */
+  .input-std {
+    @apply h-10 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 shadow-sm outline-none transition-colors focus:border-zinc-400 focus:ring-1 focus:ring-zinc-400;
+  }
+
+  .select-std {
+    @apply h-10 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-700 shadow-sm outline-none transition-colors focus:border-zinc-400 focus:ring-1 focus:ring-zinc-400;
+  }
+
+  .select-sm {
+    @apply h-8 rounded-md border border-zinc-200 bg-white px-2 py-1 text-xs font-medium text-zinc-600 shadow-sm outline-none transition-colors focus:border-zinc-400 focus:ring-1 focus:ring-zinc-400;
+  }
+
+  /* Tables */
+  .table-container {
+    @apply bg-white rounded-xl shadow-sm ring-1 ring-zinc-900/5 overflow-hidden;
+  }
+
+  .table-header {
+    @apply bg-zinc-50/50 border-b border-zinc-100;
+  }
+
+  .table-th {
+    @apply px-6 py-4 text-xs font-bold text-zinc-500 text-left;
+  }
+
+  .table-row {
+    @apply transition-colors hover:bg-zinc-50/80;
+  }
+
+  .table-td {
+    @apply px-6 py-4 text-sm text-zinc-600;
+  }
+
+  .table-td-strong {
+    @apply px-6 py-4 text-sm font-bold text-zinc-900;
+  }
+
+  /* Badges */
+  .badge-success {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/10;
+  }
+
+  .badge-warning {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-600/10;
+  }
+
+  .badge-error {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10;
+  }
+
+  .badge-neutral {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-zinc-100 text-zinc-700 ring-1 ring-inset ring-zinc-600/10;
+  }
+}
\ No newline at end of file