Update client/src/index.css

client/src/index.css

@@ -11,28 +11,23 @@ body {
   color: white;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   overflow-x: hidden;
+  /* Ensure content doesn't get stuck under phone notches */
+  padding-top: env(safe-area-inset-top); 
   
-  /* --- 1. THE LIQUID ANIMATION --- */
-  background: linear-gradient(
-    300deg, 
-    #ff0080, /* Neon Pink */
-    #7928ca, /* Deep Purple */
-    #ff4d4d, /* Hot Red */
-    #2a0010  /* Dark Base */
-  );
-  background-size: 240% 240%; /* Zoomed in to create "movement" */
-  animation: liquidFlow 18s ease infinite; /* The slow flow */
+  /* LIQUID ANIMATION */
+  background: linear-gradient(300deg, #ff0080, #7928ca, #ff4d4d, #2a0010);
+  background-size: 240% 240%;
+  animation: liquidFlow 18s ease infinite;
   min-height: 100vh;
 }
 
-/* MOVEMENT KEYFRAMES */
 @keyframes liquidFlow {
   0% { background-position: 0% 50%; }
   50% { background-position: 100% 50%; }
   100% { background-position: 0% 50%; }
 }
 
-/* --- GLASS COMPONENTS --- */
+/* GLASS COMPONENTS */
 .glass-panel {
   background: var(--glass-bg);
   backdrop-filter: blur(24px);
@@ -47,14 +42,14 @@ body {
   backdrop-filter: blur(16px);
   border: 1px solid var(--glass-border);
   border-radius: 9999px;
-  padding: 8px 16px;
+  padding: 8px 12px; /* Slightly tighter padding */
   color: white;
-  font-size: 14px;
+  font-size: 13px; /* Slightly smaller font for professional look */
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
   outline: none;
-  min-width: 80px; 
+  min-width: 70px;
 }
 .glass-pill:hover {
   background: var(--glass-highlight);
@@ -62,87 +57,60 @@ body {
 }
 .glass-pill option { background: #2a0010; color: white; }
 
-/* --- 2. THE EXPANDING LOGO --- */
+/* EXPANDING LOGO */
 .logo-expand-container {
   display: flex;
   align-items: center;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.25);
   backdrop-filter: blur(20px);
-  border-radius: 9999px; /* Pill shape */
+  border-radius: 9999px;
   padding: 8px 16px;
   cursor: default;
-  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Smooth snap */
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   overflow: hidden;
-  width: 32px; /* Start small (approx width of just 'TEK') */
+  width: 32px;
   white-space: nowrap;
+  flex-shrink: 0; /* Prevents it from getting squashed */
 }
 
-/* HOVER STATE: Expand width */
 .logo-expand-container:hover {
-  width: 110px; /* Expand to fit 'TEK BUILD' */
+  width: 110px;
   background: rgba(255, 255, 255, 0.2);
   box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
 }
 
-.logo-main {
-  font-weight: 900;
-  letter-spacing: 2px;
-  text-transform: uppercase;
-  font-size: 0.9rem;
-  margin-right: 8px;
-}
-
-.logo-hidden {
-  opacity: 0;
-  font-size: 0.8rem;
-  letter-spacing: 1px;
-  font-weight: 400;
-  color: rgba(255, 255, 255, 0.8);
-  transform: translateX(-10px);
-  transition: all 0.3s ease;
-}
-
-/* REVEAL TEXT ON HOVER */
-.logo-expand-container:hover .logo-hidden {
-  opacity: 1;
-  transform: translateX(0);
-}
+.logo-main { font-weight: 900; letter-spacing: 2px; text-transform: uppercase; font-size: 0.9rem; margin-right: 8px; }
+.logo-hidden { opacity: 0; font-size: 0.8rem; letter-spacing: 1px; font-weight: 400; color: rgba(255, 255, 255, 0.8); transform: translateX(-10px); transition: all 0.3s ease; }
+.logo-expand-container:hover .logo-hidden { opacity: 1; transform: translateX(0); }
 
-/* INPUT FIELD */
+/* INPUTS & BUTTONS */
 textarea {
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid var(--glass-border);
-  color: white;
-  border-radius: 24px;
-  backdrop-filter: blur(20px);
-  font-family: inherit;
-}
-textarea:focus {
-  background: rgba(0, 0, 0, 0.5);
-  border-color: rgba(255,255,255,0.5);
-  outline: none;
+  background: rgba(0, 0, 0, 0.3); border: 1px solid var(--glass-border); color: white;
+  border-radius: 24px; backdrop-filter: blur(20px); font-family: inherit;
 }
+textarea:focus { background: rgba(0, 0, 0, 0.5); border-color: rgba(255,255,255,0.5); outline: none; }
 
-/* RUN BUTTON */
 .run-btn {
   background: linear-gradient(135deg, #ff0080 0%, #ff4e50 100%);
-  border: none;
-  border-radius: 50%;
-  color: white;
+  border: none; border-radius: 50%; color: white;
   box-shadow: 0 10px 20px rgba(255, 0, 80, 0.3);
-  transition: transform 0.2s;
-  display: flex; align-items: center; justify-content: center;
+  transition: transform 0.2s; display: flex; align-items: center; justify-content: center;
 }
 .run-btn:active { transform: scale(0.95); }
 
-/* HOLO UPLOAD BOX */
 .holo-box {
-  border: 2px dashed rgba(255, 255, 255, 0.3);
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 18px;
-  padding: 12px;
-  position: relative;
-  transition: all 0.3s;
+  border: 2px dashed rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.05);
+  border-radius: 18px; padding: 5px; position: relative; transition: all 0.3s;
 }
 .holo-box:hover { background: rgba(255, 255, 255, 0.1); border-color: white; }
+
+/* PWA INSTALL BANNER */
+.pwa-banner {
+  position: fixed; bottom: 160px; left: 20px; right: 20px;
+  background: rgba(40, 0, 20, 0.9); backdrop-filter: blur(20px);
+  border: 1px solid var(--glass-border); border-radius: 16px;
+  padding: 15px; z-index: 100; display: flex; align-items: center; justifyContent: space-between;
+  animation: slideUp 0.5s ease-out;
+}
+@keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }