Add hover effect

src/components/question-output/QuestionCard.tsx

@@ -162,12 +162,16 @@ export default function QuestionCard({
               variant={isEditing ? "default" : "ghost"}
               size="icon"
               className={cn(
-                "h-8 w-8",
-                isEditing && "bg-primary text-primary-foreground hover:bg-primary/90"
+                "h-8 w-8 transition-all duration-200",
+                isEditing 
+                  ? "bg-primary text-primary-foreground hover:bg-primary/90 shadow-md" 
+                  : "hover:bg-blue-100 hover:text-blue-600 dark:hover:bg-blue-900/30 dark:hover:text-blue-400 hover:scale-105 hover:shadow-sm"
               )}
               title={isEditing ? "Currently editing" : "Edit question"}
             >
-              <span className="text-sm">✏️</span>
+              <span className="text-sm transition-transform duration-200 group-hover:scale-110">
+                ✏️
+              </span>
             </Button>
           )}
           
@@ -176,10 +180,10 @@ export default function QuestionCard({
               onClick={() => onDuplicate(question)}
               variant="ghost"
               size="icon"
-              className="h-8 w-8"
+              className="h-8 w-8 transition-all duration-200 hover:bg-green-100 hover:text-green-600 dark:hover:bg-green-900/30 dark:hover:text-green-400 hover:scale-105 hover:shadow-sm"
               title="Duplicate question"
             >
-              <span className="text-sm">📄</span>
+              <span className="text-sm transition-transform duration-200 group-hover:scale-110">📄</span>
             </Button>
           )}
           
@@ -188,10 +192,10 @@ export default function QuestionCard({
               onClick={() => onPreview(question)}
               variant="ghost"
               size="icon"
-              className="h-8 w-8"
+              className="h-8 w-8 transition-all duration-200 hover:bg-purple-100 hover:text-purple-600 dark:hover:bg-purple-900/30 dark:hover:text-purple-400 hover:scale-105 hover:shadow-sm"
               title="Preview question"
             >
-              <span className="text-sm">👁️</span>
+              <span className="text-sm transition-transform duration-200 group-hover:scale-110">👁️</span>
             </Button>
           )}
           
@@ -200,10 +204,10 @@ export default function QuestionCard({
               onClick={() => onRemove(question.id)}
               variant="ghost"
               size="icon"
-              className="h-8 w-8 hover:text-destructive"
+              className="h-8 w-8 transition-all duration-200 hover:bg-red-100 hover:text-red-600 dark:hover:bg-red-900/30 dark:hover:text-red-400 hover:scale-105 hover:shadow-sm"
               title="Remove question"
             >
-              <span className="text-sm">✕</span>
+              <span className="text-sm transition-transform duration-200 group-hover:scale-110">✕</span>
             </Button>
           )}
         </div>