Update app.py

app.py

@@ -247,7 +247,7 @@ body.gradio-container {
     background: linear-gradient(to bottom, #000a0a 0%, #001a1a 40%, #003333 70%, #004d4d 100%) !important;
     background-attachment: fixed !important;
     font-family: 'Exo 2', 'Orbitron', monospace !important;
-    color: #00ff88 !important;
+    color: #ff1493 !important; /* HOT PINK for all text */
     overflow-x: hidden;
     position: relative;
 }
@@ -304,8 +304,8 @@ gradio-app {
     --border-color-accent: #00ff88 !important;
     --border-color-primary: #00ff8833 !important;
     --color-accent: #00ff88 !important;
-    --color-text-primary: #00ff88 !important;
-    --color-text-secondary: #00ffcc !important;
+    --color-text-primary: #ff1493 !important; /* HOT PINK */
+    --color-text-secondary: #ff69b4 !important; /* LIGHTER HOT PINK */
     --button-primary-background-color: #00ff88 !important;
     --button-primary-text-color: #001a1a !important;
     --shadow-color: rgba(0, 255, 136, 0.5) !important;
@@ -317,11 +317,15 @@ gradio-app {
 /* Headers with jade neon glow */
 h1 {
     font-family: 'Audiowide', cursive !important;
-    background: linear-gradient(45deg, #00ff88, #00ffcc, #00ff88);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    text-shadow: none !important;
+    color: #ff1493 !important; /* HOT PINK */
+    text-shadow: 
+        0 0 20px #ff1493,
+        0 0 40px #ff1493,
+        0 0 60px #ff1493,
+        0 0 80px #ff69b4,
+        0 0 100px #ff69b4,
+        0 0 120px #ff69b4,
+        0 0 140px #ff69b4 !important;
     font-size: 4em !important;
     letter-spacing: 6px !important;
     position: relative;
@@ -335,15 +339,15 @@ h1::before {
     top: 0;
     z-index: -1;
     background: none;
-    -webkit-text-fill-color: #00ff88;
+    color: #ff1493;
     text-shadow: 
-        0 0 20px #00ff88,
-        0 0 40px #00ff88,
-        0 0 60px #00ff88,
-        0 0 80px #00cc66,
-        0 0 100px #00cc66,
-        0 0 120px #00cc66,
-        0 0 140px #00cc66;
+        0 0 20px #ff1493,
+        0 0 40px #ff1493,
+        0 0 60px #ff1493,
+        0 0 80px #ff69b4,
+        0 0 100px #ff69b4,
+        0 0 120px #ff69b4,
+        0 0 140px #ff69b4;
     filter: blur(3px);
 }
 
@@ -353,8 +357,8 @@ h1::before {
 }
 
 h2, h3, h4, h5, h6 {
-    color: #00ffcc !important;
-    text-shadow: 0 0 15px #00ffcc !important;
+    color: #ff1493 !important; /* HOT PINK */
+    text-shadow: 0 0 15px #ff1493 !important;
     font-family: 'Exo 2', sans-serif !important;
     font-weight: 700 !important;
     letter-spacing: 2px !important;
@@ -362,8 +366,8 @@ h2, h3, h4, h5, h6 {
 
 /* Text styling - Better readability */
 p, .prose {
-    color: #e0ffee !important;
-    text-shadow: 0 0 2px rgba(0, 255, 136, 0.3) !important;
+    color: #ff1493 !important; /* HOT PINK */
+    text-shadow: 0 0 2px rgba(255, 20, 147, 0.3) !important;
     font-size: 1.05em !important;
     font-weight: 400 !important;
     line-height: 1.6 !important;
@@ -373,7 +377,7 @@ p, .prose {
 input[type="text"], textarea, select, .gr-dropdown {
     background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 255, 204, 0.05) 100%) !important;
     border: 2px solid #00ff88 !important;
-    color: #ffffff !important;
+    color: #ff1493 !important; /* HOT PINK */
     box-shadow: 
         inset 0 0 20px rgba(0, 255, 136, 0.2),
         0 0 30px rgba(0, 255, 136, 0.3) !important;
@@ -389,7 +393,7 @@ input[type="text"]:focus, textarea:focus {
     box-shadow: 
         inset 0 0 30px rgba(0, 255, 204, 0.3),
         0 0 40px rgba(0, 255, 204, 0.5) !important;
-    color: #ffffff !important;
+    color: #ff1493 !important; /* HOT PINK */
     background: linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 255, 204, 0.1) 100%) !important;
 }
 
@@ -422,7 +426,7 @@ input[type="text"]:focus, textarea:focus {
 
 #component-chat .message.user {
     background: linear-gradient(135deg, #00ff8833 0%, #00cc6633 100%) !important;
-    color: #ffffff !important;
+    color: #ff1493 !important; /* HOT PINK */
     border: 1px solid #00ff8866 !important;
     box-shadow: 0 0 20px rgba(0, 255, 136, 0.3) !important;
     font-size: 1.05em !important;
@@ -431,7 +435,7 @@ input[type="text"]:focus, textarea:focus {
 
 #component-chat .message.bot {
     background: linear-gradient(135deg, #00ffcc22 0%, #0099cc22 100%) !important;
-    color: #e0ffee !important;
+    color: #ff1493 !important; /* HOT PINK */
     border: 1px solid #00ffcc44 !important;
     box-shadow: 0 0 20px rgba(0, 255, 204, 0.2) !important;
     font-size: 1.05em !important;
@@ -500,7 +504,7 @@ input[type="text"]:focus, textarea:focus {
 
 .gr-button-secondary {
     background: transparent !important;
-    color: #00ffcc !important;
+    color: #ff1493 !important; /* HOT PINK */
     border: 2px solid #00ffcc !important;
     box-shadow: 
         0 0 20px rgba(0, 255, 204, 0.4),
@@ -532,7 +536,7 @@ input[type="text"]:focus, textarea:focus {
 
 .gr-button-secondary:hover {
     background: rgba(0, 255, 204, 0.1) !important;
-    color: #ffffff !important;
+    color: #ff69b4 !important; /* LIGHTER HOT PINK on hover */
     box-shadow: 
         0 0 30px rgba(0, 255, 204, 0.6),
         inset 0 0 25px rgba(0, 255, 204, 0.2) !important;
@@ -568,7 +572,7 @@ input[type="text"]:focus, textarea:focus {
 /* Tabs with jade style */
 .tabs-nav button {
     background: linear-gradient(180deg, transparent 0%, rgba(0, 255, 136, 0.1) 100%) !important;
-    color: #00ff88 !important;
+    color: #ff1493 !important; /* HOT PINK */
     border-bottom: 3px solid transparent !important;
     text-transform: uppercase !important;
     letter-spacing: 3px !important;
@@ -580,15 +584,15 @@ input[type="text"]:focus, textarea:focus {
 
 .tabs-nav button.selected {
     background: linear-gradient(180deg, rgba(0, 255, 136, 0.2) 0%, rgba(0, 255, 136, 0.3) 100%) !important;
-    color: #ffffff !important;
+    color: #ff69b4 !important; /* LIGHTER HOT PINK */
     border-bottom: 3px solid #00ff88 !important;
-    text-shadow: 0 0 20px #00ff88 !important;
+    text-shadow: 0 0 20px #ff1493 !important;
     box-shadow: 0 10px 30px -10px rgba(0, 255, 136, 0.5) !important;
 }
 
 .tabs-nav button:hover {
-    color: #00ffcc !important;
-    text-shadow: 0 0 15px #00ffcc !important;
+    color: #ff69b4 !important; /* LIGHTER HOT PINK */
+    text-shadow: 0 0 15px #ff1493 !important;
     background: linear-gradient(180deg, transparent 0%, rgba(0, 255, 204, 0.15) 100%) !important;
 }
 
@@ -596,8 +600,8 @@ input[type="text"]:focus, textarea:focus {
 #status_display {
     background: linear-gradient(135deg, rgba(0, 255, 136, 0.2) 0%, rgba(0, 255, 204, 0.15) 100%) !important;
     border: 2px solid #00ff88 !important;
-    color: #ffffff !important;
-    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8) !important;
+    color: #ff1493 !important; /* HOT PINK */
+    text-shadow: 0 0 10px rgba(255, 20, 147, 0.8) !important;
     padding: 20px !important;
     margin: 30px 0 !important;
     box-shadow: 
@@ -672,17 +676,22 @@ input[type="text"]:focus, textarea:focus {
 /* Dropdown styling with better readability */
 .gr-dropdown-item {
     background: rgba(0, 26, 26, 0.95) !important;
-    color: #00ffcc !important;
+    color: #ff1493 !important; /* HOT PINK */
     border-bottom: 1px solid #00ff8833 !important;
     font-size: 1.05em !important;
     font-weight: 400 !important;
     padding: 12px !important;
 }
 
+.gr-dropdown-item.selected {
+    background: rgba(0, 102, 102, 0.4) !important;
+    color: #ff69b4 !important; /* LIGHTER HOT PINK */
+}
+
 .gr-dropdown-item:hover {
     background: rgba(0, 255, 136, 0.25) !important;
-    color: #ffffff !important;
-    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
+    color: #ff69b4 !important; /* LIGHTER HOT PINK */
+    text-shadow: 0 0 10px rgba(255, 20, 147, 0.5) !important;
 }
 
 /* Table styling with jade theme */
@@ -694,15 +703,15 @@ table {
 
 th {
     background: linear-gradient(135deg, rgba(0, 255, 136, 0.4) 0%, rgba(0, 204, 102, 0.4) 100%) !important;
-    color: #ffffff !important;
-    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7) !important;
+    color: #ff1493 !important; /* HOT PINK */
+    text-shadow: 0 0 10px rgba(255, 20, 147, 0.7) !important;
     font-weight: 700 !important;
     padding: 15px !important;
 }
 
 td {
     border: 1px solid #00ff8844 !important;
-    color: #00ffcc !important;
+    color: #ff1493 !important; /* HOT PINK */
     padding: 12px !important;
     font-size: 1.05em !important;
 }
@@ -730,15 +739,15 @@ td {
 
 /* Links with jade glow */
 a {
-    color: #00ffcc !important;
+    color: #ff1493 !important; /* HOT PINK */
     text-decoration: none !important;
-    text-shadow: 0 0 8px rgba(0, 255, 204, 0.6) !important;
+    text-shadow: 0 0 8px rgba(255, 20, 147, 0.6) !important;
     transition: all 0.3s ease !important;
 }
 
 a:hover {
-    color: #ffffff !important;
-    text-shadow: 0 0 15px rgba(0, 255, 204, 0.9) !important;
+    color: #ff69b4 !important; /* LIGHTER HOT PINK */
+    text-shadow: 0 0 15px rgba(255, 20, 147, 0.9) !important;
 }
 
 /* Enhanced readability for all text */
@@ -747,7 +756,85 @@ a:hover {
     -moz-osx-font-smoothing: grayscale !important;
 }
 
-/* Jade synthwave sun/orb */
+/* Force all text to be hot pink */
+gradio-app *, 
+.gradio-container *,
+label, span, div, p, h1, h2, h3, h4, h5, h6,
+.gr-box *, .gr-form *, .gr-panel * {
+    color: #ff1493 !important; /* HOT PINK FOR EVERYTHING */
+}
+
+/* Specific overrides for better visibility */
+.gr-info {
+    color: #ff69b4 !important; /* LIGHTER HOT PINK for info text */
+}
+
+.gr-markdown, .gr-markdown * {
+    color: #ff1493 !important; /* HOT PINK for markdown */
+}
+
+/* Keep primary button text dark for contrast */
+.gr-button-primary, .gr-button-primary * {
+    color: #001a1a !important; /* Dark text on bright button */
+}
+
+/* File upload with jade style */
+.gr-file-input {
+    background: rgba(0, 255, 136, 0.05) !important;
+    border: 3px dashed #00ff88 !important;
+    color: #ff1493 !important; /* HOT PINK */
+    transition: all 0.3s ease !important;
+    position: relative;
+    overflow: hidden;
+}
+
+.gr-upload-text {
+    color: #ff1493 !important; /* HOT PINK */
+    text-shadow: 0 0 3px rgba(255, 20, 147, 0.5) !important;
+}
+
+/* Labels and other text elements */
+.gr-label {
+    color: #ff1493 !important; /* HOT PINK */
+    font-size: 1.1em !important;
+}
+
+.gr-text-input {
+    color: #ff1493 !important; /* HOT PINK */
+    font-size: 1em !important;
+}
+
+/* Loading animations */
+.gr-loading {
+    color: #ff1493 !important; /* HOT PINK */
+}
+
+/* Make all text more readable */
+.gr-prose, .gr-text-input, .message-body {
+    font-size: 1.05em !important;
+    line-height: 1.6 !important;
+    font-weight: 400 !important;
+    color: #ff1493 !important; /* HOT PINK */
+}
+
+/* Update placeholder text */
+input::placeholder, textarea::placeholder {
+    color: #ff149380 !important; /* HOT PINK with transparency */
+}
+
+/* Special love message animation */
+@keyframes love-pulse {
+    0%, 100% { transform: scale(1); opacity: 0.8; }
+    50% { transform: scale(1.1); opacity: 1; }
+}
+
+.love-message {
+    animation: love-pulse 3s ease-in-out infinite;
+    text-shadow: 0 0 20px #ff1493;
+    color: #ff1493 !important; /* HOT PINK */
+}
+
+/* Jade synthwave sun/orb - keeping green for contrast */
 .jade-orb {
     width: 300px;
     height: 300px;
@@ -788,29 +875,6 @@ body::after {
     pointer-events: none;
     z-index: 1;
 }
-
-/* Loading animations */
-.gr-loading {
-    color: #00ff88 !important;
-}
-
-/* Make all text more readable */
-.gr-prose, .gr-text-input, .message-body {
-    font-size: 1.05em !important;
-    line-height: 1.6 !important;
-    font-weight: 400 !important;
-}
-
-/* Special love message animation */
-@keyframes love-pulse {
-    0%, 100% { transform: scale(1); opacity: 0.8; }
-    50% { transform: scale(1.1); opacity: 1; }
-}
-
-.love-message {
-    animation: love-pulse 3s ease-in-out infinite;
-    text-shadow: 0 0 20px #00ff88;
-}
 """
 
 JAVASCRIPT_CODE = """
@@ -833,7 +897,7 @@ document.addEventListener('DOMContentLoaded', () => {
         particle.style.position = 'fixed';
         particle.style.width = Math.random() * 4 + 'px';
         particle.style.height = particle.style.width;
-        particle.style.background = i % 3 === 0 ? '#00ff88' : '#00ffcc';
+        particle.style.background = i % 2 === 0 ? '#ff1493' : '#ff69b4'; // Hot pink particles
         particle.style.borderRadius = '50%';
         particle.style.left = Math.random() * 100 + '%';
         particle.style.top = Math.random() * 100 + '%';
@@ -908,10 +972,10 @@ with gr.Blocks(
     </script>
     <div style="text-align: center; max-width: 900px; margin: 0 auto; padding-top: 50px; position: relative;">
         <h1 data-text="💚 JADE GPT 💚">💚 JADE GPT 💚</h1>
-        <p style="color: #00ffcc; font-size: 1.3em; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 10px;">
+        <p style="color: #ff1493; font-size: 1.3em; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 10px;">
             Neural Interface v3.14 • Jade Sector • Year 2084
         </p>
-        <p class="love-message" style="color: #ffffff; font-size: 1.1em; letter-spacing: 2px; opacity: 0.9;">
+        <p class="love-message" style="color: #ff69b4; font-size: 1.1em; letter-spacing: 2px; opacity: 0.9;">
             ✨ Future Wife of Anthony Edition ✨
         </p>
     </div>