/* preconnect hints injected via JS below for max speed */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700;800&display=swap&font-display=swap');

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
    --ua-bg:         #0B0D12;
    --ua-bg-card:    #12151E;
    --ua-bg-raised:  #1A1E2C;
    --ua-green:      #00D566;
    --ua-cyan:       #00C8E0;
    --ua-purple:     #7C3AED;
    --ua-red:        #FF4444;
    --ua-amber:      #F59E0B;
    --ua-text-hi:    #E7EAF0;
    --ua-text-mid:   #C5CBD5;
    --ua-text-lo:    #A7B0BF;
    --ua-text-cap:   #8D97A8;
    --ua-border:     rgba(255,255,255,0.07);
    --ua-border-lo:  rgba(255,255,255,0.04);
    --ua-grid:       rgba(255,255,255,0.04);
    --ua-radius:     12px;
    --ua-radius-sm:  8px;
    --ua-radius-lg:  16px;
    --ua-shadow:     0 8px 32px rgba(0,0,0,0.55);
    --ua-shadow-lg:  0 16px 64px rgba(0,0,0,0.65);
    --ua-glow-green: 0 0 28px rgba(0,213,102,0.18);
    --ua-glow-red:   0 0 28px rgba(255,68,68,0.18);
    --ua-glow-cyan:  0 0 28px rgba(0,200,224,0.14);

    /* ── Redesign 2026-07: royal palette + editorial serif + chart tokens.
       Additive — existing surfaces keep their tokens; new/migrated surfaces
       use these. See memory redesign_2026_07. */
    --ua-serif:      'Fraunces', Georgia, 'Times New Roman', serif;
    --ua-royal:      #6470F5;
    --ua-royal-2:    #8B7BF7;
    --ua-royal-deep: #3B45C9;
    --ua-royal-soft: rgba(100,112,245,0.14);
    --ua-brand-alpha-1: #7975EE;
    --ua-brand-alpha-2: #9A82E2;
    --ua-brand-alpha-3: #C19EC8;
    --ua-gold:       #D4B26A;
    --ua-text:       #ECEEF9;
    --ua-muted:      #9AA0BE;
    --ua-faint:      #646A88;
    --ua-line-2:     rgba(255,255,255,0.16);
    --ua-pos:        #48BC90;
    --ua-neg:        #E27767;
    --ua-neutral:    #7C84A8;

    /* Migration tokens (hex→var, slice 1). Dark values are EXACTLY the literals
       they replace, so dark mode is byte-identical; light values below make the
       theme flip work. See memory redesign_2026_07. */
    --ua-ink:        #E8EEFF;   /* dominant bright body text */
    --ua-ink-mut:    #8892AA;   /* dominant muted text */
    --ua-surface:    rgba(18,21,30,0.8);  /* dominant translucent card bg */

    /* Slice 2 — same exact-dark-value method. */
    --ua-ink-label:  #6B7FBF;   /* small-caps labels / captions */
    --ua-ink-soft:   #B8C0D4;   /* secondary body */
    --ua-ink-dim:    #747E94;   /* dimmest WCAG-legible text */
    --ua-ink-dim-2:  #707A91;   /* de-emphasised meta, still 4.5:1 on bg */
    --ua-hair:       rgba(255,255,255,0.08);  /* hairline borders */
    --ua-hair-2:     rgba(255,255,255,0.06);
    --ua-hair-3:     rgba(255,255,255,0.05);

    /* Slice 4 — RGB TRIPLES, not colors. Tinted fills like rgba(0,213,102,0.08)
       carry a per-use alpha, so a plain color token can't express them. CSS var
       substitution is textual, so rgba(var(--ua-green-rgb),0.08) expands to a
       valid rgba() while letting the BASE color re-theme and the alpha stay put. */
    --ua-green-rgb:  0,213,102;
    --ua-red-rgb:    255,68,68;
    --ua-purple-rgb: 124,58,237;
    --ua-cyan-rgb:   0,200,224;
    --ua-royal-rgb:  100,112,245;
    --ua-label-rgb:  107,127,191;
    --ua-card-rgb:   18,21,30;
    --ua-onbg-rgb:   255,255,255;  /* anything layered ON the background */

    /* Slice 6 — chrome surfaces found still dark in the live light beta:
       the ticker tape shell, and the panel fill/border used by page-title
       cards in utils/command_center, model_validation, portfolio_xray,
       score_explainer and what_changed. */
    --ua-shell-rgb:  12,14,20;   /* sticky tape / nav shell */
    --ua-panel:      #0F1320;    /* raised panel fill */
    --ua-panel-line: #232942;    /* raised panel border */

    /* Slice 7 — drop shadows. These need MORE than a colour swap: a 0.6-alpha
       black that reads as depth on a dark surface reads as dirt on a light one,
       so light needs a different hue AND a much lower alpha. The RGB-triple
       trick can't vary alpha, so the alpha is multiplied by a scalar token —
       calc() is valid in the alpha slot. Dark keeps k=1, so every existing
       shadow is byte-identical; light scales them all down uniformly, which
       preserves their relative weighting instead of flattening them. */
    --ua-shadow-rgb: 0,0,0;
    --ua-shadow-k:   1;
}

/* Light mode: overrides both the legacy tokens and the redesign tokens. Applied
   when <html data-ua-theme="light">. Nothing sets it yet (dark stays default);
   surfaces migrate to variables progressively so the flip stays clean. */
html[data-ua-theme="light"] {
    --ua-bg:         #F6F5FB;
    --ua-bg-card:    #FFFFFF;
    --ua-bg-raised:  #FBFAF7;
    --ua-text-hi:    #161A2E;
    --ua-text-mid:   #2C3149;
    --ua-text-lo:    #4A5069;
    --ua-text-cap:   #5E657C;
    --ua-border:     rgba(20,22,44,0.10);
    --ua-border-lo:  rgba(20,22,44,0.05);
    --ua-grid:       rgba(20,22,44,0.09);
    --ua-royal:      #4048C6;
    --ua-royal-2:    #5A46C0;
    --ua-royal-deep: #333BA8;
    --ua-royal-soft: rgba(64,72,198,0.10);
    --ua-brand-alpha-1: #5048BE;
    --ua-brand-alpha-2: #7054B8;
    --ua-brand-alpha-3: #86598D;
    --ua-gold:       #9C7A2C;
    --ua-text:       #161A2E;
    --ua-muted:      #5A6079;
    --ua-faint:      #62697E;
    --ua-line-2:     rgba(20,22,44,0.17);
    --ua-pos:        #087451;
    --ua-neg:        #A5292F;
    --ua-neutral:    #565D75;
    --ua-ink:        #161A2E;   /* light: dark ink on light bg */
    --ua-ink-mut:    #5A6079;
    --ua-surface:    #FFFFFF;
    --ua-ink-label:  #565177;
    --ua-ink-soft:   #3A4059;
    --ua-ink-dim:    #5F657A;
    --ua-ink-dim-2:  #62687D;
    /* Hairlines invert: light-on-dark becomes dark-on-light, or they vanish. */
    --ua-hair:       rgba(20,22,44,0.11);
    --ua-hair-2:     rgba(20,22,44,0.08);
    --ua-hair-3:     rgba(20,22,44,0.06);
    /* Semantic data colors need darker variants to stay legible on white. */
    --ua-green:      #087443;
    --ua-cyan:       #076879;
    --ua-purple:     #5724B3;
    --ua-red:        #B01F2A;
    --ua-amber:      #8C3C05;
    /* Triples must match the hexes above, or a tint and its solid disagree. */
    --ua-green-rgb:  8,116,67;
    --ua-red-rgb:    176,31,42;
    --ua-purple-rgb: 87,36,179;
    --ua-cyan-rgb:   7,104,121;
    --ua-royal-rgb:  64,72,198;
    --ua-label-rgb:  94,90,140;
    --ua-card-rgb:   255,255,255;
    --ua-onbg-rgb:   20,22,44;
    /* Dark-mode shadows are near-black and heavy; on a light surface that reads
       as grime, so light gets a softer, cooler shadow. */
    --ua-shadow:     0 6px 20px rgba(20,22,44,0.09);
    --ua-shadow-lg:  0 14px 44px rgba(20,22,44,0.13);
    --ua-shell-rgb:  255,255,255;
    --ua-panel:      #FFFFFF;
    --ua-panel-line: rgba(20,22,44,0.12);
    --ua-shadow-rgb: 20,22,44;   /* cool navy, not black */
    --ua-shadow-k:   0.3;        /* scale every shadow down together */
}

/* ── Light mode: app chrome ───────────────────────────────────────────────
   The token block above only recolors things that USE the tokens. Streamlit
   paints its own shell from config.toml (backgroundColor) and this file
   pins it again with !important further down, so without these overrides a
   light-mode user gets light cards floating on a black page. Selectors are
   prefixed with html[data-ua-theme="light"], which adds specificity, and they
   are declared here — before those rules — deliberately: equal-specificity
   !important ties are won by the LATER rule, so these must out-specify rather
   than out-order. Dark mode never matches any of this. */
html[data-ua-theme="light"] [data-testid="stAppViewContainer"],
html[data-ua-theme="light"] [data-testid="stAppViewContainer"] > .main,
html[data-ua-theme="light"] .stApp,
html[data-ua-theme="light"] .main,
html[data-ua-theme="light"] body {
    background: var(--ua-bg) !important;
    background-image: none !important;
    color: var(--ua-ink);
}
html[data-ua-theme="light"] section[data-testid="stSidebar"] {
    background: var(--ua-bg-card) !important;
    border-right: 1px solid var(--ua-hair) !important;
}
html[data-ua-theme="light"] header[data-testid="stHeader"] {
    background: transparent !important;
}
/* Top nav sits on the page background, so it has to follow it.
   NOTE the element is nav.ua-topnav — .ua-tnav-* are its CHILDREN. An earlier
   pass only targeted the children, which is why the bar itself stayed black in
   the live light beta. */
html[data-ua-theme="light"] .ua-topnav,
html[data-ua-theme="light"] .ua-tnav,
html[data-ua-theme="light"] .ua-tnav-menu {
    background: rgba(255,255,255,0.97) !important;
    border-color: var(--ua-hair) !important;
}
html[data-ua-theme="light"] .ua-tnav-brand-text { color: var(--ua-ink) !important; }
/* Identity chip / sign-in are Streamlit popovers, not our markup. */
html[data-ua-theme="light"] [data-testid="stPopover"] button,
html[data-ua-theme="light"] [data-testid="stPopoverButton"] {
    background: var(--ua-bg-card) !important;
    color: var(--ua-ink) !important;
    border: 1px solid var(--ua-hair) !important;
}
html[data-ua-theme="light"] [data-testid="stPopover"] button p,
html[data-ua-theme="light"] [data-testid="stPopover"] button span {
    color: var(--ua-ink) !important;
}
html[data-ua-theme="light"] [data-baseweb="popover"] [data-baseweb="menu"] {
    background: var(--ua-bg-card) !important;
}
/* Nav SUB-PAGES (the hover dropdowns) — .ua-tnav-drop, not .ua-tnav-menu.
   These stayed near-black over a light page until measured. */
html[data-ua-theme="light"] .ua-tnav-drop {
    background: #FFFFFF !important;
    border: 1px solid var(--ua-hair) !important;
    box-shadow: var(--ua-shadow-lg) !important;
}
html[data-ua-theme="light"] .ua-tnav-drop::before { background: #FFFFFF !important; }
html[data-ua-theme="light"] .ua-tnav-drop a {
    color: var(--ua-ink-mut) !important;
    background: rgba(var(--ua-royal-rgb),0.025);
    border-color: rgba(var(--ua-royal-rgb),0.12);
}
html[data-ua-theme="light"] .ua-tnav-drop a:hover {
    background: rgba(var(--ua-royal-rgb),0.08) !important;
    color: var(--ua-royal) !important;
    border-color: rgba(var(--ua-royal-rgb),0.38) !important;
}
html[data-ua-theme="light"] .ua-tnav-drop a.pro-link {
    color: #6D4FC2 !important;
    background: rgba(var(--ua-purple-rgb),0.07);
    border-color: rgba(var(--ua-purple-rgb),0.24);
}
html[data-ua-theme="light"] .ua-tnav-drop a.pro-link:hover {
    color: #5736AD !important;
    background: rgba(var(--ua-purple-rgb),0.12) !important;
    border-color: rgba(var(--ua-purple-rgb),0.44) !important;
}
html[data-ua-theme="light"] .ua-tnav-drop a.pro-link::after {
    color: #4B2A91 !important;
    background: rgba(var(--ua-purple-rgb),0.14) !important;
    border-color: rgba(var(--ua-purple-rgb),0.42) !important;
}
html[data-ua-theme="light"] .ua-tnav-drop-rule { background: var(--ua-hair) !important; }
html[data-ua-theme="light"] .ua-tnav-drop-label { color: var(--ua-ink-dim) !important; }

/* Notification panel + its hover state, in BOTH themes (hover was only ever
   defined for dark, so on light it flashed a dark row). */
html[data-ua-theme="light"] .ua-notification-item {
    background: var(--ua-bg-card) !important;
    border-color: var(--ua-hair) !important;
}
html[data-ua-theme="light"] .ua-notification-item:hover {
    background: rgba(var(--ua-royal-rgb),0.06) !important;
    border-color: rgba(var(--ua-royal-rgb),0.28) !important;
}
html[data-ua-theme="light"] .ua-notification-title,
html[data-ua-theme="light"] .ua-notification-heading { color: var(--ua-ink) !important; }
html[data-ua-theme="light"] .ua-notification-copy { color: var(--ua-ink-mut) !important; }
html[data-ua-theme="light"] .ua-notification-kicker { color: var(--ua-ink-label) !important; }

/* Streamlit tabs: the tab strip kept a dark fill, so dark-on-dark labels
   measured a 1.0 contrast ratio (invisible). */
html[data-ua-theme="light"] .stTabs [data-baseweb="tab-list"] {
    background: transparent !important;
    border-bottom: 1px solid var(--ua-hair) !important;
}
html[data-ua-theme="light"] .stTabs [data-baseweb="tab"] {
    background: transparent !important;
    color: var(--ua-ink-mut) !important;
}
html[data-ua-theme="light"] .stTabs [aria-selected="true"] {
    color: var(--ua-ink) !important;
    border-bottom-color: var(--ua-royal) !important;
}
html[data-ua-theme="light"] .stTabs [data-baseweb="tab-highlight"] {
    background: var(--ua-royal) !important;
}

/* ── Light mode: inline text-colour remap, part 2 ────────────────────────
   Complements the existing remap above (that block covers the bright brand
   accents). These 16 are the LIGHT GREYS used as text on a dark surface —
   invisible once the background flips. They live in quoted Python literals
   that the migration guard skips on purpose, because sibling variables get
   parsed with int(hex[1:3],16) or handed to plotly, where var() would crash.
   Matching the inline style instead touches no Python at all.
   Anchored on ^color:/;color: so background:, background-color: and
   border-color: are provably NOT matched (verified in-browser). */
html[data-ua-theme="light"] [style*=";color: #C3CBE0"],
html[data-ua-theme="light"] [style*=";color: #c3cbe0"],
html[data-ua-theme="light"] [style*=";color:#C3CBE0"],
html[data-ua-theme="light"] [style*=";color:#c3cbe0"],
html[data-ua-theme="light"] [style^="color: #C3CBE0"],
html[data-ua-theme="light"] [style^="color: #c3cbe0"],
html[data-ua-theme="light"] [style^="color:#C3CBE0"],
html[data-ua-theme="light"] [style^="color:#c3cbe0"] {
    color: #333A52 !important;
}
html[data-ua-theme="light"] [style*=";color: #E7ECF5"],
html[data-ua-theme="light"] [style*=";color: #e7ecf5"],
html[data-ua-theme="light"] [style*=";color:#E7ECF5"],
html[data-ua-theme="light"] [style*=";color:#e7ecf5"],
html[data-ua-theme="light"] [style^="color: #E7ECF5"],
html[data-ua-theme="light"] [style^="color: #e7ecf5"],
html[data-ua-theme="light"] [style^="color:#E7ECF5"],
html[data-ua-theme="light"] [style^="color:#e7ecf5"] {
    color: #1D2136 !important;
}
html[data-ua-theme="light"] [style*=";color: #EDF1F7"],
html[data-ua-theme="light"] [style*=";color: #edf1f7"],
html[data-ua-theme="light"] [style*=";color:#EDF1F7"],
html[data-ua-theme="light"] [style*=";color:#edf1f7"],
html[data-ua-theme="light"] [style^="color: #EDF1F7"],
html[data-ua-theme="light"] [style^="color: #edf1f7"],
html[data-ua-theme="light"] [style^="color:#EDF1F7"],
html[data-ua-theme="light"] [style^="color:#edf1f7"] {
    color: #1D2136 !important;
}
html[data-ua-theme="light"] [style*=";color: #E4E9F2"],
html[data-ua-theme="light"] [style*=";color: #e4e9f2"],
html[data-ua-theme="light"] [style*=";color:#E4E9F2"],
html[data-ua-theme="light"] [style*=";color:#e4e9f2"],
html[data-ua-theme="light"] [style^="color: #E4E9F2"],
html[data-ua-theme="light"] [style^="color: #e4e9f2"],
html[data-ua-theme="light"] [style^="color:#E4E9F2"],
html[data-ua-theme="light"] [style^="color:#e4e9f2"] {
    color: #161A2E !important;
}
html[data-ua-theme="light"] [style*=";color: #A7B0BF"],
html[data-ua-theme="light"] [style*=";color: #a7b0bf"],
html[data-ua-theme="light"] [style*=";color:#A7B0BF"],
html[data-ua-theme="light"] [style*=";color:#a7b0bf"],
html[data-ua-theme="light"] [style^="color: #A7B0BF"],
html[data-ua-theme="light"] [style^="color: #a7b0bf"],
html[data-ua-theme="light"] [style^="color:#A7B0BF"],
html[data-ua-theme="light"] [style^="color:#a7b0bf"] {
    color: #3A4059 !important;
}
html[data-ua-theme="light"] [style*=";color: #C8D0E4"],
html[data-ua-theme="light"] [style*=";color: #c8d0e4"],
html[data-ua-theme="light"] [style*=";color:#C8D0E4"],
html[data-ua-theme="light"] [style*=";color:#c8d0e4"],
html[data-ua-theme="light"] [style^="color: #C8D0E4"],
html[data-ua-theme="light"] [style^="color: #c8d0e4"],
html[data-ua-theme="light"] [style^="color:#C8D0E4"],
html[data-ua-theme="light"] [style^="color:#c8d0e4"] {
    color: #2C3149 !important;
}
html[data-ua-theme="light"] [style*=";color: #8892B0"],
html[data-ua-theme="light"] [style*=";color: #8892b0"],
html[data-ua-theme="light"] [style*=";color:#8892B0"],
html[data-ua-theme="light"] [style*=";color:#8892b0"],
html[data-ua-theme="light"] [style^="color: #8892B0"],
html[data-ua-theme="light"] [style^="color: #8892b0"],
html[data-ua-theme="light"] [style^="color:#8892B0"],
html[data-ua-theme="light"] [style^="color:#8892b0"] {
    color: #5A6079 !important;
}
html[data-ua-theme="light"] [style*=";color: #8F9AAD"],
html[data-ua-theme="light"] [style*=";color: #8f9aad"],
html[data-ua-theme="light"] [style*=";color:#8F9AAD"],
html[data-ua-theme="light"] [style*=";color:#8f9aad"],
html[data-ua-theme="light"] [style^="color: #8F9AAD"],
html[data-ua-theme="light"] [style^="color: #8f9aad"],
html[data-ua-theme="light"] [style^="color:#8F9AAD"],
html[data-ua-theme="light"] [style^="color:#8f9aad"] {
    color: #4A5069 !important;
}
html[data-ua-theme="light"] [style*=";color: #8D97A8"],
html[data-ua-theme="light"] [style*=";color: #8d97a8"],
html[data-ua-theme="light"] [style*=";color:#8D97A8"],
html[data-ua-theme="light"] [style*=";color:#8d97a8"],
html[data-ua-theme="light"] [style^="color: #8D97A8"],
html[data-ua-theme="light"] [style^="color: #8d97a8"],
html[data-ua-theme="light"] [style^="color:#8D97A8"],
html[data-ua-theme="light"] [style^="color:#8d97a8"] {
    color: #4A5069 !important;
}
html[data-ua-theme="light"] [style*=";color: #9AA4BC"],
html[data-ua-theme="light"] [style*=";color: #9aa4bc"],
html[data-ua-theme="light"] [style*=";color:#9AA4BC"],
html[data-ua-theme="light"] [style*=";color:#9aa4bc"],
html[data-ua-theme="light"] [style^="color: #9AA4BC"],
html[data-ua-theme="light"] [style^="color: #9aa4bc"],
html[data-ua-theme="light"] [style^="color:#9AA4BC"],
html[data-ua-theme="light"] [style^="color:#9aa4bc"] {
    color: #454B63 !important;
}
html[data-ua-theme="light"] [style*=";color: #6B7A95"],
html[data-ua-theme="light"] [style*=";color: #6b7a95"],
html[data-ua-theme="light"] [style*=";color:#6B7A95"],
html[data-ua-theme="light"] [style*=";color:#6b7a95"],
html[data-ua-theme="light"] [style^="color: #6B7A95"],
html[data-ua-theme="light"] [style^="color: #6b7a95"],
html[data-ua-theme="light"] [style^="color:#6B7A95"],
html[data-ua-theme="light"] [style^="color:#6b7a95"] {
    color: #4F5570 !important;
}
html[data-ua-theme="light"] [style*=";color: #C4B5FD"],
html[data-ua-theme="light"] [style*=";color: #c4b5fd"],
html[data-ua-theme="light"] [style*=";color:#C4B5FD"],
html[data-ua-theme="light"] [style*=";color:#c4b5fd"],
html[data-ua-theme="light"] [style^="color: #C4B5FD"],
html[data-ua-theme="light"] [style^="color: #c4b5fd"],
html[data-ua-theme="light"] [style^="color:#C4B5FD"],
html[data-ua-theme="light"] [style^="color:#c4b5fd"] {
    color: #4B2A91 !important;
}
html[data-ua-theme="light"] [style*=";color: #FF8888"],
html[data-ua-theme="light"] [style*=";color: #ff8888"],
html[data-ua-theme="light"] [style*=";color:#FF8888"],
html[data-ua-theme="light"] [style*=";color:#ff8888"],
html[data-ua-theme="light"] [style^="color: #FF8888"],
html[data-ua-theme="light"] [style^="color: #ff8888"],
html[data-ua-theme="light"] [style^="color:#FF8888"],
html[data-ua-theme="light"] [style^="color:#ff8888"] {
    color: #C0392B !important;
}
html[data-ua-theme="light"] [style*=";color: #FF8C42"],
html[data-ua-theme="light"] [style*=";color: #ff8c42"],
html[data-ua-theme="light"] [style*=";color:#FF8C42"],
html[data-ua-theme="light"] [style*=";color:#ff8c42"],
html[data-ua-theme="light"] [style^="color: #FF8C42"],
html[data-ua-theme="light"] [style^="color: #ff8c42"],
html[data-ua-theme="light"] [style^="color:#FF8C42"],
html[data-ua-theme="light"] [style^="color:#ff8c42"] {
    color: #B4530A !important;
}
html[data-ua-theme="light"] [style*=";color: #7BDE6B"],
html[data-ua-theme="light"] [style*=";color: #7bde6b"],
html[data-ua-theme="light"] [style*=";color:#7BDE6B"],
html[data-ua-theme="light"] [style*=";color:#7bde6b"],
html[data-ua-theme="light"] [style^="color: #7BDE6B"],
html[data-ua-theme="light"] [style^="color: #7bde6b"],
html[data-ua-theme="light"] [style^="color:#7BDE6B"],
html[data-ua-theme="light"] [style^="color:#7bde6b"] {
    color: #3E8E2F !important;
}

/* ── Theme toggle ─────────────────────────────────────────────────────────
   Deliberately a real <a href>, not a JS button: it works with keyboard and
   screen readers for free, survives Streamlit reruns, and needs no script
   (st.markdown does not execute one anyway). Both directions are always in the
   DOM and CSS reveals the relevant one, so the server never has to know the
   current theme — which it can't, since the theme lives in localStorage. */
.ua-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 5px; height: 28px; padding: 0 10px; margin-left: 8px;
    border-radius: 7px; flex-shrink: 0;
    border: 1px solid var(--ua-hair);
    background: rgba(var(--ua-onbg-rgb),0.04);
    color: var(--ua-ink-mut);
    font-family: 'Inter', sans-serif; font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.04em; text-decoration: none !important; white-space: nowrap;
    transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.ua-theme-toggle:hover {
    color: var(--ua-ink);
    background: rgba(var(--ua-royal-rgb),0.10);
    border-color: rgba(var(--ua-royal-rgb),0.35);
}
.ua-theme-toggle:focus-visible {
    outline: 2px solid var(--ua-royal) !important;
    outline-offset: 2px !important;
}
.ua-theme-toggle .ua-tt-ico { font-size: 0.82rem; line-height: 1; }
/* Show the action that is available: in dark you can go light, and vice versa. */
.ua-theme-toggle[data-to="light"] { display: inline-flex; }
.ua-theme-toggle[data-to="dark"]  { display: none; }
html[data-ua-theme="light"] .ua-theme-toggle[data-to="light"] { display: none; }
html[data-ua-theme="light"] .ua-theme-toggle[data-to="dark"]  { display: inline-flex; }
html[data-ua-theme="light"] a.ua-tnav-item,
html[data-ua-theme="light"] .ua-tnav-trigger { color: var(--ua-ink-mut); }
html[data-ua-theme="light"] a.ua-tnav-item:hover,
html[data-ua-theme="light"] .ua-tnav-trigger:hover {
    color: var(--ua-ink);
    background: rgba(var(--ua-onbg-rgb),0.05);
}
/* Streamlit widgets that hardcode a dark field. */
html[data-ua-theme="light"] .stTextInput > div > div > input,
html[data-ua-theme="light"] .stSelectbox > div > div,
html[data-ua-theme="light"] .stNumberInput > div > div > input,
html[data-ua-theme="light"] .stTextArea textarea {
    background: var(--ua-bg-card) !important;
    color: var(--ua-ink) !important;
    border-color: var(--ua-hair) !important;
}
html[data-ua-theme="light"] .stButton > button {
    background: var(--ua-bg-card) !important;
    color: var(--ua-ink-soft) !important;
    border-color: var(--ua-hair) !important;
}
/* Current Streamlit quick-pick and dynamically generated buttons are not
   always nested under .stButton (tooltip wrappers can sit between them).
   Target the stable button contract as well, never generated emotion classes. */
html[data-ua-theme="light"] button[data-testid="stBaseButton-secondary"] {
    background: var(--ua-bg-card) !important;
    color: var(--ua-ink-soft) !important;
    border: 1px solid var(--ua-hair) !important;
    box-shadow: var(--ua-shadow) !important;
}
html[data-ua-theme="light"] button[data-testid="stBaseButton-secondary"]:hover {
    background: rgba(var(--ua-royal-rgb),0.06) !important;
    color: var(--ua-ink) !important;
    border-color: rgba(var(--ua-royal-rgb),0.30) !important;
}
html[data-ua-theme="light"] .stButton > button[kind="primary"] {
    background: linear-gradient(135deg, #4048C6, #3B3FA8) !important;
    color: #FFFFFF !important;
}

/* Button labels are paragraphs in current Streamlit builds. The generic
   typography rule must not recolor a button's label independently of its
   surface, especially white labels on royal form-submit actions. */
.stButton > button p,
.stDownloadButton > button p,
.stFormSubmitButton > button p,
.stLinkButton > a p,
button[data-testid^="stBaseButton"] p {
    color: inherit !important;
}

/* Plotly is rendered client-side after Python has already built the figure, so
   it cannot read the browser-only localStorage theme. Re-theme presentation
   chrome in CSS while leaving trace/data colors and figure logic untouched. */
html[data-ua-theme="light"] [data-testid="stPlotlyChart"] .main-svg {
    background: transparent !important;
}
html[data-ua-theme="light"] [data-testid="stPlotlyChart"] .plot-container .bg {
    fill: var(--ua-bg-card) !important;
}
html[data-ua-theme="light"] [data-testid="stPlotlyChart"] :is(
    .xtick text, .ytick text, .gtitle, .legendtext, .annotation-text,
    .cbtitle text, .colorbar text
) {
    fill: var(--ua-ink-mut) !important;
    color: var(--ua-ink-mut) !important;
}
html[data-ua-theme="light"] [data-testid="stPlotlyChart"] :is(
    .xgrid, .ygrid, .gridlayer path, .zerolinelayer path
) {
    stroke: var(--ua-grid) !important;
}
html[data-ua-theme="light"] [data-testid="stPlotlyChart"] :is(
    .xlines-above, .ylines-above, .xlines-below, .ylines-below
) {
    stroke: var(--ua-hair) !important;
}
html[data-ua-theme="light"] [data-testid="stPlotlyChart"] .modebar {
    background: rgba(var(--ua-card-rgb),0.94) !important;
    border: 1px solid var(--ua-hair) !important;
}
html[data-ua-theme="light"] [data-testid="stPlotlyChart"] .modebar-btn path {
    fill: var(--ua-ink-mut) !important;
}
html[data-ua-theme="light"] [data-testid="stPlotlyChart"] :is(
    .barlayer .bartext, .scatterlayer .textpoint text,
    .pielayer .slicetext, .treemaplayer .slicetext,
    .sunburstlayer .slicetext, .funnellayer .bartext
) {
    fill: var(--ua-ink) !important;
}
html[data-ua-theme="light"] [data-testid="stPlotlyChart"] :is(
    .hoverlayer .hovertext path, .hoverlayer .axistext path
) {
    fill: var(--ua-bg-raised) !important;
    stroke: var(--ua-hair) !important;
}
html[data-ua-theme="light"] [data-testid="stPlotlyChart"] :is(
    .hoverlayer .hovertext text, .hoverlayer .axistext text
) {
    fill: var(--ua-ink) !important;
}
html[data-ua-theme="light"] [data-testid="stPlotlyChart"] .rangeselector .button rect {
    fill: var(--ua-bg-raised) !important;
    stroke: var(--ua-hair) !important;
}
html[data-ua-theme="light"] [data-testid="stPlotlyChart"] .rangeselector .button text {
    fill: var(--ua-ink-mut) !important;
}

/* ── Guided workflow cards ───────────────────────────────────────────────── */
.ua-guide-shell {
    position: relative;
    overflow: hidden;
    margin: 6px 0 18px;
    padding: 20px;
    border: 1px solid rgba(var(--ua-cyan-rgb),0.18);
    border-radius: 14px;
    background:
        radial-gradient(circle at 92% -10%, rgba(var(--ua-purple-rgb),0.13), transparent 34%),
        linear-gradient(145deg, rgba(15,22,31,0.98), rgba(10,15,23,0.96));
    box-shadow: 0 14px 36px rgba(var(--ua-shadow-rgb),calc(0.24*var(--ua-shadow-k))), inset 0 1px 0 rgba(var(--ua-onbg-rgb),0.025);
    font-family: Inter, sans-serif;
}
.ua-guide-shell::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ua-cyan) 0%, var(--ua-purple) 58%, transparent 100%);
    opacity: 0.9;
}
.ua-guide-kicker {
    margin-bottom: 6px;
    color: #72D6E2;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}
.ua-guide-title {
    color: var(--ua-text-hi);
    font-size: 1.02rem;
    font-weight: 760;
    letter-spacing: -0.015em;
    line-height: 1.3;
}
.ua-guide-intro {
    max-width: 760px;
    margin-top: 5px;
    color: var(--ua-text-lo);
    font-size: 0.76rem;
    line-height: 1.55;
}
.ua-guide-grid {
    display: grid;
    grid-template-columns: repeat(var(--ua-guide-cols, 3), minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}
.ua-guide-step {
    min-width: 0;
    padding: 13px 14px 14px;
    border: 1px solid rgba(var(--ua-onbg-rgb),0.065);
    border-radius: 10px;
    background: rgba(var(--ua-card-rgb),0.72);
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.ua-guide-step:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--ua-cyan-rgb),0.20);
    background: rgba(22,27,39,0.88);
}
.ua-guide-step-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}
.ua-guide-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 1px solid rgba(var(--ua-cyan-rgb),0.28);
    border-radius: 7px;
    background: linear-gradient(145deg, rgba(var(--ua-cyan-rgb),0.14), rgba(var(--ua-purple-rgb),0.10));
    color: #A9EAF1;
    font-size: 0.66rem;
    font-weight: 800;
}
.ua-guide-step-title {
    color: #DDE2EB;
    font-size: 0.78rem;
    font-weight: 720;
    line-height: 1.3;
}
.ua-guide-step-body {
    color: var(--ua-text-lo);
    font-size: 0.73rem;
    line-height: 1.58;
}
@media (max-width: 900px) {
    .ua-guide-grid { grid-template-columns: 1fr; }
    .ua-guide-shell { padding: 17px; }
}

/* ── Page-local section rail ─────────────────────────────────────────────── */
[data-testid="stSidebar"] [data-testid="stRadio"] [role="radiogroup"] {
    gap: 3px !important;
}
[data-testid="stSidebar"] [data-testid="stRadio"] label {
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 7px 9px !important;
    margin: 0 !important;
    transition: background 120ms ease, border-color 120ms ease;
}
[data-testid="stSidebar"] [data-testid="stRadio"] label:hover {
    background: rgba(var(--ua-onbg-rgb),0.035);
    border-color: var(--ua-hair-2);
}
[data-testid="stSidebar"] [data-testid="stRadio"] label:has(input:checked) {
    background: rgba(var(--ua-purple-rgb),0.10);
    border-color: rgba(var(--ua-purple-rgb),0.28);
}
[data-testid="stSidebar"] [data-testid="stRadio"] label p {
    font-size: 0.78rem !important;
    font-weight: 650 !important;
}

/* ── Base typography ─────────────────────────────────────────────────────── */
html, body, [class*="css"] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.55;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar              { width: 4px; height: 4px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(var(--ua-green-rgb),0.22); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(var(--ua-green-rgb),0.45); }

/* ── Page background — gradient mesh ─────────────────────────────────────── */
.main {
    background-color: var(--ua-bg) !important;
    background-image:
        radial-gradient(ellipse 80% 40% at 20% -5%,  rgba(var(--ua-green-rgb),0.055) 0%, transparent 60%),
        radial-gradient(ellipse 60% 35% at 80% 5%,   rgba(var(--ua-purple-rgb),0.045) 0%, transparent 55%),
        radial-gradient(ellipse 50% 30% at 50% 100%, rgba(var(--ua-cyan-rgb),0.035) 0%, transparent 50%) !important;
}
.block-container {
    background-color: transparent !important;
    padding-top: 0.75rem !important;
}
[data-testid="stAppViewContainer"] {
    background-color: var(--ua-bg) !important;
    background-image:
        radial-gradient(ellipse 80% 40% at 20% -5%,  rgba(var(--ua-green-rgb),0.055) 0%, transparent 60%),
        radial-gradient(ellipse 60% 35% at 80% 5%,   rgba(var(--ua-purple-rgb),0.045) 0%, transparent 55%),
        radial-gradient(ellipse 50% 30% at 50% 100%, rgba(var(--ua-cyan-rgb),0.035) 0%, transparent 50%) !important;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
section[data-testid="stSidebar"] {
    background: linear-gradient(180deg, #0D0F1A 0%, #0A0C14 100%) !important;
    border-right: 1px solid var(--ua-border-lo) !important;
}
section[data-testid="stSidebar"] * { color: var(--ua-ink-mut) !important; }
section[data-testid="stSidebar"] p,
section[data-testid="stSidebar"] a { color: var(--ua-ink-mut) !important; }
section[data-testid="stSidebar"] h2,
section[data-testid="stSidebar"] h3 {
    color: var(--ua-ink) !important;
    border-bottom: 1px solid var(--ua-hair-3) !important;
    padding-bottom: 4px !important;
}
[data-testid="stNavSectionHeader"] {
    background: rgba(var(--ua-green-rgb),0.07) !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    margin-top: 12px !important;
    margin-bottom: 3px !important;
}
[data-testid="stNavSectionHeader"] p {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--ua-green) !important;
}
[data-testid="stSidebarNavItems"] a[aria-selected="true"],
[data-testid="stSidebarNavItems"] [aria-selected="true"] {
    background: rgba(var(--ua-green-rgb),0.09) !important;
    border-radius: 6px !important;
}
[data-testid="stSidebarNavItems"] a[aria-selected="true"] p,
[data-testid="stSidebarNavItems"] [aria-selected="true"] p { color: var(--ua-green) !important; }
section[data-testid="stSidebar"] .stButton > button {
    background: rgba(var(--ua-green-rgb),0.09) !important;
    border: 1px solid rgba(var(--ua-green-rgb),0.22) !important;
    color: var(--ua-green) !important;
    border-radius: 8px !important;
}
section[data-testid="stSidebar"] .stButton > button:hover {
    background: rgba(var(--ua-green-rgb),0.16) !important;
    box-shadow: 0 0 12px rgba(var(--ua-green-rgb),0.14) !important;
}
section[data-testid="stSidebar"] .stButton > button span,
section[data-testid="stSidebar"] .stButton > button p { color: var(--ua-green) !important; }

/* ── Masthead ────────────────────────────────────────────────────────────── */
.market-status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em;
    padding: 3px 9px; border-radius: 6px;
    font-family: 'Inter', sans-serif !important;
    transition: filter 0.15s ease;
}
.market-status-badge:hover { filter: brightness(1.15); }
.market-status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.ua-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    padding-bottom: 12px; margin-bottom: 0;
    border-bottom: 1px solid var(--ua-hair-2);
    position: relative;
}
.ua-header::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0;
    width: 200px; height: 2px;
    background: linear-gradient(90deg, var(--ua-green), var(--ua-cyan) 50%, var(--ua-purple) 100%);
    background-size: 300% 100%;
    animation: ua_gradient_x 6s ease infinite;
    border-radius: 1px;
}
.ua-wordmark {
    font-size: 1.8rem; font-weight: 800; color: var(--ua-ink);
    font-family: 'Inter', sans-serif; letter-spacing: -0.8px; line-height: 1.05;
}
.ua-wordmark span {
    background: linear-gradient(120deg,
        var(--ua-brand-alpha-1) 0%,
        var(--ua-brand-alpha-2) 58%,
        var(--ua-brand-alpha-3) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: none;
}
.ua-tagline {
    font-size: 0.70rem; color: var(--ua-ink-label); font-family: 'Inter', sans-serif;
    margin-top: 3px; letter-spacing: 0.02em;
    display: flex; align-items: center; gap: 6px;
}
.ua-hero-title {
    font-size: 2.05rem; font-weight: 600; color: var(--ua-text, #F3F6FC);
    font-family: var(--ua-serif); letter-spacing: -0.4px; line-height: 1.08;
    max-width: 620px;
}
.ua-hero-sub {
    font-size: 0.82rem; color: var(--ua-ink-mut); font-family: 'Inter', sans-serif;
    margin-top: 6px; line-height: 1.55; max-width: 520px; font-weight: 400;
}
.ua-header-right {
    text-align: right; font-size: 0.73rem; color: var(--ua-ink-mut); font-family: 'Inter', sans-serif;
}
.ua-header-right b { color: var(--ua-text-mid); font-weight: 600; }
.gold-rule {
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--ua-green-rgb),0.5), rgba(var(--ua-cyan-rgb),0.3) 40%, rgba(var(--ua-purple-rgb),0.3) 70%, transparent);
    border: none; margin: 0 0 14px 0;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.metric-card {
    background: var(--ua-surface);
    border: 1px solid var(--ua-border);
    border-radius: 12px; padding: 16px 18px; margin-bottom: 10px;
    font-family: 'Inter', sans-serif;
    transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
    position: relative; overflow: hidden;
    box-shadow: 0 2px 8px rgba(var(--ua-shadow-rgb),calc(0.3*var(--ua-shadow-k)));
}
.metric-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--ua-hair);
    border-radius: 12px 0 0 12px;
    transition: background 0.2s ease;
}
.metric-card.bull::before  { background: linear-gradient(180deg, var(--ua-green), #00A847); }
.metric-card.bear::before  { background: linear-gradient(180deg, var(--ua-red), #CC2222); }
.metric-card.neutral::before { background: linear-gradient(180deg, var(--ua-ink-label), var(--ua-ink-dim-2)); }
/* Subtle top glow when bull/bear */
.metric-card.bull { box-shadow: 0 0 0 0 transparent, inset 0 1px 0 rgba(var(--ua-green-rgb),0.06); }
.metric-card.bear { box-shadow: 0 0 0 0 transparent, inset 0 1px 0 rgba(var(--ua-red-rgb),0.06); }
.metric-card, .page-card, .stat-box { will-change: transform; }
.metric-card:hover {
    border-color: rgba(var(--ua-green-rgb),0.24);
    box-shadow: 0 0 28px rgba(var(--ua-green-rgb),0.09), 0 8px 28px rgba(var(--ua-shadow-rgb),calc(0.45*var(--ua-shadow-k)));
    transform: translate3d(0,-2px,0);
}
.metric-card.bull:hover { border-color: rgba(var(--ua-green-rgb),0.32); }
.metric-card.bear:hover { border-color: rgba(var(--ua-red-rgb),0.25); }
.metric-card b { color: var(--ua-ink); }
.metric-card span { color: var(--ua-ink-mut); }

.page-card {
    background: rgba(var(--ua-card-rgb),0.7);
    border: 1px solid var(--ua-hair-2);
    border-radius: 12px; padding: 18px 20px; margin-bottom: 10px;
    font-family: 'Inter', sans-serif;
    transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
    position: relative; overflow: hidden;
}
.page-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--ua-green), var(--ua-purple));
    border-radius: 12px 0 0 12px;
    opacity: 0; transition: opacity 0.2s ease;
}
.page-card:hover::before { opacity: 1; }
.page-card:hover {
    border-color: rgba(var(--ua-green-rgb),0.18);
    box-shadow: 0 0 24px rgba(var(--ua-green-rgb),0.07), 0 12px 32px rgba(var(--ua-shadow-rgb),calc(0.5*var(--ua-shadow-k)));
    transform: translate3d(0,-2px,0);
}
.page-card .page-title { font-size: 0.94rem; font-weight: 600; color: var(--ua-ink); margin-bottom: 4px; letter-spacing: -0.1px; }
.page-card .page-desc  { font-size: 0.79rem; color: var(--ua-ink-mut); line-height: 1.55; }

/* ── Section header ──────────────────────────────────────────────────────── */
.section-header {
    font-size: 0.63rem; font-weight: 700; color: var(--ua-ink-mut);
    font-family: 'Inter', sans-serif; letter-spacing: 0.13em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ua-hair-3);
    padding-bottom: 8px; margin-bottom: 14px;
}

/* ── Score numbers ───────────────────────────────────────────────────────── */
.score-number { font-size: 2.8rem; font-weight: 800; line-height: 1.0; font-family: 'Inter', sans-serif; letter-spacing: -1.5px; }
.score-bull {
    background: linear-gradient(135deg, var(--ua-green), var(--ua-cyan));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.score-bear {
    background: linear-gradient(135deg, var(--ua-red), #FF8888);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.score-neutral { color: var(--ua-ink-label); }

/* ── Stat boxes ──────────────────────────────────────────────────────────── */
.stat-box {
    background: var(--ua-surface); border: 1px solid var(--ua-border);
    border-radius: 10px; padding: 14px 16px; text-align: center;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.stat-box:hover {
    border-color: rgba(var(--ua-green-rgb),0.2);
    box-shadow: 0 0 16px rgba(var(--ua-green-rgb),0.07);
    transform: translateY(-1px);
}
.stat-box .stat-label  { font-size: 0.60rem; text-transform: uppercase; letter-spacing: 0.11em; color: var(--ua-ink-mut); margin-bottom: 6px; font-weight: 700; }
.stat-box .stat-value  { font-size: 1.4rem; font-weight: 700; color: var(--ua-ink); letter-spacing: -0.5px; }
.stat-box .stat-change { font-size: 0.76rem; margin-top: 3px; font-weight: 500; }
.stat-box .stat-change.pos  { color: var(--ua-green); }
.stat-box .stat-change.neg  { color: var(--ua-red); }
.stat-box .stat-change.flat { color: var(--ua-ink-label); }

/* ── Info / disclaimer ───────────────────────────────────────────────────── */
.disclaimer {
    background: rgba(var(--ua-card-rgb),0.6); border: 1px solid var(--ua-hair-3);
    border-radius: 8px; padding: 10px 14px; font-size: 0.72rem;
    color: var(--ua-ink-mut); margin-top: 16px; font-family: 'Inter', sans-serif;
}
.info-box {
    background: rgba(var(--ua-green-rgb),0.05); border: 1px solid rgba(var(--ua-green-rgb),0.15);
    border-radius: 8px; padding: 12px 16px; margin-bottom: 12px;
    font-size: 0.83rem; color: #A8E8C0; font-family: 'Inter', sans-serif;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.comparison-table { width: 100%; border-collapse: collapse; font-family: 'Inter', sans-serif; font-size: 0.83rem; }
.comparison-table th {
    background: rgba(var(--ua-green-rgb),0.08); color: var(--ua-green);
    padding: 9px 12px; text-align: left; font-weight: 700;
    font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
    border-bottom: 1px solid rgba(var(--ua-green-rgb),0.18);
}
.comparison-table td { padding: 8px 12px; border-bottom: 1px solid var(--ua-border-lo); color: var(--ua-text-mid); }
.comparison-table tr:hover td { background: rgba(var(--ua-onbg-rgb),0.02); }
.comparison-table tr.highlight td { background: rgba(var(--ua-green-rgb),0.06); color: var(--ua-ink); font-weight: 600; }

.ua-data-table { width: 100%; border-collapse: collapse; font-family: 'Inter', sans-serif; font-size: 0.81rem; }
.ua-data-table th {
    background: rgba(var(--ua-card-rgb),0.95); color: var(--ua-ink-mut);
    padding: 9px 12px; text-align: left; font-weight: 700;
    font-size: 0.60rem; letter-spacing: 0.10em; text-transform: uppercase;
    border-bottom: 1px solid var(--ua-hair-2);
}
.ua-data-table td { padding: 9px 12px; border-bottom: 1px solid var(--ua-border-lo); color: var(--ua-ink-soft); vertical-align: middle; }
.ua-data-table tr:hover td { background: rgba(var(--ua-onbg-rgb),0.02); transition: background 0.1s ease; }
.ua-data-table .bull    { color: var(--ua-green); font-weight: 600; }
.ua-data-table .bear    { color: var(--ua-red); font-weight: 600; }
.ua-data-table .neutral { color: var(--ua-ink-label); }

/* ── Streamlit native overrides ──────────────────────────────────────────── */
/* Metrics */
.stMetric label { color: var(--ua-ink-mut) !important; font-size: 0.70rem !important; letter-spacing: 0.06em !important; font-family: 'Inter', sans-serif !important; text-transform: uppercase !important; font-weight: 600 !important; }
.stMetric [data-testid="stMetricValue"] { color: var(--ua-ink) !important; font-family: 'Inter', sans-serif !important; font-size: 1.65rem !important; font-weight: 700 !important; letter-spacing: -0.5px !important; }
.stMetric [data-testid="stMetricDelta"] { font-size: 0.78rem !important; font-weight: 500 !important; }

/* Expanders */
div[data-testid="stExpander"] { background: rgba(var(--ua-card-rgb),0.6) !important; border: 1px solid var(--ua-hair-2) !important; border-radius: 10px !important; }
.streamlit-expanderHeader { color: var(--ua-text-mid) !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 0.86rem !important; }

/* Tabs */
.stTabs [data-baseweb="tab-list"]  { border-bottom: 1px solid var(--ua-hair-2) !important; gap: 0 !important; background: transparent !important; }
.stTabs [data-baseweb="tab"]       { font-family: 'Inter', sans-serif !important; font-size: 0.83rem !important; font-weight: 500 !important; padding: 8px 18px !important; color: var(--ua-ink-mut) !important; background: transparent !important; border: none !important; }
.stTabs [aria-selected="true"]     { color: var(--ua-ink) !important; border-bottom: 2px solid var(--ua-green) !important; font-weight: 600 !important; }
.stTabs [data-baseweb="tab-highlight"] { background: var(--ua-green) !important; height: 2px !important; }
.stTabs [data-baseweb="tab-panel"] { padding-top: 16px !important; }

/* Buttons */
.stButton > button {
    font-family: 'Inter', sans-serif !important;
    border-radius: 8px !important; font-weight: 500 !important; font-size: 0.83rem !important;
    transition: all 0.18s cubic-bezier(0.4,0,0.2,1) !important;
    border: 1px solid var(--ua-hair) !important;
    background: var(--ua-surface) !important; color: var(--ua-text-mid) !important;
}

/* Global ticker search submit: keep the action legible at every viewport.
   Streamlit's default form-button padding could leave only a few pixels for
   the label in a nested column, wrapping "Open" one character per line. */
.st-key-global_ticker_submit button,
[data-testid="stFormSubmitButton"] button[key="global_ticker_submit"] {
    min-width: 138px !important;
    min-height: 42px !important;
    padding: 0.55rem 1rem !important;
    background: #1D2634 !important;
    border: 1px solid rgba(143,154,173,0.30) !important;
    color: #DCE2EC !important;
    box-shadow: none !important;
}
.st-key-global_ticker_submit button p,
[data-testid="stFormSubmitButton"] button[key="global_ticker_submit"] p {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}
.stButton > button:hover {
    border-color: rgba(var(--ua-royal-rgb),0.45) !important; color: #B7BEFB !important;
    box-shadow: 0 0 14px rgba(var(--ua-royal-rgb),0.14) !important;
    transform: translateY(-1px);
}
.stButton > button[kind="primary"] {
    background: linear-gradient(135deg, #6470F5, #4B54D8) !important;
    color: #FFFFFF !important; border: none !important; font-weight: 700 !important;
}
.stButton > button[kind="primary"]:hover {
    box-shadow: 0 0 22px rgba(var(--ua-royal-rgb),0.40) !important; filter: brightness(1.06);
}

/* Inputs */
.stTextInput > div > div > input {
    background: var(--ua-surface) !important; border: 1px solid var(--ua-hair) !important;
    border-radius: 8px !important; color: var(--ua-ink) !important;
    font-family: 'Inter', sans-serif !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.stTextInput > div > div > input:focus {
    border-color: rgba(var(--ua-royal-rgb),0.55) !important;
    box-shadow: 0 0 0 3px rgba(var(--ua-royal-rgb),0.10) !important; outline: none !important;
}
.stTextInput > div > div > input::placeholder { color: var(--ua-ink-mut) !important; }

/* Selectbox */
.stSelectbox > div > div {
    background: var(--ua-surface) !important; border: 1px solid var(--ua-hair) !important;
    border-radius: 8px !important; color: var(--ua-ink) !important; font-family: 'Inter', sans-serif !important;
}

/* Multiselect */
.stMultiSelect > div > div {
    background: var(--ua-surface) !important; border: 1px solid var(--ua-hair) !important;
    border-radius: 8px !important;
}
.stMultiSelect span[data-baseweb="tag"] {
    background: rgba(var(--ua-green-rgb),0.10) !important; border-color: rgba(var(--ua-green-rgb),0.25) !important;
    color: var(--ua-green) !important;
}

/* Number / Date input */
.stNumberInput > div > div > input,
.stDateInput > div > div > input {
    background: var(--ua-surface) !important; border: 1px solid var(--ua-hair) !important;
    border-radius: 8px !important; color: var(--ua-ink) !important; font-family: 'Inter', sans-serif !important;
}

/* Sliders */
.stSlider [data-baseweb="slider"] [role="progressbar"] { background: linear-gradient(90deg, var(--ua-green), var(--ua-cyan)) !important; }
.stSlider [data-baseweb="thumb"] { background: var(--ua-green) !important; border-color: var(--ua-green) !important; box-shadow: 0 0 8px rgba(var(--ua-green-rgb),0.5) !important; }

/* Toggle */
.stToggle [data-baseweb="switch"] [data-checked="true"] { background: var(--ua-green) !important; }

/* Progress bars */
.stProgress > div > div > div { background: linear-gradient(90deg, var(--ua-green), var(--ua-cyan)) !important; border-radius: 4px !important; }
.stProgress > div > div { background: var(--ua-hair-3) !important; border-radius: 4px !important; }

/* Dividers */
hr { border-color: var(--ua-hair-3) !important; opacity: 1 !important; }

/* Spinner */
.stSpinner > div { border-top-color: var(--ua-green) !important; }

/* H1/H2/H3 */
h1, h2, h3 { color: var(--ua-ink) !important; font-family: 'Inter', sans-serif !important; font-weight: 700 !important; letter-spacing: -0.3px !important; }
h1 { font-size: 1.75rem !important; }
h2 { font-size: 1.3rem !important; }
h3 { font-size: 1.05rem !important; }
p  { color: var(--ua-text-mid) !important; font-family: 'Inter', sans-serif !important; }

/* Radio / Checkbox */
.stRadio label, .stCheckbox label { color: var(--ua-text-mid) !important; font-family: 'Inter', sans-serif !important; }

/* Caption */
.stCaption, small { color: var(--ua-text-cap) !important; font-family: 'Inter', sans-serif !important; }

/* Dataframe */
[data-testid="stDataFrame"] { border: 1px solid var(--ua-hair-2) !important; border-radius: 10px !important; overflow: hidden !important; }

/* Alerts */
.stAlert { border-radius: 10px !important; border: none !important; }

/* Success/Info/Warning/Error alerts (dark-friendly backgrounds) */
div[data-testid="stAlertContainer"][data-baseweb="notification"][kind="success"] { background: rgba(var(--ua-green-rgb),0.08) !important; border: 1px solid rgba(var(--ua-green-rgb),0.2) !important; }
div[data-testid="stAlertContainer"][data-baseweb="notification"][kind="info"]    { background: rgba(var(--ua-cyan-rgb),0.08) !important; border: 1px solid rgba(var(--ua-cyan-rgb),0.2) !important; }
div[data-testid="stAlertContainer"][data-baseweb="notification"][kind="warning"] { background: rgba(245,158,11,0.08) !important; border: 1px solid rgba(245,158,11,0.2) !important; }
div[data-testid="stAlertContainer"][data-baseweb="notification"][kind="error"]   { background: rgba(var(--ua-red-rgb),0.08) !important; border: 1px solid rgba(var(--ua-red-rgb),0.2) !important; }

/* ── Page-entry animation ────────────────────────────────────────────────── */
@keyframes ua_page_in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.block-container > div:first-child {
    animation: ua_page_in 0.4s cubic-bezier(0.4,0,0.2,1) both;
}

/* ── Selectbox / dropdown dark overlay ──────────────────────────────────── */
[data-baseweb="popover"] [data-baseweb="menu"],
[data-baseweb="select"] [data-baseweb="popover"],
ul[data-baseweb="menu"] {
    background: var(--ua-bg-card) !important;
    border: 1px solid rgba(var(--ua-onbg-rgb),0.09) !important;
    border-radius: 10px !important;
    box-shadow: 0 16px 48px rgba(var(--ua-shadow-rgb),calc(0.6*var(--ua-shadow-k))) !important;
}
[data-baseweb="menu"] li,
[data-baseweb="option"] {
    background: transparent !important;
    color: var(--ua-ink-soft) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.83rem !important;
}
[data-baseweb="option"]:hover,
[data-baseweb="option"][aria-selected="true"] {
    background: rgba(var(--ua-royal-rgb),0.12) !important;
    color: var(--ua-ink) !important;
}

/* ── Focus-visible keyboard ring ────────────────────────────────────────── */
*:focus-visible {
    outline: 2px solid rgba(var(--ua-royal-rgb),0.60) !important;
    outline-offset: 2px !important;
    border-radius: 6px;
}
.stButton > button:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--ua-royal-rgb),0.30) !important;
    outline: none !important;
}

/* ── Empty state component ──────────────────────────────────────────────── */
.ua-empty {
    text-align: center;
    padding: 48px 24px;
    background: rgba(var(--ua-card-rgb),0.5);
    border: 1px dashed var(--ua-hair);
    border-radius: 14px;
    font-family: 'Inter', sans-serif;
    margin: 12px 0;
}
.ua-empty-icon  { font-size: 2.4rem; margin-bottom: 12px; opacity: 0.5; }
.ua-empty-title { font-size: 0.94rem; font-weight: 600; color: var(--ua-ink); margin-bottom: 6px; }
.ua-empty-body  { font-size: 0.80rem; color: var(--ua-ink-mut); line-height: 1.55; max-width: 320px; margin: 0 auto; }

/* ── Tooltip dark styling ────────────────────────────────────────────────── */
[data-baseweb="tooltip"] [role="tooltip"] {
    background: var(--ua-bg-raised) !important;
    color: var(--ua-ink) !important;
    border: 1px solid rgba(var(--ua-onbg-rgb),0.1) !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.78rem !important;
    box-shadow: 0 8px 24px rgba(var(--ua-shadow-rgb),calc(0.5*var(--ua-shadow-k))) !important;
}

/* ── Code blocks ─────────────────────────────────────────────────────────── */
code, pre {
    background: rgba(var(--ua-card-rgb),0.9) !important;
    color: var(--ua-cyan) !important;
    border: 1px solid var(--ua-border) !important;
    border-radius: 6px !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
    font-size: 0.82rem !important;
}

/* ── Smooth section dividers ─────────────────────────────────────────────── */
.ua-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--ua-green-rgb),0.18), rgba(var(--ua-cyan-rgb),0.10) 40%, rgba(var(--ua-purple-rgb),0.10) 70%, transparent);
    border: none;
    margin: 18px 0;
}

/* ── Chip / tag component ────────────────────────────────────────────────── */
.ua-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
    padding: 3px 9px; border-radius: 20px;
    font-family: 'Inter', sans-serif;
    border: 1px solid currentColor;
    transition: all 0.15s ease;
}
.ua-chip:hover { filter: brightness(1.15); }
.ua-chip.bull  { color: var(--ua-green); background: rgba(var(--ua-green-rgb),0.08); }
.ua-chip.bear  { color: var(--ua-red); background: rgba(var(--ua-red-rgb),0.08); }
.ua-chip.neut  { color: var(--ua-ink-label); background: rgba(var(--ua-label-rgb),0.08); }
.ua-chip.pro   { color: var(--ua-purple); background: rgba(var(--ua-purple-rgb),0.10); }

/* ── Modern keyframes ────────────────────────────────────────────────────── */
@keyframes ua_pulse_ring {
    0%   { box-shadow: 0 0 0 0   rgba(var(--ua-green-rgb),0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(var(--ua-green-rgb),0);    }
    100% { box-shadow: 0 0 0 0   rgba(var(--ua-green-rgb),0);    }
}
@keyframes ua_live_dot {
    0%, 100% { opacity: 1;   transform: scale(1);   }
    50%       { opacity: 0.4; transform: scale(1.35); }
}
@keyframes ua_gradient_x {
    0%, 100% { background-position: 0%   50%; }
    50%       { background-position: 100% 50%; }
}
@keyframes ua_slide_up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
}
@keyframes ua_pop_in {
    0%   { opacity: 0; transform: scale(0.92); }
    60%  { transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1);    }
}
@keyframes ua_glow_pulse_green {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50%       { box-shadow: var(--ua-glow-green); }
}
@keyframes ua_glow_pulse_red {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50%       { box-shadow: var(--ua-glow-red); }
}
@keyframes ua_border_spin {
    0%   { background-position: 0%   50%; }
    100% { background-position: 200% 50%; }
}
@keyframes ua_number_in {
    from { opacity: 0; transform: translateY(8px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* ── Live dot — universal ────────────────────────────────────────────────── */
.ua-pulse-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ua-green);
    animation: ua_live_dot 1.8s ease-in-out infinite;
    vertical-align: middle;
    margin-right: 5px;
}
.ua-pulse-dot.bear { background: var(--ua-red); }
.ua-pulse-dot.amber { background: var(--ua-amber); }

/* Pulsing ring variant (for score numbers etc.) */
.ua-pulse-ring {
    animation: ua_pulse_ring 2.2s cubic-bezier(0.455,0.03,0.515,0.955) infinite;
}

/* ── Glassmorphism card ───────────────────────────────────────────────────── */
.ua-glass {
    background: rgba(var(--ua-card-rgb),0.75);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--ua-hair);
    border-radius: var(--ua-radius);
    box-shadow: var(--ua-shadow);
}
.ua-glass:hover {
    border-color: rgba(var(--ua-onbg-rgb),0.14);
    box-shadow: var(--ua-shadow-lg);
}

/* ── Animated gradient border card ──────────────────────────────────────── */
.ua-gradient-border {
    position: relative;
    background: var(--ua-bg-card);
    border-radius: var(--ua-radius);
    padding: 1px;           /* the 1px exposes the pseudo element underneath */
}
.ua-gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--ua-green), var(--ua-cyan), var(--ua-purple), var(--ua-green));
    background-size: 300% 300%;
    animation: ua_border_spin 4s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.6;
}

/* ── Bull/Bear glow cards ────────────────────────────────────────────────── */
.ua-card-bull {
    background: rgba(var(--ua-green-rgb),0.04);
    border: 1px solid rgba(var(--ua-green-rgb),0.18);
    border-radius: var(--ua-radius);
    animation: ua_glow_pulse_green 3.5s ease-in-out infinite;
}
.ua-card-bear {
    background: rgba(var(--ua-red-rgb),0.04);
    border: 1px solid rgba(var(--ua-red-rgb),0.18);
    border-radius: var(--ua-radius);
    animation: ua_glow_pulse_red 3.5s ease-in-out infinite;
}

/* ── Animated gradient text ─────────────────────────────────────────────── */
.ua-gradient-text {
    background: linear-gradient(135deg, #6470F5 0%, #8B7BF7 52%, #D4B26A 118%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: ua_gradient_x 5s ease infinite;
}

/* ── Slide-up stagger animations ─────────────────────────────────────────── */
.ua-slide-up         { animation: ua_slide_up 0.4s cubic-bezier(0.4,0,0.2,1) both; }
.ua-slide-up-d1      { animation: ua_slide_up 0.4s 0.05s cubic-bezier(0.4,0,0.2,1) both; }
.ua-slide-up-d2      { animation: ua_slide_up 0.4s 0.10s cubic-bezier(0.4,0,0.2,1) both; }
.ua-slide-up-d3      { animation: ua_slide_up 0.4s 0.15s cubic-bezier(0.4,0,0.2,1) both; }
.ua-slide-up-d4      { animation: ua_slide_up 0.4s 0.20s cubic-bezier(0.4,0,0.2,1) both; }

/* Pop in (numbers, scores) */
.ua-pop-in           { animation: ua_pop_in 0.45s cubic-bezier(0.4,0,0.2,1) both; }
.ua-number-in        { animation: ua_number_in 0.5s 0.1s cubic-bezier(0.4,0,0.2,1) both; }

/* ── Score badge — circular ───────────────────────────────────────────────── */
.ua-score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.5px;
    position: relative;
    font-family: 'Inter', sans-serif;
}
.ua-score-badge.bull {
    background: rgba(var(--ua-green-rgb),0.12);
    color: var(--ua-green);
    box-shadow: 0 0 0 2px rgba(var(--ua-green-rgb),0.3), inset 0 0 12px rgba(var(--ua-green-rgb),0.08);
}
.ua-score-badge.bear {
    background: rgba(var(--ua-red-rgb),0.12);
    color: var(--ua-red);
    box-shadow: 0 0 0 2px rgba(var(--ua-red-rgb),0.3), inset 0 0 12px rgba(var(--ua-red-rgb),0.08);
}
.ua-score-badge.neut {
    background: rgba(var(--ua-label-rgb),0.10);
    color: var(--ua-ink-mut);
    box-shadow: 0 0 0 2px rgba(var(--ua-label-rgb),0.2);
}

/* ── Live section label ──────────────────────────────────────────────────── */
.ua-live-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ua-green);
    background: rgba(var(--ua-green-rgb),0.07);
    border: 1px solid rgba(var(--ua-green-rgb),0.20);
    border-radius: 20px;
    padding: 3px 12px;
    font-family: 'Inter', sans-serif;
}

/* ── Bento grid ──────────────────────────────────────────────────────────── */
.ua-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.ua-bento-wide  { grid-column: span 2; }
.ua-bento-tall  { grid-row: span 2; }

/* ── Status pill ─────────────────────────────────────────────────────────── */
.ua-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
}
.ua-pill.bull { background: rgba(var(--ua-green-rgb),0.10); color: var(--ua-green); border: 1px solid rgba(var(--ua-green-rgb),0.25); }
.ua-pill.bear { background: rgba(var(--ua-red-rgb),0.10);  color: var(--ua-red); border: 1px solid rgba(var(--ua-red-rgb),0.25); }
.ua-pill.neut { background: rgba(var(--ua-label-rgb),0.08); color: var(--ua-ink-mut); border: 1px solid rgba(var(--ua-label-rgb),0.20); }
.ua-pill.pro  { background: rgba(var(--ua-purple-rgb),0.10);  color: #A78BFA; border: 1px solid rgba(var(--ua-purple-rgb),0.25); }

/* ── Personalized decision cockpit ───────────────────────────────────────── */
.ua-cockpit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.ua-cockpit-kpi {
    background: rgba(var(--ua-onbg-rgb),0.025);
    border: 1px solid var(--ua-hair);
    border-radius: 9px;
    padding: 11px 12px;
    min-width: 0;
}
.ua-cockpit-kpi span {
    display: block;
    color: var(--ua-ink-mut);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.ua-cockpit-kpi b {
    display: block;
    color: var(--ua-ink);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}
@media (max-width: 720px) {
    .ua-cockpit-grid { grid-template-columns: 1fr; }
}

/* ── Data table — zebra striped ──────────────────────────────────────────── */
.ua-zebra tr:nth-child(even) td { background: rgba(var(--ua-onbg-rgb),0.015) !important; }

/* ── Streamlit dataframe — dark overrides ─────────────────────────────────── */
[data-testid="stDataFrame"] iframe { border-radius: 10px !important; }
/* Glide Data Grid paints its cells on an underlay canvas. The scroller sits
   above that canvas and must stay transparent; an opaque themed background
   hides every row while leaving a blank, correctly sized rectangle. */
.dvn-scroller { background: transparent !important; }
.dvn-scroller::-webkit-scrollbar       { width: 4px; height: 4px; }
.dvn-scroller::-webkit-scrollbar-thumb { background: rgba(var(--ua-green-rgb),0.22); border-radius: 2px; }

/* ── Better primary button gradient ─────────────────────────────────────── */
.stButton > button[kind="primary"] {
    background: linear-gradient(135deg, #6470F5 0%, #5A52E0 45%, #4B54D8 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 2px 14px rgba(var(--ua-royal-rgb),0.30), 0 1px 3px rgba(var(--ua-shadow-rgb),calc(0.3*var(--ua-shadow-k))) !important;
    transition: all 0.18s cubic-bezier(0.4,0,0.2,1) !important;
}
.stButton > button[kind="primary"]:hover {
    box-shadow: 0 4px 22px rgba(var(--ua-royal-rgb),0.44), 0 2px 6px rgba(var(--ua-shadow-rgb),calc(0.4*var(--ua-shadow-k))) !important;
    filter: brightness(1.06) !important;
    transform: translateY(-1px) !important;
}
.stButton > button[kind="primary"]:active {
    transform: translateY(0) !important;
    filter: brightness(0.97) !important;
}

/* ── Slider track — thicker, more visible ─────────────────────────────────── */
.stSlider [data-baseweb="slider"] {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
.stSlider [data-baseweb="slider"] [role="progressbar"] {
    height: 4px !important;
    background: linear-gradient(90deg, var(--ua-green), var(--ua-cyan)) !important;
}
.stSlider [data-baseweb="thumb"] {
    width: 18px !important; height: 18px !important;
    background: var(--ua-green) !important;
    border: 2px solid var(--ua-bg) !important;
    box-shadow: 0 0 0 2px var(--ua-green), 0 0 10px rgba(var(--ua-green-rgb),0.4) !important;
}

/* ── Section divider accent ──────────────────────────────────────────────── */
.ua-section-rule {
    height: 1px;
    margin: 22px 0 18px;
    background: linear-gradient(90deg,
        rgba(var(--ua-green-rgb),0.25) 0%,
        rgba(var(--ua-cyan-rgb),0.15) 35%,
        rgba(var(--ua-purple-rgb),0.12) 65%,
        transparent 100%);
    border: none;
}

/* ── Scroll-to-top button ─────────────────────────────────────────────────── */
#ua-scroll-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 40px;
    height: 40px;
    background: rgba(var(--ua-green-rgb),0.15);
    border: 1px solid rgba(var(--ua-green-rgb),0.35);
    border-radius: 50%;
    color: var(--ua-green);
    font-size: 18px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, background 0.2s;
    z-index: 9999;
    will-change: transform;
    transform: translate3d(0,0,0);
    backdrop-filter: blur(8px);
}
#ua-scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
}
#ua-scroll-top:hover {
    background: rgba(var(--ua-green-rgb),0.28);
}

/* ── Mobile responsiveness ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    [data-testid="stHorizontalBlock"] > [data-testid="stVerticalBlock"] {
        min-width: 45% !important;
    }
    .hero-title { font-size: 1.9rem !important; }
    .block-container { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .ticker-strip-outer { display: none !important; }
    .ua-bento { grid-template-columns: 1fr !important; }
    .ua-bento-wide { grid-column: span 1 !important; }
    .metric-card, .page-card { padding: 14px !important; }
    .ua-header { flex-direction: column !important; gap: 8px !important; }
    .ua-header-right { text-align: left !important; font-size: 0.72rem !important; }
    #ua-scroll-top { bottom: 16px; right: 16px; }
}

/* ── Skeleton loader ─────────────────────────────────────────────────────── */
@keyframes ua_shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.ua-skeleton {
    background: linear-gradient(
        90deg,
        var(--ua-border-lo) 25%,
        rgba(var(--ua-onbg-rgb),0.09) 50%,
        var(--ua-border-lo) 75%
    );
    background-size: 800px 100%;
    animation: ua_shimmer 1.8s ease-in-out infinite;
    border-radius: 8px;
}
.ua-skeleton-line { height: 14px; margin-bottom: 10px; border-radius: 6px; }
.ua-skeleton-line.sm { width: 40%; height: 11px; }
.ua-skeleton-line.lg { width: 90%; }
.ua-skeleton-line.md { width: 70%; }
.ua-skeleton-block { height: 120px; border-radius: 12px; margin-bottom: 12px; }
.ua-skeleton-chart { height: 220px; border-radius: 12px; }

/* ── Chart container card ────────────────────────────────────────────────── */
.ua-chart-card {
    background: rgba(var(--ua-card-rgb),0.75);
    border: 1px solid var(--ua-border);
    border-radius: 14px;
    padding: 18px 20px 14px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}
.ua-chart-card:hover {
    border-color: rgba(var(--ua-green-rgb),0.16);
    box-shadow: 0 0 28px rgba(var(--ua-green-rgb),0.06), 0 12px 32px rgba(var(--ua-shadow-rgb),calc(0.4*var(--ua-shadow-k)));
    transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
}
.ua-chart-title {
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--ua-ink);
    letter-spacing: -0.1px;
    margin-bottom: 3px;
    font-family: 'Inter', sans-serif;
}
.ua-chart-subtitle {
    font-size: 0.68rem;
    color: var(--ua-ink-mut);
    margin-bottom: 14px;
    font-family: 'Inter', sans-serif;
    line-height: 1.4;
}
.ua-chart-caption {
    font-size: 0.63rem;
    color: var(--ua-ink-dim-2);
    margin-top: 8px;
    font-family: 'Inter', sans-serif;
    font-style: italic;
    line-height: 1.45;
}
.ua-chart-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.60rem;
    font-weight: 700;
    color: var(--ua-ink-label);
    background: rgba(var(--ua-label-rgb),0.08);
    border: 1px solid rgba(var(--ua-label-rgb),0.15);
    border-radius: 4px;
    padding: 2px 7px;
    letter-spacing: 0.06em;
    font-family: 'Inter', sans-serif;
}

/* ── Pro upgrade CTA card ────────────────────────────────────────────────── */
.ua-pro-cta {
    background: linear-gradient(135deg, rgba(var(--ua-purple-rgb),0.12) 0%, rgba(var(--ua-purple-rgb),0.06) 100%);
    border: 1px solid rgba(var(--ua-purple-rgb),0.3);
    border-radius: 14px;
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}
.ua-pro-cta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ua-purple), var(--ua-cyan), var(--ua-purple));
    background-size: 200% 100%;
    animation: ua_gradient_x 4s ease infinite;
}
.ua-pro-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #A78BFA;
    background: rgba(var(--ua-purple-rgb),0.12);
    border: 1px solid rgba(var(--ua-purple-rgb),0.25);
    border-radius: 20px;
    padding: 3px 10px;
    margin-bottom: 10px;
    display: inline-block;
}
.ua-pro-cta-title {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--ua-ink);
    margin-bottom: 5px;
    letter-spacing: -0.1px;
}
.ua-pro-cta-body {
    font-size: 0.80rem;
    color: var(--ua-ink-mut);
    line-height: 1.55;
    margin-bottom: 14px;
}

/* ── Better error state ──────────────────────────────────────────────────── */
.ua-error {
    text-align: center;
    padding: 36px 24px;
    background: rgba(var(--ua-red-rgb),0.04);
    border: 1px dashed rgba(var(--ua-red-rgb),0.18);
    border-radius: 14px;
    font-family: 'Inter', sans-serif;
    margin: 12px 0;
}
.ua-error-icon  { font-size: 2rem; margin-bottom: 10px; opacity: 0.6; }
.ua-error-title { font-size: 0.88rem; font-weight: 600; color: #FF8888; margin-bottom: 4px; }
.ua-error-body  { font-size: 0.76rem; color: var(--ua-ink-mut); line-height: 1.5; }

/* ── Loading pulse state ─────────────────────────────────────────────────── */
.ua-loading-card {
    background: rgba(var(--ua-card-rgb),0.7);
    border: 1px solid var(--ua-hair-2);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 10px;
    font-family: 'Inter', sans-serif;
}

/* ── Score trend indicator ───────────────────────────────────────────────── */
.ua-trend-up   { color: var(--ua-green); font-weight: 700; font-size: 0.80rem; }
.ua-trend-down { color: var(--ua-red); font-weight: 700; font-size: 0.80rem; }
.ua-trend-flat { color: var(--ua-ink-label); font-weight: 700; font-size: 0.80rem; }

/* ── Inline score bar (for signal tables) ────────────────────────────────── */
.ua-score-bar-track {
    height: 4px;
    background: var(--ua-hair-3);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}
.ua-score-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.ua-score-bar-fill.bull { background: linear-gradient(90deg, var(--ua-green), var(--ua-cyan)); }
.ua-score-bar-fill.bear { background: linear-gradient(90deg, var(--ua-red), #FF7777); }
.ua-score-bar-fill.neut { background: rgba(var(--ua-label-rgb),0.5); }

/* ── Section eyebrow label ───────────────────────────────────────────────── */
.ua-eyebrow {
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ua-green);
    font-family: 'Inter', sans-serif;
    margin-bottom: 4px;
}

/* ── Premium data table with sort indication ─────────────────────────────── */
.ua-table-sortable th { cursor: pointer; user-select: none; }
.ua-table-sortable th:hover { color: var(--ua-text-hi) !important; }
.ua-table-sort-asc::after  { content: ' ▲'; font-size: 0.55rem; opacity: 0.6; }
.ua-table-sort-desc::after { content: ' ▼'; font-size: 0.55rem; opacity: 0.6; }

/* ── Category filter pills (signal dashboard, screener) ──────────────────── */
.ua-filter-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.ua-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid var(--ua-hair);
    background: rgba(var(--ua-onbg-rgb),0.03);
    color: var(--ua-ink-mut);
    white-space: nowrap;
}
.ua-filter-pill:hover {
    border-color: rgba(var(--ua-green-rgb),0.3);
    color: var(--ua-ink);
    background: rgba(var(--ua-green-rgb),0.06);
}
.ua-filter-pill.active {
    border-color: rgba(var(--ua-green-rgb),0.4);
    color: var(--ua-green);
    background: rgba(var(--ua-green-rgb),0.08);
    font-weight: 700;
}

/* ── Ticker banner (at top of TDD, Watchlist rows) ───────────────────────── */
.ua-ticker-banner {
    background: rgba(var(--ua-card-rgb),0.9);
    border: 1px solid var(--ua-border);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-family: 'Inter', sans-serif;
    margin-bottom: 16px;
}
.ua-ticker-symbol {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--ua-ink);
    letter-spacing: -0.5px;
}
.ua-ticker-name {
    font-size: 0.80rem;
    color: var(--ua-ink-mut);
}
.ua-ticker-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ua-ink);
    letter-spacing: -0.3px;
}

/* ── Improved content divider with label ─────────────────────────────────── */
.ua-label-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 14px;
    font-family: 'Inter', sans-serif;
}
.ua-label-divider span {
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ua-ink-mut);
    white-space: nowrap;
}
.ua-label-divider::before,
.ua-label-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ua-hair-3);
}

/* ── Watchlist row hover ─────────────────────────────────────────────────── */
.ua-watchlist-row {
    transition: background 0.15s ease;
}
.ua-watchlist-row:hover {
    background: rgba(var(--ua-green-rgb),0.04) !important;
}

/* ── De-neon (2026-07-13) ─────────────────────────────────────────────────────
   The app leaned heavily on glowing numbers — dozens of inline
   `text-shadow:0 0 …px <color>` glows that read consumer/gamer rather than
   institutional. This one !important author rule neutralises every 0-offset
   GLOW shadow app-wide (an !important author declaration overrides a
   non-important inline style), without editing ~24 scattered call sites and
   without touching legibility shadows (which use a vertical offset, not 0 0).
   Numbers keep their semantic colour; they just sit flat. Reversible: delete
   this block.
   NOTE on the selector: browsers RE-SERIALISE inline styles, so the source
   `text-shadow:0 0 20px <color>` becomes `text-shadow: <color> 0px 0px 20px` in
   the DOM. The reliable, verified match for a zero-offset GLOW is therefore the
   substring `0px 0px` (confirmed live on the Signal Dashboard). This also
   matches 0px-0px box-shadows, but setting text-shadow:none on those is a
   harmless no-op; legibility text-shadows use a vertical offset and are
   untouched. */
[style*="0px 0px"] { text-shadow: none !important; }

/* ── Institutional surface pass (2026-07-21) ──────────────────────────────
   Reduce motion, glow, glass, and decorative gradients across every page.
   Directional color remains meaningful; surfaces and typography stay quiet. */
[data-testid="stAppViewContainer"], .main {
    background: #0A0D12 !important;
    background-image: none !important;
}
section[data-testid="stSidebar"] {
    background: #0D1016 !important;
    border-right-color: var(--ua-border) !important;
}
.ua-header::after, .ua-card-shine::after { display: none !important; }
.ua-wordmark span {
    background: linear-gradient(120deg,
        var(--ua-brand-alpha-1) 0%,
        var(--ua-brand-alpha-2) 58%,
        var(--ua-brand-alpha-3) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--ua-brand-alpha-2) !important;
    animation: none !important;
}
.metric-card, .page-card, .stat-box,
[data-testid="stMetric"], [data-testid="stExpander"] {
    background: var(--ua-bg-card) !important;
    backdrop-filter: none !important;
    border-color: var(--ua-hair) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transform: none !important;
}
.metric-card p, .page-card p, .stat-box p,
[data-testid="stMetric"] [data-testid="stMetricLabel"],
[data-testid="stExpander"] p,
[data-testid="stAlert"] p,
[data-testid="stForm"] label p,
[data-testid="stVerticalBlockBorderWrapper"] p {
    color: var(--ua-text-mid) !important;
}
.metric-card .stCaption, .page-card .stCaption, .stat-box .stCaption,
[data-testid="stMetric"] [data-testid="stMetricDelta"],
[data-testid="stExpander"] .stCaption,
[data-testid="stAlert"] .stCaption,
[data-testid="stForm"] .stCaption,
[data-testid="stVerticalBlockBorderWrapper"] .stCaption {
    color: var(--ua-text-cap) !important;
}
[data-testid="stTextInput"] input,
[data-testid="stNumberInput"] input,
[data-testid="stTextArea"] textarea,
[data-baseweb="select"] span {
    color: var(--ua-text-hi) !important;
}

/* Compact notification tray: rendered in normal document flow beneath its
   trigger, never as an auto-flipping popover that can grow upward. */
.ua-notification-panel-marker {
    display: block;
    height: 0;
    overflow: hidden;
}
.ua-notification-title {
    color: var(--ua-text-cap) !important;
    font-size: 0.60rem;
    font-weight: 750;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    padding-bottom: 7px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--ua-hair);
}
.ua-notification-item {
    background: #151A22;
    border: 1px solid var(--ua-hair);
    border-left-width: 2px;
    border-radius: 6px;
    padding: 8px 9px;
    margin-bottom: 6px;
}
.ua-notification-kicker {
    color: var(--ua-text-cap) !important;
    font-size: 0.56rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.ua-notification-heading {
    color: var(--ua-text-hi) !important;
    font-size: 0.73rem;
    font-weight: 650;
    line-height: 1.35;
    margin-top: 2px;
}
.ua-notification-copy {
    color: var(--ua-text-lo) !important;
    font-size: 0.67rem;
    line-height: 1.42;
    margin-top: 3px;
}
.ua-notification-time {
    color: var(--ua-text-cap) !important;
    font-size: 0.57rem;
    margin-top: 4px;
}

/* Legacy page helpers still carry the former muted palette inline. Lift those
   values globally into the current restrained contrast scale without touching
   semantic bullish/bearish colors or turning body copy bright white. */
[style*="color:var(--ua-ink-mut)" i] { color: var(--ua-text-lo) !important; }
[style*="color: var(--ua-ink-mut)" i] { color: var(--ua-text-lo) !important; }
[style*="color:var(--ua-ink-label)" i] { color: var(--ua-text-cap) !important; }
[style*="color: var(--ua-ink-label)" i] { color: var(--ua-text-cap) !important; }
[style*="color:var(--ua-ink-dim-2)" i], [style*="color:var(--ua-ink-dim)" i] {
    color: #7F899A !important;
}

/* Light-mode completion: legacy render helpers still emit a bounded set of
   dark-theme text literals. Match only a real `color` declaration at the
   beginning of an inline style or immediately after a semicolon. This avoids
   the dangerous broad `style*=color` pattern, which also catches background-
   color and border-color, and leaves Python color parsing + Plotly untouched.
   Browsers serialize inline hex values to rgb(), so both forms are covered. */
html[data-ua-theme="light"] :is(
    [style^="color: #00D566" i], [style*="; color: #00D566" i],
    [style^="color:#00D566" i],  [style*=";color:#00D566" i],
    [style^="color: rgb(0, 213, 102)" i], [style*="; color: rgb(0, 213, 102)" i],
    [style^="color: #34D399" i], [style*="; color: #34D399" i],
    [style*=";color:#34D399" i],
    [style^="color:#34D399" i],  [style*=";color:#34D399" i],
    [style^="color: rgb(52, 211, 153)" i], [style*="; color: rgb(52, 211, 153)" i],
    [style^="color: #00A847" i], [style*="; color: #00A847" i],
    [style*=";color:#00A847" i],
    [style^="color: rgb(0, 168, 71)" i], [style*="; color: rgb(0, 168, 71)" i],
    [style^="color: #00C853" i], [style*="; color: #00C853" i],
    [style*=";color:#00C853" i],
    [style^="color: rgb(0, 200, 83)" i], [style*="; color: rgb(0, 200, 83)" i],
    [style^="color: #22C55E" i], [style*="; color: #22C55E" i],
    [style*=";color:#22C55E" i],
    [style^="color: rgb(34, 197, 94)" i], [style*="; color: rgb(34, 197, 94)" i],
    [style^="color: #35C98B" i], [style*="; color: #35C98B" i],
    [style*=";color:#35C98B" i],
    [style^="color: rgb(53, 201, 139)" i], [style*="; color: rgb(53, 201, 139)" i]
) { color: var(--ua-green) !important; opacity: 1 !important; }

html[data-ua-theme="light"] :is(
    [style^="color: #FF4444" i], [style*="; color: #FF4444" i],
    [style^="color:#FF4444" i],  [style*=";color:#FF4444" i],
    [style^="color: rgb(255, 68, 68)" i], [style*="; color: rgb(255, 68, 68)" i],
    [style^="color: #FF2222" i], [style*="; color: #FF2222" i],
    [style*=";color:#FF2222" i],
    [style^="color: rgb(255, 34, 34)" i], [style*="; color: rgb(255, 34, 34)" i],
    [style^="color: #CC3333" i], [style*="; color: #CC3333" i],
    [style*=";color:#CC3333" i],
    [style^="color: rgb(204, 51, 51)" i], [style*="; color: rgb(204, 51, 51)" i],
    [style^="color: #FF4D6A" i], [style*="; color: #FF4D6A" i],
    [style*=";color:#FF4D6A" i],
    [style^="color: rgb(255, 77, 106)" i], [style*="; color: rgb(255, 77, 106)" i],
    [style^="color: #FF6B6B" i], [style*="; color: #FF6B6B" i],
    [style*=";color:#FF6B6B" i],
    [style^="color: rgb(255, 107, 107)" i], [style*="; color: rgb(255, 107, 107)" i],
    [style^="color: #E06C75" i], [style*="; color: #E06C75" i],
    [style*=";color:#E06C75" i],
    [style^="color: rgb(224, 108, 117)" i], [style*="; color: rgb(224, 108, 117)" i]
) { color: var(--ua-red) !important; opacity: 1 !important; }

html[data-ua-theme="light"] :is(
    [style^="color: #00C8E0" i], [style*="; color: #00C8E0" i],
    [style^="color:#00C8E0" i],  [style*=";color:#00C8E0" i],
    [style^="color: rgb(0, 200, 224)" i], [style*="; color: rgb(0, 200, 224)" i],
    [style^="color: #0EA5E9" i], [style*="; color: #0EA5E9" i],
    [style*=";color:#0EA5E9" i],
    [style^="color: rgb(14, 165, 233)" i], [style*="; color: rgb(14, 165, 233)" i],
    [style^="color: #4A9EFF" i], [style*="; color: #4A9EFF" i],
    [style*=";color:#4A9EFF" i],
    [style^="color: rgb(74, 158, 255)" i], [style*="; color: rgb(74, 158, 255)" i],
    [style^="color: #55A7D8" i], [style*="; color: #55A7D8" i],
    [style*=";color:#55A7D8" i],
    [style^="color: rgb(85, 167, 216)" i], [style*="; color: rgb(85, 167, 216)" i],
    [style^="color: #67E8F9" i], [style*="; color: #67E8F9" i],
    [style*=";color:#67E8F9" i],
    [style^="color: rgb(103, 232, 249)" i], [style*="; color: rgb(103, 232, 249)" i],
    [style^="color: #72D6E2" i], [style*="; color: #72D6E2" i],
    [style*=";color:#72D6E2" i],
    [style^="color: rgb(114, 214, 226)" i], [style*="; color: rgb(114, 214, 226)" i]
) { color: var(--ua-cyan) !important; opacity: 1 !important; }

html[data-ua-theme="light"] :is(
    [style^="color: #F59E0B" i], [style*="; color: #F59E0B" i],
    [style^="color:#F59E0B" i],  [style*=";color:#F59E0B" i],
    [style^="color: rgb(245, 158, 11)" i], [style*="; color: rgb(245, 158, 11)" i],
    [style^="color: #FFB347" i], [style*="; color: #FFB347" i],
    [style*=";color:#FFB347" i],
    [style^="color: rgb(255, 179, 71)" i], [style*="; color: rgb(255, 179, 71)" i],
    [style^="color: #E8C766" i], [style*="; color: #E8C766" i],
    [style*=";color:#E8C766" i],
    [style^="color: rgb(232, 199, 102)" i], [style*="; color: rgb(232, 199, 102)" i],
    [style^="color: #E7C063" i], [style*="; color: #E7C063" i],
    [style*=";color:#E7C063" i],
    [style^="color: rgb(231, 192, 99)" i], [style*="; color: rgb(231, 192, 99)" i],
    [style^="color: #D8C08A" i], [style*="; color: #D8C08A" i],
    [style*=";color:#D8C08A" i],
    [style^="color: rgb(216, 192, 138)" i], [style*="; color: rgb(216, 192, 138)" i],
    [style^="color: #F97316" i], [style*="; color: #F97316" i],
    [style*=";color:#F97316" i],
    [style^="color: rgb(249, 115, 22)" i], [style*="; color: rgb(249, 115, 22)" i]
) { color: var(--ua-amber) !important; opacity: 1 !important; }

html[data-ua-theme="light"] :is(
    [style^="color: #7C3AED" i], [style*="; color: #7C3AED" i],
    [style*=";color:#7C3AED" i],
    [style^="color: rgb(124, 58, 237)" i], [style*="; color: rgb(124, 58, 237)" i],
    [style^="color: #A78BFA" i], [style*="; color: #A78BFA" i],
    [style*=";color:#A78BFA" i],
    [style^="color: rgb(167, 139, 250)" i], [style*="; color: rgb(167, 139, 250)" i],
    [style^="color: #A855F7" i], [style*="; color: #A855F7" i],
    [style*=";color:#A855F7" i],
    [style^="color: rgb(168, 85, 247)" i], [style*="; color: rgb(168, 85, 247)" i],
    [style^="color: #818CF8" i], [style*="; color: #818CF8" i],
    [style*=";color:#818CF8" i],
    [style^="color: rgb(129, 140, 248)" i], [style*="; color: rgb(129, 140, 248)" i],
    [style^="color: #B79CFF" i], [style*="; color: #B79CFF" i],
    [style*=";color:#B79CFF" i],
    [style^="color: rgb(183, 156, 255)" i], [style*="; color: rgb(183, 156, 255)" i]
) { color: var(--ua-purple) !important; opacity: 1 !important; }

html[data-ua-theme="light"] :is(
    [style^="color: #8892AA" i], [style*="; color: #8892AA" i],
    [style*=";color:#8892AA" i],
    [style^="color: rgb(136, 146, 170)" i], [style*="; color: rgb(136, 146, 170)" i],
    [style^="color: #6B7FBF" i], [style*="; color: #6B7FBF" i],
    [style*=";color:#6B7FBF" i],
    [style^="color: rgb(107, 127, 191)" i], [style*="; color: rgb(107, 127, 191)" i],
    [style^="color: #6B7280" i], [style*="; color: #6B7280" i],
    [style*=";color:#6B7280" i],
    [style^="color: rgb(107, 114, 128)" i], [style*="; color: rgb(107, 114, 128)" i]
) { color: var(--ua-neutral) !important; opacity: 1 !important; }

html[data-ua-theme="light"] :is(
    [style^="color: #B8C0D4" i], [style*="; color: #B8C0D4" i],
    [style*=";color:#B8C0D4" i],
    [style^="color: rgb(184, 192, 212)" i], [style*="; color: rgb(184, 192, 212)" i],
    [style^="color: #C5CCDE" i], [style*="; color: #C5CCDE" i],
    [style*=";color:#C5CCDE" i],
    [style^="color: rgb(197, 204, 222)" i], [style*="; color: rgb(197, 204, 222)" i],
    [style^="color: #E8EEFF" i], [style*="; color: #E8EEFF" i],
    [style*=";color:#E8EEFF" i],
    [style^="color: rgb(232, 238, 255)" i], [style*="; color: rgb(232, 238, 255)" i]
) { color: var(--ua-ink) !important; }

/* The premium theme defines these controls after the shared header and pins
   dark fills with !important. The light-prefixed rules deliberately carry
   greater specificity, so pills, ticker choices, and selected states remain
   readable without relying on generated Streamlit class names. */
html[data-ua-theme="light"] [data-testid="stButtonGroup"] button,
html[data-ua-theme="light"] [data-testid="stButtonGroup"] label {
    background: var(--ua-bg-card) !important;
    border-color: var(--ua-hair) !important;
    color: var(--ua-ink-soft) !important;
}
html[data-ua-theme="light"] [data-testid="stButtonGroup"] button p,
html[data-ua-theme="light"] [data-testid="stButtonGroup"] label p {
    color: var(--ua-ink-soft) !important;
}
html[data-ua-theme="light"] [data-testid="stButtonGroup"] button:hover,
html[data-ua-theme="light"] [data-testid="stButtonGroup"] label:hover {
    background: rgba(var(--ua-royal-rgb),0.06) !important;
    border-color: rgba(var(--ua-royal-rgb),0.28) !important;
}
html[data-ua-theme="light"] [data-testid="stButtonGroup"] button[aria-checked="true"],
html[data-ua-theme="light"] [data-testid="stButtonGroup"] button[aria-pressed="true"],
html[data-ua-theme="light"] [data-testid="stButtonGroup"] label:has(input:checked) {
    background: rgba(var(--ua-royal-rgb),0.12) !important;
    border-color: rgba(var(--ua-royal-rgb),0.42) !important;
    color: var(--ua-ink) !important;
}
html[data-ua-theme="light"] [data-testid="stButtonGroup"] button[aria-checked="true"] p,
html[data-ua-theme="light"] [data-testid="stButtonGroup"] button[aria-pressed="true"] p,
html[data-ua-theme="light"] [data-testid="stButtonGroup"] label:has(input:checked) p {
    color: var(--ua-ink) !important;
}

html[data-ua-theme="light"] .ua-guide-shell {
    background:
        radial-gradient(circle at 92% -10%, rgba(var(--ua-purple-rgb),0.08), transparent 34%),
        var(--ua-bg-card) !important;
    border-color: rgba(var(--ua-cyan-rgb),0.24) !important;
}
html[data-ua-theme="light"] .ua-guide-kicker { color: var(--ua-cyan) !important; }
html[data-ua-theme="light"] .ua-guide-title { color: var(--ua-ink) !important; }
html[data-ua-theme="light"] .ua-guide-intro,
html[data-ua-theme="light"] .ua-guide-step-body { color: var(--ua-ink-mut) !important; }
html[data-ua-theme="light"] .ua-guide-step-title { color: var(--ua-ink-soft) !important; }
html[data-ua-theme="light"] .ua-guide-step {
    background: rgba(var(--ua-card-rgb),0.82) !important;
    border-color: var(--ua-hair) !important;
}
html[data-ua-theme="light"] .ua-guide-step:hover {
    background: var(--ua-bg-card) !important;
    border-color: rgba(var(--ua-cyan-rgb),0.24) !important;
}
html[data-ua-theme="light"] .ua-guide-step-num {
    color: var(--ua-cyan) !important;
    border-color: rgba(var(--ua-cyan-rgb),0.30) !important;
}
.metric-card:hover, .page-card:hover,
[data-testid="stMetric"]:hover, [data-testid="stExpander"]:hover {
    border-color: rgba(var(--ua-onbg-rgb),0.14) !important;
    box-shadow: none !important;
    transform: none !important;
}
.stButton > button, .stDownloadButton > button,
[data-testid="stPopover"] > button {
    border-radius: 6px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
[data-testid="stPlotlyChart"] {
    background: var(--ua-bg-card) !important;
    border: 1px solid var(--ua-hair) !important;
    border-radius: 8px !important;
    padding: 4px !important;
    box-shadow: none !important;
}
[data-testid="stPlotlyChart"]:hover { box-shadow: none !important; }
.ua-slide-up, .main .block-container,
[data-testid="stMainBlockContainer"] {
    animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}




/* ── Shimmer / Skeleton ──────────────────────────────────────────────────── */
@keyframes ua_shimmer {
  0%   { background-position: -1200px 0; }
  100% { background-position:  1200px 0; }
}
.ua-sk {
  background: linear-gradient(
    90deg,
    rgba(26,30,44,0.9)   0%,
    rgba(42,48,72,0.95)  35%,
    rgba(55,62,90,0.90)  50%,
    rgba(42,48,72,0.95)  65%,
    rgba(26,30,44,0.9)  100%
  );
  background-size: 1200px 100%;
  animation: ua_shimmer 1.8s infinite linear;
  border-radius: 10px;
  border: 1px solid rgba(var(--ua-onbg-rgb),0.05);
}
.ua-sk-line {
  background: linear-gradient(
    90deg,
    rgba(26,30,44,0.9)  0%,
    rgba(42,48,72,0.95) 40%,
    rgba(26,30,44,0.9) 100%
  );
  background-size: 1200px 100%;
  animation: ua_shimmer 1.8s infinite linear;
  border-radius: 4px;
  height: 11px;
  margin-bottom: 8px;
}
.ua-sk-wrap {
  background: rgba(var(--ua-card-rgb),0.8);
  border: 1px solid rgba(var(--ua-onbg-rgb),0.06);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 10px;
}

/* ── Fade-in animation ───────────────────────────────────────────────────── */
@keyframes ua_fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.ua-fade-in {
  animation: ua_fadein 0.28s ease forwards;
}

/* ── Card components ─────────────────────────────────────────────────────── */
.ua-card {
  background: var(--ua-bg-card);
  border: 1px solid rgba(var(--ua-onbg-rgb),0.07);
  border-radius: 12px;
  padding: 16px 20px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  font-family: Inter, -apple-system, sans-serif;
}
.ua-card:hover {
  border-color: rgba(var(--ua-purple-rgb),0.35);
  box-shadow: 0 0 0 1px rgba(var(--ua-purple-rgb),0.15), 0 4px 16px rgba(var(--ua-shadow-rgb),calc(0.35*var(--ua-shadow-k)));
}
.ua-card-green:hover {
  border-color: rgba(var(--ua-green-rgb),0.35);
  box-shadow: 0 0 0 1px rgba(var(--ua-green-rgb),0.12), 0 4px 16px rgba(var(--ua-shadow-rgb),calc(0.35*var(--ua-shadow-k)));
}
.ua-card-red:hover {
  border-color: rgba(var(--ua-red-rgb),0.35);
  box-shadow: 0 0 0 1px rgba(var(--ua-red-rgb),0.12), 0 4px 16px rgba(var(--ua-shadow-rgb),calc(0.35*var(--ua-shadow-k)));
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.ua-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  border: 1px dashed rgba(var(--ua-onbg-rgb),0.12);
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  color: var(--ua-ink-mut);
  font-size: 0.85rem;
  font-family: Inter, -apple-system, sans-serif;
  line-height: 1.6;
}
.ua-empty-icon {
  font-size: 1.6rem;
  margin-bottom: 10px;
  opacity: 0.6;
}
.ua-empty-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ua-ink-soft);
  margin-bottom: 4px;
}

/* ── Metric / stat tile ──────────────────────────────────────────────────── */
.ua-metric {
  background: var(--ua-bg-card);
  border: 1px solid rgba(var(--ua-onbg-rgb),0.07);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: Inter, -apple-system, sans-serif;
  transition: border-color 0.15s ease;
}
.ua-metric-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--ua-ink-mut);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.ua-metric-value {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--ua-ink);
  line-height: 1.15;
}

/* ── Status tags ─────────────────────────────────────────────────────────── */
.ua-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  font-family: Inter, -apple-system, sans-serif;
}
.ua-tag-bull {
  background: rgba(var(--ua-green-rgb),0.12);
  color: var(--ua-green);
  border: 1px solid rgba(var(--ua-green-rgb),0.25);
}
.ua-tag-bear {
  background: rgba(var(--ua-red-rgb),0.12);
  color: var(--ua-red);
  border: 1px solid rgba(var(--ua-red-rgb),0.25);
}
.ua-tag-neutral {
  background: rgba(var(--ua-label-rgb),0.12);
  color: var(--ua-ink-label);
  border: 1px solid rgba(var(--ua-label-rgb),0.25);
}
.ua-tag-pro {
  background: rgba(var(--ua-purple-rgb),0.15);
  color: #A78BFA;
  border: 1px solid rgba(var(--ua-purple-rgb),0.3);
}

/* ── Section divider ─────────────────────────────────────────────────────── */
.ua-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--ua-onbg-rgb),0.07) 20%,
    rgba(var(--ua-onbg-rgb),0.07) 80%,
    transparent 100%
  );
  margin: 18px 0;
}

/* ── Streamlit element polish ────────────────────────────────────────────── */
/* Smoother button transitions */
.stButton > button {
  transition: background-color 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease, opacity 0.15s ease !important;
}
/* Download button same treatment */
.stDownloadButton > button {
  transition: background-color 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease !important;
}
/* Metric delta coloring */
[data-testid="stMetricDelta"] svg { display: none; }
/* Expander header hover */
.streamlit-expanderHeader {
  transition: color 0.15s ease !important;
}
/* Tab underline transition */
.stTabs [data-baseweb="tab"] {
  transition: color 0.15s ease !important;
}
/* Dataframe hover row highlight */
.dvn-scroller:hover td { cursor: default; }

/* ── Page content fade-in on navigation ──────────────────────────────────── */
@keyframes ua_page_in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.main .block-container,
[data-testid="stMainBlockContainer"] {
  animation: ua_page_in 0.22s ease forwards;
}

/* ── Scrollbar styling ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(11,13,18,0.6); }
::-webkit-scrollbar-thumb {
  background: rgba(104,113,155,0.35);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--ua-purple-rgb),0.5); }

/* ── Input / selectbox focus rings ───────────────────────────────────────── */
[data-testid="stTextInput"] input,
[data-testid="stNumberInput"] input,
[data-testid="stTextArea"] textarea {
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
[data-testid="stTextInput"] input:focus,
[data-testid="stNumberInput"] input:focus,
[data-testid="stTextArea"] textarea:focus {
  border-color: rgba(var(--ua-purple-rgb),0.6) !important;
  box-shadow: 0 0 0 2px rgba(var(--ua-purple-rgb),0.15) !important;
  outline: none !important;
}

/* ── Selectbox hover / focus ─────────────────────────────────────────────── */
[data-testid="stSelectbox"] [data-baseweb="select"] > div {
  transition: border-color 0.15s ease !important;
}
[data-testid="stSelectbox"] [data-baseweb="select"] > div:hover {
  border-color: rgba(var(--ua-purple-rgb),0.5) !important;
}

/* ── Alert / info / success / warning boxes ──────────────────────────────── */
[data-testid="stAlert"] {
  border-radius: 10px !important;
  border-width: 1px !important;
  font-family: Inter, -apple-system, sans-serif !important;
}
[data-testid="stAlert"][data-baseweb="notification"] {
  background: rgba(var(--ua-card-rgb),0.9) !important;
}
/* Info */
[data-testid="stAlert"].st-ae { border-color: rgba(var(--ua-cyan-rgb),0.3) !important; }
/* Success */
[data-testid="stAlert"].st-af { border-color: rgba(var(--ua-green-rgb),0.3) !important; }
/* Warning */
[data-testid="stAlert"].st-ag { border-color: rgba(245,158,11,0.3) !important; }
/* Error */
[data-testid="stAlert"].st-ah { border-color: rgba(var(--ua-red-rgb),0.3) !important; }

/* ── Sidebar nav item hover ──────────────────────────────────────────────── */
[data-testid="stSidebarNav"] a {
  transition: background-color 0.15s ease, color 0.15s ease,
              padding-left 0.15s ease !important;
  border-radius: 6px !important;
}
[data-testid="stSidebarNav"] a:hover {
  background-color: rgba(var(--ua-purple-rgb),0.10) !important;
  padding-left: 14px !important;
}
[data-testid="stSidebarNav"] a[aria-selected="true"] {
  background-color: rgba(var(--ua-purple-rgb),0.15) !important;
  border-left: 2px solid var(--ua-purple) !important;
}

/* ── Plotly chart container lift on hover ────────────────────────────────── */
[data-testid="stPlotlyChart"] {
  transition: box-shadow 0.2s ease !important;
  border-radius: 10px;
}
[data-testid="stPlotlyChart"]:hover {
  box-shadow: 0 4px 20px rgba(var(--ua-shadow-rgb),calc(0.4*var(--ua-shadow-k))) !important;
}

/* ── Spinner polish ──────────────────────────────────────────────────────── */
[data-testid="stSpinner"] > div {
  border-top-color: var(--ua-purple) !important;
}

/* ── Divider ─────────────────────────────────────────────────────────────── */
hr {
  border-color: rgba(var(--ua-onbg-rgb),0.06) !important;
  margin: 16px 0 !important;
}

/* ── Expander border ─────────────────────────────────────────────────────── */
[data-testid="stExpander"] {
  border-color: rgba(var(--ua-onbg-rgb),0.07) !important;
  border-radius: 10px !important;
  transition: border-color 0.15s ease !important;
}
[data-testid="stExpander"]:hover {
  border-color: rgba(var(--ua-purple-rgb),0.25) !important;
}




/* ── Animated count-up for KPI strips ──────────────────────────────────────── */
@keyframes ua_count_up {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ua-kpi-animate {
  animation: ua_count_up 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
}
.ua-kpi-animate:nth-child(1) { animation-delay: 0.00s; }
.ua-kpi-animate:nth-child(2) { animation-delay: 0.07s; }
.ua-kpi-animate:nth-child(3) { animation-delay: 0.14s; }
.ua-kpi-animate:nth-child(4) { animation-delay: 0.21s; }

/* ── Gradient border card (animated) ────────────────────────────────────────── */
@keyframes ua_border_spin {
  0%   { background-position: 0% 50%;   }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%;   }
}
.ua-gradient-border {
  position: relative;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(135deg, var(--ua-green), var(--ua-cyan), var(--ua-purple), var(--ua-green));
  background-size: 300% 300%;
  animation: ua_border_spin 4s linear infinite;
}
.ua-gradient-border > div {
  background: var(--ua-bg-card);
  border-radius: 13px;
  padding: 20px 22px;
}

/* ── Pulse dot (live indicator) ──────────────────────────────────────────────── */
@keyframes ua_pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.3); }
}
.ua-pulse-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ua-green);
  animation: ua_pulse 1.8s ease-in-out infinite;
  vertical-align: middle;
  margin-right: 5px;
}
.ua-pulse-dot.bear { background: var(--ua-red); }

/* ── Feature spotlight card ───────────────────────────────────────────────── */
.ua-spotlight {
  background: rgba(var(--ua-card-rgb),0.85);
  border: 1px solid rgba(var(--ua-onbg-rgb),0.07);
  border-radius: 14px;
  padding: 24px 20px 20px;
  font-family: Inter, -apple-system, sans-serif;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
  position: relative;
  overflow: hidden;
}
.ua-spotlight::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--ua-spotlight-accent, linear-gradient(90deg, var(--ua-green), var(--ua-cyan)));
  border-radius: 14px 14px 0 0;
}
.ua-spotlight:hover {
  border-color: rgba(var(--ua-onbg-rgb),0.15);
  box-shadow: 0 8px 32px rgba(var(--ua-shadow-rgb),calc(0.45*var(--ua-shadow-k)));
  transform: translateY(-3px);
}
.ua-spotlight-icon {
  font-size: 2rem;
  margin-bottom: 12px;
  display: block;
}
.ua-spotlight-tag {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ua-spotlight-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--ua-ink);
  margin-bottom: 10px;
  line-height: 1.35;
  letter-spacing: -0.15px;
}
.ua-spotlight-body {
  font-size: 0.80rem;
  color: var(--ua-ink-soft);
  line-height: 1.65;
  margin-bottom: 14px;
}
.ua-spotlight-proof {
  font-size: 0.70rem;
  font-weight: 600;
  padding: 4px 0;
  border-top: 1px solid rgba(var(--ua-onbg-rgb),0.06);
}

/* ── Testimonial card ─────────────────────────────────────────────────────── */
.ua-testi {
  background: var(--ua-bg-card);
  border: 1px solid rgba(var(--ua-onbg-rgb),0.07);
  border-radius: 12px;
  padding: 20px;
  font-family: Inter, -apple-system, sans-serif;
  transition: border-color 0.18s ease;
}
.ua-testi:hover { border-color: rgba(var(--ua-onbg-rgb),0.14); }
.ua-testi-stars { color: var(--ua-amber); font-size: 0.82rem; letter-spacing: 2px; margin-bottom: 10px; }
.ua-testi-quote { font-size: 0.85rem; color: var(--ua-ink-soft); line-height: 1.65; font-style: italic; margin-bottom: 14px; }
.ua-testi-footer { display: flex; align-items: center; gap: 10px; }
.ua-testi-name   { font-size: 0.78rem; font-weight: 700; color: var(--ua-ink); }
.ua-testi-role   { font-size: 0.70rem; color: var(--ua-ink-label); }

/* ── Step card ────────────────────────────────────────────────────────────── */
.ua-step {
  background: rgba(var(--ua-card-rgb),0.85);
  border: 1px solid rgba(var(--ua-onbg-rgb),0.07);
  border-radius: 12px;
  padding: 20px 18px;
  font-family: Inter, -apple-system, sans-serif;
  transition: border-color 0.2s ease, transform 0.2s ease;
  position: relative;
  overflow: hidden;
}
.ua-step::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ua-step-accent, var(--ua-green));
  border-radius: 0 0 12px 12px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.ua-step:hover::after { transform: scaleX(1); }
.ua-step:hover { transform: translateY(-2px); border-color: rgba(var(--ua-onbg-rgb),0.13); }
.ua-step-num {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
}
.ua-step-title { font-size: 0.88rem; font-weight: 700; color: var(--ua-ink); margin-bottom: 6px; }
.ua-step-body  { font-size: 0.76rem; color: var(--ua-ink-soft); line-height: 1.6; }

/* ── Pro upgrade banner ──────────────────────────────────────────────────── */
.ua-pro-banner {
  background: linear-gradient(135deg, rgba(var(--ua-purple-rgb),0.12) 0%, rgba(var(--ua-cyan-rgb),0.06) 100%);
  border: 1px solid rgba(var(--ua-purple-rgb),0.28);
  border-radius: 16px;
  padding: 26px 32px;
  font-family: Inter, -apple-system, sans-serif;
  position: relative;
  overflow: hidden;
}
.ua-pro-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--ua-purple-rgb),0.6), rgba(var(--ua-cyan-rgb),0.4), transparent);
}

/* ── Guarantee badge ─────────────────────────────────────────────────────── */
.ua-guarantee {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(var(--ua-green-rgb),0.06);
  border: 1px solid rgba(var(--ua-green-rgb),0.22);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.75rem;
  color: var(--ua-green);
  font-family: Inter, sans-serif;
  font-weight: 600;
}

/* ── Pricing card featured shimmer ──────────────────────────────────────── */
@keyframes ua_card_shine {
  0%   { transform: translateX(-100%) rotate(25deg); }
  100% { transform: translateX(300%) rotate(25deg);  }
}
.ua-card-shine::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 30%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(var(--ua-onbg-rgb),0.04), transparent);
  animation: ua_card_shine 3.5s ease-in-out infinite;
  pointer-events: none;
}




/* ══════════════════════════════════════════════════════════════════════════
   PILL TABS  — replaces underline tabs with rounded pill containers
   ══════════════════════════════════════════════════════════════════════════ */

.stTabs [data-baseweb="tab-list"] {
  background: rgba(13,15,24,0.92) !important;
  border: 1px solid rgba(var(--ua-onbg-rgb),0.07) !important;
  border-radius: 10px !important;
  padding: 3px !important;
  gap: 2px !important;
  flex-wrap: wrap !important;
}

.stTabs [data-baseweb="tab"] {
  background: transparent !important;
  border-radius: 7px !important;
  padding: 7px 14px !important;
  font-family: Inter, -apple-system, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--ua-ink-label) !important;
  border: 1px solid transparent !important;
  margin: 0 !important;
  min-height: auto !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.16s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.stTabs [data-baseweb="tab"]:hover {
  color: #C8D0E4 !important;
  background: rgba(var(--ua-onbg-rgb),0.05) !important;
}

/* Active pill — green-tinted glass */
.stTabs [aria-selected="true"][data-baseweb="tab"],
.stTabs [data-baseweb="tab"][aria-selected="true"] {
  background: linear-gradient(135deg,rgba(var(--ua-green-rgb),0.14) 0%,rgba(var(--ua-cyan-rgb),0.07) 100%) !important;
  color: var(--ua-ink) !important;
  font-weight: 700 !important;
  border: 1px solid rgba(var(--ua-green-rgb),0.22) !important;
  box-shadow: 0 1px 6px rgba(var(--ua-shadow-rgb),calc(0.40*var(--ua-shadow-k))), inset 0 1px 0 rgba(var(--ua-onbg-rgb),0.06) !important;
}

/* Kill underline highlight + divider */
.stTabs [data-baseweb="tab-highlight"],
.stTabs [data-baseweb="tab-border"] {
  display: none !important;
  height: 0 !important;
  background: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODERN BUTTONS  — base / secondary / primary / download / form-submit
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes ua_btn_ripple {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 0.30; }
  100% { transform: translate(-50%,-50%) scale(5); opacity: 0; }
}

.stButton > button,
.stDownloadButton > button,
.stFormSubmitButton > button,
.stLinkButton > a {
  font-family: Inter, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.83rem !important;
  letter-spacing: 0.01em !important;
  padding: 8px 20px !important;
  border-radius: 8px !important;
  min-height: 36px !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* CSS-only ripple on click */
.stButton > button::after,
.stDownloadButton > button::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  width: 120px !important; height: 120px !important;
  background: rgba(var(--ua-onbg-rgb),0.14) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translate(-50%,-50%) scale(0) !important;
}
.stButton > button:active::after,
.stDownloadButton > button:active::after {
  animation: ua_btn_ripple 0.42s ease-out forwards !important;
}

/* — Secondary (default) — */
.stButton > button[data-testid="baseButton-secondary"],
.stButton > button:not([data-testid="baseButton-primary"]) {
  background: rgba(22,26,40,0.92) !important;
  border: 1px solid rgba(var(--ua-onbg-rgb),0.10) !important;
  color: #D5DAE3 !important;
  box-shadow: 0 1px 3px rgba(var(--ua-shadow-rgb),calc(0.30*var(--ua-shadow-k))),
              inset 0 1px 0 rgba(var(--ua-onbg-rgb),0.04) !important;
}
.stButton > button[data-testid="baseButton-secondary"]:hover,
.stButton > button:not([data-testid="baseButton-primary"]):hover {
  background: rgba(32,38,58,0.95) !important;
  border-color: #536174 !important;
  color: var(--ua-ink) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(var(--ua-shadow-rgb),calc(0.35*var(--ua-shadow-k))) !important;
}
.stButton > button[data-testid="baseButton-secondary"]:active,
.stButton > button:not([data-testid="baseButton-primary"]):active {
  transform: translateY(0) scale(0.975) !important;
  box-shadow: 0 1px 3px rgba(var(--ua-shadow-rgb),calc(0.30*var(--ua-shadow-k))) !important;
}

/* — Primary — */
.stButton > button[data-testid="baseButton-primary"] {
  background: #2E6654 !important;
  border: 1px solid #477D6B !important;
  color: #F1F3F5 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(var(--ua-shadow-rgb),calc(0.28*var(--ua-shadow-k))) !important;
}
.stButton > button[data-testid="baseButton-primary"]:hover {
  background: #397461 !important;
  border-color: #5A8E7D !important;
  filter: none !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(var(--ua-shadow-rgb),calc(0.32*var(--ua-shadow-k))) !important;
}
.stButton > button[data-testid="baseButton-primary"]:active {
  transform: translateY(0) scale(0.975) !important;
  filter: brightness(0.96) !important;
  box-shadow: 0 2px 8px rgba(var(--ua-shadow-rgb),calc(0.28*var(--ua-shadow-k))) !important;
}

/* — Download — */
.stDownloadButton > button {
  background: rgba(var(--ua-cyan-rgb),0.09) !important;
  border: 1px solid rgba(var(--ua-cyan-rgb),0.22) !important;
  color: var(--ua-cyan) !important;
}
.stDownloadButton > button:hover {
  background: rgba(var(--ua-cyan-rgb),0.16) !important;
  border-color: rgba(var(--ua-cyan-rgb),0.42) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(var(--ua-cyan-rgb),0.20) !important;
}

/* — Form submit — */
.stFormSubmitButton > button {
  /* Royal, matching every other primary CTA. This rule was missed by the
     company-wide identity pass because form submits are .stFormSubmitButton,
     not .stButton[kind="primary"] — so the app's most-used CTA ("Analyze
     ticker") stayed violet while everything else went royal. */
  background: linear-gradient(135deg, var(--ua-royal) 0%, var(--ua-royal-deep) 100%) !important;
  border: 1px solid rgba(var(--ua-royal-rgb),0.38) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(var(--ua-royal-rgb),0.28) !important;
}
.stFormSubmitButton > button:hover {
  filter: brightness(1.10) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(var(--ua-royal-rgb),0.38) !important;
}

/* Sidebar buttons stay green-themed */
section[data-testid="stSidebar"] .stButton > button {
  background: rgba(var(--ua-green-rgb),0.09) !important;
  border: 1px solid rgba(var(--ua-green-rgb),0.22) !important;
  color: var(--ua-green) !important;
}
section[data-testid="stSidebar"] .stButton > button:hover {
  background: rgba(var(--ua-green-rgb),0.16) !important;
  border-color: rgba(var(--ua-green-rgb),0.42) !important;
  transform: translateY(-1px) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SELECTBOX + MULTI-SELECT
   ══════════════════════════════════════════════════════════════════════════ */

[data-testid="stSelectbox"] [data-baseweb="select"] > div:first-child,
[data-testid="stMultiSelect"] [data-baseweb="select"] > div:first-child {
  background: rgba(15,17,24,0.92) !important;
  border: 1px solid rgba(var(--ua-onbg-rgb),0.10) !important;
  border-radius: 8px !important;
  transition: border-color 0.16s ease, box-shadow 0.16s ease !important;
}
[data-testid="stSelectbox"] [data-baseweb="select"] span,
[data-testid="stSelectbox"] [data-baseweb="select"] input,
[data-testid="stMultiSelect"] [data-baseweb="select"] span,
[data-testid="stMultiSelect"] [data-baseweb="select"] input {
  color: #D8DDE5 !important;
  -webkit-text-fill-color: #D8DDE5 !important;
}
[data-testid="stSelectbox"] [data-baseweb="select"] svg,
[data-testid="stMultiSelect"] [data-baseweb="select"] svg {
  fill: #9DA7B7 !important;
  color: #9DA7B7 !important;
}
[data-testid="stMultiSelect"] span[data-baseweb="tag"] {
  background: #252C38 !important;
  border: 1px solid #3B4554 !important;
  color: #D8DDE5 !important;
}
[data-testid="stSelectbox"] [data-baseweb="select"] > div:first-child:hover,
[data-testid="stMultiSelect"] [data-baseweb="select"] > div:first-child:hover {
  border-color: #536174 !important;
  box-shadow: 0 0 0 1px rgba(126,140,160,0.10) !important;
}
[data-testid="stSelectbox"] [data-baseweb="select"] > div:first-child:focus-within,
[data-testid="stMultiSelect"] [data-baseweb="select"] > div:first-child:focus-within {
  border-color: #718096 !important;
  box-shadow: 0 0 0 2px rgba(113,128,150,0.16) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TEXT INPUTS / TEXTAREA / NUMBER INPUT
   ══════════════════════════════════════════════════════════════════════════ */

[data-testid="stTextInput"] input,
[data-testid="stNumberInput"] input,
[data-testid="stTextArea"] textarea {
  background: rgba(15,17,24,0.92) !important;
  border: 1px solid rgba(var(--ua-onbg-rgb),0.10) !important;
  border-radius: 8px !important;
  color: var(--ua-ink) !important;
  font-family: Inter, -apple-system, sans-serif !important;
  font-size: 0.85rem !important;
  transition: border-color 0.16s ease, box-shadow 0.16s ease !important;
}
[data-testid="stTextInput"] input:hover,
[data-testid="stNumberInput"] input:hover,
[data-testid="stTextArea"] textarea:hover {
  border-color: rgba(var(--ua-onbg-rgb),0.18) !important;
}
[data-testid="stTextInput"] input:focus,
[data-testid="stNumberInput"] input:focus,
[data-testid="stTextArea"] textarea:focus {
  border-color: rgba(var(--ua-green-rgb),0.55) !important;
  box-shadow: 0 0 0 2px rgba(var(--ua-green-rgb),0.14) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   METRICS  — glassmorphism cards with hover lift
   ══════════════════════════════════════════════════════════════════════════ */

[data-testid="stMetric"] {
  background: rgba(var(--ua-card-rgb),0.88) !important;
  border: 1px solid rgba(var(--ua-onbg-rgb),0.07) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  transition: border-color 0.16s ease, transform 0.16s ease,
              box-shadow 0.16s ease !important;
}
[data-testid="stMetric"]:hover {
  border-color: rgba(var(--ua-green-rgb),0.22) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(var(--ua-shadow-rgb),calc(0.28*var(--ua-shadow-k))) !important;
}
[data-testid="stMetricValue"] {
  font-family: Inter, -apple-system, sans-serif !important;
  font-weight: 800 !important;
  color: var(--ua-ink) !important;
  letter-spacing: -0.5px !important;
}
[data-testid="stMetricLabel"] {
  font-family: Inter, -apple-system, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--ua-ink-mut) !important;
}
[data-testid="stMetricDelta"] {
  font-size: 0.80rem !important;
  font-weight: 600 !important;
}
[data-testid="stMetricDelta"] svg { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   EXPANDERS
   ══════════════════════════════════════════════════════════════════════════ */

[data-testid="stExpander"] {
  background: rgba(15,17,24,0.80) !important;
  border: 1px solid rgba(var(--ua-onbg-rgb),0.07) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: border-color 0.16s ease, box-shadow 0.16s ease !important;
}
[data-testid="stExpander"]:hover {
  border-color: rgba(var(--ua-green-rgb),0.20) !important;
  box-shadow: 0 2px 12px rgba(var(--ua-shadow-rgb),calc(0.25*var(--ua-shadow-k))) !important;
}
.streamlit-expanderHeader,
[data-testid="stExpander"] summary {
  font-family: Inter, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  color: var(--ua-ink-soft) !important;
  padding: 12px 14px !important;
  transition: color 0.14s ease !important;
}
.streamlit-expanderHeader:hover,
[data-testid="stExpander"] summary:hover {
  color: var(--ua-ink) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR NAV LINKS  — pill items with active indicator
   ══════════════════════════════════════════════════════════════════════════ */

[data-testid="stSidebarNavLink"] {
  border-radius: 7px !important;
  margin: 1px 6px !important;
  padding: 7px 10px !important;
  transition: all 0.14s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
[data-testid="stSidebarNavLink"]:hover:not([aria-selected="true"]) {
  background: rgba(var(--ua-onbg-rgb),0.05) !important;
  padding-left: 14px !important;
}
[data-testid="stSidebarNavLink"][aria-selected="true"],
[data-testid="stSidebarNavLink"][aria-current="page"] {
  background: rgba(var(--ua-green-rgb),0.09) !important;
  border-left: 2px solid var(--ua-green) !important;
  padding-left: 12px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DATAFRAME  — rounded + bordered
   ══════════════════════════════════════════════════════════════════════════ */

[data-testid="stDataFrame"],
[data-testid="stDataFrameResizable"] {
  border: 1px solid rgba(var(--ua-onbg-rgb),0.07) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CHECKBOX + RADIO
   ══════════════════════════════════════════════════════════════════════════ */

[data-testid="stCheckbox"] label,
[data-testid="stRadio"] label {
  font-family: Inter, -apple-system, sans-serif !important;
  font-size: 0.85rem !important;
  color: #C8CED8 !important;
  transition: color 0.14s ease !important;
}

/* Segmented controls and pills use neutral selected states. Selection remains
   obvious through surface and border contrast rather than neon text. */
[data-testid="stButtonGroup"] button,
[data-testid="stButtonGroup"] label {
  background: #151A22 !important;
  border-color: #313946 !important;
  color: #C8CED8 !important;
}
[data-testid="stButtonGroup"] button[aria-checked="true"],
[data-testid="stButtonGroup"] button[aria-pressed="true"],
[data-testid="stButtonGroup"] label:has(input:checked) {
  background: #2A3340 !important;
  border-color: #687587 !important;
  color: #F0F2F5 !important;
}
[data-testid="stCheckbox"] label:hover,
[data-testid="stRadio"] label:hover {
  color: var(--ua-ink) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SPINNER  — green brand color
   ══════════════════════════════════════════════════════════════════════════ */

[data-testid="stSpinner"] > div {
  border-color: rgba(var(--ua-green-rgb),0.15) rgba(var(--ua-green-rgb),0.15)
                rgba(var(--ua-green-rgb),0.15) var(--ua-green) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ALERTS  — rounded + light border styling
   ══════════════════════════════════════════════════════════════════════════ */

[data-testid="stAlert"] {
  border-radius: 10px !important;
  font-family: Inter, -apple-system, sans-serif !important;
  font-size: 0.83rem !important;
  border-width: 1px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   HR / DIVIDER
   ══════════════════════════════════════════════════════════════════════════ */

hr {
  border: none !important;
  border-top: 1px solid rgba(var(--ua-onbg-rgb),0.05) !important;
  margin: 16px 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PLOTLY CHART CONTAINER  — subtle lift on hover
   ══════════════════════════════════════════════════════════════════════════ */

[data-testid="stPlotlyChart"] {
  border-radius: 10px !important;
  transition: box-shadow 0.20s ease !important;
}
[data-testid="stPlotlyChart"]:hover {
  box-shadow: 0 6px 24px rgba(var(--ua-shadow-rgb),calc(0.45*var(--ua-shadow-k))) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PERFORMANCE  — reduce paint/layout cost
   ══════════════════════════════════════════════════════════════════════════ */

/* Only animate elements that need it; avoid global will-change */
.stButton > button,
.stTabs [data-baseweb="tab"],
[data-testid="stMetric"],
[data-testid="stExpander"],
[data-testid="stSidebarNavLink"] {
  will-change: transform !important;
}

/* contain layout on sidebar so it never triggers full-page reflow */
section[data-testid="stSidebar"] {
  contain: layout style !important;
}

/* contain Plotly chart iframes */
[data-testid="stPlotlyChart"] iframe {
  contain: strict !important;
}

/* Page fade-in */
@keyframes ua_page_in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.main .block-container,
[data-testid="stMainBlockContainer"] {
  animation: ua_page_in 0.22s ease forwards !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--ua-green-rgb),0.20);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--ua-green-rgb),0.42); }




.ua-chart{width:100%;height:auto;display:block;font-family:Inter,system-ui,sans-serif}
.ua-chart .axis{stroke:var(--ua-line-2,#333);stroke-width:1}
.ua-chart .grid{stroke:var(--ua-grid,rgba(128,128,128,.12));stroke-width:1}
.ua-chart .tick{fill:var(--ua-muted,#8A90A6);font-size:11px}
.ua-chart .tick.cat{fill:var(--ua-text,#EAEEF7);font-weight:600}
.ua-chart .atitle{fill:var(--ua-faint,#646A88);font-size:11px;font-weight:600}
.ua-chart .refline{stroke:var(--ua-faint,#646A88);stroke-width:1;stroke-dasharray:5 5}
.ua-chart .area{fill:var(--ua-royal-2,#8B7BF7);opacity:.16}
.ua-chart .cline{fill:none;stroke:var(--ua-royal-2,#8B7BF7);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ua-chart .dot{fill:var(--ua-royal-2,#8B7BF7)}
.ua-chart .vlabel{fill:var(--ua-text,#EAEEF7);font-size:11px;font-weight:600}