Revert "Reapply "update UI""

This reverts commit a915481fed41979c27155a28d783251a92db2eec.

app.py

@@ -21,8 +21,6 @@ from src.ui.components import (
     VerdictBadge,
 )
 from src.ui.theme import CSS, theme
-from src.ui.components import DishOptions, IngredientChips, NutritionGrid, RecipeHero, StepCard, VerdictBadge
-
 
 
 # ---------------------------------------------------------------------------

src/ui/components.py

@@ -1,120 +1,396 @@
-class IngredientChips:
-    @staticmethod
-    def render(data: dict) -> str:
-        have = data.get("have", [])
-        if not have:
-            return "<div class='chip-container'><span class='chip'>No ingredients yet. Upload a photo!</span></div>"
-        
-        chips_html = "".join([f"<span class='chip'>🥑 {item.capitalize()}</span>" for item in have])
-        return f"<div class='chip-container'>{chips_html}</div>"
-
-class DishOptions:
-    @staticmethod
-    def render(data: dict) -> str:
-        options = data.get("options", [])
-        if not options:
-            return "<div></div>"
-        
-        cards = ""
-        for opt in options:
-            # Assuming opt is a dict with 'name' and 'time'
-            name = opt.get('name', 'Unknown Dish')
-            time = opt.get('time', '30 min')
-            cards += f"""
-            <div class='dish-card'>
-                <h4>{name}</h4>
-                <span class='chip'>⏱️ {time}</span>
-            </div>
-            """
-        return f"<div class='dish-grid'>{cards}</div>"
-
-class NutritionGrid:
-    @staticmethod
-    def render(data: dict) -> str:
-        nut = data.get("nutrition", {})
-        if not nut:
-            return "<div></div>"
-            
-        return f"""
-        <div class='glass-card'>
-            <h3 style="margin-top:0; color:#2d3748;">Nutrition Quantity</h3>
-            <div class='nutrition-row'>
-                <div class='pill-badge'>
-                    <span class='pill-value'>{nut.get('calories', 0)}</span>
-                    <span class='pill-label'>Kcal</span>
-                </div>
-                <div class='pill-badge'>
-                    <span class='pill-value'>{nut.get('protein', 0)}</span>
-                    <span class='pill-label'>Protein (g)</span>
-                </div>
-                <div class='pill-badge'>
-                    <span class='pill-value'>{nut.get('carbs', 0)}</span>
-                    <span class='pill-label'>Carbs (g)</span>
-                </div>
-                <div class='pill-badge'>
-                    <span class='pill-value'>{nut.get('fat', 0)}</span>
-                    <span class='pill-label'>Fat (g)</span>
-                </div>
-            </div>
-        </div>
-        """
-
-class RecipeHero:
-    @staticmethod
-    def render(data: dict) -> str:
-        if not data:
-            return "<div class='glass-card' style='text-align:center; padding: 40px; color:#a0aec0;'>Pick a dish to get started</div>"
-            
-        title = data.get('name', 'Your Recipe')
-        # Fallback to a placeholder if no FLUX image is generated yet
-        img_url = data.get('image_url', 'https://images.unsplash.com/photo-1495195134817-a169d325145b?q=80&w=800&auto=format&fit=crop')
-        
+"""Custom HTML components — Off-Brand UI built on top of `gr.HTML`.
+Each component subclasses ``gr.HTML`` and ships its own ``html_template`` and
+``css_template``. State is a Python dict; ``render(state)`` returns a complete
+``<style>...</style><div>...</div>`` blob ready to drop into the page. Updates
+flow through normal Gradio event callbacks — call ``Component.render(...)`` in
+your handler and yield the new HTML string.
+Pattern adapted from "Gradio HTML components.md": templates substitute
+``${value.X}`` tokens against the state dict, every component bundles its own
+CSS, and components are easy to compose because they're just `gr.HTML` under
+the hood.
+"""
+from __future__ import annotations
+
+import html
+import json
+import re
+from pathlib import Path
+from typing import Any, ClassVar
+
+import gradio as gr
+
+
+# ---------------------------------------------------------------------------
+# Base class: TemplatedHTML
+# ---------------------------------------------------------------------------
+TOKEN_RE = re.compile(r"\$\{([^}]+)\}")
+
+
+def _resolve(expr: str, scope: dict[str, Any]) -> Any:
+    """Resolve ``value.steps[0].instruction``-style expressions against scope."""
+    parts = re.split(r"\.|\[|\]", expr)
+    parts = [p for p in parts if p != ""]
+    cur: Any = scope
+    for p in parts:
+        if isinstance(cur, dict) and p in cur:
+            cur = cur[p]
+        elif isinstance(cur, list) and p.isdigit():
+            cur = cur[int(p)]
+        elif hasattr(cur, p):
+            cur = getattr(cur, p)
+        else:
+            return ""
+    return cur
+
+
+def substitute(template: str, state: dict[str, Any]) -> str:
+    scope = {"value": state}
+    def _sub(m: re.Match) -> str:
+        out = _resolve(m.group(1), scope)
+        if out is None:
+            return ""
+        return html.escape(str(out)) if not isinstance(out, str) else html.escape(out)
+    return TOKEN_RE.sub(_sub, template)
+
+
+class TemplatedHTML(gr.HTML):
+    """A gr.HTML wrapper that re-renders a template against a state dict."""
+
+    html_template: ClassVar[str] = ""
+    css_template: ClassVar[str] = ""
+
+    def __init__(self, value: dict[str, Any] | None = None, **kwargs):
+        self._state: dict[str, Any] = value or {}
+        super().__init__(value=self.render(self._state), **kwargs)
+
+    @classmethod
+    def render(cls, state: dict[str, Any]) -> str:
+        body = cls._render_body(state)
+        return f"<style>{cls.css_template}</style>{body}"
+
+    @classmethod
+    def _render_body(cls, state: dict[str, Any]) -> str:
+        # Default: simple ${value.X} substitution against the state dict.
+        return substitute(cls.html_template, state)
+
+
+# ---------------------------------------------------------------------------
+# RecipeHero — title + final-dish image + summary line
+# ---------------------------------------------------------------------------
+class RecipeHero(TemplatedHTML):
+    css_template = """
+.cwm-hero {
+  background: #fffbf0 !important;
+  border: 1px solid #d8c9ad;
+  border-radius: 16px;
+  padding: 32px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 28px;
+  box-shadow: 0 10px 28px rgba(107, 74, 42, 0.10);
+}
+.cwm-hero img {
+  width: 100%; height: 320px; object-fit: cover; border-radius: 12px;
+  background: #efe3c8;
+}
+.cwm-hero h1 {
+  font-family: 'Lora', serif; font-size: 38px; color: #6b4a2a !important;
+  margin: 0 0 8px;
+}
+.cwm-hero .meta {
+  color: #8a6a3a !important; font-size: 14px; letter-spacing: 0.04em;
+  text-transform: uppercase; margin-bottom: 18px;
+}
+.cwm-hero .visual {
+  font-family: 'Lora', serif; font-style: italic; color: #6b4a2a !important;
+  font-size: 17px; line-height: 1.55;
+}
+@media (max-width: 720px) { .cwm-hero { grid-template-columns: 1fr; } }
+"""
+
+    @classmethod
+    def _render_body(cls, state: dict[str, Any]) -> str:
+        name = html.escape(state.get("name") or "Pick a dish to get started")
+        cuisine = html.escape(state.get("cuisine") or "")
+        servings = state.get("servings") or 0
+        time = state.get("total_time_minutes") or 0
+        visual = html.escape(state.get("final_dish_visual") or "")
+        img_b64 = state.get("final_dish_image_b64") or ""
+        img_path = state.get("final_dish_image_path") or ""
+        if img_b64:
+            img_tag = f'<img src="data:image/png;base64,{img_b64}" alt="final dish"/>'
+        elif img_path:
+            img_tag = f'<img src="/file={html.escape(img_path)}" alt="final dish"/>'
+        else:
+            img_tag = '<div style="background:#efe3c8;border-radius:12px;height:320px;display:flex;align-items:center;justify-content:center;color:#8a6a3a;font-family:\'Lora\',serif;font-style:italic;">Image will appear here</div>'
         return f"""
-        <div class='hero-container'>
-            <img src="{img_url}" class="hero-image" alt="Recipe Image">
-            <div class='hero-overlay'>
-                <h2>{title}</h2>
-                <p style="margin: 5px 0 0 0; font-size:16px;">⭐ 4.9 • Free-hands Cooking</p>
-            </div>
-        </div>
-        """
-
-class StepCard:
-    @staticmethod
-    def render(data: dict) -> str:
-        steps = data.get("steps", [])
-        if not steps:
-            return "<div></div>"
-            
-        steps_html = "<div class='glass-card'><h3 style='margin-top:0; color:#2d3748;'>Steps</h3><ul style='list-style-type:none; padding:0;'>"
-        for i, step in enumerate(steps, 1):
-            inst = step.get('instruction', '')
-            steps_html += f"""
-            <li style="margin-bottom: 16px; display: flex; gap: 12px; align-items: flex-start;">
-                <span style="background: #2d3748; color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: bold;">{i}</span>
-                <span style="color: #4a5568; line-height: 1.5; padding-top: 3px;">{inst}</span>
-            </li>
-            """
-        steps_html += "</ul></div>"
-        return steps_html
-
-class VerdictBadge:
-    @staticmethod
-    def render(data: dict) -> str:
-        if not data:
-            return "<div></div>"
-        status = data.get("status", "wait") # go, wait, fix
-        msg = data.get("message", "Keep going!")
+<div class="cwm-hero">
+  <div>{img_tag}</div>
+  <div>
+    <div class="meta">{cuisine} · {servings} servings · {time} min</div>
+    <h1>{name}</h1>
+    <p class="visual">{visual}</p>
+  </div>
+</div>
+"""
+
+
+# ---------------------------------------------------------------------------
+# IngredientChips — wrap-around chips with "have / missing" tinting
+# ---------------------------------------------------------------------------
+class IngredientChips(TemplatedHTML):
+    css_template = """
+        .cwm-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0; }
         
-        color_map = {"go": "#c6f6d5", "wait": "#feebc8", "fix": "#fed7d7"}
-        text_map = {"go": "#22543d", "wait": "#7b341e", "fix": "#742a2a"}
+        /* Forzamos el color del texto y nos aseguramos de que no se herede un color claro */
+        .cwm-chips .cwm-chip {
+          background: #fbe2d2 !important; 
+          color: #6b4a2a !important; 
+          border: 1px solid #d8c9ad !important;
+          border-radius: 999px; 
+          padding: 6px 14px; 
+          font-size: 14px;
+          font-family: 'Inter', sans-serif;
+          display: inline-block;
+        }
         
-        bg = color_map.get(status, "#edf2f7")
-        tc = text_map.get(status, "#2d3748")
+        /* Forzamos el color para los chips de ingredientes faltantes */
+        .cwm-chips .cwm-chip.missing { 
+          background: #fbe2d2 !important; 
+          border-color: #c47a52 !important;
+        }
         
+        .cwm-chips-empty {
+          color: #6b4a2a !important; 
+          font-style: italic; 
+          padding: 14px 0;
+        }
+    """
+
+    @classmethod
+    def _render_body(cls, state: dict[str, Any]) -> str:
+        have = state.get("have") or []
+        missing = state.get("missing") or []
+        if not have and not missing:
+            return '<div class="cwm-chips-empty">No ingredients yet — upload a fridge photo.</div>'
+        parts = ['<div class="cwm-chips">']
+        for ing in have:
+            parts.append(f'<span class="cwm-chip">{html.escape(str(ing))}</span>')
+        for ing in missing:
+            parts.append(f'<span class="cwm-chip missing">missing: {html.escape(str(ing))}</span>')
+        parts.append('</div>')
+        return "".join(parts)
+
+
+# ---------------------------------------------------------------------------
+# DishOptions — three picker buttons (rendered as plain HTML; the actual
+# selection is handled by a sibling Gradio Radio for state binding)
+# ---------------------------------------------------------------------------
+class DishOptions(TemplatedHTML):
+    css_template = """
+.cwm-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
+.cwm-options .cwm-option {
+  background: #fffbf0 !important; border: 1px solid #d8c9ad; border-radius: 12px;
+  padding: 18px; text-align: left;
+}
+.cwm-options .cwm-option h3 {
+  font-family: 'Lora', serif; font-size: 19px; color: #6b4a2a !important;
+  margin: 0 0 6px;
+}
+.cwm-options .cwm-option p { color: #7a5a35 !important; font-size: 14px; line-height: 1.45; margin: 0; }
+@media (max-width: 720px) { .cwm-options { grid-template-columns: 1fr; } }
+"""
+
+    @classmethod
+    def _render_body(cls, state: dict[str, Any]) -> str:
+        opts = state.get("options") or []
+        if not opts:
+            return ""
+        cards = []
+        for o in opts[:3]:
+            name = html.escape(str(o.get("name", "")))
+            why = html.escape(str(o.get("why", "")))
+            cards.append(f'<div class="cwm-option"><h3>{name}</h3><p>{why}</p></div>')
+        return f'<div class="cwm-options">{"".join(cards)}</div>'
+
+
+# ---------------------------------------------------------------------------
+# StepCard — one card per step (image + instruction + duration + tip)
+# ---------------------------------------------------------------------------
+class StepCard(TemplatedHTML):
+    css_template = """
+.cwm-steps { display: flex; flex-direction: column; gap: 16px; }
+.cwm-steps .cwm-step {
+  display: grid; grid-template-columns: 220px 1fr; gap: 22px;
+  background: #fffbf0 !important; border-left: 4px solid #a85c2a; border-radius: 10px;
+  padding: 18px 22px;
+}
+.cwm-steps .cwm-step img {
+  width: 220px; height: 160px; object-fit: cover; border-radius: 8px;
+  background: #efe3c8;
+}
+.cwm-steps .cwm-step .placeholder {
+  width: 220px; height: 160px; border-radius: 8px;
+  background: linear-gradient(135deg,#efe3c8,#dccaa3);
+  display:flex; align-items:center; justify-content:center;
+  color: #8a6a3a !important; font-family: 'Lora', serif; font-size: 14px;
+}
+.cwm-steps .cwm-step h3 {
+  font-family: 'Lora', serif; color: #6b4a2a !important; margin: 0 0 6px; font-size: 22px;
+}
+.cwm-steps .cwm-step p { font-size: 16px; line-height: 1.55; color: #4a3722 !important; margin: 0 0 8px; }
+.cwm-steps .cwm-step .duration {
+  display: inline-block; background: #a85c2a !important; color: #fffbf0 !important;
+  border-radius: 999px; padding: 3px 10px; font-size: 12px; letter-spacing: 0.04em;
+}
+.cwm-steps .cwm-step .tip {
+  margin-top: 10px; padding: 10px 12px; background: #fff3d8 !important;
+  border-radius: 8px; font-size: 14px; color: #6b4a2a !important;
+}
+.cwm-step .tip::before { content: "💡 "; }
+@media (max-width: 720px) { .cwm-step { grid-template-columns: 1fr; } .cwm-step img, .cwm-step .placeholder { width: 100%; } }
+"""
+
+    @classmethod
+    def _render_body(cls, state: dict[str, Any]) -> str:
+        steps = state.get("steps") or []
+        if not steps:
+            return '<div style="color:#b39870;font-style:italic;padding:14px 0;">No steps yet.</div>'
+        cards = []
+        for s in steps:
+            n = s.get("n", 0)
+            instr = html.escape(s.get("instruction", ""))
+            dur = html.escape(s.get("duration", ""))
+            tip = s.get("tip")
+            visual = html.escape(s.get("visual", ""))
+            img_b64 = s.get("image_b64") or ""
+            img_path = s.get("image_path") or ""
+            if img_b64:
+                img_block = f'<img src="data:image/png;base64,{img_b64}" alt="step {n}"/>'
+            elif img_path:
+                img_block = f'<img src="/file={html.escape(img_path)}" alt="step {n}"/>'
+            else:
+                img_block = f'<div class="placeholder">{visual[:80] if visual else f"Step {n}"}</div>'
+            tip_block = f'<div class="tip">{html.escape(tip)}</div>' if tip else ""
+            cards.append(f"""
+<div class="cwm-step">
+  {img_block}
+  <div>
+    <h3>Step {n}</h3>
+    <p>{instr}</p>
+    <span class="duration">{dur}</span>
+    {tip_block}
+  </div>
+</div>
+""")
+        return f'<div class="cwm-steps">{"".join(cards)}</div>'
+
+
+# ---------------------------------------------------------------------------
+# NutritionGrid — five macro cells
+# ---------------------------------------------------------------------------
+class NutritionGrid(TemplatedHTML):
+    css_template = """
+.cwm-nutri-wrap { margin-top: 10px; }
+.cwm-nutri-title {
+  font-family: 'Lora', serif; color: #6b4a2a !important; font-size: 22px; margin: 0 0 14px;
+}
+.cwm-nutri {
+  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
+}
+.cwm-nutri .cwm-nutri-cell {
+  background: #fffbf0 !important; border: 1px solid #d8c9ad; border-radius: 10px;
+  padding: 14px 10px; text-align: center;
+}
+.cwm-nutri .cwm-nutri-cell .v {
+  font-family: 'Lora', serif; font-size: 24px; font-weight: 700; color: #6b4a2a !important;
+  display: block;
+}
+.cwm-nutri .cwm-nutri-cell .l {
+  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
+  color: #8a6a3a !important; margin-top: 4px;
+}
+@media (max-width: 720px) { .cwm-nutri { grid-template-columns: repeat(2, 1fr); } }
+"""
+
+    @classmethod
+    def _render_body(cls, state: dict[str, Any]) -> str:
+        nutri = state.get("nutrition") or {}
+        cells = [
+            (nutri.get("calories", 0), "kcal"),
+            (nutri.get("protein_g", 0), "protein"),
+            (nutri.get("carbs_g", 0), "carbs"),
+            (nutri.get("fat_g", 0), "fat"),
+            (nutri.get("fiber_g", 0), "fiber"),
+        ]
+        cell_html = "".join(
+            f'<div class="cwm-nutri-cell"><span class="v">{html.escape(str(v))}</span>'
+            f'<div class="l">{html.escape(label)}</div></div>'
+            for v, label in cells
+        )
+        return f"""
+<div class="cwm-nutri-wrap">
+  <h3 class="cwm-nutri-title">Per serving</h3>
+  <div class="cwm-nutri">{cell_html}</div>
+</div>
+"""
+
+
+# ---------------------------------------------------------------------------
+# VerdictBadge — go / wait / fix indicator + tip
+# ---------------------------------------------------------------------------
+class VerdictBadge(TemplatedHTML):
+    css_template = """
+.cwm-verdict {
+  display: flex; align-items: center; gap: 18px;
+  background: #fffbf0 !important; border-radius: 12px; padding: 18px 22px;
+  border: 1px solid #d8c9ad;
+}
+.cwm-verdict.go    { border-left: 6px solid #4f8b4a; }
+.cwm-verdict.wait  { border-left: 6px solid #d4a23c; }
+.cwm-verdict.fix   { border-left: 6px solid #b94a3a; }
+.cwm-verdict-pill {
+  font-family: 'Lora', serif; font-weight: 700; font-size: 16px;
+  text-transform: uppercase; letter-spacing: 0.08em;
+  padding: 8px 16px; border-radius: 999px; color: #fffbf0;
+}
+.cwm-verdict.go    .cwm-verdict-pill { background: #4f8b4a; }
+.cwm-verdict.wait  .cwm-verdict-pill { background: #d4a23c; }
+.cwm-verdict.fix   .cwm-verdict-pill { background: #b94a3a; }
+.cwm-verdict-text  { font-size: 16px; color: #4a3722 !important; line-height: 1.5; }
+.cwm-verdict-text small { color: #8a6a3a !important; display: block; margin-top: 4px; }
+.cwm-verdict-empty {
+  color: #b39870; font-style: italic; padding: 14px 0;
+}
+"""
+
+    @classmethod
+    def _render_body(cls, state: dict[str, Any]) -> str:
+        v = state.get("verdict")
+        if not v:
+            return '<div class="cwm-verdict-empty">Upload a progress photo to get a verdict.</div>'
+        verdict = state.get("verdict", "wait")
+        feedback = html.escape(state.get("feedback", ""))
+        tip = state.get("tip")
+        tip_html = f"<small>{html.escape(tip)}</small>" if tip else ""
         return f"""
-        <div class='glass-card' style='background: {bg}; color: {tc}; text-align: center; border: none;'>
-            <h3 style='margin:0 0 8px 0; color: {tc};'>Chef's Verdict</h3>
-            <p style='margin:0; font-size: 18px; font-weight: 500;'>{msg}</p>
-        </div>
-        """
+<div class="cwm-verdict {html.escape(verdict)}">
+  <div class="cwm-verdict-pill">{html.escape(verdict)}</div>
+  <div class="cwm-verdict-text">{feedback}{tip_html}</div>
+</div>
+"""
+
+
+# ---------------------------------------------------------------------------
+# Convenience helpers — ergonomic state-to-HTML for callbacks
+# ---------------------------------------------------------------------------
+def recipe_to_state(recipe: dict | object) -> dict:
+    """Normalize a Recipe (Pydantic or dict) into the flat dict every
+    component reads. Pydantic models are dumped via ``model_dump`` if present."""
+    if hasattr(recipe, "model_dump"):
+        d = recipe.model_dump()
+    elif isinstance(recipe, dict):
+        d = recipe
+    else:
+        d = json.loads(json.dumps(recipe, default=lambda o: o.__dict__))
+    return d

src/ui/theme.py

@@ -1,133 +1,88 @@
+"""Gradio theme + global CSS for the recipe-card look."""
+from __future__ import annotations
+
 import gradio as gr
 
-# A soft, modern theme overriding Gradio's default harsh borders
 theme = gr.themes.Soft(
-    primary_hue="emerald",
-    neutral_hue="slate",
-    font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"],
-    radius_size=gr.themes.sizes.radius_xxl,
-).set(
-    body_background_fill="#f7f9fc", # Light modern gray/blue background
-    block_background_fill="#ffffff",
-    block_border_width="0px",
-    block_shadow="0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05)",
-    button_primary_background_fill="*primary_500",
-    button_primary_background_fill_hover="*primary_600",
+    primary_hue="orange",
+    neutral_hue="stone",
+    font=[gr.themes.GoogleFont("Inter"), "sans-serif"],
+    font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "monospace"],
 )
 
-# Custom CSS for your injected HTML components to match the mockups
+
 CSS = """
-/* Global Container Resets */
-.gradio-container {
-    max-width: 1200px !important;
-    margin: auto;
-}
+@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');
 
-/* Card Styling (Inspired by the pastel app mockup) */
-.glass-card {
-    background: #ffffff;
-    border-radius: 24px;
-    padding: 20px;
-    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
-    margin-bottom: 16px;
-    transition: transform 0.2s ease;
-}
+/* ---------------------------------------------------------------------------
+   Force a warm light palette regardless of the browser/system dark mode.
+   We pin the parchment background, so we must also pin DARK text colours via
+   Gradio's CSS variables — otherwise dark-mode users get white text on the
+   light background and it disappears.
+--------------------------------------------------------------------------- */
+.gradio-container, .gradio-container.dark {
+  background: #f5ecd9 !important;
+  color-scheme: light !important;
 
-/* Nutrition Pills (Inspired by the green salad mockup) */
-.nutrition-row {
-    display: flex;
-    gap: 12px;
-    justify-content: space-around;
-    flex-wrap: wrap;
-    margin-top: 10px;
-}
-.pill-badge {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background: #e6f4ea; /* Light sage green */
-    color: #1e4620; /* Dark green text */
-    border-radius: 40px;
-    padding: 16px 20px;
-    min-width: 80px;
-    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
-}
-.pill-value {
-    font-size: 24px;
-    font-weight: 800;
-    line-height: 1;
-    margin-bottom: 4px;
-}
-.pill-label {
-    font-size: 12px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
+  --body-text-color: #4a3722;
+  --body-text-color-subdued: #7a5a35;
+  --block-title-text-color: #6b4a2a;
+  --block-label-text-color: #6b4a2a;
+  --block-info-text-color: #7a5a35;
+  --block-background-fill: #fffbf0;
+  --input-background-fill: #fffbf0;
+  --border-color-primary: #d8c9ad;
+  --color-accent-soft: #fbe2d2;
 }
 
-/* Dish Proposal Cards */
-.dish-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 16px;
-    margin-top: 10px;
-}
-.dish-card {
-    background: linear-gradient(135deg, #f0fff4 0%, #e6fffa 100%);
-    border-radius: 20px;
-    padding: 16px;
-    text-align: center;
-    border: 1px solid #c6f6d5;
-}
-.dish-card h4 {
-    margin: 0 0 8px 0;
-    font-size: 18px;
-    color: #2d3748;
+/* Blanket dark text for native Gradio text elements (covers dark mode) */
+.gradio-container,
+.gradio-container .prose,
+.gradio-container label,
+.gradio-container .gr-text,
+.gradio-container span,
+.gradio-container p,
+.gradio-container .gr-check-radio label,
+.gradio-container .wrap,
+.gradio-container .gr-form,
+.gradio-container .tab-nav button,
+.gradio-container .gr-accordion,
+.gradio-container input,
+.gradio-container textarea {
+  color: #4a3722 !important;
 }
 
-/* Hero Image Header (Inspired by the spaghetti mockup) */
-.hero-container {
-    position: relative;
-    border-radius: 24px;
-    overflow: hidden;
-    margin-bottom: 24px;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
-}
-.hero-image {
-    width: 100%;
-    height: 300px;
-    object-fit: cover;
-    display: block;
-}
-.hero-overlay {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
-    padding: 30px 20px 20px;
-    color: white;
+.gradio-container .prose h1,
+.gradio-container .prose h2,
+.gradio-container .prose h3 { font-family: 'Lora', serif !important; color: #6b4a2a !important; }
+
+/* Tabs: dark labels, terracotta active */
+.gradio-container .tab-nav button { color: #6b4a2a !important; }
+.gradio-container .tab-nav button.selected {
+  color: #a85c2a !important; border-bottom-color: #a85c2a !important;
 }
-.hero-overlay h2 {
-    margin: 0;
-    font-size: 32px;
-    font-weight: 800;
-    color: white;
+
+/* Native blocks (inputs, radio, checkbox, number) on warm cards */
+.gradio-container .block,
+.gradio-container .form,
+.gradio-container input[type="text"],
+.gradio-container input[type="number"] {
+  background: #fffbf0 !important;
+  border-color: #d8c9ad !important;
 }
 
-/* Ingredient Chips */
-.chip-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
+/* Generic container shared by every HTMLComponent */
+.cwm-card {
+  border: 1px solid #d8c9ad;
+  border-radius: 14px;
+  padding: 22px 26px;
+  box-shadow: 0 8px 24px rgba(107, 74, 42, 0.08);
 }
-.chip {
-    background: #edf2f7;
-    color: #4a5568;
-    padding: 6px 14px;
-    border-radius: 20px;
-    font-size: 14px;
-    font-weight: 500;
+button.primary, .gr-button-primary {
+  background: #a85c2a !important;
+  color: #fffbf0 !important;
+  font-weight: 600 !important;
+  font-size: 16px !important;
+  padding: 12px 22px !important;
 }
-"""
+"""