Update app.py

app.py

@@ -567,25 +567,35 @@ css_styles = """
     }
     
     .question-display {
-        background: #f9fafb;
-        padding: 20px;
+        background: #ffffff;
+        padding: 25px;
         border-radius: 10px;
         border-left: 5px solid #667eea;
         margin: 15px 0;
-        color: #111827;
-        font-size: 16px;
-        line-height: 1.5;
+        color: #000000 !important;
+        font-size: 22px !important;
+        font-weight: 700 !important;
+        line-height: 1.9 !important;
         overflow-wrap: break-word;
     }
     
+    .question-display ol, .question-display li {
+        color: #000000 !important;
+        font-size: 22px !important;
+        font-weight: 700 !important;
+        line-height: 1.9 !important;
+        margin: 14px 0 !important;
+    }
+    
     .feedback-box {
-        background: #f0fdf4;
-        padding: 20px;
+        background: #ffffff;
+        padding: 25px;
         border-radius: 10px;
         border-left: 5px solid #10b981;
-        color: #064e3b;
-        font-size: 16px;
-        line-height: 1.5;
+        color: #000000 !important;
+        font-size: 20px !important;
+        font-weight: 700 !important;
+        line-height: 1.9 !important;
         overflow-wrap: break-word;
     }
     
@@ -595,9 +605,29 @@ css_styles = """
         border-radius: 10px;
         margin: 20px 0;
     }
-    /* Slightly larger base text for smaller screens */
-    @media (max-width: 900px) {
-        .question-display, .feedback-box { font-size: 18px; }
+    /* Significantly larger text for iPad and tablets */
+    @media (max-width: 1024px) {
+        .question-display {
+            font-size: 26px !important;
+            padding: 30px !important;
+        }
+        .question-display ol, .question-display li {
+            font-size: 26px !important;
+        }
+        .feedback-box {
+            font-size: 24px !important;
+            padding: 30px !important;
+        }
+    }
+    /* Extra large text for small phones */
+    @media (max-width: 600px) {
+        .question-display {
+            font-size: 28px !important;
+            padding: 30px !important;
+        }
+        .question-display ol, .question-display li {
+            font-size: 28px !important;
+        }
     }
 """
 
@@ -689,10 +719,10 @@ with gr.Blocks(title="UNEB Exam Prep - Primary 6 & 7", theme=gr.themes.Soft(), c
                 # Also store subject
                 session.current_subject = subject
 
-                # Build accessible HTML list for better rendering on iPad/Safari
-                items_html = "".join([f"<li>{q.split('.',1)[1].strip() if '.' in q else q}</li>" for q in questions_list])
-                html = f"<div><ol style='margin:0 0 0 1.2rem;padding:0'>{items_html}</ol></div>"
-                return html, questions_list, f" Generated {len(questions_list)} {subject} questions on {topic}"
+                # Build accessible HTML list with bold black text for iPad/Safari visibility
+                items_html = "".join([f"<li style='color:#000000;font-size:24px;font-weight:bold;margin:16px 0;line-height:2'>{q.split('.',1)[1].strip() if '.' in q else q}</li>" for q in questions_list])
+                html = f"<div style='color:#000000;font-size:24px;font-weight:bold;line-height:2'><ol style='margin:0 0 0 1.5rem;padding:0;color:#000000'>{items_html}</ol></div>"
+                return html, questions_list, f" ✅ Generated {len(questions_list)} {subject} questions on {topic}"
             
             generate_btn.click(
                 fn=generate_and_display,