Adopt shared dark-mode theme; promote Llama 3.3 70B as default free model

Visual port to bring the Space in line with the desktop app and
catllm.com:
- New theme.py mirrors app/components/css.py from the desktop bundle:
IBM Plex Sans / DM Sans / DM Mono on a dark surface with teal and
orange accents.
- Wordmark now shows the cropped cat-shield + IBM Plex Sans "CatLLM"
with a mono subtitle, replacing the EB Garamond block.
- The 200-line inline CSS in app.py collapses to a single
inject_css() call.
- Reorder FREE_MODELS_MAP so Llama 3.3 70B (HF-routed via Groq, free
for the Space at low volume) is the default selection, with GPT-4o
Mini and friends still available.
- Add a .gitignore so .env and __pycache__/ never reach the Space.

.gitignore

@@ -0,0 +1,10 @@
+# Local secrets — never push to the Space
+.env
+
+# Python bytecode
+__pycache__/
+*.pyc
+
+# Local test artifacts
+*.log
+.DS_Store

app.py

@@ -12,6 +12,9 @@ import sys
 from datetime import datetime
 import matplotlib.pyplot as plt
 
+# Brand theme — shared with the desktop app and catllm.com.
+from theme import inject_css, render_wordmark
+
 # Import catllm
 try:
     import catllm
@@ -92,15 +95,18 @@ def extract_pdf_pages(pdf_paths, pdf_name_map, mode="image"):
 
     return pages
 
-# Free models - display name -> actual API model name
+# Free models - display name -> actual API model name.
+# Ordered so the cheapest-for-the-Space option lands first (Streamlit
+# selectboxes default to index 0). Llama 3.3 70B is routed through HF's
+# Inference API via Groq and is effectively free at low volume.
 FREE_MODELS_MAP = {
+    "Llama 3.3 70B": "meta-llama/Llama-3.3-70B-Instruct:groq",
+    "Mistral Medium": "mistral-medium-2505",
     "GPT-4o Mini": "gpt-4o-mini",
     "Gemini 2.5 Flash": "gemini-2.5-flash",
     "Claude 3 Haiku": "claude-3-haiku-20240307",
-    "Llama 3.3 70B": "meta-llama/Llama-3.3-70B-Instruct:groq",
     "Qwen 2.5": "Qwen/Qwen2.5-72B-Instruct",
     "DeepSeek R1": "deepseek-ai/DeepSeek-R1:novita",
-    "Mistral Medium": "mistral-medium-2505",
     "Grok 4 Fast": "grok-4-fast-non-reasoning",
 }
 FREE_MODEL_DISPLAY_NAMES = list(FREE_MODELS_MAP.keys())
@@ -1096,209 +1102,9 @@ st.set_page_config(
     layout="wide"
 )
 
-# Custom CSS for enhanced styling
-st.markdown("""
-<style>
-/* Import Garamond font and apply globally */
-@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&display=swap');
-
-*:not([class*="icon"]):not([data-testid="stIconMaterial"]):not(svg):not(path) {
-    font-family: 'EB Garamond', Garamond, Georgia, serif !important;
-    font-size: 17px !important;
-}
-
-/* Preserve Streamlit icon fonts */
-[data-testid="stIconMaterial"], .material-icons, .material-symbols-rounded {
-    font-family: 'Material Symbols Rounded', 'Material Icons' !important;
-    font-size: 24px !important;
-}
-
-/* Main container styling */
-.main .block-container {
-    padding-top: 2rem;
-    padding-bottom: 2rem;
-}
-
-/* Headers with gradient accent */
-h1 {
-    background: linear-gradient(90deg, #E8A33C 0%, #D4872C 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    font-weight: 700;
-}
-
-/* Card-like sections */
-.stExpander {
-    border: 1px solid #E8D5B5;
-    border-radius: 12px;
-    box-shadow: 0 2px 8px rgba(232, 163, 60, 0.08);
-}
-
-/* File uploader styling */
-.stFileUploader {
-    border-radius: 12px;
-}
-
-.stFileUploader > div > div {
-    border: 2px dashed #E8A33C;
-    border-radius: 12px;
-    background: linear-gradient(135deg, #FEFCF9 0%, #F5EFE6 100%);
-}
-
-/* Button styling */
-.stButton > button {
-    border-radius: 8px;
-    font-weight: 600;
-    transition: all 0.2s ease;
-    border: 2px solid #E8A33C;
-    background: #FEFCF9;
-    color: #D4872C;
-}
-
-/* Tall button for example dataset (matches file uploader height) */
-.tall-button .stButton > button {
-    min-height: 107px;
-    border-radius: 12px;
-}
-
-.stButton > button:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(232, 163, 60, 0.3);
-    background: #F5EFE6;
-}
-
-/* Primary button */
-.stButton > button[kind="primary"] {
-    background: linear-gradient(135deg, #E8A33C 0%, #D4872C 100%);
-    border: none;
-    color: white;
-}
-
-/* Success/info messages */
-.stSuccess {
-    background-color: #E8F5E9;
-    border-left: 4px solid #4CAF50;
-    border-radius: 0 8px 8px 0;
-}
-
-.stInfo {
-    background-color: #FFF8E8;
-    border-left: 4px solid #E8A33C;
-    border-radius: 0 8px 8px 0;
-}
-
-/* Radio buttons */
-.stRadio > div {
-    gap: 0.5rem;
-    display: flex;
-    width: 100%;
-}
-
-.stRadio > div > label {
-    background: #F5EFE6;
-    padding: 0.5rem 1rem;
-    border-radius: 20px;
-    border: 1px solid transparent;
-    transition: all 0.2s ease;
-    flex: 1;
-    text-align: center;
-    justify-content: center;
-}
-
-.stRadio > div > label:hover {
-    border-color: #E8A33C;
-}
-
-/* Text inputs */
-.stTextInput > div > div > input {
-    border-radius: 8px;
-    border: 1px solid #E8D5B5;
-}
-
-.stTextInput > div > div > input:focus {
-    border-color: #E8A33C;
-    box-shadow: 0 0 0 2px rgba(232, 163, 60, 0.2);
-}
-
-/* Select boxes */
-.stSelectbox > div > div {
-    border-radius: 8px;
-}
-
-/* Dataframe styling */
-.stDataFrame {
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
-
-/* Progress bar */
-.stProgress > div > div {
-    background: linear-gradient(90deg, #E8A33C 0%, #D4872C 100%);
-    border-radius: 10px;
-}
-
-/* Slider */
-.stSlider > div > div > div {
-    background: #E8A33C;
-}
-
-/* Divider */
-hr {
-    border: none;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, #E8D5B5, transparent);
-    margin: 1.5rem 0;
-}
-
-/* Code blocks */
-.stCodeBlock {
-    border-radius: 12px;
-    border: 1px solid #E8D5B5;
-}
-
-/* Metric cards */
-.stMetric {
-    background: linear-gradient(135deg, #FEFCF9 0%, #F5EFE6 100%);
-    padding: 1rem;
-    border-radius: 12px;
-    border: 1px solid #E8D5B5;
-}
-
-/* Download buttons */
-.stDownloadButton > button {
-    background: #F5EFE6;
-    border: 1px solid #E8A33C;
-    color: #D4872C;
-}
-
-.stDownloadButton > button:hover {
-    background: #E8A33C;
-    color: white;
-}
-
-/* Multiselect */
-.stMultiSelect > div > div {
-    border-radius: 8px;
-}
-
-/* Status indicator */
-.stStatus {
-    border-radius: 12px;
-}
-
-/* Column gaps */
-[data-testid="column"] {
-    padding: 0 0.5rem;
-}
-
-/* Logo and title alignment */
-[data-testid="column"]:first-child img {
-    border-radius: 8px;
-}
-</style>
-""", unsafe_allow_html=True)
+# Brand theme — IBM Plex Sans / DM Sans / DM Mono, dark mode.
+# Same theme as the desktop app and catllm.com (theme.py).
+inject_css()
 
 # Initialize session state
 if 'categories' not in st.session_state:
@@ -1322,18 +1128,8 @@ if 'image_data' not in st.session_state:
 if 'extraction_params' not in st.session_state:
     st.session_state.extraction_params = None  # Stores params when categories are auto-extracted
 
-# Logo and title - use HTML for better alignment
-st.markdown("""
-<div style="display: flex; align-items: center; gap: 20px; margin-bottom: 10px;">
-    <img src="https://huggingface.co/spaces/CatLLM/survey-classifier/resolve/main/logo.png" width="100" style="border-radius: 8px;">
-    <div>
-        <div style="font-size: 2.2rem; font-weight: 700; color: #333; font-family: 'EB Garamond', Garamond, Georgia, serif; line-height: 1.1;">CatLLM</div>
-        <div style="font-size: 1.1rem; font-weight: 500; color: #E8A33C; font-family: 'EB Garamond', Garamond, Georgia, serif; margin-bottom: 4px;">NLP for Survey Research</div>
-        <div style="font-size: 1rem; font-weight: 400; color: #666; font-family: 'EB Garamond', Garamond, Georgia, serif;">Research-grade categorization of survey responses, PDFs, and images using AI models.</div>
-        <div style="font-size: 0.85rem; font-weight: 400; color: #888; font-family: 'EB Garamond', Garamond, Georgia, serif; margin-top: 4px;">Developed at UC Berkeley</div>
-    </div>
-</div>
-""", unsafe_allow_html=True)
+# Wordmark: cat-shield mark + IBM Plex Sans "CatLLM" + mono subtitle.
+render_wordmark("NLP for survey research · UC Berkeley")
 
 # About section
 with st.expander("About This App"):

theme.py

@@ -0,0 +1,683 @@
+"""
+CatLLM brand CSS theme for the HuggingFace Space.
+
+Mirrors the catllm.com site palette and the desktop app: dark mode with
+teal (primary) and orange (secondary) accents, paired with IBM Plex Sans
+(display), DM Sans (body), and DM Mono (codes & metadata).
+
+Kept in sync with app/components/css.py — copy that file over when the
+desktop theme changes.
+"""
+
+import base64
+import os
+
+import streamlit as st
+
+
+def inject_css():
+    """Inject the CatLLM CSS theme into the page."""
+    st.markdown(CSS, unsafe_allow_html=True)
+
+
+def _load_logo_uri(filename: str = "logo_mark.png") -> str:
+    """Return a base64 data URI for the cat-shield mark, or empty string."""
+    path = os.path.join(os.path.dirname(__file__), filename)
+    try:
+        with open(path, "rb") as f:
+            return "data:image/png;base64," + base64.b64encode(f.read()).decode("ascii")
+    except FileNotFoundError:
+        return ""
+
+
+LOGO_MARK_URI = _load_logo_uri()
+
+
+def render_wordmark(subtitle: str = "Research-grade text classification with LLMs"):
+    """Render the CatLLM cat-shield + IBM Plex Sans wordmark + a short subtitle."""
+    st.markdown(
+        f"""
+        <div style="display:flex; align-items:center; gap:0.75rem; margin: 0 0 0.5rem 0; padding-bottom:0.75rem; border-bottom:1px solid rgba(232,237,245,0.10);">
+          <img src="{LOGO_MARK_URI}" alt="" style="height:54px; width:auto; display:block; flex-shrink:0; transform:translateY(-4px);">
+          <div style="display:flex; flex-direction:column; gap:0.15rem;">
+            <span style="font-family:'IBM Plex Sans',sans-serif; font-size:2.1rem; line-height:1; font-weight:600; letter-spacing:-0.025em; color:#E8EDF5;">CatLLM</span>
+            <span style="font-family:'DM Mono',monospace; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:#8A95A8;">{subtitle}</span>
+          </div>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
+CSS = """
+<style>
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');
+
+:root {
+  --bg:          #1A1A1A;
+  --bg-2:        #1F1F1F;
+  --bg-3:        #262626;
+  --bg-4:        #2E2E2E;
+  --teal:        #00DCC3;
+  --teal-dim:    #00A89A;
+  --teal-glow:   rgba(0, 220, 195, 0.12);
+  --teal-glow2:  rgba(0, 220, 195, 0.04);
+  --orange:      #FF8C3C;
+  --orange-dim:  #D87024;
+  --orange-glow: rgba(255, 140, 60, 0.12);
+  --text:        #E8EDF5;
+  --text-2:      #8A95A8;
+  --text-3:      #4E5A6D;
+  --hairline:    rgba(232, 237, 245, 0.10);
+  --hairline-strong: rgba(232, 237, 245, 0.22);
+  --shadow:      rgba(0, 0, 0, 0.45);
+}
+
+/* ===================================================================
+   Global typography — DM Sans body, IBM Plex Sans display, DM Mono code.
+   =================================================================== */
+*:not([class*="icon"]):not([data-testid="stIconMaterial"]):not(svg):not(path):not(.material-icons):not(.material-symbols-rounded) {
+    font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
+    font-size: 15px;
+    color: var(--text);
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+}
+
+[data-testid="stIconMaterial"], .material-icons, .material-symbols-rounded {
+    font-family: 'Material Symbols Rounded', 'Material Icons' !important;
+    font-size: 22px !important;
+}
+
+h1, h2, h3, h4, .clm-display {
+    font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.02em;
+    color: var(--text) !important;
+    background: none !important;
+    -webkit-text-fill-color: var(--text) !important;
+}
+
+h1 { font-size: 2.5rem !important; line-height: 1.05 !important; }
+h2 { font-size: 1.85rem !important; line-height: 1.1; }
+h3 { font-size: 1.25rem !important; line-height: 1.2; font-weight: 500 !important; }
+h4 { font-size: 1.05rem !important; line-height: 1.25; font-weight: 500 !important; }
+
+em, i, .italic {
+    font-style: italic;
+    color: var(--text-2);
+}
+
+code, kbd, pre, .mono, .clm-mono,
+.stCodeBlock, .stCode, [class*="language-"] {
+    font-family: 'DM Mono', ui-monospace, 'JetBrains Mono', monospace !important;
+    font-size: 0.85em;
+}
+
+/* ===================================================================
+   Page background — deep ink with subtle teal/orange auras.
+   =================================================================== */
+html, body,
+[data-testid="stAppViewContainer"],
+[data-testid="stMain"],
+.main {
+    background-color: var(--bg) !important;
+    background-image:
+        radial-gradient(ellipse at top left,    rgba(0, 220, 195, 0.06) 0%, transparent 55%),
+        radial-gradient(ellipse at bottom right, rgba(255, 140, 60, 0.05) 0%, transparent 55%) !important;
+    background-attachment: fixed, fixed !important;
+    color: var(--text) !important;
+}
+
+[data-testid="stHeader"] {
+    background: rgba(26, 26, 26, 0.75) !important;
+    backdrop-filter: blur(8px);
+    border-bottom: 1px solid var(--hairline) !important;
+}
+
+.main .block-container {
+    padding-top: 2.5rem;
+    padding-bottom: 4rem;
+    max-width: 1180px;
+}
+
+/* ===================================================================
+   Buttons — soft surface tile, teal halo on hover.
+   =================================================================== */
+.stButton > button,
+.stDownloadButton > button,
+.stFormSubmitButton > button {
+    border-radius: 8px !important;
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 0.92rem !important;
+    font-weight: 500 !important;
+    letter-spacing: 0 !important;
+    text-transform: none !important;
+    border: 1px solid var(--hairline-strong) !important;
+    background: var(--bg-3) !important;
+    color: var(--text) !important;
+    padding: 0.65rem 1.2rem !important;
+    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease !important;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 1px 2px var(--shadow) !important;
+    white-space: normal !important;
+    line-height: 1.3 !important;
+}
+
+.stButton > button:hover,
+.stDownloadButton > button:hover,
+.stFormSubmitButton > button:hover {
+    border-color: var(--teal-dim) !important;
+    background: var(--bg-4) !important;
+    color: var(--teal) !important;
+    box-shadow: 0 0 0 1px var(--teal-glow), 0 8px 24px var(--teal-glow2), 0 1px 0 rgba(255,255,255,0.04) inset !important;
+}
+
+.stButton > button:active,
+.stDownloadButton > button:active,
+.stFormSubmitButton > button:active {
+    transform: translateY(1px) !important;
+}
+
+.stButton > button[kind="primary"],
+.stFormSubmitButton > button[kind="primary"] {
+    background: var(--teal) !important;
+    border-color: var(--teal) !important;
+    color: var(--bg) !important;
+    font-weight: 600 !important;
+    box-shadow: 0 0 0 1px var(--teal-glow), 0 6px 18px var(--teal-glow) !important;
+}
+
+.stButton > button[kind="primary"]:hover,
+.stFormSubmitButton > button[kind="primary"]:hover {
+    background: var(--teal-dim) !important;
+    border-color: var(--teal-dim) !important;
+    color: var(--bg) !important;
+}
+
+.tall-button .stButton > button {
+    min-height: 107px;
+    border-radius: 8px !important;
+    font-size: 0.9rem !important;
+}
+
+/* ===================================================================
+   File uploader.
+   =================================================================== */
+.stFileUploader {
+    margin-top: 1.25rem !important;
+}
+
+.stFileUploader > div > div,
+[data-testid="stFileUploaderDropzone"] {
+    border: 1px dashed var(--hairline-strong) !important;
+    border-radius: 10px !important;
+    background: var(--bg-2) !important;
+    transition: border-color 160ms ease, background 160ms ease !important;
+}
+
+[data-testid="stFileUploaderDropzone"]:hover {
+    border-color: var(--teal-dim) !important;
+    background: var(--bg-3) !important;
+}
+
+[data-testid="stFileUploaderDropzone"] small,
+[data-testid="stFileUploaderDropzone"] span {
+    color: var(--text-2) !important;
+}
+
+/* "Browse files" button inside the dropzone — overrides Streamlit's
+   default light secondary-button styling. */
+[data-testid="stFileUploaderDropzone"] button,
+.stFileUploader button {
+    background: var(--bg-3) !important;
+    color: var(--text) !important;
+    border: 1px solid var(--hairline-strong) !important;
+    border-radius: 6px !important;
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 0.85rem !important;
+    font-weight: 500 !important;
+    padding: 0.45rem 1rem !important;
+    box-shadow: none !important;
+    transition: background 140ms ease, border-color 140ms ease, color 140ms ease !important;
+}
+
+[data-testid="stFileUploaderDropzone"] button:hover,
+.stFileUploader button:hover {
+    background: var(--bg-4) !important;
+    border-color: var(--teal-dim) !important;
+    color: var(--teal) !important;
+}
+
+/* Dropzone cloud icon */
+[data-testid="stFileUploaderDropzone"] svg {
+    fill: var(--text-2) !important;
+    color: var(--text-2) !important;
+}
+
+/* ===================================================================
+   Inputs.
+   =================================================================== */
+.stTextInput > div > div > input,
+.stTextArea textarea,
+.stNumberInput input,
+.stChatInput textarea {
+    border-radius: 8px !important;
+    border: 1px solid var(--hairline-strong) !important;
+    background: var(--bg-2) !important;
+    color: var(--text) !important;
+    font-family: 'DM Sans', sans-serif !important;
+    padding: 0.55rem 0.85rem !important;
+    transition: border-color 140ms ease, box-shadow 140ms ease !important;
+}
+
+.stTextInput > div > div > input:focus,
+.stTextArea textarea:focus,
+.stNumberInput input:focus {
+    border-color: var(--teal) !important;
+    box-shadow: 0 0 0 3px var(--teal-glow) !important;
+    outline: none !important;
+}
+
+.stSelectbox > div > div,
+.stMultiSelect > div > div {
+    border-radius: 8px !important;
+    border: 1px solid var(--hairline-strong) !important;
+    background: var(--bg-2) !important;
+}
+
+.stSelectbox > div > div:hover,
+.stMultiSelect > div > div:hover {
+    border-color: var(--text-3) !important;
+}
+
+[data-baseweb="tag"] {
+    border-radius: 6px !important;
+    background: var(--teal-glow) !important;
+    color: var(--teal) !important;
+    border: 1px solid var(--teal-dim) !important;
+    font-family: 'DM Mono', monospace !important;
+    font-size: 0.78rem !important;
+}
+
+/* Select dropdown menu — BaseWeb popovers used by Streamlit selectbox /
+   multiselect / date-picker. Default Streamlit theme leaves these light. */
+[data-baseweb="popover"],
+[data-baseweb="popover"] > div,
+[data-baseweb="menu"],
+[role="listbox"],
+[data-baseweb="select-dropdown"],
+ul[role="listbox"] {
+    background: var(--bg-3) !important;
+    background-color: var(--bg-3) !important;
+    border: 1px solid var(--hairline-strong) !important;
+    border-radius: 8px !important;
+    color: var(--text) !important;
+    box-shadow: 0 8px 24px var(--shadow) !important;
+}
+
+[data-baseweb="menu"] li,
+[role="option"],
+[role="listbox"] li {
+    background: transparent !important;
+    color: var(--text) !important;
+    font-family: 'DM Sans', sans-serif !important;
+    padding: 0.55rem 0.85rem !important;
+}
+
+[data-baseweb="menu"] li:hover,
+[role="option"]:hover,
+[role="option"][aria-selected="true"],
+[role="listbox"] li:hover {
+    background: var(--bg-4) !important;
+    color: var(--teal) !important;
+}
+
+/* The closed selectbox itself — make sure background stays dark. */
+[data-baseweb="select"] > div,
+[data-baseweb="select"] [data-baseweb="select-control"] {
+    background: var(--bg-2) !important;
+    color: var(--text) !important;
+}
+
+[data-baseweb="select"] input,
+[data-baseweb="select"] [data-baseweb="select-content"] {
+    color: var(--text) !important;
+    background: transparent !important;
+}
+
+/* ===================================================================
+   Radio — pill row.
+   =================================================================== */
+.stRadio > div {
+    gap: 0.5rem;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.stRadio > div > label {
+    background: var(--bg-2);
+    padding: 0.55rem 0.95rem;
+    border-radius: 8px;
+    border: 1px solid var(--hairline-strong);
+    transition: all 150ms ease;
+    flex: 1;
+    min-width: 0;
+    text-align: center;
+    justify-content: center;
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 0.92rem !important;
+    cursor: pointer;
+    color: var(--text-2) !important;
+}
+
+.stRadio > div > label:hover {
+    border-color: var(--teal-dim);
+    color: var(--text) !important;
+}
+
+.stRadio > div > label:has(input:checked) {
+    background: var(--teal-glow) !important;
+    border-color: var(--teal) !important;
+    color: var(--teal) !important;
+}
+.stRadio > div > label:has(input:checked) * {
+    color: var(--teal) !important;
+}
+
+/* ===================================================================
+   Expanders.
+   =================================================================== */
+.stExpander,
+[data-testid="stExpander"] {
+    border: 1px solid var(--hairline-strong) !important;
+    border-radius: 10px !important;
+    background: var(--bg-2) !important;
+    box-shadow: none !important;
+}
+
+.stExpander summary,
+[data-testid="stExpander"] summary {
+    font-family: 'IBM Plex Sans', sans-serif !important;
+    font-weight: 500 !important;
+    font-size: 0.95rem !important;
+    color: var(--text) !important;
+    padding: 0.75rem 1rem !important;
+}
+
+.stExpander summary:hover {
+    color: var(--teal) !important;
+}
+
+/* ===================================================================
+   Messages.
+   =================================================================== */
+.stSuccess {
+    background: rgba(0, 220, 195, 0.08) !important;
+    border: 1px solid var(--teal-dim) !important;
+    border-radius: 8px !important;
+    color: var(--text) !important;
+}
+.stInfo {
+    background: var(--bg-2) !important;
+    border: 1px solid var(--hairline-strong) !important;
+    border-left: 3px solid var(--teal) !important;
+    border-radius: 8px !important;
+    color: var(--text-2) !important;
+}
+.stWarning {
+    background: rgba(255, 140, 60, 0.06) !important;
+    border: 1px solid var(--orange-dim) !important;
+    border-radius: 8px !important;
+    color: var(--text) !important;
+}
+.stError {
+    background: rgba(255, 95, 87, 0.06) !important;
+    border: 1px solid #ff5f57 !important;
+    border-radius: 8px !important;
+    color: var(--text) !important;
+}
+
+/* ===================================================================
+   Metric cards.
+   =================================================================== */
+.stMetric, [data-testid="stMetric"] {
+    background: var(--bg-2) !important;
+    padding: 1rem 1.1rem !important;
+    border-radius: 10px !important;
+    border: 1px solid var(--hairline-strong) !important;
+    box-shadow: none !important;
+}
+
+[data-testid="stMetricLabel"] {
+    font-family: 'DM Mono', monospace !important;
+    font-size: 0.7rem !important;
+    text-transform: uppercase;
+    letter-spacing: 0.12em !important;
+    color: var(--text-3) !important;
+}
+
+[data-testid="stMetricValue"] {
+    font-family: 'IBM Plex Sans', sans-serif !important;
+    font-size: 2rem !important;
+    line-height: 1.05 !important;
+    color: var(--text) !important;
+    font-weight: 600 !important;
+}
+
+[data-testid="stMetricDelta"] {
+    color: var(--teal) !important;
+}
+
+/* ===================================================================
+   Dataframe.
+   =================================================================== */
+.stDataFrame, [data-testid="stDataFrame"] {
+    border-radius: 10px !important;
+    overflow: hidden;
+    border: 1px solid var(--hairline-strong) !important;
+}
+
+.stDataFrame thead th {
+    background: var(--bg-3) !important;
+    color: var(--text-2) !important;
+    font-family: 'DM Mono', monospace !important;
+    text-transform: uppercase;
+    font-size: 0.72rem !important;
+    letter-spacing: 0.08em !important;
+    border-bottom: 1px solid var(--hairline-strong) !important;
+}
+
+.stDataFrame tbody td {
+    background: var(--bg-2) !important;
+    color: var(--text) !important;
+    border-bottom: 1px solid var(--hairline) !important;
+}
+
+/* ===================================================================
+   Progress & slider.
+   =================================================================== */
+.stProgress > div > div {
+    background: var(--teal) !important;
+    border-radius: 4px !important;
+}
+.stProgress > div {
+    background: var(--bg-3) !important;
+    border-radius: 4px !important;
+}
+
+.stSlider [role="slider"] {
+    background: var(--teal) !important;
+    border: 2px solid var(--bg) !important;
+    box-shadow: 0 0 0 1px var(--teal-dim);
+    border-radius: 50% !important;
+}
+.stSlider > div > div > div > div {
+    background: var(--teal) !important;
+}
+
+/* ===================================================================
+   Dividers.
+   =================================================================== */
+hr {
+    border: none !important;
+    height: 1px !important;
+    background: var(--hairline-strong) !important;
+    margin: 1.75rem 0 !important;
+}
+
+/* ===================================================================
+   Code blocks — teal-tinted dark.
+   =================================================================== */
+.stCodeBlock, pre {
+    border-radius: 10px !important;
+    border: 1px solid var(--hairline-strong) !important;
+    background: #0F0F0F !important;
+}
+
+.stCodeBlock code, pre code {
+    color: var(--text) !important;
+    font-family: 'DM Mono', monospace !important;
+    font-size: 0.85rem !important;
+}
+
+/* ===================================================================
+   Tabs.
+   =================================================================== */
+.stTabs [data-baseweb="tab-list"] {
+    border-bottom: 1px solid var(--hairline-strong) !important;
+    gap: 0 !important;
+    background: transparent !important;
+}
+
+.stTabs [data-baseweb="tab"] {
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 0.92rem !important;
+    font-weight: 500 !important;
+    padding: 0.75rem 1.1rem !important;
+    border-radius: 0 !important;
+    color: var(--text-2) !important;
+    background: transparent !important;
+}
+
+.stTabs [aria-selected="true"] {
+    color: var(--teal) !important;
+    background: transparent !important;
+    border-bottom: 2px solid var(--teal) !important;
+}
+
+/* ===================================================================
+   Sidebar.
+   =================================================================== */
+[data-testid="stSidebar"] {
+    background: var(--bg-2) !important;
+    border-right: 1px solid var(--hairline-strong) !important;
+}
+
+/* Collapse Streamlit's generous default top padding in the sidebar so the
+   wordmark sits close to the top edge. */
+[data-testid="stSidebar"] > div,
+[data-testid="stSidebar"] section,
+[data-testid="stSidebar"] [data-testid="stSidebarContent"],
+[data-testid="stSidebar"] [data-testid="stSidebarUserContent"],
+[data-testid="stSidebar"] [data-testid="stSidebarNav"] + div {
+    padding-top: 0.25rem !important;
+}
+
+[data-testid="stSidebar"] [data-testid="stVerticalBlock"]:first-child {
+    margin-top: 0 !important;
+    padding-top: 0 !important;
+    gap: 0.6rem !important;
+}
+
+[data-testid="stSidebar"] [data-testid="stVerticalBlock"]:first-child > div:first-child {
+    margin-top: 0 !important;
+    padding-top: 0 !important;
+}
+
+/* Also collapse the global block-container top padding on the main column
+   so the layout reads tighter overall. */
+[data-testid="stSidebar"] .stMarkdown:first-child,
+[data-testid="stSidebar"] [data-testid="stMarkdownContainer"]:first-child {
+    margin-top: 0 !important;
+}
+
+[data-testid="stSidebar"] h1,
+[data-testid="stSidebar"] h2,
+[data-testid="stSidebar"] h3,
+[data-testid="stSidebar"] [data-testid="stMarkdown"] h2 {
+    font-family: 'IBM Plex Sans', sans-serif !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.02em;
+    font-size: 1.2rem !important;
+    color: var(--text) !important;
+    margin-bottom: 0.5rem !important;
+}
+
+[data-testid="stSidebar"] .stSelectbox label,
+[data-testid="stSidebar"] .stRadio > label,
+[data-testid="stSidebar"] [data-testid="stWidgetLabel"] label {
+    font-family: 'DM Mono', monospace !important;
+    font-size: 0.72rem !important;
+    text-transform: uppercase;
+    letter-spacing: 0.12em !important;
+    color: var(--text-3) !important;
+    font-weight: 400 !important;
+}
+
+/* ===================================================================
+   Links.
+   =================================================================== */
+a, a:visited {
+    color: var(--teal) !important;
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 3px;
+    text-decoration-color: var(--teal-dim);
+    transition: color 140ms ease, text-decoration-color 140ms ease;
+}
+
+a:hover {
+    color: var(--teal) !important;
+    text-decoration-color: var(--teal) !important;
+}
+
+/* ===================================================================
+   Status & toast.
+   =================================================================== */
+.stStatus, [data-testid="stStatusWidget"] {
+    border-radius: 10px !important;
+    border: 1px solid var(--hairline-strong) !important;
+    background: var(--bg-2) !important;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+::-webkit-scrollbar-track {
+    background: var(--bg);
+}
+::-webkit-scrollbar-thumb {
+    background: var(--bg-4);
+    border-radius: 5px;
+    border: 2px solid var(--bg);
+}
+::-webkit-scrollbar-thumb:hover {
+    background: var(--text-3);
+}
+
+footer { visibility: hidden; }
+
+/* ===================================================================
+   Utility classes.
+   =================================================================== */
+.clm-kicker {
+    font-family: 'DM Mono', monospace !important;
+    font-size: 0.72rem !important;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: var(--text-3);
+}
+</style>
+"""