UI美化及渐变效果

frontend/src/styles/main.css

@@ -35,10 +35,38 @@
   --ctms-spacing-lg: 24px;
   --ctms-spacing-xl: 32px;
 
-  /* 圆角 & 阴影 */
-  --ctms-radius: 4px;
+  /* 圆角 & 阴影 - 升级为更多层级 */
+  --ctms-radius-sm: 4px;
+  --ctms-radius: 8px;
+  --ctms-radius-lg: 12px;
+  --ctms-radius-round: 50%;
+  
   --ctms-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
-  --ctms-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --ctms-shadow: 0 8px 24px rgba(149, 157, 165, 0.1);
+  --ctms-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.08);
+  --ctms-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
+  
+  /* 动画 */
+  --ctms-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 现代滚动条 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #d9d9d9;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #bfbfbf;
 }
 
 /* 全局重置 */