Apply Prism design system — brass/ink palette, EB Garamond + IBM Plex typography

Implements the design kit: champagne brass accent (#C2AA7A), deep midnight
backgrounds, EB Garamond italic headings, IBM Plex Sans/Mono body and numbers,
terminal-density KPI cards, restyled sidebar brand mark, flat pill tabs, and a
global Plotly theme so all charts inherit the dark palette automatically.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 28 insertions, 14 deletions

diff --git a/components/top_movers.py b/components/top_movers.py
index 5589df6..db95592 100644
--- a/components/top_movers.py
+++ b/components/top_movers.py
@@ -28,30 +28,39 @@ def _inject_styles():
             padding: 0.18rem 0;
           }
           .prism-mover-symbol {
-            font-size: 1rem;
-            font-weight: 700;
+            font-family: 'IBM Plex Sans', sans-serif;
+            font-size: 0.875rem;
+            font-weight: 600;
+            color: #F2ECDC;
             line-height: 1.1;
           }
           .prism-mover-name {
-            color: #9aa0b0;
-            font-size: 0.84rem;
+            font-family: 'IBM Plex Sans', sans-serif;
+            color: #8E8676;
+            font-size: 0.8125rem;
             line-height: 1.15;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
           }
           .prism-mover-price {
-            font-size: 0.98rem;
+            font-family: 'IBM Plex Mono', monospace;
+            font-variant-numeric: tabular-nums;
+            font-size: 0.8125rem;
+            color: #C7C0AE;
             line-height: 1.1;
           }
           .prism-mover-change {
-            font-size: 0.98rem;
-            font-weight: 600;
+            font-family: 'IBM Plex Mono', monospace;
+            font-variant-numeric: tabular-nums;
+            font-size: 0.8125rem;
+            font-weight: 500;
             line-height: 1.1;
           }
           .prism-mover-change-meta {
-            font-size: 0.74rem;
-            color: #9aa0b0;
+            font-family: 'IBM Plex Mono', monospace;
+            font-size: 11px;
+            color: #5E5849;
             margin-left: 0.2rem;
           }
           @media (max-width: 900px) {
@@ -91,7 +100,7 @@ def _mover_row_html(q: dict) -> str:
 
     try:
         chg_f = float(chg_pct)
-        color = "#2ecc71" if chg_f >= 0 else "#e74c3c"
+        color = "#4F8C5E" if chg_f >= 0 else "#B5494B"
         sign = "+" if chg_f >= 0 else ""
         pct_str = f"{sign}{chg_f:.2f}%"
     except Exception:
@@ -143,11 +152,16 @@ def _render_mover_tab(screen: str, state_key: str):
 @st.fragment
 def render_top_movers():
     _inject_styles()
-    st.markdown("#### 🔥 Top Movers")
+    st.markdown("""
+    <div style="
+      font-family:'IBM Plex Sans',sans-serif;
+      font-size:10px;font-weight:600;
+      text-transform:uppercase;letter-spacing:0.14em;
+      color:#5E5849;margin-bottom:8px;
+    ">Top Movers</div>
+    """, unsafe_allow_html=True)
 
-    tab_gainers, tab_losers, tab_active = st.tabs([
-        "📈 Gainers", "📉 Losers", "⚡ Most Active"
-    ])
+    tab_gainers, tab_losers, tab_active = st.tabs(["Gainers", "Losers", "Most Active"])
 
     screens = {
         "gainers": "day_gainers",