/* ============================================
   Unpriced — TradingView-Inspired Design
   Light content area, dark sidebar + workspace
   ============================================ */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Light theme (homepage, screener) */
    --light-bg: #ffffff;
    --light-surface: #f8f9fa;
    --light-border: #e0e3eb;
    --light-text: #131722;
    --light-text-secondary: #787b86;
    --light-text-muted: #b2b5be;
    --light-hover: #f0f3fa;
    --light-accent: #2962ff;

    /* Dark theme (topbar, sidebar, workspace) */
    --dark-bg: #000000;
    --dark-surface: #141419;
    --dark-border: #2a2e39;
    --dark-text: #d1d4dc;
    --dark-text-secondary: #787b86;
    --dark-text-muted: #4a4a5e;
    --dark-hover: #18181f;

    /* Shared */
    --accent-gold: #3B82F6;
    --accent-blue: #2962ff;
    --positive: #089981;
    --positive-dim: rgba(8, 153, 129, 0.10);
    --negative: #f23645;
    --negative-dim: rgba(242, 54, 69, 0.10);
    --warning: #eab308;
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Menlo', 'Consolas', monospace;
}

/* Homepage-only primary blue override. Recolors --accent-blue / --accent-gold
   so every component using them on the dashboard picks up the lighter shade,
   without affecting screener / market detail / auth pages. */
body.home-page {
    --accent-blue: #5ea3fa;
    --accent-gold: #5ea3fa;
}

html { font-size: 13px; }

body {
    font-family: var(--font-ui);
    background: #000000;
    color: var(--light-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-blue); text-decoration: none; }
a:hover { color: #1e53e5; }

/* === TOP BAR === */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--dark-bg);
    padding: 0 24px;
    height: 64px;
    flex-shrink: 0;
    z-index: 100;
    position: sticky;
    top: 0;
}

.topbar-left {
    display: flex;
    align-items: center;
}

.topbar-logo {
    display: inline-flex;
    align-items: center;
    height: 100%;
    line-height: 0;
    text-decoration: none;
}

.topbar-logo-img {
    display: block;
    height: 26px;
    width: auto;
    transition: opacity 0.15s ease;
}

.topbar-logo:hover { text-decoration: none; }
.topbar-logo:hover .topbar-logo-img { opacity: 0.85; }

.topbar-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 4px;
}

.topbar-menu-wrap {
    position: relative;
    display: none;
    align-items: center;
}
.topbar-burger {
    width: 40px;
    height: 40px;
}
.topbar-burger svg { width: 22px; height: 22px; }

.topbar-burger-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: #262626;
    border: 1px solid #2e2e2e;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.7);
    padding: 6px;
    z-index: 1001;
}
.topbar-burger-menu.open { display: block; }
.topbar-burger-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--dark-text);
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 500;
    padding: 12px 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
.topbar-burger-item:hover {
    background: #333333;
    color: #ffffff;
    text-decoration: none;
}
/* Buttons in the burger menu (e.g. Log out) need browser-default reset
 * so they look identical to the anchor items. */
button.topbar-burger-item {
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
/* Auth items (Login / Sign up / Account / Log out) sit below a thin
 * divider so they read as a separate group from the nav links. The
 * `:first-of-type` trick adds the rule only on the FIRST auth item so
 * subsequent ones don't double-stripe. */
.topbar-burger-item--auth:first-of-type {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Drill-in panel structure (TradingView-style mobile nav).
 * Default = stacked on desktop fallback / large viewports; the mobile
 * media query below repaints them as full-height drawer panels that
 * slide horizontally. */
.burger-panel { display: none; flex-direction: column; }
.burger-panel.is-active { display: flex; }
.burger-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 6px;
}
.burger-panel-title {
    flex: 1;
    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
}
.burger-back, .burger-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: #d1d5db;
    border: 0;
    cursor: pointer;
    transition: background 0.12s ease;
}
.burger-back:hover, .burger-close:hover { background: rgba(255, 255, 255, 0.08); }
.burger-group {
    /* Group rows look like regular items but show the right-chevron
     * affordance — same DOM contract as topbar-burger-item, just adds
     * the chev SVG. */
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.burger-chev { color: #9598A2; opacity: 0.7; flex-shrink: 0; }

@media (max-width: 1279px) {
    .topbar-center { display: none; }
    .topbar-menu-wrap { display: inline-flex; }
    .topbar-left { gap: 8px; }
}

/* Mobile drawer (phone-sized viewports): the burger menu becomes a
 * fullscreen drill-in nav with horizontal panel transitions, matching
 * the TradingView pattern. We keep the small-floating-popover layout
 * for tablet/laptop widths where the dropdown is less disruptive. */
@media (max-width: 600px) {
    .topbar-burger-menu {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
        padding: 12px;
        border-radius: 0;
        border: 0;
        box-shadow: none;
        background: #1c1c1c;
        overflow: hidden;
    }
    .topbar-burger-menu.open { display: flex; flex-direction: column; }
    .burger-panel {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 16px;
        box-sizing: border-box;
        display: flex;            /* always laid out so the slide animates */
        flex-direction: column;
        background: #1c1c1c;
        transform: translateX(100%);   /* off-screen right by default */
        transition: transform 220ms ease;
        will-change: transform;
        overflow: hidden;
    }
    .burger-panel[data-panel="root"] { transform: translateX(-100%); }
    .burger-panel.is-active { transform: translateX(0); }
    .burger-panel-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .burger-panel-body .topbar-burger-item {
        font-size: 17px;
        padding: 16px 14px;
    }
}

.topbar-link {
    color: #e5e7eb;
    font-size: 15px;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 999px;
    border-bottom: none;
    transition: background 0.12s ease, color 0.12s ease;
}

.topbar-link:hover { background: #2e2e2e; color: #ffffff; }
.topbar-link.active { color: #ffffff; }
.topbar-link.active:hover { background: #2e2e2e; }

.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--dark-text-muted);
}

.topbar-search {
    background: rgb(46, 46, 46);
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--dark-text);
    font-family: var(--font-ui);
    font-size: 15px;
    height: 40px;
    padding: 0 56px 0 44px;
    width: 220px;
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23787b86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 16px center;
    transition: width 0.22s ease, background 0.15s, border-color 0.15s;
}

.topbar-search:hover {
    background-color: rgb(58, 58, 58);
}

.search-wrapper:focus-within .topbar-search,
.search-wrapper.search-active .topbar-search {
    width: min(640px, calc(100vw - 48px));
    background-color: rgb(58, 58, 58);
    border-color: rgba(255, 255, 255, 0.08);
}

.topbar-search::placeholder { color: var(--dark-text-secondary); }

.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    transition: width 0.22s ease;
}

/* Search takeover — when the search input has focus, hide other navbar content
   and center the search in the navbar. */
.topbar:has(.search-wrapper:focus-within) .topbar-left,
.topbar:has(.search-wrapper:focus-within) .topbar-center,
.topbar:has(.search-wrapper:focus-within) .topbar-discord,
.topbar:has(.search-wrapper:focus-within) .topbar-user {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
.topbar:has(.search-wrapper:focus-within) .search-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.topbar-search-kbd {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    color: var(--dark-text-secondary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 3px 7px;
    line-height: 1;
    letter-spacing: 0.3px;
}
.search-wrapper:focus-within .topbar-search-kbd,
.search-wrapper.search-active .topbar-search-kbd {
    opacity: 0;
}

.search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 640px;
    max-width: 92vw;
    max-height: min(560px, 78vh);
    overflow: hidden;
    background: #262626;
    border: 1px solid #2e2e2e;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.7);
    z-index: 1001;
    margin-top: 6px;
    flex-direction: column;
}

.search-dropdown.open {
    display: flex;
}

.search-dropdown-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #262626;
    overflow-x: auto;
    scrollbar-width: none;
}
.search-dropdown-filters::-webkit-scrollbar { display: none; }

.search-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    background: transparent;
    border: 1px solid #2e2e2e;
    color: #b2b5be;
    border-radius: 999px;
    height: 30px;
    padding: 0 14px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.search-pill:hover {
    background: #262626;
    color: #d1d4dc;
}
.search-pill.active {
    background: #f0f0f0;
    color: #1a1a1a;
    border-color: #f0f0f0;
}

.search-dropdown-inner {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: none;
    padding: 4px 0 8px;
}
.search-dropdown-inner::-webkit-scrollbar { display: none; }

.search-dropdown .search-section-label {
    padding: 12px 18px 6px;
    font-size: 10px;
    font-weight: 600;
    color: #787b86;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.search-dropdown .search-result {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    cursor: pointer;
    border-top: 1px solid #262626;
    transition: background 0.1s;
}
.search-dropdown .search-result:first-child { border-top: 0; }
.search-dropdown .search-result:hover { background: #333333; }

.search-result-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-result-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
    background: #1f1f23;
}

.search-result-ticker {
    flex: 0 0 auto;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 14px;
    color: #d1d4dc;
    letter-spacing: 0.2px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-desc {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: #b2b5be;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: #787b86;
    text-transform: lowercase;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.search-result-meta-tag { color: #787b86; }
.search-result-meta-platform {
    color: #d1d4dc;
    font-weight: 600;
    text-transform: none;
}
.search-result-meta-prob {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    color: #4ade80;
    padding-left: 4px;
    text-transform: none;
}

.search-empty {
    padding: 28px 16px;
    color: #787b86;
    text-align: center;
    font-size: 13px;
}

@media (max-width: 720px) {
    .search-dropdown { width: 92vw; }
    .search-result-ticker { max-width: 110px; font-size: 13px; }
    .search-result-meta-tag { display: none; }
}

.topbar-clock {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--dark-text-secondary);
}

.topbar-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dark-text-muted);
}

.status-dot.connected { background: var(--positive); }
.status-dot.disconnected { background: var(--negative); }

/* ============================
   HOME PAGE LAYOUT
   ============================ */
.home-layout {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.home-main {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    min-width: 0;
    background: var(--light-bg);
}

/* === LANDING PAGE === */
.landing-page {
    overflow-x: hidden;
    overflow-y: auto;
    height: calc(100vh - 64px);
    background: #ffffff;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.landing-page::-webkit-scrollbar {
    display: none;
}

/* Animations */
@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(24px); }
    100% { opacity: 1; transform: translateY(0); }
}

.hero-stagger { opacity: 0; transform: translateY(24px); }
.hero-stagger-1 { animation: fadeInUp .7s ease-out .1s both; }
.hero-stagger-2 { animation: fadeInUp .7s ease-out .3s both; }
.hero-stagger-3 { animation: fadeInUp .7s ease-out .55s both; }
.hero-stagger-4 { animation: fadeInUp .7s ease-out .75s both; }

[data-section-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease-out, transform .8s ease-out;
}
[data-section-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* feature-card animation handled in layout block below */

/* home-card animation handled in layout block below */

@media (prefers-reduced-motion: reduce) {
    .hero-stagger { animation: none !important; opacity: 1 !important; transform: none !important; }
    .hero-stagger-1, .hero-stagger-2, .hero-stagger-3, .hero-stagger-4 { animation: none !important; opacity: 1 !important; }
    [data-section-reveal], .feature-card, .home-card { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Hero: full viewport */
.landing-hero {
    position: relative;
    height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #000000;
    overflow: hidden;
}

.landing-hero-bg {
    position: absolute;
    inset: 0;
    background: none;
}

.landing-hero-content {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    padding: 0 16px;
}

.landing-eyebrow {
    font-size: 16px;
    color: #6b6b7b;
    font-weight: 500;
    margin-bottom: 28px;
    letter-spacing: 0.3px;
}

.landing-headline {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(48px, 7vw, 96px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #ffffff;
    margin-bottom: 40px;
}

.landing-headline .gold {
    display: block;
    background: linear-gradient(90deg, #5ea3fa 0%, #87bcfb 40%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.landing-headline .gray-fade {
    display: block;
    background: linear-gradient(90deg, #f0f0f2 0%, #c0c0c6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.landing-sub {
    font-size: clamp(1rem, 2vw, 1.875rem);
    font-weight: 300;
    color: #fff9;
    line-height: 1.5;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 56px;
}

/* Live proof-point chip sitting between the hero subtitle and the CTA
   buttons. Hidden until at least one stat resolves (see `hydrateHeroStats`
   in dashboard.html) so a slow / failed fetch never leaves a placeholder. */
.landing-hero-stats {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 20px;
    margin: -28px auto 28px;
    background: rgba(94, 163, 250, 0.08);
    border: 1px solid rgba(94, 163, 250, 0.22);
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 14px;
    color: #cbd5e1;
}
.landing-hero-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.landing-hero-stat-num {
    color: #5ea3fa;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.landing-hero-stat-label { color: #94a3b8; }
.landing-hero-stats-sep  { color: #475569; }
@media (max-width: 600px) {
    .landing-hero-stats { font-size: 12px; padding: 8px 14px; }
}

.landing-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.landing-btn-primary,
.landing-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 184px;
    height: 64px;
    padding: 0 24px;
    font-family: var(--font-ui);
    font-size: 18px;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.landing-btn-primary {
    background: #5ea3fa;
    color: #ffffff;
    font-weight: 700;
    border: 1px solid transparent;
    transition: background 0.12s ease;
}

/* Match the topbar Sign-up button: darker on hover, no scale, no glow. */
.landing-btn-primary:hover { background: #4d92e8; color: #ffffff; }
.landing-btn-primary:active { transform: translateY(1px); }

.landing-btn-secondary {
    background: transparent;
    color: #e0e0e8;
    font-weight: 600;
    border: 1px solid #2a2a35;
    transition: border-color 0.2s, color 0.2s, transform 0.2s;
}

.landing-btn-secondary:hover { border-color: #787b86; color: #ffffff; transform: scale(1.01); }

.landing-scroll-hint {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    color: #8a8a9a;
    font-size: 24px;
    animation: bob 2s ease-in-out infinite;
}

@keyframes bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* Showcase section */
.landing-showcase {
    background: #000000;
    padding: 100px 0 80px;
    text-align: center;
}

.landing-showcase-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 32px;
}

.landing-section-headline {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 48px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -1.5px;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.15;
}

.landing-section-headline .gold {
    background: linear-gradient(90deg, #5ea3fa 0%, #87bcfb 40%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.landing-section-sub {
    font-size: 16px;
    color: #787b86;
    margin-bottom: 48px;
    line-height: 1.6;
}

/* Three-venue logo row under the second-section subhead. Equal-size
   rounded chips with brand marks — communicates "we cover all three"
   without forcing the headline to spell out each name. */
.landing-venue-row {
    display: flex;
    justify-content: center;
    align-items: flex-end;          /* bottom-aligned: icons rise from the baseline */
    gap: 28px;
    margin: -24px auto 48px;
    flex-wrap: wrap;
}
/* The row itself skips the generic slide-up reveal — its icons animate
   individually instead (see below), so keep the container in place. */
.landing-venue-row[data-section-reveal] { opacity: 1; transform: none; transition: none; }
.landing-venue-logo {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    box-sizing: border-box;
    /* Hidden initial state for the staggered entrance; settles to full opacity. */
    opacity: 0;
    transform: translateY(16px) scale(0.85);
}
/* Staggered spring-up pop when the row scrolls into view (pmxt-style: each
   icon rises from below with a slight overshoot, one after another). */
.landing-venue-row.revealed .landing-venue-logo {
    animation: venue-pop .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
.landing-venue-row.revealed .landing-venue-logo:nth-child(1) { animation-delay: .05s; }
.landing-venue-row.revealed .landing-venue-logo:nth-child(2) { animation-delay: .18s; }
.landing-venue-row.revealed .landing-venue-logo:nth-child(3) { animation-delay: .31s; }
.landing-venue-row.revealed .landing-venue-logo:nth-child(4) { animation-delay: .44s; }
@keyframes venue-pop {
    0%   { opacity: 0; transform: translateY(16px) scale(0.85); }
    60%  { opacity: 1; transform: translateY(-4px) scale(1.04); }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .landing-venue-logo { opacity: 1; transform: none; animation: none !important; }
}

.showcase-browser {
    background: #0e0e14;
    border: 1px solid #2a2e39;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
}

.showcase-browser-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #141419;
    border-bottom: 1px solid #2a2e39;
}

.showcase-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.showcase-dot.red { background: #ff5f57; }
.showcase-dot.yellow { background: #febc2e; }
.showcase-dot.green { background: #28c840; }

.showcase-url {
    font-size: 11px;
    color: #787b86;
    margin-left: 12px;
    font-family: var(--font-mono);
}

.showcase-screen {
    padding: 16px;
    min-height: 200px;
}

/* Pulse showcase — drops the live `.home-hero` card directly into the
   landing section without the macOS browser-chrome frame above. The hero
   already supplies its own border/background, so this wrapper is purely
   a width-shaping container that matches the showcase-browser's drop
   shadow rhythm so the section reads on the same scale as the screener
   showcase below. */
.showcase-pulse-frame {
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
    border-radius: 16px;
    /* Section uses `text-align: center` for the headline; the live hero
       card inside should read flush-left like it does on the live homepage,
       so override here. */
    text-align: left;
}

/* Two-card row used by the "Trade with visibility into market flow"
   section: Most Traded + Recent Sweeps live side-by-side, stacking on
   mobile. Mirrors the home-top-row treatment but constrained to 2 cards. */
.showcase-cards-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: stretch;
    text-align: left;
}
@media (max-width: 768px) {
    .showcase-cards-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Pin the hero card's "🔥 Hot Now" + volume block to the top-right corner
   of the identity stack so it visually aligns with the breadcrumb row
   above the title, without pushing the title down by the meta's height
   (the meta is two lines tall, the breadcrumb is one line). Absolute
   positioning keeps breadcrumb / title at their natural baselines. */
.home-hero .mkt-identity {
    position: relative;
}
.home-hero .home-hero-meta {
    position: absolute;
    /* The containing block is `.mkt-identity`'s padding box, whose right
       edge sits at the card's inner border (padding doesn't constrain
       absolute children). Inset by the same 20px the breadcrumb / title
       are inset by, so the meta visually respects the card's gutter. */
    top: 20px;
    right: 20px;
}

/* The K button moved into the eyebrow's own flex row, so no element
   overlays the title or the active-contract row anymore. The
   right-padding reservations the old absolutely-positioned corner
   needed are gone. */
.home-hero .home-active-contract {
    padding-right: 0;
}
/* Flex children default to min-width:auto (their intrinsic content size),
   which means a long, unbroken title will push past the row's reserved
   right padding. min-width:0 lets the title shrink + wrap inside the
   reservation; overflow-wrap covers stray long tokens. */
.home-hero .mkt-title-row .mkt-title {
    min-width: 0;
    overflow-wrap: anywhere;
    /* Home hero demotes the title to an eyebrow above the centered
       active-contract row — the active row carries the headline size
       on this card. The detail page is unaffected (different parent). */
    font-size: 16px;
    font-weight: 500;
    color: #c4c8d2;
    letter-spacing: 0;
    margin-bottom: 0;
}
@media (max-width: 600px) {
    /* Corner only carries the K badge now; the 60px reservation set
       at the desktop breakpoint covers it at every viewport size, so
       this media block no longer needs to tweak title padding. */
    .home-hero .mkt-breadcrumb,
    .home-hero .home-active-contract {
        padding-right: 0;
    }
}

/* Inline Kalshi wordmark used inside the section headline. Sized to ride
   the cap height of the surrounding text and inheriting the brand green
   via `currentColor`. The SVG's intrinsic aspect ratio (772x226) keeps the
   width proportional to height. */
.landing-headline-kalshi {
    display: inline-block;
    height: 0.78em;
    width: auto;
    vertical-align: -0.04em;
    color: #28cc95;
    margin: 0 0.08em;
}

.showcase-placeholder {
    text-align: left;
}

.showcase-placeholder-row {
    display: flex;
    padding: 8px 12px;
    font-size: 12px;
    color: #d1d4dc;
    border-bottom: 1px solid #1a1a22;
}

.showcase-placeholder-row.header {
    color: #787b86;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.showcase-placeholder-row span {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 11px;
}

.showcase-placeholder-row span:first-child {
    flex: 2;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 12px;
}

/* Features section */
.landing-features {
    background: #000000;
    padding: 80px 0 116px;
}

.landing-features-inner {
    /* Cards stack vertically (one feature per row) so each gets a wide
       hero screenshot + the full text column beside it — conversion-
       focused layout rather than three small thumbnails. Max-width
       bumped from 1000 → 1140 so the image side has enough horizontal
       room to read the in-screenshot table content at native scale. */
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}

.landing-features-header {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 8px;
}

.landing-features-header .landing-section-sub {
    margin-bottom: 16px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.feature-card {
    padding: 32px 24px;
    background: #0e0e14;
    border: 1px solid #1a1a22;
    border-radius: 4px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease-out, transform .6s ease-out, border-color .2s, box-shadow .2s;
}
.feature-card.revealed {
    opacity: 1;
    transform: translateY(0);
}
.feature-card:hover {
    border-color: #2a2e39;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.feature-icon {
    font-size: 24px;
    color: #3B82F6;
    margin-bottom: 16px;
}

.feature-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
}

.feature-card p {
    font-size: 13px;
    color: #787b86;
    line-height: 1.6;
}

/* ── Founding Traders Program ─────────────────────────────────────────
   An exclusive early-access invite, styled as a single bordered/glowing
   panel so it reads as distinct from the flat black showcase sections
   around it. Reuses the landing color palette + button components. */
.landing-showcase.founders {
    padding: 32px 0 64px;
}

.founders-panel {
    position: relative;
    overflow: hidden;
    text-align: left;
    max-width: 980px;
    margin: 0 auto;
    padding: 32px 44px 30px;
    border-radius: 20px;
    /* Faint blue→ink gradient surface, lifted off the page with a ring
       in the signature primary so the panel feels like a framed invite. */
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(94, 163, 250, 0.10) 0%, rgba(94, 163, 250, 0) 55%),
        linear-gradient(180deg, #0c1018 0%, #07090d 100%);
    border: 1px solid rgba(94, 163, 250, 0.28);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Soft animated glow bleeding from the top corner — pure decoration. */
.founders-glow {
    position: absolute;
    top: -160px;
    right: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(94, 163, 250, 0.20) 0%, rgba(94, 163, 250, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.founders-panel > *:not(.founders-glow) { position: relative; z-index: 1; }

.founders-head { text-align: center; margin-bottom: 24px; }

.founders-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 13px;
    margin-bottom: 12px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #bcd6fb;
    background: rgba(94, 163, 250, 0.10);
    border: 1px solid rgba(94, 163, 250, 0.40);
    border-radius: 999px;
}

.founders-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5ea3fa;
    box-shadow: 0 0 0 0 rgba(94, 163, 250, 0.55);
    animation: founders-pulse 2s ease-out infinite;
}

@keyframes founders-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(94, 163, 250, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(94, 163, 250, 0); }
    100% { box-shadow: 0 0 0 0 rgba(94, 163, 250, 0); }
}

.founders-headline {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -1px;
    color: #ffffff;
    margin-bottom: 10px;
}

.founders-sub {
    font-size: 15px;
    color: #9aa0ab;
    line-height: 1.5;
    max-width: 620px;
    margin: 0 auto;
}
.founders-sub strong { color: #e6ebf2; }

.founders-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 22px;
}

.founders-col-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5ea3fa;
    margin-bottom: 12px;
}

.founders-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.founders-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.45;
    color: #d1d4dc;
}
/* Check-mark bullet in the primary blue. */
.founders-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #5ea3fa;
    font-weight: 700;
}
.founders-muted { color: #787b86; font-size: 13px; }

.founders-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}
.founders-steps > li {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.45;
    color: #d1d4dc;
}
.founders-step-num {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(94, 163, 250, 0.12);
    border: 1px solid rgba(94, 163, 250, 0.45);
    color: #bcd6fb;
    font-size: 13px;
    font-weight: 700;
}
.founders-step-body { padding-top: 2px; }
.founders-steps a,
.founders-substeps a {
    color: #5ea3fa;
    text-decoration: none;
    font-weight: 600;
}
.founders-steps a:hover,
.founders-substeps a:hover { text-decoration: underline; }

.founders-substeps {
    list-style: disc;
    margin: 6px 0 0;
    padding-left: 20px;
}
.founders-substeps li {
    margin-bottom: 4px;
    font-size: 14px;
    color: #9aa0ab;
}

.founders-expect {
    padding-top: 20px;
    margin-bottom: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.founders-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.founders-tag {
    font-size: 13px;
    color: #c3c8d1;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.founders-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
/* Slightly trimmer than the full-page hero buttons so they sit naturally
   inside the panel. */
.founders-cta .landing-btn-primary,
.founders-cta .landing-btn-secondary {
    height: 48px;
    font-size: 15px;
    min-width: 156px;
}
.founders-scarcity {
    flex: 1 1 240px;
    margin: 0;
    font-size: 13px;
    color: #787b86;
    line-height: 1.5;
}
.founders-scarcity strong { color: #bcd6fb; }

@media (prefers-reduced-motion: reduce) {
    .founders-badge-dot { animation: none; }
}

@media (max-width: 768px) {
    .landing-showcase.founders { padding: 30px 0 60px; }
    .founders-panel { padding: 32px 22px 30px; border-radius: 16px; }
    .founders-headline { font-size: 30px; letter-spacing: -0.5px; }
    .founders-sub { font-size: 15px; }
    .founders-grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 28px; }
    .founders-glow { top: -120px; right: -100px; width: 300px; height: 300px; }
    .founders-cta { flex-direction: column; align-items: stretch; }
    .founders-cta .landing-btn-primary,
    .founders-cta .landing-btn-secondary { width: 100%; }
    .founders-scarcity { text-align: center; padding-top: 4px; }
}

/* Live data section (light theme) */
.landing-data {
    background: #000000;
    padding: 60px 0 80px;
    --light-bg: #0a0a0a;
    --light-border: #1a1a1a;
    --light-text: #d1d4dc;
    --light-text-secondary: #787b86;
    --light-text-muted: #787b86;
    --light-hover: #111111;
    --light-surface: #1a1a1a;
    border-radius: 36px 36px 0 0;
    margin-top: -36px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.landing-data-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (max-width: 768px) {
    .landing-headline { font-size: 56px; letter-spacing: -2.5px; }
    .landing-hero-content { padding: 0 24px; }
    /* Hero is `align-items: center` over a 100vh-64px box; on tall narrow
       phones the vertically-centered headline / sub / buttons stack ends
       up taller than that box and gets clipped at the top by the topbar.
       Anchor to flex-start with explicit top padding so there's a clean
       gutter under the nav. */
    .landing-hero {
        align-items: flex-start;
        padding-top: 64px;
        padding-bottom: 60px;
        height: auto;
        min-height: calc(100vh - 64px);
    }
    .landing-sub { font-size: 17px; margin-bottom: 40px; }
    .landing-buttons { flex-direction: column; align-items: center; gap: 12px; padding: 0 20px; }
    .landing-btn-primary, .landing-btn-secondary {
        text-align: center;
        height: 48px;
        padding: 0 20px;
        font-size: 15px;
        min-width: 168px;
    }
    .landing-section-headline { font-size: 32px; letter-spacing: -1px; }
    .landing-section-sub { font-size: 15px; }
    .landing-showcase { padding: 60px 0; }
    .landing-showcase-inner { padding: 0 12px; }
    .landing-features { padding: 60px 0; }
    .landing-features-inner { grid-template-columns: 1fr; padding: 0 20px; gap: 16px; }
    .landing-data { padding: 40px 0 60px; }
    .landing-data-inner { padding: 0 20px; }
    .home-grid { grid-template-columns: 1fr; }
    .home-main-inner { padding: 20px 16px; }
    .home-section-title { font-size: 20px; }
    .topbar { padding: 0 12px; height: 56px; }
    .topbar-logo-img { height: 22px; }
    /* Default mobile state — search collapses, magnifying-glass toggle
     * replaces the user/sign-up buttons. Tapping the toggle adds
     * `.is-search-open` to .topbar via JS; the override block below
     * expands the search-wrapper to span the topbar full width. */
    .search-wrapper { display: none; }
    .topbar-search { display: none; }
    .topbar-search-kbd { display: none; }
    .topbar-search-toggle { display: inline-flex; }
    /* Mobile gap is tighter — desktop's 16px feels airy when only the
     * search-toggle + auth affordance live in the right cluster. The
     * leading padding/margin on .topbar-user is also trimmed so the
     * toggle sits flush against the auth element. */
    .topbar-right { gap: 6px; }
    .topbar-right .topbar-user { padding-left: 0; margin-left: 0; gap: 4px; }
    /* Selective hide of the burger-redundant auth affordance:
     *   logged-out  → hide the login icon, KEEP the Sign-up CTA.
     *   logged-in   → hide the Log-out button, KEEP the person/account icon.
     * Login (anon) and Log out (authed) are still reachable via the
     * burger menu's auth section, so they don't need a topbar slot.
     * Higher specificity (0,2,0) so we beat the unconditional
     * `.topbar-user { display: flex }` defined later (line ~7800). */
    .topbar-user.is-anon .topbar-user__login { display: none; }
    .topbar-user.is-authed .topbar-user__logout { display: none; }
    .topbar-link { font-size: 13px; padding: 14px 8px; }
    .topbar-clock { display: none; }
    .topbar-status span:last-child { display: none; }
    .landing-scroll-hint { bottom: 20px; }

    /* Mobile search-takeover overrides. */
    .topbar.is-search-open .topbar-left,
    .topbar.is-search-open .topbar-center,
    .topbar.is-search-open .topbar-search-toggle,
    .topbar.is-search-open .topbar-discord,
    .topbar.is-search-open .topbar-user {
        display: none;
    }
    .topbar.is-search-open .topbar-right {
        flex: 1 1 auto;
        width: 100%;
    }
    .topbar.is-search-open .search-wrapper {
        display: flex;
        flex: 1 1 auto;
        width: 100%;
    }
    .topbar.is-search-open .topbar-search {
        display: flex;
        width: 100%;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        padding: 8px 12px;
        font-size: 14px;
    }
    .topbar.is-search-open .search-dropdown {
        position: fixed;
        left: 8px;
        right: 8px;
        top: 64px;
        width: auto;
        max-height: calc(100vh - 80px);
    }
}

@media (min-width: 769px) {
    /* Toggle button is mobile-only; never show on desktop even if
     * `.is-search-open` somehow gets set. Specificity bumped so this
     * beats the later `.topbar-icon-btn { display: inline-flex }` rule. */
    .topbar-icon-btn.topbar-search-toggle { display: none; }
}

@media (max-width: 480px) {
    .landing-headline { font-size: 48px; letter-spacing: -2px; }
    .landing-sub { font-size: 16px; }
    .landing-showcase-inner { padding: 0 20px; }
    .hero-chart-header { flex-direction: column; align-items: flex-start; gap: 4px; }
    .hero-price { font-size: 20px; }
    .hero-timeframes { margin: 8px 8px 12px; }
    .tf-btn { padding: 4px 12px; font-size: 12px; min-width: 44px; }
    .showcase-placeholder-row span { font-size: 10px; }
    .feature-card { padding: 24px 16px; }
    .feature-card h3 { font-size: 15px; }
}

/* On the narrowest phones, drop the hero subhead by another point so it
   doesn't wrap into an awkward 4-line block. */
@media (max-width: 417px) {
    .landing-sub { font-size: 15px; }
}

/* === HOME MAIN INNER (light area below hero) === */
.home-main-inner {
    padding: 24px 32px;
    background: var(--light-bg);
}

.home-section-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #d1d4dc;
    letter-spacing: -0.02em;
}

.home-hero {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Match the Most Traded / Recent Sweeps cards next to it: same border /
       background / radius, and the same "no outer padding — inner sections
       supply 20px horizontal" pattern those cards use. */
    background: #000000;
    border: 1px solid #4a4a4a;
    border-radius: 16px;
}

/* Bring the hero's inner blocks in line with the 20px sides Most Traded uses
   for its header rows, so breadcrumb / title / contract bar / chart all align
   at the same inset from the card border. */
.home-hero .mkt-identity {
    padding: 20px 20px 0;
}

/* .home-hero-meta is no longer in the DOM — the K button moved into
   .home-hero-eyebrow's flex row. Rule kept as a no-op safety net in
   case any other consumer references it. */
.home-hero-meta { display: none; }

/* Eyebrow line above the title — Bloomberg / TradingView convention
   for a context strip. Sequence:
       🔥 TRENDING NOW · $135K 24h volume          [K] ↗
   Small uppercase caps, muted color so the headline below owns the
   visual weight. The K link anchors to the right edge via
   margin-left:auto so it lives on the eyebrow's baseline rather
   than floating as a separate corner element. */
.home-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: #9aa0a6;
    margin-bottom: 8px;
    min-height: 16px;  /* prevents reflow when content lazy-loads */
}

/* K link inside the eyebrow — borderless icon link, not a button.
   Detail-page .mkt-kalshi-btn keeps its full chrome (set at the
   global rule below); this scoped override only applies on the home
   hero where the icon should read as quiet metadata, not a CTA. */
.home-hero-eyebrow .mkt-kalshi-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    opacity: 0.72;
    transition: opacity 0.15s;
    /* Cancels the corner-button hover transforms from the global rule. */
    transform: none;
}
.home-hero-eyebrow .mkt-kalshi-btn:hover {
    opacity: 1;
    background: transparent;
    border: 0;
    transform: none;
}
.home-hero-eyebrow .mkt-kalshi-btn::after {
    content: "↗";
    font-size: 12px;
    line-height: 1;
    color: inherit;
}
.home-hero-eyebrow .mkt-kalshi-logo {
    width: 18px;
    height: 18px;
    /* Pulls just a touch of the Kalshi-brand-green saturation so the
       K stops competing with the YES pill green below — but keeps
       the brand recognizable. Hover restores the full color (paired
       with opacity:1) for a subtle "this is alive" cue. */
    filter: saturate(0.8);
}
.home-hero-eyebrow .mkt-kalshi-btn:hover .mkt-kalshi-logo {
    filter: saturate(1);
}

/* Wide screens — the card has more room and the section headline
   above it is large, so the eyebrow's K + ↗ need to scale up or
   they look orphaned at the right edge. */
@media (min-width: 800px) {
    .home-hero-eyebrow .mkt-kalshi-btn::after {
        font-size: 13px;
    }
    .home-hero-eyebrow .mkt-kalshi-logo {
        width: 20px;
        height: 20px;
    }
}
@media (min-width: 1400px) {
    .home-hero-eyebrow .mkt-kalshi-btn::after {
        font-size: 14px;
    }
    .home-hero-eyebrow .mkt-kalshi-logo {
        width: 22px;
        height: 22px;
    }
}
.home-hero-hot-icon {
    /* Emoji is a color glyph; sized a hair larger than the surrounding
       caps so the silhouette reads first. Line-height 1 stops it from
       inflating the eyebrow row height. */
    font-size: 14px;
    line-height: 1;
}
.home-hero-hot-text {
    /* "Trending Now" keeps the warm orange the old corner badge had —
       just dialed slightly so the eyebrow stays a single tonal step
       above the muted separator + label. */
    color: #ff6a3d;
}
.home-hero-eyebrow-sep {
    color: #4a4e57;
    font-weight: 400;
}
/* Volume slot — picks up the white-text emphasis the old corner badge
   gave it, but stays inline with the rest of the eyebrow. Normal-case
   so "$135K volume" reads as data, not a heading. */
.home-hero-eyebrow .mkt-volume-inline {
    color: #f3f4f6;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 0;
    line-height: 1.2;
}

/* Wider screens — eyebrow gets a touch more presence. */
@media (min-width: 800px) {
    .home-hero-eyebrow {
        font-size: 13px;
    }
    .home-hero-hot-icon {
        font-size: 15px;
    }
    .home-hero-eyebrow .mkt-volume-inline {
        font-size: 13px;
    }
}
.home-hero .chart-contract-bar-wrap {
    margin: 14px 20px;
}

/* Homepage hero replaces the full contract bar with a compact label that
   shows just the contract name + the active YES/NO side. The bar's chrome
   (toggle buttons, metrics strip, dropdown) lives in the page DOM but is
   hidden — we keep the JS hooks live so any other consumers of the bar's
   inputs (volume metric, liquidity, etc.) can still read them. */
.home-hero #home-chart-contract-bar-wrap {
    display: none;
}

/* The home hero swaps the size hierarchy of the detail page: the active
   contract name + side is the headline, the event title becomes a small
   eyebrow above it. Left-aligned to match the title row. */
.home-active-contract {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #f3f4f6;
    margin-top: 12px;
    line-height: 1.2;
}
.home-active-contract-sep {
    color: #6a7080;
    font-weight: 400;
}
/* Contract name is an <a> so clicking it opens the market detail
   page (same target as the headline above it). Hover treatment
   mirrors `#home-sel-title` exactly so the two clickable
   headlines on the hero card behave identically: inherit the
   parent color, flip to accent-blue on hover with the same
   short transition, no underline. */
#home-active-contract-name {
    color: inherit;
    text-decoration: none;
    transition: color 0.12s ease;
}
#home-active-contract-name:hover {
    color: var(--accent-blue);
}
/* YES/NO pill — styled to match the .sweep-dollar-pill chip on the
   Recent Sweeps card: full-capsule radius, white text on a solid
   green / red fill, same Inter + numeric font features. Text size
   (16px) is kept from the original so this stays the row's
   headline-scale element next to the contract name. */
.home-active-contract-side {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 14px;
    border-radius: 100px;
    font-family: 'Inter', system-ui, sans-serif;
    font-feature-settings: "case" on;
    font-variant-numeric: lining-nums tabular-nums;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: #16a34a;
    color: #f3f4f6;
    border: 1px solid #16a34a;
}
.home-active-contract-side.is-no {
    background: #ef4444;
    color: #f3f4f6;
    border-color: #ef4444;
}
.home-hero .hero-chart-area-tv {
    margin: 0 20px 16px;
}
.home-hero .hero-top-row {
    margin: 20px 20px 18px;
}

/* Small-screen hero card: scale the title down with viewport width and
   freeze the chart from interaction (panning / zooming a lightweight-charts
   instance on a phone scrolls + redraws the page in awkward ways and the
   homepage card is meant to read as a preview, not a tradable surface). */
@media (max-width: 600px) {
    .home-hero .mkt-title {
        font-size: clamp(15px, 5vw, 22px);
    }
    .home-hero .hero-chart-card,
    .home-hero .hero-chart-area-tv {
        pointer-events: none;
    }
    /* Chart isn't interactive at this size, so the timeframe pills + price-
       source pills (.hero-top-row contains both) are decorative dead weight.
       Hide them so the card is just title + chart. */
    .home-hero .hero-top-row {
        display: none;
    }
}

/* Mid-and-down: shrink the chart's horizontal gutter so the line series
   gets more of the card width as the viewport narrows. The 20px desktop
   gutter wastes too much pixel budget once the card itself is narrow.
   Keep left+right symmetric on .hero-chart-area-tv so the chart sits
   centered inside the card. */
@media (max-width: 900px) {
    .home-hero .hero-chart-area-tv {
        margin-left: 8px;
        margin-right: 8px;
    }
    /* Symmetric left/right gutter. The title-row has its own
       padding-right reservation (200 px) that keeps the title from
       colliding with the absolutely-positioned hero meta, so there's
       no reason to compress the identity's right padding here. */
    .home-hero .mkt-identity {
        padding-top: 12px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .home-hero .home-hero-meta {
        top: 12px;
    }
}
@media (max-width: 480px) {
    .home-hero .hero-chart-area-tv {
        margin-left: 4px;
        margin-right: 4px;
    }
    .home-hero .mkt-identity {
        padding-top: 8px;
        padding-left: 8px;
        padding-right: 8px;
    }
    .home-hero .home-hero-meta {
        top: 8px;
    }
}

.home-hero .home-section-title {
    color: #d1d4dc;
}

.home-hero .hero-chart-card {
    margin-bottom: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.home-pulse-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(28px, 2.6vw, 44px);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.03em;
    margin: 0 0 20px;
}

/* Hero chart area — TradingView (lightweight-charts). Fixed height — NOT flex-1,
   because a flex-grow container combined with lightweight-charts' own auto-sizing
   creates an infinite resize loop. */
.hero-chart-area-tv {
    position: relative;
    height: 360px;
    margin: 0 16px 8px;
    overflow: hidden;
}

/* Top section: 3-column grid, chart spans 2 cols */
.home-top-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 auto 24px;
    align-items: stretch;
}

.home-top-row > .home-hero {
    grid-column: span 2;
}

.home-recent-sweeps {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-recent-sweeps .most-traded-card {
    height: 100%;
    min-height: 480px;
}

.home-most-traded {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.home-most-traded #home-most-traded {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.most-traded-list {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.home-hero {
    min-height: 0;
}

.home-most-traded .most-traded-card {
    height: 100%;
}

.home-most-traded .home-section-title {
    color: #d1d4dc;
}

.most-traded-card {
    background: #000000;
    border: 1px solid #4a4a4a;
    border-radius: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.most-traded-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 16px;
}

.most-traded-title,
.hero-chart-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(20px, 1.6vw, 28px);
    font-weight: 600;
    color: #d1d4dc;
    letter-spacing: -0.02em;
}

.hero-chart-title {
    padding: 20px 20px 16px;
}

.most-traded-tabs {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

#mt-tabs .mt-tab {
    font-family: -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, Ubuntu, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #dbdbdb;
    background: transparent;
    height: 34px;
    min-width: 34px;
    padding: 0 12px;
    line-height: 24px;
    border-radius: 6px;
    cursor: default;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-feature-settings: "tnum" on, "lnum" on;
    transition: background-color 0.15s, color 0.15s;
}

#mt-tabs .mt-tab:hover:not(.active) {
    background: #3d3d3d;
    color: #dbdbdb;
}

#mt-tabs .mt-tab.active {
    background: #2e2e2e;
    color: #ffffff;
    font-weight: 600;
}

#mt-tabs .mt-tab:focus {
    outline: none;
}

.mt-tab {
    background: transparent;
    border: none;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #b0b3ba;
    padding: 6px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    line-height: 1.2;
    min-width: 72px;
    text-align: center;
}

.mt-tab:hover:not(.active) {
    color: #d1d4dc;
    background: #22262f;
}

.mt-tab.active {
    color: #ffffff;
    background: #2a2e39;
}

.most-traded-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 8px;
}

.mt-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    min-height: 82px;
    flex: 1 1 0;
    cursor: pointer;
    transition: background 0.08s;
    gap: 16px;
    min-width: 0;
}

.mt-row:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: #2a2e39;
    pointer-events: none;
}

.mt-row::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 8px;
    right: 8px;
    border-radius: 10px;
    background: transparent;
    pointer-events: none;
    z-index: 0;
}

.mt-row > * {
    position: relative;
    z-index: 1;
}

/* Hover affordances on Most Traded rows. Gated on (hover: hover) so
   only true mouse-driven displays get the row highlight + category
   pill recolor — touch devices skip these rules entirely and the
   row never sticks in a "selected" state after a tap. */
@media (hover: hover) {
    .mt-row:hover::before {
        background: #22262f;
    }
    .mt-row:hover .mt-row-sub:not(.mt-row-live) {
        background: var(--accent-blue);
        color: #ffffff;
    }
}

.mt-row-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mt-row-title {
    font-size: 13px;
    font-weight: 600;
    color: #d1d4dc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mt-row-pills {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}

.mt-row-sub {
    font-size: 10px;
    font-weight: 600;
    color: #787b86;
    font-family: 'Inter', system-ui, sans-serif;
    background: #1a1a22;
    padding: 1px 6px;
    border-radius: 4px;
    align-self: flex-start;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mt-row-time {
    font-size: 10px;
    font-family: 'Inter', system-ui, sans-serif;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
}

.mt-row-live {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

/* Sweep stream animations */
.sweep-new {
    animation: sweep-slide-in 0.4s ease-out;
}

@keyframes sweep-slide-in {
    from {
        opacity: 0;
        transform: translateY(-100%);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 100px;
    }
}

.sweep-exit {
    animation: sweep-fade-out 0.3s ease-in forwards;
}

@keyframes sweep-fade-out {
    to {
        opacity: 0;
        max-height: 0;
        padding: 0;
        overflow: hidden;
    }
}

.mt-row-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.mt-row-value {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    font-family: 'Inter', system-ui, sans-serif;
}

.mt-row-change {
    font-size: 12px;
    color: #b0b3ba;
    font-family: 'Inter', system-ui, sans-serif;
    white-space: nowrap;
}

.mt-row-contract {
    font-size: 12px;
    color: #d1d4dc;
    font-family: 'Inter', system-ui, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mt-row-lifetime {
    color: #787b86;
}

/* Sweep rows */
.home-sweep-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 72px;
    cursor: pointer;
    transition: background 0.08s;
    gap: 16px;
    min-width: 0;
    flex-shrink: 0;
}

.home-sweep-row:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: #2a2e39;
    pointer-events: none;
}

.home-sweep-row::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 8px;
    right: 8px;
    border-radius: 10px;
    background: transparent;
    pointer-events: none;
    z-index: 0;
}

.home-sweep-row > * {
    position: relative;
    z-index: 1;
}

/* Hover affordances on the homepage Recent Sweeps row (legacy
   `.home-sweep-row` selector, paired with the live `.flow-item`
   variant below). Gated on (hover: hover) — touch devices skip
   them so a tap never leaves the row in a stuck "selected" state. */
@media (hover: hover) {
    .home-sweep-row:hover::before {
        background: #22262f;
    }
    .home-sweep-row:hover .mt-row-sub {
        background: var(--accent-blue);
        color: #ffffff;
    }
}

.sweep-row-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sweep-row-title {
    font-size: 13px;
    font-weight: 600;
    color: #d1d4dc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sweep-side-pill {
    font-size: 10px;
    font-weight: 600;
    color: #f3f4f6;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sweep-row-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.sweep-ago {
    font-size: 11px;
    color: #6b7280;
    font-family: 'Inter', system-ui, sans-serif;
}

.mt-row-sparkline {
    width: 70px;
    height: 32px;
    flex-shrink: 0;
    margin: 0 12px;
}

.mt-sparkline {
    display: block;
}

.mt-row-pct {
    font-size: 11px;
    font-weight: 600;
    font-family: 'Inter', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    color: #f3f4f6;
}

.mt-row-vol {
    font-size: 11px;
    color: #6b7280;
    font-family: 'Inter', system-ui, sans-serif;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .home-top-row {
        grid-template-columns: 1fr 1fr;
    }
    .home-top-row > .home-hero {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .home-top-row {
        grid-template-columns: 1fr;
    }
    .home-top-row > .home-hero {
        grid-column: span 1;
    }
}

/* Hero chart card (dark) */
.hero-chart-card {
    background: #000000;
    border: 1px solid #4a4a4a;
    border-radius: 16px;
    margin-bottom: 24px;
    overflow: hidden;
}

.hero-chart-area {
    position: relative;
    flex: 1;
    min-height: 0;
}

.hero-chart-area::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}

.hero-chart-area.tf-switching::after {
    opacity: 1;
}

.hero-chart-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #f5a623;
    padding: 16px 24px 0;
}

.hero-chart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    padding: 20px 24px 12px;
}

.hero-chart-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-chart-title-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.hero-chart-league {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #dbdbdb;
    display: none;
    padding-left: 0;
    border-left: none;
}

.hero-chart-league.wrapped {
    padding-left: 0;
    border-left: none;
}

.hero-chart-name {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(20px, 1.6vw, 28px);
    font-weight: 600;
    color: #d1d4dc;
    letter-spacing: -0.02em;
}

.hero-chart-name.hero-chart-name--compact {
    font-size: 22px;
}
.hero-chart-name a:hover { text-decoration: underline !important; }

.hero-chart-caret {
    display: inline-block;
    margin-left: 0;
    color: inherit;
    font: inherit;
}

.hero-chart-subtitle {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #787b86;
    display: none;
}

.hero-chart-link {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #787b86;
    text-decoration: none;
    display: none;
}
.hero-chart-link:hover { text-decoration: underline; }

.hero-chart-volume {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #dbdbdb;
}

.hero-chart-platform {
    font-size: 11px;
    color: var(--light-text-secondary);
    padding: 1px 6px;
    background: var(--light-surface);
    border-radius: 2px;
}

.hero-chart-price {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.hero-badges {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

.hero-badge {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 14px;
    border-radius: 999px;
    background: transparent;
    border: 2.5px solid #363a45;
    color: #d1d4dc;
    line-height: 1.3;
    text-align: center;
    min-width: 0;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: opacity 120ms ease, background-color 120ms ease;
}

.hero-badge:hover {
    background: rgba(255, 255, 255, 0.22);
}

.hero-badge.hidden {
    opacity: 0.35;
}

@media (min-width: 900px) {
    .hero-badge {
        font-size: 14px;
        padding: 5px 18px;
    }
}

.hero-price {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
    color: var(--light-text);
}

.hero-change {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
}

.hero-chart-area {
    padding: 0 8px 8px;
}

.hero-chart-area canvas {
    display: block;
}

.hero-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 16px 12px;
}

.hero-chart-modes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hero-mode-group {
    display: inline-flex;
    background: #0e0e14;
    border: 1px solid #2a2e39;
    border-radius: 999px;
}

.hero-mode-group .mt-tab {
    padding: 6px 14px;
    font-size: 12px;
    min-width: 0;
    color: #dbdbdb;
}

.hero-mode-group .mt-tab.active {
    color: #ffffff;
}

.hero-mode-group .mt-tab:hover:not(.active) {
    color: #dbdbdb;
}

.hero-mode-group .mt-tab[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    color: #dbdbdb;
}

.hero-mode-group .mt-tab[disabled]:hover {
    background: transparent;
    color: #dbdbdb;
}

.hero-chart-reset {
    padding: 6px 14px;
    font-size: 12px;
    min-width: 0;
    background: #0e0e14;
    border: 1px solid #2a2e39;
    border-radius: 999px;
    color: #dbdbdb;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.hero-chart-reset:hover {
    color: #ffffff;
    background: #22262f;
    border-color: #3a3f4d;
}

.hero-chart-reset:active {
    background: #2a2e39;
}

.hero-timeframes {
    display: inline-flex;
    align-self: flex-start;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 0;
    margin: 20px 0 18px;
}

.tf-btn {
    background: transparent;
    border: none;
    font-family: -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, Ubuntu, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #dbdbdb;
    height: 34px;
    min-width: 34px;
    padding: 0 12px;
    line-height: 24px;
    border-radius: 6px;
    cursor: default;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-feature-settings: "tnum" on, "lnum" on;
    transition: background-color 0.15s, color 0.15s;
    line-height: 1.2;
    min-width: 56px;
    text-align: center;
}

.tf-btn:hover:not(.active) {
    background: #2e2e2e;
    color: #dbdbdb;
}

.tf-btn.active {
    background: #2e2e2e;
    color: #ffffff;
    font-weight: 600;
}

.tf-btn:focus {
    outline: none;
}

/* Market detail: timeframes + mode buttons share one row. Mode buttons
   adopt the same visual style as the .tf-btn range switcher. */
.hero-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 20px 0 18px;
}

.hero-top-row .hero-timeframes {
    margin: 0;
}

.hero-top-row .hero-chart-modes {
    margin-left: auto;
}

.hero-top-row .hero-mode-group {
    background: transparent;
    border: none;
    border-radius: 0;
    gap: 8px;
}

.hero-top-row .hero-mode-group .mt-tab,
.hero-top-row .hero-chart-reset {
    background: transparent;
    border: none;
    font-family: -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, Ubuntu, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #dbdbdb;
    height: 34px;
    min-width: 56px;
    padding: 0 12px;
    line-height: 1.2;
    border-radius: 6px;
    cursor: default;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-feature-settings: "tnum" on, "lnum" on;
    transition: background-color 0.15s, color 0.15s;
    text-align: center;
}

.hero-top-row .hero-mode-group .mt-tab:hover:not(.active):not([disabled]),
.hero-top-row .hero-chart-reset:hover {
    background: #3d3d3d;
    color: #dbdbdb;
}

.hero-top-row .hero-mode-group .mt-tab.active {
    background: #2e2e2e;
    color: #ffffff;
    font-weight: 600;
}

.hero-top-row .hero-mode-group .mt-tab:focus,
.hero-top-row .hero-chart-reset:focus {
    outline: none;
}

/* Home grid */
.home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.home-card {
    background: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow .2s;
}
.home-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.home-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--light-border);
}

.home-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--light-text);
}

.home-card-link {
    font-size: 12px;
    color: var(--accent-blue);
}

.home-card-link:hover { text-decoration: underline; }

.home-card-body {
    padding: 0 4px 8px;
}

.home-loading {
    padding: 20px 16px;
    color: var(--light-text-muted);
    font-size: 12px;
}

/* Home market row (light theme) */
.home-market-row {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.08s;
    font-size: 13px;
}

.home-market-row:hover { background: var(--light-hover); }

.home-market-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    margin-right: 12px;
    color: var(--light-text);
}

.home-market-value {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--light-text);
    min-width: 50px;
    text-align: right;
}

.home-market-change {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    min-width: 56px;
    text-align: right;
}

/* Category rows on home */
.home-cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    font-size: 13px;
}

.home-cat-name {
    font-weight: 500;
    text-transform: capitalize;
    color: var(--light-text);
}

.home-cat-count {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--light-text-secondary);
}

/* ============================
   WATCHLIST SIDEBAR (dark)
   ============================ */
.watchlist-sidebar {
    width: 320px;
    min-width: 320px;
    background: var(--dark-bg);
    border-left: 1px solid var(--dark-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.watchlist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--dark-border);
}

.watchlist-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark-text);
}

.watchlist-columns {
    display: flex;
    padding: 6px 16px;
    font-size: 10px;
    color: var(--dark-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--dark-border);
}

.watchlist-columns span:first-child { flex: 1; }
.watchlist-columns span { min-width: 50px; text-align: right; }

.watchlist-group {
    border-bottom: 1px solid var(--dark-border);
}

.watchlist-group-label {
    padding: 8px 16px 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--dark-text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.wl-row {
    display: flex;
    align-items: center;
    padding: 5px 16px;
    cursor: pointer;
    transition: background 0.08s;
    font-size: 12px;
}

.wl-row:hover { background: var(--dark-hover); }
.wl-row.selected { background: var(--dark-surface); border-left: 2px solid var(--accent-gold); }

.wl-row-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: var(--dark-text);
}

.wl-row-prob {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-gold);
    min-width: 50px;
    text-align: right;
}

.wl-row-chg {
    font-family: var(--font-mono);
    font-size: 11px;
    min-width: 50px;
    text-align: right;
}

/* Watchlist detail panel (bottom of sidebar) */
.watchlist-detail {
    border-top: 1px solid var(--dark-border);
    padding: 14px 16px;
    margin-top: auto;
}

.wl-detail-header {
    margin-bottom: 4px;
}

.wl-detail-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--dark-text);
}

.wl-detail-meta {
    font-size: 11px;
    color: var(--dark-text-muted);
    margin-bottom: 8px;
}

.wl-detail-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.wl-detail-price {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--accent-gold);
}

.wl-detail-change {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
}

.wl-detail-stats {
    font-size: 11px;
}

.wl-detail-stat {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
}

.wl-detail-stat-label { color: var(--dark-text-secondary); }

.wl-detail-stat-value {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--dark-text);
}

/* ════════════════════════════════════════════════════════════════════════
   SCREENER — dark institutional terminal (AG Grid + Lightweight Charts)
   ════════════════════════════════════════════════════════════════════════ */

:root {
    /* Screener palette tracks TradingView's screener:
     *   bg #131722, panel #1E222D, divider #2A2E39,
     *   text #D1D4DC, muted #787B86, up #26A69A, down #EF5350. */
    /* TradingView-style typography + accents, but with a near-black
     * background instead of TV's blue-tinted #131722 — the rest of the
     * Unpriced terminal is black-on-black, the screener should match. */
    --scr-bg:           #0a0a0c;
    --scr-surface:      #14151b;
    --scr-surface-2:    #1a1c24;
    /* Row dividers — a clean hairline derived from white at low alpha
     * so the line reads as a sharp 1px ruling against the near-black
     * surface rather than a muddy dark band. Higher alpha than TV's
     * solid #2A2E39 (~13%) so dividers between rows read at a glance
     * without looking heavy. */
    --scr-border:       rgba(220, 224, 232, 0.20);
    --scr-border-soft:  rgba(220, 224, 232, 0.16);
    --scr-text:         #D1D4DC;
    --scr-text-dim:     #B2B5BE;
    --scr-text-muted:   #787B86;
    --scr-accent:       #2962FF;
    --scr-accent-dim:   rgba(41, 98, 255, 0.15);
    --scr-warn:         #FF9800;
    --scr-warn-dim:     rgba(255, 152, 0, 0.10);
    --scr-alert:        #EF5350;
    --scr-alert-dim:    rgba(239, 83, 80, 0.10);
    --scr-info:         #29B6F6;
    --scr-info-dim:     rgba(41, 182, 246, 0.10);
    --scr-row-hover:    #1f1f22;
    --scr-row-sel:      #1f1f22;
    --scr-up:           #26A69A;
    --scr-down:         #EF5350;
    --scr-font:         -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
}

body.screener-page {
    background: var(--scr-bg);
    color: var(--scr-text);
    font-family: var(--scr-font);
}
body.screener-page .topbar {
    background: var(--scr-bg);
    border-bottom: 1px solid var(--scr-border);
}

/* Full-viewport shell */
.screener-shell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
    overflow: hidden;
    background: var(--scr-bg);
    color: var(--scr-text);
    font-family: var(--font-ui);
    transition: opacity 0.12s ease;
}

.screener-shell.is-reloading {
    opacity: 0.55;
    pointer-events: none;
}

/* Backtest view escapes the overflow:hidden constraint above. The live
   view uses internal scrolling inside the table (AG-Grid or
   .screener-grid-wrap), but the backtest tab on /crypto, /stocks, and
   /mention-markets stacks ~1500px of analytics vertically (summary
   cards + cumulative chart + by-X breakdown tables + per-trade table at
   the bottom). With overflow:hidden in place, anything below the first
   viewport gets clipped — the user literally can't see (or scroll to)
   the per-trade table at the bottom. Keep the shell at viewport height
   so it sits within the topbar/footer layout the rest of the app uses,
   but switch its vertical overflow to auto so its own content scrolls
   inside. /mention-markets toggles is-backtest on <body>, not the
   shell, so we match that path too. */
.screener-shell.is-backtest,
.mention-markets-page.is-backtest .screener-shell {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* ── Toolbar ───────────────────────────────────────────────────────── */
.screener-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 48px;
    min-height: 48px;
    padding: 0 16px;
    /* Shares the page bg (transparent → shell shows through) and sits
       borderless so there's no divider strip above or below the toolbar. */
    background: transparent;
    flex-shrink: 0;
}
.screener-toolbar-left, .screener-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.screener-toolbar-left { flex: 1; overflow-x: auto; scrollbar-width: none; }
.screener-toolbar-left::-webkit-scrollbar { display: none; }

.screener-search {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.screener-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--scr-text-muted);
    pointer-events: none;
}
.screener-input {
    /* Match the Category / Resolution selectors: 38px tall, 1px #2e2e2e
       border, transparent at rest, #2e2e2e on hover/focus. */
    background-color: transparent;
    background-clip: padding-box;
    border: 1px solid #2e2e2e;
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--scr-text);
    font-family: var(--scr-font);
    font-size: 15px;
    height: 38px;
    padding: 0 14px 0 32px;
    width: 280px;
    outline: none;
    transition: background-color 0.12s;
}
.screener-input:hover  { background-color: #2e2e2e; }
.screener-input:focus  { background-color: #2e2e2e; }
.screener-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--scr-text-muted);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 14px;
    line-height: 1;
    border-radius: 3px;
    display: none;
}
.screener-search-clear:hover { color: var(--scr-text); background: rgba(255,255,255,0.06); }
.screener-search.has-text .screener-search-clear { display: block; }
.screener-input::placeholder { color: var(--scr-text-muted); }

.screener-group {
    /* Container for the Markets/Events switcher and the preset pills.
       Visually a single group of 38px-tall buttons sharing the Category /
       Resolution language. No outer border or surface tint — each pill
       carries its own border. */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}
.screener-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    background-clip: padding-box;
    border: 1px solid #2e2e2e;
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--scr-text);
    font-family: var(--scr-font);
    font-size: 15px;
    font-weight: 400;
    height: 38px;
    padding: 0 14px;
    cursor: default;
    outline: none;
    white-space: nowrap;
    transition: background-color 0.12s;
}
.screener-pill:hover  { background-color: #2e2e2e; }
.screener-pill.is-active {
    background-color: #2e2e2e;
    color: var(--scr-text);
}

/* Action variant — TradingView's filled "Save links" button. Use on
   buttons that perform an action (Reset, Refresh, Export, Track, Save)
   rather than toggle a filter, so actions read as solid buttons and
   filters read as outlined chips. Filled #2e2e2e → hover #3d3d3d →
   active #4a4a4a, white text, no border. */
.screener-pill--action {
    background-color: #2e2e2e !important;
    border-color: #2e2e2e !important;
    color: #fff !important;
    font-weight: 600;
}
.screener-pill--action:hover { background-color: #3d3d3d !important; border-color: #3d3d3d !important; color: #fff !important; }
.screener-pill--action:active { background-color: #4a4a4a !important; border-color: #4a4a4a !important; }
.screener-pill--action[disabled] { opacity: 0.5; }
/* "Reset filters" reads as a lighter, secondary action — not bold like
   the other filled action buttons. ID specificity beats the --action
   font-weight without !important. */
#stocks-reset-filters,
#cx-reset-filters,
#mm-reset-filters { font-weight: 400; }

.screener-divider {
    width: 1px;
    height: 22px;
    background: var(--scr-border);
    flex-shrink: 0;
}

.screener-select-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.screener-select-label {
    font-family: var(--scr-font);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--scr-text-muted);
}
/* Native <select> is enhanced into a custom .unp-dropdown widget by
   enhanceSelects() at boot. Hide the native element from the first paint so
   the user never sees the OS-styled select flash before JS upgrades it. */
.screener-select {
    display: none;
}

/* Multi-select dropdown — used for the Category filter. Trigger is a
   pill-button mirroring .screener-select; panel is an absolutely-positioned
   floating popover with search, checkbox rows, and a Select-all footer. */
/* Exchange multi-select (Edges live tables) reuses the .screener-ms
 * component verbatim; the only extra is the brand logo before each
 * venue name in the option rows. */
.screener-ms-row-logo {
    width: 18px; height: 18px; border-radius: 4px;
    object-fit: contain; flex-shrink: 0;
}

.screener-ms {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.screener-ms-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: transparent;
    border: 1px solid #2e2e2e;
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--scr-text);
    font-family: var(--scr-font);
    font-size: 15px;
    font-weight: 400;
    height: 38px;
    padding: 0 14px;
    cursor: default;
    outline: none;
    transition: background-color 0.12s, box-shadow 0.12s;
}
.screener-ms-trigger:hover { background-color: #2e2e2e; }
.screener-ms.is-open .screener-ms-trigger {
    /* Open-state indicator is the panel that drops below; no glowing ring
       on the trigger's left/right edges. */
    background-color: #2e2e2e;
}
.screener-ms-trigger-label {
    color: var(--scr-text-muted);
    font-family: var(--scr-font);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: normal;
}
.screener-ms-trigger-field {
    /* Hidden by default — the value span carries the field name as its
       placeholder when no filter is applied. The field span only appears
       when the wrapper is .is-active (filter applied), forming a TV-style
       "Field: Value" pill. */
    display: none;
    color: var(--scr-text-muted);
    font-family: var(--scr-font);
    font-size: 15px;
    font-weight: 400;
}
.screener-ms-trigger-value {
    color: var(--scr-text);
    font-size: 15px;
}
.screener-ms-trigger-value.is-empty { color: var(--scr-text); }
.screener-ms-chevron {
    color: var(--scr-text-muted);
    transition: transform 0.15s;
}
.screener-ms.is-open .screener-ms-chevron { transform: rotate(180deg); }

/* Inline clear button — hidden until a filter is applied. */
.screener-ms-trigger-clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 38px;
    margin-left: 4px;
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--scr-text-muted);
    border: 1px solid #2e2e2e;
    border-radius: 8px;
    box-sizing: border-box;
    cursor: default;
    outline: none;
    transition: background-color 0.12s, color 0.12s;
}
.screener-ms-trigger-clear:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--scr-text);
}

/* Active-filter pill — TradingView style: light pill with dark text,
   chevron hidden, X joined to the same pill via a vertical divider.
   Layout: [Field-name (dim)] [Value (bold)] │ [×]. */
.screener-ms.is-active .screener-ms-trigger {
    background-color: #e6e8ec;
    color: #131722;
    border-color: transparent;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.screener-ms.is-active .screener-ms-trigger:hover {
    background-color: #dcdfe4;
}
.screener-ms.is-active .screener-ms-trigger-field {
    display: inline;
    color: rgba(19, 23, 34, 0.72);
}
.screener-ms.is-active .screener-ms-trigger-value {
    color: #131722;
    font-weight: 600;
}
.screener-ms.is-active .screener-ms-trigger-value.is-empty { color: #131722; }
.screener-ms.is-active .screener-ms-chevron { display: none; }
.screener-ms.is-active .screener-ms-trigger-clear {
    display: inline-flex;
    margin-left: 0;
    background-color: #e6e8ec;
    color: rgba(19, 23, 34, 0.65);
    border-color: transparent;
    border-left: 1px solid rgba(0, 0, 0, 0.20);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.screener-ms.is-active .screener-ms-trigger-clear:hover {
    background-color: #dcdfe4;
    color: #131722;
}

.screener-ms-panel {
    /* `fixed` (not absolute) so the panel escapes the overflow:auto on
       .screener-toolbar-left and overflow:hidden on .screener-shell. JS
       writes the top/left at open time from the trigger's bounding rect. */
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    max-height: 460px;
    display: none;
    flex-direction: column;
    background: #1a1a1a;
    border: 1px solid #2e2e2e;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.7);
    padding: 8px;
    z-index: 1001;
}
.screener-ms.is-open .screener-ms-panel { display: flex; }

.screener-ms-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 8px;
}
.screener-ms-title {
    color: var(--scr-text);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
}
.screener-ms-clear {
    background: transparent;
    border: none;
    color: var(--scr-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
}
.screener-ms-clear:hover { color: var(--scr-text); background: rgba(255, 255, 255, 0.06); }

.screener-ms-search {
    background: rgb(46, 46, 46);
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--scr-text);
    font-family: var(--font-ui);
    font-size: 13px;
    height: 32px;
    padding: 0 12px;
    outline: none;
    margin: 0 4px 6px;
}
.screener-ms-search:focus { background: rgb(58, 58, 58); border-color: rgba(255, 255, 255, 0.12); }
.screener-ms-search::placeholder { color: var(--scr-text-muted); }

.screener-ms-options {
    overflow-y: auto;
    flex: 1;
    /* Bleed past the panel's 8px padding so option rows can extend nearly
       edge-to-edge — gives the hover highlight a noticeably wider hit area
       than the inner content suggests. */
    margin: 0 -8px;
    padding: 0;
    scrollbar-width: thin;
}
.screener-ms-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: default;
    color: var(--scr-text);
    font-family: var(--font-ui);
    font-size: 13px;
    user-select: none;
}
.screener-ms-row:hover { background: rgba(255, 255, 255, 0.06); }
.screener-ms-row.is-focused {
    border-color: #5ea3fa;
}
.screener-ms-row.is-checked .screener-ms-checkbox {
    background: #5ea3fa;
    border-color: #5ea3fa;
}
/* Checkmark is drawn with the row's background colour so it reads as a
   knock-out / cutout of the filled blue box — i.e. you "see through" the
   tick to whatever sits behind the row. */
.screener-ms-row.is-checked .screener-ms-checkbox::after {
    content: '';
    display: block;
    width: 8px;
    height: 4px;
    border-left: 2px solid #1a1a1a;
    border-bottom: 2px solid #1a1a1a;
    transform: rotate(-45deg) translate(1px, -1px);
}
.screener-ms-row.is-checked:hover .screener-ms-checkbox::after {
    /* Hovered row background is slightly lighter (#1a1a1a + rgba white 0.06).
       Match the checkmark to the hovered tone so the cutout still reads. */
    border-color: #232323;
}
.screener-ms-checkbox {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--scr-text-muted);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.screener-ms-row.is-hidden { display: none; }

.screener-ms-footer {
    border-top: 1px solid #2e2e2e;
    /* Match the horizontal bleed used by .screener-ms-options so the
       Select-all row's checkbox is aligned with the option rows above. */
    margin: 6px -8px 0;
    padding-top: 6px;
}
.screener-ms-row--all {
    color: var(--scr-text);
    font-weight: 500;
}

/* Custom dropdown — replaces the native <select> open list so menu items
 * inherit the dark UI palette instead of the OS-native styling. The
 * trigger mirrors .screener-select; the menu is an absolutely-positioned
 * popup. Underlying <select> stays in the DOM for keyboard / form
 * compatibility but is display:none. */
.unp-dropdown {
    position: relative;
    /* `inline-flex` instead of `inline-block` so the trigger and the
       sibling clear button center-align in the row instead of relying on
       text-baseline alignment (which floats the X above the pill body). */
    display: inline-flex;
    align-items: center;
}
.unp-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: transparent;
    border: 1px solid #2e2e2e;
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--scr-text);
    font-family: var(--scr-font);
    font-size: 15px;
    font-weight: 400;
    padding: 0 14px;
    cursor: default;
    outline: none;
    line-height: 1.2;
    height: 38px;
    transition: background-color 0.12s, box-shadow 0.12s;
}
.unp-dropdown-trigger:hover { background-color: #2e2e2e; }
.unp-dropdown.is-open .unp-dropdown-trigger,
.unp-dropdown-trigger:focus {
    /* No glowing ring on open — the dropped panel is the open-state cue. */
    background-color: #2e2e2e;
}
.unp-dropdown-field {
    /* Field-name span — hidden by default; shown only when wrapper is
       .is-active so the trigger transforms into a [field] [value] pill. */
    display: none;
    color: var(--scr-text-muted);
    font-family: var(--scr-font);
    font-size: 15px;
    font-weight: 400;
}
.unp-dropdown-label {
    flex: 1 1 auto;
    white-space: nowrap;
}
.unp-dropdown-trigger.is-empty .unp-dropdown-label { color: var(--scr-text); }
.unp-dropdown-chevron {
    display: inline-flex;
    align-items: center;
    color: #9aa0ac;
    transition: transform 0.12s;
}
.unp-dropdown.is-open .unp-dropdown-chevron { transform: rotate(180deg); }

/* Inline clear button beside the trigger — hidden until a filter is applied. */
.unp-dropdown-trigger-clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 38px;
    margin-left: 4px;
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--scr-text-muted);
    border: 1px solid #2e2e2e;
    border-radius: 8px;
    box-sizing: border-box;
    cursor: default;
    outline: none;
    transition: background-color 0.12s, color 0.12s;
}
.unp-dropdown-trigger-clear:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--scr-text);
}

/* Active-filter mode for the Resolution dropdown — same TV-style light pill
   with dark text, no chevron, X joined via a vertical divider. */
.unp-dropdown.is-active .unp-dropdown-trigger {
    background-color: #e6e8ec;
    color: #131722;
    border-color: transparent;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.unp-dropdown.is-active .unp-dropdown-trigger:hover {
    background-color: #dcdfe4;
}
.unp-dropdown.is-active .unp-dropdown-field {
    display: inline;
    color: rgba(19, 23, 34, 0.72);
}
.unp-dropdown.is-active .unp-dropdown-label {
    color: #131722;
    font-weight: 600;
}
.unp-dropdown.is-active .unp-dropdown-chevron { display: none; }
.unp-dropdown.is-active .unp-dropdown-trigger-clear {
    display: inline-flex;
    margin-left: 0;
    background-color: #e6e8ec;
    color: rgba(19, 23, 34, 0.65);
    border-color: transparent;
    border-left: 1px solid rgba(0, 0, 0, 0.20);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.unp-dropdown.is-active .unp-dropdown-trigger-clear:hover {
    background-color: #dcdfe4;
    color: #131722;
}

/* Mirror the Category multi-select panel exactly so the two dropdowns
   (Resolution + Category) read as the same component. */
.unp-dropdown-menu {
    position: fixed;
    min-width: 220px;
    max-width: 280px;
    background: #1a1a1a;
    border: 1px solid #2e2e2e;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.7);
    padding: 8px;
    display: none;
    flex-direction: column;
    z-index: 1001;
    max-height: 460px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.unp-dropdown-menu.is-open { display: flex; }

/* Inline custom-range panel inside the resolution dropdown. Hidden until
 * the user clicks the 'Custom range…' option, at which point the
 * existing item list is hidden and this panel takes its place. */
.unp-dropdown-custom {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 10px 8px 8px;
    min-width: 260px;
}
.unp-dropdown-custom-title {
    font-size: 11px;
    color: var(--scr-text-muted);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.unp-dropdown-custom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--scr-text);
}
.unp-dropdown-custom-label {
    width: 36px;
    color: var(--scr-text-muted);
    font-size: 12px;
}
.unp-dropdown-custom-row input {
    width: 64px;
    background: transparent;
    border: 1px solid #2e2e2e;
    border-radius: 6px;
    color: var(--scr-text);
    font-family: var(--scr-font);
    font-size: 14px;
    padding: 8px 10px;
    outline: none;
    -moz-appearance: textfield;
    text-align: center;
}
.unp-dropdown-custom-row input::-webkit-outer-spin-button,
.unp-dropdown-custom-row input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.unp-dropdown-custom-row input:focus { border-color: #5ea3fa; }
.unp-dropdown-custom-row > span:not(.unp-dropdown-custom-label) {
    color: var(--scr-text-muted);
    font-size: 12px;
    margin-left: -4px;
    margin-right: 2px;
}
.unp-dropdown-custom-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid #2e2e2e;
}
.unp-dropdown-custom-actions button {
    background: transparent;
    border: 1px solid #2e2e2e;
    border-radius: 6px;
    color: var(--scr-text);
    font-family: var(--scr-font);
    font-size: 13px;
    padding: 7px 16px;
    cursor: default;
    transition: background-color 0.12s;
}
.unp-dropdown-custom-actions button:hover {
    background: #2e2e2e;
}

.unp-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    color: var(--scr-text);
    font-family: var(--scr-font);
    font-size: 13px;
    padding: 9px 16px;
    margin: 0 -8px;
    border-radius: 6px;
    cursor: default;
    white-space: nowrap;
    transition: background 0.08s, color 0.08s;
    user-select: none;
}
/* Faux-checkbox to match the Category panel rows. Single-select, so the
   filled square indicates the active option. */
.unp-dropdown-item::before {
    content: '';
    display: inline-flex;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--scr-text-muted);
    border-radius: 4px;
    box-sizing: border-box;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-color 0.08s, border-color 0.08s;
}
.unp-dropdown-item:hover { background: rgba(255, 255, 255, 0.06); }
.unp-dropdown-item.is-selected::before {
    background-color: #5ea3fa;
    border-color: #5ea3fa;
    /* knock-out check via inline SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.5 5 8.5 9 4' stroke='%231a1a1a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.unp-dropdown-item.is-selected { color: var(--scr-text); }

.screener-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--scr-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ── Main: grid (centered when narrower than viewport) ─────────────── */
.screener-main {
    display: flex;
    justify-content: center;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Grid wrap always fills the viewport width — no max cap, no
 * left/right gutters. AG Grid handles its own empty-space behavior
 * past the last column. */
.screener-grid-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    width: 100%;
    background: var(--scr-bg);
    overflow: hidden;
}
/* Vertical divider on the very right edge of the table — matches the
   pinned Market-column divider (.ag-pinned-left-cols-container::after)
   in color/weight for visual consistency. */
.screener-grid-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: rgba(220, 224, 232, 0.10);
    pointer-events: none;
    z-index: 2;
}
/* Same divider style anchored to the rightmost COLUMN itself (not the
   viewport). When the table is narrower than its wrapper, the two lines
   coincide; when it scrolls horizontally, this one tracks the column
   while the wrapper's line stays at the visible edge. */
.unp-grid .ag-header-cell.ag-column-last,
.unp-grid .ag-cell.ag-column-last {
    border-right: 1px solid rgba(220, 224, 232, 0.10) !important;
}
.unp-grid {
    flex: 1;
    min-height: 0;
}
.screener-grid-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 12px;
    border-top: 1px solid var(--scr-border-soft);
    background: var(--scr-bg);
}

.screener-grid-status {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--scr-text-muted);
    pointer-events: none;
}

.screener-load-more {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #2e2e2e;                 /* TradingView filled action button */
    border: 1px solid #2e2e2e;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.screener-load-more:hover:not(:disabled) {
    background: #3d3d3d;
    border-color: #3d3d3d;
}
.screener-load-more:active:not(:disabled) {
    background: #4a4a4a;
    border-color: #4a4a4a;
}

.screener-load-more:disabled {
    opacity: 0.55;
    cursor: default;
}

/* ── AG Grid theme overrides (ag-grid v31 base CSS) ───────────────────
 * Tuned to match TradingView's screener: TV font stack, 13px cell text,
 * 12px sentence-case header, single 1px row divider, no vertical
 * column separators, hover swap to one-step-lighter panel. */
.unp-grid {
    --ag-background-color: transparent;
    --ag-foreground-color: var(--scr-text);
    --ag-header-background-color: var(--scr-bg);
    --ag-header-foreground-color: var(--scr-text-muted);
    --ag-border-color: var(--scr-border);
    --ag-row-border-color: var(--scr-border);
    --ag-row-hover-color: var(--scr-row-hover);
    --ag-selected-row-background-color: var(--scr-row-sel);
    --ag-cell-horizontal-padding: 12px;
    --ag-font-family: var(--scr-font);
    --ag-font-size: 13px;
    font-family: var(--scr-font);
    font-variant-numeric: tabular-nums;
}
.ag-root-wrapper { border: none !important; background: transparent !important; }
.ag-root,
.ag-header,
.ag-body-viewport,
.ag-center-cols-container,
.ag-pinned-left-cols-container,
.ag-pinned-left-header { background: transparent !important; }
.ag-header {
    border-bottom: 1px solid var(--scr-border) !important;
    font-family: var(--scr-font) !important;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
.ag-header-cell,
.ag-header-cell-label {
    font-family: var(--scr-font) !important;
    color: #9598A2;
    font-weight: 400;
}
.ag-header-cell {
    border-top: 1px solid var(--scr-border) !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
.unp-grid .ag-cell-label-container {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
/* Subtle always-visible vertical separator between header cells so the
   user can see where to click to drag-resize a column. Same muted color
   as our row borders — present but not loud. AG-Grid's native resize
   cursor still kicks in within ~7px of the right edge, so this is just
   a visual affordance hint, not a clickable bar. The last column's
   separator is suppressed via .ag-column-last to avoid a double line
   with the wrapper's right edge. */
.ag-header-cell::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 25% !important;
    right: 0 !important;
    width: 1px !important;
    height: 50% !important;
    background: var(--scr-border) !important;
    pointer-events: none;
}
.ag-header-cell.ag-column-last::after { display: none !important; }
.ag-header-cell-label { padding: 0; }
/* Explorer grid only: drop top/bottom/left header-cell padding but keep the
   RIGHT padding (AG's 12px horizontal). Scoped to #lbc-grid. */
#lbc-grid .ag-header-cell { padding: 0 12px 0 0 !important; }
/* ...except the leftmost (trader) header — restore a left pad equal to the
   body cells' effective left padding (12px var − 1px cell border = 11px) so the
   venue logo + "Trader" label line up exactly under the row names below. */
#lbc-grid .ag-header-cell.lbc-trader-logo { padding-left: 11px !important; }
/* Sortable headers default to a pointer (hand) cursor. Force the normal cursor
   everywhere on the cell — padding area and content alike — while keeping the
   column-resize cursor on the resize handle. */
#lbc-grid .ag-header-cell,
#lbc-grid .ag-header-cell * { cursor: default !important; }
#lbc-grid .ag-header-cell-resize,
#lbc-grid .ag-header-cell-resize * { cursor: ew-resize !important; }
.ag-header-cell.unp-header-sorted,
.ag-header-cell.unp-header-sorted * {
    color: var(--scr-text) !important;
}

/* Sort-direction arrow rendered to the immediate left of the column label.
   Source class (`unp-header-sorted-asc/desc`) is toggled by screener.js. */
.ag-header-cell.unp-header-sorted-asc .ag-header-cell-text::before,
.ag-header-cell.unp-header-sorted-desc .ag-header-cell-text::before {
    display: inline-block;
    margin-right: 6px;
    font-weight: 400;
    color: var(--scr-text);
}
.ag-header-cell.unp-header-sorted-asc .ag-header-cell-text::before  { content: '\2191'; } /* ↑ */
.ag-header-cell.unp-header-sorted-desc .ag-header-cell-text::before { content: '\2193'; } /* ↓ */

/* ── Numeric-column 3-dot filter menu — positioning + popup ───────────
 * AG Grid puts the menu icon adjacent to the column label by default,
 * which on right-aligned numeric headers pushes the dots to the LEFT
 * of the header cell. Force the menu button to the far-right edge
 * of every header cell that has one, regardless of column alignment.
 *
 * Visual: a low-opacity vertical-3-dot button that brightens on hover.
 */
.unp-grid .ag-header-cell-comp-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}
.unp-grid .ag-header-cell-menu-button,
.unp-grid .ag-header-icon.ag-header-cell-menu-button {
    position: absolute;
    left: 4px;
    top: 2px;
    transform: none;
    margin: 0;
    padding: 2px;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    z-index: 1;
    color: var(--scr-text);
    transition: opacity 80ms ease-out;
}
.unp-grid .ag-header-cell:hover .ag-header-cell-menu-button {
    opacity: 0.55;
    pointer-events: auto;
}
.unp-grid .ag-header-cell-menu-button:hover { opacity: 1 !important; }

/* Keep the normal mouse cursor on header cells. AG-Grid defaults the
 * label to cursor: pointer (to signal sortability) — override so the
 * cursor stays as the standard arrow over the label text and 3-dot
 * menu. The resize handle (.ag-header-cell-resize) is intentionally
 * excluded so its col-resize cursor still shows when hovering the
 * column's right edge. */
.unp-grid .ag-header-cell,
.unp-grid .ag-header-cell-label,
.unp-grid .ag-header-cell-text,
.unp-grid .ag-header-cell-menu-button,
.unp-grid .ag-header-cell-comp-wrapper,
.unp-grid .ag-cell-label-container {
    cursor: default !important;
}
.unp-grid .ag-header-cell-resize,
.unp-grid .ag-header-cell-resize * {
    cursor: col-resize !important;
}
/* Don't let the menu button overlap the column label — pad the label
 * cell so its left edge stops short of the dots. */
.unp-grid .ag-header-cell:has(.ag-header-cell-menu-button) .ag-header-cell-label {
    padding-left: 18px;
}

/* Solid filter popup. AG Grid's default popup background bleeds the
 * page through because the project doesn't ship the AG Grid theme CSS
 * (we use the no-style build to keep our own typography). Restore the
 * popup chrome explicitly: solid fill, border, shadow, padding. */
.ag-popup,
.ag-popup-child,
.ag-menu,
.ag-filter,
.ag-filter-wrapper,
.ag-filter-body-wrapper {
    background: #1a1a1a;
    color: var(--scr-text);
}
.ag-popup-child {
    border: 1px solid #2e2e2e;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    width: 200px;
    min-width: 0;
    max-width: 220px;
}
.ag-filter,
.ag-menu {
    padding: 8px;
    font-family: var(--scr-font);
    font-size: 13px;
}
.ag-filter-select,
.ag-filter-from,
.ag-filter-to,
.ag-input-field-input {
    background: #0f0f10 !important;
    color: var(--scr-text) !important;
    border: 1px solid #2e2e2e !important;
    border-radius: 6px !important;
    padding: 6px 8px !important;
    font-family: var(--scr-font);
    font-size: 13px;
}
/* The filter-mode picker is a native <select>. Strip macOS Chrome's
 * stacked-arrow chrome and substitute a clean chevron rendered as a
 * background SVG. */
.ag-filter-select {
    width: 100%;
    margin-bottom: 6px;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding-right: 26px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%239598A2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 11px 11px !important;
}
/* Native <option> elements inherit OS popup chrome — Chrome on macOS
 * paints the panel with a translucent system surface that bleeds the
 * page through. Force a solid dark fill so it matches the rest of the
 * filter popup. */
.ag-filter-select option {
    background-color: #1c1c1e !important;
    color: var(--scr-text) !important;
}
/* AG Grid v31's `.ag-select` (used for some filter pickers) — fully
 * custom dropdown panel rendered inside `.ag-popup`. Make the opened
 * list solid so it matches the closed-state styling above. */
.ag-popup .ag-list,
.ag-popup .ag-select-list,
.ag-popup .ag-rich-select-list {
    background: #1c1c1e !important;
    border: 1px solid #2e2e2e !important;
    border-radius: 6px !important;
    overflow: hidden;
}
.ag-popup .ag-list-item {
    padding: 6px 10px !important;
    color: var(--scr-text) !important;
    background: transparent !important;
    cursor: pointer;
    font-size: 13px;
}
.ag-popup .ag-list-item:hover,
.ag-popup .ag-list-item.ag-active-item {
    background: #2962ff !important;
    color: #fff !important;
}
.ag-picker-field-icon .ag-icon,
.ag-picker-field-icon::before {
    color: #9598A2 !important;
}
.ag-filter-body input { width: 100%; box-sizing: border-box; }
.ag-filter-condition,
.ag-filter-body { padding: 4px 4px 6px; }
.ag-filter-apply-panel {
    display: flex;
    gap: 6px;
    padding: 6px 4px 2px;
    border-top: 1px solid #2e2e2e;
    margin-top: 6px;
}
.ag-filter-apply-panel-button {
    /* Match the screener-pill look (Markets/Events buttons): transparent
     * surface with a 1px #2e2e2e border, hover lifts to #2e2e2e. No blue
     * accent — that was off-brand. */
    background: transparent;
    color: var(--scr-text);
    border: 1px solid #2e2e2e;
    border-radius: 6px;
    padding: 5px 10px;
    font-family: var(--scr-font);
    font-size: 12px;
    cursor: default;
    transition: background-color 0.12s;
}
.ag-filter-apply-panel-button:hover {
    background: #2e2e2e;
    color: var(--scr-text);
}
/* Active-filter highlight on the column header — AG Grid adds the
 * `.ag-header-cell-filtered` class when a filter is set. Brighten the
 * 3-dot menu (white, not blue) so it's obvious the column has an
 * active filter. The funnel icon AG Grid renders next to the label
 * when filtered is hidden — the 3-dot button already covers filter
 * access and the funnel is visual noise. */
.unp-grid .ag-header-cell.ag-header-cell-filtered .ag-header-cell-menu-button {
    opacity: 1 !important;
    pointer-events: auto !important;
    color: var(--scr-text);
}
.unp-grid .ag-header-cell .ag-icon-filter,
.unp-grid .ag-header-cell-filtered .ag-icon-filter {
    display: none !important;
}

/* AG Grid v31 renders a separate filter quick-access button
 * (`.ag-header-cell-filter-button`) next to the menu button whenever a
 * column has `filter` set — `suppressHeaderFilterButton: true` only
 * works per-column, not via defaultColDef, and it leaks through anyway
 * for some configurations. The 3-dot menu (kept) already opens the
 * filter, so this duplicate button is pure noise. Hide it and any
 * floating-filter equivalent. */
.unp-grid .ag-header-cell-filter-button,
.unp-grid .ag-floating-filter-button {
    display: none !important;
}

/* Header tooltip — proper styled box, not raw text floating on the grid.
 * The default AG-Grid tooltip ships without a usable background in this
 * theme so it visually merges into row data behind it. Give it the same
 * dark surface as the toolbar pills, a thin border, comfortable padding,
 * and a high enough z-index to clear the grid body. The transition kill
 * is paired with `tooltipHideDelay: 1` so it disappears the instant the
 * cursor leaves the cell. */
.ag-tooltip {
    /* AG-Grid's own .ag-tooltip rule sets background/border via CSS vars
     * that only resolve when an ag-theme stylesheet is loaded. We ship
     * ag-grid.min.css without a theme, so the vars stay undefined and the
     * tooltip renders as bare text. AG-Grid's rule is loaded AFTER
     * terminal.css, so !important is needed on the properties it sets.
     *
     * position: fixed (not absolute) so the JS positioner's
     * top/left values, which come from getBoundingClientRect(),
     * are viewport-relative — the tooltip's popup wrapper has its
     * own positioning that would otherwise offset us. */
    position: fixed !important;
    background-color: #2e2e2e !important;
    border: 1px solid #2e2e2e !important;
    border-radius: 6px !important;
    color: var(--scr-text) !important;
    font-family: var(--scr-font);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    padding: 6px 10px !important;
    width: max-content;
    max-width: 260px;
    white-space: normal;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    z-index: 100;
    /* AG-Grid positions tooltips at the cursor's offset by default, which
     * puts them BELOW the header overlapping data rows. Translate the
     * tooltip up by its full height + a 14px gap, and shift left by 50%
     * so the tip arrow centers under the cursor. End result: tooltip
     * floats above the header cell, TradingView-style. */
    transform: translate(-50%, calc(-100% - 14px));
    transition: none !important;
    animation: none !important;
}
/* Downward-pointing arrow at the bottom of the tooltip, centered horizontally.
 * Triangle is drawn with borders; color matches the tooltip background. */
.ag-tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #2e2e2e;
}

/* Suppress AG-Grid's built-in sort indicator (stacked-bars / arrow icons).
   The active sort is conveyed via the brighter header text instead. */
.ag-sort-indicator-container,
.ag-sort-ascending-icon,
.ag-sort-descending-icon,
.ag-sort-none-icon,
.ag-sort-mixed-icon,
.ag-sort-order {
    display: none !important;
}
.ag-sort-indicator-icon { color: var(--scr-accent); }

/* Group-header band for "Δ Price" / "$ Volume" column clusters */
.ag-header-group-cell {
    border-bottom: 1px solid var(--scr-border) !important;
    background: var(--scr-bg);
    font-family: var(--scr-font) !important;
}
.ag-header-group-cell.unp-group-header,
.ag-header-group-cell .ag-header-group-cell-label {
    font-family: var(--scr-font) !important;
    color: var(--scr-text-muted);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    font-size: 12px;
}
.ag-header-group-cell::after,
.ag-header-group-cell-no-group::after { display: none !important; }

/* Empty-named groups exist only to force ungrouped columns into the same
   2-row header layout as "Δ Price" / "$ Volume", so the inner labels line up.
   Render them invisible — no label, no bottom rule — so the strip reads as
   a single group band above the grouped clusters only. */
.ag-header-group-cell.unp-group-header-empty {
    background: transparent;
    border-bottom-color: transparent !important;
}
.ag-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    font-size: 14px;
    font-weight: 200;
    color: var(--scr-text);
    border-right: none !important;
    border-left: none !important;
    line-height: 1.4;
    text-align: center;
}

/* The renderers emit their own width:100% / text-align:right layout — neutralise
   it so the parent's center alignment wins. Each renderer's children are
   pushed to `justify-content: center` so the inner flex rows (dot + label,
   bar + number) also sit in the middle. */
.unp-grid .unp-cell-prob,
.unp-grid .unp-cell-spread,
.unp-grid .unp-cell-move,
.unp-grid .unp-cell-money,
.unp-grid .unp-cell-placeholder,
.unp-grid .unp-cell-liq,
.unp-grid .unp-cell-mkts,
.unp-grid .unp-cell-tl,
.unp-grid .unp-cell-pillcell,
.unp-grid .unp-cell-signals {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
}
.unp-grid .unp-cell-prob-num { text-align: center; }

/* Inside right-aligned cells (anything with `type: 'numericColumn'`),
 * the cell-renderer's own inner <div> needs to flip from center to
 * right too — otherwise the .ag-cell wrapper right-aligns but the
 * inner div centers the text, so the value still floats in the middle.
 * Targets every renderer that participates in numeric columns. */
.unp-grid .ag-cell.ag-right-aligned-cell .unp-cell-money,
.unp-grid .ag-cell.ag-right-aligned-cell .unp-cell-placeholder,
.unp-grid .ag-cell.ag-right-aligned-cell .unp-cell-liq,
.unp-grid .ag-cell.ag-right-aligned-cell .unp-cell-mkts,
.unp-grid .ag-cell.ag-right-aligned-cell .unp-cell-tl,
.unp-grid .ag-cell.ag-right-aligned-cell .unp-cell-spread,
.unp-grid .ag-cell.ag-right-aligned-cell .unp-cell-move,
.unp-grid .ag-cell.ag-right-aligned-cell .unp-cell-prob {
    justify-content: flex-end;
    text-align: right;
}

/* Numeric columns (AG Grid auto-applies `.ag-right-aligned-cell` to any
   col with type: 'numericColumn'): right-align so $/¢/% values stack
   cleanly under each other and align to the column's right edge. */
.unp-grid .ag-cell.ag-right-aligned-cell {
    justify-content: flex-end;
    text-align: right;
}

/* Market column (and any other navigable cell) is the exception: left-align
   so the title sits flush against the pinned border. */
.unp-grid .ag-cell.unp-cell-navigable {
    justify-content: flex-start;
    text-align: left;
}

/* Headers mirror the cell alignment: numeric headers right, Market left,
 * other unmarked columns stay centered (e.g. Outcome / Category text
 * columns where right-align would look weird). */
.unp-grid .ag-header-cell .ag-header-cell-label {
    justify-content: center;
}
.unp-grid .ag-header-cell.ag-right-aligned-header .ag-header-cell-label {
    /* AG-Grid puts `flex-direction: row-reverse` on right-aligned header
     * labels (so the sort indicator sits left of the text). Under
     * row-reverse, flex-start is the VISUAL right edge — use that to
     * push the text to the right side of the cell. flex-end would land
     * the text on the visual left, right up against the 3-dot menu. */
    justify-content: flex-start;
}
.unp-grid .ag-header-cell.unp-header-market .ag-header-cell-label {
    justify-content: flex-start;
    /* Match the cell renderer's padding-left so the header text lines up
       with the row icons directly below it. */
    padding-left: 10px;
}
/* Text-column headers that should sit flush-left like Market (e.g.
 * Outcome, Category). Default `.ag-header-cell-label` is `justify-
 * content: center` per the rule above; this override puts the label
 * on the left edge so the column header matches its left-aligned
 * body cells (added via cellClass below). */
.unp-grid .ag-header-cell.unp-header-left .ag-header-cell-label {
    justify-content: flex-start;
}
/* Body cells for text columns — left-align so the text reads naturally
 * under the matching left-aligned header (instead of centering inside
 * a wide cell, which made shorter values like "Sports" or "Yes" float
 * mid-cell on the screener). */
.unp-grid .ag-cell.unp-cell-outcome,
.unp-grid .ag-cell.unp-cell-category {
    justify-content: flex-start;
    text-align: left;
}
.ag-row {
    border-bottom: 1px solid var(--scr-border-soft) !important;
}
.ag-row-hover { background-color: var(--scr-row-hover) !important; }
/* Selected rows just darken with the same hover tone — no blue tint,
 * no left-edge accent bar. */
.ag-row-selected {
    background-color: var(--scr-row-hover) !important;
    box-shadow: none !important;
}
/* Vertical divider between the pinned Market column and the scrollable
 * column area only appears once the user has scrolled the body
 * horizontally. Implemented as an overlay pseudo-element so the line
 * doesn't reserve any horizontal layout space — putting a (transparent)
 * border on the container itself created a visible gap when the row
 * background was highlighted, since the body bg showed through. The
 * is-h-scrolled class is toggled by onBodyScroll in screener.js. */
.ag-pinned-left-header,
.ag-pinned-left-cols-container { border-right: none !important; position: relative; }
/* Body cells container — paint the divider on the full vertical span. */
.ag-pinned-left-cols-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: rgba(220, 224, 232, 0.10);
    pointer-events: none;
}
/* Header — the pinned-left-header element wraps BOTH the empty group-header
   row (24px) AND the column-name row (48px). Anchor the divider to the
   bottom 48px so it only paints alongside the visible column labels and
   doesn't extend up into the empty group-row band above. */
.ag-pinned-left-header { position: relative; }
.ag-pinned-left-header::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    height: 48px;
    width: 1px;
    background: rgba(220, 224, 232, 0.10);
    pointer-events: none;
}
.ag-overlay-loading-center,
.ag-overlay-no-rows-center {
    color: var(--scr-text-muted);
    font-size: 12px;
    background: transparent;
    border: none;
}
.unp-grid-overlay {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--scr-text-muted);
    font-size: 12px;
    letter-spacing: 0.02em;
}

/* AG-Grid v31's `api.hideOverlay()` doesn't reliably tear down the loading
   overlay once rowData is set — it lingers visibly on top of rendered rows.
   Defense in depth: as soon as the grid has at least one rendered row,
   hide any loading overlay regardless of AG-Grid's overlay state. */
.unp-grid:has(.ag-row[row-id]) .ag-overlay-loading-wrapper {
    display: none !important;
}
/* Trades grid (auto-height): while loading/empty the grid body is collapsed,
   so AG-Grid's vertically-centered overlay lands crowding the header. Pin the
   "Loading trades…" / "No trades to show." overlay to the top of the body and
   nudge it down ~¼ row so it reads as the FIRST ROW of the table rather than
   overlapping the header. Scoped to #up-trades-grid (headerHeight 48 /
   rowHeight 40); other .unp-grid instances keep the centered overlay. */
#up-trades-grid .ag-overlay-wrapper {
    align-items: flex-start;
    padding-top: 11px;
}
.unp-grid-overlay-spinner {
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--scr-border);
    border-top-color: var(--scr-text-muted);
    border-radius: 50%;
    animation: unp-grid-spin 700ms linear infinite;
}
@keyframes unp-grid-spin {
    to { transform: rotate(360deg); }
}
/* Explorer (category pivot) boot loading — shown in the grid container before
   AG Grid is created, so the area reads "Loading traders…" instead of black. */
.lbc-grid-loading {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 420px; color: var(--scr-text-muted);
    font-family: var(--scr-font); font-size: 13px; letter-spacing: .02em;
}
.ag-body-horizontal-scroll-viewport::-webkit-scrollbar,
.ag-body-viewport::-webkit-scrollbar { height: 8px; width: 8px; }
.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb,
.ag-body-viewport::-webkit-scrollbar-thumb {
    background: var(--scr-border);
    border-radius: 4px;
}
.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track,
.ag-body-viewport::-webkit-scrollbar-track { background: transparent; }

/* ── Custom cell renderers ─────────────────────────────────────────── */
.unp-cell-market {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.25;
    min-width: 0;
    /* Stretch to fill the AG-Grid cell so padding-right actually shows up
       as a gap before the next column (otherwise the div shrinks to fit
       its icon+text and the right padding has no visible effect). */
    width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 12px;
}
/* Normalize text size + weight across every column so they read at the
 * same baseline as the Market title. These classes live on inner divs
 * created by cell renderers, so `font-size: inherit` correctly picks up
 * the 15px from the .ag-cell parent. */
.unp-cell-market-title,
.unp-cell-market-sub,
.unp-cell-mkts,
.unp-cell-prob,
.unp-cell-prob-num,
.unp-cell-spread,
.unp-cell-move,
.unp-cell-money,
.unp-cell-placeholder,
.unp-cell-liq,
.unp-cell-tl {
    font-size: inherit;
    font-weight: 200;
    letter-spacing: 0;
}

/* Category is a `cellClass` — it lands directly on the .ag-cell, so we
 * must NOT set `font-size: inherit` (would inherit from the outer grid
 * wrapper at 13px and shrink the column). Let .ag-cell's 15px win
 * naturally and just override color + weight. */
.unp-cell-category {
    color: var(--scr-text);
    font-weight: 200;
    letter-spacing: 0;
}

/* Series-logo + Kalshi deep-link in the Market cell. The wrapper is a fixed
 * 22px square with a Kalshi-green "K" letterbox baked in behind any <img>.
 * If the CDN logo loads (or its fallback does), it covers the K; if both
 * 502, _upOnIconErr removes the <img> and the K shows through. Click opens
 * the market on Kalshi in a new tab; row click still navigates to detail. */
.unp-cell-market-icon {
    position: relative;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
a.unp-cell-market-icon { cursor: pointer; }
/* Hover affordance — semi-transparent dark overlay that signals the icon
 * is clickable. Only applied to the verified <a> variant; unverified
 * spans aren't clickable so they don't get one. The icon wrapper already
 * has `overflow: hidden` + `border-radius`, so the overlay clips
 * cleanly to the same rounded square. */
a.unp-cell-market-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.12s;
    pointer-events: none;
}
a.unp-cell-market-icon:hover::after { background: rgba(0, 0, 0, 0.3); }
/* Unverified series — the Kalshi click-through is suppressed because we
 * don't have a confirmed slug in the SERIES_SLUG map. Mute the logo and
 * stamp an amber "?" badge in the corner so it's easy to spot from the
 * grid which series still need adding to the mapping. The wrapper allows
 * the badge to overflow its 22px square. */
.unp-cell-market-icon.is-unverified {
    cursor: default;
    overflow: visible;
}
.unp-cell-market-icon.is-unverified .unp-cell-market-icon-img,
.unp-cell-market-icon.is-unverified .unp-cell-market-icon-k {
    opacity: 0.55;
    filter: grayscale(0.5);
}
.unp-cell-market-icon-flag {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 12px;
    height: 12px;
    padding: 0 2px;
    border-radius: 999px;
    background: #f4b740;
    color: #1a1306;
    font-family: var(--font-ui), 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: 9px;
    line-height: 12px;
    text-align: center;
    box-shadow: 0 0 0 1.5px var(--scr-bg, #0f0f10);
    pointer-events: none;
}
.unp-cell-market-icon-k {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #28cc95;
    color: #06120c;
    font-family: var(--font-ui), 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
}
.unp-cell-market-icon-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
}
.unp-cell-market-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    flex: 1;
    margin-left: 6px;
}

/* Expand caret — small chevron next to event titles that drills the
 * row open into its children. Reserved-width spacer keeps child-row
 * titles aligned with parents that have no caret. */
.unp-cell-caret {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--scr-text-muted);
    cursor: pointer;
    padding: 0;
    border-radius: 2px;
    transition: transform 120ms ease, color 120ms ease, background 120ms ease;
    transform: rotate(-90deg);
}
.unp-cell-caret:hover {
    color: var(--scr-text);
    background: rgba(255,255,255,0.06);
}
.unp-cell-caret.is-open { transform: rotate(0deg); color: var(--scr-text); }
.unp-cell-caret.is-spacer { background: transparent; cursor: default; }
.unp-cell-caret.is-spacer:hover { background: transparent; }

/* Child contract rows — slight indent + muted background so they read
 * as nested under their parent event row. */
.unp-cell-market.is-child-row { padding-left: 16px; }
.unp-cell-market.is-child-row .unp-cell-market-title {
    color: var(--scr-text-dim);
    font-weight: 200;
}
/* Child rows: neutral gray, lighter than the parent-row background, so
 * expanded rows clearly visually nest. The previous --scr-surface tone
 * had a slight blue tint; explicit hex keeps it pure gray. Cell opacity
 * is dialled up so the dim cast doesn't read as washed-out. */
.ag-row.unp-row-child { background: #1c1c1d; }
.ag-row.unp-row-child:hover { background: #26262a; }
.ag-row.unp-row-child .ag-cell { opacity: 0.85; }
.ag-row.unp-row-child:hover .ag-cell { opacity: 1; }

/* Expanded-event rows just get a slightly raised background; the row
 * is still clickable to toggle expand, but the cursor stays as the
 * default arrow — only true links (market title text, exchange icon)
 * present a hand cursor. */
.ag-row.unp-row-expandable.is-expanded { background: var(--scr-surface); }

/* Market column. The cell isn't itself a pointer — only the title
 * text is. Clicking the title navigates; clicking surrounding empty
 * area toggles expand without any cursor cue. */
.unp-cell-market-title { cursor: pointer; }
.unp-cell-navigable:hover .unp-cell-market-title { text-decoration: underline; }
.unp-cell-market-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
/* LIVE chip — small red pill inline with the title, signals an event
 * that's already tipped off (event_start <= now). Mirrors the homepage
 * "Most Traded" / "Recent Sweeps" cards. Compact so it never crowds
 * the title text. */
.unp-cell-live-chip {
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
    padding: 1px 5px;
    border-radius: 3px;
    align-self: center;
    line-height: 1.4;
}
.unp-cell-market-title {
    color: var(--scr-text);
    font-size: inherit;
    font-weight: 200;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}
.unp-cell-market-count {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--scr-text-muted);
    flex-shrink: 0;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--scr-surface-2);
}
.unp-cell-market-sub {
    font-size: 13px;
    color: var(--scr-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unp-cell-prob {
    display: flex;
    align-items: center;
    width: 100%;
    font-variant-numeric: tabular-nums;
}
.unp-cell-prob-num {
    font-size: inherit;
    color: var(--scr-text);
}

.unp-cell-spread {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    width: 100%;
    font-variant-numeric: tabular-nums;
    font-size: inherit;
    color: var(--scr-text);
}
.unp-cell-spread-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--scr-text-muted);
}
.unp-cell-spread.is-tight .unp-cell-spread-dot { background: var(--scr-up); }
.unp-cell-spread.is-mid   .unp-cell-spread-dot { background: var(--scr-warn); }
.unp-cell-spread.is-wide  .unp-cell-spread-dot { background: var(--scr-down); }

.unp-cell-move {
    width: 100%;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: inherit;
    letter-spacing: 0.01em;
    color: var(--scr-text-muted);
}
.unp-cell-move.is-flat  { color: var(--scr-text-muted); }
.unp-cell-move.is-muted { color: var(--scr-text-muted); }

/* Delta pill — solid green / red capsule. Text inherits the cell's
   font (var(--scr-font), the grid's normal size + weight) so the
   pill reads as a colored backdrop for the same number style every
   other column in the row uses — only the chrome is different.
   Sits inside .unp-cell-move so right-align still pins the pill to
   the right edge of the column. */
.unp-move-pill {
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-variant-numeric: tabular-nums;
    color: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1.3;
}
.unp-move-pill.is-up   { background: #16a34a; }
.unp-move-pill.is-down { background: #ef4444; }
.unp-move-pill-arrow {
    font-size: 0.85em;
    /* Slight optical bump up so the smaller glyph's baseline still
       reads centered against the larger digits next to it. */
    position: relative;
    top: -0.5px;
}

.unp-cell-money {
    width: 100%;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: inherit;
    color: var(--scr-text);
}
.unp-cell-money.is-muted { color: var(--scr-text-muted); }

.unp-cell-placeholder {
    width: 100%;
    text-align: right;
    color: var(--scr-text-muted);
    font-size: inherit;
    cursor: default;
    letter-spacing: 0.03em;
}

.unp-cell-liq {
    width: 100%;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: inherit;
    color: var(--scr-text);
}
.unp-cell-liq.is-muted { color: var(--scr-text-muted); }

.unp-cell-mkts {
    width: 100%;
    font-variant-numeric: tabular-nums;
    font-size: inherit;
    color: var(--scr-text);
}
.unp-cell-mkts.is-muted { color: var(--scr-text-muted); }

.unp-cell-tl {
    width: 100%;
    font-variant-numeric: tabular-nums;
    font-size: inherit;
    color: var(--scr-text);
}
.unp-cell-tl.is-urgent { color: var(--scr-warn); }
.unp-cell-tl.is-muted  { color: var(--scr-text-muted); }

.unp-cell-pillcell {
    display: flex;
    align-items: center;
    line-height: 1;
}
.unp-cell-pillcell.is-muted {
    color: var(--scr-text-muted);
    font-size: inherit;
}
.unp-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    color: var(--scr-text-dim);
    background: var(--scr-surface-2);
    border: 1px solid var(--scr-border);
    white-space: nowrap;
}
.unp-pill-exchange { color: #93c5fd; background: rgba(96, 165, 250, 0.08); border-color: rgba(96, 165, 250, 0.18); }
.unp-pill-link {
    cursor: pointer;
    text-decoration: none;
    transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.unp-pill-link:hover {
    color: #bfdbfe;
    background: rgba(96, 165, 250, 0.16);
    border-color: rgba(96, 165, 250, 0.4);
}
/* Category pills: scaled up vs other pills and given a min-width so
 * "Sports" doesn't render visibly smaller than "Entertainment" — the
 * uniform width makes the column scannable at a glance. Centered text
 * keeps the label balanced inside the wider pill. */
.unp-pill-category {
    text-transform: capitalize;
    font-size: 11px;
    padding: 4px 10px;
    min-width: 150px;
    text-align: center;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Per-category accent colors. Each pill keeps the same shape and size
 * as the neutral .unp-pill but switches text/border/background to a
 * category-specific hue so users can scan the grid for categories
 * they care about. Unknown categories fall through to the neutral
 * style. Aliases (mentions/world/world-affairs, financials/finance)
 * map to the same hue so spelling drift between Kalshi feeds doesn't
 * fragment the palette. */
.unp-pill-cat-sports        { color: #6ee7b7; background: rgba(110, 231, 183, 0.10); border-color: rgba(110, 231, 183, 0.30); }
.unp-pill-cat-politics      { color: #fda4af; background: rgba(253, 164, 175, 0.10); border-color: rgba(253, 164, 175, 0.30); }
.unp-pill-cat-elections     { color: #fb923c; background: rgba(251, 146, 60, 0.10); border-color: rgba(251, 146, 60, 0.30); }
.unp-pill-cat-economics     { color: #fcd34d; background: rgba(252, 211, 77, 0.10); border-color: rgba(252, 211, 77, 0.30); }
.unp-pill-cat-financials,
.unp-pill-cat-finance       { color: #67e8f9; background: rgba(103, 232, 249, 0.10); border-color: rgba(103, 232, 249, 0.30); }
.unp-pill-cat-crypto        { color: #fdba74; background: rgba(253, 186, 116, 0.10); border-color: rgba(253, 186, 116, 0.30); }
.unp-pill-cat-entertainment { color: #c4b5fd; background: rgba(196, 181, 253, 0.10); border-color: rgba(196, 181, 253, 0.30); }
.unp-pill-cat-mentions      { color: #f0abfc; background: rgba(240, 171, 252, 0.10); border-color: rgba(240, 171, 252, 0.30); }
.unp-pill-cat-climate,
.unp-pill-cat-weather       { color: #7dd3fc; background: rgba(125, 211, 252, 0.10); border-color: rgba(125, 211, 252, 0.30); }
.unp-pill-cat-companies     { color: #93c5fd; background: rgba(147, 197, 253, 0.10); border-color: rgba(147, 197, 253, 0.30); }
.unp-pill-cat-tech,
.unp-pill-cat-technology    { color: #a5b4fc; background: rgba(165, 180, 252, 0.10); border-color: rgba(165, 180, 252, 0.30); }
.unp-pill-cat-health        { color: #fcd5ce; background: rgba(252, 213, 206, 0.10); border-color: rgba(252, 213, 206, 0.30); }
.unp-pill-cat-science       { color: #5eead4; background: rgba(94, 234, 212, 0.10); border-color: rgba(94, 234, 212, 0.30); }
.unp-pill-cat-culture       { color: #d8b4fe; background: rgba(216, 180, 254, 0.10); border-color: rgba(216, 180, 254, 0.30); }
.unp-pill-cat-world,
.unp-pill-cat-world-affairs { color: #fde68a; background: rgba(253, 230, 138, 0.10); border-color: rgba(253, 230, 138, 0.30); }

/* Exchange cell — icon badge replaces the "KALSHI" text pill */
.unp-cell-exchange {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 1;
}
.unp-exchange-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 5px;
    overflow: hidden;
    background: var(--scr-surface-2);
    border: 1px solid var(--scr-border);
    color: var(--scr-text-dim);
    text-decoration: none;
}
.unp-exchange-link { cursor: pointer; }
.unp-exchange-icon {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
}
.unp-exchange-fallback {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    color: var(--scr-text);
    letter-spacing: 0;
}

.unp-cell-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    padding: 4px 0;
    line-height: 1.2;
}
.sig-chip {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid currentColor;
    white-space: nowrap;
}
.sig-warn  { color: var(--scr-warn);  background: var(--scr-warn-dim);  border-color: rgba(234, 179, 8, 0.25); }
.sig-alert { color: var(--scr-alert); background: var(--scr-alert-dim); border-color: rgba(248, 113, 113, 0.25); }
.sig-info  { color: var(--scr-info);  background: var(--scr-info-dim);  border-color: rgba(96, 165, 250, 0.25); }
.sig-none  { color: var(--scr-text-muted); font-size: 11px; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .screener-toolbar { flex-wrap: wrap; height: auto; padding: 8px; gap: 8px; }
    .screener-input { width: 100%; }
}

/* ============================
   WORKSPACE LAYOUT (Market Detail — dark)
   ============================ */
.workspace {
    display: flex;
    height: calc(100vh - 64px);
    overflow: hidden;
    background: var(--dark-bg);
    color: var(--dark-text);
}

/* --- Left Sidebar (dark) --- */
.sidebar-left {
    width: 260px;
    min-width: 260px;
    background: var(--dark-bg);
    border-right: 1px solid var(--dark-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-section {
    border-bottom: 1px solid var(--dark-border);
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    font-size: 10px;
    font-weight: 600;
    color: var(--dark-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-header-action {
    font-size: 10px;
    color: var(--dark-text-muted);
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--font-ui);
}

.sidebar-header-action:hover { color: var(--accent-gold); }

/* Market list in sidebar (dark) */
.market-list {
    overflow-y: auto;
    flex: 1;
}

.market-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.08s;
    border-bottom: 1px solid rgba(42, 46, 57, 0.5);
    font-size: 11px;
}

.market-row:hover { background: var(--dark-hover); }
.market-row.selected { background: var(--dark-surface); border-left: 2px solid var(--accent-gold); }

.market-row-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dark-text);
    font-weight: 500;
    margin-right: 8px;
}

.market-row-prob {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-gold);
    min-width: 38px;
    text-align: right;
}

.market-row-change {
    font-family: var(--font-mono);
    font-size: 10px;
    min-width: 40px;
    text-align: right;
}

/* Sidebar filters (dark) */
.sidebar-filters {
    padding: 8px 12px;
}

.sidebar-filter-row {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

/* Filter chips — dark context (workspace sidebar) */
.filter-chip {
    font-size: 10px;
    padding: 3px 8px;
    border: 1px solid var(--dark-border);
    border-radius: 2px;
    background: transparent;
    color: var(--dark-text-muted);
    cursor: pointer;
    font-family: var(--font-ui);
    transition: all 0.1s;
}

.filter-chip:hover { background: #2e2e2e; border-color: #2e2e2e; color: var(--dark-text-secondary); }
.filter-chip.active { background: #2e2e2e; border-color: #2e2e2e; color: #fff; }

.sidebar-search {
    width: 100%;
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: 2px;
    color: var(--dark-text);
    font-family: var(--font-ui);
    font-size: 11px;
    padding: 5px 8px;
    outline: none;
    margin-bottom: 4px;
}

.sidebar-search:focus { border-color: var(--accent-blue); }
.sidebar-search::placeholder { color: var(--dark-text-muted); }

/* --- Center Panel (dark workspace) --- */
.center-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background: var(--dark-bg);
}

/* Contract selector tabs */
.contract-tabs {
    display: flex;
    justify-content: flex-start;
    gap: 6px;
    padding: 0;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.contract-tab {
    background: none;
    border: 1px solid #2a2a2a;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #9ca3af;
    padding: 5px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.contract-tab:hover {
    color: #d1d5db;
    border-color: #555;
}

.contract-tab.active {
    color: #3B82F6;
    border-color: #3B82F6;
    background: rgba(59, 130, 246, 0.08);
}

.contract-tab .contract-prob {
    margin-left: 6px;
    font-size: 11px;
    color: #6b7280;
}

.contract-tab.active .contract-prob {
    color: #60a5fa;
}

.center-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--dark-bg);
    border-bottom: 1px solid var(--dark-border);
    flex-shrink: 0;
}

.center-title-block {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.center-market-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--dark-text);
}

.center-market-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--dark-text-muted);
}

.center-market-prob {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-gold);
}

.center-market-change {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
}

.platform-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 2px;
    font-weight: 600;
    background: var(--dark-surface);
    color: var(--dark-text-secondary);
}

.center-stats {
    display: flex;
    gap: 18px;
    font-size: 11px;
}

.center-stat {
    display: flex;
    gap: 4px;
    align-items: baseline;
}

.center-stat-label {
    color: var(--dark-text-muted);
}

.center-stat-value {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--dark-text);
}

/* Chart area (dark) */
.chart-area {
    flex: 1;
    position: relative;
    min-height: 200px;
    background: var(--dark-bg);
    border-bottom: 1px solid var(--dark-border);
}

.chart-area-compact {
    flex: none;
    min-height: 180px;
    max-height: 220px;
}

/* ══════════════════════════════════════
   Market Detail — TradingView-inspired
   ══════════════════════════════════════ */

/* ══ Page-level layout ══ */

.has-sidebar {
    overflow-x: hidden;
    /* Title bar height — holds a slim breadcrumb row + the contract bar. */
    --titlebar-h: 112px;
    /* Topbar height — kept in sync with .topbar height (64px). */
    --topbar-h: 64px;
}

/* Full-width title bar — pinned below the topbar, spans the full viewport,
   sits above the left rail / main / right rail columns. Two stacked rows:
   breadcrumb / meta on top, then the chart contract bar. */
.mkt-titlebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    height: var(--titlebar-h);
    background: var(--dark-bg);
    border-top: 1px solid #1a1a1a;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 8px 32px;
    z-index: 95;
    /* Visible so the contract dropdown can overlap the chart below. */
    overflow: visible;
}

.mkt-titlebar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-width: 0;
}

.mkt-titlebar .chart-contract-bar-wrap {
    margin: 0;
}

.mkt-titlebar-text {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
/* Series logo at the left of the title bar — sized to match the breadcrumb
 * height. Hidden until the first paint sets a src. */
.mkt-titlebar-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    background: #1f1f23;
}
.mkt-titlebar-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #f3f4f6;
    letter-spacing: -0.01em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Legacy alias — older template variants used .mkt-titlebar-breadcrumb;
 * keep the rule so any stragglers still render. */
.mkt-titlebar-breadcrumb {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #e5e7eb;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkt-titlebar-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.mkt-titlebar-volume {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: #b0b3ba;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Stats strip in the market-detail titlebar ──────────────────────────
 * Inspired by Fireplace / TradingView: YES + NO price pills on the left,
 * a row of compact (label / value) stat blocks in the middle. Sits
 * inline with the breadcrumb so a single horizontal bar carries
 * everything a trader glances at on landing. */
.mkt-stats-prices {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 24px;
}
/* Solid green/red fill, white text — same palette as the homepage
 * Most-Traded card's `.mt-row-pct` chip, but rounded as full capsules
 * here for a price-tag feel. Width is locked via `min-width` on the
 * value span so the chip doesn't twitch as digits change (e.g. 47¢
 * → 5¢ → 100¢). */
.mkt-price-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 9px 14px;
    border-radius: 999px;
    font-family: 'Inter', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    color: #f3f4f6;
}
.mkt-price-chip.is-yes { background: #16a34a; }
.mkt-price-chip.is-no  { background: #ef4444; }
.mkt-price-side,
.mkt-price-val {
    /* Same size + weight for "YES"/"NO" and the price, per design — visual
     * pair reads as one balanced token rather than label + value. */
    font-size: 15px;
    font-weight: 700;
    color: #f3f4f6;
    line-height: 1;
}
.mkt-price-side {
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.mkt-price-val {
    font-variant-numeric: tabular-nums;
    /* Tabular nums + fixed min-width: widest possible string is '100¢'
     * (4 chars). Reserves the slot so the chip stays at constant width
     * across '5.0¢' / '47¢' / '100¢' / etc. */
    display: inline-block;
    min-width: 4ch;
    text-align: right;
}

/* Stats grid — compact two-line blocks (label / value). Auto-flows
 * to the right; collapses gracefully on narrower viewports. */
.mkt-stats-grid {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: 24px;
    flex-shrink: 0;
    overflow: hidden;
}
.mkt-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
    min-width: 0;
}
.mkt-stat-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #787b86;
    white-space: nowrap;
}
.mkt-stat-val {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #f5f7fa;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.mkt-stat-val.is-up   { color: #16a34a; }
.mkt-stat-val.is-down { color: #ef4444; }
.mkt-stat-val.is-muted { color: #5a5e6b; }

/* Pill rendering for the Δ 24h value — mirrors the homepage's
 * `.mt-row-pct` chip on Most-Traded rows: solid green/red bg, white
 * text, tight padding, 4px radius. Layered with .is-up / .is-down to
 * pick the color. .is-muted (no movement) skips the pill and stays
 * as plain muted text. */
.mkt-stat-val.is-pill {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #f3f4f6;
    line-height: 1.3;
}
.mkt-stat-val.is-pill.is-up   { background: #16a34a; color: #f3f4f6; }
.mkt-stat-val.is-pill.is-down { background: #ef4444; color: #f3f4f6; }

@media (max-width: 1400px) {
    /* Stats order (after dropping Δ 24h): 1=24h Vol, 2=Total Vol,
     * 3=Spread, 4=Resolves. Drop the lowest-priority cells first at
     * tighter widths; 24h Vol stays in all viewports. */
    .mkt-stat:nth-of-type(4),
    .mkt-stat:nth-of-type(3) { display: none; }
}
@media (max-width: 1200px) {
    .mkt-stat:nth-of-type(2) { display: none; }
    .mkt-stats-grid { gap: 16px; }
    .mkt-stats-prices { margin-left: 16px; }
}

/* Push the workspace contents down past the fixed title bar at every
   breakpoint. The fixed left/right rails set their own `top` to clear it. */
.has-sidebar .workspace {
    padding-top: var(--titlebar-h);
}

.mkt-main {
    margin-right: 340px;
    margin-left: 360px;
    padding: 0 32px 60px;
    overflow-x: hidden;
}

/* ══ Market Identity ══ */

.mkt-identity {
    padding: 24px 0 0;
}

.mkt-breadcrumb {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: #dbdbdb;
    margin-bottom: 6px;
    display: block;
}

.mkt-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.mkt-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 700;
    color: #f3f4f6;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0 0 6px;
}

/* Homepage hero title is wrapped in an anchor — inherit the heading color
   by default, but flip to the site accent on hover so it reads as clickable. */
#home-sel-title {
    color: inherit;
    text-decoration: none;
    transition: color 0.12s ease;
}
#home-sel-title:hover {
    color: var(--accent-blue);
}

.mkt-identity-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}

.mkt-live-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #16a34a;
}

.mkt-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16a34a;
    animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.mkt-volume-inline {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: #dbdbdb;
    font-variant-numeric: tabular-nums;
    display: block;
    margin-top: 4px;
}

.mkt-last-trade {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: #4b5563;
    font-variant-numeric: tabular-nums;
}

/* ══ Chart Contract Bar + Dropdown (detail page) ══ */

.chart-contract-bar-wrap {
    position: relative;
    margin: 14px 0;
}

.chart-contract-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: #111318;
    border: 1px solid #1f232b;
    border-radius: 10px;
    padding: 8px 16px;
    min-height: 44px;
    min-width: 0;
}

.chart-contract-main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 0 6px;
    cursor: pointer;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: #dbdbdb;
    text-align: left;
    min-width: 0;
    border-radius: 8px;
    transition: background 0.15s;
}

.chart-contract-main:hover { background: rgba(255,255,255,0.03); }

/* Static variant — used on the homepage hero where the contract bar is
   informational only (no dropdown). Disables the interactive affordances. */
.chart-contract-main-static {
    cursor: default;
}
.chart-contract-main-static:hover { background: transparent; }
.chart-contract-main-static .chart-contract-name {
    max-width: none;
}

.chart-contract-name {
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55%;
    flex-shrink: 0;
}

.chart-contract-sep {
    color: #4a4a4a;
    flex-shrink: 0;
}

.chart-contract-event {
    color: #8c8c8c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

.chart-contract-chevron {
    color: #8c8c8c;
    flex-shrink: 0;
    transition: transform 0.15s;
}

.chart-contract-main[aria-expanded="true"] .chart-contract-chevron {
    transform: rotate(180deg);
}

.chart-side-toggles {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.chart-side-btn {
    background: #1a1d24;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #dbdbdb;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 0 14px;
    height: 38px;
    min-width: 86px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    letter-spacing: 0.01em;
}

.chart-side-btn:hover:not(:disabled):not(.is-active) { background: #24282f; }

.chart-side-btn.is-active {
    color: #ffffff;
    background: #2e2e2e;
}
.chart-side-btn.is-yes.is-active { background: #064e3b; color: #86efac; border-color: #065f46; }
.chart-side-btn.is-no.is-active  { background: #4c1d1d; color: #fca5a5; border-color: #7f1d1d; }

.chart-bar-metrics {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-shrink: 0;
    margin-left: 8px;
    padding-left: 12px;
    border-left: 1px solid #1f232b;
}

.chart-bar-metric {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 0 14px;
    min-width: 72px;
    border-right: 1px solid #1f232b;
    line-height: 1.1;
}

.chart-bar-metric:last-child { border-right: none; padding-right: 6px; }

.chart-bar-metric-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #b0b3ba;
}

.chart-bar-metric-value {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #e5e7eb;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}


@media (max-width: 1280px) {
    .chart-bar-metrics { display: none; }
}

.chart-side-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.chart-contract-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 480px;
    overflow-y: auto;
    background: #0e1014;
    border: 1px solid #1f232b;
    border-radius: 10px;
    padding: 12px 14px;
    z-index: 100;
    box-shadow: 0 12px 28px rgba(0,0,0,0.6);
}

.chart-dd-header {
    padding: 2px 0 10px;
    border-bottom: 1px solid #1a1d24;
    margin-bottom: 10px;
}

.chart-dd-event-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-dd-summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.chart-dd-all-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
}

.chart-dd-volume {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    color: #8c8c8c;
    font-variant-numeric: tabular-nums;
}

.chart-dd-quick {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.chart-dd-quick-btn {
    background: #1a1d24;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #dbdbdb;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.chart-dd-quick-btn:hover { background: #24282f; color: #ffffff; }

.chart-dd-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chart-dd-row {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    transition: background 0.12s, border-color 0.12s;
}

.chart-dd-row:hover { background: rgba(255,255,255,0.02); }

.chart-dd-row.is-active {
    background: #14181e;
    border-color: #1f232b;
}

.chart-dd-row-name {
    grid-column: 1;
    grid-row: 1;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-dd-row-meta {
    grid-column: 1;
    grid-row: 2;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    color: #8c8c8c;
    font-variant-numeric: tabular-nums;
}

.chart-dd-row-sides {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    gap: 10px;
}

/* Inline legend in each contract row: one colored dot + YES/NO chip per
   plotted line, so the user can match a row to its line on the chart at a
   glance. Rendered between the row name and the chevron. */
.chart-dd-row-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-right: 6px;
}
.chart-dd-row-legend-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
}
.chart-dd-row-legend-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Each side gets its pill + its own pin button right next to it, so the user
   can pin either side of a contract independently. */
.chart-dd-side-pair {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Legend shown above the chart when 2+ lines are plotted. One item per
   plotted (contract, side): colored dot + name + current price. */
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 6px 12px 10px;
    align-items: center;
}
.chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #9ea3ad;
    white-space: nowrap;
}
.chart-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.chart-legend-name {
    color: #dbdbdb;
    font-weight: 500;
}
.chart-legend-value {
    color: #fff;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* Overflow chip shown when the chart legend would otherwise wrap to many
   rows (events with 4+ contracts where the user has pinned a bunch). */
.chart-legend-more {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 4px;
    background: #2e2e2e;
    color: #dbdbdb;
    font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
    font-feature-settings: "tnum" on, "lnum" on;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* Side buttons render as pills — fully-rounded ends, transparent dark fill,
   side-colored 1px border, side-colored text. The selected variant adds a
   subtle side-tinted background so the active choice reads at a glance
   without losing the pill outline. */
.chart-dd-side-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #dbdbdb;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 0 14px;
    height: 30px;
    min-width: 74px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.chart-dd-side-btn.is-yes { color: #28cc95; border-color: rgba(40, 204, 149, 0.55); }
.chart-dd-side-btn.is-no  { color: #ff4d6a; border-color: rgba(255, 77, 106, 0.55); }
.chart-dd-side-btn.is-yes:hover { background: rgba(40, 204, 149, 0.08); border-color: #28cc95; }
.chart-dd-side-btn.is-no:hover  { background: rgba(255, 77, 106, 0.08); border-color: #ff4d6a; }
.chart-dd-side-btn.is-selected.is-yes { background: rgba(40, 204, 149, 0.14); color: #28cc95; border-color: #28cc95; }
.chart-dd-side-btn.is-selected.is-no  { background: rgba(255, 77, 106, 0.14); color: #ff4d6a; border-color: #ff4d6a; }

.chart-dd-pin-btn {
    background: transparent;
    border: 1px solid #2a2e39;
    border-radius: 6px;
    color: #8c8c8c;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.chart-dd-pin-btn:hover { background: #1a1d24; color: #ffffff; }

/* Pinned state is tinted to match the side it pins, so the user can see at a
   glance that YES-pin-on is green-ish and NO-pin-on is red-ish. */
.chart-dd-pin-btn.is-yes.is-pinned {
    background: #064e3b;
    border-color: #065f46;
    color: #86efac;
}
.chart-dd-pin-btn.is-no.is-pinned {
    background: #4c1d1d;
    border-color: #7f1d1d;
    color: #fca5a5;
}

/* ══ Probability Surface (legacy, still used on homepage only) ══ */

.prob-surface-wrap {
    padding: 14px 0;
}

.prob-surface-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #dbdbdb;
    margin-bottom: 10px;
}

.prob-surface {
    display: grid;
    gap: 12px;
}

.prob-surface[data-count="1"] { grid-template-columns: 1fr; max-width: 220px; }
.prob-surface[data-count="2"] { grid-template-columns: 1fr 1fr; max-width: 480px; }
.prob-surface[data-count="3"] { grid-template-columns: 1fr 1fr 1fr; max-width: 680px; }
.prob-surface[data-count="4"] { grid-template-columns: 1fr 1fr 1fr 1fr; }
.prob-surface[data-count="compact"] {
    grid-template-columns: 1fr;
    max-width: 320px;
    gap: 10px;
}

.prob-select {
    position: relative;
    width: 100%;
}

.prob-select-trigger {
    width: 100%;
    background: #0e0e14;
    color: #ffffff;
    border: 1px solid #2a2e39;
    border-radius: 8px;
    padding: 9px 12px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: border-color 0.15s, background 0.15s;
}

.prob-select-trigger:hover {
    border-color: #3a3f4d;
    background: #12121a;
}

.prob-select[aria-expanded] .prob-select-trigger[aria-expanded="true"],
.prob-select-trigger[aria-expanded="true"] {
    border-color: var(--accent-blue);
    background: #12121a;
}

.prob-select-label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.prob-select-label-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.prob-select-label-price {
    color: #b0b3ba;
    font-family: var(--font-mono);
    flex-shrink: 0;
}

.prob-select-chevron {
    flex-shrink: 0;
    transition: transform 0.15s;
}

.prob-select-trigger[aria-expanded="true"] .prob-select-chevron {
    transform: rotate(180deg);
}

.prob-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #0e0e14;
    border: 1px solid #2a2e39;
    border-radius: 10px;
    padding: 4px;
    z-index: 40;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.prob-select-menu[hidden] {
    display: none;
}

.prob-select-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #d1d4dc;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
    width: 100%;
}

.prob-select-option:hover {
    background: #22262f;
    color: #ffffff;
}

.prob-select-option.is-active {
    background: #2a2e39;
    color: #ffffff;
}

.prob-select-option-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.prob-select-option-price {
    color: #b0b3ba;
    font-family: var(--font-mono);
    flex-shrink: 0;
}

.prob-select-option.is-active .prob-select-option-price {
    color: #ffffff;
}

.prob-card {
    min-width: 0;
    cursor: pointer;
    transition: none;
    padding: 10px 14px;
    border-radius: 6px;
    background: transparent;
    border: 2px solid #333;
    opacity: 0.5;
}

.prob-card.prob-active {
    opacity: 1;
}

.prob-card:hover:not(.prob-active) {
    opacity: 0.75;
    border-color: color-mix(in srgb, var(--card-color, #555) 50%, transparent);
}

.prob-card.prob-active {
    background: color-mix(in srgb, var(--card-color, #555) 10%, transparent);
    border-color: var(--card-color, #555);
    border-width: 2px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--card-color, #555) 30%, transparent),
                0 0 16px color-mix(in srgb, var(--card-color, #555) 15%, transparent);
}

.prob-card-top {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 4px;
}

.prob-card-name {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #e5e7eb;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prob-color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.prob-yes-price {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: #16a34a;
}

.prob-bar-track {
    height: 5px;
    border-radius: 2px;
    margin: 6px 0;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.prob-bar-track::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        var(--card-color, #555) 0px,
        var(--card-color, #555) 2px,
        transparent 2px,
        transparent 4px
    );
    opacity: 0.4;
}

.prob-bar-fill {
    height: 100%;
    border-radius: 2px;
    position: relative;
    z-index: 1;
    transition: width 0.3s ease;
}

.prob-card-bottom {
    display: flex;
    align-items: baseline;
}

.prob-no-price {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #ef4444;
    opacity: 0.55;
}

.prob-card-divider {
    color: #374151;
    font-size: 13px;
    margin: 0 4px;
}

.prob-mid-price {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #dbdbdb;
    font-variant-numeric: tabular-nums;
}


/* ══ Stats Strip ══ */

.mkt-stats-strip {
    display: flex;
    gap: 24px;
    padding: 12px 0;
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.mkt-strip-stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.mkt-strip-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    color: #4b5563;
}

.mkt-strip-value {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #e5e7eb;
    font-variant-numeric: tabular-nums;
}

/* ══ Sub-navigation tabs ══ */

.mkt-view-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 1px solid #1f1f1f;
}

.mkt-view-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #b0b3ba;
    padding: 14px 20px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}

.mkt-view-tab:hover {
    color: #d1d5db;
}

.mkt-view-tab.active {
    color: #f3f4f6;
    border-bottom-color: #3b82f6;
}

.mkt-view-stage {
    position: relative;
}

.mkt-view-pane {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    visibility: hidden;
    pointer-events: none;
}

.mkt-view-pane.mkt-view-active {
    position: relative;
    visibility: visible;
    pointer-events: auto;
}

.mkt-view-pane::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}

.mkt-view-pane.mkt-switching::after {
    opacity: 1;
}

.chart-filters-btn {
    background: none;
    border: 1px solid #333;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #9ca3af;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.chart-filters-btn:hover {
    color: #e5e7eb;
    border-color: #555;
}

/* Compact icon-only "open on Kalshi" link that sits next to the page title. */
a.mkt-kalshi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--scr-surface, #0d0d12);
    border: 1px solid #333;
    color: #9ca3af;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
a.mkt-kalshi-btn:hover {
    border-color: #555;
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-0.5px);
}
a.mkt-kalshi-btn[hidden] { display: none; }

.mkt-kalshi-logo {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* Filters overlay */
.chart-filters-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 320px;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
}

.chart-filters-panel {
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    width: 90%;
    max-width: 560px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}

.chart-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #1f1f1f;
}

.chart-filters-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #e5e7eb;
}

.chart-filters-close {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.chart-filters-close:hover {
    color: #e5e7eb;
}

.chart-filters-section {
    padding: 16px 20px;
}

.chart-filters-section-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

.chart-filters-contracts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chart-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #333;
    background: transparent;
    transition: all 0.1s;
}

.chart-filter-chip.active {
    background: rgba(255,255,255,0.05);
}

.chart-filter-chip.inactive {
    opacity: 0.4;
}

.chart-filter-chip:hover {
    border-color: #555;
}

.chart-filter-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Chart loading state */
.chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.chart-loading-text {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: #4b5563;
}

/* ══ Chart area — open, frameless ══ */

.mkt-chart-section {
    margin-bottom: 24px;
}

.mkt-chart-open {
    background: transparent;
    border: none;
    border-radius: 0;
    margin: 0;
    overflow: visible;
}

.mkt-chart-open .hero-chart-area {
    /* let the canvas breathe */
}

/* ══ Left Siblings Sidebar (per-contract view) ══ */

.mkt-siblings-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    background: #0d0d0d;
    border-right: 1px solid #1a1a1a;
    overflow: hidden;
    z-index: 150;
    padding-top: 56px; /* clear the topbar */
}


.mkt-siblings-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px 10px;
    border-bottom: 1px solid #1a1a1a;
}

.mkt-siblings-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #f3f4f6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkt-siblings-count {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    color: #6b7280;
    flex-shrink: 0;
}

.mkt-siblings-search-wrap {
    padding: 8px 14px;
    border-bottom: 1px solid #1a1a1a;
}

.mkt-siblings-search {
    width: 100%;
    background: #0a0a0a;
    border: 1px solid #262626;
    border-radius: 4px;
    padding: 6px 10px;
    color: #e5e7eb;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    outline: none;
}
.mkt-siblings-search:focus { border-color: #3f3f46; }

.mkt-siblings-list {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #262626 transparent;
}
.mkt-siblings-list::-webkit-scrollbar { width: 6px; }
.mkt-siblings-list::-webkit-scrollbar-thumb { background: #262626; border-radius: 3px; }
.mkt-siblings-list::-webkit-scrollbar-track { background: transparent; }

.mkt-siblings-empty {
    padding: 20px 18px;
    color: #6b7280;
    font-size: 12px;
    font-family: 'Inter', system-ui, sans-serif;
}

.mkt-sibling-row {
    display: block;
    padding: 10px 14px;
    border-left: 2px solid transparent;
    border-bottom: 1px solid #141414;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.mkt-sibling-row:hover {
    background: #131313;
    border-left-color: #3f3f46;
}
.mkt-sibling-row.is-active {
    background: #151515;
    border-left-color: #28cc95;
}

.mkt-sibling-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}

.mkt-sibling-name {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #e5e7eb;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
.mkt-sibling-row.is-active .mkt-sibling-name {
    color: #f9fafb;
}

.mkt-sibling-price {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #b0b3ba;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.mkt-sibling-row.is-active .mkt-sibling-price {
    color: #28cc95;
}

.mkt-sibling-bar {
    height: 3px;
    background: #1a1a1a;
    border-radius: 1.5px;
    overflow: hidden;
}

.mkt-sibling-bar-fill {
    height: 100%;
    background: #3f3f46;
    transition: width 300ms ease;
}
.mkt-sibling-row:hover .mkt-sibling-bar-fill {
    background: #52525b;
}
.mkt-sibling-row.is-active .mkt-sibling-bar-fill {
    background: #28cc95;
}

/* ══ Left Contracts Sidebar (TradingView-style) ══ */

.mkt-left-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: calc(var(--topbar-h) + var(--titlebar-h));
    left: 0;
    width: 340px;
    height: calc(100vh - var(--topbar-h) - var(--titlebar-h));
    background: var(--dark-bg);
    border-right: 1px solid #1a1a1a;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 90;
    padding: 20px 0;
    scrollbar-width: none;
}

.mkt-left-sidebar::-webkit-scrollbar { width: 0; }

/* TradingView wizardPanel-inspired left rail. Section header reads as a normal-
   case sentence label, contract rows sit in a flat vertical list with subtle
   hover/active states, and the quick-action buttons feel like secondary chips
   rather than primary CTAs. */
.left-rail-section {
    padding: 14px 12px 16px;
}

.left-rail-section + .left-rail-section {
    border-top: 1px solid #1f232b;
}

.left-rail-event {
    padding: 14px 16px 14px;
}

.left-rail-event-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #f3f4f6;
    line-height: 1.3;
    letter-spacing: -0.01em;
    word-break: break-word;
    display: flex;
    align-items: center;
    gap: 10px;
}

.left-rail-event-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    background: #1f1f23;
}

.left-rail-event-text {
    flex: 1 1 auto;
    min-width: 0;
}

.left-rail-header {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #d1d4dc;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 10px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.left-rail-count {
    font-size: 12px;
    font-weight: 500;
    color: #6a6e76;
    font-variant-numeric: tabular-nums;
}

/* TradingView "+ Add" style outlined chip — transparent fill with a thin
   cold-gray border at rest, fills with cold-gray-800 on hover. Sits at
   the right edge of the contracts section. Cursor stays as default. */
.left-rail-show-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px 4px 0 auto;
    padding: 7px 16px;
    background: transparent;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    color: #dbdbdb;
    font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
    font-feature-settings: "tnum" on, "lnum" on;
    font-size: 17px;
    line-height: 22px;
    font-weight: 500;
    cursor: default;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.left-rail-show-more:hover {
    background: #2e2e2e;
    border-color: #2e2e2e;
    color: #ffffff;
}
.left-rail-show-more-caret {
    flex: 0 0 auto;
}

/* Centered modal that opens when the user clicks "+N more" in the left
   rail. Backdrop covers the page; click closes. The `[hidden]` overrides
   are required because the modal sets explicit `display: flex` which would
   otherwise win over the user-agent `[hidden] { display: none }`. */
.left-rail-overflow[hidden],
.left-rail-overflow-backdrop[hidden] {
    display: none !important;
}

.left-rail-overflow-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 199;
}

.left-rail-overflow {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 48px));
    max-height: calc(100vh - 96px);
    display: flex;
    flex-direction: column;
    background: #1f1f1f;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7);
    z-index: 200;
    overflow: hidden;
    color: #dbdbdb;
    font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
    font-feature-settings: "tnum" on, "lnum" on;
}

.left-rail-overflow-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #2e2e2e;
    font-size: 13px;
    font-weight: 600;
    color: #dbdbdb;
}

.left-rail-overflow-close {
    background: transparent;
    border: none;
    color: #8c8c8c;
    font-size: 18px;
    line-height: 1;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: default;
    transition: background 0.12s ease, color 0.12s ease;
}
.left-rail-overflow-close:hover {
    background: #2e2e2e;
    color: #ffffff;
}

.left-rail-overflow-list {
    overflow-y: auto;
    padding: 6px;
}

.overflow-row {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 10px;
    border-radius: 6px;
    transition: background 0.12s ease;
}
.overflow-row:hover { background: #2e2e2e; }
.overflow-row.is-active { background: #2e2e2e; }

.overflow-row-name {
    flex: 1 1 auto;
    min-width: 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overflow-row-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}
.overflow-row-actions .chart-dd-side-btn {
    width: 56px;
    height: 24px;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    background: #1f1f1f;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    color: #dbdbdb;
    cursor: default;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.overflow-row-actions .chart-dd-side-btn:hover { background: #2e2e2e; color: #ffffff; }
.overflow-row-actions .chart-dd-side-btn.is-selected.is-yes { background: #056656; color: #ffffff; border-color: #056656; }
.overflow-row-actions .chart-dd-side-btn.is-selected.is-no  { background: #b22833; color: #ffffff; border-color: #b22833; }

.overflow-row-actions .chart-dd-pin-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 12px;
    background: #1f1f1f;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    color: #8c8c8c;
    cursor: default;
}
.overflow-row-actions .chart-dd-pin-btn:hover { background: #2e2e2e; color: #ffffff; }
.overflow-row-actions .chart-dd-pin-btn.is-yes.is-pinned { background: #056656; color: #ffffff; border-color: #056656; }
.overflow-row-actions .chart-dd-pin-btn.is-no.is-pinned { background: #b22833; color: #ffffff; border-color: #b22833; }

.left-rail-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
    padding: 0 4px;
}

.left-rail-quick .chart-dd-quick-btn {
    flex: 1 1 calc(33.333% - 4px);
    min-width: 0;
    height: 28px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid #2a2e39;
    border-radius: 6px;
    color: #b0b3ba;
    font-size: 11px;
    font-weight: 500;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.left-rail-quick .chart-dd-quick-btn:hover {
    background: #1a1d24;
    border-color: #3a3e49;
    color: #ffffff;
}

.left-rail-contracts .chart-dd-list {
    gap: 4px;
}

/* TradingView tag-zVPYJd3B (stretch / small / square / interactive variant)
   — pulled from tradingview.com/fundamental-graphs. Base tag dimensions
   come straight from the live styles: cold-gray-800 fill, transparent 1px
   border, 8px radius, 34px height, system font stack with tabular numerals,
   16/24 type, white primary text. Inline-flex with space-between so the
   contract name (left) and YES/NO chips (right) sit on a single line. */
.left-rail-contracts .chart-dd-row {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: 34px;
    padding: 0 10px;
    grid-template-columns: none;
    grid-template-rows: none;
    column-gap: 0;
    background: #2e2e2e;
    border: none;
    border-radius: 8px;
    outline: none;
    overflow: visible;
    position: relative;
    cursor: default;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
    font-feature-settings: "tnum" on, "lnum" on;
    font-style: normal;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    transition: background 0.12s ease;
}

.left-rail-contracts .chart-dd-row:hover {
    background: #3d3d3d;
}

.left-rail-contracts .chart-dd-row.is-active {
    background: #3d3d3d;
}

/* Active row should still react to hover so the affordance reads consistently
   across all rows — bump to cold-gray-700 (#4a4a4a) when both states stack. */
.left-rail-contracts .chart-dd-row.is-active:hover {
    background: #4a4a4a;
}

/* Tag main-text styling pulled from tradingview.com/fundamental-graphs:
   font-family system stack, "tnum"/"lnum" on, 16px / 500 / 24 line-height,
   white text, antialiased, no text-transform, with margin-inline-start: 8px
   between the tag's left edge and the label. */
.left-rail-contracts .chart-dd-row-name {
    grid-column: auto;
    grid-row: auto;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 34px;
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
    font-feature-settings: "tnum" on, "lnum" on;
    font-style: normal;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #ffffff;
    letter-spacing: 0;
    text-transform: none;
    cursor: default;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.left-rail-contracts .chart-dd-row-meta {
    display: none;
}

/* Chevron sits at the row's right edge in collapsed state; rotates 180deg
   when the row is expanded. */
.left-rail-contracts .chart-dd-row-chevron {
    flex: 0 0 auto;
    color: #b0b3ba;
    transition: transform 0.15s ease;
}

.left-rail-contracts .chart-dd-row.is-expanded .chart-dd-row-chevron {
    transform: rotate(180deg);
}

/* Row click toggles `is-expanded`. When expanded, the YES/NO + pin chips
   render as an absolutely-positioned panel just under the row so the rows
   below stay put instead of being pushed down. */
/* Pop-out dropdown panel — uses the same cold-gray-800 fill (#2e2e2e) as
   the contract row pill so the panel reads as a continuation of the row.
   cold-gray-700 border (#4a4a4a), 6px radius, system font stack with
   tabular numerals, antialiased text. */
.left-rail-contracts .chart-dd-row-sides {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: auto;
    right: 0;
    width: auto;
    z-index: 20;
    padding: 6px 8px;
    background: #2e2e2e;
    border: none;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    color: #dbdbdb;
    font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
    font-feature-settings: "tnum" on, "lnum" on;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    color-scheme: dark;
    pointer-events: auto;
    gap: 6px;
}

.left-rail-contracts .chart-dd-pin-btn {
    background: #2e2e2e;
}

.left-rail-contracts .chart-dd-row.is-expanded {
    z-index: 25;
}

.left-rail-contracts .chart-dd-row.is-expanded .chart-dd-row-sides {
    display: flex;
    flex-direction: column;
}

/* YES pair fills the first row, NO pair fills the second. Each pair matches
   the parent contract pill's 34px height so the dropdown reads as a stacked
   set of full-size rows. */
.left-rail-contracts .chart-dd-row-sides .chart-dd-side-pair {
    width: auto;
    height: 34px;
    display: flex;
    align-items: stretch;
    gap: 4px;
}

.left-rail-contracts .chart-dd-row-sides .chart-dd-side-pair .chart-dd-side-btn {
    flex: 0 0 auto;
    width: 110px;
    height: 34px;
    font-size: 13px;
}

.left-rail-contracts .chart-dd-row-sides .chart-dd-side-pair .chart-dd-pin-btn {
    width: 34px;
    height: 34px;
}

/* Hide chevron in the legacy chart-contract-dropdown rows — it's a left-rail-
   only affordance. */
.chart-contract-dropdown .chart-dd-row-chevron {
    display: none;
}

/* Single-contract events skip the dropdown UX entirely: chevron is gone,
   the row wraps so the YES/NO + pin chips render inline beneath the
   contract name (rather than as an absolutely-positioned popup), and the
   row itself is non-interactive (no expand-on-click). */
.left-rail-contracts .chart-dd-row.is-single-contract {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 10px;
    cursor: default;
}
/* Hover on the single-contract row container is a no-op — the row isn't
   clickable as a whole, so brightening it on hover reads as a misleading
   affordance. The YES/NO buttons + pins inside keep their own hover styles. */
.left-rail-contracts .chart-dd-row.is-single-contract:hover {
    background: #2e2e2e;
}
.left-rail-contracts .chart-dd-row.is-single-contract.is-active,
.left-rail-contracts .chart-dd-row.is-single-contract.is-active:hover {
    background: #3d3d3d;
}
.left-rail-contracts .chart-dd-row.is-single-contract .chart-dd-row-chevron,
.left-rail-contracts .chart-dd-row.is-single-contract .chart-dd-row-name,
.left-rail-contracts .chart-dd-row.is-single-contract .chart-dd-row-legend {
    display: none;
}
.left-rail-contracts .chart-dd-row.is-single-contract .chart-dd-row-sides {
    display: flex;
    flex-direction: column;
    position: static;
    flex: 1 1 100%;
    width: 100%;
    margin-top: 6px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    z-index: auto;
    gap: 6px;
}
.left-rail-contracts .chart-dd-row.is-single-contract .chart-dd-side-pair {
    width: 100%;
}
.left-rail-contracts .chart-dd-row.is-single-contract .chart-dd-side-pair .chart-dd-side-btn {
    flex: 1 1 auto;
    width: auto;
}

.left-rail-contracts .chart-dd-side-pair {
    flex: 0 0 auto;
}

/* Sizing-only overrides for the left-rail pills. Visual styling (pill
   shape, side-colored border, hover, is-selected tints) lives on the base
   .chart-dd-side-btn rule so all surfaces share one source of truth. */
.left-rail-contracts .chart-dd-side-btn {
    flex: 0 0 auto;
    width: 56px;
    height: 22px;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
    font-feature-settings: "tnum" on, "lnum" on;
    font-size: 11px;
    text-align: center;
}

.left-rail-contracts .chart-dd-pin-btn {
    width: 22px;
    height: 22px;
    background: #1f1f1f;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    color: #8c8c8c;
    cursor: default;
}

.left-rail-contracts .chart-dd-pin-btn:hover {
    background: #2e2e2e;
    color: #ffffff;
}

.left-rail-contracts .chart-dd-pin-btn.is-yes.is-pinned {
    background: #056656;
    color: #ffffff;
    border-color: #056656;
}

.left-rail-contracts .chart-dd-pin-btn.is-no.is-pinned {
    background: #b22833;
    color: #ffffff;
    border-color: #b22833;
}

/* ══ Right Intelligence Sidebar ══ */

.mkt-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: calc(var(--topbar-h) + var(--titlebar-h));
    right: 0;
    width: 320px;
    height: calc(100vh - var(--topbar-h) - var(--titlebar-h));
    background: var(--dark-bg);
    border-left: 1px solid #1a1a1a;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 90;
    padding: 20px 0;
    scrollbar-width: none;
}

.mkt-sidebar::-webkit-scrollbar { width: 0; }

.mkt-sidebar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    z-index: 151;
}

.mkt-sidebar.sidebar-switching::after {
    opacity: 1;
}

.mkt-rail-context {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px 16px;
    border-bottom: 1px solid #1a1a1a;
    margin-bottom: 8px;
}

.mkt-rail-placeholder {
    display: none;
    padding: 40px 24px;
    text-align: center;
}

.mkt-rail-placeholder-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #d1d4dc;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

.mkt-rail-placeholder-msg {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.5;
}

.mkt-sidebar.is-multi-contract .mkt-rail-context,
.mkt-sidebar.is-multi-contract #sidebar-orderbook-section {
    display: none !important;
}

/* Until the chart finishes its first data render, hide every secondary
   section that lives below or beside it — the main-area Order Book +
   Flow tab strip and stage, plus the right-rail Order Book section.
   They pop in together once `_applyChart` has actually written data
   points to at least one series. */
body.chart-not-ready .mkt-view-tabs,
body.chart-not-ready .mkt-view-stage,
body.chart-not-ready #sidebar-orderbook-section {
    display: none !important;
}

.mkt-rail-context-name {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #e5e7eb;
}

.mkt-rail-section {
    padding: 0 20px;
}

.mkt-rail-section + .mkt-rail-section {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid #1a1a1a;
}

.mkt-rail-header {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flow-window-tabs {
    display: inline-flex;
    gap: 0;
    background: #0e0e14;
    border: 1px solid #2a2e39;
    border-radius: 999px;
    padding: 0;
}

.flow-window-btn {
    background: transparent;
    border: none;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #b0b3ba;
    padding: 3px 10px;
    border-radius: 999px;
    cursor: pointer;
    text-transform: none;
    min-width: 32px;
    text-align: center;
    line-height: 1.2;
    transition: color 0.15s, background 0.15s;
    letter-spacing: 0;
}

.flow-window-btn:hover:not(.active) {
    color: #d1d4dc;
    background: #22262f;
}

.flow-window-btn.active {
    color: #ffffff;
    background: #2a2e39;
}

.flow-event-section {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #1a1a1a;
}

.mkt-rail-body {
    /* container for stat rows */
}

/* Value-first stat layout */
.mkt-stat-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.mkt-stat-value {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #e5e7eb;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.mkt-stat-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #b0b3ba;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 2-column stat grid */
.mkt-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}

.mkt-stat-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mkt-stat-cell .mkt-stat-value {
    font-size: 14px;
}

.mkt-stat-cell .mkt-stat-label {
    font-size: 11px;
}

/* Colors */
.mkt-c-bid { color: #28cc95; }
.mkt-c-ask { color: #ff4d6a; }

/* Flow bar — matches contract card prob bar style */
.mkt-flow-bar-wrap {
    height: 5px;
    border-radius: 2px;
    margin: 4px 0 12px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.mkt-flow-bar-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        #ff4d6a 0px,
        #ff4d6a 2px,
        transparent 2px,
        transparent 4px
    );
    opacity: 0.4;
}

.mkt-flow-bar-yes {
    height: 100%;
    border-radius: 2px;
    background: #28cc95;
    position: relative;
    z-index: 1;
    transition: width 0.4s ease;
}

.mkt-flow-bar-no {
    display: none;
}

/* Sidebar Order Book */
.mkt-rail-spread {
    font-size: 11px;
    color: #787b86;
    font-weight: 400;
}

.sidebar-ob-imbalance {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.sidebar-ob-pct {
    font-size: 11px;
    font-weight: 600;
    font-family: 'Inter', system-ui, sans-serif;
    white-space: nowrap;
}

.sidebar-ob-bid-pct { color: #16a34a; }
.sidebar-ob-ask-pct { color: #ef4444; }

.sidebar-ob-bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    display: flex;
    overflow: hidden;
}

.sidebar-ob-bar-bid {
    background: #16a34a;
    transition: width 0.3s;
}

.sidebar-ob-bar-ask {
    background: #ef4444;
    transition: width 0.3s;
}

.sidebar-ob-book {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
}

.sidebar-ob-asks, .sidebar-ob-bids {
    overflow-y: scroll;
    max-height: 162px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.sidebar-ob-asks::-webkit-scrollbar, .sidebar-ob-bids::-webkit-scrollbar { width: 0; }
.sidebar-ob-asks, .sidebar-ob-bids { scrollbar-width: none; }

.sidebar-ob-spread-row {
    flex-shrink: 0;
}

.sidebar-ob-row {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    position: relative;
}


.sidebar-ob-price {
    width: 32px;
    flex-shrink: 0;
    font-weight: 600;
}

.sidebar-ob-row-bid .sidebar-ob-price { color: #16a34a; }
.sidebar-ob-row-ask .sidebar-ob-price { color: #ef4444; }

.sidebar-ob-qty {
    flex: 1;
    text-align: right;
    color: #d1d4dc;
    font-variant-numeric: tabular-nums;
}

.sidebar-ob-total {
    flex: 1;
    text-align: right;
    color: #787b86;
    font-variant-numeric: tabular-nums;
}

.sidebar-ob-bar-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0.25;
}

.sidebar-ob-row-bid .sidebar-ob-bar-bg {
    left: 0;
    background: #16a34a;
}

.sidebar-ob-row-ask .sidebar-ob-bar-bg {
    left: 0;
    background: #ef4444;
}

.sidebar-ob-spread-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 8px;
    border-top: 1px solid #2a2e39;
    border-bottom: 1px solid #2a2e39;
    margin: 4px 0;
    font-size: 11px;
    color: #787b86;
}

.sidebar-ob-loading {
    color: #6b7280;
    font-size: 12px;
    padding: 12px 0;
    text-align: center;
}

/* Sweep distance */
.mkt-sweep-row {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
}

.mkt-sweep-level {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}

.mkt-sweep-level .mkt-sweep-cost {
    color: #e5e7eb;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.mkt-sweep-level .mkt-sweep-target {
    color: #6b7280;
    font-size: 12px;
}

/* Contracts */
.mkt-contract-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 13px;
}

.mkt-contract-name { color: #9ca3af; }
.mkt-contract-prob {
    color: #e5e7eb;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Info tooltip */
.mkt-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1a1a1a;
    color: #4b5563;
    font-size: 9px;
    font-weight: 600;
    cursor: default;
    position: relative;
    flex-shrink: 0;
    vertical-align: middle;
    transition: color 0.15s, background 0.15s;
}

.mkt-info:hover {
    color: #d1d5db;
    background: #2a2a2a;
}

.mkt-info:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: #1a1a1a;
    color: #d1d5db;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #2a2a2a;
    width: 240px;
    white-space: normal;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 12px 32px rgba(0,0,0,0.6);
}

/* ══ Responsive ══ */

/* Wide-screen 3-column layout: page-level scroll is locked. The chart, contract
   bar, and view tabs stay in place; only the Order Book / Flow stage scrolls
   inside its own pane. The chart-vs-stage split is user-resizable via the
   .mkt-resizer drag handle (see JS in market_detail.html). */
@media (min-width: 1281px) {
    body.has-sidebar {
        overflow: hidden;
    }
    .has-sidebar .workspace {
        display: flex;
        height: calc(100vh - var(--topbar-h));
        overflow: hidden;
    }
    .mkt-main {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        padding-bottom: 0;
        overflow: hidden;
    }
    /* Chart now owns the full main column — the order book + flow that
       used to live below it have moved into the right sidebar, so the
       chart fills all remaining vertical space instead of being capped
       at the old 400px slot. */
    .mkt-chart-section {
        flex: 1 1 0;
        min-height: 0;
        margin-bottom: 0;
        position: relative;
        overflow: hidden;
    }
    .mkt-chart-section .hero-chart-card.mkt-chart-open {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
    }
    .mkt-chart-section .hero-chart-area-tv {
        flex: 1;
        min-height: 0;
        height: auto;
    }
    .mkt-resizer {
        flex: 0 0 8px;
        height: 8px;
        cursor: ns-resize;
        background: transparent;
        position: relative;
        margin: 4px 0;
        transition: background 0.15s ease;
    }
    .mkt-resizer::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 36px;
        height: 3px;
        background: #2a2e39;
        border-radius: 2px;
        transform: translate(-50%, -50%);
        transition: background 0.15s ease, width 0.15s ease;
    }
    .mkt-resizer:hover::before,
    .mkt-resizer.is-dragging::before {
        background: var(--accent-blue, #5a9cff);
        width: 56px;
    }
    body.mkt-resizing,
    body.mkt-resizing * {
        cursor: ns-resize !important;
        user-select: none !important;
    }
    .mkt-view-stage {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }
}

@media (max-width: 1280px) {
    /* Sub-3-column layout: revert to a normal page-scrolling document so the
       stacked rails + main content can flow vertically. The chart resizer is
       only meaningful when mkt-main is a flex column with bounded height. */
    .mkt-resizer { display: none; }
    .has-sidebar .workspace {
        display: block;
        height: auto;
        overflow: visible;
    }
    .mkt-main {
        margin-left: 0;
        padding-left: 20px;
    }
    .mkt-left-sidebar {
        position: static;
        width: auto;
        height: auto;
        border-right: none;
        border-top: none;
        border-bottom: 1px solid #1a1a1a;
        padding: 16px 20px;
    }
}

@media (max-width: 1024px) {
    .mkt-main {
        margin-right: 0;
        padding: 0 20px 40px;
    }
    .mkt-sidebar {
        position: static;
        width: auto;
        height: auto;
        border-left: none;
        border-top: 1px solid #1a1a1a;
        padding: 20px;
    }
    .mkt-stat-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .mkt-main { padding: 0 16px 32px; }
    .mkt-stat-grid { grid-template-columns: 1fr 1fr; }
    .prob-surface { grid-template-columns: 1fr !important; max-width: none !important; }
    .mkt-stats-strip { gap: 16px; }
}

/* ══════════════════════════════════════
   ══════════════════════════════════════ */

.mkt-surface {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 16px 24px 0;
    gap: 1px;
    background: #111;
    border-radius: 12px;
    overflow: hidden;
    max-height: 480px;
}

.mkt-panel {
    background: #000;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.mkt-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
}

.mkt-panel-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #e5e7eb;
    letter-spacing: -0.01em;
}

.mkt-panel-meta {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: #b0b3ba;
}

/* Depth */
.mkt-depth {
    min-width: 0;
}

.depth-chart-area {
    flex: 1;
    position: relative;
    min-height: 200px;
    max-height: 400px;
    padding: 0 8px 8px;
}

.depth-chart-area canvas { display: block; }

/* Book */
.mkt-book {
    min-width: 0;
}

.orderbook-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Order Book combined view (depth chart + ladder) */
.ob-depth-section {
    border-bottom: 1px solid #2a2e39;
}

.ob-depth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 4px;
}

.ob-ladder-section {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.ob-split {
    display: flex;
    gap: 0;
    max-height: 400px;
    overflow-y: auto;
}

.ob-split::-webkit-scrollbar { width: 0; }
.ob-split { scrollbar-width: none; }

.ob-side {
    flex: 1;
    min-width: 0;
}

.ob-side-header {
    padding: 6px 8px 2px;
}

.ob-side-label {
    font-size: 11px;
    font-weight: 600;
    font-family: 'Inter', system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ob-bid-label { color: #16a34a; }
.ob-ask-label { color: #ef4444; }

.ob-bids {
    border-right: 1px solid #2a2e39;
}

.ob-bids .ladder-table {
    direction: rtl;
}

.ob-bids .ladder-table th,
.ob-bids .ladder-table td {
    direction: ltr;
    text-align: right;
}

.ladder-wrap {
    flex: 1;
    overflow-y: auto;
    max-height: 400px;
}

.ladder-wrap::-webkit-scrollbar { width: 0; }
.ladder-wrap { scrollbar-width: none; }

.ladder-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.ladder-table th {
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    padding: 12px 12px 10px;
    border-bottom: 1px solid #1f1f1f;
    position: sticky;
    top: 0;
    background: #000;
    z-index: 2;
}

.ladder-table td {
    padding: 7px 12px;
    white-space: nowrap;
    border: none;
}

.ladder-table tbody tr:nth-child(even) td {
    background: rgba(255,255,255,0.012);
}

.ladder-r { text-align: right; }
.ladder-c { text-align: center; }

.ladder-bid-cell { color: #16a34a; }
.ladder-ask-cell { color: #ef4444; }

.ladder-price-cell {
    text-align: center;
    color: #777;
    font-weight: 500;
}

.ladder-cum-cell { color: #4b5563; font-size: 12px; }
.ladder-qty-cell { color: #d1d5db; }

.ladder-spread-row td {
    border-top: 1px solid rgba(59, 130, 246, 0.12);
    border-bottom: 1px solid rgba(59, 130, 246, 0.12);
    background: rgba(59, 130, 246, 0.02) !important;
}

/* Tape */
.mkt-tape {
    min-width: 0;
    overflow: hidden;
}

.imbalance-bar-wrap {
    display: flex;
    height: 3px;
    background: #1a1a1a;
    margin: 0;
    border-radius: 2px;
    overflow: hidden;
}

.imbalance-bar-yes {
    background: rgba(110, 231, 183, 0.5);
    transition: width 0.4s ease;
}

.imbalance-bar-no {
    background: rgba(253, 186, 116, 0.5);
    transition: width 0.4s ease;
}

/* Responsive */
@media (max-width: 1024px) {
    .mkt-surface { grid-template-columns: 1fr 1fr; }
    .mkt-tape { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
    .mkt-surface { grid-template-columns: 1fr; }
}

/* ── Trade Tape (refined) ── */
.tape-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.tape-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    flex-shrink: 0;
}

.tape-title {
    font-size: 13px;
    font-weight: 600;
    color: #e5e7eb;
    font-family: 'Inter', system-ui, sans-serif;
    letter-spacing: -0.01em;
}

.tape-stats {
    display: flex;
    gap: 14px;
    font-size: 12px;
    font-family: 'Inter', system-ui, sans-serif;
}

.tape-stat {
    color: #6b7280;
}

.tape-filters {
    display: flex;
    gap: 6px;
    padding: 0 16px 10px;
}

.tape-filter-btn {
    background: none;
    border: 1px solid #222;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #666;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.tape-filter-btn:hover { color: #ccc; border-color: #444; }

.tape-filter-btn.active {
    color: #e5e7eb;
    border-color: #444;
    background: #161616;
}

.tape-contract {
    color: #777;
    font-size: 11px;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tape-table-wrap {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Flow stream (trades & orders) */
.flow-stream {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 360px;
    padding: 0;
    gap: 0;
    mask-image: linear-gradient(to bottom, black 0%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 92%, transparent 100%);
}

/* Trades section below the chart — full-width container in .mkt-main.
 * Wraps the .flow-controls + .flow-head + .flow-stream stack. */
.mkt-flow-section {
    margin-top: 16px;
    border: 1px solid #2e2e2e;
    border-radius: 12px;
    background: var(--dark-bg, #0a0a0a);
    overflow: hidden;
}
.mkt-flow-section .flow-head,
.mkt-flow-section .flow-stream .flow-item {
    /* Wider container = more breathing room. Order:
     *   TIME | CONTRACT | TAKER SIDE | PRICE | SIZE | TOTAL
     * Contract gets the most space since names are long-ish. */
    grid-template-columns: 80px 2fr 80px 80px 1fr 1fr;
}
.mkt-flow-section .flow-cell-entity {
    /* Wider container — contract name reads without truncation. */
    color: #d1d4dc;
    font-size: 12px;
    font-weight: 500;
}

/* Sticky column header — TradingView Time & Sales convention. Uppercase,
 * muted, monospaced grid that mirrors the row layout for clean column
 * alignment. */
.flow-head {
    display: grid;
    /* Columns: TIME | CONTRACT | TAKER SIDE | PRICE | SIZE | TOTAL */
    grid-template-columns: 56px 1.3fr 60px 60px 1fr 1fr;
    column-gap: 8px;
    padding: 6px 14px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #5a5e6b;
    border-top: 1px solid #1a1a22;
    border-bottom: 1px solid #1a1a22;
    background: var(--dark-bg, #0a0a0a);
}
.flow-head > :nth-child(1) { text-align: left; }
.flow-head > :nth-child(2) { text-align: left; }
.flow-head > :nth-child(3) { text-align: left; }
.flow-head > :nth-child(4) { text-align: left; }
.flow-head > :nth-child(5) { text-align: right; }
.flow-head > :nth-child(6) { text-align: right; }

/* Row layout — single-line tabular grid for the market-detail Trades tape.
 * Scoped to `.flow-stream .flow-item` so the home Recent-Sweeps card
 * (which also uses `.flow-item` but has its own layout under
 * `.home-sweep-stream`) is untouched. */
.flow-stream .flow-item {
    position: relative;
    display: grid;
    /* Columns: TIME | CONTRACT | TAKER SIDE | PRICE | SIZE | TOTAL */
    grid-template-columns: 56px 1.3fr 60px 60px 1fr 1fr;
    column-gap: 8px;
    align-items: center;
    padding: 6px 14px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: #d1d4dc;
    transition: background-color 0.12s;
}
/* Background-tint hover on `.flow-stream` rows. Recent Sweeps on the
   homepage uses `.flow-stream home-sweep-stream` as its container, so
   this rule applied there too and left rows stuck in the tinted state
   after a tap on touch devices. Gated on (hover: hover) so only mouse-
   driven displays get the affordance; the detail-page Trades tape
   benefits from the same fix (no stale highlight after a finger tap). */
@media (hover: hover) {
    .flow-stream .flow-item:hover { background: #15171c; }
}
/* Taker cell — small uppercase YES/NO badge in the side color. */
.flow-cell-taker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
/* Entity column: contract name on the right, truncated, muted. */
.flow-cell-entity {
    padding-left: 6px;
    color: #787b86;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Per-column treatments. */
.flow-cell-time { color: #5a5e6b; font-size: 11px; }
.flow-cell-price {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    text-align: left;
}
.flow-arrow { font-size: 10px; line-height: 1; opacity: 0.9; }
.flow-arrow-limit { font-weight: 600; }
.flow-price { font-weight: 600; }
.flow-cell-size  { text-align: right; color: #d1d4dc; }
.flow-cell-total { text-align: right; color: #d1d4dc; font-weight: 600; }

/* Big-trade emphasis — top decile by dollar value gets bolder weight
 * and a faint left-edge accent so big prints stand out. */
.flow-item.is-big .flow-cell-size,
.flow-item.is-big .flow-cell-total { font-weight: 700; color: #f3f4f6; }
.flow-item.is-trade.is-big {
    background: rgba(255, 255, 255, 0.015);
}
.flow-item.is-trade.is-big::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: currentColor;
    opacity: 0.5;
    border-radius: 0 2px 2px 0;
}

/* Limit (orderbook delta) rows are visually quieter than trades so the
 * eye latches onto executions first. */
.flow-item.is-limit {
    opacity: 0.7;
    font-weight: 400;
}
.flow-item.is-limit .flow-cell-total {
    color: #5a5e6b;
    font-size: 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.flow-item.is-limit:hover { opacity: 0.9; }

/* Contract name is now an Entity column on each row, so the run-divider
 * styles are no longer used. Left here intentionally blank — remove on
 * next sweep if no other consumer turns up. */

.home-sweep-stream .flow-item {
    /* Explicit display:flex — restored after the trades-tape rewrite
     * scoped the grid layout under `.flow-stream`. Home sweeps need
     * two-column flex: title block on the left, dollar pill on the
     * right. min-height of 84px fits exactly 5 rows in the 420px
     * stream container (5 × 84 = 420); larger values clip the bottom
     * of the 5th row. The right-hand stack tops out around 62px so
     * there's ~11px of breathing room above and below. */
    position: relative;
    display: flex;
    padding: 0 20px;
    align-items: center;
    min-height: 84px;
    flex-wrap: nowrap;
    overflow: hidden;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.home-sweep-stream .flow-item-contract {
    flex: 1;
    min-width: 0;
    max-width: none;
    font-size: 13px;
    font-weight: 600;
    color: #d1d4dc;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.home-sweep-stream .flow-item-meta,
.home-sweep-stream .flow-item-contract,
.home-sweep-stream .mt-row-sub,
.home-sweep-stream .mt-row-live,
.home-sweep-stream .mt-row-time {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-sweep-stream .flow-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: #2a2e39;
    pointer-events: none;
}

.home-sweep-stream .flow-item::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 8px;
    right: 8px;
    border-radius: 10px;
    background: transparent;
    pointer-events: none;
    z-index: 0;
}

.home-sweep-stream .flow-item > * {
    position: relative;
    z-index: 1;
}

.home-sweep-stream .flow-item-meta {
    font-size: 14px;
    font-weight: 600;
    color: #d1d4dc;
}

.sweep-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
}

.sweep-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    padding-left: 8px;
}

.sweep-sparkline {
    flex-shrink: 0;
    opacity: 0.6;
}

/* Hover affordances on Recent Sweeps live `.flow-item` rows.
   Gated on (hover: hover) so touch devices don't see the row pill
   highlight or the category sub-pill recolor stick after a tap.
   First rule cancels the flow-stream's full-row #15171c hover the
   container picks up via its `flow-stream` class — Recent Sweeps
   wants only the inset rounded ::before highlight (matching the
   Most Traded card's .mt-row:hover behavior). */
@media (hover: hover) {
    .home-sweep-stream .flow-item:hover {
        background: transparent;
    }
    .home-sweep-stream .flow-item:hover::before {
        background: #22262f;
    }
    .home-sweep-stream .flow-item:hover .mt-row-sub:not(.mt-row-live) {
        background: var(--accent-blue);
        color: #ffffff;
    }
}

/* Legacy buy/sell classes — neutralized for the new tape layout so the
 * whole row no longer turns green/red. Color now lives on the price
 * cell + arrow only; everything else stays neutral for readability. */
.flow-item.flow-item-buy  { color: #d1d4dc; }
.flow-item.flow-item-sell { color: #d1d4dc; }
.flow-item.flow-item-buy  .flow-cell-price,
.flow-item.flow-item-buy  .flow-cell-taker,
.flow-item.flow-item-buy  .flow-arrow { color: #16a34a; }
.flow-item.flow-item-sell .flow-cell-price,
.flow-item.flow-item-sell .flow-cell-taker,
.flow-item.flow-item-sell .flow-arrow { color: #ef4444; }

.flow-item-amount {
    font-variant-numeric: tabular-nums;
    min-width: 60px;
    flex-shrink: 0;
    white-space: nowrap;
}

.flow-item-meta {
    font-size: 11px;
    font-weight: 400;
    color: #6b7280;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Limit add/cancel: side color is set by .flow-item-buy/sell. The
 * +/− indicator (.flow-arrow-limit) sits in front of the price and
 * adopts the side color. CXL rows could be visually crossed out, but
 * dimming via .is-limit opacity is enough — it's clear from the +/−. */

.flow-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 12px 8px;
    gap: 8px;
    flex-wrap: wrap;
    row-gap: 6px;
}

.flow-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.flow-filter-label {
    font-size: 11px;
    color: #787b86;
    font-family: 'Inter', system-ui, sans-serif;
    white-space: nowrap;
}

.flow-filter-tabs {
    display: inline-flex;
    background: #1a1a22;
    border-radius: 6px;
    padding: 2px;
}

.flow-filter-btn {
    background: none;
    border: none;
    color: #787b86;
    font-size: 11px;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.flow-filter-btn.active {
    background: #2a2e39;
    color: #d1d4dc;
}

.flow-filter-btn:hover:not(.active) {
    color: #d1d4dc;
}

.flow-pause-btn {
    background: #1a1a22;
    border: 1px solid #2a2e39;
    color: #787b86;
    font-size: 11px;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    padding: 4px 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
}

.flow-pause-btn:hover {
    border-color: #555;
    color: #d1d4dc;
}

.flow-pause-btn.is-paused {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

.flow-debug-layout {
    display: flex;
    gap: 1px;
    height: 560px;
    background: #2a2e39;
}

.flow-debug-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #0a0a0f;
}

.flow-debug-label {
    font-size: 10px;
    font-weight: 600;
    color: #787b86;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 12px;
    border-bottom: 1px solid #2a2e39;
    flex-shrink: 0;
}

.flow-debug-stream {
    font-size: 11px;
}

.flow-debug-stream .flow-item {
    font-size: 11px;
    padding: 3px 8px;
}

.flow-debug-stream .flow-item-type {
    min-width: 50px;
    font-size: 8px;
}

.flow-debug-stream .flow-item-amount {
    min-width: 45px;
    font-size: 11px;
}

.sweep-dollar-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Inter', system-ui, sans-serif;
    font-feature-settings: "case" on;
    font-variant-numeric: lining-nums tabular-nums;
    text-transform: uppercase;
    /* Tightening line-height to 1 removes leading above and below the
       glyph; the asymmetric top-vs-bottom padding (4 vs 3px) compensates
       for uppercase text having no descender — without it, the
       cap-height glyph still floats slightly toward the top of the
       centered line box. */
    line-height: 1;
    padding: 6px 12px 5px;
    border-radius: 100px;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid;
    width: 94px;
    box-sizing: border-box;
}

.flow-item-time {
    font-size: 10px;
    font-weight: 400;
    font-family: var(--font-mono);
    color: #555;
    min-width: 62px;
    flex-shrink: 0;
}

.flow-item-type {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.7;
    min-width: 65px;
    flex-shrink: 0;
}

.flow-item-contract {
    font-size: 11px;
    font-weight: 500;
    color: #787b86;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.flow-item-ago {
    font-size: 10px;
    font-weight: 400;
    color: #9ca3af;
    flex-shrink: 0;
}

.home-sweep-stream {
    height: 0;
    flex: 1 1 0;
    min-height: 300px;
    overflow: hidden;
}

.flow-empty {
    color: #6b7280;
    font-size: 13px;
    font-family: 'Inter', system-ui, sans-serif;
    text-align: center;
    padding: 40px 20px;
}

@keyframes flow-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.tape-table-wrap::-webkit-scrollbar { width: 0; }
.tape-table-wrap { scrollbar-width: none; }

.tape-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    table-layout: fixed;
}

.tape-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.tape-table th {
    padding: 12px 14px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    background: #000;
    border-bottom: 1px solid #1f1f1f;
}

.tape-table td {
    padding: 8px 14px;
    color: #9ca3af;
    border: none;
    white-space: nowrap;
}

.tape-table tbody tr:nth-child(even) td {
    background: rgba(255,255,255,0.012);
}

.tape-r { text-align: right !important; }

/* Subtle side indicators — no harsh full-row coloring */
.tape-table tr.tape-buy .tape-side { color: #16a34a; }
.tape-table tr.tape-sell .tape-side { color: #ef4444; }

.tape-table tr.tape-buy .tape-time,
.tape-table tr.tape-sell .tape-time { color: #555; }

.tape-table tr:hover td { background: rgba(255,255,255,0.02); }

.tape-side { font-weight: 600; }

.tape-time {
    font-size: 10px;
    color: var(--dark-text-muted);
}

.tape-footer {
    padding: 8px 16px;
    text-align: center;
    border-top: 1px solid var(--dark-border);
    flex-shrink: 0;
}

.tape-load-more {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 28px;
    background: transparent;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.15s;
}

.tape-load-more:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

.chart-area canvas {
    width: 100% !important;
    display: block;
}

.chart-controls-bar {
    position: absolute;
    top: 8px;
    left: 12px;
    display: flex;
    gap: 2px;
    z-index: 10;
}

.chart-range-btn {
    font-size: 10px;
    padding: 3px 8px;
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: 2px;
    color: var(--dark-text-muted);
    cursor: pointer;
    font-family: var(--font-ui);
}

.chart-range-btn:hover { color: var(--dark-text-secondary); border-color: var(--dark-text-secondary); }
.chart-range-btn.active { color: var(--accent-blue); border-color: var(--accent-blue); background: rgba(41, 98, 255, 0.12); }

/* Bottom metrics panel (dark) */
.bottom-panel {
    display: flex;
    background: var(--dark-bg);
    border-top: 1px solid var(--dark-border);
    flex-shrink: 0;
    height: 110px;
    overflow: hidden;
}

.bottom-section {
    flex: 1;
    padding: 8px 12px;
    border-right: 1px solid var(--dark-border);
    overflow-y: auto;
}

.bottom-section:last-child { border-right: none; }

.bottom-section-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--dark-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    font-size: 11px;
}

.metric-label { color: var(--dark-text-secondary); }

.metric-value {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--dark-text);
}

/* --- Right Sidebar: Causal Timeline (dark) --- */
.sidebar-right {
    width: 280px;
    min-width: 280px;
    background: var(--dark-bg);
    border-left: 1px solid var(--dark-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.timeline-list {
    overflow-y: auto;
    flex: 1;
    padding: 0;
}

.timeline-entry {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(42, 46, 57, 0.5);
    cursor: default;
    transition: background 0.08s;
    font-size: 11px;
}

.timeline-entry:hover { background: var(--dark-hover); }

.timeline-time {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--dark-text-muted);
    margin-right: 6px;
}

.timeline-text {
    color: var(--dark-text-secondary);
}

.timeline-magnitude {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 11px;
}

.timeline-driver {
    font-size: 10px;
    color: var(--dark-text-muted);
    margin-top: 2px;
}

/* ============================
   COLOR UTILITIES
   ============================ */
.c-pos { color: var(--positive) !important; }
.c-neg { color: var(--negative) !important; }
.c-warn { color: var(--warning) !important; }
.c-muted { color: var(--light-text-muted) !important; }
.c-accent { color: var(--accent-gold) !important; }

.bg-pos { background: var(--positive-dim); }
.bg-neg { background: var(--negative-dim); }

/* Dark context overrides for muted */
.workspace .c-muted,
.watchlist-sidebar .c-muted { color: var(--dark-text-muted) !important; }

/* ============================
   KEYBOARD HINT
   ============================ */
.kbd {
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 1px 5px;
    border: 1px solid var(--light-border);
    border-radius: 2px;
    color: var(--light-text-muted);
    background: var(--light-surface);
}

.workspace .kbd {
    border-color: var(--dark-border);
    color: var(--dark-text-muted);
    background: var(--dark-surface);
}

/* ============================
   COMMAND PALETTE (dark overlay)
   ============================ */
.command-palette-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    justify-content: center;
    padding-top: 120px;
}

.command-palette-overlay.open { display: flex; }

.command-palette {
    background: #0a0a0a;
    border: 1px solid #3B82F6;
    border-radius: 12px;
    width: 520px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2), 0 20px 60px rgba(0, 0, 0, 0.6);
    align-self: flex-start;
}

.command-palette input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--dark-border);
    color: var(--dark-text);
    font-family: var(--font-ui);
    font-size: 15px;
    padding: 14px 18px;
    outline: none;
}

.command-palette input::placeholder { color: var(--dark-text-muted); }

.command-results {
    max-height: min(400px, 70vh);
    overflow-y: auto;
}

.command-result {
    padding: 10px 18px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--dark-text);
}

.command-result:hover { background: var(--dark-hover); }

.command-result-title {
    font-weight: 500;
    color: var(--dark-text);
}

.command-result-prob {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
    color: #4ADE80;
}

/* ============================
   SCROLLBAR
   ============================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--light-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--light-text-muted); }

/* Dark scrollbar in dark contexts */
.workspace ::-webkit-scrollbar-thumb,
.watchlist-sidebar ::-webkit-scrollbar-thumb { background: var(--dark-border); }
.workspace ::-webkit-scrollbar-thumb:hover,
.watchlist-sidebar ::-webkit-scrollbar-thumb:hover { background: var(--dark-text-muted); }

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 1200px) {
    .sidebar-right { display: none; }
    .sidebar-left { width: 220px; min-width: 220px; }
    .watchlist-sidebar { display: none; }
    .home-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .sidebar-left { display: none; }
    .bottom-panel { height: auto; flex-wrap: wrap; }
    .bottom-section { min-width: 50%; }
    .home-main-inner { padding: 16px; }
}



/* ============================================
   Auth — nav user state + full-screen login/signup
   ============================================ */

.topbar-user {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 0;
    margin-left: -12px;
}

.topbar-user-name {
    color: var(--dark-text);
    font-size: 12px;
    font-weight: 500;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #d1d4dc;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
.topbar-icon-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
}
.topbar-icon-btn svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.topbar-icon-btn--circle {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
}
.topbar-icon-btn--circle:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}
.topbar-icon-label {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.topbar-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 22px;
    margin-left: 4px;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: #ffffff;
    background: #5ea3fa;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: background 0.12s, transform 0.08s;
    white-space: nowrap;
}
.topbar-cta:hover {
    background: #4d92e8;
    color: #ffffff;
    text-decoration: none;
}
.topbar-cta:active {
    transform: translateY(1px);
}
.topbar-cta:disabled {
    opacity: 0.6;
    cursor: default;
}
/* "Start Free Trial" variant — its label is longer than "Log out", so trim
   the horizontal padding a touch to keep the button from getting too wide. */
.topbar-cta.topbar-user__trial {
    padding-left: 14px;
    padding-right: 14px;
}

/* Upgrade CTA pill — visible only to authed users who are not yet Pro.
   Distinct accent (warm) from the standard Sign-up/Log-out blue so the
   eye lands on it. Sits inline between the account chip and Log-out. */
.topbar-cta.topbar-user__upgrade {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    height: 32px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(217, 119, 6, 0.35);
}
.topbar-cta.topbar-user__upgrade:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

/* Legacy alias retained in case other templates still reference it. */
.topbar-link-btn {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    color: #e5e7eb;
    background: transparent;
    border: 1px solid var(--dark-border);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.topbar-link-btn:hover {
    color: #ffffff;
    background: var(--dark-surface);
    border-color: var(--accent-blue);
    text-decoration: none;
}
.topbar-link-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Full-screen auth layout — hides the regular nav */
body.auth-layout {
    background: #000;
    color: var(--dark-text);
    overflow: hidden;
}
body.auth-layout .topbar,
body.auth-layout .command-palette-overlay {
    display: none !important;
}

.auth-fullscreen {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #000;
    z-index: 1000;
    /* Match the landing-page accent so blue links/buttons in the form
       use the lighter site-wide shade instead of the saturated default
       --accent-blue (#2962ff). */
    --accent-blue: #5ea3fa;
}

/* ── Hero (left panel) ── */
.auth-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 40px 56px;
    overflow: hidden;
    /* Solid black with one soft top-left blue glow — matches the
       landing-page hero treatment (no purple, no teal, no grid pattern).
       Keeps the panel feeling like the rest of the terminal instead of a
       generic gradient SaaS marketing splash. */
    background:
        radial-gradient(ellipse at 8% 12%, rgba(94, 163, 250, 0.18) 0%, transparent 55%),
        #000;
    border-right: 1px solid var(--dark-border);
}

.auth-hero-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 0;
    color: #fff;
    text-decoration: none;
    align-self: flex-start;
    transition: opacity 0.15s ease;
}
.auth-hero-logo:hover { color: #fff; text-decoration: none; opacity: 0.85; }
.auth-hero-logo .auth-logo-img {
    display: block;
    height: 32px;
    width: auto;
}

.auth-hero-body {
    position: relative;
    margin-top: 56px;
    max-width: 520px;
}

.auth-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--dark-text-secondary);
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--dark-border);
    border-radius: 999px;
    margin-bottom: 22px;
}

.auth-hero-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--positive);
    box-shadow: 0 0 0 3px rgba(8, 153, 129, 0.2);
    animation: auth-dot-pulse 2s ease-in-out infinite;
}

@keyframes auth-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(8, 153, 129, 0.2); }
    50%      { box-shadow: 0 0 0 5px rgba(8, 153, 129, 0.08); }
}

.auth-hero-headline {
    font-family: var(--font-ui);
    font-size: 48px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.5px;
    color: #fff;
    margin: 0;
}

/* Mirrors `.landing-headline .gold` — the site's signature blue→white
   accent. Don't reintroduce the purple gradient: it doesn't appear
   anywhere else on the site. */
.auth-hero-accent {
    background: linear-gradient(90deg, #5ea3fa 0%, #87bcfb 40%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.auth-hero-sub {
    margin-top: 18px;
    font-size: 16px;
    color: var(--dark-text-secondary);
    letter-spacing: 0.1px;
    max-width: 440px;
    line-height: 1.55;
}

/* ── Form (right panel) ── */
.auth-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 48px 0;
    /* Soft charcoal lift against the pure-black hero. Matches the
       `.showcase-browser` surface used on the landing page so the auth
       panel feels like another card from the same product. */
    background: #0e0e14;
}

.auth-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    border-radius: 8px;
    transition: color 0.12s, background 0.12s;
}
.auth-close:hover { color: #fff; background: rgba(255, 255, 255, 0.06); text-decoration: none; }

.auth-panel-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
    color: #fff;
    text-decoration: none;
    margin-top: 4px;
    transition: opacity 0.15s ease;
}
.auth-panel-logo:hover { color: #fff; text-decoration: none; opacity: 0.85; }
.auth-panel-logo .auth-logo-img {
    display: block;
    height: 30px;
    width: auto;
}

.auth-panel-inner {
    flex: 1;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 0;
}

.auth-title {
    font-family: var(--font-ui);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
    text-align: center;
    color: #fff;
    margin: 0 0 28px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 11px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--dark-text-secondary);
}
.auth-field > span { font-weight: 500; }
.auth-field > span em {
    font-style: normal;
    color: var(--dark-text-muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.auth-field input {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--dark-text);
    background: #141419;
    border: 1px solid var(--dark-border);
    border-radius: 8px;
    padding: 12px 14px;
    outline: none;
    text-transform: none;
    letter-spacing: normal;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.auth-field input:focus {
    border-color: var(--accent-blue);
    background: rgba(94, 163, 250, 0.05);
    box-shadow: 0 0 0 3px rgba(94, 163, 250, 0.18);
}
.auth-field input::placeholder { color: var(--dark-text-muted); }

.auth-hint {
    font-size: 11px;
    font-family: var(--font-ui);
    color: var(--dark-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.auth-error {
    font-size: 12px;
    color: #ff6b7a;
    background: rgba(242, 54, 69, 0.08);
    border: 1px solid rgba(242, 54, 69, 0.3);
    border-radius: 8px;
    padding: 10px 12px;
}

.auth-submit {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    /* Same `#5ea3fa` primary as `.landing-btn-primary` — keeps the auth
       CTA visually identical to the marketing-site CTA the user just
       clicked through from. */
    background: var(--accent-blue);
    border: none;
    border-radius: 8px;
    padding: 13px 16px;
    cursor: pointer;
    margin-top: 6px;
    transition: background 0.12s, transform 0.08s;
}
.auth-submit:hover { background: #4d92e8; }
.auth-submit:active { transform: translateY(1px); }
.auth-submit:disabled { opacity: 0.6; cursor: default; }

/* "or" divider between the password form and the Google button. */
.auth-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--dark-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.auth-or::before,
.auth-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--dark-border, rgba(220, 224, 232, 0.12));
}
/* Center the Google Identity Services button + give it breathing room. */
.auth-google {
    display: flex;
    justify-content: center;
}

.auth-footer {
    text-align: center;
    font-size: 13px;
    color: var(--dark-text-secondary);
    padding: 20px 48px;
    margin: 0 -48px;
    border-top: 1px solid var(--dark-border);
}
.auth-footer a { color: var(--accent-blue); font-weight: 500; }
.auth-footer a:hover { color: #87bcfb; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .auth-fullscreen { grid-template-columns: 1fr; }
    .auth-hero { display: none; }
    .auth-panel { padding: 24px 28px 0; }
    .auth-panel-inner { max-width: 400px; padding: 16px 0; }
    .auth-footer { padding: 20px 28px; margin: 0 -28px; }
}

@media (max-width: 480px) {
    .auth-panel { padding: 20px 20px 0; }
    .auth-footer { padding: 18px 20px; margin: 0 -20px; }
    .auth-title { font-size: 22px; margin-bottom: 24px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Arbitrage scanner page
   Inherits .screener-shell / .screener-toolbar / .screener-pill / .unp-grid
   from the screener block above. Adds: summary cards, detail panel,
   leg cards, and the dense Type/Edge/Profit cell decorations.
   ────────────────────────────────────────────────────────────────────────── */
.arbitrage-page .topbar { background: var(--scr-bg); }

/* Apply tabular-nums to the whole page so prices/sizes line up vertically
   without forcing a monospace font — same trick the screener uses. */
.arbitrage-page,
.arb-shell {
    font-variant-numeric: tabular-nums;
}

.arb-shell {
    /* Three rows: toolbar (48px), stats strip (auto), grid (1fr).
       Pre-redesign was four rows with a separate tabs section + a
       five-card summary grid; tabs moved into the toolbar as a
       segmented pill control and the cards collapsed into a single
       inline strip to claim ~80px of vertical real estate for the
       table itself. */
    display: grid;
    grid-template-rows: 48px auto minmax(0, 1fr);
    grid-template-columns: 1fr;
    gap: 0;
}
.arb-shell > .arb-toolbar { grid-row: 1; }
.arb-shell > .arb-cards   { grid-row: 2; }
.arb-shell > .arb-main    { grid-row: 3; min-height: 0; }

/* Segmented Live/History control inside the toolbar. The two pills
   share the .screener-group + .screener-pill styling used everywhere
   else; this wrapper just adds a faint group divider on its right
   edge so the tab group reads as a distinct view-switcher rather
   than another filter. */
.arb-tab-group {
    position: relative;
    padding-right: 10px;
    margin-right: 2px;
}
.arb-tab-group::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: var(--scr-border);
}
/* Subtle "this is the actionable view" hint on the Live tab — uses
   the up/positive color when active, mirroring how TradingView uses
   green dots for live-data states. History stays neutral. */
.arb-tab-group .screener-pill[data-tab="live"].is-active {
    box-shadow: inset 0 -2px 0 var(--scr-up);
}

/* Historical-tab leg list — compact stacked chips so a multi-leg event
   sum still fits in a 220px column. Uses the same green/red side colors
   as the live Plan column for visual consistency. */
.arb-history-legs {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 0;
}
.arb-history-leg {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-family: var(--scr-font);
}
.arb-history-leg.is-yes {
    background: rgba(38, 166, 154, 0.18);
    color: #c1ead8;
}
.arb-history-leg.is-no {
    background: rgba(239, 83, 80, 0.18);
    color: #ffd1d4;
}
.arb-history-leg-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.arb-history-leg-px {
    font-weight: 700;
    margin-left: 8px;
    flex-shrink: 0;
}

/* Match the screener: single 48px row, horizontal scroll on overflow
   from .screener-toolbar-left. Pre-redesign this used flex-wrap which
   doubled the row height as filters multiplied; now they scroll
   horizontally like every other TradingView surface. */
.arb-toolbar {
    height: 48px;
    min-height: 48px;
    flex-wrap: nowrap;
}
.arb-toolbar .screener-toolbar-left { gap: 8px; }
.arb-toolbar .screener-toolbar-right { gap: 12px; }

.arb-updated {
    font-size: 12px;
    color: var(--scr-text-muted);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    font-weight: 400;
}

/* Lock toolbar + stats strip to their content height so the grid
   below claims every remaining pixel. */
.arb-toolbar,
.arb-cards {
    flex: 0 0 auto;
}

/* ── Slim inline stats strip (replaces the old five-card grid) ───────
   Reads as a single status line above the table: dim label, bright
   value, dim trailing context, with subtle dot separators between
   stats. Designed to feel like a status bar — visual weight is
   intentionally lower than the toolbar above and far lower than the
   table below. Same IDs the JS already updates. */
.arb-stats-strip {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 6px 16px 8px;
    background: transparent;
    font-family: var(--scr-font);
    font-size: 12px;
    line-height: 1.4;
    color: var(--scr-text-muted);
    border-bottom: 1px solid var(--scr-border-soft);
}
.arb-stat-inline {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    position: relative;
}
/* Dot separator between consecutive stats — drawn as a pseudo-element
   so the markup stays clean. The first stat skips it. */
.arb-stat-inline + .arb-stat-inline::before {
    content: "·";
    color: var(--scr-text-muted);
    opacity: 0.55;
    margin-right: 12px;
    margin-left: -12px;
}
.arb-stat-inline-label {
    color: var(--scr-text-muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.arb-stat-inline-value {
    color: var(--scr-text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.arb-stat-inline-sub {
    color: var(--scr-text-muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
/* Hide an empty sub so it doesn't leave a phantom gap when the JS
   doesn't populate it (e.g. arb-card-total has no current sub). */
.arb-stat-inline-sub:empty { display: none; }
/* Money-positive stats get the up-color so the eye picks them up
   without needing big card chrome. Best edge stays neutral until
   it's worth highlighting; profit and largest pop in green. */
.arb-stat-inline[data-card="profit"] .arb-stat-inline-value,
.arb-stat-inline[data-card="largest"] .arb-stat-inline-value,
.arb-stat-inline[data-card="edge"] .arb-stat-inline-value {
    color: var(--scr-up);
}

@media (max-width: 720px) {
    .arb-stats-strip {
        overflow-x: auto;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .arb-stats-strip::-webkit-scrollbar { display: none; }
}

/* ── Filter strip wrapper ─────────────────────────────────────────────
   On desktop the contained pills + dropdowns must lay out as direct
   children of .screener-toolbar-left's flex (no layout change). On
   mobile (≤700px, see the media block at end of file) this becomes a
   single horizontal-scroll row so all filters fit on one line below
   the search input instead of wrapping into 3+ rows. */
.arb-filter-strip { display: contents; }

/* ── Main grid (full width — detail panel removed) ────────────────────── */
.arb-main {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
    overflow: hidden;
}
.arb-grid-wrap {
    position: relative;
    min-height: 0;
    overflow: hidden;
    border-top: 1px solid var(--scr-border-soft);
}
/* Detail-panel CSS retained but the element is no longer rendered;
   rules harmlessly orphan rather than risking a broken selector. */
.arb-detail { display: none; }

/* ── Empty state ─────────────────────────────────────────────────────── */
.arb-empty {
    position: absolute;
    inset: 48px 16px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    pointer-events: none;
    color: var(--scr-text-muted);
}
.arb-empty[hidden] { display: none; }
.arb-empty-title {
    font-size: 14px;
    color: var(--scr-text);
    margin-bottom: 6px;
}
.arb-empty-body { font-size: 12px; max-width: 540px; }
.arb-empty-filters { color: var(--scr-text-dim); }

/* ── Detail panel ────────────────────────────────────────────────────── */
.arb-detail-empty {
    color: var(--scr-text-muted);
    padding: 32px 8px;
    text-align: center;
}
.arb-detail-empty-title {
    color: var(--scr-text);
    font-size: 13px;
    margin-bottom: 6px;
}
.arb-detail-empty-body { font-size: 11px; }

.arb-detail-head { margin-bottom: 14px; }
.arb-detail-type { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.arb-detail-title {
    font-size: 16px;
    font-weight: 400;
    color: var(--scr-text);
    line-height: 1.3;
    margin-bottom: 6px;
}
.arb-detail-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.arb-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--scr-border-soft);
    border: 1px solid var(--scr-border-soft);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 14px;
}
.arb-stat {
    background: var(--scr-surface);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.arb-stat-label {
    font-size: 11px;
    color: var(--scr-text-muted);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.arb-stat-value {
    font-family: var(--scr-font);
    font-size: 14px;
    font-weight: 400;
    color: var(--scr-text);
}

.arb-section { margin: 14px 0; }
.arb-section-label {
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--scr-text-muted);
    margin-bottom: 8px;
}

.arb-legs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
/* 3+ leg opps fall back to single column (cleanest at narrow detail panel) */
.arb-legs--many { grid-template-columns: 1fr; }
@media (max-width: 1280px) {
    /* Detail panel is fixed-width; below this the arb table contracts and
       the panel still has room for 2 cols. Below that the panel collapses
       entirely (handled in .arb-main media query). */
}
.arb-leg {
    background: var(--scr-surface);
    border: 1px solid var(--scr-border-soft);
    border-radius: 4px;
    padding: 8px 10px;
}
/* Lock-first highlight: leg whose price hasn't moved while the rest
 * of the arb has. The user should lock this leg first because its
 * book is about to catch up to the new equilibrium. */
.arb-leg.is-lagging,
.arb-cell-leg-wrap.is-lagging {
    border-color: #f59e0b;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.3) inset;
}
.arb-leg-lock-first {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--scr-font);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 3px;
    padding: 1px 6px;
    margin-left: auto;
    white-space: nowrap;
}
.arb-leg-vel {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: var(--scr-font);
    font-size: 10px;
    font-weight: 500;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
}
.arb-leg-vel--against {
    color: #f87171;
    background: rgba(248, 113, 113, 0.12);
}
.arb-leg-vel--favor {
    color: #34d399;
    background: rgba(52, 211, 153, 0.12);
}
.arb-leg-row1 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.arb-leg-row2 {
    color: var(--scr-text);
    font-size: 12px;
    line-height: 1.3;
    margin-bottom: 2px;
}
.arb-leg-link { color: var(--scr-text); text-decoration: none; border-bottom: 1px dashed var(--scr-border); }
.arb-leg-link:hover { color: #fff; border-bottom-color: var(--scr-text-dim); }
.arb-leg-sub { color: var(--scr-text-dim); font-size: 11px; margin-bottom: 4px; }
.arb-leg-row3 {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--scr-text-muted);
    font-size: 11px;
}
.arb-leg-meta {}
.arb-leg-mid { color: var(--scr-text-dim); }

.arb-leg-action {
    font-family: var(--scr-font);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    padding: 2px 7px;
    border-radius: 3px;
    text-transform: none;
    border: none;
}
.arb-leg-action--buy {
    background: rgba(38, 166, 154, 0.12);
    color: var(--scr-up);
}
.arb-leg-action--sell {
    background: rgba(239, 83, 80, 0.12);
    color: var(--scr-down);
}
.arb-leg-side {
    font-family: var(--scr-font);
    font-size: 11px;
    color: var(--scr-text-muted);
    letter-spacing: 0;
}
.arb-leg-price {
    margin-left: auto;
    font-family: var(--scr-font);
    font-size: 14px;
    font-weight: 400;
    color: var(--scr-text);
}

/* Walked-fill ladder under each leg (the levels the worker decided to take) */
.arb-leg-ladder-label,
.arb-leg-book-label {
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--scr-text-muted);
    margin: 10px 0 4px;
    font-weight: 400;
}
.arb-leg-ladder {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
}
.arb-leg-ladder-row {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: var(--scr-text-dim);
    padding: 2px 0;
}
.arb-leg-ladder-price { color: var(--scr-text); min-width: 56px; }
.arb-leg-ladder-x { color: var(--scr-text-muted); }
.arb-leg-ladder-qty { color: var(--scr-text-dim); }
.arb-leg-avg-tag {
    font-size: 10px;
    text-transform: none;
    color: var(--scr-text-muted);
    margin-left: 4px;
    letter-spacing: 0;
    font-weight: 400;
}
.arb-leg-meta--strong { color: var(--scr-text); font-weight: 500; }

/* Order-book ladder context */
.arb-leg-book {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--scr-border-soft);
    border-radius: 3px;
    background: var(--scr-bg);
    overflow: hidden;
}
.arb-book-header,
.arb-book-row {
    display: grid;
    grid-template-columns: 80px 1fr 70px;
    gap: 8px;
    align-items: center;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.4;
}
.arb-book-header {
    color: var(--scr-text-muted);
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    border-bottom: 1px solid var(--scr-border-soft);
    background: var(--scr-surface);
}
.arb-book-row { color: var(--scr-text-muted); }
.arb-book-row--ask .arb-book-price { color: var(--scr-down); }
.arb-book-row--bid .arb-book-price { color: var(--scr-up); }
.arb-book-row.is-walked {
    background: rgba(41, 98, 255, 0.07);
    color: var(--scr-text);
}
.arb-book-row.is-walked .arb-book-used {
    color: var(--scr-accent);
    font-weight: 600;
}
.arb-book-qty { text-align: right; color: var(--scr-text-dim); }
.arb-book-used { text-align: right; color: var(--scr-text-muted); }

.arb-rationale {
    font-size: 13px;
    color: var(--scr-text-dim);
    line-height: 1.5;
    background: var(--scr-surface);
    border: 1px solid var(--scr-border-soft);
    border-radius: 4px;
    padding: 12px;
}

.arb-warning {
    font-size: 12px;
    color: #f0b27a;
    line-height: 1.5;
    background: rgba(240, 178, 122, 0.06);
    border: 1px solid rgba(240, 178, 122, 0.25);
    border-radius: 4px;
    padding: 12px;
    margin: 14px 0;
}
.arb-warning strong { color: #f5cba7; }

.arb-detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.arb-link-btn {
    flex: 1;
    text-align: center;
    background: var(--scr-surface-2);
    border: 1px solid var(--scr-border);
    color: var(--scr-text);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    letter-spacing: 0;
    transition: background 120ms ease, border-color 120ms ease;
}
.arb-link-btn:hover { background: var(--scr-surface); border-color: var(--scr-text-dim); }
.arb-link-btn--ghost {
    background: transparent;
    color: var(--scr-text-dim);
}

/* ── Cell decorations ───────────────────────────────────────────────── */
.arb-up   { color: var(--scr-up); }
.arb-down { color: var(--scr-down); }

.arb-badge {
    font-family: var(--scr-font);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    padding: 2px 7px;
    border-radius: 3px;
    text-transform: none;
    border: none;
    line-height: 1.4;
}
.arb-badge--std {
    background: rgba(38, 166, 154, 0.12);
    color: var(--scr-up);
}
.arb-badge--rev {
    background: rgba(239, 83, 80, 0.12);
    color: var(--scr-down);
}
.arb-badge--ghost {
    background: rgba(255, 255, 255, 0.05);
    color: var(--scr-text-dim);
}

.arb-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    line-height: 1.4;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid transparent;
    color: var(--scr-text-dim);
    background: rgba(255, 255, 255, 0.04);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.arb-pill--cat { color: var(--scr-text-dim); }
.arb-pill--ticker {
    color: var(--scr-text-muted);
    font-size: 10px;
}
.arb-pill--ghost { color: var(--scr-text-muted); }

/* Platform attribution pill — flags which exchange(s) the arb's legs
 * sit on. Today everything is Kalshi-only so every row shows a single
 * teal "KALSHI" badge. When a second venue lands (Limitless), opps
 * whose legs span more than one platform render a CROSS badge in
 * amber so the user can immediately tell that filling will require
 * multi-venue auth + more execution care. */
/* Platform pill — now hosts a venue favicon as its content, so per-
   venue color tinting is dropped: the logo carries the brand identity
   and the chip becomes a neutral container. Width auto-sizes to the
   16×16 logo + chip padding (compact, ~22-24px square). Text labels
   are kept only as a fallback for venues we don't have a domain
   mapping for yet (rendered uppercase via the base .arb-pill rule). */
.arb-pill--platform {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    padding: 2px 5px;
    line-height: 1;
    /* Fallback text styling — only visible when _venueLogoUrl returns
       empty (unknown venue). Once we add it to _VENUE_DOMAIN the chip
       flips to the image path. */
    font-weight: 500;
    letter-spacing: 0.04em;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--scr-text-dim);
}
.arb-pill--platform.is-clickable {
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s;
}
.arb-pill--platform.is-clickable:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}
.arb-pill-logo {
    display: block;
    width: 16px;
    height: 16px;
    object-fit: contain;
    /* Slight desaturation so the brand-bright favicons don't read as
       sticker-loud against the surrounding muted UI. Hover restores
       full saturation as a "this is live / clickable" cue. */
    filter: saturate(0.85);
    transition: filter 0.12s;
}
.arb-pill--platform.is-clickable:hover .arb-pill-logo {
    filter: saturate(1);
}

/* ════════════════════════════════════════════════════════════════════════
 * Trade confirm modal — replaces window.confirm() so we can include a
 * "Don't ask again" checkbox. Ships above .trade-modal in z-index so it
 * sits ON TOP of the trade modal (which itself opens at z-index 9000).
 * Mobile-aware: full-bleed layout at ≤480px. ════════════════════════════ */
.trade-confirm-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.72);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    padding: 20px;
}
.trade-confirm {
    background: var(--scr-card, #15171a);
    border: 1px solid var(--scr-border, #23262b);
    border-radius: 10px;
    padding: 22px 22px 18px;
    max-width: 380px;
    width: 100%;
    color: var(--scr-text, #d8dee9);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.trade-confirm-title {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.trade-confirm-stats {
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--scr-border-soft, #23262b);
    border-radius: 6px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
}
.trade-confirm-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    margin: 0;
}
.trade-confirm-row dt {
    color: var(--scr-text-dim, #8a9099);
    margin: 0;
    font-weight: 400;
}
.trade-confirm-row dd {
    color: var(--scr-text);
    margin: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    text-align: right;
}
.trade-confirm-skip {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--scr-text-dim, #8a9099);
    cursor: pointer;
    user-select: none;
    margin-bottom: 16px;
}
.trade-confirm-skip input[type="checkbox"] {
    accent-color: #4a8fd9;
    width: 14px;
    height: 14px;
    cursor: pointer;
}
.trade-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.trade-confirm-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid;
    line-height: 1;
}
.trade-confirm-btn--cancel {
    background: transparent;
    color: var(--scr-text-dim);
    border-color: var(--scr-border, #2a2d33);
}
.trade-confirm-btn--cancel:hover {
    color: var(--scr-text);
    border-color: var(--scr-text-dim);
}
.trade-confirm-btn--ok {
    background: rgba(106, 210, 126, 0.18);
    color: #6ad27e;
    border-color: rgba(106, 210, 126, 0.5);
}
.trade-confirm-btn--ok:hover {
    background: rgba(106, 210, 126, 0.28);
}
.trade-confirm-btn--ok:focus {
    outline: 2px solid rgba(106, 210, 126, 0.6);
    outline-offset: 2px;
}
@media (max-width: 480px) {
    .trade-confirm-overlay { padding: 0; align-items: flex-end; }
    .trade-confirm {
        max-width: 100%;
        border-radius: 12px 12px 0 0;
        padding: 18px 16px 14px;
    }
}

.arb-event-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    overflow: hidden;
    line-height: 1.3;
    padding: 4px 0;
    text-align: left;
}
.arb-event-title {
    color: var(--scr-text);
    font-size: 13px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
.arb-event-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--scr-text-muted);
    overflow: hidden;
    text-align: left;
}
.arb-grid-wrap .ag-cell.arb-cell-event,
.arb-grid-wrap .ag-cell.arb-cell-event .ag-cell-wrapper {
    justify-content: flex-start;
    text-align: left;
}
.arb-grid-wrap .ag-header-cell.arb-header-event .ag-header-cell-label {
    justify-content: flex-start;
}
.arb-event-sub {
    color: var(--scr-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.arb-cell {
    display: flex;
    align-items: center;
    height: 100%;
    font-family: var(--scr-font);
    /* Match Screener's AG-Grid body cells: 14px / weight 200 / --scr-text. */
    font-size: 14px;
    font-weight: 200;
    color: var(--scr-text);
    overflow: hidden;
    min-width: 0;
}
.arb-cell-event {
    font-family: var(--scr-font);
    overflow: hidden;
    min-width: 0;
    width: 100%;
}
/* Numeric cells inherit the body weight 200 from .arb-cell — matches Screener. */

/* Leg A / Leg B cells in the main table.
   3-line layout: action+outcome / size+price / per-level breakdown. */
.arb-cell-leg {
    padding: 8px 12px;
    line-height: 1.4;
    align-items: flex-start !important;
}
.arb-cell-leg-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
.arb-cell-leg-row1 {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
.arb-cell-leg-action {
    font-family: var(--scr-font);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    padding: 2px 7px;
    border-radius: 3px;
    text-transform: none;
    border: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.arb-cell-leg-action--buy {
    background: rgba(38, 166, 154, 0.12);
    color: var(--scr-up);
}
.arb-cell-leg-action--sell {
    background: rgba(239, 83, 80, 0.12);
    color: var(--scr-down);
}

/* Plan column — every numeric value is its own grid cell so the columns
   line up vertically across rows (per-leg ladder splits stay readable).
   Layout per leg, mirrored about the gap between legs:
     left  → contracts · gross · fee · net · ¢
     right → ¢ · net · fee · gross · contracts
   `grid-template-columns` is stamped inline by the renderer based on
   leg count: `repeat(5, 1fr) 12px repeat(5, 1fr)` for the typical
   2-leg arb. */
.arb-cell-plan {
    padding: 6px 8px !important;
    line-height: 1;
    overflow: hidden;
}
.arb-plan {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    height: 100%;
    justify-content: center;
}
.arb-plan-empty {
    font-family: var(--scr-font);
    font-size: 11px;
    color: var(--scr-text-muted, #6a7080);
}
.arb-plan-row {
    display: grid;
    width: 100%;
    height: 24px;
    column-gap: 2px;
}
.arb-plan-spacer {
    /* The 12px slot between legs sits inside the grid template; this
       element exists only so DOM order matches the template. */
    background: transparent;
}
.arb-plan-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 4px;
    font-family: var(--scr-font);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
    border-radius: 3px;
}
/* Visual hierarchy across the 3 per-leg cells:
     total + ¢   → primary (full opacity, bold) — the numbers that decide
                   whether to take the trade
     contracts   → tertiary (most muted — context, not the headline)
   Total-cost cell carries a tooltip with the gross/fee breakdown. */
.arb-plan-cell--qty   { opacity: 0.62; font-weight: 500; }
.arb-plan-cell--total { font-weight: 700; cursor: default; }
.arb-plan-cell--price { font-weight: 700; }

.arb-plan-cell.is-yes {
    background: rgba(38, 166, 154, 0.18);
    color: #c1ead8;
}
.arb-plan-cell.is-no {
    background: rgba(239, 83, 80, 0.18);
    color: #ffd1d4;
}
.arb-plan-cell--empty {
    background: transparent;
    visibility: hidden;
}

/* "Real" / "Est." badge for the Size? column. Real opps (live OB on every
   leg) read in muted green; estimated opps (any leg synthesized from the
   ticker stub because we haven't subscribed to that orderbook) read in
   amber so the user immediately sees they should take the per-level qtys
   with a grain of salt. */
.arb-cell-size-source {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.arb-size-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 3px;
    font-family: var(--scr-font);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: default;
}
.arb-size-badge--real {
    background: rgba(38, 166, 154, 0.12);
    color: var(--scr-up);
    border: 1px solid rgba(38, 166, 154, 0.28);
}
.arb-size-badge--est {
    background: rgba(240, 198, 116, 0.16);
    color: #f0c674;
    border: 1px solid rgba(240, 198, 116, 0.42);
}

/* "Total available" highlight — opportunities that were alive ≥ 8s are
   wrapped in a green pill so they stand out as actionable in the
   history archive. Below the threshold the value is rendered with the
   default text color and no background. */
.arb-duration {
    font-family: var(--scr-font);
    font-variant-numeric: tabular-nums;
}
.arb-duration--actionable {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 3px;
    background: rgba(38, 166, 154, 0.18);
    color: var(--scr-up);
    border: 1px solid rgba(38, 166, 154, 0.32);
    font-weight: 700;
}

/* Plan column custom AG Grid header. The two-row layout (title + sub-titles)
   uses a flex column; the sub-titles use a CSS grid with the SAME fixed
   `grid-template-columns` as the body rows so each label sits directly
   above its column of values.
   `.arb-header-plan` overrides AG Grid's default 17px header-cell padding
   down to 8px so it matches `.arb-cell-plan`'s body padding — that's what
   makes the header columns line up with the body columns. */
.arb-header-plan {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
.arb-header-plan .ag-header-cell-comp-wrapper,
.arb-header-plan .ag-header-cell-label {
    width: 100%;
    padding: 0 !important;
}
.arb-plan-header {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}
.arb-plan-header-title {
    font-family: var(--scr-font);
    font-size: 11px;
    font-weight: 500;
    color: var(--scr-text, #c8cdd6);
    text-align: center;
    margin-bottom: 4px;
    opacity: 0.65;
    letter-spacing: 0.02em;
}
.arb-plan-header-row {
    display: grid;
    width: 100%;
}
.arb-plan-header-cell {
    font-family: var(--scr-font);
    font-size: 9.5px;
    font-weight: 600;
    text-align: center;
    color: var(--scr-text-muted, #6a7080);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.arb-cell-leg-outcome {
    font-family: var(--scr-font);
    font-size: 13px;
    color: var(--scr-text);
    /* Allow wrapping when the outcome name + action chip don't fit on
       one line. Without this, very long outcome strings (e.g. multi-
       word event names) pushed the BUY chip past the cell's left edge
       and AG Grid clipped it; row height already auto-grows to fit
       wrapped content via getRowHeight. */
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
    min-width: 0;
    flex: 1;
}
.arb-cell-leg-size {
    font-size: 12px;
    color: var(--scr-text-dim);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
}
.arb-cell-leg-qty { color: var(--scr-text); font-weight: 400; }
.arb-cell-leg-sep { color: var(--scr-text-muted); margin: 0 2px; }
.arb-cell-leg-price {
    font-family: var(--scr-font);
    color: var(--scr-text);
    font-weight: 400;
}
.arb-cell-leg-avg {
    font-family: var(--scr-font);
    font-size: 10px;
    color: var(--scr-text-muted);
    letter-spacing: 0;
    font-weight: 400;
}
.arb-cell-leg-ladder {
    font-size: 11px;
    color: var(--scr-text-muted);
    /* Multi-level ladder runs 5-15+ "Q @ P¢" segments. Allow it to wrap
       to as many lines as needed — the row height auto-grows via
       getRowHeight scaling with plan-level count, so wrapped ladder
       content never gets clipped. */
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
.arb-cell-leg-more {
    margin-left: 6px;
    font-size: 10px;
    color: var(--scr-accent);
    text-transform: none;
    letter-spacing: 0;
}
.arb-cell-pct {
    margin-left: 6px;
    color: var(--scr-text-muted);
    font-size: 11px;
}

/* ── Row expansion: full-width detail row ────────────────────────────── */
.arb-row-expanded {
    background: rgba(41, 98, 255, 0.04) !important;
    box-shadow: inset 2px 0 0 var(--scr-accent);
}
.arb-row-detail,
.arb-row-detail .ag-cell {
    overflow: hidden !important;
    background: var(--scr-bg) !important;
    cursor: default;
}
.arb-drow {
    padding: 14px 18px;
    font-size: 12px;
    color: var(--scr-text-dim);
    border-bottom: 1px solid var(--scr-border-soft);
}
.arb-drow-legs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 12px;
}
.arb-drow-legs--many {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.arb-drow-leg {
    background: var(--scr-surface);
    border: 1px solid var(--scr-border-soft);
    border-radius: 4px;
    padding: 10px 12px;
    min-width: 0;
}
.arb-drow-leg-header {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
    min-width: 0;
}
.arb-drow-action {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 3px;
    flex-shrink: 0;
}
.arb-drow-action--buy {
    background: rgba(38, 166, 154, 0.12);
    color: var(--scr-up);
}
.arb-drow-action--sell {
    background: rgba(239, 83, 80, 0.12);
    color: var(--scr-down);
}
.arb-drow-outcome {
    color: var(--scr-text);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.arb-drow-leg-stats {
    color: var(--scr-text-dim);
    font-size: 12px;
    margin-bottom: 8px;
}
.arb-drow-sep { color: var(--scr-text-muted); }
.arb-drow-mid {
    color: var(--scr-text-muted);
    font-size: 11px;
    text-decoration: none;
}
.arb-drow-mid:hover { color: var(--scr-text-dim); }
.arb-drow-book-label {
    font-size: 11px;
    color: var(--scr-text-muted);
    margin-bottom: 4px;
}
.arb-drow-book {
    border: 1px solid var(--scr-border-soft);
    border-radius: 3px;
    background: var(--scr-bg);
    overflow: hidden;
}
.arb-drow-bookhead,
.arb-drow-bookrow {
    display: grid;
    grid-template-columns: 90px 1fr 80px;
    gap: 8px;
    padding: 4px 10px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}
.arb-drow-bookhead {
    background: var(--scr-surface);
    color: var(--scr-text-muted);
    font-size: 11px;
    border-bottom: 1px solid var(--scr-border-soft);
}
.arb-drow-bookrow { color: var(--scr-text-muted); }
.arb-drow-bookrow--ask .arb-drow-price { color: var(--scr-down); }
.arb-drow-bookrow--bid .arb-drow-price { color: var(--scr-up); }
.arb-drow-bookrow.is-walked {
    background: rgba(41, 98, 255, 0.08);
    color: var(--scr-text);
}
.arb-drow-bookrow.is-walked .arb-drow-used {
    color: var(--scr-accent);
    font-weight: 500;
}
.arb-drow-qty,
.arb-drow-used { text-align: right; }
.arb-drow-bookempty {
    padding: 12px;
    color: var(--scr-text-muted);
    font-size: 11px;
    text-align: center;
}
.arb-drow-rationale {
    background: var(--scr-surface);
    border: 1px solid var(--scr-border-soft);
    border-radius: 4px;
    padding: 10px 12px;
    color: var(--scr-text-dim);
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 8px;
}
/* PMXT match commentary — same shell as .arb-drow-rationale but with
   a thin left accent so it reads as third-party commentary (from the
   matching engine) rather than our own analysis. */
.arb-drow-match {
    background: var(--scr-surface);
    border: 1px solid var(--scr-border-soft);
    border-left: 2px solid var(--scr-accent);
    border-radius: 4px;
    padding: 10px 12px;
    color: var(--scr-text-dim);
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 8px;
}
.arb-drow-meta-label {
    color: var(--scr-text-muted);
    font-size: 11px;
    margin-right: 4px;
}
.arb-drow-risk {
    color: #f0b27a;
    font-size: 11px;
    line-height: 1.5;
    background: rgba(240, 178, 122, 0.05);
    border: 1px solid rgba(240, 178, 122, 0.20);
    border-radius: 4px;
    padding: 8px 12px;
}

/* Trailing "Open ↗" cell — clickable affordance for the row's Kalshi link */
.arb-cell-open {
    justify-content: center;
    color: var(--scr-text-muted);
    font-size: 14px;
}
.arb-cell-open-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    color: var(--scr-text-muted);
    transition: color 120ms, background 120ms;
}
.arb-grid-wrap .ag-row-hover .arb-cell-open-link {
    color: var(--scr-accent);
    background: rgba(41, 98, 255, 0.10);
}
/* Unverified slug — render the arrow at low opacity so it's still
 * legible as a column placeholder but visually clearly inert. No
 * hover treatment; the click handler short-circuits. */
.arb-cell-open-link--disabled,
.arb-grid-wrap .ag-row-hover .arb-cell-open-link--disabled {
    color: var(--scr-text-muted);
    background: transparent;
    opacity: 0.32;
    cursor: default;
}
.arb-grid-wrap .ag-row { cursor: pointer; }
/* Historical-tab rows aren't clickable (no row-expand flow yet) — show
   the default cursor so we don't promise an interaction we can't honor. */
.arb-shell--history .arb-grid-wrap .ag-row { cursor: default; }

/* ── Grid overlay (Loading… / spinner) ──────────────────────────────── */
.arb-grid-overlay {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--scr-text-muted);
    font-size: 12px;
}
.arb-grid-overlay-spinner {
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--scr-border);
    border-top-color: var(--scr-accent);
    border-radius: 50%;
    animation: unp-grid-spin 700ms linear infinite;
}

/* ── AG Grid theming on this page ───────────────────────────────────── */
.arb-grid-wrap .ag-theme-alpine,
.arb-grid-wrap .ag-root-wrapper,
.arb-grid-wrap .ag-cell,
.arb-grid-wrap .ag-header {
    background: transparent;
}
.arb-grid-wrap .ag-row {
    background: transparent;
    border-bottom: 1px solid var(--scr-border-soft);
    color: var(--scr-text);
}
.arb-grid-wrap .ag-row-hover { background: rgba(255,255,255,0.02); }
.arb-grid-wrap .ag-row-selected { background: rgba(41, 98, 255, 0.08); }
.arb-grid-wrap .ag-header {
    border-bottom: 1px solid var(--scr-border);
    background: var(--scr-bg);
}
.arb-grid-wrap .ag-header-cell-label {
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    color: #9598A2;
    font-weight: 400;
}
.arb-grid-wrap .ag-cell {
    padding-left: 12px;
    padding-right: 12px;
    font-weight: 200;
    font-size: 14px;            /* match Screener's .ag-cell body */
}

/* ════════════════════════════════════════════════════════════════════════
 * Account page — Kalshi credentials form + future profile sections.
 * Trading is gated on saved creds, so the layout has to make connection
 * status obvious at a glance (the "Not connected" / "Connected" pill).
 * ════════════════════════════════════════════════════════════════════════ */
.account-page { background: var(--scr-bg, #0d0e10); color: var(--scr-text, #d8dee9); min-height: 100vh; }
.account-shell { max-width: 720px; margin: 32px auto 80px; padding: 0 24px; }
.account-header { margin-bottom: 28px; }
.account-title { font-size: 22px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
.account-sub { color: var(--scr-text-dim, #8a9099); font-size: 13px; margin: 0; }

.account-section {
    background: var(--scr-card, #15171a);
    border: 1px solid var(--scr-border, #23262b);
    border-radius: 10px;
    padding: 24px 22px;
    margin-bottom: 18px;
}
.account-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.account-section-title { margin: 0; font-size: 15px; font-weight: 600; }
.account-section-desc { color: var(--scr-text-dim, #8a9099); font-size: 12.5px; line-height: 1.5; margin: 4px 0 18px; }

.account-status { font-size: 11px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--scr-border, #2a2d33); color: var(--scr-text-dim, #8a9099); }
.account-status--on  { color: #6ad27e; border-color: rgba(106, 210, 126, 0.4); background: rgba(106, 210, 126, 0.08); }
.account-status--off { color: #d97a7a; border-color: rgba(217, 122, 122, 0.4); background: rgba(217, 122, 122, 0.08); }
.account-status--warn { color: #f3c265; border-color: rgba(243, 194, 101, 0.4); background: rgba(243, 194, 101, 0.08); }

.account-form { display: flex; flex-direction: column; gap: 18px; }
.account-field { display: flex; flex-direction: column; gap: 6px; }
.account-field-label { font-size: 12px; font-weight: 500; color: var(--scr-text); }
.account-field-hint  { font-size: 11.5px; color: var(--scr-text-dim, #8a9099); }
.account-input,
.account-textarea {
    background: var(--scr-bg, #0d0e10);
    border: 1px solid var(--scr-border, #2a2d33);
    color: var(--scr-text, #d8dee9);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: 'IBM Plex Mono', monospace;
    width: 100%;
    box-sizing: border-box;
}
.account-textarea { font-size: 11.5px; line-height: 1.5; resize: vertical; min-height: 180px; }
.account-input:focus,
.account-textarea:focus { outline: none; border-color: #4a8fd9; box-shadow: 0 0 0 2px rgba(74, 143, 217, 0.15); }

.account-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.account-btn {
    padding: 9px 16px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}
.account-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.account-btn--primary { background: #4a8fd9; color: white; border-color: #4a8fd9; }
.account-btn--primary:hover:not([disabled]) { background: #5ea3ee; }
.account-btn--ghost   { background: transparent; color: var(--scr-text-dim); border-color: var(--scr-border, #2a2d33); }
.account-btn--ghost:hover:not([disabled]) { color: #d97a7a; border-color: rgba(217, 122, 122, 0.5); }

.account-msg { font-size: 12px; min-height: 18px; }
.account-msg--ok  { color: #6ad27e; }
.account-msg--err { color: #d97a7a; }
.account-msg--warn { color: #fbbf24; }

/* ── Subscription gate overlay (shared; driven by gate.js) ──────────────────
   The table is padded with blurred skeleton rows, then this overlay blurs the
   whole region and floats a centered CTA card — reads as "locked, more inside"
   rather than a short table with a caption floating in empty space. */
.gate-host { position: relative; }
.gate-overlay {
    position: absolute;
    inset: 0;                       /* cover the entire table region */
    display: flex;
    align-items: center;            /* CTA centered, not bottom-anchored */
    justify-content: center;
    z-index: 20;
    /* Lighter wash than before so the (now brighter) skeleton rows stay
       visible through it — the goal is "blurred rows you can clearly see",
       not "a black box". */
    background: rgba(13, 17, 23, 0.34);
    backdrop-filter: blur(3.5px);
    -webkit-backdrop-filter: blur(3.5px);
}
.gate-overlay-card {
    position: relative;
    text-align: center;
    font-family: var(--font-ui);
    padding: 34px 40px 36px;
    max-width: 460px;
    background: #1f1f1f;                           /* match topbar dropdown panel */
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.gate-overlay-lock {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin-bottom: 18px;
    color: #dbdbdb;                               /* dropdown item text */
    background: #2e2e2e;                           /* dropdown hover gray */
    border-radius: 50%;
}
.gate-overlay-lock svg { width: 24px; height: 24px; }
/* Account-gated control (public page, interaction needs a free account).
   Dimmed + lock cursor; gate.js intercepts the interaction for anon viewers. */
.acct-locked {
    opacity: 0.5;
    cursor: pointer;
    position: relative;
}
.acct-locked:hover { opacity: 0.65; }
/* Blurred placeholder rows behind the overlay (no data — pure shimmer bars).
   Cloned rows keep their real height/colors; bars are only the fallback when
   there are no teaser rows to clone. */
.gate-skel-bar {
    display: block; height: 11px; border-radius: 4px; margin: 9px 8px;
    background: rgba(168, 180, 200, 0.42);
}
.gate-skel:nth-child(even) .gate-skel-bar { background: rgba(168, 180, 200, 0.30); }
/* Vary widths so the rows look like data, not a barcode grid. */
.gate-skel td:nth-child(3n)   .gate-skel-bar { width: 62%; }
.gate-skel td:nth-child(3n+1) .gate-skel-bar { width: 84%; }
.gate-skel td:nth-child(4n)   .gate-skel-bar { width: 50%; }
.gate-overlay-title {
    font-size: 22px; font-weight: 800; color: #ededed;
    letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 9px;
}
.gate-overlay-sub {
    font-size: 14.5px; color: #787b86; line-height: 1.55; margin-bottom: 24px;
}
/* Stack the primary CTA over a quiet secondary link — matches the
   site's hero CTAs and the TradingView upsell layout. */
.gate-overlay-actions {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
/* Neutral white button on the dark card (TradingView-style), matching the
   nav "Sign up" button's dimensions (40px / 0 22px / 8px radius). */
.gate-overlay-cta,
.gate-overlay-cta:link,
.gate-overlay-cta:visited {
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; padding: 0 22px; box-sizing: border-box;
    background: #f5f7fa; color: #15171a;          /* white-ish, dark label */
    font-size: 14px; font-weight: 600; letter-spacing: 0.1px;
    border: none; border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    cursor: default;                              /* no hand pointer */
    transition: background .12s ease, transform .08s ease;
}
/* Force the dark label on hover — a global a:hover rule otherwise recolors
   it to the link blue, which would clash with the white button. */
.gate-overlay-cta:hover,
.gate-overlay-cta:focus { background: #cdd2d9; color: #15171a; text-decoration: none; }
.gate-overlay-cta:active { transform: translateY(1px); }
.gate-overlay-alt,
.gate-overlay-alt:link,
.gate-overlay-alt:visited {
    font-size: 14px; color: #787b86; text-decoration: none;
    cursor: pointer;                              /* hand pointer on hover */
    transition: color .12s ease;
}
.gate-overlay-alt:hover { color: #dbdbdb; text-decoration: none; }
.gate-overlay-alt:hover { color: #bcd2fb; text-decoration: underline; }

/* Trade preferences row (toggleable settings).
 * Two-column layout: label/value text on the left, single action
 * button on the right. Stacks on phones. */
.account-pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.account-pref-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.account-pref-label { font-size: 13px; color: var(--scr-text); font-weight: 500; }
.account-pref-value { font-size: 12px; color: var(--scr-text-dim, #8a9099); }

/* ════════════════════════════════════════════════════════════════════════
 * TRADE column + trade modal.
 * ════════════════════════════════════════════════════════════════════════ */
.arb-cell-trade { padding: 0 8px !important; display: flex; align-items: center; }
.arb-header-trade .ag-header-cell-label { display: none; }

.arb-trade-btn {
    background: #4a8fd9;
    color: white;
    border: 1px solid #4a8fd9;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    width: 100%;
}
.arb-trade-btn:hover:not([disabled]) { background: #5ea3ee; }
.arb-trade-btn.is-disabled,
.arb-trade-btn[disabled] {
    background: rgba(74, 143, 217, 0.10);
    color: rgba(216, 222, 233, 0.45);
    border-color: rgba(74, 143, 217, 0.20);
    /* Pointer cursor (not `not-allowed`) — the button still does
       something when clicked while signed-out: it routes the user
       to /login. Tooltip via the native `title` attribute explains
       the requirement. */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    pointer-events: auto;
}
.arb-trade-lock-icon {
    flex: 0 0 auto;
    color: rgba(216, 222, 233, 0.85);
}
.arb-trade-locked-text {
    color: rgba(216, 222, 233, 0.45);
    letter-spacing: 0.04em;
}

.trade-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex; align-items: center; justify-content: center;
    z-index: 9000;
    padding: 24px;
}
.trade-modal-overlay[hidden] { display: none !important; }
body.trade-modal-open { overflow: hidden; }
.trade-modal {
    background: var(--scr-card, #15171a);
    border: 1px solid var(--scr-border, #23262b);
    border-radius: 12px;
    width: 100%;
    max-width: 1080px;
    max-height: 90vh;
    overflow: auto;
    color: var(--scr-text, #d8dee9);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.trade-modal-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--scr-border, #23262b);
    position: sticky; top: 0; z-index: 1;
    background: var(--scr-card, #15171a);
}
.trade-modal-title { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.trade-modal-sub   { margin: 4px 0 0; font-size: 12px; color: var(--scr-text-dim, #8a9099); }
.trade-modal-close {
    background: transparent; border: 1px solid var(--scr-border, #23262b);
    color: var(--scr-text-dim); width: 32px; height: 32px; border-radius: 6px;
    font-size: 18px; cursor: pointer; line-height: 1;
}
.trade-modal-close:hover { color: white; border-color: #4a8fd9; }
.trade-modal-body { padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 18px; }

.trade-leg {
    border: 1px solid var(--scr-border, #23262b);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--scr-bg, #0d0e10);
}
.trade-leg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.trade-leg-title { margin: 0; font-size: 14px; font-weight: 600; }
.trade-leg-ticker { font-size: 11px; color: var(--scr-text-dim); font-family: 'IBM Plex Mono', monospace; }
.trade-refresh {
    background: transparent; border: 1px solid var(--scr-border, #2a2d33);
    color: var(--scr-text-dim); padding: 4px 10px; border-radius: 6px;
    font-size: 11px; cursor: pointer;
}
.trade-refresh:hover { color: white; border-color: #4a8fd9; }

.trade-ob-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
@media (max-width: 720px) {
    .trade-ob-grid { grid-template-columns: repeat(2, 1fr); }
}
.trade-ob-col {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--scr-border, #23262b);
    border-radius: 6px;
    padding: 8px;
}
.trade-ob-label { font-size: 10.5px; color: var(--scr-text-dim); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.trade-ob-list  { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; }
.trade-ob-head  {
    display: flex; justify-content: space-between;
    color: var(--scr-text-dim); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.04em;
    border-bottom: 1px solid var(--scr-border, #2a2d33);
    padding-bottom: 4px; margin-bottom: 4px;
}
.trade-ob-row { display: flex; justify-content: space-between; padding: 2px 0; }
.trade-ob-row--top { color: white; font-weight: 600; }
.trade-ob-empty { color: var(--scr-text-dim); font-size: 11px; padding: 8px 4px; }

.trade-leg-form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.trade-field { display: flex; flex-direction: column; gap: 4px; }
.trade-field-label { font-size: 11px; color: var(--scr-text-dim); }
.trade-input {
    background: var(--scr-bg, #0d0e10);
    border: 1px solid var(--scr-border, #2a2d33);
    color: var(--scr-text, #d8dee9);
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: 'IBM Plex Mono', monospace;
    width: 110px;
}
.trade-input:focus { outline: none; border-color: #4a8fd9; box-shadow: 0 0 0 2px rgba(74, 143, 217, 0.15); }

.trade-action-row { display: flex; gap: 8px; }
.trade-fire {
    padding: 8px 14px;
    border: 1px solid;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.03em;
}
.trade-fire[disabled] { opacity: 0.6; cursor: progress; }
.trade-fire--yes { background: rgba(106, 210, 126, 0.12); color: #6ad27e; border-color: rgba(106, 210, 126, 0.5); }
.trade-fire--yes:hover:not([disabled]) { background: rgba(106, 210, 126, 0.2); }
.trade-fire--no  { background: rgba(217, 122, 122, 0.12); color: #d97a7a; border-color: rgba(217, 122, 122, 0.5); }
.trade-fire--no:hover:not([disabled])  { background: rgba(217, 122, 122, 0.2); }

.trade-leg-msg { width: 100%; min-height: 16px; font-size: 11.5px; margin-top: 6px; }
.trade-leg-msg--ok  { color: #6ad27e; }
.trade-leg-msg--err { color: #d97a7a; }

/* Trade modal — stale-arb warnings.
 * Per-leg banner appears INSIDE each `.trade-leg` when the fresh
 * orderbook's top diverges from the snapshot's leg price by > 1¢
 * (Kalshi's tick is 1¢ so anything above that is real movement).
 * Modal-level banner is appended at the top of the modal body when
 * any leg is stale — reinforces the per-leg signal so the user
 * doesn't miss it on a multi-leg arb. */
.trade-leg.trade-leg--stale {
    border-color: rgba(217, 122, 122, 0.35);
}
.trade-leg-stale {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(217, 122, 122, 0.08);
    border: 1px solid rgba(217, 122, 122, 0.35);
    color: #e6b8b8;
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 12px;
}
.trade-leg-stale-icon {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1;
    color: #d97a7a;
}
.trade-leg-stale strong { color: #fff; font-weight: 600; }

.trade-modal-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(217, 122, 122, 0.12);
    border: 1px solid rgba(217, 122, 122, 0.45);
    color: #e6b8b8;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.5;
}
.trade-modal-banner-icon {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1;
    color: #d97a7a;
}
.trade-modal-banner strong { color: #fff; font-weight: 600; }

/* Trade modal — live arb status summary.
 * Renders at the top of the modal body, recomputed every time a leg
 * orderbook lands. Side-by-side comparison of snapshot vs current
 * top-of-book per leg, with delta column. Total cost + live edge
 * row. Status banner color-codes whether the arb is live, shrunk,
 * or closed. */
.trade-modal-summary {
    border: 1px solid var(--scr-border, #23262b);
    border-radius: 10px;
    padding: 14px 16px 12px;
    background: rgba(255, 255, 255, 0.02);
    margin-bottom: 4px;
}
.trade-modal-summary--live   { border-color: rgba(106, 210, 126, 0.45); background: rgba(106, 210, 126, 0.05); }
.trade-modal-summary--shrunk { border-color: rgba(217, 167, 80,  0.45); background: rgba(217, 167, 80,  0.06); }
.trade-modal-summary--closed { border-color: rgba(217, 122, 122, 0.45); background: rgba(217, 122, 122, 0.06); }

.trade-modal-summary-status {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600;
    margin-bottom: 10px;
}
.trade-modal-summary--live   .trade-modal-summary-status { color: #6ad27e; }
.trade-modal-summary--shrunk .trade-modal-summary-status { color: #d9a750; }
.trade-modal-summary--closed .trade-modal-summary-status { color: #d97a7a; }
.trade-modal-summary--loading .trade-modal-summary-status { color: var(--scr-text-dim); }
.trade-modal-summary-icon { font-size: 15px; line-height: 1; }

.trade-modal-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: 'IBM Plex Mono', monospace;
}
.trade-modal-summary-table thead th {
    text-align: right;
    color: var(--scr-text-dim);
    font-weight: 500;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    border-bottom: 1px solid var(--scr-border, #2a2d33);
}
.trade-modal-summary-table thead th:first-child { text-align: left; }
.trade-modal-summary-table tbody td {
    padding: 6px 8px;
    color: var(--scr-text);
}
.trade-summary-leg { color: var(--scr-text-dim); font-family: var(--font-sans, sans-serif); font-size: 12px; }
.trade-summary-num { text-align: right; font-variant-numeric: tabular-nums; }
.trade-summary-total td { border-top: 1px solid var(--scr-border, #2a2d33); padding-top: 8px; }
.trade-summary-total .trade-summary-leg { color: var(--scr-text); font-weight: 500; }
.trade-summary-edge .trade-summary-leg  { color: var(--scr-text); font-weight: 600; }
.trade-summary-edge .trade-summary-num  { font-size: 13px; }

/* Trade modal — single-column L2 ladder. Replaces the previous
 * 4-grid (yes_ask / no_ask / yes_bid / no_bid). Asks shown high → low
 * above the spread divider, bids high → low below. Top ask + top bid
 * are highlighted; spread cell sits between them. */
.trade-ob-single {
    margin-bottom: 14px;
    max-width: 420px;
}
.trade-ob-list--l2 {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--scr-border, #23262b);
    border-radius: 6px;
    padding: 6px 8px;
}
.trade-ob-list--l2 .trade-ob-head {
    display: flex; justify-content: space-between;
    color: var(--scr-text-dim);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 4px;
}
.trade-ob-head--asks { border-bottom: 1px solid var(--scr-border, #2a2d33); margin-bottom: 2px; }
.trade-ob-head--bids { border-top: 1px solid var(--scr-border, #2a2d33); margin-top: 2px; }

.trade-ob-list--l2 .trade-ob-row {
    display: flex; justify-content: space-between;
    padding: 2px 4px;
    font-size: 11.5px;
    line-height: 1.4;
    font-family: 'IBM Plex Mono', monospace;
}
.trade-ob-row--ask .trade-ob-price { color: rgba(217, 122, 122, 0.85); }
.trade-ob-row--bid .trade-ob-price { color: rgba(106, 210, 126, 0.85); }
.trade-ob-list--l2 .trade-ob-row--top { font-weight: 600; }
.trade-ob-row--ask.trade-ob-row--top .trade-ob-price { color: #d97a7a; }
.trade-ob-row--bid.trade-ob-row--top .trade-ob-price { color: #6ad27e; }
.trade-ob-list--l2 .trade-ob-qty { color: var(--scr-text); }

.trade-ob-spread {
    text-align: center;
    color: var(--scr-text-dim);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 0;
    border-top: 1px dashed rgba(120, 130, 145, 0.25);
    border-bottom: 1px dashed rgba(120, 130, 145, 0.25);
    margin: 2px 0;
}
.trade-ob-empty--side {
    text-align: center;
    color: var(--scr-text-dim);
    font-size: 10.5px;
    font-style: italic;
    padding: 4px 0;
}

/* Trade modal — leg layout. The two (or more) leg sections sit
 * side-by-side so the user can compare books and prices without
 * scrolling. Wraps to a stack on narrow viewports. */
/* Trade-All toolbar — sits above the per-leg sections in multi-leg
 * opps. One big button + a hint about the sequential-with-halt
 * behavior. Sticky so the user can scroll the leg ladders and still
 * see / click the toolbar without scrolling back up.
 *
 * Color states:
 *   default → blue (primary action)
 *   firing  → blue + spinner-style label change ("Firing leg 1/3…")
 *   ok      → green pulse for ~3.5s after all legs fill
 *   err     → amber for ~4s after a halt, so the user notices the
 *             stop without the button immediately re-arming
 */
.trade-all-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--scr-card, #15171a);
    border: 1px solid var(--scr-border-soft, #23262b);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.trade-all-btn {
    flex: 0 0 auto;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid;
    background: rgba(74, 143, 217, 0.20);
    color: #8ab8e8;
    border-color: rgba(74, 143, 217, 0.55);
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.trade-all-btn:hover:not([disabled]) {
    background: rgba(74, 143, 217, 0.30);
    color: #b3d3f5;
}
.trade-all-btn[disabled] {
    opacity: 0.7;
    cursor: progress;
}
.trade-all-btn.trade-all--ok {
    background: rgba(106, 210, 126, 0.20);
    color: #6ad27e;
    border-color: rgba(106, 210, 126, 0.6);
}
.trade-all-btn.trade-all--err {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.5);
}
.trade-all-hint {
    font-size: 11.5px;
    color: var(--scr-text-dim, #8a9099);
    line-height: 1.4;
}
@media (max-width: 600px) {
    .trade-all-toolbar { flex-direction: column; align-items: stretch; gap: 6px; }
    .trade-all-btn { width: 100%; }
    .trade-all-hint { font-size: 11px; }
}

.trade-confirm-note {
    font-size: 12px;
    color: var(--scr-text-dim, #8a9099);
    line-height: 1.45;
    margin: 0 0 14px;
}

.trade-modal-legs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 14px;
}
@media (max-width: 920px) {
    .trade-modal-legs { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    /* Reclaim every pixel — phones can't afford 24px overlay padding. */
    .trade-modal-overlay { padding: 0; align-items: flex-start; }
    .trade-modal {
        border-radius: 0;
        max-height: 100vh;
        max-height: 100dvh;
        max-width: 100%;
    }
    .trade-modal-head { padding: 14px 14px; }
    .trade-modal-title { font-size: 15px; }
    .trade-modal-body { padding: 12px 12px 18px; gap: 12px; }
    .trade-leg { padding: 12px; }
}
.trade-modal-legs .trade-leg { margin: 0; }
.trade-modal-legs .trade-ob-single { max-width: none; }

/* Trade modal — "Max contracts per leg" cap control. Sits in the
 * modal head between the title block and close button. Value persists
 * in localStorage so the user doesn't re-enter on every modal open;
 * on change, each leg's count input is repopulated with
 * min(arb_size, cap). */
.trade-modal-max {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-right: 12px;
    align-self: flex-start;
}
.trade-modal-max-label {
    font-size: 10.5px;
    color: var(--scr-text-dim, #8a9099);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.trade-input--max {
    width: 130px;
    background: var(--scr-bg, #0d0e10);
    border: 1px solid var(--scr-border, #2a2d33);
    color: var(--scr-text);
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: 'IBM Plex Mono', monospace;
}
.trade-input--max:focus {
    outline: none;
    border-color: #4a8fd9;
    box-shadow: 0 0 0 2px rgba(74, 143, 217, 0.15);
}

/* Trade cap input on the arbs toolbar. Caps the prepop count when
 * the trade modal opens. Persists in localStorage; empty = no cap. */
.arb-trade-cap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px 0 12px;
    height: 32px;
    border: 1px solid var(--scr-border, #2a2d33);
    border-radius: 8px;
    background: var(--scr-bg, #0d0e10);
}
.arb-trade-cap:focus-within {
    border-color: #4a8fd9;
    box-shadow: 0 0 0 2px rgba(74, 143, 217, 0.15);
}
.arb-trade-cap-label {
    font-size: 11px;
    color: var(--scr-text-dim, #8a9099);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.arb-trade-cap-input {
    background: transparent;
    border: 0;
    color: var(--scr-text, #d8dee9);
    font-size: 12.5px;
    font-family: 'IBM Plex Mono', monospace;
    width: 64px;
    padding: 0;
    outline: none;
}
.arb-trade-cap-input::-webkit-outer-spin-button,
.arb-trade-cap-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.arb-trade-cap-input { -moz-appearance: textfield; }

/* Filled-pill "active" state, mirroring .unp-dropdown.is-active so a
 * cap value reads as a chosen filter at a glance. Toggled by JS in
 * _bindTradeCapInput whenever the input has a value. */
.arb-trade-cap.is-active {
    background-color: #e6e8ec;
    border-color: transparent;
    box-shadow: none;
}
.arb-trade-cap.is-active .arb-trade-cap-label {
    color: rgba(19, 23, 34, 0.72);
}
.arb-trade-cap.is-active .arb-trade-cap-input {
    color: #131722;
    font-weight: 600;
}
.arb-trade-cap.is-active:hover { background-color: #dcdfe4; }
.arb-trade-cap.is-active:focus-within {
    border-color: transparent;
    box-shadow: 0 0 0 2px rgba(74, 143, 217, 0.3);
}

/* Trade modal — taker-only fill price display.
 * Replaces the manual price input. Shows the current top ask on the
 * user's side; the Trade button lifts it immediately. */
.trade-field--display {
    display: flex; flex-direction: column; gap: 4px;
}
.trade-fill-price {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: var(--scr-text);
    line-height: 1.3;
}
.trade-fill-price strong { color: #fff; font-weight: 600; }
.trade-fill-price-hint {
    font-size: 10.5px;
    color: var(--scr-text-dim, #8a9099);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 6px;
}
.trade-fill-price.is-muted {
    color: var(--scr-text-dim);
    font-style: italic;
}

/* Sound-alert toggle on the arbs toolbar.
 * Default state: ON. Click flips to OFF (bell-with-slash icon).
 * Persists in localStorage. Browsers block audio until the first user
 * gesture, so the click that turns it ON also unlocks AudioContext +
 * plays a single test ping so the user knows what to expect. */
.arb-sound-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--scr-border, #2a2d33);
    background: var(--scr-bg, #0d0e10);
    color: var(--scr-text, #d8dee9);
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.arb-sound-toggle:hover { border-color: #4a8fd9; }
.arb-sound-toggle .arb-sound-icon { display: inline-flex; line-height: 1; }
.arb-sound-toggle.is-on .arb-sound-icon--off,
.arb-sound-toggle.is-off .arb-sound-icon--on {
    display: none;
}
.arb-sound-toggle.is-on  { color: #6ad27e; border-color: rgba(106, 210, 126, 0.4); }
.arb-sound-toggle.is-off { color: var(--scr-text-dim, #8a9099); }
.arb-sound-toggle.is-on:hover  { border-color: #6ad27e; }

/* AG Grid horizontal-scroll smoothness.
 * The header and body each apply their own translateX during
 * horizontal scroll. Without explicit compositing hints, browsers
 * paint both on the same layer, causing the header to visibly lag
 * the body during fast scroll. `will-change: transform` lifts each
 * onto its own GPU layer so the syncs happen frame-for-frame. */
.ag-header-container,
.ag-center-cols-container,
.ag-floating-top-container,
.ag-floating-bottom-container {
    will-change: transform;
}

/* Kill the elastic overscroll-bounce on AG Grid's horizontal scroll
 * viewports. Without this, when the user trackpad-scrolls past the
 * right edge, the body cells bounce a few pixels further then snap
 * back — but AG Grid's header sync is JS-driven, so the header sits
 * still during the bounce. The mismatch reads as the header "lagging."
 * `overscroll-behavior-x: none` keeps the body locked at the edge so
 * header + body stay 1:1. */
.ag-body-viewport,
.ag-body-horizontal-scroll-viewport,
.ag-center-cols-viewport,
.ag-header-viewport {
    overscroll-behavior-x: none;
}

/* TRADE button status dot. Reflects whether the opp is currently
 * fillable based on the worker's most-recent walk:
 *   live   pulsing green = net edge ≥ 0.5¢ at current Kalshi top
 *   shrunk amber          = positive but < 0.5¢ (likely too thin
 *                           after Kalshi rounds per-leg fees up)
 *   closed red            = net ≤ 0, row auto-dismisses next walk
 *
 * No extra HTTP per row — the worker re-walks from REST every
 * OPP_REWALK_SEC and pushes the result via SSE. The dot just
 * surfaces what's already in the row data. */
.arb-trade-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    margin-right: 6px;
}
.arb-trade-status--live {
    background: #6ad27e;
    animation: arb-trade-pulse-live 1.6s ease-in-out infinite;
}
.arb-trade-status--shrunk {
    background: #d9a750;
}
.arb-trade-status--closed {
    background: #d97a7a;
}

@keyframes arb-trade-pulse-live {
    0%, 100% { box-shadow: 0 0 0 0   rgba(106, 210, 126, 0.55); }
    50%      { box-shadow: 0 0 5px 2px rgba(106, 210, 126, 0.45); }
}

/* Tint the button background subtly so the row state is readable
 * even at a glance, not just on the dot. Stays subtle so it doesn't
 * fight with hover / disabled states. */
.arb-trade-btn.arb-trade-btn--status-shrunk {
    background: rgba(217, 167, 80, 0.12);
    border-color: rgba(217, 167, 80, 0.55);
    color: #f3d28e;
}
.arb-trade-btn.arb-trade-btn--status-shrunk:hover {
    background: rgba(217, 167, 80, 0.20);
}
.arb-trade-btn.arb-trade-btn--status-closed {
    background: rgba(217, 122, 122, 0.12);
    border-color: rgba(217, 122, 122, 0.55);
    color: #efb6b6;
}
.arb-trade-btn.arb-trade-btn--status-closed:hover {
    background: rgba(217, 122, 122, 0.20);
}
/* Disabled state still wins — keep the lock-icon styling readable
 * regardless of underlying status (a user without creds shouldn't
 * see a green pulse on a button they can't click). */
.arb-trade-btn.is-disabled,
.arb-trade-btn[disabled] {
    background: rgba(74, 143, 217, 0.10) !important;
    border-color: rgba(74, 143, 217, 0.20) !important;
    color: rgba(216, 222, 233, 0.45) !important;
}
.arb-trade-btn.is-disabled .arb-trade-status,
.arb-trade-btn[disabled] .arb-trade-status {
    display: none;
}

/* ════════════════════════════════════════════════════════════════════════
 * Mobile card view (≤700px).
 *
 * The AG Grid totals ~2400px of column widths — unusable on a phone even
 * with horizontal scroll because the trade button column scrolls off the
 * screen the moment you pan, and the user has no anchor for which row
 * they're inspecting. Below 700px we hide the grid entirely and render a
 * stacked card per opp instead.
 *
 * Each card is one column wide and stacks: header (event + edge), leg
 * blocks, summary stats, footer. The TRADE button sits in the header
 * pinned right so the user's primary action is always thumb-reachable.
 * ════════════════════════════════════════════════════════════════════════ */
.arb-cards-list {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px 24px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}
@media (max-width: 700px) {
    /* Hide the AG Grid entirely — its scroller fights with the page
       scroll on touch devices and the column widths are unusable. */
    .arb-grid-wrap > #arb-grid { display: none; }
    .arb-cards-list { display: flex; }
    /* Free up vertical real estate by collapsing the toolbar to a
       single-row scroll-strip and tightening the cards block. */
    .arb-shell { grid-template-rows: auto auto auto minmax(0, 1fr); }
}

.arb-card-row {
    background: var(--scr-surface);
    border: 1px solid var(--scr-border-soft);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.arb-card-row.is-closed { opacity: 0.55; }

.arb-card-row-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: flex-start;
}
.arb-card-row-title-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.arb-card-row-title {
    font-size: 14px;
    line-height: 1.25;
    color: var(--scr-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.arb-card-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.arb-card-row-trade {
    flex: 0 0 auto;
}
.arb-card-row-trade .arb-trade-btn {
    width: auto;
    min-width: 78px;
    padding: 7px 12px;
}

.arb-card-row-legs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.arb-card-row-leg {
    /* The leg blocks reuse `.arb-cell-leg-wrap` markup from the desktop
       grid renderer. We just need to make sure they fill the card width
       and don't inherit AG-grid-specific min-widths. */
    background: var(--scr-bg);
    border: 1px solid var(--scr-border-soft);
    border-radius: 6px;
    padding: 8px 10px;
}
/* The desktop grid only renders leg 0 + leg 1; for 3-leg opps, leg 1's
   cell carries a "+N more" badge to hint at hidden legs. The mobile
   card view renders ALL legs (one per stacked block), so the badge is
   redundant and misleading — hide it. */
.arb-card-row-leg .arb-cell-leg-more { display: none; }

.arb-card-row-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    background: var(--scr-bg);
    border: 1px solid var(--scr-border-soft);
    border-radius: 6px;
    padding: 8px 10px;
}
.arb-card-row-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.arb-card-row-stat-label {
    font-size: 10px;
    color: var(--scr-text-muted);
    text-transform: none;
    letter-spacing: 0;
}
.arb-card-row-stat-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--scr-text);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.arb-card-row-stat-value.is-up { color: var(--scr-up); }

.arb-card-row-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: var(--scr-text-muted);
}

/* Mobile layout (≤700px). The desktop toolbar piles 3 rows of pills +
   2 rows of dropdowns + a status row + 5 summary cards in a 2×3 grid —
   ~750 px before the first arb opp on a phone. Two big changes recover
   most of that:

   1. Filter strip → single horizontal-scroll row instead of wrapping
      into 3+ stacked rows. The .arb-filter-strip wrapper is
      `display:contents` on desktop (no layout effect) and a nowrap
      flex container on mobile so all controls stay on one line and
      the user swipes to reach the ones offscreen.
   2. Summary cards → horizontal-scroll strip with 138 px cards instead
      of a 2×3 grid (~500 px tall) — saves ~420 px.

   Also: hard-cap document width with `overflow-x:hidden` on body/shell
   so any unforeseen overflow can never produce a horizontal page
   scrollbar, hide low-value-on-mobile controls (trade-cap, group
   dividers, tab descriptors), and tighten tab/sound/count metrics. */
@media (max-width: 700px) {
    body.arbitrage-page,
    body.arbitrage-page .screener-shell,
    body.arbitrage-page .arb-shell {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Tabs: drop the descriptor sub-label, tighter padding. */
    .arbitrage-page .arb-tabs { padding: 8px 12px 0; gap: 4px; }
    .arbitrage-page .arb-tab { padding: 6px 10px; }
    .arbitrage-page .arb-tab-sub { display: none; }

    /* Toolbar: three logical rows — search, filter strip, status. */
    .arbitrage-page .arb-toolbar {
        flex-direction: column;
        align-items: stretch;
        padding: 6px 12px;
        gap: 6px;
        row-gap: 6px;
        min-height: 0;
        max-width: 100%;
    }
    .arbitrage-page .arb-toolbar .screener-toolbar-left {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex-wrap: wrap;
        overflow: visible;
        gap: 6px;
    }
    .arbitrage-page .arb-toolbar .screener-toolbar-right {
        width: 100%;
        min-width: 0;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Search: full-width row of its own. Desktop's focus-grow rule
       (width: 360px) is useless on a 360-px phone; pin to 100%. */
    .arbitrage-page .arb-toolbar .screener-search {
        flex: 1 0 100%;
        width: 100%;
    }
    .arbitrage-page .arb-toolbar .screener-input,
    .arbitrage-page .arb-toolbar .screener-input:focus {
        width: 100%;
        height: 36px;
        font-size: 14px;
    }

    /* Filter strip: single horizontal-scroll row. -webkit-overflow-
       scrolling:touch keeps the momentum-scroll on iOS. */
    .arbitrage-page .arb-filter-strip {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .arbitrage-page .arb-filter-strip::-webkit-scrollbar { display: none; }
    /* Direct children must not shrink or they collapse into the
       scroll viewport instead of forming the strip. */
    .arbitrage-page .arb-filter-strip > * { flex: 0 0 auto; }
    /* Pill groups stay horizontal — the prior mobile block had set
       these to flex-wrap:wrap which produced one-pill-per-row stacks
       inside the scroll strip. Force nowrap and a sane min-width. */
    .arbitrage-page .arb-filter-strip .screener-group {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        min-width: 0;
        max-width: none;
    }
    .arbitrage-page .arb-filter-strip .screener-pill,
    .arbitrage-page .arb-filter-strip .screener-select,
    .arbitrage-page .arb-filter-strip .screener-ms-trigger {
        height: 34px;
        font-size: 13px;
        padding: 0 10px;
    }
    .arbitrage-page .arb-filter-strip .screener-divider { display: none; }
    .arbitrage-page .arb-toolbar .arb-trade-cap { display: none; }

    /* Right cluster: compact, single-row alignment. */
    .arbitrage-page .arb-toolbar .arb-sound-toggle {
        height: 32px;
        padding: 0 10px;
        font-size: 12px;
    }
    .arbitrage-page .arb-toolbar .arb-updated,
    .arbitrage-page .arb-toolbar .screener-count {
        font-size: 11px;
    }

    /* Summary cards: horizontal-scroll strip instead of 2×3 grid. */
    .arbitrage-page .arb-cards {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        grid-template-columns: none;
        gap: 6px;
        padding: 0 12px 6px;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .arbitrage-page .arb-cards::-webkit-scrollbar { display: none; }
    .arbitrage-page .arb-card {
        flex: 0 0 138px;
        min-width: 138px;
        padding: 8px 10px;
        gap: 2px;
    }
    .arbitrage-page .arb-card-label { font-size: 10px; }
    .arbitrage-page .arb-card-value { font-size: 17px; line-height: 1.15; }
    .arbitrage-page .arb-card-sub { font-size: 10px; }

    /* Mobile card list — leg blocks with long titles must not push
       the row container past the viewport. */
    .arbitrage-page .arb-cards-list { max-width: 100%; }
    .arbitrage-page .arb-card-row { min-width: 0; max-width: 100%; }
    .arbitrage-page .arb-card-row-head,
    .arbitrage-page .arb-card-row-stats,
    .arbitrage-page .arb-card-row-foot { min-width: 0; }
    .arbitrage-page .arb-card-row-title-wrap,
    .arbitrage-page .arb-card-row-stat { min-width: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
 * Refills page — per-event stream of refill detections.
 *
 * Shares the .screener-shell / .arb-toolbar / .arb-stats-strip chrome
 * with the screener and arb pages so the three pages read as siblings.
 * Only the table itself is new: a tight typographic stream rather
 * than an AG Grid, since the event stream is short-lived and the
 * filter set is small enough that server-side filter + simple HTML
 * table is the right tool.
 * ═══════════════════════════════════════════════════════════════════════ */
.refills-shell {
    /* Same three-row grid as arb-shell: toolbar | stats strip | main */
    display: grid;
    grid-template-rows: 48px auto minmax(0, 1fr);
    grid-template-columns: 1fr;
    gap: 0;
}
.refills-shell > .refills-toolbar { grid-row: 1; }
.refills-shell > .arb-cards       { grid-row: 2; }
.refills-shell > .refills-main    { grid-row: 3; min-height: 0; }

.refills-toolbar {
    height: 48px;
    min-height: 48px;
    flex-wrap: nowrap;
}
.refills-toolbar .screener-toolbar-left { gap: 8px; }
.refills-toolbar .screener-toolbar-right { gap: 12px; }

.refills-main {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
    overflow: hidden;
}
.refills-grid-wrap {
    position: relative;
    min-height: 0;
    overflow: hidden;
    border-top: 1px solid var(--scr-border-soft);
}
.refills-table-wrap {
    height: 100%;
    overflow: auto;
    background: var(--scr-bg);
}

/* Refills-table chrome aligned with the Screener page's AG-Grid theme so the
   Liquidity, Walls and Stocks pages (all `.refills-table` users) read identically
   to the Screener: TV font stack at 14px / 400 headers (#9598A2, no uppercase),
   14px / 200 body cells (#D1D4DC, 1.4 line-height), 1px row dividers in the
   Screener border color, hover swap to --scr-row-hover. Per-page overrides for
   specific cell types (e.g. .stk-prob centering) still apply on top. */
.refills-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--scr-font);
    font-size: 13px;
    color: var(--scr-text);
    font-variant-numeric: tabular-nums;
}
.refills-table thead th {
    position: sticky;
    top: 0;
    background: var(--scr-bg);
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    color: #9598A2;
    padding: 2px 12px;
    border-top: 1px solid var(--scr-border);
    border-bottom: 1px solid var(--scr-border);
    /* Subtle always-visible vertical divider between header cells so the
       table's column boundaries are legible. Same border color as the
       row dividers. Last column drops it to avoid a double line with the
       wrapper's right edge. */
    border-right: 1px solid var(--scr-border);
    z-index: 1;
}
.refills-table thead th:last-child { border-right: none; }
.refills-table tbody td {
    font-size: 14px;
    font-weight: 200;
    line-height: 1.4;
    padding: 4px 11px;
    border-bottom: 1px solid var(--scr-border);
    vertical-align: middle;
}
.refills-table tbody tr:hover { background: var(--scr-row-hover); }

.rfl-col-time    { width: 80px; color: var(--scr-text-muted); white-space: nowrap; }
.rfl-col-market  { min-width: 240px; max-width: 420px; }
.rfl-col-side    { width: 64px; }
.rfl-col-num     { width: 90px; text-align: right; }
.rfl-col-now     { width: 100px; text-align: right; white-space: nowrap; }
.rfl-col-trigger { width: 120px; }

/* Live indicator — pulsing green dot signaling fresh data flow.
   Goes yellow at 30s stale, muted-grey beyond 2min (worker likely
   down). Class toggling driven by JS on every poll. */
.rfl-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--scr-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--scr-up);
    text-transform: uppercase;
    margin-right: 4px;
}
.rfl-live-dot {
    width: 8px;
    height: 8px;
    background: var(--scr-up);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(38, 166, 154, 0.6);
    animation: rfl-pulse 1.8s ease-in-out infinite;
}
.rfl-live.is-stale                  { color: #eab308; }
.rfl-live.is-stale .rfl-live-dot    { background: #eab308; box-shadow: none; animation: none; }
.rfl-live.is-dead                   { color: var(--scr-text-muted); }
.rfl-live.is-dead .rfl-live-dot     { background: var(--scr-text-muted); box-shadow: none; animation: none; }
@keyframes rfl-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(38, 166, 154, 0.6); }
    50%      { opacity: 0.55; box-shadow: 0 0 0 4px rgba(38, 166, 154, 0); }
}

/* Market title as a link to the detail page — keep the resting
   look identical to the non-link variant so the table doesn't
   underline-pop on every row; hover-only underline for the
   "this is clickable" cue. */
.rfl-mkt-link {
    color: var(--scr-text);
    text-decoration: none;
    cursor: pointer;
    display: block;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-weight: 500;
}
.rfl-mkt-link:hover { color: #ffffff; text-decoration: underline; }

/* 24h-volume chip under the subtitle — supplemental context for
   sizing up market activity beyond the moment of this refill. */
.rfl-vol-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--scr-text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--scr-border-soft);
}

/* "Now" cell — compact "54/55¢" with optional ▲/▼ arrow showing
   that the market has moved past the refill price by ≥0.5¢. */
.rfl-now-bid  { color: var(--scr-up); font-weight: 500; }
.rfl-now-ask  { color: var(--scr-down); font-weight: 500; }
.rfl-now-sep  { color: var(--scr-text-muted); margin: 0 1px; }
.rfl-now-unit { color: var(--scr-text-muted); font-size: 11px; margin-left: 1px; }
.rfl-now-arrow {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
}
.rfl-now-arrow--up   { color: var(--scr-up); }
.rfl-now-arrow--down { color: var(--scr-down); }

.rfl-mkt-title {
    color: var(--scr-text);
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.rfl-mkt-sub {
    margin-top: 2px;
    font-size: 11px;
    color: var(--scr-text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.rfl-ticker {
    display: inline-block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--scr-text-muted);
    font-family: var(--font-mono);
}
/* Muted em-dash for numeric cells where 0 wouldn't carry information
   (e.g. refill_size on a failed refill — the detector ran; nothing
   arrived). Plain color tweak — not the row-level status accent
   (which was the wrong class to apply to an inline element). */
.rfl-muted { color: var(--scr-text-muted); }
.rfl-sub {
    color: var(--scr-text-muted);
    font-size: 11px;
    margin-left: 4px;
}

/* Side pill — YES (green) / NO (red) consistent with the rest of the app */
.rfl-side {
    display: inline-block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1;
}
.rfl-side--yes { color: #f3f4f6; background: #16a34a; }
.rfl-side--no  { color: #f3f4f6; background: #ef4444; }

/* Trigger pill — small chip showing whether this refill was a sweep
   (and how many levels), or just a single-level take. */
.rfl-trigger {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 2px 7px;
    border-radius: 3px;
    color: var(--scr-text-muted);
    background: transparent;
    border: 1px solid var(--scr-border-soft);
}
.rfl-trigger--sweep {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.35);
}

/* Status colors applied to the WHOLE row — left-border accent stripe so
   the eye can scan refill outcomes vertically without reading each
   ratio + lag pair. */
.rfl-status {
    box-shadow: inset 3px 0 0 0 transparent;
}
.rfl-status--full    { box-shadow: inset 3px 0 0 0 #16a34a; }
.rfl-status--partial { box-shadow: inset 3px 0 0 0 #eab308; }
.rfl-status--failed  { box-shadow: inset 3px 0 0 0 #ef4444; }
.rfl-status--failed td .rfl-col-num { color: var(--scr-text-muted); }

/* ═══════════════════════════════════════════════════════════════════════
   Cross-Venue live price tracker (/crossvenue)
   Master list (left) + side-by-side venue detail (right). Reuses
   .screener-toolbar / .screener-pill / .screener-select / .trade-modal.
   ═══════════════════════════════════════════════════════════════════════ */
.xv-shell { display: flex; flex-direction: column; height: calc(100vh - 52px); }
.xv-toolbar { flex: 0 0 auto; }
.xv-live-dot { color: #4a4a5e; font-size: 11px; margin-right: 8px; transition: color .2s; }
.xv-live-dot.is-live { color: var(--positive); }
.xv-link { color: var(--accent-blue); }

/* venue filter pills — "All / Kalshi / Polymarket / …", each badged with how
   many profitable bets it has. Click a venue → only that venue's bets. */
.xv-venue-group { display: flex; align-items: center; gap: 4px; }
.xv-vbtn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding: 0 9px 0 6px;
    background: transparent; border: 1px solid transparent; border-radius: 6px;
    color: var(--dark-text-secondary); font-size: 12px; font-weight: 500;
    cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s;
}
.xv-vbtn:hover { background: #2e2e2e; color: var(--dark-text); }
.xv-vbtn.is-active { background: #2e2e2e; border-color: #2e2e2e; color: #fff; }
.xv-vbtn-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; border-radius: 50%;
    font-size: 10px; font-weight: 700; color: #06121a; flex: 0 0 auto;
}
.xv-vbtn-ic--all { background: linear-gradient(135deg, #f23645, #eab308 55%, #089981); color: #06121a; }
.xv-vbtn-ic--kalshi { background: #00d1b2; }
.xv-vbtn-ic--polymarket { background: #4d6bf5; color: #fff; }
.xv-vbtn-ic--limitless { background: #8b5cf6; color: #fff; }
.xv-vbtn-ic--myriad { background: #f59e0b; }
.xv-vbtn-l { line-height: 1; }
.xv-vbtn-n {
    min-width: 16px; padding: 0 4px; height: 15px; line-height: 15px; text-align: center;
    background: rgba(255,255,255,.08); border-radius: 8px;
    font-size: 10px; font-variant-numeric: tabular-nums; color: var(--dark-text-secondary);
}
.xv-vbtn.is-active .xv-vbtn-n { background: rgba(41,98,255,.3); color: #cdd8ff; }

/* highlight the chip of the venue currently being filtered */
.xv-chip.is-focused { border-color: var(--accent-blue); box-shadow: 0 0 0 1px rgba(41,98,255,.35); }

/* venue brand logos (replace the textual venue names). Square favicons,
   rounded into an app-icon tile. Sized per context. */
.xv-logo { display: inline-block; flex: 0 0 auto; border-radius: 4px; object-fit: contain; vertical-align: middle; }
.xv-logo-mono { display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #06121a; line-height: 1; }
.xv-vbtn-logo { width: 16px; height: 16px; }
.xv-chip-logo { width: 13px; height: 13px; }
.xv-vc-logo   { width: 20px; height: 20px; }
/* logo-only venue pills don't need the left text inset */
.xv-vbtn:not(:has(.xv-vbtn-l)) { padding-left: 7px; }
.xv-chip { padding-left: 4px; }

.xv-main { flex: 1 1 auto; display: flex; min-height: 0; gap: 1px; background: var(--dark-border); }
.xv-list-wrap { flex: 1 1 60%; min-width: 0; display: flex; flex-direction: column; background: var(--dark-bg); overflow: hidden; }
.xv-detail { position: relative; flex: 1 1 40%; min-width: 320px; max-width: 560px; background: #0a0b0e; overflow-y: auto; }
.xv-detail-close {
    position: absolute; top: 10px; right: 12px; z-index: 5;
    width: 26px; height: 26px; padding: 0; line-height: 24px; text-align: center;
    background: rgba(255,255,255,.04); border: 1px solid var(--dark-border); border-radius: 6px;
    color: var(--dark-text-secondary); font-size: 18px; cursor: pointer; transition: background .12s, color .12s;
}
.xv-detail-close:hover { background: rgba(255,255,255,.1); color: var(--dark-text); }

/* list header + rows — typography aligned with Screener: TV font stack, 14px
   normal-case headers (#9598A2 / weight 400) and 14px body (weight 200 / --scr-text).
   The multi-line row layout (title + category subline + venue chips) is preserved;
   only the typographic tokens are swapped to match. */
.xv-list-head, .xv-row {
    display: grid;
    grid-template-columns: minmax(180px, 2.2fr) minmax(160px, 2fr) 64px 96px 90px 36px;
    align-items: center; gap: 10px; padding: 0 14px;
    font-family: var(--scr-font);
}
.xv-list-head {
    height: 30px; flex: 0 0 auto;
    border-top: 1px solid var(--scr-border);
    border-bottom: 1px solid var(--scr-border);
    font-size: 14px; text-transform: none; letter-spacing: 0;
    color: #9598A2; font-weight: 400;
    background: var(--scr-bg);
}
.xv-list { flex: 1 1 auto; overflow-y: auto; }
.xv-row {
    min-height: 50px; border-bottom: 1px solid var(--scr-border);
    cursor: pointer; transition: background .12s;
    font-size: 14px; font-weight: 200; color: var(--scr-text);
}
.xv-row:hover { background: var(--scr-row-hover); }
.xv-row.is-selected { background: var(--scr-row-hover); box-shadow: inset 2px 0 0 0 var(--scr-accent); }
.xv-row-title { font-size: 14px; font-weight: 200; color: var(--scr-text); line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.xv-row-cat { font-size: 12px; color: #9598A2; margin-top: 2px; text-transform: capitalize; }

/* venue chips */
.xv-col-venues { display: flex; flex-wrap: wrap; gap: 4px; }
.xv-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px;
    border: 1px solid var(--dark-border); border-radius: 4px; font-size: 11px;
    background: rgba(255,255,255,.02);
}
.xv-chip-v { color: var(--dark-text-secondary); font-size: 9.5px; text-transform: uppercase; }
.xv-chip-p { color: var(--dark-text); font-variant-numeric: tabular-nums; }
.xv-chip.is-stale { opacity: .45; }
.xv-chip.is-edge { border-color: var(--positive); }              /* YES cheap here — Buy YES */
.xv-chip.is-edge .xv-chip-p { color: var(--positive); }
.xv-chip.is-sell-edge { border-color: #eab308; }                  /* YES rich here — Buy NO */
.xv-chip.is-sell-edge .xv-chip-p { color: #eab308; }

.xv-col-true { font-size: 13px; font-weight: 600; color: var(--dark-text); font-variant-numeric: tabular-nums; }
.xv-col-edge { display: flex; flex-direction: column; line-height: 1.1; }
.xv-edge-pos { color: var(--positive); font-weight: 600; font-size: 12.5px; }
.xv-edge-neg { color: var(--negative); font-size: 12.5px; }
.xv-edge-flat { color: var(--dark-text-secondary); font-size: 12.5px; }
.xv-edge-sub { font-size: 9.5px; color: var(--dark-text-secondary); text-transform: capitalize; }

/* confidence bar */
.xv-col-conf { display: flex; align-items: center; gap: 6px; }
.xv-conf-bar { display: inline-block; width: 46px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.xv-conf-bar--lg { width: 120px; height: 7px; }
.xv-conf-fill { display: block; height: 100%; background: linear-gradient(90deg, #f23645, #eab308 55%, #089981); }
.xv-conf-num { font-size: 10px; color: var(--dark-text-secondary); font-variant-numeric: tabular-nums; }

.xv-pin-btn { background: none; border: none; color: #4a4a5e; font-size: 16px; cursor: pointer; padding: 2px; line-height: 1; }
.xv-pin-btn:hover { color: var(--accent-gold); }
.xv-pin-btn.is-pinned { color: var(--accent-gold); }

.xv-empty { padding: 48px 24px; text-align: center; }
.xv-empty-title { font-size: 14px; color: var(--dark-text); margin-bottom: 6px; }
.xv-empty-body { font-size: 12px; color: var(--dark-text-secondary); }

/* detail panel */
.xv-detail-empty { padding: 40px 22px; font-size: 12.5px; color: var(--dark-text-secondary); text-align: center; }
.xv-detail-loading { padding: 30px; color: var(--dark-text-secondary); font-size: 12px; }
.xv-detail-body { padding: 16px 18px 28px; }
.xv-d-head { border-bottom: 1px solid var(--dark-border); padding-bottom: 12px; margin-bottom: 12px; padding-right: 30px; }
.xv-d-title { font-size: 15px; font-weight: 600; color: var(--dark-text); line-height: 1.3; }
.xv-d-cat { font-size: 11px; color: var(--dark-text-secondary); margin-top: 4px; text-transform: capitalize; }
.xv-d-truebar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 16px; }
.xv-d-true { display: flex; flex-direction: column; }
.xv-d-true-label, .xv-d-conf-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--dark-text-secondary); }
.xv-d-true-val { font-size: 24px; font-weight: 700; color: var(--dark-text); font-variant-numeric: tabular-nums; }
.xv-d-conf { display: flex; flex-direction: column; gap: 4px; }
.xv-d-best { font-size: 11.5px; color: var(--dark-text-secondary); }
.xv-d-best strong { color: var(--positive); }

.xv-d-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.xv-vc { border: 1px solid var(--dark-border); border-radius: 7px; padding: 12px; background: rgba(255,255,255,.015); }
.xv-vc.is-stale { opacity: .55; }
.xv-vc-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.xv-vc-venue { font-size: 12px; font-weight: 600; color: var(--dark-text); }
.xv-vc-fresh { font-size: 9px; color: var(--positive); text-transform: uppercase; }
.xv-vc-stale { font-size: 9px; color: var(--dark-text-secondary); text-transform: uppercase; }
.xv-vc-feeest, .xv-vc-qual { font-size: 9px; color: var(--dark-text-secondary); border: 1px solid var(--dark-border); border-radius: 3px; padding: 0 3px; }
.xv-vc-warn { color: var(--negative); border-color: var(--negative); }
.xv-vc-mid { font-size: 26px; font-weight: 700; color: var(--dark-text); font-variant-numeric: tabular-nums; line-height: 1; }
.xv-vc-bbo { display: flex; gap: 10px; font-size: 11px; color: var(--dark-text-secondary); margin-top: 4px; font-variant-numeric: tabular-nums; }
.xv-vc-depth { font-size: 10px; color: var(--dark-text-muted); margin-top: 2px; }
.xv-vc-edge { margin-top: 8px; font-size: 12px; font-weight: 600; }
.xv-vc-edge span { font-weight: 400; font-size: 10px; }
.xv-vb-pos { color: var(--positive); }
.xv-vb-neg { color: var(--negative); }
.xv-vb-flat { color: var(--dark-text-secondary); }
.xv-vc-actions { margin-top: 10px; }
.xv-vc-trade, .xv-vc-deeplink {
    display: inline-block; width: 100%; text-align: center; padding: 7px 10px; border-radius: 5px;
    font-size: 11.5px; font-weight: 600; cursor: pointer; box-sizing: border-box;
}
.xv-vc-trade { background: var(--positive); color: #021; border: none; }
.xv-vc-trade:hover { filter: brightness(1.1); }
.xv-vc-trade.is-locked { background: rgba(255,255,255,.05); color: var(--dark-text-secondary); border: 1px solid var(--dark-border); }
.xv-vc-deeplink { background: rgba(41,98,255,.12); color: var(--accent-blue); border: 1px solid rgba(41,98,255,.3); }
.xv-vc-deeplink:hover { background: rgba(41,98,255,.2); }
.xv-vc-deeplink.is-disabled { opacity: .4; pointer-events: none; }
.xv-d-foot { margin-top: 16px; font-size: 10.5px; color: var(--dark-text-muted); line-height: 1.5; }

/* trade modal body */
.xv-trade-modal .trade-modal-body { padding: 16px 20px 20px; }
.xv-tr-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.xv-tr-row label { font-size: 12px; color: var(--dark-text-secondary); }
.xv-tr-row select, .xv-tr-row input {
    background: #0a0b0e; border: 1px solid var(--dark-border); color: var(--dark-text);
    border-radius: 5px; padding: 6px 8px; font-size: 13px; width: 130px;
}
.xv-tr-submit { width: 100%; padding: 10px; background: var(--positive); color: #021; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 4px; }
.xv-tr-submit:hover { filter: brightness(1.1); }
.xv-tr-submit:disabled { opacity: .6; cursor: default; }
.xv-tr-msg { font-size: 12px; min-height: 16px; margin-bottom: 8px; color: var(--dark-text-secondary); }
.xv-tr-msg.is-ok { color: var(--positive); }
.xv-tr-msg.is-err { color: var(--negative); }
.xv-tr-note { font-size: 10.5px; color: var(--dark-text-muted); margin-top: 10px; line-height: 1.5; }

/* responsive: stack detail under list */
@media (max-width: 860px) {
    .xv-main { flex-direction: column; }
    .xv-detail { max-width: none; min-width: 0; flex: 0 0 auto; max-height: 55vh; border-top: 1px solid var(--dark-border); }
    .xv-list-head { display: none; }
    .xv-row { grid-template-columns: 1fr auto auto; grid-template-areas: "m t e" "v v c"; row-gap: 4px; padding: 8px 12px; }
    .xv-col-market { grid-area: m; } .xv-col-true { grid-area: t; } .xv-col-edge { grid-area: e; }
    .xv-col-venues { grid-area: v; } .xv-col-conf { grid-area: c; } .xv-col-pin { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * ORDER WALLS PAGE
 * Reuses the .screener-shell / .refills-* table chrome (the page reads as
 * a sibling of Screener / Arbitrage / Refills). Only the wall-specific
 * cells + the ladder drawer are new. Support = green (YES bids / buyers
 * defending a floor); resistance = red (YES asks / sellers capping).
 * ═══════════════════════════════════════════════════════════════════════ */
.walls-shell { /* same three-row grid as refills-shell */
    display: grid;
    grid-template-rows: 48px auto minmax(0, 1fr);
    grid-template-columns: 1fr;
    gap: 0;
}
.walls-shell > .walls-toolbar { grid-row: 1; }
.walls-shell > .arb-cards     { grid-row: 2; }
.walls-shell > .walls-main    { grid-row: 3; min-height: 0; }
.walls-toolbar { height: 48px; min-height: 48px; flex-wrap: nowrap; }
.walls-toolbar .screener-toolbar-left { gap: 8px; }
.walls-toolbar .screener-toolbar-right { gap: 12px; }

/* Column geometry */
.wall-col-age    { width: 56px; color: var(--scr-text-muted); white-space: nowrap; }
.wall-col-market { min-width: 220px; max-width: 380px; }
.wall-col-role   { width: 104px; }
.wall-col-num    { width: 78px; text-align: right; white-space: nowrap; }
.wall-col-size   { width: 96px; text-align: right; white-space: nowrap; }
.wall-col-trend  { width: 116px; text-align: right; white-space: nowrap; }
.wall-col-now    { width: 84px; text-align: right; white-space: nowrap; }
.wall-row { cursor: pointer; }

/* Sortable headers */
.wall-sortable { cursor: pointer; user-select: none; }
.wall-sortable:hover { color: var(--scr-text-dim); }
.walls-table th.is-sorted-desc::after { content: " ▾"; color: var(--scr-text-dim); }
.walls-table th.is-sorted-asc::after  { content: " ▴"; color: var(--scr-text-dim); }

/* Role chip */
.wall-role {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
}
.wall-role--sup { color: var(--scr-up);   background: rgba(38, 166, 154, 0.12); border-color: rgba(38, 166, 154, 0.30); }
.wall-role--res { color: var(--scr-down); background: rgba(239, 83, 80, 0.12);  border-color: rgba(239, 83, 80, 0.30); }

/* Distance — highlight "at touch" (≤1¢) walls */
.wall-dist { color: var(--scr-text-dim); }
.wall-dist--touch { color: #eab308; font-weight: 600; }

/* Dominance mini-bar */
.wall-dom {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    width: 100%;
}
.wall-dom-bar {
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    height: 13px;
    background: rgba(120, 123, 134, 0.22);
    border-radius: 2px;
    z-index: 0;
}
.wall-dom-txt { position: relative; z-index: 1; color: var(--scr-text); font-variant-numeric: tabular-nums; }

/* Sparkline + trend tag */
.wall-spark { vertical-align: middle; opacity: 0.9; }
.wall-trend { font-size: 10px; font-weight: 600; margin-left: 2px; }
.wall-trend--up   { color: var(--scr-up); }
.wall-trend--down { color: var(--scr-down); }
.wall-trend--flat { color: var(--scr-text-muted); font-weight: 400; }

/* Book-pressure stat coloring */
.wall-pressure--sup { color: var(--scr-up) !important; }
.wall-pressure--res { color: var(--scr-down) !important; }

/* ── Ladder drawer ─────────────────────────────────────────────────── */
body.wall-drawer-open { overflow: hidden; }
.wall-drawer { position: fixed; inset: 0; z-index: 1200; }
.wall-drawer[hidden] { display: none; }
.wall-drawer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.wall-drawer-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 440px;
    max-width: 92vw;
    background: var(--scr-surface);
    border-left: 1px solid var(--scr-border);
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.45);
    animation: wall-drawer-in 0.16s ease-out;
}
@keyframes wall-drawer-in { from { transform: translateX(18px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.wall-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--scr-border-soft);
}
.wall-drawer-titles { min-width: 0; }
.wall-drawer-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--scr-text);
    text-decoration: none;
    line-height: 1.25;
}
.wall-drawer-title:hover { color: #fff; text-decoration: underline; }
.wall-drawer-sub { font-size: 12px; color: var(--scr-text-muted); margin-top: 2px; }
.wall-drawer-close {
    flex: 0 0 auto;
    background: none; border: none;
    color: var(--scr-text-muted);
    font-size: 22px; line-height: 1;
    cursor: pointer; padding: 0 2px;
}
.wall-drawer-close:hover { color: var(--scr-text); }
.wall-drawer-meta {
    display: flex; gap: 14px;
    padding: 8px 16px;
    font-size: 11px; font-family: var(--scr-font);
    color: var(--scr-text-muted);
    border-bottom: 1px solid var(--scr-border-soft);
    font-variant-numeric: tabular-nums;
}
.wall-meta-mid { color: var(--scr-text-dim); font-weight: 600; }

.wall-ladder { flex: 1 1 auto; overflow-y: auto; padding: 10px 12px; }
.wall-ladder-empty { color: var(--scr-text-muted); font-size: 12px; padding: 24px 8px; text-align: center; }
.wall-lad-row {
    display: grid;
    grid-template-columns: 46px 1fr 96px;
    align-items: center;
    gap: 8px;
    height: 22px;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}
.wall-lad-price { color: var(--scr-text-dim); text-align: right; }
.wall-lad-track { position: relative; height: 16px; }
.wall-lad-bar {
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    height: 12px; border-radius: 2px; opacity: 0.55;
}
.wall-lad-bar--sup { background: var(--scr-up); }
.wall-lad-bar--res { background: var(--scr-down); }
.wall-lad-row.is-wall .wall-lad-bar { opacity: 1; box-shadow: 0 0 0 1px rgba(255,255,255,0.25); }
.wall-lad-tag {
    position: absolute; right: 4px; top: 50%;
    transform: translateY(-50%);
    font-size: 9.5px; font-weight: 600;
    color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    white-space: nowrap;
}
.wall-lad-size { text-align: right; color: var(--scr-text); }
.wall-lad-usd { color: var(--scr-text-muted); margin-left: 5px; font-size: 10px; }
.wall-lad-mid {
    display: flex; align-items: center; justify-content: center;
    margin: 5px 0; height: 18px;
    font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--scr-text-muted);
    border-top: 1px dashed var(--scr-border);
    border-bottom: 1px dashed var(--scr-border);
}
.wall-drawer-legend {
    display: flex; flex-wrap: wrap; gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--scr-border-soft);
    font-size: 10.5px; color: var(--scr-text-muted);
}
.wall-drawer-legend span { display: inline-flex; align-items: center; gap: 5px; }
.wall-legend-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.wall-legend-dot--sup  { background: var(--scr-up); }
.wall-legend-dot--res  { background: var(--scr-down); }
.wall-legend-dot--wall { background: var(--scr-text); box-shadow: 0 0 0 1px rgba(255,255,255,0.25); }

@media (max-width: 760px) {
    .wall-col-trend, .wall-col-now { display: none; }
}



/* ═══════════════════════════════════════════════════════════════════
 * Datasets store (/datasets) — ds-* classes. Reuses the global --scr-*
 * tokens so it matches the screener/walls dark theme.
 * ═══════════════════════════════════════════════════════════════════ */
body.datasets-page {
    background: var(--scr-bg);
    color: var(--scr-text);
    font-family: var(--scr-font);
}
body.datasets-page .topbar {
    background: var(--scr-bg);
    border-bottom: 1px solid var(--scr-border);
}
.ds-shell {
    max-width: 980px;
    margin: 0 auto;
    padding: 28px 20px 80px;
}

/* Banner */
.ds-banner {
    border-radius: 8px;
    padding: 13px 16px;
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.45;
    border: 1px solid var(--scr-border);
}
.ds-banner--success { background: rgba(38,166,154,0.12); border-color: var(--scr-up); color: #b8efe7; }
.ds-banner--cancel  { background: var(--scr-warn-dim); border-color: var(--scr-warn); color: #ffd699; }

/* Hero */
.ds-hero { padding: 18px 0 30px; border-bottom: 1px solid var(--scr-border-soft); margin-bottom: 30px; }
.ds-badge {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--scr-text-dim);
    background: var(--scr-surface-2);
    border: 1px solid var(--scr-border-soft);
    border-radius: 100px;
    padding: 4px 11px;
    margin-bottom: 16px;
}
.ds-hero-title { font-size: 32px; font-weight: 800; line-height: 1.1; margin: 0 0 14px; color: #fff; letter-spacing: -0.01em; }
.ds-hero-sub { font-size: 16px; line-height: 1.55; color: var(--scr-text-dim); max-width: 760px; margin: 0 0 18px; }
.ds-hero-sub strong { color: var(--scr-text); }
.ds-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-chip {
    font-size: 12px; color: var(--scr-text-dim);
    background: var(--scr-surface); border: 1px solid var(--scr-border-soft);
    border-radius: 6px; padding: 5px 10px;
}
.ds-chip strong { color: var(--scr-text); }

/* Sections */
.ds-section { margin: 0 0 40px; }
.ds-h2 { font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.ds-section-note { font-size: 14px; color: var(--scr-text-dim); line-height: 1.5; margin: 0 0 18px; max-width: 760px; }
.ds-section-note code, .ds-coldict code, .ds-feat code, .ds-dataset-desc code,
.ds-limits-list code, .ds-method-list code, .ds-note-small code {
    font-family: var(--font-mono, monospace); font-size: 0.88em;
    background: var(--scr-surface-2); border: 1px solid var(--scr-border-soft);
    border-radius: 4px; padding: 1px 5px; color: var(--scr-text);
}

/* Purchase cards */
.ds-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ds-card {
    position: relative;
    background: var(--scr-surface);
    border: 1px solid var(--scr-border);
    border-radius: 12px;
    padding: 22px 20px;
    display: flex; flex-direction: column;
}
.ds-card--featured { border-color: var(--scr-accent); box-shadow: 0 0 0 1px var(--scr-accent-dim); }
.ds-card--skeleton { grid-column: 1 / -1; color: var(--scr-text-muted); text-align: center; padding: 40px; }
.ds-card-flag {
    position: absolute; top: -10px; right: 16px;
    background: var(--scr-accent); color: #fff; font-size: 10px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px;
}
.ds-card-price { font-size: 34px; font-weight: 800; color: #fff; line-height: 1; }
.ds-card-price small { font-size: 12px; font-weight: 500; color: var(--scr-text-muted); margin-left: 7px; }
.ds-card-title { font-size: 16px; font-weight: 600; color: var(--scr-text); margin: 12px 0 4px; }
.ds-card-cov { font-size: 13px; color: var(--scr-text-dim); margin: 0; }
.ds-card-dates { font-size: 12px; color: var(--scr-text-muted); margin: 2px 0 0; }
.ds-card-list { list-style: none; padding: 0; margin: 16px 0 18px; }
.ds-card-list li { font-size: 13px; color: var(--scr-text-dim); padding: 5px 0 5px 22px; position: relative; }
.ds-card-list li::before { content: "✓"; position: absolute; left: 0; color: var(--scr-up); font-weight: 700; }
.ds-card-owned-note { font-size: 12px; color: var(--scr-up); margin: 0 0 10px; }

/* Buttons */
.ds-btn {
    margin-top: auto;
    font: inherit; font-size: 14px; font-weight: 600;
    border-radius: 8px; padding: 11px 16px; cursor: pointer;
    border: 1px solid transparent; text-align: center; width: 100%;
    transition: filter .12s ease, background .12s ease;
}
.ds-btn--buy { background: var(--scr-accent); color: #fff; }
.ds-btn--buy:hover { filter: brightness(1.1); }
.ds-btn--owned { background: var(--scr-up); color: #04201c; }
.ds-btn--owned:hover { filter: brightness(1.08); }
.ds-btn--soon { background: var(--scr-surface-2); color: var(--scr-text-muted); cursor: not-allowed; border-color: var(--scr-border-soft); }
.ds-btn--ghost { width: auto; background: transparent; color: var(--scr-text); border-color: var(--scr-border); }
.ds-btn--ghost:hover { background: var(--scr-surface-2); }
.ds-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.ds-sample-row {
    margin-top: 18px; padding: 16px 18px;
    background: var(--scr-surface); border: 1px dashed var(--scr-border);
    border-radius: 10px; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; font-size: 14px; color: var(--scr-text-dim);
}
.ds-sample-row strong { color: var(--scr-text); }

/* Dataset cards */
.ds-dataset { background: var(--scr-surface); border: 1px solid var(--scr-border); border-radius: 10px; padding: 18px 20px; margin-bottom: 14px; }
.ds-dataset-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.ds-pill { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 8px; border-radius: 100px; margin-bottom: 6px; }
.ds-pill--headline { background: var(--scr-accent-dim); color: var(--scr-accent); border: 1px solid var(--scr-accent); }
.ds-dataset-name { font-family: var(--font-mono, monospace); font-size: 15px; color: #fff; margin: 0 0 6px; }
.ds-dataset-desc { font-size: 13.5px; color: var(--scr-text-dim); line-height: 1.5; margin: 0; max-width: 560px; }
.ds-dataset-desc em { color: var(--scr-text); font-style: normal; font-weight: 600; }
.ds-dataset-counts { display: flex; gap: 18px; flex-shrink: 0; text-align: right; }
.ds-dataset-counts > div { display: flex; flex-direction: column; }
.ds-count { font-size: 20px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.ds-dataset-counts small { font-size: 11px; color: var(--scr-text-muted); }

.ds-dict { margin-top: 14px; border-top: 1px solid var(--scr-border-soft); padding-top: 12px; }
.ds-dict summary { cursor: pointer; font-size: 13px; color: var(--scr-text-dim); font-weight: 600; }
.ds-dict summary:hover { color: var(--scr-text); }
.ds-coldict { margin: 12px 0; padding-left: 18px; }
.ds-coldict li { font-size: 13px; color: var(--scr-text-dim); line-height: 1.7; }
.ds-coldict-sub { list-style: none; margin-left: -18px; margin-top: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--scr-text-muted); }

.ds-table-wrap { overflow-x: auto; margin-top: 10px; }
.ds-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.ds-table th, .ds-table td { border: 1px solid var(--scr-border-soft); padding: 6px 9px; text-align: left; white-space: nowrap; }
.ds-table th { background: var(--scr-surface-2); color: var(--scr-text-dim); font-weight: 600; }
.ds-table td { color: var(--scr-text-dim); font-variant-numeric: tabular-nums; }
.ds-table td:last-child { white-space: normal; min-width: 240px; color: var(--scr-text-muted); }

/* Term chips */
.ds-termchips { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-termchip { font-size: 13px; color: var(--scr-text); background: var(--scr-surface-2); border: 1px solid var(--scr-border-soft); border-radius: 6px; padding: 6px 11px; }

/* Feature grid (position encoding) */
.ds-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ds-feat { background: var(--scr-surface); border: 1px solid var(--scr-border); border-radius: 10px; padding: 16px; }
.ds-feat h4 { margin: 0 0 8px; font-size: 14px; }
.ds-feat p { margin: 0; font-size: 13px; color: var(--scr-text-dim); line-height: 1.5; }
.ds-note-small { font-size: 12.5px; color: var(--scr-text-muted); margin: 14px 0 0; line-height: 1.5; }

/* Methodology */
.ds-method-list { margin: 0; padding-left: 20px; }
.ds-method-list li { font-size: 14px; color: var(--scr-text-dim); line-height: 1.6; margin-bottom: 9px; }
.ds-method-list strong { color: var(--scr-text); }

/* Known limitations */
.ds-limits { background: var(--scr-warn-dim); border: 1px solid var(--scr-warn); border-radius: 12px; padding: 22px 24px; }
.ds-limits .ds-h2 { color: #ffd699; }
.ds-limits-list { margin: 6px 0 0; padding-left: 20px; }
.ds-limits-list li { font-size: 13.5px; color: var(--scr-text-dim); line-height: 1.6; margin-bottom: 10px; }
.ds-limits-list strong { color: var(--scr-text); }
.ds-limits-list em { color: #ffd699; font-style: normal; }

/* Legal */
.ds-legal { border-top: 1px solid var(--scr-border-soft); padding-top: 18px; }
.ds-legal p { font-size: 12.5px; color: var(--scr-text-muted); line-height: 1.6; margin: 0; }
.ds-legal a { color: var(--scr-text-dim); text-decoration: underline; }
.ds-legal-tbd { color: var(--scr-text-muted); }

@media (max-width: 720px) {
    .ds-cards { grid-template-columns: 1fr; }
    .ds-grid3 { grid-template-columns: 1fr; }
    .ds-dataset-head { flex-direction: column; }
    .ds-dataset-counts { text-align: left; }
    .ds-hero-title { font-size: 26px; }
    .ds-sample-row { flex-direction: column; align-items: stretch; }
    .ds-btn--ghost { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   /leaderboard — daily snapshot archive
   See app/templates/leaderboard.html + app/static/js/leaderboard.js.
   Design language mirrors /screener: 38px pills with 1px #2e2e2e
   border, 8px radius, 15px font, transparent at rest / #2e2e2e hover,
   `cursor: default`, 0.12s transitions. Re-uses --scr-* tokens.
   ═══════════════════════════════════════════════════════════════════════ */
.leaderboard-page { background: var(--scr-bg); color: var(--scr-text); min-height: 100vh; }
.lb-shell { max-width: 1100px; margin: 0 auto; padding: 18px 16px 40px; font-family: var(--scr-font); }

/* Page heading — slim above the toolbar (matches screener which has
   no header above its toolbar; for the leaderboard pages we keep a
   compact title row for context). */
.lb-header { margin: 4px 0 14px; }
.lb-title { font-size: 18px; font-weight: 600; margin: 0 0 4px; color: var(--scr-text); letter-spacing: -0.005em; }
.lb-sub { font-size: 12.5px; color: var(--scr-text-muted); margin: 0; line-height: 1.5; max-width: 760px; }

/* Toolbar — horizontal, 48px tall, no surface tint. Matches
   .screener-toolbar so the muscle memory is identical between pages. */
.lb-controls {
    display: flex; align-items: center; gap: 10px;
    min-height: 48px;
    padding: 0; margin: 0 0 12px;
    background: transparent;
    /* Wrap pills onto a second row at narrow widths instead of
       horizontal-scrolling. The previous overflow-x:auto forced
       overflow-y to auto (CSS spec quirk — `visible` is silently
       promoted to `auto` when the other axis is `auto`), which
       clipped the absolutely-positioned dropdown menu below.
       Wrapping keeps everything visible. */
    flex-wrap: wrap;
    overflow: visible;
    flex-shrink: 0;
}

/* Pills — venue tabs and period segment buttons share this style.
   Identical to .screener-pill: 38px, 1px #2e2e2e border, 8px radius,
   15px font, transparent / #2e2e2e. */
.lb-tabs, .lb-segment { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; background: transparent; border: 0; padding: 0; }
/* `display: inline-flex` above defeats the HTML `hidden` attribute
   (the UA stylesheet's `display: none` loses to any author rule).
   Re-assert hidden so JS toggling `wrap.hidden = true` actually works. */
.lb-tabs[hidden], .lb-segment[hidden] { display: none !important; }
.lb-tab, .lb-seg {
    display: inline-flex; align-items: center; justify-content: center;
    background-color: transparent;
    background-clip: padding-box;
    border: 1px solid #2e2e2e;
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--scr-text);
    font-family: var(--scr-font);
    font-size: 15px;
    font-weight: 400;
    height: 38px;
    padding: 0 14px;
    cursor: default;
    outline: none;
    white-space: nowrap;
    transition: background-color 0.12s;
}
.lb-tab:hover:not(.is-disabled), .lb-seg:hover { background-color: #2e2e2e; }
.lb-tab.is-active, .lb-seg.is-active { background-color: #2e2e2e; color: var(--scr-text); }
.lb-tab.is-disabled, .lb-seg.is-disabled {
    color: var(--scr-text-muted); opacity: 0.45; cursor: not-allowed;
}
.lb-seg.is-disabled:hover { background-color: transparent; }

/* Limitless "track a wallet" form on the explorer's Limitless tab. */
.lbc-track { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.lbc-track[hidden] { display: none !important; }
.lbc-track-input {
    height: 38px; box-sizing: border-box; width: 260px;
    background-color: transparent; background-clip: padding-box;
    border: 1px solid #2e2e2e; border-radius: 8px;
    color: var(--scr-text); font-family: var(--scr-font); font-size: 15px;
    padding: 0 12px; outline: none;
}
.lbc-track-input:focus { border-color: #404040; }
.lbc-track-input::placeholder { color: var(--scr-text-muted); }
.lbc-track-msg { color: var(--scr-text-muted); font-size: 13px; white-space: nowrap; }
/* "Track" is a submit action, not a filter — filled TradingView button. */
.lbc-track-btn { background-color: #2e2e2e; border-color: #2e2e2e; color: #fff; font-weight: 600; }
.lbc-track-btn:hover { background-color: #3d3d3d; border-color: #3d3d3d; color: #fff; }
.lbc-track-btn:active { background-color: #4a4a4a; border-color: #4a4a4a; }

/* Limitless-only methodology note under the controls bar. Sets honest
   expectations about reconstructed PnL + the in-progress backfill. */
.lbc-venue-note {
    margin: 2px 0 10px;
    max-width: 760px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--scr-text-muted);
}
.lbc-venue-note[hidden] { display: none !important; }
.lbc-venue-note strong { color: var(--scr-text, #ccc); font-weight: 600; }

/* Category focus chips on /leaderboard/categories. Same visual
   language as .lb-seg but smaller (compact row of 15+ items) and
   wraps onto multiple lines. */
.lbc-focus { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.lbc-chip {
    display: inline-flex; align-items: center; justify-content: center;
    background-color: transparent; background-clip: padding-box;
    border: 1px solid #2e2e2e; border-radius: 8px; box-sizing: border-box;
    color: var(--scr-text-muted); font-family: var(--scr-font);
    font-size: 13px; font-weight: 400; height: 30px; padding: 0 12px;
    cursor: default; outline: none; white-space: nowrap;
    transition: background-color 0.12s, color 0.12s, border-color 0.12s;
}
.lbc-chip:hover { background-color: #2e2e2e; color: var(--scr-text); }
.lbc-chip.is-active { background-color: #2e2e2e; color: var(--scr-text); border-color: #404040; }

/* Visibility filter pills carry a dot icon for instant recognition.
   Active state lights up with a tinted border matching the dot color
   so it's easy to see at a glance which side of the filter is on. */
.lb-seg--vis { padding: 0 12px; }
.lb-seg--vis .lb-vis-dot { margin-right: 7px; }
/* Active pill state — match the screener exactly: neutral #2e2e2e
   fill, identical border + text color. No green/grey overlays. */
.lb-seg--vis[data-vis="public"].is-active,
.lb-seg--vis[data-vis="private"].is-active,
.lb-seg--profitable.is-active {
    background-color: #2e2e2e;
    color: var(--scr-text);
    border-color: #2e2e2e;
}

/* Category dropdown trigger — matches the pill so the row reads as
   a single horizontal stripe of identically-sized controls. The
   native <select> arrow gets a subtle muted treatment. */
.lb-cat-wrap { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.lb-cat-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    background-image: linear-gradient(45deg, transparent 50%, var(--scr-text-muted) 50%),
                      linear-gradient(135deg, var(--scr-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 16px) center, calc(100% - 11px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    background-clip: padding-box;
    border: 1px solid #2e2e2e;
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--scr-text);
    font-family: var(--scr-font);
    font-size: 15px;
    height: 38px;
    padding: 0 30px 0 14px;
    min-width: 160px;
    outline: none;
    cursor: default;
    transition: background-color 0.12s;
}
.lb-cat-select:hover { background-color: #2e2e2e; }
.lb-cat-select option { background: #14151b; color: var(--scr-text); }
.lb-cat-select option:disabled { color: var(--scr-text-muted); }

/* Custom dropdown — replaces native <select>. The OS popup ignores
   our styling, so we render the menu ourselves. Trigger matches the
   screener pill; menu floats below and rolls up at the same dimensions. */
.lb-dd { position: relative; display: inline-block; }
.lb-dd-trigger {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    background-color: transparent; background-clip: padding-box;
    border: 1px solid #2e2e2e; border-radius: 8px; box-sizing: border-box;
    color: var(--scr-text); font-family: var(--scr-font); font-size: 15px;
    font-weight: 400;
    height: 38px; padding: 0 14px;
    outline: none; cursor: default; white-space: nowrap;
    transition: background-color 0.12s;
}
.lb-dd-trigger:hover { background-color: #2e2e2e; }
.lb-dd.is-open .lb-dd-trigger { background-color: #2e2e2e; border-color: #404040; }
.lb-dd-trigger-label { font-weight: 400; }
.lb-dd-caret { width: 10px; height: 6px; color: var(--scr-text-muted);
    flex-shrink: 0; transition: transform 0.12s; }
.lb-dd.is-open .lb-dd-caret { transform: rotate(180deg); color: var(--scr-text); }

/* Menu floats below the trigger, anchored left. Same border + radius
   as the pill, slightly lifted background. Items inherit the row
   feel of the screener kebab popups. */
.lb-dd-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 80;
    min-width: 100%;
    background: #14151b;
    border: 1px solid #2e2e2e; border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
    padding: 4px;
    max-height: 360px; overflow-y: auto;
    flex-direction: column;
    /* Hidden by default; the JS toggles via [hidden] AND .is-open
       on the wrapper. We need an explicit `display: none` because
       flex-direction would otherwise leave display in its default
       (block) state — visible. */
    display: none;
}
.lb-dd:not(.is-open) .lb-dd-menu { display: none !important; }
.lb-dd.is-open .lb-dd-menu { display: flex; }
.lb-dd-option {
    display: block; width: 100%; text-align: left;
    background: transparent; border: 0; border-radius: 6px;
    color: var(--scr-text); font-family: var(--scr-font); font-size: 14px;
    padding: 8px 12px; cursor: default; outline: none; white-space: nowrap;
    transition: background-color 0.12s;
}
.lb-dd-option:hover:not(.is-disabled) { background-color: #2e2e2e; }
.lb-dd-option.is-selected { color: #22ee88; }
.lb-dd-option.is-selected::before { content: '✓ '; }
.lb-dd-option.is-disabled { color: var(--scr-text-muted); cursor: not-allowed; }

/* Date-picker block — inline label + input + nav arrows + Latest
   button. The <input type="date"> renders as a screener-pill twin
   with the date-scheme arrow muted. */
.lb-date { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.lb-date-label { font-size: 11px; font-weight: 500; color: var(--scr-text-muted); letter-spacing: normal; text-transform: none; }
.lb-date-input {
    background-color: transparent;
    background-clip: padding-box;
    border: 1px solid #2e2e2e;
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--scr-text);
    font-family: var(--scr-font);
    font-size: 15px;
    height: 38px;
    padding: 0 10px;
    color-scheme: dark;
    outline: none;
    cursor: default;
    transition: background-color 0.12s;
}
.lb-date-input:hover { background-color: #2e2e2e; }
.lb-date-jump, .lb-date-today {
    display: inline-flex; align-items: center; justify-content: center;
    background-color: transparent;
    background-clip: padding-box;
    border: 1px solid #2e2e2e;
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--scr-text);
    font-family: var(--scr-font);
    font-size: 15px;
    font-weight: 400;
    height: 38px;
    padding: 0 12px;
    min-width: 38px;
    cursor: default;
    outline: none;
    transition: background-color 0.12s;
}
.lb-date-jump:hover, .lb-date-today:hover { background-color: #2e2e2e; }

/* Status text floats to the right of the toolbar, same muted color
   pattern the screener uses for its result count. */
.lb-status { margin-left: auto; font-size: 12.5px; color: var(--scr-text-muted); white-space: nowrap; flex-shrink: 0; }

.lb-grid-shell { position: relative; }
/* Framed leaderboard table — border on all four sides. #lb-grid is the AG Grid
   root (leaderboard only; the explorer uses #lbc-grid), and it's the element
   we center, so the border wraps exactly the table. */
#lb-grid {
    border: 1px solid var(--scr-border);
    border-radius: 6px;
    overflow: hidden;   /* clip header/row corners to the rounded border */
}
/* Drop the screener's far-right edge divider on the leaderboard — with the
   centered table it would float in the empty space; the grid border frames it now. */
.leaderboard-page:not(.leaderboard-categories-page) .lb-grid-shell::after { display: none; }
/* The header cells carry their own 1px top border (needed on the screener,
   which has no outer frame). Inside the framed #lb-grid it stacks under the
   table's top border and reads as ~2px — drop it so the top matches the sides. */
#lb-grid .ag-header-cell { border-top: none !important; }
/* When the table is centered (fits the screen), kill horizontal scrolling
   outright — suppressHorizontalScroll only hides the scrollbar, the viewport
   stays overflow-x:auto and a sub-pixel trackpad nudge still scrolls. */
#lb-grid.lb-centered .ag-center-cols-viewport,
#lb-grid.lb-centered .ag-body-horizontal-scroll-viewport { overflow-x: hidden !important; }
/* Explorer grid: frame it on all four sides like #lb-grid (border + rounded
   corners, clipped). Drop the header cells' own top border so the top edge
   matches the sides instead of reading as ~2px. */
#lbc-grid {
    border: 1px solid var(--scr-border);
    border-radius: 6px;
    overflow: hidden;
}
#lbc-grid .ag-header-cell { border-top: none !important; }
/* The pinned trader column's header cell already draws its own ::after vertical
   divider (like every other column). Drop ONLY the header portion of the
   full-height pinned-section divider, so the right border begins BELOW the
   header (in the body) rather than doubling up with the header's ::after. The
   body divider (.ag-pinned-left-cols-container::after) stays. Scoped to the
   explorer — other grids keep their full pinned divider. */
.leaderboard-categories-page .ag-pinned-left-header::after {
    display: none !important;
}
/* Venue logo before the leftmost (trader) column header text. */
.lbc-trader-logo .ag-header-cell-text::before {
    content: '';
    display: inline-block;
    /* Match the venue dropdown's logo: 18px square, 4px rounded corners. */
    width: 18px; height: 18px;
    margin-right: 7px;
    border-radius: 4px;
    vertical-align: -5px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.lbc-trader-logo--kalshi .ag-header-cell-text::before { background-image: url('/static/logos/venues/kalshi.png'); }
.lbc-trader-logo--limitless .ag-header-cell-text::before { background-image: url('/static/logos/venues/limitless.png'); }
/* Filter re-apply in progress: dim + freeze the current rows while the new data
   loads (the loading spinner shows on top), so a 1–2s refresh is obviously an
   update rather than a stuck table. */
#lbc-grid.lbc-updating .ag-center-cols-container,
#lbc-grid.lbc-updating .ag-pinned-left-cols-container {
    opacity: 0.4;
    transition: opacity .12s ease;
    pointer-events: none;
}
/* Both leaderboard surfaces use a fixed-height flex shell so the
   AG Grid block fills whatever vertical space is left below the
   page header + control row. Same pattern the screener uses
   (.screener-shell): the OUTER shell sets a 100vh-minus-topbar
   height + flex column, and the grid shell flexes to fill. Fixed
   pixel offsets were brittle — they assumed a specific header
   height and broke whenever a section title or description text
   changed (or got removed, like just happened on the kalshi-users
   page). */
.leaderboard-page .lb-shell,
.leaderboard-categories-page .lb-shell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
    padding-bottom: 18px;   /* gap so the table isn't flush to the page bottom */
    box-sizing: border-box;
    overflow: hidden;
}
/* The leaderboard + explorer grids now live inside the screener's exact
   container (.screener-main > .screener-grid-wrap > .unp-grid) and size via
   the same rules screener uses (.unp-grid { flex:1; min-height:0 }). No
   per-page grid/ag-root-wrapper overrides — those skewed AG Grid's viewport
   height and left rows blank on scroll. Match screener, nothing more. */
/* Center header labels (including right-aligned numeric columns and
   the outer "Sports / Politics / …" group bands). AG Grid keeps the
   sort + filter icons in line by virtue of the label-container being
   flex; centering it puts the text in the middle and pushes the kebab
   icon to the right via auto-margin. */
/* Outer group-header band (Sports / Politics / Crypto / …) spans
   three sub-columns — keep it centered over the group it labels. */
.leaderboard-categories-page .ag-header-group-cell .ag-header-group-cell-label {
    justify-content: center;
}
.leaderboard-categories-page .ag-header-group-text { text-align: center; width: 100%; }

/* Category column-group dividers. Each category (Sports / Politics /
   Crypto / …) has three sub-columns — PnL, Vol, ROI — which collapse
   visually into one band without a separator. A 1px accent line on
   the FIRST sub-column of each group (always `cat_<slug>_pnl` per the
   buildColumnDefs order) makes the families distinguishable while
   still feeling subtle. Using box-shadow inset instead of border-left
   so it doesn't fight with AG Grid's cell-width calc. BODY cells only — the
   column-name header cell already carries its own ::after divider, so the
   accent line begins BELOW the header rather than doubling up with it. (The
   group-band cell below keeps the label separator.) */
.leaderboard-categories-page .ag-cell[col-id^="cat_"][col-id$="_pnl"] {
    box-shadow: inset 1px 0 0 0 #2e2e2e;
}
/* Only REAL category group cells (Sports/Politics/Crypto/…) get a left
   divider. The ungrouped aggregate columns (Joined … Taker %) render EMPTY
   placeholder group cells (.ag-header-group-cell-no-group); exclude those so
   they don't draw a redundant divider above their column header — those header
   cells already carry their own ::after vertical dividers. */
.leaderboard-categories-page .ag-header-viewport
    .ag-header-group-cell:not(:first-of-type):not(.ag-header-group-cell-no-group) {
    box-shadow: inset 1px 0 0 0 #2e2e2e;
}
/* Explorer: clear hover affordance on SORTABLE header cells — highlight the
   cell + pointer cursor so it's obvious the column sorts. (The default
   --ag-header-cell-hover-background-color #1e1e1f is too subtle to read.) */
.leaderboard-categories-page .ag-header-cell.ag-header-cell-sortable,
.leaderboard-categories-page .ag-header-cell.ag-header-cell-sortable .ag-header-cell-label,
.leaderboard-categories-page .ag-header-cell.ag-header-cell-sortable .ag-header-cell-comp-wrapper {
    cursor: pointer !important;
}
.leaderboard-categories-page .ag-header-cell.ag-header-cell-sortable:hover {
    background-color: #2a2a2c !important;
    /* Extend the highlight 1px past each edge so it covers the column-divider
       lines (this cell's right ::after + the left neighbour's), leaving no seam
       between the hover colour and the vertical separators. */
    box-shadow: -1px 0 0 0 #2a2a2c, 1px 0 0 0 #2a2a2c !important;
    transition: background-color 0.08s ease;
}
/* Blend this cell's own right-edge divider into the highlight on hover. */
.leaderboard-categories-page .ag-header-cell.ag-header-cell-sortable:hover::after {
    background: #2a2a2c !important;
}
.lb-grid { width: 100%;
    --ag-background-color: transparent;
    --ag-foreground-color: var(--scr-text);
    --ag-header-background-color: transparent;
    --ag-header-foreground-color: var(--scr-text-muted);
    --ag-header-cell-hover-background-color: #1e1e1f;
    --ag-border-color: var(--scr-border-soft);
    --ag-odd-row-background-color: transparent;
    --ag-row-hover-color: #1e1e1f;
    --ag-font-family: var(--scr-font);
    --ag-font-size: 14px;
    --ag-row-border-color: var(--scr-border-soft);
    border-top: 1px solid var(--scr-border-soft);
    border-bottom: 1px solid var(--scr-border-soft);
    border-left: 0; border-right: 0; border-radius: 0; overflow: hidden;
}
/* Match screener column-header styling: smaller font, muted, slight
   uppercase feel, hover affordance on sortable headers. */
.lb-grid .ag-header-cell-text { font-size: 13px; font-weight: 500; }
.lb-grid .ag-row { cursor: default; }

.lb-empty { padding: 36px 20px; text-align: center; color: var(--scr-text-muted);
    background: transparent; border-top: 1px solid var(--scr-border-soft);
    border-bottom: 1px solid var(--scr-border-soft); border-radius: 0; font-size: 13px; }

.lb-rank-cell { color: var(--scr-text-muted); font-variant-numeric: tabular-nums; font-weight: 500; }

.lb-trader-col, .lb-trader-col.ag-cell {
    text-align: left !important; justify-content: flex-start !important;
    overflow: hidden;   /* let the name ellipsis instead of overflowing */
}
.lb-trader-name {
    color: var(--scr-text); text-decoration: none;
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.lb-trader-name:hover { color: var(--scr-accent); text-decoration: underline; }

.lb-pnl-pos { color: var(--scr-up); font-variant-numeric: tabular-nums; }
.lb-pnl-neg { color: var(--scr-down); font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
    .lb-controls { height: auto; padding: 6px 0; flex-wrap: wrap; overflow: visible; }
    .lb-status { margin-left: 0; width: 100%; }
    .lb-shell { padding: 14px 12px 40px; }
    .lb-title { font-size: 16px; }
    .lb-tab, .lb-seg, .lb-cat-select, .lb-date-input,
    .lb-date-jump, .lb-date-today { height: 34px; font-size: 14px; padding: 0 11px; }
}

/* (Category dropdown styling has been folded into the screener-
   matched block above — see `.lb-cat-wrap` / `.lb-cat-select`.) */

/* Leaderboard categories pivot — wider table that benefits from
   sticky first columns (Trader + Overall) so users can scroll
   right across the 15 category columns without losing context. */
.leaderboard-page .lb-grid { --ag-header-height: auto; }

/* Wide variant for the categories pivot — 15+ columns need the
   full viewport rather than the 1100px reading-width default. */
.lb-shell--wide {
    max-width: none; width: 100%; flex: 1 1 100%;
    padding-left: 18px; padding-right: 18px;
}

/* Trade-visibility indicator next to trader names. Kalshi exposes
   `visibility_state` (public/hidden) per user; we surface it as a
   small dot before the nickname. Polymarket users default to "n/a"
   since per-user visibility isn't a Polymarket concept. */
.lb-vis-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    margin-right: 7px; flex: 0 0 8px; vertical-align: middle;
}
.lb-vis-dot--public  {
    background: #22ee88;
    box-shadow: 0 0 6px rgba(34, 238, 136, 0.65),
                0 0 0 1px rgba(34, 238, 136, 0.85);
}
.lb-vis-dot--private { background: var(--scr-text-muted); opacity: 0.55; }
.lb-vis-dot--unknown { background: var(--scr-border); opacity: 0.45; }

/* ═══════════════════════════════════════════════════════════════════════
   /users/{venue}/{user_id} — trader profile page
   Inherits .lb-shell--wide / .unp-grid; adds its own header chrome.
   ═══════════════════════════════════════════════════════════════════════ */
.up-crumbs { display: flex; align-items: center; gap: 6px; font-size: 12.5px;
    color: var(--scr-text-muted); margin: 4px 0 16px; }
.up-crumb { color: var(--scr-text-muted); text-decoration: none; }
.up-crumb:hover:not(.up-crumb--active) { color: var(--scr-text); }
.up-crumb--active { color: var(--scr-text); }
.up-crumb-sep { color: var(--scr-text-muted); }

.up-shell { display: flex; flex-direction: column; gap: 24px; }

/* Hero overview row — TradingView account-page layout. Identity
 * header on the left, per-category breakdown on the right (wide
 * screens) or stacked (narrow). The whole row sits above a single
 * divider line that frames it as one section. */
.up-overview {
    display: grid;
    grid-template-columns: minmax(420px, auto) minmax(360px, 1fr);
    align-items: start;
    column-gap: 48px;
    padding: 4px 0 24px;
    border-bottom: 1px solid var(--scr-border-soft);
    margin-bottom: 28px;
}
/* Left cell: identity header + per-category breakdown, stacked. Independent
 * of the chart cell so the chart's height never reflows these. min-width:0
 * lets the grid track shrink instead of being forced wide by content. */
.up-overview-main { min-width: 0; }
.up-overview-main > .up-section--cats {
    /* Stacks under the header — spaced off it, not coupled to the chart. */
    padding: 0;
    gap: 8px;
    margin-top: 30px;
}
/* Chart sits in its own right cell; align to the top of the row. */
.up-overview > .up-section--chart { align-self: start; min-width: 0; }
.up-overview .up-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--scr-text);
    margin: 0 0 4px;
}
@media (max-width: 1080px) {
    .up-overview {
        grid-template-columns: 1fr;
        row-gap: 28px;
    }
}

/* Hero header — TradingView account-page layout. Avatar circle on
 * the left, identity column in the middle (name + status pill, stats
 * inline row, meta line), action button on the top-right. Sits on
 * the page background — no card border or panel. */
.up-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    column-gap: 28px;
    padding: 0;
    border-bottom: 0;
    margin-bottom: 0;
}
/* Avatar: real Kalshi profile image (`<img>` injected by JS) over a
 * colored-initial fallback. The fallback always exists in the DOM so
 * the page renders something immediately while the image request is
 * in flight or if it 4xx's. When the image loads, the `.has-image`
 * class hides the fallback initial underneath. */
.up-avatar {
    position: relative;
    width: 96px; height: 96px;
    border-radius: 50%;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: #ffffff;
    font-size: 44px;
    font-weight: 500;
    line-height: 1;
    user-select: none;
    background: #2e3340;   /* JS overrides with a per-user hue */
    flex-shrink: 0;
}
.up-avatar-initial {
    display: inline-block;
}
.up-avatar.has-image .up-avatar-initial { display: none; }
.up-avatar-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.up-header-info {
    display: flex; flex-direction: column; gap: 18px;
    min-width: 0;
    padding-top: 6px;
}
.up-name-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.up-vis-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-family: var(--scr-font);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.02em;
}
.up-vis-pill--public  { background: rgba(38, 166, 154, 0.16); color: #4ade80; }
.up-vis-pill--private { background: rgba(255, 255, 255, 0.06); color: #9598A2; }
.up-vis-pill--unknown { display: none; }
/* `display: inline-block` above out-specifies the HTML hidden
 * attribute; restore the expected behavior. */
.up-vis-pill[hidden] { display: none; }
/* External-profile action — outlined pill like TradingView's
 * "Settings and billing" button. Top-right of the header row,
 * vertically aligned with the name. */
.up-action-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    align-self: start;
    margin-top: 2px;
    font-family: var(--scr-font);
    font-size: 13px; font-weight: 500;
    color: var(--scr-text);
    background: transparent;
    border: 1px solid var(--scr-border-soft);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
}
.up-action-btn:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.20); color: #ffffff; }
.up-action-btn svg { flex-shrink: 0; color: var(--scr-text-muted); }
.up-action-btn:hover svg { color: var(--scr-text); }
/* Follow button — same outlined-pill chrome, brightens green when
 * active so the user sees the click took effect. */
.up-follow-btn.is-following {
    background: rgba(22, 163, 74, 0.10);
    border-color: rgba(22, 163, 74, 0.45);
    color: #4ade80;
}
.up-follow-btn.is-following svg { color: #4ade80; fill: #4ade80; }
/* Discord link in the topbar — inherits .topbar-icon-btn--circle
 * sizing + hover treatment from the profile icon so the two read as
 * a matched pair. The Discord glyph is filled (vs. the line-icons
 * elsewhere), so tighten the SVG a touch so its visual weight
 * matches the search/profile icons. */
.topbar-discord svg { width: 20px; height: 20px; }

/* ── Follow modal ──────────────────────────────────────────────────
 * Opens when the user clicks Follow on a user profile. Lets them
 * scope the follow to a subset of categories and a role (taker /
 * maker / both). Modal sits over a darkened backdrop; ESC or
 * click-backdrop dismisses. */
.up-modal {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.up-modal[hidden] { display: none; }
body.up-modal-open { overflow: hidden; }
.up-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}
.up-modal-panel {
    position: relative;
    width: 100%; max-width: 520px;
    background: #1c1d23;
    border: 1px solid var(--scr-border-soft);
    border-radius: 12px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
    display: flex; flex-direction: column;
    max-height: calc(100vh - 48px);
    overflow: hidden;
}
.up-modal-head {
    display: flex; align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--scr-border-soft);
}
.up-modal-title {
    margin: 0; flex: 1;
    font-size: 16px; font-weight: 600; color: var(--scr-text);
}
.up-modal-close {
    background: transparent; border: 0; cursor: pointer;
    width: 28px; height: 28px;
    border-radius: 50%;
    color: var(--scr-text-muted);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.12s, color 0.12s;
}
.up-modal-close:hover { background: rgba(255, 255, 255, 0.06); color: var(--scr-text); }
.up-modal-body {
    padding: 20px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 20px;
}
.up-modal-field { display: flex; flex-direction: column; gap: 8px; }
.up-modal-label {
    font-size: 12px; font-weight: 600;
    color: var(--scr-text);
    letter-spacing: 0.02em; text-transform: uppercase;
}
.up-modal-hint {
    font-size: 12px; color: var(--scr-text-muted);
    line-height: 1.5;
}
.up-modal-link {
    align-self: flex-start;
    background: transparent; border: 0; cursor: pointer;
    font-size: 12px; color: var(--scr-text-muted);
    padding: 0;
    transition: color 0.12s;
}
.up-modal-link:hover { color: var(--scr-text); text-decoration: underline; }
.up-modal-cats, .up-modal-roles {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.up-modal-chip {
    background: transparent;
    border: 1px solid var(--scr-border-soft);
    color: var(--scr-text-muted);
    border-radius: 999px;
    padding: 5px 11px;
    font-family: var(--scr-font); font-size: 12px; font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space: nowrap;
}
.up-modal-chip:hover { color: var(--scr-text); border-color: rgba(255, 255, 255, 0.20); }
.up-modal-chip.is-active {
    background: rgba(22, 163, 74, 0.16);
    border-color: rgba(22, 163, 74, 0.55);
    color: #4ade80;
}
.up-modal-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    border-top: 1px solid var(--scr-border-soft);
    background: rgba(255, 255, 255, 0.02);
}
.up-modal-foot-actions { display: flex; gap: 8px; }
.up-modal-btn {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--scr-border-soft);
    border-radius: 999px;
    color: var(--scr-text);
    font-family: var(--scr-font); font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.up-modal-btn:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.20); }
.up-modal-btn--primary {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}
.up-modal-btn--primary:hover { background: #1cbf57; border-color: #1cbf57; }
.up-modal-btn--unfollow {
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.45);
}
.up-modal-btn--unfollow:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.75);
}
@media (max-width: 540px) {
    .up-modal { padding: 0; }
    .up-modal-panel {
        max-width: none; width: 100%; height: 100%;
        max-height: 100vh; border-radius: 0; border: 0;
    }
}

/* Indicator next to trader names in any table where the signed-in
 * user follows that trader. Yellow-amber ★ — same affordance
 * TradingView uses for watchlist membership. Sits to the right of
 * the name with a small left margin so it doesn't crowd the link. */
.lb-follow-mark {
    display: inline-block;
    margin-left: 6px;
    color: #fbbf24;          /* amber-400 */
    font-size: 12px;
    line-height: 1;
    vertical-align: baseline;
    cursor: default;
}

.up-follow-btn.is-following:hover {
    background: rgba(22, 163, 74, 0.18);
    border-color: rgba(22, 163, 74, 0.65);
    color: #ffffff;
}
@media (max-width: 760px) {
    .up-header {
        grid-template-columns: auto 1fr;
        row-gap: 16px;
    }
    .up-avatar { width: 64px; height: 64px; font-size: 30px; }
    .up-action-btn { grid-column: 1 / -1; justify-self: start; }
}

.up-name {
    margin: 0; font-size: 28px; font-weight: 600;
    color: var(--scr-text); letter-spacing: -0.015em; line-height: 1.1;
}
.up-meta {
    color: var(--scr-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* Stats strip — TradingView style. A horizontal row of "label above
 * value" columns, baseline-aligned, tightly spaced. Labels are small
 * + bold, values are slightly larger + regular weight. No pill
 * chrome on the values — sign color does the work, anything more
 * reads as a buy/sell button instead of a stat. */
.up-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 36px;
    row-gap: 12px;
}
.up-stat-inline {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0;
}
.up-stat-label {
    font-size: 13px;
    color: var(--scr-text);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.up-stat-value {
    font-size: 14px;
    font-weight: 400;
    color: var(--scr-text-muted);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.up-stat-value .unp-move-pill {
    display: inline; padding: 0; background: transparent !important;
    color: inherit; font-size: inherit; font-weight: inherit; border-radius: 0;
}
.up-stat-value .unp-move-pill.is-up   { color: var(--scr-up); }
.up-stat-value .unp-move-pill.is-down { color: var(--scr-down); }

.up-section { display: flex; flex-direction: column; gap: 10px; }
.up-section-title { font-size: 14px; font-weight: 600; color: var(--scr-text); margin: 0; letter-spacing: 0; }
.up-section-sub { font-size: 12.5px; color: var(--scr-text-muted); margin: 0; line-height: 1.5; }
.up-section-sub code { background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 4px; font-size: 11.5px; }
.up-section-sub--mute { padding: 14px; border: 1px dashed var(--scr-border-soft); border-radius: 8px; }
.up-section-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* "Fetch latest" button — sits in the Recent trades section header,
 * next to the section title. Subtle by default (matches lb-seg pill
 * chrome) so it doesn't compete with the section title; brightens on
 * hover. Disabled state covers both the in-flight network call and
 * the post-call cooldown lockout. */
.up-refresh-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    height: 28px;
    font-family: var(--scr-font);
    font-size: 12px; font-weight: 500;
    color: #d1d5db;
    background: transparent;
    border: 1px solid var(--scr-border-soft);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.up-refresh-btn:hover:not(:disabled) { background: rgba(255,255,255,0.05); color: #ffffff; border-color: rgba(255,255,255,0.20); }
.up-refresh-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.up-refresh-icon { flex-shrink: 0; }
/* Export-CSV button — styled to match the stocks backtest's .stk-bt-export
   (transparent, bordered pill). Right-aligned at the end of the header. */
.up-trades-export {
    margin-left: auto;
    height: 38px; padding: 0 14px; display: inline-flex; align-items: center;
    background: transparent; border: 1px solid #2e2e2e; border-radius: 8px;
    color: #dbdbdb; font-family: var(--scr-font); font-size: 15px; font-weight: 400;
    text-transform: none; letter-spacing: 0; cursor: default;
    transition: background-color .12s ease, color .12s ease;
}
.up-trades-export:hover:not(:disabled) { background-color: #2e2e2e; color: #fff; }
.up-trades-export:disabled { opacity: .55; cursor: not-allowed; }

/* Ambient backfill-status pill in the trades section head — always reflects
   pnl_history_status on load (not just while the Fetch button is polling), so
   it's obvious whether a deep-history backfill is running, done, or failed. */
.up-backfill-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--scr-font); font-size: 11px; font-weight: 600; letter-spacing: .2px;
    padding: 3px 10px; border-radius: 999px; cursor: default;
    border: 1px solid var(--scr-border); color: var(--scr-text-muted);
    background: rgba(255,255,255,0.03);
}
/* The JS sets `hidden` for never-backfilled users, but the display rule above
 * overrides the UA [hidden]{display:none} (equal specificity → author wins),
 * leaving an empty grey pill. Restore the hide for the hidden state. */
.up-backfill-pill[hidden] { display: none; }
.up-backfill-pill.is-running  { color: #5ea3fa; border-color: rgba(94,163,250,.5);  background: rgba(94,163,250,.10); }
.up-backfill-pill.is-complete { color: #22c55e; border-color: rgba(34,197,94,.42); background: rgba(34,197,94,.08); }
.up-backfill-pill.is-failed   { color: #ef4444; border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.10); }
.up-bf-dot {
    width: 7px; height: 7px; border-radius: 50%; background: currentColor;
    animation: up-bf-pulse 1.1s ease-in-out infinite;
}
@keyframes up-bf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* "Open full view" link in the PnL-by-series section head. Small,
 * subtle, sits next to the section title — matches the refresh-btn
 * visual weight so the two read as section-level controls. */
.up-expand-link {
    font-family: var(--scr-font);
    font-size: 12px;
    color: #9598A2;
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.12s;
}
.up-expand-link:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }

/* PnL-by-series grid on the user profile page — capped to ~5 rows
 * of visible data with internal scrolling so the section doesn't
 * eat half the page. The full series list lives at
 * /users/<venue>/<user_id>/pnl-by-series via the "Open full view"
 * link above. Same flex-wrapper pattern the leaderboard pages use
 * (the noStyle build's ag-root-wrapper otherwise collapses to 0). */
#up-pnl-grid.unp-grid {
    height: 240px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
}
#up-pnl-grid.unp-grid > .ag-root-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

/* Per-category breakdown table. TradingView-style data table chrome:
 *   • capped width so it reads as a content table, not a viewport span
 *   • thin top + bottom borders frame the block; rows are separated
 *     by hairline dividers and brighten subtly on hover
 *   • column header bar above the rows (Category / Realized PnL /
 *     [bar] / Volume) — uppercased, smaller, muted, matches the
 *     header treatment TV uses on watchlists / screeners
 *   • bars use the screener's --scr-up/--scr-down TradingView palette
 *     (#26A69A teal, #EF5350 coral) — pure web green/red was too hot
 *
 * Grid template is consistent across the header and every row so the
 * columns line up: 140px / 96px / minmax(160px, 1fr) / 130px. */
/* Per-category breakdown tabs (Kalshi lifetime vs reconstructed-from-records). */
.up-cats-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.up-cats-tabs { display: inline-flex; gap: 4px; padding: 3px; background: rgba(255,255,255,0.04); border: 1px solid var(--scr-border); border-radius: 8px; }
.up-cats-tab {
    font-family: var(--scr-font); font-size: 11.5px; font-weight: 500; letter-spacing: .2px;
    color: var(--scr-text-muted); background: transparent; border: 0; border-radius: 6px;
    padding: 4px 11px; cursor: pointer; transition: background .12s, color .12s;
}
.up-cats-tab:hover { color: var(--scr-text); }
.up-cats-tab.is-active { color: #fff; background: rgba(94,163,250,0.18); }
.up-cats-note {
    /* Fixed width (not max-width) so the note's text length can't change the
     * grid column's auto-size — otherwise the shorter Kalshi-tab note made the
     * column ~13px narrower than the longer reconstructed-tab note, nudging the
     * whole overview row on tab switch. min-height reserves 2 lines so a note
     * that wraps to a different line count doesn't shift the table vertically. */
    width: 720px; max-width: 100%; box-sizing: border-box;
    min-height: 35px; margin: 0 0 12px; font-size: 11.5px; line-height: 1.5;
    color: var(--scr-text-muted);
}
.up-cats-note strong { color: var(--scr-text); font-weight: 600; }
/* Lifetime-PnL chart caption: legend swatches for recorded (solid) vs
   reconstructed (dashed), matching the line styles on the chart. */
.up-chart-note {
    max-width: 720px; margin: 9px 0 0; font-size: 11px; line-height: 1.55;
    color: var(--scr-text-muted);
}
.up-chart-note strong { color: var(--scr-text); font-weight: 600; }
.up-pnl-legend { font-weight: 600; }
.up-pnl-legend::before {
    content: ''; display: inline-block; width: 15px; height: 0;
    margin-right: 5px; vertical-align: middle; border-top: 2px solid currentColor;
}
.up-pnl-legend--rec { color: #16a34a; }
.up-pnl-legend--est { color: #94a3b8; }
.up-pnl-legend--est::before { border-top-style: dashed; }
.up-cat-table {
    width: 100%;
    /* Cap at a comfortable reading width so the bar column doesn't
     * sprawl across a 1900px monitor. The content stays anchored to
     * the left edge of its section. */
    max-width: 720px;
    border-top: 1px solid var(--scr-border-soft);
    border-bottom: 1px solid var(--scr-border-soft);
}

/* Lifetime PnL chart section. Subtle chrome — borderless container,
 * the chart's own area-fill carries the visual weight. Capped width
 * so it doesn't span a 1900px monitor; on narrow viewports it goes
 * full width. */
.up-section--chart .up-chart-wrap {
    position: relative;
    width: 100%;
    max-width: 720px;
    min-height: 220px;
}
.up-pnl-chart {
    width: 100%;
    height: 220px;
}
.up-chart-overlay {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    color: var(--scr-text-muted);
    font-size: 12.5px;
    padding: 0 18px;
    pointer-events: none;
}
/* `hidden` attribute is lower specificity than the `display: flex`
 * declaration above; force the attribute to win. */
.up-chart-overlay[hidden] { display: none; }

/* ── Follow feed (/follows) ────────────────────────────────────────
 * Screener-styled live table of trades from followed traders. Shares
 * the screener's palette, font, muted sentence-case header (with the
 * subtle vertical cell separators) and #1f1f22 row hover. One piece of
 * information per column. Newly-arrived rows briefly flash a green
 * left-edge accent so the user notices them — matches the homepage
 * sweep card's "is-new" idiom. */
/* Cap + center the feed shell like the leaderboard (.lb-shell is max-width
   1100 + margin auto). The feed has more columns, so it needs a wider cap;
   on screens wider than this the table is centered with side margins (no
   horizontal scroll — the grid fills the capped width exactly). */
.follows-page .lb-shell { max-width: 1600px; }
.flw-table {
    /* Framed like the leaderboard's #lb-grid: solid border on all four sides,
       soft internal separators. The header carries no top border, so the
       table's border-top is a single 1px line (no double-thickness top). */
    border: 1px solid var(--scr-border);
    border-radius: 6px;
}
/* Header + rows share one grid template so columns line up exactly. */
.flw-head,
.flw-row {
    display: grid;
    grid-template-columns:
        150px             /* trader   */
        80px              /* exchange */
        150px             /* time     */
        108px             /* resolves */
        minmax(160px, 1fr)/* market   */
        160px             /* outcome  */
        96px              /* category */
        62px              /* side     */
        64px              /* role     */
        60px              /* price    */
        92px              /* current  */
        82px              /* contracts*/
        96px;             /* notional */
    align-items: center;
    column-gap: 14px;
    padding: 0 12px;
}
.flw-head {
    /* Match the screener grid header: 48px tall, muted #9598A2 labels. */
    height: 48px;
    border-bottom: 1px solid var(--scr-border-soft);
    border-top-left-radius: 6px; border-top-right-radius: 6px;
    font-family: var(--scr-font);
    /* Sticky column header — same behaviour as the screener's pinned
     * grid header. Sticks just below the 64px sticky topbar; opaque
     * background so rows scroll cleanly underneath, z-index above the
     * rows but below the topbar (z-index 100). */
    position: sticky;
    top: 64px;
    z-index: 5;
    background: var(--scr-bg);
}
.flw-head[hidden] { display: none; }
.flw-h {
    position: relative;
    font-size: 14px; font-weight: 400;
    color: #9598A2; letter-spacing: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Subtle always-visible vertical separators between header cells —
 * same idiom as the screener's .ag-header-cell::after. */
.flw-h::after {
    content: ''; position: absolute;
    top: 12%; right: -7px;
    width: 1px; height: 76%;
    background: var(--scr-border-soft);
}
.flw-h:last-child::after { display: none; }
.flw-h--num { text-align: right; }

.flw-feed {
    display: flex; flex-direction: column;
    /* Clip the last row's corners to the table's rounded bottom. Safe for the
       sticky header — it lives in .flw-table (the parent), not here. */
    border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;
    overflow: hidden;
}
.flw-row {
    /* Match the screener grid: 40px rows, 14px thin (weight 200) text in
     * --scr-text, 1.4 line-height. align-items:center (set on the shared
     * grid rule) vertically centres without vertical padding. */
    min-height: 40px;
    border-bottom: 1px solid var(--scr-border-soft);
    transition: background 0.12s;
    position: relative;
    font-family: var(--scr-font);
    font-size: 14px;
    font-weight: 200;
    line-height: 1.4;
    color: var(--scr-text);
    font-variant-numeric: tabular-nums;
}
.flw-row:last-child { border-bottom: 0; }
.flw-row:hover { background: var(--scr-row-hover); }
.flw-row.is-new::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px; background: #16a34a;
    animation: flw-flash 2.8s ease-out forwards;
}
@keyframes flw-flash {
    0%   { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Every cell clips its own overflow so a long value (e.g. an absolute
 * date in the time cell, or a long nickname) can never bleed into the
 * neighbouring column. */
.flw-c { min-width: 0; overflow: hidden; }
.flw-c--time {
    font-size: 14px; color: var(--scr-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap; text-overflow: ellipsis;
}

/* Trader: circular Kalshi profile photo over a colored-initial
 * fallback + the nickname link. Image sizing mirrors the screener's
 * market-icon (fixed square, object-fit cover, overflow-clipped). */
.flw-c--trader { display: flex; align-items: center; gap: 8px; }
.flw-avatar {
    position: relative; flex: 0 0 auto;
    width: 24px; height: 24px;
    border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 11px; font-weight: 600; line-height: 1;
    user-select: none;
    background: #2e3340;   /* JS overrides with a per-user hue */
}
.flw-avatar-initial { display: inline-block; }
.flw-avatar.has-image .flw-avatar-initial { display: none; }
.flw-avatar-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
}

/* "Watching" stat → button that opens the Following list modal. Reset the
   UA button chrome, keep the .up-stat-inline column layout, default cursor. */
.flw-following-btn {
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; text-align: left; cursor: default;
}
.flw-following-valrow { display: inline-flex; align-items: center; gap: 5px; }
.flw-following-btn .up-stat-value, .flw-following-chev { transition: color .12s ease; }
.flw-following-chev { color: var(--scr-text-muted); flex-shrink: 0; }
.flw-following-btn:hover .up-stat-value,
.flw-following-btn:hover .flw-following-chev { color: #5ea3fa; }

/* Following list (inside .up-modal) — one row per followed account. */
.flw-fl-list { display: flex; flex-direction: column; }
.flw-fl-empty { padding: 22px 4px; color: var(--scr-text-muted); font-size: 14px; line-height: 1.55; }
.flw-fl-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 4px; border-bottom: 1px solid var(--scr-border);
}
.flw-fl-item:last-child { border-bottom: 0; }
.flw-fl-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.flw-fl-main .flw-avatar { width: 34px; height: 34px; font-size: 14px; }
.flw-fl-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.flw-fl-name { font-size: 14px; font-weight: 600; color: var(--scr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flw-fl-main:hover .flw-fl-name { color: #5ea3fa; }
.flw-fl-meta { font-size: 12px; color: var(--scr-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flw-fl-unfollow {
    flex-shrink: 0; height: 30px; padding: 0 12px;
    background: transparent; border: 1px solid var(--scr-border); border-radius: 7px;
    color: var(--scr-text-muted); font-size: 12px; cursor: default;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.flw-fl-unfollow:hover { background: rgba(247,82,95,.12); border-color: rgba(247,82,95,.4); color: #f7525f; }
.flw-trader {
    color: var(--scr-text); text-decoration: none;
    font-size: 14px; font-weight: 200;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flw-trader:hover { color: #22ee88; text-decoration: underline; }

/* Exchange: the venue's brand logo only (no label), styled identically
 * to the /crypto table's venue column. Uses the shared .cx-venue-ico /
 * .cx-venue-link classes (defined below) so the two pages can't drift. */
.flw-c--exchange { display: flex; align-items: center; }

/* Venue brand-mark shared by the /crypto and /follows tables. Mirrors
 * the inline definitions in crypto.html so the icon-as-link reads the
 * same across pages: 22px rounded mark inside a 28x26 hover pill. */
.cx-venue-ico {
    width: 22px; height: 22px; border-radius: 4px;
    vertical-align: middle; object-fit: contain;
}
.cx-venue-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 26px;
    border-radius: 4px;
    transition: background 80ms ease-out;
    text-decoration: none;
}
.cx-venue-link:hover { background: rgba(96, 165, 250, 0.16); text-decoration: none; }
/* Non-clickable variant (no market url): same box for column alignment, but
   no hover pill / pointer affordance. */
.cx-venue-link--static { cursor: default; }
.cx-venue-link--static:hover { background: transparent; }

.flw-c--market { min-width: 0; }
.flw-mkt-title {
    color: var(--scr-text); text-decoration: none;
    font-size: 14px; font-weight: 200; line-height: 1.4;
    display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.flw-mkt-title:hover { color: #22ee88; text-decoration: underline; }

/* Outcome — its own column, styled like the Market body cell (plain text,
 * not a pill) so the two read as siblings. */
.flw-c--outcome { display: flex; align-items: center; }
.flw-mkt-outcome {
    color: var(--scr-text);
    font-size: 14px; font-weight: 200; line-height: 1.4;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
/* Ticker — its own column, monospace + muted (it's a contract code). */
.flw-c--ticker {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12.5px; color: var(--scr-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The ticker links to the contract's Kalshi page — keep the mono/dim
 * look, add the same green hover affordance as the title + trader. */
a.flw-ticker-link { color: inherit; text-decoration: none; }
a.flw-ticker-link:hover { color: #22ee88; text-decoration: underline; }

/* Category — plain text like the screener (no uppercase, --scr-text). */
.flw-c--cat, .flw-c--role {
    color: var(--scr-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flw-c--side { display: flex; align-items: center; }
.flw-c--num {
    text-align: right;
    font-variant-numeric: tabular-nums; color: var(--scr-text);
}
.flw-c--time { white-space: nowrap; }
.flw-dash { color: var(--scr-text-dim); }

/* Current price vs the trader's entry: green = still enterable at an
 * equal-or-better price (or a settled market that paid ≥ entry); red =
 * the market has moved against re-entry. Same up/down vocab as the
 * screener. */
.flw-cur--good { color: var(--scr-up); }
.flw-cur--bad  { color: var(--scr-down); }

/* Filter toolbar above the table — same pill chrome as the rest of the
 * app (.lb-seg). Tied to "following anyone", not to the visible rows. */
.flw-toolbar {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin: 0 0 12px;
}
.flw-toolbar[hidden] { display: none; }

.flw-signed-out {
    padding: 28px 24px;
    text-align: center;
    color: var(--scr-text-muted);
    border: 1px dashed var(--scr-border-soft);
    border-radius: 8px;
}
.flw-signed-out-actions {
    display: flex; gap: 12px; justify-content: center;
    margin-top: 16px;
}

/* ── Feed page: AG Grid layout ──────────────────────────────────────
   Flex-column shell so the grid fills the space below the header +
   toolbar and scrolls internally (same pattern the leaderboard /
   explorer use). Without a bounded height AG Grid can't virtualise. */
.follows-page .lb-shell {
    display: flex; flex-direction: column;
    height: calc(100vh - 64px);
    padding-bottom: 18px; box-sizing: border-box;
    overflow: hidden;
}
.follows-page .up-header,
.follows-page .up-section-head,
.follows-page .flw-toolbar,
.follows-page .up-section-sub { flex-shrink: 0; }
.follows-page .up-section { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.follows-page .flw-grid-main { flex: 1; min-height: 0; }

/* Signed-out / empty state overlays the grid viewport. */
#flw-message {
    position: absolute; inset: 0; z-index: 3;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; padding: 28px 24px;
    color: var(--scr-text-muted);
    background: var(--scr-bg);
}
#flw-message[hidden] { display: none; }

/* Frame the feed table on all four sides, like the leaderboard's #lb-grid. */
#flw-grid {
    border: 1px solid var(--scr-border);
    border-radius: 6px;
    overflow: hidden;   /* clip header/row corners to the rounded border */
}
/* Header cells carry their own 1px top border (needed by the borderless
   screener). Inside the framed grid it stacks under the table's top border and
   reads as ~2px — drop it so the top edge matches the sides. */
#flw-grid .ag-header-cell { border-top: none !important; }
/* The screener's far-right edge divider would float just past the framed
   border now, so hide it on the feed (the border frames the table). */
.follows-page .screener-grid-wrap::after { display: none; }

/* Trader cell: avatar + ellipsised name. AG Grid already makes .ag-cell a
   centred flex row with overflow:hidden, so we only style the inner content
   here (a blanket .ag-cell flex override clobbered AG's clipping → cells
   overflowed into their neighbours). */
.flw-trader-cell { display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; }
.flw-trader-cell .flw-trader { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Left-align the Trader + Market columns (the global .ag-cell rule centres
   everything; a long market title reads wrong centred + clipped both ends). */
#flw-grid .ag-cell.flw-cell-trader,
#flw-grid .ag-cell.flw-cell-market { justify-content: flex-start; text-align: left; }
/* Let cell content shrink inside the flex cell so long text ellipsises (the
   "…") instead of hard-clipping at the edge. AG wraps each renderer's output in
   a flex-item span whose default min-width:auto keeps it at content size;
   min-width:0 + overflow:hidden lets it shrink to the cell width. */
#flw-grid .ag-cell > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#flw-grid .flw-mkt-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Infinite-scroll sentinel: an IntersectionObserver target at the
 * bottom of the table that triggers the next older page. Doubles as the
 * "Loading older fills…" / "No more fills." status line. */
.flw-sentinel {
    /* min-height keeps the element laid out (and thus observable by the
     * IntersectionObserver) even when its status text is empty. */
    min-height: 24px;
    padding: 14px 12px;
    text-align: center;
    font-size: 12px;
    color: var(--scr-text-muted);
    font-family: var(--scr-font);
}

@media (max-width: 860px) {
    /* Stack the row vertically on phones; the multi-column grid
     * compresses unreadably. Hide the desktop header — the stacked rows
     * are self-labeling via their pills + right-aligned numerics. */
    .flw-head { display: none; }
    .flw-row {
        grid-template-columns: 1fr auto auto;
        column-gap: 12px; row-gap: 6px;
        padding: 12px;
    }
    .flw-c--trader  { grid-column: 1 / -1; order: -5; }
    .flw-c--exchange{ grid-column: 1 / -1; order: -4; }
    .flw-c--time    { grid-column: 1 / -1; order: -3; font-size: 11px; }
    .flw-c--resolves { display: none; }   /* fold the Resolves column on phones */
    .flw-c--market  { grid-column: 1 / -1; order: -2; }
    .flw-c--outcome { grid-column: 1 / -1; order: -1; }
    .flw-c--cat    { grid-column: 1; }
    .flw-c--side   { grid-column: 2; justify-content: flex-start; }
    .flw-c--role   { grid-column: 3; justify-content: flex-start; }
    .flw-c--num {
        grid-column: span 1;
        text-align: left;
        font-size: 11.5px;
        color: var(--scr-text-muted);
    }
}
.up-cat-thead,
.up-cat-card {
    display: grid;
    grid-template-columns: 130px 90px 74px minmax(140px, 1fr) 120px;
    align-items: center;
    column-gap: 14px;
    padding: 0 12px;
}
.up-cat-thead {
    height: 32px;
    border-bottom: 1px solid var(--scr-border-soft);
    background: transparent;
}
.up-cat-th {
    font-family: var(--scr-font);
    font-size: 11px;
    font-weight: 500;
    color: var(--scr-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.up-cat-th--pnl, .up-cat-th--roi, .up-cat-th--vol { text-align: right; }
.up-cat-grid {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
}
.up-cat-grid--empty {
    color: var(--scr-text-muted); font-size: 12.5px;
    padding: 14px;
    display: block; grid-template-columns: none;
}
.up-cat-card {
    height: 32px;
    border-bottom: 1px solid var(--scr-border-soft);
    transition: background 0.08s;
}
.up-cat-card:last-child { border-bottom: 0; }
.up-cat-card:hover { background: rgba(255, 255, 255, 0.025); }
/* HTML `hidden` attribute has lower specificity than the
 * `display: grid` set on .up-cat-card. Force display: none so the
 * collapse toggle actually hides rows beyond the cutoff. */
.up-cat-card[hidden] { display: none; }
.up-cat-cat {
    font-size: 12.5px;
    color: var(--scr-text);
    text-transform: none; letter-spacing: 0;
    font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.up-cat-pnl {
    font-size: 13px;
    font-variant-numeric: tabular-nums; text-align: right;
    color: var(--scr-text);
}
/* Match the screener's delta-pill palette so up/down on this page
 * reads the same as up/down on /screener. */
.up-cat-pnl.is-up   { color: #16a34a; }
.up-cat-pnl.is-down { color: #ef4444; }
.up-cat-vol {
    font-size: 12px; color: var(--scr-text-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
    text-align: right;
}
/* ROI cell — same green/red pill chrome as the screener's Δ delta
 * columns (.unp-move-pill), minus the arrow glyph. Right-aligned in
 * its column so the pill anchors to the column edge regardless of
 * label length. */
.up-cat-roi {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.up-cat-roi-pill {
    display: inline-block;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: #f3f4f6;
    padding: 1px 6px;
    border-radius: 4px;
    line-height: 1.3;
    white-space: nowrap;
}
.up-cat-roi-pill.is-up   { background: #16a34a; }
.up-cat-roi-pill.is-down { background: #ef4444; }
.up-cat-roi-mute {
    color: var(--scr-text-muted);
    font-size: 12px;
}
/* Diverging bar: 1-pixel zero axis flanked by two flex-half tracks.
 * Negative fill anchors right edge of left track + grows left;
 * positive fill anchors left edge of right track + grows right. */
.up-cat-bar {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: center;
    height: 8px;
    min-width: 0;
}
.up-cat-bar-neg { display: flex; justify-content: flex-end; height: 100%; }
.up-cat-bar-pos { display: flex; justify-content: flex-start; height: 100%; }
.up-cat-bar-axis {
    width: 1px; height: 14px;
    background: rgba(255, 255, 255, 0.12);
}
.up-cat-bar-fill { height: 100%; min-width: 2px; }
.up-cat-bar-fill.is-up   { background: #16a34a; border-radius: 0 1px 1px 0; }
.up-cat-bar-fill.is-down { background: #ef4444; border-radius: 1px 0 0 1px; }

.up-cat-card--other { cursor: default; }
.up-cat-card--other .up-cat-cat {
    text-decoration: underline dotted; text-underline-offset: 3px;
}
.up-cat-card--other .up-cat-cat::after {
    content: ' ⓘ'; font-size: 10px; color: var(--scr-text-muted);
}
/* "Show all" / "Show fewer" toggle below the per-cat table. Subtle
 * text-link styling — TradingView keeps these affordances quiet. */
.up-cat-toggle {
    align-self: flex-start;
    margin-top: 8px;
    padding: 4px 0;
    font-family: var(--scr-font);
    font-size: 12px;
    font-weight: 500;
    color: #9598A2;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color 0.12s;
}
.up-cat-toggle:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) {
    /* Drop the bar column on phones — PnL + ROI signs carry the
     * direction without sacrificing readable horizontal space. */
    .up-cat-thead,
    .up-cat-card { grid-template-columns: 1fr auto auto auto; column-gap: 14px; }
    .up-cat-th--bar, .up-cat-bar { display: none; }
}

/* Ticker monospace for readability against the page's variable font. */
.up-ticker { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; color: var(--scr-text-dim); }

/* Direction pill on the user-profile trades grid. Same chrome as the
 * .sweep-dollar-pill chip on the homepage's recent-sweeps cards:
 * solid green/red background, off-white text, fully rounded pill,
 * uppercase Inter, asymmetric vertical padding to optical-center the
 * cap-height-only glyphs. Width is slightly narrower than the sweep
 * version (which holds "$1.2k YES") since this only carries the side. */
.up-side {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-feature-settings: "case" on;
    font-variant-numeric: lining-nums tabular-nums;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    padding: 6px 12px 5px;
    border-radius: 100px;
    border: 1px solid;
    white-space: nowrap;
    width: 60px;
    box-sizing: border-box;
    color: #f3f4f6;
}
.up-side--yes { background: #16a34a; border-color: #16a34a; }
.up-side--no  { background: #ef4444; border-color: #ef4444; }

/* Public users get a brighter trader-name link to signal that a click
   leads to the in-app profile + trade history (vs the external Kalshi
   profile for private users). */
.lb-trader-name--public { color: var(--scr-text); }
.lb-trader-name--public:hover { color: #22ee88; text-decoration: underline; }

/* Deep-history opt-in card — shown on the profile page when a user
   hasn't been backfilled yet. Mirrors the .up-cat-card visual weight
   (subtle border, sunken background) so it reads as "an action panel
   inside this section", not a callout. */
.up-opt-card { padding: 16px 18px; border: 1px solid var(--scr-border-soft);
    border-radius: 8px; background: rgba(28, 29, 34, 0.45); }
.up-opt-card--running { background: rgba(40, 32, 18, 0.45); border-color: rgba(255, 191, 90, 0.25); }
.up-opt-body { display: flex; flex-direction: column; gap: 10px; }
.up-opt-title { font-size: 14px; font-weight: 600; color: var(--scr-text); margin: 0;
    display: flex; align-items: center; gap: 8px; }
.up-opt-sub { font-size: 12.5px; color: var(--scr-text-muted); margin: 0; line-height: 1.5; }
.up-opt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px;
    margin: 2px 0; }
.up-opt-stat { display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px; border: 1px solid var(--scr-border-soft); border-radius: 6px;
    background: rgba(0,0,0,0.18); }
.up-opt-stat-label { font-size: 10.5px; color: var(--scr-text-muted);
    text-transform: uppercase; letter-spacing: 0.04em; }
.up-opt-stat-value { font-size: 13px; color: var(--scr-text); font-variant-numeric: tabular-nums; }
.up-opt-warn { color: #ffbf5a; }
.up-opt-cta { align-self: flex-start; padding: 9px 16px; border: 1px solid #2e2e2e;
    border-radius: 8px; background: transparent; color: var(--scr-text);
    font-family: var(--scr-font); font-size: 14px; cursor: pointer;
    transition: background 0.12s, border-color 0.12s; }
.up-opt-cta:hover:not(:disabled) { background: #2e2e2e; border-color: #404040; }
.up-opt-cta:disabled { color: var(--scr-text-muted); cursor: default; }
.up-opt-error { font-size: 12px; color: var(--scr-down); margin: 0; line-height: 1.5; }
/* Tiny inline spinner next to the "Backfill in progress" header. */
.up-opt-spinner { width: 11px; height: 11px; border: 2px solid rgba(255, 191, 90, 0.3);
    border-top-color: #ffbf5a; border-radius: 50%; display: inline-block;
    animation: up-opt-spin 0.9s linear infinite; }
@keyframes up-opt-spin { to { transform: rotate(360deg); } }

/* Progress bar inside the "Backfill in progress" card. Thin amber
   fill matches the spinner; CSS transition softens jumps between
   discrete server-side progress ticks. */
.up-opt-progress { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.up-opt-progress-bar { width: 100%; height: 6px; border-radius: 3px;
    background: rgba(255, 191, 90, 0.10); overflow: hidden; }
.up-opt-progress-fill { height: 100%; width: 0%; background: #ffbf5a;
    border-radius: 3px; transition: width 0.6s ease-out; }
.up-opt-progress-meta { display: flex; justify-content: space-between;
    align-items: center; gap: 8px; font-size: 12px; }
.up-opt-progress-label { color: var(--scr-text-muted); }
.up-opt-progress-pct { color: var(--scr-text); font-variant-numeric: tabular-nums; }

/* User-profile market cell — two-line layout: title up top + raw
   ticker + side-specific subtitle below, plus a small category chip. */
.up-trades-toolbar { display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; margin: 4px 0 10px; }
.up-mkt { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; padding: 6px 0;
    min-width: 0; }
.up-mkt-title { color: var(--scr-text); font-size: 13px; font-weight: 500;
    /* Long Kalshi series titles wrap to 2 lines (column has autoHeight) instead
       of overflowing the cell horizontally like the broken pre-fix layout. */
    white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
/* Clickable title — opens the Kalshi market page in a new tab. Same
   green hover the leaderboard uses for public trader names so the
   "this is a link" affordance reads consistently. */
.up-mkt-title--link { text-decoration: none; color: var(--scr-text); }
.up-mkt-title--link:hover { color: #22ee88; text-decoration: underline; }

/* Maker / Taker role pill on the recent-trades grid. Lower-contrast
 * than the BUY YES / BUY NO direction pill so the row's visual weight
 * stays on Direction + Price; the role is supporting context for
 * "passive vs. aggressive" reads. */
.up-role-cell { display: inline-flex; align-items: center; justify-content: center; width: 100%; }
.up-role-pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    font-family: var(--scr-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.35;
}
.up-role-pill--taker {
    /* Crossed the spread — active aggressor. */
    background: rgba(255,255,255,0.08);
    color: #e7e7ec;
    border: 1px solid rgba(255,255,255,0.18);
}
.up-role-pill--maker {
    /* Provided liquidity — passive. Slightly more muted than taker. */
    background: rgba(255,255,255,0.04);
    color: #9598A2;
    border: 1px solid rgba(255,255,255,0.10);
}
.up-mkt-cat { display: inline-block; margin-left: 8px; padding: 1px 6px;
    background: rgba(255,255,255,0.06); border-radius: 4px;
    font-size: 10.5px; font-weight: 500; color: var(--scr-text-muted);
    letter-spacing: 0.02em; }
.up-mkt-meta { font-size: 11px; color: var(--scr-text-muted); font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.up-mkt-ticker { color: var(--scr-text-muted); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; }
.up-mkt-sub { color: var(--scr-text-dim); font-family: var(--scr-font); }
/* Outcome column (split out of the old combined Market cell). */
.up-cell-outcome { color: var(--scr-text); }

/* Owner-only tab marker (stocks/crypto Backtest). Amber so it reads as
   "private / not public yet"; the asterisk + adjacent note explain it.
   Placed after the base .screener-pill rules so the active state wins. */
.screener-pill--owner { color: #f5b301; }
.screener-pill--owner:hover { color: #ffcf3f; }
.screener-pill--owner.is-active { background-color: rgba(245, 179, 1, .16); color: #ffcf3f; }
.owner-star { color: #f5b301; font-weight: 700; font-size: .85em; margin-left: 1px; vertical-align: 2px; }
.owner-tab-note { align-self: center; margin-left: 8px; font-size: 11px; font-weight: 600;
    color: #f5b301; opacity: .85; white-space: nowrap; }

/* Exotic (parlay) leg breakdown in the Market cell — one row per leg, the
   selection on top and its game + market type beneath, so "yes Milwaukee"
   reads as "Milwaukee vs Colorado · Winner". */
.up-legs { display: flex; flex-direction: column; gap: 5px; padding: 5px 0; text-align: left; }
.up-leg { display: flex; flex-direction: column; line-height: 1.3; }
.up-leg + .up-leg { border-top: 1px solid var(--scr-border, #1c2030); padding-top: 5px; }
.up-leg-sel { color: var(--scr-text); font-size: 13px; font-weight: 500; }
.up-leg-meta { color: var(--scr-text-muted); font-size: 11px; }
.up-leg-side { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .03em;
    padding: 0 4px; border-radius: 3px; margin-right: 6px; vertical-align: 1px; }
.up-leg-side--yes { color: #0b3; background: rgba(34, 238, 136, .14); }
.up-leg-side--no  { color: #e55; background: rgba(255, 90, 90, .14); }
/* Each leg's selection links to its own Kalshi contract (green hover, like the
   market title link). */
.up-leg-sel-link { color: var(--scr-text); text-decoration: none; }
.up-leg-sel-link:hover { color: #22ee88; text-decoration: underline; }

/* ── Shared column-filter chrome (Unpriced.ColFilter) ──────────────────
   3-dot menu button injected at the right edge of each <th> on the
   /crypto, /stocks, /mention-markets vanilla tables. Popup itself uses
   the existing global `.ag-popup-child` / `.ag-filter` / `.ag-input-field-input`
   rules so the chrome is pixel-identical to the screener. */
.unp-cf-th { position: relative; }
.unp-cf-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--scr-text-muted);
    cursor: pointer;
    border-radius: 4px;
    opacity: 0;
    vertical-align: middle;
    transition: opacity 80ms, background 80ms, color 80ms;
}
.unp-cf-menu > svg { display: block; }
.unp-cf-th:hover > .unp-cf-menu,
.unp-cf-th.unp-cf-anchor-open > .unp-cf-menu,
.unp-cf-th.unp-cf-active > .unp-cf-menu { opacity: 1; }
.unp-cf-menu:hover { background: rgba(255, 255, 255, 0.06); color: var(--scr-text); }
.unp-cf-th.unp-cf-active > .unp-cf-menu { color: var(--scr-text); }
/* Popup positioning. JS sets top/left from the th's bounding rect; the
   chrome (bg, border, shadow, padding, input + button styles) is fully
   inherited from `.ag-popup-child` / `.ag-filter` / `.ag-input-field-input`
   / `.ag-filter-apply-panel-button` already in this stylesheet. */
.unp-cf-popup {
    position: fixed;
    z-index: 4000;
    font-family: var(--scr-font);
}

/* ── Sharp Flow page ─────────────────────────────────────────────────
   Defended-price-zone leaderboard. Reuses .refills-table / .walls-table
   layout; these are the row-cell accents specific to the lifecycle view. */
.sf-table th, .sf-table td { white-space: nowrap; }
/* Fixed-width Event + Outcome columns — text wraps to a max of 2 lines, then
   ellipsis, instead of pushing the table wider. */
/* "vs top of book" tag under each side's price (at top / N¢ back / inside) */
.sf-vstop { display: block; font-size: 0.64rem; font-weight: 600; margin-top: 1px; line-height: 1.1; cursor: default; }
.sf-vstop--at { color: #2ecc71; }
.sf-vstop--back { color: var(--scr-muted, #8a8f98); }
.sf-col-event { width: 340px; min-width: 340px; max-width: 340px; overflow: hidden; vertical-align: middle; }
.sf-col-outcome { width: 200px; min-width: 200px; max-width: 200px; overflow: hidden; vertical-align: middle; }
.sf-col-event .rfl-mkt-title,
.sf-col-outcome .sf-outcome {
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    white-space: normal; max-width: 100%; line-height: 1.25;
}
.sf-col-event .sf-mktline { align-items: center; }   /* logo + text vertically centered */
.sf-col-score { font-weight: 700; }
.sf-reposted { color: var(--scr-up, #2ecc71); }
.sf-band { color: var(--scr-muted, #8a8f98); font-size: 0.82em; margin-left: 2px; }

.sf-lean {
    display: inline-block; padding: 1px 6px; border-radius: 3px;
    font-size: 0.74rem; font-weight: 700; letter-spacing: .02em;
}
.sf-lean--accum { background: rgba(46, 204, 113, .16); color: #2ecc71; }
.sf-lean--cap   { background: rgba(231, 76, 60, .16);  color: #e74c3c; }

.sf-refill { font-weight: 700; }
.sf-refill--grow { color: #2ecc71; }
.sf-refill--hold { color: #6fcf97; }
.sf-refill--weak { color: var(--scr-muted, #8a8f98); }

.sf-hidden { color: #f1c40f; font-weight: 700; }

.sf-starts { color: var(--scr-muted, #8a8f98); }
.sf-starts--soon { color: #f1c40f; font-weight: 700; }
.sf-live { color: #e74c3c; font-weight: 700; letter-spacing: .04em; }

.sf-pulled--hot { color: #e74c3c; font-weight: 700; }

/* ── Sharp Flow: paired YES/NO per-strike rows ─────────────────────── */
.sf-yn { display: flex; flex-direction: column; line-height: 1.25; }
.sf-yn-y { } /* YES-buy side (top) */
.sf-yn-n { color: var(--scr-muted, #8a8f98); border-top: 1px dotted rgba(255,255,255,.07); margin-top: 1px; padding-top: 1px; } /* NO-buy side (bottom) */
.sf-tag { display: inline-block; min-width: 26px; text-align: center; padding: 0 4px; border-radius: 3px; font-size: 0.62rem; font-weight: 800; letter-spacing: .04em; }
.sf-tag--y { background: rgba(46,204,113,.16); color: #2ecc71; }
.sf-tag--n { background: rgba(231,76,60,.14); color: #e07a6f; }
.sf-col-yn { width: 44px; }
.sf-unobs { color: #f1c40f; font-weight: 700; margin-left: 2px; cursor: default; }
.sf-pulled { color: var(--scr-muted, #8a8f98); }
.sf-pulled--hot { color: #e74c3c; font-weight: 700; }

/* ── Backtest calibration (reliability) chart — TradingView styling ────────
   Shared across /stocks, /crypto and /mention-markets backtests. Reliability
   diagram: x = predicted win-rate, y = realized win-rate, dashed diagonal =
   perfect calibration. One dot per probability bucket, sized by trade count.
   A dashed crosshair follows the cursor and SNAPS to the nearest bucket,
   surfacing value pills on both scales + a floating tooltip — the same hover
   model as the survivorship curve, restyled like a TradingView panel.
   TV palette: panel #0e1016, grid #1c2030, axis text #787b86, crosshair
   #758696, crosshair label #2a2e39, series blue #2962ff. */
.bt-cal {
    position: relative; height: 300px; font-family: var(--scr-font);
    background: #0e1016; border: 1px solid #1c2030; border-radius: 6px;
    overflow: hidden;
}
/* Top overlay: title (left) + legend (right), TradingView-style. */
.bt-cal-head {
    position: absolute; top: 8px; left: 12px; right: 54px; z-index: 4;
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; pointer-events: none;
}
.bt-cal-title { font-size: 12px; font-weight: 600; color: #d1d4dc; letter-spacing: .2px; }
.bt-cal-title small { font-weight: 400; color: #787b86; margin-left: 6px; font-size: 11px; }
.bt-cal-legend { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.bt-cal-lg { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: #9aa0aa; white-space: nowrap; }
.bt-cal-lg-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(41,98,255,.55); border: 1.5px solid #2962ff; }
.bt-cal-lg-diag { width: 16px; border-top: 1px dashed #787b86; }
/* Plot area: right-side price scale + bottom time scale (axis lines). */
.bt-cal-plot {
    position: absolute; left: 16px; right: 46px; top: 34px; bottom: 40px;
    border-right: 1px solid #2a2e39; border-bottom: 1px solid #2a2e39;
}
.bt-cal-grid { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bt-cal-diag { stroke: #787b86; stroke-width: 1; stroke-dasharray: 4 3; opacity: .65; }
.bt-cal-gl   { stroke: #1c2030; stroke-width: 1; }
.bt-cal-dot {
    position: absolute; transform: translate(-50%, -50%); border-radius: 50%;
    background: rgba(41,98,255,.55); border: 1.5px solid #2962ff;
    cursor: pointer; z-index: 2; transition: background .1s ease, box-shadow .1s ease;
}
.bt-cal-dot.is-active { background: rgba(41,98,255,.95); box-shadow: 0 0 0 4px rgba(41,98,255,.22); z-index: 5; }
/* Dashed crosshair (snaps to the nearest bucket). */
.bt-cal-cx { position: absolute; pointer-events: none; z-index: 3; display: none; }
.bt-cal-cx.is-on { display: block; }
.bt-cal-cx-v { top: 0; bottom: 0; width: 0; border-left: 1px dashed #758696; }
.bt-cal-cx-h { left: 0; right: 0; height: 0; border-top: 1px dashed #758696; }
/* Crosshair value pills on each scale. */
.bt-cal-axlab {
    position: absolute; z-index: 6; display: none; font-size: 10px; color: #d1d4dc;
    background: #2a2e39; padding: 1px 5px; border-radius: 2px; white-space: nowrap;
    pointer-events: none; font-variant-numeric: tabular-nums;
}
.bt-cal-axlab.is-on { display: block; }
.bt-cal-axlab-x { top: 100%; transform: translate(-50%, 5px); }
.bt-cal-axlab-y { left: 100%; transform: translate(5px, -50%); }
/* Static scale tick labels: y on the right (price scale), x along the bottom. */
.bt-cal-tick { position: absolute; font-size: 9px; color: #787b86; font-variant-numeric: tabular-nums; pointer-events: none; }
.bt-cal-tick--x { top: calc(100% + 5px); transform: translateX(-50%); }
.bt-cal-tick--y { left: calc(100% + 7px); transform: translateY(-50%); }
/* Axis titles. */
.bt-cal-xtitle {
    position: absolute; left: 16px; right: 46px; bottom: 6px; text-align: center;
    font-size: 10px; letter-spacing: .3px; color: #787b86;
}
.bt-cal-ytitle {
    position: absolute; left: 0; top: 34px; bottom: 40px; width: 12px;
    display: flex; align-items: center; justify-content: center;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: 10px; letter-spacing: .3px; color: #787b86;
}
.bt-cal-empty { color: #787b86; font-size: 12px; padding: 24px 4px; }
/* Floating tooltip at the snapped bucket. */
.bt-cal-tip {
    position: absolute; z-index: 7; display: none; pointer-events: none;
    transform: translate(-50%, calc(-100% - 12px));
    background: #1c2030; border: 1px solid #2a2e39; border-radius: 6px;
    padding: 7px 10px; min-width: 124px; white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0,0,0,.55);
}
.bt-cal-tip.is-on { display: block; }
.bt-cal-tip-h { font-size: 12px; font-weight: 600; color: #d1d4dc; margin-bottom: 4px; }
.bt-cal-tip-r { font-size: 11px; color: #9aa0aa; line-height: 1.5; }
.bt-cal-tip-r b { color: #d1d4dc; font-weight: 600; }
/* Bucket-size selector in the calibration section header. */
.bt-cal-buckets { display: inline-flex; gap: 4px; margin-left: 10px; vertical-align: middle; }
.bt-cal-buckets .screener-pill { padding: 2px 8px; font-size: 11px; }

/* ── Mention board: live base/count situation caveat (grand slam / bases
   loaded — terms our FV model doesn't yet condition on). Amber rail = YES
   edge understated (still tradeable); orange = NO edge overstated (sit out). */
.mm-bd-row--situ { box-shadow: inset 3px 0 0 #f1c40f; }
.mm-bd-row--situ.mm-bd-row--situ-no { box-shadow: inset 3px 0 0 #e67e22; }
.mm-bd-situ {
    display: inline-block; margin-left: 6px; padding: 0 5px;
    border-radius: 3px; font-size: 0.66rem; font-weight: 800; letter-spacing: .03em;
    color: #f1c40f; background: rgba(241, 196, 15, .14); cursor: default; white-space: nowrap;
}
.mm-bd-row--situ-no .mm-bd-situ { color: #e67e22; background: rgba(230, 126, 34, .14); }

/* Sharp Flow: exchange logo + strike name on one line (logo styled via the
   shared crypto-table .cx-venue-ico / .cx-venue-link rules). */
.sf-mktline { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sf-mktline .cx-venue-ico { flex: 0 0 auto; }
.sf-mktline .rfl-mkt-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ── Sharp Flow Tier 2: timeline drawer + lightweight-charts ─────────── */
.sf-row { cursor: pointer; }
.sf-drawer { position: fixed; inset: 0; z-index: 4000; }
.sf-drawer[hidden] { display: none; }
.sf-drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.sf-drawer-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: #0e0f12; border-top: 1px solid rgba(255,255,255,.12);
    padding: 14px 18px 18px; max-height: 72vh; box-shadow: 0 -8px 24px rgba(0,0,0,.45);
}
.sf-drawer-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.sf-drawer-title { font-weight: 700; font-size: 1rem; }
.sf-drawer-sub { color: var(--scr-muted,#8a8f98); font-size: .8rem; margin-top: 2px; }
.sf-drawer-close { background: none; border: 0; color: #9aa0a6; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.sf-drawer-close:hover { color: #fff; }
.sf-chart { width: 100%; height: 300px; }
.sf-heatmap { display: block; width: 100%; }
/* Automated pattern read under the chart title */
.sf-pattern { margin: 4px 0 2px; font-size: .8rem; line-height: 1.35; }
.sf-pat-label { font-weight: 800; padding: 1px 7px; border-radius: 4px; margin-right: 6px; font-size: .72rem; letter-spacing: .02em; }
.sf-pat--sharp { background: rgba(46,204,113,.16); color: #2ecc71; }
.sf-pat--neutral { background: rgba(241,196,15,.15); color: #f1c40f; }
.sf-pat--weak { background: rgba(231,76,60,.16); color: #e74c3c; }
.sf-pat-detail { color: var(--scr-muted, #8a8f98); }
/* Flow-bar hover tooltip */
.sf-bar-tip { position: fixed; z-index: 9999; pointer-events: none; background: #0d0f12; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 6px 9px; font-size: .72rem; line-height: 1.5; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.sf-bar-tip span { display: block; }
.sf-bar-tip b { display: block; margin-bottom: 2px; color: #e6e6e6; }
.sf-tip-add { color: #2ecc71; } .sf-tip-tk { color: #e74c3c; } .sf-tip-pl { color: #8a8f98; } .sf-tip-wall { color: #9aa0a6; }
.sf-chart-modes { display: inline-flex; gap: 4px; margin: 0 10px; }
.sf-chart-modes button { background: transparent; border: 1px solid rgba(255,255,255,.15); color: var(--scr-muted,#8a8f98); font-size: .68rem; font-weight: 600; padding: 2px 9px; border-radius: 4px; cursor: pointer; }
.sf-chart-modes button.is-active { background: rgba(255,255,255,.12); color: #e6e6e6; border-color: rgba(255,255,255,.25); }
.sf-chart-legend { display: flex; gap: 16px; align-items: center; margin-top: 8px; font-size: .75rem; color: var(--scr-muted,#8a8f98); }
.sf-leg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.sf-leg--yes { background: #2ecc71; } .sf-leg--no { background: #e74c3c; } .sf-leg--take { background: #9aa0a6; }
.sf-leg--abs { background: repeating-linear-gradient(90deg, #cfd3d8 0 3px, transparent 3px 6px); border-radius: 0; }
.sf-chart-note { margin-left: auto; font-style: italic; opacity: .8; }

/* ── Dual-handle range slider (_range_slider.js) — gross-price/ask filter
   on the /crypto /stocks /mention-markets board + backtest. ── */
.unp-rs { width: 150px; user-select: none; }
.unp-rs-track {
  position: relative; height: 4px; margin: 9px 7px 6px;
  background: #2a2a2e; border-radius: 3px;
}
.unp-rs-fill {
  position: absolute; top: 0; height: 100%;
  background: #3f4042; border-radius: 3px;
}
.unp-rs--active .unp-rs-fill { background: #2962ff; }
.unp-rs-handle {
  position: absolute; top: 50%; width: 13px; height: 13px; padding: 0;
  margin: 0; transform: translate(-50%, -50%); border-radius: 50%;
  background: #d8d8d8; border: 1px solid #0d0d0e; cursor: grab;
  box-shadow: 0 1px 2px rgba(0,0,0,.5); touch-action: none; z-index: 2;
}
.unp-rs-handle:hover { background: #fff; }
.unp-rs-handle:active { cursor: grabbing; }
.unp-rs-handle:focus-visible { outline: 2px solid #2962ff; outline-offset: 1px; }
.unp-rs--active .unp-rs-handle { background: #fff; }
.unp-rs-labels {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--scr-text-muted, #8c8c8c);
  font-variant-numeric: tabular-nums;
}
.unp-rs--active .unp-rs-labels { color: #dbdbdb; }

/* ── Sharp Flow Tier 2: INLINE expanded chart row (replaces bottom drawer) ── */
.sf-row--expanded { background: rgba(255,255,255,.05); }
.sf-detail > td { padding: 0; }
.sf-detail-inner { padding: 12px 16px 16px; background: #0e0f12; border-bottom: 2px solid rgba(94,163,250,.35); }
.sf-detail-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.sf-detail-title { font-weight: 700; font-size: .9rem; }
.sf-detail-close { margin-left: auto; background: none; border: 0; color: #9aa0a6; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.sf-detail-close:hover { color: #fff; }
.sf-detail-inner .sf-chart { height: 280px; }

/* Sharp Flow: refresh button + outcome sub-label */
.sf-refresh-btn.is-loading { opacity: .55; pointer-events: none; }
.sf-outcome-lab { color: var(--scr-muted, #8a8f98); font-weight: 600; }

/* Sharp Flow: muted refill ratio when fill volume is too low to be meaningful */
.sf-refill--lowfill { color: var(--scr-muted, #8a8f98); font-weight: 400; cursor: default; }

/* ── Sharp Flow: "Bet" column (follow-the-smart-money for rec traders) ── */
.sf-col-bet { width: 150px; white-space: nowrap; }
.sf-bet { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sf-call { font-size: 0.66rem; font-weight: 800; letter-spacing: .03em; padding: 1px 5px; border-radius: 3px; }
.sf-call--back { background: rgba(46,204,113,.16); color: #2ecc71; }
.sf-call--fade { background: rgba(231,76,60,.16); color: #e74c3c; }
.sf-conf { font-size: 0.62rem; font-weight: 700; letter-spacing: .02em; }
.sf-conf--high { color: #2ecc71; }
.sf-conf--med { color: #f1c40f; }
.sf-conf--low { color: var(--scr-muted, #8a8f98); }
.sf-bet-btn {
    display: inline-block; padding: 3px 9px; border-radius: 5px;
    color: #fff; font-size: 0.72rem; font-weight: 700;
    text-decoration: none; white-space: nowrap;
}
.sf-bet-btn--yes { background: #2ea043; }            /* YES call → green */
.sf-bet-btn--yes:hover { background: #3fb950; }
.sf-bet-btn--no { background: #d12f2f; }             /* NO call → red */
.sf-bet-btn--no:hover { background: #e5534b; }
.sf-bet-btn.is-disabled { opacity: .5; cursor: default; pointer-events: none; }
.sf-topbid { flex-basis: 100%; font-size: 0.62rem; color: var(--scr-muted, #8a8f98); margin-top: 2px; cursor: default; }

/* ── Follow notifications: bottom-right toasts + top-bar bell ───────────────── */
.unp-toast-container {
    position: fixed;
    right: 18px; bottom: 18px;
    display: flex; flex-direction: column; gap: 10px;
    z-index: 9000;
    pointer-events: none;            /* container ignores clicks; toasts opt back in */
    max-width: 340px;
}
.unp-toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: 10px;
    background: #1c1c1d; border: 1px solid #2e2e2e; border-radius: 10px;
    padding: 11px 13px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    color: #dbdbdb; cursor: pointer;
    transform: translateX(24px); opacity: 0;
    transition: transform .26s ease, opacity .26s ease;
}
.unp-toast.is-in { transform: translateX(0); opacity: 1; }
.unp-toast:hover { border-color: #3d3d3d; background: #222223; }
.unp-toast-logo {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 5px;
    background: #2962ff url('/static/logos/venues/kalshi.png') center/contain no-repeat;
}
.unp-toast-body { min-width: 0; }
.unp-toast-title { font-size: 13px; line-height: 1.35; }
.unp-toast-title b { color: #fff; font-weight: 600; }
.unp-toast-sub {
    font-size: 11.5px; color: #8a8f98; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px;
}

/* Bell — reuses .topbar-dropdown / .topbar-icon-btn shells. */
.unp-bell-btn { position: relative; }
.unp-bell-badge {
    position: absolute; top: -2px; right: -2px;
    min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
    background: #e5534b; color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
    border-radius: 9px; border: 2px solid #0d0d0d;
}
/* Notifications panel — shares the .topbar-dropdown-menu shell (#1f1f1f, 8px
   radius, shadow) with every other nav dropdown; these rules align its
   internals to the same language: uppercase section-label header, #dbdbdb item
   text, #2e2e2e hover, the nav accent blue (#5ea3fa) for the action + unread
   tint, and the 20px left-padding rhythm of .topbar-dropdown-item. */
.unp-bell-menu { width: 320px; max-width: 86vw; padding: 0; }
.unp-bell-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px 8px 20px; border-bottom: 1px solid rgba(255,255,255,.05);
}
/* Matches .topbar-dropdown-section (the small-caps subsection label). */
.unp-bell-title {
    font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
    color: #787b86; font-weight: 700;
}
.unp-bell-readall {
    background: none; border: none; color: #5ea3fa; font-size: 11px; cursor: pointer; padding: 0;
}
.unp-bell-readall:hover { color: #84b8fb; }
.unp-bell-list { max-height: 360px; overflow-y: auto; }
.unp-bell-empty { padding: 26px 20px; text-align: center; color: #787b86; font-size: 12px; }
.unp-bell-item {
    display: block; padding: 10px 14px 10px 20px; border-bottom: 1px solid rgba(255,255,255,.04);
    text-decoration: none; color: #dbdbdb; transition: background .12s ease;
}
.unp-bell-item:last-child { border-bottom: none; }
.unp-bell-item:hover { background: #2e2e2e; }
.unp-bell-item.is-unread { background: rgba(94,163,250,0.08); }
.unp-bell-item.is-unread:hover { background: rgba(94,163,250,0.14); }
.unp-bell-line { font-size: 13px; }
.unp-bell-line b { color: #fff; font-weight: 600; }
.unp-bell-mkt {
    font-size: 11.5px; color: #787b86; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.unp-bell-time { font-size: 10.5px; color: #6b6e78; margin-top: 3px; }
@media (max-width: 600px) {
    .unp-toast-container { right: 10px; left: 10px; bottom: 10px; max-width: none; }
}