Update theme.py

theme.py

@@ -1,6 +1,5 @@
 import gradio as gr
 
-# Put ALL your custom CSS here
 custom_css = """
 body {
     background: linear-gradient(135deg, #020617 0%, #1e0b45 50%, #020617 100%);
@@ -21,19 +20,45 @@ body {
     box-shadow: none !important;
 }
 
+/* ── Card shell: no padding here, handled by .card-inner ── */
 .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;
+    padding: 0 !important;
     overflow: hidden;
 }
 
-.glass-card > * + * {
-    margin-top: 12px;
+/* ── Inner wrapper that actually controls the card breathing room ── */
+.card-inner {
+    padding: 20px 22px !important;
+    box-sizing: border-box;
+}
+
+/* Remove excess margin from first/last child inside card-inner */
+.card-inner > *:first-child { margin-top: 0 !important; }
+.card-inner > *:last-child  { margin-bottom: 0 !important; }
+
+/* ── 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;
+}
+
+/* ── Prose / markdown text inside cards ── */
+.glass-card .prose,
+.glass-card .markdown-body {
+    color: #f9fafb !important;
 }
 
+/* ── Hero section ── */
 .hero-title {
     font-size: 34px;
     font-weight: 700;
@@ -42,7 +67,6 @@ body {
     color: #e5e7eb;
     margin-bottom: 8px;
 }
-
 .hero-subtitle {
     font-size: 14px;
     max-width: 640px;
@@ -50,6 +74,7 @@ body {
     color: #cbd5f5;
 }
 
+/* ── Confidence bar ── */
 .conf-bar-bg {
     margin-top: 14px;
     width: 100%;
@@ -57,13 +82,13 @@ body {
     border-radius: 999px;
     background: rgba(148, 163, 184, 0.35);
 }
-
 .conf-bar-fill {
     height: 100%;
     border-radius: inherit;
     background: linear-gradient(90deg, #f97316, #fb923c);
 }
 
+/* ── Label badges ── */
 .badge-pill {
     display: inline-flex;
     align-items: center;
@@ -72,17 +97,10 @@ body {
     font-size: 11px;
     font-weight: 600;
 }
+.badge-fake { background: #f97316; color: #111827; }
+.badge-real { background: #22c55e; color: #022c22; }
 
-.badge-fake {
-    background: #f97316;
-    color: #111827;
-}
-
-.badge-real {
-    background: #22c55e;
-    color: #022c22;
-}
-
+/* ── Textarea (the input box) ── */
 .gradio-container textarea {
     background: #020617 !important;
     border-radius: 18px !important;
@@ -93,16 +111,17 @@ body {
     line-height: 1.5 !important;
     box-sizing: border-box !important;
 }
-
 .gradio-container textarea::placeholder {
     color: #94a3b8 !important;
     opacity: 1 !important;
 }
 
+/* ── Labels ── */
 .gradio-container label {
     margin-bottom: 6px !important;
 }
 
+/* ── Responsive ── */
 @media (max-width: 900px) {
     .two-col {
         flex-direction: column !important;
@@ -110,6 +129,7 @@ body {
 }
 """
 
+
 def header():
     return gr.HTML(
         """
@@ -125,7 +145,7 @@ def header():
               <div>
                 <div style="font-weight:600;font-size:14px;letter-spacing:0.08em;
                             text-transform:uppercase;color:#e5e7eb;">
-                  CMD‑BERT
+                  CMD&#8209;BERT
                 </div>
                 <div style="font-size:11px;color:#9ca3af;">
                   Cebuano Misinformation Detector
@@ -133,7 +153,7 @@ def header():
               </div>
             </div>
             <div style="display:flex;align-items:center;gap:8px;font-size:13px;color:#e5e7eb;opacity:0.9;">
-              <span>About CMD‑BERT</span>
+              <span>About CMD&#8209;BERT</span>
               <div style="width:24px;height:24px;border-radius:999px;
                           background:rgba(148,163,184,0.35);"></div>
             </div>
@@ -142,7 +162,10 @@ def header():
         """
     )
 
+
 def card_start():
-    return gr.HTML("")
+    return gr.HTML("<div class='card-inner'>")
+
+
 def card_end():
-    return gr.HTML("")
+    return gr.HTML("</div>")