feat: prepare Zhinian desktop pilot

src/styles/globals.css

@@ -4,26 +4,25 @@
 
 @layer base {
   :root {
-    /* #f1ede1 */
-    --background: 45 36.4% 91.4%;
-    --foreground: 222.2 84% 4.9%;
+    --background: 210 38% 97%;
+    --foreground: 222 60% 6%;
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 222 60% 6%;
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 221.2 83.2% 53.3%;
+    --popover-foreground: 222 60% 6%;
+    --primary: 199 94% 32%;
     --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
+    --secondary: 205 46% 94%;
     --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
+    --muted: 205 44% 94%;
     --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
+    --accent: 199 80% 94%;
     --accent-foreground: 222.2 47.4% 11.2%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 221.2 83.2% 53.3%;
+    --border: 205 28% 88%;
+    --input: 205 28% 88%;
+    --ring: 199 94% 32%;
     --radius: 0.5rem;
   }
 
@@ -57,8 +56,52 @@
   }
 
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground antialiased;
     font-feature-settings: "rlig" 1, "calt" 1;
+    background:
+      linear-gradient(135deg, hsl(44 38% 96%) 0%, hsl(205 50% 97%) 46%, hsl(210 42% 96%) 100%);
+  }
+}
+
+@layer components {
+  .yinian-app-surface {
+    background:
+      linear-gradient(135deg, rgba(255, 252, 246, 0.92) 0%, rgba(246, 251, 255, 0.94) 44%, rgba(240, 247, 251, 0.96) 100%);
+  }
+
+  .yinian-panel {
+    @apply rounded-lg border border-slate-200/80 bg-white text-slate-950 shadow-none dark:border-white/10 dark:bg-slate-950/80 dark:text-slate-50;
+  }
+
+  .yinian-panel-soft {
+    @apply rounded-lg border border-[#D5E8F3]/75 bg-[#F8FBFE] text-slate-950 shadow-none dark:border-white/10 dark:bg-slate-950/80 dark:text-slate-50;
+  }
+
+  .yinian-visual-band {
+    position: relative;
+    overflow: hidden;
+    background: #ffffff;
+  }
+
+  .yinian-visual-band::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    display: none;
+  }
+
+  .yinian-visual-band > * {
+    position: relative;
+    z-index: 1;
+  }
+
+  .yinian-control {
+    @apply rounded-lg border border-slate-200/80 bg-white/80 shadow-none transition-colors hover:bg-white focus-visible:ring-[#0369A1]/25 dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10;
+  }
+
+  .yinian-subtle-lift {
+    @apply transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_16px_36px_rgba(15,23,42,0.07)];
   }
 }
 
@@ -169,4 +212,4 @@
   30% {
     transform: translateY(-4px);
   }
-}
+}