/* ══════════════════════════════════════════
   Global Dark Theme (default)
   ══════════════════════════════════════════ */

:root,
[data-theme="dark"] {
    --bg: #0f1623;
    --panel: #1a2236;
    --panelSoft: #1e2840;
    --panelDeep: rgba(15, 23, 42, 0.5);
    --text: #e2e8f0;
    --textSoft: #c8d5e4;
    --muted: #94a3b8;
    --mutedFaint: #64748b;
    --border: #2a3550;
    --borderSoft: rgba(148, 163, 184, 0.10);
    --blue: #3b82f6;
    --blueLight: #60a5fa;
    --red: #ef4444;
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.30);
    --shadowSoft: 0 8px 18px rgba(0, 0, 0, 0.20);
    --hoverShadow: 0 12px 40px rgba(59, 130, 246, 0.12), 0 4px 12px rgba(0, 0, 0, 0.3);
    --hoverGlow: rgba(255, 255, 255, 0.06);
    --radius: 16px;
    --radiusSm: 12px;
    --navGlass: rgba(15, 22, 35, 0.3);
    --navGlassScrolled: rgba(15, 22, 35, 0.85);
    --navBorder: rgba(148, 163, 184, 0.08);
    --navBorderScrolled: rgba(148, 163, 184, 0.12);
    --mobileMenu: rgba(26, 34, 54, 0.95);
    --overlayBg: rgba(0, 0, 0, 0.5);
    --footerBg: rgba(15, 23, 42, 0.6);
    --tooltipBg: #1e293b;
    --tooltipText: #e2e8f0;
    --tooltipBorder: rgba(148, 163, 184, 0.15);
    color-scheme: dark;
}

/* ══════════════════════════════════════════
   Light Theme
   ══════════════════════════════════════════ */

[data-theme="light"] {
    --bg: #e8ecf4;
    --panel: #ffffff;
    --panelSoft: #f0f2f8;
    --panelDeep: rgba(220, 225, 238, 0.6);
    --text: #1a2236;
    --textSoft: #3d4f66;
    --muted: #5b6b82;
    --mutedFaint: #7a8ba0;
    --border: #d0d6e0;
    --borderSoft: rgba(100, 116, 139, 0.12);
    --blue: #2563eb;
    --blueLight: #3b82f6;
    --red: #dc2626;
    --shadow: 0 4px 16px rgba(30, 40, 60, 0.08), 0 1px 4px rgba(30, 40, 60, 0.05);
    --shadowSoft: 0 2px 8px rgba(30, 40, 60, 0.05);
    --hoverShadow: 0 8px 28px rgba(37, 99, 235, 0.08), 0 2px 8px rgba(30, 40, 60, 0.06);
    --hoverGlow: rgba(0, 0, 0, 0.03);
    --radius: 16px;
    --radiusSm: 12px;
    --navGlass: rgba(255, 255, 255, 0.7);
    --navGlassScrolled: rgba(255, 255, 255, 0.92);
    --navBorder: rgba(100, 116, 139, 0.12);
    --navBorderScrolled: rgba(100, 116, 139, 0.18);
    --mobileMenu: rgba(255, 255, 255, 0.97);
    --overlayBg: rgba(30, 40, 60, 0.3);
    --footerBg: rgba(240, 242, 248, 0.8);
    --tooltipBg: #ffffff;
    --tooltipText: #1a2236;
    --tooltipBorder: rgba(100, 116, 139, 0.2);
    color-scheme: light;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    transition: background 0.3s ease, color 0.3s ease;
    /* Never let the document scroll horizontally. Any element that's briefly wider
       than the screen (a wide card, a row of chips) would otherwise expand the mobile
       LAYOUT viewport, and every position:fixed element sized to 100%/right:0 (the
       glass navbar, the bottom tab bar, the hamburger menu overlay) would stretch to
       the document width — pushing their right edge off-screen until you scroll
       sideways. `clip` kills that horizontal scroll WITHOUT creating a scroll
       container, so it doesn't break the position:sticky elements on other pages
       (Rankings table headers, Account tabs) the way `overflow-x: hidden` would. */
    overflow-x: clip;
    max-width: 100%;
}

a, .btn-link {
    color: var(--blue);
}

button.btn-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.btn-primary {
    color: #fff;
    background-color: #2563eb;
    border-color: #1d4ed8;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem rgba(15, 22, 35, 0.5), 0 0 0 0.25rem rgba(59, 130, 246, 0.4);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #ef4444;
}

.blazor-error-boundary {
    background: var(--panel, #1a2236);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 10px;
    padding: 24px;
    margin: 16px 0;
    text-align: center;
    color: var(--muted, #94a3b8);
}

    .blazor-error-boundary::after {
        content: "Something went wrong loading this section. Please refresh the page.";
        font-size: 0.9rem;
        line-height: 1.5;
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ══════════════════════════════════════════
   Bootstrap Dark Overrides
   ══════════════════════════════════════════ */

.form-control, .form-select {
    background-color: var(--panelSoft);
    color: var(--text);
    border-color: var(--border);
}

.form-control:focus, .form-select:focus {
    background-color: var(--panel);
    color: var(--text);
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ══════════════════════════════════════════
   Page Transitions & Animations
   ══════════════════════════════════════════ */

article.content {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.scroll-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ══════════════════════════════════════════
   Card Hover Effects
   ══════════════════════════════════════════ */

.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.15), 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ══════════════════════════════════════════
   Auth pages (SignIn / SignUp)
   ══════════════════════════════════════════ */

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--panel);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border);
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.25rem;
    text-align: center;
}

.auth-subtitle {
    font-size: 0.88rem;
    color: var(--muted);
    text-align: center;
    margin: 0 0 1.5rem;
}

.auth-error {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: #ef4444;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.auth-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.auth-email-hint {
    color: #60a5fa;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    word-break: break-all;
}

.verification-code-input {
    font-size: 1.5rem;
    letter-spacing: 8px;
    text-align: center;
    font-weight: 600;
}

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

.form-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.35rem;
}

.form-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.form-label-row .form-label {
    margin-bottom: 0;
}

.form-helper-link {
    font-size: 0.78rem;
    font-weight: 500;
    color: #818cf8;
    text-decoration: none;
}

.form-helper-link:hover {
    text-decoration: underline;
}

[data-theme="light"] .form-helper-link {
    color: #4f46e5;
}

.auth-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.form-input {
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--panelSoft);
    color: var(--text);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.form-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    background: var(--panel);
}

.form-input::placeholder {
    color: var(--muted);
}

.btn-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.7rem 1rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, box-shadow 0.15s;
}

.btn-primary-auth {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
    margin-top: 0.5rem;
}

.btn-primary-auth:hover {
    background: linear-gradient(135deg, #4338ca, #4f46e5);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.btn-google {
    background: var(--panelSoft);
    color: var(--text);
    border: 1.5px solid var(--border);
}

.btn-google:hover {
    background: var(--panel);
    border-color: var(--muted);
    text-decoration: none;
    color: var(--text);
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: 1.25rem 0;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.auth-divider span {
    padding: 0 0.75rem;
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 500;
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.auth-footer a {
    color: #818cf8;
    font-weight: 600;
    text-decoration: none;
}

.auth-footer a:hover {
    text-decoration: underline;
}

/* League name highlights in model descriptions (injected via MarkupString) */
.leagueHighlight {
    color: #fbbf24;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════
   Light Theme — Specific Overrides
   ══════════════════════════════════════════ */

[data-theme="light"] .btn-primary {
    background-color: #2563eb;
    border-color: #1d4ed8;
}

[data-theme="light"] .btn:focus,
[data-theme="light"] .btn:active:focus,
[data-theme="light"] .form-control:focus {
    box-shadow: 0 0 0 0.1rem rgba(30, 40, 60, 0.08), 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}

[data-theme="light"] .hover-lift:hover {
    box-shadow: 0 12px 40px rgba(37, 99, 235, 0.10), 0 4px 12px rgba(30, 40, 60, 0.08);
}

[data-theme="light"] .auth-card {
    box-shadow: 0 20px 60px rgba(30, 40, 60, 0.12);
}

/* ── Upgrade Card (shared by GateCard and Account page) ── */

.upgradeCard {
    max-width: 520px;
    margin: 40px auto;
    background: var(--panel);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.upgradeCard::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    padding: 1px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

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

/* Compact subtitle used by GateCard.razor when Premium=true. The full pitch lives
   on /premium now — this is just a one-liner to set context before the CTA. */
.upgradeSubtitle {
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0 0 22px 0;
}

.upgradeIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(251, 191, 36, 0.1);
    flex-shrink: 0;
}

.upgradeTitle {
    font-size: 1.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.01em;
}

.perksList {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 24px;
}

.perkItem {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.perkIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(251, 191, 36, 0.08);
    flex-shrink: 0;
    margin-top: 2px;
}

.perkText {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.perkTitle {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
}

.perkDesc {
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.5;
}

a.upgradeCta,
button.upgradeCta {
    display: block;
    width: 100%;
    padding: 14px 24px;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #451a03;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
}

a.upgradeCta:hover,
button.upgradeCta:hover {
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.35);
    transform: translateY(-1px);
    text-decoration: none;
    color: #451a03;
}

@media (max-width: 600px) {
    .upgradeCard {
        margin: 24px 16px;
        padding: 24px 20px;
    }

    .upgradeTitle {
        font-size: 1.05rem;
    }
}

/* ── Gate Card (shown to unauthenticated users on protected pages) ── */

.gateCard {
    max-width: 480px;
    margin: 60px auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 48px 36px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30);
}

.gateIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(251, 191, 36, 0.1);
    margin-bottom: 8px;
}

.gateTitle {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
    margin: 0;
}

.gateText {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.65;
    max-width: 380px;
    margin: 4px 0 4px;
}

.gateFeatures {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0 16px;
}

.gateFeature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.gateFeature svg {
    flex-shrink: 0;
}

.gateActions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 280px;
    margin-top: 4px;
}

.gateCta {
    display: block;
    width: 100%;
    padding: 13px 24px;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    letter-spacing: 0.02em;
}

.gateCta:hover {
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
    text-decoration: none;
    color: #fff;
}

.gateCtaSecondary {
    background: linear-gradient(135deg, #1e40af, #1d4ed8);
    opacity: 0.85;
}

.gateCtaSecondary:hover {
    opacity: 1;
    box-shadow: 0 4px 20px rgba(30, 64, 175, 0.35);
}

@media (max-width: 600px) {
    .gateCard {
        margin: 30px 16px;
        padding: 36px 24px;
    }

    .gateTitle {
        font-size: 1.1rem;
    }
}

[data-theme="light"] .gateCard {
    box-shadow: 0 12px 30px rgba(30, 40, 60, 0.12);
}

[data-theme="light"] .blazor-error-boundary {
    background: #fef2f2;
    border-color: rgba(239, 68, 68, 0.2);
    color: #64748b;
}

[data-theme="light"] .auth-footer a {
    color: #4f46e5;
}

[data-theme="light"] .leagueHighlight {
    color: #b45309;
}

[data-theme="light"] .validation-message {
    color: #dc2626;
}

/* ══════════════════════════════════════════
   Theme Toggle Icon Visibility
   ══════════════════════════════════════════ */

/* Dark mode: show sun icon (click to go light) */
[data-theme="dark"] .icon-sun  { display: inline; }
[data-theme="dark"] .icon-moon { display: none; }
[data-theme="dark"] .theme-label-dark  { display: inline; }
[data-theme="dark"] .theme-label-light { display: none; }

/* Light mode: show moon icon (click to go dark) */
[data-theme="light"] .icon-sun  { display: none; }
[data-theme="light"] .icon-moon { display: inline; }
[data-theme="light"] .theme-label-dark  { display: none; }
[data-theme="light"] .theme-label-light { display: inline; }

/* Light theme: softer backgrounds for glass elements */
[data-theme="light"] .theme-toggle:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* ── Global Loading Indicator ── */
.pageLoader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 20px;
}

.pageLoaderRing {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid rgba(99, 102, 241, 0.15);
    border-top-color: #6366f1;
    animation: loaderSpin 0.8s linear infinite;
}

.pageLoaderRing::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(99, 102, 241, 0.3);
    animation: loaderSpin 1.6s linear infinite reverse;
}

.pageLoaderText {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.04em;
    animation: loaderPulse 1.5s ease-in-out infinite;
}

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

@keyframes loaderPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ── Draft Prediction Loading ── */
.draftPredLoading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 16px;
    margin: 8px 0;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 10px;
}

.draftPredLoadingRing {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2.5px solid rgba(99, 102, 241, 0.15);
    border-top-color: #6366f1;
    animation: loaderSpin 0.8s linear infinite;
    flex-shrink: 0;
}

.draftPredLoadingRing::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-top-color: rgba(99, 102, 241, 0.3);
    animation: loaderSpin 1.6s linear infinite reverse;
}

.draftPredLoadingText {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    animation: loaderPulse 1.5s ease-in-out infinite;
}

/* ── Skeleton Shimmer ── */
@keyframes skeletonShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeletonBar {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(148,163,184,0.08) 25%, rgba(148,163,184,0.16) 50%, rgba(148,163,184,0.08) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.8s ease-in-out infinite;
}

.skeletonBar--sm { height: 12px; }
.skeletonBar--md { height: 20px; }
.skeletonBar--lg { height: 32px; }
.skeletonBar--w60 { width: 60%; }
.skeletonBar--w80 { width: 80%; }
.skeletonBar--w100 { width: 100%; }

/* ── Section Descriptions (static SEO content) ── */
.sectionDesc {
    color: rgba(148,163,184,0.85);
    font-size: 0.93rem;
    line-height: 1.6;
    max-width: 720px;
    margin: 0 auto 20px;
    padding: 0 4px;
    text-align: center;
}

/* ── Sandbox Feature List ── */
.featureList {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 16px auto 28px;
    max-width: 800px;
}

.featureItem {
    background: linear-gradient(135deg, rgba(30,40,64,0.8), rgba(26,34,54,0.5));
    border: 1px solid rgba(59,130,246,0.18);
    border-radius: 12px;
    padding: 18px 22px;
    flex: 1 1 220px;
    max-width: 260px;
    transition: border-color 0.2s ease, transform 0.15s ease;
}

.featureItem:hover {
    border-color: rgba(59,130,246,0.35);
    transform: translateY(-2px);
}

.featureItem h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px;
    letter-spacing: 0.01em;
}

.featureItem p {
    font-size: 0.82rem;
    color: rgba(148,163,184,0.75);
    margin: 0;
    line-height: 1.5;
}

/* ── Navigation Spinner (on <html> — survives Blazor DOM patching) ── */
html.nav-loading::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid rgba(59,130,246,0.15);
    border-top-color: #3b82f6;
    border-radius: 50%;
    z-index: 99999;
    pointer-events: none;
    animation: navSpin 0.7s linear infinite;
}

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

/* ══════════════════════════════════════════
   Error / Not-Found Pages
   ══════════════════════════════════════════ */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 40px 20px;
}
.error-icon {
    margin-bottom: 24px;
    opacity: 0.85;
}
.error-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}
.error-message {
    font-size: 1rem;
    color: rgba(255,255,255,0.55);
    max-width: 420px;
    line-height: 1.6;
    margin: 0 0 32px;
}
.error-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.error-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}
.error-btn:hover { transform: translateY(-1px); }
.error-btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
}
.error-btn-primary:hover { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
.error-btn-secondary {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.1);
}
.error-btn-secondary:hover { background: rgba(255,255,255,0.1); }
.error-request-id {
    margin-top: 32px;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.25);
    font-family: monospace;
}

/* ══════════════════════════════════════════════════════════
   Shared Prediction Bars & Insight Cards
   Used by: Home (live card, upcoming), LiveMatchDetail, MatchDetail
   ══════════════════════════════════════════════════════════ */

.upcomingPredictions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--panelDeep);
    border: 1px solid var(--borderSoft);
    border-radius: 8px;
}

.lcPredTeams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 2px 0 4px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.lcPredTeamSide {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.lcPredTeamRight { justify-content: flex-end; }

.lcPredTeamLogo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.lcPredTeamNameBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.lcPredTeamName {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lcPredSpacer { width: 8px; flex-shrink: 0; }

.upPredRow {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Top padding leaves room for the meta-learner base-prediction marker label
       that hovers above the bar (when LightGBM/PCA Sweep have a meta delta). */
    padding-top: 14px;
}

.upPredModel {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 68px;
    flex-shrink: 0;
}

.upPredModel.upPredFastTree { color: #60a5fa; }
.upPredModel.upPredLightGBM { color: #fbbf24; }
.upPredModel.upPredPcaSweep { color: #a78bfa; }

.upPredBar {
    flex: 1;
    display: flex;
    height: 20px;
    border-radius: 4px;
    /* overflow visible so the meta-learner marker label can extend above the bar */
    position: relative;
    gap: 1px;
}

.upPredBarLeft {
    background: linear-gradient(90deg, #1e40af, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    border-radius: 4px 0 0 4px;
}

.upPredBarRight {
    background: linear-gradient(90deg, #e45858, #ef4444);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    border-radius: 0 4px 4px 0;
}

.upPredPct {
    font-size: 0.6rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.upPredLocked {
    opacity: 0.5;
    position: relative;
}

.upPredLockedOverlay {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 20px;
    background: rgba(139, 92, 246, 0.08);
    border: 1px dashed rgba(139, 92, 246, 0.3);
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 800;
    color: #a78bfa;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Clickable variant — applied wherever an .upPredLockedOverlay also navigates
   to /premium on click. Mirrored in Home.razor.css for the scoped Home spotlight
   styles; this global copy covers LiveMatchDetail and any other surfaces that
   render the overlay outside Home's scoped CSS. */
.upPredLockedLink {
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    text-decoration: none;
}
.upPredLockedLink:hover,
.upPredLockedLink:focus-visible {
    background: rgba(139, 92, 246, 0.18);
    border-color: rgba(139, 92, 246, 0.55);
    color: #c4b5fd;
    transform: translateY(-1px);
    outline: none;
}

.upPredConsensus {
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--borderSoft);
}

.upPredConsensus .upPredModel { font-size: 0.7rem; color: #22d3ee; }
.upPredConsensus .upPredBar { height: 24px; }
.upPredConsensus .upPredPct { font-size: 0.7rem; }

.upPredBarLeft.upPredFavored {
    background: linear-gradient(90deg, #1d4ed8, #3b82f6);
    box-shadow: inset 0 0 6px rgba(59,130,246,0.4);
}
.upPredBarRight.upPredFavored {
    background: linear-gradient(90deg, #b91c1c, #ef4444);
    box-shadow: inset 0 0 6px rgba(239,68,68,0.4);
}

/* Meta-learner "Enhanced" badge — small pill (still used inside the driver tabs) */
.enhancedBadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid rgba(148,163,184,0.25);
    background: rgba(15,23,42,0.45);
    cursor: help;
    margin-left: 6px;
    white-space: nowrap;
    line-height: 1;
}
.enhancedBadge .enhancedLabel {
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.62rem;
}
.enhancedBadge .enhancedDelta {
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
}
.enhancedBadge.enhanced-blue {
    border-color: rgba(37,99,235,0.35);
    background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(37,99,235,0.04));
}
.enhancedBadge.enhanced-blue .enhancedDelta { color: rgba(96,165,250,1); }
.enhancedBadge.enhanced-red {
    border-color: rgba(220,38,38,0.35);
    background: linear-gradient(135deg, rgba(220,38,38,0.10), rgba(220,38,38,0.04));
}
.enhancedBadge.enhanced-red .enhancedDelta { color: rgba(248,113,113,1); }

/* Meta-learner base-prediction marker — overlays the prediction bar at the position
   the BASE model would have predicted, with the delta shown above. Visualizes the
   meta-learner's contribution as a "from here to here" shift on the bar itself. */
.metaBaseMarker {
    position: absolute;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    cursor: help;
    z-index: 5;
}
.metaBaseTick {
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 4px rgba(0,0,0,0.7), 0 0 1px rgba(0,0,0,0.9);
}
.metaBaseLabel {
    position: absolute;
    top: -18px;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.metaBaseMarker.enhanced-blue .metaBaseLabel {
    color: #ffffff;
    background: rgba(37,99,235,0.92);
    border: 1px solid rgba(96,165,250,0.7);
}
.metaBaseMarker.enhanced-red .metaBaseLabel {
    color: #ffffff;
    background: rgba(220,38,38,0.92);
    border: 1px solid rgba(248,113,113,0.7);
}
/* Add a small downward pointer to connect the label to the tick */
.metaBaseLabel::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    color: inherit;
}
.metaBaseMarker.enhanced-blue .metaBaseLabel::after { border-top-color: rgba(37,99,235,0.92); }
.metaBaseMarker.enhanced-red .metaBaseLabel::after { border-top-color: rgba(220,38,38,0.92); }

/* ============================================================
   Centralized TooltipPopover component
   - Clickable + hoverable trigger button
   - Stylish floating popover with shadow + arrow
   - Positions: top (default), bottom, left, right
   - No JavaScript: uses :hover, :focus, and :focus-within
   ============================================================ */
.tooltipPopover {
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    /* Outline only on focus-visible inside the trigger, not on the wrapper */
}
.tooltipTrigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(30, 41, 59, 0.65);
    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    line-height: 1;
    transition: all 0.15s ease;
    font-family: inherit;
}
.tooltipTrigger:hover,
.tooltipTrigger:focus-visible {
    background: rgba(124, 58, 237, 0.85);
    border-color: rgba(167, 139, 250, 0.7);
    color: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
    outline: none;
}

/* Popover panel */
.tooltipContent {
    position: absolute;
    z-index: 1000;
    display: none;
    width: max-content;
    max-width: 320px;
    padding: 12px 14px;
    border-radius: 8px;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(124, 58, 237, 0.5);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(148, 163, 184, 0.08);
    color: #e2e8f0;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    pointer-events: none; /* prevents popover from stealing hover from the trigger */
}
.tooltipContent .tooltipTitle {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #c4b5fd;
    margin-bottom: 6px;
}
.tooltipContent .tooltipBody {
    display: block;
    white-space: pre-line;   /* honour \n newlines for multi-step explanations */
}
/* Show on hover OR when the trigger has focus (sticky click). */
.tooltipPopover:hover .tooltipContent,
.tooltipPopover:focus-within .tooltipContent {
    display: block;
}

/* Position variants */
.tooltipPopover.tooltip-pos-top .tooltipContent {
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
}
.tooltipPopover.tooltip-pos-bottom .tooltipContent {
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
}
.tooltipPopover.tooltip-pos-left .tooltipContent {
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
}
.tooltipPopover.tooltip-pos-right .tooltipContent {
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
}

/* Arrow */
.tooltipContent .tooltipArrow {
    position: absolute;
    width: 0;
    height: 0;
}
.tooltipPopover.tooltip-pos-top .tooltipArrow {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #0f172a;
    filter: drop-shadow(0 1px 0 rgba(124, 58, 237, 0.5));
}
.tooltipPopover.tooltip-pos-bottom .tooltipArrow {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #1e293b;
    filter: drop-shadow(0 -1px 0 rgba(124, 58, 237, 0.5));
}
.tooltipPopover.tooltip-pos-left .tooltipArrow {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid #0f172a;
}
.tooltipPopover.tooltip-pos-right .tooltipArrow {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid #1e293b;
}

/* Mobile: prevent off-screen tooltips by widening max-width and centering */
@media (max-width: 640px) {
    .tooltipContent { max-width: min(280px, calc(100vw - 32px)); font-size: 0.78rem; }
}

.upPredTimestamp {
    font-size: 0.6rem;
    color: var(--mutedFaint);
    text-align: right;
    margin-top: 2px;
}

/* ── Bet365 odds + edge analysis block ─────────────────────────── */
.oddsBlock {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.1);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.oddsHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.oddsSourceLabel {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mutedFaint);
}

.oddsPrices {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
}

.oddsPrice {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text);
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(148, 163, 184, 0.04);
}

.oddsTeamLogo {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 2px;
}

.oddsPriceTeam {
    font-weight: 600;
    color: var(--muted);
}

.oddsPriceVal {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Consensus pick → green tint on the bet365 odds. The other side → red tint.
   This is the user-facing "this is the side worth backing" cue right next to
   the raw price, mirroring the model's view in a single glance. */
.oddsPrice.oddsPickGood {
    background: rgba(74, 222, 128, 0.10);
    box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.25);
}
.oddsPrice.oddsPickGood .oddsPriceVal { color: #4ade80; }

.oddsPrice.oddsPickBad {
    background: rgba(248, 113, 113, 0.08);
    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.20);
}
.oddsPrice.oddsPickBad .oddsPriceVal { color: #f87171; }

.oddsPriceDot {
    color: var(--mutedFaint);
}

.oddsPricesBlurred .oddsPriceVal {
    filter: blur(4px);
    opacity: 0.5;
}

/* Generic edge-value colours (used across odds-related elements). */
.edgePositive { color: #4ade80; }
.edgeNegative { color: #f87171; }
.edgeNeutral  { color: var(--muted); }

/* ── Fair-odds table (the entire breakdown UI for premium users) ──
   Per row: shared label column + two team columns. Each model places its
   fair-odds estimate in ONLY the column for the side it picks as value,
   leaving the other cell empty. Disagreement between models is visible at
   a glance: numbers shift between columns. When neither side has positive
   EV, the row shows a "No edge" message spanning both team columns. */
.fairOddsTable {
    display: grid;
    grid-template-columns: 1fr 5rem 5rem;
    gap: 2px 12px;
    padding: 10px 12px 12px;
    align-items: center;
    border-top: 1px dashed rgba(148, 163, 184, 0.12);
}

.foHeaderRow { display: contents; }
.foHeaderLabel {}
.foHeaderTeam {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.02em;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.foHeaderLogo {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 3px;
}

.foActualRow { display: contents; }
.foActualRow .foRowLabel {
    padding: 8px 0;
    font-size: 0.82rem;
    color: var(--text);
}
.foActualVal {
    text-align: right;
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    padding: 8px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.foModelRow { display: contents; }
.foRowLabel {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    padding: 6px 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.foRowLabel.upPredFastTree  { color: #60a5fa; }
.foRowLabel.upPredLightGBM  { color: #fbbf24; }
.foRowLabel.upPredPcaSweep  { color: #a78bfa; }
.foRowLabel.upPredConsensus { color: #22d3ee; }

/* The model row's value chip spans BOTH team columns so the row reads as a
   single self-contained "pick" badge — no empty cell to look unbalanced.
   Content layout: team identity (logo + code) on the LEFT, fair-odds /
   EV stacked vertically on the RIGHT. Background colour reflects EV sign
   on the picked side. */
.foModelVal {
    grid-column: 2 / -1;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 8px;
    margin: 2px 0;
    font-variant-numeric: tabular-nums;
    min-width: 0;
}
.foModelTeamLogo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;
}
.foModelTeam {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex: 1;             /* pushes the stack to the right edge */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.foModelStack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.05;
    flex-shrink: 0;
}
/* Free-user variant: one lock chip spans both team columns so the layout
   matches the premium card structurally without leaking the model's pick. */
.foModelValLocked {
    grid-column: 2 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 8px;
    margin: 2px 0;
    border-radius: 6px;
    background: rgba(148, 163, 184, 0.06);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.foModelValLocked svg { opacity: 0.7; }
/* Clickable variant — locked rows now navigate to /premium. Without these styles
   the anchor inherits "blue underlined link" defaults which fight the muted-pill
   look. Keep the same chrome as the static state, just add hover affordance. */
.foModelValLockedLink {
    cursor: pointer;
    text-decoration: none;
    color: var(--muted);
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.foModelValLockedLink:hover,
.foModelValLockedLink:focus-visible {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.35);
    outline: none;
    text-decoration: none;
}
.foModelValLockedLink:hover svg { opacity: 1; }
.foModelVal.foValueGood {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.10);
    box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.22);
}
.foModelVal.foValueGood .foModelEdge { color: rgba(74, 222, 128, 0.9); }

/* Uncertain +EV pill — positive edge but the model has been less reliable in
   this league than the LowAccuracyThreshold (currently 65%, 10-sample minimum).
   Same shape as foValueGood, amber palette instead of green. Negative-EV pills
   stay red regardless (foValueBad below). */
.foModelVal.foValueUncertain {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.10);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.30);
}
.foModelVal.foValueUncertain .foModelEdge { color: rgba(245, 158, 11, 0.95); }

.foModelVal.foValueBad {
    color: #f87171;
    background: rgba(248, 113, 113, 0.08);
    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.20);
}
.foModelVal.foValueBad .foModelEdge { color: rgba(248, 113, 113, 0.9); }

.foModelVal.foValueNeutral {
    color: var(--muted);
    background: rgba(148, 163, 184, 0.05);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}
.foModelVal.foValueNeutral .foModelEdge { color: var(--mutedFaint); }

.foModelFair {
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}
.foModelEdge {
    font-size: 0.62rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
    line-height: 1.05;
    margin-top: 1px;
}

.foSummaryRow {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.83rem;
    line-height: 1.4;
}
.foSummaryRowValue {
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.20);
}
.foSummaryRowNoValue {
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.15);
}
/* Locked variant of the summary verdict for free users — same shape, dimmed. */
.foSummaryRowLocked {
    background: rgba(148, 163, 184, 0.05);
    border: 1px dashed rgba(148, 163, 184, 0.22);
}
.foSummaryRowLocked .foSummaryIcon {
    color: var(--muted);
    display: inline-flex;
    align-items: center;
}
.foSummaryRowLocked .foSummaryText { color: var(--muted); }
.foSummaryRowLocked .foSummaryText strong { color: var(--text); }
.foSummaryIcon {
    font-size: 1.1rem;
    color: #4ade80;
    flex-shrink: 0;
}
.foSummaryText {
    flex: 1;
    color: var(--text);
}
.foSummaryTextMuted { color: var(--muted); }
.foSummaryText strong { color: var(--text); font-weight: 700; }
.foSummaryEdge {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
}

@media (max-width: 640px) {
    .fairOddsTable { grid-template-columns: 1fr 4rem 4rem; padding: 8px 10px 10px; }
    .foModelFair { font-size: 0.85rem; }
    .foActualVal { font-size: 0.85rem; }
    .foModelVal { gap: 4px; padding: 4px 6px; }
    .foModelTeamLogo { width: 16px; height: 16px; }
    .foModelTeam { font-size: 0.72rem; }
    .foModelEdge { font-size: 0.58rem; }

    /* ── Collapsible odds block on mobile ──
       The upcoming-card oddsBlock gets long fast on phones — Market Odds +
       FastTree/LightGBM/PCA/Consensus rows + summary stack to 6-8 lines and
       push the whole card below the fold. Below 640px we keep the .oddsHeader
       always visible (one-line "Market · prematch  TEAM 1.40 · GAME 2.75"
       teaser), and collapse the .fairOddsTable behind the chevron. The class
       .oddsBlockExpanded is toggled per-card via Home.razor state. Desktop
       (>=641px) never enters this media query, so it always sees the full
       table — no behavior change. */
    .oddsHeader {
        cursor: pointer;
        user-select: none;
    }
    .oddsBlock .fairOddsTable { display: none; }
    .oddsBlock.oddsBlockExpanded .fairOddsTable { display: grid; }

    .oddsChevron {
        display: inline-flex;
        align-items: center;
        margin-left: auto;
        padding-left: 8px;
        color: var(--muted);
        transition: transform 0.18s ease;
        flex-shrink: 0;
    }
    .oddsBlockExpanded .oddsChevron { transform: rotate(180deg); }
}

/* Desktop: hide the chevron entirely. It's a mobile-only affordance —
   keeping it in the DOM (so the markup stays simple) but invisible. */
@media (min-width: 641px) {
    .oddsChevron { display: none; }
}

.predictGenerating {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

.livePredIcon {
    font-size: 0.75rem;
    font-weight: 700;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.livePredCorrect { background: rgba(74,222,128,0.06); }
.livePredWrong { background: rgba(248,113,113,0.06); }
.livePredUncertain { opacity: 0.5; }

.livePredCorrect .livePredIcon { color: #4ade80; }
.livePredWrong .livePredIcon { color: #f87171; }
.livePredUncertainIcon { color: #fbbf24; }

.livePredLabel {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.seriesPredLabel {
    justify-content: center;
    color: #e2e8f0;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
}

/* ── Model Insight Tags ── */

.modelInsightTag {
    font-size: 0.5rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex-shrink: 0;
}

.tagLeague {
    background: rgba(74,222,128,0.15);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,0.3);
}

.tagConf {
    background: rgba(96,165,250,0.15);
    color: #93c5fd;
    border: 1px solid rgba(96,165,250,0.3);
}

.tagUncertain {
    background: rgba(251,191,36,0.12);
    color: #fbbf24;
    border: 1px solid rgba(251,191,36,0.25);
}

/* ── Model Insight Cards ── */

.insightCards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-top: 8px;
}

.insightCard {
    background: rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 8px 10px;
    border-top: 2px solid transparent;
}

.insightCardHighlight {
    border-top-color: var(--ins-color, rgba(255,255,255,0.1));
    background: rgba(0,0,0,0.2);
}

.insightCardHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 6px;
}

.insightCardName {
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.insightCardTags {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}

.insightCardStat {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 2px 0;
}

.insightCardStatLabel {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--mutedFaint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 42px;
}

.insightCardStatValue {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--muted);
}

.insightCardStatFrac {
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--mutedFaint);
}

.insightCardStatConfHelp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 0.55rem;
    font-weight: 800;
    color: var(--mutedFaint);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    cursor: help;
    flex-shrink: 0;
    margin-left: 2px;
}

.insightStatBest {
    color: #4ade80;
}

/* Low-accuracy percentage colour — amber instead of green / default when the
   model's accuracy in this league is below the 65% threshold. Standalone of the
   "best in league" highlight: if the model is both low-accuracy AND the best of
   a bad bunch, insightStatBest's green wins (we keep the relative-leader signal
   intact). Otherwise this paints amber so the user reads "below threshold" at a
   glance without hovering. */
.insightStatLow {
    color: #f59e0b !important;
}

/* Warning icon + tooltip — used on insight cards (per-model) and on the market
   table's per-model row. Same icon shape on both for consistency. The tooltip
   is positioned ABOVE the icon by default; on rows near the top of the viewport
   the natural placement avoids being clipped. */
.lowAccIcon,
.foLowAccIcon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    font-size: 10px;
    font-weight: 800;
    cursor: help;
    border: 1px solid rgba(245, 158, 11, 0.45);
    margin-left: 4px;
    flex-shrink: 0;
}

.lowAccIcon:hover .lowAccTip,
.lowAccIcon:focus-visible .lowAccTip,
.foLowAccIcon:hover .foLowAccTip,
.foLowAccIcon:focus-visible .foLowAccTip {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.lowAccTip,
.foLowAccTip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, 4px);
    background: #1f2940;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 11.5px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.45;
    width: 240px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease, transform 150ms ease;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 50;
    text-align: left;
}

.lowAccTip strong,
.foLowAccTip strong { color: #f59e0b; }

.lowAccTip::after,
.foLowAccTip::after {
    content: "";
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--border);
}

/* The market-table low-accuracy tooltip sits next to the model name on the LEFT
   edge of the card, so a centered tooltip overflows and gets clipped by the card.
   Anchor it to the icon's left so it extends RIGHTWARD into the card instead, and
   move the arrow to point at the icon. (Only the foLowAccTip variant — the insight
   cards' .lowAccTip keeps its centered placement.) */
.foLowAccTip {
    left: 0;
    transform: translate(0, 4px);
}
.foLowAccIcon:hover .foLowAccTip,
.foLowAccIcon:focus-visible .foLowAccTip {
    transform: translate(0, 0);
}
.foLowAccTip::after {
    left: 7px;
}

@media (max-width: 768px) {
    .insightCards {
        grid-template-columns: 1fr;
    }

    .upPredRow {
        flex-wrap: wrap;
    }

    .upPredBar,
    .upPredLockedOverlay {
        width: 100%;
        flex-basis: 100%;
    }

    .modelInsightTag {
        font-size: 0.45rem;
        padding: 1px 4px;
    }

    .upPredModel {
        min-width: 58px;
        font-size: 0.6rem;
    }

    .upPredConsensus .upPredBar {
        height: 22px;
    }

    .insightCardHeader {
        flex-wrap: wrap;
    }

    .insightCardStat {
        flex-wrap: wrap;
    }
}

/* ── Tournament series record (W-L) badge under team name ─────
   Shared across upcoming cards, live cards, the match-detail
   header, and the live-detail header. Lives in app.css (not a
   scoped *.razor.css) so every page picks it up without duplicating
   styles. Hidden by callers when the team has no scraped series
   in the resolved tournament. The default size targets card
   surfaces; the .mdTeam / .bcTeamMeta context overrides below
   bump it up so it doesn't read as a typo next to the page-header
   team names (which are 1.3rem+ — a 0.6rem chip looks broken). */
.teamSeriesRecord {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.7);
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.1), rgba(248, 113, 113, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 2px 10px;
    line-height: 1;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    cursor: help;
    white-space: nowrap;
    vertical-align: middle;
}
/* Each segment uses the same line-height and inline-block layout so the W,
   separator, and L all sit on the same baseline. Without this, mixing styled
   <span>s with the plain "-" text node produced a half-pixel offset and the
   loss number visibly dropped. */
.teamSeriesRecord .record-win,
.teamSeriesRecord .record-sep,
.teamSeriesRecord .record-loss {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}
.teamSeriesRecord .record-win { color: #4ade80; font-weight: 900; }
.teamSeriesRecord .record-loss { color: #f87171; font-weight: 900; }
.teamSeriesRecord .record-sep {
    color: rgba(255, 255, 255, 0.4);
    margin: 0 4px;
    font-weight: 700;
}

/* ── Total Maps + Exact Score market UI (global) ──
   Copied verbatim from Home.razor.css so the match-detail and live-detail pages
   (CSS-isolated, not styled by Home.razor.css) render these markets identically to
   the home upcoming card. The home card keeps its own isolated copy; this global
   block additionally covers the home LIVE card and the two detail pages. */
.hcapBar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 14px 0 10px;
    padding: 8px 10px;
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.08), rgba(34, 211, 238, 0.02));
    border: 1px solid #233442;
    border-radius: 10px;
}
.hcapBarLabel {
    color: #22d3ee;
    font-weight: 800;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.hcapBarLines { display: inline-flex; align-items: center; gap: 12px; }
.hcapHdrSide { display: inline-flex; align-items: center; gap: 6px; }
.hcapHdrLogo {
    width: 17px;
    height: 17px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
}
.hcapHdrTxt {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}
.hcapHdrDiv {
    width: 1px;
    height: 18px;
    background: var(--border);
    opacity: 0.9;
}
.hcapSeg {
    margin-left: auto;
    display: inline-flex;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}
.hcapSegBtn {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-weight: 800;
    font-size: 0.76rem;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.hcapSegBtn:hover { color: var(--text); }
.hcapSegBtnOn {
    background: #22d3ee;
    color: #04222a;
}
.esScoreHdr { gap: 10px; }
.esScoreNum {
    font-size: 0.95rem;
    font-weight: 800;
    color: #22d3ee;
    letter-spacing: 0.02em;
}
.esRow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
}
.esRow .upPredModel { min-width: 92px; }
.esBar {
    position: relative;
    flex: 1;
    height: 26px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 7px;
    overflow: hidden;
}
.esBarFill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 6px 0 0 6px;
    transition: width 0.2s ease;
    min-width: 2px;
}
.esBarPct {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.esRowConsensus .esBarFill { background: linear-gradient(90deg, #22d3ee, #0ea5b7); }
/* Consensus model label in Exact Score rows — cyan, matching the model's theme color
   everywhere else (the two-sided rows colour it via .upPredConsensus .upPredModel). */
.esRowConsensus .upPredModel { color: #22d3ee; }
.esBarFillPos { background: linear-gradient(90deg, #22c55e, #16a34a) !important; }
.esBarFillNeg { background: linear-gradient(90deg, #ef4444, #dc2626) !important; }
.esEv {
    flex-shrink: 0;
    font-size: 0.74rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}
.esEvPos { color: #16331f; background: #4ade80; }
.esEvNeg { color: #fff; background: #b91c1c; }
.esNoOdds { font-size: 0.78rem; color: var(--muted); font-style: italic; margin: 4px 0 2px; }
.tmOdds { font-size: 0.8rem; font-weight: 800; color: #fbbf24; margin-left: 6px; }
.newMarketBanner {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.04));
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 0.84rem;
    color: #e6e9f0;
    line-height: 1.45;
}
.newMarketBanner strong { color: #fbbf24; }