Update src/streamlit_app.py

src/streamlit_app.py

@@ -5,6 +5,7 @@ import re
 import io
 import time
 import requests
+import matplotlib.subplots as plt
 import matplotlib.pyplot as plt
 import seaborn as sns
 from datetime import datetime, timezone
@@ -20,7 +21,7 @@ from langdetect import detect, DetectorFactory
 DetectorFactory.seed = 0
 
 # ==============================
-# SETTING PATH ABSOLUT UNTUK GAMBAR
+# SETTING PATH ABSOLUT GAMBAR
 # ==============================
 BASE_DIR = os.path.dirname(os.path.abspath(__file__))
 
@@ -41,12 +42,12 @@ if 'page' not in st.session_state:
     st.session_state.page = "uji_kalimat"
 
 # ==============================
-# GLOBAL CSS — Vancouver Bitcoin Style
+# GLOBAL CSS
 # ==============================
 st.markdown("""
 <style>
     /* ── Google Fonts ── */
-    @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
 
     /* ── Reset Streamlit chrome ── */
     #MainMenu, footer, header { visibility: hidden; }
@@ -57,13 +58,19 @@ st.markdown("""
     }
 
     html, body, [class*="css"] {
-        font-family: 'DM Sans', sans-serif !important;
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+        color: #202630 !important;
+    }
+    
+    .stApp {
+        background-color: #FAFAFA !important;
     }
 
     /* ── Custom Scrollbar ── */
     ::-webkit-scrollbar { width: 6px; }
-    ::-webkit-scrollbar-track { background: #FFF3E0; }
-    ::-webkit-scrollbar-thumb { background: #F7931A; border-radius: 3px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { background: #eaecef; border-radius: 3px; }
+    ::-webkit-scrollbar-thumb:hover { background: #d8dce1; }
 
     /* ── NAVBAR WRAPPER ── */
     .vbc-navbar {
@@ -71,397 +78,284 @@ st.markdown("""
         align-items: center;
         justify-content: space-between;
         padding: 0 3rem;
-        height: 72px;
-        background: #1A1033;
+        height: 64px;
+        background: #FFFFFF;
         position: sticky;
         top: 0;
         z-index: 999;
-        box-shadow: 0 2px 20px rgba(0,0,0,0.25);
+        border-bottom: 1px solid #eaecef;
     }
     .vbc-logo {
-        font-family: 'Manrope', sans-serif;
-        font-weight: 800;
-        font-size: 1.35rem;
-        color: #FFFFFF !important;
+        font-weight: 700;
+        font-size: 1.15rem;
+        color: #202630 !important;
         display: flex;
         align-items: center;
-        gap: 10px;
-        letter-spacing: -0.5px;
+        gap: 8px;
     }
     .vbc-logo-icon {
-        background: #F7931A;
+        background: #1aa64a;
         color: white;
-        width: 36px;
-        height: 36px;
+        width: 32px;
+        height: 32px;
         border-radius: 50%;
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        font-size: 1.1rem;
-        font-weight: 800;
+        font-size: 1rem;
+        font-weight: 700;
     }
 
     /* ── HERO SECTION (Uji Kalimat) ── */
     .hero-wrap {
-        background: #F7931A;
-        min-height: calc(100vh - 72px);
+        background: #FAFAFA;
+        min-height: calc(100vh - 64px);
         display: flex;
         align-items: center;
         position: relative;
         overflow: hidden;
         padding: 4rem 3rem;
     }
-    .hero-wrap::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(ellipse at 80% 50%, rgba(255,255,255,0.08) 0%, transparent 60%),
-                    radial-gradient(ellipse at 20% 80%, rgba(0,0,0,0.12) 0%, transparent 50%);
-        pointer-events: none;
-    }
-    /* sparkle dots decoration */
-    .hero-wrap::after {
-        content: '✦  ✦  ✦';
-        position: absolute;
-        top: 2rem;
-        right: 3rem;
-        font-size: 1.4rem;
-        color: rgba(255,255,255,0.25);
-        letter-spacing: 1.2rem;
-    }
+    
     .hero-badge {
         display: inline-block;
-        background: rgba(255,255,255,0.18);
-        border: 1px solid rgba(255,255,255,0.35);
-        color: #FFFFFF;
-        font-size: 0.78rem;
-        font-weight: 700;
-        letter-spacing: 1.5px;
-        text-transform: uppercase;
-        padding: 5px 14px;
-        border-radius: 50px;
-        margin-bottom: 1.2rem;
+        background: #e6fff1;
+        color: #1aa64a;
+        font-size: 0.75rem;
+        font-weight: 600;
+        padding: 6px 12px;
+        border-radius: 4px;
+        margin-bottom: 1.5rem;
     }
     .hero-title {
-        font-family: 'Manrope', sans-serif !important;
-        font-size: 3.8rem;
-        font-weight: 800;
-        line-height: 1.08;
-        letter-spacing: -1.5px;
-        color: #FFFFFF !important;
-        margin: 0 0 1.2rem;
+        font-size: 3rem;
+        font-weight: 700;
+        line-height: 1.2;
+        color: #202630 !important;
+        margin: 0 0 1rem;
     }
     .hero-title span {
-        color: #1A1033;
+        color: #1aa64a;
     }
     .hero-sub {
-        font-size: 1.05rem;
-        color: rgba(255,255,255,0.85) !important;
+        font-size: 1rem;
+        color: #707a8a !important;
         max-width: 500px;
-        line-height: 1.7;
+        line-height: 1.6;
         margin-bottom: 2rem;
     }
     .hero-card {
-        background: rgba(255,255,255,0.13);
-        border: 1px solid rgba(255,255,255,0.28);
-        backdrop-filter: blur(6px);
-        border-radius: 14px;
-        padding: 14px 20px;
+        background: #FFFFFF;
+        border: 1px solid #eaecef;
+        border-radius: 8px;
+        padding: 12px 16px;
         display: inline-flex;
         align-items: center;
         gap: 10px;
-        margin-bottom: 2.2rem;
+        margin-bottom: 2rem;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
     }
     .hero-card-dot {
         width: 8px; height: 8px;
         border-radius: 50%;
-        background: #1A1033;
+        background: #1aa64a;
         flex-shrink: 0;
     }
     .hero-card p {
         margin: 0;
-        font-size: 0.88rem;
-        color: #FFFFFF !important;
+        font-size: 0.85rem;
+        color: #474d57 !important;
         font-weight: 500;
     }
 
     /* ── BATCH SECTION ── */
     .batch-wrap {
-        background: #FEF8F0;
-        min-height: calc(100vh - 72px);
-        padding: 5rem 3rem 4rem;
-        position: relative;
-    }
-    .batch-wrap::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background-image: radial-gradient(circle, rgba(247,147,26,0.06) 1px, transparent 1px);
-        background-size: 28px 28px;
-        pointer-events: none;
+        background: #FAFAFA;
+        min-height: calc(100vh - 64px);
+        padding: 4rem 3rem;
     }
     .batch-eyebrow {
-        font-family: 'Manrope', sans-serif;
-        font-size: 0.75rem;
-        font-weight: 700;
-        letter-spacing: 2px;
-        text-transform: uppercase;
-        color: #F7931A !important;
-        margin-bottom: 0.75rem;
+        font-size: 0.85rem;
+        font-weight: 600;
+        color: #1aa64a !important;
+        margin-bottom: 0.5rem;
     }
     .batch-title {
-        font-family: 'Manrope', sans-serif !important;
-        font-size: 2.8rem;
-        font-weight: 800;
-        letter-spacing: -1px;
-        color: #1A1033 !important;
-        line-height: 1.1;
+        font-size: 2.5rem;
+        font-weight: 700;
+        color: #202630 !important;
+        line-height: 1.2;
         margin-bottom: 1rem;
     }
     .batch-sub {
-        font-size: 1.05rem;
-        color: #64748B !important;
+        font-size: 1rem;
+        color: #707a8a !important;
         max-width: 480px;
-        line-height: 1.7;
+        line-height: 1.6;
         margin-bottom: 2rem;
     }
 
     /* ── RESULT / DASHBOARD SECTION ── */
     .result-wrap {
         background: #FFFFFF;
-        padding: 3rem 3rem 4rem;
-        border-top: 4px solid #F7931A;
+        padding: 3rem 3rem;
+        border-top: 1px solid #eaecef;
     }
     .section-label {
-        font-family: 'Manrope', sans-serif;
-        font-size: 0.72rem;
-        font-weight: 700;
-        letter-spacing: 2px;
-        text-transform: uppercase;
-        color: #F7931A !important;
+        font-size: 0.85rem;
+        font-weight: 600;
+        color: #1aa64a !important;
         margin-bottom: 0.5rem;
     }
     .section-title {
-        font-family: 'Manrope', sans-serif !important;
-        font-size: 1.9rem;
-        font-weight: 800;
-        letter-spacing: -0.5px;
-        color: #1A1033 !important;
-        margin-bottom: 1.8rem;
-    }
-
-    /* ── SENTIMENT RESULT CARD ── */
-    .sent-card {
-        background: #F8FAFC;
-        border: 1px solid #E2E8F0;
-        border-radius: 16px;
-        padding: 1.5rem 2rem;
-        margin-bottom: 1rem;
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: #202630 !important;
+        margin-bottom: 1.5rem;
     }
 
     /* ── METRIC CARDS ── */
     div[data-testid="stMetric"] {
         background: #FFFFFF;
-        border: 1px solid #E2E8F0;
-        border-radius: 16px;
-        padding: 1.2rem 1.5rem !important;
-        box-shadow: 0 1px 4px rgba(0,0,0,0.04);
+        border: 1px solid #eaecef;
+        border-radius: 8px;
+        padding: 1rem 1.2rem !important;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
     }
     div[data-testid="stMetricLabel"] > div {
-        color: #64748B !important;
-        font-size: 0.8rem !important;
-        font-weight: 600 !important;
-        letter-spacing: 0.5px;
-        text-transform: uppercase;
+        color: #707a8a !important;
+        font-size: 0.85rem !important;
+        font-weight: 500 !important;
     }
     div[data-testid="stMetricValue"] > div {
-        color: #1A1033 !important;
-        font-family: 'Manrope', sans-serif !important;
-        font-weight: 800 !important;
-        font-size: 2rem !important;
+        color: #202630 !important;
+        font-weight: 700 !important;
+        font-size: 1.8rem !important;
     }
 
-    /* ── BUTTONS — VBC style pill buttons ── */
+    /* ── BUTTONS ── */
     div[data-testid="stButton"] > button {
-        font-family: 'Manrope', sans-serif !important;
-        font-weight: 700 !important;
-        font-size: 0.92rem !important;
-        border-radius: 50px !important;
-        padding: 0.6rem 1.8rem !important;
-        border: none !important;
-        letter-spacing: 0.2px;
-        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
-        box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
+        font-weight: 600 !important;
+        font-size: 0.9rem !important;
+        border-radius: 4px !important;
+        padding: 0.5rem 1.2rem !important;
+        transition: all 0.2s ease-in-out !important;
     }
     div[data-testid="stButton"] > button:focus:not(:active) {
         box-shadow: none !important;
     }
 
-    /* Primary CTA — dark navy */
+    /* Primary CTA */
     .btn-primary div[data-testid="stButton"] > button {
-        background: #1A1033 !important;
+        background: #1aa64a !important;
         color: #FFFFFF !important;
+        border: none !important;
     }
     .btn-primary div[data-testid="stButton"] > button:hover {
-        background: #2D1B69 !important;
-        transform: translateY(-2px) !important;
-        box-shadow: 0 6px 20px rgba(26,16,51,0.25) !important;
+        background: #1fb653 !important;
     }
 
-    /* Secondary outline — white border on dark bg */
+    /* Secondary outline */
     .btn-outline-white div[data-testid="stButton"] > button {
-        background: transparent !important;
-        color: #FFFFFF !important;
-        border: 2px solid rgba(255,255,255,0.6) !important;
+        background: #FFFFFF !important;
+        color: #202630 !important;
+        border: 1px solid #eaecef !important;
     }
     .btn-outline-white div[data-testid="stButton"] > button:hover {
-        background: rgba(255,255,255,0.12) !important;
-        border-color: #FFFFFF !important;
-        transform: translateY(-2px) !important;
+        border-color: #1aa64a !important;
+        color: #1aa64a !important;
     }
 
-    /* Orange pill — active nav */
+    /* Active nav */
     .btn-orange div[data-testid="stButton"] > button {
-        background: #F7931A !important;
-        color: #FFFFFF !important;
-        box-shadow: 0 4px 16px rgba(247,147,26,0.35) !important;
-    }
-    .btn-orange div[data-testid="stButton"] > button:hover {
-        background: #E07D08 !important;
-        transform: translateY(-2px) !important;
+        background: #e6fff1 !important;
+        color: #1aa64a !important;
+        border: none !important;
     }
 
     /* Ghost nav — inactive */
     .btn-ghost div[data-testid="stButton"] > button {
         background: transparent !important;
-        color: rgba(255,255,255,0.7) !important;
-        border: 1px solid rgba(255,255,255,0.2) !important;
-        box-shadow: none !important;
+        color: #707a8a !important;
+        border: none !important;
     }
     .btn-ghost div[data-testid="stButton"] > button:hover {
-        color: #FFFFFF !important;
-        border-color: rgba(255,255,255,0.5) !important;
-        background: rgba(255,255,255,0.06) !important;
+        color: #202630 !important;
+        background: #f5f5f5 !important;
     }
 
     /* ── TEXT INPUT / TEXTAREA ── */
     .stTextArea textarea {
-        background-color: rgba(255,255,255,0.12) !important;
-        color: #FFFFFF !important;
-        border: 1.5px solid rgba(255,255,255,0.3) !important;
-        border-radius: 14px !important;
-        font-family: 'DM Sans', sans-serif !important;
-        font-size: 0.98rem !important;
-        padding: 1rem 1.2rem !important;
-        backdrop-filter: blur(4px);
+        background-color: #FFFFFF !important;
+        color: #202630 !important;
+        border: 1px solid #eaecef !important;
+        border-radius: 4px !important;
+        font-size: 0.95rem !important;
+        padding: 0.8rem 1rem !important;
         transition: border-color 0.2s !important;
     }
     .stTextArea textarea:focus {
-        border-color: #1A1033 !important;
-        box-shadow: 0 0 0 3px rgba(26,16,51,0.2) !important;
+        border-color: #1aa64a !important;
+        box-shadow: 0 0 0 1px #1aa64a !important;
     }
     .stTextArea label {
-        color: rgba(255,255,255,0.75) !important;
-        font-size: 0.82rem !important;
-        font-weight: 600 !important;
-        letter-spacing: 0.5px !important;
-        text-transform: uppercase !important;
-    }
-
-    /* Batch page file uploader */
-    .batch-wrap .stTextArea textarea {
-        background-color: #FFFFFF !important;
-        color: #1A1033 !important;
-        border: 1.5px solid #E2E8F0 !important;
-    }
-    .batch-wrap .stTextArea label {
-        color: #64748B !important;
+        color: #474d57 !important;
+        font-size: 0.85rem !important;
+        font-weight: 500 !important;
     }
 
     /* ── DATA TABLE ── */
     div[data-testid="stDataFrame"] {
-        border: 1px solid #E2E8F0 !important;
-        border-radius: 16px !important;
-        overflow: hidden !important;
-        box-shadow: 0 1px 6px rgba(0,0,0,0.04) !important;
+        border: 1px solid #eaecef !important;
+        border-radius: 8px !important;
     }
 
     /* ── FILE UPLOADER ── */
     div[data-testid="stFileUploader"] {
-        border: 2px dashed #F7931A !important;
-        border-radius: 16px !important;
-        background: rgba(247,147,26,0.04) !important;
-        padding: 1rem !important;
+        border: 1px dashed #d8dce1 !important;
+        border-radius: 8px !important;
+        background: #FFFFFF !important;
+        padding: 1.5rem !important;
+    }
+    div[data-testid="stFileUploader"]:hover {
+        border-color: #1aa64a !important;
     }
 
     /* ── EXPANDER ── */
     div[data-testid="stExpander"] {
-        border: 1px solid #E2E8F0 !important;
-        border-radius: 12px !important;
-        overflow: hidden !important;
+        border: 1px solid #eaecef !important;
+        border-radius: 8px !important;
+        background: #FFFFFF !important;
     }
 
-    /* ── ALERT / INFO ── */
-    div[data-testid="stAlert"] {
-        border-radius: 12px !important;
-    }
-
-    /* ── SPINNER ── */
-    div[data-testid="stSpinner"] { color: #F7931A !important; }
-
     /* ── DOWNLOAD BUTTON ── */
     div[data-testid="stDownloadButton"] > button {
-        background: #1A1033 !important;
-        color: #FFFFFF !important;
-        border-radius: 50px !important;
-        font-family: 'Manrope', sans-serif !important;
-        font-weight: 700 !important;
-        border: none !important;
-        padding: 0.6rem 1.4rem !important;
+        background: #FFFFFF !important;
+        color: #202630 !important;
+        border-radius: 4px !important;
+        font-weight: 600 !important;
+        border: 1px solid #eaecef !important;
+        padding: 0.5rem 1rem !important;
         transition: all 0.2s !important;
     }
     div[data-testid="stDownloadButton"] > button:hover {
-        background: #F7931A !important;
-        transform: translateY(-2px) !important;
+        border-color: #1aa64a !important;
+        color: #1aa64a !important;
     }
 
     /* ── DIVIDER ── */
     .vbc-divider {
         border: none;
-        border-top: 1px solid #E2E8F0;
-        margin: 3rem 0;
-    }
-    .vbc-divider-dark {
-        border: none;
-        border-top: 1px solid rgba(255,255,255,0.12);
-        margin: 2.5rem 0;
+        border-top: 1px solid #eaecef;
+        margin: 2rem 0;
     }
 
-    /* ── RESULT TABLE (Uji Kalimat) ── */
-    .result-section {
-        background: rgba(255,255,255,0.07);
-        backdrop-filter: blur(8px);
-        border: 1px solid rgba(255,255,255,0.18);
-        border-radius: 20px;
-        padding: 2rem 2.5rem;
-        margin-top: 2rem;
-    }
-    .result-title {
-        font-family: 'Manrope', sans-serif;
-        font-size: 1.15rem;
-        font-weight: 700;
-        color: #FFFFFF !important;
-        margin-bottom: 1rem;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
 </style>
 """, unsafe_allow_html=True)
 
 
 # ==============================
-# HEADER / NAVBAR — Vancouver Bitcoin style
+# HEADER / NAVBAR
 # ==============================
 def set_page(page_name):
     st.session_state.page = page_name
@@ -475,7 +369,6 @@ st.markdown("""
 </div>
 """, unsafe_allow_html=True)
 
-# Nav buttons sit just below navbar strip using columns
 nav_col_pad, nav_col1, nav_col2, nav_col_end = st.columns([6, 1, 1, 1])
 
 with nav_col1:
@@ -494,22 +387,6 @@ with nav_col2:
         set_page("analisis_batch"); st.rerun()
     st.markdown('</div>', unsafe_allow_html=True)
 
-# ── Navbar overlay CSS (applies color context per page) ──
-if st.session_state.page == "uji_kalimat":
-    st.markdown("""
-    <style>
-        /* Nav ghost text readable on orange bg */
-        .btn-ghost div[data-testid="stButton"] > button { color: rgba(255,255,255,0.6) !important; }
-        /* Override stApp bg to orange */
-        .stApp { background-color: #F7931A !important; }
-    </style>""", unsafe_allow_html=True)
-else:
-    st.markdown("""
-    <style>
-        .btn-ghost div[data-testid="stButton"] > button { color: rgba(255,255,255,0.6) !important; }
-        .stApp { background-color: #FEF8F0 !important; }
-    </style>""", unsafe_allow_html=True)
-
 
 # ==============================
 # DOWNLOAD RESOURCES & LOAD MODELS
@@ -532,7 +409,7 @@ def load_all_models():
     roberta_large = pipeline("sentiment-analysis", model="siebert/sentiment-roberta-large-english",          device=-1, truncation=True, max_length=512)
     return vader, bertweet, roberta, roberta_large
 
-with st.spinner('Mempersiapkan model NLP...'):
+with st.spinner('...'):
     vader, bertweet, roberta, roberta_large = load_all_models()
 
 
@@ -571,14 +448,13 @@ def get_daily_label(score):
 # ==============================================================================
 if st.session_state.page == "uji_kalimat":
 
-    # ── Hero section ──
     st.markdown('<div class="hero-wrap">', unsafe_allow_html=True)
 
     col_text, col_img = st.columns([1.1, 1], gap="large")
 
     with col_text:
         st.markdown("""
-        <div class="hero-badge">🔬 Penelitian Ilmiah · NLP · Python</div>
+        <div class="hero-badge">Penelitian Ilmiah · NLP · Python</div>
         <h1 class="hero-title">
             Bitcoin Volatility<br>
             <span>vs Public</span> Sentiment
@@ -604,11 +480,11 @@ if st.session_state.page == "uji_kalimat":
         col_btn1, col_btn2 = st.columns([1.6, 1])
         with col_btn1:
             st.markdown('<div class="btn-primary">', unsafe_allow_html=True)
-            analyze_btn = st.button("🚀 Analisis Sentimen Sekarang", use_container_width=True)
+            analyze_btn = st.button("Mulai Analisis Sentimen", use_container_width=True)
             st.markdown('</div>', unsafe_allow_html=True)
         with col_btn2:
             st.markdown('<div class="btn-outline-white">', unsafe_allow_html=True)
-            if st.button("📊 Analisis Batch →", use_container_width=True):
+            if st.button("Analisis Batch →", use_container_width=True):
                 set_page("analisis_batch"); st.rerun()
             st.markdown('</div>', unsafe_allow_html=True)
 
@@ -616,23 +492,22 @@ if st.session_state.page == "uji_kalimat":
         try:
             st.image(img_hero, use_container_width=True)
         except Exception:
-            # Placeholder visual bila gambar belum ada
+
             st.markdown("""
-            <div style="background:rgba(255,255,255,0.1);border:2px dashed rgba(255,255,255,0.3);
-                border-radius:20px;height:320px;display:flex;align-items:center;
-                justify-content:center;color:rgba(255,255,255,0.5);font-size:1rem;
+            <div style="background:#f5f5f5;border:1px dashed #d8dce1;
+                border-radius:8px;height:320px;display:flex;align-items:center;
+                justify-content:center;color:#707a8a;font-size:0.9rem;
                 text-align:center;padding:2rem;">
                 🖼️ Tambahkan<br><code>crypto-currency-concept-830px.png</code><br>ke folder project
             </div>""", unsafe_allow_html=True)
 
-    st.markdown('</div>', unsafe_allow_html=True)  # close hero-wrap
+    st.markdown('</div>', unsafe_allow_html=True)  
 
-    # ── Result section ──
     if analyze_btn:
         st.markdown("""
         <div class="result-wrap">
             <p class="section-label">Output Analisis</p>
-            <p class="section-title">📋 Hasil Deteksi Sentimen</p>
+            <p class="section-title">Hasil Deteksi Sentimen</p>
         </div>""", unsafe_allow_html=True)
 
         try:
@@ -659,16 +534,11 @@ if st.session_state.page == "uji_kalimat":
             try: rl_label = roberta_large(text)[0]['label'].lower()
             except: rl_label = "neutral"
 
-            def format_label(label):
-                if label == 'positive': return "🟢 Positive"
-                elif label == 'negative': return "🔴 Negative"
-                return "⚪ Neutral"
-
             def badge_color(label):
-                return {"positive": "#D1FAE5", "negative": "#FEE2E2", "neutral": "#F1F5F9"}[label]
+                return {"positive": "#e6fff1", "negative": "#fef1f2", "neutral": "#f5f5f5"}[label]
 
             def badge_text_color(label):
-                return {"positive": "#065F46", "negative": "#991B1B", "neutral": "#475569"}[label]
+                return {"positive": "#1aa64a", "negative": "#f84960", "neutral": "#707a8a"}[label]
 
             results = [
                 ("VADER",         v_label),
@@ -678,28 +548,27 @@ if st.session_state.page == "uji_kalimat":
                 ("RoBERTa Large", rl_label),
             ]
 
-            # Show as styled cards in 2 columns (2+2+1)
-            st.markdown("<div style='padding: 0 3rem 3rem;'>", unsafe_allow_html=True)
+            st.markdown("<div style='padding: 0 3rem 3rem; background: #FFFFFF;'>", unsafe_allow_html=True)
             col_a, col_b = st.columns(2)
 
             for i, (method, label) in enumerate(results):
                 col = col_a if i % 2 == 0 else col_b
                 bg  = badge_color(label)
                 tc  = badge_text_color(label)
-                icon = "🟢" if label == "positive" else ("🔴" if label == "negative" else "⚪")
+                icon = "↗" if label == "positive" else ("↘" if label == "negative" else "→")
                 with col:
                     st.markdown(f"""
-                    <div style="background:#F8FAFC;border:1px solid #E2E8F0;border-left:4px solid {'#10B981' if label=='positive' else ('#EF4444' if label=='negative' else '#94A3B8')};
-                        border-radius:14px;padding:1.1rem 1.4rem;margin-bottom:1rem;
-                        display:flex;align-items:center;justify-content:space-between;">
+                    <div style="background:#FFFFFF;border:1px solid #eaecef;border-left:4px solid {'#1aa64a' if label=='positive' else ('#f84960' if label=='negative' else '#d8dce1')};
+                        border-radius:8px;padding:1rem 1.2rem;margin-bottom:1rem;
+                        display:flex;align-items:center;justify-content:space-between;
+                        box-shadow:0 2px 4px rgba(0,0,0,0.02);">
                         <div>
-                            <div style="font-family:'Manrope',sans-serif;font-weight:700;font-size:0.78rem;
-                                letter-spacing:1px;text-transform:uppercase;color:#94A3B8;margin-bottom:4px;">{method}</div>
-                            <div style="font-family:'Manrope',sans-serif;font-weight:800;font-size:1.1rem;color:#1A1033;">{icon} {label.capitalize()}</div>
+                            <div style="font-weight:500;font-size:0.75rem;color:#707a8a;margin-bottom:4px;">{method}</div>
+                            <div style="font-weight:700;font-size:1.05rem;color:#202630;">{label.capitalize()}</div>
                         </div>
-                        <div style="background:{bg};color:{tc};font-size:0.75rem;font-weight:700;
-                            padding:4px 12px;border-radius:50px;letter-spacing:0.5px;">
-                            {label.upper()}
+                        <div style="background:{bg};color:{tc};font-size:0.75rem;font-weight:600;
+                            padding:4px 10px;border-radius:4px;">
+                            {icon} {label.upper()}
                         </div>
                     </div>
                     """, unsafe_allow_html=True)
@@ -714,23 +583,22 @@ elif st.session_state.page == "analisis_batch":
 
     plt.style.use('default')
     sns.set_theme(style="whitegrid", rc={
-        "axes.facecolor": "#F8FAFC",
-        "figure.facecolor": "#FFFFFF",
-        "axes.edgecolor": "#E2E8F0",
-        "text.color": "#0F172A",
-        "xtick.color": "#64748B",
-        "ytick.color": "#64748B",
-        "grid.color": "#F1F5F9",
+        "axes.facecolor": "#FFFFFF",
+        "figure.facecolor": "#FAFAFA",
+        "axes.edgecolor": "#eaecef",
+        "text.color": "#202630",
+        "xtick.color": "#707a8a",
+        "ytick.color": "#707a8a",
+        "grid.color": "#f5f5f5",
     })
 
-    # ── Batch hero section ──
     st.markdown('<div class="batch-wrap">', unsafe_allow_html=True)
 
     col_upload, col_img_b = st.columns([1.4, 1], gap="large")
 
     with col_upload:
         st.markdown("""
-        <p class="batch-eyebrow">⚙️ Analisis Masal · Batch Processing</p>
+        <p class="batch-eyebrow">Analisis Masal · Batch Processing</p>
         <h2 class="batch-title">Analisis Batch<br>Data Tweet</h2>
         <p class="batch-sub">
             Unggah file rekam jejak tweet (.txt) untuk diekstraksi dan 
@@ -743,7 +611,7 @@ elif st.session_state.page == "analisis_batch":
             accept_multiple_files=True
         )
 
-        with st.expander("📌 Format TXT yang Didukung"):
+        with st.expander("Format TXT yang Didukung"):
             st.code(
                 "username | 2024-03-01 14:00:00\n"
                 "Isi tweet baris pertama di sini\n\n"
@@ -754,7 +622,7 @@ elif st.session_state.page == "analisis_batch":
 
         st.markdown("<br>", unsafe_allow_html=True)
         st.markdown('<div class="btn-primary">', unsafe_allow_html=True)
-        analyze_batch_btn = st.button("⚙️ Mulai Eksekusi Analisis", key="batch_btn", use_container_width=False)
+        analyze_batch_btn = st.button("Mulai Eksekusi Analisis", key="batch_btn", use_container_width=False)
         st.markdown('</div>', unsafe_allow_html=True)
 
     with col_img_b:
@@ -762,20 +630,20 @@ elif st.session_state.page == "analisis_batch":
             st.image(img_batch, use_container_width=True)
         except Exception:
             st.markdown("""
-            <div style="background:rgba(247,147,26,0.08);border:2px dashed #F7931A;
-                border-radius:20px;height:280px;display:flex;align-items:center;
-                justify-content:center;color:#F7931A;font-size:0.9rem;text-align:center;padding:2rem;">
+            <div style="background:#f5f5f5;border:1px dashed #d8dce1;
+                border-radius:8px;height:280px;display:flex;align-items:center;
+                justify-content:center;color:#707a8a;font-size:0.9rem;
+                text-align:center;padding:2rem;">
                 🖼️ Tambahkan<br><code>slice3-1-1536x830.png</code><br>ke folder project
             </div>""", unsafe_allow_html=True)
 
     st.markdown('</div>', unsafe_allow_html=True)  # close batch-wrap
 
-    # ── Processing & results ──
     if tweet_files and analyze_batch_btn:
         st.markdown('<div class="result-wrap">', unsafe_allow_html=True)
         st.markdown("""
         <p class="section-label">Hasil Pemrosesan</p>
-        <p class="section-title">📊 Dashboard Analisis</p>
+        <p class="section-title">Dashboard Analisis</p>
         """, unsafe_allow_html=True)
 
         tweet_files = sorted(tweet_files, key=lambda x: x.name)
@@ -941,7 +809,7 @@ elif st.session_state.page == "analisis_batch":
                             # Line chart
                             st.subheader("📈 Trend Analisis: Sentiment vs BTC Volatility")
                             fig_line, ax_line = plt.subplots(figsize=(14, 6))
-                            ax_line.plot(df_merged["date"], df_merged["log_return"], label="BTC Log Return", color="#F7931A", linewidth=3)
+                            ax_line.plot(df_merged["date"], df_merged["log_return"], label="BTC Log Return", color="#f7931a", linewidth=3)
                             colors = ["#3B82F6","#10B981","#EC4899","#14B8A6","#6366F1"]
                             for i, method in enumerate(["vader","textblob","roberta","roberta_large","bertweet"]):
                                 ax_line.plot(df_merged["date"], df_merged[method], label=f"Sentiment: {method.upper()}", color=colors[i], linewidth=1.5, linestyle="--", alpha=0.8)
@@ -959,8 +827,8 @@ elif st.session_state.page == "analisis_batch":
                                 with cols[idx2 % 3]:
                                     fig_s, ax_s = plt.subplots(figsize=(5, 4))
                                     sns.regplot(data=df_merged, x=method, y="log_return", ax=ax_s,
-                                                scatter_kws={"s": 40, "color": "#1A1033", "alpha": 0.5},
-                                                line_kws={"color": "#F7931A", "linewidth": 2})
+                                                scatter_kws={"s": 40, "color": "#1aa64a", "alpha": 0.5},
+                                                line_kws={"color": "#202630", "linewidth": 2})
                                     ax_s.set_title(f"{method.upper()}", fontweight='bold')
                                     ax_s.set_xlabel("Sentimen Score")
                                     ax_s.set_ylabel("Log Return")
@@ -999,4 +867,4 @@ elif st.session_state.page == "analisis_batch":
         st.markdown('</div>', unsafe_allow_html=True)  # close result-wrap
 
     elif analyze_batch_btn and not tweet_files:
-        st.warning("⚠️ Silakan unggah minimal satu file .txt terlebih dahulu.")
+        st.warning("⚠️ Silakan unggah minimal satu file .txt terlebih dahulu.")