Update style.css

style.css

@@ -82,7 +82,7 @@ body {
 .gradio-container {
   background: var(--bg-base) !important;
   color: var(--fg-primary) !important;
-  max-width: 1400px;
+  max-width: 999px;
   margin: 0 auto;
   padding: var(--space-lg);
 }
@@ -104,7 +104,7 @@ body {
 /* ─────────────────────────────────────────────────────────── */
 /* 5. MAIN APP CONTAINER                                       */
 /* ─────────────────────────────────────────────────────────── */
-#tqApp {
+#tq-app {
   position: relative;
   z-index: var(--z-base);
   padding-top: var(--space-md);
@@ -163,7 +163,7 @@ body {
   text-decoration: none;
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid var(--border-medium);
-  border-radius: var(--radius-full);
+  border-radius: var(--radius-sm);
   opacity: 0.85;
   transition: all var(--trans-base);
   white-space: nowrap;
@@ -199,11 +199,6 @@ body {
   transition: all var(--trans-base) !important;
 }
 
-.gradio-container .gr-panel:hover {
-  background: var(--surface-card-hover) !important;
-  border-color: var(--border-medium) !important;
-}
-
 /* ─────────────────────────────────────────────────────────── */
 /* 9. TABS SYSTEM                                              */
 /* ─────────────────────────────────────────────────────────── */
@@ -279,7 +274,7 @@ body {
   font-size: 0.9375rem !important;
   font-weight: 500 !important;
   color: var(--fg-primary) !important;
-  background: rgba(255, 255, 255, 0.03) !important;
+  background: rgba(255, 255, 255, 0.53) !important;
   border: 1px solid var(--border-medium) !important;
   border-radius: var(--radius-full) !important;
   opacity: 0.92 !important;
@@ -290,7 +285,7 @@ body {
 .gradio-container button:hover:not(.gr-tab-nav button),
 .gradio-container .gr-button:hover {
   opacity: 0.65 !important;
-  background: rgba(255, 255, 255, 0.10) !important;
+  background: rgba(255, 255, 255, 0.90) !important;
   border-color: var(--border-accent) !important;
   box-shadow: 0 0 16px var(--ultra-blue-glow) !important;
 }
@@ -334,7 +329,7 @@ body {
   overflow: hidden !important;
   border: 0.5px solid var(--border-subtle) !important;
   transition: all var(--trans-base) !important;
-  background: rgba(255, 255, 255, 0.03) !important;
+  background: rgba(25, 25, 25, 0.75) !important;
 }
 
 .gradio-container .gr-gallery .gr-image:hover {
@@ -376,7 +371,7 @@ body {
 
 .tq-carousel__track {
   display: flex;
-  gap: var(--space-md);
+  gap: var(--space-sm);
   transition: transform var(--trans-slow);
   will-change: transform;
 }
@@ -388,7 +383,7 @@ body {
   overflow: hidden;
   border: 1px solid var(--border-subtle);
   transition: all var(--trans-base);
-  background: rgba(255, 255, 255, 0.03);
+  background: rgba(255, 255, 255, 0.63);
 }
 
 .tq-carousel__item:hover {
@@ -413,7 +408,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.25);
+  background: rgba(0, 0, 0, 0.85);
   backdrop-filter: blur(12px);
   border: 0.5px solid var(--border-medium);
   border-radius: var(--radius-sm);
@@ -422,8 +417,8 @@ body {
   z-index: var(--z-dropdown);
 }
 
-.tq-carousel__nav--prev { left: var(--space-md); }
-.tq-carousel__nav--next { right: var(--space-md); }
+.tq-carousel__nav--prev { left: var(--space-sm); }
+.tq-carousel__nav--next { right: var(--space-sm); }
 
 .tq-carousel__nav:hover {
   background: var(--ultra-blue-glow);