feat: 新增 Home 页面样式，采用 Glassmorphism 风格并优化布局和组件。

src/pages/Home/Home.css

@@ -412,17 +412,18 @@
 .retry-btn:hover {
   background-color: var(--accent-primary-hover);
   transform: translateY(-1px);
+}
 
-  /* Content Columns */
-  .content-columns {
+/* Content Columns */
+.content-columns {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: var(--spacing-lg);
   /* Reduced from xl */
-  }
+}
 
-  /* Recent Transactions */
-  .recent-transactions-section {
+/* Recent Transactions */
+.recent-transactions-section {
   background: var(--glass-panel-bg);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-xl);
@@ -431,25 +432,25 @@
   flex-direction: column;
   max-height: 480px;
   box-shadow: var(--shadow-sm);
-  }
+}
 
-  .section-header {
+.section-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: var(--spacing-md);
   padding-bottom: var(--spacing-sm);
   border-bottom: 1px solid var(--divider-color);
-  }
+}
 
-  .section-header h2 {
+.section-header h2 {
   font-size: 1.125rem;
   font-weight: 700;
   color: var(--color-text);
   margin: 0;
-  }
+}
 
-  .view-all-link {
+.view-all-link {
   color: var(--color-primary);
   font-size: 0.85rem;
   font-weight: 600;
@@ -460,22 +461,22 @@
   border-radius: var(--radius-full);
   transition: background 0.2s;
   background: rgba(var(--color-primary-rgb), 0.1);
-  }
+}
 
-  .view-all-link:hover {
+.view-all-link:hover {
   background: rgba(var(--color-primary-rgb), 0.2);
-  }
+}
 
-  .transaction-list-compact {
+.transaction-list-compact {
   display: flex;
   flex-direction: column;
   gap: 8px;
   /* Added gap */
   overflow-y: auto;
   padding-right: 4px;
-  }
+}
 
-  .transaction-row {
+.transaction-row {
   display: flex;
   align-items: center;
   padding: 0.75rem;
@@ -484,19 +485,19 @@
   transition: all 0.2s ease;
   background: transparent;
   border: 1px solid transparent;
-  }
+}
 
-  .transaction-row:last-child {
+.transaction-row:last-child {
   border-bottom: none;
-  }
+}
 
-  .transaction-row:hover {
+.transaction-row:hover {
   background: var(--bg-hover);
   border-color: var(--glass-border);
   transform: translateX(2px);
-  }
+}
 
-  .transaction-icon {
+.transaction-icon {
   width: 42px;
   height: 42px;
   border-radius: 14px;
@@ -506,68 +507,68 @@
   margin-right: 1rem;
   font-size: 1.2rem;
   flex-shrink: 0;
-  }
+}
 
-  .transaction-icon.income {
+.transaction-icon.income {
   background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.05));
   color: var(--color-success);
-  }
+}
 
-  .transaction-icon.expense {
+.transaction-icon.expense {
   background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.05));
   color: var(--color-error);
-  }
+}
 
-  .transaction-details {
+.transaction-details {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   gap: 2px;
-  }
+}
 
-  .transaction-category {
+.transaction-category {
   font-weight: 600;
   font-size: 0.95rem;
   color: var(--color-text);
-  }
+}
 
-  .transaction-note-compact {
+.transaction-note-compact {
   font-size: 0.8rem;
   color: var(--color-text-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  }
+}
 
-  .transaction-meta {
+.transaction-meta {
   text-align: right;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 2px;
-  }
+}
 
-  .transaction-amount-compact {
+.transaction-amount-compact {
   font-family: 'Outfit', sans-serif;
   font-weight: 700;
   font-size: 1rem;
-  }
+}
 
-  .transaction-amount-compact.income {
+.transaction-amount-compact.income {
   color: var(--color-success);
-  }
+}
 
-  .transaction-amount-compact.expense {
+.transaction-amount-compact.expense {
   color: var(--color-text);
-  }
+}
 
-  .transaction-time {
+.transaction-time {
   font-size: 0.75rem;
   color: var(--color-text-muted);
-  }
+}
 
-  .empty-state-compact {
+.empty-state-compact {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -575,10 +576,10 @@
   padding: 3rem 1rem;
   color: var(--color-text-muted);
   opacity: 0.7;
-  }
+}
 
-  /* Responsive */
-  @media (max-width: 1024px) {
+/* Responsive */
+@media (max-width: 1024px) {
   .dashboard-grid {
     grid-template-columns: 1fr 1fr;
   }
@@ -590,9 +591,9 @@
   .content-columns {
     grid-template-columns: 1fr;
   }
-  }
+}
 
-  @media (max-width: 600px) {
+@media (max-width: 600px) {
   .home-header {
     flex-direction: column;
     align-items: flex-start;
@@ -622,10 +623,10 @@
   .action-card {
     padding: var(--spacing-md);
   }
-  }
+}
 
-  /* Modal Overlay & Animations */
-  .modal-overlay {
+/* Modal Overlay & Animations */
+.modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
@@ -639,9 +640,9 @@
   backdrop-filter: blur(8px);
   /* Stronger blur */
   animation: fadeIn 0.3s ease;
-  }
+}
 
-  .modal-content {
+.modal-content {
   background: var(--bg-card);
   border-radius: var(--radius-xl);
   max-width: 500px;
@@ -653,9 +654,9 @@
   box-shadow: var(--shadow-2xl);
   animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   border: 1px solid var(--glass-border);
-  }
+}
 
-  @keyframes fadeIn {
+@keyframes fadeIn {
   from {
     opacity: 0;
   }
@@ -663,9 +664,9 @@
   to {
     opacity: 1;
   }
-  }
+}
 
-  @keyframes slideUp {
+@keyframes slideUp {
   from {
     transform: translateY(20px);
     opacity: 0;
@@ -675,9 +676,9 @@
     transform: translateY(0);
     opacity: 1;
   }
-  }
+}
 
-  .error-state {
+.error-state {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -685,9 +686,9 @@
   height: 50vh;
   gap: 1rem;
   color: var(--text-secondary);
-  }
+}
 
-  .retry-btn {
+.retry-btn {
   padding: 0.5rem 1.5rem;
   background-color: var(--accent-primary);
   color: white;
@@ -696,9 +697,9 @@
   cursor: pointer;
   font-weight: 500;
   transition: all 0.2s ease;
-  }
+}
 
-  .retry-btn:hover {
+.retry-btn:hover {
   background-color: var(--accent-primary-hover);
   transform: translateY(-1px);
-  }
+}