Update app.py

app.py

@@ -1567,19 +1567,30 @@ def preview_table(tbl: str):
 # -------------------- UI --------------------
 SQL_PREVIEW_STYLES = """
 <style>
+:root {
+  --sqlkw-core:  #1f6feb;  /* SELECT, FROM, WHERE */
+  --sqlkw-join:  #b80672;  /* JOIN family */
+  --sqlkw-group: #107c41;  /* GROUP BY / HAVING */
+  --sqlkw-order: #6f42c1;  /* ORDER BY / LIMIT / OFFSET */
+  --sqlkw-ddl:   #b26c12;  /* CREATE / INSERT / UPDATE / DELETE */
+}
 .sql-preview pre { white-space: pre-wrap; margin: 0; }
-.sql-preview code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 13px; }
-.kw { font-weight: 600; }
-.kw-core { color: #1f6feb; }   /* SELECT, FROM, WHERE, etc. */
-.kw-join { color: #b80672; }   /* JOIN family */
-.kw-group { color: #107c41; }  /* GROUP BY / HAVING */
-.kw-order { color: #6f42c1; }  /* ORDER BY / LIMIT / OFFSET */
-.kw-ddl { color: #b26c12; }    /* CREATE/INSERT/UPDATE/DELETE/etc. */
+.sql-preview code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 13px;
+}
+.sql-preview .kw { font-weight: 700; }
+.sql-preview .kw-core  { color: var(--sqlkw-core)  !important; }
+.sql-preview .kw-join  { color: var(--sqlkw-join)  !important; }
+.sql-preview .kw-group { color: var(--sqlkw-group) !important; }
+.sql-preview .kw-order { color: var(--sqlkw-order) !important; }
+.sql-preview .kw-ddl   { color: var(--sqlkw-ddl)   !important; }
 </style>
 """
 
+
 with gr.Blocks(title="Adaptive SQL Trainer — Randomized Domains") as demo:
-    gr.Markdown(SQL_PREVIEW_STYLES)
+    gr.HTML(SQL_PREVIEW_STYLES)
     gr.Markdown(
         """
         # 🧪 Adaptive SQL Trainer — Randomized Domains (SQLite)
@@ -1616,7 +1627,7 @@ with gr.Blocks(title="Adaptive SQL Trainer — Randomized Domains") as demo:
         with gr.Column(scale=2):
             prompt_md = gr.Markdown(visible=False)
             sql_input = gr.Textbox(label="Your SQL", placeholder="Type SQL here (end ; optional).", lines=6, visible=False)
-            preview_md = gr.Markdown(visible=False)
+            preview_md = gr.HTML(visible=False)
             er_image = gr.Image(label="Entity Diagram", value=draw_dynamic_erd(CURRENT_SCHEMA), height=PLOT_HEIGHT)
 
             with gr.Row():