.insights-container {
        background: white;
        border-radius: 4px;
        padding: 2rem;
        border: 1px solid #e0e0e0;
        min-height: 500px;
    }
    .filter-card {
        background: #f5f5f5;
        color: #333;
        border: 1px solid #e0e0e0;
        box-shadow: none;
        position: -webkit-sticky;
        position: sticky;
        top: 20px;
        z-index: 1000;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        will-change: transform;
    }

    .sticky-container {
        height: auto;
        overflow: visible;
    }

    .filter-card .card-body {
        padding: 1.5rem;
        padding-bottom: 2rem;
    }

    .filter-card.js-sticky {
        position: fixed;
        top: 20px;
        width: calc(25% - 30px);
    }

    .insight-card {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        transition: all 0.3s ease;
    }
    .insight-card:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }
    .stat-value {
        font-size: 2rem;
        font-weight: bold;
        color: #333;
    }
    .stat-label {
        color: #6c757d;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .trend-positive {
        color: #28a745;
    }
    .trend-negative {
        color: #dc3545;
    }
    .insight-section {
        display: none;
    }
    .insight-section.active {
        display: block;
    }

    /* Toggle Button Styles */
    .bet-type-toggle {
        margin-bottom: 1rem;
    }
    .bet-type-toggle .btn {
        border-radius: 20px;
        padding: 0.5rem 1.5rem;
        margin: 0 0.25rem;
    }
    .bet-type-toggle .btn.active {
        background-color: #007bff;
        color: white;
    }

    /* Sortable table styles */
    .sortable {
        cursor: pointer;
        user-select: none;
        position: relative;
        padding-right: 20px !important;
    }

    .sortable::after {
        content: '⇅';
        position: absolute;
        right: 5px;
        opacity: 0.3;
        font-size: 12px;
    }

    .sortable.sort-asc::after {
        content: '▲';
        opacity: 1;
    }

    .sortable.sort-desc::after {
        content: '▼';
        opacity: 1;
    }

    /* ROI column blur styles for non-MVP users */
    .roi-column-blur {
        filter: blur(5px);
        position: relative;
        user-select: none;
        pointer-events: none;
    }

    th.roi-column-blur {
        filter: none !important;
    }

    .roi-column-blur::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.3);
        pointer-events: none;
    }

    th.roi-column-blur::after {
        display: none !important;
    }

    .upgrade-overlay {
        position: relative;
        display: inline-block;
    }

    .upgrade-overlay .upgrade-tooltip {
        visibility: hidden;
        background-color: #333;
        color: white;
        text-align: center;
        border-radius: 6px;
        padding: 8px 12px;
        position: absolute;
        z-index: 1000;
        bottom: 125%;
        left: 50%;
        margin-left: -80px;
        opacity: 0;
        transition: opacity 0.3s;
        font-size: 12px;
        white-space: nowrap;
    }

    .upgrade-overlay .upgrade-tooltip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #333 transparent transparent transparent;
    }

    .upgrade-overlay:hover .upgrade-tooltip {
        visibility: visible;
        opacity: 1;
    }

    /* Enhanced AI Insights styling */
    .insights-section-title {
        display: flex;
        align-items: center;
        margin-bottom: 0.75rem;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .insight-item {
        background: white;
        border-left: 3px solid;
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        border-radius: 0 4px 4px 0;
        transition: transform 0.2s ease;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        line-height: 1.6;
    }

    .insight-item:hover {
        transform: translateX(2px);
        box-shadow: 0 2px 5px rgba(0,0,0,0.12);
    }

    .insight-item.hot {
        border-left-color: #28a745;
        background: linear-gradient(90deg, rgba(40,167,69,0.05) 0%, white 100%);
    }

    .insight-item.cold {
        border-left-color: #dc3545;
        background: linear-gradient(90deg, rgba(220,53,69,0.05) 0%, white 100%);
    }

    .insight-team {
        font-weight: 600;
        color: #2c3e50;
    }

    .insight-roi {
        font-size: inherit;
        font-weight: 700;
        color: #15803d;
    }
    .insight-roi-neg {
        color: #b91c1c;
    }

    .insight-games {
        color: #1e293b;
        font-size: 0.9rem;
    }

    .insight-item .insight-roi-line {
        display: inline;
        margin-top: 0;
    }

    /* Savant-style table headers */
    .table-dark, .table-dark th {
        background-color: #0c2340 !important;
        color: #fff !important;
        border-color: #1a3a5c !important;
        font-size: 0.75rem;
        font-weight: 600;
        white-space: nowrap;
    }

    /* Sticky sidebar (desktop) */
    .sticky-sidebar {
        position: sticky;
        top: -300px;
        margin-left: -15px;
        z-index: 100;
    }

    .spinner-icon {
        animation: spin 1s linear infinite;
        display: inline-block;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    /* Insights loading overlay */
    .insights-loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        border-radius: 8px;
        backdrop-filter: blur(2px);
    }

    .insights-loading-spinner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .insights-loading-spinner .spinner-border {
        color: #007bff;
        width: 3rem;
        height: 3rem;
    }

    .insights-loading-spinner .text-muted {
        font-size: 1.1rem;
        font-weight: 500;
    }

    /* Upcoming Game AI Insights Styling */
    .upcoming-games-grid {
        display: grid;
        gap: 1rem;
    }

    .game-insight-card {
        border: 1px solid #dee2e6;
        transition: all 0.2s ease;
    }

    .game-insight-card:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        transform: translateY(-1px);
    }

    .game-insight-card .card-header {
        background-color: #f8f9fa !important;
        border-bottom: 1px solid #dee2e6;
        padding: 0.75rem 1rem;
    }

    .game-insight-card .card-body {
        padding: 1rem;
    }

    .game-analysis p {
        line-height: 1.6;
        margin-bottom: 1rem;
        padding: 0.75rem;
        background: rgba(248, 249, 250, 0.5);
        border-left: 3px solid #dee2e6;
        border-radius: 0 4px 4px 0;
    }

    .game-analysis p:first-child {
        border-left-color: #0d6efd;
        background: rgba(13, 110, 253, 0.05);
    }

    .game-analysis p:last-child {
        margin-bottom: 0;
    }

    .game-analysis strong {
        color: #495057;
        font-weight: 600;
    }

    .game-analysis .text-success {
        background: rgba(25, 135, 84, 0.1);
        padding: 2px 6px;
        border-radius: 4px;
    }

    .game-analysis .text-danger {
        background: rgba(220, 53, 69, 0.1);
        padding: 2px 6px;
        border-radius: 4px;
    }

    /* Stats dropdown styling */
    .stats-details summary {
        list-style: none;
        outline: none;
    }

    .stats-details summary::-webkit-details-marker {
        display: none;
    }

    .stats-details summary i {
        transition: transform 0.3s ease;
        display: inline-block;
    }

    .stats-details[open] summary i {
        transform: rotate(90deg);
    }

    .stats-details summary:hover {
        opacity: 0.8;
    }

    /* Smooth transition for collapsible games */
    #additionalGames {
        transition: all 0.3s ease-in-out;
    }

    .btn[data-bs-target="#additionalGames"] {
        border-radius: 20px;
        transition: all 0.2s ease;
    }

    .btn[data-bs-target="#additionalGames"]:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .btn[data-bs-target="#additionalGames"][aria-expanded="true"] .bi-chevron-down {
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }

    .btn[data-bs-target="#additionalGames"] .bi-chevron-down {
        transition: transform 0.3s ease;
    }

    /* Game tabs styling */
    .game-tabs-container .nav-tabs {
        border-bottom: 2px solid #dee2e6;
        margin-bottom: 0;
        flex-wrap: wrap;
    }

    /* NFL specific - 5 tabs per row */
    #nflGamesTabs .nav-item {
        flex: 0 0 20%;
        max-width: 20%;
        padding: 2px;
    }

    #nflGamesTabs .nav-link {
        border: 2px solid #e9ecef;
        border-radius: 8px;
        background: white;
        color: #495057;
        padding: 0.75rem 0.3rem;
        transition: all 0.2s ease;
        margin: 0;
        font-size: 0.8rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        text-align: center;
        min-height: 75px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #nflGamesTabs .nav-link:hover {
        border-color: #6c757d;
        background: #f8f9fa;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    #nflGamesTabs .nav-link.active {
        border-color: #28a745;
        background: #f8fff9;
        color: #155724;
        font-weight: 600;
        transform: translateY(-1px);
        box-shadow: 0 3px 12px rgba(40,167,69,0.2);
    }

    /* Regular game tabs (NBA) */
    .game-tabs-container .nav-link:not(#nflGamesTabs .nav-link) {
        border: none;
        border-bottom: 3px solid transparent;
        background: none;
        color: #6c757d;
        padding: 0.75rem 0.5rem;
        transition: all 0.2s ease;
    }

    .game-tabs-container .nav-link:not(#nflGamesTabs .nav-link):hover {
        border-color: transparent;
        border-bottom-color: #0d6efd;
        color: #0d6efd;
        background: rgba(13, 110, 253, 0.05);
    }

    .game-tabs-container .nav-link:not(#nflGamesTabs .nav-link).active {
        border-color: transparent;
        border-bottom-color: #0d6efd;
        color: #0d6efd;
        background: rgba(13, 110, 253, 0.1);
        font-weight: 600;
    }

    .game-tabs-container .tab-content {
        background: white;
    }

    /* Active filter chips */
    .active-filter-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        padding: 0;
    }
    .active-filter-chips:empty {
        display: none;
    }
    .filter-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        background: #e8f0fe;
        color: #1a3a5c;
        border: 1px solid #c4d7f2;
        border-radius: 1rem;
        padding: 0.2rem 0.6rem;
        font-size: 0.78rem;
        font-weight: 500;
        white-space: nowrap;
    }
    .filter-chip .chip-remove {
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: rgba(0,0,0,0.08);
        font-size: 0.65rem;
        line-height: 1;
        transition: background 0.15s;
    }
    .filter-chip .chip-remove:hover {
        background: rgba(0,0,0,0.2);
    }
    .tables-loading {
        opacity: 0.45;
        pointer-events: none;
        transition: opacity 0.2s;
    }
    .tables-loading-spinner {
        display: none;
        text-align: center;
        padding: 1rem 0;
    }
    .tables-loading-spinner.active {
        display: block;
    }

    /* ── Medium screens ─────────────────────────────────────── */
    @media (max-width: 1200px) {
        #nflGamesTabs .nav-item {
            flex: 0 0 25%;
            max-width: 25%;
        }
    }

    /* ── Mobile (single consolidated block) ─────────────────── */
    @media (max-width: 768px) {

        /* --- Layout --- */
        .filter-card {
            position: static;
            max-height: none;
            overflow-y: visible;
        }
        .filter-card.js-sticky {
            position: static;
            width: auto;
        }
        .container-fluid {
            padding: 0 8px;
        }
        .col-md-4.col-lg-3.sticky-container {
            display: none;
        }
        .col-md-8.col-lg-9 {
            flex: 0 0 100%;
            max-width: 100%;
            padding: 0;
        }
        .sticky-sidebar {
            position: relative;
            margin-left: 0;
            margin-bottom: 1rem;
        }
        .insights-container {
            padding: 0.75rem;
            border-radius: 0;
        }

        /* --- Cards --- */
        .insight-card {
            padding: 0.75rem;
            margin-bottom: 0.75rem;
            border-radius: 6px;
            position: relative;
        }
        .insight-card .row {
            margin: 0;
        }
        .insight-card .col-12,
        .insight-card .col-md-6 {
            padding: 0;
            margin-bottom: 0.75rem;
        }
        /* Trending Hot/Cold side-by-side columns: tighten gutters so the team-name
           strings don't wrap one-word-per-line in 50%-width on phones. */
        .insight-card .trending-row > .col-6 {
            padding-left: 0.2rem;
            padding-right: 0.2rem;
        }

        /* --- AI Insights header --- */
        #nfl-strategic-insights h5,
        #nba-strategic-insights h5 {
            font-size: 1.1rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
        #nfl-strategic-insights .insight-card,
        #nba-strategic-insights .insight-card {
            padding-top: 0.75rem;
        }

        /* --- Refresh button --- */
        #refreshInsightsBtn, #nbaRefreshInsightsBtn,
        .refresh-insights-mobile {
            font-size: 0.8rem !important;
            padding: 0.5rem 0.75rem !important;
            background: linear-gradient(135deg, #007bff, #0056b3) !important;
            border: none !important;
            box-shadow: 0 2px 6px rgba(0, 123, 255, 0.25);
            font-weight: 600;
            border-radius: 6px !important;
            float: right;
            margin-bottom: 0.5rem;
        }

        /* --- Tables --- */
        .table {
            font-size: 0.8rem;
            margin-bottom: 0.75rem;
            width: 100%;
        }
        .table td, .table th {
            padding: 0.4rem 0.35rem;
            text-align: center;
            vertical-align: middle;
        }
        .table th:first-child,
        .table td:first-child {
            text-align: left;
            min-width: 50px;
            padding-left: 0.5rem;
        }

        /* Table headers */
        .table-dark, .table-dark th,
        .table thead th {
            background-color: #e9ecef !important;
            color: #333 !important;
            border: 1px solid #dee2e6 !important;
            font-size: 0.75rem;
            font-weight: 600;
            white-space: nowrap;
        }

        /* Horizontal scroll for wide tables */
        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* Sticky table headers when scrolling vertically */
        .table thead th {
            position: sticky;
            top: 0;
            z-index: 10;
            box-shadow: 0 1px 2px rgba(0,0,0,0.08);
        }

        /* --- Sort arrows --- */
        .sortable {
            padding-right: 4px !important;
        }
        .sortable::after {
            content: none;
        }
        .sortable.sort-asc::after,
        .sortable.sort-desc::after {
            content: revert;
            position: static;
            margin-left: 2px;
            font-size: 9px;
        }

        /* --- Toggle buttons --- */
        .d-flex.justify-content-between.align-items-center {
            flex-direction: column;
            align-items: flex-start !important;
            gap: 8px;
        }
        .bet-type-toggle {
            width: 100%;
            display: flex;
            justify-content: center;
        }
        .bet-type-toggle .btn {
            flex: 1;
            margin: 0 2px;
            padding: 0.4rem 0.8rem !important;
            font-size: 0.8rem;
            max-width: 120px;
        }

        /* --- Typography --- */
        h3 { font-size: 1.4rem; }
        h5 { font-size: 1.1rem; }
        h6 { font-size: 0.95rem; }
        .display-4 { font-size: 2rem; }
        .lead { font-size: 1rem; }
        .btn-sm {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }

        /* --- Game tabs --- */
        #nflGamesTabs .nav-item {
            flex: 0 0 33.333%;
            max-width: 33.333%;
        }
        .game-tabs-container .nav-link {
            padding: 0.5rem 0.25rem;
            font-size: 0.875rem;
        }
        .game-tabs-container .nav-link img {
            width: 16px !important;
            height: 16px !important;
        }

        /* --- Upcoming games --- */
        .upcoming-games-grid {
            gap: 0.75rem;
        }
        .game-insight-card .card-header {
            padding: 0.5rem 0.75rem;
        }
        .game-insight-card .card-body {
            padding: 0.75rem;
        }

        /* --- Prop Bet Calculator banner --- */
        .prop-calc-banner { padding: 0.75rem !important; flex-wrap: nowrap !important; }
        .prop-calc-content { gap: 0.5rem !important; min-width: 0; flex: 1; }
        .prop-calc-icon { flex-shrink: 0; }
        .prop-calc-arrow { flex-shrink: 0; }

        /* --- Insight items mobile: fixed-height rows so hot/cold align --- */
        .insight-item {
            padding: 0.45rem 0.55rem;
            margin-bottom: 0.4rem;
            font-size: 0.78rem;
            line-height: 1.35;
            min-height: 72px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            /* Long team-name strings ("Home teams -150 to -111 in the past 2 weeks (ML)")
               have to wrap mid-string in a 50%-width column on phones; without this they
               wrap one-word-per-line and look broken. */
            word-break: break-word;
            overflow-wrap: anywhere;
        }
        /* Tighten the row gutter on phones so columns get every pixel of width. */
        .trending-row { --bs-gutter-x: 0.4rem; }
        .insight-team {
            font-size: 0.78rem;
            display: block;
        }
        .insight-roi {
            font-size: 0.85rem;
        }
        .insight-games {
            font-size: 0.7rem;
            display: block;
            color: #1e293b;
        }
        .stat-value { font-size: 1.5rem; }

        /* --- Filter chips mobile --- */
        .active-filter-chips {
            gap: 0.3rem;
        }
        .filter-chip {
            font-size: 0.72rem;
            padding: 0.15rem 0.5rem;
        }
    }

    /* Small phones */
    @media (max-width: 480px) {
        .table { font-size: 0.72rem; }
        .table td, .table th { padding: 0.3rem 0.25rem; }
        .bet-type-toggle .btn { font-size: 0.72rem; padding: 0.3rem 0.6rem !important; }
        #nflGamesTabs .nav-item { flex: 0 0 50%; max-width: 50%; }
        #nflGamesTabs .nav-link { min-height: 60px; font-size: 0.72rem; }
        .insight-item {
            padding: 0.4rem 0.5rem;
            font-size: 0.75rem;
            border-left-width: 2px;
        }
        .insight-team { font-size: 0.76rem; }
        .insight-games { font-size: 0.68rem; }
        .col-6 > h6 { font-size: 0.82rem; }
        /* Force hot/cold columns to align rows */
        #nfl-insights-display .row,
        #mlb-strategic-insights .row,
        .insight-card > .row {
            display: flex;
            align-items: stretch;
        }
        #nfl-insights-display .col-6,
        #mlb-strategic-insights .col-6,
        .insight-card > .row > .col-6 {
            display: flex;
            flex-direction: column;
        }
    }

/* ── Table tabs — one ROI table visible at a time instead of 5 stacked ── */
.bi-table-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.bi-tab {
    border: 1px solid #ced4da;
    background: #fff;
    color: #495057;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 16px;
    padding: 0.3rem 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.bi-tab:hover:not(.active) { background: #f1f3f5; color: #212529; }
.bi-tab.active { background: #0c2340; border-color: #0c2340; color: #fff; }
.bi-pane { display: none; }
.bi-pane.active { display: flex; } /* .row is a flex container */