Update static/styles.css

static/styles.css

@@ -3,6 +3,7 @@ body {
     font-family: 'Inter', sans-serif;
     line-height: 1.6;
     transition: background 0.3s ease, color 0.3s ease;
+    position: relative;
 }
 
 body.light {
@@ -11,10 +12,57 @@ body.light {
 }
 
 body.dark {
-    background: #1e1b4b; /* Deep navy */
+    background: #0a0a23; /* Starry void */
     color: #e2e8f0;
 }
 
+.starfield {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: -1;
+}
+
+body.dark .starfield {
+    display: block;
+}
+
+.starfield::before,
+.starfield::after {
+    content: '';
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    background: #e2e8f0; /* Star-like glow */
+    border-radius: 50%;
+    animation: twinkle 5s infinite;
+}
+
+.starfield::before { top: 10%; left: 20%; }
+.starfield::after { top: 60%; left: 80%; }
+
+.starfield span::before {
+    content: '';
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    background: #a3bffa; /* Light blue star */
+    border-radius: 50%;
+    animation: twinkle 7s infinite;
+}
+
+.starfield span:nth-child(1)::before { top: 30%; left: 50%; }
+.starfield span:nth-child(2)::before { top: 80%; left: 30%; }
+
+@keyframes twinkle {
+    0%, 100% { opacity: 0.2; }
+    50% { opacity: 0.8; }
+}
+
 header {
     text-align: center;
     padding: 2rem;
@@ -30,8 +78,8 @@ header {
 }
 
 body.dark .header-content {
-    background: #2c2a66; /* Dark navy */
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    background: #2c2a66; /* Dark navy with starry glow */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
 header h1 {
@@ -41,7 +89,7 @@ header h1 {
 }
 
 body.light header h1 { color: #4a044e; /* Deep magenta */ }
-body.dark header h1 { color: #c4b5fd; /* Soft lavender */ }
+body.dark header h1 { color: #c4b5fd; /* Glowing lavender */ }
 
 header p {
     margin: 0.5rem 0;
@@ -49,7 +97,7 @@ header p {
 }
 
 body.light header p { color: #6b4e31; /* Muted brown */ }
-body.dark header p { color: #a3bffa; /* Light blue */ }
+body.dark header p { color: #a3bffa; /* Starlight blue */ }
 
 #mode-toggle {
     position: absolute;
@@ -92,14 +140,18 @@ body.light .function-box {
 }
 
 body.dark .function-box {
-    background: #444679; /* Muted gray */
-    border-color: #c4b5fd; /* Lavender border */
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
+    background: #1c2526; /* Dark starry gray */
+    border-color: #c4b5fd; /* Glowing lavender border */
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
 }
 
 .function-box:hover {
     transform: scale(1.05); /* Enlarge on hover */
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+body.dark .function-box:hover {
+    box-shadow: 0 6px 12px rgba(196, 181, 253, 0.3); /* Starry glow */
 }
 
 .function-box img {
@@ -115,7 +167,7 @@ body.dark .function-box {
 }
 
 body.light .function-box h2 { color: #4a044e; }
-body.dark .function-box h2 { color: #e2e8f0; }
+body.dark .function-box h2 { color: #e2e8f0; /* Starlight gray */ }
 
 .function-box p {
     margin: 0;
@@ -123,7 +175,7 @@ body.dark .function-box h2 { color: #e2e8f0; }
 }
 
 body.light .function-box p { color: #6b4e31; }
-body.dark .function-box p { color: #a3bffa; }
+body.dark .function-box p { color: #a3bffa; /* Starlight blue */ }
 
 #gemini-orb {
     position: fixed;
@@ -144,8 +196,8 @@ body.dark .function-box p { color: #a3bffa; }
 }
 
 body.dark #gemini-orb {
-    background: linear-gradient(135deg, #c4b5fd, #6ee7b7); /* Lavender to mint */
-    color: #1e1b4b;
+    background: linear-gradient(135deg, #c4b5fd, #a3bffa); /* Lavender to starlight blue */
+    color: #e2e8f0;
 }
 
 #gemini-orb:hover {
@@ -153,6 +205,10 @@ body.dark #gemini-orb {
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
 }
 
+body.dark #gemini-orb:hover {
+    box-shadow: 0 0 20px rgba(196, 181, 253, 0.5); /* Starry glow */
+}
+
 .modal {
     position: fixed;
     top: 0;
@@ -167,7 +223,7 @@ body.dark #gemini-orb {
 }
 
 body.dark .modal {
-    background: #1e1b4b; /* Solid navy */
+    background: #0a0a23; /* Starry void */
 }
 
 .modal-content {
@@ -185,8 +241,8 @@ body.light .modal-content {
 }
 
 body.dark .modal-content {
-    background: #2c2a66; /* Dark navy */
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    background: #2c2a66; /* Dark navy with starry glow */
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
 @keyframes fadeIn {
@@ -249,8 +305,8 @@ body.light input[type="file"] {
 body.dark textarea,
 body.dark select,
 body.dark input[type="file"] {
-    border: 1px solid #6b7280;
-    background: #444679;
+    border: 1px solid #a3bffa; /* Starlight blue */
+    background: #1c2526; /* Dark starry gray */
     color: #e2e8f0;
 }
 
@@ -268,7 +324,7 @@ body.light input[type="file"]:focus {
 body.dark textarea:focus,
 body.dark select:focus,
 body.dark input[type="file"]:focus {
-    border-color: #c4b5fd;
+    border-color: #c4b5fd; /* Glowing lavender */
     box-shadow: 0 0 0 3px rgba(196, 181, 253, 0.2);
 }
 
@@ -287,12 +343,12 @@ body.light button[type="submit"] {
 }
 
 body.dark button[type="submit"] {
-    background: #c4b5fd;
-    color: #1e1b4b;
+    background: #c4b5fd; /* Glowing lavender */
+    color: #0a0a23;
 }
 
 body.light button[type="submit"]:hover { background: #c084fc; }
-body.dark button[type="submit"]:hover { background: #a78bfa; }
+body.dark button[type="submit"]:hover { background: #a3bffa; /* Starlight blue */ }
 
 .response-card {
     margin-top: 1rem;
@@ -301,7 +357,7 @@ body.dark button[type="submit"]:hover { background: #a78bfa; }
 }
 
 body.light .response-card { background: #f3e8ff; }
-body.dark .response-card { background: #444679; }
+body.dark .response-card { background: #1c2526; /* Dark starry gray */ }
 
 .response-card h3 {
     margin: 0 0 0.5rem;
@@ -324,8 +380,8 @@ body.light .answer {
 }
 
 body.dark .answer {
-    background: #6ee7b7; /* Muted mint */
-    color: #1e1b4b;
+    background: #a3bffa; /* Starlight blue */
+    color: #0a0a23;
 }
 
 .meta {
@@ -334,7 +390,7 @@ body.dark .answer {
 }
 
 body.light .meta { color: #6b4e31; }
-body.dark .meta { color: #a3bffa; }
+body.dark .meta { color: #e2e8f0; }
 
 .error {
     padding: 1rem;
@@ -384,12 +440,12 @@ body.light .copy-btn {
 }
 
 body.dark .copy-btn {
-    background: #34d399;
-    color: #1e1b4b;
+    background: #a3bffa; /* Starlight blue */
+    color: #0a0a23;
 }
 
 body.light .copy-btn:hover { background: #4ade80; }
-body.dark .copy-btn:hover { background: #22c55e; }
+body.dark .copy-btn:hover { background: #c4b5fd; }
 
 .chart-preview {
     max-width: 100%;
@@ -399,7 +455,7 @@ body.dark .copy-btn:hover { background: #22c55e; }
 }
 
 body.light .chart-preview { border: 1px solid #e2e8f0; }
-body.dark .chart-preview { border: 1px solid #6b7280; }
+body.dark .chart-preview { border: 1px solid #a3bffa; }
 
 .response-card pre {
     border-radius: 8px;