Polish UI design with enhanced visual components

apps/web/src/app/globals.css

@@ -269,17 +269,6 @@ pre {
   animation: pulse-glow 2s ease-in-out infinite;
 }
 
-.animate-shimmer {
-  background: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0.1) 50%,
-    rgba(255, 255, 255, 0) 100%
-  );
-  background-size: 200% 100%;
-  animation: shimmer 2s linear infinite;
-}
-
 .animate-gradient {
   background-size: 200% 200%;
   animation: gradient-shift 8s ease infinite;
@@ -379,12 +368,17 @@ pre {
     rgb(var(--color-primary-dark)) 100%
   );
   color: white;
+  box-shadow: 0 4px 14px -4px rgba(139, 92, 246, 0.4);
 }
 
 .btn-primary:hover {
-  opacity: 0.9;
-  transform: translateY(-1px);
-  box-shadow: 0 10px 20px -10px rgba(139, 92, 246, 0.5);
+  transform: translateY(-2px);
+  box-shadow: 0 12px 24px -8px rgba(139, 92, 246, 0.5);
+}
+
+.btn-primary:active {
+  transform: translateY(0);
+  box-shadow: 0 4px 14px -4px rgba(139, 92, 246, 0.4);
 }
 
 .btn-secondary {
@@ -550,3 +544,28 @@ pre {
     radial-gradient(at 0% 100%, rgba(139, 92, 246, 0.1) 0px, transparent 50%),
     radial-gradient(at 80% 100%, rgba(34, 211, 238, 0.08) 0px, transparent 50%);
 }
+
+/* ============================================
+   Skeleton Loading (Used by loading states)
+   ============================================ */
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.08) 50%,
+    rgba(255, 255, 255, 0.03) 100%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+  border-radius: 0.5rem;
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}