feat: 分类颜色应用到卡片悬停效果

- 卡片悬停时顶部条使用分类颜色
- 卡片阴影和图标也使用分类颜色
- 使用CSS变量实现动态颜色

frontend/src/App.jsx

@@ -413,8 +413,14 @@ function App() {
 }
 
 function SiteCard({ site, onClick, onToggleFav, onEdit, onDelete }) {
+  const categoryColor = site.category?.color || '#667eea'
   return (
-    <div className="site-card" onClick={onClick}>
+    <div 
+      className="site-card" 
+      onClick={onClick}
+      data-category-color={categoryColor}
+      style={{ '--category-color': categoryColor }}
+    >
       {site.category && <span className="card-category">{site.category.name}</span>}
       <div className="card-icon">
         {site.icon && site.icon.startsWith('http') ? <img src={site.icon} alt=""/> : <Icon name={site.icon || 'globe'} size={26}/>}

frontend/src/index.css

@@ -305,14 +305,14 @@ body {
   left: 0;
   right: 0;
   height: 4px;
-  background: linear-gradient(90deg, #667eea, #764ba2);
+  background: var(--category-color, #667eea);
   opacity: 0;
   transition: opacity 0.3s ease;
 }
 
 .site-card:hover {
   transform: translateY(-6px);
-  box-shadow: 0 16px 50px rgba(102, 126, 234, 0.25);
+  box-shadow: 0 16px 50px color-mix(in srgb, var(--category-color, #667eea) 30%, transparent);
 }
 
 .site-card:hover::before {
@@ -323,6 +323,17 @@ body {
   opacity: 1;
 }
 
+.site-card:hover .card-icon {
+  background: linear-gradient(135deg, 
+    color-mix(in srgb, var(--category-color, #667eea) 15%, transparent),
+    color-mix(in srgb, var(--category-color, #667eea) 10%, transparent)
+  );
+}
+
+.site-card:hover .card-icon svg {
+  color: var(--category-color, #667eea);
+}
+
 .card-bottom-actions {
   position: absolute;
   bottom: 12px;