Update app.py

app.py

@@ -59,10 +59,119 @@ examples = [
 ]
 
 css = """
+/* ===== General Layout ===== */
+body {
+    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
+    font-family: 'Poppins', sans-serif;
+    color: #f5f5f5;
+}
+
 #col-container {
-    margin: 0 auto;
-    max-width: 640px;
+    margin: 2rem auto;
+    max-width: 720px;
+    padding: 20px;
+    background: rgba(30, 30, 50, 0.85);
+    border-radius: 20px;
+    box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
+}
+
+/* ===== Markdown / Headers ===== */
+h1, h2, h3, .gr-text, .gr-markdown {
+    color: #00ffff;
+    text-align: center;
+    text-shadow: 0 0 10px #00ffff;
+}
+
+/* ===== Text Input Styling ===== */
+input[type="text"], textarea {
+    background: rgba(50, 50, 70, 0.8);
+    color: #00ffff;
+    border: 2px solid #00ffff;
+    border-radius: 15px;
+    padding: 10px;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+}
+
+input[type="text"]:focus, textarea:focus {
+    border-color: #ff00ff;
+    box-shadow: 0 0 10px #ff00ff;
+    outline: none;
 }
+
+/* ===== Buttons ===== */
+button, .gr-button {
+    background: linear-gradient(90deg, #00ffff, #ff00ff);
+    color: #000;
+    border: none;
+    border-radius: 15px;
+    padding: 12px 25px;
+    font-weight: bold;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 0 20px rgba(0,255,255,0.5);
+}
+
+button:hover, .gr-button:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 25px rgba(255,0,255,0.7);
+}
+
+/* ===== Image Output Styling ===== */
+.gr-image-container img {
+    border-radius: 20px;
+    border: 3px solid #00ffff;
+    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.gr-image-container img:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 50px rgba(255, 0, 255, 0.7);
+}
+
+/* ===== Sliders / Controls ===== */
+.gr-slider {
+    accent-color: #00ffff;
+}
+
+.gr-accordion {
+    background: rgba(50,50,70,0.6);
+    border-radius: 15px;
+    padding: 10px;
+    margin-top: 15px;
+}
+
+.gr-accordion summary {
+    color: #ff00ff;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+/* ===== Examples ===== */
+.gr-examples {
+    background: rgba(50,50,70,0.7);
+    border-radius: 15px;
+    padding: 10px;
+    box-shadow: 0 0 20px rgba(0,255,255,0.3);
+}
+.gr-examples button {
+    background: #00ffff;
+    color: #000;
+    margin: 5px;
+    transition: all 0.3s ease;
+}
+.gr-examples button:hover {
+    background: #ff00ff;
+    transform: scale(1.1);
+}
+
+/* ===== Footer / Misc ===== */
+.gr-row {
+    margin-top: 15px;
+}
+
 """
 
 with gr.Blocks(css=css) as demo: