ui improvements with glassmorphic effect

app/services/document_ingester.py

@@ -15,7 +15,7 @@ class Ingester:
         )
         load_dotenv()
         base_dir = os.getenv("HF_HOME", "/home/user/app")
-        self.DATA_DIR = os.path.join(base_dir, "data")
+        self.DATA_DIRaw = os.path.join(base_dir, "data")
         self.vector_store= Chroma(
             collection_name="documents_collection",
             embedding_function=self.embedding_model,

ui/.streamlit/config.toml

@@ -1,3 +0,0 @@
-[server]
-enableXsrfProtection = false
-enableCORS = false

ui/Home.py

@@ -1,4 +1,5 @@
 import streamlit as st
+from utils import load_css
 
 st.set_page_config(
     page_title="Knowledge Management RAG",
@@ -6,80 +7,166 @@ st.set_page_config(
     layout="wide"
 )
 
+load_css()
+
 # Hero Section
-st.title("🧠 Knowledge Management System")
-st.markdown("""
-    ### Your Personal AI-Powered Knowledge Base
+col1, col2 = st.columns([2, 1])
+
+with col1:
+    st.markdown('<h1 class="gradient-text" style="font-size: 3rem; margin-bottom: 10px;">Knowledge Management</h1>', unsafe_allow_html=True)
+    st.markdown('<h3 style="color: #b0b0b0; margin-top: 0;">Your Second Brain, Supercharged by AI</h3>', unsafe_allow_html=True)
     
-    Welcome to a local-first Retrieval-Augmented Generation (RAG) system designed to help you 
-    **organize**, **search**, and **chat** with your documents. Powered by advanced AI models, 
-    this tool transforms your static files into an interactive knowledge engine.
-""")
+    st.markdown("""
+        <div style="padding: 24px; background: rgba(67, 97, 238, 0.08); border-radius: 16px; border-left: 6px solid #4361EE; margin-top: 20px;">
+            <p style="font-size: 1.15rem; margin: 0; line-height: 1.6; color: #e0e0e0;">
+                Welcome to your local-first <strong>RAG System</strong>. 
+                Seamlessly upload documents, index them with advanced semantic search, and chat with your data using 
+                state-of-the-art AI models. Secure, private, and powerful.
+            </p>
+        </div>
+    """, unsafe_allow_html=True)
+
+with col2:
+    # Statistic / Quick Action Placeholder
+    st.markdown("""
+        <div class="custom-card" style="text-align: center; display: flex; flex-direction: column; justify-content: center; height: 100%; border: 1px solid rgba(67, 97, 238, 0.3); background: rgba(67, 97, 238, 0.05);">
+            <div style="font-size: 3.5rem; margin-bottom: 10px; filter: drop-shadow(0 0 20px rgba(67, 97, 238, 0.4));">🚀</div>
+            <h3 style="margin-top: 5px; font-weight: 800; color: #fff;">Get Started</h3>
+            <p style="color: #bbb; margin-bottom: 15px; font-size: 0.9rem;">Upload your first document to unlock the power of AI.</p>
+        </div>
+    """, unsafe_allow_html=True)
+    st.page_link("pages/Documents.py", label="Start Uploading", icon="📂", use_container_width=True)
 
 st.divider()
 
 # Key Features Section
-st.header("✨ Key Features")
+st.markdown('<h2 style="text-align: center; margin-bottom: 40px;">✨ Powerful Features</h2>', unsafe_allow_html=True)
 
 col1, col2, col3 = st.columns(3)
 
+def feature_card(icon, title, points, color_accent):
+    points_html = "".join([f"<li style='margin-bottom: 8px;'>{p}</li>" for p in points])
+    return f"""
+    <div class="custom-card" style="border-top: 4px solid {color_accent};">
+        <div style="font-size: 2.5rem; margin-bottom: 15px;">{icon}</div>
+        <div class="card-title" style="background: {color_accent}; -webkit-background-clip: text; -webkit-text-fill-color: transparent;">{title}</div>
+        <div class="card-text">
+            <ul style="padding-left: 20px; margin-top: 0;">
+                {points_html}
+            </ul>
+        </div>
+    </div>
+    """
+
 with col1:
-    st.subheader("📄 Smart Ingestion")
-    st.markdown("""
-    - **Advanced Parsing**: Uses [Docling](https://github.com/DS4SD/docling) for high-fidelity PDF & document processing.
-    - **Async Processing**: Upload large files without blocking the UI.
-    - **State Management**: Track document status from upload to full indexing.
-    """)
+    st.markdown(feature_card(
+        "📄", 
+        "Smart Ingestion", 
+        [
+            "<strong>Docling Parsing:</strong> High-fidelity PDF processing.",
+            "<strong>Async Processing:</strong> Non-blocking uploads.",
+            "<strong>Status Tracking:</strong> Real-time updates."
+        ],
+        "linear-gradient(90deg, #4CC9F0, #4361EE)" # Blue Cyan Gradient
+    ), unsafe_allow_html=True)
 
 with col2:
-    st.subheader("🤖 Intelligent Retrieval")
-    st.markdown("""
-    - **Semantic Search**: Powered by `all-MiniLM-L6-v2` embeddings.
-    - **Vector Database**: Fast and scalable storage using ChromaDB (local) or Qdrant.
-    - **Query Expansion**: Generates multiple perspectives for better recall.
-    """)
+    st.markdown(feature_card(
+        "🧠", 
+        "Intelligent Retrieval", 
+        [
+            "<strong>Semantic Search:</strong> Deep meaning extraction.",
+            "<strong>Local Vector DB:</strong> Private ChromaDB storage.",
+            "<strong>Query Expansion:</strong> Enhanced recall."
+        ],
+        "linear-gradient(90deg, #7209B7, #F72585)" # Purple Pink Gradient
+    ), unsafe_allow_html=True)
 
 with col3:
-    st.subheader("💬 Context-Aware Chat")
-    st.markdown("""
-    - **Gemini Powered**: Uses Google's Gemini 2.5 Flash Lite for accurate reasoning.
-    - **History Aware**: Remembers conversation context for fluid interaction.
-    - **Source Citations**: Know exactly where the answer came from (Coming Soon).
-    """)
+    st.markdown(feature_card(
+        "💬", 
+        "Context-Aware Chat", 
+        [
+            "<strong>Gemini Powered:</strong> Advanced reasoning.",
+            "<strong>History Aware:</strong> Fluid conversations.",
+            "<strong>Citations:</strong> (Coming Soon) Fact-checking."
+        ],
+        "linear-gradient(90deg, #FF9E00, #FF0054)" # Orange Red Gradient
+    ), unsafe_allow_html=True)
 
 st.divider()
 
+
 # How It Works / Getting Started
-st.header("🚀 Getting Started")
+st.markdown('<h2 style="margin-bottom: 30px;">🚀 How It Works</h2>', unsafe_allow_html=True)
 
 step1, step2, step3 = st.columns(3)
 
 with step1:
-    st.markdown("#### 1. Upload Documents")
-    st.info("Go to the **Documents** page and upload your PDFs, DOCX, or TXT files.")
+    st.markdown("""
+        <div class="custom-card" style="text-align: center; border: 1px solid rgba(76, 201, 240, 0.2);">
+            <div style="font-size: 2rem; color: #4CC9F0; font-weight: 800; margin-bottom: 10px;">01</div>
+            <h4>Upload</h4>
+            <p style="color: #aaa; margin-bottom: 15px;">Go to <strong>Documents</strong> and upload your files.</p>
+        </div>
+    """, unsafe_allow_html=True)
+    st.page_link("pages/Documents.py", label="Go to Documents", icon="📂", use_container_width=True)
 
 with step2:
-    st.markdown("#### 2. Process & Index")
-    st.warning("The system automatically processes files in the background. Watch the status change to 'Ingested'.")
+    st.markdown("""
+        <div class="custom-card" style="text-align: center; border: 1px solid rgba(114, 9, 183, 0.2);">
+            <div style="font-size: 2rem; color: #7209B7; font-weight: 800; margin-bottom: 10px;">02</div>
+            <h4>Process</h4>
+            <p style="color: #aaa;">The system parses, embeds, and indexes your content automatically.</p>
+        </div>
+    """, unsafe_allow_html=True)
 
 with step3:
-    st.markdown("#### 3. Chat with Data")
-    st.success("Switch to the **Chat** page and ask questions about your knowledge base.")
+    st.markdown("""
+        <div class="custom-card" style="text-align: center; border: 1px solid rgba(247, 37, 133, 0.2);">
+            <div style="font-size: 2rem; color: #F72585; font-weight: 800; margin-bottom: 10px;">03</div>
+            <h4>Chat</h4>
+            <p style="color: #aaa;">Ask anything. Get instant answers grounded in your data.</p>
+        </div>
+    """, unsafe_allow_html=True)
 
 st.divider()
 
 # Tech Stack Footer
 with st.expander("🛠️ Under the Hood"):
     st.markdown("""
-    This project is built with a modern, robust tech stack:
-    - **Backend**: FastAPI (Python)
-    - **Frontend**: Streamlit
-    - **LLM**: Google Gemini 2.5 Flash Lite
-    - **Embeddings**: HuggingFace (`sentence-transformers`)
-    - **Vector Store**: ChromaDB (local)
-    - **State Management**: SQLite
-    - **Parsing**: Docling
-    """)
-
-st.markdown("---")
-st.caption("Built with ❤️ by Logan | version 2.0.0")
+    <ul style="list-style-type: none; padding: 0; margin: 0;">
+        <li style="margin-bottom: 10px; padding: 10px; background: rgba(255,255,255,0.05); border-radius: 8px; display: flex; align-items: center;">
+            <span style="font-size: 1.2rem; margin-right: 15px;">🐍</span>
+            <div>
+                <strong style="color: #4361EE;">Backend:</strong> FastAPI (Python)
+            </div>
+        </li>
+        <li style="margin-bottom: 10px; padding: 10px; background: rgba(255,255,255,0.05); border-radius: 8px; display: flex; align-items: center;">
+            <span style="font-size: 1.2rem; margin-right: 15px;">🎨</span>
+            <div>
+                <strong style="color: #F72585;">Frontend:</strong> Streamlit
+            </div>
+        </li>
+        <li style="margin-bottom: 10px; padding: 10px; background: rgba(255,255,255,0.05); border-radius: 8px; display: flex; align-items: center;">
+            <span style="font-size: 1.2rem; margin-right: 15px;">🧠</span>
+            <div>
+                <strong style="color: #4CC9F0;">AI Model:</strong> Google Gemini 2.5 Flash
+            </div>
+        </li>
+        <li style="margin-bottom: 10px; padding: 10px; background: rgba(255,255,255,0.05); border-radius: 8px; display: flex; align-items: center;">
+            <span style="font-size: 1.2rem; margin-right: 15px;">🗄️</span>
+            <div>
+                <strong style="color: #7209B7;">Vector DB:</strong> ChromaDB (Local)
+            </div>
+        </li>
+        <li style="margin-bottom: 10px; padding: 10px; background: rgba(255,255,255,0.05); border-radius: 8px; display: flex; align-items: center;">
+            <span style="font-size: 1.2rem; margin-right: 15px;">📄</span>
+            <div>
+                <strong style="color: #FF9E00;">Parser:</strong> Docling
+            </div>
+        </li>
+    </ul>
+    """, unsafe_allow_html=True)
+
+st.markdown("<div style='text-align: center; margin-top: 50px; color: #666;'>Built with ❤️ by Logan | version 2.1.0</div>", unsafe_allow_html=True)

ui/pages/Chat.py

@@ -2,31 +2,40 @@ import streamlit as st
 import requests
 import os
 import json
+import sys
 from dotenv import load_dotenv
+
+# Add parent directory to path to import utils
+sys.path.append(os.path.abspath(os.path.join(os.path.dirname(__file__), '..')))
+from utils import load_css
+
 load_dotenv()
 
 API_URL = os.getenv("API_URL", "http://localhost:8000/")
 
+st.set_page_config(page_title="Chat App", page_icon="💬", layout="wide")
+load_css()
 
-st.set_page_config(page_title="Chat App", page_icon="💬")
 col_title, col_btn = st.columns([0.8, 0.2])
 with col_title:
-    st.title("💬 Chat Interface")
+    st.markdown('<h1 class="gradient-text">💬 Chat Interface</h1>', unsafe_allow_html=True)
 with col_btn:
-    if st.button("Clear Chat History"):
+    if st.button("Clear History", type="primary"):
         st.session_state.messages = []
         st.rerun()
 
 if "messages" not in st.session_state:
     st.session_state.messages = []
 
+# Chat container
+chat_container = st.container()
 
-for message in st.session_state.messages:
-    with st.chat_message(message["role"]):
-        st.markdown(message["content"])
-
+with chat_container:
+    for message in st.session_state.messages:
+        with st.chat_message(message["role"]):
+            st.markdown(message["content"])
 
-if prompt := st.chat_input("Type your message..."):
+if prompt := st.chat_input("Ask a question about your documents..."):
     st.session_state.messages.append(
         {"role": "user", "content": prompt}
     )

ui/pages/Documents.py

@@ -1,15 +1,21 @@
 import streamlit as st
 import requests
 import os
-import pandas as pd
+import sys
 from dotenv import load_dotenv
 
+# Add parent directory to path to import utils
+sys.path.append(os.path.abspath(os.path.join(os.path.dirname(__file__), '..')))
+from utils import load_css
+
 load_dotenv()
 
 API_URL = os.getenv("API_URL", "http://localhost:8000/")
 
-st.set_page_config(page_title="Documents", page_icon="📄")
-st.title("📄 Document Management")
+st.set_page_config(page_title="Documents", page_icon="📄", layout="wide")
+load_css()
+
+st.markdown('<h1 class="gradient-text">📄 Document Management</h1>', unsafe_allow_html=True)
 
 def fetch_documents():
     try:
@@ -37,15 +43,22 @@ def delete_document(name):
         return None
     return res
 
+# Upload Section
 st.subheader("📤 Upload Document")
+st.markdown("""
+    <div style="background: rgba(255, 255, 255, 0.05); padding: 20px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, 0.2); margin-bottom: 20px;">
+        <p style="margin: 0; color: #aaa;">Supported formats: PDF, DOCX, TXT</p>
+    </div>
+""", unsafe_allow_html=True)
 
 uploaded_file = st.file_uploader(
     "Choose a file",
-    type=["pdf", "docx", "txt"]
+    type=["pdf", "docx", "txt"],
+    label_visibility="collapsed"
 )
 
 if uploaded_file:
-    if st.button("Upload and Ingest"):
+    if st.button("Upload and Ingest", type="primary"):
         with st.spinner("Uploading and ingesting document..."):
             res = upload_document(uploaded_file)
 
@@ -58,12 +71,16 @@ if uploaded_file:
 
 st.divider()
 
+# Documents List
 st.subheader("📄 Available Documents")
 
-search_query = st.text_input(   
-    "",
-    placeholder="🔍 Search documents"
-)
+search_col, _ = st.columns([1, 1])
+with search_col:
+    search_query = st.text_input(   
+        "",
+        placeholder="🔍 Search documents...",
+        label_visibility="collapsed"
+    )
 
 with st.spinner("Fetching documents..."):
     documents = fetch_documents()
@@ -73,41 +90,45 @@ if search_query:
         doc for doc in documents
         if search_query.lower() in doc[0].lower()
     ]
+
 if not documents:
     st.info("No documents available.")
 else:
-    # Table header
-    header_cols = st.columns([3, 2, 2, 1])
-    header_cols[0].markdown("**Filename**")
-    header_cols[1].markdown("**Status**")
-    header_cols[2].markdown("**Uploaded At**")
-    header_cols[3].markdown("**Actions**")
-
-    st.divider()
+    # Header
+    st.markdown("""
+        <div style="display: flex; font-weight: bold; color: #e0e0e0; padding: 10px 0; border-bottom: 2px solid rgba(67, 97, 238, 0.5); background: rgba(0,0,0,0.2); margin-bottom: 10px;">
+            <div style="flex: 3; padding-left: 10px;">Filename</div>
+            <div style="flex: 2;">Status</div>
+            <div style="flex: 2;">Uploaded At</div>
+            <div style="flex: 1; text-align: right; padding-right: 10px;">Actions</div>
+        </div>
+    """, unsafe_allow_html=True)
 
     for idx, doc in enumerate(documents):
         filename, status, timestamp, path = doc
-
-        cols = st.columns([3, 2, 2, 1])
-        status_color = "green" if status == "ingested" else "orange"
+        
+        status_class = "status-ingested" if status == "ingested" else "status-pending"
         status_display = f"✅ {status.capitalize()}" if status == "ingested" else f"⏳ {status.capitalize()}"
-        status_markdown = f"<span style='color:{status_color}'>{status_display}</span>"
-        cols[0].write(filename)
-        cols[1].markdown(status_markdown, unsafe_allow_html=True)
-        cols[2].write(timestamp)
-
-        if cols[3].button(
-            "Delete",
-            key=f"delete_{idx}",
-            type="secondary"
-        ):
-            with st.spinner("Deleting document..."):
-                res = delete_document(path)
-
-                if res is None:
-                    pass
-                elif res.status_code == 200:
-                    st.success(f"✅ Deleted `{filename}`")
-                    st.rerun()
-                else:
-                    st.error("❌ Failed to delete document")
+
+        col1, col2, col3, col4 = st.columns([3, 2, 2, 1])
+        
+        with col1:
+            st.markdown(f"<div style='padding-top: 5px; padding-left: 10px;'>{filename}</div>", unsafe_allow_html=True)
+        
+        with col2:
+            st.markdown(f"<span class='status-badge {status_class}'>{status_display}</span>", unsafe_allow_html=True)
+            
+        with col3:
+            st.markdown(f"<div style='padding-top: 5px; color: #aaa;'>{timestamp}</div>", unsafe_allow_html=True)
+            
+        with col4:
+            if st.button("🗑️", key=f"delete_{idx}", help="Delete Document"):
+                with st.spinner("Deleting..."):
+                    res = delete_document(path)
+                    if res and res.status_code == 200:
+                        st.success(f"Deleted {filename}")
+                        st.rerun()
+                    else:
+                        st.error("Failed to delete")
+        
+        st.markdown("<hr style='margin: 5px 0; border-color: rgba(255,255,255,0.05);'>", unsafe_allow_html=True)

ui/style.css

@@ -0,0 +1,228 @@
+/* Global Styles */
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
+
+html, body, [class*="css"] {
+    font-family: 'Outfit', sans-serif;
+    color: #e0e0e0;
+}
+
+/* Glassmorphism Background with subtle animation */
+.stApp {
+    background: radial-gradient(circle at 10% 20%, rgb(18, 22, 28) 0%, rgb(10, 10, 14) 90.2%);
+    background-attachment: fixed;
+}
+
+/* Custom Card - Enhanced */
+.custom-card {
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border-radius: 16px;
+    padding: 24px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    margin-bottom: 24px;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+.custom-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.custom-card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.custom-card:hover::before {
+    opacity: 1;
+}
+
+.card-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin-bottom: 12px;
+    letter-spacing: -0.5px;
+    background: linear-gradient(90deg, #fff, #bbb);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.card-text {
+    color: #b0b0b0;
+    font-size: 0.95rem;
+    line-height: 1.6;
+}
+
+/* Gradient text utility */
+.gradient-text {
+    background: linear-gradient(90deg, #4CC9F0 0%, #4361EE 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 800;
+}
+
+/* Buttons - Modern Gradient */
+div.stButton > button {
+    background: linear-gradient(135deg, #4361EE 0%, #3F37C9 100%);
+    color: white;
+    border: none;
+    border-radius: 10px;
+    padding: 0.6rem 1.2rem;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
+}
+
+div.stButton > button[kind="secondary"] {
+    background: rgba(255,255,255,0.05);
+    border: 1px solid rgba(255,255,255,0.1);
+    box-shadow: none;
+}
+
+div.stButton > button:hover {
+    background: linear-gradient(135deg, #4895EF 0%, #4361EE 100%);
+    box-shadow: 0 6px 20px rgba(67, 97, 238, 0.5);
+    transform: translateY(-2px);
+    color: white;
+}
+
+div.stButton > button:active {
+    transform: scale(0.98);
+}
+
+/* Inputs - Sleek Dark */
+.stTextInput > div > div > input {
+    background-color: rgba(0, 0, 0, 0.2);
+    color: #e0e0e0;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+    padding: 10px 12px;
+}
+
+.stTextInput > div > div > input:focus {
+    border-color: #4361EE;
+    box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
+}
+
+/* Chat Messages */
+.stChatMessage {
+    background-color: transparent;
+}
+
+.stChatMessage[data-testid="stChatMessageAvatarUser"] {
+    background-color: #2b2d42; /* Dark user avatar bg */
+    border: 1px solid rgba(255,255,255,0.1);
+}
+
+.stChatMessage[data-testid="stChatMessageAvatarAssistant"] {
+    background: linear-gradient(135deg, #4361EE, #F72585); /* Vibrant gradient */
+}
+
+div[data-testid="stChatMessageContent"] {
+    background: rgba(255, 255, 255, 0.04);
+    border-radius: 16px;
+    padding: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+/* Headings */
+h1, h2, h3 {
+    color: #ffffff !important;
+    font-weight: 700 !important;
+    letter-spacing: -0.5px;
+}
+
+/* Sidebar */
+section[data-testid="stSidebar"] {
+    background: rgba(18, 22, 28, 0.95);
+    border-right: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+section[data-testid="stSidebar"] [data-testid="stVerticalBlock"] {
+    gap: 0.5rem;
+}
+
+.st-emotion-cache-16txtl3 { /* Sidebar nav links container - this class might change, targeting via attribute if possible */
+    padding-top: 2rem;
+}
+
+/* Sidebar Nav Links */
+.stPageLink a {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    margin-bottom: 5px;
+    transition: all 0.2s ease;
+}
+
+.stPageLink a:hover {
+    background: rgba(67, 97, 238, 0.2);
+    border-color: rgba(67, 97, 238, 0.5);
+    transform: translateX(5px);
+}
+
+.stPageLink p {
+    font-weight: 600;
+}
+
+/* Divider with Gradient */
+hr {
+    border: 0;
+    height: 1px;
+    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
+    margin: 30px 0;
+}
+
+/* Status Badges - Pill shape */
+.status-badge {
+    padding: 6px 12px;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+    display: inline-block;
+}
+
+.status-ingested {
+    background: rgba(4, 212, 137, 0.15); /* Vivid green tint */
+    color: #2ecc71;
+    border: 1px solid rgba(4, 212, 137, 0.3);
+}
+
+.status-pending {
+    background: rgba(255, 179, 11, 0.15); /* Amber tint */
+    color: #f1c40f;
+    border: 1px solid rgba(255, 179, 11, 0.3);
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #121212; 
+}
+::-webkit-scrollbar-thumb {
+    background: #444; 
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #666; 
+}

ui/utils.py

@@ -0,0 +1,10 @@
+import streamlit as st
+import os
+
+def load_css(file_name="style.css"):
+    """
+    Loads a CSS file from the same directory as this script.
+    """
+    css_file_path = os.path.join(os.path.dirname(__file__), file_name)
+    with open(css_file_path) as f:
+        st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)