feat: 为 DailyInsightCard 和 ContributionHeatmap 组件新增样式。

src/components/home/DailyInsightCard/DailyInsightCard.css

@@ -1,15 +1,16 @@
 .daily-insight-card {
-    background: rgba(255, 255, 255, 0.7);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.5);
+    background: rgba(255, 255, 255, 0.75);
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+    border: 1px solid rgba(255, 255, 255, 0.6);
     border-radius: var(--radius-xl);
-    padding: 1.25rem;
+    padding: 1.5rem;
+    /* More padding */
     margin-bottom: 2rem;
     box-shadow:
-        0 10px 30px -5px rgba(245, 158, 11, 0.1),
-        0 4px 6px -2px rgba(245, 158, 11, 0.05),
-        inset 0 0 0 1px rgba(255, 255, 255, 0.6);
+        0 15px 35px -5px rgba(0, 0, 0, 0.05),
+        0 5px 15px -5px rgba(0, 0, 0, 0.02),
+        inset 0 0 0 1px rgba(255, 255, 255, 0.8);
     animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
     display: flex;
     flex-direction: column;
@@ -17,17 +18,17 @@
     /* Let internal content handle gaps */
     position: relative;
     overflow: hidden;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
 }
 
 .daily-insight-card:hover {
-    transform: translateY(-2px);
+    transform: translateY(-4px);
     box-shadow:
-        0 20px 40px -5px rgba(245, 158, 11, 0.15),
-        0 8px 10px -2px rgba(245, 158, 11, 0.05);
+        0 25px 45px -5px rgba(0, 0, 0, 0.08),
+        0 10px 15px -3px rgba(0, 0, 0, 0.03);
 }
 
-/* AI Glowing Border Effect */
+/* AI Glowing Border Effect - Subtler */
 .daily-insight-card--ai::before {
     content: '';
     position: absolute;
@@ -35,20 +36,21 @@
     left: 0;
     right: 0;
     height: 3px;
-    background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
-    opacity: 0.8;
+    background: linear-gradient(90deg, #fbbf24, #f59e0b, #fbbf24);
+    opacity: 0.9;
 }
 
 .daily-insight-card--ai::after {
+    /* Kept the scan effect but maybe lighter? */
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
-    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.8), transparent);
+    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.6), transparent);
     animation: scan 4s infinite ease-in-out;
-    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5));
+    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.4));
 }
 
 @keyframes scan {
@@ -67,13 +69,15 @@
     align-items: center;
     gap: 0.75rem;
     color: #d97706;
-    /* Amber-600 */
-    font-weight: 800;
-    font-size: 0.85rem;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    padding-bottom: 0.75rem;
-    border-bottom: 1px dashed rgba(245, 158, 11, 0.2);
+    font-weight: 700;
+    /* Reduced from 800 */
+    font-size: 0.9rem;
+    /* Slightly bigger */
+    text-transform: none;
+    /* Remove uppercase */
+    letter-spacing: 0.02em;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid rgba(245, 158, 11, 0.15);
 }
 
 /* ... */
@@ -81,15 +85,16 @@
 .daily-insight__content {
     display: grid;
     grid-template-columns: 1fr 1px 1fr;
-    gap: 1.5rem;
+    gap: 2rem;
+    /* Wider gap */
     align-items: stretch;
-    /* Stretch to make divider same height */
+    padding-top: 1.25rem;
 }
 
 .daily-insight__divider {
     width: 1px;
-    height: auto;
-    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1), transparent);
+    height: 100%;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.02));
 }
 
 .daily-insight__section {
@@ -99,11 +104,10 @@
 }
 
 .daily-insight__title {
-    font-size: 0.75rem;
-    color: var(--color-text-secondary);
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+    font-size: 0.8rem;
+    color: var(--color-text-tertiary);
+    font-weight: 600;
+    letter-spacing: 0.02em;
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -115,15 +119,17 @@
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    background: #fbbf24;
+    background: #fcd34d;
+    /* Lighter amber */
+    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.2);
 }
 
 .daily-insight__text {
     font-family: 'Outfit', sans-serif;
-    /* Fallback for numbers, Chinese font handles text */
     font-size: 1rem;
     color: var(--color-text);
-    line-height: 1.6;
+    line-height: 1.7;
+    /* More breathing room */
     letter-spacing: 0.01em;
 }
 
@@ -234,24 +240,30 @@
 
 /* Tip section at bottom */
 .daily-insight__footer {
-    margin-top: 1rem;
+    margin-top: 0;
+    /* Remove margin relative to content, let padding handle it */
     position: relative;
-    padding-top: 1rem;
-    border-top: 1px dashed rgba(245, 158, 11, 0.2);
+    padding-top: 1.5rem;
+    border-top: none;
+    /* Remove dashed line */
 }
 
 .daily-insight__tip {
     display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.85rem;
+    align-items: flex-start;
+    /* Align top for multi-line */
+    gap: 0.75rem;
+    font-size: 0.9rem;
     color: #92400e;
-    /* Amber 800 */
     font-weight: 500;
-    padding: 0.5rem 0.75rem;
-    background: rgba(254, 243, 199, 0.5);
+    padding: 1rem 1.25rem;
+    background: linear-gradient(135deg, rgba(255, 251, 235, 0.8), rgba(254, 243, 199, 0.4));
+    border: 1px solid rgba(251, 191, 36, 0.2);
     border-radius: var(--radius-lg);
-    width: fit-content;
+    width: 100%;
+    /* Full width */
+    line-height: 1.6;
+    box-shadow: 0 2px 6px -2px rgba(245, 158, 11, 0.05);
 }
 
 .daily-insight__tip svg {