style: 颜色统一为CSS变量并优化复习卡片交互

src/components/ReviewRecall.vue

@@ -657,7 +657,7 @@ onMounted(() => {
   display: flex;
   gap: 24px;
   flex-wrap: wrap;
-  background: linear-gradient(135deg, #f1f8e9 0%, #e8f5e9 100%);
+  background: linear-gradient(135deg, var(--accent-success-softer) 0%, var(--accent-success-soft) 100%);
 }
 
 .stat-item {
@@ -676,8 +676,8 @@ onMounted(() => {
   margin-top: 4px;
 }
 
-.highlight { color: #2e7d32; }
-.matched { color: #2e7d32; }
+.highlight { color: var(--accent-success-strong); }
+.matched { color: var(--accent-success-strong); }
 .missed { color: #c62828; }
 .extra { color: #1565c0; }
 
@@ -710,7 +710,7 @@ onMounted(() => {
 
 .ai-waiting {
   font-size: 13px;
-  color: #e6a23c;
+  color: var(--accent-warning);
   margin: 4px 0 0;
   display: flex;
   align-items: center;
@@ -722,7 +722,7 @@ onMounted(() => {
   width: 14px;
   height: 14px;
   border: 2px solid #f3d19e;
-  border-top-color: #e6a23c;
+  border-top-color: var(--accent-warning);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }
@@ -851,7 +851,7 @@ onMounted(() => {
 }
 
 .history-item:hover {
-  background: #f1f8e9;
+  background: var(--accent-success-softer);
 }
 
 .history-time {
@@ -891,12 +891,12 @@ onMounted(() => {
 
 .start-guide {
   padding: 14px 22px;
-  background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
+  background: linear-gradient(135deg, var(--accent-warning-soft) 0%, #fff3cd 100%);
   border-left: 4px solid #ffc107;
   border-radius: 8px;
   font-size: 14px;
   line-height: 1.6;
-  color: #856404;
+  color: var(--accent-success-text);
 }
 
 .start-guide p {
@@ -905,7 +905,7 @@ onMounted(() => {
 
 .select-hint {
   font-size: 13px;
-  color: #856404;
+  color: var(--accent-success-text);
   margin: 0 0 8px;
   padding: 6px 12px;
   background: #fdf6ec;