Create style.css

style.css

@@ -1,28 +1,47 @@
-/* style.css */
 body {
-    background-color: #0f0f0f;
+    background: #121212;
     color: white;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-family: 'Segoe UI', sans-serif;
+    padding: 20px;
 }
 
-.gradio-container {
-    max-width: 1000px;
-    margin: auto;
-    background-color: #1a1a1a;
-    border-radius: 10px;
-    padding: 20px;
+.studio-header {
+    text-align: center;
+    margin-bottom: 20px;
 }
 
-.tab-wrap {
-    background-color: #222;
+.gr-box {
+    border-radius: 10px;
+    background-color: #1e1e1e;
+    padding: 10px;
 }
 
-button {
-    background-color: #8e44ad !important;
-    border: none !important;
+.gr-button {
+    background-color: #1db954 !important;
     color: white !important;
+    border-radius: 8px;
+    font-weight: bold;
+    padding: 10px;
 }
 
-button:hover {
-    background-color: #9b59b6 !important;
+.gr-interface {
+    border: 1px solid #333;
+    border-radius: 12px;
+    padding: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+.gr-tabs button {
+    font-size: 16px;
+    padding: 10px 20px;
+}
+
+@media (max-width: 768px) {
+    .gr-column {
+        min-width: 100%;
+    }
+
+    .gr-row {
+        flex-direction: column;
+    }
 }