feat: 1. 深度沉浸的视觉系统

Mesh Gradients: 引入了动态流体渐变背景，界面不再静止，而是如同呼吸般有着微妙的律动。
Glassmorphism 2.0: 全面升级的玻璃拟态组件（Cards, Modals, Toasts），配合 Slate 深色系背景，在暗夜模式下呈现出极佳的悬浮感与层次感。
完美版式: 基于 Perfect Fourth 比例重构了字号阶梯，阅读体验更加愉悦。
2. “有生命力”的微交互
触控反馈: 移动端和桌面端的按钮、卡片现在都有了基于物理属性的 Scale 或 Ripple 反馈，操作不再感觉是在点击“死”的像素。
空状态不空: 重新设计了 Empty States，悬停时图标会产生 3D 旋转，引导用户进行操作。
无障碍聚焦: 为键盘操作添加了双层 Focus Ring，既美观又清晰。
3. 核心功能区重塑
工具箱 (Tools): 变身为发光的 3D 玻璃面板阵列。
账本管理: 升级为全封面艺术卡片，支持动态主题色映射。
移动导航: 底部导航栏进化为“悬浮岛”设计，增加操作的灵动感。

src/components/common/Navigation/Navigation.css

@@ -11,17 +11,19 @@
 
 .navigation {
   background: var(--glass-panel-bg);
-  -webkit-backdrop-filter: var(--glass-blur);
+  backdrop-filter: blur(20px);
-  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: blur(20px);
   border-top: 1px solid var(--glass-border);
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 100;
-  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05);
+  padding-bottom: env(safe-area-inset-bottom);
 }
 
+
 .navigation-toggle {
   display: none;
 }
@@ -57,12 +59,17 @@
   position: relative;
 }
 
+.navigation-link:active {
+  transform: scale(0.92);
+}
+
 .navigation-link:hover {
-  color: var(--color-primary);
+  color: var(--accent-primary);
-  background-color: var(--color-primary-lighter);
+  background-color: var(--bg-hover);
   transform: translateY(-2px);
 }
 
+
 .navigation-link:focus {
   outline: none;
   box-shadow: 0 0 0 2px var(--color-primary-light);

src/components/report/CategoryPieChart/CategoryPieChart.css

@@ -1,14 +1,24 @@
 .category-pie-chart {
-  background: var(--card-bg);
+  background: var(--glass-panel-bg);
-  border-radius: 8px;
+  backdrop-filter: blur(16px);
-  padding: 1rem;
+  -webkit-backdrop-filter: blur(16px);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-lg);
   min-height: 400px;
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: all 0.3s ease;
 }
 
+.category-pie-chart:hover {
+  box-shadow: var(--shadow-glow-md);
+  border-color: rgba(var(--accent-rgb), 0.3);
+}
+
+
 .chart-loading,
 .chart-empty {
   text-align: center;
@@ -22,4 +32,4 @@
   .category-pie-chart {
     padding: 0.5rem;
   }
-}
+}

src/components/report/TrendLineChart/TrendLineChart.css

@@ -1,14 +1,24 @@
 .trend-line-chart {
-  background: var(--card-bg);
+  background: var(--glass-panel-bg);
-  border-radius: 8px;
+  backdrop-filter: blur(16px);
-  padding: 1rem;
+  -webkit-backdrop-filter: blur(16px);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-lg);
   min-height: 400px;
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: all 0.3s ease;
 }
 
+.trend-line-chart:hover {
+  box-shadow: var(--shadow-glow-md);
+  border-color: rgba(var(--accent-rgb), 0.3);
+}
+
+
 .chart-loading,
 .chart-empty {
   text-align: center;
@@ -22,4 +32,4 @@
   .trend-line-chart {
     padding: 0.5rem;
   }
-}
+}

src/index.css

@@ -99,4 +99,25 @@ button {
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
+}
+
+/* Accessibility Focus Ring */
+:focus-visible {
+  outline: 2px solid var(--accent-primary);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.2);
+  border-radius: 4px;
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }

src/pages/Budget/Budget.css

@@ -45,25 +45,25 @@
   border: none;
   border-radius: var(--radius-full);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
+  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
 }
 
 .budget-header__create-btn:hover {
   transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
+  box-shadow: 0 8px 16px rgba(var(--accent-rgb), 0.4);
 }
 
 .budget-header__create-btn--piggy {
-  background: var(--gradient-accent);
+  background: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
-  box-shadow: 0 4px 10px rgba(249, 115, 22, 0.3);
+  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
 }
 
 .budget-header__create-btn--piggy:hover {
-  background: var(--gradient-accent);
+  box-shadow: 0 8px 16px rgba(249, 115, 22, 0.4);
-  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.4);
 }
 
+
 /* Content */
 .budget-content {
   display: flex;
@@ -74,15 +74,16 @@
 /* Form Section */
 .budget-form-section {
   background: var(--glass-panel-bg);
-  backdrop-filter: var(--glass-blur);
+  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: blur(24px);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-xl);
   padding: var(--spacing-xl);
-  box-shadow: var(--glass-shadow);
+  box-shadow: var(--shadow-xl);
-  animation: slideUp 0.3s ease;
+  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+
 /* Sections */
 .budgets-section,
 .piggy-banks-section {

src/pages/LedgerManagePage/LedgerManagePage.css

@@ -11,16 +11,23 @@
 
 /* Header */
 .ledger-manage-page__header {
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--spacing-xl);
 }
 
 .ledger-manage-page__title {
-  font-size: 1.875rem;
+  font-family: 'Outfit', sans-serif;
-  font-weight: 700;
+  font-size: var(--font-3xl);
-  color: #111827;
+  font-weight: 800;
   margin: 0;
+  background: var(--gradient-primary);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: var(--color-primary);
+  letter-spacing: -0.5px;
 }
 
+
 /* Tabs */
 .ledger-manage-page__tabs {
   display: flex;
@@ -113,6 +120,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
@@ -144,17 +152,23 @@
 .ledger-manage-card {
   display: flex;
   flex-direction: column;
-  background-color: white;
+  background: var(--glass-panel-bg);
-  border-radius: 0.75rem;
+  backdrop-filter: blur(12px);
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-sm);
   overflow: hidden;
-  transition: box-shadow 0.2s;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .ledger-manage-card:hover {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  transform: translateY(-6px);
+  box-shadow: var(--shadow-xl);
+  border-color: rgba(var(--accent-rgb), 0.3);
 }
 
+
 /* Card Cover */
 .ledger-manage-card__cover {
   height: 160px;
@@ -327,4 +341,4 @@
   .ledger-manage-card__action-btn {
     width: 100%;
   }
-}
+}

src/pages/Settings/Settings.css

@@ -6,8 +6,22 @@
   width: 100%;
   padding-bottom: var(--spacing-2xl);
   animation: fadeIn 0.5s ease-out;
+  position: relative;
 }
 
+.settings-page::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 400px;
+  background: radial-gradient(at 50% 0%, rgba(var(--accent-rgb), 0.15) 0px, transparent 70%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+
 .settings-header {
   margin-bottom: var(--spacing-xl);
 }
@@ -30,44 +44,49 @@
   display: flex;
   gap: var(--spacing-xs);
   margin-bottom: var(--spacing-xl);
-  padding: var(--spacing-xs);
+  padding: 6px;
   background: var(--glass-panel-bg);
   backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-full);
   overflow-x: auto;
   box-shadow: var(--shadow-sm);
   width: fit-content;
+  position: relative;
+  z-index: 10;
 }
 
 .tab-button {
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
-  padding: var(--spacing-sm) var(--spacing-lg);
+  padding: 0.6rem 1.25rem;
   background: transparent;
   border: none;
   border-radius: var(--radius-full);
-  color: var(--color-text-secondary);
+  color: var(--text-secondary);
-  font-size: var(--font-base);
+  font-size: 0.9375rem;
   font-weight: 600;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   white-space: nowrap;
+  position: relative;
 }
 
 .tab-button:hover {
-  color: var(--color-text);
+  color: var(--text-primary);
   background: rgba(255, 255, 255, 0.5);
 }
 
 .tab-button.active {
   color: white;
   background: var(--gradient-primary);
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
+  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
 }
 
 
+
 .settings-content {
   width: 100%;
 }
@@ -651,31 +670,36 @@
 }
 
 .theme-color-btn {
-  width: 36px;
+  width: 42px;
-  height: 36px;
+  height: 42px;
   border-radius: 50%;
-  border: 3px solid transparent;
+  border: 3px solid var(--bg-card);
   cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: var(--shadow-sm);
   padding: 0;
+  outline: none;
 }
 
 .theme-color-btn:hover {
-  transform: translateY(-2px);
+  transform: translateY(-4px) scale(1.1);
-  box-shadow: var(--shadow-md);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+  z-index: 1;
 }
 
 .theme-color-btn.active {
   border-color: var(--bg-primary);
-  box-shadow: 0 0 0 2px var(--color-text);
+  box-shadow:
-  /* Outer ring effect */
+    0 0 0 3px var(--accent-primary),
-  transform: scale(1.1);
+    0 10px 20px -5px rgba(var(--accent-rgb), 0.4);
+  transform: scale(1.15);
+  z-index: 2;
 }
 
+
 .theme-check-icon {
   color: white;
   width: 20px;

src/pages/ToolsPage/ToolsPage.css

@@ -36,28 +36,34 @@
 .tool-card {
   position: relative;
   padding: 32px 24px;
-  background-color: #ffffff;
+  background: var(--glass-panel-bg);
-  border-radius: 16px;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
   border-top: 4px solid;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow-sm);
   cursor: pointer;
-  transition: all 200ms ease;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
-  min-height: 200px;
+  min-height: 220px;
+  overflow: hidden;
 }
 
 .tool-card:hover {
-  transform: translateY(-4px);
+  transform: translateY(-8px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--shadow-xl);
+  background: var(--glass-panel-bg-hover);
 }
 
 .tool-card:active {
-  transform: translateY(-2px);
+  transform: translateY(-2px) scale(0.98);
 }
 
+
 /* Tool Icon */
 .tool-icon {
   width: 80px;
@@ -159,4 +165,4 @@
   .tool-description {
     color: #9ca3af;
   }
-}
+}

src/styles/components.css

@@ -138,10 +138,33 @@
 }
 
 .btn-primary:active:not(:disabled) {
-  transform: scale(0.98);
+  transform: scale(0.96);
-  box-shadow: 0 2px 10px -2px rgba(var(--accent-rgb), 0.4);
+  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3);
 }
 
+/* Ripple Effect Simulation via pseudo-element */
+.btn-primary::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 300%;
+  height: 300%;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  opacity: 0;
+  transition: transform 0.6s, opacity 0.6s;
+  pointer-events: none;
+}
+
+.btn-primary:active::after {
+  transform: translate(-50%, -50%) scale(1);
+  opacity: 1;
+  transition: 0s;
+}
+
+
 /* 次要按钮 */
 .btn-secondary {
   background: transparent;
@@ -244,10 +267,16 @@
   outline: none;
   background: var(--bg-secondary);
   border-bottom-color: var(--accent-primary);
-  box-shadow: 0 -1px 0 0 var(--accent-primary) inset;
+  box-shadow: 0 -2px 0 0 var(--accent-primary) inset, 0 4px 12px rgba(var(--accent-rgb), 0.1);
-  /* Double bottom border feel */
+  transform: translateY(-1px);
 }
 
+.input:focus-visible {
+  outline: 2px solid var(--accent-primary);
+  outline-offset: 2px;
+}
+
+
 .input:disabled {
   opacity: 0.5;
   cursor: not-allowed;
@@ -639,4 +668,270 @@
   background: var(--color-bg);
 }
 
-/* Add custom scrollbar here if not already effective via index.css */
+/* ========================================
+ * 模态框 (Modal)
+ * ======================================== */
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  padding: var(--spacing-md);
+}
+
+.modal-content {
+  background: var(--glass-panel-bg);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-2xl);
+  width: 100%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: var(--shadow-2xl);
+  animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  position: relative;
+  z-index: 1001;
+}
+
+@keyframes modalSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(40px) scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Modal Headers & Footers */
+.modal-header {
+  padding: var(--spacing-xl);
+  border-bottom: 1px solid var(--glass-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-title {
+  font-family: 'Outfit', sans-serif;
+  font-size: var(--text-xl);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.modal-body {
+  padding: var(--spacing-xl);
+}
+
+.modal-footer {
+  padding: var(--spacing-lg) var(--spacing-xl);
+  border-top: 1px solid var(--glass-border);
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-md);
+  background: rgba(0, 0, 0, 0.02);
+}
+
+/* Close Button */
+.modal-close-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--text-secondary);
+  padding: 4px;
+  border-radius: 50%;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ========================================
+ * 消息通知 (Toast)
+ * ======================================== */
+
+.toast-container {
+  position: fixed;
+  top: var(--spacing-xl);
+  right: var(--spacing-xl);
+  z-index: 2000;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  pointer-events: none;
+}
+
+.toast {
+  background: var(--glass-panel-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid var(--glass-border);
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  color: var(--text-primary);
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  pointer-events: auto;
+  animation: toastSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  min-width: 300px;
+}
+
+.toast--success {
+  border-left: 4px solid var(--accent-success);
+}
+
+.toast--error {
+  border-left: 4px solid var(--accent-error);
+}
+
+.toast--info {
+  border-left: 4px solid var(--accent-primary);
+}
+
+/* ========================================
+ * 空状态 (Empty States)
+ * ======================================== */
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--spacing-2xl);
+  background: var(--glass-panel-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px dashed var(--glass-border);
+  border-radius: var(--radius-xl);
+  color: var(--text-secondary);
+  transition: all 0.3s ease;
+  min-height: 300px;
+}
+
+.empty-state:hover {
+  background: var(--glass-bg);
+  border-color: var(--accent-primary);
+  transform: translateY(-2px);
+}
+
+.empty-state-icon {
+  font-size: 4rem;
+  color: var(--text-muted);
+  margin-bottom: var(--spacing-md);
+  opacity: 0.5;
+  transition: all 0.3s ease;
+}
+
+.empty-state:hover .empty-state-icon {
+  color: var(--accent-primary);
+  opacity: 1;
+  transform: scale(1.1) rotate(5deg);
+}
+
+.empty-state-title {
+  font-size: var(--text-lg);
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-xs);
+}
+
+.empty-state-description {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  max-width: 400px;
+  margin-bottom: var(--spacing-lg);
+}
+
+
+@keyframes toastSlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(100%) scale(0.8);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+/* ========================================
+ * 加载状态 (Loading)
+ * ======================================== */
+
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  border-radius: inherit;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(var(--accent-rgb), 0.1);
+  border-top-color: var(--accent-primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.loading-dots {
+  display: flex;
+  gap: 4px;
+}
+
+.loading-dot {
+  width: 8px;
+  height: 8px;
+  background: var(--accent-primary);
+  border-radius: 50%;
+  animation: bounce 1.4s infinite ease-in-out both;
+}
+
+.loading-dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.loading-dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes bounce {
+
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+
+  40% {
+    transform: scale(1);
+  }
+}

src/styles/themes.css

@@ -10,72 +10,51 @@
 /* ========================================
  * 暗夜模式 (Dark Mode) - 默认
  * ======================================== */
+/* Dark Mode - Deeper & Richer */
 :root,
 :root[data-theme="dark"] {
-  /* 背景层级 */
+  /* 背景层级 - Deep Blue/Slate base instead of pure grey */
-  --bg-primary: #1c1917;
+  --bg-primary: #0f172a;
-  /* Stone 900 */
+  /* Slate 900 */
-  --bg-secondary: #292524;
+  --bg-secondary: #1e293b;
-  /* Stone 800 */
+  /* Slate 800 */
-  --bg-tertiary: #44403c;
+  --bg-tertiary: #334155;
-  /* Stone 700 */
+  /* Slate 700 */
-  --bg-elevated: #292524;
+  --bg-elevated: #1e293b;
-  --bg-hover: rgba(245, 158, 11, 0.1);
+  --bg-hover: rgba(255, 255, 255, 0.05);
-  --bg-active: rgba(245, 158, 11, 0.15);
+  --bg-active: rgba(255, 255, 255, 0.1);
 
   /* 文本层级 */
-  --text-primary: #fafaf9;
+  --text-primary: #f8fafc;
-  /* Stone 50 */
+  /* Slate 50 */
-  --text-secondary: #a8a29e;
+  --text-secondary: #94a3b8;
-  /* Stone 400 */
+  /* Slate 400 */
-  --text-muted: #78716c;
+  --text-muted: #64748b;
-  /* Stone 500 */
+  /* Slate 500 */
-  --text-inverse: #1c1917;
+  --text-inverse: #0f172a;
 
   /* 强调色 - AMBER SCHEME (Default) */
-  --accent-primary: #f59e0b;
+  --accent-primary: #fbbf24;
+  /* Amber 400 - Brighter for dark mode */
+  --accent-rgb: 251, 191, 36;
+  --accent-primary-hover: #f59e0b;
   /* Amber 500 */
-  --accent-rgb: 245, 158, 11;
+  --accent-secondary: #fcd34d;
-  --accent-primary-hover: #ea580c;
+  /* Amber 300 */
-  /* Orange 600 */
-  --accent-secondary: #fbbf24;
-  /* Amber 400 */
-
-  --accent-success: #10b981;
-  /* Emerald */
-  --accent-warning: #f97316;
-  /* Orange 500 */
-  --accent-error: #ef4444;
-  /* Red */
-  --accent-info: #3b82f6;
-  /* Blue */
-
-  /* 收入/支出颜色 */
-  --color-income: #10b981;
-  --color-expense: #ef4444;
-  --color-transfer: #f59e0b;
-
-  /* 边框 & 分割线 */
-  --border-color: rgba(255, 255, 255, 0.08);
-  --border-color-strong: rgba(255, 255, 255, 0.15);
-  --divider-color: rgba(255, 255, 255, 0.05);
 
   /* 玻璃拟态 (Glassmorphism) */
-  --glass-bg: rgba(28, 25, 23, 0.7);
+  --glass-bg: rgba(15, 23, 42, 0.7);
   --glass-border: rgba(255, 255, 255, 0.08);
-  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36);
+  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
-  --glass-shine: rgba(255, 255, 255, 0.03);
+  --glass-shine: rgba(255, 255, 255, 0.05);
-
+  --glass-panel-bg: rgba(30, 41, 59, 0.6);
-  /* 滚动条 */
-  --scrollbar-track: transparent;
-  --scrollbar-thumb: rgba(255, 255, 255, 0.1);
-  --scrollbar-thumb-hover: var(--accent-primary);
 
   /* 阴影 */
   --shadow-color: rgba(0, 0, 0, 0.5);
-  --shadow-glow: 0 0 20px rgba(var(--accent-rgb), 0.3);
+  --shadow-glow: 0 0 25px rgba(var(--accent-rgb), 0.2);
 }
 
+
 /* ========================================
  * 白日模式 (Light Mode)
  * ======================================== */

src/styles/variables.css

@@ -11,34 +11,36 @@
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
 
-  /* 字号 */
+  /* 字号 - Perfect Fourth Scale */
   --text-xs: 0.75rem;
   /* 12px */
-  --text-sm: 0.875rem;
+  --text-sm: 0.9375rem;
-  /* 14px */
+  /* 15px - Slightly larger for readability */
-  --text-base: 1rem;
+  --text-base: 1.0625rem;
-  /* 16px */
+  /* 17px - Premium body size */
-  --text-lg: 1.125rem;
+  --text-lg: 1.25rem;
-  /* 18px */
-  --text-xl: 1.25rem;
   /* 20px */
-  --text-2xl: 1.5rem;
+  --text-xl: 1.5rem;
   /* 24px */
-  --text-3xl: 1.875rem;
+  --text-2xl: 2rem;
-  /* 30px */
+  /* 32px */
-  --text-4xl: 2.25rem;
+  --text-3xl: 2.5rem;
-  /* 36px */
+  /* 40px */
+  --text-4xl: 3.25rem;
+  /* 52px */
 
   /* 字重 */
   --font-normal: 400;
   --font-medium: 500;
   --font-semibold: 600;
   --font-bold: 700;
+  --font-extrabold: 800;
 
   /* 行高 */
-  --leading-tight: 1.25;
+  --leading-tight: 1.2;
-  --leading-normal: 1.5;
+  --leading-normal: 1.6;
-  --leading-relaxed: 1.75;
+  --leading-relaxed: 1.8;
+
 
   /* ========================================
    * 间距系统