fix(grid): repair muuri drag&drop and visual styles

- Fix Muuri integration: add data-draggable and improve DOM sync
- Fix Drag Visuals: remove opacity/rotation/scale in NoteCard and CSS to prevent 'gray/crooked' look
- Feat(layout): switch to padding-based spacing strategy (16px gap)
- Fix(css): correct media queries to maintain consistent spacing

keep-notes/components/note-card.tsx

@@ -102,7 +102,7 @@ function getInitials(name: string): string {
 // Helper function to get avatar color based on name hash
 function getAvatarColor(name: string): string {
   const colors = [
-    'bg-blue-500',
+    'bg-primary',
     'bg-purple-500',
     'bg-green-500',
     'bg-orange-500',
@@ -288,7 +288,8 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on
         colorClasses.bg,
         colorClasses.card,
         colorClasses.hover,
-        isDragging && 'opacity-60 scale-105 shadow-2xl rotate-1'
+        colorClasses.hover,
+        isDragging && 'shadow-2xl' // Removed opacity, scale, and rotation for clean drag
       )}
       onClick={(e) => {
         // Only trigger edit if not clicking on buttons
@@ -315,7 +316,7 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on
             <Button
               variant="ghost"
               size="sm"
-              className="h-8 w-8 p-0 bg-blue-100 dark:bg-blue-900/30 hover:bg-blue-200 dark:hover:bg-blue-900/50 text-blue-600 dark:text-blue-400"
+              className="h-8 w-8 p-0 bg-primary/10 dark:bg-primary/20 hover:bg-primary/20 dark:hover:bg-primary/30 text-primary dark:text-primary-foreground"
               title={t('notebookSuggestion.moveToNotebook')}
             >
               <FolderOpen className="h-4 w-4" />
@@ -417,7 +418,7 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on
             'mb-2 text-xs',
             optimisticNote.matchType === 'exact'
               ? 'bg-green-100 text-green-800 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800'
-              : 'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800'
+              : 'bg-primary/10 text-primary border-primary/20 dark:bg-primary/20 dark:text-primary-foreground'
           )}
         >
           {t(`semanticSearch.${optimisticNote.matchType === 'exact' ? 'exactMatch' : 'related'}`)}
@@ -427,7 +428,7 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on
       {/* Shared badge */}
       {isSharedNote && owner && (
         <div className="flex items-center justify-between mb-2">
-          <span className="text-xs text-blue-600 dark:text-blue-400 font-medium">
+          <span className="text-xs text-primary dark:text-primary-foreground font-medium">
             {t('notes.sharedBy')} {owner.name || owner.email}
           </span>
           <Button
@@ -466,7 +467,7 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on
               <div className="p-2">
                 <h4 className="font-medium text-xs truncate text-gray-900 dark:text-gray-100">{link.title || link.url}</h4>
                 {link.description && <p className="text-xs text-gray-500 dark:text-gray-400 line-clamp-2 mt-0.5">{link.description}</p>}
-                <span className="text-[10px] text-blue-500 mt-1 block">
+                <span className="text-[10px] text-primary mt-1 block">
                   {new URL(link.url).hostname}
                 </span>
               </div>