enhance on UI

app.py

@@ -328,26 +328,42 @@ CSS = """
 body, .gradio-container {
     background: #0f0f1a !important;
 }
+
+/* ── constrain page width ── */
+.gradio-container > .main,
+.gradio-container .tabs,
+.gradio-container > div {
+    max-width: 860px !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+}
+
 #header {
     text-align: center;
-    padding: 2rem 0 1.25rem;
+    padding: 2rem 0 1.5rem;
+    max-width: 860px;
+    margin: 0 auto;
 }
 #header h1 {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    font-size: 2.4rem;
+    font-size: 2.2rem;
     font-weight: 800;
     margin-bottom: 0.25rem;
 }
 #header p { color: #888; font-size: 1rem; margin: 0; }
+
+/* ── cards ── */
 #config-card, #output-card, #pdf-row {
     background: #1a1a2e !important;
     border: 1px solid #2a2a4a !important;
     border-radius: 16px !important;
-    padding: 1.5rem 2rem !important;
+    padding: 1.75rem 2rem !important;
     margin-bottom: 1.25rem !important;
 }
+
+/* ── inputs ── */
 #config-card input, #config-card textarea, #config-card select {
     background: #0f0f1a !important;
     border: 1px solid #2a2a4a !important;
@@ -355,22 +371,30 @@ body, .gradio-container {
     border-radius: 8px !important;
 }
 #config-card label, #config-card .label-wrap span { color: #aaa !important; }
+
+/* ── generate button ── */
+#btn-row {
+    display: flex !important;
+    justify-content: center !important;
+    padding: 0.75rem 0 0.25rem !important;
+}
 #generate-btn {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
     color: white !important;
     font-weight: 700 !important;
-    font-size: 1.05rem !important;
+    font-size: 1rem !important;
     border: none !important;
     border-radius: 10px !important;
     width: auto !important;
-    min-width: 220px !important;
-    padding: 10px 36px !important;
-    margin-top: 0.5rem !important;
+    min-width: 200px !important;
+    max-width: 260px !important;
+    padding: 10px 32px !important;
+    margin: 0 auto 1.5rem auto !important;
     display: block !important;
-    margin-left: auto !important;
-    margin-right: auto !important;
 }
 #generate-btn:hover { opacity: 0.88 !important; transform: translateY(-1px) !important; }
+
+/* ── output card text ── */
 #output-card p, #output-card li,
 #output-card h1, #output-card h2, #output-card h3,
 #output-card h4, #output-card code { color: #e0e0f0 !important; }
@@ -385,6 +409,7 @@ body, .gradio-container {
     border-radius: 8px !important;
     padding: 1rem !important;
 }
+
 footer { display: none !important; }
 """