refactor: refine critical CSS for improved layout stability and element constraints in index.html

- Updated critical CSS to better constrain elements before Tailwind CSS loads, preventing layout shifts.
- Enhanced comments for clarity on the purpose of CSS rules.
- Adjusted SVG and form element styles for consistent sizing and to prevent expansion during loading.

Author: 0xdps

index.html

@@ -89,53 +89,51 @@
         #root { min-height: 100vh; }
         body { margin: 0; background-color: #f9fafb; }
 
-        /* CRITICAL CSS: Hide unstyled content until CSS loads */
-        /* This prevents all unstyled elements from expanding */
+        /* CRITICAL CSS: Constrain elements before Tailwind CSS loads */
+        /* This prevents unstyled elements from expanding */
 
-        /* Hide all elements that depend on Tailwind classes */
-        /* They'll become visible once external CSS loads */
-        [class*="bg-"],
-        [class*="text-"],
-        [class*="w-"],
-        [class*="h-"],
-        [class*="p-"],
-        [class*="m-"],
-        [class*="flex"],
-        [class*="grid"],
-        [class*="border"],
-        [class*="rounded"],
-        [class*="shadow"],
-        [class*="hover:"],
-        [class*="dark:"],
-        [class*="gap-"],
-        [class*="space-"],
-        [class*="divide-"] {
-            opacity: 0;
-            transition: opacity 0.3s ease-in;
-        }
-        
-        /* Fallback: Constrain all SVGs to prevent expansion */
+        /* Constrain all SVGs to prevent huge expansion */
         svg {
-            width: 2rem;
-            height: 2rem;
+            width: auto;
+            height: auto;
+            max-width: 2rem;
+            max-height: 2rem;
             display: inline-block;
             flex-shrink: 0;
+            overflow: hidden;
         }
 
-        /* Constrain inputs and buttons */
+        /* Constrain inputs, buttons, and form elements */
         input,
         button,
         select,
         textarea {
             font-size: 16px;
             padding: 8px;
-            height: auto;
             min-height: 40px;
         }
 
-        /* Prevent any element from expanding */
+        /* Prevent flex containers from expanding */
+        [class*="flex"] {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+        }
+        
+        /* Prevent grid containers from expanding */
+        [class*="grid"] {
+            display: grid;
+            gap: 8px;
+        }
+        
+        /* Constrain all elements */
         * {
             box-sizing: border-box;
+        }
+        
+        /* Header baseline styling */
+        header {
+            display: block;
             max-width: 100%;
         }
     </style>