From a80fa715c35d70892a67593c30d1c2c83a2bf24a Mon Sep 17 00:00:00 2001
From: ittoview <ittoview@example.com>
Date: Mon, 11 May 2026 09:45:20 +0100
Subject: [PATCH] fix: emphasize current practice card

---
 src/pages/ProcessPurposePracticePage.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/pages/ProcessPurposePracticePage.tsx b/src/pages/ProcessPurposePracticePage.tsx
index 43b5c11..56cb310 100644
--- a/src/pages/ProcessPurposePracticePage.tsx
+++ b/src/pages/ProcessPurposePracticePage.tsx
@@ -464,10 +464,10 @@ export default function ProcessPurposePracticePage() {
         </div>
       </div>
 
-      <main className="mx-auto flex min-h-0 w-full max-w-5xl flex-1 flex-col gap-4 overflow-hidden px-4 py-6">
+      <main className="mx-auto flex min-h-0 w-full max-w-5xl flex-1 flex-col gap-3 overflow-hidden px-4 pb-4 pt-3">
         <div
           ref={deckScrollRef}
-          className="min-h-0 flex-1 space-y-4 overflow-y-auto overscroll-contain pr-1 scroll-smooth"
+          className="min-h-0 flex-1 space-y-3 overflow-y-auto overscroll-contain pr-1 scroll-smooth"
         >
           <AnimatePresence initial={false}>
             {visibleQuestionCards.map(({ item, index }) => {
@@ -480,18 +480,18 @@ export default function ProcessPurposePracticePage() {
                   layout
                   initial={{ opacity: 0, y: 24, scale: 0.98 }}
                   animate={{
-                    opacity: isCurrent ? 1 : 0.72,
+                    opacity: isCurrent ? 1 : 0.62,
                     y: 0,
-                    scale: isCurrent ? 1 : 0.985,
+                    scale: isCurrent ? 1 : 0.975,
                   }}
                   exit={{ opacity: 0, y: -16, scale: 0.98 }}
                   transition={{ duration: 0.28, ease: 'easeOut' }}
-                  className={`rounded-2xl border bg-white p-6 shadow-sm transition-all duration-200 dark:bg-gray-800 ${
+                  className={`rounded-2xl border bg-white p-6 transition-all duration-200 dark:bg-gray-800 ${
                     isCurrent && correctFeedback
-                      ? 'border-green-300 ring-2 ring-green-100 dark:border-green-700 dark:ring-green-900/40'
+                      ? 'border-green-300 shadow-lg shadow-green-100/70 ring-2 ring-green-100 dark:border-green-700 dark:shadow-none dark:ring-green-900/40'
                       : isCurrent
-                        ? 'border-gray-200 dark:border-gray-700'
-                        : 'border-gray-100 dark:border-gray-800'
+                        ? 'border-blue-200 shadow-lg shadow-blue-100/70 ring-1 ring-blue-100 dark:border-blue-800 dark:shadow-none dark:ring-blue-900/30'
+                        : 'border-gray-100 shadow-sm dark:border-gray-800'
                   }`}
                 >
                   <div className="mb-4 flex min-h-9 flex-wrap items-center justify-between gap-3">
@@ -532,7 +532,7 @@ export default function ProcessPurposePracticePage() {
 
                   <p
                     className={`leading-9 text-gray-900 dark:text-gray-100 ${
-                      isCurrent ? 'text-xl' : 'text-base'
+                      isCurrent ? 'text-2xl font-medium' : 'text-base'
                     }`}
                   >
                     {item.purpose}
@@ -549,7 +549,7 @@ export default function ProcessPurposePracticePage() {
             initial={{ opacity: 0, y: 12 }}
             animate={{ opacity: 0.58, y: 0 }}
             transition={{ duration: 0.25 }}
-            className="pointer-events-none shrink-0 rounded-2xl border border-dashed border-gray-200 bg-white/70 p-5 shadow-sm blur-[0.4px] dark:border-gray-700 dark:bg-gray-800/55"
+            className="pointer-events-none shrink-0 rounded-2xl border border-dashed border-gray-200 bg-white/60 p-4 shadow-sm blur-[0.4px] dark:border-gray-700 dark:bg-gray-800/50"
           >
             <div className="mb-3 inline-flex rounded-full bg-gray-100 px-3 py-1 text-sm font-medium text-gray-500 dark:bg-gray-700/70 dark:text-gray-300">
               第 {progress.currentIndex + 2} / {totalCount} 题