feat: 为多个组件和页面新增了样式文件，实现了玻璃效果和现代UI设计，并添加了 PiggyBankCard 组件。

src/index.css

@@ -1,4 +1,4 @@
-/* Global styles */
+/* Global styles - Ultra Premium */
 @import './styles/variables.css';
 @import './styles/themes.css';
 @import './styles/animations.css';
@@ -22,7 +22,6 @@ html {
 @media (max-width: 600px) {
   html {
     font-size: 14.5px;
-    /* Scale down UI slightly for mobile */
   }
 }
 
@@ -32,23 +31,60 @@ body {
   font-family: var(--font-sans);
   line-height: var(--leading-normal);
   background-color: var(--bg-primary);
-  /* Global Subtle Mesh Gradient */
-  /* Global Subtle Mesh Gradient (Premium Warmth) */
+
+  /* Ultra Premium Aurora Background - Animated */
   background-image:
-    radial-gradient(at 0% 0%, rgba(217, 119, 6, 0.15) 0px, transparent 50%),
-    radial-gradient(at 100% 0%, rgba(30, 41, 59, 0.1) 0px, transparent 50%),
-    radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.1) 0px, transparent 50%),
-    radial-gradient(at 0% 100%, rgba(251, 191, 36, 0.12) 0px, transparent 50%);
+    radial-gradient(at 0% 0%, rgba(217, 119, 6, 0.18) 0px, transparent 50%),
+    radial-gradient(at 100% 0%, rgba(59, 130, 246, 0.18) 0px, transparent 50%),
+    radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.18) 0px, transparent 50%),
+    radial-gradient(at 0% 100%, rgba(16, 185, 129, 0.12) 0px, transparent 50%),
+    radial-gradient(at 50% 50%, rgba(255, 255, 255, 0.5) 0px, transparent 70%);
   background-attachment: fixed;
+  background-size: 120% 120%;
+  /* Larger to allow movement */
+  animation: aurora-gradient 20s ease-in-out infinite alternate;
+
   color: var(--text-primary);
   transition: background-color var(--duration-normal) var(--ease-in-out),
     color var(--duration-fast) var(--ease-in-out);
+
+  /* Subtle Grain Texture for reduced banding and analog feel */
+  position: relative;
 }
 
-/* Custom Scrollbar */
+/* Noise overlay */
+body::after {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9999;
+  opacity: 0.03;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+}
+
+[data-theme="dark"] body {
+  background-image:
+    radial-gradient(at 0% 0%, rgba(217, 119, 6, 0.2) 0px, transparent 60%),
+    radial-gradient(at 100% 0%, rgba(59, 130, 246, 0.2) 0px, transparent 60%),
+    radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.2) 0px, transparent 60%),
+    radial-gradient(at 0% 100%, rgba(16, 185, 129, 0.15) 0px, transparent 60%);
+  animation: aurora-gradient 25s ease-in-out infinite alternate;
+}
+
+[data-theme="dark"] body::after {
+  opacity: 0.05;
+  filter: invert(1);
+}
+
+/* Hidden Scrollbar (Clean UI) */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 0px;
+  height: 0px;
+  background: transparent;
 }
 
 ::-webkit-scrollbar-track {
@@ -56,12 +92,16 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(156, 163, 175, 0.3);
-  border-radius: 4px;
+  background: transparent;
+  display: none;
 }
 
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(156, 163, 175, 0.5);
+/* Firefox Scrollbar */
+* {
+  scrollbar-width: none;
+  /* Hide scrollbar in Firefox */
+  -ms-overflow-style: none;
+  /* Hide scrollbar in IE/Edge */
 }
 
 /* Reset default styles */
@@ -73,7 +113,7 @@ h5,
 h6 {
   margin: 0;
   font-family: 'Outfit', sans-serif;
-  /* Headings use Outfit */
+  letter-spacing: -0.02em;
 }
 
 p {
@@ -115,7 +155,7 @@ button {
   outline: 2px solid var(--accent-primary);
   outline-offset: 2px;
   box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.2);
-  border-radius: 4px;
+  border-radius: 6px;
 }
 
 /* Reduced Motion */