Update style.css

style.css

@@ -2,10 +2,23 @@
 *{margin:0;padding:0;box-sizing:border-box}
 
 :root{
-  --bg:#000; --fg:#fff; --muted:rgba(255,255,255,.55);
-  --card:rgba(255,255,255,.04); --card2:rgba(255,255,255,.08);
-  --stroke:rgba(255,255,255,.10); --glass:rgba(0,0,0,.21);
+  --bg:#000;
+  --fg:#fff;
+  --muted:rgba(255,255,255,.55);
+
+  --card:rgba(255,255,255,.04);
+  --card2:rgba(255,255,255,.08);
+  --stroke:rgba(255,255,255,.10);
+
+  /* glass needs to be visible but not milky */
+  --glass:rgba(0,0,0,.32);
+
   --accent:#8cb4ff;
+  --accentGlow: rgba(140,180,255,.20);
+
+  --rSm:10px;
+  --rMd:12px;
+  --rLg:14px;
 }
 
 html,body{height:100%}
@@ -16,11 +29,14 @@ body, .gradio-container{
   overflow-x:hidden;
 }
 
-/* Starfield canvas */
+/* Starfield canvas (keep it inside stacking context) */
 #quantumField{
   position:fixed; inset:0;
   width:100vw; height:100vh;
-  z-index:-6; background:#000;
+  z-index:0;
+  background:#000;
+  pointer-events:none;
+  opacity:.70;
 }
 
 /*  Nav */
@@ -29,13 +45,13 @@ body, .gradio-container{
   top: 0; left: 0; right: 0;
   z-index: 999;
   padding: 12px 22px;
-  background: var(--glass);
-  backdrop-filter: blur(10px);
+  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.22));
+  backdrop-filter: blur(12px);
   border-bottom: 1px solid rgba(255,255,255,.06);
 }
 
 #tqNav .nav-inner{
-  max-width: 860px;
+  max-width: 980px;
   margin: 0 auto;
   display:flex;
   align-items:center;
@@ -43,9 +59,10 @@ body, .gradio-container{
 }
 
 #tqNav .brand{
-  font-weight: 600;
-  font-size: 1.1rem;
+  font-weight: 700;
+  font-size: 1.05rem;
   letter-spacing: .22px;
+  opacity: .92;
 }
 
 #tqNav .nav-links{
@@ -62,36 +79,45 @@ body, .gradio-container{
   border: 1px solid rgba(255,255,255,.12);
   border-radius: 999px;
   font-size: .9rem;
-  opacity: .76;
+  opacity: .78;
   transition: .15s ease;
   white-space: nowrap;
+  background: rgba(255,255,255,.02);
 }
 
 #tqNav .nav-links a:hover{
   opacity: 1;
   background: rgba(255,255,255,.06);
+  border-color: rgba(255,255,255,.18);
 }
 
 #tqNav .spacer{ flex:1; }
 
+/* Hamburger button */
 #tqNav .menu-btn{
-  width: 25px;
-  height: 25px;
+  width: 34px;
+  height: 34px;
   display:flex;
   align-items:center;
   justify-content:center;
-  border: 1px solid rgba(255,255,255,.18);
-  border-radius: 10px;
+  border: 1px solid rgba(255,255,255,.14);
+  border-radius: 12px;
   cursor: pointer;
-  background: rgba(255,255,255,.02);
+  background: rgba(255,255,255,.03);
+  transition: .15s ease;
+}
+#tqNav .menu-btn:hover{
+  background: rgba(255,255,255,.06);
+  border-color: rgba(255,255,255,.20);
 }
 
 #tqNav .menu-btn span{
   display:block;
   width:16px;
-  height:4px;
-  background:#000;
+  height:2px;
+  background: var(--fg);     /* FIX: was black */
   position:relative;
+  opacity:.9;
 }
 
 #tqNav .menu-btn span::before,
@@ -100,8 +126,9 @@ body, .gradio-container{
   position:absolute;
   left:0;
   width:16px;
-  height:4px;
-  background:#000;
+  height:2px;
+  background: var(--fg);     /* FIX: was black */
+  opacity:.9;
 }
 
 #tqNav .menu-btn span::before{ top:-6px; }
@@ -113,9 +140,9 @@ body, .gradio-container{
   right: 24px;
   min-width: 220px;
   padding: 10px;
-  border-radius: 12px;
+  border-radius: var(--rLg);
   background: var(--glass);
-  backdrop-filter: blur(12px);
+  backdrop-filter: blur(14px);
   border: 1px solid rgba(255,255,255,.10);
   box-shadow: 0 0 28px rgba(0,0,0,.6);
   display:none;
@@ -129,12 +156,12 @@ body, .gradio-container{
   border-radius: 10px;
   text-decoration:none;
   color: var(--fg);
-  opacity: .85;
+  opacity: .88;
 }
 
 #tqNav .menu a:hover{
   background: rgba(255,255,255,.06);
-  opacity: 0.89;
+  opacity: 1;
 }
 
 #tqNav .menu .sep{
@@ -146,7 +173,7 @@ body, .gradio-container{
 /* Make app sit above canvas and below fixed nav */
 #tqApp{
   position:relative;
-  z-index:1;
+  z-index:1;             /* above canvas */
   padding-top: 84px;
 }
 
@@ -155,18 +182,24 @@ body, .gradio-container{
   margin: 10px 0 14px 0;
   padding: 14px 18px;
   background: var(--glass);
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(12px);
   border: 1px solid rgba(255,255,255,.06);
-  border-radius: 10x;
+  border-radius: var(--rMd); /* FIX: 10x -> 10px */
+  box-shadow: 0 12px 34px rgba(0,0,0,.45);
 }
+
 .tq-hero .brand{
-  font-weight:600; letter-spacing:.22px; font-size:1.1rem;
+  font-weight:700;
+  letter-spacing:.22px;
+  font-size:1.08rem;
+  opacity:.92;
 }
+
 .tq-hero .desc{
   margin-top:8px;
   color: var(--muted);
   font-size: .98rem;
-  line-height: 1.35;
+  line-height: 1.45;
 }
 
 /* Cards / panels */
@@ -175,38 +208,45 @@ body, .gradio-container{
 .gradio-container .wrap{
   border:1px solid var(--stroke) !important;
   background: var(--card) !important;
-  backdrop-filter: blur(8px) !important;
-  border-radius: 10px !important;
+  backdrop-filter: blur(10px) !important;
+  border-radius: var(--rMd) !important;
 }
 
-/* Hover effect on panels that look like cards */
+/* Hover effect */
 .gradio-container .gr-panel:hover{
   background: var(--card2) !important;
+  border-color: rgba(255,255,255,.14) !important;
 }
 
-/* Tabs (match pill vibe) */
+/* Tabs (pill vibe) */
 .gradio-container .gr-tab-nav{
   background: transparent !important;
   border: none !important;
   gap: 10px !important;
 }
+
 .gradio-container .gr-tab-nav button{
   border:1px solid rgba(255,255,255,.12) !important;
   border-radius:999px !important;
   padding:8px 12px !important;
   color: var(--fg) !important;
-  opacity:.76 !important;
-  background: rgba(255,255,255,.00) !important;
+  opacity:.78 !important;
+  background: rgba(255,255,255,.02) !important;
   transition:.18s ease !important;
 }
+
 .gradio-container .gr-tab-nav button:hover{
   opacity:1 !important;
   background: rgba(255,255,255,.06) !important;
+  border-color: rgba(255,255,255,.18) !important;
 }
+
 .gradio-container .gr-tab-nav button.selected{
   opacity: 1 !important;
-  border-color: rgba(255,255,255,.35) !important;
-  box-shadow: 0 0 0 1px rgba(200,200,200,.12) inset !important;
+  border-color: rgba(140,180,255,.55) !important;
+  box-shadow:
+    0 0 0 1px rgba(140,180,255,.18) inset,
+    0 0 20px var(--accentGlow) !important;
 }
 
 /* Inputs */
@@ -215,29 +255,32 @@ body, .gradio-container{
   background: rgba(255,255,255,.03) !important;
   border:1px solid rgba(255,255,255,.12) !important;
   color: var(--fg) !important;
-  border-radius: 10px !important;
+  border-radius: var(--rMd) !important;
 }
 
 /* Buttons */
 .gradio-container button,
 .gradio-container .gr-button{
   color: var(--fg) !important;
-  border:1px solid rgba(255,255,255,.11) !important;
-  background: rgba(255,255,255,.06) !important;
+  border:1px solid rgba(255,255,255,.12) !important;
+  background: rgba(255,255,255,.04) !important;
   border-radius:999px !important;
-  padding:10px 12px !important;
-  opacity:.72 !important;
+  padding:10px 14px !important;
+  opacity:.86 !important;
   transition:.15s ease !important;
 }
+
 .gradio-container button:hover,
 .gradio-container .gr-button:hover{
   opacity:1 !important;
-  background: rgba(255,255,255,.07) !important;
+  background: rgba(255,255,255,.08) !important;
+  border-color: rgba(140,180,255,.35) !important;
+  box-shadow: 0 0 18px var(--accentGlow);
 }
 
 /* Gallery tweaks */
 .gradio-container .gallery{
-  border-radius: 9px !important;
+  border-radius: var(--rMd) !important;
 }
 
 /* Range accent */