Update theme.py

theme.py

@@ -20,32 +20,45 @@ body {
     box-shadow: none !important;
 }
 
-/* ── Card shell: no padding here, handled by .card-inner ── */
+/* ── Glass card shell ── */
 .glass-card {
-    background: rgba(15, 23, 42, 0.96);
-    border-radius: 24px;
-    border: 1px solid rgba(148, 163, 184, 0.30);
-    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.9);
-    padding: 20px 22px !important;   /* ← ADD THIS */
+    background: rgba(15, 23, 42, 0.96) !important;
+    border-radius: 24px !important;
+    border: 1px solid rgba(148, 163, 184, 0.30) !important;
+    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.9) !important;
     overflow: hidden;
 }
 
-/* ── Gradio component wrappers inside any glass-card ── */
-.glass-card .gradio-markdown,
-.glass-card .gradio-html,
-.glass-card .gradio-textbox,
-.glass-card .gradio-button,
-.glass-card .gradio-dropdown,
-.glass-card .gradio-checkbox,
-.glass-card .gradio-row,
-.glass-card .gradio-column {
-    box-sizing: border-box;
+/* ── Padding via ID selectors (beats Svelte scoped styles) ── */
+#input-card,
+#result-card,
+#hiw-intro-card,
+#hiw-step1-card,
+#hiw-step2-card,
+#hiw-step3-card,
+#about-intro-card,
+#about-thesis-card,
+#fb-intro-card,
+#fb-form-card,
+#fb-faq-card {
+    padding: 20px 22px !important;
+    gap: 10px !important;
 }
 
-/* ── Prose / markdown text inside cards ── */
-.glass-card .prose,
-.glass-card .markdown-body {
-    color: #f9fafb !important;
+/* ── Inner Gradio form wrapper (Svelte renders this inside every Group) ── */
+#input-card > .form,
+#result-card > .form,
+#hiw-intro-card > .form,
+#hiw-step1-card > .form,
+#hiw-step2-card > .form,
+#hiw-step3-card > .form,
+#about-intro-card > .form,
+#about-thesis-card > .form,
+#fb-intro-card > .form,
+#fb-form-card > .form,
+#fb-faq-card > .form {
+    padding: 20px 22px !important;
+    gap: 10px !important;
 }
 
 /* ── Hero section ── */
@@ -66,7 +79,6 @@ body {
 
 /* ── Confidence bar ── */
 .conf-bar-bg {
-    margin-top: 14px;
     width: 100%;
     height: 8px;
     border-radius: 999px;
@@ -90,10 +102,13 @@ body {
 .badge-fake { background: #f97316; color: #111827; }
 .badge-real { background: #22c55e; color: #022c22; }
 
-/* ── Textarea (the input box) ── */
-.gradio-container textarea {
+/* ── Textarea ── */
+#news-textbox textarea,
+#fb-textbox textarea,
+#fb-email-textbox textarea,
+#fb-email-textbox input {
     background: #020617 !important;
-    border-radius: 18px !important;
+    border-radius: 12px !important;
     border: 1px solid rgba(148, 163, 184, 0.35) !important;
     color: #f9fafb !important;
     font-size: 13px !important;
@@ -101,7 +116,10 @@ body {
     line-height: 1.5 !important;
     box-sizing: border-box !important;
 }
-.gradio-container textarea::placeholder {
+
+#news-textbox textarea::placeholder,
+#fb-textbox textarea::placeholder,
+#fb-email-textbox input::placeholder {
     color: #94a3b8 !important;
     opacity: 1 !important;
 }
@@ -111,6 +129,14 @@ body {
     margin-bottom: 6px !important;
 }
 
+/* ── Prose / markdown text color inside dark cards ── */
+.glass-card .prose,
+.glass-card .markdown-body,
+.glass-card p,
+.glass-card li {
+    color: #f9fafb !important;
+}
+
 /* ── Responsive ── */
 @media (max-width: 900px) {
     .two-col {
@@ -151,10 +177,3 @@ def header():
         </div>
         """
     )
-
-
-def card_start():
-    return gr.HTML("")
-
-def card_end():
-    return gr.HTML("")