@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* --- Base Styles & Variables --- */
* {
    box-sizing: border-box;
}

:root {
    --bg-primary: #1e2021;
    --bg-secondary: #2b2b2b;
    --bg-tertiary: #383838;
    --text-primary: #e0e6e9;
    --text-secondary: #a7b0b4;
    --accent-primary: #10b981;
    /* Football Emerald Green (default) */
    --accent-primary-rgb: 16, 185, 129;
    --accent-secondary: #ffc107;
    /* Gold/Yellow for highlights */
    --success-color: #10b981;
    --error-color: #ef4444;
    --warning-color: #f59e0b;
    --danger-color: #e55353;
    --font-family: 'Inter', sans-serif;
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.5);
}

/* ============================================
   SPORT THEME OVERRIDES
   ============================================ */

/* Football Theme (Emerald Green) - Default */
body.theme-football {
    --accent-primary: #10b981;
    --accent-primary-rgb: 16, 185, 129;
    --bg-primary: #1e2021;
    --bg-secondary: #2b2b2b;
    --bg-tertiary: #383838;
    --success-color: #10b981;
}

/* Basketball Theme (Orange/Amber) */
body.theme-basketball {
    --accent-primary: #f59e0b;
    --accent-primary-rgb: 245, 158, 11;
    --bg-primary: #1a1a1a;
    --bg-secondary: #252525;
    --bg-tertiary: #333333;
    --success-color: #f59e0b;
}

body {
    font-family: var(--font-family);
    background: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
    overflow-x: hidden;
}

/* ... (skipping to .card-header) ... */

.card-header {
    display: flex;
    justify-content: center;
    /* Center the title */
    align-items: center;
    margin: -1.75rem -1.75rem 1rem -1.75rem;
    /* Negative margins to pull to edges */
    width: calc(100% + 3.5rem);
    /* Full width including padding */
    color: white;
    background-color: rgba(36, 180, 126, 0.1);
    /* Modern subtle bg */
    backdrop-filter: blur(5px);
    /* Modern blur */
    border-left: 3px solid var(--accent-primary);
    padding: 0.75rem 1rem;
    border-radius: 16px 16px 0 0;
    /* Top corners rounded */
}

/* ... (skipping to .input-section) ... */

.input-section {
    display: flex;
    flex-direction: column;
    /* Stack elements vertically */
    gap: 1.5rem;
    /* Increase gap for breathing room */
    padding: 1.75rem;
    /* Match .card padding */
    align-items: stretch;
    /* Stretch children to full width */
}

.input-section .section-title {
    margin: 0;
    font-size: 1.5rem;
    /* Increase title size */
    text-align: center;
    /* Center title */
    color: var(--text-primary);
}

#match-input {
    width: 100%;
    /* Full width */
    padding: 1rem 1.2rem;
    /* Larger padding */
    font-size: 1.1rem;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 8px;
    transition: all 0.3s ease;
}

#match-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(36, 180, 126, 0.2);
    outline: none;
}

/* Top Navigation Bar */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #2a2d2e;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 2.5rem;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Live Games Ticker */
.live-games-ticker {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(135deg, #1a1d1e 0%, #242729 100%);
    border-bottom: 1px solid rgba(36, 180, 126, 0.2);
    z-index: 999;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ticker-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.5rem;
    background: rgba(36, 180, 126, 0.1);
    height: 100%;
    border-right: 1px solid rgba(36, 180, 126, 0.3);
    min-width: 140px;
}

.ticker-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ticker-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.ticker-content {
    display: flex;
    gap: 0.75rem;
    animation: scroll-ticker 60s linear infinite;
    padding: 0 1rem;
}

.ticker-content:hover {
    animation-play-state: paused;
}

@keyframes scroll-ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    min-width: 280px;
    flex-shrink: 0;
}

.ticker-item:hover {
    background: rgba(36, 180, 126, 0.1);
    border-color: rgba(36, 180, 126, 0.4);
    transform: translateY(-2px);
}

.ticker-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    min-width: 40px;
}

.ticker-teams {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
}

.ticker-team {
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 500;
}

.ticker-odds {
    display: flex;
    gap: 0.5rem;
}

.ticker-odd {
    background: rgba(36, 180, 126, 0.15);
    color: var(--accent-primary);
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    min-width: 38px;
    text-align: center;
}

/* Logo on the left */
.logo {
    justify-self: start;
}

.header-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-icon {
    font-size: 1.5rem;
    color: var(--accent-primary);
}

.logo-text {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Navigation buttons in the center */
.top-nav-links {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    justify-self: center;
    height: 100%;
}

.top-nav-links .nav-btn {
    background: none;
    border: none;
    color: #a0a0a0;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: inherit;
    border-radius: 6px;
    margin: 0;
}

.top-nav-links .nav-btn:hover,
.top-nav-links .nav-btn.active {
    color: #ffffff;
    background-color: rgba(36, 180, 126, 0.2);
}

/* Auth links on the right */
.auth-links {
    justify-self: end;
}

.nav-btn-login {
    background: none;
    border: none;
    color: #a0a0a0;
    font-size: 0.9rem;
    font-weight: 400;
    cursor: pointer;
    padding: 0.6rem 0;
    transition: color 0.2s ease;
    font-family: inherit;
}

.nav-btn-login:hover {
    color: #ffffff;
}

.nav-btn-signup {
    background: var(--accent-primary);
    border: none;
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-family: inherit;
    margin-left: 1rem;
}

.nav-btn-signup:hover {
    background: #1e9a66;
    transform: translateY(-1px);
}

/* --- Authentication Page --- */
.auth-container {
    min-height: calc(100vh - 76px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, var(--bg-primary) 0%, #1a1d1e 100%);
}

.auth-card {
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 3rem;
    width: 100%;
    max-width: 440px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: authSlideIn 0.4s ease-out;
}

@keyframes authSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-section {
    transition: all 0.3s ease;
}

.auth-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.auth-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.5rem;
}

.auth-modal h3 {
    text-align: center;
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 600;
}

.auth-subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.auth-form {
    margin-bottom: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

.form-group input {
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.checkbox-label input[type="checkbox"] {
    margin-right: 0.5rem;
    width: auto;
}

.forgot-password {
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.forgot-password:hover {
    color: #1e9a66;
}

.auth-btn-primary {
    width: 100%;
    padding: 0.8rem;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 1rem;
}

.auth-btn-primary:hover {
    background: #1e9a66;
    transform: translateY(-1px);
}

.auth-divider {
    text-align: center;
    margin: 1.5rem 0;
    position: relative;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-color);
    z-index: 1;
}

.auth-divider span {
    background: var(--bg-secondary);
    padding: 0 1rem;
    position: relative;
    z-index: 2;
}

.auth-btn-google {
    width: 100%;
    padding: 0.8rem;
    background: white;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.auth-btn-google:hover {
    background: #f8f9fa;
    transform: translateY(-1px);
}

.google-icon {
    font-weight: bold;
    color: #4285f4;
}

.auth-switch {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 1rem;
}

.auth-switch a {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
}

.auth-switch a:hover {
    color: #1e9a66;
}

.auth-terms {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.auth-terms a {
    color: var(--accent-primary);
    text-decoration: none;
}

/* --- User Dashboard (when logged in) --- */
.user-dashboard {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
}

#user-email {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.tier-badge {
    background: var(--accent-primary);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.analyses-count {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.logout-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.logout-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* User Menu (Google Auth) */
.user-menu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-name {
    color: #f0f0f0 !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    font-family: inherit !important;
}

.user-avatar {
    border: 2px solid var(--accent-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.user-dropdown {
    position: absolute;
    top: 55px;
    right: 2.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1001;
}

.dropdown-item {
    padding: 0.5rem 0;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.dropdown-link {
    display: block;
    padding: 0.5rem;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.dropdown-link:hover {
    background: var(--bg-tertiary);
    color: var(--accent-primary);
}

/* Hide old sidebar navigation */
.main-nav-sidebar {
    display: none;
}

/* Main content centered */
.main-content {
    max-width: 1200px;
    width: 90%;
    padding: 2rem 1rem;
    margin: 126px auto 0 auto;
    /* leave space for fixed top-bar + ticker (60px + 50px + 16px) */
    transition: margin-top 0.3s ease;
}

/* When ticker is hidden, reduce top margin */
body.no-ticker .main-content {
    margin-top: 76px;
    /* 60px top-bar + 16px gap */
}

/* Live Mode: Remove extra spacing for Live Games page */
.main-content.live-mode {
    margin-top: 110px;
    padding: 0;
    width: 100%;
    max-width: none;
}

/* Row layout for dashboard */
.main-content-area {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 3rem;
}

/* adjust main column widths */
.main-content-area>main {
    flex: 1 1 75%;
}

/* Ensure cards stretch full width of the analysis column */
.main-content-area>main .card {
    width: 100%;
}

.sidebar {
    width: 340px;
    margin-left: auto;
}

/* Remove previous auto-centering margins */
.input-section {
    margin-left: 0;
    margin-right: 0;
}

/* widen analysis input-section */
.input-section.card {
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Make Live Market Odds card narrower */
#fetched-odds-card,
#manual-odds-card {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Make Analysis History narrower */
#analysis-history-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.main-content-area>main {
    width: 100%;
}

/* --- Layout --- */
.container {
    display: block;
    min-height: 100vh;
}

.main-nav-sidebar {
    background-color: #131516;
    width: 240px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #383838;
}

.nav-header h2 {
    margin: 0 0 2rem 0;
    text-align: center;
    font-size: 1.8rem;
}

.nav-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-btn-secondary {
    width: 100%;
    padding: 0.8rem;
    font-size: 0.9rem;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-btn-secondary:hover {
    background-color: #444;
    color: var(--text-primary);
}

.main-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Sidebar nav buttons (old style - kept for compatibility) */
.main-nav .nav-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 500;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    /* Reserve space for active border */
}

.main-nav .nav-btn:hover,
.main-nav .nav-btn.active {
    color: white;
    transform: translateX(0);
    /* Remove previous transform */
    background-color: rgba(36, 180, 126, 0.2);
    /* Faded green for active/hover */
    border-left: 3px solid var(--accent-primary);
    padding-left: calc(1rem - 3px);
}

.page-content {
    padding: 2rem;
    background-color: var(--bg-primary);
    /* unify background */
}

.main-content-area {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}



.live-indicator {
    height: 10px;
    width: 10px;
    background-color: #e55353;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(229, 83, 83, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(229, 83, 83, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(229, 83, 83, 0);
    }
}

.icon-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.icon-btn:hover {
    background-color: var(--bg-tertiary);
    color: var(--accent-primary);
    transform: none;
    /* Reset button transform */
}

.icon-btn svg {
    transition: transform 0.5s ease;
}

.icon-btn:hover svg {
    transform: rotate(360deg);
}

/* --- Auto-fetched Odds Display --- */
.fetched-odds-display {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

/* ================================================================
   Premium Sportsbook Ticker - Live Market Odds
   ================================================================ */
.odds-ticker-card {
    background: linear-gradient(155deg, rgba(25, 28, 35, 0.98), rgba(15, 17, 21, 0.95));
    border: 1px solid rgba(36, 180, 126, 0.2);
    border-radius: 14px;
    padding: 16px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.odds-ticker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.ticker-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Pulsing Live Indicator */
.live-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    animation: pulse-live 2s infinite;
}

.live-indicator.warning {
    background: #fbbf24;
}

.live-indicator.offline {
    background: #6b7280;
    animation: none;
}

@keyframes pulse-live {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    }

    50% {
        opacity: 0.7;
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
}

.ticker-title {
    font-size: 1em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.odds-source-badge {
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.odds-source-badge.warning {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.3);
}

.odds-source-badge.static {
    background: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
    border-color: rgba(100, 116, 139, 0.3);
}

/* Edit Button */
.edit-odds-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.edit-odds-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.05);
}

.edit-icon {
    width: 14px;
    height: 14px;
}

/* Odds Strip - 3 Column Layout */
.odds-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 480px) {
    .odds-strip {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* Betting Cards */
.odds-betting-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(30, 41, 59, 0.8);
    border-radius: 10px;
    padding: 16px 12px;
    border-left: 3px solid;
    transition: all 0.2s ease;
    cursor: pointer;
}

.odds-betting-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.odds-betting-card.home-card {
    border-left-color: #10b981;
}

.odds-betting-card.draw-card {
    border-left-color: #6b7280;
}

.odds-betting-card.away-card {
    border-left-color: #3b82f6;
}

.card-team-label {
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
}

.card-odds-value {
    font-size: 1.6em;
    font-weight: 700;
    color: #fff;
    font-family: 'Courier New', 'Monaco', monospace;
    letter-spacing: 1px;
}

.card-implied-prob {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
}

/* Manual Override Panel */
.odds-override-panel {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.override-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.override-title {
    font-size: 0.85em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cancel-override-btn {
    background: transparent;
    border: none;
    color: #ef4444;
    font-size: 0.8em;
    cursor: pointer;
    padding: 4px 8px;
}

.cancel-override-btn:hover {
    text-decoration: underline;
}

.odds-input-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 480px) {
    .odds-input-strip {
        grid-template-columns: 1fr;
    }
}

.odds-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.odds-input-group label {
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
}

.odds-input-group input {
    width: 100%;
    padding: 10px;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    font-size: 1.1em;
    font-family: 'Courier New', monospace;
    text-align: center;
}

.odds-input-group input:focus {
    outline: none;
    border-color: #10b981;
}

.override-hint {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0;
}

/* Legacy styles for backward compatibility */
.odds-display-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--border-color);
    min-width: 100px;
    transition: all 0.2s ease;
}

.odds-display-item:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.odds-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.odds-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-primary);
    font-family: 'Courier New', monospace;
}

.odds-source-info,
.odds-override-info {
    text-align: center;
    margin-top: 1rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* --- Manual Odds Inputs --- */
.odds-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.odds-inputs input {
    width: 140px;
    padding: 0.75rem;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
    text-align: center;
    font-size: 0.9rem;
}

/* --- Components --- */
.card {
    background: linear-gradient(155deg, rgba(32, 35, 45, 0.96), rgba(18, 20, 27, 0.92));
    border-radius: 16px;
    padding: 1.75rem;
    border: 1px solid rgba(36, 180, 126, 0.22);
    box-shadow: 0 20px 40px -28px rgba(10, 12, 18, 0.9);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    backdrop-filter: blur(6px);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.card:hover {
    transform: translateY(-3px);
    border-color: rgba(36, 180, 126, 0.45);
    box-shadow: 0 22px 45px -22px rgba(36, 180, 126, 0.4);
}

.main-header {
    text-align: center;
}

.header-link {
    text-decoration: none;
    color: inherit;
}

.main-header h1 {
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
}

/* Input Section Refinements */
.input-row {
    display: flex;
    gap: 1rem;
    width: 100%;
    align-items: stretch;
}

.input-row #match-input {
    flex: 1;
    margin: 0;
    /* Override any previous margins */
}

.input-row #start-btn {
    margin: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.glowing-btn {
    background-color: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.glowing-btn:hover {
    box-shadow: 0 0 20px rgba(0, 170, 255, 0.8);
    transform: translateY(-2px);
}

/* --- Tables & Reports --- */
#summary-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
}

#summary-table th,
#summary-table td {
    padding: 0.75rem 1rem;
    text-align: center;
}

#summary-table th {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 600;
}

#summary-table strong {
    color: var(--accent-secondary);
}

.tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.tab-btn {
    padding: 0.8rem 1.2rem;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.tab-btn.active,
.tab-btn:hover {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

.report-content {
    display: none;
    white-space: pre-wrap;
    line-height: 1.7;
}

.report-content.active {
    display: block;
}



/* --- Odds Loading State --- */
.odds-loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 1rem;
}

.mini-spinner {
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-left-color: var(--accent-primary);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

.odds-loading-text {
    margin: 0;
    color: var(--text-secondary);
    font-style: italic;
}

/* --- Enhanced Loading Spinner --- */
.analysis-progress {
    padding: 2rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.progress-content {
    text-align: center;
}

#loading-title {
    margin: 0 0 1rem 0;
    color: var(--accent-primary);
    font-size: 1.4rem;
}

.spinner {
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-left-color: var(--accent-primary);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1.5s linear infinite;
    margin: 0 auto 2rem auto;
}

.progress-details {
    margin: 2rem 0;
    text-align: left;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.progress-step {
    display: flex;
    align-items: center;
    padding: 0.8rem 1rem;
    margin-bottom: 0.5rem;
    background-color: var(--bg-tertiary);
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

.progress-step.active {
    border-left-color: var(--accent-primary);
    background-color: rgba(36, 180, 126, 0.1);
}

.progress-step.completed {
    border-left-color: var(--success-color);
    background-color: rgba(36, 180, 126, 0.05);
}

.step-icon {
    font-size: 1.2rem;
    margin-right: 1rem;
    min-width: 24px;
}

.step-text {
    flex: 1;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.step-status {
    font-size: 1rem;
    margin-left: 1rem;
}

.analysis-time {
    margin-top: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-style: italic;
}

#loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

#loading-status {
    margin-top: 1rem;
    font-size: 1.1rem;
    color: var(--text-secondary);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEURAL COMMAND CENTER - Loading Screen Upgrade
   "Make the user feel like they are watching a supercomputer at work"
   ═══════════════════════════════════════════════════════════════════════════ */

/* Animated Background Mesh */
#loading.card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
            rgba(10, 15, 25, 0.98) 0%,
            rgba(15, 25, 40, 0.95) 25%,
            rgba(10, 20, 35, 0.97) 50%,
            rgba(8, 18, 30, 0.96) 75%,
            rgba(12, 22, 38, 0.98) 100%);
    border: 1px solid rgba(0, 255, 136, 0.25);
    box-shadow:
        0 0 60px rgba(0, 255, 136, 0.08),
        0 0 120px rgba(0, 200, 255, 0.05),
        inset 0 0 80px rgba(0, 255, 136, 0.03);
}

#loading.card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(0, 255, 136, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(0, 200, 255, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.03) 0%, transparent 60%);
    animation: neural-mesh-drift 15s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes neural-mesh-drift {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(2%, 1%) rotate(1deg);
    }

    50% {
        transform: translate(-1%, 2%) rotate(-0.5deg);
    }

    75% {
        transform: translate(-2%, -1%) rotate(0.5deg);
    }
}

#loading .analysis-progress {
    position: relative;
    z-index: 1;
}

/* Pulsing Data Orb - Replaces Simple Spinner */
.spinner {
    display: none;
    /* Hide original spinner */
}

.data-orb {
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem auto;
    border-radius: 50%;
    position: relative;
    background: radial-gradient(circle at 30% 30%,
            rgba(0, 255, 136, 0.9) 0%,
            rgba(0, 200, 100, 0.7) 30%,
            rgba(0, 150, 80, 0.4) 60%,
            transparent 70%);
    box-shadow:
        0 0 30px rgba(0, 255, 136, 0.6),
        0 0 60px rgba(0, 255, 136, 0.4),
        0 0 100px rgba(0, 255, 136, 0.2),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    animation: orb-pulse 2s ease-in-out infinite, orb-rotate 8s linear infinite;
}

.data-orb::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 2px solid rgba(0, 255, 136, 0.3);
    animation: orb-ring-spin 3s linear infinite reverse;
}

.data-orb::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(0, 255, 136, 0.2) 40%,
            transparent 60%);
    animation: orb-inner-pulse 1.5s ease-in-out infinite alternate;
}

@keyframes orb-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 30px rgba(0, 255, 136, 0.6),
            0 0 60px rgba(0, 255, 136, 0.4),
            0 0 100px rgba(0, 255, 136, 0.2);
    }

    50% {
        transform: scale(1.08);
        box-shadow:
            0 0 40px rgba(0, 255, 136, 0.8),
            0 0 80px rgba(0, 255, 136, 0.5),
            0 0 120px rgba(0, 255, 136, 0.3);
    }
}

@keyframes orb-rotate {
    from {
        filter: hue-rotate(0deg);
    }

    to {
        filter: hue-rotate(30deg);
    }
}

@keyframes orb-ring-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes orb-inner-pulse {
    0% {
        opacity: 0.6;
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Enhanced Progress Steps - Neon Glow Effects */
.progress-step {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.progress-step.active {
    border-left-color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.4);
    background: linear-gradient(90deg,
            rgba(0, 255, 136, 0.15) 0%,
            rgba(0, 255, 136, 0.05) 50%,
            transparent 100%);
    box-shadow:
        0 0 20px rgba(0, 255, 136, 0.3),
        0 0 40px rgba(0, 255, 136, 0.15),
        inset 0 0 20px rgba(0, 255, 136, 0.05);
    animation: step-glow 1.5s ease-in-out infinite;
}

.progress-step.active .step-text {
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.progress-step.active .step-icon {
    animation: icon-spin 1s linear infinite;
}

@keyframes step-glow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(0, 255, 136, 0.3), 0 0 40px rgba(0, 255, 136, 0.15);
    }

    50% {
        box-shadow: 0 0 30px rgba(0, 255, 136, 0.5), 0 0 60px rgba(0, 255, 136, 0.25);
    }
}

@keyframes icon-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.progress-step.completed {
    border-left-color: #00ff88;
    background: rgba(0, 255, 136, 0.08);
    border: 1px solid rgba(0, 255, 136, 0.2);
}

.progress-step.completed .step-text {
    color: #ffffff;
    font-weight: 500;
}

.progress-step.completed .step-icon {
    color: #00ff88;
    font-weight: bold;
}

.progress-step.completed .step-status {
    color: #00ff88;
    font-size: 1.2rem;
}

/* Live Console Terminal */
.live-console {
    height: 100px;
    background: #0a0a0a;
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 8px;
    margin-top: 1.5rem;
    padding: 12px;
    overflow-y: auto;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    position: relative;
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(0, 255, 136, 0.1);
}

.live-console::before {
    content: 'NEURAL_CONSOLE v2.0';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 4px 12px;
    background: linear-gradient(90deg, rgba(0, 255, 136, 0.15), transparent);
    font-size: 0.65rem;
    color: rgba(0, 255, 136, 0.6);
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(0, 255, 136, 0.2);
}

.live-console .console-content {
    margin-top: 20px;
}

.live-console .log-line {
    color: #00ff88;
    margin: 0;
    padding: 2px 0;
    opacity: 0;
    animation: log-fade-in 0.3s ease-out forwards;
    text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
}

.live-console .log-line::before {
    content: '> ';
    color: rgba(0, 255, 136, 0.6);
}

.live-console .log-line.highlight {
    color: #00ffff;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}

.live-console .log-line.warning {
    color: #ffaa00;
    text-shadow: 0 0 8px rgba(255, 170, 0, 0.5);
}

.live-console .log-line.success {
    color: #00ff88;
    font-weight: 600;
}

@keyframes log-fade-in {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scanline effect for terminal authenticity */
.live-console::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 2px,
            rgba(0, 0, 0, 0.1) 2px,
            rgba(0, 0, 0, 0.1) 4px);
    pointer-events: none;
    z-index: 1;
}

/* Console scrollbar */
.live-console::-webkit-scrollbar {
    width: 6px;
}

.live-console::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.5);
}

.live-console::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 136, 0.4);
    border-radius: 3px;
}

.live-console::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 136, 0.6);
}

/* Loading Title Enhancement */
#loading-title {
    color: #00ff88;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 1px;
}



.hidden {
    display: none !important;
}

/* --- Dashboard Page Layout --- */
#dashboard-page {
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}



/* --- Info Sections Layout --- */
.info-sections-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.info-section {
    display: flex;
    flex-direction: column;
}

.info-section .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* --- Statistics Mini Cards --- */
.stats-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-mini-card {
    background-color: var(--bg-tertiary);
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.stat-mini-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-1px);
}

.stat-mini-title {
    margin: 0 0 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stat-mini-value {
    margin: 0;
    color: var(--accent-primary);
    font-size: 1.5rem;
    font-weight: 700;
}

/* --- About Content --- */
.about-content h4 {
    color: var(--accent-secondary);
    margin: 1.5rem 0 0.5rem 0;
    font-size: 1.1rem;
}

.about-content p {
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

/* --- Pricing Mini Cards --- */
.pricing-mini-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.plan-mini-card {
    background-color: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.plan-mini-card.highlighted {
    border-color: var(--accent-primary);
    background-color: rgba(36, 180, 126, 0.1);
}

.plan-mini-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-primary);
}

.plan-mini-card h4 {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 1.3rem;
    font-weight: 600;
}

.price-mini {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: 1rem;
}

.price-strikethrough {
    text-decoration: line-through;
    color: var(--text-secondary);
    font-size: 1.2rem;
    margin-left: 0.5rem;
}

.feature-mini-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
    text-align: left;
}

.feature-mini-list li {
    padding: 0.3rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    position: relative;
    padding-left: 1.5rem;
}

.feature-mini-list li:before {
    content: "✓";
    color: var(--accent-primary);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
    text-align: left;
}

.feature-list li {
    padding: 0.4rem 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    position: relative;
    padding-left: 1.5rem;
}

.feature-list li:before {
    content: "✓";
    color: var(--accent-primary);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* --- Pricing Page Styles --- */
.pricing-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.plan-card {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    flex: 0 1 300px;
    max-width: 350px;
}

.plan-card.highlighted {
    border-color: var(--accent-primary);
    background-color: rgba(36, 180, 126, 0.1);
    transform: scale(1.05);
}

.plan-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-primary);
}

.plan-card.highlighted:hover {
    transform: scale(1.05) translateY(-5px);
}

.plan-card h3 {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
}

.price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: 1.5rem;
}

.price-save {
    display: block;
    font-size: 0.9rem;
    color: var(--accent-secondary);
    font-weight: 500;
    margin-top: 0.5rem;
}

.plan-card button {
    width: 100%;
    margin-bottom: 1.5rem;
}

/* --- About Page Styles --- */
.about-content h4 {
    color: var(--accent-secondary);
    margin: 2rem 0 1rem 0;
    font-size: 1.2rem;
}

.about-content p {
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.about-content ol {
    counter-reset: step-counter;
}

.about-content ol li {
    counter-increment: step-counter;
}

.about-content ol li:before {
    content: counter(step-counter);
    background-color: var(--accent-primary);
    color: white;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    margin-right: 0.5rem;
}

/* --- AI Predictions Summary Styles --- */
.prediction-winner {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #22c55e !important;
    font-weight: 600 !important;
    border-left: 3px solid #22c55e !important;
}

/* Heatmap Cells */
.heatmap-cell {
    text-align: center;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    transition: background 0.3s ease;
    padding: 10px 8px;
}

.heatmap-cell.cell-winner {
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Goal Cells */
.goal-cell {
    text-align: center;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95em;
}

/* Score Cell with Scoreboard Badge */
.score-cell {
    padding: 6px 10px;
}

.scoreboard-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 12px;
    font-family: 'Courier New', 'Monaco', monospace;
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: 1px;
}

.scoreboard-badge .score-home,
.scoreboard-badge .score-away {
    min-width: 18px;
    text-align: center;
    color: #fff;
}

.scoreboard-badge .score-sep {
    color: rgba(255, 255, 255, 0.4);
    margin: 0 2px;
}

/* Summary Table Enhancements */
#summary-table th {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 8px;
    white-space: nowrap;
}

#summary-table .ai-name {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

/* =================================================================
   AI Predictions Table - Trading Terminal Aesthetic
   ================================================================= */

/* Data Unavailable Styling */
.data-unavailable {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    padding: 12px;
}

.unavailable-badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(156, 163, 175, 0.15);
    border: 1px solid rgba(156, 163, 175, 0.3);
    border-radius: 4px;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.5);
    font-style: normal;
}

.ai-name.ai-unavailable {
    opacity: 0.5;
}

/* Confidence Level Colors for Heatmap */
.heatmap-cell.confidence-high {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.heatmap-cell.confidence-moderate {
    color: rgba(255, 255, 255, 0.95);
}

.heatmap-cell.confidence-low {
    color: rgba(255, 255, 255, 0.7);
}

/* Enhanced Scoreboard Badge */
.scoreboard-badge.scoreboard-enhanced {
    font-size: 1.2em;
    font-weight: 800;
    padding: 8px 14px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* --- AI Consensus Summary Styles --- */
.consensus-summary {
    margin-top: 1.5rem;
    border: 1px solid var(--accent-primary);
    background: linear-gradient(135deg, rgba(36, 180, 126, 0.05) 0%, rgba(36, 180, 126, 0.02) 100%);
}

.consensus-content {
    padding: 1rem;
}

.consensus-winner {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(36, 180, 126, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(36, 180, 126, 0.3);
}

.winner-announcement {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.winner-label {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.winner-name {
    font-size: 1.4rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 6px;
}

.winner-name.team-winner {
    background: var(--accent-primary);
    color: white;
}

.winner-name.draw-winner {
    background: #fbbf24;
    color: #1f2937;
}

.winner-confidence {
    font-size: 0.9rem;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
}

.consensus-breakdown {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.breakdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.breakdown-item:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.breakdown-item .team-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.breakdown-item .team-votes {
    color: var(--accent-primary);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}

.breakdown-item .team-avg {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* --- User Prediction Interface Styles --- */
#user-prediction-container {
    margin-top: 1.5rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(147, 51, 234, 0.03) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.prediction-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0.5rem 0 0 0;
    font-weight: 400;
}

.prediction-form {
    padding: 1.5rem;
}

.prediction-section {
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 12px;
}

.prediction-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: none;
}

.prediction-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

/* ═══ Selection Cards - Betting Slip Style ═══ */
.prediction-option,
.prediction-option-ou,
.prediction-option-btts {
    background: #1f2937;
    border: 2px solid #374151;
    border-radius: 12px;
    padding: 1.25rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* Hover State - Subtle Glow */
.prediction-option:hover,
.prediction-option-ou:hover,
.prediction-option-btts:hover {
    transform: translateY(-3px);
    border-color: #6b7280;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(107, 114, 128, 0.15);
}

/* Selected State - Full Emerald Accent */
.prediction-option.selected,
.prediction-option-ou.selected,
.prediction-option-btts.selected {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    border-color: #34d399;
    transform: translateY(-3px);
    box-shadow:
        0 4px 20px rgba(16, 185, 129, 0.4),
        0 0 30px rgba(16, 185, 129, 0.2);
}

.prediction-option.selected .team-name,
.prediction-option.selected .selection-card__label,
.prediction-option-ou.selected .team-name,
.prediction-option-btts.selected .team-name {
    color: #ffffff;
    font-weight: 700;
}

/* Checkmark Badge for Selected */
.prediction-option.selected::before,
.prediction-option-ou.selected::before,
.prediction-option-btts.selected::before {
    content: '✓';
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ffffff;
    color: #059669;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Two column layout for O/U and BTTS */
.prediction-section:nth-child(2) .prediction-options,
.prediction-section:nth-child(3) .prediction-options {
    grid-template-columns: repeat(2, 1fr);
}

.option-icon,
.selection-card__icon {
    font-size: 1.75rem;
    line-height: 1;
}

.option-label,
.selection-card__label {
    font-weight: 700;
    color: #f9fafb;
    font-size: 0.95rem;
}

.team-name {
    font-weight: 700;
    color: #f9fafb;
    font-size: 0.95rem;
}

.option-odds {
    font-size: 1rem;
    font-weight: 600;
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    display: inline-block;
    margin-top: 0.25rem;
}

/* ═══ Sticky Save Prediction Footer ═══ */
.prediction-sticky-footer {
    position: fixed;
    bottom: -80px;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.95) 0%, #111827 100%);
    border-top: 1px solid #374151;
    padding: 1rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    z-index: 1000;
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(12px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

.prediction-sticky-footer--visible {
    bottom: 0;
}

.btn-save-prediction {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: #ffffff;
    border: none;
    padding: 0.9rem 2.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.btn-save-prediction:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(16, 185, 129, 0.5);
}

.btn-save-prediction:disabled {
    background: #374151;
    color: #6b7280;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.prediction-details {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.confidence-selector label,
.prediction-notes label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.confidence-selector select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.prediction-notes textarea {
    width: 100%;
    min-height: 80px;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
    resize: vertical;
    font-family: inherit;
}

.prediction-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.prediction-status {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
    padding: 0.8rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.prediction-status.success {
    color: var(--success-color);
    background: rgba(36, 180, 126, 0.1);
    border-color: var(--success-color);
}

.prediction-status.error {
    color: var(--error-color);
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--error-color);
}

/* Responsive design for prediction interface */
@media (max-width: 768px) {
    .prediction-options {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .prediction-section:nth-child(2) .prediction-options,
    .prediction-section:nth-child(3) .prediction-options {
        grid-template-columns: 1fr;
    }

    .prediction-details {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .prediction-option,
    .prediction-option-ou,
    .prediction-option-btts {
        padding: 1.2rem;
    }
}

/* --- Analysis History Styles --- */
.no-history {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    padding: 2rem;
}

.history-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.history-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.history-item.completed.correct {
    border-left: 4px solid var(--success-color);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(34, 197, 94, 0.02) 100%);
}

.history-item.completed.incorrect {
    border-left: 4px solid var(--error-color);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(239, 68, 68, 0.02) 100%);
}

.history-item.pending {
    border-left: 4px solid var(--warning-color);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(245, 158, 11, 0.02) 100%);
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.match-teams {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.prediction-status-badge {
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.prediction-status-badge.completed {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success-color);
}

.prediction-status-badge.pending {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.history-details {
    display: grid;
    gap: 0.5rem;
}

.prediction-info,
.actual-result {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.confidence {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.score {
    background: var(--bg-tertiary);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    margin-left: 0.5rem;
}

.prediction-date {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.prediction-notes {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.9rem;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    border-left: 3px solid var(--accent-primary);
}

/* --- Analytics Dashboard Styles --- */
.analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1rem 0;
    border-bottom: 2px solid var(--border-color);
}

.analytics-header h1 {
    color: var(--text-primary);
    margin: 0;
}

.timeframe-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.timeframe-selector select {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* KPI Cards */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.kpi-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.kpi-card:hover::before {
    opacity: 1;
}

.kpi-card.accuracy::before {
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

.kpi-card.roi::before {
    background: linear-gradient(90deg, #10b981, #059669);
}

.kpi-card.profit::before {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.kpi-card.streak::before {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.kpi-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.kpi-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: 0.5rem;
}

.kpi-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Analytics Grid */
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.analytics-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

/* Performance Breakdown */
.performance-breakdown {
    padding: 1rem;
}

.breakdown-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.breakdown-label {
    min-width: 80px;
    font-weight: 500;
    color: var(--text-primary);
}

.breakdown-bar {
    flex: 1;
    height: 20px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.breakdown-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.8s ease;
}

.breakdown-fill.home {
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

.breakdown-fill.draw {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.breakdown-fill.away {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.breakdown-value {
    min-width: 50px;
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
}

/* Simulation Controls */
.simulation-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.simulation-controls label {
    font-weight: 500;
    color: var(--text-primary);
}

.simulation-controls input {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    width: 120px;
}

.simulation-results {
    padding: 1rem;
}

.simulation-strategy {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.strategy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.strategy-name {
    font-weight: 600;
    color: var(--text-primary);
}

.strategy-roi {
    font-weight: 700;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    color: white;
}

.strategy-roi.positive {
    background: var(--success-color);
}

.strategy-roi.negative {
    background: var(--error-color);
}

.strategy-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.stat-item {
    text-align: center;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary);
}

/* Market Analysis */
.market-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.market-name {
    font-weight: 500;
    color: var(--text-primary);
    text-transform: capitalize;
}

.market-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
}

.market-accuracy {
    font-weight: 600;
    color: var(--accent-primary);
}

.market-count {
    color: var(--text-secondary);
}

/* Time Patterns */
.time-pattern-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.pattern-name {
    font-weight: 500;
    color: var(--text-primary);
}

.pattern-accuracy {
    font-weight: 600;
    color: var(--accent-primary);
}

/* Value Betting */
.value-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.value-range {
    font-weight: 500;
    color: var(--text-primary);
    text-transform: capitalize;
}

.value-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .analytics-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .analytics-grid {
        grid-template-columns: 1fr;
    }

    .simulation-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Legacy Statistics Page Styles (for backward compatibility) --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background-color: var(--bg-secondary);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.stat-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.stat-title {
    margin: 0 0 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    margin: 0;
    color: var(--accent-primary);
    font-size: 2rem;
    font-weight: 700;
}

.table-container {
    overflow-x: auto;
    margin-top: 1rem;
}

#predictions-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

#predictions-history-table th {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}

#predictions-history-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

#predictions-history-table tbody tr:hover {
    background-color: var(--bg-tertiary);
}

.match-teams {
    font-weight: 500;
    color: var(--text-primary);
}

.prediction-percentage {
    font-weight: 600;
    color: var(--accent-primary);
}

.result-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.result-pending {
    background-color: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.result-correct {
    background-color: rgba(36, 180, 126, 0.2);
    color: var(--accent-primary);
}

.result-wrong {
    background-color: rgba(229, 83, 83, 0.2);
    color: #e55353;
}

.result-actions {
    display: flex;
    gap: 0.5rem;
}

.result-btn {
    padding: 0.25rem 0.75rem;
    border: none;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.result-btn-correct {
    background-color: var(--accent-primary);
    color: white;
}

.result-btn-wrong {
    background-color: #e55353;
    color: white;
}

.result-btn:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}

.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.ai-count-badge {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* --- Value Analysis Table Styles --- */
#value-analysis-table {
    font-size: 0.9rem;
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

#value-analysis-table th,
#value-analysis-table td {
    padding: 0.8rem 1rem;
}

.value-row.value-success {
    background: rgba(34, 197, 94, 0.1);
    border-left: 4px solid #22c55e;
}

.value-row.value-info {
    background: rgba(59, 130, 246, 0.1);
    border-left: 4px solid #3b82f6;
}

.value-row.value-warning {
    background: rgba(245, 158, 11, 0.1);
    border-left: 4px solid #f59e0b;
}

.value-row.value-danger {
    background: rgba(239, 68, 68, 0.1);
    border-left: 4px solid #ef4444;
}

.market-name {
    font-weight: 600;
    color: var(--text-primary);
}

.probability {
    font-family: 'Courier New', monospace;
    font-weight: 500;
}

.difference.positive {
    color: #22c55e;
    font-weight: 600;
}

.difference.negative {
    color: #ef4444;
    font-weight: 600;
}

.expected-value.positive {
    color: #22c55e;
    font-weight: 600;
}

.expected-value.negative {
    color: #ef4444;
    font-weight: 600;
}

.value-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
}

/* Legacy color-based badges */
.value-badge.value-success {
    background: #22c55e;
    color: white;
}

.value-badge.value-info {
    background: #3b82f6;
    color: white;
}

.value-badge.value-warning {
    background: #f59e0b;
    color: white;
}

.value-badge.value-danger {
    background: #ef4444;
    color: white;
}

/* ================================================================
   Smart Value Badge Styles - New Grade-Based Classifications
   ================================================================ */

/* STRONG VALUE - Green/Gold gradient (Bankers, high confidence bets) */
.value-badge.value-strong {
    background: linear-gradient(135deg, #10b981, #84cc16);
    border: 2px solid #22c55e;
    color: white;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.value-badge.value-strong::before {
    content: '★ ';
}

/* SLIGHT EDGE - Yellow/Grey outline (Moderate value opportunities) */
.value-badge.value-edge {
    background: transparent;
    border: 2px solid #facc15;
    color: #fbbf24;
}

.value-badge.value-edge:hover {
    background: rgba(250, 204, 21, 0.1);
}

/* LONGSHOT - Purple dashed border (Speculative high-reward bets) */
.value-badge.value-longshot {
    background: transparent;
    border: 2px dashed #a855f7;
    color: #c084fc;
}

.value-badge.value-longshot::before {
    content: '🎯 ';
}

.value-badge.value-longshot:hover {
    background: rgba(168, 85, 247, 0.1);
}

/* NEUTRAL - Grey subdued (Skip - not worth the risk) */
.value-badge.value-neutral {
    background: rgba(75, 85, 99, 0.3);
    border: 1px solid #6b7280;
    color: #9ca3af;
}

/* ================================================================
   Confidence Bar - Visual representation of confidence score
   ================================================================ */

.confidence-bar-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.confidence-bar {
    height: 4px;
    width: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.confidence-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease-out;
}

/* Confidence bar color variants */
.confidence-bar-fill.confidence-high {
    background: linear-gradient(90deg, #10b981, #22c55e);
}

.confidence-bar-fill.confidence-medium {
    background: linear-gradient(90deg, #8b5cf6, #a855f7);
}

.confidence-bar-fill.confidence-low {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.confidence-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    min-width: 28px;
}

.recommendation-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.35rem;
    line-height: 1.3;
}

/* Ghost/Outline Button - Subtle secondary action */
.ghost-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-secondary);
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ghost-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Notifications */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 6px;
    color: white;
    font-weight: 500;
    z-index: 1000;
    animation: slideIn 0.3s ease-out;
}

.notification-success {
    background-color: #27ae60;
}

.notification-error {
    background-color: #e74c3c;
}

.notification-info {
    background-color: #3498db;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Small spinner for refresh button */
.spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.odds-tiny {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

/* Ensure the value analysis card stretches across available width on results grid */
#value-analysis-container {
    width: 100%;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .top-bar {
        padding: 0 1.5rem;
    }

    .top-nav-links {
        gap: 1.8rem;
    }

    .top-nav-links .nav-btn {
        font-size: 0.85rem;
    }

    .logo-text {
        font-size: 1.1rem;
    }

    .logo-icon {
        font-size: 1.3rem;
    }

    .fetched-odds-display {
        flex-direction: column;
        gap: 0.8rem;
    }

    .odds-display-item {
        flex-direction: row;
        justify-content: space-between;
        padding: 0.8rem 1rem;
    }

    .odds-label {
        margin-bottom: 0;
        font-size: 0.9rem;
    }

    .odds-value {
        font-size: 1.2rem;
    }

    .pricing-container {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .plan-card {
        max-width: 100%;
        flex: 1 1 auto;
    }

    .plan-card.highlighted {
        transform: none;
    }

    .plan-card.highlighted:hover {
        transform: translateY(-5px);
    }

    .info-sections-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .stats-mini-grid {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .pricing-mini-container {
        gap: 1rem;
    }

    .main-header h1 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .top-bar {
        padding: 0 1rem;
    }

    .top-nav-links {
        gap: 1.2rem;
    }

    .top-nav-links .nav-btn {
        font-size: 0.8rem;
    }

    .logo-text {
        font-size: 1rem;
    }

    .logo-icon {
        font-size: 1.2rem;
    }

    .nav-btn-login {
        font-size: 0.8rem;
    }

    .analysis-progress {
        padding: 1.5rem 1rem;
    }

    .progress-details {
        max-width: 100%;
    }

    .progress-step {
        padding: 0.6rem 0.8rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .step-text {
        font-size: 0.85rem;
    }

    .step-status {
        margin-left: 0;
        align-self: flex-end;
    }

    .odds-loading-state {
        flex-direction: column;
        padding: 1.5rem;
        text-align: center;
    }

    .main-content {
        width: 95%;
        padding: 1rem 0.5rem;
    }

    .info-section .card {
        padding: 1rem;
    }

    .card-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .card-header h2 {
        font-size: 1.3rem;
    }
}

/* --- Generic utilities --- */
.positive {
    color: var(--success-color);
}

.negative {
    color: var(--danger-color);
}

#screener-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

#screener-table th,
#screener-table td {
    padding: 0.75rem 1rem;
    text-align: center;
}

#screener-table th {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 600;
}

/* Drill-down Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: var(--bg-secondary);
    color: var(--text-primary);
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-color);
}

.modal-close-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
}

.modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

#modal-body table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

#modal-body th,
#modal-body td {
    padding: 6px 8px;
    border: 1px solid #ddd;
    text-align: center;
}

#modal-body th {
    background: var(--table-header-bg, #f0f0f0);
    font-weight: 600;
}

.filters-bar {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: 1rem 0;
}

.filters-bar label {
    font-size: 0.9rem;
}

.filters-bar input {
    margin-left: 4px;
    padding: 3px 4px;
}

.status-text {
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    margin-left: auto;
    margin-right: 1rem;
}

/* --- Authentication Responsive Design --- */
@media (max-width: 768px) {
    .auth-container {
        padding: 1rem;
    }

    .auth-card {
        padding: 2rem;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .auth-container {
        padding: 0.5rem;
        min-height: calc(100vh - 60px);
    }

    .auth-card {
        padding: 1.5rem;
        border-radius: 12px;
    }

    .user-dashboard {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-end;
    }

    .user-info {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.3rem;
        font-size: 0.8rem;
    }

    .auth-header h2 {
        font-size: 1.3rem;
    }

    .auth-card h3 {
        font-size: 1.5rem;
    }
}

/* --
- Fixtures Loading States --- */
.fixtures-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    text-align: center;
}

.fixtures-loading p {
    margin-top: 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.empty-list-msg,
.error-msg {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
    font-style: italic;
}

.retry-btn {
    background: var(--accent-primary);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 0.5rem;
    font-size: 0.8rem;
}

.retry-btn:hover {
    background: #1e9a66;
}

/* ---
 Table Styles --- */
table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

thead {
    background-color: var(--bg-tertiary);
}

th,
td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

th {
    font-weight: 600;
    color: var(--accent-primary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

td {
    font-size: 0.9rem;
}

.ai-name {
    font-weight: 600;
    color: var(--accent-secondary);
}

.prediction-winner {
    background-color: rgba(36, 180, 126, 0.2);
    font-weight: 600;
    color: var(--accent-primary);
}

.goal-prediction {
    text-align: center;
    font-weight: 600;
    color: var(--accent-secondary);
    background-color: rgba(255, 193, 7, 0.1);
}

.error-cell {
    color: var(--error-color);
    font-style: italic;
    text-align: center;
}

/* --- Goal Predictions Styling --- */
.goal-predictions {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.goal-predictions h3 {
    margin: 0 0 1rem 0;
    color: var(--accent-secondary);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.goal-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.goal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background-color: var(--bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.goal-label {
    font-weight: 500;
    color: var(--text-secondary);
}

.goal-value {
    font-weight: 700;
    color: var(--accent-primary);
    font-size: 1.1rem;
}

.predicted-score {
    grid-column: 1 / -1;
    background-color: rgba(36, 180, 126, 0.1);
    border-color: var(--accent-primary);
}

.predicted-score .goal-value {
    font-size: 1.3rem;
    color: var(--accent-primary);
}

/* --- Consensus Summary Styling --- */
.consensus-summary {
    margin-top: 1.5rem;
}

.consensus-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.consensus-winner {
    text-align: center;
    padding: 1rem;
    background-color: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.winner-announcement {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.winner-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.winner-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.winner-name.draw-winner {
    color: var(--accent-secondary);
}

.winner-confidence {
    font-size: 0.9rem;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}

.consensus-breakdown {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.breakdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background-color: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    text-align: center;
}

.team-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.team-votes {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.team-avg {
    font-weight: 600;
    color: var(--accent-primary);
    font-size: 1.1rem;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .goal-breakdown {
        grid-template-columns: 1fr;
    }

    .consensus-breakdown {
        grid-template-columns: 1fr;
    }

    table {
        font-size: 0.8rem;
    }

    th,
    td {
        padding: 0.5rem;
    }
}

/* -
-- Top Navigation Responsive Design --- */
@media (max-width: 1024px) {
    .top-nav-links {
        gap: 1rem;
    }

    .top-nav-links .nav-btn {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }
}

@media (max-width: 768px) {
    .top-bar {
        padding: 0 1.5rem;
    }

    .top-nav-links {
        gap: 0.75rem;
    }

    .top-nav-links .nav-btn {
        font-size: 0.8rem;
        padding: 0.4rem 0.5rem;
    }

    .logo-text {
        font-size: 1.1rem;
    }
}

@media (max-width: 640px) {
    .top-bar {
        padding: 0 1rem;
    }

    .top-nav-links {
        gap: 0.5rem;
    }

    .top-nav-links .nav-btn {
        font-size: 0.75rem;
        padding: 0.3rem 0.4rem;
    }
}

/* --- Top
 Navigation Responsive Design --- */
@media (max-width: 1024px) {
    .top-nav-links {
        gap: 1.5rem;
    }

    .top-nav-links .nav-btn {
        font-size: 0.85rem;
        padding: 0.6rem 1rem;
    }
}

@media (max-width: 768px) {
    .top-bar {
        padding: 0 1.5rem;
    }

    .top-nav-links {
        gap: 1rem;
    }

    .top-nav-links .nav-btn {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }

    .logo-text {
        font-size: 1.1rem;
    }
}

@media (max-width: 640px) {
    .top-bar {
        padding: 0 1rem;
    }

    .top-nav-links {
        gap: 0.75rem;
    }

    .top-nav-links .nav-btn {
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
    }

    .logo-text {
        font-size: 1rem;
    }
}

/* --- Pre
dicted Score Styling --- */
.predicted-score {
    background-color: rgba(36, 180, 126, 0.1);
    color: var(--accent-primary);
    font-weight: 600;
    text-align: center;
    border-left: 2px solid var(--accent-primary);
}

.predicted-score strong {
    font-size: 1.1rem;
    color: var(--accent-primary);
}

/* --- User Prediction Interface Styles --- */
.prediction-form {
    padding: 1.5rem;
}

.prediction-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.prediction-option {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.prediction-option:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(36, 180, 126, 0.2);
}

.prediction-option.selected {
    border-color: var(--accent-primary);
    background: rgba(36, 180, 126, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(36, 180, 126, 0.3);
}

.option-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.option-label {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.option-odds {
    color: var(--accent-primary);
    font-weight: 700;
    font-size: 1.2rem;
    font-family: 'Courier New', monospace;
}

.prediction-details {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.confidence-selector label,
.prediction-notes label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-weight: 500;
}

.confidence-selector select {
    width: 100%;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.prediction-notes textarea {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    resize: vertical;
    font-family: inherit;
}

.prediction-status {
    text-align: center;
    padding: 1rem;
    border-radius: 6px;
    font-weight: 500;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.prediction-status.success {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.prediction-status.error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.prediction-subtitle {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9rem;
}

/* --- Notification Styles --- */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 1rem 1.5rem;
    border-radius: 6px;
    color: white;
    font-weight: 500;
    z-index: 10000;
    animation: slideIn 0.3s ease-out;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.notification-success {
    background: var(--success-color);
}

.notification-error {
    background: var(--error-color);
}

.notification-info {
    background: var(--accent-primary);
}

.notification-warning {
    background: var(--warning-color);
}

/* --- Analysis Toast Notification --- */
.analysis-toast {
    position: fixed;
    top: 80px;
    right: 20px;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #1a1d29, #252838);
    border: 1px solid rgba(99, 102, 241, 0.4);
    color: white;
    font-weight: 500;
    z-index: 10001;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(99, 102, 241, 0.2);
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.analysis-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.toast-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: toast-spin 0.8s linear infinite;
}

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

.toast-message {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.95);
}

.toast-message strong {
    color: #a5b4fc;
}

.toast-action-btn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.toast-action-btn:hover {
    background: linear-gradient(135deg, #7c7ff1, #9d6ff6);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.toast-close-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
}

.toast-close-btn:hover {
    color: rgba(255, 255, 255, 0.9);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* --- Analysis Toast: Completion State --- */
.analysis-toast.analysis-complete {
    background: linear-gradient(135deg, #0d2818, #1a3d2e);
    border: 1px solid rgba(34, 197, 94, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(34, 197, 94, 0.2);
}

.analysis-toast.analysis-complete .toast-message strong {
    color: #86efac;
}

.toast-check {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: white;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

.toast-view-results {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4) !important;
}

.toast-view-results:hover {
    background: linear-gradient(135deg, #4ade80, #22c55e) !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.5) !important;
}

/* --- Analysis Toast: Error State --- */
.analysis-toast.analysis-error {
    background: linear-gradient(135deg, #2a1215, #3d1a1e);
    border: 1px solid rgba(239, 68, 68, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(239, 68, 68, 0.2);
}

.analysis-toast.analysis-error .toast-message {
    color: #fca5a5;
}

.toast-error-icon {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.analysis-toast.analysis-error .toast-action-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.analysis-toast.analysis-error .toast-action-btn:hover {
    background: linear-gradient(135deg, #f87171, #ef4444);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* --- Analysis History Styles --- */
.history-item {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--border-color);
}

.history-item.completed {
    border-left-color: var(--success-color);
}

.history-item.pending {
    border-left-color: var(--warning-color);
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.match-teams {
    font-weight: 600;
    color: var(--text-primary);
}

.prediction-status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.prediction-status-badge.completed {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.prediction-status-badge.pending {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.history-details {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.prediction-info {
    margin-bottom: 0.25rem;
}

.confidence {
    color: var(--accent-primary);
    font-weight: 500;
}

.actual-result {
    margin-bottom: 0.25rem;
}

.score {
    color: var(--accent-primary);
    font-weight: 600;
    margin-left: 0.5rem;
}

.prediction-date {
    margin-bottom: 0.25rem;
}

.prediction-notes {
    font-style: italic;
    color: var(--text-primary);
    margin-top: 0.5rem;
}

.no-history {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
    font-style: italic;
}

/* S
port Selector Styles */
.sport-selector {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.sport-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: var(--bg-secondary);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 100px;
    position: relative;
}

.sport-option:hover {
    background: var(--bg-tertiary);
    transform: translateY(-2px);
}

.sport-option.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.sport-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.sport-icon {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.sport-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.coming-soon {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--warning-color);
    color: white;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-weight: 500;
}

/* Basketball specific styles */
.basketball-mode .sport-option[data-sport="basketball"] {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.basketball-mode #score-header-1::after {
    content: " Points";
}

.basketball-mode #score-header-2::after {
    content: " Points";
}

.basketball-mode #score-header-3::after {
    content: " Points";
}

/* Responsive design for sport selector */
@media (max-width: 768px) {
    .sport-selector {
        gap: 0.5rem;
    }

    .sport-option {
        padding: 0.75rem 1rem;
        min-width: 80px;
    }

    .sport-icon {
        font-size: 1.5rem;
    }

    .sport-name {
        font-size: 0.8rem;
    }
}

/* --- Dashboard intake refresh --- */
/* --- Modern Sport Selector --- */
.sport-selector-top {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.sport-option {
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sport-option:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

.sport-option.active {
    background: rgba(36, 180, 126, 0.2);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    box-shadow: 0 0 15px rgba(36, 180, 126, 0.2);
}

/* Refine Card Header merged into main definition */

/* Enhanced Statistics Page Styles */
.ml-performance-grid {
    margin-bottom: 2rem;
}

.ml-model-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ml-stat-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 6px;
    align-items: center;
}

.ml-model-name {
    font-weight: 600;
    color: var(--text-primary);
}

.ml-accuracy {
    font-weight: 500;
    color: var(--success-color);
}

.ml-predictions {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.error-text {
    color: var(--error-color);
    font-style: italic;
}

.text-center {
    text-align: center;
}

/* Data collection status indicator */
#stats-data-status {
    color: var(--success-color);
}

#stats-data-status.inactive {
    color: var(--error-color);
}

#stats-data-status.warning {
    color: var(--warning-color);
}

/*
 Multi-Market Display Styles */
#multi-market-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.market-section {
    background: var(--card-bg, #1a1d29);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.market-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.market-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.4em;
    font-weight: 600;
    color: var(--text-primary, #ffffff);
    margin: 0;
}

.market-icon {
    font-size: 1.3em;
}

.confidence-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.confidence-high {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.confidence-medium {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.confidence-low {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.market-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.consensus-pick {
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.consensus-label {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.consensus-value {
    font-size: 2em;
    font-weight: 700;
    color: var(--primary-color, #6366f1);
    margin-bottom: 8px;
}

.consensus-value.score-value {
    font-size: 2.5em;
    font-family: 'Courier New', monospace;
}

.consensus-agreement {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.6);
}

.expected-goals {
    margin-top: 10px;
    font-size: 0.95em;
    color: rgba(255, 255, 255, 0.8);
}

/* Probability Bars - WINNER-FOCUSED DESIGN */
.probability-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.probability-bars.vote-split {
    gap: 8px;
}

.prob-bar-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.2s ease;
}

/* Winner gets bolder treatment */
.prob-bar-item.winner-item {
    padding: 12px;
    background: rgba(16, 185, 129, 0.08);
    border-radius: 10px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Losers are muted */
.prob-bar-item.loser-item {
    opacity: 0.7;
    padding: 8px 12px;
}

.prob-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.prob-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.prob-label {
    font-weight: 600;
    color: var(--text-primary, #ffffff);
}

.winner-item .prob-label {
    font-size: 1.1em;
    color: #10b981;
}

.prob-value {
    font-weight: 700;
    color: var(--primary-color, #6366f1);
    font-size: 1.1em;
}

.winner-item .prob-value {
    color: #10b981;
    font-size: 1.2em;
}

/* Odds Badge - Clickable look */
.odds-badge {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.odds-badge:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #10b981;
}

.winner-item .odds-badge {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #10b981;
}

.prob-bar-container {
    height: 28px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
}

/* Winner bar is thicker */
.prob-bar-container.winner-bar {
    height: 36px;
}

.prob-bar-container.loser-bar {
    height: 20px;
}

.prob-bar-fill {
    height: 100%;
    transition: width 0.6s ease;
    border-radius: 14px;
}

/* Winner fill - Emerald Green/Gold gradient */
.winner-fill {
    background: linear-gradient(90deg, #10b981, #84cc16);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

/* Muted fill for non-winners */
.muted-fill {
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.5), rgba(100, 116, 139, 0.5));
}

/* Legacy fills - keep for backwards compatibility */
.home-fill {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.draw-fill {
    background: linear-gradient(90deg, #94a3b8, #64748b);
}

.away-fill {
    background: linear-gradient(90deg, #ec4899, #db2777);
}

.prob-odds {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
}

/* Consensus Badge - The Super Stat */
.consensus-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    margin: 10px 0;
}

.consensus-badge.consensus-high {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(132, 204, 22, 0.2));
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #10b981;
}

.consensus-badge.consensus-medium {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}

.consensus-badge.consensus-low {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
}

/* Winner-Focused Consensus Pick */
.consensus-pick.winner-focused {
    text-align: center;
    padding: 24px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(132, 204, 22, 0.05));
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.consensus-value.winner-text {
    font-size: 2.2em;
    font-weight: 700;
    color: #10b981;
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.consensus-probability {
    font-size: 0.95em;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 4px;
}

/* Score Predictions */
.top-scores {
    margin-top: 10px;
}

.subsection-title {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-primary, #ffffff);
    margin-bottom: 15px;
}

.score-predictions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.score-prediction-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.score-prediction-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
}

.score-prediction-item.top-score {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border: 2px solid var(--primary-color, #6366f1);
}

.score-rank {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--primary-color, #6366f1);
    min-width: 40px;
    text-align: center;
}

.score-details {
    flex: 1;
}

.score-text {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
    font-family: 'Courier New', monospace;
    margin-bottom: 5px;
}

.score-stats {
    display: flex;
    gap: 15px;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.6);
}

/* =================================================================
   Score Podium - "Quant Terminal" Layout (Professional Data-Driven)
   ================================================================= */
.score-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 16px;
    padding: 24px 16px;
    flex-wrap: wrap;
}

.score-podium-card {
    background: rgba(30, 41, 59, 0.95);
    border-radius: 12px;
    padding: 20px 24px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    min-width: 140px;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.score-podium-card:hover {
    transform: translateY(-4px);
}

/* Rank #1 - Gold Champion (Center, Larger) */
.score-podium-card.rank-gold {
    border: 2px solid rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.15), 0 8px 32px rgba(0, 0, 0, 0.3);
    transform: scale(1.1);
    z-index: 3;
    order: 2;
    padding: 24px 28px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.98) 0%, rgba(40, 50, 70, 0.95) 100%);
}

.score-podium-card.rank-gold:hover {
    transform: scale(1.13) translateY(-4px);
}

/* Rank #2 - Silver Runner-up (Left) */
.score-podium-card.rank-silver {
    border-color: rgba(192, 192, 192, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
    order: 1;
}

/* Rank #3 - Bronze (Right) */
.score-podium-card.rank-bronze {
    border-color: rgba(205, 127, 50, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    opacity: 0.85;
    order: 3;
}

/* Value Edge - Green Glow for +EV Cards */
.score-podium-card.value-edge {
    border-color: #10b981 !important;
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.35), 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Rank Number Typography - Quant Terminal Style */
.rank-number {
    font-size: 1.4rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    font-family: 'Courier New', 'Monaco', monospace;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

/* #1 - Glowing Gold Typography */
.rank-number--gold {
    font-size: 1.8rem;
    color: #FFD700;
    text-shadow:
        0 0 10px rgba(255, 215, 0, 0.6),
        0 0 20px rgba(255, 215, 0, 0.4),
        0 0 30px rgba(255, 215, 0, 0.2);
}

/* Scoreboard-style Score Display */
.score-display {
    font-family: 'Courier New', 'Monaco', 'Consolas', 'Liberation Mono', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #ffffff;
    background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 6px 0;
}

.rank-gold .score-display {
    font-size: 1.8rem;
    letter-spacing: 4px;
    background: linear-gradient(180deg, #FFD700 0%, #FFA500 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Scenario Tag Badge - Game Script Context */
.scenario-tag {
    display: inline-block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
    margin: 6px 0;
    font-weight: 500;
}

.scenario-tag.scenario-draw {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.scenario-tag.scenario-close {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.scenario-tag.scenario-win {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.scenario-tag.scenario-dominant {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

.scenario-tag.scenario-high {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* Score Probability */
.score-probability {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 4px;
}

.rank-gold .score-probability {
    font-size: 0.95rem;
    color: rgba(255, 215, 0, 0.85);
    font-weight: 600;
}

/* Odds with Implied Probability - Quant Style */
.odds-implied {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 0.85rem;
    margin-top: 6px;
    font-weight: 500;
}

.odds-implied .odds-value {
    color: rgba(255, 255, 255, 0.7);
}

.odds-implied .implied-prob {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

.rank-gold .odds-implied .odds-value {
    color: #fbbf24;
}

/* Legacy Implied Odds (keep for fallback) */
.implied-odds {
    color: #94a3b8;
    font-size: 0.85rem;
    margin-top: 6px;
    font-weight: 500;
}

.rank-gold .implied-odds {
    color: #fbbf24;
    font-size: 0.9rem;
}

/* Confidence Bar - Thicker & Rounded */
.confidence-bar-track {
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    margin-top: 14px;
    overflow: hidden;
}

.confidence-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

/* Gold bar - Gradient to Transparent */
.rank-gold .confidence-bar-fill {
    background: linear-gradient(90deg, #FFD700 0%, rgba(255, 215, 0, 0.2) 100%);
    width: 100%;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

.rank-silver .confidence-bar-fill {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.6), rgba(192, 192, 192, 0.2));
    width: 60%;
}

.rank-bronze .confidence-bar-fill {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.6), rgba(205, 127, 50, 0.2));
    width: 35%;
}

/* Responsive - Stack on mobile */
@media (max-width: 600px) {
    .score-podium {
        flex-direction: column;
        align-items: center;
    }

    .score-podium-card {
        order: unset !important;
        width: 100%;
        max-width: 280px;
    }

    .score-podium-card.rank-gold {
        transform: scale(1.05);
    }

    .score-podium-card.rank-gold:hover {
        transform: scale(1.08) translateY(-2px);
    }
}

/* BTTS Section */
.btts-probabilities {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.btts-option {
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease;
}

.btts-option.btts-winner {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2));
    border: 2px solid #10b981;
}

.btts-label {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--text-primary, #ffffff);
    margin-bottom: 10px;
}

.btts-percentage {
    font-size: 2em;
    font-weight: 700;
    color: var(--primary-color, #6366f1);
    margin-bottom: 15px;
}

.btts-bar-container {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.btts-bar-fill {
    height: 100%;
    transition: width 0.6s ease;
    border-radius: 4px;
}

.yes-fill {
    background: linear-gradient(90deg, #10b981, #059669);
}

.no-fill {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.btts-odds {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.6);
}

/* =================================================================
   BTTS Honest Uncertainty - Deadlock Mode, EV Badges, Tug of War
   ================================================================= */

/* Deadlock State - Neutral Grey Styling */
.btts-option.btts-deadlock {
    border: 2px solid rgba(156, 163, 175, 0.5);
    background: rgba(156, 163, 175, 0.1);
}

.btts-deadlock-header {
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.deadlock-label {
    color: #fbbf24 !important;
    font-weight: 600;
}

.deadlock-value {
    color: rgba(255, 255, 255, 0.7) !important;
}

.deadlock-fill {
    background: linear-gradient(90deg, rgba(156, 163, 175, 0.6), rgba(156, 163, 175, 0.4)) !important;
}

/* EV Badges - Inline Display */
.ev-badge-inline {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
    margin-top: 10px;
    display: inline-block;
    letter-spacing: 0.3px;
}

.ev-badge-inline.ev-positive {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.ev-badge-inline.ev-negative {
    background: rgba(156, 163, 175, 0.15);
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(156, 163, 175, 0.3);
}

/* Tug of War Progress Bar */
.tug-of-war {
    margin: 16px 0;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tow-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
    text-align: center;
}

.tow-bar {
    height: 8px;
    background: linear-gradient(90deg, #10b981 0%, #ef4444 100%);
    border-radius: 4px;
    position: relative;
    overflow: visible;
}

.tow-fill {
    height: 100%;
    border-radius: 4px 0 0 4px;
    background: transparent;
}

.tow-marker {
    position: absolute;
    top: -4px;
    width: 4px;
    height: 16px;
    background: #ffffff;
    border-radius: 2px;
    transform: translateX(-50%);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6), 0 0 4px rgba(255, 255, 255, 0.3);
    z-index: 2;
}

.tow-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.tow-yes-label {
    color: #10b981;
}

.tow-no-label {
    color: #ef4444;
}

/* Over/Under Section */
.over-under-probabilities {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ou-option {
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease;
}

.ou-option.ou-winner {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2));
    border: 2px solid #10b981;
}

.ou-label {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--text-primary, #ffffff);
    margin-bottom: 10px;
}

.ou-percentage {
    font-size: 2em;
    font-weight: 700;
    color: var(--primary-color, #6366f1);
    margin-bottom: 15px;
}

.ou-bar-container {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.ou-bar-fill {
    height: 100%;
    transition: width 0.6s ease;
    border-radius: 4px;
}

.over-fill {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.under-fill {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.ou-odds {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.6);
}

.no-data {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    padding: 20px;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {

    .btts-probabilities,
    .over-under-probabilities {
        grid-template-columns: 1fr;
    }

    .market-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .consensus-value {
        font-size: 1.5em;
    }

    .consensus-value.score-value {
        font-size: 2em;
    }
}

/* Value Recommendations Section */
.value-recommendations-section {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1));
    border: 2px solid rgba(16, 185, 129, 0.3);
}

.value-count-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.value-recommendations-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.value-rec-item {
    display: flex;
    align-items: stretch;
    gap: 15px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
}

.value-rec-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
}

.value-rec-item.high-value {
    border-left-color: #10b981;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.15), rgba(255, 255, 255, 0.05));
}

.value-rec-item.medium-value {
    border-left-color: #f59e0b;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.15), rgba(255, 255, 255, 0.05));
}

.value-rec-item.low-value {
    border-left-color: #6366f1;
}

.value-rec-rank {
    font-size: 2em;
    font-weight: 700;
    color: var(--primary-color, #6366f1);
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.value-rec-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.value-rec-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.value-rec-market {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--text-primary, #ffffff);
}

.value-rec-badge {
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.value-rec-badge.high-value {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.value-rec-badge.medium-value {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.value-rec-badge.low-value {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
}

.value-rec-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.value-rec-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-label {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
}

.stat-value.positive {
    color: #10b981;
}

.value-rec-recommendation {
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

.value-disclaimer {
    padding: 15px;
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.value-disclaimer strong {
    color: #f59e0b;
    font-weight: 600;
}

/* Responsive adjustments for value recommendations */
@media (max-width: 768px) {
    .value-rec-details {
        grid-template-columns: 1fr 1fr;
    }

    .value-rec-rank {
        font-size: 1.5em;
        min-width: 40px;
    }

    .value-rec-item {
        padding: 15px;
    }
}

/* Data Insights Section (Legacy) */
.data-insights-section {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border: 2px solid rgba(99, 102, 241, 0.3);
}

/* ================================================================
   AI Match Analysis Section - NEW DESIGN
   ================================================================ */
.ai-analysis-section {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(132, 204, 22, 0.05));
    border: 2px solid rgba(16, 185, 129, 0.2);
}

.analysis-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .analysis-columns {
        grid-template-columns: 1fr;
    }
}

.analysis-column {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 16px;
}

/* Bull Case Column - Green theme */
.analysis-column.bull-case {
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.analysis-column.bull-case .column-header {
    border-bottom: 2px solid rgba(16, 185, 129, 0.3);
}

.analysis-column.bull-case .column-title {
    color: #10b981;
}

/* Risk Factors Column - Yellow/Orange theme */
.analysis-column.risk-factors {
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.analysis-column.risk-factors .column-header {
    border-bottom: 2px solid rgba(251, 191, 36, 0.3);
}

.analysis-column.risk-factors .column-title {
    color: #fbbf24;
}

.column-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.column-icon {
    font-size: 1.5em;
    margin-bottom: 4px;
}

.column-title {
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: 2px;
}

/* Pro Style Column Headers - Smaller, Uppercase, Dashboard Labels */
.column-header-pro {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.column-icon-svg {
    width: 20px;
    height: 20px;
    margin-bottom: 6px;
}

.column-icon-svg .icon-svg {
    width: 100%;
    height: 100%;
}

.bull-case .column-icon-svg {
    color: #10b981;
}

.risk-factors .column-icon-svg {
    color: #fbbf24;
}

.column-title-pro {
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.bull-case .column-title-pro {
    color: #10b981;
}

.risk-factors .column-title-pro {
    color: #fbbf24;
}

.column-subtitle {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.6);
}

/* SVG Icon Styles */
.icon-svg {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
}

.market-icon .icon-svg {
    width: 22px;
    height: 22px;
    color: #10b981;
}

/* H2H Section - Premium Pro Design */
.h2h-section {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.85));
    border-radius: 16px;
    padding: 20px 24px;
    border: 1px solid rgba(99, 102, 241, 0.15);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.h2h-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4), transparent);
}

.h2h-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.h2h-icon {
    width: 20px;
    height: 20px;
    color: rgba(129, 140, 248, 0.9);
    filter: drop-shadow(0 0 4px rgba(129, 140, 248, 0.4));
}

.h2h-icon .icon-svg {
    width: 100%;
    height: 100%;
}

.h2h-title {
    font-size: 0.8em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.h2h-content {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.85);
}

.insight-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Insight Items */
.insight-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.insight-item:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(3px);
}

.insight-icon {
    font-size: 1.2em;
    flex-shrink: 0;
}

.insight-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.insight-desc {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.9);
}

.insight-highlight {
    font-size: 0.85em;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}

/* Insight type-based colors */
.insight-item.insight-positive .insight-highlight {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.insight-item.insight-warning .insight-highlight {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.insight-item.insight-danger .insight-highlight {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.insight-item.insight-neutral .insight-highlight {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
}

/* ================================================================
   NARRATIVE INTELLIGENCE STYLES - Dynamic Headers
   ================================================================ */

/* Critical insight type (for high stakes) */
.insight-item.insight-critical .insight-highlight {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(234, 88, 12, 0.3));
    color: #f97316;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.insight-item.insight-critical {
    border-left: 3px solid #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

/* Info insight type (for tactical story) */
.insight-item.insight-info .insight-highlight {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}

.insight-item.insight-info {
    border-left: 3px solid #6366f1;
    background: rgba(99, 102, 241, 0.08);
}

/* Narrative highlight on column */
.analysis-column.narrative-highlight {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
    animation: pulse-highlight 2s ease-in-out infinite;
}

@keyframes pulse-highlight {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
    }

    50% {
        box-shadow: 0 0 30px rgba(239, 68, 68, 0.4);
    }
}

/* Stakes header (⚔️ HIGH STAKES MATCH) */
.narrative-header-stakes {
    border-bottom: 2px solid rgba(239, 68, 68, 0.5) !important;
}

.narrative-header-stakes .column-icon-svg {
    color: #ef4444 !important;
}

.narrative-header-stakes .column-title-pro {
    color: #ef4444 !important;
    font-size: 0.85em !important;
}

.narrative-header-stakes .column-subtitle {
    color: rgba(239, 68, 68, 0.8);
}

/* Fatigue header (🩸 FATIGUE ALERT) */
.narrative-header-fatigue {
    border-bottom: 2px solid rgba(245, 158, 11, 0.5) !important;
}

.narrative-header-fatigue .column-icon-svg {
    color: #f59e0b !important;
}

.narrative-header-fatigue .column-title-pro {
    color: #f59e0b !important;
    font-size: 0.85em !important;
}

.narrative-header-fatigue .column-subtitle {
    color: rgba(245, 158, 11, 0.8);
}

/* Injury header (🚑 INJURY CRISIS) */
.narrative-header-injury {
    border-bottom: 2px solid rgba(220, 38, 38, 0.5) !important;
}

.narrative-header-injury .column-icon-svg {
    color: #dc2626 !important;
}

.narrative-header-injury .column-title-pro {
    color: #dc2626 !important;
    font-size: 0.85em !important;
}

.narrative-header-injury .column-subtitle {
    color: rgba(220, 38, 38, 0.8);
}

/* Narrative section container effects */
.ai-analysis-section.narrative-stakes {
    border-color: rgba(239, 68, 68, 0.4);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(234, 88, 12, 0.05));
}

.ai-analysis-section.narrative-fatigue {
    border-color: rgba(245, 158, 11, 0.4);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.05));
}

.ai-analysis-section.narrative-injury {
    border-color: rgba(220, 38, 38, 0.4);
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(239, 68, 68, 0.05));
}

/* ================================================================
   TACTICAL BREAKDOWN SECTION - Scouting Report Style
   ================================================================ */

.tactical-breakdown-section {
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(99, 102, 241, 0.06);
    border-radius: 10px;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.tactical-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tactical-icon {
    width: 18px;
    height: 18px;
    color: #818cf8;
}

.tactical-icon .icon-svg {
    width: 100%;
    height: 100%;
}

.tactical-title {
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #818cf8;
}

.tactical-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tactical-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border-left: 3px solid rgba(99, 102, 241, 0.4);
    transition: all 0.2s ease;
}

.tactical-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-left-color: #818cf8;
}

.tactical-label {
    font-size: 0.85em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.02em;
}

.tactical-content {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tactical-breakdown-section {
        margin-top: 12px;
        padding: 12px;
    }

    .tactical-item {
        padding: 8px 10px;
    }
}

/* H2H Summary Row */
.h2h-summary {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.h2h-label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.insight-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 20px;
    transition: all 0.3s ease;
}

.insight-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.insight-card.full-width {
    grid-column: 1 / -1;
}

.insight-title {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--primary-color, #6366f1);
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(99, 102, 241, 0.3);
}

.insight-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-item,
.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}

.team-name {
    font-weight: 600;
    color: var(--text-primary, #ffffff);
}

.form-value {
    font-family: 'Courier New', monospace;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--primary-color, #6366f1);
    letter-spacing: 2px;
}

.stat-value {
    font-size: 1.2em;
    font-weight: 700;
    color: #10b981;
}

.h2h-value {
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    font-size: 0.95em;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    text-align: center;
}

.h2h-summary {
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    font-size: 0.95em;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    margin-bottom: 12px;
    font-weight: 500;
}

.h2h-matches {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.h2h-match {
    display: grid;
    grid-template-columns: 90px 1fr 60px 40px;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    font-size: 0.9em;
    transition: background 0.2s;
}

.h2h-match:hover {
    background: rgba(255, 255, 255, 0.06);
}

.h2h-date {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85em;
}

.h2h-teams {
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.h2h-score {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    text-align: center;
}

.h2h-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.85em;
}

.h2h-result.win {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.h2h-result.draw {
    background: rgba(234, 179, 8, 0.2);
    color: #eab308;
}

.h2h-result.loss {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* ================================================================
   REDESIGNED H2H HISTORY STYLES V2 - SofaScore/FotMob Inspired
   Premium professional sports data aesthetic
   ================================================================ */

/* Empty state styling */
.h2h-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 20px;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.h2h-empty-icon {
    font-size: 2em;
    opacity: 0.6;
}

.h2h-empty-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9em;
    text-align: center;
}

/* NEW Summary Header - Centered W-D-L Design */
.h2h-summary-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border-radius: 16px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.h2h-team-side {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.h2h-team-side.home-side {
    justify-content: flex-end;
    text-align: right;
}

.h2h-team-side.away-side {
    justify-content: flex-start;
    text-align: left;
}

.h2h-team-logo {
    font-size: 1.4em;
    opacity: 0.85;
}

.h2h-team-label {
    font-size: 0.95em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Center record display - the hero */
.h2h-record-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 28px;
    margin: 0 20px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.h2h-record-number {
    font-size: 1.8em;
    font-weight: 800;
    min-width: 36px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.h2h-record-number.home-wins {
    color: #10b981;
    text-shadow: 0 0 16px rgba(16, 185, 129, 0.5);
}

.h2h-record-number.draws-count {
    color: rgba(255, 255, 255, 0.5);
}

.h2h-record-number.away-wins {
    color: #a78bfa;
    text-shadow: 0 0 16px rgba(167, 139, 250, 0.5);
}

.h2h-record-separator {
    font-size: 1.4em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.2);
    margin: 0 4px;
}

/* Record legend - subtle text below */
.h2h-record-legend {
    text-align: center;
    padding: 8px 0 16px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.78em;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Matches container */
.h2h-matches-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Individual match row - Clean card design */
.h2h-match-row {
    display: grid;
    grid-template-columns: 100px 1fr 90px;
    gap: 16px;
    align-items: center;
    padding: 16px 20px;
    background: rgba(30, 41, 59, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.h2h-match-row:first-child {
    border-radius: 12px 12px 0 0;
}

.h2h-match-row:last-child {
    border-radius: 0 0 12px 12px;
    border-bottom: none;
}

.h2h-match-row:only-child {
    border-radius: 12px;
}

.h2h-match-row:hover {
    background: rgba(51, 65, 85, 0.6);
}

/* Match meta - Date & Competition */
.h2h-match-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.h2h-match-date {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.82em;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.h2h-match-comp {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.72em;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

/* Match center - The Scoreline Hero */
.h2h-match-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.h2h-home-name,
.h2h-away-name {
    font-size: 0.88em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s ease;
}

.h2h-home-name {
    text-align: right;
    padding-right: 14px;
}

.h2h-away-name {
    text-align: left;
    padding-left: 14px;
}

.h2h-home-name.winner-name,
.h2h-away-name.winner-name {
    color: #ffffff;
    font-weight: 700;
}

/* Scorebox - Prominent centered score display */
.h2h-scorebox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    padding: 8px 16px;
    border-radius: 10px;
    min-width: 70px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.h2h-score {
    font-size: 1.15em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    min-width: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: all 0.2s ease;
}

.h2h-score.winner-score {
    color: #ffffff;
    font-weight: 800;
}

.h2h-score-divider {
    color: rgba(255, 255, 255, 0.25);
    font-weight: 400;
    font-size: 0.95em;
}

/* Result badge - Small, clean status badges */
.h2h-match-result {
    display: flex;
    justify-content: flex-end;
}

.h2h-result-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 16px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    min-width: 75px;
    transition: all 0.2s ease;
}

.h2h-result-badge.home-win {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.h2h-result-badge.away-win {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.h2h-result-badge.draw {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Hover effects on match row */
.h2h-match-row:hover .h2h-result-badge.home-win {
    background: rgba(16, 185, 129, 0.25);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
}

.h2h-match-row:hover .h2h-result-badge.away-win {
    background: rgba(139, 92, 246, 0.25);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.2);
}

.h2h-match-row:hover .h2h-result-badge.draw {
    background: rgba(245, 158, 11, 0.2);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .h2h-summary-header {
        flex-direction: column;
        gap: 12px;
        padding: 16px 20px;
    }

    .h2h-team-side {
        flex: unset;
        justify-content: center !important;
    }

    .h2h-team-side.home-side {
        order: 1;
    }

    .h2h-record-center {
        order: 2;
        margin: 8px 0;
        padding: 10px 24px;
    }

    .h2h-team-side.away-side {
        order: 3;
    }

    .h2h-record-number {
        font-size: 1.5em;
        min-width: 28px;
    }

    .h2h-match-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px 16px;
    }

    .h2h-match-meta {
        order: 1;
        flex-direction: row;
        gap: 8px;
        align-items: center;
    }

    .h2h-match-center {
        order: 2;
        flex-wrap: nowrap;
    }

    .h2h-home-name,
    .h2h-away-name {
        width: 90px;
        font-size: 0.82em;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .h2h-scorebox {
        padding: 6px 12px;
        min-width: 60px;
    }

    .h2h-match-result {
        order: 3;
        justify-content: center;
        margin-top: 4px;
    }

    .h2h-result-badge {
        font-size: 0.68em;
        padding: 4px 10px;
        min-width: 65px;
    }
}

.insights-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: rgba(99, 102, 241, 0.1);
    border-left: 3px solid #6366f1;
    border-radius: 6px;
}

.note-icon {
    font-size: 1.5em;
}

.note-text {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

/* Form indicators (W, D, L) styling */
.form-value {
    display: inline-flex;
    gap: 3px;
}

/* Responsive adjustments for insights */
@media (max-width: 768px) {
    .insights-grid {
        grid-template-columns: 1fr;
    }

    .insight-card.full-width {
        grid-column: 1;
    }
}

/* Market Statistics Dashboard Styles */
.market-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0;
}

.market-tab {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.market-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.market-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

.market-content {
    display: block;
    padding: 1.5rem 0;
}

.market-content.collapsed {
    display: none;
}

.market-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.market-stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.market-stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.market-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.market-stat-value.positive {
    color: var(--success-color);
}

.market-stat-value.negative {
    color: var(--error-color);
}

/* AI Model Performance Table */
.ai-performance-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.ai-performance-table th,
.ai-performance-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.ai-performance-table th {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(139, 92, 246, 0.08);
}

.ai-performance-table td {
    color: var(--text-primary);
    font-weight: 500;
}

.ai-performance-table tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.accuracy-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.accuracy-badge.high {
    background: rgba(36, 180, 126, 0.2);
    color: var(--success-color);
}

.accuracy-badge.medium {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning-color);
}

.accuracy-badge.low {
    background: rgba(239, 68, 68, 0.2);
    color: var(--error-color);
}

/* Recommendations Section */
.recommendations-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.recommendation-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border-left: 4px solid var(--accent-primary);
}

.recommendation-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.recommendation-content {
    flex: 1;
}

.recommendation-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.recommendation-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.recommendation-item.warning {
    border-left-color: var(--warning-color);
}

.recommendation-item.success {
    border-left-color: var(--success-color);
}

.recommendation-item.info {
    border-left-color: #3b82f6;
}

/* Loading State */
.loading-text {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
    .market-tabs {
        flex-wrap: wrap;
    }

    .market-tab {
        flex: 1;
        min-width: 120px;
        text-align: center;
    }

    .market-stats-grid {
        grid-template-columns: 1fr;
    }
}


/* ========================================
   Combination Betting Suggestions Styles
   ======================================== */

.combinations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.combination-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

.combination-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px var(--shadow-color);
    border-color: var(--accent-primary);
}

/* Risk level styling */
.combination-card.risk-low {
    border-left: 4px solid var(--success-color);
}

.combination-card.risk-medium {
    border-left: 4px solid var(--warning-color);
}

.combination-card.risk-high {
    border-left: 4px solid var(--danger-color);
}

/* Combination header */
.combination-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.combination-title {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.bet-type-badge {
    background: var(--accent-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.risk-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.risk-badge.risk-low {
    background: rgba(36, 180, 126, 0.2);
    color: var(--success-color);
    border: 1px solid var(--success-color);
}

.risk-badge.risk-medium {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning-color);
    border: 1px solid var(--warning-color);
}

.risk-badge.risk-high {
    background: rgba(229, 83, 83, 0.2);
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
}

.combination-odds {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.odds-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.odds-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary);
}

/* Markets in combination */
.combination-markets {
    margin: 1rem 0;
}

.combination-market-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.market-selection {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.market-icon {
    font-size: 1.25rem;
}

.market-name {
    font-weight: 500;
    color: var(--text-primary);
}

.market-details {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.market-odds {
    font-weight: 600;
    color: var(--accent-secondary);
}

.market-probability {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.confidence-indicator {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.confidence-indicator.confidence-high {
    background: rgba(36, 180, 126, 0.2);
    color: var(--success-color);
}

.confidence-indicator.confidence-medium {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning-color);
}

.confidence-indicator.confidence-low {
    background: rgba(229, 83, 83, 0.2);
    color: var(--danger-color);
}

.market-separator {
    text-align: center;
    margin: 0.5rem 0;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Combination statistics */
.combination-stats {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.stat-row.highlight {
    background: rgba(36, 180, 126, 0.1);
    padding: 0.75rem;
    border-radius: 6px;
    margin: 0.5rem 0;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.stat-value {
    font-weight: 600;
    font-size: 1rem;
}

.stat-value.positive-ev {
    color: var(--success-color);
}

.stat-value.negative-ev {
    color: var(--danger-color);
}

.stat-value.profit {
    color: var(--accent-primary);
    font-size: 1.25rem;
    font-weight: 700;
}

.stat-value.profit-amount {
    color: var(--success-color);
    font-weight: 700;
}

/* Recommendation badge */
.combination-recommendation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, rgba(36, 180, 126, 0.2), rgba(36, 180, 126, 0.1));
    border: 1px solid var(--success-color);
    border-radius: 8px;
}

.recommendation-icon {
    font-size: 1.25rem;
}

.recommendation-text {
    font-weight: 600;
    color: var(--success-color);
}

/* Responsive design for combinations */
@media (max-width: 768px) {
    .combinations-grid {
        grid-template-columns: 1fr;
    }

    .combination-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .combination-odds {
        align-items: flex-start;
    }

    .market-details {
        flex-direction: column;
        gap: 0.25rem;
        align-items: flex-end;
    }
}

/* Filter Controls Section */
.filter-controls-section {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

.filter-header {
    margin-bottom: 1.5rem;
}

.filter-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.filter-icon {
    font-size: 1.3rem;
}

.filter-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.filter-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Toggle Row - Container for label + switch */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0;
    gap: 1rem;
}

.toggle-label {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary);
    padding-right: 1rem;
    white-space: nowrap;
}

/* Modern Toggle Switch Wrapper */
.toggle-switch-wrapper {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.toggle-switch-wrapper input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 26px;
    transition: all 0.3s ease;
}

.toggle-slider::before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch-wrapper input:checked+.toggle-slider {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.toggle-switch-wrapper input:checked+.toggle-slider::before {
    transform: translateX(22px);
}

.toggle-switch-wrapper input:focus+.toggle-slider {
    box-shadow: 0 0 0 2px rgba(36, 180, 126, 0.3);
}

/* Legacy Toggle Switch (backwards compatibility) */
.toggle-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.toggle-switch input[type="checkbox"] {
    width: 44px;
    height: 24px;
    appearance: none;
    background: var(--bg-tertiary);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s ease;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
    order: 2;
}

.toggle-switch input[type="checkbox"]:checked {
    background: var(--accent-primary);
}

.toggle-switch input[type="checkbox"]::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: transform 0.3s ease;
}

.toggle-switch input[type="checkbox"]:checked::before {
    transform: translateX(20px);
}

.toggle-switch label {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    order: 1;
}

/* Slider Group */
.slider-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    margin-top: 0.5rem;
}

.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slider-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.slider-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-primary);
    background: rgba(36, 180, 126, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* Confidence Slider (legacy) */
.confidence-slider {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.confidence-slider label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

#min-confidence-value {
    color: var(--accent-primary);
    font-weight: 600;
}

/* Range Slider Styling */
.slider-group input[type="range"],
.confidence-slider input[type="range"] {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    outline: none;
    appearance: none;
}

.slider-group input[type="range"]::-webkit-slider-thumb,
.confidence-slider input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.slider-group input[type="range"]::-webkit-slider-thumb:hover,
.confidence-slider input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.slider-group input[type="range"]::-moz-range-thumb,
.confidence-slider input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    transition: transform 0.2s ease;
}

.slider-group input[type="range"]::-moz-range-thumb:hover,
.confidence-slider input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.2);
}

/* Checkbox Group */
.checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.checkbox-label:hover {
    background: var(--bg-tertiary);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-primary);
}

/* Select Dropdown */
#sort-by-select {
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
}

#sort-by-select:hover,
#sort-by-select:focus {
    border-color: var(--accent-primary);
}

#sort-by-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Filter Actions */
.filter-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.filter-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-family: inherit;
}

.reset-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.reset-btn:hover {
    background: var(--bg-primary);
    border-color: var(--accent-primary);
}

.active-filters-count {
    font-size: 0.85rem;
    color: var(--accent-primary);
    font-weight: 600;
    padding: 0.5rem 1rem;
    background: rgba(36, 180, 126, 0.1);
    border-radius: 20px;
    display: none;
}

/* No Results Message */
.no-results-message {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 3rem;
    text-align: center;
    border: 1px solid var(--border-color);
    margin-top: 2rem;
}

.no-results-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.no-results-icon {
    font-size: 3rem;
    opacity: 0.5;
}

.no-results-message h3 {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin: 0;
}

.no-results-message p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}

.no-results-message .filter-btn {
    margin-top: 1rem;
    background: var(--accent-primary);
    color: white;
}

.no-results-message .filter-btn:hover {
    background: #1fa06a;
}

/* Responsive Design for Filters */
@media (max-width: 768px) {
    .filter-controls {
        grid-template-columns: 1fr;
    }

    .checkbox-group {
        grid-template-columns: 1fr;
    }

    .filter-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .active-filters-count {
        text-align: center;
    }
}

/* ============================================
   TOOLTIPS AND HELP SYSTEM
   ============================================ */

/* Tooltip Container */
.tooltip-container {
    position: absolute;
    z-index: 10000;
    max-width: 400px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid #00d4ff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 212, 255, 0.3);
    padding: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.tooltip-container:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.tooltip-container.hidden {
    display: none;
}

/* Tooltip Content */
.tooltip-content {
    padding: 16px;
    color: #e0e0e0;
    font-size: 14px;
    line-height: 1.6;
}

.tooltip-header {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
}

.tooltip-header strong {
    color: #00d4ff;
    font-size: 16px;
    font-weight: 600;
}

.tooltip-body {
    color: #b0b0b0;
}

.tooltip-body p {
    margin: 8px 0;
}

.tooltip-section {
    margin: 12px 0;
    padding: 10px;
    background: rgba(0, 212, 255, 0.05);
    border-left: 3px solid #00d4ff;
    border-radius: 4px;
}

.tooltip-section strong {
    color: #00d4ff;
    display: block;
    margin-bottom: 6px;
}

.tooltip-section code {
    display: block;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #00ff88;
    margin-top: 6px;
}

.tooltip-section ul {
    margin: 6px 0;
    padding-left: 20px;
}

.tooltip-section li {
    margin: 4px 0;
    color: #b0b0b0;
}

.tooltip-action {
    margin-top: 12px;
    padding: 10px;
    background: rgba(0, 255, 136, 0.1);
    border-left: 3px solid #00ff88;
    border-radius: 4px;
    color: #00ff88;
}

.tooltip-tip {
    margin-top: 12px;
    padding: 10px;
    background: rgba(255, 193, 7, 0.1);
    border-left: 3px solid #ffc107;
    border-radius: 4px;
    color: #ffc107;
}

.tooltip-warning {
    margin-top: 12px;
    padding: 10px;
    background: rgba(255, 87, 34, 0.1);
    border-left: 3px solid #ff5722;
    border-radius: 4px;
    color: #ff5722;
}

/* Help Icon */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    background: rgba(0, 212, 255, 0.2);
    border: 1px solid #00d4ff;
    border-radius: 50%;
    font-size: 12px;
    cursor: help;
    transition: all 0.3s ease;
    vertical-align: middle;
}

.help-icon:hover {
    background: rgba(0, 212, 255, 0.4);
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.has-tooltip {
    cursor: help;
    position: relative;
}

.has-tooltip:hover {
    color: #00d4ff;
}

/* Inline Help Text */
.inline-help {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
}

.inline-help-info {
    background: rgba(0, 212, 255, 0.1);
    border-left: 3px solid #00d4ff;
    color: #00d4ff;
}

.inline-help-tip {
    background: rgba(255, 193, 7, 0.1);
    border-left: 3px solid #ffc107;
    color: #ffc107;
}

.inline-help-warning {
    background: rgba(255, 87, 34, 0.1);
    border-left: 3px solid #ff5722;
    color: #ff5722;
}

.inline-help-success {
    background: rgba(0, 255, 136, 0.1);
    border-left: 3px solid #00ff88;
    color: #00ff88;
}

.inline-help-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.inline-help-text {
    flex: 1;
}

/* Confidence Indicators with Tooltips */
.confidence-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: help;
    transition: all 0.3s ease;
}

.confidence-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.confidence-very-high {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
    border: 1px solid #00ff88;
}

.confidence-high {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid #ffc107;
}

.confidence-moderate {
    background: rgba(255, 152, 0, 0.2);
    color: #ff9800;
    border: 1px solid #ff9800;
}

.confidence-low {
    background: rgba(255, 87, 34, 0.2);
    color: #ff5722;
    border: 1px solid #ff5722;
}

.confidence-very-low {
    background: rgba(158, 158, 158, 0.2);
    color: #9e9e9e;
    border: 1px solid #9e9e9e;
}

/* Value Rating Badges with Tooltips */
.value-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: help;
    transition: all 0.3s ease;
}

.value-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.value-excellent {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
    border: 1px solid #00ff88;
}

.value-excellent::before {
    content: '⭐⭐⭐';
    margin-right: 4px;
}

.value-very-good {
    background: rgba(0, 212, 255, 0.2);
    color: #00d4ff;
    border: 1px solid #00d4ff;
}

.value-very-good::before {
    content: '⭐⭐';
    margin-right: 4px;
}

.value-good {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid #ffc107;
}

.value-good::before {
    content: '⭐';
    margin-right: 4px;
}

.value-slight {
    background: rgba(255, 152, 0, 0.2);
    color: #ff9800;
    border: 1px solid #ff9800;
}

.value-slight::before {
    content: '✓';
    margin-right: 4px;
}

.value-none {
    background: rgba(255, 87, 34, 0.2);
    color: #ff5722;
    border: 1px solid #ff5722;
}

.value-none::before {
    content: '✗';
    margin-right: 4px;
}

/* Market Type Labels with Tooltips */
.market-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #00d4ff;
    cursor: help;
    transition: all 0.3s ease;
}

.market-label:hover {
    background: rgba(0, 212, 255, 0.2);
    border-color: #00d4ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
}

/* Help Button */
.help-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid #00d4ff;
    border-radius: 8px;
    color: #00d4ff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.help-button:hover {
    background: rgba(0, 212, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
}

.help-button::before {
    content: '❓';
    font-size: 16px;
}

/* Strategy Cards with Help */
.strategy-card {
    padding: 16px;
    background: rgba(0, 212, 255, 0.05);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 12px;
    margin: 12px 0;
    cursor: help;
    transition: all 0.3s ease;
}

.strategy-card:hover {
    background: rgba(0, 212, 255, 0.1);
    border-color: #00d4ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
}

.strategy-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #00d4ff;
    margin-bottom: 8px;
}

.strategy-card-description {
    font-size: 14px;
    color: #b0b0b0;
    line-height: 1.6;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .tooltip-container {
        max-width: 90vw;
        left: 5vw !important;
        right: 5vw;
    }

    .help-icon {
        width: 20px;
        height: 20px;
        font-size: 14px;
    }

    .inline-help {
        font-size: 12px;
    }

    .confidence-badge,
    .value-badge {
        font-size: 12px;
        padding: 4px 10px;
    }
}

/* Accessibility */
.has-tooltip:focus,
.help-icon:focus,
.help-button:focus {
    outline: 2px solid #00d4ff;
    outline-offset: 2px;
}

/* =========================================
   AI Analysis Redesign Styles
   ========================================= */

/* Consensus Dashboard */
.consensus-dashboard {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.consensus-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

.consensus-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.consensus-badge {
    background: linear-gradient(135deg, var(--accent-primary), #00b8d4);
    color: #000;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
}

.consensus-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-subtext {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Model Comparison Table */
.model-comparison-container {
    background: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 25px;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-table th {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.comparison-table td {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

.comparison-table tr:last-child td {
    border-bottom: none;
}

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

.model-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--accent-primary);
}

.model-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Probability Bars */
.prob-bar-wrapper {
    width: 100%;
    min-width: 120px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin-top: 6px;
    overflow: hidden;
}

.prob-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.prob-high {
    background: #00ff88;
}

.prob-med {
    background: #ffc107;
}

.prob-low {
    background: #ff5722;
}

.prob-text {
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
}

/* Confidence Badge in Table */
.table-confidence {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.conf-high {
    background: rgba(0, 255, 136, 0.15);
    color: #00ff88;
}

.conf-med {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.conf-low {
    background: rgba(255, 87, 34, 0.15);
    color: #ff5722;
}

/* Reasoning Expandable */
.reasoning-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    text-decoration: underline;
    transition: color 0.2s;
}

.reasoning-toggle:hover {
    color: var(--text-primary);
}

.reasoning-content {
    display: none;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    margin-top: 10px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #ccc;
}

.reasoning-content.show {
    display: block;
}

/* Mobile Responsive for Table */
@media (max-width: 768px) {

    .comparison-table th:nth-child(3),
    /* Score */
    .comparison-table td:nth-child(3),
    .comparison-table th:nth-child(5),
    /* Reasoning */
    .comparison-table td:nth-child(5) {
        display: none;
    }

    .stat-card {
        padding: 10px;
    }

    .stat-value {
        font-size: 1.1rem;
    }
}

/* Analysis Modal Styles */
.analysis-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.analysis-modal .modal-content {
    background: var(--bg-secondary);
    color: var(--text-primary);
    width: 98%;
    max-width: 1800px;
    max-height: 95vh;
    overflow-y: auto;
    border-radius: 16px;
    padding: 0;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.analysis-modal .modal-header {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    padding: 2rem 3rem;
    border-bottom: 3px solid var(--accent-primary);
    border-radius: 16px 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.analysis-modal .modal-header h2 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.analysis-modal .close-modal {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.analysis-modal .close-modal:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
}

.analysis-modal .modal-body {
    padding: 2.5rem 3rem;
    background: var(--bg-primary);
}

.analysis-modal .analysis-section {
    margin-bottom: 2.5rem;
    background: var(--bg-tertiary);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}

.analysis-modal .analysis-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.analysis-modal .analysis-section h3 {
    margin: 0 0 1.5rem 0;
    color: var(--accent-primary);
    font-size: 1.4rem;
    font-weight: 600;
    border-bottom: 3px solid var(--accent-primary);
    padding-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.analysis-modal .modal-section-content {
    margin-top: 1rem;
}

/* AI Predictions Grid */
.ai-predictions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.ai-prediction-card {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.ai-prediction-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 4px 12px rgba(0, 255, 157, 0.15);
    transform: translateY(-2px);
}

.ai-prediction-card h4 {
    margin: 0 0 1rem 0;
    color: var(--accent-primary);
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
}

.ai-prediction-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Odds Display Grid */
.odds-display-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.odd-item {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.odd-label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.odd-value {
    display: block;
    color: var(--accent-primary);
    font-size: 1.5rem;
    font-weight: 600;
}

/* Value Analysis Table */
.value-analysis-table {
    overflow-x: auto;
}

.value-analysis-table table {
    width: 100%;
    border-collapse: collapse;
}

.value-analysis-table th,
.value-analysis-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.value-analysis-table th {
    background: var(--bg-secondary);
    color: var(--accent-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.value-analysis-table td {
    color: var(--text-secondary);
}

.value-analysis-table .recommendation {
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.value-analysis-table .recommendation.excellent {
    background: rgba(36, 180, 126, 0.2);
    color: var(--success-color);
}

.value-analysis-table .recommendation.good {
    background: rgba(255, 193, 7, 0.2);
    color: var(--accent-secondary);
}

.value-analysis-table .recommendation.fair {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.value-analysis-table .recommendation.poor {
    background: rgba(239, 68, 68, 0.2);
    color: var(--error-color);
}

/* Goal Predictions Display */
.goal-predictions-display {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.goal-item {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.goal-label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.goal-value {
    display: block;
    color: var(--accent-primary);
    font-size: 1.3rem;
    font-weight: 600;
}

/* Info and Error Messages */
.info-message,
.error-message {
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.info-message {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
}

.error-message {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error-color);
}

/* Responsive Design */
@media (max-width: 768px) {
    .analysis-modal .modal-content {
        width: 100%;
        max-height: 95vh;
        border-radius: 0;
    }

    .analysis-modal .modal-body {
        padding: 1rem;
    }

    .ai-predictions-grid,
    .odds-display-grid,
    .goal-predictions-display {
        grid-template-columns: 1fr;
    }

    .value-analysis-table {
        font-size: 0.85rem;
    }
}


/* 🏟️ Venue Information Display */
.venue-info {
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(36, 180, 126, 0.1) 0%, rgba(36, 180, 126, 0.05) 100%);
    border: 2px solid rgba(36, 180, 126, 0.3);
    border-radius: 12px;
    animation: slideIn 0.4s ease-out;
}

.venue-details {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.venue-icon {
    display: none;
}

.venue-text {
    flex: 1;
}

.venue-location {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.venue-teams {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.95rem;
}

.home-indicator {
    color: var(--accent-primary);
    padding: 0.4rem 0.8rem;
    background: rgba(36, 180, 126, 0.15);
    border-radius: 6px;
    border: 1px solid rgba(36, 180, 126, 0.3);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.home-indicator::before {
    content: 'HOME';
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: rgba(36, 180, 126, 0.8);
    padding: 0.15rem 0.4rem;
    background: rgba(36, 180, 126, 0.2);
    border-radius: 3px;
}

.away-indicator {
    color: var(--text-secondary);
    padding: 0.4rem 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.away-indicator::before {
    content: 'AWAY';
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    padding: 0.15rem 0.4rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

.vs-separator {
    color: var(--text-secondary);
    font-weight: 500;
}

/* 🔄 Home/Away Confirmation */
.home-away-confirmation {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: rgba(245, 158, 11, 0.1);
    border: 2px solid rgba(245, 158, 11, 0.4);
    border-radius: 12px;
    animation: slideIn 0.4s ease-out;
}

.confirmation-message {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.warning-icon {
    font-size: 1.5rem;
}

.confirmation-message p {
    margin: 0;
    color: var(--warning-color);
    font-weight: 500;
}

.team-selection {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.team-option {
    display: flex;
    align-items: center;
}

.team-option input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
    cursor: pointer;
    accent-color: var(--accent-primary);
}

.team-option label {
    flex: 1;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.team-option input[type="radio"]:checked+label {
    background: rgba(36, 180, 126, 0.15);
    border-color: var(--accent-primary);
}

.team-option label:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.team-option .team-name {
    color: var(--text-primary);
    font-weight: 600;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Individual AI Predictions Section */
.individual-ai-predictions {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.individual-ai-header {
    font-size: 1.1em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ================================================================
   Battle of the AIs - Two Column Layout
   ================================================================ */
.model-battle {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

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

.battle-header .icon-svg {
    width: 20px;
    height: 20px;
    color: #fbbf24;
}

.battle-title {
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.9);
}

.battle-arena {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: start;
}

@media (max-width: 640px) {
    .battle-arena {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .battle-vs {
        display: none;
    }
}

.battle-vs {
    font-size: 1.2em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    padding: 20px 8px;
    align-self: center;
}

/* Vote Columns */
.vote-column {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 14px;
    transition: opacity 0.3s ease;
}

.vote-column.winning-column {
    opacity: 1;
}

.vote-column.losing-column {
    opacity: 0.5;
}

.vote-column.yes-column {
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.vote-column.no-column {
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.vote-column-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.vote-direction {
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.yes-column .vote-direction {
    color: #10b981;
}

.no-column .vote-direction {
    color: #ef4444;
}

.vote-count {
    font-size: 0.85em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
}

.vote-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.no-votes {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    padding: 12px;
    font-style: italic;
}

/* Model Vote Cards - Neutral background, colored text/border */
.model-vote-card {
    background: rgba(30, 41, 59, 0.8);
    border-radius: 8px;
    padding: 10px 12px;
    transition: all 0.2s ease;
}

.model-vote-card:hover {
    background: rgba(30, 41, 59, 1);
    transform: translateX(3px);
}

.yes-column .model-vote-card {
    border-left: 3px solid #10b981;
}

.no-column .model-vote-card {
    border-left: 3px solid #ef4444;
}

.model-vote-card.loser-side {
    opacity: 0.7;
}

.model-name {
    font-size: 0.85em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
}

.model-probs {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.model-prob {
    font-size: 0.8em;
    font-weight: 600;
}

.model-prob.yes-prob {
    color: #10b981;
}

.model-prob.no-prob {
    color: #ef4444;
}

.prob-sep {
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.4);
}

.model-confidence {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.5);
}

/* EV Badge in Header */
.ev-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
    margin-top: 8px;
}

.ev-badge.ev-positive {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

/* Over/Under Column Colors */
.vote-column.over-column {
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.vote-column.under-column {
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.over-column .vote-direction {
    color: #3b82f6;
}

.under-column .vote-direction {
    color: #a855f7;
}

.over-column .model-vote-card {
    border-left: 3px solid #3b82f6;
}

.under-column .model-vote-card {
    border-left: 3px solid #a855f7;
}

.model-prob.over-prob {
    color: #3b82f6;
}

.model-prob.under-prob {
    color: #a855f7;
}

/* xG Badge - Power Stat */
.xg-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.75em;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    margin: 4px 0;
}

.xg-badge .icon-svg {
    width: 12px;
    height: 12px;
}

.xg-badge.xg-hot {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.xg-badge.xg-hot .icon-svg {
    color: #fbbf24;
}

/* Consensus Stats Layout */
.consensus-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 8px 0;
    flex-wrap: wrap;
}

.stat-item {
    font-size: 0.95em;
    color: rgba(255, 255, 255, 0.8);
}

.stat-divider {
    color: rgba(255, 255, 255, 0.3);
}

.projected-goals {
    font-weight: 600;
    color: #10b981;
}

.ou-consensus .consensus-agreement {
    margin-top: 4px;
}

.individual-ai-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.ai-prediction-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.3s ease;
}

.ai-prediction-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

.ai-name {
    font-size: 0.9em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.ai-pick {
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    text-align: center;
}

.ai-pick.pick-yes {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.3));
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.5);
}

.ai-pick.pick-no {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(220, 38, 38, 0.3));
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.5);
}

.ai-pick.pick-over {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.3));
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.5);
}

.ai-pick.pick-under {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(147, 51, 234, 0.3));
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.5);
}

.ai-probabilities {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

.prob-item {
    font-weight: 500;
}

.prob-divider {
    color: rgba(255, 255, 255, 0.3);
}

.ai-expected-goals {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin-bottom: 6px;
    font-weight: 500;
}

.ai-confidence {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    font-style: italic;
}

/* Responsive adjustments for individual AI cards */
@media (max-width: 768px) {
    .individual-ai-grid {
        grid-template-columns: 1fr;
    }

    .ai-prediction-card {
        padding: 14px;
    }

    .ai-pick {
        font-size: 1.1em;
    }
}

@media (max-width: 480px) {
    .individual-ai-header {
        font-size: 1em;
    }

    .ai-name {
        font-size: 0.85em;
    }
}


/* ============================================
   VENUE INFORMATION DISPLAY
   ============================================ */

.venue-info {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(36, 180, 126, 0.08) 0%, rgba(36, 180, 126, 0.03) 100%);
    border: 1px solid rgba(36, 180, 126, 0.3);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.venue-info.hidden {
    display: none;
}

.venue-details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    text-align: center;
}

.venue-icon {
    font-size: 3rem;
    line-height: 1;
    flex-shrink: 0;
}

.venue-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.venue-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-primary);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.venue-location {
    font-size: 1.1rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.venue-location strong {
    font-weight: 600;
}

.venue-city-country {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.venue-teams {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.home-indicator,
.away-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.home-indicator strong,
.away-indicator strong {
    font-weight: 600;
    color: var(--accent-primary);
}

.vs-separator {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Responsive Design for Venue Info */
@media (max-width: 768px) {
    .venue-details {
        flex-direction: column;
        gap: 1rem;
    }

    .venue-icon {
        font-size: 2.5rem;
    }

    .venue-teams {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
    }
}

/* Analysis Viewer Modal Styles */
.analysis-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    overflow-y: auto;
}

/* UPGRADED: Wider modal for better data display - v2.0 */
.analysis-modal-content {
    background: var(--card-bg);
    border-radius: 16px;
    max-width: 1600px !important;
    width: 95% !important;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.analysis-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background: var(--card-bg);
    z-index: 10;
}

.analysis-modal-header h2 {
    margin: 0;
    font-size: 28px;
    color: var(--text-primary);
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 36px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
}

.modal-close-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.analysis-modal-body {
    padding: 32px;
}

.analysis-section {
    margin-bottom: 40px;
}

.analysis-section h3 {
    font-size: 22px;
    margin-bottom: 20px;
    color: var(--text-primary);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 10px;
}

.ai-predictions-table-container {
    overflow-x: auto;
}

.ai-predictions-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
}

.ai-predictions-table thead {
    background: var(--header-bg);
}

.ai-predictions-table th {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
}

.ai-predictions-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.ai-predictions-table tr:last-child td {
    border-bottom: none;
}

.ai-predictions-table .ai-name {
    font-weight: 600;
    color: var(--accent-color);
}

.ai-predictions-table .prediction-winner {
    background: rgba(76, 175, 80, 0.1);
    font-weight: 600;
    color: var(--success-color);
}

.ai-predictions-table .goal-prediction {
    text-align: center;
    font-weight: 500;
}

.ai-predictions-table .predicted-score {
    text-align: center;
    font-size: 16px;
}

.ai-predictions-table .error-cell {
    color: var(--error-color);
    font-style: italic;
}

.consensus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.consensus-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}

.consensus-card h4 {
    margin: 0 0 16px 0;
    font-size: 18px;
    color: var(--text-primary);
}

.consensus-breakdown {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.consensus-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: var(--hover-bg);
    border-radius: 8px;
}

.consensus-item .team-name {
    font-weight: 500;
    color: var(--text-primary);
}

.consensus-item .consensus-percentage {
    font-weight: 600;
    font-size: 18px;
    color: var(--accent-color);
}

.consensus-score {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.score-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: var(--hover-bg);
    border-radius: 8px;
}

.score-item .score-label {
    font-weight: 500;
    color: var(--text-secondary);
}

.score-item .score-value {
    font-weight: 600;
    font-size: 18px;
    color: var(--text-primary);
}

.score-item.predicted-score {
    background: rgba(76, 175, 80, 0.1);
}

.score-item.predicted-score .score-value {
    color: var(--success-color);
    font-size: 22px;
}

.market-odds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.market-odds-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}

.market-odds-card h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: var(--text-primary);
}

.odds-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.odds-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background: var(--hover-bg);
    border-radius: 6px;
}

.odds-item .odds-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.odds-item .odds-value {
    font-weight: 600;
    color: var(--accent-color);
}

.value-analysis-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
}

.value-analysis-table thead {
    background: var(--header-bg);
}

.value-analysis-table th {
    padding: 14px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
}

.value-analysis-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

.value-analysis-table .market-name {
    font-weight: 600;
    color: var(--text-primary);
}

.value-analysis-table .probability {
    text-align: center;
}

.value-analysis-table .difference.positive {
    color: var(--success-color);
    font-weight: 600;
}

.value-analysis-table .difference.negative {
    color: var(--error-color);
}

.value-analysis-table .expected-value.positive {
    color: var(--success-color);
    font-weight: 600;
}

.value-analysis-table .expected-value.negative {
    color: var(--error-color);
}

.value-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.value-badge.value-green {
    background: rgba(76, 175, 80, 0.2);
    color: var(--success-color);
}

.value-badge.value-yellow {
    background: rgba(255, 193, 7, 0.2);
    color: #FFC107;
}

.value-badge.value-red {
    background: rgba(244, 67, 54, 0.2);
    color: var(--error-color);
}

.recommendation-text {
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

.analysis-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 24px 32px;
    border-top: 1px solid var(--border-color);
    position: sticky;
    bottom: 0;
    background: var(--card-bg);
}

.info-message {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
    font-style: italic;
}

/* Analysis History Cards */
.analysis-history-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.analysis-history-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
}

.analysis-history-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.analysis-history-header h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: var(--text-primary);
}

.analysis-date {
    font-size: 14px;
    color: var(--text-secondary);
}

.view-analysis-btn {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.view-analysis-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.empty-message {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    font-size: 16px;
}

/* R
esult Display Styles */
.result-display {
    margin-top: 12px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(36, 180, 126, 0.1);
    border: 1px solid rgba(36, 180, 126, 0.3);
}

.result-display.correct {
    background: rgba(36, 180, 126, 0.15);
    border-color: rgba(36, 180, 126, 0.5);
}

.result-display.incorrect {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
}

.result-score,
.result-winner,
.ai-accuracy {
    font-size: 13px;
    margin: 4px 0;
    color: var(--text-primary);
}

.result-score strong,
.result-winner strong {
    color: var(--accent-primary);
    margin-right: 8px;
}

.ai-accuracy {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 500;
}

.result-pending {
    margin-top: 12px;
    text-align: center;
}

.add-result-btn {
    background: rgba(36, 180, 126, 0.2);
    border: 1px solid var(--accent-primary);
    color: var(--accent-primary);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.add-result-btn:hover {
    background: rgba(36, 180, 126, 0.3);
    transform: translateY(-1px);
}

/* Result Modal */
.result-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.result-modal-content {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.result-modal-content h3 {
    color: var(--accent-primary);
    margin: 16px 0;
    text-align: center;
}

.score-inputs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 24px 0;
}

.score-input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.score-input-group label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.score-input-group input {
    width: 80px;
    height: 60px;
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
}

.score-input-group input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.score-separator {
    font-size: 32px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 24px;
}

.result-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

.result-actions .btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.result-actions .btn-primary {
    background: var(--accent-primary);
    color: white;
    border: none;
}

.result-actions .btn-primary:hover {
    background: #1fa06a;
    transform: translateY(-2px);
}

.result-actions .btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.result-actions .btn-secondary:hover {
    background: var(--bg-tertiary);
}

/* Analysis Item Status */
.analysis-item.completed {
    border-left: 3px solid var(--accent-primary);
}

.analysis-item.pending {
    border-left: 3px solid var(--warning-color);
}

/* Analysis Modal Result Section */
.result-section {
    background: rgba(36, 180, 126, 0.1);
    border: 2px solid rgba(36, 180, 126, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.result-section.incorrect {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.result-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.final-score,
.match-winner {
    font-size: 16px;
    color: var(--text-primary);
}

.final-score strong,
.match-winner strong {
    color: var(--accent-primary);
    margin-right: 8px;
}

.ai-prediction-result {
    margin-top: 12px;
    padding: 12px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

.ai-prediction-result.correct {
    background: rgba(36, 180, 126, 0.2);
    color: var(--accent-primary);
}

.ai-prediction-result.incorrect {
    background: rgba(239, 68, 68, 0.2);
    color: var(--error-color);
}

/* Analysis Modal Styles */
.analysis-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.analysis-modal .modal-content {
    background: var(--bg-secondary);
    border-radius: 16px;
    max-width: 1800px;
    width: 98%;
    max-height: 95vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.analysis-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 1;
}

.analysis-modal .modal-header h2 {
    margin: 0;
    color: var(--accent-primary);
    font-size: 24px;
}

.analysis-modal .close-modal {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 32px;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
}

.analysis-modal .close-modal:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.analysis-modal .modal-body {
    padding: 24px;
}

.analysis-modal .analysis-section {
    margin-bottom: 24px;
    padding: 20px;
    background: var(--bg-tertiary);
    border-radius: 12px;
}

.analysis-modal .analysis-section h3 {
    margin: 0 0 16px 0;
    color: var(--text-primary);
    font-size: 18px;
}

.analysis-modal .modal-section-content {
    color: var(--text-secondary);
}

/* Match Time Display */
.match-time {
    margin: 8px 0;
    padding: 8px;
    background: rgba(36, 180, 126, 0.1);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-primary);
}

.match-time strong {
    color: var(--accent-primary);
    margin-right: 8px;
}

.match-status {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.match-status.finished {
    background: rgba(36, 180, 126, 0.2);
    color: var(--accent-primary);
}

.match-status.upcoming {
    background: rgba(255, 193, 7, 0.2);
    color: var(--warning-color);
}

/* Check Result Button */
.check-result-btn {
    background: linear-gradient(135deg, #24b47e 0%, #1fa06a 100%);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    margin-right: 8px;
}

.check-result-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(36, 180, 126, 0.3);
}

.add-result-btn-small {
    background: rgba(36, 180, 126, 0.2);
    border: 1px solid var(--accent-primary);
    color: var(--accent-primary);
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
}

.add-result-btn-small:hover {
    background: rgba(36, 180, 126, 0.3);
    transform: translateY(-1px);
}

.result-pending {
    margin-top: 12px;
    text-align: center;
    display: flex;
    gap: 8px;
    justify-content: center;
}


/* Value Bet Finder Styles */
.dashboard-section.value-bets-section {
    grid-column: 1 / -1;
    /* Full width */
}

.value-bets-section .section-header {
    padding: 0.25rem 0.25rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.value-bets-section .section-header h3 {
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

#value-bets-container {
    background: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.02), transparent 30%), #0d1014;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 1rem;
    margin-top: 0.5rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.value-bets-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    margin-top: 0.5rem;
    font-size: 0.92rem;
}

.value-bets-table th {
    text-align: left;
    padding: 10px 12px;
    color: rgba(236, 241, 247, 0.85);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: transparent;
    border: none;
}

.value-bets-table td {
    padding: 12px;
    border-bottom: none;
    vertical-align: middle;
}

.value-bet-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.value-bet-row {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease;
}

.value-bet-row td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.value-bet-row td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.value-bet-row:hover {
    transform: translateY(-2px);
    border-color: rgba(36, 180, 126, 0.35);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.match-teams {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.match-teams .vs {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8em;
}

.match-date {
    font-size: 0.78em;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
}

.league-badge {
    background: rgba(255, 255, 255, 0.08);
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 0.78em;
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, 0.1);
    letter-spacing: 0.01em;
}

.selection-badge {
    padding: 6px 10px;
    border-radius: 8px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.01em;
}

.selection-badge.home {
    background: rgba(59, 130, 246, 0.16);
    color: #9cc7ff;
    border: 1px solid rgba(59, 130, 246, 0.35);
}

.selection-badge.away {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.selection-badge.draw {
    background: rgba(107, 114, 128, 0.18);
    color: #d1d5db;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.odds-cell {
    font-family: 'Menlo', 'SFMono-Regular', Consolas, monospace;
    font-weight: 600;
    color: #f3f4f6;
    letter-spacing: 0.01em;
}

.ev-badge {
    padding: 6px 10px;
    border-radius: 9px;
    font-weight: 700;
    letter-spacing: 0.01em;
    min-width: 90px;
    text-align: center;
}

.ev-badge.high-value {
    background: rgba(16, 185, 129, 0.18);
    color: #9af0cb;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.ev-badge.medium-value {
    background: rgba(59, 130, 246, 0.16);
    color: #9cc7ff;
    border: 1px solid rgba(59, 130, 246, 0.32);
}

/* Sanity Filter Styles */
.ev-badge.anomaly {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.warning-icon {
    display: inline-block;
    margin-left: 4px;
    cursor: help;
    opacity: 0.9;
}

.warning-icon.suspicious {
    color: #60a5fa;
}

.warning-icon.variance {
    color: #fbbf24;
}

/* Compact warning pill for EV capped values */
.warning-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 999px;
    cursor: help;
    white-space: nowrap;
    margin-left: 4px;
}

.value-bet-row.suspicious-row {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
}

.value-bet-row.suspicious-row:hover {
    border-color: rgba(245, 158, 11, 0.4);
}

.capped {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.value-bet-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.value-bet-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.analyze-btn {
    background: rgba(36, 180, 126, 0.16);
    color: #b6f4d1;
    border: 1px solid rgba(36, 180, 126, 0.35);
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.analyze-btn:hover {
    background: rgba(36, 180, 126, 0.28);
    transform: translateY(-1px);
}

.highlight-pulse {
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(139, 92, 246, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
    }
}


/* Match Details Modal Styles */
.match-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.detail-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-card.full-width {
    grid-column: 1 / -1;
}

.detail-card h4 {
    margin-top: 0;
    margin-bottom: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.xg-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.xg-team {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.xg-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #a78bfa;
}

.possession-bar-container {
    display: flex;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.possession-bar.home {
    background: #3b82f6;
}

.possession-bar.away {
    background: #ef4444;
}

.possession-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

.odds-history-chart {
    font-family: monospace;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.2);
    padding: 1rem;
    border-radius: 6px;
}

.details-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 7px 12px;
    border-radius: 10px;
    cursor: pointer;
    margin-left: 0.5rem;
    transition: all 0.2s;
    font-weight: 600;
}

.details-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* Credit System Styles */
.auth-links {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: flex-end;
}

#logged-in-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.credit-display {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 8px 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    transition: all 0.3s;
}

.credit-display:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.credit-icon {
    font-size: 1.2em;
}

#credits-remaining {
    font-size: 1.1em;
    color: white;
}

.plan-subtitle {
    color: #888;
    font-size: 0.9em;
    margin: 5px 0 15px 0;
}

.pricing-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.plan-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s;
    position: relative;
}

.plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.plan-card.highlighted {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

.plan-card .badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-secondary);
    color: #000;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: bold;
}

.plan-card h3 {
    font-size: 1.8em;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.plan-card .price {
    font-size: 2.5em;
    font-weight: bold;
    color: var(--accent-primary);
    margin: 15px 0;
}

.price-strikethrough {
    text-decoration: line-through;
    color: #888;
    font-size: 0.6em;
    margin-left: 10px;
}

.price-save {
    display: block;
    color: var(--accent-secondary);
    font-size: 0.4em;
    margin-top: 5px;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: left;
}

.feature-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.feature-list li:last-child {
    border-bottom: none;
}

.nav-btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
}

.nav-btn-secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
}

/* Live Games Page Styles */
#live-games-page .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.league-section {
    margin-bottom: 30px;
}

.league-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.league-icon {
    font-size: 1.2em;
}

.league-header h3 {
    margin: 0;
    color: #fff;
    font-size: 1.2em;
}

.matches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.match-card {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.match-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border-color: rgba(139, 92, 246, 0.3);
}

.match-status {
    font-size: 0.8em;
    color: #9ca3af;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.teams-container {
    margin-bottom: 15px;
}

.team-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.team-logo-small {
    width: 24px;
    height: 24px;
    object-fit: contain;
    margin-right: 10px;
}

.team-name {
    flex-grow: 1;
    color: #fff;
    font-weight: 500;
}

.team-score {
    font-weight: 700;
    color: #8b5cf6;
}

.odds-row {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.odd-box {
    flex: 1;
    background: rgba(0, 0, 0, 0.2);
    padding: 8px;
    border-radius: 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.odd-label {
    font-size: 0.7em;
    color: #6b7280;
}

.odd-value {
    font-weight: 600;
    color: #10b981;
}

.analyze-btn-small {
    width: 100%;
    padding: 8px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}

.analyze-btn-small:hover {
    opacity: 0.9;
}

.no-data {
    text-align: center;
    padding: 40px;
    color: #9ca3af;
    font-size: 1.1em;
}

/* Venue League Display */
.venue-league {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: #a78bfa;
    /* Light purple */
    font-size: 0.9em;
    font-weight: 500;
}

.league-icon {
    font-size: 1.1em;
}

/* --- Redesigned Live Games Tab --- */

/* Full width container for live games */
#live-games-page {
    width: 100%;
    margin: 0 auto;
    /* Leave room for fixed header + ticker without pushing content off-screen */
    padding: 120px 0 40px;
}

.live-games-content-wrapper {
    max-width: 1400px;
    /* Wider container for grid */
    width: 95%;
    margin: 0 auto;
    padding: 2rem 0;
}

#live-games-page .section-header {
    text-align: center;
    margin-bottom: 3rem;
}

#live-games-page .section-header h2 {
    font-size: 2.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #fff 0%, #a0a0a0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#live-games-page .section-header p {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* League Section */
.league-section {
    margin-bottom: 3rem;
    animation: fadeIn 0.5s ease-out;
}

.league-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.league-icon {
    font-size: 1.5rem;
}

.league-header h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
}

.match-count {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.2rem 0.8rem;
    border-radius: 12px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Grid Layout */
.live-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

/* Modern Match Card */
.match-card.modern-card {
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.03), transparent 40%), #0f1112;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.match-card.modern-card:hover {
    transform: translateY(-5px);
    background: rgba(15, 17, 18, 0.95);
    border-color: rgba(36, 180, 126, 0.3);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

/* Card Header */
.match-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.match-status-badge {
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}

.match-status-badge.live {
    background: rgba(229, 83, 83, 0.15);
    color: #ff6b6b;
    border: 1px solid rgba(229, 83, 83, 0.3);
    animation: pulse-red 2s infinite;
}

.match-status-badge.scheduled {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.status-wrapper {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.match-date {
    font-weight: 600;
    color: #e5e7eb;
    letter-spacing: 0.01em;
}

.match-time {
    color: #d1fae5;
    background: rgba(36, 180, 126, 0.12);
    border: 1px solid rgba(36, 180, 126, 0.35);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-family: 'Menlo', 'SFMono-Regular', Consolas, monospace;
    font-size: 0.75rem;
}

/* Teams & Score */
.match-teams {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.team-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.team-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.team-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.match-score-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: #f3f4f6;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.4rem 0.9rem;
    border-radius: 10px;
    min-width: 76px;
}

.score-divider {
    color: var(--text-secondary);
    font-size: 1.2rem;
    margin-top: -2px;
}

.match-odds-compact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
    margin-top: 0.5rem;
}

.odd-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    padding: 0.55rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 0.15rem;
}

.odd-btn:hover {
    background: rgba(36, 180, 126, 0.12);
    border-color: rgba(36, 180, 126, 0.35);
}

.odd-label {
    font-size: 0.68rem;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.odd-value {
    font-size: 0.98rem;
    color: #b6f4d1;
    font-weight: 700;
}

.analyze-btn-sleek {
    width: 100%;
    margin-top: 0.75rem;
    background: linear-gradient(135deg, rgba(36, 180, 126, 0.14), rgba(36, 180, 126, 0.08));
    border: 1px solid rgba(36, 180, 126, 0.3);
    color: var(--accent-primary);
    padding: 0.65rem;
    border-radius: 9px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.analyze-btn-sleek:hover {
    background: var(--accent-primary);
    color: #062617;
    border-color: rgba(36, 180, 126, 0.85);
}

/* Analyze Button */
.analyze-match-btn {
    width: 100%;
    padding: 0.8rem;
    background: linear-gradient(135deg, var(--accent-primary) 0%, #1e9a66 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    opacity: 0;
    transform: translateY(10px);
}

.match-card.modern-card:hover .analyze-match-btn {
    opacity: 1;
    transform: translateY(0);
}

.btn-icon {
    font-size: 1.1rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .live-games-grid {
        grid-template-columns: 1fr;
    }

    .match-card.modern-card .analyze-match-btn {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(229, 83, 83, 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(229, 83, 83, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(229, 83, 83, 0);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BET365-STYLE FIXTURE LIST - Pro Betting Terminal Design                     */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Match List Container */
.match-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #0f1115;
    /* Deepest Black/Blue */
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* League Header - VISIBLE (Not sticky to prevent overlap) */
.match-list-league-header {
    position: relative;
    z-index: 1;
    background: #2b303b;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 4px solid #10b981;
}

.match-list-league-header h4 {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    /* Pure white */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.match-list-league-header .league-icon {
    font-size: 1rem;
}

.match-list-league-header .match-count-badge {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
    font-weight: 600;
}

/* =======================================================
   ACCORDION: Collapsible Leagues with Lazy-Load Odds
   ======================================================= */

/* Make header clickable */
.match-list-league-header {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.match-list-league-header:hover {
    background: #363c4a;
}

/* Chevron icon */
.chevron-icon {
    font-size: 1.2rem;
    font-weight: bold;
    color: #64748b;
    transition: transform 0.3s ease;
    display: inline-block;
}

.chevron-icon.rotated {
    transform: rotate(90deg);
    color: #10b981;
}

/* Header right side container */
.header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Sync Badge */
.sync-badge {
    display: none;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.65rem;
    color: #34d399;
    padding: 0.2rem 0.5rem;
    background: rgba(52, 211, 153, 0.1);
    border-radius: 12px;
}

.sync-badge.active {
    display: inline-flex;
}

.sync-badge .spinner {
    width: 10px;
    height: 10px;
    border: 2px solid #34d399;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Collapsible League Matches Container */
.league-matches {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.league-matches.expanded {
    max-height: 3000px;
    /* Large enough for any league */
    transition: max-height 0.5s ease-in;
}

/* Dimmed state during sync */
.league-matches.syncing .odds-btn {
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

/* Flash effect when odds updated */
.match-row.odds-updated .odds-btn {
    animation: odds-flash 0.5s ease;
}

@keyframes odds-flash {

    0%,
    100% {
        background: transparent;
    }

    50% {
        background: rgba(52, 211, 153, 0.3);
    }
}

/* Match Row - ROBUST Layout (No Squashing) */
.match-row {
    display: grid;
    grid-template-columns: 70px 1fr auto 48px;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    /* py-3 equivalent */
    min-height: 70px;
    /* Minimum height - grows naturally */
    background: #161920;
    border: 2px solid transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

/* Zebra Striping - Visible */
.match-row:nth-child(odd) {
    background: #161920;
}

.match-row:nth-child(even) {
    background: #1e2430;
}

.match-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    transition: background 0.2s ease;
}

/* Hover - Emerald Highlight */
.match-row:hover {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: #10b981;
    border-radius: 4px;
}

.match-row:hover::before {
    background: #10b981;
}

/* Glow the ⚡ button on row hover */
.match-row:hover .analyze-icon-btn {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
}

.match-row:last-child {
    border-bottom: none;
}

/* Column 1: Status/Time - Vertically Centered */
.match-col-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 50px;
    /* Ensure vertical centering */
}

.match-time-text {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    font-weight: 500;
    color: #94a3b8;
    letter-spacing: 0.02em;
}

/* Live Minute - Bright Green with Glow */
.match-live-minute {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: #34d399;
    letter-spacing: 0.02em;
    animation: green-glow 1.5s ease-in-out infinite;
}

@keyframes green-glow {

    0%,
    100% {
        text-shadow: 0 0 4px rgba(52, 211, 153, 0.4);
    }

    50% {
        text-shadow: 0 0 12px rgba(52, 211, 153, 0.8), 0 0 20px rgba(52, 211, 153, 0.4);
    }
}

/* Live Score Display - in time column */
.match-live-score {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    color: #34d399;
    letter-spacing: 0.05em;
}

.match-id-text {
    display: none;
}

.match-status-live {
    font-size: 0.7rem;
    color: #34d399;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

@keyframes pulse-text {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* Column 2: Match Info - Strict 3-Column Grid */
.match-col-teams {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

/* Team Row - STRICT 3-Column Grid: Logo | Name | Score */
.team-row-fixture {
    display: grid;
    grid-template-columns: 24px 1fr 30px;
    /* Logo | Name | Score */
    align-items: center;
    gap: 0.5rem;
}

.team-logo-small {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.team-name-fixture {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-row-fixture.away .team-name-fixture {
    color: #d1d5db;
}

/* Score - RIGHT aligned in its column */
.team-score-fixture {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: #34d399;
    text-align: right;
}

/* Column 3: Odds - Sleek Transparent Style */
.match-col-odds {
    display: grid;
    grid-template-columns: repeat(3, 58px);
    gap: 0.4rem;
    justify-content: end;
}

.odds-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.35rem;
    background: transparent;
    /* Transparent BG */
    border: 1px solid #475569;
    /* Slate-600 border */
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 58px;
    min-height: 40px;
}

.odds-btn:hover {
    background: #10b981;
    /* Emerald-500 */
    border-color: #10b981;
    transform: translateY(-1px);
}

.odds-btn:hover .odds-label,
.odds-btn:hover .odds-value {
    color: #ffffff !important;
}

.odds-btn .odds-label {
    font-size: 0.6rem;
    color: #64748b;
    /* Slate-500 */
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.05rem;
}

.odds-btn .odds-value {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: #e2e8f0;
    /* Slate-200 - Bright */
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.odds-btn .odds-value.favorite {
    color: #fbbf24;
}

/* =======================================================
   ODDS MOVEMENT INDICATORS & LIVE BADGE
   ======================================================= */

/* Movement Arrows */
.odds-movement {
    font-size: 0.65rem;
    margin-left: 2px;
    animation: fade-pulse 0.5s ease;
}

.odds-movement.up {
    color: #22c55e;
    /* Green-500 - odds went up */
}

.odds-movement.down {
    color: #ef4444;
    /* Red-500 - odds went down */
}

@keyframes fade-pulse {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Locked Odds Button - See consolidated styles in HONEST MODE section below */

/* Odds Source Badge */
.odds-source-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.odds-source-badge.live {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {

    0%,
    100% {
        box-shadow: 0 0 4px rgba(16, 185, 129, 0.4);
    }

    50% {
        box-shadow: 0 0 12px rgba(16, 185, 129, 0.8);
    }
}

/* Make odds column position relative for badge */
.match-col-odds {
    position: relative;
}

/* Column 4: Action Button */
.match-col-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Match Selection Checkbox */
.match-checkbox-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.match-select-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.match-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(99, 102, 241, 0.4);
    border-radius: 4px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.match-select-checkbox:hover+.match-checkbox-custom {
    border-color: rgba(99, 102, 241, 0.8);
    background: rgba(99, 102, 241, 0.1);
}

.match-select-checkbox:checked+.match-checkbox-custom {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: #6366f1;
}

.match-select-checkbox:checked+.match-checkbox-custom::after {
    content: "✓";
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.match-select-checkbox:disabled+.match-checkbox-custom {
    opacity: 0.3;
    cursor: not-allowed;
}

.analyze-icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(36, 180, 126, 0.12);
    border: 1px solid rgba(36, 180, 126, 0.3);
    border-radius: 8px;
    color: var(--accent-primary);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.analyze-icon-btn:hover {
    background: var(--accent-primary);
    color: #062617;
    border-color: var(--accent-primary);
    transform: scale(1.05);
}

/* Floating Analyze Selected Button */
.analyze-selected-fab {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
    opacity: 1;
}

.analyze-selected-fab.hidden {
    transform: translateY(100px);
    opacity: 0;
    pointer-events: none;
}

.analyze-selected-fab button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 50px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.analyze-selected-fab button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.5), 0 6px 20px rgba(0, 0, 0, 0.4);
}

.fab-icon {
    font-size: 1.2rem;
}

/* Queue Progress Toast */
.queue-progress-toast {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 360px;
    max-height: 80vh;
    background: linear-gradient(135deg, #1a1d29, #252838);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(99, 102, 241, 0.15);
    z-index: 10002;
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.queue-progress-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.queue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(99, 102, 241, 0.1);
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    gap: 10px;
}

.queue-header strong {
    color: #a5b4fc;
}

.queue-items {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px 0;
}

.queue-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.2s ease;
}

.queue-item.analyzing {
    background: rgba(99, 102, 241, 0.1);
    color: rgba(255, 255, 255, 0.95);
}

.queue-item.success {
    color: #86efac;
}

.queue-item.error {
    color: #fca5a5;
}

.queue-status {
    font-size: 1.1rem;
    min-width: 24px;
    text-align: center;
}

.queue-match {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Empty State */
.match-list-empty {
    padding: 3rem 2rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.95rem;
}

/* Live Badge in Row */
.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.live-indicator .pulse-dot {
    width: 6px;
    height: 6px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

/* Responsive: Mobile View */
@media (max-width: 768px) {
    .match-row {
        grid-template-columns: 55px 1fr 44px;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        min-height: 58px;
    }

    .match-col-odds {
        display: none;
    }

    .match-col-action {
        display: flex;
    }

    .team-name-fixture {
        font-size: 0.8rem;
    }

    .match-time-text {
        font-size: 0.8rem;
    }
}

/* Tablet: Show Odds but Compact */
@media (min-width: 769px) and (max-width: 1024px) {
    .match-row {
        grid-template-columns: 60px 1fr 150px 44px;
    }

    .odds-btn {
        padding: 0.35rem 0.3rem;
        min-width: 44px;
    }

    .odds-btn .odds-value {
        font-size: 0.8rem;
    }
}

/* --- Redesigned About Page (Bento Grid) --- */

#about-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 90px 1rem 3rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    position: relative;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATED GRID BACKGROUND
   ═══════════════════════════════════════════════════════════════ */

.methodology-bg-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(36, 180, 126, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(36, 180, 126, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: grid-pulse 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes grid-pulse {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
    }
}

/* ═══════════════════════════════════════════════════════════════
   HERO SECTION: THE ALGORITHM
   ═══════════════════════════════════════════════════════════════ */

.methodology-hero {
    text-align: center;
    padding: 4rem 1rem 5rem;
    position: relative;
    z-index: 1;
}

.hero-eyebrow {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(36, 180, 126, 0.1);
    border: 1px solid rgba(36, 180, 126, 0.3);
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-primary);
    margin-bottom: 2rem;
    letter-spacing: 0.05em;
}

.hero-headline {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
    color: #fff;
}

.text-gradient-algo {
    background: linear-gradient(135deg, #10b981 0%, #06b6d4 50%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtext {
    font-size: 1.25rem;
    color: #94a3b8;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

.hero-subtext em {
    color: #64748b;
    font-style: italic;
}

.hero-subtext strong {
    color: #f1f5f9;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION COMMON STYLES
   ═══════════════════════════════════════════════════════════════ */

.methodology-section {
    padding: 4rem 0;
    position: relative;
    z-index: 1;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    color: #fff;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.section-subtitle {
    text-align: center;
    color: #64748b;
    font-size: 1.1rem;
    margin-bottom: 3rem;
}

/* ═══════════════════════════════════════════════════════════════
   THE PIPELINE - Horizontal Flow
   ═══════════════════════════════════════════════════════════════ */

.pipeline-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    padding: 2rem 0;
}

.pipeline-step {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(10, 15, 25, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    text-align: center;
    width: 260px;
    position: relative;
    transition: all 0.3s ease;
}

.pipeline-step:hover {
    border-color: rgba(36, 180, 126, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.step-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    background: linear-gradient(135deg, rgba(36, 180, 126, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-icon svg {
    width: 32px;
    height: 32px;
    color: #10b981;
}

.step-number {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(36, 180, 126, 0.5);
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.step-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.75rem;
}

.step-desc {
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1.5;
}

.step-desc strong {
    color: #e2e8f0;
}

/* Pipeline Connector */
.pipeline-connector {
    width: 80px;
    height: 2px;
    position: relative;
    display: flex;
    align-items: center;
}

.connector-line {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(36, 180, 126, 0.3), rgba(6, 182, 212, 0.3));
}

.connector-pulse {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #10b981;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    animation: pulse-travel 2s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
}

@keyframes pulse-travel {
    0% {
        left: 0;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   THE COUNCIL - Bento Grid
   ═══════════════════════════════════════════════════════════════ */

.council-section {
    padding-top: 5rem;
}

.council-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.council-card {
    background: #0a0f14;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.council-card:hover {
    transform: translateY(-4px);
}

.council-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.council-card:hover .council-glow {
    opacity: 1;
}

/* Different glow colors per model */
.deepseek-card:hover {
    border-color: rgba(59, 130, 246, 0.4);
}

.deepseek-card .council-glow {
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

.perplexity-card:hover {
    border-color: rgba(168, 85, 247, 0.4);
}

.perplexity-card .council-glow {
    background: linear-gradient(90deg, #a855f7, #7c3aed);
}

.grok-card:hover {
    border-color: rgba(249, 115, 22, 0.4);
}

.grok-card .council-glow {
    background: linear-gradient(90deg, #f97316, #ea580c);
}

.gemini-card:hover {
    border-color: rgba(34, 197, 94, 0.4);
}

.gemini-card .council-glow {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.council-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.council-icon {
    font-size: 1.5rem;
}

.council-badge {
    background: rgba(255, 255, 255, 0.06);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.council-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.council-specialty {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.council-specialty strong {
    color: #10b981;
}

.council-desc {
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   PHILOSOPHY SECTION - Manifesto Style
   ═══════════════════════════════════════════════════════════════ */

.philosophy-section {
    padding: 5rem 0;
}

.philosophy-container {
    max-width: 800px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(10, 15, 25, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

.philosophy-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #10b981, #06b6d4);
    border-radius: 4px 0 0 4px;
}

.philosophy-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.philosophy-content p {
    font-size: 1.15rem;
    color: #94a3b8;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.philosophy-content p:last-child {
    margin-bottom: 0;
}

.philosophy-content strong {
    color: #f1f5f9;
}

.highlight-text {
    color: #ef4444;
    font-weight: 600;
}

.philosophy-tagline {
    font-size: 1.35rem !important;
    font-weight: 600;
    color: #10b981 !important;
    margin-top: 1.5rem !important;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   CALL TO ACTION
   ═══════════════════════════════════════════════════════════════ */

.methodology-cta {
    text-align: center;
    padding: 4rem 0 3rem;
    position: relative;
    z-index: 1;
}

.cta-headline {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2rem;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    padding: 16px 36px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
}

.cta-button svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.cta-button:hover svg {
    transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .pipeline-container {
        flex-direction: column;
        gap: 1rem;
    }

    .pipeline-connector {
        width: 2px;
        height: 40px;
        flex-direction: column;
    }

    .connector-line {
        width: 2px;
        height: 100%;
        background: linear-gradient(180deg, rgba(36, 180, 126, 0.3), rgba(6, 182, 212, 0.3));
    }

    .connector-pulse {
        animation: pulse-travel-vertical 2s ease-in-out infinite;
    }

    @keyframes pulse-travel-vertical {
        0% {
            top: 0;
            opacity: 0;
        }

        20% {
            opacity: 1;
        }

        80% {
            opacity: 1;
        }

        100% {
            top: 100%;
            opacity: 0;
        }
    }

    .council-grid {
        grid-template-columns: 1fr;
    }

    .philosophy-container {
        padding: 2rem 1.5rem;
    }

    .philosophy-title {
        font-size: 1.75rem;
    }
}

@media (max-width: 600px) {
    .hero-headline {
        font-size: 2rem;
    }

    .hero-subtext {
        font-size: 1rem;
    }

    .pipeline-step {
        width: 100%;
        max-width: 300px;
    }

    .cta-headline {
        font-size: 1.5rem;
    }
}

/* Pricing Page (Bento Style) */
#pricing-page {
    max-width: 1200px;
    margin: 0 auto;
    /* Offset for fixed header (ticker hidden on this tab) */
    padding: 90px 1rem 3rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.pricing-header {
    text-align: center;
    margin-bottom: 2rem;
}

.pricing-header h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #fff;
}

.pricing-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.pricing-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.toggle-label {
    color: #fff;
    font-weight: 500;
}

.save-badge {
    background: rgba(36, 180, 126, 0.2);
    color: var(--accent-primary);
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 0.5rem;
}

.toggle-switch {
    width: 50px;
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    position: relative;
    cursor: pointer;
}

.toggle-slider {
    width: 22px;
    height: 22px;
    background: var(--accent-primary);
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: transform 0.3s ease;
}

/* Pricing Grid */
.pricing-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto 5rem;
    align-items: stretch;
    /* Equal height cards */
}

.pricing-card-bento {
    background: #0f1112;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 2.5rem;
    position: relative;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Fill parent height */
}

.pricing-card-bento:hover {
    transform: translateY(-5px);
}

.pricing-card-bento.pro-tier {
    background: linear-gradient(180deg, rgba(36, 180, 126, 0.05) 0%, #0f1112 100%);
    border: 1px solid rgba(36, 180, 126, 0.4);
    box-shadow: 0 0 30px rgba(36, 180, 126, 0.1);
    z-index: 2;
}

.pricing-card-bento.pro-tier:hover {
    transform: translateY(-5px);
}

/* Sharp Tier - Gradient Glow Effect */
.pricing-card-bento.sharp-tier {
    background: linear-gradient(180deg, rgba(147, 51, 234, 0.08) 0%, #0f1112 100%);
    border: 2px solid transparent;
    position: relative;
    overflow: visible;
    z-index: 2;
}

.pricing-card-bento.sharp-tier::before {
    content: '';
    position: absolute;
    inset: -2px;
    padding: 2px;
    background: linear-gradient(135deg, #a855f7, #ec4899, #f97316);
    border-radius: 26px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: glow-pulse 3s ease-in-out infinite;
    z-index: -1;
}

.pricing-card-bento.sharp-tier:hover {
    transform: translateY(-5px);
}

@keyframes glow-pulse {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

/* Feature Highlight (for Pro tier 15 scans) */
.feature-highlight {
    background: rgba(36, 180, 126, 0.1);
    border-radius: 8px;
    padding: 0.75rem !important;
    margin-bottom: 1rem !important;
    flex-wrap: wrap;
}

.feature-subtext {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-left: 1.6rem;
    margin-top: 0.25rem;
}

.emoji-icon {
    font-size: 1rem;
    min-width: 1rem;
}

/* Toggle Yearly State */
.toggle-switch.yearly .toggle-slider {
    transform: translateX(22px);
}

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-primary);
    color: #000;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 4px 16px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-header-bento {
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 2rem;
}

.card-header-bento h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: #fff;
}

.price-bento {
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.price-bento span {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.card-features-bento {
    flex-grow: 1;
    margin-bottom: 2rem;
    min-height: 320px;
    /* Fixed minimum for uniform cards */
}

.card-features-bento ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card-features-bento li {
    margin-bottom: 1rem;
    color: #ddd;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.95rem;
}

.card-features-bento li.disabled {
    color: rgba(255, 255, 255, 0.3);
    text-decoration: line-through;
}

.check {
    color: var(--accent-primary);
}

.cross {
    color: rgba(255, 255, 255, 0.2);
}

.full-width {
    width: 100%;
}

/* Push buttons to bottom of card */
.pricing-card-bento>button {
    margin-top: auto;
}

.glow-effect {
    box-shadow: 0 0 20px rgba(36, 180, 126, 0.3);
}

/* Premium Button Styles for Pricing Cards */
.btn-primary-bento {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border: none;
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-primary-bento::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-primary-bento:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

.btn-primary-bento:hover::before {
    left: 100%;
}

.btn-primary-bento:active {
    transform: translateY(0);
}

/* Sharp Tier Button - Gradient Variant */
.pricing-card-bento.sharp-tier .btn-primary-bento {
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #f97316 100%);
    background-size: 200% auto;
    animation: gradient-shift 3s ease infinite;
}

.pricing-card-bento.sharp-tier .btn-primary-bento:hover {
    box-shadow: 0 8px 30px rgba(168, 85, 247, 0.4);
}

@keyframes gradient-shift {
    0% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }

    100% {
        background-position: 0% center;
    }
}

/* Secondary Button Style */
.btn-secondary-bento {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary-bento:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

/* FAQ Section */
.faq-section {
    max-width: 800px;
    margin: 0 auto;
    padding-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.faq-section h3 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 3rem;
    color: #fff;
}

.faq-grid {
    display: grid;
    gap: 2rem;
}

.faq-item h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

.faq-item p {
    color: var(--text-secondary);
    line-height: 1.6;
}

@media (max-width: 900px) {
    .pricing-grid-3 {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .pricing-card-bento.pro-tier {
        transform: none;
    }

    .pricing-card-bento.pro-tier:hover {
        transform: translateY(-5px);
    }
}

/* Live Games Sidebar Layout */
.live-games-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1.5rem;
    max-width: 1280px;
    margin: 0 auto;
    /* Clear fixed header */
    padding: 0 1.25rem 2rem;
    align-items: start;
}

/* Sidebar */
.live-sidebar {
    background: #0f1112;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 1.25rem;
    position: sticky;
    top: 100px;
    /* Stick below header */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.sidebar-section {
    margin-bottom: 2rem;
}

.sidebar-section h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    padding-left: 0.5rem;
}

.league-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.league-nav-list li {
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    cursor: pointer;
    color: #dfe3ea;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.league-nav-list li:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.league-nav-list li.active {
    background: rgba(36, 180, 126, 0.15);
    color: var(--accent-primary);
    font-weight: 500;
}

.league-count {
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 10px;
    color: var(--text-secondary);
}

.league-nav-list li:hover .league-count {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Main Feed */
.live-feed {
    min-width: 0;
    /* Prevent grid blowout */
}

.section-header-left {
    margin-bottom: 2rem;
}

.section-header-left h2 {
    font-size: 1.85rem;
    margin-bottom: 0.3rem;
    color: #fff;
    letter-spacing: -0.01em;
}

.section-header-left p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* PREMIUM CUSTOM SCROLLBAR - Emerald/Slate Theme                              */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Main Live Games Container */
#live-games-container {
    scrollbar-gutter: stable;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

#live-games-container::-webkit-scrollbar {
    width: 6px;
}

#live-games-container::-webkit-scrollbar-track {
    background: #0f172a;
    /* slate-900 */
    border-radius: 9999px;
}

#live-games-container::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.5);
    /* emerald-500 at 50% opacity */
    border-radius: 9999px;
}

#live-games-container::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.7);
    /* emerald-500 at 70% on hover */
}

/* Live Sidebar Scrollbar (matching theme) */
.live-sidebar::-webkit-scrollbar {
    width: 6px;
}

.live-sidebar::-webkit-scrollbar-track {
    background: #0f172a;
    border-radius: 9999px;
}

.live-sidebar::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.5);
    border-radius: 9999px;
}

.live-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.7);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* FALLBACK ODDS UI INDICATORS                                                 */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Position odds container for badge */
.match-col-odds {
    position: relative;
}

/* Fallback/Estimated Odds Badge */
.odds-fallback-badge {
    position: absolute;
    top: -8px;
    right: -4px;
    font-size: 0.75rem;
    opacity: 0.6;
    animation: fallback-pulse 2s infinite ease-in-out;
    z-index: 2;
}

@keyframes fallback-pulse {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* Pulse animation when real odds arrive */
.odds-live-pulse .match-col-odds {
    animation: live-odds-flash 0.6s ease-out;
}

@keyframes live-odds-flash {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    50% {
        box-shadow: 0 0 12px 6px rgba(16, 185, 129, 0.3);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Stale/Estimated odds subtle dimming */
.match-col-odds[data-source="estimated"] .odds-value,
.match-col-odds[data-source="stale_cache"] .odds-value {
    opacity: 0.75;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* HONEST MODE: Locked/Unavailable Odds & Filter Toggle                        */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Toggle Filter Controls */
.live-games-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.toggle-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.toggle-filter input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #10b981;
    cursor: pointer;
}

.toggle-filter:hover {
    color: var(--text-primary);
}

/* Locked/Unavailable Odds Buttons - Premium Muted Style */
.odds-btn.locked {
    opacity: 0.7;
    cursor: default;
    background: rgba(51, 65, 85, 0.4);
    /* slate-700/40 */
    border-color: rgba(71, 85, 105, 0.5);
    /* slate-600/50 */
    width: 58px;
    /* Same as normal .odds-btn */
    min-height: 40px;
    /* Same as normal .odds-btn */
    pointer-events: none;
}

.odds-btn.locked:hover {
    background: rgba(51, 65, 85, 0.4);
    border-color: rgba(71, 85, 105, 0.5);
    transform: none;
    /* No hover effect */
}

.odds-btn.locked .odds-value {
    color: #64748b;
    /* slate-500 */
    font-size: 0.9rem;
}

.odds-btn.locked .odds-label {
    color: #475569;
    /* slate-600 */
}

/* Disabled Analyze Button */
.analyze-icon-btn.disabled,
.analyze-icon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.analyze-icon-btn.disabled:hover {
    background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* LIVE GAMES SEARCH                                                           */
/* ═══════════════════════════════════════════════════════════════════════════ */

.live-games-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.live-games-search {
    flex-shrink: 0;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    background: rgba(30, 41, 59, 0.8);
    /* slate-800 */
    border: 1px solid rgba(71, 85, 105, 0.5);
    /* slate-600/50 */
    border-radius: 24px;
    /* rounded-full */
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
    min-width: 240px;
}

.search-input-wrapper:focus-within {
    border-color: #10b981;
    /* emerald-500 */
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    background: rgba(30, 41, 59, 1);
}

.search-icon {
    font-size: 0.85rem;
    opacity: 0.5;
    margin-right: 0.5rem;
}

.search-input-wrapper:focus-within .search-icon {
    opacity: 0.8;
}

#live-games-search {
    background: transparent;
    border: none;
    outline: none;
    color: #e2e8f0;
    /* slate-200 */
    font-size: 0.9rem;
    width: 100%;
}

#live-games-search::placeholder {
    color: #64748b;
    /* slate-500 */
}

/* No results message */
.no-search-results {
    text-align: center;
    padding: 3rem 1rem;
    color: #64748b;
}

.no-search-results .query {
    color: #10b981;
    font-weight: 600;
}

/* Hidden Matches Banner */
.hidden-matches-banner {
    padding: 0.75rem 1rem;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 8px;
    margin-top: 1rem;
    text-align: center;
    color: #fbbf24;
    font-size: 0.85rem;
}

.hidden-matches-banner a {
    color: #10b981;
    text-decoration: underline;
    margin-left: 0.5rem;
}

.hidden-matches-banner a:hover {
    color: #34d399;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* QUICK FILTER SIDEBAR BUTTONS (Upcoming & Coinflip)                          */
/* ═══════════════════════════════════════════════════════════════════════════ */

.quick-filter-item {
    background: rgba(30, 41, 59, 0.6) !important;
    border: 1px solid rgba(71, 85, 105, 0.4) !important;
    margin-bottom: 0.5rem !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    transition: all 0.25s ease !important;
}

.quick-filter-item:hover {
    background: rgba(30, 41, 59, 0.9) !important;
    border-color: rgba(71, 85, 105, 0.7) !important;
    transform: translateX(3px);
}

.quick-filter-item.active {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    color: #10b981 !important;
}

/* Coinflip filter - special gold accent */
.coinflip-filter {
    border-color: rgba(251, 191, 36, 0.3) !important;
}

.coinflip-filter.active {
    background: rgba(251, 191, 36, 0.12) !important;
    border-color: rgba(251, 191, 36, 0.5) !important;
    color: #fbbf24 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* FLAT VIEW LAYOUT (for Upcoming & Coinflip)                                   */
/* ═══════════════════════════════════════════════════════════════════════════ */

.flat-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(71, 85, 105, 0.4);
    border-radius: 12px;
    margin-bottom: 1rem;
}

.flat-view-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.flat-view-header .match-count-badge {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Coinflip header - gold accent */
.coinflip-header {
    border-color: rgba(251, 191, 36, 0.3);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, rgba(15, 23, 42, 0.9) 100%);
}

.coinflip-header h3 {
    color: #fde68a;
}

.coinflip-badge {
    background: rgba(251, 191, 36, 0.2) !important;
    color: #fbbf24 !important;
}

/* Flat View Match Rows */
.flat-view .match-row {
    border-left: 3px solid transparent;
    transition: border-color 0.2s ease;
}

.flat-view .match-row:hover {
    border-left-color: #10b981;
}

/* Match League Tag */
.match-league-tag {
    display: inline-block;
    font-size: 0.7rem;
    color: #94a3b8;
    background: rgba(51, 65, 85, 0.5);
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 4px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Match Date Text */
.match-date-text {
    display: block;
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* COINFLIP GAMES - Special Highlighting                                        */
/* ═══════════════════════════════════════════════════════════════════════════ */

.coinflip-row {
    border-left: 3px solid rgba(251, 191, 36, 0.5) !important;
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.03) 0%, transparent 30%);
}

.coinflip-row:hover {
    border-left-color: #fbbf24 !important;
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
}

/* Coinflip Odds Highlight */
.coinflip-highlight {
    background: rgba(251, 191, 36, 0.1) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

.coinflip-highlight .odds-value {
    color: #fde68a !important;
    font-weight: 600;
}

/* Coinflip Indicator Dice */
.coinflip-indicator {
    position: absolute;
    top: -6px;
    right: -4px;
    font-size: 0.9rem;
    animation: coinflip-bounce 2s ease-in-out infinite;
}

@keyframes coinflip-bounce {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-2px) rotate(5deg);
    }

    75% {
        transform: translateY(-2px) rotate(-5deg);
    }
}

/* Coinflip Empty State */
.coinflip-empty {
    text-align: center;
    padding: 4rem 2rem !important;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.03) 0%, transparent 100%);
    border: 1px dashed rgba(251, 191, 36, 0.3);
    border-radius: 12px;
}

.coinflip-empty .empty-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.coinflip-empty p {
    font-size: 1.1rem;
    color: #e2e8f0;
    margin-bottom: 0.5rem;
}

.coinflip-empty .empty-hint {
    font-size: 0.85rem;
    color: #64748b;
}

/* Responsive */
@media (max-width: 1024px) {
    .live-games-layout {
        grid-template-columns: 1fr;
        margin-top: 80px;
    }

    .live-sidebar {
        position: static;
        max-height: none;
        margin-bottom: 2rem;
        display: flex;
        gap: 2rem;
        overflow-x: auto;
        padding-bottom: 1rem;
    }

    /* Modern Odds & Analysis Styling */
    .match-odds-compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem;
        margin-top: 0.5rem;
    }

    .odd-btn {
        padding: 0.5rem;
        border-radius: 8px;
    }

    .odd-label {
        font-size: 0.65rem;
    }

    .odd-value {
        font-size: 0.95rem;
    }

    .analyze-btn-sleek {
        width: 100%;
        margin-top: 1rem;
        background: linear-gradient(135deg, rgba(36, 180, 126, 0.1), rgba(36, 180, 126, 0.05));
        border: 1px solid rgba(36, 180, 126, 0.3);
        color: var(--accent-primary);
        padding: 0.6rem;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .analyze-btn-sleek:hover {
        background: var(--accent-primary);
        color: #000;
        border-color: var(--accent-primary);
    }

    .match-date {
        font-size: 0.75rem;
        color: #e5e7eb;
        margin-right: 0.5rem;
    }

    .sidebar-section {
        min-width: 200px;
        margin-bottom: 0;
    }
}

/* Market Statistics Cards */
#market-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.market-stat-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.market-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-color: rgba(52, 211, 153, 0.3);
}

.market-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.market-icon {
    font-size: 1.5rem;
}

.market-card-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #e2e8f0;
    flex: 1;
}

.market-badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
}

.market-badge.positive {
    background: rgba(52, 211, 153, 0.2);
    color: #34d399;
}

.market-badge.negative {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.market-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.market-metric {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.metric-label {
    font-size: 0.75rem;
    color: #94a3b8;
}

.metric-value {
    font-size: 1rem;
    font-weight: 700;
    color: #f8fafc;
}

.metric-value.positive {
    color: #34d399;
}

.metric-value.negative {
    color: #ef4444;
}

/* --- New Compact Odds Styles --- */
.odds-compact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    padding: 0.5rem;
}

.odds-compact-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.8rem;
    transition: all 0.2s ease;
}

.odds-compact-item:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.odds-compact-header {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 0.4rem;
}

.odds-compact-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.odds-compact-row span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.odds-compact-row strong {
    color: var(--accent-secondary);
    font-family: 'Courier New', monospace;
    font-size: 1rem;
}

/* --- Redesigned Result Section --- */
.result-section {
    background: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.result-section.correct {
    border-color: var(--success-color);
    box-shadow: 0 0 15px rgba(36, 180, 126, 0.1);
}

.result-section.incorrect {
    border-color: var(--error-color);
    box-shadow: 0 0 15px rgba(229, 83, 83, 0.1);
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--border-color);
}

.result-header h3 {
    margin: 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ai-prediction-badge {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-prediction-badge.correct {
    background: rgba(36, 180, 126, 0.2);
    color: var(--success-color);
    border: 1px solid rgba(36, 180, 126, 0.3);
}

.ai-prediction-badge.incorrect {
    background: rgba(229, 83, 83, 0.2);
    color: var(--error-color);
    border: 1px solid rgba(229, 83, 83, 0.3);
}

.result-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
}

.result-main {
    text-align: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.final-score-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}

.score-team {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    width: 40%;
}

.score-team:first-child {
    text-align: right;
}

.score-team:last-child {
    text-align: left;
}

.score-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-secondary);
    background: rgba(0, 0, 0, 0.3);
    padding: 0.2rem 1rem;
    border-radius: 8px;
    min-width: 100px;
}

.winner-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.result-details-compact {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.result-detail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.8rem 1.5rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    min-width: 100px;
    border: 1px solid transparent;
}

.result-detail-item.correct {
    border-color: rgba(36, 180, 126, 0.3);
    background: rgba(36, 180, 126, 0.05);
}

.result-detail-item.incorrect {
    border-color: rgba(229, 83, 83, 0.3);
    background: rgba(229, 83, 83, 0.05);
}

.detail-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
}

.detail-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.detail-icon {
    font-size: 1rem;
    margin-top: 0.2rem;
}

/* --- New Explicit Comparison Styles --- */
.winner-comparison {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.comparison-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.comp-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.comp-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.ai-pick .comp-value {
    color: var(--accent-primary);
}

.actual-winner .comp-value {
    color: var(--accent-secondary);
}

.comparison-vs {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-style: italic;
    opacity: 0.6;
}

.detail-comparison {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.ai-val,
.actual-val {
    font-size: 0.85rem;
    font-weight: 500;
}

.ai-val {
    color: var(--text-secondary);
}

.actual-val {
    color: var(--text-primary);
    font-weight: 700;
}

/* --- New Value Analysis Styles --- */
.value-analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.value-market-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.value-card-header {
    background: rgba(0, 0, 0, 0.2);
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.value-card-header h4 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.value-details-list {
    padding: 0.5rem;
}

.value-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

.value-item-row:last-child {
    border-bottom: none;
}

.value-item-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.value-outcome {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.outcome-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.value-percentage {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-family: 'Courier New', monospace;
}

.verdict-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.verdict-badge.excellent {
    background: rgba(36, 180, 126, 0.2);
    color: var(--success-color);
    border: 1px solid rgba(36, 180, 126, 0.3);
}

.verdict-badge.good {
    background: rgba(36, 180, 126, 0.15);
    color: #4CAF50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.verdict-badge.fair {
    background: rgba(255, 193, 7, 0.15);
    color: #FFC107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.verdict-badge.poor {
    background: rgba(229, 83, 83, 0.15);
    color: #e55353;
    border: 1px solid rgba(229, 83, 83, 0.3);
}

/* --- New Goal Predictions Styles --- */
.goal-predictions-display {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.goal-visual-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.goal-card-title {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    font-weight: 600;
}

.xg-display {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
    width: 100%;
    justify-content: center;
}

.xg-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.xg-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.xg-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
}

.xg-divider {
    font-size: 0.9rem;
    color: var(--text-secondary);
    opacity: 0.5;
    margin-top: 1rem;
}

.total-xg {
    font-size: 0.9rem;
    color: var(--accent-primary);
    background: rgba(36, 180, 126, 0.1);
    padding: 0.4rem 1rem;
    border-radius: 20px;
}

.predicted-score-display {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-secondary);
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}

.score-subtext {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* --- Color Themes & Visual Enhancements --- */

/* Theme Variables */
:root {
    --excellent-color: #00ff88;
    --good-color: #4CAF50;
    --fair-color: #FFC107;
    --poor-color: #e55353;
}

/* Value Card Themes */
.value-market-card {
    position: relative;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.value-market-card.theme-excellent {
    border-color: rgba(0, 255, 136, 0.3);
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.05);
}

.value-market-card.theme-good {
    border-color: rgba(76, 175, 80, 0.3);
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.05);
}

.value-market-card.theme-fair {
    border-color: rgba(255, 193, 7, 0.3);
}

.value-market-card.theme-poor {
    border-color: rgba(229, 83, 83, 0.2);
    opacity: 0.9;
}

.header-accent-bar {
    height: 2px;
    width: 30px;
    margin-top: 5px;
    border-radius: 2px;
    background: var(--text-secondary);
}

.theme-excellent .header-accent-bar {
    background: var(--excellent-color);
}

.theme-good .header-accent-bar {
    background: var(--good-color);
}

.theme-fair .header-accent-bar {
    background: var(--fair-color);
}

.theme-poor .header-accent-bar {
    background: var(--poor-color);
}

/* Value Bars */
.value-bar-container {
    width: 100px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}

.value-bar {
    height: 100%;
    border-radius: 2px;
}

.value-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.value-percentage {
    font-weight: 700;
}

.value-percentage.excellent {
    color: var(--excellent-color);
}

.value-percentage.good {
    color: var(--good-color);
}

.value-percentage.fair {
    color: var(--fair-color);
}

.value-percentage.poor {
    color: var(--poor-color);
}

/* Goal Prediction Visuals */
.xg-card {
    align-items: stretch;
}

.xg-comparison-row {
    margin-bottom: 1rem;
}

.xg-team-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
}

.xg-team-name {
    color: var(--text-secondary);
}

.xg-val {
    font-weight: 700;
    color: var(--text-primary);
}

.xg-bar-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.xg-bar {
    height: 100%;
    border-radius: 3px;
}

.xg-bar.home {
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
}

.xg-bar.away {
    background: linear-gradient(90deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
}

.total-xg-badge {
    align-self: center;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gradient-text {
    background: linear-gradient(45deg, #00ff88, #00b8ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

/* --- Value Bets Table Styles --- */
.value-bets-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.95rem;
}

.value-bets-table th,
.value-bets-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.value-bets-table th {
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.value-bets-table tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.match-teams {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.match-teams .vs {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.match-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.league-badge {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.selection-badge {
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-block;
}

.selection-badge.home {
    background-color: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.selection-badge.away {
    background-color: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.selection-badge.draw {
    background-color: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.odds-cell {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: var(--text-primary);
}

.ev-badge {
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.85rem;
}

.ev-badge.high-value {
    background-color: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.1);
}

.ev-badge.medium-value {
    background-color: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.analyze-btn,
.details-btn {
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    margin-right: 0.5rem;
}

.analyze-btn {
    background-color: var(--accent-primary);
    color: white;
}

.analyze-btn:hover {
    background-color: var(--accent-hover);
    transform: translateY(-1px);
}

.details-btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.details-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Modal Styles for Match Details */
.match-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.detail-card {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.detail-card h4 {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* Modal Header */
.modal-match-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-teams {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.modal-meta {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.modal-score {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent-primary);
    margin: 0.5rem 0;
}

/* Stats Row */
.stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.stat-label {
    flex: 1;
    text-align: center;
    color: var(--text-secondary);
    font-weight: 500;
}

.stat-value {
    flex: 0 0 40px;
    text-align: center;
    font-weight: 600;
    color: var(--text-primary);
}

/* Progress Bars */
.stat-bar-container {
    display: flex;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 1.2rem;
}

.stat-bar {
    height: 100%;
    transition: width 0.5s ease;
}

.stat-bar.home {
    background-color: #60a5fa;
}

.stat-bar.away {
    background-color: #f87171;
}

/* Value Insight */
.value-insight {
    background: rgba(36, 180, 126, 0.1);
    border: 1px solid rgba(36, 180, 126, 0.2);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
}

.value-insight-title {
    color: var(--accent-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.value-insight-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.full-width {
    grid-column: 1 / -1;
}

/* ===================================
   Statistics Page - Professional Styling
   =================================== */

#statistics-page {
    padding: 0 2rem 2rem 2rem;
}

/* Dashboard Header */
#statistics-page .dashboard-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem 0;
}

#statistics-page .dashboard-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.5px;
}

#statistics-page .dashboard-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-weight: 400;
}

/* ===== EQUITY CURVE CHART SECTION ===== */
#statistics-page .equity-curve-section {
    margin-bottom: 2rem;
}

#statistics-page .equity-chart-wrapper {
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 35, 0.95));
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

#statistics-page .equity-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#statistics-page .equity-chart-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

/* Equity Header Left Container */
#statistics-page .equity-header-left {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* Timeframe Selector Pills */
#statistics-page .timeframe-selector {
    display: flex;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.25rem;
    border-radius: 8px;
}

#statistics-page .timeframe-btn {
    padding: 0.4rem 0.85rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#statistics-page .timeframe-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

#statistics-page .timeframe-btn.active {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

/* Bet Count Badge */
#statistics-page .bet-count {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    padding: 0.25rem 0.6rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

#statistics-page .equity-value-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    transition: all 0.3s ease;
}

#statistics-page .equity-value-badge.positive {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
}

#statistics-page .equity-value-badge.negative {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

#statistics-page .equity-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#statistics-page .equity-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #10b981;
}

#statistics-page .equity-value-badge.negative .equity-amount {
    color: #ef4444;
}

#statistics-page .equity-chart-container {
    position: relative;
    height: 280px;
    margin-bottom: 1rem;
}

#statistics-page .equity-chart-legend {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding-top: 0.5rem;
}

#statistics-page .legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

#statistics-page .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

#statistics-page .legend-dot.win {
    background: #10b981;
}

#statistics-page .legend-dot.loss {
    background: #ef4444;
}

#statistics-page .legend-line {
    width: 20px;
    height: 2px;
    border-top: 2px dashed rgba(255, 255, 255, 0.3);
}

#statistics-page .legend-line.break-even {
    border-color: rgba(255, 255, 255, 0.5);
}

#statistics-page .no-data-message {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

/* Drawdown Gauge Widget */
#statistics-page .drawdown-card {
    position: relative;
}

#statistics-page .drawdown-gauge {
    margin-top: 0.5rem;
}

#statistics-page .gauge-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

#statistics-page .gauge-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
    width: 0%;
}

#statistics-page .gauge-fill.low-risk {
    background: linear-gradient(90deg, #10b981, #34d399);
}

#statistics-page .gauge-fill.medium-risk {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

#statistics-page .gauge-fill.high-risk {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

#statistics-page .gauge-label {
    display: block;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Stats Summary Grid - Top Cards */
#statistics-page .stats-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

#statistics-page .stat-card.premium-card {
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 35, 0.95));
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

#statistics-page .stat-card.premium-card:hover {
    transform: translateY(-4px);
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.15);
}

#statistics-page .stat-icon {
    font-size: 2rem;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.15);
    border-radius: 12px;
}

#statistics-page .stat-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

#statistics-page .stat-content .stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#statistics-page .stat-content .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

#statistics-page .stat-content .stat-value.positive {
    color: #10b981;
}

#statistics-page .stat-content .stat-value.negative {
    color: #ef4444;
}

#statistics-page .stat-trend {
    font-size: 0.8rem;
    font-weight: 600;
}

#statistics-page .stat-trend.positive {
    color: #10b981;
}

#statistics-page .stat-trend.negative {
    color: #ef4444;
}

#statistics-page .stat-subtext {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Dashboard Main Grid */
#statistics-page .dashboard-main-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Dashboard Section Cards */
#statistics-page .dashboard-section {
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.8), rgba(20, 20, 35, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.5rem;
}

#statistics-page .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#statistics-page .section-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.3px;
}

#statistics-page .refresh-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    color: #a78bfa;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

#statistics-page .refresh-btn:hover {
    background: rgba(139, 92, 246, 0.25);
    border-color: rgba(139, 92, 246, 0.5);
}

#statistics-page .refresh-btn svg {
    stroke: currentColor;
}

/* AI Performance Section */
#statistics-page .ai-performance-section {
    overflow-x: auto;
}

#statistics-page .ai-performance-container {
    min-height: 100px;
}

/* Value Bets Section */
#statistics-page .value-bets-section .loading-state,
#statistics-page .ai-performance-container .loading-state,
#statistics-page .market-cards-container .loading-state {
    text-align: center;
    padding: 2rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* Market Performance Cards */
#statistics-page .market-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

#statistics-page .market-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.2s ease;
}

#statistics-page .market-stat-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(139, 92, 246, 0.3);
}

#statistics-page .market-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#statistics-page .market-icon {
    font-size: 1.5rem;
}

#statistics-page .market-card-header h4 {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

#statistics-page .market-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

#statistics-page .market-badge.positive {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

#statistics-page .market-badge.negative {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

#statistics-page .market-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

#statistics-page .market-metric {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

#statistics-page .market-metric .metric-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#statistics-page .market-metric .metric-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
}

#statistics-page .market-metric .metric-value.positive {
    color: #10b981;
}

#statistics-page .market-metric .metric-value.negative {
    color: #ef4444;
}

/* Pro Tips Section */
#statistics-page .pro-tips-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#statistics-page .pro-tip-card {
    background: rgba(255, 255, 255, 0.02);
    border-left: 3px solid rgba(139, 92, 246, 0.5);
    padding: 1rem 1.25rem;
    border-radius: 0 8px 8px 0;
}

#statistics-page .pro-tip-card h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #a78bfa;
    margin: 0 0 0.5rem 0;
}

#statistics-page .pro-tip-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.5;
}

#statistics-page .pro-tip-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

#statistics-page .insight-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Insight Type Colors */
#statistics-page .pro-tip-card.insight-success {
    border-left-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

#statistics-page .pro-tip-card.insight-success strong {
    color: #10b981;
}

#statistics-page .pro-tip-card.insight-warning {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
}

#statistics-page .pro-tip-card.insight-warning strong {
    color: #f59e0b;
}

#statistics-page .pro-tip-card.insight-danger {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

#statistics-page .pro-tip-card.insight-danger strong {
    color: #ef4444;
}

#statistics-page .pro-tip-card.insight-info {
    border-left-color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}

#statistics-page .pro-tip-card.insight-info strong {
    color: #60a5fa;
}

/* Debug Footer */
#statistics-page #debug-footer {
    margin-top: 2rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.4);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Empty and Error States */
#statistics-page .empty-state,
#statistics-page .error-state {
    text-align: center;
    padding: 2rem;
    color: rgba(255, 255, 255, 0.5);
}

#statistics-page .error-state {
    color: #ef4444;
}

/* Model Name in Table */
#statistics-page .model-name {
    font-weight: 600;
    color: #ffffff;
}

/* Accuracy Badge Colors */
#statistics-page .accuracy-badge.positive {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#statistics-page .accuracy-badge.medium {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

#statistics-page .accuracy-badge.negative {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #statistics-page {
        padding: 0 1rem 1rem 1rem;
    }

    #statistics-page .stats-summary-grid {
        grid-template-columns: 1fr;
    }

    #statistics-page .market-cards-container {
        grid-template-columns: 1fr;
    }

    #statistics-page .dashboard-header h2 {
        font-size: 1.5rem;
    }
}

/* ============================================
   BETTING JOURNAL - Match Ticket Design
   Redesigned Analysis History Section
   ============================================ */

/* Container styling */
#analysis-history-container {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
}

#analysis-history-container .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#analysis-history-container .card-header h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Match Ticket Card */
.match-ticket {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: visible;
}

.match-ticket::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.match-ticket:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(139, 92, 246, 0.02) 100%);
    border-color: rgba(139, 92, 246, 0.3);
    transform: translateX(4px);
    z-index: 10;
    position: relative;
}

.match-ticket:hover::before {
    opacity: 1;
}

/* Won ticket styling */
.match-ticket.ticket-won {
    border-left: 4px solid #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
}

.match-ticket.ticket-won::before {
    background: #10b981;
    opacity: 1;
}

/* Lost ticket styling */
.match-ticket.ticket-lost {
    border-left: 4px solid #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.02) 100%);
}

.match-ticket.ticket-lost::before {
    background: #ef4444;
    opacity: 1;
}

/* Pending ticket styling */
.match-ticket.ticket-pending {
    border-left: 4px solid #6b7280;
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.05) 0%, rgba(107, 114, 128, 0.02) 100%);
}

.match-ticket.ticket-pending::before {
    background: #6b7280;
    opacity: 1;
}

/* Ticket sections */
.ticket-datetime {
    min-width: 70px;
    text-align: center;
    padding-right: 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.ticket-date {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.ticket-time {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Teams section */
.ticket-teams {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.ticket-team {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.ticket-vs {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
}

/* AI Pick Pill */
.ticket-pick {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: white;
    padding: 0.4rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.ticket-pick .pick-icon {
    font-size: 0.9rem;
}

.ticket-pick .pick-team {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Odds display */
.ticket-odds {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
    font-size: 0.8rem;
}

.ticket-odds-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.ticket-odds-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

.ticket-odds-value {
    font-weight: 700;
    color: #10b981;
    font-size: 0.85rem;
}

/* Status Badge */
.ticket-status {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    min-width: 90px;
    justify-content: center;
}

.ticket-status.status-pending {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.ticket-status.status-won {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.ticket-status.status-lost {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.ticket-status .status-icon {
    font-size: 0.9rem;
}

/* Score display for completed matches */
.ticket-score {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    margin-left: 0.5rem;
}

/* Actions area */
.ticket-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.ticket-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
    color: var(--text-secondary);
    position: relative;
}

.ticket-action-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.4);
    color: var(--text-primary);
    transform: translateY(-2px);
    z-index: 100;
}

.ticket-action-btn.action-view:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
}

.ticket-action-btn.action-check:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.4);
}

.ticket-action-btn.action-edit:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.4);
}

.ticket-action-btn.action-delete:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

/* Tooltip for action buttons */
.ticket-action-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.95);
    color: white;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    margin-bottom: 6px;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ticket-action-btn:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Empty state */
#analysis-history-list .empty-list-msg {
    text-align: center;
    padding: 3rem 2rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
}

#analysis-history-list .empty-list-msg::before {
    content: '📋';
    display: block;
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Responsive design for tickets */
@media (max-width: 992px) {
    .match-ticket {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .ticket-datetime {
        border-right: none;
        padding-right: 0;
        min-width: auto;
    }

    .ticket-teams {
        flex: 1 1 100%;
        order: -1;
    }

    .ticket-actions {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        flex: 1 1 100%;
        justify-content: flex-end;
        margin-top: 0.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
}

@media (max-width: 576px) {
    .match-ticket {
        padding: 1rem;
    }

    .ticket-team {
        max-width: 100px;
        font-size: 0.85rem;
    }

    .ticket-pick {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }

    .ticket-pick .pick-team {
        max-width: 60px;
    }

    .ticket-status {
        min-width: 80px;
        font-size: 0.75rem;
    }

    .ticket-odds {
        display: none;
    }

    .ticket-action-btn {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
}

/* ============================================
   MATCH INSIGHTS CONTAINER STYLES
   ============================================ */

/* Main Container */
.match-insights-container {
    background: linear-gradient(135deg, rgba(36, 180, 126, 0.05) 0%, rgba(30, 33, 35, 0.8) 100%);
    border: 1px solid rgba(36, 180, 126, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.insights-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.insights-icon {
    font-size: 1.5rem;
}

.insights-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.insights-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-left: auto;
}

.insights-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Loading State */
.insights-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--text-secondary);
}

.loading-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Insight Messages */
.insight-messages-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.insight-message {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
}

.insight-message.message-positive {
    background: rgba(36, 180, 126, 0.15);
    color: #24b47e;
    border: 1px solid rgba(36, 180, 126, 0.3);
}

.insight-message.message-negative {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.insight-message.message-info {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.insight-message.message-under {
    background: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
    border: 1px solid rgba(156, 163, 175, 0.3);
}

.insight-message.message-over {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

/* AI Mastery Badges */
.ai-mastery-section {
    margin-top: 0.5rem;
}

.mastery-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ai-mastery-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    flex: 1 1 auto;
    min-width: 200px;
    max-width: 400px;
}

.ai-mastery-badge.mastery-positive {
    background: linear-gradient(135deg, rgba(36, 180, 126, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
    border: 1px solid rgba(36, 180, 126, 0.4);
    color: #24b47e;
}

.ai-mastery-badge.mastery-warning {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.1) 100%);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

.ai-mastery-badge.mastery-neutral {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.2) 0%, rgba(107, 114, 128, 0.1) 100%);
    border: 1px solid rgba(156, 163, 175, 0.3);
    color: #9ca3af;
}

.mastery-icon {
    font-size: 1.1rem;
}

.mastery-text {
    font-weight: 500;
}

.mastery-detail {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-left: auto;
}

/* League Context Card */
.league-context-section {
    margin-top: 0.25rem;
}

.league-context-card {
    background: rgba(30, 33, 35, 0.8);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.league-context-card.context-under .league-context-header {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.3) 0%, rgba(75, 85, 99, 0.2) 100%);
    border-left: 3px solid #6b7280;
}

.league-context-card.context-over .league-context-header {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.3) 0%, rgba(217, 119, 6, 0.2) 100%);
    border-left: 3px solid #fbbf24;
}

.league-context-card.context-neutral .league-context-header {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(37, 99, 235, 0.2) 100%);
    border-left: 3px solid #3b82f6;
}

.league-context-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
}

.context-icon {
    font-size: 1.1rem;
}

.context-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.league-context-body {
    padding: 1rem;
}

.goals-comparison {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.goals-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.goals-label {
    width: 80px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.goals-bar-container {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.goals-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.goals-bar-expected {
    background: linear-gradient(90deg, #24b47e, #10b981);
}

.goals-bar-average {
    background: linear-gradient(90deg, #6b7280, #9ca3af);
}

.goals-value {
    width: 70px;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    flex-shrink: 0;
}

.context-insight {
    font-size: 0.9rem;
    color: var(--text-secondary);
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}

.context-insight strong {
    color: var(--text-primary);
}

.league-stats-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-pill {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* Similar Scenarios Panel */
.similar-scenarios-section {
    margin-top: 0.25rem;
}

.similar-scenarios-panel {
    background: rgba(30, 33, 35, 0.8);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.scenarios-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-left: 3px solid #a855f7;
}

.scenarios-icon {
    font-size: 1.1rem;
}

.scenarios-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.scenarios-body {
    padding: 1rem;
}

.scenarios-insight {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.scenarios-insight strong {
    color: var(--text-primary);
}

.scenarios-breakdown {
    margin-bottom: 1rem;
}

.outcome-bar-container {
    display: flex;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
}

.outcome-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.4s ease;
    min-width: 40px;
}

.outcome-bar.outcome-home {
    background: linear-gradient(135deg, #24b47e, #10b981);
}

.outcome-bar.outcome-draw {
    background: linear-gradient(135deg, #6b7280, #9ca3af);
}

.outcome-bar.outcome-away {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.outcome-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.scenarios-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.scenarios-dominant {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
}

.scenarios-dominant.outcome-home {
    background: rgba(36, 180, 126, 0.15);
    color: #24b47e;
}

.scenarios-dominant.outcome-draw {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
}

.scenarios-dominant.outcome-away {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.scenarios-sample-size {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .match-insights-container {
        padding: 1rem;
    }

    .insights-header {
        flex-wrap: wrap;
    }

    .insights-subtitle {
        flex: 1 1 100%;
        margin-left: 0;
        margin-top: 0.25rem;
    }

    .ai-mastery-badge {
        min-width: 100%;
        max-width: 100%;
    }

    .goals-row {
        flex-wrap: wrap;
    }

    .goals-label {
        width: 100%;
        margin-bottom: 0.25rem;
    }

    .goals-value {
        width: auto;
        margin-left: auto;
    }

    .scenarios-footer {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}

/* ═══════════════════════════════════════════════════════════════
   STRATEGY GUIDE COMPONENTS - Performance Metrics
   Specialist Matrix, League Profitability, Calibration Check
   ═══════════════════════════════════════════════════════════════ */

/* Section Styling */
#statistics-page .section-subtitle {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0.25rem 0 0 0;
    font-weight: 400;
}

/* ═══════════════════════════════════════
   Specialist Matrix Table
   ═══════════════════════════════════════ */
.specialist-matrix-container {
    overflow-x: auto;
}

.specialist-matrix-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.specialist-matrix-table th,
.specialist-matrix-table td {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.specialist-matrix-table th {
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.specialist-matrix-table th:first-child {
    text-align: left;
}

.specialist-matrix-table .model-name {
    text-align: left;
    font-weight: 600;
    color: #ffffff;
    font-size: 0.95rem;
}

.specialist-matrix-table .matrix-cell {
    position: relative;
    font-weight: 600;
    font-size: 1rem;
    color: #ffffff;
    transition: all 0.2s ease;
}

.specialist-matrix-table .matrix-cell .muted {
    color: rgba(255, 255, 255, 0.3);
}

.specialist-matrix-table .matrix-cell .sample-size {
    display: block;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
    margin-top: 0.2rem;
}

/* High accuracy (>55%) - Green highlight */
.specialist-matrix-table .matrix-cell.high-accuracy {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

/* Best performer - Gold highlight */
.specialist-matrix-table .matrix-cell.best-performer {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.15));
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

/* Insufficient data - Grey out */
.specialist-matrix-table .matrix-cell.insufficient-data {
    opacity: 0.4;
}

.specialist-badge {
    font-size: 1rem;
    margin-right: 0.25rem;
}

.matrix-legend {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 1rem;
    text-align: center;
}

/* ═══════════════════════════════════════
   League Profitability Leaderboard
   ═══════════════════════════════════════ */
.league-leaderboard-container {
    overflow-x: auto;
}

.league-leaderboard-table {
    width: 100%;
    border-collapse: collapse;
}

.league-leaderboard-table th,
.league-leaderboard-table td {
    padding: 0.9rem 1rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.league-leaderboard-table th {
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.league-leaderboard-table th:nth-child(2) {
    text-align: left;
}

.league-leaderboard-table .rank {
    font-size: 1.1rem;
}

.league-leaderboard-table .league-name {
    text-align: left;
    font-weight: 600;
    color: #ffffff;
}

.league-leaderboard-table .bets-count,
.league-leaderboard-table .win-rate {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.league-leaderboard-table .roi {
    font-weight: 700;
    font-size: 1rem;
}

.league-leaderboard-table .roi.positive {
    color: #10b981;
}

.league-leaderboard-table .roi.negative {
    color: #ef4444;
}

.league-leaderboard-table tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.league-insight {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 1rem;
    text-align: center;
    padding: 0.75rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Top 3 League Highlighting */
.league-leaderboard-table tr.gold-row {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-left: 3px solid #fbbf24;
}

.league-leaderboard-table tr.silver-row {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.15) 0%, rgba(156, 163, 175, 0.08) 100%);
    border-left: 3px solid #c0c0c0;
}

.league-leaderboard-table tr.bronze-row {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.15) 0%, rgba(180, 83, 9, 0.08) 100%);
    border-left: 3px solid #cd7f32;
}

.league-leaderboard-table tr.gold-row:hover,
.league-leaderboard-table tr.silver-row:hover,
.league-leaderboard-table tr.bronze-row:hover {
    filter: brightness(1.1);
}

/* ═══════════════════════════════════════
   Calibration Check Bar Chart
   ═══════════════════════════════════════ */
.calibration-container {
    padding: 1rem 0;
}

.calibration-chart {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    gap: 1.5rem;
    height: 280px;
    padding: 1rem 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
}

.calibration-bucket {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 120px;
}

.bucket-bars {
    display: flex;
    gap: 0.4rem;
    align-items: flex-end;
    height: 180px;
    padding-bottom: 0.5rem;
}

.bucket-bars .bar {
    width: 36px;
    border-radius: 6px 6px 0 0;
    position: relative;
    min-height: 10px;
    transition: all 0.3s ease;
}

.bucket-bars .confidence-bar {
    background: linear-gradient(180deg, #8b5cf6 0%, #6d28d9 100%);
}

.bucket-bars .reality-bar {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
}

.bucket-bars .bar .bar-value {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}

.bucket-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    margin-top: 0.5rem;
}

.bucket-sample {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.2rem;
}

.overconfident-flag {
    font-size: 0.75rem;
    color: #f59e0b;
    margin-top: 0.3rem;
    background: rgba(245, 158, 11, 0.15);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.calibration-legend {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1.5rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.legend-color {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.legend-color.confidence {
    background: linear-gradient(180deg, #8b5cf6 0%, #6d28d9 100%);
}

.legend-color.reality {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
}

.calibration-insight {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 1rem;
    text-align: center;
    padding: 0.75rem;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Responsive adjustments for strategy guide */
@media (max-width: 768px) {
    .calibration-chart {
        height: 220px;
        gap: 0.75rem;
        padding: 0.75rem 0.25rem;
    }

    .bucket-bars .bar {
        width: 28px;
    }

    .bucket-bars {
        height: 140px;
    }

    .calibration-legend {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }

    .specialist-matrix-table th,
    .specialist-matrix-table td {
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
    }
}

/* ═══════════════════════════════════════
   Side-by-Side Layout (Odds Sweet Spot + Calibration)
   ═══════════════════════════════════════ */
.odds-calibration-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.analytics-half-section {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.analytics-half-section .section-header {
    margin-bottom: 1rem;
}

.analytics-half-section .section-header h3 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

/* Responsive: Stack on mobile */
@media (max-width: 900px) {
    .odds-calibration-row {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════
   Odds Sweet Spot Bar Chart
   ═══════════════════════════════════════ */
.odds-sweet-spot-container {
    padding: 0.5rem 0;
    min-height: 250px;
    /* Ensure chart doesn't collapse */
}

.odds-chart {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    gap: 1.5rem;
    min-height: 220px;
    padding: 1rem 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
}

.odds-bucket {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 140px;
    position: relative;
}

.bucket-bar-container {
    display: flex;
    align-items: flex-end;
    height: 140px;
    width: 100%;
    justify-content: center;
    padding-bottom: 0.5rem;
}

.roi-bar {
    width: 56px;
    min-height: 20px;
    border-radius: 8px 8px 0 0;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.5rem;
}

.roi-bar.profitable {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
}

.roi-bar.losing {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}

.roi-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.odds-bucket .bucket-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffffff;
    margin-top: 0.75rem;
    text-align: center;
}

.bucket-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.3rem;
}

.bucket-wins {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
}

.bucket-profit {
    font-size: 0.8rem;
    font-weight: 600;
}

.bucket-profit.positive {
    color: #10b981;
}

.bucket-profit.negative {
    color: #ef4444;
}

.insight-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

.insight-badge.profitable {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
}

.insight-badge.warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
}

.odds-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
}

.odds-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.odds-legend .legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.odds-legend .legend-dot.profitable {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
}

.odds-legend .legend-dot.losing {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
}

.odds-insight {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 1rem;
    text-align: center;
    padding: 0.75rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Responsive Odds Chart */
@media (max-width: 600px) {
    .odds-chart {
        gap: 0.75rem;
        min-height: 180px;
    }

    .bucket-bar-container {
        height: 100px;
    }

    .roi-bar {
        width: 44px;
    }

    .odds-bucket .bucket-label {
        font-size: 0.7rem;
    }

    .odds-legend {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Premium Trading Terminal - AI Consensus Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* Terminal Container */
.consensus-terminal {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.terminal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
    padding-bottom: 1rem !important;
}

.terminal-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.terminal-icon {
    font-size: 1.3rem;
}

.terminal-badge {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Terminal Winner Section */
.terminal-winner {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.1);
}

.terminal-winner .winner-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.5);
}

.terminal-winner .winner-name {
    font-size: 1.8rem;
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}

.terminal-winner .winner-confidence {
    background: rgba(16, 185, 129, 0.2);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Zebra Striping */
.zebra-list .breakdown-item:nth-child(odd) {
    background: rgba(30, 41, 59, 0.6);
}

.zebra-list .breakdown-item:nth-child(even) {
    background: rgba(15, 23, 42, 0.4);
}

.zebra-list .breakdown-item {
    border: 1px solid rgba(71, 85, 105, 0.3);
    transition: all 0.2s ease;
}

.zebra-list .breakdown-item:hover {
    border-color: rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.1);
}

/* Terminal Goals Section */
.terminal-goals {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(71, 85, 105, 0.4);
    border-radius: 12px;
    padding: 1.25rem !important;
}

.terminal-goals h3 {
    color: #f1f5f9;
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1rem;
}

/* Goal Data Chips */
.goal-chips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.goal-data-chip {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(71, 85, 105, 0.5);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.goal-data-chip:hover {
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(30, 41, 59, 0.7);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);
}

.chip-label {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.chip-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Total Goals Chip - Special Styling */
.total-chip {
    position: relative;
}

.total-chip.over-threshold {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.5);
}

.total-chip.over-threshold .chip-value {
    color: #fbbf24;
}

.total-chip.over-threshold:hover {
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.2);
}

.chip-value.over-threshold {
    color: #fbbf24;
}

.over-badge,
.under-badge {
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 700;
    margin-top: 0.25rem;
}

.over-badge {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.under-badge {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
    border: 1px solid rgba(100, 116, 139, 0.4);
}

/* Trend Indicators */
.trend-indicator {
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

.trend-up {
    color: #10b981;
    animation: pulseUp 2s infinite;
}

.trend-down {
    color: #ef4444;
}

@keyframes pulseUp {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* Predicted Score Box */
.predicted-score-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 1.25rem 0;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 12px;
}

.score-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(16, 185, 129, 0.9);
    font-weight: 700;
}

.score-display {
    font-size: 2.2rem;
    font-weight: 800;
    color: #10b981;
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
    font-family: 'Roboto Mono', monospace;
}

/* Score Probability Section */
.score-probability-section {
    text-align: center;
    margin-top: 1rem;
}

.prob-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(148, 163, 184, 0.7);
    display: block;
    margin-bottom: 0.75rem;
}

.score-prob-list {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.score-prob-pill {
    background: rgba(71, 85, 105, 0.4);
    border: 1px solid rgba(100, 116, 139, 0.5);
    padding: 0.4rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #e2e8f0;
    font-weight: 600;
    font-family: 'Roboto Mono', monospace;
    transition: all 0.2s ease;
}

.score-prob-pill:first-child {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.5);
    color: #c4b5fd;
}

.score-prob-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.pill-prob {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.8);
    font-weight: 400;
}

/* Consensus Actions Footer */
.consensus-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(71, 85, 105, 0.4);
}

.action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 1.25rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid transparent;
}

.stats-btn {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.4);
}

.stats-btn:hover {
    background: rgba(139, 92, 246, 0.25);
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
    transform: translateY(-2px);
}

.track-btn {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.4);
}

.track-btn:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: rgba(16, 185, 129, 0.6);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
    transform: translateY(-2px);
}

.btn-icon {
    font-size: 1.1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .goal-chips {
        grid-template-columns: 1fr;
    }

    .consensus-actions {
        flex-direction: column;
    }

    .score-prob-list {
        gap: 0.4rem;
    }

    .score-prob-pill {
        font-size: 0.8rem;
        padding: 0.35rem 0.6rem;
    }

    .terminal-winner .winner-name {
        font-size: 1.4rem;
    }

    .score-display {
        font-size: 1.8rem;
    }
}

/* =================================================================
   Smart Pattern Widget - Bet Builder Suggestions
   ================================================================= */
.smart-pattern-widget {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(23, 32, 47, 0.98));
    border-radius: 12px;
    border: 1px solid rgba(255, 193, 7, 0.25);
    padding: 20px;
    margin-top: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 193, 7, 0.05);
}

.pattern-widget-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pattern-widget-icon {
    font-size: 1.4rem;
}

.pattern-widget-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fbbf24;
    flex: 1;
}

.pattern-widget-sample {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 10px;
    border-radius: 12px;
}

.pattern-widget-source {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
}

.pattern-widget-source.h2h-source {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(99, 102, 241, 0.15));
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.pattern-widget-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pattern-widget-content.pattern-loading {
    align-items: center;
    padding: 20px;
}

.pattern-loader {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.spinner-small {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: #fbbf24;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.pattern-widget-content.pattern-no-data,
.pattern-widget-content.pattern-error {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    padding: 16px;
    font-size: 0.9rem;
}

/* Pattern Stats Grid */
.pattern-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 500px) {
    .pattern-stats-grid {
        grid-template-columns: 1fr;
    }
}

.pattern-stat-item {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.pattern-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.pattern-stat-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.pattern-stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #10b981;
}

.pattern-progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.pattern-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.pattern-progress-fill.bar-high {
    background: linear-gradient(90deg, #10b981, #34d399);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.pattern-progress-fill.bar-medium {
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.pattern-progress-fill.bar-low {
    background: linear-gradient(90deg, #6b7280, #9ca3af);
}

.pattern-stat-detail {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Pattern Badges - Recommendations */
.pattern-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.pattern-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

.pattern-badge .badge-icon {
    font-size: 1rem;
}

.pattern-badge.badge-fire {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(249, 115, 22, 0.2));
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
}

.pattern-badge.badge-shield {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(99, 102, 241, 0.2));
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #60a5fa;
}

.pattern-badge.badge-shootout {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(139, 92, 246, 0.2));
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: #c084fc;
}

/* ========================================
   BLOOMBERG TERMINAL STYLE - MATCH ANALYSIS UI
   ======================================== */

/* Bloomberg Terminal Color Palette */
:root {
    --terminal-bg: #0a0e1a;
    --terminal-card: #1a1f2e;
    --terminal-accent: #00ff88;
    --terminal-gold: #fbbf24;
    --terminal-red: #ff5722;
    --edge-positive-color: #00ff88;
    --edge-negative-color: #ff5722;
    --edge-neutral-color: #9ca3af;
}

/* ========== 1. SCOREBOARD CARD ========== */
.scoreboard-card {
    background: linear-gradient(135deg, #1a1f2e 0%, #242938 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.scoreboard-context {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.scoreboard-league {
    color: var(--terminal-accent);
}

.scoreboard-separator {
    color: rgba(255, 255, 255, 0.3);
}

.scoreboard-venue {
    color: rgba(255, 255, 255, 0.5);
}

.scoreboard-main {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
}

.scoreboard-team {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.scoreboard-home {
    justify-content: flex-end;
}

.scoreboard-away {
    justify-content: flex-start;
}

.team-logo-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--terminal-accent) 0%, #1e9a66 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 255, 136, 0.3);
}

.scoreboard-team .team-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.scoreboard-center {
    text-align: center;
}

.scoreboard-time {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--terminal-accent);
    padding: 0.75rem 2rem;
    background: rgba(0, 255, 136, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(0, 255, 136, 0.2);
}

/* ========== ML CONFIDENCE BADGE ========== */
/* Meta-Model prediction confidence indicator */
.ml-confidence-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
    position: relative;
}

.ml-confidence-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: 24px;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
    cursor: help;
}

.ml-confidence-badge .ml-icon {
    font-size: 1.1rem;
}

.ml-confidence-badge .ml-label {
    color: inherit;
}

.ml-confidence-badge .ml-score {
    font-weight: 700;
    font-size: 1rem;
}

/* Very High Confidence (80%+) */
.ml-confidence-very-high {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.15));
    border: 1px solid rgba(16, 185, 129, 0.6);
    color: #34d399;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* High Confidence (65-79%) */
.ml-confidence-high {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.15));
    border: 1px solid rgba(59, 130, 246, 0.5);
    color: #60a5fa;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.25), 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Moderate Confidence (50-64%) */
.ml-confidence-moderate {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.15));
    border: 1px solid rgba(251, 191, 36, 0.5);
    color: #fbbf24;
}

/* Low Confidence (<50%) */
.ml-confidence-low {
    background: rgba(107, 114, 128, 0.2);
    border: 1px solid rgba(107, 114, 128, 0.4);
    color: #9ca3af;
}

/* Gathering Data State */
.ml-confidence-gathering {
    background: rgba(107, 114, 128, 0.15);
    border: 1px dashed rgba(107, 114, 128, 0.4);
    color: #9ca3af;
    animation: gathering-pulse 2s ease-in-out infinite;
}

@keyframes gathering-pulse {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

/* Tooltip */
.ml-confidence-tooltip {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    padding: 0.75rem 1rem;
    background: rgba(30, 41, 59, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    white-space: nowrap;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.ml-confidence-container:hover .ml-confidence-tooltip {
    display: block;
}

.ml-confidence-tooltip small {
    color: rgba(255, 255, 255, 0.5);
}


/* ========== 2. MARKET ODDS STRIP ========== */
.market-odds-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

.stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.stat-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.stat-card-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1rem;
    font-weight: 600;
}

.stat-card-odds {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1;
}

.stat-card-implied {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

/* Value Pick Glow Effect */
.value-pick-glow {
    border-color: var(--terminal-gold);
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(251, 191, 36, 0.05) 100%);
}

.value-pick-badge {
    margin-top: 0.5rem;
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--terminal-gold);
    color: #1a1f2e;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
}

/* ========== 3. VALUE ANALYSIS GRID FIXES ========== */
.value-item-row.waiting-data {
    background: rgba(255, 255, 255, 0.02);
    border-left: 3px solid rgba(255, 255, 255, 0.2);
}

.waiting-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Edge Color Coding */
.value-item-row.edge-positive {
    border-left: 3px solid var(--edge-positive-color);
}

.value-item-row.edge-negative {
    border-left: 3px solid var(--edge-negative-color);
}

.value-item-row.edge-neutral {
    border-left: 3px solid var(--edge-neutral-color);
}

.value-percentage.edge-positive {
    color: var(--edge-positive-color);
    font-weight: 700;
}

.value-percentage.edge-negative {
    color: var(--edge-negative-color);
    font-weight: 700;
}

.value-percentage.edge-neutral {
    color: var(--edge-neutral-color);
    font-weight: 600;
}

/* ========== 4. AI CONSENSUS - VOTE SPLIT BAR ========== */
.vote-split-bar-container {
    margin: 0.75rem 0;
}

.vote-split-bar {
    display: flex;
    height: 24px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.vote-segment {
    transition: all 0.3s ease;
    position: relative;
}

.vote-segment:hover {
    opacity: 0.8;
}

.vote-home {
    background: linear-gradient(135deg, #00ff88 0%, #1e9a66 100%);
}

.vote-draw {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
}

.vote-away {
    background: linear-gradient(135deg, #ff5722 0%, #d32f2f 100%);
}

/* ========== 5. CONFIDENCE PROGRESS BAR ========== */
.confidence-progress-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.confidence-progress-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.confidence-progress-fill {
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 4px;
}

.confidence-progress-fill.conf-high {
    background: linear-gradient(90deg, var(--terminal-accent) 0%, #1e9a66 100%);
}

.confidence-progress-fill.conf-med {
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
}

.confidence-progress-fill.conf-low {
    background: linear-gradient(90deg, #ff5722 0%, #d32f2f 100%);
}

.confidence-progress-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 45px;
    text-align: right;
}

/* ========== 6. GLOBAL STYLING IMPROVEMENTS ========== */
/* Remove all green separator lines */
hr {
    display: none;
}

/* Use CSS Grid/Flex gaps instead of margins */
.market-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.market-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Ensure consistent font family */
body,
.scoreboard-card,
.stat-card,
.value-item-row,
.vote-split-bar-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

/* Bloomberg Terminal aesthetic for cards */
.card,
.market-section {
    background: var(--terminal-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Value Analysis Card Min-Height Fix */
.value-market-card {
    min-height: 140px;
}

.value-item-row {
    min-height: 60px;
    display: flex;
    align-items: center;
}

/* Vote Split Legend */
.vote-split-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.vote-split-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legend-color-box {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.legend-home {
    background: linear-gradient(135deg, #00ff88 0%, #1e9a66 100%);
}

.legend-draw {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
}

.legend-away {
    background: linear-gradient(135deg, #ff5722 0%, #d32f2f 100%);
}

/* =================================================================
   EXPECTED VALUE (EV) BADGES AND ALERTS
   Professional Value Betting System Styling
   ================================================================= */

/* Base EV Badge Style */
.ev-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0.5rem 0;
}

/* Negative EV - Warning State */
.ev-badge-negative {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(185, 28, 28, 0.15));
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #f87171;
    animation: ev-warning-pulse 2s ease-in-out infinite;
}

@keyframes ev-warning-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3);
    }

    50% {
        box-shadow: 0 0 15px 2px rgba(239, 68, 68, 0.2);
    }
}

/* Neutral/Marginal EV */
.ev-badge-neutral {
    background: rgba(107, 114, 128, 0.2);
    border: 1px solid rgba(107, 114, 128, 0.4);
    color: #9ca3af;
}

/* Positive Value EV */
.ev-badge-value {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.15));
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #34d399;
}

/* High Value EV - Fire State */
.ev-badge-fire {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.2));
    border: 1px solid rgba(251, 191, 36, 0.6);
    color: #fbbf24;
    animation: fire-glow 1.5s ease-in-out infinite alternate;
}

@keyframes fire-glow {
    0% {
        box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
        text-shadow: 0 0 5px rgba(251, 191, 36, 0.3);
    }

    100% {
        box-shadow: 0 0 25px rgba(251, 191, 36, 0.5), 0 0 40px rgba(245, 158, 11, 0.2);
        text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
    }
}

/* Stat Card EV Display */
.stat-card-ev {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.5rem;
}

.stat-card-ev.ev-positive {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.stat-card-ev.ev-negative {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* Negative EV Badge on Card */
.negative-ev-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.9rem;
}

/* Negative EV Dimming Effect */
.stat-card.negative-ev-dim {
    opacity: 0.6;
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
}

.stat-card.negative-ev-dim:hover {
    opacity: 0.8;
}

.stat-card.negative-ev-dim .stat-card-odds {
    color: rgba(255, 255, 255, 0.5);
}

/* Negative EV Section Styling */
.negative-ev-section {
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.03);
}

.ev-warning-active {
    border-left: 3px solid #ef4444;
}

/* =================================================================
   WARNING ALERTS (EV Warning & Draw Warning)
   ================================================================= */

/* EV Warning Alert */
.ev-warning-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(185, 28, 28, 0.1));
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-left: 4px solid #ef4444;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.ev-warning-icon {
    font-size: 1.5rem;
}

.ev-warning-text {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
    color: #fca5a5;
    line-height: 1.4;
}

/* Draw Warning Alert */
.draw-warning-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(245, 158, 11, 0.08));
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-left: 4px solid #fbbf24;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.draw-warning-icon {
    font-size: 1.5rem;
}

.draw-warning-text {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
    color: #fcd34d;
    line-height: 1.4;
}

/* =================================================================
   INLINE EV BADGES (for individual markets)
   ================================================================= */

.ev-badge-inline {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 0.5rem;
}

.ev-badge-inline.ev-positive {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.ev-badge-inline.ev-negative {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* =================================================================
   RESPONSIVE ADJUSTMENTS
   ================================================================= */
@media (max-width: 768px) {

    .ev-warning-alert,
    .draw-warning-alert {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }

    .ev-badge {
        font-size: 0.75rem;
        padding: 0.4rem 0.75rem;
    }

    .stat-card-ev {
        font-size: 0.65rem;
    }
}

/* =================================================================
   BETTING ADVICE ADVISORY LAYER
   Target odds, price traps, and alternative suggestions
   ================================================================= */

/* Betting Advice Container */
.betting-advice-container {
    margin-bottom: 1.25rem;
    border-radius: 12px;
    overflow: hidden;
}

/* Price Trap Alert (Negative EV on Winner) */
.betting-advice-price_trap {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.12), rgba(234, 88, 12, 0.08));
    border: 1px solid rgba(251, 146, 60, 0.4);
    border-left: 4px solid #fb923c;
}

.price-trap-alert {
    padding: 1rem 1.25rem;
}

.advice-main-message {
    font-size: 0.95rem;
    font-weight: 500;
    color: #fdba74;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.advice-main-message strong {
    color: #fb923c;
}

.advice-target {
    font-size: 0.9rem;
    font-weight: 600;
    color: #34d399;
    padding: 0.5rem 0.75rem;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 6px;
    display: inline-block;
}

.advice-target strong {
    color: #10b981;
}

/* Alternative Bet Suggestion */
.alternative-bet-suggestion {
    padding: 0.75rem 1.25rem;
    background: rgba(139, 92, 246, 0.1);
    border-top: 1px solid rgba(139, 92, 246, 0.2);
    font-size: 0.88rem;
    color: #c4b5fd;
}

.alternative-bet-suggestion strong {
    color: #a78bfa;
}

/* Strong Value Alert */
.betting-advice-strong_value {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1));
    border: 1px solid rgba(16, 185, 129, 0.45);
    border-left: 4px solid #10b981;
}

.strong-value-alert {
    padding: 1rem 1.25rem;
}

.strong-value-alert .advice-main-message {
    color: #6ee7b7;
    margin-bottom: 0;
}

.strong-value-alert .advice-main-message strong {
    color: #34d399;
}

/* Fair Price Marker on Odds Cards */
.fair-price-marker {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.35rem;
    display: inline-block;
}

.fair-price-marker.fair-price-bad {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.fair-price-marker.fair-price-good {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.fair-price-marker.fair-price-neutral {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

/* Target Odds Badge - Standalone */
.target-odds-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.15));
    border: 1px solid rgba(16, 185, 129, 0.5);
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #34d399;
}

.target-odds-badge .target-icon {
    font-size: 1rem;
}

/* Responsive Adjustments for Advisory Layer */
@media (max-width: 768px) {
    .betting-advice-container {
        margin-bottom: 1rem;
    }

    .price-trap-alert,
    .strong-value-alert {
        padding: 0.75rem 1rem;
    }

    .advice-main-message {
        font-size: 0.88rem;
    }

    .advice-target {
        font-size: 0.82rem;
        padding: 0.4rem 0.6rem;
    }

    .alternative-bet-suggestion {
        padding: 0.6rem 1rem;
        font-size: 0.82rem;
    }

    .fair-price-marker {
        font-size: 0.65rem;
        padding: 0.15rem 0.4rem;
    }
}

/* =================================================================
   VALUE FEED PAGE STYLES
   ================================================================= */

/* Page Layout */
#value-feed-page {
    margin-top: 126px;
    padding: 2rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.value-feed-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Header */
.value-feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.value-feed-header .header-left h2 {
    margin: 0;
    font-size: 1.8rem;
    color: var(--text-primary);
    font-weight: 600;
}

.value-feed-header .header-subtitle {
    margin: 0.25rem 0 0 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.scan-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.scan-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.scan-icon {
    font-size: 1.1rem;
}

/* Filter Chips */
.value-feed-filters {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.filter-chip {
    background: rgba(36, 180, 126, 0.15);
    color: var(--accent-primary);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(36, 180, 126, 0.3);
}

/* Loading State */
.value-feed-loading {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.scan-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.scan-pulse {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), #1e9a66);
    animation: scanPulse 1.5s ease-in-out infinite;
}

@keyframes scanPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

.scan-text {
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
}

/* Results Container */
.value-feed-results {
    min-height: 200px;
}

.value-feed-results .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.value-feed-results .empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.value-feed-results .empty-state p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin: 0;
    text-align: center;
}

.value-feed-results .empty-state.no-value .empty-message {
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.value-feed-results .empty-hint {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 0.5rem !important;
}

/* Tickets Grid */
.value-tickets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
}

/* Individual Ticket Card */
.value-ticket {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.value-ticket:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-color: rgba(36, 180, 126, 0.4);
}

.value-ticket.hot-ticket {
    border-color: rgba(255, 193, 7, 0.4);
}

.value-ticket.hot-ticket::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ffc107, #ff9800);
}

/* Ticket Header */
.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(36, 180, 126, 0.15), rgba(36, 180, 126, 0.05));
    border-bottom: 1px solid var(--border-color);
}

.hot-ticket .ticket-header {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 152, 0, 0.05));
}

.ticket-ev {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fire-icon {
    font-size: 1.2rem;
}

.ev-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.hot-ticket .ev-value {
    color: #ffc107;
}

.ticket-confidence {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.conf-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.conf-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Ticket Body */
.ticket-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ticket-match {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.05rem;
}

.ticket-match .team {
    font-weight: 600;
    color: var(--text-primary);
}

.ticket-match .vs {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.ticket-prediction,
.ticket-odds {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.prediction-icon,
.odds-icon {
    font-size: 1rem;
}

.prediction-label,
.odds-value {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.prediction-value {
    font-weight: 600;
    color: var(--accent-primary);
}

.odds-implied {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.odds-real {
    color: var(--accent-primary);
    font-size: 0.85rem;
    font-weight: 500;
}

.ticket-market {
    margin-top: 0.25rem;
}

.market-badge {
    display: inline-block;
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Ticket Footer */
.ticket-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.1);
}

.view-analysis-btn {
    width: 100%;
    padding: 0.7rem;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-analysis-btn:hover {
    background: #1e9a66;
    transform: translateY(-1px);
}

/* Scan Summary */
.scan-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(36, 180, 126, 0.1);
    border-radius: 8px;
    margin-top: 1rem;
    color: var(--accent-primary);
    font-weight: 500;
}

.summary-icon {
    font-size: 1.1rem;
}

/* Value Feed Nav Button Highlight */
.value-feed-btn {
    position: relative;
}

.value-feed-btn::after {
    content: 'NEW';
    position: absolute;
    top: -4px;
    right: -8px;
    background: linear-gradient(135deg, #ff6b6b, #ff4858);
    color: white;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* Responsive */
@media (max-width: 768px) {
    #value-feed-page {
        padding: 1rem;
        margin-top: 110px;
    }

    .value-feed-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .value-tickets-grid {
        grid-template-columns: 1fr;
    }

    .ticket-match {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .ticket-odds {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =================================================================
   BATCH ANALYSIS BUTTON & TOAST
   ================================================================= */

/* Batch Button */
.batch-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.batch-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.batch-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.batch-icon {
    font-size: 1rem;
}

.header-right {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Progress Toast */
.batch-toast {
    background: var(--bg-secondary);
    border: 1px solid var(--accent-primary);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toast-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: toastSpin 1s linear infinite;
}

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

#batch-progress-text {
    color: var(--text-primary);
    font-weight: 500;
}

/* Responsive for header buttons */
@media (max-width: 768px) {
    .header-right {
        flex-direction: column;
        width: 100%;
    }

    .batch-btn,
    .scan-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =================================================================
   KELLY STAKING & CONFIDENCE COLORS
   ================================================================= */

/* Kelly Staking Row */
.ticket-stake {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 6px;
    margin-top: 0.25rem;
}

.stake-icon {
    font-size: 1rem;
}

.stake-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stake-value {
    font-weight: 700;
    font-size: 0.95rem;
    color: #a78bfa;
}

/* Stake variants */
.ticket-stake.max-stake {
    background: rgba(239, 68, 68, 0.15);
}

.ticket-stake.max-stake .stake-value {
    color: #f87171;
}

.ticket-stake.high-stake {
    background: rgba(34, 197, 94, 0.15);
}

.ticket-stake.high-stake .stake-value {
    color: #4ade80;
}

.ticket-stake.no-bet {
    background: rgba(115, 115, 115, 0.15);
}

.ticket-stake.no-bet .stake-value {
    color: var(--text-secondary);
}

/* Confidence color classes */
.ticket-confidence.conf-high .conf-value {
    color: #4ade80;
    font-weight: 700;
}

.ticket-confidence.conf-medium .conf-value {
    color: #facc15;
    font-weight: 600;
}

.ticket-confidence.conf-low .conf-value {
    color: #f87171;
}

/* Kelly chip badge in filters */
.filter-chip.kelly-chip {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.3);
}

/* Loading initial state */
.empty-state.loading-initial {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* =================================================================
   SCAN STATS BANNER
   ================================================================= */

.scan-stats-banner {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1rem 1.5rem;
    background: rgba(30, 30, 30, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.scan-stats-banner .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.scan-stats-banner .stat-icon {
    font-size: 1.25rem;
}

.scan-stats-banner .stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.scan-stats-banner .stat-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.scan-stats-banner .stat-item.value .stat-number {
    color: var(--accent-primary);
}

.scan-stats-banner .stat-item.rejected .stat-number {
    color: #f87171;
}

@media (max-width: 480px) {
    .scan-stats-banner {
        gap: 1rem;
        padding: 0.75rem 1rem;
    }

    .scan-stats-banner .stat-number {
        font-size: 1.2rem;
    }

    .scan-stats-banner .stat-icon {
        font-size: 1rem;
    }
}

/* =================================================================
   LIVE SCAN PROGRESS UI
   ================================================================= */

.live-scan-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.live-scan-header {
    text-align: center;
    margin-bottom: 2rem;
}

.live-scan-header .scan-emoji {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
    animation: scanPulse 2s ease-in-out infinite;
}

.live-scan-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.live-scan-header .scan-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Progress Bar */
.progress-bar-container {
    position: relative;
    width: 100%;
    height: 40px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), #1e9a66);
    border-radius: 20px;
    transition: width 0.3s ease;
    position: relative;
}

.progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.95rem;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

/* Current Match Display */
.current-match-display {
    background: rgba(36, 180, 126, 0.1);
    border: 1px solid rgba(36, 180, 126, 0.3);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.current-match-display .analyzing-icon {
    font-size: 1.25rem;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.current-match-display #current-match-text {
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* Games List Container */
.games-list-container {
    margin-top: 2rem;
}

.games-list-header {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.games-list-header h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.games-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* Custom scrollbar */
.games-list-grid::-webkit-scrollbar {
    width: 6px;
}

.games-list-grid::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.games-list-grid::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 3px;
}

/* Individual Game List Item */
.game-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid rgba(60, 60, 60, 0.5);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.game-list-item[data-status="analyzing"] {
    background: rgba(36, 180, 126, 0.1);
    border-color: rgba(36, 180, 126, 0.4);
}

.game-list-item[data-status="success"] {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.game-list-item[data-status="error"] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.game-list-item.animating {
    animation: itemPulse 1.5s ease-in-out infinite;
}

@keyframes itemPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(36, 180, 126, 0.4);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 0 12px 2px rgba(36, 180, 126, 0.2);
    }
}

.game-list-item .game-status-icon {
    font-size: 1.1rem;
    min-width: 24px;
    text-align: center;
}

.game-list-item .game-name {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .live-scan-container {
        padding: 1.5rem;
    }

    .live-scan-header h3 {
        font-size: 1.2rem;
    }

    .progress-bar-container {
        height: 32px;
    }

    .games-list-grid {
        grid-template-columns: 1fr;
        max-height: 300px;
    }

    .game-list-item {
        padding: 0.6rem 0.85rem;
    }
}

/* =================================================================
   ANALYZED GAMES SECTION (Games that didn't qualify as value bets)
   ================================================================= */

.analyzed-games-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.analyzed-games-section .section-header {
    margin-bottom: 1.25rem;
}

.analyzed-games-section .section-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 0.25rem 0;
}

.analyzed-games-section .section-subtitle {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    margin: 0;
}

.analyzed-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

/* Individual Analyzed Game Card */
.analyzed-game-card {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid rgba(60, 60, 60, 0.5);
    border-radius: 10px;
    padding: 1rem;
    opacity: 0.85;
    transition: all 0.2s ease;
}

.analyzed-game-card:hover {
    opacity: 1;
    border-color: var(--border-color);
    background: rgba(35, 35, 35, 0.8);
}

/* Game Header */
.analyzed-game-card .game-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.analyzed-game-card .game-teams {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.analyzed-game-card .home-team,
.analyzed-game-card .away-team {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.analyzed-game-card .vs-text {
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.analyzed-game-card .game-league {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    background: rgba(80, 80, 80, 0.3);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

/* Metrics Row */
.analyzed-game-card .game-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.analyzed-game-card .metric {
    display: flex;
    flex-direction: column;
    background: rgba(50, 50, 50, 0.5);
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    min-width: 60px;
}

.analyzed-game-card .metric-label {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.analyzed-game-card .metric-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Metric color variants */
.analyzed-game-card .metric.ev-positive .metric-value {
    color: #4ade80;
}

.analyzed-game-card .metric.ev-negative .metric-value {
    color: #f87171;
}

.analyzed-game-card .metric.conf-ok .metric-value {
    color: #4ade80;
}

.analyzed-game-card .metric.conf-low .metric-value {
    color: #fbbf24;
}

/* Reason Badge */
.analyzed-game-card .game-reason {
    margin-bottom: 0.75rem;
}

.analyzed-game-card .reason-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* Reason badge variants */
.reason-badge.reason-negative-ev {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.35);
}

.reason-badge.reason-low-ev {
    background: rgba(251, 191, 36, 0.15);
    color: #fcd34d;
    border-color: rgba(251, 191, 36, 0.3);
}

.reason-badge.reason-confidence {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.25);
}

.reason-badge.reason-odds {
    background: rgba(139, 92, 246, 0.15);
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.25);
}

.reason-badge.reason-no-data {
    background: rgba(100, 100, 100, 0.2);
    color: var(--text-secondary);
    border-color: rgba(100, 100, 100, 0.3);
}

/* View Game Button */
.analyzed-game-card .view-game-btn {
    width: 100%;
    padding: 0.5rem;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid rgba(80, 80, 80, 0.5);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.analyzed-game-card .view-game-btn:hover {
    background: rgba(36, 180, 126, 0.1);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

@media (max-width: 768px) {
    .analyzed-games-grid {
        grid-template-columns: 1fr;
    }

    .analyzed-game-card .game-header {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   NO-DATA CARD STYLES
   ═══════════════════════════════════════════════════════════════ */

/* Game Meta Row (kickoff + league) */
.analyzed-game-card .game-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.analyzed-game-card .kickoff-time {
    font-size: 0.75rem;
    color: var(--accent-primary);
    font-weight: 500;
}

/* No-Data Card Variant */
.analyzed-game-card.no-data-card {
    border-style: dashed;
    border-color: rgba(100, 100, 100, 0.5);
    background: rgba(25, 25, 25, 0.4);
}

.analyzed-game-card.no-data-card:hover {
    border-color: var(--accent-primary);
    background: rgba(36, 180, 126, 0.05);
}

/* No-Data Message Block */
.analyzed-game-card .no-data-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    text-align: center;
    gap: 0.5rem;
}

.analyzed-game-card .no-data-message .no-data-icon {
    font-size: 2rem;
    opacity: 0.8;
}

.analyzed-game-card .no-data-message p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Analyze Button Variant */
.analyzed-game-card .view-game-btn.analyze-btn {
    background: rgba(36, 180, 126, 0.1);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    font-weight: 600;
}

.analyzed-game-card .view-game-btn.analyze-btn:hover {
    background: rgba(36, 180, 126, 0.2);
    transform: translateY(-1px);
}

/* Actionable Reason Badge (click to analyze) */
.reason-badge.reason-actionable {
    background: rgba(36, 180, 126, 0.15);
    color: var(--accent-primary);
    border-color: rgba(36, 180, 126, 0.3);
    cursor: pointer;
}

/* Waiting Reason Badge (check back later) */
.reason-badge.reason-waiting {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.25);
}


/* =========================================
   MATCH AUTOPSY / POST-MORTEM STYLES
   ========================================= */

/* Autopsy Modal Container */
.autopsy-modal {
    z-index: 10001;
}

.autopsy-content {
    max-width: 800px;
    border-radius: 16px;
    overflow: hidden;
}

/* Autopsy Header */
.autopsy-header {
    padding: 1.5rem 2rem;
    border: none;
    position: relative;
}

.autopsy-header.autopsy-win {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.1) 100%);
    border-left: 4px solid #10b981;
}

.autopsy-header.autopsy-loss {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(185, 28, 28, 0.1) 100%);
    border-left: 4px solid #ef4444;
}

/* Pending state header - amber/yellow theme */
.autopsy-header.autopsy-pending {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
    border-left: 4px solid #fbbf24;
}

.match-status-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.match-status-label.pending-label {
    color: #fbbf24;
}

/* Pending score box */
.score-box.pending-score {
    opacity: 0.7;
}

.score-box.pending-score .score-digit {
    color: var(--text-secondary);
}

/* Pending verdict badge */
.verdict-badge.pending {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Pending reality row */
.reality-row.pending {
    background: rgba(251, 191, 36, 0.03);
}

/* Confidence cell for pending view */
.confidence-cell .conf-value {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Pending model cards */
.model-card-expanded.pending {
    border-color: rgba(251, 191, 36, 0.2);
    background: rgba(251, 191, 36, 0.03);
}

.model-card-expanded .model-confidence {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fbbf24;
}

.model-card-expanded .pred-row.pending {
    background: transparent;
}

.model-card-expanded .pred-row.pending .pred-value {
    color: var(--text-primary);
}

/* Market odds grid for pending */
.market-odds-grid-compact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.odds-group {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.75rem;
}

.odds-group-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.odds-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
}

.odds-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.odds-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-primary);
}

@media (max-width: 600px) {
    .market-odds-grid-compact {
        grid-template-columns: 1fr;
    }
}

.autopsy-title-row {
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    right: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}

.autopsy-title-row .close-modal {
    position: absolute;
    top: 0;
    right: 0;
}

.autopsy-header h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
}

.autopsy-scoreboard {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
}

.autopsy-team {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.autopsy-team.home {
    text-align: right;
}

.autopsy-team.away {
    text-align: left;
}

.autopsy-team .team-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.autopsy-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.autopsy-score .score-display {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.1em;
}

.autopsy-score .verdict-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.autopsy-score .verdict-badge.win {
    background: rgba(16, 185, 129, 0.3);
    color: #34d399;
}

.autopsy-score .verdict-badge.loss {
    background: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

/* Autopsy Body */
.autopsy-body {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Autopsy Sections */
.autopsy-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.25rem;
}

.autopsy-section .section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.autopsy-section .section-icon {
    font-size: 1.1rem;
}

/* Reality Check Grid */
.reality-check-grid {
    overflow-x: auto;
}

.autopsy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.autopsy-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.autopsy-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.autopsy-table tr:last-child td {
    border-bottom: none;
}

.reality-row.win {
    background: rgba(16, 185, 129, 0.05);
}

.reality-row.loss {
    background: rgba(239, 68, 68, 0.05);
}

.market-cell {
    font-weight: 500;
}

.prediction-cell .pred-value {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.6rem;
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    border-radius: 6px;
    font-size: 0.85rem;
}

.result-cell .result-value {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.6rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 0.85rem;
}

.verdict-cell .verdict-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.verdict-badge.win {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.verdict-badge.loss {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* Model Performance Section */
.performance-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.performance-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
}

.performance-group.top-performers {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.performance-group.underperformers {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.performance-group .group-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.performance-group .group-value {
    color: var(--text-primary);
    font-weight: 600;
}

.model-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.model-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.model-card.high {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.05);
}

.model-card.medium {
    border-color: rgba(250, 204, 21, 0.3);
    background: rgba(250, 204, 21, 0.05);
}

.model-card.low {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
}

.model-card .model-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.model-card .model-score {
    font-size: 1.1rem;
    font-weight: 700;
}

.model-card.high .model-score {
    color: #34d399;
}

.model-card.medium .model-score {
    color: #fbbf24;
}

.model-card.low .model-score {
    color: #f87171;
}

.model-details-mini {
    display: flex;
    gap: 0.5rem;
}

.model-details-mini span {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

.model-details-mini .correct {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.model-details-mini .wrong {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* Value Audit Section */
.odds-at-bet-time {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.audit-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.odds-display-mini {
    display: flex;
    gap: 0.5rem;
}

.odd-chip {
    padding: 0.3rem 0.6rem;
    background: rgba(36, 180, 126, 0.15);
    color: var(--accent-primary);
    font-weight: 600;
    font-size: 0.8rem;
    border-radius: 6px;
}

.value-cards-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.value-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    min-width: 120px;
}

.value-card.green {
    border-color: rgba(16, 185, 129, 0.3);
}

.value-card.yellow {
    border-color: rgba(250, 204, 21, 0.3);
}

.value-card.red {
    border-color: rgba(239, 68, 68, 0.3);
}

.value-card .value-market {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.value-card .value-tier {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.value-card .value-diff {
    font-size: 0.9rem;
    font-weight: 700;
    color: #34d399;
}

.value-card.red .value-diff {
    color: #f87171;
}

.no-value-data {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
}

/* Missing Data Placeholders */
.missing-data-section {
    background: transparent;
    border: none;
    padding: 0;
}

.missing-data-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.missing-data-placeholder {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.missing-data-placeholder .placeholder-icon {
    font-size: 1rem;
    opacity: 0.5;
}

/* Autopsy Footer */
.autopsy-footer {
    padding: 1rem 2rem;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: flex-end;
}

/* Responsive */
@media (max-width: 640px) {
    .autopsy-scoreboard {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
    }

    .autopsy-team.home,
    .autopsy-team.away {
        text-align: center;
    }

    .autopsy-table th,
    .autopsy-table td {
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    .model-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Model Market Icons Row */
.model-markets-row {
    display: flex;
    gap: 0.3rem;
    justify-content: center;
    margin-top: 0.25rem;
}

.model-markets-row .market-icon {
    font-size: 0.9rem;
}

/* Profit/Loss Card */
.profit-loss-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    border-radius: 10px;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

.profit-loss-card.profit-win {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.profit-loss-card.profit-loss {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(185, 28, 28, 0.1) 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.profit-loss-card .pl-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.profit-loss-card .pl-result {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

.profit-loss-card.profit-win .pl-result {
    background: rgba(16, 185, 129, 0.25);
    color: #34d399;
}

.profit-loss-card.profit-loss .pl-result {
    background: rgba(239, 68, 68, 0.25);
    color: #f87171;
}

.profit-loss-card .pl-profit {
    font-size: 1.25rem;
    font-weight: 700;
}

.profit-loss-card.profit-win .pl-profit {
    color: #34d399;
}

.profit-loss-card.profit-loss .pl-profit {
    color: #f87171;
}

/* =========================================
   PROFESSIONAL UI OVERHAUL STYLES
   SVG Icons, Stadium Scoreboard, Trading Ticket
   ========================================= */

/* SVG Icon Base Styles */
.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.icon-success {
    color: #10b981;
}

.icon-error {
    color: #ef4444;
}

.icon-trend {
    color: #8b5cf6;
}

.icon-chart {
    color: #60a5fa;
}

.icon-trophy {
    color: #fbbf24;
}

.icon-wallet {
    color: #34d399;
}

/* Section Title with SVG Icon */
.autopsy-section .section-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.autopsy-section .section-title .icon {
    width: 1.1rem;
    height: 1.1rem;
}

/* Stadium Scoreboard - Strict 3-Column Grid Layout */
.match-status-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.stadium-scoreboard {
    display: grid;
    grid-template-columns: 1fr minmax(140px, 1fr) 1fr;
    align-items: center;
    width: 100%;
    padding: 1rem 0;
    margin-top: 1.5rem;
}

.scoreboard-team {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.scoreboard-team.home {
    text-align: right;
    align-items: flex-end;
    justify-self: end;
    padding-right: 1.5rem;
}

.scoreboard-team.away {
    text-align: left;
    align-items: flex-start;
    justify-self: start;
    padding-left: 1.5rem;
}

.scoreboard-team .team-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.scoreboard-team .team-label {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.scoreboard-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    gap: 0.5rem;
}

.score-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.score-box .score-digit {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    min-width: 2.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.score-box .score-separator {
    font-size: 1.5rem;
    color: var(--text-secondary);
}

.verdict-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.verdict-badge .icon {
    width: 0.9rem;
    height: 0.9rem;
}

.verdict-badge.win {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.verdict-badge.loss {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* Verdict Icon Badge in Table */
.verdict-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
}

.verdict-icon-badge .icon {
    width: 1.1rem;
    height: 1.1rem;
}

.verdict-icon-badge.win {
    background: rgba(16, 185, 129, 0.15);
}

.verdict-icon-badge.loss {
    background: rgba(239, 68, 68, 0.15);
}

/* Model Cards with Labeled Markers */
.model-markets-labeled {
    display: flex;
    gap: 0.35rem;
    justify-content: center;
    margin-top: 0.4rem;
}

.model-markets-labeled .market-label {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.model-markets-labeled .market-label.correct {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.model-markets-labeled .market-label.wrong {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* Trading Ticket Style - Value Audit */
.trading-ticket {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
}

.trading-ticket.profit-positive {
    border-color: rgba(16, 185, 129, 0.25);
}

.trading-ticket.profit-negative {
    border-color: rgba(239, 68, 68, 0.25);
}

.trading-ticket .ticket-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.05);
}

.trading-ticket .ticket-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1rem;
    background: var(--bg-secondary);
}

.trading-ticket .ticket-label {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.trading-ticket .ticket-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.trading-ticket .ticket-value.mono {
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.trading-ticket .ticket-value.profit-positive {
    color: #34d399;
}

.trading-ticket .ticket-value.profit-negative {
    color: #f87171;
}

.trading-ticket .result-cell-ticket {
    background: rgba(0, 0, 0, 0.2);
}

/* No Data Placeholder */
.no-data-placeholder {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
    text-align: center;
    padding: 1rem;
}

/* Missing Data Chips */
.missing-data-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    font-size: 0.75rem;
}

.missing-data-chip .chip-label {
    color: var(--text-secondary);
}

.missing-data-chip .chip-value {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

/* Responsive Stadium Scoreboard */
@media (max-width: 640px) {
    .stadium-scoreboard {
        gap: 1rem;
    }

    .score-box .score-digit {
        font-size: 1.8rem;
        min-width: 1.8rem;
    }

    .scoreboard-team .team-name {
        font-size: 0.9rem;
    }

    .trading-ticket .ticket-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================
   MATCH TIMELINE STYLES
   ========================================= */

.timeline-section {
    margin-top: 1rem;
}

.timeline-container {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 1rem;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.timeline-header .team-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.timeline-events {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.timeline-event {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
}

.timeline-event.home-event {
    justify-content: flex-start;
    margin-right: 40%;
}

.timeline-event.away-event {
    justify-content: flex-end;
    margin-left: 40%;
    flex-direction: row-reverse;
}

.timeline-event .event-time {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 2.5rem;
    font-family: 'JetBrains Mono', monospace;
}

.timeline-event .event-icon {
    font-size: 0.9rem;
}

.timeline-event .event-player {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}

.timeline-event.goal-event {
    border-left: 3px solid #10b981;
}

.timeline-event.away-event.goal-event {
    border-left: none;
    border-right: 3px solid #10b981;
}

.timeline-event.card-event.yellow {
    border-left: 3px solid #f59e0b;
}

.timeline-event.away-event.card-event.yellow {
    border-left: none;
    border-right: 3px solid #f59e0b;
}

.timeline-event.card-event.red {
    border-left: 3px solid #ef4444;
}

.timeline-event.away-event.card-event.red {
    border-left: none;
    border-right: 3px solid #ef4444;
}

/* =========================================
   MATCH STATS STYLES
   ========================================= */

.stats-section {
    margin-top: 1rem;
}

.stats-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stat-row {
    display: grid;
    grid-template-columns: 3rem 1fr 3rem;
    align-items: center;
    gap: 0.75rem;
}

.stat-value {
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.stat-value.home {
    text-align: right;
    color: #60a5fa;
}

.stat-value.away {
    text-align: left;
    color: #f472b6;
}

.stat-bar-container {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-bar-container .stat-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

.stat-bar .bar-home {
    background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
    transition: width 0.3s ease;
}

.stat-bar .bar-away {
    background: linear-gradient(90deg, #f472b6 0%, #ec4899 100%);
    transition: width 0.3s ease;
}

/* Icon color for clock */
.icon-clock {
    color: #a78bfa;
}

.icon-stats {
    color: #22d3ee;
}

/* =========================================
   EXPANDED MODEL CARDS
   ========================================= */

.model-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

.model-card-expanded {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.75rem;
    transition: all 0.2s ease;
}

.model-card-expanded.high {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.05);
}

.model-card-expanded.medium {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.05);
}

.model-card-expanded.low {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
}

.model-card-expanded .model-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.model-card-expanded .model-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.model-card-expanded .model-score {
    font-weight: 700;
    font-size: 0.9rem;
    font-family: 'JetBrains Mono', monospace;
}

.model-card-expanded.high .model-score {
    color: #10b981;
}

.model-card-expanded.medium .model-score {
    color: #f59e0b;
}

.model-card-expanded.low .model-score {
    color: #ef4444;
}

.model-predictions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pred-row {
    display: grid;
    grid-template-columns: 4rem 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.pred-row.correct {
    background: rgba(16, 185, 129, 0.1);
}

.pred-row.wrong {
    background: rgba(239, 68, 68, 0.1);
}

.pred-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.pred-value {
    color: var(--text-primary);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.pred-icon {
    font-weight: 700;
    font-size: 0.8rem;
}

.pred-row.correct .pred-icon {
    color: #10b981;
}

.pred-row.wrong .pred-icon {
    color: #ef4444;
}

@media (max-width: 768px) {
    .model-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pred-row {
        grid-template-columns: 3rem 1fr auto;
        font-size: 0.7rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* THE LEAK FINDER - Performance Audit Page Styles */
/* ═══════════════════════════════════════════════════════════════════════════════ */

.performance-audit-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.performance-audit {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Header */
.audit-header {
    text-align: center;
    margin-bottom: 1rem;
}

.audit-header h2 {
    font-size: 2rem;
    margin: 0;
    color: var(--text-primary);
}

.audit-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0.5rem 0 0 0;
}

/* Loading State */
.audit-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
    color: var(--text-secondary);
}

.audit-error {
    text-align: center;
    padding: 3rem;
}

.audit-error .error-icon {
    font-size: 3rem;
}

.btn-retry {
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

/* Summary Cards */
.audit-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.summary-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.summary-card.positive {
    border-color: rgba(16, 185, 129, 0.3);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), transparent);
}

.summary-card.negative {
    border-color: rgba(239, 68, 68, 0.3);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), transparent);
}

.summary-label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.summary-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.summary-card.positive .summary-value {
    color: #10b981;
}

.summary-card.negative .summary-value {
    color: #ef4444;
}

/* Advice Panel */
.advice-panel {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
}

.advice-panel h3 {
    margin: 0 0 1rem 0;
    color: #a78bfa;
}

.advice-list {
    margin: 0;
    padding: 0 0 0 1.5rem;
    list-style: none;
}

.advice-list li {
    padding: 0.5rem 0;
    color: var(--text-primary);
    font-size: 1rem;
    position: relative;
}

.advice-list li::before {
    content: "→";
    position: absolute;
    left: -1.5rem;
    color: #a78bfa;
}

/* Strengths & Leaks Grid */
.audit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.audit-column h3 {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
}

.strengths-column h3 {
    color: #10b981;
}

.leaks-column h3 {
    color: #ef4444;
}

.empty-state {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px dashed var(--border-color);
}

.empty-state.success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), transparent);
    border-color: rgba(16, 185, 129, 0.3);
    color: #10b981;
}

/* Pattern Cards (Strengths & Leaks) */
.pattern-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
}

.strength-card {
    border-left: 4px solid #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), transparent);
}

.leak-card {
    border-left: 4px solid #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), transparent);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.card-emoji {
    font-size: 1.5rem;
}

.card-category {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.card-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-item.positive .stat-value {
    color: #10b981;
}

.stat-item.negative .stat-value {
    color: #ef4444;
}

.stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.card-footer {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Add Bet Section */
.add-bet-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
}

.add-bet-section h3 {
    margin: 0 0 1rem 0;
}

.add-bet-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.tab-btn {
    padding: 0.75rem 1.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Add Bet Form */
.add-bet-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.form-group input,
.form-group select {
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.btn-add-bet {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--accent-primary);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-bet:hover {
    background: #1e9a66;
    transform: translateY(-2px);
}

.btn-icon {
    font-size: 1.25rem;
}

/* CSV Uploader */
.csv-uploader {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dropzone {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 3rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dropzone:hover,
.dropzone.dragover {
    border-color: var(--accent-primary);
    background: rgba(36, 180, 126, 0.05);
}

.dropzone-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.dropzone-hint {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.csv-format-help {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: 8px;
}

.csv-format-help h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
}

.csv-format-help code {
    display: block;
    background: var(--bg-primary);
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    overflow-x: auto;
    margin-bottom: 0.5rem;
}

.csv-format-help p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.csv-preview {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: 8px;
}

.csv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.csv-table th,
.csv-table td {
    padding: 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.csv-table th {
    color: var(--text-secondary);
    font-weight: 500;
}

.more-rows {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

.btn-upload-csv {
    padding: 1rem;
    background: var(--accent-primary);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    cursor: pointer;
}

.btn-upload-csv:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Recent Bets Section */
.recent-bets-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
}

.recent-bets-section h3 {
    margin: 0 0 1rem 0;
}

.recent-bets-table {
    width: 100%;
    border-collapse: collapse;
}

.recent-bets-table th,
.recent-bets-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.recent-bets-table th {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.85rem;
}

.match-cell {
    display: flex;
    flex-direction: column;
}

.team-names {
    font-weight: 500;
}

.league-name {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.status-won {
    color: #10b981;
}

.status-lost {
    color: #ef4444;
}

.status-pending {
    color: #f59e0b;
}

.positive {
    color: #10b981;
}

.negative {
    color: #ef4444;
}

.btn-delete-bet {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.btn-delete-bet:hover {
    opacity: 1;
}

.more-bets {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 1rem;
}

.error-state {
    color: #ef4444;
    text-align: center;
    padding: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .audit-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .audit-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .card-stats {
        justify-content: space-around;
    }
}

/* Hidden utility */
.hidden {
    display: none !important;
}

/* ============================================
   BASKETBALL-SPECIFIC STYLES
   ============================================ */

/* Basketball View Container */
.match-list.basketball-view {
    background: var(--bg-secondary);
}

/* Basketball Row */
.match-row.basketball-row {
    display: grid;
    grid-template-columns: 80px 1fr 200px 80px;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.match-row.basketball-row:hover {
    background: rgba(245, 158, 11, 0.08);
}

/* Quarter Badge */
.match-quarter-badge {
    background: var(--accent-primary);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    animation: pulse 2s infinite;
}

/* Basketball Score */
.basketball-score {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 40px;
    text-align: center;
}

/* Basketball Odds Layout */
.match-col-odds.basketball-odds {
    display: flex;
    gap: 0.5rem;
}

.match-col-odds.basketball-odds .odds-btn {
    flex: 1;
    text-align: center;
}

/* Total Column */
.match-col-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.match-col-total .total-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.match-col-total .total-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-primary);
}

/* Basketball Theme adjustments */
body.theme-basketball .ticker-header,
body.theme-basketball .live-games-ticker {
    background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
    border-color: rgba(245, 158, 11, 0.3);
}

body.theme-basketball .ticker-odd {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-primary);
}

body.theme-basketball .nav-btn-signup {
    background: var(--accent-primary);
}

body.theme-basketball .nav-btn-signup:hover {
    background: #d97706;
}

/* ============================================
   REGISTRATION GATE MODAL
   ============================================ */

.registration-gate-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.registration-gate-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.registration-gate-modal {
    background: rgba(45, 50, 55, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    padding: 3rem;
    max-width: 420px;
    width: 90%;
    text-align: center;
    transform: translateY(30px) scale(0.95);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.registration-gate-overlay.visible .registration-gate-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.registration-gate-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    display: block;
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.registration-gate-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.75rem 0;
    letter-spacing: -0.5px;
}

.registration-gate-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

.registration-gate-subtitle strong {
    color: var(--accent-primary);
    font-weight: 600;
}

.registration-gate-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    text-align: left;
}

.registration-gate-features li {
    padding: 0.6rem 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.registration-gate-features li:last-child {
    border-bottom: none;
}

.registration-gate-cta {
    width: 100%;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, var(--accent-primary), #0d9668);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
    font-family: inherit;
}

.registration-gate-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
}

.registration-gate-cta:active {
    transform: translateY(0);
}

.registration-gate-secondary {
    margin-top: 1.25rem;
}

.registration-gate-secondary a {
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.registration-gate-secondary a:hover {
    color: #34d399;
}

.registration-gate-dismiss {
    margin-top: 1rem;
}

.registration-gate-dismiss a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.registration-gate-dismiss a:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* Basketball theme adjustment */
body.theme-basketball .registration-gate-cta {
    background: linear-gradient(135deg, var(--accent-primary), #d97706);
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
}

body.theme-basketball .registration-gate-cta:hover {
    box-shadow: 0 8px 30px rgba(245, 158, 11, 0.4);
}

body.theme-basketball .registration-gate-secondary a {
    color: var(--accent-primary);
}

body.theme-basketball .registration-gate-secondary a:hover {
    color: #fbbf24;
}