Upload 10 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+background_top.png filter=lfs diff=lfs merge=lfs -text

app.py

@@ -415,31 +415,33 @@ def ai_chat(user_msg: str, history: list):
     return history, viz_img, viz_tbl
 
 # ─────────────────────────────────────────────
-# Gradio Theme & CSS
+# CSS
 # ─────────────────────────────────────────────
-theme = gr.themes.Soft(
-    primary_hue=gr.themes.colors.blue,
-    secondary_hue=gr.themes.colors.purple,
-    font=("system-ui", "-apple-system", "Segoe UI", "sans-serif"),
-)
+BASE = Path(__file__).resolve().parent
 
 def _load_css() -> str:
-    """Load external CSS file if it exists."""
-    css_path = Path(__file__).parent / "style.css"
-    if css_path.exists():
-        return css_path.read_text(encoding="utf-8")
-    return ""
-
-CUSTOM_CSS = _load_css()
+    """Load external CSS and inject background image paths as CSS variables."""
+    css_path = BASE / "style.css"
+    css = css_path.read_text(encoding="utf-8") if css_path.exists() else ""
+    # Inject CSS custom properties for background images (served via /file=)
+    bg_vars = (
+        ":root {\n"
+        f"  --bg-top: url('/file={BASE / 'background_top.png'}');\n"
+        f"  --bg-mid: url('/file={BASE / 'background_mid.png'}');\n"
+        f"  --bg-bottom: url('/file={BASE / 'background_bottom.png'}');\n"
+        "}\n"
+    )
+    return bg_vars + css
 
 # ─────────────────────────────────────────────
 # Build the Gradio UI
 # ─────────────────────────────────────────────
-with gr.Blocks(theme=theme, css=CUSTOM_CSS, title="AIBDM 2026 Dashboard") as demo:
+with gr.Blocks(title="AIBDM 2026 Dashboard") as demo:
 
     gr.Markdown(
         "# AIBDM 2026 — AI & Big Data Management Dashboard\n"
-        "*ESCP Business School • Hugging Face Spaces*"
+        "*ESCP Business School • Hugging Face Spaces*",
+        elem_id="escp_title",
     )
 
     # ── Tab 1: Pipeline Runner ──────────────
@@ -588,4 +590,4 @@ with gr.Blocks(theme=theme, css=CUSTOM_CSS, title="AIBDM 2026 Dashboard") as dem
 # Launch (HF Spaces handles host/port)
 # ─────────────────────────────────────────────
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(css=_load_css(), allowed_paths=[str(BASE)])

requirements.txt

@@ -1,4 +1,4 @@
-gradio>=5.0.0,<6.0.0
+gradio>=6.0.0
 papermill>=2.6.0
 pandas>=2.2.0
 numpy>=1.26.0

style.css

@@ -1,12 +1,15 @@
 /* ============================================================
    ESCP Business School — AI for Business Decision Making
-   Gradio 5.x Custom Theme  |  Glass-Morphism Aurora
+   Gradio 5.x Custom Theme  |  ESCP Deep Purple + Glass Cards
    ============================================================ */
 
 /* ---------- design tokens ---------- */
 :root {
-  --bg: #f0ecff;
-  --bg-card: rgba(255, 255, 255, 0.72);
+  --escp-purple: rgb(40, 9, 109);
+  --escp-purple-light: rgb(60, 20, 140);
+  --escp-gold: rgb(242, 198, 55);
+  --bg-card: rgba(255, 255, 255, 0.95);
+  --bg-card-glass: rgba(255, 255, 255, 0.88);
   --lavender: #c5b4f0;
   --lavender-mid: #a48de8;
   --violet: #7c5cbf;
@@ -23,42 +26,73 @@
   --radius-md: 16px;
   --radius-lg: 20px;
   --radius-pill: 50px;
-  --shadow-card: 0 4px 24px rgba(75, 45, 138, 0.08);
-  --shadow-hover: 0 8px 32px rgba(75, 45, 138, 0.14);
+  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.12);
+  --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.18);
   --transition: 0.2s ease;
 }
 
-/* ---------- aurora background ---------- */
-body, .gradio-container {
-  background: var(--bg) !important;
-  font-family: var(--font-sans) !important;
-  color: var(--text) !important;
-}
-
-.gradio-container::before {
-  content: '';
-  position: fixed;
-  inset: 0;
-  z-index: -1;
-  background:
-    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(197, 180, 240, 0.55) 0%, transparent 70%),
-    radial-gradient(ellipse 50% 45% at 80% 15%, rgba(160, 200, 255, 0.45) 0%, transparent 65%),
-    radial-gradient(ellipse 40% 40% at 70% 75%, rgba(110, 231, 199, 0.35) 0%, transparent 60%),
-    radial-gradient(ellipse 35% 35% at 25% 80%, rgba(255, 179, 200, 0.30) 0%, transparent 60%),
-    var(--bg);
-  pointer-events: none;
-}
-
-/* ---------- container ---------- */
-.gradio-container > .main {
-  max-width: 1520px !important;
+/* ---------- ESCP deep purple background (extends infinitely) ---------- */
+html, body {
+  background-color: var(--escp-purple) !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  min-height: 100vh !important;
+}
+
+/* Background images: top (once at top) + mid (repeats to fill all remaining space) */
+/* NOTE: __BG_TOP__, __BG_MID__, __BG_BOTTOM__ are replaced at runtime by app.py
+   with the correct Gradio file-serving paths. */
+gradio-app,
+.gradio-app,
+.main,
+#app,
+[data-testid="app"] {
+  background-color: var(--escp-purple) !important;
+  background-image:
+    var(--bg-top),
+    var(--bg-mid) !important;
+  background-position:
+    top center,
+    0 913px !important;
+  background-repeat:
+    no-repeat,
+    repeat-y !important;
+  background-size:
+    100% auto,
+    100% auto !important;
+  min-height: 100vh !important;
+}
+
+/* Fixed bottom banner — stays pinned to viewport bottom */
+body::after {
+  content: '' !important;
+  position: fixed !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  height: 130px !important;
+  background-image: var(--bg-bottom) !important;
+  background-size: 100% 100% !important;
+  background-repeat: no-repeat !important;
+  background-position: bottom center !important;
+  pointer-events: none !important;
+  z-index: 9999 !important;
+}
+
+/* ---------- container: transparent so purple shows through ---------- */
+.gradio-container {
+  max-width: 1400px !important;
+  width: 94vw !important;
   margin: 0 auto !important;
-  padding: 1.5rem !important;
+  padding-top: 200px !important;
+  padding-bottom: 160px !important;
+  background: transparent !important;
+  font-family: var(--font-sans) !important;
 }
 
 /* ---------- animations ---------- */
 @keyframes popIn {
-  0%   { opacity: 0; transform: scale(0.92) translateY(12px); }
+  0%   { opacity: 0; transform: scale(0.94) translateY(10px); }
   100% { opacity: 1; transform: scale(1) translateY(0); }
 }
 
@@ -67,308 +101,284 @@ body, .gradio-container {
   100% { background-position: 200% center; }
 }
 
-/* ---------- cards / panels ---------- */
-.panel, .block, .form, .gradio-group,
-.gradio-accordion, .gradio-tabitem {
-  background: var(--bg-card) !important;
-  backdrop-filter: blur(18px) !important;
-  -webkit-backdrop-filter: blur(18px) !important;
-  border: 1px solid rgba(197, 180, 240, 0.30) !important;
-  border-radius: var(--radius-lg) !important;
-  box-shadow: var(--shadow-card) !important;
-  animation: popIn 0.4s ease both;
-}
-
-/* ---------- header accent stripe ---------- */
-.gradio-container > .main > *:first-child::before {
-  content: '';
-  display: block;
-  height: 4px;
-  border-radius: 2px;
-  margin-bottom: 1rem;
-  background: linear-gradient(90deg, var(--violet-deep), var(--lavender-mid), var(--mint), var(--blush));
-  background-size: 200% 100%;
-  animation: shimmerSlide 4s linear infinite;
-}
-
-/* ---------- tabs ---------- */
-.tabs > .tab-nav {
-  background: var(--bg-card) !important;
+/* ---------- title: ESCP gold ---------- */
+#escp_title h1,
+.gradio-container > .main > div:first-child h1 {
+  color: var(--escp-gold) !important;
+  font-size: 2.8rem !important;
+  font-weight: 800 !important;
+  text-align: center !important;
+  margin: 0 0 8px 0 !important;
+  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
+}
+
+/* subtitle / italic text */
+#escp_title p, #escp_title em,
+.gradio-container > .main > div:first-child p,
+.gradio-container > .main > div:first-child em {
+  color: rgba(255, 255, 255, 0.85) !important;
+  text-align: center !important;
+}
+
+/* ---------- tab bar ---------- */
+.tabs > .tab-nav,
+.tab-nav,
+div[role="tablist"] {
+  background: rgba(40, 9, 109, 0.6) !important;
   backdrop-filter: blur(14px) !important;
   -webkit-backdrop-filter: blur(14px) !important;
-  border-radius: var(--radius-pill) !important;
-  padding: 5px !important;
-  gap: 4px !important;
-  border: 1px solid rgba(197, 180, 240, 0.25) !important;
-  box-shadow: var(--shadow-card) !important;
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
+  padding: 4px !important;
+  gap: 2px !important;
+  border: none !important;
 }
 
-.tabs > .tab-nav > button {
-  border: none !important;
-  border-radius: var(--radius-pill) !important;
-  padding: 8px 22px !important;
+.tabs > .tab-nav > button,
+.tab-nav button,
+button[role="tab"] {
+  color: #ffffff !important;
   font-weight: 600 !important;
-  font-size: 0.88rem !important;
-  color: var(--text-mid) !important;
+  border: none !important;
   background: transparent !important;
+  padding: 10px 20px !important;
+  border-radius: 8px 8px 0 0 !important;
+  opacity: 1 !important;
+  font-family: var(--font-sans) !important;
+  font-size: 0.9rem !important;
   transition: all var(--transition) !important;
-  letter-spacing: 0.3px;
 }
 
-.tabs > .tab-nav > button:hover {
-  background: rgba(197, 180, 240, 0.22) !important;
-  color: var(--violet) !important;
+.tabs > .tab-nav > button.selected,
+.tab-nav button.selected,
+button[role="tab"][aria-selected="true"] {
+  color: var(--escp-gold) !important;
+  background: rgba(255, 255, 255, 0.12) !important;
+}
+
+.tabs > .tab-nav > button:hover:not(.selected),
+.tab-nav button:hover:not(.selected) {
+  background: rgba(255, 255, 255, 0.08) !important;
+}
+
+/* ---------- tab content area (white cards on purple) ---------- */
+.tabitem, .gradio-tabitem {
+  background: var(--bg-card) !important;
+  border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
+  padding: 20px !important;
+  animation: popIn 0.35s ease both;
+  border: none !important;
+  box-shadow: none !important;
 }
 
-.tabs > .tab-nav > button.selected {
-  background: linear-gradient(135deg, var(--violet), var(--violet-deep)) !important;
-  color: #fff !important;
-  box-shadow: 0 2px 12px rgba(124, 92, 191, 0.35) !important;
+/* ---------- white card panels inside tabs ---------- */
+.gradio-container .gr-block,
+.gradio-container .gr-box,
+.gradio-container .gr-panel,
+.gradio-container .gr-group {
+  background: #ffffff !important;
+  border-radius: var(--radius-sm) !important;
 }
 
-/* ---------- buttons: primary ---------- */
+/* ---------- buttons: primary (ESCP purple) ---------- */
 .primary, button.primary,
 .gr-button-primary, .gr-button.primary {
-  background: linear-gradient(135deg, var(--violet), var(--violet-deep)) !important;
-  color: #fff !important;
+  background-color: var(--escp-purple) !important;
+  color: #ffffff !important;
   border: none !important;
-  border-radius: var(--radius-pill) !important;
-  padding: 10px 28px !important;
+  border-radius: var(--radius-sm) !important;
+  padding: 10px 20px !important;
   font-weight: 600 !important;
-  box-shadow: 0 3px 14px rgba(124, 92, 191, 0.30) !important;
+  box-shadow: 0 3px 12px rgba(40, 9, 109, 0.3) !important;
   transition: all var(--transition) !important;
 }
 
-.primary:hover, button.primary:hover,
-.gr-button-primary:hover, .gr-button.primary:hover {
-  transform: translateY(-2px) !important;
-  box-shadow: var(--shadow-hover) !important;
-  filter: brightness(1.06);
+.primary:hover, button.primary:hover {
+  background-color: var(--escp-purple-light) !important;
+  transform: translateY(-1px) !important;
+  box-shadow: 0 5px 18px rgba(40, 9, 109, 0.4) !important;
 }
 
 /* ---------- buttons: secondary ---------- */
 .secondary, button.secondary,
 .gr-button-secondary, .gr-button.secondary {
-  background: var(--bg-card) !important;
-  backdrop-filter: blur(10px) !important;
-  color: var(--violet) !important;
-  border: 1.5px solid var(--lavender) !important;
-  border-radius: var(--radius-pill) !important;
-  padding: 10px 28px !important;
+  background-color: #ffffff !important;
+  color: var(--escp-purple) !important;
+  border: 2px solid var(--escp-purple) !important;
+  border-radius: var(--radius-sm) !important;
+  padding: 10px 20px !important;
   font-weight: 600 !important;
   transition: all var(--transition) !important;
 }
 
-.secondary:hover, button.secondary:hover,
-.gr-button-secondary:hover, .gr-button.secondary:hover {
-  background: rgba(197, 180, 240, 0.18) !important;
-  border-color: var(--lavender-mid) !important;
+.secondary:hover, button.secondary:hover {
+  background-color: rgb(240, 238, 250) !important;
   transform: translateY(-1px) !important;
 }
 
 /* ---------- inputs / textareas ---------- */
-input[type="text"], input[type="number"], input[type="password"],
-textarea, .gr-input, .gr-text-input, select {
-  background: var(--bg-card) !important;
-  backdrop-filter: blur(8px) !important;
-  border: 1.5px solid var(--lavender) !important;
-  border-radius: var(--radius-sm) !important;
-  color: var(--text) !important;
+.gradio-container input,
+.gradio-container textarea,
+.gradio-container select {
+  background: #ffffff !important;
+  border: 1px solid #d1d5db !important;
+  border-radius: 8px !important;
   font-family: var(--font-sans) !important;
+  color: var(--text) !important;
   transition: all var(--transition) !important;
 }
 
-input:focus, textarea:focus, select:focus,
-.gr-input:focus, .gr-text-input:focus {
+.gradio-container input:focus,
+.gradio-container textarea:focus,
+.gradio-container select:focus {
   outline: none !important;
   border-color: var(--lavender-mid) !important;
   box-shadow: 0 0 0 3px rgba(164, 141, 232, 0.25) !important;
 }
 
-/* ---------- pipeline log (terminal) ---------- */
-.pipeline-log, .log-output, [class*="log"],
-textarea[data-testid="textbox"].prose {
+/* ---------- pipeline log (dark terminal) ---------- */
+#log-box textarea {
   background: #1a0e2e !important;
   color: var(--lavender) !important;
   font-family: var(--font-mono) !important;
   font-size: 0.82rem !important;
-  line-height: 1.65 !important;
+  line-height: 1.7 !important;
   border-radius: var(--radius-md) !important;
-  padding: 1rem !important;
-  border: 1px solid rgba(197, 180, 240, 0.15) !important;
-  max-height: 360px !important;
-  overflow-y: auto !important;
+  border: 1px solid rgba(197, 180, 240, 0.2) !important;
+  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.2) !important;
 }
 
 /* ---------- chatbot ---------- */
-.chatbot .message-row .user {
-  background: linear-gradient(135deg, rgba(197, 180, 240, 0.28), rgba(197, 180, 240, 0.12)) !important;
-  border: 1px solid rgba(197, 180, 240, 0.35) !important;
-  border-radius: var(--radius-md) var(--radius-md) 4px var(--radius-md) !important;
-  color: var(--text) !important;
-}
-
-.chatbot .message-row .bot {
-  background: var(--bg-card) !important;
-  border: 1px solid rgba(197, 180, 240, 0.18) !important;
-  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 4px !important;
-  box-shadow: 0 2px 10px rgba(75, 45, 138, 0.06) !important;
-  color: var(--text) !important;
-}
-
-/* ---------- section labels ---------- */
-.gr-block-label, .gr-input-label, label span,
-.label-wrap > span {
-  text-transform: uppercase !important;
-  letter-spacing: 2.5px !important;
-  font-size: 0.72rem !important;
-  font-weight: 700 !important;
-  color: var(--violet) !important;
+.gr-chatbot {
+  min-height: 380px !important;
+  background-color: #ffffff !important;
+  border-radius: 12px !important;
 }
 
-.gr-block-label::after, .label-wrap > span::after {
-  content: '';
-  display: block;
-  margin-top: 6px;
-  height: 2px;
-  width: 48px;
-  border-radius: 1px;
-  background: linear-gradient(90deg, var(--violet), var(--lavender), transparent);
+.gr-chatbot .message.user {
+  background-color: rgb(232, 225, 250) !important;
+  border-radius: 12px !important;
 }
 
-/* ---------- scrollbars ---------- */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--lavender) transparent;
+.gr-chatbot .message.bot {
+  background-color: #f3f4f6 !important;
+  border-radius: 12px !important;
 }
 
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+/* ---------- headings inside tabs ---------- */
+.tabitem h3, .gradio-tabitem h3 {
+  color: var(--escp-purple) !important;
+  font-weight: 700 !important;
 }
 
-::-webkit-scrollbar-track {
-  background: transparent;
+.tabitem h4, .gradio-tabitem h4 {
+  color: #374151 !important;
 }
 
-::-webkit-scrollbar-thumb {
-  background: linear-gradient(180deg, var(--lavender), var(--mint));
-  border-radius: 3px;
+/* ---------- gallery ---------- */
+.gallery {
+  background: #ffffff !important;
+  border-radius: var(--radius-sm) !important;
 }
 
-/* ---------- plotly charts ---------- */
-.js-plotly-plot .plot-container,
-.js-plotly-plot .main-svg {
-  background: transparent !important;
+/* ---------- dataframe / table ---------- */
+[data-testid="dataframe"] {
+  background-color: #ffffff !important;
+  border-radius: var(--radius-sm) !important;
 }
 
-/* ---------- slider ---------- */
-input[type="range"] {
-  accent-color: var(--violet) !important;
+table {
+  font-size: 0.85rem !important;
 }
 
-/* ---------- dropdown ---------- */
-.gr-dropdown, .dropdown-content {
-  background: var(--bg-card) !important;
-  backdrop-filter: blur(12px) !important;
-  border: 1px solid var(--lavender) !important;
-  border-radius: var(--radius-sm) !important;
+/* ---------- example prompts ---------- */
+.examples-row button {
+  background: rgb(240, 238, 250) !important;
+  color: var(--escp-purple) !important;
+  border: 1px solid var(--escp-purple) !important;
+  border-radius: 8px !important;
+  font-size: 0.85rem !important;
 }
 
-/* ---------- status colors ---------- */
-.gr-status-success, .success { color: var(--mint) !important; }
-.gr-status-warning, .warning { color: var(--blush) !important; }
-.gr-status-error,   .error   { color: var(--red) !important; }
-
-/* ---------- dataframe / table ---------- */
-.dataframe, .gr-dataframe {
-  border-radius: var(--radius-md) !important;
-  overflow: hidden !important;
+.examples-row button:hover {
+  background: rgb(232, 225, 250) !important;
 }
 
-.dataframe th {
-  background: linear-gradient(135deg, var(--violet), var(--violet-deep)) !important;
-  color: #fff !important;
-  font-weight: 600 !important;
-  text-transform: uppercase !important;
-  letter-spacing: 1px !important;
-  font-size: 0.78rem !important;
+/* ---------- scrollbars ---------- */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--lavender) transparent;
 }
 
-.dataframe td {
-  border-color: rgba(197, 180, 240, 0.18) !important;
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, var(--lavender), var(--mint));
+  border-radius: 3px;
 }
 
-.dataframe tr:hover td {
-  background: rgba(197, 180, 240, 0.10) !important;
+/* ---------- plotly charts ---------- */
+.js-plotly-plot .plot-container,
+.js-plotly-plot .main-svg,
+.js-plotly-plot .bg {
+  fill: transparent !important;
+  background: transparent !important;
 }
 
-/* ---------- dark mode overrides (Gradio toggle) ---------- */
-.dark body, .dark .gradio-container {
-  --bg: #12091f;
-  --bg-card: rgba(30, 18, 52, 0.78);
-  --text: #e8e0f6;
-  --text-mid: #b8a8d8;
-  --text-muted: #7a6a9e;
-  background: var(--bg) !important;
-  color: var(--text) !important;
+/* ---------- header / footer: transparent ---------- */
+header, header *,
+footer, footer * {
+  background: transparent !important;
+  box-shadow: none !important;
 }
 
-.dark .gradio-container::before {
-  background:
-    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(124, 92, 191, 0.25) 0%, transparent 70%),
-    radial-gradient(ellipse 50% 45% at 80% 15%, rgba(80, 120, 200, 0.20) 0%, transparent 65%),
-    radial-gradient(ellipse 40% 40% at 70% 75%, rgba(110, 231, 199, 0.12) 0%, transparent 60%),
-    radial-gradient(ellipse 35% 35% at 25% 80%, rgba(255, 179, 200, 0.10) 0%, transparent 60%),
-    var(--bg) !important;
+footer a, footer button,
+header a, header button {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
 }
 
-.dark input[type="text"], .dark input[type="number"],
-.dark textarea, .dark select {
-  background: rgba(30, 18, 52, 0.65) !important;
-  color: var(--text) !important;
+section footer,
+section footer button,
+section footer a,
+section footer button *,
+section footer a * {
+  background: transparent !important;
+  background-color: transparent !important;
+  box-shadow: none !important;
+  border: none !important;
+  color: white !important;
 }
 
 /* ---------- responsive ---------- */
 @media (max-width: 768px) {
-  .gradio-container > .main {
-    padding: 0.75rem !important;
+  .gradio-container {
+    padding-top: 120px !important;
+    padding-bottom: 160px !important;
+    width: 98vw !important;
   }
 
-  .tabs > .tab-nav {
-    flex-wrap: wrap !important;
-  }
-
-  .tabs > .tab-nav > button {
-    padding: 6px 14px !important;
-    font-size: 0.8rem !important;
-  }
-
-  .primary, button.primary,
-  .secondary, button.secondary {
-    padding: 8px 18px !important;
-    font-size: 0.85rem !important;
+  .tabs > .tab-nav > button,
+  .tab-nav button {
+    padding: 8px 14px !important;
+    font-size: 0.82rem !important;
   }
 }
 
 @media (max-width: 480px) {
-  .gradio-container > .main {
-    padding: 0.5rem !important;
-    max-width: 100% !important;
+  .gradio-container {
+    padding-top: 80px !important;
   }
 
-  .panel, .block, .form, .gradio-group {
-    border-radius: var(--radius-md) !important;
-    padding: 0.75rem !important;
+  #escp_title h1,
+  .gradio-container > .main > div:first-child h1 {
+    font-size: 1.8rem !important;
   }
 }
 
-/* ---------- smooth transitions everywhere ---------- */
-*, *::before, *::after {
+/* ---------- smooth transitions ---------- */
+button, a, input, textarea, select {
   transition-property: background, border-color, box-shadow, color, opacity, transform;
   transition-duration: 0.2s;
   transition-timing-function: ease;
 }
-
-/* don't transition layout-triggering properties on load */
-.gradio-container * { animation-fill-mode: both; }