/**
 * DataJam Pulse - Enrichment Styles
 * Phase 5 - CSS Extraction (Batch 3)
 * Extracted: Dec 14, 2025
 * Source: index.html lines 2103-2572, 3435-3800, 3805-4487
 * Version: v5.4.10
 */

/* =============================================
   SECTION 1: ENRICHMENT ENGINE INTEGRATION (v2.5.0)
   ============================================= */
        /* =============================================
           ENRICHMENT ENGINE INTEGRATION (v2.5.0)
           Added: November 30, 2025
           Data Sources: Open-Meteo, Nager.Date, TheSportsDB
           ============================================= */

        .enrichment-container {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.05) 100%);
            border: 1px solid rgba(16, 185, 129, 0.3);
            border-radius: 12px;
            padding: 16px 20px;
            margin: 0 42px 20px 42px;
        }

        .enrichment-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }

        .enrichment-title {
            font-size: 14px;
            font-weight: 600;
            color: #10B981;
        }

        .enrichment-subtitle {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .enrichment-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }

        .enrichment-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            color: white;
            cursor: help;
            transition: transform 0.2s ease;
        }

        .enrichment-badge:hover {
            transform: scale(1.05);
        }

        .enrichment-badge-icon {
            font-size: 14px;
        }

        .enrichment-loading {
            color: var(--text-secondary);
            font-size: 12px;
            font-style: italic;
        }

        .enrichment-insights {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 8px;
            padding: 12px 16px;
            margin-bottom: 12px;
        }

        .enrichment-insight-headline {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .enrichment-insight-points {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .enrichment-insight-points li {
            font-size: 12px;
            color: var(--text-secondary);
            padding: 4px 0;
            padding-left: 16px;
            position: relative;
        }

        .enrichment-insight-points li::before {
            content: '•';
            position: absolute;
            left: 0;
            color: #10B981;
        }

        .enrichment-sources {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .enrichment-source {
            font-size: 10px;
            color: var(--text-secondary);
        }

        .enrichment-source a {
            color: #10B981;
            text-decoration: none;
        }

        .enrichment-source a:hover {
            text-decoration: underline;
        }

        .enrichment-context-score {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(16, 185, 129, 0.2);
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            color: #10B981;
        }

        /* ============================================================================
           RETAIL CONTEXT PANEL STYLES (v2.6.0) - Tesco/dunnhumby specific
           ============================================================================ */

        .retail-context-panel {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(59, 130, 246, 0.1));
            border: 1px solid rgba(16, 185, 129, 0.3);
            border-radius: 12px;
            padding: 16px 20px;
            margin-top: 16px;
        }

        .retail-context-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }

        .retail-context-title {
            font-size: 14px;
            font-weight: 600;
            color: #10B981;
        }

        .retail-context-subtitle {
            font-size: 11px;
            color: var(--text-secondary);
        }

        .retail-badges-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }

        .retail-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 12px;
            font-weight: 500;
        }

        .retail-badge.payday {
            background: rgba(16, 185, 129, 0.25);
            color: #10B981;
            border: 1px solid rgba(16, 185, 129, 0.4);
        }

        .retail-badge.seasonal {
            background: rgba(239, 68, 68, 0.2);
            color: #F87171;
            border: 1px solid rgba(239, 68, 68, 0.4);
        }

        .retail-badge.weekly {
            background: rgba(59, 130, 246, 0.2);
            color: #60A5FA;
            border: 1px solid rgba(59, 130, 246, 0.4);
        }

        .retail-badge.score {
            background: rgba(139, 92, 246, 0.2);
            color: #A78BFA;
            border: 1px solid rgba(139, 92, 246, 0.4);
        }

        .retail-score-bar {
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            overflow: hidden;
            margin-top: 8px;
        }

        .retail-score-fill {
            height: 100%;
            background: linear-gradient(90deg, #10B981, #3B82F6);
            border-radius: 3px;
            transition: width 0.5s ease;
        }

        .retail-narratives {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .retail-narrative-item {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-size: 12px;
            color: var(--text-secondary);
            margin-bottom: 6px;
        }

        .retail-narrative-item::before {
            content: '';
            width: 6px;
            height: 6px;
            background: #10B981;
            border-radius: 50%;
            margin-top: 5px;
            flex-shrink: 0;
        }

        .screen-type-context {
            margin-top: 12px;
            padding: 12px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            border-left: 3px solid #3B82F6;
        }

        .screen-type-title {
            font-size: 12px;
            font-weight: 600;
            color: #60A5FA;
            margin-bottom: 6px;
        }

        .screen-type-insight {
            font-size: 11px;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        @media (max-width: 768px) {
            .enrichment-container {
                margin: 0 16px 16px 16px;
                padding: 12px 16px;
            }

            .enrichment-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 4px;
            }

            .enrichment-badges {
                gap: 6px;
            }

            .enrichment-badge {
                padding: 4px 10px;
                font-size: 11px;
            }
        }

        /* =============================================
           CONTEXT-AWARE VISUALIZATION (v2.5.1)
           Added: December 1, 2025
           Features: Chart annotations, context score line,
           narrative insights, KPI drivers, coefficients panel
           ============================================= */

        /* Context Coefficients Panel - v5.4.11 dark theme consistency */
        .context-coefficients-panel {
            background: var(--bg-secondary, #1a1c24);
            border: 1px solid rgba(230, 47, 110, 0.3);
            border-radius: 12px;
            padding: 16px 20px;
            margin: 0 42px 16px 42px;
        }

        .context-coefficients-title {
            font-size: 15px;
            font-weight: 600;
            color: #10B981;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .context-coefficients-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 12px;
        }

        .context-coefficient-card {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 8px;
            padding: 12px 16px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .context-coefficient-label {
            font-size: 11px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .context-coefficient-value {
            font-size: 22px;
            font-weight: 700;
        }

        .context-coefficient-value.positive {
            color: #10B981;
        }

        .context-coefficient-value.negative {
            color: #E94B52;
        }

        .context-coefficient-value.neutral {
            color: var(--text-secondary);
        }

        .context-coefficient-description {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 2px;
        }

        /* Narrative Insights in Executive Summary */
        .narrative-insights {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(52, 211, 153, 0.03) 100%);
            border-left: 3px solid #10B981;
            border-radius: 0 8px 8px 0;
            padding: 12px 16px;
            margin-top: 16px;
        }

        .narrative-insights-title {
            font-size: 12px;
            font-weight: 600;
            color: #10B981;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .narrative-insights p {
            font-size: 13px;
            color: var(--text-secondary);
            margin: 4px 0;
            line-height: 1.5;
        }

        /* KPI Context Driver Labels */
        .stat-card-context {
            font-size: 11px;
            color: #10B981;
            margin-top: 6px;
            padding-top: 6px;
            border-top: 1px solid rgba(16, 185, 129, 0.2);
            display: flex;
            align-items: center;
            gap: 4px;
            flex-wrap: wrap;
        }

        .stat-card-context-icon {
            font-size: 12px;
        }

        .stat-card-context-driver {
            background: rgba(16, 185, 129, 0.15);
            padding: 2px 8px;
            border-radius: 10px;
            font-weight: 500;
        }

        /* Context Score Trendline Legend */
        .context-score-legend {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            color: var(--text-muted);
        }

        .context-score-legend-line {
            width: 20px;
            height: 2px;
            background: #10B981;
            opacity: 0.7;
        }

        /* Annotation tooltip styling (for chart hover) */
        .context-annotation-tooltip {
            background: #1a1c24;
            border: 1px solid #10B981;
            border-radius: 8px;
            padding: 10px 14px;
            max-width: 280px;
        }

        .context-annotation-tooltip-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 6px;
        }

        .context-annotation-tooltip-meta {
            font-size: 11px;
            color: var(--text-secondary);
        }

        @media (max-width: 768px) {
            .context-coefficients-panel {
                margin: 0 16px 16px 16px;
                padding: 16px;
            }

            .context-coefficients-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
            }

            .context-coefficient-card {
                padding: 10px 12px;
            }

            .context-coefficient-value {
                font-size: 18px;
            }

            .narrative-insights {
                padding: 10px 12px;
            }
        }

/* =============================================
   SECTION 2: ENRICHMENT ENGINE v3.0 UI PANELS
   ============================================= */
        /* =============================================
           ENRICHMENT ENGINE v3.0 UI PANELS
           Added: December 1, 2025
           Components: Audience Profile, Economic Context,
           Prediction Panel, Football/Transport/Trends Badges
           ============================================= */

        /* === LOCAL AUDIENCE PROFILE CARD === */
        .audience-profile-card {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(167, 139, 250, 0.05) 100%);
            border: 1px solid rgba(139, 92, 246, 0.3);
            border-radius: 16px;
            padding: 24px;
            margin-bottom: 24px;
            transition: all 0.3s ease;
        }

        .audience-profile-card:hover {
            border-color: rgba(139, 92, 246, 0.5);
            box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15);
        }

        .audience-profile-card h4 {
            font-size: 16px;
            font-weight: 600;
            color: #A78BFA;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .audience-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 16px;
            margin-bottom: 16px;
        }

        .audience-stats .stat {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 16px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 12px;
            transition: transform 0.2s ease;
        }

        .audience-stats .stat:hover {
            transform: translateY(-2px);
        }

        .audience-stats .stat-value {
            font-size: 28px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .audience-stats .stat-label {
            font-size: 12px;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .audience-stats .stat-vs-avg {
            font-size: 11px;
            color: #10B981;
            font-weight: 600;
            margin-top: 4px;
        }

        .audience-stats .stat-vs-avg.negative {
            color: #E94B52;
        }

        .audience-stats .stat-icon {
            font-size: 20px;
            margin-bottom: 4px;
        }

        /* === v3.2.0: OAC LIFESTYLE CLASSIFICATION === */
        .oac-classification {
            background: rgba(139, 92, 246, 0.15);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
        }

        .oac-header {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            margin-bottom: 8px;
        }

        .oac-supergroup {
            font-size: 16px;
            font-weight: 700;
            color: #A78BFA;
        }

        .oac-group {
            font-size: 13px;
            color: var(--text-secondary);
            padding: 2px 8px;
            background: rgba(0,0,0,0.2);
            border-radius: 4px;
        }

        .oac-description {
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 12px;
            line-height: 1.5;
        }

        .oac-tag {
            display: inline-block;
            font-size: 11px;
            padding: 4px 10px;
            border-radius: 20px;
            background: rgba(0,0,0,0.3);
            color: var(--text-secondary);
            margin-right: 6px;
            margin-bottom: 6px;
        }

        .oac-tag.affluence-high { background: rgba(16, 185, 129, 0.2); color: #10B981; }
        .oac-tag.affluence-medium-high { background: rgba(59, 130, 246, 0.2); color: #3B82F6; }
        .oac-tag.affluence-medium { background: rgba(245, 158, 11, 0.2); color: #F59E0B; }
        .oac-tag.affluence-low { background: rgba(239, 68, 68, 0.2); color: #EF4444; }

        .oac-insights {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }

        .insight-tag {
            font-size: 12px;
            padding: 6px 12px;
            background: rgba(230, 47, 110, 0.1);
            border: 1px solid rgba(230, 47, 110, 0.3);
            border-radius: 20px;
            color: var(--text-primary);
        }

        .area-name {
            font-size: 12px;
            color: var(--text-secondary);
            margin-bottom: 12px;
            padding: 4px 8px;
            background: rgba(0,0,0,0.2);
            border-radius: 4px;
            display: inline-block;
        }

        .confidence-indicator {
            margin-top: 12px;
            font-size: 11px;
            color: var(--text-secondary);
            text-align: right;
        }

        .confidence-indicator.high span { color: #10B981; }
        .confidence-indicator.medium span { color: #F59E0B; }
        .confidence-indicator.low span { color: #EF4444; }

        /* === v4.0.7: ENHANCED AUDIENCE PROFILE VISUALS === */
        .audience-profile-hero {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(139, 92, 246, 0.2);
        }

        .audience-persona-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            flex-shrink: 0;
            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
        }

        .audience-persona-info {
            flex: 1;
        }

        .audience-persona-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 4px;
        }

        .audience-persona-subtitle {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .audience-persona-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .audience-persona-tag {
            font-size: 11px;
            padding: 4px 10px;
            border-radius: 20px;
            background: rgba(139, 92, 246, 0.2);
            color: #A78BFA;
            font-weight: 500;
        }

        .audience-persona-tag.affluence-high {
            background: rgba(16, 185, 129, 0.2);
            color: #10B981;
        }
        .audience-persona-tag.affluence-medium-high {
            background: rgba(59, 130, 246, 0.2);
            color: #60A5FA;
        }
        .audience-persona-tag.affluence-medium {
            background: rgba(245, 158, 11, 0.2);
            color: #FBBF24;
        }
        .audience-persona-tag.affluence-low {
            background: rgba(239, 68, 68, 0.2);
            color: #F87171;
        }

        /* Visual stat bars */
        .audience-stat-bars {
            display: grid;
            gap: 14px;
            margin-bottom: 20px;
        }

        .audience-stat-bar {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .audience-stat-bar-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: rgba(139, 92, 246, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .audience-stat-bar-content {
            flex: 1;
            min-width: 0;
        }

        .audience-stat-bar-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 6px;
        }

        .audience-stat-bar-label {
            font-size: 13px;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .audience-stat-bar-value {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .audience-stat-bar-track {
            height: 8px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 4px;
            overflow: hidden;
        }

        .audience-stat-bar-fill {
            height: 100%;
            border-radius: 4px;
            background: linear-gradient(90deg, #8B5CF6 0%, #A78BFA 100%);
            transition: width 0.6s ease;
        }

        .audience-stat-bar-fill.green {
            background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
        }

        .audience-stat-bar-fill.blue {
            background: linear-gradient(90deg, #3B82F6 0%, #60A5FA 100%);
        }

        .audience-stat-bar-fill.orange {
            background: linear-gradient(90deg, #F59E0B 0%, #FBBF24 100%);
        }

        .audience-stat-bar-fill.pink {
            background: linear-gradient(90deg, #E62F6E 0%, #EC4899 100%);
        }

        /* Audience quick facts row */
        .audience-quick-facts {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
            padding: 12px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
        }

        .audience-quick-fact {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: var(--text-secondary);
            padding: 4px 0;
        }

        .audience-quick-fact-icon {
            font-size: 14px;
        }

        .audience-quick-fact-value {
            font-weight: 600;
            color: var(--text-primary);
        }

        /* Audience summary redesign */
        .audience-summary {
            padding: 12px 16px;
            background: rgba(139, 92, 246, 0.1);
            border-radius: 8px;
            border-left: 3px solid #A78BFA;
        }

        .audience-summary p {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.6;
            margin: 0;
        }


/* =============================================
   SECTION 3: CONTEXT CARDS & BADGES
   (Economic, Compact, Trending, Prediction, Container)
   ============================================= */

        /* === BASE CONTEXT CARD (v5.4.11) - Consistent dark theme === */
        .context-card {
            background: var(--bg-secondary, #1a1c24);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 16px 20px;
            margin-bottom: 16px;
            transition: all 0.3s ease;
        }

        .context-card:hover {
            border-color: rgba(255, 255, 255, 0.2);
        }

        /* === ECONOMIC CONTEXT CARD === */
        .economic-card {
            background: var(--bg-secondary, #1a1c24);
            border: 1px solid rgba(59, 130, 246, 0.3);
            border-radius: 12px;
            padding: 16px 20px;
            margin-bottom: 16px;
            transition: all 0.3s ease;
        }

        .economic-card:hover {
            border-color: rgba(59, 130, 246, 0.5);
            box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
        }

        .economic-card h4 {
            font-size: 16px;
            font-weight: 600;
            color: #60A5FA;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .economic-indicators {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 12px;
            margin-bottom: 16px;
        }

        .economic-indicators .indicator {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 16px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 12px;
            transition: transform 0.2s ease;
        }

        .economic-indicators .indicator:hover {
            transform: translateY(-2px);
        }

        .economic-indicators .indicator-icon {
            font-size: 20px;
        }

        .economic-indicators .indicator-label {
            font-size: 11px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .economic-indicators .indicator-value {
            font-size: 22px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .economic-indicators .indicator-value.status-stable {
            color: #10B981;
        }

        .economic-indicators .indicator-value.status-growing {
            color: #22C55E;
        }

        .economic-indicators .indicator-value.status-declining {
            color: #E94B52;
        }

        .economic-indicators .indicator-vs {
            font-size: 11px;
            color: #10B981;
            font-weight: 500;
        }

        .economic-indicators .indicator-vs.negative {
            color: #E94B52;
        }

        .economic-summary {
            padding: 12px 16px;
            background: rgba(59, 130, 246, 0.1);
            border-radius: 8px;
            border-left: 3px solid #60A5FA;
        }

        .economic-summary p {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.6;
            margin: 0;
        }

        /* === COMPACT CARD VARIANTS === */
        .economic-card.compact {
            padding: 16px;
            margin-bottom: 0;
        }

        .economic-card.compact h4 {
            font-size: 14px;
            margin-bottom: 12px;
        }

        .economic-indicators-compact {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            margin-bottom: 12px;
        }

        .indicator-compact {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 8px;
        }

        .indicator-compact .indicator-icon {
            font-size: 16px;
        }

        .indicator-compact .indicator-content {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .indicator-compact .indicator-label {
            font-size: 10px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .indicator-compact .indicator-value {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .indicator-compact .indicator-vs {
            font-size: 10px;
            color: #10B981;
        }

        .indicator-compact .indicator-vs.negative {
            color: #E94B52;
        }

        /* === v4.0.6: PROGRESSIVE DISCLOSURE MARKET CONTEXT === */
        .economic-card.compact-v2 {
            padding: 16px;
            margin-bottom: 0;
        }

        .market-headline {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 12px;
        }

        .market-headline .headline-icon {
            font-size: 24px;
            line-height: 1;
        }

        .market-headline .headline-text {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
            line-height: 1.4;
        }

        .market-stats-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }

        .stat-chip {
            font-size: 11px;
            color: var(--text-secondary);
            background: rgba(59, 130, 246, 0.15);
            padding: 4px 10px;
            border-radius: 12px;
            white-space: nowrap;
        }

        .trend-topics-inline {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 8px;
        }

        .trend-topic-tag.compact {
            font-size: 10px;
            padding: 3px 8px;
            background: rgba(139, 92, 246, 0.15);
            border-radius: 10px;
            color: #A78BFA;
        }

        .economic-summary-compact {
            padding: 8px 12px;
            background: rgba(59, 130, 246, 0.1);
            border-radius: 6px;
            border-left: 2px solid #60A5FA;
        }

        .economic-summary-compact p {
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.5;
            margin: 0;
        }

        /* === TRENDING NOW CARD === */
        .trending-card {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(167, 139, 250, 0.05) 100%);
            border: 1px solid rgba(139, 92, 246, 0.3);
            border-radius: 16px;
            padding: 16px;
        }

        .trending-card.compact {
            margin-bottom: 0;
        }

        .trending-card h4 {
            font-size: 14px;
            font-weight: 600;
            color: #A78BFA;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .trend-topics-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 10px;
        }

        .trend-topic-tag {
            padding: 6px 12px;
            background: rgba(139, 92, 246, 0.2);
            border: 1px solid rgba(139, 92, 246, 0.3);
            border-radius: 20px;
            font-size: 12px;
            color: #C4B5FD;
            font-weight: 500;
        }

        .trend-relevance {
            font-size: 11px;
            color: var(--text-muted);
            margin: 0;
            font-style: italic;
        }

        /* === TRENDING SECTION (inside Market Context) === */
        .trending-section {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid rgba(139, 92, 246, 0.2);
        }

        .trending-section h5 {
            font-size: 13px;
            font-weight: 600;
            color: #A78BFA;
            margin: 0 0 10px 0;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* === PREDICTION PANEL (What's Coming Next) === */
        .prediction-card {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(251, 191, 36, 0.06) 100%);
            border: 1px solid rgba(245, 158, 11, 0.35);
            border-radius: 16px;
            padding: 24px;
            margin-bottom: 24px;
            transition: all 0.3s ease;
        }

        .prediction-card:hover {
            border-color: rgba(245, 158, 11, 0.6);
            box-shadow: 0 4px 24px rgba(245, 158, 11, 0.2);
        }

        .prediction-card h4 {
            font-size: 16px;
            font-weight: 600;
            color: #F59E0B;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .prediction-confidence {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 20px;
            margin-bottom: 16px;
        }

        .prediction-confidence .confidence-label {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .prediction-confidence .confidence-value {
            font-size: 14px;
            font-weight: 700;
        }

        .prediction-confidence .confidence-value.high {
            color: #10B981;
        }

        .prediction-confidence .confidence-value.medium {
            color: #F59E0B;
        }

        .prediction-confidence .confidence-value.low {
            color: #E94B52;
        }

        .prediction-days {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 16px;
        }

        .prediction-day {
            display: grid;
            grid-template-columns: 60px 70px 100px 70px 1fr;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background: rgba(0, 0, 0, 0.15);
            border-radius: 10px;
            transition: all 0.2s ease;
        }

        .prediction-day:hover {
            background: rgba(0, 0, 0, 0.25);
        }

        .prediction-day.highlight {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.1) 100%);
            border: 1px solid rgba(245, 158, 11, 0.4);
        }

        .prediction-day .day-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .prediction-day .day-date {
            font-size: 12px;
            color: var(--text-muted);
        }

        .prediction-day .day-prediction {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .prediction-day .day-change {
            font-size: 13px;
            font-weight: 600;
        }

        .prediction-day .day-change.positive {
            color: #10B981;
        }

        .prediction-day .day-change.negative {
            color: #E94B52;
        }

        .prediction-day .day-change.neutral {
            color: var(--text-muted);
        }

        .prediction-day .day-drivers {
            font-size: 11px;
            color: var(--text-secondary);
            font-style: italic;
        }

        .prediction-headline {
            padding: 12px 16px;
            background: rgba(245, 158, 11, 0.15);
            border-radius: 8px;
            border-left: 3px solid #F59E0B;
        }

        .prediction-headline p {
            font-size: 14px;
            color: var(--text-primary);
            line-height: 1.5;
            margin: 0;
            font-weight: 500;
        }

        /* === CONTEXT BADGES (Football, Transport, Trends) === */
        .context-badge {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 16px 20px;
            border-radius: 12px;
            margin-bottom: 12px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .context-badge::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: currentColor;
            opacity: 0.5;
        }

        .context-badge .badge-icon {
            font-size: 28px;
        }

        .context-badge .badge-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .context-badge .badge-details {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .context-badge .badge-details span {
            font-size: 12px;
            color: var(--text-secondary);
        }

        /* Football Badge */
        .football-badge {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(52, 211, 153, 0.06) 100%);
            border: 1px solid rgba(16, 185, 129, 0.3);
            color: #10B981;
        }

        .football-badge.match-day {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(52, 211, 153, 0.1) 100%);
            border-color: rgba(16, 185, 129, 0.5);
            box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
        }

        .football-badge .match-teams {
            font-size: 15px !important;
            font-weight: 600;
            color: var(--text-primary) !important;
        }

        .football-badge .match-time {
            color: #10B981 !important;
            font-weight: 500;
        }

        .football-badge .match-distance {
            font-size: 11px !important;
            color: var(--text-muted) !important;
        }

        .football-badge .match-impact {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 11px !important;
            font-weight: 600;
            margin-top: 4px;
        }

        .football-badge .match-impact.high {
            background: rgba(16, 185, 129, 0.2);
            color: #10B981 !important;
        }

        .football-badge .match-impact.medium {
            background: rgba(245, 158, 11, 0.2);
            color: #F59E0B !important;
        }

        .football-badge .match-impact.low {
            background: rgba(107, 114, 128, 0.2);
            color: var(--text-muted) !important;
        }

        /* Transport Badge */
        .transport-badge {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(96, 165, 250, 0.06) 100%);
            border: 1px solid rgba(59, 130, 246, 0.3);
            color: #60A5FA;
        }

        .transport-badge.disrupted {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(248, 113, 113, 0.08) 100%);
            border: 1px solid rgba(239, 68, 68, 0.4);
            color: #F87171;
        }

        .transport-badge .transport-node {
            font-size: 14px !important;
            font-weight: 600;
            color: var(--text-primary) !important;
        }

        .transport-badge .transport-status {
            font-size: 12px !important;
            font-weight: 500;
        }

        .transport-badge.disrupted .transport-status {
            color: #F87171 !important;
        }

        .transport-badge .transport-impact {
            font-size: 11px !important;
            color: var(--text-muted) !important;
            font-style: italic;
        }

        /* Trends Badge */
        .trends-badge {
            background: linear-gradient(135deg, rgba(233, 75, 82, 0.1) 0%, rgba(230, 47, 110, 0.05) 100%);
            border: 1px solid rgba(233, 75, 82, 0.3);
            color: #E94B52;
        }

        .trends-badge .trend-topics {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 4px;
        }

        .trends-badge .trend-topic {
            display: inline-block;
            padding: 4px 10px;
            background: rgba(233, 75, 82, 0.15);
            border-radius: 12px;
            font-size: 11px !important;
            font-weight: 500;
            color: #E94B52 !important;
        }

        .trends-badge .trends-relevance {
            font-size: 11px !important;
            color: var(--text-muted) !important;
            margin-top: 6px;
            font-style: italic;
        }

        /* === CONTEXT CARDS CONTAINER === */
        .enrichment-cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 20px;
            margin: 0 42px 24px 42px;
        }

        .enrichment-badges-container {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin: 0 42px 24px 42px;
        }

        .enrichment-badges-container .context-badge {
            flex: 1;
            min-width: 280px;
            max-width: 400px;
        }

        /* Loading States for Enrichment Cards */
        .enrichment-card-loading {
            position: relative;
            overflow: hidden;
        }

        .enrichment-card-loading::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            animation: shimmer-card 1.5s infinite;
        }

        @keyframes shimmer-card {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .enrichment-cards-container {
                grid-template-columns: 1fr;
                margin: 0 16px 16px 16px;
            }

            .enrichment-badges-container {
                flex-direction: column;
                margin: 0 16px 16px 16px;
            }

            .enrichment-badges-container .context-badge {
                max-width: none;
            }

            .audience-stats,
            .economic-indicators {
                grid-template-columns: 1fr 1fr;
            }

            .prediction-day {
                grid-template-columns: 1fr 1fr;
                row-gap: 8px;
            }

            .prediction-day .day-drivers {
                grid-column: span 2;
            }

            .audience-profile-card,
            .economic-card,
            .prediction-card {
                padding: 16px;
            }
        }

        @media (max-width: 480px) {
            .audience-stats,
            .economic-indicators {
                grid-template-columns: 1fr;
            }
        }