Update app.py

app.py

@@ -67,6 +67,63 @@ SAMPLE_VERSES = {
 # Initialize database
 init_db()
 
+# Minimal CSS for custom components only
+st.markdown("""
+<style>
+    .main-header {
+        font-size: 3.5rem;
+        color: #2c5c2c;
+        text-align: center;
+        margin-bottom: 1rem;
+        font-weight: bold;
+    }
+    .sub-header {
+        font-size: 1.8rem;
+        color: #3a6349;
+        border-bottom: 3px solid #4a7c59;
+        padding-bottom: 0.5rem;
+        margin-bottom: 1.5rem;
+        font-weight: 600;
+    }
+    .scripture-box {
+        background-color: #f0f7f0;
+        border-radius: 10px;
+        padding: 20px;
+        margin: 15px 0;
+        border-left: 5px solid #4a7c59;
+        color: #2c5c2c;
+        font-size: 1.1rem;
+        line-height: 1.6;
+    }
+    .simplified-box {
+        background-color: #e8f4f8;
+        border-radius: 10px;
+        padding: 20px;
+        margin: 15px 0;
+        border-left: 5px solid #5c8da5;
+        color: #2c3e50;
+        font-size: 1.1rem;
+        line-height: 1.6;
+    }
+    .success-box {
+        background-color: #d4edda;
+        color: #155724;
+        padding: 15px;
+        border-radius: 8px;
+        margin: 15px 0;
+        border: 1px solid #c3e6cb;
+        font-weight: 500;
+    }
+    .footer {
+        text-align: center;
+        color: #6c757d;
+        padding: 20px;
+        margin-top: 30px;
+        font-style: italic;
+    }
+</style>
+""", unsafe_allow_html=True)
+
 # App title and description
 st.markdown('<h1 class="main-header">📖 Scripture Decipher</h1>', unsafe_allow_html=True)
 st.markdown("""
@@ -168,7 +225,8 @@ with tab2:
             start_idx = (page - 1) * items_per_page
             end_idx = min(start_idx + items_per_page, total_verses)
             
-            st.write(f"Showing {start_idx + 1}-{end_idx} of {total_verses} verses")
+            # Fixed the formatting issue here
+            st.write(f"Showing {start_idx + 1}-{end_idx} of {total_verses} verse{'s' if total_verses != 1 else ''}")
             
             # Display verses for current page
             for verse in filtered_verses[start_idx:end_idx]:
@@ -179,7 +237,8 @@ with tab2:
                         st.markdown(f'<div class="scripture-box">{verse[4]}</div>', unsafe_allow_html=True)
                     with col2:
                         st.write("**Simplified:**")
-                        st.markdown(f'<div style="background-color: #e8f4f8; border-radius: 10px; padding: 20px; margin: 15px 0; border-left: 5px solid #5c8da5;">{verse[5]}</div>', unsafe_allow_html=True)
+                        # FIXED: Changed from inline style to using the CSS class
+                        st.markdown(f'<div class="simplified-box">{verse[5]}</div>', unsafe_allow_html=True)
         
         # Statistics
         st.markdown("---")
@@ -245,7 +304,7 @@ with tab3:
 # Add footer
 st.markdown("---")
 st.markdown("""
-<div style="text-align: center; color: #6c757d; padding: 20px;">
+<div class="footer">
     <p>Scripture Decipher • Making the Bible accessible to all</p>
 </div>
 """, unsafe_allow_html=True)