Update app.py

app.py

@@ -24,17 +24,17 @@ st.set_page_config(
     initial_sidebar_state="collapsed"
 )
 
-# Premium Black & Gold CSS Styling - CLEAN VERSION (NO BOXES)
+# Premium Black & Gold CSS Styling - ENHANCED VERSION
 st.markdown("""
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800;900&display=swap');
 
 * {
     font-family: 'Inter', sans-serif;
 }
 
 .stApp {
-    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #0f0f0f 100%);
+    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
 }
 
 .main {
@@ -51,16 +51,19 @@ section[data-testid="stSidebar"] {
     display: none;
 }
 
-/* Hero Section */
+/* Hero Section - Enhanced */
 .hero-container {
     background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
-    border-radius: 28px;
-    padding: 3.5rem 3rem;
-    margin-bottom: 2.5rem;
-    box-shadow: 0 25px 70px rgba(0,0,0,0.5), 0 10px 30px rgba(218,165,32,0.2);
+    border-radius: 32px;
+    padding: 4rem 3rem;
+    margin-bottom: 3rem;
+    box-shadow: 
+        0 25px 70px rgba(0,0,0,0.6), 
+        0 10px 30px rgba(218,165,32,0.25),
+        inset 0 1px 0 rgba(255,255,255,0.1);
     position: relative;
     overflow: hidden;
-    border: 2px solid rgba(218,165,32,0.3);
+    border: 2px solid rgba(218,165,32,0.4);
 }
 
 .hero-container::before {
@@ -68,10 +71,16 @@ section[data-testid="stSidebar"] {
     position: absolute;
     top: -50%;
     right: -20%;
-    width: 500px;
-    height: 500px;
-    background: radial-gradient(circle, rgba(218,165,32,0.15) 0%, transparent 70%);
+    width: 600px;
+    height: 600px;
+    background: radial-gradient(circle, rgba(218,165,32,0.2) 0%, transparent 70%);
     border-radius: 50%;
+    animation: pulse 8s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { transform: scale(1); opacity: 0.3; }
+    50% { transform: scale(1.1); opacity: 0.5; }
 }
 
 .hero-container::after {
@@ -79,75 +88,115 @@ section[data-testid="stSidebar"] {
     position: absolute;
     bottom: -30%;
     left: -10%;
-    width: 400px;
-    height: 400px;
-    background: radial-gradient(circle, rgba(255,215,0,0.1) 0%, transparent 70%);
+    width: 500px;
+    height: 500px;
+    background: radial-gradient(circle, rgba(255,215,0,0.15) 0%, transparent 70%);
     border-radius: 50%;
 }
 
 .hero-title {
-    font-size: 4rem;
+    font-size: 4.5rem;
     font-weight: 900;
     background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFD700 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    margin-bottom: 0.75rem;
+    margin-bottom: 1rem;
     position: relative;
     z-index: 1;
-    letter-spacing: -0.02em;
-    filter: drop-shadow(0 4px 20px rgba(255,215,0,0.3));
+    letter-spacing: -0.03em;
+    filter: drop-shadow(0 4px 20px rgba(255,215,0,0.4));
+    text-shadow: 0 0 80px rgba(255,215,0,0.3);
 }
 
 .hero-subtitle {
-    font-size: 1.35rem;
+    font-size: 1.45rem;
     color: #e5e7eb;
     font-weight: 500;
     margin-bottom: 1.5rem;
     position: relative;
     z-index: 1;
     line-height: 1.6;
+    letter-spacing: 0.3px;
+}
+
+.hero-description {
+    color: #d1d5db;
+    font-size: 1.05rem;
+    line-height: 1.7;
+    position: relative;
+    z-index: 1;
+    max-width: 900px;
 }
 
 .hero-badge {
     display: inline-block;
     background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
     color: #0f0f0f;
-    padding: 0.7rem 2rem;
+    padding: 0.8rem 2.5rem;
     border-radius: 50px;
-    font-size: 1rem;
+    font-size: 1.05rem;
     font-weight: 700;
-    margin-top: 1.5rem;
-    box-shadow: 0 8px 25px rgba(255,215,0,0.4);
+    margin-top: 1.8rem;
+    box-shadow: 
+        0 8px 25px rgba(255,215,0,0.5),
+        0 0 40px rgba(255,215,0,0.3);
     position: relative;
     z-index: 1;
+    transition: all 0.3s ease;
+}
+
+.hero-badge:hover {
+    transform: translateY(-2px);
+    box-shadow: 
+        0 12px 35px rgba(255,215,0,0.6),
+        0 0 50px rgba(255,215,0,0.4);
 }
 
-/* Section Headers - CLEAN TEXT ONLY */
+/* Section Headers */
 .section-title {
-    font-size: 2rem;
-    font-weight: 700;
-    color: #FFD700;
-    margin: 3rem 0 1.5rem 0;
+    font-size: 2.2rem;
+    font-weight: 800;
+    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin: 3.5rem 0 2rem 0;
     text-align: center;
     letter-spacing: 0.5px;
+    position: relative;
+    padding-bottom: 1rem;
+}
+
+.section-title::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100px;
+    height: 4px;
+    background: linear-gradient(90deg, transparent, #FFD700, transparent);
+    border-radius: 2px;
 }
 
-/* Stats Grid */
+/* Stats Grid - Enhanced */
 .stats-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: 1.5rem;
-    margin: 2rem 0;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 1.8rem;
+    margin: 2.5rem 0;
 }
 
 .stat-card {
     background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
-    padding: 2rem 1.5rem;
-    border-radius: 20px;
+    padding: 2.5rem 1.8rem;
+    border-radius: 24px;
     text-align: center;
     color: #0f0f0f;
-    box-shadow: 0 10px 30px rgba(255,215,0,0.3);
-    transition: all 0.3s ease;
+    box-shadow: 
+        0 10px 30px rgba(255,215,0,0.35),
+        0 0 40px rgba(255,215,0,0.2),
+        inset 0 1px 0 rgba(255,255,255,0.3);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
 }
@@ -159,191 +208,344 @@ section[data-testid="stSidebar"] {
     right: -50%;
     width: 200%;
     height: 200%;
-    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
-    transition: all 0.5s ease;
+    background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
+    transition: all 0.6s ease;
+    opacity: 0;
+}
+
+.stat-card:hover::before {
+    opacity: 1;
+    transform: translate(-25%, -25%);
 }
 
 .stat-card:hover {
-    transform: translateY(-8px) scale(1.02);
-    box-shadow: 0 15px 40px rgba(255,215,0,0.5);
+    transform: translateY(-10px) scale(1.03);
+    box-shadow: 
+        0 20px 50px rgba(255,215,0,0.5),
+        0 0 60px rgba(255,215,0,0.3),
+        inset 0 1px 0 rgba(255,255,255,0.4);
 }
 
 .stat-value {
-    font-size: 3rem;
+    font-size: 3.5rem;
     font-weight: 900;
     margin-bottom: 0.5rem;
     position: relative;
     z-index: 1;
     color: #0f0f0f;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
 .stat-label {
     font-size: 0.95rem;
-    font-weight: 600;
+    font-weight: 700;
     opacity: 0.9;
     text-transform: uppercase;
-    letter-spacing: 1.5px;
+    letter-spacing: 1.8px;
     position: relative;
     z-index: 1;
     color: #0f0f0f;
 }
 
-/* Input Areas */
+/* Input Areas - Enhanced */
 .stTextArea textarea {
-    border-radius: 16px;
-    border: 2px solid rgba(218,165,32,0.3);
-    font-size: 1rem;
+    border-radius: 18px;
+    border: 2px solid rgba(218,165,32,0.35);
+    font-size: 1.05rem;
     transition: all 0.3s ease;
-    background: #1a1a1a;
-    color: #e5e7eb;
+    background: rgba(26,26,26,0.8) !important;
+    color: #e5e7eb !important;
+    padding: 1rem !important;
+    line-height: 1.6 !important;
 }
 
 .stTextArea textarea:focus {
     border-color: #FFD700;
-    box-shadow: 0 0 0 3px rgba(255,215,0,0.2);
+    box-shadow: 0 0 0 4px rgba(255,215,0,0.15);
+    background: rgba(26,26,26,0.95) !important;
 }
 
-/* Buttons */
+/* Buttons - Enhanced */
 .stButton > button {
     background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
     color: #0f0f0f;
     border: none;
-    border-radius: 12px;
-    padding: 0.75rem 2.5rem;
-    font-size: 1.1rem;
-    font-weight: 600;
-    transition: all 0.3s ease;
-    box-shadow: 0 4px 15px rgba(255,215,0,0.4);
+    border-radius: 14px;
+    padding: 0.9rem 2.8rem;
+    font-size: 1.15rem;
+    font-weight: 700;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 
+        0 4px 15px rgba(255,215,0,0.4),
+        0 0 30px rgba(255,215,0,0.2);
     width: 100%;
+    letter-spacing: 0.5px;
+    position: relative;
+    overflow: hidden;
+}
+
+.stButton > button::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(255,255,255,0.3);
+    transform: translate(-50%, -50%);
+    transition: width 0.6s, height 0.6s;
+}
+
+.stButton > button:hover::before {
+    width: 300px;
+    height: 300px;
 }
 
 .stButton > button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(255,215,0,0.6);
+    transform: translateY(-3px);
+    box-shadow: 
+        0 8px 25px rgba(255,215,0,0.6),
+        0 0 50px rgba(255,215,0,0.3);
+}
+
+.stButton > button:active {
+    transform: translateY(-1px);
 }
 
-/* Alert Boxes */
+/* Alert Boxes - Enhanced */
 .alert-danger {
     background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
     color: white;
-    padding: 1.5rem;
-    border-radius: 16px;
+    padding: 2rem;
+    border-radius: 20px;
     font-size: 1.1rem;
     font-weight: 600;
-    box-shadow: 0 8px 24px rgba(239,68,68,0.3);
-    margin: 1rem 0;
+    box-shadow: 
+        0 10px 30px rgba(239,68,68,0.4),
+        0 0 50px rgba(239,68,68,0.2);
+    margin: 1.5rem 0;
+    border: 2px solid rgba(255,255,255,0.1);
 }
 
 .alert-success {
     background: linear-gradient(135deg, #10b981 0%, #059669 100%);
     color: white;
-    padding: 1.5rem;
-    border-radius: 16px;
+    padding: 2rem;
+    border-radius: 20px;
     font-size: 1.1rem;
     font-weight: 600;
-    box-shadow: 0 8px 24px rgba(16,185,129,0.3);
-    margin: 1rem 0;
+    box-shadow: 
+        0 10px 30px rgba(16,185,129,0.4),
+        0 0 50px rgba(16,185,129,0.2);
+    margin: 1.5rem 0;
+    border: 2px solid rgba(255,255,255,0.1);
 }
 
 .confidence-bar {
-    height: 12px;
-    background: rgba(255,255,255,0.3);
-    border-radius: 10px;
+    height: 14px;
+    background: rgba(255,255,255,0.25);
+    border-radius: 12px;
     overflow: hidden;
-    margin-top: 0.75rem;
+    margin-top: 1rem;
+    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
 }
 
 .confidence-fill {
     height: 100%;
-    background: rgba(255,255,255,0.9);
-    border-radius: 10px;
-    transition: width 1s ease;
+    background: rgba(255,255,255,0.95);
+    border-radius: 12px;
+    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 0 10px rgba(255,255,255,0.5);
 }
 
-/* Hints Panel */
+/* Hints Panel - Enhanced */
 .hints-panel {
-    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
-    border-radius: 16px;
-    padding: 1.5rem;
-    border-left: 4px solid #FFD700;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+    background: linear-gradient(135deg, rgba(26,26,26,0.95) 0%, rgba(15,15,15,0.95) 100%);
+    border-radius: 20px;
+    padding: 2rem;
+    border-left: 5px solid #FFD700;
+    box-shadow: 
+        0 4px 15px rgba(0,0,0,0.4),
+        inset 0 1px 0 rgba(255,255,255,0.05);
+    backdrop-filter: blur(10px);
 }
 
 .hint-item {
     display: flex;
     align-items: start;
-    gap: 0.75rem;
-    margin-bottom: 1rem;
-    font-size: 0.95rem;
+    gap: 1rem;
+    margin-bottom: 1.2rem;
+    font-size: 0.98rem;
     color: #d1d5db;
+    line-height: 1.6;
 }
 
 .hint-icon {
-    min-width: 24px;
-    height: 24px;
-    background: #FFD700;
+    min-width: 28px;
+    height: 28px;
+    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
     color: #0f0f0f;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 0.75rem;
-    font-weight: 700;
+    font-size: 0.8rem;
+    font-weight: 800;
+    box-shadow: 0 2px 8px rgba(255,215,0,0.4);
 }
 
-/* Footer */
-.footer {
-    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
+/* Metric Cards - Enhanced */
+.metric-container {
+    background: linear-gradient(135deg, rgba(26,26,26,0.95) 0%, rgba(15,15,15,0.95) 100%);
+    padding: 1.8rem;
     border-radius: 16px;
-    padding: 2rem;
-    text-align: center;
-    margin-top: 3rem;
-    color: #9ca3af;
-    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
-    border: 2px solid rgba(218,165,32,0.2);
+    border-left: 5px solid #FFD700;
+    box-shadow: 
+        0 4px 12px rgba(0,0,0,0.4),
+        inset 0 1px 0 rgba(255,255,255,0.05);
+    transition: all 0.3s ease;
 }
 
-.footer-name {
-    font-weight: 700;
-    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+.metric-container:hover {
+    transform: translateY(-2px);
+    box-shadow: 
+        0 6px 18px rgba(0,0,0,0.5),
+        inset 0 1px 0 rgba(255,255,255,0.08);
 }
 
-/* File Uploader */
+/* File Uploader - Enhanced */
 .stFileUploader {
-    border: 2px dashed rgba(218,165,32,0.4);
-    border-radius: 16px;
-    padding: 1.5rem;
-    background: rgba(26,26,26,0.5);
+    border: 2px dashed rgba(218,165,32,0.45);
+    border-radius: 18px;
+    padding: 2rem;
+    background: rgba(26,26,26,0.6);
     transition: all 0.3s ease;
 }
 
 .stFileUploader:hover {
     border-color: #FFD700;
-    background: rgba(218,165,32,0.1);
+    background: rgba(218,165,32,0.12);
+    box-shadow: 0 0 20px rgba(255,215,0,0.15);
 }
 
-/* Metric Cards */
-.metric-container {
-    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
-    padding: 1.25rem;
-    border-radius: 12px;
-    border-left: 4px solid #FFD700;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+/* Expanders - Enhanced */
+.streamlit-expanderHeader {
+    background: linear-gradient(135deg, rgba(218,165,32,0.2) 0%, rgba(218,165,32,0.1) 100%) !important;
+    border-radius: 14px !important;
+    font-weight: 700 !important;
+    color: #f5f5f5 !important;
+    border: 1px solid rgba(218,165,32,0.3) !important;
+    padding: 1rem 1.5rem !important;
+    transition: all 0.3s ease !important;
 }
 
-/* Expanders */
-.streamlit-expanderHeader {
-    background: rgba(218,165,32,0.15);
-    border-radius: 12px;
-    font-weight: 600;
-    color: #f5f5f5;
+.streamlit-expanderHeader:hover {
+    background: linear-gradient(135deg, rgba(218,165,32,0.25) 0%, rgba(218,165,32,0.15) 100%) !important;
+    border-color: rgba(218,165,32,0.5) !important;
+}
+
+/* Dataframe Styling */
+.stDataFrame {
+    background: rgba(26,26,26,0.95) !important;
+    border-radius: 12px !important;
+    overflow: hidden !important;
+}
+
+.stDataFrame [data-testid="stDataFrameResizable"] {
+    background: rgba(26,26,26,0.95) !important;
+}
+
+.stDataFrame table {
+    background: rgba(26,26,26,0.95) !important;
+    color: #e5e7eb !important;
+}
+
+.stDataFrame thead tr th {
+    background: rgba(218,165,32,0.2) !important;
+    color: #FFD700 !important;
+    font-weight: 700 !important;
+    border-bottom: 2px solid rgba(218,165,32,0.4) !important;
+}
+
+.stDataFrame tbody tr {
+    background: rgba(26,26,26,0.8) !important;
+    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
+}
+
+.stDataFrame tbody tr:hover {
+    background: rgba(218,165,32,0.1) !important;
+}
+
+.stDataFrame tbody tr td {
+    color: #d1d5db !important;
+}
+
+/* Info/Warning boxes */
+.stAlert {
+    background: rgba(26,26,26,0.9) !important;
+    border-radius: 12px !important;
+    border-left: 4px solid #FFD700 !important;
+    color: #e5e7eb !important;
+}
+
+/* Footer - Enhanced */
+.footer {
+    background: linear-gradient(135deg, rgba(26,26,26,0.95) 0%, rgba(15,15,15,0.95) 100%);
+    border-radius: 20px;
+    padding: 2.5rem;
+    text-align: center;
+    margin-top: 4rem;
+    color: #9ca3af;
+    box-shadow: 
+        0 8px 24px rgba(0,0,0,0.4),
+        inset 0 1px 0 rgba(255,255,255,0.05);
+    border: 2px solid rgba(218,165,32,0.3);
+}
+
+.footer-name {
+    font-weight: 800;
+    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: 1.1rem;
+}
+
+/* Matplotlib figure styling */
+.stPlotlyChart, .stPyplot {
+    background: rgba(26,26,26,0.6) !important;
+    border-radius: 12px !important;
+    padding: 1rem !important;
 }
 
 /* Hide Streamlit Branding */
 #MainMenu {visibility: hidden;}
 footer {visibility: hidden;}
+header {visibility: hidden;}
+
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: #1a1a1a;
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, #FFA500 0%, #FFD700 100%);
+}
 </style>
 """, unsafe_allow_html=True)
 
@@ -372,8 +574,8 @@ def preprocess_text(text):
 st.markdown("""
 <div class="hero-container">
     <div class="hero-title">🛡️ AI Phishing Shield</div>
-    <div class="hero-subtitle">Advanced machine learning protection against email threats</div>
-    <div style="color: #d1d5db; font-size: 1rem; line-height: 1.6;">
+    <div class="hero-subtitle">Advanced Machine Learning Protection Against Email Threats</div>
+    <div class="hero-description">
         Powered by TF-IDF vectorization and Logistic Regression, trained on thousands of real-world phishing examples. 
         Get instant threat analysis with confidence scoring and explainable AI insights.
     </div>
@@ -523,7 +725,7 @@ with col1:
     st.markdown(f"""
     <div class="metric-container">
         <div style="color: #9ca3af; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.5rem;">Accuracy</div>
-        <div style="font-size: 2rem; font-weight: 800; color: #FFD700;">{accuracy:.1%}</div>
+        <div style="font-size: 2.5rem; font-weight: 900; color: #FFD700;">{accuracy:.1%}</div>
     </div>
     """, unsafe_allow_html=True)
 
@@ -532,7 +734,7 @@ with col2:
     st.markdown(f"""
     <div class="metric-container">
         <div style="color: #9ca3af; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.5rem;">Precision</div>
-        <div style="font-size: 2rem; font-weight: 800; color: #FFD700;">{precision:.1%}</div>
+        <div style="font-size: 2.5rem; font-weight: 900; color: #FFD700;">{precision:.1%}</div>
     </div>
     """, unsafe_allow_html=True)
 
@@ -541,36 +743,59 @@ with col3:
     st.markdown(f"""
     <div class="metric-container">
         <div style="color: #9ca3af; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.5rem;">Recall</div>
-        <div style="font-size: 2rem; font-weight: 800; color: #FFD700;">{recall:.1%}</div>
+        <div style="font-size: 2.5rem; font-weight: 900; color: #FFD700;">{recall:.1%}</div>
     </div>
     """, unsafe_allow_html=True)
 
+# Fixed Confusion Matrix Section - No re-rendering
 with st.expander("📈 Detailed Metrics & Confusion Matrix"):
-    col_matrix, col_spacer = st.columns([1, 1.5])
+    col_matrix, col_report = st.columns([1, 1.5])
     
     with col_matrix:
-        fig, ax = plt.subplots(figsize=(4,3.5))
-        sns.heatmap(
-            model_info["confusion_matrix"], 
-            annot=True, 
-            fmt="d", 
-            ax=ax, 
-            cmap="YlOrBr", 
-            cbar=False, 
-            square=True,
-            annot_kws={"size": 14, "weight": "bold"}
-        )
-        ax.set_xlabel("Predicted", fontsize=10, fontweight='bold')
-        ax.set_ylabel("Actual", fontsize=10, fontweight='bold')
-        ax.set_xticklabels(["Safe", "Phishing"], fontsize=9)
-        ax.set_yticklabels(["Safe", "Phishing"], fontsize=9, rotation=0)
-        ax.set_title("Confusion Matrix", fontsize=11, fontweight='bold', pad=10)
-        plt.tight_layout()
-        st.pyplot(fig)
+        # Use container to prevent re-rendering
+        with st.container():
+            # Set dark theme for matplotlib
+            plt.style.use('dark_background')
+            fig, ax = plt.subplots(figsize=(5, 4), facecolor='#1a1a1a')
+            ax.set_facecolor('#1a1a1a')
+            
+            sns.heatmap(
+                model_info["confusion_matrix"], 
+                annot=True, 
+                fmt="d", 
+                ax=ax, 
+                cmap="YlOrBr", 
+                cbar=True,
+                square=True,
+                annot_kws={"size": 16, "weight": "bold", "color": "#0f0f0f"},
+                linewidths=2,
+                linecolor='#0f0f0f',
+                cbar_kws={'label': 'Count', 'shrink': 0.8}
+            )
+            
+            ax.set_xlabel("Predicted", fontsize=11, fontweight='bold', color='#FFD700')
+            ax.set_ylabel("Actual", fontsize=11, fontweight='bold', color='#FFD700')
+            ax.set_xticklabels(["Safe", "Phishing"], fontsize=10, color='#e5e7eb')
+            ax.set_yticklabels(["Safe", "Phishing"], fontsize=10, rotation=0, color='#e5e7eb')
+            ax.set_title("Confusion Matrix", fontsize=13, fontweight='bold', pad=12, color='#FFD700')
+            
+            # Style the colorbar
+            cbar = ax.collections[0].colorbar
+            cbar.ax.yaxis.set_tick_params(color='#e5e7eb')
+            plt.setp(plt.getp(cbar.ax.axes, 'yticklabels'), color='#e5e7eb')
+            
+            plt.tight_layout()
+            st.pyplot(fig, use_container_width=True)
+            plt.close(fig)  # Close figure to prevent memory leak
     
-    st.write("**Classification Report:**")
-    report_df = pd.DataFrame(model_info["report"]).transpose().round(3)
-    st.dataframe(report_df, use_container_width=True, height=200)
+    with col_report:
+        st.markdown("**📊 Classification Report:**")
+        report_df = pd.DataFrame(model_info["report"]).transpose().round(3)
+        st.dataframe(
+            report_df, 
+            use_container_width=True, 
+            height=250
+        )
 
 # Inference UI
 st.markdown('<div class="section-title">✉️ Email Threat Scanner</div>', unsafe_allow_html=True)
@@ -580,7 +805,7 @@ col_input, col_hints = st.columns([2, 1])
 with col_input:
     email_input = st.text_area(
         "Paste email content for analysis",
-        height=250,
+        height=280,
         placeholder="Example: Urgent! Your account has been compromised. Click here to verify your identity immediately...",
         help="Paste the full email content including subject and body"
     )
@@ -597,77 +822,82 @@ with col_input:
         if not email_input.strip():
             st.warning("⚠️ Please paste or upload email content to analyze")
         else:
-            processed_input = preprocess_text(email_input)
-            input_vec = vectorizer.transform([processed_input])
-            
-            try:
-                proba = model.predict_proba(input_vec)[0][1]
-            except Exception:
+            with st.spinner("🔍 Analyzing email threat..."):
+                processed_input = preprocess_text(email_input)
+                input_vec = vectorizer.transform([processed_input])
+                
                 try:
-                    score = model.decision_function(input_vec)[0]
-                    proba = 1/(1+np.exp(-score))
+                    proba = model.predict_proba(input_vec)[0][1]
                 except Exception:
-                    proba = None
-
-            pred = model.predict(input_vec)[0]
-
-            if pred == 1:
-                conf_pct = f"{proba:.1%}" if proba is not None else "N/A"
-                st.markdown(f"""
-                <div class="alert-danger">
-                    <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem;">
-                        <div style="font-size: 2.5rem;">⚠️</div>
-                        <div>
-                            <div style="font-size: 1.4rem; font-weight: 800;">PHISHING DETECTED</div>
-                            <div style="font-size: 1rem; opacity: 0.95;">Threat Confidence: {conf_pct}</div>
+                    try:
+                        score = model.decision_function(input_vec)[0]
+                        proba = 1/(1+np.exp(-score))
+                    except Exception:
+                        proba = None
+
+                pred = model.predict(input_vec)[0]
+
+                if pred == 1:
+                    conf_pct = f"{proba:.1%}" if proba is not None else "N/A"
+                    st.markdown(f"""
+                    <div class="alert-danger">
+                        <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem;">
+                            <div style="font-size: 2.5rem;">⚠️</div>
+                            <div>
+                                <div style="font-size: 1.5rem; font-weight: 800; letter-spacing: 0.5px;">PHISHING DETECTED</div>
+                                <div style="font-size: 1.05rem; opacity: 0.95; margin-top: 0.25rem;">Threat Confidence: {conf_pct}</div>
+                            </div>
+                        </div>
+                        <div class="confidence-bar">
+                            <div class="confidence-fill" style="width: {proba*100 if proba else 0}%;"></div>
                         </div>
                     </div>
-                    <div class="confidence-bar">
-                        <div class="confidence-fill" style="width: {proba*100 if proba else 0}%;"></div>
-                    </div>
-                </div>
-                """, unsafe_allow_html=True)
-                
-                st.markdown("**🔍 Threat Indicators Detected:**")
-                indicators = []
-                if "url" in processed_input:
-                    indicators.append("🔗 Suspicious URL tokens detected")
-                if re.search(r'\b(urgent|immediately|verify|password|suspended|click|act now)\b', processed_input):
-                    indicators.append("⚡ Urgency manipulation tactics")
-                if re.search(r'\b(bank|account|verify|login|password|security|credential)\b', processed_input):
-                    indicators.append("🏦 Financial/security keywords present")
-                if re.search(r'\b(winner|prize|congratulations|claim|free)\b', processed_input):
-                    indicators.append("🎁 Reward/prize baiting language")
-                
-                for indicator in indicators:
-                    st.markdown(f"- {indicator}")
-                
-                if not indicators:
-                    st.markdown("- ⚠️ Content pattern matches known phishing templates")
+                    """, unsafe_allow_html=True)
+                    
+                    st.markdown("**🔍 Threat Indicators Detected:**")
+                    indicators = []
+                    if "url" in processed_input:
+                        indicators.append("🔗 Suspicious URL tokens detected")
+                    if re.search(r'\b(urgent|immediately|verify|password|suspended|click|act now|action required)\b', processed_input):
+                        indicators.append("⚡ Urgency manipulation tactics")
+                    if re.search(r'\b(bank|account|verify|login|password|security|credential|paypal)\b', processed_input):
+                        indicators.append("🏦 Financial/security keywords present")
+                    if re.search(r'\b(winner|prize|congratulations|claim|free|won)\b', processed_input):
+                        indicators.append("🎁 Reward/prize baiting language")
+                    if re.search(r'\b(confirm|update|validate|unlock|restore)\b', processed_input):
+                        indicators.append("🔐 Account action requests")
                     
-            else:
-                conf_pct = f"{(1-proba):.1%}" if proba is not None else "N/A"
-                st.markdown(f"""
-                <div class="alert-success">
-                    <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem;">
-                        <div style="font-size: 2.5rem;">✅</div>
-                        <div>
-                            <div style="font-size: 1.4rem; font-weight: 800;">EMAIL APPEARS SAFE</div>
-                            <div style="font-size: 1rem; opacity: 0.95;">Safety Confidence: {conf_pct}</div>
+                    for indicator in indicators:
+                        st.markdown(f"- {indicator}")
+                    
+                    if not indicators:
+                        st.markdown("- ⚠️ Content pattern matches known phishing templates")
+                    
+                    st.error("🚨 **Recommendation:** Do NOT click any links. Delete this email immediately and report to your IT security team.")
+                        
+                else:
+                    conf_pct = f"{(1-proba):.1%}" if proba is not None else "N/A"
+                    st.markdown(f"""
+                    <div class="alert-success">
+                        <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem;">
+                            <div style="font-size: 2.5rem;">✅</div>
+                            <div>
+                                <div style="font-size: 1.5rem; font-weight: 800; letter-spacing: 0.5px;">EMAIL APPEARS SAFE</div>
+                                <div style="font-size: 1.05rem; opacity: 0.95; margin-top: 0.25rem;">Safety Confidence: {conf_pct}</div>
+                            </div>
+                        </div>
+                        <div class="confidence-bar">
+                            <div class="confidence-fill" style="width: {(1-proba)*100 if proba else 100}%;"></div>
                         </div>
                     </div>
-                    <div class="confidence-bar">
-                        <div class="confidence-fill" style="width: {(1-proba)*100 if proba else 100}%;"></div>
-                    </div>
-                </div>
-                """, unsafe_allow_html=True)
-                st.markdown("**✓ No obvious threat indicators found in content analysis**")
-                st.info("💡 Remember: Always verify sender identity and be cautious with unexpected emails, even if they appear safe.")
+                    """, unsafe_allow_html=True)
+                    st.markdown("**✓ No obvious threat indicators found in content analysis**")
+                    st.info("💡 **Best Practice:** Always verify sender identity through known contact methods and be cautious with unexpected emails, even if they appear safe.")
 
 with col_hints:
     st.markdown("""
     <div class="hints-panel">
-        <div style="font-weight: 700; font-size: 1.1rem; margin-bottom: 1rem; color: #f5f5f5;">🧠 AI Detection Insights</div>
+        <div style="font-weight: 700; font-size: 1.15rem; margin-bottom: 1.2rem; color: #f5f5f5;">🧠 AI Detection Insights</div>
         
         <div class="hint-item">
             <div class="hint-icon">1</div>
@@ -689,6 +919,11 @@ with col_hints:
             <div>Confidence <strong>>70%</strong> warrants immediate caution</div>
         </div>
         
+        <div class="hint-item">
+            <div class="hint-icon">5</div>
+            <div><strong>Prize/reward</strong> language is a common phishing tactic</div>
+        </div>
+        
         <div class="hint-item">
             <div class="hint-icon">⚠️</div>
             <div><strong>Limitations:</strong> This tool analyzes text content only. Always verify sender identity separately.</div>
@@ -696,18 +931,65 @@ with col_hints:
     </div>
     """, unsafe_allow_html=True)
 
+# Additional Tips Section
+st.markdown('<div class="section-title">💡 Phishing Protection Tips</div>', unsafe_allow_html=True)
+
+col_tip1, col_tip2, col_tip3 = st.columns(3)
+
+with col_tip1:
+    st.markdown("""
+    <div style="background: linear-gradient(135deg, rgba(26,26,26,0.95) 0%, rgba(15,15,15,0.95) 100%); 
+                padding: 1.5rem; border-radius: 16px; border-left: 4px solid #FFD700; 
+                box-shadow: 0 4px 15px rgba(0,0,0,0.3); height: 100%;">
+        <div style="font-size: 2rem; margin-bottom: 0.75rem;">🔍</div>
+        <div style="font-weight: 700; font-size: 1.1rem; color: #FFD700; margin-bottom: 0.75rem;">Verify Sender</div>
+        <div style="color: #d1d5db; font-size: 0.95rem; line-height: 1.6;">
+            Always check the sender's email address carefully. Phishers often use addresses that look similar to legitimate ones.
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+
+with col_tip2:
+    st.markdown("""
+    <div style="background: linear-gradient(135deg, rgba(26,26,26,0.95) 0%, rgba(15,15,15,0.95) 100%); 
+                padding: 1.5rem; border-radius: 16px; border-left: 4px solid #FFD700; 
+                box-shadow: 0 4px 15px rgba(0,0,0,0.3); height: 100%;">
+        <div style="font-size: 2rem; margin-bottom: 0.75rem;">🔗</div>
+        <div style="font-weight: 700; font-size: 1.1rem; color: #FFD700; margin-bottom: 0.75rem;">Hover Links</div>
+        <div style="color: #d1d5db; font-size: 0.95rem; line-height: 1.6;">
+            Hover over links (don't click!) to see the actual URL. Legitimate companies use their official domains.
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+
+with col_tip3:
+    st.markdown("""
+    <div style="background: linear-gradient(135deg, rgba(26,26,26,0.95) 0%, rgba(15,15,15,0.95) 100%); 
+                padding: 1.5rem; border-radius: 16px; border-left: 4px solid #FFD700; 
+                box-shadow: 0 4px 15px rgba(0,0,0,0.3); height: 100%;">
+        <div style="font-size: 2rem; margin-bottom: 0.75rem;">📞</div>
+        <div style="font-weight: 700; font-size: 1.1rem; color: #FFD700; margin-bottom: 0.75rem;">Contact Directly</div>
+        <div style="color: #d1d5db; font-size: 0.95rem; line-height: 1.6;">
+            When in doubt, contact the company directly using official contact information, not the email's links.
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+
 # Footer
 st.markdown("""
 <div class="footer">
-    <div style="font-size: 1.1rem; margin-bottom: 0.5rem;">
+    <div style="font-size: 1.2rem; margin-bottom: 0.75rem; font-weight: 700;">
         Developed and Deployed by <span class="footer-name">Umaima Qureshi</span>
     </div>
-    <div style="font-size: 0.9rem; color: #94a3b8;">
+    <div style="font-size: 1rem; color: #94a3b8; margin-bottom: 1rem; line-height: 1.6;">
         🎓 Educational demonstration of ML-powered email security<br>
         For production use: Implement additional verification layers, link scanning, attachment analysis, and human oversight
     </div>
-    <div style="margin-top: 1rem; font-size: 0.85rem; color: #6b7280;">
+    <div style="margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(218,165,32,0.2); font-size: 0.9rem; color: #6b7280;">
         Powered by TF-IDF • Logistic Regression • Scikit-learn • Streamlit
     </div>
+    <div style="margin-top: 1rem; font-size: 0.85rem; color: #6b7280;">
+        © 2024 AI Phishing Shield | All Rights Reserved
+    </div>
 </div>
 """, unsafe_allow_html=True)