style: Improve UI with enhanced visuals, responsiveness, and loading

index.html

@@ -68,6 +68,19 @@
             max-width: fit-content;
             margin-left: auto;
             margin-right: auto;
+            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+            transition: all 0.2s ease;
+        }
+        @media (max-width: 768px) {
+            .controls {
+                width: 100%;
+                max-width: 100%;
+                box-sizing: border-box;
+            }
+            .controls select {
+                width: 100%;
+                min-width: auto;
+            }
         }
         .controls select {
             padding: 12px 16px;
@@ -100,10 +113,10 @@
             background: var(--glass-effect);
             padding: 24px;
             border-radius: 16px;
-            box-shadow: 0 8px 32px var(--shadow-color);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
             text-align: center;
             border: 1px solid var(--border-color);
-            transition: all 0.3s ease;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
             backdrop-filter: blur(8px);
             position: relative;
             overflow: hidden;
@@ -114,14 +127,18 @@
             top: 0;
             left: 0;
             right: 0;
-            height: 2px;
+            height: 3px;
             background: linear-gradient(90deg, var(--primary-color), transparent);
+            opacity: 0.8;
         }
         .kpi-card:hover {
-            transform: translateY(-4px);
-            box-shadow: 0 12px 40px rgba(88, 166, 255, 0.2);
+            transform: translateY(-2px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
             border-color: var(--primary-color);
         }
+        .kpi-card:active {
+            transform: translateY(0);
+        }
         .kpi-card h3 {
             margin-top: 0;
             margin-bottom: 10px;
@@ -143,10 +160,19 @@
 
         .dashboard-container {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); /* Responsive grid */
-            gap: 25px; /* Space between plots */
+            grid-template-columns: repeat(auto-fit, minmax(min(100%, 450px), 1fr));
+            gap: 25px;
             margin-bottom: 30px;
         }
+        @media (max-width: 768px) {
+            .dashboard-container {
+                grid-template-columns: 1fr;
+                gap: 20px;
+            }
+            .plot-container, .table-container {
+                min-height: 400px;
+            }
+        }
         .plot-container, .table-container {
             background: var(--glass-effect);
             padding: 24px;

style.css

@@ -79,6 +79,18 @@ p {
     margin-bottom: 20px;
     animation: spin 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
     position: relative;
+    will-change: transform;
+}
+.skeleton {
+    background: linear-gradient(90deg, rgba(22, 27, 34, 0.2) 25%, rgba(22, 27, 34, 0.3) 50%, rgba(22, 27, 34, 0.2) 75%);
+    background-size: 200% 100%;
+    animation: skeleton-loading 1.5s infinite;
+    border-radius: 8px;
+    min-height: 100px;
+}
+@keyframes skeleton-loading {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
 }
 .spinner::after {
     content: '';