UI Change

client/src/routes/Files.svelte

@@ -793,14 +793,16 @@
   }
   .media-card {
     position: relative;
-    background: #f5f5f5;
-    border-radius: 12px;
+    background: #f6f6f6;
+    border-radius: 10px;
     overflow: hidden;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid #e2e2e2;
+    box-shadow: 0 1px 2px rgba(15, 15, 15, 0.04);
     display: flex;
     flex-direction: column;
     transition:
-      transform 0.18s ease,
+      border-color 0.18s ease,
+      background 0.18s ease,
       box-shadow 0.18s ease;
     cursor: pointer;
   }
@@ -808,23 +810,31 @@
     content: "";
     position: absolute;
     inset: 0;
-    background: rgba(0, 0, 0, 0.18);
+    background: rgba(0, 0, 0, 0.08);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.18s ease;
   }
+  .media-card:hover {
+    border-color: #d4d4d4;
+    background: #f1f1f1;
+    box-shadow: 0 2px 4px rgba(15, 15, 15, 0.06);
+  }
   .media-card:hover::after {
-    opacity: 0.22;
+    opacity: 0.16;
   }
   .media-card.is-selected {
-    transform: translateY(-6px) scale(0.965);
-    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
+    border-color: #2d965a;
+    background: #f4fbf7;
+    box-shadow:
+      0 0 0 1px rgba(45, 150, 90, 0.35),
+      0 4px 12px rgba(45, 150, 90, 0.12);
   }
   .media-card.is-selected::after {
-    opacity: 0.32;
+    opacity: 0.12;
   }
   .media-card.is-selected:hover::after {
-    opacity: 0.35;
+    opacity: 0.18;
   }
   .media-card.list-view {
     flex-direction: row;
@@ -841,10 +851,10 @@
     flex-shrink: 0;
   }
   .media-card:hover {
-    transform: translateY(-4px) scale(0.98);
+    transform: none;
   }
   .media-card.is-selected:hover {
-    transform: translateY(-6px) scale(0.965);
+    transform: none;
   }
   .selection-toggle {
     position: absolute;